-
-
+
+
+ {m.common_loading()}
)
}
diff --git a/web/src/components/ui/skeleton.tsx b/web/src/components/ui/skeleton.tsx
deleted file mode 100644
index 7347fdf..0000000
--- a/web/src/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { cn } from '@/lib/utils'
-
-function Skeleton({ className, ...props }: React.HTMLAttributes
) {
- return
-}
-
-export { Skeleton }
diff --git a/web/src/components/ui/spinner.tsx b/web/src/components/ui/spinner.tsx
new file mode 100644
index 0000000..e98aef8
--- /dev/null
+++ b/web/src/components/ui/spinner.tsx
@@ -0,0 +1,88 @@
+import { useEffect, useRef } from 'react'
+import { motion, useReducedMotion, useTime, useTransform } from 'motion/react'
+import { cn } from '@/lib/utils'
+
+// The punktfunk lens, alive. The two overlapping circles of the brand mark are
+// recreated from divs and animated as if orbiting on a path whose long axis points
+// INTO the screen, so depth is the dominant motion: each circle surges toward and
+// away from the viewer in antiphase, passing in front of and behind the other.
+//
+// The 3D is faked in JS (a perspective `scale()` + a `z-index` derived from depth)
+// rather than CSS `preserve-3d` — because `mix-blend-mode` (which gives the lens
+// its glowing overlap) flattens a preserve-3d context in some browsers, killing
+// both the scaling and the front/back swap. Honours prefers-reduced-motion.
+// Size via className (e.g. `size-8`); geometry derives from the box.
+
+const DURATION_MS = 1600
+const R_DEPTH = 0.34 // depth amplitude (fraction of box) → the size change
+const PERSP = 1.05 // perspective distance (fraction of box); smaller → stronger scaling
+const R_PLANE_FIXED = 0.12 // constant in-plane offset → the two never fully eclipse
+const R_PLANE_SWAY = 0.05 // small in-plane breathing
+const DIAG: readonly [number, number] = [-Math.SQRT1_2, Math.SQRT1_2] // lens axis (↙ light / ↗ deep)
+const LOBE_FRAC = 0.58 // circle diameter as a fraction of the box
+const REST = 0 // reduced-motion: park flat (widest lens, no depth) = the brand mark
+
+export function Spinner({ className, ...props }: React.HTMLAttributes) {
+ const reduce = useReducedMotion()
+ const ref = useRef(null)
+ const sizeRef = useRef(0)
+ const time = useTime()
+
+ useEffect(() => {
+ const el = ref.current
+ if (!el) return
+ sizeRef.current = el.clientWidth
+ const ro = new ResizeObserver((entries) => {
+ const w = entries[0]?.contentRect.width
+ if (w) sizeRef.current = w
+ })
+ ro.observe(el)
+ return () => ro.disconnect()
+ }, [])
+
+ const angleAt = (t: number) => (reduce ? REST : (t / DURATION_MS) * Math.PI * 2)
+ const depthAt = (t: number, side: number) => side * Math.sin(angleAt(t)) * R_DEPTH
+
+ const transformAt = (t: number, side: number) => {
+ const s = sizeRef.current
+ const angle = angleAt(t)
+ const z = side * Math.sin(angle) * R_DEPTH // world depth (toward viewer = +)
+ const p = PERSP / (PERSP - z) // perspective: nearer → bigger, farther → smaller
+ const mag = (R_PLANE_FIXED + R_PLANE_SWAY * Math.cos(angle)) * side
+ const x = mag * DIAG[0] * p * s
+ const y = mag * DIAG[1] * p * s
+ return `translate(-50%, -50%) translate(${x}px, ${y}px) scale(${p})`
+ }
+
+ const tLight = useTransform(time, (t) => transformAt(t, 1))
+ const tDeep = useTransform(time, (t) => transformAt(t, -1))
+ // z-index follows depth, so whichever circle is nearer is painted on top.
+ const zLight = useTransform(time, (t) => Math.round(depthAt(t, 1) * 1000))
+ const zDeep = useTransform(time, (t) => Math.round(depthAt(t, -1) * 1000))
+
+ const lobe = (color: string): React.CSSProperties => ({
+ width: `${LOBE_FRAC * 100}%`,
+ height: `${LOBE_FRAC * 100}%`,
+ backgroundColor: color,
+ mixBlendMode: 'screen',
+ })
+
+ return (
+
+
+
+
+ )
+}
diff --git a/web/src/routes/clients.tsx b/web/src/routes/clients.tsx
index 66b8150..6f8dcf4 100644
--- a/web/src/routes/clients.tsx
+++ b/web/src/routes/clients.tsx
@@ -22,7 +22,8 @@ import { useLocale } from '@/lib/i18n'
export const Route = createFileRoute('/clients')({ component: ClientsPage })
-function ClientsPage() {
+// Exported for Storybook (see src/stories) — harmless alongside `Route`.
+export function ClientsPage() {
useLocale()
const qc = useQueryClient()
const clients = useListPairedClients()
diff --git a/web/src/routes/host.tsx b/web/src/routes/host.tsx
index b80a2b4..74d00f4 100644
--- a/web/src/routes/host.tsx
+++ b/web/src/routes/host.tsx
@@ -8,7 +8,9 @@ import { useLocale } from '@/lib/i18n'
export const Route = createFileRoute('/host')({ component: HostPage })
-function HostPage() {
+// Exported so Storybook can render the page directly (see src/stories). The
+// route gen only needs the `Route` export; this extra one is harmless.
+export function HostPage() {
useLocale()
const host = useGetHostInfo()
const compositors = useListCompositors()
diff --git a/web/src/routes/index.tsx b/web/src/routes/index.tsx
index 35cebbf..1b2c656 100644
--- a/web/src/routes/index.tsx
+++ b/web/src/routes/index.tsx
@@ -15,7 +15,8 @@ import { useLocale } from '@/lib/i18n'
export const Route = createFileRoute('/')({ component: Dashboard })
-function Dashboard() {
+// Exported for Storybook (see src/stories) — harmless alongside `Route`.
+export function Dashboard() {
useLocale()
const qc = useQueryClient()
// Poll live status every 2s so the console tracks an active session.
diff --git a/web/src/routes/library.tsx b/web/src/routes/library.tsx
index fc71ab7..c182f93 100644
--- a/web/src/routes/library.tsx
+++ b/web/src/routes/library.tsx
@@ -66,7 +66,8 @@ function toInput(f: FormState): CustomInput {
}
}
-function LibraryPage() {
+// Exported for Storybook (see src/stories) — harmless alongside `Route`.
+export function LibraryPage() {
useLocale()
const qc = useQueryClient()
const library = useGetLibrary()
diff --git a/web/src/routes/settings.tsx b/web/src/routes/settings.tsx
index 0ed505d..12af77d 100644
--- a/web/src/routes/settings.tsx
+++ b/web/src/routes/settings.tsx
@@ -7,7 +7,8 @@ import { useLocale, changeLocale, locales, type Locale } from '@/lib/i18n'
export const Route = createFileRoute('/settings')({ component: SettingsPage })
-function SettingsPage() {
+// Exported for Storybook (see src/stories) — harmless alongside `Route`.
+export function SettingsPage() {
const current = useLocale()
const onLogout = async () => {
diff --git a/web/src/stories/AppShell.stories.tsx b/web/src/stories/AppShell.stories.tsx
new file mode 100644
index 0000000..7e6f14d
--- /dev/null
+++ b/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 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: () => (
+
+
+
Dashboard
+
+ Placeholder content — swap routes from the sidebar to preview the active state.
+
+
+ {VARIANTS.map((variant) => (
+
+ {variant}
+
+ ))}
+
+ ),
+}
diff --git a/web/src/stories/Brand.stories.tsx b/web/src/stories/Brand.stories.tsx
new file mode 100644
index 0000000..7d0addf
--- /dev/null
+++ b/web/src/stories/Brand.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { BrandMark } from '@/components/brand-mark'
+import { Wordmark } from '@/components/wordmark'
+import { Logo } from '@/components/logo'
+
+const meta = {
+ title: 'Brand/Marks',
+ component: BrandMark,
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Mark: Story = {
+ render: () => (
+
+
+
+
+
+ ),
+}
+
+export const Word: Story = {
+ render: () => (
+
+
+
+
+
+ ),
+}
+
+export const Lockup: Story = {
+ render: () => (
+
+
+
+ ),
+}
diff --git a/web/src/stories/Button.stories.tsx b/web/src/stories/Button.stories.tsx
new file mode 100644
index 0000000..d17620b
--- /dev/null
+++ b/web/src/stories/Button.stories.tsx
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Play } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+const VARIANTS = ['default', 'secondary', 'outline', 'ghost', 'link', 'destructive'] as const
+const SIZES = ['default', 'sm', 'lg', 'icon'] as const
+
+const meta = {
+ title: 'UI/Button',
+ component: Button,
+ args: { children: 'Stream' },
+ argTypes: {
+ variant: { control: 'select', options: VARIANTS },
+ size: { control: 'select', options: SIZES },
+ disabled: { control: 'boolean' },
+ },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+/** Playground — drive variant/size/disabled from the Controls panel. */
+export const Playground: Story = {}
+
+export const Variants: Story = {
+ render: () => (
+
+ {VARIANTS.map((variant) => (
+
+ ))}
+
+ ),
+}
+
+export const Sizes: Story = {
+ render: () => (
+
+
+
+
+
+
+ ENRICOS-DESKTOP
+ online
+
+ RTX 5070 Ti · NVENC · 5120×1440 @ 240
+
+
+ Paired 2 days ago. Last session 11 ms p50 capture→present.
+
+
+
+
+
+
+ ),
+}
diff --git a/web/src/stories/Clients.stories.tsx b/web/src/stories/Clients.stories.tsx
new file mode 100644
index 0000000..e2e45d8
--- /dev/null
+++ b/web/src/stories/Clients.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { ClientsPage } from '@/routes/clients'
+import { MockApi } from './lib/mock-api'
+import { pairedClients } from './lib/fixtures'
+
+const meta = {
+ title: 'Pages/Clients',
+ component: ClientsPage,
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Paired: Story = {
+ render: () => (
+
+
+
+ ),
+}
+
+export const Empty: Story = {
+ render: () => (
+
+
+
+ ),
+}
diff --git a/web/src/stories/Dashboard.stories.tsx b/web/src/stories/Dashboard.stories.tsx
new file mode 100644
index 0000000..4eb9ce8
--- /dev/null
+++ b/web/src/stories/Dashboard.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Dashboard } from '@/routes/index'
+import { MockApi } from './lib/mock-api'
+import { statusActive, statusIdle } from './lib/fixtures'
+
+const meta = {
+ title: 'Pages/Dashboard',
+ component: Dashboard,
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const ActiveSession: Story = {
+ render: () => (
+
+
+
+ ),
+}
+
+export const Idle: Story = {
+ render: () => (
+
+
+
+ ),
+}
diff --git a/web/src/stories/Host.stories.tsx b/web/src/stories/Host.stories.tsx
new file mode 100644
index 0000000..b0935c8
--- /dev/null
+++ b/web/src/stories/Host.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { HostPage } from '@/routes/host'
+import { MockApi } from './lib/mock-api'
+import { compositors, hostInfo } from './lib/fixtures'
+
+const meta = {
+ title: 'Pages/Host',
+ component: HostPage,
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+ render: () => (
+
+
+
+ ),
+}
diff --git a/web/src/stories/Inputs.stories.tsx b/web/src/stories/Inputs.stories.tsx
new file mode 100644
index 0000000..cc6d3f7
--- /dev/null
+++ b/web/src/stories/Inputs.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+const meta = {
+ title: 'UI/Inputs',
+ component: Input,
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Form: Story = {
+ render: () => (
+
+ ),
+}
diff --git a/web/src/stories/Library.stories.tsx b/web/src/stories/Library.stories.tsx
new file mode 100644
index 0000000..fe4dcec
--- /dev/null
+++ b/web/src/stories/Library.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { LibraryPage } from '@/routes/library'
+import { MockApi } from './lib/mock-api'
+import { library } from './lib/fixtures'
+
+const meta = {
+ title: 'Pages/Library',
+ component: LibraryPage,
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Populated: Story = {
+ render: () => (
+
+
+
+ ),
+}
+
+export const Empty: Story = {
+ render: () => (
+
+
+
+ ),
+}
diff --git a/web/src/stories/QueryState.stories.tsx b/web/src/stories/QueryState.stories.tsx
new file mode 100644
index 0000000..7791d51
--- /dev/null
+++ b/web/src/stories/QueryState.stories.tsx
@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { QueryState } from '@/components/query-state'
+import { ApiError } from '@/api/fetcher'
+
+// QueryState is the uniform loading/error wrapper every data-backed route uses —
+// the most useful thing to design WITHOUT a running host, since its three states
+// (loading spinner / error / unauthorized) never appear together live.
+const Loaded = () => (
+ Loaded content renders here.
+)
+
+const meta = {
+ title: 'Patterns/QueryState',
+ component: QueryState,
+ args: { children: },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Loading: Story = {
+ args: { isLoading: true, error: null },
+}
+
+export const ErrorWithRetry: Story = {
+ args: { isLoading: false, error: new Error('connection refused'), refetch: () => {} },
+}
+
+export const Unauthorized: Story = {
+ args: { isLoading: false, error: new ApiError(401, null) },
+}
+
+export const Loaded_: Story = {
+ name: 'Success',
+ args: { isLoading: false, error: null },
+}
diff --git a/web/src/stories/Settings.stories.tsx b/web/src/stories/Settings.stories.tsx
new file mode 100644
index 0000000..5b6f66a
--- /dev/null
+++ b/web/src/stories/Settings.stories.tsx
@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { SettingsPage } from '@/routes/settings'
+
+// Settings reads no API (just the locale + a logout button), so it renders
+// directly — no mock needed.
+const meta = {
+ title: 'Pages/Settings',
+ component: SettingsPage,
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {}
diff --git a/web/src/stories/Spinner.stories.tsx b/web/src/stories/Spinner.stories.tsx
new file mode 100644
index 0000000..670a767
--- /dev/null
+++ b/web/src/stories/Spinner.stories.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Spinner } from '@/components/ui/spinner'
+
+const meta = {
+ title: 'UI/Spinner',
+ component: Spinner,
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {}
+
+export const Large: Story = {
+ render: () => (
+
+
+
+ ),
+}
+
+export const Sizes: Story = {
+ render: () => (
+
+
+
+
+
+
+ ),
+}
diff --git a/web/src/stories/lib/fixtures.ts b/web/src/stories/lib/fixtures.ts
new file mode 100644
index 0000000..55e5789
--- /dev/null
+++ b/web/src/stories/lib/fixtures.ts
@@ -0,0 +1,87 @@
+// Mock API payloads for the page stories — typed against the generated models so
+// they stay honest if the OpenAPI schema changes.
+import type { AvailableCompositor } from '@/api/gen/model/availableCompositor'
+import type { GameEntry } from '@/api/gen/model/gameEntry'
+import type { HostInfo } from '@/api/gen/model/hostInfo'
+import type { PairedClient } from '@/api/gen/model/pairedClient'
+import type { RuntimeStatus } from '@/api/gen/model/runtimeStatus'
+
+export const hostInfo: HostInfo = {
+ abi_version: 2,
+ app_version: '7.1.450.0',
+ codecs: ['h264', 'h265', 'av1'],
+ gfe_version: '3.23.0.74',
+ hostname: 'ENRICOS-DESKTOP',
+ local_ip: '192.168.1.173',
+ ports: {
+ audio: 48000,
+ control: 47999,
+ http: 47989,
+ https: 47984,
+ mgmt: 47990,
+ rtsp: 48010,
+ video: 47998,
+ },
+ uniqueid: '0f8a1c3e9b7d4a62',
+ version: '0.2.0',
+}
+
+export const compositors: AvailableCompositor[] = [
+ { id: 'kwin', label: 'KWin (Plasma)', available: true, default: true },
+ { id: 'gamescope', label: 'gamescope', available: true, default: false },
+ { id: 'mutter', label: 'Mutter (GNOME)', available: false, default: false },
+ { id: 'wlroots', label: 'Sway / wlroots', available: false, default: false },
+]
+
+export const statusActive: RuntimeStatus = {
+ video_streaming: true,
+ audio_streaming: true,
+ paired_clients: 3,
+ pin_pending: false,
+ session: { width: 5120, height: 1440, fps: 240 },
+ stream: {
+ codec: 'h265',
+ width: 5120,
+ height: 1440,
+ fps: 240,
+ bitrate_kbps: 150_000,
+ min_fec: 5,
+ packet_size: 1392,
+ },
+}
+
+export const statusIdle: RuntimeStatus = {
+ video_streaming: false,
+ audio_streaming: false,
+ paired_clients: 1,
+ pin_pending: true,
+ session: null,
+ stream: null,
+}
+
+export const pairedClients: PairedClient[] = [
+ {
+ fingerprint: 'a1b2c3d4e5f60718293a4b5c6d7e8f90112233445566778899aabbccddeeff00',
+ subject: 'enricos-macbook',
+ not_before_unix: 1_718_000_000,
+ not_after_unix: 2_030_000_000,
+ },
+ {
+ fingerprint: 'ff00eeddccbbaa998877665544332211009f8e7d6c5b4a39281706f5e4d3c2b1',
+ subject: 'living-room-tv',
+ not_before_unix: 1_718_500_000,
+ not_after_unix: 2_030_000_000,
+ },
+ {
+ fingerprint: '0011223344556677889900aabbccddeeff112233445566778899aabbccddeeff',
+ subject: null,
+ },
+]
+
+const noArt = { header: null, hero: null, logo: null, portrait: null }
+export const library: GameEntry[] = [
+ { id: 'steam:1245620', store: 'steam', title: 'Elden Ring', art: noArt, launch: null },
+ { id: 'steam:1086940', store: 'steam', title: "Baldur's Gate 3", art: noArt, launch: null },
+ { id: 'steam:413150', store: 'steam', title: 'Stardew Valley', art: noArt, launch: null },
+ { id: 'custom:retroarch', store: 'custom', title: 'RetroArch', art: noArt, launch: null },
+]
diff --git a/web/src/stories/lib/mock-api.tsx b/web/src/stories/lib/mock-api.tsx
new file mode 100644
index 0000000..b9fe094
--- /dev/null
+++ b/web/src/stories/lib/mock-api.tsx
@@ -0,0 +1,49 @@
+import { type ReactNode, useEffect, useRef, useState } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+/** Map of API pathname (e.g. `/api/v1/host`) → JSON body to return for a GET. */
+export type MockRoutes = Record
+
+/**
+ * Renders a data-backed page WITHOUT a running host by stubbing `window.fetch`
+ * for the lifetime of the story: matched pathnames return their mock JSON (200),
+ * everything else returns `{}` (200) so mutations + polling never error. The
+ * real orval/React-Query hooks run unchanged, so loading/success transitions and
+ * `refetchInterval` behave exactly as in the app. Each story gets a fresh,
+ * isolated QueryClient (retries off).
+ */
+export function MockApi({ routes, children }: { routes: MockRoutes; children: ReactNode }) {
+ // Read the latest routes inside the stub without re-installing it.
+ const routesRef = useRef(routes)
+ routesRef.current = routes
+ const [stubbed, setStubbed] = useState(false)
+
+ useEffect(() => {
+ const real = window.fetch
+ const stub = (input: RequestInfo | URL): Promise => {
+ const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url
+ const path = new URL(url, window.location.origin).pathname
+ const data = path in routesRef.current ? routesRef.current[path] : {}
+ return Promise.resolve(
+ new Response(JSON.stringify(data ?? null), {
+ status: 200,
+ headers: { 'content-type': 'application/json' },
+ }),
+ )
+ }
+ window.fetch = stub as typeof window.fetch
+ setStubbed(true)
+ return () => {
+ window.fetch = real
+ }
+ }, [])
+
+ const [queryClient] = useState(
+ () => new QueryClient({ defaultOptions: { queries: { retry: false } } }),
+ )
+
+ // Hold the first render until the stub is installed, so the page's initial
+ // query resolves against the mock rather than racing a real (failing) request.
+ if (!stubbed) return null
+ return {children}
+}
diff --git a/web/src/styles.css b/web/src/styles.css
index 8104d04..852e66d 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -4,55 +4,63 @@
@custom-variant dark (&:is(.dark *));
-/* Pull @unom/ui's compiled component classes (bg-neutral, rounded-card,
- p-padding-card, ring-accent, h-input-height, material…) into the Tailwind 4
- scan so its utilities aren't purged. This is the shared design system the
- punktfunk marketing site + docs are built on. */
+/* Pull @unom/ui's compiled component classes (bg-neutral,
+ rounded-card, p-padding-card, ring-accent, h-input-height, material…) into the
+ Tailwind 4 scan so their utilities aren't purged. */
@source '../node_modules/@unom/ui/dist/**/*.{js,mjs}';
-/* ── punktfunk brand · dark violet product chrome ───────────────────────────
- The console runs dark-only (html.dark). Surfaces are the violet-tinted
- app-icon chrome (#141019 / #1c1530), the brand is the violet lens mark
- (#6c5bf3 → #a79ff8 in dark). The token set feeds BOTH @unom/ui's semantic
- contract (--brand/--primary/--accent/--neutral/--main…) and the shadcn-style
- tokens the console's primitives + routes use (--background/--card/--muted…),
- mapped onto one palette so both render the same identity. */
+/* ── punktfunk brand · violet product chrome ────────────────────────────────
+ Two themes on one violet identity: LIGHT (lavender docs surface — the same
+ palette the docs/Scalar reference uses: white bg, faint-violet cards/borders,
+ #6c5bf3 brand) is the :root default; DARK (the violet-tinted app-icon chrome
+ #141019 / #1c1530, #a79ff8 brand) is the `.dark` override. The live console
+ pins `` so it stays dark by default — removing or toggling
+ that class (e.g. Storybook's theme switch) yields light. The token set feeds
+ BOTH @unom/ui's semantic contract (--brand/--primary/--accent/--neutral/
+ --main…) and the shadcn-style tokens the console's primitives + routes use
+ (--background/--card/--muted…), mapped onto one palette so both render the
+ same identity.
+
+ Brand constants and the surface tokens that are pure indirections
+ (--main, --neutral*, --error → other tokens) live in :root only — CSS resolves
+ var() per-theme at use time, so .dark overrides just the raw values. */
:root {
--radius: 0.625rem;
- /* Brand — the violet lens mark (from the punktfunk app icon). */
- --pf-brand: #6c5bf3; /* deep violet */
- --pf-brand-light: #a79ff8; /* light violet — reads better on dark */
+ /* Brand — the violet lens mark (from the punktfunk app icon). Theme-independent. */
+ --pf-brand: #6c5bf3; /* deep violet — primary on light */
+ --pf-brand-light: #a79ff8; /* light violet — primary on dark */
--pf-highlight: #d2c9fb; /* lens highlight */
- /* Surfaces (violet-tinted dark chrome). */
- --background: #141019;
- --foreground: oklch(0.985 0 0);
- --card: #1c1530;
- --card-foreground: oklch(0.985 0 0);
- --popover: #1c1530;
- --popover-foreground: oklch(0.985 0 0);
- --muted: #1f1830;
- --muted-foreground: oklch(0.728 0.03 286);
- --secondary: #241c3d;
- --secondary-foreground: oklch(0.985 0 0);
+ /* Surfaces — light · lavender (white bg, faint-violet cards/borders). */
+ --background: #ffffff;
+ --foreground: #1b1430;
+ --card: #f6f2ff;
+ --card-foreground: #1b1430;
+ --popover: #ffffff;
+ --popover-foreground: #1b1430;
+ --muted: #f1ecfd;
+ --muted-foreground: #6f6a86;
+ --secondary: #ece6fb;
+ --secondary-foreground: #1b1430;
/* shadcn `accent` = subtle hover surface; also @unom/ui's card ring colour,
- so we tint it toward the brand violet. */
+ so we tint it toward the brand violet (the same in both themes). */
--accent: var(--pf-brand);
- --accent-foreground: oklch(0.985 0 0);
- --border: #2a2148;
- --input: #2a2148;
- --ring: var(--pf-brand-light);
+ --accent-foreground: #ffffff;
+ --border: #e4dcf7;
+ --input: #e4dcf7;
+ --ring: var(--pf-brand);
/* Primary = the brand (buttons, active nav, default badges). */
- --primary: var(--pf-brand-light);
- --primary-foreground: #141019;
+ --primary: var(--pf-brand);
+ --primary-foreground: #ffffff;
- --success: oklch(0.7 0.15 160);
- --destructive: oklch(0.62 0.21 18);
- --destructive-foreground: oklch(0.985 0 0);
+ --success: oklch(0.6 0.14 160);
+ --destructive: oklch(0.55 0.22 18);
+ --destructive-foreground: #ffffff;
- /* ── @unom/ui semantic token contract (its components read these names). ── */
+ /* ── @unom/ui semantic token contract (its components read these names). ──
+ These are indirections — they follow the raw tokens above per-theme. */
--main: var(--foreground);
--brand: var(--pf-brand);
--brand-light: var(--pf-brand-light);
@@ -69,6 +77,32 @@
--radius-card-min: var(--radius);
}
+/* Dark · the violet-tinted app-icon chrome. Overrides only the raw values —
+ the indirection tokens in :root resolve to these automatically. */
+.dark {
+ --background: #141019;
+ --foreground: oklch(0.985 0 0);
+ --card: #1c1530;
+ --card-foreground: oklch(0.985 0 0);
+ --popover: #1c1530;
+ --popover-foreground: oklch(0.985 0 0);
+ --muted: #1f1830;
+ --muted-foreground: oklch(0.728 0.03 286);
+ --secondary: #241c3d;
+ --secondary-foreground: oklch(0.985 0 0);
+ --border: #2a2148;
+ --input: #2a2148;
+ --ring: var(--pf-brand-light);
+
+ /* Lighter violet reads better against the dark surface. */
+ --primary: var(--pf-brand-light);
+ --primary-foreground: #141019;
+
+ --success: oklch(0.7 0.15 160);
+ --destructive: oklch(0.62 0.21 18);
+ --destructive-foreground: oklch(0.985 0 0);
+}
+
/* Map the palette to Tailwind colour/util tokens — both the shadcn vocabulary
and @unom/ui's, resolved to one set of values. */
@theme inline {
diff --git a/web/vite.storybook.config.ts b/web/vite.storybook.config.ts
new file mode 100644
index 0000000..844ee86
--- /dev/null
+++ b/web/vite.storybook.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import viteReact from '@vitejs/plugin-react'
+import viteTsConfigPaths from 'vite-tsconfig-paths'
+import tailwindcss from '@tailwindcss/vite'
+import { paraglideVitePlugin } from '@inlang/paraglide-js'
+
+// Storybook builds the components in isolation — WITHOUT the TanStack Start /
+// Nitro plugins from vite.config.ts. Keeps the `@/*` alias, Tailwind v4, the
+// React transform, and Paraglide.
+export default defineConfig({
+ plugins: [
+ viteTsConfigPaths({ projects: ['./tsconfig.json'] }),
+ tailwindcss(),
+ viteReact(),
+ paraglideVitePlugin({
+ project: './project.inlang',
+ outdir: './src/paraglide',
+ strategy: ['localStorage', 'preferredLanguage', 'baseLocale'],
+ }),
+ ],
+})