@erd-studio/renderer 0.1.0

package/dist/types/ErdCanvas.d.ts

@@ -0,0 +1,54 @@
+/**
+ * ErdCanvas — the diagram as a self-contained, read-only React component.
+ *
+ * Renders a `DisplayDomain` 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
+ * anywhere.
+ *
+ *   <ErdCanvas domain={domain} />
+ *
+ * Each instance has its own store, so several canvases can share a page. The
+ * canvas fills its parent, which needs an explicit height, and reads the
+ * `--vscode-*` CSS variables listed in the README.
+ *
+ * With `nodesDraggable`, readers can move nodes around. Moves stay local: the
+ * edges attached to a moved node re-pick their sides live,
+ * `onLayoutModifiedChange` reports whether the layout differs from the
+ * domain's, and `resetLayout()` (through a ref) puts everything back.
+ *
+ * Derived from the extension webview's `EditorCanvas` (`webview/App.tsx`),
+ * keeping its React Flow configuration.
+ */
+import { type CSSProperties } from 'react';
+import type { DisplayDomain } from '@erd-studio/core';
+export interface ErdCanvasProps {
+    /** The domain to render. It is shown read-only whatever its `readOnly` flag says. */
+    domain: DisplayDomain;
+    /** Let readers drag model and annotation nodes. Moves are never saved. Default false. */
+    nodesDraggable?: boolean;
+    /**
+     * Called when the layout becomes modified (a node was moved away from its
+     * position in the domain) or unmodified again (`resetLayout()`, a new domain,
+     * or a node moved back).
+     */
+    onLayoutModifiedChange?: (modified: boolean) => void;
+    /** Called once, when the first nodes have been measured and fitted into view. */
+    onReady?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface ErdCanvasHandle {
+    /** Put every node back at its position in the domain, with its original edge sides. */
+    resetLayout(): void;
+}
+/**
+ * The domain as the canvas renders it: `readOnly` forced on, and the fields the
+ * canvas code assumes are present filled in when a hand-built or partial
+ * domain leaves them out (layer, stage, relationships, view config, each
+ * 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 const ErdCanvas: import("react").ForwardRefExoticComponent<ErdCanvasProps & import("react").RefAttributes<ErdCanvasHandle>>;

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

@@ -0,0 +1,7 @@
+/**
+ * The canvas backdrop: the dotted background and the minimap. Render it as a
+ * child of `<ReactFlow>`.
+ */
+/** Minimap fill for annotation nodes, keyed by annotation colour. */
+export declare const ANNOTATION_MINIMAP_COLORS: Record<string, string>;
+export declare function CanvasBackdrop(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+/**
+ * The custom React Flow node and edge types the canvas renders. Module-level
+ * constants, because React Flow expects `nodeTypes` / `edgeTypes` to keep the
+ * same identity between renders.
+ */
+import type { NodeTypes, EdgeTypes } from '@xyflow/react';
+/** Custom node types for React Flow — must be memoised or stable. */
+export declare const canvasNodeTypes: NodeTypes;
+/** Custom edge types for React Flow — must be memoised or stable. */
+export declare const canvasEdgeTypes: EdgeTypes;

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

@@ -0,0 +1,37 @@
+/**
+ * useCanvasGraph — keeps the React Flow nodes and edges in the canvas store in
+ * step with the domain, and provides the canvas's click/selection handlers.
+ *
+ *   - The transform effect rebuilds every node and edge when the domain (or
+ *     the discrepancy overlay) changes, preserving measured sizes, the
+ *     current selection and valid edge selections.
+ *   - The overlay effect updates only the `dimmed` / `isExpanded` flags when
+ *     selection, search or column expansion changes.
+ *   - The handlers open the detail panel on a model click, select annotations,
+ *     highlight an FK edge's columns and clear selection on a pane click.
+ *
+ * Must run inside a `CanvasStoreProvider`.
+ */
+import type { OnSelectionChangeFunc } from '@xyflow/react';
+import type { DiscrepancyReport } from '@erd-studio/core';
+import type { ModelFlowNode, FkFlowEdge, AnnotationFlowNode, AnnotationFlowEdge } from '../types/graph.js';
+export interface UseCanvasGraphOptions {
+    /** Whether the cross-stage discrepancy overlay is shown. */
+    discrepancyVisible?: boolean;
+    /** The discrepancy report to overlay when `discrepancyVisible` is set. */
+    discrepancyReport?: DiscrepancyReport | null;
+    /**
+     * 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;
+}
+export interface UseCanvasGraphResult {
+    nodes: (ModelFlowNode | AnnotationFlowNode)[];
+    edges: (FkFlowEdge | AnnotationFlowEdge)[];
+    onNodeClick: (event: React.MouseEvent, node: ModelFlowNode | AnnotationFlowNode) => void;
+    onEdgeClick: (event: React.MouseEvent, edge: FkFlowEdge | AnnotationFlowEdge) => void;
+    onPaneClick: () => void;
+    onSelectionChange: OnSelectionChangeFunc;
+}
+export declare function useCanvasGraph({ discrepancyVisible, discrepancyReport, onTransformed, }?: UseCanvasGraphOptions): UseCanvasGraphResult;

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

@@ -0,0 +1,15 @@
+/**
+ * BulkColumnActions — toolbar for multi-select column operations.
+ *
+ * Shown when multiple columns are selected in the ColumnEditor.
+ * Supports bulk delete, key type toggling, and data type setting.
+ */
+import type { DisplayColumn } from '@erd-studio/core';
+import './BulkColumnActions.css';
+export interface BulkColumnActionsProps {
+    modelName: string;
+    selectedColumns: string[];
+    columns: DisplayColumn[];
+    onClearSelection: () => void;
+}
+export declare function BulkColumnActions({ modelName, selectedColumns, columns, onClearSelection, }: BulkColumnActionsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+/**
+ * ColumnEditor — editable column list for the DetailPanel.
+ *
+ * Renders columns in file order (user-controlled via drag-to-reorder).
+ * Supports adding new columns and inline editing.
+ * Uses ColumnRowEditor for consistent column row rendering.
+ */
+import type { DisplayColumn } from '@erd-studio/core';
+import type { ModelRole } from '@erd-studio/core';
+import './ColumnEditor.css';
+export interface ColumnEditorProps {
+    modelName: string;
+    columns: DisplayColumn[];
+    /** Whether this model/stage is read-only. */
+    readOnly?: boolean;
+    /** Parent model's role — passed to column rows for conditional SCD/additive dropdowns. */
+    modelRole?: ModelRole;
+}
+export declare function ColumnEditor({ modelName, columns, readOnly, modelRole }: ColumnEditorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+/**
+ * DescriptionEditor — displays and edits the description for a model.
+ *
+ * Three states:
+ * 1. Empty — dashed "Add Description" button when no content exists
+ * 2. Read — shows description text with pencil edit button on hover
+ * 3. Edit — textarea with Save/Cancel buttons
+ *
+ * Follows the same pattern as GrainEditor.tsx.
+ */
+interface DescriptionEditorProps {
+    modelName: string;
+    description?: string;
+}
+export declare function DescriptionEditor({ modelName, description }: DescriptionEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+/**
+ * DetailPanel — floating detail view for the selected model.
+ *
+ * Displays at top-right when a node is clicked. Shows:
+ * - Model metadata (name, schema, description)
+ * - Editable column list
+ * - Incoming and outgoing FK relationships
+ */
+import './DetailPanel.css';
+export declare function DetailPanel(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,16 @@
+/**
+ * GrainEditor — displays and edits the grain statement for a model.
+ *
+ * Three states:
+ * 1. Empty — dashed "Add Grain" button when no content exists
+ * 2. Read — shows grain text with pencil edit button on hover
+ * 3. Edit — textarea with Save/Cancel buttons
+ *
+ * Follows the same pattern as ModelRationale.tsx.
+ */
+interface GrainEditorProps {
+    modelName: string;
+    grain?: string;
+}
+export declare function GrainEditor({ modelName, grain }: GrainEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,27 @@
+/**
+ * ModelRationale — 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
+ * field-patch messages via RationaleField.
+ *
+ * Conditional fields:
+ * - roleChoice: shown when model has a modelRole
+ * - grainChoice: shown when model has a grain
+ * - scdStrategy: shown when model has a modelRole
+ * - measures: shown when model has a grain
+ *
+ * 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';
+/** Whether any rationale field has text. */
+export declare function hasRationaleContent(rationale: Rationale | undefined): boolean;
+interface ModelRationaleProps {
+    modelName: string;
+    rationale?: Rationale;
+    modelRole?: ModelRole;
+    grain?: string;
+}
+export declare function ModelRationale({ modelName, rationale, modelRole, grain }: ModelRationaleProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,28 @@
+/**
+ * RationaleField — displays and edits a single design rationale field.
+ *
+ * Reusable component for contextual reasoning (e.g. grain reasoning below
+ * the grain section, classification reasoning below the role section).
+ *
+ * Three states:
+ * 1. Empty — dashed "Add {label}" button when no content exists
+ * 2. Read — shows label with text, pencil edit button on hover
+ * 3. Edit — textarea with Save/Cancel buttons
+ *
+ * On save, sends only the single edited field as a partial patch.
+ * The extension host merges it into the on-disk rationale object, avoiding
+ * stale-closure races when multiple fields are edited in quick succession.
+ */
+import type { Rationale } from '@erd-studio/core';
+type RationaleKey = 'purpose' | 'design' | 'grainChoice' | 'roleChoice' | 'scdStrategy' | 'measures';
+interface RationaleFieldProps {
+    modelName: string;
+    rationale?: Rationale;
+    fieldKey: RationaleKey;
+    label: string;
+    placeholder: string;
+    /** When true, opens in edit mode immediately (used when parent triggers "Add Rationale"). */
+    autoEdit?: boolean;
+}
+export declare function RationaleField({ modelName, rationale, fieldKey, label, placeholder, autoEdit }: RationaleFieldProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

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

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

@@ -0,0 +1,11 @@
+/**
+ * AnnotationEdge — dashed edge linking an annotation to a model.
+ *
+ * Purely visual — no interactivity, no labels, no arrows.
+ * Uses a bezier path with a dashed stroke.
+ */
+import { type EdgeProps } from '@xyflow/react';
+import type { AnnotationFlowEdge } from '../../types/graph.js';
+declare function AnnotationEdgeInner({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, }: EdgeProps<AnnotationFlowEdge>): import("react/jsx-runtime").JSX.Element;
+export declare const AnnotationEdge: import("react").MemoExoticComponent<typeof AnnotationEdgeInner>;
+export {};

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

@@ -0,0 +1,18 @@
+/**
+ * AnnotationNode — custom React Flow node for canvas build notes (post-it notes).
+ *
+ * Renders a coloured sticky note with inline text editing. Annotations are
+ * temporary build notes — visible while constructing a model, then removed
+ * once the work is done.
+ *
+ * Features:
+ * - Inline toolbar (ellipsis button) with colour picker, link dropdown, delete
+ * - Drag handle to link the note to a model (drag the chain icon to a model node)
+ * - Handles on all 4 sides for closest-side edge routing
+ */
+import { type NodeProps } from '@xyflow/react';
+import type { AnnotationFlowNode } from '../../types/graph.js';
+import './AnnotationNode.css';
+declare function AnnotationNodeInner({ data }: NodeProps<AnnotationFlowNode>): import("react/jsx-runtime").JSX.Element;
+export declare const AnnotationNode: import("react").MemoExoticComponent<typeof AnnotationNodeInner>;
+export {};

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

@@ -0,0 +1,25 @@
+/**
+ * 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`
+ * using the anchor element's bounding rect. Automatically flips below
+ * the row if there isn't enough space above.
+ *
+ * Uses a callback ref (not useLayoutEffect + setState) to measure and
+ * position the tooltip exactly once when it mounts — avoiding infinite
+ * render loops.
+ */
+import type { ColumnDisplay } from '../../types/graph.js';
+import './ColumnTooltip.css';
+/** Returns true if this column has tooltip-worthy metadata. */
+export declare function hasTooltipContent(column: ColumnDisplay): boolean;
+interface ColumnTooltipProps {
+    column: ColumnDisplay;
+    /** The column row element used to calculate position. */
+    anchorRef: React.RefObject<HTMLDivElement | null>;
+    /** Whether the tooltip should be visible. */
+    visible: boolean;
+}
+export declare function ColumnTooltip({ column, anchorRef, visible }: ColumnTooltipProps): import("react").ReactPortal | null;
+export {};

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

@@ -0,0 +1,21 @@
+/**
+ * FkEdge — custom React Flow edge for displaying FK relationships.
+ *
+ * Renders a smooth-step path with Power BI-style cardinality labels:
+ * `*` for "many" and `1` for "one", positioned near each endpoint.
+ * Built relationships are blue; design relationships are orange.
+ * All edges use a solid line style.
+ *
+ * The edge line stops short of the node so the cardinality label sits
+ * in the gap between the line end and the node boundary.
+ *
+ * Edges connect to node-level handles (top/right/bottom/left) rather
+ * than column-specific handles, choosing the side that creates the
+ * least bends.
+ */
+import { type EdgeProps } from '@xyflow/react';
+import type { FkFlowEdge } from '../../types/graph.js';
+import './FkEdge.css';
+declare function FkEdgeComponent({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, sourceHandleId, targetHandleId, data, }: EdgeProps<FkFlowEdge>): import("react/jsx-runtime").JSX.Element | null;
+export declare const FkEdge: import("react").MemoExoticComponent<typeof FkEdgeComponent>;
+export {};

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

@@ -0,0 +1,47 @@
+/**
+ * HoverTip — a plain-text hover card for canvas marks, and the hook that drives it.
+ *
+ * The browser's own `title` attribute is not a reliable tooltip inside a React
+ * Flow node: the node is a drag surface, and what the user gets on hover is the
+ * grab cursor and nothing else. The canvas already solved this once for column
+ * rows (`ColumnTooltip`), so the node header's badges use the same mechanism
+ * rather than a second, worse one.
+ *
+ * Rendered through a portal to document.body, so it is never clipped by the
+ * node's `overflow: hidden`, and `pointer-events: none` so it cannot steal a
+ * drag. Positioning mirrors ColumnTooltip: centred on the anchor, clamped to
+ * the viewport, flipped below when there is no room above, and measured once in
+ * a callback ref rather than in an effect that would re-render.
+ */
+import './HoverTip.css';
+interface HoverTipProps {
+    text: string;
+    anchorRef: React.RefObject<HTMLElement | null>;
+    visible: boolean;
+}
+export declare function HoverTip({ text, anchorRef, visible }: HoverTipProps): import("react").ReactPortal | null;
+export interface UseHoverTipReturn<T extends HTMLElement> {
+    /**
+     * Spread onto the element the tip describes.
+     *
+     * `ref` is typed as React 18's non-nullable `RefObject<T>` so it can be
+     * spread straight onto an intrinsic element; the object underneath is an
+     * ordinary mutable ref that starts null, which is what React expects.
+     */
+    anchorProps: {
+        ref: React.RefObject<T>;
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+        'aria-label': string;
+    };
+    /** Render this next to the anchor; it portals itself out. */
+    tip: React.ReactNode;
+}
+/**
+ * Attach a hover tip to one element.
+ *
+ * `aria-label` carries the same text, so the explanation is not lost to a
+ * screen reader that will never fire a mouseenter.
+ */
+export declare function useHoverTip<T extends HTMLElement = HTMLElement>(text: string): UseHoverTipReturn<T>;
+export {};

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

@@ -0,0 +1,21 @@
+/**
+ * ModelNode — 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.
+ *
+ * Provides node-level handles (top/right/bottom/left) used by FkEdge for
+ * Power BI-style connections that route to whichever side creates the
+ * least bends.
+ *
+ * Relationships are created via long-press on column rows:
+ *   1. Long-press (200-250ms) on a column to start drag mode
+ *   2. Drag to a column in another model
+ *   3. Release to open the relationship dialog with prefilled data
+ */
+import { type NodeProps } from '@xyflow/react';
+import type { ModelFlowNode } 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>;
+export {};

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

@@ -0,0 +1,11 @@
+/**
+ * Legend — collapsible panel explaining the visual language of the graph.
+ *
+ * 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
+ * to a `?` icon button.
+ */
+import './Legend.css';
+export declare function Legend(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,75 @@
+/**
+ * ColumnRowEditor — shared editable column row component.
+ *
+ * Renders a single column row with PK/FK indicators, column name, and data type.
+ * Supports three modes: readonly, editable, and new (for adding columns).
+ *
+ * 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 { UpdateColumnPayloadColumn } from '@erd-studio/core';
+import './ColumnRowEditor.css';
+export interface ColumnRowEditorColumn {
+    name: string;
+    dataType: string;
+    description: string;
+    isPrimaryKey?: boolean;
+    isForeignKey?: boolean;
+    isNaturalKey?: boolean;
+    /** SCD type for dimension columns (0 = never changes, 1 = overwrite, 2 = track history). */
+    scdType?: 0 | 1 | 2;
+    /** Additive type for fact measure columns. */
+    additiveType?: 'additive' | 'semi-additive' | 'non-additive';
+}
+export interface ColumnRowEditorProps {
+    /** The column data to display/edit. */
+    column: ColumnRowEditorColumn;
+    /** Operating mode: readonly (built), editable (planned), or new (adding). */
+    mode: 'readonly' | 'editable' | 'new';
+    /** Existing column names for duplicate validation. */
+    existingColumnNames?: string[];
+    /**
+     * Callback when column is updated (saved).
+     * `scdType` / `additiveType` are `null` when explicitly cleared and omitted
+     * when unchanged (the host keeps the existing value for omitted fields).
+     */
+    onUpdate?: (updated: UpdateColumnPayloadColumn) => void;
+    /** Callback when delete button is clicked. */
+    onDelete?: () => void;
+    /** Callback when new row is cancelled (Escape key). */
+    onCancel?: () => void;
+    /** Show PK/FK/NK indicator badges. Default true. */
+    showIndicators?: boolean;
+    /** Show delete button on hover. Default true for editable mode. */
+    showDelete?: boolean;
+    /** Callback when PK badge is toggled. */
+    onTogglePK?: () => void;
+    /** Callback when FK badge is toggled. */
+    onToggleFK?: () => void;
+    /** Callback when NK badge is toggled. */
+    onToggleNK?: () => void;
+    /** Show warning if multiple PKs exist in model. */
+    showMultiplePKWarning?: boolean;
+    /** Parent model's role — determines whether SCD/additive dropdowns are shown. */
+    modelRole?: ModelRole;
+    /** Whether the description area is expanded. */
+    expanded?: boolean;
+    /** Callback when the expand/collapse chevron is clicked. */
+    onToggleExpand?: (opts?: {
+        altKey?: boolean;
+    }) => void;
+    /** Props to spread onto a drag handle element for reordering. */
+    dragHandleProps?: React.HTMLAttributes<HTMLSpanElement>;
+    /** Whether a dragged row is currently hovering above this row. */
+    isDragOver?: boolean;
+    /** Whether this row is currently being dragged. */
+    isBeingDragged?: boolean;
+    /** Whether this column is selected (spreadsheet-style selection). */
+    isSelected?: boolean;
+    /** Callback when the row is clicked for selection (receives event for modifier key detection). */
+    onSelect?: (e: React.MouseEvent) => void;
+    /** Whether the store says this column should enter edit mode (F2). */
+    isEditingActive?: boolean;
+}
+export declare function ColumnRowEditor({ column, mode, existingColumnNames, onUpdate, onDelete, onCancel, showIndicators, showDelete, onTogglePK, onToggleFK, onToggleNK, showMultiplePKWarning, modelRole, expanded, onToggleExpand, dragHandleProps, isDragOver, isBeingDragged, isSelected, onSelect, isEditingActive, }: ColumnRowEditorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+/**
+ * DataTypeSelect — custom dropdown for selecting SQL data types.
+ *
+ * Opens immediately on click (no second click required).
+ * Common data types for dbt models. Used in column editing contexts.
+ */
+import './DataTypeSelect.css';
+/** Standard SQL data types for dbt models. */
+export declare const DATA_TYPES: readonly ["STRING", "INT", "BIGINT", "FLOAT", "BOOLEAN", "DATE", "TIMESTAMP", "JSON"];
+export type DataType = (typeof DATA_TYPES)[number];
+export interface DataTypeSelectProps {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    className?: string;
+    /** Auto-open the dropdown on mount (single click to edit). */
+    autoOpen?: boolean;
+}
+export declare function DataTypeSelect({ value, onChange, onBlur, disabled, className, autoOpen, }: DataTypeSelectProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+/**
+ * KeyBadge — reusable badge for PK/FK/NK column indicators.
+ *
+ * Renders a single key type badge with click handling and status-aware styling.
+ * Used by KeyBadgeGroup to compose multi-key indicators.
+ */
+import './KeyBadge.css';
+export type KeyType = 'PK' | 'FK' | 'NK';
+export interface KeyBadgeProps {
+    type: KeyType;
+    active: boolean;
+    mode: 'readonly' | 'editable';
+    status?: 'built' | 'approved' | 'planned' | 'missing';
+    onClick?: () => void;
+}
+export declare function KeyBadge({ type, active, mode, status, onClick }: KeyBadgeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+/**
+ * KeyBadgeGroup — compact dropdown for PK/FK/NK key type selection.
+ *
+ * Shows selected keys inline when closed, opens dropdown for toggling.
+ * Takes up minimal space while allowing any combination of keys.
+ */
+import './KeyBadgeGroup.css';
+export interface KeyBadgeGroupProps {
+    isPrimaryKey: boolean;
+    isForeignKey: boolean;
+    isNaturalKey: boolean;
+    mode: 'readonly' | 'editable';
+    status?: 'built' | 'approved' | 'planned' | 'missing';
+    onTogglePK?: () => void;
+    onToggleFK?: () => void;
+    onToggleNK?: () => void;
+    /** Show warning icon if multiple PKs exist in the model. */
+    showMultiplePKWarning?: boolean;
+}
+export declare function KeyBadgeGroup({ isPrimaryKey, isForeignKey, isNaturalKey, mode, status, onTogglePK, onToggleFK, onToggleNK, showMultiplePKWarning, }: KeyBadgeGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/editor.d.ts

@@ -0,0 +1,27 @@
+export * from './index.js';
+export * from './store.js';
+export * from './sizing.js';
+export { NOOP_CANVAS_HOST, CanvasEnvironmentProvider, useCanvasHost, useSend, useIsViewer, type CanvasHost, type CanvasEnvironment, } from './host/canvasEnvironment.js';
+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 { FkEdge } from './components/Graph/FkEdge.js';
+export { AnnotationNode } from './components/Graph/AnnotationNode.js';
+export { AnnotationEdge } from './components/Graph/AnnotationEdge.js';
+export { DetailPanel } from './components/DetailPanel/DetailPanel.js';
+export { Legend } from './components/Legend/Legend.js';
+export { KeyBadge } from './components/common/KeyBadge.js';
+export { KeyBadgeGroup } from './components/common/KeyBadgeGroup.js';
+export { DataTypeSelect } from './components/common/DataTypeSelect.js';
+export { ColumnRowEditor } from './components/common/ColumnRowEditor.js';
+export * from './hooks/useColumnExpansion.js';
+export * from './hooks/useColumnReorder.js';
+export * from './hooks/useFocusWithinRow.js';
+export * from './hooks/useLongPressDrag.js';
+export { applyNodeOverlays, type GraphNode, type GraphEdge } from './lib/nodeOverlays.js';
+export * from './lib/stageColors.js';
+export * from './lib/dataTypeColors.js';
+export * from './lib/badgeLabels.js';
+export { swapCardinality } from './lib/cardinalityUtils.js';
+export { ANNOTATION_COLORS } from './lib/annotationColors.js';

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

@@ -0,0 +1,36 @@
+/**
+ * useColumnExpansion — manages column expansion state for ModelNodes.
+ *
+ * Tracks which model nodes have their columns expanded (showing all columns
+ * vs collapsed showing first N columns). State lives in the Zustand store
+ * so it can be persisted across tab switches via useStatePersistence.
+ *
+ * Smart collapsing: columns only collapse automatically when there are enough
+ * nodes (NODE_THRESHOLD) to warrant performance optimization. Below that
+ * threshold, all columns are shown by default.
+ *
+ * @module F405 Performance optimization
+ */
+/** Number of columns to show when collapsed. */
+export declare const COLLAPSED_COLUMN_LIMIT = 5;
+/** Number of nodes required before auto-collapsing columns for performance. */
+export declare const NODE_THRESHOLD = 30;
+export interface UseColumnExpansionReturn {
+    /** Check if a model's columns are expanded (or should be shown due to low node count). */
+    isExpanded: (modelId: string) => boolean;
+    /** Toggle expansion state for a model. */
+    toggleExpansion: (modelId: string) => void;
+    /** Collapse all expanded models. */
+    collapseAll: () => void;
+    /** Expand all models (show all columns). */
+    expandAll: (modelIds: string[]) => void;
+    /** Whether columns are in "all expanded" mode. */
+    allExpanded: boolean;
+}
+/**
+ * Hook to manage column expansion state.
+ *
+ * State is stored in the Zustand editor store and persisted via
+ * useStatePersistence so it survives webview re-creation on tab switches.
+ */
+export declare function useColumnExpansion(): UseColumnExpansionReturn;