efficient-easel 0.100.0 → 0.101.1

package/dist/drag/index.js

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

package/dist/fields/fields.css

@@ -349,9 +349,13 @@
 .es-insp-row:empty,
 .es-insp-row[hidden] { display: none; }
 
-/* ── a list (ListField, 4.2): Layers' own rows, an add button, an open item ── */
+/* ── a list (ListField): ONE look in both editors (owner, 2026-10-06) ────────
+   The website ticker's rows: one row per item, a × at its end, "+ Add <noun>"
+   under the last. The whole row drags (no grip); a many-field item opens under
+   its own row. Sizes from the ticker (.sf-textlist): a 32px row, a 28 × 32 ×.
+   Gaps are the spacing scale: 8 between rows (the seam IS the gap), 4 inside. */
 
-.es-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-top: max(var(--es-row-gap), var(--es-rhythm-between)); }
+.es-list { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-top: max(var(--es-row-gap), var(--es-rhythm-between)); }
 .es-list-head {
   display: flex;
   align-items: baseline;
@@ -359,40 +363,191 @@
   gap: 8px;
 }
 .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. */
-.es-list-tree { margin: 0 -8px; }
-/* …but the list is NOT a scroll box, as Layers is (`.es-tree { overflow-y:
-   auto }`): the panel around it scrolls. A row's drag hint hangs 4px under the
-   row, 22px tall, and under the LAST row the tree has less room than that: it
-   clipped the hint to 8px (second host, 2026-10-07). What overflowed also
-   made the list a scroller of its own inside the panel: a wheel over it moved
-   the rows 14px, and it was the nearest box that scrolled, so a drag in the
-   list scrolled IT at its edges, not the panel. Measured in Chrome
-   (scripts/second-host-clickthrough.mjs). Two classes, so it wins whichever
-   sheet loads last. */
-.es-tree.es-list-tree { overflow: visible; }
+.es-list-count { font-size: 11px; color: var(--es-muted); font-variant-numeric: tabular-nums; }
 
-.es-list-add {
+/* A host's bar for the row in use, between the name and the rows. */
+.es-list-above { min-width: 0; }
+
+/* The rows: a column with no gap of its own, because the seams between rows
+   are the gap (tree.css `.es-tree-seam`, one rule for both). NOT a scroll box,
+   and not Layers' `.es-tree` (which is one): the panel around the list scrolls.
+   Inside a scroll box of its own the drag hint under the last row was clipped
+   and the list scrolled by itself under a wheel (second host, 2026-10-07). */
+.es-list-rows { display: flex; flex-direction: column; min-width: 0; --es-rhythm-between: 8px; }
+.es-list-rows > .es-tree-seam:last-child { margin-top: -8px; }
+.es-list-entry { display: flex; flex-direction: column; min-width: 0; }
+
+.es-list-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  min-height: 32px;
+  border-radius: var(--es-row-radius);
+  --es-row-scrim: var(--es-panel);
+}
+.es-list-row.is-draggable { cursor: grab; }
+.es-list-row.is-item { padding-left: 8px; }
+/* A row whose own control is not a text box (a name, a picture) reads as a row. */
+.es-list-row.is-inline:not(:has(input, textarea, [contenteditable])) { padding-left: 8px; }
+.es-list-row.is-inline:not(:has(input, textarea, [contenteditable])):hover { --es-row-scrim: var(--es-hover); background: var(--es-row-scrim); }
+.es-list-row.is-item:hover,
+.es-list-row.is-open { --es-row-scrim: var(--es-hover); background: var(--es-row-scrim); }
+.es-list-row.is-dragging { opacity: 0.4; }
+.es-list-row.is-lifting { background: var(--es-raised); box-shadow: 0 8px 20px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.1); }
+.es-list-row:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 1px; }
+/* The one drop line, in the middle of the 8px gap — where a seam draws its own. */
+.es-list-row.is-drop-before::before,
+.es-list-row.is-drop-after::after {
+  content: "";
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--es-accent);
+  pointer-events: none;
+}
+.es-list-row.is-drop-before::before { top: -5px; }
+.es-list-row.is-drop-after::after { bottom: -5px; }
+
+/* The row's own control (renderRow): it fills the row up to the ×. */
+.es-list-row-main { flex: 1 1 auto; min-width: 0; min-height: 32px; display: flex; align-items: center; font-size: 12px; color: var(--es-text); }
+.es-list-row-main > * { flex: 1 1 auto; min-width: 0; }
+
+/* A many-field item: its name, its summary, a chevron that turns when open. */
+.es-list-open {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
   height: 32px;
-  border: 1px dashed var(--es-btn-border);
-  border-radius: var(--es-field-radius);
+  padding: 0;
+  border: 0;
   background: none;
-  color: var(--es-text-secondary);
+  color: var(--es-text);
   font: inherit;
   font-size: 12px;
+  text-align: left;
+  cursor: inherit;
+}
+.es-list-open:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 1px; border-radius: 4px; }
+.es-list-thumb { flex: none; display: inline-flex; align-items: center; }
+.es-list-row-name { flex: none; font-weight: 600; white-space: nowrap; }
+.es-list-row-summary { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--es-muted); }
+.es-list-chev { flex: none; color: var(--es-icon); transition: transform 0.12s; }
+.es-list-row.is-open .es-list-chev { transform: rotate(90deg); }
+
+.es-list-x {
+  flex: none;
+  width: 28px;
+  height: 32px;
+  border: 0;
+  border-radius: var(--es-row-radius);
+  background: transparent;
+  color: var(--es-muted);
+  font: inherit;
+  font-size: 16px;
+  line-height: 1;
   cursor: pointer;
 }
-.es-list-add:hover:not(:disabled) { background: var(--es-hover); }
+.es-list-x:hover:not(:disabled) { background: var(--es-danger-tint); color: var(--es-danger); }
+.es-list-x:disabled { color: var(--es-disabled); cursor: default; }
+.es-list-x:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 2px; }
+.es-list-lock {
+  flex: none;
+  width: 28px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--es-disabled);
+}
+
+/* What a draggable row says after 0.7 s on it — Layers' hint, never over a text box. */
+.es-list-hint {
+  position: absolute;
+  left: 8px;
+  top: calc(100% + 4px);
+  z-index: 5;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: var(--es-toast-bg);
+  color: var(--es-on-accent);
+  font-size: 11px;
+  line-height: 1.3;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+.es-list-row.is-draggable:hover:not(:has(input:hover, textarea:hover, [contenteditable]:hover)) .es-list-hint {
+  opacity: 1;
+  transition-delay: 0.7s;
+}
+.es-list-row.is-dragging .es-list-hint,
+.es-list-row.is-lifting .es-list-hint { display: none; }
+
+/* The open item, under its row: its own settings, indented on a hairline. */
+.es-list-item {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 4px 0 8px 8px;
+  padding: 0 8px 4px 12px;
+  border-left: 2px solid var(--es-line);
+}
+.es-list-item > :first-child { margin-top: 0; }
+
+.es-list-add {
+  align-self: flex-start;
+  padding: 4px 2px;
+  border: 0;
+  background: none;
+  color: var(--es-accent);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+.es-list-add:hover:not(:disabled) { text-decoration: underline; }
 .es-list-add:disabled { color: var(--es-disabled); cursor: default; }
-.es-list-add:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 1px; }
-
-/* An item opened: the way back (chrome's InspectorUpLevel, inline), its name,
-   its own settings, its two actions. */
-.es-list.is-open { gap: 12px; }
-.es-list-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
-.es-list-name { font-size: 14px; font-weight: 600; color: var(--es-text); }
-.es-list-item { min-width: 0; }
-.es-list-item-actions { display: flex; gap: 8px; margin-top: 8px; }
+.es-list-add:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 2px; }
+
+/* Read out after a move; never seen. */
+.es-list-said { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
 .es-fbtn--danger { color: var(--es-danger); }
+
+/* ── the link picker (LinkPicker, [MERGE] One Link Picker For Both Editors) ──
+   The mockup's stack (owner, 2026-10-06): Link type, the target, and on the
+   listing Filter and Value — one box under the next, the whole width of the
+   row, 8px apart (the spacing scale). The same stack at 320px and at 220px:
+   nothing beside anything, so nothing is cut off mid-word in the narrow
+   panel. Every box is `FieldSelect` or `.es-fin`; this adds only the stack and
+   the two quiet lines under it. */
+.es-flink {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+/* Inside a SettingsField the slot is a flex ROW, and a column box written for
+   a block row sizes to its own content there (291px became 117px in the shop
+   when its link stack sat in the slot). Fill the slot instead. */
+.es-field-ctl > .es-flink {
+  flex: 1 1 auto;
+}
+.es-flink > .es-fin[aria-invalid='true'] {
+  border-color: var(--es-danger);
+}
+.es-flink-error,
+.es-flink-hint {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.45;
+}
+.es-flink-error { color: var(--es-danger); }
+.es-flink-hint { color: var(--es-muted); }

package/dist/fields/index.d.ts

@@ -4,7 +4,7 @@ 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 FieldSelectManyProps, f as FieldSelectOneProps, g as FieldOption } from '../types-VqL6t5HH.js';
 export { A as ArrayFieldDef, C as CustomFieldDef, h as CustomFieldRenderProps, i as FieldSelectProps, N as NumberFieldDef, O as ObjectFieldDef, R as RadioFieldDef, S as SelectFieldDef, j as SlotFieldDef, T as TextFieldDef, k as TextareaFieldDef } from '../types-VqL6t5HH.js';
 import { R as ResolvableItem } from '../resolve-D68pb3Bx.js';
-export { F as FieldsWords } from '../words-CzoyDNHm.js';
+export { F as FieldsWords } from '../words-D8kf071T.js';
 import '../types-41704JE4.js';
 
 interface InspectorProps {
@@ -178,26 +178,37 @@ declare function useResolvedFields({ id, node, block, parent, appState }: Resolv
 };
 
 /**
- * A LIST VALUE (blueprint step 4.2) — slides, buttons, links, any `array`
- * field — drawn the way Layers draws a page: one row per item, the same rows,
- * the same drag (the whole row picks up), the same ⌥↑ / ⌥↓, and a "+" between
- * two rows that adds one there. Pressing a row opens that item in the panel,
- * with a way back at the top.
+ * A LIST VALUE — slides, buttons, links, lines of copy, any `array` field —
+ * drawn ONE way in both editors (owner, 2026-10-06: "the ticker look"). One row
+ * per item with a × at its end, and "+ Add <noun>" under the last row.
  *
- * It replaces Puck's ArrayField, which drew its own look and ran its own drag.
- * THE DATA DOES NOT CHANGE: a list is the array Puck stored, and every write is
- * that array with an item added, moved, copied or taken out. No id is added to
- * an item (Puck's `_arrayId` lived in its UI state, never in the data, and so
- * does a row's key here — its position).
+ *   one field   `renderRow` puts the host's own control IN the row (the
+ *               ticker's text box): nothing to open, the item is edited where
+ *               it stands;
+ *   many fields the row is the item's name and summary; pressing it opens the
+ *               item IN PLACE, under its row, one at a time (the owner's pick
+ *               A of the 2026-10-06 mockup — the drill-in page is gone).
  *
- * CONTROLLED, both the list and which item is open: the Inspector holds them,
- * so an editor can keep the open item across a re-render of the panel.
+ * REORDER IS NEVER CUT TO FIT THE LOOK. The WHOLE ROW drags — no grip (owner,
+ * 2026-09-29) — a text box in it too, until the caret is in that box: from
+ * then on a press there selects text. Alt+↑ /
+ * Alt+↓ move it from the keyboard, the caret in the text box included, and the
+ * caret goes with the item. The right-click menu (or Shift+F10) offers Move up,
+ * Move down, Duplicate and Delete, and only what the row can do. The count, the
+ * "+" between two rows and Duplicate stay, as Layers keeps them.
  *
- * Its words ("Add slide", "2 of 5", the rows' drag hint) are the strings
- * provider's — `EaselStrings.fields.list` and `.tree` — English with none.
+ * THE DATA DOES NOT CHANGE: a list is the array the document stored, and every
+ * write is that array with an item added, moved, copied, changed or taken out.
+ * No id is added to an item; a row's key is its position.
+ *
+ * CONTROLLED, the list and which item is open: the Inspector holds them, so an
+ * editor can keep the open item across a re-render of the panel.
+ *
+ * Its words are the strings provider's — `EaselStrings.fields.list` and
+ * `.tree` — English with none.
  */
 interface ListFieldProps<T> {
-    /** The list's name, e.g. "Slides". Also the way back's word: "← Slides" (`InspectorUpLevel`). */
+    /** The list's name, e.g. "Slides". */
     label: string;
     /** A glyph before the name, as a settings row wears one. */
     icon?: ReactNode;
@@ -216,11 +227,37 @@ interface ListFieldProps<T> {
     min?: number;
     max?: number;
     readOnly?: boolean;
-    /** The item open in the panel, by position, or null for the list. */
+    /** The item open under its row, by position, or null. */
     open: number | null;
     onOpen: (index: number | null) => void;
-    /** The open item's own settings. `change` writes the item. */
+    /** The open item's own settings, drawn under its row. `change` writes the item. */
     renderItem: (item: T, index: number, change: (next: T) => void) => ReactNode;
+    /**
+     * The row's own control, for an item that is ONE value (a line of copy): the
+     * row holds it, and nothing opens. `change` writes the item.
+     */
+    renderRow?: (item: T, index: number, change: (next: T) => void) => ReactNode;
+    /** May this item be taken out? False: no ×, a lock, no Delete — it still moves (the email's Unsubscribe). */
+    canRemove?: (item: T, index: number) => boolean;
+    /** Why a locked item cannot be taken out — the lock's tooltip. Default `fields.list.locked`. */
+    lockedReason?: (item: T, index: number) => string;
+    /** A set that is never added to or taken from (the phone column order): it only moves. */
+    fixed?: boolean;
+    /**
+     * False: an item is deleted INSIDE (its own page, as a Locations group is),
+     * never from its row — no ×, no lock, no Delete in the menu. Default true.
+     */
+    removeOnRow?: boolean;
+    /** May this item be copied? False: no Duplicate in the menu (a copy that would merge with its original). Default: yes. */
+    canDuplicate?: (item: T, index: number) => boolean;
+    /** Drawn once, under the list's name and above its rows — a bar that acts on the row in use (the ticker's formatting bar). */
+    above?: ReactNode;
+    /**
+     * False: no head of the list's own — the host draws the list inside a
+     * settings row that already names it (a `SettingsField` with its glyph and
+     * hint), and shows the count in that row's `value`. Default true.
+     */
+    head?: boolean;
 }
 /** The list with `item` put at `index`. */
 declare function insertAt<T>(items: readonly T[], index: number, item: T): T[];
@@ -233,7 +270,7 @@ declare function removeAt<T>(items: readonly T[], index: number): T[];
  * writes through to the original (a list item is JSON — Puck stored it so).
  */
 declare function copyItem<T>(item: T): T;
-declare function ListField<T>({ label, icon, noun: ownNoun, items, onChange, newItem, summary, itemName, thumb, min, max, readOnly, open, onOpen, renderItem, }: ListFieldProps<T>): react.JSX.Element;
+declare function ListField<T>({ label, icon, noun: ownNoun, items, onChange, newItem, summary, itemName, thumb, min, max, readOnly, open, onOpen, renderItem, renderRow, canRemove: removable, lockedReason, fixed, removeOnRow, canDuplicate, above, head, }: ListFieldProps<T>): react.JSX.Element;
 
 /**
  * A text value: the shell's own box, one line or several (blueprint step 4.1,
@@ -356,4 +393,112 @@ declare function optionFor<V>(options: readonly FieldOption<V>[], value: V | und
 declare function FieldSelect<V>(props: FieldSelectManyProps<V>): ReactNode;
 declare function FieldSelect<V>(props: FieldSelectOneProps<V>): ReactNode;
 
-export { FieldNumber, FieldNumberProps, FieldOption, type FieldPlan, FieldRenderer, FieldSelect, FieldSelectManyProps, FieldSelectOneProps, 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 };
+/** One thing a link can point at: the URL it writes and the name it shows. */
+type LinkOption = {
+    value: string;
+    label: string;
+};
+/** Options under one heading — the anchors of one page. */
+type LinkOptionGroup = {
+    label: string;
+    options: readonly LinkOption[];
+};
+/** One filter on a link onto the product listing, or none. */
+type LinkFilter = {
+    param: string;
+    value: string;
+} | null;
+/** A filter a listing link may offer, with the values it may take. */
+type LinkFilterField = {
+    param: string;
+    label: string;
+    values: readonly LinkOption[];
+};
+/** What a kind's target box is: a list, a list in groups, or a typed address. */
+type LinkTarget = {
+    type: 'select';
+    options: readonly LinkOption[];
+    placeholder: string;
+} | {
+    type: 'groups';
+    groups: readonly LinkOptionGroup[];
+    placeholder: string;
+} | {
+    type: 'text';
+};
+/** One entry of the Link type list, with everything its target box offers. */
+type LinkKindChoice = {
+    /** The kind's key — what `rules.kindOf` answers. */
+    value: string;
+    /** Its name in the list ("Page", "Blog post"), and its target box's name. */
+    label: string;
+    target: LinkTarget;
+    /** A quiet line under the boxes while this kind is chosen. */
+    hint?: string;
+    /** Left out of the list while its target has nothing to pick — unless the
+     *  saved link is this kind, so a link is never shown as something it is not. */
+    hideWhenEmpty?: boolean;
+};
+/**
+ * Everything the picker needs to know about a URL — and it knows nothing else.
+ * A host hands in its own rules (the storefront's come from
+ * `efficient-web-builder/links`), so a new kind or a new filter never changes
+ * this file.
+ */
+type LinkRules = {
+    /** Which kind a saved URL is. */
+    kindOf: (url: string) => string;
+    /** The target a URL points at, with any listing filter taken off. */
+    targetOf: (url: string) => string;
+    /** The filter a URL carries onto the listing, or null. */
+    readFilter: (url: string) => LinkFilter;
+    /** The URL of a target with this filter written on (or cleared). */
+    withFilter: (url: string, filter: LinkFilter) => string;
+    /** May this typed address be saved? */
+    isSafe: (url: string) => boolean;
+};
+type LinkPickerProps = {
+    /** The saved link, or `''`. */
+    value: string;
+    /**
+     * The new link, and — when a thing was PICKED — its name, so a host can fill
+     * its own label with it (the admin's menu item does). No name when the link
+     * was typed or cleared.
+     */
+    onChange: (url: string, name?: string) => void;
+    /** The Link type list, in order, each with what its target box offers. */
+    kinds: readonly LinkKindChoice[];
+    rules: LinkRules;
+    /**
+     * The filters a link onto this target may carry, or null when the target is
+     * not the product listing. Asked only for a kind whose target is a list.
+     */
+    filtersFor?: (target: string) => readonly LinkFilterField[] | null;
+    /** The whole control's accessible name — "Button link", "Where “Wheels” goes". */
+    label?: string;
+    readOnly?: boolean;
+};
+/**
+ * ONE LINK PICKER ([MERGE] One Link Picker For Both Editors, owner
+ * 2026-10-06; mockup https://claude.ai/artifact/6mVmY5787gnXdSWP3syqhu v4): a
+ * type — Page / Anchor / Blog post / Product / Custom URL — then which one; on
+ * the product listing a Filter and then a Value. The website editor's Link
+ * field and the admin's menu item draw this same control.
+ *
+ * IT HOLDS NO URL RULE. Which kind a link is, which page it points at, what
+ * filter it carries and how one is written, which typed address is unsafe —
+ * all of it is `rules`, and every option and every name is the host's. Only
+ * the order of the boxes and how they answer each other is decided here.
+ *
+ * It never writes on its own. Opening a saved link writes nothing; a target,
+ * filter or value the host no longer offers is shown as "(unavailable)" and
+ * kept, never silently replaced.
+ *
+ * Every list is `FieldSelect`, the editor's one pop-up list — the anchors
+ * under one heading per page (`FieldOption.group`), a long list with a search
+ * box — never the browser's `<select>`. The boxes stack, one under the next,
+ * at every panel width.
+ */
+declare function LinkPicker({ value, onChange, kinds, rules, filtersFor, label, readOnly }: LinkPickerProps): react.JSX.Element | null;
+
+export { FieldNumber, FieldNumberProps, FieldOption, type FieldPlan, FieldRenderer, FieldSelect, FieldSelectManyProps, FieldSelectOneProps, FieldSlider, FieldSliderProps, FieldText, FieldTextProps, type FieldsBlock, Inspector, InspectorField, InspectorFieldDef, type InspectorFieldProps, InspectorFields, type InspectorProps, type LinkFilter, type LinkFilterField, type LinkKindChoice, type LinkOption, type LinkOptionGroup, LinkPicker, type LinkPickerProps, type LinkRules, type LinkTarget, ListField, type ListFieldProps, type NumberEntryOptions, type PlannedRow, type ResolvedFieldsInput, SettingsBucket, bucketsOf, clampNumber, copyItem, insertAt, labelOf, moveTo, optionFor, parseTyped, planFields, removeAt, useNumberEntry, useResolvedFields };