@grafloria/element 0.3.19 → 0.3.21

package/{src/libs/element → esm}/src/lib/grafloria.js

@@ -1,11 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Grafloria = void 0;
-exports.render = render;
-exports.renderStatic = renderStatic;
-const renderer_1 = require("@grafloria/renderer");
-const grafloria_flow_element_1 = require("./grafloria-flow-element");
-const node_type_registry_1 = require("./node-type-registry");
+import { createDiagram, renderToStaticSVG } from '@grafloria/renderer';
+import { defineGrafloriaFlow } from './grafloria-flow-element';
+import { registerNodeType, registeredNodeTypes, getNodeType } from './node-type-registry';
 /**
  * Mount `spec` into `target` and return the live instance.
  *
@@ -16,7 +11,7 @@ const node_type_registry_1 = require("./node-type-registry");
  * style text DSL. The engine does have a DSL, but wiring it in is a separate
  * card — `render()` is the embedding surface, not a parser.
  */
-function render(spec, target, options = {}) {
+export function render(spec, target, options = {}) {
     var _a, _b, _c, _d;
     const element = typeof target === 'string'
         ? document.querySelector(target)
@@ -27,14 +22,14 @@ function render(spec, target, options = {}) {
     // Kit specs (dashboard()) carry looser node typing than DiagramSpec — both
     // flow into createDiagram's NodeInput[] the same way.
     const parsed = (typeof spec === 'string' ? parseSpec(spec) : spec);
-    const instance = (0, renderer_1.createDiagram)(element, Object.assign(Object.assign({}, options), { nodes: (_a = parsed.nodes) !== null && _a !== void 0 ? _a : [], edges: (_b = parsed.edges) !== null && _b !== void 0 ? _b : [], 
+    const instance = createDiagram(element, Object.assign(Object.assign({}, options), { nodes: (_a = parsed.nodes) !== null && _a !== void 0 ? _a : [], edges: (_b = parsed.edges) !== null && _b !== void 0 ? _b : [], 
         // Wire the global registry in, so `registerNodeType` works for the tiny API
         // exactly as it does for `<grafloria-flow>` — unless the caller supplies their
         // own. A KIT SPEC may also carry its own painter (dashboard() does: every
         // widget is a custom HTML node), and it must be honoured — otherwise the
         // documented one-liner `render(dashboard({…}), host)` mounts a board whose
         // widgets never paint. Precedence: explicit option > spec > registry.
-        renderCustomNode: (_d = (_c = options.renderCustomNode) !== null && _c !== void 0 ? _c : parsed.renderCustomNode) !== null && _d !== void 0 ? _d : ((node, host) => { var _a; return (_a = (0, node_type_registry_1.getNodeType)(node.type)) === null || _a === void 0 ? void 0 : _a(node, host); }) }));
+        renderCustomNode: (_d = (_c = options.renderCustomNode) !== null && _c !== void 0 ? _c : parsed.renderCustomNode) !== null && _d !== void 0 ? _d : ((node, host) => { var _a; return (_a = getNodeType(node.type)) === null || _a === void 0 ? void 0 : _a(node, host); }) }));
     // Diagram-kit specs (erDiagram/umlDiagram) carry a `finalize(api)` for the
     // post-render wiring that needs the LIVE instance — row interactions,
     // multiplicity chips. Auto-run it so a kit diagram is fully wired from one
@@ -51,8 +46,8 @@ function render(spec, target, options = {}) {
     return instance;
 }
 /** Server-side render (Card 6). Re-exported so the tiny API is self-contained. */
-function renderStatic(options = {}) {
-    return (0, renderer_1.renderToStaticSVG)(options);
+export function renderStatic(options = {}) {
+    return renderToStaticSVG(options);
 }
 function parseSpec(spec) {
     try {
@@ -63,12 +58,12 @@ function parseSpec(spec) {
     }
 }
 /** The namespace object, for `import { Grafloria }` and for `<script>` globals. */
-exports.Grafloria = {
+export const Grafloria = {
     render,
     renderStatic,
-    registerNodeType: node_type_registry_1.registerNodeType,
-    registeredNodeTypes: node_type_registry_1.registeredNodeTypes,
+    registerNodeType,
+    registeredNodeTypes,
     /** Register `<grafloria-flow>` (called for you when you import this package). */
-    define: grafloria_flow_element_1.defineGrafloriaFlow,
+    define: defineGrafloriaFlow,
 };
 //# sourceMappingURL=grafloria.js.map

package/{src/libs/element → esm}/src/lib/load.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.fromDocument = fromDocument;
 /**
  * `fromDocument()` — the LOAD front door.
  *
@@ -64,15 +61,15 @@ exports.fromDocument = fromDocument;
  * "widget" got dashboard chrome painted over it; requiring the stamp the kit
  * itself wrote keeps the registry the general seam it is meant to be.
  */
-const engine_1 = require("@grafloria/engine");
-const node_type_registry_1 = require("./node-type-registry");
-const rows_1 = require("./diagram-kit/rows");
-const editing_1 = require("./diagram-kit/editing");
-const styles_1 = require("./diagram-kit/styles");
-const grid_binder_1 = require("./dashboard-kit/grid-binder");
-const styles_2 = require("./dashboard-kit/styles");
-const widgets_1 = require("./dashboard-kit/widgets");
-const dashboard_1 = require("./dashboard-kit/dashboard");
+import { DiagramSerializer } from '@grafloria/engine';
+import { getNodeType } from './node-type-registry';
+import { bindRowInteractions } from './diagram-kit/rows';
+import { bindCardEditing } from './diagram-kit/editing';
+import { ensureDiagramKitStyles } from './diagram-kit/styles';
+import { bindDashboardGrid } from './dashboard-kit/grid-binder';
+import { ensureDashboardKitStyles } from './dashboard-kit/styles';
+import { defaultWidgetRenderer } from './dashboard-kit/widgets';
+import { createDashboardHandle, } from './dashboard-kit/dashboard';
 /** True when the node is an ER entity card or a UML class card. */
 function isDiagramKitCard(node) {
     return node.getMetadata('kitEntity') !== undefined || node.getMetadata('kitClass') !== undefined;
@@ -102,10 +99,10 @@ function widgetSpecOf(node) {
  * Accepts the flat serializer form, the portable envelope, or the JSON string
  * of either.
  */
-function fromDocument(document, options = {}) {
+export function fromDocument(document, options = {}) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     const parsed = typeof document === 'string' ? parseDocument(document) : document;
-    const model = new engine_1.DiagramSerializer().deserialize(parsed);
+    const model = new DiagramSerializer().deserialize(parsed);
     const nodes = model.getNodes();
     const groups = model.getGroups();
     const boards = new Map();
@@ -113,10 +110,10 @@ function fromDocument(document, options = {}) {
     // so an un-styled card would come back as unstyled divs. Only for documents
     // that actually contain that kit's nodes.
     if (nodes.some(isDiagramKitCard))
-        (0, styles_1.ensureDiagramKitStyles)();
+        ensureDiagramKitStyles();
     if (nodes.some((n) => widgetSpecOf(n) !== null))
-        (0, styles_2.ensureDashboardKitStyles)();
-    const paintWidget = (_a = options.renderWidget) !== null && _a !== void 0 ? _a : widgets_1.defaultWidgetRenderer;
+        ensureDashboardKitStyles();
+    const paintWidget = (_a = options.renderWidget) !== null && _a !== void 0 ? _a : defaultWidgetRenderer;
     // -- reconstruct the dashboard handle's context from the loaded model -------
     // Every board group carries `dashboardBoard` geometry; its widget members
     // carry `widgetSpec`/title/span/rows — the canonical, lossless source for
@@ -178,7 +175,7 @@ function fromDocument(document, options = {}) {
         active: (_s = activeGroup === null || activeGroup === void 0 ? void 0 : activeGroup.id) !== null && _s !== void 0 ? _s : 'main',
         apiRef: null,
     };
-    const handle = (0, dashboard_1.createDashboardHandle)(ctx);
+    const handle = createDashboardHandle(ctx);
     const renderCustomNode = (node, host) => {
         var _a, _b;
         if (options.renderCustomNode)
@@ -191,7 +188,7 @@ function fromDocument(document, options = {}) {
             ctx.hosts.set(node.id, host); // captured so update()/repaint() can find the host
             return paintWidget(widget, host);
         }
-        (_b = (0, node_type_registry_1.getNodeType)(node.type)) === null || _b === void 0 ? void 0 : _b(node, host);
+        (_b = getNodeType(node.type)) === null || _b === void 0 ? void 0 : _b(node, host);
     };
     const finalize = (api) => {
         var _a, _b, _c, _d;
@@ -223,10 +220,10 @@ function fromDocument(document, options = {}) {
             // `rowSelection: false` is recorded only when it is the non-default, so an
             // ordinary document stays byte-identical to what it always was.
             if (!cards.some((n) => n.getMetadata('kitRowSelection') === false)) {
-                (0, rows_1.bindRowInteractions)(a);
+                bindRowInteractions(a);
             }
             if (cards.some((n) => n.getMetadata('kitEditable') === true)) {
-                (0, editing_1.bindCardEditing)(a);
+                bindCardEditing(a);
             }
         }
         // -- dashboard boards -----------------------------------------------------
@@ -239,7 +236,7 @@ function fromDocument(document, options = {}) {
             const board = group.getMetadata('dashboardBoard');
             if (!board)
                 continue;
-            boards.set(group.id, (0, grid_binder_1.bindDashboardGrid)(a, group, Object.assign({}, board)));
+            boards.set(group.id, bindDashboardGrid(a, group, Object.assign({}, board)));
         }
     };
     return { nodes, edges: model.getLinks(), renderCustomNode, finalize, model, boards, handle };

package/{src/libs/element → esm}/src/lib/node-type-registry.js

@@ -1,28 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.registerNodeType = registerNodeType;
-exports.getNodeType = getNodeType;
-exports.hasNodeType = hasNodeType;
-exports.unregisterNodeType = unregisterNodeType;
-exports.registeredNodeTypes = registeredNodeTypes;
-exports.renderFromTemplate = renderFromTemplate;
 const registry = new Map();
 /** Register (or replace) a node type globally. */
-function registerNodeType(type, renderer) {
+export function registerNodeType(type, renderer) {
     registry.set(type, renderer);
 }
-function getNodeType(type) {
+export function getNodeType(type) {
     return registry.get(type);
 }
-function hasNodeType(type) {
+export function hasNodeType(type) {
     return registry.has(type);
 }
 /** Drop a registration (mostly for tests). */
-function unregisterNodeType(type) {
+export function unregisterNodeType(type) {
     registry.delete(type);
 }
 /** Every registered type name. */
-function registeredNodeTypes() {
+export function registeredNodeTypes() {
     return [...registry.keys()];
 }
 /**
@@ -34,7 +26,7 @@ function registeredNodeTypes() {
  * user-supplied, and a template engine that injected raw HTML here would be an
  * XSS vector in every host that embeds us.
  */
-function renderFromTemplate(template, node, element) {
+export function renderFromTemplate(template, node, element) {
     const fragment = template.content.cloneNode(true);
     const fields = fragment.querySelectorAll('[data-field]');
     for (const field of Array.from(fields)) {

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

@@ -0,0 +1,18 @@
+const builders = new Map();
+/** Register the builder for a master id. Last registration wins. */
+export function registerStencilBuilder(masterId, builder) {
+    builders.set(masterId, builder);
+}
+/** The builder for a master id, or undefined for the default template path. */
+export function getStencilBuilder(masterId) {
+    return builders.get(masterId);
+}
+/** Drop a registration (tests, or a host replacing a built-in). */
+export function unregisterStencilBuilder(masterId) {
+    return builders.delete(masterId);
+}
+/** Every master id that currently resolves to a card builder. */
+export function registeredStencilBuilders() {
+    return [...builders.keys()].sort();
+}
+//# sourceMappingURL=builders.js.map

package/{src/libs/element → esm}/src/lib/stencil-kit/card-builders.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.registerCardBuilders = registerCardBuilders;
 /**
  * Card builders for the stencil palette — the bridge that finally lets a
  * dropped "Entity" or "Class" be a REAL kit card instead of a rectangle.
@@ -15,9 +12,9 @@ exports.registerCardBuilders = registerCardBuilders;
  * after a drop is safe and is what makes the FIRST dropped card interactive on
  * a canvas that was never built by a kit.
  */
-const engine_1 = require("@grafloria/engine");
-const diagram_kit_1 = require("../diagram-kit");
-const builders_1 = require("./builders");
+import { NodeModel } from '@grafloria/engine';
+import { entityCardContent, entityAutoHeight, classCardContent, classAutoHeight, bindRowInteractions, bindCardEditing, ensureDiagramKitStyles, } from '../diagram-kit';
+import { registerStencilBuilder } from './builders';
 /** Cards are transparent: the HTML body IS the card, the shape must not paint. */
 const CARD_SHAPE = { type: 'rect', fill: 'none', stroke: 'none' };
 const CARD_STYLE = { fill: 'transparent', stroke: 'transparent', strokeWidth: 0 };
@@ -26,8 +23,8 @@ const nextId = (prefix) => `${prefix}-${++seq}`;
 /** Turn the kit's card spec into a live node, and make the canvas interactive. */
 function mountCard(ctx, opts) {
     var _a, _b, _c, _d;
-    (0, diagram_kit_1.ensureDiagramKitStyles)();
-    const node = new engine_1.NodeModel({
+    ensureDiagramKitStyles();
+    const node = new NodeModel({
         id: opts.id,
         type: 'kit-card',
         position: { x: ctx.at.x, y: ctx.at.y },
@@ -48,20 +45,20 @@ function mountCard(ctx, opts) {
     if (container) {
         const kitApi = Object.assign(Object.assign({}, ctx.api), { container });
         try {
-            (0, diagram_kit_1.bindRowInteractions)(kitApi);
+            bindRowInteractions(kitApi);
         }
         catch ( /* optional */_e) { /* optional */ }
         try {
-            (0, diagram_kit_1.bindCardEditing)(kitApi);
+            bindCardEditing(kitApi);
         }
         catch ( /* optional */_f) { /* optional */ }
     }
     return node;
 }
 /** Register the built-in card builders (ER entity/table, UML classifiers). */
-function registerCardBuilders() {
+export function registerCardBuilders() {
     for (const masterId of ['erd-entity', 'erd-table', 'erd-associative-entity', 'erd-bridge-entity']) {
-        (0, builders_1.registerStencilBuilder)(masterId, (ctx) => {
+        registerStencilBuilder(masterId, (ctx) => {
             var _a, _b;
             const id = nextId('entity');
             const spec = {
@@ -75,15 +72,15 @@ function registerCardBuilders() {
             return mountCard(ctx, {
                 id,
                 width: 220,
-                height: (0, diagram_kit_1.entityAutoHeight)(spec, true),
-                content: (0, diagram_kit_1.entityCardContent)(spec, true),
+                height: entityAutoHeight(spec, true),
+                content: entityCardContent(spec, true),
                 metaKey: 'kitEntity',
                 spec,
             });
         });
     }
     for (const masterId of ['uml-class', 'uml-abstract-class', 'uml-interface']) {
-        (0, builders_1.registerStencilBuilder)(masterId, (ctx) => {
+        registerStencilBuilder(masterId, (ctx) => {
             var _a, _b;
             const id = nextId('class');
             const spec = {
@@ -97,8 +94,8 @@ function registerCardBuilders() {
             return mountCard(ctx, {
                 id,
                 width: 220,
-                height: (0, diagram_kit_1.classAutoHeight)(spec, true),
-                content: (0, diagram_kit_1.classCardContent)(spec, true),
+                height: classAutoHeight(spec, true),
+                content: classCardContent(spec, true),
                 metaKey: 'kitClass',
                 spec,
             });

package/{src/libs/element/src/lib/stencil-kit/index.d.ts → esm/src/lib/stencil-kit/index.js}

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

package/{src/libs/element → esm}/src/lib/stencil-kit/palette.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.bindStencilPalette = bindStencilPalette;
-const tslib_1 = require("tslib");
+import { __awaiter } from "tslib";
 /**
  * The stencil palette — the signature Visio surface: a categorized, searchable
  * list of shape masters you DRAG ONTO THE CANVAS.
@@ -17,10 +14,10 @@ const tslib_1 = require("tslib");
  *                           drop lands the master at the cursor as ONE undoable
  *                           BatchCommand.
  */
-const engine_1 = require("@grafloria/engine");
-const renderer_1 = require("@grafloria/renderer");
-const styles_1 = require("./styles");
-const builders_1 = require("./builders");
+import { listStencils, NodeFactory, AddNodeCommand, BatchCommand, } from '@grafloria/engine';
+import { getShape } from '@grafloria/renderer';
+import { ensureStencilKitStyles } from './styles';
+import { getStencilBuilder } from './builders';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 /** The MIME the palette drags with — namespaced so a page's other DnD is untouched. */
 const DND_TYPE = 'application/x-grafloria-master';
@@ -123,7 +120,7 @@ function thumbnail(master, box = 34) {
     const h = Math.max(6, h0 * s);
     let el;
     try {
-        const spec = (0, renderer_1.getShape)(paint.type).outline(w, h);
+        const spec = getShape(paint.type).outline(w, h);
         el = document.createElementNS(SVG_NS, spec.el);
         for (const [k, v] of Object.entries(spec.geom))
             el.setAttribute(k, String(v));
@@ -168,10 +165,10 @@ function subtree(diagram, root) {
  * @param hosts   `palette`: where the list renders · `canvas`: the drop target
  *                (the element the diagram is mounted in)
  */
-function bindStencilPalette(api, hosts, options = {}) {
+export function bindStencilPalette(api, hosts, options = {}) {
     var _a, _b, _c;
-    (0, styles_1.ensureStencilKitStyles)((_a = hosts.palette.ownerDocument) !== null && _a !== void 0 ? _a : document);
-    const stencils = (_b = options.stencils) !== null && _b !== void 0 ? _b : (0, engine_1.listStencils)();
+    ensureStencilKitStyles((_a = hosts.palette.ownerDocument) !== null && _a !== void 0 ? _a : document);
+    const stencils = (_b = options.stencils) !== null && _b !== void 0 ? _b : listStencils();
     /** master id → stencil id, so a drop knows which notation it belongs to. */
     const stencilOf = new Map();
     for (const st of stencils)
@@ -362,7 +359,7 @@ function bindStencilPalette(api, hosts, options = {}) {
      * normal add.
      */
     function place(masterId, world) {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        return __awaiter(this, void 0, void 0, function* () {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             const engine = api.getEngine();
             const diagram = api.getModel();
@@ -378,9 +375,9 @@ function bindStencilPalette(api, hosts, options = {}) {
             // a kit card, not a silhouette). Anything without one takes the template
             // path — see stencil-kit/builders.ts for why this is a registry and not an
             // id check inside the palette.
-            const builder = (0, builders_1.getStencilBuilder)(masterId);
+            const builder = getStencilBuilder(masterId);
             const built = builder ? builder({ api, master, at }) : null;
-            const factory = built ? null : new engine_1.NodeFactory(registry, diagram);
+            const factory = built ? null : new NodeFactory(registry, diagram);
             const root = built !== null && built !== void 0 ? built : factory.createFromTemplate(masterId, (_e = (_d = options.data) === null || _d === void 0 ? void 0 : _d.call(options, master)) !== null && _e !== void 0 ? _e : {}, at);
             const created = built ? [built] : subtree(diagram, root);
             // NOTE: masters used to need `useHTMLLayer` stripped here or they rendered
@@ -403,10 +400,10 @@ function bindStencilPalette(api, hosts, options = {}) {
             applyNotationTheme(root, stencilOf.get(masterId), options.notationTheme, api);
             // Serialize into commands BEFORE detaching (AddNodeCommand snapshots in its
             // constructor), then detach and replay through the command manager.
-            const cmds = created.map((n) => new engine_1.AddNodeCommand(n));
+            const cmds = created.map((n) => new AddNodeCommand(n));
             for (const n of [...created].reverse())
                 diagram.removeNode(n.id);
-            yield engine.commandManager.execute(new engine_1.BatchCommand(`Place ${(_g = (_f = master.meta) === null || _f === void 0 ? void 0 : _f.name) !== null && _g !== void 0 ? _g : masterId}`, cmds));
+            yield engine.commandManager.execute(new BatchCommand(`Place ${(_g = (_f = master.meta) === null || _f === void 0 ? void 0 : _f.name) !== null && _g !== void 0 ? _g : masterId}`, cmds));
             (_h = options.onPlace) === null || _h === void 0 ? void 0 : _h.call(options, { master, nodeId: root.id, x: at.x, y: at.y });
             return root.id;
         });

package/{src/libs/element → esm}/src/lib/stencil-kit/shape-data.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.bindShapeDataPanel = bindShapeDataPanel;
 /**
  * The shape-data panel — Visio's "Shape Data" window, grown into the full
  * properties panel Visio users actually expect.
@@ -29,9 +26,9 @@ exports.bindShapeDataPanel = bindShapeDataPanel;
  * `.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");
-const styles_1 = require("./styles");
+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;
@@ -103,10 +100,10 @@ function ensureShapeDataPanelStyles(doc = document) {
  * nodes, edges and multi-selections each get their own sections; nothing
  * selected shows the empty message.
  */
-function bindShapeDataPanel(api, host, options = {}) {
+export function bindShapeDataPanel(api, host, options = {}) {
     var _a, _b, _c;
     const doc = (_a = host.ownerDocument) !== null && _a !== void 0 ? _a : document;
-    (0, styles_1.ensureStencilKitStyles)(doc);
+    ensureStencilKitStyles(doc);
     ensureShapeDataPanelStyles(doc);
     host.classList.add('gf-shapedata');
     const title = (_b = options.title) !== null && _b !== void 0 ? _b : 'Shape data';
@@ -175,7 +172,7 @@ function bindShapeDataPanel(api, host, options = {}) {
             // Commit through the command so the edit is undoable and collab-safe.
             const commit = (value) => {
                 var _a;
-                void engine.commandManager.execute(new engine_1.SetNodeDataCommand(node.id, { [key]: value }));
+                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;
@@ -247,14 +244,14 @@ function bindShapeDataPanel(api, host, options = {}) {
         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(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 engine_1.MoveNodeCommand(node.id, { x, y, z: (_a = node.position) === null || _a === void 0 ? void 0 : _a.z }, undefined, { mergeable: false })); };
+        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 engine_1.ResizeNodeCommand(node.id, {
+            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,
@@ -269,10 +266,10 @@ function bindShapeDataPanel(api, host, options = {}) {
             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 }))));
+            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') {
@@ -282,8 +279,8 @@ function bindShapeDataPanel(api, host, options = {}) {
                     // 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 }));
+                        ? new SetNodeShapeConfigCommand(node.id, { cornerRadius: r })
+                        : new SetNodeStyleCommand(node.id, { borderRadius: r }));
                 }));
             }
         }
@@ -296,16 +293,16 @@ function bindShapeDataPanel(api, host, options = {}) {
         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(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 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(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 engine_1.UpdateLinkStyleCommand(link.id, {
+            exec(new UpdateLinkStyleCommand(link.id, {
                 [slot]: Object.assign(Object.assign({ size: 10, filled: true }, existing), { type }),
             }));
         };
@@ -314,7 +311,7 @@ function bindShapeDataPanel(api, host, options = {}) {
         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))));
+        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 ───────────────────────────────────────────────────────
@@ -335,13 +332,13 @@ function bindShapeDataPanel(api, host, options = {}) {
         const applyAll = (nodePatch, linkPatch) => {
             const cmds = [];
             if (nodePatch && nodeIds.length > 0)
-                cmds.push(new engine_1.SetNodeStyleCommand(nodeIds, nodePatch));
+                cmds.push(new SetNodeStyleCommand(nodeIds, nodePatch));
             if (linkPatch)
                 for (const l of links)
-                    cmds.push(new engine_1.UpdateLinkStyleCommand(l.id, linkPatch));
+                    cmds.push(new UpdateLinkStyleCommand(l.id, linkPatch));
             if (cmds.length === 0)
                 return;
-            exec(cmds.length === 1 ? cmds[0] : new engine_1.BatchCommand('Format selection', cmds));
+            exec(cmds.length === 1 ? cmds[0] : new BatchCommand('Format selection', cmds));
         };
         const form = document.createElement('div');
         form.className = 'gf-sd-fields';
@@ -365,7 +362,7 @@ function bindShapeDataPanel(api, host, options = {}) {
         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 ? (0, diagram_kit_1.erTable)(api, node.id) : (0, diagram_kit_1.umlClass)(api, node.id);
+        const handle = isEr ? erTable(api, node.id) : umlClass(api, node.id);
         const form = document.createElement('div');
         form.className = 'gf-sd-fields';
         // ── the card itself ──

package/{src/libs/element → esm}/src/lib/stencil-kit/styles.js

@@ -1,6 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ensureStencilKitStyles = ensureStencilKitStyles;
 /**
  * Stencil-palette styles, injected once per document (same discipline as the
  * dashboard kit: the kit owns its chrome so a host gets a working palette
@@ -118,7 +115,7 @@ const CSS = `
 .gf-stencil-ghost svg { display: block; }
 `;
 /** Inject the palette stylesheet once per document. */
-function ensureStencilKitStyles(doc = document) {
+export function ensureStencilKitStyles(doc = document) {
     if (doc.getElementById(STENCIL_KIT_STYLE_ID))
         return;
     const style = doc.createElement('style');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafloria/element",
-  "version": "0.3.19",
+  "version": "0.3.21",
   "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',
-};