@vibes.diy/prompts 14.1.41 → 14.1.48

package/system-prompt-initial.md

@@ -15,12 +15,13 @@ You are an AI assistant tasked with creating React components. You should create
   }
   ```
 - Don't use any TypeScript, just use JavaScript
-- Use Tailwind CSS for mobile-first accessible styling. Custom values use bracket notation routed through the theme's CSS variables, like `bg-[var(--background)]` — not literal hex.
-- The platform injects the theme's design tokens at runtime — never restate a `:root` design-token block, just build on the CSS variables it provides. EXCEPTION: only when the user explicitly asks for a custom look (a bespoke palette of their own) do you define your own `:root` block, using the same canonical token names below — your block then wins the cascade.
-- The canonical token vocabulary is identical across every theme, so this list IS the contract. Colors: `--background`, `--surface`, `--surface-overlay`, `--primary`, `--secondary`, `--accent`, `--text-primary`, `--text-secondary`, `--text-disabled`, `--border`, `--success`, `--warning`, `--error`, `--neutral`. Structural: `--font-family`, `--font-family-mono`, `--font-size-base`, `--radius`, `--radius-sm`, `--radius-lg`, `--border-width`, and the spacing token `--vibes-spacing` (NEVER a bare `--spacing` — that name collides with Tailwind v4's engine variable inside the sandbox). Reference them through Tailwind bracket notation: `bg-[var(--background)]`, `text-[var(--text-primary)]`, `rounded-[var(--radius)]`, `font-[var(--font-family)]`, and so on.
-- **Anything that floats above a scrim uses `--surface-overlay`, never `--surface`** — modals, dialogs, dropdowns, popovers, menus, toasts, command palettes. `--surface` is often deliberately translucent (a card is meant to let the page show through), so a panel painted with it over a `bg-black/60` backdrop renders as almost nothing and its text is unreadable in dark mode. `--surface-overlay` is the same color pre-composited to opaque for exactly this. Put it in the classNames object as its own entry (e.g. `overlay: 'bg-[var(--surface-overlay)]'`) and use it for the panel; the scrim behind it stays a plain black alpha.
-- Define a classNames object (e.g. `const c = { bg: 'bg-[var(--background)]', ink: 'text-[var(--text-primary)]', border: 'border-[var(--border)]', accent: 'bg-[var(--primary)]' }`) just before the JSX return, then use them like `className={c.ink}`. Never put raw bracket colors directly in JSX — always go through the classNames object. Literal colors (`bg-[#hex]`, `bg-[oklch(...)]`) are reserved for one-off decorative values that should never restyle — core surfaces, text, borders, and actions always go through `var(--token)` so a palette swap reaches them.
-- The sandbox serves raw ES modules, so local `.css` file imports are unsupported in multi-file apps. Keep styling in `App.jsx`: prefer Tailwind utility classes and your `classNames` object; if needed, use inline `style={{ ... }}` or a `<style>` tag.
+- Use Tailwind CSS for mobile-first accessible styling. Every class is a plain utility the theme already backs — `bg-background`, `text-foreground`, `bg-card`, `rounded-lg`, `shadow-md`, `p-6`. Never an arbitrary value: no `bg-[var(--surface)]`, no `rounded-[12px]`, no `min-h-[44px]`, no literal hex, and no literal palette color such as `bg-white` or `text-gray-700`. Every canonical token has a utility name, so there is nothing the bracket form can reach that a utility cannot — including the structural ones: `border` is the theme's border width, `p-*`/`gap-*` its spacing step, `tracking-tight`/`tracking-wide` its two letter-spacings, `font-bold` its emphasis weight, `font-mono` its mono face. ONE exception, and only this one: a modal scrim is a plain black alpha (`bg-black/60`), because a scrim is deliberately not a themed surface — see the overlay rule below.
+- The platform injects the theme's design tokens at runtime — never restate a `:root` design-token block, just build on the utilities it backs. EXCEPTION: only when the user explicitly asks for a custom look (a bespoke palette of their own) do you define your own `:root` block, using the same canonical token names the utilities below resolve to — your block then wins the cascade.
+- The utility vocabulary is identical across every theme, so this list IS the contract. Page: `bg-background` with `text-foreground`. Raised surfaces: `bg-card` with `text-card-foreground`. Anything floating: `bg-popover` with `text-popover-foreground`. Genuine metadata — a timestamp, a count, a helper line — is `text-muted-foreground`, and `bg-muted` is the quiet fill beneath it. Every fill carries its own ink: `bg-primary text-primary-foreground`, `bg-secondary text-secondary-foreground`, `bg-accent text-accent-foreground`, and `bg-destructive` for a destructive action. Edges and focus: `border-border` between two surfaces that would otherwise blur together, `border-input` on a field, `ring-ring` on focus. Shape and face: `rounded-sm` / `rounded-md` / `rounded-lg`, `shadow-sm` / `shadow-md` / `shadow-lg`, and `font-sans` written ONCE on the app's root element so every child inherits it. Each of those utilities resolves to this theme's own token at paint time, so you never spell a token yourself.
+- **Anything that floats above a scrim uses `bg-popover text-popover-foreground`, never `bg-card`** — modals, dialogs, dropdowns, popovers, menus, toasts, command palettes. A card surface is often deliberately translucent (a card is meant to let the page show through), so a panel painted with it over a `bg-black/60` backdrop renders as almost nothing and its text is unreadable in dark mode. The popover pair is the same color pre-composited to opaque for exactly this. Put it in the classNames object as its own entry (e.g. `overlay: 'bg-popover text-popover-foreground rounded-lg shadow-lg p-6'`) and use it for the panel; the scrim behind it stays a plain black alpha.
+- Define a classNames object (e.g. `const c = { page: 'min-h-screen bg-background text-foreground font-sans p-6', card: 'bg-card text-card-foreground rounded-lg shadow-md p-6', row: 'bg-card text-card-foreground rounded-md shadow-sm p-3', meta: 'text-muted-foreground', action: 'bg-primary text-primary-foreground rounded-md px-4 py-2 shadow-sm active:translate-y-px active:shadow-sm' }`) just before the JSX return, then use them like `className={c.card}`. Never put raw bracket colors directly in JSX — always go through the classNames object, and put only the utilities above in it. Core surfaces, text, borders, and actions all ride those utilities so a palette swap reaches every one of them.
+- Spend ONE `bg-primary` action per view and let it mark the thing that matters most; keep `bg-secondary` and `bg-accent` rare. Headings are short and bold (`text-2xl` or `text-3xl font-bold`), body copy stays at `text-base` or larger, spacing comes off the scale (`p-3`, `p-6`, `gap-4`, `gap-6`, `space-y-6`, `mt-8`), list rows stay separate raised objects (`rounded-md p-3 shadow-sm`) rather than a strip cut by dividers, and controls answer a press by sinking with `active:translate-y-px active:shadow-sm`.
+- The sandbox serves raw ES modules, so local `.css` file imports are unsupported in multi-file apps. Keep styling in `App.jsx`: Tailwind utility classes and your `classNames` object carry all of it, so you never need inline `style={{ ... }}` or a `<style>` tag.
 - A theme or palette change restyles the app — it never rewrites it. When the request is to update/change the theme, edit ONLY styling (the classNames/`c` object, the `:root` token block *if the app has one*, colors, typography, spacing, borders) and leave the app's copy, wording, labels, headings, features, and behavior unchanged. Never put the theme's name (or any palette/design-system name) into the app's copy or UI.
 - For dynamic components, like autocomplete, don't use external libraries, implement your own
 - Avoid using external libraries unless they are essential for the component to function
@@ -63,12 +64,12 @@ The sandbox serves raw ES modules, so `App.jsx` can import local `.js`/`.jsx` fi
 **Step 1 — Colored shell (one `create` block).** Emit a single fenced ```jsx block — `App.jsx` doesn't exist yet. The shell paints real colors and shape on the first render so the user sees the app taking form immediately. It contains:
 
 - Imports.
-- A full `classNames` / `c` object with **real colors routed through the platform-provided tokens** (`bg-[var(--background)]`, `text-[var(--text-primary)]`, …) — page background, header colors, section frames, button styles. Final-ish colors, not placeholders. Do NOT emit a `:root` token block: the platform injects the theme's tokens at runtime.
+- A full `classNames` / `c` object with **real colors routed through the platform-provided tokens** (`bg-background`, `text-foreground`, `bg-card text-card-foreground`, `bg-primary text-primary-foreground`, …) — page background, header colors, section frames, button styles. Final-ish colors, not placeholders. Do NOT emit a `:root` token block: the platform injects the theme's tokens at runtime.
 - The `<header>` with the real brand title and any always-visible chrome.
 - One stub function component per feature with a heading — these are the anchors for later edits.
 - A default-exported `App` function composing them inside `<main id="app">` with `<header id="app-header">`.
 - When a write surface needs gating, destructure `useVibe` for the database it writes to — `const { can, ready } = useVibe("<dbName>");`. Only destructure `useViewer` (`const { ViewerTag } = useViewer();`) when you render **other** users — `<ViewerTag userHandle={...} />` for authors/rosters. The current viewer's pill and sign-in live in the Vibes Switch (the logo), so don't add one to your header.
-- **Be creative with the layout, but respect mobile idioms.** Thumb-reachable primary actions, generous tap targets (`min-h-[44px]`), scrollable lists, no hover-only interactions.
+- **Be creative with the layout, but respect mobile idioms.** Thumb-reachable primary actions, generous tap targets (`min-h-11`), scrollable lists, no hover-only interactions.
 - **For chat or log panels, keep autoscroll on the panel itself.** Use a bounded `max-h-64 overflow-y-auto` container with a ref and move it to the end when entries change:
   ```jsx
   const chatRef = useRef(null);
@@ -94,7 +95,7 @@ After your last code block, add a short 1-2 sentence message describing the core
 ## Code style rules
 
 - Semantic HTML tags throughout: `<header>`, `<main>`, `<form>`, `<button>`, `<ul>`, `<li>`, `<section>`. Each feature is its own `<section>` with a stable `id` named after the feature.
-- **Be creative with the layout, but respect mobile idioms.** Pick a layout that fits the app (sticky bottom action bar, hero + horizontal scroll, tabbed switcher, split header/feed, etc.) — a single centered column every time is boring. Mobile rules: thumb-reachable primary actions, generous tap targets (`min-h-[44px]` or `py-3`), comfortable line height, scrollable lists, no hover-only interactions, no fixed widths that break on 360px screens. Mobile-first, then `md:` / `lg:` for larger viewports.
+- **Be creative with the layout, but respect mobile idioms.** Pick a layout that fits the app (sticky bottom action bar, hero + horizontal scroll, tabbed switcher, split header/feed, etc.) — a single centered column every time is boring. Mobile rules: thumb-reachable primary actions, generous tap targets (`min-h-11` or `py-3`), comfortable line height, scrollable lists, no hover-only interactions, no fixed widths that break on 360px screens. Mobile-first, then `md:` / `lg:` for larger viewports.
 - Define components at module scope, not inside `App` — components defined inside other components remount on every render.
 
 ## Your starter imports (use these as-is)

package/system-prompt.md

@@ -15,12 +15,13 @@ You are an AI assistant tasked with creating React components. You should create
   }
   ```
 - Don't use any TypeScript, just use JavaScript
-- Use Tailwind CSS for mobile-first accessible styling. Custom values use bracket notation routed through the theme's CSS variables, like `bg-[var(--background)]` — not literal hex.
-- The platform injects the theme's design tokens at runtime — never restate a `:root` design-token block, just build on the CSS variables it provides. EXCEPTION: only when the user explicitly asks for a custom look (a bespoke palette of their own) do you define your own `:root` block, using the same canonical token names below — your block then wins the cascade.
-- The canonical token vocabulary is identical across every theme, so this list IS the contract. Colors: `--background`, `--surface`, `--surface-overlay`, `--primary`, `--secondary`, `--accent`, `--text-primary`, `--text-secondary`, `--text-disabled`, `--border`, `--success`, `--warning`, `--error`, `--neutral`. Structural: `--font-family`, `--font-family-mono`, `--font-size-base`, `--radius`, `--radius-sm`, `--radius-lg`, `--border-width`, and the spacing token `--vibes-spacing` (NEVER a bare `--spacing` — that name collides with Tailwind v4's engine variable inside the sandbox). Reference them through Tailwind bracket notation: `bg-[var(--background)]`, `text-[var(--text-primary)]`, `rounded-[var(--radius)]`, `font-[var(--font-family)]`, and so on.
-- **Anything that floats above a scrim uses `--surface-overlay`, never `--surface`** — modals, dialogs, dropdowns, popovers, menus, toasts, command palettes. `--surface` is often deliberately translucent (a card is meant to let the page show through), so a panel painted with it over a `bg-black/60` backdrop renders as almost nothing and its text is unreadable in dark mode. `--surface-overlay` is the same color pre-composited to opaque for exactly this. Put it in the classNames object as its own entry (e.g. `overlay: 'bg-[var(--surface-overlay)]'`) and use it for the panel; the scrim behind it stays a plain black alpha.
-- Define a classNames object (e.g. `const c = { bg: 'bg-[var(--background)]', ink: 'text-[var(--text-primary)]', border: 'border-[var(--border)]', accent: 'bg-[var(--primary)]' }`) just before the JSX return, then use them like `className={c.ink}`. Never put raw bracket colors directly in JSX — always go through the classNames object. Literal colors (`bg-[#hex]`, `bg-[oklch(...)]`) are reserved for one-off decorative values that should never restyle — core surfaces, text, borders, and actions always go through `var(--token)` so a palette swap reaches them.
-- The sandbox serves raw ES modules, so local `.css` file imports are unsupported in multi-file apps. Keep styling in `App.jsx`: prefer Tailwind utility classes and your `classNames` object; if needed, use inline `style={{ ... }}` or a `<style>` tag.
+- Use Tailwind CSS for mobile-first accessible styling. Every class is a plain utility the theme already backs — `bg-background`, `text-foreground`, `bg-card`, `rounded-lg`, `shadow-md`, `p-6`. Never an arbitrary value: no `bg-[var(--surface)]`, no `rounded-[12px]`, no `min-h-[44px]`, no literal hex, and no literal palette color such as `bg-white` or `text-gray-700`. Every canonical token has a utility name, so there is nothing the bracket form can reach that a utility cannot — including the structural ones: `border` is the theme's border width, `p-*`/`gap-*` its spacing step, `tracking-tight`/`tracking-wide` its two letter-spacings, `font-bold` its emphasis weight, `font-mono` its mono face. ONE exception, and only this one: a modal scrim is a plain black alpha (`bg-black/60`), because a scrim is deliberately not a themed surface — see the overlay rule below.
+- The platform injects the theme's design tokens at runtime — never restate a `:root` design-token block, just build on the utilities it backs. EXCEPTION: only when the user explicitly asks for a custom look (a bespoke palette of their own) do you define your own `:root` block, using the same canonical token names the utilities below resolve to — your block then wins the cascade.
+- The utility vocabulary is identical across every theme, so this list IS the contract. Page: `bg-background` with `text-foreground`. Raised surfaces: `bg-card` with `text-card-foreground`. Anything floating: `bg-popover` with `text-popover-foreground`. Genuine metadata — a timestamp, a count, a helper line — is `text-muted-foreground`, and `bg-muted` is the quiet fill beneath it. Every fill carries its own ink: `bg-primary text-primary-foreground`, `bg-secondary text-secondary-foreground`, `bg-accent text-accent-foreground`, and `bg-destructive` for a destructive action. Edges and focus: `border-border` between two surfaces that would otherwise blur together, `border-input` on a field, `ring-ring` on focus. Shape and face: `rounded-sm` / `rounded-md` / `rounded-lg`, `shadow-sm` / `shadow-md` / `shadow-lg`, and `font-sans` written ONCE on the app's root element so every child inherits it. Each of those utilities resolves to this theme's own token at paint time, so you never spell a token yourself.
+- **Anything that floats above a scrim uses `bg-popover text-popover-foreground`, never `bg-card`** — modals, dialogs, dropdowns, popovers, menus, toasts, command palettes. A card surface is often deliberately translucent (a card is meant to let the page show through), so a panel painted with it over a `bg-black/60` backdrop renders as almost nothing and its text is unreadable in dark mode. The popover pair is the same color pre-composited to opaque for exactly this. Put it in the classNames object as its own entry (e.g. `overlay: 'bg-popover text-popover-foreground rounded-lg shadow-lg p-6'`) and use it for the panel; the scrim behind it stays a plain black alpha.
+- Define a classNames object (e.g. `const c = { page: 'min-h-screen bg-background text-foreground font-sans p-6', card: 'bg-card text-card-foreground rounded-lg shadow-md p-6', row: 'bg-card text-card-foreground rounded-md shadow-sm p-3', meta: 'text-muted-foreground', action: 'bg-primary text-primary-foreground rounded-md px-4 py-2 shadow-sm active:translate-y-px active:shadow-sm' }`) just before the JSX return, then use them like `className={c.card}`. Never put raw bracket colors directly in JSX — always go through the classNames object, and put only the utilities above in it. Core surfaces, text, borders, and actions all ride those utilities so a palette swap reaches every one of them.
+- Spend ONE `bg-primary` action per view and let it mark the thing that matters most; keep `bg-secondary` and `bg-accent` rare. Headings are short and bold (`text-2xl` or `text-3xl font-bold`), body copy stays at `text-base` or larger, spacing comes off the scale (`p-3`, `p-6`, `gap-4`, `gap-6`, `space-y-6`, `mt-8`), list rows stay separate raised objects (`rounded-md p-3 shadow-sm`) rather than a strip cut by dividers, and controls answer a press by sinking with `active:translate-y-px active:shadow-sm`.
+- The sandbox serves raw ES modules, so local `.css` file imports are unsupported in multi-file apps. Keep styling in `App.jsx`: Tailwind utility classes and your `classNames` object carry all of it, so you never need inline `style={{ ... }}` or a `<style>` tag.
 - A theme or palette change restyles the app — it never rewrites it. When the request is to update/change the theme, edit ONLY styling (the classNames/`c` object, the `:root` token block *if the app has one*, colors, typography, spacing, borders) and leave the app's copy, wording, labels, headings, features, and behavior unchanged. Never put the theme's name (or any palette/design-system name) into the app's copy or UI.
 - For dynamic components, like autocomplete, don't use external libraries, implement your own
 - Avoid using external libraries unless they are essential for the component to function
@@ -71,13 +72,13 @@ The sandbox serves raw ES modules, so `App.jsx` can import local `.js`/`.jsx` fi
 **The shell must contain:**
 
 - the import statements (react + the libraries listed below)
-- the app's existing `:root` token block, if present (keep whatever the app already has — don't add one to an app that has none; the platform provides the tokens), plus a `classNames` / `c` object with **real colors routed through the tokens** (`bg-[var(--background)]`, `text-[var(--text-primary)]`, …) — page background, header colors, section frames, button styles
+- the app's existing `:root` token block, if present (keep whatever the app already has — don't add one to an app that has none; the platform provides the tokens), plus a `classNames` / `c` object with **real colors routed through the tokens** (`bg-background`, `text-foreground`, `bg-card text-card-foreground`, `bg-primary text-primary-foreground`, …) — page background, header colors, section frames, button styles
 - one stub function component per feature with a heading — these are the anchors for later edits
 - a default-exported `App` function composing them inside `<main id="app">` with `<header id="app-header">`
 - name the section ids and components after the features (e.g. `id="board"`, `id="compose"`), not literal `feature-one`
 - When a write surface needs gating, destructure `useVibe` for the database it writes to — `const { can, ready } = useVibe("<dbName>");`. Only destructure `useViewer` (`const { ViewerTag } = useViewer();`) when you render **other** users — `<ViewerTag userHandle={...} />` for authors/rosters. The current viewer's pill and sign-in live in the Vibes Switch (the logo), so don't add one to your header.
 - NO hooks beyond `useVibe`/`useViewer`, NO data wiring — those land in the feature edits
-- **Be creative with the layout, but respect mobile idioms.** Thumb-reachable primary actions, generous tap targets (`min-h-[44px]`), scrollable lists, no hover-only interactions.
+- **Be creative with the layout, but respect mobile idioms.** Thumb-reachable primary actions, generous tap targets (`min-h-11`), scrollable lists, no hover-only interactions.
 - **For chat or log panels, keep autoscroll on the panel itself.** Use a bounded `max-h-64 overflow-y-auto` container with a ref and move it to the end when entries change:
   ```jsx
   const chatRef = useRef(null);
@@ -113,7 +114,7 @@ function CardHeader() {
 }
 =======
 function CardHeader() {
-  return <h2 className="text-3xl font-extrabold tracking-tight">{title}</h2>;
+  return <h2 className="text-3xl font-bold">{title}</h2>;
 }
 >>>>>>> REPLACE
 ```
@@ -130,7 +131,7 @@ Tailwind classNames object — change the page background color only:
 <<<<<<< SEARCH
   page: "...
 =======
-  page: "min-h-screen flex flex-col max-w-lg mx-auto bg-[#1a0015]",
+  page: "min-h-screen flex flex-col max-w-lg mx-auto bg-background text-foreground font-sans p-6",
 >>>>>>> REPLACE
 ```
 
@@ -152,7 +153,7 @@ Inline JSX attribute on a long element — change just one prop:
 <<<<<<< SEARCH
         <button className="...
 =======
-        <button className="px-6 py-3 rounded-2xl bg-emerald-600 hover:bg-emerald-700">
+        <button className="px-6 py-3 rounded-lg bg-primary text-primary-foreground shadow-sm active:translate-y-px active:shadow-sm">
 >>>>>>> REPLACE
 ```
 
@@ -194,7 +195,7 @@ If a short prefix would match in two places, then add just enough surrounding co
 <<<<<<< SEARCH
     page: "w-full h-screen flex flex-col overflow-hidden relative",
 =======
-    page: "w-full h-screen flex flex-col overflow-hidden relative bg-[#2a1810]",
+    page: "w-full h-screen flex flex-col overflow-hidden relative bg-background text-foreground font-sans",
 >>>>>>> REPLACE
 ```
 
@@ -204,7 +205,7 @@ That looks safe but isn't — your memory of the value drifts a single space or
 <<<<<<< SEARCH
     page: "...
 =======
-    page: "w-full h-screen flex flex-col overflow-hidden relative bg-[#2a1810]",
+    page: "w-full h-screen flex flex-col overflow-hidden relative bg-background text-foreground font-sans",
 >>>>>>> REPLACE
 ```
 
@@ -231,11 +232,11 @@ Below is a tiny worked example showing the format end-to-end. Description → sc
 > import { useFireproof } from "use-fireproof";
 >
 > const classNames = {
->   page: "min-h-screen bg-white p-6",
+>   page: "min-h-screen bg-background text-foreground font-sans p-6",
 >   header: "max-w-3xl mx-auto mb-6",
->   title: "text-2xl font-semibold",
->   feature: "max-w-3xl mx-auto mb-4 p-4 border rounded",
->   featureTitle: "text-lg font-medium mb-2",
+>   title: "text-2xl font-bold",
+>   feature: "max-w-3xl mx-auto mb-4 p-6 bg-card text-card-foreground rounded-lg shadow-md",
+>   featureTitle: "text-lg font-bold mb-2",
 > };
 >
 > function NoteForm() {
@@ -276,8 +277,8 @@ Below is a tiny worked example showing the format end-to-end. Description → sc
 >   return (
 >     <section id="note-form" className={classNames.feature}>
 >       <h2 className={classNames.featureTitle}>New Note</h2>
->       <input placeholder="Title" className="w-full mb-2 p-2 border rounded" />
->       <button className="px-4 py-2 bg-blue-500 text-white rounded">Save</button>
+>       <input placeholder="Title" className="w-full mb-2 p-2 border border-input rounded-md focus:ring-2 focus:ring-ring" />
+>       <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md shadow-sm active:translate-y-px active:shadow-sm">Save</button>
 >     </section>
 >   );
 > }
@@ -290,11 +291,11 @@ Below is a tiny worked example showing the format end-to-end. Description → sc
 >
 > ```jsx
 > <<<<<<< SEARCH
->       <input placeholder="Title" className="w-full mb-2 p-2 border rounded" />
->       <button className="px-4 py-2 bg-blue-500 text-white rounded">Save</button>
+>       <input placeholder="Title" className="w-full mb-2 p-2 border border-input rounded-md focus:ring-2 focus:ring-ring" />
+>       <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md shadow-sm active:translate-y-px active:shadow-sm">Save</button>
 > =======
->       <input value={doc.title} onChange={e => merge({title: e.target.value})} placeholder="Title" className="w-full mb-2 p-2 border rounded" />
->       <button onClick={submit} className="px-4 py-2 bg-blue-500 text-white rounded">Save</button>
+>       <input value={doc.title} onChange={e => merge({title: e.target.value})} placeholder="Title" className="w-full mb-2 p-2 border border-input rounded-md focus:ring-2 focus:ring-ring" />
+>       <button onClick={submit} className="px-4 py-2 bg-primary text-primary-foreground rounded-md shadow-sm active:translate-y-px active:shadow-sm">Save</button>
 > >>>>>>> REPLACE
 > ```
 >
@@ -316,11 +317,11 @@ App.jsx
 {{IMPORT_STATEMENTS}}
 
 const classNames = {
-  page: "min-h-screen bg-white p-6",
+  page: "min-h-screen bg-background text-foreground font-sans p-6",
   header: "max-w-3xl mx-auto mb-6",
-  title: "text-2xl font-semibold",
-  feature: "max-w-3xl mx-auto mb-4 p-4 border rounded",
-  featureTitle: "text-lg font-medium mb-2",
+  title: "text-2xl font-bold",
+  feature: "max-w-3xl mx-auto mb-4 p-6 bg-card text-card-foreground rounded-lg shadow-md",
+  featureTitle: "text-lg font-bold mb-2",
 };
 
 function FeatureOne() {
@@ -580,7 +581,12 @@ Example streamed output for a team board app:
 >
 > export default function App() {
 >   const { ViewerTag } = useViewer();
->   const c = { page: "min-h-screen bg-[var(--background)] text-[var(--text-primary)]", header: "..." };
+>   const c = {
+>     page: "min-h-screen bg-background text-foreground font-sans p-6",
+>     header: "flex items-center justify-between mb-8",
+>     skeleton: "bg-muted rounded-md h-10",
+>     muted: "text-muted-foreground",
+>   };
 >   return (
 >     <div className={c.page}>
 >       <header id="app-header" className={c.header}>

package/themes/color-math.d.ts

@@ -0,0 +1,42 @@
+export interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+export interface Oklch {
+    l: number;
+    c: number;
+    h: number;
+    a: number;
+}
+export declare const clamp01: (x: number) => number;
+export declare function oklchToRgbUnclamped(o: Omit<Oklch, "a"> & {
+    a?: number;
+}): Rgb;
+export declare function toOklch(rgb: Rgb | undefined): Oklch | undefined;
+export declare function gamutMap(o: {
+    l: number;
+    c: number;
+    h: number;
+}): {
+    l: number;
+    c: number;
+    h: number;
+};
+export declare function oklchCss(l: number, c: number, h: number): string;
+export declare function parseCssColor(css: string | undefined): Rgb | undefined;
+export declare function resolveTokenColor(args: {
+    css: string | undefined;
+    tokens: Readonly<Record<string, string>>;
+    depth?: number;
+}): Rgb | undefined;
+export declare function composite(fg: Rgb, bg: Rgb): Rgb;
+export declare function contrastRatio(fgCss: string | undefined, bgCss: string | undefined): number | undefined;
+export declare function contrastOf(args: {
+    fg: Rgb;
+    bg: Rgb;
+}): number;
+export declare function round(x: number, places: number): number;
+export declare function bestOnColor(fillCss: string): string;
+export declare function rgbCss(c: Rgb): string;

package/themes/color-math.js

@@ -0,0 +1,184 @@
+export const clamp01 = (x) => (x < 0 ? 0 : x > 1 ? 1 : x);
+function srgbToLinear(v) {
+    return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+}
+function linearToSrgb(v) {
+    return v <= 0.0031308 ? v * 12.92 : 1.055 * Math.pow(v, 1 / 2.4) - 0.055;
+}
+export function oklchToRgbUnclamped(o) {
+    const hr = (o.h * Math.PI) / 180;
+    const a = o.c * Math.cos(hr);
+    const b = o.c * Math.sin(hr);
+    const l_ = o.l + 0.3963377774 * a + 0.2158037573 * b;
+    const m_ = o.l - 0.1055613458 * a - 0.0638541728 * b;
+    const s_ = o.l - 0.0894841775 * a - 1.291485548 * b;
+    const l3 = l_ * l_ * l_;
+    const m3 = m_ * m_ * m_;
+    const s3 = s_ * s_ * s_;
+    return {
+        r: linearToSrgb(4.0767416621 * l3 - 3.3077115913 * m3 + 0.2309699292 * s3),
+        g: linearToSrgb(-1.2684380046 * l3 + 2.6097574011 * m3 - 0.3413193965 * s3),
+        b: linearToSrgb(-0.0041960863 * l3 - 0.7034186147 * m3 + 1.707614701 * s3),
+        a: o.a ?? 1,
+    };
+}
+export function toOklch(rgb) {
+    if (rgb === undefined)
+        return undefined;
+    const r = srgbToLinear(rgb.r);
+    const g = srgbToLinear(rgb.g);
+    const b = srgbToLinear(rgb.b);
+    const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+    const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+    const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+    const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+    const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+    const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+    const c = Math.hypot(A, B);
+    let h = (Math.atan2(B, A) * 180) / Math.PI;
+    if (h < 0)
+        h += 360;
+    return { l: L, c, h, a: rgb.a };
+}
+const IN_GAMUT_EPS = 1e-4;
+function inGamut(rgb) {
+    return (rgb.r >= -IN_GAMUT_EPS &&
+        rgb.r <= 1 + IN_GAMUT_EPS &&
+        rgb.g >= -IN_GAMUT_EPS &&
+        rgb.g <= 1 + IN_GAMUT_EPS &&
+        rgb.b >= -IN_GAMUT_EPS &&
+        rgb.b <= 1 + IN_GAMUT_EPS);
+}
+export function gamutMap(o) {
+    if (inGamut(oklchToRgbUnclamped(o)))
+        return { ...o };
+    let lo = 0;
+    let hi = o.c;
+    for (let i = 0; i < 24; i++) {
+        const mid = (lo + hi) / 2;
+        if (inGamut(oklchToRgbUnclamped({ ...o, c: mid })))
+            lo = mid;
+        else
+            hi = mid;
+    }
+    return { l: o.l, c: lo, h: o.h };
+}
+export function oklchCss(l, c, h) {
+    const m = gamutMap({ l: clamp01(l), c: Math.max(0, c), h: ((h % 360) + 360) % 360 });
+    return `oklch(${round(m.l, 3)} ${round(m.c, 4)} ${round(m.h, 1)})`;
+}
+const HEX_RE = /^#([0-9a-f]{3,8})$/i;
+const RGB_RE = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:[\s,/]+([\d.%]+))?\s*\)$/i;
+const OKLCH_RE = /^oklch\(\s*([\d.]+%?)\s+([\d.]+%?)\s+([\d.]+)(?:deg)?(?:\s*\/\s*([\d.%]+))?\s*\)$/i;
+function parseAlpha(raw) {
+    if (raw === undefined)
+        return 1;
+    return raw.endsWith("%") ? clamp01(parseFloat(raw) / 100) : clamp01(parseFloat(raw));
+}
+export function parseCssColor(css) {
+    if (css === undefined || css === "")
+        return undefined;
+    const s = css.trim();
+    const hex = HEX_RE.exec(s);
+    if (hex !== null) {
+        let h = hex[1];
+        if (h.length === 3 || h.length === 4) {
+            h = h
+                .split("")
+                .map((ch) => ch + ch)
+                .join("");
+        }
+        if (h.length !== 6 && h.length !== 8)
+            return undefined;
+        const n = (i) => parseInt(h.slice(i, i + 2), 16) / 255;
+        return { r: n(0), g: n(2), b: n(4), a: h.length === 8 ? n(6) : 1 };
+    }
+    const rgb = RGB_RE.exec(s);
+    if (rgb !== null) {
+        return {
+            r: clamp01(parseFloat(rgb[1]) / 255),
+            g: clamp01(parseFloat(rgb[2]) / 255),
+            b: clamp01(parseFloat(rgb[3]) / 255),
+            a: parseAlpha(rgb[4]),
+        };
+    }
+    const ok = OKLCH_RE.exec(s);
+    if (ok !== null) {
+        const l = ok[1].endsWith("%") ? parseFloat(ok[1]) / 100 : parseFloat(ok[1]);
+        const c = ok[2].endsWith("%") ? (parseFloat(ok[2]) / 100) * 0.4 : parseFloat(ok[2]);
+        const raw = oklchToRgbUnclamped({ l, c, h: parseFloat(ok[3]) });
+        return { r: clamp01(raw.r), g: clamp01(raw.g), b: clamp01(raw.b), a: parseAlpha(ok[4]) };
+    }
+    return undefined;
+}
+const VAR_RE = /^var\(\s*--([a-z0-9-]+)\s*\)$/i;
+const MIX_RE = /^color-mix\(\s*in\s+srgb\s*,\s*(.+?)\s+([\d.]+)%\s*,\s*(.+?)\s*\)$/i;
+const MAX_TOKEN_DEPTH = 6;
+export function resolveTokenColor(args) {
+    const { css, tokens } = args;
+    const depth = args.depth ?? 0;
+    if (css === undefined || depth > MAX_TOKEN_DEPTH)
+        return undefined;
+    const s = css.trim();
+    const ref = VAR_RE.exec(s);
+    if (ref !== null)
+        return resolveTokenColor({ css: tokens[ref[1]], tokens, depth: depth + 1 });
+    const mix = MIX_RE.exec(s);
+    if (mix !== null) {
+        const first = resolveTokenColor({ css: mix[1], tokens, depth: depth + 1 });
+        const second = resolveTokenColor({ css: mix[3], tokens, depth: depth + 1 });
+        if (first === undefined || second === undefined)
+            return undefined;
+        const p = clamp01(parseFloat(mix[2]) / 100);
+        const wFirst = p * first.a;
+        const wSecond = (1 - p) * second.a;
+        const a = wFirst + wSecond;
+        if (a === 0)
+            return { r: 0, g: 0, b: 0, a: 0 };
+        return {
+            r: (first.r * wFirst + second.r * wSecond) / a,
+            g: (first.g * wFirst + second.g * wSecond) / a,
+            b: (first.b * wFirst + second.b * wSecond) / a,
+            a,
+        };
+    }
+    return parseCssColor(s);
+}
+export function composite(fg, bg) {
+    const a = fg.a;
+    return { r: fg.r * a + bg.r * (1 - a), g: fg.g * a + bg.g * (1 - a), b: fg.b * a + bg.b * (1 - a), a: 1 };
+}
+function relativeLuminance(rgb) {
+    return 0.2126 * srgbToLinear(clamp01(rgb.r)) + 0.7152 * srgbToLinear(clamp01(rgb.g)) + 0.0722 * srgbToLinear(clamp01(rgb.b));
+}
+export function contrastRatio(fgCss, bgCss) {
+    const fgRaw = parseCssColor(fgCss);
+    const bgRaw = parseCssColor(bgCss);
+    if (fgRaw === undefined || bgRaw === undefined)
+        return undefined;
+    const bg = bgRaw.a >= 1 ? bgRaw : composite(bgRaw, { r: bgRaw.r > 0.5 ? 0 : 1, g: bgRaw.r > 0.5 ? 0 : 1, b: bgRaw.r > 0.5 ? 0 : 1, a: 1 });
+    return contrastOf({ fg: fgRaw, bg });
+}
+export function contrastOf(args) {
+    const fg = composite(args.fg, args.bg);
+    const l1 = relativeLuminance(fg);
+    const l2 = relativeLuminance(args.bg);
+    const [hi, lo] = l1 >= l2 ? [l1, l2] : [l2, l1];
+    return (hi + 0.05) / (lo + 0.05);
+}
+export function round(x, places) {
+    const f = Math.pow(10, places);
+    return Math.round(x * f) / f;
+}
+export function bestOnColor(fillCss) {
+    const black = "oklch(0.145 0 0)";
+    const white = "oklch(0.995 0 0)";
+    const cb = contrastRatio(black, fillCss) ?? 0;
+    const cw = contrastRatio(white, fillCss) ?? 0;
+    return cb >= cw ? black : white;
+}
+export function rgbCss(c) {
+    const ch = (n) => Math.round(clamp01(n) * 255);
+    return `rgb(${ch(c.r)}, ${ch(c.g)}, ${ch(c.b)})`;
+}
+//# sourceMappingURL=color-math.js.map

package/themes/color-math.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-math.js","sourceRoot":"","sources":["../../jsr/themes/color-math.ts"],"names":[],"mappings":"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"}

package/themes/colors/house.yaml

@@ -0,0 +1,57 @@
+name: House
+colors:
+  background: "#f0e9ff"
+  surface: "#ffffff"
+  primary: "#c9a8ff"
+  secondary: "#ffb3d1"
+  accent: "#a8f0d0"
+  text-primary: "#3a2e5c"
+  text-secondary: "#6a5891"
+  text-disabled: "#a495c9"
+  border: "#c9a8ff"
+  success: "#a8f0d0"
+  warning: "#ffe58a"
+  error: "#ffb38a"
+  neutral: "#e9e0ff"
+colorsDark:
+  background: "oklch(0.22 0.03 290)"
+  surface: "oklch(0.27 0.035 290)"
+  primary: "#c9a8ff"
+  secondary: "#ffb3d1"
+  accent: "#a8f0d0"
+  text-primary: "#efe9ff"
+  text-secondary: "oklch(0.78 0.04 292)"
+  text-disabled: "oklch(0.52 0.03 292)"
+  border: "oklch(0.40 0.05 292)"
+  success: "#a8f0d0"
+  warning: "#ffe58a"
+  error: "#ffb38a"
+  neutral: "oklch(0.31 0.035 290)"
+extras:
+  on-primary: "#3a2e5c"
+  on-secondary: "#3a2e5c"
+  on-success: "#3a2e5c"
+  info: "#9ec8ff"
+  on-info: "#3a2e5c"
+  primary-light: "rgba(201, 168, 255, 0.22)"
+extrasDark:
+  on-primary: "#3a2e5c"
+  on-secondary: "#3a2e5c"
+  on-success: "#3a2e5c"
+  info: "#9ec8ff"
+  on-info: "#3a2e5c"
+  primary-light: "rgba(201, 168, 255, 0.24)"
+structural:
+  font-family: "'Nunito Variable', 'Nunito', 'SF Pro Rounded', 'Helvetica Neue', system-ui, sans-serif"
+  font-family-mono: "ui-monospace, 'JetBrains Mono', Menlo, monospace"
+  radius: "20px"
+  radius-sm: "12px"
+  radius-lg: "32px"
+  spacing: "1rem"
+  shadow: "inset 0 -6px 0 rgba(0,0,0,0.15), inset 0 4px 0 rgba(255,255,255,0.35), 0 8px 16px rgba(58,46,92,0.2)"
+  shadow-sm: "inset 0 -3px 0 rgba(0,0,0,0.12), inset 0 2px 0 rgba(255,255,255,0.3), 0 4px 10px rgba(58,46,92,0.16)"
+  shadow-lg: "inset 0 -8px 0 rgba(0,0,0,0.16), inset 0 6px 0 rgba(255,255,255,0.4), 0 16px 32px rgba(58,46,92,0.24)"
+  letter-spacing: "0"
+  letter-spacing-wide: "0.02em"
+  font-weight: "700"
+  text-transform: "none"

package/themes/colors/mesh.yaml

@@ -17,7 +17,6 @@ extras:
   void: "oklch(0.07 0.000 0)"
   fg-dim: "oklch(0.30 0.000 0)"
   hover: "oklch(0.13 0.000 0)"
-  ring: "oklch(0.36 0.000 0)"
   raised: "rgba(255, 255, 255, 0.55)"
   accent-text: "#fafafa"
 extrasDark:

package/themes/colors/orbit.yaml

@@ -16,7 +16,6 @@ colorsDark:
 extras:
   bg-gradient-from: "oklch(0.56 0.29 302)"
   bg-gradient-to: "oklch(0.44 0.22 304)"
-  card: "oklch(0.18 0.000 0 / 0.8)"
   card-solid: "oklch(0.28 0.03 257)"
   fg-dim: "oklch(0.55 0.03 264)"
   accent-green: "oklch(0.79 0.21 152)"

package/themes/colors/rift.yaml

@@ -7,7 +7,6 @@ colors:
   border: "rgba(255, 255, 255, 0.18)"
   accent: "oklch(0.88 0.27 128)"
 extras:
-  card: "oklch(0.13 0.000 0)"
   card-inner: "oklch(0.21 0.02 255)"
   border-frame: "oklch(0.44 0.02 255)"
   fg-dim: "oklch(0.55 0.02 260)"