@grafloria/element 0.3.20 → 0.3.22

package/src/libs/element/src/lib/stencil-kit/card-builders.js

@@ -1,108 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.registerCardBuilders = registerCardBuilders;
-/**
- * Card builders for the stencil palette — the bridge that finally lets a
- * dropped "Entity" or "Class" be a REAL kit card instead of a rectangle.
- *
- * Everything here is reuse. `entityCardContent` / `classCardContent` and their
- * auto-height helpers are the same functions `erDiagram()` / `umlDiagram()`
- * use, so a dropped card is byte-for-byte the card those kits produce — which
- * means the row-selection layer (`axk:row-select`), the inline editors and the
- * `erTable(api, id)` / `umlClass(api, id)` handles all work on it for free.
- *
- * The kit's own bindings are idempotent per container, so binding them again
- * after a drop is safe and is what makes the FIRST dropped card interactive on
- * a canvas that was never built by a kit.
- */
-const engine_1 = require("@grafloria/engine");
-const diagram_kit_1 = require("../diagram-kit");
-const builders_1 = require("./builders");
-/** Cards are transparent: the HTML body IS the card, the shape must not paint. */
-const CARD_SHAPE = { type: 'rect', fill: 'none', stroke: 'none' };
-const CARD_STYLE = { fill: 'transparent', stroke: 'transparent', strokeWidth: 0 };
-let seq = 0;
-const nextId = (prefix) => `${prefix}-${++seq}`;
-/** Turn the kit's card spec into a live node, and make the canvas interactive. */
-function mountCard(ctx, opts) {
-    var _a, _b, _c, _d;
-    (0, diagram_kit_1.ensureDiagramKitStyles)();
-    const node = new engine_1.NodeModel({
-        id: opts.id,
-        type: 'kit-card',
-        position: { x: ctx.at.x, y: ctx.at.y },
-        size: { width: opts.width, height: opts.height },
-    });
-    // The SAME metadata shape erDiagram()/umlDiagram() stamp — that is what the
-    // row and editing layers key off.
-    node.setMetadata('html', { content: opts.content, interactive: true });
-    node.setMetadata(opts.metaKey, opts.spec);
-    node.setMetadata('kitEditable', true);
-    node.setMetadata('shape', CARD_SHAPE);
-    (_a = node.setStyle) === null || _a === void 0 ? void 0 : _a.call(node, CARD_STYLE);
-    ctx.api.getModel().addNode(node);
-    // Bind the kit runtime for this container. Both are idempotent, so a canvas
-    // that already ran a kit's finalize() is unaffected, and one that never did
-    // becomes editable on the first drop.
-    const container = (_b = ctx.api.container) !== null && _b !== void 0 ? _b : (_d = (_c = ctx.api).getContainer) === null || _d === void 0 ? void 0 : _d.call(_c);
-    if (container) {
-        const kitApi = Object.assign(Object.assign({}, ctx.api), { container });
-        try {
-            (0, diagram_kit_1.bindRowInteractions)(kitApi);
-        }
-        catch ( /* optional */_e) { /* optional */ }
-        try {
-            (0, diagram_kit_1.bindCardEditing)(kitApi);
-        }
-        catch ( /* optional */_f) { /* optional */ }
-    }
-    return node;
-}
-/** Register the built-in card builders (ER entity/table, UML classifiers). */
-function registerCardBuilders() {
-    for (const masterId of ['erd-entity', 'erd-table', 'erd-associative-entity', 'erd-bridge-entity']) {
-        (0, builders_1.registerStencilBuilder)(masterId, (ctx) => {
-            var _a, _b;
-            const id = nextId('entity');
-            const spec = {
-                id,
-                name: (_b = (_a = ctx.master.meta) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'Entity',
-                columns: [
-                    { name: 'id', type: 'uuid', pk: true },
-                    { name: 'name', type: 'varchar' },
-                ],
-            };
-            return mountCard(ctx, {
-                id,
-                width: 220,
-                height: (0, diagram_kit_1.entityAutoHeight)(spec, true),
-                content: (0, diagram_kit_1.entityCardContent)(spec, true),
-                metaKey: 'kitEntity',
-                spec,
-            });
-        });
-    }
-    for (const masterId of ['uml-class', 'uml-abstract-class', 'uml-interface']) {
-        (0, builders_1.registerStencilBuilder)(masterId, (ctx) => {
-            var _a, _b;
-            const id = nextId('class');
-            const spec = {
-                id,
-                name: (_b = (_a = ctx.master.meta) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'Class',
-                abstract: masterId === 'uml-abstract-class',
-                stereotype: masterId === 'uml-interface' ? 'interface' : undefined,
-                attributes: ['- field: Type'],
-                methods: ['+ method(): void'],
-            };
-            return mountCard(ctx, {
-                id,
-                width: 220,
-                height: (0, diagram_kit_1.classAutoHeight)(spec, true),
-                content: (0, diagram_kit_1.classCardContent)(spec, true),
-                metaKey: 'kitClass',
-                spec,
-            });
-        });
-    }
-}
-//# sourceMappingURL=card-builders.js.map

package/src/libs/element/src/lib/stencil-kit/index.d.ts

@@ -1,7 +0,0 @@
-export { bindStencilPalette } from './palette';
-export type { StencilPaletteApi, StencilPaletteOptions, StencilPaletteHandle, } from './palette';
-export { bindShapeDataPanel } from './shape-data';
-export type { ShapeDataPanelApi, ShapeDataPanelOptions, ShapeDataPanelHandle } from './shape-data';
-export { ensureStencilKitStyles } from './styles';
-export { registerStencilBuilder, getStencilBuilder, unregisterStencilBuilder, registeredStencilBuilders, } from './builders';
-export type { StencilBuilder, StencilBuildContext } from './builders';

package/src/libs/element/src/lib/stencil-kit/index.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.registeredStencilBuilders = exports.unregisterStencilBuilder = exports.getStencilBuilder = exports.registerStencilBuilder = exports.ensureStencilKitStyles = exports.bindShapeDataPanel = exports.bindStencilPalette = void 0;
-var palette_1 = require("./palette");
-Object.defineProperty(exports, "bindStencilPalette", { enumerable: true, get: function () { return palette_1.bindStencilPalette; } });
-var shape_data_1 = require("./shape-data");
-Object.defineProperty(exports, "bindShapeDataPanel", { enumerable: true, get: function () { return shape_data_1.bindShapeDataPanel; } });
-var styles_1 = require("./styles");
-Object.defineProperty(exports, "ensureStencilKitStyles", { enumerable: true, get: function () { return styles_1.ensureStencilKitStyles; } });
-var builders_1 = require("./builders");
-Object.defineProperty(exports, "registerStencilBuilder", { enumerable: true, get: function () { return builders_1.registerStencilBuilder; } });
-Object.defineProperty(exports, "getStencilBuilder", { enumerable: true, get: function () { return builders_1.getStencilBuilder; } });
-Object.defineProperty(exports, "unregisterStencilBuilder", { enumerable: true, get: function () { return builders_1.unregisterStencilBuilder; } });
-Object.defineProperty(exports, "registeredStencilBuilders", { enumerable: true, get: function () { return builders_1.registeredStencilBuilders; } });
-const card_builders_1 = require("./card-builders");
-// The ER/UML card builders ship registered — dropping "Entity" gives a real,
-// editable table out of the box.
-(0, card_builders_1.registerCardBuilders)();
-//# sourceMappingURL=index.js.map

package/src/libs/element/src/lib/stencil-kit/palette.d.ts

@@ -1,93 +0,0 @@
-/**
- * The stencil palette — the signature Visio surface: a categorized, searchable
- * list of shape masters you DRAG ONTO THE CANVAS.
- *
- * Two halves, deliberately in one module because they share the drag contract:
- *   T6  the palette UI    — sections from `listStencils()`, live search, and a
- *                           thumbnail drawn from the master's OWN outline
- *                           geometry (`getShape(type).outline(w,h)`), so what
- *                           you see in the palette is the shape you get.
- *   T7  drag-to-place     — HTML5 drag-and-drop (not pointer events: the canvas
- *                           binder consumes pointerdown, and DnD is the gesture
- *                           browsers already route across two elements). The
- *                           drop lands the master at the cursor as ONE undoable
- *                           BatchCommand.
- */
-import { type Stencil, type NodeTemplate } from '@grafloria/engine';
-/** The bits of a diagram instance the palette needs (kept structural so any
- *  host — element, React, Vue — satisfies it without importing a class). */
-export interface StencilPaletteApi {
-    getEngine(): any;
-    getModel(): any;
-    viewport: {
-        clientToWorld(x: number, y: number, rect: {
-            left: number;
-            top: number;
-            width: number;
-            height: number;
-        }): {
-            x: number;
-            y: number;
-        };
-    };
-}
-export interface StencilPaletteOptions {
-    /** Sections to show (default: every built-in stencil). */
-    stencils?: Stencil[];
-    /** Show the search box (default true). */
-    search?: boolean;
-    /** Stencil ids to render collapsed initially (default: all but the first). */
-    collapsed?: string[];
-    /** Data merged into every placed master (e.g. a default label). */
-    data?: (master: NodeTemplate) => Record<string, unknown>;
-    /** Called after a master is placed on the canvas. */
-    onPlace?: (info: {
-        master: NodeTemplate;
-        nodeId: string;
-        x: number;
-        y: number;
-    }) => void;
-    /**
-     * Restyle the shapes per stencil WITHOUT editing any master — the seam that
-     * makes stencil colour a host/theme decision instead of baked template data.
-     * Keyed by stencil id (`flowchart`, `bpmn`, `uml`, `erd`); each entry
-     * overrides the master's own `fill` / `stroke`. Pass `'theme'` for a value to
-     * take it from the live theme instead of a literal.
-     *
-     *   bindStencilPalette(api, hosts, {
-     *     notationTheme: { flowchart: { fill: 'theme', stroke: '#0f172a' } },
-     *   })
-     */
-    notationTheme?: Record<string, {
-        fill?: string;
-        stroke?: string;
-    }>;
-    /**
-     * Opt a placed master INTO `useHTMLLayer`. Only set this when the host really
-     * runs an HTML layer that paints `node.data._html` — with the plain SVG
-     * renderer the flag makes the node render as an empty group.
-     */
-    htmlLayer?: boolean;
-}
-export interface StencilPaletteHandle {
-    /** Filter the list programmatically (same as typing in the search box). */
-    setSearch(query: string): void;
-    /** Place a master at a WORLD point without dragging (keyboard / test path). */
-    place(masterId: string, world: {
-        x: number;
-        y: number;
-    }): Promise<string | null>;
-    /** Remove listeners and the palette DOM. */
-    destroy(): void;
-}
-/**
- * Build a stencil palette in `palette` that drops masters onto `canvas`.
- *
- * @param api     the diagram instance (engine + model + viewport)
- * @param hosts   `palette`: where the list renders · `canvas`: the drop target
- *                (the element the diagram is mounted in)
- */
-export declare function bindStencilPalette(api: StencilPaletteApi, hosts: {
-    palette: HTMLElement;
-    canvas: HTMLElement;
-}, options?: StencilPaletteOptions): StencilPaletteHandle;

package/src/libs/element/src/lib/stencil-kit/palette.js

@@ -1,430 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.bindStencilPalette = bindStencilPalette;
-const tslib_1 = require("tslib");
-/**
- * The stencil palette — the signature Visio surface: a categorized, searchable
- * list of shape masters you DRAG ONTO THE CANVAS.
- *
- * Two halves, deliberately in one module because they share the drag contract:
- *   T6  the palette UI    — sections from `listStencils()`, live search, and a
- *                           thumbnail drawn from the master's OWN outline
- *                           geometry (`getShape(type).outline(w,h)`), so what
- *                           you see in the palette is the shape you get.
- *   T7  drag-to-place     — HTML5 drag-and-drop (not pointer events: the canvas
- *                           binder consumes pointerdown, and DnD is the gesture
- *                           browsers already route across two elements). The
- *                           drop lands the master at the cursor as ONE undoable
- *                           BatchCommand.
- */
-const engine_1 = require("@grafloria/engine");
-const renderer_1 = require("@grafloria/renderer");
-const styles_1 = require("./styles");
-const builders_1 = require("./builders");
-const SVG_NS = 'http://www.w3.org/2000/svg';
-/** The MIME the palette drags with — namespaced so a page's other DnD is untouched. */
-const DND_TYPE = 'application/x-grafloria-master';
-/**
- * Repaint a placed master from the host's per-notation palette.
- *
- * Colour used to live only in the 80 generated templates, so restyling meant
- * editing template data — impossible for an embedder. This applies the caller's
- * scheme on top, and `'theme'` resolves against the live theme so a colour-mode
- * swap carries the stencils with it.
- */
-function applyNotationTheme(node, stencilId, scheme, api) {
-    var _a, _b, _c, _d, _e;
-    if (!stencilId || !scheme)
-        return;
-    const want = scheme[stencilId];
-    if (!want)
-        return;
-    const shape = Object.assign({}, ((_b = (_a = node.getMetadata) === null || _a === void 0 ? void 0 : _a.call(node, 'shape')) !== null && _b !== void 0 ? _b : {}));
-    const theme = (_e = (_d = (_c = api).getTheme) === null || _d === void 0 ? void 0 : _d.call(_c)) !== null && _e !== void 0 ? _e : null;
-    const resolve = (v, token) => {
-        var _a, _b, _c, _d;
-        return v === 'theme'
-            ? (_d = (token === 'surface' ? (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b.paper : (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary)) !== null && _d !== void 0 ? _d : undefined
-            : v;
-    };
-    const fill = resolve(want.fill, 'surface');
-    const stroke = resolve(want.stroke, 'ink');
-    if (fill !== undefined)
-        shape.fill = fill;
-    if (stroke !== undefined)
-        shape.stroke = stroke;
-    node.setMetadata('shape', shape);
-}
-/** UML classifiers get a name compartment + a member compartment.
- *  Keys are MASTER IDS — `uml-enum` / `uml-primitive-type` are the generated
- *  ids (the old `uml-enumeration` / `uml-primitivetype` keys matched nothing,
- *  so those two masters dropped as bare rectangles with no card). */
-const UML_CLASSIFIERS = {
-    'uml-class': null, 'uml-abstract-class': '«abstract»', 'uml-interface': '«interface»',
-    'uml-enum': '«enumeration»', 'uml-datatype': '«dataType»',
-    'uml-primitive-type': '«primitive»', 'uml-signal': '«signal»', 'uml-object': null,
-};
-/** BPMN event types carry their trigger glyph inside the circle. */
-const BPMN_EVENT_GLYPH = {
-    'bpmn-message-event': '✉', 'bpmn-timer-event': '⏱', 'bpmn-error-event': '⚡',
-};
-/**
- * Give a placed master its notation furniture: UML compartments, or a BPMN
- * event trigger glyph. Both ride `metadata.panel`, so they paint in SVG and
- * survive export — see the note at the call site.
- */
-function applyNotationPanel(node, masterId, master) {
-    var _a, _b, _c;
-    const glyph = BPMN_EVENT_GLYPH[masterId];
-    if (glyph) {
-        // CENTRED, as BPMN draws its trigger glyphs — the caption now paints BELOW
-        // the circle (labelPlacement), so the middle belongs to the badge.
-        node.setMetadata('panel', { icon: { glyph, size: 16, corner: 'c' } });
-        return;
-    }
-    if (!(masterId in UML_CLASSIFIERS))
-        return;
-    const stereotype = UML_CLASSIFIERS[masterId];
-    const name = (_b = (_a = master.meta) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'Class';
-    // Placeholder members, so a dropped classifier looks like a UML card the user
-    // can then edit rather than an empty box.
-    const rows = masterId === 'uml-enum'
-        ? [{ text: 'VALUE_A' }, { text: 'VALUE_B' }]
-        : [{ text: '+ field: Type' }, { text: '+ method(): void' }];
-    node.setMetadata('panel', {
-        // A stereotyped classifier stacks «stereotype» OVER the name, the way UML
-        // draws its cards — inline ("«enumeration» Enumeration") the header line
-        // was wider than the card and painted cut off at both edges.
-        header: stereotype ? { lines: [stereotype, name] } : { text: name },
-        rows,
-        rowHeight: 18,
-    });
-    // The header IS the classifier's name, so the node's own centred label would
-    // simply repeat it in the gap between the compartments.
-    (_c = node.setLabel) === null || _c === void 0 ? void 0 : _c.call(node, '');
-}
-/** A thumbnail SVG for a master, drawn from its real outline + declared paint. */
-function thumbnail(master, box = 34) {
-    var _a, _b, _c, _d, _e, _f;
-    const svg = document.createElementNS(SVG_NS, 'svg');
-    svg.setAttribute('width', String(box));
-    svg.setAttribute('height', String(box));
-    svg.setAttribute('viewBox', `0 0 ${box} ${box}`);
-    svg.setAttribute('aria-hidden', 'true');
-    const struct = (_a = master.structure) !== null && _a !== void 0 ? _a : {};
-    const paint = (_b = struct.shape) !== null && _b !== void 0 ? _b : {};
-    // Preserve the master's aspect ratio inside the square, with a hairline inset
-    // so a 2px stroke isn't clipped at the edges.
-    const w0 = Number((_c = struct.size) === null || _c === void 0 ? void 0 : _c.width) || 100;
-    const h0 = Number((_d = struct.size) === null || _d === void 0 ? void 0 : _d.height) || 60;
-    const pad = 3;
-    const s = Math.min((box - pad * 2) / w0, (box - pad * 2) / h0);
-    const w = Math.max(6, w0 * s);
-    const h = Math.max(6, h0 * s);
-    let el;
-    try {
-        const spec = (0, renderer_1.getShape)(paint.type).outline(w, h);
-        el = document.createElementNS(SVG_NS, spec.el);
-        for (const [k, v] of Object.entries(spec.geom))
-            el.setAttribute(k, String(v));
-    }
-    catch (_g) {
-        el = document.createElementNS(SVG_NS, 'rect');
-        el.setAttribute('width', String(w));
-        el.setAttribute('height', String(h));
-        el.setAttribute('rx', '3');
-    }
-    el.setAttribute('fill', (_e = paint.fill) !== null && _e !== void 0 ? _e : '#eef1fb');
-    el.setAttribute('stroke', (_f = paint.stroke) !== null && _f !== void 0 ? _f : '#3B52D9');
-    el.setAttribute('stroke-width', String(Math.min(Number(paint.strokeWidth) || 1.5, 2)));
-    const g = document.createElementNS(SVG_NS, 'g');
-    g.setAttribute('transform', `translate(${(box - w) / 2} ${(box - h) / 2})`);
-    g.appendChild(el);
-    svg.appendChild(g);
-    return svg;
-}
-/** Root + descendants, so a multi-node master commits (and undoes) as a unit. */
-function subtree(diagram, root) {
-    var _a;
-    const out = [root];
-    const stack = [root];
-    while (stack.length) {
-        const n = stack.pop();
-        const ids = Array.from((_a = n === null || n === void 0 ? void 0 : n.children) !== null && _a !== void 0 ? _a : []);
-        for (const id of ids) {
-            const c = diagram.getNode(id);
-            if (c) {
-                out.push(c);
-                stack.push(c);
-            }
-        }
-    }
-    return out;
-}
-/**
- * Build a stencil palette in `palette` that drops masters onto `canvas`.
- *
- * @param api     the diagram instance (engine + model + viewport)
- * @param hosts   `palette`: where the list renders · `canvas`: the drop target
- *                (the element the diagram is mounted in)
- */
-function bindStencilPalette(api, hosts, options = {}) {
-    var _a, _b, _c;
-    (0, styles_1.ensureStencilKitStyles)((_a = hosts.palette.ownerDocument) !== null && _a !== void 0 ? _a : document);
-    const stencils = (_b = options.stencils) !== null && _b !== void 0 ? _b : (0, engine_1.listStencils)();
-    /** master id → stencil id, so a drop knows which notation it belongs to. */
-    const stencilOf = new Map();
-    for (const st of stencils)
-        for (const m of st.masters)
-            stencilOf.set(m.id, st.id);
-    const collapsed = new Set((_c = options.collapsed) !== null && _c !== void 0 ? _c : stencils.slice(1).map((s) => s.id));
-    const { palette, canvas } = hosts;
-    let query = '';
-    palette.classList.add('gf-stencil');
-    palette.innerHTML = '';
-    // ── search ───────────────────────────────────────────────────────────────
-    let input = null;
-    if (options.search !== false) {
-        const wrap = document.createElement('div');
-        wrap.className = 'gf-stencil-search';
-        input = document.createElement('input');
-        input.type = 'search';
-        input.placeholder = 'Search shapes…';
-        input.setAttribute('aria-label', 'Search shapes');
-        input.addEventListener('input', () => { query = input.value.trim().toLowerCase(); renderList(); });
-        wrap.appendChild(input);
-        palette.appendChild(wrap);
-    }
-    const body = document.createElement('div');
-    body.className = 'gf-stencil-body';
-    palette.appendChild(body);
-    /** A master matches on its display name, its id, or any of its tags. */
-    const matches = (m) => {
-        var _a, _b;
-        if (!query)
-            return true;
-        const meta = (_a = m.meta) !== null && _a !== void 0 ? _a : {};
-        const hay = [meta.name, m.id, ...((_b = meta.tags) !== null && _b !== void 0 ? _b : [])].join(' ').toLowerCase();
-        return hay.includes(query);
-    };
-    function renderList() {
-        body.innerHTML = '';
-        let shown = 0;
-        for (const stencil of stencils) {
-            const hits = stencil.masters.filter(matches);
-            if (hits.length === 0)
-                continue;
-            shown += hits.length;
-            const group = document.createElement('details');
-            group.className = 'gf-stencil-group';
-            // A search always opens the sections that matched; otherwise honour the
-            // caller's collapsed set.
-            group.open = query ? true : !collapsed.has(stencil.id);
-            group.addEventListener('toggle', () => {
-                if (query)
-                    return;
-                if (group.open)
-                    collapsed.delete(stencil.id);
-                else
-                    collapsed.add(stencil.id);
-            });
-            const summary = document.createElement('summary');
-            summary.append(stencil.name);
-            const count = document.createElement('span');
-            count.className = 'gf-stencil-count';
-            count.textContent = String(hits.length);
-            summary.appendChild(count);
-            summary.title = stencil.description;
-            group.appendChild(summary);
-            const items = document.createElement('div');
-            items.className = 'gf-stencil-items';
-            for (const master of hits)
-                items.appendChild(itemEl(master));
-            group.appendChild(items);
-            body.appendChild(group);
-        }
-        if (shown === 0) {
-            const empty = document.createElement('div');
-            empty.className = 'gf-stencil-empty';
-            empty.textContent = query ? `No shapes match “${query}”.` : 'No stencils.';
-            body.appendChild(empty);
-        }
-    }
-    // ── drag ghost ───────────────────────────────────────────────────────────
-    // A lightweight preview that follows the cursor during a palette drag, so
-    // the user can see WHAT they are holding and WHERE it will land. A DOM
-    // element rather than `setDragImage`: the native drag image is browser
-    // chrome — it never appears in a screenshot, and headless/some platforms do
-    // not paint it at all, which is exactly how "dragging from the rail shows no
-    // preview" shipped unnoticed.
-    let ghost = null;
-    const moveGhost = (e) => {
-        if (!ghost)
-            return;
-        ghost.style.left = `${e.clientX}px`;
-        ghost.style.top = `${e.clientY}px`;
-    };
-    const killGhost = () => {
-        ghost === null || ghost === void 0 ? void 0 : ghost.remove();
-        ghost = null;
-        document.removeEventListener('dragover', moveGhost);
-    };
-    const spawnGhost = (master, e) => {
-        var _a, _b;
-        killGhost();
-        const meta = (_a = master.meta) !== null && _a !== void 0 ? _a : {};
-        ghost = document.createElement('div');
-        ghost.className = 'gf-stencil-ghost';
-        ghost.appendChild(thumbnail(master, 28));
-        ghost.append((_b = meta.name) !== null && _b !== void 0 ? _b : master.id);
-        ghost.style.left = `${e.clientX}px`;
-        ghost.style.top = `${e.clientY}px`;
-        document.body.appendChild(ghost);
-        // dragover fires document-wide throughout an HTML5 drag — the one stream
-        // that reliably carries live coordinates on every platform.
-        document.addEventListener('dragover', moveGhost);
-    };
-    function itemEl(master) {
-        var _a, _b, _c;
-        const meta = (_a = master.meta) !== null && _a !== void 0 ? _a : {};
-        const el = document.createElement('div');
-        el.className = 'gf-stencil-item';
-        el.draggable = true;
-        el.dataset['masterId'] = master.id;
-        el.title = meta.description ? `${meta.name} — ${meta.description}` : (_b = meta.name) !== null && _b !== void 0 ? _b : master.id;
-        el.appendChild(thumbnail(master));
-        const label = document.createElement('span');
-        label.className = 'gf-stencil-label';
-        label.textContent = (_c = meta.name) !== null && _c !== void 0 ? _c : master.id;
-        el.appendChild(label);
-        el.addEventListener('dragstart', (e) => {
-            var _a;
-            const dt = e.dataTransfer;
-            if (!dt)
-                return;
-            dt.setData(DND_TYPE, master.id);
-            dt.setData('text/plain', (_a = meta.name) !== null && _a !== void 0 ? _a : master.id); // so a stray drop is harmless text
-            dt.effectAllowed = 'copy';
-            // Suppress the native drag snapshot where it IS painted — otherwise the
-            // ghost and the platform preview would ride the cursor together.
-            if (typeof Image !== 'undefined' && dt.setDragImage) {
-                const blank = new Image();
-                blank.src =
-                    'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
-                dt.setDragImage(blank, 0, 0);
-            }
-            spawnGhost(master, e);
-        });
-        el.addEventListener('dragend', killGhost);
-        return el;
-    }
-    // ── drop-to-place on the canvas ──────────────────────────────────────────
-    const heldMaster = (e) => {
-        const dt = e.dataTransfer;
-        if (!dt)
-            return null;
-        // `getData` is empty during dragover in most browsers — the TYPE is the
-        // reliable signal there, and the id itself is read on drop.
-        return dt.types.includes(DND_TYPE) ? (dt.getData(DND_TYPE) || '') : null;
-    };
-    const onDragOver = (e) => {
-        if (heldMaster(e) === null)
-            return;
-        e.preventDefault(); // required, or the drop never fires
-        if (e.dataTransfer)
-            e.dataTransfer.dropEffect = 'copy';
-        canvas.classList.add('gf-stencil-target');
-    };
-    const onDragLeave = (e) => {
-        if (e.relatedTarget && canvas.contains(e.relatedTarget))
-            return;
-        canvas.classList.remove('gf-stencil-target');
-    };
-    const onDrop = (e) => {
-        const id = heldMaster(e);
-        canvas.classList.remove('gf-stencil-target');
-        killGhost();
-        if (!id)
-            return;
-        e.preventDefault();
-        const rect = canvas.getBoundingClientRect();
-        void place(id, api.viewport.clientToWorld(e.clientX, e.clientY, rect));
-    };
-    canvas.addEventListener('dragover', onDragOver);
-    canvas.addEventListener('dragleave', onDragLeave);
-    canvas.addEventListener('drop', onDrop);
-    /**
-     * Stamp `masterId` centred on a world point, as ONE undo entry.
-     *
-     * `NodeFactory.createFromTemplate` adds straight to the model (no command), so
-     * the created subtree is captured, taken back out, and re-applied through the
-     * CommandManager — one Ctrl+Z removes the whole shape, and collab sees a
-     * normal add.
-     */
-    function place(masterId, world) {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            const engine = api.getEngine();
-            const diagram = api.getModel();
-            const registry = engine === null || engine === void 0 ? void 0 : engine.templateRegistry;
-            const master = registry === null || registry === void 0 ? void 0 : registry.get(masterId);
-            if (!master || !diagram)
-                return null;
-            const struct = (_a = master.structure) !== null && _a !== void 0 ? _a : {};
-            const w = Number((_b = struct.size) === null || _b === void 0 ? void 0 : _b.width) || 100;
-            const h = Number((_c = struct.size) === null || _c === void 0 ? void 0 : _c.height) || 60;
-            const at = { x: world.x - w / 2, y: world.y - h / 2 }; // drop centres on the cursor
-            // A master may resolve to a registered BUILDER (an ER entity / UML class is
-            // a kit card, not a silhouette). Anything without one takes the template
-            // path — see stencil-kit/builders.ts for why this is a registry and not an
-            // id check inside the palette.
-            const builder = (0, builders_1.getStencilBuilder)(masterId);
-            const built = builder ? builder({ api, master, at }) : null;
-            const factory = built ? null : new engine_1.NodeFactory(registry, diagram);
-            const root = built !== null && built !== void 0 ? built : factory.createFromTemplate(masterId, (_e = (_d = options.data) === null || _d === void 0 ? void 0 : _d.call(options, master)) !== null && _e !== void 0 ? _e : {}, at);
-            const created = built ? [built] : subtree(diagram, root);
-            // NOTE: masters used to need `useHTMLLayer` stripped here or they rendered
-            // as empty groups. That is fixed at the source now (NodeFactory no longer
-            // sets the flag — see NodeFactory.html-contract.spec.ts), so the workaround
-            // is gone. `htmlLayer: true` is still honoured for hosts that set the flag
-            // themselves and DO run a layer that paints it.
-            if (options.htmlLayer === true) {
-                for (const n of created)
-                    n.setMetadata('useHTMLLayer', true);
-            }
-            // COMPARTMENTS & EVENT MARKERS. `metadata.panel` drives the renderer's
-            // composite-panel overlay (header band + stacked rows + a corner glyph) —
-            // a complete, themed, SVG-NATIVE subsystem that shipped with zero callers.
-            // Using it here rather than the UML kit's `metadata.html` route is
-            // deliberate: an HTML-layer card is not vector-exportable and depends on a
-            // layer the plain SVG embed does not run — the exact dependency that made
-            // every dropped master render blank.
-            applyNotationPanel(root, masterId, master);
-            applyNotationTheme(root, stencilOf.get(masterId), options.notationTheme, api);
-            // Serialize into commands BEFORE detaching (AddNodeCommand snapshots in its
-            // constructor), then detach and replay through the command manager.
-            const cmds = created.map((n) => new engine_1.AddNodeCommand(n));
-            for (const n of [...created].reverse())
-                diagram.removeNode(n.id);
-            yield engine.commandManager.execute(new engine_1.BatchCommand(`Place ${(_g = (_f = master.meta) === null || _f === void 0 ? void 0 : _f.name) !== null && _g !== void 0 ? _g : masterId}`, cmds));
-            (_h = options.onPlace) === null || _h === void 0 ? void 0 : _h.call(options, { master, nodeId: root.id, x: at.x, y: at.y });
-            return root.id;
-        });
-    }
-    renderList();
-    return {
-        setSearch(q) { query = (q !== null && q !== void 0 ? q : '').trim().toLowerCase(); if (input)
-            input.value = q !== null && q !== void 0 ? q : ''; renderList(); },
-        place,
-        destroy() {
-            killGhost();
-            canvas.removeEventListener('dragover', onDragOver);
-            canvas.removeEventListener('dragleave', onDragLeave);
-            canvas.removeEventListener('drop', onDrop);
-            canvas.classList.remove('gf-stencil-target');
-            palette.classList.remove('gf-stencil');
-            palette.innerHTML = '';
-        },
-    };
-}
-//# sourceMappingURL=palette.js.map