@riebeckite/plugin-garden-explorer 0.0.12 → 0.0.13

package/README.md

@@ -1,89 +1,93 @@
-# @riebeckite/plugin-garden-explorer
-
-Interactive note garden explorer: a graph, search box, tag/folder filters, and
-note details in a single page.
-
-[日本語](./README_ja.md)
-
-## Overview
-
-`gardenExplorer()` provides an interactive `GardenExplorer` component with three
-panels:
-
-- **Explorer** — search box plus tag and folder filter chips (with counts) and
-  a filtered note list
-- **Graph** — an interactive radial SVG graph of notes and internal links with
-  zoom (`+`/`−`/wheel), pan (drag), and reset
-- **Details** — the selected note's links, tags, excerpt, and related notes
-
-Selection state is mirrored to the URL query (`?note=`, `?tag=`, `?folder=`),
-so the view is shareable and the filter list adapts to the current selection.
-
-`getGardenExplorerData()` builds the note set from published entries, including
-headings, a plain-text body (truncated to 4,000 chars), tags, folders, outgoing
-links, and backlinks. Its client-side note search and radial graph layout are
-self-contained, so this plugin does not require the search plugin.
-
-## Usage
-
-```ts
-import { defineConfig } from "@riebeckite/core";
-import { gardenExplorerPlugin } from "@riebeckite/plugin-garden-explorer";
-
-export default defineConfig({
-  // ...
-  plugins: [gardenExplorerPlugin()],
-});
-```
-
-`gardenExplorerPlugin()` registers the plugin in the plugin list and bundles
-`style.css` into the app stylesheet.
-
-### Render the component
-
-```tsx
-import GardenExplorer, {
-  getGardenExplorerData,
-} from "@riebeckite/plugin-garden-explorer";
-import { config } from "../config";
-import { content } from "../content";
-import { getArticleTitle } from "../lib/article-title";
-
-const manifest = await content.getManifest();
-const data = getGardenExplorerData({
-  manifest,
-  config,
-  resolveTitle: getArticleTitle,
-});
-
-// ...in your /explore route
-return <GardenExplorer data={data} />;
-```
-
-The component is client-side interactive and expects `window` to be available
-in the browser.
-
-## Data
-
-`getGardenExplorerData()` returns `GardenExplorerData`:
-
-- `notes` — published notes sorted by title, with searchable fields plus
-  `folder`, `outgoing`, and `backlinks`
-- `edges` — note-to-note graph edges between published notes
-- `tags` — tag counts, most frequent first
-- `folders` — folder counts, alphabetical; root-level notes are `"Root"`
-
-## Exports
-
-- `gardenExplorerPlugin()` — plugin factory
-- `GardenExplorer` — interactive explorer component (default export of
-  `components/garden-explorer.tsx`)
-- `getGardenExplorerData({ manifest, config, resolveTitle })` — builds the
-  explorer dataset
-- Types: `GardenExplorerData`, `GardenExplorerEdge`, `GardenExplorerFolder`,
-  `GardenExplorerNote`, `GardenExplorerTag`
-
-## See also
-
-- [Plugin guide](../../../docs/en/plugin-system.md)
-- [`@riebeckite/plugin-local-graph`](../local-graph/README.md)
+# @riebeckite/plugin-garden-explorer
+
+Interactive note garden explorer: a graph, search box, tag/folder filters, and
+note details in a single page.
+
+[日本語](./README_ja.md)
+
+## Overview
+
+`gardenExplorer()` provides an interactive `GardenExplorer` component with three
+panels:
+
+- **Explorer** — search box plus tag and folder filter chips (with counts) and
+  a filtered note list
+- **Graph** — an interactive radial SVG graph of notes and internal links with
+  zoom (`+`/`−`/wheel), pan (drag), and reset
+- **Details** — the selected note's links, tags, excerpt, and related notes
+
+Selection state is mirrored to the URL query (`?note=`, `?tag=`, `?folder=`),
+so the view is shareable and the filter list adapts to the current selection.
+
+`getGardenExplorerData()` builds the note set from published entries, including
+headings, a plain-text body (truncated to 4,000 chars), tags, folders, outgoing
+links, and backlinks. Its client-side note search and radial graph layout are
+self-contained, so this plugin does not require the search plugin.
+
+## Usage
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { gardenExplorerPlugin } from "@riebeckite/plugin-garden-explorer";
+
+export default defineConfig({
+  // ...
+  plugins: [gardenExplorerPlugin()],
+});
+```
+
+`gardenExplorerPlugin()` registers the `/explore` page type and bundles
+`style.css` and its client hydrator into the app. A catch-all route using
+`resolveRiebeckiteRoute()` and `pluginPageSsgParams()` renders and emits it;
+no plugin-specific application route is needed. The page is server-rendered
+first, then the registered client entry hydrates its graph, filters, and URL
+state after loading.
+
+### Embed the component elsewhere
+
+```tsx
+import GardenExplorer, {
+  getGardenExplorerData,
+} from "@riebeckite/plugin-garden-explorer";
+import { config } from "../config";
+import { content } from "../content";
+import { getArticleTitle } from "../lib/article-title";
+
+const manifest = await content.getManifest();
+const data = getGardenExplorerData({
+  manifest,
+  config,
+  resolveTitle: getArticleTitle,
+});
+
+// ...in a site-owned component
+return <GardenExplorer data={data} />;
+```
+
+The component is client-side interactive and expects `window` to be available
+in the browser.
+
+## Data
+
+`getGardenExplorerData()` returns `GardenExplorerData`:
+
+- `notes` — published notes sorted by title, with searchable fields plus
+  `folder`, `outgoing`, and `backlinks`
+- `edges` — note-to-note graph edges between published notes
+- `tags` — tag counts, most frequent first
+- `folders` — folder counts, alphabetical; root-level notes are `"Root"`
+
+## Exports
+
+- `gardenExplorerPlugin()` — plugin factory
+- `GardenExplorer` — interactive explorer component (default export of
+  `components/garden-explorer.tsx`)
+- `getGardenExplorerData({ manifest, config, resolveTitle })` — builds the
+  explorer dataset
+- Types: `GardenExplorerData`, `GardenExplorerEdge`, `GardenExplorerFolder`,
+  `GardenExplorerNote`, `GardenExplorerTag`
+
+## See also
+
+- [Plugin guide](../../../docs/en/reference/plugin-api.md)
+- [`@riebeckite/plugin-local-graph`](../local-graph/README.md)

package/README_ja.md

@@ -1,69 +1,77 @@
-# @riebeckite/plugin-garden-explorer
-
-ノートの一覧、検索、タグ・フォルダーによる絞り込み、リンクグラフを一画面にまとめる探索画面です。公開済みのノートだけを対象にするため、そのまま公開サイトの `/explore` などに置けます。
-
-[English](./README.md)
-
-## 用意される画面
-
-`gardenExplorerPlugin()` は、次の三つの領域を持つ `GardenExplorer` コンポーネントとスタイルを提供します。
-
-- **一覧**: キーワード検索、タグとフォルダーのフィルター、該当ノートの一覧
-- **グラフ**: ノートと内部リンクを表示する放射状 SVG グラフ。ズーム、ドラッグ、リセットに対応
-- **詳細**: 選択したノートのリンク、タグ、抜粋、関連ノート
-
-選択状態は `?note=`、`?tag=`、`?folder=` として URL に反映されます。表示中の状態をそのまま共有できます。
-
-## 設定してページに配置する
-
-```ts
-import { defineConfig } from "@riebeckite/core";
-import { gardenExplorerPlugin } from "@riebeckite/plugin-garden-explorer";
-
-export default defineConfig({
-  // ...
-  plugins: [gardenExplorerPlugin()],
-});
-```
-
-ルート側では manifest から表示用データを作り、コンポーネントに渡します。
-
-```tsx
-import GardenExplorer, {
-  getGardenExplorerData,
-} from "@riebeckite/plugin-garden-explorer";
-
-const manifest = await content.getManifest();
-const data = getGardenExplorerData({
-  manifest,
-  config,
-  resolveTitle: getArticleTitle,
-});
-
-return <GardenExplorer data={data} />;
-```
-
-`GardenExplorer` はブラウザで操作するクライアントコンポーネントです。サーバーで描画するだけの場所には置かず、クライアント側で動作するルートに配置してください。
-
-## データに含まれる範囲
-
-`getGardenExplorerData()` は公開済みエントリーから、見出し、本文テキストの先頭 4,000 文字、タグ、フォルダー、送信リンク、被リンクを集めます。本文全体をクライアントへ渡さないため、検索用のデータ量を抑えられます。
-
-- `notes`: タイトル順の公開ノート。フォルダー、送信リンク、被リンクを含む
-- `edges`: 公開ノート間のグラフの辺
-- `tags`: 件数の多い順のタグ
-- `folders`: 名前順のフォルダー。ルート直下のノートは `Root`
-
-探索画面の検索はプラグイン内で完結しており、`@riebeckite/plugin-search` は不要です。
-
-## 主なエクスポート
-
-- `gardenExplorerPlugin()`: プラグインを作成する
-- `GardenExplorer`: 探索画面のコンポーネント
-- `getGardenExplorerData({ manifest, config, resolveTitle })`: 表示データを構築する
-- 型: `GardenExplorerData`、`GardenExplorerEdge`、`GardenExplorerFolder`、`GardenExplorerNote`、`GardenExplorerTag`
-
-## 関連資料
-
-- [プラグインシステム](../../../docs/ja/plugin-system.md)
-- [`@riebeckite/plugin-local-graph`](../local-graph/README_ja.md)
+# @riebeckite/plugin-garden-explorer
+
+ノートの一覧、検索、タグ・フォルダーによる絞り込み、リンクグラフを一画面にまとめる探索画面です。公開済みのノートだけを対象にするため、そのまま公開サイトの `/explore` などに置けます。
+
+[English](./README.md)
+
+## 用意される画面
+
+`gardenExplorerPlugin()` は、次の三つの領域を持つ `GardenExplorer` コンポーネントとスタイルを提供します。
+
+- **一覧**: キーワード検索、タグとフォルダーのフィルター、該当ノートの一覧
+- **グラフ**: ノートと内部リンクを表示する放射状 SVG グラフ。ズーム、ドラッグ、リセットに対応
+- **詳細**: 選択したノートのリンク、タグ、抜粋、関連ノート
+
+選択状態は `?note=`、`?tag=`、`?folder=` として URL に反映されます。表示中の状態をそのまま共有できます。
+
+## 設定してページに配置する
+
+```ts
+import { defineConfig } from "@riebeckite/core";
+import { gardenExplorerPlugin } from "@riebeckite/plugin-garden-explorer";
+
+export default defineConfig({
+  // ...
+  plugins: [gardenExplorerPlugin()],
+});
+```
+
+`gardenExplorerPlugin()` は `/explore` の Page Type、スタイル、クライアント側の
+hydrator を登録します。
+`resolveRiebeckiteRoute()` と `pluginPageSsgParams()` を使う共通 catch-all route
+が表示と SSG を担当するため、Plugin 固有の route は不要です。
+ページはまずサーバーで描画し、読み込み後に登録済みの client entry がグラフ、
+フィルター、URL 状態を hydration します。
+
+コンポーネントを別の site-owned component に埋め込む場合だけ、manifest から
+表示用データを作って渡します。
+
+```tsx
+import GardenExplorer, {
+  getGardenExplorerData,
+} from "@riebeckite/plugin-garden-explorer";
+
+const manifest = await content.getManifest();
+const data = getGardenExplorerData({
+  manifest,
+  config,
+  resolveTitle: getArticleTitle,
+});
+
+return <GardenExplorer data={data} />;
+```
+
+`GardenExplorer` はブラウザで操作するクライアントコンポーネントです。サーバーで描画するだけの場所には置かず、クライアント側で動作するルートに配置してください。
+
+## データに含まれる範囲
+
+`getGardenExplorerData()` は公開済みエントリーから、見出し、本文テキストの先頭 4,000 文字、タグ、フォルダー、送信リンク、被リンクを集めます。本文全体をクライアントへ渡さないため、検索用のデータ量を抑えられます。
+
+- `notes`: タイトル順の公開ノート。フォルダー、送信リンク、被リンクを含む
+- `edges`: 公開ノート間のグラフの辺
+- `tags`: 件数の多い順のタグ
+- `folders`: 名前順のフォルダー。ルート直下のノートは `Root`
+
+探索画面の検索はプラグイン内で完結しており、`@riebeckite/plugin-search` は不要です。
+
+## 主なエクスポート
+
+- `gardenExplorerPlugin()`: プラグインを作成する
+- `GardenExplorer`: 探索画面のコンポーネント
+- `getGardenExplorerData({ manifest, config, resolveTitle })`: 表示データを構築する
+- 型: `GardenExplorerData`、`GardenExplorerEdge`、`GardenExplorerFolder`、`GardenExplorerNote`、`GardenExplorerTag`
+
+## 関連資料
+
+- [プラグインシステム](../../../docs/ja/reference/plugin-api.md)
+- [`@riebeckite/plugin-local-graph`](../local-graph/README_ja.md)

package/dist/client.d.ts

@@ -0,0 +1,2 @@
+/** Hydrates Garden Explorer only when its Page Type is present in the document. */
+export default function initGardenExplorer(): void;

package/dist/client.js

@@ -0,0 +1,478 @@
+// client.tsx
+import { hydrateRoot } from "hono/jsx/dom/client";
+
+// components/garden-explorer.tsx
+import { layoutRadialGraph } from "@riebeckite/core/client";
+import { useEffect, useMemo, useState } from "hono/jsx";
+
+// src/search-notes.ts
+var FIELD_WEIGHTS = {
+  slug: 64,
+  title: 56,
+  tags: 44,
+  headings: 32,
+  body: 10
+};
+function searchGardenExplorerNotes(notes, query) {
+  const normalizedQuery = normalizeSearchQuery(query);
+  if (normalizedQuery.length === 0) return [];
+  return notes.map((note) => scoreNote(note, normalizedQuery)).filter(
+    (result) => result !== null
+  ).sort(
+    (a, b) => b.score - a.score || a.note.title.localeCompare(b.note.title, "ja")
+  ).map(({ note }) => note);
+}
+function normalizeSearchQuery(value) {
+  return normalizeSearchText(value).replace(/^#+/, "");
+}
+function normalizeSearchText(value) {
+  return value.toLocaleLowerCase().normalize("NFKC").replace(
+    /[ァ-ン]/g,
+    (char) => String.fromCharCode(char.charCodeAt(0) - 96)
+  );
+}
+function scoreNote(note, normalizedQuery) {
+  const matches = [
+    scoreField("title", note.title, normalizedQuery),
+    scoreField("slug", note.slug, normalizedQuery),
+    ...note.tags.map((tag) => scoreField("tags", tag, normalizedQuery)),
+    ...note.headings.map(
+      (heading) => scoreField("headings", heading, normalizedQuery)
+    ),
+    scoreField("body", note.body, normalizedQuery)
+  ].filter((match) => match.score > 0);
+  if (matches.length === 0) return null;
+  return {
+    note,
+    score: matches.reduce((total, match) => total + match.score, 0)
+  };
+}
+function scoreField(field, value, normalizedQuery) {
+  const normalizedValue = normalizeSearchText(value);
+  const index = normalizedValue.indexOf(normalizedQuery);
+  const weight = FIELD_WEIGHTS[field];
+  if (normalizedValue === normalizedQuery) return { score: weight * 3 };
+  if (index !== -1) return { score: weight * (index === 0 ? 2 : 1) };
+  const fuzzyScore = scoreFuzzyMatch(normalizedValue, normalizedQuery);
+  return { score: fuzzyScore > 0 ? Math.round(weight * fuzzyScore) : 0 };
+}
+function scoreFuzzyMatch(value, query) {
+  if (query.length < 2) return 0;
+  let valueIndex = 0;
+  let matched = 0;
+  let gaps = 0;
+  for (const queryCharacter of query) {
+    const nextIndex = value.indexOf(queryCharacter, valueIndex);
+    if (nextIndex === -1) return 0;
+    gaps += nextIndex - valueIndex;
+    valueIndex = nextIndex + 1;
+    matched += 1;
+  }
+  const coverage = matched / Math.max(value.length, query.length);
+  const continuityPenalty = Math.min(gaps / Math.max(value.length, 1), 0.8);
+  return Math.max(0, coverage * (1 - continuityPenalty));
+}
+
+// components/explorer-panels.tsx
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+function FilterList(props) {
+  return /* @__PURE__ */ jsxs("div", { class: "garden-explorer__section", children: [
+    /* @__PURE__ */ jsx("p", { class: "garden-explorer__eyebrow", children: props.title }),
+    /* @__PURE__ */ jsx("div", { class: "garden-explorer__chips", children: props.items.slice(0, 28).map((item) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        class: "garden-explorer__chip",
+        "aria-pressed": props.selectedKey === item.key,
+        onClick: () => props.onSelect(item.key),
+        children: [
+          /* @__PURE__ */ jsx("span", { children: item.label }),
+          /* @__PURE__ */ jsx("span", { children: item.count })
+        ]
+      },
+      item.key
+    )) })
+  ] });
+}
+function NoteList(props) {
+  return /* @__PURE__ */ jsx("ul", { class: "garden-explorer__note-list", children: props.notes.map((note) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": props.selectedSlug === note.slug,
+      onClick: () => props.onSelect(note.slug),
+      children: [
+        /* @__PURE__ */ jsx("span", { children: note.title }),
+        /* @__PURE__ */ jsx("small", { children: note.folder })
+      ]
+    }
+  ) }, note.slug)) });
+}
+function NoteDetails(props) {
+  return /* @__PURE__ */ jsxs("div", { class: "garden-explorer__details", children: [
+    /* @__PURE__ */ jsx("p", { class: "garden-explorer__eyebrow", children: "Selected Note" }),
+    /* @__PURE__ */ jsx("h2", { children: /* @__PURE__ */ jsx("a", { href: props.note.permalink, children: props.note.title }) }),
+    /* @__PURE__ */ jsx("p", { class: "garden-explorer__path", children: props.note.slug }),
+    props.note.excerpt && /* @__PURE__ */ jsx("p", { children: props.note.excerpt }),
+    /* @__PURE__ */ jsx("div", { class: "garden-explorer__tag-row", children: props.note.tags.map((tag) => /* @__PURE__ */ jsxs("span", { children: [
+      "#",
+      tag
+    ] }, tag)) }),
+    /* @__PURE__ */ jsx(
+      LinkedNoteSection,
+      {
+        title: "Outgoing Links",
+        slugs: props.note.outgoing,
+        noteBySlug: props.noteBySlug,
+        onSelect: props.onSelect
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      LinkedNoteSection,
+      {
+        title: "Backlinks",
+        slugs: props.note.backlinks,
+        noteBySlug: props.noteBySlug,
+        onSelect: props.onSelect
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { class: "garden-explorer__section garden-explorer__section--flush", children: [
+      /* @__PURE__ */ jsx("p", { class: "garden-explorer__eyebrow", children: "Related Notes" }),
+      /* @__PURE__ */ jsx(
+        NoteList,
+        {
+          notes: props.relatedNotes,
+          selectedSlug: props.note.slug,
+          onSelect: props.onSelect
+        }
+      )
+    ] })
+  ] });
+}
+function LinkedNoteSection(props) {
+  const notes = props.slugs.map((slug) => props.noteBySlug.get(slug)).filter((note) => note !== void 0);
+  return /* @__PURE__ */ jsxs("div", { class: "garden-explorer__section garden-explorer__section--flush", children: [
+    /* @__PURE__ */ jsx("p", { class: "garden-explorer__eyebrow", children: props.title }),
+    notes.length > 0 ? /* @__PURE__ */ jsx(NoteList, { notes, selectedSlug: "", onSelect: props.onSelect }) : /* @__PURE__ */ jsx("p", { class: "garden-explorer__empty", children: "No notes." })
+  ] });
+}
+
+// components/garden-explorer.tsx
+import { 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;
+function GardenExplorer(props) {
+  const noteBySlug = useMemo(
+    () => new Map(props.data.notes.map((note) => [note.slug, note])),
+    [props.data.notes]
+  );
+  const [query, setQuery] = useState("");
+  const [selectedTag, setSelectedTag] = useState(null);
+  const [selectedFolder, setSelectedFolder] = useState(null);
+  const [selectedSlug, setSelectedSlug] = useState(
+    () => props.data.notes[0]?.slug ?? ""
+  );
+  const [mobilePanel, setMobilePanel] = useState("graph");
+  const [view, setView] = useState({ x: 0, y: 0, scale: 1 });
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const note = params.get("note");
+    const tag = params.get("tag");
+    const folder = params.get("folder");
+    if (note && noteBySlug.has(note)) setSelectedSlug(note);
+    if (tag) setSelectedTag(tag);
+    if (folder) setSelectedFolder(folder);
+  }, [noteBySlug]);
+  useEffect(() => {
+    const params = new URLSearchParams();
+    if (selectedSlug) params.set("note", selectedSlug);
+    if (selectedTag) params.set("tag", selectedTag);
+    if (selectedFolder) params.set("folder", selectedFolder);
+    const next = params.toString() ? `/explore?${params}` : "/explore";
+    window.history.replaceState(null, "", next);
+  }, [selectedSlug, selectedTag, selectedFolder]);
+  const filteredNotes = useMemo(() => {
+    const base = props.data.notes.filter((note) => {
+      if (selectedTag && !note.tags.includes(selectedTag)) return false;
+      if (selectedFolder && note.folder !== selectedFolder) return false;
+      return true;
+    });
+    const searched = query ? searchGardenExplorerNotes(base, query) : base;
+    return searched.slice(0, 80);
+  }, [props.data.notes, query, selectedTag, selectedFolder]);
+  const visibleSlugSet = useMemo(
+    () => new Set(filteredNotes.map((note) => note.slug)),
+    [filteredNotes]
+  );
+  const visibleEdges = useMemo(
+    () => props.data.edges.filter(
+      (edge) => visibleSlugSet.has(edge.source) && visibleSlugSet.has(edge.target)
+    ),
+    [props.data.edges, visibleSlugSet]
+  );
+  const graphNodes = useMemo(
+    () => layoutNodes(filteredNotes, selectedSlug),
+    [filteredNotes, selectedSlug]
+  );
+  const selectedNote = noteBySlug.get(selectedSlug) ?? filteredNotes[0] ?? null;
+  const relatedNotes = useMemo(
+    () => selectedNote ? getRelatedNotes(selectedNote, props.data.notes) : [],
+    [selectedNote, props.data.notes]
+  );
+  const selectNote = (slug) => {
+    setSelectedSlug(slug);
+    setMobilePanel("details");
+  };
+  const clearFilters = () => {
+    setQuery("");
+    setSelectedTag(null);
+    setSelectedFolder(null);
+  };
+  const zoom = (delta) => {
+    setView((current) => ({
+      ...current,
+      scale: clamp(current.scale + delta, MIN_SCALE, MAX_SCALE)
+    }));
+  };
+  return /* @__PURE__ */ jsxs2("div", { class: "garden-explorer rr-garden-explorer", "data-garden-explorer": true, children: [
+    /* @__PURE__ */ jsxs2("fieldset", { class: "garden-explorer__mobile-tabs", children: [
+      /* @__PURE__ */ jsx2("legend", { class: "sr-only", children: "Explorer panels" }),
+      ["graph", "explorer", "details"].map((panel) => /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          class: "garden-explorer__mobile-tab",
+          "aria-pressed": mobilePanel === panel,
+          onClick: () => setMobilePanel(panel),
+          children: panel
+        }
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs2("aside", { class: panelClass("explorer", mobilePanel), children: [
+      /* @__PURE__ */ jsxs2("div", { class: "garden-explorer__section", children: [
+        /* @__PURE__ */ jsx2("p", { class: "garden-explorer__eyebrow", children: "Explorer" }),
+        /* @__PURE__ */ jsxs2("label", { class: "garden-explorer__search", children: [
+          /* @__PURE__ */ jsx2("span", { class: "sr-only", children: "Search notes" }),
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type: "search",
+              value: query,
+              placeholder: "Search notes...",
+              onInput: (event) => setQuery(event.currentTarget.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            class: "garden-explorer__text-button",
+            onClick: clearFilters,
+            children: "Clear filters"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2(
+        FilterList,
+        {
+          title: "Tags",
+          items: props.data.tags.map((tag) => ({
+            key: tag.name,
+            label: `#${tag.name}`,
+            count: tag.count
+          })),
+          selectedKey: selectedTag,
+          onSelect: (key) => setSelectedTag(key === selectedTag ? null : key)
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        FilterList,
+        {
+          title: "Folders",
+          items: props.data.folders.map((folder) => ({
+            key: folder.path,
+            label: folder.path,
+            count: folder.count
+          })),
+          selectedKey: selectedFolder,
+          onSelect: (key) => setSelectedFolder(key === selectedFolder ? null : key)
+        }
+      ),
+      /* @__PURE__ */ jsxs2("div", { class: "garden-explorer__section", children: [
+        /* @__PURE__ */ jsx2("p", { class: "garden-explorer__eyebrow", children: "Notes" }),
+        /* @__PURE__ */ jsx2(
+          NoteList,
+          {
+            notes: filteredNotes,
+            selectedSlug,
+            onSelect: selectNote
+          }
+        )
+      ] })
+    ] }),
+    /* @__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"
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => zoom(-0.2),
+              "aria-label": "Zoom out",
+              children: "−"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => zoom(0.2),
+              "aria-label": "Zoom in",
+              children: "+"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: () => setView({ x: 0, y: 0, scale: 1 }),
+              children: "Reset"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "svg",
+        {
+          class: "garden-graph",
+          viewBox: `0 0 ${GRAPH_WIDTH} ${GRAPH_HEIGHT}`,
+          role: "img",
+          "aria-label": "Interactive graph of notes and internal links",
+          onWheel: (event) => {
+            event.preventDefault();
+            zoom(event.deltaY > 0 ? -0.1 : 0.1);
+          },
+          onPointerMove: (event) => {
+            if (event.buttons !== 1) return;
+            setView((current) => ({
+              ...current,
+              x: current.x + event.movementX / current.scale,
+              y: current.y + event.movementY / current.scale
+            }));
+          },
+          children: /* @__PURE__ */ jsxs2("g", { transform: `translate(${view.x} ${view.y}) scale(${view.scale})`, children: [
+            visibleEdges.map((edge) => {
+              const source = graphNodes.get(edge.source);
+              const target = graphNodes.get(edge.target);
+              if (!source || !target) return null;
+              return /* @__PURE__ */ jsx2(
+                "line",
+                {
+                  class: "garden-graph__edge",
+                  x1: source.x,
+                  y1: source.y,
+                  x2: target.x,
+                  y2: target.y
+                },
+                `${edge.source}-${edge.target}`
+              );
+            }),
+            filteredNotes.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",
+                {
+                  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);
+            })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2("aside", { class: panelClass("details", mobilePanel), children: selectedNote ? /* @__PURE__ */ jsx2(
+      NoteDetails,
+      {
+        note: selectedNote,
+        noteBySlug,
+        relatedNotes,
+        onSelect: selectNote
+      }
+    ) : /* @__PURE__ */ jsx2("p", { class: "garden-explorer__empty", children: "Select a note to inspect links." }) })
+  ] });
+}
+function layoutNodes(notes, selectedSlug) {
+  return layoutRadialGraph(notes, {
+    width: GRAPH_WIDTH,
+    height: GRAPH_HEIGHT,
+    centerSlug: selectedSlug
+  });
+}
+function getRelatedNotes(selectedNote, notes) {
+  const directSlugs = /* @__PURE__ */ new Set([
+    ...selectedNote.outgoing,
+    ...selectedNote.backlinks
+  ]);
+  const selectedTags = new Set(selectedNote.tags);
+  return notes.filter((note) => note.slug !== selectedNote.slug).map((note) => ({
+    note,
+    score: (directSlugs.has(note.slug) ? 8 : 0) + note.tags.filter((tag) => selectedTags.has(tag)).length * 3
+  })).filter((item) => item.score > 0).sort(
+    (a, b) => b.score - a.score || a.note.title.localeCompare(b.note.title, "ja")
+  ).slice(0, 8).map((item) => item.note);
+}
+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);
+}
+
+// client.tsx
+import { jsx as jsx3 } from "hono/jsx/jsx-runtime";
+var ROOT_SELECTOR = "[data-riebeckite-garden-explorer]";
+var DATA_ID = "riebeckite-garden-explorer-data";
+function initGardenExplorer() {
+  const root = document.querySelector(ROOT_SELECTOR);
+  const dataElement = document.getElementById(DATA_ID);
+  if (!root || !dataElement?.textContent) return;
+  const data = parseData(dataElement.textContent);
+  if (!data) return;
+  hydrateRoot(root, /* @__PURE__ */ jsx3(GardenExplorer, { data }));
+}
+function parseData(value) {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+}
+export {
+  initGardenExplorer as default
+};

package/dist/components/garden-explorer.js

@@ -1,5 +1,5 @@
 // components/garden-explorer.tsx
-import { layoutRadialGraph } from "@riebeckite/core";
+import { layoutRadialGraph } from "@riebeckite/core/client";
 import { useEffect, useMemo, useState } from "hono/jsx";
 
 // src/search-notes.ts

package/dist/index.js

@@ -1,8 +1,99 @@
 // index.ts
-import { definePlugin } from "@riebeckite/core";
+import { createClientEntry, definePlugin } from "@riebeckite/core";
+
+// src/garden-explorer.server.ts
+import {
+  buildGraphEdges,
+  isPublished
+} 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 publishedSlugs = new Set(publishedEntries.map((entry) => entry.slug));
+  const notes = publishedEntries.map(
+    (entry) => toGardenNote(entry, graph, publishedSlugs, args.resolveTitle)
+  ).sort((a, b) => a.title.localeCompare(b.title, "ja"));
+  return {
+    notes,
+    edges: buildGraphEdges(notes, publishedSlugs),
+    tags: buildTags(notes),
+    folders: buildFolders(notes)
+  };
+}
+function toGardenNote(entry, graph, publishedSlugs, resolveTitle) {
+  const { outgoingSlugs, incomingSlugs } = graph.filterNeighbors(
+    entry.slug,
+    (slug) => publishedSlugs.has(slug)
+  );
+  return {
+    slug: entry.slug,
+    permalink: entry.permalink,
+    title: resolveTitle(entry.slug, entry.frontmatter.title),
+    headings: extractHeadings(entry.html),
+    body: toPlainText(entry.html).slice(0, MAX_BODY_LENGTH),
+    excerpt: createExcerpt(entry),
+    tags: entry.tags,
+    date: getEntryDate(entry.frontmatter),
+    folder: getFolder(entry.slug),
+    outgoing: outgoingSlugs,
+    backlinks: incomingSlugs
+  };
+}
+function buildTags(notes) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const note of notes) {
+    for (const tag of note.tags) counts.set(tag, (counts.get(tag) ?? 0) + 1);
+  }
+  return Array.from(counts, ([name, count]) => ({ name, count })).sort(
+    (a, b) => b.count - a.count || a.name.localeCompare(b.name, "ja")
+  );
+}
+function buildFolders(notes) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const note of notes)
+    counts.set(note.folder, (counts.get(note.folder) ?? 0) + 1);
+  return Array.from(counts, ([path, count]) => ({ path, count })).sort(
+    (a, b) => a.path.localeCompare(b.path, "ja")
+  );
+}
+function getFolder(slug) {
+  const segments = slug.split("/");
+  if (segments.length <= 1) return "Root";
+  return segments.slice(0, -1).join("/");
+}
+function createExcerpt(entry) {
+  const description = entry.frontmatter.description;
+  const text = typeof description === "string" && description.trim() ? description.trim() : toPlainText(entry.html);
+  return text.slice(0, 180);
+}
+function extractHeadings(html) {
+  const headings = [];
+  const headingPattern = /<h([1-4])\b[^>]*>([\s\S]*?)<\/h\1>/g;
+  for (const match of html.matchAll(headingPattern)) {
+    const heading = toPlainText(match[2] ?? "");
+    if (heading) headings.push(heading);
+  }
+  return headings;
+}
+function getEntryDate(frontmatter) {
+  const value = frontmatter.published ?? frontmatter.date ?? frontmatter.created;
+  if (value instanceof Date && !Number.isNaN(value.getTime()))
+    return value.toISOString();
+  if (typeof value !== "string" || !value.trim()) return null;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date.toISOString();
+}
+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();
+}
+
+// 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";
+import { layoutRadialGraph } from "@riebeckite/core/client";
 import { useEffect, useMemo, useState } from "hono/jsx";
 
 // src/search-notes.ts
@@ -454,92 +545,30 @@ function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
 
-// src/garden-explorer.server.ts
-import {
-  buildGraphEdges,
-  isPublished
-} 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 publishedSlugs = new Set(publishedEntries.map((entry) => entry.slug));
-  const notes = publishedEntries.map(
-    (entry) => toGardenNote(entry, graph, publishedSlugs, args.resolveTitle)
-  ).sort((a, b) => a.title.localeCompare(b.title, "ja"));
-  return {
-    notes,
-    edges: buildGraphEdges(notes, publishedSlugs),
-    tags: buildTags(notes),
-    folders: buildFolders(notes)
-  };
-}
-function toGardenNote(entry, graph, publishedSlugs, resolveTitle) {
-  const { outgoingSlugs, incomingSlugs } = graph.filterNeighbors(
-    entry.slug,
-    (slug) => publishedSlugs.has(slug)
-  );
-  return {
-    slug: entry.slug,
-    permalink: entry.permalink,
-    title: resolveTitle(entry.slug, entry.frontmatter.title),
-    headings: extractHeadings(entry.html),
-    body: toPlainText(entry.html).slice(0, MAX_BODY_LENGTH),
-    excerpt: createExcerpt(entry),
-    tags: entry.tags,
-    date: getEntryDate(entry.frontmatter),
-    folder: getFolder(entry.slug),
-    outgoing: outgoingSlugs,
-    backlinks: incomingSlugs
-  };
-}
-function buildTags(notes) {
-  const counts = /* @__PURE__ */ new Map();
-  for (const note of notes) {
-    for (const tag of note.tags) counts.set(tag, (counts.get(tag) ?? 0) + 1);
-  }
-  return Array.from(counts, ([name, count]) => ({ name, count })).sort(
-    (a, b) => b.count - a.count || a.name.localeCompare(b.name, "ja")
-  );
-}
-function buildFolders(notes) {
-  const counts = /* @__PURE__ */ new Map();
-  for (const note of notes)
-    counts.set(note.folder, (counts.get(note.folder) ?? 0) + 1);
-  return Array.from(counts, ([path, count]) => ({ path, count })).sort(
-    (a, b) => a.path.localeCompare(b.path, "ja")
+// src/garden-explorer-page.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "hono/jsx/jsx-runtime";
+function renderGardenExplorerPage(data, siteTitle) {
+  return renderToString(
+    /* @__PURE__ */ jsxs3("main", { class: "garden-explorer-page", children: [
+      /* @__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("div", { "data-riebeckite-garden-explorer": true, children: /* @__PURE__ */ jsx3(GardenExplorer, { data }) }),
+      /* @__PURE__ */ jsx3(
+        "script",
+        {
+          id: "riebeckite-garden-explorer-data",
+          type: "application/json",
+          dangerouslySetInnerHTML: {
+            __html: escapeScriptJson(JSON.stringify(data))
+          }
+        }
+      )
+    ] })
   );
 }
-function getFolder(slug) {
-  const segments = slug.split("/");
-  if (segments.length <= 1) return "Root";
-  return segments.slice(0, -1).join("/");
-}
-function createExcerpt(entry) {
-  const description = entry.frontmatter.description;
-  const text = typeof description === "string" && description.trim() ? description.trim() : toPlainText(entry.html);
-  return text.slice(0, 180);
-}
-function extractHeadings(html) {
-  const headings = [];
-  const headingPattern = /<h([1-4])\b[^>]*>([\s\S]*?)<\/h\1>/g;
-  for (const match of html.matchAll(headingPattern)) {
-    const heading = toPlainText(match[2] ?? "");
-    if (heading) headings.push(heading);
-  }
-  return headings;
-}
-function getEntryDate(frontmatter) {
-  const value = frontmatter.published ?? frontmatter.date ?? frontmatter.created;
-  if (value instanceof Date && !Number.isNaN(value.getTime()))
-    return value.toISOString();
-  if (typeof value !== "string" || !value.trim()) return null;
-  const date = new Date(value);
-  return Number.isNaN(date.getTime()) ? null : date.toISOString();
-}
-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();
-}
 
 // index.ts
 function gardenExplorerPlugin() {
@@ -551,6 +580,31 @@ function gardenExplorerPlugin() {
         kind: "style",
         moduleSpecifier: "@riebeckite/plugin-garden-explorer/style.css"
       }
+    ],
+    clientEntries: [createClientEntry("garden-explorer")],
+    pageTypes: [
+      {
+        id: "garden-explorer",
+        paths: ["/explore"],
+        resolve: ({ pathname, manifest, config }) => {
+          if (pathname !== "/explore" || !config) return null;
+          const siteTitle = config.site.title;
+          return {
+            type: "garden-explorer",
+            pathname,
+            title: "Garden Explorer",
+            description: "Explore notes through links, backlinks, tags, and folders.",
+            body: renderGardenExplorerPage(
+              getGardenExplorerData({
+                manifest,
+                config,
+                resolveTitle: (slug, title) => typeof title === "string" && title.trim() ? title : slug
+              }),
+              siteTitle
+            )
+          };
+        }
+      }
     ]
   });
 }

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

@@ -0,0 +1,2 @@
+import type { GardenExplorerData } from "./garden-explorer.js";
+export declare function renderGardenExplorerPage(data: GardenExplorerData, siteTitle: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-garden-explorer",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,11 +18,17 @@
       "source": "./components/garden-explorer.tsx",
       "default": "./dist/components/garden-explorer.js"
     },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.js",
+      "source": "./client.tsx",
+      "default": "./dist/client.js"
+    },
     "./style.css": "./style.css"
   },
   "dependencies": {
     "hono": "^4.12.25",
-    "@riebeckite/core": "0.0.12"
+    "@riebeckite/core": "0.0.13"
   },
   "publishConfig": {
     "access": "public"