efficient-easel 0.99.2 → 0.101.0

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-L5KW4HG5.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-D4S36PvB.js';
+import { P as PanelWords } from '../words-BGrHZAJJ.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,45 @@ interface SettingsFieldProps {
     children?: ReactNode;
     className?: string;
 }
+/**
+ * `SettingsDefaultReset` — the end of a label line: a ↺ button while the value
+ * is changed, an empty 22px slot while it follows its default (owner
+ * 2026-10-06; option E, final 2026-10-07).
+ */
+interface SettingsDefaultResetProps {
+    /** The field's visible label. The ↺ button is named after it ("Reset Gap"). */
+    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 host's words — "24px from Site styles". The ↺
+     * says it: in its tooltip ("Reset Gap (back to 24px from Site styles)") and
+     * as its accessible description, while its NAME stays "Reset Gap" (GG
+     * 2026-10-07, E2). Read it live; a baked value goes stale. Nothing shows it
+     * while the setting is unchanged: the slot is empty then.
+     */
+    detail?: string;
+    /** Read-only (a sent campaign): ↺ is drawn, and cannot be pressed. */
+    disabled?: boolean;
+    /**
+     * Rare: something to press while the setting is UNCHANGED, for a row a
+     * merchant cannot leave 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.
+     * `icon` is drawn in the 22px slot; `title` is its name and its tooltip.
+     * Left out, an unchanged row draws nothing — the usual case.
+     */
+    defaultAction?: {
+        onPress: () => void;
+        title: string;
+        icon: ReactNode;
+    };
+    /** The host's words, from `useWords('panel', …)`. English when left out. */
+    words?: Partial<Pick<PanelWords, 'followsDefault' | 'reset' | 'resetName' | 'backToDefault' | 'resetTitle'>>;
+    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 +942,44 @@ 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: a ↺ button once the setting is changed,
+ * NOTHING while it is not. ONE part, both editors.
+ *
+ * Owner, 2026-10-06: the two editors said "follows its default / put it back"
+ * five ways (the website's "Inherits · Site" chip and blue reset dot, the
+ * email's "Default" mark, "Reset" link and "Reset to default" text), and it
+ * became one part. Option E, final 2026-10-07 (mockup
+ * https://claude.ai/artifact/KATfHhLK7wogfTD84Manox), gave it its look:
+ *
+ *   changed    the set's `revert` icon (↺, "Revert to inherited") in a 22px
+ *              button, accent; its name "Reset <setting>", its tooltip that
+ *              plus what it goes back to when the host says ("(back to 24px
+ *              from Site styles)", also its description);
+ *   unchanged  nothing at all: the row's grey value already says it is the
+ *              default. The 22px slot stays, empty and out of the tab order,
+ *              so every row's end lines up.
+ *
+ * It rides `SettingsField`'s `action` slot; `SettingsField` leaves its name
+ * alone (only a switch is named after the field).
+ *
+ * FOCUS AFTER A PRESS. Reset turns the button into the empty slot, which cannot
+ * hold focus, so a keyboard user would fall back to the top of the page. The
+ * press hands focus to the row's own control (its slider, box or swatch) first.
+ * That is read off the event's own element, never a global, so the module stays
+ * a leaf.
+ *
+ * `defaultAction` is the one row with something to press while unchanged: the
+ * website's type sizes, whose default can be a responsive `clamp()` no slider
+ * stores, keep ONE press to the section's own built-in size (a feature is
+ * never cut to fit a look). It draws the host's icon in the same 22px slot.
+ *
+ * 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 +1164,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-ZNS7727Y.js";import{DEFAULT_PANEL_WORDS as e}from"../chunk-QTLAVDJE.js";export{SettingsSegmented,SettingsSwitch}from"../chunk-P6O363EE.js";import"../chunk-BZ5ASXOL.js";import{RevertIcon as a}from"../chunk-L5KW4HG5.js";import{jsx as l,jsxs as s}from"react/jsx-runtime";function i({title:e,level:a=3,id:s,className:i}){/* @__PURE__ */
+return l(`h${a}`,{id:s,className:i?`es-group-head ${i}`:"es-group-head",children:e})}function n({title:e,level:a=4,id:s,className:i}){/* @__PURE__ */
+return l(`h${a}`,{id:s,className:i?`es-group-sub ${i}`:"es-group-sub",children:e})}function t({label:s,changed:i,onReset:n,detail:t,disabled:r,defaultAction:d,words:o,className:u}){const p={...e,...o},m=["es-default-reset"];if(i&&m.push("is-changed"),u&&m.push(u),!i&&d)return m.push("is-pressable"),/* @__PURE__ */l("button",{type:"button",className:m.join(" "),"aria-label":d.title,title:d.title,disabled:r,onClick:d.onPress,children:d.icon});if(!i)/* @__PURE__ */
+return l("span",{className:m.join(" "),"aria-hidden":"true"});const b=p.resetName({label:s});/* @__PURE__ */
+return l("button",{type:"button",className:m.join(" "),"aria-label":b,"aria-description":t||void 0,title:t?p.resetTitle({label:s,detail:t}):b,disabled:r,onClick:e=>{n(),function(e){const a=e.currentTarget.closest(".es-field"),l=a?.querySelector(c(".es-field-ctl"))??a?.querySelector(c(".es-field-head"));l?.focus()}(e)},children:/* @__PURE__ */l(a,{size:15})})}var r=['input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","button:not([disabled]):not(.es-default-reset)",'[tabindex]:not([tabindex="-1"])'].join(", "),c=e=>r.split(", ").map(a=>`${e} ${a}`).join(", ");function d({name:e,preview:a,offPage:i,status:n,onOpen:t,id:r,className:c}){const d=null!=a;/* @__PURE__ */
+return s("button",{type:"button",id:r,className:c?`es-drill ${c}`:"es-drill",onClick:t,children:[
+/* @__PURE__ */s("span",{className:"es-drill-text",children:[
+/* @__PURE__ */l("span",{className:"es-drill-name",children:e}),d?/* @__PURE__ */l("span",{className:i?"es-drill-preview is-offpage":"es-drill-preview",children:a}):null]}),n?/* @__PURE__ */l("span",{className:"es-drill-status",children:n}):null,
+/* @__PURE__ */l("span",{className:"es-drill-chev","aria-hidden":"true"})]})}function o({label:e,value:a,points:s,onChange:i,id:n,className:t}){/* @__PURE__ */
+return l("div",{id:n,className:"es-placement"+(t?` ${t}`:""),role:"radiogroup","aria-label":e,children:s.map(e=>{const s=a===e.value,n=!0===e.disabled;/* @__PURE__ */
+return l("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__ */l("span",{className:"es-placement-icon","aria-hidden":"true",children:e.icon}):/* @__PURE__ */l("span",{className:"es-placement-dot"})},e.value)})})}function u({label:e,value:a,corners:i,onChange:n,id:t,className:r}){/* @__PURE__ */
+return s("div",{id:t,className:"es-corners"+(r?` ${r}`:""),role:"group","aria-label":e,children:[
+/* @__PURE__ */l("span",{className:"es-corners-frame","aria-hidden":"true"}),i.map(e=>{const s=a.includes(e.value),i=!0===e.disabled;/* @__PURE__ */
+return l("button",{type:"button","aria-pressed":s,"aria-label":e.label,"aria-disabled":i||void 0,disabled:i,title:e.title??e.label,className:`es-corners-cell es-corners-${e.value}${s?" is-on":""}${i?" is-off":""}`,onClick:()=>n(s?a.filter(a=>a!==e.value):[...a,e.value]),children:/* @__PURE__ */l("span",{className:"es-corners-mark","aria-hidden":"true"})},e.value)})]})}function p({label:e,onPress:a,disabled:i,note:n,done:t,doneLabel:r,icon:c,id:d,className:o}){const u=void 0===r?e:r,p=t?u:e,m=null!=n,b=m&&d?`${d}-note`:void 0;/* @__PURE__ */
+return s("div",{className:o?`es-action-wrap ${o}`:"es-action-wrap",children:[
+/* @__PURE__ */s("button",{type:"button",id:d,className:t?"es-action is-done":"es-action",disabled:i,"aria-describedby":b,onClick:a,children:[c?/* @__PURE__ */l("span",{className:"es-action-icon","aria-hidden":"true",children:c}):null,
+/* @__PURE__ */l("span",{className:"es-action-label",children:p})]}),m?/* @__PURE__ */l("p",{id:b,className:"es-action-note",children:n}):null,
+/* @__PURE__ */l("span",{className:"es-action-live",role:"status","aria-live":"polite",children:t?u:null})]})}export{p as SettingsAction,u as SettingsCorners,t as SettingsDefaultReset,d as SettingsDrill,i as SettingsGroupHead,n as SettingsGroupSub,o as SettingsPlacement};

package/dist/panel/panel.css

@@ -330,61 +330,38 @@
   box-shadow: 0 0 0 3px var(--es-accent-ring);
 }
 
-/* THE CHOSEN CHIP IS THE DARKEST THING IN THE ROW (card 66302).
-
-   IT WAS A RAISED WHITE CHIP, AND THAT WAS NOT A MISTAKE. Card 66138 put white
-   on the grey track with a soft lift, and Lewis picked that look himself from
-   six treatments. He picked it BY EYE, AT A WIDTH WHERE THE WORDS WERE STILL
-   THERE — which is the whole reason this is a revision and not a correction.
-
-   WHAT CHANGED IS THE CONDITION, TWICE.
-
-   First the words went. A four-tab strip is already wordless below 200px, and
-   the panel's drag band bottoms out at 181px, so that state is live in the
-   editor today; card 66246 then made the shop's Weight row show one word of
-   four at the DEFAULT panel and none at the narrow end. A chip that used to sit
-   beside a word became the only thing saying which option is set.
-
-   Then the second mark went, and nobody noticed. Card 66248 moved the strip
-   into this package and the quiet label darkened from the muted grey to
-   `--es-text-secondary`. That darkening is right on its own terms — it is card
-   66138's AA fix, 4.39:1 to 9.37:1 on the track — but it also cut the
-   chosen-vs-quiet GLYPH contrast from 3.67:1 to 1.72:1. The strip lost the one
-   state cue that was already above 3:1, and the change was described as
-   cosmetic when it merged.
-
-   So the raised white chip was left carrying the whole message alone, at
-   1.10:1 against its own track, where WCAG 1.4.11 asks 3:1 of anything
-   identifying a control's STATE.
-
-   WHY DARK AND NOT A RING. Four treatments were drawn and measured for Lewis;
-   two of the routes were closed by arithmetic before he saw them (darkening the
-   track drops the quiet label to 3.40:1 and fails AA; pushing the glyph delta
-   only reaches 3:1 by putting that label back where 66138 moved it FROM). Of
-   what was left, this is the one that survives the DISABLED state:
-   `.es-segs[data-disabled]` fades the strip to 0.5 over the panel, and a ring
-   at 4.39:1 composites down to 1.89:1 while this holds 3.24:1. A cue that only
-   works while the control is live is a cue with a hole in it.
-
-   ⚠️ THE LIFT STAYS, AND IT IS NO LONGER THE MESSAGE. `--es-raised-shadow`
-   still seats the chip on the track. What it must not go back to being is the
-   thing telling the two states apart — a shadow is not a colour, so no
-   contrast ratio can score it, and that is exactly how this got to 1.10:1
-   without any guard noticing. `tests/panel-chip-contrast.test.ts` pins the
-   RATIO and not this colour, so a better answer is free to replace it. */
+/* THE CHOSEN CHIP IS BLUE (Lewis, 2026-10-06): 「用蓝色的背景, 不要黑色的了」.
+
+   Said while the shop's hand-built "pick one of 2-3" rungs were merged into
+   this control. It was `--es-text`, near-black, since card 66302; before that a
+   raised white chip (card 66138). Both editors draw every segmented control and
+   the settings tab strip from this one rule, so this is the whole change.
+
+   THE NUMBERS STILL HOLD, which is why the colour could move at all. Card 66302
+   made the chip the ONLY state cue once the words drop at the narrow end, and
+   WCAG 1.4.11 asks 3:1 of it: `--es-accent` on `--es-track-bg` is
+   4.70:1, and the white word on it is 5.17:1 (1.4.3 asks 4.5:1 at 12px).
+
+   ⚠️ THE LIFT STAYS, AND IT IS NOT THE MESSAGE. `--es-raised-shadow` seats the
+   chip on the track; the colour is what tells the states apart, because a
+   shadow cannot be scored and that is how this once sat at 1.10:1 unnoticed.
+   `tests/panel-chip-contrast.test.ts` pins the ratios AND, since the ruling,
+   the colour itself. */
 .es-tab.is-active,
 .es-seg.is-active {
-  background: var(--es-text);
+  background: var(--es-accent);
   color: var(--es-on-accent);
   box-shadow: var(--es-raised-shadow);
   border-radius: 6px;
 }
 
-/* Focused AND chosen: keep the lift, or the chip drops flat the moment a
-   keyboard reaches it. */
+/* Focused AND chosen. The quiet chip's ring is a translucent accent wash, and
+   laid against a chip that is itself the accent it reads as the chip growing,
+   not as focus. So this ring stands OFF the chip: a 2px gap in the panel
+   colour, then a solid accent ring — the blue chip, a white gap, a blue line. */
 .es-tab.is-active:focus-visible,
 .es-seg.is-active:focus-visible {
-  box-shadow: var(--es-raised-shadow), 0 0 0 3px var(--es-accent-ring);
+  box-shadow: 0 0 0 2px var(--es-panel), 0 0 0 4px var(--es-accent);
 }
 
 .es-tab-badge {
@@ -689,26 +666,36 @@
    merchant's answer — a pressed chip faded to the same grey as the ones beside
    it stops saying which answer that was.
 
-   ⚠️ THIS COLOUR BELONGS TO THE CHIP'S GROUND, NOT TO THE TRACK (card 66302).
-   It was `--es-text-secondary`, which was right while the chip was white:
-   10.31:1 on it. The moment the chip went dark that same rule drew
-   `--es-text-secondary` on `--es-text` — 1.72:1, an unreadable label on a
-   control that had just been made MORE visible. Nothing about the rule changed; what it sat on moved underneath
-   it. So it reads `--es-on-accent` for the same reason the enabled chip does,
-   and the strip says which option is out of force through the track's fade and
-   its quiet siblings rather than by dimming the one word still worth reading. */
-.es-seg:disabled.is-active { color: var(--es-on-accent); }
+   GREY, NOT BLUE, AND NOT FADED (2026-10-06). The live chip is the accent now,
+   and blue is the colour that says "this is in force" — so an answer out of
+   force drops to `--es-muted`. The arithmetic decided the rest: the blue chip
+   faded to half over the panel is 2.04:1 against its faded track, under the
+   3:1 a state cue needs. `--es-muted` with no fade is 4.39:1 on the track and
+   its white word 4.83:1. That is why the whole strip no longer fades (below):
+   any fade took this chip under 3:1 again.
+
+   ⚠️ THE WORD COLOUR BELONGS TO THE CHIP'S GROUND, NOT TO THE TRACK (card
+   66302): a label written for one ground went unreadable when the ground moved
+   under it. So the ground and the word are declared together, here. */
+.es-seg:disabled.is-active {
+  background: var(--es-muted);
+  color: var(--es-on-accent);
+}
 
 /* And none of them answers the pointer any more: the hover rule above would
    otherwise keep lighting a segment that cannot be chosen. */
 .es-seg:disabled:hover:not(.is-active) { color: var(--es-disabled); }
 
-/* THE WHOLE CONTROL, when every option went at once — one statement instead of
-   three identically faded chips. The track is the part that says "these buttons
-   are one control", so it is the right place to say the control is not in force.
-   A single option out of force leaves the track alone, because the strip still
-   is. */
-.es-segs[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+/* THE WHOLE CONTROL, when every option went at once. Every button is then
+   `:disabled`, so the quiet words are already `--es-disabled` and the chosen
+   chip is already grey — the strip says "out of force" through them.
+
+   IT USED TO FADE TO 0.5, and that fade is gone on purpose (2026-10-06). An
+   opacity on the track composites the chosen chip with it, and no chip colour
+   the ruling allows survives that above 3:1: blue faded is 2.04:1, the grey
+   above faded is about 2:1. The chip is the one thing a disabled strip must
+   still say clearly, so the fade went rather than the chip. */
+.es-segs[data-disabled] { cursor: not-allowed; }
 
 /* ── a group: the soft pill row that folds ─────────────────────────────────── */
 
@@ -897,9 +884,23 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
 
 .es-field.is-changed .es-field-label { color: var(--es-accent-text); }
 
+/* The same cue, read off the row itself: a row whose Default / Reset part says
+   Reset is changed, whether or not its host passed `changed`. A host that draws
+   the part inside a component of its own (it reads a live value through a
+   hook) is invisible to SettingsField, and without this its label stayed grey
+   beside a Reset — measured on the website's section Width row. */
+.es-field:has(> .es-field-head > .es-default-reset.is-changed) > .es-field-head .es-field-label {
+  color: var(--es-accent-text);
+}
+
 .es-field-value {
   margin-left: auto;
   font-size: 12px;
+  /* The part's own 16px, and the head's min-height: so a row is one height
+     whether its value is drawn or not. Left to the host's line-height (18px in
+     the website editor) a press on Reset, which empties the value, moved every
+     row below it by 1.5px. */
+  line-height: 16px;
   color: var(--es-text);
   font-variant-numeric: tabular-nums;
 }
@@ -911,14 +912,86 @@ 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: ONE part puts a changed setting back. Option E, final
+   2026-10-07: a ↺ icon button while the setting is changed, NOTHING while it is
+   not (the row's grey value already says it is the default).
+
+   ONE FIXED 22px SLOT IN BOTH STATES. The unchanged state is an empty span of
+   the same box, so every row's end lines up whether it can be reset or not.
+   It replaced PR 154's two hidden words, which sized the box to the wider of
+   "Default" and "Reset": there is no word to size for now.
+
+   Straight after the label the slot pushes itself to the row's end. After a
+   value it sits 4px from it (the head's 8px gap less 4, option E). After
+   anything else on the line — a colour row's readout — that thing has already
+   been pushed right; pick.css sets the gap there. A second `auto` would split
+   the free space and strand the slot mid-row (PR 163: 295px apart). */
+.es-default-reset {
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--es-muted);
+}
+
+.es-default-reset svg {
+  display: block;
+  width: 15px;
+  height: 15px;
+}
+
+.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-name + .es-default-reset { margin-left: auto; }
+
+/* THE GREY VALUE IS THE "DEFAULT" WORD NOW (option E): a row whose slot is
+   empty draws its value grey, and the value takes the text colour once the
+   setting is changed. Scoped to rows that carry the part, so a value on a row
+   with nothing to reset keeps its colour. */
+.es-field:has(> .es-field-head > span.es-default-reset) .es-field-value { color: var(--es-muted); }
+.es-field-value + .es-default-reset { margin-left: -4px; }
+
 /* 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,4 +1,5 @@
 import * as react from 'react';
+import { ReactNode } from 'react';
 import { P as PickWords } from '../words-is_Vy6hn.js';
 
 /** One colour the site's theme names — offered first, by name. */
@@ -24,6 +25,28 @@ type ColourPickerProps = {
      * caption that IS the value's hex is no word, and the row's hex box stays.
      */
     caption?: string;
+    /**
+     * The colour IN FORCE while `value` is `''`: the setting has none of its own
+     * and follows a style (the email's body text, `#333333`). The swatch paints
+     * it (`is-inherited`, not the not-set look), the row prints `caption` or
+     * else that colour's hex in grey (no word: the row's Default part already
+     * says the state, one idea one word, GG 2026-10-07) — in the hex BOX, so a
+     * press selects it all for copying (GG for Lewis, 2026-10-07: the colour a
+     * row follows is the one most often copied); and the window starts
+     * from it with its hex as a placeholder. ⚠️ Nothing is written until the merchant moves something:
+     * showing the colour a setting follows must not pin it. Left out, or `''`,
+     * an empty value is "Not set", exactly as before.
+     */
+    inherited?: string;
+    /**
+     * A control drawn at the END of the row, after the hex: the panel's Default /
+     * Reset part (`SettingsDefaultReset`, Lewis 2026-10-06). ⚠️ INSIDE the row,
+     * not after the picker: a line that holds the picker wraps item by item, and
+     * a part beside the picker could drop onto a line of its own at a narrow
+     * panel (measured at 220px on a short label) while the swatch stayed above.
+     * In the row, the swatch, the hex and the part wrap as one.
+     */
+    after?: ReactNode;
     /** The swatch's DOM id, for a row whose own `<label for>` points at it. */
     id?: string;
     readOnly?: boolean;
@@ -52,8 +75,61 @@ type ColourPickerProps = {
  * The hex box is always a box you can type into — pasting a brand colour
  * costs no clicks — live on the keystroke that makes it a colour, and put back
  * to what is stored on Enter, Escape or leaving it.
+ *
+ * ONE LINE (Lewis, 2026-10-07, option E, final v9). In a line that holds it
+ * (`.es-field-head`, `.es-pick-line`) the label, the swatch, the hex and the
+ * host's `after` never wrap: short of room the label fades at its end (it
+ * keeps 56px), then the hex (it keeps 36px) — pick.css. What is cut is
+ * MEASURED here (`data-clipped` turns the fade on; text that fits is never
+ * faded), and over a cut label or hex a small dark tag shows the whole text.
+ * A press on the hex edits it IN PLACE: pick.css widens it to seven
+ * characters from its own left edge, never past the row's end
+ * (`--es-pick-edit-room`, measured here), and the `after` part steps aside
+ * only when that box reaches it (`data-editing="over"`). The swatch and the
+ * label never move. The accessible names are whole throughout: the fade and
+ * the tag are for the eye.
+ */
+declare function ColourPicker({ value, onChange, label, theme, caption, inherited, after, 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;
+    /** The colour in force while `value` is `''` (see `ColourPicker`): the window starts from it, its hex a placeholder. */
+    inherited?: 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 ColourPicker({ value, onChange, label, theme, caption, id: swatchId, readOnly, words, }: ColourPickerProps): react.JSX.Element;
+declare function ColourWindow({ value, onChange, label, theme, onClose, id, inherited, readOnly, words, swatch, dragWrites, }: ColourWindowProps): react.JSX.Element;
 
 type ImageBoxProps = {
     /** The file's URL, or `''` while the setting has none. */
@@ -150,4 +226,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 };

package/dist/pick/index.js

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