@lensmap/starlight 0.0.0-stage → 0.2.1

package/dist/components/LiveInspector.astro

@@ -0,0 +1,22 @@
+---
+interface Props {
+  inspectorId?: string;
+}
+const { inspectorId = "default" } = Astro.props;
+---
+<div data-lensmap-inspector-target={inspectorId}></div>
+<style is:global>
+[data-lensmap-inspector-target] { border-block: 1px solid var(--sl-color-gray-5); padding-block: .75rem; margin-block: .75rem; overflow-wrap: anywhere; }
+[data-lensmap-inspector-target] button { display: block; padding: .35rem; cursor: pointer; border: 1px solid var(--sl-color-gray-5); margin-block: .25rem; }
+[data-lensmap-inspector-target] .viewer-connections { margin-top: 1rem; }
+[data-lensmap-inspector-target] .sidebar-section { border-top: 1px solid var(--sl-color-gray-5); padding-block: .75rem; }
+[data-lensmap-inspector-target] summary { cursor: pointer; color: var(--sl-color-gray-2); font-size: var(--sl-text-xs); font-weight: 600; }
+[data-lensmap-inspector-target] details[open] > summary { margin-bottom: .5rem; }
+[data-lensmap-inspector-target] .viewer-connections button { width: 100%; margin: 0; padding: .5rem 0; border: 0; border-radius: 0; background: transparent; color: var(--sl-color-gray-2); font-size: var(--sl-text-xs); text-align: start; white-space: normal; overflow-wrap: anywhere; }
+[data-lensmap-inspector-target] .viewer-connections button:hover { color: var(--sl-color-text-accent); }
+[data-lensmap-inspector-target] :is(button, summary):focus-visible { outline: 2px solid var(--sl-color-text-accent); outline-offset: 2px; }
+[data-lensmap-inspector-target] .viewer-connections p { color: var(--sl-color-gray-3); font-size: var(--sl-text-xs); }
+@media (min-width: 72rem) {
+  .right-sidebar:has([data-lensmap-inspector-target]) { position: static; top: auto; height: auto; overflow-y: visible; padding-top: 0; }
+}
+</style>

package/dist/components/MapContent.astro

@@ -0,0 +1,36 @@
+---
+import type { SemanticGraph } from "@lensmap/document";
+import { layoutSemanticGraph } from "../layout.js";
+import ViewerHost from "../ViewerHost.js";
+import "../ViewerHost.css";
+
+interface Props {
+  graph: SemanticGraph;
+  entry?: unknown;
+  authoredFrontmatter: Record<string, unknown>;
+  executable: boolean;
+  inspectorId?: string;
+}
+const { graph: semantic, executable, inspectorId = "default" } = Astro.props;
+const entry = Astro.props.entry ?? Astro.locals.starlightRoute?.entry;
+const graph = layoutSemanticGraph(semantic);
+const rendered = Object.fromEntries(
+  await Promise.all(
+    graph.nodes.map(async (node) => [
+      node.key,
+      String((await Astro.slots.render(node.key, [entry])) ?? ""),
+    ]),
+  ),
+);
+// Only prepared prose + public graph reach the island. Never entry metadata or locals.
+const publicGraph = {
+  ...graph,
+  nodes: graph.nodes.map((node) => ({ ...node, markdown: "" })),
+};
+---
+<div data-lensmap-document data-executable={String(executable)}>
+  <div class="not-content"><ViewerHost client:load graph={publicGraph} rendered={rendered} inspectorId={inspectorId} /></div>
+  <section data-static-thoughts>
+    {graph.nodes.map((node) => <section data-thought={node.key}><h2>{node.title}</h2><div set:html={rendered[node.key]} /></section>)}
+  </section>
+</div>

package/dist/components/MobileThoughts.astro

@@ -0,0 +1,77 @@
+---
+import { Icon } from "@astrojs/starlight/components";
+import LiveInspector from "./LiveInspector.astro";
+
+interface Props {
+  inspectorId?: string;
+}
+const { inspectorId = "default" } = Astro.props;
+---
+
+<details class="lensmap-mobile-thoughts" data-lensmap-thoughts>
+  <summary>
+    <span>Thoughts</span>
+    <Icon name="right-caret" size="1rem" class="lensmap-thoughts-caret" />
+  </summary>
+  <div class="lensmap-thoughts-content"><LiveInspector inspectorId={inspectorId} /></div>
+</details>
+
+<style>
+.lensmap-mobile-thoughts {
+  margin-bottom: 1rem;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.375rem;
+  background: var(--sl-color-bg-sidebar);
+  color: var(--sl-color-text);
+}
+summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  list-style: none;
+  padding: 0.75rem 1rem;
+  color: var(--sl-color-white);
+  font-size: var(--sl-text-sm);
+  font-weight: 500;
+  cursor: pointer;
+}
+summary:hover {
+  background: var(--sl-color-gray-6);
+}
+summary::marker {
+  content: "";
+}
+summary::-webkit-details-marker {
+  display: none;
+}
+.lensmap-thoughts-caret {
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+:global([dir="rtl"]) .lensmap-thoughts-caret {
+  transform: rotate(180deg);
+}
+.lensmap-mobile-thoughts[open] > summary .lensmap-thoughts-caret {
+  transform: rotate(90deg);
+}
+summary:focus-visible {
+  outline: 2px solid var(--sl-color-text-accent);
+  outline-offset: 2px;
+}
+[open] > summary {
+  border-bottom: 1px solid var(--sl-color-gray-5);
+}
+.lensmap-thoughts-content {
+  padding: 0 1rem 1rem;
+}
+.lensmap-thoughts-content :global([data-lensmap-inspector-target]) {
+  border: 0;
+  margin: 0;
+}
+.lensmap-thoughts-content :global([data-live-inspector] > h2) {
+  font-size: var(--sl-text-lg);
+  font-weight: 600;
+  line-height: var(--sl-line-height-headings);
+}
+</style>

package/dist/components/SidebarShell.astro

@@ -0,0 +1,5 @@
+<div class="lg:sl-hidden"><slot name="mobile-panels" /><slot name="mobile-inspector" /><slot name="mobile-toc" /></div>
+<div class="lensmap-sidebar sl-hidden lg:sl-block"><slot name="context-panels" /><slot name="inspector" /><slot name="toc" /></div>
+<style>
+.lensmap-sidebar { padding: 1rem var(--sl-sidebar-pad-x); overflow-wrap: anywhere; }
+</style>

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { type LensmapOptions } from "@lensmap/astro-loader";
+export type { LensmapOptions } from "@lensmap/astro-loader";
+/** Add alongside Starlight and the host React integration. Does not replace host panels. */
+export default function starlightLensmap(options?: Omit<LensmapOptions, "contentComponent">): import("astro").AstroIntegration;

package/dist/index.js

@@ -0,0 +1,14 @@
+// src/index.ts
+import { fileURLToPath } from "node:url";
+import lensmap from "@lensmap/astro-loader";
+function starlightLensmap(options = {}) {
+  return lensmap({
+    ...options,
+    contentComponent: fileURLToPath(
+      new URL("./components/MapContent.astro", import.meta.url)
+    )
+  });
+}
+export {
+  starlightLensmap as default
+};

package/dist/layout.d.ts

@@ -0,0 +1,3 @@
+import type { SemanticGraph } from "@lensmap/document";
+import type { GraphData } from "./ViewerHost.js";
+export function layoutSemanticGraph(graph: SemanticGraph): GraphData;

package/dist/layout.js

@@ -0,0 +1,215 @@
+// ../../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";
+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 byKey = 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 = byKey.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 step = 180;
+  const padding = 56;
+  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 actual = node.position ?? point;
+    const fixed = Boolean(node.position) || isRoot;
+    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
+    });
+    subtree.children.forEach((placement) => {
+      const child = byKey.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 = child.position ?? target;
+      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 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: _position, ...node }) => {
+      const point = placed.get(node.key);
+      if (!point)
+        throw new Error(`Automatic layout could not place node "${node.key}".`);
+      return {
+        ...node,
+        x: point.x,
+        y: point.y
+      };
+    }),
+    edges
+  };
+}
+
+// ../../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]),
+  edges: graph.edges.map((edge) => [edge.key, edge.from, edge.to, edge.kind])
+});
+function layoutSemanticGraph(graph, previous) {
+  const colours = /* @__PURE__ */ new Map();
+  const children = /* @__PURE__ */ new Map();
+  const nested = /* @__PURE__ */ new Set();
+  for (const edge of graph.edges) {
+    if (edge.kind !== "branch") continue;
+    const list = children.get(edge.from) ?? [];
+    list.push(edge.to);
+    children.set(edge.from, list);
+    nested.add(edge.to);
+  }
+  const colour = (key, branch, depth) => {
+    colours.set(key, branch);
+    (children.get(key) ?? []).forEach((child, i) => {
+      colour(
+        child,
+        depth === 0 ? branches[i % branches.length] : branch,
+        depth + 1
+      );
+    });
+  };
+  graph.nodes.filter((node) => !nested.has(node.key)).forEach((node, i) => {
+    colour(node.key, branches[i % branches.length], 0);
+  });
+  const drafts = graph.nodes.map(
+    ({ key, id, title, markdown, unresolved, position, destination }) => ({
+      key,
+      id,
+      title,
+      markdown,
+      unresolved,
+      position,
+      ...destination ? { destination } : {},
+      branch: colours.get(key) ?? "blue"
+    })
+  );
+  const edges = graph.edges.map(({ key, from, to, kind, type }) => ({
+    key,
+    from,
+    to,
+    kind,
+    ...type !== void 0 ? { type } : {}
+  }));
+  if (previous && layoutKey(previous.semantic) === layoutKey(graph)) {
+    const points = new Map(
+      previous.layout.nodes.map((node) => [node.key, node])
+    );
+    return {
+      nodes: drafts.map(({ position: _position, ...node }) => ({
+        ...node,
+        x: points.get(node.key)?.x ?? 0,
+        y: points.get(node.key)?.y ?? 0
+      })),
+      edges
+    };
+  }
+  return layoutGraph(drafts, edges);
+}
+export {
+  layoutSemanticGraph
+};

package/package.json

@@ -1,6 +1,67 @@
 {
+  "version": "0.2.1",
+  "type": "module",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=24.16.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "latest",
+    "registry": "https://registry.npmjs.org/"
+  },
   "name": "@lensmap/starlight",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "description": "Experimental portable Lensmap Starlight viewer and inspector composition",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nicodoggie/lensmap.git",
+    "directory": "packages/starlight"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./components/*": "./dist/components/*",
+    "./viewer": {
+      "types": "./dist/ViewerHost.d.ts",
+      "default": "./dist/ViewerHost.js"
+    },
+    "./viewer.css": "./dist/ViewerHost.css"
+  },
+  "dependencies": {
+    "@lensmap/astro-loader": "0.2.1",
+    "@lensmap/document": "0.2.1",
+    "react-markdown": "10.1.0",
+    "d3-force": "3.0.1",
+    "d3-polygon": "3.0.2"
+  },
+  "peerDependencies": {
+    "astro": "7.4.0",
+    "@astrojs/starlight": "0.42.6",
+    "@astrojs/react": "6.0.6",
+    "react": "19.3.1",
+    "react-dom": "19.3.1"
+  },
+  "devDependencies": {
+    "@lensmap/web": "0.0.0",
+    "astro": "7.4.0",
+    "@astrojs/starlight": "0.42.6",
+    "@astrojs/react": "6.0.6",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "esbuild": "0.28.2",
+    "typescript": "7.0.2",
+    "@types/node": "24.19.2"
+  },
+  "scripts": {
+    "build": "node build.mjs",
+    "typecheck": "tsc -p tsconfig.check.json",
+    "test": "node --test test/*.test.ts"
+  }
 }