@erd-studio/renderer 0.1.3 → 0.3.0

package/dist/editor.js

@@ -18,7 +18,6 @@ import {
   KeyBadge,
   KeyBadgeGroup,
   Legend,
-  ModelNode,
   NOOP_CANVAS_HOST,
   SCD_BADGE,
   SCD_TITLE,
@@ -27,17 +26,18 @@ import {
   SOURCE_ORDER,
   SOURCE_PHRASE,
   STAGE_HEX,
+  TableNode,
   applyNodeOverlays,
   canvasEdgeTypes,
   canvasNodeTypes,
   columnPairs,
-  computeModelLabels,
+  computeTableLabels,
   diagramExportFileName,
   edgeHoverText,
   exportDiagram,
   foldComposites,
   getDataTypeColor,
-  matchesModelSearch,
+  matchesTableSearch,
   nodeRect,
   pickHandleSides,
   relationshipDisplayKey,
@@ -47,7 +47,7 @@ import {
   swapCardinality,
   toDbml,
   toMermaid,
-  transformDomain,
+  transformSubjectArea,
   useCanvasGraph,
   useCanvasHost,
   useColumnReorder,
@@ -55,7 +55,7 @@ import {
   useIsViewer,
   useLongPressDrag,
   useSend
-} from "./chunk-H2ACJRPZ.js";
+} from "./chunk-HWA32XG5.js";
 import "./chunk-QZGU5NZH.js";
 import "./chunk-6XQXDZ4R.js";
 import {
@@ -97,7 +97,6 @@ export {
   KeyBadge,
   KeyBadgeGroup,
   Legend,
-  ModelNode,
   NODE_THRESHOLD,
   NODE_WIDTH,
   NOOP_CANVAS_HOST,
@@ -108,11 +107,12 @@ export {
   SOURCE_ORDER,
   SOURCE_PHRASE,
   STAGE_HEX,
+  TableNode,
   applyNodeOverlays,
   canvasEdgeTypes,
   canvasNodeTypes,
   columnPairs,
-  computeModelLabels,
+  computeTableLabels,
   countVisibleColumnRows,
   createCanvasSlice,
   createCanvasStore,
@@ -123,7 +123,7 @@ export {
   exportDiagram,
   foldComposites,
   getDataTypeColor,
-  matchesModelSearch,
+  matchesTableSearch,
   nodeRect,
   pickHandleSides,
   relationshipDisplayKey,
@@ -134,7 +134,7 @@ export {
   swapCardinality,
   toDbml,
   toMermaid,
-  transformDomain,
+  transformSubjectArea,
   useCanvasGraph,
   useCanvasHost,
   useColumnExpansion,

package/dist/index.js

@@ -9,8 +9,8 @@ import {
   repickHandleSides,
   toDbml,
   toMermaid,
-  transformDomain
-} from "./chunk-H2ACJRPZ.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

@@ -693,6 +693,20 @@
   color: var(--warning-fg);
   text-align: center;
 }
+.model-node__load-warning {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px;
+  background: var(--warning-bg);
+  color: var(--warning-fg);
+  border-bottom: 1px solid var(--warning-fg);
+}
+.model-node__load-warning-text {
+  flex: 1;
+  font-size: 11px;
+  line-height: 1.4;
+}
 .model-node__load-error-text {
   font-size: 11px;
   line-height: 1.4;
@@ -904,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 {
@@ -2816,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. */