@erd-studio/renderer 0.1.2 → 0.1.3

package/README.md

@@ -8,7 +8,7 @@ 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`, and the display, domain and graph types (`DisplayDomain`, `ModelFlowNode`, `FkFlowEdge`, …). |
+| `@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/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. |
@@ -49,6 +49,24 @@ The ref exposes `resetLayout()`, which puts every node back at its position in t
 
 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.
+
+```ts
+import { exportDiagram, diagramExportFileName, type DisplayDomain } from '@erd-studio/renderer';
+
+function downloadDbml(domain: DisplayDomain) {
+  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') });
+  link.click();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+```
+
+See the [`@erd-studio/core` README](https://github.com/liam-machine/erd-studio/blob/main/packages/core/README.md#exporting-a-diagram) for what each format carries.
+
 ## Editor: store and host
 
 The canvas components read their state from the store supplied by the nearest `CanvasStoreProvider`, and post the edits a user makes on the canvas (renaming a column, moving an annotation, changing a cardinality, …) as `CanvasEditMessage`s to the `CanvasHost` supplied by `CanvasEnvironmentProvider`.

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

@@ -66,6 +66,41 @@ function useIsViewer() {
 // src/canvas/useCanvasGraph.ts
 import { useCallback as useCallback2, useEffect, useRef } from "react";
 
+// src/lib/relationshipDisplayKey.ts
+function columnPairs(rel) {
+  return rel.pairs && rel.pairs.length > 0 ? rel.pairs.map((p) => ({ fromColumn: p.fromColumn, toColumn: p.toColumn })) : [{ fromColumn: rel.fromColumn, toColumn: rel.toColumn }];
+}
+function relationshipDisplayKey(rel) {
+  const pairs = columnPairs(rel);
+  return `${rel.fromModel}|${pairs.map((p) => p.fromColumn).join("+")}|${rel.toModel}|${pairs.map((p) => p.toColumn).join("+")}`;
+}
+function relationshipEdgeId(rel) {
+  const pairs = columnPairs(rel);
+  return `fk-${rel.fromModel}-${pairs.map((p) => p.fromColumn).join("+")}-${rel.toModel}-${pairs.map((p) => p.toColumn).join("+")}`;
+}
+function foldComposites(rels) {
+  const groups = /* @__PURE__ */ new Map();
+  const idOf = (r) => [r.fromModel, r.toModel, r.compositeKey].map((s) => s.toLowerCase()).join("\0");
+  for (const r of rels) {
+    if (!r.compositeKey) continue;
+    groups.set(idOf(r), [...groups.get(idOf(r)) ?? [], r]);
+  }
+  const out = [];
+  const placed = /* @__PURE__ */ new Set();
+  for (const r of rels) {
+    if (!r.compositeKey) {
+      out.push(r);
+      continue;
+    }
+    const id = idOf(r);
+    if (placed.has(id)) continue;
+    placed.add(id);
+    const members = groups.get(id);
+    out.push(members.length < 2 ? r : { ...members[0], pairs: members.map((m) => ({ fromColumn: m.fromColumn, toColumn: m.toColumn })) });
+  }
+  return out;
+}
+
 // src/lib/modelLabels.ts
 function computeModelLabels(models) {
   const baseOf = (m) => m.alias?.trim() || m.name;
@@ -102,7 +137,8 @@ function mapColumns(model) {
     isNaturalKey: col.isNaturalKey,
     ...col.scdType != null ? { scdType: col.scdType } : {},
     ...col.additiveType ? { additiveType: col.additiveType } : {},
-    ...hasMeta(col.meta) ? { meta: col.meta } : {}
+    ...hasMeta(col.meta) ? { meta: col.meta } : {},
+    ...col.dbtKey ? { dbtKey: col.dbtKey } : {}
   }));
   return mapped;
 }
@@ -218,20 +254,16 @@ function transformDomain(domain, options) {
   const relDiscrepancyMap = /* @__PURE__ */ new Map();
   if (options?.discrepancyReport) {
     for (const rd of options.discrepancyReport.relationships) {
-      if (rd.status !== "matched") {
-        const key = `${rd.fromModel}|${rd.fromColumn}|${rd.toModel}|${rd.toColumn}`;
-        relDiscrepancyMap.set(key, rd.status);
-      }
+      if (rd.status !== "matched") relDiscrepancyMap.set(relationshipDisplayKey(rd), rd.status);
     }
   }
   const allNodeNames = new Set(positionMap.keys());
-  const edges = relationships.filter((rel) => allNodeNames.has(rel.fromModel) && allNodeNames.has(rel.toModel)).map((rel) => {
+  const edges = foldComposites(relationships).filter((rel) => allNodeNames.has(rel.fromModel) && allNodeNames.has(rel.toModel)).map((rel) => {
     const isSelfLoop = rel.fromModel === rel.toModel;
     const { sourceSide, targetSide } = isSelfLoop ? { sourceSide: "top", targetSide: "right" } : pickHandleSides(rectOf(rel.fromModel), rectOf(rel.toModel));
-    const relKey = `${rel.fromModel}|${rel.fromColumn}|${rel.toModel}|${rel.toColumn}`;
-    const discStatus = relDiscrepancyMap.get(relKey);
+    const discStatus = relDiscrepancyMap.get(relationshipDisplayKey(rel));
     return {
-      id: `fk-${rel.fromModel}-${rel.fromColumn}-${rel.toModel}-${rel.toColumn}`,
+      id: relationshipEdgeId(rel),
       type: "fk",
       source: rel.fromModel,
       target: rel.toModel,
@@ -243,6 +275,8 @@ function transformDomain(domain, options) {
         toModel: rel.toModel,
         toColumn: rel.toColumn,
         cardinality: rel.cardinality,
+        ...rel.role ? { role: rel.role } : {},
+        ...rel.pairs ? { pairs: rel.pairs, compositeKey: rel.compositeKey } : {},
         stage,
         ...readOnly ? { readOnly: true } : {},
         ...discStatus ? { discrepancyStatus: discStatus } : {},
@@ -256,8 +290,10 @@ function transformDomain(domain, options) {
         if (!positionMap.has(rd.fromModel) || !positionMap.has(rd.toModel)) continue;
         const isSelfLoop = rd.fromModel === rd.toModel;
         const { sourceSide, targetSide } = isSelfLoop ? { sourceSide: "top", targetSide: "right" } : pickHandleSides(rectOf(rd.fromModel), rectOf(rd.toModel));
+        const pairs = columnPairs(rd);
+        const composite = pairs.length > 1 ? { pairs, ...rd.compositeKey ? { compositeKey: rd.compositeKey } : {} } : {};
         edges.push({
-          id: `ghost-fk-${rd.fromModel}-${rd.fromColumn}-${rd.toModel}-${rd.toColumn}`,
+          id: `ghost-${relationshipEdgeId({ ...rd, pairs })}`,
           type: "fk",
           source: rd.fromModel,
           target: rd.toModel,
@@ -269,6 +305,7 @@ function transformDomain(domain, options) {
             toModel: rd.toModel,
             toColumn: rd.toColumn,
             cardinality: rd.sourceCardinality ?? rd.targetCardinality ?? "many-to-one",
+            ...composite,
             stage,
             discrepancyStatus: "missing",
             ...isSelfLoop ? { isSelfLoop: true } : {}
@@ -277,6 +314,16 @@ function transformDomain(domain, options) {
       }
     }
   }
+  const loopsByNode = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    if (edge.type !== "fk" || !edge.data?.isSelfLoop) continue;
+    loopsByNode.set(edge.source, [...loopsByNode.get(edge.source) ?? [], edge]);
+  }
+  for (const loops of loopsByNode.values()) {
+    [...loops].sort((a, b) => a.id < b.id ? -1 : a.id > b.id ? 1 : 0).forEach((edge, loopIndex) => {
+      edge.data = { ...edge.data, loopIndex };
+    });
+  }
   const annotations = domain.viewConfig.annotations ?? [];
   for (const ann of annotations) {
     const annNodeId = `annotation-${ann.id}`;
@@ -499,8 +546,10 @@ function useCanvasGraph({
       if (edge.type !== "fk") return;
       if (edge.data) {
         const cols = /* @__PURE__ */ new Set();
-        cols.add(`${edge.data.fromModel}:${edge.data.fromColumn}`);
-        cols.add(`${edge.data.toModel}:${edge.data.toColumn}`);
+        for (const pair of columnPairs(edge.data)) {
+          cols.add(`${edge.data.fromModel}:${pair.fromColumn}`);
+          cols.add(`${edge.data.toModel}:${pair.toColumn}`);
+        }
         setHighlightedColumns(cols);
         selectNode(null);
         setDetailPanelOpen(false);
@@ -662,6 +711,19 @@ function useLongPressDrag(options = {}) {
   };
 }
 
+// src/lib/dbtKeyTitle.ts
+function dbtKeyTitle(hint) {
+  switch (hint.because) {
+    case "unique-test":
+    case "unique-combination":
+      return "dbt: tested as unique";
+    case "part-of-unique-combination":
+      return "dbt: part of a unique combination";
+    case "relationships-test":
+      return "dbt: has a relationships test";
+  }
+}
+
 // src/hooks/useColumnReorder.ts
 import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
 function useColumnReorder({
@@ -1249,9 +1311,12 @@ var DISCREPANCY_PHRASE = {
   "cardinality-mismatch": "cardinality differs between stages"
 };
 function edgeHoverText(edge) {
+  const composite = edge.pairs && edge.pairs.length > 1;
+  const ends = composite ? `${edge.fromModel} (${edge.pairs.map((p) => p.fromColumn).join(", ")}) \u2192 ${edge.toModel} (${edge.pairs.map((p) => p.toColumn).join(", ")})` : `${edge.fromModel}.${edge.fromColumn} \u2192 ${edge.toModel}.${edge.toColumn}`;
   return [
-    `${edge.fromModel}.${edge.fromColumn} \u2192 ${edge.toModel}.${edge.toColumn}`,
+    ends,
     edge.cardinality.replace(/-/g, " "),
+    edge.role ? `role: ${edge.role}` : "",
     edge.discrepancyStatus ? DISCREPANCY_PHRASE[edge.discrepancyStatus] : ""
   ].filter(Boolean).join(" \xB7 ");
 }
@@ -1454,21 +1519,21 @@ function ColumnRow({ column, modelName, readOnly, existingColumnNames, discrepan
       if (columnRow && modelNode) {
         const targetColumnName = columnRow.dataset.columnName;
         const targetModelName = modelNode.dataset.modelName;
-        if (targetColumnName && targetModelName && targetModelName !== modelName) {
-          window.dispatchEvent(
-            new CustomEvent("column-relationship-drop", {
-              detail: {
-                fromModel: modelName,
-                fromColumn: column.name,
-                toModel: targetModelName,
-                toColumn: targetColumnName
-              }
-            })
-          );
-        } else if (targetModelName === modelName) {
-          window.dispatchEvent(
-            new CustomEvent("column-relationship-self-drop")
-          );
+        if (targetColumnName && targetModelName) {
+          if (targetModelName === modelName && targetColumnName.toLowerCase() === column.name.toLowerCase()) {
+            window.dispatchEvent(new CustomEvent("column-relationship-self-drop"));
+          } else {
+            window.dispatchEvent(
+              new CustomEvent("column-relationship-drop", {
+                detail: {
+                  fromModel: modelName,
+                  fromColumn: column.name,
+                  toModel: targetModelName,
+                  toColumn: targetColumnName
+                }
+              })
+            );
+          }
         }
       }
       endDrag();
@@ -1567,7 +1632,8 @@ function ColumnRow({ column, modelName, readOnly, existingColumnNames, discrepan
           "span",
           {
             className: `model-node__col-name${!readOnly ? " model-node__col-name--editable" : ""}`,
-            title: column.name,
+            title: !viewer && column.dbtKey ? `${column.name}
+${dbtKeyTitle(column.dbtKey)}` : column.name,
             onDoubleClick: !readOnly ? handleDoubleClickName : void 0,
             children: column.name
           }
@@ -1672,6 +1738,9 @@ function describeLoadError(error) {
   if (error.kind === "read") {
     return "ERD Studio can't read this file.";
   }
+  if (error.mergeConflict) {
+    return error.line !== void 0 ? `Unresolved git merge conflict on line ${error.line} \u2014 ERD Studio can't read this file.` : "Unresolved git merge conflict \u2014 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 }) {
@@ -2017,6 +2086,7 @@ import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-run
 var PATH_GAP = 20;
 var LABEL_OFFSET = 8;
 var SELF_LOOP_RADIUS = 55;
+var SELF_LOOP_STEP = 18;
 var NO_SIBLINGS = Object.freeze([]);
 function offsetPoint(x, y, position, distance) {
   switch (position) {
@@ -2089,7 +2159,8 @@ function FkEdgeComponent({
     [host, data]
   );
   if (!data) return null;
-  const { cardinality, stage, discrepancyStatus, dimmed, readOnly, isSelfLoop, fromColumn, toColumn } = data;
+  const { cardinality, role, stage, discrepancyStatus, dimmed, readOnly, isSelfLoop, fromColumn, toColumn } = data;
+  const loopRadius = SELF_LOOP_RADIUS + SELF_LOOP_STEP * (data.loopIndex ?? 0);
   let adjustedSourceX = sourceX;
   let adjustedSourceY = sourceY;
   let adjustedTargetX = targetX;
@@ -2122,7 +2193,7 @@ function FkEdgeComponent({
   }
   const src = offsetPoint(adjustedSourceX, adjustedSourceY, sourcePosition, PATH_GAP);
   const tgt = offsetPoint(adjustedTargetX, adjustedTargetY, targetPosition, PATH_GAP);
-  const edgePath = isSelfLoop ? `M ${src.x},${src.y} C ${src.x + SELF_LOOP_RADIUS},${src.y - SELF_LOOP_RADIUS} ${tgt.x + SELF_LOOP_RADIUS},${tgt.y - SELF_LOOP_RADIUS} ${tgt.x},${tgt.y}` : getSmoothStepPath({
+  const edgePath = isSelfLoop ? `M ${src.x},${src.y} C ${src.x + loopRadius},${src.y - loopRadius} ${tgt.x + loopRadius},${tgt.y - loopRadius} ${tgt.x},${tgt.y}` : getSmoothStepPath({
     sourceX: src.x,
     sourceY: src.y,
     targetX: tgt.x,
@@ -2138,8 +2209,11 @@ function FkEdgeComponent({
     toModel,
     toColumn,
     cardinality,
-    discrepancyStatus
+    role,
+    discrepancyStatus,
+    pairs: data.pairs
   });
+  const compositeSize = data.pairs && data.pairs.length > 1 ? data.pairs.length : 0;
   let sourceLabel;
   let targetLabel;
   switch (cardinality) {
@@ -2168,8 +2242,8 @@ function FkEdgeComponent({
   const labelColorClass = discrepancyStatus ? `fk-edge__label--discrepancy-${discrepancyStatus}` : `fk-edge__label--${stage ?? "logical"}`;
   const srcLabel = offsetPoint(adjustedSourceX, adjustedSourceY, sourcePosition, LABEL_OFFSET);
   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;
+  const midX = isSelfLoop ? (src.x + tgt.x) / 2 + loopRadius * 0.75 : (adjustedSourceX + adjustedTargetX) / 2;
+  const midY = isSelfLoop ? (src.y + tgt.y) / 2 - loopRadius * 0.75 : (adjustedSourceY + adjustedTargetY) / 2;
   return /* @__PURE__ */ jsxs6(Fragment3, { children: [
     /* @__PURE__ */ jsx8(
       "path",
@@ -2211,6 +2285,30 @@ function FkEdgeComponent({
           children: targetLabel
         }
       ),
+      role && /* @__PURE__ */ jsx8(
+        "span",
+        {
+          className: `fk-edge__role ${labelColorClass}${dimmed ? " fk-edge__label--dimmed" : ""}`,
+          style: {
+            transform: `translate(-50%, calc(-100% - 10px)) translate(${midX}px, ${midY}px)`
+          },
+          children: role
+        }
+      ),
+      compositeSize > 0 && /* @__PURE__ */ jsxs6(
+        "span",
+        {
+          className: `fk-edge__composite ${labelColorClass}${dimmed ? " fk-edge__label--dimmed" : ""}`,
+          style: {
+            transform: `translate(-50%, calc(100% + 6px)) translate(${midX}px, ${midY}px)`
+          },
+          title: `Composite foreign key: ${compositeSize} column pairs`,
+          children: [
+            "\u29C9 ",
+            compositeSize
+          ]
+        }
+      ),
       discrepancyStatus === "cardinality-mismatch" && /* @__PURE__ */ jsx8(
         "span",
         {
@@ -4538,6 +4636,10 @@ function ColumnEditor({ modelName, columns, readOnly, modelRole }) {
 
 // src/components/DetailPanel/DetailPanel.tsx
 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);
+  return cols.length === 1 ? cols[0] : `(${cols.join(", ")})`;
+}
 var SOURCE_NAME = {
   catalog: "warehouse catalog",
   yml: "your dbt .yml",
@@ -4659,6 +4761,7 @@ function DetailPanel() {
     handleClose();
   }, [selectedNode, host, handleClose]);
   const handleDeleteRelationship = useCallback22(
+    // A composite sends its first pair; the host removes the whole group (#133 L2).
     (rel) => {
       host.postMessage({
         type: "removeRelationship",
@@ -4679,7 +4782,10 @@ function DetailPanel() {
         fromColumn: rel.fromColumn,
         toModel: rel.toModel,
         toColumn: rel.toColumn,
-        cardinality: rel.cardinality
+        cardinality: rel.cardinality,
+        // Carried so Edit opens with it — the dialog saves what it shows.
+        ...rel.role ? { role: rel.role } : {},
+        ...rel.pairs ? { pairs: rel.pairs, ...rel.compositeKey ? { compositeKey: rel.compositeKey } : {} } : {}
       };
       openEdgeContextMenu(x, y, edgeData);
     },
@@ -4693,8 +4799,9 @@ function DetailPanel() {
     if (!domain || !selectedNode) {
       return { outgoing: [], incoming: [] };
     }
-    const outgoing2 = domain.relationships.filter((r) => r.fromModel === selectedNode);
-    const incoming2 = domain.relationships.filter((r) => r.toModel === selectedNode);
+    const rels = foldComposites(domain.relationships);
+    const outgoing2 = rels.filter((r) => r.fromModel === selectedNode);
+    const incoming2 = rels.filter((r) => r.toModel === selectedNode && r.fromModel !== selectedNode);
     return { outgoing: outgoing2, incoming: incoming2 };
   }, [domain, selectedNode]);
   const isReadOnly = domain?.readOnly ?? false;
@@ -4862,14 +4969,14 @@ function DetailPanel() {
             },
             title: viewer ? void 0 : "Click to edit cardinality",
             children: [
-              /* @__PURE__ */ jsx22("span", { className: "detail-panel__rel-direction", title: "Outgoing FK", children: "\u2192" }),
+              /* @__PURE__ */ jsx22("span", { className: "detail-panel__rel-direction", title: rel.toModel === rel.fromModel ? "Self-reference" : "Outgoing FK", children: rel.toModel === rel.fromModel ? "\u21BB" : "\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-local", title: columnsText(rel, "from"), children: columnsText(rel, "from") }),
                 /* @__PURE__ */ jsx22("span", { className: "detail-panel__rel-arrow", children: "\u2192" }),
-                /* @__PURE__ */ jsxs19("span", { className: "detail-panel__rel-target", title: `${rel.toModel}.${rel.toColumn}`, children: [
+                /* @__PURE__ */ jsxs19("span", { className: "detail-panel__rel-target", title: `${rel.toModel}.${columnsText(rel, "to")}`, children: [
                   rel.toModel,
                   ".",
-                  rel.toColumn
+                  columnsText(rel, "to")
                 ] })
               ] }),
               /* @__PURE__ */ jsx22("span", { className: "detail-panel__rel-cardinality", children: rel.cardinality }),
@@ -4888,7 +4995,7 @@ function DetailPanel() {
               )
             ]
           },
-          `out-${rel.fromColumn}-${rel.toModel}-${rel.toColumn}`
+          `out-${relationshipEdgeId(rel)}`
         )),
         incoming.map((rel) => /* @__PURE__ */ jsxs19(
           "div",
@@ -4908,13 +5015,13 @@ function DetailPanel() {
             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: [
+                /* @__PURE__ */ jsxs19("span", { className: "detail-panel__rel-target", title: `${rel.fromModel}.${columnsText(rel, "from")}`, children: [
                   rel.fromModel,
                   ".",
-                  rel.fromColumn
+                  columnsText(rel, "from")
                 ] }),
                 /* @__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__ */ 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 }),
               !isReadOnly && /* @__PURE__ */ jsx22(
@@ -4932,7 +5039,7 @@ function DetailPanel() {
               )
             ]
           },
-          `in-${rel.fromModel}-${rel.fromColumn}-${rel.toColumn}`
+          `in-${relationshipEdgeId(rel)}`
         ))
       ] })
     ] })
@@ -5379,12 +5486,26 @@ var ErdCanvas = forwardRef(function ErdCanvas2(props, ref) {
   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 }) }) }) });
 });
 
+// src/index.ts
+import {
+  toMermaid,
+  toDbml,
+  exportDiagram,
+  diagramExportFileName,
+  DIAGRAM_EXPORT_FORMATS,
+  DIAGRAM_EXPORT_FILE_EXTENSIONS
+} from "@erd-studio/core";
+
 export {
   NOOP_CANVAS_HOST,
   CanvasEnvironmentProvider,
   useCanvasHost,
   useSend,
   useIsViewer,
+  columnPairs,
+  relationshipDisplayKey,
+  relationshipEdgeId,
+  foldComposites,
   computeModelLabels,
   matchesModelSearch,
   pickHandleSides,
@@ -5425,5 +5546,11 @@ export {
   ColumnRowEditor,
   DetailPanel,
   Legend,
-  ErdCanvas
+  ErdCanvas,
+  toMermaid,
+  toDbml,
+  exportDiagram,
+  diagramExportFileName,
+  DIAGRAM_EXPORT_FORMATS,
+  DIAGRAM_EXPORT_FILE_EXTENSIONS
 };

package/dist/editor.js

@@ -8,6 +8,8 @@ import {
   CanvasBackdrop,
   CanvasEnvironmentProvider,
   ColumnRowEditor,
+  DIAGRAM_EXPORT_FILE_EXTENSIONS,
+  DIAGRAM_EXPORT_FORMATS,
   DISCREPANCY_PHRASE,
   DataTypeSelect,
   DetailPanel,
@@ -28,15 +30,23 @@ import {
   applyNodeOverlays,
   canvasEdgeTypes,
   canvasNodeTypes,
+  columnPairs,
   computeModelLabels,
+  diagramExportFileName,
   edgeHoverText,
+  exportDiagram,
+  foldComposites,
   getDataTypeColor,
   matchesModelSearch,
   nodeRect,
   pickHandleSides,
+  relationshipDisplayKey,
+  relationshipEdgeId,
   repickHandleSides,
   stageNodeColor,
   swapCardinality,
+  toDbml,
+  toMermaid,
   transformDomain,
   useCanvasGraph,
   useCanvasHost,
@@ -45,7 +55,7 @@ import {
   useIsViewer,
   useLongPressDrag,
   useSend
-} from "./chunk-5OQLRX7R.js";
+} from "./chunk-H2ACJRPZ.js";
 import "./chunk-QZGU5NZH.js";
 import "./chunk-6XQXDZ4R.js";
 import {
@@ -77,6 +87,8 @@ export {
   CanvasEnvironmentProvider,
   CanvasStoreProvider,
   ColumnRowEditor,
+  DIAGRAM_EXPORT_FILE_EXTENSIONS,
+  DIAGRAM_EXPORT_FORMATS,
   DISCREPANCY_PHRASE,
   DataTypeSelect,
   DetailPanel,
@@ -99,21 +111,29 @@ export {
   applyNodeOverlays,
   canvasEdgeTypes,
   canvasNodeTypes,
+  columnPairs,
   computeModelLabels,
   countVisibleColumnRows,
   createCanvasSlice,
   createCanvasStore,
+  diagramExportFileName,
   edgeHoverText,
   estimateNodeHeight,
   estimateNodeWidth,
+  exportDiagram,
+  foldComposites,
   getDataTypeColor,
   matchesModelSearch,
   nodeRect,
   pickHandleSides,
+  relationshipDisplayKey,
+  relationshipEdgeId,
   repickHandleSides,
   resolveNodeDimensions,
   stageNodeColor,
   swapCardinality,
+  toDbml,
+  toMermaid,
   transformDomain,
   useCanvasGraph,
   useCanvasHost,

package/dist/index.js

@@ -1,16 +1,28 @@
 import {
+  DIAGRAM_EXPORT_FILE_EXTENSIONS,
+  DIAGRAM_EXPORT_FORMATS,
   ErdCanvas,
+  diagramExportFileName,
+  exportDiagram,
   nodeRect,
   pickHandleSides,
   repickHandleSides,
+  toDbml,
+  toMermaid,
   transformDomain
-} from "./chunk-5OQLRX7R.js";
+} from "./chunk-H2ACJRPZ.js";
 import "./chunk-DUQ2TTQH.js";
 import "./chunk-WOTSQZCQ.js";
 export {
+  DIAGRAM_EXPORT_FILE_EXTENSIONS,
+  DIAGRAM_EXPORT_FORMATS,
   ErdCanvas,
+  diagramExportFileName,
+  exportDiagram,
   nodeRect,
   pickHandleSides,
   repickHandleSides,
+  toDbml,
+  toMermaid,
   transformDomain
 };

package/dist/styles.css

@@ -818,6 +818,29 @@
 .fk-edge__label--discrepancy-cardinality-mismatch {
   color: var(--discrepancy-mismatch);
 }
+.fk-edge__role {
+  position: absolute;
+  pointer-events: none;
+  padding: 1px 6px;
+  border-radius: 8px;
+  background: var(--panel-bg);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+.fk-edge__composite {
+  position: absolute;
+  pointer-events: none;
+  padding: 0 5px;
+  border: 1px solid currentColor;
+  border-radius: 8px;
+  background: var(--panel-bg);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1.4;
+  white-space: nowrap;
+}
 .fk-edge__mismatch-badge {
   position: absolute;
   display: flex;

package/dist/types/editor.d.ts

@@ -24,5 +24,6 @@ export * from './lib/stageColors.js';
 export * from './lib/dataTypeColors.js';
 export * from './lib/badgeLabels.js';
 export { swapCardinality } from './lib/cardinalityUtils.js';
+export { columnPairs, foldComposites, relationshipDisplayKey, relationshipEdgeId } from './lib/relationshipDisplayKey.js';
 export { computeModelLabels, matchesModelSearch, type LabelledModel } from './lib/modelLabels.js';
 export { ANNOTATION_COLORS } from './lib/annotationColors.js';

package/dist/types/index.d.ts

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

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

@@ -52,7 +52,13 @@ export interface EdgeHoverInput {
     toModel: string;
     toColumn: string;
     cardinality: string;
+    role?: string;
     discrepancyStatus?: 'extra' | 'missing' | 'cardinality-mismatch';
+    /** A composite foreign key's column pairs (#133 L2). */
+    pairs?: ReadonlyArray<{
+        fromColumn: string;
+        toColumn: string;
+    }>;
 }
 /**
  * Hover text for a relationship line: which columns it joins, its cardinality,

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

@@ -0,0 +1,7 @@
+import type { DbtKeyHint } from '@erd-studio/core';
+/**
+ * The line a column's hover text gains for what dbt's tests say about it
+ * (#133 L1). It informs a new relationship's direction only, so it is never
+ * a badge: the key flags are the user's design decision.
+ */
+export declare function dbtKeyTitle(hint: DbtKeyHint): string;

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

@@ -0,0 +1,37 @@
+/**
+ * One line per relationship, a composite foreign key included (#133 L2).
+ *
+ * The members of a composite (entries sharing a `compositeKey`) are folded
+ * into one relationship carrying all its column pairs: edges attach to node
+ * sides, not column rows, so N member lines between two nodes would only
+ * crowd the side. `fromColumn` / `toColumn` stay the first pair, which is what
+ * a delete or ⇄ sends — the host expands it to the group.
+ */
+import type { ColumnPair } from '@erd-studio/core';
+type Ends = {
+    fromModel: string;
+    fromColumn: string;
+    toModel: string;
+    toColumn: string;
+};
+type WithPairs = Ends & {
+    pairs?: readonly ColumnPair[];
+};
+/** The column pairs a (possibly folded) relationship joins: its `pairs`, else its one pair. */
+export declare function columnPairs(rel: WithPairs): ColumnPair[];
+/** `from|a+b|to|c+d`: how an edge and its discrepancy entry find each other. */
+export declare function relationshipDisplayKey(rel: WithPairs): string;
+/** The React Flow edge id graphTransformer gives a relationship. */
+export declare function relationshipEdgeId(rel: WithPairs): string;
+/**
+ * Fold the members of each composite foreign key into one relationship with
+ * `pairs` (two or more), placed where its first member falls; everything else
+ * passes through unchanged. Members are grouped by from-model, to-model and
+ * `compositeKey`, without case.
+ */
+export declare function foldComposites<T extends Ends & {
+    compositeKey?: string;
+}>(rels: readonly T[]): Array<T & {
+    pairs?: ColumnPair[];
+}>;
+export {};

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

@@ -6,7 +6,7 @@
  * these shapes.
  */
 import type { Node, Edge } from '@xyflow/react';
-import type { AnnotationColor, Cardinality, Layer, Meta, ModelLoadError, ModelRole, Stage } from '@erd-studio/core';
+import type { AnnotationColor, Cardinality, ColumnPair, DbtKeyHint, Layer, Meta, ModelLoadError, ModelRole, Stage } from '@erd-studio/core';
 import type { LayerConfig } from '@erd-studio/core';
 import type { ModelDiscrepancy } from '@erd-studio/core';
 import type { PhysicalProvenance } from '@erd-studio/core';
@@ -27,6 +27,8 @@ export interface ColumnDisplay {
     additiveType?: 'additive' | 'semi-additive' | 'non-additive';
     /** Structured metadata (`meta:`) — shown in the tooltip. Absent when empty. */
     meta?: Meta;
+    /** What dbt's tests say about the column (editable logical canvas only) — one line of its hover text. */
+    dbtKey?: DbtKeyHint;
 }
 /** Data payload for a ModelNode React Flow node. */
 export type ModelNodeData = {
@@ -119,6 +121,15 @@ export type FkEdgeData = {
     toModel: string;
     toColumn: string;
     cardinality: Cardinality;
+    /** Optional label for the link, e.g. `ship date`, drawn at the edge's midpoint. */
+    role?: string;
+    /**
+     * A composite foreign key's column pairs (two or more; #133 L2). Absent for
+     * a single-column link; `fromColumn` / `toColumn` are always the first pair.
+     */
+    pairs?: ColumnPair[];
+    /** The composite's `compositeKey` name, alongside `pairs`. */
+    compositeKey?: string;
     /** Stage of the owning domain canvas — drives CSS colour class. */
     stage?: Stage;
     /** Discrepancy status for ghost/extra/mismatch edges. */
@@ -129,6 +140,11 @@ export type FkEdgeData = {
     readOnly?: boolean;
     /** True when source === target — renders a loop arc over the top-right corner. */
     isSelfLoop?: boolean;
+    /**
+     * For a self-loop: its place among the node's self-loops, by edge id (#133
+     * L3). Each one is drawn wider than the last, so loops nest, never cross.
+     */
+    loopIndex?: number;
     /** Index signature required by React Flow's Edge generic. */
     [key: string]: unknown;
 };

package/package.json

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