diff --git a/docs/plan-redesign.md b/docs/plan-redesign.md
index a1d2a04..59ed03a 100644
--- a/docs/plan-redesign.md
+++ b/docs/plan-redesign.md
@@ -337,7 +337,7 @@ src/routes/preview/tools/[id]/+page.svelte
### Шаг 4. Переключатель и проверка
- [x] **[C15]** В старой шапке ссылка «Preview v2» → `/preview`, ставит `localStorage['easy-png-tools:preview-v2']='1'`.
-- [x] **[C16]** Внешний вид `/preview/*` приведён к `refs-html/`: тип шага — приглушённый, индекс шага — синий, подпись плитки — синяя, бренд топбара — `--foreground`, `Segmented` 10px/32px, стек шрифтов сверен с рефом; старые тесты прогнаны (без регрессий).
+- [x] **[C16]** База под дизайн: рабочий переключатель тем (persist в localStorage, применяется на ``; проверено — фон `#eef1f4`↔`#11171d`), `TopBar` приведён к виду `demo.html` (бренд + синий хлебный крош `/* страница */`, безрамочные иконки, язык — active = `--foreground`/`--background`), страницы `/preview/*` на всю ширину (убран `max-width`). Точечное выравнивание к рефу отложено: реф-дизайн неконсистентен.
(доказательство отсутствия регресса). Фиксы по результатам — отдельными
мелкими коммитами.
diff --git a/web/src/lib/components/kit/IconButton.svelte b/web/src/lib/components/kit/IconButton.svelte
index 6726e5b..9f1b3fd 100644
--- a/web/src/lib/components/kit/IconButton.svelte
+++ b/web/src/lib/components/kit/IconButton.svelte
@@ -6,10 +6,11 @@
icon: Component<{ size?: number; class?: string }>;
label: string;
onclick?: () => void;
- variant?: "ghost" | "solid" | "accent";
+ variant?: "ghost" | "solid" | "accent" | "bare";
size?: number;
disabled?: boolean;
}
+
let {
icon,
label,
@@ -57,6 +58,18 @@
color: #042;
border-color: var(--cyan);
}
+ .icon-btn--bare {
+ width: auto;
+ height: auto;
+ padding: 6px;
+ border: 0;
+ border-radius: 0;
+ color: var(--muted);
+ }
+ .icon-btn--bare:hover:not(:disabled) {
+ color: var(--foreground);
+ border-color: transparent;
+ }
.icon-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
diff --git a/web/src/lib/components/kit/TopBar.svelte b/web/src/lib/components/kit/TopBar.svelte
index adb3fc0..1eeeed1 100644
--- a/web/src/lib/components/kit/TopBar.svelte
+++ b/web/src/lib/components/kit/TopBar.svelte
@@ -1,15 +1,15 @@
@@ -18,22 +18,31 @@
EP
easy-png-tools
+ {#if crumb}{crumb}{/if}
AUTO PIPELINE
-
{}} />
+ {}} />
-
+
+
+
+
@@ -66,6 +75,11 @@
display: grid;
place-items: center;
}
+ .version {
+ font: 10px var(--font-mono);
+ letter-spacing: 0.12em;
+ color: var(--blue);
+ }
.top-actions {
display: flex;
align-items: center;
@@ -79,4 +93,26 @@
font: 10px var(--font-mono);
letter-spacing: 0.08em;
}
+ .lang {
+ display: inline-flex;
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ overflow: hidden;
+ }
+ .lang-btn {
+ border: 0;
+ background: transparent;
+ color: var(--muted);
+ font: 10px var(--font-mono);
+ letter-spacing: 0.06em;
+ padding: 6px 9px;
+ cursor: pointer;
+ }
+ .lang-btn + .lang-btn {
+ border-left: 1px solid var(--line);
+ }
+ .lang-btn.active {
+ background: var(--foreground);
+ color: var(--background);
+ }
diff --git a/web/src/routes/preview/+layout.svelte b/web/src/routes/preview/+layout.svelte
index c74f21e..f124dd3 100644
--- a/web/src/routes/preview/+layout.svelte
+++ b/web/src/routes/preview/+layout.svelte
@@ -1,6 +1,7 @@
diff --git a/web/src/routes/preview/demo/+page.svelte b/web/src/routes/preview/demo/+page.svelte
index 910dfc0..06893a9 100644
--- a/web/src/routes/preview/demo/+page.svelte
+++ b/web/src/routes/preview/demo/+page.svelte
@@ -250,8 +250,8 @@
grid-template-columns: minmax(0, 1.05fr) minmax(520px, 0.95fr);
align-items: start;
gap: 56px;
- max-width: 1680px;
- margin: 0 auto;
+ max-width: none;
+ margin: auto;
padding: 60px clamp(24px, 4vw, 72px) 72px;
}
.workspace {
diff --git a/web/src/routes/preview/kit/+page.svelte b/web/src/routes/preview/kit/+page.svelte
index 44ead2f..0459dff 100644
--- a/web/src/routes/preview/kit/+page.svelte
+++ b/web/src/routes/preview/kit/+page.svelte
@@ -214,9 +214,9 @@