@rocksoliddigital/payload-lineage 0.0.0-stage → 0.3.0

package/dist/client.js

@@ -0,0 +1,1111 @@
+'use client';
+
+// src/view/ErdCanvas.tsx
+import "@xyflow/react/dist/style.css";
+import "./lineage.css";
+import {
+  Background,
+  Controls,
+  Handle,
+  MiniMap,
+  Panel,
+  Position,
+  ReactFlow,
+  ReactFlowProvider,
+  useReactFlow
+} from "@xyflow/react";
+
+// ../lineage-core/src/react.ts
+import { useCallback, useEffect, useState } from "react";
+
+// ../lineage-core/src/layout.ts
+import ELK from "elkjs/lib/elk.bundled.js";
+function layoutInput(nodes, edges, { layerSpacing, nodeSpacing, placement }) {
+  return {
+    id: "root",
+    layoutOptions: {
+      "elk.algorithm": "layered",
+      "elk.direction": "RIGHT",
+      "elk.layered.spacing.nodeNodeBetweenLayers": String(layerSpacing),
+      "elk.spacing.nodeNode": String(nodeSpacing),
+      "elk.layered.nodePlacement.strategy": placement
+    },
+    children: nodes.map(({ id, width, height }) => ({ id, width, height })),
+    edges: edges.filter((e) => e.source !== e.target).map((e, i) => ({
+      id: `e${i}`,
+      sources: [e.source],
+      targets: [e.target],
+      ...e.priority !== void 0 && {
+        layoutOptions: { "elk.layered.priority.direction": String(e.priority) }
+      }
+    }))
+  };
+}
+var elk;
+async function layout(nodes, edges, options) {
+  elk ??= new ELK();
+  const result = await elk.layout(layoutInput(nodes, edges, options));
+  return new Map(result.children?.map((c) => [c.id, { x: c.x ?? 0, y: c.y ?? 0 }]));
+}
+function layoutKey(nodes, edges, { layerSpacing, nodeSpacing, placement }) {
+  return [
+    nodes.map((n) => `${n.id}:${n.width}x${n.height}`).sort().join("|"),
+    edges.map((e) => `${e.source}>${e.target}:${e.priority ?? 0}`).sort().join("|"),
+    `${layerSpacing}/${nodeSpacing}/${placement}`
+  ].join("#");
+}
+
+// ../lineage-core/src/react.ts
+function useLayout(nodes, edges, options, onLayout) {
+  const [positions, setPositions] = useState(null);
+  const key = layoutKey(nodes, edges, options);
+  useEffect(() => {
+    let cancelled = false;
+    layout(nodes, edges, options).then((next) => {
+      if (cancelled) return;
+      setPositions(next);
+      onLayout?.();
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [key]);
+  return positions;
+}
+async function copyText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    const area = document.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    document.body.appendChild(area);
+    area.select();
+    try {
+      return document.execCommand("copy");
+    } catch {
+      return false;
+    } finally {
+      area.remove();
+    }
+  }
+}
+function useCopy(resetAfterMs = 2e3) {
+  const [status, setStatus] = useState("idle");
+  const copy = useCallback(async (text) => {
+    setStatus(await copyText(text) ? "copied" : "failed");
+  }, []);
+  useEffect(() => {
+    if (status === "idle") return;
+    const timer = setTimeout(() => setStatus("idle"), resetAfterMs);
+    return () => clearTimeout(timer);
+  }, [status, resetAfterMs]);
+  return { status, copy };
+}
+
+// src/view/ErdCanvas.tsx
+import { useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+
+// ../lineage-core/src/traverse.ts
+function adjacency(links) {
+  const up = /* @__PURE__ */ new Map();
+  const down = /* @__PURE__ */ new Map();
+  const add = (map, key, value) => {
+    const list = map.get(key);
+    if (list) list.push(value);
+    else map.set(key, [value]);
+  };
+  for (const { source, target } of links) {
+    add(up, target, source);
+    add(down, source, target);
+  }
+  return { up, down };
+}
+function walk(start, next, maxDepth = Infinity) {
+  const seen = /* @__PURE__ */ new Set();
+  let frontier = [start];
+  for (let level = 0; level < maxDepth && frontier.length; level++) {
+    const reached = [];
+    for (const id of frontier) {
+      for (const to of next.get(id) ?? []) {
+        if (to === start || seen.has(to)) continue;
+        seen.add(to);
+        reached.push(to);
+      }
+    }
+    frontier = reached;
+  }
+  return seen;
+}
+function trace(id, links) {
+  const { up, down } = adjacency(links);
+  return /* @__PURE__ */ new Set([id, ...walk(id, up), ...walk(id, down)]);
+}
+
+// ../lineage-core/src/mermaid.ts
+var MERMAID_READABLE_NODES = 50;
+var ARROW = { solid: "-->", dashed: "-.->", thick: "==>" };
+var MERMAID_COLOR = /^(#[0-9a-f]{3,8}|[a-z]+)$/i;
+function toMermaidFlowchart({
+  nodes,
+  edges,
+  groups = [],
+  direction = "LR"
+}) {
+  const ids = new Map(nodes.map((n, i) => [n.id, `n${i}`]));
+  const lines = [`flowchart ${direction}`];
+  for (const n of nodes) lines.push(`  ${ids.get(n.id)}["${escapeLabel(n.label)}"]`);
+  for (const e of edges) {
+    const from = ids.get(e.source);
+    const to = ids.get(e.target);
+    if (!from || !to) continue;
+    const arrow = ARROW[e.style ?? "solid"];
+    const label = e.label ? `|"${escapeLabel(e.label)}"|` : "";
+    lines.push(`  ${from} ${arrow}${label} ${to}`);
+  }
+  const used = new Set(nodes.map((n) => n.group).filter(Boolean));
+  groups.forEach((g, i) => {
+    if (!used.has(g.id) || !MERMAID_COLOR.test(g.color)) return;
+    const members = nodes.filter((n) => n.group === g.id).map((n) => ids.get(n.id));
+    lines.push(`  classDef g${i} fill:${g.color},stroke:${g.color},color:#fff`);
+    lines.push(`  class ${members.join(",")} g${i}`);
+  });
+  return `${lines.join("\n")}
+`;
+}
+function escapeLabel(text) {
+  return text.replace(/#/g, "#35;").replace(/"/g, "#quot;").replace(/</g, "#lt;").replace(/>/g, "#gt;");
+}
+
+// src/mermaid.ts
+var KIND_COLORS = {
+  collection: "#0f7c74",
+  block: "#b4630c",
+  global: "#6b4bb8"
+};
+var EDGE_STYLE = { relationship: "solid", upload: "dashed", blocks: "thick" };
+function contentGraphToMermaid(graph) {
+  return toMermaidFlowchart({
+    nodes: graph.nodes.map((n) => ({ id: n.id, label: n.label, group: n.kind })),
+    edges: graph.edges.map((e) => ({
+      source: e.source,
+      target: e.target,
+      label: e.fields.join(", "),
+      style: EDGE_STYLE[e.kind]
+    })),
+    groups: Object.entries(KIND_COLORS).map(([id, color]) => ({ id, color }))
+  });
+}
+function schemaToMermaid(schema) {
+  const names = entityNames(schema.entities);
+  const byId = new Map(schema.entities.map((e) => [e.id, e]));
+  const lines = ["erDiagram"];
+  for (const entity of schema.entities) {
+    const keys = new Set(schema.relations.filter((r) => r.from === entity.id).map((r) => r.field));
+    lines.push(`  ${names.get(entity.id)}["${escapeLabel(entity.label)}"] {`);
+    for (const field of entity.fields) lines.push(`    ${attribute(field, keys.has(field.name))}`);
+    lines.push("  }");
+  }
+  const lineGroups = /* @__PURE__ */ new Map();
+  for (const r of schema.relations) {
+    if (!names.has(r.from) || !names.has(r.to)) continue;
+    const key = `${r.from}
+${r.field}
+${r.to}`;
+    lineGroups.set(key, [...lineGroups.get(key) ?? [], r]);
+  }
+  for (const group of lineGroups.values()) {
+    const { from, to, field } = group[0];
+    const row = byId.get(from)?.fields.find((f) => f.name === field);
+    const label = [...new Set(group.map((r) => r.path))].join(", ");
+    lines.push(
+      `  ${names.get(from)} ${crowsFoot(group, from, !!row?.required)} ${names.get(to)} : "${escapeLabel(label)}"`
+    );
+  }
+  return `${lines.join("\n")}
+`;
+}
+function entityNames(entities) {
+  const names = /* @__PURE__ */ new Map();
+  const taken = /* @__PURE__ */ new Set();
+  for (const e of entities) {
+    const base = `${e.kind === "global" ? "global_" : ""}${e.slug}`.replace(/[^A-Za-z0-9_-]/g, "_");
+    let name = /^[A-Za-z]/.test(base) ? base : `e_${base}`;
+    for (let i = 2; taken.has(name); i++) name = `${base}_${i}`;
+    taken.add(name);
+    names.set(e.id, name);
+  }
+  return names;
+}
+function attribute(field, isReference) {
+  const type = `${safeWord(field.type)}${field.hasMany ? "[]" : ""}`;
+  const name = safeWord(field.name);
+  const key = field.type === "id" || field.name === "id" ? " PK" : isReference ? " FK" : "";
+  const notes = [
+    ...name !== field.name ? [field.name] : [],
+    ...field.required ? ["required"] : [],
+    ...field.unique ? ["unique"] : [],
+    ...field.relationTo ? [`\u2192 ${field.relationTo.join(" | ")}`] : [],
+    ...field.blocks ? [`blocks: ${field.blocks.join(", ")}`] : []
+  ];
+  const comment = notes.length ? ` "${escapeLabel(notes.join(", "))}"` : "";
+  return `${type} ${name}${key}${comment}`;
+}
+function safeWord(text) {
+  const word = text.replace(/[^A-Za-z0-9_\-[\]()]/g, "_");
+  return /^[A-Za-z]/.test(word) ? word : `f_${word}`;
+}
+function crowsFoot(relations, from, required) {
+  const many = relations.some((r) => r.many);
+  const atMostOne = from.startsWith("global:") || relations.every((r) => r.unique) && !many;
+  const fromSide = atMostOne ? "|o" : "}o";
+  const atLeastOne = required && relations.every((r) => !r.polymorphic && r.field === r.path);
+  const toSide = many ? atLeastOne ? "|{" : "o{" : atLeastOne ? "||" : "o|";
+  return `${fromSide}--${toSide}`;
+}
+
+// src/view/CopyMermaid.tsx
+import { jsxs } from "react/jsx-runtime";
+var CopyMermaid = ({ text, size }) => {
+  const { status, copy } = useCopy();
+  const large = size > MERMAID_READABLE_NODES;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "rs-lineage__copy",
+      onClick: () => copy(text()),
+      title: large ? `${size} is a lot for one Mermaid diagram; narrow it with the filters first for one that reads well` : "Copy what the page shows as a Mermaid diagram, for a PR, doc or ticket",
+      "aria-live": "polite",
+      children: [
+        status === "copied" ? "Copied" : status === "failed" ? "Couldn't copy" : "Copy Mermaid",
+        large && status === "idle" ? " (large)" : ""
+      ]
+    }
+  );
+};
+
+// src/view/erdModel.ts
+var TABLE_WIDTH = 260;
+var HEADER_HEIGHT = 44;
+var ROW_HEIGHT = 24;
+var FOOTER_HEIGHT = 26;
+var ROW_LIMIT = 10;
+function cardinalityOf(relation) {
+  if (relation.from.startsWith("global:")) return relation.many ? "one-to-many" : "one-to-one";
+  if (relation.many) return "many-to-many";
+  return relation.unique ? "one-to-one" : "many-to-one";
+}
+var LOOSENESS = ["one-to-one", "one-to-many", "many-to-one", "many-to-many"];
+function describeCardinality(cardinality, from, to) {
+  if (from.kind === "global") {
+    return cardinality === "one-to-many" ? `The ${from.label} references many ${to.label}.` : `The ${from.label} references one ${to.singular}.`;
+  }
+  if (cardinality === "one-to-one") {
+    return `Each ${from.singular} references one ${to.singular}, and a ${to.singular} can be referenced by only one ${from.singular}.`;
+  }
+  if (cardinality === "many-to-one") {
+    return `Each ${from.singular} references one ${to.singular}; a ${to.singular} can be referenced by many ${from.label}.`;
+  }
+  return `Each ${from.singular} references many ${to.label}; a ${to.singular} can be referenced by many ${from.label}.`;
+}
+function erdEdges(relations) {
+  const edges = /* @__PURE__ */ new Map();
+  for (const r of relations) {
+    if (r.from === r.to) continue;
+    const id = `${r.from}.${r.field}->${r.to}`;
+    const edge = edges.get(id) ?? {
+      id,
+      from: r.from,
+      field: r.field,
+      to: r.to,
+      cardinality: cardinalityOf(r),
+      relations: []
+    };
+    edge.relations.push(r);
+    const own = cardinalityOf(r);
+    if (LOOSENESS.indexOf(own) > LOOSENESS.indexOf(edge.cardinality)) edge.cardinality = own;
+    edges.set(id, edge);
+  }
+  return [...edges.values()];
+}
+function selfReferences(entity, relations) {
+  return new Set(
+    relations.filter((r) => r.from === entity.id && r.to === entity.id).map((r) => r.field)
+  );
+}
+function visibleRows(entity, relations, { keysOnly, expanded }) {
+  const linked = new Set(relations.filter((r) => r.from === entity.id).map((r) => r.field));
+  const isKey = (f) => f.type === "id" || f.name === "id" || linked.has(f.name) || f.type === "join";
+  if (keysOnly) {
+    const rows2 = entity.fields.filter(isKey);
+    return { rows: rows2, hidden: entity.fields.length - rows2.length };
+  }
+  if (expanded || entity.fields.length <= ROW_LIMIT) return { rows: entity.fields, hidden: 0 };
+  const keys = entity.fields.filter(isKey).length;
+  let budget = Math.max(ROW_LIMIT - keys, 0);
+  const rows = entity.fields.filter((f) => isKey(f) || budget-- > 0);
+  return { rows, hidden: entity.fields.length - rows.length };
+}
+function tableHeight(rows, hidden) {
+  return HEADER_HEIGHT + rows * ROW_HEIGHT + (hidden ? FOOTER_HEIGHT : 0) + 4;
+}
+var ERD_LAYOUT = {
+  layerSpacing: 110,
+  nodeSpacing: 28,
+  placement: "NETWORK_SIMPLEX"
+};
+
+// src/view/model.ts
+var NODE_WIDTH = 200;
+var STACKED_BELOW = 960;
+function fitPadding(layoutWidth) {
+  const right = layoutWidth > STACKED_BELOW ? "360px" : "24px";
+  return { top: "96px", right, bottom: "24px", left: "24px" };
+}
+var NODE_HEIGHT = 48;
+function visibleGraph(graph, { hiddenKinds, hideUnconnected }) {
+  let nodes = graph.nodes.filter((n) => !hiddenKinds.has(n.kind));
+  let edges = edgesBetween(nodes, graph.edges);
+  if (hideUnconnected) {
+    const linked = new Set(
+      edges.filter((e) => e.source !== e.target).flatMap((e) => [e.source, e.target])
+    );
+    nodes = nodes.filter((n) => linked.has(n.id));
+    edges = edgesBetween(nodes, edges);
+  }
+  return { nodes, edges };
+}
+var LINEAGE_LAYOUT = {
+  layerSpacing: 80,
+  nodeSpacing: 16,
+  placement: "NETWORK_SIMPLEX"
+};
+function layoutEdges(edges) {
+  return edges.map(({ source, target, kind }) => ({
+    source,
+    target,
+    priority: kind === "relationship" ? 0 : 10
+  }));
+}
+function linksToItself(id, edges) {
+  return edges.some((e) => e.source === id && e.target === id);
+}
+function edgesBetween(nodes, edges) {
+  const ids = new Set(nodes.map((n) => n.id));
+  return edges.filter((e) => ids.has(e.source) && ids.has(e.target));
+}
+
+// src/view/ErdCanvas.tsx
+import { jsx, jsxs as jsxs2 } from "react/jsx-runtime";
+var ErdCanvas = (props) => /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(Canvas, { ...props }) });
+var Canvas = ({ schema, adminURLs }) => {
+  const { fitView } = useReactFlow();
+  const layoutRef = useRef(null);
+  const [showGlobals, setShowGlobals] = useState2(true);
+  const [keysOnly, setKeysOnly] = useState2(false);
+  const [expanded, setExpanded] = useState2(/* @__PURE__ */ new Set());
+  const [hovered, setHovered] = useState2(null);
+  const [selected, setSelected] = useState2(null);
+  const entities = useMemo(
+    () => schema.entities.filter((e) => showGlobals || e.kind !== "global"),
+    [schema, showGlobals]
+  );
+  const relations = useMemo(() => {
+    const ids = new Set(entities.map((e) => e.id));
+    return schema.relations.filter((r) => ids.has(r.from) && ids.has(r.to));
+  }, [schema, entities]);
+  const lines = useMemo(() => erdEdges(relations), [relations]);
+  const tables = useMemo(
+    () => entities.map((entity) => {
+      const isExpanded = expanded.has(entity.id);
+      const { rows, hidden } = visibleRows(entity, relations, { keysOnly, expanded: isExpanded });
+      return {
+        entity,
+        rows,
+        hidden,
+        expanded: isExpanded,
+        // Room for the "+N more" or "Show fewer" button under the rows
+        height: tableHeight(rows.length, !keysOnly && (hidden || isExpanded) ? 1 : 0),
+        selfRefs: selfReferences(entity, relations),
+        linked: new Set(relations.filter((r) => r.from === entity.id).map((r) => r.field))
+      };
+    }),
+    [entities, relations, keysOnly, expanded]
+  );
+  const positions = useLayout(
+    useMemo(
+      () => tables.map((t) => ({ id: t.entity.id, width: TABLE_WIDTH, height: t.height })),
+      [tables]
+    ),
+    useMemo(() => lines.map((l) => ({ source: l.from, target: l.to })), [lines]),
+    ERD_LAYOUT,
+    () => requestAnimationFrame(
+      () => fitView({ padding: fitPadding(layoutRef.current?.clientWidth ?? 0) })
+    )
+  );
+  const neighbours = useMemo(() => {
+    if (!hovered) return null;
+    const ids = /* @__PURE__ */ new Set([hovered]);
+    for (const l of lines) {
+      if (l.from === hovered) ids.add(l.to);
+      if (l.to === hovered) ids.add(l.from);
+    }
+    return ids;
+  }, [hovered, lines]);
+  const nodes = useMemo(() => {
+    if (!positions) return [];
+    return tables.flatMap((t) => {
+      const position = positions.get(t.entity.id);
+      if (!position) return [];
+      let state = "default";
+      if (neighbours)
+        state = t.entity.id === hovered ? "active" : neighbours.has(t.entity.id) ? "related" : "dimmed";
+      else if (t.entity.id === selected) state = "selected";
+      return [
+        {
+          id: t.entity.id,
+          type: "table",
+          position,
+          width: TABLE_WIDTH,
+          height: t.height,
+          data: {
+            entity: t.entity,
+            rows: t.rows,
+            hidden: t.hidden,
+            expanded: t.expanded,
+            canExpand: !keysOnly,
+            selfRefs: t.selfRefs,
+            linked: t.linked,
+            state,
+            onSelect: setSelected,
+            onTrace: setHovered,
+            onToggle: () => setExpanded((current) => {
+              const next = new Set(current);
+              if (next.has(t.entity.id)) next.delete(t.entity.id);
+              else next.add(t.entity.id);
+              return next;
+            })
+          }
+        }
+      ];
+    });
+  }, [positions, tables, neighbours, hovered, selected, keysOnly]);
+  const edges = useMemo(
+    () => lines.map((l) => {
+      const on = neighbours && (l.from === hovered || l.to === hovered);
+      const state = neighbours ? on ? " rs-lineage__edge--active" : " rs-lineage__edge--dimmed" : "";
+      const kind = l.relations.every((r) => r.kind === "upload") ? "upload" : "relationship";
+      return {
+        id: l.id,
+        source: l.from,
+        sourceHandle: `row:${l.field}`,
+        target: l.to,
+        targetHandle: "table",
+        type: "smoothstep",
+        label: l.cardinality,
+        labelClassName: "rs-erd__cardinality",
+        labelBgClassName: "rs-erd__cardinality-bg",
+        className: `rs-lineage__edge rs-lineage__edge--${kind}${state}`,
+        animated: !!on
+      };
+    }),
+    [lines, neighbours, hovered]
+  );
+  useEffect2(() => {
+    const onKey = (event) => event.key === "Escape" && setSelected(null);
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+  const byId = useMemo(() => new Map(schema.entities.map((e) => [e.id, e])), [schema]);
+  const focused = selected ? byId.get(selected) : void 0;
+  const fieldCount = entities.reduce((n, e) => n + e.fields.length, 0);
+  return /* @__PURE__ */ jsxs2("div", { className: "rs-lineage-layout", ref: layoutRef, children: [
+    /* @__PURE__ */ jsx("div", { className: "rs-lineage", "data-ready": positions ? "" : void 0, children: /* @__PURE__ */ jsxs2(
+      ReactFlow,
+      {
+        nodes,
+        edges,
+        nodeTypes,
+        nodesDraggable: false,
+        nodesFocusable: false,
+        edgesFocusable: false,
+        nodesConnectable: false,
+        elementsSelectable: false,
+        minZoom: 0.1,
+        onNodeMouseEnter: (_, node) => setHovered(node.id),
+        onNodeMouseLeave: () => setHovered(null),
+        onNodeClick: (_, node) => setSelected(node.id),
+        onPaneClick: () => setSelected(null),
+        proOptions: { hideAttribution: true },
+        children: [
+          /* @__PURE__ */ jsx(Background, { gap: 24 }),
+          /* @__PURE__ */ jsx(Controls, { showInteractive: false }),
+          /* @__PURE__ */ jsx(
+            MiniMap,
+            {
+              pannable: true,
+              zoomable: true,
+              className: "rs-lineage__minimap",
+              nodeClassName: (node) => `rs-lineage__minimap-node--${node.data.entity.kind}`,
+              ariaLabel: "Data model overview"
+            }
+          ),
+          /* @__PURE__ */ jsx(Panel, { position: "top-left", children: /* @__PURE__ */ jsxs2("div", { className: "rs-lineage__toolbar", children: [
+            /* @__PURE__ */ jsxs2("label", { className: "rs-lineage__toggle", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: showGlobals,
+                  onChange: () => setShowGlobals((v) => !v)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "rs-lineage__swatch rs-lineage__swatch--global" }),
+              "Globals"
+            ] }),
+            /* @__PURE__ */ jsxs2("label", { className: "rs-lineage__toggle", children: [
+              /* @__PURE__ */ jsx("input", { type: "checkbox", checked: keysOnly, onChange: () => setKeysOnly((v) => !v) }),
+              "Key fields only"
+            ] }),
+            /* @__PURE__ */ jsxs2("span", { className: "rs-lineage__count", children: [
+              entities.length,
+              " tables, ",
+              fieldCount,
+              " fields, ",
+              lines.length,
+              " references"
+            ] }),
+            /* @__PURE__ */ jsx(
+              CopyMermaid,
+              {
+                text: () => schemaToMermaid({
+                  entities: tables.map(
+                    (t) => keysOnly ? { ...t.entity, fields: t.rows } : t.entity
+                  ),
+                  relations
+                }),
+                size: entities.length
+              }
+            )
+          ] }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Details,
+      {
+        entity: focused,
+        lines,
+        byId,
+        adminURLs,
+        onSelect: setSelected
+      }
+    )
+  ] });
+};
+var Details = ({ entity, lines, byId, adminURLs, onSelect }) => {
+  if (!entity) {
+    return /* @__PURE__ */ jsxs2("aside", { className: "rs-lineage__details", children: [
+      /* @__PURE__ */ jsx("p", { className: "rs-lineage__hint", children: "Hover a table to see what it references and what references it. Click it for the field paths behind each line. Esc clears the selection." }),
+      /* @__PURE__ */ jsxs2("dl", { className: "rs-lineage__legend", children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx("dt", { className: "rs-erd__key", children: "many-to-one" }),
+          /* @__PURE__ */ jsx("dd", { children: "each document references one; many can share it" })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx("dt", { className: "rs-erd__key", children: "many-to-many" }),
+          /* @__PURE__ */ jsx("dd", { children: "a list of references: hasMany, or inside an array or blocks" })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx("dt", { className: "rs-erd__key", children: "one-to-one" }),
+          /* @__PURE__ */ jsx("dd", { children: "a unique reference, or a global's single one" })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx("dt", { className: "rs-erd__key", children: "one-to-many" }),
+          /* @__PURE__ */ jsx("dd", { children: "a global's list of references" })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx("dt", { className: "rs-erd__key", children: "\u21BB" }),
+          /* @__PURE__ */ jsx("dd", { children: "points at its own collection" })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx("dt", { className: "rs-erd__key", children: "*" }),
+          /* @__PURE__ */ jsx("dd", { children: "required" })
+        ] })
+      ] })
+    ] });
+  }
+  const out = lines.filter((l) => l.from === entity.id);
+  const into = lines.filter((l) => l.to === entity.id);
+  const url = adminURLs[entity.id];
+  const item = (line, otherId) => {
+    const other = byId.get(otherId);
+    const from = byId.get(line.from);
+    const to = byId.get(line.to);
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs2("button", { type: "button", className: "rs-lineage__link", onClick: () => onSelect(other.id), children: [
+      /* @__PURE__ */ jsxs2("span", { className: "rs-lineage__link-name", children: [
+        /* @__PURE__ */ jsx("span", { className: `rs-lineage__swatch rs-lineage__swatch--${other.kind}` }),
+        other.label,
+        /* @__PURE__ */ jsx("span", { className: "rs-erd__cardinality-tag", children: line.cardinality })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "rs-erd__sentence", children: describeCardinality(line.cardinality, from, to) }),
+      /* @__PURE__ */ jsx("span", { className: "rs-lineage__via", children: line.relations.map((r) => r.path).join(", ") })
+    ] }) }, line.id);
+  };
+  return /* @__PURE__ */ jsxs2("aside", { className: "rs-lineage__details", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsxs2("span", { className: `rs-lineage__kind rs-lineage__kind--${entity.kind}`, children: [
+        entity.kind,
+        entity.auth ? " \xB7 auth" : "",
+        entity.upload ? " \xB7 upload" : ""
+      ] }),
+      /* @__PURE__ */ jsx("h2", { className: "rs-lineage__name", children: entity.label }),
+      /* @__PURE__ */ jsxs2("code", { className: "rs-lineage__id", children: [
+        entity.slug,
+        " \xB7 ",
+        entity.fields.length,
+        " fields"
+      ] })
+    ] }),
+    url && /* @__PURE__ */ jsx("a", { className: "rs-lineage__open", href: url, children: "Open in the admin" }),
+    /* @__PURE__ */ jsxs2("section", { children: [
+      /* @__PURE__ */ jsxs2("h3", { className: "rs-lineage__heading", children: [
+        "References \xB7 ",
+        out.length
+      ] }),
+      out.length ? /* @__PURE__ */ jsx("ul", { className: "rs-lineage__list", children: out.map((l) => item(l, l.to)) }) : /* @__PURE__ */ jsx("p", { className: "rs-lineage__hint", children: "None of its fields reference another collection." })
+    ] }),
+    /* @__PURE__ */ jsxs2("section", { children: [
+      /* @__PURE__ */ jsxs2("h3", { className: "rs-lineage__heading", children: [
+        "Referenced by \xB7 ",
+        into.length
+      ] }),
+      into.length ? /* @__PURE__ */ jsx("ul", { className: "rs-lineage__list", children: into.map((l) => item(l, l.from)) }) : /* @__PURE__ */ jsx("p", { className: "rs-lineage__hint", children: "Nothing references it." })
+    ] })
+  ] });
+};
+var TableView = ({
+  data: {
+    entity,
+    rows,
+    hidden,
+    expanded,
+    canExpand,
+    selfRefs,
+    linked,
+    state,
+    onToggle,
+    onSelect,
+    onTrace
+  }
+}) => /* @__PURE__ */ jsxs2("div", { className: `rs-erd__table rs-lineage__node--${entity.kind} rs-erd__table--${state}`, children: [
+  /* @__PURE__ */ jsx(
+    Handle,
+    {
+      id: "table",
+      className: "rs-lineage__handle",
+      type: "target",
+      position: Position.Left,
+      isConnectable: false
+    }
+  ),
+  /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      className: "rs-erd__header",
+      title: entity.id,
+      "aria-label": `${entity.label}, ${entity.kind}: show its references`,
+      onClick: () => onSelect(entity.id),
+      onFocus: () => onTrace(entity.id),
+      onBlur: () => onTrace(null),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "rs-erd__title", children: entity.label }),
+        /* @__PURE__ */ jsx("span", { className: "rs-erd__badge", children: entity.kind === "global" ? "global" : entity.auth ? "auth" : entity.upload ? "upload" : entity.slug })
+      ]
+    }
+  ),
+  /* @__PURE__ */ jsx("ul", { className: "rs-erd__rows", children: rows.map((f) => /* @__PURE__ */ jsxs2(
+    "li",
+    {
+      className: `rs-erd__row${linked.has(f.name) ? " rs-erd__row--link" : ""}`,
+      title: describe(f),
+      children: [
+        /* @__PURE__ */ jsxs2("span", { className: "rs-erd__field", children: [
+          f.name,
+          f.required && /* @__PURE__ */ jsx("span", { className: "rs-erd__required", children: "*" }),
+          selfRefs.has(f.name) && /* @__PURE__ */ jsx("span", { className: "rs-erd__self", title: "Points at its own collection", children: "\u21BB" })
+        ] }),
+        /* @__PURE__ */ jsxs2("span", { className: "rs-erd__type", children: [
+          f.type === "blocks" ? `blocks (${f.blocks?.length ?? 0})` : f.type,
+          f.hasMany ? "[]" : ""
+        ] }),
+        linked.has(f.name) && /* @__PURE__ */ jsx(
+          Handle,
+          {
+            id: `row:${f.name}`,
+            className: "rs-lineage__handle",
+            type: "source",
+            position: Position.Right,
+            isConnectable: false
+          }
+        )
+      ]
+    },
+    f.name
+  )) }),
+  canExpand && (hidden > 0 || expanded) && /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "rs-erd__more nodrag",
+      onClick: (event) => {
+        event.stopPropagation();
+        onToggle();
+      },
+      children: expanded ? "Show fewer fields" : `+${hidden} more field${hidden === 1 ? "" : "s"}`
+    }
+  )
+] });
+function describe(f) {
+  const parts = [f.type];
+  if (f.hasMany) parts.push("has many");
+  if (f.required) parts.push("required");
+  if (f.localized) parts.push("localized");
+  if (f.unique) parts.push("unique");
+  if (f.relationTo) parts.push(`\u2192 ${f.relationTo.join(" | ")}`);
+  if (f.blocks) parts.push(`blocks: ${f.blocks.join(", ")}`);
+  return `${f.name}: ${parts.join(", ")}`;
+}
+var nodeTypes = { table: TableView };
+
+// src/view/LineageCanvas.tsx
+import "@xyflow/react/dist/style.css";
+import "./lineage.css";
+import {
+  Background as Background2,
+  Controls as Controls2,
+  Handle as Handle2,
+  MiniMap as MiniMap2,
+  Panel as Panel2,
+  Position as Position2,
+  ReactFlow as ReactFlow2,
+  ReactFlowProvider as ReactFlowProvider2,
+  useReactFlow as useReactFlow2
+} from "@xyflow/react";
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
+import { jsx as jsx2, jsxs as jsxs3 } from "react/jsx-runtime";
+var KINDS = [
+  { kind: "collection", label: "Collections" },
+  { kind: "block", label: "Blocks" },
+  { kind: "global", label: "Globals" }
+];
+var LineageCanvas = (props) => /* @__PURE__ */ jsx2(ReactFlowProvider2, { children: /* @__PURE__ */ jsx2(Canvas2, { ...props }) });
+var Canvas2 = ({ graph, adminURLs }) => {
+  const { fitView } = useReactFlow2();
+  const layoutRef = useRef2(null);
+  const [hiddenKinds, setHiddenKinds] = useState3(/* @__PURE__ */ new Set());
+  const [hideUnconnected, setHideUnconnected] = useState3(true);
+  const [hovered, setHovered] = useState3(null);
+  const [selected, setSelected] = useState3(null);
+  const byId = useMemo2(() => new Map(graph.nodes.map((n) => [n.id, n])), [graph]);
+  const visible = useMemo2(
+    () => visibleGraph(graph, { hiddenKinds, hideUnconnected }),
+    [graph, hiddenKinds, hideUnconnected]
+  );
+  const positions = useLayout(
+    useMemo2(
+      () => visible.nodes.map((n) => ({ id: n.id, width: NODE_WIDTH, height: NODE_HEIGHT })),
+      [visible.nodes]
+    ),
+    useMemo2(() => layoutEdges(visible.edges), [visible.edges]),
+    LINEAGE_LAYOUT,
+    // Leave room on the right for the details panel when it's beside the graph
+    () => requestAnimationFrame(
+      () => fitView({ padding: fitPadding(layoutRef.current?.clientWidth ?? 0) })
+    )
+  );
+  const traced = useMemo2(
+    () => hovered ? trace(hovered, visible.edges) : null,
+    [hovered, visible.edges]
+  );
+  const nodes = useMemo2(() => {
+    if (!positions) return [];
+    return visible.nodes.flatMap((node) => {
+      const position = positions.get(node.id);
+      if (!position) return [];
+      let state = "default";
+      if (traced)
+        state = node.id === hovered ? "active" : traced.has(node.id) ? "related" : "dimmed";
+      else if (node.id === selected) state = "selected";
+      return [
+        {
+          id: node.id,
+          type: "content",
+          position,
+          width: NODE_WIDTH,
+          height: NODE_HEIGHT,
+          data: {
+            node,
+            state,
+            selfLink: linksToItself(node.id, visible.edges),
+            onSelect: setSelected,
+            onTrace: setHovered
+          }
+        }
+      ];
+    });
+  }, [positions, visible, traced, hovered, selected]);
+  const edges = useMemo2(
+    () => visible.edges.filter((e) => e.source !== e.target).map((e) => {
+      const onTrace = traced?.has(e.source) && traced.has(e.target);
+      const state = traced ? onTrace ? " rs-lineage__edge--active" : " rs-lineage__edge--dimmed" : "";
+      return {
+        id: `${e.source}->${e.target}:${e.kind}`,
+        source: e.source,
+        target: e.target,
+        className: `rs-lineage__edge rs-lineage__edge--${e.kind}${state}`,
+        animated: !!onTrace
+      };
+    }),
+    [visible.edges, traced]
+  );
+  useEffect3(() => {
+    const onKey = (event) => event.key === "Escape" && setSelected(null);
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+  const toggleKind = (kind) => setHiddenKinds((current) => {
+    const next = new Set(current);
+    if (next.has(kind)) next.delete(kind);
+    else next.add(kind);
+    return next;
+  });
+  const focused = selected ? byId.get(selected) : void 0;
+  const links = visible.edges.length;
+  return (
+    // `data-ready` once the first layout is done, for tests to wait on
+    /* @__PURE__ */ jsxs3("div", { className: "rs-lineage-layout", ref: layoutRef, children: [
+      /* @__PURE__ */ jsx2("div", { className: "rs-lineage", "data-ready": positions ? "" : void 0, children: /* @__PURE__ */ jsxs3(
+        ReactFlow2,
+        {
+          nodes,
+          edges,
+          nodeTypes: nodeTypes2,
+          nodesDraggable: false,
+          nodesFocusable: false,
+          edgesFocusable: false,
+          nodesConnectable: false,
+          elementsSelectable: false,
+          minZoom: 0.1,
+          onNodeMouseEnter: (_, node) => setHovered(node.id),
+          onNodeMouseLeave: () => setHovered(null),
+          onNodeClick: (_, node) => setSelected(node.id),
+          onPaneClick: () => setSelected(null),
+          proOptions: { hideAttribution: true },
+          children: [
+            /* @__PURE__ */ jsx2(Background2, { gap: 24 }),
+            /* @__PURE__ */ jsx2(Controls2, { showInteractive: false }),
+            /* @__PURE__ */ jsx2(
+              MiniMap2,
+              {
+                pannable: true,
+                zoomable: true,
+                className: "rs-lineage__minimap",
+                nodeClassName: (node) => `rs-lineage__minimap-node--${node.data.node.kind}`,
+                ariaLabel: "Content lineage overview"
+              }
+            ),
+            /* @__PURE__ */ jsx2(Panel2, { position: "top-left", children: /* @__PURE__ */ jsxs3("div", { className: "rs-lineage__toolbar", children: [
+              KINDS.map(({ kind, label }) => /* @__PURE__ */ jsxs3("label", { className: "rs-lineage__toggle", children: [
+                /* @__PURE__ */ jsx2(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: !hiddenKinds.has(kind),
+                    onChange: () => toggleKind(kind)
+                  }
+                ),
+                /* @__PURE__ */ jsx2("span", { className: `rs-lineage__swatch rs-lineage__swatch--${kind}` }),
+                label
+              ] }, kind)),
+              /* @__PURE__ */ jsxs3("label", { className: "rs-lineage__toggle", children: [
+                /* @__PURE__ */ jsx2(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: hideUnconnected,
+                    onChange: () => setHideUnconnected((current) => !current)
+                  }
+                ),
+                "Hide unconnected"
+              ] }),
+              /* @__PURE__ */ jsxs3("span", { className: "rs-lineage__count", children: [
+                visible.nodes.length,
+                " nodes, ",
+                links,
+                " link",
+                links === 1 ? "" : "s"
+              ] }),
+              /* @__PURE__ */ jsx2(
+                CopyMermaid,
+                {
+                  text: () => contentGraphToMermaid({ nodes: visible.nodes, edges: visible.edges }),
+                  size: visible.nodes.length
+                }
+              )
+            ] }) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx2(
+        Details2,
+        {
+          node: focused,
+          edges: visible.edges,
+          byId,
+          adminURLs,
+          onSelect: setSelected
+        }
+      )
+    ] })
+  );
+};
+var Details2 = ({ node, edges, byId, adminURLs, onSelect }) => {
+  if (!node) {
+    return /* @__PURE__ */ jsxs3("aside", { className: "rs-lineage__details", children: [
+      /* @__PURE__ */ jsx2("p", { className: "rs-lineage__hint", children: "Hover a node to trace everything it's built from and everything that uses it. Click it to see the fields behind each link. Esc clears the selection." }),
+      /* @__PURE__ */ jsxs3("dl", { className: "rs-lineage__legend", children: [
+        /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx2("dt", { className: "rs-lineage__line rs-lineage__line--relationship" }),
+          /* @__PURE__ */ jsx2("dd", { children: "relationship" })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx2("dt", { className: "rs-lineage__line rs-lineage__line--upload" }),
+          /* @__PURE__ */ jsx2("dd", { children: "upload" })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx2("dt", { className: "rs-lineage__line rs-lineage__line--blocks" }),
+          /* @__PURE__ */ jsx2("dd", { children: "blocks field" })
+        ] })
+      ] })
+    ] });
+  }
+  const builtFrom = edges.filter((e) => e.target === node.id);
+  const usedBy = edges.filter((e) => e.source === node.id);
+  const url = adminURLs[node.id];
+  const item = (edge, otherId) => {
+    const other = byId.get(otherId);
+    return /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs3("button", { type: "button", className: "rs-lineage__link", onClick: () => onSelect(other.id), children: [
+      /* @__PURE__ */ jsxs3("span", { className: "rs-lineage__link-name", children: [
+        /* @__PURE__ */ jsx2("span", { className: `rs-lineage__swatch rs-lineage__swatch--${other.kind}` }),
+        edge.source === edge.target ? "Itself" : other.label
+      ] }),
+      /* @__PURE__ */ jsxs3("span", { className: "rs-lineage__via", children: [
+        edge.kind,
+        " \xB7 ",
+        edge.fields.join(", ")
+      ] })
+    ] }) }, `${edge.source}->${edge.target}:${edge.kind}`);
+  };
+  return /* @__PURE__ */ jsxs3("aside", { className: "rs-lineage__details", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx2("span", { className: `rs-lineage__kind rs-lineage__kind--${node.kind}`, children: node.kind }),
+      /* @__PURE__ */ jsx2("h2", { className: "rs-lineage__name", children: node.label }),
+      /* @__PURE__ */ jsx2("code", { className: "rs-lineage__id", children: node.id })
+    ] }),
+    url && /* @__PURE__ */ jsx2("a", { className: "rs-lineage__open", href: url, children: "Open in the admin" }),
+    /* @__PURE__ */ jsxs3("section", { children: [
+      /* @__PURE__ */ jsxs3("h3", { className: "rs-lineage__heading", children: [
+        "Built from \xB7 ",
+        builtFrom.length
+      ] }),
+      builtFrom.length ? /* @__PURE__ */ jsx2("ul", { className: "rs-lineage__list", children: builtFrom.map((e) => item(e, e.source)) }) : /* @__PURE__ */ jsx2("p", { className: "rs-lineage__hint", children: "None of its fields point at another collection or block." })
+    ] }),
+    /* @__PURE__ */ jsxs3("section", { children: [
+      /* @__PURE__ */ jsxs3("h3", { className: "rs-lineage__heading", children: [
+        "Used by \xB7 ",
+        usedBy.length
+      ] }),
+      usedBy.length ? /* @__PURE__ */ jsx2("ul", { className: "rs-lineage__list", children: usedBy.map((e) => item(e, e.target)) }) : /* @__PURE__ */ jsx2("p", { className: "rs-lineage__hint", children: "Nothing uses it." })
+    ] })
+  ] });
+};
+var ContentNodeView = ({
+  data: { node, state, selfLink, onSelect, onTrace }
+}) => /* @__PURE__ */ jsxs3(
+  "div",
+  {
+    className: `rs-lineage__node rs-lineage__node--${node.kind} rs-lineage__node--${state}`,
+    title: node.id,
+    children: [
+      /* @__PURE__ */ jsx2(
+        Handle2,
+        {
+          className: "rs-lineage__handle",
+          type: "target",
+          position: Position2.Left,
+          isConnectable: false
+        }
+      ),
+      /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          type: "button",
+          className: "rs-lineage__select",
+          "aria-label": `${node.label}, ${node.kind}: show what it's built from and what uses it`,
+          onClick: () => onSelect(node.id),
+          onFocus: () => onTrace(node.id),
+          onBlur: () => onTrace(null),
+          children: [
+            /* @__PURE__ */ jsxs3("span", { className: "rs-lineage__label", children: [
+              node.label,
+              selfLink && /* @__PURE__ */ jsx2("span", { className: "rs-lineage__self", title: "Links to itself", children: "\u21BB" })
+            ] }),
+            /* @__PURE__ */ jsxs3("span", { className: "rs-lineage__meta", children: [
+              node.kind,
+              " \xB7 ",
+              node.slug
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Handle2,
+        {
+          className: "rs-lineage__handle",
+          type: "source",
+          position: Position2.Right,
+          isConnectable: false
+        }
+      )
+    ]
+  }
+);
+var nodeTypes2 = { content: ContentNodeView };
+
+// src/view/NavLink.tsx
+import { Link, useConfig } from "@payloadcms/ui";
+import { usePathname } from "next/navigation";
+import { formatAdminURL } from "payload/shared";
+import { Fragment, jsx as jsx3, jsxs as jsxs4 } from "react/jsx-runtime";
+var LineageNavLinkClient = () => {
+  const { config } = useConfig();
+  const pathname = usePathname();
+  const href = formatAdminURL({ adminRoute: config.routes.admin, path: "/lineage" });
+  const active = pathname === href || pathname.startsWith(`${href}/`);
+  const label = /* @__PURE__ */ jsxs4(Fragment, { children: [
+    active && /* @__PURE__ */ jsx3("div", { className: "nav__link-indicator" }),
+    /* @__PURE__ */ jsx3("span", { className: "nav__link-label", children: "Lineage" })
+  ] });
+  return pathname === href ? /* @__PURE__ */ jsx3("div", { className: "nav__link", id: "nav-lineage", children: label }) : /* @__PURE__ */ jsx3(Link, { className: "nav__link", href, id: "nav-lineage", prefetch: false, children: label });
+};
+export {
+  ErdCanvas,
+  LineageCanvas,
+  LineageNavLinkClient
+};