From a60b4fe9611e0c24e2f8fad1eea9f05159440634 Mon Sep 17 00:00:00 2001 From: Kiro Agent <244629292+kiro-agent@users.noreply.github.com> Date: Wed, 19 Aug 2026 23:35:41 +0000 Subject: [PATCH 1/2] feat(configurator): hide the preview on tool screens, give them full width MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On the lifecycle/reference tools — Changes, Presets, Install & export, Reference — the live preview sat there showing an irrelevant Color gallery over half the screen while the operation (export CSS, browse classes, review overrides) got a cramped 360px column. These screens now hide the preview entirely and let the panel take the full width (the CSS output, class catalogue and change list all benefit). The mobile Controls/Preview fold bar is hidden there too, since there's nothing to fold to. Accessibility deliberately keeps its preview — the contrast checker reads the rendered colours from the iframe. check, lint, 285 unit tests and shell e2e pass; screenshot + e2e verified the full-width tool layout and that token/Accessibility screens still show the preview. --- configurator/src/App.svelte | 65 ++++++++++++++++++++++++------------- 1 file changed, 42 insertions(+), 23 deletions(-) diff --git a/configurator/src/App.svelte b/configurator/src/App.svelte index d8308f17..a3cd0b23 100644 --- a/configurator/src/App.svelte +++ b/configurator/src/App.svelte @@ -67,6 +67,16 @@ let previewMotion = $state<"normal" | "slow" | "none">("normal"); let previewTemplate = $state("color"); + // Lifecycle / reference tools have no live visual sample, so the preview used + // to sit there showing an irrelevant Color gallery over half the screen. + // For these the preview is hidden and the panel takes the full width instead. + // (Accessibility keeps the preview — its contrast checker reads the rendered + // colours from the iframe.) + const FULLWIDTH_DOMAINS = new Set(["changes", "themes", "setup", "cheatsheet"]); + let hidePreview = $derived(FULLWIDTH_DOMAINS.has(domain)); + // A tool screen has nothing to fold to, so keep the mobile view on controls. + $effect(() => { if (hidePreview) untrack(() => { mobileView = "controls"; }); }); + // Derived let overridesCount = $derived(Object.keys(overrides).length); let domainBadges = $derived(overridesByDomain(overrides)); @@ -317,11 +327,14 @@ -
- {@render foldToggleButton("controls", SlidersHorizontal, "Controls")} - {@render foldToggleButton("preview", Eye, "Preview")} -
+ visible without scrolling and doesn't compete with the status bar. + Hidden on tool screens, which have no preview to fold to. --> + {#if !hidePreview} +
+ {@render foldToggleButton("controls", SlidersHorizontal, "Controls")} + {@render foldToggleButton("preview", Eye, "Preview")} +
+ {/if}
@@ -334,10 +347,12 @@ />
- -
+ +
@@ -373,20 +388,24 @@
- -
- { previewTheme = t; }} - onWidthChange={(w) => { previewWidth = w; }} - onMotionChange={(m) => { previewMotion = m; }} - onTemplateChange={(t) => { previewTemplate = t; }} - /> -
+ + {#if !hidePreview} +
+ { previewTheme = t; }} + onWidthChange={(w) => { previewWidth = w; }} + onMotionChange={(m) => { previewMotion = m; }} + onTemplateChange={(t) => { previewTemplate = t; }} + /> +
+ {/if}
From c61d5ec4327fa61d81f885d2f1175f7ed724ddf5 Mon Sep 17 00:00:00 2001 From: Kiro Agent <244629292+kiro-agent@users.noreply.github.com> Date: Thu, 20 Aug 2026 17:37:04 +0000 Subject: [PATCH 2/2] fix(configurator): clear stale token focus on plain navigation Plain domain navigation (sidebar, mobile nav, and the palette's no-token branch) left a previous search's focusRequest active, so returning to that domain later re-triggered a stale token focus/scroll. Clear focusRequest on those paths. Also gate the palette's "Go to" heading on navCount > 0 so a token-only result set no longer shows an empty "Go to" section. --- configurator/src/App.svelte | 5 +++-- configurator/src/components/CommandPalette.svelte | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/configurator/src/App.svelte b/configurator/src/App.svelte index a3cd0b23..72c0820f 100644 --- a/configurator/src/App.svelte +++ b/configurator/src/App.svelte @@ -342,7 +342,7 @@
{ domain = d; }} + onSelect={(d) => { domain = d; focusRequest = null; }} overridesByDomain={domainBadges} />
@@ -382,7 +382,7 @@ onReset={handleReset} onBulkChange={handleBulkChange} onApplyTheme={handleApplyTheme} - onSelectDomain={(d) => { domain = d; }} + onSelectDomain={(d) => { domain = d; focusRequest = null; }} onResetAll={handleResetAll} /> @@ -422,6 +422,7 @@ onNavigate={(d, token) => { domain = d; if (token) { focusNonce += 1; focusRequest = { token, nonce: focusNonce }; } + else focusRequest = null; // On mobile, deep-linking into a token means we want the controls side. mobileView = "controls"; }} diff --git a/configurator/src/components/CommandPalette.svelte b/configurator/src/components/CommandPalette.svelte index 708a5ac1..bbd9c555 100644 --- a/configurator/src/components/CommandPalette.svelte +++ b/configurator/src/components/CommandPalette.svelte @@ -102,7 +102,7 @@
No matches for "{query}"
{:else} {#each results as r, i (r.kind === "nav" ? `nav:${r.id}` : `tok:${r.token.name}`)} - {#if i === 0} + {#if i === 0 && navCount > 0}
Go to
{/if} {#if r.kind === "token" && i === navCount}