efficient-easel 0.97.0 → 0.98.0

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;

package/dist/render/index.d.ts

@@ -6,7 +6,7 @@ import { B as BlockShape, D as Data } from '../types-41704JE4.js';
  *
  * Step 1.2 of the engine that replaces Puck (blueprint "Puck From The Ground
  * Up For Efficient Editor", 2026-09-29). The published storefront draws every
- * page through Puck's `<Render>` today (efficient-shop `lib/puck/render-client.tsx`
+ * page through Puck's `<Render>` today (efficient-storefront `lib/puck/render-client.tsx`
  * and `components/PublishedFooter.tsx`); this is the drop-in for it: the same
  * config, the same document, THE SAME HTML — `tests/render-puck-parity.test.tsx`
  * renders both and compares the markup byte for byte.

package/dist/shell/index.d.ts

@@ -5,7 +5,7 @@
  * 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-shop/components/storefront-editor.css`), the visual reference the
+ * (`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
@@ -131,8 +131,22 @@ declare const shellTokens: {
     readonly rowRadius: 8;
     /** `--es-field-radius`. */
     readonly fieldRadius: 6;
-    /** `--es-panel-gap` — inter-pane gutter + outer frame padding, ONE token. */
-    readonly panelGap: 10;
+    /** `--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;
+    /** `--es-space-2` — between the buttons of one group (B · I · U · S). */
+    readonly space2: 2;
+    /** `--es-space-4` — a sub-name to its control; between the cells of one group. */
+    readonly space4: 4;
+    /** `--es-space-8` — between the layers of ONE setting (bar → box → Show marks). */
+    readonly space8: 8;
+    /** `--es-space-12` — between rows under one heading; inside one setting;
+     *  the panel's padding when it is narrower than 260px. */
+    readonly space12: 12;
+    /** `--es-space-16` — the panel's own padding. */
+    readonly space16: 16;
+    /** `--es-space-32` — between two settings. */
+    readonly space32: 32;
     /** `--es-panel-shadow`. */
     readonly panelShadow: "0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06)";
     /** `--es-topbar-shadow`. */
@@ -148,6 +162,12 @@ declare const shellTokens: {
     readonly font: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif";
 };
 type ShellTokens = typeof shellTokens;
+/**
+ * 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.
+ * A seventh step is a new ruling, not a new entry.
+ */
+declare const SPACING_SCALE: readonly [2, 4, 8, 12, 16, 32];
 /**
  * The CSS custom-property name behind each `shellTokens` key. `shell.css` sets
  * these on `.es-editor`; override any of them on (or above) the editor root to
@@ -156,4 +176,4 @@ type ShellTokens = typeof shellTokens;
  */
 declare const shellCssVars: Record<keyof ShellTokens, string>;
 
-export { type ShellTokens, shellCssVars, shellTokens };
+export { SPACING_SCALE, type ShellTokens, shellCssVars, shellTokens };

package/dist/shell/index.js

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

package/dist/shell/shell.css

@@ -34,7 +34,7 @@
  * Audited 2026-09-02 across every sheet here that opens an `.es-editor` block,
  * and the honest number is zero:
  *
- *     shell.css   67 declarations, 67 custom, 0 paint
+ *     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
  *
@@ -110,7 +110,17 @@
   --es-panel-radius: 12px;
   --es-row-radius: 8px;
   --es-field-radius: 6px;
-  --es-panel-gap: 10px;
+  --es-panel-gap: 12px;
+
+  /* — spacing: ONE scale for every panel (owner ruling, 2026-10-02) —
+     Six steps and no seventh. Every margin, padding and gap in this package
+     is one of them; `tests/spacing-scale.test.ts` holds every sheet to it. */
+  --es-space-2: 2px;
+  --es-space-4: 4px;
+  --es-space-8: 8px;
+  --es-space-12: 12px;
+  --es-space-16: 16px;
+  --es-space-32: 32px;
 
   /* — shadows — */
   --es-panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06);

package/dist/strings/catalogue.d.ts

@@ -1,15 +1,15 @@
-import { S as SaveWords } from '../words-CsRWXkY4.js';
+import { S as SaveWords } from '../words-Cqmyey0s.js';
 import { N as NoticeWords, C as ChromeWords } from '../words-DagJdwIA.js';
-import { C as CopyWords } from '../words-DfxEp_RH.js';
+import { C as CopyWords } from '../words-bOMsUJk9.js';
 import { D as DragWords } from '../words-D9ChvbNC.js';
 import { LockWords } from '../edit-lock/index.js';
 import { F as FieldsWords } from '../words-CD3WADyb.js';
 import { N as NodeMenuWords } from '../words-DOhF-4D4.js';
-import { S as SettingsBucket } from '../buckets-1vRlQceY.js';
+import { S as SettingsBucket } from '../buckets-CuLM47h9.js';
 import { P as PickWords } from '../words-B87GIFWH.js';
 import { S as StyleClipboardWords } from '../words-B2YLaKEr.js';
 import { T as TreeWords } from '../words-BK-npta-.js';
-import '../types-CuNiSnX6.js';
+import '../types-CnRzp9oc.js';
 import '../types-DNrn_w4V.js';
 import '../wordFit-9B9nqyf3.js';
 import 'react';

package/dist/strings/index.d.ts

@@ -3,18 +3,18 @@ export { CanvasWords, DEFAULT_EDITOR_STRINGS, PanelWords, RailWords, mergeEditor
 import * as react from 'react';
 import { ReactNode } from 'react';
 export { C as ChromeWords, N as NoticeWords } from '../words-DagJdwIA.js';
-export { C as CopyWords } from '../words-DfxEp_RH.js';
+export { C as CopyWords } from '../words-bOMsUJk9.js';
 export { D as DragWords } from '../words-D9ChvbNC.js';
 export { F as FieldsWords } from '../words-CD3WADyb.js';
 export { LockWords } from '../edit-lock/index.js';
 export { N as NodeMenuWords } from '../words-DOhF-4D4.js';
 export { P as PickWords } from '../words-B87GIFWH.js';
-export { S as SaveWords } from '../words-CsRWXkY4.js';
+export { S as SaveWords } from '../words-Cqmyey0s.js';
 export { S as StyleClipboardWords } from '../words-B2YLaKEr.js';
 export { T as TreeWords } from '../words-BK-npta-.js';
-import '../buckets-1vRlQceY.js';
+import '../buckets-CuLM47h9.js';
 import '../markup/index.js';
-import '../types-CuNiSnX6.js';
+import '../types-CnRzp9oc.js';
 import '../types-DNrn_w4V.js';
 import '../wordFit-9B9nqyf3.js';
 

package/dist/style-clipboard/index.js

@@ -1 +1 @@
-import{DEFAULT_STYLE_CLIPBOARD_WORDS as t}from"../chunk-6WY6ZXJG.js";import{CopyStyleIcon as e,PasteStyleIcon as n}from"../chunk-YNZZYHA4.js";import{jsx as o}from"react/jsx-runtime";var r="__styleKind";function u(t,e){return t[r]=e,t}function c(t,e){return`${t}:${e.map(t=>String(t)).sort().join("|")}`}function i(t){if(!t)return null;const e=t.indexOf(":");if(e<0)return null;const n=t.slice(0,e);return s.has(n)?{control:n,values:t.slice(e+1).split("|")}:null}var s=/* @__PURE__ */new Set(["choice","select","radio"]);function l(t){if(!t||"object"!=typeof t)return null;const e=t;return"string"==typeof e[r]?e[r]:"text"===e.type||"textarea"===e.type||"number"===e.type?e.type:"select"!==e.type&&"radio"!==e.type||!Array.isArray(e.options)?null:c(e.type,e.options.map(t=>t?.value))}function a(t){return null!=t&&""!==t}function p(t,e){let n=t;for(const t of e){if(!n||"object"!=typeof n)return;n=n[t]}return n}function f(t){return void 0===t?t:JSON.parse(JSON.stringify(t))}function d(t,e,n){const[o,...r]=e,u={...t};if(0===r.length)return void 0===n?delete u[o]:u[o]=n,u;const c=u[o],i=d(c&&"object"==typeof c?c:{},r,n);return 0===Object.keys(i).length?delete u[o]:u[o]=i,u}var y=t=>t.join("."),h="editor-shell:style-clipboard",g=null,m=!1,v=/* @__PURE__ */new Set;function S(){try{return"undefined"==typeof sessionStorage?null:sessionStorage}catch{return null}}function b(){if(!m){m=!0;try{const t=S()?.getItem(h);t&&(g=JSON.parse(t))}catch{g=null}}}function k(t){b(),g={scope:t.scope,sourceType:t.type,sourceLabel:t.label,rows:t.rows.map(e=>{const n=p(t.props,e.path);return{path:[...e.path],kind:e.kind,counted:!1!==e.counted,value:a(n)?f(n):void 0}})};try{S()?.setItem(h,JSON.stringify(g))}catch{}return v.forEach(t=>t()),g}function N(t){return b(),g&&g.scope===t?g:null}function j(t){return v.add(t),()=>{v.delete(t)}}function C(){g=null,m=!0;try{S()?.removeItem(h)}catch{}v.forEach(t=>t())}function w(t,e,n){if(t.kind===e.kind)return null!==e.kind||n;const o=i(t.kind),r=i(e.kind);return!(!o||!r||o.control!==r.control)&&(!a(t.value)||r.values.includes(String(t.value)))}function O(t,e){const n=t.sourceType===e.type,o=new Map(t.rows.map(t=>[y(t.path),t]));let r=e.props,u=0,c=!1;for(const t of e.rows){const e=o.get(y(t.path));if(!e)continue;if(!w(e,t,n))continue;const i=p(r,t.path),s=void 0===e.value?void 0:f(e.value);JSON.stringify(a(i)?i:void 0)!==JSON.stringify(s)&&(r=d(r,t.path,s),c=!0),!1!==t.counted&&(u+=1)}return{props:r,pasted:u,changed:c}}function E(e,n,o,r=t){return 0===e.pasted?r.nothing({source:n,target:o}):r.pasted({count:e.pasted,source:n})}var J="⌥⌘C",K="⌥⌘V";function T(r){const u=r.words??t,c=[];return r.canCopy&&c.push({label:u.copy,icon:/* @__PURE__ */o(e,{}),shortcut:"⌥⌘C",onClick:r.onCopy}),r.held&&c.push({label:u.paste({source:r.held.sourceLabel}),icon:/* @__PURE__ */o(n,{}),shortcut:"⌥⌘V",onClick:r.onPaste}),c}function x(t){if(!t.altKey||t.shiftKey||!t.metaKey&&!t.ctrlKey)return null;const e=t.target;return e&&(e.isContentEditable||"INPUT"===e.tagName||"TEXTAREA"===e.tagName||"SELECT"===e.tagName)?null:"KeyC"===t.code?"copy":"KeyV"===t.code?"paste":null}export{J as COPY_STYLE_SHORTCUT,K as PASTE_STYLE_SHORTCUT,r as STYLE_KIND,c as choiceKind,C as clearStyle,k as copyStyle,l as fieldKind,N as heldStyle,E as pasteMessage,O as planPaste,T as styleMenuItems,x as styleShortcut,j as subscribeStyle,u as withStyleKind};
+import{DEFAULT_STYLE_CLIPBOARD_WORDS as t}from"../chunk-6WY6ZXJG.js";import{CopyStyleIcon as e,PasteStyleIcon as n}from"../chunk-PI26YXYD.js";import{jsx as o}from"react/jsx-runtime";var r="__styleKind";function u(t,e){return t[r]=e,t}function c(t,e){return`${t}:${e.map(t=>String(t)).sort().join("|")}`}function i(t){if(!t)return null;const e=t.indexOf(":");if(e<0)return null;const n=t.slice(0,e);return s.has(n)?{control:n,values:t.slice(e+1).split("|")}:null}var s=/* @__PURE__ */new Set(["choice","select","radio"]);function l(t){if(!t||"object"!=typeof t)return null;const e=t;return"string"==typeof e[r]?e[r]:"text"===e.type||"textarea"===e.type||"number"===e.type?e.type:"select"!==e.type&&"radio"!==e.type||!Array.isArray(e.options)?null:c(e.type,e.options.map(t=>t?.value))}function a(t){return null!=t&&""!==t}function p(t,e){let n=t;for(const t of e){if(!n||"object"!=typeof n)return;n=n[t]}return n}function f(t){return void 0===t?t:JSON.parse(JSON.stringify(t))}function d(t,e,n){const[o,...r]=e,u={...t};if(0===r.length)return void 0===n?delete u[o]:u[o]=n,u;const c=u[o],i=d(c&&"object"==typeof c?c:{},r,n);return 0===Object.keys(i).length?delete u[o]:u[o]=i,u}var y=t=>t.join("."),h="editor-shell:style-clipboard",g=null,m=!1,v=/* @__PURE__ */new Set;function S(){try{return"undefined"==typeof sessionStorage?null:sessionStorage}catch{return null}}function b(){if(!m){m=!0;try{const t=S()?.getItem(h);t&&(g=JSON.parse(t))}catch{g=null}}}function k(t){b(),g={scope:t.scope,sourceType:t.type,sourceLabel:t.label,rows:t.rows.map(e=>{const n=p(t.props,e.path);return{path:[...e.path],kind:e.kind,counted:!1!==e.counted,value:a(n)?f(n):void 0}})};try{S()?.setItem(h,JSON.stringify(g))}catch{}return v.forEach(t=>t()),g}function N(t){return b(),g&&g.scope===t?g:null}function j(t){return v.add(t),()=>{v.delete(t)}}function C(){g=null,m=!0;try{S()?.removeItem(h)}catch{}v.forEach(t=>t())}function w(t,e,n){if(t.kind===e.kind)return null!==e.kind||n;const o=i(t.kind),r=i(e.kind);return!(!o||!r||o.control!==r.control)&&(!a(t.value)||r.values.includes(String(t.value)))}function O(t,e){const n=t.sourceType===e.type,o=new Map(t.rows.map(t=>[y(t.path),t]));let r=e.props,u=0,c=!1;for(const t of e.rows){const e=o.get(y(t.path));if(!e)continue;if(!w(e,t,n))continue;const i=p(r,t.path),s=void 0===e.value?void 0:f(e.value);JSON.stringify(a(i)?i:void 0)!==JSON.stringify(s)&&(r=d(r,t.path,s),c=!0),!1!==t.counted&&(u+=1)}return{props:r,pasted:u,changed:c}}function E(e,n,o,r=t){return 0===e.pasted?r.nothing({source:n,target:o}):r.pasted({count:e.pasted,source:n})}var J="⌥⌘C",K="⌥⌘V";function T(r){const u=r.words??t,c=[];return r.canCopy&&c.push({label:u.copy,icon:/* @__PURE__ */o(e,{}),shortcut:"⌥⌘C",onClick:r.onCopy}),r.held&&c.push({label:u.paste({source:r.held.sourceLabel}),icon:/* @__PURE__ */o(n,{}),shortcut:"⌥⌘V",onClick:r.onPaste}),c}function x(t){if(!t.altKey||t.shiftKey||!t.metaKey&&!t.ctrlKey)return null;const e=t.target;return e&&(e.isContentEditable||"INPUT"===e.tagName||"TEXTAREA"===e.tagName||"SELECT"===e.tagName)?null:"KeyC"===t.code?"copy":"KeyV"===t.code?"paste":null}export{J as COPY_STYLE_SHORTCUT,K as PASTE_STYLE_SHORTCUT,r as STYLE_KIND,c as choiceKind,C as clearStyle,k as copyStyle,l as fieldKind,N as heldStyle,E as pasteMessage,O as planPaste,T as styleMenuItems,x as styleShortcut,j as subscribeStyle,u as withStyleKind};

package/dist/tree/index.d.ts

@@ -143,7 +143,7 @@ declare const TREE_DRAG_HINT: string;
 /**
  * ONE row, at every depth (the owner's "One Ladder", 2026-09-04).
  *
- * Lifted from the website editor's `.sf-row` (efficient-shop). Left to right:
+ * Lifted from the website editor's `.sf-row` (efficient-storefront). Left to right:
  * the drag handle (out of flow, in the row's left padding), the caret — or a
  * spacer holding its column open, so every glyph below lines up whether its row
  * folds or not — the type glyph, then the name box. The actions are laid over

package/dist/tree/index.js

@@ -1 +1 @@
-export{LayersTree,Subtree,TREE_DRAG_HINT,TreeGroupLabel,TreeRow,TreeRowAction,TreeSeam}from"../chunk-STFMZJKU.js";import"../chunk-H4B72XCJ.js";import"../chunk-YNZZYHA4.js";
+export{LayersTree,Subtree,TREE_DRAG_HINT,TreeGroupLabel,TreeRow,TreeRowAction,TreeSeam}from"../chunk-66CKSTXP.js";import"../chunk-H4B72XCJ.js";import"../chunk-PI26YXYD.js";

package/dist/tree/tree.css

@@ -1,7 +1,7 @@
 /*
  * efficient-easel/tree.css — the Layers tree: one row shape at every depth.
  *
- * EVERY VALUE HERE WAS READ OFF `efficient-shop/components/storefront-editor.css`
+ * EVERY VALUE HERE WAS READ OFF `efficient-storefront/components/storefront-editor.css`
  * on origin/main (release 14.24.0, 2026-09-17), where the website editor drew
  * the tree as `.sf-tree` / `.sf-row` / `.sf-subtree` / `.sf-group-label` (the
  * owner's "One Ladder", 2026-09-04). Its `--sf-*` tokens alias the `--es-*`
@@ -17,13 +17,13 @@
   /* LEFT 8 — the inset a rounded row needs. RIGHT 11 — the room a real,
      space-taking 11px scrollbar takes, so nothing at a row's end sits under
      the thumb. Words inside start on one 11px column down the panel. */
-  padding: 0 11px 10px 8px;
+  padding: 0 12px 12px 8px;
   /* THE TREE'S RHYTHM, under the shell's names, at the tree's own density: the
      owner picked 10 between groups and 6 between rows by eye (2026-08-31). They
      are declared HERE, not on the editor root, so the settings panel beside the
      tree keeps its own values for the same names. */
-  --es-rhythm-group: 10px;
-  --es-rhythm-between: 6px;
+  --es-rhythm-group: 12px;
+  --es-rhythm-between: 8px;
 }
 /* Every seam the tree stacks, spelled out: labels and subtrees interleave with
    rows, and a rule that knew only rows would leave those seams to chance. */
@@ -38,7 +38,7 @@
   letter-spacing: 0.07em;
   text-transform: uppercase;
   color: var(--es-muted);
-  padding: var(--es-rhythm-group) 11px var(--es-rhythm-between);
+  padding: var(--es-rhythm-group) 12px var(--es-rhythm-between);
 }
 
 /* THE ONLY THING IN THE TREE THAT SAYS DEPTH: 16px of indent and a hairline
@@ -46,7 +46,7 @@
    rows outside, so the ladder reads as one list at several depths. */
 .es-subtree {
   margin: var(--es-rhythm-between) 0 var(--es-rhythm-between) 16px;
-  padding-left: 9px;
+  padding-left: 8px;
   border-left: 1px solid var(--es-line);
   display: flex;
   flex-direction: column;
@@ -57,7 +57,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 7px 11px;
+  padding: 8px 12px;
   border-radius: var(--es-row-radius);
   cursor: pointer;
   transition: background 0.12s;
@@ -158,7 +158,7 @@
    STOCK NOW" — quieter than the name, and the first thing to be cut when the
    panel is narrow (it sits inside the name's own ellipsis). */
 .es-tree-preview {
-  margin-left: 6px;
+  margin-left: 8px;
   font-weight: 400;
   color: var(--es-muted);
 }
@@ -337,7 +337,7 @@
   min-width: 0;
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   cursor: pointer;
   border-radius: 4px;
 }
@@ -371,7 +371,7 @@
   color: var(--es-muted);
   background: var(--es-chip-bg);
   border-radius: 4px;
-  padding: 1px 4px;
+  padding: 2px 4px;
 }
 .es-tree-trailing {
   flex: none;
@@ -490,7 +490,7 @@
   left: 24px;
   top: calc(100% + 4px);
   z-index: 5;
-  padding: 3px 7px;
+  padding: 4px 8px;
   border-radius: 6px;
   background: var(--es-toast-bg);
   color: var(--es-on-accent);

package/dist/{types-CEqUFH2j.d.ts → types-C7HFvdtk.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { S as SettingsBucket } from './buckets-1vRlQceY.js';
+import { S as SettingsBucket } from './buckets-CuLM47h9.js';
 
 /** What every control shares: an id for its label, a name for screen readers, and a read-only switch. */
 interface ControlBase {
@@ -22,13 +22,35 @@ interface FieldNumberProps extends ControlBase {
     onChange: (value: number | undefined) => void;
     min?: number;
     max?: number;
+    /** What an arrow or ↑↓ moves by. Default 1. */
     step?: number;
-    /** Shown after the box, e.g. `px`. */
+    /** What Shift + an arrow or ↑↓ moves by. Default ten steps. */
+    shiftStep?: number;
+    /**
+     * The style's number. While the value is `undefined` it shows in the box,
+     * grey, and a step starts from it; a typed value beats it until cleared.
+     */
+    styleValue?: number;
+    /** Drawn first in the cell, e.g. the font-size glyph. */
+    icon?: ReactNode;
+    /** Shown after the number, inside the cell, e.g. `px`. */
     unit?: string;
-    /** − and + beside the box. */
+    /** Two small stacked arrows at the cell's end. */
     steppers?: boolean;
     placeholder?: string;
 }
+/**
+ * A slider row (Site styles, Email styles): the name left and the typed value
+ * right on one line, the slider under them. `sliderMin` / `sliderMax` are the
+ * slider's travel only; a typed value may go past them, held only by `min` /
+ * `max`.
+ */
+interface FieldSliderProps extends Omit<FieldNumberProps, 'icon' | 'steppers' | 'placeholder' | 'ariaLabel' | 'ariaLabelledBy'> {
+    /** The row's name; it labels both the value and the slider. */
+    label: string;
+    sliderMin: number;
+    sliderMax: number;
+}
 interface FieldOption<V = unknown> {
     label: string;
     value: V;
@@ -126,4 +148,4 @@ type FieldRenderer = (props: {
     readOnly?: boolean;
 }) => ReactNode;
 
-export type { ArrayFieldDef as A, CustomFieldDef as C, FieldRenderer as F, InspectorFields as I, NumberFieldDef as N, ObjectFieldDef as O, RadioFieldDef as R, SelectFieldDef as S, TextFieldDef as T, InspectorFieldDef as a, FieldTextProps as b, FieldNumberProps as c, FieldSelectProps as d, FieldOption as e, CustomFieldRenderProps as f, SlotFieldDef as g, TextareaFieldDef as h };
+export type { ArrayFieldDef as A, CustomFieldDef as C, FieldRenderer as F, InspectorFields as I, NumberFieldDef as N, ObjectFieldDef as O, RadioFieldDef as R, SelectFieldDef as S, TextFieldDef as T, InspectorFieldDef as a, FieldTextProps as b, FieldNumberProps as c, FieldSliderProps as d, FieldSelectProps as e, FieldOption as f, CustomFieldRenderProps as g, SlotFieldDef as h, TextareaFieldDef as i };

package/dist/{types-CuNiSnX6.d.ts → types-CnRzp9oc.d.ts}

@@ -5,7 +5,7 @@ import { EditAccess, SaveConflict } from './edit-lock/index.js';
 /**
  * The side-panel widths every editor opens on and drags between (px).
  *
- * Lifted from `efficient-shop/components/panel-widths.ts`, where the website
+ * Lifted from `efficient-storefront/components/panel-widths.ts`, where the website
  * editor measured them:
  *
  *   RIGHT is 320, not 308 (card 8810). At 308 the settings tab strip was left

package/dist/{words-CsRWXkY4.d.ts → words-Cqmyey0s.d.ts}

@@ -1,4 +1,4 @@
-import { S as SaveTone } from './types-CuNiSnX6.js';
+import { S as SaveTone } from './types-CnRzp9oc.js';
 
 /** Time and timers, passed in so a test can run minutes in a millisecond. */
 type AutosaveClock = {
@@ -76,7 +76,7 @@ declare function createAutosave<T>(options?: AutosaveOptions<T>): Autosave<T>;
  *
  * There were three: the campaign designer's `saveStatusLabel`
  * (efficient-admin-portal `src/components/email/autosaveStatus.ts`), the
- * website editor's `autosaveStatusLabel` (efficient-shop
+ * website editor's `autosaveStatusLabel` (efficient-storefront
  * `lib/editor/autosave-status.ts`, which said of the first "a MIRRORED copy …
  * whether that pair should collapse into `efficient-easel` is called out
  * rather than decided here") and the website chrome's own words for its

package/dist/{words-DfxEp_RH.d.ts → words-bOMsUJk9.d.ts}

@@ -61,7 +61,7 @@ declare const COPY_ALIGN_GLYPHS: Record<CopyAlign, ReactNode>;
  * An over-estimate is safe (the words drop a little early); an under-estimate
  * draws a button past the strip's edge.
  *
- * THREE is measured, not guessed — `efficient-shop/components/PartSettingsPanel`
+ * THREE is measured, not guessed — `efficient-storefront/components/PartSettingsPanel`
  * had this exact pair as its own `ALIGN_FIT`, produced by
  * `tests/fixtures/segmented-fit.html`. It moves here so the one alignment strip
  * carries its own measurement, and that constant is deleted when the panel

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "efficient-easel",
-  "version": "0.97.0",
+  "version": "0.98.0",
   "description": "Efficient Easel: the EFFICIENT editors' shared engine and chrome: the saved document as pure functions, the published renderer, and the editor frame, panels, Layers tree, text grammar and type-in-place box. Published as editor-shell up to 0.66.0 and as efficient-editor up to 0.95.0.",
   "license": "UNLICENSED",
   "author": "Efficient Pty Ltd",

package/dist/chunk-FI23ALVJ.js

@@ -1 +0,0 @@
-var e={accent:"#2563eb",accentTint:"#eff6ff",accentTintStrong:"#dbeafe",accentLine:"#bfdbfe",accentText:"#1d4ed8",accentRing:"rgba(37, 99, 235, 0.25)",accentShadow:"rgba(37, 99, 235, 0.35)",onAccent:"#ffffff",appBg:"#f9fafb",previewBg:"#f3f4f6",panel:"#ffffff",raised:"#ffffff",topbarBg:"#ffffff",frameBg:"#ffffff",hover:"#f3f4f6",hatch:"rgba(0, 0, 0, 0.018)",addcardVeil:"rgba(248, 249, 250, 0.66)",fieldBg:"#ffffff",trackBg:"#f3f4f6",inputBorder:"#d1d5db",fieldText:"#1f2937",fieldPlaceholder:"#9ca3af",knob:"#ffffff",text:"#111827",textStrong:"#030712",textSecondary:"#374151",muted:"#6b7280",icon:"#6b7280",disabled:"#9ca3af",divider:"#e5e7eb",line:"#e5e7eb",btnBorder:"#d1d5db",btnText:"#374151",chipBg:"#f3f4f6",chipFg:"#6b7280",brandSquare:"#111827",deviceBorder:"#e5e7eb",toastBg:"#111827",toggleOff:"#d1d5db",scrollbar:"#d1d5db",scrollbarHover:"#9ca3af",danger:"#dc2626",dangerStrong:"#b91c1c",dangerTint:"#fef2f2",warning:"#b45309",previewTint:"#fef3c7",success:"#15803d",panelRadius:12,rowRadius:8,fieldRadius:6,panelGap:10,panelShadow:"0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06)",topbarShadow:"0 1px 3px rgba(0, 0, 0, 0.06)",raisedShadow:"0 1px 2px rgba(16, 24, 40, 0.1)",font:'-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'},a={accent:"--es-accent",accentTint:"--es-accent-tint",accentTintStrong:"--es-accent-tint-strong",accentLine:"--es-accent-line",accentText:"--es-accent-text",accentRing:"--es-accent-ring",accentShadow:"--es-accent-shadow",onAccent:"--es-on-accent",appBg:"--es-app-bg",previewBg:"--es-preview-bg",panel:"--es-panel",raised:"--es-raised",topbarBg:"--es-topbar-bg",frameBg:"--es-frame-bg",hover:"--es-hover",hatch:"--es-hatch",addcardVeil:"--es-addcard-veil",fieldBg:"--es-field-bg",trackBg:"--es-track-bg",inputBorder:"--es-input-border",fieldText:"--es-field-text",fieldPlaceholder:"--es-field-placeholder",knob:"--es-knob",text:"--es-text",textStrong:"--es-text-strong",textSecondary:"--es-text-secondary",muted:"--es-muted",icon:"--es-icon",disabled:"--es-disabled",divider:"--es-divider",line:"--es-line",btnBorder:"--es-btn-border",btnText:"--es-btn-text",chipBg:"--es-chip-bg",chipFg:"--es-chip-fg",brandSquare:"--es-brand-square",deviceBorder:"--es-device-border",toastBg:"--es-toast-bg",toggleOff:"--es-toggle-off",scrollbar:"--es-scrollbar",scrollbarHover:"--es-scrollbar-hover",danger:"--es-danger",dangerStrong:"--es-danger-strong",dangerTint:"--es-danger-tint",warning:"--es-warning",previewTint:"--es-preview-tint",success:"--es-success",panelRadius:"--es-panel-radius",rowRadius:"--es-row-radius",fieldRadius:"--es-field-radius",panelGap:"--es-panel-gap",panelShadow:"--es-panel-shadow",topbarShadow:"--es-topbar-shadow",raisedShadow:"--es-raised-shadow",font:"--es-font"};export{a as shellCssVars,e as shellTokens};