efficient-easel 19.3.0 → 20.1.0

package/dist/chunk-ZO3UUK45.js

@@ -1,18 +0,0 @@
-import{DEFAULT_DRAG_WORDS as e}from"./chunk-KAML3KQH.js";import{dropEffectFor as t,scrollBoxOf as n,frameScrollBox as l,startAutoScroll as a,isNoOpDrop as r}from"./chunk-67GNT6PF.js";import{withTip as o}from"./chunk-P2VEMZH5.js";import{useCanvasLayout as s,useCanvasTyping as i,useCanvasEvent as c,CANVAS_TYPABLE_EVENT as d,framePointToHost as u,elementScale as h,frameRectToLayer as f,clientPointToLayer as p}from"./chunk-X4T6JT3M.js";import{parseZoneKey as m,ROOT_ID as g}from"./chunk-KRXQM65X.js";import{useRef as x,useEffect as b,useState as y,useCallback as v,useMemo as w,useSyncExternalStore as k,useId as N,useLayoutEffect as A}from"react";import{Tooltip as D,IconButton as T,solidSurfaceStyle as z,Input as M}from"efficient-shell/ui";import{AddIcon as $,CloseIcon as C,SearchIcon as E}from"efficient-shell/icons/efficient";import{jsxs as S,jsx as j}from"react/jsx-runtime";function L({label:e,onInsert:t,style:n,axis:l="y",className:a,index:r}){const o=["es-canvas-insert","x"===l?"is-x":"",a??""].filter(Boolean).join(" ");/* @__PURE__ */
-return S("div",{className:o,style:n,"data-index":r,children:[
-/* @__PURE__ */j("span",{className:"es-canvas-insert-line","aria-hidden":"true"}),
-/* @__PURE__ */j("span",{className:"es-canvas-insert-chip",children:/* @__PURE__ */j(D,{content:e,children:/* @__PURE__ */j(T,{variant:"ghost",size:"sm","aria-label":e,onClick:t,children:/* @__PURE__ */j($,{})})})})]})}var B=(e,t,n)=>t>=e.left&&t<=e.left+e.width&&n>=e.top&&n<=e.top+e.height,K=e=>e.width*e.height;function O(e,t,n){return e.map((e,t)=>({s:e,at:t})).filter(({s:e})=>B(e.box,t,n)).sort((e,t)=>K(t.s.box)-K(e.s.box)||e.at-t.at).map(({s:e})=>e)}function X(e,t,n){return O(e,t,n).at(-1)??null}function I(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 q(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 P(e,t,n,l,a=()=>!1,r=()=>!0){const o=e.filter(e=>B(e.box,t,n)).sort((e,t)=>K(e.box)-K(t.box));for(const e of o){const o=I(e,t,n),s={...e.list,index:o};if(a(s))return null;if(l(s))return{zone:e,to:s,line:q(e,o)};if(!r(s))return null}return null}function Y(e,t,n=12){const l=e.children;if(0===l.length)return[];const a=e.box,r="x"===e.axis,o=r?a.left:a.top,s=o+(r?a.width:a.height),i=e=>r?e.left:e.top,c=e=>r?e.left+e.width:e.top+e.height,d=[];for(let a=0;a<=l.length;a++){const u=l[a-1],h=l[a];let f,p;if(u&&h)f=c(u),p=Math.max(i(h)-f,0);else{const e=u?(c(u)+s)/2:(o+i(h))/2,t=Math.min(Math.max(e,o+n),s-n);f=u?Math.max(t,c(u)):Math.min(t,i(h)),p=0}const m=[u,h].filter(e=>Boolean(e)),g=Math.min(...m.map(e=>r?e.top:e.left)),x=Math.max(...m.map(e=>r?e.top+e.height:e.left+e.width)),b=r?{left:f,top:g,width:p,height:x-g}:{left:g,top:f,width:x-g,height:p};d.push({key:`${e.key}:+${a}`,place:{...e.list,index:a},box:b,axis:e.axis,label:t})}return d}function H(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 R={nodes:[],zones:[]},Z="data-puck-dropzone",F="data-puck-component";function Q(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 V(e,t){const{frame:n,document:l}=e,a=e=>f(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(`[${Z}]`)){const t=e.getAttribute(Z)??"";let n;try{n=m(t)}catch{continue}const l=[...e.querySelectorAll(`[${F}]`)].filter(t=>t.parentElement?.closest(`[${Z}]`)===e),s=l.map(a);o.push({key:t,list:n,box:a(e),axis:Q(s,e),children:s}),l.forEach((e,t)=>{const l=e.getAttribute(F);l&&r.push({id:l,place:{...n,index:t},box:s[t]})})}return{nodes:r,zones:o}}var G="data-es-empty-cell",J="data-puck-dropzone",W=140;var U=e=>({left:e.left,top:e.top,width:e.width,height:e.height});function _(o){const{canvas:f,session:m,readOnly:N,words:T=e.canvas}=o,M=x(o);b(()=>{M.current=o});const $=x(null),C=s(f),[E,B]=y(0),K=v(()=>B(e=>e+1),[]),[X,I]=y(R);b(()=>{const e=$.current;f&&e&&I((M.current.measure??V)(f,e))},[f,C,o.revision,E]);const q=o.model,Y=w(()=>q(X),[q,X]),H=k(m.subscribe,m.shown,m.shown),Z=o.choose,F=(e,t)=>{const n=O(Y.sources,e,t);return 0===n.length?null:Z?Z(n):n[n.length-1]},[Q,W]=y(null),[_,ee]=y(null),[te,ne]=y(null),le=x(null),ae=()=>{le.current&&clearTimeout(le.current),le.current=null},re=()=>{ae(),le.current=setTimeout(()=>{m.get()||W(null)},140)};b(()=>ae,[]);const oe=x(null),se=i(f),ie=x(!1);ie.current=se,b(()=>{se&&(ae(),W(null))},[se]);const[ce,de]=y(null);c(f,d,e=>de(e.detail?.id??null));const ue=!ce||se||N||H?null:X.nodes.find(e=>e.id===ce)?.box??null;c(f,"mousemove",e=>{const t=$.current;if(!f||!t)return;const n=u(f.frame,e.clientX,e.clientY,t),l=h(t),a={x:n.x/l,y:n.y/l};if(oe.current=a,M.current.readOnly||m.get()||ie.current)return;ae();const r=F(a.x,a.y);W(e=>e?.key===r?.key&&e?.box===r?.box?e:r)}),c(f,"mouseout",e=>{e.relatedTarget||(oe.current=null,re())}),c(f,"mouseover",e=>{e.relatedTarget||K()});const he=x(null),fe=v(()=>{he.current?.(),he.current=null,ee(null),ne(null)},[]);b(()=>m.subscribe(()=>{m.get()?K():fe()}),[m,fe,K]),b(()=>fe,[fe]),("undefined"==typeof document?b:A)(()=>{if(m.get())return;const e=oe.current;W(t=>N||ie.current?null:e?F(e.x,e.y):t?Y.sources.find(e=>e.key===t.key)??null:null)},[Y,H,m,N,Z]);const pe=e=>{const t=m.get(),n=$.current,l=M.current.dropOn;if(!t||!n||!l)return null;const a=p(n,e.clientX,e.clientY);oe.current=a;const r=O(Y.sources,a.x,a.y);for(let e=r.length-1;e>=0;e-=1)if(l.accepts(t.item,r[e]))return{h:t,source:r[e]};return null},me=e=>{const t=m.get(),n=$.current;if(!t||!n)return null;const l=p(n,e.clientX,e.clientY);oe.current=l;const a=P(Y.zones,l.x,l.y,e=>M.current.canDrop(t.item,e),e=>!!t.from&&r(t.from,e),e=>M.current.fallThrough?.(t.item,e,t.from)??!0);return a?{h:t,t:a}:null},ge={onDragEnter:e=>{if(he.current)return;const t=n(e.currentTarget.parentElement?.parentElement??null),r=f?l(f.document):null,o=[];t&&o.push(a(t)),r&&f&&o.push(a(r,f.frame)),he.current=o.length?()=>o.forEach(e=>e()):null},onDragOver:e=>{const n=pe(e);if(n)return e.preventDefault(),e.dataTransfer.dropEffect=t(e.dataTransfer.effectAllowed),ee(null),void ne(e=>e&&e.key===n.source.key&&e.box===n.source.box?e:n.source);ne(null);const l=me(e);if(!l)return void ee(null);e.preventDefault(),e.dataTransfer.dropEffect=t(e.dataTransfer.effectAllowed);const a={zoneKey:l.t.zone.key,line:l.t.line,axis:l.t.zone.axis};ee(e=>e&&e.zoneKey===a.zoneKey&&e.line.left===a.line.left&&e.line.top===a.line.top?e:a)},onDragLeave:e=>{const t=e.relatedTarget;t&&e.currentTarget.contains(t)||(oe.current=null,ee(null),ne(null))},onDrop:e=>{const t=pe(e);if(t)return e.preventDefault(),m.end(),fe(),void M.current.dropOn.onDrop(t.h.item,t.source);const n=me(e);n&&(e.preventDefault(),m.end(),fe(),M.current.onDrop(n.h.item,n.t.to))}},xe={draggable:!N&&!!Q,onMouseEnter:ae,onMouseLeave:()=>!m.get()&&re(),onDragStart:e=>{if(Q&&!N){m.start({key:Q.key,item:Q.item,from:Q.from}),e.dataTransfer.effectAllowed="move";try{e.dataTransfer.setData("text/plain",Q.key)}catch{}}else e.preventDefault()},onDragEnd:()=>{m.end(),fe()},onClick:()=>{Q&&!N&&M.current.onPick?.(Q.item)}},{seams:be=[]}=Y,ye=Y.zones.filter(e=>0===e.children.length),ve=!o.onZoneAdd||N||se?[]:ye,we=ve.map(e=>e.key).join("\n");return b(()=>{const e=f?.document;if(!e)return;const t=new Set(we?we.split("\n"):[]);for(const n of e.querySelectorAll(`[${J}]`))n.toggleAttribute(G,t.has(n.getAttribute(J)??""));return()=>{for(const t of e.querySelectorAll(`[${G}]`))t.removeAttribute(G)}},[f,we,X,C,E]),/* @__PURE__ */S("div",{ref:$,className:"es-canvas-layer",children:[H||!o.onSeamAdd||N||se?null:be.map(e=>
-/* @__PURE__ */j(L,{className:"es-canvas-seam",axis:e.axis,index:e.place.index,label:e.label??o.seamLabel??T.addSection,onInsert:()=>o.onSeamAdd?.(e.place),style:"x"===e.axis?{left:e.box.left+e.box.width/2-12,top:e.box.top,width:24,height:e.box.height}:{left:e.box.left,top:e.box.top+e.box.height/2-12,width:e.box.width,height:24}},e.key)),ve.length?ve.map(e=>/* @__PURE__ */j("button",{type:"button",className:["es-canvas-empty",e.addAlways?"is-always":"",_?.zoneKey===e.key?"is-over":""].filter(Boolean).join(" "),style:U(e.box),"data-node-id":e.list.parentId===g?void 0:e.list.parentId,onClick:()=>o.onZoneAdd?.({...e.list,index:0}),children:/* @__PURE__ */j("span",{className:"es-canvas-empty-add",children:T.addButton({label:e.addLabel??o.zoneAddLabel??T.addBlock})})},e.key)):null,H?/* @__PURE__ */j("div",{className:"es-canvas-catch",...ge}):null,te&&H?/* @__PURE__ */j("div",{className:"es-canvas-target",style:U(te.box),children:o.dropOn?.label?/* @__PURE__ */j("span",{className:"es-canvas-target-label",style:z(),children:o.dropOn.label(H.item,te)}):null}):null,_&&!ye.some(e=>e.key===_.zoneKey)?/* @__PURE__ */j("div",{className:`es-canvas-line is-${_.axis}`,style:U(_.line)}):null,ue?/* @__PURE__ */j("span",{className:"es-canvas-hint"+(ue.width<200?" is-below":""),style:{...z(),left:ue.left+ue.width,top:ue.width<200?ue.top+ue.height:ue.top},children:T.typeHint}):null,
-/* @__PURE__ */j("div",{className:"es-canvas-handle-spot",style:Q?{"--es-handle-x":`${Q.box.left+2}px`,"--es-handle-y":`${Math.max(Q.box.top-11,0)}px`}:void 0,children:/* @__PURE__ */j(D,{className:"es-canvas-handle-tip",side:"top",content:!Q||N||H?null:Q.title??T.handle({label:Q.label}),children:/* @__PURE__ */S("div",{className:["es-canvas-handle",Q&&!N?"is-shown":"",H?"is-dragging":""].filter(Boolean).join(" "),...xe,children:[
-/* @__PURE__ */j("span",{className:"es-canvas-grip","aria-hidden":"true",children:"⋮⋮"}),Q?.label]})})})]})}var ee=e=>e.tiles.length>0&&e.tiles.every(e=>null!=e.cover);function te({groups:t,session:n,itemFor:l,onInsert:a,onTileMenu:r,at:s,hint:i,searchLabel:c,readOnly:d,words:u=e.add}){const h=i??u.hint,f=c??u.search,[p,m]=y(""),g=N(),x=p.trim().toLowerCase(),b=function(e){const t=/* @__PURE__ */new Map;return e.map(e=>{const n=e.key??e.title,l=t.get(n)??0;return t.set(n,l+1),0===l?n:`${n}\0${l}`})}(t),v=t.map((e,t)=>({...e,key:b[t],tiles:x?e.tiles.filter(e=>((e,t)=>e.label.toLowerCase().includes(t)||(e.keywords??[]).some(e=>e.toLowerCase().includes(t)))(e,x)):e.tiles})).filter(e=>e.tiles.length>0),w=(e,t)=>a=>{if(t)a.preventDefault();else{n.start({key:`new:${e}`,item:l(e)}),a.dataTransfer.effectAllowed="copy";try{a.dataTransfer.setData("text/plain",e)}catch{}}};/* @__PURE__ */
-return S("div",{className:"es-add",children:[s?/* @__PURE__ */S("div",{className:"es-add-at",role:"status",children:[
-/* @__PURE__ */j("span",{children:s.label}),o(u.stop,/* @__PURE__ */j("button",{type:"button",className:"es-add-at-clear","aria-label":u.stop,onClick:s.onClear,children:/* @__PURE__ */j(C,{size:12,"aria-hidden":"true"})}))]}):null,
-/* @__PURE__ */j("p",{className:"es-add-hint",children:h}),
-/* @__PURE__ */j("div",{className:"es-add-find",children:/* @__PURE__ */j(M,{id:g,type:"search","aria-label":f,placeholder:u.searchPlaceholder({label:f}),value:p,onChange:e=>m(e.target.value),leftIcon:/* @__PURE__ */j(E,{size:16,"aria-hidden":"true"}),rightAdornment:p?/* @__PURE__ */j(T,{size:"sm","aria-label":u.clearSearch,onClick:()=>m(""),children:/* @__PURE__ */j(C,{size:12,"aria-hidden":"true"})}):void 0})}),0===v.length?/* @__PURE__ */S("div",{className:"es-add-empty",role:"status",children:[
-/* @__PURE__ */j("div",{className:"es-add-empty-title",children:u.nothing({query:p.trim()})}),
-/* @__PURE__ */j("div",{className:"es-add-empty-sub",children:u.tryAnother})]}):v.map(e=>/* @__PURE__ */S("section",{className:"es-add-group","aria-label":e.title,children:[
-/* @__PURE__ */S("div",{className:"es-add-group-head",children:[
-/* @__PURE__ */j("span",{className:"es-add-group-title",children:e.title}),
-/* @__PURE__ */j("span",{className:"es-add-group-count",children:e.tiles.length})]}),
-/* @__PURE__ */j("div",{className:ee(e)?"es-add-grid is-cards":"es-add-grid",children:e.tiles.map(e=>{const t=Boolean(d||e.disabled),l=d?void 0:e.disabled?e.disabledReason:e.title??u.tile({label:e.label});return o(l,/* @__PURE__ */S("button",{type:"button",className:null!=e.cover?"es-add-tile has-cover":"es-add-tile",draggable:!t,"aria-disabled":t||void 0,"aria-label":u.tile({label:e.label}),onDragStart:w(e.type,t),onDragEnd:()=>n.end(),onClick:()=>!t&&a?.(e.type),onContextMenu:r?t=>{r(e.type,{x:t.clientX,y:t.clientY,owner:t.currentTarget})&&t.preventDefault()}:void 0,children:[null!=e.cover?/* @__PURE__ */j("span",{className:"es-add-tile-cover","aria-hidden":"true",children:e.cover}):e.icon?/* @__PURE__ */j("span",{className:"es-add-tile-glyph","aria-hidden":"true",children:e.icon}):null,
-/* @__PURE__ */S("span",{className:"es-add-tile-label",children:[e.label,null!=e.mark?/* @__PURE__ */j("span",{className:"es-add-tile-mark","aria-hidden":"true",children:e.mark}):null]})]},e.type))})})]},e.key))]})}export{te as AddPanel,_ as CanvasDragLayer,L as CanvasInsert,R as EMPTY_MEASURE,W as HANDLE_GRACE_MS,P as canvasTarget,B as contains,I as gapInZone,q as gapLine,Y as insertSeams,V as measureCanvas,X as pickSource,H as seamsBetween,O as sourcesAt};