@glyphlab/diagram-react 0.0.0-stage → 0.1.1

package/index.js

@@ -0,0 +1,1727 @@
+"use client";
+
+// packages/diagram-react/src/actions.ts
+var NEW_NODE = { w: 280, h: 150 };
+var NEW_GROUP = { w: 360, h: 240 };
+function addNodeAt(controller, x, y, laneId, onError) {
+  const before = new Set(controller.getSnapshot().nodes.map((n) => n.id));
+  const result = controller.apply({
+    ops: [{ op: "createNode", node: { title: "New node", body: "", x: Math.round(x - NEW_NODE.w / 2), y: Math.round(y - NEW_NODE.h / 2), ...laneId && { laneId } } }],
+    summary: "Add node",
+    source: "user"
+  });
+  if (!result.ok) {
+    onError?.(result.message);
+    return void 0;
+  }
+  return controller.getSnapshot().nodes.find((n) => !before.has(n.id))?.id;
+}
+function addGroupAt(controller, x, y) {
+  const before = new Set(controller.getSnapshot().groups.map((g) => g.id));
+  const result = controller.apply({
+    ops: [{ op: "createGroup", group: { title: "New group", nodeIds: [], x: Math.round(x - NEW_GROUP.w / 2), y: Math.round(y - NEW_GROUP.h / 2), w: NEW_GROUP.w, h: NEW_GROUP.h } }],
+    summary: "Add group",
+    source: "user"
+  });
+  if (!result.ok) return void 0;
+  return controller.getSnapshot().groups.find((g) => !before.has(g.id))?.id;
+}
+function deleteNode(controller, id) {
+  const title = controller.stores.nodes.getState().byId[id]?.title ?? id;
+  controller.apply({ ops: [{ op: "deleteNode", id }], summary: `Delete node \u201C${title}\u201D`, source: "user" });
+}
+function deleteGroup(controller, id) {
+  const title = controller.stores.groups.getState().byId[id]?.title ?? id;
+  controller.apply({ ops: [{ op: "deleteGroup", id }], summary: `Delete group \u201C${title}\u201D`, source: "user" });
+}
+function deleteEdge(controller, id) {
+  const label = controller.stores.edges.getState().byId[id]?.label;
+  controller.apply({ ops: [{ op: "deleteEdge", id }], summary: `Delete edge${label ? ` \u201C${label}\u201D` : ""}`, source: "user" });
+}
+
+// packages/diagram-react/src/colors.ts
+import { arrowId, colorCss, colorKey, colorLabel, COLOR_PRESETS, isPreset } from "@glyphlab/diagram-core";
+function layerStyle(color) {
+  const css = colorCss(color);
+  return css ? { "--layer": css } : {};
+}
+var edgeColor = colorCss;
+function edgeStyle(color) {
+  const css = colorCss(color);
+  return css ? { "--edge-color": css } : void 0;
+}
+var arrowBase = (uid) => `${uid}-arrow`;
+
+// packages/diagram-react/src/ArrowHeads.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ArrowHeads({ id, colors }) {
+  const used = [...new Set(colors.filter((c) => c !== void 0 && colorCss(c) !== void 0))];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("marker", { id, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "7", markerHeight: "7", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 1 L 9 5 L 0 9 z", className: "arrow-head" }) }),
+    used.map((color) => /* @__PURE__ */ jsx("marker", { id: arrowId(id, color), viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "7", markerHeight: "7", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M 0 1 L 9 5 L 0 9 z", className: "arrow-head", style: { fill: colorCss(color) } }) }, color))
+  ] });
+}
+
+// packages/diagram-react/src/beginConnect.ts
+function sidePoint(node, side) {
+  if (side === "n") return { x: node.x + node.w / 2, y: node.y };
+  if (side === "s") return { x: node.x + node.w / 2, y: node.y + node.h };
+  if (side === "w") return { x: node.x, y: node.y + node.h / 2 };
+  return { x: node.x + node.w, y: node.y + node.h / 2 };
+}
+function toDiagram(instance, clientX, clientY) {
+  const canvas = instance.surface.el?.getBoundingClientRect();
+  const { x, y, scale } = instance.ui.viewport.getState();
+  return { x: (clientX - (canvas?.left ?? 0) - x) / scale, y: (clientY - (canvas?.top ?? 0) - y) / scale };
+}
+var nodeUnder = (instance, clientX, clientY, not) => {
+  const found = document.elementFromPoint(clientX, clientY)?.closest("[data-node-id]");
+  if (!found || instance.surface.el && !instance.surface.el.contains(found)) return null;
+  const id = found.dataset.nodeId;
+  return id && id !== not ? id : null;
+};
+function beginConnect(instance, e, source, side) {
+  if (e.button !== 0) return;
+  e.stopPropagation();
+  e.preventDefault();
+  const from = instance.controller.stores.nodes.getState().byId[source];
+  if (!from) return;
+  const connect = instance.ui.connect;
+  connect.getState().start(source, side, toDiagram(instance, e.clientX, e.clientY));
+  const onMove = (ev) => connect.getState().move(toDiagram(instance, ev.clientX, ev.clientY), nodeUnder(instance, ev.clientX, ev.clientY, source));
+  const stop = () => {
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    window.removeEventListener("pointercancel", onCancel);
+    window.removeEventListener("keydown", onKey, true);
+    connect.getState().end();
+  };
+  const onUp = (ev) => {
+    const target = nodeUnder(instance, ev.clientX, ev.clientY, source);
+    stop();
+    if (target) connectNodes(instance, source, target);
+  };
+  const onCancel = () => stop();
+  const onKey = (ev) => {
+    if (ev.key !== "Escape") return;
+    ev.stopPropagation();
+    stop();
+  };
+  window.addEventListener("pointermove", onMove);
+  window.addEventListener("pointerup", onUp);
+  window.addEventListener("pointercancel", onCancel);
+  window.addEventListener("keydown", onKey, true);
+}
+function connectNodes(instance, from, to) {
+  const { controller, ui } = instance;
+  const nodes = controller.stores.nodes.getState().byId;
+  const find = () => controller.getSnapshot().edges.find((edge) => edge.from === from && edge.to === to && edge.label === "");
+  const found = find();
+  if (found) {
+    ui.selection.getState().select({ kind: "edge", id: found.id });
+    return;
+  }
+  const result = controller.apply({
+    ops: [{ op: "createEdge", edge: { from, to, label: "" } }],
+    summary: `Connect \u201C${nodes[from]?.title ?? from}\u201D \u2192 \u201C${nodes[to]?.title ?? to}\u201D`,
+    source: "user"
+  });
+  if (!result.ok) return;
+  const id = find()?.id;
+  if (id) ui.selection.getState().select({ kind: "edge", id });
+}
+
+// packages/diagram-react/src/ColorControl.tsx
+import { useEffect, useRef } from "react";
+
+// packages/diagram-react/src/context.ts
+import { createContext, useContext } from "react";
+import { useStore } from "zustand";
+var DiagramContext = createContext(null);
+var useContextValue = () => {
+  const value = useContext(DiagramContext);
+  if (!value) throw new Error("This component must be inside a DiagramProvider.");
+  return value;
+};
+var useDiagram = () => useContextValue().instance;
+var useSlots = () => useContextValue().slots;
+function useSelected(api, selector) {
+  return useStore(api, selector);
+}
+var useNodes = (selector) => useSelected(useDiagram().controller.stores.nodes, selector);
+var useEdges = (selector) => useSelected(useDiagram().controller.stores.edges, selector);
+var useGroups = (selector) => useSelected(useDiagram().controller.stores.groups, selector);
+var useMeta = (selector) => useSelected(useDiagram().controller.stores.meta, selector);
+var useViewport = (selector) => useSelected(useDiagram().ui.viewport, selector);
+var useSelection = (selector) => useSelected(useDiagram().ui.selection, selector);
+var useEditing = (selector) => useSelected(useDiagram().ui.edit, selector);
+var useConnecting = (selector) => useSelected(useDiagram().ui.connect, selector);
+var useHighlights = (selector) => useSelected(useDiagram().ui.highlight, selector);
+function bindStore(api) {
+  function useBound(selector) {
+    return useStore(api, selector);
+  }
+  return Object.assign(useBound, api);
+}
+
+// packages/diagram-react/src/ColorControl.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var KIND_LABEL = { node: "node", group: "group", edge: "edge" };
+function ColorControl() {
+  const { controller } = useDiagram();
+  const selection = useSelection((s) => s.selection);
+  const item = useNodes((s) => selection?.kind === "node" ? s.byId[selection.id] : void 0);
+  const group = useGroups((s) => selection?.kind === "group" ? s.byId[selection.id] : void 0);
+  const edge = useEdges((s) => selection?.kind === "edge" ? s.byId[selection.id] : void 0);
+  const custom = useRef(null);
+  const current = (item ?? group ?? edge)?.color;
+  const name = item?.title ?? group?.title ?? edge?.label ?? "edge";
+  const choose = (color) => {
+    if (!selection || color === (current ?? null)) return;
+    const { id } = selection;
+    const op = selection.kind === "node" ? { op: "updateNode", id, patch: { color } } : selection.kind === "group" ? { op: "updateGroup", id, patch: { color } } : { op: "updateEdge", id, patch: { color } };
+    controller.apply({ ops: [op], summary: `${color === null ? "Remove the color of" : "Color"} ${KIND_LABEL[selection.kind]} \u201C${name}\u201D`, source: "user" });
+  };
+  const latest = useRef(choose);
+  useEffect(() => {
+    latest.current = choose;
+  });
+  useEffect(() => {
+    const input = custom.current;
+    if (!input) return;
+    const onChange = () => latest.current(input.value.toLowerCase());
+    input.addEventListener("change", onChange);
+    return () => input.removeEventListener("change", onChange);
+  }, [selection]);
+  useEffect(() => {
+    if (custom.current && current && !isPreset(current)) custom.current.value = current;
+  }, [current, selection]);
+  if (!selection || !(item ?? group ?? edge)) return null;
+  const isOwn = current !== void 0 && !isPreset(current);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "color-control",
+      role: "group",
+      "aria-label": `Color of the selected ${KIND_LABEL[selection.kind]}`,
+      onPointerDown: (e) => e.stopPropagation(),
+      onContextMenu: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "color-swatch none", "aria-label": "Default color", "aria-pressed": current === void 0, title: "Default color", onClick: () => choose(null), children: /* @__PURE__ */ jsxs2("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "9" }),
+          /* @__PURE__ */ jsx2("path", { d: "M5.6 5.6l12.8 12.8" })
+        ] }) }),
+        COLOR_PRESETS.map((preset) => /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "color-swatch",
+            style: { background: colorCss(preset) },
+            "aria-label": colorLabel(preset),
+            "aria-pressed": current === preset,
+            title: colorLabel(preset),
+            onClick: () => choose(preset)
+          },
+          preset
+        )),
+        /* @__PURE__ */ jsx2("label", { className: `color-swatch custom${isOwn ? " on" : ""}`, title: "Choose another color", children: /* @__PURE__ */ jsx2("input", { ref: custom, type: "color", "aria-label": "Custom color", defaultValue: "#3b82f6" }) })
+      ]
+    }
+  );
+}
+
+// packages/diagram-react/src/DiagramProvider.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function DiagramProvider({ instance, slots = {}, children }) {
+  return /* @__PURE__ */ jsx3(DiagramContext.Provider, { value: { instance, slots }, children });
+}
+
+// packages/diagram-react/src/DiagramCanvas.tsx
+import { useCallback, useEffect as useEffect6, useLayoutEffect, useMemo as useMemo2, useRef as useRef6, useState as useState6 } from "react";
+import { diagramBounds } from "@glyphlab/diagram-core";
+
+// packages/diagram-react/src/EdgeEditor.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { LIMITS, edgeGeometry } from "@glyphlab/diagram-core";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function EdgeEditor() {
+  const id = useEditing((s) => s.edge);
+  const edge = useEdges((s) => id ? s.byId[id] : void 0);
+  const from = useNodes((s) => edge ? s.byId[edge.from] : void 0);
+  const to = useNodes((s) => edge ? s.byId[edge.to] : void 0);
+  if (!id || !edge || !from || !to) return null;
+  const { lx, ly } = edgeGeometry(from, to);
+  return /* @__PURE__ */ jsx4(LabelInput, { id, label: edge.label, at: { x: lx, y: ly } }, id);
+}
+function LabelInput({ id, label, at }) {
+  const { controller, ui } = useDiagram();
+  const [value, setValue] = useState(label);
+  const ref = useRef2(null);
+  const done = useRef2(false);
+  useEffect2(() => {
+    ref.current?.focus();
+    ref.current?.select();
+  }, []);
+  const finish = (save) => {
+    if (done.current) return;
+    done.current = true;
+    if (save && value !== label) {
+      controller.apply({ ops: [{ op: "updateEdge", id, patch: { label: value.trim() } }], summary: "Edit edge label", source: "user" });
+    }
+    ui.edit.getState().end();
+  };
+  return /* @__PURE__ */ jsx4(
+    "input",
+    {
+      ref,
+      className: "edge-edit",
+      "aria-label": "Edge label",
+      value,
+      maxLength: LIMITS.label,
+      placeholder: "Label",
+      style: { left: at.x, top: at.y, width: Math.max(120, value.length * 7 + 28) },
+      onChange: (e) => setValue(e.target.value),
+      onPointerDown: (e) => e.stopPropagation(),
+      onDoubleClick: (e) => e.stopPropagation(),
+      onBlur: () => finish(true),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          finish(true);
+        } else if (e.key === "Escape") {
+          e.stopPropagation();
+          finish(false);
+        }
+      }
+    }
+  );
+}
+
+// packages/diagram-react/src/GroupEditor.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
+import { LIMITS as LIMITS2 } from "@glyphlab/diagram-core";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function GroupEditor() {
+  const id = useEditing((s) => s.group);
+  const group = useGroups((s) => id ? s.byId[id] : void 0);
+  if (!id || !group) return null;
+  if (group.lane) return /* @__PURE__ */ jsx5(LaneInput, { id, title: group.title, body: group.lane.body, x: group.x, y: group.y, width: group.w }, id);
+  return /* @__PURE__ */ jsx5(TitleInput, { id, title: group.title, at: { x: group.x + 14, y: group.y + 8 }, width: Math.max(140, group.w - 28) }, id);
+}
+function LaneInput({ id, title, body, x, y, width }) {
+  const { controller, ui } = useDiagram();
+  const [name, setName] = useState2(title);
+  const [description, setDescription] = useState2(body);
+  const [error, setError] = useState2("");
+  const ref = useRef3(null);
+  useEffect3(() => {
+    ref.current?.focus();
+    ref.current?.select();
+  }, []);
+  const save = () => {
+    const result = controller.apply({ source: "user", summary: `Edit swimlane "${title}"`, ops: [{ op: "updateLane", id, patch: { title: name.trim(), body: description } }] });
+    if (!result.ok) {
+      setError(result.message);
+      return;
+    }
+    ui.edit.getState().end();
+  };
+  return /* @__PURE__ */ jsxs3(
+    "form",
+    {
+      className: "lane-edit",
+      "aria-label": "Edit swimlane",
+      style: { left: x + 8, top: y + 8, width: Math.max(240, width - 16) },
+      onPointerDown: (e) => e.stopPropagation(),
+      onDoubleClick: (e) => e.stopPropagation(),
+      onSubmit: (e) => {
+        e.preventDefault();
+        save();
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          ui.edit.getState().end();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs3("label", { children: [
+          "Title",
+          /* @__PURE__ */ jsx5("input", { ref, "aria-label": "Lane title", value: name, required: true, maxLength: LIMITS2.title, onChange: (e) => setName(e.target.value) })
+        ] }),
+        /* @__PURE__ */ jsxs3("label", { children: [
+          "Description",
+          /* @__PURE__ */ jsx5("textarea", { "aria-label": "Lane description", value: description, maxLength: LIMITS2.body, onChange: (e) => setDescription(e.target.value) })
+        ] }),
+        error && /* @__PURE__ */ jsx5("p", { role: "alert", children: error }),
+        /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx5("button", { className: "dg-btn", type: "button", onClick: () => ui.edit.getState().end(), children: "Cancel" }),
+          " ",
+          /* @__PURE__ */ jsx5("button", { className: "dg-btn", type: "submit", children: "Save lane" })
+        ] })
+      ]
+    }
+  );
+}
+function TitleInput({ id, title, at, width }) {
+  const { controller, ui } = useDiagram();
+  const [value, setValue] = useState2(title);
+  const ref = useRef3(null);
+  const done = useRef3(false);
+  useEffect3(() => {
+    ref.current?.focus();
+    ref.current?.select();
+  }, []);
+  const finish = (save) => {
+    if (done.current) return;
+    done.current = true;
+    const next = value.trim();
+    if (save && next !== "" && next !== title) {
+      controller.apply({ ops: [{ op: "updateGroup", id, patch: { title: next } }], summary: `Rename group \u201C${title}\u201D`, source: "user" });
+    }
+    ui.edit.getState().end();
+  };
+  return /* @__PURE__ */ jsx5(
+    "input",
+    {
+      ref,
+      className: "group-edit",
+      "aria-label": "Group name",
+      value,
+      maxLength: LIMITS2.title,
+      style: { left: at.x, top: at.y, width },
+      onChange: (e) => setValue(e.target.value),
+      onPointerDown: (e) => e.stopPropagation(),
+      onDoubleClick: (e) => e.stopPropagation(),
+      onBlur: () => finish(true),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          finish(true);
+        } else if (e.key === "Escape") {
+          e.stopPropagation();
+          finish(false);
+        }
+      }
+    }
+  );
+}
+
+// packages/diagram-react/src/ConnectHandles.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var SIDES = ["n", "e", "s", "w"];
+var LABEL = { n: "top", e: "right", s: "bottom", w: "left" };
+function ConnectHandles() {
+  const instance = useDiagram();
+  const hovered = useConnecting((s) => s.hovered);
+  const dragging = useConnecting((s) => s.source !== null);
+  const node = useNodes((s) => hovered ? s.byId[hovered] : void 0);
+  const editing = useEditing((s) => s.node?.id === hovered);
+  if (!hovered || !node || dragging || editing) return null;
+  return /* @__PURE__ */ jsx6("div", { className: "connect-box", style: { left: node.x, top: node.y, width: node.w, height: node.h }, children: SIDES.map((side) => /* @__PURE__ */ jsx6(
+    "span",
+    {
+      className: `connect-handle connect-${side}`,
+      role: "presentation",
+      "data-connect": side,
+      title: `Drag onto another node to connect (${LABEL[side]})`,
+      onPointerEnter: () => instance.ui.connect.getState().hover(hovered),
+      onPointerLeave: () => instance.ui.connect.getState().leave(),
+      onPointerDown: (e) => beginConnect(instance, e, hovered, side)
+    },
+    side
+  )) });
+}
+function ConnectPreview() {
+  const { uid } = useDiagram();
+  const source = useConnecting((s) => s.source);
+  const side = useConnecting((s) => s.side);
+  const cursor = useConnecting((s) => s.cursor);
+  const target = useConnecting((s) => s.target);
+  const from = useNodes((s) => source ? s.byId[source] : void 0);
+  if (!source || !from || !cursor) return null;
+  const a = sidePoint(from, side);
+  return /* @__PURE__ */ jsx6("svg", { className: "connect-preview", width: 1, height: 1, "aria-hidden": "true", children: /* @__PURE__ */ jsx6("path", { d: `M ${a.x} ${a.y} L ${cursor.x} ${cursor.y}`, className: target ? "connect-line ready" : "connect-line", markerEnd: `url(#${arrowBase(uid)})` }) });
+}
+
+// packages/diagram-react/src/CanvasMenu.tsx
+import { useEffect as useEffect4, useRef as useRef4 } from "react";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var icon = { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true };
+function CanvasMenu({ menu, onClose }) {
+  const { controller, ui } = useDiagram();
+  const ref = useRef4(null);
+  useEffect4(() => {
+    ref.current?.querySelector('[role="menuitem"]')?.focus();
+    const close = () => onClose();
+    const onPointer = (e) => {
+      if (!ref.current?.contains(e.target)) onClose();
+    };
+    window.addEventListener("pointerdown", onPointer, true);
+    window.addEventListener("blur", close);
+    window.addEventListener("resize", close);
+    window.addEventListener("wheel", close, { passive: true });
+    return () => {
+      window.removeEventListener("pointerdown", onPointer, true);
+      window.removeEventListener("blur", close);
+      window.removeEventListener("resize", close);
+      window.removeEventListener("wheel", close);
+    };
+  }, [onClose]);
+  const add = (kind) => {
+    onClose();
+    const id = kind === "node" ? addNodeAt(controller, menu.at.x, menu.at.y) : addGroupAt(controller, menu.at.x, menu.at.y);
+    if (!id) return;
+    if (kind === "node") {
+      ui.selection.getState().select({ kind: "node", id });
+      ui.edit.getState().editNode(id, "title");
+    } else {
+      ui.selection.getState().select({ kind: "group", id });
+      ui.edit.getState().editGroup(id);
+    }
+  };
+  const onKeyDown = (e) => {
+    const items = Array.from(ref.current?.querySelectorAll('[role="menuitem"]') ?? []);
+    const index = items.indexOf(document.activeElement);
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      onClose();
+    } else if (e.key === "ArrowDown") items[(index + 1) % items.length]?.focus();
+    else if (e.key === "ArrowUp") items[(index - 1 + items.length) % items.length]?.focus();
+    else if (e.key === "Home") items[0]?.focus();
+    else if (e.key === "End") items[items.length - 1]?.focus();
+    else return;
+    e.preventDefault();
+  };
+  const left = Math.min(menu.screen.x, window.innerWidth - 200);
+  const top = Math.min(menu.screen.y, window.innerHeight - 100);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ref,
+      className: "canvas-menu",
+      role: "menu",
+      "aria-label": "Canvas",
+      style: { left, top },
+      onKeyDown,
+      onPointerDown: (e) => e.stopPropagation(),
+      onContextMenu: (e) => e.preventDefault(),
+      children: [
+        /* @__PURE__ */ jsxs4("button", { type: "button", role: "menuitem", onClick: () => add("node"), children: [
+          /* @__PURE__ */ jsxs4("svg", { ...icon, children: [
+            /* @__PURE__ */ jsx7("path", { d: "M21 8 12 3 3 8v8l9 5 9-5z" }),
+            /* @__PURE__ */ jsx7("path", { d: "m3.3 7.5 8.7 5 8.7-5M12 22V12.5" })
+          ] }),
+          " Add node"
+        ] }),
+        /* @__PURE__ */ jsxs4("button", { type: "button", role: "menuitem", onClick: () => add("group"), children: [
+          /* @__PURE__ */ jsxs4("svg", { ...icon, children: [
+            /* @__PURE__ */ jsx7("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", strokeDasharray: "3 3" }),
+            /* @__PURE__ */ jsx7("rect", { x: "7", y: "7", width: "6", height: "5", rx: "1" }),
+            /* @__PURE__ */ jsx7("rect", { x: "12", y: "13", width: "5", height: "4", rx: "1" })
+          ] }),
+          " Add group"
+        ] })
+      ]
+    }
+  );
+}
+
+// packages/diagram-react/src/ResizeHandles.tsx
+import { HANDLES } from "@glyphlab/diagram-core";
+
+// packages/diagram-react/src/beginEdit.ts
+import { membersOf } from "@glyphlab/diagram-core";
+import { dragRect, minSize, rectPatch } from "@glyphlab/diagram-core";
+var CLICK_SLOP = 3;
+var read = ({ controller }, kind, id) => kind === "node" ? controller.stores.nodes.getState().byId[id] : controller.stores.groups.getState().byId[id];
+function write({ controller }, kind, id, rect) {
+  if (kind === "node") controller.stores.nodes.getState().updateNode(id, rect);
+  else controller.stores.groups.getState().updateGroup(id, rect);
+}
+function carriedBy({ controller }, kind, id, mode) {
+  if (kind !== "group" || mode !== "move") return { nodes: [], groups: [] };
+  const snapshot = controller.getSnapshot();
+  const group = snapshot.groups.find((g) => g.id === id);
+  return group ? membersOf(group, snapshot.nodes, snapshot.groups) : { nodes: [], groups: [] };
+}
+function beginEdit(instance, e, kind, id, mode) {
+  const { controller, ui } = instance;
+  if (e.button !== 0) return;
+  e.stopPropagation();
+  ui.selection.getState().select({ kind, id });
+  const found = read(instance, kind, id);
+  if (!found) return;
+  const { title } = found;
+  const start = { x: found.x, y: found.y, w: found.w, h: found.h };
+  const scale = ui.viewport.getState().scale;
+  const origin = { x: e.clientX, y: e.clientY };
+  let moved = false;
+  let latest = start;
+  const carried = carriedBy(instance, kind, id, mode);
+  const carriedCount = carried.nodes.length + carried.groups.length;
+  const preview = (dx, dy) => {
+    for (const n of carried.nodes) controller.stores.nodes.getState().updateNode(n.id, { x: n.x + dx, y: n.y + dy });
+    for (const g of carried.groups) controller.stores.groups.getState().updateGroup(g.id, { x: g.x + dx, y: g.y + dy });
+  };
+  const onMove = (ev) => {
+    const dx = ev.clientX - origin.x;
+    const dy = ev.clientY - origin.y;
+    if (!moved && Math.hypot(dx, dy) < CLICK_SLOP) return;
+    moved = true;
+    latest = dragRect(start, mode, dx / scale, dy / scale, minSize(kind));
+    write(instance, kind, id, latest);
+    preview(latest.x - start.x, latest.y - start.y);
+  };
+  const stop = () => {
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", onUp);
+    window.removeEventListener("pointercancel", onCancel);
+    window.removeEventListener("keydown", onKey, true);
+  };
+  const onUp = () => {
+    stop();
+    const patch = rectPatch(start, latest);
+    write(instance, kind, id, start);
+    preview(0, 0);
+    if (!moved || Object.keys(patch).length === 0) return;
+    const what = mode === "move" ? "Move" : "Resize";
+    controller.apply({
+      ops: [kind === "node" ? { op: "updateNode", id, patch } : { op: "updateGroup", id, patch }],
+      summary: `${what} ${kind} \u201C${title}\u201D${carriedCount > 0 ? ` with what is inside it` : ""}`,
+      source: "user"
+    });
+  };
+  const onCancel = () => {
+    stop();
+    write(instance, kind, id, start);
+    preview(0, 0);
+  };
+  const onKey = (ev) => {
+    if (ev.key !== "Escape") return;
+    ev.stopPropagation();
+    onCancel();
+  };
+  window.addEventListener("pointermove", onMove);
+  window.addEventListener("pointerup", onUp);
+  window.addEventListener("pointercancel", onCancel);
+  window.addEventListener("keydown", onKey, true);
+}
+
+// packages/diagram-react/src/ResizeHandles.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var LABELS = {
+  n: "top",
+  s: "bottom",
+  e: "right",
+  w: "left",
+  ne: "top right",
+  nw: "top left",
+  se: "bottom right",
+  sw: "bottom left"
+};
+function ResizeHandles() {
+  const instance = useDiagram();
+  const selection = useSelection((s) => s.selection);
+  const rect = useNodes((s) => selection?.kind === "node" ? s.byId[selection.id] : void 0);
+  const groupRect = useGroups((s) => selection?.kind === "group" ? s.byId[selection.id] : void 0);
+  const scale = useViewport((s) => s.scale);
+  const target = rect ?? groupRect;
+  if (!selection || !target || selection.kind !== "node" && selection.kind !== "group") return null;
+  const inverse = Math.min(3, Math.max(0.75, 1 / scale));
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: "resize-box",
+      style: { left: target.x, top: target.y, width: target.w, height: target.h, ["--inv"]: inverse },
+      children: HANDLES.map((handle) => /* @__PURE__ */ jsx8(
+        "span",
+        {
+          className: `resize-handle resize-${handle}`,
+          role: "presentation",
+          "data-handle": handle,
+          title: `Resize ${LABELS[handle]}`,
+          onPointerDown: (e) => beginEdit(instance, e, selection.kind, selection.id, handle)
+        },
+        handle
+      ))
+    }
+  );
+}
+
+// packages/diagram-react/src/DiagramEdge.tsx
+import { memo } from "react";
+
+// packages/diagram-react/src/hooks.ts
+import { useMemo } from "react";
+import { edgeGeometry as edgeGeometry2 } from "@glyphlab/diagram-core";
+function useIsSelected(kind, id) {
+  return useSelection((s) => s.selection?.kind === kind && s.selection.id === id);
+}
+function useEdgeGeometry(id) {
+  const edge = useEdges((s) => s.byId[id]);
+  const from = useNodes((s) => edge ? s.byId[edge.from] : void 0);
+  const to = useNodes((s) => edge ? s.byId[edge.to] : void 0);
+  const geometry = useMemo(() => from && to ? edgeGeometry2(from, to) : null, [from, to]);
+  return { edge, geometry };
+}
+
+// packages/diagram-react/src/DiagramEdge.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var DiagramEdge = memo(function DiagramEdge2({ id }) {
+  const instance = useDiagram();
+  const { edge, geometry } = useEdgeGeometry(id);
+  const selected = useIsSelected("edge", id);
+  const highlight = useHighlights((s) => s.edges[id]);
+  if (!edge || !geometry) return null;
+  const className = [
+    "edge",
+    edge.dashed ? "dashed" : "",
+    edge.optional ? "optional" : "",
+    edgeColor(edge.color) ? "colored" : "",
+    selected ? "selected" : "",
+    highlight ? `hl-${highlight}` : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs5("g", { children: [
+    /* @__PURE__ */ jsx9("path", { d: geometry.d, className, style: edgeStyle(edge.color), markerEnd: `url(#${arrowId(arrowBase(instance.uid), edge.color)})` }),
+    /* @__PURE__ */ jsx9(
+      "path",
+      {
+        d: geometry.d,
+        className: "edge-hit",
+        onPointerDown: (e) => {
+          e.stopPropagation();
+          instance.ui.selection.getState().select({ kind: "edge", id });
+        },
+        onDoubleClick: (e) => {
+          e.stopPropagation();
+          instance.ui.edit.getState().editEdge(id);
+        }
+      }
+    )
+  ] });
+});
+
+// packages/diagram-react/src/DiagramGroup.tsx
+import { memo as memo2, useState as useState3 } from "react";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var DiagramGroup = memo2(function DiagramGroup2({ id }) {
+  const instance = useDiagram();
+  const group = useGroups((s) => s.byId[id]);
+  const selected = useIsSelected("group", id);
+  const [error, setError] = useState3("");
+  if (!group) return null;
+  const grab = (e) => beginEdit(instance, e, "group", id, "move");
+  const add = (x, y) => {
+    setError("");
+    const nodeId = addNodeAt(instance.controller, x, y, id, setError);
+    if (nodeId) {
+      instance.ui.selection.getState().select({ kind: "node", id: nodeId });
+      instance.ui.edit.getState().editNode(nodeId, "title");
+    }
+  };
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: `group${group.lane ? " swimlane" : ""}${selected ? " selected" : ""}`,
+      "data-lane-id": group.lane ? id : void 0,
+      style: { left: group.x, top: group.y, width: group.w, height: group.h, ...layerStyle(group.color) },
+      children: [
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            className: "group-bar",
+            onPointerDown: grab,
+            onDoubleClick: (e) => {
+              e.stopPropagation();
+              instance.ui.edit.getState().editGroup(id);
+            },
+            children: [
+              /* @__PURE__ */ jsx10("span", { className: "group-title", children: group.title }),
+              group.lane && /* @__PURE__ */ jsx10("span", { className: "lane-description", children: group.lane.body || "Double-click to edit lane title and description" })
+            ]
+          }
+        ),
+        group.lane && /* @__PURE__ */ jsx10(
+          "div",
+          {
+            className: "lane-content",
+            role: "button",
+            tabIndex: 0,
+            "aria-label": `Add node to ${group.title}`,
+            title: "Double-click to add a node",
+            onPointerDown: (e) => {
+              e.stopPropagation();
+              instance.ui.selection.getState().select({ kind: "group", id });
+            },
+            onDoubleClick: (e) => {
+              e.stopPropagation();
+              const at = toDiagram(instance, e.clientX, e.clientY);
+              add(at.x, at.y);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                add(group.x + group.w / 2, group.y + 180);
+              }
+            }
+          }
+        ),
+        error && /* @__PURE__ */ jsx10("span", { className: "lane-error", role: "alert", children: error }),
+        /* @__PURE__ */ jsx10("span", { className: "group-edge group-edge-s", onPointerDown: grab }),
+        /* @__PURE__ */ jsx10("span", { className: "group-edge group-edge-w", onPointerDown: grab }),
+        /* @__PURE__ */ jsx10("span", { className: "group-edge group-edge-e", onPointerDown: grab })
+      ]
+    }
+  );
+});
+
+// packages/diagram-react/src/DiagramNode.tsx
+import { memo as memo3 } from "react";
+
+// packages/diagram-react/src/LinkBadge.tsx
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var LABEL2 = {
+  missing: "Linked code is missing",
+  changed: "Possibly stale: linked code changed",
+  moved: "Linked code moved",
+  unchecked: "Links not checked"
+};
+var SHAPE = {
+  changed: /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsx11("path", { d: "M12 7v5l3 2" })
+  ] }),
+  missing: /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsx11("path", { d: "M12 7v6M12 16.5v.5" })
+  ] }),
+  moved: /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsx11("path", { d: "M7.5 12h8M12.5 8.5 16 12l-3.5 3.5" })
+  ] }),
+  unchecked: /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "12", r: "6" })
+};
+function LinkBadge({ title, state, onOpen }) {
+  if (!state || state.status === "ok") return null;
+  const status = state.status;
+  const label = `${LABEL2[status]}${state.detail ? `: ${state.detail}` : ""}`;
+  return /* @__PURE__ */ jsxs7(
+    "button",
+    {
+      type: "button",
+      className: `node-link-badge link-${status}`,
+      "aria-label": `${label} (${title}). Open its code links.`,
+      title: label,
+      onPointerDown: (e) => e.stopPropagation(),
+      onDoubleClick: (e) => e.stopPropagation(),
+      onClick: (e) => {
+        e.stopPropagation();
+        onOpen?.();
+      },
+      children: [
+        /* @__PURE__ */ jsx11("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: SHAPE[status] }),
+        state.count && state.count > 1 ? /* @__PURE__ */ jsx11("span", { className: "node-link-count", children: state.count }) : null
+      ]
+    }
+  );
+}
+
+// packages/diagram-react/src/NodeEditor.tsx
+import { useEffect as useEffect5, useRef as useRef5, useState as useState4 } from "react";
+import { LIMITS as LIMITS3 } from "@glyphlab/diagram-core";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function NodeEditor({ node, field }) {
+  const { controller, ui } = useDiagram();
+  const [title, setTitle] = useState4(node.title);
+  const [body, setBody] = useState4(node.body);
+  const titleRef = useRef5(null);
+  const bodyRef = useRef5(null);
+  const done = useRef5(false);
+  useEffect5(() => {
+    const el = field === "title" ? titleRef.current : bodyRef.current;
+    el?.focus();
+    el?.select();
+  }, []);
+  const finish = (save) => {
+    if (done.current) return;
+    done.current = true;
+    const trimmed = title.trim();
+    if (save && trimmed !== "") {
+      const patch = {};
+      if (trimmed !== node.title) patch.title = trimmed;
+      if (body !== node.body) patch.body = body;
+      if (Object.keys(patch).length > 0) {
+        controller.apply({ ops: [{ op: "updateNode", id: node.id, patch }], summary: `Edit node \u201C${node.title}\u201D`, source: "user" });
+      }
+    }
+    ui.edit.getState().end();
+  };
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: "node-editor",
+      onPointerDown: (e) => e.stopPropagation(),
+      onDoubleClick: (e) => e.stopPropagation(),
+      onBlur: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) finish(true);
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          finish(false);
+        } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault();
+          finish(true);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx12(
+          "input",
+          {
+            ref: titleRef,
+            className: "node-edit-title",
+            "aria-label": "Node title",
+            value: title,
+            maxLength: LIMITS3.title,
+            onChange: (e) => setTitle(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && !e.metaKey && !e.ctrlKey) {
+                e.preventDefault();
+                bodyRef.current?.focus();
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          "textarea",
+          {
+            ref: bodyRef,
+            className: "node-edit-body",
+            "aria-label": "Node content (Markdown)",
+            value: body,
+            maxLength: LIMITS3.body,
+            spellCheck: false,
+            onChange: (e) => setBody(e.target.value)
+          }
+        )
+      ]
+    }
+  );
+}
+
+// packages/diagram-react/src/DiagramNode.tsx
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var DiagramNode = memo3(function DiagramNode2({ id }) {
+  const instance = useDiagram();
+  const { renderMarkdown, openNodeContent, useLinkState } = useSlots();
+  const linkState = useLinkState?.(id);
+  const node = useNodes((s) => s.byId[id]);
+  const selected = useIsSelected("node", id);
+  const editing = useEditing((s) => s.node?.id === id ? s.node : null);
+  const isTarget = useConnecting((s) => s.target === id);
+  const highlight = useHighlights((s) => s.nodes[id]);
+  if (!node) return null;
+  return /* @__PURE__ */ jsx13(
+    "article",
+    {
+      "data-node-id": id,
+      className: `node${selected ? " selected" : ""}${editing ? " editing" : ""}${isTarget ? " connect-target" : ""}${highlight ? ` hl-${highlight}` : ""}`,
+      style: { left: node.x, top: node.y, width: node.w, height: node.h, ...layerStyle(node.color) },
+      onPointerDown: (e) => {
+        if (editing || e.target instanceof Element && e.target.closest("a, button")) e.stopPropagation();
+        else beginEdit(instance, e, "node", id, "move");
+      },
+      onDoubleClick: (e) => {
+        e.stopPropagation();
+        if (e.target instanceof Element && e.target.closest("a, button")) return;
+        const onTitle = e.target.closest("h2") !== null;
+        instance.ui.edit.getState().editNode(id, onTitle ? "title" : "body");
+      },
+      onPointerEnter: () => instance.ui.connect.getState().hover(id),
+      onPointerLeave: () => instance.ui.connect.getState().leave(),
+      children: editing ? /* @__PURE__ */ jsx13(NodeEditor, { node, field: editing.field }) : /* @__PURE__ */ jsxs9(Fragment3, { children: [
+        /* @__PURE__ */ jsx13("h2", { children: node.title }),
+        openNodeContent && /* @__PURE__ */ jsx13(
+          LinkBadge,
+          {
+            title: node.title,
+            state: linkState,
+            onOpen: () => {
+              instance.ui.selection.getState().select({ kind: "node", id });
+              openNodeContent(id, "code");
+            }
+          }
+        ),
+        openNodeContent && /* @__PURE__ */ jsx13(
+          "button",
+          {
+            className: "node-expand",
+            type: "button",
+            "aria-label": `Open full content for ${node.title}`,
+            title: "View and edit full content",
+            onPointerDown: (e) => e.stopPropagation(),
+            onDoubleClick: (e) => e.stopPropagation(),
+            onClick: (e) => {
+              e.stopPropagation();
+              instance.ui.selection.getState().select({ kind: "node", id });
+              openNodeContent(id);
+            },
+            children: /* @__PURE__ */ jsx13("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx13("path", { d: "M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5M3 3l6 6m12-6-6 6M3 21l6-6m12 6-6-6" }) })
+          }
+        ),
+        openNodeContent && node.decisions?.trim() && /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            className: "node-decisions",
+            type: "button",
+            "aria-label": `Open the decision log for ${node.title}`,
+            title: "Decisions recorded: why this was chosen and what else was considered",
+            onPointerDown: (e) => e.stopPropagation(),
+            onDoubleClick: (e) => e.stopPropagation(),
+            onClick: (e) => {
+              e.stopPropagation();
+              instance.ui.selection.getState().select({ kind: "node", id });
+              openNodeContent(id, "decisions");
+            },
+            children: [
+              /* @__PURE__ */ jsx13("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx13("path", { d: "M16 3h5v5M8 3H3v5M12 22v-8.3a4 4 0 0 0-1.17-2.87L3 3M15 9l6-6" }) }),
+              "Decisions"
+            ]
+          }
+        ),
+        renderMarkdown ? renderMarkdown(node.body) : /* @__PURE__ */ jsx13("div", { className: "dg-plain", children: node.body })
+      ] })
+    }
+  );
+});
+
+// packages/diagram-react/src/EdgeLabel.tsx
+import { memo as memo4 } from "react";
+import { labelWidth } from "@glyphlab/diagram-core";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var EdgeLabel = memo4(function EdgeLabel2({ id }) {
+  const { edge, geometry } = useEdgeGeometry(id);
+  const selected = useIsSelected("edge", id);
+  const highlight = useHighlights((s) => s.edges[id]);
+  if (!edge || !geometry || !edge.label) return null;
+  const width = labelWidth(edge);
+  const className = ["edge-label", selected ? "selected" : "", highlight ? `hl-${highlight}` : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs10("g", { className, transform: `translate(${geometry.lx}, ${geometry.ly})`, children: [
+    /* @__PURE__ */ jsx14("rect", { x: -width / 2, y: -9, width, height: 18, rx: 4, className: "label-bg" }),
+    /* @__PURE__ */ jsx14("text", { textAnchor: "middle", dy: "3.5", className: "label-text", children: edge.label })
+  ] });
+});
+
+// packages/diagram-react/src/DiagramLayers.tsx
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function GroupLayer() {
+  const ids = useGroups((s) => s.ids);
+  return ids.map((id) => /* @__PURE__ */ jsx15(DiagramGroup, { id }, id));
+}
+function EdgeLayer({ bounds }) {
+  const { uid } = useDiagram();
+  const ids = useEdges((s) => s.ids);
+  const byId = useEdges((s) => s.byId);
+  return /* @__PURE__ */ jsxs11("svg", { className: "edges", width: bounds.w, height: bounds.h, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx15("defs", { children: /* @__PURE__ */ jsx15(ArrowHeads, { id: arrowBase(uid), colors: ids.map((id) => byId[id].color) }) }),
+    ids.map((id) => /* @__PURE__ */ jsx15(DiagramEdge, { id }, id))
+  ] });
+}
+function NodeLayer() {
+  const ids = useNodes((s) => s.ids);
+  return ids.map((id) => /* @__PURE__ */ jsx15(DiagramNode, { id }, id));
+}
+function EdgeLabelLayer({ bounds }) {
+  const ids = useEdges((s) => s.ids);
+  return /* @__PURE__ */ jsx15("svg", { className: "labels", width: bounds.w, height: bounds.h, "aria-hidden": "true", children: ids.map((id) => /* @__PURE__ */ jsx15(EdgeLabel, { id }, id)) });
+}
+
+// packages/diagram-react/src/EdgeStyleControl.tsx
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+function EdgeStyleControl() {
+  const { controller } = useDiagram();
+  const selection = useSelection((s) => s.selection);
+  const edge = useEdges((s) => selection?.kind === "edge" ? s.byId[selection.id] : void 0);
+  if (!selection || selection.kind !== "edge" || !edge) return null;
+  const dashed = edge.dashed === true;
+  const choose = (next) => {
+    if (next === dashed) return;
+    controller.apply({
+      ops: [{ op: "updateEdge", id: edge.id, patch: { dashed: next } }],
+      summary: `Make the edge ${edge.label ? `\u201C${edge.label}\u201D ` : ""}${next ? "dashed" : "solid"}`,
+      source: "user"
+    });
+  };
+  return /* @__PURE__ */ jsxs12("div", { className: "edge-style-control", role: "group", "aria-label": "Line style of the selected edge", onPointerDown: (e) => e.stopPropagation(), onContextMenu: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx16("button", { type: "button", className: "edge-style-btn", "aria-pressed": !dashed, title: "Solid line", "aria-label": "Solid line", onClick: () => choose(false), children: /* @__PURE__ */ jsx16("svg", { width: "28", height: "10", viewBox: "0 0 28 10", "aria-hidden": "true", children: /* @__PURE__ */ jsx16("path", { d: "M2 5h24", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }),
+    /* @__PURE__ */ jsx16("button", { type: "button", className: "edge-style-btn", "aria-pressed": dashed, title: "Dashed line", "aria-label": "Dashed line", onClick: () => choose(true), children: /* @__PURE__ */ jsx16("svg", { width: "28", height: "10", viewBox: "0 0 28 10", "aria-hidden": "true", children: /* @__PURE__ */ jsx16("path", { d: "M2 5h24", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeDasharray: "5 4" }) }) })
+  ] });
+}
+
+// packages/diagram-react/src/SwimlaneControls.tsx
+import { useState as useState5 } from "react";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+function SwimlaneControls() {
+  const { controller, ui } = useDiagram();
+  const type = useMeta((s) => s.type);
+  const groups = useGroups((s) => s.byId);
+  const selection = useSelection((s) => s.selection);
+  const [error, setError] = useState5("");
+  const lanes = Object.values(groups).filter((g) => g.lane).sort((a, b) => a.lane?.orientation === "vertical" ? a.x - b.x : a.y - b.y);
+  if (type !== "swimlane" && lanes.length === 0) return null;
+  const selected = selection?.kind === "group" ? lanes.find((g) => g.id === selection.id) : void 0;
+  const orientation = lanes[0]?.lane?.orientation ?? "horizontal";
+  const apply = (ops, summary) => {
+    const result = controller.apply({ ops, summary, source: "user" });
+    setError(result.ok ? "" : result.message);
+    return result.ok;
+  };
+  const reorder = (direction) => {
+    if (!selected) return;
+    const ids = lanes.map((g) => g.id);
+    const index = ids.indexOf(selected.id);
+    const other = index + direction;
+    if (other < 0 || other >= ids.length) return;
+    [ids[index], ids[other]] = [ids[other], ids[index]];
+    apply([{ op: "arrangeLanes", orientation, laneIds: ids }], "Reorder swimlanes");
+  };
+  return /* @__PURE__ */ jsxs13("div", { className: "swimlane-controls", onPointerDown: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx17("button", { className: "dg-btn", type: "button", onClick: () => {
+      const before = new Set(lanes.map((g) => g.id));
+      if (!apply([{ op: "createLane", lane: { title: `Lane ${lanes.length + 1}`, body: "", orientation } }], "Add swimlane")) return;
+      const lane = controller.getSnapshot().groups.find((g) => g.lane && !before.has(g.id));
+      if (lane) {
+        ui.selection.getState().select({ kind: "group", id: lane.id });
+        ui.edit.getState().editGroup(lane.id);
+      }
+    }, children: "Add lane" }),
+    /* @__PURE__ */ jsxs13("select", { "aria-label": "Lane orientation", value: orientation, disabled: lanes.length === 0, onChange: (e) => {
+      const next = e.target.value === "vertical" ? "vertical" : "horizontal";
+      apply([{ op: "arrangeLanes", orientation: next }], "Change swimlane orientation");
+    }, children: [
+      /* @__PURE__ */ jsx17("option", { value: "horizontal", children: "Horizontal lanes" }),
+      /* @__PURE__ */ jsx17("option", { value: "vertical", children: "Vertical lanes" })
+    ] }),
+    selected && /* @__PURE__ */ jsxs13(Fragment4, { children: [
+      /* @__PURE__ */ jsx17("button", { className: "dg-btn", type: "button", onClick: () => ui.edit.getState().editGroup(selected.id), children: "Edit lane" }),
+      /* @__PURE__ */ jsx17("button", { className: "dg-btn", type: "button", "aria-label": "Move lane earlier", disabled: lanes[0].id === selected.id, onClick: () => reorder(-1), children: "Earlier" }),
+      /* @__PURE__ */ jsx17("button", { className: "dg-btn", type: "button", "aria-label": "Move lane later", disabled: lanes.at(-1)?.id === selected.id, onClick: () => reorder(1), children: "Later" }),
+      /* @__PURE__ */ jsx17("button", { className: "dg-btn", type: "button", onClick: () => apply([{ op: "deleteLane", id: selected.id }], "Delete swimlane (keep nodes)"), children: "Delete lane" })
+    ] }),
+    error && /* @__PURE__ */ jsx17("span", { role: "alert", children: error })
+  ] });
+}
+
+// packages/diagram-react/src/DiagramToolbar.tsx
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+function DiagramToolbar({ title }) {
+  return /* @__PURE__ */ jsxs14("div", { className: "canvas-head", children: [
+    /* @__PURE__ */ jsx18("h1", { children: title }),
+    /* @__PURE__ */ jsxs14("div", { className: "canvas-tools", children: [
+      /* @__PURE__ */ jsx18(EdgeStyleControl, {}),
+      /* @__PURE__ */ jsx18(ColorControl, {})
+    ] }),
+    /* @__PURE__ */ jsx18(SwimlaneControls, {})
+  ] });
+}
+
+// packages/diagram-react/src/ZoomControls.tsx
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+var STEP = 1.2;
+function ZoomControls({ config }) {
+  const { onZoom, onFit } = config;
+  const scale = useViewport((s) => s.scale);
+  return /* @__PURE__ */ jsxs15("div", { className: "zoom", onPointerDown: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx19("button", { className: "dg-icon-btn", type: "button", onClick: () => onZoom(STEP), "aria-label": "Zoom in", children: "+" }),
+    /* @__PURE__ */ jsxs15("span", { className: "zoom-pct", children: [
+      Math.round(scale * 100),
+      "%"
+    ] }),
+    /* @__PURE__ */ jsx19("button", { className: "dg-icon-btn", type: "button", onClick: () => onZoom(1 / STEP), "aria-label": "Zoom out", children: "\u2212" }),
+    /* @__PURE__ */ jsx19("button", { className: "dg-btn", type: "button", onClick: onFit, children: "Fit canvas" })
+  ] });
+}
+
+// packages/diagram-react/src/DiagramCanvas.tsx
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var GRID = 24;
+var CLICK_SLOP2 = 3;
+function DiagramCanvas({ title, designKey, empty: emptyMessage }) {
+  const instance = useDiagram();
+  const { controller, ui } = instance;
+  const ref = useRef6(null);
+  const drag = useRef6(null);
+  const [menu, setMenu] = useState6(null);
+  const x = useViewport((s) => s.x);
+  const y = useViewport((s) => s.y);
+  const scale = useViewport((s) => s.scale);
+  const panning = useViewport((s) => s.panning);
+  const groupsById = useGroups((s) => s.byId);
+  const dimmed = useHighlights((s) => s.dimmed);
+  const noNodes = useNodes((s) => s.ids.length === 0);
+  const noGroups = useGroups((s) => s.ids.length === 0);
+  const empty = noNodes && noGroups;
+  const nodesById = useNodes((s) => s.byId);
+  const bounds = useMemo2(() => diagramBounds(Object.values(groupsById), Object.values(nodesById)), [groupsById, nodesById]);
+  const size = useCallback(() => {
+    const el = ref.current;
+    return { width: el?.clientWidth ?? 0, height: el?.clientHeight ?? 0 };
+  }, []);
+  const fit = useCallback(() => ui.viewport.getState().fit(size(), bounds), [ui, size, bounds]);
+  const zoomCenter = useCallback(
+    (factor) => {
+      const { width, height } = size();
+      ui.viewport.getState().zoomAround(factor, width / 2, height / 2);
+    },
+    [ui, size]
+  );
+  useLayoutEffect(() => {
+    ui.viewport.getState().reset(size(), bounds);
+  }, [designKey]);
+  useEffect6(() => {
+    const el = ref.current;
+    if (!el) return;
+    instance.surface.el = el;
+    const onWheel = (e) => {
+      if (e.target?.closest?.("textarea")) return;
+      e.preventDefault();
+      const viewport = ui.viewport.getState();
+      if (e.ctrlKey || e.metaKey) {
+        const rect = el.getBoundingClientRect();
+        viewport.zoomAround(Math.exp(-e.deltaY * 0.01), e.clientX - rect.left, e.clientY - rect.top);
+      } else {
+        viewport.panBy(-e.deltaX, -e.deltaY);
+      }
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => {
+      el.removeEventListener("wheel", onWheel);
+      if (instance.surface.el === el) instance.surface.el = null;
+    };
+  }, [instance, ui]);
+  useEffect6(() => {
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") ui.selection.getState().clearSelection();
+      if (e.key !== "Delete" && e.key !== "Backspace") return;
+      if (e.metaKey || e.ctrlKey || e.altKey || e.shiftKey || e.defaultPrevented) return;
+      if (e.target?.closest?.("input, textarea, select, [contenteditable]")) return;
+      const target = e.target;
+      if (target && target !== document.body && !ref.current?.contains(target)) return;
+      const { selection } = ui.selection.getState();
+      if (!selection) return;
+      e.preventDefault();
+      if (selection.kind === "node") deleteNode(controller, selection.id);
+      else if (selection.kind === "group") deleteGroup(controller, selection.id);
+      else deleteEdge(controller, selection.id);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [controller, ui]);
+  const onContextMenu = (e) => {
+    const target = e.target;
+    if (target.closest("input, textarea, [contenteditable]")) return;
+    e.preventDefault();
+    if (target.closest(".node, .group-bar, .group-edge, .edge-hit, .resize-handle, .connect-handle, .canvas-head, .zoom, .canvas-empty")) {
+      setMenu(null);
+      return;
+    }
+    setMenu({ screen: { x: e.clientX, y: e.clientY }, at: toDiagram(instance, e.clientX, e.clientY) });
+  };
+  const onPointerDown = (e) => {
+    if (e.button !== 0) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    const { x: vx, y: vy, setPanning } = ui.viewport.getState();
+    drag.current = { px: e.clientX, py: e.clientY, vx, vy, moved: false };
+    setPanning(true);
+  };
+  const onPointerMove = (e) => {
+    const d = drag.current;
+    if (!d) return;
+    const dx = e.clientX - d.px;
+    const dy = e.clientY - d.py;
+    if (Math.abs(dx) > CLICK_SLOP2 || Math.abs(dy) > CLICK_SLOP2) d.moved = true;
+    ui.viewport.getState().setPosition(d.vx + dx, d.vy + dy);
+  };
+  const endDrag = () => {
+    const d = drag.current;
+    drag.current = null;
+    ui.viewport.getState().setPanning(false);
+    if (d && !d.moved) ui.selection.getState().clearSelection();
+  };
+  return /* @__PURE__ */ jsxs16(
+    "section",
+    {
+      ref,
+      className: panning ? "canvas dragging" : "canvas",
+      style: {
+        backgroundSize: `${GRID * scale}px ${GRID * scale}px`,
+        backgroundPosition: `${x}px ${y}px`
+      },
+      onPointerDown,
+      onContextMenu,
+      onPointerMove,
+      onPointerUp: endDrag,
+      onPointerCancel: endDrag,
+      children: [
+        /* @__PURE__ */ jsx20(DiagramToolbar, { title }),
+        menu && /* @__PURE__ */ jsx20(CanvasMenu, { menu, onClose: () => setMenu(null) }),
+        /* @__PURE__ */ jsxs16(
+          "div",
+          {
+            className: dimmed ? "world focus" : "world",
+            style: { transform: `translate(${x}px, ${y}px) scale(${scale})` },
+            children: [
+              /* @__PURE__ */ jsx20(GroupLayer, {}),
+              /* @__PURE__ */ jsx20(EdgeLayer, { bounds }),
+              /* @__PURE__ */ jsx20(NodeLayer, {}),
+              /* @__PURE__ */ jsx20(EdgeLabelLayer, { bounds }),
+              /* @__PURE__ */ jsx20(ResizeHandles, {}),
+              /* @__PURE__ */ jsx20(ConnectHandles, {}),
+              /* @__PURE__ */ jsx20(ConnectPreview, {}),
+              /* @__PURE__ */ jsx20(EdgeEditor, {}),
+              /* @__PURE__ */ jsx20(GroupEditor, {})
+            ]
+          }
+        ),
+        empty && /* @__PURE__ */ jsx20("div", { className: "canvas-empty", role: "note", children: emptyMessage ?? /* @__PURE__ */ jsx20("strong", { children: "This diagram is empty" }) }),
+        /* @__PURE__ */ jsx20(ZoomControls, { config: { onZoom: zoomCenter, onFit: fit } })
+      ]
+    }
+  );
+}
+
+// packages/diagram-react/src/DiagramViewer.tsx
+import { useCallback as useCallback2, useEffect as useEffect7, useId, useMemo as useMemo3, useRef as useRef7, useState as useState7 } from "react";
+import { HANDLES as HANDLES2, diagramBounds as diagramBounds2, dragRect as dragRect2, edgeGeometry as edgeGeometry3, labelWidth as labelWidth2, membersOf as membersOf2, minSize as minSize2 } from "@glyphlab/diagram-core";
+import { Fragment as Fragment5, jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+var MIN_SCALE = 0.1;
+var MAX_SCALE = 2.5;
+var GRID2 = 24;
+function fitView(width, height, bounds) {
+  if (bounds.w === 0 || bounds.h === 0 || width === 0 || height === 0) return { x: 0, y: 0, scale: 1 };
+  const margin = 32;
+  const scale = Math.min(Math.max(Math.min((width - margin * 2) / bounds.w, (height - margin * 2) / bounds.h), MIN_SCALE), 1);
+  return { scale, x: (width - bounds.w * scale) / 2, y: (height - bounds.h * scale) / 2 };
+}
+function DiagramViewer({ config }) {
+  const { diagram, highlights, focus = false, renderMarkdown, openNodeContent, movableNodes = false, linkStates } = config;
+  const arrow = `snap-arrow-${useId().replace(/:/g, "")}`;
+  const ref = useRef7(null);
+  const [view, setView] = useState7({ x: 0, y: 0, scale: 1 });
+  const drag = useRef7(null);
+  const [panning, setPanning] = useState7(false);
+  const gesture = useRef7(null);
+  const [moving, setMoving] = useState7(null);
+  const [picked, setPicked] = useState7(null);
+  const [moved, setMoved] = useState7({ diagram, nodes: {}, groups: {} });
+  const at = moved.diagram === diagram ? moved.nodes : void 0;
+  const groupAt = moved.diagram === diagram ? moved.groups : void 0;
+  const bounds = useMemo3(() => diagramBounds2(diagram.groups, diagram.nodes), [diagram]);
+  const nodes = useMemo3(() => at ? diagram.nodes.map((n) => at[n.id] ? { ...n, ...at[n.id] } : n) : diagram.nodes, [diagram, at]);
+  const groups = useMemo3(() => groupAt ? diagram.groups.map((g) => groupAt[g.id] ? { ...g, ...groupAt[g.id] } : g) : diagram.groups, [diagram, groupAt]);
+  const nodesById = useMemo3(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
+  const fit = useCallback2(() => {
+    const el = ref.current;
+    if (el) setView(fitView(el.clientWidth, el.clientHeight, bounds));
+  }, [bounds]);
+  const touched = useRef7(false);
+  useEffect7(() => {
+    touched.current = false;
+    fit();
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      if (!touched.current) fit();
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [fit]);
+  const zoomAround = (factor, px, py) => {
+    touched.current = true;
+    setView((v) => {
+      const scale = Math.min(Math.max(v.scale * factor, MIN_SCALE), MAX_SCALE);
+      const k = scale / v.scale;
+      return { scale, x: px - (px - v.x) * k, y: py - (py - v.y) * k };
+    });
+  };
+  const zoomCenter = (factor) => {
+    const el = ref.current;
+    if (el) zoomAround(factor, el.clientWidth / 2, el.clientHeight / 2);
+  };
+  useEffect7(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onWheel = (e) => {
+      e.preventDefault();
+      const rect = el.getBoundingClientRect();
+      zoomAround(Math.exp(-e.deltaY * 15e-4), e.clientX - rect.left, e.clientY - rect.top);
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, []);
+  const edges = diagram.edges.flatMap((edge) => {
+    const a = nodesById.get(edge.from);
+    const b = nodesById.get(edge.to);
+    return a && b ? [{ edge, geometry: edgeGeometry3(a, b) }] : [];
+  });
+  const stop = () => {
+    drag.current = null;
+    setPanning(false);
+  };
+  const stopGesture = () => {
+    gesture.current = null;
+    setMoving(null);
+  };
+  const begin = (e, kind, id, mode) => {
+    if (e.button !== 0) return;
+    e.stopPropagation();
+    e.preventDefault();
+    const target = kind === "node" ? nodesById.get(id) : groups.find((g) => g.id === id);
+    if (!target) return;
+    const carried = kind === "group" && mode === "move" ? membersOf2(groups.find((g) => g.id === id), nodes, groups) : { nodes: [], groups: [] };
+    const rect = ({ x, y, w, h }) => ({ x, y, w, h });
+    gesture.current = {
+      kind,
+      id,
+      mode,
+      x: e.clientX,
+      y: e.clientY,
+      start: rect(target),
+      nodes: Object.fromEntries((kind === "node" ? [target] : carried.nodes).map((n) => [n.id, rect(n)])),
+      groups: Object.fromEntries(carried.groups.map((g) => [g.id, rect(g)]))
+    };
+    setPicked({ kind, id });
+    setMoving(id);
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const pickedRect = picked ? picked.kind === "node" ? nodesById.get(picked.id) : groups.find((g) => g.id === picked.id) : void 0;
+  const resizeFrom = (e, handle) => {
+    if (picked) begin(e, picked.kind, picked.id, handle);
+  };
+  const gestureMove = (e) => {
+    const g = gesture.current;
+    if (!g) return false;
+    const dx = (e.clientX - g.x) / view.scale;
+    const dy = (e.clientY - g.y) / view.scale;
+    if (g.mode !== "move") {
+      const next = dragRect2(g.start, g.mode, dx, dy, minSize2(g.kind));
+      setMoved((m) => {
+        const base = m.diagram === diagram ? m : { diagram, nodes: {}, groups: {} };
+        return g.kind === "node" ? { ...base, nodes: { ...base.nodes, [g.id]: next } } : { ...base, groups: { ...base.groups, [g.id]: next } };
+      });
+      return true;
+    }
+    const shift = (r) => ({ ...r, x: Math.round(r.x + dx), y: Math.round(r.y + dy) });
+    setMoved((m) => {
+      const base = m.diagram === diagram ? m : { diagram, nodes: {}, groups: {} };
+      const nextNodes = { ...base.nodes };
+      const nextGroups = { ...base.groups };
+      for (const [id, r] of Object.entries(g.nodes)) nextNodes[id] = shift(r);
+      for (const [id, r] of Object.entries(g.groups)) nextGroups[id] = shift(r);
+      if (g.kind === "group") nextGroups[g.id] = shift(g.start);
+      return { diagram, nodes: nextNodes, groups: nextGroups };
+    });
+    return true;
+  };
+  return /* @__PURE__ */ jsxs17(
+    "section",
+    {
+      ref,
+      className: `canvas snapshot-canvas${panning ? " dragging" : ""}`,
+      "aria-label": "Diagram snapshot",
+      style: { backgroundSize: `${GRID2 * view.scale}px ${GRID2 * view.scale}px`, backgroundPosition: `${view.x}px ${view.y}px` },
+      onPointerDown: (e) => {
+        if (e.button !== 0) return;
+        drag.current = { x: e.clientX, y: e.clientY, vx: view.x, vy: view.y };
+        setPicked(null);
+        touched.current = true;
+        setPanning(true);
+        e.currentTarget.setPointerCapture(e.pointerId);
+      },
+      onPointerMove: (e) => {
+        if (gestureMove(e)) return;
+        const d = drag.current;
+        if (d) setView((v) => ({ ...v, x: d.vx + e.clientX - d.x, y: d.vy + e.clientY - d.y }));
+      },
+      onPointerUp: () => {
+        stop();
+        stopGesture();
+      },
+      onPointerCancel: () => {
+        stop();
+        stopGesture();
+      },
+      children: [
+        /* @__PURE__ */ jsxs17("div", { className: focus ? "world focus" : "world", style: { transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})` }, children: [
+          groups.map((g) => {
+            const grab = movableNodes ? (e) => begin(e, "group", g.id, "move") : void 0;
+            const selected = picked?.kind === "group" && picked.id === g.id;
+            return /* @__PURE__ */ jsxs17("div", { className: `group${g.lane ? " swimlane" : ""}${selected ? " selected" : ""}`, style: { left: g.x, top: g.y, width: g.w, height: g.h, ...layerStyle(g.color) }, children: [
+              /* @__PURE__ */ jsxs17("div", { className: movableNodes ? "group-bar movable" : "group-bar", onPointerDown: grab, children: [
+                /* @__PURE__ */ jsx21("span", { className: "group-title", children: g.title }),
+                g.lane && /* @__PURE__ */ jsx21("span", { className: "lane-description", children: g.lane.body })
+              ] }),
+              movableNodes && /* @__PURE__ */ jsxs17(Fragment5, { children: [
+                /* @__PURE__ */ jsx21("span", { className: "group-edge group-edge-s", onPointerDown: grab }),
+                /* @__PURE__ */ jsx21("span", { className: "group-edge group-edge-w", onPointerDown: grab }),
+                /* @__PURE__ */ jsx21("span", { className: "group-edge group-edge-e", onPointerDown: grab })
+              ] })
+            ] }, g.id);
+          }),
+          /* @__PURE__ */ jsxs17("svg", { className: "edges", width: bounds.w, height: bounds.h, "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx21("defs", { children: /* @__PURE__ */ jsx21(ArrowHeads, { id: arrow, colors: edges.map(({ edge }) => edge.color) }) }),
+            edges.map(({ edge, geometry }) => {
+              const hl = highlights?.edges[edge.id];
+              const className = ["edge", edge.dashed ? "dashed" : "", edge.optional ? "optional" : "", edgeColor(edge.color) ? "colored" : "", hl ? `hl-${hl}` : ""].filter(Boolean).join(" ");
+              return /* @__PURE__ */ jsx21("path", { d: geometry.d, className, style: edgeStyle(edge.color), markerEnd: `url(#${arrowId(arrow, edge.color)})` }, edge.id);
+            })
+          ] }),
+          nodes.map((node) => {
+            const hl = highlights?.nodes[node.id];
+            const className = ["node", movableNodes ? "movable" : "", picked?.kind === "node" && picked.id === node.id ? "selected" : "", moving === node.id ? "moving" : "", hl ? `hl-${hl}` : ""].filter(Boolean).join(" ");
+            return /* @__PURE__ */ jsxs17(
+              "article",
+              {
+                "data-node-id": node.id,
+                className,
+                style: { left: node.x, top: node.y, width: node.w, height: node.h, ...layerStyle(node.color) },
+                onPointerDown: movableNodes ? (e) => begin(e, "node", node.id, "move") : void 0,
+                children: [
+                  /* @__PURE__ */ jsx21("h2", { children: node.title }),
+                  openNodeContent && /* @__PURE__ */ jsx21(LinkBadge, { title: node.title, state: linkStates?.[node.id], onOpen: () => openNodeContent(node.id, "code") }),
+                  openNodeContent && /* @__PURE__ */ jsx21(
+                    "button",
+                    {
+                      className: "node-expand",
+                      type: "button",
+                      "aria-label": `Open full content for ${node.title}`,
+                      title: "View full content",
+                      onPointerDown: (e) => e.stopPropagation(),
+                      onClick: () => openNodeContent(node.id),
+                      children: /* @__PURE__ */ jsx21("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("path", { d: "M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5M3 3l6 6m12-6-6 6M3 21l6-6m12 6-6-6" }) })
+                    }
+                  ),
+                  openNodeContent && node.decisions?.trim() && /* @__PURE__ */ jsxs17(
+                    "button",
+                    {
+                      className: "node-decisions",
+                      type: "button",
+                      "aria-label": `Open the decision log for ${node.title}`,
+                      title: "Decisions recorded: why this was chosen and what else was considered",
+                      onPointerDown: (e) => e.stopPropagation(),
+                      onClick: () => openNodeContent(node.id, "decisions"),
+                      children: [
+                        /* @__PURE__ */ jsx21("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx21("path", { d: "M16 3h5v5M8 3H3v5M12 22v-8.3a4 4 0 0 0-1.17-2.87L3 3M15 9l6-6" }) }),
+                        "Decisions"
+                      ]
+                    }
+                  ),
+                  renderMarkdown ? renderMarkdown(node.body) : /* @__PURE__ */ jsx21("div", { className: "dg-plain", children: node.body })
+                ]
+              },
+              node.id
+            );
+          }),
+          movableNodes && picked && pickedRect && /* @__PURE__ */ jsx21("div", { className: "resize-box", style: { left: pickedRect.x, top: pickedRect.y, width: pickedRect.w, height: pickedRect.h, ["--inv"]: Math.min(3, Math.max(0.75, 1 / view.scale)) }, children: HANDLES2.map((handle) => /* @__PURE__ */ jsx21("span", { className: `resize-handle resize-${handle}`, role: "presentation", title: "Resize", onPointerDown: (e) => resizeFrom(e, handle) }, handle)) }),
+          /* @__PURE__ */ jsx21("svg", { className: "labels", width: bounds.w, height: bounds.h, "aria-hidden": "true", children: edges.map(({ edge, geometry }) => {
+            if (!edge.label) return null;
+            const hl = highlights?.edges[edge.id];
+            const width = labelWidth2(edge);
+            return /* @__PURE__ */ jsxs17("g", { className: ["edge-label", hl ? `hl-${hl}` : ""].filter(Boolean).join(" "), transform: `translate(${geometry.lx}, ${geometry.ly})`, children: [
+              /* @__PURE__ */ jsx21("rect", { x: -width / 2, y: -9, width, height: 18, rx: 4, className: "label-bg" }),
+              /* @__PURE__ */ jsx21("text", { textAnchor: "middle", dy: "3.5", className: "label-text", children: edge.label })
+            ] }, edge.id);
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs17("div", { className: "zoom", onPointerDown: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx21("button", { className: "dg-icon-btn", type: "button", onClick: () => zoomCenter(1.2), "aria-label": "Zoom in snapshot", children: "+" }),
+          /* @__PURE__ */ jsxs17("span", { className: "zoom-pct", children: [
+            Math.round(view.scale * 100),
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx21("button", { className: "dg-icon-btn", type: "button", onClick: () => zoomCenter(1 / 1.2), "aria-label": "Zoom out snapshot", children: "\u2212" }),
+          /* @__PURE__ */ jsx21(
+            "button",
+            {
+              className: "dg-btn",
+              type: "button",
+              onClick: () => {
+                touched.current = false;
+                fit();
+              },
+              children: "Fit"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// packages/diagram-react/src/ui.ts
+import { createStore } from "zustand/vanilla";
+var MIN_SCALE2 = 0.2;
+var MAX_SCALE2 = 2;
+var PADDING = 48;
+var INITIAL_MIN_SCALE = 0.5;
+var INITIAL_TOP_OFFSET = 40;
+function clamp(v, lo, hi) {
+  return Math.min(hi, Math.max(lo, v));
+}
+function fitScale(size, bounds, min) {
+  if (bounds.w === 0 || bounds.h === 0) return 1;
+  return clamp(Math.min((size.width - PADDING * 2) / bounds.w, (size.height - PADDING * 2) / bounds.h), min, MAX_SCALE2);
+}
+var createViewportStore = () => createStore()((set) => ({
+  x: PADDING,
+  y: PADDING,
+  scale: INITIAL_MIN_SCALE,
+  panning: false,
+  setPanning: (panning) => set({ panning }),
+  setPosition: (x, y) => set({ x, y }),
+  panBy: (dx, dy) => set((s) => ({ x: s.x + dx, y: s.y + dy })),
+  zoomAround: (factor, cx, cy) => set((s) => {
+    const scale = clamp(s.scale * factor, MIN_SCALE2, MAX_SCALE2);
+    const k = scale / s.scale;
+    return { scale, x: cx - (cx - s.x) * k, y: cy - (cy - s.y) * k };
+  }),
+  // Whole diagram visible and centered.
+  fit: (size, bounds) => {
+    const scale = fitScale(size, bounds, MIN_SCALE2);
+    set({ scale, x: (size.width - bounds.w * scale) / 2, y: (size.height - bounds.h * scale) / 2 });
+  },
+  // Readable starting view: never below the initial minimum, anchored top-left.
+  reset: (size, bounds) => set({ scale: fitScale(size, bounds, INITIAL_MIN_SCALE), x: PADDING, y: PADDING + INITIAL_TOP_OFFSET })
+}));
+var createSelectionStore = () => createStore()((set) => ({
+  selection: null,
+  select: (selection) => set({ selection }),
+  clearSelection: () => set((s) => s.selection ? { selection: null } : s)
+}));
+var createEditStore = () => createStore()((set) => ({
+  node: null,
+  edge: null,
+  group: null,
+  editNode: (id, field) => set({ node: { id, field }, edge: null, group: null }),
+  editEdge: (id) => set({ edge: id, node: null, group: null }),
+  editGroup: (id) => set({ group: id, node: null, edge: null }),
+  end: () => set((s) => s.node || s.edge || s.group ? { node: null, edge: null, group: null } : s)
+}));
+var LEAVE_DELAY = 250;
+var createConnectStore = () => {
+  let timer;
+  const cancel = () => {
+    if (timer) clearTimeout(timer);
+    timer = void 0;
+  };
+  return createStore()((set) => ({
+    hovered: null,
+    source: null,
+    side: "e",
+    cursor: null,
+    target: null,
+    hover: (id) => {
+      cancel();
+      set((s) => s.hovered === id ? s : { hovered: id });
+    },
+    leave: () => {
+      cancel();
+      timer = setTimeout(() => set({ hovered: null }), LEAVE_DELAY);
+    },
+    start: (source, side, cursor) => {
+      cancel();
+      set({ source, side, cursor, target: null });
+    },
+    move: (cursor, target) => set({ cursor, target }),
+    end: () => set({ source: null, cursor: null, target: null })
+  }));
+};
+var NO_HIGHLIGHTS = { nodes: {}, edges: {}, dimmed: false };
+var createHighlightStore = () => createStore()((set) => ({
+  ...NO_HIGHLIGHTS,
+  set: ({ nodes, edges, dimmed = false }) => set({ nodes, edges, dimmed }),
+  clear: () => set((s) => s.dimmed || Object.keys(s.nodes).length || Object.keys(s.edges).length ? NO_HIGHLIGHTS : s)
+}));
+var createCanvasUi = () => ({
+  viewport: createViewportStore(),
+  selection: createSelectionStore(),
+  edit: createEditStore(),
+  connect: createConnectStore(),
+  highlight: createHighlightStore()
+});
+
+// packages/diagram-react/src/instance.ts
+var counter = 0;
+function createDiagramInstance(controller) {
+  const ui = createCanvasUi();
+  const dropWhatIsGone = () => {
+    const next = controller.getSnapshot();
+    const editing = ui.edit.getState();
+    if (editing.node && !next.nodes.some((n) => n.id === editing.node.id) || editing.edge && !next.edges.some((e) => e.id === editing.edge) || editing.group && !next.groups.some((g) => g.id === editing.group)) {
+      editing.end();
+    }
+    const { selection, clearSelection } = ui.selection.getState();
+    if (!selection) return;
+    const collection = selection.kind === "node" ? next.nodes : selection.kind === "group" ? next.groups : next.edges;
+    if (!collection.some((item) => item.id === selection.id)) clearSelection();
+  };
+  const offs = [
+    controller.subscribe(dropWhatIsGone),
+    // Another diagram is not the one that was selected, even where the ids are the same.
+    controller.onLoad(() => {
+      ui.edit.getState().end();
+      ui.selection.getState().clearSelection();
+    })
+  ];
+  return {
+    uid: `dg${++counter}`,
+    controller,
+    ui,
+    surface: { el: null },
+    dispose: () => offs.forEach((off) => off())
+  };
+}
+export {
+  ArrowHeads,
+  COLOR_PRESETS,
+  ColorControl,
+  DiagramCanvas,
+  DiagramEdge,
+  DiagramGroup,
+  DiagramNode,
+  DiagramProvider,
+  DiagramToolbar,
+  DiagramViewer,
+  EdgeLabel,
+  EdgeStyleControl,
+  LinkBadge,
+  MAX_SCALE2 as MAX_SCALE,
+  MIN_SCALE2 as MIN_SCALE,
+  ZoomControls,
+  addGroupAt,
+  addNodeAt,
+  bindStore,
+  colorCss,
+  colorLabel,
+  connectNodes,
+  createCanvasUi,
+  createDiagramInstance,
+  deleteEdge,
+  deleteGroup,
+  deleteNode,
+  edgeStyle,
+  layerStyle,
+  useConnecting,
+  useDiagram,
+  useEdges,
+  useEditing,
+  useGroups,
+  useHighlights,
+  useMeta,
+  useNodes,
+  useSelection,
+  useSlots,
+  useViewport
+};
+//# sourceMappingURL=index.js.map