efficient-easel 0.0.0 → 0.96.0

package/dist/pick/index.d.ts

@@ -0,0 +1,153 @@
+import * as react from 'react';
+import { P as PickWords } from '../words-B87GIFWH.js';
+
+/** One colour the site's theme names — offered first, by name. */
+type ThemeColour = {
+    name: string;
+    value: string;
+};
+type ColourPickerProps = {
+    /** The colour, `#rrggbb` — or `''` while the setting has none of its own. */
+    value: string;
+    /** Live, as the colour moves — the same `#rrggbb` from every way in. */
+    onChange: (next: string) => void;
+    /** The row's name: the swatch is "<label>", the hex box "<label> hex code". */
+    label: string;
+    /** The theme's colours, offered first in the window. */
+    theme?: readonly ThemeColour[];
+    /**
+     * A WORD the row prints in place of the hex. While `value` is `''` it names
+     * the empty state ("Not set" by default). Given WITH a colour, it names the
+     * state that colour is in — "Auto" for an ink that follows its fill, "Accent"
+     * for a button on the theme's colour: the swatch shows the colour the page
+     * really has, the row prints the word, and the hex is in the window. A
+     * caption that IS the value's hex is no word, and the row's hex box stays.
+     */
+    caption?: string;
+    /** The swatch's DOM id, for a row whose own `<label for>` points at it. */
+    id?: string;
+    readOnly?: boolean;
+    /**
+     * The picker's own words in the host's language:
+     * `useEditorStrings().pick.colour` (0.95.0). Left out, English. A prop, not
+     * the strings provider: the pickers import nothing outside their folder.
+     */
+    words?: PickWords['colour'];
+};
+/**
+ * ONE COLOUR ROW (blueprint step 4.6): a swatch and its hex, and — pressing
+ * the swatch — a small window under the row with the theme's colours, a
+ * saturation-and-brightness square, a hue strip and the hex again.
+ *
+ * ⚠️ NEVER THE SYSTEM COLOUR DIALOG. `<input type="color">` opens a different
+ * window on every browser and operating system, with none of the site's theme
+ * colours in it, and it is the one control in the panel a merchant cannot see
+ * the inside of before pressing it. Everything here is drawn by this package.
+ *
+ * THE WINDOW OPENS IN THE PANEL'S OWN FLOW, under the row, not floating over
+ * it: a settings panel scrolls, and a floating window is clipped by the edge it
+ * scrolls under — and it would sit outside the `--es-*` token root a panel
+ * provides (see the context menu, which has to carry that root itself).
+ *
+ * The hex box is always a box you can type into — pasting a brand colour
+ * costs no clicks — live on the keystroke that makes it a colour, and put back
+ * to what is stored on Enter, Escape or leaving it.
+ */
+declare function ColourPicker({ value, onChange, label, theme, caption, id: swatchId, readOnly, words, }: ColourPickerProps): react.JSX.Element;
+
+type ImageBoxProps = {
+    /** The file's URL, or `''` while the setting has none. */
+    value: string;
+    onChange: (url: string) => void;
+    /** The setting's name — "Background image", "Logo image". */
+    label: string;
+    /**
+     * How THIS APP opens its media library: resolves to the URL chosen, or
+     * `null` when the person closes it without choosing. The admin opens its
+     * media window, the shop asks the admin to, a test resolves a string — the
+     * box does not know or care. Absent: the box shows the picture but offers no
+     * way to change it.
+     */
+    openLibrary?: () => Promise<string | null>;
+    kind?: 'image' | 'video';
+    /** What the empty box says. Default "Choose an image" / "Choose a video". */
+    placeholder?: string;
+    readOnly?: boolean;
+    /**
+     * The box's own words in the host's language:
+     * `useEditorStrings().pick.image` (0.95.0). Left out, English. A prop, not
+     * the strings provider: the pickers import nothing outside their folder.
+     */
+    words?: PickWords['image'];
+};
+/**
+ * ONE IMAGE BOX (blueprint step 4.6): the picture, its file name under it,
+ * and Replace and Remove — or, empty, one press that opens the library.
+ *
+ * The library is the APP's. Every editor opens a different one — the admin's
+ * media window with its product and storefront tabs, the shop's ask to the
+ * admin, a future host's own — so the box is handed `openLibrary` and opens
+ * nothing itself, never a native file dialog.
+ *
+ * The file name sits UNDER the picture, not on it: a small crop of a photo is
+ * often not enough to tell two similar shots apart, and a caption laid over the
+ * picture covers the part it was meant to identify.
+ */
+declare function ImageBox({ value, onChange, label, openLibrary, kind, placeholder, readOnly, words, }: ImageBoxProps): react.JSX.Element;
+
+/**
+ * The colour maths the picker runs on — pure, no React, no DOM.
+ *
+ * A colour is stored as `#rrggbb`, lower case, everywhere a document holds one;
+ * the picker WORKS in HSV (hue, saturation, value), because that is what a
+ * square and a hue strip are a picture of. These turn one into the other.
+ *
+ * ⚠️ HSV FROM A HEX LOSES THE HUE OF A GREY. `#808080` has no hue, so converting
+ * it back gives hue 0 — red — and a merchant who drags the square down to grey
+ * would find the strip jumped to red. The picker therefore keeps its own HSV
+ * while it is open and only reads one back from the stored hex when the value
+ * changes from OUTSIDE (see `ColourPicker`).
+ */
+type Hsv = {
+    h: number;
+    s: number;
+    v: number;
+};
+/** The most a hex box takes: `#` and six digits. */
+declare const HEX_MAX_LENGTH = 7;
+/**
+ * What a typed string is as a colour — `#rrggbb` — or `null` while it is not
+ * one yet. Accepts three or six digits, with or without `#`, any case.
+ */
+declare function typedHex(text: string): string | null;
+/** A stored hex as a person reads it: upper case. */
+declare const hexReadout: (hex: string) => string;
+/** `#rrggbb` → HSV (h 0–360, s and v 0–1). A string that is not a colour reads as black. */
+declare function hexToHsv(hex: string): Hsv;
+/** HSV → `#rrggbb`. Out-of-range input is clamped, never thrown. */
+declare function hsvToHex({ h, s, v }: Hsv): string;
+/**
+ * A point in the saturation/brightness square → s and v. Saturation runs left
+ * to right, brightness bottom to top; a point outside the square is held to
+ * its edge, so a drag that leaves it keeps working.
+ */
+declare function svFromPoint(x: number, y: number, box: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}): {
+    s: number;
+    v: number;
+};
+/** A point along the hue strip → a hue, 0–360, held to the strip's ends. */
+declare function hueFromPoint(x: number, box: {
+    left: number;
+    width: number;
+}): number;
+/** The last segment of a media URL, decoded and without its query — what a
+ *  merchant recognises a file by. An inline `data:` or `blob:` URL has no file
+ *  name, so it reads as none rather than as its own bytes. */
+declare function mediaName(url: string): string;
+
+export { ColourPicker, type ColourPickerProps, HEX_MAX_LENGTH, type Hsv, ImageBox, type ImageBoxProps, PickWords, type ThemeColour, hexReadout, hexToHsv, hsvToHex, hueFromPoint, mediaName, svFromPoint, typedHex };

package/dist/pick/index.js

@@ -0,0 +1,14 @@
+import{DEFAULT_PICK_WORDS as e}from"../chunk-ZAOM6PFH.js";import{useId as a,useState as t,useRef as n,useEffect as l}from"react";import{jsxs as r,jsx as i}from"react/jsx-runtime";var s=/^(?:[0-9a-f]{3}|[0-9a-f]{6})$/i,o=7;function c(e){const a=e.trim().replace(/^#/,"");if(!s.test(a))return null;return`#${(3===a.length?[...a].map(e=>e+e).join(""):a).toLowerCase()}`}var u=e=>e.toUpperCase(),h=(e,a,t)=>Math.min(t,Math.max(a,e));function m(e){const a=c(e)??"#000000",t=parseInt(a.slice(1,3),16)/255,n=parseInt(a.slice(3,5),16)/255,l=parseInt(a.slice(5,7),16)/255,r=Math.max(t,n,l),i=r-Math.min(t,n,l);let s=0;return 0!==i&&(s=r===t?(n-l)/i%6*60:r===n?60*((l-t)/i+2):60*((t-n)/i+4)),{h:(s+360)%360,s:0===r?0:i/r,v:r}}function d({h:e,s:a,v:t}){const n=(e%360+360)%360,l=h(a,0,1),r=h(t,0,1),i=r*l,s=i*(1-Math.abs(n/60%2-1)),o=r-i,[c,u,m]=n<60?[i,s,0]:n<120?[s,i,0]:n<180?[0,i,s]:n<240?[0,s,i]:n<300?[s,0,i]:[i,0,s],d=e=>Math.round(255*(e+o)).toString(16).padStart(2,"0");return`#${d(c)}${d(u)}${d(m)}`}function p(e,a,t){return{s:t.width>0?h((e-t.left)/t.width,0,1):0,v:t.height>0?1-h((a-t.top)/t.height,0,1):0}}function v(e,a){return a.width>0?360*h((e-a.left)/a.width,0,1):0}function g(e){if(/^(data|blob):/i.test(e))return"";const a=(e.split(/[?#]/)[0]??"").split("/").filter(Boolean).pop()??"";try{return decodeURIComponent(a)}catch{return a}}function b({value:s,onChange:o,label:h,theme:g,caption:b,id:f,readOnly:y,words:w=e.colour}){const N=a(),[x,C]=t(!1),M=n(null),D=n(null),[A,I]=t(()=>m(s||"#000000")),$=n(s);l(()=>{s!==$.current&&($.current=s,s&&I(m(s)))},[s]);const L=e=>{y||e===s||($.current=e,o(e))},O=e=>{I(m(e)),L(e)},E=e=>{I(e),L(d(e))};l(()=>{if(!x)return;const e=M.current?.ownerDocument;if(!e)return;const a=e=>{M.current&&!M.current.contains(e.target)&&C(!1)};return e.addEventListener("click",a,!0),()=>e.removeEventListener("click",a,!0)},[x]);const K=e=>({onPointerDown:a=>{y||(a.currentTarget.setPointerCapture?.(a.pointerId),e(a))},onPointerMove:a=>{1&a.buttons&&e(a)}}),P=K(e=>E({...A,...p(e.clientX,e.clientY,e.currentTarget.getBoundingClientRect())})),T=K(e=>E({...A,h:v(e.clientX,e.currentTarget.getBoundingClientRect())})),B=e=>`${Math.round(100*e)}%`,R=void 0===b||s&&c(b)===c(s)?null:b,S=R??(s?u(s):w.notSet);/* @__PURE__ */
+return r("div",{ref:M,className:"es-pick-colour",children:[
+/* @__PURE__ */r("div",{className:"es-pick-colour-row",children:[
+/* @__PURE__ */i("button",{ref:D,id:f,type:"button",className:s?"es-pick-swatch":"es-pick-swatch is-unset",style:s?{background:s}:void 0,"aria-label":w.swatch({label:h,shown:S}),"aria-expanded":x,"aria-controls":x?N:void 0,disabled:y,onClick:()=>C(e=>!e)}),null===R?/* @__PURE__ */i(k,{value:s,onChange:O,name:w.hex({label:h}),readOnly:y}):/* @__PURE__ */i("span",{className:"es-pick-caption",children:R})]}),x?/* @__PURE__ */r("div",{id:N,role:"dialog","aria-label":w.dialog({label:h}),className:"es-pick-window",onKeyDown:e=>{"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),C(!1),D.current?.focus())},children:[g&&g.length>0?/* @__PURE__ */i("div",{role:"group","aria-label":w.theme,className:"es-pick-theme",children:g.map(e=>/* @__PURE__ */i("button",{type:"button",className:"es-pick-theme-swatch",style:{background:e.value},title:w.themeSwatchTitle({name:e.name,hex:u(e.value)}),"aria-label":w.themeSwatch({name:e.name,hex:u(e.value)}),"aria-pressed":c(e.value)===s,onClick:()=>O(c(e.value)??e.value)},`${e.name}:${e.value}`))}):null,
+/* @__PURE__ */i("div",{className:"es-pick-sv",role:"slider",tabIndex:0,"aria-label":w.square,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(100*A.v),"aria-valuetext":w.squareValue({saturation:B(A.s),brightness:B(A.v)}),style:{backgroundColor:d({h:A.h,s:1,v:1})},onKeyDown:e=>{const a=e.shiftKey?.1:.01,t={ArrowLeft:[-a,0],ArrowRight:[a,0],ArrowDown:[0,-a],ArrowUp:[0,a]}[e.key];t&&(e.preventDefault(),E({...A,s:Math.min(1,Math.max(0,A.s+t[0])),v:Math.min(1,Math.max(0,A.v+t[1]))}))},...P,children:/* @__PURE__ */i("span",{className:"es-pick-sv-thumb",style:{left:B(A.s),top:B(1-A.v)}})}),
+/* @__PURE__ */i("div",{className:"es-pick-hue",role:"slider",tabIndex:0,"aria-label":w.hue,"aria-valuemin":0,"aria-valuemax":359,"aria-valuenow":Math.round(A.h),onKeyDown:e=>{const a=e.shiftKey?10:1,t="ArrowLeft"===e.key||"ArrowDown"===e.key?-a:"ArrowRight"===e.key||"ArrowUp"===e.key?a:null,n="Home"===e.key?0:"End"===e.key?359:null===t?null:Math.min(359,Math.max(0,A.h+t));null!==n&&(e.preventDefault(),E({...A,h:n}))},...T,children:/* @__PURE__ */i("span",{className:"es-pick-hue-thumb",style:{left:A.h/360*100+"%"}})}),
+/* @__PURE__ */i(k,{value:s,onChange:O,name:w.hex({label:h}),readOnly:y})]}):null]})}function k({value:e,onChange:a,name:n,readOnly:l}){const[r,s]=t(null);/* @__PURE__ */
+return i("input",{type:"text",className:"es-pick-hex",value:r??(e?u(e):""),"aria-label":n,maxLength:7,spellCheck:!1,autoComplete:"off",readOnly:l,onChange:t=>{s(t.target.value);const n=c(t.target.value);null!==n&&n!==e&&a(n)},onFocus:e=>e.currentTarget.select(),onKeyDown:e=>{"Enter"!==e.key&&"Escape"!==e.key||(e.preventDefault(),e.stopPropagation(),s(null),e.currentTarget.blur())},onBlur:()=>s(null)})}function f({value:a,onChange:n,label:l,openLibrary:s,kind:o="image",placeholder:c,readOnly:u,words:h=e.image}){const[m,d]=t(!1),[p,v]=t(!1),b=Boolean(s)&&!u,k=async()=>{if(s&&!m&&!u){d(!0),v(!1);try{const e=await s();e&&n(e)}catch{v(!0)}finally{d(!1)}}},f=m?/* @__PURE__ */i("p",{className:"es-pick-image-status",role:"status",children:h.choosing}):p?/* @__PURE__ */i("p",{className:"es-pick-image-status is-error",role:"alert",children:h.failed}):null;if(!a)/* @__PURE__ */
+return r("div",{className:"es-pick-image",children:[
+/* @__PURE__ */r("button",{type:"button",className:"es-pick-image-slot",onClick:k,disabled:!b||m,"aria-label":h.empty({label:l,kind:o,placeholder:c}),children:[
+/* @__PURE__ */i("span",{className:"es-pick-image-slot-name",children:c??("video"===o?h.chooseVideo:h.chooseImage)}),b?/* @__PURE__ */i("span",{className:"es-pick-image-slot-hint",children:h.hint}):null]}),f]});const y=g(a),w=y?h.named({label:l,name:y}):l;/* @__PURE__ */
+return r("div",{className:"es-pick-image",children:[
+/* @__PURE__ */r("figure",{className:"es-pick-image-figure",children:[
+/* @__PURE__ */i("div",{className:"es-pick-image-frame",children:"video"===o?/* @__PURE__ */i("video",{src:a,muted:!0,playsInline:!0,preload:"metadata","aria-label":w}):/* @__PURE__ */i("img",{src:a,alt:w})}),y?/* @__PURE__ */i("figcaption",{className:"es-pick-image-name",title:y,children:y}):null]}),b||!u?/* @__PURE__ */r("div",{className:"es-pick-image-actions",children:[b?/* @__PURE__ */i("button",{type:"button",className:"es-pick-image-btn",onClick:k,disabled:m,"aria-label":h.replaceNamed({label:l}),children:h.replace}):null,u?null:/* @__PURE__ */i("button",{type:"button",className:"es-pick-image-btn is-bare",onClick:()=>n(""),disabled:m,"aria-label":h.removeNamed({label:l}),children:h.remove})]}):null,f]})}export{b as ColourPicker,o as HEX_MAX_LENGTH,f as ImageBox,u as hexReadout,m as hexToHsv,d as hsvToHex,v as hueFromPoint,g as mediaName,p as svFromPoint,c as typedHex};

package/dist/pick/pick.css

@@ -0,0 +1,235 @@
+/* efficient-easel/pick — the colour row and its window, and the image box
+   (blueprint step 4.6). Drawn on the panel's own tokens, so both editors'
+   panels get the same picker without a line of their own CSS. */
+
+/* ── The colour row ─────────────────────────────────────────────────────── */
+.es-pick-colour {
+  /* The hex box and the word that stands in for it ("Auto", "Not set") are
+     ONE width. A row is right-aligned as a unit, so a word narrower than a hex
+     pushes its swatch out of line down a column of colour rows. */
+  --es-pick-readout-w: 80px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.es-pick-colour-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+/* 26 × 26, no border, 7px corner — the look the owner settled for every
+   colour row (2026-09-04). A hairline ring inside, so a white swatch on a
+   white panel still has an edge. */
+.es-pick-swatch {
+  flex: none;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 7px;
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
+  cursor: pointer;
+}
+.es-pick-swatch.is-unset {
+  background:
+    linear-gradient(135deg, transparent 46%, var(--es-danger) 46%, var(--es-danger) 54%, transparent 54%),
+    var(--es-panel);
+  box-shadow: inset 0 0 0 1px var(--es-input-border);
+}
+.es-pick-swatch:focus-visible,
+.es-pick-theme-swatch:focus-visible,
+.es-pick-sv:focus-visible,
+.es-pick-hue:focus-visible {
+  outline: 2px solid var(--es-accent);
+  outline-offset: 2px;
+}
+.es-pick-swatch:disabled {
+  cursor: default;
+}
+.es-pick-hex {
+  box-sizing: border-box;
+  width: var(--es-pick-readout-w);
+  min-width: 0;
+  padding: 4px 6px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--es-text);
+  font: 500 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
+  letter-spacing: 0.02em;
+}
+.es-pick-hex:hover {
+  border-color: var(--es-input-border);
+}
+.es-pick-hex:focus {
+  outline: none;
+  border-color: var(--es-accent);
+  background: var(--es-panel);
+}
+.es-pick-caption {
+  box-sizing: border-box;
+  width: var(--es-pick-readout-w);
+  padding: 0 7px;
+  font-size: 12px;
+  color: var(--es-muted);
+}
+
+/* ── The window under the row ───────────────────────────────────────────── */
+.es-pick-window {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+  border: 1px solid var(--es-divider);
+  border-radius: 10px;
+  background: var(--es-panel);
+}
+.es-pick-theme {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.es-pick-theme-swatch {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
+  cursor: pointer;
+}
+.es-pick-theme-swatch[aria-pressed='true'] {
+  box-shadow:
+    inset 0 0 0 1px rgb(0 0 0 / 0.1),
+    0 0 0 2px var(--es-panel),
+    0 0 0 4px var(--es-accent);
+}
+/* The square: the hue at full strength, washed to white left-to-right and to
+   black top-to-bottom — which is what saturation and brightness ARE. */
+.es-pick-sv {
+  position: relative;
+  height: 128px;
+  border-radius: 6px;
+  background-image:
+    linear-gradient(to top, #000, transparent),
+    linear-gradient(to right, #fff, transparent);
+  cursor: crosshair;
+  touch-action: none;
+}
+.es-pick-sv-thumb,
+.es-pick-hue-thumb {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+.es-pick-hue {
+  position: relative;
+  height: 12px;
+  border-radius: 6px;
+  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
+  cursor: pointer;
+  touch-action: none;
+}
+.es-pick-hue-thumb {
+  top: 50%;
+}
+
+/* ── The image box ──────────────────────────────────────────────────────── */
+.es-pick-image {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.es-pick-image-slot {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-height: 96px;
+  padding: 12px;
+  border: 1.5px dashed var(--es-input-border);
+  border-radius: 8px;
+  background: var(--es-app-bg);
+  color: var(--es-text);
+  font: inherit;
+  cursor: pointer;
+}
+.es-pick-image-slot:hover:not(:disabled),
+.es-pick-image-slot:focus-visible {
+  border-color: var(--es-accent);
+  background: var(--es-accent-tint);
+}
+.es-pick-image-slot:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+.es-pick-image-slot-name {
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.es-pick-image-slot-hint {
+  font-size: 11.5px;
+  color: var(--es-muted);
+}
+.es-pick-image-figure {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.es-pick-image-frame {
+  height: 96px;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--es-app-bg);
+}
+.es-pick-image-frame img,
+.es-pick-image-frame video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.es-pick-image-name {
+  overflow: hidden;
+  font-size: 11.5px;
+  color: var(--es-muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.es-pick-image-actions {
+  display: flex;
+  gap: 8px;
+}
+.es-pick-image-btn {
+  padding: 5px 10px;
+  border: 1px solid var(--es-input-border);
+  border-radius: 6px;
+  background: var(--es-panel);
+  color: var(--es-text);
+  font: 500 12px/1.3 var(--es-font);
+  cursor: pointer;
+}
+.es-pick-image-btn.is-bare {
+  border-color: transparent;
+  background: transparent;
+  color: var(--es-muted);
+}
+.es-pick-image-btn:hover:not(:disabled) {
+  border-color: var(--es-accent);
+  color: var(--es-text);
+}
+.es-pick-image-status {
+  margin: 0;
+  font-size: 11.5px;
+  color: var(--es-muted);
+}
+.es-pick-image-status.is-error {
+  color: var(--es-danger);
+}

package/dist/plan-DtNw2VuI.d.ts

@@ -0,0 +1,88 @@
+import { P as Place, D as Data, a as DataConfig, N as Node } from './types-DziKCwsN.js';
+
+/**
+ * Every node operation the two editors offer, as ONE pure step: a document in,
+ * the next document and what to select out.
+ *
+ * Why one step. On Puck, the editors built these out of several dispatches —
+ * the storefront's delete was three (remove, reset the inspector, clear the
+ * selection), its cross-slot move three undo steps, its paste two — and Puck's
+ * selection is a POSITION, so after a delete it quietly pointed at whatever slid
+ * into the gap. Here each operation is computed whole, on `efficient-easel/data`,
+ * and the host commits it in one write (see ./useNodeOps). One action, one undo.
+ *
+ * Selection is by ID (or a slot, for the campaign designer's columns), never by
+ * position: `select` is what to select afterwards, `undefined` means "leave it".
+ */
+
+/** What is selected: a node by id, a slot (a column) as a level of its own, or nothing. */
+type NodeSelection = {
+    kind: 'node';
+    id: string;
+} | {
+    kind: 'slot';
+    parentId: string;
+    slot: string;
+} | null;
+interface Planned {
+    data: Data;
+    /** What to select afterwards; `undefined` leaves the selection as it is. */
+    select: NodeSelection | undefined;
+}
+/** After a delete: select nothing (both editors' safe result today) or a neighbour. */
+type AfterRemove = 'none' | 'neighbour';
+/**
+ * Delete `id`. `'neighbour'` selects the next block in the same list, else the
+ * previous one, else the parent — never "whatever now sits at the old index".
+ */
+declare function planRemove(data: Data, config: DataConfig, id: string, after?: AfterRemove): Planned;
+/** Copy `id` to the place just after it, and select the copy. */
+declare function planDuplicate(data: Data, config: DataConfig, id: string, options?: {
+    strip?: (node: Node) => Node;
+    id?: string;
+}): Planned;
+/** Move `id` to `to` (same list or another slot) in ONE step, and select it there. */
+declare function planMove(data: Data, config: DataConfig, id: string, to: Place): Planned;
+/**
+ * The range a node may be stepped within its own list — `[min, max]` indexes.
+ * The default is the whole list; the campaign designer passes the body band
+ * between its pinned Header and Footer.
+ */
+type StepBounds = (place: Place, length: number) => {
+    min: number;
+    max: number;
+};
+/** Can `id` step one place up (-1) or down (+1) inside its bounds? */
+declare function canStep(data: Data, config: DataConfig, id: string, dir: -1 | 1, bounds?: StepBounds): boolean;
+/** Step `id` one place up or down; `null` when it cannot move that way. */
+declare function planStep(data: Data, config: DataConfig, id: string, dir: -1 | 1, bounds?: StepBounds): Planned | null;
+/**
+ * Put a copy of `node` (a clipboard's) at `at`, every node in it with a fresh
+ * id — so a clipboard pastes any number of times — and select it.
+ */
+declare function planPaste(data: Data, config: DataConfig, node: Node, at: Place, options?: {
+    strip?: (node: Node) => Node;
+}): Planned;
+/** Change props on `id` (hide, rename, anything) in one step; selection unchanged. */
+declare function planSetProps(data: Data, config: DataConfig, id: string, patch: Record<string, unknown>): Planned;
+/**
+ * The level above a selection — what "Go up one level" selects.
+ *
+ *   - a node in a slot: its parent, or — when `slotIsLevel` says that slot is a
+ *     level of its own (the campaign designer's columns, once a section has more
+ *     than one) — the slot;
+ *   - a slot: the node that owns it;
+ *   - a top-level node, or nothing selected: `null` (there is nothing above).
+ */
+declare function parentStep(data: Data, config: DataConfig, selection: NodeSelection, slotIsLevel?: (parent: Node, slot: string) => boolean): NodeSelection;
+/** A node by its place: the zone key `"<parentId>:<slot>"` and its index. */
+interface ItemSelector {
+    zone?: string;
+    index: number;
+}
+/** A node selection as Puck's `itemSelector`; `null` for nothing or a slot. */
+declare function toItemSelector(data: Data, config: DataConfig, selection: NodeSelection): ItemSelector | null;
+/** Puck's `itemSelector` as a node selection; `null` when it points at nothing. */
+declare function fromItemSelector(data: Data, config: DataConfig, selector: ItemSelector | null | undefined): NodeSelection;
+
+export { type AfterRemove as A, type ItemSelector as I, type NodeSelection as N, type Planned as P, type StepBounds as S, planDuplicate as a, planMove as b, canStep as c, planPaste as d, planRemove as e, fromItemSelector as f, planSetProps as g, planStep as h, parentStep as p, toItemSelector as t };

package/dist/rail/index.d.ts

@@ -0,0 +1,145 @@
+import * as react from 'react';
+import { c as EditorRailProps, E as EditorRailButtonProps } from '../types-DNrn_w4V.js';
+export { a as EditorRailItem, b as EditorRailOrientation } from '../types-DNrn_w4V.js';
+export { AddIcon, LayersIcon, MediaIcon, PageIcon as PagesIcon, IconProps as RailIconProps, SitemapIcon, StylesIcon } from '../icons/index.js';
+export { W as WordFit } from '../wordFit-9B9nqyf3.js';
+
+/**
+ * The shared icon-rail — one slim strip of icon buttons that every EFFICIENT
+ * editor uses to switch panels (Pages / Layers / Styles / Media / Sitemap) and
+ * to quick-add ("+"). By default it is the vertical strip down the left; pass
+ * `orientation="row"` and the same buttons lay into a top bar instead. It is a
+ * **pure presentational switcher**: give it `items[]`, it draws them; which one
+ * is `active` and what each does is the host's business.
+ *
+ * No `'use client'` here on purpose — the rail has no hooks or state, so it is a
+ * plain module a Next-16 server component can import and even statically render.
+ * It's interactive only through the `onSelect` props the host passes, and the
+ * host owns its client boundary (both editors' chrome are already client
+ * components), so baking a directive into this leaf would only narrow where it
+ * can be imported.
+ *
+ * A `toolbar` (not a `tablist`), because the rail mixes view *toggles* with
+ * plain *actions* like the quick-add — a toolbar of buttons models that
+ * honestly, where a tablist would force every button to pretend to be a tab.
+ * That is true in both directions, so `orientation` moves `aria-orientation`
+ * and leaves the role alone: what the rail IS did not change, only which way it
+ * runs — and a toolbar's arrow keys follow its orientation, so a row that kept
+ * saying `vertical` would describe the wrong keys.
+ *
+ * `orientation` defaults to `'column'`, and that path is byte-identical to what
+ * this component rendered before the prop existed: same class list, same
+ * attributes, same order. `'row'` adds ONE modifier class beside `es-rail` —
+ * never instead of it, since every button rule and token in rail.css hangs off
+ * the base class — and rail.css does the rest.
+ *
+ * `wordFit` (a row only) puts every button's word in the markup beside its
+ * glyph and hands the words' measured widths to the stylesheet, which shows
+ * all of them, only the active one, or none — by the width of the rail's
+ * column, the settings tabs' three states. Still no hooks: the measuring is
+ * `TopBarRail`'s, and the choosing is CSS's.
+ *
+ * ITS ONE WORD is the toolbar's name, `ariaLabel` (./words). The rail reads no
+ * strings provider — that would be a hook — so a host in another language
+ * passes `ariaLabel`; `TopBarRail` does it from the provider.
+ */
+declare function EditorRail({ items, ariaLabel, className, orientation, wordFit, }: EditorRailProps): react.JSX.Element;
+
+/**
+ * A single rail button: an icon in a 34×34 square that hovers, highlights when
+ * active, and dims when disabled. Look only — the caller owns the click.
+ *
+ * `aria-pressed` is emitted **only** when `active` is a real boolean, so a view
+ * toggle announces its pressed state while an action button (the quick-add "+",
+ * whose item omits `active`) stays a plain button rather than a stuck toggle.
+ */
+declare function EditorRailButton({ label, worded, icon, active, disabled, onSelect, className, }: EditorRailButtonProps): react.JSX.Element;
+
+/**
+ * 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`
+ * 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.
+ *
+ * Exposed BOTH ways, per the same value:
+ *   - `railTokens` — this JS object, for anything that needs the numbers/colours
+ *     in code (inline styles, a theme bridge, a Storybook control);
+ *   - `rail.css` — the stylesheet, which declares the identical values as CSS
+ *     custom properties on `.es-rail` (names listed in `railCssVars`).
+ *
+ * Numeric fields are pixel magnitudes (unitless) so they compose in code; the
+ * CSS applies the `px`.
+ */
+declare const railTokens: {
+    /** Rail column width. `--sf-rail-w: 46px`. */
+    readonly railWidth: 46;
+    /** Vertical padding inside the rail (top === bottom). */
+    readonly railPaddingY: 8;
+    /** Gap between buttons. */
+    readonly railGap: 4;
+    /** Rail card corner radius. `--sf-panel-radius: 12px`. */
+    readonly railRadius: 12;
+    /** Button hit-area (square). */
+    readonly buttonSize: 34;
+    /** Button corner radius. */
+    readonly buttonRadius: 9;
+    /** Icon glyph size. */
+    readonly iconSize: 18;
+    /** 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 wordFontSize: 12;
+    readonly wordFontWeight: 500;
+    /** Hover/active colour transition. */
+    readonly transition: "background 0.12s, color 0.12s";
+    /** Disabled-button opacity. */
+    readonly disabledOpacity: 0.35;
+    readonly color: {
+        /** Rail card background. `--sf-panel`. */
+        readonly background: "#ffffff";
+        /** Rail card shadow. `--sf-panel-shadow`. */
+        readonly shadow: "0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06)";
+        /** Idle icon colour. `--sf-muted` (gray-500). */
+        readonly idle: "#6b7280";
+        /** Hover background. `--sf-hover` (gray-100). */
+        readonly hoverBg: "#f3f4f6";
+        /** Hover icon colour. `--sf-text` (gray-900). */
+        readonly hoverFg: "#111827";
+        /** Active icon colour. `--sf-accent` (blue-600). */
+        readonly accent: "#2563eb";
+        /** Active background. `--sf-accent-tint` (blue-50). */
+        readonly accentTint: "#eff6ff";
+    };
+};
+type RailTokens = typeof railTokens;
+/**
+ * The CSS custom-property name behind each token. `rail.css` sets these on
+ * `.es-rail`; override any of them on (or above) the rail element to re-theme it
+ * — e.g. `style={{ ['--es-rail-accent']: brand }}` — without shipping new CSS.
+ */
+declare const railCssVars: {
+    readonly railWidth: "--es-rail-w";
+    readonly railPaddingY: "--es-rail-pad-y";
+    readonly railGap: "--es-rail-gap";
+    readonly railRadius: "--es-rail-radius";
+    readonly buttonSize: "--es-rail-btn-size";
+    readonly buttonRadius: "--es-rail-btn-radius";
+    readonly iconSize: "--es-rail-icon-size";
+    readonly wordPaddingX: "--es-rail-word-pad-x";
+    readonly wordGap: "--es-rail-word-gap";
+    readonly wordFontSize: "--es-rail-word-size";
+    readonly wordFontWeight: "--es-rail-word-weight";
+    readonly background: "--es-rail-bg";
+    readonly shadow: "--es-rail-shadow";
+    readonly idle: "--es-rail-fg";
+    readonly hoverBg: "--es-rail-hover-bg";
+    readonly hoverFg: "--es-rail-hover-fg";
+    readonly accent: "--es-rail-accent";
+    readonly accentTint: "--es-rail-accent-tint";
+};
+
+export { EditorRail, EditorRailButton, EditorRailButtonProps, EditorRailProps, type RailTokens, railCssVars, railTokens };

package/dist/rail/index.js

@@ -0,0 +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";