@grafloria/element 0.3.19 → 0.3.20

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

@@ -0,0 +1,537 @@
+/**
+ * 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/{src/lib/stencil-kit/styles.ts → esm/src/lib/stencil-kit/styles.js}

@@ -4,7 +4,6 @@
  * 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;
@@ -115,12 +114,13 @@ const CSS = `
 }
 .gf-stencil-ghost svg { display: block; }
 `;
-
 /** Inject the palette stylesheet once per document. */
-export function ensureStencilKitStyles(doc: Document = document): void {
-  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);
-}
+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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafloria/element",
-  "version": "0.3.19",
+  "version": "0.3.20",
   "type": "commonjs",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",
@@ -11,7 +11,7 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "description": "The <grafloria-flow> custom element and high-level diagram kits (dashboard, UML, ERD) — works in any framework or none",
+  "description": "The <grafloria-flow> custom element and high-level diagram kits (dashboard, UML, ERD) \u2014 works in any framework or none",
   "license": "MIT",
   "author": "Ramy Othman",
   "homepage": "https://github.com/grafloria/grafloria",
@@ -38,5 +38,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "module": "./esm/src/index.js"
+  "module": "./esm/src/index.js",
+  "files": [
+    "src/**/*.js",
+    "src/**/*.d.ts",
+    "esm/**/*.js"
+  ],
+  "sideEffects": [
+    "./src/index.js",
+    "./esm/src/index.js"
+  ]
 }

package/jest.config.ts

@@ -1,16 +0,0 @@
-/* eslint-disable */
-export default {
-  displayName: 'element',
-  preset: '../../jest.preset.js',
-  testEnvironment: 'jsdom',
-  transform: {
-    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
-  },
-  transformIgnorePatterns: ['node_modules/(?!(nanoid|uuid)/)'],
-  moduleNameMapper: {
-    '^nanoid$': '<rootDir>/../engine/src/__mocks__/nanoid.ts',
-    '^uuid$': '<rootDir>/../engine/src/__mocks__/uuid.ts',
-  },
-  moduleFileExtensions: ['ts', 'js', 'html'],
-  coverageDirectory: '../../coverage/libs/element',
-};

package/project.json

@@ -1,44 +0,0 @@
-{
-  "name": "element",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "libs/element/src",
-  "projectType": "library",
-  "tags": [],
-  "targets": {
-    "build": {
-      "executor": "@nx/js:tsc",
-      "outputs": [
-        "{options.outputPath}"
-      ],
-      "options": {
-        "outputPath": "dist/libs/element",
-        "main": "libs/element/src/index.ts",
-        "tsConfig": "libs/element/tsconfig.lib.json",
-        "assets": [
-          "libs/element/README.md"
-        ]
-      }
-    },
-    "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": [
-        "{workspaceRoot}/coverage/{projectRoot}"
-      ],
-      "options": {
-        "jestConfig": "libs/element/jest.config.ts"
-      }
-    },
-    "build-esm": {
-      "executor": "nx:run-commands",
-      "dependsOn": [
-        "build"
-      ],
-      "outputs": [
-        "{workspaceRoot}/dist/libs/element/esm"
-      ],
-      "options": {
-        "command": "npx tsc -p libs/element/tsconfig.esm.json --module es2022 --moduleResolution bundler --outDir dist/libs/element/esm --rootDir libs/element --declaration false --declarationMap false --incremental false"
-      }
-    }
-  }
-}