@stylecrib/cli 0.3.1 → 0.3.2

package/themes/gaming-streamer/THEME.md

@@ -0,0 +1,139 @@
+# Design Direction — Gaming-Streamer
+
+## Ethos
+Twitch saturated purple · Discord blurple presence · Kick signal-green youth · YouTube Gaming creator-red · Streamlabs overlay-friendly purple
+
+## Feel
+Loud-friendly gaming streamer / community platform. Saturated purples as the primary canvas, neon accents for live presence, a multi-color status palette for online / idle / DND / streaming / raiding, and chrome that feels real-time: pulsing live dots, animated chat tickers, multi-color reaction emoji, follower counts that tick up.
+
+Reads as **"everyone is online right now, and someone is going live."** Where creator-social is mobile-vertical and TikTok-saturated, gaming-streamer is desktop-grid and Twitch-saturated — denser tile layouts, chat as a first-class surface, presence as the dominant signal language.
+
+## Reference brands
+- **Twitch** → saturated purple `#9146FF` wordmark, Inter-class type, dense chat UI, the canonical live-now dot. The dominant template.
+- **Discord** → blurple primary, friendly geometric sans, status pills (online green / idle yellow / DND red). The presence-language source.
+- **Kick** → signal green on dark canvas, youthful streamer-platform energy. Secondary live-now signal.
+- **YouTube Gaming** → deep red badge, dark canvas, creator-tools chrome. The "LIVE" badge color and the destructive/warning hue.
+- **Streamlabs** → purple creator-overlay aesthetic, alert-box visual language (subscriber/raid/bits alerts). The alert-pop and ticker patterns trace here.
+
+## Tokens
+HSL triples in `src/index.css`. Every token's `from:` comment names its brand origin.
+
+Surface stack is **Twitch purple-black canvas** (background, `260 22% 8%`) → **lifted card** (`260 20% 12%`) → **popover** (`260 18% 14%`) → **secondary** (`260 16% 18%`) → **muted** (`260 14% 22%`). The whole stack is cool-purple-tinted — going neutral gray reads dashboard, not streamer platform. Depth comes from a saturated `.glow-purple` halo on key surfaces plus `.shadow-tile` on stream grids.
+
+Primary is **Twitch purple** (`264 90% 62%`) — the follow-button color, the dominant CTA, the streaming-now presence dot.
+
+Brand tokens — the multi-color status palette is the working vocabulary, not decoration:
+- `--twitch-purple` and `--twitch-purple-deep` — primary CTA and pressed state.
+- `--discord-blurple` — community-platform secondary product accent (Discord-style CTAs, server-join buttons).
+- `--kick-green` — alternate live-now signal, the Kick-platform variant; also "stream successfully started" confirmation.
+- `--yt-red` — = `--destructive`; also the canonical LIVE badge color.
+- `--status-online`, `--status-idle`, `--status-dnd`, `--status-streaming` — the four presence dots. **These ARE the language**, not decoration. Use them on user avatars, chat-roster rows, and the "now playing" header.
+- `--alert-cyan`, `--alert-magenta` — Streamlabs alert-tier accents for subscriber and bits notifications. Pair with `--twitch-purple` in the upgrade-CTA gradient — never split.
+
+## Typography
+- **Display:** Inter (open-source stand-in for Twitch's Roobert and Discord's gg sans). h1–h4, weights 600/700/800/900. **Never below 600** for display — streamer-platform display copy is bold, broadcast-poster weight.
+- **Body:** Inter (single-face platform convention — Twitch, Discord, Kick all run an Inter-class sans). Base **15px** with **line-height 1.5** — chat-readable, dense.
+- **Mono:** JetBrains Mono. Chat timestamps, viewer counts, bit/sub counts, stream-elapsed clocks — broadcast-overlay numerics. Tabular numerics mandatory.
+
+Headings track `-0.02em` — tight, streamer-display feel. H1 uses `clamp(2.5rem, 7vw, 4.75rem)` — bigger than dashboard, smaller than cinematic. Inter stylistic sets `"cv11", "ss01"` plus `"tnum"` for the viewer-count numerics that update in real time.
+
+## Spacing
+- **Container:** `max-w-7xl px-4 lg:px-8` — wide enough for 4-up or 5-up stream-tile grids plus the chat sidebar.
+- **Section padding tiers:**
+  - Hero: `pt-16 pb-10 lg:pt-24 lg:pb-14`
+  - Default: `py-12 lg:py-16`
+  - Tight: `py-8 lg:py-12`
+- **Allowed scale values:** 4 6 8 10 12 16 20 24 32 40 48 64 80. Medium density — stream tiles pack tight, chat sits at high density.
+
+## Color
+No hex anywhere in component files. All color via tokens. Opacity via `/N` modifier.
+
+The palette is **purple-black canvas + saturated brand purple + multi-color status signals** — never desaturated, never neutral gray. The cool-purple surface stack is the canvas; Twitch purple is the action; the four status hues (online/idle/DND/streaming) are the presence language; Kick green / YT red / Discord blurple are the platform-cross-reference signals.
+
+Pure black is forbidden — `--background` is the cool purple-black at `260 22% 8%`. Pure white is forbidden — `--foreground` is the cool-tinted off-white at `260 12% 96%`. Warm whites read streaming-warm-channel rather than streamer-platform.
+
+**Status color discipline:** use the right status token for the right semantic — `--status-streaming` (purple) for streaming-now, `--status-online` (green) for online-not-streaming, `--status-idle` (yellow) for AFK, `--status-dnd` (red) for do-not-disturb. Reusing `--primary` for all four breaks the presence-language read.
+
+## Radius
+`--radius: 0.5rem` (8px). **Platform-card soft.** Pills are allowed (`pillsAllowed: true`) and are the default for status chips (Live, Online, Idle, DND, In-Game, Raiding), game-category tags, and the LIVE badge. Sharp rectangles read enterprise; pillow-soft reads consumer-app — 8px is the streamer-platform sweet spot.
+
+## Shadows
+Four utilities — color-saturated, never neutral gray drops:
+
+- `.glow-purple` — the signature. Twitch-purple halo on primary CTAs and feature tiles (1px ring + 16px + 64px concentric).
+- `.glow-kick` — Kick-green halo for the alternate live-platform signal and stream-started confirmations.
+- `.glow-live` — high-saturation red 2px ring + 16px glow. **Used only on the LIVE badge and the live-now stream tile border.** Reserved — bleeding it onto other elements ruins the "live right now" signal.
+- `.shadow-tile` — default stream-tile drop shadow, deep cool-purple-tinted (matches the canvas), not neutral gray.
+
+Shadows lean **purple-tinted** — neutral gray drops on a purple-black canvas read flat and dead. The purple tint is what makes a tile lift off the grid.
+
+## Motion
+Four keyframes, real-time-friendly:
+
+- `live-pulse` (1400ms infinite) — the canonical live-now dot heartbeat. Opacity + scale double-bind. **The ONE always-on loop allowed** on the page; bleeding it onto other elements destroys the signal.
+- `chat-rise` (200ms once) — incoming chat message entrance. Short translateY(12px) → 0, matches platform chat-stream rhythm.
+- `alert-pop` (350ms once) — subscriber/raid/bits alert. Streamlabs-style overshoot (0.8 → 1.08 → 1). Also used for follow-button confirm.
+- `ticker-scroll` (30000ms infinite) — stream-info ticker for recent subs/follows/raids scrolling a banner. Broadcast lower-third pace.
+
+Easing: `cubic-bezier(0.22, 1, 0.36, 1)`. `prefers-reduced-motion` is honored — `live-pulse` collapses to a static high-contrast dot (the badge does not disappear; only the animation does), `chat-rise` collapses to opacity-only, `alert-pop` collapses to a static scale, `ticker-scroll` collapses to a paused static state.
+
+## Component patterns
+- **Buttons:** primary = solid Twitch-purple filled rect, `rounded-md` (8px), weight 700. Follow-button variant adds `.glow-purple` on hover and triggers `alert-pop` on click. Secondary = bordered ghost (border-input, bg-secondary, foreground, hover:bg-accent). Tertiary = text-link in twitch-purple. **Pills allowed** for status chips and game-category tags — each colored by its status token, never the same purple as primary (or the presence-language breaks).
+- **Cards:** stream-tile card = `rounded-lg` (8px), 1px `border-border`, `bg-card`, `.shadow-tile`. Padding `p-3 lg:p-4` (tight — grids stack many tiles). **Live tile** adds `.glow-live` border treatment and a LIVE pill with `live-pulse` on the dot. Title in Inter weight 700; streamer name in `mutedForeground` weight 500; game category in mono caption. Viewer count in tabular mono with the live-pulse dot prefix.
+- **Inputs:** chat input = full-width `rounded-md`, `bg-secondary`, 1px `border-input`, with a `border-bottom` accent on focus. General-purpose input: `rounded-md`, `bg-card`, 1px `border-input`. Focus ring uses `.glow-purple` at 35% opacity. The emote-picker trigger is a pill-shaped icon button to the right of the chat input.
+- **CTAs:** primary "Follow" / "Subscribe" = solid Twitch-purple with `.glow-purple` on hover and `alert-pop` on click-confirm. Secondary "Watch Now" = bordered pill. Tertiary = purple underlined text-link. **The Subscribe-upgrade variant** may use a `twitch-purple → alert-magenta` gradient — Streamlabs alert-tier styling, reserved for the upgrade path only, never the generic CTA.
+
+## Component families
+None at install time. As `*StreamTile`, `*LivePill`, `*StatusDot`, `*ChatMessage`, `*AlertToast`, `*ViewerCounter` families emerge, the Director lists them here with their shared pattern.
+
+## Recommended rich media
+
+### Cover and hero imagery
+**Stream-thumbnail first.** This is a streamer platform — the hero is almost always a live stream preview or a streamer portrait, not abstract gradient.
+
+- **16:9 stream-preview stills** — gameplay screenshot with a small streamer-cam overlay in the corner, LIVE badge top-left in `--yt-red`, viewer count bottom-right in mono. The Twitch homepage template.
+- **Streamer portrait + neon backdrop** — half-body shot of the streamer at desk with RGB-keyboard glow, purple/cyan rim lighting matching the palette. Pinterest-streamer-setup aesthetic.
+- **Game key-art cover tiles** — official game-publisher key art for category browsing. 3:4 portrait aspect, exactly like Twitch's Browse Games grid.
+- **Overlay-frame mockups** — Streamlabs alert-box screenshots showing "NEW SUBSCRIBER" pop, animated with `alert-pop`.
+- **Animated mesh gradients** — purple / blurple / alert-magenta meshes drifting underneath section headers. The hero background can lean abstract when the page is a category/discover page rather than a stream page.
+
+### AI tool recommendations
+- **Midjourney** for streamer-portrait hero stills. Prompt scaffold: *"streamer at gaming desk, RGB keyboard glow, purple and cyan rim lighting, deep purple-black background, dramatic gaming setup, 16:9"*. Always specify the purple/cyan rim — neutral lighting reads dead.
+- **Runway / Pika** for short looped gameplay-cam composites. Keep loops 4–6 seconds, broadcast pace.
+- **mesh-gradient.com** or hand-rolled CSS conic gradients for purple/blurple/magenta backdrops.
+- **Lottie** for Streamlabs-style alert animations (NEW SUBSCRIBER, RAID INCOMING) — pair with `alert-pop` on trigger.
+- Avoid Midjourney's default warm-lit portraits — explicitly prompt for purple-black backgrounds and neon rim.
+
+### Aspect ratios
+- **16:9 landscape** — stream previews, gameplay stills, the dominant tile ratio (mandatory — mixed ratios break the grid).
+- **3:4 portrait** — game key-art covers, exactly like Twitch's category grid.
+- **1:1 square** — streamer avatars, emote previews.
+- Avoid 9:16 vertical (creator-social territory; streamer platforms are desktop-grid).
+
+### Color discipline for imagery
+Stay cool-saturated. RGB-lit gaming setups, neon city backdrops, purple/cyan/magenta rim lighting. **If a source image has a warm-amber cast or natural-daylight lighting, regrade it or do not use it** — the cool purple-black surface stack breaks the moment a warm-lit image lands. Desaturated documentary photography also breaks — this is a vibrant platform.
+
+### What to AVOID
+- **Warm-lit portraits and natural daylight** — wrong tab; reads podcast-warm or marketplace-modern.
+- **Serif type** — editorial territory; serif kills the streamer-platform read.
+- **Black-and-white photography** — wrong altitude entirely.
+- **Cinematic film-grain texture** — that is cinematic-dark or gaming-esports; streamer platform is live and noisy, not cinematic.
+- **Dense data dashboards** — wrong altitude.
+
+### Accessibility
+- **Live status must not rely on color alone** — the LIVE badge must carry the text "LIVE" plus the pulse, so color-blind viewers can identify streaming-now tiles.
+- **Status dots** (online/idle/DND/streaming) must pair with a text label on first introduction (chat-roster row, profile header). Standalone status dots are decorative-only.
+- White cool-text on `--twitch-purple` passes WCAG AA at 14pt+; verify at small caption sizes on purple buttons.
+- `live-pulse` and `ticker-scroll` collapse under `prefers-reduced-motion` — verify in DevTools, not just by reading the CSS.
+- `.glow-live` is decorative — mark with `aria-hidden="true"`; the LIVE text label is the accessible signal.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.4)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.7)` — Twitch purple, paired with `.glow-purple` on primary CTAs.
+- **Scrollbar:** thin.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/gaming-streamer/tokens.ts

@@ -0,0 +1,201 @@
+import type { Direction } from "../schema";
+
+export const gamingStreamer: Direction = {
+  name: "gaming-streamer",
+  ethos:
+    "Twitch saturated purple · Discord blurple presence · Kick signal-green youth · YouTube Gaming creator-red · Streamlabs overlay-friendly purple",
+  references: [
+    { brand: "Twitch", trait: "saturated purple wordmark, Inter type, dense chat UI, live-now dot" },
+    { brand: "Discord", trait: "blurple primary, friendly sans, status pills (online / idle / DND)" },
+    { brand: "Kick", trait: "signal green on dark, youthful streamer-platform energy" },
+    { brand: "YouTube Gaming", trait: "deep red signal, dark canvas, creator-tools chrome" },
+    { brand: "Streamlabs", trait: "purple creator-overlay aesthetic, alert-box visual language" },
+  ],
+  feel:
+    "Loud-friendly gaming streamer / community platform. Saturated purples as the primary canvas, " +
+    "neon accents for live presence, multi-color status palette for online/idle/DND/streaming/raid. " +
+    "Real-time-feeling chrome: pulsing live dots, animated chat tickers, multi-color reaction emoji. " +
+    "Reads as 'everyone is online right now, and someone is going live.'",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["Roobert", "system-ui", "-apple-system", "Segoe UI", "sans-serif"],
+      from: "Twitch/Discord wordmark family — Inter is the open-source stand-in for Roobert; weight 700+ carries the streamer-display energy",
+      googleFont: "Inter:wght@500;600;700;800;900",
+      weights: [600, 700, 800, 900],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+      from: "Single-face streamer platform convention (Twitch/Discord/Kick all use Inter-class sans for body)",
+      googleFont: "Inter:wght@400;500;600",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["SF Mono", "ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
+      from: "Chat timestamps, viewer counts, bit/sub counts, stream-elapsed clocks — broadcast-overlay numerics",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500, 700],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.02em",
+    bodyTracking: "0",
+    fontFeatureSettings: '"cv11", "ss01", "tnum"',
+    h1ScaleClamp: "clamp(2.5rem, 7vw, 4.75rem)",
+    bodyBaseSize: "0.9375rem",
+    bodyLineHeight: "1.5",
+  },
+
+  colors: {
+    background: { hsl: "260 22% 8%", from: "Twitch night-mode purple-black — deep cool-purple canvas, never pure black" },
+    foreground: { hsl: "260 12% 96%", from: "Cool-tinted off-white — chat-readable on purple-black, never warm" },
+    card: { hsl: "260 20% 12%", from: "Lifted card surface — stream-tile background, one stop up from canvas" },
+    popover: { hsl: "260 18% 14%", from: "Popover/menu surface — two stops up; chat menus and emote pickers" },
+
+    primary: { hsl: "264 90% 62%", from: "Twitch saturated purple #9146FF — the dominant brand hue, follow-button color" },
+    primaryForeground: { hsl: "260 12% 98%", from: "Cool-white on Twitch purple" },
+
+    secondary: { hsl: "260 16% 18%", from: "Channel-row secondary surface — sidebar entries, follower-list rows" },
+    secondaryForeground: { hsl: "260 12% 96%", from: "Cool-white on secondary" },
+    muted: { hsl: "260 14% 22%", from: "Muted chat-meta surface — timestamp plates, low-priority chips" },
+    mutedForeground: { hsl: "260 10% 64%", from: "Chat meta — usernames at rest, view counts, timestamps" },
+    accent: { hsl: "260 18% 26%", from: "Hover surface — channel-row hover, emote-picker hover" },
+    accentForeground: { hsl: "260 12% 98%", from: "Cool-white on accent hover" },
+
+    border: { hsl: "260 14% 22%", from: "Hairline border — visible on purple-black canvas, never assertive" },
+    input: { hsl: "260 14% 26%", from: "Chat input border — stronger than card border for affordance" },
+    ring: { hsl: "264 90% 62%", from: "Twitch purple — focus ring and follow-button outline" },
+
+    destructive: { hsl: "0 78% 56%", from: "YouTube Gaming creator-red — ban, timeout, delete-message; warning-tier red" },
+    destructiveForeground: { hsl: "260 12% 98%", from: "Cool-white on creator-red" },
+
+    brand: {
+      "twitch-purple": { hsl: "264 90% 62%", from: "= primary; Twitch wordmark purple #9146FF" },
+      "twitch-purple-deep": { hsl: "264 75% 48%", from: "Pressed/hover purple — follow-button pressed, gradient anchor" },
+      "discord-blurple": { hsl: "235 86% 65%", from: "Discord brand blurple #5865F2 — community-platform CTA, secondary product accent" },
+      "kick-green": { hsl: "138 88% 50%", from: "Kick signal green — live-now indicator, alternate streamer-platform accent" },
+      "yt-red": { hsl: "0 78% 56%", from: "= destructive; YouTube Gaming red — also live-status badge color" },
+      "status-online": { hsl: "138 70% 45%", from: "Discord online green — presence dot, ships-online indicator" },
+      "status-idle": { hsl: "42 95% 55%", from: "Discord idle yellow — away, AFK presence" },
+      "status-dnd": { hsl: "0 78% 56%", from: "Discord DND red — do-not-disturb presence (shares hue with destructive)" },
+      "status-streaming": { hsl: "264 90% 62%", from: "Streaming-now purple — = primary; the 'live right now' presence color" },
+      "alert-cyan": { hsl: "190 95% 60%", from: "Streamlabs alert-cyan — subscriber/raid notification accent" },
+      "alert-magenta": { hsl: "320 85% 60%", from: "Streamlabs alert-magenta — bits/donation accent, gradient pair with purple" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80],
+    containerMax: "max-w-7xl",
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-16 pb-10 lg:pt-24 lg:pb-14",
+      default: "py-12 lg:py-16",
+      tight: "py-8 lg:py-12",
+    },
+  },
+
+  radius: {
+    base: "0.5rem",
+    pillsAllowed: true,
+  },
+
+  shadows: {
+    style: "glow",
+    utilities: {
+      "glow-purple":
+        "0 0 0 1px hsl(var(--twitch-purple) / 0.4), " +
+        "0 4px 16px hsl(var(--twitch-purple) / 0.25), " +
+        "0 24px 64px hsl(var(--twitch-purple) / 0.2)",
+      "glow-kick":
+        "0 0 0 1px hsl(var(--kick-green) / 0.5), " +
+        "0 4px 16px hsl(var(--kick-green) / 0.3)",
+      "glow-live":
+        "0 0 0 2px hsl(var(--yt-red) / 0.6), " +
+        "0 0 16px hsl(var(--yt-red) / 0.55)",
+      "shadow-tile":
+        "0 2px 4px hsl(260 30% 4% / 0.4), 0 8px 20px hsl(260 30% 4% / 0.3)",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+    durations: {
+      reveal: 250,
+      loop: 1600,
+      ambient: 0,
+    },
+    keyframes: {
+      "live-pulse": {
+        css:
+          "0%, 100% { opacity: 1; transform: scale(1); }\n" +
+          "50% { opacity: 0.7; transform: scale(1.15); }",
+        defaultDuration: 1400,
+        iteration: "infinite",
+        purpose: "live-now dot heartbeat — the canonical 'streaming right now' indicator; the ONE always-on loop allowed",
+      },
+      "chat-rise": {
+        css:
+          "from { opacity: 0; transform: translateY(12px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose: "incoming chat message entrance — short rise, matches platform chat-stream rhythm",
+      },
+      "alert-pop": {
+        css:
+          "0% { transform: scale(0.8); opacity: 0; }\n" +
+          "60% { transform: scale(1.08); opacity: 1; }\n" +
+          "100% { transform: scale(1); opacity: 1; }",
+        defaultDuration: 350,
+        iteration: "once",
+        purpose: "subscriber/raid/bits alert entrance — Streamlabs overlay pop, used for follow-button confirm and notification toasts",
+      },
+      "ticker-scroll": {
+        css:
+          "from { transform: translateX(0); }\n" +
+          "to { transform: translateX(-50%); }",
+        defaultDuration: 30000,
+        iteration: "infinite",
+        purpose: "stream-info ticker — recent subs/follows/raids scrolling across a banner; broadcast lower-third pace",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Primary = solid Twitch-purple filled rect (bg-primary text-primary-foreground rounded-md font-bold), 8px radius, weight 700. " +
+      "Follow-button variant uses .glow-purple on hover. " +
+      "Secondary = bordered ghost (border-input bg-secondary, foreground, hover:bg-accent). " +
+      "Tertiary = text-link in twitch-purple. " +
+      "Pills allowed for status chips (Live, Online, Idle, DND, In-Game, Raiding) — each colored by status token, never the same purple as primary.",
+    card:
+      "Stream-tile card = rounded-lg (8px), 1px border-border, bg-card, shadow-tile. Padding p-3 lg:p-4 (tight — stream grids stack many tiles). " +
+      "Live tile adds .glow-live + a 'LIVE' pill with live-pulse animation. " +
+      "Title in Inter weight 700; streamer name in mutedForeground weight 500; game category in mono caption. " +
+      "Viewer count in tabular mono with the live-pulse dot prefix.",
+    input:
+      "Chat input = full-width rounded-md, bg-secondary, 1px border-input, no full box on chat send (border-bottom on focus only). " +
+      "General input: rounded-md, bg-card, 1px border-input. Focus uses ring with .glow-purple at 35%. " +
+      "Emote picker trigger is a pill-shaped icon button to the right of the chat input.",
+    cta:
+      "Primary 'Follow' / 'Subscribe' = solid Twitch-purple with .glow-purple on hover and alert-pop on click-confirm. " +
+      "Secondary 'Watch Now' = bordered pill. Tertiary = purple underlined link. " +
+      "'Subscribe' upgrade variant may use a gradient from twitch-purple to alert-magenta — Streamlabs alert-tier styling, reserved for the upgrade path only.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.4)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.7)",
+    scrollbarStyle: "thin",
+  },
+};

package/themes/glassmorphic-modern/THEME.md

@@ -0,0 +1,119 @@
+# Design Direction — Glassmorphic-Modern
+
+## Ethos
+Apple Big Sur glass · iOS 14 widgets · Vision Pro depth · Spotify Now Playing backdrop · Stripe hero gradient
+
+## Feel
+Translucent frosted surfaces over rich gradient backdrops. Apple-era depth language without being a pure clone — rounded everything, soft shadows layered with backdrop-blur, gradient-driven backgrounds rather than flat fills. Reads modern, premium, slightly Apple-derivative on purpose.
+
+## Reference brands
+- **Apple Big Sur (macOS 11+)** → translucent chrome that picks up the desktop wallpaper. Glass as a material, not a filter.
+- **iOS 14+ widgets** → rounded glass tiles arranged on a gradient home screen. The tile language.
+- **Apple Vision Pro (visionOS)** → spatial depth, frosted layering, parallax tilt on hover.
+- **Spotify Now Playing** → blurred album art as backdrop. The surface IS the artwork.
+- **Stripe homepage hero** → violet gradient hero, glass cards floating over it.
+
+## Tokens
+HSL triples in `src/index.css`. Brand tokens: `--glass-light`, `--glass-mid`, `--gradient-start`, `--gradient-end`, `--accent-purple`. Primary is **iOS system blue** (`211 100% 50%`) — the canonical Apple blue.
+
+Surface stack is **gradient backdrop** (`--gradient-start` → `--gradient-end`) → **glass-mid card** at 70-80% opacity with backdrop-blur → **glass-light overlay** at 50-60% opacity for nested elements. Depth comes from translucency layered over the gradient, not from solid fills.
+
+The brand tokens (`glass-light`, `glass-mid`, `gradient-start`, `gradient-end`, `accent-purple`) are not decorative additions — they ARE the language. `accent-purple` is the Vision-Pro spatial accent used for non-CTA marketing moments.
+
+## Typography
+- **Display:** Inter (open-source SF Pro Display stand-in — clean geometric humanist). h1–h4, weights 500/600/700.
+- **Body:** Inter (same family — Apple convention is one face across sizes). Base 16px, line-height 1.6.
+- **Mono:** JetBrains Mono (open-source SF Mono stand-in). Code blocks, metrics, captions.
+
+Headings track `-0.022em` — tight, SF-Display-style. H1 uses `clamp(2.5rem, 6vw, 4.5rem)`. Inter stylistic sets `"cv11", "ss01", "ss03"` to push the typeface closer to SF's single-story a/g.
+
+## Spacing
+- **Container:** `max-w-6xl px-4 lg:px-8`.
+- **Section padding tiers:**
+  - Hero: `pt-24 pb-16 lg:pt-32 lg:pb-24`
+  - Default: `py-16 lg:py-24`
+  - Tight: `py-12 lg:py-16`
+- **Allowed scale values:** 4 6 8 12 16 20 24 32 48 64. Generous card padding is the signature — let glass surfaces breathe.
+
+## Color
+No hex anywhere. All color via tokens. Opacity via `/N` modifier (heavily used — glass IS opacity). Pure white is allowed only via `--glass-light`; pure black is never used — `--foreground` is `220 25% 14%` (deep cool ink).
+
+The gradient backdrop (`linear-gradient(135deg, hsl(var(--gradient-start)), hsl(var(--gradient-end)))`) is the page bg by default. Flat single-color backgrounds break the identity — if you find yourself reaching for one, use a tighter section of the gradient or a glass card instead.
+
+## Radius
+`--radius: 1.25rem` (20px). **Very rounded — iOS widget tile.** Pills are allowed for buttons, chips, and tags (`pillsAllowed: true`). Right angles read "bare HTML" in this language — every surface carries the round.
+
+## Shadows
+Four utilities, layered to fake depth on glass:
+- `.glass-soft` — subtle drop + inner-highlight inset for the default card lift
+- `.glass-deep` — larger drop + colored (violet) ambient shadow for hero and hover states
+- `.backdrop-blur-md` — 16px blur + 180% saturation, the default glass treatment
+- `.backdrop-blur-lg` — 28px blur + 180% saturation, for hero glass and modals
+
+Shadows pair with backdrop-blur — they don't work without it. The inner-highlight inset (`inset 0 1px 0 hsl(0 0% 100% / 0.55)`) is what sells the glass; without it the surface reads flat.
+
+## Motion
+Three keyframes, spring-physics feel:
+- `scale-in-spring` (320ms) — modals, popovers, tile reveal. Overshoots to 1.02 then settles.
+- `slide-up-soft` (400ms) — standard content entrance, ease-out translateY.
+- `parallax-tilt` (200ms) — subtle mouse-follow tilt on hero glass surfaces, Vision-Pro depth cue.
+
+Easing: `cubic-bezier(0.34, 1.56, 0.64, 1)` — bouncier than the project default for that spring effect. `prefers-reduced-motion` is honored — `parallax-tilt` is disabled entirely under reduced motion (it's the most aggressive of the three).
+
+## Component patterns
+- **Buttons:** translucent backdrop-blur with subtle border and hover lift. Primary = iOS blue solid (`bg-primary`, `text-primary-foreground`, `rounded-full` or `rounded-2xl`, `glass-soft`) or glass with blue tint. Secondary = pill-shaped glass (`bg-glass-light` at ~60% opacity, `backdrop-blur-md`, border). **No flat plain rectangles** — everything carries a glass treatment.
+- **Cards:** `rounded-3xl`, `bg-glass-mid` at 70-80% opacity, `backdrop-blur-lg`, hairline border, `glass-soft`. Padding `p-6 lg:p-8`. Title in Inter 600. Hover lifts to `glass-deep` with subtle 1.01 scale.
+- **Inputs:** full `rounded-2xl` box, `bg-glass-light` at 50% opacity, `backdrop-blur-md`, border. Focus ring `2px solid var(--ring) / 0.5` and border brightens. Label above; helper below in `mutedForeground`.
+- **CTAs:** primary button is the default. Secondary CTAs use pill-shaped glass button. Text-link variants gain a backdrop-blur halo on hover, never a plain underline.
+
+## Component families
+None at install time. As `*GlassCard`, `*Widget`, `*PillButton` families emerge, the Director lists them here with their shared pattern.
+
+## Details
+- **Selection:** `hsl(var(--primary) / 0.22)` background, foreground text.
+- **Focus ring:** `2px solid hsl(var(--ring) / 0.5)` — iOS blue at half opacity.
+- **Scrollbar:** thin.
+
+## Recommended rich media
+
+### Cover and hero imagery
+**Gradient backgrounds, not photos** — the gradient IS the background. The hero surface should be a CSS mesh gradient (or full-bleed gradient image) with glass cards layered over it. Acceptable cover subjects:
+- 3D rendered glass orbs and shapes (translucent material, soft volumetric lighting)
+- Vision-Pro-style spatial scenes (floating cards, depth-of-field, parallax layers)
+- Soft abstract gradient compositions
+- Occasional product shots of glassy hardware (perfume bottles, headphones, glass objects) photographed against the same violet-lavender gradient
+
+### AI tool recommendations
+- **Midjourney / Flux** for hero renders. Prompt template: `"Apple Vision Pro UI, translucent glass material, soft gradient backdrop, soft volumetric lighting, Octane render, 8K"`. For product photography: `"studio photography, glass material, soft frontal lighting, deep purple-violet gradient backdrop"`.
+- **Spline** for interactive 3D glass surfaces rendered in the browser. Best for hero scenes where the user can subtly rotate/explore.
+- **mesh-gradient.com** or **csshero.org/mesh** for declarative CSS mesh gradients — no AI needed; the hero background often doesn't need rendering at all.
+
+### Aspect ratios
+- **16:9** hero with the subject centered — gives the gradient room on either side.
+- **1:1** for product shots dropped into cards.
+- **Backgrounds are full-bleed** — no aspect constraint; gradients extend to the viewport edge and bleed past glass cards.
+
+### Color discipline
+Stay in the gradient palette — violet, blue, lavender. **Never warm-graded photography against this backdrop** (orange/amber tones read "wrong tab" — they fight the cool gradient and make the page look broken).
+
+### What to AVOID
+- **Flat single-color backgrounds** — defeats the gradient identity. If a section needs to feel quieter, use a tighter slice of the gradient or a glass overlay.
+- **Photography with warm color grading** — breaks the cool palette.
+- **Heavy chrome / metallic reflections** — that's Y2K, a different direction entirely.
+- **Brutalist screenshots, raw terminal output, monospace-heavy comps** — wrong altitude.
+- **Hard-edged geometric illustration** — anything that breaks the depth language.
+
+### Performance
+3D scenes via Spline or Three.js have real cost. **Gate behind `prefers-reduced-motion`** AND ship a static-image fallback for mobile. The parallax-tilt motion is similarly gated. Backdrop-filter is GPU-accelerated on modern browsers but expensive on low-end Android — test on a real device, not just desktop Chrome.
+
+### Accessibility
+**Backdrop-blur can fail contrast checks for text-on-glass.** Always verify WCAG AA at the foreground/glass boundary. Two safe patterns:
+1. Render text on the opaque inner card surface inside the glass container, not directly on the translucent overlay.
+2. Increase glass opacity (raise from ~50% to ~80%) wherever text sits directly on the glass.
+Never sacrifice the contrast check for the visual effect — a beautiful unreadable surface is a broken surface.
+
+## Exceptions
+None yet. When an intentional one-of-one violation lands, add it here with the reason.
+
+## Revisions
+- Initial direction, generated at install time.

package/themes/glassmorphic-modern/tokens.ts

@@ -0,0 +1,174 @@
+import type { Direction } from "../schema";
+
+export const glassmorphicModern: Direction = {
+  name: "glassmorphic-modern",
+  ethos:
+    "Apple Big Sur glass · iOS 14 widgets · Vision Pro depth · Spotify Now Playing backdrop · Stripe hero gradient",
+  references: [
+    { brand: "Apple Big Sur", trait: "translucent chrome over desktop wallpaper" },
+    { brand: "iOS 14 widgets", trait: "rounded glass tiles on a gradient home screen" },
+    { brand: "Apple Vision Pro", trait: "spatial depth and frosted layering" },
+    { brand: "Spotify Now Playing", trait: "blurred album-art backdrop" },
+    { brand: "Stripe", trait: "violet hero gradient" },
+  ],
+  feel:
+    "Translucent frosted surfaces over rich gradient backdrops. Apple-era " +
+    "depth language without being a pure clone — rounded everything, soft " +
+    "shadows layered with backdrop-blur, gradient-driven backgrounds rather " +
+    "than flat fills. Reads modern, premium, slightly Apple-derivative on " +
+    "purpose.",
+
+  fonts: {
+    display: {
+      family: "Inter",
+      fallback: ["-apple-system", "BlinkMacSystemFont", "SF Pro Display", "system-ui", "sans-serif"],
+      from: "open-source SF Pro Display stand-in — clean geometric humanist, Apple-era",
+      googleFont: "Inter",
+      weights: [500, 600, 700],
+    },
+    body: {
+      family: "Inter",
+      fallback: ["-apple-system", "BlinkMacSystemFont", "SF Pro Text", "system-ui", "sans-serif"],
+      from: "single-family Apple convention — same face across display and body",
+      googleFont: "Inter",
+      weights: [400, 500, 600],
+    },
+    mono: {
+      family: "JetBrains Mono",
+      fallback: ["ui-monospace", "SF Mono", "SFMono-Regular", "Consolas", "monospace"],
+      from: "open-source SF Mono stand-in — captions, metrics, code chips",
+      googleFont: "JetBrains+Mono",
+      weights: [400, 500],
+    },
+  },
+
+  typography: {
+    headingTracking: "-0.022em",      // tight, SF-Display-style
+    bodyTracking: "0",
+    fontFeatureSettings: '"cv11", "ss01", "ss03"',  // Inter single-story a/g, closer to SF
+    h1ScaleClamp: "clamp(2.5rem, 6vw, 4.5rem)",
+    bodyBaseSize: "1rem",
+    bodyLineHeight: "1.6",
+  },
+
+  colors: {
+    background: { hsl: "240 30% 96%", from: "light cool with violet bias — base under the gradient overlay" },
+    foreground: { hsl: "220 25% 14%", from: "deep cool ink — Big Sur dark text on light glass" },
+    card: { hsl: "220 30% 95%", from: "mid-tier glass surface — the readable card behind the blur" },
+    popover: { hsl: "0 0% 100%", from: "highest-translucency overlay — pure white at low opacity" },
+    primary: { hsl: "211 100% 50%", from: "iOS system blue — canonical Apple primary" },
+    primaryForeground: { hsl: "0 0% 100%", from: "white on iOS blue" },
+    secondary: { hsl: "220 25% 92%", from: "cool gray glass tier two — secondary chips and surfaces" },
+    secondaryForeground: { hsl: "220 25% 14%", from: "deep cool ink on cool gray glass" },
+    muted: { hsl: "220 25% 92%", from: "shares secondary tone; differentiated by usage" },
+    mutedForeground: { hsl: "220 14% 44%", from: "Vision-Pro-style secondary label — quiet cool gray" },
+    accent: { hsl: "265 60% 94%", from: "violet-tinted hover surface — picks up the gradient" },
+    accentForeground: { hsl: "265 75% 28%", from: "deep violet ink on violet wash" },
+    border: { hsl: "220 30% 88%", from: "soft cool hairline — visible against frosted glass" },
+    input: { hsl: "220 30% 88%", from: "same as border" },
+    ring: { hsl: "211 100% 50%", from: "iOS blue — focus only" },
+    destructive: { hsl: "4 90% 58%", from: "iOS system red — Apple alert convention" },
+    destructiveForeground: { hsl: "0 0% 100%", from: "white on iOS red" },
+    brand: {
+      "glass-light": { hsl: "0 0% 100%", from: "pure white for the highest-translucency overlays" },
+      "glass-mid": { hsl: "220 30% 95%", from: "middle-tier card surface — readable through the blur" },
+      "gradient-start": { hsl: "240 60% 88%", from: "backdrop gradient origin — cool lavender" },
+      "gradient-end": { hsl: "280 50% 85%", from: "backdrop gradient end — warmer violet" },
+      "accent-purple": { hsl: "265 75% 60%", from: "Vision Pro accent — spatial violet" },
+    },
+  },
+
+  spacing: {
+    base: 4,
+    scale: [4, 6, 8, 12, 16, 20, 24, 32, 48, 64],
+    containerMax: "max-w-6xl",
+    containerPadding: "px-4 lg:px-8",
+    sectionPadding: {
+      hero: "pt-24 pb-16 lg:pt-32 lg:pb-24",
+      default: "py-16 lg:py-24",
+      tight: "py-12 lg:py-16",
+    },
+  },
+
+  radius: {
+    base: "1.25rem",                  // 20px — iOS widget card
+    pillsAllowed: true,               // pills for buttons, chips, tags
+  },
+
+  shadows: {
+    style: "soft",
+    utilities: {
+      "glass-soft":
+        "0 1px 2px hsl(220 30% 20% / 0.06), 0 8px 24px hsl(220 30% 20% / 0.08), inset 0 1px 0 hsl(0 0% 100% / 0.55)",
+      "glass-deep":
+        "0 2px 4px hsl(220 30% 20% / 0.08), 0 24px 64px hsl(265 75% 40% / 0.18), inset 0 1px 0 hsl(0 0% 100% / 0.6)",
+      "backdrop-blur-md":
+        "backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);",
+      "backdrop-blur-lg":
+        "backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);",
+    },
+  },
+
+  motion: {
+    easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",   // springy overshoot — Vision-Pro/iOS feel
+    durations: {
+      reveal: 400,
+      loop: 2000,
+      ambient: 20000,
+    },
+    keyframes: {
+      "scale-in-spring": {
+        css:
+          "0% { opacity: 0; transform: scale(0.92); }\n" +
+          "60% { opacity: 1; transform: scale(1.02); }\n" +
+          "100% { opacity: 1; transform: scale(1); }",
+        defaultDuration: 320,
+        iteration: "once",
+        purpose: "modals, popovers, tile reveal — spring overshoot, iOS card feel",
+      },
+      "slide-up-soft": {
+        css:
+          "from { opacity: 0; transform: translateY(16px); }\n" +
+          "to { opacity: 1; transform: translateY(0); }",
+        defaultDuration: 400,
+        iteration: "once",
+        purpose: "standard content entrance — soft translateY with ease-out",
+      },
+      "parallax-tilt": {
+        css:
+          "from { transform: perspective(800px) rotateX(0deg) rotateY(0deg); }\n" +
+          "to { transform: perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }",
+        defaultDuration: 200,
+        iteration: "once",
+        purpose: "subtle mouse-follow tilt on hero glass surfaces — Vision-Pro depth cue",
+      },
+    },
+    respectsReducedMotion: true,
+  },
+
+  density: "medium",
+
+  patterns: {
+    button:
+      "Translucent backdrop-blur with subtle border and hover lift. " +
+      "Primary = iOS blue solid (bg-primary, text-primary-foreground, rounded-full or rounded-2xl, glass-soft) " +
+      "or glass with blue tint. Secondary = pill-shaped glass (bg-glass-light at ~60% opacity, backdrop-blur-md, border). " +
+      "No flat plain rectangles — everything carries a glass treatment.",
+    card:
+      "Rounded-3xl (1.25rem+), bg-glass-mid at 70-80% opacity, backdrop-blur-lg, hairline border, glass-soft. " +
+      "Internal padding p-6 lg:p-8. Title in Inter 600. Hover lifts to glass-deep with subtle (1.01) scale.",
+    input:
+      "Full rounded-2xl box, bg-glass-light at 50% opacity, backdrop-blur-md, border. " +
+      "Focus = ring (2px primary at 50% opacity) and border brightens. Label above; helper below in mutedForeground.",
+    cta:
+      "Primary button is the default. Secondary CTAs use pill-shaped glass button. " +
+      "Text-link variants gain a backdrop-blur halo on hover, never a plain underline.",
+  },
+
+  details: {
+    selectionBg: "hsl(var(--primary) / 0.22)",
+    selectionFg: "hsl(var(--foreground))",
+    focusRing: "2px solid hsl(var(--ring) / 0.5)",
+    scrollbarStyle: "thin",
+  },
+};