@grafloria/element 0.3.19 → 0.3.20

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

@@ -1,241 +0,0 @@
-/**
- * Join guidance — the pure scoring (ported from the production Query Studio)
- * and the DOM binding that paints tier classes onto kit rows during a
- * connection drag.
- */
-import {
-  singularize,
-  scoreMatch,
-  matchTier,
-  assignTiers,
-  bindJoinGuidance,
-  ensureJoinGuidanceStyles,
-  JOIN_GUIDANCE_STYLE_ID,
-  type JoinEnd,
-} from './join-guidance';
-
-const end = (table: string, name: string, flags: { pk?: boolean; fk?: boolean } = {}): JoinEnd => ({
-  table,
-  column: { name, ...flags },
-});
-
-afterEach(() => {
-  document.getElementById(JOIN_GUIDANCE_STYLE_ID)?.remove();
-  document.getElementById('grafloria-join-guidance-ports')?.remove();
-  document.body.innerHTML = '';
-});
-
-describe('singularize', () => {
-  it('handles the schema-name shapes', () => {
-    expect(singularize('orders')).toBe('order');
-    expect(singularize('customers')).toBe('customer');
-    expect(singularize('order_items')).toBe('order_item');
-    expect(singularize('categories')).toBe('category');
-    expect(singularize('statuses')).toBe('status');
-    expect(singularize('address')).toBe('address'); // -ss is not a plural
-  });
-});
-
-describe('scoreMatch', () => {
-  it('scores 3 for the PK↔FK naming convention, in both directions', () => {
-    expect(scoreMatch(end('orders', 'customer_id', { fk: true }), end('customers', 'id', { pk: true }))).toBe(3);
-    expect(scoreMatch(end('customers', 'id', { pk: true }), end('orders', 'customer_id', { fk: true }))).toBe(3);
-    // the convention is NAME-driven — it holds even without the flags
-    expect(scoreMatch(end('orders', 'customer_id'), end('customers', 'id'))).toBe(3);
-  });
-
-  it('scores 3 for exact FK name equality across tables', () => {
-    expect(
-      scoreMatch(end('orders', 'customer_id', { fk: true }), end('addresses', 'customer_id', { fk: true }))
-    ).toBe(3);
-  });
-
-  it('scores 2 for a PK flag on one end and an FK flag on the other', () => {
-    expect(scoreMatch(end('orders', 'id', { pk: true }), end('order_items', 'product_id', { fk: true }))).toBe(2);
-    expect(scoreMatch(end('order_items', 'order_id', { fk: true }), end('orders', 'id', { pk: true }))).toBe(3); // convention outranks
-    expect(scoreMatch(end('order_items', 'product_id', { fk: true }), end('customers', 'id', { pk: true }))).toBe(2);
-  });
-
-  it('scores 1 for a same-name or both-end-in-id pair', () => {
-    expect(scoreMatch(end('customers', 'name'), end('products', 'name'))).toBe(1);
-    expect(scoreMatch(end('orders', 'customer_id'), end('order_items', 'product_id'))).toBe(1);
-  });
-
-  it('scores 0 for the same table and for unrelated columns', () => {
-    expect(scoreMatch(end('orders', 'id', { pk: true }), end('orders', 'customer_id', { fk: true }))).toBe(0);
-    expect(scoreMatch(end('orders', 'customer_id'), end('products', 'sku'))).toBe(0);
-  });
-});
-
-describe('matchTier / assignTiers', () => {
-  it('maps scores to tiers', () => {
-    expect(matchTier(3)).toBe('good');
-    expect(matchTier(2)).toBe('good');
-    expect(matchTier(1)).toBe('ok');
-    expect(matchTier(0)).toBe('none');
-  });
-
-  it('promotes exactly ONE best candidate (score >= 2) to top', () => {
-    expect(assignTiers([3, 2, 1, 0])).toEqual(['top', 'good', 'ok', 'none']);
-    expect(assignTiers([2, 2])).toEqual(['top', 'good']); // first max wins
-    expect(assignTiers([1, 1, 0])).toEqual(['ok', 'ok', 'none']); // no top below 2
-    expect(assignTiers([])).toEqual([]);
-  });
-});
-
-// ---------------------------------------------------------------------------
-// bindJoinGuidance — DOM + event lifecycle against a stub instance
-// ---------------------------------------------------------------------------
-
-type Handler = (data: unknown) => void;
-
-function stubApi() {
-  const container = document.createElement('div');
-  document.body.appendChild(container);
-
-  const mkCard = (nodeId: string, columns: Array<{ name: string; pk?: boolean; fk?: boolean }>) => {
-    const group = document.createElement('div');
-    group.setAttribute('data-node-id', nodeId);
-    for (const c of columns) {
-      const row = document.createElement('div');
-      row.className = 'axk-row';
-      const col = document.createElement('span');
-      col.className = 'axk-col';
-      col.textContent = c.name;
-      row.appendChild(col);
-      group.appendChild(row);
-    }
-    container.appendChild(group);
-    return {
-      id: nodeId,
-      getMetadata: (key: string) => (key === 'kitEntity' ? { id: nodeId, columns } : undefined),
-      getPorts: () => columns.flatMap((c) => [{ id: `${nodeId}.${c.name}-in` }, { id: `${nodeId}.${c.name}-out` }]),
-      getPort: (id: string) =>
-        columns.some((c) => id === `${nodeId}.${c.name}-in` || id === `${nodeId}.${c.name}-out`)
-          ? { id }
-          : undefined,
-    };
-  };
-
-  const customers = mkCard('customers', [
-    { name: 'id', pk: true },
-    { name: 'name' },
-    { name: 'email' },
-  ]);
-  const orders = mkCard('orders', [
-    { name: 'id', pk: true },
-    { name: 'customer_id', fk: true },
-    { name: 'total' },
-  ]);
-
-  const handlers = new Map<string, Handler[]>();
-  const bus = {
-    on: (event: string, handler: Handler) => {
-      const list = handlers.get(event) ?? [];
-      list.push(handler);
-      handlers.set(event, list);
-      return () => handlers.set(event, (handlers.get(event) ?? []).filter((h) => h !== handler));
-    },
-    emit: (event: string, data?: unknown) => {
-      for (const h of handlers.get(event) ?? []) h(data);
-    },
-  };
-
-  const nodes = [customers, orders];
-  const invalid = new Map<string, string>();
-  const api = {
-    container,
-    getModel: () => ({
-      getNode: (id: string) => nodes.find((n) => n.id === id),
-      getNodes: () => nodes,
-    }),
-    getEngine: () => ({
-      eventBus: bus,
-      getConnectionStateManager: () => ({ getState: () => ({ invalidTargetPorts: invalid }) }),
-    }),
-  };
-  return { api, bus, container, invalid };
-}
-
-describe('bindJoinGuidance', () => {
-  it('injects the tint stylesheet once', () => {
-    ensureJoinGuidanceStyles();
-    ensureJoinGuidanceStyles();
-    expect(document.querySelectorAll(`#${JOIN_GUIDANCE_STYLE_ID}`)).toHaveLength(1);
-  });
-
-  it('tints the other tables by tier on connection:start — and never the source', () => {
-    const { api, bus, container } = stubApi();
-    const handle = bindJoinGuidance(api);
-
-    bus.emit('connection:start', { sourcePort: { id: 'orders.customer_id-out', nodeId: 'orders' } });
-
-    const customerRows = Array.from(
-      container.querySelectorAll('[data-node-id="customers"] .axk-row')
-    ) as HTMLElement[];
-    expect(customerRows[0]!.classList.contains('axk-match-top')).toBe(true); // customers.id — convention
-    expect(customerRows[0]!.querySelector('.axk-match-chip')?.textContent).toBe('★ BEST');
-    expect(customerRows[1]!.classList.contains('axk-match-none')).toBe(true); // name
-    expect(customerRows[2]!.classList.contains('axk-match-none')).toBe(true); // email
-
-    // the source table's own rows carry NO tint at all
-    const orderRows = Array.from(container.querySelectorAll('[data-node-id="orders"] .axk-row'));
-    for (const row of orderRows) {
-      expect(row.className).toBe('axk-row');
-    }
-
-    // port glow stylesheet targets the top column's ports
-    const portStyle = document.getElementById('grafloria-join-guidance-ports');
-    expect(portStyle?.textContent).toContain('customers.id-in');
-    expect(portStyle?.textContent).toContain('#f59e0b');
-
-    expect(handle.activeTiers().get('customers')?.get(0)).toBe('top');
-    handle.dispose();
-  });
-
-  it('a validator-invalid target NEVER tints, whatever its score', () => {
-    const { api, bus, container, invalid } = stubApi();
-    // the engine recorded customers.id-in as un-connectable for this drag
-    // (e.g. the pair is already joined) — the '★ BEST' textual match must
-    // rank 'none', not gold, or the guidance glorifies a refused drop.
-    invalid.set('customers.id-in', 'pair already joined');
-    const handle = bindJoinGuidance(api);
-
-    bus.emit('connection:start', { sourcePort: { id: 'orders.customer_id-out', nodeId: 'orders' } });
-
-    const customerRows = Array.from(
-      container.querySelectorAll('[data-node-id="customers"] .axk-row')
-    ) as HTMLElement[];
-    expect(customerRows[0]!.classList.contains('axk-match-none')).toBe(true);
-    expect(customerRows[0]!.querySelector('.axk-match-chip')).toBeNull();
-    const portStyle = document.getElementById('grafloria-join-guidance-ports');
-    expect(portStyle?.textContent ?? '').not.toContain('customers.id-in');
-    handle.dispose();
-  });
-
-  it('clears every tint when the drag ends — complete or cancel', () => {
-    const { api, bus, container } = stubApi();
-    const handle = bindJoinGuidance(api);
-
-    for (const endEvent of ['connection:complete', 'connection:cancel']) {
-      bus.emit('connection:start', { sourcePort: { id: 'orders.customer_id-out', nodeId: 'orders' } });
-      expect(container.querySelectorAll('[class*="axk-match-"]').length).toBeGreaterThan(0);
-      bus.emit(endEvent);
-      expect(container.querySelectorAll('[class*="axk-match-"]')).toHaveLength(0);
-      expect(container.querySelectorAll('.axk-match-chip')).toHaveLength(0);
-      expect(document.getElementById('grafloria-join-guidance-ports')).toBeNull();
-      expect(handle.activeTiers().size).toBe(0);
-    }
-    handle.dispose();
-  });
-
-  it('dispose unsubscribes and clears', () => {
-    const { api, bus, container } = stubApi();
-    const handle = bindJoinGuidance(api);
-    bus.emit('connection:start', { sourcePort: { id: 'orders.customer_id-out', nodeId: 'orders' } });
-    handle.dispose();
-    expect(container.querySelectorAll('[class*="axk-match-"]')).toHaveLength(0);
-    bus.emit('connection:start', { sourcePort: { id: 'orders.customer_id-out', nodeId: 'orders' } });
-    expect(container.querySelectorAll('[class*="axk-match-"]')).toHaveLength(0); // unbound
-  });
-});

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

@@ -1,390 +0,0 @@
-/**
- * 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 +0,0 @@
-{"version":3,"file":"rows.js","sourceRoot":"","sources":["rows.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;;AAyEH,kDA4EC;AA3HD,MAAM,YAAY,GAAG,uBAAuB,CAAC;AAC7C,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAE1C,uEAAuE;AACvE,MAAM,QAAQ,GAAG,IAAI,OAAO,EAAsC,CAAC;AAEnE,SAAS,UAAU,CAAC,SAAsB,EAAE,MAAc;IACxD,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC1F,MAAM,KAAK,GAAG,SAAS,CAAC,aAAa,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;IACjE,OAAO,KAAK,CAAC,CAAC,CAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;AAC1F,CAAC;AAED,SAAS,UAAU,CAAC,SAAsB,EAAE,GAAW,EAAE,KAAkB;;IACzE,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC9C,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IACxB,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC,cAAc,CAAE,CAAC;IACnD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAkB,CAAC;IAC/E,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACrC,IAAI,QAAQ,KAAK,CAAC,CAAC;QAAE,OAAO,IAAI,CAAC;IACjC,MAAM,IAAI,GAAmB,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;IAEnF,MAAM,IAAI,GAAG,MAAA,MAAA,GAAG,CAAC,QAAQ,2DAAK,OAAO,mDAAG,MAAM,CAAC,CAAC;IAChD,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,EAAE,WAAC,OAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,qDAAG,GAAG,CAAwC,CAAA,EAAA,CAAC;IAE9F,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;QAClB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAuD,CAAC;QACvF,MAAM,IAAI,GAAG,MAAA,MAAA,MAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,0CAAG,QAAQ,CAAC,0CAAE,IAAI,mCAAI,MAAA,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,0CAAE,WAAW,mCAAI,SAAS,CAAC;QAC5G,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,SAAS,EAAE,IAAI,EAAE,CAAC;IAC7D,CAAC;IAED,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAA8D,CAAC;IAC1F,MAAM,SAAS,GAAG,MAAA,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,UAAU,0CAAE,MAAM,mCAAI,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC1E,MAAM,OAAO,GAAsB,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;IACnF,MAAM,IAAI,GACR,MAAA,MAAA,CAAC,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,UAAU,0CAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,0CAAG,QAAQ,GAAG,SAAS,CAAC,CAAC,mCAC/F,MAAA,KAAK,CAAC,WAAW,0CAAE,IAAI,EAAE,mCACzB,SAAS,CAAC;IACZ,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACnD,CAAC;AAED,mFAAmF;AACnF,SAAS,qBAAqB,CAAC,KAAkB;IAC/C,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACvC,MAAM,SAAS,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IACvD,OAAO,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC;AAChG,CAAC;AAED,SAAgB,mBAAmB,CAAC,GAAW;;IAC7C,MAAM,SAAS,GAAG,GAAG,CAAC,SAAS,CAAC;IAChC,MAAA,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,0CAAE,OAAO,EAAE,CAAC;IAEnC,IAAI,QAAQ,GAAkB,IAAI,CAAC;IAEnC,MAAM,KAAK,GAAG,GAAG,EAAE;;QACjB,KAAK,MAAM,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,IAAI,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC;YAC9E,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;QACtC,CAAC;QACD,IAAI,QAAQ;YAAE,MAAA,UAAU,CAAC,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,0CAAE,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACzG,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,SAAS,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,gBAAgB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC;IACtG,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,IAAmB,EAAE,EAAE;QAC1C,MAAM,IAAI,GACR,CAAC,IAAI,KAAK,IAAI,IAAI,QAAQ,KAAK,IAAI,CAAC;YACpC,CAAC,IAAI,KAAK,IAAI,IAAI,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACjH,IAAI,IAAI;YAAE,OAAO;QACjB,QAAQ,GAAG,IAAI,CAAC;QAChB,KAAK,EAAE,CAAC;QACR,UAAU,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,CAAC,KAAiB,EAAE,EAAE;;QACpC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,YAAY,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;QACrE,MAAM,KAAK,GAAG,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,uDAAG,YAAY,CAAuB,CAAC;QACpE,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YACzC,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,OAAO;QACT,CAAC;QACD,MAAM,GAAG,GAAG,UAAU,CAAC,SAAS,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;QAC9C,IAAI,CAAC,GAAG;YAAE,OAAO;QACjB,SAAS,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAO,GAAG,CAAE,EAAE,CAAC,CAAC,CAAC;QACjG,MAAM,SAAS,GAAG,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,GAAG,CAAC,MAAM,IAAI,QAAQ,CAAC,QAAQ,KAAK,GAAG,CAAC,QAAQ,CAAC;QACnG,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,6EAA6E;IAC7E,4EAA4E;IAC5E,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;QACzC,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,MAAM,EAAE,GAAG,UAAU,CAAC,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACrE,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC;YAAE,KAAK,EAAE,CAAC;aACrD,IAAI,CAAC,EAAE,EAAE,CAAC;YACb,8DAA8D;YAC9D,WAAW,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC7C,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAEhE,MAAM,MAAM,GAA0B;QACpC,WAAW,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,mBAAM,QAAQ,EAAG,CAAC,CAAC,IAAI,CAAC;QACtD,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE;YACd,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC;gBACjB,WAAW,CAAC,IAAI,CAAC,CAAC;gBAClB,OAAO;YACT,CAAC;YACD,MAAM,EAAE,GAAG,UAAU,CAAC,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAC3D,IAAI,CAAC,EAAE;gBAAE,OAAO;YAChB,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC;YAChD,IAAI,QAAQ;gBAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;QACtC,CAAC;QACD,OAAO,EAAE,GAAG,EAAE;YACZ,SAAS,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAChD,QAAQ,CAAC,UAAU,EAAE,CAAC;YACtB,IAAI,QAAQ,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,MAAM;gBAAE,QAAQ,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QACrE,CAAC;KACF,CAAC;IACF,QAAQ,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAChC,OAAO,MAAM,CAAC;AAChB,CAAC"}