efficient-easel 0.0.0 → 0.97.0

package/dist/drag/index.d.ts

@@ -0,0 +1,379 @@
+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';
+
+/**
+ * The one drag in flight, shared by every surface of an editor — the Layers
+ * tree, the canvas and the Add list (blueprint step 3.2).
+ *
+ * Native drag-and-drop does not let a drop target read what is being dragged
+ * until the drop itself (the data is sealed during `dragover`), and a tree that
+ * only knows about drags it started cannot take a block from the Add list. So
+ * the surface that starts a drag writes it here and every surface reads it: a
+ * block picked up on the canvas can land in the tree, a tile from the Add list
+ * on either.
+ *
+ * `from` is where the thing sits now — absent for something new (an Add tile),
+ * which is also why a new thing can never be a no-op drop.
+ */
+
+type DragHeld<I> = {
+    /** The identity `keyOf` gave it — which row or box is the one being dragged. */
+    key: string;
+    item: I;
+    /** Where it sits now. Absent: it is new, from the Add list. */
+    from?: Place;
+};
+type DragSession<I> = {
+    /** The drag in flight, current at once (for event handlers). */
+    get: () => DragHeld<I> | null;
+    /** The drag as last TOLD to subscribers (for rendering — see below). */
+    shown: () => DragHeld<I> | null;
+    start: (held: DragHeld<I>) => void;
+    end: () => void;
+    subscribe: (listener: () => void) => () => void;
+};
+/**
+ * `get()` is current the moment a drag starts — the drop targets read it on
+ * their first `dragover`. SUBSCRIBERS hear about a start one tick later: the
+ * browser takes the drag picture when the `dragstart` handlers return, and a
+ * render in between (a row dimming, the handle hiding) would be in the picture.
+ * An end is told at once.
+ */
+declare function createDragSession<I>(): DragSession<I>;
+
+/**
+ * Where a drop lands — the engine's one hit rule, as pure functions (blueprint
+ * step 3.1).
+ *
+ * The two editors had each written their own, and they disagreed in ways a
+ * merchant moving between them would feel: the campaign designer dragged the
+ * whole row and put an "into" drop at the START of a column; the website editor
+ * dragged a grip and put it at the END, and only in the middle of a container's
+ * row. There were five different drop lines between them. One rule now:
+ *
+ *   - a SEAM (the gap between two rows) means "between" — its own place;
+ *   - a CONTAINER's row means "into", the whole row — the host names the exact
+ *     place (start or end is the host's call, per container);
+ *   - an ORDINARY row splits in half: the top half drops before it, the bottom
+ *     half after it;
+ *   - a PINNED row (a header first, a footer last) never moves, and a drop on it
+ *     lands on the side that keeps the band intact: after a pinned first row,
+ *     before a pinned last one.
+ *
+ * Every place here is a GAP — the insert position in its list, counted as if
+ * the dragged row were still in it. `gapToMoveIndex` turns that into the index
+ * `efficient-easel/data`'s `move` wants.
+ */
+
+type DropSide = 'before' | 'after' | 'into';
+/** What the engine needs to know about one row to decide a drop on it. */
+type DropRow = {
+    /** Where the row sits: its list, and its index in that list. */
+    place: Place;
+    /** Present: the row is a container and the whole row means "into", landing here. */
+    into?: Place;
+    /** A row fixed at the start or the end of its list. */
+    pinned?: 'first' | 'last';
+};
+type DropSpot = {
+    side: DropSide;
+    to: Place;
+};
+/** The spot a pointer at `y` means over a row drawn at `top` with `height`. */
+declare function dropOnRow(row: DropRow, y: number, top: number, height: number): DropSpot;
+/**
+ * A drop that would leave the row where it is: its own gap on either side. Such
+ * a drop draws no line — a line promises a move that is not coming.
+ */
+declare function isNoOpDrop(from: Place, to: Place): boolean;
+/**
+ * The gap a drop names → the index `move` wants. Within one list the row leaves
+ * its own slot first, so every gap after it is one less; into another list the
+ * gap is the index.
+ */
+declare function gapToMoveIndex(from: Place, to: Place): number;
+/** One step up or down its own list — what ⌥↑ / ⌥↓ ask for, as a gap. */
+declare function stepGap(from: Place, dir: -1 | 1): Place;
+
+/**
+ * Drag-and-drop for a Layers tree — ONE engine for both editors (blueprint step
+ * 3.1). The host keeps what is genuinely its own: whether a drop is allowed
+ * (`canDrop`) and what it writes (`onDrop`, `onStep`); the engine owns the
+ * gesture, the hit rule (./hit), the one drop line, auto-scroll (./autoScroll)
+ * and ⌥↑ / ⌥↓.
+ *
+ * Native HTML5 drag-and-drop, as both editors already used: the whole ROW is
+ * what you pick up (the campaign designer's way — the website editor's grip was
+ * a 9px target), and the picture that follows the pointer is the row itself,
+ * raised with a shadow.
+ *
+ *   const drag = useTreeDrag({ keyOf, canDrop, onDrop, onStep, canStep, readOnly });
+ *   <LayersTree rootProps={drag.rootProps()}>
+ *     <TreeSeam {...drag.seam({ place: { ...list, index: 0 } })} onAdd={…} label="Add block here" />
+ *     <TreeRow {...drag.row({ item, place, into, pinned }, { onClick })} icon={…} name={…} />
+ *
+ * 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.
+ */
+
+type TreeDragOptions<I> = {
+    /** The identity of an item — which row is the one being dragged. */
+    keyOf: (item: I) => string;
+    /** May `item` land at `to`? A refused spot draws no line and cannot be dropped on. */
+    canDrop: (item: I, to: Place) => boolean;
+    /** Land it. `to` is a gap (see ./hit `gapToMoveIndex` for `move`'s index). */
+    onDrop: (item: I, to: Place) => void;
+    /** ⌥↑ / ⌥↓ on a row: move it one step. Absent: the keys do nothing. */
+    onStep?: (item: I, dir: -1 | 1) => void;
+    /** May it step that way? Absent: the host's `onStep` decides. */
+    canStep?: (item: I, dir: -1 | 1) => boolean;
+    /** Nothing can be picked up, stepped or dropped. */
+    readOnly?: boolean;
+    /**
+     * The editor's shared drag (./session) — so a block picked up on the canvas or
+     * a tile from the Add list can land in the tree, and a row from the tree on
+     * the canvas. Absent: the tree keeps a drag of its own.
+     */
+    session?: DragSession<I>;
+};
+type TreeDragRowOptions<I> = DropRow & {
+    item: I;
+    /** False: the row is a place to drop, not a thing to pick up. Pinned rows never are. */
+    canDrag?: boolean;
+};
+type TreeDragSeamOptions = {
+    place: Place;
+};
+type DivProps = HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string | number | undefined>;
+type TreeDragRowProps = {
+    draggable: boolean;
+    dragging: boolean;
+    drop?: DropSide;
+    rowProps: DivProps;
+};
+type TreeDragSeamProps = {
+    drop: boolean;
+    seamProps: DivProps;
+};
+type TreeDrag<I> = {
+    /** The item being dragged, or null. */
+    dragging: I | null;
+    row: (opts: TreeDragRowOptions<I>, host?: DivProps) => TreeDragRowProps;
+    seam: (opts: TreeDragSeamOptions, host?: DivProps) => TreeDragSeamProps;
+    /** For the tree's root: leaving it clears the line. */
+    rootProps: (host?: DivProps) => DivProps;
+};
+declare function useTreeDrag<I>(options: TreeDragOptions<I>): TreeDrag<I>;
+
+/**
+ * Where a drop on the CANVAS lands — pure functions over measured boxes
+ * (blueprint step 3.2). The tree's rule (./hit) is about rows in a list; the
+ * canvas is boxes inside boxes, laid out down the page or across it, so it
+ * needs its own — the campaign designer's overlay, made general:
+ *
+ *   - ONE HANDLE: the smallest box under the pointer wins, so hovering an image
+ *     offers the image, not the section it sits in (their corners are a few
+ *     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.
+ *   - 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.
+ *
+ * All boxes are in ONE coordinate space: the layer drawn over the canvas.
+ */
+
+type Box = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/** Something on the canvas that can be picked up. */
+type CanvasSource<I> = {
+    key: string;
+    item: I;
+    box: Box;
+    /** What the handle calls it — "Image", "Section". */
+    label: string;
+    /** The handle's tooltip. Default "Drag to move this image". */
+    title?: string;
+    /** Where it sits now — a drop back there is a no-op. */
+    from?: Place;
+};
+/** A list on the canvas that takes drops: a slot, laid out one way. */
+type CanvasZone = {
+    key: string;
+    list: SlotAddress;
+    box: Box;
+    /** 'y': children stack down; 'x': they sit across (columns). */
+    axis: 'x' | 'y';
+    /** The children, in order. */
+    children: Box[];
+};
+/** The gap between two sections, offered as a place to add one. */
+type CanvasSeam = {
+    key: string;
+    place: Place;
+    box: Box;
+};
+declare const contains: (b: Box, x: number, y: number) => boolean;
+/** The smallest source under the point — the innermost thing. */
+declare function pickSource<I>(sources: readonly CanvasSource<I>[], x: number, y: number): CanvasSource<I> | null;
+/** The gap the point means in a zone: children whose middle it has passed. */
+declare function gapInZone(zone: CanvasZone, x: number, y: number): number;
+/** The drop line for a gap: 2px, in the middle of the space between two children. */
+declare function gapLine(zone: CanvasZone, gap: number): Box;
+type CanvasTarget = {
+    zone: CanvasZone;
+    to: Place;
+    line: Box;
+} | null;
+/**
+ * Where a drop at the point lands: the innermost zone under it that takes it.
+ * `accept` answers for the place; a refused zone falls through to the one
+ * 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.
+ */
+declare function canvasTarget(zones: readonly CanvasZone[], x: number, y: number, accept: (to: Place) => boolean, isNoOp?: (to: Place) => boolean): CanvasTarget;
+/** The seams between a zone's children — where "+ Add section" goes. */
+declare function seamsBetween(zone: CanvasZone, keyPrefix?: string): CanvasSeam[];
+
+type MeasuredNode = {
+    id: string;
+    place: Place;
+    box: Box;
+};
+type MeasuredCanvas = {
+    nodes: MeasuredNode[];
+    zones: CanvasZone[];
+};
+declare const EMPTY_MEASURE: MeasuredCanvas;
+declare function measureCanvas(canvas: CanvasTarget$1, layer: Element): MeasuredCanvas;
+
+type CanvasDragModel<I> = {
+    /** What may be picked up. Leave out what cannot move — a pinned section, a block with nowhere to go. */
+    sources: CanvasSource<I>[];
+    /** The lists that take drops. */
+    zones: CanvasZone[];
+    /** The gaps offered as "+ Add section" (see `seamsBetween`). */
+    seams?: CanvasSeam[];
+};
+type CanvasDragLayerProps<I> = {
+    canvas: CanvasTarget$1 | null;
+    session: DragSession<I>;
+    /** Turn what was measured into what may be picked up and dropped on. */
+    model: (measured: MeasuredCanvas) => CanvasDragModel<I>;
+    canDrop: (item: I, to: Place) => boolean;
+    onDrop: (item: I, to: Place) => void;
+    /** 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. */
+    onSeamAdd?: (place: Place) => void;
+    seamLabel?: string;
+    /** "+ Add block" in an empty slot: open the Add panel there. */
+    onZoneAdd?: (place: Place) => void;
+    zoneAddLabel?: string;
+    readOnly?: boolean;
+    /** Re-measure when this changes — the document's revision. Layout changes re-measure by themselves. */
+    revision?: unknown;
+    /** How the canvas is measured. Default: Puck's markers (./measure). */
+    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`
+     * and `zoneAddLabel` above still win for their one word. A prop, not the
+     * strings provider: drag imports only its own lane.
+     */
+    words?: DragWords['canvas'];
+};
+/** How long the handle waits for the pointer on its way from the frame. */
+declare const HANDLE_GRACE_MS = 140;
+declare function CanvasDragLayer<I>(props: CanvasDragLayerProps<I>): react.JSX.Element;
+
+type AddTile = {
+    /** The block's type — what `onInsert` and `itemFor` are given. */
+    type: string;
+    /** The tile's caption. */
+    label: string;
+    icon?: ReactNode;
+    /** More words search should find it by. */
+    keywords?: readonly string[];
+    /** The tooltip, when the caption is a shortening. */
+    title?: string;
+    /** 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;
+};
+type AddGroup = {
+    title: string;
+    tiles: readonly AddTile[];
+};
+type AddPanelProps<I> = {
+    groups: readonly AddGroup[];
+    /** The editor's drag session — a dragged tile is a drag in it. */
+    session: DragSession<I>;
+    /** The drag item for a new block of `type`. */
+    itemFor: (type: string) => I;
+    /** A tile clicked: add one — at the place the panel was opened for, or the host's default. */
+    onInsert: (type: string) => void;
+    /** The panel was opened at a place — "Adding to Column 2" — and can stop being. */
+    at?: {
+        label: string;
+        onClear: () => void;
+    };
+    /** The line under the title. Default "Drag onto the page, or click to add." */
+    hint?: string;
+    /** The search field's name. Default "Search blocks". */
+    searchLabel?: string;
+    readOnly?: boolean;
+    /**
+     * The shell's own words in the host's language:
+     * `useEditorStrings().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.
+     */
+    words?: DragWords['add'];
+};
+declare function AddPanel<I>({ groups, session, itemFor, onInsert, at, hint: ownHint, searchLabel: ownSearchLabel, readOnly, words, }: AddPanelProps<I>): react.JSX.Element;
+
+/**
+ * Scroll the list while a drag is held near its top or bottom edge (blueprint
+ * step 3.1).
+ *
+ * From the campaign designer (efficient-admin-portal
+ * `src/components/email/dragAutoScroll.ts`), where it fixed the one drag a long
+ * tree could not do: a section at the bottom could not reach the top without
+ * dropping it halfway and going again. The website editor had none. The numbers
+ * are the designer's, which the owner has used since:
+ *
+ *   - the last 56px of the box, top or bottom, scroll it;
+ *   - up to 16px a frame, faster the closer the pointer is to the edge;
+ *   - 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.
+ */
+declare const AUTO_SCROLL_EDGE = 56;
+declare const AUTO_SCROLL_MAX_SPEED = 16;
+/** Pixels a frame for a pointer `distance` px in from an edge (negative = outside). */
+declare function autoScrollSpeed(distance: number): number;
+/** The signed scroll for a pointer at `y` against a box from `top` to `bottom`. */
+declare function autoScrollDelta(y: number, top: number, bottom: number): number;
+/** The nearest ancestor that really scrolls — one whose content overflows it. */
+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;
+/**
+ * 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.
+ */
+declare function startAutoScroll(box: HTMLElement): () => 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 };

package/dist/drag/index.js

@@ -0,0 +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-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__ */
+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: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};