@astralkit/mcp 1.9.0 → 1.10.0

package/dist/data/rules.js

@@ -1,185 +1,185 @@
-export const CODING_STANDARDS = `# AstralKit Coding Standards
-
-## Rule Zero — Library-First Principle
-Before writing ANY UI, call \`search_components\` to check if the library already has it. If a match
-exists: \`install_component\` → import → RE-CONTENT (swap placeholder copy, nav items, logo, sample
-data for the app's real content). Hand-writing a component the library already provides is a failure
-— even if your hand-written version is token-compliant. The library sets the quality bar:
-- 3x–5x type size jumps between headings and body (not subtle increments)
-- Weight pairs: bold (700–800) heroes, semibold (600) titles, medium (500) descriptions
-- Premium effects (\`ak-card-glow\`, \`ak-mesh-*\`, \`ak-material-surface\`) where appropriate
-- 60-30-10 color restraint (60% neutral, 30% secondary, 10% accent)
-- Zero external CSS — every visual property on the element's \`className\`
-If NOTHING fits exactly: start from the CLOSEST recipe and modify it — never from a blank file.
-
-## Setup
-- Package: \`astralkit\` (npm)
-- CSS: \`@import "astralkit/theme"; @import "astralkit/utilities";\` (after Tailwind imports)
-- Tailwind v3 plugin: \`require('astralkit/tailwind.cjs')\` in tailwind.config
-- Tailwind v4: \`@import "astralkit/theme-v4"; @import "astralkit/utilities";\`
-- Icons: \`@phosphor-icons/react\` exclusively. Never Lucide, Heroicons, or inline SVGs.
-- Fonts: Inter (body), DM Serif Display (display), JetBrains Mono (code)
-
-## Token-First Rule
-ALWAYS use \`ak-*\` tokens. NEVER use arbitrary bracket values.
-\`\`\`tsx
-// CORRECT
-<div className="p-ak-3 gap-ak-2 text-ak-base rounded-ak-lg">
-// WRONG — arbitrary values silently collapse in Tailwind v4
-<div className="p-[1.5rem] gap-[1rem] text-[16px] rounded-[0.75rem]">
-\`\`\`
-
-## Semantic Colors — No Raw Tailwind
-\`\`\`tsx
-// CORRECT: bg-ak-surface, text-ak-text, border-ak-border, bg-ak-primary
-// WRONG:   bg-gray-50, text-gray-900, border-gray-200, bg-blue-600
-\`\`\`
-
-## ⚠ The AI Sizing Bias — you have it; counteract it deliberately
-AI coding models systematically undersize text and icons — the training corpus is dominated by dense 12-14px admin UI and shadcn examples where text-sm is "body" and 16px is "icon". The statistical default IS the bug. Countermeasures, in order:
-1. **When uncertain, size UP one step — never down.** Your instinct to shrink is the bias talking.
-2. **Build hierarchy from the TOP down.** Set the largest text first (page title, hero display), then derive downward — body lands at 16px naturally. NEVER create hierarchy by shrinking secondary text below the floor (body 14 → meta 12 → caption 10 is the classic downward spiral).
-3. **Role ladder, not vibes:** hero/display → text-ak-5xl..7xl · page title → text-ak-3xl/4xl semibold · section/card title → text-ak-xl/2xl semibold · body → text-ak-base (16px, THE FLOOR) · secondary/meta → text-ak-sm (14px) medium · text-ak-xs (12px) → tabular data annotations, legal, chart axes ONLY · below 12px → almost never (it has legitimate uses, but they are rare and deliberate — dataviz tick labels, print fine-print).
-4. **Icons: 20-24px for anything meaningful** (nav, list leading icons, section markers); 16px only for inline chevrons and meta glyphs. size={14} or smaller on a standalone icon is a bug.
-5. **Measure, don't trust yourself:** audit_page reports a rendered font-size histogram — any visible text under 12px is an ERROR, 12-13px gets flagged for review. Run it; your eyes-in-code cannot feel size.
-
-## Typography — 16px Floor
-- Body text, descriptions, nav items, table cells: \`text-ak-base\` (16px) minimum
-- UI text: \`font-medium\` minimum — \`font-normal\` is for long-form prose only
-- Labels/badges: \`text-ak-sm\` (14px) or \`text-ak-xs\` (12px uppercase) acceptable
-- Helper/error text: \`text-ak-sm\` (14px) is the only exception
-
-## Spacing — ak-* Tokens Only
-\`\`\`tsx
-// CORRECT: p-ak-3, gap-ak-2, mb-ak-1_5
-// WRONG:   p-6, gap-4, mb-3
-\`\`\`
-
-## Icons — Phosphor Only
-\`\`\`tsx
-import { House, Gear } from '@phosphor-icons/react'
-<House size={20} aria-hidden="true" />
-\`\`\`
-**Size floor:** meaningful icons (nav items, list/row leading icons, section markers, toggles' labels) are **20-24px** — 16px icons beside 16px text read as clutter and fail comfortable-viewing accessibility. 16px is only for dense inline affordances (chevrons inside a button, meta-row glyphs). When an icon anchors a row the user scans, size it 24px.
-
-## No Inline Styles, No External CSS for Styling
-Use Tailwind \`ak-*\` utility classes on the element's \`className\`. \`style={{}}\` only for
-genuinely data-driven values (dynamic chart heights, computed percentages, map coordinates).
-**NEVER write visual styling to CSS files** (globals.css, page.css, component.css, etc.) —
-this includes \`var(--color-ak-*)\`, \`var(--spacing-ak-*)\`, or any other CSS custom property
-reference. If you find yourself writing \`.my-card { background: var(--color-ak-surface) }\`,
-you are doing it wrong — write \`className="bg-ak-surface"\` on the element instead.
-If the source already has external stylesheets with visual rules, EXTRACT the properties,
-convert each to the nearest \`ak-*\` utility class (see the crosswalk in get_design_tokens),
-apply the classes to the JSX elements, DELETE the stylesheet, and remove the import.
-**globals.css is for theme/utilities imports + optional palette overrides only** — never
-for component styling.
-
-## No Shadows on Panels/Dropdowns — Borders Only
-Use \`border border-ak-border\`. Reserve shadows for modals and elevated cards.
-
-## Motion — Framer Motion + CSS + Lenis (GSAP not allowed)
-Framer Motion (the MIT \`motion\` package) IS allowed. Prefer the AstralKit presets from
-\`astralkit/motion\` (tuned to the motion tokens, reduced-motion-safe). CSS animations are
-also fine (durations/easings via \`duration-ak-*\`, \`ease-ak-spring\`/\`bounce\`). Use Lenis for
-smooth scroll. ALWAYS honor \`prefers-reduced-motion\`. **GSAP is NOT allowed** (license).
-\`\`\`tsx
-import { motion, useReducedMotion } from 'motion/react'
-import { fadeInUp, withReducedMotion } from 'astralkit/motion'
-const reduced = useReducedMotion()
-<motion.div initial="hidden" animate="show" variants={withReducedMotion(fadeInUp, reduced)} />
-\`\`\`
-
-## Premium Polish — Use the Effect Toolkit (with taste)
-AstralKit ships CSS-only premium effects — reach for them so screens feel designed, not generic:
-- Depth/glow: \`ak-card-glow\`, \`ak-ambient-glow\`, \`ak-spotlight-card\`, \`ak-gradient-border\`, \`ak-text-glow\`, \`ak-surface-raised\`
-- Backgrounds: \`ak-mesh-light\` / \`ak-mesh-dark\` / \`ak-mesh-astral\` (mesh gradients)
-- Motion accents (CSS): \`ak-float\`, \`ak-scroll-fade\`, \`ak-section-fade\`, \`ak-sheen\`, \`ak-press\` (tap feedback)
-- Color: tasteful accent (60-30-10); colorful charts use \`ak-chart-1\`..\`ak-chart-6\`; curated palettes via \`astralkit/palettes\`
-- Icons: Phosphor \`weight="duotone"\` reads richer for feature/marketing icons
-
-### Effect guardrails (use the RIGHT effect on the RIGHT surface)
-- **Glows need dark surfaces.** \`ak-text-glow\`, \`ak-ambient-glow\`, and \`ak-card-glow\` read correctly as LIGHT-on-DARK. On a light background with dark text they look like a muddy smudge — **do NOT put text-glow on dark text / light backgrounds.**
-- **For dramatic/marketing heroes, go dark.** Add the \`dark\` class to the section root + \`ak-mesh-dark\` (tokens auto-flip to dark), light text, and a gradient accent word. This reads more premium than a light hero.
-- **Gradient text accent** (instead of glow): \`<span className="bg-gradient-to-r from-ak-primary to-ak-info bg-clip-text text-transparent">word</span>\`.
-- Don't stack many effects on one element; one accent treatment per focal point.
-
-## Layout primitives — don't fight responsive display
-\`ak-stack\`, \`ak-cluster\`, \`ak-grid\`, \`ak-switcher\` SET \`display\` (flex/grid) and are unlayered, so they OVERRIDE Tailwind's responsive display utilities (\`md:hidden\`, \`lg:block\`, \`sm:hidden\`). Putting a responsive display toggle on the SAME element silently fails (e.g. a mobile accordion stays visible on desktop):
-\`\`\`tsx
-// WRONG — ak-stack's display:flex beats md:hidden, so it never hides
-<div className="md:hidden ak-stack">…</div>
-// RIGHT — wrap: toggle on the outer element, primitive inside
-<div className="md:hidden"><div className="ak-stack">…</div></div>
-// or use plain flex/grid when you need to toggle visibility
-<div className="md:hidden flex flex-col">…</div>
-\`\`\`
-
-## Breakpoints — collapse where content crushes, not at arbitrary md/lg
-The breakpoint belongs where the content STARTS to crush, which is usually EARLIER than you think. Audit at three widths (1440 / 768 / 390) — 768 is where late-breakpoint bugs live: multi-column grids squeezed to unreadable, toggle columns eating label width, sidebars pinning content into a sliver. If anything is cramped at 768, move the collapse up (\`lg:\` instead of \`md:\`, or a custom \`min-[960px]:\`). On mobile, navigation must become a REAL mobile pattern: hamburger + Radix Dialog side-sheet, or a bottom tab bar (2-3 primary destinations + a "More" trigger opening a Radix Sheet) — a shrunken or vanished desktop nav is a failure.
-
-## Charts — readable AND rendered (recipe)
-Use the colorful \`ak-chart-*\` tokens with solid fills (not faint \`ak-primary\` tints). **Percentage bar heights only resolve if the container has a DEFINITE height** — a common bug is \`min-height\` + \`items-end\`, which collapses the bars to zero. Use this pattern:
-\`\`\`tsx
-{/* DEFINITE height (h-56) + stretched columns so %-height bars resolve */}
-<div className="flex h-56 items-stretch gap-ak-1">
-  {data.map((v, i) => (
-    <div key={i} className="group flex flex-1 flex-col justify-end gap-ak-1">
-      <div
-        className={(i === data.length - 1 ? 'bg-ak-primary' : 'bg-ak-chart-1') + ' w-full rounded-ak-md'}
-        style={{ height: \`\${Math.round((v / max) * 100)}%\` }}  /* sanctioned data-driven inline style */
-        role="img" aria-label={\`\${labels[i]}: \${v}\`}
-      />
-      <span className="text-ak-xs text-ak-text-muted">{labels[i]}</span>
-    </div>
-  ))}
-</div>
-\`\`\`
-
-## Touch Targets — 48px Minimum
-- Buttons: \`min-h-[3rem]\` + \`cursor-pointer\`
-- Form inputs: \`h-14\` (56px)
-
-## Empty States — Every Data Container
-Every list, table, or feed must handle: Loading → Error → Empty → Data.
-Empty states need: icon, title, description, CTA.
-
-## Error Handling — Never Show Raw Errors
-User-facing errors need: title (jargon-free), description, action (Retry/Go Back).
-
-## cn() Utility
-\`\`\`tsx
-import { cn } from '@/lib/utils'
-<div className={cn("p-ak-3", isActive && "bg-ak-primary")}>
-\`\`\`
-
-## Theming Grammar — M3 Role System (60-30-10)
-Every fill must use a ROLE, never resolve "what color is this" yourself:
-- **CTAs + binary on-states** (buttons, checked checkbox, toggle-ON): \`bg-ak-primary text-ak-on-primary hover:bg-ak-primary-hover\` — NEVER \`bg-ak-text\` for interactive fills.
-- **Selection-among-options** (active tab/segment/chip/nav item): \`bg-ak-secondary text-ak-on-secondary\`; subtle selected rows/nav: \`bg-ak-secondary-container text-ak-on-secondary-container\`.
-- **Selected-not-pressed cards**: \`bg-ak-primary-container border-ak-primary\`.
-- **Inverted/dark panels** (terminals, dark rails, dark tooltips, promo cards): \`bg-ak-inverse-surface text-ak-inverse-on-surface\` — NEVER \`bg-ak-text\`, \`bg-ak-neutral-900 text-white\`, or raw \`bg-black\`/hex.
-- **Surfaces**: page canvas \`bg-ak-surface\` → paper cards/inputs \`bg-ak-surface-container-lowest\` (or legacy \`bg-ak-bg\`/\`bg-ak-elevated\`) → wells/tracks \`bg-ak-surface-container\` (\`-high\`/\`-highest\` deeper). Borders: \`border-ak-outline-variant\` (hairline) / \`border-ak-outline\`.
-- **Overlays**: \`bg-ak-scrim\`. **Status**: \`ak-error(-container)\`/\`ak-success\`/\`ak-warning\`/\`ak-info\` + their \`-text\`/\`on-\` partners.
-- Non-interactive emphasis ink pills may keep \`bg-ak-text text-ak-bg\`. Opacity washes (\`bg-ak-text/10\`) stay neutral. Content colors (palette swatches, chart data) are exempt.
-Default theme: primary is black, secondary falls back to primary — monochrome by default, fully colorable by any theme.
-
-## Gotchas — Silent Failures
-These will NOT throw errors. The UI will silently break and you won't know unless you look:
-- **Underscore, not dot** — \`ak-1_5\`, NOT \`ak-1.5\`. Dot notation silently collapses to zero in Tailwind v4. Your spacing/padding will render as 0.
-- **No \`/opacity\` on ak-* tokens** — \`bg-ak-warning/30\` renders transparent, not faded. Use the \`-subtle\` variant (\`bg-ak-warning-subtle\`). The ONLY sanctioned opacity idiom is \`inverse-on-surface/NN\`.
-- **Non-existent ak-* class names render nothing** — no error, no warning, just invisible. Always verify token names exist in the token reference (get_design_tokens).
-- **Portalled overlays escape theme scope** — Radix portals mount outside your \`data-ak-theme\` wrapper. Wrap portalled content in a theme provider or set the attribute on the portal container.
-- **Avatar sizing** — use \`size-ak-avatar-sm\` / \`size-ak-avatar-md\` / \`size-ak-avatar-lg\` ONLY. \`h-ak-avatar-lg\` or \`w-ak-avatar-md\` do NOT exist.
-- **Layout primitives override display** — \`ak-stack\`, \`ak-cluster\`, \`ak-grid\` set display and are unlayered, so they BEAT responsive toggles (\`md:hidden\`) on the same element. Wrap the primitive in a toggler div instead.
-
-## Preflight Gates — validate_code Is Not a Compiler
-\`validate_code\` checks AstralKit conventions. It does NOT catch syntax errors, type errors, or
-runtime bugs. After validate_code passes, you MUST also run:
-1. \`npx tsc --noEmit\` — type-check
-2. \`npm run build\` (or \`next build\`) — full build
-3. Runtime verify — \`next start\` + check the actual URL renders correctly
-4. Visual verify — \`verify_visual\` or \`screenshot_ui\` (premium), or use your own browser tools
-\`npm run dev\` working proves nothing — it skips type-checking and many build errors.
+export const CODING_STANDARDS = `# AstralKit Coding Standards
+
+## Rule Zero — Library-First Principle
+Before writing ANY UI, call \`search_components\` to check if the library already has it. If a match
+exists: \`install_component\` → import → RE-CONTENT (swap placeholder copy, nav items, logo, sample
+data for the app's real content). Hand-writing a component the library already provides is a failure
+— even if your hand-written version is token-compliant. The library sets the quality bar:
+- 3x–5x type size jumps between headings and body (not subtle increments)
+- Weight pairs: bold (700–800) heroes, semibold (600) titles, medium (500) descriptions
+- Premium effects (\`ak-card-glow\`, \`ak-mesh-*\`, \`ak-material-surface\`) where appropriate
+- 60-30-10 color restraint (60% neutral, 30% secondary, 10% accent)
+- Zero external CSS — every visual property on the element's \`className\`
+If NOTHING fits exactly: start from the CLOSEST recipe and modify it — never from a blank file.
+
+## Setup
+- Package: \`astralkit\` (npm)
+- CSS: \`@import "astralkit/theme"; @import "astralkit/utilities";\` (after Tailwind imports)
+- Tailwind v3 plugin: \`require('astralkit/tailwind.cjs')\` in tailwind.config
+- Tailwind v4: \`@import "astralkit/theme-v4"; @import "astralkit/utilities";\`
+- Icons: \`@phosphor-icons/react\` exclusively. Never Lucide, Heroicons, or inline SVGs.
+- Fonts: Inter (body), DM Serif Display (display), JetBrains Mono (code)
+
+## Token-First Rule
+ALWAYS use \`ak-*\` tokens. NEVER use arbitrary bracket values.
+\`\`\`tsx
+// CORRECT
+<div className="p-ak-6 gap-ak-4 text-ak-base rounded-ak-lg">
+// WRONG — arbitrary values silently collapse in Tailwind v4
+<div className="p-[1.5rem] gap-[1rem] text-[16px] rounded-[0.75rem]">
+\`\`\`
+
+## Semantic Colors — No Raw Tailwind
+\`\`\`tsx
+// CORRECT: bg-ak-surface, text-ak-text, border-ak-border, bg-ak-primary
+// WRONG:   bg-gray-50, text-gray-900, border-gray-200, bg-blue-600
+\`\`\`
+
+## ⚠ The AI Sizing Bias — you have it; counteract it deliberately
+AI coding models systematically undersize text and icons — the training corpus is dominated by dense 12-14px admin UI and shadcn examples where text-sm is "body" and 16px is "icon". The statistical default IS the bug. Countermeasures, in order:
+1. **When uncertain, size UP one step — never down.** Your instinct to shrink is the bias talking.
+2. **Build hierarchy from the TOP down.** Set the largest text first (page title, hero display), then derive downward — body lands at 16px naturally. NEVER create hierarchy by shrinking secondary text below the floor (body 14 → meta 12 → caption 10 is the classic downward spiral).
+3. **Role ladder, not vibes:** hero/display → text-ak-5xl..7xl · page title → text-ak-3xl/4xl semibold · section/card title → text-ak-xl/2xl semibold · body → text-ak-base (16px, THE FLOOR) · secondary/meta → text-ak-sm (14px) medium · text-ak-xs (12px) → tabular data annotations, legal, chart axes ONLY · below 12px → almost never (it has legitimate uses, but they are rare and deliberate — dataviz tick labels, print fine-print).
+4. **Icons: 20-24px for anything meaningful** (nav, list leading icons, section markers); 16px only for inline chevrons and meta glyphs. size={14} or smaller on a standalone icon is a bug.
+5. **Measure, don't trust yourself:** audit_page reports a rendered font-size histogram — any visible text under 12px is an ERROR, 12-13px gets flagged for review. Run it; your eyes-in-code cannot feel size.
+
+## Typography — 16px Floor
+- Body text, descriptions, nav items, table cells: \`text-ak-base\` (16px) minimum
+- UI text: \`font-medium\` minimum — \`font-normal\` is for long-form prose only
+- Labels/badges: \`text-ak-sm\` (14px) or \`text-ak-xs\` (12px uppercase) acceptable
+- Helper/error text: \`text-ak-sm\` (14px) is the only exception
+
+## Spacing — ak-* Tokens Only
+\`\`\`tsx
+// CORRECT: p-ak-6, gap-ak-4, mb-ak-3
+// WRONG:   p-6, gap-4, mb-3
+\`\`\`
+
+## Icons — Phosphor Only
+\`\`\`tsx
+import { House, Gear } from '@phosphor-icons/react'
+<House size={20} aria-hidden="true" />
+\`\`\`
+**Size floor:** meaningful icons (nav items, list/row leading icons, section markers, toggles' labels) are **20-24px** — 16px icons beside 16px text read as clutter and fail comfortable-viewing accessibility. 16px is only for dense inline affordances (chevrons inside a button, meta-row glyphs). When an icon anchors a row the user scans, size it 24px.
+
+## No Inline Styles, No External CSS for Styling
+Use Tailwind \`ak-*\` utility classes on the element's \`className\`. \`style={{}}\` only for
+genuinely data-driven values (dynamic chart heights, computed percentages, map coordinates).
+**NEVER write visual styling to CSS files** (globals.css, page.css, component.css, etc.) —
+this includes \`var(--color-ak-*)\`, \`var(--spacing-ak-*)\`, or any other CSS custom property
+reference. If you find yourself writing \`.my-card { background: var(--color-ak-surface) }\`,
+you are doing it wrong — write \`className="bg-ak-surface"\` on the element instead.
+If the source already has external stylesheets with visual rules, EXTRACT the properties,
+convert each to the nearest \`ak-*\` utility class (see the crosswalk in get_design_tokens),
+apply the classes to the JSX elements, DELETE the stylesheet, and remove the import.
+**globals.css is for theme/utilities imports + optional palette overrides only** — never
+for component styling.
+
+## No Shadows on Panels/Dropdowns — Borders Only
+Use \`border border-ak-border\`. Reserve shadows for modals and elevated cards.
+
+## Motion — Framer Motion + CSS + Lenis (GSAP not allowed)
+Framer Motion (the MIT \`motion\` package) IS allowed. Prefer the AstralKit presets from
+\`astralkit/motion\` (tuned to the motion tokens, reduced-motion-safe). CSS animations are
+also fine (durations/easings via \`duration-ak-*\`, \`ease-ak-spring\`/\`bounce\`). Use Lenis for
+smooth scroll. ALWAYS honor \`prefers-reduced-motion\`. **GSAP is NOT allowed** (license).
+\`\`\`tsx
+import { motion, useReducedMotion } from 'motion/react'
+import { fadeInUp, withReducedMotion } from 'astralkit/motion'
+const reduced = useReducedMotion()
+<motion.div initial="hidden" animate="show" variants={withReducedMotion(fadeInUp, reduced)} />
+\`\`\`
+
+## Premium Polish — Use the Effect Toolkit (with taste)
+AstralKit ships CSS-only premium effects — reach for them so screens feel designed, not generic:
+- Depth/glow: \`ak-card-glow\`, \`ak-ambient-glow\`, \`ak-spotlight-card\`, \`ak-gradient-border\`, \`ak-text-glow\`, \`ak-surface-raised\`
+- Backgrounds: \`ak-mesh-light\` / \`ak-mesh-dark\` / \`ak-mesh-astral\` (mesh gradients)
+- Motion accents (CSS): \`ak-float\`, \`ak-scroll-fade\`, \`ak-section-fade\`, \`ak-sheen\`, \`ak-press\` (tap feedback)
+- Color: tasteful accent (60-30-10); colorful charts use \`ak-chart-1\`..\`ak-chart-6\`; curated palettes via \`astralkit/palettes\`
+- Icons: Phosphor \`weight="duotone"\` reads richer for feature/marketing icons
+
+### Effect guardrails (use the RIGHT effect on the RIGHT surface)
+- **Glows need dark surfaces.** \`ak-text-glow\`, \`ak-ambient-glow\`, and \`ak-card-glow\` read correctly as LIGHT-on-DARK. On a light background with dark text they look like a muddy smudge — **do NOT put text-glow on dark text / light backgrounds.**
+- **For dramatic/marketing heroes, go dark.** Add the \`dark\` class to the section root + \`ak-mesh-dark\` (tokens auto-flip to dark), light text, and a gradient accent word. This reads more premium than a light hero.
+- **Gradient text accent** (instead of glow): \`<span className="bg-gradient-to-r from-ak-primary to-ak-info bg-clip-text text-transparent">word</span>\`.
+- Don't stack many effects on one element; one accent treatment per focal point.
+
+## Layout primitives — don't fight responsive display
+\`ak-stack\`, \`ak-cluster\`, \`ak-grid\`, \`ak-switcher\` SET \`display\` (flex/grid) and are unlayered, so they OVERRIDE Tailwind's responsive display utilities (\`md:hidden\`, \`lg:block\`, \`sm:hidden\`). Putting a responsive display toggle on the SAME element silently fails (e.g. a mobile accordion stays visible on desktop):
+\`\`\`tsx
+// WRONG — ak-stack's display:flex beats md:hidden, so it never hides
+<div className="md:hidden ak-stack">…</div>
+// RIGHT — wrap: toggle on the outer element, primitive inside
+<div className="md:hidden"><div className="ak-stack">…</div></div>
+// or use plain flex/grid when you need to toggle visibility
+<div className="md:hidden flex flex-col">…</div>
+\`\`\`
+
+## Breakpoints — collapse where content crushes, not at arbitrary md/lg
+The breakpoint belongs where the content STARTS to crush, which is usually EARLIER than you think. Audit at three widths (1440 / 768 / 390) — 768 is where late-breakpoint bugs live: multi-column grids squeezed to unreadable, toggle columns eating label width, sidebars pinning content into a sliver. If anything is cramped at 768, move the collapse up (\`lg:\` instead of \`md:\`, or a custom \`min-[960px]:\`). On mobile, navigation must become a REAL mobile pattern: hamburger + Radix Dialog side-sheet, or a bottom tab bar (2-3 primary destinations + a "More" trigger opening a Radix Sheet) — a shrunken or vanished desktop nav is a failure.
+
+## Charts — readable AND rendered (recipe)
+Use the colorful \`ak-chart-*\` tokens with solid fills (not faint \`ak-primary\` tints). **Percentage bar heights only resolve if the container has a DEFINITE height** — a common bug is \`min-height\` + \`items-end\`, which collapses the bars to zero. Use this pattern:
+\`\`\`tsx
+{/* DEFINITE height (h-56) + stretched columns so %-height bars resolve */}
+<div className="flex h-56 items-stretch gap-ak-2">
+  {data.map((v, i) => (
+    <div key={i} className="group flex flex-1 flex-col justify-end gap-ak-2">
+      <div
+        className={(i === data.length - 1 ? 'bg-ak-primary' : 'bg-ak-chart-1') + ' w-full rounded-ak-md'}
+        style={{ height: \`\${Math.round((v / max) * 100)}%\` }}  /* sanctioned data-driven inline style */
+        role="img" aria-label={\`\${labels[i]}: \${v}\`}
+      />
+      <span className="text-ak-xs text-ak-text-muted">{labels[i]}</span>
+    </div>
+  ))}
+</div>
+\`\`\`
+
+## Touch Targets — 48px Minimum
+- Buttons: \`min-h-[3rem]\` + \`cursor-pointer\`
+- Form inputs: \`h-14\` (56px)
+
+## Empty States — Every Data Container
+Every list, table, or feed must handle: Loading → Error → Empty → Data.
+Empty states need: icon, title, description, CTA.
+
+## Error Handling — Never Show Raw Errors
+User-facing errors need: title (jargon-free), description, action (Retry/Go Back).
+
+## cn() Utility
+\`\`\`tsx
+import { cn } from '@/lib/utils'
+<div className={cn("p-ak-6", isActive && "bg-ak-primary")}>
+\`\`\`
+
+## Theming Grammar — M3 Role System (60-30-10)
+Every fill must use a ROLE, never resolve "what color is this" yourself:
+- **CTAs + binary on-states** (buttons, checked checkbox, toggle-ON): \`bg-ak-primary text-ak-on-primary hover:bg-ak-primary-hover\` — NEVER \`bg-ak-text\` for interactive fills.
+- **Selection-among-options** (active tab/segment/chip/nav item): \`bg-ak-secondary text-ak-on-secondary\`; subtle selected rows/nav: \`bg-ak-secondary-container text-ak-on-secondary-container\`.
+- **Selected-not-pressed cards**: \`bg-ak-primary-container border-ak-primary\`.
+- **Inverted/dark panels** (terminals, dark rails, dark tooltips, promo cards): \`bg-ak-inverse-surface text-ak-inverse-on-surface\` — NEVER \`bg-ak-text\`, \`bg-ak-neutral-900 text-white\`, or raw \`bg-black\`/hex.
+- **Surfaces**: page canvas \`bg-ak-surface\` → paper cards/inputs \`bg-ak-surface-container-lowest\` (or legacy \`bg-ak-bg\`/\`bg-ak-elevated\`) → wells/tracks \`bg-ak-surface-container\` (\`-high\`/\`-highest\` deeper). Borders: \`border-ak-outline-variant\` (hairline) / \`border-ak-outline\`.
+- **Overlays**: \`bg-ak-scrim\`. **Status**: \`ak-error(-container)\`/\`ak-success\`/\`ak-warning\`/\`ak-info\` + their \`-text\`/\`on-\` partners.
+- Non-interactive emphasis ink pills may keep \`bg-ak-text text-ak-bg\`. Opacity washes (\`bg-ak-text/10\`) stay neutral. Content colors (palette swatches, chart data) are exempt.
+Default theme: primary is black, secondary falls back to primary — monochrome by default, fully colorable by any theme.
+
+## Gotchas — Silent Failures
+These will NOT throw errors. The UI will silently break and you won't know unless you look:
+- **Underscore, not dot** — \`ak-1_5\`, NOT \`ak-1.5\`. Dot notation silently collapses to zero in Tailwind v4. Your spacing/padding will render as 0.
+- **No \`/opacity\` on ak-* tokens** — \`bg-ak-warning/30\` renders transparent, not faded. Use the \`-subtle\` variant (\`bg-ak-warning-subtle\`). The ONLY sanctioned opacity idiom is \`inverse-on-surface/NN\`.
+- **Non-existent ak-* class names render nothing** — no error, no warning, just invisible. Always verify token names exist in the token reference (get_design_tokens).
+- **Portalled overlays escape theme scope** — Radix portals mount outside your \`data-ak-theme\` wrapper. Wrap portalled content in a theme provider or set the attribute on the portal container.
+- **Avatar sizing** — use \`size-ak-avatar-sm\` / \`size-ak-avatar-md\` / \`size-ak-avatar-lg\` ONLY. \`h-ak-avatar-lg\` or \`w-ak-avatar-md\` do NOT exist.
+- **Layout primitives override display** — \`ak-stack\`, \`ak-cluster\`, \`ak-grid\` set display and are unlayered, so they BEAT responsive toggles (\`md:hidden\`) on the same element. Wrap the primitive in a toggler div instead.
+
+## Preflight Gates — validate_code Is Not a Compiler
+\`validate_code\` checks AstralKit conventions. It does NOT catch syntax errors, type errors, or
+runtime bugs. After validate_code passes, you MUST also run:
+1. \`npx tsc --noEmit\` — type-check
+2. \`npm run build\` (or \`next build\`) — full build
+3. Runtime verify — \`next start\` + check the actual URL renders correctly
+4. Visual verify — \`verify_visual\` or \`screenshot_ui\` (premium), or use your own browser tools
+\`npm run dev\` working proves nothing — it skips type-checking and many build errors.
 `;
 //# sourceMappingURL=rules.js.map

package/dist/data/tokens.d.ts

@@ -1,2 +1,2 @@
-export declare const DESIGN_TOKENS = "# AstralKit Design Token Reference\n\n**This is the complete, authoritative list of every `ak-*` design token.**\nThese are the ONLY valid AstralKit tokens. Do NOT invent or guess a token that\nis not listed here \u2014 in Tailwind v4 an undefined utility (e.g. `bg-ak-surface-muted`)\n**silently fails to compile** (no error, the element just renders unstyled).\n\nTailwind v3 vs v4: the token NAMES and VALUES are identical in both. v4 reads them\nfrom `astralkit/theme-v4` (`@theme`) and auto-generates every utility. v3 reads\n`astralkit/theme` (CSS vars) plus the `astralkit/tailwind` plugin, which registers\nthe same utilities. Either way the class names below are what you write.\n\n---\n\n## Colors\nEach color token works with every color utility: `bg-*`, `text-*`, `border-*`, `ring-*`, `fill-*`, `stroke-*`, `from-*`/`to-*`/`via-*`.\nExample: token `ak-surface` \u2192 `bg-ak-surface`, `text-ak-surface`, `border-ak-surface`.\n\n- `ak-neutral-0` \u2014 `#ffffff`\n- `ak-neutral-50` \u2014 `#fafafa`\n- `ak-neutral-100` \u2014 `#f5f5f5`\n- `ak-neutral-200` \u2014 `#e5e5e5`\n- `ak-neutral-300` \u2014 `#d4d4d4`\n- `ak-neutral-400` \u2014 `#a3a3a3`\n- `ak-neutral-500` \u2014 `#737373`\n- `ak-neutral-600` \u2014 `#525252`\n- `ak-neutral-700` \u2014 `#404040`\n- `ak-neutral-800` \u2014 `#262626`\n- `ak-neutral-900` \u2014 `#171717`\n- `ak-neutral-950` \u2014 `#0a0a0a`\n- `ak-primary-50` \u2014 `#f5f5f5`\n- `ak-primary-100` \u2014 `#e5e5e5`\n- `ak-primary-200` \u2014 `#cccccc`\n- `ak-primary-300` \u2014 `#a3a3a3`\n- `ak-primary-400` \u2014 `#737373`\n- `ak-primary-500` \u2014 `#525252`\n- `ak-primary-600` \u2014 `#404040`\n- `ak-primary-700` \u2014 `#333333`\n- `ak-primary-800` \u2014 `#1a1a1a`\n- `ak-primary-900` \u2014 `#000000`\n- `ak-primary-950` \u2014 `#000000`\n- `ak-primary` \u2014 `#000000`\n- `ak-primary-hover` \u2014 `#1a1a1a`\n- `ak-primary-active` \u2014 `#333333`\n- `ak-bg` \u2014 `#ffffff`\n- `ak-surface` \u2014 `#fafafa`\n- `ak-surface-2` \u2014 `#f5f5f5`\n- `ak-hover` \u2014 `#f7f7f7`\n- `ak-active` \u2014 `#f0f0f0`\n- `ak-elevated` \u2014 `#ffffff`\n- `ak-surface-raised` \u2014 `#ffffff`\n- `ak-surface-raised-soft` \u2014 `rgba(255, 255, 255, 0.78)`\n- `ak-surface-glass` \u2014 `rgba(255, 255, 255, 0.72)`\n- `ak-surface-glass-strong` \u2014 `rgba(255, 255, 255, 0.84)`\n- `ak-highlight-soft` \u2014 `rgba(255, 255, 255, 0.45)`\n- `ak-highlight-strong` \u2014 `rgba(255, 255, 255, 0.72)`\n- `ak-skeleton-base` \u2014 `#ededed`\n- `ak-skeleton-shine` \u2014 `rgba(255, 255, 255, 0.72)`\n- `ak-overlay` \u2014 `rgba(0, 0, 0, 0.5)`\n- `ak-on-primary` \u2014 `#ffffff`\n- `ak-primary-subtle` \u2014 `#f5f5f5`\n- `ak-primary-subtle-hover` \u2014 `#e5e5e5`\n- `ak-text` \u2014 `#171717`\n- `ak-text-emphasis` \u2014 `#2b2b2b`\n- `ak-text-secondary` \u2014 `#525252`\n- `ak-text-muted` \u2014 `#a3a3a3`\n- `ak-text-disabled` \u2014 `#d4d4d4`\n- `ak-text-inverse` \u2014 `#ffffff`\n- `ak-text-link` \u2014 `#000000`\n- `ak-text-placeholder` \u2014 `#525252`\n- `ak-border` \u2014 `#dee2e6`\n- `ak-border-subtle` \u2014 `#e5e5e5`\n- `ak-border-strong` \u2014 `#525252`\n- `ak-border-focus` \u2014 `#000000`\n- `ak-success` \u2014 `#16a34a`\n- `ak-success-subtle` \u2014 `#f0fdf4`\n- `ak-success-text` \u2014 `#15803d`\n- `ak-warning` \u2014 `#d97706`\n- `ak-warning-subtle` \u2014 `#fffbeb`\n- `ak-warning-text` \u2014 `#b45309`\n- `ak-danger` \u2014 `#dc2626`\n- `ak-danger-subtle` \u2014 `#fef2f2`\n- `ak-danger-text` \u2014 `#b91c1c`\n- `ak-info` \u2014 `#2563eb`\n- `ak-info-subtle` \u2014 `#eff6ff`\n- `ak-pink` \u2014 `#db2777`\n- `ak-pink-subtle` \u2014 `#fdf2f8`\n- `ak-info-text` \u2014 `#1d4ed8`\n- `ak-sheet-handle` \u2014 `#d4d4d4`\n- `ak-brutal-ink` \u2014 `#000000`\n- `ak-brutal-face` \u2014 `#ffffff`\n- `ak-brutal-face-dark` \u2014 `#262626`\n- `ak-brutal-on-face` \u2014 `#000000`\n- `ak-brutal-on-face-dark` \u2014 `#ffffff`\n- `ak-chart-1` \u2014 `#4e79a7`\n- `ak-chart-2` \u2014 `#f28e2c`\n- `ak-chart-3` \u2014 `#e15759`\n- `ak-chart-4` \u2014 `#76b7b2`\n- `ak-chart-5` \u2014 `#59a14f`\n- `ak-chart-6` \u2014 `#edc949`\n\n## Fonts\n`font-*` utilities.\n\n- `font-ak-sans` \u2014 'Inter', system-ui, -apple-system, sans-serif\n- `font-ak-serif` \u2014 'DM Serif Display', Georgia, serif\n- `font-ak-mono` \u2014 'JetBrains Mono', 'Fira Code', ui-monospace, monospace\n\n## Font Size (text scale)\n`text-*` utilities. Includes static, `_5` half-steps, fluid (`fl-*`), display, watermark, avatar, and badge sizes.\n\n- `text-ak-2xs` \u2014 `0.6875rem`\n- `text-ak-xs` \u2014 `0.75rem`\n- `text-ak-xs_5` \u2014 `0.8125rem`\n- `text-ak-sm` \u2014 `0.875rem`\n- `text-ak-sm_5` \u2014 `0.9375rem`\n- `text-ak-base` \u2014 `1rem`\n- `text-ak-lg` \u2014 `1.125rem`\n- `text-ak-xl` \u2014 `1.25rem`\n- `text-ak-xl_5` \u2014 `1.375rem`\n- `text-ak-2xl` \u2014 `1.5rem`\n- `text-ak-2xl_5` \u2014 `1.625rem`\n- `text-ak-3xl` \u2014 `2rem`\n- `text-ak-4xl` \u2014 `2.5rem`\n- `text-ak-4xl_5` \u2014 `2.75rem`\n- `text-ak-5xl` \u2014 `3rem`\n- `text-ak-6xl` \u2014 `3.75rem`\n- `text-ak-6xl_5` \u2014 `4rem`\n- `text-ak-7xl` \u2014 `4.5rem`\n- `text-ak-7xl_5` \u2014 `5.25rem`\n- `text-ak-8xl` \u2014 `6rem`\n- `text-ak-9xl` \u2014 `7rem`\n- `text-ak-10xl` \u2014 `8rem`\n- `text-ak-fl-xs` \u2014 `clamp(0.6875rem, 0.67rem  + 0.06vw, 0.75rem)`\n- `text-ak-fl-sm` \u2014 `clamp(0.75rem,   0.71rem  + 0.12vw, 0.875rem)`\n- `text-ak-fl-base` \u2014 `clamp(0.875rem,  0.84rem  + 0.12vw, 1rem)`\n- `text-ak-fl-lg` \u2014 `clamp(1rem,      0.96rem  + 0.12vw, 1.125rem)`\n- `text-ak-fl-xl` \u2014 `clamp(1.125rem,  1.09rem  + 0.12vw, 1.25rem)`\n- `text-ak-fl-2xl` \u2014 `clamp(1.25rem,   1.18rem  + 0.23vw, 1.5rem)`\n- `text-ak-fl-3xl` \u2014 `clamp(1.5rem,    1.39rem  + 0.35vw, 1.875rem)`\n- `text-ak-fl-4xl` \u2014 `clamp(1.875rem,  1.76rem  + 0.35vw, 2.25rem)`\n- `text-ak-fl-5xl` \u2014 `clamp(2.25rem,   2.03rem  + 0.69vw, 3rem)`\n- `text-ak-fl-6xl` \u2014 `clamp(3rem,      2.78rem  + 0.69vw, 3.75rem)`\n- `text-ak-fl-7xl` \u2014 `clamp(3.5rem,    3.2rem   + 0.93vw, 4.5rem)`\n- `text-ak-fl-8xl` \u2014 `clamp(4.5rem,    4.06rem  + 1.39vw, 6rem)`\n- `text-ak-fl-9xl` \u2014 `clamp(5.25rem,   4.73rem  + 1.62vw, 7rem)`\n- `text-ak-display-xs` \u2014 `clamp(0.75rem,   0.7rem  + 0.15vw, 0.875rem)`\n- `text-ak-display-sm` \u2014 `clamp(0.875rem,  0.83rem + 0.19vw, 1rem)`\n- `text-ak-display-base` \u2014 `clamp(1rem,      0.94rem + 0.28vw, 1.1875rem)`\n- `text-ak-display-lg` \u2014 `clamp(1.125rem,  1.01rem + 0.52vw, 1.5rem)`\n- `text-ak-display-xl` \u2014 `clamp(1.25rem,   1.07rem + 0.83vw, 1.875rem)`\n- `text-ak-display-2xl` \u2014 `clamp(1.5rem,    1.2rem  + 1.11vw, 2.25rem)`\n- `text-ak-display-3xl` \u2014 `clamp(1.875rem,  1.42rem + 1.67vw, 3rem)`\n- `text-ak-display-4xl` \u2014 `clamp(2.25rem,   1.58rem + 2.5vw,  3.75rem)`\n- `text-ak-display-5xl` \u2014 `clamp(3rem,      2.07rem + 3.47vw, 5.25rem)`\n- `text-ak-display-6xl` \u2014 `clamp(3.75rem,   2.5rem  + 4.63vw, 7rem)`\n- `text-ak-display-7xl` \u2014 `clamp(4.5rem,    3.06rem + 5.56vw, 8rem)`\n- `text-ak-display-8xl` \u2014 `clamp(5rem,      3.06rem + 6.94vw, 9rem)`\n- `text-ak-display-9xl` \u2014 `clamp(5.5rem,    3.06rem + 7.64vw, 10rem)`\n- `text-ak-watermark-2xs` \u2014 `clamp(1rem, 13cqi, 13rem)`\n- `text-ak-watermark-xs` \u2014 `clamp(1rem, 16cqi, 16rem)`\n- `text-ak-watermark-sm` \u2014 `clamp(1rem, 19cqi, 20rem)`\n- `text-ak-watermark-base` \u2014 `clamp(1rem, 21cqi, 22rem)`\n- `text-ak-watermark-md` \u2014 `clamp(1rem, 24cqi, 26rem)`\n- `text-ak-watermark-lg` \u2014 `clamp(1rem, 26cqi, 28rem)`\n- `text-ak-watermark-xl` \u2014 `clamp(1rem, 28cqi, 30rem)`\n- `text-ak-watermark-2xl` \u2014 `clamp(1rem, 30cqi, 34rem)`\n- `text-ak-watermark-3xl` \u2014 `clamp(1rem, 33cqi, 38rem)`\n- `text-ak-watermark-4xl` \u2014 `clamp(1rem, 36cqi, 42rem)`\n- `text-ak-watermark-5xl` \u2014 `clamp(1rem, 40cqi, 48rem)`\n- `text-ak-avatar-xs` \u2014 `0.625rem`\n- `text-ak-avatar-sm` \u2014 `0.6875rem`\n- `text-ak-avatar-md` \u2014 `0.8125rem`\n- `text-ak-avatar-lg` \u2014 `1rem`\n- `text-ak-avatar-xl` \u2014 `1.25rem`\n- `text-ak-avatar-2xl` \u2014 `1.75rem`\n- `text-ak-avatar-3xl` \u2014 `2.25rem`\n- `text-ak-badge-md` \u2014 `0.625rem`\n- `text-ak-badge-lg` \u2014 `0.6875rem`\n- `text-ak-badge-xl` \u2014 `0.8125rem`\n- `text-ak-badge-2xl` \u2014 `0.9375rem`\n- `text-ak-badge-3xl` \u2014 `1.125rem`\n\n## Line Height\n`leading-*` utilities.\n\n- `leading-ak-display` \u2014 `0.85`\n- `leading-ak-squeezed` \u2014 `0.92`\n- `leading-ak-condensed` \u2014 `0.95`\n- `leading-ak-none` \u2014 `1`\n- `leading-ak-fitted` \u2014 `1.02`\n- `leading-ak-compact` \u2014 `1.05`\n- `leading-ak-tighter` \u2014 `1.1`\n- `leading-ak-snugger` \u2014 `1.2`\n- `leading-ak-tight` \u2014 `1.25`\n- `leading-ak-snug` \u2014 `1.375`\n- `leading-ak-normal` \u2014 `1.5`\n- `leading-ak-relaxed` \u2014 `1.625`\n- `leading-ak-prose` \u2014 `1.75`\n- `leading-ak-loose` \u2014 `2`\n\n## Letter Spacing\n`tracking-*` utilities.\n\n- `tracking-ak-tighter` \u2014 `-0.05em`\n- `tracking-ak-tight` \u2014 `-0.025em`\n- `tracking-ak-subtle` \u2014 `-0.01em`\n- `tracking-ak-normal` \u2014 `0em`\n- `tracking-ak-wide` \u2014 `0.025em`\n- `tracking-ak-section` \u2014 `0.08em`\n- `tracking-ak-wider` \u2014 `0.05em`\n- `tracking-ak-widest` \u2014 `0.1em`\n\n## Spacing\nFeeds every spacing utility: `p-* px-* py-* pt/pr/pb/pl-* m-* mx-* my-* gap-* gap-x/y-* space-x/y-* w-* h-* min-w-* min-h-* max-w-* inset-* top/right/bottom/left-*`.\nExample: token `ak-3` \u2192 `p-ak-3`, `gap-ak-3`, `mt-ak-3`.\n\n- `ak-0` \u2014 `0rem`\n- `ak-px` \u2014 `0.0625rem`\n- `ak-0_5` \u2014 `0.25rem`\n- `ak-0_75` \u2014 `0.375rem`\n- `ak-1` \u2014 `0.5rem`\n- `ak-1_25` \u2014 `0.625rem`\n- `ak-1_5` \u2014 `0.75rem`\n- `ak-2` \u2014 `1rem`\n- `ak-2_5` \u2014 `1.25rem`\n- `ak-3` \u2014 `1.5rem`\n- `ak-3_5` \u2014 `1.75rem`\n- `ak-4` \u2014 `2rem`\n- `ak-4_5` \u2014 `2.25rem`\n- `ak-5` \u2014 `2.5rem`\n- `ak-5_5` \u2014 `2.75rem`\n- `ak-6` \u2014 `3rem`\n- `ak-7` \u2014 `3.5rem`\n- `ak-8` \u2014 `4rem`\n- `ak-9` \u2014 `4.5rem`\n- `ak-10` \u2014 `5rem`\n- `ak-11` \u2014 `5.5rem`\n- `ak-12` \u2014 `6rem`\n- `ak-14` \u2014 `7rem`\n- `ak-16` \u2014 `8rem`\n- `ak-20` \u2014 `10rem`\n- `ak-24` \u2014 `12rem`\n- `ak-mobile-bar` \u2014 `4.5rem`\n- `ak-fl-page-margin` \u2014 `clamp(1rem, 0.26rem + 3.7vw, 5rem)`\n- `ak-fl-3xs` \u2014 `clamp(0.25rem,  0.21rem + 0.14vw, 0.375rem)`\n- `ak-fl-2xs` \u2014 `clamp(0.5rem,   0.43rem + 0.28vw, 0.75rem)`\n- `ak-fl-xs` \u2014 `clamp(0.75rem,  0.65rem + 0.42vw, 1rem)`\n- `ak-fl-sm` \u2014 `clamp(1rem,     0.86rem + 0.56vw, 1.5rem)`\n- `ak-fl-md` \u2014 `clamp(1.5rem,   1.29rem + 0.83vw, 2rem)`\n- `ak-fl-lg` \u2014 `clamp(2rem,     1.72rem + 1.11vw, 3rem)`\n- `ak-fl-xl` \u2014 `clamp(3rem,     2.5rem  + 1.85vw, 4.5rem)`\n- `ak-fl-2xl` \u2014 `clamp(4rem,     3.22rem + 2.78vw, 6rem)`\n- `ak-fl-3xl` \u2014 `clamp(6rem,     4.86rem + 4.17vw, 9rem)`\n- `ak-fl-xs-md` \u2014 `clamp(0.75rem,  0.43rem + 1.39vw, 2rem)`\n- `ak-fl-xs-lg` \u2014 `clamp(0.75rem,  0.14rem + 2.78vw, 3rem)`\n- `ak-fl-sm-lg` \u2014 `clamp(1rem,     0.43rem + 2.78vw, 3rem)`\n- `ak-fl-sm-xl` \u2014 `clamp(1rem,     0rem    + 4.17vw, 4.5rem)`\n- `ak-fl-md-xl` \u2014 `clamp(1.5rem,   0.57rem + 3.47vw, 4.5rem)`\n- `ak-fl-md-2xl` \u2014 `clamp(1.5rem,   0rem    + 5.56vw, 6rem)`\n- `ak-fl-lg-2xl` \u2014 `clamp(2rem,     0.57rem + 5.56vw, 6rem)`\n- `ak-fl-xl-3xl` \u2014 `clamp(3rem,     0.57rem + 8.33vw, 9rem)`\n\n## Border Radius\n`rounded-*` utilities.\n\n- `rounded-ak-xs` \u2014 `0.125rem`\n- `rounded-ak-none` \u2014 `0`\n- `rounded-ak-sm` \u2014 `0.25rem`\n- `rounded-ak-md` \u2014 `0.5rem`\n- `rounded-ak-lg` \u2014 `0.75rem`\n- `rounded-ak-xl` \u2014 `1rem`\n- `rounded-ak-2xl` \u2014 `1.5rem`\n- `rounded-ak-3xl` \u2014 `2rem`\n- `rounded-ak-full` \u2014 `9999px`\n- `rounded-ak-brutal` \u2014 `0.5rem`\n- `rounded-ak-brutal-sm` \u2014 `0.25rem`\n- `rounded-ak-input` \u2014 `0.625rem`\n\n## Border Width\n`border-*` utilities (width).\n\n- `border-ak-brutal` \u2014 `2px`\n- `border-ak-brutal-lg` \u2014 `3px`\n\n## Box Shadow\n`shadow-*` utilities (includes focus rings and neobrutalist shadows).\n\n- `shadow-ak-xs` \u2014 `0 1px 2px rgba(0,0,0,0.04)`\n- `shadow-ak-sm` \u2014 `0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)`\n- `shadow-ak-md` \u2014 `0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04)`\n- `shadow-ak-lg` \u2014 `0 8px 30px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)`\n- `shadow-ak-xl` \u2014 `0 16px 50px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05)`\n- `shadow-ak-2xl` \u2014 `0 24px 60px rgba(0,0,0,0.14)`\n- `shadow-ak-brutal-xs` \u2014 `2px 2px 0 0 var(--color-ak-brutal-ink)`\n- `shadow-ak-brutal-sm` \u2014 `3px 3px 0 0 var(--color-ak-brutal-ink)`\n- `shadow-ak-brutal` \u2014 `4px 4px 0 0 var(--color-ak-brutal-ink)`\n- `shadow-ak-brutal-lg` \u2014 `6px 6px 0 0 var(--color-ak-brutal-ink)`\n- `shadow-ak-brutal-xl` \u2014 `8px 8px 0 0 var(--color-ak-brutal-ink)`\n- `shadow-ak-focus` \u2014 `0 0 0 3px rgba(0, 0, 0, 0.08)`\n- `shadow-ak-focus-primary` \u2014 `0 0 0 3px rgba(0, 0, 0, 0.15)`\n- `shadow-ak-focus-danger` \u2014 `0 0 0 3px rgba(220, 38, 38, 0.08)`\n- `shadow-ak-focus-success` \u2014 `0 0 0 3px rgba(22, 163, 74, 0.08)`\n\n## Max Width (containers)\n`max-w-*` utilities.\n\n- `max-w-ak-page` \u2014 `80rem`\n- `max-w-ak-xs` \u2014 `20rem`\n- `max-w-ak-sm` \u2014 `24rem`\n- `max-w-ak-md` \u2014 `28rem`\n- `max-w-ak-lg` \u2014 `32rem`\n- `max-w-ak-xl` \u2014 `36rem`\n- `max-w-ak-2xl` \u2014 `42rem`\n- `max-w-ak-3xl` \u2014 `48rem`\n- `max-w-ak-4xl` \u2014 `56rem`\n- `max-w-ak-prose` \u2014 `65ch`\n\n## Z-Index\n`z-*` utilities.\n\n- `z-ak-base` \u2014 `0`\n- `z-ak-docked` \u2014 `10`\n- `z-ak-dropdown` \u2014 `1000`\n- `z-ak-sticky` \u2014 `1100`\n- `z-ak-banner` \u2014 `1200`\n- `z-ak-overlay` \u2014 `1300`\n- `z-ak-modal` \u2014 `1400`\n- `z-ak-popover` \u2014 `1500`\n- `z-ak-toast` \u2014 `1700`\n- `z-ak-tooltip` \u2014 `1800`\n\n## Transition Duration\n`duration-*` utilities.\n\n- `duration-ak-fast` \u2014 `110ms`\n- `duration-ak-base` \u2014 `150ms`\n- `duration-ak-slow` \u2014 `240ms`\n- `duration-ak-skeleton` \u2014 `1800ms`\n\n## Transition Timing (easing)\n`ease-*` utilities.\n\n- `ease-ak-default` \u2014 `cubic-bezier(0.4, 0, 0.2, 1)`\n- `ease-ak-in` \u2014 `cubic-bezier(0.4, 0, 1, 1)`\n- `ease-ak-out` \u2014 `cubic-bezier(0, 0, 0.2, 1)`\n- `ease-ak-spring` \u2014 `cubic-bezier(0.34, 1.56, 0.64, 1)`\n- `ease-ak-bounce` \u2014 `cubic-bezier(0.25, 1, 0.5, 1)`\n\n## Heights\n`h-*` and `min-h-*` utilities (named, beyond the spacing scale).\n\n- `h-ak-nav` / `min-h-ak-nav` \u2014 `4.5rem`\n- `h-ak-touch` / `min-h-ak-touch` \u2014 `2.5rem`\n- `h-ak-control-sm` / `min-h-ak-control-sm` \u2014 `2rem`\n- `h-ak-control-md` / `min-h-ak-control-md` \u2014 `2.5rem`\n- `h-ak-control-lg` / `min-h-ak-control-lg` \u2014 `3rem`\n- `h-ak-control-xl` / `min-h-ak-control-xl` \u2014 `3.5rem`\n- `h-ak-control-2xl` / `min-h-ak-control-2xl` \u2014 `4rem`\n- `h-ak-row-compact` / `min-h-ak-row-compact` \u2014 `2.5rem`\n- `h-ak-row-default` / `min-h-ak-row-default` \u2014 `3rem`\n- `h-ak-row-comfortable` / `min-h-ak-row-comfortable` \u2014 `3.25rem`\n\n## Widths\n`w-*` and `min-w-*` utilities (named, beyond the spacing scale).\n\n- `w-ak-touch` \u2014 `2.5rem`\n- `w-ak-sidebar-collapsed` \u2014 `5rem`\n- `w-ak-sidebar-expanded` \u2014 `18rem`\n\n## Size (width + height shorthand)\n`size-*` utilities (sets width AND height \u2014 icons, avatars, status dots, badges).\n\n- `size-ak-sheet-handle-width` \u2014 `2.25rem`\n- `size-ak-sheet-handle-height` \u2014 `0.25rem`\n- `size-ak-icon-xs` \u2014 `0.75rem`\n- `size-ak-icon-sm` \u2014 `1rem`\n- `size-ak-icon-md` \u2014 `1.25rem`\n- `size-ak-icon-lg` \u2014 `1.5rem`\n- `size-ak-icon-xl` \u2014 `1.75rem`\n- `size-ak-icon-2xl` \u2014 `2rem`\n- `size-ak-icon-3xl` \u2014 `3rem`\n- `size-ak-panel-width` \u2014 `260px`\n- `size-ak-avatar-xs` \u2014 `1.5rem`\n- `size-ak-avatar-sm` \u2014 `2rem`\n- `size-ak-avatar-md` \u2014 `2.5rem`\n- `size-ak-avatar-lg` \u2014 `3rem`\n- `size-ak-avatar-xl` \u2014 `4rem`\n- `size-ak-avatar-2xl` \u2014 `6rem`\n- `size-ak-avatar-3xl` \u2014 `8rem`\n- `size-ak-status-md` \u2014 `12px`\n- `size-ak-status-lg` \u2014 `14px`\n- `size-ak-status-xl` \u2014 `20px`\n- `size-ak-status-2xl` \u2014 `28px`\n- `size-ak-status-3xl` \u2014 `36px`\n- `size-ak-badge-md` \u2014 `18px`\n- `size-ak-badge-lg` \u2014 `20px`\n- `size-ak-badge-xl` \u2014 `24px`\n- `size-ak-badge-2xl` \u2014 `32px`\n- `size-ak-badge-3xl` \u2014 `40px`\n- `size-ak-badge-border-md` \u2014 `2px`\n- `size-ak-badge-border-lg` \u2014 `2px`\n- `size-ak-badge-border-xl` \u2014 `3px`\n- `size-ak-badge-border-2xl` \u2014 `3.5px`\n- `size-ak-badge-border-3xl` \u2014 `4px`\n- `size-ak-icon-badge-md` \u2014 `22px`\n- `size-ak-icon-badge-lg` \u2014 `24px`\n- `size-ak-icon-badge-xl` \u2014 `28px`\n- `size-ak-icon-badge-2xl` \u2014 `34px`\n- `size-ak-icon-badge-3xl` \u2014 `40px`\n- `size-ak-control-sm` \u2014 `2rem`\n- `size-ak-control-md` \u2014 `2.5rem`\n- `size-ak-control-lg` \u2014 `3rem`\n- `size-ak-touch-min` \u2014 `3rem`\n\n---\n\n## Common Patterns\n```tsx\n// Card\n<div className=\"border border-ak-border rounded-ak-lg p-ak-3 bg-ak-surface\">\n\n// Primary button (48px min touch target)\n<button className=\"bg-ak-primary text-ak-on-primary px-ak-2_5 py-ak-1_25 min-h-ak-control-lg rounded-ak-lg font-ak-sans font-semibold cursor-pointer\">\n\n// Section with fluid vertical rhythm + max page width\n<section className=\"py-ak-fl-xl-3xl bg-ak-bg\">\n  <div className=\"max-w-ak-page mx-auto px-ak-fl-page-margin\">\n\n// Icon (Phosphor only \u2014 never inline SVG)\nimport { House } from '@phosphor-icons/react'\n<House size={20} aria-hidden=\"true\" />\n```\n";
+export declare const DESIGN_TOKENS = "# AstralKit Design Token Reference\n\n**This is the complete, authoritative list of every `ak-*` design token.**\nThese are the ONLY valid AstralKit tokens. Do NOT invent or guess a token that\nis not listed here \u2014 in Tailwind v4 an undefined utility (e.g. `bg-ak-surface-muted`)\n**silently fails to compile** (no error, the element just renders unstyled).\n\nTailwind v3 vs v4: the token NAMES and VALUES are identical in both. v4 reads them\nfrom `astralkit/theme-v4` (`@theme`) and auto-generates every utility. v3 reads\n`astralkit/theme` (CSS vars) plus the `astralkit/tailwind` plugin, which registers\nthe same utilities. Either way the class names below are what you write.\n\n---\n\n## Colors\nEach color token works with every color utility: `bg-*`, `text-*`, `border-*`, `ring-*`, `fill-*`, `stroke-*`, `from-*`/`to-*`/`via-*`.\nExample: token `ak-surface` \u2192 `bg-ak-surface`, `text-ak-surface`, `border-ak-surface`.\n\n- `ak-neutral-0` \u2014 `#ffffff`\n- `ak-neutral-50` \u2014 `#fafafa`\n- `ak-neutral-100` \u2014 `#f5f5f5`\n- `ak-neutral-200` \u2014 `#e5e5e5`\n- `ak-neutral-300` \u2014 `#d4d4d4`\n- `ak-neutral-400` \u2014 `#a3a3a3`\n- `ak-neutral-500` \u2014 `#737373`\n- `ak-neutral-600` \u2014 `#525252`\n- `ak-neutral-700` \u2014 `#404040`\n- `ak-neutral-800` \u2014 `#262626`\n- `ak-neutral-900` \u2014 `#171717`\n- `ak-neutral-950` \u2014 `#0a0a0a`\n- `ak-primary-50` \u2014 `#f5f5f5`\n- `ak-primary-100` \u2014 `#e5e5e5`\n- `ak-primary-200` \u2014 `#cccccc`\n- `ak-primary-300` \u2014 `#a3a3a3`\n- `ak-primary-400` \u2014 `#737373`\n- `ak-primary-500` \u2014 `#525252`\n- `ak-primary-600` \u2014 `#404040`\n- `ak-primary-700` \u2014 `#333333`\n- `ak-primary-800` \u2014 `#1a1a1a`\n- `ak-primary-900` \u2014 `#000000`\n- `ak-primary-950` \u2014 `#000000`\n- `ak-primary` \u2014 `#000000`\n- `ak-primary-hover` \u2014 `#1a1a1a`\n- `ak-primary-active` \u2014 `#333333`\n- `ak-bg` \u2014 `#ffffff`\n- `ak-surface` \u2014 `#fafafa`\n- `ak-surface-2` \u2014 `#f5f5f5`\n- `ak-hover` \u2014 `#f7f7f7`\n- `ak-active` \u2014 `#f0f0f0`\n- `ak-elevated` \u2014 `#ffffff`\n- `ak-surface-raised` \u2014 `#ffffff`\n- `ak-surface-raised-soft` \u2014 `rgba(255, 255, 255, 0.78)`\n- `ak-surface-glass` \u2014 `rgba(255, 255, 255, 0.72)`\n- `ak-surface-glass-strong` \u2014 `rgba(255, 255, 255, 0.84)`\n- `ak-highlight-soft` \u2014 `rgba(255, 255, 255, 0.45)`\n- `ak-highlight-strong` \u2014 `rgba(255, 255, 255, 0.72)`\n- `ak-skeleton-base` \u2014 `#ededed`\n- `ak-skeleton-shine` \u2014 `rgba(255, 255, 255, 0.72)`\n- `ak-overlay` \u2014 `rgba(0, 0, 0, 0.5)`\n- `ak-on-primary` \u2014 `#ffffff`\n- `ak-primary-subtle` \u2014 `#f5f5f5`\n- `ak-primary-subtle-hover` \u2014 `#e5e5e5`\n- `ak-text` \u2014 `#171717`\n- `ak-text-emphasis` \u2014 `#2b2b2b`\n- `ak-text-secondary` \u2014 `#525252`\n- `ak-text-muted` \u2014 `#a3a3a3`\n- `ak-text-disabled` \u2014 `#d4d4d4`\n- `ak-text-inverse` \u2014 `#ffffff`\n- `ak-text-link` \u2014 `#000000`\n- `ak-text-placeholder` \u2014 `#525252`\n- `ak-border` \u2014 `#dee2e6`\n- `ak-border-subtle` \u2014 `#e5e5e5`\n- `ak-border-strong` \u2014 `#525252`\n- `ak-border-focus` \u2014 `#000000`\n- `ak-success` \u2014 `#16a34a`\n- `ak-success-subtle` \u2014 `#f0fdf4`\n- `ak-success-text` \u2014 `#15803d`\n- `ak-warning` \u2014 `#d97706`\n- `ak-warning-subtle` \u2014 `#fffbeb`\n- `ak-warning-text` \u2014 `#b45309`\n- `ak-danger` \u2014 `#dc2626`\n- `ak-danger-subtle` \u2014 `#fef2f2`\n- `ak-danger-text` \u2014 `#b91c1c`\n- `ak-info` \u2014 `#2563eb`\n- `ak-info-subtle` \u2014 `#eff6ff`\n- `ak-pink` \u2014 `#db2777`\n- `ak-pink-subtle` \u2014 `#fdf2f8`\n- `ak-info-text` \u2014 `#1d4ed8`\n- `ak-sheet-handle` \u2014 `#d4d4d4`\n- `ak-brutal-ink` \u2014 `#000000`\n- `ak-brutal-face` \u2014 `#ffffff`\n- `ak-brutal-face-dark` \u2014 `#262626`\n- `ak-brutal-on-face` \u2014 `#000000`\n- `ak-brutal-on-face-dark` \u2014 `#ffffff`\n- `ak-chart-1` \u2014 `#4e79a7`\n- `ak-chart-2` \u2014 `#f28e2c`\n- `ak-chart-3` \u2014 `#e15759`\n- `ak-chart-4` \u2014 `#76b7b2`\n- `ak-chart-5` \u2014 `#59a14f`\n- `ak-chart-6` \u2014 `#edc949`\n\n## Fonts\n`font-*` utilities.\n\n- `font-ak-sans` \u2014 'Inter', system-ui, -apple-system, sans-serif\n- `font-ak-serif` \u2014 'DM Serif Display', Georgia, serif\n- `font-ak-mono` \u2014 'JetBrains Mono', 'Fira Code', ui-monospace, monospace\n\n## Font Size (text scale)\n`text-*` utilities. Includes static, `_5` half-steps, fluid (`fl-*`), display, watermark, avatar, and badge sizes.\n\n- `text-ak-2xs` \u2014 `0.6875rem`\n- `text-ak-xs` \u2014 `0.75rem`\n- `text-ak-xs_5` \u2014 `0.8125rem`\n- `text-ak-sm` \u2014 `0.875rem`\n- `text-ak-sm_5` \u2014 `0.9375rem`\n- `text-ak-base` \u2014 `1rem`\n- `text-ak-lg` \u2014 `1.125rem`\n- `text-ak-xl` \u2014 `1.25rem`\n- `text-ak-xl_5` \u2014 `1.375rem`\n- `text-ak-2xl` \u2014 `1.5rem`\n- `text-ak-2xl_5` \u2014 `1.625rem`\n- `text-ak-3xl` \u2014 `2rem`\n- `text-ak-4xl` \u2014 `2.5rem`\n- `text-ak-4xl_5` \u2014 `2.75rem`\n- `text-ak-5xl` \u2014 `3rem`\n- `text-ak-6xl` \u2014 `3.75rem`\n- `text-ak-6xl_5` \u2014 `4rem`\n- `text-ak-7xl` \u2014 `4.5rem`\n- `text-ak-7xl_5` \u2014 `5.25rem`\n- `text-ak-8xl` \u2014 `6rem`\n- `text-ak-9xl` \u2014 `7rem`\n- `text-ak-10xl` \u2014 `8rem`\n- `text-ak-fl-xs` \u2014 `clamp(0.6875rem, 0.67rem  + 0.06vw, 0.75rem)`\n- `text-ak-fl-sm` \u2014 `clamp(0.75rem,   0.71rem  + 0.12vw, 0.875rem)`\n- `text-ak-fl-base` \u2014 `clamp(0.875rem,  0.84rem  + 0.12vw, 1rem)`\n- `text-ak-fl-lg` \u2014 `clamp(1rem,      0.96rem  + 0.12vw, 1.125rem)`\n- `text-ak-fl-xl` \u2014 `clamp(1.125rem,  1.09rem  + 0.12vw, 1.25rem)`\n- `text-ak-fl-2xl` \u2014 `clamp(1.25rem,   1.18rem  + 0.23vw, 1.5rem)`\n- `text-ak-fl-3xl` \u2014 `clamp(1.5rem,    1.39rem  + 0.35vw, 1.875rem)`\n- `text-ak-fl-4xl` \u2014 `clamp(1.875rem,  1.76rem  + 0.35vw, 2.25rem)`\n- `text-ak-fl-5xl` \u2014 `clamp(2.25rem,   2.03rem  + 0.69vw, 3rem)`\n- `text-ak-fl-6xl` \u2014 `clamp(3rem,      2.78rem  + 0.69vw, 3.75rem)`\n- `text-ak-fl-7xl` \u2014 `clamp(3.5rem,    3.2rem   + 0.93vw, 4.5rem)`\n- `text-ak-fl-8xl` \u2014 `clamp(4.5rem,    4.06rem  + 1.39vw, 6rem)`\n- `text-ak-fl-9xl` \u2014 `clamp(5.25rem,   4.73rem  + 1.62vw, 7rem)`\n- `text-ak-display-xs` \u2014 `clamp(0.75rem,   0.7rem  + 0.15vw, 0.875rem)`\n- `text-ak-display-sm` \u2014 `clamp(0.875rem,  0.83rem + 0.19vw, 1rem)`\n- `text-ak-display-base` \u2014 `clamp(1rem,      0.94rem + 0.28vw, 1.1875rem)`\n- `text-ak-display-lg` \u2014 `clamp(1.125rem,  1.01rem + 0.52vw, 1.5rem)`\n- `text-ak-display-xl` \u2014 `clamp(1.25rem,   1.07rem + 0.83vw, 1.875rem)`\n- `text-ak-display-2xl` \u2014 `clamp(1.5rem,    1.2rem  + 1.11vw, 2.25rem)`\n- `text-ak-display-3xl` \u2014 `clamp(1.875rem,  1.42rem + 1.67vw, 3rem)`\n- `text-ak-display-4xl` \u2014 `clamp(2.25rem,   1.58rem + 2.5vw,  3.75rem)`\n- `text-ak-display-5xl` \u2014 `clamp(3rem,      2.07rem + 3.47vw, 5.25rem)`\n- `text-ak-display-6xl` \u2014 `clamp(3.75rem,   2.5rem  + 4.63vw, 7rem)`\n- `text-ak-display-7xl` \u2014 `clamp(4.5rem,    3.06rem + 5.56vw, 8rem)`\n- `text-ak-display-8xl` \u2014 `clamp(5rem,      3.06rem + 6.94vw, 9rem)`\n- `text-ak-display-9xl` \u2014 `clamp(5.5rem,    3.06rem + 7.64vw, 10rem)`\n- `text-ak-watermark-2xs` \u2014 `clamp(1rem, 13cqi, 13rem)`\n- `text-ak-watermark-xs` \u2014 `clamp(1rem, 16cqi, 16rem)`\n- `text-ak-watermark-sm` \u2014 `clamp(1rem, 19cqi, 20rem)`\n- `text-ak-watermark-base` \u2014 `clamp(1rem, 21cqi, 22rem)`\n- `text-ak-watermark-md` \u2014 `clamp(1rem, 24cqi, 26rem)`\n- `text-ak-watermark-lg` \u2014 `clamp(1rem, 26cqi, 28rem)`\n- `text-ak-watermark-xl` \u2014 `clamp(1rem, 28cqi, 30rem)`\n- `text-ak-watermark-2xl` \u2014 `clamp(1rem, 30cqi, 34rem)`\n- `text-ak-watermark-3xl` \u2014 `clamp(1rem, 33cqi, 38rem)`\n- `text-ak-watermark-4xl` \u2014 `clamp(1rem, 36cqi, 42rem)`\n- `text-ak-watermark-5xl` \u2014 `clamp(1rem, 40cqi, 48rem)`\n- `text-ak-avatar-xs` \u2014 `0.625rem`\n- `text-ak-avatar-sm` \u2014 `0.6875rem`\n- `text-ak-avatar-md` \u2014 `0.8125rem`\n- `text-ak-avatar-lg` \u2014 `1rem`\n- `text-ak-avatar-xl` \u2014 `1.25rem`\n- `text-ak-avatar-2xl` \u2014 `1.75rem`\n- `text-ak-avatar-3xl` \u2014 `2.25rem`\n- `text-ak-badge-md` \u2014 `0.625rem`\n- `text-ak-badge-lg` \u2014 `0.6875rem`\n- `text-ak-badge-xl` \u2014 `0.8125rem`\n- `text-ak-badge-2xl` \u2014 `0.9375rem`\n- `text-ak-badge-3xl` \u2014 `1.125rem`\n\n## Line Height\n`leading-*` utilities.\n\n- `leading-ak-display` \u2014 `0.85`\n- `leading-ak-squeezed` \u2014 `0.92`\n- `leading-ak-condensed` \u2014 `0.95`\n- `leading-ak-none` \u2014 `1`\n- `leading-ak-fitted` \u2014 `1.02`\n- `leading-ak-compact` \u2014 `1.05`\n- `leading-ak-tighter` \u2014 `1.1`\n- `leading-ak-snugger` \u2014 `1.2`\n- `leading-ak-tight` \u2014 `1.25`\n- `leading-ak-snug` \u2014 `1.375`\n- `leading-ak-normal` \u2014 `1.5`\n- `leading-ak-relaxed` \u2014 `1.625`\n- `leading-ak-prose` \u2014 `1.75`\n- `leading-ak-loose` \u2014 `2`\n\n## Letter Spacing\n`tracking-*` utilities.\n\n- `tracking-ak-tighter` \u2014 `-0.05em`\n- `tracking-ak-tight` \u2014 `-0.025em`\n- `tracking-ak-subtle` \u2014 `-0.01em`\n- `tracking-ak-normal` \u2014 `0em`\n- `tracking-ak-wide` \u2014 `0.025em`\n- `tracking-ak-section` \u2014 `0.08em`\n- `tracking-ak-wider` \u2014 `0.05em`\n- `tracking-ak-widest` \u2014 `0.1em`\n\n## Spacing \u2014 core-numbered (ak-N = core N, i.e. N x 4px, fluid)\nFeeds every spacing utility: `p-* px-* py-* pt/pr/pb/pl-* m-* mx-* my-* gap-* gap-x/y-* space-x/y-* w-* h-* min-w-* min-h-* max-w-* inset-* top/right/bottom/left-*`.\n**The rule is stupid-simple: same number as core Tailwind, add the ak- prefix.** `p-6` (24px) \u2192 `p-ak-6` (24px, fluid). No fractions exist in the ak scale \u2014 6px and 10px are CORE classes (`p-1.5`, `p-2.5`).\n\nSteps (all = core value): `ak-0 ak-px ak-1 ak-2 ak-3 ak-4 ak-5 ak-6 ak-7 ak-8 ak-9 ak-10 ak-11 ak-12 ak-14 ak-16 ak-18 ak-20 ak-22 ak-24 ak-28 ak-32 ak-40 ak-48`\n(ak-1 = 0.25rem/4px \u00B7 ak-2 = 0.5rem/8px \u00B7 ak-4 = 1rem/16px \u00B7 ak-6 = 1.5rem/24px \u00B7 ak-8 = 2rem/32px \u00B7 ak-12 = 3rem/48px \u2026 exactly core.)\n\nDEPRECATED (pre-0.8 grammar, still render, do not write): `ak-0_5 ak-0_75 ak-1_25 ak-1_5 ak-2_5 ak-3_5 ak-4_5 ak-5_5`.\n\n- `ak-mobile-bar` \u2014 `4.5rem`\n- `ak-fl-page-margin` \u2014 `clamp(1rem, 0.26rem + 3.7vw, 5rem)`\n- `ak-fl-3xs` \u2014 `clamp(0.25rem,  0.21rem + 0.14vw, 0.375rem)`\n- `ak-fl-2xs` \u2014 `clamp(0.5rem,   0.43rem + 0.28vw, 0.75rem)`\n- `ak-fl-xs` \u2014 `clamp(0.75rem,  0.65rem + 0.42vw, 1rem)`\n- `ak-fl-sm` \u2014 `clamp(1rem,     0.86rem + 0.56vw, 1.5rem)`\n- `ak-fl-md` \u2014 `clamp(1.5rem,   1.29rem + 0.83vw, 2rem)`\n- `ak-fl-lg` \u2014 `clamp(2rem,     1.72rem + 1.11vw, 3rem)`\n- `ak-fl-xl` \u2014 `clamp(3rem,     2.5rem  + 1.85vw, 4.5rem)`\n- `ak-fl-2xl` \u2014 `clamp(4rem,     3.22rem + 2.78vw, 6rem)`\n- `ak-fl-3xl` \u2014 `clamp(6rem,     4.86rem + 4.17vw, 9rem)`\n- `ak-fl-xs-md` \u2014 `clamp(0.75rem,  0.43rem + 1.39vw, 2rem)`\n- `ak-fl-xs-lg` \u2014 `clamp(0.75rem,  0.14rem + 2.78vw, 3rem)`\n- `ak-fl-sm-lg` \u2014 `clamp(1rem,     0.43rem + 2.78vw, 3rem)`\n- `ak-fl-sm-xl` \u2014 `clamp(1rem,     0rem    + 4.17vw, 4.5rem)`\n- `ak-fl-md-xl` \u2014 `clamp(1.5rem,   0.57rem + 3.47vw, 4.5rem)`\n- `ak-fl-md-2xl` \u2014 `clamp(1.5rem,   0rem    + 5.56vw, 6rem)`\n- `ak-fl-lg-2xl` \u2014 `clamp(2rem,     0.57rem + 5.56vw, 6rem)`\n- `ak-fl-xl-3xl` \u2014 `clamp(3rem,     0.57rem + 8.33vw, 9rem)`\n\n## Border Radius\n`rounded-*` utilities.\n\n- `rounded-ak-xs` \u2014 `0.125rem`\n- `rounded-ak-none` \u2014 `0`\n- `rounded-ak-sm` \u2014 `0.25rem`\n- `rounded-ak-md` \u2014 `0.5rem`\n- `rounded-ak-lg` \u2014 `0.75rem`\n- `rounded-ak-xl` \u2014 `1rem`\n- `rounded-ak-2xl` \u2014 `1.5rem`\n- `rounded-ak-3xl` \u2014 `2rem`\n- `rounded-ak-full` \u2014 `9999px`\n- `rounded-ak-brutal` \u2014 `0.5rem`\n- `rounded-ak-brutal-sm` \u2014 `0.25rem`\n- `rounded-ak-input` \u2014 `0.625rem`\n\n## Border Width\n`border-*` utilities (width).\n\n- `border-ak-brutal` \u2014 `2px`\n- `border-ak-brutal-lg` \u2014 `3px`\n\n## Box Shadow\n`shadow-*` utilities (includes focus rings and neobrutalist shadows).\n\n- `shadow-ak-xs` \u2014 `0 1px 2px rgba(0,0,0,0.04)`\n- `shadow-ak-sm` \u2014 `0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)`\n- `shadow-ak-md` \u2014 `0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04)`\n- `shadow-ak-lg` \u2014 `0 8px 30px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)`\n- `shadow-ak-xl` \u2014 `0 16px 50px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05)`\n- `shadow-ak-2xl` \u2014 `0 24px 60px rgba(0,0,0,0.14)`\n- `shadow-ak-brutal-xs` \u2014 `2px 2px 0 0 var(--color-ak-brutal-ink)`\n- `shadow-ak-brutal-sm` \u2014 `3px 3px 0 0 var(--color-ak-brutal-ink)`\n- `shadow-ak-brutal` \u2014 `4px 4px 0 0 var(--color-ak-brutal-ink)`\n- `shadow-ak-brutal-lg` \u2014 `6px 6px 0 0 var(--color-ak-brutal-ink)`\n- `shadow-ak-brutal-xl` \u2014 `8px 8px 0 0 var(--color-ak-brutal-ink)`\n- `shadow-ak-focus` \u2014 `0 0 0 3px rgba(0, 0, 0, 0.08)`\n- `shadow-ak-focus-primary` \u2014 `0 0 0 3px rgba(0, 0, 0, 0.15)`\n- `shadow-ak-focus-danger` \u2014 `0 0 0 3px rgba(220, 38, 38, 0.08)`\n- `shadow-ak-focus-success` \u2014 `0 0 0 3px rgba(22, 163, 74, 0.08)`\n\n## Max Width (containers)\n`max-w-*` utilities.\n\n- `max-w-ak-page` \u2014 `80rem`\n- `max-w-ak-xs` \u2014 `20rem`\n- `max-w-ak-sm` \u2014 `24rem`\n- `max-w-ak-md` \u2014 `28rem`\n- `max-w-ak-lg` \u2014 `32rem`\n- `max-w-ak-xl` \u2014 `36rem`\n- `max-w-ak-2xl` \u2014 `42rem`\n- `max-w-ak-3xl` \u2014 `48rem`\n- `max-w-ak-4xl` \u2014 `56rem`\n- `max-w-ak-prose` \u2014 `65ch`\n\n## Z-Index\n`z-*` utilities.\n\n- `z-ak-base` \u2014 `0`\n- `z-ak-docked` \u2014 `10`\n- `z-ak-dropdown` \u2014 `1000`\n- `z-ak-sticky` \u2014 `1100`\n- `z-ak-banner` \u2014 `1200`\n- `z-ak-overlay` \u2014 `1300`\n- `z-ak-modal` \u2014 `1400`\n- `z-ak-popover` \u2014 `1500`\n- `z-ak-toast` \u2014 `1700`\n- `z-ak-tooltip` \u2014 `1800`\n\n## Transition Duration\n`duration-*` utilities.\n\n- `duration-ak-fast` \u2014 `110ms`\n- `duration-ak-base` \u2014 `150ms`\n- `duration-ak-slow` \u2014 `240ms`\n- `duration-ak-skeleton` \u2014 `1800ms`\n\n## Transition Timing (easing)\n`ease-*` utilities.\n\n- `ease-ak-default` \u2014 `cubic-bezier(0.4, 0, 0.2, 1)`\n- `ease-ak-in` \u2014 `cubic-bezier(0.4, 0, 1, 1)`\n- `ease-ak-out` \u2014 `cubic-bezier(0, 0, 0.2, 1)`\n- `ease-ak-spring` \u2014 `cubic-bezier(0.34, 1.56, 0.64, 1)`\n- `ease-ak-bounce` \u2014 `cubic-bezier(0.25, 1, 0.5, 1)`\n\n## Heights\n`h-*` and `min-h-*` utilities (named, beyond the spacing scale).\n\n- `h-ak-nav` / `min-h-ak-nav` \u2014 `4.5rem`\n- `h-ak-touch` / `min-h-ak-touch` \u2014 `2.5rem`\n- `h-ak-control-sm` / `min-h-ak-control-sm` \u2014 `2rem`\n- `h-ak-control-md` / `min-h-ak-control-md` \u2014 `2.5rem`\n- `h-ak-control-lg` / `min-h-ak-control-lg` \u2014 `3rem`\n- `h-ak-control-xl` / `min-h-ak-control-xl` \u2014 `3.5rem`\n- `h-ak-control-2xl` / `min-h-ak-control-2xl` \u2014 `4rem`\n- `h-ak-row-compact` / `min-h-ak-row-compact` \u2014 `2.5rem`\n- `h-ak-row-default` / `min-h-ak-row-default` \u2014 `3rem`\n- `h-ak-row-comfortable` / `min-h-ak-row-comfortable` \u2014 `3.25rem`\n\n## Widths\n`w-*` and `min-w-*` utilities (named, beyond the spacing scale).\n\n- `w-ak-touch` \u2014 `2.5rem`\n- `w-ak-sidebar-collapsed` \u2014 `5rem`\n- `w-ak-sidebar-expanded` \u2014 `18rem`\n\n## Size (width + height shorthand)\n`size-*` utilities (sets width AND height \u2014 icons, avatars, status dots, badges).\n\n- `size-ak-sheet-handle-width` \u2014 `2.25rem`\n- `size-ak-sheet-handle-height` \u2014 `0.25rem`\n- `size-ak-icon-xs` \u2014 `0.75rem`\n- `size-ak-icon-sm` \u2014 `1rem`\n- `size-ak-icon-md` \u2014 `1.25rem`\n- `size-ak-icon-lg` \u2014 `1.5rem`\n- `size-ak-icon-xl` \u2014 `1.75rem`\n- `size-ak-icon-2xl` \u2014 `2rem`\n- `size-ak-icon-3xl` \u2014 `3rem`\n- `size-ak-panel-width` \u2014 `260px`\n- `size-ak-avatar-xs` \u2014 `1.5rem`\n- `size-ak-avatar-sm` \u2014 `2rem`\n- `size-ak-avatar-md` \u2014 `2.5rem`\n- `size-ak-avatar-lg` \u2014 `3rem`\n- `size-ak-avatar-xl` \u2014 `4rem`\n- `size-ak-avatar-2xl` \u2014 `6rem`\n- `size-ak-avatar-3xl` \u2014 `8rem`\n- `size-ak-status-md` \u2014 `12px`\n- `size-ak-status-lg` \u2014 `14px`\n- `size-ak-status-xl` \u2014 `20px`\n- `size-ak-status-2xl` \u2014 `28px`\n- `size-ak-status-3xl` \u2014 `36px`\n- `size-ak-badge-md` \u2014 `18px`\n- `size-ak-badge-lg` \u2014 `20px`\n- `size-ak-badge-xl` \u2014 `24px`\n- `size-ak-badge-2xl` \u2014 `32px`\n- `size-ak-badge-3xl` \u2014 `40px`\n- `size-ak-badge-border-md` \u2014 `2px`\n- `size-ak-badge-border-lg` \u2014 `2px`\n- `size-ak-badge-border-xl` \u2014 `3px`\n- `size-ak-badge-border-2xl` \u2014 `3.5px`\n- `size-ak-badge-border-3xl` \u2014 `4px`\n- `size-ak-icon-badge-md` \u2014 `22px`\n- `size-ak-icon-badge-lg` \u2014 `24px`\n- `size-ak-icon-badge-xl` \u2014 `28px`\n- `size-ak-icon-badge-2xl` \u2014 `34px`\n- `size-ak-icon-badge-3xl` \u2014 `40px`\n- `size-ak-control-sm` \u2014 `2rem`\n- `size-ak-control-md` \u2014 `2.5rem`\n- `size-ak-control-lg` \u2014 `3rem`\n- `size-ak-touch-min` \u2014 `3rem`\n\n---\n\n## Common Patterns\n```tsx\n// Card\n<div className=\"border border-ak-border rounded-ak-lg p-ak-6 bg-ak-surface\">\n\n// Primary button (48px min touch target)\n<button className=\"bg-ak-primary text-ak-on-primary px-ak-5 py-2.5 min-h-ak-control-lg rounded-ak-lg font-ak-sans font-semibold cursor-pointer\">\n\n// Section with fluid vertical rhythm + max page width\n<section className=\"py-ak-fl-xl-3xl bg-ak-bg\">\n  <div className=\"max-w-ak-page mx-auto px-ak-fl-page-margin\">\n\n// Icon (Phosphor only \u2014 never inline SVG)\nimport { House } from '@phosphor-icons/react'\n<House size={20} aria-hidden=\"true\" />\n```\n";
 //# sourceMappingURL=tokens.d.ts.map

package/dist/data/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/data/tokens.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,iziBAibzB,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/data/tokens.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,+wiBA4ZzB,CAAC"}

package/dist/data/tokens.js

@@ -214,36 +214,15 @@ Example: token \`ak-surface\` → \`bg-ak-surface\`, \`text-ak-surface\`, \`bord
 - \`tracking-ak-wider\` — \`0.05em\`
 - \`tracking-ak-widest\` — \`0.1em\`
 
-## Spacing
+## Spacing — core-numbered (ak-N = core N, i.e. N x 4px, fluid)
 Feeds every spacing utility: \`p-* px-* py-* pt/pr/pb/pl-* m-* mx-* my-* gap-* gap-x/y-* space-x/y-* w-* h-* min-w-* min-h-* max-w-* inset-* top/right/bottom/left-*\`.
-Example: token \`ak-3\` → \`p-ak-3\`, \`gap-ak-3\`, \`mt-ak-3\`.
-
-- \`ak-0\` — \`0rem\`
-- \`ak-px\` — \`0.0625rem\`
-- \`ak-0_5\` — \`0.25rem\`
-- \`ak-0_75\` — \`0.375rem\`
-- \`ak-1\` — \`0.5rem\`
-- \`ak-1_25\` — \`0.625rem\`
-- \`ak-1_5\` — \`0.75rem\`
-- \`ak-2\` — \`1rem\`
-- \`ak-2_5\` — \`1.25rem\`
-- \`ak-3\` — \`1.5rem\`
-- \`ak-3_5\` — \`1.75rem\`
-- \`ak-4\` — \`2rem\`
-- \`ak-4_5\` — \`2.25rem\`
-- \`ak-5\` — \`2.5rem\`
-- \`ak-5_5\` — \`2.75rem\`
-- \`ak-6\` — \`3rem\`
-- \`ak-7\` — \`3.5rem\`
-- \`ak-8\` — \`4rem\`
-- \`ak-9\` — \`4.5rem\`
-- \`ak-10\` — \`5rem\`
-- \`ak-11\` — \`5.5rem\`
-- \`ak-12\` — \`6rem\`
-- \`ak-14\` — \`7rem\`
-- \`ak-16\` — \`8rem\`
-- \`ak-20\` — \`10rem\`
-- \`ak-24\` — \`12rem\`
+**The rule is stupid-simple: same number as core Tailwind, add the ak- prefix.** \`p-6\` (24px) → \`p-ak-6\` (24px, fluid). No fractions exist in the ak scale — 6px and 10px are CORE classes (\`p-1.5\`, \`p-2.5\`).
+
+Steps (all = core value): \`ak-0 ak-px ak-1 ak-2 ak-3 ak-4 ak-5 ak-6 ak-7 ak-8 ak-9 ak-10 ak-11 ak-12 ak-14 ak-16 ak-18 ak-20 ak-22 ak-24 ak-28 ak-32 ak-40 ak-48\`
+(ak-1 = 0.25rem/4px · ak-2 = 0.5rem/8px · ak-4 = 1rem/16px · ak-6 = 1.5rem/24px · ak-8 = 2rem/32px · ak-12 = 3rem/48px … exactly core.)
+
+DEPRECATED (pre-0.8 grammar, still render, do not write): \`ak-0_5 ak-0_75 ak-1_25 ak-1_5 ak-2_5 ak-3_5 ak-4_5 ak-5_5\`.
+
 - \`ak-mobile-bar\` — \`4.5rem\`
 - \`ak-fl-page-margin\` — \`clamp(1rem, 0.26rem + 3.7vw, 5rem)\`
 - \`ak-fl-3xs\` — \`clamp(0.25rem,  0.21rem + 0.14vw, 0.375rem)\`
@@ -421,10 +400,10 @@ Example: token \`ak-3\` → \`p-ak-3\`, \`gap-ak-3\`, \`mt-ak-3\`.
 ## Common Patterns
 \`\`\`tsx
 // Card
-<div className="border border-ak-border rounded-ak-lg p-ak-3 bg-ak-surface">
+<div className="border border-ak-border rounded-ak-lg p-ak-6 bg-ak-surface">
 
 // Primary button (48px min touch target)
-<button className="bg-ak-primary text-ak-on-primary px-ak-2_5 py-ak-1_25 min-h-ak-control-lg rounded-ak-lg font-ak-sans font-semibold cursor-pointer">
+<button className="bg-ak-primary text-ak-on-primary px-ak-5 py-2.5 min-h-ak-control-lg rounded-ak-lg font-ak-sans font-semibold cursor-pointer">
 
 // Section with fluid vertical rhythm + max page width
 <section className="py-ak-fl-xl-3xl bg-ak-bg">

package/dist/data/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/data/tokens.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,+DAA+D;AAC/D,mDAAmD;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAib5B,CAAC"}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/data/tokens.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,+DAA+D;AAC/D,mDAAmD;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Z5B,CAAC"}

package/dist/server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AA4nDA,wBAAsB,WAAW,kBAyChC"}
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAopDA,wBAAsB,WAAW,kBAyChC"}