efficient-easel 11.3.0 → 12.0.0

package/dist/text-styles/index.js

@@ -1,35 +1,36 @@
-import{hexReadout as e,ColourWindow as n,typedHex as t}from"../chunk-FPAVNX3Y.js";import{DEFAULT_TEXT_STYLES_WORDS as s}from"../chunk-OGH6CC3E.js";export{DEFAULT_TEXT_STYLES_WORDS}from"../chunk-OGH6CC3E.js";import"../chunk-ZAOM6PFH.js";import{FieldSlider as a}from"../chunk-XWFH2NHZ.js";import{FieldSelect as i}from"../chunk-65Z5FSAW.js";import"../chunk-FFYXVAAL.js";import{useWords as l}from"../chunk-MFIRYGHW.js";import{withTip as r}from"../chunk-P2VEMZH5.js";import{hsvToHex as o,Tooltip as d,ColorSwatch as c,IconButton as u}from"efficient-shell/ui";import{useState as m,useRef as f,useId as h,useEffect as p,Fragment as v}from"react";import{TrashIcon as g,ChevronIcon as y,BoldIcon as k,ItalicIcon as b,CaseLowerIcon as x,CaseCapitalizedIcon as w,CaseUpperIcon as S,CaseNormalIcon as N}from"efficient-shell/icons/efficient";import{jsxs as C,jsx as z,Fragment as O}from"react/jsx-runtime";var M=["font","color","size","weight","emphasis","lineSpacing","letterSpacing","paragraphSpacing","letterCase","largestSize"],$=["font","color","size","weight","lineSpacing","letterSpacing","paragraphSpacing","letterCase"],A=["heading","body"],j=7,F={heading:3,body:5},E={min:5,max:void 0,sliderMin:12,sliderMax:72,step:1,shiftStep:10,unit:"px"},W={size:E,weight:{min:100,max:900,sliderMin:300,sliderMax:900,step:100,shiftStep:100,unit:""},lineSpacing:{min:50,max:250,sliderMin:50,sliderMax:250,step:1,shiftStep:10,unit:"%"},letterSpacing:{min:-10,max:void 0,sliderMin:-5,sliderMax:10,step:.1,shiftStep:1,unit:"px"},paragraphSpacing:{min:0,max:void 0,sliderMin:0,sliderMax:48,step:1,shiftStep:10,unit:"px"},largestSize:E},H=(e,n)=>`${"heading"===e?"Heading":"Body"} ${n}`;function L(e=({kind:e,n:n})=>H(e,n)){return A.flatMap(n=>Array.from({length:F[n]},(t,s)=>({id:`${n}-${s+1}`,kind:n,name:e({kind:n,n:s+1}),values:{}})))}function B(e,n,t=j){return e.filter(e=>e.kind===n).length<t}function D(e,n){const t=new RegExp(`^${n}-([1-9]\\d*)$`).exec(e);return t?Number(t[1]):void 0}function I(e){const n=D(e.id,e.kind);return void 0!==n&&n<=F[e.kind]}function R(e,n,t={}){const{max:s=j,name:a=({kind:e,n:n})=>H(e,n),make:i}=t;if(!B(e,n,s))return null;const l=e.filter(e=>e.kind===n);let r=l.length+1;const o=new Set(e.map(e=>e.name));for(;o.has(a({kind:n,n:r}));)r+=1;const d=new Set(e.map(e=>e.id));let c=Math.max(r,...l.map(e=>(D(e.id,n)??0)+1));for(;d.has(`${n}-${c}`);)c+=1;const u=l.at(-1),m=i?i(n,r):{id:`${n}-${c}`,kind:n,name:a({kind:n,n:r}),values:{...u?.values??{}}},f=u?e.indexOf(u)+1:"heading"===n?0:e.length;return{styles:[...e.slice(0,f),m,...e.slice(f)],added:m}}function T(e,n,t={}){const{name:s=({kind:e,n:n})=>H(e,n)}=t,a=e.find(e=>e.id===n);if(!a||I(a))return null;const i=e.filter(e=>e.kind===a.kind),l=i.indexOf(a),r=/* @__PURE__ */new Map;return i.forEach((e,n)=>{n>l&&e.name===s({kind:e.kind,n:n+1})&&r.set(e,s({kind:e.kind,n:n}))}),{styles:e.filter(e=>e!==a).map(e=>r.has(e)?{...e,name:r.get(e)}:e),removed:a}}function V(e,n){const t=e.find(e=>e.id===n);if(t)return t;for(const t of A){const s=D(n,t);if(void 0===s)continue;let a;for(const n of e){const e=n.kind===t?D(n.id,t):void 0;void 0!==e&&e<s&&(!a||e>a.n)&&(a={n:e,style:n})}return a?.style}}function X(e,n,t){return e.map(e=>{if(e.id!==n)return e;const s={...e.values};for(const[e,n]of Object.entries(t))void 0===n?delete s[e]:s[e]=n;return{...e,values:s}})}function Y(e){return Math.min(20,Math.max(12,Math.round(.5*e+6)))}function Z(e,n){const t=n.weights;return[t.thin,t.extraLight,t.light,t.regular,t.medium,t.semibold,t.bold,t.extraBold,t.black][Math.min(8,Math.max(0,Math.round(e/100)-1))]}function q(e,n,t,s={}){const a=n.find(n=>n.value===e.font)?.label??e.font??"",i=void 0===e.size?s.autoSize?t.auto:"":t.px({n:e.size});return t.summary({font:a,size:i,weight:Z(e.weight??400,t)})}var G=`conic-gradient(${[0,60,120,180,240,300,0].map(e=>o({h:e,s:1,v:1})).join(", ")})`;function P({value:t,hex:s,colours:a,label:i,followsWord:l,anyWord:r,onChange:o,readOnly:u=!1}){const[v,g]=m(!1),y=f(null),k=f(null),b=h(),x=void 0!==t&&a.some(e=>e.key===t),w=void 0!==t&&!x;return p(()=>{if(!v)return;const e=y.current?.ownerDocument;if(!e)return;const n=e=>{y.current&&!y.current.contains(e.target)&&g(!1)};return e.addEventListener("click",n,!0),()=>e.removeEventListener("click",n,!0)},[v]),/* @__PURE__ */C("div",{ref:y,className:"es-ts-set","data-ts-setting":"color",children:[
-/* @__PURE__ */C("div",{className:"es-ts-top",children:[
-/* @__PURE__ */z("span",{className:"es-ts-sub",children:i}),
-/* @__PURE__ */z("span",{className:"es-ts-colour-read",children:s?e(s):l})]}),
-/* @__PURE__ */C("div",{className:"es-ts-swatches",role:"group","aria-label":i,children:[a.map(n=>/* @__PURE__ */z(d,{content:`${n.name} · ${e(n.value)}`,children:/* @__PURE__ */z(c,{color:n.value,size:"sm",className:"es-ts-swatch","aria-label":n.name,selected:t===n.key,disabled:u,onClick:()=>o(n.key)})},n.key)),
-/* @__PURE__ */z(d,{content:r,children:/* @__PURE__ */z(c,{ref:k,color:G,size:"sm",className:"es-ts-swatch es-ts-swatch--any","aria-label":r,selected:w,"aria-expanded":v,"aria-controls":v?b:void 0,disabled:u,onClick:()=>g(e=>!e)})})]}),v?/* @__PURE__ */z(n,{id:b,value:s??"",onChange:e=>o(e),label:i,readOnly:u,onClose:()=>{g(!1),k.current?.focus()}}):null]})}function _({styles:e,onChange:n,fonts:t,colours:a=[],settings:i=$,auto:o=[],fallback:d,sample:c,openId:u,defaultOpenId:v=null,onOpenChange:y,onAdd:k,rowActions:b,onRemove:x,max:w=j,readOnly:S=!1}){const N=l("textStyles",s),M=h(),[F,E]=m(v),W=void 0!==u?u:F,H=e=>{void 0===u&&E(e),y?.(e)},L=f(null),[D,V]=m(null);p(()=>{if(!D||!L.current)return;const e=[...L.current.querySelectorAll(".es-ts-item")].find(e=>e.dataset.tsId===D.id),n=e?e.querySelector(".es-ts-row"):L.current.querySelector(`.es-ts-add[data-ts-kind="${D.kind}"]`);n?.focus(),V(null)},[D]);/* @__PURE__ */
-return z("div",{className:"es-ts",ref:L,children:A.map(s=>{const l=e.filter(e=>e.kind===s),u=!B(e,s,w),m=!S&&!u;/* @__PURE__ */
-return C(U,{label:N.groups[s],children:[l.map(s=>{const l=b?.(s),u=null!=l&&!1!==l,m=Boolean(x)&&!S&&!I(s);/* @__PURE__ */
-return z(K,{style:s,fonts:t,colours:a,settings:i,auto:o,fallback:d,sample:c,readOnly:S,open:W===s.id,onOpenChange:e=>H(e?s.id:null),onChange:t=>n(e.map(e=>e.id===t.id?t:e)),actions:m||u?/* @__PURE__ */C(O,{children:[m?r(N.remove,/* @__PURE__ */z("button",{type:"button",className:"es-ts-del","aria-label":N.removeNamed({name:s.name}),onClick:()=>(t=>{if(S||!x)return;const s=T(e,t.id,{name:N.styleName});if(!s)return;const a=e.filter(e=>e.kind===t.kind),i=a[a.indexOf(t)+1];W===t.id&&H(null),n(s.styles),x(s.removed),V({id:i?.id??null,kind:t.kind})})(s),children:/* @__PURE__ */z(g,{size:14,"aria-hidden":"true"})})):null,u?l:null]}):null},s.id)}),r(!S&&u?N.full({kind:s,max:w}):void 0,/* @__PURE__ */C("button",{type:"button",className:"es-ts-add","data-ts-kind":s,disabled:S,"aria-disabled":!(S||!u)||void 0,"aria-describedby":!S&&u?`${M}-full-${s}`:void 0,onClick:()=>{m&&(t=>{if(S)return;const s=R(e,t,{max:w,name:N.styleName,make:k});s&&n(s.styles)})(s)},children:[
-/* @__PURE__ */z("span",{className:"es-ts-add-word",children:N.add[s]}),
-/* @__PURE__ */z("span",{className:"es-ts-count",children:N.count({n:l.length,max:w})})]})),S||!u?null:/* @__PURE__ */z("span",{id:`${M}-full-${s}`,className:"es-vh",children:N.full({kind:s,max:w})})]},s)})})}function U({label:e,children:n}){const t=h();/* @__PURE__ */
-return C("section",{className:"es-ts-section","aria-labelledby":t,children:[
-/* @__PURE__ */z("div",{className:"es-ts-group",id:t,children:e}),n]})}function K({style:e,fonts:n,colours:t=[],settings:a=$,auto:i=[],fallback:r,sample:o,open:d,onOpenChange:c,onChange:u,actions:m,readOnly:f=!1}){const p=l("textStyles",s),g=`${h()}-open-${e.id}`,k=new Set(i),b=M.filter(e=>a.includes(e)),x={...r?.(e)??{},...e.values},w=n.find(e=>e.value===x.font),S={fontFamily:w?.family,fontSize:`${Y(x.size??16)}px`,fontWeight:x.weight,fontStyle:x.italic?"italic":void 0};/* @__PURE__ */
-return C(v,{children:[
-/* @__PURE__ */C("div",{className:"es-ts-item","data-ts-id":e.id,children:[
-/* @__PURE__ */C("button",{type:"button",className:"es-ts-row","aria-expanded":d,"aria-controls":d?g:void 0,onClick:()=>c(!d),children:[
-/* @__PURE__ */z("span",{className:"es-ts-chev","aria-hidden":"true",children:/* @__PURE__ */z(y,{size:12})}),
-/* @__PURE__ */z("span",{className:"es-ts-name",style:S,children:e.name}),
-/* @__PURE__ */z("span",{className:"es-ts-meta",children:q(x,n,p,{autoSize:k.has("size")&&void 0===e.values.size})})]}),m?/* @__PURE__ */z("div",{className:"es-ts-actions",children:m}):null]}),d?/* @__PURE__ */z("div",{className:"es-ts-open",id:g,children:/* @__PURE__ */z(ee,{style:e,values:x,fonts:n,colours:t,settings:b,autoSet:k,sample:o??p.sample,words:p,readOnly:f,set:n=>u(X([e],e.id,n)[0])})}):null]})}var J={none:N,upper:S,capitalize:w,lower:x},Q={none:"none",upper:"uppercase",capitalize:"capitalize",lower:"lowercase"};function ee({style:e,values:n,fonts:s,colours:i,settings:l,autoSet:o,sample:d,words:c,readOnly:m,set:f}){const h=e.values,p=s.find(e=>e.value===n.font),v=function(e,n){return e?n.find(n=>n.key===e)?.value??t(e)??void 0:void 0}(n.color,i),g=e=>"largestSize"===e||o.has(e),y=e=>g(e)?h[e]:n[e],x=y("size"),w=y("lineSpacing"),S=y("letterSpacing"),N=g("letterCase")?h.letterCase:n.letterCase,M={fontFamily:p?.family,fontSize:void 0===x?void 0:`${x}px`,fontWeight:n.weight,fontStyle:n.italic?"italic":void 0,lineHeight:void 0===w?void 0:String(w/100),letterSpacing:void 0===S?void 0:`${S}px`,color:v,textTransform:N?Q[N]:void 0},$=e=>{const t=W[e],s=g(e);/* @__PURE__ */
-return z("div",{className:"es-ts-slider","data-ts-setting":e,children:/* @__PURE__ */z(a,{label:c.settings[e],value:h[e],onChange:n=>f({[e]:n}),min:t.min,max:t.max,step:t.step,shiftStep:t.shiftStep,sliderMin:t.sliderMin,sliderMax:t.sliderMax,unit:t.unit||void 0,styleValue:s?void 0:n[e],auto:s?c.auto:void 0,readOnly:m})},e)};/* @__PURE__ */
-return C(O,{children:[
-/* @__PURE__ */z("div",{className:"es-ts-preview",style:M,"aria-label":c.preview,children:d}),l.map(t=>{switch(t){case"font":/* @__PURE__ */
-return z(ne,{value:h.font,fonts:s,words:c,readOnly:m,set:f},t);case"color":/* @__PURE__ */
-return z(te,{value:h.color,hex:v,colours:i,words:c,readOnly:m,set:f},t);case"emphasis":{const e=(n.weight??400)>=600,s=!1!==p?.italic;/* @__PURE__ */
-return C("div",{className:"es-ts-set","data-ts-setting":t,children:[
-/* @__PURE__ */z("span",{className:"es-ts-sub",children:c.settings.emphasis}),
-/* @__PURE__ */C("div",{className:"es-ts-icons",children:[r(c.bold,/* @__PURE__ */z(u,{className:"es-ts-icon","aria-label":c.bold,"aria-pressed":e,disabled:m,onClick:()=>f({weight:e?400:700}),children:/* @__PURE__ */z(k,{size:16})})),m||s?r(c.italic,/* @__PURE__ */z(u,{className:"es-ts-icon","aria-label":c.italic,"aria-pressed":Boolean(n.italic),disabled:m,onClick:()=>f({italic:!n.italic||void 0}),children:/* @__PURE__ */z(b,{size:16})})):/* @__PURE__ */z(u,{className:"es-ts-icon","aria-label":c.italic,"aria-pressed":Boolean(n.italic),"aria-disabled":!0,disabledReason:c.italicMissing,children:/* @__PURE__ */z(b,{size:16})})]})]},t)}case"letterCase":/* @__PURE__ */
-return z(se,{value:h.letterCase??n.letterCase,auto:g("letterCase"),words:c,readOnly:m,set:f},t);case"largestSize":return"heading"===e.kind?$(t):null;default:return $(t)}})]})}function ne({value:e,fonts:n,words:t,readOnly:s,set:a}){const l=h();/* @__PURE__ */
-return C("div",{className:"es-ts-set","data-ts-setting":"font",children:[
-/* @__PURE__ */z("span",{className:"es-ts-sub",id:l,children:t.settings.font}),
-/* @__PURE__ */z(i,{value:e,options:n.map(e=>({label:e.label,value:e.value})),onChange:e=>a({font:e}),ariaLabelledBy:l,readOnly:s})]})}function te({value:e,hex:n,colours:t,words:s,readOnly:a,set:i}){/* @__PURE__ */
-return z(P,{value:e,hex:n,colours:t,label:s.settings.color,followsWord:s.colour.follows,anyWord:s.colour.any,readOnly:a,onChange:e=>i({color:e})})}function se({value:e,auto:n,words:t,readOnly:s,set:a}){const i=n?["auto","none","upper","capitalize","lower"]:["none","upper","capitalize","lower"],l=e??(n?"auto":"none"),o=f([]),d=e=>a({letterCase:"auto"===e?void 0:e});/* @__PURE__ */
-return C("div",{className:"es-ts-set","data-ts-setting":"letterCase",children:[
-/* @__PURE__ */z("span",{className:"es-ts-sub",children:t.settings.letterCase}),
-/* @__PURE__ */z("div",{className:"es-ts-icons",role:"radiogroup","aria-label":t.settings.letterCase,onKeyDown:e=>{const n="ArrowRight"===e.key||"ArrowDown"===e.key?1:"ArrowLeft"===e.key||"ArrowUp"===e.key?-1:0;if(!n||s)return;e.preventDefault();const t=(i.indexOf(l)+n+i.length)%i.length;d(i[t]),o.current[t]?.focus()},children:i.map((e,n)=>{const a=e===l;if("auto"===e)return r(t.case.autoTitle,/* @__PURE__ */z(u,{ref:e=>{o.current[n]=e},role:"radio",pressed:a,className:"es-ts-icon es-ts-icon--word","aria-checked":a,"aria-label":t.case.auto,tabIndex:a?0:-1,disabled:s,onClick:()=>d(e),children:t.case.auto},e));const i=J[e];return r(t.case[e],/* @__PURE__ */z(u,{ref:e=>{o.current[n]=e},role:"radio",pressed:a,className:"es-ts-icon","aria-checked":a,"aria-label":t.case[e],tabIndex:a?0:-1,disabled:s,onClick:()=>d(e),children:/* @__PURE__ */z(i,{size:16})},e))})})]})}export{$ as CAMPAIGN_TEXT_STYLE_SETTINGS,P as ColourSwatchRow,F as TEXT_STYLE_DEFAULT_COUNT,A as TEXT_STYLE_KINDS,j as TEXT_STYLE_MAX,W as TEXT_STYLE_RANGES,M as TEXT_STYLE_SETTINGS,K as TextStyleItem,U as TextStylesGroup,_ as TextStylesList,R as addTextStyle,B as canAddTextStyle,L as defaultTextStyles,q as describeTextStyle,I as isDefaultTextStyle,T as removeTextStyle,V as resolveTextStyle,Y as textStyleRowSize,X as updateTextStyle,Z as weightWord};
+import{hexReadout as e,ColourWindow as s,typedHex as t}from"../chunk-5XUMLKQF.js";import{DEFAULT_TEXT_STYLES_WORDS as a}from"../chunk-OGH6CC3E.js";export{DEFAULT_TEXT_STYLES_WORDS}from"../chunk-OGH6CC3E.js";import"../chunk-643PVCEG.js";import{FieldSlider as n}from"../chunk-XWFH2NHZ.js";import{withTip as l}from"../chunk-P2VEMZH5.js";import{TEXT_STYLE_KINDS as i,canAddTextStyle as r,TEXT_STYLE_MAX as o,isDefaultTextStyle as d,CAMPAIGN_TEXT_STYLE_SETTINGS as c,TEXT_STYLE_SETTINGS as u,textStyleRowSize as m,describeTextStyle as h,updateTextStyle as f,textStyleCaseCss as p,TEXT_STYLE_CASES as v,addTextStyle as y,removeTextStyle as S,TEXT_STYLE_RANGES as g}from"../chunk-YHZSBL2N.js";export{CAMPAIGN_TEXT_STYLE_SETTINGS,TEXT_STYLE_CASES,TEXT_STYLE_CASE_CSS,TEXT_STYLE_DEFAULT_COUNT,TEXT_STYLE_KINDS,TEXT_STYLE_MAX,TEXT_STYLE_RANGES,TEXT_STYLE_SETTINGS,addTextStyle,canAddTextStyle,defaultTextStyles,describeTextStyle,isDefaultTextStyle,isTextStyleCase,removeTextStyle,resolveTextStyle,textStyleCaseCss,textStyleCaseOfCss,textStyleRowSize,updateTextStyle,weightWord}from"../chunk-YHZSBL2N.js";import{FieldSelect as b}from"../chunk-G3GWAP5R.js";import"../chunk-WRFD4EXD.js";import{useWords as k}from"../chunk-MFIRYGHW.js";import{hsvToHex as N,Tooltip as C,ColorSwatch as x,IconButton as T}from"efficient-shell/ui";import{useState as w,useRef as E,useId as z,useEffect as O,Fragment as _}from"react";import{TrashIcon as L,ChevronIcon as A,BoldIcon as M,ItalicIcon as j,CaseLowerIcon as X,CaseCapitalizedIcon as $,CaseUpperIcon as W,CaseNormalIcon as Y}from"efficient-shell/icons/efficient";import{jsxs as D,jsx as G,Fragment as I}from"react/jsx-runtime";var P=`conic-gradient(${[0,60,120,180,240,300,0].map(e=>N({h:e,s:1,v:1})).join(", ")})`;function F({value:t,hex:a,colours:n,label:l,followsWord:i,anyWord:r,onChange:o,readOnly:d=!1}){const[c,u]=w(!1),m=E(null),h=E(null),f=z(),p=void 0!==t&&n.some(e=>e.key===t),v=void 0!==t&&!p;return O(()=>{if(!c)return;const e=m.current?.ownerDocument;if(!e)return;const s=e=>{m.current&&!m.current.contains(e.target)&&u(!1)};return e.addEventListener("click",s,!0),()=>e.removeEventListener("click",s,!0)},[c]),/* @__PURE__ */D("div",{ref:m,className:"es-ts-set","data-ts-setting":"color",children:[
+/* @__PURE__ */D("div",{className:"es-ts-top",children:[
+/* @__PURE__ */G("span",{className:"es-ts-sub",children:l}),
+/* @__PURE__ */G("span",{className:"es-ts-colour-read",children:a?e(a):i})]}),
+/* @__PURE__ */D("div",{className:"es-ts-swatches",role:"group","aria-label":l,children:[n.map(s=>/* @__PURE__ */G(C,{content:`${s.name} · ${e(s.value)}`,children:/* @__PURE__ */G(x,{color:s.value,size:"sm",className:"es-ts-swatch","aria-label":s.name,selected:t===s.key,disabled:d,onClick:()=>o(s.key)})},s.key)),
+/* @__PURE__ */G(C,{content:r,children:/* @__PURE__ */G(x,{ref:h,color:P,size:"sm",className:"es-ts-swatch es-ts-swatch--any","aria-label":r,selected:v,"aria-expanded":c,"aria-controls":c?f:void 0,disabled:d,onClick:()=>u(e=>!e)})})]}),c?/* @__PURE__ */G(s,{id:f,value:a??"",onChange:e=>o(e),label:l,readOnly:d,onClose:()=>{u(!1),h.current?.focus()}}):null]})}function H({styles:e,onChange:s,fonts:t,colours:n=[],settings:u=c,auto:m=[],fallback:h,sample:f,openId:p,defaultOpenId:v=null,onOpenChange:g,onAdd:b,rowActions:N,onRemove:C,max:x=o,device:T="desktop",readOnly:_=!1}){const A=k("textStyles",a),M=z(),[j,X]=w(v),$=void 0!==p?p:j,W=e=>{void 0===p&&X(e),g?.(e)},Y=E(null),[P,F]=w(null);O(()=>{if(!P||!Y.current)return;const e=[...Y.current.querySelectorAll(".es-ts-item")].find(e=>e.dataset.tsId===P.id),s=e?e.querySelector(".es-ts-row"):Y.current.querySelector(`.es-ts-add[data-ts-kind="${P.kind}"]`);s?.focus(),F(null)},[P]);/* @__PURE__ */
+return G("div",{className:"es-ts",ref:Y,children:i.map(a=>{const i=e.filter(e=>e.kind===a),o=!r(e,a,x),c=!_&&!o;/* @__PURE__ */
+return D(R,{label:A.groups[a],children:[i.map(a=>{const i=N?.(a),r=null!=i&&!1!==i,o=Boolean(C)&&!_&&!d(a);/* @__PURE__ */
+return G(B,{style:a,fonts:t,colours:n,settings:u,auto:m,fallback:h,sample:f,device:T,readOnly:_,open:$===a.id,onOpenChange:e=>W(e?a.id:null),onChange:t=>s(e.map(e=>e.id===t.id?t:e)),actions:o||r?/* @__PURE__ */D(I,{children:[o?l(A.remove,/* @__PURE__ */G("button",{type:"button",className:"es-ts-del","aria-label":A.removeNamed({name:a.name}),onClick:()=>(t=>{if(_||!C)return;const a=S(e,t.id,{name:A.styleName});if(!a)return;const n=e.filter(e=>e.kind===t.kind),l=n[n.indexOf(t)+1];$===t.id&&W(null),s(a.styles),C(a.removed),F({id:l?.id??null,kind:t.kind})})(a),children:/* @__PURE__ */G(L,{size:14,"aria-hidden":"true"})})):null,r?i:null]}):null},a.id)}),l(!_&&o?A.full({kind:a,max:x}):void 0,/* @__PURE__ */D("button",{type:"button",className:"es-ts-add","data-ts-kind":a,disabled:_,"aria-disabled":!(_||!o)||void 0,"aria-describedby":!_&&o?`${M}-full-${a}`:void 0,onClick:()=>{c&&(t=>{if(_)return;const a=y(e,t,{max:x,name:A.styleName,make:b});a&&s(a.styles)})(a)},children:[
+/* @__PURE__ */G("span",{className:"es-ts-add-word",children:A.add[a]}),
+/* @__PURE__ */G("span",{className:"es-ts-count",children:A.count({n:i.length,max:x})})]})),_||!o?null:/* @__PURE__ */G("span",{id:`${M}-full-${a}`,className:"es-vh",children:A.full({kind:a,max:x})})]},a)})})}function R({label:e,children:s}){const t=z();/* @__PURE__ */
+return D("section",{className:"es-ts-section","aria-labelledby":t,children:[
+/* @__PURE__ */G("div",{className:"es-ts-group",id:t,children:e}),s]})}function B({style:e,fonts:s,colours:t=[],settings:n=c,auto:l=[],fallback:i,sample:r,open:o,onOpenChange:d,onChange:p,actions:v,device:y="desktop",readOnly:S=!1}){const g=k("textStyles",a),b=`${z()}-open-${e.id}`,N=new Set(l),C=u.filter(e=>n.includes(e)),x={...i?.(e)??{},...e.values},T="phone"===y,w=T&&void 0!==e.values.sizePhone?{...x,size:e.values.sizePhone}:x,E=s.find(e=>e.value===x.font),O={fontFamily:E?.family,fontSize:`${m(w.size??16)}px`,fontWeight:x.weight,fontStyle:x.italic?"italic":void 0};/* @__PURE__ */
+return D(_,{children:[
+/* @__PURE__ */D("div",{className:"es-ts-item","data-ts-id":e.id,children:[
+/* @__PURE__ */D("button",{type:"button",className:"es-ts-row","aria-expanded":o,"aria-controls":o?b:void 0,onClick:()=>d(!o),children:[
+/* @__PURE__ */G("span",{className:"es-ts-chev","aria-hidden":"true",children:/* @__PURE__ */G(A,{size:12})}),
+/* @__PURE__ */G("span",{className:"es-ts-name",style:O,children:e.name}),
+/* @__PURE__ */G("span",{className:"es-ts-meta",children:h(w,s,g,{autoSize:N.has("size")&&w===x&&void 0===e.values.size})})]}),v?/* @__PURE__ */G("div",{className:"es-ts-actions",children:v}):null]}),o?/* @__PURE__ */G("div",{className:"es-ts-open",id:b,children:/* @__PURE__ */G(V,{style:e,values:x,fonts:s,colours:t,settings:C,autoSet:N,sample:r??g.sample,words:g,phone:T,readOnly:S,set:s=>p(f([e],e.id,s)[0])})}):null]})}var U={none:Y,upper:W,capitalize:$,lower:X};function V({style:e,values:s,fonts:a,colours:i,settings:r,autoSet:o,sample:d,words:c,phone:u,readOnly:m,set:h}){const f=e.values,v=a.find(e=>e.value===s.font),y=function(e,s){return e?s.find(s=>s.key===e)?.value??t(e)??void 0:void 0}(s.color,i),S=e=>"largestSize"===e||o.has(e),b=e=>S(e)?f[e]:s[e],k=b("size"),N=u&&void 0!==f.sizePhone?f.sizePhone:k,C=b("lineSpacing"),x=b("letterSpacing"),w=S("letterCase")?f.letterCase:s.letterCase,E={fontFamily:v?.family,fontSize:void 0===N?void 0:`${N}px`,fontWeight:s.weight,fontStyle:s.italic?"italic":void 0,lineHeight:void 0===C?void 0:String(C/100),letterSpacing:void 0===x?void 0:`${x}px`,color:y,textTransform:p(w)},z=e=>{const t=g[e],a=S(e);/* @__PURE__ */
+return G("div",{className:"es-ts-slider","data-ts-setting":e,children:/* @__PURE__ */G(n,{label:c.settings[e],value:f[e],onChange:s=>h({[e]:s}),min:t.min,max:t.max,step:t.step,shiftStep:t.shiftStep,sliderMin:t.sliderMin,sliderMax:t.sliderMax,unit:t.unit||void 0,styleValue:a?void 0:s[e],auto:a?c.auto:void 0,readOnly:m})},e)};/* @__PURE__ */
+return D(I,{children:[
+/* @__PURE__ */G("div",{className:"es-ts-preview",style:E,"aria-label":c.preview,children:d}),r.map(t=>{switch(t){case"font":/* @__PURE__ */
+return G(Z,{value:f.font,fonts:a,words:c,readOnly:m,set:h},t);case"color":/* @__PURE__ */
+return G(q,{value:f.color,hex:y,colours:i,words:c,readOnly:m,set:h},t);case"emphasis":{const e=(s.weight??400)>=600,a=!1!==v?.italic;/* @__PURE__ */
+return D("div",{className:"es-ts-set","data-ts-setting":t,children:[
+/* @__PURE__ */G("span",{className:"es-ts-sub",children:c.settings.emphasis}),
+/* @__PURE__ */D("div",{className:"es-ts-icons",children:[l(c.bold,/* @__PURE__ */G(T,{className:"es-ts-icon","aria-label":c.bold,"aria-pressed":e,disabled:m,onClick:()=>h({weight:e?400:700}),children:/* @__PURE__ */G(M,{size:16})})),m||a?l(c.italic,/* @__PURE__ */G(T,{className:"es-ts-icon","aria-label":c.italic,"aria-pressed":Boolean(s.italic),disabled:m,onClick:()=>h({italic:!s.italic||void 0}),children:/* @__PURE__ */G(j,{size:16})})):/* @__PURE__ */G(T,{className:"es-ts-icon","aria-label":c.italic,"aria-pressed":Boolean(s.italic),"aria-disabled":!0,disabledReason:c.italicMissing,children:/* @__PURE__ */G(j,{size:16})})]})]},t)}case"letterCase":/* @__PURE__ */
+return G(K,{value:f.letterCase??s.letterCase,auto:S("letterCase"),words:c,readOnly:m,set:h},t);case"largestSize":return"heading"===e.kind?z(t):null;case"size":return u?(()=>{const e=g.size;/* @__PURE__ */
+return G("div",{className:"es-ts-slider","data-ts-setting":"size","data-ts-device":"phone",children:/* @__PURE__ */G(n,{label:c.settings.size,value:f.sizePhone,onChange:e=>h({sizePhone:e}),min:e.min,max:e.max,step:e.step,shiftStep:e.shiftStep,sliderMin:e.sliderMin,sliderMax:e.sliderMax,unit:e.unit||void 0,styleValue:k,readOnly:m})},"size")})():z(t);default:return z(t)}})]})}function Z({value:e,fonts:s,words:t,readOnly:a,set:n}){const l=z();/* @__PURE__ */
+return D("div",{className:"es-ts-set","data-ts-setting":"font",children:[
+/* @__PURE__ */G("span",{className:"es-ts-sub",id:l,children:t.settings.font}),
+/* @__PURE__ */G(b,{value:e,options:s.map(e=>({label:e.label,value:e.value})),onChange:e=>n({font:e}),ariaLabelledBy:l,readOnly:a})]})}function q({value:e,hex:s,colours:t,words:a,readOnly:n,set:l}){/* @__PURE__ */
+return G(F,{value:e,hex:s,colours:t,label:a.settings.color,followsWord:a.colour.follows,anyWord:a.colour.any,readOnly:n,onChange:e=>l({color:e})})}function K({value:e,auto:s,words:t,readOnly:a,set:n}){const i=s?["auto",...v]:v,r=e??(s?"auto":"none"),o=E([]),d=e=>n({letterCase:"auto"===e?void 0:e});/* @__PURE__ */
+return D("div",{className:"es-ts-set","data-ts-setting":"letterCase",children:[
+/* @__PURE__ */G("span",{className:"es-ts-sub",children:t.settings.letterCase}),
+/* @__PURE__ */G("div",{className:"es-ts-icons",role:"radiogroup","aria-label":t.settings.letterCase,onKeyDown:e=>{const s="ArrowRight"===e.key||"ArrowDown"===e.key?1:"ArrowLeft"===e.key||"ArrowUp"===e.key?-1:0;if(!s||a)return;e.preventDefault();const t=(i.indexOf(r)+s+i.length)%i.length;d(i[t]),o.current[t]?.focus()},children:i.map((e,s)=>{const n=e===r;if("auto"===e)return l(t.case.autoTitle,/* @__PURE__ */G(T,{ref:e=>{o.current[s]=e},role:"radio",pressed:n,className:"es-ts-icon es-ts-icon--word","aria-checked":n,"aria-label":t.case.auto,tabIndex:n?0:-1,disabled:a,onClick:()=>d(e),children:t.case.auto},e));const i=U[e];return l(t.case[e],/* @__PURE__ */G(T,{ref:e=>{o.current[s]=e},role:"radio",pressed:n,className:"es-ts-icon","aria-checked":n,"aria-label":t.case[e],tabIndex:n?0:-1,disabled:a,onClick:()=>d(e),children:/* @__PURE__ */G(i,{size:16})},e))})})]})}export{F as ColourSwatchRow,B as TextStyleItem,R as TextStylesGroup,H as TextStylesList};

package/dist/text-styles/model.d.ts

@@ -0,0 +1,267 @@
+import { T as TextStylesWords } from '../words-gIDCeRv3.js';
+
+/**
+ * The text styles as data (plan step E6): what a style is, the list both
+ * editors start from, the design's ranges, and the pure changes the list
+ * makes. No React and no browser global, so P3 and S2 can use it where they
+ * read and write their own storage.
+ *
+ * What this does NOT know is where a host keeps its styles, or what its old
+ * values were called. Turning an email's "Label" into Body 5, or the website's
+ * "Tight" into 95 % / −0.01 em, is the host's (P3, S2). The units here are the
+ * panel's: px, and % for line spacing.
+ */
+
+type TextStyleKind = 'heading' | 'body';
+/**
+ * The letter cases, in the panel's order: As typed · Uppercase · Capitalized ·
+ * Lowercase (Lewis 2026-10-15, S4: Capitalized is kept in both editors). This
+ * is the ONE list of them: the text styles, the text part panel and every host
+ * read it, so a case cannot be offered in one place and dropped in another.
+ * No value on a style = Auto where the host offers it, As typed where not.
+ */
+declare const TEXT_STYLE_CASES: readonly ["none", "upper", "capitalize", "lower"];
+type TextStyleCase = (typeof TEXT_STYLE_CASES)[number];
+/**
+ * The CSS `text-transform` each case draws. `none` is a real declaration, so a
+ * case can beat a built-in uppercase class. A host that stores the CSS word
+ * itself (the campaign designer's boxes) turns it back with
+ * {@link textStyleCaseOfCss}; it never keeps a table of its own.
+ */
+declare const TEXT_STYLE_CASE_CSS: {
+    readonly none: "none";
+    readonly upper: "uppercase";
+    readonly capitalize: "capitalize";
+    readonly lower: "lowercase";
+};
+type TextStyleCaseCss = (typeof TEXT_STYLE_CASE_CSS)[TextStyleCase];
+/** True for one of the four cases, and for nothing else a document may hold. */
+declare function isTextStyleCase(value: unknown): value is TextStyleCase;
+/** The `text-transform` a case draws, or `undefined` for no case (or a word
+ *  that is not one of the four). */
+declare function textStyleCaseCss(value: unknown): TextStyleCaseCss | undefined;
+/** The case a `text-transform` word is, or `undefined` for anything else
+ *  (`full-width`, an empty string, junk). */
+declare function textStyleCaseOfCss(css: unknown): TextStyleCase | undefined;
+/**
+ * One style's own settings. A missing key has nothing of its own: it is Auto
+ * where the host offers Auto for that setting, and otherwise shows the host's
+ * `fallback`, grey.
+ */
+interface TextStyleValues {
+    /** A font's `value`, from the host's list. */
+    font?: string;
+    /** A theme colour's `key`, or a `#rrggbb`. */
+    color?: string;
+    /** px. */
+    size?: number;
+    /** 100–900. */
+    weight?: number;
+    italic?: boolean;
+    /** % of the font size; below 100 is tighter than the type. */
+    lineSpacing?: number;
+    /** px; may be negative. */
+    letterSpacing?: number;
+    /** px. */
+    paragraphSpacing?: number;
+    letterCase?: TextStyleCase;
+    /** px; headings only — the largest a heading is drawn anywhere on the site. */
+    largestSize?: number;
+    /**
+     * px; the size on a PHONE (Lewis 2026-10-19: Heading 1 at 106 px on a 390 px
+     * screen). Absent = the phone draws `size`. Edited on the Size row itself,
+     * in the phone view (`TextStylesList`'s `device`), never as a row of its own.
+     */
+    sizePhone?: number;
+}
+/** Which view the list edits: the phone view's Size row writes `sizePhone`. */
+type TextStyleDevice = 'desktop' | 'phone';
+interface TextStyle {
+    /** The host's, stable: the list never renames an id. */
+    id: string;
+    kind: TextStyleKind;
+    /** Stored, so the host's words: "Heading 1", "Body 5". */
+    name: string;
+    values: TextStyleValues;
+}
+/** A font the host offers. */
+interface TextStyleFont {
+    value: string;
+    label: string;
+    /** The CSS `font-family` the list draws the name and the preview in. */
+    family: string;
+    /** `false` when this font has no italic loaded: the Italic button is off. */
+    italic?: boolean;
+}
+/** A theme colour the host offers, stored by its key. */
+interface TextStyleColour {
+    key: string;
+    name: string;
+    /** `#rrggbb`. */
+    value: string;
+}
+/** Every setting an open style can show, in the order it shows them. */
+declare const TEXT_STYLE_SETTINGS: readonly ["font", "color", "size", "weight", "emphasis", "lineSpacing", "letterSpacing", "paragraphSpacing", "letterCase", "largestSize"];
+type TextStyleSetting = (typeof TEXT_STYLE_SETTINGS)[number];
+/** The settings an Email styles list shows — the campaign design page. */
+declare const CAMPAIGN_TEXT_STYLE_SETTINGS: readonly TextStyleSetting[];
+/** The settings that may be Auto, when the host says so (Site styles). */
+type TextStyleAuto = 'size' | 'lineSpacing' | 'letterSpacing' | 'letterCase';
+/** The kinds, in the order the list draws them. */
+declare const TEXT_STYLE_KINDS: readonly TextStyleKind[];
+/** At most this many of EACH kind (Lewis, 2026-10-02). */
+declare const TEXT_STYLE_MAX = 7;
+/** How many of each the list starts with: Heading 1–3, Body 1–5. */
+declare const TEXT_STYLE_DEFAULT_COUNT: Readonly<Record<TextStyleKind, number>>;
+/** A number setting's slider: its travel, the typed limits, the steps and the unit. */
+interface TextStyleRange {
+    /** The lowest a typed value may be; `undefined` = no limit. */
+    min: number | undefined;
+    /** The highest a typed value may be; `undefined` = no limit. */
+    max: number | undefined;
+    sliderMin: number;
+    sliderMax: number;
+    step: number;
+    shiftStep: number;
+    unit: string;
+}
+/**
+ * The design's numbers (campaign page, "the three boxes' rules" and the slider
+ * ranges; website page §5). A typed value may go past the slider; only `min`
+ * and `max` hold it. Line spacing down to 50 % and letter spacing down to
+ * −10 px are Lewis's (2026-10-06).
+ */
+declare const TEXT_STYLE_RANGES: {
+    readonly size: TextStyleRange;
+    readonly weight: {
+        readonly min: 100;
+        readonly max: 900;
+        readonly sliderMin: 300;
+        readonly sliderMax: 900;
+        readonly step: 100;
+        readonly shiftStep: 100;
+        readonly unit: "";
+    };
+    readonly lineSpacing: {
+        readonly min: 50;
+        readonly max: 250;
+        readonly sliderMin: 50;
+        readonly sliderMax: 250;
+        readonly step: 1;
+        readonly shiftStep: 10;
+        readonly unit: "%";
+    };
+    readonly letterSpacing: {
+        readonly min: -10;
+        readonly max: undefined;
+        readonly sliderMin: -5;
+        readonly sliderMax: 10;
+        readonly step: 0.1;
+        readonly shiftStep: 1;
+        readonly unit: "px";
+    };
+    readonly paragraphSpacing: {
+        readonly min: 0;
+        readonly max: undefined;
+        readonly sliderMin: 0;
+        readonly sliderMax: 48;
+        readonly step: 1;
+        readonly shiftStep: 10;
+        readonly unit: "px";
+    };
+    readonly largestSize: TextStyleRange;
+};
+type TextStyleNumber = keyof typeof TEXT_STYLE_RANGES;
+/** Heading 1–3 then Body 1–5, ids `heading-1` … `body-5`, no values: the host fills them. */
+declare function defaultTextStyles(name?: (v: {
+    kind: TextStyleKind;
+    n: number;
+}) => string): TextStyle[];
+/** Whether another style of this kind fits under the cap. */
+declare function canAddTextStyle(styles: readonly TextStyle[], kind: TextStyleKind, max?: number): boolean;
+/**
+ * Whether a style is one the list starts with (Heading 1–3, Body 1–5), which
+ * can never be deleted. Decided by the fixed id (`heading-1` … `body-5`),
+ * never by the name: a host's words name the styles.
+ */
+declare function isDefaultTextStyle(style: TextStyle): boolean;
+/**
+ * A new style of `kind`, after the last one of that kind: a copy of that
+ * one's values, named the next free number ("Heading 4"). `null` at the cap.
+ * The list given is not changed.
+ *
+ * The name and the id are chosen apart. The name is the next number after
+ * the styles of its kind, skipping a name already taken, so after a delete
+ * the names have no gap. The id is above every id of its kind
+ * (`heading-7` when `heading-6` is there), and the name's number when that
+ * is higher. So an id freed by a delete is used again only when it was the
+ * highest of its kind, and then the new style is a copy of the one that
+ * id's text was already drawn as (`resolveTextStyle`): nothing on the page
+ * jumps.
+ *
+ * `make` lets a host build the new style itself (its own ids); it gets the
+ * kind and the number the new style is called.
+ */
+declare function addTextStyle(styles: readonly TextStyle[], kind: TextStyleKind, options?: {
+    max?: number;
+    name?: (v: {
+        kind: TextStyleKind;
+        n: number;
+    }) => string;
+    make?: (kind: TextStyleKind, n: number) => TextStyle;
+}): {
+    styles: TextStyle[];
+    added: TextStyle;
+} | null;
+/**
+ * The list without one ADDED style. `null` for a default (they are never
+ * deleted) or an id not in the list. The list given is not changed.
+ *
+ * The styles of its kind after it close the gap by NAME — "Heading 5" becomes
+ * "Heading 4" — when their name is still the number of their place. Their
+ * ids never change, so text on them stays on them. Text on the deleted one
+ * is not rewritten: `resolveTextStyle` draws it as the nearest earlier style
+ * of its kind.
+ *
+ * `name` is the host's words for a style's name, as `addTextStyle` takes it.
+ */
+declare function removeTextStyle(styles: readonly TextStyle[], id: string, options?: {
+    name?: (v: {
+        kind: TextStyleKind;
+        n: number;
+    }) => string;
+}): {
+    styles: TextStyle[];
+    removed: TextStyle;
+} | null;
+/**
+ * The style text on `id` draws as: that style, or — when it was deleted —
+ * the nearest EARLIER style of its kind still in the list (`heading-5` gone:
+ * Heading 4's id, else `heading-3`). The defaults are never deleted, so an
+ * id the model made always finds one. `undefined` for an id the model did
+ * not make (a host's own, through `make`): that host resolves its own.
+ *
+ * Read every stored style id through this, so a deleted style's text keeps
+ * drawing — in a saved page and in a sent email alike — and nothing stored
+ * is rewritten.
+ */
+declare function resolveTextStyle(styles: readonly TextStyle[], id: string): TextStyle | undefined;
+/**
+ * The list with one style's values changed. A key given as `undefined` is
+ * removed: the setting has nothing of its own again. Nothing is changed in
+ * place, and the other styles are the same objects.
+ */
+declare function updateTextStyle(styles: readonly TextStyle[], id: string, patch: Partial<TextStyleValues>): TextStyle[];
+/** The size a style's NAME is drawn at in the list: half its size plus 6, kept within 12–20 px. */
+declare function textStyleRowSize(px: number): number;
+/** A weight's name, by the hundred it is nearest. */
+declare function weightWord(weight: number, words: TextStylesWords): string;
+/**
+ * A row's grey line, "Playfair Display · 28 px · Semibold". `autoSize`: a
+ * size with no number reads the Auto word. A weight with none is Regular.
+ */
+declare function describeTextStyle(values: TextStyleValues, fonts: readonly TextStyleFont[], words: TextStylesWords, options?: {
+    autoSize?: boolean;
+}): string;
+
+export { CAMPAIGN_TEXT_STYLE_SETTINGS, TEXT_STYLE_CASES, TEXT_STYLE_CASE_CSS, TEXT_STYLE_DEFAULT_COUNT, TEXT_STYLE_KINDS, TEXT_STYLE_MAX, TEXT_STYLE_RANGES, TEXT_STYLE_SETTINGS, type TextStyle, type TextStyleAuto, type TextStyleCase, type TextStyleCaseCss, type TextStyleColour, type TextStyleDevice, type TextStyleFont, type TextStyleKind, type TextStyleNumber, type TextStyleRange, type TextStyleSetting, type TextStyleValues, addTextStyle, canAddTextStyle, defaultTextStyles, describeTextStyle, isDefaultTextStyle, isTextStyleCase, removeTextStyle, resolveTextStyle, textStyleCaseCss, textStyleCaseOfCss, textStyleRowSize, updateTextStyle, weightWord };

package/dist/text-styles/model.js

@@ -0,0 +1 @@
+export{CAMPAIGN_TEXT_STYLE_SETTINGS,TEXT_STYLE_CASES,TEXT_STYLE_CASE_CSS,TEXT_STYLE_DEFAULT_COUNT,TEXT_STYLE_KINDS,TEXT_STYLE_MAX,TEXT_STYLE_RANGES,TEXT_STYLE_SETTINGS,addTextStyle,canAddTextStyle,defaultTextStyles,describeTextStyle,isDefaultTextStyle,isTextStyleCase,removeTextStyle,resolveTextStyle,textStyleCaseCss,textStyleCaseOfCss,textStyleRowSize,updateTextStyle,weightWord}from"../chunk-YHZSBL2N.js";

package/dist/text-styles/text-styles.css

@@ -37,7 +37,7 @@
 
 .es-ts-group {
   margin: 0 0 var(--es-space-4, 4px);
-  font-size: 11px;
+  font-size: var(--text-2xs, 11px);
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
@@ -151,7 +151,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 12px;
+  font-size: var(--text-xs, 12px);
   line-height: 1.4;
   color: var(--es-muted, var(--ink-faint));
 }
@@ -196,7 +196,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 12px;
+  font-size: var(--text-xs, 12px);
   font-weight: 500;
   color: var(--es-text-secondary, var(--ink));
 }
@@ -240,7 +240,7 @@
 .es-ts-icon--word {
   width: auto;
   padding: 0 var(--es-space-8, 8px);
-  font-size: 14px;
+  font-size: var(--text-sm, 14px);
   font-weight: 500;
 }
 
@@ -262,7 +262,7 @@
   justify-content: space-between;
   gap: var(--es-space-8, 8px);
   padding: var(--es-space-12, 12px) 0 0;
-  font-size: 14px;
+  font-size: var(--text-sm, 14px);
   font-weight: 500;
   color: var(--es-accent, var(--accent-600, var(--submit-bg)));
   cursor: pointer;
@@ -271,7 +271,7 @@
 .es-ts-add:disabled,
 .es-ts-add[aria-disabled='true'] { color: var(--es-disabled, var(--ink-faintest)); cursor: not-allowed; }
 .es-ts-count {
-  font-size: 12px;
+  font-size: var(--text-xs, 12px);
   font-weight: 400;
   color: var(--es-field-placeholder, var(--ink-faintest));
 }

package/dist/{words-dsex49Jh.d.ts → words-notpwHR2.d.ts}

@@ -1,4 +1,4 @@
-import { MarkStyle, MarkPlaceholders } from './markup/index.js';
+import { MarkStyle, MarkPlaceholders } from 'efficient-shell/markup';
 import { ReactNode } from 'react';
 
 /**
@@ -86,7 +86,7 @@ declare const COPY_ALIGN_FIT: {
  *  the host's language (`useEaselStrings().copy.align`, 0.95.0); left out,
  *  English. */
 declare function copyAlignOptions(allow: readonly CopyAlign[], labels?: Record<CopyAlign, string>): {
-    id: "left" | "right" | "center" | "justify";
+    id: "left" | "center" | "right" | "justify";
     label: string;
     icon: ReactNode;
     title: string;
@@ -100,7 +100,7 @@ declare function copyAlignOptions(allow: readonly CopyAlign[], labels?: Record<C
  * catalogue's (`ShellStringsProvider`, `link`).
  *
  * NO REACT here, and no import but the grammar: the marks' names, tooltips and
- * placeholders are READ from `efficient-easel/markup` (`MARKUP_TOOLS`,
+ * placeholders are READ from `efficient-shell/markup` (`MARKUP_TOOLS`,
  * `MARK_PLACEHOLDERS`) rather than typed a second time, so the English lives
  * once, in the grammar, where the campaign designer's own toolbar reads it too.
  */
@@ -117,6 +117,10 @@ type CopyWords = {
      * `name` is what the button is called; `title` its tooltip, which also says
      * what the mark writes and its shortcut. A host's own descriptors
      * (`MarkupTool[]`) are used as given and never read these.
+     *
+     * @deprecated Read by nothing since the copy box's one bar became the shell's
+     * `TextToolbar`, which names its buttons in the shell catalogue
+     * (`ShellStringsProvider`, `textToolbar`). Removed in 12.0.0.
      */
     marks: Record<MarkStyle, {
         name: string;
@@ -128,11 +132,13 @@ type CopyWords = {
      *  (E5a). Optional, so a host's words from before still type; English when
      *  left out. */
     showMarks?: string;
-    /** Clear changes (was "Clear style"; one text panel v3, 2026-10-15: one
-     *  word, the same one the Style list says), on the line under the box (owner
-     *  ruling 2026-10-07), and its tooltip while nothing is selected. Optional, so a host's words from
-     *  before still type; English when left out. */
+    /** "Clear changes": the Style list's item in the one text panel
+     *  (`TextPartPanel`). It was also a button on the line under the box until
+     *  Lewis took that out (2026-10-19). Optional, so a host's words from before
+     *  still type; English when left out. */
     clearStyle?: string;
+    /** @deprecated The tooltip of the button under the box, which is gone
+     *  (2026-10-19). Read by nothing; removed in 12.0.0. */
     clearStyleEmpty?: string;
     /** The colour window: its name, the theme row's label, and Remove. */
     colors?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "efficient-easel",
-  "version": "11.3.0",
+  "version": "12.0.0",
   "description": "Efficient Easel: the EFFICIENT editors' shared engine and chrome: the saved document as pure functions, the published renderer, and the editor frame, panels, Layers tree, text grammar and type-in-place box. Published as editor-shell up to 0.66.0 and as efficient-editor up to 0.95.0.",
   "license": "UNLICENSED",
   "author": "Efficient Pty Ltd",
@@ -102,6 +102,11 @@
       "import": "./dist/text-styles/index.js",
       "default": "./dist/text-styles/index.js"
     },
+    "./text-styles/model": {
+      "types": "./dist/text-styles/model.d.ts",
+      "import": "./dist/text-styles/model.js",
+      "default": "./dist/text-styles/model.js"
+    },
     "./text-styles.css": "./dist/text-styles/text-styles.css",
     "./easel": {
       "types": "./dist/easel/index.d.ts",
@@ -527,7 +532,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "efficient-shell": "^7.44.0",
+    "efficient-shell": "^7.69.1",
     "react": ">=18",
     "react-dom": ">=18"
   },
@@ -537,7 +542,7 @@
     "@types/node": "^22.0.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "efficient-shell": "^7.44.0",
+    "efficient-shell": "^7.69.1",
     "esbuild": "^0.27.0",
     "jsdom": "^26.1.0",
     "react": "^18.2.0",

package/dist/chunk-26GHWMNN.js

@@ -1,21 +0,0 @@
-import{TreeSeam as e}from"./chunk-4JSBIW5H.js";import{SETTINGS_BUCKETS as n,SettingsGroup as l}from"./chunk-RC25EGHD.js";import{DEFAULT_TREE_WORDS as t}from"./chunk-K56YDHYQ.js";import{DEFAULT_PANEL_WORDS as a}from"./chunk-KFV7N2DJ.js";import{EaselMenuItems as r}from"./chunk-EA2HTX37.js";import{FieldNumber as o}from"./chunk-66LWADFP.js";import{FieldSelect as i}from"./chunk-65Z5FSAW.js";import{SettingsField as s,SettingsSegmented as c}from"./chunk-XJCMEEBH.js";import{DEFAULT_FIELDS_WORDS as d}from"./chunk-FFYXVAAL.js";import{useWords as u}from"./chunk-MFIRYGHW.js";import{useTreeDrag as m,gapToMoveIndex as p}from"./chunk-67GNT6PF.js";import{withTip as h}from"./chunk-P2VEMZH5.js";import{Textarea as f,Input as b,SortableList as g,ListRow as v,ContextMenu as y,tabPanelId as k,Tabs as x,tabButtonId as w}from"efficient-shell/ui";export{LinkPicker}from"efficient-shell/ui";import{useRef as N,useState as C,useLayoutEffect as O,useId as $}from"react";import{jsx as j,jsxs as S}from"react/jsx-runtime";import{ChevronIcon as D,LockIcon as I,MoveUpIcon as F,MoveDownIcon as L,DuplicateIcon as P,TrashIcon as A}from"efficient-shell/icons/efficient";function E({id:e,value:n,onChange:l,placeholder:t,multiline:a=!1,rows:r=3,readOnly:o=!1,ariaLabel:i,ariaLabelledBy:s}){const c=n??"";return a?/* @__PURE__ */j(f,{id:e,size:"sm",className:"es-fin",value:c,rows:r,placeholder:t,readOnly:o,"aria-label":i,"aria-labelledby":s,onChange:e=>l(e.target.value)}):/* @__PURE__ */j(b,{id:e,size:"sm",className:"es-fin",type:"text",value:c,placeholder:t,readOnly:o,"aria-label":i,"aria-labelledby":s,onChange:e=>l(e.target.value)})}function M(e,n,l){const t=e.slice();return t.splice(Math.max(0,Math.min(n,t.length)),0,l),t}function T(e,n,l){const t=e.slice(),[a]=t.splice(n,1);return t.splice(Math.max(0,Math.min(l,t.length)),0,a),t}function H(e,n){return e.filter((e,l)=>l!==n)}function R(e){return null===e||"object"!=typeof e?e:JSON.parse(JSON.stringify(e))}var z='input, textarea, select, button, [contenteditable]:not([contenteditable="false"]), [tabindex]',B={parentId:"list",slot:"items"};function J({label:n,icon:l,noun:a,items:o,onChange:i,newItem:s,summary:c,itemName:f,thumb:b,min:k=0,max:x,readOnly:w=!1,open:$,onOpen:E,renderItem:J,renderRow:K,canRemove:Y,lockedReason:V,fixed:W=!1,removeOnRow:X=!0,canDuplicate:G,above:Z,head:q=!0}){const Q=u("fields",d).list,U=u("tree",t),_=a??Q.item,ee=!w&&!W&&("number"!=typeof x||o.length<x),ne=o.length<=k,le=e=>!!Y&&!Y(o[e],e),te=e=>!w&&!W&&X&&!ne&&!le(e),ae=e=>ee&&(!G||G(o[e],e)),re=(e,n)=>f?f(e,n):Q.itemName({noun:_,n:n+1}),oe=N([]),ie=N(null),[se,ce]=C(null),de=N(null),[ue,me]=C(null),[pe,he]=C("");O(()=>{const e=ie.current;if(!e)return;ie.current=null;const n=oe.current[e.index]?.querySelectorAll(z)[e.nth]??oe.current[e.index];if(n?.focus(),n&&null!==e.start&&"setSelectionRange"in n)try{n.setSelectionRange(e.start,e.end)}catch{}});const fe=(e,n)=>{if(n<0||n>=o.length||n===e)return;const l=oe.current[e],t=l?.ownerDocument.activeElement;if(l&&t&&l.contains(t)){const e=[...l.querySelectorAll(z)].indexOf(t),a=t;ie.current={index:n,nth:e,start:"number"==typeof a.selectionStart?a.selectionStart:null,end:"number"==typeof a.selectionEnd?a.selectionEnd:null}}i(T(o,e,n));const a=function(e,n,l){return null===e?null:e===n?l:n<e&&l>=e?e-1:n>e&&l<=e?e+1:e}($,e,n);a!==$&&E(a),he(Q.moved({n:n+1,total:o.length}))},be=e=>{ee&&(i(M(o,e,s())),K?(ie.current={index:e,nth:0,start:null,end:null},null!==$&&$>=e&&E($+1)):E(e))},ge=e=>{te(e)&&(i(H(o,e)),$===e?E(null):null!==$&&$>e&&E($-1))},ve=m({keyOf:e=>String(e),canDrop:(e,n)=>n.parentId===B.parentId&&n.slot===B.slot,onDrop:(e,n)=>{const l=p({...B,index:e},n);l!==e&&fe(e,l)},onStep:(e,n)=>fe(e,e+n),canStep:(e,n)=>e+n>=0&&e+n<o.length,readOnly:w}),ye=e=>{const n=[];return e>0&&n.push({label:Q.moveUp,icon:/* @__PURE__ */j(F,{size:14}),shortcut:"⌥↑",onClick:()=>fe(e,e-1)}),e<o.length-1&&n.push({label:Q.moveDown,icon:/* @__PURE__ */j(L,{size:14}),shortcut:"⌥↓",onClick:()=>fe(e,e+1)}),ae(e)&&n.push({label:Q.duplicate,icon:/* @__PURE__ */j(P,{size:14}),onClick:()=>(e=>{ae(e)&&(i(M(o,e+1,R(o[e]))),null!==$&&$>e&&E($+1))})(e)}),te(e)&&n.push({label:Q.delete,icon:/* @__PURE__ */j(A,{size:14}),danger:!0,onClick:()=>ge(e)}),n},ke=(e,n,l,t)=>{w||0===ye(e).length||me({index:e,x:n,y:l,owner:t})},xe=e=>n=>{const l=o.slice();l[e]=n,i(l)};/* @__PURE__ */
-return S("div",{className:"es-list",children:[q?/* @__PURE__ */S("div",{className:"es-list-head",children:[
-/* @__PURE__ */S("span",{className:"es-list-label",children:[l?/* @__PURE__ */j("span",{className:"es-field-icon","aria-hidden":"true",children:l}):null,n]}),
-/* @__PURE__ */j("span",{className:"es-list-count",children:o.length})]}):null,Z?/* @__PURE__ */j("div",{className:"es-list-above",children:Z}):null,o.length?/* @__PURE__ */S(g,{"aria-label":n,spacing:"comfortable",className:"es-list-rows",rootProps:ve.rootProps(),children:[o.map((n,l)=>{const t=ve.row({item:l,place:{...B,index:l}}),a=t.draggable&&se!==l,r=!K&&$===l,o=!w&&!W&&X&&le(l),i=["es-list-row",K?"is-inline":"is-item",r?"is-open":"",a?"is-draggable":"",t.dragging?"is-dragging":"",t.drop?`is-drop-${t.drop}`:""].filter(Boolean).join(" ");return[l>0?/* @__PURE__ */j(e,{...ve.seam({place:{...B,index:l}}),onAdd:ee?()=>be(l):void 0,label:Q.addHere({noun:_})},`seam-${l}`):null,
-/* @__PURE__ */j(v,{className:i,flat:!!K,active:r,draggable:t.draggable,dragHint:U.dragHint,dragging:t.dragging,drop:"before"===t.drop||"after"===t.drop?t.drop:void 0,onMove:t.draggable?e=>fe(l,"up"===e?l-1:l+1):void 0,rowRef:e=>{oe.current[l]=e},rowProps:{...t.rowProps,draggable:a||void 0,onPointerDown:e=>{const n=e.target.closest?.('input, textarea, select, [contenteditable]:not([contenteditable="false"])'),a=!!n&&n===n.ownerDocument.activeElement;e.currentTarget.draggable=t.draggable&&!a,de.current=n&&!a?n:null,ce(a?l:null)},onDragStart:e=>{const n=de.current;de.current=null,n&&n.ownerDocument.activeElement===n&&n.blur(),t.rowProps.onDragStart?.(e)},onContextMenu:e=>{w||(e.preventDefault(),e.stopPropagation(),ke(l,e.clientX,e.clientY,e.currentTarget))},onKeyDown:e=>{if("ContextMenu"===e.key||e.shiftKey&&"F10"===e.key){e.preventDefault();const n=e.currentTarget.ownerDocument,t=e=>e.preventDefault();n.addEventListener("contextmenu",t,{capture:!0,once:!0}),n.defaultView?.setTimeout(()=>n.removeEventListener("contextmenu",t,{capture:!0}),500);const a=e.currentTarget.getBoundingClientRect();return void ke(l,a.left+24,a.bottom,e.currentTarget)}t.rowProps.onKeyDown?.(e)}},actions:w||W||!X?void 0:o?h(V?V(n,l):Q.locked,/* @__PURE__ */j("span",{className:"es-list-lock",role:"img","aria-label":V?V(n,l):Q.locked,children:/* @__PURE__ */j(I,{size:13})})):h(Q.deleteItem({noun:_}),/* @__PURE__ */j("button",{type:"button",className:"es-list-x","aria-label":Q.deleteItem({noun:_}),disabled:!te(l),onClick:()=>ge(l),children:"×"})),below:r?/* @__PURE__ */j("div",{className:"es-list-item",children:J(n,l,xe(l))}):void 0,children:K?/* @__PURE__ */j("div",{className:"es-list-row-main",children:K(n,l,xe(l))}):/* @__PURE__ */S("button",{type:"button",className:"es-list-open","aria-expanded":r,onClick:()=>E(r?null:l),children:[b?/* @__PURE__ */j("span",{className:"es-list-thumb","aria-hidden":"true",children:b(n,l)}):null,
-/* @__PURE__ */j("span",{className:"es-list-row-name",children:re(n,l)}),/* @__PURE__ */j("span",c?{className:"es-list-row-summary",children:c(n,l)}:{className:"es-list-row-summary"}),
-/* @__PURE__ */j(D,{size:14,className:"es-list-chev","aria-hidden":"true"})]})},l)]}),
-/* @__PURE__ */j(e,{...ve.seam({place:{...B,index:o.length}})})]}):null,w||W?null:/* @__PURE__ */j("button",{type:"button",className:"es-list-add",disabled:!ee,onClick:()=>be(o.length),children:Q.add({noun:_})}),
-/* @__PURE__ */j("span",{className:"es-list-said","aria-live":"polite",children:pe}),ue&&ue.index<o.length?
-/* @__PURE__ */j(y,{at:{x:ue.x,y:ue.y},owner:ue.owner,onClose:()=>me(null),children:/* @__PURE__ */j(r,{items:ye(ue.index),onClose:()=>me(null)})}):null]})}var K=e=>e<6?e+1:6,Y=(e,n)=>"string"==typeof e.label&&e.label?e.label:n;function V({field:e,name:n,id:t,value:a,onChange:r,readOnly:o,context:i,renderers:s,headingLevel:c=3}){const[d,u]=C(!0),m=a&&"object"==typeof a?a:{};/* @__PURE__ */
-return j(l,{id:`${t}-group`,title:Y(e,n),open:d,onToggle:u,level:c,children:Object.entries(e.objectFields).map(([e,l])=>/* @__PURE__ */j(X,{field:l,name:`${n}.${e}`,id:`${t}-${e}`,value:m[e],onChange:n=>r({...m,[e]:n}),readOnly:o,context:i,renderers:s,headingLevel:K(c)},e))})}function W({field:e,name:n,id:l,value:t,onChange:a,readOnly:r,context:o,renderers:i,openItem:s,onOpenItem:c,headingLevel:d}){const[u,m]=C(null),p=c?s??null:u,h=c??m,f=Array.isArray(t)?t:[],b=e.getItemSummary;/* @__PURE__ */
-return j(J,{label:Y(e,n),icon:e.icon,noun:"string"==typeof e.noun?e.noun:void 0,items:f,onChange:a,newItem:()=>R({...e.defaultItemProps??{}}),summary:b?(e,n)=>b(e,n):void 0,min:e.min,max:e.max,readOnly:r,open:p,onOpen:h,renderItem:(t,a,s)=>Object.entries(e.arrayFields).map(([e,c])=>/* @__PURE__ */j(X,{field:c,name:`${n}[${a}].${e}`,id:`${l}-${a}-${e}`,value:t?.[e],onChange:n=>s({...t,[e]:n}),readOnly:r,context:o,renderers:i,headingLevel:d},e))})}function X(e){const{field:n,name:l,id:t,value:a,onChange:r,readOnly:d,context:u,renderers:m}=e;if(!n||n.marker||!1===n.visible)return null;const p=m?.[n.type];if(p)return p({field:n,name:l,id:t,value:a,onChange:r,readOnly:d});switch(n.type){case"custom":{const e={...u,field:n,name:l,id:t,value:a,onChange:r,readOnly:d};return n.render(e)}case"text":case"textarea":/* @__PURE__ */
-return j(s,{label:Y(n,l),htmlFor:t,icon:n.icon,hint:n.hint,children:/* @__PURE__ */j(E,{id:t,value:"string"==typeof a?a:null==a?"":String(a),onChange:r,placeholder:n.placeholder,multiline:"textarea"===n.type,readOnly:d})});case"number":/* @__PURE__ */
-return j(s,{label:Y(n,l),htmlFor:t,icon:n.icon,hint:n.hint,children:/* @__PURE__ */j(o,{id:t,value:"number"==typeof a?a:void 0,onChange:r,min:n.min,max:n.max,step:n.step,placeholder:n.placeholder,readOnly:d})});case"select":{const e=`${t}-label`;/* @__PURE__ */
-return j(s,{label:Y(n,l),labelId:e,htmlFor:t,icon:n.icon,hint:n.hint,children:/* @__PURE__ */j(i,{id:t,value:a,options:n.options,onChange:r,readOnly:d,ariaLabelledBy:e})})}case"radio":/* @__PURE__ */
-return j(s,{label:Y(n,l),icon:n.icon,hint:n.hint,children:/* @__PURE__ */j(c,{ariaLabel:Y(n,l),value:a,options:n.options.map(e=>({id:e.value,label:e.label,icon:e.icon,disabled:e.disabled||d})),onChange:e=>{d||r(e)}})});case"object":/* @__PURE__ */
-return j(V,{...e,field:n});case"array":/* @__PURE__ */
-return j(W,{...e,field:n});case"slot":return null}}var G=e=>n.includes(e);function Z(e){let l,t=n[0];const a=[],r=/* @__PURE__ */new Set;for(const[n,o]of Object.entries(e))o&&(G(o.bucket)&&((o.marker||o.bucket!==t)&&(l=void 0),t=o.bucket),o.marker&&"string"==typeof o.fold?l={key:n,title:o.fold}:o.marker&&!1===o.fold&&(l=void 0),o.marker||!1===o.visible||(a.push(l?{name:n,field:o,bucket:t,fold:l}:{name:n,field:o,bucket:t}),"slot"!==o.type&&r.add(t)));return{rows:a,buckets:n.filter(e=>r.has(e))}}function q(e){return new Map(Z(e).rows.map(e=>[e.name,e.bucket]))}function Q(e){const n=[];for(const l of e){const e=n[n.length-1];e&&e.fold?.key===l.fold?.key?e.rows.push(l):n.push({fold:l.fold,rows:[l]})}return n}function U({fields:e,values:n,onChange:t,readOnly:r=!1,context:o,tab:i,onTab:s,tabs:c=!0,tabIcons:d,renderers:m,idPrefix:p,ariaLabel:h,lead:f,children:b,leadFold:g,closedFolds:v,onFold:y,headingLevel:N=3}){const O=u("panel",a),D=$(),I=p??`es-insp${D.replace(/:/g,"")}`,F=Z(e),[L,P]=C(void 0),A=i??L,E=A&&F.buckets.includes(A)?A:F.buckets[0],[M,T]=C(null),H=M&&M.panel===I&&F.rows.some(e=>e.name===M.name)?M:null,R=c&&F.buckets.length>1,z=R&&E?k(I,E):`${I}-rows`,[B,J]=C(()=>/* @__PURE__ */new Set),Y=v??B,V=(e,n)=>{/* @__PURE__ */return j(l,{title:e.title,open:!Y.has(e.key),onToggle:n=>((e,n)=>{void 0===v&&J(l=>{const t=new Set(l);return n?t.delete(e):t.add(e),t}),y?.(e,n)})(e.key,n),id:`${I}-fold-${t=e.key,[...t].map(e=>/[A-Za-z0-9_-]/.test(e)?e:`-u${e.codePointAt(0).toString(16)}-`).join("")}`,level:N,children:n});var t},W=e=>R&&e!==E,G=({name:e,field:l,bucket:a,fold:i})=>/* @__PURE__ */j("div",{className:"es-insp-row","data-field":e,"data-bucket":a,hidden:!!W(a)||void 0,children:/* @__PURE__ */j(X,{field:l,name:e,id:`${I}-${e}`,value:n[e],onChange:n=>t(e,n),readOnly:r,context:o,renderers:m,openItem:H&&H.name===e?H.index:null,onOpenItem:n=>T(null===n?null:{panel:I,name:e,index:n}),headingLevel:i?K(N):N})},e);/* @__PURE__ */
-return S("div",{className:"es-insp",children:[R?/* @__PURE__ */j("div",{className:"es-insp-tabs",children:/* @__PURE__ */j(x,{variant:"underline",block:!0,"aria-label":h??O.settings,idPrefix:I,value:E,onChange:e=>{const n=e;void 0===i&&P(n),s?.(n)},items:F.buckets.map(e=>{const n=O.buckets[e],l=d?.[e];return l?{id:e,icon:l,label:/* @__PURE__ */j("span",{className:"sr-only",children:n}),tooltip:n}:{id:e,label:n}})})}):null,
-/* @__PURE__ */S("div",{className:"es-insp-rows",id:z,role:R?"tabpanel":void 0,"aria-labelledby":R&&E?w(I,E):void 0,children:[f?g?/* @__PURE__ */j("div",{className:"es-insp-band","data-fold":g.key,children:V(g,f)}):f:null,Q(F.rows).map((e,n)=>{if(!e.fold)return e.rows.map(G);const l=e.rows[0].bucket,t=e.rows.every(e=>"slot"===e.field.type);/* @__PURE__ */
-return j("div",{className:"es-insp-band","data-fold":e.fold.key,"data-bucket":l,hidden:!(!W(l)&&!t)||void 0,children:V(e.fold,e.rows.map(G))},`fold-${e.fold.key}-${n}`)}),b]})]})}export{E as FieldText,U as Inspector,X as InspectorField,J as ListField,q as bucketsOf,R as copyItem,M as insertAt,Y as labelOf,T as moveTo,Z as planFields,H as removeAt};