@vaam-apps/ui 0.1.0 → 0.1.1

package/src/components/patterns/payload-inspector.tsx

@@ -1,157 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { cn } from "../../lib/cn";
-// D18: `Tabs` was rebuilt as `ValueTabs` (Headless UI `TabGroup` behind a
-// value-based adapter) — aliased on import so nothing below this line
-// changes; see tabs.tsx's own module doc for the full mechanism.
-import {
-  ValueTabs as Tabs,
-  ValueTabsContent as TabsContent,
-  ValueTabsList as TabsList,
-  ValueTabsTrigger as TabsTrigger,
-} from "../primitives/tabs";
-
-export interface PayloadExchange {
-  direction: "request" | "response" | "callback";
-  method?: string;
-  url?: string;
-  status?: number;
-  durationMs?: number;
-  headers?: Record<string, string>;
-  body?: string;
-  error?: string;
-}
-
-export interface PayloadInspectorProps {
-  exchanges: PayloadExchange[];
-  defaultOpen?: number;
-  /** Bodies over this size collapse behind an explicit "load full payload" action. */
-  maxInlineBytes?: number;
-}
-
-function StatusChip({ status }: { status?: number | undefined }) {
-  if (status == null) return null;
-  const ok = status < 400;
-  return (
-    <span
-      className={cn(
-        "rounded-sm border px-1.5 py-0.5 font-mono text-caption",
-        ok
-          ? "border-edge text-muted-foreground"
-          : "border-state-danger-border text-state-danger-fg",
-      )}
-    >
-      {status}
-    </span>
-  );
-}
-
-function ExchangeBody({
-  exchange,
-  maxInlineBytes,
-}: {
-  exchange: PayloadExchange;
-  maxInlineBytes: number;
-}) {
-  const [forceLoad, setForceLoad] = useState(false);
-  const body = exchange.body ?? "";
-  const oversized = !forceLoad && body.length > maxInlineBytes;
-
-  return (
-    <Tabs defaultValue="body">
-      <TabsList>
-        <TabsTrigger value="body">Body</TabsTrigger>
-        <TabsTrigger value="headers">Headers</TabsTrigger>
-        {exchange.error != null && <TabsTrigger value="error">Error</TabsTrigger>}
-      </TabsList>
-      <TabsContent value="body">
-        {body.length === 0 ? (
-          <p className="py-3 text-caption text-subtle-foreground">No response body was recorded.</p>
-        ) : oversized ? (
-          <button
-            type="button"
-            onClick={() => setForceLoad(true)}
-            className="py-3 text-caption text-foreground underline"
-          >
-            Load full payload ({(body.length / 1024).toFixed(1)} KB)
-          </button>
-        ) : (
-          <pre className="max-h-96 overflow-auto rounded-sm bg-base-100 p-3 font-mono text-[12px] text-foreground">
-            {body}
-          </pre>
-        )}
-      </TabsContent>
-      <TabsContent value="headers">
-        {exchange.headers == null || Object.keys(exchange.headers).length === 0 ? (
-          <p className="py-3 text-caption text-subtle-foreground">No headers recorded.</p>
-        ) : (
-          <dl className="grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 py-2 font-mono text-[12px]">
-            {Object.entries(exchange.headers).map(([key, value]) => (
-              <div key={key} className="contents">
-                <dt className="text-subtle-foreground">{key}</dt>
-                <dd className="break-all text-foreground">{value}</dd>
-              </div>
-            ))}
-          </dl>
-        )}
-      </TabsContent>
-      {exchange.error != null && (
-        <TabsContent value="error">
-          <pre className="max-h-96 overflow-auto rounded-sm border border-state-danger-border bg-state-danger-bg p-3 font-mono text-[12px] text-state-danger-fg">
-            {exchange.error}
-          </pre>
-        </TabsContent>
-      )}
-    </Tabs>
-  );
-}
-
-/**
- * Raw provider request/response and DLR bodies, verbatim (design doc §5.3).
- * No syntax-highlighting palette on purpose (§1.3): a rainbow JSON block
- * would be the loudest thing on a diagnostic screen. Uses native
- * `<details>` for the accordion behaviour — free keyboard/ARIA semantics,
- * no extra Radix dependency needed for a plain expand/collapse.
- */
-export function PayloadInspector({
-  exchanges,
-  defaultOpen = 0,
-  maxInlineBytes = 262144,
-}: PayloadInspectorProps) {
-  return (
-    <div className="flex flex-col gap-2">
-      {exchanges.map((exchange, i) => (
-        <details
-          // biome-ignore lint/suspicious/noArrayIndexKey: exchanges are a fixed, ordered, append-only log
-          key={i}
-          open={i === defaultOpen}
-          className="rounded-sm border border-edge bg-surface-2"
-        >
-          <summary className="flex cursor-pointer list-none items-center gap-2 px-3 py-2 text-body">
-            <span className="font-mono text-micro text-muted-foreground">{exchange.direction}</span>
-            {exchange.method != null && (
-              <span className="font-mono text-caption text-foreground">{exchange.method}</span>
-            )}
-            {exchange.url != null && (
-              <span className="truncate font-mono text-caption text-subtle-foreground">
-                {exchange.url}
-              </span>
-            )}
-            <span className="ml-auto flex items-center gap-2">
-              <StatusChip status={exchange.status} />
-              {exchange.durationMs != null && (
-                <span className="font-mono text-caption text-subtle-foreground">
-                  {exchange.durationMs}ms
-                </span>
-              )}
-            </span>
-          </summary>
-          <div className="border-edge border-t px-3 pb-3">
-            <ExchangeBody exchange={exchange} maxInlineBytes={maxInlineBytes} />
-          </div>
-        </details>
-      ))}
-    </div>
-  );
-}

package/src/components/patterns/route-skeleton.tsx

@@ -1,77 +0,0 @@
-import { Skeleton } from "../primitives/skeleton";
-import { ScreenStack } from "./screen-layout";
-
-// #308's own mitigation half — a real, visible fallback for the
-// `<Suspense>` boundary every screen that reads `useSearchParams()`/
-// `useQueryStates()` (`nuqs`) must wrap itself in (Next.js requires this;
-// see AGENTS.md's own R6-adjacent note on `page.tsx` shells). The eight
-// screens that still need that boundary — `messages`, `webhooks`, `jobs`,
-// `workers`, `opt-outs`, `apps`, `users`, `audit-log` — used to pass
-// `fallback={null}`, which is exactly the shape #308 diagnosed: a
-// `<Suspense>` boundary is a real, load-bearing part of Next's streaming
-// SSR pipeline, and its reveal (the swap from the fallback to the real
-// tree) is `requestAnimationFrame`-gated by both React's own inline
-// completion script (`$RC` schedules `$RV` via rAF) and the hydration
-// retry that follows it. A backgrounded/non-composited tab — proven live
-// against this exact build, see the PR/issue thread — never runs that rAF
-// callback, so `fallback={null}` rendered as a permanently empty `<main>`
-// with zero signal that anything was ever wrong. This is NOT a fix for
-// that mechanism (nothing in application code can make a browser paint a
-// hidden tab), it only makes the wait visible instead of indistinguishable
-// from broken. Ordinary, foregrounded browser tabs reveal the real
-// boundary within one frame regardless, mitigation or not.
-//
-// One reusable component rather than nine bespoke skeletons — every
-// affected screen needs the same shape (a title bar, an optional filter
-// row, several table-row-shaped blocks), and `Skeleton` itself already
-// forbids shimmer (design doc §3.8/§5.2, see that primitive's own doc)
-// so there is no per-screen animation timing to keep in sync anyway. Per
-// R6, this lives in `@vaam-apps/ui`, not duplicated per route.
-
-export interface RouteSkeletonProps {
-  /** How many table-row-shaped blocks to render. Doesn't need to match the
-   * real screen's row height exactly (`Skeleton`'s own doc asks for that
-   * only where a skeleton stands in for an already-mounted, known-shape
-   * table) — this fallback exists for a `<main>` that hasn't rendered
-   * *anything* app-specific yet, not a loading row inside a mounted
-   * table. */
-  rows?: number;
-  /** Whether to render a filter-bar-shaped skeleton row above the table
-   * rows — most of the eight screens this serves have one (a search box,
-   * a couple of selects); a couple don't. */
-  withFilterBar?: boolean;
-}
-
-export function RouteSkeleton({ rows = 6, withFilterBar = true }: RouteSkeletonProps) {
-  return (
-    <ScreenStack>
-      {/* Not `ScreenHeader` here: its `title`/`description` slots render
-       * inside `<h1>`/`<p>`, and `<p>` cannot contain a block-level
-       * element like `Skeleton`'s own `<div>` — the browser's HTML parser
-       * gives `<p>` an implied end tag the instant it meets one (no such
-       * rule applies to `<h1>`), silently splitting `<p><div/></p>` into
-       * two siblings and reparenting the div outside the paragraph. That
-       * is a real, reproduced-live hydration-mismatch shape, not a
-       * hypothetical — found by rendering this exact component before
-       * this comment was written. A plain header block, skeleton bars as
-       * direct children, sidesteps it entirely. */}
-      <div className="flex flex-col gap-1">
-        <Skeleton className="h-7 w-48" />
-        <Skeleton className="h-4 w-80" />
-      </div>
-      {withFilterBar && (
-        <div className="flex flex-wrap items-center gap-2">
-          <Skeleton className="h-9 w-64" />
-          <Skeleton className="h-9 w-32" />
-          <Skeleton className="h-9 w-32" />
-        </div>
-      )}
-      <div className="flex flex-col gap-2">
-        {Array.from({ length: rows }, (_, i) => (
-          // biome-ignore lint/suspicious/noArrayIndexKey: static placeholder rows, a fixed count, never reordered/removed individually.
-          <Skeleton key={i} className="h-11 w-full" />
-        ))}
-      </div>
-    </ScreenStack>
-  );
-}

package/src/components/patterns/screen-layout.tsx

@@ -1,44 +0,0 @@
-import type { ReactNode } from "react";
-import { cn } from "../../lib/cn";
-
-// R6 (AGENTS.md): every route screen was hand-rolling the identical
-// `<div className="flex flex-col gap-6">` wrapper plus a
-// `<h1 className="font-medium text-foreground text-title">`/description
-// `<header>` pair — confirmed by grep, ten of eleven screens under
-// `frontends/apps/admin/app/*/*.tsx` had this exact pair before this file
-// existed. R6's own test ("if a second route would plausibly use it, it
-// belongs in `frontends/packages/ui`") is not a close call here. Extracted
-// verbatim from `jobs-screen.tsx`/`workers-screen.tsx`/`opt-outs-screen.tsx`
-// — same classes, not a redesign.
-//
-// New file, added while several route groups were being moved onto R6 in
-// parallel — expect another agent's PR to add an equivalent. If both land,
-// reconcile onto one of the two rather than keeping both: same shape,
-// different name is worse than either alone.
-
-export interface ScreenStackProps {
-  children: ReactNode;
-  className?: string;
-}
-
-/** The page-level vertical rhythm every screen composes its sections into. */
-export function ScreenStack({ children, className }: ScreenStackProps) {
-  return <div className={cn("flex flex-col gap-6", className)}>{children}</div>;
-}
-
-export interface ScreenHeaderProps {
-  title: ReactNode;
-  description?: ReactNode;
-}
-
-/** A screen's own `<h1>` + one-line description, styled once. */
-export function ScreenHeader({ title, description }: ScreenHeaderProps) {
-  return (
-    <header className="flex flex-col gap-1">
-      <h1 className="font-medium text-foreground text-title">{title}</h1>
-      {description != null && (
-        <p className="max-w-xl text-body text-muted-foreground">{description}</p>
-      )}
-    </header>
-  );
-}

package/src/components/patterns/stale-write-banner.tsx

@@ -1,44 +0,0 @@
-import { Button } from "../primitives/button";
-import { InlineBanner } from "./inline-banner";
-
-/**
- * "Someone else changed this row since it loaded" — the banner for a
- * `412 Precondition Failed` save.
- *
- * Shared rather than route-local because the thing it reports is not
- * route-local: #59 gave `@version` to ten operator-editable models and
- * threaded ETag/`If-Match` through the generated REST layer, so *every*
- * edit screen in the console can lose this race. `apps/` and `users/` each
- * hand-rolled it; the rest will need it as their edit screens land.
- *
- * The two hand-rolled copies differed in exactly one way — one hardcoded
- * its sentence, the other took a `message` prop. The prop version is
- * strictly more general, so it wins, with the hardcoded sentence as the
- * default so the common case stays a one-line call.
- *
- * `warning`, not `danger`: nothing was lost and nothing is broken. The
- * write was *refused* precisely so the other operator's edit survives —
- * which is the mechanism working, not failing. Reloading resolves it.
- * `packages/gateway/src/errors.ts`'s `isStaleWriteError` exists to
- * distinguish this from a genuine conflict for the same reason.
- */
-export function StaleWriteBanner({
-  message = "Someone else changed this row since it loaded. Reload to see their edit.",
-  onReload,
-}: {
-  message?: string | undefined;
-  onReload: () => void;
-}) {
-  return (
-    <InlineBanner variant="warning" className="flex items-center justify-between gap-3">
-      <span>{message}</span>
-      {/* `type="button"` is load-bearing, not boilerplate: both call sites
-          render this *inside* a `<form>`, where a button's default type is
-          `submit`. Dropping it would make "Reload" submit the very edit the
-          banner is warning has gone stale. */}
-      <Button type="button" variant="secondary" size="sm" onClick={onReload}>
-        Reload
-      </Button>
-    </InlineBanner>
-  );
-}

package/src/components/patterns/state-timeline.tsx

@@ -1,229 +0,0 @@
-import { Info } from "lucide-react";
-import type { ReactNode } from "react";
-import { cn } from "../../lib/cn";
-import { Skeleton } from "../primitives/skeleton";
-import { StateMark } from "../status/state-mark";
-import type { StatusSystem } from "../status/status-tokens";
-import { type PayloadExchange, PayloadInspector } from "./payload-inspector";
-
-export interface StateTransition<S extends string = string> {
-  toState: S;
-  /** ISO 8601 timestamp. */
-  at: string;
-  actor?: string;
-  providerKey?: string;
-  workerNode?: string;
-  attempt?: number;
-  maxAttempts?: number;
-  payload?: PayloadExchange[];
-}
-
-export interface StateTimelineProps<S extends string = string> {
-  transitions: StateTransition<S>[];
-  /** The state machine's presentation table — the same one its
-   * `createStatusPill` is bound to, so a timeline and a pill can never
-   * disagree about what a state looks like. */
-  system: StatusSystem<S>;
-  currentState: S;
-  /** Whether the timeline has stopped. Passed in rather than derived from
-   * `system[currentState].family`: terminality is the server's fact, and
-   * a presentational table is the wrong place to learn it from — see
-   * `status-tokens.ts`'s own warning. */
-  isTerminal: boolean;
-  /**
-   * Any IANA zone name, e.g. `"UTC"`, `"Africa/Douala"`, `"America/New_York"`.
-   * The UTC-offset suffix is derived from the zone and the instant, so it
-   * stays correct across DST and for zones this library has never heard
-   * of. (It used to be a two-value union with the suffix hard-coded as
-   * `"Z"` or `"+01"` — correct only for the two zones that union named.)
-   */
-  timezone?: string;
-  /**
-   * Per-state explanatory notes, rendered beneath the node that entered
-   * that state.
-   *
-   * The point is states that look like bugs to anyone who does not
-   * already know the product decision behind them — "we never learned the
-   * outcome, and deliberately will not retry". Without the note the
-   * operator's next move is to open a SQL client, which is the outcome a
-   * timeline exists to prevent. Supplied by the caller because the
-   * explanation is domain knowledge, not presentation.
-   */
-  annotations?: Partial<Record<S, string>> | undefined;
-}
-
-/**
- * `2026-09-11 14:03:07 +01` — sortable, unambiguous, and carrying its own
- * offset so a screenshot pasted into a ticket is still interpretable.
- *
- * The offset is read out of `Intl`'s own `shortOffset` part rather than
- * assumed from the zone name: it is the only way to be right across DST
- * and across zones this component has never been told about. `UTC` keeps
- * its conventional `Z` rather than the `GMT` that `shortOffset` yields.
- */
-function formatAbsolute(iso: string, timezone: string): string {
-  const date = new Date(iso);
-  const formatter = new Intl.DateTimeFormat("en-CA", {
-    timeZone: timezone,
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    hourCycle: "h23",
-    timeZoneName: "shortOffset",
-  });
-  const parts = formatter.formatToParts(date);
-  const stamp = parts
-    .filter((part) => part.type !== "timeZoneName" && part.type !== "literal")
-    .reduce<string[]>((acc, part) => {
-      acc.push(part.value);
-      return acc;
-    }, []);
-  const [year, month, day, hour, minute, second] = stamp;
-  // "GMT+1" / "GMT-05:00" / "GMT" → "+01" / "-05:00" / "Z".
-  const raw = parts.find((part) => part.type === "timeZoneName")?.value ?? "";
-  const offset = raw === "GMT" ? "Z" : raw.replace(/^GMT/, "").replace(/^([+-])(\d)$/, "$10$2");
-  return `${year}-${month}-${day} ${hour}:${minute}:${second} ${offset}`;
-}
-
-function formatElapsed(ms: number): string {
-  if (ms < 1000) return `+${ms}ms`;
-  if (ms < 60_000) return `+${(ms / 1000).toFixed(3)}s`;
-  const totalSeconds = Math.round(ms / 1000);
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = totalSeconds % 60;
-  if (minutes < 60) return `+${minutes}m ${String(seconds).padStart(2, "0")}s`;
-  const hours = Math.floor(minutes / 60);
-  return `+${hours}h ${String(minutes % 60).padStart(2, "0")}m`;
-}
-
-function AnnotationNode({ text }: { text: string }) {
-  return (
-    <li className="relative flex gap-3 pb-4 pl-0">
-      <div className="flex w-4 shrink-0 justify-center">
-        <Info size={14} strokeWidth={1.5} className="mt-0.5 text-muted-foreground" />
-      </div>
-      <div className="min-w-0 flex-1 rounded-sm border border-edge bg-surface-2 px-3 py-2 text-caption text-muted-foreground">
-        {text}
-      </div>
-    </li>
-  );
-}
-
-/**
- * A record's transition history: one node per state entered, with elapsed
- * time between them, optional per-transition metadata, and an optional
- * payload inspector.
- *
- * Generic over the state machine — pass the same [`StatusSystem`] its
- * pill is bound to. It used to be hard-wired to one application's message
- * states, including that application's own explanatory notes and a
- * two-value timezone union; all three are now the caller's.
- */
-export function StateTimeline<S extends string>({
-  transitions,
-  system,
-  currentState,
-  isTerminal,
-  timezone = "UTC",
-  annotations,
-}: StateTimelineProps<S>) {
-  if (transitions.length === 0) {
-    return (
-      <ol className="flex flex-col gap-0">
-        {[0, 1, 2].map((i) => (
-          <li key={i} className="flex items-center gap-3 py-2">
-            <Skeleton className="h-4 w-4 rounded-full" />
-            <Skeleton className="h-4 w-40" />
-          </li>
-        ))}
-      </ol>
-    );
-  }
-
-  const rows: ReactNode[] = [];
-
-  transitions.forEach((transition, i) => {
-    const previous = transitions[i - 1];
-    const elapsedMs = previous
-      ? new Date(transition.at).getTime() - new Date(previous.at).getTime()
-      : null;
-    const meta = system[transition.toState];
-    const isLast = i === transitions.length - 1;
-
-    rows.push(
-      <li
-        key={`${transition.toState}-${transition.at}`}
-        className="relative flex gap-3 pb-6 last:pb-0"
-      >
-        <div className="flex w-4 shrink-0 flex-col items-center">
-          <StateMark meta={meta} size={16} className="text-foreground" />
-          {!isLast && <span className="mt-1 w-px flex-1 bg-[var(--state-mark-rail,var(--edge))]" />}
-        </div>
-        <div className="min-w-0 flex-1">
-          <div className="flex items-baseline justify-between gap-2">
-            <p className="font-medium text-body text-foreground">
-              {meta.label}{" "}
-              <span className="font-mono text-subtle-foreground">{transition.toState}</span>
-            </p>
-            <div className="shrink-0 text-right">
-              <p className="font-mono text-caption text-foreground">
-                {formatAbsolute(transition.at, timezone)}
-              </p>
-              {elapsedMs != null && (
-                <p className="font-mono text-caption text-subtle-foreground">
-                  {formatElapsed(elapsedMs)}
-                </p>
-              )}
-            </div>
-          </div>
-          {(transition.providerKey || transition.workerNode || transition.attempt) != null && (
-            <p className="mt-1 font-mono text-caption text-subtle-foreground">
-              {[
-                transition.providerKey,
-                transition.workerNode,
-                transition.attempt != null
-                  ? `attempt ${transition.attempt}${transition.maxAttempts ? `/${transition.maxAttempts}` : ""}`
-                  : null,
-              ]
-                .filter(Boolean)
-                .join(" · ")}
-            </p>
-          )}
-          {transition.payload != null && transition.payload.length > 0 && (
-            <div className="mt-2">
-              <PayloadInspector exchanges={transition.payload} defaultOpen={-1} />
-            </div>
-          )}
-        </div>
-      </li>,
-    );
-
-    const annotation = annotations?.[transition.toState];
-    if (annotation != null) {
-      rows.push(<AnnotationNode key={`${transition.toState}-annotation`} text={annotation} />);
-    }
-  });
-
-  // In-flight cap (design doc §5.3): the rail continues past the last node
-  // as a dashed segment ending in the current-state glyph, so "still
-  // moving" is readable without parsing. A terminal timeline instead ends
-  // the last node's own rail segment (no trailing cap at all).
-  if (!isTerminal) {
-    rows.push(
-      <li key="in-flight-cap" className="relative flex gap-3">
-        <div className="flex w-4 shrink-0 justify-center">
-          <span className="h-6 w-px border-edge-strong border-l border-dashed" aria-hidden="true" />
-        </div>
-        <div className="flex items-center gap-2 text-caption text-subtle-foreground">
-          <StateMark meta={system[currentState]} size={12} className="text-muted-foreground" />
-          <span>still moving</span>
-        </div>
-      </li>,
-    );
-  }
-
-  return <ol className={cn("flex flex-col")}>{rows}</ol>;
-}

package/src/components/primitives/badge.tsx

@@ -1,40 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import type { HTMLAttributes } from "react";
-import { cn } from "../../lib/cn";
-
-/**
- * Non-status tags only: app name, provider key, role, environment, sender
- * ID. Never use `Badge` for a message or job state — that's `StatusPill`'s
- * job (design doc §5.2); mixing them is how the status language erodes.
- *
- * D11: `cva()` replaces the previous `variant === "x" && "..."` conditional
- * chain, same classes. One deliberate D8 diff, not a byte-identical carry-
- * over: the previous base string hard-coded `rounded-sm`, which fought
- * daisyUI's own `.badge` rule (`border-radius: var(--radius-selector)`,
- * confirmed by reading `daisyui/components/badge.css` directly) at equal
- * specificity — a redundant override, not a deliberate choice, and for the
- * wrong tier besides: `--radius-selector` (8px) is this register's
- * small-control tier, `--radius-sm` now aliases `--radius-field` (12px).
- * Dropping the override lets daisyUI's own class govern radius, which is
- * exactly constraint 7 ("DaisyUI does the work") and the correct tier for
- * a tag-sized control.
- */
-export const badgeVariants = cva("badge font-mono text-caption", {
-  variants: {
-    variant: {
-      neutral: "badge-neutral",
-      outline: "badge-outline",
-    },
-  },
-  defaultVariants: { variant: "neutral" },
-});
-
-export type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>["variant"]>;
-
-export interface BadgeProps
-  extends HTMLAttributes<HTMLSpanElement>,
-    VariantProps<typeof badgeVariants> {}
-
-export function Badge({ className, variant, ...props }: BadgeProps) {
-  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
-}

package/src/components/primitives/button.tsx

@@ -1,54 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import type { ButtonHTMLAttributes } from "react";
-import { forwardRef } from "react";
-import { cn } from "../../lib/cn";
-
-// daisyUI does the heavy lifting (`btn-primary`, `btn-outline`, `btn-ghost`,
-// `btn-error`); the design doc's rule (§5.1) is that there is no
-// "success"/"warning" button variant — those hues are reserved for status,
-// so only these four exist. `btn-primary` is genuinely the achromatic
-// inverse fill (§1.3: near-black on light, near-white on dark) — `neutral`
-// is a *different*, deliberately quieter token (this theme's surface-3-ish
-// fill, used for badges) and using it here read as a washed-out primary
-// button in light theme; caught visually, not by inspection.
-//
-// D4/D11: rebuilt on `cva()` per docs/design/console-redesign.md §6.3 —
-// `Slot`/`asChild` are gone (nothing in this repo used `<Button asChild>`,
-// confirmed by grep before removing it), and `buttonVariants` is exported
-// standalone so a link that must look like a button reaches for the class
-// string directly: `<a className={buttonVariants({ variant: "secondary" })}>`.
-// `rounded-field` in the base string is the one deliberate D8 addition —
-// daisyUI's own `.btn` class already applies `--radius-field` per corner
-// internally, so this doesn't change the rendered radius, only makes the
-// D8 register explicit at the call site, matching §6.3's own sketch
-// verbatim.
-export const buttonVariants = cva("btn font-sans font-semibold rounded-field", {
-  variants: {
-    variant: {
-      primary: "btn-primary",
-      secondary: "btn-outline",
-      ghost: "btn-ghost",
-      destructive: "btn-error",
-    },
-    size: {
-      sm: "btn-sm",
-      md: "",
-      icon: "btn-square btn-sm",
-    },
-  },
-  defaultVariants: { variant: "primary", size: "md" },
-});
-
-export type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>;
-export type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>["size"]>;
-
-export interface ButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, ...props }, ref) => (
-    <button ref={ref} className={cn(buttonVariants({ variant, size }), className)} {...props} />
-  ),
-);
-Button.displayName = "Button";