efficient-easel 0.97.0 → 0.98.0

package/dist/copy/copy.css

@@ -15,7 +15,7 @@
  */
 
 .es-copy {
-  --es-copy-gap: 4px;
+  --es-copy-gap: var(--es-space-8, 8px);
   /* efficient-shell's IconButton at its default size, md (design v5, 0.94.0). */
   --es-copy-mark-size: 32px;
   --es-copy-mark-ink: var(--es-text-muted, #6b7280);
@@ -26,7 +26,7 @@
   --es-copy-field-bg: var(--es-field-bg, #ffffff);
   /** The field's inner inset. On the SURFACES, never on the box — see
    *  `.es-copy-box` below for the caret bug that rule exists to stop. */
-  --es-copy-field-pad: 4px 6px;
+  --es-copy-field-pad: 4px 8px;
   --es-copy-field-ring: var(--es-accent, #2563eb);
   --es-copy-radius: 4px;
 
@@ -92,7 +92,7 @@
 .es-copy-mark {
   height: var(--es-copy-mark-size);
   min-width: var(--es-copy-mark-size);
-  padding: 0 5px;
+  padding: 0 4px;
   border: 0;
   border-radius: 6px;
   background: transparent;
@@ -227,7 +227,7 @@
   box-sizing: border-box;
   width: 100%;
   height: 32px;
-  padding: 0 10px;
+  padding: 0 12px;
   border: 1px solid var(--es-copy-field-border);
   border-radius: var(--es-field-radius, 6px);
   background: var(--es-copy-field-bg);
@@ -260,7 +260,7 @@
 
 .es-copy-link-btn {
   height: 28px;
-  padding: 0 10px;
+  padding: 0 12px;
   border: 1px solid var(--es-btn-border, var(--es-copy-field-border));
   border-radius: var(--es-field-radius, 6px);
   background: var(--es-raised, #fff);

package/dist/copy/index.d.ts

@@ -1,8 +1,8 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { MarkStyle, MarkupTool, WrapResult, InlineRule } from '../markup/index.js';
-import { a as CopyAlign } from '../words-DfxEp_RH.js';
-export { b as COPY_ALIGNS, c as COPY_ALIGN_FIT, d as COPY_ALIGN_GLYPHS, e as COPY_ALIGN_LABELS, C as CopyWords, f as copyAlignOptions } from '../words-DfxEp_RH.js';
+import { a as CopyAlign } from '../words-bOMsUJk9.js';
+export { b as COPY_ALIGNS, c as COPY_ALIGN_FIT, d as COPY_ALIGN_GLYPHS, e as COPY_ALIGN_LABELS, C as CopyWords, f as copyAlignOptions } from '../words-bOMsUJk9.js';
 
 /** `'b'` → `Meta+B`, `'shift+x'` → `Meta+Shift+X` — the ARIA spelling of a
  *  shortcut. Meta is what the tooltips promise (⌘); Ctrl works too. */
@@ -16,7 +16,7 @@ interface MarkBarProps {
      *
      *   `MarkStyle[]`   resolved against the shared grammar's `MARKUP_TOOLS`, in
      *                   that order. What the campaign designer passes.
-     *   `MarkupTool[]`  used verbatim. What `efficient-shop` passes.
+     *   `MarkupTool[]`  used verbatim. What `efficient-storefront` passes.
      *
      * ⚠️ WHY VERBATIM DESCRIPTORS HAD TO EXIST. The storefront offered SEVEN
      * marks: the grammar's four, plus its three word styles (`@@`, `++`, `^^`),
@@ -49,7 +49,7 @@ interface MarkBarProps {
      * how they LOOK is the host's, "because this bar has to belong to the
      * storefront inspector's chrome and the campaign designer's bar has to belong
      * to the portal's". Colour was delegated by tokens on day one; the DRAWING was
-     * not, and a letter is a drawing. `efficient-shop` renders each mark as a 14px
+     * not, and a letter is a drawing. `efficient-storefront` renders each mark as a 14px
      * stroked SVG at the weight of its other inspector glyphs, on the stated
      * ground that the row should read "as part of the field rather than as
      * pasted-in icons" — so without this it could not adopt the bar without losing
@@ -69,7 +69,7 @@ interface MarkBarProps {
      *
      * A bar bound to one box needs nothing more. A bar SHARED by several rows has
      * to say which row it is aimed at, because the visible cue — the marked row —
-     * is not readable. `efficient-shop` has that case today.
+     * is not readable. `efficient-storefront` has that case today.
      */
     ariaLabel?: string;
     /**

package/dist/copy/index.js

@@ -1,10 +1,10 @@
-import{DEFAULT_COPY_WORDS as e}from"../chunk-2LUSK32B.js";import{SettingsSegmented as t}from"../chunk-QB3BZIRA.js";import{GoldTextInput as n}from"../chunk-CERTFXCV.js";import{applyMark as l,STANDARD_MARKUP as r,writeMarkedLines as o,sameMarks as i,markedLines as a,spanFor as s,markupTools as c,findLink as u,markedAt as d,removeLink as p,writeLink as h,isSafeLinkHref as f}from"../chunk-6OPSJGAI.js";import{useWords as m}from"../chunk-MFIRYGHW.js";import"../chunk-BZ5ASXOL.js";import{AlignSeparateIcon as y,AlignRightIcon as b,AlignCenterIcon as g,AlignLeftIcon as k,ClearMarksIcon as v,LinkIcon as x,QuietIcon as C,EmphasisIcon as w,StrikeIcon as S,ItalicIcon as N,BoldIcon as D}from"../chunk-YNZZYHA4.js";import{useRef as j,useLayoutEffect as E,useState as L,useEffect as K,useId as P}from"react";import{jsx as A,jsxs as T,Fragment as z}from"react/jsx-runtime";var B=["left","center","right","justify"],R=e.align,$={left:/* @__PURE__ */A(k,{}),center:/* @__PURE__ */A(g,{}),right:/* @__PURE__ */A(b,{}),justify:/* @__PURE__ */A(y,{})},M={three:{labelsPx:94.5,widestLabelPx:39.94},four:{labelsPx:140,widestLabelPx:44}};function F(e,t=R){return B.filter(t=>e.includes(t)).map(e=>({id:e,label:t[e],icon:$[e],title:t[e]}))}var Z=/[\u1100-\u11ff\u2e80-\u9fff\uac00-\ud7af\uf900-\ufaff\uff00-\uffef]/;function I(e){if(e.every(e=>e.label===R[e.id]))return e.length>3?M.four:M.three;const t=e.map(e=>[...e.label].reduce((e,t)=>e+(Z.test(t)?13:8),0));return{labelsPx:t.reduce((e,t)=>e+t,0),widestLabelPx:Math.max(0,...t)}}function Y(e,t){const n=t?.selectionStart??e.length;return{start:n,end:t?.selectionEnd??n}}function q(e,t,n,r=l){const{start:o,end:i}=Y(e,n);return r(e,o,i,t)}function H(e,t,n){const{start:l,end:r}=Y(e,n),o=l+t.length;return{text:e.slice(0,l)+t+e.slice(r),selectionStart:o,selectionEnd:o}}var O=1e3;function U(e=200){let t=[],n=[],l=null,r=0;return{record(o,i,a){const s="type"===i&&"type"===l&&a-r<1e3;l=i,r=a,n=[],s||(t.push(o),t.length>e&&t.shift())},undo(e){const r=t.pop();return r?(n.push(e),l=null,r):null},redo(e){const r=n.pop();return r?(t.push(e),l=null,r):null},reset(){t=[],n=[],l=null}}}function G({href:t,editing:n,onApply:l,onRemove:r,onClose:o}){const i=m("copy",e).link,a=P(),[s,c]=L(t),[u,d]=L(!1),p=j(null);K(()=>{p.current?.focus(),p.current?.select()},[]);const h=()=>{const e=s.trim();f(e)?l(e):d(!0)};/* @__PURE__ */
-return T("div",{role:"dialog","aria-label":i.title,className:"es-copy-link",onKeyDown:e=>{"Enter"===e.key?(e.preventDefault(),h()):"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),o())},children:[
-/* @__PURE__ */A("label",{htmlFor:a,className:"es-copy-link-label",children:i.label}),
-/* @__PURE__ */A("input",{ref:p,id:a,type:"text",className:"es-copy-link-input",value:s,placeholder:i.placeholder,spellCheck:!1,autoComplete:"off","aria-invalid":u||void 0,"aria-describedby":u?`${a}-why`:void 0,onChange:e=>{c(e.target.value),d(!1)}}),u?/* @__PURE__ */A("p",{id:`${a}-why`,role:"alert",className:"es-copy-link-why",children:i.refused}):null,
-/* @__PURE__ */T("div",{className:"es-copy-link-actions",children:[n?/* @__PURE__ */A("button",{type:"button",className:"es-copy-link-btn",onClick:r,children:i.remove}):null,
-/* @__PURE__ */A("button",{type:"button",className:"es-copy-link-btn is-primary",onClick:h,disabled:""===s.trim(),children:i.apply})]})]})}var W=/* @__PURE__ */new Set(["script","style","head","title","meta","link","template","noscript","svg","math","object","iframe"]),X=/* @__PURE__ */new Set(["p","div","li","ul","ol","dl","dt","dd","h1","h2","h3","h4","h5","h6","blockquote","pre","table","thead","tbody","tfoot","tr","section","article","header","footer","aside","nav","figure","figcaption","address","hr"]);function J(e,t){const n=t.rules??r,l=e.html&&""!==e.html.trim()?function(e,t,n){const l=t.createElement("template");l.innerHTML=e;const r=[[]],s=()=>r[r.length-1],c=()=>{const e=s();for(;e.length>0&&" "===e[e.length-1].ch;)e.pop();e.length>0&&r.push([])},u=(e,t,n,l)=>{if(3===e.nodeType){for(const r of e.textContent??""){const e=/\s/.test(r)?" ":r,o=s();(" "!==e||0!==o.length&&" "!==o[o.length-1].ch)&&o.push({ch:e,bold:t,italic:n,href:l})}return}if(1!==e.nodeType&&11!==e.nodeType)return;const o=e,i=1===e.nodeType?o.localName:"";if(W.has(i))return;if("br"===i)return void r.push([]);let a=t,d=n,p=l;if("b"!==i&&"strong"!==i||(a=!0),"i"!==i&&"em"!==i||(d=!0),"a"===i){const e=(o.getAttribute("href")??"").trim();p=f(e)?e:null}const h=1===e.nodeType?o.style:null;if(h){const e=h.fontWeight;"bold"===e||"bolder"===e||Number(e)>=600?a=!0:("normal"===e||"lighter"===e||""!==e&&Number(e)<600)&&(a=!1),"italic"===h.fontStyle||"oblique"===h.fontStyle?d=!0:"normal"===h.fontStyle&&(d=!1)}const m=X.has(i);m&&c();for(const t of[...e.childNodes])u(t,a,d,p);m&&c()};u(l.content,!1,!1,null);for(;r.length>1&&0===r[r.length-1].length;)r.pop();return r.map(e=>function(e,t){const n=t=>e.map((n,l)=>n[t]&&(" "!==n.ch||Boolean(e[l-1]?.[t])&&Boolean(e[l+1]?.[t]))),l=[{bold:!0,italic:!0,links:!0},{bold:!0,italic:!1,links:!0},{bold:!1,italic:!1,links:!0},{bold:!1,italic:!1,links:!1}];for(const r of l){const l=Q(e,r.bold?n("bold"):null,r.italic?n("italic"):null,r.links),s=o([l]).text;if(i([l],a(s,t)))return s}return e.map(e=>e.ch).join("")}(e,n))}(e.html,t.doc,n):(e.text??"").replace(/\r\n?/g,"\n").split("\n");return t.multiline?l.join("\n"):l.map(e=>e.trim()).filter(e=>""!==e).join(" ")}function Q(e,t,n,l){let r=0,o=null,i=null,a=null;return{bullet:!1,chars:e.map((e,c)=>{const u=l?e.href:null;return o=null===u?null:o&&o.href===u?o:s(++r,"link",u),i=t?.[c]?i??s(++r,"bold"):null,a=n?.[c]?a??s(++r,"italic"):null,{ch:e.ch,at:-1,marks:[o,i,a].filter(e=>null!==e)}})}}var V={bold:/* @__PURE__ */A(D,{size:16}),italic:/* @__PURE__ */A(N,{size:16}),strike:/* @__PURE__ */A(S,{size:16}),highlight:/* @__PURE__ */A(w,{size:16}),quiet:/* @__PURE__ */A(C,{size:16}),link:/* @__PURE__ */A(x,{size:16}),clear:/* @__PURE__ */A(v,{size:16})};function _(e){if(!e)return;const t=e.split("+"),n=t.pop().toUpperCase();return["Meta",...t.map(e=>e[0].toUpperCase()+e.slice(1)),n].join("+")}var ee={bold:"is-bold",italic:"is-italic",strike:"is-strike"};function te({tools:t,onApply:n,disabled:l=!1,actions:r,align:o,glyphs:i,ariaLabel:a,pressed:s,open:u=null}){const d=m("copy",e),p="string"==typeof t[0]?c(t).map(e=>({...e,...d.marks[e.style]})):t;return 0!==p.length||r||o?/* @__PURE__ */T("div",{className:"es-copy-bar",role:"group","aria-label":a??d.formatting,children:[p.map(e=>{const t=i?.[e.style]??V[e.style],r=u===e.style||Boolean(s?.[e.style]);/* @__PURE__ */
-return A("button",{type:"button",onMouseDown:e=>e.preventDefault(),onClick:()=>n(e.style),disabled:l,title:e.title,"aria-label":e.name??e.title,"aria-keyshortcuts":_(e.shortcut),"aria-pressed":s||u?r:void 0,"aria-haspopup":"link"===e.style&&s?"dialog":void 0,"aria-expanded":"link"===e.style&&s?"link"===u:void 0,className:`es-copy-mark${t?" has-glyph":ee[e.style]?` ${ee[e.style]}`:""}${r?" is-active":""}`,children:t??e.label},e.style)}),r?/* @__PURE__ */T(z,{children:[
-/* @__PURE__ */A("span",{className:"es-copy-bar-split","aria-hidden":"true"}),r]}):null,o?/* @__PURE__ */A("span",{className:"es-copy-bar-end",children:o}):null]}):null}function ne({target:e,onChange:t}){const n=j(null);return E(()=>{const t=n.current,l=e.current;t&&l&&l.value===t.text&&(n.current=null,l.focus(),l.setSelectionRange(t.start,t.end))}),l=>{const r=l(e.current);t(r.text),n.current={start:r.selectionStart,end:r.selectionEnd,text:r.text}}}function le({value:o,onChange:i,onCommit:a,onCancel:s,multiline:f=!1,placeholder:y,ariaLabel:b,className:g,readOnly:k=!1,rules:v,tools:x=[],writeMark:C,actions:w,align:S,glyphs:N,barLabel:D,renderFooter:E,inputRef:P,barShows:z="always"}){const B=m("copy",e),R=j(null),$=P??R,[M,Z]=L(!1),[Y,O]=L(null),W=j(U()).current,X=j(null);K(()=>{const e=X.current;e&&o===e.to?X.current=null:e&&o===e.from||(X.current=null,W.reset())},[o,W]);const Q=e=>{X.current={from:X.current?.from??o,to:e},i(e)},V=e=>({text:o,start:e?.selectionStart??Y?.start??o.length,end:e?.selectionEnd??Y?.end??o.length}),_=ne({target:$,onChange:Q}),ee=e=>(O({start:e.selectionStart,end:e.selectionEnd}),e),le=e=>_(t=>(W.record(V(t),"edit",Date.now()),ee(e(t)))),[re,oe]=L(null),ie=v??r,ae="string"==typeof x[0]?c(x):x,se=ae.map(e=>e.style),ce={};if(Y)for(const e of se)ce[e]="link"===e?null!==u(o,Y.start,Y.end):d(o,Y.start,Y.end,e);const ue=e=>{if("clear"===e)return void le(t=>q(o,e,t,(e,t,n)=>l(e,t,n,"clear",ie)));if("link"!==e){const t=C??((e,t,n,o)=>l(e,t,n,o,r,B.placeholders));return void le(n=>q(o,e,n,t))}const t=$.current,n=t?.selectionStart??o.length,i=t?.selectionEnd??n;oe({start:n,end:i,link:u(o,n,i)})},de=S?F(S.allow,B.align):[];/* @__PURE__ */
-return T("div",{className:"es-copy"+(g?` ${g}`:""),onFocus:()=>Z(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||Z(!1)},onKeyDown:e=>{if(k||e.target!==$.current)return;if(e.altKey||e.metaKey===e.ctrlKey)return;const t=e.key.toLowerCase(),n="KeyZ"===e.code||"z"===t,l=("KeyY"===e.code||"y"===t)&&!e.shiftKey;if(n||l)return e.preventDefault(),e.stopPropagation(),r=l||e.shiftKey?"redo":"undo",void _(e=>{const t=V(e),n=W[r](t);return ee(n?{text:n.text,selectionStart:n.start,selectionEnd:n.end}:{text:t.text,selectionStart:t.start,selectionEnd:t.end})});var r;const o=`${e.shiftKey?"shift+":""}${t}`,i=ae.find(e=>e.shortcut===o);i&&(e.preventDefault(),e.stopPropagation(),ue(i.style))},onPaste:e=>{const t=$.current;if(k||!t||e.target!==t)return;e.preventDefault();const n=J({html:e.clipboardData.getData("text/html"),text:e.clipboardData.getData("text/plain")},{doc:t.ownerDocument,multiline:f,rules:ie});le(e=>H(o,n,e))},onSelect:()=>{const e=$.current;e&&e.ownerDocument.activeElement===e&&O({start:e.selectionStart??o.length,end:e.selectionEnd??o.length})},children:["always"===z||M||null!==re?/* @__PURE__ */A(te,{tools:x,disabled:k,actions:w,glyphs:N,ariaLabel:D,pressed:ce,open:re?"link":null,onApply:ue,align:S?/* @__PURE__ */A(t,{options:de,value:S.value,onChange:S.onChange,ariaLabel:B.alignment,disabled:k||S.disabled,fit:I(de)}):null}):null,
-/* @__PURE__ */A(n,{value:o,onInput:e=>{W.record(V(null),"type",Date.now()),Q(e)},onCommit:a,onCancel:s,multiline:f,placeholder:y,ariaLabel:b,rules:v,disabled:k,inputRef:$,className:"es-copy-box"}),re?/* @__PURE__ */A(G,{href:re.link?.href??"",editing:null!==re.link,onApply:e=>{const t=re;oe(null),le(()=>h(o,t.start,t.end,e))},onRemove:()=>{const e=re.link;oe(null),e&&le(()=>p(o,e))},onClose:()=>{oe(null),$.current?.focus()}}):null,E?E({focused:M,insert:e=>le(t=>H(o,e,t))}):null]})}export{B as COPY_ALIGNS,M as COPY_ALIGN_FIT,$ as COPY_ALIGN_GLYPHS,R as COPY_ALIGN_LABELS,le as CopyBox,te as MarkBar,O as TYPING_BURST_MS,_ as ariaShortcut,F as copyAlignOptions,U as createHistory,H as insertSelection,q as markSelection,J as pasteToMarkup,ne as useCaretEdit};
+import{DEFAULT_COPY_WORDS as e}from"../chunk-2LUSK32B.js";import{SettingsSegmented as t}from"../chunk-QB3BZIRA.js";import{GoldTextInput as n}from"../chunk-CERTFXCV.js";import{applyMark as l,STANDARD_MARKUP as r,writeMarkedLines as o,sameMarks as i,markedLines as a,spanFor as s,markupTools as c,findLink as u,markedAt as d,removeLink as p,writeLink as h,isSafeLinkHref as f}from"../chunk-6OPSJGAI.js";import{useWords as m}from"../chunk-MFIRYGHW.js";import"../chunk-BZ5ASXOL.js";import{AlignSeparateIcon as y,AlignRightIcon as b,AlignCenterIcon as g,AlignLeftIcon as k,ClearMarksIcon as v,LinkIcon as x,QuietIcon as C,EmphasisIcon as w,StrikeIcon as S,ItalicIcon as D,BoldIcon as N}from"../chunk-PI26YXYD.js";import{useRef as j,useLayoutEffect as E,useState as L,useEffect as P,useId as K}from"react";import{jsx as T,jsxs as z,Fragment as A}from"react/jsx-runtime";var B=["left","center","right","justify"],R=e.align,$={left:/* @__PURE__ */T(k,{}),center:/* @__PURE__ */T(g,{}),right:/* @__PURE__ */T(b,{}),justify:/* @__PURE__ */T(y,{})},M={three:{labelsPx:94.5,widestLabelPx:39.94},four:{labelsPx:140,widestLabelPx:44}};function F(e,t=R){return B.filter(t=>e.includes(t)).map(e=>({id:e,label:t[e],icon:$[e],title:t[e]}))}var I=/[\u1100-\u11ff\u2e80-\u9fff\uac00-\ud7af\uf900-\ufaff\uff00-\uffef]/;function Y(e){if(e.every(e=>e.label===R[e.id]))return e.length>3?M.four:M.three;const t=e.map(e=>[...e.label].reduce((e,t)=>e+(I.test(t)?13:8),0));return{labelsPx:t.reduce((e,t)=>e+t,0),widestLabelPx:Math.max(0,...t)}}function q(e,t){const n=t?.selectionStart??e.length;return{start:n,end:t?.selectionEnd??n}}function O(e,t,n,r=l){const{start:o,end:i}=q(e,n);return r(e,o,i,t)}function U(e,t,n){const{start:l,end:r}=q(e,n),o=l+t.length;return{text:e.slice(0,l)+t+e.slice(r),selectionStart:o,selectionEnd:o}}var X=1e3;function Z(e=200){let t=[],n=[],l=null,r=0;return{record(o,i,a){const s="type"===i&&"type"===l&&a-r<1e3;l=i,r=a,n=[],s||(t.push(o),t.length>e&&t.shift())},undo(e){const r=t.pop();return r?(n.push(e),l=null,r):null},redo(e){const r=n.pop();return r?(t.push(e),l=null,r):null},reset(){t=[],n=[],l=null}}}function G({href:t,editing:n,onApply:l,onRemove:r,onClose:o}){const i=m("copy",e).link,a=K(),[s,c]=L(t),[u,d]=L(!1),p=j(null);P(()=>{p.current?.focus(),p.current?.select()},[]);const h=()=>{const e=s.trim();f(e)?l(e):d(!0)};/* @__PURE__ */
+return z("div",{role:"dialog","aria-label":i.title,className:"es-copy-link",onKeyDown:e=>{"Enter"===e.key?(e.preventDefault(),h()):"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),o())},children:[
+/* @__PURE__ */T("label",{htmlFor:a,className:"es-copy-link-label",children:i.label}),
+/* @__PURE__ */T("input",{ref:p,id:a,type:"text",className:"es-copy-link-input",value:s,placeholder:i.placeholder,spellCheck:!1,autoComplete:"off","aria-invalid":u||void 0,"aria-describedby":u?`${a}-why`:void 0,onChange:e=>{c(e.target.value),d(!1)}}),u?/* @__PURE__ */T("p",{id:`${a}-why`,role:"alert",className:"es-copy-link-why",children:i.refused}):null,
+/* @__PURE__ */z("div",{className:"es-copy-link-actions",children:[n?/* @__PURE__ */T("button",{type:"button",className:"es-copy-link-btn",onClick:r,children:i.remove}):null,
+/* @__PURE__ */T("button",{type:"button",className:"es-copy-link-btn is-primary",onClick:h,disabled:""===s.trim(),children:i.apply})]})]})}var H=/* @__PURE__ */new Set(["script","style","head","title","meta","link","template","noscript","svg","math","object","iframe"]),W=/* @__PURE__ */new Set(["p","div","li","ul","ol","dl","dt","dd","h1","h2","h3","h4","h5","h6","blockquote","pre","table","thead","tbody","tfoot","tr","section","article","header","footer","aside","nav","figure","figcaption","address","hr"]);function J(e,t){const n=t.rules??r,l=e.html&&""!==e.html.trim()?function(e,t,n){const l=t.createElement("template");l.innerHTML=e;const r=[[]],s=()=>r[r.length-1],c=()=>{const e=s();for(;e.length>0&&" "===e[e.length-1].ch;)e.pop();e.length>0&&r.push([])},u=(e,t,n,l)=>{if(3===e.nodeType){for(const r of e.textContent??""){const e=/\s/.test(r)?" ":r,o=s();(" "!==e||0!==o.length&&" "!==o[o.length-1].ch)&&o.push({ch:e,bold:t,italic:n,href:l})}return}if(1!==e.nodeType&&11!==e.nodeType)return;const o=e,i=1===e.nodeType?o.localName:"";if(H.has(i))return;if("br"===i)return void r.push([]);let a=t,d=n,p=l;if("b"!==i&&"strong"!==i||(a=!0),"i"!==i&&"em"!==i||(d=!0),"a"===i){const e=(o.getAttribute("href")??"").trim();p=f(e)?e:null}const h=1===e.nodeType?o.style:null;if(h){const e=h.fontWeight;"bold"===e||"bolder"===e||Number(e)>=600?a=!0:("normal"===e||"lighter"===e||""!==e&&Number(e)<600)&&(a=!1),"italic"===h.fontStyle||"oblique"===h.fontStyle?d=!0:"normal"===h.fontStyle&&(d=!1)}const m=W.has(i);m&&c();for(const t of[...e.childNodes])u(t,a,d,p);m&&c()};u(l.content,!1,!1,null);for(;r.length>1&&0===r[r.length-1].length;)r.pop();return r.map(e=>function(e,t){const n=t=>e.map((n,l)=>n[t]&&(" "!==n.ch||Boolean(e[l-1]?.[t])&&Boolean(e[l+1]?.[t]))),l=[{bold:!0,italic:!0,links:!0},{bold:!0,italic:!1,links:!0},{bold:!1,italic:!1,links:!0},{bold:!1,italic:!1,links:!1}];for(const r of l){const l=Q(e,r.bold?n("bold"):null,r.italic?n("italic"):null,r.links),s=o([l]).text;if(i([l],a(s,t)))return s}return e.map(e=>e.ch).join("")}(e,n))}(e.html,t.doc,n):(e.text??"").replace(/\r\n?/g,"\n").split("\n");return t.multiline?l.join("\n"):l.map(e=>e.trim()).filter(e=>""!==e).join(" ")}function Q(e,t,n,l){let r=0,o=null,i=null,a=null;return{bullet:!1,chars:e.map((e,c)=>{const u=l?e.href:null;return o=null===u?null:o&&o.href===u?o:s(++r,"link",u),i=t?.[c]?i??s(++r,"bold"):null,a=n?.[c]?a??s(++r,"italic"):null,{ch:e.ch,at:-1,marks:[o,i,a].filter(e=>null!==e)}})}}var V={bold:/* @__PURE__ */T(N,{size:16}),italic:/* @__PURE__ */T(D,{size:16}),strike:/* @__PURE__ */T(S,{size:16}),highlight:/* @__PURE__ */T(w,{size:16}),quiet:/* @__PURE__ */T(C,{size:16}),link:/* @__PURE__ */T(x,{size:16}),clear:/* @__PURE__ */T(v,{size:16})};function _(e){if(!e)return;const t=e.split("+"),n=t.pop().toUpperCase();return["Meta",...t.map(e=>e[0].toUpperCase()+e.slice(1)),n].join("+")}var ee={bold:"is-bold",italic:"is-italic",strike:"is-strike"};function te({tools:t,onApply:n,disabled:l=!1,actions:r,align:o,glyphs:i,ariaLabel:a,pressed:s,open:u=null}){const d=m("copy",e),p="string"==typeof t[0]?c(t).map(e=>({...e,...d.marks[e.style]})):t;return 0!==p.length||r||o?/* @__PURE__ */z("div",{className:"es-copy-bar",role:"group","aria-label":a??d.formatting,children:[p.map(e=>{const t=i?.[e.style]??V[e.style],r=u===e.style||Boolean(s?.[e.style]);/* @__PURE__ */
+return T("button",{type:"button",onMouseDown:e=>e.preventDefault(),onClick:()=>n(e.style),disabled:l,title:e.title,"aria-label":e.name??e.title,"aria-keyshortcuts":_(e.shortcut),"aria-pressed":s||u?r:void 0,"aria-haspopup":"link"===e.style&&s?"dialog":void 0,"aria-expanded":"link"===e.style&&s?"link"===u:void 0,className:`es-copy-mark${t?" has-glyph":ee[e.style]?` ${ee[e.style]}`:""}${r?" is-active":""}`,children:t??e.label},e.style)}),r?/* @__PURE__ */z(A,{children:[
+/* @__PURE__ */T("span",{className:"es-copy-bar-split","aria-hidden":"true"}),r]}):null,o?/* @__PURE__ */T("span",{className:"es-copy-bar-end",children:o}):null]}):null}function ne({target:e,onChange:t}){const n=j(null);return E(()=>{const t=n.current,l=e.current;t&&l&&l.value===t.text&&(n.current=null,l.focus(),l.setSelectionRange(t.start,t.end))}),l=>{const r=l(e.current);t(r.text),n.current={start:r.selectionStart,end:r.selectionEnd,text:r.text}}}function le({value:o,onChange:i,onCommit:a,onCancel:s,multiline:f=!1,placeholder:y,ariaLabel:b,className:g,readOnly:k=!1,rules:v,tools:x=[],writeMark:C,actions:w,align:S,glyphs:D,barLabel:N,renderFooter:E,inputRef:K,barShows:A="always"}){const B=m("copy",e),R=j(null),$=K??R,[M,I]=L(!1),[q,X]=L(null),H=j(Z()).current,W=j(null);P(()=>{const e=W.current;e&&o===e.to?W.current=null:e&&o===e.from||(W.current=null,H.reset())},[o,H]);const Q=e=>{W.current={from:W.current?.from??o,to:e},i(e)},V=e=>({text:o,start:e?.selectionStart??q?.start??o.length,end:e?.selectionEnd??q?.end??o.length}),_=ne({target:$,onChange:Q}),ee=e=>(X({start:e.selectionStart,end:e.selectionEnd}),e),le=e=>_(t=>(H.record(V(t),"edit",Date.now()),ee(e(t)))),[re,oe]=L(null),ie=v??r,ae="string"==typeof x[0]?c(x):x,se=ae.map(e=>e.style),ce={};if(q)for(const e of se)ce[e]="link"===e?null!==u(o,q.start,q.end):d(o,q.start,q.end,e);const ue=e=>{if("clear"===e)return void le(t=>O(o,e,t,(e,t,n)=>l(e,t,n,"clear",ie)));if("link"!==e){const t=C??((e,t,n,o)=>l(e,t,n,o,r,B.placeholders));return void le(n=>O(o,e,n,t))}const t=$.current,n=t?.selectionStart??o.length,i=t?.selectionEnd??n;oe({start:n,end:i,link:u(o,n,i)})},de=S?F(S.allow,B.align):[];/* @__PURE__ */
+return z("div",{className:"es-copy"+(g?` ${g}`:""),onFocus:()=>I(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||I(!1)},onKeyDown:e=>{if(k||e.target!==$.current)return;if(e.altKey||e.metaKey===e.ctrlKey)return;const t=e.key.toLowerCase(),n="KeyZ"===e.code||"z"===t,l=("KeyY"===e.code||"y"===t)&&!e.shiftKey;if(n||l)return e.preventDefault(),e.stopPropagation(),r=l||e.shiftKey?"redo":"undo",void _(e=>{const t=V(e),n=H[r](t);return ee(n?{text:n.text,selectionStart:n.start,selectionEnd:n.end}:{text:t.text,selectionStart:t.start,selectionEnd:t.end})});var r;const o=`${e.shiftKey?"shift+":""}${t}`,i=ae.find(e=>e.shortcut===o);i&&(e.preventDefault(),e.stopPropagation(),ue(i.style))},onPaste:e=>{const t=$.current;if(k||!t||e.target!==t)return;e.preventDefault();const n=J({html:e.clipboardData.getData("text/html"),text:e.clipboardData.getData("text/plain")},{doc:t.ownerDocument,multiline:f,rules:ie});le(e=>U(o,n,e))},onSelect:()=>{const e=$.current;e&&e.ownerDocument.activeElement===e&&X({start:e.selectionStart??o.length,end:e.selectionEnd??o.length})},children:["always"===A||M||null!==re?/* @__PURE__ */T(te,{tools:x,disabled:k,actions:w,glyphs:D,ariaLabel:N,pressed:ce,open:re?"link":null,onApply:ue,align:S?/* @__PURE__ */T(t,{options:de,value:S.value,onChange:S.onChange,ariaLabel:B.alignment,disabled:k||S.disabled,fit:Y(de)}):null}):null,
+/* @__PURE__ */T(n,{value:o,onInput:e=>{H.record(V(null),"type",Date.now()),Q(e)},onCommit:a,onCancel:s,multiline:f,placeholder:y,ariaLabel:b,rules:v,disabled:k,inputRef:$,className:"es-copy-box"}),re?/* @__PURE__ */T(G,{href:re.link?.href??"",editing:null!==re.link,onApply:e=>{const t=re;oe(null),le(()=>h(o,t.start,t.end,e))},onRemove:()=>{const e=re.link;oe(null),e&&le(()=>p(o,e))},onClose:()=>{oe(null),$.current?.focus()}}):null,E?E({focused:M,insert:e=>le(t=>U(o,e,t))}):null]})}export{B as COPY_ALIGNS,M as COPY_ALIGN_FIT,$ as COPY_ALIGN_GLYPHS,R as COPY_ALIGN_LABELS,le as CopyBox,te as MarkBar,X as TYPING_BURST_MS,_ as ariaShortcut,F as copyAlignOptions,Z as createHistory,U as insertSelection,O as markSelection,J as pasteToMarkup,ne as useCaretEdit};

package/dist/drag/drag.css

@@ -23,7 +23,7 @@
   align-items: center;
   gap: 4px;
   height: 22px;
-  padding: 0 8px 0 6px;
+  padding: 0 8px;
   border-radius: 11px;
   background: var(--es-toast-bg);
   color: var(--es-on-accent);
@@ -91,7 +91,7 @@
 }
 .es-canvas-seam-add {
   position: relative;
-  padding: 2px 10px;
+  padding: 2px 12px;
   border: none;
   border-radius: 999px;
   background: var(--es-accent);
@@ -150,8 +150,8 @@
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  margin: 0 0 10px;
-  padding: 7px 8px 7px 11px;
+  margin: 0 0 12px;
+  padding: 8px 8px 8px 12px;
   border-radius: 8px;
   background: var(--es-accent-tint);
   color: var(--es-accent-text);
@@ -175,14 +175,14 @@
   background: var(--es-accent-tint-strong);
 }
 .es-add-hint {
-  margin: 0 0 10px;
+  margin: 0 0 12px;
   font-size: 12.5px;
   color: var(--es-muted);
 }
 .es-add-search {
   display: flex;
   align-items: center;
-  gap: 9px;
+  gap: 8px;
   margin-bottom: 16px;
   padding: 0 12px;
   height: 38px;
@@ -237,13 +237,13 @@
   color: var(--es-text);
 }
 .es-add-group + .es-add-group {
-  margin-top: 22px;
+  margin-top: 16px;
 }
 .es-add-group-head {
   display: flex;
   align-items: baseline;
   gap: 8px;
-  margin-bottom: 11px;
+  margin-bottom: 12px;
 }
 .es-add-group-title {
   font-size: 11px;
@@ -259,16 +259,16 @@
 .es-add-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
-  gap: 6px;
+  gap: 8px;
 }
 .es-add-tile {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 6px;
+  gap: 8px;
   min-height: 64px;
-  padding: 9px 6px;
+  padding: 8px;
   border: 1px solid var(--es-line);
   border-radius: 7px;
   background: var(--es-panel);
@@ -317,9 +317,9 @@
 .es-add-tile.has-cover {
   align-items: stretch;
   justify-content: flex-start;
-  gap: 5px;
+  gap: 4px;
   min-height: 0;
-  padding: 5px 5px 7px;
+  padding: 4px 4px 8px;
   text-align: left;
 }
 /* The containing block for the host's picture: a cover drawn to FILL its box
@@ -345,8 +345,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 9px;
-  padding: 48px 12px;
+  gap: 8px;
+  padding: 32px 12px;
   text-align: center;
   color: var(--es-muted);
 }

package/dist/drag/index.js

@@ -1,7 +1,7 @@
-import{DEFAULT_DRAG_WORDS as e}from"../chunk-O2NLQBFX.js";import{scrollBoxOf as t,startAutoScroll as n,isNoOpDrop as l}from"../chunk-6PS6STGA.js";export{AUTO_SCROLL_EDGE,AUTO_SCROLL_MAX_SPEED,autoScrollDelta,autoScrollSpeed,createDragSession,dropOnRow,gapToMoveIndex,isNoOpDrop,scrollBoxOf,scrollParent,startAutoScroll,stepGap,useTreeDrag}from"../chunk-6PS6STGA.js";import{useCanvasLayout as a,useCanvasEvent as r}from"../chunk-MCLBHENY.js";import{framePointToHost as o,elementScale as s,frameRectToLayer as i,clientPointToLayer as c}from"../chunk-ZNCEOSXO.js";import{CloseIcon as d,SearchIcon as u}from"../chunk-YNZZYHA4.js";import{parseZoneKey as h}from"../chunk-KRXQM65X.js";import"../chunk-NKB3KVAB.js";import{useRef as p,useEffect as m,useState as f,useCallback as g,useMemo as b,useSyncExternalStore as y,useId as v}from"react";import{jsxs as x,jsx as k}from"react/jsx-runtime";var w=(e,t,n)=>t>=e.left&&t<=e.left+e.width&&n>=e.top&&n<=e.top+e.height,N=e=>e.width*e.height;function D(e,t,n){let l=null;for(const a of e)w(a.box,t,n)&&(!l||N(a.box)<=N(l.box))&&(l=a);return l}function S(e,t,n){const l="x"===e.axis?t:n;let a=0;for(const t of e.children){l>("x"===e.axis?t.left+t.width/2:t.top+t.height/2)&&(a+=1)}return a}function A(e,t){const n=e.children;if("x"===e.axis){const l=n[t-1],a=n[t],r=l&&a?(l.left+l.width+a.left)/2:l?l.left+l.width:a?a.left:e.box.left,o=a??l??e.box;return{left:r-1,top:o.top,width:2,height:o.height}}const l=n[t-1],a=n[t],r=l&&a?(l.top+l.height+a.top)/2:l?l.top+l.height:a?a.top:e.box.top;return{left:e.box.left,top:r-1,width:e.box.width,height:2}}function T(e,t,n,l,a=()=>!1){const r=e.filter(e=>w(e.box,t,n)).sort((e,t)=>N(e.box)-N(t.box));for(const e of r){const r=S(e,t,n),o={...e.list,index:r};if(a(o))return null;if(l(o))return{zone:e,to:o,line:A(e,r)}}return null}function z(e,t=e.key){const n=[];for(let l=1;l<e.children.length;l++){const a=e.children[l-1],r=e.children[l],o=a.top+a.height;n.push({key:`${t}:${l}`,place:{...e.list,index:l},box:{left:e.box.left,top:o,width:e.box.width,height:Math.max(r.top-o,0)}})}return n}var C={nodes:[],zones:[]},E="data-puck-dropzone",L="data-puck-component";function O(e,t){if(e.length>=2){const[t,n]=e;return Math.abs(n.top-t.top)<Math.min(t.height,n.height)/2&&n.left>t.left?"x":"y"}const n=t.ownerDocument.defaultView?.getComputedStyle(t);return n&&n.display.includes("flex")&&n.flexDirection.startsWith("row")?"x":"y"}function j(e,t){const{frame:n,document:l}=e,a=e=>i(n,function(e){const t=e.getBoundingClientRect();return{left:t.left,top:t.top,width:t.width,height:t.height}}(e),t),r=[],o=[];for(const e of l.querySelectorAll(`[${E}]`)){const t=e.getAttribute(E)??"";let n;try{n=h(t)}catch{continue}const l=[...e.querySelectorAll(`[${L}]`)].filter(t=>t.parentElement?.closest(`[${E}]`)===e),s=l.map(a);o.push({key:t,list:n,box:a(e),axis:O(s,e),children:s}),l.forEach((e,t)=>{const l=e.getAttribute(L);l&&r.push({id:l,place:{...n,index:t},box:s[t]})})}return{nodes:r,zones:o}}var B=140,M=e=>({left:e.left,top:e.top,width:e.width,height:e.height});function K(i){const{canvas:d,session:u,readOnly:h,words:v=e.canvas}=i,w=p(i);m(()=>{w.current=i});const N=p(null),S=a(d),[A,z]=f(0),E=g(()=>z(e=>e+1),[]),[L,O]=f(C);m(()=>{const e=N.current;d&&e&&O((w.current.measure??j)(d,e))},[d,S,i.revision,A]);const B=i.model,K=b(()=>B(L),[B,L]),X=y(u.subscribe,u.shown,u.shown),[$,P]=f(null),[R,Y]=f(null),Z=p(null),_=()=>{Z.current&&clearTimeout(Z.current),Z.current=null},G=()=>{_(),Z.current=setTimeout(()=>{u.get()||P(null)},140)};m(()=>_,[]),r(d,"mousemove",e=>{const t=N.current;if(!d||!t||w.current.readOnly||u.get())return;_();const n=o(d.frame,e.clientX,e.clientY,t),l=s(t),a=D(K.sources,n.x/l,n.y/l);P(e=>e?.key===a?.key&&e?.box===a?.box?e:a)}),r(d,"mouseout",e=>{e.relatedTarget||G()}),r(d,"mouseover",e=>{e.relatedTarget||E()});const q=p(null),F=g(()=>{q.current?.(),q.current=null,Y(null)},[]);m(()=>u.subscribe(()=>{u.get()?E():F()}),[u,F,E]),m(()=>F,[F]);const H=e=>{const t=u.get(),n=N.current;if(!t||!n)return null;const a=c(n,e.clientX,e.clientY),r=T(K.zones,a.x,a.y,e=>w.current.canDrop(t.item,e),e=>!!t.from&&l(t.from,e));return r?{h:t,t:r}:null},I={onDragEnter:e=>{if(q.current)return;const l=t(e.currentTarget.parentElement?.parentElement??null);q.current=l?n(l):null},onDragOver:e=>{const t=H(e);if(!t)return void Y(null);e.preventDefault(),e.dataTransfer.dropEffect=/move|all|uninitialized/i.test(e.dataTransfer.effectAllowed)?"move":"copy";const n={zoneKey:t.t.zone.key,line:t.t.line,axis:t.t.zone.axis};Y(e=>e&&e.zoneKey===n.zoneKey&&e.line.left===n.line.left&&e.line.top===n.line.top?e:n)},onDragLeave:e=>{const t=e.relatedTarget;t&&e.currentTarget.contains(t)||Y(null)},onDrop:e=>{const t=H(e);t&&(e.preventDefault(),u.end(),F(),w.current.onDrop(t.h.item,t.t.to))}},Q={draggable:!h&&!!$,onMouseEnter:_,onMouseLeave:()=>!u.get()&&G(),onDragStart:e=>{if($&&!h){u.start({key:$.key,item:$.item,from:$.from}),e.dataTransfer.effectAllowed="move";try{e.dataTransfer.setData("text/plain",$.key)}catch{}}else e.preventDefault()},onDragEnd:()=>{u.end(),F()},onClick:()=>{$&&!h&&w.current.onPick?.($.item)}},{seams:U=[]}=K,V=K.zones.filter(e=>0===e.children.length);/* @__PURE__ */
-return x("div",{ref:N,className:"es-canvas-layer",children:[X||!i.onSeamAdd||h?null:U.map(e=>/* @__PURE__ */k("div",{className:"es-canvas-seam",style:{left:e.box.left,top:e.box.top+e.box.height/2-8,width:e.box.width,height:16},children:/* @__PURE__ */k("button",{type:"button",className:"es-canvas-seam-add",onClick:()=>i.onSeamAdd?.(e.place),children:v.addButton({label:i.seamLabel??v.addSection})})},e.key)),i.onZoneAdd&&!h?V.map(e=>/* @__PURE__ */k("button",{type:"button",className:R?.zoneKey===e.key?"es-canvas-empty is-over":"es-canvas-empty",style:M(e.box),onClick:()=>i.onZoneAdd?.({...e.list,index:0}),children:v.addButton({label:i.zoneAddLabel??v.addBlock})},e.key)):null,X?/* @__PURE__ */k("div",{className:"es-canvas-catch",...I}):null,R&&!V.some(e=>e.key===R.zoneKey)?/* @__PURE__ */k("div",{className:`es-canvas-line is-${R.axis}`,style:M(R.line)}):null,
-/* @__PURE__ */x("div",{className:["es-canvas-handle",$&&!h?"is-shown":"",X?"is-dragging":""].filter(Boolean).join(" "),style:$?{left:$.box.left+2,top:Math.max($.box.top-11,0)}:void 0,title:$?$.title??v.handle({label:$.label}):void 0,...Q,children:[
-/* @__PURE__ */k("span",{className:"es-canvas-grip","aria-hidden":"true",children:"⋮⋮"}),$?.label]})]})}var X=e=>e.tiles.length>0&&e.tiles.every(e=>null!=e.cover);function $({groups:t,session:n,itemFor:l,onInsert:a,at:r,hint:o,searchLabel:s,readOnly:i,words:c=e.add}){const h=o??c.hint,p=s??c.search,[m,g]=f(""),b=v(),y=m.trim().toLowerCase(),w=t.map(e=>({...e,tiles:y?e.tiles.filter(e=>((e,t)=>e.label.toLowerCase().includes(t)||(e.keywords??[]).some(e=>e.toLowerCase().includes(t)))(e,y)):e.tiles})).filter(e=>e.tiles.length>0);/* @__PURE__ */
+import{DEFAULT_DRAG_WORDS as e}from"../chunk-O2NLQBFX.js";import{scrollBoxOf as t,startAutoScroll as n,isNoOpDrop as l}from"../chunk-6PS6STGA.js";export{AUTO_SCROLL_EDGE,AUTO_SCROLL_MAX_SPEED,autoScrollDelta,autoScrollSpeed,createDragSession,dropOnRow,gapToMoveIndex,isNoOpDrop,scrollBoxOf,scrollParent,startAutoScroll,stepGap,useTreeDrag}from"../chunk-6PS6STGA.js";import{useCanvasLayout as a,useCanvasEvent as r}from"../chunk-MCLBHENY.js";import{framePointToHost as o,elementScale as s,frameRectToLayer as i,clientPointToLayer as c}from"../chunk-ZNCEOSXO.js";import{CloseIcon as d,SearchIcon as u}from"../chunk-PI26YXYD.js";import{parseZoneKey as h}from"../chunk-KRXQM65X.js";import"../chunk-NKB3KVAB.js";import{useRef as p,useEffect as m,useState as f,useCallback as g,useMemo as b,useSyncExternalStore as y,useId as v}from"react";import{jsxs as x,jsx as k}from"react/jsx-runtime";var w=(e,t,n)=>t>=e.left&&t<=e.left+e.width&&n>=e.top&&n<=e.top+e.height,N=e=>e.width*e.height;function D(e,t,n){let l=null;for(const a of e)w(a.box,t,n)&&(!l||N(a.box)<=N(l.box))&&(l=a);return l}function S(e,t,n){const l="x"===e.axis?t:n;let a=0;for(const t of e.children){l>("x"===e.axis?t.left+t.width/2:t.top+t.height/2)&&(a+=1)}return a}function A(e,t){const n=e.children;if("x"===e.axis){const l=n[t-1],a=n[t],r=l&&a?(l.left+l.width+a.left)/2:l?l.left+l.width:a?a.left:e.box.left,o=a??l??e.box;return{left:r-1,top:o.top,width:2,height:o.height}}const l=n[t-1],a=n[t],r=l&&a?(l.top+l.height+a.top)/2:l?l.top+l.height:a?a.top:e.box.top;return{left:e.box.left,top:r-1,width:e.box.width,height:2}}function T(e,t,n,l,a=()=>!1){const r=e.filter(e=>w(e.box,t,n)).sort((e,t)=>N(e.box)-N(t.box));for(const e of r){const r=S(e,t,n),o={...e.list,index:r};if(a(o))return null;if(l(o))return{zone:e,to:o,line:A(e,r)}}return null}function z(e,t=e.key){const n=[];for(let l=1;l<e.children.length;l++){const a=e.children[l-1],r=e.children[l],o=a.top+a.height;n.push({key:`${t}:${l}`,place:{...e.list,index:l},box:{left:e.box.left,top:o,width:e.box.width,height:Math.max(r.top-o,0)}})}return n}var C={nodes:[],zones:[]},E="data-puck-dropzone",L="data-puck-component";function O(e,t){if(e.length>=2){const[t,n]=e;return Math.abs(n.top-t.top)<Math.min(t.height,n.height)/2&&n.left>t.left?"x":"y"}const n=t.ownerDocument.defaultView?.getComputedStyle(t);return n&&n.display.includes("flex")&&n.flexDirection.startsWith("row")?"x":"y"}function j(e,t){const{frame:n,document:l}=e,a=e=>i(n,function(e){const t=e.getBoundingClientRect();return{left:t.left,top:t.top,width:t.width,height:t.height}}(e),t),r=[],o=[];for(const e of l.querySelectorAll(`[${E}]`)){const t=e.getAttribute(E)??"";let n;try{n=h(t)}catch{continue}const l=[...e.querySelectorAll(`[${L}]`)].filter(t=>t.parentElement?.closest(`[${E}]`)===e),s=l.map(a);o.push({key:t,list:n,box:a(e),axis:O(s,e),children:s}),l.forEach((e,t)=>{const l=e.getAttribute(L);l&&r.push({id:l,place:{...n,index:t},box:s[t]})})}return{nodes:r,zones:o}}var B=140,M=e=>({left:e.left,top:e.top,width:e.width,height:e.height});function K(i){const{canvas:d,session:u,readOnly:h,words:v=e.canvas}=i,w=p(i);m(()=>{w.current=i});const N=p(null),S=a(d),[A,z]=f(0),E=g(()=>z(e=>e+1),[]),[L,O]=f(C);m(()=>{const e=N.current;d&&e&&O((w.current.measure??j)(d,e))},[d,S,i.revision,A]);const B=i.model,K=b(()=>B(L),[B,L]),X=y(u.subscribe,u.shown,u.shown),[P,$]=f(null),[R,Y]=f(null),_=p(null),G=()=>{_.current&&clearTimeout(_.current),_.current=null},q=()=>{G(),_.current=setTimeout(()=>{u.get()||$(null)},140)};m(()=>G,[]),r(d,"mousemove",e=>{const t=N.current;if(!d||!t||w.current.readOnly||u.get())return;G();const n=o(d.frame,e.clientX,e.clientY,t),l=s(t),a=D(K.sources,n.x/l,n.y/l);$(e=>e?.key===a?.key&&e?.box===a?.box?e:a)}),r(d,"mouseout",e=>{e.relatedTarget||q()}),r(d,"mouseover",e=>{e.relatedTarget||E()});const I=p(null),Z=g(()=>{I.current?.(),I.current=null,Y(null)},[]);m(()=>u.subscribe(()=>{u.get()?E():Z()}),[u,Z,E]),m(()=>Z,[Z]);const F=e=>{const t=u.get(),n=N.current;if(!t||!n)return null;const a=c(n,e.clientX,e.clientY),r=T(K.zones,a.x,a.y,e=>w.current.canDrop(t.item,e),e=>!!t.from&&l(t.from,e));return r?{h:t,t:r}:null},Q={onDragEnter:e=>{if(I.current)return;const l=t(e.currentTarget.parentElement?.parentElement??null);I.current=l?n(l):null},onDragOver:e=>{const t=F(e);if(!t)return void Y(null);e.preventDefault(),e.dataTransfer.dropEffect=/move|all|uninitialized/i.test(e.dataTransfer.effectAllowed)?"move":"copy";const n={zoneKey:t.t.zone.key,line:t.t.line,axis:t.t.zone.axis};Y(e=>e&&e.zoneKey===n.zoneKey&&e.line.left===n.line.left&&e.line.top===n.line.top?e:n)},onDragLeave:e=>{const t=e.relatedTarget;t&&e.currentTarget.contains(t)||Y(null)},onDrop:e=>{const t=F(e);t&&(e.preventDefault(),u.end(),Z(),w.current.onDrop(t.h.item,t.t.to))}},U={draggable:!h&&!!P,onMouseEnter:G,onMouseLeave:()=>!u.get()&&q(),onDragStart:e=>{if(P&&!h){u.start({key:P.key,item:P.item,from:P.from}),e.dataTransfer.effectAllowed="move";try{e.dataTransfer.setData("text/plain",P.key)}catch{}}else e.preventDefault()},onDragEnd:()=>{u.end(),Z()},onClick:()=>{P&&!h&&w.current.onPick?.(P.item)}},{seams:V=[]}=K,H=K.zones.filter(e=>0===e.children.length);/* @__PURE__ */
+return x("div",{ref:N,className:"es-canvas-layer",children:[X||!i.onSeamAdd||h?null:V.map(e=>/* @__PURE__ */k("div",{className:"es-canvas-seam",style:{left:e.box.left,top:e.box.top+e.box.height/2-8,width:e.box.width,height:16},children:/* @__PURE__ */k("button",{type:"button",className:"es-canvas-seam-add",onClick:()=>i.onSeamAdd?.(e.place),children:v.addButton({label:i.seamLabel??v.addSection})})},e.key)),i.onZoneAdd&&!h?H.map(e=>/* @__PURE__ */k("button",{type:"button",className:R?.zoneKey===e.key?"es-canvas-empty is-over":"es-canvas-empty",style:M(e.box),onClick:()=>i.onZoneAdd?.({...e.list,index:0}),children:v.addButton({label:i.zoneAddLabel??v.addBlock})},e.key)):null,X?/* @__PURE__ */k("div",{className:"es-canvas-catch",...Q}):null,R&&!H.some(e=>e.key===R.zoneKey)?/* @__PURE__ */k("div",{className:`es-canvas-line is-${R.axis}`,style:M(R.line)}):null,
+/* @__PURE__ */x("div",{className:["es-canvas-handle",P&&!h?"is-shown":"",X?"is-dragging":""].filter(Boolean).join(" "),style:P?{left:P.box.left+2,top:Math.max(P.box.top-11,0)}:void 0,title:P?P.title??v.handle({label:P.label}):void 0,...U,children:[
+/* @__PURE__ */k("span",{className:"es-canvas-grip","aria-hidden":"true",children:"⋮⋮"}),P?.label]})]})}var X=e=>e.tiles.length>0&&e.tiles.every(e=>null!=e.cover);function P({groups:t,session:n,itemFor:l,onInsert:a,at:r,hint:o,searchLabel:s,readOnly:i,words:c=e.add}){const h=o??c.hint,p=s??c.search,[m,g]=f(""),b=v(),y=m.trim().toLowerCase(),w=t.map(e=>({...e,tiles:y?e.tiles.filter(e=>((e,t)=>e.label.toLowerCase().includes(t)||(e.keywords??[]).some(e=>e.toLowerCase().includes(t)))(e,y)):e.tiles})).filter(e=>e.tiles.length>0);/* @__PURE__ */
 return x("div",{className:"es-add",children:[r?/* @__PURE__ */x("div",{className:"es-add-at",role:"status",children:[
 /* @__PURE__ */k("span",{children:r.label}),
 /* @__PURE__ */k("button",{type:"button",className:"es-add-at-clear","aria-label":c.stop,title:c.stop,onClick:r.onClear,children:/* @__PURE__ */k(d,{size:12,"aria-hidden":"true"})})]}):null,
@@ -15,4 +15,4 @@ return x("div",{className:"es-add",children:[r?/* @__PURE__ */x("div",{className
 /* @__PURE__ */k("span",{className:"es-add-group-title",children:e.title}),
 /* @__PURE__ */k("span",{className:"es-add-group-count",children:e.tiles.length})]}),
 /* @__PURE__ */k("div",{className:X(e)?"es-add-grid is-cards":"es-add-grid",children:e.tiles.map(e=>{/* @__PURE__ */return x("button",{type:"button",className:null!=e.cover?"es-add-tile has-cover":"es-add-tile",draggable:!i,"aria-disabled":i||void 0,"aria-label":c.tile({label:e.label}),title:i?void 0:e.title??c.tile({label:e.label}),onDragStart:(t=e.type,e=>{if(i)e.preventDefault();else{n.start({key:`new:${t}`,item:l(t)}),e.dataTransfer.effectAllowed="copy";try{e.dataTransfer.setData("text/plain",t)}catch{}}}),onDragEnd:()=>n.end(),onClick:()=>!i&&a(e.type),children:[null!=e.cover?/* @__PURE__ */k("span",{className:"es-add-tile-cover","aria-hidden":"true",children:e.cover}):e.icon?/* @__PURE__ */k("span",{className:"es-add-tile-glyph","aria-hidden":"true",children:e.icon}):null,
-/* @__PURE__ */k("span",{className:"es-add-tile-label",children:e.label})]},e.type);var t})})]},e.title))]})}export{$ as AddPanel,K as CanvasDragLayer,C as EMPTY_MEASURE,B as HANDLE_GRACE_MS,T as canvasTarget,w as contains,S as gapInZone,A as gapLine,j as measureCanvas,D as pickSource,z as seamsBetween};
+/* @__PURE__ */k("span",{className:"es-add-tile-label",children:e.label})]},e.type);var t})})]},e.title))]})}export{P as AddPanel,K as CanvasDragLayer,C as EMPTY_MEASURE,B as HANDLE_GRACE_MS,T as canvasTarget,w as contains,S as gapInZone,A as gapLine,j as measureCanvas,D as pickSource,z as seamsBetween};

package/dist/edit-lock/index.d.ts

@@ -29,7 +29,7 @@ type LockWords = {
  *
  *   * `efficient-admin-portal/src/components/email/campaignEditLock.ts` — the
  *     campaign designer's copy, which alone had the TAKE-OVER half;
- *   * `efficient-shop/lib/editor-page-lock.ts` — the storefront editor's copy,
+ *   * `efficient-storefront/lib/editor-page-lock.ts` — the storefront editor's copy,
  *     which alone had the claim/heartbeat driver, the auth-rejection rule and
  *     the "a template has no lock" rule.
  *

package/dist/editor/index.d.ts

@@ -8,8 +8,8 @@ import { c as ResolveTrigger, a as ResolveCache, R as ResolvableItem } from '../
 import * as react from 'react';
 import { ReactNode, CSSProperties, ComponentType, ReactElement } from 'react';
 import { b as NodeOpsHost, C as ClipboardEntry } from '../useNodeOps-BF0fQsif.js';
-import { I as InspectorFields } from '../types-CEqUFH2j.js';
-import '../buckets-1vRlQceY.js';
+import { I as InspectorFields } from '../types-C7HFvdtk.js';
+import '../buckets-CuLM47h9.js';
 
 interface EditorOptions<C extends EditorConfig = EditorConfig> {
     config: C;

package/dist/fields/fields.css

@@ -18,7 +18,7 @@
   width: 100%;
   min-width: 0;
   height: 32px;
-  padding: 0 10px;
+  padding: 0 12px;
   border: 1px solid var(--es-input-border);
   border-radius: var(--es-field-radius);
   background: var(--es-field-bg);
@@ -41,22 +41,136 @@
 .es-fin--area {
   height: auto;
   min-height: 64px;
-  padding: 8px 10px;
+  padding: 8px 12px;
   resize: vertical;
 }
 
-/* ── a number: the box, its unit, − and + ─────────────────────────────────── */
+/* ── a number: the cell (plan step E4) ─────────────────────────────────────
+   icon · number · unit · two stacked arrows, in ONE box with react-os-shell's
+   Input look (32px tall, the shell's border and radius, 14px text). The ring
+   is on the whole cell while the number inside has focus, as the design draws
+   it: react-os-shell's blue-400 line and a 2px ring at 30%.
+
+   SPACING IS THE SCALE ONLY (2 / 4 / 8 / 12 / 16 / 32), read from the
+   `--es-space-*` tokens. The fallback after each is the same step, for a host
+   whose sheet is older than the scale. */
 
 .es-fnum {
+  box-sizing: border-box;
   display: flex;
-  align-items: center;
-  gap: 8px;
+  align-items: stretch;
+  gap: var(--es-space-4, 4px);
   width: 100%;
   min-width: 0;
+  height: 32px;
+  padding-inline: var(--es-space-8, 8px);
+  border: 1px solid var(--es-input-border);
+  border-radius: var(--es-field-radius);
+  background: var(--es-field-bg);
+  color: var(--es-field-text);
+}
+.es-fnum--arrows { padding-inline-end: 0; }
+.es-fnum:hover:not(.is-readonly):not(:focus-within) { border-color: var(--es-muted); }
+.es-fnum:focus-within {
+  border-color: var(--es-focus-line, #60a5fa);
+  box-shadow: 0 0 0 2px var(--es-focus-ring, rgba(96, 165, 250, 0.3));
+}
+.es-fnum.is-readonly { background: var(--es-track-bg); color: var(--es-muted); }
+
+.es-fnum-icon { display: flex; align-items: center; flex: none; color: var(--es-field-placeholder); }
+.es-fnum-icon svg { width: 14px; height: 14px; }
+
+.es-fnum-box {
+  flex: 1 1 auto;
+  min-width: 0;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  outline: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-size: 14px;
+  font-variant-numeric: tabular-nums;
+}
+.es-fnum-box::placeholder { color: var(--es-field-placeholder); opacity: 1; }
+/* A grey number follows the style: what shows is the style's, not the cell's. */
+.es-fnum.is-style .es-fnum-box { color: var(--es-field-placeholder); }
+
+.es-fnum-unit { align-self: center; flex: none; font-size: 12px; color: var(--es-muted); white-space: nowrap; }
+
+.es-fnum-arrows {
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  width: 18px;
+  border-left: 1px solid var(--es-line);
+}
+.es-fnum-arrow {
+  flex: 1 1 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--es-icon);
+  cursor: pointer;
+  touch-action: none;
+}
+.es-fnum-arrow--up {
+  border-bottom: 1px solid var(--es-line);
+  border-top-right-radius: calc(var(--es-field-radius) - 1px);
+}
+.es-fnum-arrow--down { border-bottom-right-radius: calc(var(--es-field-radius) - 1px); }
+.es-fnum-arrow:hover:not(:disabled) { background: var(--es-hover); color: var(--es-text); }
+.es-fnum-arrow:disabled { color: var(--es-disabled); cursor: default; }
+.es-fnum-arrow svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+
+/* ── a slider row (Site styles, Email styles; plan step E4) ────────────────
+   The name left and the value right on one line, the slider under them. The
+   value is a quiet box until it is hovered or has focus. */
+
+.es-fslider { display: flex; flex-direction: column; gap: var(--es-space-4, 4px); min-width: 0; }
+.es-fslider-top {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--es-space-8, 8px);
+  min-width: 0;
 }
-.es-fnum-box { flex: 0 1 96px; }
-.es-fnum-unit { font-size: 12px; color: var(--es-muted); }
-.es-fnum-steps { display: flex; gap: 4px; margin-left: auto; }
+.es-fslider-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--es-text-secondary);
+}
+.es-fslider-read { display: inline-flex; align-items: baseline; gap: var(--es-space-2, 2px); flex: none; }
+.es-fslider-value {
+  box-sizing: content-box;
+  width: 5ch;
+  padding: var(--es-space-2, 2px) var(--es-space-4, 4px);
+  border: 0;
+  border-radius: 4px;
+  outline: none;
+  background: none;
+  color: var(--es-field-text);
+  font: inherit;
+  font-size: 12.5px;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  cursor: text;
+}
+.es-fslider-value:hover { background: var(--es-hover); }
+.es-fslider-value:focus { background: var(--es-field-bg); box-shadow: inset 0 0 0 1px var(--es-focus-line, #60a5fa); }
+.es-fslider-value::placeholder { color: var(--es-field-placeholder); opacity: 1; }
+.es-fslider.is-style .es-fslider-value { color: var(--es-field-placeholder); }
+.es-fslider-unit { font-size: 12px; color: var(--es-field-placeholder); }
+.es-fslider-range { width: 100%; height: 18px; margin: 0; accent-color: var(--es-accent); }
 
 .es-fbtn {
   height: 28px;
@@ -116,7 +230,7 @@
 }
 .es-fsel-list:focus { outline: none; }
 .es-fsel-option {
-  padding: 7px 8px;
+  padding: 8px;
   border-radius: var(--es-field-radius);
   font-size: 12px;
   color: var(--es-text);
@@ -155,7 +269,7 @@
   justify-content: space-between;
   gap: 8px;
 }
-.es-list-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--es-text); }
+.es-list-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--es-text); }
 .es-list-count { font-size: 11px; color: var(--es-muted); }
 /* The rows are Layers' rows (tree.css); the list lets them reach the panel's
    edges the way Layers' do, so a row's hover reads as the same row. */
@@ -181,9 +295,9 @@
   align-self: flex-start;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   height: 28px;
-  padding: 0 8px 0 6px;
+  padding: 0 8px;
   border: 0;
   border-radius: var(--es-field-radius);
   background: var(--es-hover);

package/dist/fields/index.d.ts

@@ -1,8 +1,8 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
-import { S as SettingsBucket } from '../buckets-1vRlQceY.js';
-import { I as InspectorFields, a as InspectorFieldDef, F as FieldRenderer, b as FieldTextProps, c as FieldNumberProps, d as FieldSelectProps, e as FieldOption } from '../types-CEqUFH2j.js';
-export { A as ArrayFieldDef, C as CustomFieldDef, f as CustomFieldRenderProps, N as NumberFieldDef, O as ObjectFieldDef, R as RadioFieldDef, S as SelectFieldDef, g as SlotFieldDef, T as TextFieldDef, h as TextareaFieldDef } from '../types-CEqUFH2j.js';
+import { ReactNode, KeyboardEvent } from 'react';
+import { S as SettingsBucket } from '../buckets-CuLM47h9.js';
+import { I as InspectorFields, a as InspectorFieldDef, F as FieldRenderer, b as FieldTextProps, c as FieldNumberProps, d as FieldSliderProps, e as FieldSelectProps, f as FieldOption } from '../types-C7HFvdtk.js';
+export { A as ArrayFieldDef, C as CustomFieldDef, g as CustomFieldRenderProps, N as NumberFieldDef, O as ObjectFieldDef, R as RadioFieldDef, S as SelectFieldDef, h as SlotFieldDef, T as TextFieldDef, i as TextareaFieldDef } from '../types-C7HFvdtk.js';
 import { R as ResolvableItem } from '../resolve-D68pb3Bx.js';
 export { F as FieldsWords } from '../words-CD3WADyb.js';
 import '../types-41704JE4.js';
@@ -243,17 +243,65 @@ declare function FieldText({ id, value, onChange, placeholder, multiline, rows,
 declare function clampNumber(n: number, min?: number, max?: number): number;
 /** What a typed string means as a number: null for nothing or not-a-number. */
 declare function parseTyped(text: string): number | null;
+interface NumberEntryOptions {
+    value: number | undefined;
+    onChange: (value: number | undefined) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    shiftStep?: number;
+    styleValue?: number;
+    readOnly?: boolean;
+}
 /**
- * A number value (blueprint step 4.1): the shell box, an optional unit after it
- * and − / + beside it.
+ * What a typed number box does, shared by the number cell and the slider
+ * row's value, so the two cannot drift.
  *
  * It keeps the TYPED TEXT while you type, so "1." and "-" are allowed on the way
  * to a number, and writes only when the text is a number. It writes as you type
- * (the canvas follows), clamps to `min` / `max` when you leave the box, and
- * arrow keys and the two buttons move by `step` (default 1). An empty box writes
- * `undefined`: the setting goes back to the block's own.
+ * (the canvas follows). Enter or leaving the box clamps to `min` / `max`; Esc
+ * puts back the value the box had when you came in. ↑↓ move by `step`, Shift
+ * by `shiftStep` (ten steps unless the host says). An empty box writes
+ * `undefined`: the setting goes back to the style, whose number `styleValue`
+ * then shows, grey, and is where a step starts from.
+ */
+declare function useNumberEntry({ value, onChange, min, max, step, shiftStep, styleValue, readOnly }: NumberEntryOptions): {
+    inputProps: {
+        value: string;
+        readOnly: boolean;
+        placeholder: string | undefined;
+        onFocus: () => void;
+        onChange: (e: {
+            target: {
+                value: string;
+            };
+        }) => void;
+        onBlur: () => void;
+        onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    };
+    nudge: (dir: 1 | -1, big?: boolean) => void;
+    set: (n: number | undefined) => void;
+    /** Nothing of its own: the style's number shows, grey. */
+    isStyle: boolean;
+};
+/**
+ * A number value (blueprint step 4.1; the cell, plan step E4): one box holding
+ * an optional icon, the number, an optional unit and, with `steppers`, two
+ * small stacked arrows. What the typing, the keys and the arrows do is
+ * {@link useNumberEntry}'s.
+ */
+declare function FieldNumber({ id, value, onChange, min, max, step, shiftStep, styleValue, icon, unit, steppers, placeholder, readOnly, ariaLabel, ariaLabelledBy, }: FieldNumberProps): react.JSX.Element;
+
+/**
+ * A slider row (plan step E4), for Site styles and Email styles: the name on
+ * the left and the value on the right on one line, the slider under them.
+ *
+ * The value is typed and takes ↑↓ (Shift = ten steps), exactly as the number
+ * cell does — it is the same {@link useNumberEntry} — and may go past the
+ * slider's own travel (`sliderMin` / `sliderMax`); only `min` / `max` hold it.
+ * The slider then rests at its end. A grey value follows the style.
  */
-declare function FieldNumber({ id, value, onChange, min, max, step, unit, steppers, placeholder, readOnly, ariaLabel, ariaLabelledBy, }: FieldNumberProps): react.JSX.Element;
+declare function FieldSlider({ id, label, value, onChange, min, max, step, shiftStep, styleValue, unit, sliderMin, sliderMax, readOnly, }: FieldSliderProps): react.JSX.Element;
 
 /** The option a stored value names: equal by `Object.is`, so `0`, `false` and `''` are values too. */
 declare function optionFor<V>(options: readonly FieldOption<V>[], value: V | undefined): FieldOption<V> | undefined;
@@ -270,4 +318,4 @@ declare function optionFor<V>(options: readonly FieldOption<V>[], value: V | und
  */
 declare function FieldSelect<V>({ id, value, options, onChange, placeholder, readOnly, ariaLabel, ariaLabelledBy, }: FieldSelectProps<V>): react.JSX.Element;
 
-export { FieldNumber, FieldNumberProps, FieldOption, type FieldPlan, FieldRenderer, FieldSelect, FieldSelectProps, FieldText, FieldTextProps, type FieldsBlock, Inspector, InspectorField, InspectorFieldDef, type InspectorFieldProps, InspectorFields, type InspectorProps, ListField, type ListFieldProps, type PlannedRow, type ResolvedFieldsInput, SettingsBucket, bucketsOf, clampNumber, copyItem, insertAt, labelOf, moveTo, optionFor, parseTyped, planFields, removeAt, useResolvedFields };
+export { FieldNumber, FieldNumberProps, FieldOption, type FieldPlan, FieldRenderer, FieldSelect, FieldSelectProps, FieldSlider, FieldSliderProps, FieldText, FieldTextProps, type FieldsBlock, Inspector, InspectorField, InspectorFieldDef, type InspectorFieldProps, InspectorFields, type InspectorProps, ListField, type ListFieldProps, type NumberEntryOptions, type PlannedRow, type ResolvedFieldsInput, SettingsBucket, bucketsOf, clampNumber, copyItem, insertAt, labelOf, moveTo, optionFor, parseTyped, planFields, removeAt, useNumberEntry, useResolvedFields };