efficient-easel 0.106.0 → 1.0.0

package/dist/pick/index.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { P as PickWords } from '../words-is_Vy6hn.js';
+export { Hsv, hexToHsv, hsvToHex } from 'efficient-shell/ui';
 
 /** One colour the site's theme names — offered first, by name. */
 type ThemeColour = {
@@ -59,18 +60,31 @@ type ColourPickerProps = {
 };
 /**
  * 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
+ * the swatch — the shell's colour picker 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 inside of before pressing it.
  *
- * 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 SWATCH AND WHAT IT OPENS ARE THE SHELL'S (easel#199 step 4, harness
+ * UI-24): the shell's `Popover` holding its `ColorPickerPanel`, the trigger
+ * wearing `colorSwatchClasses` and painted with `colorFill` — exactly the
+ * shell `ColorPicker`'s own composition. Composed here rather than taken as
+ * `ColorPicker` for two things it cannot carry: the swatch's NAME is the row's
+ * (`words.swatch`, with the caption word — "Auto", "Accent" — where the row
+ * prints one, in the host's language), and the trigger keeps the
+ * `es-pick-swatch` / `is-inherited` / `is-unset` hooks hosts read.
+ *
+ * It FLOATS now, on the shell's popup layer. It opened in the panel's own flow
+ * because a floating window was clipped by the scrolling panel and sat outside
+ * the `--es-*` root; the shell's Popover is portalled to `<body>`, follows its
+ * trigger as the panel scrolls, keeps inside the shell window that owns it
+ * (UI-11), and draws on the shell's tokens, not `--es-*`. Placement, Escape
+ * (focus back on the swatch), Tab and a press outside are the Popover's — and
+ * since nothing in the panel moves when it closes, the press outside may close
+ * it on its pointerdown.
  *
  * 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
@@ -95,9 +109,9 @@ type ColourWindowProps = {
     value: string;
     /** Live, as the colour moves: one `#rrggbb` from every way in. */
     onChange: (next: string) => void;
-    /** The colour's name: the window is "<label> colour", its hex box "<label> hex code". */
+    /** The colour's name: it names the panel's hex box ("<label> hex code"). */
     label: string;
-    /** The theme's colours, offered first. */
+    /** The theme's colours, offered first — the shell panel's `presets`, each named by the theme. */
     theme?: readonly ThemeColour[];
     /** Escape in the window. The opener closes it and takes the focus back. */
     onClose?: () => void;
@@ -106,11 +120,16 @@ type ColourWindowProps = {
     /** The colour in force while `value` is `''` (see `ColourPicker`): the window starts from it, its hex a placeholder. */
     inherited?: string;
     readOnly?: boolean;
+    /**
+     * Accepted and unused since the window is the shell's: its words (the
+     * square, the strip, the hex box, the presets) are the shell's
+     * `useShellStrings().color`, translated through the host's
+     * `ShellStringsProvider`.
+     */
     words?: PickWords['colour'];
     /**
-     * Start the hex row with a swatch of the colour, as the text box's colour
-     * window draws it (E5b). Off by default: `ColourPicker`'s row already has its
-     * swatch beside the hex.
+     * Accepted and moot: the shell's panel always starts its hex row with a
+     * swatch of the colour (what the text box's window asked for, E5b).
      */
     swatch?: boolean;
     /**
@@ -123,13 +142,20 @@ type ColourWindowProps = {
     dragWrites?: 'live' | 'end';
 };
 /**
- * THE COLOUR WINDOW on its own: the theme's colours, the saturation and
- * brightness square, the hue strip and the hex. `ColourPicker` opens it under
- * its swatch; a row that draws its own swatches (the text-styles list's Any
- * color, plan step E6) opens the same one, so there is one window, not two.
- * The opener owns when it is open and puts it in the panel's own flow.
+ * THE COLOUR WINDOW on its own: the shell's `ColorPickerPanel` (easel#199
+ * step 4, harness UI-24) — the theme's colours as its presets, named by the
+ * theme, the saturation and brightness square, the hue strip and the hex.
+ * `ColourPicker` opens it in the shell's Popover; a row that draws its own
+ * swatches (the text-styles list's Any color, plan step E6) opens the same one
+ * in its own flow, so there is one window, not two.
+ *
+ * What it maps: `theme` → `presets` (`label` = the theme colour's name),
+ * `inherited` → `fallback` (the panel starts from it, its hex a placeholder,
+ * and nothing is written until something moves), `readOnly` → `disabled`.
+ * A pick EQUAL to the inherited colour still writes — it pins it — because the
+ * panel compares with `value`, not with what is shown.
  */
-declare function ColourWindow({ value, onChange, label, theme, onClose, id, inherited, readOnly, words, swatch, dragWrites, }: ColourWindowProps): react.JSX.Element;
+declare function ColourWindow({ value, onChange, label, theme, onClose, id, inherited, readOnly, words: _words, swatch: _swatch, dragWrites, }: ColourWindowProps): react.JSX.Element;
 
 type ImageBoxProps = {
     /** The file's URL, or `''` while the setting has none. */
@@ -182,26 +208,19 @@ declare function ImageBox({ value, onChange, label, openLibrary, kind, placehold
  * 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`).
+ * changes from OUTSIDE (the shell's `ColorPickerPanel`).
+ *
+ * What is still easel's own: the readout (`hexReadout`), the box's length, the
+ * point maths the shell keeps private (`svFromPoint`), `hueFromPoint` (which
+ * reaches 360 at the strip's end, where the shell's stops at 359) and
+ * `mediaName` — exported names hosts already import.
  */
-type Hsv = {
-    h: number;
-    s: number;
-    v: number;
-};
+
+declare const typedHex: (text: string) => string | null;
 /** 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
@@ -226,4 +245,4 @@ declare function hueFromPoint(x: number, box: {
  *  name, so it reads as none rather than as its own bytes. */
 declare function mediaName(url: string): string;
 
-export { ColourPicker, type ColourPickerProps, ColourWindow, type ColourWindowProps, HEX_MAX_LENGTH, type Hsv, ImageBox, type ImageBoxProps, PickWords, type ThemeColour, hexReadout, hexToHsv, hsvToHex, hueFromPoint, mediaName, svFromPoint, typedHex };
+export { ColourPicker, type ColourPickerProps, ColourWindow, type ColourWindowProps, HEX_MAX_LENGTH, ImageBox, type ImageBoxProps, PickWords, type ThemeColour, hexReadout, hueFromPoint, mediaName, svFromPoint, typedHex };

package/dist/pick/index.js

@@ -1,7 +1,7 @@
-import{mediaName as e}from"../chunk-H24N5TMZ.js";export{ColourPicker,ColourWindow,HEX_MAX_LENGTH,hexReadout,hexToHsv,hsvToHex,hueFromPoint,mediaName,svFromPoint,typedHex}from"../chunk-H24N5TMZ.js";import{DEFAULT_PICK_WORDS as a}from"../chunk-ZAOM6PFH.js";import{useState as i}from"react";import{jsx as l,jsxs as s}from"react/jsx-runtime";function c({value:c,onChange:n,label:o,openLibrary:r,kind:t="image",placeholder:m,readOnly:d,words:p=a.image}){const[u,h]=i(!1),[b,g]=i(!1),k=Boolean(r)&&!d,N=async()=>{if(r&&!u&&!d){h(!0),g(!1);try{const e=await r();e&&n(e)}catch{g(!0)}finally{h(!1)}}},f=u?/* @__PURE__ */l("p",{className:"es-pick-image-status",role:"status",children:p.choosing}):b?/* @__PURE__ */l("p",{className:"es-pick-image-status is-error",role:"alert",children:p.failed}):null;if(!c)/* @__PURE__ */
-return s("div",{className:"es-pick-image",children:[
-/* @__PURE__ */s("button",{type:"button",className:"es-pick-image-slot",onClick:N,disabled:!k||u,"aria-label":p.empty({label:o,kind:t,placeholder:m}),children:[
-/* @__PURE__ */l("span",{className:"es-pick-image-slot-name",children:m??("video"===t?p.chooseVideo:p.chooseImage)}),k?/* @__PURE__ */l("span",{className:"es-pick-image-slot-hint",children:p.hint}):null]}),f]});const v=e(c),y=v?p.named({label:o,name:v}):o;/* @__PURE__ */
-return s("div",{className:"es-pick-image",children:[
-/* @__PURE__ */s("figure",{className:"es-pick-image-figure",children:[
-/* @__PURE__ */l("div",{className:"es-pick-image-frame",children:"video"===t?/* @__PURE__ */l("video",{src:c,muted:!0,playsInline:!0,preload:"metadata","aria-label":y}):/* @__PURE__ */l("img",{src:c,alt:y})}),v?/* @__PURE__ */l("figcaption",{className:"es-pick-image-name",title:v,children:v}):null]}),k||!d?/* @__PURE__ */s("div",{className:"es-pick-image-actions",children:[k?/* @__PURE__ */l("button",{type:"button",className:"es-pick-image-btn",onClick:N,disabled:u,"aria-label":p.replaceNamed({label:o}),children:p.replace}):null,d?null:/* @__PURE__ */l("button",{type:"button",className:"es-pick-image-btn is-bare",onClick:()=>n(""),disabled:u,"aria-label":p.removeNamed({label:o}),children:p.remove})]}):null,f]})}export{c as ImageBox};
+import{mediaName as e}from"../chunk-FPAVNX3Y.js";export{ColourPicker,ColourWindow,HEX_MAX_LENGTH,hexReadout,hexToHsv,hsvToHex,hueFromPoint,mediaName,svFromPoint,typedHex}from"../chunk-FPAVNX3Y.js";import{DEFAULT_PICK_WORDS as a}from"../chunk-ZAOM6PFH.js";import{withTip as i}from"../chunk-P2VEMZH5.js";import{useState as l}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";function n({value:n,onChange:o,label:r,openLibrary:t,kind:m="image",placeholder:d,readOnly:p,words:u=a.image}){const[h,k]=l(!1),[b,g]=l(!1),N=Boolean(t)&&!p,f=async()=>{if(t&&!h&&!p){k(!0),g(!1);try{const e=await t();e&&o(e)}catch{g(!0)}finally{k(!1)}}},v=h?/* @__PURE__ */s("p",{className:"es-pick-image-status",role:"status",children:u.choosing}):b?/* @__PURE__ */s("p",{className:"es-pick-image-status is-error",role:"alert",children:u.failed}):null;if(!n)/* @__PURE__ */
+return c("div",{className:"es-pick-image",children:[
+/* @__PURE__ */c("button",{type:"button",className:"es-pick-image-slot",onClick:f,disabled:!N||h,"aria-label":u.empty({label:r,kind:m,placeholder:d}),children:[
+/* @__PURE__ */s("span",{className:"es-pick-image-slot-name",children:d??("video"===m?u.chooseVideo:u.chooseImage)}),N?/* @__PURE__ */s("span",{className:"es-pick-image-slot-hint",children:u.hint}):null]}),v]});const y=e(n),x=y?u.named({label:r,name:y}):r;/* @__PURE__ */
+return c("div",{className:"es-pick-image",children:[
+/* @__PURE__ */c("figure",{className:"es-pick-image-figure",children:[
+/* @__PURE__ */s("div",{className:"es-pick-image-frame",children:"video"===m?/* @__PURE__ */s("video",{src:n,muted:!0,playsInline:!0,preload:"metadata","aria-label":x}):/* @__PURE__ */s("img",{src:n,alt:x})}),y?i(y,/* @__PURE__ */s("figcaption",{className:"es-pick-image-name",children:y})):null]}),N||!p?/* @__PURE__ */c("div",{className:"es-pick-image-actions",children:[N?/* @__PURE__ */s("button",{type:"button",className:"es-pick-image-btn",onClick:f,disabled:h,"aria-label":u.replaceNamed({label:r}),children:u.replace}):null,p?null:/* @__PURE__ */s("button",{type:"button",className:"es-pick-image-btn is-bare",onClick:()=>o(""),disabled:h,"aria-label":u.removeNamed({label:r}),children:u.remove})]}):null,v]})}export{n as ImageBox};

package/dist/pick/pick.css

@@ -1,6 +1,9 @@
-/* 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. */
+/* efficient-easel/pick — the colour row 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 swatch and the window it opens
+   are efficient-shell's (`Popover`, `ColorPickerPanel`, `colorSwatchClasses`;
+   easel#199 step 4, harness UI-24) and draw from the shell's CSS: nothing
+   here styles them but where the swatch sits in the row. */
 
 /* ── The colour row ─────────────────────────────────────────────────────── */
 .es-pick-colour {
@@ -8,9 +11,6 @@
      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: 68px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
 }
 .es-pick-colour-row {
   /* The tag is placed against the row. */
@@ -19,35 +19,6 @@
   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;
-}
 /* THE HEX'S SLOT (Lewis 2026-10-07, option E): 68px, and down to 36px when
    the line is short of room — after the label has given way to its 56px. The
    hex or the word that stands in for it fills it. */
@@ -65,7 +36,7 @@
   min-width: 0;
   padding: 4px 8px;
   border: 1px solid transparent;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   background: transparent;
   color: var(--es-text);
   font: 500 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -141,9 +112,9 @@
   z-index: 3;
   transform: translateY(calc(-100% - 6px));
   padding: 4px 8px;
-  border-radius: 6px;
-  background: #111827;
-  color: #fff;
+  border-radius: var(--radius-md);
+  background: var(--es-toast-bg, var(--status-draft-solid));
+  color: var(--es-on-accent, var(--status-on-solid));
   font-size: 12px;
   font-weight: 500;
   line-height: 1.3;
@@ -151,10 +122,6 @@
   pointer-events: none;
   box-shadow: 0 4px 12px rgb(0 0 0 / 0.2);
 }
-/* `.es-pick-swatch.is-inherited` (no rule of its own): the swatch is painted
-   with the colour the setting follows, like any colour. The class is there
-   for a host that wants to mark it. */
-
 /* ── A line that holds the picker ───────────────────────────────────────── */
 /* BOTH EDITORS HOLD THE PICKER IN A LINE: `SettingsField`'s `action` slot
    (`.es-field-head`, this package's own class), or a colour SUB-row inside one
@@ -162,11 +129,10 @@
    Text), which is not a SettingsField and takes `.es-pick-line`: the host's
    label first, then the picker.
 
-   The picker's own box steps aside (`display: contents`), so its two halves
-   become items of that line: the swatch and hex at the line's end
-   (`margin-left: auto`), and the window wrapping onto a line of its own at the
-   FULL width. Left in the picker's box, the window opens in the few pixels the
-   action slot has.
+   The picker's own box steps aside (`display: contents`), so the swatch and
+   the hex become items of that line, at its end (`margin-left: auto`). The
+   window they open floats (the shell's Popover), so nothing here makes room
+   for it.
 
    Moved here from the storefront's stylesheet (2026-10-06), so the email does
    not copy it: one rule for both editors. The shop's `.sf-field--row` can move
@@ -183,10 +149,6 @@
   font-size: 12px;
   color: var(--es-text-secondary);
 }
-.es-field-head:has(> .es-pick-colour),
-.es-pick-line:has(> .es-pick-colour) {
-  flex-wrap: wrap;
-}
 .es-field-head > .es-pick-colour,
 .es-pick-line > .es-pick-colour {
   display: contents;
@@ -207,8 +169,8 @@
 .es-pick-line > .es-pick-colour > .es-pick-colour-row {
   display: contents;
 }
-.es-field-head > .es-pick-colour > .es-pick-colour-row > .es-pick-swatch,
-.es-pick-line > .es-pick-colour > .es-pick-colour-row > .es-pick-swatch {
+.es-field-head > .es-pick-colour > .es-pick-colour-row > .es-pick-swatch-wrap,
+.es-pick-line > .es-pick-colour > .es-pick-colour-row > .es-pick-swatch-wrap {
   margin-left: auto;
 }
 .es-field-head > .es-pick-colour > .es-pick-colour-row > .es-pick-hexwrap,
@@ -233,99 +195,6 @@
   -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
   mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
 }
-.es-field-head > .es-pick-colour > .es-pick-window,
-.es-pick-line > .es-pick-colour > .es-pick-window {
-  flex: 1 0 100%;
-  min-width: 0;
-  /* ⚠️ What a host puts AFTER the picker on the same line (the panel's
-     Default / Reset part, `SettingsDefaultReset`) comes after the window in
-     DOM order once the picker's box is `contents`, and the window's 100%
-     basis would push it onto a line of its own UNDER the open window. Ordered
-     last, the window keeps that control beside the swatch. */
-  order: 1;
-}
-
-/* ── The window under the row ───────────────────────────────────────────── */
-.es-pick-window {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 12px;
-  border: 1px solid var(--es-divider);
-  border-radius: 10px;
-  background: var(--es-panel);
-}
-/* ONE theme row, for the colour picker and the text box's colour window
-   (Lewis 2026-10-07). The swatches are one group: the scale's step for the
-   cells of one group. */
-.es-pick-theme {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-.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;
-}
-/* The chosen one: the ring INSIDE the swatch (Lewis 2026-10-07, option A) —
-   2px of accent, then 2px of panel before the colour. Outside, it touched the
-   next swatch. Focus is the outline, outside it, so both show at once. */
-.es-pick-theme-swatch[aria-pressed='true'] {
-  box-shadow: inset 0 0 0 2px var(--es-accent), inset 0 0 0 4px var(--es-panel);
-}
-/* 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 hex row with its swatch (ColourWindow `swatch`, the text box's colour
-   window): the colour, then the hex. */
-.es-pick-hex-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.es-pick-hex-swatch {
-  width: 26px;
-  height: 26px;
-  flex: none;
-  border-radius: 6px;
-  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
-}
 /* ── The image box ──────────────────────────────────────────────────────── */
 .es-pick-image {
   display: flex;
@@ -341,7 +210,7 @@
   min-height: 96px;
   padding: 12px;
   border: 1.5px dashed var(--es-input-border);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   background: var(--es-app-bg);
   color: var(--es-text);
   font: inherit;
@@ -373,7 +242,7 @@
 .es-pick-image-frame {
   height: 96px;
   overflow: hidden;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   background: var(--es-app-bg);
 }
 .es-pick-image-frame img,
@@ -397,7 +266,7 @@
 .es-pick-image-btn {
   padding: 4px 12px;
   border: 1px solid var(--es-input-border);
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   background: var(--es-panel);
   color: var(--es-text);
   font: 500 12px/1.3 var(--es-font);

package/dist/rail/index.d.ts

@@ -1,68 +1,57 @@
 import * as react from 'react';
-import { c as EaselRailProps, E as EaselRailButtonProps } from '../types-DWS-s9z-.js';
-export { a as EaselRailItem, b as EaselRailOrientation } from '../types-DWS-s9z-.js';
+import { c as EaselRailProps, E as EaselRailButtonProps } from '../types-CsgMwHHa.js';
+export { a as EaselRailItem, b as EaselRailOrientation } from '../types-CsgMwHHa.js';
 export { AddIcon, LayersIcon, MediaIcon, PageIcon as PagesIcon, IconProps as RailIconProps, SitemapIcon, StylesIcon } from '../icons/index.js';
-export { W as WordFit } from '../wordFit-D4S36PvB.js';
+export { W as WordFit } from '../wordFit-7XpmhcaW.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.
+ * The editors' icon rail — the panel switcher (Pages / Layers / Styles / Media
+ * / Sitemap) and the quick-add "+" — on the shell's `IconRail` (harness UI-24;
+ * since 1.0.0, efficient-easel#199). Give it `items[]`; which one is `active`
+ * and what each does is the host's.
  *
- * 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.
+ * The toolbar — its role, its one tab stop and arrow keys along the rail, the
+ * toggle-or-action rule, a `Tooltip` per button — is the shell's, and so,
+ * since efficient-shell 4.165.0, are a ROW rail's words: `labels="beside"`
+ * with `labelsFit`, the settings tabs' three states (owner 2026-09-18) —
+ * every word while they all fit the rail's column, then only the open panel's
+ * word, then none — measured by the shell against the rail's parent. This
+ * rail used to measure them on a canvas and hand a stylesheet rule the widths
+ * (`wordFit`); that is gone, and `wordFit` is accepted and ignored.
  *
- * 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.
+ * What stays here: the item list (`EaselRailItem`), which the hosts build,
+ * and the column's card and the row's lack of one (`rail.css`).
  *
- * `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.
+ * Its one word is the toolbar's name, `ariaLabel` (./words): a host in another
+ * language passes it; `TopBarRail` does it from the provider.
  *
- * `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.
+ * A CLIENT component since 1.0.0: the shell's rail keeps its tab stop and
+ * measures its words with layout effects. It still renders on a server
+ * (`renderToStaticMarkup`, icon-only until measured) and touches no browser
+ * global at module-eval or render.
  */
-declare function EaselRail({ items, ariaLabel, className, orientation, wordFit, }: EaselRailProps): react.JSX.Element;
+declare function EaselRail({ items, ariaLabel, className, orientation, onLabelsShown }: EaselRailProps): 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.
+ * One rail button: the shell's `IconRailButton` (harness UI-24; since 1.0.0,
+ * efficient-easel#199). Its look, its `Tooltip` (never `title=`), its
+ * toggle-or-action rule — `aria-pressed` only when `active` is a boolean — and,
+ * in a worded row rail, its word beside the glyph (efficient-shell 4.165.0)
+ * are the shell's. `worded` is accepted and ignored: the rail decides. It
+ * keeps the `es-rail-btn` / `is-active` names as hooks.
  */
-declare function EaselRailButton({ label, worded, icon, active, disabled, onSelect, className, }: EaselRailButtonProps): react.JSX.Element;
+declare function EaselRailButton({ label, icon, active, disabled, onSelect, className, tooltipSide }: EaselRailButtonProps): 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-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.
+ * The geometry below was taken from the storefront editor's rail (`.sf-rail`).
+ * Since 1.0.0 (efficient-easel#199) the BUTTONS are efficient-shell's
+ * `IconRailButton` — 36px, its own look, hover and active — so the tokens
+ * describe the rail's container; the button size is the shell's, recorded.
+ * A row rail's words are the shell's too since efficient-shell 4.165.0, so
+ * the word tokens are gone. The card's colour and radius are the shell's
+ * tokens (harness UI-24).
  *
  * Exposed BOTH ways, per the same value:
  *   - `railTokens` — this JS object, for anything that needs the numbers/colours
@@ -71,7 +60,8 @@ declare function EaselRailButton({ label, worded, icon, active, disabled, onSele
  *     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`.
+ * CSS applies the `px`. A string is a CSS value, and resolves only where the
+ * host has loaded the shell's CSS.
  */
 declare const railTokens: {
     /** Rail column width. `--sf-rail-w: 46px`. */
@@ -80,46 +70,24 @@ declare const railTokens: {
     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;
+    /** Rail card corner radius: the shell's `--radius-xl` (12px). */
+    readonly railRadius: "var(--radius-xl)";
+    /** The shell's `IconRailButton` (square, `h-9 w-9`). */
+    readonly buttonSize: 36;
     /** 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: 8;
-    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`. */
+        /** Rail card background: the shell's surface. */
+        readonly background: "var(--surface)";
+        /** Rail card shadow, black at an alpha (no shell elevation token yet). */
         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.
+ * — e.g. `style={{ ['--es-rail-bg']: 'transparent' }}` — without shipping new CSS.
  */
 declare const railCssVars: {
     readonly railWidth: "--es-rail-w";
@@ -127,19 +95,9 @@ declare const railCssVars: {
     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 { EaselRail, EaselRailButton, EaselRailButtonProps, EaselRailProps, type RailTokens, railCssVars, railTokens };

package/dist/rail/index.js

@@ -1 +1 @@
-import"../chunk-OWBO4WKA.js";export{EaselRail,EaselRailButton,railCssVars,railTokens}from"../chunk-WZ7TGAAT.js";import"../chunk-2OAZYSWJ.js";import"../chunk-BZ5ASXOL.js";export{AddIcon,LayersIcon,MediaIcon,PageIcon as PagesIcon,SitemapIcon,StylesIcon}from"../chunk-L5KW4HG5.js";
+export{railCssVars,railTokens}from"../chunk-X6DQWK2C.js";export{EaselRail,EaselRailButton}from"../chunk-MJM6SFD3.js";import"../chunk-2OAZYSWJ.js";export{AddIcon,LayersIcon,MediaIcon,PageIcon as PagesIcon,SitemapIcon,StylesIcon}from"../chunk-L5KW4HG5.js";