efficient-easel 0.106.0 → 1.0.0

package/README.md

@@ -16,6 +16,45 @@ it since 0.93.0.
 > Moving from the old name without touching an import:
 > `"efficient-editor": "npm:efficient-easel@^0.96.0"`.
 
+## The shell first — efficient-shell is a peer (UI-24)
+
+Harness UI-24 (efficient-harness#117, 2026-10-10): every surface a person
+operates takes its UI from `efficient-shell`. So `efficient-shell` (`^4.163.0`)
+is a **peer dependency**, and every colour, radius and the typeface in easel's
+sheets is an alias of a shell token (`--es-surface`… is `var(--surface)`, the
+accent is the shell's, and so on — `src/shell/shell.css` lists them all).
+
+**A host loads the shell's CSS before any easel sheet**, or nothing resolves —
+there are no hex fallbacks, because a fallback is a second palette:
+
+```ts
+import 'efficient-shell/ui.css';     // or 'efficient-shell/styles.css' — exactly one
+import 'efficient-easel/shell.css';  // then easel's sheets
+import 'efficient-easel/screen.css'; // …
+```
+
+The shell's `ui.css` is a Tailwind v4 input (its radii and face are declared in
+`@theme default`), so it goes through the host's Tailwind build like every
+portal's. The editor chrome then **follows the shell's theme, dark included**:
+the shell stamps `data-theme="dark"` (or `.dark`) on `<html>` and easel's tokens
+follow. The editor no longer pins itself light (`data-editor-theme` is gone;
+`applyEaselChromeTheme` stamps the bridged theme as `data-theme`). The canvas is
+output and keeps the document's own colours in every theme.
+
+Since 1.0 (efficient-easel#199 step 4, part A) the editor's buttons, icon
+buttons, switches, segmented controls, tabs, text and number boxes, the Add
+block menu, the leave prompt, the toast and every explanation are
+efficient-shell's components (`efficient-shell/ui`): they draw in the shell's
+Tailwind classes, which **the host's Tailwind compiles from the shell's dist**
+(the `@source` lines in its `ui.css`). Easel itself emits no Tailwind class.
+The exported names hosts import (`EaselIconButton`, `SettingsSwitch`,
+`SettingsSegmented`, `SettingsTabs`, `FieldText`, `FieldNumber`, …) stay, as
+thin wrappers with the props they had.
+
+`tests/own-ui-ratchet.test.ts` lists what easel still draws itself: since
+1.0.0 no primitive is left on it (`OWN_PRIMITIVES` is empty), and its counts —
+explanatory `title=`, raw colours — only go down.
+
 ## Why
 
 The storefront editor (`efficient-storefront`, Next 16 + Puck) and the campaign
@@ -114,33 +153,32 @@ exported too, for bespoke layouts.
 
 ## Tokens
 
-The same values, two ways — `railTokens` (JS) and `rail.css` (CSS custom
-properties on `.es-rail`). Taken verbatim from the storefront editor's `.sf-rail`
-(the visual reference).
+Since 1.0.0 the buttons are efficient-shell's `IconRailButton` (its look,
+hover, active, focus and `Tooltip`), inside the shell's `IconRail` (its one
+tab stop and arrow keys). What the tokens still describe is the rail's
+CONTAINER and a measured row's words, the same values two ways — `railTokens`
+(JS) and `rail.css` (CSS custom properties on `.es-rail`):
 
 | token | value | CSS var |
 |---|---|---|
 | rail width | `46px` | `--es-rail-w` |
 | rail padding (y) | `8px` | `--es-rail-pad-y` |
 | button gap | `4px` | `--es-rail-gap` |
-| rail radius | `12px` | `--es-rail-radius` |
-| button size | `34px` | `--es-rail-btn-size` |
-| button radius | `9px` | `--es-rail-btn-radius` |
+| rail radius | `var(--radius-xl)` (12px) | `--es-rail-radius` |
+| button size | `36px` (the shell's) | `--es-rail-btn-size` |
 | icon size | `18px` | `--es-rail-icon-size` |
-| background | `#ffffff` | `--es-rail-bg` |
-| idle icon | `#6b7280` | `--es-rail-fg` |
-| hover bg / fg | `#f3f4f6` / `#111827` | `--es-rail-hover-bg` / `--es-rail-hover-fg` |
-| accent (active) | `#2563eb` | `--es-rail-accent` |
-| accent tint (active bg) | `#eff6ff` | `--es-rail-accent-tint` |
+| background | `var(--surface)` | `--es-rail-bg` |
+
+The button colour tokens (`idle`, `hoverBg`, `hoverFg`, `accent`,
+`accentTint`, `--es-rail-fg`, `--es-rail-hover-*`, `--es-rail-accent*`), the
+button radius and `transition` / `disabledOpacity` were removed in 1.0.0: the
+shell draws the button.
 
 `orientation="row"` adds **no new token**. It re-points three of the ones above
 — `--es-rail-bg` to `transparent`, `--es-rail-shadow` to `none`,
 `--es-rail-radius` to `0` — so the card look stays declared in one place, and it
 reuses `--es-rail-pad-y` rotated onto the row's ends and `--es-rail-gap` as-is.
 
-Re-theme without new CSS by overriding a var on the element:
-`style={{ ['--es-rail-accent']: brand }}`.
-
 ## The gold layer — type in place
 
 `GoldTextInput` (subpath `efficient-easel/gold`, added in 0.3.0) is the surface a
@@ -315,7 +353,7 @@ import 'efficient-easel/chrome.css'; // once, after shell.css
     </TopBarCluster>
     <TopBarCluster kind="right">
       <SaveState tone="saved" label="" />
-      <button className="es-btn-primary">Done</button>
+      <Button variant="primary">Done</Button>{/* efficient-shell/ui */}
     </TopBarCluster>
   </EaselTopBar>
   …
@@ -891,25 +929,28 @@ A host built only from the parts, audited with axe-core in a real Chromium.
 What follows is how the parts answer it; `scripts/second-host-clickthrough.mjs`
 runs the same rules (`--axe <axe.min.js>`).
 
-- **The right-click menu lives on `<body>`, and a host may move it into its
-  own landmarks.** On the body the box is page content outside every landmark
-  (axe `region`, a best-practice rule). It is not wrapped in a region or a
-  dialog to satisfy that: a menu is neither. A host that wants it inside its
-  landmarks portals it into its editor's root, through the check:
+- **The right-click menu is the shell's `ContextMenu` (since 1.0.0).** It is
+  portalled to `<body>` by the shell and kept inside the shell window that
+  holds what was right-clicked (pass it as `owner`). It is only ever a
+  `role="menu"`, never wrapped in a region or a dialog to satisfy axe's
+  `region`: a menu is neither. `menuPortalTarget`, `ES_MENU_SKIN` and the
+  `portalTo` / `skin` / `maxHeight` behaviour are gone (the props are
+  accepted and ignored):
 
   ```tsx
-  import { EaselContextMenu, menuPortalTarget } from 'efficient-easel/menu';
+  import { EaselContextMenu } from 'efficient-easel/menu';
 
-  <EaselContextMenu portalTo={menuPortalTarget(rootRef.current)} … />
+  <EaselContextMenu x={e.clientX} y={e.clientY} owner={e.currentTarget} items={items} onClose={close} />
   ```
 
-  The box is `position: fixed` at the pointer, and an ancestor that is
-  transformed, filtered or contained places and clips a fixed box inside it.
-  `menuPortalTarget` gives the root back only when none does, and `null` (the
-  body) otherwise, so a root that is scaled on one screen and not on another
-  is right on both. The body stays the default because it is the one place
-  that cannot go wrong. The root's stacking is the host's: the box is
-  `z-index: 9999` inside it.
+  Or the shell's own pieces, with the editors' item list as the rows:
+
+  ```tsx
+  import { ContextMenu, useContextMenu } from 'efficient-shell/ui';
+  import { EaselMenuItems } from 'efficient-easel/menu';
+
+  {menu.state && <ContextMenu {...menu.props}><EaselMenuItems items={items} onClose={menu.close} /></ContextMenu>}
+  ```
 - **A dropdown's open list has a name.** In a settings row
   (`InspectorField`) the list is `aria-labelledby` the row's own label. A
   `FieldSelect` on its own is named by `ariaLabelledBy` or `ariaLabel`, and

package/dist/{LinkPicker-W2Rtxetz.d.ts → LinkPicker-hPEr1MJx.d.ts}

@@ -101,10 +101,12 @@ type LinkPickerProps = {
  * filter or value the host no longer offers is shown as "(unavailable)" and
  * kept, never silently replaced.
  *
- * Every list is `FieldSelect`, the editor's one pop-up list — the anchors
- * under one heading per page (`FieldOption.group`), a long list with a search
- * box — never the browser's `<select>`. The boxes stack, one under the next,
- * at every panel width.
+ * Every box is the shell's (harness UI-24, efficient-easel#199): `Select`
+ * for a list — the anchors under one heading per page (`SelectOptionGroup`) —
+ * `SearchableSelect` for a long one, and `Input` for a typed address; never
+ * the browser's `<select>`. The boxes stack, one under the next, at every
+ * panel width. A long list of anchors names each one's page as its quiet
+ * second line: the shell's `SearchableSelect` takes no groups.
  */
 declare function LinkPicker({ value, onChange, kinds, rules, filtersFor, label, readOnly }: LinkPickerProps): react.JSX.Element | null;
 

package/dist/autosave/index.d.ts

@@ -1,10 +1,10 @@
 import { a as Autosave, A as AutosaveSnapshot, b as AutosaveOptions } from '../engine-DBxp_v6B.js';
 export { c as AutosaveClock, d as createAutosave } from '../engine-DBxp_v6B.js';
-import { a as SaveIndicator } from '../words-D_Lnw1Gr.js';
-export { S as SaveWords, s as saveIndicator } from '../words-D_Lnw1Gr.js';
-import '../types-CqY85foL.js';
-import '../types-DWS-s9z-.js';
-import '../wordFit-D4S36PvB.js';
+import { a as SaveIndicator } from '../words-CvFnwGSr.js';
+export { S as SaveWords, s as saveIndicator } from '../words-CvFnwGSr.js';
+import '../types-Dt1CFR1S.js';
+import '../types-CsgMwHHa.js';
+import '../wordFit-7XpmhcaW.js';
 import 'react';
 import '../edit-lock/index.js';
 import '../panelWidths-D9hTLR25.js';

package/dist/chrome/chrome.css

@@ -20,7 +20,9 @@
  * at the read, not a declaration on a root: a host may set the variables on an
  * ancestor of its own, and a default declared lower down would shadow them.
  *
- * Light only (owner, 2026-08-06: no dark mode in the editor or the designer).
+ * It follows the shell's theme, dark included (UI-24, efficient-harness#117):
+ * every colour is an `--es-*` token, and those resolve to efficient-shell's.
+ * The 2026-08-06 "light only" ruling is reversed.
  */
 
 /* ── Top bar ─────────────────────────────────────────────────────────────── */
@@ -93,130 +95,31 @@
   margin: 0 4px;
 }
 
-/* ── Icon buttons ────────────────────────────────────────────────────────── */
-.es-iconbtn {
-  width: 30px;
-  height: 30px;
-  border: none;
-  background: transparent;
-  border-radius: 7px;
-  cursor: pointer;
-  color: var(--es-icon);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  transition: background 0.12s, color 0.12s;
-  text-decoration: none;
-}
-.es-iconbtn:hover:not(:disabled) {
-  background: var(--es-hover);
-}
-.es-iconbtn:disabled {
-  color: var(--es-disabled);
-  cursor: default;
-}
-.es-iconbtn--active {
-  color: var(--es-text-strong);
-}
-.es-iconbtn--inactive {
-  color: var(--es-disabled);
-}
-.es-iconbtn svg {
+/* ── Icon buttons, the device switch and the bar's buttons ──────────────── */
+/* The shell's IconButton, Segmented and Button since efficient-easel issue 199 step 4
+   (harness UI-24): their look is the shell's, never redrawn here — a toggle's
+   pressed look included (`aria-pressed`, efficient-shell 4.164.0). What stays
+   is the glyph size inside. */
+.es-iconbtn svg,
+.es-insp-iconbtn svg {
   width: 16px;
   height: 16px;
 }
-
-/* ── Device switch ───────────────────────────────────────────────────────── */
-.es-devseg {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  background: var(--es-track-bg);
-  border-radius: 9px;
-  padding: 2px;
-}
-.es-devseg button {
-  width: 30px;
-  height: 26px;
-  border: none;
-  background: transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  color: var(--es-icon);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
-}
-.es-devseg button.is-active {
-  background: var(--es-raised);
-  color: var(--es-text-strong);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
+.es-devseg-glyph {
+  display: inline-flex;
 }
-.es-devseg button svg {
+.es-devseg-glyph svg {
   width: 15px;
   height: 15px;
 }
 
-/* ── Top-bar buttons ─────────────────────────────────────────────────────── */
-.es-btn-ghost {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border: 1px solid var(--es-btn-border);
-  background: var(--es-panel);
-  border-radius: 8px;
-  cursor: pointer;
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--es-btn-text);
-  white-space: nowrap;
-  transition: background 0.12s;
-  text-decoration: none;
-}
-.es-btn-ghost:hover:not(:disabled) {
-  background: var(--es-hover);
-}
-.es-btn-ghost:disabled {
-  color: var(--es-disabled);
-  border-color: var(--es-btn-border);
-  background: var(--es-panel);
-  cursor: default;
-}
-.es-btn-ghost:focus-visible {
-  outline: 2px solid var(--es-accent);
-  outline-offset: 2px;
-}
-/* The ONE primary button in the bar (Publish on the website). */
-.es-btn-primary {
-  padding: 8px 16px;
-  border: none;
-  background: var(--es-accent);
-  border-radius: 8px;
-  cursor: pointer;
-  font: inherit;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--es-on-accent);
-  white-space: nowrap;
-  box-shadow: 0 1px 2px var(--es-accent-shadow);
-  transition: filter 0.12s;
-}
-.es-btn-primary:hover {
-  filter: brightness(1.06);
-}
-
 /* ── Save pill ───────────────────────────────────────────────────────────── */
 .es-savestate {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 4px 12px;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   font-size: 12px;
   font-weight: 500;
   white-space: nowrap;
@@ -248,26 +151,13 @@
 .es-savestate.is-error {
   color: var(--es-danger);
 }
+/* The autosave switch (the shell's Switch) with the pill as its label. */
 .es-savestate-toggle {
-  appearance: none;
-  -webkit-appearance: none;
-  border: 0;
-  background: none;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  cursor: pointer;
-  border-radius: 8px;
-}
-.es-savestate-toggle:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--es-accent-shadow);
-}
-.es-savestate-toggle .es-savestate {
-  border: 1px solid transparent;
+  display: inline-flex;
+  align-items: center;
 }
-.es-savestate-toggle:hover .es-savestate {
-  background: var(--es-hover);
+.es-savestate-toggle label {
+  cursor: pointer;
 }
 /* Paused: boxed, so it reads as a switch turned off, not a passive label. */
 .es-savestate.is-off {
@@ -357,48 +247,19 @@
 }
 
 /* ── Resize grips ────────────────────────────────────────────────────────── */
-/* An absolute child of the panel row, pinned over the panel↔canvas seam from the
-   same width vars the panels read. The 9px hit area is invisible at rest; a 2px
-   bar on the seam tints to the accent on hover and focus. The host's panel row
-   must be `position: relative`. */
-.es-resizer {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 9px;
-  z-index: 5;
-  display: flex;
-  cursor: col-resize;
-  touch-action: none;
-}
-.es-resizer--left {
-  left: var(--es-left-w, 288px);
-  justify-content: flex-start;
-}
-.es-resizer--right {
-  right: var(--es-right-w, 320px);
-  justify-content: flex-end;
-}
-.es-resizer-bar {
-  width: 2px;
-  border-radius: 2px;
-  background: transparent;
-  transition: background 0.12s;
-}
-.es-resizer:hover .es-resizer-bar,
-.es-resizer:focus-visible .es-resizer-bar {
-  background: var(--es-accent);
-}
-.es-resizer:focus {
-  outline: none;
-}
-body.es-col-resizing,
-body.es-col-resizing * {
-  cursor: col-resize !important;
-  user-select: none !important;
-}
-body.es-col-resizing iframe {
-  pointer-events: none !important;
+/* The grip is the shell's `ResizeHandle` (UI-24): its hit area, its bar on
+   hover and focus, its cursor during a drag. Only WHERE it sits is the
+   editor's: an absolute child of the panel ROW, pinned over the panel↔canvas
+   seam from the same width vars the panels read, instead of the shell's
+   default edge of its parent. The host's panel row must be `position:
+   relative`. (Two classes, to outrank the shell's own edge utility.) */
+.es-resizer.es-resizer--left {
+  left: calc(var(--es-left-w, 288px) - 4px);
+  right: auto;
+}
+.es-resizer.es-resizer--right {
+  right: calc(var(--es-right-w, 320px) - 4px);
+  left: auto;
 }
 
 /* ── Inspector head ──────────────────────────────────────────────────────── */
@@ -414,24 +275,16 @@ body.es-col-resizing iframe {
   min-width: 0;
   padding: 12px 16px 0;
 }
-.es-insp-up-btn {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 4px;
+/* The link is the shell's Button (`link`) in its Tooltip's wrapper; only its
+   truncation is laid out here — a long name is cut inside the panel. */
+span:has(> .es-insp-up-btn) {
   max-width: 100%;
   min-width: 0;
-  padding: 0;
-  border: 0;
-  background: none;
-  font: inherit;
-  font-size: 12px;
-  color: var(--es-accent);
-  text-align: left;
-  cursor: pointer;
 }
-.es-insp-up-btn:focus-visible {
-  outline: 2px solid var(--es-accent);
-  outline-offset: 2px;
+.es-insp-up-btn {
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
 }
 .es-insp-up-arrow {
   flex: none;
@@ -470,7 +323,9 @@ body.es-col-resizing iframe {
      row 2          [Cancel]
    The actions box steps aside (`display: contents`) so its buttons can sit in
    different rows; every glyph button is locked to row 1 and takes the next
-   free column, so a head with several tools keeps them side by side. */
+   free column, so a head with several tools keeps them side by side. Each
+   button sits in the shell Tooltip's wrapper, so the grid places the wrapper
+   that holds it (`:has(> …)`). */
 @container (width < 260px) {
   .es-insp-head:has(.es-insp-textbtn) {
     display: grid;
@@ -482,13 +337,13 @@ body.es-col-resizing iframe {
   }
   .es-insp-head:has(.es-insp-textbtn) > .es-insp-chip,
   .es-insp-head:has(.es-insp-textbtn) > .es-insp-titles,
-  .es-insp-head:has(.es-insp-textbtn) .es-insp-iconbtn {
+  .es-insp-head:has(.es-insp-textbtn) .es-insp-actions > :has(> .es-insp-iconbtn) {
     grid-row: 1;
   }
   .es-insp-head:has(.es-insp-textbtn) > .es-insp-actions {
     display: contents;
   }
-  .es-insp-head:has(.es-insp-textbtn) .es-insp-textbtn {
+  .es-insp-head:has(.es-insp-textbtn) .es-insp-actions > :has(> .es-insp-textbtn) {
     grid-row: 2;
     grid-column: 2;
     justify-self: start;
@@ -500,7 +355,7 @@ body.es-col-resizing iframe {
 .es-insp-chip {
   width: 26px;
   height: 26px;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -537,47 +392,12 @@ body.es-col-resizing iframe {
   gap: 2px;
   flex: none;
 }
-.es-insp-iconbtn {
-  width: 28px;
-  height: 28px;
-  border: none;
-  background: transparent;
-  border-radius: 7px;
-  cursor: pointer;
-  color: var(--es-icon);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  transition: background 0.12s, color 0.12s;
-}
-.es-insp-iconbtn:hover {
-  background: var(--es-hover);
-  color: var(--es-text-strong);
-}
-.es-insp-iconbtn--danger:hover {
-  background: var(--es-danger-tint);
-  color: var(--es-danger);
-}
-.es-insp-iconbtn[aria-expanded="true"] {
-  background: var(--es-accent-tint);
-  color: var(--es-accent);
-}
-
 /* A side panel's head has two pieces besides its glyph buttons (MediaPanelHead,
    card [MERGE] One Media Panel Head, 2026-10-06; until then each editor's own
    sheet drew them, as `.sf-head-*` and `.cd-head-*`). A MODE's way out is a
-   word ("Cancel", "Done") on the ghost button, drawn to the 28px of the head's
-   icon buttons so the row keeps one height (its sides are the scale's 12; both
-   editors drew 10, off the 2/4/8/12/16/32 scale); the hairline parts the
+   word ("Cancel", "Done") on the shell's small Button (`.es-insp-textbtn`
+   names it for the narrow layout above); the hairline parts the
    panel's own tools from the Hide panel button that ends every head. */
-.es-btn-ghost.es-insp-textbtn {
-  height: 28px;
-  padding: 0 12px;
-  font-size: 12.5px;
-  border-radius: 7px;
-  white-space: nowrap;
-}
 .es-insp-divider {
   width: 1px;
   height: 16px;
@@ -588,59 +408,16 @@ body.es-col-resizing iframe {
 
 /* ── Edit notice — somebody else is in here, or a save was refused ───────── */
 /* A bar under the top bar, never a dialog (blueprint 2.5): the operator has to
-   be able to read and copy from the screen it warns them about. No token of its
-   own — the amber is the shell's amber tint (`--es-preview-tint`) eased into the
-   panel white, edged with `--es-warning`, so a re-themed editor re-themes it. */
+   be able to read and copy from the screen it warns them about. */
+/* The shell's Banner, with the shell's Buttons as its action (easel issue 199, step 4):
+   the wrapper only places it under the top bar. */
 .es-notice {
   box-sizing: border-box;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
   padding: 8px 16px;
   font-family: var(--es-font);
-  font-size: 13px;
-  line-height: 1.45;
-  color: var(--es-text-secondary);
-  background: var(--es-app-bg);
-  border-bottom: 1px solid var(--es-divider);
-}
-.es-notice.is-warning {
-  color: var(--es-text);
-  background: color-mix(in srgb, var(--es-preview-tint) 70%, var(--es-panel));
-  border-bottom-color: color-mix(in srgb, var(--es-warning) 30%, var(--es-preview-tint));
-}
-.es-notice-text {
-  flex: 1 1 320px;
-  min-width: 0;
-}
-.es-notice-text strong {
-  font-weight: 600;
-  color: var(--es-text-strong);
 }
 .es-notice-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }
-.es-notice-btn {
-  appearance: none;
-  -webkit-appearance: none;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  padding: 4px 12px;
-  border: 1px solid var(--es-btn-border);
-  border-radius: var(--es-field-radius);
-  background: var(--es-raised);
-  color: var(--es-btn-text);
-  white-space: nowrap;
-  cursor: pointer;
-}
-.es-notice-btn:hover {
-  background: var(--es-hover);
-}
-.es-notice-btn:focus-visible {
-  outline: 2px solid var(--es-accent);
-  outline-offset: 1px;
-}