@grafloria/element 0.3.4 → 0.3.6

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

@@ -0,0 +1,291 @@
+"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 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';
+/** 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)();
+    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);
+        }
+    }
+    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';
+        });
+        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');
+        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, _j;
+            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
+            const factory = new engine_1.NodeFactory(registry, diagram);
+            const root = 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 = subtree(diagram, root);
+            // `NodeFactory` flags any master carrying `structure.html` as `useHTMLLayer`
+            // — and the SVG renderer answers that flag with an EMPTY <g> (it expects an
+            // HTML layer to paint the body from `metadata.html`, while the factory
+            // stashes its config on `node.data._html` instead). All 80 generated masters
+            // declare html, so every dropped shape rendered as nothing at all.
+            //
+            // The geometry the palette already drew as a thumbnail is right there in
+            // `metadata.shape`, so drop the flag and let the SVG path paint the real
+            // silhouette + label. Hosts that DO run an HTML layer can opt back in with
+            // `htmlLayer: true`.
+            if (options.htmlLayer !== true) {
+                for (const n of created) {
+                    if (((_f = n.getMetadata) === null || _f === void 0 ? void 0 : _f.call(n, 'useHTMLLayer')) === true)
+                        n.setMetadata('useHTMLLayer', false);
+                }
+            }
+            // 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 ${(_h = (_g = master.meta) === null || _g === void 0 ? void 0 : _g.name) !== null && _h !== void 0 ? _h : masterId}`, cmds));
+            (_j = options.onPlace) === null || _j === void 0 ? void 0 : _j.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() {
+            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

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

@@ -0,0 +1 @@
+{"version":3,"file":"palette.js","sourceRoot":"","sources":["../../../../../../libs/element/src/lib/stencil-kit/palette.ts"],"names":[],"mappings":";;AAiIA,gDAyMC;;AA1UD;;;;;;;;;;;;;;GAcG;AACH,8CAO2B;AAC3B,kDAA+C;AAC/C,qCAAkD;AAElD,MAAM,MAAM,GAAG,4BAA4B,CAAC;AAC5C,uFAAuF;AACvF,MAAM,QAAQ,GAAG,gCAAgC,CAAC;AAsClD,kFAAkF;AAClF,SAAS,SAAS,CAAC,MAAoB,EAAE,GAAG,GAAG,EAAE;;IAC/C,MAAM,GAAG,GAAG,QAAQ,CAAC,eAAe,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACpD,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;IACvC,GAAG,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;IACxC,GAAG,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,EAAE,CAAC,CAAC;IACjD,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAExC,MAAM,MAAM,GAAQ,MAAC,MAAc,CAAC,SAAS,mCAAI,EAAE,CAAC;IACpD,MAAM,KAAK,GAAG,MAAA,MAAM,CAAC,KAAK,mCAAI,EAAE,CAAC;IACjC,8EAA8E;IAC9E,8CAA8C;IAC9C,MAAM,EAAE,GAAG,MAAM,CAAC,MAAA,MAAM,CAAC,IAAI,0CAAE,KAAK,CAAC,IAAI,GAAG,CAAC;IAC7C,MAAM,EAAE,GAAG,MAAM,CAAC,MAAA,MAAM,CAAC,IAAI,0CAAE,MAAM,CAAC,IAAI,EAAE,CAAC;IAC7C,MAAM,GAAG,GAAG,CAAC,CAAC;IACd,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC/D,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC;IAC9B,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC;IAE9B,IAAI,EAAc,CAAC;IACnB,IAAI,CAAC;QACH,MAAM,IAAI,GAAG,IAAA,mBAAQ,EAAC,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAChD,EAAE,GAAG,QAAQ,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,EAAY,CAAC,CAAC;QACzD,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;YAAE,EAAE,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAChF,CAAC;IAAC,WAAM,CAAC;QACP,EAAE,GAAG,QAAQ,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC9C,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACpC,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QACrC,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAC7B,CAAC;IACD,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,MAAA,KAAK,CAAC,IAAI,mCAAI,SAAS,CAAC,CAAC;IACjD,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,SAAS,CAAC,CAAC;IACrD,EAAE,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvF,MAAM,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChD,CAAC,CAAC,YAAY,CAAC,WAAW,EAAE,aAAa,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5E,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IACnB,OAAO,GAAG,CAAC;AACb,CAAC;AAED,iFAAiF;AACjF,SAAS,OAAO,CAAC,OAAY,EAAE,IAAS;;IACtC,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;IACnB,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,CAAC;IACrB,OAAO,KAAK,CAAC,MAAM,EAAE,CAAC;QACpB,MAAM,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC;QACtB,MAAM,GAAG,GAAa,KAAK,CAAC,IAAI,CAAC,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,QAAQ,mCAAI,EAAE,CAAC,CAAC;QACpD,KAAK,MAAM,EAAE,IAAI,GAAG,EAAE,CAAC;YACrB,MAAM,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YAC9B,IAAI,CAAC,EAAE,CAAC;gBAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAAC,CAAC;QACxC,CAAC;IACH,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC;AAED;;;;;;GAMG;AACH,SAAgB,kBAAkB,CAChC,GAAsB,EACtB,KAAoD,EACpD,UAAiC,EAAE;;IAEnC,IAAA,+BAAsB,EAAC,MAAA,KAAK,CAAC,OAAO,CAAC,aAAa,mCAAI,QAAQ,CAAC,CAAC;IAEhE,MAAM,QAAQ,GAAG,MAAA,OAAO,CAAC,QAAQ,mCAAI,IAAA,qBAAY,GAAE,CAAC;IACpD,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,MAAA,OAAO,CAAC,SAAS,mCAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACnF,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAClC,IAAI,KAAK,GAAG,EAAE,CAAC;IAEf,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IACpC,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC;IAEvB,4EAA4E;IAC5E,IAAI,KAAK,GAA4B,IAAI,CAAC;IAC1C,IAAI,OAAO,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;QAC7B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,CAAC,SAAS,GAAG,mBAAmB,CAAC;QACrC,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACxC,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC;QACtB,KAAK,CAAC,WAAW,GAAG,gBAAgB,CAAC;QACrC,KAAK,CAAC,YAAY,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC;QAClD,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,GAAG,KAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACpG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACxB,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAED,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,CAAC,SAAS,GAAG,iBAAiB,CAAC;IACnC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAE1B,wEAAwE;IACxE,MAAM,OAAO,GAAG,CAAC,CAAe,EAAE,EAAE;;QAClC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC;QACxB,MAAM,IAAI,GAAQ,MAAC,CAAS,CAAC,IAAI,mCAAI,EAAE,CAAC;QACxC,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC;QAC5E,OAAO,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,SAAS,UAAU;QACjB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;QACpB,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;YAC/B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAC7C,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;gBAAE,SAAS;YAChC,KAAK,IAAI,IAAI,CAAC,MAAM,CAAC;YAErB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YAChD,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;YACrC,wEAAwE;YACxE,0BAA0B;YAC1B,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACvD,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;gBACpC,IAAI,KAAK;oBAAE,OAAO;gBAClB,IAAI,KAAK,CAAC,IAAI;oBAAE,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;;oBAAM,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YAC/E,CAAC,CAAC,CAAC;YAEH,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YAClD,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAC7B,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAC7C,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;YACrC,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACxC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YAC3B,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,WAAW,CAAC;YACpC,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YAE3B,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC5C,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;YACrC,KAAK,MAAM,MAAM,IAAI,IAAI;gBAAE,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;YAC7D,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACzB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;QACD,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAChB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC5C,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;YACrC,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,oBAAoB,KAAK,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC;YAC3E,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,SAAS,MAAM,CAAC,MAAoB;;QAClC,MAAM,IAAI,GAAQ,MAAC,MAAc,CAAC,IAAI,mCAAI,EAAE,CAAC;QAC7C,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzC,EAAE,CAAC,SAAS,GAAG,iBAAiB,CAAC;QACjC,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC;QACpB,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC,EAAE,CAAC;QACnC,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,IAAI,mCAAI,MAAM,CAAC,EAAE,CAAC;QAC5F,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC;QAClC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC7C,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAC;QACrC,KAAK,CAAC,WAAW,GAAG,MAAA,IAAI,CAAC,IAAI,mCAAI,MAAM,CAAC,EAAE,CAAC;QAC3C,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAEtB,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;;YACrC,MAAM,EAAE,GAAI,CAAe,CAAC,YAAY,CAAC;YACzC,IAAI,CAAC,EAAE;gBAAE,OAAO;YAChB,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;YAChC,EAAE,CAAC,OAAO,CAAC,YAAY,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,mCAAmC;YACrF,EAAE,CAAC,aAAa,GAAG,MAAM,CAAC;QAC5B,CAAC,CAAC,CAAC;QACH,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,4EAA4E;IAC5E,MAAM,UAAU,GAAG,CAAC,CAAY,EAAiB,EAAE;QACjD,MAAM,EAAE,GAAG,CAAC,CAAC,YAAY,CAAC;QAC1B,IAAI,CAAC,EAAE;YAAE,OAAO,IAAI,CAAC;QACrB,wEAAwE;QACxE,4DAA4D;QAC5D,OAAO,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC3E,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,CAAY,EAAE,EAAE;QAClC,IAAI,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI;YAAE,OAAO;QACnC,CAAC,CAAC,cAAc,EAAE,CAAC,CAAuB,oCAAoC;QAC9E,IAAI,CAAC,CAAC,YAAY;YAAE,CAAC,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM,CAAC;QACvD,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAC5C,CAAC,CAAC;IACF,MAAM,WAAW,GAAG,CAAC,CAAY,EAAE,EAAE;QACnC,IAAI,CAAC,CAAC,aAAa,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAqB,CAAC;YAAE,OAAO;QACxE,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;IAC/C,CAAC,CAAC;IACF,MAAM,MAAM,GAAG,CAAC,CAAY,EAAE,EAAE;QAC9B,MAAM,EAAE,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QACzB,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;QAC7C,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QAC5C,KAAK,KAAK,CAAC,EAAE,EAAE,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IACzE,CAAC,CAAC;IAEF,MAAM,CAAC,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;IAChD,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IAClD,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAExC;;;;;;;OAOG;IACH,SAAe,KAAK,CAAC,QAAgB,EAAE,KAA+B;;;YACpE,MAAM,MAAM,GAAG,GAAG,CAAC,SAAS,EAAE,CAAC;YAC/B,MAAM,OAAO,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;YAC/B,MAAM,QAAQ,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC;YAC1C,MAAM,MAAM,GAA6B,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;YACjE,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO;gBAAE,OAAO,IAAI,CAAC;YAErC,MAAM,MAAM,GAAQ,MAAC,MAAc,CAAC,SAAS,mCAAI,EAAE,CAAC;YACpD,MAAM,CAAC,GAAG,MAAM,CAAC,MAAA,MAAM,CAAC,IAAI,0CAAE,KAAK,CAAC,IAAI,GAAG,CAAC;YAC5C,MAAM,CAAC,GAAG,MAAM,CAAC,MAAA,MAAM,CAAC,IAAI,0CAAE,MAAM,CAAC,IAAI,EAAE,CAAC;YAC5C,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAG,6BAA6B;YAEtF,MAAM,OAAO,GAAG,IAAI,oBAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;YACnD,MAAM,IAAI,GAAG,OAAO,CAAC,kBAAkB,CAAC,QAAQ,EAAE,MAAA,MAAA,OAAO,CAAC,IAAI,wDAAG,MAAM,CAAC,mCAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACpF,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;YAEvC,6EAA6E;YAC7E,4EAA4E;YAC5E,uEAAuE;YACvE,6EAA6E;YAC7E,mEAAmE;YACnE,EAAE;YACF,yEAAyE;YACzE,yEAAyE;YACzE,2EAA2E;YAC3E,qBAAqB;YACrB,IAAI,OAAO,CAAC,SAAS,KAAK,IAAI,EAAE,CAAC;gBAC/B,KAAK,MAAM,CAAC,IAAI,OAAO,EAAE,CAAC;oBACxB,IAAI,CAAA,MAAA,CAAC,CAAC,WAAW,kDAAG,cAAc,CAAC,MAAK,IAAI;wBAAE,CAAC,CAAC,WAAW,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;gBACrF,CAAC;YACH,CAAC;YAED,4EAA4E;YAC5E,oEAAoE;YACpE,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,uBAAc,CAAC,CAAC,CAAC,CAAC,CAAC;YACvD,KAAK,MAAM,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC,OAAO,EAAE;gBAAE,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACjE,MAAM,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,qBAAY,CAAC,SAAS,MAAA,MAAC,MAAc,CAAC,IAAI,0CAAE,IAAI,mCAAI,QAAQ,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;YAE/G,MAAA,OAAO,CAAC,OAAO,wDAAG,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACjE,OAAO,IAAI,CAAC,EAAE,CAAC;QACjB,CAAC;KAAA;IAED,UAAU,EAAE,CAAC;IAEb,OAAO;QACL,SAAS,CAAC,CAAS,IAAI,KAAK,GAAG,CAAC,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC,IAAI,KAAK;YAAE,KAAK,CAAC,KAAK,GAAG,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;QAChH,KAAK;QACL,OAAO;YACL,MAAM,CAAC,mBAAmB,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;YACnD,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACrD,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YAC3C,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;YAC7C,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YACvC,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC;QACzB,CAAC;KACF,CAAC;AACJ,CAAC"}

package/src/lib/stencil-kit/shape-data.d.ts

@@ -0,0 +1,27 @@
+export interface ShapeDataPanelApi {
+    getEngine(): any;
+    getModel(): any;
+    on(event: string, handler: (payload: any) => void): () => void;
+}
+export interface ShapeDataPanelOptions {
+    /** Heading above the fields (default "Shape data"). */
+    title?: string;
+    /** Shown when nothing (or more than one thing) is selected. */
+    emptyText?: string;
+    /** Called after an edit commits. */
+    onEdit?: (info: {
+        nodeId: string;
+        key: string;
+        value: unknown;
+    }) => void;
+}
+export interface ShapeDataPanelHandle {
+    /** Re-read the selection and rebuild the fields. */
+    refresh(): void;
+    destroy(): void;
+}
+/**
+ * Bind a shape-data panel into `host`. It follows the diagram's selection: one
+ * node selected → its schema's fields; anything else → the empty message.
+ */
+export declare function bindShapeDataPanel(api: ShapeDataPanelApi, host: HTMLElement, options?: ShapeDataPanelOptions): ShapeDataPanelHandle;

package/src/lib/stencil-kit/shape-data.js

@@ -0,0 +1,153 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bindShapeDataPanel = bindShapeDataPanel;
+/**
+ * The shape-data panel — Visio's "Shape Data" window.
+ *
+ * T9. Every master ships a `dataSchema` (all 80 generated ones do) and the values
+ * live on `node.data`. The renderer already had a full `property-schema/` type
+ * contract, but it was TYPES ONLY — zero runtime — and the one working property
+ * sheet was inside the Angular wrapper, unreachable from a vanilla / React / Vue
+ * embed. This is the framework-free runtime: read the selected node's schema,
+ * render its fields, and write them back through `SetNodeDataCommand` so every
+ * edit is undoable and collab-safe (per-key, matching node.data's LWW registers).
+ */
+const engine_1 = require("@grafloria/engine");
+const styles_1 = require("./styles");
+/** The schema a node's shape data follows, via the master it was stamped from. */
+function schemaFor(engine, node) {
+    var _a, _b, _c, _d;
+    const templateId = (_a = node === null || node === void 0 ? void 0 : node.getMetadata) === null || _a === void 0 ? void 0 : _a.call(node, 'templateId');
+    if (!templateId)
+        return null;
+    const master = (_c = (_b = engine === null || engine === void 0 ? void 0 : engine.templateRegistry) === null || _b === void 0 ? void 0 : _b.get) === null || _c === void 0 ? void 0 : _c.call(_b, templateId);
+    const props = (_d = master === null || master === void 0 ? void 0 : master.dataSchema) === null || _d === void 0 ? void 0 : _d.properties;
+    return props && typeof props === 'object' ? props : null;
+}
+/** Turn `unitCost` / `unit_cost` into "Unit cost" for the field label. */
+function humanize(key) {
+    const spaced = key.replace(/[_-]+/g, ' ').replace(/([a-z0-9])([A-Z])/g, '$1 $2');
+    return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+/**
+ * Bind a shape-data panel into `host`. It follows the diagram's selection: one
+ * node selected → its schema's fields; anything else → the empty message.
+ */
+function bindShapeDataPanel(api, host, options = {}) {
+    var _a, _b, _c;
+    (0, styles_1.ensureStencilKitStyles)((_a = host.ownerDocument) !== null && _a !== void 0 ? _a : document);
+    host.classList.add('gf-shapedata');
+    const title = (_b = options.title) !== null && _b !== void 0 ? _b : 'Shape data';
+    const emptyText = (_c = options.emptyText) !== null && _c !== void 0 ? _c : 'Select a shape to edit its data.';
+    function render() {
+        var _a, _b, _c, _d, _e, _f;
+        host.innerHTML = '';
+        const head = document.createElement('div');
+        head.className = 'gf-sd-title';
+        head.textContent = title;
+        host.appendChild(head);
+        const diagram = api.getModel();
+        const engine = api.getEngine();
+        const selected = ((_b = (_a = diagram === null || diagram === void 0 ? void 0 : diagram.getSelectedNodes) === null || _a === void 0 ? void 0 : _a.call(diagram)) !== null && _b !== void 0 ? _b : []);
+        if (selected.length !== 1) {
+            const empty = document.createElement('div');
+            empty.className = 'gf-sd-empty';
+            empty.textContent = selected.length > 1 ? 'Select a single shape.' : emptyText;
+            host.appendChild(empty);
+            return;
+        }
+        const node = selected[0];
+        const props = schemaFor(engine, node);
+        if (!props || Object.keys(props).length === 0) {
+            const empty = document.createElement('div');
+            empty.className = 'gf-sd-empty';
+            empty.textContent = 'This shape has no data fields.';
+            host.appendChild(empty);
+            return;
+        }
+        const form = document.createElement('div');
+        form.className = 'gf-sd-fields';
+        for (const [key, prop] of Object.entries(props)) {
+            const row = document.createElement('label');
+            row.className = 'gf-sd-row';
+            const label = document.createElement('span');
+            label.className = 'gf-sd-label';
+            label.textContent = (_c = prop.title) !== null && _c !== void 0 ? _c : humanize(key);
+            if (prop.description)
+                row.title = prop.description;
+            row.appendChild(label);
+            const current = (_f = (_e = (_d = node.getData) === null || _d === void 0 ? void 0 : _d.call(node, key)) !== null && _e !== void 0 ? _e : prop.default) !== null && _f !== void 0 ? _f : '';
+            // Commit through the command so the edit is undoable and collab-safe.
+            const commit = (value) => {
+                var _a;
+                void engine.commandManager.execute(new engine_1.SetNodeDataCommand(node.id, { [key]: value }));
+                (_a = options.onEdit) === null || _a === void 0 ? void 0 : _a.call(options, { nodeId: node.id, key, value });
+            };
+            let field;
+            if (Array.isArray(prop.enum) && prop.enum.length > 0) {
+                const sel = document.createElement('select');
+                sel.className = 'gf-sd-input';
+                for (const opt of prop.enum) {
+                    const o = document.createElement('option');
+                    o.value = String(opt);
+                    o.textContent = String(opt);
+                    if (String(opt) === String(current))
+                        o.selected = true;
+                    sel.appendChild(o);
+                }
+                sel.addEventListener('change', () => commit(sel.value));
+                field = sel;
+            }
+            else if (prop.type === 'boolean') {
+                const box = document.createElement('input');
+                box.type = 'checkbox';
+                box.className = 'gf-sd-check';
+                box.checked = current === true || current === 'true';
+                box.addEventListener('change', () => commit(box.checked));
+                field = box;
+            }
+            else {
+                const input = document.createElement('input');
+                const numeric = prop.type === 'number' || prop.type === 'integer';
+                input.type = numeric ? 'number' : 'text';
+                input.className = 'gf-sd-input';
+                input.value = current === undefined || current === null ? '' : String(current);
+                // Commit on change (blur / Enter), not per keystroke: one undo entry per edit.
+                input.addEventListener('change', () => {
+                    var _a, _b;
+                    if (numeric) {
+                        const n = input.value === '' ? null : Number(input.value);
+                        if (n !== null && Number.isNaN(n)) {
+                            input.value = String((_b = (_a = node.getData) === null || _a === void 0 ? void 0 : _a.call(node, key)) !== null && _b !== void 0 ? _b : '');
+                            return;
+                        }
+                        commit(n);
+                    }
+                    else {
+                        commit(input.value);
+                    }
+                });
+                input.addEventListener('keydown', (e) => {
+                    e.stopPropagation(); // keep canvas keys out of the field
+                    if (e.key === 'Enter')
+                        input.blur();
+                });
+                field = input;
+            }
+            row.appendChild(field);
+            form.appendChild(row);
+        }
+        host.appendChild(form);
+    }
+    const off = api.on('selection:change', () => render());
+    render();
+    return {
+        refresh: render,
+        destroy() {
+            off === null || off === void 0 ? void 0 : off();
+            host.classList.remove('gf-shapedata');
+            host.innerHTML = '';
+        },
+    };
+}
+//# sourceMappingURL=shape-data.js.map

package/src/lib/stencil-kit/shape-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape-data.js","sourceRoot":"","sources":["../../../../../../libs/element/src/lib/stencil-kit/shape-data.ts"],"names":[],"mappings":"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"}

package/src/lib/stencil-kit/styles.d.ts

@@ -0,0 +1,2 @@
+/** Inject the palette stylesheet once per document. */
+export declare function ensureStencilKitStyles(doc?: Document): void;

package/src/lib/stencil-kit/styles.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ensureStencilKitStyles = ensureStencilKitStyles;
+/**
+ * Stencil-palette styles, injected once per document (same discipline as the
+ * dashboard kit: the kit owns its chrome so a host gets a working palette
+ * without copying CSS, and every colour is a themable custom property).
+ */
+const STENCIL_KIT_STYLE_ID = 'grafloria-stencil-kit-styles';
+const CSS = `
+.gf-stencil {
+  --gf-st-bg: #fff; --gf-st-ink: #1e2436; --gf-st-mut: #6b7280;
+  --gf-st-line: #e5e7eb; --gf-st-accent: #3B52D9; --gf-st-hover: #f5f7ff;
+  display: flex; flex-direction: column; min-height: 0; height: 100%;
+  background: var(--gf-st-bg); color: var(--gf-st-ink);
+  font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif;
+  border-right: 1px solid var(--gf-st-line); box-sizing: border-box;
+}
+@media (prefers-color-scheme: dark) {
+  .gf-stencil {
+    --gf-st-bg: #161a24; --gf-st-ink: #e8ecfb; --gf-st-mut: #9aa4bf;
+    --gf-st-line: #2a3040; --gf-st-accent: #8fa2ff; --gf-st-hover: #1e2536;
+  }
+}
+.gf-stencil-search { padding: 10px; border-bottom: 1px solid var(--gf-st-line); }
+.gf-stencil-search input {
+  width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 8px;
+  border: 1px solid var(--gf-st-line); background: var(--gf-st-bg);
+  color: var(--gf-st-ink); font: inherit; outline: none;
+}
+.gf-stencil-search input:focus { border-color: var(--gf-st-accent); }
+.gf-stencil-body { overflow: auto; flex: 1; min-height: 0; padding-bottom: 8px; }
+.gf-stencil-group > summary {
+  cursor: pointer; padding: 8px 10px; font-weight: 600; font-size: 12px;
+  letter-spacing: .02em; text-transform: uppercase; color: var(--gf-st-mut);
+  list-style: none; user-select: none; display: flex; align-items: center; gap: 6px;
+}
+.gf-stencil-group > summary::-webkit-details-marker { display: none; }
+.gf-stencil-group > summary::before { content: '▸'; font-size: 10px; transition: transform .15s; }
+.gf-stencil-group[open] > summary::before { transform: rotate(90deg); }
+.gf-stencil-group > summary:hover { color: var(--gf-st-ink); }
+.gf-stencil-count { margin-left: auto; font-weight: 500; opacity: .7; text-transform: none; }
+.gf-stencil-items {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
+  gap: 4px; padding: 2px 8px 10px;
+}
+.gf-stencil-item {
+  display: flex; flex-direction: column; align-items: center; gap: 4px;
+  padding: 8px 4px; border-radius: 8px; cursor: grab; border: 1px solid transparent;
+  text-align: center; background: none;
+}
+.gf-stencil-item:hover { background: var(--gf-st-hover); border-color: var(--gf-st-line); }
+.gf-stencil-item:active { cursor: grabbing; }
+.gf-stencil-item svg { display: block; overflow: visible; }
+.gf-stencil-label {
+  font-size: 10.5px; color: var(--gf-st-mut); line-height: 1.25;
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  overflow: hidden; word-break: break-word;
+}
+.gf-stencil-item:hover .gf-stencil-label { color: var(--gf-st-ink); }
+.gf-stencil-empty { padding: 18px 12px; color: var(--gf-st-mut); font-size: 12px; text-align: center; }
+.gf-shapedata {
+  --gf-st-bg: #fff; --gf-st-ink: #1e2436; --gf-st-mut: #6b7280;
+  --gf-st-line: #e5e7eb; --gf-st-accent: #3B52D9;
+  display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
+  background: var(--gf-st-bg); color: var(--gf-st-ink); overflow: auto;
+  font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif;
+  border-left: 1px solid var(--gf-st-line);
+}
+@media (prefers-color-scheme: dark) {
+  .gf-shapedata { --gf-st-bg: #161a24; --gf-st-ink: #e8ecfb; --gf-st-mut: #9aa4bf; --gf-st-line: #2a3040; --gf-st-accent: #8fa2ff; }
+}
+.gf-sd-title {
+  padding: 10px 12px; font-weight: 600; font-size: 12px; text-transform: uppercase;
+  letter-spacing: .02em; color: var(--gf-st-mut); border-bottom: 1px solid var(--gf-st-line);
+}
+.gf-sd-empty { padding: 16px 12px; color: var(--gf-st-mut); font-size: 12px; }
+.gf-sd-fields { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
+.gf-sd-row { display: flex; flex-direction: column; gap: 3px; }
+.gf-sd-label { font-size: 11px; color: var(--gf-st-mut); }
+.gf-sd-input {
+  padding: 6px 8px; border: 1px solid var(--gf-st-line); border-radius: 7px;
+  background: var(--gf-st-bg); color: var(--gf-st-ink); font: inherit; outline: none; width: 100%; box-sizing: border-box;
+}
+.gf-sd-input:focus { border-color: var(--gf-st-accent); }
+.gf-sd-check { width: 16px; height: 16px; accent-color: var(--gf-st-accent); }
+
+/* The canvas while a stencil is held over it. */
+.gf-stencil-target { outline: 2px dashed var(--gf-st-accent); outline-offset: -3px; }
+`;
+/** Inject the palette stylesheet once per document. */
+function ensureStencilKitStyles(doc = document) {
+    if (doc.getElementById(STENCIL_KIT_STYLE_ID))
+        return;
+    const style = doc.createElement('style');
+    style.id = STENCIL_KIT_STYLE_ID;
+    style.textContent = CSS;
+    doc.head.appendChild(style);
+}
+//# sourceMappingURL=styles.js.map

package/src/lib/stencil-kit/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../libs/element/src/lib/stencil-kit/styles.ts"],"names":[],"mappings":";;AA0FA,wDAMC;AAhGD;;;;GAIG;AACH,MAAM,oBAAoB,GAAG,8BAA8B,CAAC;AAE5D,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFX,CAAC;AAEF,uDAAuD;AACvD,SAAgB,sBAAsB,CAAC,MAAgB,QAAQ;IAC7D,IAAI,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC;QAAE,OAAO;IACrD,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,GAAG,oBAAoB,CAAC;IAChC,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC;IACxB,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,CAAC"}