@grafloria/element 0.3.23 → 0.4.0

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

@@ -1,537 +0,0 @@
-/**
- * The shape-data panel — Visio's "Shape Data" window, grown into the full
- * properties panel Visio users actually expect.
- *
- * T9 built the dataSchema form: read the selected node's schema, render its
- * fields, write them back through `SetNodeDataCommand`. The audit then held it
- * against Visio and found the gap: a plain node said "This shape has no data
- * fields.", a selected EDGE said "Select a shape…", multi-select said "Select a
- * single shape." — but a Visio user gets Name, Size & Position and Format for
- * EVERYTHING selected. So now:
- *
- *   one node   → Shape (Name), Size & Position (X/Y/W/H), Format (fill, line,
- *                width, dash, corner radius on rect silhouettes) — then the
- *                master's dataSchema fields, unchanged, below.
- *   a kit card → Size & Position, then the kit Table/Column (or Class) sections
- *                EXACTLY as before. No Format: an ER/UML card paints
- *                `fill:none` shells on purpose — its look belongs to the kit.
- *   one edge   → Label, Line, Arrows (the engine marker vocabulary), Route.
- *   N > 1      → "N shapes" plus a Format section that restyles the whole
- *                selection as ONE undo entry.
- *
- * Every write goes through a command (SetNodeLabel / Move / Resize /
- * SetNodeStyle / SetNodeShapeConfig / UpdateLinkStyle / SetLinkDisplayLabel /
- * SetLinkPathType, batched for multi) so every edit is undoable and
- * collab-safe. The new controls use their own `gf-sd-ctl` class — the legacy
- * `.gf-sd-input` selector contract (first match = first dataSchema field; the
- * kit card's Name rows) is load-bearing for existing demos and gates.
- */
-import { BatchCommand, MoveNodeCommand, ResizeNodeCommand, SetLinkDisplayLabelCommand, SetLinkPathTypeCommand, SetNodeDataCommand, SetNodeLabelCommand, SetNodeShapeConfigCommand, SetNodeStyleCommand, UpdateLinkStyleCommand, } from '@grafloria/engine';
-import { erTable, umlClass } from '../diagram-kit';
-import { ensureStencilKitStyles } from './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);
-}
-/** `<input type=color>` accepts ONLY #rrggbb — normalise or fall back. */
-function toHexColor(value, fallback) {
-    if (typeof value === 'string') {
-        const v = value.trim();
-        if (/^#[0-9a-f]{6}$/i.test(v))
-            return v.toLowerCase();
-        const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(v);
-        if (short)
-            return `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}`.toLowerCase();
-    }
-    return fallback;
-}
-/** The engine's built-in marker vocabulary (ArrowStyle.type literals). */
-const ARROW_TYPES = [
-    'none', 'arrow', 'circle', 'square', 'diamond',
-    'hollow-diamond', 'filled-diamond', 'generalization', 'open-arrow', 'double-arrow',
-    'crow-foot', 'one', 'zero-or-one', 'zero-or-many', 'one-or-many',
-    'cross', 'bar', 'dot', 'oval', 'half-arrow-left', 'half-arrow-right',
-];
-const ROUTE_TYPES = ['smooth', 'orthogonal', 'direct', 'bezier'];
-/** Dash pattern the "Dashed" checkbox writes. */
-const DASH = '6 4';
-const PANEL_STYLE_ID = 'grafloria-shapedata-panel-styles';
-/**
- * The NEW controls' css, kept panel-local: `styles.ts` belongs to the stencil
- * rail/palette work, and the legacy `.gf-sd-*` classes it defines are a shared
- * selector contract this file must not churn.
- */
-function ensureShapeDataPanelStyles(doc = document) {
-    if (doc.getElementById(PANEL_STYLE_ID))
-        return;
-    const style = doc.createElement('style');
-    style.id = PANEL_STYLE_ID;
-    style.textContent = `
-.gf-sd-ctl {
-  padding: 6px 8px; border: 1px solid var(--gf-st-line, #e5e7eb); border-radius: 7px;
-  background: var(--gf-st-bg, #fff); color: var(--gf-st-ink, #1e2436);
-  font: inherit; outline: none; width: 100%; box-sizing: border-box;
-}
-.gf-sd-ctl:focus { border-color: var(--gf-st-accent, #3B52D9); }
-.gf-sd-color {
-  width: 100%; height: 28px; padding: 1px 2px; box-sizing: border-box; cursor: pointer;
-  border: 1px solid var(--gf-st-line, #e5e7eb); border-radius: 7px; background: var(--gf-st-bg, #fff);
-}
-.gf-sd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
-.gf-sd-inline { display: flex; flex-direction: row; align-items: center; gap: 8px; }
-.gf-sd-inline .gf-sd-label { flex: 1; }
-.gf-sd-count { padding: 12px 12px 0; font-weight: 600; font-size: 12px; }
-`;
-    doc.head.appendChild(style);
-}
-/**
- * Bind a shape-data panel into `host`. It follows the diagram's selection:
- * nodes, edges and multi-selections each get their own sections; nothing
- * selected shows the empty message.
- */
-export function bindShapeDataPanel(api, host, options = {}) {
-    var _a, _b, _c;
-    const doc = (_a = host.ownerDocument) !== null && _a !== void 0 ? _a : document;
-    ensureStencilKitStyles(doc);
-    ensureShapeDataPanelStyles(doc);
-    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.';
-    /** Execute a command, then rebuild so clamped/normalised values show. */
-    function exec(cmd) {
-        var _a, _b;
-        const engine = api.getEngine();
-        Promise.resolve((_b = (_a = engine === null || engine === void 0 ? void 0 : engine.commandManager) === null || _a === void 0 ? void 0 : _a.execute) === null || _b === void 0 ? void 0 : _b.call(_a, cmd)).then(() => render(), () => render());
-    }
-    function render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        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 nodes = ((_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 : []);
-        const links = ((_d = (_c = diagram === null || diagram === void 0 ? void 0 : diagram.getLinks) === null || _c === void 0 ? void 0 : _c.call(diagram)) !== null && _d !== void 0 ? _d : []).filter((l) => (l === null || l === void 0 ? void 0 : l.state) === 'selected');
-        const total = nodes.length + links.length;
-        if (total === 0) {
-            const empty = document.createElement('div');
-            empty.className = 'gf-sd-empty';
-            empty.textContent = emptyText;
-            host.appendChild(empty);
-            return;
-        }
-        if (total > 1) {
-            renderMulti(nodes, links);
-            return;
-        }
-        if (links.length === 1) {
-            renderLink(links[0]);
-            return;
-        }
-        const node = nodes[0];
-        const isKit = !!(((_e = node.getMetadata) === null || _e === void 0 ? void 0 : _e.call(node, 'kitEntity')) || ((_f = node.getMetadata) === null || _f === void 0 ? void 0 : _f.call(node, 'kitClass')));
-        renderNodeSections(node, isKit);
-        // KIT CARDS keep their own sections. An ER entity / UML class is not a
-        // schema-shaped bag of scalars — it is a card the diagram kit already owns,
-        // with a live handle API (`erTable(api,id)`) and a row-selection event.
-        // Driving that is the whole point: it is the same surface `erd-editor`
-        // edits, so the panel and the canvas can never disagree. The dataSchema
-        // path below stays for plain template masters.
-        if (isKit) {
-            renderKitCard(node);
-            return;
-        }
-        const props = schemaFor(engine, node);
-        if (!props || Object.keys(props).length === 0)
-            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 = (_g = prop.title) !== null && _g !== void 0 ? _g : humanize(key);
-            if (prop.description)
-                row.title = prop.description;
-            row.appendChild(label);
-            const current = (_k = (_j = (_h = node.getData) === null || _h === void 0 ? void 0 : _h.call(node, key)) !== null && _j !== void 0 ? _j : prop.default) !== null && _k !== void 0 ? _k : '';
-            // Commit through the command so the edit is undoable and collab-safe.
-            const commit = (value) => {
-                var _a;
-                void engine.commandManager.execute(new 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);
-    }
-    // ── the Visio sections every node gets ────────────────────────────────────
-    /** Smallest size a resize may produce — the gesture path's floor + the node's own minimum. */
-    function minSize(node) {
-        var _a, _b, _c, _d;
-        const sizing = ((_b = (_a = node.getMetadata) === null || _a === void 0 ? void 0 : _a.call(node, 'sizing')) !== null && _b !== void 0 ? _b : {});
-        return { w: Math.max(16, (_c = sizing.minWidth) !== null && _c !== void 0 ? _c : 0), h: Math.max(16, (_d = sizing.minHeight) !== null && _d !== void 0 ? _d : 0) };
-    }
-    function renderNodeSections(node, isKit) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const form = document.createElement('div');
-        form.className = 'gf-sd-fields';
-        if (!isKit) {
-            form.appendChild(sectionLabel('Shape'));
-            form.appendChild(ctlTextField('Name', String((_b = (_a = node.getLabel) === null || _a === void 0 ? void 0 : _a.call(node)) !== null && _b !== void 0 ? _b : ''), (v) => exec(new SetNodeLabelCommand(node.id, v))));
-        }
-        form.appendChild(sectionLabel('Size & Position'));
-        const move = (x, y) => { var _a; return exec(new MoveNodeCommand(node.id, { x, y, z: (_a = node.position) === null || _a === void 0 ? void 0 : _a.z }, undefined, { mergeable: false })); };
-        const resize = (w, h) => {
-            var _a;
-            const min = minSize(node);
-            exec(new ResizeNodeCommand(node.id, {
-                width: Math.max(min.w, w),
-                height: Math.max(min.h, h),
-                depth: (_a = node.size) === null || _a === void 0 ? void 0 : _a.depth,
-            }));
-        };
-        form.appendChild(pair(numberField('X', () => { var _a, _b; return (_b = (_a = node.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0; }, (n) => { var _a, _b; return move(n, (_b = (_a = node.position) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0); }), numberField('Y', () => { var _a, _b; return (_b = (_a = node.position) === null || _a === void 0 ? void 0 : _a.y) !== null && _b !== void 0 ? _b : 0; }, (n) => { var _a, _b; return move((_b = (_a = node.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0, n); })));
-        form.appendChild(pair(numberField('W', () => { var _a, _b; return (_b = (_a = node.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0; }, (n) => { var _a, _b; return resize(n, (_b = (_a = node.size) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0); }), numberField('H', () => { var _a, _b; return (_b = (_a = node.size) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 0; }, (n) => { var _a, _b; return resize((_b = (_a = node.size) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0, n); })));
-        // NO Format for kit cards: their shells are `fill:none` ON PURPOSE — the
-        // card's look belongs to the kit, and a panel fill write would repaint the
-        // transparent shell into a solid slab over the rows.
-        if (!isKit) {
-            const shape = ((_d = (_c = node.getMetadata) === null || _c === void 0 ? void 0 : _c.call(node, 'shape')) !== null && _d !== void 0 ? _d : {});
-            const style = ((_e = node.style) !== null && _e !== void 0 ? _e : {});
-            form.appendChild(sectionLabel('Format'));
-            form.appendChild(colorField('Fill', toHexColor((_f = style['fill']) !== null && _f !== void 0 ? _f : shape['fill'], '#ffffff'), (v) => exec(new SetNodeStyleCommand(node.id, { fill: v }))));
-            form.appendChild(colorField('Line', toHexColor((_g = style['stroke']) !== null && _g !== void 0 ? _g : shape['stroke'], '#333333'), (v) => exec(new SetNodeStyleCommand(node.id, { stroke: v }))));
-            form.appendChild(numberField('Line width', () => { var _a, _b; return (_b = (_a = style['strokeWidth']) !== null && _a !== void 0 ? _a : shape['strokeWidth']) !== null && _b !== void 0 ? _b : 1; }, (n) => exec(new SetNodeStyleCommand(node.id, { strokeWidth: Math.max(0, n) }))));
-            form.appendChild(checkField('Dashed', !!style['strokeDasharray'], (c) => exec(new SetNodeStyleCommand(node.id, { strokeDasharray: c ? DASH : undefined }))));
-            // Corner radius only where the silhouette HAS corners: the rect family.
-            const silhouette = (_h = shape['type']) !== null && _h !== void 0 ? _h : 'rect';
-            if (silhouette === 'rect') {
-                form.appendChild(numberField('Corner radius', () => { var _a, _b; return (_b = (_a = style['borderRadius']) !== null && _a !== void 0 ? _a : shape['cornerRadius']) !== null && _b !== void 0 ? _b : 0; }, (n) => {
-                    const r = Math.max(0, n);
-                    // shape.cornerRadius is GEOMETRY and defers over the style-borne
-                    // borderRadius — on masters that ship it (BPMN tasks), the style
-                    // write would not paint. Edit the key that does.
-                    exec(shape['cornerRadius'] !== undefined
-                        ? new SetNodeShapeConfigCommand(node.id, { cornerRadius: r })
-                        : new SetNodeStyleCommand(node.id, { borderRadius: r }));
-                }));
-            }
-        }
-        host.appendChild(form);
-    }
-    // ── one selected edge ─────────────────────────────────────────────────────
-    function renderLink(link) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const form = document.createElement('div');
-        form.className = 'gf-sd-fields';
-        const style = ((_a = link.style) !== null && _a !== void 0 ? _a : {});
-        form.appendChild(sectionLabel('Label'));
-        form.appendChild(ctlTextField('Text', String((_c = (_b = link.getLabel) === null || _b === void 0 ? void 0 : _b.call(link)) !== null && _c !== void 0 ? _c : ''), (v) => exec(new SetLinkDisplayLabelCommand(link.id, v))));
-        form.appendChild(sectionLabel('Line'));
-        form.appendChild(colorField('Colour', toHexColor(style['stroke'], '#999999'), (v) => exec(new UpdateLinkStyleCommand(link.id, { stroke: v }))));
-        form.appendChild(numberField('Width', () => { var _a; return (_a = style['strokeWidth']) !== null && _a !== void 0 ? _a : 2; }, (n) => exec(new UpdateLinkStyleCommand(link.id, { strokeWidth: Math.max(0, n) }))));
-        form.appendChild(checkField('Dashed', !!style['strokeDasharray'], (c) => exec(new UpdateLinkStyleCommand(link.id, { strokeDasharray: c ? DASH : undefined }))));
-        form.appendChild(sectionLabel('Arrows'));
-        const marker = (slot, type) => {
-            var _a;
-            const existing = ((_a = style[slot]) !== null && _a !== void 0 ? _a : {});
-            exec(new UpdateLinkStyleCommand(link.id, {
-                [slot]: Object.assign(Object.assign({ size: 10, filled: true }, existing), { type }),
-            }));
-        };
-        // The renderer paints an implicit 'arrow' head when none is set — seed the
-        // select with what the user SEES, not with the absent key.
-        form.appendChild(selectField('Start', ARROW_TYPES, String((_e = (_d = style['arrowTail']) === null || _d === void 0 ? void 0 : _d.type) !== null && _e !== void 0 ? _e : 'none'), (v) => marker('arrowTail', v)));
-        form.appendChild(selectField('End', ARROW_TYPES, String((_g = (_f = style['arrowHead']) === null || _f === void 0 ? void 0 : _f.type) !== null && _g !== void 0 ? _g : 'arrow'), (v) => marker('arrowHead', v)));
-        form.appendChild(sectionLabel('Route'));
-        form.appendChild(selectField('Path', ROUTE_TYPES, String((_h = link.pathType) !== null && _h !== void 0 ? _h : 'smooth'), (v) => exec(new SetLinkPathTypeCommand(link.id, v))));
-        host.appendChild(form);
-    }
-    // ── multi-selection ───────────────────────────────────────────────────────
-    function renderMulti(nodes, links) {
-        var _a, _b;
-        const count = document.createElement('div');
-        count.className = 'gf-sd-count';
-        count.textContent = `${nodes.length + links.length} shapes`;
-        host.appendChild(count);
-        // Kit cards keep their kit look — see the single-node Format note.
-        const styleNodes = nodes.filter((n) => { var _a, _b; return !(((_a = n.getMetadata) === null || _a === void 0 ? void 0 : _a.call(n, 'kitEntity')) || ((_b = n.getMetadata) === null || _b === void 0 ? void 0 : _b.call(n, 'kitClass'))); });
-        if (styleNodes.length + links.length === 0)
-            return;
-        const nodeIds = styleNodes.map((n) => n.id);
-        const seed = ((_a = styleNodes[0]) !== null && _a !== void 0 ? _a : links[0]);
-        const seedStyle = ((_b = seed === null || seed === void 0 ? void 0 : seed.style) !== null && _b !== void 0 ? _b : {});
-        /** The whole selection restyled as ONE undo entry. */
-        const applyAll = (nodePatch, linkPatch) => {
-            const cmds = [];
-            if (nodePatch && nodeIds.length > 0)
-                cmds.push(new SetNodeStyleCommand(nodeIds, nodePatch));
-            if (linkPatch)
-                for (const l of links)
-                    cmds.push(new UpdateLinkStyleCommand(l.id, linkPatch));
-            if (cmds.length === 0)
-                return;
-            exec(cmds.length === 1 ? cmds[0] : new BatchCommand('Format selection', cmds));
-        };
-        const form = document.createElement('div');
-        form.className = 'gf-sd-fields';
-        form.appendChild(sectionLabel('Format'));
-        if (nodeIds.length > 0) {
-            form.appendChild(colorField('Fill', toHexColor(seedStyle['fill'], '#ffffff'), (v) => applyAll({ fill: v }, null)));
-        }
-        form.appendChild(colorField('Line', toHexColor(seedStyle['stroke'], '#333333'), (v) => applyAll({ stroke: v }, { stroke: v })));
-        form.appendChild(numberField('Line width', () => { var _a; return (_a = seedStyle['strokeWidth']) !== null && _a !== void 0 ? _a : 1; }, (n) => {
-            const w = Math.max(0, n);
-            applyAll({ strokeWidth: w }, { strokeWidth: w });
-        }));
-        form.appendChild(checkField('Dashed', !!seedStyle['strokeDasharray'], (c) => {
-            const dash = c ? DASH : undefined;
-            applyAll({ strokeDasharray: dash }, { strokeDasharray: dash });
-        }));
-        host.appendChild(form);
-    }
-    /** Table/class properties, plus the selected column's, Visio-style. */
-    function renderKitCard(node) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        const isEr = !!node.getMetadata('kitEntity');
-        const spec = node.getMetadata(isEr ? 'kitEntity' : 'kitClass');
-        const handle = isEr ? erTable(api, node.id) : umlClass(api, node.id);
-        const form = document.createElement('div');
-        form.className = 'gf-sd-fields';
-        // ── the card itself ──
-        form.appendChild(sectionLabel(isEr ? 'Table' : 'Class'));
-        form.appendChild(textField('Name', (_a = spec === null || spec === void 0 ? void 0 : spec.name) !== null && _a !== void 0 ? _a : node.id, (v) => { void handle.rename(v); }));
-        form.appendChild(readOnlyField(isEr ? 'Columns' : 'Members', String(isEr ? ((_c = (_b = spec === null || spec === void 0 ? void 0 : spec.columns) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0)
-            : (((_e = (_d = spec === null || spec === void 0 ? void 0 : spec.attributes) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0) + ((_g = (_f = spec === null || spec === void 0 ? void 0 : spec.methods) === null || _f === void 0 ? void 0 : _f.length) !== null && _g !== void 0 ? _g : 0)))));
-        // ── the selected row, if any ──
-        const rowHost = document.createElement('div');
-        form.appendChild(rowHost);
-        const showField = (field) => {
-            var _a, _b;
-            rowHost.innerHTML = '';
-            if (!field) {
-                rowHost.appendChild(hint('Click a column to edit it.'));
-                return;
-            }
-            // ErField exposes name/type/pk/fk as getters over the live spec.
-            rowHost.appendChild(sectionLabel('Column'));
-            rowHost.appendChild(textField('Name', (_a = field.name) !== null && _a !== void 0 ? _a : '', (v) => { void field.rename(v); }));
-            rowHost.appendChild(textField('Type', (_b = field.type) !== null && _b !== void 0 ? _b : '', (v) => { void field.setType(v); }));
-            if (field.pk || field.fk) {
-                rowHost.appendChild(readOnlyField('Key', [field.pk && 'PK', field.fk && 'FK'].filter(Boolean).join(' + ')));
-            }
-            const del = document.createElement('button');
-            del.className = 'gf-sd-danger';
-            del.textContent = 'Delete column';
-            del.addEventListener('click', () => { void field.remove(); rowHost.innerHTML = ''; });
-            rowHost.appendChild(del);
-        };
-        showField(isEr ? (_h = handle.selectedColumn) !== null && _h !== void 0 ? _h : null : null);
-        // Live: the panel follows the kit's own row-selection event.
-        offRow === null || offRow === void 0 ? void 0 : offRow();
-        offRow = (_k = (_j = handle.onRowSelect) === null || _j === void 0 ? void 0 : _j.call(handle, ({ field }) => showField(field))) !== null && _k !== void 0 ? _k : null;
-        host.appendChild(form);
-    }
-    const sectionLabel = (text) => {
-        const el = document.createElement('div');
-        el.className = 'gf-sd-section';
-        el.textContent = text;
-        return el;
-    };
-    const hint = (text) => {
-        const el = document.createElement('div');
-        el.className = 'gf-sd-empty';
-        el.textContent = text;
-        return el;
-    };
-    const readOnlyField = (label, value) => {
-        const row = document.createElement('label');
-        row.className = 'gf-sd-row';
-        const l = document.createElement('span');
-        l.className = 'gf-sd-label';
-        l.textContent = label;
-        const v = document.createElement('input');
-        v.className = 'gf-sd-input';
-        v.value = value;
-        v.readOnly = true;
-        row.append(l, v);
-        return row;
-    };
-    const textField = (label, value, commit) => {
-        const row = document.createElement('label');
-        row.className = 'gf-sd-row';
-        const l = document.createElement('span');
-        l.className = 'gf-sd-label';
-        l.textContent = label;
-        const i = document.createElement('input');
-        i.className = 'gf-sd-input';
-        i.value = value;
-        i.addEventListener('change', () => commit(i.value));
-        i.addEventListener('keydown', (e) => { e.stopPropagation(); if (e.key === 'Enter')
-            i.blur(); });
-        row.append(l, i);
-        return row;
-    };
-    // ── the NEW controls (gf-sd-ctl, NOT gf-sd-input — see the header note) ──
-    const fieldRow = (label, field, inline = false) => {
-        const row = document.createElement('label');
-        row.className = inline ? 'gf-sd-row gf-sd-inline' : 'gf-sd-row';
-        const l = document.createElement('span');
-        l.className = 'gf-sd-label';
-        l.textContent = label;
-        row.append(l, field);
-        return row;
-    };
-    const ctlTextField = (label, value, commit) => {
-        const i = document.createElement('input');
-        i.type = 'text';
-        i.className = 'gf-sd-ctl';
-        i.value = value;
-        i.addEventListener('change', () => commit(i.value));
-        i.addEventListener('keydown', (e) => { e.stopPropagation(); if (e.key === 'Enter')
-            i.blur(); });
-        return fieldRow(label, i);
-    };
-    /**
-     * Numeric input that CANNOT write garbage: on blur/Enter the value is parsed,
-     * and anything unparseable reverts to the model's current value — no NaN ever
-     * reaches a command.
-     */
-    const numberField = (label, current, commit) => {
-        const i = document.createElement('input');
-        i.type = 'number';
-        i.className = 'gf-sd-ctl';
-        i.step = 'any';
-        const seed = () => { var _a; i.value = String(Math.round(((_a = current()) !== null && _a !== void 0 ? _a : 0) * 100) / 100); };
-        seed();
-        i.addEventListener('change', () => {
-            const n = Number(i.value);
-            if (i.value.trim() === '' || !Number.isFinite(n)) {
-                seed();
-                return;
-            }
-            commit(n);
-        });
-        i.addEventListener('keydown', (e) => { e.stopPropagation(); if (e.key === 'Enter')
-            i.blur(); });
-        return fieldRow(label, i);
-    };
-    const colorField = (label, hex, commit) => {
-        const i = document.createElement('input');
-        i.type = 'color';
-        i.className = 'gf-sd-color';
-        i.value = hex;
-        // 'change' fires once when the picker commits — one undo entry per edit.
-        i.addEventListener('change', () => commit(i.value));
-        return fieldRow(label, i);
-    };
-    const checkField = (label, checked, commit) => {
-        const i = document.createElement('input');
-        i.type = 'checkbox';
-        i.className = 'gf-sd-check';
-        i.checked = checked;
-        i.addEventListener('change', () => commit(i.checked));
-        return fieldRow(label, i, true);
-    };
-    const selectField = (label, opts, current, commit) => {
-        const sel = document.createElement('select');
-        sel.className = 'gf-sd-ctl';
-        const values = opts.includes(current) ? opts : [current, ...opts];
-        for (const opt of values) {
-            const o = document.createElement('option');
-            o.value = opt;
-            o.textContent = opt;
-            if (opt === current)
-                o.selected = true;
-            sel.appendChild(o);
-        }
-        sel.addEventListener('change', () => commit(sel.value));
-        return fieldRow(label, sel);
-    };
-    const pair = (a, b) => {
-        const wrap = document.createElement('div');
-        wrap.className = 'gf-sd-pair';
-        wrap.append(a, b);
-        return wrap;
-    };
-    let offRow = null;
-    const off = api.on('selection:change', () => render());
-    render();
-    return {
-        refresh: render,
-        destroy() {
-            offRow === null || offRow === void 0 ? void 0 : offRow();
-            off === null || off === void 0 ? void 0 : off();
-            host.classList.remove('gf-shapedata');
-            host.innerHTML = '';
-        },
-    };
-}
-//# sourceMappingURL=shape-data.js.map

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

@@ -1,126 +0,0 @@
-/**
- * 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); }
-.gf-sd-section {
-  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
-  color: var(--gf-st-mut); margin: 10px 0 2px; padding-top: 8px; border-top: 1px solid var(--gf-st-line);
-}
-.gf-sd-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
-.gf-sd-danger {
-  margin-top: 8px; padding: 6px 10px; border-radius: 7px; cursor: pointer;
-  border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c;
-  font: 600 12px ui-sans-serif, system-ui, sans-serif;
-}
-.gf-sd-danger:hover { background: #fee2e2; }
-@media (prefers-color-scheme: dark) {
-  .gf-sd-danger { background: #2a1414; border-color: #7f1d1d; color: #fca5a5; }
-}
-
-/* The canvas while a stencil is held over it. */
-.gf-stencil-target { outline: 2px dashed var(--gf-st-accent); outline-offset: -3px; }
-
-/* The drag GHOST — the master's silhouette + name following the cursor during a
-   palette drag, so the drop point is legible. A DOM element on purpose: the
-   browser's native drag image lives outside the DOM, does not screenshot, and
-   several platforms simply never paint it. */
-.gf-stencil-ghost {
-  position: fixed; z-index: 1000; pointer-events: none;
-  transform: translate(-50%, -50%); opacity: .6;
-  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
-  background: var(--gf-st-bg, #fff); color: var(--gf-st-ink, #1e2436);
-  border: 1px solid var(--gf-st-accent, #3B52D9); border-radius: 8px;
-  box-shadow: 0 6px 20px rgba(0,0,0,.18);
-  font: 12px ui-sans-serif, system-ui, sans-serif;
-}
-.gf-stencil-ghost svg { display: block; }
-`;
-/** Inject the palette stylesheet once per document. */
-export 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