@grafloria/element 0.3.17 → 0.3.19

package/src/lib/load.ts

@@ -0,0 +1,359 @@
+/**
+ * `fromDocument()` — the LOAD front door.
+ *
+ * ---------------------------------------------------------------------------
+ * THE GAP THIS CLOSES
+ * ---------------------------------------------------------------------------
+ * Saving was never the problem. `DiagramSerializer.serialize()` already emits a
+ * document that round-trips byte-identically, carrying nodes, links, ports,
+ * groups and every scrap of kit metadata. LOADING was the problem, in three
+ * layers:
+ *
+ *   1. THERE WAS NO FRONT DOOR. `CreateDiagramOptions` takes `nodes`/`edges`;
+ *      nothing took a saved document. `deserialize()` handed back a
+ *      `DiagramModel` that no entry point would render.
+ *   2. THE KITS' POST-RENDER WIRING NEVER RAN. `erDiagram()`/`umlDiagram()` do
+ *      their interaction wiring in `finalize(api)` — row selection, in-canvas
+ *      editing, the suppressed resize handles. A document has no `finalize`, so
+ *      a "successfully loaded" ERD was a PICTURE of an ERD: it looked right and
+ *      did nothing.
+ *   3. CUSTOM NODES HAD NO PAINTER. `renderCustomNode` is a function; functions
+ *      do not serialize. A loaded dashboard mounted 14 widget hosts and painted
+ *      into none of them.
+ *
+ * ---------------------------------------------------------------------------
+ * WHY THE NODES GO BACK IN AS LIVE MODELS
+ * ---------------------------------------------------------------------------
+ * The obvious implementation projects every loaded `NodeModel` back down into a
+ * `NodeSpec` and lets `buildNode()` rebuild it. That is a LOSSY detour, and it
+ * loses exactly the things a saved diagram is made of: `toNodeSpec()` carries
+ * id/position/size/data/label/shape and nothing else — no ports, no metadata,
+ * no behavior. An ER card would come back with four default side ports instead
+ * of its field ports, and every FK→PK edge would silently reroute.
+ *
+ * It is also unnecessary. `applyNodes()`/`applyEdges()` have always accepted a
+ * live `NodeModel`/`LinkModel` and pass it through untouched — the documented
+ * "mix data with your own model" seam. So the loaded models ARE the input, and
+ * nothing is projected, converted or lost.
+ *
+ * ---------------------------------------------------------------------------
+ * HOW PAINTERS COME BACK
+ * ---------------------------------------------------------------------------
+ * ER and UML need NOTHING: their card is `metadata.html`, a structured tree the
+ * renderer paints itself, and metadata round-trips. Measured, not assumed — a
+ * loaded ER document paints byte-identical cards with no painter in sight.
+ *
+ * Dashboard widgets are custom HTML nodes and do need one. The kit REBUILDS the
+ * widget spec from the node's own metadata (`widgetKind` / `widgetSpec` /
+ * `widgetTitle`) and hands it to the same `defaultWidgetRenderer` the authoring
+ * path uses, so a loaded board is drawn by the identical code.
+ *
+ * Precedence, and why:
+ *
+ *   caller's `renderCustomNode`  — an explicit override outranks everything.
+ *   caller's `renderWidget`      — the app's own chart painter; a board that was
+ *                                  authored with one must be reloaded with it.
+ *   the kit's own painter        — but ONLY for nodes the kit actually stamped.
+ *   {@link getNodeType} registry — everything else, exactly as `render()` does.
+ *
+ * The kit claims a node by its METADATA, never by `type === 'widget'` alone.
+ * Hijacking a type name would mean any unrelated diagram with a node called
+ * "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.
+ */
+import { DiagramSerializer } from '@grafloria/engine';
+import type {
+  DiagramDocumentEnvelope,
+  DiagramModel,
+  GroupModel,
+  LinkModel,
+  NodeModel,
+  SerializedDiagramData,
+} 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, type DashboardGridHandle } from './dashboard-kit/grid-binder';
+import { ensureDashboardKitStyles } from './dashboard-kit/styles';
+import { defaultWidgetRenderer, type WidgetRenderer } from './dashboard-kit/widgets';
+import {
+  createDashboardHandle,
+  type DashboardApiRef,
+  type DashboardHandle,
+  type DashboardHandleContext,
+  type DashboardViewSpec,
+  type DashboardWidgetSpec,
+} from './dashboard-kit/dashboard';
+
+/** Anything `DiagramSerializer.deserialize()` accepts, or the JSON string of it. */
+export type SavedDiagram =
+  | SerializedDiagramData
+  | DiagramDocumentEnvelope
+  | Record<string, unknown>
+  | string;
+
+export interface FromDocumentOptions {
+  /**
+   * The app's own widget painter — the same function it passed to
+   * `dashboard({ renderWidget })`. A board authored with a custom painter must
+   * be RELOADED with it, or the reload silently drops the app's chrome.
+   */
+  renderWidget?: WidgetRenderer;
+  /** Full override of the custom-node painter. Outranks everything. */
+  renderCustomNode?: (node: NodeModel, host: HTMLElement) => void;
+  /**
+   * Re-attach kit interaction wiring (row selection, in-canvas editing, the
+   * dashboard grid binder). Default true — a loaded diagram should behave like
+   * the one that was saved. Pass false for a read-only viewer.
+   */
+  interactive?: boolean;
+}
+
+/** What {@link fromDocument} returns: a `render()` spec, plus the way back in. */
+export interface LoadedDiagramSpec {
+  nodes: NodeModel[];
+  edges: LinkModel[];
+  renderCustomNode: (node: NodeModel, host: HTMLElement) => void;
+  finalize: (api: unknown) => void;
+  /** The deserialized model — the escape hatch, available before any render. */
+  readonly model: DiagramModel;
+  /**
+   * Live grid binders for the boards `finalize()` re-attached, keyed by group
+   * id. Empty for a document that is not a dashboard.
+   *
+   * This is the SAME Map instance the handle drives (`handle.binderOf` returns
+   * from it), so the two can never disagree — `boards` is now derived from the
+   * handle's own binders rather than a parallel copy.
+   */
+  readonly boards: Map<string, DashboardGridHandle>;
+  /**
+   * The dashboard toolbar handle over the reloaded board(s) — the SAME
+   * `DashboardHandle` `dashboard()` returns, built by the one shared builder so
+   * it cannot drift from the authoring surface: addWidget/showView/setSizing/
+   * setColumns/toJSON/exportIds and the widget handles, all live on the reload.
+   *
+   * INERT (empty `views`, every op a no-op) for a document that is not a
+   * dashboard — an ER/UML load carries no board, so an honest empty handle
+   * beats one that pretends a class card is a widget.
+   *
+   * Two carried limits, both because the datum is not in the document:
+   *  - `responsive` is a runtime seam, never serialised, so a reloaded board is
+   *    fixed at its saved column count until `setColumns`/`responsive` is
+   *    re-supplied; `toJSON()` therefore omits it.
+   *  - `renderWidget`/`onLayoutChange` are functions and cannot serialise —
+   *    pass `renderWidget` to `fromDocument({ renderWidget })` to reattach the
+   *    app's own painter, exactly as `dashboard({ renderWidget })` did.
+   */
+  readonly handle: DashboardHandle;
+}
+
+/** The board geometry `dashboard()` stamps on its view group so a reload can rebind. */
+interface PersistedBoard {
+  columns?: number;
+  gap?: number;
+  padding?: number;
+  sizing?: 'fit' | 'grow';
+  baseRowHeight?: number;
+  designHeight?: number;
+  float?: boolean;
+  rtl?: boolean;
+}
+
+/** True when the node is an ER entity card or a UML class card. */
+function isDiagramKitCard(node: NodeModel): boolean {
+  return node.getMetadata('kitEntity') !== undefined || node.getMetadata('kitClass') !== undefined;
+}
+
+/**
+ * Rebuild the widget spec the kit's renderers eat, from the node's own metadata.
+ * Returns null for a node the dashboard kit did not stamp — see the header on
+ * why the type name alone is not enough.
+ */
+function widgetSpecOf(node: NodeModel): DashboardWidgetSpec | null {
+  const kind = node.getMetadata('widgetKind');
+  if (kind === undefined) return null;
+  const title = node.getMetadata('widgetTitle');
+  return {
+    id: node.id,
+    kind: kind as string,
+    ...(typeof title === 'string' ? { title } : {}),
+    data: (node.getMetadata('widgetSpec') ?? {}) as Record<string, unknown>,
+    span: node.getMetadata('columnSpan') as number | undefined,
+    rows: node.getMetadata('rowSpan') as number | undefined,
+  };
+}
+
+/**
+ * Turn a saved document back into something `render()` can mount.
+ *
+ * ```ts
+ * const json = JSON.stringify(new DiagramSerializer().serialize(api.getModel()));
+ * // …later, in a fresh page:
+ * render(fromDocument(json), host);
+ * ```
+ *
+ * Accepts the flat serializer form, the portable envelope, or the JSON string
+ * of either.
+ */
+export function fromDocument(
+  document: SavedDiagram,
+  options: FromDocumentOptions = {}
+): LoadedDiagramSpec {
+  const parsed = typeof document === 'string' ? parseDocument(document) : document;
+  const model = new DiagramSerializer().deserialize(parsed as never);
+  const nodes = model.getNodes();
+  const groups = model.getGroups();
+  const boards = new Map<string, DashboardGridHandle>();
+
+  // The kits inject their stylesheet from their builder; a load never calls one,
+  // 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)) ensureDiagramKitStyles();
+  if (nodes.some((n) => widgetSpecOf(n) !== null)) ensureDashboardKitStyles();
+
+  const paintWidget = options.renderWidget ?? 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
+  // widgets (the load.ts principle that non-widget nodes go back as LIVE models
+  // is untouched; only widgets are rebuilt from metadata, exactly as the
+  // renderCustomNode painter already does). That is enough to build the SAME
+  // handle dashboard() does, through the SAME builder — no drifting twin.
+  const dashGroups = groups.filter((g) => g.getMetadata('dashboardBoard') !== undefined);
+  const specById = new Map<string, DashboardWidgetSpec>();
+  const viewOfWidget = new Map<string, string>();
+  const ctxViews: DashboardViewSpec[] = dashGroups.map((g) => {
+    const board = g.getMetadata('dashboardBoard') as PersistedBoard;
+    const widgets: DashboardWidgetSpec[] = [];
+    for (const memberId of g.members ?? []) {
+      const node = model.getNode(memberId);
+      const ws = node ? widgetSpecOf(node) : null;
+      if (!ws) continue; // non-widget members (e.g. a nested slab group) are not widgets
+      specById.set(ws.id, ws);
+      viewOfWidget.set(ws.id, g.id);
+      widgets.push(ws);
+    }
+    return { id: g.id, name: g.name, widgets, columns: board.columns, width: g.size?.width, height: g.size?.height };
+  });
+
+  const firstBoard = dashGroups[0]?.getMetadata('dashboardBoard') as PersistedBoard | undefined;
+  // The active view is the one the save left ON camera (x≈0); the others were
+  // parked far off-screen by showView. Falls back to the first board when
+  // positions are ambiguous (e.g. a single view, or positions not restored).
+  const activeGroup = dashGroups.find((g) => g.position.x > -1000) ?? dashGroups[0];
+
+  const ctx: DashboardHandleContext = {
+    views: ctxViews,
+    groups: new Map(dashGroups.map((g) => [g.id, g])),
+    // The SAME map the LoadedDiagramSpec exposes as `boards` — derived, not a copy.
+    binders: boards,
+    specById,
+    viewOfWidget,
+    hosts: new Map<string, HTMLElement>(),
+    renderWidget: paintWidget,
+    columns: firstBoard?.columns ?? 12,
+    gap: firstBoard?.gap ?? 8,
+    rowHeight: firstBoard?.baseRowHeight ?? 130,
+    boardW: dashGroups[0]?.size?.width ?? 1180,
+    boardH: dashGroups[0]?.size?.height ?? 660,
+    // responsive is NOT in the document (a runtime seam), so it is deliberately
+    // absent from the round-trip; width/height/columns/gap/sizing/float/rtl are.
+    optionsBase: firstBoard
+      ? {
+          columns: firstBoard.columns,
+          gap: firstBoard.gap,
+          rowHeight: firstBoard.baseRowHeight,
+          sizing: firstBoard.sizing,
+          float: firstBoard.float,
+          rtl: firstBoard.rtl,
+          width: dashGroups[0]?.size?.width,
+          height: dashGroups[0]?.size?.height,
+        }
+      : {},
+    active: activeGroup?.id ?? 'main',
+    apiRef: null,
+  };
+  const handle = createDashboardHandle(ctx);
+
+  const renderCustomNode = (node: NodeModel, host: HTMLElement): void => {
+    if (options.renderCustomNode) return options.renderCustomNode(node, host);
+    // Prefer the ctx spec object so a later handle.update()/repaint() mutates the
+    // SAME object this initial paint used; fall back to a fresh rebuild for a
+    // loose widget node that belongs to no reconstructed board.
+    const widget = specById.get(node.id) ?? widgetSpecOf(node);
+    if (widget) {
+      ctx.hosts.set(node.id, host); // captured so update()/repaint() can find the host
+      return paintWidget(widget, host);
+    }
+    getNodeType(node.type)?.(node, host);
+  };
+
+  const finalize = (api: unknown): void => {
+    const a = api as FinalizeApi | null;
+    if (!a) return;
+
+    // -- groups ---------------------------------------------------------------
+    // Groups are not part of `nodes`/`edges`, so nothing else would carry them
+    // across. A dashboard without its view group is a set of loose widgets: no
+    // board frame, and nothing for the grid binder to bind to.
+    const live = a.getModel?.();
+    if (live) {
+      for (const group of groups) {
+        if (!live.getGroup?.(group.id)) live.addGroup?.(group);
+      }
+    }
+
+    if (options.interactive === false) return;
+
+    // -- ER / UML -------------------------------------------------------------
+    const cards = nodes.filter(isDiagramKitCard);
+    if (cards.length > 0 && a.container) {
+      for (const node of cards) {
+        // The card draws its own selection ring; the node's resize handles would
+        // frame it a second time. `erDiagram().finalize` does this on the live
+        // model for the same reason — and behaviour is NOT in the document.
+        node.setBehavior?.({ resizable: false });
+      }
+      // `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)) {
+        bindRowInteractions(a as never);
+      }
+      if (cards.some((n) => n.getMetadata('kitEditable') === true)) {
+        bindCardEditing(a as never);
+      }
+    }
+
+    // -- dashboard boards -----------------------------------------------------
+    // Wire the render API into the handle's boxed cell, then bind each board.
+    // `bindDashboardGrid` sync()s on construction, so the handle's cellOf/toJSON
+    // work immediately — no camera move, no showView, so the paint is byte-for-
+    // byte what a boards-only load produced.
+    ctx.apiRef = a as unknown as DashboardApiRef;
+    for (const group of groups) {
+      const board = group.getMetadata('dashboardBoard') as PersistedBoard | undefined;
+      if (!board) continue;
+      boards.set(group.id, bindDashboardGrid(a as never, group, { ...board }));
+    }
+  };
+
+  return { nodes, edges: model.getLinks(), renderCustomNode, finalize, model, boards, handle };
+}
+
+interface FinalizeApi {
+  container?: HTMLElement;
+  getModel?: () => {
+    getGroup?: (id: string) => GroupModel | undefined;
+    addGroup?: (g: GroupModel) => void;
+  };
+}
+
+function parseDocument(json: string): SavedDiagram {
+  try {
+    return JSON.parse(json) as Record<string, unknown>;
+  } catch (error) {
+    throw new Error(`fromDocument: not a saved diagram (${(error as Error).message})`);
+  }
+}

package/src/lib/node-type-registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"node-type-registry.js","sourceRoot":"","sources":["../../../../../libs/element/src/lib/node-type-registry.ts"],"names":[],"mappings":";;AA2BA,4CAEC;AAED,kCAEC;AAED,kCAEC;AAGD,gDAEC;AAGD,kDAEC;AAWD,gDAiBC;AAnDD,MAAM,QAAQ,GAAG,IAAI,GAAG,EAA4B,CAAC;AAErD,kDAAkD;AAClD,SAAgB,gBAAgB,CAAC,IAAY,EAAE,QAA0B;IACvE,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC/B,CAAC;AAED,SAAgB,WAAW,CAAC,IAAY;IACtC,OAAO,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC;AAED,SAAgB,WAAW,CAAC,IAAY;IACtC,OAAO,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC;AAED,8CAA8C;AAC9C,SAAgB,kBAAkB,CAAC,IAAY;IAC7C,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AACxB,CAAC;AAED,kCAAkC;AAClC,SAAgB,mBAAmB;IACjC,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;AAC9B,CAAC;AAED;;;;;;;;GAQG;AACH,SAAgB,kBAAkB,CAChC,QAA6B,EAC7B,IAAe,EACf,OAAoB;IAEpB,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAqB,CAAC;IAEtE,MAAM,MAAM,GAAG,QAAQ,CAAC,gBAAgB,CAAc,cAAc,CAAC,CAAC;IACtE,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;QACvC,MAAM,GAAG,GAAG,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QAC7C,IAAI,CAAC,GAAG;YAAE,SAAS;QACnB,MAAM,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAE,IAAI,CAAC,IAAgC,CAAC,GAAG,CAAC,CAAC;QACnF,KAAK,CAAC,WAAW,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjF,CAAC;IAED,OAAO,CAAC,WAAW,GAAG,EAAE,CAAC;IACzB,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AAChC,CAAC"}
+{"version":3,"file":"node-type-registry.js","sourceRoot":"","sources":["node-type-registry.ts"],"names":[],"mappings":";;AA2BA,4CAEC;AAED,kCAEC;AAED,kCAEC;AAGD,gDAEC;AAGD,kDAEC;AAWD,gDAiBC;AAnDD,MAAM,QAAQ,GAAG,IAAI,GAAG,EAA4B,CAAC;AAErD,kDAAkD;AAClD,SAAgB,gBAAgB,CAAC,IAAY,EAAE,QAA0B;IACvE,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;AAC/B,CAAC;AAED,SAAgB,WAAW,CAAC,IAAY;IACtC,OAAO,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC;AAED,SAAgB,WAAW,CAAC,IAAY;IACtC,OAAO,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC;AAED,8CAA8C;AAC9C,SAAgB,kBAAkB,CAAC,IAAY;IAC7C,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AACxB,CAAC;AAED,kCAAkC;AAClC,SAAgB,mBAAmB;IACjC,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;AAC9B,CAAC;AAED;;;;;;;;GAQG;AACH,SAAgB,kBAAkB,CAChC,QAA6B,EAC7B,IAAe,EACf,OAAoB;IAEpB,MAAM,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAqB,CAAC;IAEtE,MAAM,MAAM,GAAG,QAAQ,CAAC,gBAAgB,CAAc,cAAc,CAAC,CAAC;IACtE,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;QACvC,MAAM,GAAG,GAAG,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QAC7C,IAAI,CAAC,GAAG;YAAE,SAAS;QACnB,MAAM,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAE,IAAI,CAAC,IAAgC,CAAC,GAAG,CAAC,CAAC;QACnF,KAAK,CAAC,WAAW,GAAG,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjF,CAAC;IAED,OAAO,CAAC,WAAW,GAAG,EAAE,CAAC;IACzB,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AAChC,CAAC"}

package/src/lib/node-type-registry.ts

@@ -0,0 +1,76 @@
+import type { NodeModel } from '@grafloria/engine';
+
+/**
+ * The framework-free custom-node registry behind `<grafloria-flow>` and
+ * `Grafloria.registerNodeType()`.
+ *
+ * A "node type" is just a function that fills a host element the core handed us:
+ *
+ * ```ts
+ * Grafloria.registerNodeType('card', (node, el) => {
+ *   el.innerHTML = `<div class="card">${node.data.title}</div>`;
+ * });
+ * ```
+ *
+ * There is a second, zero-JavaScript path: a `<template data-node-type="card">`
+ * slotted inside the `<grafloria-flow>` element. The template is cloned per node and
+ * `[data-field="title"]` elements are filled from `node.data` — which is what
+ * lets a CMS, a notebook or a plain HTML page ship a custom node with no build
+ * step at all.
+ */
+
+/** Fills `element` with the visual for `node`. Called once per mounted node. */
+export type NodeTypeRenderer = (node: NodeModel, element: HTMLElement) => void;
+
+const registry = new Map<string, NodeTypeRenderer>();
+
+/** Register (or replace) a node type globally. */
+export function registerNodeType(type: string, renderer: NodeTypeRenderer): void {
+  registry.set(type, renderer);
+}
+
+export function getNodeType(type: string): NodeTypeRenderer | undefined {
+  return registry.get(type);
+}
+
+export function hasNodeType(type: string): boolean {
+  return registry.has(type);
+}
+
+/** Drop a registration (mostly for tests). */
+export function unregisterNodeType(type: string): void {
+  registry.delete(type);
+}
+
+/** Every registered type name. */
+export function registeredNodeTypes(): string[] {
+  return [...registry.keys()];
+}
+
+/**
+ * Render a node from a slotted `<template data-node-type="...">`.
+ *
+ * Clones the template's content into `element` and substitutes `node.data` into
+ * every `[data-field="key"]` descendant's text. Values are written with
+ * `textContent`, never `innerHTML`: a diagram's `data` is frequently
+ * user-supplied, and a template engine that injected raw HTML here would be an
+ * XSS vector in every host that embeds us.
+ */
+export function renderFromTemplate(
+  template: HTMLTemplateElement,
+  node: NodeModel,
+  element: HTMLElement
+): void {
+  const fragment = template.content.cloneNode(true) as DocumentFragment;
+
+  const fields = fragment.querySelectorAll<HTMLElement>('[data-field]');
+  for (const field of Array.from(fields)) {
+    const key = field.getAttribute('data-field');
+    if (!key) continue;
+    const value = key === 'id' ? node.id : (node.data as Record<string, unknown>)[key];
+    field.textContent = value === undefined || value === null ? '' : String(value);
+  }
+
+  element.textContent = '';
+  element.appendChild(fragment);
+}

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

@@ -1 +1 @@
-{"version":3,"file":"builders.js","sourceRoot":"","sources":["../../../../../../libs/element/src/lib/stencil-kit/builders.ts"],"names":[],"mappings":";;AAwCA,wDAEC;AAGD,8CAEC;AAGD,4DAEC;AAGD,8DAEC;AApBD,MAAM,QAAQ,GAAG,IAAI,GAAG,EAA0B,CAAC;AAEnD,oEAAoE;AACpE,SAAgB,sBAAsB,CAAC,QAAgB,EAAE,OAAuB;IAC9E,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AAClC,CAAC;AAED,+EAA+E;AAC/E,SAAgB,iBAAiB,CAAC,QAAgB;IAChD,OAAO,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAChC,CAAC;AAED,mEAAmE;AACnE,SAAgB,wBAAwB,CAAC,QAAgB;IACvD,OAAO,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AACnC,CAAC;AAED,iEAAiE;AACjE,SAAgB,yBAAyB;IACvC,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;AACrC,CAAC"}
+{"version":3,"file":"builders.js","sourceRoot":"","sources":["builders.ts"],"names":[],"mappings":";;AAwCA,wDAEC;AAGD,8CAEC;AAGD,4DAEC;AAGD,8DAEC;AApBD,MAAM,QAAQ,GAAG,IAAI,GAAG,EAA0B,CAAC;AAEnD,oEAAoE;AACpE,SAAgB,sBAAsB,CAAC,QAAgB,EAAE,OAAuB;IAC9E,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AAClC,CAAC;AAED,+EAA+E;AAC/E,SAAgB,iBAAiB,CAAC,QAAgB;IAChD,OAAO,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAChC,CAAC;AAED,mEAAmE;AACnE,SAAgB,wBAAwB,CAAC,QAAgB;IACvD,OAAO,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AACnC,CAAC;AAED,iEAAiE;AACjE,SAAgB,yBAAyB;IACvC,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;AACrC,CAAC"}

package/src/lib/stencil-kit/builders.ts

@@ -0,0 +1,58 @@
+/**
+ * Stencil BUILDERS — how a dropped master becomes node(s).
+ *
+ * Most masters are a silhouette plus a label, and `NodeFactory` builds those
+ * perfectly well. A few are not shapes at all: an ER entity or a UML class is a
+ * CARD with rows you select, rename and add to. The diagram kits already build
+ * exactly those cards, with inline editing, row-selection events and an undoable
+ * update funnel — and the palette had no way to reach them, so dropping "Entity"
+ * produced a rectangle.
+ *
+ * Rather than special-case ids inside the palette (which would hardcode ER/UML
+ * knowledge into a module that should not have it, and would lock a host's own
+ * stencils out of the same capability), a master resolves to a REGISTERED
+ * builder. The default builder is the template path; the ER and UML kits
+ * register card builders; anyone can register their own.
+ *
+ *     registerStencilBuilder('erd-entity', myBuilder);
+ */
+import type { NodeTemplate } from '@grafloria/engine';
+
+/** What a builder is handed. */
+export interface StencilBuildContext {
+  /** The live diagram instance (engine + model + container). */
+  api: any;
+  /** The master being placed. */
+  master: NodeTemplate;
+  /** World position for the node's TOP-LEFT (the palette centres before calling). */
+  at: { x: number; y: number };
+}
+
+/**
+ * Build the node(s) for a master. Return the created root node — the palette
+ * takes it from there (undo entry, membership, onPlace). Return `null` to fall
+ * through to the default template path.
+ */
+export type StencilBuilder = (ctx: StencilBuildContext) => any | null;
+
+const builders = new Map<string, StencilBuilder>();
+
+/** Register the builder for a master id. Last registration wins. */
+export function registerStencilBuilder(masterId: string, builder: StencilBuilder): void {
+  builders.set(masterId, builder);
+}
+
+/** The builder for a master id, or undefined for the default template path. */
+export function getStencilBuilder(masterId: string): StencilBuilder | undefined {
+  return builders.get(masterId);
+}
+
+/** Drop a registration (tests, or a host replacing a built-in). */
+export function unregisterStencilBuilder(masterId: string): boolean {
+  return builders.delete(masterId);
+}
+
+/** Every master id that currently resolves to a card builder. */
+export function registeredStencilBuilders(): string[] {
+  return [...builders.keys()].sort();
+}

package/src/lib/stencil-kit/card-builders.js.map

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

package/src/lib/stencil-kit/card-builders.ts

@@ -0,0 +1,113 @@
+/**
+ * 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.
+ *
+ * Everything here is reuse. `entityCardContent` / `classCardContent` and their
+ * auto-height helpers are the same functions `erDiagram()` / `umlDiagram()`
+ * use, so a dropped card is byte-for-byte the card those kits produce — which
+ * means the row-selection layer (`axk:row-select`), the inline editors and the
+ * `erTable(api, id)` / `umlClass(api, id)` handles all work on it for free.
+ *
+ * The kit's own bindings are idempotent per container, so binding them again
+ * after a drop is safe and is what makes the FIRST dropped card interactive on
+ * a canvas that was never built by a kit.
+ */
+import { NodeModel } from '@grafloria/engine';
+import {
+  entityCardContent,
+  entityAutoHeight,
+  classCardContent,
+  classAutoHeight,
+  bindRowInteractions,
+  bindCardEditing,
+  ensureDiagramKitStyles,
+} from '../diagram-kit';
+import { registerStencilBuilder, type StencilBuildContext } 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 };
+
+let seq = 0;
+const nextId = (prefix: string) => `${prefix}-${++seq}`;
+
+/** Turn the kit's card spec into a live node, and make the canvas interactive. */
+function mountCard(
+  ctx: StencilBuildContext,
+  opts: { id: string; width: number; height: number; content: unknown; metaKey: string; spec: unknown }
+): any {
+  ensureDiagramKitStyles();
+  const node = new NodeModel({
+    id: opts.id,
+    type: 'kit-card',
+    position: { x: ctx.at.x, y: ctx.at.y },
+    size: { width: opts.width, height: opts.height },
+  });
+  // The SAME metadata shape erDiagram()/umlDiagram() stamp — that is what the
+  // row and editing layers key off.
+  node.setMetadata('html', { content: opts.content, interactive: true });
+  node.setMetadata(opts.metaKey, opts.spec);
+  node.setMetadata('kitEditable', true);
+  node.setMetadata('shape', CARD_SHAPE);
+  node.setStyle?.(CARD_STYLE);
+
+  ctx.api.getModel().addNode(node);
+
+  // Bind the kit runtime for this container. Both are idempotent, so a canvas
+  // that already ran a kit's finalize() is unaffected, and one that never did
+  // becomes editable on the first drop.
+  const container = ctx.api.container ?? ctx.api.getContainer?.();
+  if (container) {
+    const kitApi = { ...ctx.api, container };
+    try { bindRowInteractions(kitApi as never); } catch { /* optional */ }
+    try { bindCardEditing(kitApi as never); } catch { /* optional */ }
+  }
+  return node;
+}
+
+/** Register the built-in card builders (ER entity/table, UML classifiers). */
+export function registerCardBuilders(): void {
+  for (const masterId of ['erd-entity', 'erd-table', 'erd-associative-entity', 'erd-bridge-entity']) {
+    registerStencilBuilder(masterId, (ctx) => {
+      const id = nextId('entity');
+      const spec = {
+        id,
+        name: (ctx.master as any).meta?.name ?? 'Entity',
+        columns: [
+          { name: 'id', type: 'uuid', pk: true },
+          { name: 'name', type: 'varchar' },
+        ],
+      };
+      return mountCard(ctx, {
+        id,
+        width: 220,
+        height: entityAutoHeight(spec as never, true),
+        content: entityCardContent(spec as never, true),
+        metaKey: 'kitEntity',
+        spec,
+      });
+    });
+  }
+
+  for (const masterId of ['uml-class', 'uml-abstract-class', 'uml-interface']) {
+    registerStencilBuilder(masterId, (ctx) => {
+      const id = nextId('class');
+      const spec = {
+        id,
+        name: (ctx.master as any).meta?.name ?? 'Class',
+        abstract: masterId === 'uml-abstract-class',
+        stereotype: masterId === 'uml-interface' ? 'interface' : undefined,
+        attributes: ['- field: Type'],
+        methods: ['+ method(): void'],
+      };
+      return mountCard(ctx, {
+        id,
+        width: 220,
+        height: classAutoHeight(spec as never, true),
+        content: classCardContent(spec as never, true),
+        metaKey: 'kitClass',
+        spec,
+      });
+    });
+  }
+}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../libs/element/src/lib/stencil-kit/index.ts"],"names":[],"mappings":";;;AAAA,qCAA+C;AAAtC,6GAAA,kBAAkB,OAAA;AAM3B,2CAAkD;AAAzC,gHAAA,kBAAkB,OAAA;AAE3B,mCAAkD;AAAzC,gHAAA,sBAAsB,OAAA;AAC/B,uCAEoB;AADlB,kHAAA,sBAAsB,OAAA;AAAE,6GAAA,iBAAiB,OAAA;AAAE,oHAAA,wBAAwB,OAAA;AAAE,qHAAA,yBAAyB,OAAA;AAGhG,mDAAuD;AACvD,6EAA6E;AAC7E,iCAAiC;AACjC,IAAA,oCAAoB,GAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAAA,qCAA+C;AAAtC,6GAAA,kBAAkB,OAAA;AAM3B,2CAAkD;AAAzC,gHAAA,kBAAkB,OAAA;AAE3B,mCAAkD;AAAzC,gHAAA,sBAAsB,OAAA;AAC/B,uCAEoB;AADlB,kHAAA,sBAAsB,OAAA;AAAE,6GAAA,iBAAiB,OAAA;AAAE,oHAAA,wBAAwB,OAAA;AAAE,qHAAA,yBAAyB,OAAA;AAGhG,mDAAuD;AACvD,6EAA6E;AAC7E,iCAAiC;AACjC,IAAA,oCAAoB,GAAE,CAAC"}

package/src/lib/stencil-kit/index.ts

@@ -0,0 +1,17 @@
+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();