efficient-easel 0.106.0 → 1.0.0

package/dist/shell/index.d.ts

@@ -1,136 +1,139 @@
 /**
- * Editor SHELL design tokens — the ONE source both editors' chrome converge on.
+ * Editor SHELL design tokens — the chrome's names for efficient-shell's tokens.
  *
  * Where `rail/tokens.ts` owns the slim icon-rail, this owns the rest of the
  * editor chrome theme: accent, surfaces, fields, text, lines, chips, named
- * chrome literals, danger/warning/success, radii, gap, shadows and font. Every
- * value bar one is taken verbatim from the storefront editor's `--sf-*` block
- * (`efficient-storefront/components/storefront-editor.css`), the visual reference the
- * campaign designer (`--cd-*`) and the storefront's own TS mirror (`tk`) had
- * each re-copied. After card 66024 they all resolve to these values instead.
- * The one exception is `success`, which that block has no counterpart for; see
- * its own note below.
+ * chrome literals, danger/warning/success, radii, gap, shadows and font.
+ *
+ * NOTHING HERE IS A VALUE OF OUR OWN (harness UI-24, efficient-harness#117):
+ * every colour, radius and the typeface is a `var()` of an efficient-shell
+ * token (`efficient-shell/ui.css`), or — where the shell has no token for the
+ * role yet, marked SHELL GAP below — a `color-mix()` of shell tokens. Up to
+ * 0.106.0 these were hex values mirrored from the storefront editor's `--sf-*`
+ * block, light only; now the editor follows the shell's theme, dark included,
+ * and its accent themes. The one literal colour is `frameBg`, which is canvas
+ * (the page's paper), not chrome.
  *
  * Exposed BOTH ways, per the same value (mirrors the rail):
- *   - `shellTokens` — this JS object, for code that needs the numbers/colours
- *     (e.g. the storefront's `floating-editor/tokens.ts` inline-style mirror);
+ *   - `shellTokens` — this JS object, for code that needs the values in an
+ *     inline style (they are CSS expressions, so they resolve only where the
+ *     host has loaded the shell's CSS — which it must, see README);
  *   - `shell.css` — the stylesheet, which declares the identical values as CSS
  *     custom properties on `.es-editor` (names listed in `shellCssVars`).
  *
  * Numeric fields are pixel magnitudes (unitless) so they compose in code; the
- * CSS applies the `px`. Both editing surfaces are LIGHT only (no dark mode), so
- * there is a single palette here — no dark counterpart.
+ * CSS applies the `px`. Only spacing is numeric now.
  */
 declare const shellTokens: {
-    /** `--es-accent` — blue-600. */
-    readonly accent: "#2563eb";
-    /** `--es-accent-tint` — blue-50. */
-    readonly accentTint: "#eff6ff";
-    /** `--es-accent-tint-strong` — blue-100. */
-    readonly accentTintStrong: "#dbeafe";
-    /** `--es-accent-line` — blue-200: a quiet accent hairline (an empty slot's outline). */
-    readonly accentLine: "#bfdbfe";
-    /** `--es-accent-text` — blue-700. */
-    readonly accentText: "#1d4ed8";
-    /** `--es-accent-ring` — focus ring wash. */
-    readonly accentRing: "rgba(37, 99, 235, 0.25)";
-    /** `--es-accent-shadow` — accent button shadow. */
-    readonly accentShadow: "rgba(37, 99, 235, 0.35)";
-    /** `--es-on-accent` — text/icon over the solid accent. */
-    readonly onAccent: "#ffffff";
-    /** `--es-app-bg` — gray-50, sunken canvas. */
-    readonly appBg: "#f9fafb";
-    /** `--es-preview-bg` — gray-100, preview well. */
-    readonly previewBg: "#f3f4f6";
-    /** `--es-panel` — raised cards / panels. */
-    readonly panel: "#ffffff";
+    /** `--es-accent` — the custom accent (`--accent-600`, stamped by the shell's
+     *  `useTheme()`), else the shell's themed primary fill (`--submit-bg`, which
+     *  the pink / green / grey themes remap). */
+    readonly accent: "var(--accent-600, var(--submit-bg))";
+    /** `--es-accent-tint` — a wash of the accent on the surface. SHELL GAP: the
+     *  shell has no accent-soft token; mixed from shell tokens until it does. */
+    readonly accentTint: "color-mix(in srgb, var(--es-accent) 10%, var(--surface))";
+    /** `--es-accent-tint-strong` — a stronger wash. SHELL GAP, as above. */
+    readonly accentTintStrong: "color-mix(in srgb, var(--es-accent) 18%, var(--surface))";
+    /** `--es-accent-line` — a quiet accent hairline (an empty slot's outline). SHELL GAP. */
+    readonly accentLine: "color-mix(in srgb, var(--es-accent) 32%, var(--surface))";
+    /** `--es-accent-text` — accent as words: darker than the fill on light,
+     *  lighter on dark, because it leans on the ramp's strongest ink. SHELL GAP. */
+    readonly accentText: "color-mix(in srgb, var(--es-accent) 65%, var(--ink-strongest))";
+    /** `--es-accent-ring` — the shell's focus ring wash. */
+    readonly accentRing: "var(--rosh-focus-ring)";
+    /** `--es-accent-shadow` — accent button shadow. SHELL GAP. */
+    readonly accentShadow: "color-mix(in srgb, var(--es-accent) 35%, transparent)";
+    /** `--es-on-accent` — ink on a solid fill. SHELL GAP: the shell's nearest is
+     *  the status tier's `--status-on-solid` (white in both themes). */
+    readonly onAccent: "var(--status-on-solid)";
+    /** `--es-app-bg` — the sunken ground behind the panels. */
+    readonly appBg: "var(--surface-sunken)";
+    /** `--es-preview-bg` — the well round the canvas. */
+    readonly previewBg: "var(--surface-raised)";
+    /** `--es-panel` — panels. */
+    readonly panel: "var(--surface)";
     /** `--es-raised` — a lifted surface. NOT the active chip since card 66302. */
-    readonly raised: "#ffffff";
+    readonly raised: "var(--surface)";
     /** `--es-topbar-bg`. */
-    readonly topbarBg: "#ffffff";
-    /** `--es-frame-bg` — device "paper" behind the preview iframe. */
+    readonly topbarBg: "var(--surface)";
+    /** `--es-frame-bg` — the paper behind the preview iframe. CANVAS, not chrome:
+     *  it is the page's own white in every theme (UI-24 leaves output alone). */
     readonly frameBg: "#ffffff";
-    /** `--es-hover` — gray-100 row / icon hover. */
-    readonly hover: "#f3f4f6";
+    /** `--es-hover` — row / icon hover. */
+    readonly hover: "var(--surface-raised)";
     /** `--es-hatch` — 45° upload-slot texture. */
-    readonly hatch: "rgba(0, 0, 0, 0.018)";
+    readonly hatch: "color-mix(in srgb, var(--ink-strongest) 2%, transparent)";
     /** `--es-addcard-veil` — add-section card hover wash. */
-    readonly addcardVeil: "rgba(248, 249, 250, 0.66)";
+    readonly addcardVeil: "color-mix(in srgb, var(--surface-sunken) 66%, transparent)";
     /** `--es-field-bg`. */
-    readonly fieldBg: "#ffffff";
-    /** `--es-track-bg` — gray-100 segmented / search track. */
-    readonly trackBg: "#f3f4f6";
-    /** `--es-input-border` — gray-300. */
-    readonly inputBorder: "#d1d5db";
-    /** `--es-field-text` — gray-800. */
-    readonly fieldText: "#1f2937";
-    /** `--es-field-placeholder` — gray-400. */
-    readonly fieldPlaceholder: "#9ca3af";
-    /** `--es-knob` — toggle knob. */
-    readonly knob: "#ffffff";
-    /** `--es-text` — gray-900. */
-    readonly text: "#111827";
-    /** `--es-text-strong` — gray-950 active labels. */
-    readonly textStrong: "#030712";
-    /** `--es-text-secondary` — gray-700. */
-    readonly textSecondary: "#374151";
-    /** `--es-muted` — gray-500. */
-    readonly muted: "#6b7280";
-    /** `--es-icon` — gray-500 icon buttons. */
-    readonly icon: "#6b7280";
-    /** `--es-disabled` — gray-400 disabled / faint glyphs. */
-    readonly disabled: "#9ca3af";
-    /** `--es-divider` — gray-200. */
-    readonly divider: "#e5e7eb";
-    /** `--es-line` — gray-200 hairlines. */
-    readonly line: "#e5e7eb";
-    /** `--es-btn-border` — gray-300. */
-    readonly btnBorder: "#d1d5db";
-    /** `--es-btn-text` — gray-700. */
-    readonly btnText: "#374151";
-    /** `--es-chip-bg` — gray-100. */
-    readonly chipBg: "#f3f4f6";
-    /** `--es-chip-fg` — gray-500. */
-    readonly chipFg: "#6b7280";
-    /** `--es-brand-square` — gray-900 wordmark square. */
-    readonly brandSquare: "#111827";
-    /** `--es-device-border` — gray-200 tablet/mobile frame. */
-    readonly deviceBorder: "#e5e7eb";
-    /** `--es-toast-bg` — gray-900 dark chip / seam pill. */
-    readonly toastBg: "#111827";
-    /** `--es-toggle-off` — gray-300 toggle track. */
-    readonly toggleOff: "#d1d5db";
-    /** `--es-scrollbar` — gray-300. */
-    readonly scrollbar: "#d1d5db";
-    /** `--es-scrollbar-hover` — gray-400. */
-    readonly scrollbarHover: "#9ca3af";
-    /** `--es-danger` — red-600. */
-    readonly danger: "#dc2626";
-    /** `--es-danger-strong` — red-700. */
-    readonly dangerStrong: "#b91c1c";
-    /** `--es-danger-tint` — red-50. */
-    readonly dangerTint: "#fef2f2";
-    /** `--es-warning` — amber-700. */
-    readonly warning: "#b45309";
-    /** `--es-preview-tint` — amber-100 "Preview" pill. */
-    readonly previewTint: "#fef3c7";
-    /**
-     * `--es-success` — green-700. THE ONE VALUE HERE WITH NO `--sf-*` BEHIND IT:
-     * the storefront editor's block has a red and an amber and no green, and card
-     * 8802.g needs one for a green tick. So it is picked to sit with the block
-     * rather than invented next to it — the same Tailwind ramp every other colour
-     * in this file comes from, at the 700 step `--es-warning` already sits on.
-     * 700 and not 600 for the reason amber went there: it is the darkest step
-     * still plainly the hue, and it clears WCAG AA (5.0:1) on the shell's white
-     * panels, so a tick may carry a label without needing a second token.
-     */
-    readonly success: "#15803d";
-    /** `--es-panel-radius`. */
-    readonly panelRadius: 12;
-    /** `--es-row-radius`. */
-    readonly rowRadius: 8;
-    /** `--es-field-radius`. */
-    readonly fieldRadius: 6;
+    readonly fieldBg: "var(--surface)";
+    /** `--es-track-bg` — segmented / search track. */
+    readonly trackBg: "var(--surface-raised)";
+    /** `--es-input-border`. */
+    readonly inputBorder: "var(--line-strong)";
+    /** `--es-field-text`. */
+    readonly fieldText: "var(--ink-strong)";
+    /** `--es-field-placeholder`. */
+    readonly fieldPlaceholder: "var(--ink-faintest)";
+    /** `--es-knob` — toggle knob (the shell's Switch draws it `bg-white`, which
+     *  its dark theme turns into `--surface`). */
+    readonly knob: "var(--surface)";
+    /** `--es-text`. */
+    readonly text: "var(--ink-strongest)";
+    /** `--es-text-strong` — active labels (the ramp has nothing past strongest). */
+    readonly textStrong: "var(--ink-strongest)";
+    /** `--es-text-secondary`. */
+    readonly textSecondary: "var(--ink)";
+    /** `--es-muted`. */
+    readonly muted: "var(--ink-faint)";
+    /** `--es-icon` — icon buttons. */
+    readonly icon: "var(--ink-faint)";
+    /** `--es-disabled` — disabled / faint glyphs. */
+    readonly disabled: "var(--ink-faintest)";
+    /** `--es-divider`. */
+    readonly divider: "var(--line)";
+    /** `--es-line` — hairlines. */
+    readonly line: "var(--line)";
+    /** `--es-btn-border`. */
+    readonly btnBorder: "var(--line-strong)";
+    /** `--es-btn-text`. */
+    readonly btnText: "var(--ink)";
+    /** `--es-chip-bg`. */
+    readonly chipBg: "var(--surface-raised)";
+    /** `--es-chip-fg`. */
+    readonly chipFg: "var(--ink-faint)";
+    /** `--es-brand-square` — wordmark square. */
+    readonly brandSquare: "var(--ink-strongest)";
+    /** `--es-device-border` — tablet/mobile frame. */
+    readonly deviceBorder: "var(--line)";
+    /** `--es-toast-bg` — dark chip / seam pill, white ink on it in both themes:
+     *  the shell's solid status tier (`--status-draft-solid`, 10.3:1 with white). */
+    readonly toastBg: "var(--status-draft-solid)";
+    /** `--es-toggle-off` — toggle track (the shell's Switch: `bg-gray-300`). */
+    readonly toggleOff: "var(--line-strong)";
+    /** `--es-scrollbar`. */
+    readonly scrollbar: "var(--line-strong)";
+    /** `--es-scrollbar-hover`. */
+    readonly scrollbarHover: "var(--ink-faintest)";
+    /** `--es-danger` — danger words and edges: the status tier's ink, which
+     *  clears AA on the surface and on its own wash, light and dark. */
+    readonly danger: "var(--status-danger-soft-ink)";
+    /** `--es-danger-strong` — danger words on `--es-danger-tint`. */
+    readonly dangerStrong: "var(--status-danger-soft-ink)";
+    /** `--es-danger-tint` — the danger wash. */
+    readonly dangerTint: "var(--status-danger-soft)";
+    /** `--es-warning` — the "Preview" pill's words and edge (amber: pending). */
+    readonly warning: "var(--status-pending-soft-ink)";
+    /** `--es-preview-tint` — the "Preview" pill's wash. */
+    readonly previewTint: "var(--status-pending-soft)";
+    /** `--es-success` — a green tick and its label. */
+    readonly success: "var(--status-success-soft-ink)";
+    /** `--es-panel-radius` — 12px, `--radius-xl`. */
+    readonly panelRadius: "var(--radius-xl)";
+    /** `--es-row-radius` — 8px, `--radius-lg`. */
+    readonly rowRadius: "var(--radius-lg)";
+    /** `--es-field-radius` — 6px, `--radius-md`. */
+    readonly fieldRadius: "var(--radius-md)";
     /** `--es-panel-gap` — inter-pane gutter + outer frame padding, ONE token.
      *  12 since the one spacing scale (was 10, which is not a step). */
     readonly panelGap: 12;
@@ -158,10 +161,23 @@ declare const shellTokens: {
      * has to read across 3px of track without looking like a second panel.
      */
     readonly raisedShadow: "0 1px 2px rgba(16, 24, 40, 0.1)";
-    /** `--es-font` — system sans stack. */
-    readonly font: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif";
+    /** `--es-font` — the shell's face. */
+    readonly font: "var(--font-sans)";
 };
 type ShellTokens = typeof shellTokens;
+/**
+ * The tokens `shell.css` re-points under the shell's dark theme
+ * (`:is([data-theme="dark"], .dark) .es-editor`). Shell tokens only: the shell
+ * draws a track and a chip's ground with `bg-gray-100`, and its dark theme
+ * remaps that utility to `--surface` rather than `--surface-raised`, so these
+ * three follow it. Code that reads `shellTokens` for an inline style under a
+ * dark shell reads these over it.
+ */
+declare const shellDarkTokens: {
+    readonly previewBg: "var(--surface)";
+    readonly trackBg: "var(--surface)";
+    readonly chipBg: "var(--surface)";
+};
 /**
  * The one spacing scale, smallest first (owner ruling, 2026-10-02): the six
  * `space*` tokens above as a list, for code that must snap a number to it.
@@ -176,4 +192,4 @@ declare const SPACING_SCALE: readonly [2, 4, 8, 12, 16, 32];
  */
 declare const shellCssVars: Record<keyof ShellTokens, string>;
 
-export { SPACING_SCALE, type ShellTokens, shellCssVars, shellTokens };
+export { SPACING_SCALE, type ShellTokens, shellCssVars, shellDarkTokens, shellTokens };

package/dist/shell/index.js

@@ -1 +1 @@
-export{SPACING_SCALE,shellCssVars,shellTokens}from"../chunk-2UX75JDP.js";
+export{SPACING_SCALE,shellCssVars,shellDarkTokens,shellTokens}from"../chunk-HMJS344F.js";

package/dist/shell/shell.css

@@ -1,115 +1,131 @@
 /*
- * efficient-easel — shell chrome tokens.
+ * efficient-easel — shell chrome tokens, resolved to efficient-shell (UI-24).
  *
- * The values here mirror `shellTokens` in tokens.ts one-for-one (both trace back
- * to the storefront editor's `--sf-*` block — the visual reference). They are
- * declared as custom properties ON `.es-editor`, not on `:root`, so importing
- * this stylesheet themes ONLY an editor root and never leaks variables into the
- * host page (the campaign designer renders INSIDE the admin DOM, so this must
- * not touch the surrounding app).
+ * Every colour, radius and the typeface below is an ALIAS of an efficient-shell
+ * token (`efficient-shell/ui.css`: the neutral ramp `--surface*` / `--ink*` /
+ * `--line*`, the `--status-*` tiers, `--submit-bg`, `--radius-*`,
+ * `--font-sans`). Harness UI-24 (efficient-harness#117, 2026-10-10): there is
+ * one UI kit and it is the shell, so this package keeps no palette, radii or
+ * typeface of its own — and it no longer mirrors the storefront editor's
+ * `--sf-*` block either (that was the rule up to 0.106.0). A value is never
+ * invented here: where the shell has no token for a role, the role is mixed
+ * from shell tokens with `color-mix()` and listed as a gap for the shell to
+ * fold in (efficient-easel issue 199).
  *
- * Both editors add the `es-editor` class to their chrome root and alias their
- * own `--sf-*` / `--cd-*` names onto these — e.g. `--sf-accent: var(--es-accent)`
- * — so the light values live ONCE, here. Re-theme by overriding any `--es-*` var
- * on or above the editor root.
+ * ⚠️ THE HOST MUST LOAD THE SHELL'S CSS FIRST — `efficient-shell/ui.css` (or
+ * `styles.css`, which includes it) — or none of these resolve. There are no
+ * hex fallbacks on purpose: a fallback is a second palette.
+ * `tests/es-tokens-resolve-to-shell.test.ts` holds every colour to a shell
+ * token.
  *
- * LIGHT only: both editing surfaces always render light (no dark mode), so there
- * is no dark counterpart block — do not add one.
+ * THEME. The editor follows the shell's theme, dark included: the shell
+ * stamps `data-theme="dark"` (or the `.dark` class) on `<html>` and swaps its
+ * ramp there; these aliases resolve under `.es-editor`, so they follow. The
+ * ACCENT follows the shell's accent themes too: `--accent-600` is what
+ * `useTheme()` stamps for a custom accent, and `--submit-bg` is the fill the
+ * pink / green / grey themes remap.
  *
+ * The one dark block below holds no value of its own. The shell draws a
+ * control's track and a chip's ground with `bg-gray-100`, and its dark theme
+ * remaps THAT utility to `--surface`, not to `--surface-raised` (its
+ * `Segmented` says so); three roles here are that utility, so they move the
+ * way the shell moves it. Without it a chosen chip in the accent sits on a
+ * track it does not stand off (2.4:1, `tests/panel-chip-contrast.test.ts`).
+ *
+ * THE CANVAS IS OUTPUT, NOT CHROME. `--es-frame-bg` (the paper behind the
+ * preview iframe) stays the page's white: what is drawn there is the website or
+ * the email, which follows harness 52-brand-surface.md and keeps its own
+ * colours in every theme. The shadows are black at an alpha, which composites
+ * on either theme; the shell has no elevation token for a flat panel yet.
+ *
+ * Declared ON `.es-editor`, not on `:root`, so importing this sheet names
+ * nothing in the host page outside an editor root (the campaign designer
+ * renders INSIDE the admin DOM). Both editors alias their `--sf-*` / `--cd-*`
+ * names onto these; re-theme by overriding any `--es-*` var on or above the
+ * editor root, or — better — the shell token it reads.
  *
  * ⛔ CUSTOM PROPERTIES ONLY IN THIS BLOCK. Never a paint property.
  *
  * `.es-editor` is not this package's own element — it is the class each editor
  * puts on ITS OWN chrome root, and the campaign designer puts it on a root that
- * lives INSIDE the admin portal's DOM (card 66024 made that the mechanism:
- * `CampaignDesigner.tsx` adds the class and `campaignBlocks.css` aliases its
- * `--cd-*` onto these values). A custom property here is inert until something
- * reads it. A `background`, a `padding`, a `font` — anything that PAINTS — is
- * not: it applies to that root the moment this sheet is imported, in every
- * editor that imports it, and in the admin portal's own document.
- *
- * ⚠️ This sheet is the one that matters most for that, because it is the one the
- * admin portal actually imports (`CampaignDesigner.tsx`, since card 66024).
- *
- * Audited 2026-09-02 across every sheet here that opens an `.es-editor` block,
- * and the honest number is zero:
- *
- *     shell.css   73 declarations, 73 custom, 0 paint (6 spacing steps added 2026-10-06)
- *     panel.css   11 declarations, 11 custom, 0 paint
- *     menu.css     7 declarations,  7 custom, 0 paint
+ * lives INSIDE the admin portal's DOM. A custom property here is inert until
+ * something reads it. A `background`, a `padding`, a `font` — anything that
+ * PAINTS — is not: it applies to that root the moment this sheet is imported.
+ * Nothing enforces this — if you are adding a declaration here, you are the
+ * check.
  *
- * ⚠️ Nothing enforces this — a rule with no test behind it. If you are adding a
- * declaration here, you are the check.
-* Import once from a client entry / global stylesheet:
+ * Import once from a client entry / global stylesheet, AFTER the shell's:
+ *     import 'efficient-shell/ui.css';
  *     import 'efficient-easel/shell.css';
  */
 
 .es-editor {
-  /* — accent (efficient-shell blue) — */
-  --es-accent: #2563eb;
-  --es-accent-tint: #eff6ff;
-  --es-accent-tint-strong: #dbeafe;
-  --es-accent-line: #bfdbfe;
-  --es-accent-text: #1d4ed8;
-  --es-accent-ring: rgba(37, 99, 235, 0.25);
-  --es-accent-shadow: rgba(37, 99, 235, 0.35);
-  --es-on-accent: #ffffff;
+  /* — accent: the shell's (custom accent, else the themed primary fill) — */
+  --es-accent: var(--accent-600, var(--submit-bg));
+  --es-accent-tint: color-mix(in srgb, var(--es-accent) 10%, var(--surface));
+  --es-accent-tint-strong: color-mix(in srgb, var(--es-accent) 18%, var(--surface));
+  --es-accent-line: color-mix(in srgb, var(--es-accent) 32%, var(--surface));
+  --es-accent-text: color-mix(in srgb, var(--es-accent) 65%, var(--ink-strongest));
+  --es-accent-ring: var(--rosh-focus-ring);
+  --es-accent-shadow: color-mix(in srgb, var(--es-accent) 35%, transparent);
+  --es-on-accent: var(--status-on-solid);
 
-  /* — surfaces (cool gray ramp) — */
-  --es-app-bg: #f9fafb;
-  --es-preview-bg: #f3f4f6;
-  --es-panel: #ffffff;
-  --es-raised: #ffffff;
-  --es-topbar-bg: #ffffff;
+  /* — surfaces: the shell's neutral ramp — */
+  --es-app-bg: var(--surface-sunken);
+  --es-preview-bg: var(--surface-raised);
+  --es-panel: var(--surface);
+  --es-raised: var(--surface);
+  --es-topbar-bg: var(--surface);
+  /* The canvas's paper: OUTPUT, not chrome — the page's own white. */
   --es-frame-bg: #ffffff;
-  --es-hover: #f3f4f6;
-  --es-hatch: rgba(0, 0, 0, 0.018);
-  --es-addcard-veil: rgba(248, 249, 250, 0.66);
+  --es-hover: var(--surface-raised);
+  --es-hatch: color-mix(in srgb, var(--ink-strongest) 2%, transparent);
+  --es-addcard-veil: color-mix(in srgb, var(--surface-sunken) 66%, transparent);
 
   /* — fields — */
-  --es-field-bg: #ffffff;
-  --es-track-bg: #f3f4f6;
-  --es-input-border: #d1d5db;
-  --es-field-text: #1f2937;
-  --es-field-placeholder: #9ca3af;
-  --es-knob: #ffffff;
+  --es-field-bg: var(--surface);
+  --es-track-bg: var(--surface-raised);
+  --es-input-border: var(--line-strong);
+  --es-field-text: var(--ink-strong);
+  --es-field-placeholder: var(--ink-faintest);
+  --es-knob: var(--surface);
 
   /* — text — */
-  --es-text: #111827;
-  --es-text-strong: #030712;
-  --es-text-secondary: #374151;
-  --es-muted: #6b7280;
-  --es-icon: #6b7280;
-  --es-disabled: #9ca3af;
+  --es-text: var(--ink-strongest);
+  --es-text-strong: var(--ink-strongest);
+  --es-text-secondary: var(--ink);
+  --es-muted: var(--ink-faint);
+  --es-icon: var(--ink-faint);
+  --es-disabled: var(--ink-faintest);
 
   /* — lines / chips / buttons — */
-  --es-divider: #e5e7eb;
-  --es-line: #e5e7eb;
-  --es-btn-border: #d1d5db;
-  --es-btn-text: #374151;
-  --es-chip-bg: #f3f4f6;
-  --es-chip-fg: #6b7280;
+  --es-divider: var(--line);
+  --es-line: var(--line);
+  --es-btn-border: var(--line-strong);
+  --es-btn-text: var(--ink);
+  --es-chip-bg: var(--surface-raised);
+  --es-chip-fg: var(--ink-faint);
 
   /* — named chrome literals — */
-  --es-brand-square: #111827;
-  --es-device-border: #e5e7eb;
-  --es-toast-bg: #111827;
-  --es-toggle-off: #d1d5db;
-  --es-scrollbar: #d1d5db;
-  --es-scrollbar-hover: #9ca3af;
+  --es-brand-square: var(--ink-strongest);
+  --es-device-border: var(--line);
+  --es-toast-bg: var(--status-draft-solid);
+  --es-toggle-off: var(--line-strong);
+  --es-scrollbar: var(--line-strong);
+  --es-scrollbar-hover: var(--ink-faintest);
 
-  /* — danger / warning / success (shell red / amber / green) — */
-  --es-danger: #dc2626;
-  --es-danger-strong: #b91c1c;
-  --es-danger-tint: #fef2f2;
-  --es-warning: #b45309;
-  --es-preview-tint: #fef3c7;
-  --es-success: #15803d;
+  /* — danger / warning / success: the shell's status tiers — */
+  --es-danger: var(--status-danger-soft-ink);
+  --es-danger-strong: var(--status-danger-soft-ink);
+  --es-danger-tint: var(--status-danger-soft);
+  --es-warning: var(--status-pending-soft-ink);
+  --es-preview-tint: var(--status-pending-soft);
+  --es-success: var(--status-success-soft-ink);
 
-  /* — radii / shape / gap — */
-  --es-panel-radius: 12px;
-  --es-row-radius: 8px;
-  --es-field-radius: 6px;
+  /* — radii: the shell's scale / gap — */
+  --es-panel-radius: var(--radius-xl);
+  --es-row-radius: var(--radius-lg);
+  --es-field-radius: var(--radius-md);
   --es-panel-gap: 12px;
 
   /* — spacing: ONE scale for every panel (owner ruling, 2026-10-02) —
@@ -122,11 +138,37 @@
   --es-space-16: 16px;
   --es-space-32: 32px;
 
-  /* — shadows — */
+  /* — shadows: black at an alpha (no shell elevation token yet) — */
   --es-panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06);
   --es-topbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   --es-raised-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
 
-  /* — type — */
-  --es-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  /* — type: the shell's face — */
+  --es-font: var(--font-sans);
+}
+
+/* Dark: the three `bg-gray-100` roles, re-pointed exactly as the shell's dark
+   theme re-points `.bg-gray-100` (to `--surface`). Shell tokens only. */
+:is([data-theme="dark"], .dark) .es-editor {
+  --es-preview-bg: var(--surface);
+  --es-track-bg: var(--surface);
+  --es-chip-bg: var(--surface);
+}
+
+/* ── Visually hidden ─────────────────────────────────────────────────────── */
+/* Words a control is named by but does not draw (since efficient-easel issue 199
+   step 4, the shell's controls take their name from their content): the
+   device switch's names beside its glyphs, a drawn segment's name, a tab's
+   word where the panel is too narrow for it. Hidden from sight, never with
+   `display: none`, so they stay the control's accessible name. The one rule
+   of this sheet that is not a token: every easel sheet's markup may use it. */
+.es-vh {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }

package/dist/strings/catalogue.d.ts

@@ -1,4 +1,4 @@
-import { S as SaveWords } from '../words-D_Lnw1Gr.js';
+import { S as SaveWords } from '../words-CvFnwGSr.js';
 import { N as NoticeWords, C as ChromeWords } from '../words-AHHfiaRY.js';
 import { C as CopyWords } from '../words-XH0TvZPg.js';
 import { D as DragWords } from '../words-BDignMl_.js';
@@ -11,10 +11,10 @@ import { ScreenWords } from '../screen/words.js';
 export { ScreenAddWords } from '../screen/words.js';
 import { S as StyleClipboardWords } from '../words-CnnHb9jo.js';
 import { T as TextStylesWords } from '../words-CRYvAiHX.js';
-import { T as TreeWords } from '../words-DgHcY5qB.js';
-import '../types-CqY85foL.js';
-import '../types-DWS-s9z-.js';
-import '../wordFit-D4S36PvB.js';
+import { T as TreeWords } from '../words-Cl9xMUYY.js';
+import '../types-Dt1CFR1S.js';
+import '../types-CsgMwHHa.js';
+import '../wordFit-7XpmhcaW.js';
 import 'react';
 import '../panelWidths-D9hTLR25.js';
 import '../engine-DBxp_v6B.js';

package/dist/strings/catalogue.js

@@ -1 +1 @@
-export{DEFAULT_EASEL_STRINGS,mergeEaselStrings}from"../chunk-Z6SOLDWV.js";import"../chunk-M6F6LS3H.js";import"../chunk-6WY6ZXJG.js";import"../chunk-WK3AFPXY.js";import"../chunk-E2O2MRZR.js";import"../chunk-AELNNAFM.js";import"../chunk-3EDSDPIP.js";import"../chunk-QTLAVDJE.js";import"../chunk-H6DDIBQ4.js";import"../chunk-ZJEBF4NB.js";import"../chunk-RE4LP46F.js";import"../chunk-2OAZYSWJ.js";import"../chunk-UH7IGZKF.js";import"../chunk-ZAOM6PFH.js";import"../chunk-FPOKPNO4.js";import"../chunk-546BBOPE.js";import"../chunk-O2NLQBFX.js";
+export{DEFAULT_EASEL_STRINGS,mergeEaselStrings}from"../chunk-ZNNATBDC.js";import"../chunk-M6F6LS3H.js";import"../chunk-ZAOM6PFH.js";import"../chunk-6WY6ZXJG.js";import"../chunk-E2O2MRZR.js";import"../chunk-AELNNAFM.js";import"../chunk-K56YDHYQ.js";import"../chunk-QTLAVDJE.js";import"../chunk-WK3AFPXY.js";import"../chunk-H6DDIBQ4.js";import"../chunk-ZJEBF4NB.js";import"../chunk-RE4LP46F.js";import"../chunk-2OAZYSWJ.js";import"../chunk-UH7IGZKF.js";import"../chunk-FPOKPNO4.js";import"../chunk-546BBOPE.js";import"../chunk-O2NLQBFX.js";

package/dist/strings/index.d.ts

@@ -10,16 +10,16 @@ export { LockWords } from '../edit-lock/index.js';
 export { N as NodeMenuWords } from '../words-DMG4dYq2.js';
 export { P as PanelWords } from '../words-BGrHZAJJ.js';
 export { P as PickWords } from '../words-is_Vy6hn.js';
-export { S as SaveWords } from '../words-D_Lnw1Gr.js';
+export { S as SaveWords } from '../words-CvFnwGSr.js';
 export { ScreenAddWords, ScreenWords } from '../screen/words.js';
 export { S as StyleClipboardWords } from '../words-CnnHb9jo.js';
 export { T as TextStylesWords } from '../words-CRYvAiHX.js';
-export { T as TreeWords } from '../words-DgHcY5qB.js';
+export { T as TreeWords } from '../words-Cl9xMUYY.js';
 import '../markup/index.js';
 import '../buckets-CuLM47h9.js';
-import '../types-CqY85foL.js';
-import '../types-DWS-s9z-.js';
-import '../wordFit-D4S36PvB.js';
+import '../types-Dt1CFR1S.js';
+import '../types-CsgMwHHa.js';
+import '../wordFit-7XpmhcaW.js';
 import '../panelWidths-D9hTLR25.js';
 import '../engine-DBxp_v6B.js';
 

package/dist/strings/index.js

@@ -1,2 +1,2 @@
-import{DEFAULT_EASEL_STRINGS as r,mergeEaselStrings as n}from"../chunk-Z6SOLDWV.js";export{DEFAULT_EASEL_STRINGS,mergeEaselStrings}from"../chunk-Z6SOLDWV.js";import"../chunk-M6F6LS3H.js";import"../chunk-6WY6ZXJG.js";import"../chunk-WK3AFPXY.js";import"../chunk-E2O2MRZR.js";import"../chunk-AELNNAFM.js";import"../chunk-3EDSDPIP.js";import"../chunk-QTLAVDJE.js";import"../chunk-H6DDIBQ4.js";import"../chunk-ZJEBF4NB.js";import"../chunk-RE4LP46F.js";import"../chunk-2OAZYSWJ.js";import"../chunk-UH7IGZKF.js";import"../chunk-ZAOM6PFH.js";import"../chunk-FPOKPNO4.js";import"../chunk-546BBOPE.js";import{stringsContext as o}from"../chunk-MFIRYGHW.js";import"../chunk-O2NLQBFX.js";import{useContext as t,useMemo as c}from"react";import{jsx as i}from"react/jsx-runtime";function s({value:s,locale:u,children:m}){const e=o(),p=t(e),h=p?.strings??r,j=u??p?.locale??"en",k=c(()=>({strings:n(h,s),locale:j}),[h,s,j]);/* @__PURE__ */
+import{DEFAULT_EASEL_STRINGS as r,mergeEaselStrings as n}from"../chunk-ZNNATBDC.js";export{DEFAULT_EASEL_STRINGS,mergeEaselStrings}from"../chunk-ZNNATBDC.js";import"../chunk-M6F6LS3H.js";import"../chunk-ZAOM6PFH.js";import"../chunk-6WY6ZXJG.js";import"../chunk-E2O2MRZR.js";import"../chunk-AELNNAFM.js";import"../chunk-K56YDHYQ.js";import"../chunk-QTLAVDJE.js";import"../chunk-WK3AFPXY.js";import"../chunk-H6DDIBQ4.js";import"../chunk-ZJEBF4NB.js";import"../chunk-RE4LP46F.js";import"../chunk-2OAZYSWJ.js";import"../chunk-UH7IGZKF.js";import"../chunk-FPOKPNO4.js";import"../chunk-546BBOPE.js";import{stringsContext as o}from"../chunk-MFIRYGHW.js";import"../chunk-O2NLQBFX.js";import{useContext as t,useMemo as c}from"react";import{jsx as i}from"react/jsx-runtime";function s({value:s,locale:u,children:m}){const e=o(),p=t(e),h=p?.strings??r,j=u??p?.locale??"en",k=c(()=>({strings:n(h,s),locale:j}),[h,s,j]);/* @__PURE__ */
 return i(e.Provider,{value:k,children:m})}function u(){return t(o())?.strings??r}function m(){return t(o())?.locale??"en"}export{s as EaselStringsProvider,m as useEaselLocale,u as useEaselStrings};