From 24c2c143fbc03384e613961665295e2795d64a7c Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 17 Jul 2026 18:13:05 +0000 Subject: [PATCH 1/3] feat(configurator): add Grid gap control + document responsive gap pattern MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add a "Grid gap" control to the Auto grid section of the Layout panel, wired to --sf-grid-gap. It offers the space-scale steps as a dropdown, a rem slider, and a raw-value input — matching the existing gap controls in the Spacing panel. Previously the section only exposed --sf-grid-min, so the grid gap had no dedicated UI. Document the responsive-gap pattern in docs/layout.md: gaps are fluid by default (via the shared space scale), and per-primitive mobile/desktop divergence is done with a @container override of the scoped gap token — no new tokens, consistent with the framework's container-driven model. No core/API changes. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01LeR8DfbqZqKtiFS72AJozP --- .../src/components/panels/LayoutPanel.svelte | 12 +++++++ docs/layout.md | 32 +++++++++++++++++++ 2 files changed, 44 insertions(+) diff --git a/configurator/src/components/panels/LayoutPanel.svelte b/configurator/src/components/panels/LayoutPanel.svelte index 238c2664..f1761206 100644 --- a/configurator/src/components/panels/LayoutPanel.svelte +++ b/configurator/src/components/panels/LayoutPanel.svelte @@ -31,6 +31,7 @@ let centerMax = $derived(parseRem(overrides["--sf-center-max"], 75)); let centerGutter = $derived(parseRem(overrides["--sf-center-gutter"], 1)); let gridMin = $derived(parseRem(overrides["--sf-grid-min"], 16)); + let gridGap = $derived(parseRem(overrides["--sf-grid-gap"], 1)); let headerMobile = $derived(parseRem(overrides["--sf-header-height-mobile"], 3.5)); let headerDesktop = $derived(parseRem(overrides["--sf-header-height-desktop"], 5)); let sidebarWidth = $derived(parseRem(overrides["--sf-sidebar-width"], 18)); @@ -212,6 +213,17 @@ {showAutoGrid ? "▲" : "▼"} {#if showAutoGrid} + onSet("--sf-grid-gap", `${v}rem`)} + onReset={() => onReset("--sf-grid-gap")} + rawDefault="var(--sf-gap)" + variableOptions={SPACE_SCALE} + currentRaw={overrides["--sf-grid-gap"]} + onRawSet={(v) => onSet("--sf-grid-gap", v)} + /> … ``` + +## Responsive gaps + +Gaps are already fluid: `--sf-grid-gap` defaults to `--sf-gap`, which interpolates +between its mobile and desktop ends via the shared space scale. Retune the whole +rhythm at once with the space-scale endpoints (`--sf-space-base-min` / +`--sf-space-base-max`) rather than per-token knobs. + +When one primitive needs a **different** gap on small vs large screens, override +its scoped token inside a `@container` query — the same container-driven model the +primitives themselves use, so the gap reacts to the same width that collapses the +columns. Endpoints stay live tokens, so they still follow any scale retuning: + +```css +.product-grid { --sf-grid-gap: var(--sf-space-l); } + +@container (min-width: 48rem) { + .product-grid { --sf-grid-gap: var(--sf-space-xl); } +} +``` + +```html +
+
…
+
+``` + +The override needs a container ancestor (`.sf-container` or `.sf-cq`) — the same +requirement as `.sf-grid-cols-*`. The gap steps at the breakpoint rather than +interpolating across it; for a gap that single step is imperceptible in normal use. +The same pattern works for any scoped gap token (`--sf-gap`, `--sf-content-gap`, +`--sf-gutter`, `--sf-cluster-gap`, …). From e799111bf5ef9a856a83f97491224457d33ec65e Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 17 Jul 2026 20:13:58 +0000 Subject: [PATCH 2/3] docs(configurator): explain Grid gap step granularity Address review feedback: document why the Grid gap slider uses a finer step (0.0625rem) than the other size controls in LayoutPanel. It matches the gap-token sliders in SpacingPanel (--sf-gap / --sf-content-gap / --sf-gutter), which --sf-grid-gap defaults to, so the grid gap isn't tuned more coarsely than the token it inherits from. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01LeR8DfbqZqKtiFS72AJozP --- configurator/src/components/panels/LayoutPanel.svelte | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/configurator/src/components/panels/LayoutPanel.svelte b/configurator/src/components/panels/LayoutPanel.svelte index f1761206..d3c0027e 100644 --- a/configurator/src/components/panels/LayoutPanel.svelte +++ b/configurator/src/components/panels/LayoutPanel.svelte @@ -213,6 +213,11 @@ {showAutoGrid ? "▲" : "▼"} {#if showAutoGrid} + Date: Fri, 17 Jul 2026 20:15:16 +0000 Subject: [PATCH 3/3] fix(configurator): reflect grid gap in the Auto grid preview Address review feedback: the Auto grid preview used a hardcoded gap-1 class, so the new Grid gap slider produced no visible change. Drive the preview's gap from gridGap, scaled the same way as the column widths, so the control is self-demonstrating and consistent with the live gridMin preview. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01LeR8DfbqZqKtiFS72AJozP --- configurator/src/components/panels/LayoutPanel.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/configurator/src/components/panels/LayoutPanel.svelte b/configurator/src/components/panels/LayoutPanel.svelte index d3c0027e..94cfd1a0 100644 --- a/configurator/src/components/panels/LayoutPanel.svelte +++ b/configurator/src/components/panels/LayoutPanel.svelte @@ -260,8 +260,8 @@
Preview at 360px panel width
{#each Array.from({ length: 8 }) as _, i (i)}
col