@grove-dev/astro 0.6.1 → 0.8.0

package/src/ui/FilterDrawer.astro

@@ -1,124 +0,0 @@
----
-/**
- * FilterDrawer — mobile filter surface built on native `<dialog>`.
- *
- * `showModal()` gives focus trapping, Escape handling, and the
- * top-layer backdrop for free — no dependency, no hand-rolled trap.
- * On viewports ≥ md the trigger button hides and the slotted filter
- * controls render inline through the same slot used on desktop, so
- * there is exactly one copy of the filter markup.
- *
- * No-JS fallback: the slot content stays in normal flow (the dialog
- * only wraps it once the client script moves it), so filters remain
- * usable without JavaScript.
- */
-import { buttonClass } from "./button.js";
-
-interface Props {
-  /** Trigger button label. */
-  label?: string;
-  /** Count of active filters shown on the trigger. */
-  activeCount?: number;
-  /** URL that clears every filter — offered inside the sheet. */
-  clearHref?: string;
-  class?: string;
-}
-
-const {
-  label = "Filters",
-  activeCount = 0,
-  clearHref,
-  class: className = "",
-} = Astro.props;
----
-
-<div class={`grove-filter-drawer ${className}`} data-grove-filter-drawer>
-  <button
-    type="button"
-    data-drawer-open
-    class={buttonClass("secondary", "md", "w-full md:hidden")}
-    aria-haspopup="dialog"
-  >
-    {label}
-    {/* Always in the DOM (hidden at zero) so the client script can
-        update it from the live URL state on this prerendered page. */}
-    <span
-      data-drawer-count
-      class:list={[
-        "inline-flex min-w-5 items-center justify-center rounded-full bg-selected px-1.5 py-0.5 font-mono text-2xs leading-none text-selected-foreground",
-        activeCount === 0 && "hidden",
-      ]}
-    >
-      {activeCount}
-    </span>
-  </button>
-
-  {/* On mobile the client script moves this content into the dialog;
-      on ≥ md it stays inline. Not hidden by CSS — without JS the
-      filters must remain visible in flow on every viewport. */}
-  <div data-drawer-content class="md:contents">
-    <slot />
-  </div>
-
-  <dialog
-    data-drawer-dialog
-    class="m-0 mt-auto w-full max-w-none rounded-t-[calc(var(--radius)+0.5rem)] border-0 bg-surface-overlay p-0 text-foreground backdrop:bg-black/40 md:hidden"
-    aria-label={label}
-  >
-    <div class="flex items-center justify-between gap-3 border-b border-border px-4 py-3">
-      <p class="m-0 text-sm font-semibold">{label}</p>
-      <div class="flex items-center gap-2">
-        {clearHref && (
-          /* Clearing from inside the sheet is the only way out of a
-             stack of filters on mobile — the chips row is behind it. */
-          <a
-            href={clearHref}
-            data-drawer-clear
-            class:list={[buttonClass("ghost", "sm"), activeCount === 0 && "hidden"]}
-          >
-            Clear all
-          </a>
-        )}
-        <button type="button" data-drawer-close class={buttonClass("ghost", "sm")}>
-          Done
-        </button>
-      </div>
-    </div>
-    <div data-drawer-body class="max-h-[70vh] overflow-y-auto p-4"></div>
-  </dialog>
-</div>
-
-<script>
-  document.querySelectorAll<HTMLElement>("[data-grove-filter-drawer]").forEach((root) => {
-    const dialog = root.querySelector<HTMLDialogElement>("[data-drawer-dialog]");
-    const content = root.querySelector<HTMLElement>("[data-drawer-content]");
-    const body = root.querySelector<HTMLElement>("[data-drawer-body]");
-    const open = root.querySelector<HTMLButtonElement>("[data-drawer-open]");
-    const close = root.querySelector<HTMLButtonElement>("[data-drawer-close]");
-    if (!dialog || !content || !body || !open) return;
-
-    const mobile = window.matchMedia("(max-width: 47.999rem)");
-    const place = () => {
-      // One copy of the filter markup, moved between the inline slot
-      // (desktop) and the dialog body (mobile).
-      if (mobile.matches) {
-        body.append(...content.children);
-        content.classList.add("hidden");
-      } else {
-        if (dialog.open) dialog.close();
-        content.append(...body.children);
-        content.classList.remove("hidden");
-      }
-    };
-    place();
-    mobile.addEventListener("change", place);
-
-    open.addEventListener("click", () => dialog.showModal());
-    close?.addEventListener("click", () => dialog.close());
-    dialog.addEventListener("click", (event) => {
-      // Backdrop click closes: the dialog element itself is the
-      // target only when the click lands outside the panel content.
-      if (event.target === dialog) dialog.close();
-    });
-  });
-</script>

package/src/ui/PageHeader.astro

@@ -1,39 +0,0 @@
----
-/**
- * PageHeader — the page's title block. Always renders a semantic
- * heading (h1 by default — every route needs exactly one) with an
- * optional eyebrow and description.
- *
- * For section headings INSIDE a page keep using `SectionHeader`
- * (layouts/), which defaults to h2/h3.
- */
-
-interface Props {
-  eyebrow?: string;
-  title: string;
-  description?: string;
-  /** Escape hatch for embedded use; the default 1 is the point. */
-  level?: 1 | 2;
-  class?: string;
-}
-
-const { eyebrow, title, description, level = 1, class: className = "" } = Astro.props;
-const Heading = `h${level}` as "h1" | "h2";
----
-
-<header class={`flex flex-col gap-1 ${className}`}>
-  {eyebrow && (
-    <span class="text-2xs font-medium uppercase tracking-wider text-muted-foreground">
-      {eyebrow}
-    </span>
-  )}
-  <Heading class="m-0 text-[1.875rem] font-semibold tracking-tight text-foreground sm:text-[2.125rem]">
-    {title}
-  </Heading>
-  {description && (
-    <p class="m-0 mt-1 max-w-[64ch] text-[0.9375rem] leading-relaxed text-muted-foreground">
-      {description}
-    </p>
-  )}
-  <slot />
-</header>

package/src/ui/SearchField.astro

@@ -1,106 +0,0 @@
----
-/**
- * SearchField — labeled search input with the leading glass icon.
- *
- * The label is visually hidden but always present; placeholder text
- * is display copy, not the accessible name. Pass the derived
- * placeholder from `getDirectoryIndexModel().searchPlaceholder` so it
- * only names ENABLED facets.
- *
- * `shortcut` renders the `/` hint and wires the global key handler.
- * The hint is hidden once the field has focus — it is an invitation,
- * not a persistent label — and on coarse pointers, where there is no
- * key to press.
- */
-
-interface Props {
-  label: string;
-  name?: string;
-  id?: string;
-  value?: string;
-  placeholder?: string;
-  /** Show the `/` hint and focus this field when `/` is pressed. */
-  shortcut?: boolean;
-  class?: string;
-}
-
-const {
-  label,
-  name = "q",
-  id = "search-input",
-  value = "",
-  placeholder,
-  shortcut = false,
-  class: className = "",
-} = Astro.props;
----
-
-<label class={`grove-search relative block ${className}`}>
-  <span class="sr-only">{label}</span>
-  <svg
-    viewBox="0 0 16 16"
-    width="16"
-    height="16"
-    aria-hidden="true"
-    class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
-    fill="currentColor"
-  >
-    <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.5 4.5 0 1 0-9 0 4.5 4.5 0 0 0 9 0Z" />
-  </svg>
-  <input
-    id={id}
-    type="search"
-    name={name}
-    value={value}
-    placeholder={placeholder}
-    autocomplete="off"
-    data-search-input
-    class="peer h-10 w-full rounded-md border border-input bg-background py-2 pl-9 pr-10 text-sm text-foreground placeholder:text-muted-foreground focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring/20 [&::-webkit-search-cancel-button]:appearance-none"
-  />
-  {shortcut && (
-    <kbd
-      data-search-hint
-      aria-hidden="true"
-      class="pointer-events-none absolute right-2 top-1/2 hidden h-6 w-6 -translate-y-1/2 select-none items-center justify-center rounded-md border border-border bg-secondary font-mono text-[11px] leading-none text-muted-foreground peer-focus:!hidden peer-not-placeholder-shown:hidden sm:inline-flex"
-      >/</kbd
-    >
-  )}
-  <button
-    type="button"
-    data-search-clear
-    hidden={!value}
-    aria-label="Clear search"
-    class="absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35"
-  >
-    <svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true" fill="currentColor">
-      <path
-        d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"
-      />
-    </svg>
-  </button>
-</label>
-
-{shortcut && (
-  <script>
-    // `/` focuses the directory search from anywhere on the page, but
-    // never while the visitor is already typing somewhere — otherwise
-    // the shortcut eats a literal slash out of another field.
-    document.addEventListener("keydown", (event) => {
-      if (event.key !== "/" || event.metaKey || event.ctrlKey || event.altKey) return;
-      const active = document.activeElement as HTMLElement | null;
-      if (
-        active &&
-        (active.tagName === "INPUT" ||
-          active.tagName === "TEXTAREA" ||
-          active.tagName === "SELECT" ||
-          active.isContentEditable)
-      )
-        return;
-      const input = document.querySelector("[data-search-input]");
-      if (!(input instanceof HTMLInputElement)) return;
-      event.preventDefault();
-      input.focus();
-      input.select();
-    });
-  </script>
-)}

package/src/ui/button.test.ts

@@ -1,54 +0,0 @@
-import { readFileSync } from "node:fs";
-import { resolve } from "node:path";
-import { describe, expect, it } from "vitest";
-import { buttonClass, chipClass, filterTriggerClass, lensTabClass } from "./button.js";
-
-describe("button class builders", () => {
-  it("keeps selection state on the selected tokens, never the brand primary", () => {
-    for (const cls of [
-      buttonClass("selected"),
-      filterTriggerClass(true),
-      lensTabClass(true),
-    ]) {
-      expect(cls).toContain("bg-selected");
-      expect(cls).not.toContain("bg-primary");
-    }
-  });
-
-  it("uses the brand primary only for the primary variant", () => {
-    expect(buttonClass("primary")).toContain("bg-primary");
-    expect(buttonClass("secondary")).not.toContain("bg-primary");
-  });
-
-  it("guarantees a 44px mobile hit target on md and lg sizes", () => {
-    expect(buttonClass("secondary", "md")).toContain("max-sm:min-h-11");
-    expect(buttonClass("secondary", "lg")).toContain("h-11");
-    expect(filterTriggerClass(false)).toContain("max-sm:min-h-11");
-    expect(lensTabClass(false)).toContain("max-sm:min-h-11");
-  });
-
-  it("keeps the filter-trigger hook class through client reassignment", () => {
-    expect(filterTriggerClass(true)).toContain("grove-filter-trigger");
-    expect(filterTriggerClass(false)).toContain("grove-filter-trigger");
-  });
-
-  it("is the single source for chip classes on both server and client", () => {
-    // The browse page (server) and DirectoryIndexClient (client JS)
-    // must render byte-identical chips. Both now import chipClass —
-    // assert neither has regressed to an inline copy of the string.
-    const clientSource = readFileSync(
-      resolve(import.meta.dirname, "../components/DirectoryIndexClient.astro"),
-      "utf8",
-    );
-    const serverPage = readFileSync(
-      resolve(import.meta.dirname, "../../../../apps/example/src/components/DirectoryBrowse.astro"),
-      "utf8",
-    );
-    expect(clientSource).toContain("chipClass()");
-    expect(serverPage).toContain("chipClass()");
-    const inlineChip = "min-h-5 items-center justify-center gap-1 rounded-full";
-    expect(clientSource).not.toContain(inlineChip);
-    expect(serverPage).not.toContain(inlineChip);
-    expect(chipClass()).toContain(inlineChip);
-  });
-});

package/src/ui/button.ts

@@ -1,107 +0,0 @@
-/**
- * Button / chip class builders — the single source for interactive
- * control styling.
- *
- * Plain TS (not an .astro component) on purpose: `DirectoryIndexClient`
- * rebuilds pagination links and active-filter chips in CLIENT-side JS,
- * and those class strings must stay byte-identical with the server
- * render. Both sides import these builders, so they cannot drift.
- *
- * Variant semantics (see styles.css):
- * - `primary`   — the brand action (config `theme.primaryColor`).
- * - `secondary` — default chrome buttons.
- * - `outline` / `ghost` — quieter chrome.
- * - `selected`  — "you are here" state (active filter, current lens,
- *   current page). Neutral inversion via the `selected` tokens —
- *   deliberately NOT the brand primary, so green never doubles as a
- *   selection indicator.
- */
-
-export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "selected";
-/** `bare` emits no size classes — pass custom geometry via `extra`. */
-export type ButtonSize = "sm" | "md" | "lg" | "bare";
-
-const BASE =
-  "inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35";
-
-/**
- * `md`/`lg` guarantee a ≥44px hit target on small viewports
- * (`max-sm:min-h-11`) while keeping the compact desktop height.
- */
-const SIZES: Record<ButtonSize, string> = {
-  sm: "h-8 px-3 text-sm",
-  md: "h-9 px-3 text-sm max-sm:min-h-11",
-  lg: "h-11 px-4 text-sm",
-  bare: "",
-};
-
-const VARIANTS: Record<ButtonVariant, string> = {
-  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
-  secondary: "border-border bg-secondary text-foreground hover:bg-accent",
-  outline: "border-border bg-transparent text-foreground hover:bg-accent",
-  ghost: "text-foreground hover:bg-accent",
-  selected: "bg-selected text-selected-foreground hover:bg-selected/90",
-};
-
-export function buttonClass(
-  variant: ButtonVariant = "secondary",
-  size: ButtonSize = "sm",
-  extra = "",
-): string {
-  return [BASE, SIZES[size], VARIANTS[variant], extra].filter(Boolean).join(" ");
-}
-
-/**
- * Layout extras for pagination controls — shared by `Pagination.astro`
- * and the client-side pagination rebuild in `DirectoryIndexClient`.
- */
-export const PAGINATION_EXTRA = "min-w-9 px-2 py-1.5 text-2xs";
-
-/**
- * The dead end of a pagination row — "Previous" on page 1.
- *
- * Dimming to `opacity-40` put it at 3.37:1 against the dark surface,
- * which is a contrast failure, not a disabled state. 60% still reads
- * as unavailable and clears 4.5:1.
- */
-export const PAGINATION_DISABLED = "pointer-events-none opacity-60";
-
-/**
- * Facet filter trigger (the "Stack: Any" dropdown buttons). Includes
- * the `grove-filter-trigger` hook class because the client script
- * reassigns the whole className when the active state changes — the
- * hook must survive that reassignment.
- */
-export function filterTriggerClass(active: boolean): string {
-  return [
-    "grove-filter-trigger",
-    BASE,
-    "h-9 px-3 text-[0.8125rem] max-sm:min-h-11",
-    active ? `${VARIANTS.selected} hover:text-selected-foreground` : VARIANTS.secondary,
-  ].join(" ");
-}
-
-/**
- * Lens tab (the All / Hot / Mature row). Same geometry as the filter
- * trigger; `data-lens-id` targeting keeps its own hook attribute.
- */
-export function lensTabClass(active: boolean): string {
-  return [
-    BASE,
-    "h-9 px-3 text-[0.8125rem] max-sm:min-h-11",
-    active ? `${VARIANTS.selected} hover:text-selected-foreground` : VARIANTS.secondary,
-  ].join(" ");
-}
-
-/**
- * Active-filter chip (the removable "Stack: Python ×" pills). One
- * definition for the server render and the client rebuild.
- */
-export function chipClass(extra = ""): string {
-  return [
-    "inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground transition-colors hover:border-ink-400",
-    extra,
-  ]
-    .filter(Boolean)
-    .join(" ");
-}