From 21098846971a9cfcc6d512d7fdf782f9a40aa294 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 18 Jul 2026 22:31:57 +0000 Subject: [PATCH 1/2] fix(configurator): dedupe cross-panel controls; full Google Fonts catalogue with mono target MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Redundancy pass across every control panel: - Typography: the Advanced power-knob group duplicated the dedicated "Text/ Display scale multiplier" sliders added under the fluid generators — remove the typography knob domain and the Advanced block; the dedicated sliders inherit the knobs' wider 0.5–2 range. - Focus ring now has one home (Borders): the width knob is removed from the Colors panel and the style picker moves from Misc into Borders' Focus ring section, so width/offset/color/style + preview live together. - Components: drop the reduced duplicate of the global --sf-object-fit picker (Misc owns the full one). Fonts DX: - The Google Font loader gains a Mono target (--sf-font-mono, monospace fallback) alongside Body and Heading. - Replace the 27-font curated dropdown + free-text pair with a single autocomplete input backed by the full Google Fonts catalogue (google-fonts.generated.json — 1942 families + categories, generated from fonts.google.com/metadata/fonts, sorted by popularity). Verified in-browser: exactly two multiplier rows in typography, 1942 datalist options, Mono target applies to --sf-font-mono, Ring style renders in Borders, the Colors knob and Misc section are gone; svelte-check clean, 186 tests pass (three fewer cases — they iterated the removed knobs). Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_013BRVgKfEYocPCHz9KU96FN --- .../src/components/panels/BordersPanel.svelte | 18 +++ .../src/components/panels/ColorsPanel.svelte | 12 -- .../components/panels/ComponentsPanel.svelte | 16 --- .../src/components/panels/MiscPanel.svelte | 32 ------ .../components/panels/TypographyPanel.svelte | 105 +++++++----------- .../src/data/google-fonts.generated.json | 1 + configurator/src/lib/powerKnobs.ts | 20 ---- 7 files changed, 58 insertions(+), 146 deletions(-) create mode 100644 configurator/src/data/google-fonts.generated.json diff --git a/configurator/src/components/panels/BordersPanel.svelte b/configurator/src/components/panels/BordersPanel.svelte index 0c1e54b7..9a9f43d4 100644 --- a/configurator/src/components/panels/BordersPanel.svelte +++ b/configurator/src/components/panels/BordersPanel.svelte @@ -249,6 +249,24 @@ onReset={() => onReset("--sf-focus-ring-color")} /> +
+
Ring style
+
+ {#each BORDER_STYLES as style (style)} + {@const current = overrides["--sf-focus-ring-style"] ?? "solid"} + + {/each} +
+
k.name === "--sf-contrast-bias" || k.name === "--sf-contrast-threshold" ); - const focusKnobs = (KNOBS_BY_DOMAIN["colors"] ?? []).filter( - (k) => k.name === "--sf-focus-ring-width" - ); let showBrandSources = $state(false); let showTextContrast = $state(false); @@ -817,15 +814,6 @@ >Open contrast tool → {/if}
- - - {#each focusKnobs as k (k.name)} - val === null ? onReset(name) : onSet(name, val)} - /> - {/each}
diff --git a/configurator/src/components/panels/ComponentsPanel.svelte b/configurator/src/components/panels/ComponentsPanel.svelte index f81d97cc..1fc15164 100644 --- a/configurator/src/components/panels/ComponentsPanel.svelte +++ b/configurator/src/components/panels/ComponentsPanel.svelte @@ -568,22 +568,6 @@
-
-
Media object-fit — --sf-object-fit (global, affects all img/video)
-
- {#each ["cover", "contain"] as fit (fit)} - {@const cur = overrides["--sf-object-fit"] ?? "cover"} - - {/each} -
-
diff --git a/configurator/src/components/panels/MiscPanel.svelte b/configurator/src/components/panels/MiscPanel.svelte index b09bc1f8..83db9d19 100644 --- a/configurator/src/components/panels/MiscPanel.svelte +++ b/configurator/src/components/panels/MiscPanel.svelte @@ -49,13 +49,11 @@ let caretColor = $derived(overrides["--sf-caret-color"] ?? ""); let underlineOffset = $derived(parseNum(overrides["--sf-link-underline-offset"]?.replace("em",""), 0.15)); let underlineThickness = $derived(overrides["--sf-link-underline-thickness"] ?? "auto"); - let focusRingStyle = $derived(overrides["--sf-focus-ring-style"] ?? "solid"); let showTouchTarget = $state(false); let showScrollBehavior = $state(false); let showZIndex = $state(false); let showTextSelection = $state(false); - let showFocusRingStyle = $state(false); let showComponentSizes = $state(false); let showCaretLinks = $state(false); let showIconSizes = $state(false); @@ -217,36 +215,6 @@
- -
-
- {#each ["solid", "dashed", "dotted"] as style (style)} - {@const current = overrides["--sf-focus-ring-style"] ?? "solid"} - - {/each} -
- -
-
- Focus ring · {focusRingStyle} -
-
-
- -
-

diff --git a/configurator/src/components/panels/TypographyPanel.svelte b/configurator/src/components/panels/TypographyPanel.svelte index 55db8ddf..8da43bb4 100644 --- a/configurator/src/components/panels/TypographyPanel.svelte +++ b/configurator/src/components/panels/TypographyPanel.svelte @@ -1,12 +1,11 @@