From a236e4866460dfe30bc2c19e6d8c8da8549a0cc8 Mon Sep 17 00:00:00 2001
From: mochi <mochi@nuffle.me>
Date: Fri, 5 Jun 2026 14:50:01 -0400
Subject: [PATCH] refactor!: Control/Field taxonomy + Panel/Section chrome
 rename
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduce a two-tier widget model and clearer chrome names. No external
consumers yet, so the breaking renames land now.

Controls vs Fields (controls/, was fields/):
- Extract a bare `*Control` for every value input (Text/Number/Textarea/
  Slider/Select/Color/Boolean) — pure widget: value/onChange, widget props,
  readonly, a `level` prop (→ data-stage-level) + forwarded validation
  handlers. No caption, no Field, no validation.
- Refactor each `*Field` to compose its control as the single source of
  truth (BooleanField excepted — its caption must live inside the Kobalte
  root for label association, so it keeps bespoke wiring; BooleanControl is
  a parallel bare widget).
- Share `ControlValidationProps` (level + focus/hover handlers).

Chrome rename (layout/, was panes/):
- SidePane → Panel, Module → Section, EditorPanes → EditorPanels.
- EditorPanels slot props leftSide/rightSide → leftPanel/rightPanel.
- localStorage prefixes stage-pane:/stage-module: → stage-panel:/stage-section:.
- CSS: .stage-pane*/.stage-module* → .stage-panel*/.stage-section*; matching
  token renames (panel-header-height, section-header-pad/body-pad,
  color-section-header-*).

Other:
- LabelField → Label (bare display, no suffix).
- Add seven `*Control` exports + types; bare-control demo in the playground.
- Update architecture.md (Control/Field taxonomy), README, CLAUDE.md, NEXT-UP.

typecheck + 248 tests + build all green.
---
 CLAUDE.md                                     |   9 +-
 NEXT-UP.md                                    |  10 +-
 README.md                                     |  91 +++---
 docs/architecture.md                          | 208 +++++++------
 .../ActionButton.test.tsx                     |   0
 .../src/{fields => controls}/ActionButton.tsx |   0
 .../src/{fields => controls}/BaseButton.tsx   |   0
 .../src/controls/BooleanControl.test.tsx      |  72 +++++
 .../src/controls/BooleanControl.tsx           |  88 ++++++
 .../BooleanField.test.tsx                     |   0
 .../src/{fields => controls}/BooleanField.tsx |   0
 .../{fields => controls}/ButtonGroup.test.tsx |   0
 .../src/{fields => controls}/ButtonGroup.tsx  |   0
 .../ButtonGroupField.test.tsx                 |   0
 .../{fields => controls}/ButtonGroupField.tsx |   0
 .../src/controls/ColorControl.test.tsx        |  54 ++++
 .../solid-stage/src/controls/ColorControl.tsx | 256 ++++++++++++++++
 .../{fields => controls}/ColorField.test.tsx  |   0
 .../solid-stage/src/controls/ColorField.tsx   |  63 ++++
 .../src/{fields => controls}/Field.test.tsx   |   0
 .../src/{fields => controls}/Field.tsx        |   0
 .../{fields => controls}/FieldBar.test.tsx    |   0
 .../src/{fields => controls}/FieldBar.tsx     |   0
 .../{fields => controls}/FieldGroup.test.tsx  |   0
 .../src/{fields => controls}/FieldGroup.tsx   |   0
 .../{fields => controls}/IconButton.test.tsx  |   0
 .../src/{fields => controls}/IconButton.tsx   |   0
 .../IconButtonField.test.tsx                  |   0
 .../{fields => controls}/IconButtonField.tsx  |   0
 .../{fields => controls}/IconToggle.test.tsx  |   0
 .../src/{fields => controls}/IconToggle.tsx   |   0
 .../IconToggleField.test.tsx                  |   0
 .../{fields => controls}/IconToggleField.tsx  |   0
 .../{fields => controls}/InfoIcon.test.tsx    |   0
 .../src/{fields => controls}/InfoIcon.tsx     |   0
 .../Label.test.tsx}                           |  24 +-
 .../LabelField.tsx => controls/Label.tsx}     |  10 +-
 .../src/controls/NumberControl.test.tsx       |  52 ++++
 .../src/controls/NumberControl.tsx            |  69 +++++
 .../{fields => controls}/NumberField.test.tsx |   0
 .../solid-stage/src/controls/NumberField.tsx  |  66 +++++
 .../src/controls/SelectControl.test.tsx       |  86 ++++++
 .../SelectControl.tsx}                        | 107 +++----
 .../{fields => controls}/SelectField.test.tsx |   0
 .../solid-stage/src/controls/SelectField.tsx  |  78 +++++
 .../src/controls/SliderControl.test.tsx       |  51 ++++
 .../src/controls/SliderControl.tsx            |  80 +++++
 .../{fields => controls}/SliderField.test.tsx |   0
 .../solid-stage/src/controls/SliderField.tsx  |  62 ++++
 .../src/controls/TextControl.test.tsx         |  49 ++++
 .../solid-stage/src/controls/TextControl.tsx  |  44 +++
 .../{fields => controls}/TextField.test.tsx   |   0
 .../src/{fields => controls}/TextField.tsx    |  33 +--
 .../src/controls/TextareaControl.test.tsx     |  51 ++++
 .../src/controls/TextareaControl.tsx          |  74 +++++
 .../TextareaField.test.tsx                    |   0
 .../src/controls/TextareaField.tsx            |  65 +++++
 .../ToggleButton.test.tsx                     |   0
 .../src/{fields => controls}/ToggleButton.tsx |   0
 .../createFieldValidation.ts                  |  15 +
 .../solid-stage/src/fields/ColorField.tsx     | 273 ------------------
 .../solid-stage/src/fields/NumberField.tsx    |  91 ------
 .../solid-stage/src/fields/SliderField.tsx    |  96 ------
 .../solid-stage/src/fields/TextareaField.tsx  | 102 -------
 packages/solid-stage/src/index.ts             |  74 +++--
 .../EditorPanels.test.tsx}                    | 144 ++++-----
 .../EditorPanels.tsx}                         |  88 +++---
 .../Panel.test.tsx}                           | 150 +++++-----
 .../{panes/SidePane.tsx => layout/Panel.tsx}  |  98 +++----
 .../Section.test.tsx}                         | 194 ++++++-------
 .../{panes/Module.tsx => layout/Section.tsx}  |  68 ++---
 .../src/{panes => layout}/TabMenu.test.tsx    |   0
 .../src/{panes => layout}/TabMenu.tsx         |   0
 .../src/{panes => layout}/Toolbar.test.tsx    |   0
 .../src/{panes => layout}/Toolbar.tsx         |   0
 .../solid-stage/src/{panes => layout}/size.ts |   0
 packages/solid-stage/src/layout/types.ts      |   1 +
 packages/solid-stage/src/overlay/modal.tsx    |  10 +-
 packages/solid-stage/src/panes/types.ts       |   1 -
 .../src/state/createEditorStore.test.tsx      |   2 +-
 packages/solid-stage/src/state/persist.ts     |   4 +-
 packages/solid-stage/src/theme/base.css       | 166 +++++------
 packages/solid-stage/src/theme/fields.css     |  24 +-
 packages/solid-stage/src/theme/modal.css      |  12 +-
 packages/solid-stage/src/theme/tokens.css     |  24 +-
 playground/src/App.tsx                        | 159 +++++-----
 playground/src/styles.css                     |   6 +-
 87 files changed, 2271 insertions(+), 1383 deletions(-)
 rename packages/solid-stage/src/{fields => controls}/ActionButton.test.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/ActionButton.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/BaseButton.tsx (100%)
 create mode 100644 packages/solid-stage/src/controls/BooleanControl.test.tsx
 create mode 100644 packages/solid-stage/src/controls/BooleanControl.tsx
 rename packages/solid-stage/src/{fields => controls}/BooleanField.test.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/BooleanField.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/ButtonGroup.test.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/ButtonGroup.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/ButtonGroupField.test.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/ButtonGroupField.tsx (100%)
 create mode 100644 packages/solid-stage/src/controls/ColorControl.test.tsx
 create mode 100644 packages/solid-stage/src/controls/ColorControl.tsx
 rename packages/solid-stage/src/{fields => controls}/ColorField.test.tsx (100%)
 create mode 100644 packages/solid-stage/src/controls/ColorField.tsx
 rename packages/solid-stage/src/{fields => controls}/Field.test.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/Field.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/FieldBar.test.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/FieldBar.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/FieldGroup.test.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/FieldGroup.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/IconButton.test.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/IconButton.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/IconButtonField.test.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/IconButtonField.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/IconToggle.test.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/IconToggle.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/IconToggleField.test.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/IconToggleField.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/InfoIcon.test.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/InfoIcon.tsx (100%)
 rename packages/solid-stage/src/{fields/LabelField.test.tsx => controls/Label.test.tsx} (76%)
 rename packages/solid-stage/src/{fields/LabelField.tsx => controls/Label.tsx} (88%)
 create mode 100644 packages/solid-stage/src/controls/NumberControl.test.tsx
 create mode 100644 packages/solid-stage/src/controls/NumberControl.tsx
 rename packages/solid-stage/src/{fields => controls}/NumberField.test.tsx (100%)
 create mode 100644 packages/solid-stage/src/controls/NumberField.tsx
 create mode 100644 packages/solid-stage/src/controls/SelectControl.test.tsx
 rename packages/solid-stage/src/{fields/SelectField.tsx => controls/SelectControl.tsx} (55%)
 rename packages/solid-stage/src/{fields => controls}/SelectField.test.tsx (100%)
 create mode 100644 packages/solid-stage/src/controls/SelectField.tsx
 create mode 100644 packages/solid-stage/src/controls/SliderControl.test.tsx
 create mode 100644 packages/solid-stage/src/controls/SliderControl.tsx
 rename packages/solid-stage/src/{fields => controls}/SliderField.test.tsx (100%)
 create mode 100644 packages/solid-stage/src/controls/SliderField.tsx
 create mode 100644 packages/solid-stage/src/controls/TextControl.test.tsx
 create mode 100644 packages/solid-stage/src/controls/TextControl.tsx
 rename packages/solid-stage/src/{fields => controls}/TextField.test.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/TextField.tsx (62%)
 create mode 100644 packages/solid-stage/src/controls/TextareaControl.test.tsx
 create mode 100644 packages/solid-stage/src/controls/TextareaControl.tsx
 rename packages/solid-stage/src/{fields => controls}/TextareaField.test.tsx (100%)
 create mode 100644 packages/solid-stage/src/controls/TextareaField.tsx
 rename packages/solid-stage/src/{fields => controls}/ToggleButton.test.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/ToggleButton.tsx (100%)
 rename packages/solid-stage/src/{fields => controls}/createFieldValidation.ts (88%)
 delete mode 100644 packages/solid-stage/src/fields/ColorField.tsx
 delete mode 100644 packages/solid-stage/src/fields/NumberField.tsx
 delete mode 100644 packages/solid-stage/src/fields/SliderField.tsx
 delete mode 100644 packages/solid-stage/src/fields/TextareaField.tsx
 rename packages/solid-stage/src/{panes/EditorPanes.test.tsx => layout/EditorPanels.test.tsx} (63%)
 rename packages/solid-stage/src/{panes/EditorPanes.tsx => layout/EditorPanels.tsx} (73%)
 rename packages/solid-stage/src/{panes/SidePane.test.tsx => layout/Panel.test.tsx} (63%)
 rename packages/solid-stage/src/{panes/SidePane.tsx => layout/Panel.tsx} (68%)
 rename packages/solid-stage/src/{panes/Module.test.tsx => layout/Section.test.tsx} (56%)
 rename packages/solid-stage/src/{panes/Module.tsx => layout/Section.tsx} (70%)
 rename packages/solid-stage/src/{panes => layout}/TabMenu.test.tsx (100%)
 rename packages/solid-stage/src/{panes => layout}/TabMenu.tsx (100%)
 rename packages/solid-stage/src/{panes => layout}/Toolbar.test.tsx (100%)
 rename packages/solid-stage/src/{panes => layout}/Toolbar.tsx (100%)
 rename packages/solid-stage/src/{panes => layout}/size.ts (100%)
 create mode 100644 packages/solid-stage/src/layout/types.ts
 delete mode 100644 packages/solid-stage/src/panes/types.ts

diff --git a/CLAUDE.md b/CLAUDE.md
index 19781ce..dbff073 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -35,9 +35,10 @@ packages/solid-stage/    # the published artefact
   src/
     index.ts             # public exports only — keep narrow
     test-utils.ts        # mount() helper — internal, NOT in index.ts
-    panes/               # EditorPanes, SidePane, Module, size.ts
+    layout/              # EditorPanels, Panel, Section, Toolbar, TabMenu, size.ts
     canvas/              # CanvasStage, layers.ts
-    fields/              # Field + FieldGroup, value fields, button family,
+    controls/            # Field + FieldGroup + FieldBar, *Control widgets,
+                         #   *Field wrappers, button family, Label,
                          #   createFieldValidation, InfoIcon
     overlay/             # stageTooltip, modal
     state/               # createEditorStore, createPersistedToggle, persist.ts
@@ -67,10 +68,10 @@ that's the global default (explicit > implicit).
 
 happy-dom 15.x doesn't ship a `ResizeObserver` or `IntersectionObserver`.
 `CanvasStage` source guards with `typeof ResizeObserver !== 'undefined'`;
-`CanvasStage.test.tsx` stubs it via `vi.stubGlobal`. Likewise `SidePane` tracks
+`CanvasStage.test.tsx` stubs it via `vi.stubGlobal`. Likewise `Panel` tracks
 overflow with an `IntersectionObserver` over top/bottom sentinels (guarded the
 same way, NOT a scroll handler — an `onScroll` that positions elements is a
-scroll-linked effect Firefox warns about); `SidePane.test.tsx` stubs
+scroll-linked effect Firefox warns about); `Panel.test.tsx` stubs
 `IntersectionObserver` and drives the callback by hand.
 
 Kobalte fields work under happy-dom, but the event that drives a value change
diff --git a/NEXT-UP.md b/NEXT-UP.md
index e7e5730..7d09175 100644
--- a/NEXT-UP.md
+++ b/NEXT-UP.md
@@ -18,14 +18,14 @@ design driven by the next real consumer.
 
 `PageSelector` exists only in `osrs-engine-study`. Greenfield in the library.
 
-## Module strip-icon bar
+## Section strip-icon bar
 
-Collapsed `SidePane` currently shows only the chevron. Later: a vertical
-column of module icons (consumer-provided list). Requires deciding on an
+Collapsed `Panel` currently shows only the chevron. Later: a vertical
+column of section icons (consumer-provided list). Requires deciding on an
 icon-pack approach without bloating the dep surface.
 
-NB: this is **not** resolved by `Module`'s `icon` prop (a header-chevron
-override on an *expanded* module) or `SidePane`'s `toggleVariant="edge"` (an
+NB: this is **not** resolved by `Section`'s `icon` prop (a header-chevron
+override on an *expanded* section) or `Panel`'s `toggleVariant="edge"` (an
 edge collapse toggle). Those are separate, shipped features; this item is still
 the collapsed-strip vertical icon column.
 
diff --git a/README.md b/README.md
index 7d9d4d6..62a9ddd 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
 # @nuffle/solid-stage
 
-Small library of Solid + Three editor chrome primitives — collapsible side panes,
-sectioned modules, and a multi-layer canvas stage. Extracted from two consumer
-apps that independently grew the same shape.
+Small library of Solid + Three editor chrome primitives — collapsible side
+panels, collapsible sections, and a multi-layer canvas stage. Extracted from two
+consumer apps that independently grew the same shape.
 
 ## Install
 
@@ -17,6 +17,29 @@ Configure your registry to resolve the `@nuffle` scope:
 @nuffle:registry=https://gitea.homelab.nuffle.me/api/packages/nuffle/npm/
 ```
 
+## Controls & Fields
+
+The library splits its interactive widgets into two tiers:
+
+- A **Control** is the bare widget — a value (`value` / `onChange`), its
+  widget-specific props (`min`/`max`, `options`, `alpha`, …), and nothing else.
+  No caption, no field row. Drop one straight into a toolbar or compose your own
+  layout. Seven ship: `TextControl`, `NumberControl`, `TextareaControl`,
+  `SliderControl`, `SelectControl`, `ColorControl`, `BooleanControl`.
+- A **Field** is the captioned, value-bound row that *composes* a control — it
+  adds the label, the layout (`compact` / `expanded` / `bar`), the description,
+  the info bubble, and validation, then renders the matching control inside.
+  Each `*Field` is the `*Control` plus that field chrome: `TextField`,
+  `NumberField`, `TextareaField`, `SliderField`, `SelectField`, `ColorField`,
+  `BooleanField`.
+
+The control is the single source of truth; the field never re-implements the
+widget. (`BooleanField` is the one exception — its caption must live inside the
+Kobalte root for click-to-toggle, so it keeps a bespoke label rather than
+wrapping `BooleanControl`.) `Field` / `FieldGroup` / `FieldBar` /
+`createFieldValidation` are the shared field-row machinery; `Label` is bare
+display text (neither field nor control).
+
 ## Type scale & row height
 
 The library is opinionated about layout: **it owns the type scale (font-size +
@@ -36,19 +59,19 @@ the 640px breakpoint (iOS Safari zoom guard).
 
 **The tiers cascade.** The tokens are CSS custom properties, so a tier set on any
 level flows down to everything inside it, and a nested level can re-tier to
-override its ancestor — stage → pane → module → field. Set it with a `size` prop
-(`'small' | 'normal' | 'large'`) at each level instead of the class:
+override its ancestor — stage → panel → section → field. Set it with a `size`
+prop (`'small' | 'normal' | 'large'`) at each level instead of the class:
 
-- `EditorPanes` — `size` (whole stage), `leftSize` / `rightSize` (one pane).
-- `SidePane` — `size` (the pane: header + modules + fields).
-- `Module` — `size` (the module's **fields only**; its header keeps the pane
-  size, so an info-dense module can shrink its rows without its header falling out
+- `EditorPanels` — `size` (whole stage), `leftSize` / `rightSize` (one panel).
+- `Panel` — `size` (the panel: header + sections + fields).
+- `Section` — `size` (the section's **fields only**; its header keeps the panel
+  size, so an info-dense section can shrink its rows without its header falling out
   of line).
 
 Use the explicit `.stage-size-normal` class (or `size="normal"`) to reset a
 subtree back to normal under a `small` / `large` ancestor.
 
-The module header and the toolbars are part of the grid too: a header is one
+The section header and the toolbars are part of the grid too: a header is one
 control-height, and a bar's height tracks the control-height of the controls it
 hosts.
 
@@ -108,25 +131,25 @@ stageTooltip.hide(el);
 ```
 
 Positioning is handled by `@floating-ui/dom` with `strategy: 'fixed'`, so the
-bubble escapes pane `overflow` clipping. The single host element re-parents into
+bubble escapes panel `overflow` clipping. The single host element re-parents into
 the triggering field's nearest `.stage-root` so that root's token overrides
 cascade.
 
 ## Modal
 
 A single app-level modal for settings-style flows: open it, edit, close it. It
-dims the page, centres one rounded container hosting a `Module`, traps focus, and
+dims the page, centres one rounded container hosting a `Section`, traps focus, and
 restores it to the opener on close. Clicks on the dim neither close the modal nor
-pass through to content beneath; closing is the module's `×`, the Escape key, or
+pass through to content beneath; closing is the section's `×`, the Escape key, or
 `stageModal.close()`.
 
 Render `StageModalHost` **once**, inside your `.stage-root`. Then open it from
 anywhere with a thunk (a function returning the content — not pre-built JSX, so it
-mounts under the host's reactive owner). The hosted `Module` takes an `onClose`
+mounts under the host's reactive owner). The hosted `Section` takes an `onClose`
 prop, which renders its `×` and makes the header static (no collapse):
 
 ```tsx
-import { StageModalHost, stageModal, Module, FieldGroup, TextField } from '@nuffle/solid-stage';
+import { StageModalHost, stageModal, Section, FieldGroup, TextField } from '@nuffle/solid-stage';
 
 // once, near the app root:
 <StageModalHost />
@@ -134,11 +157,11 @@ import { StageModalHost, stageModal, Module, FieldGroup, TextField } from '@nuff
 // from any handler:
 stageModal.open(
   () => (
-    <Module title="Application Settings" onClose={() => stageModal.close()}>
+    <Section title="Application Settings" onClose={() => stageModal.close()}>
       <FieldGroup>
         <TextField name="Project name" value={name} onChange={setName} />
       </FieldGroup>
-    </Module>
+    </Section>
   ),
   { label: 'Application Settings' },
 );
@@ -150,15 +173,15 @@ validation tooltips opened inside the modal portal into it and stack correctly
 above the dim. It is a plain descendant of your `.stage-root`, so it inherits all
 your token overrides cleanly — nothing to re-declare.
 
-## Module header actions
+## Section header actions
 
-Put icon buttons on a module's title bar (copy / lock / popout, …) with
+Put icon buttons on a section's title bar (copy / lock / popout, …) with
 `headerActions` — a list of `{ icon, title, onClick, active?, disabled?, tone? }`.
 Each renders as a borderless `IconButton` in the **subtle** variant (a muted glyph
 whose shape lights up on hover, no accent fill when toggled on); `title` is the
 accessible name and the native hover tooltip. As secondary meta-actions they are
 **mouse-only** (not in the tab order, no focus ring). Clicking an action never
-toggles the module, and in a dismissable (modal) module they sit left of the `×`.
+toggles the section, and in a dismissable (modal) section they sit left of the `×`.
 
 The `subtle` and `tabbable` props are also available on `IconButton` directly, for
 secondary icon buttons elsewhere.
@@ -166,7 +189,7 @@ secondary icon buttons elsewhere.
 ```tsx
 import { Copy, Lock } from 'lucide-solid';
 
-<Module
+<Section
   title="Layer"
   headerActions={[
     { icon: Copy, title: 'Duplicate', onClick: duplicate },
@@ -174,12 +197,12 @@ import { Copy, Lock } from 'lucide-solid';
   ]}
 >
   {/* … */}
-</Module>
+</Section>
 ```
 
-## Module icon
+## Section icon
 
-Override a module's `▾`/`▸` collapse chevron with a custom glyph via `icon`
+Override a section's `▾`/`▸` collapse chevron with a custom glyph via `icon`
 (an `IconComponent`, like `headerActions`). One icon serves both open and closed
 states; swap it per-state from the consumer side via `open()`/`onToggle` if a
 state-dependent glyph is wanted. The glyph tracks the size tier like an icon
@@ -188,25 +211,25 @@ button. Collapse still works exactly as before.
 ```tsx
 import { Layers } from 'lucide-solid';
 
-<Module title="Layers" icon={Layers}>{/* … */}</Module>
+<Section title="Layers" icon={Layers}>{/* … */}</Section>
 ```
 
-## SidePane edge collapse
+## Panel edge collapse
 
-By default a `SidePane` (and an `EditorPanes` left/right pane) collapses via a
-toggle in a **top header strip**. Pass `toggleVariant="edge"` (on `SidePane`, or
-`leftToggleVariant` / `rightToggleVariant` on `EditorPanes`) to move the toggle to
-a **full-height vertical bar on the pane's inside edge** instead — reclaiming the
-header strip's vertical space for module content. Collapsed, the toggle fills the
-full pane height.
+By default a `Panel` (and an `EditorPanels` left/right panel) collapses via a
+toggle in a **top header strip**. Pass `toggleVariant="edge"` (on `Panel`, or
+`leftToggleVariant` / `rightToggleVariant` on `EditorPanels`) to move the toggle to
+a **full-height vertical bar on the panel's inside edge** instead — reclaiming the
+header strip's vertical space for section content. Collapsed, the toggle fills the
+full panel height.
 
 ```tsx
-<EditorPanes rightSide={panel} rightToggleVariant="edge" center={<Stage />} />
+<EditorPanels rightPanel={panel} rightToggleVariant="edge" center={<Stage />} />
 ```
 
 ## TabMenu
 
-A horizontal tab strip for a bar slot (e.g. an `EditorPanes` `topSub`), modelled
+A horizontal tab strip for a bar slot (e.g. an `EditorPanels` `topSub`), modelled
 on an object/document tab bar: each tab has an `×` close (middle-click also
 closes), an optional `+` new-tab button rendered as a tab inline at the end of the
 strip, and overflow surfaces `‹`/`›` scroll arrows. Library chrome glyphs are
diff --git a/docs/architecture.md b/docs/architecture.md
index 3cbbbc4..0694b45 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -19,11 +19,11 @@ both independently grew the same shape.
 The load-bearing principles. Everything else is downstream of these; a new
 feature that violates one is almost certainly wrong.
 
-1. **Pre-composed children, not registries.** `EditorPanes` takes
-   `leftSide?: JSX.Element`, not `leftModules: ModuleId[]`; `Module` takes
+1. **Pre-composed children, not registries.** `EditorPanels` takes
+   `leftPanel?: JSX.Element`, not `leftSections: SectionId[]`; `Section` takes
    `children`, not a field schema; every bar is a pre-composed `Toolbar` (or
    plain JSX), not a bar config object. Naming the collapsible container
-   `Module` does **not** imply a module registry / id-keyed lookup — that
+   `Section` does **not** imply a section registry / id-keyed lookup — that
    mapping is app-specific. Composition stays child-based throughout.
 
 2. **Controlled + uncontrolled, mirrored everywhere.** Anything with state
@@ -31,7 +31,7 @@ feature that violates one is almost certainly wrong.
    with an `internalOpen()` signal fallback. Canonical accessor:
    `isOpen = () => props.open?.() ?? internalOpen()`. In uncontrolled mode the
    internal signal seeds from / writes back to localStorage where a primitive
-   persists (`Module` collapse, pane collapse); controlled mode leaves
+   persists (`Section` collapse, panel collapse); controlled mode leaves
    persistence to the parent (never caches).
 
 3. **CSS classes + variables, no inline styles.** Every classname is `stage-*`.
@@ -39,7 +39,7 @@ feature that violates one is almost certainly wrong.
    Consumers override by setting variables on any container. The library never
    writes `!important` — `:where()` (specificity 0) lets consumer overrides win
    without it. The library ships no inline-`style` escape hatch; the style hook
-   is a `class` prop (e.g. `LabelField`).
+   is a `class` prop (e.g. `Label`).
 
 4. **Icons are consumer-supplied; no bundled icon pack.** Library chrome uses
    unicode glyphs (`▸`/`▾`, `«`/`»`, `×`/`+`/`‹`/`›`). Icon-button components
@@ -52,10 +52,10 @@ feature that violates one is almost certainly wrong.
    SSR-safe. Documented in `README.md`. Do not add SSR shims or `typeof window`
    dances beyond the one `typeof ResizeObserver !== 'undefined'` guard.
 
-6. **The chrome is centre-agnostic; the *world* is a canvas.** `EditorPanes`
+6. **The chrome is centre-agnostic; the *world* is a canvas.** `EditorPanels`
    takes an arbitrary `center: JSX.Element` — the chrome could host any middle
    (DOM page-builder preview, code buffer, node graph). Do **not** narrow
-   `EditorPanes` to canvases. But `CanvasStage` and the focus model that treats
+   `EditorPanels` to canvases. But `CanvasStage` and the focus model that treats
    "the world" as a single non-tabbable boundary *are* canvas-specific: the
    multi-layer world/HUD/pointer z-stack + viewport ResizeObserver describe a
    viewport onto a continuous spatial scene. The tell: the moment a centre is
@@ -80,7 +80,7 @@ the deferred list. Resist scope creep.
   live inside a `.stage-root` subtree.
 - **Portalled content mounts into the nearest `.stage-root`**, not
   `document.body` — otherwise tokens don't resolve and consumer overrides don't
-  cascade. It also escapes pane `overflow` clipping and sits above chrome via
+  cascade. It also escapes panel `overflow` clipping and sits above chrome via
   `--stage-z-popover`. The modal extends this: lookups are
   `.closest('.stage-root, .stage-modal-container')` so fields opened *inside* a
   modal portal into the container (see §7).
@@ -105,7 +105,7 @@ the deferred list. Resist scope creep.
   carries the whole type-colour scheme. `--stage-color-on-accent` is *not* part of
   this group — it's the glyph colour on an accent fill and is pinned to contrast
   the accent, not the text. No hover variant by design: the *header background*
-  hover (`--stage-color-module-header-hover-bg`) is the hover affordance, not a
+  hover (`--stage-color-section-header-hover-bg`) is the hover affordance, not a
   glyph colour shift — don't add a `--stage-color-text-hover` nothing consumes.
 - **`--stage-colorpicker-*` is dimensions, not colour.** The ColorField popover's
   width/area/track/thumb sizes use the `colorpicker` stem (no hyphen after
@@ -171,10 +171,10 @@ font-size forfeits the row-height guarantee.
   `sm`/`md` width split is gone — classes kept for API compat, now equivalent).
   The glyph is sized by `--stage-icon-size` (`calc(control-height − 7px)`)
   applied to the `<svg>` via `.stage-button svg` (CSS overrides lucide's attrs).
-- **Module header is one control-height** (`min-height`, horizontal-only
+- **Section header is one control-height** (`min-height`, horizontal-only
   padding) so it lines up with its field rows. Styled as *a field label rendered
   bold* — `--stage-color-text-muted`, `--stage-font-size` (tier), `font-weight: 700`.
-  Header height + font read the *inherited* (pane) tier, so a module re-tiering
+  Header height + font read the *inherited* (panel) tier, so a section re-tiering
   its own body never resizes its header.
 - **Bar height derives from control-height:** `--stage-toolbar-height: calc(control-height + 8px)`;
   every top/bottom/sub/stage bar flows through `.stage-toolbar`.
@@ -189,21 +189,21 @@ font-size forfeits the row-height guarantee.
 ### The cascade & the `size` prop
 The three tier tokens inherit, so setting a tier (a `.stage-size-*` class or the
 raw token) on any element resizes everything inside it; a nested element can
-re-tier to override its ancestor. This is the whole cascade — stage → pane →
-module → field, plus bars — for free.
+re-tier to override its ancestor. This is the whole cascade — stage → panel →
+section → field, plus bars — for free.
 
 `size?: ControlSize` (`'small' | 'normal' | 'large'`) exposes it at three
 levels:
-- `EditorPanes.size` (whole stage, the `.stage-panes` root); `leftSize` /
-  `rightSize` forward into the internal `SidePane`s (consumer composes panes via
-  `leftSide`/`rightSide`, not a `SidePane` directly).
-- `SidePane.size` (header + modules + fields).
-- `Module.size` — **applied to `.stage-module-body`, not the module root** — so
-  it resizes the module's *fields* while the header keeps the inherited *pane*
-  size (an info-dense module can go `small` without its header falling out of
+- `EditorPanels.size` (whole stage, the `.stage-panels` root); `leftSize` /
+  `rightSize` forward into the internal `Panel`s (consumer composes panels via
+  `leftPanel`/`rightPanel`, not a `Panel` directly).
+- `Panel.size` (header + sections + fields).
+- `Section.size` — **applied to `.stage-section-body`, not the section root** — so
+  it resizes the section's *fields* while the header keeps the inherited *panel*
+  size (an info-dense section can go `small` without its header falling out of
   line). This body-scoping is why no structural change was needed.
 
-Helper `panes/size.ts` `sizeClassList(size)` returns a 3-key classList fragment
+Helper `layout/size.ts` `sizeClassList(size)` returns a 3-key classList fragment
 (all keys present so Solid's diff swaps tiers reactively); spread into a
 `classList`. `.stage-size-normal` exists as a reset because the default is
 *unclassed*, so a subtree under a small/large ancestor needs an explicit class
@@ -263,44 +263,44 @@ unaffected.
   touched". (macOS Safari/Firefox don't focus `<button>`s on click, which would
   make the button ring keyboard-only there, so `BaseButton` forces `focus()` on
   click; value fields focus on click natively everywhere.)
-- **Module header is the deliberate `:focus-visible` exception** — a structural
+- **Section header is the deliberate `:focus-visible` exception** — a structural
   section toggle, not a value you tab between; a lingering full-width ring on
   every click would be noise (hover bg + chevron already signal it). Borderless,
   so its cue is an *inset* outline (`outline-offset: -1px` — a real border would
   shift layout and fight the open/closed bottom-border divider) plus the hover
   background.
-- **Space + Enter both activate** every toggle/button-like control. Module
+- **Space + Enter both activate** every toggle/button-like control. Section
   headers + IconButton/ActionButton/ToggleButton are native `<button>`s (free).
   `BooleanField` sits on a native checkbox (Space toggles, Enter doesn't), so it
   adds an Enter→toggle `onKeyDown` (no-op when readonly).
 
-### SidePane tab containment
-Keyboard tab order is **native, not a registry**: a module header toggle is a
-`<button>` and a module body only renders when open (`<Show>`), so DOM-order
-tabbing already gives `toggle → its fields → next toggle`; a collapsed module
+### Panel tab containment
+Keyboard tab order is **native, not a registry**: a section header toggle is a
+`<button>` and a section body only renders when open (`<Show>`), so DOM-order
+tabbing already gives `toggle → its fields → next toggle`; a collapsed section
 tabs straight to the next header; reorder-proof (native reads live DOM). Header
 *action* icons are mouse-only (`tabindex=-1`), so they're skipped.
 
 The custom layer is small:
 - Chrome is removed from the tab order (`tabindex=-1` on the expanded chevron +
   both scroll-hint buttons). The **collapsed-strip button stays tabbable** so a
-  keyboard user can still expand a closed pane.
-- An `onKeyDown` on `.stage-pane-scroll-content`: **Escape blurs the active
+  keyboard user can still expand a closed panel.
+- An `onKeyDown` on `.stage-panel-scroll-content`: **Escape blurs the active
   element** (the deliberate exit — the next Tab resumes outward from there); and
   **Tab past either end holds focus on the edge field** (`preventDefault`, no
-  move) rather than escaping into the next pane / page chrome.
+  move) rather than escaping into the next panel / page chrome.
 
 *Why hold, not blur or wrap:* a programmatic `blur()` doesn't reset the
 browser's focus-navigation start point, so the next Tab just resumes forward in
-DOM order and crosses into the sibling pane (DOM order is left → centre →
+DOM order and crosses into the sibling panel (DOM order is left → centre →
 right); wrapping to the other end would jar a long scrolled list to the top.
 Holding sidesteps both. Boundary detection queries the content's tab stops
-(`paneTabbables` — focusable, not `disabled`, not `tabindex="-1"` **by
+(`panelTabbables` — focusable, not `disabled`, not `tabindex="-1"` **by
 attribute**, since the computed `tabIndex` property misreports
 natively-focusable elements) and acts only when the active element is the first
 (Shift+Tab) or last (Tab); mid-list Tabs are native (not a wrap-trap).
 
-Caveat: a soft keyboard stop — Tab can't move *forward* out of a pane, so
+Caveat: a soft keyboard stop — Tab can't move *forward* out of a panel, so
 Escape is the keyboard exit. Kobalte overlays (select/colour) portal outside the
 subtree, so their own Escape-to-close + focus management never reach the
 handler.
@@ -311,56 +311,56 @@ The modal reuses this tab-stop rule but **wraps** instead of holding (see §7).
 
 ## 5. Chrome primitives
 
-### EditorPanes
+### EditorPanels
 Outer CSS-grid shell, five rows: full-width `top` bar / full-width `topToolbars`
-stack / pane band (`1fr`) / full-width `bottomToolbars` stack / full-width
-`bottom` bar. Side panes occupy the band (`grid-row: 3`) only. `topSub` /
+stack / panel band (`1fr`) / full-width `bottomToolbars` stack / full-width
+`bottom` bar. Side panels occupy the band (`grid-row: 3`) only. `topSub` /
 `bottomSub` are canvas-aligned toolbar stacks *inside* the centre cell (column
 2) so their edges match the stage.
 
-- A root `EditorPanes` is `position: fixed; inset: 0` (owns the window).
+- A root `EditorPanels` is `position: fixed; inset: 0` (owns the window).
   `embedded` makes it `position: relative` to fill a parent slot — the recursion
   point, since `center` is `JSX.Element` and already accepts another
-  `EditorPanes`.
+  `EditorPanels`.
 - **Multi-stage composition (still a sketch):** an outer stage with bars + no
-  panes whose `center` holds two embedded stages (e.g. left-pane-only primary +
-  right-pane-only secondary), all sharing one `createEditorStore`. See §8 for
+  panels whose `center` holds two embedded stages (e.g. left-panel-only primary +
+  right-panel-only secondary), all sharing one `createEditorStore`. See §8 for
   the open questions.
-- `persistKey` **caches each pane's collapse state** (uncontrolled only) under
-  `stage-pane:<persistKey>:left` / `:right`, via the shared `readFlag`/`writeFlag`
+- `persistKey` **caches each panel's collapse state** (uncontrolled only) under
+  `stage-panel:<persistKey>:left` / `:right`, via the shared `readFlag`/`writeFlag`
   kernel in `state/persist.ts`. Seed precedence: cached → `defaultLeftCollapsed`
-  → expanded; a controlled pane never caches. `persistKey` *is* the per-stage
+  → expanded; a controlled panel never caches. `persistKey` *is* the per-stage
   namespace — give each stage in a split a distinct one.
 - Forwards `leftSize`/`rightSize` and `leftToggleVariant`/`rightToggleVariant`
-  into the internal panes.
+  into the internal panels.
 
-### SidePane
+### Panel
 Collapsible side panel. Tab/focus behaviour is §4. `toggleVariant`
 (`'header'` default | `'edge'`, fixed per instance like `side`) moves the
 collapse toggle: `'edge'` drops the top header strip and puts a full-height
-vertical toggle bar on the pane's *inside* edge (right edge for a left pane,
-left for a right — `.stage-pane-edge-button`), reclaiming the header's vertical
-space; collapsed, the strip toggle fills full pane height
-(`.stage-pane-strip-edge`). The edge button is chrome (`tabindex=-1`). No grid
+vertical toggle bar on the panel's *inside* edge (right edge for a left panel,
+left for a right — `.stage-panel-edge-button`), reclaiming the header's vertical
+space; collapsed, the strip toggle fills full panel height
+(`.stage-panel-strip-edge`). The edge button is chrome (`tabindex=-1`). No grid
 change — the edge bar sits inside the existing expanded-width track.
 
 Overflow is tracked with an `IntersectionObserver` over top/bottom sentinels
 (guarded for happy-dom), **not** a scroll handler — an `onScroll` that positions
 elements is a scroll-linked effect Firefox warns about.
 
-### Module
+### Section
 Collapsible container (header + chevron + body); the unit a consumer builds
-editor UI from. Holds anything — naming it `Module` does **not** imply a registry
+editor UI from. Holds anything — naming it `Section` does **not** imply a registry
 (see thesis §1).
 
-- **Persists collapse to localStorage out of the box** (`stage-module:<persistKey ?? title>`;
+- **Persists collapse to localStorage out of the box** (`stage-section:<persistKey ?? title>`;
   `persist={false}` opts out). Seed precedence: cached → `defaultOpen` → open
-  (default *expanded*; "no cached value" reads as expanded). Controlled modules
+  (default *expanded*; "no cached value" reads as expanded). Controlled sections
   (`open()` supplied) never cache.
 - **Dismissable `onClose` mode:** header static (no chevron/toggle/hover), body
   always open, persistence skipped, a `×` button top-right calls `onClose`. This
-  is the shape the global modal hosts; the prop lives on `Module` generally.
-- **`headerActions`** (`ModuleHeaderAction[]`: `{ icon, title*, onClick, active?,
+  is the shape the global modal hosts; the prop lives on `Section` generally.
+- **`headerActions`** (`SectionHeaderAction[]`: `{ icon, title*, onClick, active?,
   disabled?, tone? }`) puts icon buttons on the title bar — each a **borderless**
   IconButton (`border` is never exposed; the header skin is always borderless),
   with the **`subtle` variant** + **`tabbable={false}`** (secondary meta-actions:
@@ -368,20 +368,20 @@ editor UI from. Holds anything — naming it `Module` does **not** imply a regis
   brightens on hover with no bg, press flashes faint bg, active stays
   bright-shape with no accent fill). `title` is required (icon-only → aria-label
   + native hover tooltip; deliberately no styled info tooltip — native `title`
-  is enough). In a dismissable module they sit left of the `×`.
+  is enough). In a dismissable section they sit left of the `×`.
 - **The header is a `<div>` row, not one `<button>`:** a toggle `<button>`
   (chevron + title, `flex:1` + `align-self:stretch` so its hover fill spans the
-  row) on the left, then a `.stage-module-header-actions` cluster of *sibling*
+  row) on the left, then a `.stage-section-header-actions` cluster of *sibling*
   buttons on the right — so clicking an action never bubbles to the toggle (no
   nested `<button>`, no accidental collapse). Horizontal padding moved off the
   header onto toggle/title/actions so the toggle hover reaches the left edge.
 - **`icon`** (`IconComponent`) replaces the `▾`/`▸` chevron with a custom glyph
-  (`.stage-module-icon`, sized by `--stage-icon-size`): *one* icon for both
+  (`.stage-section-icon`, sized by `--stage-icon-size`): *one* icon for both
   states — swap per-state consumer-side via `open()`/`onToggle`. In a
-  dismissable module it renders before the static title.
+  dismissable section it renders before the static title.
 
 ### TabMenu
-Horizontal tab-strip **bar control** (not a field/module), modelled on a
+Horizontal tab-strip **bar control** (not a field/section), modelled on a
 document/object tab bar.
 
 - Each `.stage-tab` has an `×` close (middle-click closes too via `onAuxClick`
@@ -389,7 +389,7 @@ document/object tab bar.
   strip at the end (scrolls with the tabs; only when `onNewTab` is set).
   Overflow surfaces `‹`/`›` scroll arrows (a `ResizeObserver` over the strip
   toggles them, guarded for happy-dom). Glyphs are unicode per thesis §4 —
-  bare-glyph stage buttons (precedent `.stage-module-close`), not IconButton.
+  bare-glyph stage buttons (precedent `.stage-section-close`), not IconButton.
 - **Controlled + uncontrolled mirrored:** uncontrolled seeds internal signals
   from `initialTabs` (strings → `{id:gen(),label}`) + `defaultActiveId` (else
   first tab); controlled passes `tabs()` (+ usually `activeId()`) and the hooks
@@ -427,14 +427,49 @@ viewport so `onResize` excludes the bars. Source guards
 
 ---
 
-## 6. Field framework (`src/fields/`)
+## 6. Field framework (`src/controls/`)
 
 Ported once both consumers grew the same shape. A `Field` layout base +
-`FieldGroup`, value fields (Text / Number / Textarea / Color / Select / Boolean
-/ Slider), a display-only `LabelField`, a button family (IconButton / IconToggle
-/ ActionButton / ToggleButton / ButtonGroup / ButtonGroupField), and icon fields
+`FieldGroup`, seven bare value **controls** (Text / Number / Textarea / Color /
+Select / Boolean / Slider) each paired with a captioned **field** wrapper of the
+same name, a display-only `Label`, a button family (IconButton / IconToggle /
+ActionButton / ToggleButton / ButtonGroup / ButtonGroupField), and icon fields
 (IconButtonField / IconToggleField).
 
+### Control vs Field
+The widgets split into two tiers, mirroring the industry hierarchy (Control =
+any interactive widget; Field = the captioned, value-bound subset):
+
+- A **`*Control`** is the bare widget — a value (`value` / `onChange`), its
+  widget-specific props (`min`/`max`/`step`, `options`/`optionLabels`,
+  `placeholder`, `alpha`, `variant`, …), `readonly`, an `aria-label`, plus a
+  `level?: 'error' | 'warn'` (→ `data-stage-level` on the widget) and the three
+  validation handlers (`onFocusIn` / `onFocusOut` / `onPointerEnter`) it forwards
+  onto its root. It renders **only** the widget DOM (the `.stage-input`, the
+  `.stage-slider` cluster, the select trigger + portal, the colour hex + swatch +
+  popover, the bare switch/checkbox). No caption, no `Field`, no
+  `createFieldValidation`. The shared `ControlValidationProps` type
+  (`controls/createFieldValidation.ts`) carries `level` + the handlers.
+- A **`*Field`** is the captioned row that **composes** the control: it runs
+  `createFieldValidation`, wraps `<Field name … fieldType … info … description …>`,
+  and renders the bare control inside the render-prop, threading
+  `level={v.borderLevel()}` and `{...v.controlHandlers}` through. The control is
+  the single source of truth for the widget; the field never re-implements it.
+  Example — `SliderField` is just
+  `<Field …>{(value) => <SliderControl value={value} … level={v.borderLevel()} {...v.controlHandlers} />}</Field>`.
+
+Both halves are public (the bare control for a consumer composing their own
+layout, e.g. a slider in a toolbar; the field for the captioned row). The bare
+controls emit the **same widget classes** the fields always did, so the theme is
+shared — only the field row (`.stage-field-*`) is absent from a bare control.
+
+**The Boolean exception.** `BooleanField` does *not* compose `BooleanControl`.
+Click-the-label-to-toggle needs the caption inside the Kobalte `Switch`/`Checkbox`
+root for label association, so the field keeps its own bespoke caption wiring;
+`BooleanControl` is a parallel bare widget (the switch/checkbox with no caption,
+rooted on `.stage-boolean-control`). It is the one pair that doesn't collapse to
+the generic compose-a-control contract.
+
 ### Layout
 Every row is a `.stage-field-control` carrying a layout class
 (`stage-compact` | `stage-expanded`) + a per-type class (`stage-field-{type}`).
@@ -445,13 +480,14 @@ expanded-only).
 
 The caption span is **`.stage-field-name`** (matching the `name` prop; the
 expanded caption row is `.stage-field-name-row`) — renamed from
-`.stage-field-label` so that segment is free for `LabelField`'s per-type
+`.stage-field-label` so that segment is free for `Label`'s per-type
 discriminator.
 
 ### Kobalte wrapping
-**Every value field wraps a Kobalte headless primitive** (text-field /
+**Every value control wraps a Kobalte headless primitive** (text-field /
 number-field / select / switch / checkbox / slider / color) while keeping our
-public accessor+event API and our `Field` layout (complete as of v0.5.0).
+public accessor+event API; the matching field composes that control and adds the
+`Field` layout (complete as of v0.5.0).
 
 - The button + icon fields stay ours **deliberately, not a gap**: they're
   already native `<button>`s, and Kobalte's `Button` primitive only confers
@@ -493,7 +529,7 @@ visual classes + children.
   redundant holdover.
 
 ### Per-field notes
-- **LabelField** — static, display-only descriptive text (module blurb, status
+- **Label** — static, display-only descriptive text (section blurb, status
   line, bar app title). No value, no `onChange`, untouched by `bind()`; the
   consumer drives it via a reactive `text` string (Solid props are reactive — no
   setter API needed). No caption/value split — a single full-width `.stage-label`
@@ -570,7 +606,7 @@ The library's first global singleton. One self-mounting "speech-bubble" popout.
   (never re-created) into the triggering anchor's nearest `.stage-root` so that
   root's tokens cascade (fallback `document.body`). Positioned by
   `@floating-ui/dom` (`computePosition` + `autoUpdate` + `arrow`,
-  `strategy:'fixed'` so it escapes pane `overflow`). `@floating-ui/dom` is a
+  `strategy:'fixed'` so it escapes panel `overflow`). `@floating-ui/dom` is a
   direct dep (auto-externalized by vite.config; already transitive via Kobalte).
 - Four levels (`info`/`success`/`warn`/`error`) → `stage-tooltip-{level}` skins
   from `--stage-tooltip-{level}-{bg,text,border}` (color-mix tokens). Fade via
@@ -596,7 +632,7 @@ The library's first global singleton. One self-mounting "speech-bubble" popout.
   not a diamond), side chosen from the resolved placement. **One element ever** —
   `hide` releases content but leaves the host in the DOM. SSR-guarded.
 
-### createFieldValidation (`fields/createFieldValidation.ts`)
+### createFieldValidation (`controls/createFieldValidation.ts`)
 The one factory the 7 value wrappers share (no 7× focus/hover duplication).
 Computes a reactive `result` (helpers FIRST, first failure wins, then `validate`
 in a try/catch → `console.error` + treat-as-valid; **never trap the user**,
@@ -613,7 +649,7 @@ control, keyed in fields.css after the focus rules so it out-specifies the focus
 white) plus the tooltip. `validationState` stays on the Kobalte primitives for
 ARIA only.
 
-### Info bubble (`fields/InfoIcon.tsx`)
+### Info bubble (`controls/InfoIcon.tsx`)
 `info?: string | (()=>string)` renders a built-in lucide-style info `<svg>`
 (`InfoIcon`, no lucide import; override via `IconComponent`) beside the caption
 (only when `info` set AND `name!==''`). The icon is **mouse-only**
@@ -632,7 +668,7 @@ exported and composed onto each value field's props.
 The library's second global singleton — one app-level modal for settings-style
 flows. Unlike the self-mounting tooltip it needs a one-time `<StageModalHost>`
 mounted inside the consumer's `.stage-root`; the `stageModal` controller (`open`
-/ `close` / `isOpen`) pokes module-level signals the host reads.
+/ `close` / `isOpen`) pokes section-level signals the host reads.
 
 - **`open` takes a *thunk* `() => JSX.Element`, NOT pre-built JSX** — it's called
   from event handlers (no Solid owner), so eager JSX would orphan its effects;
@@ -650,14 +686,14 @@ mounted inside the consumer's `.stage-root`; the `stageModal` controller (`open`
 - **The container is deliberately NOT a nested `.stage-root`** — that would
   re-assert the `:where(.stage-root)` default tokens and drop consumer overrides
   (a switch's accent went grey inside the modal); as a plain descendant it
-  inherits every token cleanly. Its `max-width` is `1.5×` the expanded pane width
+  inherits every token cleanly. Its `max-width` is `1.5×` the expanded panel width
   (token-coupled).
 - The host owns a11y: **focus trap** (hard Tab **wrap** within
-  `focusables(container)` — the SidePane tab-stop rule but wrap, not hold),
+  `focusables(container)` — the Panel tab-stop rule but wrap, not hold),
   **Escape closes**, **focus restored to the opener** on close (captured in
   `open()`, restored in a `createEffect(on(content))`), plus
   `role=dialog` + `aria-modal` + optional `open(..., { label })` → `aria-label`.
-- It hosts a single `Module` in its `onClose` (dismissable) mode (§5).
+- It hosts a single `Section` in its `onClose` (dismissable) mode (§5).
 
 ---
 
@@ -674,7 +710,7 @@ notification is the consumer's `createEffect` — no subscribe API.
 
 ### createPersistedToggle(key, default)
 A `createSignal`-shaped `[value, setValue]` whose writes mirror to localStorage
-(same `readFlag`/`writeFlag` kernel as `Module`/pane collapse). For **chrome/
+(same `readFlag`/`writeFlag` kernel as `Section`/panel collapse). For **chrome/
 layout state the library doesn't render itself** — chiefly split-view stage
 visibility, where the app owns the `<Show>`/mount decision (a canvas tears down
 its GL context on unmount, so only the app can own that) but the *state* belongs
@@ -682,35 +718,35 @@ with the other `stage-*` flags, not the versioned editor-content store. The
 returned pair can also feed a controlled `collapsed`/`onToggle` slot directly.
 
 ### The persist kernel (`state/persist.ts`)
-One shared `readFlag`/`writeFlag` pair underpins `Module` collapse, pane collapse
-(`EditorPanes.persistKey`), and `createPersistedToggle`. It never traps the user
+One shared `readFlag`/`writeFlag` pair underpins `Section` collapse, panel collapse
+(`EditorPanels.persistKey`), and `createPersistedToggle`. It never traps the user
 (read/parse failures are swallowed, mirrored by `createFieldValidation`).
 
 ---
 
 ## 9. Multi-stage model (sketch)
 
-The recursive-stage layout (§5 EditorPanes) is **still a sketch** (playground
+The recursive-stage layout (§5 EditorPanels) is **still a sketch** (playground
 demo only). What's proven: recursion via `embedded`, one shared
-`createEditorStore`, per-stage pane-collapse namespacing via `persistKey`, and
+`createEditorStore`, per-stage panel-collapse namespacing via `persistKey`, and
 the library/app split for visibility (`createPersistedToggle`).
 
-The deliberate asymmetry: a **pane** collapse is library-owned (stays mounted,
+The deliberate asymmetry: a **panel** collapse is library-owned (stays mounted,
 shrinks to a strip); a **stage**'s visibility is app-owned structure with
 library-owned state (the GL-context-teardown reason above).
 
 Open questions before this leaves "sketch":
 - **Stage naming** — no naming/identity scheme yet.
 - **Focus/Tab across stages** — the cross-stage focus story is unspecified
-  (within a pane is handled, §4).
-- **Per-stage *module* persist-key namespacing** — panes are namespaced by
-  `persistKey`; modules still key globally by `title`.
+  (within a panel is handled, §4).
+- **Per-stage *section* persist-key namespacing** — panels are namespaced by
+  `persistKey`; sections still key globally by `title`.
 
 ---
 
 ## 10. Hard rules — what NOT to do
 
-- **Don't add a module registry.** `EditorPanes` takes children (thesis §1).
+- **Don't add a section registry.** `EditorPanels` takes children (thesis §1).
 - **Don't hard-`import` `lucide-solid`** (or `clsx`, or any icon/styling helper)
   in library source. Icons come through the `IconComponent` prop; lucide is an
   optional peer. Library chrome uses unicode glyphs + CSS variables (thesis §4).
diff --git a/packages/solid-stage/src/fields/ActionButton.test.tsx b/packages/solid-stage/src/controls/ActionButton.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/ActionButton.test.tsx
rename to packages/solid-stage/src/controls/ActionButton.test.tsx
diff --git a/packages/solid-stage/src/fields/ActionButton.tsx b/packages/solid-stage/src/controls/ActionButton.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/ActionButton.tsx
rename to packages/solid-stage/src/controls/ActionButton.tsx
diff --git a/packages/solid-stage/src/fields/BaseButton.tsx b/packages/solid-stage/src/controls/BaseButton.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/BaseButton.tsx
rename to packages/solid-stage/src/controls/BaseButton.tsx
diff --git a/packages/solid-stage/src/controls/BooleanControl.test.tsx b/packages/solid-stage/src/controls/BooleanControl.test.tsx
new file mode 100644
index 0000000..99fae9b
--- /dev/null
+++ b/packages/solid-stage/src/controls/BooleanControl.test.tsx
@@ -0,0 +1,72 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { mount } from '../test-utils';
+import { BooleanControl } from './BooleanControl';
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('BooleanControl', () => {
+  it('renders a switch by default and emits on change', () => {
+    const onChange = vi.fn();
+    const { host, dispose } = mount(() => (
+      <BooleanControl value={() => false} onChange={onChange} aria-label="On" />
+    ));
+    expect(host.querySelector('.stage-switch')).not.toBeNull();
+    expect(host.querySelector('.stage-checkbox')).toBeNull();
+    const box = host.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    box.checked = true;
+    box.dispatchEvent(new Event('change', { bubbles: true }));
+    expect(onChange).toHaveBeenCalledWith(true);
+    dispose();
+  });
+
+  it('renders a checkbox for variant="checkbox"', () => {
+    const { host, dispose } = mount(() => (
+      <BooleanControl value={() => true} onChange={() => {}} variant="checkbox" />
+    ));
+    expect(host.querySelector('.stage-checkbox')).not.toBeNull();
+    expect(host.querySelector('.stage-switch')).toBeNull();
+    dispose();
+  });
+
+  it('toggles on Enter, but not when readonly', () => {
+    const onChange = vi.fn();
+    const rw = mount(() => <BooleanControl value={() => false} onChange={onChange} />);
+    (rw.host.querySelector('input[type="checkbox"]') as HTMLInputElement).dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
+    );
+    expect(onChange).toHaveBeenCalledWith(true);
+    rw.dispose();
+
+    const onChangeRo = vi.fn();
+    const ro = mount(() => (
+      <BooleanControl value={() => false} onChange={onChangeRo} readonly={() => true} />
+    ));
+    const box = ro.host.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    expect(box.disabled).toBe(true);
+    box.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    expect(onChangeRo).not.toHaveBeenCalled();
+    ro.dispose();
+  });
+
+  it('forwards the level prop onto the hidden input data-stage-level', () => {
+    const { host, dispose } = mount(() => (
+      <BooleanControl value={() => false} onChange={() => {}} level="error" />
+    ));
+    expect(
+      host.querySelector('.stage-boolean-input')?.getAttribute('data-stage-level'),
+    ).toBe('error');
+    dispose();
+  });
+
+  it('has no field row (bare widget — no caption)', () => {
+    const { host, dispose } = mount(() => (
+      <BooleanControl value={() => false} onChange={() => {}} />
+    ));
+    expect(host.querySelector('.stage-field-control')).toBeNull();
+    expect(host.querySelector('.stage-boolean-control')).not.toBeNull();
+    dispose();
+  });
+});
diff --git a/packages/solid-stage/src/controls/BooleanControl.tsx b/packages/solid-stage/src/controls/BooleanControl.tsx
new file mode 100644
index 0000000..a602726
--- /dev/null
+++ b/packages/solid-stage/src/controls/BooleanControl.tsx
@@ -0,0 +1,88 @@
+import { Checkbox } from '@kobalte/core/checkbox';
+import { Switch } from '@kobalte/core/switch';
+import { Show, type JSX } from 'solid-js';
+import type { ControlValidationProps } from './createFieldValidation';
+
+export type BooleanControlVariant = 'toggle' | 'checkbox';
+
+export interface BooleanControlProps extends ControlValidationProps {
+  readonly value: () => boolean;
+  readonly onChange: (next: boolean) => void;
+  /** `'toggle'` (default) renders a sliding switch; `'checkbox'` a tick box. */
+  readonly variant?: BooleanControlVariant | undefined;
+  readonly readonly?: (() => boolean) | undefined;
+  /** Accessible name for the control (a `BooleanField` renders a visible caption instead). */
+  readonly 'aria-label'?: string | undefined;
+}
+
+/**
+ * Bare boolean control built on Kobalte's `Switch` (toggle) / `Checkbox`
+ * (checkbox) — the widget half of `BooleanField`, with no caption. The hidden
+ * `.stage-boolean-input` is the focusable element; the `.stage-switch` /
+ * `.stage-checkbox` next to it is the visual. Space toggles natively; Enter is
+ * standardized to toggle too (matching the native buttons + section headers).
+ * `readonly` maps to `disabled` (a switch/checkbox has no `readonly` semantics —
+ * `readonly` would still be toggleable).
+ *
+ * Unlike the other widgets, a `BooleanField` does *not* compose this control: the
+ * caption must live inside the Kobalte root for click-the-label-to-toggle
+ * association, so the field keeps its own bespoke label wiring.
+ */
+export function BooleanControl(props: BooleanControlProps): JSX.Element {
+  const isToggle = (): boolean => (props.variant ?? 'toggle') === 'toggle';
+  const disabled = (): boolean => props.readonly?.() === true;
+  // The underlying control is a native checkbox: Space toggles it, but Enter does
+  // nothing. Standardize on both keys by toggling on Enter ourselves.
+  const onKeyDown = (e: KeyboardEvent): void => {
+    if (e.key === 'Enter' && !disabled()) {
+      e.preventDefault();
+      props.onChange(!props.value());
+    }
+  };
+  return (
+    <Show
+      when={isToggle()}
+      fallback={
+        <Checkbox
+          class="stage-boolean-control"
+          checked={props.value()}
+          onChange={(next) => props.onChange(next)}
+          disabled={disabled()}
+          aria-label={props['aria-label']}
+        >
+          <Checkbox.Input
+            class="stage-boolean-input"
+            attr:data-stage-level={props.level}
+            onKeyDown={onKeyDown}
+            onFocusIn={props.onFocusIn}
+            onFocusOut={props.onFocusOut}
+            onPointerEnter={props.onPointerEnter}
+          />
+          <Checkbox.Control class="stage-checkbox">
+            <Checkbox.Indicator class="stage-checkbox-indicator" />
+          </Checkbox.Control>
+        </Checkbox>
+      }
+    >
+      <Switch
+        class="stage-boolean-control"
+        checked={props.value()}
+        onChange={(next) => props.onChange(next)}
+        disabled={disabled()}
+        aria-label={props['aria-label']}
+      >
+        <Switch.Input
+          class="stage-boolean-input"
+          attr:data-stage-level={props.level}
+          onKeyDown={onKeyDown}
+          onFocusIn={props.onFocusIn}
+          onFocusOut={props.onFocusOut}
+          onPointerEnter={props.onPointerEnter}
+        />
+        <Switch.Control class="stage-switch">
+          <Switch.Thumb class="stage-switch-thumb" />
+        </Switch.Control>
+      </Switch>
+    </Show>
+  );
+}
diff --git a/packages/solid-stage/src/fields/BooleanField.test.tsx b/packages/solid-stage/src/controls/BooleanField.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/BooleanField.test.tsx
rename to packages/solid-stage/src/controls/BooleanField.test.tsx
diff --git a/packages/solid-stage/src/fields/BooleanField.tsx b/packages/solid-stage/src/controls/BooleanField.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/BooleanField.tsx
rename to packages/solid-stage/src/controls/BooleanField.tsx
diff --git a/packages/solid-stage/src/fields/ButtonGroup.test.tsx b/packages/solid-stage/src/controls/ButtonGroup.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/ButtonGroup.test.tsx
rename to packages/solid-stage/src/controls/ButtonGroup.test.tsx
diff --git a/packages/solid-stage/src/fields/ButtonGroup.tsx b/packages/solid-stage/src/controls/ButtonGroup.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/ButtonGroup.tsx
rename to packages/solid-stage/src/controls/ButtonGroup.tsx
diff --git a/packages/solid-stage/src/fields/ButtonGroupField.test.tsx b/packages/solid-stage/src/controls/ButtonGroupField.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/ButtonGroupField.test.tsx
rename to packages/solid-stage/src/controls/ButtonGroupField.test.tsx
diff --git a/packages/solid-stage/src/fields/ButtonGroupField.tsx b/packages/solid-stage/src/controls/ButtonGroupField.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/ButtonGroupField.tsx
rename to packages/solid-stage/src/controls/ButtonGroupField.tsx
diff --git a/packages/solid-stage/src/controls/ColorControl.test.tsx b/packages/solid-stage/src/controls/ColorControl.test.tsx
new file mode 100644
index 0000000..a9a3137
--- /dev/null
+++ b/packages/solid-stage/src/controls/ColorControl.test.tsx
@@ -0,0 +1,54 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from 'vitest';
+import { mount } from '../test-utils';
+import { ColorControl } from './ColorControl';
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('ColorControl', () => {
+  it('renders a swatch + editable hex box seeded from the value (no # prefix)', () => {
+    const { host, dispose } = mount(() => (
+      <ColorControl value={() => 'ff0000'} onChange={() => {}} aria-label="Fill" />
+    ));
+    expect(host.querySelector('.stage-color-swatch')).not.toBeNull();
+    const hex = host.querySelector('.stage-color-hex') as HTMLInputElement;
+    expect(hex.value).toBe('ff0000');
+    expect(hex.getAttribute('aria-label')).toBe('Fill hex');
+    dispose();
+  });
+
+  it('applies a complete hex draft on input (before any blur)', () => {
+    let committed = '';
+    const { host, dispose } = mount(() => (
+      <ColorControl value={() => '000000'} onChange={(n) => (committed = n)} />
+    ));
+    const hex = host.querySelector('.stage-color-hex') as HTMLInputElement;
+    hex.value = '112233';
+    hex.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(committed).toBe('112233');
+    dispose();
+  });
+
+  it('locks the hex box but never dims the swatch when readonly', () => {
+    const { host, dispose } = mount(() => (
+      <ColorControl value={() => '00ff00'} onChange={() => {}} readonly={() => true} />
+    ));
+    const hex = host.querySelector('.stage-color-hex') as HTMLInputElement;
+    expect(hex.readOnly).toBe(true);
+    expect(hex.getAttribute('tabindex')).toBe('-1');
+    // The swatch still carries the colour (it represents the value).
+    const swatch = host.querySelector('.stage-color-swatch') as HTMLElement;
+    expect(swatch.style.getPropertyValue('--stage-swatch-color')).toBe('#00ff00');
+    dispose();
+  });
+
+  it('forwards the level prop onto the hex box data-stage-level', () => {
+    const { host, dispose } = mount(() => (
+      <ColorControl value={() => 'ffffff'} onChange={() => {}} level="warn" />
+    ));
+    expect(host.querySelector('.stage-color-hex')?.getAttribute('data-stage-level')).toBe('warn');
+    dispose();
+  });
+});
diff --git a/packages/solid-stage/src/controls/ColorControl.tsx b/packages/solid-stage/src/controls/ColorControl.tsx
new file mode 100644
index 0000000..0b4b99f
--- /dev/null
+++ b/packages/solid-stage/src/controls/ColorControl.tsx
@@ -0,0 +1,256 @@
+import { ColorArea } from '@kobalte/core/color-area';
+import { ColorField as KColorField } from '@kobalte/core/color-field';
+import { ColorSlider } from '@kobalte/core/color-slider';
+import { type Color, parseColor } from '@kobalte/core/colors';
+import { Popover } from '@kobalte/core/popover';
+import { Show, createSignal, onMount, type JSX } from 'solid-js';
+import type { ControlValidationProps } from './createFieldValidation';
+
+export interface ColorControlProps extends ControlValidationProps {
+  /**
+   * Hex colour *without* a leading `#`. With `alpha`, always 8 digits;
+   * otherwise always 6.
+   */
+  readonly value: () => string;
+  readonly onChange: (next: string) => void;
+  /**
+   * Enable the alpha channel: shows the opacity slider and makes the value an
+   * 8-digit hex (`rrggbbaa`) always. Defaults to `false` → 6-digit (`rrggbb`).
+   */
+  readonly alpha?: boolean | undefined;
+  readonly readonly?: (() => boolean) | undefined;
+  /** Accessible-name base for the hex box / picker (a `ColorField` forwards its caption). */
+  readonly 'aria-label'?: string | undefined;
+}
+
+/** Parse a prefix-less hex string to an HSB `Color`; black on failure. */
+function safeParse(value: string): Color {
+  try {
+    return parseColor(`#${value}`).toFormat('hsba');
+  } catch {
+    return parseColor('#000000').toFormat('hsba');
+  }
+}
+
+/** `Color` → prefix-less lowercase hex. `alpha` → 8 digits, else 6. */
+export function toStoredHex(color: Color, alpha: boolean): string {
+  return color.toString(alpha ? 'hexa' : 'hex').replace(/^#/, '').toLowerCase();
+}
+
+/**
+ * Bare colour field built on Kobalte's colour primitives — the widget half of
+ * `ColorField`. An editable hex box (left) takes a typed/pasted code directly; a
+ * joined swatch tile (right) opens a portalled popover with a
+ * saturation/brightness area, hue + alpha sliders, and a hex input. Value is a
+ * prefix-less hex string (6 digits opaque, 8 with alpha); whichever control is
+ * used, the committed value is normalized to that form. `readonly` dims the hex
+ * box and locks the picker, but the swatch keeps its colour (it represents the
+ * value).
+ */
+export function ColorControl(props: ColorControlProps): JSX.Element {
+  const readonly = (): boolean => props.readonly?.() === true;
+  const alpha = (): boolean => props.alpha === true;
+  const ariaBase = (): string => props['aria-label'] ?? 'colour';
+
+  // Internal HSB colour is the source of truth while picking (preserves hue /
+  // saturation that a round-trip through hex would lose at the gamut edges).
+  const [color, setColor] = createSignal<Color>(safeParse(props.value()));
+
+  // Reflect external value changes: when they don't match the internal colour
+  // (i.e. not our own edit), reseed.
+  const sync = (): void => {
+    if (toStoredHex(color(), alpha()) !== props.value()) {
+      setColor(safeParse(props.value()));
+    }
+  };
+
+  const apply = (next: Color): void => {
+    setColor(next);
+    const hex = toStoredHex(next, alpha());
+    if (hex !== props.value()) props.onChange(hex);
+  };
+
+  const hexString = (): string => color().toString(alpha() ? 'hexa' : 'hex');
+
+  const onHexInput = (next: string): void => {
+    try {
+      apply(parseColor(next).toFormat('hsba'));
+    } catch {
+      /* ignore incomplete / invalid input */
+    }
+  };
+
+  // Inline hex box: the single tab stop for the field (the swatch/picker is
+  // mouse-only). It holds a free-form draft while editing and mirrors the live
+  // (prefix-less, lowercase) value otherwise — so programmatic updates show
+  // through, even readonly. There is no `#` in the box: it matches the stored
+  // form, so select-all and double-click cover exactly the same characters.
+  const maxLen = (): number => (alpha() ? 8 : 6);
+  const [draft, setDraft] = createSignal<string | null>(null);
+  const hexDisplay = (): string => draft() ?? props.value();
+
+  // Each keystroke: keep only hex digits (uppercase allowed; normalized on
+  // commit), cap to the channel width, and live-apply the moment the draft is a
+  // complete colour (3/6 digits, or 4/8 with alpha). An incomplete or unparseable
+  // draft leaves the tile on the last valid value.
+  const onDraft = (el: HTMLInputElement): void => {
+    const clean = el.value.replace(/[^0-9a-fA-F]/g, '').slice(0, maxLen());
+    // Force the input back to the sanitized text. A controlled Solid input skips
+    // the DOM write when the signal value is unchanged (e.g. a rejected char or an
+    // over-length digit that strips back to the current draft), which would
+    // otherwise leave the offending character visible in the box.
+    el.value = clean;
+    setDraft(clean);
+    const complete = alpha()
+      ? clean.length === 4 || clean.length === 8
+      : clean.length === 3 || clean.length === 6;
+    if (!complete) return;
+    try {
+      apply(parseColor(`#${clean}`).toFormat('hsba'));
+    } catch {
+      /* not parseable — leave the tile on the last valid value */
+    }
+  };
+
+  // Blur / Enter: a valid draft was already applied live, so just drop the draft
+  // and let the box reflect the normalized value again. An incomplete draft
+  // reverts the same way (its partial text is discarded).
+  const commitDraft = (): void => {
+    setDraft(null);
+  };
+
+  // Portal the popover into the nearest .stage-root (tokens + overflow), as the
+  // Select listbox does. Resolved after attach.
+  let triggerRef: HTMLButtonElement | undefined;
+  let hexRef: HTMLInputElement | undefined;
+  const [mountEl, setMountEl] = createSignal<HTMLElement>();
+  onMount(() => {
+    setMountEl(
+      (triggerRef?.closest('.stage-root, .stage-modal-container') as HTMLElement | null) ??
+        document.body,
+    );
+  });
+
+  return (
+    <span class="stage-color-field">
+      {/* Hex box (left): a real input — type/paste a code directly, no
+          popover needed. Reads as a .stage-input, so it dims when locked. */}
+      <input
+        ref={hexRef}
+        class="stage-input stage-color-hex"
+        attr:data-stage-level={props.level}
+        value={hexDisplay()}
+        readonly={readonly()}
+        tabindex={readonly() ? -1 : undefined}
+        onFocusIn={props.onFocusIn}
+        onFocusOut={props.onFocusOut}
+        onPointerEnter={props.onPointerEnter}
+        size={alpha() ? 8 : 6}
+        maxlength={maxLen()}
+        spellcheck={false}
+        autocomplete="off"
+        aria-label={`${ariaBase()} hex`}
+        onInput={(e) => onDraft(e.currentTarget)}
+        onFocus={(e) => e.currentTarget.select()}
+        onMouseDown={(e) => {
+          // Entering the field (tab or click) selects the whole value — it
+          // reads as one colour, not free text to caret around. Force select-
+          // all on a focusing click by taking focus ourselves (the native
+          // mousedown would otherwise place a caret); a click while already
+          // focused falls through to default caret placement.
+          if (document.activeElement !== e.currentTarget) {
+            e.preventDefault();
+            e.currentTarget.focus();
+          }
+        }}
+        onBlur={commitDraft}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            commitDraft();
+            e.currentTarget.blur();
+          } else if (e.key === 'Escape') {
+            setDraft(null);
+            e.currentTarget.blur();
+          }
+        }}
+      />
+      {/* Swatch tile (right): joins flush to the hex box and opens the
+          picker. It represents the value, so it never dims on readonly. */}
+      <Popover gutter={4}>
+        <Popover.Trigger
+          ref={triggerRef}
+          class="stage-color-swatch-trigger"
+          disabled={readonly()}
+          tabindex={-1}
+          aria-label={`${ariaBase()} picker`}
+          onClick={sync}
+          onFocus={() => hexRef?.focus()}
+        >
+          <span
+            class="stage-color-swatch"
+            style={{ '--stage-swatch-color': `#${props.value()}` }}
+          />
+        </Popover.Trigger>
+        <Show when={mountEl()}>
+          <Popover.Portal mount={mountEl()!}>
+            <Popover.Content class="stage-color-popover">
+              <ColorArea
+                class="stage-color-area"
+                colorSpace="hsb"
+                xChannel="saturation"
+                yChannel="brightness"
+                value={color()}
+                onChange={apply}
+              >
+                <ColorArea.Background class="stage-color-area-bg">
+                  <ColorArea.Thumb class="stage-color-thumb">
+                    <ColorArea.HiddenInputX />
+                    <ColorArea.HiddenInputY />
+                  </ColorArea.Thumb>
+                </ColorArea.Background>
+              </ColorArea>
+
+              <ColorSlider
+                class="stage-color-slider"
+                channel="hue"
+                colorSpace="hsb"
+                value={color()}
+                onChange={apply}
+              >
+                <ColorSlider.Track class="stage-color-track">
+                  <ColorSlider.Thumb class="stage-color-thumb">
+                    <ColorSlider.Input />
+                  </ColorSlider.Thumb>
+                </ColorSlider.Track>
+              </ColorSlider>
+
+              <Show when={alpha()}>
+                <ColorSlider
+                  class="stage-color-slider"
+                  channel="alpha"
+                  colorSpace="hsb"
+                  value={color()}
+                  onChange={apply}
+                >
+                  <ColorSlider.Track class="stage-color-track stage-color-track-alpha">
+                    <ColorSlider.Thumb class="stage-color-thumb">
+                      <ColorSlider.Input />
+                    </ColorSlider.Thumb>
+                  </ColorSlider.Track>
+                </ColorSlider>
+              </Show>
+
+              <KColorField
+                class="stage-color-hexfield"
+                value={hexString()}
+                onChange={onHexInput}
+              >
+                <KColorField.Input class="stage-input stage-color-hexinput" />
+              </KColorField>
+            </Popover.Content>
+          </Popover.Portal>
+        </Show>
+      </Popover>
+    </span>
+  );
+}
diff --git a/packages/solid-stage/src/fields/ColorField.test.tsx b/packages/solid-stage/src/controls/ColorField.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/ColorField.test.tsx
rename to packages/solid-stage/src/controls/ColorField.test.tsx
diff --git a/packages/solid-stage/src/controls/ColorField.tsx b/packages/solid-stage/src/controls/ColorField.tsx
new file mode 100644
index 0000000..4626d76
--- /dev/null
+++ b/packages/solid-stage/src/controls/ColorField.tsx
@@ -0,0 +1,63 @@
+import { type JSX } from 'solid-js';
+import { Field } from './Field';
+import { ColorControl, toStoredHex } from './ColorControl';
+import {
+  createFieldValidation,
+  type FieldInfoProps,
+  type FieldValidationProps,
+} from './createFieldValidation';
+
+export { toStoredHex };
+
+export interface ColorFieldProps extends FieldValidationProps<string>, FieldInfoProps {
+  readonly name: string;
+  /**
+   * Hex colour *without* a leading `#`. With `alpha`, always 8 digits;
+   * otherwise always 6.
+   */
+  readonly value: () => string;
+  readonly onChange: (next: string) => void;
+  /**
+   * Enable the alpha channel: shows the opacity slider and makes the value an
+   * 8-digit hex (`rrggbbaa`) always. Defaults to `false` → 6-digit (`rrggbb`).
+   */
+  readonly alpha?: boolean | undefined;
+  readonly readonly?: (() => boolean) | undefined;
+  readonly description?: string | undefined;
+}
+
+/**
+ * Label + colour field — captions a `ColorControl` (hex box + swatch + picker
+ * popover). Value is a prefix-less hex string (6 digits opaque, 8 with alpha).
+ * Compact-only. `readonly` dims the hex box and locks the picker, but the swatch
+ * keeps its colour (it represents the value).
+ */
+export function ColorField(props: ColorFieldProps): JSX.Element {
+  const v = createFieldValidation<string>({
+    value: () => props.value(),
+    name: () => props.name,
+    validate: props.validate,
+  });
+  return (
+    <Field
+      name={props.name}
+      value={props.value}
+      fieldType="color"
+      description={props.description}
+      info={props.info}
+      IconComponent={props.IconComponent}
+    >
+      {() => (
+        <ColorControl
+          value={props.value}
+          onChange={props.onChange}
+          alpha={props.alpha}
+          readonly={props.readonly}
+          aria-label={props.name}
+          level={v.borderLevel()}
+          {...v.controlHandlers}
+        />
+      )}
+    </Field>
+  );
+}
diff --git a/packages/solid-stage/src/fields/Field.test.tsx b/packages/solid-stage/src/controls/Field.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/Field.test.tsx
rename to packages/solid-stage/src/controls/Field.test.tsx
diff --git a/packages/solid-stage/src/fields/Field.tsx b/packages/solid-stage/src/controls/Field.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/Field.tsx
rename to packages/solid-stage/src/controls/Field.tsx
diff --git a/packages/solid-stage/src/fields/FieldBar.test.tsx b/packages/solid-stage/src/controls/FieldBar.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/FieldBar.test.tsx
rename to packages/solid-stage/src/controls/FieldBar.test.tsx
diff --git a/packages/solid-stage/src/fields/FieldBar.tsx b/packages/solid-stage/src/controls/FieldBar.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/FieldBar.tsx
rename to packages/solid-stage/src/controls/FieldBar.tsx
diff --git a/packages/solid-stage/src/fields/FieldGroup.test.tsx b/packages/solid-stage/src/controls/FieldGroup.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/FieldGroup.test.tsx
rename to packages/solid-stage/src/controls/FieldGroup.test.tsx
diff --git a/packages/solid-stage/src/fields/FieldGroup.tsx b/packages/solid-stage/src/controls/FieldGroup.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/FieldGroup.tsx
rename to packages/solid-stage/src/controls/FieldGroup.tsx
diff --git a/packages/solid-stage/src/fields/IconButton.test.tsx b/packages/solid-stage/src/controls/IconButton.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/IconButton.test.tsx
rename to packages/solid-stage/src/controls/IconButton.test.tsx
diff --git a/packages/solid-stage/src/fields/IconButton.tsx b/packages/solid-stage/src/controls/IconButton.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/IconButton.tsx
rename to packages/solid-stage/src/controls/IconButton.tsx
diff --git a/packages/solid-stage/src/fields/IconButtonField.test.tsx b/packages/solid-stage/src/controls/IconButtonField.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/IconButtonField.test.tsx
rename to packages/solid-stage/src/controls/IconButtonField.test.tsx
diff --git a/packages/solid-stage/src/fields/IconButtonField.tsx b/packages/solid-stage/src/controls/IconButtonField.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/IconButtonField.tsx
rename to packages/solid-stage/src/controls/IconButtonField.tsx
diff --git a/packages/solid-stage/src/fields/IconToggle.test.tsx b/packages/solid-stage/src/controls/IconToggle.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/IconToggle.test.tsx
rename to packages/solid-stage/src/controls/IconToggle.test.tsx
diff --git a/packages/solid-stage/src/fields/IconToggle.tsx b/packages/solid-stage/src/controls/IconToggle.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/IconToggle.tsx
rename to packages/solid-stage/src/controls/IconToggle.tsx
diff --git a/packages/solid-stage/src/fields/IconToggleField.test.tsx b/packages/solid-stage/src/controls/IconToggleField.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/IconToggleField.test.tsx
rename to packages/solid-stage/src/controls/IconToggleField.test.tsx
diff --git a/packages/solid-stage/src/fields/IconToggleField.tsx b/packages/solid-stage/src/controls/IconToggleField.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/IconToggleField.tsx
rename to packages/solid-stage/src/controls/IconToggleField.tsx
diff --git a/packages/solid-stage/src/fields/InfoIcon.test.tsx b/packages/solid-stage/src/controls/InfoIcon.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/InfoIcon.test.tsx
rename to packages/solid-stage/src/controls/InfoIcon.test.tsx
diff --git a/packages/solid-stage/src/fields/InfoIcon.tsx b/packages/solid-stage/src/controls/InfoIcon.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/InfoIcon.tsx
rename to packages/solid-stage/src/controls/InfoIcon.tsx
diff --git a/packages/solid-stage/src/fields/LabelField.test.tsx b/packages/solid-stage/src/controls/Label.test.tsx
similarity index 76%
rename from packages/solid-stage/src/fields/LabelField.test.tsx
rename to packages/solid-stage/src/controls/Label.test.tsx
index 187645a..170e286 100644
--- a/packages/solid-stage/src/fields/LabelField.test.tsx
+++ b/packages/solid-stage/src/controls/Label.test.tsx
@@ -2,16 +2,16 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { createSignal } from 'solid-js';
 import { mount } from '../test-utils';
-import { LabelField } from './LabelField';
+import { Label } from './Label';
 import { FieldBar } from './FieldBar';
 
 afterEach(() => {
   document.body.innerHTML = '';
 });
 
-describe('LabelField', () => {
+describe('Label', () => {
   it('renders the text in a label-type control row, compact by default', () => {
-    const { host, dispose } = mount(() => <LabelField text="A description" />);
+    const { host, dispose } = mount(() => <Label text="A description" />);
     const row = host.querySelector('.stage-field-control') as HTMLElement;
     expect(row.classList.contains('stage-field-label')).toBe(true);
     expect(row.classList.contains('stage-compact')).toBe(true);
@@ -20,7 +20,7 @@ describe('LabelField', () => {
   });
 
   it('has no caption/value split — just one text element, no value cell', () => {
-    const { host, dispose } = mount(() => <LabelField text="x" />);
+    const { host, dispose } = mount(() => <Label text="x" />);
     expect(host.querySelector('.stage-field-value')).toBeNull();
     expect(host.querySelector('.stage-field-name')).toBeNull();
     dispose();
@@ -28,7 +28,7 @@ describe('LabelField', () => {
 
   it('updates reactively when the text accessor changes (no setter API)', () => {
     const [text, setText] = createSignal('before');
-    const { host, dispose } = mount(() => <LabelField text={text()} />);
+    const { host, dispose } = mount(() => <Label text={text()} />);
     expect(host.querySelector('.stage-label')?.textContent).toBe('before');
     setText('after');
     expect(host.querySelector('.stage-label')?.textContent).toBe('after');
@@ -36,22 +36,22 @@ describe('LabelField', () => {
   });
 
   it('applies the align modifier class (left is the unclassed default)', () => {
-    const left = mount(() => <LabelField text="x" />);
+    const left = mount(() => <Label text="x" />);
     expect(left.host.querySelector('.stage-label-center')).toBeNull();
     expect(left.host.querySelector('.stage-label-right')).toBeNull();
     left.dispose();
 
-    const center = mount(() => <LabelField text="x" align="center" />);
+    const center = mount(() => <Label text="x" align="center" />);
     expect(center.host.querySelector('.stage-label.stage-label-center')).not.toBeNull();
     center.dispose();
 
-    const right = mount(() => <LabelField text="x" align="right" />);
+    const right = mount(() => <Label text="x" align="right" />);
     expect(right.host.querySelector('.stage-label.stage-label-right')).not.toBeNull();
     right.dispose();
   });
 
   it('honours an explicit layout', () => {
-    const { host, dispose } = mount(() => <LabelField text="x" layout="expanded" />);
+    const { host, dispose } = mount(() => <Label text="x" layout="expanded" />);
     expect(host.querySelector('.stage-field-control')?.classList.contains('stage-expanded')).toBe(
       true,
     );
@@ -61,7 +61,7 @@ describe('LabelField', () => {
   it('inherits the bar layout from an enclosing FieldBar', () => {
     const { host, dispose } = mount(() => (
       <FieldBar>
-        <LabelField text="Title" />
+        <Label text="Title" />
       </FieldBar>
     ));
     expect(host.querySelector('.stage-field-control')?.classList.contains('stage-bar')).toBe(true);
@@ -69,7 +69,7 @@ describe('LabelField', () => {
   });
 
   it('applies the size tier class', () => {
-    const { host, dispose } = mount(() => <LabelField text="Title" size="large" />);
+    const { host, dispose } = mount(() => <Label text="Title" size="large" />);
     expect(host.querySelector('.stage-field-control')?.classList.contains('stage-size-large')).toBe(
       true,
     );
@@ -77,7 +77,7 @@ describe('LabelField', () => {
   });
 
   it('appends a consumer class onto the text element as a style hook', () => {
-    const { host, dispose } = mount(() => <LabelField text="x" class="app-title" />);
+    const { host, dispose } = mount(() => <Label text="x" class="app-title" />);
     const label = host.querySelector('.stage-label') as HTMLElement;
     expect(label.classList.contains('app-title')).toBe(true);
     dispose();
diff --git a/packages/solid-stage/src/fields/LabelField.tsx b/packages/solid-stage/src/controls/Label.tsx
similarity index 88%
rename from packages/solid-stage/src/fields/LabelField.tsx
rename to packages/solid-stage/src/controls/Label.tsx
index d3f6c49..4e9e02a 100644
--- a/packages/solid-stage/src/fields/LabelField.tsx
+++ b/packages/solid-stage/src/controls/Label.tsx
@@ -1,10 +1,10 @@
 import { useContext, type JSX } from 'solid-js';
 import { FieldLayoutContext, type FieldLayout } from './Field';
-import { sizeClassList, type ControlSize } from '../panes/size';
+import { sizeClassList, type ControlSize } from '../layout/size';
 
 export type LabelAlign = 'left' | 'center' | 'right';
 
-export interface LabelFieldProps {
+export interface LabelProps {
   /**
    * The descriptive text. A plain string, but reactive for free — pass a signal
    * read (`text={desc()}`) and Solid re-renders on change; no setter API needed.
@@ -26,9 +26,11 @@ export interface LabelFieldProps {
 }
 
 /**
- * Static descriptive text that sits alongside other fields — a module blurb, a
+ * Static descriptive text that sits alongside other fields — a section blurb, a
  * status line, a bar's app title. **Display-only:** no value, no `onChange`,
  * untouched by `bind()`; the consumer updates it by passing a reactive `text`.
+ * Neither a field nor a control — it has no value to bind, so it carries no
+ * suffix.
  *
  * Unlike value fields it has no caption/value split — it's a single full-width
  * text element, so it renders a bespoke `.stage-field-control` skeleton rather
@@ -41,7 +43,7 @@ export interface LabelFieldProps {
  * - `bar`: one inline line sized to its content, no truncation (the consumer
  *   truncates if needed) — `align` does not apply.
  */
-export function LabelField(props: LabelFieldProps): JSX.Element {
+export function Label(props: LabelProps): JSX.Element {
   const ctxLayout = useContext(FieldLayoutContext);
   const layout = (): FieldLayout => props.layout ?? ctxLayout ?? 'compact';
   return (
diff --git a/packages/solid-stage/src/controls/NumberControl.test.tsx b/packages/solid-stage/src/controls/NumberControl.test.tsx
new file mode 100644
index 0000000..6fc2c89
--- /dev/null
+++ b/packages/solid-stage/src/controls/NumberControl.test.tsx
@@ -0,0 +1,52 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { mount } from '../test-utils';
+import { NumberControl } from './NumberControl';
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('NumberControl', () => {
+  it('emits a parsed number on input', () => {
+    const onChange = vi.fn();
+    const { host, dispose } = mount(() => (
+      <NumberControl value={() => 1} onChange={onChange} aria-label="Count" />
+    ));
+    const input = host.querySelector('input') as HTMLInputElement;
+    input.value = '42';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+    expect(onChange).toHaveBeenCalledWith(42);
+    dispose();
+  });
+
+  it('shows steppers by default and hides them when readonly', () => {
+    const rw = mount(() => <NumberControl value={() => 1} onChange={() => {}} />);
+    expect(rw.host.querySelector('.stage-number-steppers')).not.toBeNull();
+    rw.dispose();
+
+    const ro = mount(() => (
+      <NumberControl value={() => 1} onChange={() => {}} readonly={() => true} />
+    ));
+    expect(ro.host.querySelector('.stage-number-steppers')).toBeNull();
+    expect(ro.host.querySelector('input')?.getAttribute('tabindex')).toBe('-1');
+    ro.dispose();
+  });
+
+  it('hides steppers when steppers={false}', () => {
+    const { host, dispose } = mount(() => (
+      <NumberControl value={() => 1} onChange={() => {}} steppers={false} />
+    ));
+    expect(host.querySelector('.stage-number-steppers')).toBeNull();
+    dispose();
+  });
+
+  it('forwards the level prop onto data-stage-level', () => {
+    const { host, dispose } = mount(() => (
+      <NumberControl value={() => 1} onChange={() => {}} level="error" />
+    ));
+    expect(host.querySelector('input')?.getAttribute('data-stage-level')).toBe('error');
+    dispose();
+  });
+});
diff --git a/packages/solid-stage/src/controls/NumberControl.tsx b/packages/solid-stage/src/controls/NumberControl.tsx
new file mode 100644
index 0000000..a096870
--- /dev/null
+++ b/packages/solid-stage/src/controls/NumberControl.tsx
@@ -0,0 +1,69 @@
+import { NumberField as Kobalte } from '@kobalte/core/number-field';
+import { Show, type JSX } from 'solid-js';
+import type { ControlValidationProps } from './createFieldValidation';
+
+export interface NumberControlProps extends ControlValidationProps {
+  readonly value: () => number;
+  readonly onChange: (next: number) => void;
+  readonly min?: number | undefined;
+  readonly max?: number | undefined;
+  readonly step?: number | undefined;
+  /**
+   * Show the increment/decrement steppers (rounded triangles inset on the
+   * input's right edge). Defaults to `true`; always hidden when `readonly`.
+   */
+  readonly steppers?: boolean | undefined;
+  readonly readonly?: (() => boolean) | undefined;
+  /** Accessible name for the bare input (a `NumberField` forwards its caption here). */
+  readonly 'aria-label'?: string | undefined;
+}
+
+/**
+ * Bare number input built on Kobalte's `NumberField` (WAI-ARIA spinbutton) — the
+ * widget half of `NumberField`. Emits the parsed number; host owns range /
+ * integer / finite checks. The built-in increment/decrement triggers replace the
+ * OS spinner: a bordered up/down button column inset on the input's right edge
+ * that lights up on hover/press and dims (Kobalte's `data-disabled`) at
+ * `min`/`max`. Hide them with `steppers={false}`; they are always hidden when
+ * `readonly`. `min`/`max` stay Kobalte *clamps* (range *messaging* belongs to a
+ * `NumberField`'s `validate`). `readonly` maps to the input's native `readonly`.
+ */
+export function NumberControl(props: NumberControlProps): JSX.Element {
+  const readonly = (): boolean => props.readonly?.() === true;
+  const showSteppers = (): boolean => (props.steppers ?? true) && !readonly();
+  return (
+    <Kobalte
+      class="stage-number"
+      rawValue={props.value()}
+      onRawValueChange={(next) => props.onChange(next)}
+      minValue={props.min ?? Number.MIN_SAFE_INTEGER}
+      maxValue={props.max ?? Number.MAX_SAFE_INTEGER}
+      step={props.step ?? 1}
+      readOnly={readonly()}
+      validationState={props.level !== undefined ? 'invalid' : 'valid'}
+      formatOptions={{ useGrouping: false, maximumFractionDigits: 20 }}
+    >
+      <Kobalte.Input
+        class="stage-input stage-number-input"
+        attr:data-stage-level={props.level}
+        aria-label={props['aria-label']}
+        tabindex={readonly() ? -1 : undefined}
+        onFocusIn={props.onFocusIn}
+        onFocusOut={props.onFocusOut}
+        onPointerEnter={props.onPointerEnter}
+      />
+      <Show when={showSteppers()}>
+        <span class="stage-number-steppers">
+          <Kobalte.IncrementTrigger
+            class="stage-number-step stage-number-step-up"
+            aria-label="Increment"
+          />
+          <Kobalte.DecrementTrigger
+            class="stage-number-step stage-number-step-down"
+            aria-label="Decrement"
+          />
+        </span>
+      </Show>
+    </Kobalte>
+  );
+}
diff --git a/packages/solid-stage/src/fields/NumberField.test.tsx b/packages/solid-stage/src/controls/NumberField.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/NumberField.test.tsx
rename to packages/solid-stage/src/controls/NumberField.test.tsx
diff --git a/packages/solid-stage/src/controls/NumberField.tsx b/packages/solid-stage/src/controls/NumberField.tsx
new file mode 100644
index 0000000..90b05a2
--- /dev/null
+++ b/packages/solid-stage/src/controls/NumberField.tsx
@@ -0,0 +1,66 @@
+import { type JSX } from 'solid-js';
+import { Field, type FieldLayout } from './Field';
+import { NumberControl } from './NumberControl';
+import {
+  createFieldValidation,
+  type FieldInfoProps,
+  type FieldValidationProps,
+} from './createFieldValidation';
+
+export interface NumberFieldProps extends FieldValidationProps<number>, FieldInfoProps {
+  readonly name: string;
+  readonly value: () => number;
+  readonly onChange: (next: number) => void;
+  readonly min?: number | undefined;
+  readonly max?: number | undefined;
+  readonly step?: number | undefined;
+  /**
+   * Show the increment/decrement steppers (rounded triangles inset on the
+   * input's right edge). Defaults to `true`; always hidden when `readonly`.
+   */
+  readonly steppers?: boolean | undefined;
+  readonly layout?: FieldLayout | undefined;
+  readonly readonly?: (() => boolean) | undefined;
+  readonly description?: string | undefined;
+}
+
+/**
+ * Label + number input — captions a `NumberControl`. Emits the parsed number;
+ * host owns range / integer / finite checks. `min`/`max` stay Kobalte *clamps*;
+ * range *messaging* is via `validate` (an invalid value recolours the border and
+ * shows the message in the tooltip on focus/hover). `readonly` maps to the
+ * input's native `readonly`.
+ */
+export function NumberField(props: NumberFieldProps): JSX.Element {
+  const v = createFieldValidation<number>({
+    value: () => props.value(),
+    name: () => props.name,
+    validate: props.validate,
+  });
+  return (
+    <Field
+      name={props.name}
+      value={props.value}
+      layout={props.layout}
+      fieldType="number"
+      description={props.description}
+      info={props.info}
+      IconComponent={props.IconComponent}
+    >
+      {(value) => (
+        <NumberControl
+          value={value}
+          onChange={props.onChange}
+          min={props.min}
+          max={props.max}
+          step={props.step}
+          steppers={props.steppers}
+          readonly={props.readonly}
+          aria-label={props.name}
+          level={v.borderLevel()}
+          {...v.controlHandlers}
+        />
+      )}
+    </Field>
+  );
+}
diff --git a/packages/solid-stage/src/controls/SelectControl.test.tsx b/packages/solid-stage/src/controls/SelectControl.test.tsx
new file mode 100644
index 0000000..e92ea3f
--- /dev/null
+++ b/packages/solid-stage/src/controls/SelectControl.test.tsx
@@ -0,0 +1,86 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { createSignal } from 'solid-js';
+import { mount } from '../test-utils';
+import { SelectControl } from './SelectControl';
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+function trigger(host: HTMLElement): HTMLButtonElement {
+  return host.querySelector('.stage-select-trigger') as HTMLButtonElement;
+}
+
+describe('SelectControl', () => {
+  it('shows the selected value (via optionLabels) on the trigger', () => {
+    const { host, dispose } = mount(() => (
+      <SelectControl
+        value={() => 'a'}
+        options={['a', 'b']}
+        optionLabels={{ a: 'Alpha', b: 'Beta' }}
+        onChange={() => {}}
+        aria-label="Mode"
+      />
+    ));
+    expect(host.querySelector('.stage-select-value')?.textContent).toBe('Alpha');
+    dispose();
+  });
+
+  it('opens the listbox and emits the picked value', () => {
+    const [value, setValue] = createSignal('a');
+    const onChange = vi.fn(setValue);
+    const { host, dispose } = mount(() => (
+      <SelectControl
+        value={value}
+        options={['a', 'b']}
+        optionLabels={{ a: 'Alpha', b: 'Beta' }}
+        onChange={onChange}
+      />
+    ));
+    const t = trigger(host);
+    t.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, button: 0, pointerId: 1 }));
+    t.dispatchEvent(new PointerEvent('pointerup', { bubbles: true, button: 0, pointerId: 1 }));
+    const beta = [...document.querySelectorAll('.stage-select-item')].find(
+      (el) => el.textContent?.includes('Beta'),
+    ) as HTMLElement | undefined;
+    expect(beta).toBeDefined();
+    beta?.click();
+    expect(onChange).toHaveBeenCalledWith('b');
+    dispose();
+  });
+
+  it('renders trailing action buttons when actions are supplied', () => {
+    const onClick = vi.fn();
+    const { host, dispose } = mount(() => (
+      <SelectControl
+        value={() => 'a'}
+        options={['a']}
+        onChange={() => {}}
+        actions={[{ icon: () => '👁', title: 'toggle', onClick }]}
+      />
+    ));
+    const btn = host.querySelector(
+      '.stage-select-actions .stage-icon-button',
+    ) as HTMLButtonElement;
+    btn.click();
+    expect(onClick).toHaveBeenCalledTimes(1);
+    dispose();
+  });
+
+  it('maps readonly to a disabled trigger', () => {
+    const { host, dispose } = mount(() => (
+      <SelectControl value={() => 'a'} options={['a']} onChange={() => {}} readonly={() => true} />
+    ));
+    expect(trigger(host).hasAttribute('disabled')).toBe(true);
+    dispose();
+  });
+
+  it('forwards the level prop onto the trigger data-stage-level', () => {
+    const { host, dispose } = mount(() => (
+      <SelectControl value={() => 'a'} options={['a']} onChange={() => {}} level="error" />
+    ));
+    expect(trigger(host).getAttribute('data-stage-level')).toBe('error');
+    dispose();
+  });
+});
diff --git a/packages/solid-stage/src/fields/SelectField.tsx b/packages/solid-stage/src/controls/SelectControl.tsx
similarity index 55%
rename from packages/solid-stage/src/fields/SelectField.tsx
rename to packages/solid-stage/src/controls/SelectControl.tsx
index e297add..63ec907 100644
--- a/packages/solid-stage/src/fields/SelectField.tsx
+++ b/packages/solid-stage/src/controls/SelectControl.tsx
@@ -1,12 +1,7 @@
 import { Select as Kobalte } from '@kobalte/core/select';
 import { For, Show, createSignal, onMount, type JSX } from 'solid-js';
-import { Field, type FieldAlign, type FieldLayout } from './Field';
 import { IconButton } from './IconButton';
-import {
-  createFieldValidation,
-  type FieldInfoProps,
-  type FieldValidationProps,
-} from './createFieldValidation';
+import type { ControlValidationProps } from './createFieldValidation';
 
 /**
  * Optional icon button rendered to the right of the select trigger. Pass
@@ -21,17 +16,11 @@ export interface SelectFieldAction {
   readonly disabled?: (() => boolean) | undefined;
 }
 
-export interface SelectFieldProps<V extends string>
-  extends FieldValidationProps<V>,
-    FieldInfoProps {
-  readonly name: string;
+export interface SelectControlProps<V extends string> extends ControlValidationProps {
   readonly value: () => V;
   readonly options: ReadonlyArray<V>;
   readonly onChange: (next: V) => void;
   readonly optionLabels?: Readonly<Record<string, string>> | undefined;
-  readonly layout?: FieldLayout | undefined;
-  readonly align?: FieldAlign | undefined;
-  readonly description?: string | undefined;
   /**
    * Optional action buttons rendered flush-right of the select. Order is
    * left-to-right as given.
@@ -40,34 +29,29 @@ export interface SelectFieldProps<V extends string>
   /** Disables the select (and any actions). */
   readonly disabled?: (() => boolean | undefined) | undefined;
   /**
-   * Locks the field. A select has no `readonly` attribute, so this maps to
+   * Locks the control. A select has no `readonly` attribute, so this maps to
    * `disabled` on the control.
    */
   readonly readonly?: (() => boolean) | undefined;
+  /** Accessible name for the trigger (a `SelectField` forwards its caption here). */
+  readonly 'aria-label'?: string | undefined;
 }
 
 /**
- * Label + themed select built on Kobalte's `Select` (WAI-ARIA listbox) —
- * replaces the OS dropdown so the open list is styled with our tokens. The
- * `options` array is the source of truth for the enum; pass `optionLabels` to
- * override visible text (applied to the trigger value and the list, and used
- * for typeahead). `actions` attach icon buttons to the right of the trigger.
- * The dropdown portals into the nearest `.stage-root` so it inherits the token
- * theme (and consumer overrides) and escapes pane `overflow` clipping.
+ * Bare themed select built on Kobalte's `Select` (WAI-ARIA listbox) — the widget
+ * half of `SelectField`. Replaces the OS dropdown so the open list is styled with
+ * our tokens. The `options` array is the source of truth for the enum; pass
+ * `optionLabels` to override visible text (applied to the trigger value and the
+ * list, and used for typeahead). `actions` attach icon buttons to the right of
+ * the trigger. The dropdown portals into the nearest `.stage-root` so it inherits
+ * the token theme (and consumer overrides) and escapes panel `overflow` clipping.
  *
- * Public API matches the other fields (`value: () => V` + `onChange(next)`);
- * the wrapper adapts to Kobalte's `value`/`onChange` internally.
+ * Public API matches the other controls (`value: () => V` + `onChange(next)`);
+ * the control adapts to Kobalte's `value`/`onChange` internally.
  */
-export function SelectField<V extends string>(
-  props: SelectFieldProps<V>,
-): JSX.Element {
+export function SelectControl<V extends string>(props: SelectControlProps<V>): JSX.Element {
   const locked = (): boolean =>
     props.disabled?.() === true || props.readonly?.() === true;
-  const v = createFieldValidation<V>({
-    value: () => props.value(),
-    name: () => props.name,
-    validate: props.validate,
-  });
   const labelOf = (opt: V): string => props.optionLabels?.[opt] ?? opt;
 
   // Resolve the portal mount AFTER attach: during render the trigger isn't in
@@ -91,7 +75,7 @@ export function SelectField<V extends string>(
         if (next !== null) props.onChange(next);
       }}
       disabled={locked()}
-      validationState={v.invalid() ? 'invalid' : 'valid'}
+      validationState={props.level !== undefined ? 'invalid' : 'valid'}
       sameWidth
       gutter={4}
       optionTextValue={(opt) => labelOf(opt)}
@@ -109,9 +93,11 @@ export function SelectField<V extends string>(
       <Kobalte.Trigger
         ref={triggerRef}
         class="stage-select-trigger"
-        attr:data-stage-level={v.borderLevel()}
-        aria-label={props.name}
-        {...v.controlHandlers}
+        attr:data-stage-level={props.level}
+        aria-label={props['aria-label']}
+        onFocusIn={props.onFocusIn}
+        onFocusOut={props.onFocusOut}
+        onPointerEnter={props.onPointerEnter}
       >
         <Kobalte.Value<V> class="stage-select-value">
           {(state) => labelOf(state.selectedOption())}
@@ -128,38 +114,23 @@ export function SelectField<V extends string>(
     </Kobalte>
   );
 
-  return (
-    <Field
-      name={props.name}
-      value={props.value}
-      layout={props.layout}
-      fieldType="select"
-      align={props.align}
-      description={props.description}
-      info={props.info}
-      IconComponent={props.IconComponent}
-    >
-      {() =>
-        props.actions && props.actions.length > 0 ? (
-          <div class="stage-select-actions">
-            {select()}
-            <For each={props.actions}>
-              {(action) => (
-                <IconButton
-                  size="md"
-                  icon={action.icon}
-                  title={action.title}
-                  onClick={action.onClick}
-                  active={action.active}
-                  disabled={() => locked() || action.disabled?.() === true}
-                />
-              )}
-            </For>
-          </div>
-        ) : (
-          select()
-        )
-      }
-    </Field>
+  return props.actions && props.actions.length > 0 ? (
+    <div class="stage-select-actions">
+      {select()}
+      <For each={props.actions}>
+        {(action) => (
+          <IconButton
+            size="md"
+            icon={action.icon}
+            title={action.title}
+            onClick={action.onClick}
+            active={action.active}
+            disabled={() => locked() || action.disabled?.() === true}
+          />
+        )}
+      </For>
+    </div>
+  ) : (
+    select()
   );
 }
diff --git a/packages/solid-stage/src/fields/SelectField.test.tsx b/packages/solid-stage/src/controls/SelectField.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/SelectField.test.tsx
rename to packages/solid-stage/src/controls/SelectField.test.tsx
diff --git a/packages/solid-stage/src/controls/SelectField.tsx b/packages/solid-stage/src/controls/SelectField.tsx
new file mode 100644
index 0000000..90042f9
--- /dev/null
+++ b/packages/solid-stage/src/controls/SelectField.tsx
@@ -0,0 +1,78 @@
+import { type JSX } from 'solid-js';
+import { Field, type FieldAlign, type FieldLayout } from './Field';
+import { SelectControl, type SelectFieldAction } from './SelectControl';
+import {
+  createFieldValidation,
+  type FieldInfoProps,
+  type FieldValidationProps,
+} from './createFieldValidation';
+
+export type { SelectFieldAction };
+
+export interface SelectFieldProps<V extends string>
+  extends FieldValidationProps<V>,
+    FieldInfoProps {
+  readonly name: string;
+  readonly value: () => V;
+  readonly options: ReadonlyArray<V>;
+  readonly onChange: (next: V) => void;
+  readonly optionLabels?: Readonly<Record<string, string>> | undefined;
+  readonly layout?: FieldLayout | undefined;
+  readonly align?: FieldAlign | undefined;
+  readonly description?: string | undefined;
+  /**
+   * Optional action buttons rendered flush-right of the select. Order is
+   * left-to-right as given.
+   */
+  readonly actions?: ReadonlyArray<SelectFieldAction> | undefined;
+  /** Disables the select (and any actions). */
+  readonly disabled?: (() => boolean | undefined) | undefined;
+  /**
+   * Locks the field. A select has no `readonly` attribute, so this maps to
+   * `disabled` on the control.
+   */
+  readonly readonly?: (() => boolean) | undefined;
+}
+
+/**
+ * Label + themed select — captions a `SelectControl`. The `options` array is the
+ * source of truth for the enum; pass `optionLabels` to override visible text.
+ * `actions` attach icon buttons to the right of the trigger. Public API matches
+ * the other fields (`value: () => V` + `onChange(next)`).
+ */
+export function SelectField<V extends string>(
+  props: SelectFieldProps<V>,
+): JSX.Element {
+  const v = createFieldValidation<V>({
+    value: () => props.value(),
+    name: () => props.name,
+    validate: props.validate,
+  });
+  return (
+    <Field
+      name={props.name}
+      value={props.value}
+      layout={props.layout}
+      fieldType="select"
+      align={props.align}
+      description={props.description}
+      info={props.info}
+      IconComponent={props.IconComponent}
+    >
+      {() => (
+        <SelectControl<V>
+          value={props.value}
+          options={props.options}
+          onChange={props.onChange}
+          optionLabels={props.optionLabels}
+          actions={props.actions}
+          disabled={props.disabled}
+          readonly={props.readonly}
+          aria-label={props.name}
+          level={v.borderLevel()}
+          {...v.controlHandlers}
+        />
+      )}
+    </Field>
+  );
+}
diff --git a/packages/solid-stage/src/controls/SliderControl.test.tsx b/packages/solid-stage/src/controls/SliderControl.test.tsx
new file mode 100644
index 0000000..8e5acc3
--- /dev/null
+++ b/packages/solid-stage/src/controls/SliderControl.test.tsx
@@ -0,0 +1,51 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { mount } from '../test-utils';
+import { SliderControl } from './SliderControl';
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('SliderControl', () => {
+  it('emits a scalar number on change and shows the readout', () => {
+    const onChange = vi.fn();
+    const { host, dispose } = mount(() => (
+      <SliderControl value={() => 30} onChange={onChange} min={0} max={100} aria-label="Vol" />
+    ));
+    expect(host.querySelector('.stage-slider-label')?.textContent).toBe('30');
+    const range = host.querySelector('input[type="range"]') as HTMLInputElement;
+    range.value = '55';
+    range.dispatchEvent(new Event('change', { bubbles: true }));
+    expect(onChange).toHaveBeenCalled();
+    expect(typeof onChange.mock.calls[0][0]).toBe('number');
+    dispose();
+  });
+
+  it('formats the readout via the format prop', () => {
+    const { host, dispose } = mount(() => (
+      <SliderControl value={() => 50} onChange={() => {}} min={0} max={100} format={(v) => `${v}%`} />
+    ));
+    expect(host.querySelector('.stage-slider-label')?.textContent).toBe('50%');
+    dispose();
+  });
+
+  it('maps readonly to disabled', () => {
+    const { host, dispose } = mount(() => (
+      <SliderControl value={() => 1} onChange={() => {}} min={0} max={10} readonly={() => true} />
+    ));
+    const range = host.querySelector('input[type="range"]') as HTMLInputElement;
+    expect(range.disabled).toBe(true);
+    dispose();
+  });
+
+  it('forwards the level prop onto the thumb data-stage-level', () => {
+    const { host, dispose } = mount(() => (
+      <SliderControl value={() => 1} onChange={() => {}} min={0} max={10} level="error" />
+    ));
+    expect(
+      host.querySelector('.stage-slider-thumb')?.getAttribute('data-stage-level'),
+    ).toBe('error');
+    dispose();
+  });
+});
diff --git a/packages/solid-stage/src/controls/SliderControl.tsx b/packages/solid-stage/src/controls/SliderControl.tsx
new file mode 100644
index 0000000..726192e
--- /dev/null
+++ b/packages/solid-stage/src/controls/SliderControl.tsx
@@ -0,0 +1,80 @@
+import { Slider } from '@kobalte/core/slider';
+import { onCleanup, onMount, type JSX } from 'solid-js';
+import type { ControlValidationProps } from './createFieldValidation';
+
+export interface SliderControlProps extends ControlValidationProps {
+  readonly value: () => number;
+  readonly onChange: (next: number) => void;
+  readonly min: number;
+  readonly max: number;
+  readonly step?: number | undefined;
+  /** Format the live value displayed next to the track. */
+  readonly format?: ((value: number) => string) | undefined;
+  readonly readonly?: (() => boolean) | undefined;
+  /** Accessible name for the thumb (a `SliderField` forwards its caption here). */
+  readonly 'aria-label'?: string | undefined;
+}
+
+/**
+ * Bare range track built on Kobalte's `Slider`, with a live readout sharing the
+ * cluster — the widget half of `SliderField`. The track (`.stage-slider-bar`)
+ * flexes to fill, the readout (`.stage-slider-label`) sits at its right in a
+ * fixed-width block. Single-thumb: the public API stays scalar (`value: () =>
+ * number` + `onChange(next)`); the control adapts to Kobalte's `number[]`
+ * internally. `format` drives both the readout and the thumb's
+ * `aria-valuetext`. `readonly` maps to `disabled` (a slider has no `readonly`
+ * semantics).
+ */
+export function SliderControl(props: SliderControlProps): JSX.Element {
+  const formatted = (): string =>
+    props.format !== undefined ? props.format(props.value()) : String(props.value());
+
+  // Grab only on a primary (left) press. A capture-phase listener on the
+  // container intercepts the pointerdown before Kobalte's track/thumb handlers,
+  // so a non-primary button (e.g. right-click) never starts a drag or claims
+  // pointer capture — it just bubbles on to open the browser's context menu. We
+  // only stop propagation (never preventDefault), so the menu is untouched.
+  let containerRef: HTMLDivElement | undefined;
+  onMount(() => {
+    const el = containerRef;
+    if (el === undefined) return;
+    const onPointerDown = (e: PointerEvent): void => {
+      if (e.button !== 0) e.stopPropagation();
+    };
+    el.addEventListener('pointerdown', onPointerDown, true);
+    onCleanup(() => el.removeEventListener('pointerdown', onPointerDown, true));
+  });
+
+  return (
+    <div
+      class="stage-slider"
+      ref={containerRef}
+      onFocusIn={props.onFocusIn}
+      onFocusOut={props.onFocusOut}
+      onPointerEnter={props.onPointerEnter}
+    >
+      <Slider
+        class="stage-slider-bar"
+        value={[props.value()]}
+        onChange={(next) => props.onChange(next[0])}
+        minValue={props.min}
+        maxValue={props.max}
+        step={props.step ?? 1}
+        disabled={props.readonly?.() === true}
+        getValueLabel={(params) =>
+          props.format !== undefined
+            ? props.format(params.values[0])
+            : String(params.values[0])
+        }
+      >
+        <Slider.Track class="stage-slider-track">
+          <Slider.Fill class="stage-slider-fill" />
+          <Slider.Thumb class="stage-slider-thumb" attr:data-stage-level={props.level}>
+            <Slider.Input aria-label={props['aria-label']} />
+          </Slider.Thumb>
+        </Slider.Track>
+      </Slider>
+      <div class="stage-slider-label">{formatted()}</div>
+    </div>
+  );
+}
diff --git a/packages/solid-stage/src/fields/SliderField.test.tsx b/packages/solid-stage/src/controls/SliderField.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/SliderField.test.tsx
rename to packages/solid-stage/src/controls/SliderField.test.tsx
diff --git a/packages/solid-stage/src/controls/SliderField.tsx b/packages/solid-stage/src/controls/SliderField.tsx
new file mode 100644
index 0000000..a6f8390
--- /dev/null
+++ b/packages/solid-stage/src/controls/SliderField.tsx
@@ -0,0 +1,62 @@
+import { type JSX } from 'solid-js';
+import { Field, type FieldLayout } from './Field';
+import { SliderControl } from './SliderControl';
+import {
+  createFieldValidation,
+  type FieldInfoProps,
+  type FieldValidationProps,
+} from './createFieldValidation';
+
+export interface SliderFieldProps extends FieldValidationProps<number>, FieldInfoProps {
+  readonly name: string;
+  readonly value: () => number;
+  readonly onChange: (next: number) => void;
+  readonly min: number;
+  readonly max: number;
+  readonly step?: number | undefined;
+  /** Format the live value displayed next to the track. */
+  readonly format?: ((value: number) => string) | undefined;
+  readonly layout?: FieldLayout | undefined;
+  readonly readonly?: (() => boolean) | undefined;
+  readonly description?: string | undefined;
+}
+
+/**
+ * Label + range track — captions a `SliderControl` (track + live readout). The
+ * public API stays scalar (`value: () => number` + `onChange(next)`). `format`
+ * drives both the readout and the thumb's `aria-valuetext`. `readonly` maps to
+ * `disabled` (a slider has no `readonly` semantics).
+ */
+export function SliderField(props: SliderFieldProps): JSX.Element {
+  const v = createFieldValidation<number>({
+    value: () => props.value(),
+    name: () => props.name,
+    validate: props.validate,
+  });
+  return (
+    <Field
+      name={props.name}
+      value={props.value}
+      layout={props.layout}
+      fieldType="slider"
+      description={props.description}
+      info={props.info}
+      IconComponent={props.IconComponent}
+    >
+      {(value) => (
+        <SliderControl
+          value={value}
+          onChange={props.onChange}
+          min={props.min}
+          max={props.max}
+          step={props.step}
+          format={props.format}
+          readonly={props.readonly}
+          aria-label={props.name}
+          level={v.borderLevel()}
+          {...v.controlHandlers}
+        />
+      )}
+    </Field>
+  );
+}
diff --git a/packages/solid-stage/src/controls/TextControl.test.tsx b/packages/solid-stage/src/controls/TextControl.test.tsx
new file mode 100644
index 0000000..faf14aa
--- /dev/null
+++ b/packages/solid-stage/src/controls/TextControl.test.tsx
@@ -0,0 +1,49 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { mount } from '../test-utils';
+import { TextControl } from './TextControl';
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('TextControl', () => {
+  it('reflects the value and emits the raw string on input', () => {
+    const onChange = vi.fn();
+    const { host, dispose } = mount(() => (
+      <TextControl value={() => 'hi'} onChange={onChange} aria-label="Name" />
+    ));
+    const input = host.querySelector('input') as HTMLInputElement;
+    expect(input.value).toBe('hi');
+    expect(input.getAttribute('aria-label')).toBe('Name');
+    input.value = 'world';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(onChange).toHaveBeenCalledWith('world');
+    dispose();
+  });
+
+  it('maps readonly to the native readonly attribute and drops the tab stop', () => {
+    const { host, dispose } = mount(() => (
+      <TextControl value={() => 'x'} onChange={() => {}} readonly={() => true} />
+    ));
+    const input = host.querySelector('input') as HTMLInputElement;
+    expect(input.readOnly).toBe(true);
+    expect(input.getAttribute('tabindex')).toBe('-1');
+    dispose();
+  });
+
+  it('forwards the level prop onto data-stage-level', () => {
+    const { host, dispose } = mount(() => (
+      <TextControl value={() => 'x'} onChange={() => {}} level="warn" />
+    ));
+    expect(host.querySelector('input')?.getAttribute('data-stage-level')).toBe('warn');
+    dispose();
+  });
+
+  it('has no field row (bare widget — no caption)', () => {
+    const { host, dispose } = mount(() => <TextControl value={() => 'x'} onChange={() => {}} />);
+    expect(host.querySelector('.stage-field-control')).toBeNull();
+    expect(host.querySelector('.stage-input')).not.toBeNull();
+    dispose();
+  });
+});
diff --git a/packages/solid-stage/src/controls/TextControl.tsx b/packages/solid-stage/src/controls/TextControl.tsx
new file mode 100644
index 0000000..9b781ac
--- /dev/null
+++ b/packages/solid-stage/src/controls/TextControl.tsx
@@ -0,0 +1,44 @@
+import { TextField as Kobalte } from '@kobalte/core/text-field';
+import type { JSX } from 'solid-js';
+import type { ControlValidationProps } from './createFieldValidation';
+
+export interface TextControlProps extends ControlValidationProps {
+  readonly value: () => string;
+  readonly onChange: (next: string) => void;
+  readonly placeholder?: string | undefined;
+  readonly readonly?: (() => boolean) | undefined;
+  /** Accessible name for the bare input (a `TextField` forwards its caption here). */
+  readonly 'aria-label'?: string | undefined;
+}
+
+/**
+ * Bare single-line text input built on Kobalte's `TextField` — the widget half of
+ * `TextField`, with no caption, no validation, no field row. Emits the raw string
+ * on every keystroke; host owns any coercion. `readonly` maps to Kobalte's
+ * `readOnly` (native `readonly` attribute). `level` recolours the border and the
+ * validation handlers (`onFocusIn`/`onFocusOut`/`onPointerEnter`) drive the
+ * tooltip when wrapped by a `TextField`.
+ */
+export function TextControl(props: TextControlProps): JSX.Element {
+  const readonly = (): boolean => props.readonly?.() === true;
+  return (
+    <Kobalte
+      class="stage-text"
+      value={props.value()}
+      onChange={(next) => props.onChange(next)}
+      readOnly={readonly()}
+      validationState={props.level !== undefined ? 'invalid' : 'valid'}
+    >
+      <Kobalte.Input
+        class="stage-input"
+        attr:data-stage-level={props.level}
+        placeholder={props.placeholder}
+        aria-label={props['aria-label']}
+        tabindex={readonly() ? -1 : undefined}
+        onFocusIn={props.onFocusIn}
+        onFocusOut={props.onFocusOut}
+        onPointerEnter={props.onPointerEnter}
+      />
+    </Kobalte>
+  );
+}
diff --git a/packages/solid-stage/src/fields/TextField.test.tsx b/packages/solid-stage/src/controls/TextField.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/TextField.test.tsx
rename to packages/solid-stage/src/controls/TextField.test.tsx
diff --git a/packages/solid-stage/src/fields/TextField.tsx b/packages/solid-stage/src/controls/TextField.tsx
similarity index 62%
rename from packages/solid-stage/src/fields/TextField.tsx
rename to packages/solid-stage/src/controls/TextField.tsx
index d4c70aa..97c9f36 100644
--- a/packages/solid-stage/src/fields/TextField.tsx
+++ b/packages/solid-stage/src/controls/TextField.tsx
@@ -1,6 +1,6 @@
-import { TextField as Kobalte } from '@kobalte/core/text-field';
 import type { JSX } from 'solid-js';
 import { Field, type FieldLayout } from './Field';
+import { TextControl } from './TextControl';
 import {
   createFieldValidation,
   textHelpers,
@@ -23,12 +23,12 @@ export interface TextFieldProps
 }
 
 /**
- * Label + single-line text input built on Kobalte's `TextField`. Emits the raw
- * string on every keystroke — host owns any coercion. Validation is driven by the
+ * Label + single-line text input — captions a `TextControl`. Emits the raw
+ * string on every keystroke; host owns any coercion. Validation is driven by the
  * declarative `minLength` / `maxLength` / `pattern` helpers and/or a freeform
  * `validate` func: an invalid value recolours the border (error / warn) and
  * surfaces the message in the global tooltip on focus or hover. `readonly` maps
- * to Kobalte's `readOnly` (native `readonly` attribute on the input).
+ * to the input's native `readonly` attribute.
  */
 export function TextField(props: TextFieldProps): JSX.Element {
   const v = createFieldValidation<string>({
@@ -48,22 +48,15 @@ export function TextField(props: TextFieldProps): JSX.Element {
       IconComponent={props.IconComponent}
     >
       {(value) => (
-        <Kobalte
-          class="stage-text"
-          value={value()}
-          onChange={(next) => props.onChange(next)}
-          readOnly={props.readonly?.() === true}
-          validationState={v.invalid() ? 'invalid' : 'valid'}
-        >
-          <Kobalte.Input
-            class="stage-input"
-            attr:data-stage-level={v.borderLevel()}
-            placeholder={props.placeholder}
-            aria-label={props.name}
-            tabindex={props.readonly?.() === true ? -1 : undefined}
-            {...v.controlHandlers}
-          />
-        </Kobalte>
+        <TextControl
+          value={value}
+          onChange={props.onChange}
+          placeholder={props.placeholder}
+          readonly={props.readonly}
+          aria-label={props.name}
+          level={v.borderLevel()}
+          {...v.controlHandlers}
+        />
       )}
     </Field>
   );
diff --git a/packages/solid-stage/src/controls/TextareaControl.test.tsx b/packages/solid-stage/src/controls/TextareaControl.test.tsx
new file mode 100644
index 0000000..750fceb
--- /dev/null
+++ b/packages/solid-stage/src/controls/TextareaControl.test.tsx
@@ -0,0 +1,51 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { mount } from '../test-utils';
+import { TextareaControl } from './TextareaControl';
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('TextareaControl', () => {
+  it('reflects the value and emits the raw string on input', () => {
+    const onChange = vi.fn();
+    const { host, dispose } = mount(() => (
+      <TextareaControl value={() => 'line'} onChange={onChange} aria-label="Notes" />
+    ));
+    const area = host.querySelector('textarea') as HTMLTextAreaElement;
+    expect(area.value).toBe('line');
+    area.value = 'edited';
+    area.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(onChange).toHaveBeenCalledWith('edited');
+    dispose();
+  });
+
+  it('maps readonly to the native readonly attribute and drops the tab stop', () => {
+    const { host, dispose } = mount(() => (
+      <TextareaControl value={() => 'x'} onChange={() => {}} readonly={() => true} />
+    ));
+    const area = host.querySelector('textarea') as HTMLTextAreaElement;
+    expect(area.readOnly).toBe(true);
+    expect(area.getAttribute('tabindex')).toBe('-1');
+    dispose();
+  });
+
+  it('binds minHeight/maxHeight to the resize CSS custom properties', () => {
+    const { host, dispose } = mount(() => (
+      <TextareaControl value={() => 'x'} onChange={() => {}} minHeight={40} maxHeight={200} />
+    ));
+    const area = host.querySelector('textarea') as HTMLTextAreaElement;
+    expect(area.style.getPropertyValue('--stage-textarea-min-height')).toBe('40px');
+    expect(area.style.getPropertyValue('--stage-textarea-max-height')).toBe('200px');
+    dispose();
+  });
+
+  it('forwards the level prop onto data-stage-level', () => {
+    const { host, dispose } = mount(() => (
+      <TextareaControl value={() => 'x'} onChange={() => {}} level="warn" />
+    ));
+    expect(host.querySelector('textarea')?.getAttribute('data-stage-level')).toBe('warn');
+    dispose();
+  });
+});
diff --git a/packages/solid-stage/src/controls/TextareaControl.tsx b/packages/solid-stage/src/controls/TextareaControl.tsx
new file mode 100644
index 0000000..47e17e6
--- /dev/null
+++ b/packages/solid-stage/src/controls/TextareaControl.tsx
@@ -0,0 +1,74 @@
+import { TextField as Kobalte } from '@kobalte/core/text-field';
+import type { JSX } from 'solid-js';
+import type { ControlValidationProps } from './createFieldValidation';
+
+export interface TextareaControlProps extends ControlValidationProps {
+  readonly value: () => string;
+  readonly onChange: (next: string) => void;
+  readonly placeholder?: string | undefined;
+  readonly minHeight?: number | undefined;
+  readonly maxHeight?: number | undefined;
+  readonly readonly?: (() => boolean) | undefined;
+  /** Accessible name for the bare textarea (a `TextareaField` forwards its caption). */
+  readonly 'aria-label'?: string | undefined;
+}
+
+/**
+ * Bare multiline text input built on Kobalte's `TextField` (the `.TextArea`
+ * part) — the widget half of `TextareaField`. Emits the raw string on every
+ * keystroke. Monospaced and vertically resizable; `readonly` maps to Kobalte's
+ * `readOnly` (native `readonly` attribute), which renders it inert.
+ *
+ * `minHeight` / `maxHeight` (px) bound the resize range via the
+ * `--stage-textarea-{min,max}-height` custom properties; otherwise token
+ * defaults apply.
+ */
+export function TextareaControl(props: TextareaControlProps): JSX.Element {
+  const readonly = (): boolean => props.readonly?.() === true;
+
+  // Tab into a textarea with no caret cue is confusing — typing silently appends
+  // at the end. Place the caret at the start on *keyboard* focus so it's visible
+  // and obvious where input will land. A mouse click must keep native placement
+  // (caret where you clicked), so track whether the focus came from a pointer:
+  // pointerdown fires before focus, so the flag is set in time, and we clear it
+  // each focus so a later keyboard focus isn't tainted by a stale pointerdown.
+  let fromPointer = false;
+  const onFocus = (e: FocusEvent & { currentTarget: HTMLTextAreaElement }): void => {
+    if (!fromPointer) e.currentTarget.setSelectionRange(0, 0);
+    fromPointer = false;
+  };
+  const heightVars = (): JSX.CSSProperties => ({
+    ...(props.minHeight !== undefined
+      ? { '--stage-textarea-min-height': `${props.minHeight}px` }
+      : {}),
+    ...(props.maxHeight !== undefined
+      ? { '--stage-textarea-max-height': `${props.maxHeight}px` }
+      : {}),
+  });
+  return (
+    <Kobalte
+      class="stage-text"
+      value={props.value()}
+      onChange={(next) => props.onChange(next)}
+      readOnly={readonly()}
+      validationState={props.level !== undefined ? 'invalid' : 'valid'}
+    >
+      <Kobalte.TextArea
+        class="stage-input stage-textarea"
+        attr:data-stage-level={props.level}
+        spellcheck={false}
+        placeholder={props.placeholder}
+        aria-label={props['aria-label']}
+        style={heightVars()}
+        tabindex={readonly() ? -1 : undefined}
+        onPointerDown={() => {
+          fromPointer = true;
+        }}
+        onFocus={onFocus}
+        onFocusIn={props.onFocusIn}
+        onFocusOut={props.onFocusOut}
+        onPointerEnter={props.onPointerEnter}
+      />
+    </Kobalte>
+  );
+}
diff --git a/packages/solid-stage/src/fields/TextareaField.test.tsx b/packages/solid-stage/src/controls/TextareaField.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/TextareaField.test.tsx
rename to packages/solid-stage/src/controls/TextareaField.test.tsx
diff --git a/packages/solid-stage/src/controls/TextareaField.tsx b/packages/solid-stage/src/controls/TextareaField.tsx
new file mode 100644
index 0000000..43aac50
--- /dev/null
+++ b/packages/solid-stage/src/controls/TextareaField.tsx
@@ -0,0 +1,65 @@
+import type { JSX } from 'solid-js';
+import { Field } from './Field';
+import { TextareaControl } from './TextareaControl';
+import {
+  createFieldValidation,
+  textHelpers,
+  type FieldInfoProps,
+  type FieldValidationProps,
+  type TextValidationProps,
+} from './createFieldValidation';
+
+export interface TextareaFieldProps
+  extends FieldValidationProps<string>,
+    TextValidationProps,
+    FieldInfoProps {
+  readonly name: string;
+  readonly value: () => string;
+  readonly onChange: (next: string) => void;
+  readonly placeholder?: string | undefined;
+  readonly minHeight?: number | undefined;
+  readonly maxHeight?: number | undefined;
+  readonly readonly?: (() => boolean) | undefined;
+  readonly description?: string | undefined;
+}
+
+/**
+ * Label + multiline text value — captions a `TextareaControl`. Expanded-only
+ * (the value needs the full row), so it pins `layout="expanded"` and takes no
+ * `layout` prop. Validation (declarative `minLength`/`maxLength`/`pattern` or
+ * freeform `validate`) recolours the border and shows the message in the tooltip
+ * on focus/hover. `readonly` maps to the textarea's native `readonly`.
+ */
+export function TextareaField(props: TextareaFieldProps): JSX.Element {
+  const v = createFieldValidation<string>({
+    value: () => props.value(),
+    name: () => props.name,
+    validate: props.validate,
+    helpers: () => textHelpers(props.value(), props),
+  });
+  return (
+    <Field
+      name={props.name}
+      value={props.value}
+      layout="expanded"
+      fieldType="textarea"
+      description={props.description}
+      info={props.info}
+      IconComponent={props.IconComponent}
+    >
+      {(value) => (
+        <TextareaControl
+          value={value}
+          onChange={props.onChange}
+          placeholder={props.placeholder}
+          minHeight={props.minHeight}
+          maxHeight={props.maxHeight}
+          readonly={props.readonly}
+          aria-label={props.name}
+          level={v.borderLevel()}
+          {...v.controlHandlers}
+        />
+      )}
+    </Field>
+  );
+}
diff --git a/packages/solid-stage/src/fields/ToggleButton.test.tsx b/packages/solid-stage/src/controls/ToggleButton.test.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/ToggleButton.test.tsx
rename to packages/solid-stage/src/controls/ToggleButton.test.tsx
diff --git a/packages/solid-stage/src/fields/ToggleButton.tsx b/packages/solid-stage/src/controls/ToggleButton.tsx
similarity index 100%
rename from packages/solid-stage/src/fields/ToggleButton.tsx
rename to packages/solid-stage/src/controls/ToggleButton.tsx
diff --git a/packages/solid-stage/src/fields/createFieldValidation.ts b/packages/solid-stage/src/controls/createFieldValidation.ts
similarity index 88%
rename from packages/solid-stage/src/fields/createFieldValidation.ts
rename to packages/solid-stage/src/controls/createFieldValidation.ts
index f3fce33..6b71351 100644
--- a/packages/solid-stage/src/fields/createFieldValidation.ts
+++ b/packages/solid-stage/src/controls/createFieldValidation.ts
@@ -48,6 +48,21 @@ export interface FieldControlHandlers {
   onPointerEnter: (e: PointerEvent) => void;
 }
 
+/**
+ * The validation-wiring props every bare `*Control` accepts so a `*Field` can
+ * drive it: the border-recolour `level` (→ `data-stage-level` on the widget) and
+ * the focus/hover handlers that show the global tooltip. A field spreads
+ * `level={v.borderLevel()} {...v.controlHandlers}` onto its control; a control
+ * used standalone simply leaves them undefined. The handlers are forwarded
+ * verbatim onto the control's root element.
+ */
+export interface ControlValidationProps {
+  readonly level?: 'error' | 'warn' | undefined;
+  readonly onFocusIn?: ((e: FocusEvent) => void) | undefined;
+  readonly onFocusOut?: ((e: FocusEvent) => void) | undefined;
+  readonly onPointerEnter?: ((e: PointerEvent) => void) | undefined;
+}
+
 export interface FieldValidation {
   /** The current validation result, or `null` when valid. */
   readonly result: Accessor<ValidationResult | null>;
diff --git a/packages/solid-stage/src/fields/ColorField.tsx b/packages/solid-stage/src/fields/ColorField.tsx
deleted file mode 100644
index 7529311..0000000
--- a/packages/solid-stage/src/fields/ColorField.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-import { ColorArea } from '@kobalte/core/color-area';
-import { ColorField as KColorField } from '@kobalte/core/color-field';
-import { ColorSlider } from '@kobalte/core/color-slider';
-import { type Color, parseColor } from '@kobalte/core/colors';
-import { Popover } from '@kobalte/core/popover';
-import { Show, createSignal, onMount, type JSX } from 'solid-js';
-import { Field } from './Field';
-import {
-  createFieldValidation,
-  type FieldInfoProps,
-  type FieldValidationProps,
-} from './createFieldValidation';
-
-export interface ColorFieldProps extends FieldValidationProps<string>, FieldInfoProps {
-  readonly name: string;
-  /**
-   * Hex colour *without* a leading `#`. With `alpha`, always 8 digits;
-   * otherwise always 6.
-   */
-  readonly value: () => string;
-  readonly onChange: (next: string) => void;
-  /**
-   * Enable the alpha channel: shows the opacity slider and makes the value an
-   * 8-digit hex (`rrggbbaa`) always. Defaults to `false` → 6-digit (`rrggbb`).
-   */
-  readonly alpha?: boolean | undefined;
-  readonly readonly?: (() => boolean) | undefined;
-  readonly description?: string | undefined;
-}
-
-/** Parse a prefix-less hex string to an HSB `Color`; black on failure. */
-function safeParse(value: string): Color {
-  try {
-    return parseColor(`#${value}`).toFormat('hsba');
-  } catch {
-    return parseColor('#000000').toFormat('hsba');
-  }
-}
-
-/** `Color` → prefix-less lowercase hex. `alpha` → 8 digits, else 6. */
-export function toStoredHex(color: Color, alpha: boolean): string {
-  return color.toString(alpha ? 'hexa' : 'hex').replace(/^#/, '').toLowerCase();
-}
-
-/**
- * Label + colour field built on Kobalte's colour primitives. An editable hex
- * box (left) takes a typed/pasted code directly; a joined swatch tile (right)
- * opens a portalled popover with a saturation/brightness area, hue + alpha
- * sliders, and a hex input. Value is a prefix-less hex string (6 digits opaque,
- * 8 with alpha); whichever control is used, the committed value is normalized
- * to that form. Compact-only. `readonly` dims the hex box and locks the picker,
- * but the swatch keeps its colour (it represents the value).
- */
-export function ColorField(props: ColorFieldProps): JSX.Element {
-  const readonly = (): boolean => props.readonly?.() === true;
-  const alpha = (): boolean => props.alpha === true;
-  const v = createFieldValidation<string>({
-    value: () => props.value(),
-    name: () => props.name,
-    validate: props.validate,
-  });
-
-  // Internal HSB colour is the source of truth while picking (preserves hue /
-  // saturation that a round-trip through hex would lose at the gamut edges).
-  const [color, setColor] = createSignal<Color>(safeParse(props.value()));
-
-  // Reflect external value changes: when they don't match the internal colour
-  // (i.e. not our own edit), reseed.
-  const sync = (): void => {
-    if (toStoredHex(color(), alpha()) !== props.value()) {
-      setColor(safeParse(props.value()));
-    }
-  };
-
-  const apply = (next: Color): void => {
-    setColor(next);
-    const hex = toStoredHex(next, alpha());
-    if (hex !== props.value()) props.onChange(hex);
-  };
-
-  const hexString = (): string => color().toString(alpha() ? 'hexa' : 'hex');
-
-  const onHexInput = (next: string): void => {
-    try {
-      apply(parseColor(next).toFormat('hsba'));
-    } catch {
-      /* ignore incomplete / invalid input */
-    }
-  };
-
-  // Inline hex box: the single tab stop for the field (the swatch/picker is
-  // mouse-only). It holds a free-form draft while editing and mirrors the live
-  // (prefix-less, lowercase) value otherwise — so programmatic updates show
-  // through, even readonly. There is no `#` in the box: it matches the stored
-  // form, so select-all and double-click cover exactly the same characters.
-  const maxLen = (): number => (alpha() ? 8 : 6);
-  const [draft, setDraft] = createSignal<string | null>(null);
-  const hexDisplay = (): string => draft() ?? props.value();
-
-  // Each keystroke: keep only hex digits (uppercase allowed; normalized on
-  // commit), cap to the channel width, and live-apply the moment the draft is a
-  // complete colour (3/6 digits, or 4/8 with alpha). An incomplete or unparseable
-  // draft leaves the tile on the last valid value.
-  const onDraft = (el: HTMLInputElement): void => {
-    const clean = el.value.replace(/[^0-9a-fA-F]/g, '').slice(0, maxLen());
-    // Force the input back to the sanitized text. A controlled Solid input skips
-    // the DOM write when the signal value is unchanged (e.g. a rejected char or an
-    // over-length digit that strips back to the current draft), which would
-    // otherwise leave the offending character visible in the box.
-    el.value = clean;
-    setDraft(clean);
-    const complete = alpha()
-      ? clean.length === 4 || clean.length === 8
-      : clean.length === 3 || clean.length === 6;
-    if (!complete) return;
-    try {
-      apply(parseColor(`#${clean}`).toFormat('hsba'));
-    } catch {
-      /* not parseable — leave the tile on the last valid value */
-    }
-  };
-
-  // Blur / Enter: a valid draft was already applied live, so just drop the draft
-  // and let the box reflect the normalized value again. An incomplete draft
-  // reverts the same way (its partial text is discarded).
-  const commitDraft = (): void => {
-    setDraft(null);
-  };
-
-  // Portal the popover into the nearest .stage-root (tokens + overflow), as the
-  // Select listbox does. Resolved after attach.
-  let triggerRef: HTMLButtonElement | undefined;
-  let hexRef: HTMLInputElement | undefined;
-  const [mountEl, setMountEl] = createSignal<HTMLElement>();
-  onMount(() => {
-    setMountEl(
-      (triggerRef?.closest('.stage-root, .stage-modal-container') as HTMLElement | null) ??
-        document.body,
-    );
-  });
-
-  return (
-    <Field
-      name={props.name}
-      value={props.value}
-      fieldType="color"
-      description={props.description}
-      info={props.info}
-      IconComponent={props.IconComponent}
-    >
-      {() => (
-        <span class="stage-color-field">
-          {/* Hex box (left): a real input — type/paste a code directly, no
-              popover needed. Reads as a .stage-input, so it dims when locked. */}
-          <input
-            ref={hexRef}
-            class="stage-input stage-color-hex"
-            attr:data-stage-level={v.borderLevel()}
-            value={hexDisplay()}
-            readonly={readonly()}
-            tabindex={readonly() ? -1 : undefined}
-            {...v.controlHandlers}
-            size={alpha() ? 8 : 6}
-            maxlength={maxLen()}
-            spellcheck={false}
-            autocomplete="off"
-            aria-label={`${props.name} hex`}
-            onInput={(e) => onDraft(e.currentTarget)}
-            onFocus={(e) => e.currentTarget.select()}
-            onMouseDown={(e) => {
-              // Entering the field (tab or click) selects the whole value — it
-              // reads as one colour, not free text to caret around. Force select-
-              // all on a focusing click by taking focus ourselves (the native
-              // mousedown would otherwise place a caret); a click while already
-              // focused falls through to default caret placement.
-              if (document.activeElement !== e.currentTarget) {
-                e.preventDefault();
-                e.currentTarget.focus();
-              }
-            }}
-            onBlur={commitDraft}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                commitDraft();
-                e.currentTarget.blur();
-              } else if (e.key === 'Escape') {
-                setDraft(null);
-                e.currentTarget.blur();
-              }
-            }}
-          />
-          {/* Swatch tile (right): joins flush to the hex box and opens the
-              picker. It represents the value, so it never dims on readonly. */}
-          <Popover gutter={4}>
-            <Popover.Trigger
-              ref={triggerRef}
-              class="stage-color-swatch-trigger"
-              disabled={readonly()}
-              tabindex={-1}
-              aria-label={`${props.name} picker`}
-              onClick={sync}
-              onFocus={() => hexRef?.focus()}
-            >
-              <span
-                class="stage-color-swatch"
-                style={{ '--stage-swatch-color': `#${props.value()}` }}
-              />
-            </Popover.Trigger>
-            <Show when={mountEl()}>
-              <Popover.Portal mount={mountEl()!}>
-                <Popover.Content class="stage-color-popover">
-                  <ColorArea
-                    class="stage-color-area"
-                    colorSpace="hsb"
-                    xChannel="saturation"
-                    yChannel="brightness"
-                    value={color()}
-                    onChange={apply}
-                  >
-                    <ColorArea.Background class="stage-color-area-bg">
-                      <ColorArea.Thumb class="stage-color-thumb">
-                        <ColorArea.HiddenInputX />
-                        <ColorArea.HiddenInputY />
-                      </ColorArea.Thumb>
-                    </ColorArea.Background>
-                  </ColorArea>
-
-                  <ColorSlider
-                    class="stage-color-slider"
-                    channel="hue"
-                    colorSpace="hsb"
-                    value={color()}
-                    onChange={apply}
-                  >
-                    <ColorSlider.Track class="stage-color-track">
-                      <ColorSlider.Thumb class="stage-color-thumb">
-                        <ColorSlider.Input />
-                      </ColorSlider.Thumb>
-                    </ColorSlider.Track>
-                  </ColorSlider>
-
-                  <Show when={alpha()}>
-                    <ColorSlider
-                      class="stage-color-slider"
-                      channel="alpha"
-                      colorSpace="hsb"
-                      value={color()}
-                      onChange={apply}
-                    >
-                      <ColorSlider.Track class="stage-color-track stage-color-track-alpha">
-                        <ColorSlider.Thumb class="stage-color-thumb">
-                          <ColorSlider.Input />
-                        </ColorSlider.Thumb>
-                      </ColorSlider.Track>
-                    </ColorSlider>
-                  </Show>
-
-                  <KColorField
-                    class="stage-color-hexfield"
-                    value={hexString()}
-                    onChange={onHexInput}
-                  >
-                    <KColorField.Input class="stage-input stage-color-hexinput" />
-                  </KColorField>
-                </Popover.Content>
-              </Popover.Portal>
-            </Show>
-          </Popover>
-        </span>
-      )}
-    </Field>
-  );
-}
diff --git a/packages/solid-stage/src/fields/NumberField.tsx b/packages/solid-stage/src/fields/NumberField.tsx
deleted file mode 100644
index eaffca8..0000000
--- a/packages/solid-stage/src/fields/NumberField.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { NumberField as Kobalte } from '@kobalte/core/number-field';
-import { Show, type JSX } from 'solid-js';
-import { Field, type FieldLayout } from './Field';
-import {
-  createFieldValidation,
-  type FieldInfoProps,
-  type FieldValidationProps,
-} from './createFieldValidation';
-
-export interface NumberFieldProps extends FieldValidationProps<number>, FieldInfoProps {
-  readonly name: string;
-  readonly value: () => number;
-  readonly onChange: (next: number) => void;
-  readonly min?: number | undefined;
-  readonly max?: number | undefined;
-  readonly step?: number | undefined;
-  /**
-   * Show the increment/decrement steppers (rounded triangles inset on the
-   * input's right edge). Defaults to `true`; always hidden when `readonly`.
-   */
-  readonly steppers?: boolean | undefined;
-  readonly layout?: FieldLayout | undefined;
-  readonly readonly?: (() => boolean) | undefined;
-  readonly description?: string | undefined;
-}
-
-/**
- * Label + number input built on Kobalte's `NumberField` (WAI-ARIA spinbutton).
- * Emits the parsed number — host owns range / integer / finite checks. The
- * built-in increment/decrement triggers replace the OS spinner: a bordered
- * up/down button column inset on the input's right edge that lights up on
- * hover/press and dims (Kobalte's `data-disabled`) at `min`/`max`. Hide them
- * with `steppers={false}`; they are always hidden when `readonly`. `min`/`max`
- * stay Kobalte *clamps*; range *messaging* is via `validate` (an invalid value
- * recolours the border and shows the message in the tooltip on focus/hover).
- * `readonly` maps to the input's native `readonly`.
- */
-export function NumberField(props: NumberFieldProps): JSX.Element {
-  const readonly = (): boolean => props.readonly?.() === true;
-  const showSteppers = (): boolean => (props.steppers ?? true) && !readonly();
-  const v = createFieldValidation<number>({
-    value: () => props.value(),
-    name: () => props.name,
-    validate: props.validate,
-  });
-  return (
-    <Field
-      name={props.name}
-      value={props.value}
-      layout={props.layout}
-      fieldType="number"
-      description={props.description}
-      info={props.info}
-      IconComponent={props.IconComponent}
-    >
-      {(value) => (
-        <Kobalte
-          class="stage-number"
-          rawValue={value()}
-          onRawValueChange={(next) => props.onChange(next)}
-          minValue={props.min ?? Number.MIN_SAFE_INTEGER}
-          maxValue={props.max ?? Number.MAX_SAFE_INTEGER}
-          step={props.step ?? 1}
-          readOnly={readonly()}
-          validationState={v.invalid() ? 'invalid' : 'valid'}
-          formatOptions={{ useGrouping: false, maximumFractionDigits: 20 }}
-        >
-          <Kobalte.Input
-            class="stage-input stage-number-input"
-            attr:data-stage-level={v.borderLevel()}
-            aria-label={props.name}
-            tabindex={readonly() ? -1 : undefined}
-            {...v.controlHandlers}
-          />
-          <Show when={showSteppers()}>
-            <span class="stage-number-steppers">
-              <Kobalte.IncrementTrigger
-                class="stage-number-step stage-number-step-up"
-                aria-label="Increment"
-              />
-              <Kobalte.DecrementTrigger
-                class="stage-number-step stage-number-step-down"
-                aria-label="Decrement"
-              />
-            </span>
-          </Show>
-        </Kobalte>
-      )}
-    </Field>
-  );
-}
diff --git a/packages/solid-stage/src/fields/SliderField.tsx b/packages/solid-stage/src/fields/SliderField.tsx
deleted file mode 100644
index 1cee633..0000000
--- a/packages/solid-stage/src/fields/SliderField.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Slider } from '@kobalte/core/slider';
-import { onCleanup, onMount, type JSX } from 'solid-js';
-import { Field, type FieldLayout } from './Field';
-import {
-  createFieldValidation,
-  type FieldInfoProps,
-  type FieldValidationProps,
-} from './createFieldValidation';
-
-export interface SliderFieldProps extends FieldValidationProps<number>, FieldInfoProps {
-  readonly name: string;
-  readonly value: () => number;
-  readonly onChange: (next: number) => void;
-  readonly min: number;
-  readonly max: number;
-  readonly step?: number | undefined;
-  /** Format the live value displayed next to the track. */
-  readonly format?: ((value: number) => string) | undefined;
-  readonly layout?: FieldLayout | undefined;
-  readonly readonly?: (() => boolean) | undefined;
-  readonly description?: string | undefined;
-}
-
-/**
- * Label + range track built on Kobalte's `Slider`, with a live readout sharing
- * the value cell — the track (`.stage-slider-bar`) flexes to fill, the readout
- * (`.stage-slider-label`) sits at its right in a fixed-width block. Single-thumb:
- * the public API stays scalar (`value: () => number` + `onChange(next)`); the
- * wrapper adapts to Kobalte's `number[]` internally. `format` drives both the
- * readout and the thumb's `aria-valuetext`. `readonly` maps to `disabled` (a
- * slider has no `readonly` semantics).
- */
-export function SliderField(props: SliderFieldProps): JSX.Element {
-  const formatted = (): string =>
-    props.format !== undefined ? props.format(props.value()) : String(props.value());
-  const v = createFieldValidation<number>({
-    value: () => props.value(),
-    name: () => props.name,
-    validate: props.validate,
-  });
-
-  // Grab only on a primary (left) press. A capture-phase listener on the
-  // container intercepts the pointerdown before Kobalte's track/thumb handlers,
-  // so a non-primary button (e.g. right-click) never starts a drag or claims
-  // pointer capture — it just bubbles on to open the browser's context menu. We
-  // only stop propagation (never preventDefault), so the menu is untouched.
-  let containerRef: HTMLDivElement | undefined;
-  onMount(() => {
-    const el = containerRef;
-    if (el === undefined) return;
-    const onPointerDown = (e: PointerEvent): void => {
-      if (e.button !== 0) e.stopPropagation();
-    };
-    el.addEventListener('pointerdown', onPointerDown, true);
-    onCleanup(() => el.removeEventListener('pointerdown', onPointerDown, true));
-  });
-
-  return (
-    <Field
-      name={props.name}
-      value={props.value}
-      layout={props.layout}
-      fieldType="slider"
-      description={props.description}
-      info={props.info}
-      IconComponent={props.IconComponent}
-    >
-      {(value) => (
-        <div class="stage-slider" ref={containerRef} {...v.controlHandlers}>
-          <Slider
-            class="stage-slider-bar"
-            value={[value()]}
-            onChange={(next) => props.onChange(next[0])}
-            minValue={props.min}
-            maxValue={props.max}
-            step={props.step ?? 1}
-            disabled={props.readonly?.() === true}
-            getValueLabel={(params) =>
-              props.format !== undefined
-                ? props.format(params.values[0])
-                : String(params.values[0])
-            }
-          >
-            <Slider.Track class="stage-slider-track">
-              <Slider.Fill class="stage-slider-fill" />
-              <Slider.Thumb class="stage-slider-thumb" attr:data-stage-level={v.borderLevel()}>
-                <Slider.Input aria-label={props.name} />
-              </Slider.Thumb>
-            </Slider.Track>
-          </Slider>
-          <div class="stage-slider-label">{formatted()}</div>
-        </div>
-      )}
-    </Field>
-  );
-}
diff --git a/packages/solid-stage/src/fields/TextareaField.tsx b/packages/solid-stage/src/fields/TextareaField.tsx
deleted file mode 100644
index 86218e3..0000000
--- a/packages/solid-stage/src/fields/TextareaField.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { TextField as Kobalte } from '@kobalte/core/text-field';
-import type { JSX } from 'solid-js';
-import { Field } from './Field';
-import {
-  createFieldValidation,
-  textHelpers,
-  type FieldInfoProps,
-  type FieldValidationProps,
-  type TextValidationProps,
-} from './createFieldValidation';
-
-export interface TextareaFieldProps
-  extends FieldValidationProps<string>,
-    TextValidationProps,
-    FieldInfoProps {
-  readonly name: string;
-  readonly value: () => string;
-  readonly onChange: (next: string) => void;
-  readonly placeholder?: string | undefined;
-  readonly minHeight?: number | undefined;
-  readonly maxHeight?: number | undefined;
-  readonly readonly?: (() => boolean) | undefined;
-  readonly description?: string | undefined;
-}
-
-/**
- * Label + multiline text value built on Kobalte's `TextField` (the `.TextArea`
- * part). Emits the raw string on every keystroke. Expanded-only (the value
- * needs the full row), so it pins `layout="expanded"` and takes no `layout`
- * prop. Monospaced and vertically resizable; `readonly` maps to Kobalte's
- * `readOnly` (native `readonly` attribute), which renders it inert. Validation
- * (declarative `minLength`/`maxLength`/`pattern` or freeform `validate`)
- * recolours the border and shows the message in the tooltip on focus/hover.
- *
- * `minHeight` / `maxHeight` (px) bound the resize range via the
- * `--stage-textarea-{min,max}-height` custom properties; otherwise token
- * defaults apply.
- */
-export function TextareaField(props: TextareaFieldProps): JSX.Element {
-  const v = createFieldValidation<string>({
-    value: () => props.value(),
-    name: () => props.name,
-    validate: props.validate,
-    helpers: () => textHelpers(props.value(), props),
-  });
-
-  // Tab into a textarea with no caret cue is confusing — typing silently appends
-  // at the end. Place the caret at the start on *keyboard* focus so it's visible
-  // and obvious where input will land. A mouse click must keep native placement
-  // (caret where you clicked), so track whether the focus came from a pointer:
-  // pointerdown fires before focus, so the flag is set in time, and we clear it
-  // each focus so a later keyboard focus isn't tainted by a stale pointerdown.
-  let fromPointer = false;
-  const onFocus = (e: FocusEvent & { currentTarget: HTMLTextAreaElement }): void => {
-    if (!fromPointer) e.currentTarget.setSelectionRange(0, 0);
-    fromPointer = false;
-  };
-  const heightVars = (): JSX.CSSProperties => ({
-    ...(props.minHeight !== undefined
-      ? { '--stage-textarea-min-height': `${props.minHeight}px` }
-      : {}),
-    ...(props.maxHeight !== undefined
-      ? { '--stage-textarea-max-height': `${props.maxHeight}px` }
-      : {}),
-  });
-  return (
-    <Field
-      name={props.name}
-      value={props.value}
-      layout="expanded"
-      fieldType="textarea"
-      description={props.description}
-      info={props.info}
-      IconComponent={props.IconComponent}
-    >
-      {(value) => (
-        <Kobalte
-          class="stage-text"
-          value={value()}
-          onChange={(next) => props.onChange(next)}
-          readOnly={props.readonly?.() === true}
-          validationState={v.invalid() ? 'invalid' : 'valid'}
-        >
-          <Kobalte.TextArea
-            class="stage-input stage-textarea"
-            attr:data-stage-level={v.borderLevel()}
-            spellcheck={false}
-            placeholder={props.placeholder}
-            aria-label={props.name}
-            style={heightVars()}
-            tabindex={props.readonly?.() === true ? -1 : undefined}
-            onPointerDown={() => {
-              fromPointer = true;
-            }}
-            onFocus={onFocus}
-            {...v.controlHandlers}
-          />
-        </Kobalte>
-      )}
-    </Field>
-  );
-}
diff --git a/packages/solid-stage/src/index.ts b/packages/solid-stage/src/index.ts
index 3944d99..65a46b5 100644
--- a/packages/solid-stage/src/index.ts
+++ b/packages/solid-stage/src/index.ts
@@ -4,49 +4,65 @@ import './theme/fields.css';
 import './theme/tooltip.css';
 import './theme/modal.css';
 
-export { EditorPanes, type EditorPanesProps } from './panes/EditorPanes';
-export { SidePane, type SidePaneProps } from './panes/SidePane';
-export { Module, type ModuleProps, type ModuleHeaderAction } from './panes/Module';
-export { Toolbar, type ToolbarProps } from './panes/Toolbar';
-export { TabMenu, type TabMenuProps, type TabMenuTab } from './panes/TabMenu';
-export type { PaneSide } from './panes/types';
-export type { ControlSize } from './panes/size';
+export { EditorPanels, type EditorPanelsProps } from './layout/EditorPanels';
+export { Panel, type PanelProps } from './layout/Panel';
+export { Section, type SectionProps, type SectionHeaderAction } from './layout/Section';
+export { Toolbar, type ToolbarProps } from './layout/Toolbar';
+export { TabMenu, type TabMenuProps, type TabMenuTab } from './layout/TabMenu';
+export type { PanelSide } from './layout/types';
+export type { ControlSize } from './layout/size';
 
 export { CanvasStage, type CanvasStageProps } from './canvas/CanvasStage';
 export { STAGE_LAYERS } from './canvas/layers';
 export type { StageSize } from './canvas/types';
 
-// Form fields ----------------------------------------------------------
+// Field framework -------------------------------------------------------
 export {
   Field,
   type FieldProps,
   type FieldAlign,
   type FieldLayout,
-} from './fields/Field';
-export { FieldGroup, type FieldGroupProps } from './fields/FieldGroup';
-export { InfoIcon } from './fields/InfoIcon';
+} from './controls/Field';
+export { FieldGroup, type FieldGroupProps } from './controls/FieldGroup';
+export { InfoIcon } from './controls/InfoIcon';
 export {
   type FieldValidationProps,
   type TextValidationProps,
   type FieldInfoProps,
-} from './fields/createFieldValidation';
-export { FieldBar, type FieldBarProps } from './fields/FieldBar';
-export { TextField, type TextFieldProps } from './fields/TextField';
-export { LabelField, type LabelFieldProps, type LabelAlign } from './fields/LabelField';
-export { NumberField, type NumberFieldProps } from './fields/NumberField';
-export { TextareaField, type TextareaFieldProps } from './fields/TextareaField';
-export { ColorField, type ColorFieldProps } from './fields/ColorField';
+  type ControlValidationProps,
+} from './controls/createFieldValidation';
+export { FieldBar, type FieldBarProps } from './controls/FieldBar';
+export { Label, type LabelProps, type LabelAlign } from './controls/Label';
+
+// Value fields (captioned, value-bound — compose a bare control) ---------
+export { TextField, type TextFieldProps } from './controls/TextField';
+export { NumberField, type NumberFieldProps } from './controls/NumberField';
+export { TextareaField, type TextareaFieldProps } from './controls/TextareaField';
+export { ColorField, type ColorFieldProps } from './controls/ColorField';
 export {
   BooleanField,
   type BooleanFieldProps,
   type BooleanFieldVariant,
-} from './fields/BooleanField';
-export { SliderField, type SliderFieldProps } from './fields/SliderField';
+} from './controls/BooleanField';
+export { SliderField, type SliderFieldProps } from './controls/SliderField';
 export {
   SelectField,
   type SelectFieldProps,
   type SelectFieldAction,
-} from './fields/SelectField';
+} from './controls/SelectField';
+
+// Bare controls (the value-input widgets without the field row) ----------
+export { TextControl, type TextControlProps } from './controls/TextControl';
+export { NumberControl, type NumberControlProps } from './controls/NumberControl';
+export { TextareaControl, type TextareaControlProps } from './controls/TextareaControl';
+export { ColorControl, type ColorControlProps } from './controls/ColorControl';
+export {
+  BooleanControl,
+  type BooleanControlProps,
+  type BooleanControlVariant,
+} from './controls/BooleanControl';
+export { SliderControl, type SliderControlProps } from './controls/SliderControl';
+export { SelectControl, type SelectControlProps } from './controls/SelectControl';
 
 // Buttons --------------------------------------------------------------
 export {
@@ -55,34 +71,34 @@ export {
   type IconButtonSize,
   type IconButtonTone,
   type IconComponent,
-} from './fields/IconButton';
-export { IconToggle, type IconToggleProps } from './fields/IconToggle';
+} from './controls/IconButton';
+export { IconToggle, type IconToggleProps } from './controls/IconToggle';
 export {
   IconButtonField,
   type IconButtonFieldProps,
   type IconButtonItem,
-} from './fields/IconButtonField';
+} from './controls/IconButtonField';
 export {
   IconToggleField,
   type IconToggleFieldProps,
   type IconToggleItem,
-} from './fields/IconToggleField';
+} from './controls/IconToggleField';
 export {
   ActionButton,
   type ActionButtonProps,
   type ActionButtonVariant,
-} from './fields/ActionButton';
-export { ToggleButton, type ToggleButtonProps } from './fields/ToggleButton';
+} from './controls/ActionButton';
+export { ToggleButton, type ToggleButtonProps } from './controls/ToggleButton';
 export {
   ButtonGroup,
   type ButtonGroupProps,
   type ButtonGroupOption,
   type ButtonGroupDirection,
-} from './fields/ButtonGroup';
+} from './controls/ButtonGroup';
 export {
   ButtonGroupField,
   type ButtonGroupFieldProps,
-} from './fields/ButtonGroupField';
+} from './controls/ButtonGroupField';
 
 // Overlay --------------------------------------------------------------
 export {
diff --git a/packages/solid-stage/src/panes/EditorPanes.test.tsx b/packages/solid-stage/src/layout/EditorPanels.test.tsx
similarity index 63%
rename from packages/solid-stage/src/panes/EditorPanes.test.tsx
rename to packages/solid-stage/src/layout/EditorPanels.test.tsx
index 4e5e671..bf0f526 100644
--- a/packages/solid-stage/src/panes/EditorPanes.test.tsx
+++ b/packages/solid-stage/src/layout/EditorPanels.test.tsx
@@ -2,17 +2,17 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { createSignal } from 'solid-js';
 import { mount } from '../test-utils';
-import { EditorPanes } from './EditorPanes';
+import { EditorPanels } from './EditorPanels';
 
 afterEach(() => {
   document.body.innerHTML = '';
   localStorage.clear();
 });
 
-describe('EditorPanes', () => {
+describe('EditorPanels', () => {
   it('center lands in column 2 and contains the children', () => {
     const { host, dispose } = mount(() => (
-      <EditorPanes center={<div data-testid="center">x</div>} />
+      <EditorPanels center={<div data-testid="center">x</div>} />
     ));
     const cell = host.querySelector('.stage-center-cell') as HTMLDivElement;
     expect(cell).not.toBeNull();
@@ -25,8 +25,8 @@ describe('EditorPanes', () => {
   });
 
   it('omitting top/toolbars/bottom collapses those rows to 0px', () => {
-    const { host, dispose } = mount(() => <EditorPanes center={<div />} />);
-    const grid = host.querySelector('.stage-panes') as HTMLDivElement;
+    const { host, dispose } = mount(() => <EditorPanels center={<div />} />);
+    const grid = host.querySelector('.stage-panels') as HTMLDivElement;
     // rows: top / topToolbars / capped band / bottomToolbars / bottom. The
     // band is minmax(0, 1fr) so tall pane content scrolls instead of growing
     // the row past the viewport (which would push the footer off-screen).
@@ -40,7 +40,7 @@ describe('EditorPanes', () => {
 
   it('top bar renders into grid-row 1, full column span', () => {
     const { host, dispose } = mount(() => (
-      <EditorPanes top={<div data-testid="t">t</div>} center={<div />} />
+      <EditorPanels top={<div data-testid="t">t</div>} center={<div />} />
     ));
     const top = host.querySelector('.stage-top-bar') as HTMLDivElement;
     expect(top).not.toBeNull();
@@ -50,30 +50,30 @@ describe('EditorPanes', () => {
     dispose();
   });
 
-  it('leftSide + leftCollapsed=false: expanded pane renders, no strip', () => {
+  it('leftPanel + leftCollapsed=false: expanded panel renders, no strip', () => {
     const { host, dispose } = mount(() => (
-      <EditorPanes
+      <EditorPanels
         center={<div />}
-        leftSide={<div data-testid="left">body</div>}
+        leftPanel={<div data-testid="left">body</div>}
         leftCollapsed={() => false}
       />
     ));
-    expect(host.querySelector('.stage-pane-expanded')).not.toBeNull();
-    expect(host.querySelector('.stage-pane-strip')).toBeNull();
+    expect(host.querySelector('.stage-panel-expanded')).not.toBeNull();
+    expect(host.querySelector('.stage-panel-strip')).toBeNull();
     expect(host.querySelector('[data-testid="left"]')?.textContent).toBe('body');
     dispose();
   });
 
-  it('leftSide + leftCollapsed=true: strip renders, no expanded pane', () => {
+  it('leftPanel + leftCollapsed=true: strip renders, no expanded panell', () => {
     const { host, dispose } = mount(() => (
-      <EditorPanes
+      <EditorPanels
         center={<div />}
-        leftSide={<div data-testid="left">body</div>}
+        leftPanel={<div data-testid="left">body</div>}
         leftCollapsed={() => true}
       />
     ));
-    expect(host.querySelector('.stage-pane-strip')).not.toBeNull();
-    expect(host.querySelector('.stage-pane-expanded')).toBeNull();
+    expect(host.querySelector('.stage-panel-strip')).not.toBeNull();
+    expect(host.querySelector('.stage-panel-expanded')).toBeNull();
     expect(host.querySelector('[data-testid="left"]')).toBeNull();
     dispose();
   });
@@ -82,77 +82,77 @@ describe('EditorPanes', () => {
     const [collapsed, setCollapsed] = createSignal(false);
     const onToggle = vi.fn((next: boolean) => setCollapsed(next));
     const { host, dispose } = mount(() => (
-      <EditorPanes
+      <EditorPanels
         center={<div />}
-        leftSide={<div />}
+        leftPanel={<div />}
         leftCollapsed={collapsed}
         onLeftToggle={onToggle}
       />
     ));
-    expect(host.querySelector('.stage-pane-expanded')).not.toBeNull();
-    const btn = host.querySelector('.stage-pane-header-button') as HTMLButtonElement;
+    expect(host.querySelector('.stage-panel-expanded')).not.toBeNull();
+    const btn = host.querySelector('.stage-panel-header-button') as HTMLButtonElement;
     btn.click();
     expect(onToggle).toHaveBeenCalledWith(true);
-    expect(host.querySelector('.stage-pane-strip')).not.toBeNull();
+    expect(host.querySelector('.stage-panel-strip')).not.toBeNull();
     dispose();
   });
 
   it('uncontrolled mode: defaultLeftCollapsed=true starts as strip, click toggles', () => {
     const { host, dispose } = mount(() => (
-      <EditorPanes
+      <EditorPanels
         center={<div />}
-        leftSide={<div data-testid="left">body</div>}
+        leftPanel={<div data-testid="left">body</div>}
         defaultLeftCollapsed={true}
       />
     ));
-    expect(host.querySelector('.stage-pane-strip')).not.toBeNull();
-    const btn = host.querySelector('.stage-pane-strip-button') as HTMLButtonElement;
+    expect(host.querySelector('.stage-panel-strip')).not.toBeNull();
+    const btn = host.querySelector('.stage-panel-strip-button') as HTMLButtonElement;
     btn.click();
-    expect(host.querySelector('.stage-pane-expanded')).not.toBeNull();
+    expect(host.querySelector('.stage-panel-expanded')).not.toBeNull();
     expect(host.querySelector('[data-testid="left"]')).not.toBeNull();
     dispose();
   });
 
-  it('no leftSide: column 1 track is 0px', () => {
-    const { host, dispose } = mount(() => <EditorPanes center={<div />} />);
-    const grid = host.querySelector('.stage-panes') as HTMLDivElement;
+  it('no leftPanel: column 1 track is 0px', () => {
+    const { host, dispose } = mount(() => <EditorPanels center={<div />} />);
+    const grid = host.querySelector('.stage-panels') as HTMLDivElement;
     expect(grid.style.gridTemplateColumns).toContain('0px');
     expect(grid.style.gridTemplateColumns.startsWith('0px')).toBe(true);
     dispose();
   });
 
-  it('rightSide with rightCollapsed=false renders expanded pane in column 3', () => {
+  it('rightPanel with rightCollapsed=false renders expanded panel in column 3', () => {
     const { host, dispose } = mount(() => (
-      <EditorPanes
+      <EditorPanels
         center={<div />}
-        rightSide={<div data-testid="right">r</div>}
+        rightPanel={<div data-testid="right">r</div>}
         rightCollapsed={() => false}
       />
     ));
     expect(host.querySelector('[data-testid="right"]')?.textContent).toBe('r');
     // strip-aware glyph: right + expanded => »
-    const btn = host.querySelector('.stage-pane-header-button') as HTMLButtonElement;
+    const btn = host.querySelector('.stage-panel-header-button') as HTMLButtonElement;
     expect(btn.textContent).toBe('»');
     dispose();
   });
 
-  it('rightToggleVariant="edge" forwards into the right SidePane', () => {
+  it('rightToggleVariant="edge" forwards into the right Panel', () => {
     const { host, dispose } = mount(() => (
-      <EditorPanes
+      <EditorPanels
         center={<div />}
-        rightSide={<div data-testid="right">r</div>}
+        rightPanel={<div data-testid="right">r</div>}
         rightCollapsed={() => false}
         rightToggleVariant="edge"
       />
     ));
-    expect(host.querySelector('.stage-pane-edge-button')).not.toBeNull();
-    expect(host.querySelector('.stage-pane-header')).toBeNull();
+    expect(host.querySelector('.stage-panel-edge-button')).not.toBeNull();
+    expect(host.querySelector('.stage-panel-header')).toBeNull();
     dispose();
   });
 
   it('topSub/bottomSub render inside the centre cell (canvas-aligned), bracketing the content', () => {
     const { host, dispose } = mount(() => (
-      <EditorPanes
+      <EditorPanels
         center={<div data-testid="center">c</div>}
         topSub={<div data-testid="ts">ts</div>}
         bottomSub={<div data-testid="bs">bs</div>}
@@ -171,78 +171,78 @@ describe('EditorPanes', () => {
     dispose();
   });
 
-  it('embedded adds .stage-panes-embedded; default (root) does not', () => {
-    const root = mount(() => <EditorPanes center={<div />} />);
-    expect(root.host.querySelector('.stage-panes-embedded')).toBeNull();
+  it('embedded adds .stage-panels-embedded; default (root) does not', () => {
+    const root = mount(() => <EditorPanels center={<div />} />);
+    expect(root.host.querySelector('.stage-panels-embedded')).toBeNull();
     root.dispose();
 
-    const emb = mount(() => <EditorPanes embedded center={<div />} />);
-    expect(emb.host.querySelector('.stage-panes-embedded')).not.toBeNull();
+    const emb = mount(() => <EditorPanels embedded center={<div />} />);
+    expect(emb.host.querySelector('.stage-panels-embedded')).not.toBeNull();
     emb.dispose();
   });
 
   it('persistKey: uncontrolled collapse seeds from cache', () => {
-    localStorage.setItem('stage-pane:k:left', '1');
+    localStorage.setItem('stage-panel:k:left', '1');
     const { host, dispose } = mount(() => (
-      <EditorPanes center={<div />} leftSide={<div />} persistKey="k" />
+      <EditorPanels center={<div />} leftPanel={<div />} persistKey="k" />
     ));
     // cached '1' wins over the expanded default
-    expect(host.querySelector('.stage-pane-strip')).not.toBeNull();
-    expect(host.querySelector('.stage-pane-expanded')).toBeNull();
+    expect(host.querySelector('.stage-panel-strip')).not.toBeNull();
+    expect(host.querySelector('.stage-panel-expanded')).toBeNull();
     dispose();
   });
 
   it('persistKey: toggling an uncontrolled pane writes the new state', () => {
     const { host, dispose } = mount(() => (
-      <EditorPanes center={<div />} leftSide={<div />} persistKey="k" />
+      <EditorPanels center={<div />} leftPanel={<div />} persistKey="k" />
     ));
-    expect(localStorage.getItem('stage-pane:k:left')).toBeNull();
-    const btn = host.querySelector('.stage-pane-header-button') as HTMLButtonElement;
+    expect(localStorage.getItem('stage-panel:k:left')).toBeNull();
+    const btn = host.querySelector('.stage-panel-header-button') as HTMLButtonElement;
     btn.click();
-    expect(localStorage.getItem('stage-pane:k:left')).toBe('1');
+    expect(localStorage.getItem('stage-panel:k:left')).toBe('1');
     // header button is gone now; expand via the collapsed strip button
-    const strip = host.querySelector('.stage-pane-strip-button') as HTMLButtonElement;
+    const strip = host.querySelector('.stage-panel-strip-button') as HTMLButtonElement;
     strip.click();
-    expect(localStorage.getItem('stage-pane:k:left')).toBe('0');
+    expect(localStorage.getItem('stage-panel:k:left')).toBe('0');
     dispose();
   });
 
   it('persistKey: left and right cache under distinct keys', () => {
     const { host, dispose } = mount(() => (
-      <EditorPanes
+      <EditorPanels
         center={<div />}
-        leftSide={<div />}
-        rightSide={<div />}
+        leftPanel={<div />}
+        rightPanel={<div />}
         persistKey="k"
       />
     ));
-    const buttons = host.querySelectorAll('.stage-pane-header-button');
+    const buttons = host.querySelectorAll('.stage-panel-header-button');
     (buttons[0] as HTMLButtonElement).click(); // left
     (buttons[1] as HTMLButtonElement).click(); // right
-    expect(localStorage.getItem('stage-pane:k:left')).toBe('1');
-    expect(localStorage.getItem('stage-pane:k:right')).toBe('1');
+    expect(localStorage.getItem('stage-panel:k:left')).toBe('1');
+    expect(localStorage.getItem('stage-panel:k:right')).toBe('1');
     dispose();
   });
 
   it('persistKey is ignored for a controlled pane (parent owns persistence)', () => {
-    localStorage.setItem('stage-pane:k:left', '1');
+    localStorage.setItem('stage-panel:k:left', '1');
     const { host, dispose } = mount(() => (
-      <EditorPanes
+      <EditorPanels
         center={<div />}
-        leftSide={<div />}
+        leftPanel={<div />}
         persistKey="k"
         leftCollapsed={() => false}
       />
     ));
     // controlled accessor wins; the cache is not read
-    expect(host.querySelector('.stage-pane-expanded')).not.toBeNull();
-    expect(host.querySelector('.stage-pane-strip')).toBeNull();
+    expect(host.querySelector('.stage-panel-expanded')).not.toBeNull();
+    expect(host.querySelector('.stage-panel-strip')).toBeNull();
     dispose();
   });
 
   it('topToolbars/bottomToolbars render full-width stacks, and stack multiple', () => {
     const { host, dispose } = mount(() => (
-      <EditorPanes
+      <EditorPanels
         center={<div />}
         topToolbars={
           <>
@@ -266,17 +266,17 @@ describe('EditorPanes', () => {
 
   it('size tiers the stage root; leftSize/rightSize tier each pane', () => {
     const { host, dispose } = mount(() => (
-      <EditorPanes
+      <EditorPanels
         size="large"
-        leftSide={<div>L</div>}
-        rightSide={<div>R</div>}
+        leftPanel={<div>L</div>}
+        rightPanel={<div>R</div>}
         leftSize="small"
         center={<div />}
       />
     ));
-    expect(host.querySelector('.stage-panes')?.classList.contains('stage-size-large')).toBe(true);
-    const left = host.querySelector('.stage-pane-left') as HTMLElement;
-    const right = host.querySelector('.stage-pane-right') as HTMLElement;
+    expect(host.querySelector('.stage-panels')?.classList.contains('stage-size-large')).toBe(true);
+    const left = host.querySelector('.stage-panel-left') as HTMLElement;
+    const right = host.querySelector('.stage-panel-right') as HTMLElement;
     expect(left.classList.contains('stage-size-small')).toBe(true);
     // rightSize omitted → the right pane inherits the stage tier (no own class)
     expect(right.classList.contains('stage-size-small')).toBe(false);
diff --git a/packages/solid-stage/src/panes/EditorPanes.tsx b/packages/solid-stage/src/layout/EditorPanels.tsx
similarity index 73%
rename from packages/solid-stage/src/panes/EditorPanes.tsx
rename to packages/solid-stage/src/layout/EditorPanels.tsx
index 34ff9d7..02bba86 100644
--- a/packages/solid-stage/src/panes/EditorPanes.tsx
+++ b/packages/solid-stage/src/layout/EditorPanels.tsx
@@ -1,26 +1,26 @@
 import { Show, createSignal, type JSX } from 'solid-js';
-import { SidePane } from './SidePane';
+import { Panel } from './Panel';
 import { sizeClassList, type ControlSize } from './size';
 import { readFlag, writeFlag } from '../state/persist';
 
-export interface EditorPanesProps {
+export interface EditorPanelsProps {
   /** Full-width chrome bar at the very top (single). */
   readonly top?: JSX.Element;
-  /** Full-width panel-bg toolbar stack below `top`, above the pane band. */
+  /** Full-width panel-bg toolbar stack below `top`, above the panel band. */
   readonly topToolbars?: JSX.Element;
   /** Canvas-aligned (column 2) panel-bg toolbar stack above the centre. */
   readonly topSub?: JSX.Element;
   /** Full-width chrome bar at the very bottom (single). */
   readonly bottom?: JSX.Element;
-  /** Full-width panel-bg toolbar stack above `bottom`, below the pane band. */
+  /** Full-width panel-bg toolbar stack above `bottom`, below the panel band. */
   readonly bottomToolbars?: JSX.Element;
   /** Canvas-aligned (column 2) panel-bg toolbar stack below the centre. */
   readonly bottomSub?: JSX.Element;
-  /** Consumer-composed left pane body. Omit to drop the left column. */
-  readonly leftSide?: JSX.Element;
-  /** Consumer-composed right pane body. Omit to drop the right column. */
-  readonly rightSide?: JSX.Element;
-  /** Centre cell — typically a `<CanvasStage>`, or another `<EditorPanes>`. */
+  /** Consumer-composed left panel body. Omit to drop the left column. */
+  readonly leftPanel?: JSX.Element;
+  /** Consumer-composed right panel body. Omit to drop the right column. */
+  readonly rightPanel?: JSX.Element;
+  /** Centre cell — typically a `<CanvasStage>`, or another `<EditorPanels>`. */
   readonly center: JSX.Element;
 
   /**
@@ -33,11 +33,11 @@ export interface EditorPanesProps {
   readonly embedded?: boolean | undefined;
 
   /**
-   * Persist each pane's collapse state to localStorage (uncontrolled panes
-   * only), keyed `stage-pane:<persistKey>:left` / `:right`. Opt-in: omit and
-   * panes don't cache. The key is also the per-stage namespace — give each
-   * stage in a multi-stage layout a distinct `persistKey` so their panes don't
-   * collide. A controlled pane (`leftCollapsed`/`rightCollapsed` supplied)
+   * Persist each panel's collapse state to localStorage (uncontrolled panels
+   * only), keyed `stage-panel:<persistKey>:left` / `:right`. Opt-in: omit and
+   * panels don't cache. The key is also the per-stage namespace — give each
+   * stage in a multi-stage layout a distinct `persistKey` so their panels don't
+   * collide. A controlled panel (`leftCollapsed`/`rightCollapsed` supplied)
    * never caches; the parent owns persistence.
    */
   readonly persistKey?: string | undefined;
@@ -51,20 +51,20 @@ export interface EditorPanesProps {
   readonly defaultRightCollapsed?: boolean | undefined;
 
   /**
-   * Type-scale tier for the whole stage (bars, both panes, modules, fields).
+   * Type-scale tier for the whole stage (bars, both panels, sections, fields).
    * Omit to inherit the surrounding `.stage-root`. The control-height/font-size
    * tokens cascade, so this is the top of the per-stage size cascade; `leftSize`
-   * / `rightSize` override a single pane and `Module`'s `size` overrides a single
-   * module's fields underneath it.
+   * / `rightSize` override a single panel and `Section`'s `size` overrides a single
+   * section's fields underneath it.
    */
   readonly size?: ControlSize | undefined;
-  /** Tier override for the left pane only (forwarded to its `SidePane`). */
+  /** Tier override for the left panel only (forwarded to its `Panel`). */
   readonly leftSize?: ControlSize | undefined;
-  /** Tier override for the right pane only (forwarded to its `SidePane`). */
+  /** Tier override for the right panel only (forwarded to its `Panel`). */
   readonly rightSize?: ControlSize | undefined;
-  /** Collapse-toggle placement for the left pane (`'header'` default | `'edge'`). */
+  /** Collapse-toggle placement for the left panel (`'header'` default | `'edge'`). */
   readonly leftToggleVariant?: 'header' | 'edge' | undefined;
-  /** Collapse-toggle placement for the right pane (`'header'` default | `'edge'`). */
+  /** Collapse-toggle placement for the right panel (`'header'` default | `'edge'`). */
   readonly rightToggleVariant?: 'header' | 'edge' | undefined;
 }
 
@@ -80,29 +80,29 @@ function trackWidth(present: boolean, collapsed: boolean): string {
  *
  * - `top` / `bottom` are full-width single chrome bars.
  * - `topToolbars` / `bottomToolbars` are full-width panel-bg toolbar stacks
- *   that span the whole width above/below the pane band.
- * - The side panes occupy the middle band (`grid-row: 3`) only.
+ *   that span the whole width above/below the panel band.
+ * - The side panels occupy the middle band (`grid-row: 3`) only.
  * - `topSub` / `bottomSub` are canvas-aligned toolbar stacks: they live *inside*
  *   the centre cell (column 2), so their left/right boundaries match the canvas.
  *
- * Each pane is a grid cell — toggling collapse swaps the column track between
+ * Each panel is a grid cell — toggling collapse swaps the column track between
  * strip and expanded widths so the centre cell grows/shrinks naturally. Rows
  * collapse to `0px` when their slot is undefined; pages that don't opt in
  * render unchanged. Stack toolbars by listing several `Toolbar`s in a slot.
  *
- * Collapse state is controlled or uncontrolled per side, mirroring `Module`.
+ * Collapse state is controlled or uncontrolled per side, mirroring `Section`.
  */
-export function EditorPanes(props: EditorPanesProps): JSX.Element {
+export function EditorPanels(props: EditorPanelsProps): JSX.Element {
   // Persistence is opt-in (`persistKey`) and uncontrolled-only — a controlled
-  // pane leaves caching to the parent. When set, the key is also the seed
+  // panel leaves caching to the parent. When set, the key is also the seed
   // source: cached value wins over `defaultCollapsed`, then expanded.
   const leftKey =
     props.persistKey !== undefined && props.leftCollapsed === undefined
-      ? `stage-pane:${props.persistKey}:left`
+      ? `stage-panel:${props.persistKey}:left`
       : undefined;
   const rightKey =
     props.persistKey !== undefined && props.rightCollapsed === undefined
-      ? `stage-pane:${props.persistKey}:right`
+      ? `stage-panel:${props.persistKey}:right`
       : undefined;
 
   const [internalLeft, setInternalLeft] = createSignal(
@@ -141,7 +141,7 @@ export function EditorPanes(props: EditorPanesProps): JSX.Element {
   };
 
   const colTemplate = (): string =>
-    `${trackWidth(props.leftSide !== undefined, leftCollapsed())} 1fr ${trackWidth(props.rightSide !== undefined, rightCollapsed())}`;
+    `${trackWidth(props.leftPanel !== undefined, leftCollapsed())} 1fr ${trackWidth(props.rightPanel !== undefined, rightCollapsed())}`;
 
   const rowTemplate = (): string => {
     const topRow = props.top === undefined ? '0px' : 'auto';
@@ -150,17 +150,17 @@ export function EditorPanes(props: EditorPanesProps): JSX.Element {
       props.bottomToolbars === undefined ? '0px' : 'auto';
     const bottomRow = props.bottom === undefined ? '0px' : 'auto';
     // `minmax(0, 1fr)` not `1fr`: a bare `1fr` track is `minmax(auto, 1fr)`,
-    // whose `auto` minimum grows the band to fit tall pane content — pushing
+    // whose `auto` minimum grows the band to fit tall panel content — pushing
     // the bottom bars/footer off-screen. Capping the minimum at 0 holds the
-    // band to the available height so each pane's `overflow: auto` body scrolls.
+    // band to the available height so each panel's `overflow: auto` body scrolls.
     return `${topRow} ${topToolbarsRow} minmax(0, 1fr) ${bottomToolbarsRow} ${bottomRow}`;
   };
 
   return (
     <div
       classList={{
-        'stage-panes': true,
-        'stage-panes-embedded': props.embedded === true,
+        'stage-panels': true,
+        'stage-panels-embedded': props.embedded === true,
         ...sizeClassList(props.size),
       }}
       style={{
@@ -188,18 +188,18 @@ export function EditorPanes(props: EditorPanesProps): JSX.Element {
           </div>
         )}
       </Show>
-      <Show when={props.leftSide} keyed>
-        {(leftSide) => (
+      <Show when={props.leftPanel} keyed>
+        {(leftPanel) => (
           <div style={{ 'grid-column': '1', 'grid-row': '3' }}>
-            <SidePane
+            <Panel
               side="left"
               collapsed={leftCollapsed}
               onToggle={toggleLeft}
               size={props.leftSize}
               toggleVariant={props.leftToggleVariant}
             >
-              {leftSide}
-            </SidePane>
+              {leftPanel}
+            </Panel>
           </div>
         )}
       </Show>
@@ -218,18 +218,18 @@ export function EditorPanes(props: EditorPanesProps): JSX.Element {
           )}
         </Show>
       </div>
-      <Show when={props.rightSide} keyed>
-        {(rightSide) => (
+      <Show when={props.rightPanel} keyed>
+        {(rightPanel) => (
           <div style={{ 'grid-column': '3', 'grid-row': '3' }}>
-            <SidePane
+            <Panel
               side="right"
               collapsed={rightCollapsed}
               onToggle={toggleRight}
               size={props.rightSize}
               toggleVariant={props.rightToggleVariant}
             >
-              {rightSide}
-            </SidePane>
+              {rightPanel}
+            </Panel>
           </div>
         )}
       </Show>
diff --git a/packages/solid-stage/src/panes/SidePane.test.tsx b/packages/solid-stage/src/layout/Panel.test.tsx
similarity index 63%
rename from packages/solid-stage/src/panes/SidePane.test.tsx
rename to packages/solid-stage/src/layout/Panel.test.tsx
index aec5f55..665bfd2 100644
--- a/packages/solid-stage/src/panes/SidePane.test.tsx
+++ b/packages/solid-stage/src/layout/Panel.test.tsx
@@ -2,7 +2,7 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { createSignal } from 'solid-js';
 import { mount } from '../test-utils';
-import { SidePane } from './SidePane';
+import { Panel } from './Panel';
 
 afterEach(() => {
   document.body.innerHTML = '';
@@ -11,48 +11,48 @@ afterEach(() => {
 
 type IOEntry = { target: Element; isIntersecting: boolean };
 
-describe('SidePane', () => {
+describe('Panel', () => {
   it('collapsed renders strip + chevron only (no body)', () => {
     const { host, dispose } = mount(() => (
-      <SidePane side="left" collapsed={() => true} onToggle={() => {}}>
+      <Panel side="left" collapsed={() => true} onToggle={() => {}}>
         <div data-testid="body">inner</div>
-      </SidePane>
+      </Panel>
     ));
-    expect(host.querySelector('.stage-pane-strip')).not.toBeNull();
-    expect(host.querySelector('.stage-pane-expanded')).toBeNull();
-    expect(host.querySelector('.stage-pane-body')).toBeNull();
+    expect(host.querySelector('.stage-panel-strip')).not.toBeNull();
+    expect(host.querySelector('.stage-panel-expanded')).toBeNull();
+    expect(host.querySelector('.stage-panel-body')).toBeNull();
     expect(host.querySelector('[data-testid="body"]')).toBeNull();
     dispose();
   });
 
   it('expanded renders chevron + children', () => {
     const { host, dispose } = mount(() => (
-      <SidePane side="left" collapsed={() => false} onToggle={() => {}}>
+      <Panel side="left" collapsed={() => false} onToggle={() => {}}>
         <div data-testid="body">inner</div>
-      </SidePane>
+      </Panel>
     ));
-    expect(host.querySelector('.stage-pane-expanded')).not.toBeNull();
-    expect(host.querySelector('.stage-pane-strip')).toBeNull();
+    expect(host.querySelector('.stage-panel-expanded')).not.toBeNull();
+    expect(host.querySelector('.stage-panel-strip')).toBeNull();
     expect(host.querySelector('[data-testid="body"]')?.textContent).toBe('inner');
     dispose();
   });
 
   it('chevron glyph flips with side prop (left=« when expanded, right=»)', () => {
     const left = mount(() => (
-      <SidePane side="left" collapsed={() => false} onToggle={() => {}}>
+      <Panel side="left" collapsed={() => false} onToggle={() => {}}>
         <div />
-      </SidePane>
+      </Panel>
     ));
     const right = mount(() => (
-      <SidePane side="right" collapsed={() => false} onToggle={() => {}}>
+      <Panel side="right" collapsed={() => false} onToggle={() => {}}>
         <div />
-      </SidePane>
+      </Panel>
     ));
     const leftBtn = left.host.querySelector(
-      '.stage-pane-header-button',
+      '.stage-panel-header-button',
     ) as HTMLButtonElement;
     const rightBtn = right.host.querySelector(
-      '.stage-pane-header-button',
+      '.stage-panel-header-button',
     ) as HTMLButtonElement;
     expect(leftBtn.textContent).toBe('«');
     expect(rightBtn.textContent).toBe('»');
@@ -62,20 +62,20 @@ describe('SidePane', () => {
 
   it('strip glyph flips with side prop (left=» when collapsed, right=«)', () => {
     const left = mount(() => (
-      <SidePane side="left" collapsed={() => true} onToggle={() => {}}>
+      <Panel side="left" collapsed={() => true} onToggle={() => {}}>
         <div />
-      </SidePane>
+      </Panel>
     ));
     const right = mount(() => (
-      <SidePane side="right" collapsed={() => true} onToggle={() => {}}>
+      <Panel side="right" collapsed={() => true} onToggle={() => {}}>
         <div />
-      </SidePane>
+      </Panel>
     ));
     const leftBtn = left.host.querySelector(
-      '.stage-pane-strip-button',
+      '.stage-panel-strip-button',
     ) as HTMLButtonElement;
     const rightBtn = right.host.querySelector(
-      '.stage-pane-strip-button',
+      '.stage-panel-strip-button',
     ) as HTMLButtonElement;
     expect(leftBtn.textContent).toBe('»');
     expect(rightBtn.textContent).toBe('«');
@@ -86,11 +86,11 @@ describe('SidePane', () => {
   it('chevron click fires onToggle', () => {
     const onToggle = vi.fn();
     const { host, dispose } = mount(() => (
-      <SidePane side="left" collapsed={() => false} onToggle={onToggle}>
+      <Panel side="left" collapsed={() => false} onToggle={onToggle}>
         <div />
-      </SidePane>
+      </Panel>
     ));
-    const btn = host.querySelector('.stage-pane-header-button') as HTMLButtonElement;
+    const btn = host.querySelector('.stage-panel-header-button') as HTMLButtonElement;
     btn.click();
     expect(onToggle).toHaveBeenCalledTimes(1);
     dispose();
@@ -115,29 +115,29 @@ describe('SidePane', () => {
     vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver);
 
     const { host, dispose } = mount(() => (
-      <SidePane side="left" collapsed={() => false} onToggle={() => {}}>
+      <Panel side="left" collapsed={() => false} onToggle={() => {}}>
         <div>tall content</div>
-      </SidePane>
+      </Panel>
     ));
-    const body = host.querySelector('.stage-pane-body') as HTMLDivElement;
-    const top = host.querySelector('.stage-pane-scroll-sentinel-top') as Element;
-    const bottom = host.querySelector('.stage-pane-scroll-sentinel-bottom') as Element;
+    const body = host.querySelector('.stage-panel-body') as HTMLDivElement;
+    const top = host.querySelector('.stage-panel-scroll-sentinel-top') as Element;
+    const bottom = host.querySelector('.stage-panel-scroll-sentinel-bottom') as Element;
     const scrollTo = vi.fn();
     body.scrollTo = scrollTo as unknown as typeof body.scrollTo;
     Object.defineProperty(body, 'scrollHeight', { value: 1000, configurable: true });
 
     // Nothing observed yet → neither hint.
-    expect(host.querySelector('.stage-pane-scroll-hint')).toBeNull();
+    expect(host.querySelector('.stage-panel-scroll-hint')).toBeNull();
 
     // At the top of overflowing content (top in view, bottom out) → only bottom.
     fire?.([
       { target: top, isIntersecting: true },
       { target: bottom, isIntersecting: false },
     ]);
-    expect(host.querySelector('.stage-pane-scroll-hint-top')).toBeNull();
-    expect(host.querySelector('.stage-pane-scroll-hint-bottom')).not.toBeNull();
+    expect(host.querySelector('.stage-panel-scroll-hint-top')).toBeNull();
+    expect(host.querySelector('.stage-panel-scroll-hint-bottom')).not.toBeNull();
 
-    (host.querySelector('.stage-pane-scroll-hint-bottom') as HTMLButtonElement).click();
+    (host.querySelector('.stage-panel-scroll-hint-bottom') as HTMLButtonElement).click();
     expect(scrollTo).toHaveBeenCalledWith({ top: 1000, behavior: 'smooth' });
 
     // Middle (both out of view) → both hints.
@@ -145,10 +145,10 @@ describe('SidePane', () => {
       { target: top, isIntersecting: false },
       { target: bottom, isIntersecting: false },
     ]);
-    expect(host.querySelector('.stage-pane-scroll-hint-top')).not.toBeNull();
-    expect(host.querySelector('.stage-pane-scroll-hint-bottom')).not.toBeNull();
+    expect(host.querySelector('.stage-panel-scroll-hint-top')).not.toBeNull();
+    expect(host.querySelector('.stage-panel-scroll-hint-bottom')).not.toBeNull();
 
-    (host.querySelector('.stage-pane-scroll-hint-top') as HTMLButtonElement).click();
+    (host.querySelector('.stage-panel-scroll-hint-top') as HTMLButtonElement).click();
     expect(scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
 
     // At the bottom (top out, bottom in view) → only top.
@@ -156,18 +156,18 @@ describe('SidePane', () => {
       { target: top, isIntersecting: false },
       { target: bottom, isIntersecting: true },
     ]);
-    expect(host.querySelector('.stage-pane-scroll-hint-top')).not.toBeNull();
-    expect(host.querySelector('.stage-pane-scroll-hint-bottom')).toBeNull();
+    expect(host.querySelector('.stage-panel-scroll-hint-top')).not.toBeNull();
+    expect(host.querySelector('.stage-panel-scroll-hint-bottom')).toBeNull();
     dispose();
   });
 
   it('excludes the expanded chevron from the keyboard tab order', () => {
     const { host, dispose } = mount(() => (
-      <SidePane side="left" collapsed={() => false} onToggle={() => {}}>
+      <Panel side="left" collapsed={() => false} onToggle={() => {}}>
         <div />
-      </SidePane>
+      </Panel>
     ));
-    const btn = host.querySelector('.stage-pane-header-button') as HTMLButtonElement;
+    const btn = host.querySelector('.stage-panel-header-button') as HTMLButtonElement;
     expect(btn.getAttribute('tabindex')).toBe('-1');
     dispose();
   });
@@ -188,24 +188,24 @@ describe('SidePane', () => {
     vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver);
 
     const { host, dispose } = mount(() => (
-      <SidePane side="left" collapsed={() => false} onToggle={() => {}}>
+      <Panel side="left" collapsed={() => false} onToggle={() => {}}>
         <div>tall content</div>
-      </SidePane>
+      </Panel>
     ));
-    const top = host.querySelector('.stage-pane-scroll-sentinel-top') as Element;
-    const bottom = host.querySelector('.stage-pane-scroll-sentinel-bottom') as Element;
+    const top = host.querySelector('.stage-panel-scroll-sentinel-top') as Element;
+    const bottom = host.querySelector('.stage-panel-scroll-sentinel-bottom') as Element;
     // Both edges out of view → both hints render.
     fire?.([
       { target: top, isIntersecting: false },
       { target: bottom, isIntersecting: false },
     ]);
     expect(
-      (host.querySelector('.stage-pane-scroll-hint-top') as HTMLButtonElement).getAttribute(
+      (host.querySelector('.stage-panel-scroll-hint-top') as HTMLButtonElement).getAttribute(
         'tabindex',
       ),
     ).toBe('-1');
     expect(
-      (host.querySelector('.stage-pane-scroll-hint-bottom') as HTMLButtonElement).getAttribute(
+      (host.querySelector('.stage-panel-scroll-hint-bottom') as HTMLButtonElement).getAttribute(
         'tabindex',
       ),
     ).toBe('-1');
@@ -214,9 +214,9 @@ describe('SidePane', () => {
 
   it('Escape inside the scroll content blurs the active element', () => {
     const { host, dispose } = mount(() => (
-      <SidePane side="left" collapsed={() => false} onToggle={() => {}}>
+      <Panel side="left" collapsed={() => false} onToggle={() => {}}>
         <input data-testid="field" />
-      </SidePane>
+      </Panel>
     ));
     const input = host.querySelector('[data-testid="field"]') as HTMLInputElement;
     input.focus();
@@ -228,11 +228,11 @@ describe('SidePane', () => {
 
   it('Tab past either end holds focus (cancels nav); mid-list Tab is native', () => {
     const { host, dispose } = mount(() => (
-      <SidePane side="left" collapsed={() => false} onToggle={() => {}}>
+      <Panel side="left" collapsed={() => false} onToggle={() => {}}>
         <button data-testid="first">a</button>
         <input data-testid="skip" tabindex={-1} />
         <button data-testid="last">b</button>
-      </SidePane>
+      </Panel>
     ));
     const first = host.querySelector('[data-testid="first"]') as HTMLButtonElement;
     const last = host.querySelector('[data-testid="last"]') as HTMLButtonElement;
@@ -261,13 +261,13 @@ describe('SidePane', () => {
   describe('toggleVariant="edge"', () => {
     it('expanded renders an edge button and no top header', () => {
       const { host, dispose } = mount(() => (
-        <SidePane side="left" collapsed={() => false} onToggle={() => {}} toggleVariant="edge">
+        <Panel side="left" collapsed={() => false} onToggle={() => {}} toggleVariant="edge">
           <div data-testid="body">inner</div>
-        </SidePane>
+        </Panel>
       ));
-      expect(host.querySelector('.stage-pane-expanded-edge')).not.toBeNull();
-      expect(host.querySelector('.stage-pane-edge-button')).not.toBeNull();
-      expect(host.querySelector('.stage-pane-header')).toBeNull();
+      expect(host.querySelector('.stage-panel-expanded-edge')).not.toBeNull();
+      expect(host.querySelector('.stage-panel-edge-button')).not.toBeNull();
+      expect(host.querySelector('.stage-panel-header')).toBeNull();
       expect(host.querySelector('[data-testid="body"]')?.textContent).toBe('inner');
       dispose();
     });
@@ -275,11 +275,11 @@ describe('SidePane', () => {
     it('edge button is out of the tab order and fires onToggle', () => {
       const onToggle = vi.fn();
       const { host, dispose } = mount(() => (
-        <SidePane side="left" collapsed={() => false} onToggle={onToggle} toggleVariant="edge">
+        <Panel side="left" collapsed={() => false} onToggle={onToggle} toggleVariant="edge">
           <div />
-        </SidePane>
+        </Panel>
       ));
-      const btn = host.querySelector('.stage-pane-edge-button') as HTMLButtonElement;
+      const btn = host.querySelector('.stage-panel-edge-button') as HTMLButtonElement;
       expect(btn.getAttribute('tabindex')).toBe('-1');
       btn.click();
       expect(onToggle).toHaveBeenCalledTimes(1);
@@ -288,24 +288,24 @@ describe('SidePane', () => {
 
     it('collapsed renders the full-height edge strip', () => {
       const { host, dispose } = mount(() => (
-        <SidePane side="left" collapsed={() => true} onToggle={() => {}} toggleVariant="edge">
+        <Panel side="left" collapsed={() => true} onToggle={() => {}} toggleVariant="edge">
           <div />
-        </SidePane>
+        </Panel>
       ));
-      expect(host.querySelector('.stage-pane-strip-edge')).not.toBeNull();
-      expect(host.querySelector('.stage-pane-strip-button')).not.toBeNull();
+      expect(host.querySelector('.stage-panel-strip-edge')).not.toBeNull();
+      expect(host.querySelector('.stage-panel-strip-button')).not.toBeNull();
       dispose();
     });
 
     it('header variant (default) is unchanged', () => {
       const { host, dispose } = mount(() => (
-        <SidePane side="left" collapsed={() => false} onToggle={() => {}}>
+        <Panel side="left" collapsed={() => false} onToggle={() => {}}>
           <div />
-        </SidePane>
+        </Panel>
       ));
-      expect(host.querySelector('.stage-pane-header')).not.toBeNull();
-      expect(host.querySelector('.stage-pane-edge-button')).toBeNull();
-      expect(host.querySelector('.stage-pane-expanded-edge')).toBeNull();
+      expect(host.querySelector('.stage-panel-header')).not.toBeNull();
+      expect(host.querySelector('.stage-panel-edge-button')).toBeNull();
+      expect(host.querySelector('.stage-panel-expanded-edge')).toBeNull();
       dispose();
     });
   });
@@ -313,14 +313,14 @@ describe('SidePane', () => {
   it('reactivity: toggling external collapsed signal swaps DOM', () => {
     const [collapsed, setCollapsed] = createSignal(false);
     const { host, dispose } = mount(() => (
-      <SidePane side="left" collapsed={collapsed} onToggle={() => {}}>
+      <Panel side="left" collapsed={collapsed} onToggle={() => {}}>
         <div data-testid="body">x</div>
-      </SidePane>
+      </Panel>
     ));
-    expect(host.querySelector('.stage-pane-expanded')).not.toBeNull();
+    expect(host.querySelector('.stage-panel-expanded')).not.toBeNull();
     setCollapsed(true);
-    expect(host.querySelector('.stage-pane-strip')).not.toBeNull();
-    expect(host.querySelector('.stage-pane-expanded')).toBeNull();
+    expect(host.querySelector('.stage-panel-strip')).not.toBeNull();
+    expect(host.querySelector('.stage-panel-expanded')).toBeNull();
     dispose();
   });
 });
diff --git a/packages/solid-stage/src/panes/SidePane.tsx b/packages/solid-stage/src/layout/Panel.tsx
similarity index 68%
rename from packages/solid-stage/src/panes/SidePane.tsx
rename to packages/solid-stage/src/layout/Panel.tsx
index d876bd8..d767ad8 100644
--- a/packages/solid-stage/src/panes/SidePane.tsx
+++ b/packages/solid-stage/src/layout/Panel.tsx
@@ -6,32 +6,32 @@ import {
   untrack,
   type JSX,
 } from 'solid-js';
-import type { PaneSide } from './types';
+import type { PanelSide } from './types';
 import { sizeClassList, type ControlSize } from './size';
 
-export interface SidePaneProps {
-  readonly side: PaneSide;
+export interface PanelProps {
+  readonly side: PanelSide;
   readonly collapsed: () => boolean;
   readonly onToggle: () => void;
   readonly children: JSX.Element;
   /**
-   * Type-scale tier for the whole pane (header + modules + fields). Omit to
-   * inherit the stage tier. Overrides the stage for this pane's subtree; a
-   * module inside can re-tier its own fields again.
+   * Type-scale tier for the whole panel (header + sections + fields). Omit to
+   * inherit the stage tier. Overrides the stage for this panel's subtree; a
+   * section inside can re-tier its own fields again.
    */
   readonly size?: ControlSize | undefined;
   /**
    * Where the collapse toggle lives. `'header'` (default) puts it in a top header
-   * strip; `'edge'` puts it as a full-height vertical bar on the pane's *inside*
-   * edge (right edge for a left pane, left edge for a right pane), reclaiming the
-   * header strip's vertical space for module content. Fixed for the instance, like
-   * `side`. Collapsed, the `'edge'` variant's strip toggle fills the full pane
+   * strip; `'edge'` puts it as a full-height vertical bar on the panel's *inside*
+   * edge (right edge for a left panel, left edge for a right panel), reclaiming the
+   * header strip's vertical space for section content. Fixed for the instance, like
+   * `side`. Collapsed, the `'edge'` variant's strip toggle fills the full panel
    * height instead of a top button.
    */
   readonly toggleVariant?: 'header' | 'edge' | undefined;
 }
 
-function chevronGlyph(side: PaneSide, collapsed: boolean): string {
+function chevronGlyph(side: PanelSide, collapsed: boolean): string {
   if (side === 'left') return collapsed ? '»' : '«';
   return collapsed ? '«' : '»';
 }
@@ -46,20 +46,20 @@ const FOCUSABLE_SELECTOR = 'a[href], button, input, select, textarea, [tabindex]
  *  *attribute*, not the computed `tabIndex` property — the property reports `-1`
  *  for natively-focusable elements (`<button>` / `<input>`) that carry no explicit
  *  attribute, which would wrongly drop every default tab stop. */
-function paneTabbables(root: HTMLElement): HTMLElement[] {
+function panelTabbables(root: HTMLElement): HTMLElement[] {
   return [...root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)].filter(
     (el) => !el.hasAttribute('disabled') && el.getAttribute('tabindex') !== '-1',
   );
 }
 
 /**
- * Keyboard handler for the scroll content (which wraps only the modules):
+ * Keyboard handler for the scroll content (which wraps only the sections):
  *
- * - **Escape** blurs the active control — the deliberate way to leave the pane's
+ * - **Escape** blurs the active control — the deliberate way to leave the panel's
  *   tab order (the next Tab then resumes outward from there).
  * - **Tab past either end** *holds* focus on the edge field instead of moving.
- *   Letting Tab flow on would silently drop the user into the *next* pane (or page
- *   chrome) — easy to start editing the wrong pane without noticing — because a
+ *   Letting Tab flow on would silently drop the user into the *next* panel (or page
+ *   chrome) — easy to start editing the wrong panel without noticing — because a
  *   programmatic blur doesn't reset the browser's focus-navigation starting point,
  *   so the next Tab just resumes forward in DOM order. Wrapping to the other end
  *   would instead jar a long scrolled list to the top. So at the boundary we
@@ -75,18 +75,18 @@ function onContentKeyDown(e: KeyboardEvent & { currentTarget: HTMLElement }): vo
     return;
   }
   if (e.key !== 'Tab') return;
-  const tabbables = paneTabbables(e.currentTarget);
+  const tabbables = panelTabbables(e.currentTarget);
   if (tabbables.length === 0) return;
   const active = document.activeElement;
   const atFirst = e.shiftKey && active === tabbables[0];
   const atLast = !e.shiftKey && active === tabbables[tabbables.length - 1];
   // Hold focus here — don't blur (the browser would resume Tab from this spot and
-  // cross into the next pane) and don't wrap (jars a long list). Escape leaves.
+  // cross into the next panel) and don't wrap (jars a long list). Escape leaves.
   if (atFirst || atLast) e.preventDefault();
 }
 
 /**
- * Scrollable pane body with overflow affordances. The body hides its native
+ * Scrollable panel body with overflow affordances. The body hides its native
  * scrollbar (see theme); instead, thin arrowed bars pin to the top/bottom edge
  * and show only when content overflows that direction — clicking one scrolls
  * fully to that end. Bars overlay the body (absolute) so toggling them never
@@ -97,12 +97,12 @@ function onContentKeyDown(e: KeyboardEvent & { currentTarget: HTMLElement }): vo
  * means content overflows that way. This is deliberately *not* a scroll handler
  * — reading scroll offset in an `onScroll` to position elements is a
  * scroll-linked effect (Firefox warns about it and it can jank with async
- * panning). The observer also covers size changes (the pane resizing or content
- * growing/shrinking, e.g. a `Module` expanding) since those change whether a
+ * panning). The observer also covers size changes (the panel resizing or content
+ * growing/shrinking, e.g. a `Section` expanding) since those change whether a
  * sentinel intersects. Lives in its own component so the observer mounts/
- * unmounts with the expanded pane.
+ * unmounts with the expanded panel.
  */
-function PaneScrollBody(props: { readonly children: JSX.Element }): JSX.Element {
+function PanelScrollBody(props: { readonly children: JSX.Element }): JSX.Element {
   let viewport: HTMLDivElement | undefined;
   let topSentinel: HTMLDivElement | undefined;
   let bottomSentinel: HTMLDivElement | undefined;
@@ -134,11 +134,11 @@ function PaneScrollBody(props: { readonly children: JSX.Element }): JSX.Element
     viewport?.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' });
 
   return (
-    <div class="stage-pane-scroll">
+    <div class="stage-panel-scroll">
       <Show when={canUp()}>
         <button
           type="button"
-          class="stage-pane-scroll-hint stage-pane-scroll-hint-top"
+          class="stage-panel-scroll-hint stage-panel-scroll-hint-top"
           title="scroll to top"
           tabindex={-1}
           onClick={toTop}
@@ -147,23 +147,23 @@ function PaneScrollBody(props: { readonly children: JSX.Element }): JSX.Element
         </button>
       </Show>
       <div
-        class="stage-pane-body"
+        class="stage-panel-body"
         ref={(el) => {
           viewport = el;
         }}
       >
         <div
-          class="stage-pane-scroll-sentinel stage-pane-scroll-sentinel-top"
+          class="stage-panel-scroll-sentinel stage-panel-scroll-sentinel-top"
           aria-hidden="true"
           ref={(el) => {
             topSentinel = el;
           }}
         />
-        <div class="stage-pane-scroll-content" onKeyDown={onContentKeyDown}>
+        <div class="stage-panel-scroll-content" onKeyDown={onContentKeyDown}>
           {props.children}
         </div>
         <div
-          class="stage-pane-scroll-sentinel stage-pane-scroll-sentinel-bottom"
+          class="stage-panel-scroll-sentinel stage-panel-scroll-sentinel-bottom"
           aria-hidden="true"
           ref={(el) => {
             bottomSentinel = el;
@@ -173,7 +173,7 @@ function PaneScrollBody(props: { readonly children: JSX.Element }): JSX.Element
       <Show when={canDown()}>
         <button
           type="button"
-          class="stage-pane-scroll-hint stage-pane-scroll-hint-bottom"
+          class="stage-panel-scroll-hint stage-panel-scroll-hint-bottom"
           title="scroll to bottom"
           tabindex={-1}
           onClick={toBottom}
@@ -186,22 +186,22 @@ function PaneScrollBody(props: { readonly children: JSX.Element }): JSX.Element
 }
 
 /**
- * Side pane with two presentations:
+ * Side panel with two presentations:
  *
- * - **Collapsed** (strip): chevron toggles the pane open.
+ * - **Collapsed** (strip): chevron toggles the panel open.
  * - **Expanded** (column): chevron toggles closed; `children` fills the body.
  *
- * Hosted as a CSS-grid track inside `EditorPanes`, so resizing the pane
+ * Hosted as a CSS-grid track inside `EditorPanels`, so resizing the panel
  * resizes the centre cell automatically.
  */
-export function SidePane(props: SidePaneProps): JSX.Element {
+export function Panel(props: PanelProps): JSX.Element {
   // props.side and props.toggleVariant never change for the lifetime of an instance.
   const side = untrack(() => props.side);
   const variant = untrack(() => props.toggleVariant ?? 'header');
-  const sideClass = side === 'left' ? 'stage-pane-left' : 'stage-pane-right';
+  const sideClass = side === 'left' ? 'stage-panel-left' : 'stage-panel-right';
   const headerSideClass =
-    side === 'left' ? 'stage-pane-header-left' : 'stage-pane-header-right';
-  const title = (): string => (props.collapsed() ? 'expand pane' : 'collapse pane');
+    side === 'left' ? 'stage-panel-header-left' : 'stage-panel-header-right';
+  const title = (): string => (props.collapsed() ? 'expand panel' : 'collapse panel');
   const glyph = (): string => chevronGlyph(side, props.collapsed());
 
   // Vertical edge toggle button (edge variant only). Same glyph/title as the
@@ -209,7 +209,7 @@ export function SidePane(props: SidePaneProps): JSX.Element {
   const edgeButton = (
     <button
       type="button"
-      class="stage-pane-edge-button"
+      class="stage-panel-edge-button"
       tabindex={-1}
       onClick={() => props.onToggle()}
       title={title()}
@@ -223,12 +223,12 @@ export function SidePane(props: SidePaneProps): JSX.Element {
       when={!props.collapsed()}
       fallback={
         <div
-          class={`stage-pane stage-pane-strip ${sideClass}`}
-          classList={{ 'stage-pane-strip-edge': variant === 'edge', ...sizeClassList(props.size) }}
+          class={`stage-panel stage-panel-strip ${sideClass}`}
+          classList={{ 'stage-panel-strip-edge': variant === 'edge', ...sizeClassList(props.size) }}
         >
           <button
             type="button"
-            class="stage-pane-strip-button"
+            class="stage-panel-strip-button"
             onClick={() => props.onToggle()}
             title={title()}
           >
@@ -241,13 +241,13 @@ export function SidePane(props: SidePaneProps): JSX.Element {
         when={variant === 'edge'}
         fallback={
           <div
-            class={`stage-pane stage-pane-expanded ${sideClass}`}
+            class={`stage-panel stage-panel-expanded ${sideClass}`}
             classList={sizeClassList(props.size)}
           >
-            <div class={`stage-pane-header ${headerSideClass}`}>
+            <div class={`stage-panel-header ${headerSideClass}`}>
               <button
                 type="button"
-                class="stage-pane-header-button"
+                class="stage-panel-header-button"
                 tabindex={-1}
                 onClick={() => props.onToggle()}
                 title={title()}
@@ -255,19 +255,19 @@ export function SidePane(props: SidePaneProps): JSX.Element {
                 {glyph()}
               </button>
             </div>
-            <PaneScrollBody>{props.children}</PaneScrollBody>
+            <PanelScrollBody>{props.children}</PanelScrollBody>
           </div>
         }
       >
         {/* Edge variant: a horizontal row — the toggle bar on the inside edge +
-            the scroll body. Inside edge = right for a left pane, left for a right
-            pane, hence the per-side ordering. No top header eats vertical space. */}
+            the scroll body. Inside edge = right for a left panel, left for a right
+            panel, hence the per-side ordering. No top header eats vertical space. */}
         <div
-          class={`stage-pane stage-pane-expanded stage-pane-expanded-edge ${sideClass}`}
+          class={`stage-panel stage-panel-expanded stage-panel-expanded-edge ${sideClass}`}
           classList={sizeClassList(props.size)}
         >
           <Show when={side === 'right'}>{edgeButton}</Show>
-          <PaneScrollBody>{props.children}</PaneScrollBody>
+          <PanelScrollBody>{props.children}</PanelScrollBody>
           <Show when={side === 'left'}>{edgeButton}</Show>
         </div>
       </Show>
diff --git a/packages/solid-stage/src/panes/Module.test.tsx b/packages/solid-stage/src/layout/Section.test.tsx
similarity index 56%
rename from packages/solid-stage/src/panes/Module.test.tsx
rename to packages/solid-stage/src/layout/Section.test.tsx
index c51b729..1a59520 100644
--- a/packages/solid-stage/src/panes/Module.test.tsx
+++ b/packages/solid-stage/src/layout/Section.test.tsx
@@ -2,17 +2,17 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { type JSX } from 'solid-js';
 import { mount } from '../test-utils';
-import { Module } from './Module';
+import { Section } from './Section';
 
 afterEach(() => {
   document.body.innerHTML = '';
   localStorage.clear();
 });
 
-describe('Module', () => {
+describe('Section', () => {
   it('renders the title text', () => {
     const { host, dispose } = mount(() => (
-      <Module title="Animation">body</Module>
+      <Section title="Animation">body</Section>
     ));
     expect(host.textContent).toContain('Animation');
     dispose();
@@ -20,51 +20,51 @@ describe('Module', () => {
 
   it('defaults open when nothing is cached (down glyph, body present)', () => {
     const { host, dispose } = mount(() => (
-      <Module title="X">body content</Module>
+      <Section title="X">body content</Section>
     ));
-    const chevron = host.querySelector('.stage-module-chevron') as HTMLSpanElement;
+    const chevron = host.querySelector('.stage-section-chevron') as HTMLSpanElement;
     expect(chevron.textContent).toBe('▾');
-    expect(host.querySelector('.stage-module-body')?.textContent).toBe('body content');
+    expect(host.querySelector('.stage-section-body')?.textContent).toBe('body content');
     dispose();
   });
 
   it('honours defaultOpen={false}: right glyph + body hidden', () => {
     const { host, dispose } = mount(() => (
-      <Module title="X" defaultOpen={false}>
+      <Section title="X" defaultOpen={false}>
         body content
-      </Module>
+      </Section>
     ));
-    const chevron = host.querySelector('.stage-module-chevron') as HTMLSpanElement;
+    const chevron = host.querySelector('.stage-section-chevron') as HTMLSpanElement;
     expect(chevron.textContent).toBe('▸');
-    expect(host.querySelector('.stage-module-body')).toBeNull();
+    expect(host.querySelector('.stage-section-body')).toBeNull();
     dispose();
   });
 
   it('uncontrolled mode: click toggles glyph + body visibility', () => {
     const { host, dispose } = mount(() => (
-      <Module title="X" defaultOpen={false}>
+      <Section title="X" defaultOpen={false}>
         body content
-      </Module>
+      </Section>
     ));
     const button = host.querySelector('button') as HTMLButtonElement;
     const chevron = (): string =>
-      (host.querySelector('.stage-module-chevron') as HTMLSpanElement).textContent ?? '';
+      (host.querySelector('.stage-section-chevron') as HTMLSpanElement).textContent ?? '';
     expect(chevron()).toBe('▸');
     button.click();
     expect(chevron()).toBe('▾');
-    expect(host.querySelector('.stage-module-body')).not.toBeNull();
+    expect(host.querySelector('.stage-section-body')).not.toBeNull();
     button.click();
     expect(chevron()).toBe('▸');
-    expect(host.querySelector('.stage-module-body')).toBeNull();
+    expect(host.querySelector('.stage-section-body')).toBeNull();
     dispose();
   });
 
   it('onToggle fires with the next value', () => {
     const onToggle = vi.fn();
     const { host, dispose } = mount(() => (
-      <Module title="X" defaultOpen={false} onToggle={onToggle}>
+      <Section title="X" defaultOpen={false} onToggle={onToggle}>
         body
-      </Module>
+      </Section>
     ));
     const button = host.querySelector('button') as HTMLButtonElement;
     button.click();
@@ -76,74 +76,74 @@ describe('Module', () => {
   });
 
   it('persists collapse state to localStorage (keyed by title) and reseeds from it', () => {
-    const first = mount(() => <Module title="Persisted">body</Module>);
+    const first = mount(() => <Section title="Persisted">body</Section>);
     // Defaults open; collapse it.
     (first.host.querySelector('button') as HTMLButtonElement).click();
-    expect(localStorage.getItem('stage-module:Persisted')).toBe('0');
+    expect(localStorage.getItem('stage-section:Persisted')).toBe('0');
     first.dispose();
     first.host.remove();
 
     // A fresh instance with the same title seeds from the cached (collapsed) state.
-    const second = mount(() => <Module title="Persisted">body</Module>);
-    const chevron = second.host.querySelector('.stage-module-chevron') as HTMLSpanElement;
+    const second = mount(() => <Section title="Persisted">body</Section>);
+    const chevron = second.host.querySelector('.stage-section-chevron') as HTMLSpanElement;
     expect(chevron.textContent).toBe('▸');
-    expect(second.host.querySelector('.stage-module-body')).toBeNull();
+    expect(second.host.querySelector('.stage-section-body')).toBeNull();
     second.dispose();
   });
 
   it('cached value wins over defaultOpen', () => {
-    localStorage.setItem('stage-module:K', '0');
+    localStorage.setItem('stage-section:K', '0');
     const { host, dispose } = mount(() => (
-      <Module title="K" defaultOpen={true}>
+      <Section title="K" defaultOpen={true}>
         body
-      </Module>
+      </Section>
     ));
-    expect((host.querySelector('.stage-module-chevron') as HTMLSpanElement).textContent).toBe('▸');
+    expect((host.querySelector('.stage-section-chevron') as HTMLSpanElement).textContent).toBe('▸');
     dispose();
   });
 
   it('persistKey overrides the title as the cache key', () => {
     const { host, dispose } = mount(() => (
-      <Module title="Display Title" persistKey="stable-id">
+      <Section title="Display Title" persistKey="stable-id">
         body
-      </Module>
+      </Section>
     ));
     (host.querySelector('button') as HTMLButtonElement).click();
-    expect(localStorage.getItem('stage-module:stable-id')).toBe('0');
-    expect(localStorage.getItem('stage-module:Display Title')).toBeNull();
+    expect(localStorage.getItem('stage-section:stable-id')).toBe('0');
+    expect(localStorage.getItem('stage-section:Display Title')).toBeNull();
     dispose();
   });
 
   it('persist={false} disables caching', () => {
     const { host, dispose } = mount(() => (
-      <Module title="NoCache" persist={false}>
+      <Section title="NoCache" persist={false}>
         body
-      </Module>
+      </Section>
     ));
     (host.querySelector('button') as HTMLButtonElement).click();
-    expect(localStorage.getItem('stage-module:NoCache')).toBeNull();
+    expect(localStorage.getItem('stage-section:NoCache')).toBeNull();
     dispose();
   });
 
   it('controlled mode never caches (parent owns persistence)', () => {
     const { host, dispose } = mount(() => (
-      <Module title="Ctl" open={() => true} onToggle={() => {}}>
+      <Section title="Ctl" open={() => true} onToggle={() => {}}>
         body
-      </Module>
+      </Section>
     ));
     (host.querySelector('button') as HTMLButtonElement).click();
-    expect(localStorage.getItem('stage-module:Ctl')).toBeNull();
+    expect(localStorage.getItem('stage-section:Ctl')).toBeNull();
     dispose();
   });
 
   it('controlled mode: internal signal is bypassed, glyph reflects parent open()', () => {
     const onToggle = vi.fn();
     const { host, dispose } = mount(() => (
-      <Module title="X" open={() => true} onToggle={onToggle}>
+      <Section title="X" open={() => true} onToggle={onToggle}>
         body
-      </Module>
+      </Section>
     ));
-    const chevron = host.querySelector('.stage-module-chevron') as HTMLSpanElement;
+    const chevron = host.querySelector('.stage-section-chevron') as HTMLSpanElement;
     expect(chevron.textContent).toBe('▾');
     const button = host.querySelector('button') as HTMLButtonElement;
     button.click();
@@ -155,23 +155,23 @@ describe('Module', () => {
 
   it('size applies the tier class to the body (not the header)', () => {
     const { host, dispose } = mount(() => (
-      <Module title="X" size="small">
+      <Section title="X" size="small">
         body
-      </Module>
+      </Section>
     ));
-    expect(host.querySelector('.stage-module-body')?.classList.contains('stage-size-small')).toBe(
+    expect(host.querySelector('.stage-section-body')?.classList.contains('stage-size-small')).toBe(
       true,
     );
     // Header stays untiered so it follows the inherited (pane) size.
     expect(
-      host.querySelector('.stage-module-header')?.classList.contains('stage-size-small'),
+      host.querySelector('.stage-section-header')?.classList.contains('stage-size-small'),
     ).toBe(false);
     dispose();
   });
 
   it('no size leaves the body untiered (inherits the cascade)', () => {
-    const { host, dispose } = mount(() => <Module title="X">body</Module>);
-    const body = host.querySelector('.stage-module-body') as HTMLElement;
+    const { host, dispose } = mount(() => <Section title="X">body</Section>);
+    const body = host.querySelector('.stage-section-body') as HTMLElement;
     expect(body.classList.contains('stage-size-small')).toBe(false);
     expect(body.classList.contains('stage-size-normal')).toBe(false);
     expect(body.classList.contains('stage-size-large')).toBe(false);
@@ -183,42 +183,42 @@ describe('Module', () => {
 
     it('renders the custom icon in place of the chevron', () => {
       const { host, dispose } = mount(() => (
-        <Module title="X" icon={Icon}>
+        <Section title="X" icon={Icon}>
           body
-        </Module>
+        </Section>
       ));
-      expect(host.querySelector('.stage-module-icon')).not.toBeNull();
-      expect(host.querySelector('.stage-module-icon svg')).not.toBeNull();
-      expect(host.querySelector('.stage-module-chevron')).toBeNull();
+      expect(host.querySelector('.stage-section-icon')).not.toBeNull();
+      expect(host.querySelector('.stage-section-icon svg')).not.toBeNull();
+      expect(host.querySelector('.stage-section-chevron')).toBeNull();
       dispose();
     });
 
     it('without icon the chevron still renders', () => {
-      const { host, dispose } = mount(() => <Module title="X">body</Module>);
-      expect(host.querySelector('.stage-module-chevron')).not.toBeNull();
-      expect(host.querySelector('.stage-module-icon')).toBeNull();
+      const { host, dispose } = mount(() => <Section title="X">body</Section>);
+      expect(host.querySelector('.stage-section-chevron')).not.toBeNull();
+      expect(host.querySelector('.stage-section-icon')).toBeNull();
       dispose();
     });
 
     it('toggle still works with a custom icon', () => {
       const { host, dispose } = mount(() => (
-        <Module title="X" icon={Icon} defaultOpen={false}>
+        <Section title="X" icon={Icon} defaultOpen={false}>
           body
-        </Module>
+        </Section>
       ));
-      expect(host.querySelector('.stage-module-body')).toBeNull();
-      (host.querySelector('.stage-module-header-toggle') as HTMLButtonElement).click();
-      expect(host.querySelector('.stage-module-body')).not.toBeNull();
+      expect(host.querySelector('.stage-section-body')).toBeNull();
+      (host.querySelector('.stage-section-header-toggle') as HTMLButtonElement).click();
+      expect(host.querySelector('.stage-section-body')).not.toBeNull();
       dispose();
     });
 
-    it('renders before the static title in a dismissable module', () => {
+    it('renders before the static title in a dismissable section', () => {
       const { host, dispose } = mount(() => (
-        <Module title="X" icon={Icon} onClose={() => {}}>
+        <Section title="X" icon={Icon} onClose={() => {}}>
           body
-        </Module>
+        </Section>
       ));
-      expect(host.querySelector('.stage-module-header-static .stage-module-icon')).not.toBeNull();
+      expect(host.querySelector('.stage-section-header-static .stage-section-icon')).not.toBeNull();
       dispose();
     });
   });
@@ -226,47 +226,47 @@ describe('Module', () => {
   describe('onClose (dismissable mode)', () => {
     it('renders a static header with an X button, no chevron, body always open', () => {
       const { host, dispose } = mount(() => (
-        <Module title="Settings" onClose={() => {}}>
+        <Section title="Settings" onClose={() => {}}>
           body content
-        </Module>
+        </Section>
       ));
-      expect(host.querySelector('.stage-module-header-static')).not.toBeNull();
-      expect(host.querySelector('.stage-module-chevron')).toBeNull();
-      expect(host.querySelector('.stage-module-close')).not.toBeNull();
-      expect(host.querySelector('.stage-module-body')?.textContent).toBe('body content');
+      expect(host.querySelector('.stage-section-header-static')).not.toBeNull();
+      expect(host.querySelector('.stage-section-chevron')).toBeNull();
+      expect(host.querySelector('.stage-section-close')).not.toBeNull();
+      expect(host.querySelector('.stage-section-body')?.textContent).toBe('body content');
       dispose();
     });
 
     it('clicking the X button fires onClose', () => {
       const onClose = vi.fn();
       const { host, dispose } = mount(() => (
-        <Module title="Settings" onClose={onClose}>
+        <Section title="Settings" onClose={onClose}>
           body
-        </Module>
+        </Section>
       ));
-      (host.querySelector('.stage-module-close') as HTMLButtonElement).click();
+      (host.querySelector('.stage-section-close') as HTMLButtonElement).click();
       expect(onClose).toHaveBeenCalledTimes(1);
       dispose();
     });
 
     it('does not persist collapse state (no toggle to cache)', () => {
       const { dispose } = mount(() => (
-        <Module title="Settings" onClose={() => {}}>
+        <Section title="Settings" onClose={() => {}}>
           body
-        </Module>
+        </Section>
       ));
-      expect(localStorage.getItem('stage-module:Settings')).toBeNull();
+      expect(localStorage.getItem('stage-section:Settings')).toBeNull();
       dispose();
     });
 
     it('ignores a cached collapsed state — stays open', () => {
-      localStorage.setItem('stage-module:Settings', '0');
+      localStorage.setItem('stage-section:Settings', '0');
       const { host, dispose } = mount(() => (
-        <Module title="Settings" onClose={() => {}}>
+        <Section title="Settings" onClose={() => {}}>
           body
-        </Module>
+        </Section>
       ));
-      expect(host.querySelector('.stage-module-body')?.textContent).toBe('body');
+      expect(host.querySelector('.stage-section-body')?.textContent).toBe('body');
       dispose();
     });
   });
@@ -276,7 +276,7 @@ describe('Module', () => {
 
     it('renders one borderless icon button per action', () => {
       const { host, dispose } = mount(() => (
-        <Module
+        <Section
           title="X"
           headerActions={[
             { icon: Icon, title: 'Copy', onClick: () => {} },
@@ -284,9 +284,9 @@ describe('Module', () => {
           ]}
         >
           body
-        </Module>
+        </Section>
       ));
-      const buttons = host.querySelectorAll('.stage-module-header-actions .stage-icon-button');
+      const buttons = host.querySelectorAll('.stage-section-header-actions .stage-icon-button');
       expect(buttons.length).toBe(2);
       buttons.forEach((b) => {
         // Borderless + subtle: the header always uses the bare secondary skin.
@@ -301,46 +301,46 @@ describe('Module', () => {
       dispose();
     });
 
-    it('clicking an action fires its onClick and does NOT toggle the module', () => {
+    it('clicking an action fires its onClick and does NOT toggle the section', () => {
       const onClick = vi.fn();
       const { host, dispose } = mount(() => (
-        <Module title="X" headerActions={[{ icon: Icon, title: 'Copy', onClick }]}>
+        <Section title="X" headerActions={[{ icon: Icon, title: 'Copy', onClick }]}>
           body
-        </Module>
+        </Section>
       ));
-      // Module defaults open.
-      expect(host.querySelector('.stage-module-body')).not.toBeNull();
-      (host.querySelector('.stage-module-header-actions .stage-icon-button') as HTMLButtonElement).click();
+      // Section defaults open.
+      expect(host.querySelector('.stage-section-body')).not.toBeNull();
+      (host.querySelector('.stage-section-header-actions .stage-icon-button') as HTMLButtonElement).click();
       expect(onClick).toHaveBeenCalledTimes(1);
       // Still open — the action is a sibling of the toggle, so it never toggles.
-      expect(host.querySelector('.stage-module-body')).not.toBeNull();
+      expect(host.querySelector('.stage-section-body')).not.toBeNull();
       dispose();
     });
 
     it('the toggle still collapses the body when actions are present', () => {
       const { host, dispose } = mount(() => (
-        <Module title="X" headerActions={[{ icon: Icon, title: 'Copy', onClick: () => {} }]}>
+        <Section title="X" headerActions={[{ icon: Icon, title: 'Copy', onClick: () => {} }]}>
           body
-        </Module>
+        </Section>
       ));
-      (host.querySelector('.stage-module-header-toggle') as HTMLButtonElement).click();
-      expect(host.querySelector('.stage-module-body')).toBeNull();
+      (host.querySelector('.stage-section-header-toggle') as HTMLButtonElement).click();
+      expect(host.querySelector('.stage-section-body')).toBeNull();
       dispose();
     });
 
-    it('a dismissable module shows actions left of the × close', () => {
+    it('a dismissable section shows actions left of the × close', () => {
       const { host, dispose } = mount(() => (
-        <Module
+        <Section
           title="Settings"
           onClose={() => {}}
           headerActions={[{ icon: Icon, title: 'Copy', onClick: () => {} }]}
         >
           body
-        </Module>
+        </Section>
       ));
-      const actions = host.querySelector('.stage-module-header-actions') as HTMLElement;
+      const actions = host.querySelector('.stage-section-header-actions') as HTMLElement;
       expect(actions.querySelector('.stage-icon-button')).not.toBeNull();
-      const close = actions.querySelector('.stage-module-close');
+      const close = actions.querySelector('.stage-section-close');
       expect(close).not.toBeNull();
       // Mouse-only — Escape is the keyboard close.
       expect(close?.getAttribute('tabindex')).toBe('-1');
diff --git a/packages/solid-stage/src/panes/Module.tsx b/packages/solid-stage/src/layout/Section.tsx
similarity index 70%
rename from packages/solid-stage/src/panes/Module.tsx
rename to packages/solid-stage/src/layout/Section.tsx
index 63321ad..b13ca3c 100644
--- a/packages/solid-stage/src/panes/Module.tsx
+++ b/packages/solid-stage/src/layout/Section.tsx
@@ -1,20 +1,20 @@
 import { For, Show, createSignal, type JSX } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
 import { readFlag, writeFlag } from '../state/persist';
-import { IconButton, type IconButtonTone, type IconComponent } from '../fields/IconButton';
+import { IconButton, type IconButtonTone, type IconComponent } from '../controls/IconButton';
 import { sizeClassList, type ControlSize } from './size';
 
-/** Namespace for the per-module collapse-state keys in localStorage. */
-const STORAGE_PREFIX = 'stage-module:';
+/** Namespace for the per-section collapse-state keys in localStorage. */
+const STORAGE_PREFIX = 'stage-section:';
 
 /**
- * One icon button on a module's title bar (e.g. copy / lock / popout). Rendered
+ * One icon button on a section's title bar (e.g. copy / lock / popout). Rendered
  * as a **borderless** `IconButton` — the header always uses the borderless skin,
  * so `border` is not exposed. `title` is required: it's the button's accessible
  * name and its native hover tooltip ("what the button does"), since the button
  * shows only an icon.
  */
-export interface ModuleHeaderAction {
+export interface SectionHeaderAction {
   readonly icon: IconComponent;
   readonly title: string;
   readonly onClick: () => void;
@@ -25,7 +25,7 @@ export interface ModuleHeaderAction {
   readonly tone?: IconButtonTone | undefined;
 }
 
-export interface ModuleProps {
+export interface SectionProps {
   readonly title: string;
   readonly children: JSX.Element;
   readonly defaultOpen?: boolean | undefined;
@@ -33,40 +33,40 @@ export interface ModuleProps {
   readonly onToggle?: ((next: boolean) => void) | undefined;
   /**
    * localStorage key the collapse state is cached under. Defaults to `title`;
-   * set an explicit key if two modules could collide on the same title.
+   * set an explicit key if two sections could collide on the same title.
    */
   readonly persistKey?: string | undefined;
   /**
    * Cache the collapse state across reloads (uncontrolled mode only). On by
-   * default — pass `false` to opt a module out.
+   * default — pass `false` to opt a section out.
    */
   readonly persist?: boolean | undefined;
   /**
-   * Make the module *dismissable* instead of collapsible. When set, the header
+   * Make the section *dismissable* instead of collapsible. When set, the header
    * becomes static (no chevron, no toggle), the body is always open, collapse
    * persistence is skipped, and a `×` button anchored top-right calls this. Used
-   * for a module hosted in the global modal (`stageModal`), where the section is
+   * for a section hosted in the global modal (`stageModal`), where the section is
    * opened, edited, then closed rather than collapsed.
    */
   readonly onClose?: (() => void) | undefined;
   /**
    * Icon buttons on the right of the title bar (copy / lock / popout, …). Each is
-   * rendered as a borderless `IconButton`; in a dismissable module they sit left
-   * of the `×`. Clicking one fires its `onClick` without toggling the module.
+   * rendered as a borderless `IconButton`; in a dismissable section they sit left
+   * of the `×`. Clicking one fires its `onClick` without toggling the section.
    */
-  readonly headerActions?: ReadonlyArray<ModuleHeaderAction> | undefined;
+  readonly headerActions?: ReadonlyArray<SectionHeaderAction> | undefined;
   /**
    * Override the `▾`/`▸` collapse chevron with a custom icon. One icon serves
    * both states (open and closed) — swap it per-state from the consumer side via
    * `open()`/`onToggle` if a state-dependent glyph is wanted. In a dismissable
-   * (modal) module the icon renders before the static title.
+   * (modal) section the icon renders before the static title.
    */
   readonly icon?: IconComponent | undefined;
   /**
-   * Type-scale tier for this module's *fields* (applied to the body, not the
-   * header). Omit to inherit the pane/stage tier. A module sizing its own fields
-   * keeps the pane's header height, since the override never touches the header —
-   * so an info-dense module can go `small` without shrinking its header out of
+   * Type-scale tier for this section's *fields* (applied to the body, not the
+   * header). Omit to inherit the panel/stage tier. A section sizing its own fields
+   * keeps the panel's header height, since the override never touches the header —
+   * so an info-dense section can go `small` without shrinking its header out of
    * line with its neighbours.
    */
   readonly size?: ControlSize | undefined;
@@ -75,20 +75,20 @@ export interface ModuleProps {
 /**
  * Collapsible container — a header with a chevron over a body. The body
  * holds whatever the consumer composes (a `FieldGroup`, readonly text, an
- * arbitrary panel); the module is the unit a consumer builds editor UI
+ * arbitrary panel); the section is the unit a consumer builds editor UI
  * from.
  *
  * Controlled or uncontrolled, mirrored like the rest of the library: pass
  * `open()` + `onToggle` to drive it from the parent, otherwise the internal
  * signal is the source of truth.
  *
- * Uncontrolled modules persist their collapse state to localStorage out of the
+ * Uncontrolled sections persist their collapse state to localStorage out of the
  * box (keyed by `title`, or `persistKey`). The initial state is the cached
- * value if present, else `defaultOpen`, else open — so a module with nothing
- * cached shows expanded. Controlled modules (`open()` supplied) never cache;
+ * value if present, else `defaultOpen`, else open — so a section with nothing
+ * cached shows expanded. Controlled sections (`open()` supplied) never cache;
  * the parent owns persistence.
  */
-export function Module(props: ModuleProps): JSX.Element {
+export function Section(props: SectionProps): JSX.Element {
   // Dismissable (modal) mode: header is static, body always open, no persistence.
   const dismissable = (): boolean => props.onClose !== undefined;
   const persist = (): boolean => props.persist !== false && !dismissable();
@@ -114,41 +114,41 @@ export function Module(props: ModuleProps): JSX.Element {
   };
   const hasActions = (): boolean => dismissable() || (props.headerActions?.length ?? 0) > 0;
   return (
-    <div class="stage-module" classList={{ 'stage-module-open': isOpen() }}>
+    <div class="stage-section" classList={{ 'stage-section-open': isOpen() }}>
       {/* Header is a flex row: a left label area (a toggle button when collapsible,
           a static title when dismissable) + an optional right-side actions
           cluster. The actions are siblings of the toggle, not nested inside it, so
           a click on one never reaches the toggle (no nested <button>, no toggle). */}
-      <div class="stage-module-header" classList={{ 'stage-module-header-static': dismissable() }}>
+      <div class="stage-section-header" classList={{ 'stage-section-header-static': dismissable() }}>
         <Show
           when={dismissable()}
           fallback={
-            <button type="button" class="stage-module-header-toggle" onClick={() => toggle()}>
+            <button type="button" class="stage-section-header-toggle" onClick={() => toggle()}>
               <Show
                 when={props.icon}
-                fallback={<span class="stage-module-chevron">{isOpen() ? '▾' : '▸'}</span>}
+                fallback={<span class="stage-section-chevron">{isOpen() ? '▾' : '▸'}</span>}
               >
                 {(icon) => (
-                  <span class="stage-module-icon">
+                  <span class="stage-section-icon">
                     <Dynamic component={icon()} />
                   </span>
                 )}
               </Show>
-              <span class="stage-module-title">{props.title}</span>
+              <span class="stage-section-title">{props.title}</span>
             </button>
           }
         >
           <Show when={props.icon}>
             {(icon) => (
-              <span class="stage-module-icon">
+              <span class="stage-section-icon">
                 <Dynamic component={icon()} />
               </span>
             )}
           </Show>
-          <span class="stage-module-title">{props.title}</span>
+          <span class="stage-section-title">{props.title}</span>
         </Show>
         <Show when={hasActions()}>
-          <div class="stage-module-header-actions">
+          <div class="stage-section-header-actions">
             <For each={props.headerActions}>
               {(action) => (
                 <IconButton
@@ -169,7 +169,7 @@ export function Module(props: ModuleProps): JSX.Element {
               {/* Mouse-only like the action icons; Escape is the keyboard close. */}
               <button
                 type="button"
-                class="stage-module-close"
+                class="stage-section-close"
                 aria-label="Close"
                 tabindex={-1}
                 onClick={() => props.onClose?.()}
@@ -181,7 +181,7 @@ export function Module(props: ModuleProps): JSX.Element {
         </Show>
       </div>
       <Show when={isOpen()}>
-        <div class="stage-module-body" classList={sizeClassList(props.size)}>
+        <div class="stage-section-body" classList={sizeClassList(props.size)}>
           {props.children}
         </div>
       </Show>
diff --git a/packages/solid-stage/src/panes/TabMenu.test.tsx b/packages/solid-stage/src/layout/TabMenu.test.tsx
similarity index 100%
rename from packages/solid-stage/src/panes/TabMenu.test.tsx
rename to packages/solid-stage/src/layout/TabMenu.test.tsx
diff --git a/packages/solid-stage/src/panes/TabMenu.tsx b/packages/solid-stage/src/layout/TabMenu.tsx
similarity index 100%
rename from packages/solid-stage/src/panes/TabMenu.tsx
rename to packages/solid-stage/src/layout/TabMenu.tsx
diff --git a/packages/solid-stage/src/panes/Toolbar.test.tsx b/packages/solid-stage/src/layout/Toolbar.test.tsx
similarity index 100%
rename from packages/solid-stage/src/panes/Toolbar.test.tsx
rename to packages/solid-stage/src/layout/Toolbar.test.tsx
diff --git a/packages/solid-stage/src/panes/Toolbar.tsx b/packages/solid-stage/src/layout/Toolbar.tsx
similarity index 100%
rename from packages/solid-stage/src/panes/Toolbar.tsx
rename to packages/solid-stage/src/layout/Toolbar.tsx
diff --git a/packages/solid-stage/src/panes/size.ts b/packages/solid-stage/src/layout/size.ts
similarity index 100%
rename from packages/solid-stage/src/panes/size.ts
rename to packages/solid-stage/src/layout/size.ts
diff --git a/packages/solid-stage/src/layout/types.ts b/packages/solid-stage/src/layout/types.ts
new file mode 100644
index 0000000..1d6b896
--- /dev/null
+++ b/packages/solid-stage/src/layout/types.ts
@@ -0,0 +1 @@
+export type PanelSide = 'left' | 'right';
diff --git a/packages/solid-stage/src/overlay/modal.tsx b/packages/solid-stage/src/overlay/modal.tsx
index 2e86399..9803404 100644
--- a/packages/solid-stage/src/overlay/modal.tsx
+++ b/packages/solid-stage/src/overlay/modal.tsx
@@ -3,7 +3,7 @@ import { Dynamic } from 'solid-js/web';
 
 /**
  * What a consumer hands to `stageModal.open`: a *thunk* returning the modal's
- * content (a single `Module`, by convention). It is deliberately a function, not
+ * content (a single `Section`, by convention). It is deliberately a function, not
  * pre-built JSX — `open` is typically called from an event handler, which runs
  * with no Solid owner, so eagerly-created JSX would orphan its effects/cleanups.
  * The host instantiates the thunk under its own owner instead (via `<Dynamic>`),
@@ -12,7 +12,7 @@ import { Dynamic } from 'solid-js/web';
 export type ModalContent = () => JSX.Element;
 
 export interface ModalOpenOptions {
-  /** Accessible name for the dialog (typically the hosted module's title). */
+  /** Accessible name for the dialog (typically the hosted section's title). */
   readonly label?: string | undefined;
 }
 
@@ -36,8 +36,8 @@ const [label, setLabel] = createSignal<string | undefined>(undefined);
 // keyboard user lands back where they were.
 let opener: HTMLElement | null = null;
 
-// Focusable descendants of the container, in DOM order. Mirrors SidePane's
-// `paneTabbables`: focusable, not disabled, not opted out via a `tabindex="-1"`
+// Focusable descendants of the container, in DOM order. Mirrors Panel's
+// `panelTabbables`: focusable, not disabled, not opted out via a `tabindex="-1"`
 // *attribute* (the computed `tabIndex` property misreports natively-focusable
 // elements, so we read the attribute).
 const FOCUSABLE_SELECTOR =
@@ -80,7 +80,7 @@ export const stageModal: StageModalController = { open, close, isOpen };
  * descendant of the consumer's root it inherits every token cleanly.
  *
  * The backdrop dims the page and swallows clicks (they neither close the modal
- * nor pass through to content beneath). Closing is the `×` button (a `Module`'s
+ * nor pass through to content beneath). Closing is the `×` button (a `Section`'s
  * `onClose`), the Escape key, or an imperative `stageModal.close()`. Focus is
  * trapped within the dialog and restored to the opener on close.
  */
diff --git a/packages/solid-stage/src/panes/types.ts b/packages/solid-stage/src/panes/types.ts
deleted file mode 100644
index 1eccf43..0000000
--- a/packages/solid-stage/src/panes/types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type PaneSide = 'left' | 'right';
diff --git a/packages/solid-stage/src/state/createEditorStore.test.tsx b/packages/solid-stage/src/state/createEditorStore.test.tsx
index 85b4c0f..5d8ca9f 100644
--- a/packages/solid-stage/src/state/createEditorStore.test.tsx
+++ b/packages/solid-stage/src/state/createEditorStore.test.tsx
@@ -2,7 +2,7 @@
 import { createRoot } from 'solid-js';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { mount } from '../test-utils';
-import { NumberField } from '../fields/NumberField';
+import { NumberField } from '../controls/NumberField';
 import { createEditorStore, type EditorStore } from './createEditorStore';
 
 interface Settings {
diff --git a/packages/solid-stage/src/state/persist.ts b/packages/solid-stage/src/state/persist.ts
index f00073d..8c7a4ce 100644
--- a/packages/solid-stage/src/state/persist.ts
+++ b/packages/solid-stage/src/state/persist.ts
@@ -76,9 +76,9 @@ export function savePersisted<T extends object>(
 
 /* Boolean flags --------------------------------------------------------- */
 /* The shared kernel behind every persisted collapse/visibility toggle in the
-   library (`Module`, `EditorPanes` panes, and `createPersistedToggle`). Stores
+   library (`Section`, `EditorPanels` panels, and `createPersistedToggle`). Stores
    a bare `'1'`/`'0'` under the full key the caller supplies — the caller owns
-   the namespace (`stage-module:` / `stage-pane:` / consumer-chosen). */
+   the namespace (`stage-section:` / `stage-panel:` / consumer-chosen). */
 
 /**
  * Read a persisted boolean flag. `undefined` means nothing stored — the caller
diff --git a/packages/solid-stage/src/theme/base.css b/packages/solid-stage/src/theme/base.css
index 8b1c40d..c7f8789 100644
--- a/packages/solid-stage/src/theme/base.css
+++ b/packages/solid-stage/src/theme/base.css
@@ -1,5 +1,5 @@
 /* Outer chrome -------------------------------------------------------- */
-.stage-panes {
+.stage-panels {
   position: fixed;
   inset: 0;
   display: grid;
@@ -8,7 +8,7 @@
 /* Embedded stage: fills its parent slot instead of the window, so a stage can
    be nested inside another stage's centre cell (split / multi-stage layouts).
    The parent slot must establish a height. */
-.stage-panes.stage-panes-embedded {
+.stage-panels.stage-panels-embedded {
   position: relative;
   inset: auto;
   width: 100%;
@@ -100,8 +100,8 @@
   overflow: hidden;
 }
 
-/* SidePane ------------------------------------------------------------- */
-.stage-pane {
+/* Panel ------------------------------------------------------------- */
+.stage-panel {
   z-index: var(--stage-z-pane-track);
   height: 100%;
   /* border-box so the inner border draws inside the pane's own width rather
@@ -115,19 +115,19 @@
   user-select: none;
 }
 
-.stage-pane-left {
+.stage-panel-left {
   border-right: 1px solid var(--stage-color-border);
 }
 
-.stage-pane-right {
+.stage-panel-right {
   border-left: 1px solid var(--stage-color-border);
 }
 
-.stage-pane-strip {
+.stage-panel-strip {
   width: var(--stage-strip-width);
 }
 
-.stage-pane-expanded {
+.stage-panel-expanded {
   width: var(--stage-expanded-width);
 }
 
@@ -137,12 +137,12 @@
    (header variant) it stays anchored to the top in a control-height band — the
    same vertical spot it held in the expanded header strip, so it doesn't jump on
    collapse. The edge variant re-centres it (its expanded chevron is centred too). */
-.stage-pane-strip-button {
+.stage-panel-strip-button {
   display: flex;
   flex: 1;
   align-items: flex-start;
   justify-content: center;
-  background: var(--stage-color-module-header-bg);
+  background: var(--stage-color-section-header-bg);
   border: none;
   color: var(--stage-color-text-label);
   cursor: pointer;
@@ -152,45 +152,45 @@
   line-height: var(--stage-control-height);
 }
 
-.stage-pane-strip-button:hover {
+.stage-panel-strip-button:hover {
   color: var(--stage-color-text);
-  background: var(--stage-color-module-header-hover-bg);
+  background: var(--stage-color-section-header-hover-bg);
 }
 
-.stage-pane-strip-edge .stage-pane-strip-button {
+.stage-panel-strip-edge .stage-panel-strip-button {
   align-items: center;
 }
 
-.stage-pane-header {
+.stage-panel-header {
   display: flex;
   align-items: center;
   /* No padding: the toggle button fills the bar edge-to-edge so the whole header
      is the click target (the chevron's inset lives on the button). */
   padding: 0;
-  height: var(--stage-pane-header-height);
+  height: var(--stage-panel-header-height);
   border-bottom: 1px solid var(--stage-color-border);
   flex-shrink: 0;
 }
 
 /* Edge variant expanded: a horizontal row (toggle bar + body) instead of the
    header-over-body column. The body must be allowed to shrink in the row flexbox. */
-.stage-pane-expanded-edge {
+.stage-panel-expanded-edge {
   flex-direction: row;
 }
 
-.stage-pane-expanded-edge .stage-pane-scroll {
+.stage-panel-expanded-edge .stage-panel-scroll {
   min-width: 0;
 }
 
 /* Full-height vertical toggle bar on the pane's inside edge. Strip-width wide,
    transparent (the pane bg shows through), with a divider on the body side. */
-.stage-pane-edge-button {
+.stage-panel-edge-button {
   flex: none;
   width: var(--stage-strip-width);
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--stage-color-module-header-bg);
+  background: var(--stage-color-section-header-bg);
   border: none;
   color: var(--stage-color-text-label);
   padding: 0;
@@ -200,39 +200,39 @@
   font-size: var(--stage-font-size);
 }
 
-.stage-pane-edge-button:hover {
+.stage-panel-edge-button:hover {
   color: var(--stage-color-text);
-  background: var(--stage-color-module-header-hover-bg);
+  background: var(--stage-color-section-header-hover-bg);
 }
 
-.stage-pane-left .stage-pane-edge-button {
+.stage-panel-left .stage-panel-edge-button {
   border-left: 1px solid var(--stage-color-border);
 }
 
-.stage-pane-right .stage-pane-edge-button {
+.stage-panel-right .stage-panel-edge-button {
   border-right: 1px solid var(--stage-color-border);
 }
 
 /* The chevron sits on the pane's inner edge: right for a left pane, left for a
    right pane. The button fills the bar, so the alignment lives on it. */
-.stage-pane-header-left .stage-pane-header-button {
+.stage-panel-header-left .stage-panel-header-button {
   justify-content: flex-end;
 }
 
-.stage-pane-header-right .stage-pane-header-button {
+.stage-panel-header-right .stage-panel-header-button {
   justify-content: flex-start;
 }
 
 /* Fills the whole header strip so the entire bar is the click target (consistent
-   with the edge bar and the module header toggle), not just the chevron glyph.
+   with the edge bar and the section header toggle), not just the chevron glyph.
    The chevron sizes off the font tier so it scales with control size. */
-.stage-pane-header-button {
+.stage-panel-header-button {
   display: flex;
   flex: 1;
   align-self: stretch;
   align-items: center;
   justify-content: center;
-  background: var(--stage-color-module-header-bg);
+  background: var(--stage-color-section-header-bg);
   border: none;
   color: var(--stage-color-text-label);
   padding: 0 6px;
@@ -242,17 +242,17 @@
   font-size: var(--stage-font-size);
 }
 
-.stage-pane-header-button:hover {
+.stage-panel-header-button:hover {
   color: var(--stage-color-text);
-  background: var(--stage-color-module-header-hover-bg);
+  background: var(--stage-color-section-header-hover-bg);
 }
 
 /* Wraps the scroll viewport + the overflow-affordance bars. Relative so the
    bars can pin to its top/bottom edge; min-height:0 lets it (and the body)
    shrink below content height so the band row's cap (minmax(0,1fr) in
-   EditorPanes) takes effect and scrolling engages instead of the content
+   EditorPanels) takes effect and scrolling engages instead of the content
    forcing the pane taller. */
-.stage-pane-scroll {
+.stage-panel-scroll {
   position: relative;
   flex: 1;
   min-height: 0;
@@ -260,7 +260,7 @@
   flex-direction: column;
 }
 
-.stage-pane-body {
+.stage-panel-body {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
@@ -269,15 +269,15 @@
   scrollbar-width: none;
 }
 
-.stage-pane-body::-webkit-scrollbar {
+.stage-panel-body::-webkit-scrollbar {
   display: none;
 }
 
 /* Zero-content markers at the very top/bottom of the scroll area. An
    IntersectionObserver watches whether each is in view to decide if content
-   overflows that direction (see SidePane). 1px (not 0) so intersection is
+   overflows that direction (see Panel). 1px (not 0) so intersection is
    reliable across browsers; inert so they never catch pointer/selection. */
-.stage-pane-scroll-sentinel {
+.stage-panel-scroll-sentinel {
   height: 1px;
   pointer-events: none;
 }
@@ -285,7 +285,7 @@
 /* Thin arrowed bar pinned to the pane's top/bottom edge, shown only when
    content overflows that way. Overlays the body so toggling it never reflows
    content; clicking scrolls fully to that end. */
-.stage-pane-scroll-hint {
+.stage-panel-scroll-hint {
   position: absolute;
   left: 0;
   right: 0;
@@ -303,35 +303,35 @@
   cursor: pointer;
 }
 
-.stage-pane-scroll-hint:hover {
+.stage-panel-scroll-hint:hover {
   color: var(--stage-color-text);
 }
 
-.stage-pane-scroll-hint-top {
+.stage-panel-scroll-hint-top {
   top: 0;
   border-bottom: 1px solid var(--stage-color-border);
 }
 
-.stage-pane-scroll-hint-bottom {
+.stage-panel-scroll-hint-bottom {
   bottom: 0;
   border-top: 1px solid var(--stage-color-border);
 }
 
-/* Module (collapsible container) -------------------------------------- */
-/* Every module closes with a bottom border — including the last in a stack —
-   so a pane's module list reads as closed off. Borders are bottom-only (no
-   module has a top border), so adjacent modules share a single divider; the
+/* Section (collapsible container) -------------------------------------- */
+/* Every section closes with a bottom border — including the last in a stack —
+   so a pane's section list reads as closed off. Borders are bottom-only (no
+   section has a top border), so adjacent sections share a single divider; the
    last one's border just caps the list with nothing to double against. */
-.stage-module {
+.stage-section {
   display: flex;
   flex-direction: column;
   border-bottom: 1px solid var(--stage-color-border);
 }
 
-/* Exception: a module nested as the last child inside another module's body
-   would draw its rule a body-padding gap above the outer module's own bottom
+/* Exception: a section nested as the last child inside another section's body
+   would draw its rule a body-padding gap above the outer section's own bottom
    border — a visual near-double. Drop it; the outer border caps the group. */
-.stage-module-body .stage-module:last-child {
+.stage-section-body .stage-section:last-child {
   border-bottom: none;
 }
 
@@ -341,7 +341,7 @@
    reading the *inherited* control-height so it follows the pane's size. The
    horizontal padding lives on the children (toggle / title / actions), not here,
    so the toggle's hover highlight can reach the header's left edge. */
-.stage-module-header {
+.stage-section-header {
   display: flex;
   align-items: center;
   width: 100%;
@@ -351,18 +351,18 @@
      constant control-height − 1px whether or not the divider is shown. Without
      this the open state's visible bottom-border (added below) eats into the
      border-box height, shrinking the content box by 1px versus the collapsed
-     state (whose divider lives on .stage-module instead) — which nudges the
+     state (whose divider lives on .stage-section instead) — which nudges the
      vertically-centred title. The open rule just recolours this transparent
-     border; collapsed leaves it invisible while .stage-module caps the list. */
+     border; collapsed leaves it invisible while .stage-section caps the list. */
   border-bottom: 1px solid transparent;
-  background: var(--stage-color-module-header-bg);
+  background: var(--stage-color-section-header-bg);
 }
 
 /* Collapsible toggle — chevron + title; clicking it toggles the body. `flex: 1`
    so it fills the width up to the actions, `align-self: stretch` so its hover
    highlight fills the full header height. Styled as the bold field label (muted,
    tier font-size); hover/focus brighten it. */
-.stage-module-header-toggle {
+.stage-section-header-toggle {
   display: flex;
   align-items: center;
   gap: 4px;
@@ -370,7 +370,7 @@
   min-width: 0;
   align-self: stretch;
   box-sizing: border-box;
-  padding: var(--stage-module-header-pad);
+  padding: var(--stage-section-header-pad);
   background: transparent;
   border: none;
   color: var(--stage-color-text-muted);
@@ -388,12 +388,12 @@
    is false while an action icon is hovered: the icons read as a layer above the
    bar and hovering them never lights it. The toggle itself stays transparent and
    only brightens its text. */
-.stage-module-header:has(.stage-module-header-toggle:hover),
-.stage-module-header:has(.stage-module-header-toggle:focus-visible) {
-  background: var(--stage-color-module-header-hover-bg);
+.stage-section-header:has(.stage-section-header-toggle:hover),
+.stage-section-header:has(.stage-section-header-toggle:focus-visible) {
+  background: var(--stage-color-section-header-hover-bg);
 }
 
-.stage-module-header-toggle:hover {
+.stage-section-header-toggle:hover {
   color: var(--stage-color-text);
 }
 
@@ -402,7 +402,7 @@
    clearly selected without shifting layout or fighting the open/closed
    bottom-border divider. Tab only (`:focus-visible`) — a mouse click leaves no
    border. */
-.stage-module-header-toggle:focus-visible {
+.stage-section-header-toggle:focus-visible {
   color: var(--stage-color-text);
   outline: 1px solid var(--stage-color-focus);
   outline-offset: -1px;
@@ -411,7 +411,7 @@
 /* The title text — bold label that truncates with an ellipsis when squeezed (by
    header actions, or a long title). It has no own colour, so it inherits from the
    toggle (hover brightens it too) or, when dismissable, from the static header. */
-.stage-module-title {
+.stage-section-title {
   flex: 1;
   min-width: 0;
   overflow: hidden;
@@ -421,28 +421,28 @@
   font-size: var(--stage-font-size);
 }
 
-/* Divider between header and body only when the module is open; a closed
-   module leans on .stage-module's own bottom border, so this avoids a double
+/* Divider between header and body only when the section is open; a closed
+   section leans on .stage-section's own bottom border, so this avoids a double
    rule. */
-.stage-module-open > .stage-module-header {
+.stage-section-open > .stage-section-header {
   border-bottom: 1px solid var(--stage-color-border);
 }
 
 /* Dismissable (modal) header — static, no toggle. The title sits left as the bold
    label (its own padding, since there's no toggle to inherit it from); actions
    (incl. the × close) anchor right. */
-.stage-module-header-static {
+.stage-section-header-static {
   color: var(--stage-color-text-muted);
 }
 
-.stage-module-header-static > .stage-module-title {
-  padding: var(--stage-module-header-pad);
+.stage-section-header-static > .stage-section-title {
+  padding: var(--stage-section-header-pad);
 }
 
 /* Right-side actions cluster — borderless icon buttons (and the × close in a
-   dismissable module), square at control-height so they line up with the header.
+   dismissable section), square at control-height so they line up with the header.
    The gap from the title is supplied by the toggle's / title's right padding. */
-.stage-module-header-actions {
+.stage-section-header-actions {
   display: flex;
   align-items: center;
   gap: 2px;
@@ -455,7 +455,7 @@
    mouse-only (tabindex=-1; Escape closes a modal), so it shows no focus ring; the
    glyph brightens on hover and a press flashes a faint background, matching the
    subtle header-action icons. */
-.stage-module-close {
+.stage-section-close {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -472,15 +472,15 @@
   cursor: pointer;
 }
 
-.stage-module-close:hover {
+.stage-section-close:hover {
   color: var(--stage-color-text);
 }
 
-.stage-module-close:active {
-  background: var(--stage-color-module-header-hover-bg);
+.stage-section-close:active {
+  background: var(--stage-color-section-header-hover-bg);
 }
 
-.stage-module-chevron {
+.stage-section-chevron {
   display: inline-block;
   width: 0.8rem;
   font-size: 0.7em;
@@ -488,10 +488,10 @@
   color: var(--stage-color-text-muted);
 }
 
-/* Custom icon replacing the chevron (Module `icon` prop). Centred, muted to
+/* Custom icon replacing the chevron (Section `icon` prop). Centred, muted to
    match the chevron, and the glyph tracks the size tier exactly like an icon
    button (`--stage-icon-size` applied to the rendered <svg>). */
-.stage-module-icon {
+.stage-section-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -499,22 +499,22 @@
   color: var(--stage-color-text-muted);
 }
 
-.stage-module-icon svg {
+.stage-section-icon svg {
   width: var(--stage-icon-size);
   height: var(--stage-icon-size);
 }
 
 /* In a static (dismissable) header there's no toggle padding to inherit, so the
    leading icon supplies the left pad matching the header. */
-.stage-module-header-static > .stage-module-icon {
-  padding: var(--stage-module-header-pad);
+.stage-section-header-static > .stage-section-icon {
+  padding: var(--stage-section-header-pad);
   padding-right: 0;
 }
 
-.stage-module-body {
+.stage-section-body {
   /* Consumer composes the body (a FieldGroup, text, ...); we provide a
      dense default frame. */
-  padding: var(--stage-module-body-pad);
+  padding: var(--stage-section-body-pad);
 }
 
 /* TabMenu (bar control) ----------------------------------------------- */
@@ -565,14 +565,14 @@
 
 /* Hover brightens a tab like a button — but not the active tab (already lifted). */
 .stage-tab:not(.stage-tab-active):hover {
-  background: var(--stage-color-module-header-hover-bg);
+  background: var(--stage-color-section-header-hover-bg);
 }
 
 /* Active tab: a 1px top accent line + a lifted surface + brighter label, rather
    than a full-border highlight. */
 .stage-tab-active {
   border-top-color: var(--stage-color-accent);
-  background: var(--stage-color-module-header-hover-bg);
+  background: var(--stage-color-section-header-hover-bg);
 }
 
 /* The tab's label/select target — fills the tab, label ellipsises when squeezed. */
@@ -638,7 +638,7 @@
 .stage-tabmenu-add:hover,
 .stage-tabmenu-scroll:hover {
   color: var(--stage-color-text);
-  background: var(--stage-color-module-header-hover-bg);
+  background: var(--stage-color-section-header-hover-bg);
 }
 
 /* Close glyphs (VSCode-style reveal). The close button keeps its width always so
diff --git a/packages/solid-stage/src/theme/fields.css b/packages/solid-stage/src/theme/fields.css
index 7b207f1..a8366bf 100644
--- a/packages/solid-stage/src/theme/fields.css
+++ b/packages/solid-stage/src/theme/fields.css
@@ -50,7 +50,7 @@
   align-items: center;
   /* The row snaps to one control-height; a short control (boolean / checkbox /
      slider / icon-button) centres in it instead of collapsing the row below the
-     tall-control rows, so a module's rows line up. Tall controls pin their own
+     tall-control rows, so a section's rows line up. Tall controls pin their own
      height (see .stage-input / .stage-select-trigger). */
   min-height: var(--stage-control-height);
 }
@@ -155,7 +155,7 @@
   width: 100%;
 }
 
-/* LabelField: static descriptive text -------------------------------------
+/* Label: static descriptive text -------------------------------------
  *
  * Display-only text with no caption/value split — a single full-width text
  * element filling the row, not the label|value grid the other fields use. The
@@ -430,7 +430,7 @@
 
 .stage-number-step:hover {
   color: var(--stage-color-text-label);
-  background: var(--stage-color-module-header-hover-bg);
+  background: var(--stage-color-section-header-hover-bg);
 }
 
 .stage-number-step:active {
@@ -543,7 +543,7 @@
 
 .stage-select-item[data-highlighted] {
   outline: none;
-  background: var(--stage-color-module-header-hover-bg);
+  background: var(--stage-color-section-header-hover-bg);
   color: var(--stage-color-text);
 }
 
@@ -847,6 +847,12 @@
 
 /* Boolean — toggle switch (variant="toggle"); the checkbox variant uses
    the native box. ------------------------------------------------------ */
+/* Bare BooleanControl root (no caption): shrink-wrap so the switch/checkbox sits
+   inline when used directly. A BooleanField supplies its own field row instead. */
+.stage-boolean-control {
+  display: inline-flex;
+  align-items: center;
+}
 /* Toggle variant: Kobalte's Switch.Control is the track, .Thumb the knob; state
    comes from data-checked / data-disabled rather than :checked / :disabled. */
 .stage-switch {
@@ -1037,7 +1043,7 @@
   cursor: default;
 }
 
-/* A non-tabbable button (`tabbable={false}` — e.g. a module's mouse-only header
+/* A non-tabbable button (`tabbable={false}` — e.g. a section's mouse-only header
    actions) is outside focus navigation, so it shows no focus ring even on the
    click-focus other buttons use to mark themselves. Two classes + `:focus`
    out-specifies `.stage-button:focus`. */
@@ -1060,7 +1066,7 @@
 }
 
 .stage-icon-button:hover:not(:disabled) {
-  background: var(--stage-color-module-header-hover-bg);
+  background: var(--stage-color-section-header-hover-bg);
   color: var(--stage-color-text);
 }
 
@@ -1109,7 +1115,7 @@
   opacity: 0.4;
 }
 
-/* Subtle variant — secondary / meta actions (e.g. a module's header actions).
+/* Subtle variant — secondary / meta actions (e.g. a section's header actions).
    Dimmer than the default icon button: the glyph sits MUTED, and only the *shape*
    brightens on hover — no background fill (the default lights its background).
    These rules come AFTER the default `.stage-icon-button*` rules so they win on
@@ -1139,7 +1145,7 @@
    over the hover rule (equal specificity) whenever the button is pressed,
    including a press on an already-active toggle. */
 .stage-icon-button-subtle:active:not(:disabled) {
-  background: var(--stage-color-module-header-hover-bg);
+  background: var(--stage-color-section-header-hover-bg);
 }
 
 .stage-action-button {
@@ -1206,7 +1212,7 @@
 }
 
 .stage-toggle-button:hover {
-  background: var(--stage-color-module-header-hover-bg);
+  background: var(--stage-color-section-header-hover-bg);
   color: var(--stage-color-text);
 }
 
diff --git a/packages/solid-stage/src/theme/modal.css b/packages/solid-stage/src/theme/modal.css
index 30f26a0..9dec49a 100644
--- a/packages/solid-stage/src/theme/modal.css
+++ b/packages/solid-stage/src/theme/modal.css
@@ -2,10 +2,10 @@
  *
  * One app-level modal, rendered by `StageModalHost` whenever `stageModal.open`
  * is called. The backdrop dims the page and centres a single rounded container
- * that hosts one `Module`. It sits above all chrome + page-level popovers (its
+ * that hosts one `Section`. It sits above all chrome + page-level popovers (its
  * backdrop opens a stacking context, so the modal's own field popovers — which
  * portal into the container — layer correctly inside it). The backdrop captures
- * clicks (they neither pass through nor close); closing is the module's `×`,
+ * clicks (they neither pass through nor close); closing is the section's `×`,
  * Escape, or `stageModal.close()`. */
 .stage-modal-backdrop {
   position: fixed;
@@ -24,18 +24,18 @@
   flex-direction: column;
   width: 100%;
   max-width: var(--stage-modal-max-width);
-  /* Stay inside the padded viewport; the module scrolls if it overflows. */
+  /* Stay inside the padded viewport; the section scrolls if it overflows. */
   max-height: 100%;
   overflow: auto;
   background: var(--stage-color-panel-bg);
   border: 1px solid var(--stage-color-border);
-  /* Rounded edges; `overflow` clips the square-cornered module to match. */
+  /* Rounded edges; `overflow` clips the square-cornered section to match. */
   border-radius: var(--stage-modal-radius);
   box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
 }
 
-/* The container supplies the frame, so the hosted module drops its own bottom
+/* The container supplies the frame, so the hosted section drops its own bottom
    rule (it would draw just inside the rounded border otherwise). */
-.stage-modal-container > .stage-module {
+.stage-modal-container > .stage-section {
   border-bottom: none;
 }
diff --git a/packages/solid-stage/src/theme/tokens.css b/packages/solid-stage/src/theme/tokens.css
index c73e520..af42135 100644
--- a/packages/solid-stage/src/theme/tokens.css
+++ b/packages/solid-stage/src/theme/tokens.css
@@ -13,9 +13,9 @@
   /* Floating popovers read as panels — and must stay opaque so content behind a
      select listbox can't bleed through and hurt readability. */
   --stage-color-popover-bg: var(--stage-color-panel-bg);
-  /* Module header sits a step darker than the panel body; hover lifts back up. */
-  --stage-color-module-header-bg: color-mix(in srgb, var(--stage-color-panel-bg) 85%, #000);
-  --stage-color-module-header-hover-bg: color-mix(in srgb, var(--stage-color-module-header-bg) 95%, #fff);
+  /* Section header sits a step darker than the panel body; hover lifts back up. */
+  --stage-color-section-header-bg: color-mix(in srgb, var(--stage-color-panel-bg) 85%, #000);
+  --stage-color-section-header-hover-bg: color-mix(in srgb, var(--stage-color-section-header-bg) 95%, #fff);
   /* Border lifts off the panel; strong lifts further off the base border. */
   --stage-color-border: color-mix(in srgb, var(--stage-color-panel-bg) 90%, #fff);
   --stage-color-border-strong: color-mix(in srgb, var(--stage-color-border) 90%, #fff);
@@ -31,7 +31,7 @@
      accent fill and must stay legible against it (dark glyph on a light accent). */
   --stage-color-accent: #2196f3;
   /* Focus indicator colour — the border on focused text-likes and the 1px ring
-     on slider / switch / checkbox / buttons / module headers. Deliberately
+     on slider / switch / checkbox / buttons / section headers. Deliberately
      white (not the accent): a pink ring blends into accent-filled controls, so
      focus stays legible by being independent of the accent. Consumer-overridable. */
   --stage-color-focus: #ffffff;
@@ -108,8 +108,8 @@
   /* Spacing — tuned for information density over padding. */
   /* Horizontal only: the header's height is one control-height (set via
      min-height in base.css), so it lines up with the field rows below it. */
-  --stage-module-header-pad: 0 8px;
-  --stage-module-body-pad: 4px 8px 6px;
+  --stage-section-header-pad: 0 8px;
+  --stage-section-body-pad: 4px 8px 6px;
 
   /* Modal overlay — the dim behind it, the rounded container, and its sizing.
      The container caps at `max-width` and shrinks on narrow viewports, never
@@ -188,7 +188,7 @@
    size) at once. Plain-specificity classes (specificity 1) so they beat the
    `:where(.stage-root)` 0-specificity defaults without `!important`; a consumer
    token override still wins (raw tokens stay overridable). The tokens cascade,
-   so applying a tier to any subtree (a pane, a module, a bar) resizes everything
+   so applying a tier to any subtree (a pane, a section, a bar) resizes everything
    inside it; a nested element can re-tier to override its ancestor. Provisional
    sizes — tune live in the playground. */
 
@@ -220,7 +220,7 @@
    fields.css mirrors this). A custom property's `var()` is substituted at the
    element where the property is *declared*, then the resolved value inherits — so
    declaring these only on the root would freeze the inner `--stage-control-height`
-   at the root's value, and a subtree size override (Module / SidePane / EditorPanes
+   at the root's value, and a subtree size override (Section / Panel / EditorPanels
    `size`, all via a `.stage-size-*` class) would resize the row + base-token
    controls but NOT these derived ones (the field label, using the base token
    directly, would shrink while the switch/checkbox/slider/icon stayed put). Listing
@@ -232,14 +232,14 @@
 .stage-size-large {
   /* Bar row: one control-height + 8px breathing room. */
   --stage-toolbar-height: calc(var(--stage-control-height) + 8px);
-  /* Expanded-pane top header strip: one control-height, so it matches the module
+  /* Expanded-pane top header strip: one control-height, so it matches the section
      headers stacked below it (which also key off control-height). In the per-tier
      block so it re-resolves at the pane's own size class. */
-  --stage-pane-header-height: var(--stage-control-height);
+  --stage-panel-header-height: var(--stage-control-height);
   /* Collapsed strip + edge-toggle width = one control-height, so the strip reads
-     "as wide as a module header is tall" and scales with the tier. Here (not the
+     "as wide as a section header is tall" and scales with the tier. Here (not the
      root block) so it re-resolves per size class. The collapsed grid-column track
-     in EditorPanes reads this token at the panes-grid level: with no per-pane size
+     in EditorPanels reads this token at the panes-grid level: with no per-pane size
      override it resolves to the same control-height the strip inherits, so track
      and strip stay matched. */
   --stage-strip-width: var(--stage-control-height);
diff --git a/playground/src/App.tsx b/playground/src/App.tsx
index c9fcd46..037a565 100644
--- a/playground/src/App.tsx
+++ b/playground/src/App.tsx
@@ -1,18 +1,20 @@
 import { Show, createSignal, type JSX } from 'solid-js';
 import {
-  EditorPanes,
-  Module,
+  EditorPanels,
+  Section,
   CanvasStage,
   FieldGroup,
   FieldBar,
   TextField,
-  LabelField,
+  Label,
   NumberField,
   SelectField,
   BooleanField,
   SliderField,
   ColorField,
   TextareaField,
+  SliderControl,
+  SelectControl,
   ButtonGroup,
   ActionButton,
   ToggleButton,
@@ -100,7 +102,7 @@ export function App(): JSX.Element {
 
   // One reactive source of truth, persisted to localStorage. Both nested
   // stages bind into THIS store — editing a field in the primary stage's left
-  // pane live-updates anything reading the same slot in the secondary stage.
+  // panel live-updates anything reading the same slot in the secondary stage.
   // Stages are a structural division, not a state boundary.
   const [state, setState, bind] = createEditorStore<ShowcaseSettings>({
     defaults,
@@ -130,9 +132,9 @@ export function App(): JSX.Element {
   // visibly doing something (mirrored into the primary stage's topSub bar).
   const [activeModel, setActiveModel] = createSignal('Goblin');
 
-  // Global modal demo — app-level settings hosted in a single Module with an X.
-  // Its state lives in plain signals; opening it loads the module thunk into the
-  // shared `stageModal`, and the Module's onClose / a Done button close it.
+  // Global modal demo — app-level settings hosted in a single Section with an X.
+  // Its state lives in plain signals; opening it loads the section thunk into the
+  // shared `stageModal`, and the Section's onClose / a Done button close it.
   const [appName, setAppName] = createSignal('Untitled Project');
   const [appTheme, setAppTheme] = createSignal('dark');
   const [appAutosave, setAppAutosave] = createSignal(true);
@@ -140,7 +142,7 @@ export function App(): JSX.Element {
   const openSettings = (): void => {
     stageModal.open(
       () => (
-        <Module
+        <Section
           title="Application Settings"
           onClose={() => stageModal.close()}
           headerActions={[
@@ -166,7 +168,7 @@ export function App(): JSX.Element {
           <div class="playground-modal-actions">
             <ActionButton label="Done" onClick={() => stageModal.close()} />
           </div>
-        </Module>
+        </Section>
       ),
       { label: 'Application Settings' },
     );
@@ -205,11 +207,11 @@ export function App(): JSX.Element {
   }
 
   // OUTER stage chrome — full-width bars that frame the whole split. The split
-  // itself lives in the outer stage's centre; the outer stage has no panes.
+  // itself lives in the outer stage's centre; the outer stage has no panels.
   const top = (
     <Toolbar
       left={
-        <LabelField
+        <Label
           layout="bar"
           size="large"
           class="playground-title"
@@ -243,7 +245,7 @@ export function App(): JSX.Element {
 
   const bottom = (
     <div class="playground-bottom">
-      <LabelField
+      <Label
         layout="bar"
         class="playground-footer-text"
         text={splitEnabled() ? 'two stages — shared state + cache' : 'one stage'}
@@ -252,18 +254,43 @@ export function App(): JSX.Element {
   );
 
   // Full-width footer toolbar on the outer stage (below the split, above
-  // `bottom`). `shown` is bound here AND in the secondary stage's right pane —
+  // `bottom`). `shown` is bound here AND in the secondary stage's right panel —
   // toggling either moves both, proving the shared store.
+  // Bare *Control demo — the value-input widgets without a field row, dropped
+  // straight into the bar. They bind the SAME store slots as the panel fields, so
+  // moving these moves the captioned fields too (and vice-versa) — proving the
+  // bare control is the single source of truth a *Field composes. The slider is
+  // boxed to a fixed width since, without a field row, nothing else sizes it.
   const bottomToolbars = (
     <Toolbar
-      left={<LabelField layout="bar" class="playground-footer-text" text="outer stage footer" />}
+      left={<Label layout="bar" class="playground-footer-text" text="outer stage footer" />}
+      center={
+        <FieldBar>
+          <Label layout="bar" text="bare:" />
+          <span style={{ width: '130px', display: 'inline-flex' }}>
+            <SliderControl
+              {...bind('slider', 'compact')}
+              min={1}
+              max={5}
+              step={0.5}
+              format={(v) => `${v.toFixed(1)}×`}
+              aria-label="Zoom (bare control)"
+            />
+          </span>
+          <SelectControl
+            options={['walk', 'run', 'idle']}
+            {...bind('select', 'compact')}
+            aria-label="Mode (bare control)"
+          />
+        </FieldBar>
+      }
       right={<ToggleButton {...bind('shown')} labelOn="Shown" labelOff="Hidden" />}
     />
   );
 
   // FieldBar sketch — value fields dropped into the three Toolbar anchors, each
   // rendering its inline `'bar'` form. They bind the SAME store slots as the
-  // pane modules, so editing here moves the pane fields (and vice-versa). The
+  // panel sections, so editing here moves the panel fields (and vice-versa). The
   // anchor clusters separate their children with a middle-dot by default; the
   // centre cluster overrides it to a blank separator, and the colour field
   // omits its label (empty `name`) to show the label is optional in a bar.
@@ -306,10 +333,10 @@ export function App(): JSX.Element {
     />
   );
 
-  const leftSide = (
+  const leftPanel = (
     <div>
       {/* `icon` replaces the ▾/▸ chevron with a custom glyph; collapse still works. */}
-      <Module title="TextField" icon={Type} defaultOpen={true}>
+      <Section title="TextField" icon={Type} defaultOpen={true}>
         <FieldGroup>
           <TextField name="Text" {...bind('text', 'compact')} />
           <TextField name="Text (readonly)" {...bind('text', 'compact')} readonly={() => true} />
@@ -321,9 +348,9 @@ export function App(): JSX.Element {
             layout="expanded"
           />
         </FieldGroup>
-      </Module>
+      </Section>
 
-      <Module title="NumberField" icon={Hash} defaultOpen={true}>
+      <Section title="NumberField" icon={Hash} defaultOpen={true}>
         <FieldGroup>
           <NumberField name="Number" {...bind('number', 'compact')} min={0} validate={numberValidate} />
           <NumberField
@@ -346,16 +373,16 @@ export function App(): JSX.Element {
             layout="expanded"
           />
         </FieldGroup>
-      </Module>
+      </Section>
 
-      <Module title="TextareaField" defaultOpen={true}>
+      <Section title="TextareaField" defaultOpen={true}>
         <FieldGroup>
           <TextareaField name="Textarea" {...bind('textarea')} />
           <TextareaField name="Textarea (readonly)" {...bind('textarea')} readonly={() => true} />
         </FieldGroup>
-      </Module>
+      </Section>
 
-      <Module title="ColorField" defaultOpen={true}>
+      <Section title="ColorField" defaultOpen={true}>
         <FieldGroup>
           <ColorField name="Color" {...bind('color')} />
           <ColorField name="Color (readonly)" {...bind('color')} readonly={() => true} />
@@ -367,9 +394,9 @@ export function App(): JSX.Element {
             readonly={() => true}
           />
         </FieldGroup>
-      </Module>
+      </Section>
 
-      <Module title="SelectField" defaultOpen={true}>
+      <Section title="SelectField" defaultOpen={true}>
         <FieldGroup>
           <SelectField name="Select" options={['walk', 'run', 'idle']} {...bind('select', 'compact')} />
           <SelectField
@@ -392,13 +419,13 @@ export function App(): JSX.Element {
             layout="expanded"
           />
         </FieldGroup>
-      </Module>
+      </Section>
 
-      {/* Module-level size override: this module pins its FIELDS to `small`
+      {/* Section-level size override: this section pins its FIELDS to `small`
           regardless of the stage tier switcher, while its HEADER still follows
           the stage (body-scoped override). Flip the tier to `large` and watch
-          this module's header grow with the rest while its rows stay dense. */}
-      <Module title="BooleanField (size=small)" size="small" defaultOpen={true}>
+          this section's header grow with the rest while its rows stay dense. */}
+      <Section title="BooleanField (size=small)" size="small" defaultOpen={true}>
         <FieldGroup>
           <BooleanField name="Boolean (toggle)" {...bind('boolean', 'toggle')} />
           <BooleanField
@@ -414,9 +441,9 @@ export function App(): JSX.Element {
             variant="checkbox"
           />
         </FieldGroup>
-      </Module>
+      </Section>
 
-      <Module title="SliderField" defaultOpen={true}>
+      <Section title="SliderField" defaultOpen={true}>
         <FieldGroup>
           {/* Compact: 1.0–5.0× in 0.5 steps. Fixed-width readout (toFixed(1) +
               tabular-nums) so it never jiggles. */}
@@ -458,13 +485,13 @@ export function App(): JSX.Element {
             layout="expanded"
           />
         </FieldGroup>
-      </Module>
+      </Section>
     </div>
   );
 
-  const rightSide = (
+  const rightPanel = (
     <div>
-      <Module title="Buttons" defaultOpen={true}>
+      <Section title="Buttons" defaultOpen={true}>
         <ButtonGroup
           fill
           value={() => state.tool}
@@ -479,9 +506,9 @@ export function App(): JSX.Element {
           <ActionButton label="Reset" variant="ghost" onClick={() => {}} />
           <ToggleButton {...bind('shown')} labelOn="Shown" labelOff="Hidden" />
         </div>
-      </Module>
+      </Section>
 
-      <Module title="Validation & Tooltips" defaultOpen={true}>
+      <Section title="Validation & Tooltips" defaultOpen={true}>
         <FieldGroup>
           {/* Four levels by input prefix (! ? + #). error/warn recolour the
               border; all four show the matching tooltip skin on focus/hover. */}
@@ -558,9 +585,9 @@ export function App(): JSX.Element {
             hide()
           </button>
         </div>
-      </Module>
+      </Section>
 
-      <Module title="IconButtonField" defaultOpen={true}>
+      <Section title="IconButtonField" defaultOpen={true}>
         <FieldGroup>
           <IconButtonField
             name="Actions"
@@ -574,9 +601,9 @@ export function App(): JSX.Element {
             ]}
           />
         </FieldGroup>
-      </Module>
+      </Section>
 
-      <Module title="IconToggleField" defaultOpen={true}>
+      <Section title="IconToggleField" defaultOpen={true}>
         <FieldGroup>
           <IconToggleField
             name="View (single)"
@@ -603,16 +630,16 @@ export function App(): JSX.Element {
             description={`value: "${state.overlays}"`}
           />
         </FieldGroup>
-      </Module>
+      </Section>
 
-      {/* LabelField — static descriptive text, no value. The last entry binds no
+      {/* Label — static descriptive text, no value. The last entry binds no
           slot but reads `state.text.compact`, so it updates live as you type in
-          the TextField module in the left pane: dynamic labels need no setter,
+          the TextField section in the left panel: dynamic labels need no setter,
           just a reactive `text`. Compact truncates (incl. explicit newlines);
           expanded wraps and keeps newlines; italic comes from the class
           style-hook. */}
-      <Module
-        title="LabelField"
+      <Section
+        title="Label"
         defaultOpen={true}
         headerActions={[
           { icon: Copy, title: 'Copy', onClick: () => {} },
@@ -625,34 +652,34 @@ export function App(): JSX.Element {
         ]}
       >
         <FieldGroup>
-          <LabelField text="Plain compact label — a long line that runs past the column and truncates with an ellipsis." />
-          <LabelField text="Centered" align="center" />
-          <LabelField text="Right-aligned" align="right" />
-          <LabelField text="Italic via the class style-hook" class="playground-label-italic" />
-          <LabelField text={'Explicit newline\nin compact still truncates'} />
-          <LabelField
+          <Label text="Plain compact label — a long line that runs past the column and truncates with an ellipsis." />
+          <Label text="Centered" align="center" />
+          <Label text="Right-aligned" align="right" />
+          <Label text="Italic via the class style-hook" class="playground-label-italic" />
+          <Label text={'Explicit newline\nin compact still truncates'} />
+          <Label
             layout="expanded"
             text="Expanded labels wrap to as many lines as the text needs, and each visual line is exactly one control-height so the block tiles cleanly against the rows around it."
           />
-          <LabelField
+          <Label
             layout="expanded"
             text={'Explicit newlines\nare preserved\nin expanded form'}
           />
-          <LabelField text={`live: name = "${state.text.compact}"`} />
+          <Label text={`live: name = "${state.text.compact}"`} />
         </FieldGroup>
-      </Module>
+      </Section>
     </div>
   );
 
-  // PRIMARY nested stage: left pane only, no bars, viewport = world A. The pane
+  // PRIMARY nested stage: left panel only, no bars, viewport = world A. The panel
   // is uncontrolled — collapse it via its own chevron; the library persists
-  // that under `stage-pane:playground-a:left` (persistKey = the per-stage
-  // namespace, so the two stages' panes never collide).
+  // that under `stage-panel:playground-a:left` (persistKey = the per-stage
+  // namespace, so the two stages' panels never collide).
   const primaryStage = (
-    <EditorPanes
+    <EditorPanels
       embedded
       persistKey="playground-a"
-      leftSide={leftSide}
+      leftPanel={leftPanel}
       // TabMenu lives in a canvas-aligned sub-bar above Stage A. A full-height
       // .playground-tabbar (not a Toolbar) lets the blocky folder tabs flow into
       // its bottom border. Uncontrolled: it owns the list, `onNewTab` returns the
@@ -671,7 +698,7 @@ export function App(): JSX.Element {
             onClose={() => true}
             newTabTitle="New model"
           />
-          <LabelField layout="bar" class="playground-footer-text" text={`active: ${activeModel()}`} />
+          <Label layout="bar" class="playground-footer-text" text={`active: ${activeModel()}`} />
         </div>
       }
       center={
@@ -682,14 +709,14 @@ export function App(): JSX.Element {
     />
   );
 
-  // SECONDARY nested stage: right pane only, no bars, viewport = world B.
+  // SECONDARY nested stage: right panel only, no bars, viewport = world B.
   // Uncontrolled + persisted under its own namespace.
   const secondaryStage = (
-    <EditorPanes
+    <EditorPanels
       embedded
       persistKey="playground-b"
-      rightSide={rightSide}
-      // Edge collapse variant: the toggle is a full-height bar on the pane's
+      rightPanel={rightPanel}
+      // Edge collapse variant: the toggle is a full-height bar on the panel's
       // inside (left) edge — no top header strip. Visible when Split is on.
       rightToggleVariant="edge"
       center={
@@ -700,7 +727,7 @@ export function App(): JSX.Element {
     />
   );
 
-  // OUTER stage: chrome bars, no panes. Its centre is the split band holding
+  // OUTER stage: chrome bars, no panels. Its centre is the split band holding
   // the two nested stages. This is the recursion: a stage's viewport IS a
   // stage (here, two of them).
   return (
@@ -711,7 +738,7 @@ export function App(): JSX.Element {
         'stage-size-large': tier() === 'large',
       }}
     >
-      <EditorPanes
+      <EditorPanels
         top={top}
         topToolbars={topToolbars}
         bottom={bottom}
diff --git a/playground/src/styles.css b/playground/src/styles.css
index 7a889a9..86566bb 100644
--- a/playground/src/styles.css
+++ b/playground/src/styles.css
@@ -22,7 +22,7 @@ body,
   --stage-color-accent: #ff4488;
 }
 
-/* App title — a LabelField (bar, large). The library owns size/weight scaling;
+/* App title — a Label (bar, large). The library owns size/weight scaling;
    the consumer only pins the bold weight via the class style-hook. */
 .playground-title {
   font-weight: 700;
@@ -36,7 +36,7 @@ body,
   padding: 0 8px;
 }
 
-/* Muted footer text — LabelField defaults to the primary label colour, so the
+/* Muted footer text — Label defaults to the primary label colour, so the
    muted tone is opted in via the class style-hook. */
 .playground-footer-text {
   color: var(--stage-color-text-muted);
@@ -63,7 +63,7 @@ body,
   white-space: nowrap;
 }
 
-/* LabelField demo — italic via the class style-hook (Option A: no inline-style
+/* Label demo — italic via the class style-hook (Option A: no inline-style
    escape hatch in the library; consumers style through their own classes). */
 .playground-label-italic {
   font-style: italic;
-- 
knotmirror 0.0.1