@graphrefly/graphrefly 0.45.0 → 0.46.0

package/dist/utils/demo-shell/index.cjs

@@ -0,0 +1,865 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/demo-shell/index.ts
+var demo_shell_exports = {};
+__export(demo_shell_exports, {
+  demoShell: () => demoShell
+});
+module.exports = __toCommonJS(demo_shell_exports);
+var import_core2 = require("@graphrefly/pure-ts/core");
+var import_graph2 = require("@graphrefly/pure-ts/graph");
+
+// src/base/render/_internal.ts
+function escapeMermaidLabel(value) {
+  return value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
+}
+function collectDiagramArrows(described) {
+  const seen = /* @__PURE__ */ new Set();
+  const arrows = [];
+  function add(from, to) {
+    const key = `${from}\0${to}`;
+    if (seen.has(key)) return;
+    seen.add(key);
+    arrows.push([from, to]);
+  }
+  for (const [path, info] of Object.entries(described.nodes)) {
+    const deps = info.deps;
+    if (deps) {
+      for (const dep of deps) add(dep, path);
+    }
+  }
+  for (const edge of described.edges) add(edge.from, edge.to);
+  return arrows;
+}
+function normalizeDiagramDirection(direction) {
+  if (direction === void 0) return "LR";
+  if (direction === "TD" || direction === "LR" || direction === "BT" || direction === "RL") {
+    return direction;
+  }
+  throw new Error(
+    `invalid diagram direction ${String(direction)}; expected one of: TD, LR, BT, RL`
+  );
+}
+
+// src/base/render/graph-spec-to-mermaid.ts
+function graphSpecToMermaid(g, opts) {
+  const direction = normalizeDiagramDirection(opts?.direction);
+  const paths = Object.keys(g.nodes).sort();
+  const ids = /* @__PURE__ */ new Map();
+  for (let i = 0; i < paths.length; i += 1) ids.set(paths[i], `n${i}`);
+  const lines = [`flowchart ${direction}`];
+  for (const path of paths) {
+    const id = ids.get(path);
+    lines.push(`  ${id}["${escapeMermaidLabel(path)}"]`);
+  }
+  for (const [from, to] of collectDiagramArrows(g)) {
+    const fromId = ids.get(from);
+    const toId = ids.get(to);
+    if (!fromId || !toId) continue;
+    lines.push(`  ${fromId} --> ${toId}`);
+  }
+  return lines.join("\n");
+}
+
+// src/utils/reactive-layout/reactive-layout.ts
+var import_core = require("@graphrefly/pure-ts/core");
+var import_graph = require("@graphrefly/pure-ts/graph");
+function isCJK(s) {
+  for (const ch of s) {
+    const c = ch.codePointAt(0);
+    if (c >= 19968 && c <= 40959 || // CJK Unified Ideographs
+    c >= 13312 && c <= 19903 || // CJK Extension A
+    c >= 12288 && c <= 12351 || // CJK Symbols and Punctuation
+    c >= 12352 && c <= 12447 || // Hiragana
+    c >= 12448 && c <= 12543 || // Katakana
+    c >= 44032 && c <= 55215 || // Hangul
+    c >= 65280 && c <= 65519) {
+      return true;
+    }
+  }
+  return false;
+}
+var kinsokuStart = /* @__PURE__ */ new Set([
+  "\uFF0C",
+  "\uFF0E",
+  "\uFF01",
+  "\uFF1A",
+  "\uFF1B",
+  "\uFF1F",
+  "\u3001",
+  "\u3002",
+  "\u30FB",
+  "\uFF09",
+  "\u3015",
+  "\u3009",
+  "\u300B",
+  "\u300D",
+  "\u300F",
+  "\u3011"
+]);
+var leftStickyPunctuation = /* @__PURE__ */ new Set([
+  ".",
+  ",",
+  "!",
+  "?",
+  ":",
+  ";",
+  ")",
+  "]",
+  "}",
+  "%",
+  '"',
+  "\u201D",
+  "\u2019",
+  "\xBB",
+  "\u203A",
+  "\u2026"
+]);
+function normalizeWhitespace(text) {
+  return text.replace(/[\t\n\r\f ]+/g, " ").replace(/^ | $/g, "");
+}
+function segmentText(normalized) {
+  const wordSegmenter = new Intl.Segmenter(void 0, { granularity: "word" });
+  const pieces = [];
+  for (const s of wordSegmenter.segment(normalized)) {
+    const text = s.segment;
+    const isWordLike = s.isWordLike ?? false;
+    const texts = [];
+    const wordLikes = [];
+    const kinds = [];
+    let currentText = "";
+    let currentKind = null;
+    for (const ch of text) {
+      let kind;
+      if (ch === " ") kind = "space";
+      else if (ch === "\u200B") kind = "zero-width-break";
+      else if (ch === "\xAD") kind = "soft-hyphen";
+      else if (ch === "\n") kind = "hard-break";
+      else kind = "text";
+      if (currentKind !== null && kind === currentKind) {
+        currentText += ch;
+      } else {
+        if (currentKind !== null) {
+          texts.push(currentText);
+          wordLikes.push(currentKind === "text" && isWordLike);
+          kinds.push(currentKind);
+        }
+        currentText = ch;
+        currentKind = kind;
+      }
+    }
+    if (currentKind !== null) {
+      texts.push(currentText);
+      wordLikes.push(currentKind === "text" && isWordLike);
+      kinds.push(currentKind);
+    }
+    pieces.push({ texts, isWordLike: wordLikes, kinds });
+  }
+  return pieces;
+}
+function analyzeAndMeasure(text, font, adapter, cache, stats) {
+  const normalized = normalizeWhitespace(text);
+  if (normalized.length === 0) return [];
+  const pieces = segmentText(normalized);
+  const graphemeSegmenter = new Intl.Segmenter(void 0, {
+    granularity: "grapheme"
+  });
+  const rawTexts = [];
+  const rawKinds = [];
+  const rawWordLike = [];
+  for (const piece of pieces) {
+    for (let i = 0; i < piece.texts.length; i++) {
+      rawTexts.push(piece.texts[i]);
+      rawKinds.push(piece.kinds[i]);
+      rawWordLike.push(piece.isWordLike[i]);
+    }
+  }
+  const mergedTexts = [];
+  const mergedKinds = [];
+  const mergedWordLike = [];
+  for (let i = 0; i < rawTexts.length; i++) {
+    const t = rawTexts[i];
+    const k = rawKinds[i];
+    const wl = rawWordLike[i];
+    if (k === "text" && !wl && mergedTexts.length > 0 && mergedKinds[mergedKinds.length - 1] === "text") {
+      const isSticky = t.length === 1 && (leftStickyPunctuation.has(t) || kinsokuStart.has(t));
+      if (isSticky) {
+        mergedTexts[mergedTexts.length - 1] += t;
+        continue;
+      }
+    }
+    if (t === "-" && mergedTexts.length > 0 && mergedKinds[mergedKinds.length - 1] === "text" && mergedWordLike[mergedWordLike.length - 1]) {
+      mergedTexts[mergedTexts.length - 1] += t;
+      continue;
+    }
+    mergedTexts.push(t);
+    mergedKinds.push(k);
+    mergedWordLike.push(wl);
+  }
+  let fontCache = cache.get(font);
+  if (!fontCache) {
+    fontCache = /* @__PURE__ */ new Map();
+    cache.set(font, fontCache);
+  }
+  function measureCached(seg) {
+    let w = fontCache.get(seg);
+    if (w === void 0) {
+      if (stats) stats.misses += 1;
+      const raw = adapter.measureSegment(seg, font).width;
+      w = Number.isFinite(raw) && raw >= 0 ? raw : 0;
+      fontCache.set(seg, w);
+    } else if (stats) {
+      stats.hits += 1;
+    }
+    return w;
+  }
+  const segments = [];
+  for (let i = 0; i < mergedTexts.length; i++) {
+    const t = mergedTexts[i];
+    const k = mergedKinds[i];
+    if (k !== "text") {
+      segments.push({
+        text: t,
+        width: k === "space" ? measureCached(" ") * t.length : 0,
+        kind: k,
+        graphemeWidths: null
+      });
+      continue;
+    }
+    if (isCJK(t)) {
+      let unitText = "";
+      for (const gs of graphemeSegmenter.segment(t)) {
+        const grapheme = gs.segment;
+        if (unitText.length > 0 && kinsokuStart.has(grapheme)) {
+          unitText += grapheme;
+          continue;
+        }
+        if (unitText.length > 0) {
+          const w2 = measureCached(unitText);
+          segments.push({
+            text: unitText,
+            width: w2,
+            kind: "text",
+            graphemeWidths: null
+          });
+        }
+        unitText = grapheme;
+      }
+      if (unitText.length > 0) {
+        const w2 = measureCached(unitText);
+        segments.push({
+          text: unitText,
+          width: w2,
+          kind: "text",
+          graphemeWidths: null
+        });
+      }
+      continue;
+    }
+    const w = measureCached(t);
+    let graphemeWidths = null;
+    if (mergedWordLike[i] && t.length > 1) {
+      const gWidths = [];
+      for (const gs of graphemeSegmenter.segment(t)) {
+        gWidths.push(measureCached(gs.segment));
+      }
+      if (gWidths.length > 1) {
+        graphemeWidths = gWidths;
+      }
+    }
+    segments.push({ text: t, width: w, kind: "text", graphemeWidths });
+  }
+  return segments;
+}
+function computeLineBreaks(segments, maxWidth, adapter, font, cache) {
+  if (segments.length === 0) {
+    return { lines: [], lineCount: 0 };
+  }
+  const lines = [];
+  let lineW = 0;
+  let hasContent = false;
+  let lineStartSeg = 0;
+  let lineStartGrapheme = 0;
+  let lineEndSeg = 0;
+  let lineEndGrapheme = 0;
+  let pendingBreakSeg = -1;
+  let pendingBreakWidth = 0;
+  let fontCache = cache.get(font);
+  if (!fontCache) {
+    fontCache = /* @__PURE__ */ new Map();
+    cache.set(font, fontCache);
+  }
+  let hyphenWidth = fontCache.get("-");
+  if (hyphenWidth === void 0) {
+    hyphenWidth = adapter.measureSegment("-", font).width;
+    fontCache.set("-", hyphenWidth);
+  }
+  function flushLine(endSeg = lineEndSeg, endGrapheme = lineEndGrapheme, width = lineW) {
+    let text = "";
+    for (let i = lineStartSeg; i < endSeg; i++) {
+      const seg = segments[i];
+      if (seg.kind === "soft-hyphen" || seg.kind === "hard-break") continue;
+      if (i === lineStartSeg && lineStartGrapheme > 0 && seg.graphemeWidths) {
+        const graphemeSegmenter = new Intl.Segmenter(void 0, {
+          granularity: "grapheme"
+        });
+        const graphemes = [...graphemeSegmenter.segment(seg.text)].map((g) => g.segment);
+        text += graphemes.slice(lineStartGrapheme).join("");
+      } else {
+        text += seg.text;
+      }
+    }
+    if (endGrapheme > 0 && endSeg < segments.length) {
+      const seg = segments[endSeg];
+      const graphemeSegmenter = new Intl.Segmenter(void 0, {
+        granularity: "grapheme"
+      });
+      const graphemes = [...graphemeSegmenter.segment(seg.text)].map((g) => g.segment);
+      const startG = lineStartSeg === endSeg ? lineStartGrapheme : 0;
+      text += graphemes.slice(startG, endGrapheme).join("");
+    }
+    if (endSeg > 0 && segments[endSeg - 1]?.kind === "soft-hyphen" && !(lineStartSeg === endSeg && lineStartGrapheme > 0)) {
+      text += "-";
+    }
+    lines.push({
+      text,
+      width,
+      startSegment: lineStartSeg,
+      startGrapheme: lineStartGrapheme,
+      endSegment: endSeg,
+      endGrapheme
+    });
+    lineW = 0;
+    hasContent = false;
+    pendingBreakSeg = -1;
+    pendingBreakWidth = 0;
+  }
+  function canBreakAfter(kind) {
+    return kind === "space" || kind === "zero-width-break" || kind === "soft-hyphen";
+  }
+  function startLine(segIdx, graphemeIdx, width) {
+    hasContent = true;
+    lineStartSeg = segIdx;
+    lineStartGrapheme = graphemeIdx;
+    lineEndSeg = segIdx + 1;
+    lineEndGrapheme = 0;
+    lineW = width;
+  }
+  function startLineAtGrapheme(segIdx, graphemeIdx, width) {
+    hasContent = true;
+    lineStartSeg = segIdx;
+    lineStartGrapheme = graphemeIdx;
+    lineEndSeg = segIdx;
+    lineEndGrapheme = graphemeIdx + 1;
+    lineW = width;
+  }
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i];
+    if (seg.kind === "hard-break") {
+      if (hasContent) {
+        flushLine();
+      } else {
+        lines.push({
+          text: "",
+          width: 0,
+          startSegment: i,
+          startGrapheme: 0,
+          endSegment: i,
+          endGrapheme: 0
+        });
+      }
+      lineStartSeg = i + 1;
+      lineStartGrapheme = 0;
+      continue;
+    }
+    const w = seg.width;
+    if (!hasContent) {
+      if (w > maxWidth && seg.graphemeWidths) {
+        appendBreakableSegment(i, 0, seg.graphemeWidths);
+      } else {
+        startLine(i, 0, w);
+      }
+      if (canBreakAfter(seg.kind)) {
+        pendingBreakSeg = i + 1;
+        pendingBreakWidth = seg.kind === "space" ? lineW - w : lineW;
+      }
+      continue;
+    }
+    const newW = lineW + w;
+    if (newW > maxWidth + 5e-3) {
+      if (canBreakAfter(seg.kind)) {
+        lineW += w;
+        lineEndSeg = i + 1;
+        lineEndGrapheme = 0;
+        flushLine(i + 1, 0, seg.kind === "space" ? lineW - w : lineW);
+        continue;
+      }
+      if (pendingBreakSeg >= 0) {
+        flushLine(pendingBreakSeg, 0, pendingBreakWidth);
+        i--;
+        continue;
+      }
+      if (w > maxWidth && seg.graphemeWidths) {
+        flushLine();
+        appendBreakableSegment(i, 0, seg.graphemeWidths);
+        continue;
+      }
+      flushLine();
+      i--;
+      continue;
+    }
+    lineW = newW;
+    lineEndSeg = i + 1;
+    lineEndGrapheme = 0;
+    if (canBreakAfter(seg.kind)) {
+      pendingBreakSeg = i + 1;
+      pendingBreakWidth = seg.kind === "space" ? lineW - w : lineW;
+    }
+  }
+  if (hasContent) {
+    flushLine();
+  }
+  return { lines, lineCount: lines.length };
+  function appendBreakableSegment(segIdx, startG, gWidths) {
+    for (let g = startG; g < gWidths.length; g++) {
+      const gw = gWidths[g];
+      if (!hasContent) {
+        startLineAtGrapheme(segIdx, g, gw);
+        continue;
+      }
+      if (lineW + gw > maxWidth + 5e-3) {
+        flushLine();
+        startLineAtGrapheme(segIdx, g, gw);
+      } else {
+        lineW += gw;
+        lineEndSeg = segIdx;
+        lineEndGrapheme = g + 1;
+      }
+    }
+    if (hasContent && lineEndSeg === segIdx && lineEndGrapheme === gWidths.length) {
+      lineEndSeg = segIdx + 1;
+      lineEndGrapheme = 0;
+    }
+  }
+}
+
+// src/utils/demo-shell/index.ts
+function clamp01(v) {
+  return Math.max(0, Math.min(1, v));
+}
+function demoShell(opts) {
+  const mainRatioInit = clamp01(opts?.mainRatio ?? 0.65);
+  const sideSplitInit = clamp01(opts?.sideSplit ?? 0.5);
+  const viewportInit = Math.max(0, opts?.viewportWidth ?? 1280);
+  const registry = opts?.nodeRegistry ?? /* @__PURE__ */ new Map();
+  const adapter = opts?.adapter ?? null;
+  const layoutFont = opts?.layoutFont ?? "14px monospace";
+  const onHighlight = opts?.onHighlight;
+  const g = new import_graph2.Graph("demo-shell");
+  const paneMainRatio = (0, import_core2.node)([], { ...{ name: "pane/main-ratio" }, initial: mainRatioInit });
+  const paneSideSplit = (0, import_core2.node)([], { ...{ name: "pane/side-split" }, initial: sideSplitInit });
+  const paneFullscreen = (0, import_core2.node)([], {
+    ...{
+      name: "pane/fullscreen"
+    },
+    initial: null
+  });
+  const viewportWidth = (0, import_core2.node)([], { ...{ name: "viewport/width" }, initial: viewportInit });
+  g.add(paneMainRatio, { name: "pane/main-ratio" });
+  g.add(paneSideSplit, { name: "pane/side-split" });
+  g.add(paneFullscreen, { name: "pane/fullscreen" });
+  g.add(viewportWidth, { name: "viewport/width" });
+  const paneMainWidth = (0, import_core2.node)(
+    [paneMainRatio, viewportWidth, paneFullscreen],
+    (batchData, actions, ctx) => {
+      const data = batchData.map(
+        (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+      );
+      const r = data[0];
+      const w = data[1];
+      const fullscreen = data[2];
+      if (fullscreen === "main") actions.emit(w);
+      else if (fullscreen === "graph" || fullscreen === "code") actions.emit(0);
+      else actions.emit(Math.round(w * r));
+    },
+    { describeKind: "derived", ...{ name: "pane/main-width" } }
+  );
+  const paneSideWidth = (0, import_core2.node)(
+    [paneMainWidth, viewportWidth, paneFullscreen],
+    (batchData, actions, ctx) => {
+      const data = batchData.map(
+        (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+      );
+      const main = data[0];
+      const w = data[1];
+      const fullscreen = data[2];
+      if (fullscreen === "main") actions.emit(0);
+      else if (fullscreen === "graph" || fullscreen === "code") actions.emit(w);
+      else actions.emit(w - main);
+    },
+    { describeKind: "derived", ...{ name: "pane/side-width" } }
+  );
+  const paneGraphHeight = (0, import_core2.node)(
+    [paneSideSplit, paneFullscreen],
+    (batchData, actions, ctx) => {
+      const data = batchData.map(
+        (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+      );
+      const split = data[0];
+      const fullscreen = data[1];
+      if (fullscreen === "graph") actions.emit(1);
+      else if (fullscreen === "code") actions.emit(0);
+      else if (fullscreen === "main") actions.emit(0);
+      else actions.emit(clamp01(split));
+    },
+    { describeKind: "derived", ...{ name: "pane/graph-height-ratio" } }
+  );
+  const paneCodeHeight = (0, import_core2.node)(
+    [paneGraphHeight, paneFullscreen],
+    (batchData, actions, ctx) => {
+      const data = batchData.map(
+        (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+      );
+      const graphH = data[0];
+      const fullscreen = data[1];
+      if (fullscreen === "code") actions.emit(1);
+      else if (fullscreen === "graph" || fullscreen === "main") actions.emit(0);
+      else actions.emit(1 - graphH);
+    },
+    { describeKind: "derived", ...{ name: "pane/code-height-ratio" } }
+  );
+  g.add(paneMainWidth, { name: "pane/main-width" });
+  g.add(paneSideWidth, { name: "pane/side-width" });
+  g.add(paneGraphHeight, { name: "pane/graph-height-ratio" });
+  g.add(paneCodeHeight, { name: "pane/code-height-ratio" });
+  const demoGraphRef = (0, import_core2.node)([], {
+    ...{
+      name: "demo/graph-ref"
+    },
+    initial: null
+  });
+  const demoGraphTick = (0, import_core2.node)([], { ...{ name: "demo/graph-tick" }, initial: 0 });
+  g.add(demoGraphRef, { name: "demo/graph-ref" });
+  g.add(demoGraphTick, { name: "demo/graph-tick" });
+  const graphMermaid = (0, import_core2.node)(
+    [demoGraphRef, demoGraphTick],
+    (batchData, actions, ctx) => {
+      const data = batchData.map(
+        (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+      );
+      const demo = data[0];
+      actions.emit(demo ? graphSpecToMermaid(demo.describe()) : "");
+    },
+    { describeKind: "derived", ...{ name: "graph/mermaid" } }
+  );
+  const graphDescribe = (0, import_core2.node)(
+    [demoGraphRef, demoGraphTick],
+    (batchData, actions, ctx) => {
+      const data = batchData.map(
+        (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+      );
+      const demo = data[0];
+      if (!demo) {
+        actions.emit(null);
+        return;
+      }
+      const { expand: _, ...snapshot } = demo.describe({ detail: "standard" });
+      actions.emit(snapshot);
+    },
+    { describeKind: "derived", ...{ name: "graph/describe" } }
+  );
+  g.add(graphMermaid, { name: "graph/mermaid" });
+  g.add(graphDescribe, { name: "graph/describe" });
+  const hoverTarget = (0, import_core2.node)([], { ...{ name: "hover/target" }, initial: null });
+  g.add(hoverTarget, { name: "hover/target" });
+  const highlightCodeScroll = (0, import_core2.node)(
+    [hoverTarget],
+    (batchData, actions, ctx) => {
+      const data = batchData.map(
+        (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+      );
+      const t = data[0];
+      if (!t) {
+        actions.emit(null);
+        return;
+      }
+      const entry = registry.get(t.id);
+      actions.emit(entry ? entry.codeLine : null);
+    },
+    { describeKind: "derived", ...{ name: "highlight/code-scroll" } }
+  );
+  const highlightVisual = (0, import_core2.node)(
+    [hoverTarget],
+    (batchData, actions, ctx) => {
+      const data = batchData.map(
+        (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+      );
+      const t = data[0];
+      if (!t) {
+        actions.emit(null);
+        return;
+      }
+      const entry = registry.get(t.id);
+      actions.emit(entry ? entry.visualSelector : null);
+    },
+    { describeKind: "derived", ...{ name: "highlight/visual" } }
+  );
+  const highlightGraph = (0, import_core2.node)(
+    [hoverTarget],
+    (batchData, actions, ctx) => {
+      const data = batchData.map(
+        (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+      );
+      const t = data[0];
+      actions.emit(t ? t.id : null);
+    },
+    { describeKind: "derived", ...{ name: "highlight/graph" } }
+  );
+  g.add(highlightCodeScroll, { name: "highlight/code-scroll" });
+  g.add(highlightVisual, { name: "highlight/visual" });
+  g.add(highlightGraph, { name: "highlight/graph" });
+  if (onHighlight?.codeScroll) {
+    const cb = onHighlight.codeScroll;
+    const applyCodeScroll = (0, import_core2.node)(
+      [highlightCodeScroll],
+      (batchData, _actions, ctx) => {
+        const data = batchData.map(
+          (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+        );
+        cb(data[0]);
+      },
+      { describeKind: "effect" }
+    );
+    g.add(applyCodeScroll, { name: "highlight/apply-code-scroll" });
+  }
+  if (onHighlight?.visual) {
+    const cb = onHighlight.visual;
+    const applyVisual = (0, import_core2.node)(
+      [highlightVisual],
+      (batchData, _actions, ctx) => {
+        const data = batchData.map(
+          (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+        );
+        cb(data[0]);
+      },
+      { describeKind: "effect" }
+    );
+    g.add(applyVisual, { name: "highlight/apply-visual" });
+  }
+  if (onHighlight?.graph) {
+    const cb = onHighlight.graph;
+    const applyGraph = (0, import_core2.node)(
+      [highlightGraph],
+      (batchData, _actions, ctx) => {
+        const data = batchData.map(
+          (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+        );
+        cb(data[0]);
+      },
+      { describeKind: "effect" }
+    );
+    g.add(applyGraph, { name: "highlight/apply-graph" });
+  }
+  const inspectSelected = (0, import_core2.node)([], {
+    ...{
+      name: "inspect/selected-node"
+    },
+    initial: null
+  });
+  g.add(inspectSelected, { name: "inspect/selected-node" });
+  const inspectNodeDetail = (0, import_core2.node)(
+    [inspectSelected, demoGraphRef, demoGraphTick],
+    (batchData, actions, ctx) => {
+      const data = batchData.map(
+        (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+      );
+      const p = data[0];
+      const demo = data[1];
+      if (!demo || !p) {
+        actions.emit(null);
+        return;
+      }
+      try {
+        const snap = demo.describe({ detail: "standard" });
+        const nodeDesc = snap.nodes[p];
+        if (!nodeDesc) {
+          actions.emit(null);
+          return;
+        }
+        actions.emit({ path: p, ...nodeDesc });
+      } catch {
+        actions.emit(null);
+      }
+    },
+    { describeKind: "derived", ...{ name: "inspect/node-detail" } }
+  );
+  const inspectTraceLog = (0, import_core2.node)(
+    [demoGraphRef, demoGraphTick],
+    (batchData, actions, ctx) => {
+      const data = batchData.map(
+        (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+      );
+      const demo = data[0];
+      actions.emit(demo ? demo.trace() : []);
+    },
+    { describeKind: "derived", ...{ name: "inspect/trace-log" } }
+  );
+  g.add(inspectNodeDetail, { name: "inspect/node-detail" });
+  g.add(inspectTraceLog, { name: "inspect/trace-log" });
+  const metaDebug = (0, import_core2.node)([], { ...{ name: "meta/debug" }, initial: false });
+  g.add(metaDebug, { name: "meta/debug" });
+  const metaShellMermaid = (0, import_core2.node)(
+    [metaDebug, demoGraphTick],
+    (batchData, actions, ctx) => {
+      const data = batchData.map(
+        (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+      );
+      actions.emit(data[0] ? graphSpecToMermaid(g.describe()) : "");
+    },
+    { describeKind: "derived", ...{ name: "meta/shell-mermaid" } }
+  );
+  g.add(metaShellMermaid, { name: "meta/shell-mermaid" });
+  const codeTextNode = (0, import_core2.node)([], { ...{ name: "layout/code-text" }, initial: "" });
+  g.add(codeTextNode, { name: "layout/code-text" });
+  if (adapter) {
+    const measureCache = /* @__PURE__ */ new Map();
+    const graphLabels = (0, import_core2.node)(
+      [graphDescribe],
+      (batchData, actions, ctx) => {
+        const data = batchData.map(
+          (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+        );
+        const d = data[0];
+        if (!d) {
+          actions.emit(/* @__PURE__ */ new Map());
+          return;
+        }
+        const result = /* @__PURE__ */ new Map();
+        for (const [name] of Object.entries(d.nodes)) {
+          const segments = analyzeAndMeasure(name, layoutFont, adapter, measureCache);
+          const lb = computeLineBreaks(segments, Infinity, adapter, layoutFont, measureCache);
+          const width = lb.lines.reduce((max, l) => Math.max(max, l.width), 0);
+          const height = lb.lineCount * 20;
+          result.set(name, { width, height });
+        }
+        actions.emit(result);
+      },
+      {
+        describeKind: "derived",
+        ...{
+          name: "layout/graph-labels",
+          equals: (a, b) => {
+            if (a === b) return true;
+            const ma = a;
+            const mb = b;
+            if (ma.size !== mb.size) return false;
+            for (const [k, v] of ma) {
+              const bv = mb.get(k);
+              if (!bv || bv.width !== v.width || bv.height !== v.height) return false;
+            }
+            return true;
+          }
+        }
+      }
+    );
+    const codeLines = (0, import_core2.node)(
+      [codeTextNode, paneSideWidth],
+      (batchData, actions, ctx) => {
+        const data = batchData.map(
+          (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+        );
+        const t = data[0];
+        if (!t) {
+          actions.emit({ lineCount: 0, lines: [] });
+          return;
+        }
+        const segments = analyzeAndMeasure(t, layoutFont, adapter, measureCache);
+        const maxW = data[1] - 40;
+        actions.emit(
+          computeLineBreaks(segments, Math.max(100, maxW), adapter, layoutFont, measureCache)
+        );
+      },
+      { describeKind: "derived", name: "layout/code-lines" }
+    );
+    const sideWidthHint = (0, import_core2.node)(
+      [graphLabels],
+      (batchData, actions, ctx) => {
+        const data = batchData.map(
+          (batch2, i) => batch2 != null && batch2.length > 0 ? batch2.at(-1) : ctx.prevData[i]
+        );
+        const m = data[0];
+        if (m.size === 0) {
+          actions.emit(200);
+          return;
+        }
+        let maxW = 0;
+        for (const { width } of m.values()) {
+          if (width > maxW) maxW = width;
+        }
+        actions.emit(Math.max(200, Math.round(maxW + 80)));
+      },
+      { describeKind: "derived", name: "layout/side-width-hint" }
+    );
+    g.add(graphLabels, { name: "layout/graph-labels" });
+    g.add(codeLines, { name: "layout/code-lines" });
+    g.add(sideWidthHint, { name: "layout/side-width-hint" });
+  }
+  let tickCounter = 0;
+  return {
+    graph: g,
+    setMainRatio(ratio) {
+      g.set("pane/main-ratio", clamp01(ratio));
+    },
+    setSideSplit(ratio) {
+      g.set("pane/side-split", clamp01(ratio));
+    },
+    setFullscreen(pane) {
+      g.set("pane/fullscreen", pane);
+    },
+    setViewportWidth(width) {
+      g.set("viewport/width", Math.max(0, width));
+    },
+    setHoverTarget(target) {
+      g.set("hover/target", target);
+    },
+    setDemoGraph(demo) {
+      g.set("demo/graph-ref", demo);
+    },
+    bumpGraphTick() {
+      g.set("demo/graph-tick", ++tickCounter);
+    },
+    selectNode(path) {
+      g.set("inspect/selected-node", path);
+    },
+    setMetaDebug(on) {
+      g.set("meta/debug", on);
+    },
+    setCodeText(text) {
+      g.set("layout/code-text", text);
+    },
+    batch(fn) {
+      (0, import_core2.batch)(fn);
+    },
+    destroy() {
+      g.destroy();
+    }
+  };
+}
+//# sourceMappingURL=index.cjs.map