efficient-easel 0.99.1 → 0.100.0

package/dist/chunk-LGKQXSKO.js

@@ -0,0 +1,16 @@
+import{useNumberEntry as e,clampNumber as l}from"./chunk-A5UK76FC.js";import{DEFAULT_FIELDS_WORDS as a}from"./chunk-LA54QLP5.js";import{useWords as r}from"./chunk-MFIRYGHW.js";import{useId as n,useState as s,useRef as t,useMemo as i,useEffect as o}from"react";import{jsx as u,jsxs as c,Fragment as d}from"react/jsx-runtime";function p(e,l){return e.find(e=>Object.is(e.value,l))}function h(e){const{id:l,options:h,placeholder:f,readOnly:m=!1,ariaLabel:v,ariaLabelledBy:b,searchable:g=!1,searchPlaceholder:y,groupCount:N=!1,inline:w=!1,renderOption:x}=e,k=r("fields",a),D=n(),C=n(),$=l??C,[A,L]=s(!1),[O,j]=s(0),[E,M]=s(""),K=t(null),S=t(null),V=t(null),F=t(null),U=y??k.search??a.search,I=!0===e.multiple,P=I&&Array.isArray(e.value)?e.value:[],H=e=>P.some(l=>Object.is(l,e.value)),W=I?void 0:p(h,e.value),z=W?h.indexOf(W):-1,B=e=>I?H(h[e]):e===z,G=i(()=>{const e=g?E.trim().toLowerCase():"",l=[];return h.forEach((a,r)=>{e&&!a.label.toLowerCase().includes(e)||l.push(r)}),l},[h,E,g]),Q=i(()=>new Set(G),[G]),R=G.filter(e=>!h[e].disabled),T=h.some(e=>void 0!==e.thumb),Y=T||I||void 0!==x||h.some(e=>void 0!==e.meta),q=()=>{if(m||0===h.length)return;M("");const e=I?h.findIndex(e=>!e.disabled&&H(e)):z;j(e>=0?e:Math.max(h.findIndex(e=>!e.disabled),0)),L(!0)},J=e=>{L(!1),M(""),e&&S.current?.focus()},X=l=>{const a=h[l];if(a&&!a.disabled){if(!0===e.multiple){const r=!H(a);return void e.onChange(h.filter((e,a)=>a===l?r:H(e)).map(e=>e.value))}Object.is(a.value,e.value)||e.onChange(a.value),J(!0)}};o(()=>{if(!A)return;(g?F.current:V.current)?.focus();const e=K.current?.ownerDocument;if(!e)return;const l=e=>{K.current&&!K.current.contains(e.target)&&(L(!1),M(""))};return e.addEventListener("click",l,!0),()=>e.removeEventListener("click",l,!0)},[A,g]),o(()=>{A&&g&&j(R[0]??-1)},[E]);const Z=e=>{if(0===R.length)return;const l=R.indexOf(O),a=l<0?1===e?0:R.length-1:(l+e+R.length)%R.length;j(R[a])},_=e=>{switch(e.key){case"ArrowDown":return e.preventDefault(),Z(1),!0;case"ArrowUp":return e.preventDefault(),Z(-1),!0;case"Enter":return e.preventDefault(),Q.has(O)&&X(O),!0;case"Escape":return e.preventDefault(),e.stopPropagation(),J(!0),!0;case"Tab":return J(!1),!0;default:return!1}},ee=(e,l)=>{if(!Y)return e.label;const a={active:l===O,chosen:B(l)};/* @__PURE__ */
+return c(d,{children:[I?/* @__PURE__ */u("span",{className:"es-fsel-tick"+(a.chosen?" is-on":""),"aria-hidden":"true"}):null,T?/* @__PURE__ */u("span",{className:"es-fsel-thumb","aria-hidden":"true",children:e.thumb?/* @__PURE__ */u("img",{src:e.thumb,alt:"",loading:"lazy"}):null}):null,x?x(e,a):/* @__PURE__ */u("span",{className:"es-fsel-label",children:e.label}),void 0!==e.meta?/* @__PURE__ */u("span",{className:"es-fsel-meta","aria-hidden":"true",children:e.meta}):null]})},le=function(e,l){const a=[];return e.forEach((e,r)=>{if(!l.has(r))return;const n=a[a.length-1];n&&n.group===e.group?n.items.push({o:e,i:r}):a.push({group:e.group,items:[{o:e,i:r}]})}),a}(h,Q),ae=le.map((e,l)=>{const a=e.items.map(({o:e,i:l})=>/* @__PURE__ */u("li",{id:`${D}-${l}`,role:"option","aria-selected":B(l),"aria-disabled":e.disabled||void 0,className:`es-fsel-option${Y?" es-fsel-option--rich":""}${l===O?" is-active":""}${B(l)?" is-chosen":""}`,onMouseEnter:()=>j(l),onClick:()=>X(l),children:ee(e,l)},`${l}-${String(e.value)}`));if(void 0===e.group)return a;const r=`${D}-g${l}`;/* @__PURE__ */
+return c("li",{role:"presentation",className:"es-fsel-group",children:[
+/* @__PURE__ */c("div",{id:r,role:"presentation",className:"es-fsel-group-head",children:[e.group,N?/* @__PURE__ */u("span",{className:"es-fsel-group-count",children:e.items.length}):null]}),
+/* @__PURE__ */u("ul",{role:"group","aria-labelledby":r,className:"es-fsel-group-list",children:a})]},`g${l}`)}),re=Q.has(O)?`${D}-${O}`:void 0,ne=/* @__PURE__ */c("ul",{ref:V,id:D,role:"listbox",tabIndex:-1,className:"es-fsel-list","aria-multiselectable":I||void 0,"aria-activedescendant":g?void 0:re,"aria-labelledby":b??(v?void 0:$),"aria-label":b?void 0:v,onKeyDown:e=>{if(!_(e))switch(e.key){case"Home":return e.preventDefault(),void(R.length&&j(R[0]));case"End":return e.preventDefault(),void(R.length&&j(R[R.length-1]));case" ":return e.preventDefault(),void X(O);default:if(1===e.key.length&&/\S/.test(e.key)){const l=e.key.toLowerCase(),a=h.length;for(let e=1;e<=a;e++){const r=(O+e)%a;if(!h[r]?.disabled&&h[r]?.label.toLowerCase().startsWith(l))return void j(r)}}}},children:[ae,g&&0===G.length?/* @__PURE__ */u("li",{role:"presentation",className:"es-fsel-empty",children:k.noMatches??a.noMatches}):null]});let se,te;if(!0===e.multiple){const l=h.filter(H);te=0===l.length,se=e.renderValue?e.renderValue(l):te?f??k.choose:l.map(e=>e.label).join(", ")}else te=!W,se=e.renderValue?e.renderValue(W):W?W.label:f??k.choose;/* @__PURE__ */
+return c("div",{className:"es-fsel"+(w?" es-fsel--inline":""),ref:K,children:[
+/* @__PURE__ */c("button",{ref:S,id:$,type:"button",className:"es-fin es-fsel-button","aria-haspopup":"listbox","aria-expanded":A,"aria-controls":A?D:void 0,"aria-label":v,"aria-labelledby":b,disabled:m,onClick:()=>A?J(!1):q(),onKeyDown:e=>{"ArrowDown"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),q())},children:[
+/* @__PURE__ */u("span",{className:te?"es-fsel-value is-empty":"es-fsel-value",children:se}),
+/* @__PURE__ */u("span",{className:"es-fsel-chev","aria-hidden":"true"})]}),A?g?/* @__PURE__ */c("div",{className:"es-fsel-pop",children:[
+/* @__PURE__ */u("input",{ref:F,type:"text",className:"es-fin es-fsel-search",value:E,placeholder:U,"aria-label":U,"aria-autocomplete":"list","aria-controls":D,"aria-activedescendant":re,onChange:e=>M(e.target.value),onKeyDown:e=>{_(e)}}),ne]}):ne:null]})}function f({id:a,label:r,value:s,onChange:t,min:i,max:o,step:d=1,shiftStep:p,styleValue:h,unit:f,sliderMin:m,sliderMax:v,auto:b,readOnly:g=!1}){const y=n(),N=a??y,{inputProps:w,set:x,isStyle:k}=e({value:s,onChange:t,min:i,max:o,step:d,shiftStep:p,styleValue:h,readOnly:g}),D="number"==typeof s&&Number.isFinite(s)?s:void 0,C=void 0!==b&&void 0===D,$=Number((m-d).toFixed(6)),A=void 0!==b?$:m,L=D??(void 0!==b?$:h??m);/* @__PURE__ */
+return c("div",{className:"es-fslider"+(k||C?" is-style":""),children:[
+/* @__PURE__ */c("div",{className:"es-fslider-top",children:[
+/* @__PURE__ */u("label",{className:"es-fslider-name",htmlFor:N,children:r}),
+/* @__PURE__ */c("span",{className:"es-fslider-read",children:[
+/* @__PURE__ */u("input",{id:N,type:"text",inputMode:"decimal",className:"es-fslider-value",...w,placeholder:b??w.placeholder,onKeyDown:e=>{if(C&&("ArrowUp"===e.key||"ArrowDown"===e.key))return e.preventDefault(),void("ArrowUp"===e.key&&x(l(m,i,o)));w.onKeyDown(e)}}),f&&!C?/* @__PURE__ */u("span",{className:"es-fslider-unit",children:f}):null]})]}),
+/* @__PURE__ */u("input",{type:"range",className:"es-fslider-range",min:A,max:v,step:d,value:l(L,A,v),disabled:g,"aria-label":r,"aria-valuetext":C?b:void 0,onChange:e=>{const l=Number(e.target.value);x(void 0!==b&&l<m?void 0:l)}})]})}export{h as FieldSelect,f as FieldSlider,p as optionFor};

package/dist/chunk-M6F6LS3H.js

@@ -0,0 +1 @@
+var e={groups:{heading:"Headings",body:"Body"},add:{heading:"+ Add heading",body:"+ Add body"},count:({n:e,max:a})=>`${e} / ${a}`,full:({kind:e,max:a})=>`Up to ${a} ${e} styles`,styleName:({kind:e,n:a})=>`${"heading"===e?"Heading":"Body"} ${a}`,remove:"Delete",removeNamed:({name:e})=>`Delete ${e}`,sample:"The quick brown fox jumps over the lazy dog",preview:"Preview",summary:({font:e,size:a,weight:t})=>`${e} · ${a} · ${t}`,px:({n:e})=>`${e} px`,auto:"Auto",weights:{thin:"Thin",extraLight:"Extra light",light:"Light",regular:"Regular",medium:"Medium",semibold:"Semibold",bold:"Bold",extraBold:"Extra bold",black:"Black"},settings:{font:"Font",color:"Color",size:"Font size",weight:"Weight",emphasis:"Style",lineSpacing:"Line spacing",letterSpacing:"Letter spacing",paragraphSpacing:"Paragraph spacing",letterCase:"Letter case",largestSize:"Largest size"},bold:"Bold",italic:"Italic",italicMissing:"Italic: this font has no italic loaded",case:{auto:"Auto",autoTitle:"Auto: as each section draws it",none:"As typed",upper:"Uppercase",lower:"Lowercase"},colour:{any:"Any color",follows:"Follows the style"}};export{e as DEFAULT_TEXT_STYLES_WORDS};

package/dist/chunk-MH5GUZFQ.js

@@ -0,0 +1,9 @@
+import{DEFAULT_CHROME_WORDS as e}from"./chunk-ZJEBF4NB.js";import{useWords as n}from"./chunk-MFIRYGHW.js";import{jsxs as i,jsx as s}from"react/jsx-runtime";function a({icon:e,name:n,kind:a,actions:l}){/* @__PURE__ */
+return i("div",{className:"es-insp-head",children:[
+/* @__PURE__ */s("span",{className:"es-insp-chip","aria-hidden":"true",children:e}),
+/* @__PURE__ */i("div",{className:"es-insp-titles",children:[
+/* @__PURE__ */s("h2",{className:"es-insp-name",children:n}),
+/* @__PURE__ */s("div",{className:"es-insp-kind",children:a})]}),l?/* @__PURE__ */s("div",{className:"es-insp-actions",children:l}):null]})}function l({label:e,title:n,hasPopup:i,onClick:a,disabled:l,danger:c,expanded:t,buttonRef:r,children:p}){/* @__PURE__ */
+return s("button",{ref:r,type:"button",className:c?"es-insp-iconbtn es-insp-iconbtn--danger":"es-insp-iconbtn",title:n??e,"aria-label":e,"aria-haspopup":i,"aria-expanded":t,disabled:l,onClick:a,children:p})}function c({name:a,onSelect:l,label:c,inline:t}){const r=n("chrome",e),p=c??r.upLevel,d=/* @__PURE__ */i("button",{type:"button",className:"es-insp-up-btn",title:p,"aria-label":r.upLevelTo({label:p,name:a}),onClick:l,children:[
+/* @__PURE__ */s("span",{className:"es-insp-up-arrow","aria-hidden":"true",children:"←"}),
+/* @__PURE__ */s("span",{className:"es-insp-up-name",children:a})]});return t?d:/* @__PURE__ */s("div",{className:"es-insp-up",children:d})}export{a as InspectorHead,l as InspectorIconButton,c as InspectorUpLevel};

package/dist/chunk-P6O363EE.js

@@ -0,0 +1,6 @@
+import{wordFitVars as e}from"./chunk-BZ5ASXOL.js";import{jsx as a,jsxs as i}from"react/jsx-runtime";function s({options:s,value:l,onChange:t,ariaLabel:n,fit:r,disabled:d=!1,className:c}){const o=r&&e(s.length,r);
+/* @__PURE__ */
+return a("div",{className:"es-segs-fit",children:/* @__PURE__ */a("div",{role:"group","aria-label":n,"data-disabled":d||void 0,className:`es-segs${o?" is-measured":""}${c?` ${c}`:""}`,style:o,children:s.map(e=>{const s=e.id===l,n=e.title??("string"==typeof e.label?e.label:void 0),r=d||!0===e.disabled,c=`es-seg${e.icon?" has-icon":""}${s?" is-active":""}`;/* @__PURE__ */
+return i("button",{type:"button",title:n,"aria-label":n,"aria-pressed":s,disabled:r,className:c,onClick:()=>t(e.id),children:[e.icon?/* @__PURE__ */a("span",{className:"es-seg-icon","aria-hidden":"true",children:e.icon}):null,
+/* @__PURE__ */a("span",{className:"es-seg-word",children:e.label})]},String(e.id))})})})}function l({checked:e,onChange:i,disabled:s,id:l,ariaLabel:t,ariaLabelledBy:n,className:r}){/* @__PURE__ */
+return a("button",{type:"button",role:"switch",id:l,"aria-checked":e,"aria-label":t,"aria-labelledby":n,disabled:s,className:r?`es-switch ${r}`:"es-switch",onClick:()=>i(!e)})}export{s as SettingsSegmented,l as SettingsSwitch};

package/dist/chunk-PAELDYYS.js

@@ -0,0 +1 @@
+import{removeCanvasStyle as e,upsertCanvasStyle as n}from"./chunk-ZNCEOSXO.js";import{useState as t,useEffect as o,useRef as r}from"react";var c="[data-puck-component]",u="[data-puck-dropzone]",s="iframe#preview-frame";function i(e){const n=e.contentDocument;if(!n||!e.contentWindow||"loading"===n.readyState||!n.body)return!1;if(e.hasAttribute("srcdoc"))return"about:srcdoc"===n.URL;const t=e.getAttribute("src");return!t||"about:blank"===t||"about:blank"!==n.URL}function l(e,n,{selector:t=s,readySelector:o}={}){let r=null,c=null,u=!1,l=!1,d=null;const a=()=>{d?.observer.disconnect(),d=null},m=()=>{if(l)return;let e=null;if(r&&i(r)){const n=r.contentDocument;(e=>{if(!o||e.querySelector(o))return a(),!0;if(d?.doc!==e){a();const n=e.defaultView?.MutationObserver;if(n){const t=new n(()=>m());t.observe(e,{childList:!0,subtree:!0}),d={doc:e,observer:t}}}return!1})(n)&&(e={frame:r,document:n,window:r.contentWindow})}else a();(e===c||!!e&&!!c&&e.frame===c.frame&&e.document===c.document)&&u||(u=!0,c=e,n(c))},f=()=>m(),v=()=>{const n=e.querySelector?.(t);n!==r?(r?.removeEventListener("load",f),r=n,r?.addEventListener("load",f),m()):m()},b=e.ownerDocument?.defaultView??e.defaultView,w=b?.MutationObserver,p=w?new w(e=>(e=>null!==r&&!r.isConnected||e.some(e=>[...e.addedNodes,...e.removedNodes].some(e=>"IFRAME"===e.nodeName||!!e.querySelector?.("iframe"))))(e)&&v()):null;return p?.observe(e,{childList:!0,subtree:!0}),v(),()=>{l=!0,p?.disconnect(),a(),r?.removeEventListener("load",f),r=null}}function d(e,{selector:n,readySelector:r}={}){const[c,u]=t(null);return o(()=>{const t=e.current;if(!t)return;const o=l(t,u,{selector:n,readySelector:r});return()=>{o(),u(null)}},[e,n,r]),c}function a(e,n,t,{on:c="document",capture:u=!1}={}){const s=r(t);s.current=t;const i=e?.document??null,l=e?.window??null;o(()=>{const e="window"===c?l:i;if(!e)return;const t=e=>s.current(e);return e.addEventListener(n,t,u),()=>e.removeEventListener(n,t,u)},[i,l,n,c,u])}function m(t,r,c){const u=t?.document??null;o(()=>{if(!u)return;if(!c)return void e(u,r);const t=n(u,r,c),o=u.defaultView?.MutationObserver,s=o?new o(()=>{t.isConnected||n(u,r,c)}):null;return s?.observe(u.head??u.documentElement,{childList:!0}),()=>{s?.disconnect(),e(u,r)}},[u,r,c])}function f(e,{settle:n=[150,450]}={}){const[r,c]=t(0),u=e?.frame??null,s=e?.document??null,i=e?.window??null,l=n.join(",");return o(()=>{if(!u||!s||!i)return;const e=u.ownerDocument.defaultView;let t=!1,o=0;const r=()=>{if(t)return;t=!0;const n=()=>{t=!1,c(e=>e+1)};e?.requestAnimationFrame?o=e.requestAnimationFrame(n):n()},l=[],d=(e,n)=>{e.addEventListener(n,r,!0),l.push(()=>e.removeEventListener(n,r,!0))};d(s,"scroll"),d(i,"resize"),e&&(d(e,"scroll"),d(e,"resize"));const a=e?.ResizeObserver;if(a){const e=new a(r);e.observe(u),s.documentElement&&e.observe(s.documentElement),l.push(()=>e.disconnect())}const m=s.defaultView?.MutationObserver,f=s.body??s.documentElement;if(m&&f){const e=new m(r);e.observe(s===u.ownerDocument?u:f,{childList:!0,subtree:!0}),l.push(()=>e.disconnect())}const v=s.fonts;v&&d(v,"loadingdone");const b=n.map(e=>setTimeout(r,e));return r(),()=>{for(const e of l)e();for(const e of b)clearTimeout(e);o&&e?.cancelAnimationFrame&&e.cancelAnimationFrame(o)}},[u,s,i,l]),r}export{c as BLOCK_SELECTOR,s as CANVAS_SELECTOR,u as LIST_SELECTOR,i as isFrameReady,a as useCanvasEvent,d as useCanvasFrame,f as useCanvasLayout,m as useCanvasStyle,l as watchCanvasFrame};

package/dist/{chunk-JYPOOHII.js → chunk-QKVR3K73.js}

@@ -1,4 +1,4 @@
-import{tokenizeInline as e,STANDARD_MARKUP as t}from"./chunk-SJQG5ENJ.js";import{jsx as n,jsxs as l}from"react/jsx-runtime";import{useRef as r}from"react";function s(t,n){const l=[];let r=0;for(const s of e(t,n)){if("text"===s.kind){s.text.length>0&&(l.push({kind:"text",text:t.slice(r,r+s.text.length)}),r+=s.text.length);continue}const e=i(t,r,s.kind,s.text,n);if(!e)return[{kind:"text",text:t}];const o=r+e.open.length,c=o+s.text.length,a=c+e.close.length;l.push({kind:"delimiter",text:t.slice(r,o)}),l.push({kind:s.kind,text:t.slice(o,c)}),l.push({kind:"delimiter",text:t.slice(c,a)}),r=a}return l.map(e=>e.text).join("")!==t?[{kind:"text",text:t}]:l}function i(e,t,n,l,r){for(const s of r){if(s.kind!==n)continue;if(!e.startsWith(s.open,t))continue;const r=t+s.open.length;if(e.startsWith(l,r)&&e.startsWith(s.close,r+l.length))return s}return null}function o({value:e,rules:l=t,className:r,layerRef:i}){const o=s(e,l);/* @__PURE__ */
+import{tokenizeInline as e,STANDARD_MARKUP as t}from"./chunk-HDVD27VB.js";import{jsx as n,jsxs as l}from"react/jsx-runtime";import{useRef as r}from"react";function s(t,n){const l=[];let r=0;for(const s of e(t,n)){if("text"===s.kind){s.text.length>0&&(l.push({kind:"text",text:t.slice(r,r+s.text.length)}),r+=s.text.length);continue}const e=i(t,r,s.kind,s.text,n);if(!e)return[{kind:"text",text:t}];const o=r+e.open.length,c=o+s.text.length,a=c+e.close.length;l.push({kind:"delimiter",text:t.slice(r,o)}),l.push({kind:s.kind,text:t.slice(o,c)}),l.push({kind:"delimiter",text:t.slice(c,a)}),r=a}return l.map(e=>e.text).join("")!==t?[{kind:"text",text:t}]:l}function i(e,t,n,l,r){for(const s of r){if(s.kind!==n)continue;if(!e.startsWith(s.open,t))continue;const r=t+s.open.length;if(e.startsWith(l,r)&&e.startsWith(s.close,r+l.length))return s}return null}function o({value:e,rules:l=t,className:r,layerRef:i}){const o=s(e,l);/* @__PURE__ */
 return n("div",{ref:i,className:["es-gold-layer",r??""].filter(Boolean).join(" "),"aria-hidden":"true",children:o.map((e,t)=>function(e,t){const{kind:l,text:r}=e;switch(l){case"delimiter":/* @__PURE__ */
 return n("span",{className:"es-gold-delim",children:r},t);case"accent":case"highlight":/* @__PURE__ */
 return n("em",{className:"es-gold-mark es-gold-accent",children:r},t);case"bold":/* @__PURE__ */
@@ -6,8 +6,8 @@ return n("strong",{className:"es-gold-mark es-gold-bold",children:r},t);case"ita
 return n("em",{className:"es-gold-mark es-gold-italic",children:r},t);case"strike":/* @__PURE__ */
 return n("s",{className:"es-gold-mark es-gold-strike",children:r},t);case"quiet":/* @__PURE__ */
 return n("span",{className:"es-gold-mark es-gold-quiet",children:r},t);default:/* @__PURE__ */
-return n("span",{className:"es-gold-text",children:r},t)}}(e,t))})}function c({value:e,onInput:s,onCommit:i,onCancel:c,multiline:a=!1,placeholder:u,className:d,rules:f=t,ariaLabel:m,disabled:h=!1,inputRef:g}){const p=r(null),k=r(e),x=r(!1);function N(e){x.current&&(x.current=!1,i?.(e))}/* @__PURE__ */
+return n("span",{className:"es-gold-text",children:r},t)}}(e,t))})}function c({value:e,onInput:s,onCommit:i,onCancel:c,multiline:a=!1,placeholder:u,className:d,rules:f=t,ariaLabel:m,disabled:h=!1,inputRef:g}){const p=r(null),k=r(e),x=r(!1);function v(e){x.current&&(x.current=!1,i?.(e))}/* @__PURE__ */
 return l("div",{className:["es-gold",a?"es-gold-is-multiline":"es-gold-is-single",h?"es-gold-is-off":"",d??""].filter(Boolean).join(" "),children:[
 /* @__PURE__ */n(o,{value:e,rules:f,layerRef:p}),u&&""===e?
 /* @__PURE__ */n("div",{className:"es-gold-placeholder","aria-hidden":"true",children:u}):null,
-/* @__PURE__ */n("textarea",{ref:g,className:"es-gold-input",disabled:h,value:e,placeholder:u,"aria-label":m,onChange:function(e){x.current=!0,s(e.currentTarget.value)},onFocus:function(){k.current=e,x.current=!1},onBlur:function(){N(e)},onKeyDown:function(t){return"Escape"===t.key?(t.preventDefault(),x.current=!1,void c?.(k.current)):"Enter"!==t.key||a?void 0:(t.preventDefault(),void N(e))},onScroll:function(e){const t=p.current;t&&(t.scrollTop=e.currentTarget.scrollTop,t.scrollLeft=e.currentTarget.scrollLeft)}})]})}export{o as GoldLayer,c as GoldTextInput,s as goldSegments};
+/* @__PURE__ */n("textarea",{ref:g,className:"es-gold-input",disabled:h,value:e,placeholder:u,"aria-label":m,onChange:function(e){x.current=!0,s(e.currentTarget.value)},onFocus:function(){k.current=e,x.current=!1},onBlur:function(){v(e)},onKeyDown:function(t){return"Escape"===t.key?(t.preventDefault(),x.current=!1,void c?.(k.current)):"Enter"!==t.key||a?void 0:(t.preventDefault(),void v(e))},onScroll:function(e){const t=p.current;t&&(t.scrollTop=e.currentTarget.scrollTop,t.scrollLeft=e.currentTarget.scrollLeft)}})]})}export{o as GoldLayer,c as GoldTextInput,s as goldSegments};

package/dist/chunk-SAJUCHOX.js

@@ -0,0 +1 @@
+import{DEFAULT_TEXT_STYLES_WORDS as o}from"./chunk-M6F6LS3H.js";import{DEFAULT_STYLE_CLIPBOARD_WORDS as r}from"./chunk-6WY6ZXJG.js";import{DEFAULT_CANVAS_WORDS as t}from"./chunk-AELNNAFM.js";import{DEFAULT_TREE_WORDS as m}from"./chunk-3EDSDPIP.js";import{DEFAULT_PANEL_WORDS as n}from"./chunk-TRVZ7C23.js";import{DEFAULT_NODE_MENU_WORDS as c}from"./chunk-WK3AFPXY.js";import{DEFAULT_SAVE_WORDS as s}from"./chunk-H6DDIBQ4.js";import{DEFAULT_LOCK_WORDS as f}from"./chunk-RE4LP46F.js";import{DEFAULT_CHROME_WORDS as p,DEFAULT_NOTICE_WORDS as i}from"./chunk-ZJEBF4NB.js";import{DEFAULT_RAIL_WORDS as u}from"./chunk-2OAZYSWJ.js";import{DEFAULT_COPY_WORDS as e}from"./chunk-JQM3V7XQ.js";import{DEFAULT_PICK_WORDS as k}from"./chunk-ZAOM6PFH.js";import{DEFAULT_FIELDS_WORDS as j}from"./chunk-LA54QLP5.js";import{DEFAULT_DRAG_WORDS as h}from"./chunk-O2NLQBFX.js";var l={notice:i,lock:f,save:s,chrome:p,rail:u,tree:m,panel:n,fields:j,pick:k,drag:h,menu:c,styleClipboard:r,copy:e,canvas:t,textStyles:o},a=o=>"object"==typeof o&&null!==o;function y(o,r){const t={};for(const m of Object.keys(o)){const n=o[m],c=r[m];null==c?t[m]=n:a(n)?t[m]=a(c)?y(n,c):n:t[m]=typeof c==typeof n?c:n}return t}function F(o,r){return r?y(o,r):o}export{l as DEFAULT_EASEL_STRINGS,F as mergeEaselStrings};

package/dist/chunk-TRVZ7C23.js

@@ -0,0 +1 @@
+var t={settings:"Settings",buckets:{Content:"Content",Style:"Style",Layout:"Layout",Animation:"Animation"},followsDefault:"Default",reset:"Reset",resetName:({label:t})=>`Reset ${t}`,backToDefault:({detail:t})=>`Back to default: ${t}`};export{t as DEFAULT_PANEL_WORDS};

package/dist/chunk-V7GIIXFB.js

@@ -0,0 +1,16 @@
+import{DEFAULT_TREE_WORDS as e}from"./chunk-3EDSDPIP.js";import{ChevronIcon as a,AddIcon as r}from"./chunk-6EIVTKZZ.js";import{jsx as l,jsxs as n,Fragment as s}from"react/jsx-runtime";function t({className:e,children:a,rootProps:r}){/* @__PURE__ */
+return l("div",{...r,className:e?`es-tree ${e}`:"es-tree",children:a})}function i({children:e}){/* @__PURE__ */
+return l("div",{className:"es-tree-group",children:e})}function d({children:e}){/* @__PURE__ */
+return l("div",{className:"es-subtree",children:e})}var o=e.dragHint;function c({icon:r,name:t,preview:i,selected:d,hidden:o,draggable:c,dragHint:p,dragging:m,drop:h,fold:u,handle:b,actions:N,nameSlot:g,onSelect:k,marks:y,badge:f,trailing:v,children:w,rowProps:P,words:j=e}){const x=["es-tree-row",d?"is-selected":"",o?"is-hidden":"",c?"is-draggable":"",m?"is-dragging":"",h?`is-drop-${h}`:""].filter(Boolean).join(" "),A=/* @__PURE__ */n(s,{children:[
+/* @__PURE__ */n("span",{className:"es-tree-name",children:[t,i?/* @__PURE__ */l("span",{className:"es-tree-preview",children:i}):null]}),y?.map(e=>/* @__PURE__ */l("span",{className:"es-tree-mark",title:e.label,"aria-label":e.label,role:"img",children:e.icon},e.key)),null!=f&&!1!==f?/* @__PURE__ */l("span",{className:"es-tree-badge",children:f}):null]});/* @__PURE__ */
+return n("div",{...P,className:x,children:[c?
+/* @__PURE__ */n(s,{children:[
+/* @__PURE__ */l("span",{className:"es-tree-grip","aria-hidden":"true",children:"⋮"}),
+/* @__PURE__ */l("span",{className:"es-tree-hint","aria-hidden":"true",children:p??j.dragHint})]}):b?/* @__PURE__ */l("button",{type:"button",className:"es-tree-handle",...b,children:"⋮⋮"}):null,u?/* @__PURE__ */l("button",{type:"button",className:"es-tree-caret","aria-label":u.open?j.collapseNamed({label:u.label}):j.expandNamed({label:u.label}),"aria-expanded":u.open,title:u.open?j.collapse:j.expand,onClick:e=>{e.stopPropagation(),u.onToggle()},children:/* @__PURE__ */l(a,{size:11,strokeWidth:2.6,className:u.open?"es-tree-chev is-open":"es-tree-chev"})}):/* @__PURE__ */l("span",{className:"es-tree-caret-spacer","aria-hidden":"true"}),
+/* @__PURE__ */l("span",{className:"es-tree-chip","aria-hidden":"true",children:r}),
+/* @__PURE__ */n("span",{className:"es-tree-name-box",children:[g??(k?
+/* @__PURE__ */l("button",{type:"button",className:"es-tree-select","aria-current":d?"true":void 0,"aria-keyshortcuts":c?"Alt+ArrowUp Alt+ArrowDown":void 0,onClick:k,children:A}):A),N?/* @__PURE__ */l("span",{className:"es-tree-actions",children:N}):null]}),v?/* @__PURE__ */l("span",{className:"es-tree-trailing",title:v.label,"aria-label":v.label,role:"img",children:v.icon}):null,w]})}function p({kind:e,label:a,onClick:r,pressed:n,disabled:s,children:t}){/* @__PURE__ */
+return l("button",{type:"button",className:"delete"===e?"es-tree-del":"eye"===e?"es-tree-eye":"es-tree-act",title:a,"aria-label":a,"aria-pressed":n,disabled:s,onClick:e=>{e.stopPropagation(),r()},children:t})}function m({drop:e,onAdd:a,label:r,seamProps:n}){const s=["es-tree-seam",e?"is-drop":"",a?"has-add":""].filter(Boolean).join(" ");/* @__PURE__ */
+return l("div",{...n,className:s,children:a?/* @__PURE__ */l("button",{type:"button",className:"es-tree-seam-add","aria-label":r,title:r,onClick:a,children:"+"}):null})}function h({drop:a,onAdd:s,label:t,seamProps:i,words:d=e}){const o=["es-tree-empty",a?"is-drop":"",s?"has-add":""].filter(Boolean).join(" "),c=d.dropHere??e.dropHere;/* @__PURE__ */
+return l("div",{...i,className:o,children:s?/* @__PURE__ */n("button",{type:"button",className:"es-tree-empty-add",onClick:s,children:[
+/* @__PURE__ */l(r,{size:12,"aria-hidden":"true"}),a?c:t??d.addBlock??e.addBlock]}):/* @__PURE__ */l("span",{className:"es-tree-empty-note",children:a?c:t??d.emptySlot??e.emptySlot})})}export{t as LayersTree,d as Subtree,o as TREE_DRAG_HINT,h as TreeEmptySlot,i as TreeGroupLabel,c as TreeRow,p as TreeRowAction,m as TreeSeam};

package/dist/{chunk-IBOFSS56.js → chunk-WZ7TGAAT.js}

@@ -1,3 +1,3 @@
 import{DEFAULT_RAIL_WORDS as a}from"./chunk-2OAZYSWJ.js";import{wordFitVars as i}from"./chunk-BZ5ASXOL.js";import{jsxs as e,jsx as r}from"react/jsx-runtime";function o({label:a,worded:i,icon:o,active:l,disabled:t,onSelect:n,className:d}){const s=["es-rail-btn",l?"is-active":"",d??""].filter(Boolean).join(" ");/* @__PURE__ */
 return e("button",{type:"button",className:s,title:a,"aria-label":a,"aria-pressed":"boolean"==typeof l?l:void 0,disabled:t,onClick:t?void 0:n,children:[o,i?/* @__PURE__ */r("span",{className:"es-rail-word","aria-hidden":"true",children:a}):null]})}function l({items:e,ariaLabel:l=a.label,className:t,orientation:n="column",wordFit:d}){const s="row"===n,c=s&&d?d:void 0;/* @__PURE__ */
-return r("div",{className:["es-rail",s?"es-rail-row":"",c?"is-measured":"",t??""].filter(Boolean).join(" "),role:"toolbar","aria-orientation":s?"horizontal":"vertical","aria-label":l,style:c&&i(e.length,c),children:e.map(a=>/* @__PURE__ */r(o,{label:a.label,worded:Boolean(c),icon:a.icon,active:a.active,disabled:a.disabled,onSelect:a.onSelect},a.id))})}var t={railWidth:46,railPaddingY:8,railGap:4,railRadius:12,buttonSize:34,buttonRadius:9,iconSize:18,wordPaddingX:8,wordGap:8,wordFontSize:12,wordFontWeight:500,transition:"background 0.12s, color 0.12s",disabledOpacity:.35,color:{background:"#ffffff",shadow:"0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06)",idle:"#6b7280",hoverBg:"#f3f4f6",hoverFg:"#111827",accent:"#2563eb",accentTint:"#eff6ff"}},n={railWidth:"--es-rail-w",railPaddingY:"--es-rail-pad-y",railGap:"--es-rail-gap",railRadius:"--es-rail-radius",buttonSize:"--es-rail-btn-size",buttonRadius:"--es-rail-btn-radius",iconSize:"--es-rail-icon-size",wordPaddingX:"--es-rail-word-pad-x",wordGap:"--es-rail-word-gap",wordFontSize:"--es-rail-word-size",wordFontWeight:"--es-rail-word-weight",background:"--es-rail-bg",shadow:"--es-rail-shadow",idle:"--es-rail-fg",hoverBg:"--es-rail-hover-bg",hoverFg:"--es-rail-hover-fg",accent:"--es-rail-accent",accentTint:"--es-rail-accent-tint"};export{l as EditorRail,o as EditorRailButton,n as railCssVars,t as railTokens};
+return r("div",{className:["es-rail",s?"es-rail-row":"",c?"is-measured":"",t??""].filter(Boolean).join(" "),role:"toolbar","aria-orientation":s?"horizontal":"vertical","aria-label":l,style:c&&i(e.length,c),children:e.map(a=>/* @__PURE__ */r(o,{label:a.label,worded:Boolean(c),icon:a.icon,active:a.active,disabled:a.disabled,onSelect:a.onSelect},a.id))})}var t={railWidth:46,railPaddingY:8,railGap:4,railRadius:12,buttonSize:34,buttonRadius:9,iconSize:18,wordPaddingX:8,wordGap:8,wordFontSize:12,wordFontWeight:500,transition:"background 0.12s, color 0.12s",disabledOpacity:.35,color:{background:"#ffffff",shadow:"0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06)",idle:"#6b7280",hoverBg:"#f3f4f6",hoverFg:"#111827",accent:"#2563eb",accentTint:"#eff6ff"}},n={railWidth:"--es-rail-w",railPaddingY:"--es-rail-pad-y",railGap:"--es-rail-gap",railRadius:"--es-rail-radius",buttonSize:"--es-rail-btn-size",buttonRadius:"--es-rail-btn-radius",iconSize:"--es-rail-icon-size",wordPaddingX:"--es-rail-word-pad-x",wordGap:"--es-rail-word-gap",wordFontSize:"--es-rail-word-size",wordFontWeight:"--es-rail-word-weight",background:"--es-rail-bg",shadow:"--es-rail-shadow",idle:"--es-rail-fg",hoverBg:"--es-rail-hover-bg",hoverFg:"--es-rail-hover-fg",accent:"--es-rail-accent",accentTint:"--es-rail-accent-tint"};export{l as EaselRail,o as EaselRailButton,n as railCssVars,t as railTokens};

package/dist/chunk-ZJEBF4NB.js

@@ -0,0 +1 @@
+var e={reload:"Reload the saved version",takeOver:"Take over editing",takeBack:"Take it back",viewReadOnly:"View read-only",savedByYou:({noun:e,when:i})=>`You saved this ${e} in another tab or window ${i}.`,savedByOther:({name:e,noun:i,when:n})=>`${e} saved this ${i} ${n}.`,conflictBody:"Your last change was not saved. It is still on screen here, but this copy is out of date — copy anything you need, then reload to carry on from the saved version.",takeOverWhileDeciding:"Nobody else can save while you decide. Nothing on your screen is lost.",tookOver:({name:e,noun:i,when:n})=>`${e} took over this ${i} ${n}.`,tookOverBody:"Your changes since then are still on screen but are no longer being saved.",viewingOnly:"Viewing only.",viewingOnlyBody:({name:e,noun:i,seen:n})=>`${e} is editing this ${i} (last seen ${n}). Nothing you change here is saved.`,editing:({name:e,noun:i})=>`${e} is editing this ${i}`,editingBody:({seen:e})=>`(last seen ${e}). Nothing you change here will be saved while they are in it.`,takeOverTold:"They are told straight away and stop being able to save."},i={device:"Preview device",upLevel:"Go up one level",upLevelTo:({label:e,name:i})=>`${e} to ${i}`,resize:"Drag to resize · double-click to reset",mediaLibrary:"Media library",mediaChoose:({kind:e})=>`Choose ${e}`,mediaFor:({field:e})=>`For ${e}`,mediaKinds:{image:"image",video:"video",svg:"SVG logo"},mediaCancel:"Cancel",mediaKeep:({kind:e})=>`Keep the current ${e}`,hidePanel:"Hide panel",hidePanelLabel:({side:e})=>`Hide the ${e} panel`};export{i as DEFAULT_CHROME_WORDS,e as DEFAULT_NOTICE_WORDS};

package/dist/copy/copy.css

@@ -28,7 +28,14 @@
    *  `.es-copy-box` below for the caret bug that rule exists to stop. */
   --es-copy-field-pad: 4px 8px;
   --es-copy-field-ring: var(--es-accent, #2563eb);
-  --es-copy-radius: 4px;
+  /* react-os-shell's inputClasses (design v5, 0.95.0): text-sm, a blue-400
+     border and a 2px blue-400/30 ring while focused. One set of numbers for
+     BOTH views, so flipping "Show marks" moves no word. */
+  --es-copy-field-font: 14px;
+  --es-copy-field-line: 1.5;
+  --es-copy-focus-border: #60a5fa;
+  --es-copy-focus-ring: 0 0 0 2px rgba(96, 165, 250, 0.3);
+  --es-copy-radius: 6px;
 
   display: block;
   /* A container, so a host can query the box's own width. Never on
@@ -184,15 +191,16 @@
 }
 
 .es-copy-box {
-
   border: 1px solid var(--es-copy-field-border);
   border-radius: var(--es-copy-radius);
   background: var(--es-copy-field-bg);
-  font-size: 12px;
+  font-size: var(--es-copy-field-font);
+  line-height: var(--es-copy-field-line);
 }
 
 .es-copy-box:focus-within {
-  border-color: var(--es-copy-field-ring);
+  border-color: var(--es-copy-focus-border);
+  box-shadow: var(--es-copy-focus-ring);
 }
 
 .es-copy-box.es-gold-is-off {
@@ -254,10 +262,25 @@
 
 .es-copy-link-actions {
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: space-between;
   gap: 8px;
 }
 
+/* Cancel and Apply sit together at the end; Remove, when there is a link to
+   take off, at the start (the design's footer). */
+.es-copy-link-end {
+  display: flex;
+  gap: var(--es-space-4, 4px);
+  margin-left: auto;
+}
+
+.es-copy-link-btn.is-danger {
+  border-color: transparent;
+  background: transparent;
+  color: var(--es-danger, #dc2626);
+}
+
 .es-copy-link-btn {
   height: 28px;
   padding: 0 12px;
@@ -280,3 +303,363 @@
   opacity: 0.5;
   cursor: default;
 }
+
+/* — the rich view (0.95.0, rulings B + C) — */
+
+/*
+ * The box that shows the EFFECT (./RichBox). Same frame and same type as the
+ * marks view above, so the "Show marks" switch flips the marks in and out and
+ * moves nothing else.
+ *
+ * Unlike the gold layer, weight and slant are SAFE here: there is no second
+ * surface for a wider glyph to drift from — the caret is the browser's own,
+ * in the same text it draws.
+ *
+ * The colours are the gold layer's (`--es-gold-accent`, `--es-gold-quiet`), so
+ * Emphasis and Quiet look the same in both views and a host aliases them once.
+ */
+.es-rich-wrap {
+  position: relative;
+}
+
+.es-rich {
+  box-sizing: border-box;
+  min-height: calc(var(--es-copy-field-font) * var(--es-copy-field-line) + 14px);
+  padding: var(--es-copy-field-pad);
+  border: 1px solid var(--es-copy-field-border);
+  border-radius: var(--es-copy-radius);
+  background: var(--es-copy-field-bg);
+  color: var(--es-text, #111827);
+  font: inherit;
+  font-size: var(--es-copy-field-font);
+  line-height: var(--es-copy-field-line);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  outline: none;
+  cursor: text;
+}
+
+/* Many lines: room for three, like the textarea it replaces (design: the
+   empty box is 4.625rem). */
+.es-rich.is-multiline {
+  min-height: 4.625rem;
+}
+
+/* One line: it scrolls sideways rather than wrapping, as an <input> does. */
+.es-rich.is-single {
+  white-space: pre;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.es-rich:focus {
+  border-color: var(--es-copy-focus-border);
+  box-shadow: var(--es-copy-focus-ring);
+}
+
+.es-rich.is-off {
+  background: var(--es-field-bg-off, #f9fafb);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.es-rich-line {
+  min-height: calc(var(--es-copy-field-font) * var(--es-copy-field-line));
+}
+
+.es-rich-line.is-bullet {
+  display: list-item;
+  list-style: disc outside;
+  margin-left: 1.25em;
+}
+
+.es-rich-line.is-bullet::marker {
+  color: var(--es-text-muted, #9ca3af);
+}
+
+/* A numbered line (E1's `12. words`) draws the number AS SAVED — `01` stays
+   `01` — in the margin, where the caret never goes. Not `list-item`: a list
+   counter would renumber, and the saved digits are the truth. */
+.es-rich-line.is-numbered {
+  position: relative;
+  /* Room for up to three digits and the dot ("100.") left of the words. */
+  margin-left: 2em;
+}
+
+.es-rich-line.is-numbered::before {
+  content: attr(data-number) '.';
+  position: absolute;
+  right: 100%;
+  padding-right: 0.35em;
+  white-space: nowrap;
+  color: var(--es-text-muted, #9ca3af);
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* E1's spans. Underline, sup and sub are the browser's own <u>, <sup>, <sub>.
+   A theme colour reads `--es-color-<name>`, which the HOST sets from its
+   theme (RichBox draws the var); the words keep the text colour until it does. */
+.es-rich u {
+  text-underline-offset: 2px;
+}
+
+.es-rich sup,
+.es-rich sub {
+  font-size: 0.75em;
+  line-height: 0;
+}
+
+.es-rich strong {
+  font-weight: 600;
+}
+
+.es-rich .es-rich-emphasis {
+  color: var(--es-gold-accent, var(--gold, #c9a461));
+  font-weight: 600;
+}
+
+.es-rich .es-rich-quiet {
+  color: var(--es-gold-quiet, #6b7280);
+  font-size: 0.86em;
+}
+
+.es-rich .es-rich-link {
+  color: var(--es-accent, #2563eb);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: text;
+}
+
+.es-rich-placeholder {
+  position: absolute;
+  inset: 0;
+  padding: var(--es-copy-field-pad);
+  border: 1px solid transparent;
+  color: var(--es-gold-placeholder, #9ca3af);
+  font-size: var(--es-copy-field-font);
+  line-height: var(--es-copy-field-line);
+  pointer-events: none;
+}
+
+/* The "Show marks" switch, under the box (design v5: react-os-shell's Switch
+   with its label to the right). The switch is the panel's own (`.es-switch`). */
+.es-copy-marks {
+  display: flex;
+  align-items: center;
+  gap: var(--es-space-8, 8px);
+  margin-top: var(--es-copy-gap);
+}
+
+.es-copy-marks-label {
+  font-size: 13px;
+  color: var(--es-text-secondary, #374151);
+}
+
+/* — the final toolbar (E5b, design final 2026-10-06) — */
+
+/*
+ * TWO ROWS ON ONE 9-COLUMN GRID, flush to the box at both ends: every button
+ * sits under the one above it. The size is react-os-shell's IconButton md
+ * (`--es-copy-mark-size`, 32px), the size the design draws in a 320px panel.
+ * A cell the host does not offer is drawn EMPTY, so the columns still line up.
+ */
+.es-tb-wrap {
+  /*
+   * The button size: react-os-shell's IconButton md (32px) — but never more
+   * than a ninth of the row, so the row is FLUSH to the box at both ends. A
+   * 320px panel's box is 286px (its 1px border takes two), and nine 32px
+   * buttons would overrun it by 2px; here they are 31.8px. On the WRAPPER, so
+   * the two windows, which sit beside the toolbar, read it too.
+   */
+  --es-tb-size: min(var(--es-copy-mark-size), calc(100cqw / 9));
+  position: relative;
+  margin-bottom: var(--es-copy-gap);
+}
+
+.es-tb {
+  display: flex;
+  flex-direction: column;
+  gap: var(--es-space-4, 4px);
+}
+
+.es-tb-row {
+  display: grid;
+  grid-template-columns: repeat(9, var(--es-tb-size));
+  justify-content: space-between;
+}
+
+/* The alignment and case groups are radiogroups for a screen reader and
+   nothing for the grid: their buttons are cells of the row. */
+.es-tb-group {
+  display: contents;
+}
+
+.es-tb-btn {
+  box-sizing: border-box;
+  width: var(--es-tb-size);
+  height: var(--es-tb-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--es-text-secondary, #374151);
+  cursor: pointer;
+}
+
+.es-tb-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.es-tb-btn:hover:not(:disabled) {
+  background: var(--es-hover, #f3f4f6);
+}
+
+.es-tb-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--es-copy-focus-ring);
+}
+
+/* Lit: the selection wears the mark (a press takes it off), the window is
+   open, or the field holds that value — react-os-shell's selected tone. */
+.es-tb-btn.is-on,
+.es-tb-btn.is-on:hover:not(:disabled) {
+  background: var(--es-accent-tint, #eff6ff);
+  color: var(--es-accent-text, #1d4ed8);
+}
+
+.es-tb-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* The bar under the A is the colour the selected words wear. */
+.es-tb-color svg rect {
+  fill: var(--es-tb-run, currentColor);
+}
+
+/*
+ * A NARROW BOX keeps both rows and shrinks the buttons a little — never wraps.
+ * The design: under a 300px panel, the shell's next size down (24px), and no
+ * wider than a ninth of the row. A 300px panel less its two 16px gutters is a
+ * 268px box: `.es-copy` is the container that measures it.
+ */
+@container (width < 268px) {
+  .es-tb-wrap {
+    --es-tb-size: min(24px, calc(100cqw / 9));
+  }
+
+  .es-tb-btn {
+    border-radius: 5px;
+  }
+
+  .es-tb-btn svg {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+/*
+ * THE TWO WINDOWS (colour, link) drop from their button, under the first row
+ * and over the second, pushing nothing down — as drawn. They sit over the box
+ * itself, so the panel's scrolling edge is not near them. DatePicker's
+ * popover: 288px, 12px corners, a 12px inset, react-os-shell's shadow.
+ */
+.es-copy-pop {
+  position: absolute;
+  z-index: 5;
+  left: 0;
+  top: calc(var(--es-tb-size) + 6px);
+  box-sizing: border-box;
+  width: 288px;
+  max-width: 100%;
+  margin-top: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--es-space-8, 8px);
+  padding: 12px;
+  border: 1px solid var(--es-border, #e5e7eb);
+  border-radius: 12px;
+  background: var(--es-raised, #fff);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+}
+
+/* The point, aimed at its button: column k of 9 across the row (100cqw). */
+.es-copy-pop::before {
+  content: '';
+  position: absolute;
+  top: -6px;
+  width: 10px;
+  height: 10px;
+  background: inherit;
+  border-left: 1px solid var(--es-border, #e5e7eb);
+  border-top: 1px solid var(--es-border, #e5e7eb);
+  transform: rotate(45deg);
+}
+
+.es-copy-colors::before {
+  left: calc(4 * (100cqw - var(--es-tb-size)) / 8 + var(--es-tb-size) / 2 - 6px);
+}
+
+.es-copy-link.es-copy-pop::before {
+  left: calc(5 * (100cqw - var(--es-tb-size)) / 8 + var(--es-tb-size) / 2 - 6px);
+}
+
+.es-copy-pop-label,
+.es-copy-pop .es-copy-link-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--es-text-secondary, #4b5563);
+}
+
+.es-copy-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  /* One group of colours: the scale's step for things that are one thing. */
+  gap: var(--es-space-4, 4px);
+}
+
+.es-copy-swatch {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+}
+
+.es-copy-swatch[aria-pressed='true'] {
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 2px #fff, 0 0 0 4px var(--es-accent, #2563eb);
+}
+
+/* Any color (E1 widened 2026-10-06) is pick's own ColourWindow (pick.css):
+   inside this window it is not a second box — no border, no inset. */
+.es-copy-colors .es-pick-window {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  gap: var(--es-space-8, 8px);
+}
+
+.es-copy-pop-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--es-space-4, 4px);
+}
+
+/* — the number cells (E5b): a 2-column grid between the toolbar and the box — */
+.es-copy-cells {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--es-space-4, 4px);
+  margin-bottom: var(--es-copy-gap);
+}