@grove-dev/astro 0.6.1 → 0.8.0

package/src/components/StackGrid.astro

@@ -1,151 +0,0 @@
----
-import { formatCount } from "@grove-dev/core";
-import Icon from "./Icon.astro";
-/**
- * StackGrid — browse-by-stack grid for the home page.
- *
- * Renders a card per stack with name, blurb, status pill
- * (live/expanding/planned), and a count. The href is the list
- * page filtered to that stack, so consumers compose the URL via
- * the `hrefFor` prop.
- *
- * Generic: no blueprint-specific terms. A "stack" here is just a
- * slug + display name + status; consumers derive both from their
- * own data.
- */
-
-interface StackEntry {
-  name: string;
-  slug: string;
-  blurb?: string;
-  status?: "live" | "expanding" | "planned";
-  count?: number;
-}
-
-interface Props {
-  stacks: StackEntry[];
-  /** List page base. */
-  pathPrefix?: string;
-  /** Stack icon registry — maps slug → icon file name. Optional. */
-  iconAliases?: Record<string, string>;
-  /** Extra class. */
-  class?: string;
-  /** Hide the section eyebrow / header entirely. */
-  bare?: boolean;
-  itemLabelPlural?: string;
-  /** Noun pair for count chips — singular fixes "1 projects". */
-  itemNoun?: { singular: string; plural: string };
-  /** Pass 1 when this grid IS the page (`/stacks` index). */
-  headingLevel?: 1 | 2;
-  /**
-   * Card link builder. Defaults to the browse page filtered by stack
-   * (`{pathPrefix}?stack=…`); pass e.g. `(slug) => \`/stacks/${slug}\``
-   * to link to taxonomy detail routes instead.
-   */
-  hrefFor?: (slug: string) => string;
-}
-
-const {
-  stacks,
-  pathPrefix = "/",
-  iconAliases,
-  class: className = "",
-  bare = false,
-  itemLabelPlural = "items",
-  itemNoun = { singular: "item", plural: "items" },
-  headingLevel = 2,
-  hrefFor,
-} = Astro.props;
-
-const Heading = `h${headingLevel}` as "h1" | "h2";
-
-function buildHref(slug: string): string {
-  if (hrefFor) return hrefFor(slug);
-  const base = pathPrefix.replace(/\/$/, "");
-  return `${base}?stack=${encodeURIComponent(slug)}`;
-}
-
-function statusLabel(s: StackEntry["status"]): string | null {
-  switch (s) {
-    case "live":
-      return "Available now";
-    case "expanding":
-      return "Expanding";
-    case "planned":
-      return "Planned";
-    default:
-      return null;
-  }
-}
----
-
-<section
-  id="stacks"
-  class:list={["py-12 sm:py-16 scroll-mt-20 border-b border-ink-200 dark:border-ink-800", className]}
-  aria-labelledby={bare ? undefined : "grove-stackgrid-heading"}
->
-  <div class="mx-auto w-full max-w-container px-5 sm:px-7">
-    {!bare && (
-      <header class="mb-6">
-        <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-          Stacks
-        </span>
-        <Heading
-          id="grove-stackgrid-heading"
-          class="m-0 mt-1 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100"
-        >
-          Browse by stack
-        </Heading>
-        <p class="m-0 max-w-[60ch] text-[0.9375rem] text-ink-500 dark:text-ink-400">
-          Pick a stack to see real {itemLabelPlural} built with it.
-        </p>
-      </header>
-    )}
-
-    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
-      {stacks.map((s) => (
-        <a
-          href={buildHref(s.slug)}
-          class="rounded-[calc(var(--radius)+0.25rem)] border border-border bg-card shadow-none transition-colors hover:border-ink-300 dark:hover:border-ink-700 group flex h-full items-center gap-3 p-3.5 no-underline"
-          data-event="stack_grid_click"
-          data-event-source="stack_grid"
-        >
-          <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-ink-200 bg-white dark:border-ink-800 dark:bg-ink-950" aria-hidden="true">
-            <Icon name={iconAliases?.[s.slug] ?? s.slug} category="stack" size={18} />
-          </div>
-
-          <div class="flex min-w-0 flex-1 flex-col gap-0.5">
-            <div class="flex items-center gap-2">
-              {/* Not a heading: these tiles are links in a grid, and
-                  heading-per-card breaks the outline when the grid
-                  sits directly under the page h1 (/stacks). */}
-              <span class="m-0 text-[0.875rem] font-semibold tracking-tight text-ink-900 group-hover:underline dark:text-ink-100">
-                {s.name}
-              </span>
-              {typeof s.count === "number" && (
-                <span class="inline-flex items-center rounded-md border border-ink-200 bg-ink-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-ink-600 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-400">
-                  {formatCount(s.count, itemNoun)}
-                </span>
-              )}
-            </div>
-            {s.blurb && <p class="m-0 truncate text-2xs text-ink-500 dark:text-ink-400">{s.blurb}</p>}
-          </div>
-          {statusLabel(s.status) && (
-            <span
-              class:list={[
-                "shrink-0 inline-flex items-center rounded-md border px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wider",
-                s.status === "live"
-                  ? "!bg-emerald-50 !text-emerald-700 dark:!bg-emerald-950/80 dark:!text-emerald-300"
-                  : s.status === "expanding"
-                    ? "!bg-blue-50 !text-blue-700 dark:!bg-blue-950/80 dark:!text-blue-300"
-                    : "!bg-amber-50 !text-amber-800 dark:!bg-amber-950/80 dark:!text-amber-300",
-              ]}
-            >
-              {statusLabel(s.status)}
-            </span>
-          )}
-        </a>
-      ))}
-    </div>
-  </div>
-</section>

package/src/components/StackPlatformChips.astro

@@ -1,73 +0,0 @@
----
-/**
- * StackPlatformChips — labelled Stack + Platform chip rows.
- *
- * Renders up to two rows: one for stack (filled pills, primary) and
- * one for platform (outlined pills, secondary). Each row is prefixed
- * with a `w-14` (56px) label column so the pills always start at
- * the same horizontal position, even when the stack/label is wider
- * than the longest platform.
- *
- * Used by every card-shaped component in the framework so the
- * primary/secondary distinction is unambiguous across surfaces
- * (homepage grid, directory index, collection rows).
- */
-import Icon from "./Icon.astro";
-
-interface Props {
-  /** Primary technology — filled pill, one entry per item. */
-  stack?: string;
-  /** Secondary target platforms — outlined pills, multiple per item. */
-  platform?: string[];
-  /** Cap the number of platform pills rendered. Default 4. */
-  maxPlatform?: number;
-  /** Hide the row(s) entirely. Default true. */
-  show?: boolean;
-  class?: string;
-}
-
-const {
-  stack,
-  platform = [],
-  maxPlatform = 4,
-  show = true,
-  class: className = "",
-} = Astro.props;
-
-if (!show || (!stack && platform.length === 0)) {
-  return Astro.redirect ? null : null;
-}
-
-const visiblePlatform = platform.slice(0, maxPlatform);
-const platformOverflow = platform.length - visiblePlatform.length;
----
-
-<div class={`flex flex-col gap-1 ${className}`}>
-  {stack && (
-    <div class="flex flex-wrap items-center gap-x-1.5 gap-y-1">
-      <span class="w-14 shrink-0 text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-        Stack
-      </span>
-      <span class="inline-flex min-h-5 items-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 text-2xs font-medium leading-none text-secondary-foreground">
-        <Icon name={stack} category="stack" size={10} />
-        <span>{stack}</span>
-      </span>
-    </div>
-  )}
-  {platform.length > 0 && (
-    <div class="flex flex-wrap items-center gap-x-1.5 gap-y-1">
-      <span class="w-14 shrink-0 text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
-        Platform
-      </span>
-      {visiblePlatform.map((p) => (
-        <span class="inline-flex min-h-5 items-center gap-1 rounded-full border border-ink-200 bg-transparent px-2 py-0.5 text-2xs font-medium leading-none text-ink-500 dark:border-ink-800 dark:text-ink-400">
-          <Icon name={p} category="platform" size={10} />
-          <span>{p}</span>
-        </span>
-      ))}
-      {platformOverflow > 0 && (
-        <span class="text-2xs text-ink-400 dark:text-ink-600">+{platformOverflow}</span>
-      )}
-    </div>
-  )}
-</div>

package/src/components/SubmissionClient.astro

@@ -1,254 +0,0 @@
----
-interface Props {
-  existingSlugs: string[];
-  existingFullNames: string[];
-  repoUrl: string;
-  fields: { category: boolean; stack: boolean; platforms: boolean; tags: boolean; license?: boolean };
-  /** Taxonomy ids for client-side validation. */
-  taxonomy?: {
-    categoryIds?: string[];
-    stackIds?: string[];
-    platformIds?: string[];
-  };
-  /**
-   * Optional path of a server-side proxy endpoint that wraps
-   * `api.github.com` (SSR consumers with an adapter can wire one and
-   * read a `GITHUB_TOKEN` env var to lift the rate limit). When
-   * omitted — the static-build default — the visitor's browser calls
-   * `https://api.github.com/repos/{owner}/{repo}` directly, which
-   * works on any static host but is subject to GitHub's per-IP
-   * unauthenticated limit (60 requests/hour).
-   */
-  githubProxyPath?: string;
-}
-const {
-  existingSlugs,
-  existingFullNames,
-  repoUrl,
-  fields,
-  taxonomy,
-  githubProxyPath = '',
-} = Astro.props;
----
-
-<script is:inline define:vars={{ existingSlugs, existingFullNames, repoUrl, fields, taxonomy, githubProxyPath }}>
-    /** @typedef {{ name: string; description: string | null; html_url: string; homepage: string | null; language: string | null; private: boolean; topics: string[] }} GitHubRepo */
-    /** @type {GitHubRepo | null} */
-    let repository = null;
-
-    const $ = /** @param {string} selector */ (selector) => /** @type {HTMLElement | null} */ (document.querySelector(selector));
-    /** @type {Record<string, HTMLInputElement | HTMLTextAreaElement | null>} */
-    const inputs = {
-      repo: /** @type {HTMLInputElement | null} */ ($("#repo-url")),
-      name: /** @type {HTMLInputElement | null} */ ($("#item-name")),
-      slug: /** @type {HTMLInputElement | null} */ ($("#item-slug")),
-      description: /** @type {HTMLInputElement | null} */ ($("#item-description")),
-      category: /** @type {HTMLSelectElement | null} */ ($("#item-category")),
-      stack: /** @type {HTMLSelectElement | null} */ ($("#primary-stack")),
-      tags: /** @type {HTMLInputElement | null} */ ($("#item-tags")),
-      license: /** @type {HTMLSelectElement | null} */ ($("#item-license")),
-      website: /** @type {HTMLInputElement | null} */ ($("#item-website")),
-      bestFor: /** @type {HTMLTextAreaElement | null} */ ($("#best-for")),
-    };
-    const fetchButton = /** @type {HTMLButtonElement | null} */ ($("#fetch-repo"));
-    const preview = /** @type {HTMLElement | null} */ ($("#yaml-preview"));
-    const status = /** @type {HTMLElement | null} */ ($("#submit-status"));
-    const copyButton = /** @type {HTMLButtonElement | null} */ ($("#copy-yaml"));
-    const openPrLink = /** @type {HTMLAnchorElement | null} */ ($("#open-pr-link"));
-    const slugSet = new Set(existingSlugs);
-    const repoSet = new Set(existingFullNames);
-    const categoryIds = new Set(taxonomy?.categoryIds ?? []);
-    const stackIds = new Set(taxonomy?.stackIds ?? []);
-    const platformIds = new Set(taxonomy?.platformIds ?? []);
-
-    const slugify = /** @param {unknown} value */ (value) =>
-      String(value || "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-    const parseRepo = /** @param {unknown} value */ (value) => {
-      const match = String(value ?? "").match(/github\.com\/([^/]+)\/([^/?#]+)/);
-      return match ? { owner: match[1], repo: match[2].replace(/\.git$/, "") } : null;
-    };
-    const quote = /** @param {unknown} value */ (value) =>
-      `"${String(value ?? "").replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
-    const lines = /** @param {string[]} values */ (values, indent = 2) =>
-      values.map((value) => `${" ".repeat(indent)}- ${value}`).join("\n");
-    const selectedPlatforms = () =>
-      /** @type {string[]} */ ([...document.querySelectorAll("input[name=platform]:checked")].map((input) => /** @type {HTMLInputElement} */ (input).value));
-    const setStatus = (text, tone = "muted") => {
-      if (!status) return;
-      status.textContent = text;
-      // Status tokens (danger/warning/success) so the submit states use
-      // the same semantic roles as the rest of the system.
-      status.className = `mt-3 min-h-5 text-2xs ${tone === "error" ? "text-danger" : tone === "warn" ? "text-warning" : tone === "success" ? "text-success" : "text-muted-foreground"}`;
-    };
-    const inferStack = /** @param {GitHubRepo} repo */ (repo) => {
-      const language = String(repo.language || "").toLowerCase();
-      const topics = (repo.topics || []).map((topic) => String(topic).toLowerCase());
-      if (topics.includes("flutter") || language === "dart") return "flutter";
-      if (topics.includes("react-native")) return "react-native";
-      if (language === "swift" || language === "objective-c") return "ios";
-      if (language === "kotlin" || language === "java") return "android";
-      return language;
-    };
-    const generateYaml = () => {
-      if (!repository) return "";
-      const parsed = parseRepo(inputs.repo?.value ?? "");
-      if (!parsed) return "";
-      const tags = String(inputs.tags?.value ?? "").split(",").map((tag) => tag.trim()).filter(Boolean);
-      const platforms = selectedPlatforms();
-      const bestFor = String(inputs.bestFor?.value ?? "").split("\n").map((item) => item.trim()).filter(Boolean);
-      return [
-        "kind: project",
-        `slug: ${slugify(inputs.slug?.value ?? repository.name)}`,
-        `name: ${quote(inputs.name?.value ?? "")}`,
-        `description: ${quote(inputs.description?.value ?? "")}`,
-        ...(fields.category ? [`category: ${inputs.category?.value || "uncategorized"}`] : []),
-        "projectType: real-app",
-        ...(fields.stack && inputs.stack?.value ? [`stack: ${quote(inputs.stack.value)}`] : []),
-        ...(fields.platforms ? ["platforms:", platforms.length ? lines(platforms) : "  []"] : []),
-        ...(fields.tags ? ["tags:", tags.length ? lines(tags) : "  []"] : []),
-        ...(fields.license && inputs.license?.value ? ["licenses:", lines([inputs.license.value])] : []),
-        `repoUrl: ${repository.html_url}`,
-        "links:",
-        `  github: ${repository.html_url}`,
-        ...(inputs.website?.value ? [`  website: ${inputs.website.value}`] : []),
-        "bestFor:", bestFor.length ? lines(bestFor) : "  []",
-        "source:",
-        "  type: manual",
-        `  owner: ${parsed.owner}`,
-        `  repo: ${parsed.repo}`,
-        "curation:",
-        "  reviewed: false",
-        "  labels: []",
-        "  lenses: []",
-        "",
-      ].join("\n");
-    };
-    const validationIssues = () => {
-      const issues = [];
-      if (inputs.slug && slugSet.has(slugify(inputs.slug.value))) {
-        issues.push("A record with that slug already exists — update the existing one instead of opening a duplicate PR.");
-      }
-      const description = String(inputs.description?.value ?? "");
-      if (description.trim().length < 40) {
-        issues.push("Description must be at least 40 characters.");
-      }
-      if (fields.category && inputs.category) {
-        const v = inputs.category.value;
-        if (!v || v === "uncategorized" || (categoryIds.size > 0 && !categoryIds.has(v))) {
-          issues.push("Choose a category from the taxonomy.");
-        }
-      }
-      if (fields.stack && inputs.stack) {
-        const v = inputs.stack.value;
-        if (!v || (stackIds.size > 0 && !stackIds.has(v))) {
-          issues.push("Choose a primary stack from the taxonomy.");
-        }
-      }
-      if (fields.platforms && selectedPlatforms().length === 0) {
-        issues.push("Select at least one platform.");
-      } else if (fields.platforms && platformIds.size > 0) {
-        const bad = selectedPlatforms().find((p) => !platformIds.has(p));
-        if (bad) issues.push(`Platform "${bad}" is not in the taxonomy.`);
-      }
-      return issues;
-    };
-    const refresh = () => {
-      const yaml = generateYaml();
-      if (preview) preview.textContent = yaml || "Paste a GitHub URL to generate a draft.";
-      if (!yaml || !openPrLink || !copyButton) return;
-      const issues = validationIssues();
-      if (issues.length > 0) {
-        setStatus(issues[0], "error");
-        openPrLink.classList.add("pointer-events-none", "opacity-50");
-        copyButton.disabled = true;
-        copyButton.classList.add("pointer-events-none", "opacity-50");
-        return;
-      }
-      const params = new URLSearchParams({ filename: `data/records/${slugify(inputs.slug?.value ?? "")}.yml`, value: yaml });
-      openPrLink.href = `${repoUrl}/new/main?${params}`;
-      openPrLink.classList.remove("pointer-events-none", "opacity-50");
-      copyButton.disabled = false;
-      copyButton.classList.remove("pointer-events-none", "opacity-50");
-    };
-
-    fetchButton?.addEventListener("click", async () => {
-      const parsed = parseRepo(inputs.repo?.value ?? "");
-      if (!parsed) return setStatus("Enter a valid GitHub repository URL.", "error");
-      const fullName = `${parsed.owner}/${parsed.repo}`.toLowerCase();
-      if (repoSet.has(fullName)) setStatus("This repository is already listed. The draft can update its record.", "warn");
-      if (fetchButton) fetchButton.disabled = true;
-      setStatus("Fetching GitHub metadata...");
-      try {
-        if (githubProxyPath) {
-          // Server-side proxy (SSR consumers) — the endpoint reads an
-          // optional `GITHUB_TOKEN` env var and forwards the request
-          // with a Bearer header (or unauthenticated, if no token).
-          const proxyUrl = `${githubProxyPath}?owner=${encodeURIComponent(parsed.owner)}&repo=${encodeURIComponent(parsed.repo)}`;
-          const response = await fetch(proxyUrl);
-          const payload = /** @type {{ ok: boolean; status?: number; message?: string; data?: GitHubRepo }} */ (await response.json());
-          if (!response.ok || !payload.ok || !payload.data) {
-            throw new Error(payload.message || `GitHub returned ${response.status}.`);
-          }
-          repository = payload.data;
-        } else {
-          // Static-build default — call api.github.com directly. The
-          // raw payload carries the same field names the form fill
-          // logic consumes (name, description, html_url, homepage,
-          // language, private, topics).
-          const response = await fetch(
-            `https://api.github.com/repos/${encodeURIComponent(parsed.owner)}/${encodeURIComponent(parsed.repo)}`,
-            { headers: { Accept: "application/vnd.github+json" } },
-          );
-          if (response.status === 404) {
-            throw new Error("Repository not found or not public.");
-          }
-          if (response.status === 403 || response.status === 429) {
-            throw new Error(
-              "GitHub rate limit reached (60 requests/hour per visitor). Try again later or fill the fields manually.",
-            );
-          }
-          if (!response.ok) {
-            throw new Error(`GitHub returned ${response.status}.`);
-          }
-          const data = /** @type {GitHubRepo & { topics?: string[] }} */ (await response.json());
-          repository = {
-            name: data.name,
-            description: data.description ?? null,
-            html_url: data.html_url,
-            homepage: data.homepage ?? null,
-            language: data.language ?? null,
-            private: Boolean(data.private),
-            topics: Array.isArray(data.topics) ? data.topics : [],
-          };
-        }
-        if (repository.private) throw new Error("Private repositories cannot be submitted.");
-        if (inputs.name) inputs.name.value = repository.name || parsed.repo;
-        if (inputs.slug) inputs.slug.value = slugify(repository.name || parsed.repo);
-        if (inputs.description) inputs.description.value = repository.description || "";
-        if (inputs.stack) inputs.stack.value = inferStack(repository);
-        if (inputs.tags) inputs.tags.value = (repository.topics || []).slice(0, 8).join(", ");
-        if (inputs.website) inputs.website.value = repository.homepage || "";
-        const duplicate = inputs.slug ? slugSet.has(inputs.slug.value) : false;
-        setStatus(
-          duplicate ? "That slug already exists. Choose another or update the existing record." : "Draft generated. Edit any field and the YAML will refresh.",
-          duplicate ? "warn" : "success",
-        );
-        refresh();
-      } catch (error) {
-        repository = null;
-        setStatus(error instanceof Error ? error.message : "Unable to fetch repository metadata.", "error");
-      } finally {
-        if (fetchButton) fetchButton.disabled = false;
-      }
-    });
-    $("#submit-form")?.addEventListener("input", refresh);
-    $("#submit-form")?.addEventListener("change", refresh);
-    copyButton?.addEventListener("click", async () => {
-      try {
-        await navigator.clipboard.writeText(preview?.textContent || "");
-        setStatus("Copied YAML to clipboard.", "success");
-      } catch {
-        setStatus("Couldn't copy automatically. Select the YAML and copy it.", "error");
-      }
-    });
-  </script>

package/src/components/TableOfContents.astro

@@ -1,140 +0,0 @@
----
-/**
- * TableOfContents.astro
- *
- * Collapsible on-page nav for a record's Markdown body.
- *
- * Behavior:
- *   - Mobile (<lg): rendered as a closed `<details>` dropdown.
- *   - Desktop (lg+): forced open by the `.grove-toc` media rule in
- *     `styles.css` (CSS reveals the list without the `open`
- *     attribute) so the nav stays visible while the user scrolls.
- *   - Heading IDs come from the markdown renderer; the TOC entries
- *     are pre-computed by `extractToc` and passed in.
- *
- * The scroll-spy + smooth-scroll logic lives in an inline script
- * that finds every `data-toc-link` on the page and highlights the
- * link whose target is closest to the top of the viewport (rAF-
- * throttled). Active styling comes from the `data-toc-active`
- * attribute toggled in the script + CSS rules in `styles.css`.
- */
-import type { TocEntry } from "@grove-dev/core";
-
-interface Props {
-  /** Heading entries from `extractToc`. */
-  items: TocEntry[];
-  /** Optional accessible label override. */
-  label?: string;
-}
-
-const { items, label = "On this page" } = Astro.props;
-const hasItems = items.length > 1;
----
-
-{hasItems && (
-  <details class="grove-toc lg:border-0">
-    <summary class="cursor-pointer list-none pb-3 text-2xs font-semibold uppercase tracking-wider text-ink-500 hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100 lg:cursor-default lg:pointer-events-none lg:pb-2">
-      <span class="inline-flex items-center gap-1.5">
-        <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor" class="grove-toc-chevron transition-transform lg:hidden">
-          <path d="M6 4l4 4-4 4V4z" />
-        </svg>
-        {label}
-      </span>
-    </summary>
-    {/* Full list, no inner scroll — the TOC lives in the right rail
-        and every entry stays visible. h3 entries indent further under
-        their h2 parents; the active state is a left-rail indicator +
-        text-color emphasis set by the script + styles.css. */}
-    <ol class="grove-toc-list list-none py-1 text-sm lg:py-0">
-      {items.map((entry) => (
-        <li
-          class:list={[
-            "grove-toc-item relative",
-            entry.depth >= 3 && "grove-toc-item--h3",
-          ]}
-        >
-          <a
-            href={`#${entry.id}`}
-            class:list={[
-              "grove-toc-link block py-1.5 text-ink-500 no-underline transition-colors hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100",
-              entry.depth >= 2 && "pl-3 lg:pl-4",
-              entry.depth >= 3 && "pl-6 text-[0.8125rem] lg:pl-7",
-            ]}
-            data-toc-link={entry.id}
-          >
-            {entry.text}
-          </a>
-        </li>
-      ))}
-    </ol>
-  </details>
-)}
-
-{hasItems && (
-  <script is:inline define:vars={{ tocIds: items.map((i) => i.id) }}>
-    (function () {
-      // Desktop (lg+): force the details open so the nav stays visible
-      // while scrolling; the summary is pointer-events-none there. On
-      // narrow viewports restore the closed dropdown default. CSS in
-      // styles.css covers the no-JS case.
-      var toc = document.querySelector(".grove-toc");
-      if (toc) {
-        var mq = window.matchMedia("(min-width: 64rem)");
-        var syncOpen = function () { toc.open = mq.matches; };
-        if (typeof mq.addEventListener === "function") {
-          mq.addEventListener("change", syncOpen);
-        }
-        syncOpen();
-      }
-
-      // Smooth scroll + history-replace on TOC link clicks.
-      function onClick(e) {
-        var link = e.target.closest("a[data-toc-link]");
-        if (!link) return;
-        e.preventDefault();
-        var id = link.getAttribute("data-toc-link");
-        var target = document.getElementById(id);
-        if (!target) return;
-        target.scrollIntoView({ behavior: "smooth", block: "start" });
-        history.replaceState(null, "", "#" + id);
-      }
-      document.addEventListener("click", onClick);
-
-      // Scroll-spy: rAF-throttled, toggles `data-toc-active` on the
-      // link whose heading is closest to the top of the viewport.
-      // CSS handles the active styling — no dynamic Tailwind classes.
-      var headings = tocIds
-        .map(function (id) { return document.getElementById(id); })
-        .filter(function (el) { return !!el; });
-      if (!headings.length) return;
-      var links = new Map();
-      document.querySelectorAll("a[data-toc-link]").forEach(function (a) {
-        links.set(a.getAttribute("data-toc-link"), a);
-      });
-      var active = null;
-      var ticking = false;
-      function update() {
-        ticking = false;
-        var top = window.scrollY + 140;
-        var current = headings[0].id;
-        for (var i = 0; i < headings.length; i++) {
-          if (headings[i].offsetTop <= top) current = headings[i].id;
-          else break;
-        }
-        if (current === active) return;
-        active = current;
-        links.forEach(function (a, id) {
-          if (id === current) a.setAttribute("data-toc-active", "");
-          else a.removeAttribute("data-toc-active");
-        });
-      }
-      function onScroll() {
-        if (ticking) return;
-        ticking = true;
-        requestAnimationFrame(update);
-      }
-      window.addEventListener("scroll", onScroll, { passive: true });
-      update();
-    })();
-  </script>
-)}