efficient-easel 0.99.1 → 0.100.0

package/dist/menu/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { a as EditorContextMenuProps, b as EditorContextMenuSkin } from '../types-pGBXevBU.js';
-export { E as EditorContextMenuItem } from '../types-pGBXevBU.js';
+import { a as EaselContextMenuProps, b as EaselContextMenuSkin } from '../types-Djdq6Xkd.js';
+export { E as EaselContextMenuItem } from '../types-Djdq6Xkd.js';
 
 /**
  * The right-click menu box, shared by both editors (card 66400.d).
@@ -17,7 +17,7 @@ export { E as EditorContextMenuItem } from '../types-pGBXevBU.js';
  * 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 EditorContextMenuSkin}, the default is the
+ * 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
@@ -28,7 +28,62 @@ export { E as EditorContextMenuItem } from '../types-pGBXevBU.js';
  * server component may import the module and must render it inside the host's
  * client boundary.
  */
-declare function EditorContextMenu({ x, y, items, onClose, maxHeight, skin, portalTo, }: EditorContextMenuProps): react.ReactPortal | null;
+declare function EaselContextMenu({ x, y, items, onClose, maxHeight, skin, portalTo, }: EaselContextMenuProps): react.ReactPortal | 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
@@ -44,6 +99,6 @@ declare function EditorContextMenu({ x, y, items, onClose, maxHeight, skin, port
  * present, answers every query a test can ask, and cannot be seen. Pinned by
  * `tests/menu-layer.test.tsx` (f).
  */
-declare const ES_MENU_SKIN: EditorContextMenuSkin;
+declare const ES_MENU_SKIN: EaselContextMenuSkin;
 
-export { ES_MENU_SKIN, EditorContextMenu, EditorContextMenuProps, EditorContextMenuSkin };
+export { ES_MENU_SKIN, EaselContextMenu, EaselContextMenuProps, EaselContextMenuSkin, menuPortalTarget };

package/dist/menu/index.js

@@ -1,15 +1,15 @@
-import{useRef as e,useState as n,useLayoutEffect as t,useEffect as l}from"react";import{createPortal as r}from"react-dom";import{jsxs as i,Fragment as a,jsx as o}from"react/jsx-runtime";var c={menu:"es-editor es-menu",menuSub:"es-editor es-menu",item:"es-menu-item",itemDanger:"es-menu-item is-danger",divider:"es-menu-divider",header:"es-menu-header",icon:"es-menu-icon",shortcut:"es-menu-shortcut",label:"es-menu-label",labelSub:"es-menu-label es-menu-label-sub",chevron:"es-menu-chevron",tick:"es-menu-tick"};function u({x:u,y:s,items:d,onClose:m,maxHeight:h,skin:b,portalTo:y}){const p=e(null),g=e(null),[f,w]=n(null),[v,x]=n({x:u,y:s}),[N,k]=n({x:u,y:s});if(N.x===u&&N.y===s||(k({x:u,y:s}),x({x:u,y:s})),t(()=>{const e=p.current;if(!e)return;const{width:n,height:t}=e.getBoundingClientRect(),l=window.innerWidth,r=window.innerHeight;let i=s;s+t>r-8&&(i=s-t>=8?s-t:Math.max(8,r-t-8));let a=u;u+n>l-8&&(a=u-n>=8?u-n:Math.max(8,l-n-8)),a===v.x&&i===v.y||x({x:a,y:i})},[u,s,d,v.x,v.y]),l(()=>{const e=document.activeElement;return p.current?.querySelector('[role="menuitem"]')?.focus(),()=>e?.focus?.()},[]),l(()=>{const e=e=>{const n=e.target;g.current?.contains(n)||p.current&&!p.current.contains(n)&&m()},n=e=>{"Escape"===e.key&&m()},t=setTimeout(()=>{window.addEventListener("mousedown",e),window.addEventListener("contextmenu",e),window.addEventListener("keydown",n)},0);return()=>{clearTimeout(t),window.removeEventListener("mousedown",e),window.removeEventListener("contextmenu",e),window.removeEventListener("keydown",n)}},[m]),0===d.length)return null;const C=b??c,E=e=>e.danger?C.itemDanger:C.item,S=({on:e})=>/* @__PURE__ */o("span",{className:C.tick,"aria-hidden":"true",children:e?"✓":""}),L=({of:e})=>null==e.icon?null:/* @__PURE__ */o("span",{className:C.icon,"aria-hidden":"true",children:e.icon}),T=({of:e})=>null==e.shortcut?null:/* @__PURE__ */o("span",{className:C.shortcut,"aria-hidden":"true",children:e.shortcut}),B=e=>null!=e.icon||null!=e.shortcut,M=(e,n,t)=>{if(!e.children?.length)return void w(null);const l=t.getBoundingClientRect(),r=p.current,i=r?parseFloat(getComputedStyle(r).minWidth):NaN,a=Number.isFinite(i)&&i>0?i:r?.getBoundingClientRect().width??0,o=l.right+a>window.innerWidth-8?l.left-a:l.right;w({i:n,x:Math.max(8,o),y:l.top})},F=f?d[f.i]:null,H=e=>({...C.surface,...e});return r(
-/* @__PURE__ */i(a,{children:[
-/* @__PURE__ */o("div",{ref:p,"data-es-menu":"",role:"menu","aria-label":d.find(e=>e.header)?.label,className:C.menu,style:H({left:v.x,top:v.y,maxHeight:h||void 0}),children:d.map((e,n)=>"—"===e.label?
-/* @__PURE__ */o("div",{role:"separator",className:C.divider},n):e.header?/* @__PURE__ */o("div",{className:C.header,children:e.label},n):e.children?.length?/* @__PURE__ */i("button",{type:"button",role:"menuitem","aria-haspopup":"menu","aria-expanded":f?.i===n,onMouseEnter:t=>M(e,n,t.currentTarget),onFocus:t=>M(e,n,t.currentTarget),onClick:t=>M(e,n,t.currentTarget),className:E(e),style:C.itemStyle,children:[
-/* @__PURE__ */o(L,{of:e}),
-/* @__PURE__ */o("span",{className:C.label,children:e.label}),
-/* @__PURE__ */o(T,{of:e}),
-/* @__PURE__ */o("span",{"aria-hidden":"true",className:C.chevron,children:"›"})]},n):/* @__PURE__ */o("button",{type:"button",role:"menuitem",onMouseEnter:()=>w(null),onClick:()=>{e.onClick(),m()},className:E(e),style:C.itemStyle,children:B(e)?/* @__PURE__ */i(a,{children:[
-/* @__PURE__ */o(L,{of:e}),
-/* @__PURE__ */o("span",{className:C.label,children:e.label}),
-/* @__PURE__ */o(T,{of:e})]}):e.label},n))}),F?.children?.length&&f?/* @__PURE__ */o("div",{ref:g,"data-es-menu":"",role:"menu","aria-label":F.label,className:C.menuSub??C.menu,style:H({left:f.x,top:f.y}),children:F.children.map((e,n)=>/* @__PURE__ */i("button",{type:"button",role:"menuitemradio","aria-checked":Boolean(e.checked),onClick:()=>{e.onClick(),m()},className:E(e),style:C.itemStyle,children:[
-/* @__PURE__ */o(S,{on:Boolean(e.checked)}),
-/* @__PURE__ */o(L,{of:e}),
-/* @__PURE__ */o("span",{className:C.labelSub??C.label,children:e.label}),
-/* @__PURE__ */o(T,{of:e})]},n))}):null]}),y??document.body)}export{c as ES_MENU_SKIN,u as EditorContextMenu};
+import{useRef as e,useState as n,useLayoutEffect as t,useEffect as r}from"react";import{createPortal as l}from"react-dom";import{jsxs as i,Fragment as o,jsx as a}from"react/jsx-runtime";var c={menu:"es-editor es-menu",menuSub:"es-editor es-menu",item:"es-menu-item",itemDanger:"es-menu-item is-danger",divider:"es-menu-divider",header:"es-menu-header",icon:"es-menu-icon",shortcut:"es-menu-shortcut",label:"es-menu-label",labelSub:"es-menu-label es-menu-label-sub",chevron:"es-menu-chevron",tick:"es-menu-tick"};function s({x:s,y:u,items:d,onClose:m,maxHeight:h,skin:b,portalTo:p}){const f=e(null),y=e(null),[g,v]=n(null),[w,x]=n({x:s,y:u}),[k,N]=n({x:s,y:u});if(k.x===s&&k.y===u||(N({x:s,y:u}),x({x:s,y:u})),t(()=>{const e=f.current;if(!e)return;const{width:n,height:t}=e.getBoundingClientRect(),r=window.innerWidth,l=window.innerHeight;let i=u;u+t>l-8&&(i=u-t>=8?u-t:Math.max(8,l-t-8));let o=s;s+n>r-8&&(o=s-n>=8?s-n:Math.max(8,r-n-8)),o===w.x&&i===w.y||x({x:o,y:i})},[s,u,d,w.x,w.y]),r(()=>{const e=document.activeElement;return f.current?.querySelector('[role="menuitem"]')?.focus(),()=>e?.focus?.()},[]),r(()=>{const e=e=>{const n=e.target;y.current?.contains(n)||f.current&&!f.current.contains(n)&&m()},n=e=>{"Escape"===e.key&&m()},t=setTimeout(()=>{window.addEventListener("mousedown",e),window.addEventListener("contextmenu",e),window.addEventListener("keydown",n)},0);return()=>{clearTimeout(t),window.removeEventListener("mousedown",e),window.removeEventListener("contextmenu",e),window.removeEventListener("keydown",n)}},[m]),0===d.length)return null;const C=b??c,E=e=>e.danger?C.itemDanger:C.item,S=({on:e})=>/* @__PURE__ */a("span",{className:C.tick,"aria-hidden":"true",children:e?"✓":""}),L=({of:e})=>null==e.icon?null:/* @__PURE__ */a("span",{className:C.icon,"aria-hidden":"true",children:e.icon}),T=({of:e})=>null==e.shortcut?null:/* @__PURE__ */a("span",{className:C.shortcut,"aria-hidden":"true",children:e.shortcut}),B=e=>null!=e.icon||null!=e.shortcut,M=(e,n,t)=>{if(!e.children?.length)return void v(null);const r=t.getBoundingClientRect(),l=f.current,i=l?parseFloat(getComputedStyle(l).minWidth):NaN,o=Number.isFinite(i)&&i>0?i:l?.getBoundingClientRect().width??0,a=r.right+o>window.innerWidth-8?r.left-o:r.right;v({i:n,x:Math.max(8,a),y:r.top})},D=g?d[g.i]:null,F=e=>({...C.surface,...e});return l(
+/* @__PURE__ */i(o,{children:[
+/* @__PURE__ */a("div",{ref:f,"data-es-menu":"",role:"menu","aria-label":d.find(e=>e.header)?.label,className:C.menu,style:F({left:w.x,top:w.y,maxHeight:h||void 0}),children:d.map((e,n)=>"—"===e.label?
+/* @__PURE__ */a("div",{role:"separator",className:C.divider},n):e.header?/* @__PURE__ */a("div",{className:C.header,children:e.label},n):e.children?.length?/* @__PURE__ */i("button",{type:"button",role:"menuitem","aria-haspopup":"menu","aria-expanded":g?.i===n,onMouseEnter:t=>M(e,n,t.currentTarget),onFocus:t=>M(e,n,t.currentTarget),onClick:t=>M(e,n,t.currentTarget),className:E(e),style:C.itemStyle,children:[
+/* @__PURE__ */a(L,{of:e}),
+/* @__PURE__ */a("span",{className:C.label,children:e.label}),
+/* @__PURE__ */a(T,{of:e}),
+/* @__PURE__ */a("span",{"aria-hidden":"true",className:C.chevron,children:"›"})]},n):/* @__PURE__ */a("button",{type:"button",role:"menuitem",onMouseEnter:()=>v(null),onClick:()=>{e.onClick(),m()},className:E(e),style:C.itemStyle,children:B(e)?/* @__PURE__ */i(o,{children:[
+/* @__PURE__ */a(L,{of:e}),
+/* @__PURE__ */a("span",{className:C.label,children:e.label}),
+/* @__PURE__ */a(T,{of:e})]}):e.label},n))}),D?.children?.length&&g?/* @__PURE__ */a("div",{ref:y,"data-es-menu":"",role:"menu","aria-label":D.label,className:C.menuSub??C.menu,style:F({left:g.x,top:g.y}),children:D.children.map((e,n)=>/* @__PURE__ */i("button",{type:"button",role:"menuitemradio","aria-checked":Boolean(e.checked),onClick:()=>{e.onClick(),m()},className:E(e),style:C.itemStyle,children:[
+/* @__PURE__ */a(S,{on:Boolean(e.checked)}),
+/* @__PURE__ */a(L,{of:e}),
+/* @__PURE__ */a("span",{className:C.labelSub??C.label,children:e.label}),
+/* @__PURE__ */a(T,{of:e})]},n))}):null]}),p??document.body)}var u=/\b(transform|translate|rotate|scale|perspective|filter|backdrop-filter|contain)\b/;function d(e){const n=n=>e.getPropertyValue(n).trim(),t=(e,t)=>{const r=n(e);return""!==r&&!t.includes(r)};return!!t("transform",["none"])||(!!(t("translate",["none"])||t("rotate",["none"])||t("scale",["none"]))||(!!t("perspective",["none"])||(!!t("filter",["none"])||(!(!t("backdrop-filter",["none"])&&!t("-webkit-backdrop-filter",["none"]))||(!!/\b(layout|paint|strict|content)\b/.test(n("contain"))||(!!t("container-type",["normal"])||(!!t("content-visibility",["visible"])||u.test(n("will-change")))))))))}function m(e){const n=e?.ownerDocument,t=n?.defaultView;if(!(e&&n&&t&&e.isConnected))return null;for(let r=e;r&&r!==n.body&&r!==n.documentElement;r=r.parentElement)if(d(t.getComputedStyle(r)))return null;return e}export{c as ES_MENU_SKIN,s as EaselContextMenu,m as menuPortalTarget};

package/dist/menu/menu.css

@@ -115,12 +115,16 @@
      than copied as a literal. */
   --es-menu-danger-fg: var(--es-danger-strong);
 
-  /* THE SHORTCUT COLUMN'S INK — quieter than a label, quieter than `--es-muted`,
-     because a shortcut is a reminder and never the thing being read.
-     ⚠️ The one value here with no shell token behind it: the drawing's own
-     `#b6bcc4`, which is lighter than `--es-disabled` (#9ca3af). Named here
-     rather than reaching for a token that is not this colour. */
-  --es-menu-shortcut-fg: #b6bcc4;
+  /* 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);
 }
 
 
@@ -225,6 +229,13 @@
   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 {
+  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. */

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

@@ -1,8 +1,8 @@
 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 EditorContextMenuItem } from '../types-pGBXevBU.js';
-import { N as NodeMenuWords } from '../words-DOhF-4D4.js';
+import { E as EaselContextMenuItem } from '../types-Djdq6Xkd.js';
+import { N as NodeMenuWords } from '../words-DMG4dYq2.js';
 import '../types-41704JE4.js';
 
 /**
@@ -10,7 +10,7 @@ import '../types-41704JE4.js';
  *
  * The campaign designer (`blockMenuItems`) and the storefront editor
  * (`nodeMenuItems`) each built their own, in the same row type and drawn by the
- * same `EditorContextMenu`, and they had drifted: different group order, the
+ * same `EaselContextMenu`, and they had drifted: different group order, the
  * layer flyout in a different group, Copy / Cut / Paste / Rename on one side
  * only, and no pinned-block rule on the storefront. The ORDER and the GROUPS
  * are decided here once:
@@ -34,7 +34,7 @@ import '../types-41704JE4.js';
  */
 
 type NodeMenuRowId = 'layer' | 'addInside' | 'duplicate' | 'moveUp' | 'moveDown' | 'copy' | 'cut' | 'paste' | 'rename' | 'hide' | 'show' | 'upLevel' | 'delete';
-type RowLook = Partial<Pick<EditorContextMenuItem, 'label' | 'icon' | 'shortcut' | 'danger'>> & {
+type RowLook = Partial<Pick<EaselContextMenuItem, 'label' | 'icon' | 'shortcut' | 'danger'>> & {
     /** `null` draws the row with no glyph. */
     icon?: ReactNode | null;
 };
@@ -43,7 +43,7 @@ interface NodeMenuOptions {
     title: string;
     /** The layer flyout: its entries (built by the host from the ancestor chain) and which group it sits in. */
     layer?: {
-        items: EditorContextMenuItem[];
+        items: EaselContextMenuItem[];
         group?: 'pick' | 'change';
     };
     /** Each present action is offered; an absent one is not. */
@@ -69,7 +69,7 @@ interface NodeMenuOptions {
         delete?: () => void;
     };
     /** The host's style rows (styleMenuItems). Offered on pinned blocks too. */
-    style?: EditorContextMenuItem[];
+    style?: EaselContextMenuItem[];
     /**
      * The block cannot move or be removed: show this line when nothing else is on
      * offer. It is a CAPTION, like the title — it says why the menu is short, and
@@ -79,13 +79,13 @@ interface NodeMenuOptions {
     /** Per-row look overrides: label, icon (`null` = none), shortcut, danger. */
     rows?: Partial<Record<NodeMenuRowId, RowLook>>;
     /** Host rows added to the end of a group. */
-    extras?: Partial<Record<'pick' | 'make' | 'change' | 'remove', EditorContextMenuItem[]>>;
+    extras?: Partial<Record<'pick' | 'make' | 'change' | 'remove', EaselContextMenuItem[]>>;
     /**
-     * The rows' own words in the host's language: `useEditorStrings().menu`
+     * The rows' own words in the host's language: `useEaselStrings().menu`
      * (0.95.0). Left out, English. A row's `rows` override still wins.
      */
     words?: NodeMenuWords;
 }
-declare function nodeMenuItems(options: NodeMenuOptions): EditorContextMenuItem[];
+declare function nodeMenuItems(options: NodeMenuOptions): EaselContextMenuItem[];
 
 export { type NodeMenuOptions, type NodeMenuRowId, NodeMenuWords, nodeMenuItems };

package/dist/node-ops/index.js

@@ -1 +1 @@
-import{DEFAULT_NODE_MENU_WORDS as e}from"../chunk-WK3AFPXY.js";export{canStep,fromItemSelector,parentStep,planDuplicate,planMove,planPaste,planRemove,planSetProps,planStep,toItemSelector,useNodeOps}from"../chunk-D2BCHTQR.js";import{TrashIcon as n,EyeIcon as t,EyeOffIcon as o,RenameIcon as p,PasteIcon as l,CopyIcon as c,MoveDownIcon as s,MoveUpIcon as a,DuplicateIcon as i,AddIcon as r,LayersIcon as u}from"../chunk-PI26YXYD.js";import"../chunk-KRXQM65X.js";import"../chunk-NKB3KVAB.js";import{jsx as h}from"react/jsx-runtime";function d(){let e=null;const n=/* @__PURE__ */new Set;return{get:()=>e,set(t){e=t;for(const e of[...n])e()},subscribe:e=>(n.add(e),()=>n.delete(e))}}var m={layer:{icon:/* @__PURE__ */h(u,{})},addInside:{icon:/* @__PURE__ */h(r,{})},duplicate:{icon:/* @__PURE__ */h(i,{})},moveUp:{icon:/* @__PURE__ */h(a,{})},moveDown:{icon:/* @__PURE__ */h(s,{})},copy:{icon:/* @__PURE__ */h(c,{}),shortcut:"⌘C"},cut:{icon:/* @__PURE__ */h(c,{}),shortcut:"⌘X"},paste:{icon:/* @__PURE__ */h(l,{}),shortcut:"⌘V"},rename:{icon:/* @__PURE__ */h(p,{})},hide:{icon:/* @__PURE__ */h(o,{})},show:{icon:/* @__PURE__ */h(t,{})},upLevel:{},delete:{icon:/* @__PURE__ */h(n,{}),danger:!0}};function v(n){const{actions:t,rows:o={},extras:p={},words:l=e}=n,c=e=>({...m[e],label:l[e],...o[e]}),s=(e,n,t)=>{const o=c(e),p={label:t??o.label??e,onClick:n};return o.icon&&(p.icon=o.icon),o.shortcut&&(p.shortcut=o.shortcut),o.danger&&(p.danger=!0),p},a=()=>{const e=c("layer"),t={label:e.label??l.layer,onClick:()=>{},children:n.layer.items};return e.icon&&(t.icon=e.icon),t},i=[],r=[],u=[],h=[],d=!!n.layer&&n.layer.items.length>1;if(d&&"pick"===(n.layer.group??"pick")&&i.push(a()),t.addInside&&r.push(s("addInside",t.addInside)),t.duplicate&&r.push(s("duplicate",t.duplicate)),t.moveUp&&r.push(s("moveUp",t.moveUp)),t.moveDown&&r.push(s("moveDown",t.moveDown)),t.copy&&r.push(s("copy",t.copy)),t.cut&&r.push(s("cut",t.cut)),t.paste){const e=c("paste").label??l.paste;r.push(s("paste",t.paste.run,l.pasteNamed({paste:e,label:t.paste.label})))}t.rename&&u.push(s("rename",t.rename)),t.hide&&u.push(t.hide.hidden?s("show",t.hide.run):s("hide",t.hide.run)),d&&"change"===n.layer.group&&u.push(a()),t.upLevel&&u.push(s("upLevel",t.upLevel)),t.delete&&h.push(s("delete",t.delete)),i.push(...p.pick??[]),r.push(...p.make??[]),u.push(...p.change??[]),h.push(...p.remove??[]);const v=[i,r,n.style??[],u,h].filter(e=>e.length>0),g=i.length+r.length+u.length+h.length===0,k=[{label:n.title,header:!0,onClick:()=>{}}];return g&&n.pinnedLine&&k.push({label:n.pinnedLine,header:!0,onClick:()=>{}}),v.forEach((e,t)=>{(t>0||g&&n.pinnedLine)&&k.push({label:"—",onClick:()=>{}}),k.push(...e)}),k}export{d as createNodeClipboard,v as nodeMenuItems};
+import{DEFAULT_NODE_MENU_WORDS as e}from"../chunk-WK3AFPXY.js";export{canStep,fromItemSelector,parentStep,planDuplicate,planMove,planPaste,planRemove,planSetProps,planStep,toItemSelector,useNodeOps}from"../chunk-D2BCHTQR.js";import{TrashIcon as n,EyeIcon as t,EyeOffIcon as o,RenameIcon as p,PasteIcon as l,CopyIcon as c,MoveDownIcon as s,MoveUpIcon as a,DuplicateIcon as i,AddIcon as r,LayersIcon as u}from"../chunk-6EIVTKZZ.js";import"../chunk-KRXQM65X.js";import"../chunk-NKB3KVAB.js";import{jsx as h}from"react/jsx-runtime";function d(){let e=null;const n=/* @__PURE__ */new Set;return{get:()=>e,set(t){e=t;for(const e of[...n])e()},subscribe:e=>(n.add(e),()=>n.delete(e))}}var m={layer:{icon:/* @__PURE__ */h(u,{})},addInside:{icon:/* @__PURE__ */h(r,{})},duplicate:{icon:/* @__PURE__ */h(i,{})},moveUp:{icon:/* @__PURE__ */h(a,{})},moveDown:{icon:/* @__PURE__ */h(s,{})},copy:{icon:/* @__PURE__ */h(c,{}),shortcut:"⌘C"},cut:{icon:/* @__PURE__ */h(c,{}),shortcut:"⌘X"},paste:{icon:/* @__PURE__ */h(l,{}),shortcut:"⌘V"},rename:{icon:/* @__PURE__ */h(p,{})},hide:{icon:/* @__PURE__ */h(o,{})},show:{icon:/* @__PURE__ */h(t,{})},upLevel:{},delete:{icon:/* @__PURE__ */h(n,{}),danger:!0}};function v(n){const{actions:t,rows:o={},extras:p={},words:l=e}=n,c=e=>({...m[e],label:l[e],...o[e]}),s=(e,n,t)=>{const o=c(e),p={label:t??o.label??e,onClick:n};return o.icon&&(p.icon=o.icon),o.shortcut&&(p.shortcut=o.shortcut),o.danger&&(p.danger=!0),p},a=()=>{const e=c("layer"),t={label:e.label??l.layer,onClick:()=>{},children:n.layer.items};return e.icon&&(t.icon=e.icon),t},i=[],r=[],u=[],h=[],d=!!n.layer&&n.layer.items.length>1;if(d&&"pick"===(n.layer.group??"pick")&&i.push(a()),t.addInside&&r.push(s("addInside",t.addInside)),t.duplicate&&r.push(s("duplicate",t.duplicate)),t.moveUp&&r.push(s("moveUp",t.moveUp)),t.moveDown&&r.push(s("moveDown",t.moveDown)),t.copy&&r.push(s("copy",t.copy)),t.cut&&r.push(s("cut",t.cut)),t.paste){const e=c("paste").label??l.paste;r.push(s("paste",t.paste.run,l.pasteNamed({paste:e,label:t.paste.label})))}t.rename&&u.push(s("rename",t.rename)),t.hide&&u.push(t.hide.hidden?s("show",t.hide.run):s("hide",t.hide.run)),d&&"change"===n.layer.group&&u.push(a()),t.upLevel&&u.push(s("upLevel",t.upLevel)),t.delete&&h.push(s("delete",t.delete)),i.push(...p.pick??[]),r.push(...p.make??[]),u.push(...p.change??[]),h.push(...p.remove??[]);const v=[i,r,n.style??[],u,h].filter(e=>e.length>0),g=i.length+r.length+u.length+h.length===0,k=[{label:n.title,header:!0,onClick:()=>{}}];return g&&n.pinnedLine&&k.push({label:n.pinnedLine,header:!0,onClick:()=>{}}),v.forEach((e,t)=>{(t>0||g&&n.pinnedLine)&&k.push({label:"—",onClick:()=>{}}),k.push(...e)}),k}export{d as createNodeClipboard,v as nodeMenuItems};

package/dist/panel/index.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { W as WordFit } from '../wordFit-9B9nqyf3.js';
+import { W as WordFit } from '../wordFit-D4S36PvB.js';
+import { P as PanelWords } from '../words-CJjUKcV5.js';
 export { a as SETTINGS_BUCKETS, S as SettingsBucket } from '../buckets-CuLM47h9.js';
 
 /**
@@ -367,9 +368,10 @@ interface SettingsFieldProps {
     /** Set when the control is a single form element, so the label points at it. */
     htmlFor?: string;
     /**
-     * A trailing control on the label row — a reset dot, a badge, or the SWITCH
-     * of a boolean row (card 8801, Option A: a yes-or-no setting is one line, not
-     * two, so the switch takes the spot a value like "34 px" normally sits in).
+     * A trailing control on the label row — `SettingsDefaultReset` (Default /
+     * Reset), or the SWITCH of a boolean row (card 8801, Option A: a yes-or-no
+     * setting is one line, not two, so the switch takes the spot a value like
+     * "34 px" normally sits in).
      */
     action?: ReactNode;
     /**
@@ -384,6 +386,41 @@ interface SettingsFieldProps {
     children?: ReactNode;
     className?: string;
 }
+/**
+ * `SettingsDefaultReset` — the end of a label line that says whether the value
+ * follows its default (owner 2026-10-06: "Default", and a "Reset" button).
+ */
+interface SettingsDefaultResetProps {
+    /** The field's visible label. The Reset button is named after it. */
+    label: string;
+    /** Is the value changed from its default? The host's to say. */
+    changed: boolean;
+    /** Clear the value back to its default. The part writes nothing itself. */
+    onReset: () => void;
+    /**
+     * What the default IS, in the merchant's words — "Site block gap — 24px".
+     * Shown as the tooltip: on Default as it is, on Reset as "Back to default: …".
+     * Read it live; a baked value goes stale the moment the default changes.
+     */
+    detail?: string;
+    /** Read-only (a sent campaign): Reset is drawn, and cannot be pressed. */
+    disabled?: boolean;
+    /**
+     * Rare: make "Default" a press of its own, for a row a merchant cannot step
+     * out of by hand. The website's type sizes are the case (GG 2026-10-06, Q3):
+     * their default can be a responsive `clamp()` no slider position stores, so
+     * one press keeps the section's own built-in size. `title` says what the
+     * press does; it is the tooltip and the accessible name, after "Default".
+     * Left out, Default presses nothing — the usual case.
+     */
+    defaultAction?: {
+        onPress: () => void;
+        title: string;
+    };
+    /** The host's words, from `useWords('panel', …)`. English when left out. */
+    words?: Partial<Pick<PanelWords, 'followsDefault' | 'reset' | 'resetName' | 'backToDefault'>>;
+    className?: string;
+}
 /**
  * A switch has no text of its own, so without one of these it announces
  * "switch, on" and nothing else. The union makes an unnamed switch a COMPILE
@@ -901,6 +938,37 @@ declare function SettingsField({ label, labelId, icon, value, hint, changed, htm
  */
 declare function SettingsSwitch({ checked, onChange, disabled, id, ariaLabel, ariaLabelledBy, className, }: SettingsSwitchProps): react.JSX.Element;
 
+/**
+ * The end of a setting's label line: **Default** while the value follows its
+ * default, a **Reset** button once it does not. ONE part, both editors.
+ *
+ * Owner, 2026-10-06. Before this the two editors said the same thing five ways:
+ * the website's "Inherits · Site" chip and "Overridden ↺" pill, its blue reset
+ * dot, and the email's "Default" mark, "Reset" link and "Reset to default"
+ * text. He picked the word **Default** for the resting state and the **Reset
+ * button** for the way back, in the same place on the row. It rides
+ * `SettingsField`'s `action` slot; `SettingsField` leaves its name alone (only a
+ * switch is named after the field).
+ *
+ * ONE ELEMENT, BOTH STATES. It is the same <button> whether it says Default or
+ * Reset, and that is for the keyboard: a press turns Reset into Default, and if
+ * Default were a <span> React would swap the node and focus would fall to the
+ * page, so the next Tab would start from the top. Resting, the button is
+ * `aria-disabled` and out of the tab order (`tabIndex={-1}`) — there is nothing
+ * to do there — but it keeps focus when a press has just put it there.
+ * `aria-disabled` and not `disabled`, because a `disabled` button drops focus
+ * too. `disabled` is kept for read-only, where a real disabled button is right.
+ *
+ * `defaultAction` is the one exception to "Default presses nothing": a row a
+ * merchant cannot leave by hand gets a press on the word itself, named after
+ * what it does (the website's type sizes, whose default can be a `clamp()`).
+ *
+ * CONTROLLED and hook-free like the rest of the panel: `changed` is the host's,
+ * and a press only asks the host to clear. The words are handed in (`words`),
+ * because a leaf never reads the strings provider.
+ */
+declare function SettingsDefaultReset({ label, changed, onReset, detail, disabled, defaultAction, words, className, }: SettingsDefaultResetProps): react.JSX.Element;
+
 /**
  * A DRILL-IN ROW — a name, a one-line preview, and a chevron (card 8819).
  *
@@ -1085,4 +1153,4 @@ declare function SettingsCorners({ label, value, corners, onChange, id, classNam
  */
 declare function SettingsAction({ label, onPress, disabled, note, done, doneLabel, icon, id, className, }: SettingsActionProps): react.JSX.Element;
 
-export { SettingsAction, type SettingsActionBaseProps, type SettingsActionNote, type SettingsActionProps, type SettingsCornerPoint, SettingsCorners, type SettingsCornersProps, SettingsDrill, type SettingsDrillProps, SettingsField, type SettingsFieldProps, SettingsGroup, SettingsGroupHead, type SettingsGroupHeadProps, type SettingsGroupProps, SettingsGroupSub, type SettingsGroupSubProps, SettingsPlacement, type SettingsPlacementPoint, type SettingsPlacementProps, SettingsSegmented, type SettingsSegmentedFit, type SettingsSegmentedOption, type SettingsSegmentedProps, SettingsSwitch, type SettingsSwitchBaseProps, type SettingsSwitchLabel, type SettingsSwitchProps, type SettingsTabItem, SettingsTabs, type SettingsTabsProps };
+export { SettingsAction, type SettingsActionBaseProps, type SettingsActionNote, type SettingsActionProps, type SettingsCornerPoint, SettingsCorners, type SettingsCornersProps, SettingsDefaultReset, type SettingsDefaultResetProps, SettingsDrill, type SettingsDrillProps, SettingsField, type SettingsFieldProps, SettingsGroup, SettingsGroupHead, type SettingsGroupHeadProps, type SettingsGroupProps, SettingsGroupSub, type SettingsGroupSubProps, SettingsPlacement, type SettingsPlacementPoint, type SettingsPlacementProps, SettingsSegmented, type SettingsSegmentedFit, type SettingsSegmentedOption, type SettingsSegmentedProps, SettingsSwitch, type SettingsSwitchBaseProps, type SettingsSwitchLabel, type SettingsSwitchProps, type SettingsTabItem, SettingsTabs, type SettingsTabsProps };

package/dist/panel/index.js

@@ -1,16 +1,18 @@
-export{SETTINGS_BUCKETS,SettingsField,SettingsGroup,SettingsSwitch,SettingsTabs}from"../chunk-67VZRQLG.js";import"../chunk-7A7O2JWQ.js";export{SettingsSegmented}from"../chunk-QB3BZIRA.js";import"../chunk-BZ5ASXOL.js";import{jsx as e,jsxs as a}from"react/jsx-runtime";function l({title:a,level:l=3,id:s,className:i}){/* @__PURE__ */
-return e(`h${l}`,{id:s,className:i?`es-group-head ${i}`:"es-group-head",children:a})}function s({title:a,level:l=4,id:s,className:i}){/* @__PURE__ */
-return e(`h${l}`,{id:s,className:i?`es-group-sub ${i}`:"es-group-sub",children:a})}function i({name:l,preview:s,offPage:i,status:n,onOpen:r,id:t,className:c}){const d=null!=s;/* @__PURE__ */
-return a("button",{type:"button",id:t,className:c?`es-drill ${c}`:"es-drill",onClick:r,children:[
-/* @__PURE__ */a("span",{className:"es-drill-text",children:[
-/* @__PURE__ */e("span",{className:"es-drill-name",children:l}),d?/* @__PURE__ */e("span",{className:i?"es-drill-preview is-offpage":"es-drill-preview",children:s}):null]}),n?/* @__PURE__ */e("span",{className:"es-drill-status",children:n}):null,
-/* @__PURE__ */e("span",{className:"es-drill-chev","aria-hidden":"true"})]})}function n({label:a,value:l,points:s,onChange:i,id:n,className:r}){/* @__PURE__ */
-return e("div",{id:n,className:"es-placement"+(r?` ${r}`:""),role:"radiogroup","aria-label":a,children:s.map(a=>{const s=l===a.value,n=!0===a.disabled;/* @__PURE__ */
-return e("button",{type:"button",role:"radio","aria-checked":s,"aria-label":a.label,"aria-disabled":n||void 0,disabled:n,title:a.title??a.label,className:`es-placement-cell${s?" is-active":""}${n?" is-off":""}`,onClick:()=>i(a.value),children:a.icon?/* @__PURE__ */e("span",{className:"es-placement-icon","aria-hidden":"true",children:a.icon}):/* @__PURE__ */e("span",{className:"es-placement-dot"})},a.value)})})}function r({label:l,value:s,corners:i,onChange:n,id:r,className:t}){/* @__PURE__ */
-return a("div",{id:r,className:"es-corners"+(t?` ${t}`:""),role:"group","aria-label":l,children:[
-/* @__PURE__ */e("span",{className:"es-corners-frame","aria-hidden":"true"}),i.map(a=>{const l=s.includes(a.value),i=!0===a.disabled;/* @__PURE__ */
-return e("button",{type:"button","aria-pressed":l,"aria-label":a.label,"aria-disabled":i||void 0,disabled:i,title:a.title??a.label,className:`es-corners-cell es-corners-${a.value}${l?" is-on":""}${i?" is-off":""}`,onClick:()=>n(l?s.filter(e=>e!==a.value):[...s,a.value]),children:/* @__PURE__ */e("span",{className:"es-corners-mark","aria-hidden":"true"})},a.value)})]})}function t({label:l,onPress:s,disabled:i,note:n,done:r,doneLabel:t,icon:c,id:d,className:o}){const u=void 0===t?l:t,m=r?u:l,p=null!=n,h=p&&d?`${d}-note`:void 0;/* @__PURE__ */
-return a("div",{className:o?`es-action-wrap ${o}`:"es-action-wrap",children:[
-/* @__PURE__ */a("button",{type:"button",id:d,className:r?"es-action is-done":"es-action",disabled:i,"aria-describedby":h,onClick:s,children:[c?/* @__PURE__ */e("span",{className:"es-action-icon","aria-hidden":"true",children:c}):null,
-/* @__PURE__ */e("span",{className:"es-action-label",children:m})]}),p?/* @__PURE__ */e("p",{id:h,className:"es-action-note",children:n}):null,
-/* @__PURE__ */e("span",{className:"es-action-live",role:"status","aria-live":"polite",children:r?u:null})]})}export{t as SettingsAction,r as SettingsCorners,i as SettingsDrill,l as SettingsGroupHead,s as SettingsGroupSub,n as SettingsPlacement};
+export{SETTINGS_BUCKETS,SettingsField,SettingsGroup,SettingsTabs}from"../chunk-DICUMYMG.js";import{DEFAULT_PANEL_WORDS as e}from"../chunk-TRVZ7C23.js";export{SettingsSegmented,SettingsSwitch}from"../chunk-P6O363EE.js";import"../chunk-BZ5ASXOL.js";import{jsx as a,jsxs as l}from"react/jsx-runtime";function s({title:e,level:l=3,id:s,className:i}){/* @__PURE__ */
+return a(`h${l}`,{id:s,className:i?`es-group-head ${i}`:"es-group-head",children:e})}function i({title:e,level:l=4,id:s,className:i}){/* @__PURE__ */
+return a(`h${l}`,{id:s,className:i?`es-group-sub ${i}`:"es-group-sub",children:e})}function n({label:l,changed:s,onReset:i,detail:n,disabled:t,defaultAction:r,words:c,className:o}){const d={...e,...c},u=["es-default-reset"];if(s&&u.push("is-changed"),o&&u.push(o),!s&&r){u.push("is-pressable");const e=`${d.followsDefault}. ${r.title}`;/* @__PURE__ */
+return a("button",{type:"button",className:u.join(" "),"aria-label":e,title:n?`${n}. ${r.title}`:r.title,disabled:t,onClick:r.onPress,children:d.followsDefault})}/* @__PURE__ */
+return a("button",s?{type:"button",className:u.join(" "),"aria-label":d.resetName({label:l}),title:n?d.backToDefault({detail:n}):void 0,disabled:t,onClick:i,children:d.reset}:{type:"button",className:u.join(" "),"aria-disabled":"true",tabIndex:-1,title:n||void 0,children:d.followsDefault})}function t({name:e,preview:s,offPage:i,status:n,onOpen:t,id:r,className:c}){const o=null!=s;/* @__PURE__ */
+return l("button",{type:"button",id:r,className:c?`es-drill ${c}`:"es-drill",onClick:t,children:[
+/* @__PURE__ */l("span",{className:"es-drill-text",children:[
+/* @__PURE__ */a("span",{className:"es-drill-name",children:e}),o?/* @__PURE__ */a("span",{className:i?"es-drill-preview is-offpage":"es-drill-preview",children:s}):null]}),n?/* @__PURE__ */a("span",{className:"es-drill-status",children:n}):null,
+/* @__PURE__ */a("span",{className:"es-drill-chev","aria-hidden":"true"})]})}function r({label:e,value:l,points:s,onChange:i,id:n,className:t}){/* @__PURE__ */
+return a("div",{id:n,className:"es-placement"+(t?` ${t}`:""),role:"radiogroup","aria-label":e,children:s.map(e=>{const s=l===e.value,n=!0===e.disabled;/* @__PURE__ */
+return a("button",{type:"button",role:"radio","aria-checked":s,"aria-label":e.label,"aria-disabled":n||void 0,disabled:n,title:e.title??e.label,className:`es-placement-cell${s?" is-active":""}${n?" is-off":""}`,onClick:()=>i(e.value),children:e.icon?/* @__PURE__ */a("span",{className:"es-placement-icon","aria-hidden":"true",children:e.icon}):/* @__PURE__ */a("span",{className:"es-placement-dot"})},e.value)})})}function c({label:e,value:s,corners:i,onChange:n,id:t,className:r}){/* @__PURE__ */
+return l("div",{id:t,className:"es-corners"+(r?` ${r}`:""),role:"group","aria-label":e,children:[
+/* @__PURE__ */a("span",{className:"es-corners-frame","aria-hidden":"true"}),i.map(e=>{const l=s.includes(e.value),i=!0===e.disabled;/* @__PURE__ */
+return a("button",{type:"button","aria-pressed":l,"aria-label":e.label,"aria-disabled":i||void 0,disabled:i,title:e.title??e.label,className:`es-corners-cell es-corners-${e.value}${l?" is-on":""}${i?" is-off":""}`,onClick:()=>n(l?s.filter(a=>a!==e.value):[...s,e.value]),children:/* @__PURE__ */a("span",{className:"es-corners-mark","aria-hidden":"true"})},e.value)})]})}function o({label:e,onPress:s,disabled:i,note:n,done:t,doneLabel:r,icon:c,id:o,className:d}){const u=void 0===r?e:r,p=t?u:e,m=null!=n,b=m&&o?`${o}-note`:void 0;/* @__PURE__ */
+return l("div",{className:d?`es-action-wrap ${d}`:"es-action-wrap",children:[
+/* @__PURE__ */l("button",{type:"button",id:o,className:t?"es-action is-done":"es-action",disabled:i,"aria-describedby":b,onClick:s,children:[c?/* @__PURE__ */a("span",{className:"es-action-icon","aria-hidden":"true",children:c}):null,
+/* @__PURE__ */a("span",{className:"es-action-label",children:p})]}),m?/* @__PURE__ */a("p",{id:b,className:"es-action-note",children:n}):null,
+/* @__PURE__ */a("span",{className:"es-action-live",role:"status","aria-live":"polite",children:t?u:null})]})}export{o as SettingsAction,c as SettingsCorners,n as SettingsDefaultReset,t as SettingsDrill,s as SettingsGroupHead,i as SettingsGroupSub,r as SettingsPlacement};

package/dist/panel/panel.css

@@ -911,14 +911,69 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
   min-width: 0;
 }
 
+/* The hint sits FLUSH LEFT, on the same edge as the row's icon and control —
+   not indented under the label's words (owner ruling, 2026-10-06; it was
+   24px, glyph + gap, until then). `tests/panel-hint-flush-left` holds it. */
 .es-field-hint {
   margin: 8px 0 0;
-  padding-left: 24px;
   font-size: 11px;
   line-height: 1.45;
   color: var(--es-muted);
 }
 
+/* ── Default / Reset: the end of a label line ─────────────────────────────────
+   Owner 2026-10-06: a value that follows its default says "Default", and a
+   changed one offers a "Reset" button, in the same place. ONE element in both
+   states (see SettingsDefaultReset.tsx), so both states share the box: same
+   font, same padding, same height. Only the colour and the press change, and
+   the row does not jump when a press turns one into the other.
+
+   It sits at the END of the label line. With a value on the row, the value's
+   own `margin-left: auto` has already pushed both right, and the gap between
+   them is the head's own 8px; with no value, the part pushes itself. */
+.es-default-reset {
+  appearance: none;
+  -webkit-appearance: none;
+  flex: none;
+  margin: 0 -4px 0 0;
+  padding: 2px 4px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 12px;
+  color: var(--es-muted);
+  white-space: nowrap;
+  cursor: default;
+}
+
+.es-default-reset.is-changed {
+  color: var(--es-accent-text);
+  cursor: pointer;
+}
+
+.es-default-reset.is-changed:hover { background: var(--es-hover); }
+
+.es-default-reset.is-changed:disabled {
+  color: var(--es-disabled);
+  background: transparent;
+  cursor: default;
+}
+
+.es-default-reset.is-pressable { cursor: pointer; }
+.es-default-reset.is-pressable:hover { background: var(--es-hover); color: var(--es-text-secondary); }
+.es-default-reset.is-pressable:disabled { color: var(--es-disabled); background: transparent; cursor: default; }
+
+.es-default-reset:focus-visible {
+  outline: 2px solid var(--es-accent-ring);
+  outline-offset: 1px;
+}
+
+.es-field-head > .es-default-reset { margin-left: auto; }
+.es-field-value + .es-default-reset { margin-left: 0; }
+
 /* A boolean row is ONE line (card 8801, Option A). The switch rides the label
    line in the `action` slot, so there is no control row under it — and with no
    control row, the label line's 7px bottom margin would be a gap to nothing.

package/dist/pick/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { P as PickWords } from '../words-B87GIFWH.js';
+import { P as PickWords } from '../words-is_Vy6hn.js';
 
 /** One colour the site's theme names — offered first, by name. */
 type ThemeColour = {
@@ -29,7 +29,7 @@ type ColourPickerProps = {
     readOnly?: boolean;
     /**
      * The picker's own words in the host's language:
-     * `useEditorStrings().pick.colour` (0.95.0). Left out, English. A prop, not
+     * `useEaselStrings().pick.colour` (0.95.0). Left out, English. A prop, not
      * the strings provider: the pickers import nothing outside their folder.
      */
     words?: PickWords['colour'];
@@ -54,6 +54,44 @@ type ColourPickerProps = {
  * 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 ColourWindowProps = {
+    /** The colour, `#rrggbb`, or `''` while there is none. */
+    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". */
+    label: string;
+    /** The theme's colours, offered first. */
+    theme?: readonly ThemeColour[];
+    /** Escape in the window. The opener closes it and takes the focus back. */
+    onClose?: () => void;
+    /** The window's DOM id, for the opener's `aria-controls`. */
+    id?: string;
+    readOnly?: boolean;
+    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.
+     */
+    swatch?: boolean;
+    /**
+     * When a drag on the square or the hue bar writes. `'live'` (the default,
+     * as `ColourPicker` always has): every move. `'end'`: once, where the
+     * pointer comes up — one undo step for a host whose every write is one,
+     * like the text box (E5b). The thumbs, the hex and the swatch follow the
+     * drag live either way. An arrow key writes each press in both.
+     */
+    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.
+ */
+declare function ColourWindow({ value, onChange, label, theme, onClose, id, readOnly, words, swatch, dragWrites, }: ColourWindowProps): react.JSX.Element;
 
 type ImageBoxProps = {
     /** The file's URL, or `''` while the setting has none. */
@@ -75,7 +113,7 @@ type ImageBoxProps = {
     readOnly?: boolean;
     /**
      * The box's own words in the host's language:
-     * `useEditorStrings().pick.image` (0.95.0). Left out, English. A prop, not
+     * `useEaselStrings().pick.image` (0.95.0). Left out, English. A prop, not
      * the strings provider: the pickers import nothing outside their folder.
      */
     words?: PickWords['image'];
@@ -150,4 +188,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, 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, type Hsv, ImageBox, type ImageBoxProps, PickWords, type ThemeColour, hexReadout, hexToHsv, hsvToHex, hueFromPoint, mediaName, svFromPoint, typedHex };