feat(web): Storybook for offline UI design + light theme + brand spinner

Stand up Storybook so the management console can be designed without a running
host, plus the design-system work that surfaced along the way.

Storybook (@storybook/react-vite):
- Slim Start/Nitro-free vite config; the preview imports the app's real
  src/styles.css directly so the design tokens stay single-sourced (no mirror).
- Stories for the @unom/ui primitives (Button/Card/Inputs/Badge), brand marks,
  the AppShell (throwaway in-memory TanStack router), and every data-driven page
  (Dashboard/Host/Clients/Library/Settings) rendered offline via a window.fetch
  stub + typed fixtures. The route page components are exported so stories can
  render them.

Light theme:
- styles.css now carries a light :root (lavender, from the docs palette) with the
  existing violet chrome moved to .dark; the live console still pins html.dark by
  default, so this only adds the option (Storybook's toolbar toggles it).
- Fixes a stray `*/` inside a comment that prematurely closed it and silently
  broke Tailwind's @theme processing.

Spinner:
- The punktfunk lens recreated with motion/react: two circles surge through one
  another in depth (JS perspective scale + z-index — robust where mix-blend-mode
  flattens CSS preserve-3d) with a screen-blend lens highlight. Replaces the
  skeleton loading state in QueryState; removes ui/skeleton.tsx.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/stories/AppShell.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  RouterProvider,
+} from '@tanstack/react-router'
+import { AppShell } from '@/components/app-shell'
+
+// AppShell is built from TanStack Router <Link>s, so it needs a router context.
+// We stand up a throwaway in-memory router whose routes mirror the nav targets
+// (so links resolve + the active highlight works) and render the shell from the
+// root route. No loaders/data — purely for designing the chrome offline.
+function ShellHarness({ initialPath }: { initialPath: string }) {
+  const rootRoute = createRootRoute({
+    component: () => (
+      <AppShell>
+        <div className="space-y-3">
+          <h1 className="text-2xl font-semibold tracking-tight">Dashboard</h1>
+          <p className="text-muted-foreground">
+            Placeholder content — swap routes from the sidebar to preview the active state.
+          </p>
+        </div>
+      </AppShell>
+    ),
+  })
+
+  const navPaths = ['/', '/host', '/library', '/clients', '/pairing', '/settings']
+  const navRoutes = navPaths.map((path) =>
+    createRoute({ getParentRoute: () => rootRoute, path, component: () => null }),
+  )
+  // Splat so any other <Link> target still resolves without throwing.
+  const splat = createRoute({ getParentRoute: () => rootRoute, path: '$', component: () => null })
+
+  const router = createRouter({
+    routeTree: rootRoute.addChildren([...navRoutes, splat]),
+    history: createMemoryHistory({ initialEntries: [initialPath] }),
+  })
+
+  return <RouterProvider router={router} />
+}
+
+const meta = {
+  title: 'Shell/AppShell',
+  component: AppShell,
+  parameters: { layout: 'fullscreen' },
+  // AppShell requires `children`; the harness supplies the real content, so this
+  // placeholder just satisfies the arg type.
+  args: { children: null },
+} satisfies Meta<typeof AppShell>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Dashboard: Story = {
+  render: () => <ShellHarness initialPath="/" />,
+}
+
+export const HostActive: Story = {
+  render: () => <ShellHarness initialPath="/host" />,
+}