@grafloria/element 0.3.18 → 0.3.20

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

@@ -55,11 +55,14 @@ function applyNotationTheme(node, stencilId, scheme, api) {
         shape.stroke = stroke;
     node.setMetadata('shape', shape);
 }
-/** UML classifiers get a name compartment + a member compartment. */
+/** UML classifiers get a name compartment + a member compartment.
+ *  Keys are MASTER IDS — `uml-enum` / `uml-primitive-type` are the generated
+ *  ids (the old `uml-enumeration` / `uml-primitivetype` keys matched nothing,
+ *  so those two masters dropped as bare rectangles with no card). */
 const UML_CLASSIFIERS = {
     'uml-class': null, 'uml-abstract-class': '«abstract»', 'uml-interface': '«interface»',
-    'uml-enumeration': '«enumeration»', 'uml-datatype': '«dataType»',
-    'uml-primitivetype': '«primitive»', 'uml-signal': '«signal»', 'uml-object': null,
+    'uml-enum': '«enumeration»', 'uml-datatype': '«dataType»',
+    'uml-primitive-type': '«primitive»', 'uml-signal': '«signal»', 'uml-object': null,
 };
 /** BPMN event types carry their trigger glyph inside the circle. */
 const BPMN_EVENT_GLYPH = {
@@ -74,7 +77,9 @@ function applyNotationPanel(node, masterId, master) {
     var _a, _b, _c;
     const glyph = BPMN_EVENT_GLYPH[masterId];
     if (glyph) {
-        node.setMetadata('panel', { icon: { glyph, size: 16, corner: 'tl' } });
+        // CENTRED, as BPMN draws its trigger glyphs — the caption now paints BELOW
+        // the circle (labelPlacement), so the middle belongs to the badge.
+        node.setMetadata('panel', { icon: { glyph, size: 16, corner: 'c' } });
         return;
     }
     if (!(masterId in UML_CLASSIFIERS))
@@ -83,11 +88,14 @@ function applyNotationPanel(node, masterId, master) {
     const name = (_b = (_a = master.meta) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'Class';
     // Placeholder members, so a dropped classifier looks like a UML card the user
     // can then edit rather than an empty box.
-    const rows = masterId === 'uml-enumeration'
+    const rows = masterId === 'uml-enum'
         ? [{ text: 'VALUE_A' }, { text: 'VALUE_B' }]
         : [{ text: '+ field: Type' }, { text: '+ method(): void' }];
     node.setMetadata('panel', {
-        header: { text: stereotype ? `${stereotype} ${name}` : name },
+        // A stereotyped classifier stacks «stereotype» OVER the name, the way UML
+        // draws its cards — inline ("«enumeration» Enumeration") the header line
+        // was wider than the card and painted cut off at both edges.
+        header: stereotype ? { lines: [stereotype, name] } : { text: name },
         rows,
         rowHeight: 18,
     });
@@ -242,6 +250,40 @@ function bindStencilPalette(api, hosts, options = {}) {
             body.appendChild(empty);
         }
     }
+    // ── drag ghost ───────────────────────────────────────────────────────────
+    // A lightweight preview that follows the cursor during a palette drag, so
+    // the user can see WHAT they are holding and WHERE it will land. A DOM
+    // element rather than `setDragImage`: the native drag image is browser
+    // chrome — it never appears in a screenshot, and headless/some platforms do
+    // not paint it at all, which is exactly how "dragging from the rail shows no
+    // preview" shipped unnoticed.
+    let ghost = null;
+    const moveGhost = (e) => {
+        if (!ghost)
+            return;
+        ghost.style.left = `${e.clientX}px`;
+        ghost.style.top = `${e.clientY}px`;
+    };
+    const killGhost = () => {
+        ghost === null || ghost === void 0 ? void 0 : ghost.remove();
+        ghost = null;
+        document.removeEventListener('dragover', moveGhost);
+    };
+    const spawnGhost = (master, e) => {
+        var _a, _b;
+        killGhost();
+        const meta = (_a = master.meta) !== null && _a !== void 0 ? _a : {};
+        ghost = document.createElement('div');
+        ghost.className = 'gf-stencil-ghost';
+        ghost.appendChild(thumbnail(master, 28));
+        ghost.append((_b = meta.name) !== null && _b !== void 0 ? _b : master.id);
+        ghost.style.left = `${e.clientX}px`;
+        ghost.style.top = `${e.clientY}px`;
+        document.body.appendChild(ghost);
+        // dragover fires document-wide throughout an HTML5 drag — the one stream
+        // that reliably carries live coordinates on every platform.
+        document.addEventListener('dragover', moveGhost);
+    };
     function itemEl(master) {
         var _a, _b, _c;
         const meta = (_a = master.meta) !== null && _a !== void 0 ? _a : {};
@@ -263,7 +305,17 @@ function bindStencilPalette(api, hosts, options = {}) {
             dt.setData(DND_TYPE, master.id);
             dt.setData('text/plain', (_a = meta.name) !== null && _a !== void 0 ? _a : master.id); // so a stray drop is harmless text
             dt.effectAllowed = 'copy';
+            // Suppress the native drag snapshot where it IS painted — otherwise the
+            // ghost and the platform preview would ride the cursor together.
+            if (typeof Image !== 'undefined' && dt.setDragImage) {
+                const blank = new Image();
+                blank.src =
+                    'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+                dt.setDragImage(blank, 0, 0);
+            }
+            spawnGhost(master, e);
         });
+        el.addEventListener('dragend', killGhost);
         return el;
     }
     // ── drop-to-place on the canvas ──────────────────────────────────────────
@@ -291,6 +343,7 @@ function bindStencilPalette(api, hosts, options = {}) {
     const onDrop = (e) => {
         const id = heldMaster(e);
         canvas.classList.remove('gf-stencil-target');
+        killGhost();
         if (!id)
             return;
         e.preventDefault();
@@ -364,6 +417,7 @@ function bindStencilPalette(api, hosts, options = {}) {
             input.value = q !== null && q !== void 0 ? q : ''; renderList(); },
         place,
         destroy() {
+            killGhost();
             canvas.removeEventListener('dragover', onDragOver);
             canvas.removeEventListener('dragleave', onDragLeave);
             canvas.removeEventListener('drop', onDrop);

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

@@ -21,7 +21,8 @@ export interface ShapeDataPanelHandle {
     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.
+ * 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 declare function bindShapeDataPanel(api: ShapeDataPanelApi, host: HTMLElement, options?: ShapeDataPanelOptions): ShapeDataPanelHandle;

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

@@ -2,15 +2,32 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.bindShapeDataPanel = bindShapeDataPanel;
 /**
- * The shape-data panel — Visio's "Shape Data" window.
+ * The shape-data panel — Visio's "Shape Data" window, grown into the full
+ * properties panel Visio users actually expect.
  *
- * 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).
+ * 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.
  */
 const engine_1 = require("@grafloria/engine");
 const diagram_kit_1 = require("../diagram-kit");
@@ -30,18 +47,78 @@ 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: one
- * node selected → its schema's fields; anything else → the empty message.
+ * 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.
  */
 function bindShapeDataPanel(api, host, options = {}) {
     var _a, _b, _c;
-    (0, styles_1.ensureStencilKitStyles)((_a = host.ownerDocument) !== null && _a !== void 0 ? _a : document);
+    const doc = (_a = host.ownerDocument) !== null && _a !== void 0 ? _a : document;
+    (0, styles_1.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;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         host.innerHTML = '';
         const head = document.createElement('div');
         head.className = 'gf-sd-title';
@@ -49,33 +126,40 @@ function bindShapeDataPanel(api, host, options = {}) {
         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 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 = selected.length > 1 ? 'Select a single shape.' : emptyText;
+            empty.textContent = emptyText;
             host.appendChild(empty);
             return;
         }
-        const node = selected[0];
-        // KIT CARDS FIRST. 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 (((_c = node.getMetadata) === null || _c === void 0 ? void 0 : _c.call(node, 'kitEntity')) || ((_d = node.getMetadata) === null || _d === void 0 ? void 0 : _d.call(node, 'kitClass'))) {
+        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) {
-            const empty = document.createElement('div');
-            empty.className = 'gf-sd-empty';
-            empty.textContent = 'This shape has no data fields.';
-            host.appendChild(empty);
+        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)) {
@@ -83,11 +167,11 @@ function bindShapeDataPanel(api, host, options = {}) {
             row.className = 'gf-sd-row';
             const label = document.createElement('span');
             label.className = 'gf-sd-label';
-            label.textContent = (_e = prop.title) !== null && _e !== void 0 ? _e : humanize(key);
+            label.textContent = (_g = prop.title) !== null && _g !== void 0 ? _g : humanize(key);
             if (prop.description)
                 row.title = prop.description;
             row.appendChild(label);
-            const current = (_h = (_g = (_f = node.getData) === null || _f === void 0 ? void 0 : _f.call(node, key)) !== null && _g !== void 0 ? _g : prop.default) !== null && _h !== void 0 ? _h : '';
+            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;
@@ -150,6 +234,132 @@ function bindShapeDataPanel(api, host, options = {}) {
         }
         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 engine_1.SetNodeLabelCommand(node.id, v))));
+        }
+        form.appendChild(sectionLabel('Size & Position'));
+        const move = (x, y) => { var _a; return exec(new engine_1.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 engine_1.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 engine_1.SetNodeStyleCommand(node.id, { fill: v }))));
+            form.appendChild(colorField('Line', toHexColor((_g = style['stroke']) !== null && _g !== void 0 ? _g : shape['stroke'], '#333333'), (v) => exec(new engine_1.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 engine_1.SetNodeStyleCommand(node.id, { strokeWidth: Math.max(0, n) }))));
+            form.appendChild(checkField('Dashed', !!style['strokeDasharray'], (c) => exec(new engine_1.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 engine_1.SetNodeShapeConfigCommand(node.id, { cornerRadius: r })
+                        : new engine_1.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 engine_1.SetLinkDisplayLabelCommand(link.id, v))));
+        form.appendChild(sectionLabel('Line'));
+        form.appendChild(colorField('Colour', toHexColor(style['stroke'], '#999999'), (v) => exec(new engine_1.UpdateLinkStyleCommand(link.id, { stroke: v }))));
+        form.appendChild(numberField('Width', () => { var _a; return (_a = style['strokeWidth']) !== null && _a !== void 0 ? _a : 2; }, (n) => exec(new engine_1.UpdateLinkStyleCommand(link.id, { strokeWidth: Math.max(0, n) }))));
+        form.appendChild(checkField('Dashed', !!style['strokeDasharray'], (c) => exec(new engine_1.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 engine_1.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 engine_1.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 engine_1.SetNodeStyleCommand(nodeIds, nodePatch));
+            if (linkPatch)
+                for (const l of links)
+                    cmds.push(new engine_1.UpdateLinkStyleCommand(l.id, linkPatch));
+            if (cmds.length === 0)
+                return;
+            exec(cmds.length === 1 ? cmds[0] : new engine_1.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;
@@ -232,6 +442,88 @@ function bindShapeDataPanel(api, host, options = {}) {
         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();

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

@@ -101,6 +101,21 @@ const CSS = `
 
 /* 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. */
 function ensureStencilKitStyles(doc = document) {