papyr-react 1.0.0

package/dist/index.js

@@ -0,0 +1,3178 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo, useCallback, useRef, useLayoutEffect, createContext, useContext, memo } from 'react';
+import { createPortal } from 'react-dom';
+import clsx from 'clsx';
+import { select } from 'd3-selection';
+import { zoomIdentity, zoom } from 'd3-zoom';
+import { drag } from 'd3-drag';
+import { forceSimulation, forceLink, forceManyBody, forceCollide, forceCenter } from 'd3-force';
+import { createRoot } from 'react-dom/client';
+import { importSearchIndex, searchNotes } from 'papyr-core/runtime';
+import { useFloating, autoUpdate, offset, flip, shift } from '@floating-ui/react';
+
+const shell = "_shell_j3ea5_1";
+const root = "_root_j3ea5_8";
+const canvas$1 = "_canvas_j3ea5_16";
+const fullscreenButton = "_fullscreenButton_j3ea5_27";
+const fullscreenOverlay = "_fullscreenOverlay_j3ea5_49";
+const fullscreenBackdrop = "_fullscreenBackdrop_j3ea5_58";
+const fullscreenDialog = "_fullscreenDialog_j3ea5_65";
+const fullscreenHeader = "_fullscreenHeader_j3ea5_77";
+const fullscreenClose = "_fullscreenClose_j3ea5_86";
+const fullscreenBody = "_fullscreenBody_j3ea5_94";
+const fullscreenGraph = "_fullscreenGraph_j3ea5_99";
+const emptyState$2 = "_emptyState_j3ea5_104";
+const node$1 = "_node_j3ea5_115";
+const isActive = "_isActive_j3ea5_120";
+const label = "_label_j3ea5_124";
+const styles$f = {
+	shell: shell,
+	root: root,
+	canvas: canvas$1,
+	fullscreenButton: fullscreenButton,
+	fullscreenOverlay: fullscreenOverlay,
+	fullscreenBackdrop: fullscreenBackdrop,
+	fullscreenDialog: fullscreenDialog,
+	fullscreenHeader: fullscreenHeader,
+	fullscreenClose: fullscreenClose,
+	fullscreenBody: fullscreenBody,
+	fullscreenGraph: fullscreenGraph,
+	emptyState: emptyState$2,
+	node: node$1,
+	isActive: isActive,
+	label: label
+};
+
+const TEXT_FALLBACK_CHAR_WIDTH = 8.5;
+const TEXT_FALLBACK_HEIGHT = 15;
+const LABEL_MIN_WIDTH = 40;
+const LABEL_GAP_Y = 8;
+const LABEL_EXTRA_PAD_X = 8;
+const LABEL_EXTRA_PAD_Y = 6;
+const TEXT_STROKE_PAD = 2;
+const AUTO_ZOOM_PADDING = 48;
+const DEFAULT_ZOOM_EXTENT = [0.35, 4];
+const LABEL_FONT_BASE_PX = 11;
+const LABEL_FONT_DISPLAY_SCALE = 1;
+const LABEL_FONT_SCALE_MIN = 0.8;
+const LABEL_FONT_SCALE_MAX = 1.5;
+const NODE_RADIUS_MIN = 5;
+const NODE_RADIUS_MAX = 14;
+const NODE_RADIUS_POWER = 0.5;
+const NODE_RADIUS_SCALE = 1;
+const NODE_RADIUS_MIN_SCALED = NODE_RADIUS_MIN * NODE_RADIUS_SCALE;
+const hasNodePosition = (node) => {
+  return typeof node.x === "number" && Number.isFinite(node.x) && typeof node.y === "number" && Number.isFinite(node.y);
+};
+function getNodeLabelSize(d, labelScale = 1) {
+  const text = d.node.label ?? d.node.id;
+  const width = (d.textWidth ?? Math.max(text.length * TEXT_FALLBACK_CHAR_WIDTH, LABEL_MIN_WIDTH)) + TEXT_STROKE_PAD;
+  const height = (d.textHeight ?? TEXT_FALLBACK_HEIGHT) + TEXT_STROKE_PAD;
+  return { width: width * labelScale, height: height * labelScale };
+}
+function getNodeVisualExtent(d, labelScale = 1) {
+  const r = d.radius;
+  const { width, height } = getNodeLabelSize(d, labelScale);
+  const halfWidth = Math.max(r, width / 2) + LABEL_EXTRA_PAD_X;
+  const top = r + LABEL_EXTRA_PAD_Y;
+  const bottom = r + LABEL_GAP_Y + height + LABEL_EXTRA_PAD_Y;
+  return { halfWidth, top, bottom };
+}
+const clamp = (value, min, max) => {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+};
+const computeGraphBounds = (nodes, labelScale = 1) => {
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+  let hasAny = false;
+  for (const node of nodes) {
+    if (!hasNodePosition(node)) {
+      continue;
+    }
+    const { halfWidth, top, bottom } = getNodeVisualExtent(node, labelScale);
+    const nodeMinX = node.x - halfWidth;
+    const nodeMaxX = node.x + halfWidth;
+    const nodeMinY = node.y - top;
+    const nodeMaxY = node.y + bottom;
+    hasAny = true;
+    if (nodeMinX < minX) minX = nodeMinX;
+    if (nodeMaxX > maxX) maxX = nodeMaxX;
+    if (nodeMinY < minY) minY = nodeMinY;
+    if (nodeMaxY > maxY) maxY = nodeMaxY;
+  }
+  if (!hasAny) {
+    return null;
+  }
+  return { minX, maxX, minY, maxY };
+};
+const NODE_COLOR_FALLBACK = "var(--papyr-graph-node, rgba(255, 255, 255, 0.85))";
+const NODE_OUTLINE = "var(--papyr-graph-stroke, rgba(0, 0, 0, 0.25))";
+const LINK_COLOR = "var(--papyr-graph-link, rgba(255, 255, 255, 0.25))";
+const LINK_HIGHLIGHT_COLOR = "var(--papyr-graph-link-active, rgba(255, 255, 255, 0.6))";
+const LINK_STROKE_WIDTH = 1;
+const LINK_HIGHLIGHT_STROKE_WIDTH = 1.5;
+const BASE_LINK_OPACITY = 0.7;
+const DIMMED_LINK_OPACITY = 0.08;
+const FOCUS_LINK_OPACITY = 0.7;
+const HIGHLIGHT_LINK_OPACITY = 1;
+const DIMMED_NODE_OPACITY = 0.4;
+function normalizeGraph(graph, filterNode) {
+  if (!graph) {
+    return {
+      nodes: [],
+      links: [],
+      adjacency: /* @__PURE__ */ new Map()
+    };
+  }
+  const nodes = [];
+  const adjacency = /* @__PURE__ */ new Map();
+  for (const [, node] of graph.nodes) {
+    if (filterNode && !filterNode(node)) {
+      continue;
+    }
+    nodes.push(node);
+    adjacency.set(node.id, /* @__PURE__ */ new Set());
+  }
+  if (nodes.length === 0) {
+    return { nodes, links: [], adjacency };
+  }
+  const allowed = new Set(nodes.map((node) => node.id));
+  const links = [];
+  for (const edge of graph.edges) {
+    const { source, target } = edge;
+    if (!allowed.has(source) || !allowed.has(target) || source === target) {
+      continue;
+    }
+    adjacency.get(source)?.add(target);
+    adjacency.get(target)?.add(source);
+    links.push({ source, target });
+  }
+  return { nodes, links, adjacency };
+}
+function getNeighborhood(graph, slug) {
+  const neighbors = /* @__PURE__ */ new Set([slug]);
+  graph.edges.forEach((edge) => {
+    if (edge.source === slug) {
+      neighbors.add(edge.target);
+    }
+    if (edge.target === slug) {
+      neighbors.add(edge.source);
+    }
+  });
+  return neighbors;
+}
+const resolveLinkEndpointId = (value) => {
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number") {
+    return String(value);
+  }
+  return value.id;
+};
+const resolveLinkCoordinate = (value, axis) => {
+  if (typeof value === "object" && value !== null) {
+    return axis === "x" ? value.x ?? 0 : value.y ?? 0;
+  }
+  return 0;
+};
+const GraphCanvas = ({
+  graph,
+  className,
+  filterNode,
+  focusPredicate,
+  nodeColor,
+  zoomExtent,
+  focusNodeId = null,
+  onNodeSelect
+}) => {
+  const containerRef = useRef(null);
+  const svgRef = useRef(null);
+  const zoomBehaviorRef = useRef(null);
+  const transformRef = useRef(zoomIdentity);
+  const simulationRef = useRef(null);
+  const nodeLookupRef = useRef(/* @__PURE__ */ new Map());
+  const hoveredNodeRef = useRef(null);
+  const pendingFocusRef = useRef(null);
+  const draggingNodeRef = useRef(null);
+  const labelLayerRef = useRef(null);
+  const autoZoomPendingRef = useRef(false);
+  const autoZoomFrameRef = useRef(null);
+  const autoZoomReadyRef = useRef(false);
+  const labelFontScaleRef = useRef(LABEL_FONT_DISPLAY_SCALE);
+  const [activeNode, setActiveNode] = useState(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  useLayoutEffect(() => {
+    const element = containerRef.current;
+    if (!element) {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) {
+        return;
+      }
+      const { width, height } = entry.contentRect;
+      setDimensions({
+        width: Math.max(200, Math.floor(width)),
+        height: Math.max(240, Math.floor(height))
+      });
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  const normalized = useMemo(() => normalizeGraph(graph, filterNode), [graph, filterNode]);
+  const hasGraph = normalized.nodes.length > 0;
+  const resolvedZoomExtent = zoomExtent ?? DEFAULT_ZOOM_EXTENT;
+  useEffect(() => {
+    setActiveNode(focusNodeId ?? null);
+  }, [focusNodeId]);
+  const focusMatches = useMemo(() => {
+    if (!focusPredicate) {
+      return null;
+    }
+    const matches = /* @__PURE__ */ new Set();
+    for (const node of normalized.nodes) {
+      if (focusPredicate(node)) {
+        matches.add(node.id);
+      }
+    }
+    return matches;
+  }, [focusPredicate, normalized.nodes]);
+  const resolvedNodeColor = useCallback(
+    (node) => {
+      if (nodeColor) {
+        return nodeColor(node);
+      }
+      return NODE_COLOR_FALLBACK;
+    },
+    [nodeColor]
+  );
+  const { nodeWeights, maxWeight } = useMemo(() => {
+    const weights = /* @__PURE__ */ new Map();
+    let currentMax = 0;
+    for (const node of normalized.nodes) {
+      const metadataWeight = typeof node.metadata?.weight === "number" ? node.metadata.weight : null;
+      const degree = normalized.adjacency.get(node.id)?.size ?? 0;
+      const weight = metadataWeight ?? degree;
+      weights.set(node.id, weight);
+      if (weight > currentMax) {
+        currentMax = weight;
+      }
+    }
+    return { nodeWeights: weights, maxWeight: currentMax };
+  }, [normalized]);
+  const resolveNodeRadius = useCallback(
+    (weight) => {
+      if (!maxWeight || !Number.isFinite(maxWeight) || maxWeight <= 0) {
+        return NODE_RADIUS_MIN_SCALED;
+      }
+      if (!Number.isFinite(weight) || weight <= 0) {
+        return NODE_RADIUS_MIN_SCALED;
+      }
+      const normalizedWeight = clamp(weight / maxWeight, 0, 1);
+      const eased = Math.pow(normalizedWeight, NODE_RADIUS_POWER);
+      const base = NODE_RADIUS_MIN + eased * (NODE_RADIUS_MAX - NODE_RADIUS_MIN);
+      return base * NODE_RADIUS_SCALE;
+    },
+    [maxWeight]
+  );
+  const nodeData = useMemo(() => {
+    return normalized.nodes.map((node) => {
+      const weight = nodeWeights.get(node.id) ?? 0;
+      return {
+        id: node.id,
+        node,
+        weight,
+        radius: resolveNodeRadius(weight),
+        color: resolvedNodeColor(node)
+      };
+    });
+  }, [normalized.nodes, nodeWeights, resolveNodeRadius, resolvedNodeColor]);
+  const linkData = useMemo(() => {
+    return normalized.links.map((link, index) => ({
+      source: link.source,
+      target: link.target,
+      uid: `${link.source}::${link.target}::${index}`
+    }));
+  }, [normalized.links]);
+  const handleDefaultNavigation = useCallback((node) => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const permalink = typeof node.metadata?.permalink === "string" ? node.metadata.permalink : null;
+    const fallback = `#/note/${node.id}`;
+    const target = permalink && permalink.length > 0 ? permalink : fallback;
+    window.open(target, "_self");
+  }, []);
+  const focusOnNode = useCallback(
+    (datum) => {
+      if (!svgRef.current || !zoomBehaviorRef.current) {
+        return false;
+      }
+      if (!hasNodePosition(datum)) {
+        return false;
+      }
+      if (!dimensions.width || !dimensions.height) {
+        return false;
+      }
+      const currentScale = transformRef.current?.k ?? 1;
+      const tx = dimensions.width / 2 - currentScale * datum.x;
+      const ty = dimensions.height / 2 - currentScale * datum.y;
+      const nextTransform = zoomIdentity.translate(tx, ty).scale(currentScale);
+      transformRef.current = nextTransform;
+      select(svgRef.current).call(zoomBehaviorRef.current.transform, nextTransform);
+      return true;
+    },
+    [dimensions.height, dimensions.width]
+  );
+  const cancelAutoZoomFrame = useCallback(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    if (autoZoomFrameRef.current !== null) {
+      window.cancelAnimationFrame(autoZoomFrameRef.current);
+      autoZoomFrameRef.current = null;
+    }
+  }, []);
+  const applyLabelFontSize = useCallback(
+    (zoomScale) => {
+      if (!labelLayerRef.current) {
+        return;
+      }
+      const safeScale = clamp(zoomScale, 0.15, 6);
+      const labelScale = clamp(
+        LABEL_FONT_DISPLAY_SCALE / safeScale,
+        LABEL_FONT_SCALE_MIN,
+        LABEL_FONT_SCALE_MAX
+      );
+      labelFontScaleRef.current = labelScale;
+      const fontSizePx = LABEL_FONT_BASE_PX * labelScale;
+      select(labelLayerRef.current).selectAll("text[data-label]").style("font-size", `${fontSizePx}px`);
+    },
+    []
+  );
+  const applyAutoZoom = useCallback(() => {
+    if (!svgRef.current || !zoomBehaviorRef.current) {
+      return false;
+    }
+    if (!dimensions.width || !dimensions.height) {
+      return false;
+    }
+    const bounds = computeGraphBounds(nodeLookupRef.current.values(), labelFontScaleRef.current);
+    if (!bounds) {
+      return false;
+    }
+    const boundsWidth = bounds.maxX - bounds.minX;
+    const boundsHeight = bounds.maxY - bounds.minY;
+    if (!Number.isFinite(boundsWidth) || !Number.isFinite(boundsHeight)) {
+      return false;
+    }
+    const innerWidth = Math.max(1, dimensions.width - AUTO_ZOOM_PADDING * 2);
+    const innerHeight = Math.max(1, dimensions.height - AUTO_ZOOM_PADDING * 2);
+    const rawScale = Math.min(
+      1,
+      innerWidth / Math.max(boundsWidth, 1),
+      innerHeight / Math.max(boundsHeight, 1)
+    );
+    if (!Number.isFinite(rawScale) || rawScale <= 0) {
+      return false;
+    }
+    const [providedMin, providedMax] = resolvedZoomExtent;
+    const minScale = Math.min(providedMin, rawScale);
+    const maxScale = providedMax;
+    const scale = clamp(rawScale, minScale, maxScale);
+    let targetX = (bounds.minX + bounds.maxX) / 2;
+    let targetY = (bounds.minY + bounds.maxY) / 2;
+    const focusId = pendingFocusRef.current ?? activeNode;
+    if (focusId) {
+      const focusNode = nodeLookupRef.current.get(focusId);
+      if (focusNode && hasNodePosition(focusNode)) {
+        targetX = focusNode.x;
+        targetY = focusNode.y;
+      }
+    }
+    const tx = dimensions.width / 2 - scale * targetX;
+    const ty = dimensions.height / 2 - scale * targetY;
+    const nextTransform = zoomIdentity.translate(tx, ty).scale(scale);
+    transformRef.current = nextTransform;
+    const behavior = zoomBehaviorRef.current;
+    behavior.scaleExtent([minScale, maxScale]);
+    select(svgRef.current).call(behavior.transform, nextTransform);
+    return true;
+  }, [activeNode, dimensions.height, dimensions.width, resolvedZoomExtent]);
+  const scheduleAutoZoom = useCallback(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    autoZoomPendingRef.current = true;
+    if (autoZoomFrameRef.current !== null) {
+      return;
+    }
+    const tick = () => {
+      autoZoomFrameRef.current = null;
+      if (!autoZoomPendingRef.current) {
+        return;
+      }
+      const applied = applyAutoZoom();
+      if (applied) {
+        autoZoomPendingRef.current = false;
+        return;
+      }
+      autoZoomFrameRef.current = window.requestAnimationFrame(tick);
+    };
+    autoZoomFrameRef.current = window.requestAnimationFrame(tick);
+  }, [applyAutoZoom]);
+  const flushPendingFocus = useCallback(() => {
+    const targetId = pendingFocusRef.current;
+    if (!targetId) {
+      return;
+    }
+    const node = nodeLookupRef.current.get(targetId);
+    if (!node) {
+      return;
+    }
+    const didFocus = focusOnNode(node);
+    if (didFocus) {
+      pendingFocusRef.current = null;
+    }
+  }, [focusOnNode]);
+  useEffect(() => {
+    return () => {
+      autoZoomPendingRef.current = false;
+      cancelAutoZoomFrame();
+    };
+  }, [cancelAutoZoomFrame]);
+  useEffect(() => {
+    if (!hasGraph) {
+      autoZoomPendingRef.current = false;
+      cancelAutoZoomFrame();
+      return;
+    }
+    if (!autoZoomReadyRef.current) {
+      return;
+    }
+    scheduleAutoZoom();
+  }, [
+    hasGraph,
+    scheduleAutoZoom,
+    cancelAutoZoomFrame,
+    dimensions.height,
+    dimensions.width,
+    resolvedZoomExtent
+  ]);
+  const requestFocusNode = useCallback(
+    (nodeId) => {
+      pendingFocusRef.current = nodeId;
+      if (!nodeId) {
+        return;
+      }
+      flushPendingFocus();
+    },
+    [flushPendingFocus]
+  );
+  const handleNodeSelection = useCallback(
+    (datum) => {
+      setActiveNode(datum.id);
+      const didFocus = focusOnNode(datum);
+      pendingFocusRef.current = didFocus ? null : datum.id;
+      if (onNodeSelect) {
+        onNodeSelect(datum.node);
+      } else {
+        handleDefaultNavigation(datum.node);
+      }
+    },
+    [focusOnNode, handleDefaultNavigation, onNodeSelect]
+  );
+  useEffect(() => {
+    requestFocusNode(focusNodeId ?? null);
+    if (simulationRef.current && focusNodeId) {
+      const sim = simulationRef.current;
+      if (sim.alpha() < 0.1) {
+        sim.alpha(0.3).restart();
+      }
+    }
+  }, [focusNodeId, requestFocusNode]);
+  const applyHighlight = useCallback(
+    (hoveredId) => {
+      if (!svgRef.current) {
+        return;
+      }
+      const svg = select(svgRef.current);
+      const nodesSelection = svg.selectAll("circle[data-node]");
+      const linksSelection = svg.selectAll("line[data-link]");
+      const labelsSelection = svg.selectAll("text[data-label]");
+      const highlightId = hoveredId;
+      const hoveredSet = highlightId ? /* @__PURE__ */ new Set([
+        highlightId,
+        ...Array.from(normalized.adjacency.get(highlightId) ?? [])
+      ]) : null;
+      const focusSet = focusMatches && focusMatches.size > 0 ? focusMatches : null;
+      nodesSelection.classed(styles$f.isActive, (d) => d.id === activeNode).style("opacity", (d) => {
+        if (hoveredSet) {
+          return hoveredSet.has(d.id) ? 1 : DIMMED_NODE_OPACITY;
+        }
+        if (focusSet) {
+          return focusSet.has(d.id) ? 1 : DIMMED_NODE_OPACITY;
+        }
+        return 1;
+      });
+      linksSelection.style("opacity", (d) => {
+        const sourceId = resolveLinkEndpointId(d.source);
+        const targetId = resolveLinkEndpointId(d.target);
+        if (highlightId) {
+          return sourceId === highlightId || targetId === highlightId ? HIGHLIGHT_LINK_OPACITY : DIMMED_LINK_OPACITY;
+        }
+        if (focusSet) {
+          return focusSet.has(sourceId) && focusSet.has(targetId) ? FOCUS_LINK_OPACITY : DIMMED_LINK_OPACITY;
+        }
+        return BASE_LINK_OPACITY;
+      }).attr("stroke-width", hoveredId ? LINK_HIGHLIGHT_STROKE_WIDTH : LINK_STROKE_WIDTH).attr("stroke", (d) => {
+        const sourceId = resolveLinkEndpointId(d.source);
+        const targetId = resolveLinkEndpointId(d.target);
+        if (highlightId && (sourceId === highlightId || targetId === highlightId)) {
+          return LINK_HIGHLIGHT_COLOR;
+        }
+        return LINK_COLOR;
+      });
+      labelsSelection.style("opacity", (d) => {
+        if (hoveredSet) {
+          return hoveredSet.has(d.id) ? 1 : 0.4;
+        }
+        if (focusSet && focusSet.has(d.id)) {
+          return 1;
+        }
+        return 0.7;
+      });
+    },
+    [activeNode, focusMatches, normalized.adjacency]
+  );
+  useEffect(() => {
+    if (!svgRef.current) {
+      return;
+    }
+    const svg = select(svgRef.current);
+    const viewport = svg.select("g[data-viewport]");
+    const linkLayer = viewport.select("g[data-links]");
+    const nodeLayer = viewport.select("g[data-nodes]");
+    const labelLayer = viewport.select("g[data-labels]");
+    const nodes = nodeData.map((datum) => ({ ...datum }));
+    const links = linkData.map((link) => ({ ...link }));
+    nodeLookupRef.current = new Map(nodes.map((node) => [node.id, node]));
+    autoZoomReadyRef.current = false;
+    autoZoomPendingRef.current = false;
+    cancelAutoZoomFrame();
+    pendingFocusRef.current = focusNodeId ?? null;
+    if (focusNodeId) {
+      const focusNode = nodes.find((n) => n.id === focusNodeId);
+      if (focusNode) {
+        focusNode.fx = 0;
+        focusNode.fy = 0;
+        focusNode.x = 0;
+        focusNode.y = 0;
+      }
+    }
+    const linkSelection = linkLayer.selectAll("line[data-link]").data(links, (d) => d.uid);
+    linkSelection.exit().remove();
+    const linkEnter = linkSelection.enter().append("line").attr("data-link", "true").attr("stroke-width", LINK_STROKE_WIDTH).attr("stroke", LINK_COLOR).attr("stroke-linecap", "round");
+    const mergedLinks = linkEnter.merge(linkSelection);
+    labelLayerRef.current = labelLayer.node();
+    const labelSelection = labelLayer.selectAll("text[data-label]").data(nodes, (d) => d.id);
+    labelSelection.exit().remove();
+    const labelEnter = labelSelection.enter().append("text").attr("data-label", "true").attr("class", styles$f.label).attr("text-anchor", "middle").attr("alignment-baseline", "hanging").attr("dy", (d) => `${d.radius + 8}px`).style("opacity", 1).text((d) => d.node.label ?? d.node.id);
+    const mergedLabels = labelEnter.merge(labelSelection);
+    mergedLabels.style(
+      "font-size",
+      `${LABEL_FONT_BASE_PX * labelFontScaleRef.current}px`
+    );
+    requestAnimationFrame(() => {
+      mergedLabels.each(function(d) {
+        const textElement = this;
+        try {
+          const currentX = textElement.getAttribute("x");
+          const currentY = textElement.getAttribute("y");
+          if (!currentX || !currentY || currentX === "0" || currentY === "0") {
+            textElement.setAttribute("x", "0");
+            textElement.setAttribute("y", "0");
+          }
+          const bbox = textElement.getBBox();
+          const baseScale = labelFontScaleRef.current || 1;
+          d.textWidth = bbox.width / baseScale;
+          d.textHeight = bbox.height / baseScale;
+        } catch {
+          const text = d.node.label ?? d.node.id;
+          d.textWidth = text.length * TEXT_FALLBACK_CHAR_WIDTH;
+          d.textHeight = TEXT_FALLBACK_HEIGHT;
+        }
+      });
+    });
+    const nodeSelection = nodeLayer.selectAll("circle[data-node]").data(nodes, (d) => d.id);
+    nodeSelection.exit().remove();
+    const nodeEnter = nodeSelection.enter().append("circle").attr("data-node", "true").attr("class", styles$f.node).attr("fill", (d) => d.color).attr("stroke", NODE_OUTLINE).attr("stroke-width", 1).attr("r", (d) => d.radius).on("mouseenter", (_event, datum) => {
+      hoveredNodeRef.current = datum.id;
+      applyHighlight(datum.id);
+    }).on("mouseleave", (_event, datum) => {
+      if (draggingNodeRef.current === datum.id) {
+        return;
+      }
+      hoveredNodeRef.current = null;
+      applyHighlight(null);
+    }).on("click", (event, datum) => {
+      event.stopPropagation();
+      handleNodeSelection(datum);
+    });
+    nodeEnter.append("title").text((d) => d.node.label ?? d.node.id);
+    const mergedNodes = nodeEnter.merge(nodeSelection);
+    const centerX = focusNodeId ? 0 : dimensions.width / 2;
+    const centerY = focusNodeId ? 0 : dimensions.height / 2 - 20;
+    const simulation = forceSimulation(nodes).force(
+      "link",
+      forceLink(links).id((d) => d.id).distance(() => 135).strength(0.18)
+    ).force("charge", forceManyBody().strength(-320)).force(
+      "collision",
+      forceCollide().radius((d) => {
+        const { halfWidth, top, bottom } = getNodeVisualExtent(d, labelFontScaleRef.current);
+        return Math.max(halfWidth, top, bottom);
+      })
+    ).force("center", forceCenter(centerX, centerY)).alphaDecay(0.07).alpha(0.9);
+    let tickCount = 0;
+    simulation.on("tick", () => {
+      tickCount += 1;
+      mergedLinks.attr("x1", (d) => resolveLinkCoordinate(d.source, "x")).attr("y1", (d) => resolveLinkCoordinate(d.source, "y")).attr("x2", (d) => resolveLinkCoordinate(d.target, "x")).attr("y2", (d) => resolveLinkCoordinate(d.target, "y"));
+      mergedNodes.attr("cx", (d) => d.x ?? 0).attr("cy", (d) => d.y ?? 0);
+      mergedLabels.attr("x", (d) => d.x ?? 0).attr("y", (d) => {
+        const y = d.y ?? 0;
+        const radius = d.radius;
+        return y + radius + LABEL_GAP_Y;
+      }).each(function(d) {
+        if (d.textWidth === void 0 || d.textHeight === void 0) {
+          const textElement = this;
+          try {
+            const bbox = textElement.getBBox();
+            d.textWidth = bbox.width;
+            d.textHeight = bbox.height;
+          } catch {
+            const text = d.node.label ?? d.node.id;
+            d.textWidth = Math.max(
+              text.length * TEXT_FALLBACK_CHAR_WIDTH,
+              LABEL_MIN_WIDTH
+            );
+            d.textHeight = TEXT_FALLBACK_HEIGHT;
+          }
+        }
+      });
+      const alpha = simulation.alpha();
+      if (pendingFocusRef.current && tickCount >= 10 && alpha < 0.3) {
+        flushPendingFocus();
+      }
+      if (alpha < 0.02) {
+        simulation.stop();
+        if (pendingFocusRef.current) {
+          flushPendingFocus();
+          setTimeout(() => {
+            if (pendingFocusRef.current) {
+              flushPendingFocus();
+            }
+          }, 50);
+          setTimeout(() => {
+            if (pendingFocusRef.current) {
+              flushPendingFocus();
+            }
+          }, 200);
+        }
+      }
+    });
+    simulationRef.current = simulation;
+    const dragBehavior = drag().on("start", (event) => {
+      if (!event.active) {
+        simulation.alphaTarget(0.3).restart();
+      }
+      draggingNodeRef.current = event.subject.id;
+      hoveredNodeRef.current = event.subject.id;
+      applyHighlight(event.subject.id);
+      event.subject.fx = event.subject.x;
+      event.subject.fy = event.subject.y;
+    }).on("drag", (event) => {
+      event.subject.fx = event.x;
+      event.subject.fy = event.y;
+      hoveredNodeRef.current = event.subject.id;
+      applyHighlight(event.subject.id);
+    }).on("end", (event) => {
+      if (!event.active) {
+        simulation.alphaTarget(0);
+      }
+      draggingNodeRef.current = null;
+      event.subject.fx = null;
+      event.subject.fy = null;
+      hoveredNodeRef.current = null;
+      applyHighlight(null);
+    });
+    mergedNodes.call(dragBehavior);
+    applyLabelFontSize(transformRef.current?.k ?? 1);
+    applyHighlight(hoveredNodeRef.current);
+    flushPendingFocus();
+    if (nodes.length === 0) {
+      autoZoomReadyRef.current = false;
+      autoZoomPendingRef.current = false;
+      cancelAutoZoomFrame();
+    } else {
+      const warmupIterations = Math.min(80, 16 + nodes.length * 2);
+      for (let i = 0; i < warmupIterations; i += 1) {
+        simulation.tick();
+      }
+      autoZoomReadyRef.current = true;
+      scheduleAutoZoom();
+      simulation.alpha(0.4).restart();
+    }
+    return () => {
+      simulation.stop();
+    };
+  }, [
+    dimensions.height,
+    dimensions.width,
+    handleNodeSelection,
+    linkData,
+    nodeData,
+    applyHighlight,
+    applyLabelFontSize,
+    flushPendingFocus,
+    focusNodeId,
+    cancelAutoZoomFrame,
+    scheduleAutoZoom
+  ]);
+  useEffect(() => {
+    if (!svgRef.current) {
+      return;
+    }
+    const svg = select(svgRef.current);
+    svg.attr("width", dimensions.width || 600);
+    svg.attr("height", dimensions.height || 400);
+    if (simulationRef.current) {
+      const centerX = focusNodeId ? 0 : dimensions.width / 2;
+      const centerY = focusNodeId ? 0 : dimensions.height / 2 - 20;
+      simulationRef.current.force("center", forceCenter(centerX, centerY));
+      simulationRef.current.alpha(0.4).restart();
+    }
+  }, [dimensions.height, dimensions.width, focusNodeId]);
+  useEffect(() => {
+    if (!svgRef.current) {
+      return;
+    }
+    const svg = select(svgRef.current);
+    const viewport = svg.select("g[data-viewport]");
+    const behavior = zoom().scaleExtent(resolvedZoomExtent).on("zoom", (event) => {
+      transformRef.current = event.transform;
+      viewport.attr("transform", event.transform.toString());
+      applyLabelFontSize(event.transform.k);
+    });
+    zoomBehaviorRef.current = behavior;
+    svg.call(behavior);
+    return () => {
+      svg.on(".zoom", null);
+    };
+  }, [applyLabelFontSize, resolvedZoomExtent]);
+  useEffect(() => {
+    applyHighlight(hoveredNodeRef.current);
+  }, [applyHighlight]);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: clsx(styles$f.root, className), "data-papyr-component": "GraphView", children: [
+    /* @__PURE__ */ jsx("svg", { ref: svgRef, className: styles$f.canvas, role: "img", "aria-label": "Publish graph", children: /* @__PURE__ */ jsxs("g", { "data-viewport": true, children: [
+      /* @__PURE__ */ jsx("g", { "data-links": true }),
+      /* @__PURE__ */ jsx("g", { "data-nodes": true }),
+      /* @__PURE__ */ jsx("g", { "data-labels": true })
+    ] }) }),
+    !hasGraph && /* @__PURE__ */ jsx("div", { className: styles$f.emptyState, children: "No published links to explore yet." })
+  ] });
+};
+const isBrowser = typeof document !== "undefined";
+const GraphView = ({
+  graph,
+  className,
+  activeSlug = null,
+  filterNode,
+  focusPredicate,
+  nodeColor,
+  zoomExtent,
+  onNodeSelect,
+  showFullscreenToggle = true,
+  fullscreenTitle = "Full site graph"
+}) => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  useEffect(() => {
+    if (!isFullscreen || !isBrowser) {
+      return;
+    }
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, [isFullscreen]);
+  const neighborhood = useMemo(() => {
+    if (!graph || !activeSlug) {
+      return null;
+    }
+    return getNeighborhood(graph, activeSlug);
+  }, [graph, activeSlug]);
+  const derivedFilter = useMemo(() => {
+    if (isFullscreen || !activeSlug || !neighborhood) {
+      return filterNode;
+    }
+    if (!filterNode) {
+      return (node) => neighborhood.has(node.id);
+    }
+    return (node) => filterNode(node) && neighborhood.has(node.id);
+  }, [filterNode, neighborhood, activeSlug, isFullscreen]);
+  const handleCloseFullscreen = useCallback(() => {
+    setIsFullscreen(false);
+  }, []);
+  const canToggleFullScreen = showFullscreenToggle && !!graph;
+  const mainGraph = /* @__PURE__ */ jsx(
+    GraphCanvas,
+    {
+      graph,
+      className,
+      filterNode: derivedFilter,
+      focusPredicate,
+      nodeColor,
+      zoomExtent,
+      focusNodeId: activeSlug ?? null,
+      onNodeSelect
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx(styles$f.shell, className), children: [
+      canToggleFullScreen && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: styles$f.fullscreenButton,
+          "aria-label": "Open full graph",
+          onClick: () => setIsFullscreen(true),
+          children: "⤢"
+        }
+      ),
+      mainGraph
+    ] }),
+    isFullscreen && isBrowser ? createPortal(
+      /* @__PURE__ */ jsxs("div", { className: styles$f.fullscreenOverlay, role: "dialog", "aria-modal": "true", children: [
+        /* @__PURE__ */ jsx("div", { className: styles$f.fullscreenBackdrop, onClick: handleCloseFullscreen }),
+        /* @__PURE__ */ jsxs("div", { className: styles$f.fullscreenDialog, children: [
+          /* @__PURE__ */ jsxs("header", { className: styles$f.fullscreenHeader, children: [
+            /* @__PURE__ */ jsx("span", { children: fullscreenTitle }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles$f.fullscreenClose,
+                onClick: handleCloseFullscreen,
+                children: "Close"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles$f.fullscreenBody, children: /* @__PURE__ */ jsx(
+            GraphCanvas,
+            {
+              graph,
+              className: clsx(className, styles$f.fullscreenGraph),
+              filterNode,
+              focusPredicate,
+              nodeColor,
+              focusNodeId: activeSlug ?? null,
+              zoomExtent,
+              onNodeSelect
+            }
+          ) })
+        ] })
+      ] }),
+      document.body
+    ) : null
+  ] });
+};
+
+const frame = "_frame_187pj_1";
+const header$2 = "_header_187pj_12";
+const title$3 = "_title_187pj_19";
+const subtitle = "_subtitle_187pj_27";
+const badge = "_badge_187pj_34";
+const canvas = "_canvas_187pj_48";
+const glow = "_glow_187pj_56";
+const edge = "_edge_187pj_60";
+const node = "_node_187pj_65";
+const emptyState$1 = "_emptyState_187pj_71";
+const styles$e = {
+	frame: frame,
+	header: header$2,
+	title: title$3,
+	subtitle: subtitle,
+	badge: badge,
+	canvas: canvas,
+	glow: glow,
+	edge: edge,
+	node: node,
+	emptyState: emptyState$1
+};
+
+const MiniGraph = ({ graph, className }) => {
+  const { nodes, edges, totalNodes, totalEdges } = useMemo(() => {
+    const MAX_NODES = 24;
+    const VIEWBOX_SIZE = 200;
+    const CENTER = VIEWBOX_SIZE / 2;
+    const graphNodes = Array.from(graph.nodes.values());
+    const sortedNodes = graphNodes.slice().sort((a, b) => (b.linkCount ?? 0) - (a.linkCount ?? 0)).slice(0, MAX_NODES);
+    const nodeIds = new Set(sortedNodes.map((node) => node.id));
+    const filteredEdges = graph.edges.filter(
+      (edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target)
+    );
+    const maxLinks = Math.max(
+      1,
+      ...sortedNodes.map((node) => node.linkCount ?? 0)
+    );
+    const orbitRadius = sortedNodes.length > 12 ? 70 : 62;
+    const positionedNodes = sortedNodes.map((node, index) => {
+      const angle = Math.PI * 2 * index / sortedNodes.length - Math.PI / 2;
+      const radius = 3 + (node.linkCount ?? 0) / maxLinks * 5;
+      return {
+        id: node.id,
+        label: node.label ?? node.id,
+        x: CENTER + orbitRadius * Math.cos(angle),
+        y: CENTER + orbitRadius * Math.sin(angle),
+        radius
+      };
+    });
+    const nodeLookup = new Map(positionedNodes.map((node) => [node.id, node]));
+    const positionedEdges = filteredEdges.map((edge) => ({
+      source: nodeLookup.get(edge.source) ?? null,
+      target: nodeLookup.get(edge.target) ?? null
+    })).filter((edge) => edge.source && edge.target).map((edge) => ({
+      source: edge.source,
+      target: edge.target
+    }));
+    return {
+      nodes: positionedNodes,
+      edges: positionedEdges,
+      totalNodes: graphNodes.length,
+      totalEdges: graph.edges.length
+    };
+  }, [graph]);
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles$e.frame, className), "data-papyr-component": "MiniGraph", children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$e.header, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: styles$e.title, children: "Mini graph" }),
+        /* @__PURE__ */ jsxs("div", { className: styles$e.subtitle, children: [
+          totalNodes,
+          " notes • ",
+          totalEdges,
+          " links"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: styles$e.badge, children: [
+        nodes.length,
+        "/",
+        totalNodes
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: styles$e.canvas,
+        viewBox: "0 0 200 200",
+        role: "img",
+        "aria-label": `Mini graph with ${totalNodes} notes and ${totalEdges} links`,
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { id: "papyr-mini-graph-glow", cx: "50%", cy: "45%", r: "60%", children: [
+            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "rgba(99, 102, 241, 0.35)" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "rgba(99, 102, 241, 0)" })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: styles$e.glow,
+              cx: "100",
+              cy: "100",
+              r: "78"
+            }
+          ),
+          /* @__PURE__ */ jsx("g", { className: styles$e.edges, children: edges.map((edge, index) => /* @__PURE__ */ jsx(
+            "line",
+            {
+              className: styles$e.edge,
+              x1: edge.source.x,
+              y1: edge.source.y,
+              x2: edge.target.x,
+              y2: edge.target.y
+            },
+            `${edge.source.id}-${edge.target.id}-${index}`
+          )) }),
+          /* @__PURE__ */ jsx("g", { className: styles$e.nodes, children: nodes.map((node) => /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: styles$e.node,
+              cx: node.x,
+              cy: node.y,
+              r: node.radius,
+              children: /* @__PURE__ */ jsx("title", { children: node.label })
+            },
+            node.id
+          )) })
+        ]
+      }
+    ),
+    !nodes.length && /* @__PURE__ */ jsx("div", { className: styles$e.emptyState, children: "No connections yet." })
+  ] });
+};
+
+const container$8 = "_container_1vncr_1";
+const header$1 = "_header_1vncr_10";
+const breadcrumbs = "_breadcrumbs_1vncr_17";
+const title$2 = "_title_1vncr_21";
+const summary = "_summary_1vncr_26";
+const metaRow = "_metaRow_1vncr_33";
+const tagList = "_tagList_1vncr_43";
+const tag$2 = "_tag_1vncr_43";
+const tagEmpty = "_tagEmpty_1vncr_60";
+const metaList = "_metaList_1vncr_65";
+const metaItem = "_metaItem_1vncr_71";
+const content = "_content_1vncr_90";
+const codeBlockWrapper = "_codeBlockWrapper_1vncr_119";
+const codeBlockHeader = "_codeBlockHeader_1vncr_131";
+const codeBlockLanguage = "_codeBlockLanguage_1vncr_141";
+const copyButton = "_copyButton_1vncr_149";
+const codeBlockPre = "_codeBlockPre_1vncr_178";
+const codeBlockCode = "_codeBlockCode_1vncr_198";
+const linkedNotes = "_linkedNotes_1vncr_205";
+const linkedNotesHeader = "_linkedNotesHeader_1vncr_214";
+const linkedNotesTitle = "_linkedNotesTitle_1vncr_220";
+const linkedNotesCount = "_linkedNotesCount_1vncr_229";
+const linkedNotesList = "_linkedNotesList_1vncr_243";
+const linkedNotesItem = "_linkedNotesItem_1vncr_252";
+const linkedNoteLink = "_linkedNoteLink_1vncr_257";
+const styles$d = {
+	container: container$8,
+	header: header$1,
+	breadcrumbs: breadcrumbs,
+	title: title$2,
+	summary: summary,
+	metaRow: metaRow,
+	tagList: tagList,
+	tag: tag$2,
+	tagEmpty: tagEmpty,
+	metaList: metaList,
+	metaItem: metaItem,
+	content: content,
+	codeBlockWrapper: codeBlockWrapper,
+	codeBlockHeader: codeBlockHeader,
+	codeBlockLanguage: codeBlockLanguage,
+	copyButton: copyButton,
+	codeBlockPre: codeBlockPre,
+	codeBlockCode: codeBlockCode,
+	linkedNotes: linkedNotes,
+	linkedNotesHeader: linkedNotesHeader,
+	linkedNotesTitle: linkedNotesTitle,
+	linkedNotesCount: linkedNotesCount,
+	linkedNotesList: linkedNotesList,
+	linkedNotesItem: linkedNotesItem,
+	linkedNoteLink: linkedNoteLink
+};
+
+function toForceGraphData(graph) {
+  if (!graph) {
+    return { nodes: [], links: [] };
+  }
+  const nodes = [];
+  const links = [];
+  for (const [, node] of graph.nodes) {
+    nodes.push({
+      id: node.id,
+      label: node.label,
+      value: node.linkCount
+    });
+  }
+  graph.edges.forEach((edge) => {
+    links.push({
+      source: edge.source,
+      target: edge.target,
+      value: 1
+    });
+  });
+  return { nodes, links };
+}
+
+function buildWikiLink(slug) {
+  return `[[${slug}]]`;
+}
+function findNoteBySlug(notes, slug) {
+  return notes.find((note) => note.slug === slug);
+}
+function parseNoteHash(hash) {
+  if (!hash || !hash.startsWith("#")) {
+    return { slug: null, anchor: null };
+  }
+  const fragment = hash.slice(1);
+  if (!fragment) {
+    return { slug: null, anchor: null };
+  }
+  if (fragment.startsWith("/note/")) {
+    const rest = fragment.slice("/note/".length);
+    const anchorIndex = rest.indexOf("#");
+    const slugFragment = anchorIndex === -1 ? rest : rest.slice(0, anchorIndex);
+    const anchorFragment = anchorIndex === -1 ? null : rest.slice(anchorIndex + 1);
+    let slug = slugFragment || null;
+    if (slug) {
+      try {
+        slug = decodeURIComponent(slug);
+      } catch {
+      }
+    }
+    let anchor2 = anchorFragment && anchorFragment.length > 0 ? anchorFragment : null;
+    if (anchor2) {
+      try {
+        anchor2 = decodeURIComponent(anchor2);
+      } catch {
+      }
+    }
+    return { slug, anchor: anchor2 };
+  }
+  if (fragment.startsWith("/")) {
+    return { slug: null, anchor: null };
+  }
+  let anchor = fragment;
+  if (anchor) {
+    try {
+      anchor = decodeURIComponent(anchor);
+    } catch {
+    }
+  }
+  return { slug: null, anchor };
+}
+function updateHashWithAnchor(anchor) {
+  if (typeof window === "undefined" || typeof window.history === "undefined") {
+    return;
+  }
+  const trimmed = anchor.trim();
+  const currentHash = window.location.hash ?? "";
+  const { slug } = parseNoteHash(currentHash);
+  let nextHash;
+  if (slug) {
+    const encodedSlug = encodeURIComponent(slug);
+    nextHash = trimmed ? `#/note/${encodedSlug}#${encodeURIComponent(trimmed)}` : `#/note/${encodedSlug}`;
+  } else {
+    nextHash = trimmed ? `#${encodeURIComponent(trimmed)}` : "#";
+  }
+  window.history.replaceState(null, "", nextHash);
+}
+
+function isHydratedSearchIndex(value) {
+  const candidate = value;
+  return Boolean(candidate.index && typeof candidate.index.search === "function");
+}
+function hydrateSearchIndex(value) {
+  if (isHydratedSearchIndex(value)) {
+    return value;
+  }
+  return importSearchIndex(value);
+}
+
+const trigger = "_trigger_j6udx_1";
+const highlight$1 = "_highlight_j6udx_7";
+const panel = "_panel_j6udx_13";
+const styles$c = {
+	trigger: trigger,
+	highlight: highlight$1,
+	panel: panel};
+
+const HoverPreview = ({
+  trigger,
+  renderPreview,
+  highlightTrigger = true
+}) => {
+  const [open, setOpen] = useState(false);
+  const { refs, floatingStyles } = useFloating({
+    placement: "top",
+    middleware: [offset(12), flip(), shift()],
+    whileElementsMounted: autoUpdate
+  });
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Escape" && open) {
+      setOpen(false);
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: clsx(styles$c.trigger, highlightTrigger && styles$c.highlight),
+      ref: refs.setReference,
+      onMouseEnter: () => setOpen(true),
+      onFocus: () => setOpen(true),
+      onMouseLeave: () => setOpen(false),
+      onBlur: () => setOpen(false),
+      onKeyDown: handleKeyDown,
+      "data-papyr-component": "HoverPreview",
+      role: "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      children: [
+        trigger,
+        open ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: refs.setFloating,
+            style: floatingStyles,
+            className: styles$c.panel,
+            role: "dialog",
+            "aria-modal": "false",
+            "aria-label": "Preview",
+            children: renderPreview()
+          }
+        ) : null
+      ]
+    }
+  );
+};
+
+const container$7 = "_container_1raaj_1";
+const title$1 = "_title_1raaj_8";
+const excerpt = "_excerpt_1raaj_18";
+const empty = "_empty_1raaj_25";
+const tags = "_tags_1raaj_32";
+const tag$1 = "_tag_1raaj_32";
+const styles$b = {
+	container: container$7,
+	title: title$1,
+	excerpt: excerpt,
+	empty: empty,
+	tags: tags,
+	tag: tag$1
+};
+
+const MAX_PREVIEW_LENGTH = 220;
+const getPreviewText = (note) => {
+  const source = (note.excerpt ?? note.description ?? "").trim();
+  if (!source) {
+    return "";
+  }
+  if (source.length <= MAX_PREVIEW_LENGTH) {
+    return source;
+  }
+  return `${source.slice(0, MAX_PREVIEW_LENGTH - 1).trimEnd()}…`;
+};
+const NotePreviewContent = ({ note }) => {
+  const previewText = getPreviewText(note);
+  return /* @__PURE__ */ jsxs("div", { className: styles$b.container, children: [
+    /* @__PURE__ */ jsx("h3", { className: styles$b.title, children: note.title ?? note.slug }),
+    previewText ? /* @__PURE__ */ jsx("p", { className: styles$b.excerpt, children: previewText }) : /* @__PURE__ */ jsx("p", { className: styles$b.empty, children: "No preview available" }),
+    note.tags?.length ? /* @__PURE__ */ jsx("ul", { className: styles$b.tags, role: "list", "aria-label": "Tags", children: note.tags.slice(0, 4).map((tag) => /* @__PURE__ */ jsxs("li", { className: styles$b.tag, children: [
+      "#",
+      tag
+    ] }, tag)) }) : null
+  ] });
+};
+
+const list$1 = "_list_bm9au_1";
+const item$1 = "_item_bm9au_12";
+const separator = "_separator_bm9au_23";
+const link$1 = "_link_bm9au_27";
+const styles$a = {
+	list: list$1,
+	item: item$1,
+	separator: separator,
+	link: link$1
+};
+
+const Breadcrumbs = ({
+  trail,
+  className,
+  separator = "›"
+}) => {
+  if (!trail.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", "data-papyr-component": "Breadcrumbs", children: /* @__PURE__ */ jsx("ol", { className: clsx(styles$a.list, className), children: trail.map((item, index) => {
+    const isLast = index === trail.length - 1;
+    return /* @__PURE__ */ jsxs("li", { className: styles$a.item, "aria-current": isLast ? "page" : void 0, children: [
+      item.href && !isLast ? /* @__PURE__ */ jsx("a", { className: styles$a.link, href: item.href, children: item.label }) : /* @__PURE__ */ jsx("span", { children: item.label }),
+      !isLast && /* @__PURE__ */ jsx("span", { className: styles$a.separator, children: separator })
+    ] }, item.label);
+  }) }) });
+};
+
+function useNotes(notes) {
+  return useMemo(() => {
+    return [...notes].sort((a, b) => a.title.localeCompare(b.title));
+  }, [notes]);
+}
+
+const viewport = "_viewport_1tgm1_1";
+const toast = "_toast_1tgm1_13";
+const message = "_message_1tgm1_46";
+const closeButton = "_closeButton_1tgm1_52";
+const styles$9 = {
+	viewport: viewport,
+	toast: toast,
+	message: message,
+	closeButton: closeButton
+};
+
+const ToastContainer = ({ toasts, onDismiss }) => {
+  if (toasts.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: styles$9.viewport, role: "region", "aria-live": "polite", "aria-label": "Notifications", children: toasts.map((toast) => /* @__PURE__ */ jsxs("div", { className: styles$9.toast, role: "status", children: [
+    /* @__PURE__ */ jsx("span", { className: styles$9.message, children: toast.message }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: styles$9.closeButton,
+        onClick: () => onDismiss(toast.id),
+        "aria-label": "Dismiss notification",
+        children: "Close"
+      }
+    )
+  ] }, toast.id)) });
+};
+
+const PapyrContext = createContext(void 0);
+const PapyrProvider = ({
+  notes,
+  children,
+  searchIndex,
+  graph = null
+}) => {
+  const sortedNotes = useNotes(notes);
+  const memoizedGraph = useMemo(() => graph ?? null, [graph]);
+  const [toasts, setToasts] = useState([]);
+  const timersRef = useRef({});
+  const dismissToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+    if (typeof window !== "undefined") {
+      const timerId = timersRef.current[id];
+      if (typeof timerId === "number") {
+        window.clearTimeout(timerId);
+      }
+    }
+    delete timersRef.current[id];
+  }, []);
+  const showToast = useCallback(
+    (message, options) => {
+      const id = options?.id ?? `papyr-toast-${Date.now()}-${Math.round(Math.random() * 1e6)}`;
+      const duration = options?.duration ?? 3e3;
+      setToasts((prev) => [
+        ...prev.filter((toast) => toast.id !== id),
+        { id, message }
+      ]);
+      if (typeof window !== "undefined" && duration > 0) {
+        const existingTimeout = timersRef.current[id];
+        if (typeof existingTimeout === "number") {
+          window.clearTimeout(existingTimeout);
+        }
+        const timeoutId = window.setTimeout(() => dismissToast(id), duration);
+        timersRef.current[id] = timeoutId;
+      }
+      return id;
+    },
+    [dismissToast]
+  );
+  const search = useCallback(
+    (query, options) => {
+      return searchNotes(query, searchIndex, options);
+    },
+    [searchIndex]
+  );
+  useEffect(() => {
+    return () => {
+      if (typeof window !== "undefined") {
+        Object.values(timersRef.current).forEach((timerId) => {
+          if (typeof timerId === "number") {
+            window.clearTimeout(timerId);
+          }
+        });
+      }
+      timersRef.current = {};
+    };
+  }, []);
+  const value = useMemo(
+    () => ({
+      notes: sortedNotes,
+      graph: memoizedGraph,
+      searchIndex,
+      search,
+      showToast,
+      dismissToast
+    }),
+    [sortedNotes, memoizedGraph, searchIndex, search, showToast, dismissToast]
+  );
+  return /* @__PURE__ */ jsxs(PapyrContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx(ToastContainer, { toasts, onDismiss: dismissToast })
+  ] });
+};
+function usePapyr() {
+  const context = useContext(PapyrContext);
+  if (!context) {
+    throw new Error("usePapyr must be used within a PapyrProvider");
+  }
+  return context;
+}
+function useOptionalPapyr() {
+  return useContext(PapyrContext);
+}
+
+const NOTE_LINK_PREFIX = "#/note/";
+const buildNoteHash = (slug, fragment) => {
+  const base = `${NOTE_LINK_PREFIX}${encodeURIComponent(slug)}`;
+  return fragment && fragment.length > 0 ? `${base}#${fragment}` : base;
+};
+const cloneElementAttributes = (element, exclude = []) => {
+  const excludeSet = new Set(exclude);
+  return Array.from(element.attributes).filter((attr) => !excludeSet.has(attr.name)).map((attr) => ({ name: attr.name, value: attr.value }));
+};
+const InlinePreviewAnchor = ({
+  attributes,
+  href,
+  innerHtml,
+  onClick
+}) => {
+  const anchorRef = useRef(null);
+  useLayoutEffect(() => {
+    const element = anchorRef.current;
+    if (!element) {
+      return;
+    }
+    attributes.forEach((attr) => {
+      if (attr.name === "href") {
+        return;
+      }
+      element.setAttribute(attr.name, attr.value);
+    });
+    element.setAttribute("href", href);
+  }, [attributes, href]);
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ref: anchorRef,
+      href,
+      onClick,
+      dangerouslySetInnerHTML: { __html: innerHtml }
+    }
+  );
+};
+const safeDecode = (value) => {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+};
+const NoteViewer = ({ note, emptyState, onNavigateNote }) => {
+  const contentRef = useRef(null);
+  const inlinePreviewCleanupRef = useRef([]);
+  const papyr = useOptionalPapyr();
+  const providerNotes = papyr?.notes ?? [];
+  const linkedNotesHeadingId = note ? `papyr-linked-notes-${note.slug}` : "papyr-linked-notes";
+  const metadataRecord = note?.metadata ?? {};
+  const noteLookup = useMemo(() => {
+    if (!providerNotes.length) {
+      return {};
+    }
+    return providerNotes.reduce((acc, current) => {
+      acc[current.slug] = current;
+      return acc;
+    }, {});
+  }, [providerNotes]);
+  const resolveLinkedSlug = useCallback(
+    (rawTarget) => {
+      if (!rawTarget) {
+        return null;
+      }
+      const baseTarget = rawTarget.split("#")[0];
+      if (noteLookup[baseTarget]) {
+        return baseTarget;
+      }
+      return null;
+    },
+    [noteLookup]
+  );
+  const getPreviewData = useCallback((targetNote) => ({
+    slug: targetNote.slug,
+    title: targetNote.title,
+    excerpt: targetNote.excerpt ?? null,
+    description: targetNote.description ?? null,
+    tags: targetNote.tags ?? []
+  }), []);
+  const linkedNotes = useMemo(() => {
+    if (!note?.linksTo?.length) {
+      return [];
+    }
+    const seen = /* @__PURE__ */ new Set();
+    const previews = [];
+    note.linksTo.forEach((target) => {
+      const resolvedSlug = resolveLinkedSlug(target);
+      if (!resolvedSlug || seen.has(resolvedSlug)) {
+        return;
+      }
+      const targetNote = noteLookup[resolvedSlug];
+      if (!targetNote) {
+        return;
+      }
+      seen.add(resolvedSlug);
+      previews.push(getPreviewData(targetNote));
+    });
+    return previews;
+  }, [note?.linksTo, noteLookup, resolveLinkedSlug, getPreviewData]);
+  const breadcrumbTrail = useMemo(() => {
+    if (!note) {
+      return [];
+    }
+    const rawTrail = metadataRecord.breadcrumbs;
+    if (Array.isArray(rawTrail)) {
+      const normalized = rawTrail.map((item) => {
+        if (typeof item === "string") {
+          return { label: item };
+        }
+        if (item && typeof item === "object") {
+          const label = "label" in item ? String(item.label ?? "") : "";
+          if (!label) {
+            return null;
+          }
+          const href = typeof item.href === "string" ? item.href : void 0;
+          return { label, href };
+        }
+        return null;
+      }).filter((item) => Boolean(item));
+      if (normalized.length) {
+        return normalized;
+      }
+    }
+    const pathSource = typeof metadataRecord.path === "string" ? metadataRecord.path : typeof metadataRecord.filePath === "string" ? metadataRecord.filePath : typeof metadataRecord.relativePath === "string" ? metadataRecord.relativePath : null;
+    if (!pathSource) {
+      return [];
+    }
+    const normalizedPath = pathSource.replace(/\\/g, "/").replace(/^\.\//, "");
+    const segments = normalizedPath.split("/").filter(Boolean);
+    if (!segments.length) {
+      return [];
+    }
+    return segments.map((segment, index) => {
+      const isLast = index === segments.length - 1;
+      const stripped = isLast ? segment.replace(/\.(md|markdown)$/i, "") : segment;
+      const label = stripped.replace(/[-_]/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+      return { label };
+    });
+  }, [metadataRecord, note]);
+  const metaItems = useMemo(() => {
+    if (!note) {
+      return [];
+    }
+    const items = [];
+    if (note.createdAt) {
+      items.push({ label: "Created", value: note.createdAt });
+    }
+    if (note.updatedAt) {
+      items.push({ label: "Updated", value: note.updatedAt });
+    }
+    if (typeof note.wordCount === "number" && note.wordCount > 0) {
+      items.push({ label: "Words", value: String(note.wordCount) });
+    }
+    if (typeof note.readingTime === "number" && note.readingTime > 0) {
+      items.push({ label: "Read", value: `${note.readingTime} min` });
+    }
+    return items;
+  }, [note]);
+  const dispatchHashChange = useCallback(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const event = typeof window.HashChangeEvent === "function" ? new HashChangeEvent("hashchange") : new Event("hashchange");
+    window.dispatchEvent(event);
+  }, []);
+  const handleNoteLinkNavigation = useCallback(
+    (event, slug, fragment) => {
+      if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey || event.currentTarget?.target && event.currentTarget.target !== "_self") {
+        return;
+      }
+      event.preventDefault();
+      if (typeof window === "undefined") {
+        return;
+      }
+      if (onNavigateNote) {
+        onNavigateNote(slug, fragment ? { fragment } : void 0);
+      }
+      const targetHash = buildNoteHash(slug, fragment);
+      if (window.location.hash !== targetHash) {
+        window.history.pushState(null, "", targetHash);
+      }
+      dispatchHashChange();
+    },
+    [dispatchHashChange, onNavigateNote]
+  );
+  useEffect(() => {
+    const container = contentRef.current;
+    if (!container || !note) {
+      return;
+    }
+    const cleanupFns = [];
+    const codeBlocks = Array.from(container.querySelectorAll("pre"));
+    codeBlocks.forEach((pre) => {
+      if (pre.dataset.papyrEnhanced === "true") {
+        return;
+      }
+      const code = pre.querySelector("code");
+      if (!code) {
+        return;
+      }
+      const wrapper = document.createElement("div");
+      wrapper.classList.add(styles$d.codeBlockWrapper);
+      wrapper.setAttribute("data-papyr-code-wrapper", "true");
+      const header = document.createElement("div");
+      header.classList.add(styles$d.codeBlockHeader);
+      const languageClass = Array.from(code.classList).find((cls) => cls.startsWith("language-"));
+      const detectedLanguage = languageClass ? languageClass.replace("language-", "") : code.getAttribute("data-language") || void 0;
+      const language = detectedLanguage && detectedLanguage.trim() || "code";
+      const label = document.createElement("span");
+      label.classList.add(styles$d.codeBlockLanguage);
+      label.textContent = language.toUpperCase();
+      header.appendChild(label);
+      const button = document.createElement("button");
+      button.type = "button";
+      button.classList.add(styles$d.copyButton);
+      button.setAttribute("data-papyr-copy-button", "true");
+      button.setAttribute("aria-label", "Copy code block");
+      button.title = "Copy code";
+      let resetTimer;
+      const setButtonState = (state, autoReset) => {
+        window.clearTimeout(resetTimer);
+        button.dataset.state = state;
+        switch (state) {
+          case "idle":
+            button.textContent = "Copy";
+            break;
+          case "copied":
+            button.textContent = "Copied ✓";
+            if (autoReset) {
+              resetTimer = window.setTimeout(() => setButtonState("idle", false), 2e3);
+            }
+            break;
+          case "empty":
+            button.textContent = "Empty";
+            if (autoReset) {
+              resetTimer = window.setTimeout(() => setButtonState("idle", false), 1500);
+            }
+            break;
+          case "error":
+            button.textContent = "Copy Failed";
+            if (autoReset) {
+              resetTimer = window.setTimeout(() => setButtonState("idle", false), 2e3);
+            }
+            break;
+        }
+      };
+      const fallbackCopy = (text) => {
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        textarea.setAttribute("readonly", "");
+        textarea.style.position = "absolute";
+        textarea.style.left = "-9999px";
+        textarea.style.top = "0";
+        textarea.style.opacity = "0";
+        document.body.appendChild(textarea);
+        try {
+          textarea.focus({ preventScroll: true });
+        } catch (focusError) {
+          textarea.focus();
+        }
+        textarea.select();
+        try {
+          textarea.setSelectionRange(0, textarea.value.length);
+        } catch (selectionError) {
+        }
+        const successful = document.execCommand("copy");
+        document.body.removeChild(textarea);
+        if (!successful) {
+          throw new Error("execCommand returned false");
+        }
+      };
+      const handleCopy = async (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const text = (code.innerText ?? code.textContent ?? "").replace(/\u00a0/g, " ");
+        if (!text.trim()) {
+          setButtonState("empty", true);
+          return;
+        }
+        try {
+          if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(text);
+          } else {
+            fallbackCopy(text);
+          }
+          setButtonState("copied", true);
+        } catch (error) {
+          console.warn("Failed to copy code block", error);
+          try {
+            fallbackCopy(text);
+            setButtonState("copied", true);
+          } catch (fallbackError) {
+            console.warn("Fallback copy failed", fallbackError);
+            setButtonState("error", true);
+          }
+        }
+      };
+      setButtonState("idle", false);
+      button.addEventListener("click", handleCopy);
+      cleanupFns.push(() => {
+        button.removeEventListener("click", handleCopy);
+        window.clearTimeout(resetTimer);
+      });
+      header.appendChild(button);
+      pre.parentElement?.insertBefore(wrapper, pre);
+      wrapper.appendChild(header);
+      wrapper.appendChild(pre);
+      pre.classList.add(styles$d.codeBlockPre);
+      code.classList.add(styles$d.codeBlockCode);
+      pre.dataset.papyrEnhanced = "true";
+    });
+    const anchorLinks = Array.from(container.querySelectorAll("a"));
+    const handleAnchorClick = (event) => {
+      const anchor = event.currentTarget;
+      const href = anchor.getAttribute("href") ?? "";
+      if (!href.startsWith("#") || href.startsWith("#/")) {
+        return;
+      }
+      const targetId = href.slice(1);
+      if (!targetId) {
+        return;
+      }
+      event.preventDefault();
+      const targetElement = document.getElementById(targetId);
+      if (targetElement) {
+        targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+      updateHashWithAnchor(targetId);
+    };
+    anchorLinks.forEach((link) => {
+      const href = link.getAttribute("href") ?? "";
+      if (href.startsWith("#") && !href.startsWith("#/")) {
+        link.addEventListener("click", handleAnchorClick);
+        cleanupFns.push(() => {
+          link.removeEventListener("click", handleAnchorClick);
+        });
+      }
+    });
+    if (typeof window !== "undefined") {
+      const hash = window.location.hash ?? "";
+      const { slug: hashSlug, anchor: hashAnchor } = parseNoteHash(hash);
+      if (hashAnchor && (!hashSlug || hashSlug === note.slug)) {
+        const targetElement = document.getElementById(hashAnchor);
+        if (targetElement) {
+          window.requestAnimationFrame(() => {
+            targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
+          });
+        }
+      }
+    }
+    return () => {
+      cleanupFns.forEach((fn) => fn());
+    };
+  }, [note?.slug, note?.html]);
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    inlinePreviewCleanupRef.current.forEach((cleanup) => cleanup());
+    inlinePreviewCleanupRef.current = [];
+    const container = contentRef.current;
+    if (!container || !note) {
+      return;
+    }
+    const inlineLinks = Array.from(
+      container.querySelectorAll('a[href^="#/note/"]')
+    );
+    inlineLinks.forEach((anchor) => {
+      const href = anchor.getAttribute("href") ?? "";
+      if (!href.startsWith(NOTE_LINK_PREFIX)) {
+        return;
+      }
+      if (anchor.closest('[data-papyr-inline-preview="true"]')) {
+        return;
+      }
+      const rawTarget = href.slice(NOTE_LINK_PREFIX.length);
+      const [rawSlugPart, ...fragmentParts] = rawTarget.split("#");
+      const fragment = fragmentParts.length > 0 ? fragmentParts.join("#").trim() || void 0 : void 0;
+      const decodedTarget = safeDecode(rawSlugPart);
+      const resolvedSlug = resolveLinkedSlug(decodedTarget);
+      if (!resolvedSlug) {
+        return;
+      }
+      const targetNote = noteLookup[resolvedSlug];
+      if (!targetNote) {
+        return;
+      }
+      const parent = anchor.parentElement;
+      if (!parent) {
+        return;
+      }
+      const wrapper = document.createElement("span");
+      wrapper.setAttribute("data-papyr-inline-preview", "true");
+      parent.replaceChild(wrapper, anchor);
+      const anchorHtml = anchor.innerHTML;
+      const preservedAttributes = cloneElementAttributes(anchor, ["href"]);
+      const previewData = getPreviewData(targetNote);
+      const noteHref = buildNoteHash(resolvedSlug, fragment);
+      const root = createRoot(wrapper);
+      root.render(
+        /* @__PURE__ */ jsx(
+          HoverPreview,
+          {
+            highlightTrigger: false,
+            trigger: /* @__PURE__ */ jsx(
+              InlinePreviewAnchor,
+              {
+                attributes: preservedAttributes,
+                href: noteHref,
+                innerHtml: anchorHtml,
+                onClick: (event) => handleNoteLinkNavigation(event, resolvedSlug, fragment)
+              }
+            ),
+            renderPreview: () => /* @__PURE__ */ jsx(NotePreviewContent, { note: previewData })
+          }
+        )
+      );
+      inlinePreviewCleanupRef.current.push(() => {
+        root.unmount();
+        wrapper.replaceWith(anchor);
+      });
+    });
+    return () => {
+      inlinePreviewCleanupRef.current.forEach((cleanup) => cleanup());
+      inlinePreviewCleanupRef.current = [];
+    };
+  }, [
+    note?.slug,
+    note?.html,
+    resolveLinkedSlug,
+    noteLookup,
+    handleNoteLinkNavigation,
+    getPreviewData
+  ]);
+  const hasLinkedNotes = linkedNotes.length > 0;
+  if (!note) {
+    return emptyState ? /* @__PURE__ */ jsx(Fragment, { children: emptyState }) : null;
+  }
+  return /* @__PURE__ */ jsxs("article", { className: styles$d.container, "data-papyr-component": "NoteViewer", children: [
+    /* @__PURE__ */ jsxs("header", { className: styles$d.header, children: [
+      breadcrumbTrail.length > 0 && /* @__PURE__ */ jsx(Breadcrumbs, { trail: breadcrumbTrail, className: styles$d.breadcrumbs }),
+      /* @__PURE__ */ jsx("h1", { className: styles$d.title, children: note.title }),
+      note.description && /* @__PURE__ */ jsx("p", { className: styles$d.summary, children: note.description }),
+      /* @__PURE__ */ jsxs("div", { className: styles$d.metaRow, children: [
+        /* @__PURE__ */ jsx("div", { className: styles$d.tagList, children: note.tags?.length ? note.tags.map((tag) => /* @__PURE__ */ jsx("span", { className: styles$d.tag, children: tag }, tag)) : /* @__PURE__ */ jsx("span", { className: styles$d.tagEmpty, children: "No tags assigned" }) }),
+        metaItems.length > 0 && /* @__PURE__ */ jsx("dl", { className: styles$d.metaList, children: metaItems.map((item) => /* @__PURE__ */ jsxs("div", { className: styles$d.metaItem, children: [
+          /* @__PURE__ */ jsx("dt", { children: item.label }),
+          /* @__PURE__ */ jsx("dd", { children: item.value })
+        ] }, item.label)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "section",
+      {
+        ref: contentRef,
+        className: styles$d.content,
+        dangerouslySetInnerHTML: { __html: note.html }
+      }
+    ),
+    hasLinkedNotes ? /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: styles$d.linkedNotes,
+        "aria-labelledby": linkedNotesHeadingId,
+        "data-papyr-component": "LinkedNotesPreview",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles$d.linkedNotesHeader, children: [
+            /* @__PURE__ */ jsx("h2", { id: linkedNotesHeadingId, className: styles$d.linkedNotesTitle, children: "Linked notes" }),
+            /* @__PURE__ */ jsx("span", { className: styles$d.linkedNotesCount, children: linkedNotes.length })
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: styles$d.linkedNotesList, children: linkedNotes.map((related) => /* @__PURE__ */ jsx("li", { className: styles$d.linkedNotesItem, children: /* @__PURE__ */ jsx(
+            HoverPreview,
+            {
+              highlightTrigger: false,
+              trigger: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: buildNoteHash(related.slug),
+                  className: styles$d.linkedNoteLink,
+                  onClick: (event) => handleNoteLinkNavigation(event, related.slug),
+                  children: related.title ?? related.slug
+                }
+              ),
+              renderPreview: () => /* @__PURE__ */ jsx(NotePreviewContent, { note: related })
+            }
+          ) }, related.slug)) })
+        ]
+      }
+    ) : null
+  ] });
+};
+
+const wrapper = "_wrapper_1suuy_1";
+const input$2 = "_input_1suuy_6";
+const styles$8 = {
+	wrapper: wrapper,
+	input: input$2
+};
+
+const SearchBar = ({
+  query,
+  onQueryChange,
+  placeholder = "Search notes…",
+  className
+}) => {
+  const handleChange = (event) => {
+    onQueryChange(event.target.value);
+  };
+  return /* @__PURE__ */ jsx("div", { className: clsx(styles$8.wrapper, className), "data-papyr-component": "SearchBar", children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      className: styles$8.input,
+      value: query,
+      onChange: handleChange,
+      placeholder,
+      type: "search",
+      autoComplete: "off",
+      "aria-label": "Search notes"
+    }
+  ) });
+};
+
+const container$6 = "_container_r50hu_1";
+const tag = "_tag_r50hu_7";
+const tagActive = "_tagActive_r50hu_30";
+const styles$7 = {
+	container: container$6,
+	tag: tag,
+	tagActive: tagActive
+};
+
+const TagFilter = ({
+  availableTags,
+  selectedTags,
+  onChange,
+  className
+}) => {
+  const toggle = (tag) => {
+    if (selectedTags.includes(tag)) {
+      onChange(selectedTags.filter((existing) => existing !== tag));
+    } else {
+      onChange([...selectedTags, tag]);
+    }
+  };
+  if (!availableTags.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(styles$7.container, className),
+      "data-papyr-component": "TagFilter",
+      role: "group",
+      "aria-label": "Filter by tags",
+      children: availableTags.map((tag) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: clsx(styles$7.tag, selectedTags.includes(tag) && styles$7.tagActive),
+          onClick: () => toggle(tag),
+          "aria-pressed": selectedTags.includes(tag),
+          children: [
+            "#",
+            tag
+          ]
+        },
+        tag
+      ))
+    }
+  );
+};
+
+const container$5 = "_container_vip00_1";
+const input$1 = "_input_vip00_7";
+const dropdown = "_dropdown_vip00_24";
+const category = "_category_vip00_39";
+const categoryTitle = "_categoryTitle_vip00_43";
+const resultItem = "_resultItem_vip00_54";
+const resultItemSelected = "_resultItemSelected_vip00_67";
+const resultTitle = "_resultTitle_vip00_71";
+const resultExcerpt = "_resultExcerpt_vip00_75";
+const titleMatch = "_titleMatch_vip00_80";
+const headingMatch = "_headingMatch_vip00_84";
+const highlight = "_highlight_vip00_110";
+const styles$6 = {
+	container: container$5,
+	input: input$1,
+	dropdown: dropdown,
+	category: category,
+	categoryTitle: categoryTitle,
+	resultItem: resultItem,
+	resultItemSelected: resultItemSelected,
+	resultTitle: resultTitle,
+	resultExcerpt: resultExcerpt,
+	titleMatch: titleMatch,
+	headingMatch: headingMatch,
+	highlight: highlight
+};
+
+const SearchDropdown = ({
+  searchIndex,
+  onResultClick,
+  placeholder = "Search...",
+  className,
+  maxResults = 20,
+  showCategories = true
+}) => {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState([]);
+  const [categorizedResults, setCategorizedResults] = useState({
+    titleMatches: [],
+    headingMatches: [],
+    contentMatches: []
+  });
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef(null);
+  const dropdownRef = useRef(null);
+  useEffect(() => {
+    if (!query.trim()) {
+      setResults([]);
+      setCategorizedResults({ titleMatches: [], headingMatches: [], contentMatches: [] });
+      setIsOpen(false);
+      return;
+    }
+    const searchResults = searchNotes(query, searchIndex, {
+      limit: maxResults,
+      highlight: true,
+      fuzzy: true,
+      boost: { title: 5, headings: 3, content: 1, metadata: 2 }
+      // Boost titles and headings
+    });
+    const titleMatches = searchResults.filter(
+      (result) => result.matchedFields.includes("title")
+    );
+    const headingMatches = searchResults.filter(
+      (result) => !result.matchedFields.includes("title") && result.matchedFields.includes("headings")
+    );
+    const contentMatches = searchResults.filter(
+      (result) => !result.matchedFields.includes("title") && !result.matchedFields.includes("headings")
+    );
+    const orderedResults = showCategories ? [...titleMatches, ...headingMatches, ...contentMatches] : searchResults;
+    setResults(orderedResults);
+    setCategorizedResults({ titleMatches, headingMatches, contentMatches });
+    setIsOpen(orderedResults.length > 0);
+    setSelectedIndex(0);
+  }, [query, searchIndex, maxResults, showCategories]);
+  const handleKeyDown = (event) => {
+    if (!isOpen || results.length === 0) return;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setSelectedIndex((prev) => (prev + 1) % results.length);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        setSelectedIndex((prev) => (prev - 1 + results.length) % results.length);
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (results[selectedIndex]) {
+          onResultClick(results[selectedIndex].slug);
+          setIsOpen(false);
+        }
+        break;
+      case "Escape":
+        setIsOpen(false);
+        inputRef.current?.blur();
+        break;
+    }
+  };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const highlightText = (text, query2) => {
+    if (!query2.trim()) return text;
+    const regex = new RegExp(`(${query2.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
+    const parts = text.split(regex);
+    return parts.map(
+      (part, index) => regex.test(part) ? /* @__PURE__ */ jsx("mark", { className: styles$6.highlight, children: part }, index) : part
+    );
+  };
+  const renderResult = (result, index) => {
+    const isSelected = index === selectedIndex;
+    const isTitleMatch = result.matchedFields.includes("title");
+    const isHeadingMatch = !isTitleMatch && result.matchedFields.includes("headings");
+    const headingHighlight = result.highlights?.find((highlight) => highlight.field === "headings");
+    const excerptText = isHeadingMatch ? headingHighlight?.text ?? result.excerpt : result.excerpt;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: `result-${result.slug}`,
+        role: "option",
+        "aria-selected": isSelected,
+        className: clsx(
+          styles$6.resultItem,
+          isSelected && styles$6.resultItemSelected,
+          isTitleMatch && styles$6.titleMatch,
+          isHeadingMatch && styles$6.headingMatch
+        ),
+        onClick: () => {
+          onResultClick(result.slug);
+          setIsOpen(false);
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: styles$6.resultTitle, children: highlightText(result.title, query) }),
+          excerptText && /* @__PURE__ */ jsx("div", { className: styles$6.resultExcerpt, children: highlightText(excerptText, query) })
+        ]
+      },
+      result.slug
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles$6.container, className), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "search",
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        onKeyDown: handleKeyDown,
+        onFocus: () => query.trim() && setIsOpen(true),
+        placeholder,
+        className: styles$6.input,
+        autoComplete: "off",
+        "aria-label": "Search",
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-controls": "search-results",
+        "aria-activedescendant": isOpen && results[selectedIndex] ? `result-${results[selectedIndex].slug}` : void 0,
+        "aria-autocomplete": "list"
+      }
+    ),
+    isOpen && results.length > 0 && /* @__PURE__ */ jsx("div", { ref: dropdownRef, className: styles$6.dropdown, id: "search-results", role: "listbox", children: showCategories ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      categorizedResults.titleMatches.length > 0 && /* @__PURE__ */ jsxs("div", { className: styles$6.category, children: [
+        /* @__PURE__ */ jsx("div", { className: styles$6.categoryTitle, children: "Notes" }),
+        categorizedResults.titleMatches.map(
+          (result, index) => renderResult(result, index)
+        )
+      ] }),
+      categorizedResults.headingMatches.length > 0 && /* @__PURE__ */ jsxs("div", { className: styles$6.category, children: [
+        /* @__PURE__ */ jsx("div", { className: styles$6.categoryTitle, children: "Headers" }),
+        categorizedResults.headingMatches.map(
+          (result, index) => renderResult(result, categorizedResults.titleMatches.length + index)
+        )
+      ] }),
+      categorizedResults.contentMatches.length > 0 && /* @__PURE__ */ jsxs("div", { className: styles$6.category, children: [
+        /* @__PURE__ */ jsx("div", { className: styles$6.categoryTitle, children: "Content" }),
+        categorizedResults.contentMatches.map(
+          (result, index) => renderResult(
+            result,
+            categorizedResults.titleMatches.length + categorizedResults.headingMatches.length + index
+          )
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsx("div", { className: styles$6.category, children: results.map((result, index) => renderResult(result, index)) }) })
+  ] });
+};
+
+const container$4 = "_container_1dw3c_2";
+const containerCompact = "_containerCompact_1dw3c_7";
+const input = "_input_1dw3c_13";
+const inputCompact = "_inputCompact_1dw3c_37";
+const styles$5 = {
+	container: container$4,
+	containerCompact: containerCompact,
+	input: input,
+	inputCompact: inputCompact
+};
+
+const FileSearch = ({
+  query,
+  onChange,
+  placeholder = "Search files...",
+  className,
+  compact = false
+}) => {
+  const handleChange = (e) => {
+    onChange(e.target.value);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        styles$5.container,
+        compact && styles$5.containerCompact,
+        className
+      ),
+      "data-papyr-component": "FileSearch",
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "search",
+          className: clsx(
+            styles$5.input,
+            compact && styles$5.inputCompact
+          ),
+          placeholder,
+          value: query,
+          onChange: handleChange,
+          autoComplete: "off",
+          "aria-label": "Search files"
+        }
+      )
+    }
+  );
+};
+
+const fileHierarchy = "_fileHierarchy_15xp0_1";
+const header = "_header_15xp0_11";
+const sectionTitle = "_sectionTitle_15xp0_17";
+const searchContainer = "_searchContainer_15xp0_26";
+const scrollContainer = "_scrollContainer_15xp0_33";
+const tree = "_tree_15xp0_48";
+const treeItem = "_treeItem_15xp0_54";
+const folderHeader = "_folderHeader_15xp0_60";
+const folderHeaderClickable = "_folderHeaderClickable_15xp0_70";
+const folderName = "_folderName_15xp0_74";
+const chevron = "_chevron_15xp0_78";
+const chevronExpanded = "_chevronExpanded_15xp0_109";
+const children = "_children_15xp0_124";
+const noteItem = "_noteItem_15xp0_134";
+const noteButton = "_noteButton_15xp0_138";
+const noteLabel = "_noteLabel_15xp0_157";
+const noteButtonActive = "_noteButtonActive_15xp0_180";
+const noteButtonSearchMatch = "_noteButtonSearchMatch_15xp0_189";
+const emptyState = "_emptyState_15xp0_198";
+const styles$4 = {
+	fileHierarchy: fileHierarchy,
+	header: header,
+	sectionTitle: sectionTitle,
+	searchContainer: searchContainer,
+	scrollContainer: scrollContainer,
+	tree: tree,
+	treeItem: treeItem,
+	folderHeader: folderHeader,
+	folderHeaderClickable: folderHeaderClickable,
+	folderName: folderName,
+	chevron: chevron,
+	chevronExpanded: chevronExpanded,
+	children: children,
+	noteItem: noteItem,
+	noteButton: noteButton,
+	noteLabel: noteLabel,
+	noteButtonActive: noteButtonActive,
+	noteButtonSearchMatch: noteButtonSearchMatch,
+	emptyState: emptyState
+};
+
+const capitalizeFirstLetter = (value) => {
+  if (!value) return value;
+  return value.charAt(0).toUpperCase() + value.slice(1);
+};
+const formatFolderName = (name) => capitalizeFirstLetter(name);
+const getNoteDisplayText = (slug, noteTitleMap) => {
+  const title = noteTitleMap?.[slug] ?? slug;
+  return capitalizeFirstLetter(title);
+};
+
+const containsSlug = (node, slug) => {
+  if (!slug) return false;
+  if (node.notes.includes(slug)) return true;
+  return node.children.some((child) => containsSlug(child, slug));
+};
+const MemoizedFolderTree = memo(({
+  node,
+  onNoteClick,
+  renderNoteLink,
+  activeSlug,
+  noteTitleMap,
+  depth = 0,
+  isSearching = false,
+  searchQuery = ""
+}) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const hasChildren = node.children.length > 0 || node.notes.length > 0;
+  const toggleExpanded = () => {
+    if (hasChildren) {
+      setIsExpanded(!isExpanded);
+    }
+  };
+  const hasActiveDescendant = useMemo(() => containsSlug(node, activeSlug), [node, activeSlug]);
+  useEffect(() => {
+    if (hasActiveDescendant) {
+      setIsExpanded(true);
+    }
+  }, [hasActiveDescendant]);
+  const isOpen = isExpanded || isSearching;
+  const normalizedSearchQuery = searchQuery.trim().toLowerCase();
+  return /* @__PURE__ */ jsxs("li", { className: styles$4.treeItem, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          styles$4.folderHeader,
+          hasChildren && styles$4.folderHeaderClickable
+        ),
+        onClick: toggleExpanded,
+        role: hasChildren ? "button" : void 0,
+        "aria-expanded": hasChildren ? isOpen ? true : false : void 0,
+        children: [
+          hasChildren && /* @__PURE__ */ jsx("span", { className: clsx(styles$4.chevron, isOpen && styles$4.chevronExpanded), children: "›" }),
+          /* @__PURE__ */ jsx("span", { className: styles$4.folderName, children: formatFolderName(node.name) })
+        ]
+      }
+    ),
+    isOpen && hasChildren && /* @__PURE__ */ jsxs("ul", { className: styles$4.children, children: [
+      node.children.map((child) => /* @__PURE__ */ jsx(
+        MemoizedFolderTree,
+        {
+          node: child,
+          onNoteClick,
+          renderNoteLink,
+          activeSlug,
+          noteTitleMap,
+          depth: depth + 1,
+          isSearching,
+          searchQuery
+        },
+        child.path
+      )),
+      node.notes.map((slug) => {
+        const displayText = getNoteDisplayText(slug, noteTitleMap);
+        const isSearchMatch = Boolean(normalizedSearchQuery) && displayText.toLowerCase().includes(normalizedSearchQuery);
+        const isActive = slug === activeSlug;
+        const handleClick = () => onNoteClick?.(slug);
+        const renderContext = {
+          onClick: handleClick,
+          isActive,
+          isSearchMatch
+        };
+        return /* @__PURE__ */ jsx("li", { className: styles$4.noteItem, children: renderNoteLink ? renderNoteLink(slug, renderContext) : /* @__PURE__ */ jsx(
+          MemoizedNoteButton,
+          {
+            displayText,
+            isActive,
+            isSearchMatch,
+            onClick: handleClick
+          }
+        ) }, slug);
+      })
+    ] })
+  ] });
+});
+const MemoizedNoteButton = memo(({ displayText, isActive, isSearchMatch, onClick }) => {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: clsx(
+        styles$4.noteButton,
+        isActive && styles$4.noteButtonActive,
+        isSearchMatch && styles$4.noteButtonSearchMatch
+      ),
+      onClick,
+      children: /* @__PURE__ */ jsx("span", { className: styles$4.noteLabel, children: displayText })
+    }
+  );
+});
+MemoizedFolderTree.displayName = "MemoizedFolderTree";
+MemoizedNoteButton.displayName = "MemoizedNoteButton";
+
+const normalizeTree = (tree) => {
+  if (Array.isArray(tree)) {
+    return { nodes: tree, rootNotes: [] };
+  }
+  return {
+    nodes: tree.children,
+    rootNotes: [...tree.notes]
+  };
+};
+const filterTreeBySearch = (tree, searchQuery, noteTitleMap) => {
+  if (!searchQuery.trim()) return tree;
+  const query = searchQuery.toLowerCase();
+  return tree.map((node) => {
+    const filteredNotes = node.notes.filter((slug) => {
+      const displayText = getNoteDisplayText(slug, noteTitleMap);
+      return displayText.toLowerCase().includes(query);
+    });
+    const filteredChildren = filterTreeBySearch(node.children, searchQuery, noteTitleMap);
+    const hasMatches = filteredNotes.length > 0 || filteredChildren.length > 0;
+    if (hasMatches) {
+      return {
+        ...node,
+        notes: filteredNotes,
+        children: filteredChildren
+      };
+    }
+    return null;
+  }).filter(Boolean);
+};
+const FileHierarchy = ({
+  tree,
+  className,
+  onNoteClick,
+  renderNoteLink,
+  activeSlug,
+  notes,
+  searchable = false,
+  searchIndex,
+  searchPlaceholder = "Search files..."
+}) => {
+  const [fallbackSearchQuery, setFallbackSearchQuery] = useState("");
+  const noteTitleMap = useMemo(() => {
+    if (!notes) return void 0;
+    return notes.reduce((acc, note) => {
+      acc[note.slug] = note.title;
+      return acc;
+    }, {});
+  }, [notes]);
+  const isFallbackSearchEnabled = searchable && !searchIndex;
+  const isFallbackSearching = isFallbackSearchEnabled && Boolean(fallbackSearchQuery.trim());
+  useEffect(() => {
+    if (!isFallbackSearchEnabled) return;
+    console.warn("[papyr] FileHierarchy rendered with `searchable` but no `searchIndex`. Falling back to tree-based filtering.");
+  }, [isFallbackSearchEnabled]);
+  useEffect(() => {
+    if (searchIndex) {
+      setFallbackSearchQuery("");
+    }
+  }, [searchIndex]);
+  const handleSearchResultClick = useCallback((slug) => {
+    onNoteClick?.(slug);
+  }, [onNoteClick]);
+  const normalizedTree = useMemo(() => normalizeTree(tree), [tree]);
+  const filteredHierarchy = useMemo(() => {
+    if (!isFallbackSearchEnabled) {
+      return normalizedTree;
+    }
+    const filteredNodes = filterTreeBySearch(
+      normalizedTree.nodes,
+      fallbackSearchQuery,
+      noteTitleMap
+    );
+    const query = fallbackSearchQuery.trim().toLowerCase();
+    const filteredRootNotes = normalizedTree.rootNotes.filter((slug) => {
+      if (!query) return true;
+      const displayText = getNoteDisplayText(slug, noteTitleMap);
+      return displayText.toLowerCase().includes(query);
+    });
+    return {
+      nodes: filteredNodes,
+      rootNotes: filteredRootNotes
+    };
+  }, [normalizedTree, isFallbackSearchEnabled, fallbackSearchQuery, noteTitleMap]);
+  const treeToRender = filteredHierarchy.nodes;
+  const rootNotesToRender = filteredHierarchy.rootNotes;
+  const effectiveSearchQuery = isFallbackSearchEnabled ? fallbackSearchQuery : "";
+  const isEmptyState = !treeToRender.length && !rootNotesToRender.length;
+  const emptyStateMessage = isFallbackSearching ? "No results found" : "No files to display yet";
+  return /* @__PURE__ */ jsxs("aside", { className: clsx(styles$4.fileHierarchy, className), "data-papyr-component": "FileHierarchy", "aria-label": "File navigation", children: [
+    /* @__PURE__ */ jsx("div", { className: styles$4.header, children: /* @__PURE__ */ jsx("span", { className: styles$4.sectionTitle, children: "Files" }) }),
+    searchable && /* @__PURE__ */ jsx("div", { className: styles$4.searchContainer, children: searchIndex ? /* @__PURE__ */ jsx(
+      SearchDropdown,
+      {
+        searchIndex,
+        onResultClick: handleSearchResultClick,
+        placeholder: searchPlaceholder
+      }
+    ) : /* @__PURE__ */ jsx(
+      FileSearch,
+      {
+        query: fallbackSearchQuery,
+        onChange: setFallbackSearchQuery,
+        placeholder: searchPlaceholder,
+        compact: true
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: styles$4.scrollContainer, children: isEmptyState ? /* @__PURE__ */ jsx("div", { className: styles$4.emptyState, children: emptyStateMessage }) : /* @__PURE__ */ jsxs("ul", { className: styles$4.tree, children: [
+      rootNotesToRender.map((slug) => {
+        const displayText = getNoteDisplayText(slug, noteTitleMap);
+        const isActive = slug === activeSlug;
+        const isSearchMatch = effectiveSearchQuery.trim().length > 0 && displayText.toLowerCase().includes(effectiveSearchQuery.toLowerCase());
+        const handleClick = () => onNoteClick?.(slug);
+        const renderContext = {
+          onClick: handleClick,
+          isActive,
+          isSearchMatch
+        };
+        return /* @__PURE__ */ jsx("li", { className: styles$4.noteItem, children: renderNoteLink ? renderNoteLink(slug, renderContext) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: clsx(
+              styles$4.noteButton,
+              isActive && styles$4.noteButtonActive,
+              isSearchMatch && styles$4.noteButtonSearchMatch
+            ),
+            onClick: handleClick,
+            children: displayText
+          }
+        ) }, `root-${slug}`);
+      }),
+      treeToRender.map((node) => /* @__PURE__ */ jsx(
+        MemoizedFolderTree,
+        {
+          node,
+          onNoteClick,
+          renderNoteLink,
+          activeSlug,
+          noteTitleMap,
+          isSearching: isFallbackSearching,
+          searchQuery: effectiveSearchQuery
+        },
+        node.path
+      ))
+    ] }) })
+  ] });
+};
+
+const container$3 = "_container_f89dg_1";
+const icon = "_icon_f89dg_11";
+const emoji = "_emoji_f89dg_16";
+const title = "_title_f89dg_21";
+const description = "_description_f89dg_28";
+const actions = "_actions_f89dg_36";
+const styles$3 = {
+	container: container$3,
+	icon: icon,
+	emoji: emoji,
+	title: title,
+	description: description,
+	actions: actions
+};
+
+const EmptyState = ({
+  icon,
+  title,
+  description,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(styles$3.container, className),
+      "data-papyr-component": "EmptyState",
+      role: "status",
+      "aria-label": title,
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: styles$3.icon, "aria-hidden": "true", children: typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: styles$3.emoji, children: icon }) : icon }),
+        /* @__PURE__ */ jsx("h2", { className: styles$3.title, children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: styles$3.description, children: description }),
+        children && /* @__PURE__ */ jsx("div", { className: styles$3.actions, children })
+      ]
+    }
+  );
+};
+
+const container$2 = "_container_13ske_1";
+const skipLink$1 = "_skipLink_13ske_9";
+const containerFullHeight$1 = "_containerFullHeight_13ske_26";
+const containerAutoHeight$1 = "_containerAutoHeight_13ske_32";
+const sidebar$1 = "_sidebar_13ske_36";
+const sidebarScrollArea$1 = "_sidebarScrollArea_13ske_46";
+const sidebarScrollAreaFullHeight = "_sidebarScrollAreaFullHeight_13ske_52";
+const sidebarScrollAreaAutoHeight = "_sidebarScrollAreaAutoHeight_13ske_60";
+const sidebarScrollAreaHiddenScrollbars$1 = "_sidebarScrollAreaHiddenScrollbars_13ske_64";
+const main$1 = "_main_13ske_74";
+const mainScrollArea$1 = "_mainScrollArea_13ske_85";
+const mainScrollAreaFullHeight = "_mainScrollAreaFullHeight_13ske_94";
+const mainScrollAreaAutoHeight = "_mainScrollAreaAutoHeight_13ske_102";
+const styles$2 = {
+	container: container$2,
+	skipLink: skipLink$1,
+	containerFullHeight: containerFullHeight$1,
+	containerAutoHeight: containerAutoHeight$1,
+	sidebar: sidebar$1,
+	sidebarScrollArea: sidebarScrollArea$1,
+	sidebarScrollAreaFullHeight: sidebarScrollAreaFullHeight,
+	sidebarScrollAreaAutoHeight: sidebarScrollAreaAutoHeight,
+	sidebarScrollAreaHiddenScrollbars: sidebarScrollAreaHiddenScrollbars$1,
+	main: main$1,
+	mainScrollArea: mainScrollArea$1,
+	mainScrollAreaFullHeight: mainScrollAreaFullHeight,
+	mainScrollAreaAutoHeight: mainScrollAreaAutoHeight
+};
+
+const SidebarLayout = ({
+  sidebar,
+  main,
+  className,
+  sidebarWidth = 280,
+  fullHeight = true
+}) => {
+  const gridTemplateColumns = typeof sidebarWidth === "number" ? `${sidebarWidth}px 1fr` : `${sidebarWidth} 1fr`;
+  const containerClassName = clsx(
+    styles$2.container,
+    fullHeight ? styles$2.containerFullHeight : styles$2.containerAutoHeight,
+    className
+  );
+  const sidebarScrollClassName = clsx(
+    styles$2.sidebarScrollArea,
+    fullHeight ? styles$2.sidebarScrollAreaFullHeight : styles$2.sidebarScrollAreaAutoHeight,
+    styles$2.sidebarScrollAreaHiddenScrollbars
+  );
+  const mainScrollClassName = clsx(
+    styles$2.mainScrollArea,
+    fullHeight ? styles$2.mainScrollAreaFullHeight : styles$2.mainScrollAreaAutoHeight
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: containerClassName,
+      style: { gridTemplateColumns },
+      "data-papyr-component": "SidebarLayout",
+      children: [
+        /* @__PURE__ */ jsx("a", { href: "#main-content", className: styles$2.skipLink, children: "Skip to main content" }),
+        /* @__PURE__ */ jsx("aside", { className: styles$2.sidebar, "aria-label": "Primary navigation", children: /* @__PURE__ */ jsx("div", { className: sidebarScrollClassName, children: sidebar }) }),
+        /* @__PURE__ */ jsx("main", { id: "main-content", className: styles$2.main, children: /* @__PURE__ */ jsx("div", { className: mainScrollClassName, children: main }) })
+      ]
+    }
+  );
+};
+
+const container$1 = "_container_1ttbz_1";
+const skipLink = "_skipLink_1ttbz_9";
+const containerFullHeight = "_containerFullHeight_1ttbz_26";
+const containerAutoHeight = "_containerAutoHeight_1ttbz_32";
+const sidebar = "_sidebar_1ttbz_36";
+const sidebarScrollArea = "_sidebarScrollArea_1ttbz_51";
+const sidebarScrollAreaHiddenScrollbars = "_sidebarScrollAreaHiddenScrollbars_1ttbz_62";
+const main = "_main_1ttbz_72";
+const mainScrollArea = "_mainScrollArea_1ttbz_84";
+const styles$1 = {
+	container: container$1,
+	skipLink: skipLink,
+	containerFullHeight: containerFullHeight,
+	containerAutoHeight: containerAutoHeight,
+	sidebar: sidebar,
+	sidebarScrollArea: sidebarScrollArea,
+	sidebarScrollAreaHiddenScrollbars: sidebarScrollAreaHiddenScrollbars,
+	main: main,
+	mainScrollArea: mainScrollArea
+};
+
+const toCssSize = (value) => typeof value === "number" ? `${value}px` : value;
+const DoubleSidebarLayout = ({
+  leftSidebar,
+  main,
+  rightSidebar = null,
+  leftWidth = 280,
+  rightWidth = 480,
+  fullHeight = true,
+  hideSidebarScrollbars = true,
+  className
+}) => {
+  const containerClassName = clsx(
+    styles$1.container,
+    fullHeight ? styles$1.containerFullHeight : styles$1.containerAutoHeight,
+    className
+  );
+  const sidebarScrollClassName = clsx(
+    styles$1.sidebarScrollArea,
+    hideSidebarScrollbars && styles$1.sidebarScrollAreaHiddenScrollbars
+  );
+  const leftStyle = { width: toCssSize(leftWidth) };
+  const rightStyle = { width: toCssSize(rightWidth) };
+  return /* @__PURE__ */ jsxs("div", { className: containerClassName, "data-papyr-component": "DoubleSidebarLayout", children: [
+    /* @__PURE__ */ jsx("a", { href: "#main-content", className: styles$1.skipLink, children: "Skip to main content" }),
+    /* @__PURE__ */ jsx("aside", { className: styles$1.sidebar, style: leftStyle, "aria-label": "File navigation", children: /* @__PURE__ */ jsx("div", { className: sidebarScrollClassName, children: leftSidebar }) }),
+    /* @__PURE__ */ jsx("main", { id: "main-content", className: styles$1.main, children: /* @__PURE__ */ jsx("div", { className: styles$1.mainScrollArea, children: main }) }),
+    rightSidebar ? /* @__PURE__ */ jsx("aside", { className: styles$1.sidebar, style: rightStyle, "aria-label": "Contextual sidebar", children: /* @__PURE__ */ jsx("div", { className: sidebarScrollClassName, children: rightSidebar }) }) : null
+  ] });
+};
+
+const container = "_container_1uvfd_1";
+const list = "_list_1uvfd_13";
+const item = "_item_1uvfd_40";
+const itemActive = "_itemActive_1uvfd_48";
+const link = "_link_1uvfd_65";
+const linkActive = "_linkActive_1uvfd_84";
+const level1 = "_level1_1uvfd_91";
+const level2 = "_level2_1uvfd_102";
+const level3 = "_level3_1uvfd_106";
+const level4 = "_level4_1uvfd_110";
+const level5 = "_level5_1uvfd_114";
+const level6 = "_level6_1uvfd_118";
+const styles = {
+	container: container,
+	list: list,
+	item: item,
+	itemActive: itemActive,
+	link: link,
+	linkActive: linkActive,
+	level1: level1,
+	level2: level2,
+	level3: level3,
+	level4: level4,
+	level5: level5,
+	level6: level6
+};
+
+const TableOfContents = ({
+  note,
+  className,
+  title = "On this page",
+  onNavigate
+}) => {
+  const headings = note?.headings ?? [];
+  const hasRenderableHeadings = Boolean(note && headings.length > 0);
+  const [visibleHeadings, setVisibleHeadings] = useState(() => /* @__PURE__ */ new Set());
+  const clearVisibleHeadings = useCallback(() => {
+    setVisibleHeadings((prev) => {
+      if (prev.size === 0) {
+        return prev;
+      }
+      return /* @__PURE__ */ new Set();
+    });
+  }, []);
+  const headingSignature = headings.map((heading) => heading.slug).join("|");
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    if (!hasRenderableHeadings) {
+      clearVisibleHeadings();
+      return;
+    }
+    const targets = headings.map((heading) => {
+      const element = document.getElementById(heading.slug);
+      return element ? { slug: heading.slug, element } : null;
+    }).filter((value) => Boolean(value));
+    if (!targets.length) {
+      clearVisibleHeadings();
+      return;
+    }
+    const getScrollableParent = (element) => {
+      let parent = element.parentElement;
+      while (parent && parent !== document.body) {
+        const style = window.getComputedStyle(parent);
+        const overflowY = style.overflowY;
+        const overflow = style.overflow;
+        const isScrollable = /(auto|scroll)/.test(`${overflowY}${overflow}`);
+        if (isScrollable && parent.scrollHeight > parent.clientHeight + 1) {
+          return parent;
+        }
+        parent = parent.parentElement;
+      }
+      return window;
+    };
+    const getAbsoluteTop = (element) => element.getBoundingClientRect().top + window.scrollY;
+    const computeVisibleSections = () => {
+      const viewportTop = window.scrollY;
+      const viewportBottom = viewportTop + window.innerHeight;
+      const nextVisible = /* @__PURE__ */ new Set();
+      targets.forEach((target, index) => {
+        const sectionStart = getAbsoluteTop(target.element);
+        const nextTarget = targets[index + 1];
+        const sectionEnd = nextTarget ? getAbsoluteTop(nextTarget.element) : Number.POSITIVE_INFINITY;
+        if (sectionStart < viewportBottom && sectionEnd > viewportTop) {
+          nextVisible.add(target.slug);
+        }
+      });
+      setVisibleHeadings((prev) => {
+        if (prev.size === nextVisible.size) {
+          let identical = true;
+          prev.forEach((slug) => {
+            if (!nextVisible.has(slug)) {
+              identical = false;
+            }
+          });
+          if (identical) {
+            return prev;
+          }
+        }
+        return nextVisible;
+      });
+    };
+    let rafId = null;
+    const scheduleUpdate = () => {
+      if (rafId !== null) {
+        return;
+      }
+      rafId = window.requestAnimationFrame(() => {
+        rafId = null;
+        computeVisibleSections();
+      });
+    };
+    scheduleUpdate();
+    const scrollContainers = Array.from(
+      new Set(targets.map(({ element }) => getScrollableParent(element)))
+    );
+    scrollContainers.forEach((container) => {
+      container.addEventListener("scroll", scheduleUpdate, { passive: true });
+    });
+    window.addEventListener("resize", scheduleUpdate);
+    return () => {
+      if (rafId !== null) {
+        window.cancelAnimationFrame(rafId);
+      }
+      scrollContainers.forEach((container) => {
+        container.removeEventListener("scroll", scheduleUpdate);
+      });
+      window.removeEventListener("resize", scheduleUpdate);
+    };
+  }, [clearVisibleHeadings, hasRenderableHeadings, headingSignature, headings]);
+  const handleClick = (heading, event) => {
+    event.preventDefault();
+    setVisibleHeadings((prev) => {
+      const next = new Set(prev);
+      next.add(heading.slug);
+      return next;
+    });
+    if (onNavigate) {
+      onNavigate(heading);
+    } else if (heading.slug && typeof window !== "undefined") {
+      const element = document.getElementById(heading.slug);
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+      updateHashWithAnchor(heading.slug);
+    }
+  };
+  if (!hasRenderableHeadings || !note) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: clsx(styles.container, className),
+      "aria-label": title ?? "Table of contents",
+      "data-papyr-component": "TableOfContents",
+      children: /* @__PURE__ */ jsx("ul", { className: styles.list, children: headings.map((heading) => /* @__PURE__ */ jsx(
+        "li",
+        {
+          className: clsx(
+            styles.item,
+            styles[`level${heading.level}`],
+            visibleHeadings.has(heading.slug) && styles.itemActive
+          ),
+          children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: `#${heading.slug}`,
+              className: clsx(styles.link, visibleHeadings.has(heading.slug) && styles.linkActive),
+              onClick: (event) => handleClick(heading, event),
+              "aria-current": visibleHeadings.has(heading.slug) ? "location" : void 0,
+              children: heading.text
+            }
+          )
+        },
+        heading.slug
+      )) })
+    }
+  );
+};
+
+function useActiveNote(notes, initialSlug) {
+  const [activeSlug, setActiveSlugState] = useState(initialSlug ?? null);
+  const hasUserSelection = useRef(false);
+  const prevInitialSlugRef = useRef(initialSlug);
+  const { noteSetSignature, noteSlugSet } = useMemo(() => {
+    const slugs = notes.map((note) => note.slug);
+    const slugSet = new Set(slugs);
+    const signature = [...slugSet].sort().join("\0");
+    return { noteSetSignature: signature, noteSlugSet: slugSet };
+  }, [notes]);
+  const prevSignatureRef = useRef(noteSetSignature);
+  useEffect(() => {
+    const datasetChanged = prevSignatureRef.current !== noteSetSignature;
+    const activeSlugMissing = activeSlug != null && !noteSlugSet.has(activeSlug);
+    prevSignatureRef.current = noteSetSignature;
+    if (datasetChanged || activeSlugMissing) {
+      hasUserSelection.current = false;
+    }
+    if (activeSlugMissing) {
+      setActiveSlugState(null);
+    }
+  }, [noteSetSignature, noteSlugSet, activeSlug]);
+  useEffect(() => {
+    const normalizedSlug = initialSlug ?? null;
+    const prevSlug = prevInitialSlugRef.current ?? null;
+    const initialSlugChanged = normalizedSlug !== prevSlug;
+    prevInitialSlugRef.current = initialSlug;
+    if (!hasUserSelection.current || initialSlugChanged) {
+      if (normalizedSlug !== activeSlug) {
+        setActiveSlugState(normalizedSlug);
+      }
+    }
+  }, [initialSlug, activeSlug]);
+  const activeNote = useMemo(() => {
+    if (!activeSlug) return null;
+    return notes.find((note) => note.slug === activeSlug) ?? null;
+  }, [notes, activeSlug]);
+  const setActiveNote = useCallback((note) => {
+    hasUserSelection.current = true;
+    setActiveSlugState(note?.slug ?? null);
+  }, []);
+  const setActiveSlug = useCallback((slug) => {
+    hasUserSelection.current = true;
+    setActiveSlugState(slug);
+  }, []);
+  return {
+    activeSlug,
+    activeNote,
+    setActiveSlug,
+    setActiveNote
+  };
+}
+
+function useRoutableActiveNote(notes, options) {
+  const { getCurrentSlug, onSlugChange } = options;
+  const papyr = useOptionalPapyr();
+  const showToast = papyr?.showToast;
+  const currentRouteSlug = getCurrentSlug();
+  const currentRouteExists = currentRouteSlug !== null && notes.some((note) => note.slug === currentRouteSlug);
+  const routeSlugRef = useRef(currentRouteSlug ?? null);
+  const onSlugChangeRef = useRef(onSlugChange);
+  const syncingRef = useRef(false);
+  const lastMissingSlugRef = useRef(null);
+  const lastValidSlugRef = useRef(currentRouteExists ? currentRouteSlug : null);
+  useEffect(() => {
+    onSlugChangeRef.current = onSlugChange;
+  }, [onSlugChange]);
+  const {
+    activeSlug,
+    activeNote,
+    setActiveSlug: baseSetActiveSlug,
+    setActiveNote: baseSetActiveNote
+  } = useActiveNote(notes, currentRouteSlug ?? void 0);
+  const notifyRouter = useCallback(
+    (slug) => {
+      routeSlugRef.current = slug ?? null;
+      if (!onSlugChangeRef.current) {
+        return;
+      }
+      const currentRouteSlug2 = getCurrentSlug();
+      if (slug !== currentRouteSlug2) {
+        onSlugChangeRef.current(slug);
+      }
+    },
+    [getCurrentSlug]
+  );
+  useEffect(() => {
+    const routeSlug = getCurrentSlug();
+    routeSlugRef.current = routeSlug ?? null;
+    if (!routeSlug) {
+      lastMissingSlugRef.current = null;
+      lastValidSlugRef.current = null;
+      if (activeSlug !== null) {
+        syncingRef.current = true;
+        baseSetActiveSlug(null);
+        syncingRef.current = false;
+      }
+      return;
+    }
+    const hasNotes = notes.length > 0;
+    const exists = hasNotes && notes.some((note) => note.slug === routeSlug);
+    if (exists) {
+      lastMissingSlugRef.current = null;
+      lastValidSlugRef.current = routeSlug;
+      if (routeSlug !== activeSlug) {
+        syncingRef.current = true;
+        baseSetActiveSlug(routeSlug);
+        syncingRef.current = false;
+      }
+      return;
+    }
+    if (!hasNotes) {
+      return;
+    }
+    if (lastMissingSlugRef.current !== routeSlug) {
+      lastMissingSlugRef.current = routeSlug;
+      showToast?.(`Note "${routeSlug}" not found.`, { duration: 3e3 });
+    }
+    if (lastValidSlugRef.current === routeSlug) {
+      lastValidSlugRef.current = null;
+    }
+    const fallbackSlug = lastValidSlugRef.current;
+    if (fallbackSlug !== routeSlug) {
+      notifyRouter(fallbackSlug ?? null);
+    }
+    if (fallbackSlug !== activeSlug) {
+      syncingRef.current = true;
+      baseSetActiveSlug(fallbackSlug ?? null);
+      syncingRef.current = false;
+    }
+  }, [getCurrentSlug, currentRouteSlug, notes, activeSlug, baseSetActiveSlug, notifyRouter, showToast]);
+  const setActiveSlug = useCallback(
+    (slug) => {
+      baseSetActiveSlug(slug);
+      if (!syncingRef.current) {
+        notifyRouter(slug);
+      }
+    },
+    [baseSetActiveSlug, notifyRouter]
+  );
+  const setActiveNote = useCallback(
+    (note) => {
+      baseSetActiveNote(note);
+      if (!syncingRef.current) {
+        notifyRouter(note?.slug ?? null);
+      }
+    },
+    [baseSetActiveNote, notifyRouter]
+  );
+  return {
+    activeSlug,
+    activeNote,
+    setActiveSlug,
+    setActiveNote
+  };
+}
+
+const resolveSlot = (slot, context, fallback) => {
+  if (typeof slot === "function") {
+    return slot(context);
+  }
+  if (slot !== void 0) {
+    return slot;
+  }
+  return fallback;
+};
+const WorkspaceBlock = ({
+  notes,
+  tree,
+  searchIndex,
+  graph = null,
+  initialSlug = null,
+  activeSlug: controlledActiveSlug,
+  onActiveSlugChange,
+  className,
+  leftWidth,
+  rightWidth,
+  leftSidebar,
+  main,
+  rightSidebar,
+  hideTableOfContents = false,
+  onNoteChange,
+  fileHierarchyProps,
+  tableOfContentsProps,
+  emptyState,
+  hideSidebarScrollbars = true
+}) => {
+  const isControlled = controlledActiveSlug !== void 0;
+  const internalState = useActiveNote(notes, initialSlug);
+  const activeSlug = isControlled ? controlledActiveSlug : internalState.activeSlug;
+  const activeNote = useMemo(() => {
+    if (isControlled) {
+      if (!controlledActiveSlug) return null;
+      return notes.find((n) => n.slug === controlledActiveSlug) ?? null;
+    }
+    return internalState.activeNote;
+  }, [isControlled, controlledActiveSlug, notes, internalState.activeNote]);
+  const setActiveSlug = useCallback(
+    (slug) => {
+      if (isControlled) {
+        onActiveSlugChange?.(slug);
+      } else {
+        internalState.setActiveSlug(slug);
+      }
+    },
+    [isControlled, onActiveSlugChange, internalState]
+  );
+  const setActiveNote = useCallback(
+    (note) => {
+      if (isControlled) {
+        onActiveSlugChange?.(note?.slug ?? null);
+      } else {
+        internalState.setActiveNote(note);
+      }
+    },
+    [isControlled, onActiveSlugChange, internalState]
+  );
+  useEffect(() => {
+    onNoteChange?.(activeNote);
+  }, [activeNote, onNoteChange]);
+  const context = useMemo(
+    () => ({
+      notes,
+      searchIndex,
+      graph,
+      activeSlug,
+      activeNote,
+      setActiveSlug,
+      setActiveNote
+    }),
+    [notes, searchIndex, graph, activeSlug, activeNote, setActiveSlug, setActiveNote]
+  );
+  const defaultFileHierarchy = /* @__PURE__ */ jsx(
+    FileHierarchy,
+    {
+      tree,
+      onNoteClick: setActiveSlug,
+      activeSlug: activeSlug ?? void 0,
+      notes,
+      searchable: true,
+      searchIndex,
+      ...fileHierarchyProps
+    }
+  );
+  const defaultMain = /* @__PURE__ */ jsx(
+    NoteViewer,
+    {
+      note: activeNote,
+      onNavigateNote: setActiveSlug,
+      emptyState: emptyState ?? /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          icon: "📝",
+          title: "No note selected",
+          description: "Choose a note from the file hierarchy to start reading."
+        }
+      )
+    }
+  );
+  const defaultRightSidebar = hideTableOfContents ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+    graph && activeSlug && /* @__PURE__ */ jsx("div", { style: {
+      height: "240px",
+      flexShrink: 0,
+      borderBottom: "1px solid var(--papyr-border, rgba(255, 255, 255, 0.1))"
+    }, children: /* @__PURE__ */ jsx(
+      GraphView,
+      {
+        graph,
+        activeSlug,
+        onNodeSelect: (node) => setActiveSlug(node.id),
+        showFullscreenToggle: false
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TableOfContents, { note: activeNote, ...tableOfContentsProps })
+  ] });
+  const resolvedLeft = resolveSlot(leftSidebar, context, defaultFileHierarchy);
+  const resolvedMain = resolveSlot(main, context, defaultMain);
+  const resolvedRight = resolveSlot(rightSidebar, context, defaultRightSidebar);
+  return /* @__PURE__ */ jsx(PapyrProvider, { notes, searchIndex, graph, children: /* @__PURE__ */ jsx(
+    DoubleSidebarLayout,
+    {
+      className,
+      leftSidebar: resolvedLeft,
+      main: resolvedMain,
+      rightSidebar: resolvedRight ?? void 0,
+      leftWidth,
+      rightWidth,
+      hideSidebarScrollbars
+    }
+  ) });
+};
+
+export { Breadcrumbs, DoubleSidebarLayout, EmptyState, FileHierarchy, FileSearch, GraphView, HoverPreview, MiniGraph, NotePreviewContent, NoteViewer, PapyrProvider, SearchBar, SearchDropdown, SidebarLayout, TableOfContents, TagFilter, ToastContainer, WorkspaceBlock, buildWikiLink, findNoteBySlug, hydrateSearchIndex, parseNoteHash, toForceGraphData, updateHashWithAnchor, useActiveNote, useNotes, useOptionalPapyr, usePapyr, useRoutableActiveNote };
+//# sourceMappingURL=index.js.map