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/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);
+  });
+});