@riebeckite/plugin-garden-explorer 0.0.14 → 0.0.16

package/dist/index.js

@@ -3,13 +3,12 @@ import { createClientEntry, definePlugin } from "@riebeckite/core";
 
 // src/garden-explorer.server.ts
 import {
-  buildGraphEdges,
-  isPublished
+  buildGraphEdges
 } from "@riebeckite/core";
 var MAX_BODY_LENGTH = 4e3;
 function getGardenExplorerData(args) {
   const graph = args.manifest.graph;
-  const publishedEntries = graph.nodes().filter((entry) => isPublished(args.config, entry.frontmatter));
+  const publishedEntries = args.manifest.discoverableEntries;
   const publishedSlugs = new Set(publishedEntries.map((entry) => entry.slug));
   const notes = publishedEntries.map(
     (entry) => toGardenNote(entry, graph, publishedSlugs, args.resolveTitle)
@@ -18,9 +17,25 @@ function getGardenExplorerData(args) {
     notes,
     edges: buildGraphEdges(notes, publishedSlugs),
     tags: buildTags(notes),
-    folders: buildFolders(notes)
+    folders: buildFolders(notes),
+    options: resolveGardenExplorerOptions(args.options)
   };
 }
+function resolveGardenExplorerOptions(options = {}) {
+  return {
+    layout: resolveGraphLayout(options.layout),
+    depth: clampInteger(options.depth ?? 1, 0, 4),
+    showTags: options.showTags ?? true,
+    showFolders: options.showFolders ?? true,
+    nodeSize: clampNumber(options.nodeSize ?? 1, 0.6, 2),
+    linkDistance: clampNumber(options.linkDistance ?? 84, 36, 180),
+    repulsion: clampNumber(options.repulsion ?? 1800, 200, 8e3),
+    showLabels: options.showLabels ?? true
+  };
+}
+function resolveGraphLayout(layout) {
+  return layout === "radial" || layout === "force" ? layout : "force";
+}
 function toGardenNote(entry, graph, publishedSlugs, resolveTitle) {
   const { outgoingSlugs, incomingSlugs } = graph.filterNeighbors(
     entry.slug,
@@ -87,15 +102,47 @@ function getEntryDate(frontmatter) {
 function toPlainText(html) {
   return html.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, " ").replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, " ").replace(/<[^>]+>/g, " ").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/\s+/g, " ").trim();
 }
+function clampInteger(value, min, max) {
+  return Math.round(clampNumber(value, min, max));
+}
+function clampNumber(value, min, max) {
+  if (!Number.isFinite(value)) return min;
+  return Math.min(Math.max(value, min), max);
+}
 
 // src/garden-explorer-page.tsx
 import { escapeScriptJson } from "@riebeckite/core";
 import { renderToString } from "hono/jsx/dom/server";
 
 // components/garden-explorer.tsx
-import { layoutRadialGraph } from "@riebeckite/core/client";
+import {
+  layoutForceGraph,
+  layoutRadialGraph,
+  shouldGuardForceLayout
+} from "@riebeckite/core/client";
 import { useEffect, useMemo, useState } from "hono/jsx";
 
+// src/garden-explorer.ts
+function getGardenExplorerLocalGraphNotes(notes, selectedSlug, depth) {
+  const noteBySlug = new Map(notes.map((note) => [note.slug, note]));
+  const visible = /* @__PURE__ */ new Set([selectedSlug]);
+  let frontier = [selectedSlug];
+  for (let level = 0; level < depth; level++) {
+    const nextFrontier = [];
+    for (const slug of frontier) {
+      const note = noteBySlug.get(slug);
+      if (!note) continue;
+      for (const neighbor of [...note.outgoing, ...note.backlinks]) {
+        if (!noteBySlug.has(neighbor) || visible.has(neighbor)) continue;
+        visible.add(neighbor);
+        nextFrontier.push(neighbor);
+      }
+    }
+    frontier = nextFrontier;
+  }
+  return notes.filter((note) => visible.has(note.slug));
+}
+
 // src/search-notes.ts
 var FIELD_WEIGHTS = {
   slug: 64,
@@ -249,11 +296,12 @@ function LinkedNoteSection(props) {
 }
 
 // components/garden-explorer.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "hono/jsx/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "hono/jsx/jsx-runtime";
 var GRAPH_WIDTH = 900;
 var GRAPH_HEIGHT = 620;
 var MIN_SCALE = 0.6;
 var MAX_SCALE = 2.4;
+var DRAG_THRESHOLD_PX = 4;
 function GardenExplorer(props) {
   const noteBySlug = useMemo(
     () => new Map(props.data.notes.map((note) => [note.slug, note])),
@@ -266,7 +314,13 @@ function GardenExplorer(props) {
     () => props.data.notes[0]?.slug ?? ""
   );
   const [mobilePanel, setMobilePanel] = useState("graph");
+  const [graphMode, setGraphMode] = useState("local");
+  const [hoveredSlug, setHoveredSlug] = useState(null);
   const [view, setView] = useState({ x: 0, y: 0, scale: 1 });
+  const [drag, setDrag] = useState(null);
+  const [suppressNodeNavigation, setSuppressNodeNavigation] = useState(false);
+  const [pinnedNodes, setPinnedNodes] = useState({});
+  const [forceLayoutApproved, setForceLayoutApproved] = useState(false);
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
     const note = params.get("note");
@@ -291,8 +345,9 @@ function GardenExplorer(props) {
       return true;
     });
     const searched = query ? searchGardenExplorerNotes(base, query) : base;
-    return searched.slice(0, 80);
+    return searched;
   }, [props.data.notes, query, selectedTag, selectedFolder]);
+  const listNotes = useMemo(() => filteredNotes.slice(0, 80), [filteredNotes]);
   const visibleSlugSet = useMemo(
     () => new Set(filteredNotes.map((note) => note.slug)),
     [filteredNotes]
@@ -303,29 +358,140 @@ function GardenExplorer(props) {
     ),
     [props.data.edges, visibleSlugSet]
   );
+  const graphNotes = useMemo(() => {
+    if (graphMode === "local") {
+      return getGardenExplorerLocalGraphNotes(
+        filteredNotes,
+        selectedSlug,
+        props.data.options.depth
+      );
+    }
+    const notes = filteredNotes;
+    const selectedNote2 = noteBySlug.get(selectedSlug);
+    if (selectedNote2 && !notes.some((n) => n.slug === selectedSlug)) {
+      return [selectedNote2, ...notes];
+    }
+    return notes;
+  }, [
+    filteredNotes,
+    graphMode,
+    selectedSlug,
+    props.data.options.depth,
+    noteBySlug
+  ]);
+  const graphSlugSet = useMemo(
+    () => new Set(graphNotes.map((note) => note.slug)),
+    [graphNotes]
+  );
+  const graphEdges = useMemo(
+    () => visibleEdges.filter(
+      (edge) => graphSlugSet.has(edge.source) && graphSlugSet.has(edge.target)
+    ),
+    [visibleEdges, graphSlugSet]
+  );
+  const graphKey = useMemo(
+    () => graphNotes.map((note) => note.slug).join("\0"),
+    [graphNotes]
+  );
+  const shouldGuard = shouldGuardForceLayout({
+    layout: props.data.options.layout,
+    mode: graphMode,
+    nodeCount: graphNotes.length,
+    approved: forceLayoutApproved
+  });
+  const baseGraphNodes = useMemo(() => {
+    if (shouldGuard) {
+      return layoutRadialGraph(graphNotes, {
+        width: GRAPH_WIDTH,
+        height: GRAPH_HEIGHT,
+        centerSlug: selectedSlug
+      });
+    }
+    return layoutNodes(graphNotes, selectedSlug, props.data.options);
+  }, [shouldGuard, graphNotes, selectedSlug, props.data.options]);
   const graphNodes = useMemo(
-    () => layoutNodes(filteredNotes, selectedSlug),
-    [filteredNotes, selectedSlug]
+    () => applyPinnedNodes(baseGraphNodes, pinnedNodes),
+    [baseGraphNodes, pinnedNodes]
   );
-  const selectedNote = noteBySlug.get(selectedSlug) ?? filteredNotes[0] ?? null;
+  const selectedNote = noteBySlug.get(selectedSlug) ?? listNotes[0] ?? null;
   const relatedNotes = useMemo(
     () => selectedNote ? getRelatedNotes(selectedNote, props.data.notes) : [],
     [selectedNote, props.data.notes]
   );
+  const emphasizedSlugs = useMemo(
+    () => getRelatedSlugSet(selectedSlug, hoveredSlug, graphEdges),
+    [selectedSlug, hoveredSlug, graphEdges]
+  );
+  useEffect(() => {
+    if (filteredNotes.length === 0 || visibleSlugSet.has(selectedSlug)) return;
+    setSelectedSlug(listNotes[0]?.slug ?? "");
+  }, [filteredNotes, selectedSlug, visibleSlugSet, listNotes]);
+  useEffect(() => {
+    setHoveredSlug(null);
+    setDrag(null);
+    setSuppressNodeNavigation(false);
+    setPinnedNodes({});
+    setForceLayoutApproved(false);
+  }, [graphKey, graphMode, props.data.options.layout]);
   const selectNote = (slug) => {
     setSelectedSlug(slug);
     setMobilePanel("details");
   };
+  const navigateToNote = (slug) => {
+    const note = noteBySlug.get(slug);
+    if (!note) return;
+    window.location.href = note.permalink;
+  };
   const clearFilters = () => {
     setQuery("");
     setSelectedTag(null);
     setSelectedFolder(null);
   };
-  const zoom = (delta) => {
+  const approveForceLayout = () => {
+    setForceLayoutApproved(true);
+  };
+  const zoom = (delta, origin) => {
+    setView((current) => zoomView(current, delta, origin));
+  };
+  const toSvgPoint = (event) => {
+    const svg = event.currentTarget;
+    const rect = svg.getBoundingClientRect();
+    return {
+      x: (event.clientX - rect.left) / rect.width * GRAPH_WIDTH,
+      y: (event.clientY - rect.top) / rect.height * GRAPH_HEIGHT
+    };
+  };
+  const toGraphPoint = (event, current) => {
+    const point = toSvgPoint(event);
+    return {
+      x: (point.x - current.x) / current.scale,
+      y: (point.y - current.y) / current.scale
+    };
+  };
+  const startPan = (event) => {
+    const point = toSvgPoint(event);
+    setDrag({ kind: "pan", x: point.x, y: point.y });
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const movePan = (event, currentDrag) => {
+    const point = toSvgPoint(event);
     setView((current) => ({
       ...current,
-      scale: clamp(current.scale + delta, MIN_SCALE, MAX_SCALE)
+      x: current.x + point.x - currentDrag.x,
+      y: current.y + point.y - currentDrag.y
     }));
+    setDrag({ kind: "pan", x: point.x, y: point.y });
+  };
+  const moveNode = (event, currentDrag) => {
+    const hasMoved = currentDrag.hasMoved || Math.hypot(
+      event.clientX - currentDrag.startClientX,
+      event.clientY - currentDrag.startClientY
+    ) >= DRAG_THRESHOLD_PX;
+    if (!hasMoved) return;
+    const point = toGraphPoint(event, view);
+    setSuppressNodeNavigation(true);
+    setPinnedNodes((current) => ({ ...current, [currentDrag.slug]: point }));
+    if (!currentDrag.hasMoved) setDrag({ ...currentDrag, hasMoved: true });
   };
   return /* @__PURE__ */ jsxs2("div", { class: "garden-explorer rr-garden-explorer", "data-garden-explorer": true, children: [
     /* @__PURE__ */ jsxs2("fieldset", { class: "garden-explorer__mobile-tabs", children: [
@@ -366,7 +532,7 @@ function GardenExplorer(props) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx2(
+      props.data.options.showTags ? /* @__PURE__ */ jsx2(
         FilterList,
         {
           title: "Tags",
@@ -378,8 +544,8 @@ function GardenExplorer(props) {
           selectedKey: selectedTag,
           onSelect: (key) => setSelectedTag(key === selectedTag ? null : key)
         }
-      ),
-      /* @__PURE__ */ jsx2(
+      ) : null,
+      props.data.options.showFolders ? /* @__PURE__ */ jsx2(
         FilterList,
         {
           title: "Folders",
@@ -391,13 +557,21 @@ function GardenExplorer(props) {
           selectedKey: selectedFolder,
           onSelect: (key) => setSelectedFolder(key === selectedFolder ? null : key)
         }
-      ),
+      ) : null,
       /* @__PURE__ */ jsxs2("div", { class: "garden-explorer__section", children: [
-        /* @__PURE__ */ jsx2("p", { class: "garden-explorer__eyebrow", children: "Notes" }),
+        /* @__PURE__ */ jsxs2("p", { class: "garden-explorer__eyebrow", children: [
+          "Notes",
+          filteredNotes.length > listNotes.length && /* @__PURE__ */ jsxs2("span", { class: "garden-explorer__count-badge", children: [
+            "showing ",
+            listNotes.length,
+            " of ",
+            filteredNotes.length
+          ] })
+        ] }),
         /* @__PURE__ */ jsx2(
           NoteList,
           {
-            notes: filteredNotes,
+            notes: listNotes,
             selectedSlug,
             onSelect: selectNote
           }
@@ -407,10 +581,53 @@ function GardenExplorer(props) {
     /* @__PURE__ */ jsxs2("section", { class: panelClass("graph", mobilePanel), "aria-label": "Note graph", children: [
       /* @__PURE__ */ jsxs2("div", { class: "garden-explorer__graph-toolbar", children: [
         /* @__PURE__ */ jsxs2("span", { children: [
-          filteredNotes.length,
-          " notes"
+          graphMode === "local" ? "Local" : "Global",
+          " graph ·",
+          " ",
+          graphNotes.length,
+          " notes",
+          graphMode === "global" && filteredNotes.length !== graphNotes.length && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            " (of ",
+            filteredNotes.length,
+            " filtered)"
+          ] }),
+          shouldGuard && /* @__PURE__ */ jsxs2("span", { class: "garden-explorer__perf-warning", "aria-live": "polite", children: [
+            "⚠ Force layout may freeze this page (",
+            graphNotes.length,
+            " nodes)"
+          ] }),
+          shouldGuard && !forceLayoutApproved && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2("span", { class: "garden-explorer__perf-warning", children: "Force layout not run automatically." }),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                class: "garden-explorer__force-approve",
+                onClick: approveForceLayout,
+                children: "Run force layout anyway"
+              }
+            )
+          ] })
         ] }),
         /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": graphMode === "local",
+              onClick: () => setGraphMode("local"),
+              children: "Local"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": graphMode === "global",
+              onClick: () => setGraphMode("global"),
+              children: "Global"
+            }
+          ),
           /* @__PURE__ */ jsx2(
             "button",
             {
@@ -448,25 +665,44 @@ function GardenExplorer(props) {
           "aria-label": "Interactive graph of notes and internal links",
           onWheel: (event) => {
             event.preventDefault();
-            zoom(event.deltaY > 0 ? -0.1 : 0.1);
+            zoom(event.deltaY > 0 ? -0.1 : 0.1, toSvgPoint(event));
+          },
+          onPointerDown: (event) => {
+            const target = event.target;
+            if (target.closest(".garden-graph__node")) return;
+            startPan(event);
           },
           onPointerMove: (event) => {
-            if (event.buttons !== 1) return;
-            setView((current) => ({
-              ...current,
-              x: current.x + event.movementX / current.scale,
-              y: current.y + event.movementY / current.scale
-            }));
+            if (!drag) return;
+            if (drag.kind === "pan") {
+              movePan(event, drag);
+              return;
+            }
+            moveNode(event, drag);
+          },
+          onPointerUp: (event) => {
+            setDrag(null);
+            const svg = event.currentTarget;
+            if (svg.hasPointerCapture(event.pointerId)) {
+              svg.releasePointerCapture(event.pointerId);
+            }
+          },
+          onPointerCancel: () => {
+            setDrag(null);
+            setSuppressNodeNavigation(false);
           },
           children: /* @__PURE__ */ jsxs2("g", { transform: `translate(${view.x} ${view.y}) scale(${view.scale})`, children: [
-            visibleEdges.map((edge) => {
+            graphEdges.map((edge) => {
               const source = graphNodes.get(edge.source);
               const target = graphNodes.get(edge.target);
               if (!source || !target) return null;
+              const emphasized = emphasizedSlugs.has(edge.source) && emphasizedSlugs.has(edge.target);
               return /* @__PURE__ */ jsx2(
                 "line",
                 {
                   class: "garden-graph__edge",
+                  "data-muted": emphasizedSlugs.size > 0 && !emphasized ? "true" : "false",
+                  "data-emphasized": emphasized ? "true" : "false",
                   x1: source.x,
                   y1: source.y,
                   x2: target.x,
@@ -475,33 +711,62 @@ function GardenExplorer(props) {
                 `${edge.source}-${edge.target}`
               );
             }),
-            filteredNotes.map((note) => {
+            graphNotes.map((note) => {
               const node = graphNodes.get(note.slug);
               if (!node) return null;
               const selected = note.slug === selectedSlug;
-              return /* @__PURE__ */ jsx2("g", { class: "garden-graph__node", children: /* @__PURE__ */ jsxs2(
-                "a",
+              const active = emphasizedSlugs.size === 0 || emphasizedSlugs.has(note.slug);
+              return /* @__PURE__ */ jsx2(
+                "g",
                 {
-                  href: `/explore?note=${encodeURIComponent(note.slug)}`,
-                  "aria-label": `Select ${note.title}`,
-                  onClick: (event) => {
-                    event.preventDefault();
-                    selectNote(note.slug);
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx2(
-                      "circle",
-                      {
-                        cx: node.x,
-                        cy: node.y,
-                        r: selected ? 15 : node.radius,
-                        "data-selected": selected ? "true" : "false"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx2("text", { x: node.x + 18, y: node.y + 5, children: note.title })
-                  ]
-                }
-              ) }, note.slug);
+                  class: "garden-graph__node",
+                  "data-muted": active ? "false" : "true",
+                  onPointerEnter: () => setHoveredSlug(note.slug),
+                  onPointerLeave: () => setHoveredSlug(null),
+                  children: /* @__PURE__ */ jsxs2(
+                    "a",
+                    {
+                      href: note.permalink,
+                      "aria-label": `Open ${note.title}`,
+                      onClick: (event) => {
+                        event.preventDefault();
+                        if (suppressNodeNavigation) {
+                          setSuppressNodeNavigation(false);
+                          return;
+                        }
+                        navigateToNote(note.slug);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx2(
+                          "circle",
+                          {
+                            cx: node.x,
+                            cy: node.y,
+                            r: selected ? 15 : node.radius * props.data.options.nodeSize,
+                            "data-selected": selected ? "true" : "false",
+                            onPointerDown: (event) => {
+                              event.preventDefault();
+                              event.stopPropagation();
+                              setSelectedSlug(note.slug);
+                              setSuppressNodeNavigation(false);
+                              setDrag({
+                                kind: "node",
+                                slug: note.slug,
+                                startClientX: event.clientX,
+                                startClientY: event.clientY,
+                                hasMoved: false
+                              });
+                              event.currentTarget.setPointerCapture(event.pointerId);
+                            }
+                          }
+                        ),
+                        props.data.options.showLabels ? /* @__PURE__ */ jsx2("text", { x: node.x + 18, y: node.y + 5, children: note.title }) : null
+                      ]
+                    }
+                  )
+                },
+                note.slug
+              );
             })
           ] })
         }
@@ -518,13 +783,30 @@ function GardenExplorer(props) {
     ) : /* @__PURE__ */ jsx2("p", { class: "garden-explorer__empty", children: "Select a note to inspect links." }) })
   ] });
 }
-function layoutNodes(notes, selectedSlug) {
-  return layoutRadialGraph(notes, {
+function layoutNodes(notes, selectedSlug, options) {
+  if (options.layout === "radial") {
+    return layoutRadialGraph(notes, {
+      width: GRAPH_WIDTH,
+      height: GRAPH_HEIGHT,
+      centerSlug: selectedSlug
+    });
+  }
+  return layoutForceGraph(notes, {
     width: GRAPH_WIDTH,
     height: GRAPH_HEIGHT,
-    centerSlug: selectedSlug
+    centerSlug: selectedSlug,
+    linkDistance: options.linkDistance,
+    repulsion: options.repulsion
   });
 }
+function applyPinnedNodes(layout, pinnedNodes) {
+  const next = new Map(layout);
+  for (const [slug, point] of Object.entries(pinnedNodes)) {
+    const current = next.get(slug);
+    if (current) next.set(slug, { ...current, x: point.x, y: point.y });
+  }
+  return next;
+}
 function getRelatedNotes(selectedNote, notes) {
   const directSlugs = /* @__PURE__ */ new Set([
     ...selectedNote.outgoing,
@@ -538,12 +820,33 @@ function getRelatedNotes(selectedNote, notes) {
     (a, b) => b.score - a.score || a.note.title.localeCompare(b.note.title, "ja")
   ).slice(0, 8).map((item) => item.note);
 }
+function getRelatedSlugSet(selectedSlug, hoveredSlug, edges) {
+  const origin = hoveredSlug ?? selectedSlug;
+  if (!origin) return /* @__PURE__ */ new Set();
+  const related = /* @__PURE__ */ new Set([origin]);
+  for (const edge of edges) {
+    if (edge.source === origin) related.add(edge.target);
+    if (edge.target === origin) related.add(edge.source);
+  }
+  return related;
+}
 function panelClass(panel, activePanel) {
   return `garden-explorer__panel garden-explorer__panel--${panel}${panel === activePanel ? " garden-explorer__panel--active" : ""}`;
 }
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
+function zoomView(current, delta, origin = { x: GRAPH_WIDTH / 2, y: GRAPH_HEIGHT / 2 }) {
+  const scale = clamp(current.scale + delta, MIN_SCALE, MAX_SCALE);
+  if (scale === current.scale) return current;
+  const graphX = (origin.x - current.x) / current.scale;
+  const graphY = (origin.y - current.y) / current.scale;
+  return {
+    x: origin.x - graphX * scale,
+    y: origin.y - graphY * scale,
+    scale
+  };
+}
 
 // src/garden-explorer-page.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "hono/jsx/jsx-runtime";
@@ -553,7 +856,7 @@ function renderGardenExplorerPage(data, siteTitle) {
       /* @__PURE__ */ jsxs3("header", { class: "garden-explorer-page__header", children: [
         /* @__PURE__ */ jsx3("p", { class: "garden-explorer-page__eyebrow", children: siteTitle }),
         /* @__PURE__ */ jsx3("h1", { class: "garden-explorer-page__title", children: "Garden Explorer" }),
-        /* @__PURE__ */ jsx3("p", { class: "garden-explorer-page__description", children: "Graph, Search, Tags, Folders, Backlinks, and Related Notes を横断して Digital Garden を探索できます。" })
+        /* @__PURE__ */ jsx3("p", { class: "garden-explorer-page__description", children: "Explore your digital garden across graph, search, tags, folders, backlinks, and related notes." })
       ] }),
       /* @__PURE__ */ jsx3("div", { "data-riebeckite-garden-explorer": true, children: /* @__PURE__ */ jsx3(GardenExplorer, { data }) }),
       /* @__PURE__ */ jsx3(
@@ -571,7 +874,7 @@ function renderGardenExplorerPage(data, siteTitle) {
 }
 
 // index.ts
-function gardenExplorerPlugin() {
+function gardenExplorerPlugin(options = {}) {
   return definePlugin({
     name: "garden-explorer",
     assets: [
@@ -586,6 +889,7 @@ function gardenExplorerPlugin() {
       {
         id: "garden-explorer",
         paths: ["/explore"],
+        outputDependencies: [{ type: "global" }],
         resolve: ({ pathname, manifest, config }) => {
           if (pathname !== "/explore" || !config) return null;
           const siteTitle = config.site.title;
@@ -598,7 +902,8 @@ function gardenExplorerPlugin() {
               getGardenExplorerData({
                 manifest,
                 config,
-                resolveTitle: (slug, title) => typeof title === "string" && title.trim() ? title : slug
+                resolveTitle: (slug, title) => typeof title === "string" && title.trim() ? title : slug,
+                options
               }),
               siteTitle
             )

package/dist/src/garden-explorer.d.ts

@@ -15,6 +15,19 @@ export type GardenExplorerNote = GardenExplorerSearchFields & {
     backlinks: string[];
 };
 export type GardenExplorerEdge = GraphEdge;
+export type GardenExplorerGraphLayout = "force" | "radial";
+export type GardenExplorerGraphMode = "local" | "global";
+export type GardenExplorerOptions = {
+    layout: GardenExplorerGraphLayout;
+    depth: number;
+    showTags: boolean;
+    showFolders: boolean;
+    nodeSize: number;
+    linkDistance: number;
+    repulsion: number;
+    showLabels: boolean;
+};
+export type GardenExplorerPluginOptions = Partial<GardenExplorerOptions>;
 export type GardenExplorerTag = {
     name: string;
     count: number;
@@ -28,5 +41,7 @@ export type GardenExplorerData = {
     edges: GardenExplorerEdge[];
     tags: GardenExplorerTag[];
     folders: GardenExplorerFolder[];
+    options: GardenExplorerOptions;
 };
+export declare function getGardenExplorerLocalGraphNotes(notes: GardenExplorerNote[], selectedSlug: string, depth: number): GardenExplorerNote[];
 export {};

package/dist/src/garden-explorer.server.d.ts

@@ -1,9 +1,11 @@
 import { type ContentManifest, type ResolvedRiebeckiteConfig } from "@riebeckite/core";
-import type { GardenExplorerData } from "./garden-explorer.js";
+import type { GardenExplorerData, GardenExplorerOptions, GardenExplorerPluginOptions } from "./garden-explorer.js";
 type TitleResolver = (slug: string, title: unknown) => string;
 export declare function getGardenExplorerData(args: {
     manifest: ContentManifest;
     config: ResolvedRiebeckiteConfig;
     resolveTitle: TitleResolver;
+    options?: GardenExplorerPluginOptions;
 }): GardenExplorerData;
+export declare function resolveGardenExplorerOptions(options?: GardenExplorerPluginOptions): GardenExplorerOptions;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-garden-explorer",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "hono": "^4.12.25",
-    "@riebeckite/core": "0.0.14"
+    "@riebeckite/core": "0.0.16"
   },
   "publishConfig": {
     "access": "public"
@@ -63,6 +63,7 @@
     "./style.css"
   ],
   "scripts": {
-    "build": "node ../../../scripts/build_package.mjs"
+    "build": "node ../../../scripts/build_package.mjs",
+    "test": "node --import tsx --test \"test/*.test.ts\""
   }
 }