efficient-easel 0.106.0 → 1.0.1

package/dist/fields/index.js

@@ -1 +1 @@
-export{FieldText,Inspector,InspectorField,LinkPicker,ListField,bucketsOf,copyItem,insertAt,labelOf,moveTo,planFields,removeAt}from"../chunk-VCQVNPTG.js";export{FieldSelect,FieldSlider,optionFor}from"../chunk-EOJNJCMJ.js";import"../chunk-ZFDCDJNZ.js";import"../chunk-3EDSDPIP.js";export{useResolvedFields}from"../chunk-YRLPFZW3.js";import"../chunk-KTVH2ZRL.js";import"../chunk-ZNS7727Y.js";import"../chunk-QTLAVDJE.js";export{FieldNumber,clampNumber,parseTyped,useNumberEntry}from"../chunk-EWVJSRRY.js";import"../chunk-FPOKPNO4.js";import"../chunk-P6O363EE.js";import"../chunk-MFIRYGHW.js";import"../chunk-BZ5ASXOL.js";import"../chunk-67GNT6PF.js";import"../chunk-L5KW4HG5.js";import"../chunk-KRXQM65X.js";import"../chunk-NKB3KVAB.js";
+export{FieldText,Inspector,InspectorField,LinkPicker,ListField,bucketsOf,copyItem,insertAt,labelOf,moveTo,planFields,removeAt}from"../chunk-WDXPWSP7.js";export{FieldSelect,FieldSlider,optionFor}from"../chunk-NLRW4BGG.js";import"../chunk-XWR5YVA7.js";import"../chunk-Q27BB5ZC.js";import"../chunk-K56YDHYQ.js";import"../chunk-QTLAVDJE.js";export{useResolvedFields}from"../chunk-YRLPFZW3.js";import"../chunk-EA2HTX37.js";export{FieldNumber}from"../chunk-7SQF6LZL.js";import"../chunk-QLD57GBB.js";import"../chunk-FPOKPNO4.js";import"../chunk-MFIRYGHW.js";import"../chunk-67GNT6PF.js";import"../chunk-P2VEMZH5.js";import"../chunk-L5KW4HG5.js";import"../chunk-KRXQM65X.js";import"../chunk-NKB3KVAB.js";

package/dist/gold/gold.css

@@ -20,9 +20,9 @@
 .es-gold {
   /* — tokens (see tokens.ts / goldCssVars) — */
   --es-gold-accent: var(--gold, #c9a461);
-  --es-gold-quiet: var(--es-muted, #6b7280);
-  --es-gold-caret: var(--es-text, #111827);
-  --es-gold-placeholder: var(--es-field-placeholder, #9ca3af);
+  --es-gold-quiet: var(--es-muted, var(--ink-faint));
+  --es-gold-caret: var(--es-text, var(--ink-strongest));
+  --es-gold-placeholder: var(--es-field-placeholder, var(--ink-faintest));
   --es-gold-delim-opacity: 0.35;
   --es-gold-delim-resting-opacity: 0.25;
   --es-gold-bold-shadow: 0 0 0.4px currentColor;

package/dist/gold/index.d.ts

@@ -200,8 +200,9 @@ declare function goldSegments(value: string, rules: readonly InlineRule[]): Gold
  *     storefront's light-theme value (`efficient-storefront/app/globals.css` → `--gold:
  *     #c9a461`), so the mark in the box matches the mark on the page;
  *   - the caret and the placeholder defer to the shell layer's `--es-text` /
- *     `--es-field-placeholder` (see `shell/tokens.ts`) with the same values as
- *     their fallbacks;
+ *     `--es-field-placeholder` (see `shell/tokens.ts`), falling back to the
+ *     efficient-shell tokens those resolve to (UI-24), for a box drawn outside
+ *     an `.es-editor` root;
  *   - the FOCUSED dim is the rail's existing disabled opacity (0.35), not a new
  *     number. Its RESTING sibling (0.25) is the one value in this file picked by
  *     eye rather than borrowed: nothing else in the product paints a mark that
@@ -225,12 +226,12 @@ declare const goldTokens: {
     readonly accent: "var(--gold, #c9a461)";
     /** Quiet — `^^phrase^^`. Colour only: the page draws it smaller, but a
      *  smaller glyph down here would pull the layer off the caret. */
-    readonly quiet: "var(--es-muted, #6b7280)";
+    readonly quiet: "var(--es-muted, var(--ink-faint))";
     /** The caret. Set explicitly because the box's own text is transparent, and
      *  `caret-color: auto` would make the caret transparent with it. */
-    readonly caret: "var(--es-text, #111827)";
+    readonly caret: "var(--es-text, var(--ink-strongest))";
     /** The hint shown while the value is empty. */
-    readonly placeholder: "var(--es-field-placeholder, #9ca3af)";
+    readonly placeholder: "var(--es-field-placeholder, var(--ink-faintest))";
     /** How far the asterisks are dimmed WHILE THE BOX HAS FOCUS — the moment they
      *  are what the merchant is aiming at, so this is the louder of the pair.
      *  Out of focus they drop to {@link goldTokens.delimiterRestingOpacity}. */

package/dist/gold/index.js

@@ -1 +1 @@
-export{GoldLayer,GoldTextInput,goldSegments}from"../chunk-2FZJWH24.js";import"../chunk-546BBOPE.js";var e={accent:"var(--gold, #c9a461)",quiet:"var(--es-muted, #6b7280)",caret:"var(--es-text, #111827)",placeholder:"var(--es-field-placeholder, #9ca3af)",delimiterOpacity:"0.35",delimiterRestingOpacity:"0.25",boldShadow:"0 0 0.4px currentColor",italicDecoration:"underline dotted",strikeDecoration:"line-through",pad:"0"},t={accent:"--es-gold-accent",quiet:"--es-gold-quiet",caret:"--es-gold-caret",placeholder:"--es-gold-placeholder",delimiterOpacity:"--es-gold-delim-opacity",delimiterRestingOpacity:"--es-gold-delim-resting-opacity",boldShadow:"--es-gold-bold-shadow",italicDecoration:"--es-gold-italic-decoration",strikeDecoration:"--es-gold-strike-decoration",pad:"--es-gold-pad"};export{t as goldCssVars,e as goldTokens};
+export{GoldLayer,GoldTextInput,goldSegments}from"../chunk-2FZJWH24.js";import"../chunk-546BBOPE.js";var e={accent:"var(--gold, #c9a461)",quiet:"var(--es-muted, var(--ink-faint))",caret:"var(--es-text, var(--ink-strongest))",placeholder:"var(--es-field-placeholder, var(--ink-faintest))",delimiterOpacity:"0.35",delimiterRestingOpacity:"0.25",boldShadow:"0 0 0.4px currentColor",italicDecoration:"underline dotted",strikeDecoration:"line-through",pad:"0"},t={accent:"--es-gold-accent",quiet:"--es-gold-quiet",caret:"--es-gold-caret",placeholder:"--es-gold-placeholder",delimiterOpacity:"--es-gold-delim-opacity",delimiterRestingOpacity:"--es-gold-delim-resting-opacity",boldShadow:"--es-gold-bold-shadow",italicDecoration:"--es-gold-italic-decoration",strikeDecoration:"--es-gold-strike-decoration",pad:"--es-gold-pad"};export{t as goldCssVars,e as goldTokens};

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { EaselRail, EaselRailButton, RailTokens, railCssVars, railTokens } from './rail/index.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 { E as EaselRailButtonProps, a as EaselRailItem, b as EaselRailOrientation, c as EaselRailProps } from './types-DWS-s9z-.js';
-export { SPACING_SCALE, ShellTokens, shellCssVars, shellTokens } from './shell/index.js';
+export { W as WordFit } from './wordFit-7XpmhcaW.js';
+export { E as EaselRailButtonProps, a as EaselRailItem, b as EaselRailOrientation, c as EaselRailProps } from './types-CsgMwHHa.js';
+export { SPACING_SCALE, ShellTokens, shellCssVars, shellDarkTokens, shellTokens } from './shell/index.js';
 import 'react';

package/dist/index.js

@@ -1 +1 @@
-export{SPACING_SCALE,shellCssVars,shellTokens}from"./chunk-2UX75JDP.js";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{SPACING_SCALE,shellCssVars,shellDarkTokens,shellTokens}from"./chunk-HMJS344F.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";

package/dist/menu/index.d.ts

@@ -1,104 +1,60 @@
 import * as react from 'react';
-import { a as EaselContextMenuProps, b as EaselContextMenuSkin } from '../types-Djdq6Xkd.js';
-export { E as EaselContextMenuItem } from '../types-Djdq6Xkd.js';
+import { a as EaselContextMenuProps, E as EaselContextMenuItem } from '../types-BsyPh6EW.js';
+export { b as EaselContextMenuSkin } from '../types-BsyPh6EW.js';
 
 /**
- * The right-click menu box, shared by both editors (card 66400.d).
+ * The editors' right-click menu: the shell's `ContextMenu` with an
+ * {@link EaselMenuItems} list in it (harness UI-16, UI-24; efficient-easel#199).
  *
- * MOVED HERE, NOT WRITTEN HERE. This is `efficient-admin-portal`'s
- * `src/components/RowContextMenu.tsx` — portal placement, viewport edge-flip,
- * a one-level submenu with ticks, focus move-in and restore, Escape and
- * outside-click — which had been in front of real users on three surfaces
- * (price sheets, the goods-issue dialog, the campaign canvas) before the
- * storefront editor needed the same affordance. The alternative was those same
- * 230 lines written a second time.
+ * Up to 0.106.0 this drew a box of its own — moved here from the admin
+ * portal's `RowContextMenu` (card 66400.d) with a skin, an edge flip, a
+ * one-level flyout and its own focus and Escape handling. All of that is the
+ * shell's now (`ContextMenu`, `PopupSubmenu`, efficient-shell 4.163.0), so
+ * this name is kept for the hosts that import it and draws nothing itself:
+ * placement inside the owning window, the `menu` role, arrow keys, Escape
+ * through the window's interceptor and focus in and back are the shell's.
  *
- * ONE THING CHANGED IN THE MOVE, and it is the reason the move is worth doing:
- * the box no longer knows what it looks like. The admin version hard-coded ONE
- * editor's surface — `glassStyle()` from efficient-shell, plus that portal's
- * Tailwind palette — into the only box both editors were ever going to share.
- * Here the look is a {@link EaselContextMenuSkin}, the default is the
- * storefront's approved one, and the admin passes its own strings in. So this
- * module imports nothing but React (`tests/menu-leaf-safety.test.ts`), and the
- * admin's rendered markup is byte-identical to what shipped
- * (`tests/menu-layer.test.tsx` (e)).
+ * `skin`, `maxHeight` and `portalTo` are accepted and ignored (see their
+ * notes): the menu wears the shell's look and is portalled by the shell.
  *
- * A CLIENT LEAF, like the gold layer and unlike the rail: it portals, it
- * measures and it moves focus, so it has hooks and touches the DOM. A Next-16
- * server component may import the module and must render it inside the host's
- * client boundary.
+ * A CLIENT component: it portals, measures and moves focus.
  */
-declare function EaselContextMenu({ x, y, items, onClose, maxHeight, skin, portalTo, }: EaselContextMenuProps): react.ReactPortal | null;
+declare function EaselContextMenu({ x, y, items, onClose, owner, portalTo }: EaselContextMenuProps): react.JSX.Element | null;
 
 /**
- * WHERE THE MENU BOX LIVES — the decision, and the one check behind it
- * (second host, 2026-10-07).
- *
- * The box is portalled to `<body>`. A host's axe-core run flags that under
- * `region` (a best-practice rule, moderate): a `role="menu"` hanging off the
- * body is page content outside every landmark. Two answers were on the table.
- *
- *   A. Wrap the box in something a landmark check lets through — a
- *      `role="region"`, a `role="dialog"`.                              REFUSED.
- *      A menu is neither. A region is a landmark, and one that appears in the
- *      page's landmark list each time a menu opens is noise for the very
- *      people landmarks are for; a dialog is announced as one and is expected
- *      to hold the focus like one. Changing what a thing IS so a checker
- *      stops reading it is the wrong way round.
- *
- *   B. Portal the box INTO the editor's root, which sits inside whatever
- *      landmark the host put its editor in.                              TAKEN,
- *      as the host's choice (`portalTo`), with this check.
- *
- * WHY IT IS NOT THE DEFAULT. The box is `position: fixed` and placed at the
- * pointer in the VIEWPORT's coordinates. An ancestor that is transformed,
- * filtered or contained becomes the containing block of a fixed box inside it:
- * the box is then placed against that ancestor and clipped by it — the menu
- * opens somewhere the pointer is not, or is cut off. `<body>` is the one place
- * that can never happen, the box does not know where a host's root is, and
- * every surface that draws it today ships on the body. So the body stays the
- * default, and a host that wants the box in its landmarks says where:
- *
- *     <EaselContextMenu portalTo={menuPortalTarget(rootRef.current)} … />
- *
- * `menuPortalTarget` hands the root back only when a fixed box in it is still
- * placed against the viewport, and `null` — the body — otherwise. So a root
- * that is scaled on one screen and not on another gets the right answer on
- * both, with no rule of the host's own.
- *
- * Two things the host still owns: the root's stacking (the box is `z-index:
- * 9999` INSIDE the root's stacking context, so an overlay the host draws above
- * its editor is above the menu too), and its tokens (the default skin names
- * `es-editor` on the box, which re-declares the token defaults there — a
- * re-themed root passes a skin without it; see `ES_MENU_SKIN`).
- *
- * Pure DOM, no React, nothing read at import.
- */
-/**
- * The element to hand `EaselContextMenu` as `portalTo` so the box lives inside
- * the editor: `root` itself when a fixed box in it is still placed against the
- * viewport, `null` (the body, the default) when the root or anything around it
- * would place and clip the box instead — or when there is no root yet.
- *
- * Call it when the menu opens, not once: whether a root is transformed can
- * change with the screen (a host that scales its editor to fit).
- */
-declare function menuPortalTarget(root: Element | null | undefined): HTMLElement | null;
-
-/**
- * The default skin — the storefront editor's approved look, in classes that
- * `efficient-easel/menu.css` dresses.
- *
- * ⚠️ `es-editor` IS LOAD-BEARING AND IS NOT DECORATION. `shell.css` declares
- * every `--es-*` on `.es-editor`, deliberately never on `:root`, so importing it
- * themes an editor root and leaks nothing into the host page — the campaign
- * designer renders INSIDE the admin DOM. The box is portalled to
- * `document.body`, which is OUTSIDE that root, so without the class here every
- * `var(--es-*)` in `menu.css` resolves to nothing: the background collapses to
- * transparent and the border to `currentColor`. The result is markup that is
- * present, answers every query a test can ask, and cannot be seen. Pinned by
- * `tests/menu-layer.test.tsx` (f).
+ * The editors' item list, drawn with the shell's menu pieces (harness UI-16,
+ * UI-24; efficient-easel#199 step 4).
+ *
+ * What a menu OFFERS stays a list of {@link EaselContextMenuItem}s — the node
+ * menu, the Layers rows, the canvas block and the list field build theirs from
+ * registries, and so do the hosts — and this turns one into the shell's
+ * `PopupMenuItem` / `PopupSubmenu` / `PopupMenuDivider` / `PopupMenuLabel`.
+ * Render it inside the shell's `ContextMenu` (or `EaselContextMenu`, which
+ * does that for you):
+ *
+ *     <ContextMenu {...menu.props}>
+ *       <EaselMenuItems items={items} onClose={menu.close} />
+ *     </ContextMenu>
+ *
+ *   `'—'`        a `PopupMenuDivider`;
+ *   `header`     a `PopupMenuLabel` (the first names the menu: `menuLabel`);
+ *   `children`   a `PopupSubmenu` — the flyout the shell now has, which is
+ *                what retires UI-16's one exception (the email canvas block
+ *                menu's layer ladder). One level, as before: a child's own
+ *                `children` are not drawn;
+ *   otherwise    a `PopupMenuItem`, `danger` kept.
+ *
+ * A root item closes the menu after it acts (a `PopupMenuItem` at the root
+ * leaves that to its caller); one in a submenu closes it through the shell.
+ * `icon` and `shortcut` are drawn only when given, in the `es-menu-*` columns
+ * `menu.css` lays out — no Tailwind class is written here (the hosts' Tailwind
+ * does not scan this package); a flyout's tick is the shell's (`checked`).
  */
-declare const ES_MENU_SKIN: EaselContextMenuSkin;
+declare function EaselMenuItems({ items, onClose }: {
+    items: readonly EaselContextMenuItem[];
+    onClose: () => void;
+}): react.JSX.Element;
+/** The menu's accessible name: its first caption, as it has always been. */
+declare function menuLabel(items: readonly EaselContextMenuItem[]): string | undefined;
 
-export { ES_MENU_SKIN, EaselContextMenu, EaselContextMenuProps, EaselContextMenuSkin, menuPortalTarget };
+export { EaselContextMenu, EaselContextMenuItem, EaselContextMenuProps, EaselMenuItems, menuLabel };

package/dist/menu/index.js

@@ -1 +1 @@
-export{menuPortalTarget}from"../chunk-RW4XBUUW.js";export{ES_MENU_SKIN,EaselContextMenu}from"../chunk-KTVH2ZRL.js";
+export{EaselContextMenu}from"../chunk-BXMXTO36.js";export{EaselMenuItems,menuLabel}from"../chunk-EA2HTX37.js";

package/dist/menu/menu.css

@@ -1,265 +1,56 @@
 /*
- * efficient-easel/menu.css — the right-click menu box (card 66400.d).
+ * efficient-easel/menu.css — the columns of an editor menu row.
  *
- * THE VALUES ARE NOT OURS. They are the storefront editor's shipped
- * `.sf-blockmenu` / `.sf-blockmenu-item` — `efficient-storefront/components/storefront-editor.css`,
- * read at line 1165 — which is the look card 66400.d names for the menu Lewis
- * approved on 2026-08-31. Each `--sf-*` there is already an alias of the
- * matching `--es-*` here (card 66024), so the look is expressed with no new
- * value except the three noted below. Change one only to track a deliberate
- * change THERE. Pinned by `tests/menu-box-css.test.ts`.
+ * The box and the rows are efficient-shell's `ContextMenu` and `PopupMenu`
+ * pieces since 1.0.0 (efficient-easel#199, harness UI-16 and UI-24), dressed
+ * by `efficient-shell/ui.css`. A row from `EaselMenuItems` may carry three
+ * things the shell's row has no slot for, and this sheet lays them out with
+ * the shell's tokens and nothing else:
  *
- * ⚠️ THREE VALUES ARE UNDER A LIVE QUESTION, and each is behind ONE var so
- * settling it is a three-line change. The drawing Lewis approved that same day
- * (`mockups/editor-add-and-context-v1.html`, its `.ctx` rule) is a FLOATING
- * menu, where `.sf-blockmenu` is an in-flow picker, and it holds different
- * numbers for exactly the three things that difference would move:
+ *   .es-menu-icon      the glyph before the label;
+ *   .es-menu-label     the label, which takes the room between them;
+ *   .es-menu-shortcut  the keyboard shortcut, right-aligned and quieter.
  *
- *              .sf-blockmenu (shipped)          .ctx (the drawing)
- *   radius     8px                              9px
- *   shadow     0 6px 18px rgba(0,0,0,.08)       0 10px 28px rgba(0,0,0,.16)
- *   min-width  220px (the admin box's own)      186px
+ * A flyout's "you are here" tick is the shell's (`PopupMenuItem` `checked`,
+ * efficient-shell 4.165.0), not a column of this sheet's.
  *
- * This sheet ships `.sf-blockmenu`'s, per the card's own constraint. The
- * question is with the fork that owns the design.
- *
- * LIGHT only — neither editing surface has a dark mode (owner, 2026-08-06), so
- * there is no dark counterpart block here. Do not add one.
- *
- * Import once from a client entry / global stylesheet:
+ * Import once, after the shell's sheet:
+ *     import 'efficient-shell/ui.css';
  *     import 'efficient-easel/menu.css';
  */
-
-/* ── this sheet's own vars ──────────────────────────────────────────────────
-   ON `.es-editor`, the chrome root, following `rail.css` (which owns
-   `--es-rail-*`) and `panel.css` (`--es-row-gap`): the sheet that owns the
-   rules owns its tokens, and `shell.css` stays a verbatim mirror of the
-   storefront editor's `--sf-*` block. None of these is a shell token.
-
-   ⚠️ The box itself names `es-editor` (see `skin.ts`) — it is portalled to
-   `document.body`, outside the editor tree, so this is also where it picks these
-   up. Read that note before moving them.
-
-   ⛔ CUSTOM PROPERTIES ONLY IN THIS BLOCK. Never a paint property.
-
-   `.es-editor` is not this package's own element — it is the class each editor
-   puts on ITS OWN chrome root, and the campaign designer puts it on a root that
-   lives INSIDE the admin portal's DOM (card 66024 made that the mechanism by
-   which the designer is themed; `CampaignDesigner.tsx` adds the class and
-   `campaignBlocks.css` aliases its `--cd-*` onto these values). A custom
-   property declared here is inert until something reads it. A `background`, a
-   `padding`, a `font` — anything that PAINTS — is not: it applies to that root
-   the moment this sheet is imported, in every editor that imports it, and in
-   the admin portal's own document.
-
-   Audited on 2026-09-02 across every sheet in this package that opens an
-   `.es-editor` block, and the honest number is zero:
-
-       shell.css   67 declarations, 67 custom, 0 paint
-       panel.css   11 declarations, 11 custom, 0 paint
-       menu.css     7 declarations,  7 custom, 0 paint
-
-   ⚠️ Nothing enforces this — it is a rule with no test behind it. If you are
-   adding a declaration here, you are the check. */
-.es-editor {
-  /* HOW FAR THE BOX FLOATS OFF THE PAGE BEHIND IT.
-     The drawing's value. `.sf-blockmenu` — the shop's shipped Add-block picker
-     — carries `0 6px 18px rgba(0,0,0,.08)`, and this is deliberately heavier:
-     that picker sits IN FLOW inside a panel, while this box FLOATS over
-     content, and a floating box has to separate itself from whatever is under
-     it. The drawing's own header cites `.sf-blockmenu`, so its author had that
-     value open and moved off it on purpose.
-     This is the CONTEXT half of the split described on `--es-menu-hover-bg`:
-     it follows the situation, not the neighbour. */
-  --es-menu-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
-
-  /* HOW SOFT ITS CORNERS ARE. The drawing's 9px, one more than the in-flow
-     picker's 8 — the same floating-vs-in-flow distinction. */
-  --es-menu-radius: 9px;
-
-  /* THE NARROWEST THE BOX MAY GET — a floor, not a width.
-     A menu that shrank to its longest label would change width with its
-     contents, so a merchant's pointer would land on a different row depending
-     on which label happened to be longest. The drawing's 186px. It is also the
-     width the flyout measures against when it decides to flip left. */
-  --es-menu-min-w: 186px;
-
-  /* WHAT A ROW DOES UNDER THE POINTER — the one thing a merchant watches move.
-     ⚠️ THIS ONE DOES NOT FOLLOW THE DRAWING, AND THAT IS DELIBERATE. The
-     drawing's `.ctx` washes the row GREY and leaves the text alone. This washes
-     the accent tint and turns the text blue, which is `.sf-blockmenu` — the Add
-     menu, one keystroke away in the same editor.
-
-     Owner ruling, 2026-09-02, recorded as a dated amendment in the
-     `owner-design-rulings` skill ("the right-click menu hovers BLUE, not the
-     drawing's grey"): it was put to him rather than decided, because two menus
-     in one editor highlighting differently is a rule-zero failure. His word was
-     blue.
-
-     ⛔ DO NOT "RESTORE" THE DRAWING'S GREY. The split from the three values
-     above is not an inconsistency, it is the rule:
-
-         hover                interaction grammar -> follows the NEIGHBOUR
-         shadow / radius /    context             -> follows the SITUATION
-         min-width                                   (this box floats; the Add
-                                                      menu sits in flow)
-
-     Still behind a var, because that is what made asking him cost nothing. */
-  --es-menu-hover-bg: var(--es-accent-tint);
-  --es-menu-hover-fg: var(--es-accent);
-
-  /* A ROW THAT DESTROYS SOMETHING.
-     ⚠️ The drawing is the ONLY reference for this one — `.sf-blockmenu` has no
-     danger row at all, so nothing is being overridden here. Its `#b91c1c` is
-     exactly `--es-danger-strong`, so it is read from the token layer rather
-     than copied as a literal. */
-  --es-menu-danger-fg: var(--es-danger-strong);
-
-  /* THE SHORTCUT COLUMN'S INK — quieter than a label, because a shortcut is a
-     reminder and never the thing being read; but it IS read, so it is a grey
-     that can be: `--es-muted`, 4.8:1 on the box at 11px.
-     ⚠️ It was the drawing's own `#b6bcc4` until 2026-10-07 — lighter than
-     `--es-disabled`, 1.9:1 on white, the lowest contrast of any text in the
-     package. A second host's axe-core run failed it (WCAG AA, 4.5:1) and the
-     host put `--es-muted` here itself; this is that, at the source. Still
-     behind ONE var, so the design can pick another grey that can be read.
-     Held by ratio in tests/contrast-small-text.test.ts. */
-  --es-menu-shortcut-fg: var(--es-muted);
-}
-
-
-/* ── the box ────────────────────────────────────────────────────────────────
-   FIXED and lifted on purpose: it hangs OVER the panel it was opened from
-   rather than inside it, so a left panel dragged to its 220px minimum — which
-   clips its own overflow — cannot cut it off. Measured in Chromium at both
-   panel widths; see `tests/fixtures/menu-clipping.html`. */
-.es-menu {
-  position: fixed;
-  z-index: 9999;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: var(--es-menu-min-w);
-  /* A box that could grow past the viewport would be unreachable on its far
-     side whatever the edge-flip did. */
-  max-width: calc(100vw - 16px);
-  padding: 4px;
-  border: 1px solid var(--es-line);
-  border-radius: var(--es-menu-radius);
-  background: var(--es-panel);
-  box-shadow: var(--es-menu-shadow);
-  font-family: var(--es-font);
-  /* For `maxHeight`. The flyout is portalled separately BECAUSE of this: a CSS
-     overflow that is not `visible` on one axis clips the other too, so an
-     in-flow flyout would be cut off at this box's edge. */
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
-
-/* ── a row ──────────────────────────────────────────────────────────────── */
-.es-menu-item {
-  display: flex;
+.es-menu-icon {
+  display: inline-flex;
+  flex: none;
   align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 8px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--es-text);
-  font: inherit;
-  font-size: 12.5px;
-  text-align: left;
-  cursor: pointer;
-}
-
-/* The one thing a merchant watches move — see `--es-menu-hover-*` above for
-   which reference this follows and why it is behind a var. */
-.es-menu-item:hover {
-  background: var(--es-menu-hover-bg);
-  color: var(--es-menu-hover-fg);
-}
-
-.es-menu-item:focus-visible {
-  outline: 2px solid var(--es-accent-ring);
-  outline-offset: -2px;
-}
-
-.es-menu-item.is-danger {
-  color: var(--es-menu-danger-fg);
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  color: var(--ink-muted);
 }
-/* The drawing gives a danger row no hover of its own: it takes the same grey as
-   every other row and KEEPS its red, rather than washing red as well. Stated as
-   its own rule because `.es-menu-item:hover` would otherwise repaint the text. */
-.es-menu-item.is-danger:hover {
-  background: var(--es-menu-hover-bg);
-  color: var(--es-menu-danger-fg);
+.es-menu-icon svg {
+  width: 14px;
+  height: 14px;
 }
-
-/* ── the parts of a row ─────────────────────────────────────────────────── */
 .es-menu-label {
-  flex: 1;
-}
-/* A state name in a flyout can be long; a row in the box never is. */
-.es-menu-label-sub {
+  flex: 1 1 auto;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-.es-menu-chevron {
-  color: var(--es-icon);
-}
-
-/* The drawing's `.ci` — a fixed 16px column so labels line up whether or not a
-   row has a glyph, exactly as the tick column does in a flyout. */
-.es-menu-icon {
-  flex: none;
-  width: 16px;
-  text-align: center;
-  color: var(--es-muted);
-  font-size: 11px;
-}
-
-/* The drawing's `.k`. `margin-left: auto` is what right-aligns it, so it works
-   whether or not the row also carries a chevron. */
 .es-menu-shortcut {
+  flex: none;
   margin-left: auto;
-  color: var(--es-menu-shortcut-fg);
-  font-size: 11px;
-}
-/* On the row that is pointed at the ground is tinted, and the grey that passes
-   on white does not pass on the tint (4.4:1). So the shortcut takes the ROW's
-   ink there — the accent on a plain row (4.7:1), the red on one that destroys
-   (5.9:1): one ink per row, and no new colour. */
-.es-menu-item:hover .es-menu-shortcut {
+  padding-left: 16px;
+  color: var(--ink-muted);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+/* On the row the pointer or the keys are on, whose ground the shell tints,
+   the shortcut takes the row's own ink: one ink per row, and no new colour. */
+[data-context-menu] button:hover .es-menu-shortcut,
+[data-context-menu] button:focus-visible .es-menu-shortcut,
+[data-popup-submenu-panel] button:hover .es-menu-shortcut,
+[data-popup-submenu-panel] button:focus-visible .es-menu-shortcut {
   color: inherit;
 }
-
-/* Present on every row of a flyout that uses one, so the labels line up whether
-   or not the row is the state you are already on. */
-.es-menu-tick {
-  flex: none;
-  width: 12px;
-  color: var(--es-accent);
-}
-
-/* ── a caption, and a separator ─────────────────────────────────────────── */
-.es-menu-header {
-  padding: 8px 8px 4px;
-  color: var(--es-muted);
-  font-size: 10px;
-  font-weight: 500;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-/* AIR, NOT A LINE (card 66350). The owner has asked for divider hairlines to
-   go, more than once, and `tests/panel-no-divider-lines.test.ts` sweeps every
-   stylesheet this package ships for a one-sided border — this one included. A
-   `'—'` item still separates; it does it with a gap. With the box's own 1px
-   `gap` either side, that is 7px between groups against 1px between rows. */
-.es-menu-divider {
-  height: 5px;
-}

package/dist/node-ops/index.d.ts

@@ -1,7 +1,7 @@
 export { A as AfterRemove, I as ItemSelector, N as NodeSelection, P as Planned, S as StepBounds, c as canStep, f as fromItemSelector, p as parentStep, a as planDuplicate, b as planMove, d as planPaste, e as planRemove, g as planSetProps, h as planStep, t as toItemSelector } from '../plan-DChbUXdS.js';
 export { C as ClipboardEntry, N as NodeClipboard, a as NodeOps, b as NodeOpsHost, c as createNodeClipboard, u as useNodeOps } from '../useNodeOps-BF0fQsif.js';
 import { ReactNode } from 'react';
-import { E as EaselContextMenuItem } from '../types-Djdq6Xkd.js';
+import { E as EaselContextMenuItem } from '../types-BsyPh6EW.js';
 import { N as NodeMenuWords } from '../words-DMG4dYq2.js';
 import '../types-41704JE4.js';