better-design 0.8.2 → 0.8.3

package/dist/index.js

@@ -873,8 +873,8 @@ On any "build/make me <app>" request, settle the brand FIRST, then build with it
 ## Building / modifying UI
 1. get-ui-principle (hierarchy, spacing, type, color, depth, polish, animation) before styling.
 2. get-ux-principle (forms, nav, errors, dialogs, onboarding, microcopy) before behavior.
-3. Use the project's own tokens/components. Semantic HTML, aria, keyboard nav, WCAG AA.
-4. get-review-rules after; fix every critical/serious issue before presenting.
+3. Use the project's own tokens/components. Semantic HTML, aria, keyboard nav, WCAG AA. Terse copy.
+4. get-review-rules after (incl. copy/AI-tell rules); fix every critical/serious issue before presenting.
 
 ## Only if the user explicitly names an existing catalog DS
 Default is create-design-system (above). Just to install a named catalog system: find-design-system(query) -> get-design-system-docs({ designSystemId }) -> run BOTH bash lines (installs globals.css + components into components/ui/; use only their tokens). Icons: detect-icon-library / find-icon-library -> find-icons -> install-icons. Never runtime @iconify/react.
@@ -941,7 +941,7 @@ function createTracking(server, onToolUsage) {
 function trackSearch(track, tool, capture, start, response, isError = false, errorMessage) {
   track(
     tool,
-    { query: capture.query, topic: capture.topic, topResults: capture.topResults },
+    { query: capture.query, topic: capture.topic, topResults: capture.topResults, context: capture.context },
     {
       durationMs: Date.now() - start,
       errorMessage,
@@ -990,7 +990,11 @@ var init_shared = __esm({
 - **You can write files into a project and run a terminal** (Claude Code, Cursor, Windsurf, an IDE agent, Claude Desktop with filesystem/shell tools, any checked-out repo): use \`get-design-system-docs\`, run the shadcn install, and build **real React components**. This is the default for any actual project.
 - **You are in a pure inline chat canvas with NO file writes and NO terminal** (ChatGPT canvas, a Claude.ai chat artifact): use \`get-design-system-html\` and build with the framework-free HTML/CSS kit.
 
-Emitting a single standalone \`.html\` file as "the app" when you could run the React install is a bug: it can't \`import @/components/ui/*\`, drifts from the registry, and discards the real components.`;
+Emitting a single standalone \`.html\` file as "the app" when you could run the React install is a bug: it can't \`import @/components/ui/*\`, drifts from the registry, and discards the real components.
+
+Whichever target, keep the output tight: build the screens the user actually asked for (one, unless they asked for more) from the system's own components/tokens, don't pad them with bespoke decorative CSS, and keep your prose to a line or two, no multi-paragraph write-ups or trailing follow-up questions.
+
+The UI copy inside the screen follows the same restraint: short headlines (about 6 words), supporting lines about 15 words and at most one per section, no filler adjectives, no exclamation marks, no emoji as icons, and none of the template shapes (gradient hero with an uppercase eyebrow pill, centered three-card feature grid, left-border callout boxes) unless the user asks. After writing the UI, call \`get-review-rules\` and fix every critical/serious issue BEFORE presenting it.`;
     CODING_HOST_RE = /claude[- ]?code|cursor|windsurf|cline|continue|codeium|codex|zed|vs[- ]?code|vscode|jetbrains|intellij|webstorm|pycharm|goland|rider|neovim|nvim/i;
     PREVIEW_OUTPUT_SCHEMA = z.object({
       status: z.string().describe("completed | error | pending | generating | selected"),
@@ -999,6 +1003,8 @@ Emitting a single standalone \`.html\` file as "the app" when you could run the
       previewUrl: z.string().optional().describe("Public, cookieless showcase URL to embed in an iframe (sandboxed hosts can't carry the user's session). Falls back to viewUrl."),
       shotUrl: z.string().optional().describe("Real screenshot of the showcase page, for hosts that can't iframe it."),
       installCommand: z.string().optional().describe("shadcn install command, when complete."),
+      installLibrary: z.enum(["base-ui", "radix", "mixed"]).optional().describe("Actual component library flavor installed by installCommand."),
+      installNote: z.string().optional().describe("Important install flavor or fallback note for clients that read only structuredContent."),
       step: z.string().optional().describe("Current generation step, while generating."),
       tokensCss: z.string().describe("CSS custom-property stylesheet for the system's tokens.")
     });
@@ -1171,20 +1177,21 @@ Use maxTokens to keep responses focused (recommended: 5000\u201310000).`,
       inputSchema: z2.object({
         topic: z2.string().trim().min(1).max(120).optional().describe("Specific UI topic or alias to load, e.g. spacing, hierarchy, color, depth, animation."),
         query: z2.string().trim().min(1).max(500).optional().describe("Natural language search query to find relevant principles."),
-        maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000-10000.")
+        maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000-10000."),
+        context: CONTEXT_ARG
       }),
       annotations: { readOnlyHint: true }
     },
-    async ({ topic, query, maxTokens }) => {
+    async ({ topic, query, maxTokens, context }) => {
       const start = Date.now();
       try {
         const { response, capture } = await runPrincipleTool(provider, "ui", "UI", "get-ui-principle", { topic, query, maxTokens });
-        return trackSearch(track, "get-ui-principle", capture, start, response);
+        return trackSearch(track, "get-ui-principle", { ...capture, context }, start, response);
       } catch (error) {
         return trackSearch(
           track,
           "get-ui-principle",
-          { query, topic, topResults: [] },
+          { query, topic, topResults: [], context },
           start,
           { content: [{ type: "text", text: `Error: ${error instanceof Error ? error.message : "Unknown error"}` }] },
           true,
@@ -1211,20 +1218,21 @@ Use maxTokens to keep responses focused (recommended: 5000\u201310000).`,
       inputSchema: z2.object({
         topic: z2.string().trim().min(1).max(120).optional().describe("Specific UX topic or alias to load, e.g. forms, navigation, notifications, errors, search, onboarding, microcopy, cognitive-laws, psychology."),
         query: z2.string().trim().min(1).max(500).optional().describe("Natural language search query to find relevant UX principles."),
-        maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000-10000.")
+        maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000-10000."),
+        context: CONTEXT_ARG
       }),
       annotations: { readOnlyHint: true }
     },
-    async ({ topic, query, maxTokens }) => {
+    async ({ topic, query, maxTokens, context }) => {
       const start = Date.now();
       try {
         const { response, capture } = await runPrincipleTool(provider, "ux", "UX", "get-ux-principle", { topic, query, maxTokens });
-        return trackSearch(track, "get-ux-principle", capture, start, response);
+        return trackSearch(track, "get-ux-principle", { ...capture, context }, start, response);
       } catch (error) {
         return trackSearch(
           track,
           "get-ux-principle",
-          { query, topic, topResults: [] },
+          { query, topic, topResults: [], context },
           start,
           { content: [{ type: "text", text: `Error: ${error instanceof Error ? error.message : "Unknown error"}` }] },
           true,
@@ -1237,9 +1245,9 @@ Use maxTokens to keep responses focused (recommended: 5000\u201310000).`,
     "get-review-rules",
     {
       title: "Get Code Review Rules",
-      description: `Retrieves accessibility (WCAG 2.1) and visual design review rules for analyzing code.
+      description: `Retrieves accessibility (WCAG 2.1), visual design, and content review rules for analyzing code.
 
-You MUST call this after writing UI code to self-review your output.
+You MUST call this after writing UI code to self-review your output, then fix every critical and serious issue BEFORE presenting the result.
 
 **Accessibility (WCAG 2.1):**
 - Critical: Images without alt text, icon buttons without aria-labels, form inputs without labels
@@ -1250,14 +1258,20 @@ You MUST call this after writing UI code to self-review your output.
 - Typography: Mixed fonts, line-height issues, missing fallbacks
 - Color & Contrast: Contrast below 4.5:1, missing hover/focus states
 
+**Content (generated-UI tells):**
+- Walls of text, overwritten copy, filler adjectives, emoji used as icons
+- Microcopy details: pluralization, improvised unit glyphs, empty states without a next action
+- Template layouts: gradient hero + eyebrow pill, left-border callout boxes
+
 Use maxTokens to keep responses focused (recommended: 5000\u201310000).`,
       inputSchema: z2.object({
-        category: z2.enum(["accessibility", "visual-design", "all"]).optional().describe("Filter rules by category (defaults to 'all')"),
-        maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000\u201310000.")
+        category: z2.enum(["accessibility", "visual-design", "content", "all"]).optional().describe("Filter rules by category (defaults to 'all')"),
+        maxTokens: z2.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates content to fit. Recommended: 5000\u201310000."),
+        context: CONTEXT_ARG
       }),
       annotations: { readOnlyHint: true }
     },
-    async ({ category = "all", maxTokens }) => {
+    async ({ category = "all", maxTokens, context }) => {
       const start = Date.now();
       try {
         const rules = await provider.getReviewRules(category);
@@ -1266,7 +1280,7 @@ Use maxTokens to keep responses focused (recommended: 5000\u201310000).`,
           return trackSearch(
             track,
             "get-review-rules",
-            { query: category, topic: category, topResults },
+            { query: category, topic: category, topResults, context },
             start,
             { content: [{ type: "text", text: "No review rules found." }] }
           );
@@ -1293,7 +1307,7 @@ Start at 100. Minimum score is 0.
         return trackSearch(
           track,
           "get-review-rules",
-          { query: category, topic: category, topResults },
+          { query: category, topic: category, topResults, context },
           start,
           { content: [{ type: "text", text }] }
         );
@@ -1301,7 +1315,7 @@ Start at 100. Minimum score is 0.
         return trackSearch(
           track,
           "get-review-rules",
-          { query: category, topic: category, topResults: [] },
+          { query: category, topic: category, topResults: [], context },
           start,
           { content: [{ type: "text", text: `Error: ${error instanceof Error ? error.message : "Unknown error"}` }] },
           true,
@@ -1899,6 +1913,15 @@ Map each UI need to the installed component BEFORE writing markup:
 
 Read a component's source from \`components/ui/\` to learn its props/exports. Use only
 the design tokens in \`app/globals.css\`; never invent colors, spacing, or radii.
+
+**Copy and layout restraint.** The words inside the UI are part of the design system
+too. Write the fewest words that carry the meaning: headlines about 6 words, one short
+supporting line per section, no filler adjectives (seamless, effortless, powerful), no
+exclamation marks, never emoji as icons or status indicators (use the DS's icon library
+or \`badge\` variants). Skip the generated-template shapes unless explicitly requested:
+gradient hero with an uppercase eyebrow pill, centered three-card feature grid,
+left-border callout boxes, walls of text. After writing UI, self-review with
+\`get-review-rules\` and fix every critical/serious issue before presenting.
 `;
     DS_ESLINT_CONFIG = `// Better Design \u2014 design-system guardrail (flat ESLint config fragment).
 // Flags raw HTML primitives in feature code when the installed DS ships an
@@ -1968,6 +1991,55 @@ After wiring, \`npm run lint\` flags raw primitives in feature code (warnings; b
 function fence(lang, body) {
   return "```" + lang + "\n" + body + "\n```";
 }
+function parseDecls(body) {
+  const out = /* @__PURE__ */ new Map();
+  for (const decl of body.split(";")) {
+    const i = decl.indexOf(":");
+    if (i === -1) continue;
+    const prop = decl.slice(0, i).trim();
+    const val = decl.slice(i + 1).trim();
+    if (!prop || !val) continue;
+    if (prop.startsWith("--") && val.replace(/\s+/g, "") === `var(${prop})`) continue;
+    out.set(prop, val);
+  }
+  return out;
+}
+function hoistAtRules(css) {
+  const atRules = [];
+  const grab = (m) => {
+    atRules.push(m.trim());
+    return "";
+  };
+  const body = css.replace(/@charset\s+(['"]).*?\1\s*;/g, grab).replace(/@import\s+url\(\s*(['"]).*?\1\s*\)[^;]*;/g, grab).replace(/@import\s+(['"]).*?\1[^;]*;/g, grab);
+  return { atRules, body };
+}
+function compactTokensCss(css) {
+  const noComments = css.replace(/\/\*[\s\S]*?\*\//g, "");
+  const { atRules, body } = hoistAtRules(noComments);
+  const header = atRules.length ? atRules.join("\n") + "\n\n" : "";
+  const merged = /* @__PURE__ */ new Map();
+  for (const m of body.matchAll(/:root\s*\{([^}]*)\}/g)) {
+    for (const [prop, val] of parseDecls(m[1])) merged.set(prop, val);
+  }
+  if (merged.size === 0) return (header + body.trim()).trim() || css.trim();
+  const rootBody = [...merged].map(([p, v]) => `  ${p}: ${v};`).join("\n");
+  let darkOut = "";
+  const darkMatch = body.match(/\.dark\s*\{([^}]*)\}/);
+  if (darkMatch) {
+    const diff = [...parseDecls(darkMatch[1])].filter(([p, v]) => merged.get(p) !== v);
+    if (diff.length) {
+      const darkBody = diff.map(([p, v]) => `  ${p}: ${v};`).join("\n");
+      darkOut = `
+.dark {
+${darkBody}
+}`;
+    }
+  }
+  const rest = body.replace(/:root\s*\{[^}]*\}/g, "").replace(/\.dark\s*\{[^}]*\}/g, "").replace(/\n{2,}/g, "\n").trim();
+  return `${header}:root {
+${rootBody}
+}${darkOut}${rest ? "\n\n" + rest : ""}`;
+}
 function buildDsHtmlKit({ name, tokensCss, viewUrl, componentKit }) {
   const materialCss = componentKit?.css?.trim();
   return [
@@ -1978,7 +2050,7 @@ function buildDsHtmlKit({ name, tokensCss, viewUrl, componentKit }) {
     "## 1. Design tokens (paste first)",
     "These are the system's actual oklch tokens, fonts, radius and shadow scale.",
     "",
-    fence("css", tokensCss.trim()),
+    fence("css", compactTokensCss(tokensCss)),
     "",
     "## 2. Component CSS (paste second)",
     "Token-driven, vanilla CSS. No Tailwind, no build step.",
@@ -1997,10 +2069,20 @@ function buildDsHtmlKit({ name, tokensCss, viewUrl, componentKit }) {
     fence("html", DS_KIT_EXAMPLE_HTML),
     "",
     "## How to use",
-    "- Put all CSS blocks in a single `<style>` tag (tokens first, real material last).",
+    "- Paste every CSS block above VERBATIM into a single `<style>` tag (tokens first, real material last). Copy the blocks exactly, never retype or summarize them from memory: retyped CSS silently drops this system's material.",
     '- Wrap your app in `<div class="ds">` so the base type/color apply.',
-    "- Components: `ds-btn` (`ds-btn-primary|secondary|outline|ghost`, `ds-btn-sm|lg`), `ds-input` / `ds-textarea` / `ds-select` + `ds-label`, `ds-card` (`ds-card-header|body|footer`, `ds-card-title|desc`), `ds-badge` (`ds-badge-primary|outline`), `ds-alert`, `ds-avatar`, `ds-divider`, layout helpers `ds-row` / `ds-field` / `ds-container`.",
+    "- Components: `ds-btn` (`ds-btn-primary|secondary|outline|ghost`, `ds-btn-sm|lg`), `ds-input` / `ds-textarea` / `ds-select` + `ds-label`, `ds-card` (`ds-card-header|body|footer`, `ds-card-title|desc`), `ds-badge` (`ds-badge-primary|outline|safe|warn|danger|unknown|verified`), `ds-alert`, `ds-avatar`, `ds-divider`, layout helpers `ds-row` / `ds-field` / `ds-container`.",
+    '- Status colors: the `ds-badge-safe|warn|danger|unknown|verified` classes are colour modifiers, so add them ALONGSIDE the base `ds-badge`, for example `<span class="ds-badge ds-badge-safe">Sesame-free</span>`. They map to the system\'s own status tokens. Reach for these instead of hand-writing a colored badge from a raw token.',
+    "- Filters, toggles and any tappable pill use `ds-chip` (or `ds-btn`) rendered as a real `<button>`, never a `ds-badge` span. Badges are read-only status labels.",
+    '- Make the mock WORK, not just render: wire a few lines of vanilla JS so every control has a VISIBLE EFFECT. Filter chips toggle `aria-pressed` (the kit styles `ds-chip[aria-pressed="true"]` as selected) AND actually filter: tag each list item with `data-tags="..."` and hide items that do not match the pressed chips. Search inputs filter the list on `input`. A control that changes nothing reads as broken.',
+    "- Custom classes are for LAYOUT only (position, spacing, grid). Never restyle a `ds-*` component's geometry or surface (border-radius, borders, shadows, fills) \u2014 those carry this system's identity. If a component looks wrong, use a different `ds-*` component, do not reshape it.",
+    "- Cards in a grid must stay aligned: the kit pins `ds-card-footer` to the card bottom so rows of cards keep equal footer lines even when a badge row wraps \u2014 do not override that. Keep wrap-prone rows (badges, chips) in the same slot on every card so nothing reads as misaligned.",
     "- Build any layout you want with these tokens, do not invent new colors. For the full React component set in a real project, use `get-design-system-docs` instead.",
+    "",
+    "## Keep it tight",
+    "Build the screens the user actually asked for (one, unless they asked for more) and compose the `ds-*` components above. Do not hand-roll a pile of bespoke decorative CSS (illustrative art, faux maps, gradients, glassmorphism panels, radial-glow backgrounds): reach for the `ds-*` classes and these tokens first. Skip a long write-up: ship the artifact with a one-line note, no multi-paragraph explanation or trailing follow-up questions.",
+    "",
+    HTML_KIT_CONDUCT_MD,
     ...componentKit?.excluded?.length ? [
       "",
       "## Not in this kit (use the real components)",
@@ -2010,13 +2092,13 @@ function buildDsHtmlKit({ name, tokensCss, viewUrl, componentKit }) {
 Full live showcase: ${viewUrl}` : ""
   ].join("\n");
 }
-var DS_KIT_CSS, DS_KIT_EXAMPLE_HTML;
+var DS_KIT_CSS, DS_KIT_EXAMPLE_HTML, HTML_KIT_CONDUCT_MD;
 var init_html_kit = __esm({
   "../shared/src/mcp/html-kit.ts"() {
     "use strict";
     DS_KIT_CSS = `*,*::before,*::after{box-sizing:border-box}
 :where(.ds){font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif);color:var(--foreground,oklch(0.2 0 0));background:var(--background,oklch(1 0 0));line-height:1.5}
-.ds h1,.ds h2,.ds h3,.ds h4{font-family:var(--font-serif,var(--font-sans,ui-sans-serif));font-weight:600;margin:0 0 .5em;color:var(--foreground,oklch(0.2 0 0))}
+.ds h1,.ds h2,.ds h3,.ds h4{font-family:inherit;font-weight:600;margin:0 0 .5em;color:var(--foreground,oklch(0.2 0 0))}
 .ds a{color:var(--primary,oklch(0.45 0.15 264));text-decoration:none}
 .ds a:hover{text-decoration:underline}
 .ds p{margin:0 0 1em}
@@ -2037,16 +2119,17 @@ var init_html_kit = __esm({
 
 /* Form fields */
 .ds-label{display:block;font-size:.8125rem;font-weight:500;margin-bottom:.4rem;color:var(--foreground,oklch(0.2 0 0))}
-.ds-input,.ds-textarea,.ds-select{width:100%;font:inherit;font-size:.875rem;padding:.55rem .75rem;border-radius:var(--radius-md,calc(var(--radius,0.5rem) - 2px));border:1px solid var(--input,var(--border,oklch(0.85 0 0)));background:var(--background,oklch(1 0 0));color:var(--foreground,oklch(0.2 0 0));box-shadow:var(--shadow-2xs,none)}
+.ds-input,.ds-textarea,.ds-select{width:100%;font:inherit;font-size:.875rem;padding:.55rem .75rem;border-radius:var(--radius-lg,var(--radius,0.5rem));border:1px solid var(--border,oklch(0.85 0 0));background:var(--input,var(--background,oklch(1 0 0)));color:var(--foreground,oklch(0.2 0 0));box-shadow:var(--shadow-inset,var(--shadow-2xs,none));transition:border-color .15s,box-shadow .15s}
 .ds-input::placeholder,.ds-textarea::placeholder{color:var(--muted-foreground,oklch(0.6 0 0))}
-.ds-input:focus,.ds-textarea:focus,.ds-select:focus{outline:2px solid var(--ring,var(--primary,oklch(0.45 0.15 264)));outline-offset:1px;border-color:transparent}
+.ds-input:hover,.ds-textarea:hover,.ds-select:hover{border-color:color-mix(in oklab,var(--foreground,oklch(0.2 0 0)) 20%,transparent)}
+.ds-input:focus,.ds-textarea:focus,.ds-select:focus{outline:none;border-color:var(--ring,var(--primary,oklch(0.45 0.15 264)));box-shadow:var(--shadow-inset,0 0 0 0 transparent),0 0 0 2px color-mix(in oklab,var(--ring,var(--primary,oklch(0.45 0.15 264))) 35%,transparent)}
 .ds-textarea{min-height:5rem;resize:vertical}
 
 /* Card */
-.ds-card{background:var(--card,var(--background,oklch(1 0 0)));color:var(--card-foreground,var(--foreground,oklch(0.2 0 0)));border:1px solid var(--border,oklch(0.9 0 0));border-radius:var(--radius-xl,calc(var(--radius,0.5rem) + 4px));box-shadow:var(--shadow-glass,var(--shadow-md,var(--shadow-sm,none)));overflow:hidden}
+.ds-card{display:flex;flex-direction:column;background:var(--card,var(--background,oklch(1 0 0)));color:var(--card-foreground,var(--foreground,oklch(0.2 0 0)));border:1px solid var(--border,oklch(0.9 0 0));border-radius:var(--radius-xl,calc(var(--radius,0.5rem) + 4px));box-shadow:var(--shadow-glass,var(--shadow-md,var(--shadow-sm,none)));overflow:hidden}
 .ds-card-header{padding:1.1rem 1.25rem .5rem}
 .ds-card-body{padding:.5rem 1.25rem 1.1rem}
-.ds-card-footer{padding:.9rem 1.25rem;border-top:1px solid var(--border,oklch(0.92 0 0));display:flex;gap:.5rem;align-items:center}
+.ds-card-footer{margin-top:auto;padding:.9rem 1.25rem;border-top:1px solid var(--border,oklch(0.92 0 0));display:flex;gap:.5rem;align-items:center}
 .ds-card-title{font-size:1.05rem;margin:0 0 .25rem}
 .ds-card-desc{font-size:.875rem;color:var(--muted-foreground,oklch(0.55 0 0));margin:0}
 
@@ -2054,6 +2137,11 @@ var init_html_kit = __esm({
 .ds-badge{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;background:var(--secondary,oklch(0.96 0 0));color:var(--secondary-foreground,oklch(0.25 0 0));line-height:1.4}
 .ds-badge-primary{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0))}
 .ds-badge-outline{background:transparent;border:1px solid var(--border,oklch(0.85 0 0));color:var(--foreground,oklch(0.2 0 0))}
+.ds-badge-safe{background:var(--pop-green,oklch(0.92 0.06 150));color:var(--pop-green-foreground,oklch(0.42 0.11 152))}
+.ds-badge-warn{background:var(--pop-orange,oklch(0.93 0.05 40));color:var(--pop-orange-foreground,oklch(0.52 0.18 35))}
+.ds-badge-danger{background:var(--destructive,oklch(0.58 0.22 32));color:var(--destructive-foreground,oklch(0.99 0 0))}
+.ds-badge-unknown{background:var(--pop-yellow,oklch(0.95 0.06 92));color:var(--pop-yellow-foreground,oklch(0.5 0.1 75))}
+.ds-badge-verified{background:var(--pop-blue,oklch(0.92 0.045 245));color:var(--pop-blue-foreground,oklch(0.48 0.14 252))}
 
 /* Alert */
 .ds-alert{border:1px solid var(--border,oklch(0.9 0 0));border-radius:var(--radius-lg,var(--radius,0.5rem));padding:.9rem 1rem;background:var(--card,var(--background,oklch(1 0 0)));color:var(--card-foreground,var(--foreground,oklch(0.2 0 0)));font-size:.875rem}
@@ -2088,7 +2176,10 @@ var init_html_kit = __esm({
 .ds-table th{font-weight:600;color:var(--muted-foreground,oklch(0.5 0 0));font-size:.6875rem;text-transform:uppercase;letter-spacing:.04em}
 
 /* Chip / keyboard key */
-.ds-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.8125rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--border,oklch(0.88 0 0));background:var(--background,oklch(1 0 0));color:var(--foreground,oklch(0.2 0 0))}
+.ds-chip{display:inline-flex;align-items:center;gap:.35rem;font:inherit;font-size:.8125rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--border,oklch(0.88 0 0));background:var(--background,oklch(1 0 0));color:var(--foreground,oklch(0.2 0 0));cursor:pointer;transition:background .15s,border-color .15s}
+.ds-chip:hover{background:var(--accent,oklch(0.96 0 0))}
+.ds-chip:focus-visible{outline:2px solid var(--ring,var(--primary,oklch(0.45 0.15 264)));outline-offset:2px}
+.ds-chip[aria-pressed="true"]{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0));border-color:var(--primary,oklch(0.45 0.15 264))}
 .ds-kbd{font-family:var(--font-mono,ui-monospace,monospace);font-size:.75rem;padding:.1rem .4rem;border-radius:var(--radius-sm,4px);border:1px solid var(--border,oklch(0.85 0 0));background:var(--muted,oklch(0.97 0 0));color:var(--foreground,oklch(0.2 0 0))}
 
 /* Selection adopts the accent, matching the real systems */
@@ -2121,6 +2212,20 @@ var init_html_kit = __esm({
     </div>
   </div>
 </div>`;
+    HTML_KIT_CONDUCT_MD = [
+      "## Write the UI copy like a designer",
+      "The words inside the screen are part of the design, and overwriting them is the fastest generated-content tell:",
+      "- Headlines: about 6 words max. Supporting line: about 15 words, at most one per section.",
+      "- No filler adjectives (seamless, effortless, powerful), no exclamation marks.",
+      "- Never use emoji as icons or status indicators. Use the badge/status classes this system ships or an inline SVG.",
+      '- Sweat the small strings: pluralize counts (1 bet, 2 bets), no redundant self-labels ("You (you)"), spell out abbreviations, units and currency as real words or an inline icon ("1,000 coins", never an improvised glyph like "\xA7"), and empty states name the next action.',
+      "- Skip the template-landing-page shapes unless the user asks for them: gradient hero with an uppercase eyebrow pill, centered three-card feature grid, left-border callout boxes.",
+      "- Status surfaces (warnings, banners) use the system's semantic status tokens; if it ships none, use a bordered card on the default surface, never a chart/data-viz tint. Selected rows get a clearly contrasting treatment (primary fill or a visible edge), not the hover token's faint tint.",
+      "",
+      "## Before you show it (mandatory)",
+      '1. Self-check the artifact: every input has a visible `<label>`; selected/active states use the role-appropriate native or ARIA state (`aria-pressed` for toggle buttons, `aria-selected` for tabs/options, native `checked` for checkboxes, `aria-current` for current links) plus a visible non-color cue; interactive tiles look pressable (border, hover, pressed state); focus stays visible (never remove an outline without a replacement); toasts and status text use `role="status"`; every color comes from the system\'s tokens; radii come from the `--radius` scale.',
+      "2. Call `get-review-rules` (category `all`) and fix every critical and serious issue it reports BEFORE presenting the artifact to the user."
+    ].join("\n");
   }
 });
 
@@ -2133,6 +2238,1325 @@ var init_preview_widget_sdk_generated = __esm({
   }
 });
 
+// ../shared/src/mcp/tw-extracted.generated.ts
+var TW_STATIC_EXTRACTED, TW_VARIANTS_EXTRACTED;
+var init_tw_extracted_generated = __esm({
+  "../shared/src/mcp/tw-extracted.generated.ts"() {
+    "use strict";
+    TW_STATIC_EXTRACTED = {
+      "ring-0": "--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)",
+      "ring-1": "--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)",
+      "ring-2": "--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)",
+      "ring-4": "--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)",
+      "ring-8": "--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)",
+      "ring-offset-0": "--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
+      "ring-offset-1": "--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
+      "ring-offset-2": "--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
+      "ring-offset-4": "--tw-ring-offset-width:4px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
+      "ring-inset": "--tw-ring-inset:inset",
+      "ring-offset-background": "--tw-ring-offset-color:var(--background)",
+      "opacity-0": "opacity:0",
+      "opacity-5": "opacity:0.05",
+      "opacity-10": "opacity:0.1",
+      "opacity-15": "opacity:0.15",
+      "opacity-20": "opacity:0.2",
+      "opacity-25": "opacity:0.25",
+      "opacity-30": "opacity:0.3",
+      "opacity-35": "opacity:0.35",
+      "opacity-40": "opacity:0.4",
+      "opacity-45": "opacity:0.45",
+      "opacity-50": "opacity:0.5",
+      "opacity-55": "opacity:0.55",
+      "opacity-60": "opacity:0.6",
+      "opacity-65": "opacity:0.65",
+      "opacity-70": "opacity:0.7",
+      "opacity-75": "opacity:0.75",
+      "opacity-80": "opacity:0.8",
+      "opacity-85": "opacity:0.85",
+      "opacity-90": "opacity:0.9",
+      "opacity-95": "opacity:0.95",
+      "opacity-100": "opacity:1",
+      "transform": "transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)",
+      "transform-gpu": "transform:translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)",
+      "transform-none": "transform:none",
+      "rotate-0": "rotate:0deg",
+      "rotate-45": "rotate:45deg",
+      "rotate-90": "rotate:90deg",
+      "rotate-180": "rotate:180deg",
+      "scale-0": "--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-50": "--tw-scale-x:50%;--tw-scale-y:50%;--tw-scale-z:50%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-75": "--tw-scale-x:75%;--tw-scale-y:75%;--tw-scale-z:75%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-90": "--tw-scale-x:90%;--tw-scale-y:90%;--tw-scale-z:90%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-95": "--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-100": "--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-105": "--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-110": "--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-125": "--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "scale-150": "--tw-scale-x:150%;--tw-scale-y:150%;--tw-scale-z:150%;scale:var(--tw-scale-x) var(--tw-scale-y)",
+      "transition-none": "transition-property:none",
+      "transition": "transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-all": "transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-colors": "transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-transform": "transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-opacity": "transition-property:opacity;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-shadow": "transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "delay-0": "transition-delay:0s",
+      "delay-75": "animation-delay:75ms;--tw-animation-delay:75ms",
+      "delay-100": "animation-delay:0.1s;--tw-animation-delay:0.1s",
+      "delay-150": "animation-delay:0.15s;--tw-animation-delay:0.15s",
+      "delay-200": "animation-delay:0.2s;--tw-animation-delay:0.2s",
+      "delay-300": "animation-delay:0.3s;--tw-animation-delay:0.3s",
+      "delay-500": "animation-delay:0.5s;--tw-animation-delay:0.5s",
+      "delay-700": "animation-delay:0.7s;--tw-animation-delay:0.7s",
+      "delay-1000": "animation-delay:1s;--tw-animation-delay:1s",
+      "duration-0": "transition-duration:0s",
+      "duration-75": "animation-duration:75ms;--tw-animation-duration:75ms",
+      "duration-100": "animation-duration:0.1s;--tw-animation-duration:0.1s",
+      "duration-150": "animation-duration:0.15s;--tw-animation-duration:0.15s",
+      "duration-200": "animation-duration:0.2s;--tw-animation-duration:0.2s",
+      "duration-300": "animation-duration:0.3s;--tw-animation-duration:0.3s",
+      "duration-500": "animation-duration:0.5s;--tw-animation-duration:0.5s",
+      "duration-700": "animation-duration:0.7s;--tw-animation-duration:0.7s",
+      "duration-1000": "animation-duration:1s;--tw-animation-duration:1s",
+      "ease-linear": "transition-timing-function:linear",
+      "ease-in": "transition-timing-function:cubic-bezier(0.4,0,1,1)",
+      "ease-out": "transition-timing-function:cubic-bezier(0,0,0.2,1)",
+      "ease-in-out": "transition-timing-function:cubic-bezier(0.4,0,0.2,1)",
+      "animate-none": "animation:none",
+      "animate-spin": "animation:spin 1s linear infinite",
+      "animate-ping": "animation:ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
+      "animate-pulse": "animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+      "animate-bounce": "animation:bounce 1s infinite",
+      "will-change-auto": "will-change:auto",
+      "will-change-scroll": "will-change:scroll-position",
+      "will-change-contents": "will-change:contents",
+      "will-change-transform": "will-change:transform",
+      "sr-only": "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0",
+      "not-sr-only": "position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip-path:none;white-space:normal",
+      "animate-in": "animation:enter var(--tw-animation-duration,var(--tw-duration,0.15s)) var(--tw-ease,ease) var(--tw-animation-delay,0s) var(--tw-animation-iteration-count,1) var(--tw-animation-direction,normal) var(--tw-animation-fill-mode,none)",
+      "animate-out": "animation:exit var(--tw-animation-duration,var(--tw-duration,0.15s)) var(--tw-ease,ease) var(--tw-animation-delay,0s) var(--tw-animation-iteration-count,1) var(--tw-animation-direction,normal) var(--tw-animation-fill-mode,none)",
+      "fade-in": "--tw-enter-opacity:0",
+      "fade-out": "--tw-exit-opacity:0",
+      "zoom-in": "--tw-enter-scale:0",
+      "zoom-out": "--tw-exit-scale:0",
+      "spin-in": "--tw-enter-rotate:30deg",
+      "spin-out": "--tw-exit-rotate:30deg",
+      "-spin-in": "--tw-enter-rotate:-30deg",
+      "-spin-out": "--tw-exit-rotate:-30deg",
+      "blur-in": "--tw-enter-blur:20px",
+      "blur-out": "--tw-exit-blur:20px",
+      "slide-in-from-top": "--tw-enter-translate-y:-100%",
+      "slide-in-from-bottom": "--tw-enter-translate-y:100%",
+      "slide-in-from-left": "--tw-enter-translate-x:-100%",
+      "slide-in-from-right": "--tw-enter-translate-x:100%",
+      "slide-out-to-top": "--tw-exit-translate-y:-100%",
+      "slide-out-to-bottom": "--tw-exit-translate-y:100%",
+      "slide-out-to-left": "--tw-exit-translate-x:-100%",
+      "slide-out-to-right": "--tw-exit-translate-x:100%",
+      "running": "animation-play-state:running",
+      "paused": "animation-play-state:paused",
+      "accordion-down": "animation:accordion-down var(--tw-animation-duration,var(--tw-duration,0.2s)) var(--tw-ease,ease-out) var(--tw-animation-delay,0s) var(--tw-animation-iteration-count,1) var(--tw-animation-direction,normal) var(--tw-animation-fill-mode,none)",
+      "accordion-up": "animation:accordion-up var(--tw-animation-duration,var(--tw-duration,0.2s)) var(--tw-ease,ease-out) var(--tw-animation-delay,0s) var(--tw-animation-iteration-count,1) var(--tw-animation-direction,normal) var(--tw-animation-fill-mode,none)",
+      "collapsible-down": "animation:collapsible-down var(--tw-animation-duration,var(--tw-duration,0.2s)) var(--tw-ease,ease-out) var(--tw-animation-delay,0s) var(--tw-animation-iteration-count,1) var(--tw-animation-direction,normal) var(--tw-animation-fill-mode,none)",
+      "collapsible-up": "animation:collapsible-up var(--tw-animation-duration,var(--tw-duration,0.2s)) var(--tw-ease,ease-out) var(--tw-animation-delay,0s) var(--tw-animation-iteration-count,1) var(--tw-animation-direction,normal) var(--tw-animation-fill-mode,none)",
+      "caret-blink": "animation:caret-blink 1.25s ease-out infinite",
+      "grid": "display:grid",
+      "inline-grid": "display:inline-grid",
+      "grid-cols-1": "grid-template-columns:repeat(1,minmax(0,1fr))",
+      "grid-cols-2": "grid-template-columns:repeat(2,minmax(0,1fr))",
+      "grid-cols-3": "grid-template-columns:repeat(3,minmax(0,1fr))",
+      "grid-cols-4": "grid-template-columns:repeat(4,minmax(0,1fr))",
+      "grid-cols-5": "grid-template-columns:repeat(5,minmax(0,1fr))",
+      "grid-cols-6": "grid-template-columns:repeat(6,minmax(0,1fr))",
+      "grid-cols-7": "grid-template-columns:repeat(7,minmax(0,1fr))",
+      "grid-cols-12": "grid-template-columns:repeat(12,minmax(0,1fr))",
+      "grid-rows-1": "grid-template-rows:repeat(1,minmax(0,1fr))",
+      "grid-rows-2": "grid-template-rows:repeat(2,minmax(0,1fr))",
+      "grid-rows-3": "grid-template-rows:repeat(3,minmax(0,1fr))",
+      "grid-rows-4": "grid-template-rows:repeat(4,minmax(0,1fr))",
+      "grid-rows-6": "grid-template-rows:repeat(6,minmax(0,1fr))",
+      "col-span-1": "grid-column:span 1/span 1",
+      "col-span-2": "grid-column:span 2/span 2",
+      "col-span-3": "grid-column:span 3/span 3",
+      "col-span-4": "grid-column:span 4/span 4",
+      "col-span-5": "grid-column:span 5/span 5",
+      "col-span-6": "grid-column:span 6/span 6",
+      "col-span-full": "grid-column:1/-1",
+      "col-auto": "grid-column:auto",
+      "col-start-1": "grid-column-start:1",
+      "col-start-2": "grid-column-start:2",
+      "col-start-3": "grid-column-start:3",
+      "col-start-4": "grid-column-start:4",
+      "col-start-5": "grid-column-start:5",
+      "col-start-6": "grid-column-start:6",
+      "col-start-7": "grid-column-start:7",
+      "col-start-auto": "grid-column-start:auto",
+      "col-end-1": "grid-column-end:1",
+      "col-end-2": "grid-column-end:2",
+      "col-end-3": "grid-column-end:3",
+      "col-end-4": "grid-column-end:4",
+      "col-end-5": "grid-column-end:5",
+      "col-end-6": "grid-column-end:6",
+      "col-end-7": "grid-column-end:7",
+      "col-end-auto": "grid-column-end:auto",
+      "row-span-1": "grid-row:span 1/span 1",
+      "row-span-2": "grid-row:span 2/span 2",
+      "row-span-3": "grid-row:span 3/span 3",
+      "row-span-full": "grid-row:1/-1",
+      "row-auto": "grid-row:auto",
+      "row-start-1": "grid-row-start:1",
+      "row-start-2": "grid-row-start:2",
+      "row-start-3": "grid-row-start:3",
+      "row-start-4": "grid-row-start:4",
+      "row-start-5": "grid-row-start:5",
+      "row-start-6": "grid-row-start:6",
+      "row-start-auto": "grid-row-start:auto",
+      "row-end-1": "grid-row-end:1",
+      "row-end-2": "grid-row-end:2",
+      "row-end-3": "grid-row-end:3",
+      "row-end-4": "grid-row-end:4",
+      "row-end-auto": "grid-row-end:auto",
+      "auto-cols-auto": "grid-auto-columns:auto",
+      "auto-cols-min": "grid-auto-columns:min-content",
+      "auto-cols-max": "grid-auto-columns:max-content",
+      "auto-cols-fr": "grid-auto-columns:minmax(0,1fr)",
+      "auto-rows-auto": "grid-auto-rows:auto",
+      "auto-rows-min": "grid-auto-rows:min-content",
+      "auto-rows-max": "grid-auto-rows:max-content",
+      "auto-rows-fr": "grid-auto-rows:minmax(0,1fr)",
+      "grid-flow-row": "grid-auto-flow:row",
+      "grid-flow-col": "grid-auto-flow:column",
+      "grid-flow-dense": "grid-auto-flow:dense",
+      "grid-flow-row-dense": "grid-auto-flow:row dense",
+      "grid-flow-col-dense": "grid-auto-flow:column dense",
+      "place-items-auto": "place-items:auto",
+      "place-items-start": "place-items:start",
+      "place-items-end": "place-items:end",
+      "place-items-center": "place-items:center",
+      "place-items-baseline": "place-items:baseline",
+      "place-items-stretch": "place-items:stretch stretch",
+      "place-content-auto": "place-content:auto",
+      "place-content-start": "place-content:start",
+      "place-content-end": "place-content:end",
+      "place-content-center": "place-content:center",
+      "place-content-between": "place-content:space-between",
+      "place-content-around": "place-content:space-around",
+      "place-content-evenly": "place-content:space-evenly",
+      "place-content-stretch": "place-content:stretch",
+      "place-self-auto": "place-self:auto",
+      "place-self-start": "place-self:start",
+      "place-self-end": "place-self:end",
+      "place-self-center": "place-self:center",
+      "place-self-baseline": "place-self:baseline",
+      "place-self-stretch": "place-self:stretch stretch",
+      "bg-none": "background-image:none",
+      "bg-cover": "background-size:cover",
+      "bg-contain": "background-size:contain",
+      "bg-center": "background-position:center",
+      "bg-bottom": "background-position:bottom",
+      "bg-left": "background-position:left",
+      "bg-left-bottom": "background-position:left bottom",
+      "bg-left-top": "background-position:left top",
+      "bg-right": "background-position:right",
+      "bg-right-bottom": "background-position:right bottom",
+      "bg-right-top": "background-position:right top",
+      "bg-top": "background-position:top",
+      "bg-no-repeat": "background-repeat:no-repeat",
+      "bg-repeat": "background-repeat:repeat",
+      "bg-repeat-x": "background-repeat:repeat-x",
+      "bg-repeat-y": "background-repeat:repeat-y",
+      "bg-fixed": "background-attachment:fixed",
+      "bg-local": "background-attachment:local",
+      "bg-scroll": "background-attachment:scroll",
+      "bg-clip-border": "background-clip:border-box",
+      "bg-clip-padding": "background-clip:padding-box",
+      "bg-clip-text": "background-clip:text",
+      "bg-origin-border": "background-origin:border-box",
+      "bg-gradient-to-t": "--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))",
+      "bg-gradient-to-tr": "--tw-gradient-position:to top right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))",
+      "bg-gradient-to-r": "--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))",
+      "bg-gradient-to-br": "--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))",
+      "bg-gradient-to-b": "--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))",
+      "bg-gradient-to-bl": "--tw-gradient-position:to bottom left in oklab;background-image:linear-gradient(var(--tw-gradient-stops))",
+      "bg-gradient-to-l": "--tw-gradient-position:to left in oklab;background-image:linear-gradient(var(--tw-gradient-stops))",
+      "bg-gradient-to-tl": "--tw-gradient-position:to top left in oklab;background-image:linear-gradient(var(--tw-gradient-stops))",
+      "blur": "--tw-blur:blur(0px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "blur-sm": "--tw-blur:blur(4px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "blur-md": "--tw-blur:blur(12px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "blur-lg": "--tw-blur:blur(20px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "blur-xl": "--tw-blur:blur(40px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "blur-2xl": "--tw-blur:blur(80px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "brightness-50": "--tw-brightness:brightness(50%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "brightness-75": "--tw-brightness:brightness(75%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "brightness-100": "--tw-brightness:brightness(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "brightness-125": "--tw-brightness:brightness(125%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "brightness-150": "--tw-brightness:brightness(150%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "brightness-200": "--tw-brightness:brightness(200%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "contrast": "--tw-contrast:contrast(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "contrast-50": "--tw-contrast:contrast(50%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "contrast-75": "--tw-contrast:contrast(75%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "contrast-100": "--tw-contrast:contrast(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "contrast-125": "--tw-contrast:contrast(125%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "contrast-150": "--tw-contrast:contrast(150%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "contrast-200": "--tw-contrast:contrast(200%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "saturate": "--tw-saturate:saturate(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "saturate-0": "--tw-saturate:saturate(0%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "saturate-50": "--tw-saturate:saturate(50%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "saturate-75": "--tw-saturate:saturate(75%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "saturate-100": "--tw-saturate:saturate(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "saturate-125": "--tw-saturate:saturate(125%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "saturate-150": "--tw-saturate:saturate(150%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "saturate-200": "--tw-saturate:saturate(200%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "grayscale": "--tw-grayscale:grayscale(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "grayscale-0": "--tw-grayscale:grayscale(0%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "invert": "--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "invert-0": "--tw-invert:invert(0%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "sepia": "--tw-sepia:sepia(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "sepia-0": "--tw-sepia:sepia(0%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "hue-rotate-0": "--tw-hue-rotate:hue-rotate(0deg);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "hue-rotate-15": "--tw-hue-rotate:hue-rotate(15deg);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "hue-rotate-30": "--tw-hue-rotate:hue-rotate(30deg);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "hue-rotate-45": "--tw-hue-rotate:hue-rotate(45deg);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "hue-rotate-60": "--tw-hue-rotate:hue-rotate(60deg);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "hue-rotate-90": "--tw-hue-rotate:hue-rotate(90deg);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "hue-rotate-180": "--tw-hue-rotate:hue-rotate(180deg);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)",
+      "backdrop-blur": "--tw-backdrop-blur:blur(0px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-blur-sm": "--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-blur-md": "--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-blur-lg": "--tw-backdrop-blur:blur(20px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-blur-xl": "--tw-backdrop-blur:blur(40px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-blur-2xl": "--tw-backdrop-blur:blur(80px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-brightness": "--tw-backdrop-brightness:brightness(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-brightness-50": "--tw-backdrop-brightness:brightness(50%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-brightness-75": "--tw-backdrop-brightness:brightness(75%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-brightness-100": "--tw-backdrop-brightness:brightness(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-contrast": "--tw-backdrop-contrast:contrast(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-contrast-50": "--tw-backdrop-contrast:contrast(50%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-contrast-75": "--tw-backdrop-contrast:contrast(75%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-contrast-100": "--tw-backdrop-contrast:contrast(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-saturate": "--tw-backdrop-saturate:saturate(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-saturate-50": "--tw-backdrop-saturate:saturate(50%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-saturate-75": "--tw-backdrop-saturate:saturate(75%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-saturate-100": "--tw-backdrop-saturate:saturate(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-grayscale": "--tw-backdrop-grayscale:grayscale(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-grayscale-0": "--tw-backdrop-grayscale:grayscale(0%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-invert": "--tw-backdrop-invert:invert(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-invert-0": "--tw-backdrop-invert:invert(0%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-sepia": "--tw-backdrop-sepia:sepia(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-sepia-0": "--tw-backdrop-sepia:sepia(0%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-opacity-10": "--tw-backdrop-opacity:opacity(10%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-opacity-20": "--tw-backdrop-opacity:opacity(20%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-opacity-30": "--tw-backdrop-opacity:opacity(30%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-opacity-40": "--tw-backdrop-opacity:opacity(40%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-opacity-50": "--tw-backdrop-opacity:opacity(50%);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-hue-rotate-0": "--tw-backdrop-hue-rotate:hue-rotate(0deg);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-hue-rotate-90": "--tw-backdrop-hue-rotate:hue-rotate(90deg);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "backdrop-hue-rotate-180": "--tw-backdrop-hue-rotate:hue-rotate(180deg);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)",
+      "object-cover": "object-fit:cover",
+      "object-contain": "object-fit:contain",
+      "object-fill": "object-fit:fill",
+      "object-center": "object-position:center",
+      "aspect-square": "aspect-ratio:1",
+      "aspect-video": "aspect-ratio:16/9",
+      "aspect-auto": "aspect-ratio:auto",
+      "align-middle": "vertical-align:middle",
+      "align-top": "vertical-align:top",
+      "align-bottom": "vertical-align:bottom",
+      "align-baseline": "vertical-align:baseline",
+      "list-none": "list-style-type:none",
+      "list-disc": "list-style-type:disc",
+      "list-decimal": "list-style-type:decimal",
+      "appearance-none": "appearance:none",
+      "resize-none": "resize:none",
+      "resize-x": "resize:horizontal",
+      "resize-y": "resize:vertical",
+      "resize": "resize:both",
+      "snap-none": "scroll-snap-type:none",
+      "snap-x": "scroll-snap-type:x var(--tw-scroll-snap-strictness)",
+      "snap-y": "scroll-snap-type:y var(--tw-scroll-snap-strictness)",
+      "snap-mandatory": "--tw-scroll-snap-strictness:mandatory",
+      "snap-proximity": "--tw-scroll-snap-strictness:proximity",
+      "snap-align-none": "scroll-snap-align:none",
+      "touch-none": "touch-action:none",
+      "touch-auto": "touch-action:auto",
+      "isolate": "isolation:isolate",
+      "isolation-auto": "isolation:auto",
+      "mix-blend-normal": "mix-blend-mode:normal",
+      "mix-blend-multiply": "mix-blend-mode:multiply",
+      "mix-blend-screen": "mix-blend-mode:screen",
+      "mix-blend-overlay": "mix-blend-mode:overlay",
+      "mix-blend-darken": "mix-blend-mode:darken",
+      "mix-blend-lighten": "mix-blend-mode:lighten",
+      "mix-blend-color-dodge": "mix-blend-mode:color-dodge",
+      "mix-blend-color-burn": "mix-blend-mode:color-burn",
+      "mix-blend-hard-light": "mix-blend-mode:hard-light",
+      "mix-blend-soft-light": "mix-blend-mode:soft-light",
+      "mix-blend-difference": "mix-blend-mode:difference",
+      "mix-blend-exclusion": "mix-blend-mode:exclusion",
+      "mix-blend-hue": "mix-blend-mode:hue",
+      "mix-blend-saturation": "mix-blend-mode:saturation",
+      "mix-blend-color": "mix-blend-mode:color",
+      "mix-blend-luminosity": "mix-blend-mode:luminosity",
+      "mix-blend-plus-lighter": "mix-blend-mode:plus-lighter",
+      "underline-offset-0": "text-underline-offset:0px",
+      "underline-offset-1": "text-underline-offset:1px",
+      "underline-offset-2": "text-underline-offset:2px",
+      "underline-offset-4": "text-underline-offset:4px",
+      "underline-offset-8": "text-underline-offset:8px",
+      "decoration-1": "text-decoration-thickness:1px",
+      "decoration-2": "text-decoration-thickness:2px",
+      "decoration-4": "text-decoration-thickness:4px",
+      "decoration-8": "text-decoration-thickness:8px",
+      "indent-px": "text-indent:1px",
+      "columns-1": "columns:1",
+      "columns-2": "columns:2",
+      "columns-3": "columns:3",
+      "columns-auto": "columns:auto",
+      "w-0": "width:0",
+      "w-1": "width:0.25rem",
+      "w-2": "width:0.5rem",
+      "w-3": "width:0.75rem",
+      "w-4": "width:1rem",
+      "w-6": "width:1.5rem",
+      "w-8": "width:2rem",
+      "w-10": "width:2.5rem",
+      "w-12": "width:3rem",
+      "w-14": "width:3.5rem",
+      "w-16": "width:4rem",
+      "w-20": "width:5rem",
+      "w-24": "width:6rem",
+      "w-28": "width:7rem",
+      "w-32": "width:8rem",
+      "w-36": "width:9rem",
+      "w-40": "width:10rem",
+      "w-44": "width:11rem",
+      "w-48": "width:12rem",
+      "w-52": "width:13rem",
+      "w-56": "width:14rem",
+      "w-60": "width:15rem",
+      "w-64": "width:16rem",
+      "w-72": "width:18rem",
+      "w-80": "width:20rem",
+      "w-96": "width:24rem",
+      "h-0": "height:0",
+      "h-1": "height:0.25rem",
+      "h-2": "height:0.5rem",
+      "h-3": "height:0.75rem",
+      "h-4": "height:1rem",
+      "h-6": "height:1.5rem",
+      "h-8": "height:2rem",
+      "h-10": "height:2.5rem",
+      "h-12": "height:3rem",
+      "h-14": "height:3.5rem",
+      "h-16": "height:4rem",
+      "h-20": "height:5rem",
+      "h-24": "height:6rem",
+      "h-28": "height:7rem",
+      "h-32": "height:8rem",
+      "h-36": "height:9rem",
+      "h-40": "height:10rem",
+      "h-44": "height:11rem",
+      "h-48": "height:12rem",
+      "h-52": "height:13rem",
+      "h-56": "height:14rem",
+      "h-60": "height:15rem",
+      "h-64": "height:16rem",
+      "h-72": "height:18rem",
+      "h-80": "height:20rem",
+      "h-96": "height:24rem",
+      "min-w-0": "min-width:0",
+      "min-w-1": "min-width:0.25rem",
+      "min-w-2": "min-width:0.5rem",
+      "min-w-3": "min-width:0.75rem",
+      "min-w-4": "min-width:1rem",
+      "min-w-6": "min-width:1.5rem",
+      "min-w-8": "min-width:2rem",
+      "min-w-10": "min-width:2.5rem",
+      "min-w-12": "min-width:3rem",
+      "min-w-14": "min-width:3.5rem",
+      "min-w-16": "min-width:4rem",
+      "min-w-20": "min-width:5rem",
+      "min-w-24": "min-width:6rem",
+      "min-w-28": "min-width:7rem",
+      "min-w-32": "min-width:8rem",
+      "min-w-36": "min-width:9rem",
+      "min-w-40": "min-width:10rem",
+      "min-w-44": "min-width:11rem",
+      "min-w-48": "min-width:12rem",
+      "min-w-52": "min-width:13rem",
+      "min-w-56": "min-width:14rem",
+      "min-w-60": "min-width:15rem",
+      "min-w-64": "min-width:16rem",
+      "min-w-72": "min-width:18rem",
+      "min-w-80": "min-width:20rem",
+      "min-w-96": "min-width:24rem",
+      "max-w-xs": "max-width:20rem",
+      "max-w-sm": "max-width:24rem",
+      "max-w-md": "max-width:28rem",
+      "max-w-lg": "max-width:32rem",
+      "max-w-xl": "max-width:36rem",
+      "max-w-2xl": "max-width:42rem",
+      "max-w-3xl": "max-width:48rem",
+      "max-w-4xl": "max-width:56rem",
+      "max-w-5xl": "max-width:64rem",
+      "max-w-6xl": "max-width:72rem",
+      "max-w-7xl": "max-width:80rem",
+      "max-w-prose": "max-width:65ch",
+      "max-w-screen-sm": "max-width:40rem",
+      "max-w-screen-md": "max-width:48rem",
+      "max-w-screen-lg": "max-width:64rem",
+      "max-w-screen-xl": "max-width:80rem",
+      "max-w-screen-2xl": "max-width:96rem",
+      "min-h-0": "min-height:0",
+      "min-h-1": "min-height:0.25rem",
+      "min-h-2": "min-height:0.5rem",
+      "min-h-3": "min-height:0.75rem",
+      "min-h-4": "min-height:1rem",
+      "min-h-6": "min-height:1.5rem",
+      "min-h-8": "min-height:2rem",
+      "min-h-10": "min-height:2.5rem",
+      "min-h-12": "min-height:3rem",
+      "min-h-14": "min-height:3.5rem",
+      "min-h-16": "min-height:4rem",
+      "min-h-20": "min-height:5rem",
+      "min-h-24": "min-height:6rem",
+      "min-h-28": "min-height:7rem",
+      "min-h-32": "min-height:8rem",
+      "min-h-36": "min-height:9rem",
+      "min-h-40": "min-height:10rem",
+      "min-h-44": "min-height:11rem",
+      "min-h-48": "min-height:12rem",
+      "min-h-52": "min-height:13rem",
+      "min-h-56": "min-height:14rem",
+      "min-h-60": "min-height:15rem",
+      "min-h-64": "min-height:16rem",
+      "min-h-72": "min-height:18rem",
+      "min-h-80": "min-height:20rem",
+      "min-h-96": "min-height:24rem",
+      "max-h-0": "max-height:0",
+      "max-h-1": "max-height:0.25rem",
+      "max-h-2": "max-height:0.5rem",
+      "max-h-3": "max-height:0.75rem",
+      "max-h-4": "max-height:1rem",
+      "max-h-6": "max-height:1.5rem",
+      "max-h-8": "max-height:2rem",
+      "max-h-10": "max-height:2.5rem",
+      "max-h-12": "max-height:3rem",
+      "max-h-14": "max-height:3.5rem",
+      "max-h-16": "max-height:4rem",
+      "max-h-20": "max-height:5rem",
+      "max-h-24": "max-height:6rem",
+      "max-h-28": "max-height:7rem",
+      "max-h-32": "max-height:8rem",
+      "max-h-36": "max-height:9rem",
+      "max-h-40": "max-height:10rem",
+      "max-h-44": "max-height:11rem",
+      "max-h-48": "max-height:12rem",
+      "max-h-52": "max-height:13rem",
+      "max-h-56": "max-height:14rem",
+      "max-h-60": "max-height:15rem",
+      "max-h-64": "max-height:16rem",
+      "max-h-72": "max-height:18rem",
+      "max-h-80": "max-height:20rem",
+      "max-h-96": "max-height:24rem",
+      "w-px": "width:1px",
+      "h-px": "height:1px",
+      "w-1/2": "width:50%",
+      "w-1/3": "width:33.3333%",
+      "w-1/4": "width:25%",
+      "w-1/5": "width:20%",
+      "w-1/6": "width:16.6667%",
+      "w-2/3": "width:66.6667%",
+      "w-2/4": "width:50%",
+      "w-2/5": "width:40%",
+      "w-2/6": "width:33.3333%",
+      "w-3/4": "width:75%",
+      "w-3/5": "width:60%",
+      "w-3/6": "width:50%",
+      "w-4/5": "width:80%",
+      "w-4/6": "width:66.6667%",
+      "w-5/6": "width:83.3333%",
+      "h-1/2": "height:50%",
+      "h-1/3": "height:33.3333%",
+      "h-1/4": "height:25%",
+      "h-1/5": "height:20%",
+      "h-1/6": "height:16.6667%",
+      "h-2/3": "height:66.6667%",
+      "h-2/4": "height:50%",
+      "h-2/5": "height:40%",
+      "h-2/6": "height:33.3333%",
+      "h-3/4": "height:75%",
+      "h-3/5": "height:60%",
+      "h-3/6": "height:50%",
+      "h-4/5": "height:80%",
+      "h-4/6": "height:66.6667%",
+      "h-5/6": "height:83.3333%"
+    };
+    TW_VARIANTS_EXTRACTED = {
+      "hover": ":hover",
+      "focus": ":focus",
+      "focus-visible": ":focus-visible",
+      "active": ":active",
+      "disabled": ":disabled",
+      "group-hover": ":is(:where(.group):hover *)",
+      "group-data": "[data-{attr}={value}]",
+      "placeholder": "::placeholder",
+      "before": "::before",
+      "after": "::after",
+      "file": "::file-selector-button",
+      "marker": "::marker",
+      "first-line": "::first-line",
+      "first-letter": "::first-letter",
+      "peer-checked": "inherited from base variant handling"
+    };
+  }
+});
+
+// ../shared/src/mcp/tw-translate.ts
+function escapeClassName(cls) {
+  return cls.replace(ESCAPE_RE, (c) => `\\${c}`).replace(/ /g, "\\ ");
+}
+function dataAriaVariant(v) {
+  const m = v.match(/^(data|aria)-\[([^\]]+)\]$/);
+  if (!m) return null;
+  const [, kind, expr] = m;
+  const eq = expr.match(/^([\w-]+)\s*=\s*(.+)$/);
+  if (eq) {
+    const val = eq[2].replace(/^["']|["']$/g, "");
+    return (base) => `${base}[${kind}-${eq[1]}="${val}"]`;
+  }
+  return (base) => `${base}[${kind}-${expr}]`;
+}
+function applyVariant(selector, variant) {
+  if (STATE_VARIANTS[variant]) return `${selector}${STATE_VARIANTS[variant]}`;
+  if (PSEUDO_ELEMENTS[variant]) return `${selector}${PSEUDO_ELEMENTS[variant]}`;
+  if (GROUP_PEER[variant]) return GROUP_PEER[variant](selector);
+  if (TW_VARIANTS_EXTRACTED[variant] && !PSEUDO_ELEMENTS[variant] && !STATE_VARIANTS[variant]) {
+    const suffix = TW_VARIANTS_EXTRACTED[variant];
+    return suffix.startsWith(":") ? `${selector}${suffix}` : `${selector}${suffix}`;
+  }
+  const da = dataAriaVariant(variant);
+  if (da) return da(selector);
+  const ariaShort = variant.match(/^aria-(selected|checked|expanded|disabled|current|pressed|hidden)$/);
+  if (ariaShort) return `${selector}[aria-${ariaShort[1]}="true"]`;
+  const has = variant.match(/^has-\[(.+)\]$/);
+  if (has) return `${selector}:has(${has[1].replace(/(?<!\\)_/g, " ")})`;
+  const groupData = variant.match(/^group-(data|aria)-\[([^\]]+)\]$/);
+  if (groupData) {
+    const eq = groupData[2].match(/^([\w-]+)\s*=\s*(.+)$/);
+    const attr = eq ? `${groupData[1]}-${eq[1]}="${eq[2].replace(/^["']|["']$/g, "")}"` : `${groupData[1]}-${groupData[2]}`;
+    return `.group[${attr}] ${selector}`;
+  }
+  const groupArb = variant.match(/^group-\[(.+)\]$/);
+  if (groupArb) {
+    const inner = groupArb[1].replace(/&/g, "").replace(/(?<!\\)_/g, " ");
+    return `.group${inner} ${selector}`;
+  }
+  const arb = variant.match(/^\[(.+)\]$/);
+  if (arb && arb[1].includes("&")) {
+    const inner = arb[1].replace(/&/g, selector).replace(/(?<!\\)_/g, " ");
+    return inner;
+  }
+  return null;
+}
+function needsContent(variants, body) {
+  return (variants.includes("before") || variants.includes("after")) && !/(^|;)\s*content\s*:/.test(body);
+}
+function spacing(token) {
+  if (token === "px") return "1px";
+  if (token === "full") return "100%";
+  if (token === "auto") return "auto";
+  if (token === "screen") return "100vh";
+  if (/^\d+(\.\d+)?$/.test(token)) {
+    const n = parseFloat(token);
+    return `${(n * 0.25).toFixed(4).replace(/\.?0+$/, "")}rem`;
+  }
+  const frac = token.match(/^(\d+)\/(\d+)$/);
+  if (frac) return `${(+frac[1] / +frac[2] * 100).toFixed(4).replace(/\.?0+$/, "")}%`;
+  return null;
+}
+function colorValue(token) {
+  const [name, op] = token.split("/");
+  let base = null;
+  if (name === "transparent") base = "transparent";
+  else if (name === "current") base = "currentColor";
+  else if (name === "white") base = "oklch(1 0 0)";
+  else if (name === "black") base = "oklch(0 0 0)";
+  else if (SEMANTIC_TOKENS.has(name)) base = `var(--${name})`;
+  if (!base) return null;
+  if (op && /^\d+$/.test(op)) {
+    return `color-mix(in oklab, ${base} ${op}%, transparent)`;
+  }
+  return base;
+}
+function decodeArbitrary(raw) {
+  const v = raw.replace(/(?<!\\)_/g, " ").replace(/\\_/g, "_").trim();
+  return v && !/[{}<>;]/.test(v) ? v : null;
+}
+function animateModifier(base) {
+  const spin = {
+    "animate-spin": "animation:spin 1s linear infinite",
+    "animate-pulse": "animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite",
+    "animate-bounce": "animation:bounce 1s infinite",
+    "animate-ping": "animation:ping 1s cubic-bezier(0,0,0.2,1) infinite",
+    "animate-accordion-down": "animation:accordion-down 0.2s ease-out",
+    "animate-accordion-up": "animation:accordion-up 0.2s ease-out",
+    "animate-collapsible-down": "animation:collapsible-down 0.2s ease-out",
+    "animate-collapsible-up": "animation:collapsible-up 0.2s ease-out",
+    "animate-none": "animation:none"
+  };
+  if (spin[base]) return spin[base];
+  let m = base.match(/^(fade|zoom)-(in|out)-(\d+)$/);
+  if (m) {
+    const kind = m[2] === "in" ? "enter" : "exit";
+    if (m[1] === "fade") return `--tw-${kind}-opacity:${(+m[3] / 100).toString().replace(/^0\./, ".")}`;
+    return `--tw-${kind}-scale:${(+m[3] / 100).toString().replace(/^0\./, ".")}`;
+  }
+  m = base.match(/^slide-(in-from|out-to)-(top|bottom|left|right)-(.+)$/);
+  if (m) {
+    const kind = m[1] === "in-from" ? "enter" : "exit";
+    const axis = m[2] === "top" || m[2] === "bottom" ? "y" : "x";
+    const sign = m[2] === "top" || m[2] === "left" ? "-" : "";
+    const v = m[3].startsWith("[") ? decodeArbitrary(m[3].slice(1, -1)) : spacing(m[3]);
+    if (v) return `--tw-${kind}-translate-${axis}:${sign}${v}`;
+  }
+  return null;
+}
+function paletteColor(base) {
+  const m = base.match(/^([a-z]+(?:-[trbl])?)-([a-z]+)-(\d{2,3})(?:\/(\d+))?$/);
+  if (!m) return null;
+  const prop = COLOR_PROP[m[1]];
+  const shade = PALETTE[m[2]]?.[m[3]];
+  if (!prop || !shade) return null;
+  const val = m[4] ? `color-mix(in oklab, ${shade} ${m[4]}%, transparent)` : shade;
+  return `${prop}:${val}`;
+}
+function translateBase(base) {
+  if (TW_STATIC_EXTRACTED[base]) return TW_STATIC_EXTRACTED[base];
+  if (STATIC[base]) return STATIC[base];
+  if (KNOWN_EMPTY.has(base)) return "";
+  if (FONT_FAMILY[base]) return FONT_FAMILY[base];
+  if (FLEX_EXTRA[base]) return FLEX_EXTRA[base];
+  const anim = animateModifier(base);
+  if (anim) return anim;
+  const pal = paletteColor(base);
+  if (pal) return pal;
+  if (FONT_SIZE[base]) return FONT_SIZE[base];
+  if (FONT_WEIGHT[base]) return `font-weight:${FONT_WEIGHT[base]}`;
+  if (RADIUS[base]) return `border-radius:${RADIUS[base]}`;
+  const propArb = base.match(/^\[([\w-]+):(.+)\]$/);
+  if (propArb) {
+    const val = decodeArbitrary(propArb[2]);
+    return val ? `${propArb[1]}:${val}` : null;
+  }
+  const rsa = base.match(/^rounded-(t|r|b|l|tl|tr|br|bl)-\[(.+)\]$/);
+  if (rsa && RADIUS_SIDE[rsa[1]]) {
+    const v = decodeArbitrary(rsa[2]);
+    if (v) return RADIUS_SIDE[rsa[1]].map((p) => `${p}:${v}`).join(";");
+  }
+  const arb = base.match(/^(-?[a-z][\w-]*)-\[(.+)\](?:\/(\d+))?$/);
+  if (arb) {
+    const val = decodeArbitrary(arb[2]);
+    if (val) {
+      const prop = ARBITRARY_PROP[arb[1]];
+      if (prop) return `${prop}:${val}`;
+      const colorProp = COLOR_PROP[arb[1]];
+      if (colorProp) {
+        const v = arb[3] ? `color-mix(in oklab, ${val} ${arb[3]}%, transparent)` : val;
+        return `${colorProp}:${v}`;
+      }
+    }
+  }
+  const rside = base.match(/^rounded-(t|r|b|l|tl|tr|br|bl)(?:-(.+))?$/);
+  if (rside_ok(rside)) {
+    const props = RADIUS_SIDE[rside[1]];
+    const key = rside[2] ? `rounded-${rside[2]}` : "rounded";
+    const val = RADIUS[key];
+    if (val) return props.map((p) => `${p}:${val}`).join(";");
+  }
+  const colorMatch = base.match(/^([a-z]+(?:-[trbl])?)-(.+)$/);
+  if (colorMatch && COLOR_PROP[colorMatch[1]]) {
+    const val = colorValue(colorMatch[2]);
+    if (val) return `${COLOR_PROP[colorMatch[1]]}:${val}`;
+  }
+  const sp = base.match(/^(-)?([a-z]+(?:-[xytrbl])?)-(.+)$/);
+  if (sp && SPACING_PROP[sp[2]]) {
+    const v = spacing(sp[3]);
+    if (v) {
+      const val = sp[1] ? `-${v}` : v;
+      return SPACING_PROP[sp[2]].map((p) => `${p}:${val}`).join(";");
+    }
+  }
+  const sz = base.match(/^(w|h|min-w|max-w|min-h|max-h|size)-(.+)$/);
+  if (sz && SIZE_PROP[sz[1]]) {
+    const v = sz[2] === "max" ? "max-content" : sz[2] === "min" ? "min-content" : sz[2] === "fit" ? "fit-content" : MAX_W_SCALE[sz[2]] ?? spacing(sz[2]);
+    if (v) return SIZE_PROP[sz[1]].map((p) => `${p}:${v}`).join(";");
+  }
+  const tr = base.match(/^(-)?translate-([xy])-(.+)$/);
+  if (tr) {
+    const raw = tr[3].startsWith("[") ? decodeArbitrary(tr[3].slice(1, -1)) : spacing(tr[3]);
+    if (raw) {
+      const v = `${tr[1] ?? ""}${raw}`;
+      return `--tw-translate-${tr[2]}:${v};translate:var(--tw-translate-x) var(--tw-translate-y)`;
+    }
+  }
+  const nz = base.match(/^-z-(\d+)$/);
+  if (nz) return `z-index:-${nz[1]}`;
+  const bw = base.match(/^border-([trbl])-(\d+)$/);
+  if (bw) {
+    const side = { t: "top", r: "right", b: "bottom", l: "left" }[bw[1]];
+    return `border-${side}-width:${bw[2]}px`;
+  }
+  const lh = base.match(/^leading-(\d+)$/);
+  if (lh) return `line-height:${(+lh[1] * 0.25).toString().replace(/\.?0+$/, "")}rem`;
+  const fil = base.match(/^(backdrop-)?(brightness|saturate|contrast|grayscale|invert|sepia|blur)-(\d+|none)$/);
+  if (fil) {
+    const prop = fil[1] ? "backdrop-filter" : "filter";
+    const fn = fil[2];
+    const n = fil[3] === "none" ? fn === "blur" ? "0" : "100" : fil[3];
+    const arg = fn === "blur" ? `${n}px` : ["grayscale", "invert", "sepia"].includes(fn) ? `${+n / 100}` : `${n}%`;
+    return `${prop}:${fn}(${arg})`;
+  }
+  const sm = base.match(/^scroll-(m|mt|mr|mb|ml|p|pt|pr|pb|pl)([xy])?-(.+)$/);
+  if (sm) {
+    const v = spacing(sm[3]);
+    if (v) {
+      const kind = sm[1][0] === "m" ? "margin" : "padding";
+      const side = { t: "-top", r: "-right", b: "-bottom", l: "-left", x: "-inline", y: "-block" }[sm[1][1] ?? sm[2] ?? ""] ?? "";
+      return `scroll-${kind}${side}:${v}`;
+    }
+  }
+  return null;
+}
+function rside_ok(m) {
+  return !!m && !!RADIUS_SIDE[m[1]];
+}
+function translateClass(cls) {
+  if (!cls || cls.startsWith("//")) return null;
+  const parts = splitVariants(cls);
+  const base = parts.pop();
+  let body = translateBase(base);
+  if (body === null) return null;
+  if (needsContent(parts, body)) body = `content:"";${body}`;
+  let selector = `.${escapeClassName(cls)}`;
+  let media;
+  for (const v of parts) {
+    if (BREAKPOINTS[v]) {
+      media = `(min-width:${BREAKPOINTS[v]})`;
+      continue;
+    }
+    const next = applyVariant(selector, v);
+    if (!next) return null;
+    selector = next;
+  }
+  return { selector, body, media };
+}
+function splitVariants(cls) {
+  const out = [];
+  let depth = 0;
+  let cur = "";
+  for (const ch of cls) {
+    if (ch === "[") depth++;
+    else if (ch === "]") depth--;
+    if (ch === ":" && depth === 0) {
+      out.push(cur);
+      cur = "";
+    } else cur += ch;
+  }
+  out.push(cur);
+  return out;
+}
+var BREAKPOINTS, KNOWN_EMPTY, PALETTE, FONT_FAMILY, FLEX_EXTRA, TW_DEFAULTS, ESCAPE_RE, STATE_VARIANTS, GROUP_PEER, PSEUDO_ELEMENTS, SPACING_PROP, SIZE_PROP, COLOR_PROP, SEMANTIC_TOKENS, RADIUS, RADIUS_SIDE, FONT_SIZE, FONT_WEIGHT, STATIC, ARBITRARY_PROP, MAX_W_SCALE;
+var init_tw_translate = __esm({
+  "../shared/src/mcp/tw-translate.ts"() {
+    "use strict";
+    init_tw_extracted_generated();
+    BREAKPOINTS = {
+      sm: "40rem",
+      md: "48rem",
+      lg: "64rem",
+      xl: "80rem",
+      "2xl": "96rem"
+    };
+    KNOWN_EMPTY = /* @__PURE__ */ new Set(["group", "peer"]);
+    PALETTE = {
+      emerald: { "50": "oklch(0.979 0.021 166.1)", "100": "oklch(0.95 0.052 163.1)", "200": "oklch(0.905 0.093 164.2)", "400": "oklch(0.765 0.177 163.2)", "500": "oklch(0.696 0.17 162.5)", "600": "oklch(0.596 0.145 163.2)", "700": "oklch(0.508 0.118 165.6)" },
+      green: { "50": "oklch(0.982 0.018 155.8)", "100": "oklch(0.962 0.044 156.7)", "400": "oklch(0.792 0.209 151.7)", "500": "oklch(0.723 0.219 149.6)", "600": "oklch(0.627 0.194 149.2)", "700": "oklch(0.527 0.154 150.1)" },
+      orange: { "50": "oklch(0.98 0.016 73.7)", "100": "oklch(0.954 0.038 75.2)", "200": "oklch(0.901 0.076 70.7)", "400": "oklch(0.75 0.183 55.9)", "500": "oklch(0.705 0.213 47.6)", "600": "oklch(0.646 0.222 41.1)", "700": "oklch(0.553 0.195 38.4)" },
+      amber: { "50": "oklch(0.987 0.022 95.3)", "100": "oklch(0.962 0.059 95.6)", "400": "oklch(0.828 0.189 84.4)", "500": "oklch(0.769 0.188 70.1)", "600": "oklch(0.666 0.179 58.3)", "700": "oklch(0.555 0.163 48.998)" },
+      red: { "50": "oklch(0.971 0.013 17.4)", "100": "oklch(0.936 0.032 17.7)", "200": "oklch(0.885 0.062 18.3)", "300": "oklch(0.808 0.114 19.6)", "400": "oklch(0.704 0.191 22.2)", "500": "oklch(0.637 0.237 25.3)", "600": "oklch(0.577 0.245 27.3)", "700": "oklch(0.505 0.213 27.5)" },
+      yellow: { "50": "oklch(0.987 0.026 102.2)", "100": "oklch(0.973 0.071 103.2)", "400": "oklch(0.852 0.199 91.9)", "500": "oklch(0.795 0.184 86.05)", "600": "oklch(0.681 0.162 75.8)", "700": "oklch(0.554 0.135 66.4)" },
+      blue: { "50": "oklch(0.97 0.014 254.6)", "100": "oklch(0.932 0.032 255.6)", "500": "oklch(0.623 0.214 259.8)", "600": "oklch(0.546 0.245 262.9)", "700": "oklch(0.488 0.243 264.4)" },
+      sky: { "50": "oklch(0.977 0.013 236.6)", "100": "oklch(0.951 0.026 236.8)", "500": "oklch(0.685 0.169 237.3)", "600": "oklch(0.588 0.158 241.97)", "700": "oklch(0.5 0.134 242.7)" },
+      rose: { "50": "oklch(0.969 0.015 12.4)", "100": "oklch(0.941 0.03 12.6)", "500": "oklch(0.645 0.246 16.4)", "600": "oklch(0.586 0.253 17.6)", "700": "oklch(0.514 0.222 16.9)" },
+      slate: { "50": "oklch(0.984 0.003 247.9)", "100": "oklch(0.968 0.007 247.9)", "500": "oklch(0.554 0.046 257.4)", "600": "oklch(0.446 0.043 257.3)", "700": "oklch(0.372 0.044 257.3)", "900": "oklch(0.208 0.042 265.8)" },
+      zinc: { "50": "oklch(0.985 0 0)", "100": "oklch(0.967 0.001 286.4)", "400": "oklch(0.705 0.015 286.1)", "500": "oklch(0.552 0.016 285.9)", "600": "oklch(0.442 0.017 285.8)", "700": "oklch(0.37 0.013 285.8)", "800": "oklch(0.274 0.006 286)", "900": "oklch(0.21 0.006 285.9)" },
+      gray: { "50": "oklch(0.985 0.002 247.8)", "100": "oklch(0.967 0.003 264.5)", "400": "oklch(0.707 0.022 261.3)", "500": "oklch(0.551 0.027 264.4)", "600": "oklch(0.446 0.03 256.8)", "700": "oklch(0.373 0.034 259.7)", "900": "oklch(0.21 0.034 264.7)" },
+      neutral: { "50": "oklch(0.985 0 0)", "100": "oklch(0.97 0 0)", "400": "oklch(0.708 0 0)", "500": "oklch(0.556 0 0)", "600": "oklch(0.439 0 0)", "700": "oklch(0.371 0 0)", "900": "oklch(0.205 0 0)" }
+    };
+    FONT_FAMILY = {
+      "font-sans": "font-family:var(--font-sans)",
+      "font-serif": "font-family:var(--font-serif)",
+      "font-mono": "font-family:var(--font-mono)"
+    };
+    FLEX_EXTRA = {
+      "flex-col-reverse": "flex-direction:column-reverse",
+      "flex-wrap-reverse": "flex-wrap:wrap-reverse",
+      "caption-bottom": "caption-side:bottom",
+      "shrink": "flex-shrink:1",
+      "sr-only": "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0"
+    };
+    TW_DEFAULTS = "*,::before,::after,::backdrop{--tw-ring-color:currentcolor;--tw-ring-shadow:0 0 0 transparent;--tw-ring-offset-shadow:0 0 0 transparent;--tw-ring-offset-width:0px;--tw-ring-offset-color:oklch(1 0 0);--tw-ring-inset:;--tw-shadow:0 0 0 transparent;--tw-inset-shadow:0 0 0 transparent;--tw-inset-ring-shadow:0 0 0 transparent;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:;--tw-rotate-y:;--tw-rotate-z:;--tw-skew-x:;--tw-skew-y:;--tw-gradient-from:transparent;--tw-gradient-to:transparent;--tw-gradient-stops:;--tw-blur:;--tw-brightness:;--tw-contrast:;--tw-saturate:;--tw-content:''}";
+    ESCAPE_RE = /[:\\[\]/.#(),%!&>~*+="'@]/g;
+    STATE_VARIANTS = {
+      hover: ":hover",
+      focus: ":focus",
+      "focus-visible": ":focus-visible",
+      "focus-within": ":focus-within",
+      active: ":active",
+      visited: ":visited",
+      disabled: ":disabled",
+      checked: ":checked",
+      required: ":required",
+      "read-only": ":read-only",
+      "first": ":first-child",
+      "last": ":last-child",
+      "odd": ":nth-child(odd)",
+      "even": ":nth-child(even)",
+      "empty": ":empty"
+    };
+    GROUP_PEER = {
+      "group-hover": (s) => `.group:hover ${s}`,
+      "group-focus": (s) => `.group:focus ${s}`,
+      "peer-hover": (s) => `.peer:hover ~ ${s}`,
+      "peer-focus": (s) => `.peer:focus ~ ${s}`,
+      "peer-checked": (s) => `.peer:checked ~ ${s}`,
+      "peer-disabled": (s) => `.peer:disabled ~ ${s}`
+    };
+    PSEUDO_ELEMENTS = {
+      placeholder: "::placeholder",
+      before: "::before",
+      after: "::after",
+      file: "::file-selector-button",
+      marker: "::marker",
+      selection: "::selection",
+      "first-line": "::first-line",
+      "first-letter": "::first-letter",
+      backdrop: "::backdrop"
+    };
+    SPACING_PROP = {
+      p: ["padding"],
+      px: ["padding-left", "padding-right"],
+      py: ["padding-top", "padding-bottom"],
+      pt: ["padding-top"],
+      pr: ["padding-right"],
+      pb: ["padding-bottom"],
+      pl: ["padding-left"],
+      ps: ["padding-inline-start"],
+      pe: ["padding-inline-end"],
+      m: ["margin"],
+      mx: ["margin-left", "margin-right"],
+      my: ["margin-top", "margin-bottom"],
+      mt: ["margin-top"],
+      mr: ["margin-right"],
+      mb: ["margin-bottom"],
+      ml: ["margin-left"],
+      ms: ["margin-inline-start"],
+      me: ["margin-inline-end"],
+      gap: ["gap"],
+      "gap-x": ["column-gap"],
+      "gap-y": ["row-gap"],
+      "space-x": ["column-gap"],
+      "space-y": ["row-gap"],
+      // approximation
+      inset: ["inset"],
+      top: ["top"],
+      right: ["right"],
+      bottom: ["bottom"],
+      left: ["left"]
+    };
+    SIZE_PROP = {
+      w: ["width"],
+      "min-w": ["min-width"],
+      "max-w": ["max-width"],
+      h: ["height"],
+      "min-h": ["min-height"],
+      "max-h": ["max-height"],
+      size: ["width", "height"]
+    };
+    COLOR_PROP = {
+      bg: "background-color",
+      text: "color",
+      border: "border-color",
+      "border-t": "border-top-color",
+      "border-r": "border-right-color",
+      "border-b": "border-bottom-color",
+      "border-l": "border-left-color",
+      ring: "--tw-ring-color",
+      fill: "fill",
+      stroke: "stroke",
+      outline: "outline-color",
+      decoration: "text-decoration-color",
+      caret: "caret-color",
+      accent: "accent-color",
+      from: "--tw-gradient-from",
+      to: "--tw-gradient-to",
+      via: "--tw-gradient-via"
+    };
+    SEMANTIC_TOKENS = /* @__PURE__ */ new Set([
+      "background",
+      "foreground",
+      "card",
+      "card-foreground",
+      "popover",
+      "popover-foreground",
+      "primary",
+      "primary-foreground",
+      "secondary",
+      "secondary-foreground",
+      "muted",
+      "muted-foreground",
+      "accent",
+      "accent-foreground",
+      "destructive",
+      "destructive-foreground",
+      "border",
+      "input",
+      "ring",
+      "chart-1",
+      "chart-2",
+      "chart-3",
+      "chart-4",
+      "chart-5",
+      "sidebar",
+      "sidebar-foreground",
+      "sidebar-primary",
+      "sidebar-accent",
+      "sidebar-border"
+    ]);
+    RADIUS = {
+      "rounded-none": "0",
+      "rounded-sm": "var(--radius-sm, calc(var(--radius) - 4px))",
+      "rounded": "0.25rem",
+      "rounded-md": "var(--radius-md, calc(var(--radius) - 2px))",
+      "rounded-lg": "var(--radius-lg, var(--radius))",
+      "rounded-xl": "var(--radius-xl, calc(var(--radius) + 4px))",
+      "rounded-2xl": "var(--radius-2xl, 1rem)",
+      "rounded-3xl": "var(--radius-3xl, 1.5rem)",
+      "rounded-full": "calc(infinity * 1px)"
+    };
+    RADIUS_SIDE = {
+      t: ["border-top-left-radius", "border-top-right-radius"],
+      r: ["border-top-right-radius", "border-bottom-right-radius"],
+      b: ["border-bottom-left-radius", "border-bottom-right-radius"],
+      l: ["border-top-left-radius", "border-bottom-left-radius"],
+      tl: ["border-top-left-radius"],
+      tr: ["border-top-right-radius"],
+      br: ["border-bottom-right-radius"],
+      bl: ["border-bottom-left-radius"]
+    };
+    FONT_SIZE = {
+      "text-xs": "font-size:0.75rem;line-height:1rem",
+      "text-sm": "font-size:0.875rem;line-height:1.25rem",
+      "text-base": "font-size:1rem;line-height:1.5rem",
+      "text-lg": "font-size:1.125rem;line-height:1.75rem",
+      "text-xl": "font-size:1.25rem;line-height:1.75rem",
+      "text-2xl": "font-size:1.5rem;line-height:2rem",
+      "text-3xl": "font-size:1.875rem;line-height:2.25rem",
+      "text-4xl": "font-size:2.25rem;line-height:2.5rem",
+      "text-5xl": "font-size:3rem;line-height:1",
+      "text-6xl": "font-size:3.75rem;line-height:1"
+    };
+    FONT_WEIGHT = {
+      "font-thin": "100",
+      "font-extralight": "200",
+      "font-light": "300",
+      "font-normal": "400",
+      "font-medium": "500",
+      "font-semibold": "600",
+      "font-bold": "700",
+      "font-extrabold": "800",
+      "font-black": "900"
+    };
+    STATIC = {
+      // display / box
+      block: "display:block",
+      "inline-block": "display:inline-block",
+      inline: "display:inline",
+      flex: "display:flex",
+      "inline-flex": "display:inline-flex",
+      grid: "display:grid",
+      "inline-grid": "display:inline-grid",
+      hidden: "display:none",
+      contents: "display:contents",
+      invisible: "visibility:hidden",
+      visible: "visibility:visible",
+      "sr-only-x": "",
+      table: "display:table",
+      "table-cell": "display:table-cell",
+      "table-row": "display:table-row",
+      // flex / grid
+      "flex-row": "flex-direction:row",
+      "flex-col": "flex-direction:column",
+      "flex-row-reverse": "flex-direction:row-reverse",
+      "flex-wrap": "flex-wrap:wrap",
+      "flex-nowrap": "flex-wrap:nowrap",
+      "flex-1": "flex:1 1 0%",
+      "flex-auto": "flex:1 1 auto",
+      "flex-initial": "flex:0 1 auto",
+      "flex-none": "flex:none",
+      "flex-shrink-0": "flex-shrink:0",
+      "shrink-0": "flex-shrink:0",
+      grow: "flex-grow:1",
+      "grow-0": "flex-grow:0",
+      "items-center": "align-items:center",
+      "items-start": "align-items:flex-start",
+      "items-end": "align-items:flex-end",
+      "items-stretch": "align-items:stretch",
+      "items-baseline": "align-items:baseline",
+      "justify-center": "justify-content:center",
+      "justify-start": "justify-content:flex-start",
+      "justify-end": "justify-content:flex-end",
+      "justify-between": "justify-content:space-between",
+      "justify-around": "justify-content:space-around",
+      "justify-evenly": "justify-content:space-evenly",
+      "self-center": "align-self:center",
+      "self-start": "align-self:flex-start",
+      "self-end": "align-self:flex-end",
+      "self-stretch": "align-self:stretch",
+      "content-center": "align-content:center",
+      "place-items-center": "place-items:center",
+      "place-content-center": "place-content:center",
+      // position
+      relative: "position:relative",
+      absolute: "position:absolute",
+      fixed: "position:fixed",
+      sticky: "position:sticky",
+      static: "position:static",
+      "inset-0": "inset:0",
+      "inset-x-0": "left:0;right:0",
+      "inset-y-0": "top:0;bottom:0",
+      // sizing shorthands
+      "w-full": "width:100%",
+      "h-full": "height:100%",
+      "w-screen": "width:100vw",
+      "h-screen": "height:100vh",
+      "min-h-screen": "min-height:100vh",
+      "w-fit": "width:fit-content",
+      "h-fit": "height:fit-content",
+      "w-auto": "width:auto",
+      "h-auto": "height:auto",
+      "min-w-0": "min-width:0",
+      "max-w-full": "max-width:100%",
+      "min-h-0": "min-height:0",
+      "size-full": "width:100%;height:100%",
+      // overflow / misc
+      "overflow-hidden": "overflow:hidden",
+      "overflow-auto": "overflow:auto",
+      "overflow-x-auto": "overflow-x:auto",
+      "overflow-y-auto": "overflow-y:auto",
+      "overflow-visible": "overflow:visible",
+      "overflow-x-hidden": "overflow-x:hidden",
+      "overflow-y-hidden": "overflow-y:hidden",
+      truncate: "overflow:hidden;text-overflow:ellipsis;white-space:nowrap",
+      "whitespace-nowrap": "white-space:nowrap",
+      "whitespace-pre": "white-space:pre",
+      "break-words": "overflow-wrap:break-word",
+      "break-all": "word-break:break-all",
+      "select-none": "user-select:none",
+      "select-text": "user-select:text",
+      "pointer-events-none": "pointer-events:none",
+      "pointer-events-auto": "pointer-events:auto",
+      "cursor-pointer": "cursor:pointer",
+      "cursor-default": "cursor:default",
+      "cursor-not-allowed": "cursor:not-allowed",
+      "cursor-text": "cursor:text",
+      // typography
+      "text-left": "text-align:left",
+      "text-center": "text-align:center",
+      "text-right": "text-align:right",
+      "text-justify": "text-align:justify",
+      italic: "font-style:italic",
+      "not-italic": "font-style:normal",
+      underline: "text-decoration-line:underline",
+      "line-through": "text-decoration-line:line-through",
+      "no-underline": "text-decoration-line:none",
+      uppercase: "text-transform:uppercase",
+      lowercase: "text-transform:lowercase",
+      capitalize: "text-transform:capitalize",
+      "normal-case": "text-transform:none",
+      "leading-none": "line-height:1",
+      "leading-tight": "line-height:1.25",
+      "leading-snug": "line-height:1.375",
+      "leading-normal": "line-height:1.5",
+      "leading-relaxed": "line-height:1.625",
+      "leading-loose": "line-height:2",
+      "tracking-tighter": "letter-spacing:-0.05em",
+      "tracking-tight": "letter-spacing:-0.025em",
+      "tracking-normal": "letter-spacing:0",
+      "tracking-wide": "letter-spacing:0.025em",
+      "tracking-wider": "letter-spacing:0.05em",
+      "tracking-widest": "letter-spacing:0.1em",
+      "tabular-nums": "font-variant-numeric:tabular-nums",
+      "antialiased": "-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale",
+      // borders
+      border: "border-width:1px",
+      "border-0": "border-width:0",
+      "border-2": "border-width:2px",
+      "border-t": "border-top-width:1px",
+      "border-r": "border-right-width:1px",
+      "border-b": "border-bottom-width:1px",
+      "border-l": "border-left-width:1px",
+      "border-solid": "border-style:solid",
+      "border-dashed": "border-style:dashed",
+      "border-none": "border-style:none",
+      // effects
+      "shadow-none": "box-shadow:none",
+      "shadow-xs": "box-shadow:var(--shadow-xs, 0 1px 2px 0 oklch(0 0 0 / 0.05))",
+      "shadow-sm": "box-shadow:var(--shadow-sm, 0 1px 3px 0 oklch(0 0 0 / 0.1))",
+      shadow: "box-shadow:var(--shadow, 0 1px 3px 0 oklch(0 0 0 / 0.1))",
+      "shadow-md": "box-shadow:var(--shadow-md, 0 4px 6px -1px oklch(0 0 0 / 0.1))",
+      "shadow-lg": "box-shadow:var(--shadow-lg, 0 10px 15px -3px oklch(0 0 0 / 0.1))",
+      "shadow-xl": "box-shadow:var(--shadow-xl, 0 20px 25px -5px oklch(0 0 0 / 0.1))",
+      "shadow-2xl": "box-shadow:var(--shadow-2xl, 0 25px 50px -12px oklch(0 0 0 / 0.25))",
+      "opacity-0": "opacity:0",
+      "opacity-50": "opacity:0.5",
+      "opacity-100": "opacity:1",
+      "ring-0": "box-shadow:0 0 0 0",
+      "outline-none": "outline:2px solid transparent;outline-offset:2px",
+      // transitions
+      "transition-none": "transition-property:none",
+      transition: "transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-colors": "transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-transform": "transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-opacity": "transition-property:opacity;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "transition-shadow": "transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms",
+      "duration-75": "transition-duration:75ms",
+      "duration-100": "transition-duration:100ms",
+      "duration-150": "transition-duration:150ms",
+      "duration-200": "transition-duration:200ms",
+      "duration-300": "transition-duration:300ms",
+      "duration-500": "transition-duration:500ms",
+      "ease-linear": "transition-timing-function:linear",
+      "ease-in": "transition-timing-function:cubic-bezier(0.4,0,1,1)",
+      "ease-out": "transition-timing-function:cubic-bezier(0,0,0.2,1)",
+      "ease-in-out": "transition-timing-function:cubic-bezier(0.4,0,0.2,1)",
+      // z-index
+      "z-0": "z-index:0",
+      "z-10": "z-index:10",
+      "z-20": "z-index:20",
+      "z-30": "z-index:30",
+      "z-40": "z-index:40",
+      "z-50": "z-index:50",
+      "z-auto": "z-index:auto",
+      // transform-origin
+      "origin-center": "transform-origin:center",
+      "origin-top": "transform-origin:top",
+      "origin-bottom": "transform-origin:bottom",
+      "origin-left": "transform-origin:left",
+      "origin-right": "transform-origin:right",
+      "origin-top-left": "transform-origin:top left",
+      "origin-top-right": "transform-origin:top right",
+      "origin-bottom-left": "transform-origin:bottom left",
+      "origin-bottom-right": "transform-origin:bottom right",
+      "origin-top-center": "transform-origin:top center",
+      // table / misc
+      "border-collapse": "border-collapse:collapse",
+      "border-separate": "border-collapse:separate",
+      "table-auto": "table-layout:auto",
+      "table-fixed": "table-layout:fixed",
+      "align-middle": "vertical-align:middle",
+      "align-top": "vertical-align:top",
+      "align-bottom": "vertical-align:bottom",
+      "align-baseline": "vertical-align:baseline",
+      "list-none": "list-style-type:none",
+      "list-disc": "list-style-type:disc",
+      "list-decimal": "list-style-type:decimal",
+      "appearance-none": "appearance:none",
+      "resize-none": "resize:none",
+      "isolate": "isolation:isolate",
+      "object-cover": "object-fit:cover",
+      "object-contain": "object-fit:contain",
+      "object-center": "object-position:center",
+      "aspect-square": "aspect-ratio:1/1",
+      "aspect-video": "aspect-ratio:16/9",
+      "aspect-auto": "aspect-ratio:auto",
+      "backdrop-blur-sm": "backdrop-filter:blur(4px)",
+      "backdrop-blur": "backdrop-filter:blur(8px)",
+      "backdrop-blur-md": "backdrop-filter:blur(12px)",
+      "backdrop-blur-lg": "backdrop-filter:blur(16px)",
+      "backdrop-blur-xl": "backdrop-filter:blur(24px)",
+      "backdrop-blur-2xl": "backdrop-filter:blur(40px)",
+      "backdrop-blur-3xl": "backdrop-filter:blur(64px)",
+      "backdrop-blur-none": "backdrop-filter:blur(0)",
+      "underline-offset-2": "text-underline-offset:2px",
+      "underline-offset-4": "text-underline-offset:4px",
+      "rounded-xs": "border-radius:var(--radius-xs, 0.125rem)"
+    };
+    ARBITRARY_PROP = {
+      bg: "background",
+      text: "color",
+      w: "width",
+      h: "height",
+      "min-w": "min-width",
+      "max-w": "max-width",
+      "min-h": "min-height",
+      "max-h": "max-height",
+      size: "width",
+      p: "padding",
+      px: "padding-inline",
+      py: "padding-block",
+      pt: "padding-top",
+      pr: "padding-right",
+      pb: "padding-bottom",
+      pl: "padding-left",
+      m: "margin",
+      mx: "margin-inline",
+      my: "margin-block",
+      mt: "margin-top",
+      mr: "margin-right",
+      mb: "margin-bottom",
+      ml: "margin-left",
+      gap: "gap",
+      rounded: "border-radius",
+      shadow: "box-shadow",
+      border: "border-width",
+      top: "top",
+      left: "left",
+      right: "right",
+      bottom: "bottom",
+      inset: "inset",
+      "leading": "line-height",
+      "tracking": "letter-spacing",
+      opacity: "opacity",
+      z: "z-index",
+      grid: "grid-template-columns",
+      "font": "font-size",
+      "aspect": "aspect-ratio",
+      // transition props (transition-[background-color,box-shadow]) + timing
+      transition: "transition-property",
+      duration: "transition-duration",
+      delay: "transition-delay",
+      ease: "transition-timing-function"
+    };
+    MAX_W_SCALE = {
+      xs: "20rem",
+      sm: "24rem",
+      md: "28rem",
+      lg: "32rem",
+      xl: "36rem",
+      "2xl": "42rem",
+      "3xl": "48rem",
+      "4xl": "56rem",
+      "5xl": "64rem",
+      "6xl": "72rem",
+      "7xl": "80rem",
+      prose: "65ch",
+      none: "none"
+    };
+  }
+});
+
 // ../shared/src/mcp/preview-html.ts
 function cssFromRegistryVars(cssVars) {
   const block = (vars) => Object.entries(vars ?? {}).map(([k, v]) => `  --${k.replace(/^--/, "")}: ${v};`).join("\n");
@@ -2168,11 +3592,14 @@ function addFontFamily(families, raw) {
   if (!family || family.startsWith("var(") || SYSTEM_FONT_FAMILIES.has(family.toLowerCase())) return;
   families.add(family);
 }
+function stripComments(source) {
+  return source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/(^|[^:])\/\/[^\n]*/g, "$1");
+}
 function componentRadiusCss(files) {
   const radiusFor = (pattern) => {
     const file = files.find((f) => f.path && pattern.test(f.path));
     if (!file?.content) return null;
-    const m = file.content.match(/rounded(?:-(?:none|sm|md|lg|xl|2xl|3xl|full))?(?=[\s"'])/);
+    const m = stripComments(file.content).match(/rounded(?:-(?:none|sm|md|lg|xl|2xl|3xl|full))?(?=[\s"'])/);
     return m ? RADIUS_CLASS_TO_CSS[m[0]] ?? null : null;
   };
   const rules = [];
@@ -2184,7 +3611,7 @@ function componentRadiusCss(files) {
   if (card) rules.push(`.bd-card, .ds-card { border-radius: ${card}; }`);
   return rules.join("\n");
 }
-function decodeArbitrary(raw) {
+function decodeArbitrary2(raw) {
   const value = raw.replace(/(?<!\\)_/g, " ").replace(/\\_/g, "_").trim();
   return value && !/[<>{};]/.test(value) ? value : null;
 }
@@ -2192,12 +3619,12 @@ function restingValue(scope, cssProp, utilPrefixes) {
   for (const prefix of utilPrefixes) {
     const m = scope.match(new RegExp(`(?<![\\w:.\\-])${prefix}-\\[([^\\]]+)\\]`));
     if (m) {
-      const v = decodeArbitrary(m[1]);
+      const v = decodeArbitrary2(m[1]);
       if (v) return v;
     }
   }
   const pm = scope.match(new RegExp(`(?<!:)\\[${cssProp}:([^\\]]+)\\]`));
-  return pm ? decodeArbitrary(pm[1]) : null;
+  return pm ? decodeArbitrary2(pm[1]) : null;
 }
 function variantBody(content, name) {
   const vi = content.search(/variant\s*:\s*\{/);
@@ -2221,7 +3648,7 @@ function componentDepthCss(files) {
   return rules.join("\n");
 }
 function buildDsComponentCss(files) {
-  const contentOf = (re) => files.find((f) => f.path && re.test(f.path))?.content ?? "";
+  const contentOf = (re) => stripComments(files.find((f) => f.path && re.test(f.path))?.content ?? "");
   const has = (name) => Boolean(contentOf(new RegExp(`(^|/)${name}\\.(tsx|jsx)$`)));
   const arbitrary = (scope, re) => {
     const m = scope.match(re);
@@ -2255,9 +3682,102 @@ function buildDsComponentCss(files) {
     const radius = rm ? RADIUS_CLASS_TO_CSS[rm[0]] : null;
     if (radius) rules.push(`.ds-badge, .ds-badge-primary { border-radius: ${radius}; }`);
   }
+  const field = contentOf(/(^|\/)_shared\.(ts|tsx)$/) || contentOf(/(^|\/)input\.(tsx|jsx)$/);
+  if (field) {
+    covered.add("input");
+    const fieldSel = ".ds-input, .ds-textarea, .ds-select";
+    const rm = field.match(/rounded(?:-(?:none|sm|md|lg|xl|2xl|3xl|full))?(?=[\s"'])/);
+    const radius = rm ? RADIUS_CLASS_TO_CSS[rm[0]] : null;
+    if (radius) rules.push(`${fieldSel} { border-radius: ${radius}; }`);
+    const restShadow = restingValue(field, "box-shadow", ["shadow"]);
+    if (restShadow) rules.push(`${fieldSel} { box-shadow: ${restShadow}; }`);
+    const ringAlpha = field.match(/focus-visible:ring-2\s+(?:focus-visible:)?ring-ring\/(\d{1,2})/);
+    if (ringAlpha) {
+      const rest = restShadow ? `${restShadow}, ` : "";
+      rules.push(
+        `.ds-input:focus, .ds-textarea:focus, .ds-select:focus { outline: none; border-color: var(--ring); box-shadow: ${rest}0 0 0 2px color-mix(in oklab, var(--ring) ${ringAlpha[1]}%, transparent); }`
+      );
+    }
+  }
+  const translated = translatedKitComponentCss(contentOf, covered);
+  if (translated) rules.push(translated);
   const excluded = KIT_INTERACTIVE_EXCLUDED.filter((name) => has(name));
   return { css: rules.filter(Boolean).join("\n"), covered: [...covered].sort(), excluded };
 }
+function quotedStrings(scope) {
+  return [...scope.matchAll(/"([^"]*)"|'([^']*)'/g)].map((m) => m[1] ?? m[2]).join(" ");
+}
+function cvaBase(content) {
+  const i = content.search(/\bcva\s*\(/);
+  if (i === -1) return null;
+  const tail = content.slice(i, content.search(/variants\s*:/) !== -1 ? content.search(/variants\s*:/) : void 0);
+  const s = quotedStrings(tail);
+  return s || null;
+}
+function kitRuleFromClasses(selector, classString) {
+  const buckets = /* @__PURE__ */ new Map();
+  let usesTwVars = false;
+  for (const cls of new Set(classString.split(/\s+/).filter(Boolean))) {
+    const r = translateClass(cls);
+    if (!r || r.media || r.body === "") continue;
+    const esc = `.${escapeClassName(cls)}`;
+    if (!r.selector.startsWith(esc)) continue;
+    const suffix = r.selector.slice(esc.length);
+    if (r.body.includes("--tw-")) usesTwVars = true;
+    const bucket = buckets.get(suffix) ?? [];
+    bucket.push(r.body.replace(/;\s*$/, ""));
+    buckets.set(suffix, bucket);
+  }
+  const css = [...buckets.entries()].map(([suffix, bodies]) => {
+    const sel = selector.split(",").map((s) => `${s.trim()}${suffix}`).join(", ");
+    return `${sel} { ${bodies.join("; ")} }`;
+  }).join("\n");
+  return { css, usesTwVars };
+}
+function translatedKitComponentCss(contentOf, covered) {
+  const out = [];
+  let needsTwDefaults = false;
+  const emit = (selector, classes, component) => {
+    if (!classes) return;
+    const { css, usesTwVars } = kitRuleFromClasses(selector, classes);
+    if (css) {
+      out.push(css);
+      needsTwDefaults ||= usesTwVars;
+      if (component) covered.add(component);
+    }
+  };
+  const badge = contentOf(/(^|\/)badge\.(tsx|jsx)$/);
+  if (badge) {
+    const badgeDefault = variantBody(badge, "default");
+    emit(
+      ".ds-badge",
+      [cvaBase(badge), badgeDefault ? quotedStrings(badgeDefault) : null].filter(Boolean).join(" "),
+      "badge"
+    );
+  }
+  const button = contentOf(/(^|\/)button\.(tsx|jsx)$/);
+  if (button) {
+    emit(".ds-btn", cvaBase(button), "button");
+    emit(".ds-btn-primary", variantBody(button, "primary") ? quotedStrings(variantBody(button, "primary")) : variantBody(button, "default") ? quotedStrings(variantBody(button, "default")) : null);
+    for (const v of ["secondary", "outline", "ghost"]) {
+      const body = variantBody(button, v);
+      if (body) emit(`.ds-btn-${v}`, quotedStrings(body));
+    }
+  }
+  const shared = contentOf(/(^|\/)_shared\.(ts|tsx)$/);
+  const fieldScope = shared.match(/formFieldBase\s*=([\s\S]*?)(?:\nexport |$)/)?.[1] ?? contentOf(/(^|\/)input\.(tsx|jsx)$/);
+  if (fieldScope) {
+    emit(".ds-input, .ds-textarea, .ds-select", quotedStrings(fieldScope), "input");
+  }
+  const card = contentOf(/(^|\/)card\.(tsx|jsx)$/);
+  if (card) {
+    const root = card.match(/cn\(\s*([\s\S]*?)(?:,\s*className|\))/)?.[1];
+    if (root) emit(".ds-card", quotedStrings(root), "card");
+  }
+  if (out.length === 0) return "";
+  return (needsTwDefaults ? `${TW_DEFAULTS}
+` : "") + out.join("\n");
+}
 function extractRadiusScaleCss(rawGlobalsCss) {
   const decls = rawGlobalsCss.match(/--radius-[a-z0-9]+\s*:[^;]+;/g) ?? [];
   return decls.length ? `:root {
@@ -2275,6 +3795,7 @@ var init_preview_html = __esm({
   "../shared/src/mcp/preview-html.ts"() {
     "use strict";
     init_preview_widget_sdk_generated();
+    init_tw_translate();
     init_html_kit();
     SYSTEM_FONT_FAMILIES = /* @__PURE__ */ new Set([
       "arial",
@@ -3047,6 +4568,19 @@ async function fetchCatalog(designSystemId) {
 async function fetchCatalogTokensCss(designSystemId) {
   return (await fetchCatalog(designSystemId)).tokensCss;
 }
+async function fetchBaseVariantNames(designSystemId) {
+  try {
+    const res = await fetch(`${REGISTRY_BASE_URL}/${designSystemId}/index.json`, {
+      signal: AbortSignal.timeout(5e3)
+    });
+    if (!res.ok) return /* @__PURE__ */ new Set();
+    const parsed = DS_INDEX_SCHEMA.safeParse(await res.json());
+    if (!parsed.success) return /* @__PURE__ */ new Set();
+    return new Set((parsed.data.baseComponents ?? []).map((c) => c.name));
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+}
 function registerDesignSystemTools({
   server,
   provider,
@@ -3153,10 +4687,19 @@ full component library available.
 
 Pass 'component' only when the user explicitly asks to inspect or customise a
 specific component's source code. In that mode the tool returns the requested
-components, a scoped install command, and their source code.`,
+components, a scoped install command, and their source code.
+
+Base UI (@base-ui/react) is the default flavor. BEFORE installing, inspect the
+user's project: if package.json has any @radix-ui/* dependency (or
+components/ui already imports @radix-ui), pass 'library: "radix"' to match their
+existing setup; otherwise use the default Base UI. Both flavors install to the
+same components/ui/ paths.
+
+${BUILD_TARGET_RULE}`,
       inputSchema: z4.object({
         designSystemId: z4.string().describe("The design system ID from find-design-system"),
         component: z4.union([z4.string(), z4.array(z4.string())]).optional().describe('Optional. Only pass this when the user asks to inspect specific component source code. Examples: "button", ["button", "card"]. Omit to scaffold the entire design system.'),
+        library: z4.enum(["radix", "base-ui"]).optional().describe('Optional, default "base-ui". Base UI (@base-ui/react) is the default flavor; pass "radix" to force the Radix flavor when the project already uses Radix primitives. If a design system has no Base UI port yet, the tool falls back to Radix with a note.'),
         context: CONTEXT_ARG
       }),
       outputSchema: PREVIEW_OUTPUT_SCHEMA,
@@ -3167,7 +4710,7 @@ components, a scoped install command, and their source code.`,
         "openai/outputTemplate": DS_PREVIEW_WIDGET_URI
       }
     },
-    async ({ designSystemId, component, context }) => tracked("get-design-system-docs", { designSystemId, component, context }, async () => {
+    async ({ designSystemId, component, library, context }) => tracked("get-design-system-docs", { designSystemId, component, library, context }, async () => {
       try {
         const system = await provider.getDesignSystemById(designSystemId);
         if (!system) {
@@ -3195,11 +4738,51 @@ components, a scoped install command, and their source code.`,
         if (metadata.borderRadius) header.push(`**Border Radius:** ${metadata.borderRadius}`);
         if (metadata.font) header.push(`**Font:** ${metadata.font}`);
         header.push(`**Preview (see it live):** ${APP_BASE_URL}/design-systems/${metadata.id}`);
+        const wantsBase = library !== "radix";
+        const baseNames = wantsBase ? await fetchBaseVariantNames(metadata.id) : /* @__PURE__ */ new Set();
+        const baseUnavailableNote = wantsBase && baseNames.size === 0 ? `
+> Note: ${metadata.title} has no Base UI port yet, so the commands below install the Radix components.
+` : "";
+        const toInstallName = (name) => baseNames.has(`${name}-base`) ? `${name}-base` : name;
+        const describeInstall = (installNames) => {
+          const componentInstallNames = installNames.filter((name) => name !== "globals");
+          const baseCount = componentInstallNames.filter((name) => name.endsWith("-base")).length;
+          const plainCount = componentInstallNames.length - baseCount;
+          if (!wantsBase) {
+            return {
+              installLibrary: "radix",
+              installNote: "This installs the Radix flavor (matched to the project's existing Radix primitives)."
+            };
+          }
+          if (baseNames.size === 0) {
+            return {
+              installLibrary: "radix",
+              installNote: "This installs the Radix flavor because this design system has no Base UI port yet."
+            };
+          }
+          if (baseCount > 0 && plainCount > 0) {
+            return {
+              installLibrary: "mixed",
+              installNote: 'This installs the Base UI flavor where available, plus plain registry entries for components without a Base UI twin. If the project uses Radix, re-run this tool with `library: "radix"` instead.'
+            };
+          }
+          if (baseCount > 0) {
+            return {
+              installLibrary: "base-ui",
+              installNote: 'This installs the Base UI flavor (the default). If the project uses Radix, re-run this tool with `library: "radix"` instead.'
+            };
+          }
+          return {
+            installLibrary: "radix",
+            installNote: "This installs plain registry entries because the requested components do not have Base UI twins yet."
+          };
+        };
         if (!component) {
           const installNames = [
             "globals",
-            ...allComponents.map((c) => c.name).sort()
+            ...allComponents.map((c) => toInstallName(c.name)).sort()
           ];
+          const { installLibrary: installLibrary2, installNote: installNote2 } = describeInstall(installNames);
           const installUrls = installNames.map((name) => `${REGISTRY_BASE_URL}/${metadata.id}/${name}.json`).join(" \\\n  ");
           const installCommand2 = `npx shadcn@latest add \\
   ${installUrls}`;
@@ -3207,6 +4790,7 @@ components, a scoped install command, and their source code.`,
           const parts2 = [
             ...header,
             "\n## Scaffold the full design system\n",
+            ...baseUnavailableNote ? [baseUnavailableNote] : [],
             "_This is the React path, the right call whenever you have a filesystem + terminal. Build real components from `components/ui/`. Only fall back to `get-design-system-html` for inline chat canvases (ChatGPT / Claude artifacts) that cannot run a build._\n",
             REQUIREMENTS_MD,
             `Run these commands in the user's project root. The first **conditionally** runs \`shadcn init\` only when the project hasn't been set up yet (no \`components.json\`); the second installs **all ${installNames.length} pieces** (globals.css + ${allComponents.length} components) into \`components/ui/\` with a single shadcn invocation:`,
@@ -3218,6 +4802,8 @@ components, a scoped install command, and their source code.`,
             `# 2. Install Better Design's full DS into components/ui/`,
             installCommand2,
             "```",
+            `
+_${installNote2}_`,
             ANTI_MOCKUP_MD,
             "\nAfter the install completes, read files from `components/ui/` directly when writing feature code. Do not ask this tool for component source unless the user wants to inspect or customise a specific file.",
             "\n## Included components\n",
@@ -3226,7 +4812,12 @@ components, a scoped install command, and their source code.`,
           ];
           return {
             content: [{ type: "text", text: parts2.join("\n") }],
-            structuredContent: { ...previewStructured, installCommand: structuredInstallCommand2 }
+            structuredContent: {
+              ...previewStructured,
+              installCommand: structuredInstallCommand2,
+              installLibrary: installLibrary2,
+              installNote: installNote2
+            }
           };
         }
         const componentNames = Array.isArray(component) ? component : [component];
@@ -3253,13 +4844,16 @@ components, a scoped install command, and their source code.`,
             }
           };
         }
-        const scopedUrls = resolvedNames.map((name) => `${REGISTRY_BASE_URL}/${metadata.id}/${name}.json`).join(" \\\n  ");
+        const scopedInstallNames = resolvedNames.map((name) => toInstallName(name));
+        const { installLibrary, installNote } = describeInstall(scopedInstallNames);
+        const scopedUrls = scopedInstallNames.map((name) => `${REGISTRY_BASE_URL}/${metadata.id}/${name}.json`).join(" \\\n  ");
         const installCommand = `npx shadcn@latest add \\
   ${scopedUrls}`;
         const structuredInstallCommand = installCommandWithInit(installCommand);
         const parts = [
           ...header,
           "\n## Install just these components\n",
+          ...baseUnavailableNote ? [baseUnavailableNote] : [],
           REQUIREMENTS_MD,
           "```bash",
           `# Init shadcn if missing (idempotent, skips when components.json exists)`,
@@ -3267,6 +4861,8 @@ components, a scoped install command, and their source code.`,
           "",
           installCommand,
           "```",
+          `
+_${installNote}_`,
           ANTI_MOCKUP_MD,
           "\n---\n"
         ];
@@ -3282,7 +4878,12 @@ components, a scoped install command, and their source code.`,
         }
         return {
           content: [{ type: "text", text: parts.join("\n") }],
-          structuredContent: { ...previewStructured, installCommand: structuredInstallCommand }
+          structuredContent: {
+            ...previewStructured,
+            installCommand: structuredInstallCommand,
+            installLibrary,
+            installNote
+          }
         };
       } catch (error) {
         return {
@@ -3540,6 +5141,8 @@ Check again in ~30 seconds. Watch it live on the project page: ${projectUrl}` }]
       title: "Get a Design System as HTML/CSS",
       description: `Export a design system as plain, framework-free HTML + CSS for building an app INLINE (ChatGPT canvas / Claude artifact) where npm and a Tailwind build are unavailable. Returns the system's real design tokens (globals.css) plus a token-driven component CSS kit (button, input, card, badge, alert, etc.) and an example to riff on.
 
+The response ends with a usage guide ("How to use"). Follow EVERY rule in it when building: paste the CSS blocks verbatim (never retype them), compose ONLY the \`ds-*\` component classes (custom classes are for layout only), and wire the few lines of JS that make controls actually work. The guide is the contract that keeps the build on-brand; never restyle the components it ships.
+
 Works for BOTH a catalog system (pass \`designSystemId\` from find-design-system) AND a custom system you just generated (pass \`projectId\` from create-design-system / get-design-system-status).
 
 ${BUILD_TARGET_RULE}`,
@@ -3591,7 +5194,9 @@ ${BUILD_TARGET_RULE}`,
         const fence2 = "`".repeat(Math.max(3, longestRun + 1));
         return { content: [{ type: "text", text: `${steer}${intro}${fence2}html
 ${ds.metadata.html}
-${fence2}` }] };
+${fence2}
+
+${HTML_KIT_CONDUCT_MD}` }] };
       }
       const { tokensCss, files } = await fetchCatalog(designSystemId);
       if (!tokensCss) {
@@ -3605,7 +5210,7 @@ ${fence2}` }] };
     })
   );
 }
-var REGISTRY_ITEM_SCHEMA, SHADCN_INIT_IF_MISSING, SAFE_COMPONENT_NAME_RE, CATALOG_KIT_COMPONENTS;
+var REGISTRY_ITEM_SCHEMA, SHADCN_INIT_IF_MISSING, SAFE_COMPONENT_NAME_RE, CATALOG_KIT_COMPONENTS, DS_INDEX_SCHEMA;
 var init_design_system_tools = __esm({
   "../shared/src/mcp/tools/design-system-tools.ts"() {
     "use strict";
@@ -3624,6 +5229,572 @@ var init_design_system_tools = __esm({
     SHADCN_INIT_IF_MISSING = "[ -f components.json ] || npx shadcn@latest init -d -y";
     SAFE_COMPONENT_NAME_RE = /^[a-z0-9][a-z0-9-]*$/i;
     CATALOG_KIT_COMPONENTS = ["button", "input", "card", "badge", "switch"];
+    DS_INDEX_SCHEMA = z4.object({
+      baseComponents: z4.array(z4.object({ name: z4.string() })).optional()
+    });
+  }
+});
+
+// ../shared/src/registry-css.ts
+function parseCssVars(css) {
+  const out = { theme: {}, light: {}, dark: {} };
+  const matchBlock = (selector) => {
+    const re = new RegExp(`${selector}\\s*\\{([^}]*)\\}`, "g");
+    const blocks = [];
+    let m;
+    while (m = re.exec(css)) blocks.push(m[1]);
+    return blocks.join("\n");
+  };
+  const extract = (body) => {
+    const result = {};
+    const clean = body.replace(/\/\*[\s\S]*?\*\//g, "");
+    const declRe = /--([a-zA-Z0-9_-]+)\s*:\s*([^;]+);/g;
+    let m;
+    while (m = declRe.exec(clean)) {
+      result[m[1]] = m[2].replace(/\s+/g, " ").trim();
+    }
+    return result;
+  };
+  out.light = extract(matchBlock(":root"));
+  out.dark = extract(matchBlock("\\.dark"));
+  return out;
+}
+var init_registry_css = __esm({
+  "../shared/src/registry-css.ts"() {
+    "use strict";
+  }
+});
+
+// ../shared/src/mcp/color-to-oklch.ts
+function clamp01(n) {
+  return Math.min(1, Math.max(0, n));
+}
+function round(n, places) {
+  const f = 10 ** places;
+  return Math.round(n * f) / f;
+}
+function parseAlpha(raw) {
+  if (raw == null) return 1;
+  const s = raw.trim();
+  if (s.endsWith("%")) return clamp01(parseFloat(s) / 100);
+  const n = parseFloat(s);
+  return Number.isFinite(n) ? clamp01(n) : 1;
+}
+function parseChannel(raw) {
+  const s = raw.trim();
+  if (s.endsWith("%")) return clamp01(parseFloat(s) / 100);
+  return clamp01(parseFloat(s) / 255);
+}
+function parseHex(hex) {
+  let h = hex.trim().replace(/^#/, "");
+  if (![3, 4, 6, 8].includes(h.length) || /[^0-9a-fA-F]/.test(h)) return null;
+  if (h.length === 3 || h.length === 4) {
+    h = h.split("").map((c) => c + c).join("");
+  }
+  const r = parseInt(h.slice(0, 2), 16) / 255;
+  const g = parseInt(h.slice(2, 4), 16) / 255;
+  const b = parseInt(h.slice(4, 6), 16) / 255;
+  const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
+  return { r, g, b, a };
+}
+function splitColorArgs(inner) {
+  let alpha;
+  let body = inner;
+  const slash = inner.indexOf("/");
+  if (slash !== -1) {
+    alpha = inner.slice(slash + 1);
+    body = inner.slice(0, slash);
+  }
+  const parts = body.trim().split(/[\s,]+/).filter(Boolean);
+  if (alpha === void 0 && parts.length === 4) {
+    alpha = parts.pop();
+  }
+  return { parts, alpha };
+}
+function finiteRgba(rgba) {
+  return [rgba.r, rgba.g, rgba.b, rgba.a].every((n) => Number.isFinite(n)) ? rgba : null;
+}
+function parseRgb(value) {
+  const m = value.match(/^rgba?\(([^)]+)\)$/i);
+  if (!m) return null;
+  const { parts, alpha } = splitColorArgs(m[1]);
+  if (parts.length < 3) return null;
+  return finiteRgba({
+    r: parseChannel(parts[0]),
+    g: parseChannel(parts[1]),
+    b: parseChannel(parts[2]),
+    a: parseAlpha(alpha)
+  });
+}
+function hueToRgb(p, q, t) {
+  let tt = t;
+  if (tt < 0) tt += 1;
+  if (tt > 1) tt -= 1;
+  if (tt < 1 / 6) return p + (q - p) * 6 * tt;
+  if (tt < 1 / 2) return q;
+  if (tt < 2 / 3) return p + (q - p) * (2 / 3 - tt) * 6;
+  return p;
+}
+function parseHue(raw) {
+  const s = raw.trim().toLowerCase();
+  const n = parseFloat(s);
+  if (!Number.isFinite(n)) return NaN;
+  if (s.endsWith("turn")) return n * 360;
+  if (s.endsWith("grad")) return n * 0.9;
+  if (s.endsWith("rad")) return n * (180 / Math.PI);
+  return n;
+}
+function parseHsl(value) {
+  const m = value.match(/^hsla?\(([^)]+)\)$/i);
+  if (!m) return null;
+  const { parts, alpha } = splitColorArgs(m[1]);
+  if (parts.length < 3) return null;
+  const hRaw = parseHue(parts[0]);
+  const sRaw = parseFloat(parts[1]);
+  const lRaw = parseFloat(parts[2]);
+  if (![hRaw, sRaw, lRaw].every((n) => Number.isFinite(n))) return null;
+  const h = (hRaw % 360 + 360) % 360 / 360;
+  const s = clamp01(sRaw / 100);
+  const l = clamp01(lRaw / 100);
+  let r;
+  let g;
+  let b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hueToRgb(p, q, h + 1 / 3);
+    g = hueToRgb(p, q, h);
+    b = hueToRgb(p, q, h - 1 / 3);
+  }
+  return { r, g, b, a: parseAlpha(alpha) };
+}
+function srgbToLinear(c) {
+  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+function rgbaToOklch({ r, g, b, a }) {
+  const lr = srgbToLinear(r);
+  const lg = srgbToLinear(g);
+  const lb = srgbToLinear(b);
+  const l = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb;
+  const m = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb;
+  const s = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb;
+  const l_ = Math.cbrt(l);
+  const m_ = Math.cbrt(m);
+  const s_ = Math.cbrt(s);
+  const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+  const aa = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+  const bb = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+  const C = Math.sqrt(aa * aa + bb * bb);
+  let h = Math.atan2(bb, aa) * 180 / Math.PI;
+  if (h < 0) h += 360;
+  const Lr = round(clamp01(L), 4);
+  const Cr = round(Math.max(0, C), 4);
+  const hr = Cr < 5e-4 ? 0 : round(h, 2);
+  const core = `${Lr} ${Cr} ${hr}`;
+  return a < 1 ? `oklch(${core} / ${round(a, 3)})` : `oklch(${core})`;
+}
+function toOklch(value) {
+  const v = value.trim();
+  if (!v) return null;
+  const lower = v.toLowerCase();
+  if (lower.startsWith("oklch(")) return v;
+  if (lower === "transparent") return "oklch(0 0 0 / 0)";
+  if (PASSTHROUGH_KEYWORDS.has(lower)) return v;
+  if (NON_COLOR_KEYWORDS.has(lower)) return null;
+  const named = NAMED_HEX[lower];
+  if (named) {
+    const rgbaNamed = parseHex(named);
+    if (rgbaNamed) return rgbaToOklch(rgbaNamed);
+  }
+  let rgba = null;
+  if (v.startsWith("#")) rgba = parseHex(v);
+  else if (/^rgba?\(/i.test(v)) rgba = parseRgb(v);
+  else if (/^hsla?\(/i.test(v)) rgba = parseHsl(v);
+  return rgba ? rgbaToOklch(rgba) : null;
+}
+var NAMED_HEX, PASSTHROUGH_KEYWORDS, NON_COLOR_KEYWORDS;
+var init_color_to_oklch = __esm({
+  "../shared/src/mcp/color-to-oklch.ts"() {
+    "use strict";
+    NAMED_HEX = {
+      aliceblue: "#f0f8ff",
+      antiquewhite: "#faebd7",
+      aqua: "#00ffff",
+      aquamarine: "#7fffd4",
+      azure: "#f0ffff",
+      beige: "#f5f5dc",
+      bisque: "#ffe4c4",
+      black: "#000000",
+      blanchedalmond: "#ffebcd",
+      blue: "#0000ff",
+      blueviolet: "#8a2be2",
+      brown: "#a52a2a",
+      burlywood: "#deb887",
+      cadetblue: "#5f9ea0",
+      chartreuse: "#7fff00",
+      chocolate: "#d2691e",
+      coral: "#ff7f50",
+      cornflowerblue: "#6495ed",
+      cornsilk: "#fff8dc",
+      crimson: "#dc143c",
+      cyan: "#00ffff",
+      darkblue: "#00008b",
+      darkcyan: "#008b8b",
+      darkgoldenrod: "#b8860b",
+      darkgray: "#a9a9a9",
+      darkgreen: "#006400",
+      darkgrey: "#a9a9a9",
+      darkkhaki: "#bdb76b",
+      darkmagenta: "#8b008b",
+      darkolivegreen: "#556b2f",
+      darkorange: "#ff8c00",
+      darkorchid: "#9932cc",
+      darkred: "#8b0000",
+      darksalmon: "#e9967a",
+      darkseagreen: "#8fbc8f",
+      darkslateblue: "#483d8b",
+      darkslategray: "#2f4f4f",
+      darkslategrey: "#2f4f4f",
+      darkturquoise: "#00ced1",
+      darkviolet: "#9400d3",
+      deeppink: "#ff1493",
+      deepskyblue: "#00bfff",
+      dimgray: "#696969",
+      dimgrey: "#696969",
+      dodgerblue: "#1e90ff",
+      firebrick: "#b22222",
+      floralwhite: "#fffaf0",
+      forestgreen: "#228b22",
+      fuchsia: "#ff00ff",
+      gainsboro: "#dcdcdc",
+      ghostwhite: "#f8f8ff",
+      gold: "#ffd700",
+      goldenrod: "#daa520",
+      gray: "#808080",
+      green: "#008000",
+      greenyellow: "#adff2f",
+      grey: "#808080",
+      honeydew: "#f0fff0",
+      hotpink: "#ff69b4",
+      indianred: "#cd5c5c",
+      indigo: "#4b0082",
+      ivory: "#fffff0",
+      khaki: "#f0e68c",
+      lavender: "#e6e6fa",
+      lavenderblush: "#fff0f5",
+      lawngreen: "#7cfc00",
+      lemonchiffon: "#fffacd",
+      lightblue: "#add8e6",
+      lightcoral: "#f08080",
+      lightcyan: "#e0ffff",
+      lightgoldenrodyellow: "#fafad2",
+      lightgray: "#d3d3d3",
+      lightgreen: "#90ee90",
+      lightgrey: "#d3d3d3",
+      lightpink: "#ffb6c1",
+      lightsalmon: "#ffa07a",
+      lightseagreen: "#20b2aa",
+      lightskyblue: "#87cefa",
+      lightslategray: "#778899",
+      lightslategrey: "#778899",
+      lightsteelblue: "#b0c4de",
+      lightyellow: "#ffffe0",
+      lime: "#00ff00",
+      limegreen: "#32cd32",
+      linen: "#faf0e6",
+      magenta: "#ff00ff",
+      maroon: "#800000",
+      mediumaquamarine: "#66cdaa",
+      mediumblue: "#0000cd",
+      mediumorchid: "#ba55d3",
+      mediumpurple: "#9370db",
+      mediumseagreen: "#3cb371",
+      mediumslateblue: "#7b68ee",
+      mediumspringgreen: "#00fa9a",
+      mediumturquoise: "#48d1cc",
+      mediumvioletred: "#c71585",
+      midnightblue: "#191970",
+      mintcream: "#f5fffa",
+      mistyrose: "#ffe4e1",
+      moccasin: "#ffe4b5",
+      navajowhite: "#ffdead",
+      navy: "#000080",
+      oldlace: "#fdf5e6",
+      olive: "#808000",
+      olivedrab: "#6b8e23",
+      orange: "#ffa500",
+      orangered: "#ff4500",
+      orchid: "#da70d6",
+      palegoldenrod: "#eee8aa",
+      palegreen: "#98fb98",
+      paleturquoise: "#afeeee",
+      palevioletred: "#db7093",
+      papayawhip: "#ffefd5",
+      peachpuff: "#ffdab9",
+      peru: "#cd853f",
+      pink: "#ffc0cb",
+      plum: "#dda0dd",
+      powderblue: "#b0e0e6",
+      purple: "#800080",
+      rebeccapurple: "#663399",
+      red: "#ff0000",
+      rosybrown: "#bc8f8f",
+      royalblue: "#4169e1",
+      saddlebrown: "#8b4513",
+      salmon: "#fa8072",
+      sandybrown: "#f4a460",
+      seagreen: "#2e8b57",
+      seashell: "#fff5ee",
+      sienna: "#a0522d",
+      silver: "#c0c0c0",
+      skyblue: "#87ceeb",
+      slateblue: "#6a5acd",
+      slategray: "#708090",
+      slategrey: "#708090",
+      snow: "#fffafa",
+      springgreen: "#00ff7f",
+      steelblue: "#4682b4",
+      tan: "#d2b48c",
+      teal: "#008080",
+      thistle: "#d8bfd8",
+      tomato: "#ff6347",
+      turquoise: "#40e0d0",
+      violet: "#ee82ee",
+      wheat: "#f5deb3",
+      white: "#ffffff",
+      whitesmoke: "#f5f5f5",
+      yellow: "#ffff00",
+      yellowgreen: "#9acd32"
+    };
+    PASSTHROUGH_KEYWORDS = /* @__PURE__ */ new Set(["currentcolor"]);
+    NON_COLOR_KEYWORDS = /* @__PURE__ */ new Set(["inherit", "initial", "unset"]);
+  }
+});
+
+// ../shared/src/mcp/extract-design-system.ts
+function classify(name, value) {
+  const n = name.toLowerCase();
+  if (n.includes("shadow")) return "shadow";
+  if (n.includes("font")) return "font";
+  if (n.includes("radius")) return "radius";
+  if (toOklch(value) !== null) return "color";
+  return "other";
+}
+function extractThemeBlock(css) {
+  const out = {};
+  const stripped = css.replace(/\/\*[\s\S]*?\*\//g, "");
+  const re = /@theme[^{]*\{([^}]*)\}/g;
+  let block;
+  while (block = re.exec(stripped)) {
+    const declRe = /--([a-zA-Z0-9_-]+)\s*:\s*([^;}]+);?/g;
+    let m;
+    while (m = declRe.exec(block[1])) {
+      out[m[1]] = m[2].replace(/\s+/g, " ").trim();
+    }
+  }
+  return out;
+}
+function denamespace(name) {
+  return name.replace(/^color-/, "");
+}
+function normalizeMap(raw) {
+  const tokens = {};
+  const kinds = {};
+  for (const [rawName, value] of Object.entries(raw)) {
+    const kind = classify(rawName, value);
+    const normalizedValue = kind === "color" ? toOklch(value) ?? value : value;
+    tokens[rawName] = normalizedValue;
+    kinds[rawName] = kind;
+  }
+  return { tokens, kinds };
+}
+function extractDesignSystem(css, name) {
+  const { light: rootLight, dark: rootDark } = parseCssVars(css);
+  const themeVars = extractThemeBlock(css);
+  const mergedLight = {};
+  for (const [k, v] of Object.entries(themeVars)) {
+    mergedLight[denamespace(k)] = v;
+  }
+  Object.assign(mergedLight, rootLight);
+  const light = normalizeMap(mergedLight);
+  const dark = normalizeMap(rootDark);
+  const hasLight = Object.keys(light.tokens).length > 0;
+  const hasDark = Object.keys(dark.tokens).length > 0;
+  const themeMode = hasLight && hasDark ? "dual" : hasDark ? "dark" : hasLight ? "light" : "none";
+  const primaryKinds = hasLight ? light.kinds : dark.kinds;
+  return {
+    name,
+    themeMode,
+    light: light.tokens,
+    dark: dark.tokens,
+    kinds: primaryKinds,
+    tokenCount: (/* @__PURE__ */ new Set([...Object.keys(light.tokens), ...Object.keys(dark.tokens)])).size
+  };
+}
+function orderedEntries(tokens) {
+  const names = Object.keys(tokens);
+  const rank = (n) => {
+    const i = SEMANTIC_ORDER.indexOf(n);
+    return i === -1 ? SEMANTIC_ORDER.length : i;
+  };
+  return names.sort((a, b) => rank(a) - rank(b) || a.localeCompare(b)).map((n) => [n, tokens[n]]);
+}
+function renderBlock(selector, tokens) {
+  const lines = orderedEntries(tokens).map(([n, v]) => `  --${n}: ${v};`);
+  return `${selector} {
+${lines.join("\n")}
+}`;
+}
+function formatExtraction(result) {
+  if (result.themeMode === "none") {
+    return [
+      "# No design tokens found",
+      "",
+      "Could not find any CSS custom properties (`--name: value;`) in a `:root`, `.dark`, or `@theme` block.",
+      "Paste the contents of the project's `globals.css` (or wherever the design tokens live) as the `css` argument."
+    ].join("\n");
+  }
+  const base = Object.keys(result.light).length > 0 ? result.light : result.dark;
+  const pick = (n) => base[n];
+  const swatch = (label, n) => {
+    const v = pick(n);
+    return v ? `- **${label}** (\`--${n}\`): \`${v}\`` : null;
+  };
+  const palette = [
+    swatch("Primary", "primary"),
+    swatch("Background", "background"),
+    swatch("Foreground", "foreground"),
+    swatch("Accent", "accent"),
+    swatch("Secondary", "secondary"),
+    swatch("Border", "border"),
+    swatch("Ring", "ring"),
+    swatch("Destructive", "destructive")
+  ].filter(Boolean);
+  const radius = pick("radius");
+  const fontSans = pick("font-sans");
+  const fontMono = pick("font-mono");
+  const shadowCount = Object.values(result.kinds).filter((k) => k === "shadow").length;
+  const modeLabel = {
+    light: "single light theme",
+    dark: "single dark theme",
+    dual: "light + dark themes",
+    none: "none"
+  };
+  const meta = [
+    result.name ? `**Source:** ${result.name}` : null,
+    `**Theme:** ${modeLabel[result.themeMode]}`,
+    `**Tokens extracted:** ${result.tokenCount}`,
+    `**Colors normalized to oklch.**`
+  ].filter(Boolean);
+  const blocks = [];
+  if (Object.keys(result.light).length > 0) {
+    blocks.push(renderBlock(":root", result.light));
+  }
+  if (Object.keys(result.dark).length > 0) {
+    blocks.push(renderBlock(".dark", result.dark));
+  }
+  const details = [];
+  if (radius) details.push(`- **Radius:** \`${radius}\``);
+  if (fontSans) details.push(`- **Font (sans):** \`${fontSans}\``);
+  if (fontMono) details.push(`- **Font (mono):** \`${fontMono}\``);
+  if (shadowCount > 0) details.push(`- **Shadow scale:** ${shadowCount} token${shadowCount === 1 ? "" : "s"}`);
+  const sections = [
+    `# Extracted design system${result.name ? `: ${result.name}` : ""}`,
+    meta.join("  \n"),
+    "## Palette\n" + (palette.length ? palette.join("\n") : "_No semantic color tokens recognized; see the full token sheet below._")
+  ];
+  if (details.length) {
+    sections.push("## Type, radius & depth\n" + details.join("\n"));
+  }
+  sections.push(
+    "## Token sheet (oklch-normalized, paste into globals.css)\n\n```css\n" + blocks.join("\n\n") + "\n```",
+    "## How to use\n- Style new components against these tokens (`bg-background`, `text-foreground`, `bg-primary`, `border-border`, `ring-ring`) so they match the existing app.\n- To turn this into a full Better Design system, pass the palette to `create-design-system` as the brand description."
+  );
+  return sections.join("\n\n");
+}
+var SEMANTIC_ORDER;
+var init_extract_design_system = __esm({
+  "../shared/src/mcp/extract-design-system.ts"() {
+    "use strict";
+    init_registry_css();
+    init_color_to_oklch();
+    SEMANTIC_ORDER = [
+      "background",
+      "foreground",
+      "card",
+      "card-foreground",
+      "popover",
+      "popover-foreground",
+      "primary",
+      "primary-foreground",
+      "secondary",
+      "secondary-foreground",
+      "muted",
+      "muted-foreground",
+      "accent",
+      "accent-foreground",
+      "destructive",
+      "destructive-foreground",
+      "border",
+      "input",
+      "ring",
+      "chart-1",
+      "chart-2",
+      "chart-3",
+      "chart-4",
+      "chart-5",
+      "sidebar",
+      "sidebar-foreground",
+      "sidebar-primary",
+      "sidebar-primary-foreground",
+      "sidebar-accent",
+      "sidebar-accent-foreground",
+      "sidebar-border",
+      "sidebar-ring",
+      "radius",
+      "font-sans",
+      "font-serif",
+      "font-mono"
+    ];
+  }
+});
+
+// ../shared/src/mcp/tools/extract-tools.ts
+import { z as z5 } from "zod";
+function registerExtractTools({ server, tracked }) {
+  server.registerTool(
+    "extract-design-system",
+    {
+      title: "Extract Design System From Existing Code",
+      description: `Distill the design tokens out of a project's EXISTING CSS so new components match the app the user already built.
+
+Use this when the user says "match our existing style", "use our design system", "style this like the rest of the app", or you are adding UI to a codebase that already has its own look. This is the inverse of find-design-system / create-design-system: instead of giving the user one of our systems, it reads theirs.
+
+How to use it: read the project's \`globals.css\` (or wherever the design tokens / CSS custom properties live, e.g. a Tailwind v4 \`@theme\` block) and pass its full contents as \`css\`. The MCP server cannot read your filesystem, so you must paste the text.
+
+Returns: the semantic palette (primary, background, foreground, accent, border, ring, etc.), radius, fonts, and shadow scale, plus a pasteable token sheet with every color normalized to \`oklch()\`. Handles hex, rgb()/rgba(), hsl()/hsla(), named colors, and existing oklch values, across \`:root\`, \`.dark\`, and \`@theme\` blocks.`,
+      inputSchema: z5.object({
+        css: z5.string().trim().min(1).max(2e5).describe("Full contents of the project's globals.css (or any CSS holding the design tokens / CSS custom properties)."),
+        name: z5.string().trim().min(1).max(120).optional().describe("Optional label for the extracted system, e.g. the app or repo name."),
+        maxTokens: z5.number().min(500).max(5e4).optional().describe("Maximum tokens to return. Truncates the token sheet to fit.")
+      }),
+      annotations: { readOnlyHint: true }
+    },
+    async ({ css, name, maxTokens }) => tracked("extract-design-system", { name: name ?? null }, async () => {
+      const result = extractDesignSystem(css, name);
+      let text = formatExtraction(result);
+      if (maxTokens) text = truncateToTokens(text, maxTokens);
+      return { content: [{ type: "text", text }] };
+    })
+  );
+}
+var init_extract_tools = __esm({
+  "../shared/src/mcp/tools/extract-tools.ts"() {
+    "use strict";
+    init_shared();
+    init_extract_design_system();
   }
 });
 
@@ -3681,6 +5852,7 @@ function registerAllTools(server, provider, onToolUsage, authContext) {
   registerPrincipleTools(deps);
   registerIconTools(deps);
   registerDesignSystemTools(deps);
+  registerExtractTools(deps);
   registerPreviewResource(deps);
 }
 var init_tools = __esm({
@@ -3690,6 +5862,7 @@ var init_tools = __esm({
     init_principle_tools();
     init_icon_tools();
     init_design_system_tools();
+    init_extract_tools();
     init_preview_resource();
     init_shared();
   }
@@ -3698,6 +5871,7 @@ var init_tools = __esm({
 // ../shared/src/mcp/index.ts
 var mcp_exports = {};
 __export(mcp_exports, {
+  BUILD_TARGET_RULE: () => BUILD_TARGET_RULE,
   INSTRUCTIONS: () => INSTRUCTIONS,
   SEARCH_TOOLS: () => SEARCH_TOOLS,
   createMcpServer: () => createMcpServer
@@ -3725,6 +5899,7 @@ var init_mcp = __esm({
     init_tools();
     init_tools();
     init_instructions();
+    init_shared();
   }
 });
 
@@ -3744,14 +5919,14 @@ __export(api_client_exports, {
   trackToolUsage: () => trackToolUsage
 });
 import { createHash as createHash2 } from "crypto";
-async function request(path4) {
+async function request(path5) {
   if (!API_KEY) {
     throw new ApiError(
       401,
       "BETTER_DESIGN_API_KEY is not set. Run `npx better-design` to create a free key (no account needed), or get one at https://better-design.com/mcp"
     );
   }
-  const res = await fetch(`${API_URL2}/api${path4}`, {
+  const res = await fetch(`${API_URL2}/api${path5}`, {
     headers: {
       Authorization: `Bearer ${API_KEY}`,
       "Content-Type": "application/json"
@@ -3932,6 +6107,68 @@ var init_http_data_provider = __esm({
   }
 });
 
+// src/lib/install-marker.ts
+var install_marker_exports = {};
+__export(install_marker_exports, {
+  isFirstConnect: () => isFirstConnect
+});
+import { closeSync, mkdirSync as mkdirSync2, openSync, writeSync } from "fs";
+import os4 from "os";
+import path4 from "path";
+function slug(clientName) {
+  const base = (clientName ?? "unknown").toLowerCase();
+  const cleaned = base.replace(/[^a-z0-9._-]+/g, "-").replace(/^-+|-+$/g, "");
+  return cleaned || "unknown";
+}
+function isFirstConnect(clientName) {
+  try {
+    mkdirSync2(MARKER_DIR, { recursive: true });
+    const marker = path4.join(MARKER_DIR, slug(clientName));
+    const fd = openSync(marker, "wx", 420);
+    try {
+      writeSync(fd, (/* @__PURE__ */ new Date()).toISOString());
+    } finally {
+      closeSync(fd);
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+var MARKER_DIR;
+var init_install_marker = __esm({
+  "src/lib/install-marker.ts"() {
+    "use strict";
+    MARKER_DIR = path4.join(os4.homedir(), ".better-design", "connected");
+  }
+});
+
+// ../shared/src/mcp-debug-log.ts
+var mcp_debug_log_exports = {};
+__export(mcp_debug_log_exports, {
+  mcpDebugLog: () => mcpDebugLog,
+  mcpDebugLogPath: () => mcpDebugLogPath
+});
+function mcpDebugLogPath() {
+  try {
+    return typeof process !== "undefined" ? process.env?.MCP_DEBUG_LOG : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function mcpDebugLog(entry) {
+  const path5 = mcpDebugLogPath();
+  if (!path5) return Promise.resolve();
+  return import("fs").then((fs) => fs.appendFileSync(path5, `${JSON.stringify(entry)}
+`)).catch(() => {
+  });
+}
+var init_mcp_debug_log = __esm({
+  "../shared/src/mcp-debug-log.ts"() {
+    "use strict";
+  }
+});
+
 // src/index.ts
 var argv = process.argv.slice(2);
 var command = argv[0];
@@ -3952,16 +6189,34 @@ async function startServer() {
   const { createMcpServer: createMcpServer2 } = await Promise.resolve().then(() => (init_mcp(), mcp_exports));
   const { createHttpDataProvider: createHttpDataProvider2 } = await Promise.resolve().then(() => (init_http_data_provider(), http_data_provider_exports));
   const { trackToolUsage: trackToolUsage2, trackMcpInstalled: trackMcpInstalled2 } = await Promise.resolve().then(() => (init_api_client(), api_client_exports));
+  const { isFirstConnect: isFirstConnect2 } = await Promise.resolve().then(() => (init_install_marker(), install_marker_exports));
+  const { mcpDebugLog: mcpDebugLog2 } = await Promise.resolve().then(() => (init_mcp_debug_log(), mcp_debug_log_exports));
   const server = createMcpServer2({
     provider: createHttpDataProvider2(),
     name: "DesignSystems",
     version: "3.0.0",
-    onToolUsage: trackToolUsage2
+    onToolUsage: (tool, params, ctx) => {
+      mcpDebugLog2({
+        ts: (/* @__PURE__ */ new Date()).toISOString(),
+        transport: "stdio",
+        tool,
+        args: params,
+        durationMs: ctx.durationMs ?? null,
+        status: ctx.isError ? "error" : "ok",
+        errorMessage: ctx.errorMessage,
+        outputPreview: ctx.outputPreview ?? null,
+        clientName: ctx.clientName ?? null,
+        clientVersion: ctx.clientVersion ?? null
+      });
+      trackToolUsage2(tool, params, ctx);
+    }
   });
   server.server.oninitialized = () => {
     try {
       const info = server.server.getClientVersion?.();
-      trackMcpInstalled2({ clientName: info?.name, clientVersion: info?.version });
+      if (isFirstConnect2(info?.name)) {
+        trackMcpInstalled2({ clientName: info?.name, clientVersion: info?.version });
+      }
     } catch {
     }
   };