From 7140a797cfa4ddf58da2e4482fd1c820cfd8a834 Mon Sep 17 00:00:00 2001
From: Kiro Agent <244629292+kiro-agent@users.noreply.github.com>
Date: Fri, 21 Aug 2026 08:22:07 +0000
Subject: [PATCH 1/2] feat(configurator): guard Inherit reset + add glance
previews to control gaps
Changes panel / value editor: clicking the Inherit tab when an override
exists no longer wipes it in one click. It now arms a confirm banner
(Cancel / Reset) and only the explicit Reset discards the override; with
nothing overridden it stays a harmless no-op. Applies everywhere the
value editor is used (Changes, All-tokens, generic token panels).
In-panel previews: the right-hand live preview is optional and does not
cover every control, so fill the control groups that had no visual:
- Effects: text-shadow legibility swatches over a gradient
- Typography: letter-spacing, line-height and tabular/proportional numerals
- System (Misc): z-index stacking order, icon-size ladder, object-fit,
required field marker (+ safe-area 'no preview' note)
- Shape (Borders): divider rule sample, field-shape input sample
- Layout: live .sf-cluster, .sf-equal and .sf-reel primitives
---
.../src/components/inputs/ValueField.svelte | 48 +++++++++++-
.../src/components/panels/BordersPanel.svelte | 20 +++++
.../src/components/panels/EffectsPanel.svelte | 14 ++++
.../src/components/panels/LayoutPanel.svelte | 31 ++++++++
.../src/components/panels/MiscPanel.svelte | 77 +++++++++++++++++++
.../components/panels/TypographyPanel.svelte | 34 ++++++++
6 files changed, 220 insertions(+), 4 deletions(-)
diff --git a/configurator/src/components/inputs/ValueField.svelte b/configurator/src/components/inputs/ValueField.svelte
index 7e3d81bc..167cf8e4 100644
--- a/configurator/src/components/inputs/ValueField.svelte
+++ b/configurator/src/components/inputs/ValueField.svelte
@@ -22,10 +22,17 @@
let draft = $state("");
let editing = $state(false);
let cancelling = $state(false);
- // Reset a user-selected tab when another surface changes this token.
+ // Switching back to Inherit throws away the override. The tab sits right next
+ // to Value/Expression and reads like a harmless view switch, so a stray click
+ // used to silently wipe an edit. When there's an actual override to lose we
+ // arm this confirm step instead of resetting immediately.
+ let confirmingInherit = $state(false);
+ // Reset a user-selected tab (and any pending confirm) when another surface
+ // changes this token.
$effect(() => {
overrideValue;
manualMode = null;
+ confirmingInherit = false;
});
// Seed the text field from the live value whenever we're not mid-edit.
$effect(() => {
@@ -41,8 +48,22 @@
}
function setMode(m: ValueMode) {
+ if (m === "inherit") {
+ // Nothing overridden → already inheriting, so this is a no-op, not a
+ // destructive reset; just settle on auto-detect.
+ if (overrideValue === undefined) { manualMode = null; confirmingInherit = false; return; }
+ // Otherwise require an explicit confirmation before discarding the value.
+ confirmingInherit = true;
+ return;
+ }
+ confirmingInherit = false;
manualMode = m;
- if (m === "inherit") { onReset(); manualMode = null; }
+ }
+
+ function confirmInherit() {
+ confirmingInherit = false;
+ manualMode = null;
+ onReset();
}
const TABS: { id: ValueMode; label: string }[] = [
@@ -56,11 +77,12 @@
{#each TABS as t (t.id)}
+ {@const active = mode === t.id || (t.id === "inherit" && confirmingInherit)}
+
+ {#if confirmingInherit}
+
+
+ Discard this override and inherit {token.value}?
+
+
+
+
SLASHED flows this text across as many equal columns as fit the box, divided by the column rule. Lower the min column width to pack in more, narrower columns; raise it for fewer, roomier ones. The rule width, style and colour draw the divider.
+
+
@@ -549,6 +568,18 @@
{/if}
+
+
+
+ {#each [1, 2, 3, 4, 5, 6] as n (n)}
+
{n}
+ {/each}
+
+
diff --git a/configurator/src/components/panels/MiscPanel.svelte b/configurator/src/components/panels/MiscPanel.svelte
index f03008a2..8d10ec75 100644
--- a/configurator/src/components/panels/MiscPanel.svelte
+++ b/configurator/src/components/panels/MiscPanel.svelte
@@ -53,6 +53,19 @@
function getSizeValue(t: typeof SIZE_TOKENS[0]): number {
return parseNum(overrides[t.token]?.replace("rem",""), t.default);
}
+
+ const ICON_STEPS = ["xs", "s", "m", "l", "xl", "2xl"];
+
+ // A deliberately landscape (2:1) sample with a centered ring and a full-bleed
+ // border, so object-fit differences are unmistakable: cover crops the sides,
+ // contain letterboxes, fill distorts the circle, none overflows at native px.
+ const OBJECT_FIT_IMG = `data:image/svg+xml,${encodeURIComponent(
+ ``,
+ )}`;
+
+ // Conceptual layering ladder (top rung = highest z). Static preview of the
+ // *order*, since the numeric values themselves have no standalone visual.
+ const Z_LADDER = [...Z_INDEX_STEPS].reverse();
+