@lensmap/starlight 0.0.0-stage → 0.2.0

package/dist/ViewerHost.js

@@ -0,0 +1,2104 @@
+// src/ViewerHost.tsx
+import { useEffect as useEffect5, useState as useState4 } from "react";
+import { createPortal } from "react-dom";
+
+// ../../apps/web/src/document/layout.ts
+import {
+  forceCollide,
+  forceSimulation,
+  forceX,
+  forceY
+} from "d3-force";
+
+// ../../apps/web/src/document/subtree.ts
+import { polygonHull } from "d3-polygon";
+
+// ../../apps/web/src/Viewer.tsx
+import {
+  connectionWording as connectionWording4,
+  resolveThoughtAnchor,
+  thoughtAnchors as thoughtAnchors2
+} from "@lensmap/document";
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect4,
+  useEffectEvent as useEffectEvent2,
+  useId as useId3,
+  useLayoutEffect,
+  useMemo,
+  useRef as useRef4,
+  useState as useState2
+} from "react";
+import Markdown2 from "react-markdown";
+
+// ../../apps/web/src/ConnectionChooser.tsx
+import { connectionWording } from "@lensmap/document";
+import { useEffect, useRef } from "react";
+
+// ../../apps/web/src/graph.ts
+var colours = {
+  blue: "#83c8ff",
+  amber: "#f7c46c",
+  mint: "#82dfc1",
+  rose: "#e9a3ca"
+};
+function label(node) {
+  return node.unresolved ? "Unresolved thought" : node.title.replace(/^#{1,6}\s+/, "").replace(/[*_`]/g, "");
+}
+
+// ../../apps/web/src/ConnectionChooser.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ConnectionChooser({
+  choice,
+  origin,
+  visibleKeys,
+  onPick,
+  onAccept,
+  onCancel,
+  onActivatePortal
+}) {
+  const current = useRef(null);
+  useEffect(() => {
+    if (choice.candidates[choice.index])
+      current.current?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [choice]);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "connection-chooser",
+      "data-connection-chooser": "true",
+      "aria-label": "Connection choices",
+      children: [
+        /* @__PURE__ */ jsxs("h2", { children: [
+          "Connections from ",
+          label(origin)
+        ] }),
+        /* @__PURE__ */ jsxs("p", { children: [
+          choice.direction.replace("Arrow", ""),
+          " \xB7 Shift+arrow chooses \xB7 Space travels \xB7 Enter switches view \xB7 Esc cancels"
+        ] }),
+        choice.candidates.length ? /* @__PURE__ */ jsx("ol", { children: choice.candidates.map((candidate, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: "connection-option",
+            ref: index === choice.index ? current : void 0,
+            type: "button",
+            id: `connection-option-${candidate.node.key}`,
+            "aria-label": `Preview ${label(candidate.node)}`,
+            "aria-describedby": `connection-details-${candidate.node.key}`,
+            "aria-pressed": index === choice.index,
+            onClick: () => onPick(index),
+            children: [
+              /* @__PURE__ */ jsx("strong", { children: label(candidate.node) }),
+              /* @__PURE__ */ jsxs("span", { id: `connection-details-${candidate.node.key}`, children: [
+                candidate.routes.map((route, routeIndex) => /* @__PURE__ */ jsxs("span", { children: [
+                  routeIndex > 0 ? " \xB7 " : "",
+                  connectionWording(route.edge.type, route.direction),
+                  ` (${route.direction} ${route.edge.kind === "branch" ? "branch" : "cross-link"})`
+                ] }, `${route.edge.key}:${route.direction}`)),
+                !visibleKeys.has(candidate.node.key) && /* @__PURE__ */ jsx("span", { className: "outside-view", children: "outside this view" })
+              ] })
+            ]
+          }
+        ) }, candidate.node.key)) }) : /* @__PURE__ */ jsx("p", { children: "No connections in this direction" }),
+        /* @__PURE__ */ jsxs("div", { className: "connection-actions", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: !choice.candidates.length,
+              onClick: onAccept,
+              children: "Go to thought"
+            }
+          ),
+          choice.candidates[choice.index]?.node.destination && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              disabled: !onActivatePortal,
+              onClick: () => onActivatePortal?.(choice.candidates[choice.index].node),
+              children: [
+                "Open",
+                " ",
+                choice.candidates[choice.index].node.destination?.kind === "map_link" ? "destination map" : "external link"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: onCancel, children: "Cancel choice" })
+        ] })
+      ]
+    }
+  );
+}
+
+// ../../apps/web/src/ConnectionGap.tsx
+import { useId } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function BlockingMarker({
+  id,
+  colour,
+  gap = false
+}) {
+  return /* @__PURE__ */ jsx2(
+    "marker",
+    {
+      id,
+      viewBox: "0 0 10 10",
+      refX: "7",
+      refY: "5",
+      markerWidth: "8",
+      markerHeight: "8",
+      orient: "auto",
+      overflow: gap ? "visible" : void 0,
+      children: gap ? /* @__PURE__ */ jsx2("rect", { x: "3", y: "-2", width: "3", height: "14", fill: "black" }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2("line", { x1: "2", x2: "2", y1: "0", y2: "10", stroke: colour, strokeWidth: "2" }),
+        /* @__PURE__ */ jsx2("line", { x1: "7", x2: "7", y1: "0", y2: "10", stroke: colour, strokeWidth: "2" })
+      ] })
+    }
+  );
+}
+function ConnectionGap({
+  path,
+  points,
+  className,
+  markerId,
+  children
+}) {
+  const id = useId();
+  const padding = 64;
+  const x = Math.min(...points.map((point) => point.x)) - padding;
+  const y = Math.min(...points.map((point) => point.y)) - padding;
+  const width = Math.max(...points.map((point) => point.x)) + padding - x;
+  const height = Math.max(...points.map((point) => point.y)) + padding - y;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsxs2(
+      "mask",
+      {
+        id,
+        maskUnits: "userSpaceOnUse",
+        x,
+        y,
+        width,
+        height,
+        style: { maskType: "luminance" },
+        children: [
+          /* @__PURE__ */ jsx2("rect", { x, y, width, height, fill: "white" }),
+          /* @__PURE__ */ jsx2(
+            "path",
+            {
+              d: path,
+              className,
+              style: { stroke: "none", opacity: 1, filter: "none" },
+              markerEnd: `url(#${markerId})`
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx2("g", { mask: `url(#${id})`, children })
+  ] });
+}
+
+// ../../apps/web/src/clearance.ts
+function limitMagnification(points, nodeRadius2, strength) {
+  const amount = Math.max(0, Math.min(1, strength));
+  if (amount === 0 || points.length < 2)
+    return points.map((point) => ({ ...point }));
+  const radii = points.map((point) => point.scale * nodeRadius2);
+  const minimum = radii.map((radius2) => Math.min(radius2, 2));
+  const limited = [...radii];
+  for (let i = 0; i < points.length; i++) {
+    for (let j = i + 1; j < points.length; j++) {
+      const distance = Math.hypot(
+        points[i].x - points[j].x,
+        points[i].y - points[j].y
+      );
+      const capacity = Math.max(minimum[i] + minimum[j], distance - 6);
+      if (radii[i] + radii[j] <= capacity) continue;
+      const available = Math.max(0, capacity - minimum[i] - minimum[j]);
+      const extraI = radii[i] - minimum[i];
+      const extraJ = radii[j] - minimum[j];
+      const weight = radii[i] ** 2 / (radii[i] ** 2 + radii[j] ** 2);
+      const shareI = Math.max(
+        0,
+        available - extraJ,
+        Math.min(extraI, available, available * weight)
+      );
+      limited[i] = Math.min(limited[i], minimum[i] + shareI);
+      limited[j] = Math.min(limited[j], minimum[j] + available - shareI);
+    }
+  }
+  return points.map((point, index) => ({
+    ...point,
+    scale: point.scale + (limited[index] / nodeRadius2 - point.scale) * amount
+  }));
+}
+
+// ../../apps/web/src/connection-appearance.ts
+function connectionAppearance(type, continuation) {
+  return {
+    dashed: type === "optional",
+    ...type === "follows" && continuation !== "incoming" ? { start: "arrow" } : {},
+    ...continuation !== "outgoing" && (type === "precedes" || type === "prevents") ? { end: type === "precedes" ? "arrow" : "bar" } : {}
+  };
+}
+
+// ../../apps/web/src/edge-routing.ts
+function edgeLanes(edges) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    const pair = JSON.stringify([edge.from, edge.to].sort());
+    const group = groups.get(pair) ?? [];
+    group.push(edge);
+    groups.set(pair, group);
+  }
+  const lanes = /* @__PURE__ */ new Map();
+  for (const group of groups.values()) {
+    group.forEach((edge, index) => {
+      const offset = (index - (group.length - 1) / 2) * 60;
+      lanes.set(edge.key, {
+        index,
+        count: group.length,
+        bend: edge.from <= edge.to ? offset : -offset
+      });
+    });
+  }
+  return lanes;
+}
+
+// ../../apps/web/src/lens.ts
+function projectPoint(point, camera, viewport, strength) {
+  const blend = Math.min(1, strength);
+  const spacing = 1 - blend * 0.4;
+  const dx = (point.x - camera.x) * spacing;
+  const dy = (point.y - camera.y) * spacing;
+  const halfWidth = Math.max(1, viewport.width / 2 - 24);
+  const halfHeight = Math.max(1, viewport.height / 2 - 24);
+  const distance = Math.hypot(dx / halfWidth, dy / halfHeight);
+  const focusScale = 1 + strength * 0.75;
+  const gain = 1 - blend + blend * focusScale / (1 + focusScale * distance);
+  const circleSize = 1 - blend * 0.3;
+  return {
+    x: viewport.width / 2 + dx * gain * camera.zoom,
+    y: viewport.height / 2 + dy * gain * camera.zoom,
+    scale: camera.zoom * gain * circleSize
+  };
+}
+function panCamera(camera, delta) {
+  return {
+    ...camera,
+    x: camera.x - delta.x / camera.zoom,
+    y: camera.y - delta.y / camera.zoom
+  };
+}
+function zoomCamera(camera, factor) {
+  return { ...camera, zoom: Math.min(2, Math.max(0.3, camera.zoom * factor)) };
+}
+function fitCamera(points, size, radius2) {
+  if (points.length === 0) return { x: 0, y: 0, zoom: 1 };
+  const minX = Math.min(...points.map((p) => p.x)) - radius2;
+  const maxX = Math.max(...points.map((p) => p.x)) + radius2;
+  const minY = Math.min(...points.map((p) => p.y)) - radius2;
+  const maxY = Math.max(...points.map((p) => p.y)) + radius2;
+  return {
+    x: (minX + maxX) / 2,
+    y: (minY + maxY) / 2,
+    zoom: Math.max(
+      1e-3,
+      Math.min(
+        (size.width - 48) / (maxX - minX),
+        (size.height - 48) / (maxY - minY),
+        1
+      )
+    )
+  };
+}
+
+// ../../apps/web/src/NeighbourhoodContinuations.tsx
+import { connectionWording as connectionWording2 } from "@lensmap/document";
+import { useId as useId2 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function NeighbourhoodContinuations({
+  continuations,
+  positions,
+  centreKey,
+  nodes,
+  nodeRadius: nodeRadius2,
+  previewEdges,
+  markerPrefix
+}) {
+  const prefix = useId2();
+  const origin = positions.get(centreKey);
+  const byKey2 = new Map(nodes.map((node) => [node.key, node]));
+  const segments = continuations.flatMap((continuation, index) => {
+    const point = positions.get(continuation.at);
+    const source = byKey2.get(continuation.edge.from);
+    const target = byKey2.get(continuation.edge.to);
+    if (!point || !origin || !source || !target) return [];
+    const incoming = continuation.edge.to === continuation.at;
+    const appearance = connectionAppearance(
+      continuation.edge.type,
+      incoming ? "incoming" : "outgoing"
+    );
+    const angle = Math.atan2(point.y - origin.y, point.x - origin.x) + continuation.offset;
+    const ux = Math.cos(angle), uy = Math.sin(angle);
+    const marked = incoming ? appearance.end : appearance.start;
+    const radius2 = nodeRadius2 * point.scale + (marked ? incoming ? 7 : 3 : 0);
+    const near = { x: point.x + ux * radius2, y: point.y + uy * radius2 };
+    const far = {
+      x: near.x + ux * 70 * point.scale,
+      y: near.y + uy * 70 * point.scale
+    };
+    const [from, to] = incoming ? [far, near] : [near, far];
+    return [
+      {
+        ...continuation,
+        appearance,
+        incoming,
+        near,
+        far,
+        target,
+        description: `${label(source)} ${connectionWording2(continuation.edge.type, "outgoing")} ${label(target)}`,
+        id: `${prefix}-${index}`,
+        path: `M ${from.x} ${from.y} L ${to.x} ${to.y}`
+      }
+    ];
+  });
+  return /* @__PURE__ */ jsxs3("g", { className: "continuations", children: [
+    /* @__PURE__ */ jsx3("defs", { children: segments.map((segment) => /* @__PURE__ */ jsxs3(
+      "linearGradient",
+      {
+        id: segment.id,
+        gradientUnits: "userSpaceOnUse",
+        x1: segment.near.x,
+        y1: segment.near.y,
+        x2: segment.far.x,
+        y2: segment.far.y,
+        children: [
+          /* @__PURE__ */ jsx3(
+            "stop",
+            {
+              offset: "0%",
+              stopColor: colours[segment.target.branch],
+              stopOpacity: 0.65
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "stop",
+            {
+              offset: "100%",
+              stopColor: colours[segment.target.branch],
+              stopOpacity: 0
+            }
+          )
+        ]
+      },
+      segment.edge.key
+    )) }),
+    segments.map((segment) => {
+      const appearance = segment.appearance;
+      const edgeClass = `edge continuation ${segment.edge.kind} ${previewEdges.has(segment.edge.key) ? "connection-preview" : ""}`;
+      const painted = /* @__PURE__ */ jsx3(
+        "path",
+        {
+          "data-continuation": segment.edge.key,
+          "data-connection-preview": previewEdges.has(segment.edge.key) ? "true" : void 0,
+          "data-kind": segment.edge.kind,
+          "data-type": segment.edge.type ?? "connected",
+          strokeDasharray: appearance.dashed ? "7 6" : void 0,
+          "data-direction": segment.incoming ? "incoming" : "outgoing",
+          d: segment.path,
+          stroke: `url(#${segment.id})`,
+          style: { color: colours[segment.target.branch] },
+          className: edgeClass,
+          markerStart: appearance.start ? `url(#${markerPrefix}-arrow-${segment.target.branch})` : void 0,
+          markerEnd: appearance.end ? `url(#${markerPrefix}-${appearance.end}-${segment.target.branch})` : void 0
+        }
+      );
+      return /* @__PURE__ */ jsxs3("g", { children: [
+        appearance.end === "bar" ? /* @__PURE__ */ jsx3(
+          ConnectionGap,
+          {
+            path: segment.path,
+            points: [segment.near, segment.far],
+            className: edgeClass,
+            markerId: `${markerPrefix}-bar-gap`,
+            children: painted
+          }
+        ) : painted,
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            className: "edge-hit",
+            "data-continuation-hit": segment.edge.key,
+            d: segment.path,
+            children: /* @__PURE__ */ jsx3("title", { children: segment.description })
+          }
+        )
+      ] }, segment.edge.key);
+    })
+  ] });
+}
+
+// ../../apps/web/src/navigation.ts
+var directions = {
+  ArrowLeft: { x: -1, y: 0 },
+  ArrowRight: { x: 1, y: 0 },
+  ArrowUp: { x: 0, y: -1 },
+  ArrowDown: { x: 0, y: 1 }
+};
+function isDirection(key) {
+  return key in directions;
+}
+var byKey = (a, b) => a.key < b.key ? -1 : a.key > b.key ? 1 : 0;
+var radius = (p) => Math.hypot(p.x, p.y);
+function centralTarget(points, region = 130) {
+  return points.filter((p) => radius(p) <= region).sort((a, b) => radius(a) - radius(b) || byKey(a, b))[0];
+}
+function spatialTarget(points, key, direction) {
+  const origin = points.find((p) => p.key === key) ?? { x: 0, y: 0 };
+  const axis = directions[direction], r = radius(origin);
+  const radial = r ? (origin.x * axis.x + origin.y * axis.y) / r : 0;
+  return points.filter((p) => p.key !== key).map((point) => {
+    const dx = point.x - origin.x, dy = point.y - origin.y;
+    const distance = Math.hypot(dx, dy);
+    const cosine = distance ? (dx * axis.x + dy * axis.y) / distance : 0;
+    const change = radius(point) - r;
+    const orbitalPenalty = (1 - Math.abs(radial)) * Math.abs(change) + Math.abs(radial) * Math.max(0, -Math.sign(radial) * change);
+    return {
+      point,
+      cosine,
+      score: distance * (1 + 3 * (1 - cosine)) + 0.6 * orbitalPenalty
+    };
+  }).filter((p) => p.cosine >= 0.5).sort((a, b) => a.score - b.score || byKey(a.point, b.point))[0]?.point;
+}
+function connectionCandidates(graph, key, direction, visible = graph.nodes) {
+  const origin = graph.nodes.find((p) => p.key === key);
+  if (!origin) return [];
+  const at = visible.find((p) => p.key === key) ?? origin;
+  const neighbours = new Set(
+    graph.edges.flatMap(
+      (edge) => edge.from === key ? [edge.to] : edge.to === key ? [edge.from] : []
+    )
+  );
+  const axis = directions[direction];
+  return graph.nodes.filter((p) => p.key !== key && neighbours.has(p.key)).map((node) => {
+    const point = visible.find((p) => p.key === node.key) ?? {
+      x: at.x + node.x - origin.x,
+      y: at.y + node.y - origin.y
+    };
+    const dx = point.x - at.x, dy = point.y - at.y, distance = Math.hypot(dx, dy);
+    return {
+      node,
+      distance,
+      cosine: distance ? (dx * axis.x + dy * axis.y) / distance : 0
+    };
+  }).filter((p) => p.cosine >= 0.5).sort(
+    (a, b) => b.cosine - a.cosine || a.distance - b.distance || byKey(a.node, b.node)
+  ).map(
+    ({ node }) => ({
+      node,
+      routes: graph.edges.filter(
+        (edge) => edge.from === key && edge.to === node.key || edge.to === key && edge.from === node.key
+      ).map((edge) => ({
+        edge,
+        direction: edge.from === key ? "outgoing" : "incoming"
+      }))
+    })
+  );
+}
+function stepConnectionChoice(graph, key, direction, visible, previous) {
+  if (previous?.direction === direction) {
+    return {
+      ...previous,
+      index: previous.candidates.length ? (previous.index + 1) % previous.candidates.length : 0
+    };
+  }
+  const origin = previous?.origin ?? key;
+  const positions = previous?.positions ?? visible.map((point) => ({ ...point }));
+  return {
+    origin,
+    direction,
+    positions,
+    candidates: connectionCandidates(graph, origin, direction, positions),
+    index: 0
+  };
+}
+function heldDirection(keys) {
+  const x = Number(keys.has("ArrowRight")) - Number(keys.has("ArrowLeft"));
+  const y = Number(keys.has("ArrowDown")) - Number(keys.has("ArrowUp"));
+  const length = Math.hypot(x, y) || 1;
+  return { x: x / length, y: y / length };
+}
+function panDistance(elapsed, seconds, maximum) {
+  const start = 120, acceleration = 900, ramp = (maximum - start) / acceleration;
+  const integral = (t) => {
+    const accelerated = Math.min(t, ramp);
+    return start * accelerated + acceleration * accelerated ** 2 / 2 + maximum * Math.max(0, t - ramp);
+  };
+  return integral(elapsed + seconds) - integral(elapsed);
+}
+
+// ../../apps/web/src/neighbourhood.ts
+function neighbourhood(graph, key, nodeRadius2 = 43) {
+  const centre = graph.nodes.find((node) => node.key === key);
+  if (!centre) return { nodes: [], edges: [], continuations: [] };
+  const visible = /* @__PURE__ */ new Set([key]);
+  for (const edge of graph.edges) {
+    if (edge.from === key) visible.add(edge.to);
+    if (edge.to === key) visible.add(edge.from);
+  }
+  const neighbours = graph.nodes.filter((node) => node.key !== key && visible.has(node.key)).map((node) => ({
+    node,
+    bearing: Math.atan2(node.y - centre.y, node.x - centre.x)
+  })).sort((a, b) => a.bearing - b.bearing);
+  const step = 2 * Math.PI / Math.max(1, neighbours.length);
+  const rotation = Math.atan2(
+    neighbours.reduce((sum, n, i) => sum + Math.sin(n.bearing - i * step), 0),
+    neighbours.reduce((sum, n, i) => sum + Math.cos(n.bearing - i * step), 0)
+  );
+  const radius2 = Math.max(
+    260,
+    (2 * nodeRadius2 + 24) / (2 * Math.sin(Math.PI / Math.max(2, neighbours.length)))
+  );
+  const nodes = [
+    { ...centre, x: 0, y: 0 },
+    ...neighbours.map(({ node }, i) => ({
+      ...node,
+      x: radius2 * Math.cos(rotation + i * step),
+      y: radius2 * Math.sin(rotation + i * step)
+    }))
+  ];
+  const edges = graph.edges.filter(
+    (edge) => visible.has(edge.from) && visible.has(edge.to)
+  );
+  const boundary = graph.edges.filter(
+    (edge) => visible.has(edge.from) !== visible.has(edge.to)
+  );
+  const groups = /* @__PURE__ */ new Map();
+  for (const edge of boundary) {
+    const at = visible.has(edge.from) ? edge.from : edge.to;
+    const group = groups.get(at) ?? [];
+    group.push(edge);
+    groups.set(at, group);
+  }
+  const continuations = boundary.map((edge) => {
+    const at = visible.has(edge.from) ? edge.from : edge.to;
+    const group = groups.get(at) ?? [];
+    return {
+      edge,
+      at,
+      offset: group.length > 1 ? (group.indexOf(edge) / (group.length - 1) - 0.5) * 1.25 : 0
+    };
+  });
+  return { nodes, edges, continuations };
+}
+
+// ../../apps/web/src/SidebarResizeHandle.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function SidebarResizeHandle({ width, onResize }) {
+  const handle = useRef2(null);
+  const currentWidth = useRef2(width);
+  currentWidth.current = width;
+  const drag = useRef2(null);
+  const [maximum, setMaximum] = useState(720);
+  const minimum = 240;
+  useEffect2(() => {
+    const parent = handle.current?.parentElement;
+    if (!parent) return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (window.matchMedia("(max-width: 760px)").matches) return;
+      const max = Math.max(
+        minimum,
+        Math.min(720, entry.contentRect.width - 320)
+      );
+      setMaximum(max);
+      if (currentWidth.current > max) onResize(max);
+    });
+    observer.observe(parent);
+    return () => observer.disconnect();
+  }, [onResize]);
+  function resize(next) {
+    onResize(Math.max(minimum, Math.min(maximum, next)));
+  }
+  return /* @__PURE__ */ jsx4(
+    "hr",
+    {
+      ref: handle,
+      className: "sidebar-resizer",
+      "aria-label": "Resize sidebar",
+      "aria-orientation": "vertical",
+      "aria-controls": "lensmap-sidebar",
+      "aria-valuemin": minimum,
+      "aria-valuemax": maximum,
+      "aria-valuenow": Math.round(width),
+      tabIndex: 0,
+      onPointerDown: (event) => {
+        if (event.button !== 0 || !event.isPrimary) return;
+        event.preventDefault();
+        event.currentTarget.focus();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        drag.current = { id: event.pointerId, x: event.clientX, width };
+      },
+      onPointerMove: (event) => {
+        const start = drag.current;
+        if (start?.id === event.pointerId)
+          resize(start.width + start.x - event.clientX);
+      },
+      onPointerUp: (event) => {
+        if (event.currentTarget.hasPointerCapture(event.pointerId))
+          event.currentTarget.releasePointerCapture(event.pointerId);
+        drag.current = null;
+      },
+      onPointerCancel: () => {
+        drag.current = null;
+      },
+      onLostPointerCapture: () => {
+        drag.current = null;
+      },
+      onKeyDown: (event) => {
+        const next = {
+          ArrowLeft: width + 24,
+          ArrowRight: width - 24,
+          Home: minimum,
+          End: maximum
+        }[event.key];
+        if (next !== void 0) {
+          event.preventDefault();
+          resize(next);
+        }
+      }
+    }
+  );
+}
+
+// ../../apps/web/src/useMapKeyboard.ts
+import {
+  useCallback,
+  useEffect as useEffect3,
+  useEffectEvent,
+  useRef as useRef3
+} from "react";
+function useMapKeyboard(ref, controls) {
+  const keys = useRef3(/* @__PURE__ */ new Set());
+  const frame = useRef3(null);
+  const last = useRef3(0);
+  const elapsed = useRef3(0);
+  const stop = useCallback(() => {
+    keys.current.clear();
+    if (frame.current !== null) cancelAnimationFrame(frame.current);
+    frame.current = null;
+    elapsed.current = 0;
+  }, []);
+  const eligible = (target) => target instanceof Element && !!ref.current?.contains(target) && (target === ref.current || !!target.closest("[data-node]"));
+  const tick = useEffectEvent((now) => {
+    if (!controls.canPan || !eligible(document.activeElement)) {
+      stop();
+      return;
+    }
+    const direction = heldDirection(keys.current);
+    const seconds = Math.min(0.05, Math.max(0, (now - last.current) / 1e3));
+    last.current = now;
+    if (direction.x || direction.y) {
+      const distance = panDistance(elapsed.current, seconds, controls.maximum);
+      elapsed.current += seconds;
+      controls.onPan({
+        x: -direction.x * distance,
+        y: -direction.y * distance
+      });
+    }
+    frame.current = requestAnimationFrame(tick);
+  });
+  const down = useEffectEvent((event) => {
+    if (!eligible(event.target)) return;
+    if (event.isComposing || event.metaKey || event.altKey) {
+      stop();
+      return;
+    }
+    if (event.ctrlKey && ["=", "+", "-"].includes(event.key)) {
+      event.preventDefault();
+      controls.onIntent();
+      stop();
+      controls.onZoom(event.key === "-" ? 1 / 1.2 : 1.2);
+      return;
+    }
+    if (["Control", "Shift", "Alt", "Meta", "Tab"].includes(event.key)) stop();
+    if (isDirection(event.key)) {
+      event.preventDefault();
+      controls.onIntent();
+      if (event.ctrlKey || event.shiftKey) {
+        stop();
+        if (event.ctrlKey && !event.shiftKey) controls.onSpatial(event.key);
+        else if (event.shiftKey && !event.ctrlKey && !event.repeat)
+          controls.onConnection(event.key);
+        return;
+      }
+      if (!controls.canPan || event.repeat || keys.current.has(event.key))
+        return;
+      const previous = heldDirection(keys.current), wasEmpty = keys.current.size === 0;
+      keys.current.add(event.key);
+      const direction = heldDirection(keys.current);
+      if (previous.x !== direction.x || previous.y !== direction.y)
+        elapsed.current = 0;
+      if (wasEmpty)
+        controls.onPan({ x: -direction.x * 8, y: -direction.y * 8 });
+      if (frame.current === null) {
+        last.current = performance.now();
+        frame.current = requestAnimationFrame(tick);
+      }
+    } else if (event.key === " " || event.key === "Enter" || event.key === "Escape") {
+      event.preventDefault();
+      controls.onIntent();
+      stop();
+      if (event.repeat || event.ctrlKey && event.shiftKey) return;
+      if (event.key === " ") controls.onAccept();
+      else if (event.key === "Enter") controls.onToggle();
+      else controls.onEscape();
+    }
+  });
+  const up = useEffectEvent((event) => {
+    if (event.key === " " && eligible(event.target) && !event.isComposing && !event.metaKey && !event.altKey)
+      event.preventDefault();
+    if (!keys.current.has(event.key)) return;
+    const previous = heldDirection(keys.current);
+    keys.current.delete(event.key);
+    const direction = heldDirection(keys.current);
+    if (direction.x !== previous.x || direction.y !== previous.y)
+      elapsed.current = 0;
+    if (!keys.current.size) stop();
+  });
+  const blur = useEffectEvent((event) => {
+    if (!eligible(event.relatedTarget)) stop();
+  });
+  useEffect3(() => {
+    const element = ref.current;
+    if (!element) return;
+    const hidden = () => {
+      if (document.hidden) stop();
+    };
+    element.addEventListener("keydown", down);
+    element.addEventListener("keyup", up);
+    element.addEventListener("focusout", blur);
+    window.addEventListener("blur", stop);
+    document.addEventListener("visibilitychange", hidden);
+    return () => {
+      stop();
+      element.removeEventListener("keydown", down);
+      element.removeEventListener("keyup", up);
+      element.removeEventListener("focusout", blur);
+      window.removeEventListener("blur", stop);
+      document.removeEventListener("visibilitychange", hidden);
+    };
+  }, [ref, stop]);
+  return { stop };
+}
+
+// ../../apps/web/src/ViewerInspector.tsx
+import { thoughtAnchors } from "@lensmap/document";
+import Markdown from "react-markdown";
+
+// ../../apps/web/src/ViewerConnections.tsx
+import { connectionWording as connectionWording3 } from "@lensmap/document";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function ViewerConnections({
+  graph,
+  active,
+  onFocus,
+  getLabel = label
+}) {
+  return /* @__PURE__ */ jsx5("nav", { className: "viewer-connections", "aria-label": "Connected thoughts", children: ["outgoing", "incoming"].map((direction) => {
+    const connections = graph.edges.filter(
+      (edge) => direction === "outgoing" ? edge.from === active?.key : edge.to === active?.key
+    );
+    return /* @__PURE__ */ jsxs4("details", { className: "sidebar-section outgoing", open: true, children: [
+      /* @__PURE__ */ jsx5("summary", { children: direction === "outgoing" ? "Outgoing connections" : "Incoming connections" }),
+      connections.map((edge) => {
+        const key = direction === "outgoing" ? edge.to : edge.from;
+        const node = graph.nodes.find(
+          (candidate) => candidate.key === key
+        );
+        return node && /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            type: "button",
+            "data-focus-key": key,
+            onClick: () => onFocus(key),
+            children: [
+              connectionWording3(edge.type, direction),
+              " \xB7 ",
+              getLabel(node)
+            ]
+          },
+          edge.key
+        );
+      }),
+      !connections.length && /* @__PURE__ */ jsxs4("p", { children: [
+        "No ",
+        direction,
+        " connections."
+      ] })
+    ] }, direction);
+  }) });
+}
+
+// ../../apps/web/src/ViewerInspector.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function ViewerInspector({
+  graph,
+  thoughtHref,
+  active,
+  onFocus,
+  onFragment,
+  onActivatePortal,
+  onRevealSource
+}) {
+  return /* @__PURE__ */ jsxs5("aside", { className: "notes", id: "lensmap-sidebar", "aria-label": "Sidebar", children: [
+    /* @__PURE__ */ jsxs5("details", { className: "sidebar-section", open: true, children: [
+      /* @__PURE__ */ jsx6("summary", { children: "Selected thought" }),
+      /* @__PURE__ */ jsxs5("div", { className: "note-content", children: [
+        active ? /* @__PURE__ */ jsx6(
+          Markdown,
+          {
+            components: {
+              h1: ({ children }) => /* @__PURE__ */ jsx6("h2", { children }),
+              a: ({ href, children }) => /* @__PURE__ */ jsx6(
+                "a",
+                {
+                  href,
+                  onClick: (event) => {
+                    if (href?.startsWith("#")) {
+                      event.preventDefault();
+                      onFragment(href.slice(1));
+                    }
+                  },
+                  children
+                }
+              )
+            },
+            children: active.markdown || (active.unresolved ? "# Unresolved thought" : active.title)
+          }
+        ) : /* @__PURE__ */ jsx6("p", { children: "No thought selected." }),
+        active && onRevealSource && /* @__PURE__ */ jsx6("button", { type: "button", onClick: () => onRevealSource(active.key), children: "Reveal source" }),
+        active && /* @__PURE__ */ jsx6(
+          "a",
+          {
+            href: thoughtHref ?? `#${encodeURIComponent(thoughtAnchors(graph.nodes).get(active.key) ?? active.key)}`,
+            onClick: (event) => {
+              event.preventDefault();
+              onFragment(
+                encodeURIComponent(
+                  thoughtAnchors(graph.nodes).get(active.key) ?? active.key
+                )
+              );
+            },
+            children: "Link to this thought"
+          }
+        ),
+        active?.destination && /* @__PURE__ */ jsxs5("div", { className: "portal-actions", children: [
+          /* @__PURE__ */ jsx6("p", { children: active.destination.url }),
+          /* @__PURE__ */ jsxs5(
+            "button",
+            {
+              type: "button",
+              onClick: () => onActivatePortal?.(active),
+              disabled: !onActivatePortal,
+              children: [
+                "Open",
+                " ",
+                active.destination.kind === "map_link" ? "destination map" : "external link"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx6(ViewerConnections, { graph, active, onFocus })
+  ] });
+}
+
+// ../../apps/web/src/viewer-state.ts
+function reconcileViewer(previous, next, selected, camera, mode) {
+  if (mode === "live")
+    return {
+      selected: next.nodes.find((node) => node.key === selected)?.key ?? next.nodes[0]?.key ?? "",
+      camera,
+      reset: false
+    };
+  const id = previous.nodes.find((node) => node.key === selected)?.id;
+  const active = (id ? next.nodes.find((node) => node.id === id) : void 0) ?? next.nodes[0];
+  return {
+    selected: active?.key ?? "",
+    camera: { x: active?.x ?? 0, y: active?.y ?? 0, zoom: 0.85 },
+    reset: true
+  };
+}
+
+// ../../apps/web/src/Viewer.tsx
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var initialCamera = { x: 0, y: 0, zoom: 0.85 };
+var nodeRadius = 43;
+function Viewer({
+  graph,
+  embedded = false,
+  navigationControls,
+  thoughtLink,
+  onActivatePortal,
+  initialState,
+  initialTarget,
+  initialOverview,
+  onStateChange,
+  updateMode = "live",
+  focusRequest,
+  onRevealSource,
+  showInspector = true,
+  renderSidebar,
+  renderExternalInspector
+}) {
+  const scope = useId3();
+  const anchors = useMemo(() => thoughtAnchors2(graph.nodes), [graph.nodes]);
+  const entryNode = graph.nodes.find((n) => n.key === initialTarget);
+  const restoredNode = graph.nodes.find(
+    (n) => n.key === initialState?.selected
+  );
+  const canvas = useRef4(null);
+  const scene = useRef4(null);
+  const pendingActivation = useRef4(null);
+  const doubleCandidate = useRef4(null);
+  const cancelActivation = useCallback2(() => {
+    if (pendingActivation.current !== null)
+      clearTimeout(pendingActivation.current);
+    pendingActivation.current = null;
+    doubleCandidate.current = null;
+  }, []);
+  const drag = useRef4(null);
+  const suppressPointerClick = useRef4(false);
+  const [size, setSize] = useState2({ width: 900, height: 640 });
+  const [camera, setCamera] = useState2(
+    initialState?.camera ?? (entryNode ? { ...initialCamera, x: entryNode.x, y: entryNode.y } : initialCamera)
+  );
+  const { nodes, edges } = graph;
+  const lanes = useMemo(() => edgeLanes(edges), [edges]);
+  const [selected, setSelected] = useState2(
+    restoredNode?.key ?? entryNode?.key ?? nodes[0]?.key ?? ""
+  );
+  const [sidebarWidth, setSidebarWidth] = useState2(340);
+  const [strength, setStrength] = useState2(initialState?.strength ?? 1.1);
+  const [neighbourhoodStrength, setNeighbourhoodStrength] = useState2(
+    initialState?.neighbourhoodStrength ?? 1.1
+  );
+  const [overview, setOverview] = useState2(
+    initialState?.overview ?? initialOverview ?? false
+  );
+  const [inNeighbourhood, setInNeighbourhood] = useState2(
+    !!restoredNode && (initialState?.inNeighbourhood ?? false)
+  );
+  const [neighbourhoodCamera, setNeighbourhoodCamera] = useState2(
+    initialState?.neighbourhoodCamera ?? {
+      x: 0,
+      y: 0,
+      zoom: 1
+    }
+  );
+  const [dragging, setDragging] = useState2(false);
+  const [message, setMessage] = useState2("");
+  const [keyboardTarget, setKeyboardTarget] = useState2();
+  const [keyboardActive, setKeyboardActive] = useState2(false);
+  const [maximumPanSpeed, setMaximumPanSpeed] = useState2(900);
+  const [connectionChoice, setConnectionChoice] = useState2();
+  const dismissConnectionChoice = useCallback2(() => {
+    const focused = document.activeElement;
+    if (focused instanceof Element && canvas.current?.contains(focused) && focused.closest("[data-connection-chooser]")) {
+      canvas.current.focus({ preventScroll: true });
+    }
+    setConnectionChoice(void 0);
+  }, []);
+  const returnOverview = useRef4(initialState?.returnOverview ?? false);
+  const reportState = useEffectEvent2(
+    () => onStateChange?.({
+      selected,
+      camera,
+      strength,
+      overview,
+      inNeighbourhood,
+      neighbourhoodCamera,
+      neighbourhoodStrength,
+      returnOverview: returnOverview.current
+    })
+  );
+  useEffect4(() => {
+    reportState();
+  }, [
+    selected,
+    camera,
+    strength,
+    overview,
+    inNeighbourhood,
+    neighbourhoodCamera,
+    neighbourhoodStrength
+  ]);
+  const keyboard = useMapKeyboard(canvas, {
+    canPan: !overview,
+    maximum: maximumPanSpeed,
+    onIntent: cancelActivation,
+    onPan: panView,
+    onZoom: zoomView,
+    onSpatial: moveTarget,
+    onConnection: previewConnection,
+    onAccept: () => {
+      if (target) focusNode(target.key);
+    },
+    onToggle: () => {
+      if (targetNode?.destination) {
+        dismissConnectionChoice();
+        onActivatePortal?.(targetNode);
+      } else if (target) toggleNeighbourhood(target.key);
+    },
+    onEscape: escapeNavigation
+  });
+  const setViewCamera = inNeighbourhood ? setNeighbourhoodCamera : setCamera;
+  const shownStrength = inNeighbourhood ? neighbourhoodStrength : strength;
+  const setViewStrength = inNeighbourhood ? setNeighbourhoodStrength : setStrength;
+  const local = useMemo(
+    () => inNeighbourhood ? neighbourhood(graph, selected, nodeRadius) : null,
+    [graph, inNeighbourhood, selected]
+  );
+  useEffect4(() => cancelActivation, [cancelActivation]);
+  useEffect4(() => {
+    const element = canvas.current;
+    if (!element) return;
+    const observer = new ResizeObserver(([entry]) => {
+      dismissConnectionChoice();
+      setSize({
+        width: entry.contentRect.width,
+        height: entry.contentRect.height
+      });
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [dismissConnectionChoice]);
+  useEffect4(() => {
+    const element = canvas.current;
+    if (!element) return;
+    const wheel = (event) => {
+      if (event.target instanceof Element && event.target.closest("[data-connection-chooser]"))
+        return;
+      cancelActivation();
+      keyboard.stop();
+      dismissConnectionChoice();
+      if (overview) return;
+      event.preventDefault();
+      const pixels = event.deltaY * (event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? size.height : 1);
+      setViewCamera(
+        (current) => zoomCamera(
+          current,
+          Math.exp(-Math.max(-400, Math.min(400, pixels)) * 15e-4)
+        )
+      );
+    };
+    element.addEventListener("wheel", wheel, { passive: false });
+    return () => element.removeEventListener("wheel", wheel);
+  }, [
+    overview,
+    size.height,
+    setViewCamera,
+    cancelActivation,
+    keyboard.stop,
+    dismissConnectionChoice
+  ]);
+  const shownCamera = inNeighbourhood ? neighbourhoodCamera : overview ? fitCamera(nodes, size, nodeRadius) : camera;
+  const projected = (local?.nodes ?? nodes).map((node) => ({
+    ...projectPoint(
+      node,
+      { ...shownCamera, zoom: 1 },
+      size,
+      overview ? 0 : shownStrength
+    ),
+    node
+  }));
+  const circles = overview ? projected : limitMagnification(projected, nodeRadius, shownStrength);
+  const positions = new Map(circles.map((point) => [point.node.key, point]));
+  const navigationPoints = circles.map((point) => ({
+    key: point.node.key,
+    x: (point.x - size.width / 2) * shownCamera.zoom,
+    y: (point.y - size.height / 2) * shownCamera.zoom
+  }));
+  const visiblePoints = navigationPoints.filter(
+    (point) => Math.abs(point.x) <= size.width / 2 && Math.abs(point.y) <= size.height / 2
+  );
+  const ordinaryTarget = keyboardTarget === void 0 ? centralTarget(visiblePoints) : visiblePoints.find((point) => point.key === keyboardTarget);
+  const pendingConnection = connectionChoice?.candidates[connectionChoice.index];
+  const target = connectionChoice ? pendingConnection?.node : ordinaryTarget;
+  const targetNode = nodes.find((node) => node.key === target?.key);
+  const choiceOrigin = nodes.find(
+    (node) => node.key === connectionChoice?.origin
+  );
+  const previewEdges = new Set(
+    pendingConnection?.routes.map((route) => route.edge.key)
+  );
+  const visibleKeys = new Set(visiblePoints.map((point) => point.key));
+  const active = nodes.find((node) => node.key === selected) ?? nodes[0];
+  const incident = edges.filter(
+    (edge) => edge.from === active?.key || edge.to === active?.key
+  );
+  const connectedEdges = new Set(incident.map((edge) => edge.key));
+  const connectedNodes = new Set(
+    incident.flatMap((edge) => [edge.from, edge.to])
+  );
+  const sceneEdges = local?.edges ?? edges;
+  const drawnEdges = [
+    ...sceneEdges.filter(
+      (edge) => !connectedEdges.has(edge.key) && !previewEdges.has(edge.key)
+    ),
+    ...sceneEdges.filter(
+      (edge) => connectedEdges.has(edge.key) && !previewEdges.has(edge.key)
+    ),
+    ...sceneEdges.filter((edge) => previewEdges.has(edge.key))
+  ];
+  function panView(delta) {
+    dismissConnectionChoice();
+    setKeyboardTarget(void 0);
+    setViewCamera((current) => panCamera(current, delta));
+  }
+  function zoomView(factor) {
+    cancelActivation();
+    keyboard.stop();
+    dismissConnectionChoice();
+    if (!overview) setViewCamera((current) => zoomCamera(current, factor));
+  }
+  function moveTarget(direction) {
+    const from = visibleKeys.has(target?.key ?? "") ? target?.key : connectionChoice?.origin ?? ordinaryTarget?.key;
+    const next = spatialTarget(visiblePoints, from, direction);
+    dismissConnectionChoice();
+    setKeyboardTarget(next?.key ?? from);
+  }
+  function previewConnection(direction) {
+    const origin = connectionChoice?.origin ?? target?.key;
+    if (origin)
+      setConnectionChoice(
+        (previous) => stepConnectionChoice(
+          graph,
+          origin,
+          direction,
+          navigationPoints,
+          previous
+        )
+      );
+  }
+  function escapeNavigation() {
+    if (connectionChoice) dismissConnectionChoice();
+    else restoreMap();
+  }
+  function restoreMap() {
+    if (!inNeighbourhood) return;
+    cancelActivation();
+    keyboard.stop();
+    stopDrag();
+    setInNeighbourhood(false);
+    setOverview(returnOverview.current);
+    setKeyboardTarget(void 0);
+    revealScene();
+  }
+  function retainViewerFocus(key, nextNeighbourhood) {
+    if (!nextNeighbourhood) return;
+    const viewer = canvas.current;
+    const focused = document.activeElement;
+    if (!viewer?.contains(focused)) return;
+    const focusedKey = focused instanceof Element ? focused.closest("[data-node]")?.dataset.node : void 0;
+    if (focusedKey && focusedKey !== key && !edges.some(
+      (edge) => edge.from === key && edge.to === focusedKey || edge.to === key && edge.from === focusedKey
+    ))
+      viewer.focus({ preventScroll: true });
+  }
+  function focusNode(key) {
+    cancelActivation();
+    keyboard.stop();
+    const node = nodes.find((candidate) => candidate.key === key);
+    if (!node) {
+      setMessage(`The selected node is no longer in the graph.`);
+      return;
+    }
+    dismissConnectionChoice();
+    retainViewerFocus(key, inNeighbourhood);
+    setSelected(key);
+    setKeyboardTarget(key);
+    setOverview(false);
+    if (inNeighbourhood) {
+      setNeighbourhoodCamera((current) => ({ ...current, x: 0, y: 0 }));
+      revealScene();
+    } else {
+      setCamera((current) => ({ ...current, x: node.x, y: node.y }));
+    }
+    setMessage("");
+  }
+  function revealScene() {
+    if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+      scene.current?.animate([{ opacity: 0.4 }, { opacity: 1 }], {
+        duration: 160,
+        easing: "ease-out"
+      });
+  }
+  function toggleNeighbourhood(key) {
+    const node = nodes.find((candidate) => candidate.key === key);
+    if (!node) return;
+    dismissConnectionChoice();
+    cancelActivation();
+    keyboard.stop();
+    stopDrag();
+    retainViewerFocus(key, !inNeighbourhood);
+    setSelected(key);
+    setKeyboardTarget(key);
+    if (!inNeighbourhood) returnOverview.current = overview;
+    setOverview(false);
+    setInNeighbourhood(!inNeighbourhood);
+    if (inNeighbourhood)
+      setCamera((current) => ({ ...current, x: node.x, y: node.y }));
+    else {
+      setNeighbourhoodCamera({ x: 0, y: 0, zoom: 1 });
+      setNeighbourhoodStrength(strength);
+    }
+    setMessage("");
+    revealScene();
+  }
+  function showMap(nextOverview) {
+    dismissConnectionChoice();
+    cancelActivation();
+    keyboard.stop();
+    stopDrag();
+    if (inNeighbourhood && active) {
+      setCamera((current) => ({ ...current, x: active.x, y: active.y }));
+      revealScene();
+    }
+    setInNeighbourhood(false);
+    setOverview(nextOverview);
+    setKeyboardTarget(void 0);
+  }
+  function activateNode(event, key) {
+    if (event.detail === 0) {
+      focusNode(key);
+      return;
+    }
+    if (event.detail !== 1) return;
+    cancelActivation();
+    doubleCandidate.current = key;
+    pendingActivation.current = setTimeout(() => focusNode(key), 350);
+  }
+  function focusFragment(fragment) {
+    let id;
+    try {
+      id = decodeURIComponent(fragment);
+    } catch {
+      setMessage(`The fragment #${fragment} is not a valid URL fragment.`);
+      return;
+    }
+    const key = resolveThoughtAnchor(nodes, id);
+    const node = nodes.find((candidate) => candidate.key === key);
+    if (node) focusNode(node.key);
+    else setMessage(`No thought has anchor "${id}".`);
+  }
+  const previousGraph = useRef4(graph);
+  const lastRequest = useRef4(
+    void 0
+  );
+  const focusedBeforeUpdate = typeof document === "undefined" ? null : document.activeElement;
+  const hadViewerFocus = !!canvas.current?.contains(focusedBeforeUpdate);
+  const reconcileGraph = useEffectEvent2(() => {
+    if (previousGraph.current === graph) return;
+    const next = reconcileViewer(
+      previousGraph.current,
+      graph,
+      selected,
+      camera,
+      updateMode
+    );
+    previousGraph.current = graph;
+    cancelActivation();
+    keyboard.stop();
+    stopDrag();
+    setConnectionChoice(void 0);
+    setKeyboardTarget(void 0);
+    setSelected(next.selected);
+    setCamera(next.camera);
+    if (next.reset || !graph.nodes.some((node) => node.key === selected))
+      setInNeighbourhood(false);
+    setMessage("");
+  });
+  useLayoutEffect(() => {
+    reconcileGraph();
+    if (hadViewerFocus && focusedBeforeUpdate && !focusedBeforeUpdate.isConnected)
+      canvas.current?.focus({ preventScroll: true });
+  });
+  const receiveFocus = useEffectEvent2(() => {
+    if (!focusRequest || lastRequest.current?.key === focusRequest.key && lastRequest.current?.sequence === focusRequest.sequence)
+      return;
+    lastRequest.current = focusRequest;
+    const node = graph.nodes.find(
+      (candidate) => candidate.key === focusRequest.key
+    );
+    if (!node) return;
+    cancelActivation();
+    keyboard.stop();
+    stopDrag();
+    setConnectionChoice(void 0);
+    setSelected(node.key);
+    setKeyboardTarget(node.key);
+    setInNeighbourhood(false);
+    setOverview(false);
+    setCamera((current) => ({ ...current, x: node.x, y: node.y }));
+    setMessage("");
+  });
+  useLayoutEffect(() => {
+    receiveFocus();
+  });
+  function stopDrag() {
+    const previous = drag.current;
+    if (previous?.capture.hasPointerCapture(previous.id)) {
+      previous.capture.releasePointerCapture(previous.id);
+    }
+    drag.current = null;
+    setDragging(false);
+  }
+  const Container = embedded ? "div" : "main";
+  const sidebarContext = {
+    graph,
+    active,
+    thoughtHref: active ? thoughtLink?.(anchors.get(active.key) ?? active.key) : void 0,
+    onActivatePortal,
+    onFocus: focusNode,
+    onFragment: focusFragment
+  };
+  return /* @__PURE__ */ jsxs6(
+    Container,
+    {
+      className: `lensmap-viewer${embedded ? " lensmap-embedded" : ""}`,
+      children: [
+        !embedded && /* @__PURE__ */ jsxs6("header", { className: "masthead", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "brand", children: [
+            /* @__PURE__ */ jsx7("span", { className: "brand-mark", "aria-hidden": "true", children: "\u25CE" }),
+            /* @__PURE__ */ jsx7("h1", { children: "Lensmap" }),
+            /* @__PURE__ */ jsx7("span", { className: "tag", children: "spatial lens lab" })
+          ] }),
+          /* @__PURE__ */ jsx7("p", { children: "Follow a thought. Keep the world around it." }),
+          /* @__PURE__ */ jsx7("span", { className: "phase", children: "01 / web experiment" })
+        ] }),
+        /* @__PURE__ */ jsxs6(
+          "section",
+          {
+            className: `workspace${showInspector ? "" : " canvas-only"}`,
+            "aria-label": "Lens exploration",
+            style: { "--sidebar-width": `${sidebarWidth}px` },
+            onPointerDownCapture: (event) => {
+              keyboard.stop();
+              if (!event.target.closest("[data-node]"))
+                cancelActivation();
+            },
+            onKeyDown: cancelActivation,
+            children: [
+              /* @__PURE__ */ jsxs6("div", { className: "map-column", children: [
+                /* @__PURE__ */ jsxs6("div", { className: "toolbar", children: [
+                  navigationControls,
+                  /* @__PURE__ */ jsxs6("fieldset", { className: "segmented", children: [
+                    /* @__PURE__ */ jsx7("legend", { className: "sr-only", children: "Map view" }),
+                    /* @__PURE__ */ jsx7(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-pressed": !overview && !inNeighbourhood,
+                        onClick: () => showMap(false),
+                        children: "Lens"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-pressed": overview,
+                        onClick: () => showMap(true),
+                        children: "Overview"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs6("label", { className: "strength", children: [
+                    "Lens strength",
+                    " ",
+                    /* @__PURE__ */ jsx7(
+                      "input",
+                      {
+                        "aria-label": "Lens strength",
+                        type: "range",
+                        min: "0",
+                        max: "1.4",
+                        step: "0.05",
+                        value: shownStrength,
+                        disabled: overview,
+                        onChange: (event) => {
+                          cancelActivation();
+                          dismissConnectionChoice();
+                          setViewStrength(Number(event.target.value));
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7("output", { children: shownStrength.toFixed(2) })
+                  ] }),
+                  /* @__PURE__ */ jsxs6("label", { className: "strength", children: [
+                    "Pan max",
+                    /* @__PURE__ */ jsx7(
+                      "input",
+                      {
+                        "aria-label": "Maximum keyboard pan speed",
+                        type: "range",
+                        min: "120",
+                        max: "1800",
+                        step: "60",
+                        value: maximumPanSpeed,
+                        onChange: (event) => {
+                          keyboard.stop();
+                          setMaximumPanSpeed(Number(event.target.value));
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs6("output", { children: [
+                      maximumPanSpeed,
+                      " px/s"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      className: "neighbourhood-action",
+                      disabled: !active,
+                      onClick: () => active && toggleNeighbourhood(active.key),
+                      children: inNeighbourhood ? "Return to map" : "Explore neighbourhood"
+                    }
+                  ),
+                  inNeighbourhood && active && /* @__PURE__ */ jsxs6("span", { className: "neighbourhood-label", children: [
+                    "Neighbourhood \xB7 ",
+                    label(active)
+                  ] }),
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      className: "quiet",
+                      onClick: () => {
+                        dismissConnectionChoice();
+                        cancelActivation();
+                        keyboard.stop();
+                        stopDrag();
+                        setInNeighbourhood(false);
+                        setCamera({
+                          ...initialCamera,
+                          x: nodes[0]?.x ?? 0,
+                          y: nodes[0]?.y ?? 0
+                        });
+                        setSelected(nodes[0]?.key ?? "");
+                        setKeyboardTarget(void 0);
+                        setStrength(1.1);
+                        setOverview(false);
+                        setMessage("");
+                      },
+                      children: "Reset view"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs6(
+                  "div",
+                  {
+                    ref: canvas,
+                    className: `map ${dragging ? "dragging" : ""} ${overview ? "overview" : ""} ${inNeighbourhood ? "neighbourhood" : ""}`,
+                    "data-view": inNeighbourhood ? "neighbourhood" : overview ? "overview" : "lens",
+                    role: "application",
+                    "aria-label": "Spatial map",
+                    "aria-describedby": "map-help",
+                    "aria-activedescendant": keyboardActive && target ? connectionChoice ? `connection-option-${target.key}` : `${scope}-thought-${target.key}` : void 0,
+                    tabIndex: 0,
+                    onFocusCapture: (event) => {
+                      const node = event.target.closest(
+                        "[data-node]"
+                      );
+                      setKeyboardActive(event.target === event.currentTarget || !!node);
+                      if (node) {
+                        dismissConnectionChoice();
+                        setKeyboardTarget(node.dataset.node);
+                      }
+                    },
+                    onBlurCapture: (event) => {
+                      if (!event.currentTarget.contains(
+                        event.relatedTarget
+                      ))
+                        setKeyboardActive(false);
+                    },
+                    onPointerDown: (event) => {
+                      if (event.target.closest("[data-connection-chooser]"))
+                        return;
+                      if (event.button !== 0 || !event.isPrimary) return;
+                      suppressPointerClick.current = false;
+                      const button = event.target.closest("button");
+                      if (button && !button.hasAttribute("data-node"))
+                        cancelActivation();
+                      if (overview || button && !button.hasAttribute("data-node"))
+                        return;
+                      if (!button) event.currentTarget.focus({ preventScroll: true });
+                      const capture = button ?? event.currentTarget;
+                      capture.setPointerCapture(event.pointerId);
+                      drag.current = {
+                        id: event.pointerId,
+                        x: event.clientX,
+                        y: event.clientY,
+                        startX: event.clientX,
+                        startY: event.clientY,
+                        capture,
+                        active: false
+                      };
+                    },
+                    onPointerMove: (event) => {
+                      const previous = drag.current;
+                      if (!previous || event.pointerId !== previous.id) return;
+                      if (!previous.active && Math.hypot(
+                        event.clientX - previous.startX,
+                        event.clientY - previous.startY
+                      ) < 4)
+                        return;
+                      if (!previous.active) {
+                        cancelActivation();
+                        setDragging(true);
+                        suppressPointerClick.current = true;
+                        event.currentTarget.focus({ preventScroll: true });
+                      }
+                      const delta = {
+                        x: event.clientX - previous.x,
+                        y: event.clientY - previous.y
+                      };
+                      panView(delta);
+                      drag.current = {
+                        ...previous,
+                        x: event.clientX,
+                        y: event.clientY,
+                        active: true
+                      };
+                    },
+                    onPointerUp: (event) => {
+                      if (drag.current?.id === event.pointerId) stopDrag();
+                    },
+                    onPointerCancel: (event) => {
+                      cancelActivation();
+                      if (drag.current?.id === event.pointerId) stopDrag();
+                    },
+                    onLostPointerCapture: (event) => {
+                      if (drag.current?.id !== event.pointerId) return;
+                      drag.current = null;
+                      setDragging(false);
+                    },
+                    onClickCapture: (event) => {
+                      if (!suppressPointerClick.current || event.detail === 0) return;
+                      suppressPointerClick.current = false;
+                      event.preventDefault();
+                      event.stopPropagation();
+                    },
+                    children: [
+                      !overview && /* @__PURE__ */ jsx7("div", { className: "focus-ring", "aria-hidden": "true" }),
+                      !nodes.length && /* @__PURE__ */ jsxs6("div", { className: "empty-map", children: [
+                        /* @__PURE__ */ jsx7("h2", { children: "Start with a thought" }),
+                        /* @__PURE__ */ jsx7("p", { children: "Supply a document with thoughts to explore." })
+                      ] }),
+                      /* @__PURE__ */ jsxs6(
+                        "div",
+                        {
+                          ref: scene,
+                          className: "graph-scene",
+                          style: { transform: `scale(${shownCamera.zoom})` },
+                          children: [
+                            /* @__PURE__ */ jsxs6(
+                              "svg",
+                              {
+                                className: "connections",
+                                width: size.width,
+                                height: size.height,
+                                children: [
+                                  /* @__PURE__ */ jsx7("title", { children: "Explicit thought connections" }),
+                                  /* @__PURE__ */ jsxs6("defs", { children: [
+                                    Object.entries(colours).map(([branch, colour]) => /* @__PURE__ */ jsx7(
+                                      "marker",
+                                      {
+                                        id: `${scope}-arrow-${branch}`,
+                                        viewBox: "0 0 10 10",
+                                        refX: "8",
+                                        refY: "5",
+                                        markerWidth: "7",
+                                        markerHeight: "7",
+                                        orient: "auto-start-reverse",
+                                        children: /* @__PURE__ */ jsx7(
+                                          "path",
+                                          {
+                                            d: "M 1 1 L 9 5 L 1 9",
+                                            fill: "none",
+                                            stroke: colour,
+                                            strokeWidth: "1.5"
+                                          }
+                                        )
+                                      },
+                                      branch
+                                    )),
+                                    Object.entries(colours).map(([branch, colour]) => /* @__PURE__ */ jsx7(
+                                      BlockingMarker,
+                                      {
+                                        id: `${scope}-bar-${branch}`,
+                                        colour
+                                      },
+                                      `bar-${branch}`
+                                    )),
+                                    /* @__PURE__ */ jsx7(BlockingMarker, { id: `${scope}-bar-gap`, colour: "black", gap: true })
+                                  ] }),
+                                  local && /* @__PURE__ */ jsx7(
+                                    NeighbourhoodContinuations,
+                                    {
+                                      continuations: local.continuations,
+                                      positions,
+                                      centreKey: selected,
+                                      nodes,
+                                      nodeRadius,
+                                      previewEdges,
+                                      markerPrefix: scope
+                                    }
+                                  ),
+                                  drawnEdges.map((edge) => {
+                                    const appearance = connectionAppearance(edge.type);
+                                    const from = positions.get(edge.from);
+                                    const to = positions.get(edge.to);
+                                    if (!from || !to) return null;
+                                    const description = `${label(from.node)} ${connectionWording4(edge.type, "outgoing")} ${label(to.node)}`;
+                                    const dx = to.x - from.x;
+                                    const dy = to.y - from.y;
+                                    const distance = Math.max(1, Math.hypot(dx, dy));
+                                    const start = {
+                                      x: from.x + dx / distance * nodeRadius * from.scale,
+                                      y: from.y + dy / distance * nodeRadius * from.scale
+                                    };
+                                    const targetRadius = nodeRadius * to.scale + (appearance.end ? 7 : 0);
+                                    const end = {
+                                      x: to.x - dx / distance * targetRadius,
+                                      y: to.y - dy / distance * targetRadius
+                                    };
+                                    const lane = lanes.get(edge.key);
+                                    let bend = (lane?.count ?? 0) > 1 ? lane?.bend ?? 0 : edge.kind === "cross" ? 42 : 0;
+                                    const centre = positions.get(selected);
+                                    if (local && !connectedEdges.has(edge.key) && centre) {
+                                      const side = (((start.x + end.x) / 2 - centre.x) * -dy + ((start.y + end.y) / 2 - centre.y) * dx) / distance;
+                                      bend = (side < 0 ? -1 : 1) * (190 + (lane?.index ?? 0) * 60);
+                                    }
+                                    const radius2 = nodeRadius * from.scale;
+                                    const loop = radius2 * (3 + (lane?.index ?? 0));
+                                    const points = edge.from === edge.to ? [
+                                      {
+                                        x: from.x + radius2 * 0.7,
+                                        y: from.y - radius2 * 0.7
+                                      },
+                                      { x: from.x + loop, y: from.y - loop },
+                                      { x: from.x - loop, y: from.y - loop },
+                                      {
+                                        x: from.x - radius2 * 0.7,
+                                        y: from.y - radius2 * 0.7
+                                      }
+                                    ] : [
+                                      start,
+                                      {
+                                        x: (start.x + end.x) / 2 - dy / distance * bend,
+                                        y: (start.y + end.y) / 2 + dx / distance * bend
+                                      },
+                                      end
+                                    ];
+                                    const path = points.length === 4 ? `M ${points[0].x} ${points[0].y} C ${points[1].x} ${points[1].y} ${points[2].x} ${points[2].y} ${points[3].x} ${points[3].y}` : `M ${points[0].x} ${points[0].y} Q ${points[1].x} ${points[1].y} ${points[2].x} ${points[2].y}`;
+                                    const edgeClass = `edge ${edge.kind} ${connectedEdges.has(edge.key) ? "connected" : local ? "context" : ""} ${previewEdges.has(edge.key) ? "connection-preview" : ""}`;
+                                    const painted = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+                                      /* @__PURE__ */ jsx7("path", { d: path, className: "edge-halo" }),
+                                      /* @__PURE__ */ jsx7(
+                                        "path",
+                                        {
+                                          "data-edge": `${edge.from}-${edge.to}`,
+                                          "data-edge-key": edge.key,
+                                          "data-connection-preview": previewEdges.has(edge.key) ? "true" : void 0,
+                                          "data-kind": edge.kind,
+                                          "data-type": edge.type ?? "connected",
+                                          strokeDasharray: appearance.dashed ? "7 6" : void 0,
+                                          d: path,
+                                          stroke: colours[to.node.branch],
+                                          style: { color: colours[to.node.branch] },
+                                          className: edgeClass,
+                                          markerStart: appearance.start ? `url(#${scope}-${appearance.start}-${to.node.branch})` : void 0,
+                                          markerEnd: appearance.end ? `url(#${scope}-${appearance.end}-${to.node.branch})` : void 0
+                                        }
+                                      )
+                                    ] });
+                                    return /* @__PURE__ */ jsxs6("g", { children: [
+                                      appearance.end === "bar" ? /* @__PURE__ */ jsx7(
+                                        ConnectionGap,
+                                        {
+                                          path,
+                                          points,
+                                          className: edgeClass,
+                                          markerId: `${scope}-bar-gap`,
+                                          children: painted
+                                        }
+                                      ) : painted,
+                                      /* @__PURE__ */ jsx7(
+                                        "path",
+                                        {
+                                          className: "edge-hit",
+                                          d: path,
+                                          "data-edge-hit": edge.key,
+                                          children: /* @__PURE__ */ jsx7("title", { children: description })
+                                        }
+                                      )
+                                    ] }, edge.key);
+                                  })
+                                ]
+                              }
+                            ),
+                            (local?.nodes ?? nodes).map((node) => {
+                              const point = positions.get(node.key);
+                              if (!point) return null;
+                              return /* @__PURE__ */ jsxs6(
+                                "button",
+                                {
+                                  type: "button",
+                                  id: `${scope}-thought-${node.key}`,
+                                  "data-anchor": anchors.get(node.key),
+                                  className: `node ${selected === node.key ? "selected" : ""} ${connectedNodes.has(node.key) ? "connected" : ""} ${node.unresolved ? "unresolved" : ""}`,
+                                  "data-node": node.key,
+                                  "data-keyboard-target": keyboardActive && target?.key === node.key ? "true" : void 0,
+                                  "data-scale": point.scale * shownCamera.zoom,
+                                  "aria-label": label(node),
+                                  "aria-pressed": selected === node.key,
+                                  title: label(node),
+                                  style: {
+                                    left: point.x,
+                                    top: point.y,
+                                    transform: `translate(-50%, -50%) scale(${point.scale})`,
+                                    borderColor: colours[node.branch],
+                                    "--branch-colour": colours[node.branch]
+                                  },
+                                  onClick: (event) => activateNode(event, node.key),
+                                  onDoubleClick: () => {
+                                    const eligible = doubleCandidate.current === node.key;
+                                    cancelActivation();
+                                    if (node.destination) onActivatePortal?.(node);
+                                    else if (eligible) toggleNeighbourhood(node.key);
+                                    else focusNode(node.key);
+                                  },
+                                  children: [
+                                    node.destination && /* @__PURE__ */ jsx7(
+                                      "span",
+                                      {
+                                        role: "img",
+                                        className: "destination-icon",
+                                        "data-destination": node.destination.kind,
+                                        "aria-label": node.destination.kind === "map_link" ? "Map portal" : "External link",
+                                        children: node.destination.kind === "map_link" ? "\u{1F300}" : /* @__PURE__ */ jsx7(
+                                          "svg",
+                                          {
+                                            width: "20",
+                                            height: "20",
+                                            viewBox: "0 0 24 24",
+                                            "aria-hidden": "true",
+                                            children: /* @__PURE__ */ jsx7(
+                                              "path",
+                                              {
+                                                d: "M 14 3 H 21 V 10 M 21 3 L 10 14 M 10 5 H 4 V 21 H 20 V 14",
+                                                stroke: "currentColor",
+                                                strokeWidth: "2",
+                                                fill: "none"
+                                              }
+                                            )
+                                          }
+                                        )
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx7(
+                                      "span",
+                                      {
+                                        className: "thought-anchor",
+                                        id: `${scope}-anchor-${encodeURIComponent(anchors.get(node.key) ?? node.key)}`,
+                                        "aria-hidden": "true"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx7("span", { children: node.unresolved ? "?" : /* @__PURE__ */ jsx7(
+                                      Markdown2,
+                                      {
+                                        allowedElements: [
+                                          "em",
+                                          "strong",
+                                          "code",
+                                          "del",
+                                          "br"
+                                        ],
+                                        unwrapDisallowed: true,
+                                        children: node.title
+                                      }
+                                    ) })
+                                  ]
+                                },
+                                node.key
+                              );
+                            })
+                          ]
+                        }
+                      ),
+                      connectionChoice && choiceOrigin && /* @__PURE__ */ jsx7(
+                        ConnectionChooser,
+                        {
+                          choice: connectionChoice,
+                          origin: choiceOrigin,
+                          visibleKeys,
+                          onPick: (index) => {
+                            setConnectionChoice(
+                              (current) => current ? { ...current, index } : current
+                            );
+                            canvas.current?.focus({ preventScroll: true });
+                          },
+                          onAccept: () => {
+                            if (pendingConnection) focusNode(pendingConnection.node.key);
+                          },
+                          onActivatePortal,
+                          onCancel: dismissConnectionChoice
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs6("div", { className: "zoom-controls", children: [
+                        /* @__PURE__ */ jsx7(
+                          "button",
+                          {
+                            type: "button",
+                            "aria-label": "Zoom out",
+                            disabled: overview,
+                            onClick: () => zoomView(1 / 1.2),
+                            children: "\u2212"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs6("output", { "aria-label": "Zoom level", children: [
+                          Math.round(shownCamera.zoom * 100),
+                          "%"
+                        ] }),
+                        /* @__PURE__ */ jsx7(
+                          "button",
+                          {
+                            type: "button",
+                            "aria-label": "Zoom in",
+                            disabled: overview,
+                            onClick: () => zoomView(1.2),
+                            children: "+"
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs6("footer", { className: "map-footer", children: [
+                  /* @__PURE__ */ jsx7("p", { className: "map-caption", children: inNeighbourhood ? `NEIGHBOURHOOD / ${active ? label(active) : ""}` : overview ? "UNDISTORTED / select a thought to return" : "SPATIAL FOCUS / pan through the centre" }),
+                  /* @__PURE__ */ jsx7("p", { id: "map-help", children: "Drag / arrows pan \xB7 hold to accelerate \xB7 Ctrl+= / Ctrl+- zoom \xB7 Ctrl+arrows browse \xB7 Shift+arrows choose exits \xB7 Space travels \xB7 Enter / double-click switches views \xB7 Esc cancels choice / restores map" }),
+                  keyboardActive && /* @__PURE__ */ jsxs6("p", { className: "keyboard-target-label", children: [
+                    "Target:",
+                    " ",
+                    targetNode ? `${label(targetNode)}${visibleKeys.has(targetNode.key) ? "" : " (outside this view)"}` : "none in the central region"
+                  ] }),
+                  /* @__PURE__ */ jsxs6("div", { className: "legend", children: [
+                    /* @__PURE__ */ jsx7("span", { children: "\u2501 connected" }),
+                    /* @__PURE__ */ jsx7("span", { children: "\u2504 optional \xB7 \u2192 sequence \xB7 \u2500| | prevents" })
+                  ] })
+                ] })
+              ] }),
+              showInspector && /* @__PURE__ */ jsx7(
+                SidebarResizeHandle,
+                {
+                  width: sidebarWidth,
+                  onResize: setSidebarWidth
+                }
+              ),
+              showInspector && (renderSidebar ? renderSidebar(sidebarContext) : /* @__PURE__ */ jsx7(
+                ViewerInspector,
+                {
+                  ...sidebarContext,
+                  onRevealSource
+                }
+              ))
+            ]
+          }
+        ),
+        renderExternalInspector?.(sidebarContext),
+        /* @__PURE__ */ jsxs6("p", { className: "sr-only", role: "status", children: [
+          "Selected thought: ",
+          active ? label(active) : "none",
+          ".",
+          " ",
+          inNeighbourhood ? "Neighbourhood view." : overview ? "Overview." : "Lens map.",
+          " ",
+          message,
+          keyboardActive && ` Keyboard target: ${targetNode ? label(targetNode) : "none"}.`,
+          connectionChoice && choiceOrigin && ` Connection choice from ${label(choiceOrigin)}. ${pendingConnection ? `${label(pendingConnection.node)}${visibleKeys.has(pendingConnection.node.key) ? "" : ", outside this view"}. Space travels; Enter switches view.` : "No connections in this direction."} Escape cancels choice.`
+        ] }),
+        /* @__PURE__ */ jsxs6("footer", { className: "page-footer", children: [
+          /* @__PURE__ */ jsxs6("span", { children: [
+            nodes.length,
+            " thoughts / ",
+            edges.length,
+            " explicit connections"
+          ] }),
+          /* @__PURE__ */ jsx7("span", { children: "Source layout is stable. Magnification is a view." })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/SelectedThought.tsx
+import { useId as useId4, useMemo as useMemo2, useState as useState3 } from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function readingExcerpt(html) {
+  const template = document.createElement("template");
+  template.innerHTML = html;
+  const text = template.content.textContent?.replace(/\s+/g, " ").trim() ?? "";
+  if (text.length <= 800) return null;
+  const first = template.content.querySelector("p, li")?.textContent ?? text;
+  const paragraph = first.replace(/\s+/g, " ").trim();
+  const end = paragraph.length > 360 ? paragraph.lastIndexOf(" ", 360) : paragraph.length;
+  return {
+    heading: template.content.querySelector("h1, h2, h3, h4, h5, h6")?.textContent,
+    text: `${paragraph.slice(0, end > 0 ? end : 360)}\u2026`
+  };
+}
+function SelectedThought({ html }) {
+  const excerpt = useMemo2(() => readingExcerpt(html), [html]);
+  const [expanded, setExpanded] = useState3(false);
+  const fullId = useId4();
+  if (!excerpt) {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: "sl-markdown-content",
+        "data-selected-content": true,
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs7("div", { className: "sl-markdown-content", "data-selected-content": true, children: [
+    /* @__PURE__ */ jsxs7("div", { "data-thought-excerpt": true, hidden: expanded, children: [
+      excerpt.heading && /* @__PURE__ */ jsx8("h3", { children: excerpt.heading }),
+      /* @__PURE__ */ jsx8("p", { children: excerpt.text })
+    ] }),
+    /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": expanded,
+        "aria-controls": fullId,
+        onClick: () => setExpanded(!expanded),
+        children: expanded ? "Show less" : "Show more"
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        id: fullId,
+        "data-thought-full": true,
+        hidden: !expanded,
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    )
+  ] });
+}
+
+// src/ViewerHost.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function readableLabel(node, rendered) {
+  const template = document.createElement("template");
+  template.innerHTML = rendered[node.key] ?? "";
+  return template.content.querySelector("h1, h2, h3, h4, h5, h6")?.textContent ?? node.title;
+}
+function Inspector({
+  context,
+  rendered,
+  getLabel
+}) {
+  const { active, graph, onFocus, onFragment } = context;
+  return /* @__PURE__ */ jsxs8(
+    "section",
+    {
+      "data-live-inspector": true,
+      "data-selected-key": active?.key,
+      "aria-label": "Live thought inspector",
+      children: [
+        /* @__PURE__ */ jsx9("h2", { children: "Selected thought" }),
+        active && // biome-ignore lint/a11y/noStaticElementInteractions lint/a11y/useKeyWithClickEvents: Delegate native anchor activation, including keyboard-generated clicks; this container is not a control.
+        /* @__PURE__ */ jsx9(
+          "div",
+          {
+            onClick: (event) => {
+              const link = event.target.closest("a");
+              const href = link?.getAttribute("href");
+              if (href?.startsWith("#")) {
+                event.preventDefault();
+                try {
+                  onFragment(decodeURIComponent(href.slice(1)));
+                } catch {
+                }
+              }
+            },
+            children: /* @__PURE__ */ jsx9(SelectedThought, { html: rendered[active.key] ?? "" }, active.key)
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          ViewerConnections,
+          {
+            graph,
+            active,
+            onFocus,
+            getLabel: getLabel ?? ((node) => readableLabel(node, rendered))
+          }
+        )
+      ]
+    }
+  );
+}
+function ViewerHost({
+  graph,
+  rendered,
+  inspectorId = "default",
+  getLabel
+}) {
+  const [targets, setTargets] = useState4([]);
+  useEffect5(() => {
+    setTargets(
+      [
+        ...document.querySelectorAll(
+          "[data-lensmap-inspector-target]"
+        )
+      ].filter(
+        (target) => target.dataset.lensmapInspectorTarget === inspectorId
+      )
+    );
+  }, [inspectorId]);
+  return /* @__PURE__ */ jsx9(
+    Viewer,
+    {
+      graph,
+      embedded: true,
+      showInspector: false,
+      renderExternalInspector: (context) => targets.map(
+        (target, index) => createPortal(
+          /* @__PURE__ */ jsx9(
+            Inspector,
+            {
+              context,
+              rendered,
+              getLabel
+            }
+          ),
+          target,
+          String(index)
+        )
+      )
+    }
+  );
+}
+export {
+  ViewerHost as default
+};