efficient-easel 0.97.0 → 0.99.0

package/dist/markup/index.d.ts

@@ -43,7 +43,36 @@
  *
  *   [words](href)  a link — safe addresses only ({@link isSafeLinkHref})
  *   - words        a bullet line, one level
- *   **a _b_ a**    one run inside another, one level
+ *   1. words       a numbered line, one level: 1-3 digits, ". ", words
+ *   **a _b_ a**    one run inside another, up to four levels
+ *
+ *   [words]{underline}    underline
+ *   [words]{sup}          superscript
+ *   [words]{sub}          subscript
+ *   [words]{color=name}   a theme colour, by NAME ({@link isColorName})
+ *
+ * THE SPANS AND THE NUMBERED LINE (plan step E1, approved by GG 2026-10-06)
+ * are the final text box's marks. One shape for all four, so one reading rule:
+ * `[`, words, `]`, then EXACTLY one of those blocks. Anything else after the
+ * `]` — `{foo}`, `{color=#ff0000}`, a merge tag's `{{` — is not a span, and the
+ * whole thing stays as typed. Two marks on the same words nest
+ * (`[[x]{sup}]{color=accent}`); one block never holds two.
+ *
+ * Why these cannot clash with an old mark: no old rule closes on `]{` (a link
+ * needs `](`), and the campaign's legacy `[phrase]` italic steps back from a
+ * span block, the way it steps back from a link (`notBeforeBlock`). No inline
+ * rule opens on a digit. Production held neither shape when they were chosen:
+ * 0 of 24,233 text values contained `]{`, and none had a line starting with a
+ * number and `.` or `)`.
+ *
+ * Not chosen: `^x^` / `~x~` (one character from Quiet `^^` and strike `~~`,
+ * and `~20 min` is ordinary copy), `__x__` (pinned as italic below, and
+ * CommonMark's bold) and `++x++` (the old Strong).
+ *
+ * Only the tree ({@link parseMarkup}) reads them. The flat
+ * {@link tokenizeInline} — the old renderers' reading — keeps them as text, as
+ * it keeps links: an email or a page drawn before its renderer learns them
+ * prints the delimiters. No toolbar button writes them yet.
  *
  * EVERY READING IS LINE BY LINE: a run never crosses a line break. The email
  * always read this way; the editor's painter and the storefront used to read
@@ -87,21 +116,32 @@
  */
 /** A style a toolbar button can apply. The first six are inline marks; then
  *  the composer-only affordances (a link and the three line prefixes), which
- *  only a renderer that draws block content can honour; and `clear`, which
- *  writes no mark at all — it takes them off ({@link clearMarks}). */
-type MarkStyle = 'bold' | 'italic' | 'strike' | 'code' | 'highlight' | 'quiet' | 'link' | 'bullet' | 'number' | 'quote' | 'clear';
+ *  only a renderer that draws block content can honour; `clear`, which
+ *  writes no mark at all — it takes them off ({@link clearMarks}); and the
+ *  three spans of the final text box (E1), which no button in
+ *  {@link MARKUP_TOOLS} offers yet. A colour carries a name, so it is written
+ *  by {@link applyColor}, not here. */
+type MarkStyle = 'bold' | 'italic' | 'strike' | 'code' | 'highlight' | 'quiet' | 'link' | 'bullet' | 'number' | 'quote' | 'clear' | 'underline' | 'sup' | 'sub';
+/** What a span means: `[words]{underline}`, `{sup}`, `{sub}` or
+ *  `{color=name}`. Only the tree reads these; {@link InlineKind} is the flat
+ *  reading's, which never makes one. */
+type SpanKind = 'underline' | 'sup' | 'sub' | 'color';
 /** What a parsed run MEANS. `accent` is the storefront/campaign brand colour —
  *  the legacy `*phrase*` — and `highlight` is its standard-markdown successor;
  *  both resolve to the same paint, which is what makes converting stored copy
  *  from one to the other invisible. */
 type InlineKind = 'text' | 'bold' | 'italic' | 'strike' | 'code' | 'highlight' | 'accent' | 'quiet';
+/** A theme colour's name as a span saves it: lowercase letters, digits and
+ *  `-`, starting with a letter (`accent`, `brand-2`). Never a hex: a colour is
+ *  the theme's, so changing the theme recolours the words. */
+declare function isColorName(name: string): boolean;
 /**
  * The words a press WRITES when nothing is selected — `**bold text**`, left
  * selected so the next keystroke replaces it. English unless the caller of
  * {@link applyMark} hands in its own (0.95.0: a host in another language).
  * They are words put in the box, not rules: nothing here changes what parses.
  */
-type MarkPlaceholders = Record<'bold' | 'italic' | 'strike' | 'code' | 'highlight' | 'quiet' | 'link', string>;
+type MarkPlaceholders = Record<'bold' | 'italic' | 'strike' | 'code' | 'highlight' | 'quiet' | 'link', string> & Partial<Record<'underline' | 'sup' | 'sub' | 'color', string>>;
 declare const MARK_PLACEHOLDERS: MarkPlaceholders;
 interface WrapResult {
     text: string;
@@ -119,6 +159,17 @@ interface WrapResult {
  * and the campaign designer, where the asterisk means colour, not slant.
  */
 declare function applyMark(text: string, start: number, end: number, style: MarkStyle, rules?: readonly InlineRule[], placeholders?: MarkPlaceholders): WrapResult;
+/**
+ * Colour `text[start:end]` with the theme colour `name`, writing
+ * `[words]{color=name}` and leaving the words selected. On words that are
+ * already exactly one colour span it changes the name; `null` takes the colour
+ * off. A name {@link isColorName} refuses changes nothing — a hex or a typo is
+ * never saved as a block the reader would print as text.
+ *
+ * Separate from {@link applyMark} because a colour carries a value, as a link
+ * does ({@link writeLink}).
+ */
+declare function applyColor(text: string, start: number, end: number, name: string | null, placeholders?: MarkPlaceholders): WrapResult;
 /**
  * True when `text[start:end]` is ALREADY wrapped in `style`'s own fence — the
  * very test {@link applyMark} uses to decide that a press unwraps. So a button
@@ -226,6 +277,14 @@ interface InlineRule {
      * more rule field and no new branch in {@link tokenizeInline}.
      */
     readonly notBefore?: string;
+    /**
+     * True when the run may not close right before a span block (`{sup}`,
+     * `{color=accent}`, …). The campaign's legacy `[phrase]` needs it for the
+     * reason it needs `notBefore: '('`: without it `[x]{sup}` would read as an
+     * italic `x` followed by a printed `{sup}`. Only the four exact blocks count,
+     * so `[x]{{first_name}}` and `[x]{foo}` read as they always did.
+     */
+    readonly notBeforeBlock?: boolean;
 }
 /**
  * The standard-markdown marks, shared by every product.
@@ -322,12 +381,14 @@ interface MarkupText {
     text: string;
 }
 /** A delimited run. `open` and `close` are the delimiters that were actually
- *  saved — `#` for a legacy campaign bold, `**` for the standard one — so the
- *  tree writes back the same bytes it was read from. */
+ *  saved — `#` for a legacy campaign bold, `**` for the standard one, `[` and
+ *  `]{sup}` for a span — so the tree writes back the same bytes it was read
+ *  from. `color` is the theme colour's name, on a `color` span only. */
 interface MarkupRun {
-    kind: InlineRule['kind'];
+    kind: InlineRule['kind'] | SpanKind;
     open: string;
     close: string;
+    color?: string;
     children: MarkupNode[];
 }
 /** `[words](href)`. Only made when {@link isSafeLinkHref} passes. */
@@ -338,9 +399,12 @@ interface MarkupLink {
 }
 type MarkupNode = MarkupText | MarkupRun | MarkupLink;
 /** One line of the saved string. `bullet` means it was saved as `- words`;
- *  `children` hold what follows the `- `. */
+ *  `number` holds the digits of a line saved as `12. words`, as typed (`01`
+ *  stays `01`), and is null on every other line. `children` hold what follows
+ *  the prefix. A line built by hand may leave `number` out: it means null. */
 interface MarkupLine {
     bullet: boolean;
+    number?: string | null;
     children: MarkupNode[];
 }
 /**
@@ -361,10 +425,14 @@ declare function isSafeLinkHref(href: string): boolean;
  * - A run never crosses a line break.
  * - A line that starts with `- ` and has words after it is a bullet. One level
  *   only: an indented `  - ` is plain text.
+ * - A line that starts with 1-3 digits, `. ` and words is numbered, the digits
+ *   kept as typed. One level only, as bullets.
  * - `[words](href)` is a link when {@link isSafeLinkHref} passes; otherwise the
  *   whole thing stays plain text.
- * - A run's words are read once more, so `**bold _with italic_**` is italic
- *   inside bold. One level only: a third level stays as typed.
+ * - `[words]{underline}`, `{sup}`, `{sub}` and `{color=name}` are spans; any
+ *   other block stays plain text.
+ * - A run's words are read again, so `**bold _with italic_**` is italic inside
+ *   bold. Four levels: a fifth stays as typed.
  *
  * Nothing is lost: {@link serializeMarkup} writes back the exact bytes.
  */
@@ -378,22 +446,25 @@ declare function serializeMarkup(lines: readonly MarkupLine[]): string;
  *
  * `open` and `close` are the delimiters that were saved (`#` for a legacy
  * campaign bold), or, for a run made in the editor, the toolbar's own fence.
- * A link's `close` is `](href)`.
+ * A link's `close` is `](href)`, a span's `]{sup}` or `]{color=name}`.
  */
 interface MarkSpan {
     id: number;
-    kind: InlineRule['kind'] | 'link';
+    kind: InlineRule['kind'] | SpanKind | 'link';
     open: string;
     close: string;
     href?: string;
+    color?: string;
 }
 /**
  * A NEW run, as the toolbar writes it: `**` for bold, `_` for italic, and so on
- * ({@link applyMark}'s own fences), or a link to `href`. Null for a style that
- * writes no run (a line prefix, clear). A paste filter or an editor making a
- * run asks here, so no delimiter is spelled outside this module (E8).
+ * ({@link applyMark}'s own fences), a link to `value`, or a colour span named
+ * `value` ({@link isColorName}). Null for a style that writes no run (a line
+ * prefix, clear) and for a link or colour with no usable value. A paste filter
+ * or an editor making a run asks here, so no delimiter is spelled outside this
+ * module (E8).
  */
-declare function spanFor(id: number, style: MarkStyle, href?: string): MarkSpan | null;
+declare function spanFor(id: number, style: MarkStyle | 'color', value?: string): MarkSpan | null;
 /** One character of the words — never a delimiter — with the runs it sits in,
  *  outside first, and its offset in the saved string. */
 interface MarkedChar {
@@ -401,9 +472,12 @@ interface MarkedChar {
     marks: readonly MarkSpan[];
     at: number;
 }
-/** One line: its bullet flag (the `- ` is not a character) and its words. */
+/** One line: its bullet flag or its number (the `- ` and the `12. ` are not
+ *  characters) and its words. `number` left out means null, as on
+ *  {@link MarkupLine}. */
 interface MarkedLine {
     bullet: boolean;
+    number?: string | null;
     chars: MarkedChar[];
 }
 /**
@@ -433,12 +507,14 @@ declare function writeMarkedLines(lines: readonly MarkedLine[]): {
     at: number[][];
 };
 /** True when two readings hold the same words wearing the same marks — the
- *  kinds and addresses, not which run or which delimiter. */
+ *  kinds, addresses, colours and list numbers, not which run or which
+ *  delimiter. */
 declare function sameMarks(a: readonly MarkedLine[], b: readonly MarkedLine[]): boolean;
 /**
  * Take every mark off `text[start:end]`, keeping the words and any link (a
  * link has its own Remove). A run the selection only partly covers is split,
- * so the rest of it keeps its mark. Bullets stay: they are lines, not marks.
+ * so the rest of it keeps its mark. Bullets and numbers stay: they are lines,
+ * not marks.
  *
  * With nothing selected, the runs the caret touches — the characters either
  * side of it — come off whole.
@@ -449,4 +525,4 @@ declare function sameMarks(a: readonly MarkedLine[], b: readonly MarkedLine[]):
  */
 declare function clearMarks(text: string, start: number, end: number, rules?: readonly InlineRule[]): WrapResult;
 
-export { CAMPAIGN_MARKUP, COPY_FIELD_TOOLS, type InlineKind, type InlineRule, type InlineToken, type LinkSpan, MARKUP_TOOLS, MARK_NAMES, MARK_PLACEHOLDERS, type MarkPlaceholders, type MarkSpan, type MarkStyle, type MarkedChar, type MarkedLine, type MarkupLine, type MarkupLink, type MarkupNode, type MarkupRun, type MarkupText, type MarkupTool, STANDARD_MARKUP, STOREFRONT_MARKUP, type WrapResult, applyMark, clearMarks, findLink, isSafeLinkHref, markedAt, markedLines, markupTools, parseMarkup, removeLink, sameMarks, serializeMarkup, spanFor, stripInline, tokenizeInline, writeLink, writeMarkedLines };
+export { CAMPAIGN_MARKUP, COPY_FIELD_TOOLS, type InlineKind, type InlineRule, type InlineToken, type LinkSpan, MARKUP_TOOLS, MARK_NAMES, MARK_PLACEHOLDERS, type MarkPlaceholders, type MarkSpan, type MarkStyle, type MarkedChar, type MarkedLine, type MarkupLine, type MarkupLink, type MarkupNode, type MarkupRun, type MarkupText, type MarkupTool, STANDARD_MARKUP, STOREFRONT_MARKUP, type SpanKind, type WrapResult, applyColor, applyMark, clearMarks, findLink, isColorName, isSafeLinkHref, markedAt, markedLines, markupTools, parseMarkup, removeLink, sameMarks, serializeMarkup, spanFor, stripInline, tokenizeInline, writeLink, writeMarkedLines };

package/dist/markup/index.js

@@ -1 +1 @@
-export{CAMPAIGN_MARKUP,COPY_FIELD_TOOLS,MARKUP_TOOLS,MARK_NAMES,MARK_PLACEHOLDERS,STANDARD_MARKUP,STOREFRONT_MARKUP,applyMark,clearMarks,findLink,isSafeLinkHref,markedAt,markedLines,markupTools,parseMarkup,removeLink,sameMarks,serializeMarkup,spanFor,stripInline,tokenizeInline,writeLink,writeMarkedLines}from"../chunk-6OPSJGAI.js";
+export{CAMPAIGN_MARKUP,COPY_FIELD_TOOLS,MARKUP_TOOLS,MARK_NAMES,MARK_PLACEHOLDERS,STANDARD_MARKUP,STOREFRONT_MARKUP,applyColor,applyMark,clearMarks,findLink,isColorName,isSafeLinkHref,markedAt,markedLines,markupTools,parseMarkup,removeLink,sameMarks,serializeMarkup,spanFor,stripInline,tokenizeInline,writeLink,writeMarkedLines}from"../chunk-SJQG5ENJ.js";

package/dist/menu/menu.css

@@ -2,7 +2,7 @@
  * efficient-easel/menu.css — the right-click menu box (card 66400.d).
  *
  * THE VALUES ARE NOT OURS. They are the storefront editor's shipped
- * `.sf-blockmenu` / `.sf-blockmenu-item` — `efficient-shop/components/storefront-editor.css`,
+ * `.sf-blockmenu` / `.sf-blockmenu-item` — `efficient-storefront/components/storefront-editor.css`,
  * read at line 1165 — which is the look card 66400.d names for the menu Lewis
  * approved on 2026-08-31. Each `--sf-*` there is already an alias of the
  * matching `--es-*` here (card 66024), so the look is expressed with no new
@@ -135,7 +135,7 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: 2px;
   min-width: var(--es-menu-min-w);
   /* A box that could grow past the viewport would be unreachable on its far
      side whatever the edge-flip did. */
@@ -159,7 +159,7 @@
   align-items: center;
   gap: 8px;
   width: 100%;
-  padding: 7px 9px;
+  padding: 8px;
   border: none;
   border-radius: 6px;
   background: transparent;
@@ -236,7 +236,7 @@
 
 /* ── a caption, and a separator ─────────────────────────────────────────── */
 .es-menu-header {
-  padding: 6px 9px 4px;
+  padding: 8px 8px 4px;
   color: var(--es-muted);
   font-size: 10px;
   font-weight: 500;

package/dist/node-ops/index.js

@@ -1 +1 @@
-import{DEFAULT_NODE_MENU_WORDS as e}from"../chunk-WK3AFPXY.js";export{canStep,fromItemSelector,parentStep,planDuplicate,planMove,planPaste,planRemove,planSetProps,planStep,toItemSelector,useNodeOps}from"../chunk-D2BCHTQR.js";import{TrashIcon as n,EyeIcon as t,EyeOffIcon as o,RenameIcon as p,PasteIcon as l,CopyIcon as c,MoveDownIcon as s,MoveUpIcon as a,DuplicateIcon as i,AddIcon as r,LayersIcon as u}from"../chunk-YNZZYHA4.js";import"../chunk-KRXQM65X.js";import"../chunk-NKB3KVAB.js";import{jsx as h}from"react/jsx-runtime";function d(){let e=null;const n=/* @__PURE__ */new Set;return{get:()=>e,set(t){e=t;for(const e of[...n])e()},subscribe:e=>(n.add(e),()=>n.delete(e))}}var m={layer:{icon:/* @__PURE__ */h(u,{})},addInside:{icon:/* @__PURE__ */h(r,{})},duplicate:{icon:/* @__PURE__ */h(i,{})},moveUp:{icon:/* @__PURE__ */h(a,{})},moveDown:{icon:/* @__PURE__ */h(s,{})},copy:{icon:/* @__PURE__ */h(c,{}),shortcut:"⌘C"},cut:{icon:/* @__PURE__ */h(c,{}),shortcut:"⌘X"},paste:{icon:/* @__PURE__ */h(l,{}),shortcut:"⌘V"},rename:{icon:/* @__PURE__ */h(p,{})},hide:{icon:/* @__PURE__ */h(o,{})},show:{icon:/* @__PURE__ */h(t,{})},upLevel:{},delete:{icon:/* @__PURE__ */h(n,{}),danger:!0}};function v(n){const{actions:t,rows:o={},extras:p={},words:l=e}=n,c=e=>({...m[e],label:l[e],...o[e]}),s=(e,n,t)=>{const o=c(e),p={label:t??o.label??e,onClick:n};return o.icon&&(p.icon=o.icon),o.shortcut&&(p.shortcut=o.shortcut),o.danger&&(p.danger=!0),p},a=()=>{const e=c("layer"),t={label:e.label??l.layer,onClick:()=>{},children:n.layer.items};return e.icon&&(t.icon=e.icon),t},i=[],r=[],u=[],h=[],d=!!n.layer&&n.layer.items.length>1;if(d&&"pick"===(n.layer.group??"pick")&&i.push(a()),t.addInside&&r.push(s("addInside",t.addInside)),t.duplicate&&r.push(s("duplicate",t.duplicate)),t.moveUp&&r.push(s("moveUp",t.moveUp)),t.moveDown&&r.push(s("moveDown",t.moveDown)),t.copy&&r.push(s("copy",t.copy)),t.cut&&r.push(s("cut",t.cut)),t.paste){const e=c("paste").label??l.paste;r.push(s("paste",t.paste.run,l.pasteNamed({paste:e,label:t.paste.label})))}t.rename&&u.push(s("rename",t.rename)),t.hide&&u.push(t.hide.hidden?s("show",t.hide.run):s("hide",t.hide.run)),d&&"change"===n.layer.group&&u.push(a()),t.upLevel&&u.push(s("upLevel",t.upLevel)),t.delete&&h.push(s("delete",t.delete)),i.push(...p.pick??[]),r.push(...p.make??[]),u.push(...p.change??[]),h.push(...p.remove??[]);const v=[i,r,n.style??[],u,h].filter(e=>e.length>0),g=i.length+r.length+u.length+h.length===0,k=[{label:n.title,header:!0,onClick:()=>{}}];return g&&n.pinnedLine&&k.push({label:n.pinnedLine,header:!0,onClick:()=>{}}),v.forEach((e,t)=>{(t>0||g&&n.pinnedLine)&&k.push({label:"—",onClick:()=>{}}),k.push(...e)}),k}export{d as createNodeClipboard,v as nodeMenuItems};
+import{DEFAULT_NODE_MENU_WORDS as e}from"../chunk-WK3AFPXY.js";export{canStep,fromItemSelector,parentStep,planDuplicate,planMove,planPaste,planRemove,planSetProps,planStep,toItemSelector,useNodeOps}from"../chunk-D2BCHTQR.js";import{TrashIcon as n,EyeIcon as t,EyeOffIcon as o,RenameIcon as p,PasteIcon as l,CopyIcon as c,MoveDownIcon as s,MoveUpIcon as a,DuplicateIcon as i,AddIcon as r,LayersIcon as u}from"../chunk-PI26YXYD.js";import"../chunk-KRXQM65X.js";import"../chunk-NKB3KVAB.js";import{jsx as h}from"react/jsx-runtime";function d(){let e=null;const n=/* @__PURE__ */new Set;return{get:()=>e,set(t){e=t;for(const e of[...n])e()},subscribe:e=>(n.add(e),()=>n.delete(e))}}var m={layer:{icon:/* @__PURE__ */h(u,{})},addInside:{icon:/* @__PURE__ */h(r,{})},duplicate:{icon:/* @__PURE__ */h(i,{})},moveUp:{icon:/* @__PURE__ */h(a,{})},moveDown:{icon:/* @__PURE__ */h(s,{})},copy:{icon:/* @__PURE__ */h(c,{}),shortcut:"⌘C"},cut:{icon:/* @__PURE__ */h(c,{}),shortcut:"⌘X"},paste:{icon:/* @__PURE__ */h(l,{}),shortcut:"⌘V"},rename:{icon:/* @__PURE__ */h(p,{})},hide:{icon:/* @__PURE__ */h(o,{})},show:{icon:/* @__PURE__ */h(t,{})},upLevel:{},delete:{icon:/* @__PURE__ */h(n,{}),danger:!0}};function v(n){const{actions:t,rows:o={},extras:p={},words:l=e}=n,c=e=>({...m[e],label:l[e],...o[e]}),s=(e,n,t)=>{const o=c(e),p={label:t??o.label??e,onClick:n};return o.icon&&(p.icon=o.icon),o.shortcut&&(p.shortcut=o.shortcut),o.danger&&(p.danger=!0),p},a=()=>{const e=c("layer"),t={label:e.label??l.layer,onClick:()=>{},children:n.layer.items};return e.icon&&(t.icon=e.icon),t},i=[],r=[],u=[],h=[],d=!!n.layer&&n.layer.items.length>1;if(d&&"pick"===(n.layer.group??"pick")&&i.push(a()),t.addInside&&r.push(s("addInside",t.addInside)),t.duplicate&&r.push(s("duplicate",t.duplicate)),t.moveUp&&r.push(s("moveUp",t.moveUp)),t.moveDown&&r.push(s("moveDown",t.moveDown)),t.copy&&r.push(s("copy",t.copy)),t.cut&&r.push(s("cut",t.cut)),t.paste){const e=c("paste").label??l.paste;r.push(s("paste",t.paste.run,l.pasteNamed({paste:e,label:t.paste.label})))}t.rename&&u.push(s("rename",t.rename)),t.hide&&u.push(t.hide.hidden?s("show",t.hide.run):s("hide",t.hide.run)),d&&"change"===n.layer.group&&u.push(a()),t.upLevel&&u.push(s("upLevel",t.upLevel)),t.delete&&h.push(s("delete",t.delete)),i.push(...p.pick??[]),r.push(...p.make??[]),u.push(...p.change??[]),h.push(...p.remove??[]);const v=[i,r,n.style??[],u,h].filter(e=>e.length>0),g=i.length+r.length+u.length+h.length===0,k=[{label:n.title,header:!0,onClick:()=>{}}];return g&&n.pinnedLine&&k.push({label:n.pinnedLine,header:!0,onClick:()=>{}}),v.forEach((e,t)=>{(t>0||g&&n.pinnedLine)&&k.push({label:"—",onClick:()=>{}}),k.push(...e)}),k}export{d as createNodeClipboard,v as nodeMenuItems};

package/dist/panel/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { W as WordFit } from '../wordFit-9B9nqyf3.js';
-export { a as SETTINGS_BUCKETS, S as SettingsBucket } from '../buckets-1vRlQceY.js';
+export { a as SETTINGS_BUCKETS, S as SettingsBucket } from '../buckets-CuLM47h9.js';
 
 /**
  * The settings-panel primitives — the shared grammar BOTH editors' inspector
@@ -110,7 +110,7 @@ type SettingsSegmentedFit = WordFit;
  *
  * Written down so the next reader does not find this unused and tidy it away.
  * The rows above stopped needing it while this was being built: card 66246
- * (`efficient-shop` 151afa212, merged 2026-08-31) moved the part panel's three
+ * (`efficient-storefront` 151afa212, merged 2026-08-31) moved the part panel's three
  * tables onto `icon` + a real word — `{ id: "left", label: "Left", icon:
  * <AlignLeftIcon/> }` — on the owner's ruling that an option says its name AND
  * draws its glyph. Every `label` in the shop is now a string, and this arm has
@@ -119,7 +119,7 @@ type SettingsSegmentedFit = WordFit;
  * It stays because it is the shape THE PACKAGE NEXT DOOR ALREADY USES.
  * `efficient-shell` ships its own `Segmented`, and its `SegmentedOption` has
  * carried `label: ReactNode` all along. Identical at the two copies installed on
- * this desk — 4.63.0 under `editor-shell`, 4.67.0 under `efficient-shop`:
+ * this desk — 4.63.0 under `editor-shell`, 4.67.0 under `efficient-storefront`:
  *
  *     interface SegmentedOption<T extends string = string> {
  *       value: T; label: ReactNode; icon?: ReactNode; disabled?: boolean;
@@ -150,7 +150,7 @@ type SettingsSegmentedFit = WordFit;
  * it — which is the one thing card 66303 was not allowed to do.
  *
  * `V` UNCONSTRAINED and not `T extends string`, because the shop stores a
- * choice as a boolean: `reverse` at `efficient-shop/lib/puck/config.tsx:6747` is
+ * choice as a boolean: `reverse` at `efficient-storefront/lib/puck/config.tsx:6747` is
  * `false` = image left and `true` = image right on every published page across
  * every tenant. `T extends string` cannot hold it, and giving that row the house
  * strip by storing "left"/"right" would be a migration of live customer data
@@ -236,7 +236,7 @@ type SettingsSegmentedOption<V = string> = SettingsSegmentedOptionBase<V> & Sett
  * `SettingsTabs` is a TABLIST: its chips switch a panel, which is what
  * `role="tab"` promises. These chips switch nothing. They write a value and the
  * panel stays where it is, so they are pressed buttons in a group, and the
- * marker is `aria-pressed` — the same one `efficient-shop`'s own `Segmented`
+ * marker is `aria-pressed` — the same one `efficient-storefront`'s own `Segmented`
  * has carried since the 2026-08-06 audit.
  *
  * NOT `radiogroup` / `aria-checked`, and the reason is the keyboard rather than
@@ -616,7 +616,7 @@ interface SettingsActionBaseProps {
  * you must pass an `id`.
  *
  * ⚠️ THIS IS THE REASON THE CONTROL IS HERE RATHER THAN IN THE SHOP.
- * `efficient-shop`'s own `components/AddChildRow.tsx` explains its disabled
+ * `efficient-storefront`'s own `components/AddChildRow.tsx` explains its disabled
  * button with a `title`, and a `title` on a DISABLED button reaches no screen
  * reader and no keyboard — the tooltip needs a hover the control no longer
  * answers. That hole cannot be patched from the shop's side while the shop draws
@@ -740,7 +740,7 @@ declare function SettingsTabs({ items, activeId, onSelect, ariaLabel, className,
  *
  * ── WHAT CARD 66303 WIDENED, AND WHY IT HAD TO BE HERE ───────────────────────
  *
- * `efficient-shop` draws its own `Segmented` beside this one and could not stop:
+ * `efficient-storefront` draws its own `Segmented` beside this one and could not stop:
  * four things twelve live call sites need were missing here. Generic `V`
  * (weights are numbers, "image side" is a boolean on every published page), a
  * DRAWN label with its own `title`, and `disabled` — on one option or on the
@@ -811,7 +811,7 @@ declare function SettingsGroupHead({ title, level, id, className, }: SettingsGro
  * above them rather than parts of it.
  *
  * THE SHOP ALREADY DREW THIS LOOK, TWICE, WHICH IS WHY IT BELONGS HERE.
- * `efficient-shop` hand-rolled `.sf-field-group` in the settings panel and
+ * `efficient-storefront` hand-rolled `.sf-field-group` in the settings panel and
  * `.sf-group-label` in the Layers tree, and they are the same type to the
  * decimal — 10.5px / 600 / .07em / muted / uppercase. One look, hand-rolled in
  * two panels of one editor, is the definition of a thing the shell should own.
@@ -937,7 +937,7 @@ declare function SettingsDrill({ name, preview, offPage, status, onOpen, id, cla
  *
  * ── WHY IT IS HERE NOW, AND WHY IT WAS NOT BEFORE ───────────────────────────
  *
- * It lived in `efficient-shop` as `FocalPicker`, and its own comment recorded
+ * It lived in `efficient-storefront` as `FocalPicker`, and its own comment recorded
  * the rule for moving it: card 66189 said *"the day a second section wants it,
  * that is the card that promotes it"*. Card 66214 was that second caller and
  * deliberately declined — the control was days old and had already changed
@@ -1073,7 +1073,7 @@ declare function SettingsCorners({ label, value, corners, onChange, id, classNam
  *
  * ── AND THE NOTE IS WHY IT IS HERE RATHER THAN IN THE SHOP ──────────────────
  *
- * `note` is wired to the button by `aria-describedby`. `efficient-shop`'s own
+ * `note` is wired to the button by `aria-describedby`. `efficient-storefront`'s own
  * `components/AddChildRow.tsx` explains its disabled button with a `title`, and
  * a `title` on a disabled button reaches no screen reader and no keyboard — the
  * tooltip wants a hover the control has stopped answering. The shop cannot patch

package/dist/panel/panel.css

@@ -7,13 +7,15 @@
  * dark mode.
  *
  * Two details are deliberate and were decided by measurement, not taste:
- *   · rows sit 38px apart while a label sits 11px from its own control, so a
+ *   · rows sit 32px apart while a label sits 12px from its own control, so a
  *     setting reads as ONE thing with air around it. That inside gap is the
  *     ONLY thing saying which label owns which control, and the two are a
  *     RATIO rather than a pair of numbers: measured at 28 and 7 (card 8802.d,
- *     approved from mockups/8802e-settings-spacing-mockup.html) and re-scaled
- *     together to 38 and 11 (card 66301), which keeps the gap between settings
- *     3.5x the gap inside one;
+ *     approved from mockups/8802e-settings-spacing-mockup.html), re-scaled
+ *     together to 38 and 11 (card 66301, 3.5x), and moved onto the ONE
+ *     spacing scale as 32 and 12 (owner ruling 2026-10-02). The rule that
+ *     survives every re-scale: the gap between settings stays at least TWICE
+ *     the gap inside one. On the scale it is 8:3, about 2.7x;
  *   · the label is small and grey, the value is larger and dark. Before that
  *     contrast existed, a merchant could not tell a name from a number.
  */
@@ -85,7 +87,7 @@
    the storefront's Layers tree needs in order to "follow the shell's spacing"
    is the RHYTHM — 38 between two settings against 11 inside one. Under the floor
    those were bare literals, so the only way to follow them was to COPY them
-   into `efficient-shop/components/storefront-editor.css`: a second source of
+   into `efficient-storefront/components/storefront-editor.css`: a second source of
    truth for numbers this sheet was already the source of.
 
    THE VALUES DID NOT CHANGE WHEN THEY WERE NAMED. Every one was the number
@@ -121,25 +123,32 @@
    shell.css 67/67 custom, panel.css 11/11, menu.css 7/7 — zero paint in all
    three. ⚠️ Nothing enforces it. If you are adding a declaration here, you are
    the check. */
+/* ON THE ONE SCALE (owner ruling 2026-10-02). Lewis ruled six spacing steps
+   for every panel — 2 / 4 / 8 / 12 / 16 / 32, declared once in `shell.css` as
+   `--es-space-*` — and no seventh. So every number below now READS a step
+   instead of holding its own: the floor and "a heading to its first row" are
+   12 (his "between rows under one heading"), every gap between two settings,
+   one-line rows included, is 32, and the gap inside a setting is 12. The notes
+   above say how the old numbers were reached; these are the numbers now. */
 .es-editor {
   /* THE FLOOR (card 66206) — no row-to-row gap on this panel resolves below it. */
-  --es-row-gap: 20px;
+  --es-row-gap: var(--es-space-12);
 
   /* THE RHYTHMS. All five are declared in THIS rule and not a second
      `.es-editor` block: the panel has ONE root, and a second block would put
      half the panel's spacing somewhere a reader — and the spec, which reads the
      root by selector — would not look. */
   /* between one group heading and whatever is above it */
-  --es-rhythm-group: 48px;
+  --es-rhythm-group: var(--es-space-32);
   /* between a group heading and the first setting under it — closer, because
      that setting belongs to that heading */
-  --es-rhythm-group-first: 24px;
+  --es-rhythm-group-first: var(--es-space-12);
   /* BETWEEN two settings */
-  --es-rhythm-between: 38px;
+  --es-rhythm-between: var(--es-space-32);
   /* between two one-line rows, which are one line tall and need less air */
-  --es-rhythm-between-tight: 26px;
+  --es-rhythm-between-tight: var(--es-space-32);
   /* WITHIN one setting: its label to its own control */
-  --es-rhythm-within: 11px;
+  --es-rhythm-within: var(--es-space-12);
 
   /* ── THE CHIP'S OWN METRICS (card 66248) ───────────────────────────────────
 
@@ -160,9 +169,9 @@
      cannot be named here is the width of a WORD — see `.es-segs` below. */
   --es-chip-pad-x: 8px;
   --es-chip-icon: 16px;
-  --es-chip-icon-gap: 6px;
-  --es-track-pad: 3px;
-  --es-track-gap: 3px;
+  --es-chip-icon-gap: 4px;
+  --es-track-pad: 2px;
+  --es-track-gap: 2px;
 }
 
 /* ── the tab strip: a segmented control ────────────────────────────────────── */
@@ -292,7 +301,7 @@
   border: 0;
   background: transparent;
   border-radius: 6px;
-  padding: 6px var(--es-chip-pad-x);
+  padding: 4px var(--es-chip-pad-x);
   font: inherit;
   font-size: 12px;
   font-weight: 600;
@@ -381,7 +390,7 @@
 .es-tab-badge {
   min-width: 16px;
   height: 16px;
-  padding: 0 5px;
+  padding: 0 4px;
   border-radius: 999px;
   background: var(--es-accent);
   color: var(--es-on-accent);
@@ -738,7 +747,7 @@
   color: var(--es-text);
   background: var(--es-hover);
   border-radius: var(--es-row-radius);
-  padding: 8px 11px;
+  padding: 8px 12px;
   /* A heading needs more air above it than the settings it heads have between
      them (38px), or it reads as one more row. Floored on `--es-row-gap` so it
      rises with the rest of the panel (card 66203). */
@@ -755,7 +764,7 @@
    "these lines, I still find them annoying to look at".
 
    THE TYPE IS NOT INVENTED HERE. It is `.sf-field-group` and `.sf-group-label`
-   from `efficient-shop`, which are the same look to the decimal, hand-rolled in
+   from `efficient-storefront`, which are the same look to the decimal, hand-rolled in
    two panels of one editor. Owning it here is what stops a third copy.
 
    FLUSH, not inset. `.es-field` has no horizontal padding, so a heading that
@@ -794,7 +803,7 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
 .es-group-count {
   min-width: 16px;
   height: 16px;
-  padding: 0 5px;
+  padding: 0 4px;
   border-radius: 999px;
   background: var(--es-accent);
   color: var(--es-on-accent);
@@ -903,7 +912,7 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
 }
 
 .es-field-hint {
-  margin: 7px 0 0;
+  margin: 8px 0 0;
   padding-left: 24px;
   font-size: 11px;
   line-height: 1.45;
@@ -1022,7 +1031,7 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
   border: 0;
   text-align: left;
   font: inherit;
@@ -1062,7 +1071,7 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
      something each row owns on its own side. So the gap stays padding — it just reads the token now, which is the whole point: before
      this, raising the panel's rhythm moved every other row and left the drill
      list exactly where it was. */
-  padding: var(--es-row-gap) 11px;
+  padding: var(--es-row-gap) 12px;
   cursor: pointer;
   transition: background 0.12s;
 }
@@ -1148,7 +1157,7 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
    cropped picture stays in view, and where on the thing behind it a block sits.
    Both are one of nine positions, and both want the corner PRESSED.
 
-   Promoted out of efficient-shop (`.sf-focal`) the day its own rule fired —
+   Promoted out of efficient-storefront (`.sf-focal`) the day its own rule fired —
    card 66189 wrote "the day a second section wants it, that is the card that
    promotes it"; 66214 declined it early and said why; the sections that hold
    boxes take it past six callers. The values below are the shop's, token for
@@ -1366,7 +1375,7 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
   align-items: center;
   justify-content: center;
   gap: 8px;
-  padding: 10px 11px;
+  padding: 12px;
   border: 1px solid var(--es-btn-border);
   border-radius: var(--es-row-radius);
   background: var(--es-field-bg);
@@ -1431,7 +1440,7 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
    the button, and wrapped — this is a clause, not a name, the same split
    `.es-field-hint` makes. */
 .es-action-note {
-  margin: 6px 0 0;
+  margin: 8px 0 0;
   font-size: 11px;
   line-height: 1.4;
   color: var(--es-muted);

package/dist/pick/pick.css

@@ -10,7 +10,7 @@
   --es-pick-readout-w: 80px;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
 }
 .es-pick-colour-row {
   display: flex;
@@ -50,7 +50,7 @@
   box-sizing: border-box;
   width: var(--es-pick-readout-w);
   min-width: 0;
-  padding: 4px 6px;
+  padding: 4px 8px;
   border: 1px solid transparent;
   border-radius: 6px;
   background: transparent;
@@ -69,7 +69,7 @@
 .es-pick-caption {
   box-sizing: border-box;
   width: var(--es-pick-readout-w);
-  padding: 0 7px;
+  padding: 0 8px;
   font-size: 12px;
   color: var(--es-muted);
 }
@@ -78,8 +78,8 @@
 .es-pick-window {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  padding: 10px;
+  gap: 12px;
+  padding: 12px;
   border: 1px solid var(--es-divider);
   border-radius: 10px;
   background: var(--es-panel);
@@ -87,7 +87,7 @@
 .es-pick-theme {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 8px;
 }
 .es-pick-theme-swatch {
   width: 22px;
@@ -181,7 +181,7 @@
   margin: 0;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
 }
 .es-pick-image-frame {
   height: 96px;
@@ -208,7 +208,7 @@
   gap: 8px;
 }
 .es-pick-image-btn {
-  padding: 5px 10px;
+  padding: 4px 12px;
   border: 1px solid var(--es-input-border);
   border-radius: 6px;
   background: var(--es-panel);

package/dist/rail/index.d.ts

@@ -59,7 +59,7 @@ declare function EditorRailButton({ label, worded, icon, active, disabled, onSel
  * Rail design tokens — the ONE source both apps' rails converge on.
  *
  * Every value below is taken verbatim from the storefront editor's rail
- * (`efficient-shop` → `storefront-editor.css`, the `.sf-rail` / `.sf-rail-btn`
+ * (`efficient-storefront` → `storefront-editor.css`, the `.sf-rail` / `.sf-rail-btn`
  * rules), which is the visual reference. The admin portal's hand-rolled rail had
  * drifted (button 36 vs 34, icon 20 vs 18, radius 8 vs 9, a Tailwind accent
  * instead of a CSS var); these tokens end that drift.
@@ -91,7 +91,7 @@ declare const railTokens: {
     /** A worded row button (`TopBarRail`): its side padding, the gap between the
      *  icon and its word, and the word's type. */
     readonly wordPaddingX: 8;
-    readonly wordGap: 6;
+    readonly wordGap: 8;
     readonly wordFontSize: 12;
     readonly wordFontWeight: 500;
     /** Hover/active colour transition. */

package/dist/rail/index.js

@@ -1 +1 @@
-import"../chunk-OWBO4WKA.js";export{EditorRail,EditorRailButton,railCssVars,railTokens}from"../chunk-YIMRTIBN.js";import"../chunk-2OAZYSWJ.js";import"../chunk-BZ5ASXOL.js";export{AddIcon,LayersIcon,MediaIcon,PageIcon as PagesIcon,SitemapIcon,StylesIcon}from"../chunk-YNZZYHA4.js";
+import"../chunk-OWBO4WKA.js";export{EditorRail,EditorRailButton,railCssVars,railTokens}from"../chunk-IBOFSS56.js";import"../chunk-2OAZYSWJ.js";import"../chunk-BZ5ASXOL.js";export{AddIcon,LayersIcon,MediaIcon,PageIcon as PagesIcon,SitemapIcon,StylesIcon}from"../chunk-PI26YXYD.js";

package/dist/rail/rail.css

@@ -21,7 +21,7 @@
   --es-rail-btn-radius: 9px;
   --es-rail-icon-size: 18px;
   --es-rail-word-pad-x: 8px;
-  --es-rail-word-gap: 6px;
+  --es-rail-word-gap: 8px;
   --es-rail-word-size: 12px;
   --es-rail-word-weight: 500;
   --es-rail-bg: #ffffff;