@openlaboratory/open-doc 0.1.0

package/app/node_modules/.vite/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/app/node_modules/.vite/deps/react-dom.js

@@ -0,0 +1,6 @@
+import {
+  require_react_dom
+} from "./chunk-FEZZJEG2.js";
+import "./chunk-55ZOATU5.js";
+import "./chunk-5WRI5ZAA.js";
+export default require_react_dom();

package/app/node_modules/.vite/deps/react-dom.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/app/node_modules/.vite/deps/react.js

@@ -0,0 +1,5 @@
+import {
+  require_react
+} from "./chunk-55ZOATU5.js";
+import "./chunk-5WRI5ZAA.js";
+export default require_react();

package/app/node_modules/.vite/deps/react.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/app/node_modules/.vite/deps/react_jsx-dev-runtime.js

@@ -0,0 +1,39 @@
+import {
+  __commonJS
+} from "./chunk-5WRI5ZAA.js";
+
+// ../node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react-jsx-dev-runtime.production.min.js
+var require_react_jsx_dev_runtime_production_min = __commonJS({
+  "../node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react-jsx-dev-runtime.production.min.js"(exports) {
+    "use strict";
+    var a = Symbol.for("react.fragment");
+    exports.Fragment = a;
+    exports.jsxDEV = void 0;
+  }
+});
+
+// ../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-dev-runtime.js
+var require_jsx_dev_runtime = __commonJS({
+  "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-dev-runtime.js"(exports, module) {
+    if (true) {
+      module.exports = require_react_jsx_dev_runtime_production_min();
+    } else {
+      module.exports = null;
+    }
+  }
+});
+export default require_jsx_dev_runtime();
+/*! Bundled license information:
+
+react/cjs/react-jsx-dev-runtime.production.min.js:
+  (**
+   * @license React
+   * react-jsx-dev-runtime.production.min.js
+   *
+   * Copyright (c) Facebook, Inc. and its affiliates.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   *)
+*/
+//# sourceMappingURL=react_jsx-dev-runtime.js.map

package/app/node_modules/.vite/deps/react_jsx-dev-runtime.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react-jsx-dev-runtime.production.min.js", "../../../../../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-dev-runtime.js"],
+  "sourcesContent": ["/**\n * @license React\n * react-jsx-dev-runtime.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var a=Symbol.for(\"react.fragment\");exports.Fragment=a;exports.jsxDEV=void 0;\n", "'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n  module.exports = require('./cjs/react-jsx-dev-runtime.production.min.js');\n} else {\n  module.exports = require('./cjs/react-jsx-dev-runtime.development.js');\n}\n"],
+  "mappings": ";;;;;AAAA;AAAA;AAAA;AASa,QAAI,IAAE,OAAO,IAAI,gBAAgB;AAAE,YAAQ,WAAS;AAAE,YAAQ,SAAO;AAAA;AAAA;;;ACTlF;AAAA;AAEA,QAAI,MAAuC;AACzC,aAAO,UAAU;AAAA,IACnB,OAAO;AACL,aAAO,UAAU;AAAA,IACnB;AAAA;AAAA;",
+  "names": []
+}

package/app/node_modules/.vite/deps/react_jsx-runtime.js

@@ -0,0 +1,57 @@
+import {
+  require_react
+} from "./chunk-55ZOATU5.js";
+import {
+  __commonJS
+} from "./chunk-5WRI5ZAA.js";
+
+// ../node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react-jsx-runtime.production.min.js
+var require_react_jsx_runtime_production_min = __commonJS({
+  "../node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react-jsx-runtime.production.min.js"(exports) {
+    "use strict";
+    var f = require_react();
+    var k = Symbol.for("react.element");
+    var l = Symbol.for("react.fragment");
+    var m = Object.prototype.hasOwnProperty;
+    var n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
+    var p = { key: true, ref: true, __self: true, __source: true };
+    function q(c, a, g) {
+      var b, d = {}, e = null, h = null;
+      void 0 !== g && (e = "" + g);
+      void 0 !== a.key && (e = "" + a.key);
+      void 0 !== a.ref && (h = a.ref);
+      for (b in a) m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
+      if (c && c.defaultProps) for (b in a = c.defaultProps, a) void 0 === d[b] && (d[b] = a[b]);
+      return { $$typeof: k, type: c, key: e, ref: h, props: d, _owner: n.current };
+    }
+    exports.Fragment = l;
+    exports.jsx = q;
+    exports.jsxs = q;
+  }
+});
+
+// ../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js
+var require_jsx_runtime = __commonJS({
+  "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"(exports, module) {
+    if (true) {
+      module.exports = require_react_jsx_runtime_production_min();
+    } else {
+      module.exports = null;
+    }
+  }
+});
+export default require_jsx_runtime();
+/*! Bundled license information:
+
+react/cjs/react-jsx-runtime.production.min.js:
+  (**
+   * @license React
+   * react-jsx-runtime.production.min.js
+   *
+   * Copyright (c) Facebook, Inc. and its affiliates.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   *)
+*/
+//# sourceMappingURL=react_jsx-runtime.js.map

package/app/node_modules/.vite/deps/react_jsx-runtime.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react-jsx-runtime.production.min.js", "../../../../../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js"],
+  "sourcesContent": ["/**\n * @license React\n * react-jsx-runtime.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var f=require(\"react\"),k=Symbol.for(\"react.element\"),l=Symbol.for(\"react.fragment\"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};\nfunction q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=\"\"+g);void 0!==a.key&&(e=\"\"+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l;exports.jsx=q;exports.jsxs=q;\n", "'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n  module.exports = require('./cjs/react-jsx-runtime.production.min.js');\n} else {\n  module.exports = require('./cjs/react-jsx-runtime.development.js');\n}\n"],
+  "mappings": ";;;;;;;;AAAA;AAAA;AAAA;AASa,QAAI,IAAE;AAAN,QAAuB,IAAE,OAAO,IAAI,eAAe;AAAnD,QAAqD,IAAE,OAAO,IAAI,gBAAgB;AAAlF,QAAoF,IAAE,OAAO,UAAU;AAAvG,QAAsH,IAAE,EAAE,mDAAmD;AAA7K,QAA+L,IAAE,EAAC,KAAI,MAAG,KAAI,MAAG,QAAO,MAAG,UAAS,KAAE;AAClP,aAAS,EAAE,GAAE,GAAE,GAAE;AAAC,UAAI,GAAE,IAAE,CAAC,GAAE,IAAE,MAAK,IAAE;AAAK,iBAAS,MAAI,IAAE,KAAG;AAAG,iBAAS,EAAE,QAAM,IAAE,KAAG,EAAE;AAAK,iBAAS,EAAE,QAAM,IAAE,EAAE;AAAK,WAAI,KAAK,EAAE,GAAE,KAAK,GAAE,CAAC,KAAG,CAAC,EAAE,eAAe,CAAC,MAAI,EAAE,CAAC,IAAE,EAAE,CAAC;AAAG,UAAG,KAAG,EAAE,aAAa,MAAI,KAAK,IAAE,EAAE,cAAa,EAAE,YAAS,EAAE,CAAC,MAAI,EAAE,CAAC,IAAE,EAAE,CAAC;AAAG,aAAM,EAAC,UAAS,GAAE,MAAK,GAAE,KAAI,GAAE,KAAI,GAAE,OAAM,GAAE,QAAO,EAAE,QAAO;AAAA,IAAC;AAAC,YAAQ,WAAS;AAAE,YAAQ,MAAI;AAAE,YAAQ,OAAK;AAAA;AAAA;;;ACV1W;AAAA;AAEA,QAAI,MAAuC;AACzC,aAAO,UAAU;AAAA,IACnB,OAAO;AACL,aAAO,UAAU;AAAA,IACnB;AAAA;AAAA;",
+  "names": []
+}

package/app/src/components/DocsMobileNav.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useState } from 'react'
+import type { DocSection } from '../lib/navigation'
+import { withBase } from '../lib/withBase'
+
+interface Props {
+  navigation: DocSection[]
+  currentSlug: string
+}
+
+/** Mobile-only trigger bar + slide-in navigation drawer. */
+export function DocsMobileNav({ navigation, currentSlug }: Props) {
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    const handler = () => setOpen(false)
+    document.addEventListener('astro:page-load', handler)
+    return () => document.removeEventListener('astro:page-load', handler)
+  }, [])
+
+  useEffect(() => {
+    document.body.style.overflow = open ? 'hidden' : ''
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [open])
+
+  const allPages = navigation.flatMap((s) => s.pages)
+  const currentPage = allPages.find((p) => p.slug === currentSlug)
+
+  return (
+    <>
+      <div className="sticky top-[57px] z-30 flex items-center border-b border-foreground/[0.08] bg-surface-sidebar px-4 py-2.5 lg:hidden">
+        <button
+          onClick={() => setOpen(true)}
+          className="flex items-center gap-2 text-sm text-foreground/60 transition-colors hover:text-foreground/90"
+          aria-label="Open navigation"
+        >
+          <svg
+            className="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h7" />
+          </svg>
+          <span>Menu</span>
+        </button>
+        {currentPage && (
+          <>
+            <svg
+              className="mx-2 h-4 w-4 text-foreground/25"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={1.5}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+            </svg>
+            <span className="truncate text-sm text-foreground/80">{currentPage.title}</span>
+          </>
+        )}
+      </div>
+
+      {open && (
+        <div className="fixed inset-0 z-50 lg:hidden">
+          <div
+            className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+            onClick={() => setOpen(false)}
+          />
+          <aside className="absolute inset-y-0 left-0 w-72 overflow-y-auto bg-surface-sidebar shadow-2xl">
+            <div className="flex items-center justify-between border-b border-foreground/[0.08] px-4 py-3">
+              <span className="text-sm font-semibold text-foreground/90">Documentation</span>
+              <button
+                onClick={() => setOpen(false)}
+                className="flex h-7 w-7 items-center justify-center rounded-md text-foreground/40 transition-colors hover:bg-foreground/[0.08] hover:text-foreground/80"
+                aria-label="Close navigation"
+              >
+                <svg
+                  className="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <nav className="flex flex-col gap-6 px-4 py-5">
+              {navigation.map((section) => (
+                <div key={section.label} className="flex flex-col gap-1">
+                  <p className="mb-1 px-2 text-[11px] font-semibold uppercase tracking-widest text-foreground/40">
+                    {section.label}
+                  </p>
+                  {section.pages.map((page) => {
+                    const isActive = currentSlug === page.slug
+                    return (
+                      <a
+                        key={page.slug}
+                        href={withBase(page.slug)}
+                        onClick={() => setOpen(false)}
+                        className={[
+                          'flex items-center rounded-md px-2 py-1.5 text-sm transition-all',
+                          isActive
+                            ? 'bg-foreground/[0.08] font-medium text-foreground'
+                            : 'text-foreground/60 hover:bg-foreground/[0.05] hover:text-foreground/90',
+                        ].join(' ')}
+                        aria-current={isActive ? 'page' : undefined}
+                      >
+                        {page.title}
+                      </a>
+                    )
+                  })}
+                </div>
+              ))}
+            </nav>
+          </aside>
+        </div>
+      )}
+    </>
+  )
+}

package/app/src/components/DocsSearch.tsx

@@ -0,0 +1,315 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import Fuse from 'fuse.js'
+import type { DocSection, DocPage } from '../lib/navigation'
+import { withBase } from '../lib/withBase'
+
+interface Props {
+  navigation: DocSection[]
+}
+
+interface Result {
+  url: string
+  title: string
+  excerpt?: string
+  /** Whether `excerpt` contains pre-highlighted HTML (Pagefind) or plain text. */
+  html?: boolean
+}
+
+function isEditableTarget(target: EventTarget | null): boolean {
+  const el = target as HTMLElement | null
+  if (!el) return false
+  return (
+    el.tagName === 'INPUT' ||
+    el.tagName === 'TEXTAREA' ||
+    el.tagName === 'SELECT' ||
+    el.isContentEditable
+  )
+}
+
+/**
+ * ⌘K search modal. Uses Pagefind full-text search against the built site, and
+ * gracefully falls back to a lightweight title/description search (Fuse.js) when
+ * the Pagefind index isn't available yet — e.g. during `open-doc dev` before a
+ * build has been run.
+ */
+export function DocsSearch({ navigation }: Props) {
+  const allPages = useMemo<DocPage[]>(() => navigation.flatMap((s) => s.pages), [navigation])
+  const fuse = useMemo(
+    () => new Fuse(allPages, { keys: ['title', 'description'], threshold: 0.4 }),
+    [allPages],
+  )
+
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState<Result[]>([])
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [fullText, setFullText] = useState(true)
+
+  const inputRef = useRef<HTMLInputElement>(null)
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const pagefindRef = useRef<any>(null)
+  const triedPagefind = useRef(false)
+  const requestId = useRef(0)
+  const wasOpen = useRef(false)
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        setOpen(true)
+      } else if (e.key === '/' && !isEditableTarget(e.target)) {
+        e.preventDefault()
+        setOpen(true)
+      } else if (e.key === 'Escape') {
+        setOpen(false)
+      }
+    }
+    window.addEventListener('keydown', handleKey)
+    return () => window.removeEventListener('keydown', handleKey)
+  }, [])
+
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 50)
+      setQuery('')
+      setResults([])
+      setSelectedIndex(0)
+    } else if (wasOpen.current) {
+      // Restore focus to the trigger when the dialog closes.
+      triggerRef.current?.focus()
+    }
+    wasOpen.current = open
+  }, [open])
+
+  async function loadPagefind(): Promise<any | null> {
+    if (pagefindRef.current) return pagefindRef.current
+    if (triedPagefind.current) return null
+    triedPagefind.current = true
+    try {
+      const url = withBase('pagefind/pagefind.js')
+      const mod = await import(/* @vite-ignore */ url)
+      await mod.init?.()
+      pagefindRef.current = mod
+      return mod
+    } catch {
+      setFullText(false)
+      return null
+    }
+  }
+
+  useEffect(() => {
+    const id = ++requestId.current
+    const q = query.trim()
+    if (!q) {
+      setResults([])
+      setSelectedIndex(0)
+      return
+    }
+
+    void (async () => {
+      const pf = await loadPagefind()
+      if (id !== requestId.current) return
+
+      if (pf) {
+        const search = await pf.search(q)
+        const data = await Promise.all(search.results.slice(0, 8).map((r: any) => r.data()))
+        if (id !== requestId.current) return
+        setResults(
+          data.map((d: any) => ({
+            url: d.url,
+            title: d.meta?.title || d.url,
+            excerpt: d.excerpt,
+            html: true,
+          })),
+        )
+      } else {
+        setResults(
+          fuse.search(q).map((r) => ({
+            url: withBase(r.item.slug),
+            title: r.item.title,
+            excerpt: r.item.description,
+          })),
+        )
+      }
+      setSelectedIndex(0)
+    })()
+  }, [query, fuse])
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setSelectedIndex((i) => Math.min(i + 1, results.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setSelectedIndex((i) => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter') {
+      const result = results[selectedIndex]
+      if (result) {
+        window.location.href = result.url
+        setOpen(false)
+      }
+    }
+  }
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        onClick={() => setOpen(true)}
+        className="flex w-full items-center gap-2 rounded-md border border-foreground/[0.1] bg-foreground/[0.04] px-3 py-2 text-sm text-foreground/45 transition-colors hover:border-foreground/[0.16] hover:bg-foreground/[0.07] hover:text-foreground/60"
+        aria-label="Search documentation"
+      >
+        <svg
+          className="h-3.5 w-3.5 shrink-0"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+          />
+        </svg>
+        <span className="flex-1 text-left">Search docs…</span>
+        <kbd className="hidden rounded border border-foreground/[0.12] bg-foreground/[0.05] px-1.5 py-0.5 font-mono text-[10px] leading-none text-foreground/40 sm:block">
+          ⌘K
+        </kbd>
+      </button>
+
+      {open && (
+        <div
+          className="fixed inset-0 z-[100] flex items-start justify-center px-4 pt-[15vh]"
+          onClick={(e) => {
+            if (!dialogRef.current?.contains(e.target as Node)) setOpen(false)
+          }}
+        >
+          <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+
+          <div
+            ref={dialogRef}
+            className="relative w-full max-w-xl overflow-hidden rounded-xl border border-foreground/[0.12] bg-surface-raised shadow-2xl"
+            role="dialog"
+            aria-modal="true"
+            aria-label="Search documentation"
+          >
+            <div className="flex items-center gap-3 border-b border-foreground/[0.08] px-4 py-3">
+              <svg
+                className="h-4 w-4 shrink-0 text-foreground/40"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                />
+              </svg>
+              <input
+                ref={inputRef}
+                type="text"
+                placeholder="Search documentation…"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                onKeyDown={handleKeyDown}
+                role="combobox"
+                aria-expanded={results.length > 0}
+                aria-controls="od-search-results"
+                aria-activedescendant={
+                  results[selectedIndex] ? `od-search-option-${selectedIndex}` : undefined
+                }
+                className="flex-1 bg-transparent text-sm text-foreground placeholder-foreground/30 outline-none"
+              />
+              <button
+                onClick={() => setOpen(false)}
+                className="rounded border border-foreground/[0.1] px-1.5 py-0.5 text-[11px] text-foreground/40 transition-colors hover:text-foreground/70"
+              >
+                Esc
+              </button>
+            </div>
+
+            <div
+              className="max-h-[360px] overflow-y-auto py-2"
+              id="od-search-results"
+              role="listbox"
+            >
+              {query.trim() && results.length === 0 ? (
+                <p className="px-4 py-8 text-center text-sm text-foreground/40">
+                  No results for &ldquo;{query}&rdquo;
+                </p>
+              ) : (
+                results.map((result, i) => {
+                  const isSelected = i === selectedIndex
+                  return (
+                    <a
+                      key={result.url + i}
+                      id={`od-search-option-${i}`}
+                      role="option"
+                      aria-selected={isSelected}
+                      href={result.url}
+                      onClick={() => setOpen(false)}
+                      onMouseEnter={() => setSelectedIndex(i)}
+                      className={[
+                        'flex items-start gap-3 px-4 py-2.5 transition-colors',
+                        isSelected ? 'bg-foreground/[0.08]' : 'hover:bg-foreground/[0.04]',
+                      ].join(' ')}
+                    >
+                      <svg
+                        className="mt-0.5 h-4 w-4 shrink-0 text-foreground/30"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        strokeWidth={2}
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                        />
+                      </svg>
+                      <div className="min-w-0">
+                        <div className="text-sm font-medium leading-snug text-foreground/90">
+                          {result.title}
+                        </div>
+                        {result.excerpt &&
+                          (result.html ? (
+                            <div
+                              className="search-excerpt mt-0.5 line-clamp-2 text-xs text-foreground/45"
+                              dangerouslySetInnerHTML={{ __html: result.excerpt }}
+                            />
+                          ) : (
+                            <div className="mt-0.5 truncate text-xs text-foreground/45">
+                              {result.excerpt}
+                            </div>
+                          ))}
+                      </div>
+                    </a>
+                  )
+                })
+              )}
+            </div>
+
+            <div className="flex items-center gap-4 border-t border-foreground/[0.06] px-4 py-2 text-[10px] text-foreground/30">
+              <span className="flex items-center gap-1">
+                <kbd className="font-mono">↑↓</kbd> navigate
+              </span>
+              <span className="flex items-center gap-1">
+                <kbd className="font-mono">↵</kbd> open
+              </span>
+              <span className="flex items-center gap-1">
+                <kbd className="font-mono">esc</kbd> close
+              </span>
+              {!fullText && (
+                <span className="ml-auto">Title search · run a build for full-text</span>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

package/app/src/components/DocsSidebar.astro

@@ -0,0 +1,46 @@
+---
+import type { DocSection } from '../lib/navigation'
+import { withBase } from '../lib/withBase'
+
+interface Props {
+  navigation: DocSection[]
+  currentSlug: string
+}
+
+const { navigation, currentSlug } = Astro.props
+---
+
+<nav class="flex flex-col gap-6 px-4 py-6" aria-label="Documentation navigation">
+  {
+    navigation.map((section) => (
+      <div class="flex flex-col gap-1">
+        <p class="mb-1 px-2 text-[11px] font-semibold uppercase tracking-widest text-foreground/40">
+          {section.label}
+        </p>
+        {section.pages.map((page) => {
+          const isActive = currentSlug === page.slug
+          return (
+            <a
+              href={withBase(page.slug)}
+              class:list={[
+                'group flex items-center rounded-md px-2 py-1.5 text-sm transition-all',
+                isActive
+                  ? 'bg-foreground/[0.08] text-foreground'
+                  : 'text-foreground/60 hover:bg-foreground/[0.05] hover:text-foreground/90',
+              ]}
+              aria-current={isActive ? 'page' : undefined}
+            >
+              <span
+                class:list={[
+                  'mr-2 h-1 w-1 shrink-0 rounded-full',
+                  isActive ? 'bg-foreground/70' : 'bg-transparent group-hover:bg-foreground/30',
+                ]}
+              />
+              {page.title}
+            </a>
+          )
+        })}
+      </div>
+    ))
+  }
+</nav>