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>

apps/planner/app/routes.ts

@@ -9,4 +9,9 @@ export default [
   route("api/pois", "routes/api.pois.ts"),
   route("api/save-to-journal", "routes/api.save-to-journal.ts"),
   route("session/:id", "routes/session.$id.tsx"),
+  // Dev-only component gallery for the shared @trails-cool/ui primitives —
+  // our lightweight stand-in for Storybook. Not compiled in production builds.
+  ...(process.env.NODE_ENV === "production"
+    ? []
+    : [route("dev/ui", "routes/dev.ui.tsx")]),
 ] satisfies RouteConfig;

apps/planner/app/routes/dev.ui.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+import { Badge, Button, Card, Input } from "@trails-cool/ui";
+
+/**
+ * Dev-only gallery for the shared UI primitives. Renders every primitive in
+ * its variants/states on one page so components can be built and eyeballed in
+ * isolation — the lightweight alternative to Storybook. Registered only in
+ * non-production builds (see routes.ts).
+ */
+function Section({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <section className="space-y-3">
+      <h2 className="font-mono text-xs uppercase tracking-wider text-text-lo">
+        {title}
+      </h2>
+      <div className="flex flex-wrap items-center gap-3">{children}</div>
+    </section>
+  );
+}
+
+export default function DevUi() {
+  return (
+    <main className="mx-auto max-w-3xl space-y-10 p-10">
+      <header className="space-y-1">
+        <h1 className="text-2xl font-semibold text-text-hi">UI primitives</h1>
+        <p className="text-sm text-text-md">
+          Shared <code className="font-mono">@trails-cool/ui</code> components on
+          the design-system tokens.
+        </p>
+      </header>
+
+      <Section title="Button · variants">
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="primary" disabled>
+          Disabled
+        </Button>
+      </Section>
+
+      <Section title="Button · sizes">
+        <Button size="sm">Small</Button>
+        <Button size="md">Medium</Button>
+      </Section>
+
+      <Section title="Badge · tones">
+        <Badge>Neutral</Badge>
+        <Badge tone="accent">Elevation</Badge>
+        <Badge tone="stop">NIGHT 2</Badge>
+      </Section>
+
+      <Section title="Input">
+        <div className="w-72">
+          <Input placeholder="Route name…" />
+        </div>
+        <div className="w-72">
+          <Input value="Alpenüberquerung" readOnly />
+        </div>
+      </Section>
+
+      <Section title="Card">
+        <Card className="w-64">
+          <h3 className="font-medium text-text-hi">Subtle card</h3>
+          <p className="mt-1 text-sm text-text-md">On a subtle surface tone.</p>
+        </Card>
+        <Card raised className="w-64">
+          <h3 className="font-medium text-text-hi">Raised card</h3>
+          <p className="mt-1 text-sm text-text-md">Elevated with a soft shadow.</p>
+        </Card>
+      </Section>
+    </main>
+  );
+}

apps/planner/app/styles.css

@@ -1,6 +1,9 @@
 @import "tailwindcss";
 @import "@trails-cool/ui/theme.css";
 
+/* Scan the shared UI package so its token utility classes are generated. */
+@source "../../../packages/ui/src";
+
 @keyframes slide {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(400%); }