feat(ui): shared primitives (Button, Badge, Card, Input) on the tokens

Second step of the visual-redesign (tokens -> primitives -> surfaces):
a small set of shared, token-driven primitives in @trails-cool/ui so
both apps compose from one styled vocabulary instead of hand-rolling
bg-white/text-gray-* per screen.

- @trails-cool/ui now ships React components (Button variants+sizes,
  Badge tones, Card raised/subtle, Input) plus a tiny cn() helper.
  React is a peer dep; package builds with no bundling step.
- Co-located jsdom unit tests (@testing-library/react) assert roles,
  token classes, variant switching, and behavior — run in the existing
  Unit Tests gate, cross-platform, no snapshot baseline needed.
- Tailwind @source directive in both apps' styles.css so the package's
  token utility classes get generated.
- Dev-only /dev/ui gallery route in the planner renders every primitive
  in all states — a zero-dependency stand-in for Storybook. Excluded
  from production builds (NODE_ENV guard in routes.ts).

No app surfaces are refactored yet; adopting the primitives in the
topbar/sidebar/etc. is the surface task groups.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

packages/ui/src/Badge.test.tsx

@@ -0,0 +1,22 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { Badge } from "./Badge.tsx";
+
+afterEach(cleanup);
+
+describe("Badge", () => {
+  it("renders neutral tone by default", () => {
+    render(<Badge>New</Badge>);
+    const badge = screen.getByText("New");
+    expect(badge.className).toContain("bg-bg-subtle");
+    expect(badge.className).toContain("text-text-md");
+  });
+
+  it("applies the stop tone for overnight markers", () => {
+    render(<Badge tone="stop">NIGHT</Badge>);
+    const badge = screen.getByText("NIGHT");
+    expect(badge.className).toContain("bg-stop-bg");
+    expect(badge.className).toContain("text-stop");
+  });
+});

packages/ui/src/Badge.tsx

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "./cn.ts";
+
+export type BadgeTone = "neutral" | "accent" | "stop";
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  tone?: BadgeTone;
+}
+
+const base =
+  "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium";
+
+const tones: Record<BadgeTone, string> = {
+  neutral: "bg-bg-subtle text-text-md",
+  accent: "bg-accent-bg text-accent",
+  stop: "bg-stop-bg text-stop",
+};
+
+export function Badge({ tone = "neutral", className, ...props }: BadgeProps) {
+  return <span className={cn(base, tones[tone], className)} {...props} />;
+}

packages/ui/src/Button.test.tsx

@@ -0,0 +1,55 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { Button } from "./Button.tsx";
+
+afterEach(cleanup);
+
+describe("Button", () => {
+  it("renders its children and defaults to type=button", () => {
+    render(<Button>Save</Button>);
+    const btn = screen.getByRole("button", { name: "Save" });
+    expect(btn).toHaveProperty("type", "button");
+  });
+
+  it("applies the primary variant token classes by default", () => {
+    render(<Button>Go</Button>);
+    const btn = screen.getByRole("button", { name: "Go" });
+    expect(btn.className).toContain("bg-accent");
+    expect(btn.className).toContain("text-text-inv");
+  });
+
+  it("switches variant and size classes", () => {
+    render(
+      <Button variant="ghost" size="sm">
+        Cancel
+      </Button>,
+    );
+    const btn = screen.getByRole("button", { name: "Cancel" });
+    expect(btn.className).toContain("text-text-md");
+    expect(btn.className).toContain("h-7");
+    expect(btn.className).not.toContain("bg-accent");
+  });
+
+  it("merges a caller className without dropping base classes", () => {
+    render(<Button className="w-full">Wide</Button>);
+    const btn = screen.getByRole("button", { name: "Wide" });
+    expect(btn.className).toContain("w-full");
+    expect(btn.className).toContain("rounded-md");
+  });
+
+  it("fires onClick and blocks it when disabled", () => {
+    const onClick = vi.fn();
+    const { rerender } = render(<Button onClick={onClick}>Tap</Button>);
+    fireEvent.click(screen.getByRole("button", { name: "Tap" }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <Button onClick={onClick} disabled>
+        Tap
+      </Button>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Tap" }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});

packages/ui/src/Button.tsx

@@ -0,0 +1,44 @@
+import type { ButtonHTMLAttributes } from "react";
+import { cn } from "./cn.ts";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost";
+export type ButtonSize = "sm" | "md";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+const base =
+  "inline-flex items-center justify-center gap-1.5 rounded-md font-medium " +
+  "transition-colors focus-visible:outline-none focus-visible:ring-2 " +
+  "focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-bg " +
+  "disabled:pointer-events-none disabled:opacity-50";
+
+const variants: Record<ButtonVariant, string> = {
+  primary: "bg-accent text-text-inv hover:bg-accent-dim",
+  secondary:
+    "border border-border bg-bg-raised text-text-hi hover:bg-bg-subtle",
+  ghost: "text-text-md hover:bg-bg-subtle hover:text-text-hi",
+};
+
+const sizes: Record<ButtonSize, string> = {
+  sm: "h-7 px-2.5 text-xs",
+  md: "h-9 px-3.5 text-sm",
+};
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  className,
+  type = "button",
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cn(base, variants[variant], sizes[size], className)}
+      {...props}
+    />
+  );
+}

packages/ui/src/Card.test.tsx

@@ -0,0 +1,22 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { Card } from "./Card.tsx";
+
+afterEach(cleanup);
+
+describe("Card", () => {
+  it("renders a subtle surface by default", () => {
+    render(<Card>body</Card>);
+    const card = screen.getByText("body");
+    expect(card.className).toContain("bg-bg-subtle");
+    expect(card.className).not.toContain("shadow-sm");
+  });
+
+  it("renders a raised surface with a shadow when raised", () => {
+    render(<Card raised>panel</Card>);
+    const card = screen.getByText("panel");
+    expect(card.className).toContain("bg-bg-raised");
+    expect(card.className).toContain("shadow-sm");
+  });
+});

packages/ui/src/Card.tsx

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "./cn.ts";
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  /** Raised surface with a soft shadow (topbar/sidebar panels). */
+  raised?: boolean;
+}
+
+export function Card({ raised = false, className, ...props }: CardProps) {
+  return (
+    <div
+      className={cn(
+        "rounded-lg border border-border p-4",
+        raised ? "bg-bg-raised shadow-sm" : "bg-bg-subtle",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

packages/ui/src/Input.test.tsx

@@ -0,0 +1,26 @@
+// @vitest-environment jsdom
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import { Input } from "./Input.tsx";
+
+afterEach(cleanup);
+
+describe("Input", () => {
+  it("defaults to type=text and forwards placeholder", () => {
+    render(<Input placeholder="Route name" />);
+    const input = screen.getByPlaceholderText("Route name");
+    expect(input).toHaveProperty("type", "text");
+    expect(input.className).toContain("border-border");
+  });
+
+  it("is controllable and forwards value changes", () => {
+    const values: string[] = [];
+    render(
+      <Input value="" onChange={(e) => values.push(e.currentTarget.value)} />,
+    );
+    fireEvent.change(screen.getByRole("textbox"), {
+      target: { value: "Alps" },
+    });
+    expect(values).toEqual(["Alps"]);
+  });
+});

packages/ui/src/Input.tsx

@@ -0,0 +1,15 @@
+import type { InputHTMLAttributes } from "react";
+import { cn } from "./cn.ts";
+
+export type InputProps = InputHTMLAttributes<HTMLInputElement>;
+
+const base =
+  "h-9 w-full rounded-md border border-border bg-bg-raised px-3 text-sm " +
+  "text-text-hi placeholder:text-text-lo transition-colors " +
+  "focus-visible:border-accent focus-visible:outline-none " +
+  "focus-visible:ring-2 focus-visible:ring-accent-border " +
+  "disabled:cursor-not-allowed disabled:opacity-50";
+
+export function Input({ className, type = "text", ...props }: InputProps) {
+  return <input type={type} className={cn(base, className)} {...props} />;
+}

packages/ui/src/cn.ts

@@ -0,0 +1,4 @@
+/** Join class names, dropping falsy values. Tiny, dependency-free. */
+export function cn(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(" ");
+}

packages/ui/src/index.ts

@@ -0,0 +1,9 @@
+export { cn } from "./cn.ts";
+export { Button } from "./Button.tsx";
+export type { ButtonProps, ButtonVariant, ButtonSize } from "./Button.tsx";
+export { Badge } from "./Badge.tsx";
+export type { BadgeProps, BadgeTone } from "./Badge.tsx";
+export { Card } from "./Card.tsx";
+export type { CardProps } from "./Card.tsx";
+export { Input } from "./Input.tsx";
+export type { InputProps } from "./Input.tsx";