@erd-studio/renderer 0.1.4 → 0.3.0

package/dist/index.js

@@ -9,8 +9,8 @@ import {
   repickHandleSides,
   toDbml,
   toMermaid,
-  transformDomain
-} from "./chunk-IAFK7ZZV.js";
+  transformSubjectArea
+} from "./chunk-HWA32XG5.js";
 import "./chunk-DUQ2TTQH.js";
 import "./chunk-WOTSQZCQ.js";
 export {
@@ -24,5 +24,5 @@ export {
   repickHandleSides,
   toDbml,
   toMermaid,
-  transformDomain
+  transformSubjectArea
 };

package/dist/styles.css

@@ -918,6 +918,45 @@
   background: var(--button-bg);
   color: var(--button-fg);
 }
+.fk-edge__backwards {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  pointer-events: all;
+}
+.fk-edge__backwards--dimmed {
+  opacity: 0.25;
+}
+.fk-edge__backwards-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--warning-bg);
+  color: var(--warning-fg);
+  font-size: 12px;
+  line-height: 1;
+  cursor: help;
+}
+.fk-edge__backwards-btn {
+  padding: 2px 6px;
+  border: 1px solid var(--warning-fg);
+  border-radius: 4px;
+  background: var(--panel-bg);
+  color: var(--editor-fg);
+  font-size: 11px;
+  line-height: 1.3;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.fk-edge__backwards-btn:hover {
+  border-color: var(--focus-border);
+  background: var(--button-bg);
+  color: var(--button-fg);
+}
 
 /* src/components/Graph/AnnotationNode.css */
 .annotation-node {
@@ -2830,6 +2869,23 @@ body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node__link-badge {
   padding: 3px 8px;
   font-size: 10px;
 }
+.detail-panel__rel-backwards {
+  flex-shrink: 0;
+  padding: 1px 6px;
+  border: 1px solid var(--warning-fg);
+  border-radius: 3px;
+  background: var(--warning-bg);
+  color: var(--warning-fg);
+  font-size: 11px;
+  line-height: 1.4;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.detail-panel__rel-backwards:hover {
+  border-color: var(--focus-border);
+  background: var(--button-bg);
+  color: var(--button-fg);
+}
 
 /* src/components/Legend/Legend.css */
 .legend-toggle {

package/dist/types/ErdCanvas.d.ts

@@ -1,7 +1,7 @@
 /**
  * ErdCanvas — the diagram as a self-contained, read-only React component.
  *
- * Renders a `DisplayDomain` the way the VS Code extension's canvas shows a
+ * Renders a `DisplaySubjectArea` the way the VS Code extension's canvas shows a
  * read-only domain: model nodes, FK edges, annotations, the minimap, the
  * detail panel a click on a model opens, and the legend. There are no editing
  * affordances (the canvas runs in viewer mode) and nothing is ever sent
@@ -22,10 +22,10 @@
  * keeping its React Flow configuration.
  */
 import { type CSSProperties } from 'react';
-import type { DisplayDomain } from '@erd-studio/core';
+import type { DisplaySubjectArea } from '@erd-studio/core';
 export interface ErdCanvasProps {
     /** The domain to render. It is shown read-only whatever its `readOnly` flag says. */
-    domain: DisplayDomain;
+    domain: DisplaySubjectArea;
     /** Let readers drag model and annotation nodes. Moves are never saved. Default false. */
     nodesDraggable?: boolean;
     /**
@@ -50,5 +50,5 @@ export interface ErdCanvasHandle {
  * model's columns, each column's data type). Objects with nothing missing are
  * reused as they are.
  */
-export declare function toRenderableDomain(domain: DisplayDomain): DisplayDomain;
+export declare function toRenderableSubjectArea(domain: DisplaySubjectArea): DisplaySubjectArea;
 export declare const ErdCanvas: import("react").ForwardRefExoticComponent<ErdCanvasProps & import("react").RefAttributes<ErdCanvasHandle>>;

package/dist/types/canvas/useCanvasGraph.d.ts

@@ -14,7 +14,7 @@
  */
 import type { OnSelectionChangeFunc } from '@xyflow/react';
 import type { DiscrepancyReport } from '@erd-studio/core';
-import type { ModelFlowNode, FkFlowEdge, AnnotationFlowNode, AnnotationFlowEdge } from '../types/graph.js';
+import type { TableFlowNode, FkFlowEdge, AnnotationFlowNode, AnnotationFlowEdge } from '../types/graph.js';
 export interface UseCanvasGraphOptions {
     /** Whether the cross-stage discrepancy overlay is shown. */
     discrepancyVisible?: boolean;
@@ -24,12 +24,12 @@ export interface UseCanvasGraphOptions {
      * Called with the rebuilt nodes and edges each time the transform effect
      * runs, just before they are written to the store.
      */
-    onTransformed?: (nodes: (ModelFlowNode | AnnotationFlowNode)[], edges: (FkFlowEdge | AnnotationFlowEdge)[]) => void;
+    onTransformed?: (nodes: (TableFlowNode | AnnotationFlowNode)[], edges: (FkFlowEdge | AnnotationFlowEdge)[]) => void;
 }
 export interface UseCanvasGraphResult {
-    nodes: (ModelFlowNode | AnnotationFlowNode)[];
+    nodes: (TableFlowNode | AnnotationFlowNode)[];
     edges: (FkFlowEdge | AnnotationFlowEdge)[];
-    onNodeClick: (event: React.MouseEvent, node: ModelFlowNode | AnnotationFlowNode) => void;
+    onNodeClick: (event: React.MouseEvent, node: TableFlowNode | AnnotationFlowNode) => void;
     onEdgeClick: (event: React.MouseEvent, edge: FkFlowEdge | AnnotationFlowEdge) => void;
     onPaneClick: () => void;
     onSelectionChange: OnSelectionChangeFunc;

package/dist/types/components/DetailPanel/AliasEditor.d.ts

@@ -1,5 +1,5 @@
 /**
- * AliasEditor — the "Table name" row of the detail panel's metadata.
+ * AliasEditor — the "Warehouse name" row of the detail panel's metadata.
  *
  * A model's name is its identity; its alias is the table dbt builds it as.
  * Setting one is how two layers can each have a `date` table: the models are

package/dist/types/components/DetailPanel/ColumnEditor.d.ts

@@ -6,7 +6,7 @@
  * Uses ColumnRowEditor for consistent column row rendering.
  */
 import type { DisplayColumn } from '@erd-studio/core';
-import type { ModelRole } from '@erd-studio/core';
+import type { TableRole } from '@erd-studio/core';
 import './ColumnEditor.css';
 export interface ColumnEditorProps {
     modelName: string;
@@ -14,6 +14,6 @@ export interface ColumnEditorProps {
     /** Whether this model/stage is read-only. */
     readOnly?: boolean;
     /** Parent model's role — passed to column rows for conditional SCD/additive dropdowns. */
-    modelRole?: ModelRole;
+    modelRole?: TableRole;
 }
 export declare function ColumnEditor({ modelName, columns, readOnly, modelRole }: ColumnEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DetailPanel/ModelRationale.d.ts

@@ -1,5 +1,5 @@
 /**
- * ModelRationale — collapsible section for all design rationale fields.
+ * TableRationale — collapsible section for all design rationale fields.
  *
  * Renders a clickable "Design Rationale" heading that toggles the body.
  * Each field has its own add/edit/read lifecycle and sends independent
@@ -14,14 +14,14 @@
  * When no rationale exists and no conditional fields are visible,
  * shows a dashed "Add Rationale" button that opens the section.
  */
-import type { Rationale, ModelRole } from '@erd-studio/core';
+import type { Rationale, TableRole } from '@erd-studio/core';
 /** Whether any rationale field has text. */
 export declare function hasRationaleContent(rationale: Rationale | undefined): boolean;
-interface ModelRationaleProps {
+interface TableRationaleProps {
     modelName: string;
     rationale?: Rationale;
-    modelRole?: ModelRole;
+    modelRole?: TableRole;
     grain?: string;
 }
-export declare function ModelRationale({ modelName, rationale, modelRole, grain }: ModelRationaleProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function TableRationale({ modelName, rationale, modelRole, grain }: TableRationaleProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/types/components/DetailPanel/RoleEditor.d.ts

@@ -1,13 +1,13 @@
 /**
  * RoleEditor — always-visible dropdown for setting a model's role.
  *
- * Displays a native <select> element with all ModelRole options.
+ * Displays a native <select> element with all TableRole options.
  * When "No role" is selected, the modelRole key is removed from JSON.
  */
-import type { ModelRole } from '@erd-studio/core';
+import type { TableRole } from '@erd-studio/core';
 interface RoleEditorProps {
     modelName: string;
-    modelRole?: ModelRole;
+    modelRole?: TableRole;
 }
 export declare function RoleEditor({ modelName, modelRole }: RoleEditorProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/Graph/ColumnTooltip.d.ts

@@ -2,7 +2,7 @@
  * ColumnTooltip — hover tooltip showing column details on the canvas.
  *
  * Renders via a React Portal to document.body so it is never clipped by
- * the ModelNode's `overflow: hidden`. Positioned with `position: fixed`
+ * the TableNode's `overflow: hidden`. Positioned with `position: fixed`
  * using the anchor element's bounding rect. Automatically flips below
  * the row if there isn't enough space above.
  *

package/dist/types/components/Graph/ModelNode.d.ts

@@ -1,5 +1,5 @@
 /**
- * ModelNode — custom React Flow node for displaying a semantic model card.
+ * TableNode — custom React Flow node for displaying a semantic model card.
  *
  * Shows model name with a layer badge, a list of columns with PK/FK
  * indicators and data types, and a footer with the total column count.
@@ -14,8 +14,8 @@
  *   3. Release to open the relationship dialog with prefilled data
  */
 import { type NodeProps } from '@xyflow/react';
-import type { ModelFlowNode } from '../../types/graph.js';
+import type { TableFlowNode } from '../../types/graph.js';
 import './ModelNode.css';
-declare function ModelNodeComponent({ data, selected }: NodeProps<ModelFlowNode>): import("react/jsx-runtime").JSX.Element;
-export declare const ModelNode: import("react").MemoExoticComponent<typeof ModelNodeComponent>;
+declare function TableNodeComponent({ data, selected }: NodeProps<TableFlowNode>): import("react/jsx-runtime").JSX.Element;
+export declare const TableNode: import("react").MemoExoticComponent<typeof TableNodeComponent>;
 export {};

package/dist/types/components/Legend/Legend.d.ts

@@ -4,7 +4,7 @@
  * Shows stage colours, relationship types, cardinality notation, the node
  * header badges (schema abbreviation and physical provenance chips) and the
  * column badges. The badge vocabulary is imported from lib/badgeLabels so the
- * legend cannot fall out of step with what ModelNode actually renders. Positioned in the bottom-left corner, collapsible
+ * legend cannot fall out of step with what TableNode actually renders. Positioned in the bottom-left corner, collapsible
  * to a `?` icon button.
  */
 import './Legend.css';

package/dist/types/components/common/ColumnRowEditor.d.ts

@@ -7,7 +7,7 @@
  * Uses useFocusWithinRow hook for robust focus tracking that eliminates
  * flicker when switching between fields within the same row.
  */
-import type { ModelRole } from '@erd-studio/core';
+import type { TableRole } from '@erd-studio/core';
 import type { UpdateColumnPayloadColumn } from '@erd-studio/core';
 import './ColumnRowEditor.css';
 export interface ColumnRowEditorColumn {
@@ -52,7 +52,7 @@ export interface ColumnRowEditorProps {
     /** Show warning if multiple PKs exist in model. */
     showMultiplePKWarning?: boolean;
     /** Parent model's role — determines whether SCD/additive dropdowns are shown. */
-    modelRole?: ModelRole;
+    modelRole?: TableRole;
     /** Whether the description area is expanded. */
     expanded?: boolean;
     /** Callback when the expand/collapse chevron is clicked. */

package/dist/types/editor.d.ts

@@ -5,7 +5,7 @@ export { NOOP_CANVAS_HOST, CanvasEnvironmentProvider, useCanvasHost, useSend, us
 export { useCanvasGraph } from './canvas/useCanvasGraph.js';
 export { CanvasBackdrop, ANNOTATION_MINIMAP_COLORS } from './canvas/CanvasBackdrop.js';
 export { canvasNodeTypes, canvasEdgeTypes } from './canvas/flowTypes.js';
-export { ModelNode } from './components/Graph/ModelNode.js';
+export { TableNode } from './components/Graph/ModelNode.js';
 export { FkEdge } from './components/Graph/FkEdge.js';
 export { AnnotationNode } from './components/Graph/AnnotationNode.js';
 export { AnnotationEdge } from './components/Graph/AnnotationEdge.js';
@@ -25,5 +25,5 @@ export * from './lib/dataTypeColors.js';
 export * from './lib/badgeLabels.js';
 export { swapCardinality } from './lib/cardinalityUtils.js';
 export { columnPairs, foldComposites, relationshipDisplayKey, relationshipEdgeId } from './lib/relationshipDisplayKey.js';
-export { computeModelLabels, matchesModelSearch, type LabelledModel } from './lib/modelLabels.js';
+export { computeTableLabels, matchesTableSearch, type LabelledTable } from './lib/modelLabels.js';
 export { ANNOTATION_COLORS } from './lib/annotationColors.js';

package/dist/types/hooks/useColumnReorder.d.ts

@@ -4,7 +4,7 @@
  * Uses imperative mouse events (matching the existing useLongPressDrag pattern).
  * Returns drag state, handle props for each row, and the optimistic display order.
  *
- * Works in both DetailPanel (ColumnRowEditor rows) and ModelNode (ColumnRow rows)
+ * Works in both DetailPanel (ColumnRowEditor rows) and TableNode (ColumnRow rows)
  * by accepting configurable CSS selectors for the container and row elements.
  */
 interface Column {

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 export { ErdCanvas, type ErdCanvasProps, type ErdCanvasHandle } from './ErdCanvas.js';
-export { transformDomain, pickHandleSides, type TransformResult, type TransformOptions, type NodeRect, type NodeDimensions, } from './lib/graphTransformer.js';
+export { transformSubjectArea, pickHandleSides, type TransformResult, type TransformOptions, type NodeRect, type NodeDimensions, } from './lib/graphTransformer.js';
 export { repickHandleSides, nodeRect } from './lib/dragHandleSides.js';
-export type { DisplayDomain, DisplayModel, DisplayColumn, DisplayRelationship, PhysicalColumnSource, PhysicalProvenance, Annotation, AnnotationColor, Cardinality, Layer, ModelRole, NodePosition, Rationale, Stage, ViewConfig, LayerConfig, } from '@erd-studio/core';
+export type { DisplaySubjectArea, DisplayTable, DisplayColumn, DisplayRelationship, PhysicalColumnSource, PhysicalProvenance, Annotation, AnnotationColor, Cardinality, Layer, TableRole, NodePosition, Rationale, Stage, ViewConfig, LayerConfig, } from '@erd-studio/core';
 export { toMermaid, toDbml, exportDiagram, diagramExportFileName, DIAGRAM_EXPORT_FORMATS, DIAGRAM_EXPORT_FILE_EXTENSIONS, type DiagramExportFormat, } from '@erd-studio/core';
-export type { ModelFlowNode, ModelNodeData, FkFlowEdge, FkEdgeData, AnnotationFlowNode, AnnotationFlowEdge, ColumnDisplay, } from './types/graph.js';
+export type { TableFlowNode, TableNodeData, FkFlowEdge, FkEdgeData, AnnotationFlowNode, AnnotationFlowEdge, ColumnDisplay, } from './types/graph.js';

package/dist/types/lib/badgeLabels.d.ts

@@ -2,7 +2,7 @@
  * badgeLabels — the abbreviations and symbols the canvas stamps on nodes and
  * columns, and the prose that decodes them.
  *
- * These live here rather than in ModelNode because the Legend explains exactly
+ * These live here rather than in TableNode because the Legend explains exactly
  * this vocabulary. Two copies of "WH means the warehouse catalog" is two things
  * to keep in step, and the legend is precisely the copy nobody edits when the
  * node changes. Both ends import these maps, so a new source or a renamed chip

package/dist/types/lib/dragHandleSides.d.ts

@@ -1,14 +1,14 @@
 /**
  * Handle sides for edges after nodes are moved on the canvas.
  *
- * `transformDomain` chooses the handle side at each end of an edge from the
+ * `transformSubjectArea` chooses the handle side at each end of an edge from the
  * saved positions: `pickHandleSides` compares the two node rectangles, and a
  * self-referencing relationship always uses the top (source) and right
  * (target) handles. A canvas that lets nodes be dragged without rebuilding the
  * domain has to make that choice again for the edges on the dragged nodes, or
  * those edges stay attached to the side that faced the old position.
  *
- * The rectangles follow `transformDomain` too: a node's size is its measured
+ * The rectangles follow `transformSubjectArea` too: a node's size is its measured
  * size when React Flow has one, otherwise the model-node estimate from
  * `resolveNodeDimensions`, or an annotation's own (or default) size.
  */

package/dist/types/lib/graphTransformer.d.ts

@@ -1,18 +1,18 @@
 /**
- * Graph transformer — converts a DisplayDomain into React Flow nodes and edges.
+ * Graph transformer — converts a DisplaySubjectArea into React Flow nodes and edges.
  *
  * This is a pure function with no side effects, making it easy to unit test.
  * It handles:
- *   1. Mapping each DisplayModel → ModelFlowNode (with position + columns)
+ *   1. Mapping each DisplayTable → TableFlowNode (with position + columns)
  *   2. Mapping each DisplayRelationship → FkFlowEdge (with handle side selection)
  *   3. Selecting optimal handle sides based on relative node positions
  *   4. Injecting discrepancy data and ghost nodes/edges when a comparison report is active
  */
-import type { DisplayDomain } from '@erd-studio/core';
+import type { DisplaySubjectArea } from '@erd-studio/core';
 import type { DiscrepancyReport } from '@erd-studio/core';
-import type { ModelFlowNode, FkFlowEdge, AnnotationFlowNode, AnnotationFlowEdge } from '../types/graph.js';
+import type { TableFlowNode, FkFlowEdge, AnnotationFlowNode, AnnotationFlowEdge } from '../types/graph.js';
 export interface TransformResult {
-    nodes: (ModelFlowNode | AnnotationFlowNode)[];
+    nodes: (TableFlowNode | AnnotationFlowNode)[];
     edges: (FkFlowEdge | AnnotationFlowEdge)[];
 }
 /** Width/height of a rendered node, in canvas pixels. */
@@ -55,11 +55,11 @@ export declare function pickHandleSides(source: NodeRect, target: NodeRect): {
     targetSide: Side;
 };
 /**
- * Convert a DisplayDomain into React Flow nodes and edges.
+ * Convert a DisplaySubjectArea into React Flow nodes and edges.
  *
  * @param domain — the display domain from extension host
  * @param options — optional discrepancy report and ghost positions
  * @returns nodes and edges ready for React Flow's `<ReactFlow>` component
  */
-export declare function transformDomain(domain: DisplayDomain, options?: TransformOptions): TransformResult;
+export declare function transformSubjectArea(domain: DisplaySubjectArea, options?: TransformOptions): TransformResult;
 export {};

package/dist/types/lib/modelLabels.d.ts

@@ -8,7 +8,7 @@
  * same are told apart by schema (`silver.date`, `gold.date`).
  */
 /** The fields a label is computed from. */
-export interface LabelledModel {
+export interface LabelledTable {
     name: string;
     schema?: string;
     alias?: string;
@@ -18,9 +18,9 @@ export interface LabelledModel {
  * name. A model absent from the map is labelled with its name, exactly as
  * before aliases existed.
  */
-export declare function computeModelLabels(models: readonly LabelledModel[]): Map<string, string>;
+export declare function computeTableLabels(models: readonly LabelledTable[]): Map<string, string>;
 /** Whether a search query (already lower-cased) matches a model by name or label. */
-export declare function matchesModelSearch(data: {
+export declare function matchesTableSearch(data: {
     modelName: string;
     label?: string;
 }, query: string): boolean;

package/dist/types/lib/nodeOverlays.d.ts

@@ -1,6 +1,6 @@
 /**
  * Node/edge overlays — ephemeral per-node presentation state layered on top
- * of the graph produced by `transformDomain`:
+ * of the graph produced by `transformSubjectArea`:
  *
  *   - `dimmed`: search-miss or not-connected-to-selection dimming (F402)
  *   - `isExpanded` / `onToggleExpansion`: column expansion (F405)
@@ -8,15 +8,15 @@
  * `applyNodeOverlays` is a pure function that preserves object identity for
  * every node/edge whose overlay values did not change, so React Flow's
  * `adoptUserNodes` short-circuits on unchanged nodes and memoised
- * `ModelNode` / `FkEdge` components skip re-rendering. When nothing changed
+ * `TableNode` / `FkEdge` components skip re-rendering. When nothing changed
  * at all, the *same arrays* are returned so callers can skip `setNodes`.
  *
  * This lets selection / search / expansion changes avoid re-running the full
  * domain transform (which would also drop `measured` and force React Flow to
  * re-measure every node).
  */
-import type { ModelFlowNode, FkFlowEdge, AnnotationFlowNode, AnnotationFlowEdge } from '../types/graph.js';
-export type GraphNode = ModelFlowNode | AnnotationFlowNode;
+import type { TableFlowNode, FkFlowEdge, AnnotationFlowNode, AnnotationFlowEdge } from '../types/graph.js';
+export type GraphNode = TableFlowNode | AnnotationFlowNode;
 export type GraphEdge = FkFlowEdge | AnnotationFlowEdge;
 export interface OverlayState {
     /** Currently selected model (drives connected-node dimming). */

package/dist/types/lib/nodeSizing.d.ts

@@ -1,5 +1,5 @@
 /**
- * Model node size estimation (matches ModelNode CSS).
+ * Model node size estimation (matches TableNode CSS).
  *
  * The width and height a model node will render at, estimated from its
  * content, for code that needs node sizes before React Flow has measured the
@@ -9,7 +9,7 @@
  * Kept free of elkjs and React Flow runtime imports so it can be loaded on its
  * own.
  */
-import type { ModelFlowNode, ModelNodeData } from '../types/graph.js';
+import type { TableFlowNode, TableNodeData } from '../types/graph.js';
 /** Default width — used as fallback by edgeDistribution.ts. */
 export declare const NODE_WIDTH = 280;
 /**
@@ -18,7 +18,7 @@ export declare const NODE_WIDTH = 280;
  */
 export declare function estimateNodeHeight(rowCount: number, hasGrain: boolean): number;
 /**
- * Number of rows ModelNode actually renders in its columns section.
+ * Number of rows TableNode actually renders in its columns section.
  *
  * Mirrors the rendering rules in `ModelNode.tsx`:
  *   - stub models show only PK/NK columns
@@ -29,12 +29,12 @@ export declare function estimateNodeHeight(rowCount: number, hasGrain: boolean):
  * Using the full column count (the old behaviour) over-reserved
  * `(columns - 5) * rowHeight` per node on auto-collapsed domains (≥30 models).
  */
-export declare function countVisibleColumnRows(data: Pick<ModelNodeData, 'columns' | 'isStub' | 'isExpanded'>): number;
+export declare function countVisibleColumnRows(data: Pick<TableNodeData, 'columns' | 'isStub' | 'isExpanded'>): number;
 /**
  * Best-known size for a model node: React Flow's measured DOM size when
  * available, otherwise an estimate from the rows that will be rendered.
  */
-export declare function resolveNodeDimensions(node: Pick<ModelFlowNode, 'data' | 'measured'>): {
+export declare function resolveNodeDimensions(node: Pick<TableFlowNode, 'data' | 'measured'>): {
     width: number;
     height: number;
 };
@@ -47,4 +47,4 @@ export declare function resolveNodeDimensions(node: Pick<ModelFlowNode, 'data' |
  * slightly more space than the minimum estimate, preventing overlap
  * when font rendering or badge widths differ from the approximation.
  */
-export declare function estimateNodeWidth(data: Pick<ModelNodeData, 'modelName' | 'label' | 'columns' | 'provenance'>): number;
+export declare function estimateNodeWidth(data: Pick<TableNodeData, 'modelName' | 'label' | 'columns' | 'provenance'>): number;

package/dist/types/store/editorStore.d.ts

@@ -14,8 +14,8 @@
  */
 import { type ReactNode } from 'react';
 import { type StoreApi } from 'zustand';
-import type { DisplayDomain, ExistingModelPreview } from '@erd-studio/core';
-import type { ModelFlowNode, FkFlowEdge, FkEdgeData, AnnotationFlowNode, AnnotationFlowEdge } from '../types/graph.js';
+import type { DisplaySubjectArea, ExistingTablePreview } from '@erd-studio/core';
+import type { TableFlowNode, FkFlowEdge, FkEdgeData, AnnotationFlowNode, AnnotationFlowEdge } from '../types/graph.js';
 /** Context menu state for edge right-click. */
 export interface EdgeContextMenu {
     type: 'edge';
@@ -70,15 +70,15 @@ export interface CanvasState {
     /** Whether a delete confirmation is pending (triggered by Delete key). */
     pendingDeleteConfirmation: boolean;
     /** The loaded domain data from the extension host (already reconciled with manifest). */
-    domain: DisplayDomain | null;
+    domain: DisplaySubjectArea | null;
     /** React Flow nodes (local state for selection/drag). */
-    nodes: (ModelFlowNode | AnnotationFlowNode)[];
+    nodes: (TableFlowNode | AnnotationFlowNode)[];
     /** React Flow edges. */
     edges: (FkFlowEdge | AnnotationFlowEdge)[];
     /** Annotation currently being edited (auto-focus textarea), or null. */
     editingAnnotationId: string | null;
     /** Models available to add from logical-models/ and manifest. */
-    existingModels: ExistingModelPreview[];
+    existingModels: ExistingTablePreview[];
     /** Context menu state (position and target), or null if closed. */
     contextMenu: ContextMenuState;
     /** Whether the legend panel is visible. */
@@ -110,12 +110,12 @@ export interface CanvasActions {
     setDetailPanelOpen: (open: boolean) => void;
     /** Set pending delete confirmation state (triggered by Delete key). */
     setPendingDeleteConfirmation: (pending: boolean) => void;
-    setDomain: (domain: DisplayDomain) => void;
-    setNodes: (nodes: (ModelFlowNode | AnnotationFlowNode)[]) => void;
+    setDomain: (domain: DisplaySubjectArea) => void;
+    setNodes: (nodes: (TableFlowNode | AnnotationFlowNode)[]) => void;
     setEdges: (edges: (FkFlowEdge | AnnotationFlowEdge)[]) => void;
     /** Set the annotation currently being edited (auto-focus). */
     setEditingAnnotationId: (id: string | null) => void;
-    setExistingModels: (models: ExistingModelPreview[]) => void;
+    setExistingModels: (models: ExistingTablePreview[]) => void;
     /** Open context menu for an edge at the given position. */
     openEdgeContextMenu: (x: number, y: number, data: FkEdgeData) => void;
     /** Open context menu for a node at the given position. */

package/dist/types/types/graph.d.ts

@@ -2,15 +2,15 @@
  * Types for React Flow graph nodes and edges.
  *
  * These types define the data payloads for custom React Flow node and edge
- * components. The graph transformer converts DisplayDomain data into
+ * components. The graph transformer converts DisplaySubjectArea data into
  * these shapes.
  */
 import type { Node, Edge } from '@xyflow/react';
-import type { AnnotationColor, Cardinality, ColumnPair, DbtKeyHint, Layer, Meta, ModelLoadError, ModelLoadWarning, ModelRole, Stage } from '@erd-studio/core';
+import type { AnnotationColor, Cardinality, ColumnPair, DbtKeyHint, Layer, Meta, TableLoadError, TableLoadWarning, TableRole, Stage } from '@erd-studio/core';
 import type { LayerConfig } from '@erd-studio/core';
-import type { ModelDiscrepancy } from '@erd-studio/core';
+import type { TableDiscrepancy } from '@erd-studio/core';
 import type { PhysicalProvenance } from '@erd-studio/core';
-/** Column data enriched with PK/FK/NK indicators for display in ModelNode. */
+/** Column data enriched with PK/FK/NK indicators for display in TableNode. */
 export interface ColumnDisplay {
     name: string;
     dataType: string;
@@ -30,14 +30,14 @@ export interface ColumnDisplay {
     /** What dbt's tests say about the column (editable logical canvas only) — one line of its hover text. */
     dbtKey?: DbtKeyHint;
 }
-/** Data payload for a ModelNode React Flow node. */
-export type ModelNodeData = {
+/** Data payload for a TableNode React Flow node. */
+export type TableNodeData = {
     /** Model name (unique within a domain). */
     modelName: string;
     /**
      * Header label when it differs from `modelName`: the model's table name
      * (`alias`), qualified by schema when another model on the canvas would read
-     * the same. See `computeModelLabels`.
+     * the same. See `computeTableLabels`.
      */
     label?: string;
     /** The active design stage. */
@@ -65,7 +65,7 @@ export type ModelNodeData = {
     /** Grain statement — "One row per ___". Shown as subtitle on node. */
     grain?: string;
     /** Model's role in the data warehouse architecture. Shown as badge on node. */
-    modelRole?: ModelRole;
+    modelRole?: TableRole;
     /** Structured metadata (`meta:`) — shown in the name's hover tip. Absent when empty. */
     meta?: Meta;
     /** Whether this stage is read-only (physical). */
@@ -93,16 +93,16 @@ export type ModelNodeData = {
      * The model's file exists but could not be read (logical stage only): the
      * node shows the error and an "Open file" button instead of "No columns".
      */
-    loadError?: ModelLoadError;
+    loadError?: TableLoadError;
     /**
      * The model's file was read but needs fixing (logical stage only): a key
      * written twice, whose last value is shown (#164). Absent from an older core.
      */
-    loadWarning?: ModelLoadWarning;
+    loadWarning?: TableLoadWarning;
     /** Whether this model is in stub display mode (PK/NK columns only). */
     isStub: boolean;
     /** Per-model discrepancy data when a cross-stage comparison report is active. */
-    discrepancy?: ModelDiscrepancy;
+    discrepancy?: TableDiscrepancy;
     /** The stage currently being viewed (set when discrepancy overlay is active). */
     discrepancySourceStage?: Stage;
     /** The stage being compared against (set when discrepancy overlay is active). */
@@ -111,14 +111,14 @@ export type ModelNodeData = {
      * Index signature required by React Flow's Node generic.
      *
      * It also means an unknown or misspelled key type-checks, and a field written
-     * here but never destructured in ModelNode ships as dead payload — which is
+     * here but never destructured in TableNode ships as dead payload — which is
      * exactly how `hasRationale` and `modelRole` gained matching dead CSS. Add a
      * field here only together with the code that reads it.
      */
     [key: string]: unknown;
 };
 /** Typed React Flow node for a semantic model. */
-export type ModelFlowNode = Node<ModelNodeData, 'model'>;
+export type TableFlowNode = Node<TableNodeData, 'model'>;
 /** Data payload for an FkEdge React Flow edge. */
 export type FkEdgeData = {
     fromModel: string;
@@ -135,6 +135,11 @@ export type FkEdgeData = {
     pairs?: ColumnPair[];
     /** The composite's `compositeKey` name, alongside `pairs`. */
     compositeKey?: string;
+    /**
+     * The keys contradict its direction (`DisplayRelationship.keysContradict`,
+     * #163): drawn with a ⚠ and Turn round, except for viewers.
+     */
+    keysContradict?: true;
     /** Stage of the owning domain canvas — drives CSS colour class. */
     stage?: Stage;
     /** Discrepancy status for ghost/extra/mismatch edges. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erd-studio/renderer",
-  "version": "0.1.4",
+  "version": "0.3.0",
   "description": "ERD Studio's React Flow canvas: the entity-relationship diagram renderer shared by the VS Code extension, with a read-only viewer mode.",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -36,6 +36,7 @@
   },
   "files": [
     "dist",
+    "CHANGELOG.md",
     "LICENSE",
     "README.md"
   ],
@@ -46,7 +47,7 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@erd-studio/core": "0.1.4",
+    "@erd-studio/core": "0.3.0",
     "zustand": "^5.0.0"
   },
   "peerDependencies": {