@erd-studio/renderer 0.1.0 → 0.1.1

package/dist/{chunk-3PJCC7BX.js → chunk-5OQLRX7R.js}

@@ -4,7 +4,7 @@ import {
   NODE_WIDTH,
   resolveNodeDimensions,
   useColumnExpansion
-} from "./chunk-HOQPSLHQ.js";
+} from "./chunk-DUQ2TTQH.js";
 import {
   CanvasStoreProvider,
   createCanvasStore,
@@ -15,12 +15,12 @@ import {
 // src/ErdCanvas.tsx
 import {
   forwardRef,
-  useCallback as useCallback22,
-  useEffect as useEffect14,
+  useCallback as useCallback24,
+  useEffect as useEffect16,
   useImperativeHandle,
   useMemo as useMemo7,
-  useRef as useRef10,
-  useState as useState18
+  useRef as useRef12,
+  useState as useState20
 } from "react";
 import {
   ReactFlow,
@@ -66,8 +66,32 @@ function useIsViewer() {
 // src/canvas/useCanvasGraph.ts
 import { useCallback as useCallback2, useEffect, useRef } from "react";
 
+// src/lib/modelLabels.ts
+function computeModelLabels(models) {
+  const baseOf = (m) => m.alias?.trim() || m.name;
+  const counts = /* @__PURE__ */ new Map();
+  for (const m of models) {
+    const key = baseOf(m).toLowerCase();
+    counts.set(key, (counts.get(key) ?? 0) + 1);
+  }
+  const labels = /* @__PURE__ */ new Map();
+  for (const m of models) {
+    const base = baseOf(m);
+    const clashes = (counts.get(base.toLowerCase()) ?? 0) > 1;
+    const label = clashes && m.schema ? `${m.schema}.${base}` : base;
+    if (label !== m.name) {
+      labels.set(m.name, label);
+    }
+  }
+  return labels;
+}
+function matchesModelSearch(data, query) {
+  return data.modelName.toLowerCase().includes(query) || data.label !== void 0 && data.label.toLowerCase().includes(query);
+}
+
 // src/lib/graphTransformer.ts
 var DEFAULT_POSITION = { x: 0, y: 0 };
+var hasMeta = (meta) => !!meta && Object.keys(meta).length > 0;
 function mapColumns(model) {
   const mapped = model.columns.map((col) => ({
     name: col.name,
@@ -77,7 +101,8 @@ function mapColumns(model) {
     isForeignKey: col.isForeignKey,
     isNaturalKey: col.isNaturalKey,
     ...col.scdType != null ? { scdType: col.scdType } : {},
-    ...col.additiveType ? { additiveType: col.additiveType } : {}
+    ...col.additiveType ? { additiveType: col.additiveType } : {},
+    ...hasMeta(col.meta) ? { meta: col.meta } : {}
   }));
   return mapped;
 }
@@ -115,6 +140,7 @@ function transformDomain(domain, options) {
     data: { ...data, isExpanded: options?.isExpanded?.(id) ?? false },
     measured: void 0
   });
+  const labels = computeModelLabels(models);
   const nodes = models.map((model) => {
     const columns = mapColumns(model);
     const position = positionMap.get(model.name) ?? DEFAULT_POSITION;
@@ -125,6 +151,7 @@ function transformDomain(domain, options) {
       position,
       data: {
         modelName: model.name,
+        ...labels.has(model.name) ? { label: labels.get(model.name) } : {},
         stage,
         layer,
         layerConfig,
@@ -134,6 +161,7 @@ function transformDomain(domain, options) {
         ...model.rationale && (model.rationale.purpose || model.rationale.design || model.rationale.grainChoice || model.rationale.roleChoice || model.rationale.scdStrategy || model.rationale.measures) ? { hasRationale: true } : {},
         ...model.grain ? { grain: model.grain } : {},
         ...model.modelRole ? { modelRole: model.modelRole } : {},
+        ...hasMeta(model.meta) ? { meta: model.meta } : {},
         ...readOnly ? { readOnly: true } : {},
         // Strict `=== false`: logical models leave existsInProject undefined,
         // so `!model.existsInProject` would ghost the entire logical canvas.
@@ -142,6 +170,7 @@ function transformDomain(domain, options) {
         // spreads `...data` and never recomputes it, so memoised nodes are
         // untouched. Never derive it inside an overlay pass.
         ...model.provenance ? { provenance: model.provenance } : {},
+        ...model.loadError ? { loadError: model.loadError } : {},
         ...disc ? { discrepancy: disc } : {},
         ...disc && options?.discrepancyReport ? {
           discrepancySourceStage: options.discrepancyReport.sourceStage,
@@ -326,7 +355,7 @@ function applyNodeOverlays(nodes, edges, state) {
       return node;
     }
     const data = node.data;
-    const searchDimmed = query ? !data.modelName.toLowerCase().includes(query) : false;
+    const searchDimmed = query ? !matchesModelSearch(data, query) : false;
     const selectionDimmed = hasSelection && !connected.has(node.id);
     const dimmed = searchDimmed || selectionDimmed;
     const expanded = isExpanded(node.id);
@@ -1015,6 +1044,14 @@ function DataTypeSelect({
 // src/components/Graph/ColumnTooltip.tsx
 import { useCallback as useCallback6 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
+
+// src/lib/metaFormat.ts
+import { formatMetaValue } from "@erd-studio/core";
+function metaRows(meta) {
+  return Object.entries(meta ?? {}).map(([key, value]) => [key, formatMetaValue(value)]);
+}
+
+// src/components/Graph/ColumnTooltip.tsx
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var SCD_LABELS = {
   0: "Type 0 \u2014 Fixed (never changes)",
@@ -1029,7 +1066,7 @@ var ADDITIVE_LABELS = {
 var FLIP_THRESHOLD = 80;
 var TOOLTIP_GAP = 6;
 function hasTooltipContent(column) {
-  return !!(column.description || column.isPrimaryKey || column.isForeignKey || column.isNaturalKey || column.scdType != null || column.additiveType);
+  return !!(column.description || column.isPrimaryKey || column.isForeignKey || column.isNaturalKey || column.scdType != null || column.additiveType || metaRows(column.meta).length > 0);
 }
 function ColumnTooltip({ column, anchorRef, visible }) {
   const keys = [];
@@ -1038,7 +1075,8 @@ function ColumnTooltip({ column, anchorRef, visible }) {
   if (column.isNaturalKey) keys.push("Natural Key");
   const hasExtras = keys.length > 0 || column.scdType != null || column.additiveType;
   const hasDescription = !!column.description;
-  const hasContent = hasDescription || hasExtras;
+  const meta = metaRows(column.meta);
+  const hasContent = hasDescription || hasExtras || meta.length > 0;
   const positionRef = useCallback6(
     (tooltip) => {
       if (!tooltip || !anchorRef.current) return;
@@ -1078,20 +1116,30 @@ function ColumnTooltip({ column, anchorRef, visible }) {
           /* @__PURE__ */ jsx5("span", { className: "column-tooltip__label", children: "Measure" }),
           /* @__PURE__ */ jsx5("span", { className: "column-tooltip__value", children: ADDITIVE_LABELS[column.additiveType] ?? column.additiveType })
         ] })
-      ] })
+      ] }),
+      meta.length > 0 && /* @__PURE__ */ jsx5(MetaSection, { rows: meta })
     ] }),
     document.body
   );
 }
+function MetaSection({ rows }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "column-tooltip__meta", children: [
+    /* @__PURE__ */ jsx5("div", { className: "column-tooltip__label", children: "Metadata" }),
+    rows.map(([key, value]) => /* @__PURE__ */ jsxs3("div", { className: "column-tooltip__row", children: [
+      /* @__PURE__ */ jsx5("span", { className: "column-tooltip__meta-key", children: key }),
+      /* @__PURE__ */ jsx5("span", { className: "column-tooltip__value", children: value })
+    ] }, key))
+  ] });
+}
 
 // src/components/Graph/HoverTip.tsx
 import { useCallback as useCallback7, useRef as useRef5, useState as useState4 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var HOVER_DELAY_MS = 450;
 var FLIP_THRESHOLD2 = 60;
 var TIP_GAP = 6;
-function HoverTip({ text, anchorRef, visible }) {
+function HoverTip({ text, rows, anchorRef, visible }) {
   const positionRef = useCallback7(
     (tip) => {
       if (!tip || !anchorRef.current) {
@@ -1116,11 +1164,17 @@ function HoverTip({ text, anchorRef, visible }) {
     return null;
   }
   return createPortal3(
-    /* @__PURE__ */ jsx6("div", { ref: positionRef, className: "hover-tip", role: "tooltip", children: text }),
+    /* @__PURE__ */ jsxs4("div", { ref: positionRef, className: "hover-tip", role: "tooltip", children: [
+      text,
+      rows && rows.length > 0 && /* @__PURE__ */ jsx6("div", { className: "hover-tip__rows", children: rows.map(([label, value]) => /* @__PURE__ */ jsxs4("div", { className: "hover-tip__row", children: [
+        /* @__PURE__ */ jsx6("span", { className: "hover-tip__label", children: label }),
+        /* @__PURE__ */ jsx6("span", { className: "hover-tip__value", children: value })
+      ] }, label)) })
+    ] }),
     document.body
   );
 }
-function useHoverTip(text) {
+function useHoverTip(text, rows) {
   const ref = useRef5(null);
   const timer = useRef5(null);
   const [visible, setVisible] = useState4(false);
@@ -1137,9 +1191,10 @@ function useHoverTip(text) {
     }
     setVisible(false);
   }, []);
+  const label = rows && rows.length > 0 ? `${text}; ${rows.map(([k, v]) => `${k}: ${v}`).join("; ")}` : text;
   return {
-    anchorProps: { ref, onMouseEnter, onMouseLeave, "aria-label": text },
-    tip: /* @__PURE__ */ jsx6(HoverTip, { text, anchorRef: ref, visible })
+    anchorProps: { ref, onMouseEnter, onMouseLeave, "aria-label": label },
+    tip: /* @__PURE__ */ jsx6(HoverTip, { text, rows, anchorRef: ref, visible })
   };
 }
 
@@ -1202,7 +1257,7 @@ function edgeHoverText(edge) {
 }
 
 // src/components/Graph/ModelNode.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var LAYER_BADGE_FALLBACK = {
   bronze: "BRZ",
   silver: "SLV",
@@ -1292,15 +1347,15 @@ function ColumnRow({ column, modelName, readOnly, existingColumnNames, discrepan
         cancelEdit();
         return;
       }
-      if (!/^[a-z0-9_]+$/.test(trimmed)) {
+      if (!/^[A-Za-z0-9_]+$/.test(trimmed)) {
         if (revertOnError) {
           cancelEdit();
           return;
         }
-        setEditError("Use lowercase letters, numbers, underscores");
+        setEditError("Use only letters, numbers, underscores");
         return;
       }
-      if (trimmed !== column.name && existingColumnNames?.includes(trimmed)) {
+      if (trimmed !== column.name && existingColumnNames?.some((n) => n !== column.name && n.toLowerCase() === trimmed.toLowerCase())) {
         if (revertOnError) {
           cancelEdit();
           return;
@@ -1466,7 +1521,7 @@ function ColumnRow({ column, modelName, readOnly, existingColumnNames, discrepan
   const reorderDragClass = isReorderDragging ? "model-node__column--reorder-dragging" : "";
   const reorderTargetClass = isReorderTarget ? "model-node__column--reorder-target" : "";
   const discrepancyClass = discrepancy?.status === "extra" ? "model-node__column--disc-extra" : discrepancy?.status === "type-mismatch" ? "model-node__column--disc-mismatch" : "";
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ref: elementRef,
@@ -1488,7 +1543,7 @@ function ColumnRow({ column, modelName, readOnly, existingColumnNames, discrepan
             children: "\u283F"
           }
         ),
-        /* @__PURE__ */ jsxs4("span", { className: "model-node__col-indicators", children: [
+        /* @__PURE__ */ jsxs5("span", { className: "model-node__col-indicators", children: [
           column.isPrimaryKey && /* @__PURE__ */ jsx7(KeyBadge, { type: "PK", active: true, mode: "readonly" }),
           column.isForeignKey && /* @__PURE__ */ jsx7(KeyBadge, { type: "FK", active: true, mode: "readonly" }),
           column.isNaturalKey && /* @__PURE__ */ jsx7(KeyBadge, { type: "NK", active: true, mode: "readonly" })
@@ -1552,17 +1607,17 @@ function ColumnRow({ column, modelName, readOnly, existingColumnNames, discrepan
             className: "nodrag",
             autoOpen: true
           }
-        ) : discrepancy?.status === "type-mismatch" ? /* @__PURE__ */ jsxs4("span", { className: "model-node__col-type model-node__col-type--mismatch", title: `${discrepancySourceStage ?? "current"}: ${discrepancy.sourceDataType}, ${discrepancyTargetStage ?? "target"}: ${discrepancy.targetDataType}`, children: [
-          /* @__PURE__ */ jsxs4("span", { className: "model-node__col-type-line", style: { color: STAGE_HEX[discrepancySourceStage ?? ""] ?? "inherit" }, children: [
-            /* @__PURE__ */ jsxs4("span", { className: "model-node__col-type-stage", children: [
+        ) : discrepancy?.status === "type-mismatch" ? /* @__PURE__ */ jsxs5("span", { className: "model-node__col-type model-node__col-type--mismatch", title: `${discrepancySourceStage ?? "current"}: ${discrepancy.sourceDataType}, ${discrepancyTargetStage ?? "target"}: ${discrepancy.targetDataType}`, children: [
+          /* @__PURE__ */ jsxs5("span", { className: "model-node__col-type-line", style: { color: STAGE_HEX[discrepancySourceStage ?? ""] ?? "inherit" }, children: [
+            /* @__PURE__ */ jsxs5("span", { className: "model-node__col-type-stage", children: [
               discrepancySourceStage ?? "current",
               ":"
             ] }),
             " ",
             discrepancy.sourceDataType
           ] }),
-          /* @__PURE__ */ jsxs4("span", { className: "model-node__col-type-line", style: { color: STAGE_HEX[discrepancyTargetStage ?? ""] ?? "inherit" }, children: [
-            /* @__PURE__ */ jsxs4("span", { className: "model-node__col-type-stage", children: [
+          /* @__PURE__ */ jsxs5("span", { className: "model-node__col-type-line", style: { color: STAGE_HEX[discrepancyTargetStage ?? ""] ?? "inherit" }, children: [
+            /* @__PURE__ */ jsxs5("span", { className: "model-node__col-type-stage", children: [
               discrepancyTargetStage ?? "target",
               ":"
             ] }),
@@ -1613,8 +1668,14 @@ function ColumnRow({ column, modelName, readOnly, existingColumnNames, discrepan
     }
   );
 }
+function describeLoadError(error) {
+  if (error.kind === "read") {
+    return "ERD Studio can't read this file.";
+  }
+  return error.line !== void 0 ? `YAML error on line ${error.line} \u2014 ERD Studio can't read this file.` : "YAML error \u2014 ERD Studio can't read this file.";
+}
 function ModelNodeComponent({ data, selected }) {
-  const { modelName, stage, layer, layerConfig, schema, columns, grain, dimmed, readOnly, isGhost, ghostReason, provenance, isStub, isExpanded = false, onToggleExpansion, discrepancy, discrepancySourceStage, discrepancyTargetStage } = data;
+  const { modelName, label, stage, layer, layerConfig, schema, columns, grain, meta, dimmed, readOnly, isGhost, ghostReason, provenance, loadError, isStub, isExpanded = false, onToggleExpansion, discrepancy, discrepancySourceStage, discrepancyTargetStage } = data;
   const openNodeContextMenu = useEditorStore((s) => s.openNodeContextMenu);
   const send = useSend();
   const viewer = useIsViewer();
@@ -1666,8 +1727,11 @@ function ModelNodeComponent({ data, selected }) {
   }, [isExpanded, columnDiscrepancyMap, discrepancy]);
   const isDiscExtra = discrepancy?.status === "extra";
   const stageClass = isGhost ? "ghost" : stage;
+  const title = label ? `${label} (model ${modelName})` : modelName;
+  const modelMeta = useMemo2(() => metaRows(meta), [meta]);
   const nameTip = useHoverTip(
-    ghostReason ? `${modelName} \u2014 ${GHOST_REASON_TITLE[ghostReason]}` : isDiscExtra ? `${modelName} \u2014 only in ${discrepancySourceStage ?? "this stage"}, not in ${discrepancyTargetStage ?? "the stage being compared"}` : modelName
+    ghostReason ? `${title} \u2014 ${GHOST_REASON_TITLE[ghostReason]}` : isDiscExtra ? `${title} \u2014 only in ${discrepancySourceStage ?? "this stage"}, not in ${discrepancyTargetStage ?? "the stage being compared"}` : title,
+    modelMeta
   );
   const sourceTip = useHoverTip(
     provenance ? sourceTitle(provenance, columns) : ""
@@ -1675,7 +1739,7 @@ function ModelNodeComponent({ data, selected }) {
   const badgeTip = useHoverTip(
     schema ? `Database schema: ${schema}` : `Layer: ${layerConfig?.label ?? layer} \u2014 no dbt schema resolved (run dbt compile or dbt docs generate)`
   );
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: `model-node model-node--${stageClass}${ghostReason ? ` model-node--ghost-${ghostReason}` : ""}${dimmed ? " model-node--dimmed" : ""}${readOnly ? " model-node--readonly" : ""}${isDiscExtra ? " model-node--disc-extra" : ""}${selected ? " model-node--selected" : ""}`,
@@ -1690,8 +1754,11 @@ function ModelNodeComponent({ data, selected }) {
         /* @__PURE__ */ jsx7(Handle, { type: "target", position: Position.Bottom, id: "node-bottom-tgt", style: NODE_HANDLE_STYLE }),
         /* @__PURE__ */ jsx7(Handle, { type: "source", position: Position.Left, id: "node-left-src", style: NODE_HANDLE_STYLE }),
         /* @__PURE__ */ jsx7(Handle, { type: "target", position: Position.Left, id: "node-left-tgt", style: NODE_HANDLE_STYLE }),
-        /* @__PURE__ */ jsxs4("div", { className: "model-node__header", children: [
-          /* @__PURE__ */ jsx7("span", { className: "model-node__name", ...nameTip.anchorProps, children: modelName }),
+        /* @__PURE__ */ jsxs5("div", { className: "model-node__header", children: [
+          /* @__PURE__ */ jsxs5("span", { className: "model-node__name", ...nameTip.anchorProps, children: [
+            label ?? modelName,
+            label && /* @__PURE__ */ jsx7("span", { className: "model-node__model-id", children: modelName })
+          ] }),
           nameTip.tip,
           provenance && /* @__PURE__ */ jsx7(
             "span",
@@ -1717,7 +1784,7 @@ function ModelNodeComponent({ data, selected }) {
           badgeTip.tip
         ] }),
         grain && /* @__PURE__ */ jsx7("div", { className: "model-node__grain", title: grain, children: grain }),
-        /* @__PURE__ */ jsxs4("div", { className: "model-node__columns", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "model-node__columns", children: [
           displayColumns.map((col, idx) => /* @__PURE__ */ jsx7(
             ColumnRow,
             {
@@ -1734,7 +1801,7 @@ function ModelNodeComponent({ data, selected }) {
             },
             col.name
           )),
-          hiddenCount > 0 && /* @__PURE__ */ jsxs4(
+          hiddenCount > 0 && /* @__PURE__ */ jsxs5(
             "button",
             {
               className: "model-node__expand-button",
@@ -1756,19 +1823,19 @@ function ModelNodeComponent({ data, selected }) {
               children: "Show less"
             }
           ),
-          missingColumns.length > 0 && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+          missingColumns.length > 0 && /* @__PURE__ */ jsxs5(Fragment2, { children: [
             /* @__PURE__ */ jsx7(
               "div",
               {
                 className: "model-node__separator model-node__separator--disc",
                 title: `Below this line: columns ${discrepancyTargetStage ?? "the compared stage"} has and ${discrepancySourceStage ?? "this stage"} does not`,
-                children: /* @__PURE__ */ jsxs4("span", { className: "model-node__separator-label model-node__separator-label--missing", children: [
+                children: /* @__PURE__ */ jsxs5("span", { className: "model-node__separator-label model-node__separator-label--missing", children: [
                   "only in ",
                   discrepancyTargetStage ?? "comparison"
                 ] })
               }
             ),
-            missingColumns.map((cd) => /* @__PURE__ */ jsxs4(
+            missingColumns.map((cd) => /* @__PURE__ */ jsxs5(
               "div",
               {
                 className: "model-node__column model-node__column--disc-missing nodrag",
@@ -1776,7 +1843,7 @@ function ModelNodeComponent({ data, selected }) {
                 children: [
                   /* @__PURE__ */ jsx7("span", { className: "model-node__col-name", children: cd.name }),
                   /* @__PURE__ */ jsx7("span", { className: "model-node__col-type", style: { color: cd.targetDataType ? getDataTypeColor(cd.targetDataType) : void 0 }, children: cd.targetDataType ?? "" }),
-                  /* @__PURE__ */ jsxs4("span", { className: "model-node__col-disc-badge model-node__col-disc-badge--missing", children: [
+                  /* @__PURE__ */ jsxs5("span", { className: "model-node__col-disc-badge model-node__col-disc-badge--missing", children: [
                     discrepancyTargetStage ?? "target",
                     " only"
                   ] })
@@ -1785,13 +1852,27 @@ function ModelNodeComponent({ data, selected }) {
               `ghost-${cd.name}`
             ))
           ] }),
-          columns.length === 0 && !missingColumns.length && /* @__PURE__ */ jsx7("div", { className: "model-node__empty", children: "No columns" })
+          columns.length === 0 && !missingColumns.length && (loadError ? /* @__PURE__ */ jsxs5("div", { className: "model-node__load-error", role: "alert", children: [
+            /* @__PURE__ */ jsx7("span", { className: "model-node__load-error-text", children: describeLoadError(loadError) }),
+            !viewer && /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                className: "model-node__load-error-open nodrag",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  send({ type: "openModelFile", payload: { modelName } });
+                },
+                children: "Open file"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx7("div", { className: "model-node__empty", children: "No columns" }))
         ] }),
-        /* @__PURE__ */ jsxs4("div", { className: "model-node__footer", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "model-node__footer", children: [
           isStub ? `${displayColumns.length} key col${displayColumns.length !== 1 ? "s" : ""} of ${columns.length}` : `${columns.length} ${columns.length === 1 ? "column" : "columns"}`,
           discrepancy && discrepancy.columns.length > 0 && (() => {
             const issues = discrepancy.columns.filter((c) => c.status !== "matched").length;
-            return issues > 0 ? /* @__PURE__ */ jsxs4("span", { className: "model-node__footer-disc", title: `${issues} column discrepanc${issues === 1 ? "y" : "ies"}`, children: [
+            return issues > 0 ? /* @__PURE__ */ jsxs5("span", { className: "model-node__footer-disc", title: `${issues} column discrepanc${issues === 1 ? "y" : "ies"}`, children: [
               " ",
               "\xB7 ",
               issues,
@@ -1932,7 +2013,7 @@ function buildPositionsKey(nodeLookup, nodeIds) {
 }
 
 // src/components/Graph/FkEdge.tsx
-import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var PATH_GAP = 20;
 var LABEL_OFFSET = 8;
 var SELF_LOOP_RADIUS = 55;
@@ -2089,7 +2170,7 @@ function FkEdgeComponent({
   const tgtLabel = offsetPoint(adjustedTargetX, adjustedTargetY, targetPosition, LABEL_OFFSET);
   const midX = isSelfLoop ? (src.x + tgt.x) / 2 + SELF_LOOP_RADIUS * 0.75 : (adjustedSourceX + adjustedTargetX) / 2;
   const midY = isSelfLoop ? (src.y + tgt.y) / 2 - SELF_LOOP_RADIUS * 0.75 : (adjustedSourceY + adjustedTargetY) / 2;
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
     /* @__PURE__ */ jsx8(
       "path",
       {
@@ -2109,7 +2190,7 @@ function FkEdgeComponent({
         children: /* @__PURE__ */ jsx8("title", { children: edgeTitle })
       }
     ),
-    /* @__PURE__ */ jsxs5(EdgeLabelRenderer, { children: [
+    /* @__PURE__ */ jsxs6(EdgeLabelRenderer, { children: [
       /* @__PURE__ */ jsx8(
         "span",
         {
@@ -2187,7 +2268,7 @@ var ANNOTATION_COLORS = [
 ];
 
 // src/components/Graph/AnnotationNode.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var HANDLE_STYLE = {
   width: 1,
   height: 1,
@@ -2359,7 +2440,7 @@ function AnnotationNodeInner({ data }) {
     if (data.height) style.height = data.height;
   }
   const modelNames = domain?.models.map((m) => m.name) ?? [];
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       ref: containerRef,
@@ -2367,7 +2448,7 @@ function AnnotationNodeInner({ data }) {
       style,
       onDoubleClick: viewer ? void 0 : handleDoubleClick,
       children: [
-        !data.readOnly && /* @__PURE__ */ jsxs6("div", { className: "annotation-node__toolbar", children: [
+        !data.readOnly && /* @__PURE__ */ jsxs7("div", { className: "annotation-node__toolbar", children: [
           /* @__PURE__ */ jsx9(
             "div",
             {
@@ -2390,7 +2471,7 @@ function AnnotationNodeInner({ data }) {
               children: "\u22EF"
             }
           ),
-          toolbarOpen && /* @__PURE__ */ jsxs6("div", { ref: toolbarPanelRef, className: "annotation-node__toolbar-panel nodrag nowheel", onClick: (e) => e.stopPropagation(), children: [
+          toolbarOpen && /* @__PURE__ */ jsxs7("div", { ref: toolbarPanelRef, className: "annotation-node__toolbar-panel nodrag nowheel", onClick: (e) => e.stopPropagation(), children: [
             /* @__PURE__ */ jsx9("div", { className: "annotation-node__color-row", children: ANNOTATION_COLORS.map((opt) => /* @__PURE__ */ jsx9(
               "button",
               {
@@ -2401,7 +2482,7 @@ function AnnotationNodeInner({ data }) {
               },
               opt.value
             )) }),
-            /* @__PURE__ */ jsx9("div", { className: "annotation-node__link-row", children: /* @__PURE__ */ jsxs6(
+            /* @__PURE__ */ jsx9("div", { className: "annotation-node__link-row", children: /* @__PURE__ */ jsxs7(
               "select",
               {
                 className: "annotation-node__link-select nodrag",
@@ -2428,7 +2509,7 @@ function AnnotationNodeInner({ data }) {
             placeholder: "Type a build note..."
           }
         ) : /* @__PURE__ */ jsx9("div", { className: "annotation-node__text", children: data.text || /* @__PURE__ */ jsx9("span", { className: "annotation-node__placeholder", children: "Double-click to edit..." }) }),
-        data.linkedModel && /* @__PURE__ */ jsxs6("div", { className: "annotation-node__link-badge", title: `Linked to ${data.linkedModel}`, children: [
+        data.linkedModel && /* @__PURE__ */ jsxs7("div", { className: "annotation-node__link-badge", title: `Linked to ${data.linkedModel}`, children: [
           "\u{1F517} ",
           data.linkedModel
         ] }),
@@ -2542,7 +2623,7 @@ function repickHandleSides(nodes, edges, movedIds) {
 }
 
 // src/components/DetailPanel/DetailPanel.tsx
-import { useCallback as useCallback20, useEffect as useEffect13, useMemo as useMemo6, useState as useState17 } from "react";
+import { useCallback as useCallback22, useEffect as useEffect15, useMemo as useMemo6, useState as useState19 } from "react";
 import { Panel } from "@xyflow/react";
 
 // src/components/DetailPanel/ModelRationale.tsx
@@ -2550,7 +2631,7 @@ import { useMemo as useMemo4, useState as useState9 } from "react";
 
 // src/components/DetailPanel/RationaleField.tsx
 import { useCallback as useCallback11, useEffect as useEffect7, useState as useState8 } from "react";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function RationaleField({ modelName, rationale, fieldKey, label, placeholder, autoEdit }) {
   const host = useCanvasHost();
   const viewer = useIsViewer();
@@ -2592,13 +2673,13 @@ function RationaleField({ modelName, rationale, fieldKey, label, placeholder, au
   );
   if (viewer) {
     if (!hasContent) return null;
-    return /* @__PURE__ */ jsxs7("div", { className: "detail-panel__rationale-section", children: [
+    return /* @__PURE__ */ jsxs8("div", { className: "detail-panel__rationale-section", children: [
       /* @__PURE__ */ jsx11("div", { className: "detail-panel__rationale-header", children: /* @__PURE__ */ jsx11("h4", { className: "detail-panel__section-title", style: { margin: 0 }, children: label }) }),
       /* @__PURE__ */ jsx11("div", { className: "detail-panel__rationale-field", children: /* @__PURE__ */ jsx11("p", { className: "detail-panel__rationale-text", children: rationale?.[fieldKey] }) })
     ] });
   }
   if (!hasContent && !editing) {
-    return /* @__PURE__ */ jsx11("div", { className: "detail-panel__rationale-section", children: /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsx11("div", { className: "detail-panel__rationale-section", children: /* @__PURE__ */ jsxs8(
       "button",
       {
         className: "detail-panel__rationale-add-btn",
@@ -2612,7 +2693,7 @@ function RationaleField({ modelName, rationale, fieldKey, label, placeholder, au
     ) });
   }
   if (editing) {
-    return /* @__PURE__ */ jsxs7("div", { className: "detail-panel__rationale-section", onKeyDown: handleKeyDown, children: [
+    return /* @__PURE__ */ jsxs8("div", { className: "detail-panel__rationale-section", onKeyDown: handleKeyDown, children: [
       /* @__PURE__ */ jsx11("div", { className: "detail-panel__rationale-header", children: /* @__PURE__ */ jsx11("h4", { className: "detail-panel__section-title", style: { margin: 0 }, children: label }) }),
       /* @__PURE__ */ jsx11(
         "textarea",
@@ -2625,14 +2706,14 @@ function RationaleField({ modelName, rationale, fieldKey, label, placeholder, au
           autoFocus: true
         }
       ),
-      /* @__PURE__ */ jsxs7("div", { className: "detail-panel__rationale-actions", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "detail-panel__rationale-actions", children: [
         /* @__PURE__ */ jsx11("button", { className: "detail-panel__button", onClick: handleSave, children: "Save" }),
         /* @__PURE__ */ jsx11("button", { className: "detail-panel__button", onClick: handleCancel, children: "Cancel" })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs7("div", { className: "detail-panel__rationale-section", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "detail-panel__rationale-header", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: "detail-panel__rationale-section", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "detail-panel__rationale-header", children: [
       /* @__PURE__ */ jsx11("h4", { className: "detail-panel__section-title", style: { margin: 0 }, children: label }),
       /* @__PURE__ */ jsx11(
         "button",
@@ -2657,7 +2738,7 @@ function RationaleField({ modelName, rationale, fieldKey, label, placeholder, au
 }
 
 // src/components/DetailPanel/ModelRationale.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function hasRationaleContent(rationale) {
   if (!rationale) return false;
   return [
@@ -2703,8 +2784,8 @@ function ModelRationale({ modelName, rationale, modelRole, grain }) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs8("div", { className: "detail-panel__rationale-section", children: [
-    /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9("div", { className: "detail-panel__rationale-section", children: [
+    /* @__PURE__ */ jsxs9(
       "button",
       {
         className: "detail-panel__rationale-toggle",
@@ -2716,7 +2797,7 @@ function ModelRationale({ modelName, rationale, modelRole, grain }) {
         children: [
           /* @__PURE__ */ jsx12("span", { className: `detail-panel__rationale-chevron${open ? " detail-panel__rationale-chevron--open" : ""}`, children: "\u25B8" }),
           "Design Rationale",
-          filledCount > 0 && /* @__PURE__ */ jsxs8("span", { className: "detail-panel__rationale-count", children: [
+          filledCount > 0 && /* @__PURE__ */ jsxs9("span", { className: "detail-panel__rationale-count", children: [
             "(",
             filledCount,
             ")"
@@ -2724,7 +2805,7 @@ function ModelRationale({ modelName, rationale, modelRole, grain }) {
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs8("div", { className: "detail-panel__rationale-body", children: [
+    open && /* @__PURE__ */ jsxs9("div", { className: "detail-panel__rationale-body", children: [
       /* @__PURE__ */ jsx12(
         RationaleField,
         {
@@ -2792,7 +2873,7 @@ function ModelRationale({ modelName, rationale, modelRole, grain }) {
 
 // src/components/DetailPanel/DescriptionEditor.tsx
 import { useCallback as useCallback12, useEffect as useEffect8, useState as useState10 } from "react";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 function DescriptionEditor({ modelName, description }) {
   const host = useCanvasHost();
   const [editing, setEditing] = useState10(false);
@@ -2840,7 +2921,7 @@ function DescriptionEditor({ modelName, description }) {
     ) });
   }
   if (editing) {
-    return /* @__PURE__ */ jsxs9("div", { className: "detail-panel__description-section", children: [
+    return /* @__PURE__ */ jsxs10("div", { className: "detail-panel__description-section", children: [
       /* @__PURE__ */ jsx13("div", { className: "detail-panel__rationale-header", children: /* @__PURE__ */ jsx13("h4", { className: "detail-panel__section-title", style: { margin: 0 }, children: "Description" }) }),
       /* @__PURE__ */ jsx13(
         "textarea",
@@ -2854,14 +2935,14 @@ function DescriptionEditor({ modelName, description }) {
           autoFocus: true
         }
       ),
-      /* @__PURE__ */ jsxs9("div", { className: "detail-panel__rationale-actions", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "detail-panel__rationale-actions", children: [
         /* @__PURE__ */ jsx13("button", { className: "detail-panel__button", onClick: handleSave, children: "Save" }),
         /* @__PURE__ */ jsx13("button", { className: "detail-panel__button", onClick: handleCancel, children: "Cancel" })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs9("div", { className: "detail-panel__description-section", children: [
-    /* @__PURE__ */ jsxs9("div", { className: "detail-panel__rationale-header", children: [
+  return /* @__PURE__ */ jsxs10("div", { className: "detail-panel__description-section", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "detail-panel__rationale-header", children: [
       /* @__PURE__ */ jsx13("h4", { className: "detail-panel__section-title", style: { margin: 0 }, children: "Description" }),
       /* @__PURE__ */ jsx13(
         "button",
@@ -2887,7 +2968,7 @@ function DescriptionEditor({ modelName, description }) {
 
 // src/components/DetailPanel/GrainEditor.tsx
 import { useCallback as useCallback13, useEffect as useEffect9, useState as useState11 } from "react";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function GrainEditor({ modelName, grain }) {
   const host = useCanvasHost();
   const [editing, setEditing] = useState11(false);
@@ -2935,7 +3016,7 @@ function GrainEditor({ modelName, grain }) {
     ) });
   }
   if (editing) {
-    return /* @__PURE__ */ jsxs10("div", { className: "detail-panel__grain-section", children: [
+    return /* @__PURE__ */ jsxs11("div", { className: "detail-panel__grain-section", children: [
       /* @__PURE__ */ jsx14("div", { className: "detail-panel__rationale-header", children: /* @__PURE__ */ jsx14("h4", { className: "detail-panel__section-title", style: { margin: 0 }, children: "Grain" }) }),
       /* @__PURE__ */ jsx14(
         "textarea",
@@ -2949,14 +3030,14 @@ function GrainEditor({ modelName, grain }) {
           autoFocus: true
         }
       ),
-      /* @__PURE__ */ jsxs10("div", { className: "detail-panel__rationale-actions", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "detail-panel__rationale-actions", children: [
         /* @__PURE__ */ jsx14("button", { className: "detail-panel__button", onClick: handleSave, children: "Save" }),
         /* @__PURE__ */ jsx14("button", { className: "detail-panel__button", onClick: handleCancel, children: "Cancel" })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs10("div", { className: "detail-panel__grain-section", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "detail-panel__rationale-header", children: [
+  return /* @__PURE__ */ jsxs11("div", { className: "detail-panel__grain-section", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "detail-panel__rationale-header", children: [
       /* @__PURE__ */ jsx14("h4", { className: "detail-panel__section-title", style: { margin: 0 }, children: "Grain" }),
       /* @__PURE__ */ jsx14(
         "button",
@@ -2980,9 +3061,102 @@ function GrainEditor({ modelName, grain }) {
   ] });
 }
 
+// src/components/DetailPanel/AliasEditor.tsx
+import { useCallback as useCallback14, useEffect as useEffect10, useRef as useRef8, useState as useState12 } from "react";
+import { MODEL_ALIAS_MAX_LENGTH, MODEL_ALIAS_RULE, isValidModelAlias } from "@erd-studio/core";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function AliasEditor({ modelName, alias, readOnly }) {
+  const host = useCanvasHost();
+  const [editing, setEditing] = useState12(false);
+  const [value, setValue] = useState12(alias ?? "");
+  const settled = useRef8(false);
+  useEffect10(() => {
+    if (!editing) {
+      setValue(alias ?? "");
+    }
+  }, [alias, editing]);
+  const trimmed = value.trim();
+  const error = trimmed && !isValidModelAlias(trimmed) ? MODEL_ALIAS_RULE : null;
+  const handleSave = useCallback14(() => {
+    if (error || settled.current) return;
+    settled.current = true;
+    const next = trimmed === modelName ? "" : trimmed;
+    if (next !== (alias ?? "")) {
+      host.postMessage({ type: "updateModelAlias", payload: { modelName, alias: next } });
+    }
+    setEditing(false);
+  }, [host, modelName, alias, trimmed, error]);
+  const handleCancel = useCallback14(() => {
+    settled.current = true;
+    setValue(alias ?? "");
+    setEditing(false);
+  }, [alias]);
+  const handleKeyDown = useCallback14(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleSave();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        handleCancel();
+      }
+    },
+    [handleSave, handleCancel]
+  );
+  const startEditing = useCallback14(() => {
+    settled.current = false;
+    setEditing(true);
+  }, []);
+  if (editing) {
+    return /* @__PURE__ */ jsxs12("div", { className: "detail-panel__metadata-row detail-panel__metadata-row--alias", children: [
+      /* @__PURE__ */ jsx15("span", { className: "detail-panel__label detail-panel__label--wide", children: "Table name" }),
+      /* @__PURE__ */ jsxs12("span", { className: "detail-panel__alias-edit", children: [
+        /* @__PURE__ */ jsx15(
+          "input",
+          {
+            className: `detail-panel__alias-input${error ? " detail-panel__alias-input--error" : ""}`,
+            value,
+            placeholder: modelName,
+            maxLength: MODEL_ALIAS_MAX_LENGTH,
+            onChange: (e) => setValue(e.target.value),
+            onKeyDown: handleKeyDown,
+            onBlur: () => error ? handleCancel() : handleSave(),
+            "aria-label": "Table name (alias)",
+            "aria-invalid": error ? true : void 0,
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ jsx15("span", { className: `detail-panel__alias-hint${error ? " detail-panel__alias-hint--error" : ""}`, children: error ?? "The table dbt builds (its alias). Leave blank to use the model name." })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs12("div", { className: "detail-panel__metadata-row detail-panel__metadata-row--alias", children: [
+    /* @__PURE__ */ jsx15("span", { className: "detail-panel__label detail-panel__label--wide", children: "Table name" }),
+    /* @__PURE__ */ jsx15(
+      "span",
+      {
+        className: `detail-panel__value${alias ? "" : " detail-panel__value--muted"}`,
+        title: alias ? `Built as ${alias} (dbt alias); the model is ${modelName}` : "Same as the model name",
+        onDoubleClick: readOnly ? void 0 : startEditing,
+        children: alias || modelName
+      }
+    ),
+    !readOnly && /* @__PURE__ */ jsx15(
+      "button",
+      {
+        className: "detail-panel__rationale-edit-btn detail-panel__alias-edit-btn",
+        onClick: startEditing,
+        title: "Set the table name (alias)",
+        "aria-label": "Edit table name",
+        children: "\u270E"
+      }
+    )
+  ] });
+}
+
 // src/components/DetailPanel/RoleEditor.tsx
-import { useCallback as useCallback14 } from "react";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useCallback as useCallback15 } from "react";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var ROLE_OPTIONS = [
   { value: "conformed-dim", label: "Conformed Dimension" },
   { value: "domain-dim", label: "Domain Dimension" },
@@ -2996,7 +3170,7 @@ var ROLE_OPTIONS = [
 ];
 function RoleEditor({ modelName, modelRole }) {
   const host = useCanvasHost();
-  const handleChange = useCallback14(
+  const handleChange = useCallback15(
     (e) => {
       const value = e.target.value;
       if (value === (modelRole ?? "")) return;
@@ -3010,17 +3184,17 @@ function RoleEditor({ modelName, modelRole }) {
     },
     [host, modelName, modelRole]
   );
-  return /* @__PURE__ */ jsxs11("div", { className: "detail-panel__role-section", children: [
-    /* @__PURE__ */ jsx15("h4", { className: "detail-panel__section-title", style: { margin: 0 }, children: "Role" }),
-    /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs13("div", { className: "detail-panel__role-section", children: [
+    /* @__PURE__ */ jsx16("h4", { className: "detail-panel__section-title", style: { margin: 0 }, children: "Role" }),
+    /* @__PURE__ */ jsxs13(
       "select",
       {
         className: "detail-panel__role-select",
         value: modelRole ?? "",
         onChange: handleChange,
         children: [
-          /* @__PURE__ */ jsx15("option", { value: "", children: "No role" }),
-          ROLE_OPTIONS.map((opt) => /* @__PURE__ */ jsx15("option", { value: opt.value, children: opt.label }, opt.value))
+          /* @__PURE__ */ jsx16("option", { value: "", children: "No role" }),
+          ROLE_OPTIONS.map((opt) => /* @__PURE__ */ jsx16("option", { value: opt.value, children: opt.label }, opt.value))
         ]
       }
     )
@@ -3028,15 +3202,15 @@ function RoleEditor({ modelName, modelRole }) {
 }
 
 // src/components/DetailPanel/ColumnEditor.tsx
-import { useCallback as useCallback19, useEffect as useEffect12, useMemo as useMemo5, useState as useState16 } from "react";
+import { useCallback as useCallback21, useEffect as useEffect14, useMemo as useMemo5, useState as useState18 } from "react";
 
 // src/components/common/ColumnRowEditor.tsx
-import { useCallback as useCallback17, useEffect as useEffect11, useRef as useRef9, useState as useState14 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect12, useRef as useRef10, useState as useState15 } from "react";
 
 // src/components/common/KeyBadgeGroup.tsx
-import { useCallback as useCallback15, useEffect as useEffect10, useLayoutEffect, useRef as useRef8, useState as useState12 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect11, useLayoutEffect, useRef as useRef9, useState as useState13 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 var KEY_CONFIG = [
   { type: "PK", label: "Primary Key", description: "Unique identifier for each row" },
   { type: "FK", label: "Foreign Key", description: "References another table" },
@@ -3054,11 +3228,11 @@ function KeyBadgeGroup({
   showMultiplePKWarning = false
 }) {
   const viewer = useIsViewer();
-  const [isOpen, setIsOpen] = useState12(false);
-  const [dropdownPos, setDropdownPos] = useState12({ top: 0, left: 0 });
-  const containerRef = useRef8(null);
-  const triggerRef = useRef8(null);
-  const dropdownRef = useRef8(null);
+  const [isOpen, setIsOpen] = useState13(false);
+  const [dropdownPos, setDropdownPos] = useState13({ top: 0, left: 0 });
+  const containerRef = useRef9(null);
+  const triggerRef = useRef9(null);
+  const dropdownRef = useRef9(null);
   const isEditable = mode === "editable" && (onTogglePK || onToggleFK || onToggleNK);
   useLayoutEffect(() => {
     if (isOpen && triggerRef.current) {
@@ -3069,7 +3243,7 @@ function KeyBadgeGroup({
       });
     }
   }, [isOpen]);
-  useEffect10(() => {
+  useEffect11(() => {
     const handleClickOutside = (e) => {
       const target = e.target;
       const clickedInContainer = containerRef.current?.contains(target);
@@ -3084,7 +3258,7 @@ function KeyBadgeGroup({
     }
     return void 0;
   }, [isOpen]);
-  const handleKeyDown = useCallback15(
+  const handleKeyDown = useCallback16(
     (e) => {
       if (e.key === "Escape") {
         e.preventDefault();
@@ -3107,19 +3281,19 @@ function KeyBadgeGroup({
     FK: isForeignKey,
     NK: isNaturalKey
   };
-  const handleToggle = useCallback15(() => {
+  const handleToggle = useCallback16(() => {
     if (isEditable) {
       setIsOpen((prev) => !prev);
     }
   }, [isEditable]);
-  const handleOptionClick = useCallback15(
+  const handleOptionClick = useCallback16(
     (type, e) => {
       e.stopPropagation();
       toggleHandlers[type]?.();
     },
     [toggleHandlers]
   );
-  const warningIcon = showMultiplePKWarning && isPrimaryKey ? /* @__PURE__ */ jsx16(
+  const warningIcon = showMultiplePKWarning && isPrimaryKey ? /* @__PURE__ */ jsx17(
     "span",
     {
       className: "key-badge-group__warning",
@@ -3127,14 +3301,14 @@ function KeyBadgeGroup({
       children: "!"
     }
   ) : null;
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       ref: containerRef,
       className: `key-badge-group ${isOpen ? "key-badge-group--open" : ""} ${isEditable ? "key-badge-group--editable" : ""}`,
       onKeyDown: handleKeyDown,
       children: [
-        /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsxs14(
           "button",
           {
             ref: triggerRef,
@@ -3146,7 +3320,7 @@ function KeyBadgeGroup({
             "aria-expanded": isOpen,
             title: isEditable ? "Click to edit key types" : void 0,
             children: [
-              selectedKeys.length > 0 ? /* @__PURE__ */ jsx16("span", { className: "key-badge-group__selected", children: selectedKeys.map((type) => /* @__PURE__ */ jsx16(
+              selectedKeys.length > 0 ? /* @__PURE__ */ jsx17("span", { className: "key-badge-group__selected", children: selectedKeys.map((type) => /* @__PURE__ */ jsx17(
                 KeyBadge,
                 {
                   type,
@@ -3155,17 +3329,17 @@ function KeyBadgeGroup({
                   status
                 },
                 type
-              )) }) : /* @__PURE__ */ jsx16("span", { className: "key-badge-group__empty", children: "\u2014" }),
-              isEditable ? /* @__PURE__ */ jsx16("span", { className: "key-badge-group__arrow", children: "\u25BE" }) : viewer ? (
+              )) }) : /* @__PURE__ */ jsx17("span", { className: "key-badge-group__empty", children: "\u2014" }),
+              isEditable ? /* @__PURE__ */ jsx17("span", { className: "key-badge-group__arrow", children: "\u25BE" }) : viewer ? (
                 // Viewer: keep the arrow's space so rows line up with the editor.
-                /* @__PURE__ */ jsx16("span", { className: "key-badge-group__arrow", "aria-hidden": true, style: { visibility: "hidden" }, children: "\u25BE" })
+                /* @__PURE__ */ jsx17("span", { className: "key-badge-group__arrow", "aria-hidden": true, style: { visibility: "hidden" }, children: "\u25BE" })
               ) : null,
               warningIcon
             ]
           }
         ),
         isOpen && createPortal4(
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(
             "div",
             {
               ref: dropdownRef,
@@ -3174,7 +3348,7 @@ function KeyBadgeGroup({
               children: KEY_CONFIG.map(({ type, label, description }) => {
                 const isActive = activeStates[type];
                 const handler = toggleHandlers[type];
-                return /* @__PURE__ */ jsxs12(
+                return /* @__PURE__ */ jsxs14(
                   "div",
                   {
                     className: `key-badge-group__option ${isActive ? "key-badge-group__option--active" : ""}`,
@@ -3189,8 +3363,8 @@ function KeyBadgeGroup({
                       }
                     },
                     children: [
-                      /* @__PURE__ */ jsx16("span", { className: "key-badge-group__checkbox", children: isActive ? "\u2713" : "" }),
-                      /* @__PURE__ */ jsx16(
+                      /* @__PURE__ */ jsx17("span", { className: "key-badge-group__checkbox", children: isActive ? "\u2713" : "" }),
+                      /* @__PURE__ */ jsx17(
                         KeyBadge,
                         {
                           type,
@@ -3199,9 +3373,9 @@ function KeyBadgeGroup({
                           status
                         }
                       ),
-                      /* @__PURE__ */ jsxs12("span", { className: "key-badge-group__label", children: [
-                        /* @__PURE__ */ jsx16("span", { className: "key-badge-group__label-text", children: label }),
-                        /* @__PURE__ */ jsx16("span", { className: "key-badge-group__label-desc", children: description })
+                      /* @__PURE__ */ jsxs14("span", { className: "key-badge-group__label", children: [
+                        /* @__PURE__ */ jsx17("span", { className: "key-badge-group__label-text", children: label }),
+                        /* @__PURE__ */ jsx17("span", { className: "key-badge-group__label-desc", children: description })
                       ] })
                     ]
                   },
@@ -3218,13 +3392,13 @@ function KeyBadgeGroup({
 }
 
 // src/hooks/useFocusWithinRow.ts
-import { useCallback as useCallback16, useState as useState13 } from "react";
+import { useCallback as useCallback17, useState as useState14 } from "react";
 function useFocusWithinRow(onFocusLeave) {
-  const [isFocusWithin, setIsFocusWithin] = useState13(false);
-  const handleFocus = useCallback16(() => {
+  const [isFocusWithin, setIsFocusWithin] = useState14(false);
+  const handleFocus = useCallback17(() => {
     setIsFocusWithin(true);
   }, []);
-  const handleBlur = useCallback16(
+  const handleBlur = useCallback17(
     (e) => {
       const currentTarget = e.currentTarget;
       requestAnimationFrame(() => {
@@ -3246,17 +3420,17 @@ function useFocusWithinRow(onFocusLeave) {
 }
 
 // src/components/common/ColumnRowEditor.tsx
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function validateColumnName(name, existingNames, currentName) {
   const trimmed = name.trim();
   if (!trimmed) {
     return "Name is required";
   }
-  if (!/^[a-z0-9_]+$/.test(trimmed)) {
-    return "Use lowercase letters, numbers, underscores";
+  if (!/^[A-Za-z0-9_]+$/.test(trimmed)) {
+    return "Use only letters, numbers, underscores";
   }
   const otherNames = existingNames.filter((n) => n !== currentName);
-  if (otherNames.includes(trimmed)) {
+  if (otherNames.some((n) => n.toLowerCase() === trimmed.toLowerCase())) {
     return "Column name already exists";
   }
   return null;
@@ -3282,9 +3456,10 @@ function ColumnRowEditor({
   isBeingDragged = false,
   isSelected = false,
   onSelect,
-  isEditingActive = false
+  isEditingActive = false,
+  metaSlot
 }) {
-  const [localColumn, setLocalColumn] = useState14({
+  const [localColumn, setLocalColumn] = useState15({
     name: column.name,
     dataType: column.dataType,
     description: column.description,
@@ -3294,18 +3469,18 @@ function ColumnRowEditor({
     scdType: column.scdType,
     additiveType: column.additiveType
   });
-  const [editingField, setEditingField] = useState14(
+  const [editingField, setEditingField] = useState15(
     mode === "new" ? "name" : null
   );
-  const [validationError, setValidationError] = useState14(null);
-  const [confirmingDelete, setConfirmingDelete] = useState14(false);
-  const deleteTimerRef = useRef9(null);
-  const nameInputRef = useRef9(null);
-  const descriptionInputRef = useRef9(null);
-  const isSavingRef = useRef9(false);
-  const isSwitchingFieldRef = useRef9(false);
-  const skipNextBlurSaveRef = useRef9(false);
-  useEffect11(() => {
+  const [validationError, setValidationError] = useState15(null);
+  const [confirmingDelete, setConfirmingDelete] = useState15(false);
+  const deleteTimerRef = useRef10(null);
+  const nameInputRef = useRef10(null);
+  const descriptionInputRef = useRef10(null);
+  const isSavingRef = useRef10(false);
+  const isSwitchingFieldRef = useRef10(false);
+  const skipNextBlurSaveRef = useRef10(false);
+  useEffect12(() => {
     if (!isSavingRef.current) {
       setLocalColumn({
         name: column.name,
@@ -3329,12 +3504,12 @@ function ColumnRowEditor({
     column.scdType,
     column.additiveType
   ]);
-  useEffect11(() => {
+  useEffect12(() => {
     return () => {
       if (deleteTimerRef.current) clearTimeout(deleteTimerRef.current);
     };
   }, []);
-  useEffect11(() => {
+  useEffect12(() => {
     if (isEditingActive && !editingField && mode !== "readonly") {
       isSwitchingFieldRef.current = true;
       setEditingField("name");
@@ -3344,7 +3519,7 @@ function ColumnRowEditor({
       });
     }
   }, [isEditingActive, editingField, mode]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (editingField === "name" && nameInputRef.current) {
       nameInputRef.current.focus();
       nameInputRef.current.select();
@@ -3355,7 +3530,7 @@ function ColumnRowEditor({
       descriptionInputRef.current.setSelectionRange(len, len);
     }
   }, [editingField]);
-  const handleSave = useCallback17(() => {
+  const handleSave = useCallback18(() => {
     if (mode === "readonly") return;
     const error = validateColumnName(
       localColumn.name,
@@ -3396,7 +3571,7 @@ function ColumnRowEditor({
       }
     }
   });
-  const handleFieldClick = useCallback17(
+  const handleFieldClick = useCallback18(
     (field) => {
       if (mode === "readonly") return;
       isSwitchingFieldRef.current = true;
@@ -3411,7 +3586,7 @@ function ColumnRowEditor({
     },
     [mode]
   );
-  const handleKeyDown = useCallback17(
+  const handleKeyDown = useCallback18(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -3439,7 +3614,7 @@ function ColumnRowEditor({
     },
     [mode, column, handleSave, onCancel]
   );
-  const handleDataTypeChange = useCallback17(
+  const handleDataTypeChange = useCallback18(
     (newType) => {
       setLocalColumn((prev) => ({ ...prev, dataType: newType }));
       setEditingField(null);
@@ -3467,7 +3642,7 @@ function ColumnRowEditor({
     },
     [mode, localColumn, existingColumnNames, column.name, onUpdate]
   );
-  const handleDeleteClick = useCallback17(
+  const handleDeleteClick = useCallback18(
     (e) => {
       e.stopPropagation();
       if (confirmingDelete) {
@@ -3483,7 +3658,7 @@ function ColumnRowEditor({
     },
     [confirmingDelete, onDelete]
   );
-  const handleCancelDelete = useCallback17(
+  const handleCancelDelete = useCallback18(
     (e) => {
       e.stopPropagation();
       if (deleteTimerRef.current) clearTimeout(deleteTimerRef.current);
@@ -3491,7 +3666,7 @@ function ColumnRowEditor({
     },
     []
   );
-  const handleScdTypeChange = useCallback17(
+  const handleScdTypeChange = useCallback18(
     (e) => {
       const raw = e.target.value;
       const value = raw === "" ? void 0 : Number(raw);
@@ -3514,7 +3689,7 @@ function ColumnRowEditor({
     },
     [mode, localColumn, onUpdate]
   );
-  const handleAdditiveTypeChange = useCallback17(
+  const handleAdditiveTypeChange = useCallback18(
     (e) => {
       const value = e.target.value || void 0;
       setLocalColumn((prev) => ({ ...prev, additiveType: value }));
@@ -3536,7 +3711,7 @@ function ColumnRowEditor({
     },
     [mode, localColumn, onUpdate]
   );
-  const handleChevronClick = useCallback17(
+  const handleChevronClick = useCallback18(
     (e) => {
       e.stopPropagation();
       onToggleExpand?.({ altKey: e.altKey });
@@ -3548,7 +3723,7 @@ function ColumnRowEditor({
   const hasDescription = Boolean(localColumn.description?.trim());
   const isDimRole = modelRole?.includes("dim") || modelRole === "reference";
   const isFactRole = modelRole?.includes("fact") || modelRole?.includes("snapshot");
-  const handleRowClick = useCallback17(
+  const handleRowClick = useCallback18(
     (e) => {
       const target = e.target;
       if (target.closest("button") || target.closest("input") || target.closest("select") || target.closest("textarea") || target.closest(".key-badge-group")) {
@@ -3569,9 +3744,9 @@ function ColumnRowEditor({
     isDragOver && "column-row-editor--drag-over",
     isBeingDragged && "column-row-editor--dragging"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs13("div", { className: rowClasses, ...rowProps, onClick: mode !== "new" ? handleRowClick : void 0, children: [
-    /* @__PURE__ */ jsxs13("div", { className: "column-row-editor__main", children: [
-      /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs15("div", { className: rowClasses, ...rowProps, onClick: mode !== "new" ? handleRowClick : void 0, children: [
+    /* @__PURE__ */ jsxs15("div", { className: "column-row-editor__main", children: [
+      /* @__PURE__ */ jsx18(
         "span",
         {
           className: `column-row-editor__drag-handle${!dragHandleProps ? " column-row-editor__drag-handle--hidden" : ""}`,
@@ -3579,7 +3754,7 @@ function ColumnRowEditor({
           children: "\u283F"
         }
       ),
-      onToggleExpand && /* @__PURE__ */ jsx17(
+      onToggleExpand && /* @__PURE__ */ jsx18(
         "button",
         {
           className: "column-row-editor__chevron",
@@ -3590,7 +3765,7 @@ function ColumnRowEditor({
           children: expanded ? "\u25BE" : "\u25B8"
         }
       ),
-      showIndicators && /* @__PURE__ */ jsx17(
+      showIndicators && /* @__PURE__ */ jsx18(
         KeyBadgeGroup,
         {
           isPrimaryKey: column.isPrimaryKey ?? false,
@@ -3613,7 +3788,7 @@ function ColumnRowEditor({
           showMultiplePKWarning
         }
       ),
-      isEditing && editingField === "name" ? /* @__PURE__ */ jsx17(
+      isEditing && editingField === "name" ? /* @__PURE__ */ jsx18(
         "input",
         {
           ref: nameInputRef,
@@ -3624,7 +3799,7 @@ function ColumnRowEditor({
           onKeyDown: handleKeyDown,
           placeholder: "column_name"
         }
-      ) : /* @__PURE__ */ jsx17(
+      ) : /* @__PURE__ */ jsx18(
         "span",
         {
           className: "column-row-editor__name",
@@ -3633,10 +3808,10 @@ function ColumnRowEditor({
             handleFieldClick("name");
           },
           title: mode !== "readonly" ? "Double-click to edit" : void 0,
-          children: localColumn.name || /* @__PURE__ */ jsx17("em", { className: "column-row-editor__placeholder", children: "column_name" })
+          children: localColumn.name || /* @__PURE__ */ jsx18("em", { className: "column-row-editor__placeholder", children: "column_name" })
         }
       ),
-      !expanded && hasDescription && /* @__PURE__ */ jsx17(
+      !expanded && hasDescription && /* @__PURE__ */ jsx18(
         "span",
         {
           className: "column-row-editor__info-badge",
@@ -3645,7 +3820,7 @@ function ColumnRowEditor({
           children: "\u24D8"
         }
       ),
-      isEditing && editingField === "dataType" ? /* @__PURE__ */ jsx17(
+      isEditing && editingField === "dataType" ? /* @__PURE__ */ jsx18(
         DataTypeSelect,
         {
           value: localColumn.dataType,
@@ -3657,7 +3832,7 @@ function ColumnRowEditor({
           className: "column-row-editor__type-select",
           autoOpen: true
         }
-      ) : /* @__PURE__ */ jsx17(
+      ) : /* @__PURE__ */ jsx18(
         "span",
         {
           className: "column-row-editor__type",
@@ -3669,8 +3844,8 @@ function ColumnRowEditor({
           children: localColumn.dataType
         }
       ),
-      showDelete && mode !== "readonly" && mode !== "new" && (confirmingDelete ? /* @__PURE__ */ jsxs13("span", { className: "column-row-editor__delete-confirm", children: [
-        /* @__PURE__ */ jsx17(
+      showDelete && mode !== "readonly" && mode !== "new" && (confirmingDelete ? /* @__PURE__ */ jsxs15("span", { className: "column-row-editor__delete-confirm", children: [
+        /* @__PURE__ */ jsx18(
           "button",
           {
             className: "column-row-editor__delete-confirm-yes",
@@ -3680,7 +3855,7 @@ function ColumnRowEditor({
             children: "Delete?"
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           "button",
           {
             className: "column-row-editor__delete-confirm-no",
@@ -3690,7 +3865,7 @@ function ColumnRowEditor({
             children: "\u2715"
           }
         )
-      ] }) : /* @__PURE__ */ jsx17(
+      ] }) : /* @__PURE__ */ jsx18(
         "button",
         {
           className: "column-row-editor__delete",
@@ -3701,8 +3876,8 @@ function ColumnRowEditor({
         }
       ))
     ] }),
-    expanded && /* @__PURE__ */ jsxs13("div", { className: "column-row-editor__description-area", children: [
-      editingField === "description" ? /* @__PURE__ */ jsx17(
+    expanded && /* @__PURE__ */ jsxs15("div", { className: "column-row-editor__description-area", children: [
+      editingField === "description" ? /* @__PURE__ */ jsx18(
         "textarea",
         {
           ref: descriptionInputRef,
@@ -3723,7 +3898,7 @@ function ColumnRowEditor({
           placeholder: "Add a description for this column...",
           rows: 2
         }
-      ) : /* @__PURE__ */ jsx17(
+      ) : /* @__PURE__ */ jsx18(
         "div",
         {
           className: `column-row-editor__description-text ${!hasDescription ? "column-row-editor__description-text--empty" : ""}`,
@@ -3732,9 +3907,9 @@ function ColumnRowEditor({
           children: localColumn.description || (mode !== "readonly" ? "\u270F Add description..." : "No description")
         }
       ),
-      isDimRole && /* @__PURE__ */ jsxs13("div", { className: "column-row-editor__metadata-row", children: [
-        /* @__PURE__ */ jsx17("label", { className: "column-row-editor__metadata-label", children: "SCD Type" }),
-        /* @__PURE__ */ jsxs13(
+      isDimRole && /* @__PURE__ */ jsxs15("div", { className: "column-row-editor__metadata-row", children: [
+        /* @__PURE__ */ jsx18("label", { className: "column-row-editor__metadata-label", children: "SCD Type" }),
+        /* @__PURE__ */ jsxs15(
           "select",
           {
             className: "column-row-editor__metadata-select",
@@ -3742,17 +3917,17 @@ function ColumnRowEditor({
             onChange: handleScdTypeChange,
             disabled: mode === "readonly",
             children: [
-              /* @__PURE__ */ jsx17("option", { value: "", children: "Not set" }),
-              /* @__PURE__ */ jsx17("option", { value: "0", children: "Type 0 \u2014 Never changes" }),
-              /* @__PURE__ */ jsx17("option", { value: "1", children: "Type 1 \u2014 Overwrite" }),
-              /* @__PURE__ */ jsx17("option", { value: "2", children: "Type 2 \u2014 Track history" })
+              /* @__PURE__ */ jsx18("option", { value: "", children: "Not set" }),
+              /* @__PURE__ */ jsx18("option", { value: "0", children: "Type 0 \u2014 Never changes" }),
+              /* @__PURE__ */ jsx18("option", { value: "1", children: "Type 1 \u2014 Overwrite" }),
+              /* @__PURE__ */ jsx18("option", { value: "2", children: "Type 2 \u2014 Track history" })
             ]
           }
         )
       ] }),
-      isFactRole && /* @__PURE__ */ jsxs13("div", { className: "column-row-editor__metadata-row", children: [
-        /* @__PURE__ */ jsx17("label", { className: "column-row-editor__metadata-label", children: "Additive" }),
-        /* @__PURE__ */ jsxs13(
+      isFactRole && /* @__PURE__ */ jsxs15("div", { className: "column-row-editor__metadata-row", children: [
+        /* @__PURE__ */ jsx18("label", { className: "column-row-editor__metadata-label", children: "Additive" }),
+        /* @__PURE__ */ jsxs15(
           "select",
           {
             className: "column-row-editor__metadata-select",
@@ -3760,22 +3935,23 @@ function ColumnRowEditor({
             onChange: handleAdditiveTypeChange,
             disabled: mode === "readonly",
             children: [
-              /* @__PURE__ */ jsx17("option", { value: "", children: "Not set" }),
-              /* @__PURE__ */ jsx17("option", { value: "additive", children: "Additive \u2014 Sum across all dims" }),
-              /* @__PURE__ */ jsx17("option", { value: "semi-additive", children: "Semi-additive \u2014 Not across time" }),
-              /* @__PURE__ */ jsx17("option", { value: "non-additive", children: "Non-additive \u2014 Store components" })
+              /* @__PURE__ */ jsx18("option", { value: "", children: "Not set" }),
+              /* @__PURE__ */ jsx18("option", { value: "additive", children: "Additive \u2014 Sum across all dims" }),
+              /* @__PURE__ */ jsx18("option", { value: "semi-additive", children: "Semi-additive \u2014 Not across time" }),
+              /* @__PURE__ */ jsx18("option", { value: "non-additive", children: "Non-additive \u2014 Store components" })
             ]
           }
         )
-      ] })
+      ] }),
+      metaSlot
     ] }),
-    validationError && /* @__PURE__ */ jsx17("span", { className: "column-row-editor__error", children: validationError })
+    validationError && /* @__PURE__ */ jsx18("span", { className: "column-row-editor__error", children: validationError })
   ] });
 }
 
 // src/components/DetailPanel/BulkColumnActions.tsx
-import { useCallback as useCallback18, useState as useState15 } from "react";
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useCallback as useCallback19, useState as useState16 } from "react";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function BulkColumnActions({
   modelName,
   selectedColumns,
@@ -3783,7 +3959,7 @@ function BulkColumnActions({
   onClearSelection
 }) {
   const send = useSend();
-  const [showTypeSelect, setShowTypeSelect] = useState15(false);
+  const [showTypeSelect, setShowTypeSelect] = useState16(false);
   const selectedColumnData = columns.filter((c) => selectedColumns.includes(c.name));
   const keyMajority = (key) => {
     const count = selectedColumnData.filter((c) => c[key]).length;
@@ -3792,7 +3968,7 @@ function BulkColumnActions({
   const majorityPK = keyMajority("isPrimaryKey");
   const majorityFK = keyMajority("isForeignKey");
   const majorityNK = keyMajority("isNaturalKey");
-  const handleBulkDelete = useCallback18(() => {
+  const handleBulkDelete = useCallback19(() => {
     for (const colName of selectedColumns) {
       send({
         type: "removeColumn",
@@ -3801,7 +3977,7 @@ function BulkColumnActions({
     }
     onClearSelection();
   }, [selectedColumns, modelName, send, onClearSelection]);
-  const handleBulkToggleKey = useCallback18(
+  const handleBulkToggleKey = useCallback19(
     (keyType, currentMajority) => {
       const newValue = !currentMajority;
       for (const colName of selectedColumns) {
@@ -3813,7 +3989,7 @@ function BulkColumnActions({
     },
     [selectedColumns, modelName, send]
   );
-  const handleBulkSetType = useCallback18(
+  const handleBulkSetType = useCallback19(
     (newType) => {
       for (const col of selectedColumnData) {
         send({
@@ -3838,12 +4014,12 @@ function BulkColumnActions({
     },
     [selectedColumnData, modelName, send]
   );
-  return /* @__PURE__ */ jsxs14("div", { className: "bulk-column-actions", children: [
-    /* @__PURE__ */ jsxs14("span", { className: "bulk-column-actions__count", children: [
+  return /* @__PURE__ */ jsxs16("div", { className: "bulk-column-actions", children: [
+    /* @__PURE__ */ jsxs16("span", { className: "bulk-column-actions__count", children: [
       selectedColumns.length,
       " selected"
     ] }),
-    /* @__PURE__ */ jsxs14(
+    /* @__PURE__ */ jsxs16(
       "button",
       {
         className: "bulk-column-actions__btn bulk-column-actions__btn--danger",
@@ -3856,8 +4032,8 @@ function BulkColumnActions({
         ]
       }
     ),
-    /* @__PURE__ */ jsx18("div", { className: "bulk-column-actions__divider" }),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19("div", { className: "bulk-column-actions__divider" }),
+    /* @__PURE__ */ jsx19(
       "button",
       {
         className: `bulk-column-actions__key-btn ${majorityPK ? "bulk-column-actions__key-btn--active" : ""}`,
@@ -3866,7 +4042,7 @@ function BulkColumnActions({
         children: "PK"
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       "button",
       {
         className: `bulk-column-actions__key-btn ${majorityFK ? "bulk-column-actions__key-btn--active" : ""}`,
@@ -3875,7 +4051,7 @@ function BulkColumnActions({
         children: "FK"
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       "button",
       {
         className: `bulk-column-actions__key-btn ${majorityNK ? "bulk-column-actions__key-btn--active" : ""}`,
@@ -3884,8 +4060,8 @@ function BulkColumnActions({
         children: "NK"
       }
     ),
-    /* @__PURE__ */ jsx18("div", { className: "bulk-column-actions__divider" }),
-    showTypeSelect ? /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19("div", { className: "bulk-column-actions__divider" }),
+    showTypeSelect ? /* @__PURE__ */ jsx19(
       DataTypeSelect,
       {
         value: "",
@@ -3894,7 +4070,7 @@ function BulkColumnActions({
         className: "bulk-column-actions__type-select",
         autoOpen: true
       }
-    ) : /* @__PURE__ */ jsx18(
+    ) : /* @__PURE__ */ jsx19(
       "button",
       {
         className: "bulk-column-actions__btn",
@@ -3903,7 +4079,7 @@ function BulkColumnActions({
         children: "Set Type"
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(
       "button",
       {
         className: "bulk-column-actions__btn bulk-column-actions__btn--clear",
@@ -3915,8 +4091,194 @@ function BulkColumnActions({
   ] });
 }
 
+// src/components/DetailPanel/MetaEditor.tsx
+import { useCallback as useCallback20, useEffect as useEffect13, useRef as useRef11, useState as useState17 } from "react";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+var hasKey = (meta, key) => !!meta && Object.prototype.hasOwnProperty.call(meta, key);
+function MetaEditor({ modelName, columnName, meta, readOnly, compact }) {
+  const host = useCanvasHost();
+  const viewer = useIsViewer();
+  const editable = !readOnly && !viewer;
+  const entries = Object.entries(meta ?? {});
+  const [editingKey, setEditingKey] = useState17(null);
+  const [editValue, setEditValue] = useState17("");
+  const [adding, setAdding] = useState17(false);
+  const [newKey, setNewKey] = useState17("");
+  const [newValue, setNewValue] = useState17("");
+  const [error, setError] = useState17(null);
+  const savedRef = useRef11(false);
+  useEffect13(() => {
+    if (editingKey !== null && !hasKey(meta, editingKey)) setEditingKey(null);
+  }, [meta, editingKey]);
+  const post = useCallback20(
+    (patch) => {
+      host.postMessage({
+        type: "updateMeta",
+        payload: { modelName, ...columnName !== void 0 ? { columnName } : {}, ...patch }
+      });
+    },
+    [host, modelName, columnName]
+  );
+  const startEdit = useCallback20((key, value) => {
+    savedRef.current = false;
+    setEditingKey(key);
+    setEditValue(value);
+  }, []);
+  const saveValue = useCallback20(() => {
+    if (editingKey === null || savedRef.current) return;
+    savedRef.current = true;
+    if (editValue !== meta?.[editingKey]) post({ set: { [editingKey]: editValue } });
+    setEditingKey(null);
+  }, [editingKey, editValue, meta, post]);
+  const cancelEdit = useCallback20(() => {
+    savedRef.current = true;
+    setEditingKey(null);
+  }, []);
+  const saveNew = useCallback20(() => {
+    const key = newKey.trim();
+    if (!key) {
+      setError("Key is required");
+      return;
+    }
+    if (hasKey(meta, key)) {
+      setError(`"${key}" already exists`);
+      return;
+    }
+    post({ set: { [key]: newValue } });
+    setAdding(false);
+    setNewKey("");
+    setNewValue("");
+    setError(null);
+  }, [newKey, newValue, meta, post]);
+  const cancelNew = useCallback20(() => {
+    setAdding(false);
+    setNewKey("");
+    setNewValue("");
+    setError(null);
+  }, []);
+  if (entries.length === 0 && !editable) return null;
+  const block = compact ? "meta-editor meta-editor--compact" : "meta-editor";
+  return /* @__PURE__ */ jsxs17("div", { className: block, children: [
+    !compact && /* @__PURE__ */ jsx20("h4", { className: "detail-panel__section-title meta-editor__title", children: "Metadata" }),
+    compact && entries.length > 0 && /* @__PURE__ */ jsx20("span", { className: "meta-editor__label", children: "Metadata" }),
+    entries.length > 0 && /* @__PURE__ */ jsx20("dl", { className: "meta-editor__list", children: entries.map(([key, value]) => {
+      const text = typeof value === "string";
+      const editingThis = editingKey === key;
+      return /* @__PURE__ */ jsxs17("div", { className: "meta-editor__row", children: [
+        /* @__PURE__ */ jsx20("dt", { className: "meta-editor__key", title: key, children: key }),
+        /* @__PURE__ */ jsx20("dd", { className: "meta-editor__value", children: editingThis ? /* @__PURE__ */ jsx20(
+          "input",
+          {
+            className: "meta-editor__input",
+            value: editValue,
+            onChange: (e) => setEditValue(e.target.value),
+            onBlur: saveValue,
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                saveValue();
+              }
+              if (e.key === "Escape") {
+                e.preventDefault();
+                cancelEdit();
+              }
+            },
+            "aria-label": `Value of ${key}`,
+            autoFocus: true
+          }
+        ) : /* @__PURE__ */ jsx20(
+          "span",
+          {
+            className: `meta-editor__text${text ? "" : " meta-editor__text--structured"}`,
+            title: editable && !text ? "Edit nested values in the model file" : formatMetaValue(value),
+            onDoubleClick: editable && text ? () => startEdit(key, value) : void 0,
+            children: formatMetaValue(value)
+          }
+        ) }),
+        editable && !editingThis && /* @__PURE__ */ jsxs17("span", { className: "meta-editor__actions", children: [
+          text && /* @__PURE__ */ jsx20(
+            "button",
+            {
+              className: "meta-editor__icon-btn",
+              onClick: () => startEdit(key, value),
+              title: `Edit ${key}`,
+              "aria-label": `Edit ${key}`,
+              children: "\u270E"
+            }
+          ),
+          /* @__PURE__ */ jsx20(
+            "button",
+            {
+              className: "meta-editor__icon-btn",
+              onClick: () => post({ remove: [key] }),
+              title: `Remove ${key}`,
+              "aria-label": `Remove ${key}`,
+              children: "\xD7"
+            }
+          )
+        ] })
+      ] }, key);
+    }) }),
+    editable && (adding ? /* @__PURE__ */ jsxs17("div", { className: "meta-editor__new", children: [
+      /* @__PURE__ */ jsx20(
+        "input",
+        {
+          className: "meta-editor__input meta-editor__input--key",
+          value: newKey,
+          onChange: (e) => {
+            setNewKey(e.target.value);
+            setError(null);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Escape") {
+              e.preventDefault();
+              cancelNew();
+            }
+          },
+          placeholder: "key (e.g. owner)",
+          "aria-label": "Metadata key",
+          autoFocus: true
+        }
+      ),
+      /* @__PURE__ */ jsx20(
+        "input",
+        {
+          className: "meta-editor__input",
+          value: newValue,
+          onChange: (e) => setNewValue(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              saveNew();
+            }
+            if (e.key === "Escape") {
+              e.preventDefault();
+              cancelNew();
+            }
+          },
+          placeholder: "value",
+          "aria-label": "Metadata value"
+        }
+      ),
+      /* @__PURE__ */ jsxs17("div", { className: "meta-editor__new-actions", children: [
+        /* @__PURE__ */ jsx20("button", { className: "detail-panel__button", onClick: saveNew, children: "Add" }),
+        /* @__PURE__ */ jsx20("button", { className: "detail-panel__button", onClick: cancelNew, children: "Cancel" })
+      ] }),
+      error && /* @__PURE__ */ jsx20("span", { className: "meta-editor__error", children: error })
+    ] }) : /* @__PURE__ */ jsx20(
+      "button",
+      {
+        className: "detail-panel__rationale-add-btn meta-editor__add-btn",
+        onClick: () => setAdding(true),
+        title: "Add structured metadata such as owner, source system or lineage",
+        children: "+ Add Metadata"
+      }
+    ))
+  ] });
+}
+
 // src/components/DetailPanel/ColumnEditor.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
   const send = useSend();
   const viewer = useIsViewer();
@@ -3926,14 +4288,14 @@ function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
   const toggleColumnSelection = useEditorStore((s) => s.toggleColumnSelection);
   const selectColumnRange = useEditorStore((s) => s.selectColumnRange);
   const clearColumnSelection = useEditorStore((s) => s.clearColumnSelection);
-  const [isAddingColumn, setIsAddingColumn] = useState16(false);
-  const [expandedColumns, setExpandedColumns] = useState16(/* @__PURE__ */ new Set());
+  const [isAddingColumn, setIsAddingColumn] = useState18(false);
+  const [expandedColumns, setExpandedColumns] = useState18(/* @__PURE__ */ new Set());
   const existingColumnNames = useMemo5(
     () => columns.map((c) => c.name),
     [columns]
   );
   const isEditable = !readOnly;
-  const handleReorder = useCallback19(
+  const handleReorder = useCallback21(
     (orderedNames) => {
       send({
         type: "reorderColumns",
@@ -3946,11 +4308,11 @@ function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
     columns,
     onReorder: handleReorder
   });
-  const handleAddColumn = useCallback19(() => {
+  const handleAddColumn = useCallback21(() => {
     if (isAddingColumn) return;
     setIsAddingColumn(true);
   }, [isAddingColumn]);
-  const handleColumnUpdate = useCallback19(
+  const handleColumnUpdate = useCallback21(
     (oldName, updated, isNew) => {
       if (isNew) {
         const { scdType, additiveType, ...rest } = updated;
@@ -3973,7 +4335,7 @@ function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
     },
     [send, modelName]
   );
-  const handleColumnDelete = useCallback19(
+  const handleColumnDelete = useCallback21(
     (columnName) => {
       send({
         type: "removeColumn",
@@ -3982,16 +4344,16 @@ function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
     },
     [send, modelName]
   );
-  const handleCancelNew = useCallback19(() => {
+  const handleCancelNew = useCallback21(() => {
     setIsAddingColumn(false);
   }, []);
-  const handleExpandAll = useCallback19(() => {
+  const handleExpandAll = useCallback21(() => {
     setExpandedColumns(new Set(columns.map((c) => c.name)));
   }, [columns]);
-  const handleCollapseAll = useCallback19(() => {
+  const handleCollapseAll = useCallback21(() => {
     setExpandedColumns(/* @__PURE__ */ new Set());
   }, []);
-  const handleToggleExpand = useCallback19((columnName, opts) => {
+  const handleToggleExpand = useCallback21((columnName, opts) => {
     if (opts?.altKey) {
       setExpandedColumns((prev) => prev.has(columnName) ? /* @__PURE__ */ new Set() : new Set(columns.map((c) => c.name)));
     } else {
@@ -4006,7 +4368,7 @@ function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
       });
     }
   }, [columns]);
-  useEffect12(() => {
+  useEffect14(() => {
     const currentNames = new Set(columns.map((c) => c.name));
     const pruned = selectedColumns.filter((n) => currentNames.has(n));
     if (pruned.length !== selectedColumns.length) {
@@ -4017,7 +4379,7 @@ function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
       }
     }
   }, [columns, selectedColumns, clearColumnSelection]);
-  const handleColumnSelect = useCallback19(
+  const handleColumnSelect = useCallback21(
     (columnName, e) => {
       const allNames = orderedColumns.map((c) => c.name);
       if (e.shiftKey) {
@@ -4030,7 +4392,7 @@ function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
     },
     [orderedColumns, selectColumn, toggleColumnSelection, selectColumnRange]
   );
-  const handleToggleKey = useCallback19(
+  const handleToggleKey = useCallback21(
     (columnName, keyType, currentValue) => {
       send({
         type: "toggleColumnKey",
@@ -4054,16 +4416,16 @@ function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
     isForeignKey: false,
     isNaturalKey: false
   };
-  return /* @__PURE__ */ jsxs15("div", { className: "column-editor", children: [
-    /* @__PURE__ */ jsxs15("div", { className: "column-editor__header", children: [
-      /* @__PURE__ */ jsxs15("h4", { className: "column-editor__title", children: [
+  return /* @__PURE__ */ jsxs18("div", { className: "column-editor", children: [
+    /* @__PURE__ */ jsxs18("div", { className: "column-editor__header", children: [
+      /* @__PURE__ */ jsxs18("h4", { className: "column-editor__title", children: [
         "Columns (",
         columns.length,
         ")"
       ] }),
-      /* @__PURE__ */ jsxs15("div", { className: "column-editor__header-actions", children: [
-        columns.length > 0 && /* @__PURE__ */ jsxs15("div", { className: "column-editor__expand-controls", children: [
-          !allExpanded && /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsxs18("div", { className: "column-editor__header-actions", children: [
+        columns.length > 0 && /* @__PURE__ */ jsxs18("div", { className: "column-editor__expand-controls", children: [
+          !allExpanded && /* @__PURE__ */ jsx21(
             "button",
             {
               className: "column-editor__expand-btn",
@@ -4073,7 +4435,7 @@ function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
               children: "\u229E"
             }
           ),
-          anyExpanded && /* @__PURE__ */ jsx19(
+          anyExpanded && /* @__PURE__ */ jsx21(
             "button",
             {
               className: "column-editor__expand-btn",
@@ -4084,7 +4446,7 @@ function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
             }
           )
         ] }),
-        isEditable && /* @__PURE__ */ jsx19(
+        isEditable && /* @__PURE__ */ jsx21(
           "button",
           {
             className: "column-editor__add-btn",
@@ -4096,7 +4458,7 @@ function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
         )
       ] })
     ] }),
-    isEditable && selectedColumns.length > 1 && /* @__PURE__ */ jsx19(
+    isEditable && selectedColumns.length > 1 && /* @__PURE__ */ jsx21(
       BulkColumnActions,
       {
         modelName,
@@ -4105,9 +4467,9 @@ function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
         onClearSelection: clearColumnSelection
       }
     ),
-    /* @__PURE__ */ jsxs15("div", { className: "column-editor__list", children: [
-      columns.length === 0 && !isAddingColumn && /* @__PURE__ */ jsx19("div", { className: "column-editor__empty", children: "No columns" }),
-      orderedColumns.map((col, idx) => /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsxs18("div", { className: "column-editor__list", children: [
+      columns.length === 0 && !isAddingColumn && /* @__PURE__ */ jsx21("div", { className: "column-editor__empty", children: "No columns" }),
+      orderedColumns.map((col, idx) => /* @__PURE__ */ jsx21(
         ColumnRowEditor,
         {
           column: col,
@@ -4129,11 +4491,21 @@ function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
           isBeingDragged: dragIndex === idx,
           isSelected: selectedColumns.includes(col.name),
           onSelect: (e) => handleColumnSelect(col.name, e),
-          isEditingActive: editingColumn === col.name
+          isEditingActive: editingColumn === col.name,
+          metaSlot: /* @__PURE__ */ jsx21(
+            MetaEditor,
+            {
+              modelName,
+              columnName: col.name,
+              meta: col.meta,
+              readOnly: !isEditable,
+              compact: true
+            }
+          )
         },
         col.name
       )),
-      isAddingColumn && /* @__PURE__ */ jsx19(
+      isAddingColumn && /* @__PURE__ */ jsx21(
         ColumnRowEditor,
         {
           column: newColumnTemplate,
@@ -4151,7 +4523,7 @@ function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
         "__new__"
       )
     ] }),
-    isEditable && columns.length > 0 && /* @__PURE__ */ jsx19(
+    isEditable && columns.length > 0 && /* @__PURE__ */ jsx21(
       "button",
       {
         className: "column-editor__add-btn column-editor__add-btn--bottom",
@@ -4165,7 +4537,7 @@ function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
 }
 
 // src/components/DetailPanel/DetailPanel.tsx
-import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 var SOURCE_NAME = {
   catalog: "warehouse catalog",
   yml: "your dbt .yml",
@@ -4197,62 +4569,66 @@ function DetailPanel() {
   const pendingDeleteConfirmation = useEditorStore((s) => s.pendingDeleteConfirmation);
   const setPendingDeleteConfirmation = useEditorStore((s) => s.setPendingDeleteConfirmation);
   const openEdgeContextMenu = useEditorStore((s) => s.openEdgeContextMenu);
-  const [confirmingDelete, setConfirmingDelete] = useState17(false);
-  const [editingName, setEditingName] = useState17(false);
-  const [nameValue, setNameValue] = useState17("");
-  const [nameError, setNameError] = useState17("");
-  useEffect13(() => {
+  const [confirmingDelete, setConfirmingDelete] = useState19(false);
+  const [editingName, setEditingName] = useState19(false);
+  const [nameValue, setNameValue] = useState19("");
+  const [nameError, setNameError] = useState19("");
+  useEffect15(() => {
     if (pendingDeleteConfirmation && detailPanelOpen) {
       setConfirmingDelete(true);
       setPendingDeleteConfirmation(false);
     }
   }, [pendingDeleteConfirmation, detailPanelOpen, setPendingDeleteConfirmation]);
-  useEffect13(() => {
+  useEffect15(() => {
     setEditingName(false);
     setNameValue("");
     setNameError("");
   }, [selectedNode]);
-  const handleClose = useCallback20(() => {
+  const handleClose = useCallback22(() => {
     setDetailPanelOpen(false);
     selectNode(null);
     setConfirmingDelete(false);
   }, [setDetailPanelOpen, selectNode]);
-  const validateModelName = useCallback20(
+  const validateModelName = useCallback22(
     (value) => {
       const trimmed = value.trim();
       if (!trimmed) return "Name cannot be empty";
       if (/\s/.test(trimmed)) return "Name cannot contain spaces";
-      if (!/^[a-z]/.test(trimmed)) return "Must start with a lowercase letter";
-      if (!/^[a-z][a-z0-9_]*$/.test(trimmed)) return "Only lowercase letters, numbers, and underscores";
-      if (domain && trimmed !== selectedNode && domain.models.some((m) => m.name === trimmed)) {
+      if (!/^[A-Za-z]/.test(trimmed)) return "Must start with a letter";
+      if (!/^[A-Za-z][A-Za-z0-9_]*$/.test(trimmed)) return "Only letters, numbers, and underscores";
+      const same = (name) => name.toLowerCase() === trimmed.toLowerCase();
+      if (selectedNode && trimmed !== selectedNode && same(selectedNode)) {
+        return "Only the upper/lower case differs \u2014 rename to another name first";
+      }
+      if (domain && trimmed !== selectedNode && domain.models.some((m) => same(m.name))) {
         return "A model with this name already exists";
       }
-      if (trimmed !== selectedNode && existingModels.some((m) => m.source === "logical" && m.name === trimmed)) {
+      if (trimmed !== selectedNode && existingModels.some((m) => m.source === "logical" && same(m.name))) {
         return "A model with this name already exists in the model library";
       }
       return "";
     },
     [domain, selectedNode, existingModels]
   );
-  const handleStartRename = useCallback20(() => {
+  const handleStartRename = useCallback22(() => {
     if (!selectedNode) return;
     setNameValue(selectedNode);
     setNameError("");
     setEditingName(true);
   }, [selectedNode]);
-  const handleCancelRename = useCallback20(() => {
+  const handleCancelRename = useCallback22(() => {
     setEditingName(false);
     setNameValue("");
     setNameError("");
   }, []);
-  const handleNameChange = useCallback20(
+  const handleNameChange = useCallback22(
     (value) => {
       setNameValue(value);
       setNameError(validateModelName(value));
     },
     [validateModelName]
   );
-  const handleSubmitRename = useCallback20(() => {
+  const handleSubmitRename = useCallback22(() => {
     if (!selectedNode) return;
     const trimmed = nameValue.trim();
     if (!trimmed || trimmed === selectedNode) {
@@ -4273,7 +4649,7 @@ function DetailPanel() {
     setEditingName(false);
     setNameError("");
   }, [selectedNode, nameValue, host, selectNode, validateModelName]);
-  const handleDeleteModel = useCallback20(() => {
+  const handleDeleteModel = useCallback22(() => {
     if (!selectedNode) return;
     host.postMessage({
       type: "removeModel",
@@ -4282,7 +4658,7 @@ function DetailPanel() {
     setConfirmingDelete(false);
     handleClose();
   }, [selectedNode, host, handleClose]);
-  const handleDeleteRelationship = useCallback20(
+  const handleDeleteRelationship = useCallback22(
     (rel) => {
       host.postMessage({
         type: "removeRelationship",
@@ -4296,7 +4672,7 @@ function DetailPanel() {
     },
     [host]
   );
-  const handleRelationshipClick = useCallback20(
+  const handleRelationshipClick = useCallback22(
     (x, y, rel) => {
       const edgeData = {
         fromModel: rel.fromModel,
@@ -4330,10 +4706,10 @@ function DetailPanel() {
   }
   const { outgoing, incoming } = relationships;
   const totalRelationships = outgoing.length + incoming.length;
-  return /* @__PURE__ */ jsxs16(Panel, { position: "top-right", className: "detail-panel", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "detail-panel__header", children: [
-      editingName ? /* @__PURE__ */ jsxs16("div", { className: "detail-panel__title-edit", children: [
-        /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs19(Panel, { position: "top-right", className: "detail-panel", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "detail-panel__header", children: [
+      editingName ? /* @__PURE__ */ jsxs19("div", { className: "detail-panel__title-edit", children: [
+        /* @__PURE__ */ jsx22(
           "input",
           {
             className: `detail-panel__title-input${nameError ? " detail-panel__title-input--error" : ""}`,
@@ -4359,8 +4735,8 @@ function DetailPanel() {
             spellCheck: false
           }
         ),
-        nameError && /* @__PURE__ */ jsx20("span", { className: "detail-panel__title-error", children: nameError })
-      ] }) : /* @__PURE__ */ jsx20(
+        nameError && /* @__PURE__ */ jsx22("span", { className: "detail-panel__title-error", children: nameError })
+      ] }) : /* @__PURE__ */ jsx22(
         "h3",
         {
           className: `detail-panel__title${!isReadOnly ? " detail-panel__title--editable" : ""}`,
@@ -4369,7 +4745,7 @@ function DetailPanel() {
           children: model.name
         }
       ),
-      !isReadOnly && !editingName && /* @__PURE__ */ jsx20(
+      !isReadOnly && !editingName && /* @__PURE__ */ jsx22(
         "button",
         {
           className: "detail-panel__title-edit-btn",
@@ -4379,7 +4755,7 @@ function DetailPanel() {
           children: "\u270E"
         }
       ),
-      /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsx22(
         "button",
         {
           className: "detail-panel__close",
@@ -4390,25 +4766,27 @@ function DetailPanel() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs16("div", { className: "detail-panel__section", children: [
-      /* @__PURE__ */ jsxs16("div", { className: "detail-panel__metadata", children: [
-        /* @__PURE__ */ jsxs16("div", { className: "detail-panel__metadata-row", children: [
-          /* @__PURE__ */ jsx20("span", { className: "detail-panel__label", children: "Schema" }),
-          /* @__PURE__ */ jsx20("span", { className: "detail-panel__value", children: model.schema || "\u2014" })
+    /* @__PURE__ */ jsxs19("div", { className: "detail-panel__section", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "detail-panel__metadata", children: [
+        /* @__PURE__ */ jsxs19("div", { className: "detail-panel__metadata-row", children: [
+          /* @__PURE__ */ jsx22("span", { className: "detail-panel__label detail-panel__label--wide", children: "Schema" }),
+          /* @__PURE__ */ jsx22("span", { className: "detail-panel__value", children: model.schema || "\u2014" })
         ] }),
-        model.provenance && /* @__PURE__ */ jsxs16("div", { className: "detail-panel__metadata-row", children: [
-          /* @__PURE__ */ jsx20("span", { className: "detail-panel__label detail-panel__label--wide", children: "Columns from" }),
-          /* @__PURE__ */ jsx20("span", { className: "detail-panel__value detail-panel__value--provenance", children: describeProvenance(
+        /* @__PURE__ */ jsx22(AliasEditor, { modelName: model.name, alias: model.alias, readOnly: isReadOnly || viewer }),
+        model.provenance && /* @__PURE__ */ jsxs19("div", { className: "detail-panel__metadata-row", children: [
+          /* @__PURE__ */ jsx22("span", { className: "detail-panel__label detail-panel__label--wide", children: "Columns from" }),
+          /* @__PURE__ */ jsx22("span", { className: "detail-panel__value detail-panel__value--provenance", children: describeProvenance(
             model.provenance,
             model.columns.filter((c) => !c.dataType).length
           ) })
         ] })
       ] }),
-      isReadOnly ? model.description && /* @__PURE__ */ jsx20("p", { className: "detail-panel__description", children: model.description }) : /* @__PURE__ */ jsx20(DescriptionEditor, { modelName: model.name, description: model.description })
+      isReadOnly ? model.description && /* @__PURE__ */ jsx22("p", { className: "detail-panel__description", children: model.description }) : /* @__PURE__ */ jsx22(DescriptionEditor, { modelName: model.name, description: model.description })
     ] }),
-    !isReadOnly && /* @__PURE__ */ jsx20("div", { className: "detail-panel__section", children: /* @__PURE__ */ jsx20(RoleEditor, { modelName: model.name, modelRole: model.modelRole }) }),
-    !isReadOnly && /* @__PURE__ */ jsx20("div", { className: "detail-panel__section", children: /* @__PURE__ */ jsx20(GrainEditor, { modelName: model.name, grain: model.grain }) }),
-    (!viewer || hasRationaleContent(model.rationale)) && /* @__PURE__ */ jsx20("div", { className: "detail-panel__section", children: /* @__PURE__ */ jsx20(
+    !isReadOnly && /* @__PURE__ */ jsx22("div", { className: "detail-panel__section", children: /* @__PURE__ */ jsx22(RoleEditor, { modelName: model.name, modelRole: model.modelRole }) }),
+    !isReadOnly && /* @__PURE__ */ jsx22("div", { className: "detail-panel__section", children: /* @__PURE__ */ jsx22(GrainEditor, { modelName: model.name, grain: model.grain }) }),
+    (!isReadOnly && !viewer || model.meta && Object.keys(model.meta).length > 0) && /* @__PURE__ */ jsx22("div", { className: "detail-panel__section", children: /* @__PURE__ */ jsx22(MetaEditor, { modelName: model.name, meta: model.meta, readOnly: isReadOnly }) }),
+    (!viewer || hasRationaleContent(model.rationale)) && /* @__PURE__ */ jsx22("div", { className: "detail-panel__section", children: /* @__PURE__ */ jsx22(
       ModelRationale,
       {
         modelName: model.name,
@@ -4417,13 +4795,13 @@ function DetailPanel() {
         grain: model.grain
       }
     ) }),
-    !isReadOnly && /* @__PURE__ */ jsx20("div", { className: "detail-panel__section detail-panel__section--actions", children: confirmingDelete ? /* @__PURE__ */ jsxs16(Fragment4, { children: [
-      /* @__PURE__ */ jsxs16("span", { className: "detail-panel__confirm-label", children: [
+    !isReadOnly && /* @__PURE__ */ jsx22("div", { className: "detail-panel__section detail-panel__section--actions", children: confirmingDelete ? /* @__PURE__ */ jsxs19(Fragment4, { children: [
+      /* @__PURE__ */ jsxs19("span", { className: "detail-panel__confirm-label", children: [
         "Remove model from domain?",
         totalRelationships > 0 ? ` (${totalRelationships} relationship(s) will also be removed)` : ""
       ] }),
-      /* @__PURE__ */ jsxs16("div", { className: "detail-panel__confirm-actions", children: [
-        /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsxs19("div", { className: "detail-panel__confirm-actions", children: [
+        /* @__PURE__ */ jsx22(
           "button",
           {
             className: "detail-panel__button detail-panel__button--danger",
@@ -4432,7 +4810,7 @@ function DetailPanel() {
             children: "Yes, Remove"
           }
         ),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx22(
           "button",
           {
             className: "detail-panel__button",
@@ -4442,7 +4820,7 @@ function DetailPanel() {
           }
         )
       ] })
-    ] }) : /* @__PURE__ */ jsx20(
+    ] }) : /* @__PURE__ */ jsx22(
       "button",
       {
         className: "detail-panel__button detail-panel__button--danger",
@@ -4452,7 +4830,7 @@ function DetailPanel() {
         children: "Remove from Domain"
       }
     ) }),
-    /* @__PURE__ */ jsx20("div", { className: "detail-panel__section", children: /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx22("div", { className: "detail-panel__section", children: /* @__PURE__ */ jsx22(
       ColumnEditor,
       {
         modelName: model.name,
@@ -4461,14 +4839,14 @@ function DetailPanel() {
         modelRole: model.modelRole
       }
     ) }),
-    totalRelationships > 0 && /* @__PURE__ */ jsxs16("div", { className: "detail-panel__section", children: [
-      /* @__PURE__ */ jsxs16("h4", { className: "detail-panel__section-title", children: [
+    totalRelationships > 0 && /* @__PURE__ */ jsxs19("div", { className: "detail-panel__section", children: [
+      /* @__PURE__ */ jsxs19("h4", { className: "detail-panel__section-title", children: [
         "Relationships (",
         totalRelationships,
         ")"
       ] }),
-      /* @__PURE__ */ jsxs16("div", { className: "detail-panel__relationships", children: [
-        outgoing.map((rel) => /* @__PURE__ */ jsxs16(
+      /* @__PURE__ */ jsxs19("div", { className: "detail-panel__relationships", children: [
+        outgoing.map((rel) => /* @__PURE__ */ jsxs19(
           "div",
           {
             className: viewer ? "detail-panel__relationship" : "detail-panel__relationship detail-panel__relationship--clickable",
@@ -4484,18 +4862,18 @@ function DetailPanel() {
             },
             title: viewer ? void 0 : "Click to edit cardinality",
             children: [
-              /* @__PURE__ */ jsx20("span", { className: "detail-panel__rel-direction", title: "Outgoing FK", children: "\u2192" }),
-              /* @__PURE__ */ jsxs16("span", { className: "detail-panel__rel-columns", children: [
-                /* @__PURE__ */ jsx20("span", { className: "detail-panel__rel-local", title: rel.fromColumn, children: rel.fromColumn }),
-                /* @__PURE__ */ jsx20("span", { className: "detail-panel__rel-arrow", children: "\u2192" }),
-                /* @__PURE__ */ jsxs16("span", { className: "detail-panel__rel-target", title: `${rel.toModel}.${rel.toColumn}`, children: [
+              /* @__PURE__ */ jsx22("span", { className: "detail-panel__rel-direction", title: "Outgoing FK", children: "\u2192" }),
+              /* @__PURE__ */ jsxs19("span", { className: "detail-panel__rel-columns", children: [
+                /* @__PURE__ */ jsx22("span", { className: "detail-panel__rel-local", title: rel.fromColumn, children: rel.fromColumn }),
+                /* @__PURE__ */ jsx22("span", { className: "detail-panel__rel-arrow", children: "\u2192" }),
+                /* @__PURE__ */ jsxs19("span", { className: "detail-panel__rel-target", title: `${rel.toModel}.${rel.toColumn}`, children: [
                   rel.toModel,
                   ".",
                   rel.toColumn
                 ] })
               ] }),
-              /* @__PURE__ */ jsx20("span", { className: "detail-panel__rel-cardinality", children: rel.cardinality }),
-              !isReadOnly && /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx22("span", { className: "detail-panel__rel-cardinality", children: rel.cardinality }),
+              !isReadOnly && /* @__PURE__ */ jsx22(
                 "button",
                 {
                   className: "detail-panel__rel-delete",
@@ -4512,7 +4890,7 @@ function DetailPanel() {
           },
           `out-${rel.fromColumn}-${rel.toModel}-${rel.toColumn}`
         )),
-        incoming.map((rel) => /* @__PURE__ */ jsxs16(
+        incoming.map((rel) => /* @__PURE__ */ jsxs19(
           "div",
           {
             className: viewer ? "detail-panel__relationship" : "detail-panel__relationship detail-panel__relationship--clickable",
@@ -4528,18 +4906,18 @@ function DetailPanel() {
             },
             title: viewer ? void 0 : "Click to edit cardinality",
             children: [
-              /* @__PURE__ */ jsx20("span", { className: "detail-panel__rel-direction", title: "Incoming FK", children: "\u2190" }),
-              /* @__PURE__ */ jsxs16("span", { className: "detail-panel__rel-columns", children: [
-                /* @__PURE__ */ jsxs16("span", { className: "detail-panel__rel-target", title: `${rel.fromModel}.${rel.fromColumn}`, children: [
+              /* @__PURE__ */ jsx22("span", { className: "detail-panel__rel-direction", title: "Incoming FK", children: "\u2190" }),
+              /* @__PURE__ */ jsxs19("span", { className: "detail-panel__rel-columns", children: [
+                /* @__PURE__ */ jsxs19("span", { className: "detail-panel__rel-target", title: `${rel.fromModel}.${rel.fromColumn}`, children: [
                   rel.fromModel,
                   ".",
                   rel.fromColumn
                 ] }),
-                /* @__PURE__ */ jsx20("span", { className: "detail-panel__rel-arrow", children: "\u2192" }),
-                /* @__PURE__ */ jsx20("span", { className: "detail-panel__rel-local", title: rel.toColumn, children: rel.toColumn })
+                /* @__PURE__ */ jsx22("span", { className: "detail-panel__rel-arrow", children: "\u2192" }),
+                /* @__PURE__ */ jsx22("span", { className: "detail-panel__rel-local", title: rel.toColumn, children: rel.toColumn })
               ] }),
-              /* @__PURE__ */ jsx20("span", { className: "detail-panel__rel-cardinality", children: rel.cardinality }),
-              !isReadOnly && /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx22("span", { className: "detail-panel__rel-cardinality", children: rel.cardinality }),
+              !isReadOnly && /* @__PURE__ */ jsx22(
                 "button",
                 {
                   className: "detail-panel__rel-delete",
@@ -4562,20 +4940,20 @@ function DetailPanel() {
 }
 
 // src/components/Legend/Legend.tsx
-import { useCallback as useCallback21 } from "react";
+import { useCallback as useCallback23 } from "react";
 import { Panel as Panel2 } from "@xyflow/react";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 function Legend() {
   const legendOpen = useEditorStore((s) => s.legendOpen);
   const setLegendOpen = useEditorStore((s) => s.setLegendOpen);
-  const handleToggle = useCallback21(() => {
+  const handleToggle = useCallback23(() => {
     setLegendOpen(!legendOpen);
   }, [legendOpen, setLegendOpen]);
-  const handleClose = useCallback21(() => {
+  const handleClose = useCallback23(() => {
     setLegendOpen(false);
   }, [setLegendOpen]);
   if (!legendOpen) {
-    return /* @__PURE__ */ jsx21(Panel2, { position: "bottom-left", className: "legend-toggle", children: /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx23(Panel2, { position: "bottom-left", className: "legend-toggle", children: /* @__PURE__ */ jsx23(
       "button",
       {
         className: "legend-toggle__button",
@@ -4586,10 +4964,10 @@ function Legend() {
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs17(Panel2, { position: "bottom-left", className: "legend", children: [
-    /* @__PURE__ */ jsxs17("div", { className: "legend__header", children: [
-      /* @__PURE__ */ jsx21("span", { className: "legend__title", children: "Legend" }),
-      /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs20(Panel2, { position: "bottom-left", className: "legend", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "legend__header", children: [
+      /* @__PURE__ */ jsx23("span", { className: "legend__title", children: "Legend" }),
+      /* @__PURE__ */ jsx23(
         "button",
         {
           className: "legend__close",
@@ -4600,183 +4978,183 @@ function Legend() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs17("div", { className: "legend__content", children: [
-      /* @__PURE__ */ jsxs17("section", { className: "legend__section", children: [
-        /* @__PURE__ */ jsx21("h3", { className: "legend__section-title", children: "Design Stages" }),
-        /* @__PURE__ */ jsxs17("div", { className: "legend__items", children: [
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("div", { className: "legend__model-card legend__model-card--logical", children: /* @__PURE__ */ jsx21("div", { className: "legend__model-header legend__model-header--logical" }) }),
-            /* @__PURE__ */ jsxs17("div", { className: "legend__item-text", children: [
-              /* @__PURE__ */ jsx21("span", { className: "legend__item-label", children: "Logical" }),
-              /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Your data model design" })
+    /* @__PURE__ */ jsxs20("div", { className: "legend__content", children: [
+      /* @__PURE__ */ jsxs20("section", { className: "legend__section", children: [
+        /* @__PURE__ */ jsx23("h3", { className: "legend__section-title", children: "Design Stages" }),
+        /* @__PURE__ */ jsxs20("div", { className: "legend__items", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("div", { className: "legend__model-card legend__model-card--logical", children: /* @__PURE__ */ jsx23("div", { className: "legend__model-header legend__model-header--logical" }) }),
+            /* @__PURE__ */ jsxs20("div", { className: "legend__item-text", children: [
+              /* @__PURE__ */ jsx23("span", { className: "legend__item-label", children: "Logical" }),
+              /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Your data model design" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("div", { className: "legend__model-card legend__model-card--physical", children: /* @__PURE__ */ jsx21("div", { className: "legend__model-header legend__model-header--physical" }) }),
-            /* @__PURE__ */ jsxs17("div", { className: "legend__item-text", children: [
-              /* @__PURE__ */ jsx21("span", { className: "legend__item-label", children: "Physical" }),
-              /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Declared in dbt .yml files (read-only)" })
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("div", { className: "legend__model-card legend__model-card--physical", children: /* @__PURE__ */ jsx23("div", { className: "legend__model-header legend__model-header--physical" }) }),
+            /* @__PURE__ */ jsxs20("div", { className: "legend__item-text", children: [
+              /* @__PURE__ */ jsx23("span", { className: "legend__item-label", children: "Physical" }),
+              /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Declared in dbt .yml files (read-only)" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("div", { className: "legend__model-card legend__model-card--ghost", children: /* @__PURE__ */ jsx21("div", { className: "legend__model-header legend__model-header--ghost" }) }),
-            /* @__PURE__ */ jsxs17("div", { className: "legend__item-text", children: [
-              /* @__PURE__ */ jsx21("span", { className: "legend__item-label", children: "Ghost" }),
-              /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Not found in your dbt project" })
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("div", { className: "legend__model-card legend__model-card--ghost", children: /* @__PURE__ */ jsx23("div", { className: "legend__model-header legend__model-header--ghost" }) }),
+            /* @__PURE__ */ jsxs20("div", { className: "legend__item-text", children: [
+              /* @__PURE__ */ jsx23("span", { className: "legend__item-label", children: "Ghost" }),
+              /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Not found in your dbt project" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("div", { className: "legend__model-card legend__model-card--ghost legend__model-card--ghost-disabled", children: /* @__PURE__ */ jsx21("div", { className: "legend__model-header legend__model-header--ghost" }) }),
-            /* @__PURE__ */ jsxs17("div", { className: "legend__item-text", children: [
-              /* @__PURE__ */ jsx21("span", { className: "legend__item-label", children: "Ghost, dotted" }),
-              /* @__PURE__ */ jsxs17("span", { className: "legend__item-desc", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("div", { className: "legend__model-card legend__model-card--ghost legend__model-card--ghost-disabled", children: /* @__PURE__ */ jsx23("div", { className: "legend__model-header legend__model-header--ghost" }) }),
+            /* @__PURE__ */ jsxs20("div", { className: "legend__item-text", children: [
+              /* @__PURE__ */ jsx23("span", { className: "legend__item-label", children: "Ghost, dotted" }),
+              /* @__PURE__ */ jsxs20("span", { className: "legend__item-desc", children: [
                 "Disabled in dbt \u2014 ",
-                /* @__PURE__ */ jsx21("code", { children: "ref()" }),
+                /* @__PURE__ */ jsx23("code", { children: "ref()" }),
                 " to it will not compile"
               ] })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs17("section", { className: "legend__section", children: [
-        /* @__PURE__ */ jsx21("h3", { className: "legend__section-title", children: "Annotations" }),
-        /* @__PURE__ */ jsxs17("div", { className: "legend__items", children: [
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("div", { className: "legend__annotation-card" }),
-            /* @__PURE__ */ jsxs17("div", { className: "legend__item-text", children: [
-              /* @__PURE__ */ jsx21("span", { className: "legend__item-label", children: "Build Note" }),
-              /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Temporary note on canvas" })
+      /* @__PURE__ */ jsxs20("section", { className: "legend__section", children: [
+        /* @__PURE__ */ jsx23("h3", { className: "legend__section-title", children: "Annotations" }),
+        /* @__PURE__ */ jsxs20("div", { className: "legend__items", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("div", { className: "legend__annotation-card" }),
+            /* @__PURE__ */ jsxs20("div", { className: "legend__item-text", children: [
+              /* @__PURE__ */ jsx23("span", { className: "legend__item-label", children: "Build Note" }),
+              /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Temporary note on canvas" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("svg", { className: "legend__edge-sample", viewBox: "0 0 48 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("line", { x1: "0", y1: "4", x2: "48", y2: "4", className: "legend__edge legend__edge--annotation" }) }),
-            /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Note linked to model" })
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("svg", { className: "legend__edge-sample", viewBox: "0 0 48 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx23("line", { x1: "0", y1: "4", x2: "48", y2: "4", className: "legend__edge legend__edge--annotation" }) }),
+            /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Note linked to model" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs17("section", { className: "legend__section", children: [
-        /* @__PURE__ */ jsx21("h3", { className: "legend__section-title", children: "Cardinality" }),
-        /* @__PURE__ */ jsxs17("div", { className: "legend__items legend__items--cardinality", children: [
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsxs17("div", { className: "legend__cardinality", children: [
-              /* @__PURE__ */ jsx21("span", { className: "legend__cardinality-label legend__cardinality-label--many", children: "*" }),
-              /* @__PURE__ */ jsx21("svg", { className: "legend__cardinality-line", viewBox: "0 0 32 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("line", { x1: "0", y1: "4", x2: "32", y2: "4", className: "legend__edge legend__edge--logical" }) }),
-              /* @__PURE__ */ jsx21("span", { className: "legend__cardinality-label", children: "1" })
+      /* @__PURE__ */ jsxs20("section", { className: "legend__section", children: [
+        /* @__PURE__ */ jsx23("h3", { className: "legend__section-title", children: "Cardinality" }),
+        /* @__PURE__ */ jsxs20("div", { className: "legend__items legend__items--cardinality", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsxs20("div", { className: "legend__cardinality", children: [
+              /* @__PURE__ */ jsx23("span", { className: "legend__cardinality-label legend__cardinality-label--many", children: "*" }),
+              /* @__PURE__ */ jsx23("svg", { className: "legend__cardinality-line", viewBox: "0 0 32 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx23("line", { x1: "0", y1: "4", x2: "32", y2: "4", className: "legend__edge legend__edge--logical" }) }),
+              /* @__PURE__ */ jsx23("span", { className: "legend__cardinality-label", children: "1" })
             ] }),
-            /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Many-to-one" })
+            /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Many-to-one" })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsxs17("div", { className: "legend__cardinality", children: [
-              /* @__PURE__ */ jsx21("span", { className: "legend__cardinality-label", children: "1" }),
-              /* @__PURE__ */ jsx21("svg", { className: "legend__cardinality-line", viewBox: "0 0 32 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("line", { x1: "0", y1: "4", x2: "32", y2: "4", className: "legend__edge legend__edge--logical" }) }),
-              /* @__PURE__ */ jsx21("span", { className: "legend__cardinality-label", children: "1" })
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsxs20("div", { className: "legend__cardinality", children: [
+              /* @__PURE__ */ jsx23("span", { className: "legend__cardinality-label", children: "1" }),
+              /* @__PURE__ */ jsx23("svg", { className: "legend__cardinality-line", viewBox: "0 0 32 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx23("line", { x1: "0", y1: "4", x2: "32", y2: "4", className: "legend__edge legend__edge--logical" }) }),
+              /* @__PURE__ */ jsx23("span", { className: "legend__cardinality-label", children: "1" })
             ] }),
-            /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "One-to-one" })
+            /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "One-to-one" })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsxs17("div", { className: "legend__cardinality", children: [
-              /* @__PURE__ */ jsx21("span", { className: "legend__cardinality-label", children: "1" }),
-              /* @__PURE__ */ jsx21("svg", { className: "legend__cardinality-line", viewBox: "0 0 32 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("line", { x1: "0", y1: "4", x2: "32", y2: "4", className: "legend__edge legend__edge--logical" }) }),
-              /* @__PURE__ */ jsx21("span", { className: "legend__cardinality-label legend__cardinality-label--many", children: "*" })
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsxs20("div", { className: "legend__cardinality", children: [
+              /* @__PURE__ */ jsx23("span", { className: "legend__cardinality-label", children: "1" }),
+              /* @__PURE__ */ jsx23("svg", { className: "legend__cardinality-line", viewBox: "0 0 32 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx23("line", { x1: "0", y1: "4", x2: "32", y2: "4", className: "legend__edge legend__edge--logical" }) }),
+              /* @__PURE__ */ jsx23("span", { className: "legend__cardinality-label legend__cardinality-label--many", children: "*" })
             ] }),
-            /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "One-to-many" })
+            /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "One-to-many" })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsxs17("div", { className: "legend__cardinality", children: [
-              /* @__PURE__ */ jsx21("span", { className: "legend__cardinality-label legend__cardinality-label--many", children: "*" }),
-              /* @__PURE__ */ jsx21("svg", { className: "legend__cardinality-line", viewBox: "0 0 32 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("line", { x1: "0", y1: "4", x2: "32", y2: "4", className: "legend__edge legend__edge--logical" }) }),
-              /* @__PURE__ */ jsx21("span", { className: "legend__cardinality-label legend__cardinality-label--many", children: "*" })
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsxs20("div", { className: "legend__cardinality", children: [
+              /* @__PURE__ */ jsx23("span", { className: "legend__cardinality-label legend__cardinality-label--many", children: "*" }),
+              /* @__PURE__ */ jsx23("svg", { className: "legend__cardinality-line", viewBox: "0 0 32 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx23("line", { x1: "0", y1: "4", x2: "32", y2: "4", className: "legend__edge legend__edge--logical" }) }),
+              /* @__PURE__ */ jsx23("span", { className: "legend__cardinality-label legend__cardinality-label--many", children: "*" })
             ] }),
-            /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Many-to-many" })
+            /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Many-to-many" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx21("h4", { className: "legend__subsection-title", children: "Line colour follows the stage" }),
-        /* @__PURE__ */ jsxs17("div", { className: "legend__items legend__items--disc-edges", children: [
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("svg", { className: "legend__edge-sample", viewBox: "0 0 48 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("line", { x1: "0", y1: "4", x2: "48", y2: "4", className: "legend__edge legend__edge--logical" }) }),
-            /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Logical" })
+        /* @__PURE__ */ jsx23("h4", { className: "legend__subsection-title", children: "Line colour follows the stage" }),
+        /* @__PURE__ */ jsxs20("div", { className: "legend__items legend__items--disc-edges", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("svg", { className: "legend__edge-sample", viewBox: "0 0 48 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx23("line", { x1: "0", y1: "4", x2: "48", y2: "4", className: "legend__edge legend__edge--logical" }) }),
+            /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Logical" })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("svg", { className: "legend__edge-sample", viewBox: "0 0 48 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("line", { x1: "0", y1: "4", x2: "48", y2: "4", className: "legend__edge legend__edge--physical" }) }),
-            /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Physical" })
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("svg", { className: "legend__edge-sample", viewBox: "0 0 48 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx23("line", { x1: "0", y1: "4", x2: "48", y2: "4", className: "legend__edge legend__edge--physical" }) }),
+            /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Physical" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs17("section", { className: "legend__section", children: [
-        /* @__PURE__ */ jsx21("h3", { className: "legend__section-title", children: "Header Badges" }),
-        /* @__PURE__ */ jsx21("div", { className: "legend__items", children: /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-          /* @__PURE__ */ jsx21("span", { className: "legend__badge legend__badge--schema", children: "SLV" }),
-          /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Database schema, or the layer when dbt has not resolved one" })
+      /* @__PURE__ */ jsxs20("section", { className: "legend__section", children: [
+        /* @__PURE__ */ jsx23("h3", { className: "legend__section-title", children: "Header Badges" }),
+        /* @__PURE__ */ jsx23("div", { className: "legend__items", children: /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+          /* @__PURE__ */ jsx23("span", { className: "legend__badge legend__badge--schema", children: "SLV" }),
+          /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Database schema, or the layer when dbt has not resolved one" })
         ] }) }),
-        /* @__PURE__ */ jsx21("h4", { className: "legend__subsection-title", children: "Where the shape came from (Physical)" }),
-        /* @__PURE__ */ jsx21("div", { className: "legend__items legend__items--sources", children: SOURCE_ORDER.map((source) => /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-          /* @__PURE__ */ jsx21("span", { className: `legend__badge legend__badge--source legend__badge--source-${source}`, children: SOURCE_LABEL[source] }),
-          /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: SOURCE_LEGEND_DESC[source] })
+        /* @__PURE__ */ jsx23("h4", { className: "legend__subsection-title", children: "Where the shape came from (Physical)" }),
+        /* @__PURE__ */ jsx23("div", { className: "legend__items legend__items--sources", children: SOURCE_ORDER.map((source) => /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+          /* @__PURE__ */ jsx23("span", { className: `legend__badge legend__badge--source legend__badge--source-${source}`, children: SOURCE_LABEL[source] }),
+          /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: SOURCE_LEGEND_DESC[source] })
         ] }, source)) })
       ] }),
-      /* @__PURE__ */ jsxs17("section", { className: "legend__section", children: [
-        /* @__PURE__ */ jsx21("h3", { className: "legend__section-title", children: "Column Badges" }),
-        /* @__PURE__ */ jsxs17("div", { className: "legend__items legend__items--badges", children: [
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("span", { className: "legend__badge legend__badge--pk", children: "PK" }),
-            /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Primary key" })
+      /* @__PURE__ */ jsxs20("section", { className: "legend__section", children: [
+        /* @__PURE__ */ jsx23("h3", { className: "legend__section-title", children: "Column Badges" }),
+        /* @__PURE__ */ jsxs20("div", { className: "legend__items legend__items--badges", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("span", { className: "legend__badge legend__badge--pk", children: "PK" }),
+            /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Primary key" })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("span", { className: "legend__badge legend__badge--fk", children: "FK" }),
-            /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Foreign key" })
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("span", { className: "legend__badge legend__badge--fk", children: "FK" }),
+            /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Foreign key" })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("span", { className: "legend__badge legend__badge--nk", children: "NK" }),
-            /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Natural key" })
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("span", { className: "legend__badge legend__badge--nk", children: "NK" }),
+            /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Natural key" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs17("div", { className: "legend__items legend__items--symbols", children: [
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("span", { className: "legend__symbols legend__symbols--scd", children: [0, 1, 2].map((t) => /* @__PURE__ */ jsx21("span", { title: SCD_TITLE[t], children: SCD_BADGE[t] }, t)) }),
-            /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "SCD type \u2014 fixed / overwritten / new row per change" })
+        /* @__PURE__ */ jsxs20("div", { className: "legend__items legend__items--symbols", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("span", { className: "legend__symbols legend__symbols--scd", children: [0, 1, 2].map((t) => /* @__PURE__ */ jsx23("span", { title: SCD_TITLE[t], children: SCD_BADGE[t] }, t)) }),
+            /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "SCD type \u2014 fixed / overwritten / new row per change" })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("span", { className: "legend__symbols legend__symbols--additive", children: Object.keys(ADDITIVE_BADGE).map((a) => /* @__PURE__ */ jsx21("span", { title: ADDITIVE_TITLE[a], children: ADDITIVE_BADGE[a] }, a)) }),
-            /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Additive / semi-additive / non-additive measure" })
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("span", { className: "legend__symbols legend__symbols--additive", children: Object.keys(ADDITIVE_BADGE).map((a) => /* @__PURE__ */ jsx23("span", { title: ADDITIVE_TITLE[a], children: ADDITIVE_BADGE[a] }, a)) }),
+            /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Additive / semi-additive / non-additive measure" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs17("section", { className: "legend__section", children: [
-        /* @__PURE__ */ jsx21("h3", { className: "legend__section-title", children: "Comparing Stages" }),
-        /* @__PURE__ */ jsx21("p", { className: "legend__note legend__note--lead", children: "Shown while a comparison is open (Diff)." }),
-        /* @__PURE__ */ jsxs17("div", { className: "legend__items", children: [
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("span", { className: "legend__swatch legend__swatch--extra" }),
-            /* @__PURE__ */ jsxs17("span", { className: "legend__item-desc", children: [
+      /* @__PURE__ */ jsxs20("section", { className: "legend__section", children: [
+        /* @__PURE__ */ jsx23("h3", { className: "legend__section-title", children: "Comparing Stages" }),
+        /* @__PURE__ */ jsx23("p", { className: "legend__note legend__note--lead", children: "Shown while a comparison is open (Diff)." }),
+        /* @__PURE__ */ jsxs20("div", { className: "legend__items", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("span", { className: "legend__swatch legend__swatch--extra" }),
+            /* @__PURE__ */ jsxs20("span", { className: "legend__item-desc", children: [
               "Amber \u2014 only in the stage you are viewing (",
-              /* @__PURE__ */ jsx21("code", { children: "only here" }),
+              /* @__PURE__ */ jsx23("code", { children: "only here" }),
               ")"
             ] })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("span", { className: "legend__swatch legend__swatch--mismatch" }),
-            /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Red \u2014 declared differently in each stage" })
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("span", { className: "legend__swatch legend__swatch--mismatch" }),
+            /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Red \u2014 declared differently in each stage" })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("span", { className: "legend__swatch legend__swatch--missing" }),
-            /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Grey, struck through \u2014 only in the stage being compared against" })
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("span", { className: "legend__swatch legend__swatch--missing" }),
+            /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Grey, struck through \u2014 only in the stage being compared against" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx21("h4", { className: "legend__subsection-title", children: "Relationship lines" }),
-        /* @__PURE__ */ jsxs17("div", { className: "legend__items legend__items--disc-edges", children: [
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("svg", { className: "legend__edge-sample", viewBox: "0 0 48 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("line", { x1: "0", y1: "4", x2: "48", y2: "4", className: "legend__edge legend__edge--disc-extra" }) }),
-            /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Only in this stage" })
+        /* @__PURE__ */ jsx23("h4", { className: "legend__subsection-title", children: "Relationship lines" }),
+        /* @__PURE__ */ jsxs20("div", { className: "legend__items legend__items--disc-edges", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("svg", { className: "legend__edge-sample", viewBox: "0 0 48 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx23("line", { x1: "0", y1: "4", x2: "48", y2: "4", className: "legend__edge legend__edge--disc-extra" }) }),
+            /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Only in this stage" })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("svg", { className: "legend__edge-sample", viewBox: "0 0 48 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("line", { x1: "0", y1: "4", x2: "48", y2: "4", className: "legend__edge legend__edge--disc-missing" }) }),
-            /* @__PURE__ */ jsx21("span", { className: "legend__item-desc", children: "Only in the compared stage" })
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("svg", { className: "legend__edge-sample", viewBox: "0 0 48 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx23("line", { x1: "0", y1: "4", x2: "48", y2: "4", className: "legend__edge legend__edge--disc-missing" }) }),
+            /* @__PURE__ */ jsx23("span", { className: "legend__item-desc", children: "Only in the compared stage" })
           ] }),
-          /* @__PURE__ */ jsxs17("div", { className: "legend__item", children: [
-            /* @__PURE__ */ jsx21("svg", { className: "legend__edge-sample", viewBox: "0 0 48 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("line", { x1: "0", y1: "4", x2: "48", y2: "4", className: "legend__edge legend__edge--disc-mismatch" }) }),
-            /* @__PURE__ */ jsxs17("span", { className: "legend__item-desc", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "legend__item", children: [
+            /* @__PURE__ */ jsx23("svg", { className: "legend__edge-sample", viewBox: "0 0 48 8", "aria-hidden": "true", children: /* @__PURE__ */ jsx23("line", { x1: "0", y1: "4", x2: "48", y2: "4", className: "legend__edge legend__edge--disc-mismatch" }) }),
+            /* @__PURE__ */ jsxs20("span", { className: "legend__item-desc", children: [
               "Cardinality differs (",
-              /* @__PURE__ */ jsx21("code", { children: "!" }),
+              /* @__PURE__ */ jsx23("code", { children: "!" }),
               " at the midpoint)"
             ] })
           ] })
@@ -4787,7 +5165,7 @@ function Legend() {
 }
 
 // src/ErdCanvas.tsx
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 function toRenderableDomain(domain) {
   let modelsChanged = false;
   const models = (domain.models ?? []).map((model) => {
@@ -4844,17 +5222,17 @@ function ErdCanvasInner({
   const edges = useEditorStore((s) => s.edges);
   const setNodes = useEditorStore((s) => s.setNodes);
   const setEdges = useEditorStore((s) => s.setEdges);
-  useEffect14(() => {
+  useEffect16(() => {
     if (storeApi.getState().domain !== domainProp) {
       storeApi.getState().setDomain(domainProp);
     }
   }, [domainProp, storeApi]);
-  const onLayoutModifiedChangeRef = useRef10(onLayoutModifiedChange);
+  const onLayoutModifiedChangeRef = useRef12(onLayoutModifiedChange);
   onLayoutModifiedChangeRef.current = onLayoutModifiedChange;
-  const onReadyRef = useRef10(onReady);
+  const onReadyRef = useRef12(onReady);
   onReadyRef.current = onReady;
-  const [shiftHeld, setShiftHeld] = useState18(false);
-  useEffect14(() => {
+  const [shiftHeld, setShiftHeld] = useState20(false);
+  useEffect16(() => {
     const down = (e) => {
       if (e.key === "Shift") setShiftHeld(true);
     };
@@ -4872,23 +5250,23 @@ function ErdCanvasInner({
     };
   }, []);
   const { expandAll } = useColumnExpansion();
-  const hasAutoExpandedRef = useRef10(false);
-  useEffect14(() => {
+  const hasAutoExpandedRef = useRef12(false);
+  useEffect16(() => {
     if (!domain || hasAutoExpandedRef.current) return;
     hasAutoExpandedRef.current = true;
     if (domain.models.length < NODE_THRESHOLD) {
       expandAll(domain.models.map((m) => m.name));
     }
   }, [domain, expandAll]);
-  const baselineRef = useRef10(EMPTY_BASELINE);
-  const modifiedRef = useRef10(false);
-  const setModified = useCallback22((modified) => {
+  const baselineRef = useRef12(EMPTY_BASELINE);
+  const modifiedRef = useRef12(false);
+  const setModified = useCallback24((modified) => {
     if (modifiedRef.current === modified) return;
     modifiedRef.current = modified;
     onLayoutModifiedChangeRef.current?.(modified);
   }, []);
-  const [transformed, setTransformed] = useState18(false);
-  const onTransformed = useCallback22(
+  const [transformed, setTransformed] = useState20(false);
+  const onTransformed = useCallback24(
     (newNodes, newEdges) => {
       baselineRef.current = captureBaseline(newNodes, newEdges);
       setModified(false);
@@ -4897,7 +5275,7 @@ function ErdCanvasInner({
     [setModified]
   );
   const { onNodeClick, onEdgeClick, onPaneClick, onSelectionChange } = useCanvasGraph({ onTransformed });
-  const onNodesChange = useCallback22(
+  const onNodesChange = useCallback24(
     (changes) => {
       const state = storeApi.getState();
       const updatedNodes = applyNodeChanges(changes, state.nodes);
@@ -4913,7 +5291,7 @@ function ErdCanvasInner({
     },
     [storeApi, setNodes, setEdges, setModified]
   );
-  const resetLayout = useCallback22(() => {
+  const resetLayout = useCallback24(() => {
     const baseline = baselineRef.current;
     const state = storeApi.getState();
     let nodesChanged = false;
@@ -4936,9 +5314,9 @@ function ErdCanvasInner({
   }, [storeApi, setNodes, setEdges, setModified]);
   useImperativeHandle(handleRef, () => ({ resetLayout }), [resetLayout]);
   const nodesInitialized = useNodesInitialized();
-  const readyFiredRef = useRef10(false);
+  const readyFiredRef = useRef12(false);
   const canFireReady = transformed && (nodesInitialized || nodes.length === 0);
-  useEffect14(() => {
+  useEffect16(() => {
     if (!canFireReady || readyFiredRef.current) return;
     let second = 0;
     const first = requestAnimationFrame(() => {
@@ -4952,13 +5330,13 @@ function ErdCanvasInner({
       cancelAnimationFrame(second);
     };
   }, [canFireReady]);
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       className: className ? `editor-canvas ${className}` : "editor-canvas",
       style: { position: "relative", width: "100%", height: "100%", display: "flex", flexDirection: "column", ...style },
       children: [
-        /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsxs21(
           ReactFlow,
           {
             style: { flex: "1 1 0", minHeight: 0 },
@@ -4985,20 +5363,20 @@ function ErdCanvasInner({
             deleteKeyCode: null,
             proOptions: { hideAttribution: true },
             children: [
-              /* @__PURE__ */ jsx22(CanvasBackdrop, {}),
-              /* @__PURE__ */ jsx22(DetailPanel, {})
+              /* @__PURE__ */ jsx24(CanvasBackdrop, {}),
+              /* @__PURE__ */ jsx24(DetailPanel, {})
             ]
           }
         ),
-        /* @__PURE__ */ jsx22(Legend, {})
+        /* @__PURE__ */ jsx24(Legend, {})
       ]
     }
   );
 }
 var ErdCanvas = forwardRef(function ErdCanvas2(props, ref) {
   const renderable = useMemo7(() => toRenderableDomain(props.domain), [props.domain]);
-  const [store] = useState18(() => createCanvasStore({ domain: renderable }));
-  return /* @__PURE__ */ jsx22(CanvasStoreProvider, { store, children: /* @__PURE__ */ jsx22(CanvasEnvironmentProvider, { host: NOOP_CANVAS_HOST, viewer: true, children: /* @__PURE__ */ jsx22(ReactFlowProvider, { children: /* @__PURE__ */ jsx22(ErdCanvasInner, { ...props, domain: renderable, handleRef: ref }) }) }) });
+  const [store] = useState20(() => createCanvasStore({ domain: renderable }));
+  return /* @__PURE__ */ jsx24(CanvasStoreProvider, { store, children: /* @__PURE__ */ jsx24(CanvasEnvironmentProvider, { host: NOOP_CANVAS_HOST, viewer: true, children: /* @__PURE__ */ jsx24(ReactFlowProvider, { children: /* @__PURE__ */ jsx24(ErdCanvasInner, { ...props, domain: renderable, handleRef: ref }) }) }) });
 });
 
 export {
@@ -5007,6 +5385,8 @@ export {
   useCanvasHost,
   useSend,
   useIsViewer,
+  computeModelLabels,
+  matchesModelSearch,
   pickHandleSides,
   transformDomain,
   applyNodeOverlays,