@riebeckite/graph 0.0.0-stage → 0.0.37

package/dist/ui.js

@@ -0,0 +1,2196 @@
+// ui.tsx
+import { useEffect, useMemo, useRef, useState } from "hono/jsx";
+
+// src/animation.ts
+function buildRevealSchedule(nodes) {
+  const dated = nodes.filter((node) => node.date !== null).sort(
+    (left, right) => Date.parse(left.date) - Date.parse(right.date) || left.id.localeCompare(right.id)
+  );
+  const undated = nodes.filter((node) => node.date === null).sort((left, right) => left.id.localeCompare(right.id));
+  if (dated.length === 0) {
+    return [...undated].map((node, index) => ({
+      id: node.id,
+      at: (index + 1) / Math.max(undated.length, 1),
+      dated: false
+    }));
+  }
+  const datedShare = undated.length === 0 ? 1 : 0.85;
+  const entries = dated.map((node, index) => ({
+    id: node.id,
+    at: (index + 1) / dated.length * datedShare,
+    dated: true
+  }));
+  undated.forEach((node, index) => {
+    entries.push({
+      id: node.id,
+      at: datedShare + (index + 1) / undated.length * (1 - datedShare),
+      dated: false
+    });
+  });
+  return entries;
+}
+function hasDatedNodes(nodes) {
+  return nodes.some((node) => node.date !== null);
+}
+
+// src/query.ts
+var SUPPORTED_OPERATORS = /* @__PURE__ */ new Set(["file", "path", "tag"]);
+var TOKEN_PATTERN = /"[^"]*"|\S+/g;
+function parseGraphQuery(input) {
+  const terms = [];
+  const unsupportedOperators = /* @__PURE__ */ new Set();
+  for (const rawToken of input.match(TOKEN_PATTERN) ?? []) {
+    let token = rawToken.trim();
+    if (token.length === 0) continue;
+    let negated = false;
+    if (token.startsWith("-") && token.length > 1) {
+      negated = true;
+      token = token.slice(1);
+    }
+    const separator = token.indexOf(":");
+    if (separator > 0) {
+      const operator = token.slice(0, separator).toLocaleLowerCase();
+      if (!/^[a-z]+$/.test(operator)) {
+        terms.push({ field: "text", value: unquote(token), negated });
+        continue;
+      }
+      if (!SUPPORTED_OPERATORS.has(operator)) {
+        unsupportedOperators.add(operator);
+        terms.push({
+          field: "unsupported",
+          value: unquote(token.slice(separator + 1)),
+          negated
+        });
+        continue;
+      }
+      terms.push({
+        field: operator,
+        value: normalizeTagValue(unquote(token.slice(separator + 1))),
+        negated
+      });
+      continue;
+    }
+    terms.push({ field: "text", value: unquote(token), negated });
+  }
+  return { terms, unsupportedOperators: [...unsupportedOperators] };
+}
+function matchesGraphQuery(node, query) {
+  for (const term of query.terms) {
+    const matched = matchesTerm(node, term);
+    if (term.negated ? matched : !matched) return false;
+  }
+  return true;
+}
+function normalizeGraphText(value) {
+  return value.normalize("NFKC").toLocaleLowerCase().replace(
+    /[ァ-ン]/g,
+    (character) => String.fromCharCode(character.charCodeAt(0) - 96)
+  );
+}
+function matchesTerm(node, term) {
+  const value = normalizeGraphText(term.value);
+  if (value.length === 0) return false;
+  switch (term.field) {
+    case "file":
+      return normalizeGraphText(node.title).includes(value);
+    case "path":
+      return normalizeGraphText(node.path).includes(value);
+    case "tag":
+      return node.tags.some((tag) => {
+        const normalized = normalizeGraphText(tag);
+        return normalized === value || normalized.startsWith(`${value}/`);
+      });
+    case "text":
+      return normalizeGraphText(node.title).includes(value) || normalizeGraphText(node.path).includes(value) || node.tags.some((tag) => normalizeGraphText(tag).includes(value));
+    case "unsupported":
+      return false;
+  }
+}
+function normalizeTagValue(value) {
+  return value.replace(/^#+/, "");
+}
+function unquote(value) {
+  if (value.length >= 2 && value.startsWith('"') && value.endsWith('"')) {
+    return value.slice(1, -1);
+  }
+  return value;
+}
+
+// src/settings.ts
+var GRAPH_SETTINGS_RANGES = {
+  depth: { min: 0, max: 5, step: 1 },
+  textFade: { min: 0, max: 1, step: 0.05 },
+  nodeSize: { min: 0.5, max: 2.5, step: 0.1 },
+  linkThickness: { min: 0.25, max: 3, step: 0.05 },
+  centerForce: { min: 0, max: 1, step: 0.05 },
+  repelForce: { min: 0, max: 2e3, step: 10 },
+  linkForce: { min: 0, max: 1, step: 0.05 },
+  linkDistance: { min: 30, max: 500, step: 5 }
+};
+var DEFAULT_GRAPH_SETTINGS = Object.freeze({
+  search: "",
+  showTags: true,
+  showAttachments: true,
+  existingOnly: false,
+  showOrphans: true,
+  depth: 2,
+  arrows: false,
+  textFade: 0.35,
+  nodeSize: 1,
+  linkThickness: 1,
+  animate: false,
+  centerForce: 0.35,
+  repelForce: 600,
+  linkForce: 0.7,
+  linkDistance: 100,
+  groups: []
+});
+var GROUP_COLORS = [
+  "#e07a5f",
+  "#3d85c6",
+  "#6aa84f",
+  "#c27ba0",
+  "#e6b422",
+  "#7c6ee6"
+];
+var MAX_GROUPS = 24;
+function normalizeGraphSettings(value) {
+  const source = value !== null && typeof value === "object" ? value : {};
+  return {
+    search: text(source.search, DEFAULT_GRAPH_SETTINGS.search, 200),
+    showTags: flag(source.showTags, DEFAULT_GRAPH_SETTINGS.showTags),
+    showAttachments: flag(
+      source.showAttachments,
+      DEFAULT_GRAPH_SETTINGS.showAttachments
+    ),
+    existingOnly: flag(
+      source.existingOnly,
+      DEFAULT_GRAPH_SETTINGS.existingOnly
+    ),
+    showOrphans: flag(source.showOrphans, DEFAULT_GRAPH_SETTINGS.showOrphans),
+    depth: integer(source.depth, "depth", DEFAULT_GRAPH_SETTINGS.depth),
+    arrows: flag(source.arrows, DEFAULT_GRAPH_SETTINGS.arrows),
+    textFade: number(
+      source.textFade,
+      "textFade",
+      DEFAULT_GRAPH_SETTINGS.textFade
+    ),
+    nodeSize: number(
+      source.nodeSize,
+      "nodeSize",
+      DEFAULT_GRAPH_SETTINGS.nodeSize
+    ),
+    linkThickness: number(
+      source.linkThickness,
+      "linkThickness",
+      DEFAULT_GRAPH_SETTINGS.linkThickness
+    ),
+    animate: flag(source.animate, DEFAULT_GRAPH_SETTINGS.animate),
+    centerForce: number(
+      source.centerForce,
+      "centerForce",
+      DEFAULT_GRAPH_SETTINGS.centerForce
+    ),
+    repelForce: number(
+      source.repelForce,
+      "repelForce",
+      DEFAULT_GRAPH_SETTINGS.repelForce
+    ),
+    linkForce: number(
+      source.linkForce,
+      "linkForce",
+      DEFAULT_GRAPH_SETTINGS.linkForce
+    ),
+    linkDistance: number(
+      source.linkDistance,
+      "linkDistance",
+      DEFAULT_GRAPH_SETTINGS.linkDistance
+    ),
+    groups: groups(source.groups)
+  };
+}
+function readStoredGraphSettings(storage, key) {
+  try {
+    const raw = storage.getItem(key);
+    if (!raw) return null;
+    return normalizeGraphSettings(JSON.parse(raw));
+  } catch {
+    return null;
+  }
+}
+function writeStoredGraphSettings(storage, key, settings) {
+  try {
+    storage.setItem(key, JSON.stringify(settings));
+  } catch {
+    return;
+  }
+}
+function flag(value, fallback) {
+  return typeof value === "boolean" ? value : fallback;
+}
+function number(value, key, fallback) {
+  const range = GRAPH_SETTINGS_RANGES[key];
+  if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
+  return clamp(value, range.min, range.max);
+}
+function integer(value, key, fallback) {
+  return Math.round(number(value, key, fallback));
+}
+function text(value, fallback, maxLength) {
+  return typeof value === "string" ? value.slice(0, maxLength) : fallback;
+}
+function groups(value) {
+  if (!Array.isArray(value)) return [];
+  const result = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const item of value) {
+    if (result.length >= MAX_GROUPS) break;
+    if (item === null || typeof item !== "object") continue;
+    const source = item;
+    if (typeof source.id !== "string" || source.id.length === 0) continue;
+    if (seen.has(source.id)) continue;
+    const query = text(source.query, "", 200);
+    if (query.trim().length === 0) continue;
+    seen.add(source.id);
+    result.push({
+      id: source.id.slice(0, 64),
+      query,
+      color: color(source.color, result.length)
+    });
+  }
+  return result;
+}
+function color(value, index) {
+  if (typeof value === "string" && /^#[0-9a-f]{6}$/i.test(value)) {
+    return value.toLocaleLowerCase();
+  }
+  return GROUP_COLORS[index % GROUP_COLORS.length] ?? "#6aa84f";
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+// src/simulation.ts
+var ALPHA_MIN = 1e-3;
+var ALPHA_DECAY = 0.0228;
+var VELOCITY_DECAY = 0.4;
+var MAX_VELOCITY = 40;
+var GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
+function createGraphSimulation(input) {
+  const ids = [...new Set(input.nodeIds)].sort(
+    (left, right) => left.localeCompare(right)
+  );
+  const nodes = ids.map((id, index) => {
+    const previous = input.positions?.get(id);
+    if (previous && Number.isFinite(previous.x) && Number.isFinite(previous.y)) {
+      return {
+        id,
+        x: previous.x,
+        y: previous.y,
+        vx: 0,
+        vy: 0,
+        fx: null,
+        fy: null
+      };
+    }
+    if (id === input.centerId) {
+      return { id, x: 0, y: 0, vx: 0, vy: 0, fx: null, fy: null };
+    }
+    const radius = 18 + 13 * Math.sqrt(index);
+    const angle = index * GOLDEN_ANGLE + hash(id) % 360 * (Math.PI / 180);
+    return {
+      id,
+      x: Math.cos(angle) * radius,
+      y: Math.sin(angle) * radius,
+      vx: 0,
+      vy: 0,
+      fx: null,
+      fy: null
+    };
+  });
+  const indexById = new Map(nodes.map((node, index) => [node.id, index]));
+  const links = input.links.map((link) => ({
+    source: indexById.get(link.source),
+    target: indexById.get(link.target)
+  })).filter(
+    (link) => link.source !== void 0 && link.target !== void 0
+  );
+  let options = { ...input.options };
+  let alpha = 1;
+  let alphaTarget = 0;
+  let active = true;
+  function tick() {
+    if (!active && alpha < ALPHA_MIN) return false;
+    alpha += (alphaTarget - alpha) * ALPHA_DECAY;
+    applyCenterForce(nodes, options.centerForce, alpha);
+    applyLinkForce(nodes, links, options, alpha);
+    applyRepelForce(nodes, options.repelForce * alpha * 0.02);
+    for (const node of nodes) {
+      if (node.fx !== null && node.fy !== null) {
+        node.x = node.fx;
+        node.y = node.fy;
+        node.vx = 0;
+        node.vy = 0;
+        continue;
+      }
+      node.vx *= 1 - VELOCITY_DECAY;
+      node.vy *= 1 - VELOCITY_DECAY;
+      node.vx = clampVelocity(node.vx);
+      node.vy = clampVelocity(node.vy);
+      node.x += node.vx;
+      node.y += node.vy;
+    }
+    if (alpha < ALPHA_MIN) {
+      alpha = 0;
+      active = false;
+    }
+    return active;
+  }
+  return {
+    nodes,
+    tick,
+    reheat(value = 0.7) {
+      alpha = Math.max(alpha, value);
+      active = true;
+    },
+    setOptions(next) {
+      options = { ...next };
+      if (alpha < 0.05) {
+        alpha = 0.05;
+        active = true;
+      }
+    },
+    fix(id, x, y) {
+      const index = indexById.get(id);
+      const node = index === void 0 ? void 0 : nodes[index];
+      if (!node) return;
+      node.fx = x;
+      node.fy = y;
+      node.x = x;
+      node.y = y;
+      node.vx = 0;
+      node.vy = 0;
+      alpha = Math.max(alpha, 0.5);
+      active = true;
+    },
+    release(id) {
+      const index = indexById.get(id);
+      const node = index === void 0 ? void 0 : nodes[index];
+      if (!node) return;
+      node.fx = null;
+      node.fy = null;
+      alpha = Math.max(alpha, 0.45);
+      active = true;
+    },
+    stop() {
+      alpha = 0;
+      alphaTarget = 0;
+      active = false;
+    },
+    isActive() {
+      return active;
+    },
+    getAlpha() {
+      return alpha;
+    }
+  };
+}
+function applyCenterForce(nodes, centerForce, alpha) {
+  const strength = centerForce * 0.03 * alpha;
+  if (strength <= 0) return;
+  for (const node of nodes) {
+    node.vx -= node.x * strength;
+    node.vy -= node.y * strength;
+  }
+}
+function applyLinkForce(nodes, links, options, alpha) {
+  const strength = options.linkForce * 0.12 * alpha;
+  if (strength <= 0) return;
+  for (const link of links) {
+    const source = nodes[link.source];
+    const target = nodes[link.target];
+    if (!source || !target) continue;
+    const dx = target.x - source.x;
+    const dy = target.y - source.y;
+    const distance = Math.hypot(dx, dy);
+    if (distance < 1e-3) continue;
+    const force = (distance - options.linkDistance) / distance * strength;
+    source.vx += dx * force;
+    source.vy += dy * force;
+    target.vx -= dx * force;
+    target.vy -= dy * force;
+  }
+}
+function applyRepelForce(nodes, strength) {
+  if (strength <= 0 || nodes.length < 2) return;
+  if (nodes.length <= 250) {
+    applyExactRepulsion(nodes, strength);
+    return;
+  }
+  applyQuadtreeRepulsion(nodes, strength);
+}
+function applyExactRepulsion(nodes, strength) {
+  for (let left = 0; left < nodes.length; left += 1) {
+    const a = nodes[left];
+    if (!a) continue;
+    for (let right = left + 1; right < nodes.length; right += 1) {
+      const b = nodes[right];
+      if (!b) continue;
+      const dx = b.x - a.x;
+      const dy = b.y - a.y;
+      const distanceSquared = dx * dx + dy * dy + 1;
+      const force = strength / distanceSquared;
+      a.vx -= dx * force;
+      a.vy -= dy * force;
+      b.vx += dx * force;
+      b.vy += dy * force;
+    }
+  }
+}
+function applyQuadtreeRepulsion(nodes, strength) {
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  for (const node of nodes) {
+    minX = Math.min(minX, node.x);
+    minY = Math.min(minY, node.y);
+    maxX = Math.max(maxX, node.x);
+    maxY = Math.max(maxY, node.y);
+  }
+  const size = Math.max(maxX - minX, maxY - minY, 1) + 1;
+  const root = {
+    x: (minX + maxX - size) / 2,
+    y: (minY + maxY - size) / 2,
+    size,
+    mass: 0,
+    centerX: 0,
+    centerY: 0,
+    members: null,
+    children: null
+  };
+  for (let index = 0; index < nodes.length; index += 1) {
+    insertQuad(root, nodes, index, 0);
+  }
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes[index];
+    if (node) applyQuadForce(root, nodes, node, index, strength);
+  }
+}
+function insertQuad(quad, nodes, index, depth) {
+  const node = nodes[index];
+  if (!node) return;
+  quad.centerX = (quad.centerX * quad.mass + node.x) / (quad.mass + 1);
+  quad.centerY = (quad.centerY * quad.mass + node.y) / (quad.mass + 1);
+  quad.mass += 1;
+  if (quad.children) {
+    insertIntoChild(quad, nodes, index, depth + 1);
+    return;
+  }
+  if (!quad.members) {
+    quad.members = [index];
+    return;
+  }
+  if (depth >= 16) {
+    quad.members.push(index);
+    return;
+  }
+  const members = quad.members;
+  quad.members = null;
+  const half = quad.size / 2;
+  quad.children = [
+    createQuad(quad.x, quad.y, half),
+    createQuad(quad.x + half, quad.y, half),
+    createQuad(quad.x, quad.y + half, half),
+    createQuad(quad.x + half, quad.y + half, half)
+  ];
+  for (const member of members) insertIntoChild(quad, nodes, member, depth + 1);
+  insertIntoChild(quad, nodes, index, depth + 1);
+}
+function insertIntoChild(quad, nodes, index, depth) {
+  const children = quad.children;
+  if (!children) return;
+  const node = nodes[index];
+  if (!node) return;
+  const half = quad.size / 2;
+  const right = node.x >= quad.x + half ? 1 : 0;
+  const bottom = node.y >= quad.y + half ? 2 : 0;
+  const child = children[right + bottom];
+  if (child) insertQuad(child, nodes, index, depth);
+}
+function createQuad(x, y, size) {
+  return {
+    x,
+    y,
+    size,
+    mass: 0,
+    centerX: 0,
+    centerY: 0,
+    members: null,
+    children: null
+  };
+}
+function applyQuadForce(quad, nodes, target, targetIndex, strength) {
+  if (quad.mass === 0) return;
+  const dx = quad.centerX - target.x;
+  const dy = quad.centerY - target.y;
+  const distanceSquared = dx * dx + dy * dy + 1;
+  if (!quad.children) {
+    for (const index of quad.members ?? []) {
+      if (index === targetIndex) continue;
+      const other = nodes[index];
+      if (other) applyPairRepulsion(target, other, strength);
+    }
+    return;
+  }
+  if (quad.size * quad.size < 0.81 * distanceSquared) {
+    const force = strength * quad.mass / distanceSquared;
+    target.vx -= dx * force;
+    target.vy -= dy * force;
+    return;
+  }
+  for (const child of quad.children) {
+    applyQuadForce(child, nodes, target, targetIndex, strength);
+  }
+}
+function applyPairRepulsion(a, b, strength) {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const distanceSquared = dx * dx + dy * dy + 1;
+  const force = strength / distanceSquared;
+  a.vx -= dx * force;
+  a.vy -= dy * force;
+  b.vx += dx * force;
+  b.vy += dy * force;
+}
+function clampVelocity(value) {
+  return Math.min(Math.max(value, -MAX_VELOCITY), MAX_VELOCITY);
+}
+function hash(value) {
+  let result = 2166136261;
+  for (let index = 0; index < value.length; index += 1) {
+    result ^= value.charCodeAt(index);
+    result = Math.imul(result, 16777619);
+  }
+  return result >>> 0;
+}
+
+// src/view.ts
+function buildVisibleGraph(input) {
+  const { document: document2, settings, mode } = input;
+  const centerId = input.centerId ?? document2.centerId;
+  const nodeById = new Map(document2.nodes.map((node) => [node.id, node]));
+  const adjacency = buildAdjacency(document2);
+  const fullDegree = /* @__PURE__ */ new Map();
+  for (const link of document2.links) {
+    fullDegree.set(link.source, (fullDegree.get(link.source) ?? 0) + 1);
+    fullDegree.set(link.target, (fullDegree.get(link.target) ?? 0) + 1);
+  }
+  const search = parseGraphQuery(settings.search);
+  const groups2 = settings.groups.map((group) => ({
+    group,
+    query: parseGraphQuery(group.query)
+  }));
+  const unsupportedOperators = new Set(search.unsupportedOperators);
+  for (const entry of groups2) {
+    for (const operator of entry.query.unsupportedOperators) {
+      unsupportedOperators.add(operator);
+    }
+  }
+  const candidates = mode === "local" ? collectLocalNodeIds(adjacency, centerId, settings.depth) : new Set(document2.nodes.map((node) => node.id));
+  const visibleNodes = [];
+  for (const id of candidates) {
+    const node = nodeById.get(id);
+    if (!node) continue;
+    if (node.kind === "tag" && !settings.showTags) continue;
+    if (node.kind === "attachment" && !settings.showAttachments) continue;
+    if (node.kind === "unresolved" && settings.existingOnly) continue;
+    if (node.kind === "note" && !settings.showOrphans && (fullDegree.get(node.id) ?? 0) === 0) {
+      continue;
+    }
+    if (settings.search.trim().length > 0 && !matchesGraphQuery(node, search)) {
+      if (mode !== "local" || id !== centerId) continue;
+    }
+    visibleNodes.push({
+      ...node,
+      degree: 0,
+      radius: 0,
+      color: "",
+      groupId: null
+    });
+  }
+  const visibleIds = new Set(visibleNodes.map((node) => node.id));
+  const links = document2.links.filter(
+    (link) => visibleIds.has(link.source) && visibleIds.has(link.target)
+  );
+  const degree = /* @__PURE__ */ new Map();
+  for (const link of links) {
+    degree.set(link.source, (degree.get(link.source) ?? 0) + 1);
+    degree.set(link.target, (degree.get(link.target) ?? 0) + 1);
+  }
+  visibleNodes.sort((left, right) => left.id.localeCompare(right.id));
+  for (const node of visibleNodes) {
+    node.degree = degree.get(node.id) ?? 0;
+    node.radius = 3 + Math.sqrt(node.degree) * 1.7;
+    const group = findGroup(node, groups2);
+    node.groupId = group?.group.id ?? null;
+    node.color = group?.group.color ?? "";
+  }
+  return {
+    nodes: visibleNodes,
+    links,
+    centerId: centerId && visibleIds.has(centerId) ? centerId : null,
+    unsupportedOperators: [...unsupportedOperators]
+  };
+}
+function collectLocalNodeIds(adjacency, centerId, depth) {
+  const ids = /* @__PURE__ */ new Set();
+  if (!centerId) return ids;
+  ids.add(centerId);
+  let frontier = [centerId];
+  for (let level = 0; level < depth; level += 1) {
+    const next = [];
+    for (const id of frontier) {
+      for (const neighbor of adjacency.get(id) ?? []) {
+        if (ids.has(neighbor)) continue;
+        ids.add(neighbor);
+        next.push(neighbor);
+      }
+    }
+    if (next.length === 0) break;
+    frontier = next;
+  }
+  return ids;
+}
+function buildAdjacency(document2) {
+  const adjacency = /* @__PURE__ */ new Map();
+  for (const node of document2.nodes) adjacency.set(node.id, []);
+  for (const link of document2.links) {
+    adjacency.get(link.source)?.push(link.target);
+    adjacency.get(link.target)?.push(link.source);
+  }
+  return adjacency;
+}
+function findGroup(node, groups2) {
+  for (const entry of groups2) {
+    if (entry.group.query.trim().length === 0) continue;
+    if (entry.query.unsupportedOperators.length > 0) continue;
+    if (matchesGraphQuery(node, entry.query)) return entry;
+  }
+  return null;
+}
+
+// client.ts
+var MIN_SCALE = 0.12;
+var MAX_SCALE = 4;
+var DRAG_THRESHOLD_PX = 4;
+var ANIMATION_DURATION_MS = 3200;
+function createGraphRenderer(options) {
+  const canvas = options.canvas;
+  const context = canvas.getContext("2d");
+  if (!context) {
+    return createNoopRenderer();
+  }
+  const ctx = context;
+  const callbacks = options;
+  let input = null;
+  let visible = {
+    nodes: [],
+    links: [],
+    centerId: null,
+    unsupportedOperators: []
+  };
+  let simulation = null;
+  let signature = "";
+  let camera = { x: 0, y: 0, scale: 1 };
+  let size = { width: 0, height: 0 };
+  let hoveredId = null;
+  let selectedId = null;
+  let drag = null;
+  const pointers = /* @__PURE__ */ new Map();
+  let pinch = null;
+  let frameHandle = null;
+  let paused = false;
+  let destroyed = false;
+  let animating = false;
+  let animationStart = 0;
+  let animationCutoff = 1;
+  let pendingFit = false;
+  let reveal = /* @__PURE__ */ new Map();
+  let colors = readColors(canvas);
+  const reducedMotion = options.reducedMotion ?? false;
+  const resizeObserver = new ResizeObserver(() => resize());
+  const intersectionObserver = new IntersectionObserver((entries) => {
+    paused = entries.every((entry) => !entry.isIntersecting);
+    if (!paused) requestFrame();
+  });
+  const mutationObserver = new MutationObserver(() => {
+    colors = readColors(canvas);
+    requestFrame();
+  });
+  const onVisibilityChange = () => {
+    paused = document.visibilityState === "hidden";
+    if (!paused) requestFrame();
+  };
+  resizeObserver.observe(canvas);
+  intersectionObserver.observe(canvas);
+  mutationObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-rb-mode", "data-rb-theme", "class", "style"]
+  });
+  document.addEventListener("visibilitychange", onVisibilityChange);
+  canvas.addEventListener("pointerdown", onPointerDown);
+  canvas.addEventListener("pointermove", onPointerMove);
+  canvas.addEventListener("pointerup", onPointerUp);
+  canvas.addEventListener("pointercancel", onPointerUp);
+  canvas.addEventListener("pointerleave", onPointerLeave);
+  canvas.addEventListener("wheel", onWheel, { passive: false });
+  canvas.addEventListener("dblclick", onDoubleClick);
+  canvas.addEventListener("contextmenu", onContextMenu);
+  canvas.addEventListener("keydown", onKeyDown);
+  resize();
+  return {
+    update,
+    setSelected,
+    zoomBy,
+    resetView,
+    focusNode,
+    playAnimation,
+    stopAnimation,
+    isAnimating: () => animating,
+    destroy
+  };
+  function update(next) {
+    if (destroyed) return;
+    const previousMode = input?.mode;
+    const previousCenter = input?.centerId;
+    const previousDocument = input?.document;
+    input = next;
+    visible = buildVisibleGraph({
+      document: next.document,
+      settings: next.settings,
+      mode: next.mode,
+      centerId: next.centerId
+    });
+    selectedId = next.selectedId ?? null;
+    reveal = new Map(
+      buildRevealSchedule(visible.nodes).map((entry) => [entry.id, entry.at])
+    );
+    const nextSignature = visibleSignature(visible);
+    const positions = simulation ? new Map(
+      simulation.nodes.map((node) => [node.id, { x: node.x, y: node.y }])
+    ) : void 0;
+    if (nextSignature !== signature || !simulation) {
+      signature = nextSignature;
+      simulation = createGraphSimulation({
+        nodeIds: visible.nodes.map((node) => node.id),
+        links: visible.links,
+        options: forceOptions(next.settings),
+        positions,
+        centerId: visible.centerId
+      });
+      if (!previousDocument || previousDocument !== next.document || previousMode !== next.mode || previousCenter !== next.centerId) {
+        pendingFit = true;
+        fitView();
+      }
+    } else {
+      simulation.setOptions(forceOptions(next.settings));
+    }
+    if (!next.settings.animate) {
+      animating = false;
+      animationCutoff = 1;
+    }
+    requestFrame();
+  }
+  function setSelected(id) {
+    if (selectedId === id) return;
+    selectedId = id;
+    requestFrame();
+  }
+  function resize() {
+    const rect = canvas.getBoundingClientRect();
+    const width = Math.max(1, Math.round(rect.width));
+    const height = Math.max(1, Math.round(rect.height));
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    if (canvas.width !== Math.round(width * dpr) || canvas.height !== Math.round(height * dpr)) {
+      canvas.width = Math.round(width * dpr);
+      canvas.height = Math.round(height * dpr);
+    }
+    size = { width, height };
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    if (camera.x === 0 && camera.y === 0) {
+      camera = { x: width / 2, y: height / 2, scale: 1 };
+    }
+    requestFrame();
+  }
+  function fitView() {
+    if (visible.nodes.length === 0) {
+      camera = { x: size.width / 2, y: size.height / 2, scale: 1 };
+      return;
+    }
+    const positions = simulation?.nodes ?? [];
+    let minX = Number.POSITIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+    for (const node of positions) {
+      minX = Math.min(minX, node.x);
+      minY = Math.min(minY, node.y);
+      maxX = Math.max(maxX, node.x);
+      maxY = Math.max(maxY, node.y);
+    }
+    if (!Number.isFinite(minX)) {
+      camera = { x: size.width / 2, y: size.height / 2, scale: 1 };
+      return;
+    }
+    const boundsWidth = Math.max(maxX - minX, 80);
+    const boundsHeight = Math.max(maxY - minY, 80);
+    const scale = clamp2(
+      Math.min(
+        (size.width - 80) / boundsWidth,
+        (size.height - 80) / boundsHeight
+      ),
+      0.2,
+      2
+    );
+    const centerX = (minX + maxX) / 2;
+    const centerY = (minY + maxY) / 2;
+    camera = {
+      x: size.width / 2 - centerX * scale,
+      y: size.height / 2 - centerY * scale,
+      scale
+    };
+  }
+  function resetView() {
+    pendingFit = false;
+    fitView();
+    requestFrame();
+  }
+  function focusNode(id) {
+    const node = simulation?.nodes.find((entry) => entry.id === id);
+    if (!node) return;
+    pendingFit = false;
+    camera = {
+      ...camera,
+      x: size.width / 2 - node.x * camera.scale,
+      y: size.height / 2 - node.y * camera.scale
+    };
+    requestFrame();
+  }
+  function zoomBy(factor, origin) {
+    pendingFit = false;
+    const center = origin ?? { x: size.width / 2, y: size.height / 2 };
+    const scale = clamp2(camera.scale * factor, MIN_SCALE, MAX_SCALE);
+    if (scale === camera.scale) return;
+    const worldX = (center.x - camera.x) / camera.scale;
+    const worldY = (center.y - camera.y) / camera.scale;
+    camera = {
+      x: center.x - worldX * scale,
+      y: center.y - worldY * scale,
+      scale
+    };
+    requestFrame();
+  }
+  function playAnimation() {
+    if (reducedMotion || visible.nodes.length === 0) {
+      animationCutoff = 1;
+      animating = false;
+      callbacks.onAnimationChange?.(false);
+      requestFrame();
+      return;
+    }
+    animationStart = performance.now();
+    animationCutoff = 0;
+    animating = true;
+    callbacks.onAnimationChange?.(true);
+    requestFrame();
+  }
+  function stopAnimation() {
+    animating = false;
+    animationCutoff = 1;
+    callbacks.onAnimationChange?.(false);
+    requestFrame();
+  }
+  function requestFrame() {
+    if (destroyed || paused || frameHandle !== null) return;
+    frameHandle = requestAnimationFrame(frame);
+  }
+  function frame(time) {
+    frameHandle = null;
+    if (destroyed) return;
+    if (animating) {
+      const progress = clamp2(
+        (time - animationStart) / ANIMATION_DURATION_MS,
+        0,
+        1
+      );
+      animationCutoff = progress;
+      if (progress >= 1) {
+        animating = false;
+        callbacks.onAnimationChange?.(false);
+      }
+    }
+    const active = simulation?.tick() ?? false;
+    if (pendingFit && simulation && !active) {
+      pendingFit = false;
+      fitView();
+    }
+    draw();
+    if (active || animating) requestFrame();
+  }
+  function draw() {
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, size.width, size.height);
+    ctx.fillStyle = colors.background;
+    ctx.fillRect(0, 0, size.width, size.height);
+    const related = relatedIds();
+    const dimOthers = related.size > 0;
+    const selected = selectedId;
+    const labelThreshold = 0.35 + (input?.settings.textFade ?? 0.35) * 1.1;
+    const labelAlpha = clamp2((camera.scale - labelThreshold) / 0.4, 0, 1);
+    const nodes = simulation?.nodes ?? [];
+    const simulationById = new Map(nodes.map((node) => [node.id, node]));
+    const positions = /* @__PURE__ */ new Map();
+    for (const node of visible.nodes) {
+      const revealAt = reveal.get(node.id);
+      if (revealAt !== void 0 && revealAt > animationCutoff) {
+        continue;
+      }
+      const simulationNode = simulationById.get(node.id);
+      if (!simulationNode) continue;
+      const x = simulationNode.x;
+      const y = simulationNode.y;
+      positions.set(node.id, {
+        node,
+        x,
+        y,
+        radius: Math.max(2, node.radius * (input?.settings.nodeSize ?? 1))
+      });
+    }
+    const linkThickness = input?.settings.linkThickness ?? 1;
+    ctx.lineCap = "round";
+    for (const link of visible.links) {
+      const source = positions.get(link.source);
+      const target = positions.get(link.target);
+      if (!source || !target) continue;
+      const emphasized = related.has(link.source) && related.has(link.target);
+      const alpha = dimOthers ? emphasized ? 0.72 : 0.06 : 0.28;
+      const [sx, sy] = toScreen(source.x, source.y);
+      const [tx, ty] = toScreen(target.x, target.y);
+      if (!segmentVisible(sx, sy, tx, ty)) continue;
+      ctx.strokeStyle = withAlpha(colors.edge, alpha);
+      ctx.lineWidth = Math.max(
+        0.5,
+        linkThickness * (emphasized ? 1.15 : 0.7) * Math.sqrt(camera.scale)
+      );
+      ctx.beginPath();
+      ctx.moveTo(sx, sy);
+      ctx.lineTo(tx, ty);
+      ctx.stroke();
+      if (input?.settings.arrows) {
+        drawArrow(sx, sy, tx, ty, alpha);
+      }
+    }
+    const labelBudget = visible.nodes.length > 900 ? 0 : visible.nodes.length > 500 ? 120 : 400;
+    let labelsDrawn = 0;
+    const labelBounds = [];
+    for (const entry of positions.values()) {
+      const { node, x, y, radius } = entry;
+      const [sx, sy] = toScreen(x, y);
+      const screenRadius = Math.max(1.5, radius * camera.scale);
+      if (sx < -screenRadius || sy < -screenRadius || sx > size.width + screenRadius || sy > size.height + screenRadius) {
+        continue;
+      }
+      const isRelated = related.has(node.id);
+      const alpha = dimOthers && !isRelated ? 0.15 : 0.92;
+      const isSelected = selected === node.id;
+      const isHovered = hoveredId === node.id;
+      if (isSelected || isHovered) {
+        ctx.beginPath();
+        ctx.arc(sx, sy, screenRadius + 3, 0, Math.PI * 2);
+        ctx.strokeStyle = withAlpha(colors.focus, isSelected ? 0.9 : 0.5);
+        ctx.lineWidth = 1.5;
+        ctx.stroke();
+      }
+      ctx.beginPath();
+      ctx.arc(sx, sy, screenRadius, 0, Math.PI * 2);
+      ctx.fillStyle = withAlpha(nodeColor(node), alpha);
+      ctx.fill();
+      ctx.strokeStyle = withAlpha(colors.background, 0.8);
+      ctx.lineWidth = 1;
+      ctx.stroke();
+      const canDrawLabel = labelAlpha > 0.02 && (labelBudget === 0 ? isSelected || isHovered || isRelated : labelsDrawn < labelBudget);
+      if (!canDrawLabel) continue;
+      labelsDrawn += 1;
+      const title = truncateLabel(node.title);
+      ctx.font = "11px ui-sans-serif, system-ui, sans-serif";
+      ctx.textBaseline = "middle";
+      ctx.textAlign = "left";
+      const labelWidth = ctx.measureText(title).width;
+      let labelX = sx + screenRadius + 6;
+      let left = labelX;
+      let right = labelX + labelWidth;
+      if (right > size.width - 4) {
+        labelX = sx - screenRadius - 6;
+        ctx.textAlign = "right";
+        left = labelX - labelWidth;
+        right = labelX;
+      }
+      const labelY = sy;
+      const top = labelY - 7;
+      const bottom = labelY + 7;
+      if (top < 4 || bottom > size.height - 4 || labelBounds.some(
+        (bounds) => left < bounds.right && right > bounds.left && top < bounds.bottom && bottom > bounds.top
+      )) {
+        continue;
+      }
+      labelBounds.push({ left, top, right, bottom });
+      ctx.strokeStyle = withAlpha(colors.background, 0.85 * labelAlpha * alpha);
+      ctx.lineWidth = 3;
+      ctx.strokeText(title, labelX, labelY);
+      ctx.fillStyle = withAlpha(colors.label, labelAlpha * alpha);
+      ctx.fillText(title, labelX, labelY);
+    }
+  }
+  function drawArrow(sx, sy, tx, ty, alpha) {
+    const angle = Math.atan2(ty - sy, tx - sx);
+    const length = 5;
+    const x = tx - Math.cos(angle) * 4;
+    const y = ty - Math.sin(angle) * 4;
+    ctx.fillStyle = withAlpha(colors.edge, Math.min(0.8, alpha + 0.1));
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(
+      x - Math.cos(angle - 0.45) * length,
+      y - Math.sin(angle - 0.45) * length
+    );
+    ctx.lineTo(
+      x - Math.cos(angle + 0.45) * length,
+      y - Math.sin(angle + 0.45) * length
+    );
+    ctx.closePath();
+    ctx.fill();
+  }
+  function toScreen(x, y) {
+    return [camera.x + x * camera.scale, camera.y + y * camera.scale];
+  }
+  function toWorld(clientX, clientY) {
+    const rect = canvas.getBoundingClientRect();
+    return {
+      x: (clientX - rect.left - camera.x) / camera.scale,
+      y: (clientY - rect.top - camera.y) / camera.scale
+    };
+  }
+  function hitTest(clientX, clientY) {
+    if (!input) return null;
+    const rect = canvas.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const y = clientY - rect.top;
+    let best = null;
+    const nodes = simulation?.nodes ?? [];
+    const simulationById = new Map(nodes.map((node) => [node.id, node]));
+    for (const node of visible.nodes) {
+      if ((reveal.get(node.id) ?? 0) > animationCutoff) continue;
+      const simulationNode = simulationById.get(node.id);
+      if (!simulationNode) continue;
+      const [sx, sy] = toScreen(simulationNode.x, simulationNode.y);
+      const radius = Math.max(
+        6,
+        node.radius * (input.settings.nodeSize ?? 1) * camera.scale + 4
+      );
+      const distance = Math.hypot(x - sx, y - sy);
+      if (distance <= radius && (!best || distance < best.distance)) {
+        best = { node, distance };
+      }
+    }
+    return best?.node ?? null;
+  }
+  function onPointerDown(event) {
+    if (event.button !== 0 && event.pointerType === "mouse") return;
+    pendingFit = false;
+    canvas.focus({ preventScroll: true });
+    canvas.setPointerCapture(event.pointerId);
+    pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (pointers.size === 2) {
+      const [first, second] = [...pointers.values()];
+      if (first && second) {
+        pinch = {
+          distance: Math.hypot(second.x - first.x, second.y - first.y),
+          center: {
+            x: (first.x + second.x) / 2,
+            y: (first.y + second.y) / 2
+          }
+        };
+        if (drag?.kind === "node" && simulation) {
+          simulation.release(drag.id);
+        }
+        drag = null;
+      }
+      return;
+    }
+    const node = hitTest(event.clientX, event.clientY);
+    if (node) {
+      selectedId = node.id;
+      callbacks.onSelect?.(node);
+      drag = {
+        kind: "node",
+        id: node.id,
+        startX: event.clientX,
+        startY: event.clientY,
+        moved: false
+      };
+      requestFrame();
+      return;
+    }
+    drag = {
+      kind: "pan",
+      lastX: event.clientX,
+      lastY: event.clientY,
+      moved: false
+    };
+  }
+  function onPointerMove(event) {
+    if (pointers.has(event.pointerId)) {
+      pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    }
+    if (pinch && pointers.size >= 2) {
+      const [first, second] = [...pointers.values()];
+      if (!first || !second) return;
+      const distance = Math.hypot(second.x - first.x, second.y - first.y);
+      const center = {
+        x: (first.x + second.x) / 2,
+        y: (first.y + second.y) / 2
+      };
+      const rect = canvas.getBoundingClientRect();
+      camera = {
+        ...camera,
+        x: camera.x + center.x - pinch.center.x,
+        y: camera.y + center.y - pinch.center.y
+      };
+      if (pinch.distance > 0) {
+        zoomBy(distance / pinch.distance, {
+          x: center.x - rect.left,
+          y: center.y - rect.top
+        });
+      }
+      pinch = { distance, center };
+      return;
+    }
+    if (drag?.kind === "node") {
+      const moved = drag.moved || Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) >= DRAG_THRESHOLD_PX;
+      if (!moved) return;
+      drag.moved = true;
+      const point = toWorld(event.clientX, event.clientY);
+      simulation?.fix(drag.id, point.x, point.y);
+      requestFrame();
+      return;
+    }
+    if (drag?.kind === "pan") {
+      const dx = event.clientX - drag.lastX;
+      const dy = event.clientY - drag.lastY;
+      if (Math.abs(dx) + Math.abs(dy) > 0) drag.moved = true;
+      camera = { ...camera, x: camera.x + dx, y: camera.y + dy };
+      drag.lastX = event.clientX;
+      drag.lastY = event.clientY;
+      requestFrame();
+      return;
+    }
+    const node = hitTest(event.clientX, event.clientY);
+    const nextHovered = node?.id ?? null;
+    canvas.style.cursor = node ? "pointer" : "grab";
+    if (hoveredId !== nextHovered) {
+      hoveredId = nextHovered;
+      callbacks.onHover?.(node);
+      requestFrame();
+    }
+  }
+  function onPointerUp(event) {
+    pointers.delete(event.pointerId);
+    if (canvas.hasPointerCapture(event.pointerId)) {
+      canvas.releasePointerCapture(event.pointerId);
+    }
+    if (pointers.size < 2) pinch = null;
+    const currentDrag = drag;
+    drag = null;
+    if (!currentDrag) return;
+    if (currentDrag.kind === "node") {
+      if (simulation) simulation.release(currentDrag.id);
+      if (!currentDrag.moved) {
+        const node = visible.nodes.find((entry) => entry.id === currentDrag.id);
+        if (node) callbacks.onOpen?.(node);
+      }
+    } else if (!currentDrag.moved) {
+      selectedId = null;
+      callbacks.onSelect?.(null);
+    }
+    requestFrame();
+  }
+  function onPointerLeave() {
+    if (drag) return;
+    if (hoveredId !== null) {
+      hoveredId = null;
+      callbacks.onHover?.(null);
+      requestFrame();
+    }
+  }
+  function onWheel(event) {
+    event.preventDefault();
+    const rect = canvas.getBoundingClientRect();
+    zoomBy(Math.exp(-event.deltaY * 15e-4), {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top
+    });
+  }
+  function onDoubleClick(event) {
+    const node = hitTest(event.clientX, event.clientY);
+    if (node) {
+      callbacks.onOpen?.(node);
+      return;
+    }
+    resetView();
+  }
+  function onContextMenu(event) {
+    const node = hitTest(event.clientX, event.clientY);
+    if (!node) return;
+    event.preventDefault();
+    callbacks.onContextMenu?.(node, event.clientX, event.clientY);
+  }
+  function onKeyDown(event) {
+    const step = event.shiftKey ? 120 : 40;
+    switch (event.key) {
+      case "+":
+      case "=":
+        event.preventDefault();
+        zoomBy(1.2);
+        return;
+      case "-":
+      case "_":
+        event.preventDefault();
+        zoomBy(1 / 1.2);
+        return;
+      case "ArrowLeft":
+        event.preventDefault();
+        pendingFit = false;
+        camera = { ...camera, x: camera.x + step };
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        pendingFit = false;
+        camera = { ...camera, x: camera.x - step };
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        pendingFit = false;
+        camera = { ...camera, y: camera.y + step };
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        pendingFit = false;
+        camera = { ...camera, y: camera.y - step };
+        break;
+      case "Escape":
+        selectedId = null;
+        callbacks.onSelect?.(null);
+        break;
+      case "Enter": {
+        const node = visible.nodes.find(
+          (entry) => entry.id === (hoveredId ?? selectedId)
+        ) ?? null;
+        if (node) {
+          event.preventDefault();
+          callbacks.onOpen?.(node);
+        }
+        return;
+      }
+      case "n":
+      case "N":
+      case "p":
+      case "P": {
+        const index = visible.nodes.findIndex(
+          (entry) => entry.id === selectedId
+        );
+        if (visible.nodes.length === 0) return;
+        event.preventDefault();
+        const direction = event.key.toLowerCase() === "n" ? 1 : -1;
+        const next = visible.nodes[(index + direction + visible.nodes.length) % visible.nodes.length];
+        if (next) {
+          selectedId = next.id;
+          callbacks.onSelect?.(next);
+          focusNode(next.id);
+          requestFrame();
+        }
+        return;
+      }
+      default:
+        return;
+    }
+    requestFrame();
+  }
+  function relatedIds() {
+    const origin = hoveredId;
+    const related = /* @__PURE__ */ new Set();
+    if (!origin) return related;
+    related.add(origin);
+    for (const link of visible.links) {
+      if (link.source === origin) related.add(link.target);
+      if (link.target === origin) related.add(link.source);
+    }
+    return related;
+  }
+  function nodeColor(node) {
+    if (node.color) return node.color;
+    switch (node.kind) {
+      case "unresolved":
+      case "attachment":
+        return colors.muted;
+      case "tag":
+        return colors.link;
+      case "note":
+        return colors.accent;
+    }
+  }
+  function segmentVisible(x1, y1, x2, y2) {
+    return !(Math.max(x1, x2) < 0 || Math.max(y1, y2) < 0 || Math.min(x1, x2) > size.width || Math.min(y1, y2) > size.height);
+  }
+  function destroy() {
+    if (destroyed) return;
+    destroyed = true;
+    if (frameHandle !== null) cancelAnimationFrame(frameHandle);
+    frameHandle = null;
+    simulation?.stop();
+    resizeObserver.disconnect();
+    intersectionObserver.disconnect();
+    mutationObserver.disconnect();
+    document.removeEventListener("visibilitychange", onVisibilityChange);
+    canvas.removeEventListener("pointerdown", onPointerDown);
+    canvas.removeEventListener("pointermove", onPointerMove);
+    canvas.removeEventListener("pointerup", onPointerUp);
+    canvas.removeEventListener("pointercancel", onPointerUp);
+    canvas.removeEventListener("pointerleave", onPointerLeave);
+    canvas.removeEventListener("wheel", onWheel);
+    canvas.removeEventListener("dblclick", onDoubleClick);
+    canvas.removeEventListener("contextmenu", onContextMenu);
+    canvas.removeEventListener("keydown", onKeyDown);
+  }
+}
+function forceOptions(settings) {
+  return {
+    centerForce: settings.centerForce,
+    repelForce: settings.repelForce,
+    linkForce: settings.linkForce,
+    linkDistance: settings.linkDistance
+  };
+}
+function visibleSignature(visible) {
+  return `${visible.nodes.map((node) => node.id).join("\0")}|${visible.links.map((link) => `${link.source}>${link.target}`).join("\0")}`;
+}
+function readColors(canvas) {
+  const style = getComputedStyle(canvas);
+  return {
+    background: css(style, "--rb-color-paper", "#ffffff"),
+    accent: css(style, "--rb-color-accent", "#2563eb"),
+    link: css(style, "--rb-color-link", "#2563eb"),
+    ink: css(style, "--rb-color-ink", "#1f2937"),
+    muted: css(style, "--rb-color-muted", "#6b7280"),
+    edge: css(style, "--rb-color-border-strong", "#94a3b8"),
+    label: css(style, "--rb-color-ink", "#1f2937"),
+    focus: css(style, "--rb-color-focus", "#2563eb")
+  };
+}
+function css(style, name, fallback) {
+  const value = style.getPropertyValue(name).trim();
+  return value.length > 0 ? value : fallback;
+}
+function withAlpha(color2, alpha) {
+  const clamped = clamp2(alpha, 0, 1);
+  if (color2.startsWith("#")) {
+    const hex = color2.length === 4 ? color2.slice(1).split("").map((character) => character + character).join("") : color2.slice(1);
+    if (hex.length === 6 && /^[0-9a-f]{6}$/i.test(hex)) {
+      const red = Number.parseInt(hex.slice(0, 2), 16);
+      const green = Number.parseInt(hex.slice(2, 4), 16);
+      const blue = Number.parseInt(hex.slice(4, 6), 16);
+      return `rgba(${red}, ${green}, ${blue}, ${clamped})`;
+    }
+  }
+  if (color2.startsWith("rgb(")) {
+    return color2.replace("rgb(", "rgba(").replace(")", `, ${clamped})`);
+  }
+  return color2;
+}
+function truncateLabel(title) {
+  return title.length > 34 ? `${title.slice(0, 33)}…` : title;
+}
+function clamp2(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function createNoopRenderer() {
+  return {
+    update() {
+    },
+    setSelected() {
+    },
+    zoomBy() {
+    },
+    resetView() {
+    },
+    focusNode() {
+    },
+    playAnimation() {
+    },
+    stopAnimation() {
+    },
+    isAnimating: () => false,
+    destroy() {
+    }
+  };
+}
+
+// ui.tsx
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+var GROUP_COLORS2 = [
+  "#e07a5f",
+  "#3d85c6",
+  "#6aa84f",
+  "#c27ba0",
+  "#e6b422",
+  "#7c6ee6"
+];
+function GraphView(props) {
+  const mode = props.mode ?? "global";
+  const [settings, setSettings] = useState(
+    () => normalizeGraphSettings({
+      ...DEFAULT_GRAPH_SETTINGS,
+      ...props.initialSettings,
+      search: props.search ?? props.initialSettings?.search ?? "",
+      depth: Math.min(
+        props.initialSettings?.depth ?? DEFAULT_GRAPH_SETTINGS.depth,
+        props.maxDepth ?? GRAPH_SETTINGS_RANGES.depth.max
+      )
+    })
+  );
+  const [storageReady, setStorageReady] = useState(false);
+  const [panelOpen, setPanelOpen] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const [selected, setSelected] = useState(
+    props.selectedId ?? null
+  );
+  const [hovered, setHovered] = useState(null);
+  const [animating, setAnimating] = useState(false);
+  const [reducedMotion, setReducedMotion] = useState(false);
+  const [contextMenu, setContextMenu] = useState(null);
+  const canvasRef = useRef(null);
+  const rendererRef = useRef(null);
+  const groupCounter = useRef(0);
+  const selectedId = props.selectedId !== void 0 ? props.selectedId : selected;
+  const visible = useMemo(
+    () => buildVisibleGraph({
+      document: props.document,
+      settings,
+      mode,
+      centerId: props.centerId
+    }),
+    [props.document, settings, mode, props.centerId]
+  );
+  const dated = useMemo(() => hasDatedNodes(visible.nodes), [visible.nodes]);
+  const callbacksRef = useRef({});
+  callbacksRef.current = {
+    onSelect(node) {
+      setSelected(node?.id ?? null);
+      props.onSelect?.(node);
+    },
+    onOpen(node) {
+      if (props.onOpen) {
+        props.onOpen(node);
+        return;
+      }
+      if (node.permalink) window.location.href = node.permalink;
+    },
+    onHover(node) {
+      setHovered(node?.id ?? null);
+    },
+    onContextMenu(node, x, y) {
+      setContextMenu({
+        node,
+        x: Math.min(x, window.innerWidth - 230),
+        y: Math.min(y, window.innerHeight - 220)
+      });
+    },
+    onAnimationChange(value) {
+      setAnimating(value);
+    }
+  };
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReducedMotion(media.matches);
+    const renderer = createGraphRenderer({
+      canvas,
+      reducedMotion: media.matches,
+      onSelect: (node) => callbacksRef.current.onSelect?.(node),
+      onOpen: (node) => callbacksRef.current.onOpen?.(node),
+      onHover: (node) => callbacksRef.current.onHover?.(node),
+      onContextMenu: (node, x, y) => callbacksRef.current.onContextMenu?.(node, x, y),
+      onAnimationChange: (value) => callbacksRef.current.onAnimationChange?.(value)
+    });
+    rendererRef.current = renderer;
+    return () => {
+      renderer.destroy();
+      rendererRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    rendererRef.current?.update({
+      document: props.document,
+      settings,
+      mode,
+      centerId: props.centerId,
+      selectedId
+    });
+  }, [props.document, props.centerId, settings, mode, selectedId]);
+  useEffect(() => {
+    if (!props.storageKey) {
+      setStorageReady(true);
+      return;
+    }
+    const stored = readStoredGraphSettings(
+      window.localStorage,
+      props.storageKey
+    );
+    if (stored) {
+      setSettings(
+        (current) => normalizeGraphSettings({
+          ...current,
+          ...stored,
+          depth: Math.min(
+            stored.depth,
+            props.maxDepth ?? GRAPH_SETTINGS_RANGES.depth.max
+          )
+        })
+      );
+    }
+    setStorageReady(true);
+  }, [props.storageKey]);
+  useEffect(() => {
+    if (!storageReady || !props.storageKey) return;
+    writeStoredGraphSettings(window.localStorage, props.storageKey, settings);
+  }, [settings, storageReady, props.storageKey]);
+  useEffect(() => {
+    if (props.search === void 0) return;
+    setSettings(
+      (current) => current.search === props.search ? current : { ...current, search: props.search ?? "" }
+    );
+  }, [props.search]);
+  useEffect(() => {
+    const renderer = rendererRef.current;
+    if (!renderer) return;
+    if (settings.animate) renderer.playAnimation();
+    else renderer.stopAnimation();
+  }, [settings.animate]);
+  useEffect(() => {
+    if (!panelOpen && !expanded && !contextMenu) return;
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      if (contextMenu) {
+        setContextMenu(null);
+        return;
+      }
+      if (panelOpen) setPanelOpen(false);
+      if (expanded) setExpanded(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [panelOpen, expanded, contextMenu]);
+  useEffect(() => {
+    if (!contextMenu) return;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (target instanceof Element && target.closest(".rr-graph__menu")) {
+        return;
+      }
+      setContextMenu(null);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [contextMenu]);
+  useEffect(() => {
+    if (!expanded) return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, [expanded]);
+  const patch = (next) => {
+    setSettings((current) => ({ ...current, ...next }));
+  };
+  const updateSearch = (value) => {
+    patch({ search: value });
+    props.onSearchChange?.(value);
+  };
+  const addGroup = () => {
+    groupCounter.current += 1;
+    const group = {
+      id: `group-${Date.now().toString(36)}-${groupCounter.current}`,
+      query: "",
+      color: GROUP_COLORS2[settings.groups.length % GROUP_COLORS2.length] ?? "#6aa84f"
+    };
+    patch({ groups: [...settings.groups, group] });
+  };
+  const updateGroup = (id, next) => {
+    patch({
+      groups: settings.groups.map(
+        (group) => group.id === id ? { ...group, ...next } : group
+      )
+    });
+  };
+  const moveGroup = (id, direction) => {
+    const index = settings.groups.findIndex((group2) => group2.id === id);
+    const target = index + direction;
+    if (index < 0 || target < 0 || target >= settings.groups.length) return;
+    const groups2 = [...settings.groups];
+    const [group] = groups2.splice(index, 1);
+    if (!group) return;
+    groups2.splice(target, 0, group);
+    patch({ groups: groups2 });
+  };
+  const removeGroup = (id) => {
+    patch({ groups: settings.groups.filter((group) => group.id !== id) });
+  };
+  const restoreDefaults = () => {
+    setSettings(
+      normalizeGraphSettings({
+        ...DEFAULT_GRAPH_SETTINGS,
+        ...props.initialSettings,
+        search: props.search ?? "",
+        depth: Math.min(
+          props.initialSettings?.depth ?? DEFAULT_GRAPH_SETTINGS.depth,
+          props.maxDepth ?? GRAPH_SETTINGS_RANGES.depth.max
+        )
+      })
+    );
+  };
+  const openFromMenu = (node) => {
+    setContextMenu(null);
+    if (props.onOpen) props.onOpen(node);
+    else if (node.permalink) window.location.href = node.permalink;
+  };
+  const copyLink = async (node) => {
+    setContextMenu(null);
+    if (!node.permalink) return;
+    const url = new URL(node.permalink, window.location.origin).href;
+    try {
+      await navigator.clipboard.writeText(url);
+    } catch {
+      return;
+    }
+  };
+  const focusLocal = (node) => {
+    setContextMenu(null);
+    if (props.onShowLocal) {
+      props.onShowLocal(node);
+      return;
+    }
+    if (node.slug)
+      window.location.href = `/explore?note=${encodeURIComponent(node.slug)}`;
+  };
+  const rootClass = [
+    "rr-graph",
+    expanded ? "rr-graph--expanded" : "",
+    props.class ?? ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: rootClass,
+      "data-graph-mode": mode,
+      "data-node-count": visible.nodes.length,
+      "data-link-count": visible.links.length,
+      "data-reduced-motion": reducedMotion ? "true" : "false",
+      children: [
+        props.showHeader !== false ? /* @__PURE__ */ jsxs("div", { class: "rr-graph__header", children: [
+          /* @__PURE__ */ jsx("h2", { class: "rr-graph__title", children: props.heading ?? "Graph" }),
+          /* @__PURE__ */ jsxs("span", { class: "rr-graph__count", "aria-live": "polite", children: [
+            visible.nodes.length,
+            " nodes · ",
+            visible.links.length,
+            " links"
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsxs("div", { class: "rr-graph__toolbar", children: [
+          props.showModeLabel !== false || visible.unsupportedOperators.length > 0 ? /* @__PURE__ */ jsxs("span", { class: "rr-graph__status", children: [
+            props.showModeLabel !== false ? mode === "local" ? "Local graph" : "Global graph" : null,
+            visible.unsupportedOperators.length > 0 ? /* @__PURE__ */ jsxs("span", { class: "rr-graph__warning", children: [
+              "Unsupported operators: ",
+              visible.unsupportedOperators.join(", ")
+            ] }) : null
+          ] }) : null,
+          /* @__PURE__ */ jsxs("div", { class: "rr-graph__actions", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Zoom out",
+                onClick: () => rendererRef.current?.zoomBy(1 / 1.2),
+                children: "−"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Zoom in",
+                onClick: () => rendererRef.current?.zoomBy(1.2),
+                children: "+"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => rendererRef.current?.resetView(),
+                children: "Reset"
+              }
+            ),
+            props.expandable ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": expanded,
+                "aria-label": expanded ? "Exit full screen graph" : "Expand graph",
+                onClick: () => setExpanded((value) => !value),
+                children: expanded ? "Close" : "Expand"
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                class: "rr-graph__settings-toggle",
+                "aria-label": "Graph settings",
+                "aria-expanded": panelOpen,
+                "aria-controls": "rr-graph-settings",
+                onClick: () => setPanelOpen((value) => !value),
+                children: /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    width: "18",
+                    height: "18",
+                    "aria-hidden": "true",
+                    fill: "none",
+                    stroke: "currentColor",
+                    "stroke-width": "1.8",
+                    children: [
+                      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+                      /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1a1.7 1.7 0 0 0 1.9.3A1.7 1.7 0 0 0 10 3V2.8h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1Z" })
+                    ]
+                  }
+                )
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { class: "rr-graph__stage", children: [
+          /* @__PURE__ */ jsx(
+            "canvas",
+            {
+              ref: canvasRef,
+              class: "rr-graph__canvas",
+              tabindex: 0,
+              "aria-label": `${mode === "local" ? "Local" : "Global"} note graph. Use plus and minus to zoom, arrow keys to pan, Enter to open the selected note.`
+            }
+          ),
+          /* @__PURE__ */ jsx("noscript", { children: /* @__PURE__ */ jsx("ul", { class: "rr-graph__fallback", children: visible.nodes.filter((node) => node.kind === "note" && node.permalink).slice(0, 60).map((node) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: node.permalink ?? "#", children: node.title }) }, node.id)) }) }),
+          contextMenu ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              class: "rr-graph__menu",
+              role: "menu",
+              style: `left:${contextMenu.x}px;top:${contextMenu.y}px`,
+              children: [
+                /* @__PURE__ */ jsx("p", { class: "rr-graph__menu-title", children: contextMenu.node.title }),
+                contextMenu.node.permalink ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    onClick: () => openFromMenu(contextMenu.node),
+                    children: "Open note"
+                  }
+                ) : null,
+                contextMenu.node.permalink ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    onClick: () => window.open(
+                      contextMenu.node.permalink ?? "",
+                      "_blank",
+                      "noopener"
+                    ),
+                    children: "Open in new tab"
+                  }
+                ) : null,
+                contextMenu.node.permalink ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    onClick: () => void copyLink(contextMenu.node),
+                    children: "Copy link"
+                  }
+                ) : null,
+                contextMenu.node.slug ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    onClick: () => focusLocal(contextMenu.node),
+                    children: mode === "global" ? "Show local graph" : "Open in Explorer"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    onClick: () => {
+                      const node = contextMenu.node;
+                      setContextMenu(null);
+                      updateSearch(
+                        node.kind === "tag" ? `tag:${node.id.slice("tag:".length)}` : `"${node.title}"`
+                      );
+                    },
+                    children: "Filter to this node"
+                  }
+                )
+              ]
+            }
+          ) : null,
+          panelOpen ? /* @__PURE__ */ jsxs(
+            "aside",
+            {
+              id: "rr-graph-settings",
+              class: "rr-graph__settings",
+              "aria-label": "Graph settings",
+              children: [
+                /* @__PURE__ */ jsxs("div", { class: "rr-graph__settings-header", children: [
+                  /* @__PURE__ */ jsx("h3", { children: "Graph settings" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Close graph settings",
+                      onClick: () => setPanelOpen(false),
+                      children: "×"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("details", { open: true, children: [
+                  /* @__PURE__ */ jsx("summary", { children: "Filters" }),
+                  /* @__PURE__ */ jsxs("div", { class: "rr-graph__field", children: [
+                    /* @__PURE__ */ jsx("label", { for: "rr-graph-search", children: "Search files" }),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        id: "rr-graph-search",
+                        type: "search",
+                        value: settings.search,
+                        placeholder: "tag:#topic path:notes file:title",
+                        onInput: (event) => updateSearch(
+                          event.currentTarget.value
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("p", { class: "rr-graph__help", children: "Supports file:, path:, tag:, quotes, and -negation." })
+                  ] }),
+                  /* @__PURE__ */ jsxs("label", { class: "rr-graph__check", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: settings.showTags,
+                        onChange: (event) => patch({
+                          showTags: event.currentTarget.checked
+                        })
+                      }
+                    ),
+                    "Tags"
+                  ] }),
+                  /* @__PURE__ */ jsxs("label", { class: "rr-graph__check", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: settings.showAttachments,
+                        onChange: (event) => patch({
+                          showAttachments: event.currentTarget.checked
+                        })
+                      }
+                    ),
+                    "Attachments"
+                  ] }),
+                  /* @__PURE__ */ jsxs("label", { class: "rr-graph__check", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: settings.existingOnly,
+                        onChange: (event) => patch({
+                          existingOnly: event.currentTarget.checked
+                        })
+                      }
+                    ),
+                    "Existing files only"
+                  ] }),
+                  /* @__PURE__ */ jsxs("label", { class: "rr-graph__check", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: settings.showOrphans,
+                        onChange: (event) => patch({
+                          showOrphans: event.currentTarget.checked
+                        })
+                      }
+                    ),
+                    "Orphans"
+                  ] }),
+                  mode === "local" ? /* @__PURE__ */ jsx(
+                    RangeField,
+                    {
+                      label: "Depth",
+                      value: settings.depth,
+                      range: {
+                        ...GRAPH_SETTINGS_RANGES.depth,
+                        max: Math.min(
+                          GRAPH_SETTINGS_RANGES.depth.max,
+                          props.maxDepth ?? GRAPH_SETTINGS_RANGES.depth.max
+                        )
+                      },
+                      onInput: (value) => patch({ depth: value })
+                    }
+                  ) : null
+                ] }),
+                /* @__PURE__ */ jsxs("details", { open: true, children: [
+                  /* @__PURE__ */ jsx("summary", { children: "Groups" }),
+                  /* @__PURE__ */ jsxs("div", { class: "rr-graph__groups", children: [
+                    settings.groups.length === 0 ? /* @__PURE__ */ jsx("p", { class: "rr-graph__help", children: "Groups color nodes that match a query. The first match wins." }) : null,
+                    settings.groups.map((group, index) => /* @__PURE__ */ jsxs("div", { class: "rr-graph__group", children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "color",
+                          value: group.color,
+                          "aria-label": `Group ${index + 1} color`,
+                          onInput: (event) => updateGroup(group.id, {
+                            color: event.currentTarget.value
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "text",
+                          value: group.query,
+                          placeholder: "tag:#topic",
+                          "aria-label": `Group ${index + 1} query`,
+                          onInput: (event) => updateGroup(group.id, {
+                            query: event.currentTarget.value
+                          })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": `Move group ${index + 1} up`,
+                          onClick: () => moveGroup(group.id, -1),
+                          children: "↑"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": `Move group ${index + 1} down`,
+                          onClick: () => moveGroup(group.id, 1),
+                          children: "↓"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": `Delete group ${index + 1}`,
+                          onClick: () => removeGroup(group.id),
+                          children: "×"
+                        }
+                      )
+                    ] }, group.id)),
+                    /* @__PURE__ */ jsx("button", { type: "button", onClick: addGroup, children: "New group" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("details", { open: true, children: [
+                  /* @__PURE__ */ jsx("summary", { children: "Display" }),
+                  /* @__PURE__ */ jsxs("label", { class: "rr-graph__check", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: settings.arrows,
+                        onChange: (event) => patch({
+                          arrows: event.currentTarget.checked
+                        })
+                      }
+                    ),
+                    "Arrows"
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    RangeField,
+                    {
+                      label: "Text fade threshold",
+                      value: settings.textFade,
+                      range: GRAPH_SETTINGS_RANGES.textFade,
+                      onInput: (value) => patch({ textFade: value })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    RangeField,
+                    {
+                      label: "Node size",
+                      value: settings.nodeSize,
+                      range: GRAPH_SETTINGS_RANGES.nodeSize,
+                      onInput: (value) => patch({ nodeSize: value })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    RangeField,
+                    {
+                      label: "Link thickness",
+                      value: settings.linkThickness,
+                      range: GRAPH_SETTINGS_RANGES.linkThickness,
+                      onInput: (value) => patch({ linkThickness: value })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("label", { class: "rr-graph__check", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: settings.animate,
+                        onChange: (event) => patch({
+                          animate: event.currentTarget.checked
+                        })
+                      }
+                    ),
+                    "Animate"
+                  ] }),
+                  settings.animate ? /* @__PURE__ */ jsxs("div", { class: "rr-graph__animate-actions", children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => rendererRef.current?.playAnimation(),
+                        disabled: animating || reducedMotion,
+                        children: "Play"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => rendererRef.current?.stopAnimation(),
+                        disabled: !animating,
+                        children: "Stop"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => rendererRef.current?.playAnimation(),
+                        disabled: reducedMotion,
+                        children: "Replay"
+                      }
+                    )
+                  ] }) : null,
+                  settings.animate && !dated ? /* @__PURE__ */ jsx("p", { class: "rr-graph__help", children: "No publication dates are available. Notes appear in a stable sequential order instead." }) : null,
+                  settings.animate && reducedMotion ? /* @__PURE__ */ jsx("p", { class: "rr-graph__help", children: "Reduced motion is enabled, so all nodes are shown immediately." }) : null
+                ] }),
+                /* @__PURE__ */ jsxs("details", { open: true, children: [
+                  /* @__PURE__ */ jsx("summary", { children: "Forces" }),
+                  /* @__PURE__ */ jsx(
+                    RangeField,
+                    {
+                      label: "Center force",
+                      value: settings.centerForce,
+                      range: GRAPH_SETTINGS_RANGES.centerForce,
+                      onInput: (value) => patch({ centerForce: value })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    RangeField,
+                    {
+                      label: "Repel force",
+                      value: settings.repelForce,
+                      range: GRAPH_SETTINGS_RANGES.repelForce,
+                      onInput: (value) => patch({ repelForce: value })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    RangeField,
+                    {
+                      label: "Link force",
+                      value: settings.linkForce,
+                      range: GRAPH_SETTINGS_RANGES.linkForce,
+                      onInput: (value) => patch({ linkForce: value })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    RangeField,
+                    {
+                      label: "Link distance",
+                      value: settings.linkDistance,
+                      range: GRAPH_SETTINGS_RANGES.linkDistance,
+                      onInput: (value) => patch({ linkDistance: value })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("button", { type: "button", onClick: restoreDefaults, children: "Restore default settings" })
+                ] }),
+                /* @__PURE__ */ jsx("p", { class: "rr-graph__selection", "aria-live": "polite", children: hovered ? `Hover: ${visible.nodes.find((node) => node.id === hovered)?.title ?? ""}` : selectedId ? `Selected: ${visible.nodes.find((node) => node.id === selectedId)?.title ?? ""}` : "Hover or select a node to highlight its links." })
+              ]
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+function RangeField(props) {
+  return /* @__PURE__ */ jsxs("label", { class: "rr-graph__range", children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      props.label,
+      /* @__PURE__ */ jsx("output", { children: formatValue(props.value, props.range.step) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        min: props.range.min,
+        max: props.range.max,
+        step: props.range.step,
+        value: props.value,
+        onInput: (event) => props.onInput(Number(event.currentTarget.value))
+      }
+    )
+  ] });
+}
+function formatValue(value, step) {
+  return step >= 1 ? String(Math.round(value)) : value.toFixed(2);
+}
+export {
+  GraphView as default
+};