@riebeckite/graph 0.0.0-stage → 0.0.36

package/dist/client.js

@@ -0,0 +1,1290 @@
+// 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;
+}
+
+// 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/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 groups = settings.groups.map((group) => ({
+    group,
+    query: parseGraphQuery(group.query)
+  }));
+  const unsupportedOperators = new Set(search.unsupportedOperators);
+  for (const entry of groups) {
+    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, groups);
+    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, groups) {
+  for (const entry of groups) {
+    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 = clamp(
+      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 = clamp(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 = clamp(
+        (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 = clamp((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(color, alpha) {
+  const clamped = clamp(alpha, 0, 1);
+  if (color.startsWith("#")) {
+    const hex = color.length === 4 ? color.slice(1).split("").map((character) => character + character).join("") : color.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 (color.startsWith("rgb(")) {
+    return color.replace("rgb(", "rgba(").replace(")", `, ${clamped})`);
+  }
+  return color;
+}
+function truncateLabel(title) {
+  return title.length > 34 ? `${title.slice(0, 33)}…` : title;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function createNoopRenderer() {
+  return {
+    update() {
+    },
+    setSelected() {
+    },
+    zoomBy() {
+    },
+    resetView() {
+    },
+    focusNode() {
+    },
+    playAnimation() {
+    },
+    stopAnimation() {
+    },
+    isAnimating: () => false,
+    destroy() {
+    }
+  };
+}
+export {
+  createGraphRenderer
+};