@grafloria/element 0.3.17 → 0.3.19

package/src/lib/diagram-kit/join-guidance.ts

@@ -0,0 +1,390 @@
+/**
+ * Join guidance — live "which column should I join to?" scoring + tinting for
+ * kit table cards, the feature a visual query builder is actually about.
+ *
+ * Ported verbatim from a production BI tool's Query Studio (the scoring is ~55
+ * pure lines there too). While a connection drag is in progress, every column
+ * on every OTHER table is scored against the drag's source column and its card
+ * row is tinted by tier:
+ *
+ *   score 3 — PK↔FK naming convention: `orders.customer_id` ↔ `customers.id`
+ *             (`<singular(table)>_id` on one end, `id` on the other), or exact
+ *             FK column-name equality across tables;
+ *   score 2 — a PK flag on one end and an FK flag on the other;
+ *   score 1 — same column name, or both names end in "id";
+ *   score 0 — same table, or nothing.
+ *
+ * Tiers: the single best candidate scoring >= 2 is `top` (gold, "★ BEST"),
+ * every other >= 2 is `good` (green), 1 is `ok` (blue), 0 is `none` (dimmed).
+ * The SOURCE table is never tinted, and every tint clears when the drag ends —
+ * complete, cancelled or escaped.
+ *
+ * Split the same way the rest of the kit is:
+ *   - `scoreMatch` / `matchTier` / `assignTiers` / `singularize` are PURE
+ *     (unit-specced in the element suite);
+ *   - `bindJoinGuidance(api)` is the runtime: it listens to the engine's own
+ *     connection lifecycle events (`connection:start` / `:complete` /
+ *     `:cancel`) and paints tier classes onto the kit's `.axk-row` elements.
+ *
+ * Row tints go on as DOM classes — the renderer's foreignObject subtrees are
+ * patch-opaque, so classes survive the per-frame VNode patch. Port tints go in
+ * as a generated per-drag <style> element keyed by `data-port-id`: port glyphs
+ * ARE re-patched every frame, so a class added to the SVG element would be
+ * wiped mid-drag, while a stylesheet wins the cascade and survives.
+ */
+
+export interface JoinColumn {
+  name: string;
+  pk?: boolean;
+  fk?: boolean;
+}
+
+/** One end of a candidate join: a table (node) and one of its columns. */
+export interface JoinEnd {
+  table: string;
+  column: JoinColumn;
+}
+
+export type MatchTier = 'top' | 'good' | 'ok' | 'none';
+
+/** Naive English singular — enough for schema names (orders, categories, statuses). */
+export function singularize(word: string): string {
+  const w = word.toLowerCase();
+  if (w.endsWith('ies') && w.length > 3) return w.slice(0, -3) + 'y';
+  if (/(?:ses|xes|zes|ches|shes)$/.test(w)) return w.slice(0, -2);
+  if (w.endsWith('s') && !w.endsWith('ss')) return w.slice(0, -1);
+  return w;
+}
+
+/** The PK↔FK naming convention: `a` is `<singular(b.table)>_id` and `b` is `id`. */
+function conventionMatch(a: JoinEnd, b: JoinEnd): boolean {
+  return (
+    a.column.name.toLowerCase() === `${singularize(b.table)}_id` &&
+    b.column.name.toLowerCase() === 'id'
+  );
+}
+
+/**
+ * Score a candidate join between two columns. Pure; the exact production
+ * logic. Higher is better; 0 means "no reason to join these".
+ */
+export function scoreMatch(a: JoinEnd, b: JoinEnd): 0 | 1 | 2 | 3 {
+  if (!a || !b || a.table === b.table) return 0;
+  const an = a.column.name.toLowerCase();
+  const bn = b.column.name.toLowerCase();
+
+  // 3 — the naming convention (either direction), or exact FK-name equality.
+  if (conventionMatch(a, b) || conventionMatch(b, a)) return 3;
+  if (an === bn && an.endsWith('_id') && (a.column.fk === true || b.column.fk === true)) return 3;
+
+  // 2 — PK flag on one end, FK flag on the other.
+  if ((a.column.pk === true && b.column.fk === true) || (a.column.fk === true && b.column.pk === true)) return 2;
+
+  // 1 — same name, or both look like identifiers.
+  if (an === bn) return 1;
+  if (an.endsWith('id') && bn.endsWith('id')) return 1;
+
+  return 0;
+}
+
+/** Per-score tier (rank-free half; `assignTiers` promotes the single best to `top`). */
+export function matchTier(score: number): Exclude<MatchTier, 'top'> {
+  if (score >= 2) return 'good';
+  if (score >= 1) return 'ok';
+  return 'none';
+}
+
+/**
+ * Tier every candidate score at once: the FIRST candidate holding the maximum
+ * score is `top` when that maximum is >= 2 — exactly one gold row per drag.
+ */
+export function assignTiers(scores: number[]): MatchTier[] {
+  const max = scores.reduce((m, s) => (s > m ? s : m), 0);
+  let topIndex = -1;
+  if (max >= 2) topIndex = scores.indexOf(max);
+  return scores.map((s, i) => (i === topIndex ? 'top' : matchTier(s)));
+}
+
+// ---------------------------------------------------------------------------
+// Runtime binding
+// ---------------------------------------------------------------------------
+
+const TIER_CLASS: Record<MatchTier, string> = {
+  top: 'axk-match-top',
+  good: 'axk-match-good',
+  ok: 'axk-match-ok',
+  none: 'axk-match-none',
+};
+const CHIP_CLASS = 'axk-match-chip';
+const PORT_STYLE_ID = 'grafloria-join-guidance-ports';
+
+export const JOIN_GUIDANCE_STYLE_ID = 'grafloria-join-guidance-styles';
+
+/** The tier tints — the production palette, verbatim. */
+const GUIDANCE_CSS = `
+.axk-row.axk-match-top { background: #fffbeb;
+  box-shadow: inset 4px 0 0 #f59e0b, inset 0 0 0 1px #fcd34d; }
+.axk-row.axk-match-top .axk-col { font-weight: 800; color: #92600a; }
+.axk-row.axk-match-good { background: #dcfce7; box-shadow: inset 4px 0 0 #16a34a; }
+.axk-row.axk-match-good .axk-col { font-weight: 700; color: #14532d; }
+.axk-row.axk-match-ok { background: #dbeafe; box-shadow: inset 4px 0 0 #2563eb; }
+.axk-row.axk-match-none { opacity: .4; }
+.${CHIP_CLASS} { font-size: 9px; font-weight: 800; text-transform: uppercase;
+  background: #f59e0b; color: #4a2e05; border-radius: 4px; padding: 1px 4px;
+  margin-left: 4px; flex: 0 0 auto; letter-spacing: .3px; }
+`;
+
+/** Inject the guidance tint stylesheet once. Safe to call repeatedly / in SSR. */
+export function ensureJoinGuidanceStyles(
+  doc: Document | undefined = typeof document !== 'undefined' ? document : undefined
+): void {
+  if (!doc) return;
+  if (doc.getElementById(JOIN_GUIDANCE_STYLE_ID)) return;
+  const style = doc.createElement('style');
+  style.id = JOIN_GUIDANCE_STYLE_ID;
+  style.textContent = GUIDANCE_CSS;
+  doc.head.appendChild(style);
+}
+
+interface NodeLike {
+  id: string;
+  getMetadata?(key: string): unknown;
+  getPorts?(): Array<{ id: string }>;
+  getPort?(id: string): unknown;
+}
+
+/** The slice of DiagramInstance the binding needs (matches HandleApi's shape). */
+export interface JoinGuidanceApi {
+  container: HTMLElement;
+  getModel(): {
+    getNode(id: string): NodeLike | undefined;
+    getNodes?(): NodeLike[];
+  };
+  getEngine?():
+    | { eventBus?: { on(event: string, handler: (data: unknown) => void): () => void } }
+    | undefined;
+}
+
+export interface JoinGuidanceOptions {
+  /**
+   * Resolve a PORT id to its table column. The default understands both the
+   * ER kit's convention (`TABLE__col__side__n`) and the query-builder dot
+   * convention (`table.col-in` / `table.col-out`), checked against the node's
+   * actual `kitEntity` columns so an ambiguous name never mis-resolves.
+   */
+  resolvePort?: (portId: string, nodeId: string | undefined) => { nodeId: string; column: string } | null;
+  /** Text of the gold chip on the best row. Default `'★ BEST'`. */
+  chipText?: string;
+  /**
+   * Extra per-tier CSS for the target columns' PORT glyphs, injected per drag.
+   * Default paints the production glows (gold/green/blue drop-shadows).
+   */
+  portCss?: (tier: MatchTier, selector: string) => string;
+}
+
+export interface JoinGuidanceHandle {
+  /** nodeId → rowIndex → tier for the drag in progress (empty when idle). */
+  activeTiers(): Map<string, Map<number, MatchTier>>;
+  dispose(): void;
+}
+
+const esc = (value: string): string =>
+  typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(value) : value.replace(/"/g, '\\"');
+
+/** The production port glows: gold 4px, green 3px, blue 2px; `none` recedes. */
+function defaultPortCss(tier: MatchTier, selector: string): string {
+  switch (tier) {
+    case 'top':
+      return `${selector} { fill: #f59e0b !important; stroke: #f59e0b !important; filter: drop-shadow(0 0 4px rgba(245,158,11,.4)) drop-shadow(0 0 2px rgba(245,158,11,.4)); }`;
+    case 'good':
+      return `${selector} { fill: #16a34a !important; stroke: #16a34a !important; filter: drop-shadow(0 0 3px rgba(22,163,74,.35)); }`;
+    case 'ok':
+      return `${selector} { fill: #2563eb !important; stroke: #2563eb !important; filter: drop-shadow(0 0 2px rgba(37,99,235,.3)); }`;
+    default:
+      return '';
+  }
+}
+
+interface KitEntityMeta {
+  columns?: JoinColumn[];
+  name?: string;
+}
+
+/**
+ * Bind live join guidance to a diagram instance. Listens to the engine's
+ * connection lifecycle; while a drag is live, every kit-card row on every
+ * other table wears its tier class (and the best one its "★ BEST" chip), and
+ * the matching port glyphs glow via a generated stylesheet. Everything clears
+ * when the drag ends, however it ends.
+ */
+export function bindJoinGuidance(api: JoinGuidanceApi, options: JoinGuidanceOptions = {}): JoinGuidanceHandle {
+  ensureJoinGuidanceStyles(api.container.ownerDocument);
+
+  const chipText = options.chipText ?? '★ BEST';
+  const portCss = options.portCss ?? defaultPortCss;
+
+  const kitOf = (node: NodeLike | undefined): KitEntityMeta | null => {
+    const raw = node?.getMetadata?.('kitEntity');
+    return raw && typeof raw === 'object' ? (raw as KitEntityMeta) : null;
+  };
+
+  const defaultResolve = (portId: string, nodeId: string | undefined): { nodeId: string; column: string } | null => {
+    const model = api.getModel();
+    const nodes = nodeId
+      ? [model.getNode(nodeId)].filter((n): n is NodeLike => !!n)
+      : (model.getNodes?.() ?? []).filter((n) => !!n.getPort?.(portId));
+    for (const node of nodes) {
+      const kit = kitOf(node);
+      if (!kit?.columns) continue;
+      for (const column of kit.columns) {
+        if (
+          portId === `${node.id}.${column.name}-in` ||
+          portId === `${node.id}.${column.name}-out` ||
+          portId.startsWith(`${node.id}__${column.name}__`)
+        ) {
+          return { nodeId: node.id, column: column.name };
+        }
+      }
+    }
+    return null;
+  };
+  const resolvePort = options.resolvePort ?? defaultResolve;
+
+  const active = new Map<string, Map<number, MatchTier>>();
+  let portStyle: HTMLStyleElement | null = null;
+
+  const rowsOf = (nodeId: string): HTMLElement[] => {
+    const group = api.container.querySelector(`[data-node-id="${esc(nodeId)}"]`);
+    return group ? (Array.from(group.querySelectorAll('.axk-row')) as HTMLElement[]) : [];
+  };
+
+  const clear = (): void => {
+    for (const cls of Object.values(TIER_CLASS)) {
+      for (const el of Array.from(api.container.querySelectorAll(`.${cls}`))) el.classList.remove(cls);
+    }
+    for (const chip of Array.from(api.container.querySelectorAll(`.${CHIP_CLASS}`))) chip.remove();
+    portStyle?.remove();
+    portStyle = null;
+    active.clear();
+  };
+
+  const portsForColumn = (node: NodeLike, column: string): string[] => {
+    const ports = node.getPorts?.() ?? [];
+    return ports
+      .map((p) => p.id)
+      .filter(
+        (id) =>
+          id === `${node.id}.${column}-in` ||
+          id === `${node.id}.${column}-out` ||
+          id.startsWith(`${node.id}__${column}__`)
+      );
+  };
+
+  const onStart = (data: unknown): void => {
+    clear();
+    const payload = data as { sourcePort?: { id: string; nodeId?: string } } | undefined;
+    const sourcePort = payload?.sourcePort;
+    if (!sourcePort) return;
+    const source = resolvePort(sourcePort.id, sourcePort.nodeId);
+    if (!source) return;
+
+    const model = api.getModel();
+    const sourceNode = model.getNode(source.nodeId);
+    const sourceKit = kitOf(sourceNode);
+    const sourceColumn = sourceKit?.columns?.find((c) => c.name === source.column);
+    if (!sourceColumn) return;
+    const sourceEnd: JoinEnd = { table: source.nodeId, column: sourceColumn };
+
+    // Every column of every OTHER kit table is a candidate, in node order.
+    const candidates: Array<{ node: NodeLike; rowIndex: number; column: JoinColumn }> = [];
+    for (const node of model.getNodes?.() ?? []) {
+      if (node.id === source.nodeId) continue; // the source table is NEVER tinted
+      const kit = kitOf(node);
+      if (!kit?.columns) continue;
+      kit.columns.forEach((column, rowIndex) => candidates.push({ node, rowIndex, column }));
+    }
+    if (candidates.length === 0) return;
+
+    // The VALIDATOR outranks the score. A column can be the best textual
+    // match and still be un-connectable (its table pair already joined, or a
+    // custom validator refuses it) — the engine records those as
+    // invalidTargetPorts at drag start, and the renderer paints them red on
+    // hover. Tinting the same port gold would be the guidance lying about a
+    // target the drop will refuse (caught by the demo gate: the seeded
+    // customers⋈orders pair made customers.id both '★ BEST' and invalid).
+    const invalid = ((): Set<string> => {
+      try {
+        const engine = api.getEngine?.() as
+          | { getConnectionStateManager?: () => { getState?: () => { invalidTargetPorts?: Map<string, string> } } }
+          | undefined;
+        const map = engine?.getConnectionStateManager?.()?.getState?.()?.invalidTargetPorts;
+        return new Set(map ? [...map.keys()] : []);
+      } catch {
+        return new Set();
+      }
+    })();
+    const scores = candidates.map((c) => {
+      const targetIn = `${c.node.id}.${c.column.name}-in`;
+      if (invalid.has(targetIn)) return 0;
+      const port = (c.node.getPort?.(targetIn) ?? null) as { id?: string } | null;
+      if (port?.id && invalid.has(port.id)) return 0;
+      return scoreMatch(sourceEnd, { table: c.node.id, column: c.column });
+    });
+    const tiers = assignTiers(scores);
+
+    const cssRules: string[] = [];
+    candidates.forEach((candidate, i) => {
+      const tier = tiers[i]!;
+      const byRow = active.get(candidate.node.id) ?? new Map<number, MatchTier>();
+      byRow.set(candidate.rowIndex, tier);
+      active.set(candidate.node.id, byRow);
+
+      const row = rowsOf(candidate.node.id)[candidate.rowIndex];
+      if (row) {
+        row.classList.add(TIER_CLASS[tier]);
+        if (tier === 'top') {
+          const chip = api.container.ownerDocument.createElement('span');
+          chip.className = CHIP_CLASS;
+          chip.textContent = chipText;
+          row.appendChild(chip);
+        }
+      }
+      if (tier !== 'none') {
+        for (const portId of portsForColumn(candidate.node, candidate.column.name)) {
+          const rule = portCss(tier, `[data-port-id="${esc(portId)}"]`);
+          if (rule) cssRules.push(rule);
+        }
+      }
+    });
+
+    if (cssRules.length > 0) {
+      portStyle = api.container.ownerDocument.createElement('style');
+      portStyle.id = PORT_STYLE_ID;
+      portStyle.textContent = cssRules.join('\n');
+      api.container.ownerDocument.head.appendChild(portStyle);
+    }
+  };
+
+  const bus = api.getEngine?.()?.eventBus;
+  const offs: Array<() => void> = [];
+  if (bus) {
+    offs.push(bus.on('connection:start', onStart));
+    offs.push(bus.on('connection:complete', clear));
+    offs.push(bus.on('connection:cancel', clear));
+    // The event-type constant spells it 'cancelled'; the state manager emits
+    // 'cancel'. Subscribe to both so a future spelling fix cannot leave tints on.
+    offs.push(bus.on('connection:cancelled', clear));
+  }
+
+  return {
+    activeTiers: () => {
+      const copy = new Map<string, Map<number, MatchTier>>();
+      for (const [nodeId, byRow] of active) copy.set(nodeId, new Map(byRow));
+      return copy;
+    },
+    dispose: () => {
+      for (const off of offs) off();
+      clear();
+    },
+  };
+}

package/src/lib/diagram-kit/rows.js.map

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

package/src/lib/diagram-kit/rows.ts

@@ -0,0 +1,174 @@
+/**
+ * Row interactions — "select a column / field" on kit cards (P1 of the
+ * ER/UML editing track).
+ *
+ * Kit cards are `interactive: true` (their rows are real DOM targets — the
+ * binder's node click/drag resolution is geometric, so dragging and selecting
+ * the TABLE keeps working; proven live before this was built). This module is
+ * the runtime the kit's `finalize(api)` binds once per diagram:
+ *
+ *  - click a row → it becomes THE selected row (one per diagram), painted with
+ *    `.axk-row-selected`; click again or click anywhere else → deselected;
+ *  - every row click dispatches `axk:row-click` on the container, and every
+ *    selection CHANGE dispatches `axk:row-select` — both bubbling
+ *    CustomEvents, matching the element package's "DOM events out" contract;
+ *  - the selected row survives card re-renders: the renderer keys the
+ *    foreignObject by content hash, so an html edit swaps the subtree and
+ *    drops the class — a MutationObserver re-applies it by (nodeId, rowIndex);
+ *  - selection is EPHEMERAL view state, exactly like node selection: never
+ *    serialized, never in the op log, not undoable.
+ *
+ * Row identity: `rowIndex` is the position among the card's rows (ER columns,
+ * or UML members across both compartments); `name` resolves from the spec the
+ * kit stored in node metadata (`kitEntity` / `kitClass`), falling back to the
+ * row's text.
+ */
+
+export interface RowRef {
+  nodeId: string;
+  rowIndex: number;
+  /** Column name (ER) or member text (UML). */
+  name?: string;
+  kind: 'er' | 'uml';
+  /** UML only: which compartment the member sits in. */
+  section?: 'attributes' | 'methods';
+}
+
+export interface RowInteractionsHandle {
+  getSelected(): RowRef | null;
+  /** Programmatic selection (null clears). Fires axk:row-select like a click. */
+  select(ref: { nodeId: string; rowIndex: number } | null): void;
+  dispose(): void;
+}
+
+interface KitApi {
+  container: HTMLElement;
+  getModel(): {
+    getNode(id: string): { getMetadata?(key: string): unknown } | undefined;
+  };
+}
+
+const ROW_SELECTOR = '.axk-row, .axk-member';
+const SELECTED_CLASS = 'axk-row-selected';
+
+/** One binding per container — rebinding disposes the previous one. */
+const bindings = new WeakMap<HTMLElement, RowInteractionsHandle>();
+
+function rowsOfNode(container: HTMLElement, nodeId: string): HTMLElement[] {
+  const esc = (window.CSS && CSS.escape) ? CSS.escape(nodeId) : nodeId.replace(/"/g, '\\"');
+  const group = container.querySelector(`[data-node-id="${esc}"]`);
+  return group ? (Array.from(group.querySelectorAll(ROW_SELECTOR)) as HTMLElement[]) : [];
+}
+
+function resolveRef(container: HTMLElement, api: KitApi, rowEl: HTMLElement): RowRef | null {
+  const group = rowEl.closest('[data-node-id]');
+  if (!group) return null;
+  const nodeId = group.getAttribute('data-node-id')!;
+  const rows = Array.from(group.querySelectorAll(ROW_SELECTOR)) as HTMLElement[];
+  const rowIndex = rows.indexOf(rowEl);
+  if (rowIndex === -1) return null;
+  const kind: RowRef['kind'] = rowEl.classList.contains('axk-member') ? 'uml' : 'er';
+
+  const node = api.getModel?.().getNode?.(nodeId);
+  const meta = (key: string) => node?.getMetadata?.(key) as Record<string, unknown> | undefined;
+
+  if (kind === 'er') {
+    const entity = meta('kitEntity') as { columns?: Array<{ name?: string }> } | undefined;
+    const name = entity?.columns?.[rowIndex]?.name ?? rowEl.querySelector('.axk-col')?.textContent ?? undefined;
+    return { nodeId, rowIndex, name: name ?? undefined, kind };
+  }
+
+  const cls = meta('kitClass') as { attributes?: string[]; methods?: string[] } | undefined;
+  const attrCount = cls?.attributes?.length ?? countFirstCompartment(rowEl);
+  const section: RowRef['section'] = rowIndex < attrCount ? 'attributes' : 'methods';
+  const name =
+    (section === 'attributes' ? cls?.attributes?.[rowIndex] : cls?.methods?.[rowIndex - attrCount]) ??
+    rowEl.textContent?.trim() ??
+    undefined;
+  return { nodeId, rowIndex, name, kind, section };
+}
+
+/** Without spec metadata, the first compartment's member count splits sections. */
+function countFirstCompartment(rowEl: HTMLElement): number {
+  const card = rowEl.closest('.axk-uml');
+  const firstComp = card?.querySelector('.axk-uml-comp');
+  return firstComp ? firstComp.querySelectorAll('.axk-member').length : Number.MAX_SAFE_INTEGER;
+}
+
+export function bindRowInteractions(api: KitApi): RowInteractionsHandle {
+  const container = api.container;
+  bindings.get(container)?.dispose();
+
+  let selected: RowRef | null = null;
+
+  const paint = () => {
+    for (const el of Array.from(container.querySelectorAll(`.${SELECTED_CLASS}`))) {
+      el.classList.remove(SELECTED_CLASS);
+    }
+    if (selected) rowsOfNode(container, selected.nodeId)[selected.rowIndex]?.classList.add(SELECTED_CLASS);
+  };
+
+  const emitSelect = () => {
+    container.dispatchEvent(new CustomEvent('axk:row-select', { bubbles: true, detail: { selected } }));
+  };
+
+  const setSelected = (next: RowRef | null) => {
+    const same =
+      (next === null && selected === null) ||
+      (next !== null && selected !== null && next.nodeId === selected.nodeId && next.rowIndex === selected.rowIndex);
+    if (same) return;
+    selected = next;
+    paint();
+    emitSelect();
+  };
+
+  const onClick = (event: MouseEvent) => {
+    const target = event.target instanceof Element ? event.target : null;
+    const rowEl = target?.closest?.(ROW_SELECTOR) as HTMLElement | null;
+    if (!rowEl || !container.contains(rowEl)) {
+      setSelected(null);
+      return;
+    }
+    const ref = resolveRef(container, api, rowEl);
+    if (!ref) return;
+    container.dispatchEvent(new CustomEvent('axk:row-click', { bubbles: true, detail: { ...ref } }));
+    const isReclick = selected && selected.nodeId === ref.nodeId && selected.rowIndex === ref.rowIndex;
+    setSelected(isReclick ? null : ref);
+  };
+
+  // Card re-renders replace the foreignObject subtree (content-hash keyed) and
+  // lose the class — re-apply whenever the selected row's paint went missing.
+  const observer = new MutationObserver(() => {
+    if (!selected) return;
+    const el = rowsOfNode(container, selected.nodeId)[selected.rowIndex];
+    if (el && !el.classList.contains(SELECTED_CLASS)) paint();
+    else if (!el) {
+      // The row (or its node) is gone — the selection dies with it.
+      setSelected(null);
+    }
+  });
+
+  container.addEventListener('click', onClick);
+  observer.observe(container, { childList: true, subtree: true });
+
+  const handle: RowInteractionsHandle = {
+    getSelected: () => (selected ? { ...selected } : null),
+    select: (ref) => {
+      if (ref === null) {
+        setSelected(null);
+        return;
+      }
+      const el = rowsOfNode(container, ref.nodeId)[ref.rowIndex];
+      if (!el) return;
+      const resolved = resolveRef(container, api, el);
+      if (resolved) setSelected(resolved);
+    },
+    dispose: () => {
+      container.removeEventListener('click', onClick);
+      observer.disconnect();
+      if (bindings.get(container) === handle) bindings.delete(container);
+    },
+  };
+  bindings.set(container, handle);
+  return handle;
+}

package/src/lib/diagram-kit/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../libs/element/src/lib/diagram-kit/styles.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;;AAgGH,wDAOC;AArGY,QAAA,oBAAoB,GAAG,8BAA8B,CAAC;AAEnE,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFX,CAAC;AAEF,0EAA0E;AAC1E,SAAgB,sBAAsB,CAAC,MAA4B,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;IACvH,IAAI,CAAC,GAAG;QAAE,OAAO;IACjB,IAAI,GAAG,CAAC,cAAc,CAAC,4BAAoB,CAAC;QAAE,OAAO;IACrD,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,GAAG,4BAAoB,CAAC;IAChC,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC;IACxB,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["styles.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;;;AAgGH,wDAOC;AArGY,QAAA,oBAAoB,GAAG,8BAA8B,CAAC;AAEnE,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFX,CAAC;AAEF,0EAA0E;AAC1E,SAAgB,sBAAsB,CAAC,MAA4B,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;IACvH,IAAI,CAAC,GAAG;QAAE,OAAO;IACjB,IAAI,GAAG,CAAC,cAAc,CAAC,4BAAoB,CAAC;QAAE,OAAO;IACrD,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,GAAG,4BAAoB,CAAC;IAChC,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC;IACxB,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,CAAC"}