npm - create-neutron - Versions diffs - 0.1.0 - Mend

create-neutron 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

package/LICENSE +21 -0
package/README.md +25 -0
package/dist/index.d.ts +3 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +201 -0
package/dist/index.js.map +1 -0
package/package.json +45 -0
package/templates/app/_gitignore +3 -0
package/templates/app/index.html +12 -0
package/templates/app/neutron.config.ts +5 -0
package/templates/app/package.json +24 -0
package/templates/app/src/main.tsx +5 -0
package/templates/app/src/routes/_layout.tsx +18 -0
package/templates/app/src/routes/api/session/refresh.tsx +28 -0
package/templates/app/src/routes/app/dashboard.tsx +39 -0
package/templates/app/src/routes/app/settings.tsx +68 -0
package/templates/app/src/routes/index.tsx +26 -0
package/templates/app/src/routes/login.tsx +14 -0
package/templates/app/src/routes/protected.tsx +53 -0
package/templates/app/src/routes/users/[id].tsx +26 -0
package/templates/app/tsconfig.json +14 -0
package/templates/app/vite.config.ts +7 -0
package/templates/basic/_gitignore +3 -0
package/templates/basic/index.html +12 -0
package/templates/basic/neutron.config.ts +5 -0
package/templates/basic/package.json +24 -0
package/templates/basic/src/main.tsx +5 -0
package/templates/basic/src/routes/_layout.tsx +16 -0
package/templates/basic/src/routes/index.tsx +19 -0
package/templates/basic/src/routes/users/[id].tsx +26 -0
package/templates/basic/tsconfig.json +14 -0
package/templates/basic/vite.config.ts +7 -0
package/templates/docs/_gitignore +3 -0
package/templates/docs/index.html +12 -0
package/templates/docs/neutron.config.ts +8 -0
package/templates/docs/package.json +22 -0
package/templates/docs/public/favicon.svg +1 -0
package/templates/docs/src/components/Breadcrumbs.tsx +47 -0
package/templates/docs/src/components/Callout.tsx +40 -0
package/templates/docs/src/components/Card.tsx +31 -0
package/templates/docs/src/components/CopyButton.tsx +35 -0
package/templates/docs/src/components/Footer.tsx +72 -0
package/templates/docs/src/components/Search.tsx +139 -0
package/templates/docs/src/components/Sidebar.tsx +59 -0
package/templates/docs/src/components/SidebarToggle.tsx +47 -0
package/templates/docs/src/components/Steps.tsx +9 -0
package/templates/docs/src/components/Tabs.tsx +35 -0
package/templates/docs/src/components/ThemeToggle.tsx +45 -0
package/templates/docs/src/components/Toc.tsx +36 -0
package/templates/docs/src/components/TocTracker.tsx +35 -0
package/templates/docs/src/content/config.ts +13 -0
package/templates/docs/src/content/docs/getting-started/installation.mdx +18 -0
package/templates/docs/src/content/docs/getting-started/quick-start.mdx +19 -0
package/templates/docs/src/content/docs/index.mdx +13 -0
package/templates/docs/src/lib/pagination.ts +39 -0
package/templates/docs/src/lib/sidebar.ts +100 -0
package/templates/docs/src/main.tsx +8 -0
package/templates/docs/src/routes/_layout.tsx +27 -0
package/templates/docs/src/routes/docs/[...slug].tsx +85 -0
package/templates/docs/src/routes/docs/_layout.tsx +47 -0
package/templates/docs/src/styles/code.css +188 -0
package/templates/docs/src/styles/components.css +264 -0
package/templates/docs/src/styles/docs.css +416 -0
package/templates/docs/src/styles/prose.css +224 -0
package/templates/docs/src/styles/search.css +225 -0
package/templates/docs/tsconfig.json +19 -0
package/templates/docs/vite.config.ts +6 -0
package/templates/full/_gitignore +3 -0
package/templates/full/index.html +12 -0
package/templates/full/neutron.config.ts +5 -0
package/templates/full/package.json +24 -0
package/templates/full/src/components/Counter.tsx +13 -0
package/templates/full/src/main.tsx +5 -0
package/templates/full/src/routes/(marketing)/pricing.tsx +15 -0
package/templates/full/src/routes/_layout.tsx +17 -0
package/templates/full/src/routes/app/dashboard.tsx +28 -0
package/templates/full/src/routes/app/settings.tsx +42 -0
package/templates/full/src/routes/index.tsx +31 -0
package/templates/full/src/routes/users/[id].tsx +26 -0
package/templates/full/tsconfig.json +14 -0
package/templates/full/vite.config.ts +7 -0
package/templates/marketing/_gitignore +3 -0
package/templates/marketing/index.html +12 -0
package/templates/marketing/neutron.config.ts +5 -0
package/templates/marketing/package.json +24 -0
package/templates/marketing/src/components/Counter.tsx +14 -0
package/templates/marketing/src/main.tsx +5 -0
package/templates/marketing/src/routes/_layout.tsx +16 -0
package/templates/marketing/src/routes/about.tsx +10 -0
package/templates/marketing/src/routes/blog/[slug].tsx +34 -0
package/templates/marketing/src/routes/blog/index.tsx +27 -0
package/templates/marketing/src/routes/index.tsx +26 -0
package/templates/marketing/src/routes/users/index.tsx +10 -0
package/templates/marketing/tsconfig.json +14 -0
package/templates/marketing/vite.config.ts +7 -0

package/templates/app/vite.config.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import preact from "@preact/preset-vite";
+import { neutronPlugin } from "@neutron-build/core/vite";
+export default defineConfig({
+  plugins: [preact(), neutronPlugin()],
+});

package/templates/basic/_gitignore ADDED Viewed

@@ -0,0 +1,3 @@
+node_modules
+dist
+.neutron

package/templates/basic/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__PROJECT_NAME__</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+  </html>

package/templates/basic/neutron.config.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { defineConfig } from "@neutron-build/core";
+export default defineConfig({
+  runtime: "__RUNTIME__",
+});

package/templates/basic/package.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "neutron dev",
+    "build": "neutron build",
+    "build:vercel": "neutron build --preset vercel",
+    "start": "neutron start",
+    "preview": "neutron preview",
+    "release:check": "neutron release-check --preset vercel"
+  },
+  "dependencies": {
+    "@neutron-build/core": "__NEUTRON_VERSION__",
+    "@neutron-build/cli": "__NEUTRON_CLI_VERSION__",
+    "preact": "^10.25.4"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.9.4",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7"
+  }
+}

package/templates/basic/src/main.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { init, registerRoutes } from "@neutron-build/core/client";
+import { routes } from "virtual:neutron/routes";
+registerRoutes(routes);
+void init();

package/templates/basic/src/routes/_layout.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+export default function Layout(props: { children?: unknown }) {
+  return (
+    <div style="max-width: 900px; margin: 0 auto; padding: 2rem; font-family: system-ui, sans-serif;">
+      <header style="margin-bottom: 1.5rem;">
+        <h1 style="margin: 0;">__PROJECT_NAME__</h1>
+        <p style="color: #666;">Neutron starter template</p>
+      </header>
+      <nav style="margin-bottom: 1.5rem;">
+        <a href="/">Home</a>
+        {" | "}
+        <a href="/users/1">User 1</a>
+      </nav>
+      <main>{props.children}</main>
+    </div>
+  );
+}

package/templates/basic/src/routes/index.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+export const config = { mode: "static" };
+export async function loader() {
+  return {
+    title: "__PROJECT_NAME__",
+    generatedAt: new Date().toISOString(),
+  };
+}
+export default function Home(props: { data?: { title: string; generatedAt: string } }) {
+  return (
+    <section>
+      <h2>{props.data?.title}</h2>
+      <p>
+        Static route generated at <strong>{props.data?.generatedAt}</strong>.
+      </p>
+    </section>
+  );
+}

package/templates/basic/src/routes/users/[id].tsx ADDED Viewed

@@ -0,0 +1,26 @@
+import type { LoaderArgs } from "@neutron-build/core";
+export const config = { mode: "app", cache: { maxAge: 30 } };
+export async function loader({ params }: LoaderArgs) {
+  const id = params.id || "1";
+  return {
+    user: {
+      id,
+      name: `User ${id}`,
+      email: `user${id}@example.com`,
+    },
+  };
+}
+export default function UserRoute(props: {
+  data?: { user: { id: string; name: string; email: string } };
+}) {
+  return (
+    <section>
+      <h2>{props.data?.user.name}</h2>
+      <p>ID: {props.data?.user.id}</p>
+      <p>Email: {props.data?.user.email}</p>
+    </section>
+  );
+}

package/templates/basic/tsconfig.json ADDED Viewed

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "strict": true,
+    "skipLibCheck": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}

package/templates/basic/vite.config.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import preact from "@preact/preset-vite";
+import { neutronPlugin } from "@neutron-build/core/vite";
+export default defineConfig({
+  plugins: [preact(), neutronPlugin()],
+});

package/templates/docs/_gitignore ADDED Viewed

@@ -0,0 +1,3 @@
+node_modules
+dist
+.neutron

package/templates/docs/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__PROJECT_NAME__</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/docs/neutron.config.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { defineConfig } from "@neutron-build/core";
+export default defineConfig({
+  runtime: "preact",
+  markdown: {
+    syntaxHighlight: { theme: "github-dark" },
+  },
+});

package/templates/docs/package.json ADDED Viewed

@@ -0,0 +1,22 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "neutron-ts dev",
+    "build": "neutron-ts build",
+    "start": "neutron-ts start",
+    "preview": "neutron-ts preview"
+  },
+  "dependencies": {
+    "@neutron-build/core": "__NEUTRON_VERSION__",
+    "@neutron-build/cli": "__NEUTRON_CLI_VERSION__",
+    "preact": "^10.25.4"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.9.4",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7"
+  }
+}

package/templates/docs/public/favicon.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="none" stroke="#818cf8" stroke-width="2"/><circle cx="16" cy="16" r="4" fill="#818cf8"/></svg>

package/templates/docs/src/components/Breadcrumbs.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+import { Link } from "@neutron-build/core/client";
+function toTitle(segment: string): string {
+  return segment
+    .replace(/[-_]/g, " ")
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+export function Breadcrumbs({ slug }: { slug: string }) {
+  const parts = slug.split("/").filter(Boolean);
+  if (parts.length === 0 || (parts.length === 1 && parts[0] === "index")) {
+    return null;
+  }
+  const crumbs: { label: string; href: string }[] = [
+    { label: "Docs", href: "/docs" },
+  ];
+  let path = "";
+  for (let i = 0; i < parts.length; i++) {
+    path += `/${parts[i]}`;
+    const isLast = i === parts.length - 1;
+    if (parts[i] !== "index") {
+      crumbs.push({
+        label: toTitle(parts[i]!),
+        href: isLast ? "" : `/docs${path}`,
+      });
+    }
+  }
+  return (
+    <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
+      {crumbs.map((crumb, i) => (
+        <>
+          {i > 0 && <span class="docs-breadcrumbs-sep">/</span>}
+          {crumb.href ? (
+            <Link to={crumb.href}>{crumb.label}</Link>
+          ) : (
+            <span class="docs-breadcrumbs-current" aria-current="page">
+              {crumb.label}
+            </span>
+          )}
+        </>
+      ))}
+    </nav>
+  );
+}

package/templates/docs/src/components/Callout.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+import type { ComponentChildren } from "preact";
+export type CalloutType = "note" | "warning" | "tip" | "danger";
+export interface CalloutProps {
+  type: CalloutType;
+  title?: string;
+  children: ComponentChildren;
+}
+const icons: Record<CalloutType, string> = {
+  note: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,
+  warning: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`,
+  tip: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a7 7 0 014 12.7V17H8v-2.3A7 7 0 0112 2z"/></svg>`,
+  danger: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>`,
+};
+const defaultTitles: Record<CalloutType, string> = {
+  note: "Note",
+  warning: "Warning",
+  tip: "Tip",
+  danger: "Danger",
+};
+export default function Callout(props: CalloutProps) {
+  const title = props.title ?? defaultTitles[props.type];
+  return (
+    <aside class={`callout callout-${props.type}`}>
+      <span
+        class="callout-icon"
+        dangerouslySetInnerHTML={{ __html: icons[props.type] }}
+      />
+      <div class="callout-content">
+        {title && <p class="callout-title">{title}</p>}
+        {props.children}
+      </div>
+    </aside>
+  );
+}

package/templates/docs/src/components/Card.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import { Link } from "@neutron-build/core/client";
+import type { ComponentChildren } from "preact";
+export interface CardProps {
+  title: string;
+  description?: string;
+  href?: string;
+  icon?: ComponentChildren;
+}
+export default function Card(props: CardProps) {
+  const content = (
+    <>
+      {props.icon && <div class="card-icon">{props.icon}</div>}
+      <span class="card-title">{props.title}</span>
+      {props.description && (
+        <span class="card-description">{props.description}</span>
+      )}
+    </>
+  );
+  if (props.href) {
+    return (
+      <Link to={props.href} class="card card--link">
+        {content}
+      </Link>
+    );
+  }
+  return <div class="card">{content}</div>;
+}

package/templates/docs/src/components/CopyButton.tsx ADDED Viewed

@@ -0,0 +1,35 @@
+import { useState } from "preact/hooks";
+export function CopyButton({ code }: { code: string }) {
+  const [copied, setCopied] = useState(false);
+  async function handleCopy() {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      /* clipboard unavailable */
+    }
+  }
+  return (
+    <button
+      class="code-block-copy"
+      onClick={handleCopy}
+      aria-label={copied ? "Copied" : "Copy code"}
+      data-copied={copied ? "true" : undefined}
+    >
+      {copied ? (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      ) : (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+        </svg>
+      )}
+    </button>
+  );
+}

package/templates/docs/src/components/Footer.tsx ADDED Viewed

@@ -0,0 +1,72 @@
+import { Link } from "@neutron-build/core/client";
+interface PaginationLink {
+  title: string;
+  slug: string;
+}
+export function Footer({
+  prev,
+  next,
+}: {
+  prev?: PaginationLink;
+  next?: PaginationLink;
+}) {
+  if (!prev && !next) return null;
+  return (
+    <footer class="docs-footer">
+      {prev ? (
+        <Link to={`/docs/${prev.slug}`} class="docs-footer-link">
+          <span class="docs-footer-label">
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              style="display:inline;vertical-align:middle;margin-right:0.25rem"
+            >
+              <line x1="19" y1="12" x2="5" y2="12" />
+              <polyline points="12 19 5 12 12 5" />
+            </svg>
+            Previous
+          </span>
+          <span class="docs-footer-title">{prev.title}</span>
+        </Link>
+      ) : (
+        <span />
+      )}
+      {next ? (
+        <Link
+          to={`/docs/${next.slug}`}
+          class="docs-footer-link docs-footer-link--next"
+        >
+          <span class="docs-footer-label">
+            Next
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              style="display:inline;vertical-align:middle;margin-left:0.25rem"
+            >
+              <line x1="5" y1="12" x2="19" y2="12" />
+              <polyline points="12 5 19 12 12 19" />
+            </svg>
+          </span>
+          <span class="docs-footer-title">{next.title}</span>
+        </Link>
+      ) : (
+        <span />
+      )}
+    </footer>
+  );
+}

package/templates/docs/src/components/Search.tsx ADDED Viewed

@@ -0,0 +1,139 @@
+import { useState, useEffect, useRef } from "preact/hooks";
+interface SearchResult {
+  slug: string;
+  title: string;
+  path: string;
+}
+export function Search({ entries }: { entries?: { slug: string; data: { title: string; description?: string } }[] }) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [active, setActive] = useState(0);
+  const modalRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    function onKeyDown(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setOpen(true);
+      }
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, []);
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => inputRef.current?.focus());
+    } else {
+      setQuery("");
+      setResults([]);
+      setActive(0);
+    }
+  }, [open]);
+  function search(q: string) {
+    setQuery(q);
+    setActive(0);
+    if (!q.trim() || !entries) {
+      setResults([]);
+      return;
+    }
+    const lower = q.toLowerCase();
+    const matched = entries
+      .filter((e) => {
+        const title = e.data.title.toLowerCase();
+        const desc = (e.data.description || "").toLowerCase();
+        return title.includes(lower) || desc.includes(lower) || e.slug.includes(lower);
+      })
+      .slice(0, 10)
+      .map((e) => ({
+        slug: e.slug,
+        title: e.data.title,
+        path: e.slug.replace(/\//g, " > "),
+      }));
+    setResults(matched);
+  }
+  function navigate(slug: string) {
+    setOpen(false);
+    window.location.href = `/docs/${slug}`;
+  }
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((i) => Math.min(i + 1, results.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter" && results[active]) {
+      navigate(results[active].slug);
+    } else if (e.key === "Escape") {
+      setOpen(false);
+    }
+  }
+  return (
+    <>
+      <button class="search-trigger" onClick={() => setOpen(true)} aria-label="Search docs">
+        <svg class="search-trigger-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="11" cy="11" r="8" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+        <span class="search-trigger-text">Search</span>
+        <span class="search-trigger-kbd">&#8984;K</span>
+      </button>
+      <div class={`search-overlay${open ? " is-open" : ""}`} onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}>
+        <div class="search-modal" ref={modalRef}>
+          <div class="search-input-wrap">
+            <svg class="search-input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>
+            <input
+              ref={inputRef}
+              type="text"
+              class="search-input"
+              placeholder="Search documentation..."
+              value={query}
+              onInput={(e) => search((e.target as HTMLInputElement).value)}
+              onKeyDown={onKeyDown}
+            />
+            <kbd class="search-input-kbd">Esc</kbd>
+          </div>
+          {results.length > 0 && (
+            <div class="search-results" role="listbox">
+              {results.map((r, i) => (
+                <div
+                  key={r.slug}
+                  role="option"
+                  aria-selected={i === active}
+                  class="search-result"
+                  onClick={() => navigate(r.slug)}
+                  onMouseEnter={() => setActive(i)}
+                >
+                  <span class="search-result-title">{r.title}</span>
+                  <span class="search-result-path">{r.path}</span>
+                </div>
+              ))}
+            </div>
+          )}
+          {query && results.length === 0 && (
+            <div class="search-no-results">No results for "{query}"</div>
+          )}
+          <div class="search-footer">
+            <div class="search-footer-keys">
+              <span class="search-footer-key"><kbd>&#8593;&#8595;</kbd> Navigate</span>
+              <span class="search-footer-key"><kbd>&#9166;</kbd> Open</span>
+              <span class="search-footer-key"><kbd>Esc</kbd> Close</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/templates/docs/src/components/Sidebar.tsx ADDED Viewed

@@ -0,0 +1,59 @@
+import { Link } from "@neutron-build/core/client";
+import type { SidebarSection } from "../lib/sidebar";
+function SidebarLink(props: {
+  slug: string;
+  title: string;
+  active?: boolean;
+}) {
+  return (
+    <Link
+      to={`/docs/${props.slug}`}
+      class="docs-sidebar-link"
+      aria-current={props.active ? "page" : undefined}
+    >
+      {props.title}
+    </Link>
+  );
+}
+export function Sidebar({ tree }: { tree: SidebarSection[] }) {
+  return (
+    <>
+      {tree.map((section) => {
+        if (!section.title) {
+          return section.items.map((item) => (
+            <SidebarLink
+              key={item.slug}
+              slug={item.slug}
+              title={item.title}
+              active={item.active}
+            />
+          ));
+        }
+        const hasActive = section.items.some((item) => item.active);
+        return (
+          <details
+            key={section.slug}
+            class="docs-sidebar-section"
+            open={hasActive || undefined}
+          >
+            <summary>{section.title}</summary>
+            <div class="docs-sidebar-section-items">
+              {section.items.map((item) => (
+                <SidebarLink
+                  key={item.slug}
+                  slug={item.slug}
+                  title={item.title}
+                  active={item.active}
+                />
+              ))}
+            </div>
+          </details>
+        );
+      })}
+    </>
+  );
+}