@graphrefly/graphrefly 0.25.0 → 0.27.0

package/dist/chunk-JWBCY4NC.js

@@ -0,0 +1,330 @@
+import {
+  analyzeAndMeasure,
+  computeLineBreaks
+} from "./chunk-GTE6PWRZ.js";
+import {
+  Graph
+} from "./chunk-PF7GRZMW.js";
+import {
+  describeNode,
+  resolveDescribeFields
+} from "./chunk-VYPWMZ6H.js";
+import {
+  batch,
+  derived,
+  effect,
+  state
+} from "./chunk-PHOUUNK7.js";
+import {
+  __export
+} from "./chunk-SX52TAR4.js";
+
+// src/patterns/demo-shell.ts
+var demo_shell_exports = {};
+__export(demo_shell_exports, {
+  demoShell: () => demoShell
+});
+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 Graph("demo-shell");
+  const paneMainRatio = state(mainRatioInit, { name: "pane/main-ratio" });
+  const paneSideSplit = state(sideSplitInit, { name: "pane/side-split" });
+  const paneFullscreen = state(null, {
+    name: "pane/fullscreen"
+  });
+  const viewportWidth = state(viewportInit, { name: "viewport/width" });
+  g.add("pane/main-ratio", paneMainRatio);
+  g.add("pane/side-split", paneSideSplit);
+  g.add("pane/fullscreen", paneFullscreen);
+  g.add("viewport/width", viewportWidth);
+  const paneMainWidth = derived(
+    [paneMainRatio, viewportWidth, paneFullscreen],
+    ([ratio, vw, fs]) => {
+      const r = ratio;
+      const w = vw;
+      const fullscreen = fs;
+      if (fullscreen === "main") return w;
+      if (fullscreen === "graph" || fullscreen === "code") return 0;
+      return Math.round(w * r);
+    },
+    { name: "pane/main-width" }
+  );
+  const paneSideWidth = derived(
+    [paneMainWidth, viewportWidth, paneFullscreen],
+    ([main, vw, fs]) => {
+      const fullscreen = fs;
+      const w = vw;
+      if (fullscreen === "main") return 0;
+      if (fullscreen === "graph" || fullscreen === "code") return w;
+      return w - main;
+    },
+    { name: "pane/side-width" }
+  );
+  const paneGraphHeight = derived(
+    [paneSideSplit, paneFullscreen],
+    ([split, fs]) => {
+      const fullscreen = fs;
+      if (fullscreen === "graph") return 1;
+      if (fullscreen === "code") return 0;
+      if (fullscreen === "main") return 0;
+      return clamp01(split);
+    },
+    { name: "pane/graph-height-ratio" }
+  );
+  const paneCodeHeight = derived(
+    [paneGraphHeight, paneFullscreen],
+    ([graphH, fs]) => {
+      const fullscreen = fs;
+      if (fullscreen === "code") return 1;
+      if (fullscreen === "graph" || fullscreen === "main") return 0;
+      return 1 - graphH;
+    },
+    { name: "pane/code-height-ratio" }
+  );
+  g.add("pane/main-width", paneMainWidth);
+  g.add("pane/side-width", paneSideWidth);
+  g.add("pane/graph-height-ratio", paneGraphHeight);
+  g.add("pane/code-height-ratio", paneCodeHeight);
+  const demoGraphRef = state(null, {
+    name: "demo/graph-ref"
+  });
+  const demoGraphTick = state(0, { name: "demo/graph-tick" });
+  g.add("demo/graph-ref", demoGraphRef);
+  g.add("demo/graph-tick", demoGraphTick);
+  const graphMermaid = derived(
+    [demoGraphRef, demoGraphTick],
+    ([ref, _tick]) => {
+      const demo = ref;
+      if (!demo) return "";
+      return demo.describe({ format: "mermaid" });
+    },
+    { name: "graph/mermaid" }
+  );
+  const graphDescribe = derived(
+    [demoGraphRef, demoGraphTick],
+    ([ref, _tick]) => {
+      const demo = ref;
+      if (!demo) return null;
+      const { expand: _, ...snapshot } = demo.describe({ detail: "standard" });
+      return snapshot;
+    },
+    { name: "graph/describe" }
+  );
+  g.add("graph/mermaid", graphMermaid);
+  g.add("graph/describe", graphDescribe);
+  const hoverTarget = state(null, { name: "hover/target" });
+  g.add("hover/target", hoverTarget);
+  const highlightCodeScroll = derived(
+    [hoverTarget],
+    ([target]) => {
+      const t = target;
+      if (!t) return null;
+      const entry = registry.get(t.id);
+      return entry ? entry.codeLine : null;
+    },
+    { name: "highlight/code-scroll" }
+  );
+  const highlightVisual = derived(
+    [hoverTarget],
+    ([target]) => {
+      const t = target;
+      if (!t) return null;
+      const entry = registry.get(t.id);
+      return entry ? entry.visualSelector : null;
+    },
+    { name: "highlight/visual" }
+  );
+  const highlightGraph = derived(
+    [hoverTarget],
+    ([target]) => {
+      const t = target;
+      if (!t) return null;
+      return t.id;
+    },
+    { name: "highlight/graph" }
+  );
+  g.add("highlight/code-scroll", highlightCodeScroll);
+  g.add("highlight/visual", highlightVisual);
+  g.add("highlight/graph", highlightGraph);
+  if (onHighlight?.codeScroll) {
+    const cb = onHighlight.codeScroll;
+    const applyCodeScroll = effect([highlightCodeScroll], ([line]) => {
+      cb(line);
+    });
+    g.add("highlight/apply-code-scroll", applyCodeScroll);
+  }
+  if (onHighlight?.visual) {
+    const cb = onHighlight.visual;
+    const applyVisual = effect([highlightVisual], ([selector]) => {
+      cb(selector);
+    });
+    g.add("highlight/apply-visual", applyVisual);
+  }
+  if (onHighlight?.graph) {
+    const cb = onHighlight.graph;
+    const applyGraph = effect([highlightGraph], ([nodeId]) => {
+      cb(nodeId);
+    });
+    g.add("highlight/apply-graph", applyGraph);
+  }
+  const inspectSelected = state(null, {
+    name: "inspect/selected-node"
+  });
+  g.add("inspect/selected-node", inspectSelected);
+  const standardFields = resolveDescribeFields("standard");
+  const inspectNodeDetail = derived(
+    [inspectSelected, demoGraphRef, demoGraphTick],
+    ([path, ref, _tick]) => {
+      const demo = ref;
+      const p = path;
+      if (!demo || !p) return null;
+      try {
+        const nd = demo.resolve(p);
+        const nodeDesc = describeNode(nd, standardFields);
+        return { path: p, ...nodeDesc, value: nd.cache };
+      } catch {
+        return null;
+      }
+    },
+    { name: "inspect/node-detail" }
+  );
+  const inspectTraceLog = derived(
+    [demoGraphRef, demoGraphTick],
+    ([ref, _tick]) => {
+      const demo = ref;
+      if (!demo) return [];
+      return demo.trace();
+    },
+    { name: "inspect/trace-log" }
+  );
+  g.add("inspect/node-detail", inspectNodeDetail);
+  g.add("inspect/trace-log", inspectTraceLog);
+  const metaDebug = state(false, { name: "meta/debug" });
+  g.add("meta/debug", metaDebug);
+  const metaShellMermaid = derived(
+    [metaDebug, demoGraphTick],
+    ([debug, _tick]) => {
+      if (!debug) return "";
+      return g.describe({ format: "mermaid" });
+    },
+    { name: "meta/shell-mermaid" }
+  );
+  g.add("meta/shell-mermaid", metaShellMermaid);
+  const codeTextNode = state("", { name: "layout/code-text" });
+  g.add("layout/code-text", codeTextNode);
+  if (adapter) {
+    const measureCache = /* @__PURE__ */ new Map();
+    const graphLabels = derived(
+      [graphDescribe],
+      ([desc]) => {
+        const d = desc;
+        if (!d) return /* @__PURE__ */ new Map();
+        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 });
+        }
+        return result;
+      },
+      {
+        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 = derived(
+      [codeTextNode, paneSideWidth],
+      ([text, sideW]) => {
+        const t = text;
+        if (!t) return { lineCount: 0, lines: [] };
+        const segments = analyzeAndMeasure(t, layoutFont, adapter, measureCache);
+        const maxW = sideW - 40;
+        return computeLineBreaks(segments, Math.max(100, maxW), adapter, layoutFont, measureCache);
+      },
+      { name: "layout/code-lines" }
+    );
+    const sideWidthHint = derived(
+      [graphLabels],
+      ([labels]) => {
+        const m = labels;
+        if (m.size === 0) return 200;
+        let maxW = 0;
+        for (const { width } of m.values()) {
+          if (width > maxW) maxW = width;
+        }
+        return Math.max(200, Math.round(maxW + 80));
+      },
+      { name: "layout/side-width-hint" }
+    );
+    g.add("layout/graph-labels", graphLabels);
+    g.add("layout/code-lines", codeLines);
+    g.add("layout/side-width-hint", sideWidthHint);
+  }
+  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) {
+      batch(fn);
+    },
+    destroy() {
+      g.destroy();
+    }
+  };
+}
+
+export {
+  demoShell,
+  demo_shell_exports
+};
+//# sourceMappingURL=chunk-JWBCY4NC.js.map

package/dist/chunk-JWBCY4NC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/patterns/demo-shell.ts"],"sourcesContent":["/**\n * Three-pane demo shell (roadmap §7.2).\n *\n * A `Graph(\"demo-shell\")` that dogfoods reactive coordination for the\n * main/side split layout with synchronized cross-highlighting.\n *\n * **Zero framework dependency** — framework bindings wrap pane components only.\n * The shell graph is headless and fully testable.\n */\n\nimport { batch } from \"../core/batch.js\";\nimport { describeNode, resolveDescribeFields } from \"../core/meta.js\";\nimport { derived, effect, state } from \"../core/sugar.js\";\nimport { Graph } from \"../graph/graph.js\";\nimport type { MeasurementAdapter } from \"./reactive-layout/reactive-layout.js\";\nimport { analyzeAndMeasure, computeLineBreaks } from \"./reactive-layout/reactive-layout.js\";\n\n// ——————————————————————————————————————————————————————————\n//  Types\n// ——————————————————————————————————————————————————————————\n\n/** Identifies which pane is the source of a hover event. */\nexport type HoverPaneType = \"visual\" | \"graph\" | \"code\";\n\n/** Cross-highlighting hover target. `null` means nothing hovered. */\nexport type HoverTarget = { pane: HoverPaneType; id: string } | null;\n\n/** Which pane is full-screened (null = normal layout). */\nexport type FullscreenPane = \"main\" | \"graph\" | \"code\" | null;\n\n/**\n * Cross-referencing registry: maps node paths to code line numbers and\n * visual element selectors. Provided by each demo's `store.ts`.\n */\nexport type NodeRegistry = Map<string, { codeLine: number; visualSelector: string }>;\n\n/** Callbacks for cross-highlighting effect nodes. */\nexport type HighlightCallbacks = {\n\t/** Called when code-scroll highlight target changes. */\n\tcodeScroll?: (line: number | null) => void;\n\t/** Called when visual highlight target changes. */\n\tvisual?: (selector: string | null) => void;\n\t/** Called when graph highlight target changes. */\n\tgraph?: (nodeId: string | null) => void;\n};\n\n/** Label dimensions for graph node sizing. */\nexport type GraphLabelSize = { width: number; height: number };\n\n/** Options for {@link demoShell}. */\nexport type DemoShellOptions = {\n\t/** Initial main/side split ratio (0–1). Default: `0.65`. */\n\tmainRatio?: number;\n\t/** Initial graph/code vertical split in the side pane (0–1). Default: `0.5`. */\n\tsideSplit?: number;\n\t/** Initial viewport width in pixels. Default: `1280`. */\n\tviewportWidth?: number;\n\t/** Cross-referencing registry for hover→code/visual/graph mapping. */\n\tnodeRegistry?: NodeRegistry;\n\t/** Measurement adapter for layout engine integration. When provided, enables layout/* derived nodes. */\n\tadapter?: MeasurementAdapter;\n\t/** Font string for layout measurement. Default: `\"14px monospace\"`. */\n\tlayoutFont?: string;\n\t/** Callbacks for cross-highlighting effect nodes. When provided, creates effect nodes visible in describe(). */\n\tonHighlight?: HighlightCallbacks;\n};\n\n/** Return type of {@link demoShell}. */\nexport type DemoShellHandle = {\n\t/** The demo-shell graph. */\n\tgraph: Graph;\n\n\t// ── Convenience setters (shorthand for graph.set) ──────────\n\tsetMainRatio(ratio: number): void;\n\tsetSideSplit(ratio: number): void;\n\tsetFullscreen(pane: FullscreenPane): void;\n\tsetViewportWidth(width: number): void;\n\tsetHoverTarget(target: HoverTarget): void;\n\tsetDemoGraph(g: Graph | null): void;\n\tbumpGraphTick(): void;\n\tselectNode(path: string | null): void;\n\tsetMetaDebug(on: boolean): void;\n\t/** Set code text for layout/code-lines measurement (requires adapter). */\n\tsetCodeText(text: string): void;\n\t/** Atomic multi-set — wraps core `batch()` for glitch-free updates. */\n\tbatch(fn: () => void): void;\n\tdestroy(): void;\n};\n\n// ——————————————————————————————————————————————————————————\n//  Helpers\n// ——————————————————————————————————————————————————————————\n\nfunction clamp01(v: number): number {\n\treturn Math.max(0, Math.min(1, v));\n}\n\n// ——————————————————————————————————————————————————————————\n//  Factory\n// ——————————————————————————————————————————————————————————\n\n/**\n * Creates the three-pane demo shell graph (roadmap §7.2).\n *\n * All coordination is reactive — no polling, no imperative triggers.\n * Framework bindings subscribe to named nodes and drive `state` inputs.\n */\nexport function demoShell(opts?: DemoShellOptions): DemoShellHandle {\n\tconst mainRatioInit = clamp01(opts?.mainRatio ?? 0.65);\n\tconst sideSplitInit = clamp01(opts?.sideSplit ?? 0.5);\n\tconst viewportInit = Math.max(0, opts?.viewportWidth ?? 1280);\n\tconst registry = opts?.nodeRegistry ?? new Map();\n\tconst adapter = opts?.adapter ?? null;\n\tconst layoutFont = opts?.layoutFont ?? \"14px monospace\";\n\tconst onHighlight = opts?.onHighlight;\n\n\tconst g = new Graph(\"demo-shell\");\n\n\t// ── Layout state ─────────────────────────────────────\n\tconst paneMainRatio = state(mainRatioInit, { name: \"pane/main-ratio\" });\n\tconst paneSideSplit = state(sideSplitInit, { name: \"pane/side-split\" });\n\tconst paneFullscreen = state<FullscreenPane>(null, {\n\t\tname: \"pane/fullscreen\",\n\t});\n\tconst viewportWidth = state(viewportInit, { name: \"viewport/width\" });\n\n\tg.add(\"pane/main-ratio\", paneMainRatio);\n\tg.add(\"pane/side-split\", paneSideSplit);\n\tg.add(\"pane/fullscreen\", paneFullscreen);\n\tg.add(\"viewport/width\", viewportWidth);\n\n\t// ── Derived pane dimensions ──────────────────────────\n\tconst paneMainWidth = derived(\n\t\t[paneMainRatio, viewportWidth, paneFullscreen],\n\t\t([ratio, vw, fs]) => {\n\t\t\tconst r = ratio as number;\n\t\t\tconst w = vw as number;\n\t\t\tconst fullscreen = fs as FullscreenPane;\n\t\t\tif (fullscreen === \"main\") return w;\n\t\t\tif (fullscreen === \"graph\" || fullscreen === \"code\") return 0;\n\t\t\treturn Math.round(w * r);\n\t\t},\n\t\t{ name: \"pane/main-width\" },\n\t);\n\n\tconst paneSideWidth = derived(\n\t\t[paneMainWidth, viewportWidth, paneFullscreen],\n\t\t([main, vw, fs]) => {\n\t\t\tconst fullscreen = fs as FullscreenPane;\n\t\t\tconst w = vw as number;\n\t\t\tif (fullscreen === \"main\") return 0;\n\t\t\tif (fullscreen === \"graph\" || fullscreen === \"code\") return w;\n\t\t\treturn (w as number) - (main as number);\n\t\t},\n\t\t{ name: \"pane/side-width\" },\n\t);\n\n\tconst paneGraphHeight = derived(\n\t\t[paneSideSplit, paneFullscreen],\n\t\t([split, fs]) => {\n\t\t\tconst fullscreen = fs as FullscreenPane;\n\t\t\tif (fullscreen === \"graph\") return 1;\n\t\t\tif (fullscreen === \"code\") return 0;\n\t\t\tif (fullscreen === \"main\") return 0;\n\t\t\treturn clamp01(split as number);\n\t\t},\n\t\t{ name: \"pane/graph-height-ratio\" },\n\t);\n\n\tconst paneCodeHeight = derived(\n\t\t[paneGraphHeight, paneFullscreen],\n\t\t([graphH, fs]) => {\n\t\t\tconst fullscreen = fs as FullscreenPane;\n\t\t\tif (fullscreen === \"code\") return 1;\n\t\t\tif (fullscreen === \"graph\" || fullscreen === \"main\") return 0;\n\t\t\treturn 1 - (graphH as number);\n\t\t},\n\t\t{ name: \"pane/code-height-ratio\" },\n\t);\n\n\tg.add(\"pane/main-width\", paneMainWidth);\n\tg.add(\"pane/side-width\", paneSideWidth);\n\tg.add(\"pane/graph-height-ratio\", paneGraphHeight);\n\tg.add(\"pane/code-height-ratio\", paneCodeHeight);\n\n\t// ── External graph observation ───────────────────────\n\tconst demoGraphRef = state<Graph | null>(null, {\n\t\tname: \"demo/graph-ref\",\n\t});\n\tconst demoGraphTick = state(0, { name: \"demo/graph-tick\" });\n\n\tg.add(\"demo/graph-ref\", demoGraphRef);\n\tg.add(\"demo/graph-tick\", demoGraphTick);\n\n\tconst graphMermaid = derived(\n\t\t[demoGraphRef, demoGraphTick],\n\t\t([ref, _tick]) => {\n\t\t\tconst demo = ref as Graph | null;\n\t\t\tif (!demo) return \"\";\n\t\t\treturn demo.describe({ format: \"mermaid\" });\n\t\t},\n\t\t{ name: \"graph/mermaid\" },\n\t);\n\n\tconst graphDescribe = derived(\n\t\t[demoGraphRef, demoGraphTick],\n\t\t([ref, _tick]) => {\n\t\t\tconst demo = ref as Graph | null;\n\t\t\tif (!demo) return null;\n\t\t\tconst { expand: _, ...snapshot } = demo.describe({ detail: \"standard\" });\n\t\t\treturn snapshot;\n\t\t},\n\t\t{ name: \"graph/describe\" },\n\t);\n\n\tg.add(\"graph/mermaid\", graphMermaid);\n\tg.add(\"graph/describe\", graphDescribe);\n\n\t// ── Cross-highlighting ───────────────────────────────\n\tconst hoverTarget = state<HoverTarget>(null, { name: \"hover/target\" });\n\tg.add(\"hover/target\", hoverTarget);\n\n\tconst highlightCodeScroll = derived(\n\t\t[hoverTarget],\n\t\t([target]) => {\n\t\t\tconst t = target as HoverTarget;\n\t\t\tif (!t) return null;\n\t\t\tconst entry = registry.get(t.id);\n\t\t\treturn entry ? entry.codeLine : null;\n\t\t},\n\t\t{ name: \"highlight/code-scroll\" },\n\t);\n\n\tconst highlightVisual = derived(\n\t\t[hoverTarget],\n\t\t([target]) => {\n\t\t\tconst t = target as HoverTarget;\n\t\t\tif (!t) return null;\n\t\t\tconst entry = registry.get(t.id);\n\t\t\treturn entry ? entry.visualSelector : null;\n\t\t},\n\t\t{ name: \"highlight/visual\" },\n\t);\n\n\tconst highlightGraph = derived(\n\t\t[hoverTarget],\n\t\t([target]) => {\n\t\t\tconst t = target as HoverTarget;\n\t\t\tif (!t) return null;\n\t\t\treturn t.id;\n\t\t},\n\t\t{ name: \"highlight/graph\" },\n\t);\n\n\tg.add(\"highlight/code-scroll\", highlightCodeScroll);\n\tg.add(\"highlight/visual\", highlightVisual);\n\tg.add(\"highlight/graph\", highlightGraph);\n\n\t// ── Cross-highlighting effect nodes (optional) ─────\n\t// Created when onHighlight callbacks are provided, making the full\n\t// source→derived→effect chain visible in describe()/toMermaid().\n\n\tif (onHighlight?.codeScroll) {\n\t\tconst cb = onHighlight.codeScroll;\n\t\tconst applyCodeScroll = effect([highlightCodeScroll], ([line]) => {\n\t\t\tcb(line as number | null);\n\t\t});\n\t\tg.add(\"highlight/apply-code-scroll\", applyCodeScroll);\n\t}\n\n\tif (onHighlight?.visual) {\n\t\tconst cb = onHighlight.visual;\n\t\tconst applyVisual = effect([highlightVisual], ([selector]) => {\n\t\t\tcb(selector as string | null);\n\t\t});\n\t\tg.add(\"highlight/apply-visual\", applyVisual);\n\t}\n\n\tif (onHighlight?.graph) {\n\t\tconst cb = onHighlight.graph;\n\t\tconst applyGraph = effect([highlightGraph], ([nodeId]) => {\n\t\t\tcb(nodeId as string | null);\n\t\t});\n\t\tg.add(\"highlight/apply-graph\", applyGraph);\n\t}\n\n\t// ── Inspect panel ────────────────────────────────────\n\tconst inspectSelected = state<string | null>(null, {\n\t\tname: \"inspect/selected-node\",\n\t});\n\tg.add(\"inspect/selected-node\", inspectSelected);\n\n\tconst standardFields = resolveDescribeFields(\"standard\");\n\n\tconst inspectNodeDetail = derived(\n\t\t[inspectSelected, demoGraphRef, demoGraphTick],\n\t\t([path, ref, _tick]) => {\n\t\t\tconst demo = ref as Graph | null;\n\t\t\tconst p = path as string | null;\n\t\t\tif (!demo || !p) return null;\n\t\t\ttry {\n\t\t\t\tconst nd = demo.resolve(p);\n\t\t\t\tconst nodeDesc = describeNode(nd, standardFields);\n\t\t\t\treturn { path: p, ...nodeDesc, value: nd.cache };\n\t\t\t} catch {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t},\n\t\t{ name: \"inspect/node-detail\" },\n\t);\n\n\tconst inspectTraceLog = derived(\n\t\t[demoGraphRef, demoGraphTick],\n\t\t([ref, _tick]) => {\n\t\t\tconst demo = ref as Graph | null;\n\t\t\tif (!demo) return [];\n\t\t\treturn demo.trace();\n\t\t},\n\t\t{ name: \"inspect/trace-log\" },\n\t);\n\n\tg.add(\"inspect/node-detail\", inspectNodeDetail);\n\tg.add(\"inspect/trace-log\", inspectTraceLog);\n\n\t// ── Meta debug toggle ────────────────────────────────\n\tconst metaDebug = state(false, { name: \"meta/debug\" });\n\tg.add(\"meta/debug\", metaDebug);\n\n\tconst metaShellMermaid = derived(\n\t\t[metaDebug, demoGraphTick],\n\t\t([debug, _tick]) => {\n\t\t\tif (!(debug as boolean)) return \"\";\n\t\t\treturn g.describe({ format: \"mermaid\" });\n\t\t},\n\t\t{ name: \"meta/shell-mermaid\" },\n\t);\n\tg.add(\"meta/shell-mermaid\", metaShellMermaid);\n\n\t// ── Layout engine integration (optional, requires adapter) ──\n\tconst codeTextNode = state(\"\", { name: \"layout/code-text\" });\n\tg.add(\"layout/code-text\", codeTextNode);\n\n\tif (adapter) {\n\t\tconst measureCache = new Map<string, Map<string, number>>();\n\n\t\tconst graphLabels = derived(\n\t\t\t[graphDescribe],\n\t\t\t([desc]) => {\n\t\t\t\tconst d = desc as { nodes: Record<string, { type: string }> } | null;\n\t\t\t\tif (!d) return new Map<string, GraphLabelSize>();\n\t\t\t\tconst result = new Map<string, GraphLabelSize>();\n\t\t\t\tfor (const [name] of Object.entries(d.nodes)) {\n\t\t\t\t\tconst segments = analyzeAndMeasure(name, layoutFont, adapter, measureCache);\n\t\t\t\t\tconst lb = computeLineBreaks(segments, Infinity, adapter, layoutFont, measureCache);\n\t\t\t\t\tconst width = lb.lines.reduce((max, l) => Math.max(max, l.width), 0);\n\t\t\t\t\tconst height = lb.lineCount * 20; // line-height approximation\n\t\t\t\t\tresult.set(name, { width, height });\n\t\t\t\t}\n\t\t\t\treturn result;\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: \"layout/graph-labels\",\n\t\t\t\tequals: (a, b) => {\n\t\t\t\t\tif (a === b) return true;\n\t\t\t\t\tconst ma = a as Map<string, GraphLabelSize>;\n\t\t\t\t\tconst mb = b as Map<string, GraphLabelSize>;\n\t\t\t\t\tif (ma.size !== mb.size) return false;\n\t\t\t\t\tfor (const [k, v] of ma) {\n\t\t\t\t\t\tconst bv = mb.get(k);\n\t\t\t\t\t\tif (!bv || bv.width !== v.width || bv.height !== v.height) return false;\n\t\t\t\t\t}\n\t\t\t\t\treturn true;\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\n\t\tconst codeLines = derived(\n\t\t\t[codeTextNode, paneSideWidth],\n\t\t\t([text, sideW]) => {\n\t\t\t\tconst t = text as string;\n\t\t\t\tif (!t) return { lineCount: 0, lines: [] };\n\t\t\t\tconst segments = analyzeAndMeasure(t, layoutFont, adapter, measureCache);\n\t\t\t\tconst maxW = (sideW as number) - 40; // side pane minus padding\n\t\t\t\treturn computeLineBreaks(segments, Math.max(100, maxW), adapter, layoutFont, measureCache);\n\t\t\t},\n\t\t\t{ name: \"layout/code-lines\" },\n\t\t);\n\n\t\tconst sideWidthHint = derived(\n\t\t\t[graphLabels],\n\t\t\t([labels]) => {\n\t\t\t\tconst m = labels as Map<string, GraphLabelSize>;\n\t\t\t\tif (m.size === 0) return 200; // minimum default\n\t\t\t\tlet maxW = 0;\n\t\t\t\tfor (const { width } of m.values()) {\n\t\t\t\t\tif (width > maxW) maxW = width;\n\t\t\t\t}\n\t\t\t\t// widest label + padding (node box chrome + margin)\n\t\t\t\treturn Math.max(200, Math.round(maxW + 80));\n\t\t\t},\n\t\t\t{ name: \"layout/side-width-hint\" },\n\t\t);\n\n\t\tg.add(\"layout/graph-labels\", graphLabels);\n\t\tg.add(\"layout/code-lines\", codeLines);\n\t\tg.add(\"layout/side-width-hint\", sideWidthHint);\n\t}\n\n\t// ── Edges (explicit wiring for describe/toMermaid) ───\n\n\t// ── Handle ───────────────────────────────────────────\n\tlet tickCounter = 0;\n\treturn {\n\t\tgraph: g,\n\t\tsetMainRatio(ratio: number) {\n\t\t\tg.set(\"pane/main-ratio\", clamp01(ratio));\n\t\t},\n\t\tsetSideSplit(ratio: number) {\n\t\t\tg.set(\"pane/side-split\", clamp01(ratio));\n\t\t},\n\t\tsetFullscreen(pane: FullscreenPane) {\n\t\t\tg.set(\"pane/fullscreen\", pane);\n\t\t},\n\t\tsetViewportWidth(width: number) {\n\t\t\tg.set(\"viewport/width\", Math.max(0, width));\n\t\t},\n\t\tsetHoverTarget(target: HoverTarget) {\n\t\t\tg.set(\"hover/target\", target);\n\t\t},\n\t\tsetDemoGraph(demo: Graph | null) {\n\t\t\tg.set(\"demo/graph-ref\", demo);\n\t\t},\n\t\tbumpGraphTick() {\n\t\t\tg.set(\"demo/graph-tick\", ++tickCounter);\n\t\t},\n\t\tselectNode(path: string | null) {\n\t\t\tg.set(\"inspect/selected-node\", path);\n\t\t},\n\t\tsetMetaDebug(on: boolean) {\n\t\t\tg.set(\"meta/debug\", on);\n\t\t},\n\t\tsetCodeText(text: string) {\n\t\t\tg.set(\"layout/code-text\", text);\n\t\t},\n\t\tbatch(fn: () => void) {\n\t\t\tbatch(fn);\n\t\t},\n\t\tdestroy() {\n\t\t\tg.destroy();\n\t\t},\n\t};\n}\n"],"mappings":"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","names":[]}