efficient-easel 0.99.1 → 0.100.0

package/dist/drag/index.d.ts

@@ -1,8 +1,8 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 import { P as Place, S as SlotAddress } from '../types-41704JE4.js';
-import { C as CanvasTarget$1 } from '../watch-DmasQA61.js';
-import { D as DragWords } from '../words-D9ChvbNC.js';
+import { C as CanvasTarget$1 } from '../watch-BTYOJpQU.js';
+import { D as DragWords } from '../words-BDignMl_.js';
 
 /**
  * The one drag in flight, shared by every surface of an editor — the Layers
@@ -117,6 +117,12 @@ declare function stepGap(from: Place, dir: -1 | 1): Place;
  *
  * A drop the host refuses draws nothing and cannot land; a drop that would leave
  * the row where it was draws nothing either. Leaving the tree clears the line.
+ *
+ * An EMPTY list is not a seam: a seam is the gap between two rows and takes
+ * back the space it adds, so alone in a list it is a strip nobody can aim at.
+ * Draw `efficient-easel/tree`'s `TreeEmptySlot` there, with the same `seam()`:
+ *
+ *     <TreeEmptySlot {...drag.seam({ place: { ...list, index: 0 } })} onAdd={…} />
  */
 
 type TreeDragOptions<I> = {
@@ -179,7 +185,8 @@ declare function useTreeDrag<I>(options: TreeDragOptions<I>): TreeDrag<I>;
  *     pixels apart); a parent is picked up by hovering its own padding.
  *   - THE ZONE: the innermost list under the pointer that will take the drop. A
  *     refused inner zone falls through to the next one out — a section dragged
- *     over a column lands between sections, not nowhere.
+ *     over a column lands between sections, not nowhere. (Decided again on
+ *     2026-10-07; see `canvasTarget`.)
  *   - THE GAP: along the zone's own axis — down a column, ACROSS a row of
  *     columns — counted against the children's midpoints; the line is drawn in
  *     the middle of that gap, horizontal or vertical to match.
@@ -239,8 +246,27 @@ type CanvasTarget = {
  * outside it. A drop that would leave the thing where it is lands NOWHERE — it
  * does not fall through to an outer list, which would move it somewhere the
  * pointer is not.
+ *
+ * ── THE FALL-THROUGH STAYS, AND A HOST MAY END IT (second host, 2026-10-07) ──
+ * A host reported it as a surprise: a Columns block dragged onto a column,
+ * which refuses columns, landed at the top level instead of being refused; and
+ * a block picked up INSIDE a container, held over a part of that container
+ * that will not take it, left the container for the page.
+ *
+ * It stays the rule, for three reasons. A page is covered by its inner lists:
+ * without the fall-through a section could be dropped only on the few pixels
+ * of the page's own list that show between sections. Both editors this was
+ * built for have shipped on it. And it is not silent: the line is drawn where
+ * the drop WILL land before the button is let go, across the page for a drop
+ * the page takes.
+ *
+ * But what surprises is the host's to know — the engine never learns what a
+ * column is — so the host may answer for each refusal: `fallThrough(refused)`
+ * is asked with the place that just refused, and `false` ends it there. The
+ * drop lands nowhere, no line is drawn, and the browser shows it refused.
+ * Left out, every refusal falls through, as before.
  */
-declare function canvasTarget(zones: readonly CanvasZone[], x: number, y: number, accept: (to: Place) => boolean, isNoOp?: (to: Place) => boolean): CanvasTarget;
+declare function canvasTarget(zones: readonly CanvasZone[], x: number, y: number, accept: (to: Place) => boolean, isNoOp?: (to: Place) => boolean, fallThrough?: (refused: Place) => boolean): CanvasTarget;
 /** The seams between a zone's children — where "+ Add section" goes. */
 declare function seamsBetween(zone: CanvasZone, keyPrefix?: string): CanvasSeam[];
 
@@ -271,6 +297,19 @@ type CanvasDragLayerProps<I> = {
     model: (measured: MeasuredCanvas) => CanvasDragModel<I>;
     canDrop: (item: I, to: Place) => boolean;
     onDrop: (item: I, to: Place) => void;
+    /**
+     * A drop the innermost list under the pointer refuses is offered to the next
+     * list out: a section held over a column lands between sections, and the
+     * line shows where (./canvasHit). Answer `false` here to END it at the list
+     * that refused — nothing is drawn and nothing lands — for a drop where
+     * falling through would surprise: a Columns block over a column, or a block
+     * leaving the container it was picked up in.
+     *
+     * Asked only about a place `canDrop` has just refused: `refused` is that
+     * place, `from` where the thing was picked up (absent for a new one, from
+     * the Add list). Left out, every refusal falls through.
+     */
+    fallThrough?: (item: I, refused: Place, from?: Place) => boolean;
     /** The handle CLICKED, not dragged: select what it names. Absent: a click does nothing. */
     onPick?: (item: I) => void;
     /** "+ Add section" in a seam: open the Add panel at that place. */
@@ -286,7 +325,7 @@ type CanvasDragLayerProps<I> = {
     measure?: (canvas: CanvasTarget$1, layer: Element) => MeasuredCanvas;
     /**
      * The layer's own words in the host's language:
-     * `useEditorStrings().drag.canvas` (0.95.0). Left out, English. `seamLabel`
+     * `useEaselStrings().drag.canvas` (0.95.0). Left out, English. `seamLabel`
      * and `zoneAddLabel` above still win for their one word. A prop, not the
      * strings provider: drag imports only its own lane.
      */
@@ -296,6 +335,15 @@ type CanvasDragLayerProps<I> = {
 declare const HANDLE_GRACE_MS = 140;
 declare function CanvasDragLayer<I>(props: CanvasDragLayerProps<I>): react.JSX.Element;
 
+/**
+ * One thing the Add list offers.
+ *
+ * `readOnly` is the whole panel's; `disabled` is one tile's (second host,
+ * 2026-10-07): a block that may not be added JUST NOW — a second Header —
+ * stays where a merchant looks for it, dimmed, and says why. A block that may
+ * be added only in some places is not disabled: that is the host's `canDrop`
+ * to refuse and its `onInsert` to place.
+ */
 type AddTile = {
     /** The block's type — what `onInsert` and `itemFor` are given. */
     type: string;
@@ -309,6 +357,16 @@ type AddTile = {
     /** A picture of what it adds — a section's thumbnail. Every tile of a group
      *  having one lays the group out as cards. */
     cover?: ReactNode;
+    /**
+     * It cannot be added just now. The tile stays in the list, dimmed, and is
+     * still found by search and counted by its group; a click adds nothing and
+     * a drag does not start. `aria-disabled`, not the native attribute, so the
+     * tile keeps the focus and its reason can be reached from the keyboard.
+     */
+    disabled?: boolean;
+    /** Why, in the host's words ("A page has one header"): a disabled tile's
+     *  tooltip, in place of "Add …". Left out, a disabled tile has none. */
+    disabledReason?: string;
 };
 type AddGroup = {
     title: string;
@@ -334,7 +392,7 @@ type AddPanelProps<I> = {
     readOnly?: boolean;
     /**
      * The shell's own words in the host's language:
-     * `useEditorStrings().drag.add` (0.95.0). Left out, English. `hint` and
+     * `useEaselStrings().drag.add` (0.95.0). Left out, English. `hint` and
      * `searchLabel` above still win for their one line. A prop, not the strings
      * provider: drag imports only its own lane.
      */
@@ -342,6 +400,26 @@ type AddPanelProps<I> = {
 };
 declare function AddPanel<I>({ groups, session, itemFor, onInsert, at, hint: ownHint, searchLabel: ownSearchLabel, readOnly, words, }: AddPanelProps<I>): react.JSX.Element;
 
+/**
+ * The effect a drop target names (second host, 2026-10-06).
+ *
+ * A browser lands a drop only if the `dropEffect` the target named in its last
+ * `dragover` is one the source's `effectAllowed` includes. Otherwise the cursor
+ * says "no" and `drop` NEVER FIRES: the line is drawn and nothing lands.
+ *
+ * The surfaces here start two kinds of drag. A row or a block picked up is a
+ * MOVE (`effectAllowed = 'move'`); a tile from the Add list is a COPY (it stays
+ * in the list). So a target cannot name one effect for both — it names one the
+ * source allowed, and the cursor then says what will happen: a move, or a "+".
+ *
+ * Read from the event, not from the session: it is the browser that holds the
+ * drop to it. And ONE function for every surface. Until then the canvas had
+ * this rule inline and the tree named "move" for everything, so a tile could be
+ * dropped on the canvas and never on the tree — and jsdom, which does not
+ * enforce drag effects, let the spec for it pass.
+ */
+declare function dropEffectFor(effectAllowed: string): 'move' | 'copy';
+
 /**
  * Scroll the list while a drag is held near its top or bottom edge (blueprint
  * step 3.1).
@@ -357,7 +435,7 @@ declare function AddPanel<I>({ groups, session, itemFor, onInsert, at, hint: own
  *   - further than 56px OUTSIDE the box, nothing: the pointer has gone elsewhere.
  *
  * Nothing here reads a global at import; the document and the frame clock come
- * from the element being scrolled.
+ * from the element the pointer is held against.
  */
 declare const AUTO_SCROLL_EDGE = 56;
 declare const AUTO_SCROLL_MAX_SPEED = 16;
@@ -369,11 +447,24 @@ declare function autoScrollDelta(y: number, top: number, bottom: number): number
 declare function scrollParent(el: Element | null): HTMLElement | null;
 /** `el` itself if it scrolls, else the nearest ancestor that does. */
 declare function scrollBoxOf(el: HTMLElement | null): HTMLElement | null;
+/**
+ * A canvas frame's own scrolling element, if its document is longer than the
+ * frame — a frame that fills its pane and scrolls itself
+ * (`EaselCanvas height="fill"`). Null for a frame as tall as its content,
+ * which the host's pane scrolls.
+ */
+declare function frameScrollBox(doc: Document): HTMLElement | null;
 /**
  * Scroll `box` while a drag is live. Reads the pointer from a capturing
- * `dragover` on the box's document (a drag over the canvas frame never reaches
- * it, which is right: the canvas scrolls itself). Returns the stop.
+ * `dragover` on the document the drag is IN, and holds it against the top and
+ * bottom of `edges`. Returns the stop.
+ *
+ * `edges` is the box itself, for a list or a pane in the page. For a canvas
+ * frame that scrolls itself it is the FRAME: what scrolls is the frame's
+ * document, but the drag never enters it — the drag layer lies over the frame,
+ * in the host page — so the pointer is the host's, and the edges it is held
+ * near are the frame element's (second host, 2026-10-06).
  */
-declare function startAutoScroll(box: HTMLElement): () => void;
+declare function startAutoScroll(box: HTMLElement, edges?: Element): () => void;
 
-export { AUTO_SCROLL_EDGE, AUTO_SCROLL_MAX_SPEED, type AddGroup, AddPanel, type AddPanelProps, type AddTile, type Box, CanvasDragLayer, type CanvasDragLayerProps, type CanvasDragModel, type CanvasTarget as CanvasDropTarget, type CanvasSeam, type CanvasSource, type CanvasZone, type DragHeld, type DragSession, DragWords, type DropRow, type DropSide, type DropSpot, EMPTY_MEASURE, HANDLE_GRACE_MS, type MeasuredCanvas, type MeasuredNode, type TreeDrag, type TreeDragOptions, type TreeDragRowOptions, type TreeDragRowProps, type TreeDragSeamOptions, type TreeDragSeamProps, autoScrollDelta, autoScrollSpeed, canvasTarget, contains, createDragSession, dropOnRow, gapInZone, gapLine, gapToMoveIndex, isNoOpDrop, measureCanvas, pickSource, scrollBoxOf, scrollParent, seamsBetween, startAutoScroll, stepGap, useTreeDrag };
+export { AUTO_SCROLL_EDGE, AUTO_SCROLL_MAX_SPEED, type AddGroup, AddPanel, type AddPanelProps, type AddTile, type Box, CanvasDragLayer, type CanvasDragLayerProps, type CanvasDragModel, type CanvasTarget as CanvasDropTarget, type CanvasSeam, type CanvasSource, type CanvasZone, type DragHeld, type DragSession, DragWords, type DropRow, type DropSide, type DropSpot, EMPTY_MEASURE, HANDLE_GRACE_MS, type MeasuredCanvas, type MeasuredNode, type TreeDrag, type TreeDragOptions, type TreeDragRowOptions, type TreeDragRowProps, type TreeDragSeamOptions, type TreeDragSeamProps, autoScrollDelta, autoScrollSpeed, canvasTarget, contains, createDragSession, dropEffectFor, dropOnRow, frameScrollBox, gapInZone, gapLine, gapToMoveIndex, isNoOpDrop, measureCanvas, pickSource, scrollBoxOf, scrollParent, seamsBetween, startAutoScroll, stepGap, useTreeDrag };

package/dist/drag/index.js

@@ -1,17 +1,18 @@
-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 A(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 D(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 S(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 z(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=D(e,t,n),o={...e.list,index:r};if(a(o))return null;if(l(o))return{zone:e,to:o,line:S(e,r)}}return null}function T(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="data-es-empty-cell",M="data-puck-dropzone",$=140,K=e=>({left:e.left,top:e.top,width:e.width,height:e.height});function X(i){const{canvas:d,session:u,readOnly:h,words:v=e.canvas}=i,w=p(i);m(()=>{w.current=i});const N=p(null),D=a(d),[S,T]=f(0),E=g(()=>T(e=>e+1),[]),[L,O]=f(C);m(()=>{const e=N.current;d&&e&&O((w.current.measure??j)(d,e))},[d,D,i.revision,S]);const $=i.model,X=b(()=>$(L),[$,L]),P=y(u.subscribe,u.shown,u.shown),[q,R]=f(null),[Y,_]=f(null),G=p(null),I=()=>{G.current&&clearTimeout(G.current),G.current=null},Z=()=>{I(),G.current=setTimeout(()=>{u.get()||R(null)},140)};m(()=>I,[]),r(d,"mousemove",e=>{const t=N.current;if(!d||!t||w.current.readOnly||u.get())return;I();const n=o(d.frame,e.clientX,e.clientY,t),l=s(t),a=A(X.sources,n.x/l,n.y/l);R(e=>e?.key===a?.key&&e?.box===a?.box?e:a)}),r(d,"mouseout",e=>{e.relatedTarget||Z()}),r(d,"mouseover",e=>{e.relatedTarget||E()});const F=p(null),Q=g(()=>{F.current?.(),F.current=null,_(null)},[]);m(()=>u.subscribe(()=>{u.get()?E():Q()}),[u,Q,E]),m(()=>Q,[Q]);const U=e=>{const t=u.get(),n=N.current;if(!t||!n)return null;const a=c(n,e.clientX,e.clientY),r=z(X.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},V={onDragEnter:e=>{if(F.current)return;const l=t(e.currentTarget.parentElement?.parentElement??null);F.current=l?n(l):null},onDragOver:e=>{const t=U(e);if(!t)return void _(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};_(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)||_(null)},onDrop:e=>{const t=U(e);t&&(e.preventDefault(),u.end(),Q(),w.current.onDrop(t.h.item,t.t.to))}},H={draggable:!h&&!!q,onMouseEnter:I,onMouseLeave:()=>!u.get()&&Z(),onDragStart:e=>{if(q&&!h){u.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:()=>{u.end(),Q()},onClick:()=>{q&&!h&&w.current.onPick?.(q.item)}},{seams:W=[]}=X,J=X.zones.filter(e=>0===e.children.length),ee=i.onZoneAdd&&!h?J:[],te=ee.map(e=>e.key).join("\n");return m(()=>{const e=d?.document;if(!e)return;const t=new Set(te?te.split("\n"):[]);for(const n of e.querySelectorAll(`[${M}]`))n.toggleAttribute(B,t.has(n.getAttribute(M)??""));return()=>{for(const t of e.querySelectorAll(`[${B}]`))t.removeAttribute(B)}},[d,te,L,D,S]),/* @__PURE__ */x("div",{ref:N,className:"es-canvas-layer",children:[P||!i.onSeamAdd||h?null:W.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)),ee.length?ee.map(e=>/* @__PURE__ */k("button",{type:"button",className:Y?.zoneKey===e.key?"es-canvas-empty is-over":"es-canvas-empty",style:K(e.box),onClick:()=>i.onZoneAdd?.({...e.list,index:0}),children:/* @__PURE__ */k("span",{className:"es-canvas-empty-add",children:v.addButton({label:i.zoneAddLabel??v.addBlock})})},e.key)):null,P?/* @__PURE__ */k("div",{className:"es-canvas-catch",...V}):null,Y&&!J.some(e=>e.key===Y.zoneKey)?/* @__PURE__ */k("div",{className:`es-canvas-line is-${Y.axis}`,style:K(Y.line)}):null,
-/* @__PURE__ */x("div",{className:["es-canvas-handle",q&&!h?"is-shown":"",P?"is-dragging":""].filter(Boolean).join(" "),style:q?{left:q.box.left+2,top:Math.max(q.box.top-11,0)}:void 0,title:q?q.title??v.handle({label:q.label}):void 0,...H,children:[
-/* @__PURE__ */k("span",{className:"es-canvas-grip","aria-hidden":"true",children:"⋮⋮"}),q?.label]})]})}var P=e=>e.tiles.length>0&&e.tiles.every(e=>null!=e.cover);function q({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,
-/* @__PURE__ */k("p",{className:"es-add-hint",children:h}),
-/* @__PURE__ */x("div",{className:"es-add-search",children:[
-/* @__PURE__ */k(u,{size:16,"aria-hidden":"true"}),
-/* @__PURE__ */k("input",{id:b,type:"search","aria-label":p,placeholder:c.searchPlaceholder({label:p}),value:m,onChange:e=>g(e.target.value)}),m?/* @__PURE__ */k("button",{type:"button",className:"es-add-search-clear","aria-label":c.clearSearch,onClick:()=>g(""),children:/* @__PURE__ */k(d,{size:12,"aria-hidden":"true"})}):null]}),0===w.length?/* @__PURE__ */x("div",{className:"es-add-empty",role:"status",children:[
-/* @__PURE__ */k("div",{className:"es-add-empty-title",children:c.nothing({query:m.trim()})}),
-/* @__PURE__ */k("div",{className:"es-add-empty-sub",children:c.tryAnother})]}):w.map(e=>/* @__PURE__ */x("section",{className:"es-add-group","aria-label":e.title,children:[
-/* @__PURE__ */x("div",{className:"es-add-group-head",children:[
-/* @__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:P(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{q as AddPanel,X as CanvasDragLayer,C as EMPTY_MEASURE,$ as HANDLE_GRACE_MS,z as canvasTarget,w as contains,D as gapInZone,S as gapLine,j as measureCanvas,A as pickSource,T as seamsBetween};
+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__ */
+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,
+/* @__PURE__ */D("p",{className:"es-add-hint",children:d}),
+/* @__PURE__ */N("div",{className:"es-add-search",children:[
+/* @__PURE__ */D(p,{size:16,"aria-hidden":"true"}),
+/* @__PURE__ */D("input",{id:g,type:"search","aria-label":u,placeholder:c.searchPlaceholder({label:u}),value:f,onChange:e=>m(e.target.value)}),f?/* @__PURE__ */D("button",{type:"button",className:"es-add-search-clear","aria-label":c.clearSearch,onClick:()=>m(""),children:/* @__PURE__ */D(h,{size:12,"aria-hidden":"true"})}):null]}),0===v.length?/* @__PURE__ */N("div",{className:"es-add-empty",role:"status",children:[
+/* @__PURE__ */D("div",{className:"es-add-empty-title",children:c.nothing({query:f.trim()})}),
+/* @__PURE__ */D("div",{className:"es-add-empty-sub",children:c.tryAnother})]}):v.map(e=>/* @__PURE__ */N("section",{className:"es-add-group","aria-label":e.title,children:[
+/* @__PURE__ */N("div",{className:"es-add-group-head",children:[
+/* @__PURE__ */D("span",{className:"es-add-group-title",children:e.title}),
+/* @__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};

package/dist/{editor/editor.css → easel/easel.css}

@@ -1,5 +1,5 @@
 /*
- * efficient-easel/editor — the canvas's own marks (blueprint 5.1): the
+ * efficient-easel/easel — the canvas's own marks (blueprint 5.1): the
  * lists' empty and selected states, and the outlines over the selected and
  * hovered block. Puck's `puck.css` drew these until now; the rules follow it.
  *
@@ -9,6 +9,21 @@
  * no `.es-editor` root to define them.
  */
 
+/* The frame itself, in the host page (CanvasFrame): no border, the pane's
+   width, and — when it fills (`height="fill"`) — the pane's height. Rules, not
+   a `style` attribute (second host, 2026-10-06): a server-rendered editor under a
+   Content-Security-Policy without 'unsafe-inline' for styles had the attribute
+   refused, and drew the browser's own 300×150 bordered frame. An `auto`
+   frame's height is measured and written on the client. */
+.es-canvas-frame {
+  border: 0;
+  width: 100%;
+  display: block;
+}
+.es-canvas-frame.is-fill {
+  height: 100%;
+}
+
 /* The frame's root (CanvasFrame). Puck's `[data-puck-entry]` rule: a stacking
    context of its own, so a block's z-index stays inside the page. */
 [data-puck-entry] {