for-humanity 0.4.4 → 0.5.0

package/dist/cli.js

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
-// src/cli.ts
+// src/entry/cli/cli.ts
 import { EventEmitter } from "node:events";
-import { existsSync as existsSync3, watch } from "node:fs";
+import { existsSync as existsSync3, readFileSync as readFileSync3, watch } from "node:fs";
 import { copyFile, mkdir, rm, writeFile } from "node:fs/promises";
 import { basename as basename2, dirname as dirname4, extname as extname4, join as join4, relative as relative4, resolve as resolve3, sep as sep3 } from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
@@ -12,180 +12,31 @@ import { debounce } from "es-toolkit";
 import { Hono as Hono3 } from "hono";
 import { toSSG } from "hono/ssg";
 
-// src/app.tsx
-import { Hono } from "hono";
-import { ssgParams } from "hono/ssg";
-import { renderToStaticMarkup } from "react-dom/server";
-
-// src/component/widget/prose/wg-prose.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var WgProse = (props) => {
-  if (props.html !== void 0) {
-    return /* @__PURE__ */ jsx("article", { className: clsx("wg_prose__root"), dangerouslySetInnerHTML: { __html: props.html } });
-  }
-  return /* @__PURE__ */ jsx("article", { className: clsx("wg_prose__root"), children: props.head !== void 0 && /* @__PURE__ */ jsxs("header", { className: clsx("wg_prose__head"), children: [
-    /* @__PURE__ */ jsx("h1", { children: props.head.title }),
-    props.head.lead !== void 0 && /* @__PURE__ */ jsx("p", { children: props.head.lead })
-  ] }) });
-};
-
-// src/component/widget/shell/wg-shell.tsx
-import clsx5 from "clsx";
-
-// src/component/widget/shell/_constant/navigation.ts
-var navigation_mobile_query = "(width < 1024px)";
-var navigation_scroll_storage_key = "for-humanity:navigation-scroll";
-
-// src/component/widget/shell/_function/bind-navigation-overflow.ts
-var bindNavigationOverflow = () => {
-  const ports = [...document.querySelectorAll("[data-navigation-scroll]")];
-  const frame = { id: 0 };
-  const edgeTolerance = 1;
-  const updateOverflow = () => {
-    frame.id = 0;
-    for (const port of ports) {
-      port.classList.add("wg_shell__scroll--ready");
-      port.classList.toggle("wg_shell__scroll--above", port.scrollTop > edgeTolerance);
-      port.classList.toggle("wg_shell__scroll--below", port.scrollHeight - port.clientHeight - port.scrollTop > edgeTolerance);
-    }
-  };
-  const scheduleOverflow = () => {
-    if (frame.id === 0) {
-      frame.id = requestAnimationFrame(updateOverflow);
-    }
-  };
-  const observer = new ResizeObserver(scheduleOverflow);
-  for (const port of ports) {
-    port.addEventListener("scroll", scheduleOverflow, { passive: true });
-    observer.observe(port);
-    if (port.firstElementChild) {
-      observer.observe(port.firstElementChild);
-    }
-  }
-  addEventListener("pageshow", scheduleOverflow);
-  updateOverflow();
-};
-
-// src/component/widget/shell/_function/restore-navigation-scroll.ts
-var restoreNavigationScroll = (storageKey) => {
-  const navigation = document.querySelector("[data-navigation]");
-  const documents = document.querySelector('[data-navigation-scroll="documents"]');
-  const outline = document.querySelector('[data-navigation-scroll="outline"]');
-  if (!navigation || !documents || !outline) {
-    return;
-  }
-  try {
-    const value = sessionStorage.getItem(storageKey);
-    if (value === null) {
-      return;
-    }
-    const stored = JSON.parse(value);
-    const signature = [...navigation.querySelectorAll(".wg_shellNav__root a[href]")].map((link) => `${link.pathname}:${link.textContent}`).join("\n");
-    if (typeof stored !== "object" || stored === null || !("navigation" in stored) || stored.navigation !== signature) {
-      return;
-    }
-    if ("documents" in stored && typeof stored.documents === "number" && Number.isFinite(stored.documents) && stored.documents >= 0) {
-      documents.scrollTop = stored.documents;
-    }
-    if ("pathname" in stored && stored.pathname === location.pathname && "outline" in stored && typeof stored.outline === "number" && Number.isFinite(stored.outline) && stored.outline >= 0) {
-      outline.scrollTop = stored.outline;
-    }
-  } catch {
-  }
-};
-
-// src/component/widget/shell/_function/to-toc-groups.ts
-import { takeWhile } from "es-toolkit/array";
-
-// src/component/widget/prose/_constant/section.ts
-var section_heading_depth = {
-  section: 2,
-  sub: 3
-};
-
-// src/component/widget/shell/_function/to-toc-groups.ts
-var toTocGroups = (outline) => {
-  const entries = outline.headings.filter((heading) => heading.depth === section_heading_depth.section || heading.depth === section_heading_depth.sub).map((heading, index) => ({ heading, section: outline.sections[index] }));
-  const sections = entries.flatMap(
-    (entry, index) => entry.heading.depth === section_heading_depth.section ? [
-      {
-        heading: entry.heading,
-        part: entry.section.part,
-        subs: takeWhile(entries.slice(index + 1), (sub) => sub.heading.depth !== section_heading_depth.section).map((sub) => ({
-          heading: sub.heading
-        }))
-      }
-    ] : []
-  );
-  return sections.flatMap(
-    (section, index) => index === 0 || section.part !== void 0 ? [
-      {
-        part: section.part,
-        sections: [section, ...takeWhile(sections.slice(index + 1), (next) => next.part === void 0)]
-      }
-    ] : []
-  );
-};
-
-// src/component/widget/shell/_wg-shell-nav.tsx
-import clsx3 from "clsx";
-
-// src/component/widget/shell/_wg-shell-nav-list.tsx
-import clsx2 from "clsx";
-import { Fragment } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var WgShellNavList = (props) => {
-  const currentAncestors = new Set(props.currentDoc?.ancestors);
-  const entries = [
-    ...props.group.docs.map((doc) => {
-      const active = doc.id === props.currentDoc?.id;
-      return { kind: "document", key: `doc:${doc.id}`, doc, active, current: active || currentAncestors.has(doc.id) };
-    }),
-    ...props.group.groups.map((group) => ({
-      kind: "group",
-      key: `group:${JSON.stringify(group.path)}`,
-      group,
-      current: group.path.every((name, index) => name === props.currentDoc?.data.group[index])
-    }))
-  ];
-  const currentIndex = entries.findIndex((entry) => entry.current);
-  return /* @__PURE__ */ jsx2("ul", { className: clsx2("wg_shellNavList__root"), "aria-label": props.group.name, children: entries.map((entry, index) => /* @__PURE__ */ jsxs2(
-    "li",
-    {
-      className: clsx2("wg_shellNavList__item", {
-        "wg_shellNavList__item--trail": index < currentIndex,
-        "wg_shellNavList__item--current": entry.current
-      }),
-      children: [
-        entry.kind === "document" && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2(
-            "a",
-            {
-              className: clsx2("wg_shellNavList__link", { "wg_shellNavList__link--active": entry.active }),
-              href: `/${entry.doc.id}/`,
-              title: entry.doc.data.label,
-              "aria-current": entry.active ? "page" : void 0,
-              children: entry.doc.data.name
-            }
-          ),
-          entry.doc.children !== void 0 && /* @__PURE__ */ jsx2(
-            WgShellNavList,
-            {
-              group: { name: entry.doc.data.name, path: entry.doc.data.group, docs: entry.doc.children, groups: [] },
-              currentDoc: props.currentDoc
-            }
-          )
-        ] }),
-        entry.kind === "group" && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2("span", { className: clsx2("wg_shellNavList__branch"), children: entry.group.name }),
-          /* @__PURE__ */ jsx2(WgShellNavList, { group: entry.group, currentDoc: props.currentDoc })
-        ] })
-      ]
-    },
-    entry.key
-  )) });
+// src/constant/asset.ts
+var asset_dir = "_fh";
+var asset_style_path = `/${asset_dir}/style.css`;
+var asset_font_dir = `/${asset_dir}/fonts`;
+var asset_reload_path = `/${asset_dir}/reload`;
+var asset_favicon_path = "/favicon.svg";
+var asset_content_types = {
+  ".css": "text/css; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".woff2": "font/woff2",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+  ".avif": "image/avif",
+  ".pdf": "application/pdf",
+  ".csv": "text/csv; charset=utf-8",
+  ".txt": "text/plain; charset=utf-8",
+  ".zip": "application/zip"
 };
+var asset_content_type_default = "application/octet-stream";
+var asset_media_dir = `/${asset_dir}/media`;
+var asset_media_extensions = /* @__PURE__ */ new Set([".svg", ".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif", ".pdf", ".csv", ".txt", ".zip"]);
 
 // src/constant/copy.ts
 var copy_site_title_default = "for humanity";
@@ -214,11 +65,52 @@ var copy_warn_broken_link = "\uC5C6\uB294 \uBB38\uC11C\uB85C \uAC74 \uB9C1\uD06C
 var copy_warn_unknown_status = "\uC124\uC815\uC5D0 \uC5C6\uB294 \uC0C1\uD0DC \uBB38\uAD6C\uB2E4";
 var copy_error_asset = "\uC790\uC6D0\uC774 \uC62C\uBC14\uB974\uC9C0 \uC54A\uB2E4";
 
-// src/constant/locale.ts
+// src/constant/font.ts
+var font_sans_css = "src/asset/font/pretendard/pretendardvariable-dynamic-subset.css";
+var font_mono_css = "src/asset/font/jetbrains-mono/jetbrains-mono.css";
+var font_brand_css = "src/asset/font/architects-daughter/architects-daughter.css";
+var font_sans_preload_file = "PretendardVariable.subset.91.woff2";
+var font_display_strategy = "optional";
+var font_hash_length = 12;
+var font_cache_control = "public, max-age=31536000, immutable";
+
+// src/constant/site.ts
+var site_config_absent = {};
+var site_navigation_default = [];
+
+// src/entry/cli/_constant/cli.ts
+var cli_default_command = "dev";
+var cli_default_docs_dir = ".";
+var cli_config_file_name = "for-humanity.config.mjs";
+var cli_dev_port = 4321;
+var cli_reload_delay_ms = 150;
+
+// src/entry/cli/_function/create-app.tsx
+import { Hono } from "hono";
+import { html } from "hono/html";
+import { ssgParams } from "hono/ssg";
+
+// src/component/widget/prose/wg-prose.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+var WgProse = (props) => {
+  if (props.html !== void 0) {
+    return /* @__PURE__ */ jsx("article", { className: clsx("wg_prose__root"), dangerouslySetInnerHTML: { __html: props.html } });
+  }
+  return /* @__PURE__ */ jsx("article", { className: clsx("wg_prose__root"), children: props.head !== void 0 && /* @__PURE__ */ jsxs("header", { className: clsx("wg_prose__head"), children: [
+    /* @__PURE__ */ jsx("h1", { children: props.head.title }),
+    props.head.lead !== void 0 && /* @__PURE__ */ jsx("p", { children: props.head.lead })
+  ] }) });
+};
+
+// src/component/widget/shell/wg-shell.tsx
+import clsx10 from "clsx";
+
+// src/component/widget/navigation/_constant/locale.ts
 var locale_doc_name = "en";
 var locale_doc_group = "ko";
 
-// src/content/to-doc-groups/_to-doc-branches.ts
+// src/component/widget/navigation/_function/to-doc-groups/_to-doc-branches.ts
 var toDocBranches = (options) => {
   return options.docs.toSorted((a, b) => a.data.order - b.data.order || a.data.name.localeCompare(b.data.name, locale_doc_name) || a.id.localeCompare(b.id, locale_doc_name)).map((doc) => {
     const children = options.children.get(doc.id);
@@ -226,7 +118,7 @@ var toDocBranches = (options) => {
   });
 };
 
-// src/content/to-doc-groups/_to-doc-group-branches.ts
+// src/component/widget/navigation/_function/to-doc-groups/_to-doc-group-branches.ts
 var toDocGroupBranches = (options) => {
   return [
     ...Map.groupBy(
@@ -260,176 +152,1086 @@ var toDocGroupBranches = (options) => {
   });
 };
 
-// src/content/to-doc-groups/to-doc-groups.ts
+// src/component/widget/navigation/_function/to-doc-groups/to-doc-groups.ts
 var toDocGroups = (options) => {
   const positions = new Map(options.navigation.flatMap((path, index) => path.map((_name, depth) => [JSON.stringify(path.slice(0, depth + 1)), index])).toReversed());
   const children = Map.groupBy(options.docs, (doc) => doc.data.parent);
   return toDocGroupBranches({ docs: options.docs, children, path: [], positions, unlistedPosition: options.navigation.length });
 };
 
-// src/component/widget/shell/_wg-shell-nav.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var WgShellNav = (props) => {
-  const docGroups = toDocGroups({ docs: props.docs, navigation: props.site.navigation });
-  const currentDoc = props.docs.find((doc) => doc.id === props.current);
-  return /* @__PURE__ */ jsx3("nav", { className: clsx3("wg_shellNav__root"), "aria-label": copy_nav_aria_label, children: /* @__PURE__ */ jsx3("div", { className: clsx3("wg_shellNav__docs"), children: docGroups.map((group) => /* @__PURE__ */ jsxs3("section", { className: clsx3("wg_shellNav__docGroup"), "aria-label": group.name, children: [
-    /* @__PURE__ */ jsx3("div", { className: clsx3("wg_shellNav__group"), children: group.name }),
-    /* @__PURE__ */ jsx3(WgShellNavList, { group, currentDoc })
-  ] }, group.name)) }) });
+// src/component/widget/navigation/_function/to-navigation-data/_to-navigation-document.ts
+var toNavigationDocument = (options) => ({
+  id: options.doc.id,
+  name: options.doc.data.name,
+  label: options.doc.data.label,
+  active: options.doc.id === options.current,
+  current: options.doc.id === options.current || options.ancestors.has(options.doc.id),
+  children: options.doc.children === void 0 ? [] : options.doc.children.map((doc) => toNavigationDocument({ ...options, doc }))
+});
+
+// src/component/widget/navigation/_function/to-navigation-data/_to-navigation-group.ts
+var toNavigationGroup = (options) => ({
+  name: options.group.name,
+  path: options.group.path,
+  current: options.group.path.every((name, index) => name === options.currentGroup?.[index]),
+  docs: options.group.docs.map((doc) => toNavigationDocument({ doc, current: options.current, ancestors: options.ancestors })),
+  groups: options.group.groups.map((group) => toNavigationGroup({ ...options, group }))
+});
+
+// src/component/widget/navigation/_function/to-toc-groups.ts
+import { takeWhile } from "es-toolkit/array";
+
+// src/component/widget/prose/_constant/section.ts
+var section_heading_depth = {
+  section: 2,
+  sub: 3
+};
+
+// src/component/widget/navigation/_function/to-toc-groups.ts
+var toTocGroups = (outline) => {
+  const entries = outline.headings.filter((heading) => heading.depth === section_heading_depth.section || heading.depth === section_heading_depth.sub).map((heading, index) => ({ heading, section: outline.sections[index] }));
+  const sections = entries.flatMap(
+    (entry, index) => entry.heading.depth === section_heading_depth.section ? [
+      {
+        heading: entry.heading,
+        part: entry.section.part,
+        subs: takeWhile(entries.slice(index + 1), (sub) => sub.heading.depth !== section_heading_depth.section).map((sub) => ({
+          heading: sub.heading
+        }))
+      }
+    ] : []
+  );
+  return sections.flatMap(
+    (section, index) => index === 0 || section.part !== void 0 ? [
+      {
+        part: section.part,
+        sections: [section, ...takeWhile(sections.slice(index + 1), (next) => next.part === void 0)]
+      }
+    ] : []
+  );
+};
+
+// src/component/widget/navigation/_function/to-navigation-data/to-navigation-data.ts
+var toNavigationData = (options) => {
+  const currentDoc = options.docs.find((doc) => doc.id === options.current);
+  const ancestors = new Set(currentDoc?.ancestors);
+  return {
+    title: options.site.title,
+    groups: toDocGroups({ docs: options.docs, navigation: options.site.navigation }).map(
+      (group) => toNavigationGroup({ group, current: options.current, ancestors, currentGroup: currentDoc?.data.group })
+    ),
+    outline: options.outline === void 0 ? [] : toTocGroups(options.outline),
+    pageId: options.current === void 0 ? "/" : options.current,
+    home: options.current === void 0
+  };
+};
+
+// src/component/widget/navigation/_function/to-navigation-json.ts
+var toNavigationJson = (data) => {
+  return JSON.stringify(data).replaceAll("<", "\\u003c").replaceAll("\u2028", "\\u2028").replaceAll("\u2029", "\\u2029");
+};
+
+// src/component/widget/shell-controls/wg-shell-controls.tsx
+import clsx9 from "clsx";
+import { Fragment as Fragment3, useEffect, useLayoutEffect as useLayoutEffect5, useRef as useRef4 } from "hono/jsx";
+
+// src/component/widget/cursor-face/wg-cursor-face.tsx
+import clsx2 from "clsx";
+import { useLayoutEffect, useRef } from "hono/jsx";
+
+// src/component/widget/cursor-face/_constant/cursor-face.ts
+var cursor_face_offset_px = 16;
+var cursor_face_size_px = 24;
+var cursor_face_storage_key = "fh-cursor-face";
+
+// src/component/widget/cursor-face/wg-cursor-face.tsx
+import { jsx as jsx2 } from "hono/jsx/jsx-runtime";
+var WgCursorFace = (props) => {
+  const faceRef = useRef(null);
+  const mediaRef = useRef(null);
+  const positionRef = useRef({ x: 0, y: 0, frame: 0 });
+  const handleCursorHide = () => {
+    cancelAnimationFrame(positionRef.current.frame);
+    positionRef.current.frame = 0;
+    faceRef.current?.classList.remove("wg_cursorFace__root--visible");
+  };
+  const handleCursorMediaChange = () => {
+    if (!mediaRef.current?.matches) handleCursorHide();
+  };
+  const renderCursorFace = () => {
+    if (positionRef.current.frame !== 0) return;
+    positionRef.current.frame = requestAnimationFrame(() => {
+      positionRef.current.frame = 0;
+      const face = faceRef.current;
+      if (face === null) return;
+      face.style.transform = `translate3d(
+                ${Math.max(0, Math.min(positionRef.current.x + cursor_face_offset_px, document.documentElement.clientWidth - face.width - cursor_face_offset_px))}px,
+                ${Math.max(0, Math.min(positionRef.current.y + cursor_face_offset_px, document.documentElement.clientHeight - face.height - cursor_face_offset_px))}px,
+                0
+            )`;
+      face.classList.add("wg_cursorFace__root--visible");
+    });
+  };
+  const handleDocumentPointer = (event) => {
+    if (!mediaRef.current?.matches || event.pointerType !== "mouse") {
+      handleCursorHide();
+      return;
+    }
+    positionRef.current.x = event.clientX;
+    positionRef.current.y = event.clientY;
+    renderCursorFace();
+  };
+  const handleCursorResize = () => {
+    if (faceRef.current?.classList.contains("wg_cursorFace__root--visible")) renderCursorFace();
+  };
+  const handlePageHide = () => {
+    if (!faceRef.current?.classList.contains("wg_cursorFace__root--visible")) return;
+    try {
+      sessionStorage.setItem(cursor_face_storage_key, JSON.stringify({ x: positionRef.current.x, y: positionRef.current.y }));
+    } catch {
+    }
+  };
+  const handlePageShow = () => {
+    try {
+      const stored = sessionStorage.getItem(cursor_face_storage_key);
+      sessionStorage.removeItem(cursor_face_storage_key);
+      if (stored === null || !mediaRef.current?.matches) return;
+      const point = JSON.parse(stored);
+      if (typeof point === "object" && point !== null && "x" in point && "y" in point && typeof point.x === "number" && typeof point.y === "number" && Number.isFinite(point.x) && Number.isFinite(point.y)) {
+        positionRef.current.x = point.x;
+        positionRef.current.y = point.y;
+        renderCursorFace();
+      }
+    } catch {
+    }
+  };
+  useLayoutEffect(() => {
+    if (!props.ready) return;
+    const lifetime = new AbortController();
+    const media = matchMedia("(hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)");
+    mediaRef.current = media;
+    handlePageShow();
+    document.addEventListener("pointermove", handleDocumentPointer, { passive: true, signal: lifetime.signal });
+    document.addEventListener("pointerdown", handleDocumentPointer, { passive: true, signal: lifetime.signal });
+    document.documentElement.addEventListener("pointerleave", handleCursorHide, { signal: lifetime.signal });
+    addEventListener("blur", handleCursorHide, { signal: lifetime.signal });
+    addEventListener("resize", handleCursorResize, { signal: lifetime.signal });
+    addEventListener("pagehide", handlePageHide, { signal: lifetime.signal });
+    addEventListener("pageshow", handlePageShow, { signal: lifetime.signal });
+    media.addEventListener("change", handleCursorMediaChange, { signal: lifetime.signal });
+    return () => {
+      lifetime.abort();
+      mediaRef.current = null;
+      handleCursorHide();
+    };
+  }, [props.ready]);
+  return /* @__PURE__ */ jsx2(
+    "img",
+    {
+      ref: props.ready ? faceRef : void 0,
+      className: clsx2("wg_cursorFace__root"),
+      src: asset_favicon_path,
+      width: cursor_face_size_px,
+      height: cursor_face_size_px,
+      alt: "",
+      "aria-hidden": "true",
+      draggable: false,
+      "data-cursor-face": ""
+    }
+  );
+};
+
+// src/component/widget/navigation/wg-navigation.tsx
+import clsx8 from "clsx";
+import { Fragment as Fragment2, useLayoutEffect as useLayoutEffect4, useRef as useRef3, useState as useState3 } from "hono/jsx";
+import { flushSync } from "hono/jsx/dom";
+
+// src/component/widget/navigation/_constant/navigation.ts
+var navigation_mobile_query = "(width < 1024px)";
+var navigation_wide_query = "(width >= 1536px)";
+
+// src/component/widget/navigation/_function/restore-navigation-scroll.ts
+var restoreNavigationScroll = (options) => {
+  const navigation = document.querySelector("[data-navigation]");
+  const documents = document.querySelector('[data-navigation-scroll="documents"]');
+  const outline = document.querySelector('[data-navigation-scroll="outline"]');
+  if (!navigation || !documents || !outline) return;
+  navigation.dataset.navigationLayout = options.layout;
+  try {
+    const value = sessionStorage.getItem(options.key);
+    const stored = value === null ? void 0 : JSON.parse(value);
+    const state = typeof stored === "object" && stored !== null && "version" in stored && stored.version === options.version && "state" in stored ? options.toState(stored.state) : { positions: {} };
+    const legacy = sessionStorage.getItem(`${options.key}:${options.layout === "drawer" ? "drawer" : "desktop"}`);
+    const previous = state.positions[options.layout] === void 0 && legacy !== null ? options.toState({ positions: { [options.layout]: JSON.parse(legacy) } }).positions[options.layout] : void 0;
+    const position = state.positions[options.layout] ?? previous;
+    const signature = [...navigation.querySelectorAll(".wg_navigationNav__root a[href]")].map((link) => `${link.pathname}:${link.textContent}`).join("\n");
+    if (position === void 0 || position.navigation !== signature) return;
+    documents.scrollTop = position.documents;
+    if (position.pathname === location.pathname) outline.scrollTop = position.outline;
+  } catch {
+  }
+};
+
+// src/component/widget/navigation/_wg-navigation-nav.tsx
+import clsx5 from "clsx";
+
+// src/component/widget/navigation/_wg-navigation-branch-toggle.tsx
+import clsx3 from "clsx";
+
+// src/component/widget/navigation/_function/to-navigation-branch-id.ts
+var toNavigationBranchId = (key) => {
+  return `fh-branch-${encodeURIComponent(key)}`;
+};
+
+// src/component/widget/navigation/_wg-navigation-branch-toggle.tsx
+import { jsx as jsx3 } from "hono/jsx/jsx-runtime";
+var WgNavigationBranchToggle = (props) => {
+  const handleToggleClick = () => props.onToggle?.(props.branchKey);
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      className: clsx3("wg_navigationBranchToggle__root"),
+      type: "button",
+      "aria-label": `${props.collapsed[props.branchKey] === true ? "Expand" : "Collapse"} ${props.label}`,
+      "aria-expanded": String(props.collapsed[props.branchKey] !== true),
+      "aria-controls": toNavigationBranchId(props.branchKey),
+      "data-navigation-toggle": props.branchKey,
+      "data-navigation-label": props.label,
+      hidden: props.onToggle === void 0,
+      onClick: handleToggleClick,
+      children: props.collapsed[props.branchKey] === true ? "+" : "\u2212"
+    }
+  );
 };
 
-// src/component/widget/shell/_wg-shell-toc.tsx
+// src/component/widget/navigation/_wg-navigation-nav-list.tsx
 import clsx4 from "clsx";
-import { Fragment as Fragment2 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var WgShellToc = (props) => {
-  return /* @__PURE__ */ jsxs4("nav", { className: clsx4("wg_shellToc__root"), "aria-label": copy_nav_toc_label, children: [
-    /* @__PURE__ */ jsx4("div", { className: clsx4("wg_shellToc__label"), children: copy_nav_toc_label }),
-    props.groups.map((group) => /* @__PURE__ */ jsxs4(Fragment2, { children: [
-      group.part !== void 0 && /* @__PURE__ */ jsx4("div", { className: clsx4("wg_shellToc__group"), children: group.part }),
-      /* @__PURE__ */ jsx4("ul", { className: clsx4("wg_shellToc__list"), children: group.sections.map((section) => /* @__PURE__ */ jsxs4("li", { className: clsx4("wg_shellToc__item"), children: [
-        /* @__PURE__ */ jsx4("a", { className: clsx4("wg_shellToc__link"), href: `#${section.heading.slug}`, "data-toc-link": "", children: section.heading.text }),
-        section.subs.length > 0 && /* @__PURE__ */ jsx4("ul", { className: clsx4("wg_shellToc__sub"), children: section.subs.map((sub) => /* @__PURE__ */ jsx4("li", { className: clsx4("wg_shellToc__subItem"), children: /* @__PURE__ */ jsx4("a", { className: clsx4("wg_shellToc__subLink"), href: `#${sub.heading.slug}`, "data-toc-sub-link": "", children: sub.heading.text }) }, sub.heading.slug)) })
-      ] }, section.heading.slug)) })
-    ] }, group.sections[0].heading.slug))
+import { Fragment } from "hono/jsx";
+import { jsx as jsx4, jsxs as jsxs2 } from "hono/jsx/jsx-runtime";
+var WgNavigationNavList = (props) => {
+  const entries = [
+    ...props.group.docs.map((doc) => {
+      const active = doc.active;
+      return { kind: "document", key: `doc:${doc.id}`, doc, active, current: doc.current };
+    }),
+    ...props.group.groups.map((group) => ({
+      kind: "group",
+      key: `group:${JSON.stringify(group.path)}`,
+      group,
+      current: group.current
+    }))
+  ];
+  const currentIndex = entries.findIndex((entry) => entry.current);
+  return /* @__PURE__ */ jsx4(
+    "ul",
+    {
+      className: clsx4("wg_navigationNavList__root"),
+      "aria-label": props.group.name,
+      id: toNavigationBranchId(props.branchKey),
+      hidden: props.collapsed[props.branchKey] === true,
+      children: entries.map((entry, index) => /* @__PURE__ */ jsxs2(
+        "li",
+        {
+          className: clsx4("wg_navigationNavList__item", {
+            "wg_navigationNavList__item--trail": index < currentIndex,
+            "wg_navigationNavList__item--current": entry.current
+          }),
+          children: [
+            entry.kind === "document" && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx4(
+                "a",
+                {
+                  className: clsx4("wg_navigationNavList__link", { "wg_navigationNavList__link--active": entry.active }),
+                  href: `/${entry.doc.id}/`,
+                  title: entry.doc.label,
+                  "aria-current": entry.active ? "page" : void 0,
+                  children: entry.doc.name
+                }
+              ),
+              entry.doc.children.length > 0 && /* @__PURE__ */ jsx4(WgNavigationBranchToggle, { branchKey: entry.key, label: entry.doc.name, collapsed: props.collapsed, onToggle: props.onToggle }),
+              entry.doc.children.length > 0 && /* @__PURE__ */ jsx4(
+                WgNavigationNavList,
+                {
+                  group: { name: entry.doc.name, path: props.group.path, current: entry.current, docs: entry.doc.children, groups: [] },
+                  collapsed: props.collapsed,
+                  onToggle: props.onToggle,
+                  branchKey: entry.key
+                }
+              )
+            ] }),
+            entry.kind === "group" && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx4("span", { className: clsx4("wg_navigationNavList__branch"), children: entry.group.name }),
+              /* @__PURE__ */ jsx4(WgNavigationBranchToggle, { branchKey: entry.key, label: entry.group.name, collapsed: props.collapsed, onToggle: props.onToggle }),
+              /* @__PURE__ */ jsx4(WgNavigationNavList, { group: entry.group, collapsed: props.collapsed, onToggle: props.onToggle, branchKey: entry.key })
+            ] })
+          ]
+        },
+        entry.key
+      ))
+    }
+  );
+};
+
+// src/component/widget/navigation/_wg-navigation-nav.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "hono/jsx/jsx-runtime";
+var WgNavigationNav = (props) => {
+  return /* @__PURE__ */ jsx5("nav", { className: clsx5("wg_navigationNav__root"), "aria-label": copy_nav_aria_label, children: /* @__PURE__ */ jsx5("div", { className: clsx5("wg_navigationNav__docs"), children: props.groups.map((group) => /* @__PURE__ */ jsxs3("section", { className: clsx5("wg_navigationNav__docGroup"), "aria-label": group.name, children: [
+    /* @__PURE__ */ jsx5("div", { className: clsx5("wg_navigationNav__group"), children: group.name }),
+    /* @__PURE__ */ jsx5(WgNavigationBranchToggle, { branchKey: `group:${JSON.stringify(group.path)}`, label: group.name, collapsed: props.collapsed, onToggle: props.onToggle }),
+    /* @__PURE__ */ jsx5(WgNavigationNavList, { group, branchKey: `group:${JSON.stringify(group.path)}`, collapsed: props.collapsed, onToggle: props.onToggle })
+  ] }, JSON.stringify(group.path))) }) });
+};
+
+// src/component/widget/navigation/_wg-navigation-scroll.tsx
+import clsx6 from "clsx";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState } from "hono/jsx";
+import { jsx as jsx6 } from "hono/jsx/jsx-runtime";
+var WgNavigationScroll = (props) => {
+  const [overflow, setOverflow] = useState({ above: false, below: false });
+  const frameRef = useRef2(0);
+  const updateOverflow = () => {
+    frameRef.current = 0;
+    if (props.portRef.current === null) return;
+    const above = props.portRef.current.scrollTop > 1;
+    const below = props.portRef.current.scrollHeight - props.portRef.current.clientHeight - props.portRef.current.scrollTop > 1;
+    setOverflow((state) => state.above === above && state.below === below ? state : { above, below });
+  };
+  const scheduleOverflow = () => {
+    if (frameRef.current === 0) frameRef.current = requestAnimationFrame(updateOverflow);
+  };
+  const handlePortScroll = (_event) => {
+    props.onScroll?.();
+    scheduleOverflow();
+  };
+  useLayoutEffect2(() => {
+    if (!props.ready || props.portRef.current === null) return;
+    const observer = new ResizeObserver(scheduleOverflow);
+    observer.observe(props.portRef.current);
+    if (props.portRef.current.firstElementChild !== null) observer.observe(props.portRef.current.firstElementChild);
+    let active = true;
+    addEventListener("pageshow", scheduleOverflow);
+    if (props.portRef.current.isConnected) {
+      updateOverflow();
+    } else {
+      queueMicrotask(() => {
+        if (active) updateOverflow();
+      });
+    }
+    return () => {
+      active = false;
+      observer.disconnect();
+      removeEventListener("pageshow", scheduleOverflow);
+      cancelAnimationFrame(frameRef.current);
+      frameRef.current = 0;
+    };
+  }, [props.portRef, props.ready]);
+  useLayoutEffect2(() => {
+    if (props.ready && props.portRef.current?.isConnected) updateOverflow();
+  }, [props.children, props.ready]);
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions lint/a11y/useKeyWithClickEvents: 부모의 링크 이벤트 위임이며 자식 a·button의 네이티브 키보드 동작을 그대로 소비한다
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        ref: props.ready ? props.portRef : void 0,
+        className: clsx6(
+          "wg_navigation__scroll",
+          props.kind === "documents" && "wg_navigation__documents",
+          props.kind === "outline" && "wg_navigation__headings",
+          props.ready && "wg_navigation__scroll--ready",
+          props.ready && overflow.above && "wg_navigation__scroll--above",
+          props.ready && overflow.below && "wg_navigation__scroll--below"
+        ),
+        "data-navigation-scroll": props.kind,
+        onClick: props.onClick,
+        onScroll: handlePortScroll,
+        children: props.children
+      }
+    )
+  );
+};
+
+// src/component/widget/navigation/_wg-navigation-toc.tsx
+import clsx7 from "clsx";
+import { useLayoutEffect as useLayoutEffect3, useState as useState2 } from "hono/jsx";
+
+// src/component/widget/navigation/_constant/reading-line.ts
+var reading_line_slack_px = 1;
+
+// src/util/dom/find-hash-target.ts
+var findHashTarget = (hash) => {
+  if (!hash) {
+    return null;
+  }
+  try {
+    return document.getElementById(decodeURIComponent(hash.slice(1)));
+  } catch (error) {
+    if (error instanceof URIError) {
+      return null;
+    }
+    throw error;
+  }
+};
+
+// src/component/widget/navigation/_wg-navigation-toc.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "hono/jsx/jsx-runtime";
+var WgNavigationToc = (props) => {
+  const [currentSlug, setCurrentSlug] = useState2();
+  useLayoutEffect3(() => {
+    const sections = props.groups.flatMap((group) => group.sections);
+    const headings = sections.flatMap((section) => [section.heading, ...section.subs.map((sub) => sub.heading)]);
+    const frame = { id: 0 };
+    const updateCurrentHeading = () => {
+      frame.id = 0;
+      const visible = headings.flatMap((heading) => {
+        const target = findHashTarget(`#${heading.slug}`);
+        return target?.checkVisibility() ? [{ slug: heading.slug, top: target.getBoundingClientRect().top - Number.parseFloat(getComputedStyle(target).scrollMarginTop) }] : [];
+      });
+      setCurrentSlug(visible.findLast((heading) => heading.top <= reading_line_slack_px)?.slug ?? visible[0]?.slug);
+    };
+    const handleReadingPositionChange = () => {
+      if (frame.id === 0) frame.id = requestAnimationFrame(updateCurrentHeading);
+    };
+    addEventListener("scroll", handleReadingPositionChange, { passive: true });
+    addEventListener("resize", handleReadingPositionChange);
+    addEventListener("toggle", handleReadingPositionChange, true);
+    addEventListener("pageshow", handleReadingPositionChange);
+    document.addEventListener("DOMContentLoaded", handleReadingPositionChange);
+    if (document.readyState !== "loading") updateCurrentHeading();
+    return () => {
+      cancelAnimationFrame(frame.id);
+      removeEventListener("scroll", handleReadingPositionChange);
+      removeEventListener("resize", handleReadingPositionChange);
+      removeEventListener("toggle", handleReadingPositionChange, true);
+      removeEventListener("pageshow", handleReadingPositionChange);
+      document.removeEventListener("DOMContentLoaded", handleReadingPositionChange);
+    };
+  }, [props.groups]);
+  return /* @__PURE__ */ jsxs4("nav", { className: clsx7("wg_navigationToc__root"), "aria-label": copy_nav_toc_label, children: [
+    /* @__PURE__ */ jsx7("div", { className: clsx7("wg_navigationToc__label"), children: copy_nav_toc_label }),
+    props.groups.map((group) => {
+      const currentIndex = group.sections.findIndex((section) => section.heading.slug === currentSlug || section.subs.some((sub) => sub.heading.slug === currentSlug));
+      const partKey = `outline:${props.pageId}:part:${group.sections[0].heading.slug}`;
+      return /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: clsx7("wg_navigationToc__groupSection", { "wg_navigationToc__groupSection--named": group.part !== void 0 }),
+          children: [
+            group.part !== void 0 && /* @__PURE__ */ jsx7("div", { className: clsx7("wg_navigationToc__group"), children: group.part }),
+            group.part !== void 0 && /* @__PURE__ */ jsx7(WgNavigationBranchToggle, { branchKey: partKey, label: group.part, collapsed: props.collapsed, onToggle: props.onToggle }),
+            /* @__PURE__ */ jsx7("ul", { className: clsx7("wg_navigationToc__list"), id: toNavigationBranchId(partKey), hidden: props.collapsed[partKey] === true, children: group.sections.map((section, index) => {
+              const currentSubIndex = section.subs.findIndex((sub) => sub.heading.slug === currentSlug);
+              const sectionKey = `outline:${props.pageId}:heading:${section.heading.slug}`;
+              return /* @__PURE__ */ jsxs4(
+                "li",
+                {
+                  className: clsx7("wg_navigationToc__item", {
+                    "wg_navigationToc__item--trail": index < currentIndex,
+                    "wg_navigationToc__item--current": index === currentIndex
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx7(
+                      "a",
+                      {
+                        className: clsx7("wg_navigationToc__link", { "wg_navigationToc__link--active": section.heading.slug === currentSlug }),
+                        href: `#${section.heading.slug}`,
+                        "data-toc-link": "",
+                        "aria-current": section.heading.slug === currentSlug ? "location" : void 0,
+                        children: section.heading.text
+                      }
+                    ),
+                    section.subs.length > 0 && /* @__PURE__ */ jsx7(WgNavigationBranchToggle, { branchKey: sectionKey, label: section.heading.text, collapsed: props.collapsed, onToggle: props.onToggle }),
+                    section.subs.length > 0 && /* @__PURE__ */ jsx7("ul", { className: clsx7("wg_navigationToc__sub"), id: toNavigationBranchId(sectionKey), hidden: props.collapsed[sectionKey] === true, children: section.subs.map((sub, subIndex) => /* @__PURE__ */ jsx7(
+                      "li",
+                      {
+                        className: clsx7("wg_navigationToc__subItem", {
+                          "wg_navigationToc__subItem--trail": subIndex < currentSubIndex,
+                          "wg_navigationToc__subItem--current": subIndex === currentSubIndex
+                        }),
+                        children: /* @__PURE__ */ jsx7(
+                          "a",
+                          {
+                            className: clsx7("wg_navigationToc__subLink", { "wg_navigationToc__subLink--active": sub.heading.slug === currentSlug }),
+                            href: `#${sub.heading.slug}`,
+                            "data-toc-sub-link": "",
+                            "aria-current": sub.heading.slug === currentSlug ? "location" : void 0,
+                            children: sub.heading.text
+                          }
+                        )
+                      },
+                      sub.heading.slug
+                    )) })
+                  ]
+                },
+                section.heading.slug
+              );
+            }) })
+          ]
+        },
+        group.sections[0].heading.slug
+      );
+    })
   ] });
 };
 
-// src/constant/asset.ts
-var asset_dir = "_fh";
-var asset_style_path = `/${asset_dir}/style.css`;
-var asset_client_path = `/${asset_dir}/client.js`;
-var asset_font_dir = `/${asset_dir}/fonts`;
-var asset_reload_path = `/${asset_dir}/reload`;
-var asset_favicon_path = "/favicon.svg";
-var asset_content_types = {
-  ".css": "text/css; charset=utf-8",
-  ".js": "text/javascript; charset=utf-8",
-  ".woff2": "font/woff2",
-  ".svg": "image/svg+xml",
-  ".png": "image/png",
-  ".jpg": "image/jpeg",
-  ".jpeg": "image/jpeg",
-  ".gif": "image/gif",
-  ".webp": "image/webp",
-  ".avif": "image/avif",
-  ".pdf": "application/pdf",
-  ".csv": "text/csv; charset=utf-8",
-  ".txt": "text/plain; charset=utf-8",
-  ".zip": "application/zip"
+// src/store/navigation/navigation-storage.ts
+var navigation_tree_storage_key = "for-humanity:navigation-tree";
+var navigation_storage_version = 1;
+var navigation_scroll_storage_key = "for-humanity:navigation-scroll";
+
+// src/store/navigation/to-navigation-scroll-state.ts
+var toNavigationScrollState = (value) => {
+  const toPosition = (position) => {
+    if (typeof position !== "object" || position === null || !("navigation" in position) || typeof position.navigation !== "string" || !("pathname" in position) || typeof position.pathname !== "string" || !("documents" in position) || typeof position.documents !== "number" || !Number.isFinite(position.documents) || position.documents < 0 || !("outline" in position) || typeof position.outline !== "number" || !Number.isFinite(position.outline) || position.outline < 0) {
+      return;
+    }
+    return { navigation: position.navigation, pathname: position.pathname, documents: position.documents, outline: position.outline };
+  };
+  if (typeof value !== "object" || value === null || !("positions" in value) || typeof value.positions !== "object" || value.positions === null) {
+    return { positions: {} };
+  }
+  const positions = {
+    wide: toPosition("wide" in value.positions ? value.positions.wide : void 0),
+    desktop: toPosition("desktop" in value.positions ? value.positions.desktop : void 0),
+    drawer: toPosition("drawer" in value.positions ? value.positions.drawer : void 0)
+  };
+  return { positions: Object.fromEntries(Object.entries(positions).filter((entry) => entry[1] !== void 0)) };
 };
-var asset_content_type_default = "application/octet-stream";
-var asset_media_dir = `/${asset_dir}/media`;
-var asset_media_extensions = /* @__PURE__ */ new Set([".svg", ".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif", ".pdf", ".csv", ".txt", ".zip"]);
 
-// src/component/widget/shell/wg-shell.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var reloadScript = `new EventSource(${JSON.stringify(asset_reload_path)}).onmessage=function(){location.reload()}`;
-var navigationScript = `(${bindNavigationOverflow.toString()})();if(!matchMedia(${JSON.stringify(navigation_mobile_query)}).matches){(${restoreNavigationScroll.toString()})(${JSON.stringify(`${navigation_scroll_storage_key}:desktop`)})}`;
-var WgShell = (props) => {
-  const tocGroups = props.outline === void 0 ? [] : toTocGroups(props.outline);
-  return /* @__PURE__ */ jsxs5("html", { lang: "ko", children: [
-    /* @__PURE__ */ jsxs5("head", { children: [
-      /* @__PURE__ */ jsx5("meta", { charSet: "utf-8" }),
-      /* @__PURE__ */ jsx5("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }),
-      props.site.description !== void 0 && /* @__PURE__ */ jsx5("meta", { name: "description", content: props.site.description }),
-      /* @__PURE__ */ jsx5("title", { children: props.title === void 0 ? props.site.title : `${props.title} \xB7 ${props.site.title}` }),
-      /* @__PURE__ */ jsx5("link", { rel: "icon", href: asset_favicon_path, type: "image/svg+xml" }),
-      /* @__PURE__ */ jsx5("style", { dangerouslySetInnerHTML: { __html: props.assets.fontCss } }),
-      props.assets.preload.map((href) => /* @__PURE__ */ jsx5("link", { rel: "preload", href, as: "font", type: "font/woff2", crossOrigin: "" }, href)),
-      /* @__PURE__ */ jsx5("script", { dangerouslySetInnerHTML: { __html: 'document.documentElement.style.scrollBehavior="auto"' } }),
-      /* @__PURE__ */ jsx5("link", { rel: "stylesheet", href: props.assets.stylePath }),
-      props.assets.reload && /* @__PURE__ */ jsx5("script", { dangerouslySetInnerHTML: { __html: reloadScript } })
+// src/store/navigation/use-navigation-tree-store.ts
+import { useSyncExternalStore } from "hono/jsx";
+
+// src/store/navigation/_constant/tree.ts
+var tree_server_state = { collapsed: {} };
+
+// src/store/navigation/use-navigation-tree-store.ts
+var useNavigationTreeStore = (tree) => {
+  const subscribe = tree === void 0 ? () => () => {
+  } : tree.subscribe;
+  const getSnapshot = tree === void 0 ? () => tree_server_state : tree.getState;
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};
+
+// src/util/dom/reveal-hash-target.ts
+var revealHashTarget = (hash) => {
+  const target = findHashTarget(hash);
+  for (let fold = target?.closest("details"); fold; fold = fold.parentElement?.closest("details")) {
+    fold.open = true;
+  }
+  return target;
+};
+
+// src/component/widget/navigation/wg-navigation.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "hono/jsx/jsx-runtime";
+var WgNavigation = (props) => {
+  const navigationTreeStore = useNavigationTreeStore(props.stores?.tree);
+  const [layout, setLayout] = useState3(() => {
+    if (props.stores === void 0) return "desktop";
+    if (matchMedia(navigation_mobile_query).matches) return "drawer";
+    return matchMedia(navigation_wide_query).matches ? "wide" : "desktop";
+  });
+  const [drawerOpen, setDrawerOpen] = useState3(false);
+  const navigationRef = useRef3(null);
+  const documentsRef = useRef3(null);
+  const drawerNavigationRef = useRef3(null);
+  const drawerDocumentsRef = useRef3(null);
+  const outlineRef = useRef3(null);
+  const dialogRef = useRef3(null);
+  const openButtonRef = useRef3(null);
+  const brandRef = useRef3(null);
+  const mobileRef = useRef3(null);
+  const wideRef = useRef3(null);
+  const layoutRef = useRef3(layout);
+  const focusRef = useRef3(null);
+  const restorePendingRef = useRef3(true);
+  const getNavigationLayout = () => {
+    if (mobileRef.current === null || wideRef.current === null) return layoutRef.current;
+    if (mobileRef.current.matches) return "drawer";
+    return wideRef.current.matches ? "wide" : "desktop";
+  };
+  const getNavigationPort = () => {
+    return layoutRef.current === "drawer" ? drawerNavigationRef.current : navigationRef.current;
+  };
+  const getDocumentsPort = () => {
+    return layoutRef.current === "drawer" ? drawerDocumentsRef.current : documentsRef.current;
+  };
+  const getNavigationSignature = () => {
+    const navigation = getNavigationPort();
+    if (navigation === null) return void 0;
+    return [...navigation.querySelectorAll(".wg_navigationNav__root a[href]")].map((link) => `${link.pathname}:${link.textContent}`).join("\n");
+  };
+  const saveScroll = () => {
+    const documents = getDocumentsPort();
+    if (props.stores === void 0 || documents === null || outlineRef.current === null || restorePendingRef.current || layoutRef.current !== getNavigationLayout() || layoutRef.current === "drawer" && dialogRef.current?.open !== true) {
+      return;
+    }
+    const signature = getNavigationSignature();
+    if (signature === void 0) return;
+    const navigationPosition = {
+      navigation: signature,
+      pathname: location.pathname,
+      documents: documents.scrollTop,
+      outline: outlineRef.current.scrollTop
+    };
+    props.stores.scroll.setState((state) => ({
+      positions: {
+        ...state.positions,
+        [layoutRef.current]: navigationPosition
+      }
+    }));
+  };
+  const restoreScroll = () => {
+    layoutRef.current = getNavigationLayout();
+    const documents = getDocumentsPort();
+    const navigation = getNavigationPort();
+    if (props.stores === void 0 || documents === null || outlineRef.current === null || navigation === null) return;
+    if (layoutRef.current === "drawer" && dialogRef.current?.open !== true) return;
+    const signature = getNavigationSignature();
+    if (signature === void 0) return;
+    const position = props.stores.scroll.getState().positions[layoutRef.current];
+    documents.scrollTop = 0;
+    outlineRef.current.scrollTop = 0;
+    if (position === void 0) {
+      restoreNavigationScroll({ key: navigation_scroll_storage_key, version: navigation_storage_version, layout: layoutRef.current, toState: toNavigationScrollState });
+    } else if (position.navigation === signature) {
+      documents.scrollTop = position.documents;
+      if (position.pathname === location.pathname) outlineRef.current.scrollTop = position.outline;
+    }
+    navigation.dataset.navigationLayout = layoutRef.current;
+    restorePendingRef.current = false;
+    saveScroll();
+    documents.dispatchEvent(new Event("scroll"));
+    outlineRef.current.dispatchEvent(new Event("scroll"));
+  };
+  const handleBranchToggle = (key) => {
+    props.stores?.tree.setState((state) => ({ collapsed: { ...state.collapsed, [key]: state.collapsed[key] !== true } }));
+  };
+  const handleDrawerClose = (_event) => {
+    if (dialogRef.current?.open === true) return;
+    document.body.classList.remove("wg_shell__root--drawerOpen");
+    setDrawerOpen(false);
+  };
+  const closeNavigation = () => {
+    saveScroll();
+    dialogRef.current?.close();
+    document.body.classList.remove("wg_shell__root--drawerOpen");
+    setDrawerOpen(false);
+  };
+  const handleOpenButtonClick = (_event) => {
+    if (getNavigationLayout() !== "drawer" || dialogRef.current === null || dialogRef.current.open) return;
+    dialogRef.current.showModal();
+    document.body.classList.add("wg_shell__root--drawerOpen");
+    setDrawerOpen(true);
+    restoreScroll();
+  };
+  const handleCloseButtonClick = (_event) => {
+    closeNavigation();
+  };
+  const handleDrawerCancel = (event) => {
+    event.preventDefault();
+    closeNavigation();
+  };
+  const handleDrawerClick = (event) => {
+    if (dialogRef.current === null || event.target !== dialogRef.current) return;
+    const bounds = dialogRef.current.getBoundingClientRect();
+    if (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom) closeNavigation();
+  };
+  const handleNavigationClick = (event) => {
+    saveScroll();
+    if (dialogRef.current?.open !== true || event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || !(event.target instanceof Element)) {
+      return;
+    }
+    const link = event.target.closest("a[href]");
+    if (!(link instanceof HTMLAnchorElement) || link.target !== "" && link.target !== "_self" || link.hasAttribute("download")) return;
+    closeNavigation();
+    if (link.origin === location.origin && link.pathname === location.pathname && link.search === location.search && link.hash) {
+      const target = revealHashTarget(link.hash);
+      if (target !== null) {
+        target.tabIndex = -1;
+        target.focus({ preventScroll: true });
+      }
+    }
+  };
+  const handleLayoutChange = () => {
+    const nextLayout = getNavigationLayout();
+    if (nextLayout === layoutRef.current) return;
+    if (document.activeElement instanceof HTMLElement) {
+      focusRef.current = {
+        navigation: document.activeElement.closest("[data-navigation]") !== null,
+        drawer: document.activeElement === openButtonRef.current || document.activeElement.closest("[data-navigation-drawer]") !== null,
+        branch: document.activeElement.getAttribute("data-navigation-toggle"),
+        href: document.activeElement.getAttribute("href")
+      };
+    }
+    if (nextLayout !== "drawer") closeNavigation();
+    restorePendingRef.current = true;
+    layoutRef.current = nextLayout;
+    flushSync(() => setLayout(nextLayout));
+  };
+  const handlePageShow = (event) => {
+    if (!event.persisted || props.stores === void 0) return;
+    restorePendingRef.current = true;
+    flushSync(() => {
+      props.stores?.tree.persist.rehydrate();
+      props.stores?.scroll.persist.rehydrate();
+    });
+    handleLayoutChange();
+    restoreScroll();
+  };
+  const handleStorageChange = (event) => {
+    if (event.key === navigation_tree_storage_key || event.key === null) {
+      flushSync(() => props.stores?.tree.persist.rehydrate());
+    }
+  };
+  const handleTreeChange = (state) => {
+    if (!(document.activeElement instanceof HTMLElement)) return;
+    for (const button of document.querySelectorAll("[data-navigation-toggle]")) {
+      const key = button.dataset.navigationToggle;
+      const controls = button.getAttribute("aria-controls");
+      if (key === void 0 || controls === null || state.collapsed[key] !== true) continue;
+      const branch = document.getElementById(controls);
+      if (branch?.contains(document.activeElement)) button.focus({ preventScroll: true });
+    }
+  };
+  useLayoutEffect4(() => {
+    if (props.stores === void 0) return;
+    mobileRef.current = matchMedia(navigation_mobile_query);
+    wideRef.current = matchMedia(navigation_wide_query);
+    mobileRef.current.addEventListener("change", handleLayoutChange);
+    wideRef.current.addEventListener("change", handleLayoutChange);
+    addEventListener("pagehide", saveScroll);
+    addEventListener("pageshow", handlePageShow);
+    addEventListener("storage", handleStorageChange);
+    const unsubscribeTree = props.stores.tree.subscribe(handleTreeChange);
+    return () => {
+      mobileRef.current?.removeEventListener("change", handleLayoutChange);
+      wideRef.current?.removeEventListener("change", handleLayoutChange);
+      mobileRef.current = null;
+      wideRef.current = null;
+      removeEventListener("pagehide", saveScroll);
+      removeEventListener("pageshow", handlePageShow);
+      removeEventListener("storage", handleStorageChange);
+      unsubscribeTree();
+      document.body.classList.remove("wg_shell__root--drawerOpen");
+    };
+  }, [props.stores]);
+  useLayoutEffect4(() => {
+    if (props.stores === void 0) return;
+    let active = true;
+    const restoreNavigation = () => {
+      if (!active) return;
+      restoreScroll();
+      if (focusRef.current === null) return;
+      const navigation = getNavigationPort();
+      if (layout === "drawer") {
+        if (focusRef.current.navigation) openButtonRef.current?.focus({ preventScroll: true });
+      } else if (focusRef.current.navigation && navigation !== null) {
+        const target = [...navigation.querySelectorAll("a[href], button")].find((element) => {
+          if (focusRef.current === null) return false;
+          return focusRef.current.branch !== null ? element.getAttribute("data-navigation-toggle") === focusRef.current.branch : focusRef.current.href !== null && element.getAttribute("href") === focusRef.current.href;
+        });
+        target?.focus({ preventScroll: true });
+      } else if (focusRef.current.drawer) {
+        brandRef.current?.focus({ preventScroll: true });
+      }
+      focusRef.current = null;
+    };
+    if (getDocumentsPort()?.isConnected) {
+      restoreNavigation();
+    } else {
+      queueMicrotask(restoreNavigation);
+    }
+    return () => {
+      active = false;
+    };
+  }, [layout, props.stores]);
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsxs5("div", { className: clsx8("wg_navigation__sidebar", props.stores !== void 0 && "wg_navigation__sidebar--navigationReady"), children: [
+      /* @__PURE__ */ jsxs5("div", { className: clsx8("wg_navigation__brandRow"), children: [
+        /* @__PURE__ */ jsx8(
+          "a",
+          {
+            ref: props.stores === void 0 ? void 0 : brandRef,
+            className: clsx8("wg_navigation__brand"),
+            href: "/",
+            "aria-current": props.data.home ? "page" : void 0,
+            children: props.data.title
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            ref: props.stores === void 0 ? void 0 : openButtonRef,
+            className: clsx8("wg_navigation__menuToggle", props.stores !== void 0 && layout === "drawer" && "wg_navigation__menuToggle--visible"),
+            type: "button",
+            "aria-label": copy_nav_open,
+            "aria-controls": "fh-navigation-drawer",
+            "aria-expanded": String(drawerOpen),
+            "data-navigation-open": "",
+            onClick: handleOpenButtonClick,
+            children: /* @__PURE__ */ jsx8("svg", { className: clsx8("wg_navigation__menuIcon"), viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx8("path", { d: "M4 6h16M4 12h16M4 18h16" }) })
+          }
+        )
+      ] }),
+      layout !== "drawer" && /* @__PURE__ */ jsx8("div", { ref: props.stores === void 0 ? void 0 : navigationRef, className: clsx8("wg_navigation__navigation"), "data-navigation": "", children: /* @__PURE__ */ jsx8(WgNavigationScroll, { portRef: documentsRef, kind: "documents", ready: props.stores !== void 0, onScroll: saveScroll, onClick: handleNavigationClick, children: /* @__PURE__ */ jsx8(
+        WgNavigationNav,
+        {
+          groups: props.data.groups,
+          collapsed: navigationTreeStore.collapsed,
+          onToggle: props.stores === void 0 ? void 0 : handleBranchToggle
+        }
+      ) }) })
     ] }),
-    /* @__PURE__ */ jsxs5("body", { className: clsx5("wg_shell__root"), children: [
-      /* @__PURE__ */ jsxs5("div", { className: clsx5("wg_shell__sidebar"), children: [
-        /* @__PURE__ */ jsxs5("div", { className: clsx5("wg_shell__brandRow"), children: [
-          /* @__PURE__ */ jsx5("a", { className: clsx5("wg_shell__brand"), href: "/", "aria-current": props.current === void 0 ? "page" : void 0, children: props.site.title }),
-          /* @__PURE__ */ jsx5(
-            "button",
+    /* @__PURE__ */ jsx8("aside", { className: clsx8("wg_navigation__tocRail"), "data-navigation-rail": "", children: /* @__PURE__ */ jsx8("div", { className: clsx8("wg_navigation__outline"), "data-navigation-outline": "", children: /* @__PURE__ */ jsx8(WgNavigationScroll, { portRef: outlineRef, kind: "outline", ready: props.stores !== void 0, onScroll: saveScroll, onClick: handleNavigationClick, children: props.data.outline.length > 0 && /* @__PURE__ */ jsx8(
+      WgNavigationToc,
+      {
+        groups: props.data.outline,
+        pageId: props.data.pageId,
+        collapsed: navigationTreeStore.collapsed,
+        onToggle: props.stores === void 0 ? void 0 : handleBranchToggle
+      }
+    ) }) }) }),
+    /* @__PURE__ */ jsxs5(
+      "dialog",
+      {
+        ref: props.stores === void 0 ? void 0 : dialogRef,
+        className: clsx8("wg_navigation__drawer"),
+        id: "fh-navigation-drawer",
+        "aria-labelledby": "fh-navigation-title",
+        "data-navigation-drawer": "",
+        onClose: handleDrawerClose,
+        onCancel: handleDrawerCancel,
+        onClick: handleDrawerClick,
+        children: [
+          /* @__PURE__ */ jsxs5("div", { className: clsx8("wg_navigation__drawerHeader"), children: [
+            /* @__PURE__ */ jsx8("h2", { className: clsx8("wg_navigation__drawerTitle"), id: "fh-navigation-title", children: copy_nav_title }),
+            /* @__PURE__ */ jsx8("button", { className: clsx8("wg_navigation__drawerClose"), type: "button", "aria-label": copy_nav_close, "data-navigation-close": "", onClick: handleCloseButtonClick, children: /* @__PURE__ */ jsx8("svg", { className: clsx8("wg_navigation__menuIcon"), viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx8("path", { d: "m6 6 12 12M18 6 6 18" }) }) })
+          ] }),
+          /* @__PURE__ */ jsx8("div", { className: clsx8("wg_navigation__drawerContent"), "data-navigation-content": "", children: layout === "drawer" && /* @__PURE__ */ jsx8("div", { ref: props.stores === void 0 ? void 0 : drawerNavigationRef, className: clsx8("wg_navigation__navigation"), "data-navigation": "", children: /* @__PURE__ */ jsx8(
+            WgNavigationScroll,
             {
-              className: clsx5("wg_shell__menuToggle"),
-              type: "button",
-              "aria-label": copy_nav_open,
-              "aria-controls": "fh-navigation-drawer",
-              "aria-expanded": "false",
-              "data-navigation-open": "",
-              children: /* @__PURE__ */ jsx5("svg", { className: clsx5("wg_shell__menuIcon"), viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx5("path", { d: "M4 6h16M4 12h16M4 18h16" }) })
+              portRef: drawerDocumentsRef,
+              kind: "documents",
+              ready: props.stores !== void 0,
+              onScroll: saveScroll,
+              onClick: handleNavigationClick,
+              children: /* @__PURE__ */ jsx8(
+                WgNavigationNav,
+                {
+                  groups: props.data.groups,
+                  collapsed: navigationTreeStore.collapsed,
+                  onToggle: props.stores === void 0 ? void 0 : handleBranchToggle
+                }
+              )
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs5("div", { className: clsx5("wg_shell__navigation"), "data-navigation": "", children: [
-          /* @__PURE__ */ jsx5("div", { className: clsx5("wg_shell__documents", "wg_shell__scroll"), "data-navigation-scroll": "documents", children: /* @__PURE__ */ jsx5(WgShellNav, { site: props.site, docs: props.docs, current: props.current }) }),
-          /* @__PURE__ */ jsx5("div", { className: clsx5("wg_shell__outline"), children: /* @__PURE__ */ jsx5("div", { className: clsx5("wg_shell__headings", "wg_shell__scroll"), "data-navigation-scroll": "outline", children: tocGroups.length > 0 && /* @__PURE__ */ jsx5(WgShellToc, { groups: tocGroups }) }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx5("script", { dangerouslySetInnerHTML: { __html: navigationScript } }),
-      /* @__PURE__ */ jsx5("main", { className: clsx5("wg_shell__main"), children: props.children }),
-      /* @__PURE__ */ jsxs5("dialog", { className: clsx5("wg_shell__drawer"), id: "fh-navigation-drawer", "aria-labelledby": "fh-navigation-title", "data-navigation-drawer": "", children: [
-        /* @__PURE__ */ jsxs5("div", { className: clsx5("wg_shell__drawerHeader"), children: [
-          /* @__PURE__ */ jsx5("h2", { className: clsx5("wg_shell__drawerTitle"), id: "fh-navigation-title", children: copy_nav_title }),
-          /* @__PURE__ */ jsx5("button", { className: clsx5("wg_shell__drawerClose"), type: "button", "aria-label": copy_nav_close, "data-navigation-close": "", children: /* @__PURE__ */ jsx5("svg", { className: clsx5("wg_shell__menuIcon"), viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx5("path", { d: "m6 6 12 12M18 6 6 18" }) }) })
-        ] }),
-        /* @__PURE__ */ jsx5("div", { className: clsx5("wg_shell__drawerContent"), "data-navigation-content": "" })
-      ] }),
-      /* @__PURE__ */ jsx5("img", { className: clsx5("wg_shell__cursorFace"), src: asset_favicon_path, width: "24", height: "24", alt: "", "aria-hidden": "true", draggable: false, "data-cursor-face": "" }),
-      /* @__PURE__ */ jsx5("script", { type: "module", src: props.assets.clientPath })
+          ) }) })
+        ]
+      }
+    )
+  ] });
+};
+
+// src/component/widget/prose/_constant/heading-highlight.ts
+var heading_highlight_hold_ms = 3e3;
+
+// src/component/widget/shell-controls/wg-shell-controls.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "hono/jsx/jsx-runtime";
+var WgShellControls = (props) => {
+  const headingRef = useRef4(null);
+  const timerRef = useRef4(0);
+  const arrivalRef = useRef4(null);
+  const lifetimeRef = useRef4(null);
+  const userScrollRef = useRef4(null);
+  const clearHeadingHighlight = () => {
+    clearTimeout(timerRef.current);
+    timerRef.current = 0;
+    arrivalRef.current?.abort();
+    arrivalRef.current = null;
+    headingRef.current?.classList.remove("wg_prose__headingText--highlighted");
+    headingRef.current = null;
+  };
+  const handleHighlightArrival = (event) => {
+    if (event.target !== document) return;
+    clearTimeout(timerRef.current);
+    arrivalRef.current?.abort();
+    arrivalRef.current = null;
+    timerRef.current = window.setTimeout(clearHeadingHighlight, heading_highlight_hold_ms);
+  };
+  const highlightHeading = (target) => {
+    clearHeadingHighlight();
+    headingRef.current = target === null ? null : target.querySelector(".wg_prose__headingText");
+    if (headingRef.current === null) return;
+    headingRef.current.classList.add("wg_prose__headingText--highlighted");
+    timerRef.current = window.setTimeout(clearHeadingHighlight, heading_highlight_hold_ms);
+    arrivalRef.current = new AbortController();
+    document.addEventListener("scrollend", handleHighlightArrival, { signal: arrivalRef.current.signal });
+  };
+  const handleHashClick = (event) => {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    const link = event.target instanceof Element ? event.target.closest("a[href]") : null;
+    if (link instanceof HTMLAnchorElement && (link.target === "" || link.target === "_self") && !link.hasAttribute("download") && link.origin === location.origin && link.pathname === location.pathname && link.search === location.search && link.hash) {
+      const target = revealHashTarget(link.hash);
+      if (link.hash === location.hash) highlightHeading(target);
+    }
+  };
+  const handleHashChange = () => {
+    const target = revealHashTarget(location.hash);
+    target?.scrollIntoView();
+    highlightHeading(target);
+  };
+  const handleUserScroll = () => {
+    userScrollRef.current?.abort();
+  };
+  const handlePageLoad = async () => {
+    const lifetime = lifetimeRef.current;
+    const hash = location.hash;
+    const target = revealHashTarget(hash);
+    await document.fonts.ready;
+    if (lifetime === null || lifetime.signal.aborted) return;
+    if (target !== null && !userScrollRef.current?.signal.aborted && hash === location.hash) {
+      target.scrollIntoView({ behavior: "instant" });
+      highlightHeading(target);
+    }
+    document.documentElement.style.removeProperty("scroll-behavior");
+  };
+  const handleBodyReady = () => {
+    revealHashTarget(location.hash);
+    if (document.readyState === "complete") void handlePageLoad();
+  };
+  useLayoutEffect5(() => {
+    const lifetime = new AbortController();
+    lifetimeRef.current = lifetime;
+    userScrollRef.current = new AbortController();
+    document.documentElement.style.scrollBehavior = "auto";
+    document.addEventListener("click", handleHashClick, { signal: lifetime.signal });
+    addEventListener("hashchange", handleHashChange, { signal: lifetime.signal });
+    addEventListener("load", handlePageLoad, { once: true, signal: lifetime.signal });
+    for (const type of ["wheel", "touchmove", "keydown", "mousedown"]) {
+      addEventListener(type, handleUserScroll, { once: true, passive: true, signal: lifetime.signal });
+    }
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", handleBodyReady, { once: true, signal: lifetime.signal });
+    } else {
+      handleBodyReady();
+    }
+    return () => {
+      lifetime.abort();
+      lifetimeRef.current = null;
+      userScrollRef.current?.abort();
+      userScrollRef.current = null;
+      clearHeadingHighlight();
+      document.documentElement.style.removeProperty("scroll-behavior");
+    };
+  }, []);
+  useEffect(() => {
+    if (!props.reload || lifetimeRef.current === null) return;
+    const source = new EventSource(asset_reload_path);
+    source.onmessage = () => location.reload();
+    return () => source.close();
+  }, [props.reload]);
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx9("div", { className: clsx9("wg_shellControls__navigation"), children: /* @__PURE__ */ jsx9(WgNavigation, { data: props.data, stores: props.stores }) }),
+    /* @__PURE__ */ jsx9(WgCursorFace, { ready: props.stores !== void 0 })
+  ] });
+};
+
+// src/component/widget/shell/wg-shell.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "hono/jsx/jsx-runtime";
+var WgShell = (props) => {
+  const navigationData = toNavigationData({ site: props.site, docs: props.docs, current: props.current, outline: props.outline });
+  return /* @__PURE__ */ jsxs7("html", { lang: "ko", children: [
+    /* @__PURE__ */ jsxs7("head", { children: [
+      /* @__PURE__ */ jsx10("meta", { charSet: "utf-8" }),
+      /* @__PURE__ */ jsx10("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }),
+      props.site.description !== void 0 && /* @__PURE__ */ jsx10("meta", { name: "description", content: props.site.description }),
+      /* @__PURE__ */ jsx10("title", { children: props.title === void 0 ? props.site.title : `${props.title} \xB7 ${props.site.title}` }),
+      /* @__PURE__ */ jsx10("link", { rel: "icon", href: asset_favicon_path, type: "image/svg+xml" }),
+      /* @__PURE__ */ jsx10("style", { dangerouslySetInnerHTML: { __html: props.assets.fontCss } }),
+      props.assets.preload.map((href) => /* @__PURE__ */ jsx10("link", { rel: "preload", href, as: "font", type: "font/woff2", crossOrigin: "" }, href)),
+      /* @__PURE__ */ jsx10("link", { rel: "stylesheet", href: props.assets.stylePath })
+    ] }),
+    /* @__PURE__ */ jsxs7("body", { className: clsx10("wg_shell__root"), children: [
+      /* @__PURE__ */ jsx10("div", { className: clsx10("wg_shell__browserRoot"), "data-shell-browser-root": "", "data-shell-reload": props.assets.reload ? "" : void 0, children: /* @__PURE__ */ jsx10(WgShellControls, { data: navigationData, reload: props.assets.reload }) }),
+      /* @__PURE__ */ jsx10("script", { type: "application/json", id: "fh-navigation-data", dangerouslySetInnerHTML: { __html: toNavigationJson(navigationData) } }),
+      /* @__PURE__ */ jsx10("script", { dangerouslySetInnerHTML: { __html: props.assets.browserScript } }),
+      /* @__PURE__ */ jsx10("main", { className: clsx10("wg_shell__main"), children: props.children })
     ] })
   ] });
 };
 
 // src/page/doc/pg-doc.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "hono/jsx/jsx-runtime";
 var PgDoc = (props) => {
-  return /* @__PURE__ */ jsx6(WgShell, { site: props.site, docs: props.docs, assets: props.assets, title: props.doc.data.name, current: props.doc.id, outline: props.doc.outline, children: /* @__PURE__ */ jsx6(WgProse, { html: props.doc.html }) });
+  return /* @__PURE__ */ jsx11(WgShell, { site: props.site, docs: props.docs, assets: props.assets, title: props.doc.data.name, current: props.doc.id, outline: props.doc.outline, children: /* @__PURE__ */ jsx11(WgProse, { html: props.doc.html }) });
 };
 
 // src/page/home/pg-home.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "hono/jsx/jsx-runtime";
 var PgHome = (props) => {
-  return /* @__PURE__ */ jsx7(WgShell, { site: props.site, docs: props.docs, assets: props.assets, outline: props.home?.outline, children: props.home === void 0 ? /* @__PURE__ */ jsx7(WgProse, { head: { title: props.site.title, lead: copy_home_missing } }) : /* @__PURE__ */ jsx7(WgProse, { html: props.home.html }) });
+  return /* @__PURE__ */ jsx12(WgShell, { site: props.site, docs: props.docs, assets: props.assets, outline: props.home?.outline, children: props.home === void 0 ? /* @__PURE__ */ jsx12(WgProse, { head: { title: props.site.title, lead: copy_home_missing } }) : /* @__PURE__ */ jsx12(WgProse, { html: props.home.html }) });
 };
 
-// src/app.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+// src/entry/cli/_function/create-app.tsx
+import { jsx as jsx13 } from "hono/jsx/jsx-runtime";
 var toHtml = (page) => {
-  return `<!DOCTYPE html>${renderToStaticMarkup(page)}`;
+  return html`<!DOCTYPE html>${page}`;
 };
 var createApp = (options) => {
   const app = new Hono();
-  app.get("/", (c) => c.html(toHtml(/* @__PURE__ */ jsx8(PgHome, { site: options.site, docs: options.store.docs, assets: options.assets, home: options.store.home }))));
+  app.get("/", (c) => c.html(toHtml(/* @__PURE__ */ jsx13(PgHome, { site: options.site, docs: options.store.docs, assets: options.assets, home: options.store.home }))));
   app.get(
     "/:slug{.+}/",
     ssgParams(() => options.store.docs.map((doc) => ({ slug: doc.id }))),
     (c) => {
       const doc = options.store.docs.find((entry) => entry.id === c.req.param("slug"));
-      return doc === void 0 ? c.notFound() : c.html(toHtml(/* @__PURE__ */ jsx8(PgDoc, { site: options.site, docs: options.store.docs, assets: options.assets, doc })));
+      return doc === void 0 ? c.notFound() : c.html(toHtml(/* @__PURE__ */ jsx13(PgDoc, { site: options.site, docs: options.store.docs, assets: options.assets, doc })));
     }
   );
   return app;
 };
 
-// src/constant/cli.ts
-var cli_default_command = "dev";
-var cli_default_docs_dir = ".";
-var cli_config_file_name = "for-humanity.config.mjs";
-var cli_dev_port = 4321;
-var cli_reload_delay_ms = 150;
-
-// src/constant/font.ts
-var font_sans_css = "src/asset/font/pretendard/pretendardvariable-dynamic-subset.css";
-var font_mono_css = "src/asset/font/jetbrains-mono/jetbrains-mono.css";
-var font_brand_css = "src/asset/font/architects-daughter/architects-daughter.css";
-var font_sans_preload_file = "PretendardVariable.subset.91.woff2";
-var font_display_strategy = "optional";
-var font_hash_length = 12;
-var font_cache_control = "public, max-age=31536000, immutable";
-
-// src/constant/site.ts
-var site_config_absent = {};
-var site_navigation_default = [];
+// src/entry/cli/_function/create-dev-app.ts
+import { readFile } from "node:fs/promises";
+import { extname } from "node:path";
+import { Hono as Hono2 } from "hono";
+import { streamSSE } from "hono/streaming";
+var createDevApp = (options) => {
+  const app = new Hono2();
+  const handleAsset = async (c) => {
+    const file = options.files.get(c.req.path);
+    if (file === void 0) {
+      return c.notFound();
+    }
+    c.header("content-type", asset_content_types[extname(file).toLowerCase()] ?? asset_content_type_default);
+    if (extname(file) === ".woff2") {
+      c.header("Cache-Control", font_cache_control);
+    }
+    return c.body(await readFile(file));
+  };
+  app.get(
+    asset_reload_path,
+    (c) => streamSSE(
+      c,
+      (stream) => new Promise((done) => {
+        const handleChange = async () => {
+          await stream.writeSSE({ data: "change" });
+          done();
+        };
+        options.reload.once("change", handleChange);
+        stream.onAbort(() => {
+          options.reload.off("change", handleChange);
+          done();
+        });
+      })
+    )
+  );
+  app.get(`/${asset_dir}/*`, handleAsset);
+  app.get(asset_favicon_path, handleAsset);
+  app.all("/*", (c) => options.pages.fetch(c.req.raw, c.env));
+  return app;
+};
 
-// src/content/create-processor.ts
+// src/entry/cli/_function/create-processor/create-processor.ts
 import rehypeShiki from "@shikijs/rehype";
 import rehypeRaw from "rehype-raw";
 import rehypeStringify from "rehype-stringify";
@@ -1047,9 +1849,9 @@ var remarkUnknownDirectives = () => (tree, file) => {
   });
 };
 
-// src/content/rehype-assets.ts
+// src/entry/cli/_function/create-processor/_rehype-assets.ts
 import { existsSync as existsSync2, realpathSync, statSync } from "node:fs";
-import { dirname as dirname2, extname, isAbsolute, relative as relative2, resolve as resolve2, sep } from "node:path";
+import { dirname as dirname2, extname as extname2, isAbsolute, relative as relative2, resolve as resolve2, sep } from "node:path";
 import { visit as visit7 } from "unist-util-visit";
 
 // src/util/file/to-asset-path.ts
@@ -1061,7 +1863,7 @@ var toAssetPath = (options) => {
   return `${posix2.dirname(options.path)}/${posix2.basename(options.path, extension)}.${createHash("sha256").update(readFileSync(options.file)).digest("hex")}${extension}`;
 };
 
-// src/content/rehype-assets.ts
+// src/entry/cli/_function/create-processor/_rehype-assets.ts
 var rehypeAssets = (options) => (tree, file) => {
   visit7(tree, "element", (node) => {
     const property = node.tagName === "img" ? "src" : "href";
@@ -1074,7 +1876,7 @@ var rehypeAssets = (options) => (tree, file) => {
       return;
     }
     const path = decodeURIComponent(match[1]);
-    const extension = extname(path).toLowerCase();
+    const extension = extname2(path).toLowerCase();
     if (!asset_media_extensions.has(extension)) {
       if (node.tagName === "img") {
         file.fail(`${copy_error_asset}: \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uB294 \uC774\uBBF8\uC9C0 \uD615\uC2DD \xB7 ${url}`, node);
@@ -1100,7 +1902,7 @@ var rehypeAssets = (options) => (tree, file) => {
   });
 };
 
-// src/content/rehype-heading-ids.ts
+// src/entry/cli/_function/create-processor/_rehype-heading-ids.ts
 import Slugger from "github-slugger";
 import { toString as toPlainText3 } from "hast-util-to-string";
 import { visit as visit8 } from "unist-util-visit";
@@ -1122,7 +1924,7 @@ var rehypeHeadingIds = () => (tree, file) => {
   }
 };
 
-// src/content/remark-report.ts
+// src/entry/cli/_function/create-processor/_remark-report.ts
 import { relative as relative3 } from "node:path";
 var remarkReport = (options) => (_tree, file) => {
   const path = relative3(options.root, file.path);
@@ -1131,13 +1933,13 @@ var remarkReport = (options) => (_tree, file) => {
   }
 };
 
-// src/content/create-processor.ts
+// src/entry/cli/_function/create-processor/create-processor.ts
 var createProcessor = (options) => {
   return unified().use(remarkParse).use(remarkFrontmatter, ["yaml"]).use(remarkGfm).use(remarkSmartypants).use(remarkDirective).use(remarkBlocks).use(remarkParts).use(remarkFlow).use(remarkStatus, { status: options.site.status }).use(remarkSwatch).use(remarkLinks, { root: options.root }).use(remarkUnknownDirectives).use(remarkReport, { root: options.root }).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeShiki, { theme: createCssVariablesTheme({ name: "for-humanity", variablePrefix: "--app-code-" }) }).use(rehypeHead).use(rehypeHeadingIds).use(rehypeSections).use(rehypeTables).use(rehypeRaw).use(rehypeAssets, { root: options.root, files: options.files ?? /* @__PURE__ */ new Map() }).use(rehypeStringify, { allowDangerousHtml: true });
 };
 
-// src/content/read-docs.ts
-import { readdir, readFile } from "node:fs/promises";
+// src/entry/cli/_function/read-docs.ts
+import { readdir, readFile as readFile2 } from "node:fs/promises";
 import { join, posix as posix3, sep as sep2 } from "node:path";
 import { VFile } from "vfile";
 import { parse as parseYaml } from "yaml";
@@ -1184,7 +1986,7 @@ var docDataSchema = z2.object({
   order: z2.number().int().nonnegative().default(doc_order_default)
 });
 
-// src/content/read-docs.ts
+// src/entry/cli/_function/read-docs.ts
 var readDocs = async (options) => {
   const paths = (await readdir(options.root, { recursive: true })).filter(
     (path) => /\.mdx?$/i.test(path) && !/^(readme|agents|claude)\.md$/i.test(path) && !path.split(sep2).includes("node_modules") && !path.startsWith(`dist${sep2}`)
@@ -1196,7 +1998,7 @@ var readDocs = async (options) => {
       if (segments.some((segment) => segment === "" || segment === "." || segment === ".." || segment === "index.html") || /[#?%*:\\]/.test(id) || /[\p{Cc}]/u.test(id) || segments[0] === asset_dir || segments[0] === asset_favicon_path.slice(1)) {
         throw new Error(`${copy_error_doc_id}: ${path}`);
       }
-      const source = await readFile(join(options.root, path), "utf8");
+      const source = await readFile2(join(options.root, path), "utf8");
       const file = new VFile({ value: source.replace(/^\uFEFF/, ""), path: join(options.root, path) });
       const tree = options.processor.parse(file);
       const frontmatter = tree.children[0];
@@ -1246,8 +2048,8 @@ var readDocs = async (options) => {
   });
 };
 
-// src/content/read-home.ts
-import { readdir as readdir2, readFile as readFile2 } from "node:fs/promises";
+// src/entry/cli/_function/read-home.ts
+import { readdir as readdir2, readFile as readFile3 } from "node:fs/promises";
 import { join as join2 } from "node:path";
 import { VFile as VFile2 } from "vfile";
 var readHome = async (options) => {
@@ -1260,52 +2062,11 @@ var readHome = async (options) => {
   }
   const path = join2(options.root, paths[0]);
   const fh = { headings: [], sections: [] };
-  const file = new VFile2({ value: (await readFile2(path, "utf8")).replace(/^\uFEFF/, ""), path, data: { fh } });
+  const file = new VFile2({ value: (await readFile3(path, "utf8")).replace(/^\uFEFF/, ""), path, data: { fh } });
   await options.processor.process(file);
   return { html: String(file), outline: { headings: fh.headings, sections: fh.sections } };
 };
 
-// src/dev.ts
-import { readFile as readFile3 } from "node:fs/promises";
-import { extname as extname2 } from "node:path";
-import { Hono as Hono2 } from "hono";
-import { streamSSE } from "hono/streaming";
-var createDevApp = (options) => {
-  const app = new Hono2();
-  const handleAsset = async (c) => {
-    const file = options.files.get(c.req.path);
-    if (file === void 0) {
-      return c.notFound();
-    }
-    c.header("content-type", asset_content_types[extname2(file).toLowerCase()] ?? asset_content_type_default);
-    if (extname2(file) === ".woff2") {
-      c.header("Cache-Control", font_cache_control);
-    }
-    return c.body(await readFile3(file));
-  };
-  app.get(
-    asset_reload_path,
-    (c) => streamSSE(
-      c,
-      (stream) => new Promise((done) => {
-        const handleChange = async () => {
-          await stream.writeSSE({ data: "change" });
-          done();
-        };
-        options.reload.once("change", handleChange);
-        stream.onAbort(() => {
-          options.reload.off("change", handleChange);
-          done();
-        });
-      })
-    )
-  );
-  app.get(`/${asset_dir}/*`, handleAsset);
-  app.get(asset_favicon_path, handleAsset);
-  app.all("/*", (c) => options.pages.fetch(c.req.raw, c.env));
-  return app;
-};
-
 // src/type/site-config.ts
 import { z as z3 } from "zod";
 
@@ -1407,7 +2168,7 @@ var toFontCss = (options) => {
   return { css, files };
 };
 
-// src/cli.ts
+// src/entry/cli/cli.ts
 var commands = ["dev", "build", "preview"];
 var [command = cli_default_command, docsDir = cli_default_docs_dir] = process.argv.slice(2);
 var main = async () => {
@@ -1448,10 +2209,9 @@ var main = async () => {
   }
   const fontCss = [sans.css, mono.css, brand.css].join("\n");
   const stylePath = toAssetPath({ path: asset_style_path, file: join4(kitRoot, "dist/cli.css") });
-  const clientPath = toAssetPath({ path: asset_client_path, file: join4(kitRoot, "dist/client.js") });
+  const browserScript = readFileSync3(join4(kitRoot, "dist/browser.js"), "utf8");
   const kitFiles = new Map([
     [stylePath, join4(kitRoot, "dist/cli.css")],
-    [clientPath, join4(kitRoot, "dist/client.js")],
     [asset_favicon_path, join4(kitRoot, "src/asset/favicon.svg")],
     ...sans.files,
     ...mono.files,
@@ -1464,7 +2224,7 @@ var main = async () => {
   const app = createApp({
     site: siteConfig,
     store,
-    assets: { stylePath, clientPath, fontCss, preload: [...brand.files.keys(), sansPreload[0], ...mono.files.keys()], reload: command === "dev" }
+    assets: { stylePath, browserScript, fontCss, preload: [...brand.files.keys(), sansPreload[0], ...mono.files.keys()], reload: command === "dev" }
   });
   if (command === "build") {
     await rm(outDir, { recursive: true, force: true });