@erd-studio/renderer 0.1.4 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+
+All notable changes to `@erd-studio/renderer`. While `0.x`, a breaking change bumps the minor version.
+
+## 0.3.0
+
+### Changed
+- Pins `@erd-studio/core` 0.3.0, which reads schema v6, the table naming ([#181](https://github.com/liam-machine/erd-studio/issues/181)). No change to the renderer's own API: a v6 subject area reaches `ErdCanvas` as the same `DisplaySubjectArea` its v5 twin does.
+
+## 0.2.0
+
+### Changed (breaking)
+- **Exports use the new words: table and subject area** ([#180](https://github.com/liam-machine/erd-studio/issues/180), part 2 of [#162](https://github.com/liam-machine/erd-studio/issues/162)). What was called a *model* is a **table**, and a *domain* is a **subject area**. Pins `@erd-studio/core` 0.2.0. The types re-exported from core carry its new names. Only names changed: every function behaves as before, and object shapes, property names (`DisplaySubjectArea.models`, `domainPath`, `ErdCanvas`'s `domain` prop, …), message `type` strings and the files read on disk are the same, so a `DisplaySubjectArea` from 0.2.0 is the `DisplayDomain` of 0.1.x. There are no aliases for the old names. Rename the imports:
+
+| 0.1.x | 0.2.0 |
+|---|---|
+| `computeModelLabels` | `computeTableLabels` |
+| `DisplayDomain` | `DisplaySubjectArea` |
+| `DisplayModel` | `DisplayTable` |
+| `LabelledModel` | `LabelledTable` |
+| `matchesModelSearch` | `matchesTableSearch` |
+| `ModelFlowNode` | `TableFlowNode` |
+| `ModelNode` | `TableNode` |
+| `ModelNodeData` | `TableNodeData` |
+| `ModelRole` | `TableRole` |
+| `transformDomain` | `transformSubjectArea` |

package/README.md

@@ -1,6 +1,6 @@
 # @erd-studio/renderer
 
-The entity-relationship diagram canvas from the [ERD Studio](https://github.com/liam-machine/erd-studio) VS Code extension, packaged for reuse. It is built on React Flow and renders a `DisplayDomain` from `@erd-studio/core`: model nodes with their columns and key badges, FK edges with cardinality, annotations, the detail panel and the legend.
+The entity-relationship diagram canvas from the [ERD Studio](https://github.com/liam-machine/erd-studio) VS Code extension, packaged for reuse. It is built on React Flow and renders a `DisplaySubjectArea` from `@erd-studio/core`: model nodes with their columns and key badges, FK edges with cardinality, annotations, the detail panel and the legend.
 
 Peer dependencies: `react` and `react-dom` 18.3+, `@xyflow/react` 12.4+.
 
@@ -8,8 +8,8 @@ Peer dependencies: `react` and `react-dom` 18.3+, `@xyflow/react` 12.4+.
 
 | Import | What it is for |
 |---|---|
-| `@erd-studio/renderer` | Showing a domain: the `ErdCanvas` viewer component (below), plus `transformDomain` (a `DisplayDomain` to React Flow nodes and edges), `pickHandleSides`, `repickHandleSides` / `nodeRect`, the diagram exporters re-exported from `@erd-studio/core` (below), and the display, domain and graph types (`DisplayDomain`, `ModelFlowNode`, `FkFlowEdge`, …). |
-| `@erd-studio/renderer/editor` | Everything above plus what a host needs to build a full editor around the canvas, as the extension's webview does: the store (below), the host adapter, `useCanvasGraph`, `CanvasBackdrop`, `canvasNodeTypes` / `canvasEdgeTypes`, the components (`ModelNode`, `FkEdge`, `AnnotationNode`, `AnnotationEdge`, `DetailPanel`, `Legend`, `KeyBadge`, `KeyBadgeGroup`, `DataTypeSelect`, `ColumnRowEditor`), the canvas hooks and the pure helpers. |
+| `@erd-studio/renderer` | Showing a domain: the `ErdCanvas` viewer component (below), plus `transformSubjectArea` (a `DisplaySubjectArea` to React Flow nodes and edges), `pickHandleSides`, `repickHandleSides` / `nodeRect`, the diagram exporters re-exported from `@erd-studio/core` (below), and the display, domain and graph types (`DisplaySubjectArea`, `TableFlowNode`, `FkFlowEdge`, …). |
+| `@erd-studio/renderer/editor` | Everything above plus what a host needs to build a full editor around the canvas, as the extension's webview does: the store (below), the host adapter, `useCanvasGraph`, `CanvasBackdrop`, `canvasNodeTypes` / `canvasEdgeTypes`, the components (`TableNode`, `FkEdge`, `AnnotationNode`, `AnnotationEdge`, `DetailPanel`, `Legend`, `KeyBadge`, `KeyBadgeGroup`, `DataTypeSelect`, `ColumnRowEditor`), the canvas hooks and the pure helpers. |
 | `@erd-studio/renderer/store` | The canvas store on its own, with no React Flow runtime: `createCanvasSlice`, `createCanvasStore`, `CanvasStoreProvider`, `useEditorStore`, `useEditorStoreApi` and their types. |
 | `@erd-studio/renderer/sizing` | Model node size estimation (`NODE_WIDTH`, `estimateNodeWidth`, `estimateNodeHeight`, `countVisibleColumnRows`, `resolveNodeDimensions`), for layout code that needs node sizes before React Flow has measured them. No components. |
 | `@erd-studio/renderer/styles.css` | The stylesheet: every component's CSS in cascade order, then the theme tokens. It `@import`s `@xyflow/react/dist/style.css`, which your bundler resolves. |
@@ -18,14 +18,14 @@ All four JavaScript entry points share their modules, so a store or context crea
 
 ## Viewer: `ErdCanvas`
 
-`ErdCanvas` renders a `DisplayDomain` read-only, the way the extension shows a read-only domain: model nodes with their columns and key badges, FK edges, annotations, the minimap, the legend, and the detail panel a click on a model opens. It presents no editing affordances and posts nothing anywhere.
+`ErdCanvas` renders a `DisplaySubjectArea` read-only, the way the extension shows a read-only domain: model nodes with their columns and key badges, FK edges, annotations, the minimap, the legend, and the detail panel a click on a model opens. It presents no editing affordances and posts nothing anywhere.
 
 ```tsx
 import { useRef, useState } from 'react';
-import { ErdCanvas, type ErdCanvasHandle, type DisplayDomain } from '@erd-studio/renderer';
+import { ErdCanvas, type ErdCanvasHandle, type DisplaySubjectArea } from '@erd-studio/renderer';
 import '@erd-studio/renderer/styles.css';
 
-function Diagram({ domain }: { domain: DisplayDomain }) {
+function Diagram({ domain }: { domain: DisplaySubjectArea }) {
   const canvas = useRef<ErdCanvasHandle>(null);
   const [moved, setMoved] = useState(false);
   return (
@@ -51,12 +51,12 @@ Each `ErdCanvas` has its own store, so several can share a page.
 
 ## Exporting a diagram
 
-The `.` entry re-exports `@erd-studio/core`'s one-way exporters, so a page that shows a diagram with `ErdCanvas` can offer it as text without depending on core itself: `toMermaid`, `toDbml`, `exportDiagram`, `diagramExportFileName`, `DIAGRAM_EXPORT_FORMATS`, `DIAGRAM_EXPORT_FILE_EXTENSIONS` and the `DiagramExportFormat` type. They are pure functions with no React or DOM use; the same `DisplayDomain` gives the same text everywhere ERD Studio exports it.
+The `.` entry re-exports `@erd-studio/core`'s one-way exporters, so a page that shows a diagram with `ErdCanvas` can offer it as text without depending on core itself: `toMermaid`, `toDbml`, `exportDiagram`, `diagramExportFileName`, `DIAGRAM_EXPORT_FORMATS`, `DIAGRAM_EXPORT_FILE_EXTENSIONS` and the `DiagramExportFormat` type. They are pure functions with no React or DOM use; the same `DisplaySubjectArea` gives the same text everywhere ERD Studio exports it.
 
 ```ts
-import { exportDiagram, diagramExportFileName, type DisplayDomain } from '@erd-studio/renderer';
+import { exportDiagram, diagramExportFileName, type DisplaySubjectArea } from '@erd-studio/renderer';
 
-function downloadDbml(domain: DisplayDomain) {
+function downloadDbml(domain: DisplaySubjectArea) {
   const text = exportDiagram(domain, 'dbml'); // or 'mermaid'
   const url = URL.createObjectURL(new Blob([text], { type: 'text/plain' }));
   const link = Object.assign(document.createElement('a'), { href: url, download: diagramExportFileName(domain, 'dbml') });

package/dist/{chunk-IAFK7ZZV.js → chunk-HWA32XG5.js}

@@ -102,7 +102,7 @@ function foldComposites(rels) {
 }
 
 // src/lib/modelLabels.ts
-function computeModelLabels(models) {
+function computeTableLabels(models) {
   const baseOf = (m) => m.alias?.trim() || m.name;
   const counts = /* @__PURE__ */ new Map();
   for (const m of models) {
@@ -120,7 +120,7 @@ function computeModelLabels(models) {
   }
   return labels;
 }
-function matchesModelSearch(data, query) {
+function matchesTableSearch(data, query) {
   return data.modelName.toLowerCase().includes(query) || data.label !== void 0 && data.label.toLowerCase().includes(query);
 }
 
@@ -153,7 +153,7 @@ function pickHandleSides(source, target) {
     return dy >= 0 ? { sourceSide: "bottom", targetSide: "top" } : { sourceSide: "top", targetSide: "bottom" };
   }
 }
-function transformDomain(domain, options) {
+function transformSubjectArea(domain, options) {
   const { models, relationships, viewConfig, layer, stage, layerConfig, readOnly } = domain;
   const positions = viewConfig.positions ?? {};
   const discrepancyMap = /* @__PURE__ */ new Map();
@@ -176,7 +176,7 @@ function transformDomain(domain, options) {
     data: { ...data, isExpanded: options?.isExpanded?.(id) ?? false },
     measured: void 0
   });
-  const labels = computeModelLabels(models);
+  const labels = computeTableLabels(models);
   const nodes = models.map((model) => {
     const columns = mapColumns(model);
     const position = positionMap.get(model.name) ?? DEFAULT_POSITION;
@@ -278,6 +278,7 @@ function transformDomain(domain, options) {
         cardinality: rel.cardinality,
         ...rel.role ? { role: rel.role } : {},
         ...rel.pairs ? { pairs: rel.pairs, compositeKey: rel.compositeKey } : {},
+        ...rel.keysContradict && !readOnly ? { keysContradict: true } : {},
         stage,
         ...readOnly ? { readOnly: true } : {},
         ...discStatus ? { discrepancyStatus: discStatus } : {},
@@ -403,7 +404,7 @@ function applyNodeOverlays(nodes, edges, state) {
       return node;
     }
     const data = node.data;
-    const searchDimmed = query ? !matchesModelSearch(data, query) : false;
+    const searchDimmed = query ? !matchesTableSearch(data, query) : false;
     const selectionDimmed = hasSelection && !connected.has(node.id);
     const dimmed = searchDimmed || selectionDimmed;
     const expanded = isExpanded(node.id);
@@ -479,7 +480,7 @@ function useCanvasGraph({
         nodeDimensions,
         isExpanded: isExpandedNow
       };
-      let { nodes: newNodes, edges: newEdges } = transformDomain(domain, transformOptions);
+      let { nodes: newNodes, edges: newEdges } = transformSubjectArea(domain, transformOptions);
       newNodes = newNodes.map((n) => {
         const prev = prevById.get(n.id);
         return prev?.measured?.width != null && prev.measured.height != null ? { ...n, measured: prev.measured } : n;
@@ -1746,9 +1747,9 @@ function describeLoadError(error) {
 }
 function describeLoadWarning(warning) {
   const key = warning.key ? `"${warning.key}"` : "A key";
-  return `${key} is written twice (line ${warning.line}) \u2014 the last one is shown. Remove the other copy to edit this model.`;
+  return `${key} is written twice (line ${warning.line}) \u2014 the last one is shown. Remove the other copy to edit this table.`;
 }
-function ModelNodeComponent({ data, selected }) {
+function TableNodeComponent({ data, selected }) {
   const { modelName, label, stage, layer, layerConfig, schema, columns, grain, meta, dimmed, readOnly, isGhost, ghostReason, provenance, loadError, loadWarning, isStub, isExpanded = false, onToggleExpansion, discrepancy, discrepancySourceStage, discrepancyTargetStage } = data;
   const openNodeContextMenu = useEditorStore((s) => s.openNodeContextMenu);
   const send = useSend();
@@ -1801,7 +1802,7 @@ 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 title = label ? `${label} (table ${modelName})` : modelName;
   const modelMeta = useMemo2(() => metaRows(meta), [meta]);
   const nameTip = useHoverTip(
     ghostReason ? `${title} \u2014 ${GHOST_REASON_TITLE[ghostReason]}` : isDiscExtra ? `${title} \u2014 only in ${discrepancySourceStage ?? "this stage"}, not in ${discrepancyTargetStage ?? "the stage being compared"}` : title,
@@ -1974,7 +1975,7 @@ function ModelNodeComponent({ data, selected }) {
     }
   );
 }
-var ModelNode = memo(ModelNodeComponent);
+var TableNode = memo(TableNodeComponent);
 
 // src/components/Graph/FkEdge.tsx
 import { memo as memo2, useCallback as useCallback9, useMemo as useMemo3, useState as useState6 } from "react";
@@ -1986,6 +1987,7 @@ import {
   useStoreApi,
   useInternalNode
 } from "@xyflow/react";
+import { backwardsRelationshipNote } from "@erd-studio/core";
 
 // src/lib/cardinalityUtils.ts
 function swapCardinality(c) {
@@ -2160,7 +2162,9 @@ function FkEdgeComponent({
     return positions;
   }, [positionsKey, neighbourIds, storeApi]);
   const host = useCanvasHost();
+  const viewer = useIsViewer();
   const [hovered, setHovered] = useState6(false);
+  const [backwardsHovered, setBackwardsHovered] = useState6(false);
   const handleSwap = useCallback9(
     (e) => {
       if (!data) return;
@@ -2340,7 +2344,39 @@ function FkEdgeComponent({
           children: "!"
         }
       ),
-      !readOnly && discrepancyStatus !== "missing" && /* @__PURE__ */ jsx8(
+      viewer ? null : data.keysContradict && !readOnly && discrepancyStatus !== "missing" && /* @__PURE__ */ jsxs6(
+        "span",
+        {
+          className: `fk-edge__backwards${dimmed ? " fk-edge__backwards--dimmed" : ""}`,
+          style: {
+            transform: `translate(-9px, -50%) translate(${midX}px, ${midY}px)`
+          },
+          onMouseEnter: (e) => {
+            e.stopPropagation();
+            setBackwardsHovered(true);
+          },
+          onMouseLeave: (e) => {
+            e.stopPropagation();
+            setBackwardsHovered(false);
+          },
+          children: [
+            /* @__PURE__ */ jsx8(
+              "span",
+              {
+                className: "fk-edge__backwards-icon",
+                role: "img",
+                "aria-label": "Probably drawn backwards",
+                title: backwardsRelationshipNote(data, data.pairs ?? [{ fromColumn, toColumn }]),
+                children: "\u26A0"
+              }
+            ),
+            backwardsHovered && // Turn round is ⇄: a backwards many-to-one becomes the one-to-many it
+            // reads as, which the host stores the right way round (#163).
+            /* @__PURE__ */ jsx8("button", { className: "fk-edge__backwards-btn", onClick: handleSwap, title: "Turn this relationship round", children: "Turn round" })
+          ]
+        }
+      ),
+      !readOnly && discrepancyStatus !== "missing" && !(data.keysContradict && !viewer) && /* @__PURE__ */ jsx8(
         "span",
         {
           className: `fk-edge__swap-zone${dimmed ? " fk-edge__swap-zone--dimmed" : ""}`,
@@ -2572,7 +2608,7 @@ function AnnotationNodeInner({ data }) {
             {
               className: "annotation-node__link-handle nodrag",
               onMouseDown: handleLinkDragStart,
-              title: "Drag to a model to link",
+              title: "Drag to a table to link",
               children: "\u{1F517}"
             }
           ),
@@ -2687,7 +2723,7 @@ function AnnotationEdgeInner({
 var AnnotationEdge = memo4(AnnotationEdgeInner);
 
 // src/canvas/flowTypes.ts
-var canvasNodeTypes = { model: ModelNode, annotation: AnnotationNode };
+var canvasNodeTypes = { model: TableNode, annotation: AnnotationNode };
 var canvasEdgeTypes = { fk: FkEdge, annotationLink: AnnotationEdge };
 
 // src/lib/dragHandleSides.ts
@@ -2868,7 +2904,7 @@ function hasRationaleContent(rationale) {
     rationale.measures
   ].some(Boolean);
 }
-function ModelRationale({ modelName, rationale, modelRole, grain }) {
+function TableRationale({ modelName, rationale, modelRole, grain }) {
   const viewer = useIsViewer();
   const [open, setOpen] = useState9(false);
   const [forceShow, setForceShow] = useState9(false);
@@ -2931,7 +2967,7 @@ function ModelRationale({ modelName, rationale, modelRole, grain }) {
           rationale,
           fieldKey: "purpose",
           label: "Purpose",
-          placeholder: "What requirements does this model meet?",
+          placeholder: "What requirements does this table meet?",
           autoEdit: !viewer && forceShow && !rationale?.purpose
         }
       ),
@@ -2942,7 +2978,7 @@ function ModelRationale({ modelName, rationale, modelRole, grain }) {
           rationale,
           fieldKey: "design",
           label: "Design",
-          placeholder: "Why was this model designed this way?"
+          placeholder: "Why was this table designed this way?"
         }
       ),
       modelRole && /* @__PURE__ */ jsx12(
@@ -2952,7 +2988,7 @@ function ModelRationale({ modelName, rationale, modelRole, grain }) {
           rationale,
           fieldKey: "roleChoice",
           label: "Role Choice",
-          placeholder: "Why was this model role selected?"
+          placeholder: "Why was this table role selected?"
         }
       ),
       grain && /* @__PURE__ */ jsx12(
@@ -3033,7 +3069,7 @@ function DescriptionEditor({ modelName, description }) {
       {
         className: "detail-panel__rationale-add-btn",
         onClick: () => setEditing(true),
-        title: "Add model description",
+        title: "Add table description",
         children: "+ Add Description"
       }
     ) });
@@ -3048,7 +3084,7 @@ function DescriptionEditor({ modelName, description }) {
           value,
           onChange: (e) => setValue(e.target.value),
           onKeyDown: handleKeyDown,
-          placeholder: "Describe this model...",
+          placeholder: "Describe this table...",
           rows: 3,
           autoFocus: true
         }
@@ -3181,7 +3217,7 @@ 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 { TABLE_ALIAS_MAX_LENGTH, TABLE_ALIAS_RULE, isValidTableAlias } from "@erd-studio/core";
 import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function AliasEditor({ modelName, alias, readOnly }) {
   const host = useCanvasHost();
@@ -3194,7 +3230,7 @@ function AliasEditor({ modelName, alias, readOnly }) {
     }
   }, [alias, editing]);
   const trimmed = value.trim();
-  const error = trimmed && !isValidModelAlias(trimmed) ? MODEL_ALIAS_RULE : null;
+  const error = trimmed && !isValidTableAlias(trimmed) ? TABLE_ALIAS_RULE : null;
   const handleSave = useCallback14(() => {
     if (error || settled.current) return;
     settled.current = true;
@@ -3227,7 +3263,7 @@ function AliasEditor({ modelName, alias, readOnly }) {
   }, []);
   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__ */ jsx15("span", { className: "detail-panel__label detail-panel__label--wide", children: "Warehouse name" }),
       /* @__PURE__ */ jsxs12("span", { className: "detail-panel__alias-edit", children: [
         /* @__PURE__ */ jsx15(
           "input",
@@ -3235,26 +3271,26 @@ function AliasEditor({ modelName, alias, readOnly }) {
             className: `detail-panel__alias-input${error ? " detail-panel__alias-input--error" : ""}`,
             value,
             placeholder: modelName,
-            maxLength: MODEL_ALIAS_MAX_LENGTH,
+            maxLength: TABLE_ALIAS_MAX_LENGTH,
             onChange: (e) => setValue(e.target.value),
             onKeyDown: handleKeyDown,
             onBlur: () => error ? handleCancel() : handleSave(),
-            "aria-label": "Table name (alias)",
+            "aria-label": "Warehouse 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." })
+        /* @__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 table's 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__label detail-panel__label--wide", children: "Warehouse 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",
+        title: alias ? `Built as ${alias} (dbt alias); the table's name is ${modelName}` : "Same as the table's name",
         onDoubleClick: readOnly ? void 0 : startEditing,
         children: alias || modelName
       }
@@ -3264,8 +3300,8 @@ function AliasEditor({ modelName, alias, readOnly }) {
       {
         className: "detail-panel__rationale-edit-btn detail-panel__alias-edit-btn",
         onClick: startEditing,
-        title: "Set the table name (alias)",
-        "aria-label": "Edit table name",
+        title: "Set the warehouse name (alias)",
+        "aria-label": "Edit warehouse name",
         children: "\u270E"
       }
     )
@@ -3415,7 +3451,7 @@ function KeyBadgeGroup({
     "span",
     {
       className: "key-badge-group__warning",
-      title: "Multiple primary keys detected in this model",
+      title: "Multiple primary keys detected in this table",
       children: "!"
     }
   ) : null;
@@ -4308,7 +4344,7 @@ function MetaEditor({ modelName, columnName, meta, readOnly, compact }) {
           "span",
           {
             className: `meta-editor__text${text ? "" : " meta-editor__text--structured"}`,
-            title: editable && !text ? "Edit nested values in the model file" : formatMetaValue(value),
+            title: editable && !text ? "Edit nested values in the table's file" : formatMetaValue(value),
             onDoubleClick: editable && text ? () => startEdit(key, value) : void 0,
             children: formatMetaValue(value)
           }
@@ -4655,6 +4691,7 @@ function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
 }
 
 // src/components/DetailPanel/DetailPanel.tsx
+import { backwardsRelationshipNote as backwardsRelationshipNote2 } from "@erd-studio/core";
 import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function columnsText(rel, end) {
   const cols = columnPairs(rel).map((p) => end === "from" ? p.fromColumn : p.toColumn);
@@ -4723,10 +4760,10 @@ function DetailPanel() {
         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";
+        return "A table with this name already exists";
       }
       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 "A table with this name already exists in the Table Library";
       }
       return "";
     },
@@ -4795,6 +4832,21 @@ function DetailPanel() {
     },
     [host]
   );
+  const handleTurnRound = useCallback22(
+    (rel) => {
+      host.postMessage({
+        type: "updateRelationship",
+        payload: {
+          fromModel: rel.fromModel,
+          fromColumn: rel.fromColumn,
+          toModel: rel.toModel,
+          toColumn: rel.toColumn,
+          cardinality: swapCardinality(rel.cardinality)
+        }
+      });
+    },
+    [host]
+  );
   const handleRelationshipClick = useCallback22(
     (x, y, rel) => {
       const edgeData = {
@@ -4877,8 +4929,8 @@ function DetailPanel() {
         {
           className: "detail-panel__title-edit-btn",
           onClick: handleStartRename,
-          title: "Rename model",
-          "aria-label": "Rename model",
+          title: "Rename table",
+          "aria-label": "Rename table",
           children: "\u270E"
         }
       ),
@@ -4914,7 +4966,7 @@ function DetailPanel() {
     !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,
+      TableRationale,
       {
         modelName: model.name,
         rationale: model.rationale,
@@ -4924,7 +4976,7 @@ function DetailPanel() {
     ) }),
     !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?",
+        "Remove table from subject area?",
         totalRelationships > 0 ? ` (${totalRelationships} relationship(s) will also be removed)` : ""
       ] }),
       /* @__PURE__ */ jsxs19("div", { className: "detail-panel__confirm-actions", children: [
@@ -4933,7 +4985,7 @@ function DetailPanel() {
           {
             className: "detail-panel__button detail-panel__button--danger",
             onClick: handleDeleteModel,
-            "aria-label": "Confirm remove model",
+            "aria-label": "Confirm remove table",
             children: "Yes, Remove"
           }
         ),
@@ -4952,9 +5004,9 @@ function DetailPanel() {
       {
         className: "detail-panel__button detail-panel__button--danger",
         onClick: () => setConfirmingDelete(true),
-        title: "Remove this model from the domain",
-        "aria-label": "Remove this model from the domain",
-        children: "Remove from Domain"
+        title: "Remove this table from the subject area",
+        "aria-label": "Remove this table from the subject area",
+        children: "Remove from Subject Area"
       }
     ) }),
     /* @__PURE__ */ jsx22("div", { className: "detail-panel__section", children: /* @__PURE__ */ jsx22(
@@ -5000,6 +5052,18 @@ function DetailPanel() {
                 ] })
               ] }),
               /* @__PURE__ */ jsx22("span", { className: "detail-panel__rel-cardinality", children: rel.cardinality }),
+              viewer ? null : !isReadOnly && rel.keysContradict && /* @__PURE__ */ jsx22(
+                "button",
+                {
+                  className: "detail-panel__rel-backwards",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleTurnRound(rel);
+                  },
+                  title: `${backwardsRelationshipNote2(rel, rel.pairs ?? [rel])} Click to turn it round.`,
+                  children: "\u26A0 Turn round"
+                }
+              ),
               !isReadOnly && /* @__PURE__ */ jsx22(
                 "button",
                 {
@@ -5044,6 +5108,18 @@ function DetailPanel() {
                 /* @__PURE__ */ jsx22("span", { className: "detail-panel__rel-local", title: columnsText(rel, "to"), children: columnsText(rel, "to") })
               ] }),
               /* @__PURE__ */ jsx22("span", { className: "detail-panel__rel-cardinality", children: rel.cardinality }),
+              viewer ? null : !isReadOnly && rel.keysContradict && /* @__PURE__ */ jsx22(
+                "button",
+                {
+                  className: "detail-panel__rel-backwards",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleTurnRound(rel);
+                  },
+                  title: `${backwardsRelationshipNote2(rel, rel.pairs ?? [rel])} Click to turn it round.`,
+                  children: "\u26A0 Turn round"
+                }
+              ),
               !isReadOnly && /* @__PURE__ */ jsx22(
                 "button",
                 {
@@ -5155,7 +5231,7 @@ function Legend() {
           ] }),
           /* @__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__ */ jsx23("span", { className: "legend__item-desc", children: "Note linked to table" })
           ] })
         ] })
       ] }),
@@ -5293,10 +5369,10 @@ function Legend() {
 
 // src/ErdCanvas.tsx
 import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
-function toRenderableDomain(domain) {
+function toRenderableSubjectArea(domain) {
   let modelsChanged = false;
   const models = (domain.models ?? []).map((model) => {
-    const renderable = toRenderableModel(model);
+    const renderable = toRenderableTable(model);
     if (renderable !== model) modelsChanged = true;
     return renderable;
   });
@@ -5312,7 +5388,7 @@ function toRenderableDomain(domain) {
     readOnly: true
   };
 }
-function toRenderableModel(model) {
+function toRenderableTable(model) {
   if (model.columns == null) return { ...model, columns: [] };
   if (model.columns.every((col) => col.dataType != null)) return model;
   return { ...model, columns: model.columns.map(toRenderableColumn) };
@@ -5501,7 +5577,7 @@ function ErdCanvasInner({
   );
 }
 var ErdCanvas = forwardRef(function ErdCanvas2(props, ref) {
-  const renderable = useMemo7(() => toRenderableDomain(props.domain), [props.domain]);
+  const renderable = useMemo7(() => toRenderableSubjectArea(props.domain), [props.domain]);
   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 }) }) }) });
 });
@@ -5526,10 +5602,10 @@ export {
   relationshipDisplayKey,
   relationshipEdgeId,
   foldComposites,
-  computeModelLabels,
-  matchesModelSearch,
+  computeTableLabels,
+  matchesTableSearch,
   pickHandleSides,
-  transformDomain,
+  transformSubjectArea,
   applyNodeOverlays,
   useCanvasGraph,
   STAGE_HEX,
@@ -5551,7 +5627,7 @@ export {
   ADDITIVE_TITLE,
   DISCREPANCY_PHRASE,
   edgeHoverText,
-  ModelNode,
+  TableNode,
   swapCardinality,
   FkEdge,
   ANNOTATION_COLORS,

package/dist/editor.js

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