@lensmap/starlight 0.2.1 → 0.4.0

package/dist/ViewerHost.js

@@ -1,5 +1,5 @@
 // src/ViewerHost.tsx
-import { useEffect as useEffect5, useState as useState4 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 import { createPortal } from "react-dom";
 
 // ../../apps/web/src/document/layout.ts
@@ -10,8 +10,182 @@ import {
   forceY
 } from "d3-force";
 
+// ../../apps/web/src/node-style.ts
+function positionAxis(node, axis) {
+  const value = node.style?.[axis];
+  return value === "auto" ? void 0 : value ?? node.position?.[axis];
+}
+function baseRadius(style) {
+  return 43 * (typeof style?.scale === "number" ? style.scale : 1);
+}
+var properties = /^(color|background-color|font-family|font-size|font-weight|font-style|line-height|border(?:-(?:color|width|style|top|right|bottom|left)(?:-(?:color|width|style))?)?|padding(?:-(?:top|right|bottom|left))?)$/;
+var applied = /* @__PURE__ */ new WeakMap();
+function applyNodeStyle(element, style, borderColour) {
+  for (const property of applied.get(element) ?? [])
+    element.style.removeProperty(property);
+  if (borderColour) element.style.borderColor = borderColour;
+  applied.set(
+    element,
+    (style?.declarations ?? []).map((d) => d.property).filter((p) => properties.test(p))
+  );
+  for (const declaration of style?.declarations ?? []) {
+    if (properties.test(declaration.property))
+      element.style.setProperty(
+        declaration.property,
+        declaration.value,
+        declaration.important ? "important" : ""
+      );
+  }
+}
+
 // ../../apps/web/src/document/subtree.ts
 import { polygonHull } from "d3-polygon";
+function silhouette(contour, distance, padding) {
+  let low = Infinity;
+  let high = -Infinity;
+  for (const [x, y] of contour) {
+    const theta = Math.atan2(y, distance + x);
+    const half = Math.asin(padding / Math.hypot(distance + x, y));
+    low = Math.min(low, theta - half);
+    high = Math.max(high, theta + half);
+  }
+  return { low, high };
+}
+function planSubtree(key, children, fullCircle, step, padding) {
+  if (children.length === 0) return { key, contour: [[0, 0]], children: [] };
+  const atDistance = (distance2) => children.map((child) => silhouette(child.contour, distance2, padding));
+  const width = (bounds2) => bounds2.reduce((sum, bound) => sum + bound.high - bound.low, 0);
+  let distance = step;
+  let bounds = atDistance(distance);
+  const span = fullCircle ? Math.PI * 2 : Math.min(Math.PI, Math.max(Math.PI * 2 / 3, width(bounds)));
+  if (width(bounds) > span) {
+    let lower = distance;
+    while (width(atDistance(distance)) > span) distance *= 2;
+    while (distance - lower > 0.5) {
+      const middle = (lower + distance) / 2;
+      if (width(atDistance(middle)) > span) lower = middle;
+      else distance = middle;
+    }
+    bounds = atDistance(distance);
+  }
+  const required = width(bounds);
+  const gap = fullCircle ? (span - required) / children.length : children.length > 1 ? (span - required) / (children.length - 1) : 0;
+  let cursor = fullCircle ? -Math.PI / 2 + bounds[0].low : children.length === 1 ? -required / 2 : -span / 2;
+  const contour = [[0, 0]];
+  const placements = children.map((subtree, index) => {
+    const bound = bounds[index];
+    const angle = cursor - bound.low;
+    cursor += bound.high - bound.low + gap;
+    const cos = Math.cos(angle), sin = Math.sin(angle);
+    for (const [x, y] of subtree.contour) {
+      contour.push([
+        (distance + x) * cos - y * sin,
+        (distance + x) * sin + y * cos
+      ]);
+    }
+    return { subtree, angle, distance };
+  });
+  return {
+    key,
+    contour: polygonHull(contour) ?? contour,
+    children: placements
+  };
+}
+
+// ../../apps/web/src/document/layout.ts
+function layoutGraph(nodes, edges) {
+  if (nodes.length === 0) return { nodes: [], edges };
+  const byKey2 = new Map(nodes.map((node) => [node.key, node]));
+  const children = new Map(nodes.map((node) => [node.key, []]));
+  const childKeys = /* @__PURE__ */ new Set();
+  for (const edge of edges) {
+    if (edge.kind !== "branch") continue;
+    const child = byKey2.get(edge.to);
+    if (child) children.get(edge.from)?.push(child);
+    childKeys.add(edge.to);
+  }
+  const roots = nodes.filter((node) => !childKeys.has(node.key));
+  const placed = /* @__PURE__ */ new Map();
+  const maximum = Math.max(43, ...nodes.map((n) => n.baseRadius ?? 43));
+  const step = Math.max(180, maximum * 2 + 24);
+  const padding = Math.max(56, maximum + 13);
+  function plan(node, isRoot) {
+    const descendants = (children.get(node.key) ?? []).map(
+      (child) => plan(child, false)
+    );
+    return planSubtree(node.key, descendants, isRoot, step, padding);
+  }
+  const plans = roots.map((root) => plan(root, true));
+  function seed(node, subtree, point, heading, isRoot) {
+    const pinX = positionAxis(node, "x");
+    const pinY = positionAxis(node, "y");
+    const actual = { x: pinX ?? point.x, y: pinY ?? point.y };
+    placed.set(node.key, {
+      key: node.key,
+      x: actual.x,
+      y: actual.y,
+      targetX: actual.x,
+      targetY: actual.y,
+      fx: pinX !== void 0 || isRoot ? actual.x : void 0,
+      fy: pinY !== void 0 || isRoot ? actual.y : void 0
+    });
+    subtree.children.forEach((placement) => {
+      const child = byKey2.get(placement.subtree.key);
+      if (!child)
+        throw new Error(
+          `Automatic layout could not find child "${placement.subtree.key}".`
+        );
+      const angle = heading + placement.angle;
+      const target = {
+        x: actual.x + Math.cos(angle) * placement.distance,
+        y: actual.y + Math.sin(angle) * placement.distance
+      };
+      const childPoint = {
+        x: positionAxis(child, "x") ?? target.x,
+        y: positionAxis(child, "y") ?? target.y
+      };
+      const direction = childPoint.x === actual.x && childPoint.y === actual.y ? angle : Math.atan2(childPoint.y - actual.y, childPoint.x - actual.x);
+      seed(child, placement.subtree, target, direction, false);
+    });
+  }
+  const anchor = {
+    x: positionAxis(nodes[0], "x") ?? 0,
+    y: positionAxis(nodes[0], "y") ?? 0
+  };
+  const rootRadius = roots.length > 1 ? step * 2 / Math.sin(Math.PI / roots.length) : 0;
+  roots.forEach((root, index) => {
+    const angle = -Math.PI / 2 + Math.PI * 2 * index / roots.length;
+    seed(
+      root,
+      plans[index],
+      {
+        x: anchor.x + Math.cos(angle) * rootRadius,
+        y: anchor.y + rootRadius + Math.sin(angle) * rootRadius
+      },
+      0,
+      true
+    );
+  });
+  const simulation = forceSimulation([...placed.values()]).stop().force("x", forceX((node) => node.targetX).strength(0.2)).force("y", forceY((node) => node.targetY).strength(0.2)).force("collide", forceCollide(padding).iterations(2));
+  const ticks = Math.ceil(
+    Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())
+  );
+  simulation.tick(ticks);
+  return {
+    nodes: nodes.map(({ position, ...node }) => {
+      const point = placed.get(node.key);
+      if (!point)
+        throw new Error(`Automatic layout could not place node "${node.key}".`);
+      return {
+        ...node,
+        ...position ? { position } : {},
+        x: point.x,
+        y: point.y
+      };
+    }),
+    edges
+  };
+}
 
 // ../../apps/web/src/Viewer.tsx
 import {
@@ -23,11 +197,11 @@ import {
   useCallback as useCallback2,
   useEffect as useEffect4,
   useEffectEvent as useEffectEvent2,
-  useId as useId3,
-  useLayoutEffect,
+  useId as useId2,
+  useLayoutEffect as useLayoutEffect2,
   useMemo,
-  useRef as useRef4,
-  useState as useState2
+  useRef as useRef5,
+  useState as useState3
 } from "react";
 import Markdown2 from "react-markdown";
 
@@ -93,7 +267,11 @@ function ConnectionChooser({
               /* @__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),
+                  connectionWording(
+                    route.edge.type,
+                    route.direction,
+                    route.edge.presentation
+                  ),
                   ` (${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" })
@@ -134,69 +312,197 @@ function ConnectionChooser({
 // ../../apps/web/src/ConnectionGap.tsx
 import { useId } from "react";
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function BlockingMarker({
-  id,
+function Shape({
+  kind,
   colour,
-  gap = false
+  cut = 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" })
-      ] })
-    }
-  );
+  if (kind === "circle")
+    return /* @__PURE__ */ jsx2(
+      "circle",
+      {
+        cx: "-3",
+        cy: "0",
+        r: cut ? 2.5 : 3,
+        fill: cut ? "black" : "none",
+        stroke: cut ? "black" : colour,
+        strokeWidth: cut ? 0 : 1
+      }
+    );
+  if (kind === "diamond")
+    return /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: cut ? "M -0.7 0 L -3 -2.3 L -5.3 0 L -3 2.3 Z" : "M 0 0 L -3 -3 L -6 0 L -3 3 Z",
+        fill: cut ? "black" : "none",
+        stroke: cut ? "black" : colour,
+        strokeWidth: cut ? 0 : 1
+      }
+    );
+  if (kind === "bar")
+    return cut ? /* @__PURE__ */ jsx2("rect", { x: "-4.5", y: "-5", width: "3", height: "10", fill: "black" }) : /* @__PURE__ */ jsxs2("g", { stroke: colour, strokeWidth: "1", children: [
+      /* @__PURE__ */ jsx2("line", { x1: "-5", x2: "-5", y1: "-3", y2: "3" }),
+      /* @__PURE__ */ jsx2("line", { x1: "-1", x2: "-1", y1: "-3", y2: "3" })
+    ] });
+  if (kind === "arrow" && !cut)
+    return /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: "M -5 -3 L 0 0 L -5 3",
+        fill: "none",
+        stroke: colour,
+        strokeWidth: "1"
+      }
+    );
+  return null;
 }
-function ConnectionGap({
+function StyledConnection({
   path,
   points,
+  presentation,
+  width,
+  colour,
   className,
-  markerId,
-  children
+  attributes,
+  continuation
 }) {
   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",
+  const start = continuation === "incoming" ? "none" : presentation.startMarker;
+  const end = continuation === "outgoing" ? "none" : presentation.endMarker;
+  const paint = presentation.lineColor === "auto" ? colour : presentation.lineColor;
+  const marker = (kind, side, cut = false) => /* @__PURE__ */ jsx2(
+    "marker",
+    {
+      id: `${id}-${kind}-${side}`,
+      markerUnits: "strokeWidth",
+      markerWidth: 14,
+      markerHeight: 14,
+      viewBox: "-7 -7 14 14",
+      refX: "0",
+      refY: "0",
+      orient: "auto-start-reverse",
+      overflow: "visible",
+      children: /* @__PURE__ */ jsx2(Shape, { kind, colour: paint, cut })
+    },
+    side
+  );
+  const pad = Math.max(64, width * 16);
+  const x = Math.min(...points.map((p) => p.x)) - pad;
+  const y = Math.min(...points.map((p) => p.y)) - pad;
+  const w = Math.max(...points.map((p) => p.x)) - x + pad;
+  const h = Math.max(...points.map((p) => p.y)) - y + pad;
+  const style = { strokeWidth: width, color: paint };
+  return /* @__PURE__ */ jsxs2(
+    "g",
+    {
+      "data-presentation-width": width,
+      mask: continuation ? `url(#${id}-fade)` : void 0,
+      children: [
+        /* @__PURE__ */ jsxs2("defs", { children: [
+          continuation && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsxs2(
+              "linearGradient",
+              {
+                id: `${id}-gradient`,
+                gradientUnits: "userSpaceOnUse",
+                x1: points[0].x,
+                y1: points[0].y,
+                x2: points[1].x,
+                y2: points[1].y,
+                children: [
+                  /* @__PURE__ */ jsx2("stop", { offset: "0%", stopColor: "white", stopOpacity: 0.65 }),
+                  /* @__PURE__ */ jsx2("stop", { offset: "100%", stopColor: "white", stopOpacity: 0 })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "mask",
+              {
+                id: `${id}-fade`,
+                maskUnits: "userSpaceOnUse",
+                x,
+                y,
+                width: w,
+                height: h,
+                style: { maskType: "luminance" },
+                children: /* @__PURE__ */ jsx2(
+                  "rect",
+                  {
+                    x,
+                    y,
+                    width: w,
+                    height: h,
+                    fill: `url(#${id}-gradient)`
+                  }
+                )
+              }
+            )
+          ] }),
+          marker(start, "start"),
+          marker(end, "end"),
+          marker(start, "start-cut", true),
+          marker(end, "end-cut", true),
+          /* @__PURE__ */ jsxs2(
+            "mask",
             {
-              d: path,
-              className,
-              style: { stroke: "none", opacity: 1, filter: "none" },
-              markerEnd: `url(#${markerId})`
+              id: `${id}-mask`,
+              maskUnits: "userSpaceOnUse",
+              x,
+              y,
+              width: w,
+              height: h,
+              style: { maskType: "luminance" },
+              children: [
+                /* @__PURE__ */ jsx2("rect", { x, y, width: w, height: h, fill: "white" }),
+                /* @__PURE__ */ jsx2(
+                  "path",
+                  {
+                    d: path,
+                    fill: "none",
+                    stroke: "none",
+                    strokeWidth: width,
+                    markerStart: `url(#${id}-${start}-start-cut)`,
+                    markerEnd: `url(#${id}-${end}-end-cut)`
+                  }
+                )
+              ]
             }
           )
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx2("g", { mask: `url(#${id})`, children })
-  ] });
+        ] }),
+        /* @__PURE__ */ jsxs2(
+          "g",
+          {
+            visibility: width === 0 ? "hidden" : void 0,
+            mask: `url(#${id}-mask)`,
+            children: [
+              /* @__PURE__ */ jsx2(
+                "path",
+                {
+                  d: path,
+                  className: "edge-halo",
+                  style: { strokeWidth: width * 3.2 }
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "path",
+                {
+                  ...attributes,
+                  d: path,
+                  className,
+                  stroke: paint,
+                  style,
+                  markerStart: start === "none" ? void 0 : `url(#${id}-${start}-start)`,
+                  markerEnd: end === "none" ? void 0 : `url(#${id}-${end}-end)`,
+                  strokeLinecap: presentation.lineStyle === "dotted" ? "round" : void 0,
+                  strokeDasharray: presentation.lineStyle === "dotted" ? `0 ${width * 2.5}` : presentation.lineStyle === "dashed" ? `${width * 2.8} ${width * 2.4}` : void 0
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 
 // ../../apps/web/src/clearance.ts
@@ -204,7 +510,9 @@ 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 radii = points.map(
+    (point) => point.scale * (point.baseRadius ?? nodeRadius2)
+  );
   const minimum = radii.map((radius2) => Math.min(radius2, 2));
   const limited = [...radii];
   for (let i = 0; i < points.length; i++) {
@@ -230,7 +538,7 @@ function limitMagnification(points, nodeRadius2, strength) {
   }
   return points.map((point, index) => ({
     ...point,
-    scale: point.scale + (limited[index] / nodeRadius2 - point.scale) * amount
+    scale: point.scale + (limited[index] / (point.baseRadius ?? nodeRadius2) - point.scale) * amount
   }));
 }
 
@@ -242,6 +550,39 @@ function connectionAppearance(type, continuation) {
     ...continuation !== "outgoing" && (type === "precedes" || type === "prevents") ? { end: type === "precedes" ? "arrow" : "bar" } : {}
   };
 }
+function fallbackPresentation(type) {
+  const appearance = connectionAppearance(type);
+  return {
+    strokeWidth: 2.5,
+    lineStyle: appearance.dashed ? "dashed" : "solid",
+    lineColor: "auto",
+    startMarker: appearance.start ?? "none",
+    endMarker: appearance.end ?? "none",
+    text: "connected to",
+    reverseText: "connected to"
+  };
+}
+
+// ../../apps/web/src/connection-style.ts
+function markerClearance(marker, width) {
+  if (marker === "arrow") return width * Math.hypot(5, 3) / 6;
+  if (marker === "diamond") return width / Math.SQRT2;
+  return marker === "circle" ? width / 2 : 0;
+}
+function resolveConnectionWidth(value, root, width, height) {
+  if (typeof value === "number") return value;
+  const container = document.createElement("div");
+  container.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;height:0;overflow:hidden";
+  container.style.width = `${Math.hypot(width, height) / Math.SQRT2}px`;
+  const probe = document.createElement("div");
+  probe.style.width = CSS.supports("width", value) ? value : `calc((${value}) * 1px)`;
+  probe.style.height = "0";
+  container.append(probe);
+  root.append(container);
+  const result = Number.parseFloat(getComputedStyle(probe).width);
+  container.remove();
+  return Number.isFinite(result) ? Math.max(0, result) : 0;
+}
 
 // ../../apps/web/src/edge-routing.ts
 function edgeLanes(edges) {
@@ -296,10 +637,10 @@ function zoomCamera(camera, 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;
+  const minX = Math.min(...points.map((p) => p.x - (p.baseRadius ?? radius2)));
+  const maxX = Math.max(...points.map((p) => p.x + (p.baseRadius ?? radius2)));
+  const minY = Math.min(...points.map((p) => p.y - (p.baseRadius ?? radius2)));
+  const maxY = Math.max(...points.map((p) => p.y + (p.baseRadius ?? radius2)));
   return {
     x: (minX + maxX) / 2,
     y: (minY + maxY) / 2,
@@ -316,7 +657,6 @@ function fitCamera(points, size, radius2) {
 
 // ../../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,
@@ -325,25 +665,25 @@ function NeighbourhoodContinuations({
   nodes,
   nodeRadius: nodeRadius2,
   previewEdges,
-  markerPrefix
+  widths
 }) {
-  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 segments = continuations.flatMap((continuation) => {
     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 width = widths.get(continuation.edge.key) ?? 2.5;
+    const presentation = continuation.edge.presentation ?? fallbackPresentation(continuation.edge.type);
+    const clearance = markerClearance(
+      incoming ? presentation.endMarker : presentation.startMarker,
+      width
+    );
+    const radius2 = (byKey2.get(continuation.at)?.baseRadius ?? nodeRadius2) * point.scale + clearance;
     const near = { x: point.x + ux * radius2, y: point.y + uy * radius2 };
     const far = {
       x: near.x + ux * 70 * point.scale,
@@ -353,91 +693,49 @@ function NeighbourhoodContinuations({
     return [
       {
         ...continuation,
-        appearance,
+        presentation,
         incoming,
         near,
         far,
         target,
-        description: `${label(source)} ${connectionWording2(continuation.edge.type, "outgoing")} ${label(target)}`,
-        id: `${prefix}-${index}`,
+        description: `${label(source)} ${connectionWording2(continuation.edge.type, "outgoing", continuation.edge.presentation)} ${label(target)}`,
         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(
+  return /* @__PURE__ */ jsx3("g", { className: "continuations", children: segments.map((segment) => {
+    const edgeClass = `edge continuation ${segment.edge.kind} ${previewEdges.has(segment.edge.key) ? "connection-preview" : ""}`;
+    return /* @__PURE__ */ jsxs3("g", { children: [
+      /* @__PURE__ */ jsx3(
+        StyledConnection,
+        {
+          path: segment.path,
+          points: [segment.near, segment.far],
+          presentation: segment.presentation,
+          width: widths.get(segment.edge.key) ?? 2.5,
+          colour: colours[segment.target.branch],
+          className: edgeClass,
+          continuation: segment.incoming ? "incoming" : "outgoing",
+          attributes: {
+            "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",
+            "data-direction": segment.incoming ? "incoming" : "outgoing"
+          }
+        }
+      ),
+      /* @__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",
+          className: "edge-hit",
+          "data-continuation-hit": segment.edge.key,
           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
+          children: /* @__PURE__ */ jsx3("title", { children: segment.description })
         }
-      );
-      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);
-    })
-  ] });
+      )
+    ] }, segment.edge.key);
+  }) });
 }
 
 // ../../apps/web/src/navigation.ts
@@ -557,9 +855,14 @@ function neighbourhood(graph, key, nodeRadius2 = 43) {
     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 maximum = Math.max(
+    nodeRadius2,
+    ...graph.nodes.filter((n) => visible.has(n.key)).map((n) => n.baseRadius ?? nodeRadius2)
+  );
   const radius2 = Math.max(
+    (centre.baseRadius ?? nodeRadius2) + maximum + 24,
     260,
-    (2 * nodeRadius2 + 24) / (2 * Math.sin(Math.PI / Math.max(2, neighbours.length)))
+    (2 * maximum + 24) / (2 * Math.sin(Math.PI / Math.max(2, neighbours.length)))
   );
   const nodes = [
     { ...centre, x: 0, y: 0 },
@@ -594,6 +897,133 @@ function neighbourhood(graph, key, nodeRadius2 = 43) {
   return { nodes, edges, continuations };
 }
 
+// ../../apps/web/src/responsive-style.ts
+import {
+  resolveNodePresentation
+} from "@lensmap/document";
+var conditionKey = (condition) => JSON.stringify([condition.kind, condition.query]);
+function styleConditions(graph) {
+  const conditions = /* @__PURE__ */ new Map();
+  for (const node of graph.nodes)
+    for (const rule of node.style?.rules ?? [])
+      for (const condition of rule.conditions ?? [])
+        conditions.set(conditionKey(condition), condition);
+  return [...conditions].sort(([a], [b]) => a.localeCompare(b)).map(([, c]) => c);
+}
+var geometryKey = (graph) => JSON.stringify({
+  nodes: graph.nodes.map((node) => [
+    node.key,
+    positionAxis(node, "x"),
+    positionAxis(node, "y"),
+    node.baseRadius ?? 43
+  ]),
+  edges: graph.edges.map((edge) => [edge.key, edge.from, edge.to, edge.kind])
+});
+var placementKey = (graph) => JSON.stringify(graph.nodes.map((node) => [node.key, node.x, node.y]));
+function resolveGraphPresentation(input, matches, measured = /* @__PURE__ */ new Map(), previous) {
+  const nodes = input.nodes.map((node) => {
+    const style = node.style?.rules ? resolveNodePresentation(node.style.rules, matches) : node.style;
+    const radius2 = (style?.scale === "auto" ? measured.get(node.key) : void 0) ?? baseRadius(style);
+    return style === node.style && radius2 === (node.baseRadius ?? 43) ? node : { ...node, style, baseRadius: radius2 };
+  });
+  const next = { nodes, edges: input.edges };
+  if (previous && placementKey(previous.input) === placementKey(input) && geometryKey(previous.graph) === geometryKey(next)) {
+    const points = new Map(
+      previous.graph.nodes.map((node) => [node.key, node])
+    );
+    return {
+      ...next,
+      nodes: nodes.map((node) => ({
+        ...node,
+        x: points.get(node.key)?.x ?? node.x,
+        y: points.get(node.key)?.y ?? node.y
+      }))
+    };
+  }
+  if (geometryKey(input) === geometryKey(next))
+    return nodes.every((node, i) => node === input.nodes[i]) ? input : next;
+  return layoutGraph(nodes, input.edges);
+}
+function createStyleEnvironment(conditions, changed) {
+  const media = /* @__PURE__ */ new Map();
+  const flags = /* @__PURE__ */ new Map();
+  const host = document.createElement("div");
+  host.setAttribute("aria-hidden", "true");
+  host.style.cssText = "position:fixed;left:-100000px;top:0;visibility:hidden;pointer-events:none;container-type:size;box-sizing:content-box;padding:0;border:0;min-width:0;max-width:none;min-height:0;max-height:none;width:0;height:0;";
+  const shadow = host.attachShadow({ mode: "open" });
+  const sheet = new CSSStyleSheet();
+  const sheetRules = [];
+  for (const [index, condition] of conditions.entries()) {
+    const key = conditionKey(condition);
+    if (condition.kind === "media") {
+      media.set(key, matchMedia(condition.query));
+    } else if (condition.kind === "container") {
+      const id = `query-${index}`;
+      const text = `@container ${condition.query}{#${id}{--lensmap-query-match:1}}`;
+      try {
+        const check = new CSSStyleSheet();
+        check.insertRule(text);
+        const outer = check.cssRules[0];
+        if (!(outer instanceof CSSContainerRule) || outer.containerName || outer.cssRules.length !== 1)
+          continue;
+        const rule = outer.cssRules[0];
+        if (!(rule instanceof CSSStyleRule) || rule.selectorText !== `#${id}` || rule.style.length !== 1 || rule.style.getPropertyValue("--lensmap-query-match") !== "1")
+          continue;
+        const flag = document.createElement("i");
+        flag.id = id;
+        shadow.append(flag);
+        flags.set(key, flag);
+        sheetRules.push(text);
+      } catch {
+      }
+    }
+  }
+  sheet.replaceSync(sheetRules.join("\n"));
+  shadow.adoptedStyleSheets = [sheet];
+  if (flags.size) document.body.append(host);
+  let previous = /* @__PURE__ */ new Map();
+  let context;
+  const refresh = () => {
+    if (context) {
+      const style = getComputedStyle(context);
+      host.style.font = style.font;
+      host.style.writingMode = style.writingMode;
+    }
+    const next = /* @__PURE__ */ new Map();
+    for (const condition of conditions) {
+      const key = conditionKey(condition);
+      const flag = flags.get(key);
+      next.set(
+        key,
+        media.get(key)?.matches ?? (flag ? getComputedStyle(flag).getPropertyValue("--lensmap-query-match").trim() === "1" : false)
+      );
+    }
+    if (JSON.stringify([...previous]) !== JSON.stringify([...next])) {
+      previous = next;
+      changed?.(next);
+    }
+  };
+  for (const query of media.values()) query.addEventListener("change", refresh);
+  window.addEventListener("resize", refresh);
+  document.fonts.addEventListener("loadingdone", refresh);
+  return {
+    matches: (condition) => previous.get(conditionKey(condition)) ?? false,
+    resize(width, height, element) {
+      context = element;
+      host.style.width = `${width}px`;
+      host.style.height = `${height}px`;
+      refresh();
+    },
+    dispose() {
+      for (const query of media.values())
+        query.removeEventListener("change", refresh);
+      window.removeEventListener("resize", refresh);
+      document.fonts.removeEventListener("loadingdone", refresh);
+      host.remove();
+    }
+  };
+}
+
 // ../../apps/web/src/SidebarResizeHandle.tsx
 import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
@@ -794,6 +1224,48 @@ function useMapKeyboard(ref, controls) {
   return { stop };
 }
 
+// ../../apps/web/src/useNodeStyleMatches.ts
+import { useLayoutEffect, useRef as useRef4, useState as useState2 } from "react";
+function useNodeStyleMatches(graph, canvas, size) {
+  const conditions = styleConditions(graph);
+  const signature = JSON.stringify(conditions);
+  const environment = useRef4(null);
+  const [matches, setMatches] = useState2(
+    /* @__PURE__ */ new Map()
+  );
+  const refreshSize = () => {
+    const element = canvas.current;
+    if (!element || !environment.current) return;
+    const style = getComputedStyle(element);
+    environment.current.resize(
+      element.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight),
+      element.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom),
+      element
+    );
+  };
+  useLayoutEffect(() => {
+    const conditions2 = JSON.parse(signature);
+    if (!conditions2.length) {
+      setMatches((previous) => previous.size ? /* @__PURE__ */ new Map() : previous);
+      return;
+    }
+    const current = createStyleEnvironment(conditions2, setMatches);
+    environment.current = current;
+    refreshSize();
+    return () => {
+      current.dispose();
+      if (environment.current === current) environment.current = null;
+    };
+  }, [signature]);
+  useLayoutEffect(refreshSize, [size.width, size.height]);
+  return {
+    matches,
+    ready: conditions.every(
+      (condition) => matches.has(conditionKey(condition))
+    )
+  };
+}
+
 // ../../apps/web/src/ViewerInspector.tsx
 import { thoughtAnchors } from "@lensmap/document";
 import Markdown from "react-markdown";
@@ -825,8 +1297,9 @@ function ViewerConnections({
             "data-focus-key": key,
             onClick: () => onFocus(key),
             children: [
-              connectionWording3(edge.type, direction),
-              " \xB7 ",
+              connectionWording3(edge.type, direction, edge.presentation),
+              " ",
+              "\xB7 ",
               getLabel(node)
             ]
           },
@@ -935,11 +1408,11 @@ function reconcileViewer(previous, next, selected, camera, mode) {
 }
 
 // ../../apps/web/src/Viewer.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { 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,
+  graph: inputGraph,
   embedded = false,
   navigationControls,
   thoughtLink,
@@ -955,57 +1428,94 @@ function Viewer({
   renderSidebar,
   renderExternalInspector
 }) {
-  const scope = useId3();
+  const canvas = useRef5(null);
+  const [size, setSize] = useState3({ width: 900, height: 640 });
+  const { matches, ready: presentationReady } = useNodeStyleMatches(
+    inputGraph,
+    canvas,
+    size
+  );
+  const [measured, setMeasured] = useState3(
+    /* @__PURE__ */ new Map()
+  );
+  const previousPresentation = useRef5(null);
+  const graph = useMemo(() => {
+    const resolved = resolveGraphPresentation(
+      inputGraph,
+      (condition) => matches.get(conditionKey(condition)) ?? false,
+      measured,
+      previousPresentation.current ?? void 0
+    );
+    previousPresentation.current = { input: inputGraph, graph: resolved };
+    return resolved;
+  }, [inputGraph, measured, matches]);
+  const scope = useId2();
   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 scene = useRef5(null);
+  const pendingActivation = useRef5(null);
+  const doubleCandidate = useRef5(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(
+  const drag = useRef5(null);
+  const suppressPointerClick = useRef5(false);
+  const [widths, setWidths] = useState3(/* @__PURE__ */ new Map());
+  useLayoutEffect2(() => {
+    const root = canvas.current;
+    if (!root) return;
+    setWidths(
+      new Map(
+        graph.edges.map((edge) => [
+          edge.key,
+          resolveConnectionWidth(
+            edge.presentation?.strokeWidth ?? 2.5,
+            root,
+            size.width,
+            size.height
+          )
+        ])
+      )
+    );
+  }, [graph, size]);
+  const [camera, setCamera] = useState3(
     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(
+  const [selected, setSelected] = useState3(
     restoredNode?.key ?? entryNode?.key ?? nodes[0]?.key ?? ""
   );
-  const [sidebarWidth, setSidebarWidth] = useState2(340);
-  const [strength, setStrength] = useState2(initialState?.strength ?? 1.1);
-  const [neighbourhoodStrength, setNeighbourhoodStrength] = useState2(
+  const [sidebarWidth, setSidebarWidth] = useState3(340);
+  const [strength, setStrength] = useState3(initialState?.strength ?? 1.1);
+  const [neighbourhoodStrength, setNeighbourhoodStrength] = useState3(
     initialState?.neighbourhoodStrength ?? 1.1
   );
-  const [overview, setOverview] = useState2(
+  const [overview, setOverview] = useState3(
     initialState?.overview ?? initialOverview ?? false
   );
-  const [inNeighbourhood, setInNeighbourhood] = useState2(
+  const [inNeighbourhood, setInNeighbourhood] = useState3(
     !!restoredNode && (initialState?.inNeighbourhood ?? false)
   );
-  const [neighbourhoodCamera, setNeighbourhoodCamera] = useState2(
+  const [neighbourhoodCamera, setNeighbourhoodCamera] = useState3(
     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 [dragging, setDragging] = useState3(false);
+  const [message, setMessage] = useState3("");
+  const [keyboardTarget, setKeyboardTarget] = useState3();
+  const [keyboardActive, setKeyboardActive] = useState3(false);
+  const [maximumPanSpeed, setMaximumPanSpeed] = useState3(900);
+  const [connectionChoice, setConnectionChoice] = useState3();
   const dismissConnectionChoice = useCallback2(() => {
     const focused = document.activeElement;
     if (focused instanceof Element && canvas.current?.contains(focused) && focused.closest("[data-connection-chooser]")) {
@@ -1013,7 +1523,7 @@ function Viewer({
     }
     setConnectionChoice(void 0);
   }, []);
-  const returnOverview = useRef4(initialState?.returnOverview ?? false);
+  const returnOverview = useRef5(initialState?.returnOverview ?? false);
   const reportState = useEffectEvent2(
     () => onStateChange?.({
       selected,
@@ -1063,6 +1573,58 @@ function Viewer({
     () => inNeighbourhood ? neighbourhood(graph, selected, nodeRadius) : null,
     [graph, inNeighbourhood, selected]
   );
+  const measurementView = inNeighbourhood ? selected : null;
+  useLayoutEffect2(() => {
+    let alive = true;
+    const measure = () => {
+      if (!alive || !canvas.current) return;
+      const visible = /* @__PURE__ */ new Map();
+      canvas.current.querySelectorAll(".node[data-auto-size='true']").forEach((element) => {
+        const key = element.dataset.node;
+        if (!key || !graph.nodes.some((node) => node.key === key)) return;
+        const clone = element.cloneNode(true);
+        clone.removeAttribute("id");
+        clone.classList.remove("selected", "connected");
+        clone.style.cssText = element.style.cssText;
+        Object.assign(clone.style, {
+          transform: "none",
+          visibility: "hidden",
+          position: "absolute",
+          width: "max-content",
+          maxWidth: "260px",
+          height: "auto",
+          minHeight: "0",
+          left: "0",
+          top: "0"
+        });
+        canvas.current?.append(clone);
+        const box = clone.getBoundingClientRect();
+        visible.set(
+          key,
+          Math.max(43, Math.ceil(Math.hypot(box.width, box.height) / 2))
+        );
+        clone.remove();
+      });
+      setMeasured((previous) => {
+        const next = /* @__PURE__ */ new Map();
+        for (const node of graph.nodes) {
+          if (node.style?.scale !== "auto") continue;
+          const radius2 = visible.get(node.key) ?? previous.get(node.key);
+          if (radius2 !== void 0) next.set(node.key, radius2);
+        }
+        return JSON.stringify([...previous]) === JSON.stringify([...next]) ? previous : next;
+      });
+    };
+    measure();
+    void document.fonts.ready.then(measure);
+    document.fonts.addEventListener("loadingdone", measure);
+    window.addEventListener("resize", measure);
+    return () => {
+      alive = false;
+      document.fonts.removeEventListener("loadingdone", measure);
+      window.removeEventListener("resize", measure);
+    };
+  }, [graph, measurementView, size.width, size.height]);
   useEffect4(() => cancelActivation, [cancelActivation]);
   useEffect4(() => {
     const element = canvas.current;
@@ -1106,7 +1668,19 @@ function Viewer({
     keyboard.stop,
     dismissConnectionChoice
   ]);
-  const shownCamera = inNeighbourhood ? neighbourhoodCamera : overview ? fitCamera(nodes, size, nodeRadius) : camera;
+  const overviewPoints = nodes.flatMap((node) => {
+    const loops = edges.filter(
+      (edge) => edge.from === node.key && edge.to === node.key
+    );
+    if (!node.style || loops.length === 0) return [node];
+    const reach = (node.baseRadius ?? nodeRadius) * (3 + Math.max(...loops.map((edge) => lanes.get(edge.key)?.index ?? 0)));
+    return [
+      node,
+      { x: node.x - reach, y: node.y - reach, baseRadius: 0 },
+      { x: node.x + reach, y: node.y - reach, baseRadius: 0 }
+    ];
+  });
+  const shownCamera = inNeighbourhood ? neighbourhoodCamera : overview ? fitCamera(overviewPoints, size, nodeRadius) : camera;
   const projected = (local?.nodes ?? nodes).map((node) => ({
     ...projectPoint(
       node,
@@ -1114,7 +1688,8 @@ function Viewer({
       size,
       overview ? 0 : shownStrength
     ),
-    node
+    node,
+    baseRadius: node.baseRadius
   }));
   const circles = overview ? projected : limitMagnification(projected, nodeRadius, shownStrength);
   const positions = new Map(circles.map((point) => [point.node.key, point]));
@@ -1296,8 +1871,9 @@ function Viewer({
     if (node) focusNode(node.key);
     else setMessage(`No thought has anchor "${id}".`);
   }
-  const previousGraph = useRef4(graph);
-  const lastRequest = useRef4(
+  const previousGraph = useRef5(graph);
+  const previousInput = useRef5(inputGraph);
+  const lastRequest = useRef5(
     void 0
   );
   const focusedBeforeUpdate = typeof document === "undefined" ? null : document.activeElement;
@@ -1309,9 +1885,10 @@ function Viewer({
       graph,
       selected,
       camera,
-      updateMode
+      previousInput.current === inputGraph ? "live" : updateMode
     );
     previousGraph.current = graph;
+    previousInput.current = inputGraph;
     cancelActivation();
     keyboard.stop();
     stopDrag();
@@ -1323,11 +1900,20 @@ function Viewer({
       setInNeighbourhood(false);
     setMessage("");
   });
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     reconcileGraph();
     if (hadViewerFocus && focusedBeforeUpdate && !focusedBeforeUpdate.isConnected)
       canvas.current?.focus({ preventScroll: true });
   });
+  const initializedPresentation = useRef5(false);
+  useLayoutEffect2(() => {
+    if (!presentationReady || initializedPresentation.current) return;
+    initializedPresentation.current = true;
+    if (entryNode && !initialState)
+      setCamera(
+        (current) => current.x === entryNode.x && current.y === entryNode.y ? current : { ...current, x: entryNode.x, y: entryNode.y }
+      );
+  }, [presentationReady, entryNode, initialState]);
   const receiveFocus = useEffectEvent2(() => {
     if (!focusRequest || lastRequest.current?.key === focusRequest.key && lastRequest.current?.sequence === focusRequest.sequence)
       return;
@@ -1347,7 +1933,7 @@ function Viewer({
     setCamera((current) => ({ ...current, x: node.x, y: node.y }));
     setMessage("");
   });
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     receiveFocus();
   });
   function stopDrag() {
@@ -1617,39 +2203,6 @@ function Viewer({
                                 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,
                                     {
@@ -1659,23 +2212,32 @@ function Viewer({
                                       nodes,
                                       nodeRadius,
                                       previewEdges,
-                                      markerPrefix: scope
+                                      widths
                                     }
                                   ),
                                   drawnEdges.map((edge) => {
-                                    const appearance = connectionAppearance(edge.type);
+                                    const presentation = edge.presentation ?? fallbackPresentation(edge.type);
+                                    const width = widths.get(edge.key) ?? 2.5;
+                                    const startClearance = markerClearance(
+                                      presentation.startMarker,
+                                      width
+                                    );
+                                    const endClearance = markerClearance(
+                                      presentation.endMarker,
+                                      width
+                                    );
                                     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 description = `${label(from.node)} ${connectionWording4(edge.type, "outgoing", edge.presentation)} ${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
+                                      x: from.x + dx / distance * ((from.node.baseRadius ?? nodeRadius) * from.scale + startClearance),
+                                      y: from.y + dy / distance * ((from.node.baseRadius ?? nodeRadius) * from.scale + startClearance)
                                     };
-                                    const targetRadius = nodeRadius * to.scale + (appearance.end ? 7 : 0);
+                                    const targetRadius = (to.node.baseRadius ?? nodeRadius) * to.scale + endClearance;
                                     const end = {
                                       x: to.x - dx / distance * targetRadius,
                                       y: to.y - dy / distance * targetRadius
@@ -1687,18 +2249,18 @@ function Viewer({
                                       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 radius2 = (from.node.baseRadius ?? 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 + (radius2 + startClearance) * 0.7,
+                                        y: from.y - (radius2 + startClearance) * 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
+                                        x: from.x - (radius2 + endClearance) * 0.7,
+                                        y: from.y - (radius2 + endClearance) * 0.7
                                       }
                                     ] : [
                                       start,
@@ -1710,37 +2272,25 @@ function Viewer({
                                     ];
                                     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,
+                                      /* @__PURE__ */ jsx7(
+                                        StyledConnection,
                                         {
                                           path,
                                           points,
+                                          presentation,
+                                          width,
+                                          colour: colours[to.node.branch],
                                           className: edgeClass,
-                                          markerId: `${scope}-bar-gap`,
-                                          children: painted
+                                          attributes: {
+                                            "data-edge": `${edge.from}-${edge.to}`,
+                                            "data-edge-key": edge.key,
+                                            "data-kind": edge.kind,
+                                            "data-type": edge.type ?? "connected",
+                                            "data-connection-preview": previewEdges.has(edge.key) ? "true" : void 0
+                                          }
                                         }
-                                      ) : painted,
+                                      ),
                                       /* @__PURE__ */ jsx7(
                                         "path",
                                         {
@@ -1762,6 +2312,15 @@ function Viewer({
                                 "button",
                                 {
                                   type: "button",
+                                  ref: (element) => {
+                                    if (element)
+                                      applyNodeStyle(
+                                        element,
+                                        node.style,
+                                        colours[node.branch]
+                                      );
+                                  },
+                                  "data-auto-size": node.style?.scale === "auto" ? "true" : void 0,
                                   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" : ""}`,
@@ -1772,6 +2331,8 @@ function Viewer({
                                   "aria-pressed": selected === node.key,
                                   title: label(node),
                                   style: {
+                                    width: 2 * (node.baseRadius ?? nodeRadius),
+                                    height: 2 * (node.baseRadius ?? nodeRadius),
                                     left: point.x,
                                     top: point.y,
                                     transform: `translate(-50%, -50%) scale(${point.scale})`,
@@ -1787,6 +2348,7 @@ function Viewer({
                                     else focusNode(node.key);
                                   },
                                   children: [
+                                    node.style?.icon && /* @__PURE__ */ jsx7("span", { className: "node-icon", "aria-hidden": "true", children: node.style.icon }),
                                     node.destination && /* @__PURE__ */ jsx7(
                                       "span",
                                       {
@@ -1822,7 +2384,7 @@ function Viewer({
                                         "aria-hidden": "true"
                                       }
                                     ),
-                                    /* @__PURE__ */ jsx7("span", { children: node.unresolved ? "?" : /* @__PURE__ */ jsx7(
+                                    /* @__PURE__ */ jsx7("span", { className: "node-summary", children: node.unresolved ? "?" : /* @__PURE__ */ jsx7(
                                       Markdown2,
                                       {
                                         allowedElements: [
@@ -1950,7 +2512,7 @@ function Viewer({
 }
 
 // src/SelectedThought.tsx
-import { useId as useId4, useMemo as useMemo2, useState as useState3 } from "react";
+import { useId as useId3, useMemo as useMemo2, useState as useState4 } from "react";
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function readingExcerpt(html) {
   const template = document.createElement("template");
@@ -1967,8 +2529,8 @@ function readingExcerpt(html) {
 }
 function SelectedThought({ html }) {
   const excerpt = useMemo2(() => readingExcerpt(html), [html]);
-  const [expanded, setExpanded] = useState3(false);
-  const fullId = useId4();
+  const [expanded, setExpanded] = useState4(false);
+  const fullId = useId3();
   if (!excerpt) {
     return /* @__PURE__ */ jsx8(
       "div",
@@ -2062,9 +2624,33 @@ function ViewerHost({
   graph,
   rendered,
   inspectorId = "default",
-  getLabel
+  getLabel,
+  mapId
 }) {
-  const [targets, setTargets] = useState4([]);
+  const [liveGraph, setLiveGraph] = useState5(graph);
+  const [stale, setStale] = useState5(false);
+  useEffect5(() => setLiveGraph(graph), [graph]);
+  useEffect5(() => {
+    const hot = import.meta.hot;
+    if (!hot || !mapId) return;
+    const update = (data) => {
+      if (data.id !== mapId) return;
+      setStale(data.stale);
+      const edges = data.edges;
+      if (!data.stale && edges)
+        setLiveGraph((previous) => ({
+          ...previous,
+          edges,
+          nodes: previous.nodes.map((node) => ({
+            ...node,
+            destination: data.nodes?.find((update2) => update2.key === node.key)?.destination
+          }))
+        }));
+    };
+    hot.on("lensmap:vocabulary", update);
+    return () => hot.off("lensmap:vocabulary", update);
+  }, [mapId]);
+  const [targets, setTargets] = useState5([]);
   useEffect5(() => {
     setTargets(
       [
@@ -2076,28 +2662,31 @@ function ViewerHost({
       )
     );
   }, [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)
+  return /* @__PURE__ */ jsxs8("div", { "data-lensmap-stale": String(stale), children: [
+    stale && /* @__PURE__ */ jsx9("p", { role: "status", children: "Connection vocabulary is invalid. Showing the last valid map." }),
+    /* @__PURE__ */ jsx9(
+      Viewer,
+      {
+        graph: liveGraph,
+        embedded: true,
+        showInspector: false,
+        renderExternalInspector: (context) => targets.map(
+          (target, index) => createPortal(
+            /* @__PURE__ */ jsx9(
+              Inspector,
+              {
+                context,
+                rendered,
+                getLabel
+              }
+            ),
+            target,
+            String(index)
+          )
         )
-      )
-    }
-  );
+      }
+    )
+  ] });
 }
 export {
   ViewerHost as default