@grafloria/element 0.3.18 → 0.3.20

package/esm/src/lib/stencil-kit/card-builders.js

@@ -0,0 +1,105 @@
+/**
+ * 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.
+ */
+import { NodeModel } from '@grafloria/engine';
+import { entityCardContent, entityAutoHeight, classCardContent, classAutoHeight, bindRowInteractions, bindCardEditing, ensureDiagramKitStyles, } from '../diagram-kit';
+import { registerStencilBuilder } from './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;
+    ensureDiagramKitStyles();
+    const node = new 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 {
+            bindRowInteractions(kitApi);
+        }
+        catch ( /* optional */_e) { /* optional */ }
+        try {
+            bindCardEditing(kitApi);
+        }
+        catch ( /* optional */_f) { /* optional */ }
+    }
+    return node;
+}
+/** Register the built-in card builders (ER entity/table, UML classifiers). */
+export function registerCardBuilders() {
+    for (const masterId of ['erd-entity', 'erd-table', 'erd-associative-entity', 'erd-bridge-entity']) {
+        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: entityAutoHeight(spec, true),
+                content: entityCardContent(spec, true),
+                metaKey: 'kitEntity',
+                spec,
+            });
+        });
+    }
+    for (const masterId of ['uml-class', 'uml-abstract-class', 'uml-interface']) {
+        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: classAutoHeight(spec, true),
+                content: classCardContent(spec, true),
+                metaKey: 'kitClass',
+                spec,
+            });
+        });
+    }
+}
+//# sourceMappingURL=card-builders.js.map

package/esm/src/lib/stencil-kit/index.js

@@ -0,0 +1,9 @@
+export { bindStencilPalette } from './palette';
+export { bindShapeDataPanel } from './shape-data';
+export { ensureStencilKitStyles } from './styles';
+export { registerStencilBuilder, getStencilBuilder, unregisterStencilBuilder, registeredStencilBuilders, } from './builders';
+import { registerCardBuilders } from './card-builders';
+// The ER/UML card builders ship registered — dropping "Entity" gives a real,
+// editable table out of the box.
+registerCardBuilders();
+//# sourceMappingURL=index.js.map

package/esm/src/lib/stencil-kit/palette.js

@@ -0,0 +1,427 @@
+import { __awaiter } from "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.
+ */
+import { listStencils, NodeFactory, AddNodeCommand, BatchCommand, } from '@grafloria/engine';
+import { getShape } from '@grafloria/renderer';
+import { ensureStencilKitStyles } from './styles';
+import { getStencilBuilder } from './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 = 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)
+ */
+export function bindStencilPalette(api, hosts, options = {}) {
+    var _a, _b, _c;
+    ensureStencilKitStyles((_a = hosts.palette.ownerDocument) !== null && _a !== void 0 ? _a : document);
+    const stencils = (_b = options.stencils) !== null && _b !== void 0 ? _b : 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 __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 = getStencilBuilder(masterId);
+            const built = builder ? builder({ api, master, at }) : null;
+            const factory = built ? null : new 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 AddNodeCommand(n));
+            for (const n of [...created].reverse())
+                diagram.removeNode(n.id);
+            yield engine.commandManager.execute(new 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