@lensmap/starlight 0.3.0 → 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,6 +10,34 @@ 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) {
@@ -89,16 +117,17 @@ function layoutGraph(nodes, edges) {
   }
   const plans = roots.map((root) => plan(root, true));
   function seed(node, subtree, point, heading, isRoot) {
-    const actual = node.position ?? point;
-    const fixed = Boolean(node.position) || 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: fixed ? actual.x : void 0,
-      fy: fixed ? actual.y : void 0
+      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);
@@ -111,12 +140,18 @@ function layoutGraph(nodes, edges) {
         x: actual.x + Math.cos(angle) * placement.distance,
         y: actual.y + Math.sin(angle) * placement.distance
       };
-      const childPoint = child.position ?? target;
+      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 = nodes[0].position ?? { x: 0, y: 0 };
+  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;
@@ -152,30 +187,6 @@ function layoutGraph(nodes, edges) {
   };
 }
 
-// ../../apps/web/src/node-style.ts
-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/Viewer.tsx
 import {
   connectionWording as connectionWording4,
@@ -187,10 +198,10 @@ import {
   useEffect as useEffect4,
   useEffectEvent as useEffectEvent2,
   useId as useId2,
-  useLayoutEffect,
+  useLayoutEffect as useLayoutEffect2,
   useMemo,
-  useRef as useRef4,
-  useState as useState2
+  useRef as useRef5,
+  useState as useState3
 } from "react";
 import Markdown2 from "react-markdown";
 
@@ -886,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";
@@ -1086,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";
@@ -1248,41 +1428,46 @@ function Viewer({
   renderSidebar,
   renderExternalInspector
 }) {
-  const [measured, setMeasured] = useState2(
+  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 nodes2 = inputGraph.nodes.map((node) => ({
-      ...node,
-      baseRadius: (node.style?.scale === "auto" ? measured.get(node.key) : void 0) ?? baseRadius(node.style)
-    }));
-    if (!nodes2.some(
-      (node, i) => node.baseRadius !== (inputGraph.nodes[i].baseRadius ?? 43)
-    ))
-      return inputGraph;
-    return layoutGraph(nodes2, inputGraph.edges);
-  }, [inputGraph, measured]);
+    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 [widths, setWidths] = useState2(/* @__PURE__ */ new Map());
-  useLayoutEffect(() => {
+  const drag = useRef5(null);
+  const suppressPointerClick = useRef5(false);
+  const [widths, setWidths] = useState3(/* @__PURE__ */ new Map());
+  useLayoutEffect2(() => {
     const root = canvas.current;
     if (!root) return;
     setWidths(
@@ -1299,38 +1484,38 @@ function Viewer({
       )
     );
   }, [graph, size]);
-  const [camera, setCamera] = useState2(
+  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]")) {
@@ -1338,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,
@@ -1389,15 +1574,14 @@ function Viewer({
     [graph, inNeighbourhood, selected]
   );
   const measurementView = inNeighbourhood ? selected : null;
-  useLayoutEffect(() => {
+  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 || !inputGraph.nodes.some((node) => node.key === key))
-          return;
+        if (!key || !graph.nodes.some((node) => node.key === key)) return;
         const clone = element.cloneNode(true);
         clone.removeAttribute("id");
         clone.classList.remove("selected", "connected");
@@ -1423,7 +1607,7 @@ function Viewer({
       });
       setMeasured((previous) => {
         const next = /* @__PURE__ */ new Map();
-        for (const node of inputGraph.nodes) {
+        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);
@@ -1434,11 +1618,13 @@ function Viewer({
     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);
     };
-  }, [inputGraph, measurementView]);
+  }, [graph, measurementView, size.width, size.height]);
   useEffect4(() => cancelActivation, [cancelActivation]);
   useEffect4(() => {
     const element = canvas.current;
@@ -1685,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;
@@ -1698,9 +1885,10 @@ function Viewer({
       graph,
       selected,
       camera,
-      updateMode
+      previousInput.current === inputGraph ? "live" : updateMode
     );
     previousGraph.current = graph;
+    previousInput.current = inputGraph;
     cancelActivation();
     keyboard.stop();
     stopDrag();
@@ -1712,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;
@@ -1736,7 +1933,7 @@ function Viewer({
     setCamera((current) => ({ ...current, x: node.x, y: node.y }));
     setMessage("");
   });
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     receiveFocus();
   });
   function stopDrag() {
@@ -2315,7 +2512,7 @@ function Viewer({
 }
 
 // src/SelectedThought.tsx
-import { useId as useId3, 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");
@@ -2332,7 +2529,7 @@ function readingExcerpt(html) {
 }
 function SelectedThought({ html }) {
   const excerpt = useMemo2(() => readingExcerpt(html), [html]);
-  const [expanded, setExpanded] = useState3(false);
+  const [expanded, setExpanded] = useState4(false);
   const fullId = useId3();
   if (!excerpt) {
     return /* @__PURE__ */ jsx8(
@@ -2430,8 +2627,8 @@ function ViewerHost({
   getLabel,
   mapId
 }) {
-  const [liveGraph, setLiveGraph] = useState4(graph);
-  const [stale, setStale] = useState4(false);
+  const [liveGraph, setLiveGraph] = useState5(graph);
+  const [stale, setStale] = useState5(false);
   useEffect5(() => setLiveGraph(graph), [graph]);
   useEffect5(() => {
     const hot = import.meta.hot;
@@ -2453,7 +2650,7 @@ function ViewerHost({
     hot.on("lensmap:vocabulary", update);
     return () => hot.off("lensmap:vocabulary", update);
   }, [mapId]);
-  const [targets, setTargets] = useState4([]);
+  const [targets, setTargets] = useState5([]);
   useEffect5(() => {
     setTargets(
       [

package/dist/layout.js

@@ -6,6 +6,15 @@ 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);
+}
+
 // ../../apps/web/src/document/subtree.ts
 import { polygonHull } from "d3-polygon";
 function silhouette(contour, distance, padding) {
@@ -85,16 +94,17 @@ function layoutGraph(nodes, edges) {
   }
   const plans = roots.map((root) => plan(root, true));
   function seed(node, subtree, point, heading, isRoot) {
-    const actual = node.position ?? point;
-    const fixed = Boolean(node.position) || 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: fixed ? actual.x : void 0,
-      fy: fixed ? actual.y : void 0
+      fx: pinX !== void 0 || isRoot ? actual.x : void 0,
+      fy: pinY !== void 0 || isRoot ? actual.y : void 0
     });
     subtree.children.forEach((placement) => {
       const child = byKey.get(placement.subtree.key);
@@ -107,12 +117,18 @@ function layoutGraph(nodes, edges) {
         x: actual.x + Math.cos(angle) * placement.distance,
         y: actual.y + Math.sin(angle) * placement.distance
       };
-      const childPoint = child.position ?? target;
+      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 = nodes[0].position ?? { x: 0, y: 0 };
+  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;
@@ -148,17 +164,13 @@ function layoutGraph(nodes, edges) {
   };
 }
 
-// ../../apps/web/src/node-style.ts
-function baseRadius(style) {
-  return 43 * (typeof style?.scale === "number" ? style.scale : 1);
-}
-
 // ../../apps/web/src/semantic-layout.ts
 var branches = ["blue", "amber", "mint", "rose"];
 var layoutKey = (graph) => JSON.stringify({
   nodes: graph.nodes.map((node) => [
     node.key,
-    node.position,
+    positionAxis(node, "x"),
+    positionAxis(node, "y"),
     baseRadius(node.style)
   ]),
   edges: graph.edges.map((edge) => [edge.key, edge.from, edge.to, edge.kind])

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "license": "MIT",
   "files": [
@@ -33,8 +33,8 @@
     "./viewer.css": "./dist/ViewerHost.css"
   },
   "dependencies": {
-    "@lensmap/astro-loader": "0.3.0",
-    "@lensmap/document": "0.3.0",
+    "@lensmap/astro-loader": "0.4.0",
+    "@lensmap/document": "0.4.0",
     "d3-force": "3.0.1",
     "d3-polygon": "3.0.2",
     "react-markdown": "10.1.0"