feat: import and export element (E6)

- golem15-seo-transfer: export by dataset with a Blob download, the
  import file read in the browser and refused over 60 KB, the preview
  table (refused first, 200 rows, scrolling wrapper), Apply gated on
  refused and empty previews, a stale preview kept with the message
- en and pl copy; assets/dist rebuilt
This commit is contained in:
2026-10-27 12:35:26 +01:00
parent ab3b219fec
commit 6f69031c73
6 changed files with 669 additions and 7 deletions

View File

@@ -1,4 +1,4 @@
/* SEO field elements (UI-SPEC C4, C5, C6, C10, C14). Light DOM, every rule
/* SEO field elements (UI-SPEC C4, C5, C6, C10, C13, C14). Light DOM, every rule
scoped under its element tag, colours from the public --c-* variables
only (except the E-1 mimic palette inside golem15-seo-serp .serp-card). */
@@ -7,7 +7,8 @@ golem15-seo-robots,
golem15-seo-serp,
golem15-seo-image,
golem15-seo-robotstxt,
golem15-seo-robotstester {
golem15-seo-robotstester,
golem15-seo-transfer {
display: block;
color: var(--c-text);
font-size: 14px;
@@ -623,6 +624,190 @@ golem15-seo-robotstester .seo-robotstester__note {
font-size: 13px;
}
/* E6 golem15-seo-transfer */
golem15-seo-transfer .seo-transfer__section {
display: flex;
flex-direction: column;
gap: 12px;
}
golem15-seo-transfer .seo-transfer__section--import {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--c-border);
}
golem15-seo-transfer .seo-transfer__heading {
margin: 0;
color: var(--c-text);
font-size: 14px;
font-weight: 600;
}
golem15-seo-transfer .seo-transfer__row {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 8px;
}
golem15-seo-transfer .seo-transfer__field {
display: flex;
flex-direction: column;
gap: 4px;
}
golem15-seo-transfer .seo-transfer__label {
color: var(--c-muted);
font-size: 13px;
}
golem15-seo-transfer .seo-transfer__select {
box-sizing: border-box;
min-width: 240px;
height: 44px;
padding: 0 14px;
border: 1px solid var(--c-border-strong);
border-radius: 10px;
background: var(--c-surface);
color: var(--c-text);
font: inherit;
font-size: 14px;
transition: border-color 150ms, box-shadow 150ms;
}
golem15-seo-transfer .seo-transfer__select:focus {
outline: none;
border-color: var(--c-primary);
box-shadow: 0 0 0 3px var(--c-ring);
}
golem15-seo-transfer .seo-transfer__button {
height: 42px;
padding: 0 16px;
border: 1px solid var(--c-border-strong);
border-radius: 10px;
background: var(--c-surface);
color: var(--c-text);
font: inherit;
font-size: 14px;
cursor: pointer;
}
golem15-seo-transfer .seo-transfer__button--ghost {
border-color: transparent;
background: transparent;
}
golem15-seo-transfer .seo-transfer__button--primary {
border-color: var(--c-primary);
background: var(--c-primary);
color: var(--c-on-primary, var(--c-surface));
}
golem15-seo-transfer .seo-transfer__button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--c-ring);
}
golem15-seo-transfer .seo-transfer__button:disabled {
cursor: default;
opacity: 0.6;
}
golem15-seo-transfer .seo-transfer__filename {
align-self: center;
color: var(--c-text);
font-size: 14px;
overflow-wrap: anywhere;
}
golem15-seo-transfer .seo-transfer__filename--none {
color: var(--c-muted);
}
golem15-seo-transfer .seo-transfer__error {
margin: 0;
color: var(--c-danger);
font-size: 14px;
}
golem15-seo-transfer .seo-transfer__note,
golem15-seo-transfer .seo-transfer__done {
margin: 0;
color: var(--c-muted);
font-size: 13px;
}
golem15-seo-transfer .seo-transfer__link {
color: var(--c-primary);
}
golem15-seo-transfer .seo-transfer__preview {
display: flex;
flex-direction: column;
gap: 12px;
}
golem15-seo-transfer .seo-transfer__summary {
margin: 0;
font-size: 14px;
font-weight: 600;
}
golem15-seo-transfer .seo-transfer__table-wrap {
max-height: 480px;
overflow: auto;
}
golem15-seo-transfer .seo-transfer__num {
font-variant-numeric: tabular-nums;
text-align: right;
}
golem15-seo-transfer .seo-transfer__mono {
font-family: 'DM Mono', ui-monospace, monospace;
overflow-wrap: anywhere;
}
golem15-seo-transfer .seo-transfer__badge {
display: inline-flex;
align-items: center;
height: 24px;
margin-right: 4px;
padding: 0 10px;
border-radius: 999px;
font-size: 12px;
white-space: nowrap;
}
golem15-seo-transfer .seo-transfer__badge--new {
background: var(--c-ok-bg);
color: var(--c-ok-text);
}
golem15-seo-transfer .seo-transfer__badge--changed,
golem15-seo-transfer .seo-transfer__badge--warning {
background: var(--c-sel);
color: var(--c-text);
}
golem15-seo-transfer .seo-transfer__badge--unchanged {
background: var(--c-subtle);
color: var(--c-muted);
}
golem15-seo-transfer .seo-transfer__badge--refused {
background: var(--c-danger-soft);
color: var(--c-danger);
}
golem15-seo-transfer .seo-transfer__actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
@media (max-width: 600px) {
golem15-seo-robots .seo-robots__panel {
grid-template-columns: 1fr;
@@ -637,6 +822,7 @@ golem15-seo-robotstester .seo-robotstester__note {
golem15-seo-robotstxt .seo-robotstxt__control,
golem15-seo-robotstester .seo-robotstester__input,
golem15-seo-robotstester .seo-robotstester__select,
golem15-seo-transfer .seo-transfer__select,
golem15-seo-text .seo-text__control,
golem15-seo-robots .seo-robots__segment,
golem15-seo-serp .seo-serp__segment {