@riebeckite/plugin-garden-explorer 0.0.14 → 0.0.16

package/dist/components/garden-explorer.js

@@ -1,7 +1,32 @@
 // 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,
@@ -155,11 +180,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])),
@@ -172,7 +198,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");
@@ -197,8 +229,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]
@@ -209,29 +242,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: [
@@ -272,7 +416,7 @@ function GardenExplorer(props) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx2(
+      props.data.options.showTags ? /* @__PURE__ */ jsx2(
         FilterList,
         {
           title: "Tags",
@@ -284,8 +428,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",
@@ -297,13 +441,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
           }
@@ -313,10 +465,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",
             {
@@ -354,25 +549,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,
@@ -381,33 +595,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
+              );
             })
           ] })
         }
@@ -424,13 +667,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,
@@ -444,12 +704,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
+  };
+}
 export {
   GardenExplorer as default
 };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
+import type { GardenExplorerPluginOptions } from "./src/garden-explorer.js";
 export { default as GardenExplorer } from "./components/garden-explorer.js";
-export type { GardenExplorerData, GardenExplorerEdge, GardenExplorerFolder, GardenExplorerNote, GardenExplorerTag, } from "./src/garden-explorer.js";
+export type { GardenExplorerData, GardenExplorerEdge, GardenExplorerFolder, GardenExplorerNote, GardenExplorerOptions, GardenExplorerPluginOptions, GardenExplorerTag, } from "./src/garden-explorer.js";
 export { getGardenExplorerData } from "./src/garden-explorer.server.js";
-export declare function gardenExplorerPlugin(): import("@riebeckite/core").RiebeckitePlugin<unknown>;
+export declare function gardenExplorerPlugin(options?: GardenExplorerPluginOptions): import("@riebeckite/core").RiebeckitePlugin<unknown>;