Theme Builder: accordion panels across the full config surface, vertical-tab nav, reflective gallery

docs/exploration/chart-theming-scope.md

@@ -205,10 +205,12 @@ schema-typed model, or it silently drops those keys on a round-trip. Same shape
 
 **Resolved design points:**
 
-- **Surfacing — inline tab strip** (not popovers, not sub-modals). Tabs (Color / Type /
-  Layout / Axes & grid / Legend) sit between the toolbar and the JSON+gallery, all in the
-  one xlarge modal. No nested overlays/focus traps, no contention with the one-open-popover
-  registry, and panels + JSON + gallery stay visible together.
+- **Surfacing — vertical tab list + per-panel accordion** (not popovers, not sub-modals),
+  all in the one xlarge modal. One panel per config domain, switched by a vertical tab rail
+  (L1); within a panel, related properties group into a single-expand accordion (L2). No
+  nested overlays/focus traps, no contention with the one-open-popover registry; panel + JSON
+  - gallery stay visible together. The two-level grouping rule is recorded in arch 10
+    (_Organizing a large control surface_).
 - **Color model — scheme picker that materializes to swatches.** A `range` family takes
   either an explicit color array or a named scheme written as Vega's range-scheme object
   `{ scheme: name }`. (A bare scheme-name _string_ passes vega-lite compile but Vega
@@ -223,24 +225,34 @@ schema-typed model, or it silently drops those keys on a round-trip. Same shape
 - Controls write **minimal** config — clearing a value deletes the key rather than writing
   a default, so a theme stays a diff against stock, not a full dump.
 
-**Panels:** Color (`range.category` swatches/scheme, `mark.color`, `range.heatmap`/`ramp`/
-`diverging`) · Type (base `font`, title + axis title/label size+weight) · Layout (`background`
-incl. transparent, `padding`, `view.stroke`/`fill`/cornerRadius) · Axes & grid (grid on/off +
-color + dash, domain, label color/angle, title color — base `axis` only; the 25 variants stay
-JSON) · Legend (orient, title/label color+size, symbol size). Legend _type_ (size) lives in
-the Legend panel rather than Type, so every legend property a brand tunes sits together.
+**Panels** (each an accordion of the groups below): Color (`range.category`, `mark.color`,
+sequential `range.heatmap`/`ramp`, `range.diverging`) · Marks (per type — bars, lines &
+areas, points, arc — plus generic opacity/fill/tooltips) · Type (base `font`, axis
+title/label size+weight) · Title (anchor, colour, size/weight/style, offset, subtitle block)
+· Layout (`background`, `view` fill/border/radius, `padding`, default size) · Axes & grid
+(grid, ticks, domain, labels — base `axis` only; the per-channel variants stay JSON) · Legend
+(placement/direction, title, labels, symbols, gradient, box) · Headers (facet title/label
+colour/size/weight) · Formats (number/date/normalized formats, count title).
 
 **Build order:** (a) core foundation — scheme catalog + immutable config path get/set +
-`schemeColors` materialize, with tests; (b) Color panel (highest payoff); (c) Type, Layout,
-Axes, Legend panels; (d) wire the tab strip into the modal.
-
-**Not in slice 4b:** the house style's own gaps — no `mark.color` (single-series charts stay
-Vega-blue), unset legend/header/padding — are left for a separate house-style redo, not
-papered over here. Minor cleanup noted: `theme-preview-specs.ts` declares `$schema` v5 while
-the app standardizes on v6.
+`schemeColors` materialize, with tests; (b) Color panel (highest payoff); (c) the remaining
+per-domain panels; (d) wire the navigation (vertical tabs + per-panel accordion) into the
+modal.
 
 ## 6. Status log
 
+- **2026-06-21** — **structured-control surface expanded + accordion everywhere.** New panels
+  — Marks (per mark type), Title & subtitle, Headers (facets), Formats — and deepened
+  Axes/Legend/Layout, covering the brand-tuning bulk of the config; the raw JSON stays the
+  escape hatch for the long tail. Every panel is a single-expand accordion with a per-section
+  set-count badge, switched by a vertical tab list, and the modal holds one
+  `id → label → Panel` registry. Shared primitives extracted: `WeightRow` (UI),
+  `enumValue`/`countSet` (core). The gallery is now fully reflective — sample specs use bare
+  marks so no control is shadowed (guarded by a test), and a normalized area + a temporal
+  facet were added so `normalizedNumberFormat` and `timeFormat` have mirrors; default chart
+  size and tooltips are the only non-previewable controls. Recorded in arch 10 (_Organizing a
+  large control surface_), arch 05 (_Structured controls_), and spec §04. Remaining in §4:
+  Google Fonts opt-in tier; built-in preset gallery; Color-panel swatch reorder.
 - **2026-06-16 (slice 7)** — **font export round-trip + SVG embed.** Uploaded faces now
   survive a workspace transfer and travel inside an exported SVG. Core: `serializeFontAsset`/
   `deserializeFontAsset` (+ base64 helpers), `primaryFamilyName`, and `fontDataUri` in