@astralkit/mcp 1.7.1 → 1.9.0

package/dist/data/crosswalk.js

@@ -9,6 +9,17 @@ const SEMANTIC = {
     warning: ['amber', 'yellow', 'orange'],
     info: ['blue', 'sky', 'cyan'],
     primary: ['indigo', 'violet', 'purple', 'fuchsia'], // brand-accent colors → primary
+    pink: ['pink'],
+};
+const BARE_COLORS = {
+    'bg-white': 'bg-ak-bg',
+    'bg-black': 'bg-ak-inverse-surface',
+    'text-white': 'text-ak-text-inverse',
+    'text-black': 'text-ak-text',
+    'border-white': 'border-ak-bg',
+    'border-black': 'border-ak-text',
+    'ring-white': 'ring-ak-bg',
+    'ring-black': 'ring-ak-text',
 };
 // Tailwind spacing step (n × 0.25rem) → ak spacing token (matched by rem).
 const SPACING = {
@@ -30,6 +41,9 @@ const TEXT_SIZE = {
  * Returns the replacement string, or null if there's no confident mapping.
  */
 export function nearestToken(cls) {
+    // Bare colors: bg-white, bg-black, text-white, text-black
+    if (BARE_COLORS[cls])
+        return BARE_COLORS[cls];
     // Colors: <prefix>-<family>-<shade>
     const color = cls.match(/^(bg|text|border|ring|fill|stroke|from|to|via|divide|outline|shadow|accent|caret|placeholder|decoration)-([a-z]+)-(\d{2,3})$/);
     if (color) {
@@ -80,13 +94,100 @@ export function nearestToken(cls) {
 }
 export const CROSSWALK = `# Raw Tailwind → AstralKit Crosswalk (for tokenizing existing UI)
 
-When converting a non-AstralKit screen, replace raw Tailwind with the nearest \`ak-*\` token.
-(\`validate_code\` also returns the exact suggestion per flagged class — run it and apply each.)
+**Tokenization = replacing Tailwind utility CLASSES on the JSX elements, NOT writing CSS.**
+
+When converting a non-AstralKit screen, replace raw Tailwind classes with the nearest \`ak-*\`
+utility class directly on the \`className\` attribute. (\`validate_code\` also returns the exact
+suggestion per flagged class — run it and apply each.)
+
+## 🔴 What tokenization is NOT (the #1 mistake)
+Tokenization is NOT writing CSS custom properties (\`var(--color-ak-*)\`, \`var(--spacing-ak-*)\`)
+into a stylesheet. That creates a parallel styling system instead of using the library.
+
+\`\`\`tsx
+// ✅ CORRECT — utility class on the element
+<div className="bg-ak-surface p-ak-3 rounded-ak-lg border border-ak-border">
+
+// ❌ WRONG — CSS custom property in a stylesheet (globals.css, page.css, etc.)
+// .my-card { background: var(--color-ak-surface); padding: var(--spacing-ak-3); }
+// This is NOT tokenization. This is writing raw CSS that happens to reference ak variables.
+\`\`\`
+
+**Rules:**
+- NEVER create CSS/stylesheet files (.css) for tokenization — all styling belongs as
+  Tailwind utility classes on the JSX \`className\`.
+- NEVER use \`var(--color-ak-*)\`, \`var(--spacing-ak-*)\`, \`var(--radius-ak-*)\`, etc. in
+  stylesheets — use the Tailwind class (\`bg-ak-surface\`, \`p-ak-3\`, \`rounded-ak-lg\`).
+- NEVER add \`!important\` — if specificity is fighting you, you're in the wrong layer.
+- **When the source already has external stylesheets** (page.css, styles.css, component.css,
+  or custom rules in globals.css): READ the stylesheet, EXTRACT each CSS property,
+  FIND the equivalent \`ak-*\` utility class using this crosswalk, APPLY those classes
+  to the JSX elements, then DELETE the stylesheet and remove its import. The goal is
+  zero custom CSS for visual styling — all of it lives on \`className\`.
+- **globals.css should be minimal** — only AstralKit theme/utilities imports and, at most,
+  a few lines of CSS variable overrides (\`--color-ak-primary: ...\`) to customize the
+  palette. Component styling does NOT belong there.
+
+### CSS property → ak-* class quick-reference (for extracting from stylesheets)
+\`\`\`
+background: var(--color-ak-surface)    →  bg-ak-surface
+color: var(--color-ak-text)            →  text-ak-text
+border-color: var(--color-ak-border)   →  border-ak-border
+padding: var(--spacing-ak-3)           →  p-ak-3
+gap: var(--spacing-ak-2)               →  gap-ak-2
+border-radius: var(--radius-ak-lg)     →  rounded-ak-lg
+font-size: var(--text-ak-base)         →  text-ak-base
+font-size: 16px / 1rem                 →  text-ak-base
+font-size: 14px / 0.875rem             →  text-ak-sm
+min-height: 3rem / 48px                →  min-h-ak-control-lg
+width: 3rem / height: 3rem             →  size-ak-avatar-lg
+\`\`\`
+
+## What properly tokenized code looks like
+AstralKit's own library components are the gold standard. In a properly tokenized file:
+- Every element's \`className\` uses \`ak-*\` tokens for ALL spacing, colors, radii, typography
+- There is NO external stylesheet — zero \`.css\` files for component styling
+- There are NO CSS custom property references (\`var(--color-ak-*)\`) outside \`globals.css\`
+- \`globals.css\` contains ONLY the theme/utilities imports and optional palette overrides
+- All visual nuance lives on the markup via utility classes — the code reads as a recipe
+
+Example of a properly tokenized stat card:
+\`\`\`tsx
+<div className="rounded-ak-xl border border-ak-border bg-ak-elevated p-ak-3">
+  <p className="text-ak-xs font-medium uppercase tracking-ak-wide text-ak-text-secondary">
+    Total Revenue
+  </p>
+  <p className="mt-ak-1 text-ak-3xl font-bold text-ak-text tabular-nums">$45,231</p>
+  <span className="mt-ak-0_5 inline-flex rounded-ak-full bg-ak-success-subtle px-ak-1 py-ak-0_5 text-ak-xs font-semibold text-ak-success-text">
+    +20.1%
+  </span>
+</div>
+\`\`\`
+
+This is the taste level: proper hierarchy (3xl value, xs label), the ak-* rhythm, semantic
+surfaces and status colors, no raw Tailwind, no CSS file, no inline styles.
+
+### Example: extracting from an existing stylesheet
+If the source has \`import './card.css'\` and \`card.css\` contains:
+\`\`\`css
+.stat-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 0.75rem; padding: 1rem; }
+.stat-label { font-size: 0.75rem; color: #737373; text-transform: uppercase; letter-spacing: 0.05em; }
+.stat-value { font-size: 1.5rem; font-weight: 700; color: #171717; }
+\`\`\`
+The correct tokenization is:
+1. Map each property → \`bg-ak-elevated\`, \`border border-ak-border\`, \`rounded-ak-lg\`, \`p-ak-2\`,
+   \`text-ak-xs text-ak-text-secondary uppercase tracking-ak-wide\`, \`text-ak-2xl font-bold text-ak-text\`
+2. Apply those classes to the JSX elements that used \`.stat-card\`, \`.stat-label\`, \`.stat-value\`
+3. DELETE \`card.css\` and remove the \`import './card.css'\` line
+4. The result is zero CSS, all styling on \`className\`
 
 ## Colors
 | Raw Tailwind | AstralKit |
 |---|---|
 | \`bg-white\`, \`bg-gray-50\` | \`bg-ak-bg\` |
+| \`bg-black\` | \`bg-ak-inverse-surface\` |
+| \`text-white\` | \`text-ak-text-inverse\` |
+| \`text-black\` | \`text-ak-text\` |
 | \`bg-gray-100\` / \`bg-gray-200\` | \`bg-ak-surface\` / \`bg-ak-surface-2\` |
 | \`bg-gray-800\`/\`-900\`/\`-950\` (dark buttons) | \`bg-ak-primary\` (+ \`hover:bg-ak-primary-hover\`, \`text-ak-on-primary\`) |
 | \`text-gray-900\` / \`-600,-500\` / \`-400\` | \`text-ak-text\` / \`text-ak-text-secondary\` / \`text-ak-text-muted\` |
@@ -105,8 +206,40 @@ When converting a non-AstralKit screen, replace raw Tailwind with the nearest \`
 \`rounded-lg\`→\`rounded-ak-lg\`, \`rounded-xl\`→\`rounded-ak-xl\`, \`rounded-full\`→\`rounded-ak-full\` · \`text-sm\`→\`text-ak-sm\`, \`text-2xl\`→\`text-ak-2xl\` (body stays \`text-ak-base\` min).
 
 ## Also when tokenizing
+- ALL styling goes on \`className\` — never write component styling to globals.css, page.css,
+  or any stylesheet. If the source has external stylesheets with visual rules, EXTRACT the
+  properties, CONVERT each to the nearest \`ak-*\` utility class, APPLY them to the JSX
+  elements, DELETE the stylesheet file, and remove the import. globals.css keeps only the
+  theme/utilities imports + optional palette overrides.
 - Swap any icon library / inline \`<svg>\` UI icons → \`@phosphor-icons/react\` (confirm names via get_icons). Brand logos → search_logos.
 - Raise sub-16px body text to \`text-ak-base\`; add \`focus-visible\` rings and 48px touch targets.
 - Rebuild charts with the chart recipe (definite height + \`ak-chart-*\`). Add empty/loading/error states.
+
+## Dark mode
+AstralKit themes are structural — set \`data-ak-theme="dark"\` on the root (or a section)
+and the SAME semantic tokens flip to dark values automatically. You do NOT need a separate
+dark-mode crosswalk:
+| Token | Light | Dark |
+|---|---|---|
+| \`bg-ak-bg\` | near-white | near-black |
+| \`bg-ak-surface\` | light gray | dark gray |
+| \`text-ak-text\` | near-black | near-white |
+| \`border-ak-border\` | light gray | dark gray |
+The mapping is the same: \`bg-gray-50\` → \`bg-ak-bg\` whether the source is a light or dark
+app. The theme attribute does the flipping. **PRESERVE the source theme** — if the app is dark,
+set \`data-ak-theme="dark"\` and use the same semantic tokens (they auto-adapt). Never map a
+dark source to light tokens; that breaks the design.
+
+## CSS Modules (\`*.module.css\`)
+Treat CSS modules exactly like any other stylesheet: READ the file, EXTRACT each CSS property,
+FIND the equivalent \`ak-*\` utility class, APPLY the classes to the JSX elements, DELETE the
+\`.module.css\` file, and remove the import + all \`styles.*\` references. Replace
+\`className={styles.card}\` with \`className="bg-ak-elevated rounded-ak-xl ..."\`.
+
+## \`@apply\` directives
+If the source uses \`@apply\` in CSS (e.g. \`@apply p-4 bg-white rounded-lg\`), extract the
+utilities listed, convert each to its \`ak-*\` equivalent, apply them to the JSX \`className\`,
+and delete the CSS rule. NEVER convert \`@apply p-4\` to \`@apply p-ak-2\` — the goal is zero
+CSS for component styling. All styling belongs on the element's \`className\`.
 `;
 //# sourceMappingURL=crosswalk.js.map

package/dist/data/crosswalk.js.map

@@ -1 +1 @@
-{"version":3,"file":"crosswalk.js","sourceRoot":"","sources":["../../src/data/crosswalk.ts"],"names":[],"mappings":"AAAA,4CAA4C;AAC5C,gFAAgF;AAChF,2FAA2F;AAE3F,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;AACpE,mDAAmD;AACnD,MAAM,QAAQ,GAA6B;IACzC,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC;IAC7C,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC;IACtC,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;IAC7B,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC,EAAE,gCAAgC;CACrF,CAAC;AAEF,2EAA2E;AAC3E,MAAM,OAAO,GAA2B;IACtC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM;IAC1E,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ;IAC5E,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM;IACpE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO;CACvF,CAAC;AACF,MAAM,MAAM,GAA2B;IACrC,IAAI,EAAE,iBAAiB,EAAE,EAAE,EAAE,eAAe,EAAE,EAAE,EAAE,eAAe,EAAE,EAAE,EAAE,eAAe;IACtF,EAAE,EAAE,eAAe,EAAE,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,iBAAiB;CACpH,CAAC;AACF,MAAM,SAAS,GAA2B;IACxC,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,YAAY;IAC5F,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa;CAC7G,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,GAAW;IACtC,oCAAoC;IACpC,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,8HAA8H,CAAC,CAAC;IACxJ,IAAI,KAAK,EAAE,CAAC;QACV,MAAM,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC;QAC3C,MAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QACrC,IAAI,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YACnC,IAAI,MAAM,KAAK,IAAI;gBAAE,OAAO,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC;YAC5K,IAAI,MAAM,KAAK,MAAM;gBAAE,OAAO,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,cAAc,CAAC;YAC7H,IAAI,MAAM,KAAK,QAAQ,IAAI,MAAM,KAAK,QAAQ,IAAI,MAAM,KAAK,SAAS;gBAAE,OAAO,GAAG,MAAM,YAAY,CAAC;YACrG,IAAI,MAAM,KAAK,MAAM;gBAAE,OAAO,sBAAsB,CAAC;YACrD,OAAO,GAAG,MAAM,UAAU,CAAC;QAC7B,CAAC;QACD,KAAK,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;gBAAE,SAAS;YACrC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;gBACvB,IAAI,MAAM,KAAK,IAAI;oBAAE,OAAO,eAAe,CAAC;gBAC5C,IAAI,MAAM,KAAK,MAAM;oBAAE,OAAO,iBAAiB,CAAC;gBAChD,OAAO,GAAG,MAAM,aAAa,CAAC;YAChC,CAAC;YACD,IAAI,MAAM,KAAK,IAAI;gBAAE,OAAO,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;YACpF,IAAI,MAAM,KAAK,MAAM;gBAAE,OAAO,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC,WAAW,IAAI,OAAO,CAAC,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC;YACxF,OAAO,GAAG,MAAM,OAAO,IAAI,EAAE,CAAC;QAChC,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IACD,gDAAgD;IAChD,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,4FAA4F,CAAC,CAAC;IACtH,IAAI,KAAK,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAAE,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1E,SAAS;IACT,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,gDAAgD,CAAC,CAAC;IAC3E,IAAI,MAAM;QAAE,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,IAAI,IAAI,CAAC;IACnD,YAAY;IACZ,MAAM,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC,+CAA+C,CAAC,CAAC;IACxE,IAAI,IAAI;QAAE,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BxB,CAAC"}
+{"version":3,"file":"crosswalk.js","sourceRoot":"","sources":["../../src/data/crosswalk.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"polish.d.ts","sourceRoot":"","sources":["../../src/data/polish.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,cAAc;IAC7B,gGAAgG;IAChG,QAAQ,EAAE,MAAM,CAAC;IACjB,kIAAkI;IAClI,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAKD,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAsJxD,CAAC;AAEF,eAAO,MAAM,cAAc,UAA6B,CAAC;AA8DzD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAuC9D"}
+{"version":3,"file":"polish.d.ts","sourceRoot":"","sources":["../../src/data/polish.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,cAAc;IAC7B,gGAAgG;IAChG,QAAQ,EAAE,MAAM,CAAC;IACjB,kIAAkI;IAClI,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAKD,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAsJxD,CAAC;AAEF,eAAO,MAAM,cAAc,UAA6B,CAAC;AAkFzD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAuC9D"}

package/dist/data/polish.js

@@ -166,21 +166,37 @@ You are POLISHING an existing UI: making it look like it belongs to the AstralKi
 library while KEEPING its layout, content, and app behavior. This is a revamp, not
 a redesign, and it is more than token translation.
 
-Run these 6 phases in order:
+Run these 7 phases in order:
 
-1. TOKENIZE (the floor) — replace raw Tailwind with ak-* tokens using the crosswalk
-   from get_design_tokens. This alone is NOT polish; it is step 1.
+1. TOKENIZE (the floor) — replace raw Tailwind classes with ak-* utility classes
+   DIRECTLY ON EACH ELEMENT's className, using the crosswalk from get_design_tokens.
+   NEVER write CSS custom properties (var(--color-ak-*), var(--spacing-ak-*)) into
+   stylesheet files — that is NOT tokenization. If the source has external stylesheets
+   (page.css, component.css, or custom rules in globals.css), READ each one, EXTRACT
+   the CSS properties, FIND the equivalent ak-* utility class, APPLY them to the JSX
+   elements, then DELETE the stylesheet and remove its import. globals.css keeps only
+   theme/utilities imports + optional palette overrides. The end state is zero custom
+   CSS for visual styling. This alone is NOT polish; it is step 1.
 2. DIAGNOSE — score the current design against the Design-Smell Rubric below. Note
    every smell you find.
-3. MATCH — for each major region, identify its archetype, then:
+3. MATCH + INSTALL — for each major region, identify its archetype, then:
      search_components(query)  →  get_preview(slug)  →  get_component(slug, mode:"recipe")
-   The recipe gives the exact paddings, font sizes, weights, gaps, and surface tokens
-   to copy. (Use the per-archetype query + rules below as your starting point.)
+     →  install_component(slug)  →  RUN the install command
+   If a library component covers the region, INSTALL it and REPLACE the bespoke code —
+   import the installed component and re-content it (swap copy, nav, data) instead of
+   hand-copying values from the recipe. The installed component IS the polish — its
+   structure, spacing, and effects are the quality bar. Only fall back to copying
+   individual values when no library component fits the region as a whole.
+   (Use the per-archetype query + rules below as your starting point.)
 4. APPLY — copy those concrete values onto the existing markup, and make ONLY the
    additive structural changes allowed below.
 5. SELF-CHECK — run the Before/After Self-Check. If any item fails, go back to APPLY.
 6. BUILD — run validate_code and fix every diff, then actually build/typecheck. The
-   output must render with identical content and intact behavior.`;
+   output must render with identical content and intact behavior.
+7. LOOK — call screenshot_ui on the polished route (or verify_visual with the reference
+   slug you matched in phase 3) and answer its rubric item by item. Code checks cannot
+   see a missing image, a shrunken logo, or an unloaded font — this step can. Fix every
+   FAIL and re-capture until clean.`;
 const SMELL_RUBRIC = `## Design-Smell Rubric (diagnose, then fix to target)
 
 | Smell | Fix → target |
@@ -201,6 +217,7 @@ ALLOWED (additive, non-destructive):
 - Insert spacing/group containers to establish rhythm
 - Swap inline <svg> / emoji UI icons for Phosphor icons (confirm names via get_icons)
 - Promote a raw value into a badge/pill component
+- REPLACE a bespoke region entirely with an installed library component (re-contented with the app's real data)
 
 FORBIDDEN (that would make it a redesign, not a polish):
 - Removing or rewording content
@@ -215,7 +232,10 @@ const SELF_CHECK = `## Before/After Self-Check (the gate — all must pass)
 - [ ] Surfaces: cards/panels use border-ak-border, NOT shadow? Gradients only in hero?
 - [ ] Accent: is the accent color ≤ ~10% of the surface (60-30-10)?
 - [ ] Fidelity: is ALL original content present and are ALL handlers/props intact?
-- [ ] validate_code returns clean AND the project builds/type-checks.`;
+- [ ] validate_code returns clean AND the project builds/type-checks.
+- [ ] SEEN, not assumed: screenshot_ui / verify_visual was run on the final render and
+      every rubric item passed (images render, logo proportionate, no stray dark bands,
+      fonts loaded, nothing clipped).`;
 /**
  * Build the polish guidance string. With no archetypes, returns the full procedure +
  * rubric + structural rules + self-check + the archetype taxonomy. With archetypes,

package/dist/data/polish.js.map

@@ -1 +1 @@
-{"version":3,"file":"polish.js","sourceRoot":"","sources":["../../src/data/polish.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"polish.js","sourceRoot":"","sources":["../../src/data/polish.ts"],"names":[],"mappings":"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"}

package/dist/data/rules.d.ts

@@ -1,2 +1,2 @@
-export declare const CODING_STANDARDS = "# AstralKit Coding Standards\n\n## Setup\n- Package: `astralkit` (npm)\n- CSS: `@import \"astralkit/theme\"; @import \"astralkit/utilities\";` (after Tailwind imports)\n- Tailwind v3 plugin: `require('astralkit/tailwind.cjs')` in tailwind.config\n- Tailwind v4: `@import \"astralkit/theme-v4\"; @import \"astralkit/utilities\";`\n- Icons: `@phosphor-icons/react` exclusively. Never Lucide, Heroicons, or inline SVGs.\n- Fonts: Inter (body), DM Serif Display (display), JetBrains Mono (code)\n\n## Token-First Rule\nALWAYS use `ak-*` tokens. NEVER use arbitrary bracket values.\n```tsx\n// CORRECT\n<div className=\"p-ak-3 gap-ak-2 text-ak-base rounded-ak-lg\">\n// WRONG \u2014 arbitrary values silently collapse in Tailwind v4\n<div className=\"p-[1.5rem] gap-[1rem] text-[16px] rounded-[0.75rem]\">\n```\n\n## Semantic Colors \u2014 No Raw Tailwind\n```tsx\n// CORRECT: bg-ak-surface, text-ak-text, border-ak-border, bg-ak-primary\n// WRONG:   bg-gray-50, text-gray-900, border-gray-200, bg-blue-600\n```\n\n## Typography \u2014 16px Floor\n- Body text, descriptions, nav items, table cells: `text-ak-base` (16px) minimum\n- UI text: `font-medium` minimum \u2014 `font-normal` is for long-form prose only\n- Labels/badges: `text-ak-sm` (14px) or `text-ak-xs` (12px uppercase) acceptable\n- Helper/error text: `text-ak-sm` (14px) is the only exception\n\n## Spacing \u2014 ak-* Tokens Only\n```tsx\n// CORRECT: p-ak-3, gap-ak-2, mb-ak-1_5\n// WRONG:   p-6, gap-4, mb-3\n```\n\n## Icons \u2014 Phosphor Only\n```tsx\nimport { House, Gear } from '@phosphor-icons/react'\n<House size={20} aria-hidden=\"true\" />\n```\n\n## No Inline Styles\nUse Tailwind classes. `style={{}}` only for CSS variables with no Tailwind equivalent.\n\n## No Shadows on Panels/Dropdowns \u2014 Borders Only\nUse `border border-ak-border`. Reserve shadows for modals and elevated cards.\n\n## Motion \u2014 Framer Motion + CSS + Lenis (GSAP not allowed)\nFramer Motion (the MIT `motion` package) IS allowed. Prefer the AstralKit presets from\n`astralkit/motion` (tuned to the motion tokens, reduced-motion-safe). CSS animations are\nalso fine (durations/easings via `duration-ak-*`, `ease-ak-spring`/`bounce`). Use Lenis for\nsmooth scroll. ALWAYS honor `prefers-reduced-motion`. **GSAP is NOT allowed** (license).\n```tsx\nimport { motion, useReducedMotion } from 'motion/react'\nimport { fadeInUp, withReducedMotion } from 'astralkit/motion'\nconst reduced = useReducedMotion()\n<motion.div initial=\"hidden\" animate=\"show\" variants={withReducedMotion(fadeInUp, reduced)} />\n```\n\n## Premium Polish \u2014 Use the Effect Toolkit (with taste)\nAstralKit ships CSS-only premium effects \u2014 reach for them so screens feel designed, not generic:\n- Depth/glow: `ak-card-glow`, `ak-ambient-glow`, `ak-spotlight-card`, `ak-gradient-border`, `ak-text-glow`, `ak-surface-raised`\n- Backgrounds: `ak-mesh-light` / `ak-mesh-dark` / `ak-mesh-astral` (mesh gradients)\n- Motion accents (CSS): `ak-float`, `ak-scroll-fade`, `ak-section-fade`, `ak-sheen`, `ak-press` (tap feedback)\n- Color: tasteful accent (60-30-10); colorful charts use `ak-chart-1`..`ak-chart-6`; curated palettes via `astralkit/palettes`\n- Icons: Phosphor `weight=\"duotone\"` reads richer for feature/marketing icons\n\n### Effect guardrails (use the RIGHT effect on the RIGHT surface)\n- **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 \u2014 **do NOT put text-glow on dark text / light backgrounds.**\n- **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.\n- **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>`.\n- Don't stack many effects on one element; one accent treatment per focal point.\n\n## Layout primitives \u2014 don't fight responsive display\n`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):\n```tsx\n// WRONG \u2014 ak-stack's display:flex beats md:hidden, so it never hides\n<div className=\"md:hidden ak-stack\">\u2026</div>\n// RIGHT \u2014 wrap: toggle on the outer element, primitive inside\n<div className=\"md:hidden\"><div className=\"ak-stack\">\u2026</div></div>\n// or use plain flex/grid when you need to toggle visibility\n<div className=\"md:hidden flex flex-col\">\u2026</div>\n```\n\n## Charts \u2014 readable AND rendered (recipe)\nUse 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** \u2014 a common bug is `min-height` + `items-end`, which collapses the bars to zero. Use this pattern:\n```tsx\n{/* DEFINITE height (h-56) + stretched columns so %-height bars resolve */}\n<div className=\"flex h-56 items-stretch gap-ak-1\">\n  {data.map((v, i) => (\n    <div key={i} className=\"group flex flex-1 flex-col justify-end gap-ak-1\">\n      <div\n        className={(i === data.length - 1 ? 'bg-ak-primary' : 'bg-ak-chart-1') + ' w-full rounded-ak-md'}\n        style={{ height: `${Math.round((v / max) * 100)}%` }}  /* sanctioned data-driven inline style */\n        role=\"img\" aria-label={`${labels[i]}: ${v}`}\n      />\n      <span className=\"text-ak-xs text-ak-text-muted\">{labels[i]}</span>\n    </div>\n  ))}\n</div>\n```\n\n## Touch Targets \u2014 48px Minimum\n- Buttons: `min-h-[3rem]` + `cursor-pointer`\n- Form inputs: `h-14` (56px)\n\n## Empty States \u2014 Every Data Container\nEvery list, table, or feed must handle: Loading \u2192 Error \u2192 Empty \u2192 Data.\nEmpty states need: icon, title, description, CTA.\n\n## Error Handling \u2014 Never Show Raw Errors\nUser-facing errors need: title (jargon-free), description, action (Retry/Go Back).\n\n## cn() Utility\n```tsx\nimport { cn } from '@/lib/utils'\n<div className={cn(\"p-ak-3\", isActive && \"bg-ak-primary\")}>\n```\n\n## Theming Grammar \u2014 M3 Role System (60-30-10)\nEvery fill must use a ROLE, never resolve \"what color is this\" yourself:\n- **CTAs + binary on-states** (buttons, checked checkbox, toggle-ON): `bg-ak-primary text-ak-on-primary hover:bg-ak-primary-hover` \u2014 NEVER `bg-ak-text` for interactive fills.\n- **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`.\n- **Selected-not-pressed cards**: `bg-ak-primary-container border-ak-primary`.\n- **Inverted/dark panels** (terminals, dark rails, dark tooltips, promo cards): `bg-ak-inverse-surface text-ak-inverse-on-surface` \u2014 NEVER `bg-ak-text`, `bg-ak-neutral-900 text-white`, or raw `bg-black`/hex.\n- **Surfaces**: page canvas `bg-ak-surface` \u2192 paper cards/inputs `bg-ak-surface-container-lowest` (or legacy `bg-ak-bg`/`bg-ak-elevated`) \u2192 wells/tracks `bg-ak-surface-container` (`-high`/`-highest` deeper). Borders: `border-ak-outline-variant` (hairline) / `border-ak-outline`.\n- **Overlays**: `bg-ak-scrim`. **Status**: `ak-error(-container)`/`ak-success`/`ak-warning`/`ak-info` + their `-text`/`on-` partners.\n- 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.\nDefault theme: primary is black, secondary falls back to primary \u2014 monochrome by default, fully colorable by any theme.\n";
+export declare const CODING_STANDARDS = "# AstralKit Coding Standards\n\n## Rule Zero \u2014 Library-First Principle\nBefore writing ANY UI, call `search_components` to check if the library already has it. If a match\nexists: `install_component` \u2192 import \u2192 RE-CONTENT (swap placeholder copy, nav items, logo, sample\ndata for the app's real content). Hand-writing a component the library already provides is a failure\n\u2014 even if your hand-written version is token-compliant. The library sets the quality bar:\n- 3x\u20135x type size jumps between headings and body (not subtle increments)\n- Weight pairs: bold (700\u2013800) heroes, semibold (600) titles, medium (500) descriptions\n- Premium effects (`ak-card-glow`, `ak-mesh-*`, `ak-material-surface`) where appropriate\n- 60-30-10 color restraint (60% neutral, 30% secondary, 10% accent)\n- Zero external CSS \u2014 every visual property on the element's `className`\nIf NOTHING fits exactly: start from the CLOSEST recipe and modify it \u2014 never from a blank file.\n\n## Setup\n- Package: `astralkit` (npm)\n- CSS: `@import \"astralkit/theme\"; @import \"astralkit/utilities\";` (after Tailwind imports)\n- Tailwind v3 plugin: `require('astralkit/tailwind.cjs')` in tailwind.config\n- Tailwind v4: `@import \"astralkit/theme-v4\"; @import \"astralkit/utilities\";`\n- Icons: `@phosphor-icons/react` exclusively. Never Lucide, Heroicons, or inline SVGs.\n- Fonts: Inter (body), DM Serif Display (display), JetBrains Mono (code)\n\n## Token-First Rule\nALWAYS use `ak-*` tokens. NEVER use arbitrary bracket values.\n```tsx\n// CORRECT\n<div className=\"p-ak-3 gap-ak-2 text-ak-base rounded-ak-lg\">\n// WRONG \u2014 arbitrary values silently collapse in Tailwind v4\n<div className=\"p-[1.5rem] gap-[1rem] text-[16px] rounded-[0.75rem]\">\n```\n\n## Semantic Colors \u2014 No Raw Tailwind\n```tsx\n// CORRECT: bg-ak-surface, text-ak-text, border-ak-border, bg-ak-primary\n// WRONG:   bg-gray-50, text-gray-900, border-gray-200, bg-blue-600\n```\n\n## \u26A0 The AI Sizing Bias \u2014 you have it; counteract it deliberately\nAI coding models systematically undersize text and icons \u2014 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:\n1. **When uncertain, size UP one step \u2014 never down.** Your instinct to shrink is the bias talking.\n2. **Build hierarchy from the TOP down.** Set the largest text first (page title, hero display), then derive downward \u2014 body lands at 16px naturally. NEVER create hierarchy by shrinking secondary text below the floor (body 14 \u2192 meta 12 \u2192 caption 10 is the classic downward spiral).\n3. **Role ladder, not vibes:** hero/display \u2192 text-ak-5xl..7xl \u00B7 page title \u2192 text-ak-3xl/4xl semibold \u00B7 section/card title \u2192 text-ak-xl/2xl semibold \u00B7 body \u2192 text-ak-base (16px, THE FLOOR) \u00B7 secondary/meta \u2192 text-ak-sm (14px) medium \u00B7 text-ak-xs (12px) \u2192 tabular data annotations, legal, chart axes ONLY \u00B7 below 12px \u2192 almost never (it has legitimate uses, but they are rare and deliberate \u2014 dataviz tick labels, print fine-print).\n4. **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.\n5. **Measure, don't trust yourself:** audit_page reports a rendered font-size histogram \u2014 any visible text under 12px is an ERROR, 12-13px gets flagged for review. Run it; your eyes-in-code cannot feel size.\n\n## Typography \u2014 16px Floor\n- Body text, descriptions, nav items, table cells: `text-ak-base` (16px) minimum\n- UI text: `font-medium` minimum \u2014 `font-normal` is for long-form prose only\n- Labels/badges: `text-ak-sm` (14px) or `text-ak-xs` (12px uppercase) acceptable\n- Helper/error text: `text-ak-sm` (14px) is the only exception\n\n## Spacing \u2014 ak-* Tokens Only\n```tsx\n// CORRECT: p-ak-3, gap-ak-2, mb-ak-1_5\n// WRONG:   p-6, gap-4, mb-3\n```\n\n## Icons \u2014 Phosphor Only\n```tsx\nimport { House, Gear } from '@phosphor-icons/react'\n<House size={20} aria-hidden=\"true\" />\n```\n**Size floor:** meaningful icons (nav items, list/row leading icons, section markers, toggles' labels) are **20-24px** \u2014 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.\n\n## No Inline Styles, No External CSS for Styling\nUse Tailwind `ak-*` utility classes on the element's `className`. `style={{}}` only for\ngenuinely data-driven values (dynamic chart heights, computed percentages, map coordinates).\n**NEVER write visual styling to CSS files** (globals.css, page.css, component.css, etc.) \u2014\nthis includes `var(--color-ak-*)`, `var(--spacing-ak-*)`, or any other CSS custom property\nreference. If you find yourself writing `.my-card { background: var(--color-ak-surface) }`,\nyou are doing it wrong \u2014 write `className=\"bg-ak-surface\"` on the element instead.\nIf the source already has external stylesheets with visual rules, EXTRACT the properties,\nconvert each to the nearest `ak-*` utility class (see the crosswalk in get_design_tokens),\napply the classes to the JSX elements, DELETE the stylesheet, and remove the import.\n**globals.css is for theme/utilities imports + optional palette overrides only** \u2014 never\nfor component styling.\n\n## No Shadows on Panels/Dropdowns \u2014 Borders Only\nUse `border border-ak-border`. Reserve shadows for modals and elevated cards.\n\n## Motion \u2014 Framer Motion + CSS + Lenis (GSAP not allowed)\nFramer Motion (the MIT `motion` package) IS allowed. Prefer the AstralKit presets from\n`astralkit/motion` (tuned to the motion tokens, reduced-motion-safe). CSS animations are\nalso fine (durations/easings via `duration-ak-*`, `ease-ak-spring`/`bounce`). Use Lenis for\nsmooth scroll. ALWAYS honor `prefers-reduced-motion`. **GSAP is NOT allowed** (license).\n```tsx\nimport { motion, useReducedMotion } from 'motion/react'\nimport { fadeInUp, withReducedMotion } from 'astralkit/motion'\nconst reduced = useReducedMotion()\n<motion.div initial=\"hidden\" animate=\"show\" variants={withReducedMotion(fadeInUp, reduced)} />\n```\n\n## Premium Polish \u2014 Use the Effect Toolkit (with taste)\nAstralKit ships CSS-only premium effects \u2014 reach for them so screens feel designed, not generic:\n- Depth/glow: `ak-card-glow`, `ak-ambient-glow`, `ak-spotlight-card`, `ak-gradient-border`, `ak-text-glow`, `ak-surface-raised`\n- Backgrounds: `ak-mesh-light` / `ak-mesh-dark` / `ak-mesh-astral` (mesh gradients)\n- Motion accents (CSS): `ak-float`, `ak-scroll-fade`, `ak-section-fade`, `ak-sheen`, `ak-press` (tap feedback)\n- Color: tasteful accent (60-30-10); colorful charts use `ak-chart-1`..`ak-chart-6`; curated palettes via `astralkit/palettes`\n- Icons: Phosphor `weight=\"duotone\"` reads richer for feature/marketing icons\n\n### Effect guardrails (use the RIGHT effect on the RIGHT surface)\n- **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 \u2014 **do NOT put text-glow on dark text / light backgrounds.**\n- **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.\n- **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>`.\n- Don't stack many effects on one element; one accent treatment per focal point.\n\n## Layout primitives \u2014 don't fight responsive display\n`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):\n```tsx\n// WRONG \u2014 ak-stack's display:flex beats md:hidden, so it never hides\n<div className=\"md:hidden ak-stack\">\u2026</div>\n// RIGHT \u2014 wrap: toggle on the outer element, primitive inside\n<div className=\"md:hidden\"><div className=\"ak-stack\">\u2026</div></div>\n// or use plain flex/grid when you need to toggle visibility\n<div className=\"md:hidden flex flex-col\">\u2026</div>\n```\n\n## Breakpoints \u2014 collapse where content crushes, not at arbitrary md/lg\nThe breakpoint belongs where the content STARTS to crush, which is usually EARLIER than you think. Audit at three widths (1440 / 768 / 390) \u2014 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) \u2014 a shrunken or vanished desktop nav is a failure.\n\n## Charts \u2014 readable AND rendered (recipe)\nUse 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** \u2014 a common bug is `min-height` + `items-end`, which collapses the bars to zero. Use this pattern:\n```tsx\n{/* DEFINITE height (h-56) + stretched columns so %-height bars resolve */}\n<div className=\"flex h-56 items-stretch gap-ak-1\">\n  {data.map((v, i) => (\n    <div key={i} className=\"group flex flex-1 flex-col justify-end gap-ak-1\">\n      <div\n        className={(i === data.length - 1 ? 'bg-ak-primary' : 'bg-ak-chart-1') + ' w-full rounded-ak-md'}\n        style={{ height: `${Math.round((v / max) * 100)}%` }}  /* sanctioned data-driven inline style */\n        role=\"img\" aria-label={`${labels[i]}: ${v}`}\n      />\n      <span className=\"text-ak-xs text-ak-text-muted\">{labels[i]}</span>\n    </div>\n  ))}\n</div>\n```\n\n## Touch Targets \u2014 48px Minimum\n- Buttons: `min-h-[3rem]` + `cursor-pointer`\n- Form inputs: `h-14` (56px)\n\n## Empty States \u2014 Every Data Container\nEvery list, table, or feed must handle: Loading \u2192 Error \u2192 Empty \u2192 Data.\nEmpty states need: icon, title, description, CTA.\n\n## Error Handling \u2014 Never Show Raw Errors\nUser-facing errors need: title (jargon-free), description, action (Retry/Go Back).\n\n## cn() Utility\n```tsx\nimport { cn } from '@/lib/utils'\n<div className={cn(\"p-ak-3\", isActive && \"bg-ak-primary\")}>\n```\n\n## Theming Grammar \u2014 M3 Role System (60-30-10)\nEvery fill must use a ROLE, never resolve \"what color is this\" yourself:\n- **CTAs + binary on-states** (buttons, checked checkbox, toggle-ON): `bg-ak-primary text-ak-on-primary hover:bg-ak-primary-hover` \u2014 NEVER `bg-ak-text` for interactive fills.\n- **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`.\n- **Selected-not-pressed cards**: `bg-ak-primary-container border-ak-primary`.\n- **Inverted/dark panels** (terminals, dark rails, dark tooltips, promo cards): `bg-ak-inverse-surface text-ak-inverse-on-surface` \u2014 NEVER `bg-ak-text`, `bg-ak-neutral-900 text-white`, or raw `bg-black`/hex.\n- **Surfaces**: page canvas `bg-ak-surface` \u2192 paper cards/inputs `bg-ak-surface-container-lowest` (or legacy `bg-ak-bg`/`bg-ak-elevated`) \u2192 wells/tracks `bg-ak-surface-container` (`-high`/`-highest` deeper). Borders: `border-ak-outline-variant` (hairline) / `border-ak-outline`.\n- **Overlays**: `bg-ak-scrim`. **Status**: `ak-error(-container)`/`ak-success`/`ak-warning`/`ak-info` + their `-text`/`on-` partners.\n- 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.\nDefault theme: primary is black, secondary falls back to primary \u2014 monochrome by default, fully colorable by any theme.\n\n## Gotchas \u2014 Silent Failures\nThese will NOT throw errors. The UI will silently break and you won't know unless you look:\n- **Underscore, not dot** \u2014 `ak-1_5`, NOT `ak-1.5`. Dot notation silently collapses to zero in Tailwind v4. Your spacing/padding will render as 0.\n- **No `/opacity` on ak-* tokens** \u2014 `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`.\n- **Non-existent ak-* class names render nothing** \u2014 no error, no warning, just invisible. Always verify token names exist in the token reference (get_design_tokens).\n- **Portalled overlays escape theme scope** \u2014 Radix portals mount outside your `data-ak-theme` wrapper. Wrap portalled content in a theme provider or set the attribute on the portal container.\n- **Avatar sizing** \u2014 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.\n- **Layout primitives override display** \u2014 `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.\n\n## Preflight Gates \u2014 validate_code Is Not a Compiler\n`validate_code` checks AstralKit conventions. It does NOT catch syntax errors, type errors, or\nruntime bugs. After validate_code passes, you MUST also run:\n1. `npx tsc --noEmit` \u2014 type-check\n2. `npm run build` (or `next build`) \u2014 full build\n3. Runtime verify \u2014 `next start` + check the actual URL renders correctly\n4. Visual verify \u2014 `verify_visual` or `screenshot_ui` (premium), or use your own browser tools\n`npm run dev` working proves nothing \u2014 it skips type-checking and many build errors.\n";
 //# sourceMappingURL=rules.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"rules.d.ts","sourceRoot":"","sources":["../../src/data/rules.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,gtPAmI5B,CAAC"}
+{"version":3,"file":"rules.d.ts","sourceRoot":"","sources":["../../src/data/rules.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,q+bAuL5B,CAAC"}

package/dist/data/rules.js

@@ -1,5 +1,17 @@
 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)
@@ -23,6 +35,14 @@ ALWAYS use \`ak-*\` tokens. NEVER use arbitrary bracket values.
 // 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
@@ -40,9 +60,20 @@ ALWAYS use \`ak-*\` tokens. NEVER use arbitrary bracket values.
 import { House, Gear } from '@phosphor-icons/react'
 <House size={20} aria-hidden="true" />
 \`\`\`
-
-## No Inline Styles
-Use Tailwind classes. \`style={{}}\` only for CSS variables with no Tailwind equivalent.
+**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.
@@ -84,6 +115,9 @@ AstralKit ships CSS-only premium effects — reach for them so screens feel desi
 <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
@@ -129,5 +163,23 @@ Every fill must use a ROLE, never resolve "what color is this" yourself:
 - **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/rules.js.map

@@ -1 +1 @@
-{"version":3,"file":"rules.js","sourceRoot":"","sources":["../../src/data/rules.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmI/B,CAAC"}
+{"version":3,"file":"rules.js","sourceRoot":"","sources":["../../src/data/rules.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuL/B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"screens.d.ts","sourceRoot":"","sources":["../../src/data/screens.ts"],"names":[],"mappings":"AAoJA,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAQpD,CAAC;AAEF,eAAO,MAAM,YAAY,UAAiC,CAAC;AAE3D,iEAAiE;AACjE,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAY/D"}
+{"version":3,"file":"screens.d.ts","sourceRoot":"","sources":["../../src/data/screens.ts"],"names":[],"mappings":"AAoLA,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAQpD,CAAC;AAEF,eAAO,MAAM,YAAY,UAAiC,CAAC;AAE3D,iEAAiE;AACjE,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAY/D"}

package/dist/data/screens.js

@@ -25,7 +25,13 @@ Global KPIs first (top-left — F/Z scan), then charts/trends, then tabular deta
 ## AstralKit pieces
 - Categories: sidebars, top-bars, data-display.
 - search_components: "analytics dashboard", "stats overview", "data table".
-- polish_ui archetypes: stat-tile, table, sidebar, top-bar, section-header.`;
+- polish_ui archetypes: stat-tile, table, sidebar, top-bar, section-header.
+
+## Asset generation
+If you have access to image/video generation tools (e.g., Higgsfield generate_image):
+- Generate chart placeholder imagery and empty-state illustrations BEFORE building components.
+- Use search_logos for any brand marks in the data.
+- Call get_art_direction("dashboard") for detailed visual direction on asset types and styles.`;
 const NAV = `# Screen Blueprint: Navigation (top bar, mega-menu, mobile menu)
 
 ## Structure
@@ -34,6 +40,7 @@ Top bar: brand left, primary links center/left, actions (search, account, CTA) r
 ## Must-haves
 - Desktop links hidden behind a hamburger on mobile: nav links 'hidden md:flex', hamburger 'md:hidden'. The mobile menu must actually exist and be reachable — desktop-only navs are the most common responsiveness bug.
 - Mobile menu = a Radix Dialog used as a side sheet (w-[85vw] max-w-sm): traps focus, closes on Escape AND on route change.
+- For APP screens (dashboard/settings/workspace), a bottom tab bar often beats a hamburger: the 2-3 primary destinations as fixed bottom tabs (48px+ targets, labels under icons) plus a "More" tab opening a Radix Sheet/drawer with the rest. Thumb-reachable beats top-corner hamburgers for daily-use apps.
 - Mega-menu collapses to a stacked accordion (<details> or Radix Accordion) inside the mobile drawer.
 - Mark the current page (aria-current="page"); keyboard-operable; visible focus rings.
 - Sticky bars: don't trap scroll; ensure overlay menus sit above content (z-index) and over the themed surface.
@@ -44,7 +51,18 @@ Desktop-only nav (no mobile menu); a custom click-dropdown for the mobile menu i
 ## AstralKit pieces
 - Categories: top-bars, sidebars, overlays.
 - search_components: "navigation bar", "mega menu", "mobile menu".
-- polish_ui archetypes: top-bar, sidebar-nav.`;
+- polish_ui archetypes: top-bar, sidebar-nav.
+
+## Completeness check (CRITICAL)
+After adapting a nav recipe, call get_component for the SAME slug and verify you carried over ALL of:
+- Mobile menu (hamburger trigger + Radix Dialog side-sheet) — the #1 omission
+- Click-outside dismiss on dropdowns (useRef + useEffect or Radix built-in)
+- Keyboard navigation (arrow keys through nav items, Escape to close)
+- Focus trapping inside mobile drawer and dropdown panels
+- Active/current page indicator (aria-current="page" + visible styling)
+- Overlay surface treatment on ALL dropdowns: bg-ak-elevated + border border-ak-border + shadow-lg
+- Responsive breakpoints (hidden md:flex for desktop links, md:hidden for hamburger)
+Partial extraction of a recipe is a failure — the recipe is the quality bar.`;
 const PRICING = `# Screen Blueprint: Pricing
 
 ## Structure
@@ -81,7 +99,14 @@ Multiple competing CTAs of equal weight; a hero that buries the value prop; stoc
 ## AstralKit pieces
 - Categories: footers, pricing (teaser).
 - search_components: "hero section", "feature section", "testimonials", "footer".
-- polish_ui archetypes: hero, section-header, footer (flagship — copy the full treatment).`;
+- polish_ui archetypes: hero, section-header, footer (flagship — copy the full treatment).
+
+## Asset generation
+If you have access to image/video generation tools (e.g., Higgsfield generate_image):
+- Generate hero photos, product mockups, or illustrations BEFORE building the hero section.
+- Generate feature icons or section illustrations for alternating feature blocks.
+- Use search_logos for trust strips and social proof sections.
+- Call get_art_direction("hero") or get_art_direction("marketing") for detailed guidance on styles, moods, and composition.`;
 const AUTH = `# Screen Blueprint: Auth (sign in / sign up / reset)
 
 ## Structure
@@ -100,7 +125,13 @@ Errors shown as toasts instead of inline; no loading state (double-submits); raw
 ## AstralKit pieces
 - Categories: forms, overlays.
 - search_components: "login form", "sign up form".
-- polish_ui archetypes: form (flagship), form-field, button.`;
+- polish_ui archetypes: form (flagship), form-field, button.
+
+## Asset generation
+If you have access to image/video generation tools (e.g., Higgsfield generate_image):
+- Generate a background image or brand illustration for the auth page.
+- Use search_logos for social sign-in button logos (Google, GitHub, Apple, etc.).
+- Call get_art_direction("auth") for guidance on imagery that complements a focused auth layout.`;
 const ONBOARDING = `# Screen Blueprint: Onboarding
 
 ## Structure
@@ -127,6 +158,7 @@ Sectioned page (account, security, billing, notifications, danger zone) with a s
 
 ## Must-haves
 - Group related fields; clear section headers; generous vertical rhythm.
+- Mobile: the section sub-nav must transform — left rail becomes horizontally scrollable pill tabs at the top, or a bottom tab bar (2-3 primary sections + "More" opening a Radix Sheet). A rail that just narrows or disappears is a failure. Audit at 768 too: two-column field grids stack BEFORE labels/inputs crush.
 - Dirty/save state: a save button that enables only on change, shows saving/saved feedback, and surfaces errors inline (not a toast for field errors). Destructive actions (delete account) sit in a clearly separated danger zone behind a confirm Dialog.
 - Optimistic or clearly-pending toggles; success confirmation for saved changes (toast OK for global success).
 - Each form field follows the form-field rules (label above font-medium text-ak-sm, 48px control, helper/error below, focus ring).

package/dist/data/screens.js.map

@@ -1 +1 @@
-{"version":3,"file":"screens.js","sourceRoot":"","sources":["../../src/data/screens.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,2EAA2E;AAC3E,8EAA8E;AAC9E,iFAAiF;AACjF,8EAA8E;AAC9E,6EAA6E;AAC7E,EAAE;AACF,uEAAuE;AACvE,iFAAiF;AACjF,mEAAmE;AAEnE,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;4EAiB0D,CAAC;AAE7E,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;8CAkBkC,CAAC;AAE/C,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;6EAkB6D,CAAC;AAE9E,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;2FAiByE,CAAC;AAE5F,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;;;6DAkBgD,CAAC;AAE9D,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;qEAkBkD,CAAC;AAEtE,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;8DAiB6C,CAAC;AAE/D,MAAM,CAAC,MAAM,iBAAiB,GAA2B;IACvD,SAAS,EAAE,SAAS;IACpB,GAAG,EAAE,GAAG;IACR,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,IAAI;IACV,UAAU,EAAE,UAAU;IACtB,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;AAE3D,iEAAiE;AACjE,MAAM,UAAU,oBAAoB,CAAC,UAAkB;IACrD,MAAM,EAAE,GAAG,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACzC,IAAI,EAAE,EAAE,CAAC;QACP,OAAO,CACL,EAAE;YACF,4GAA4G;YAC5G,mQAAmQ,CACpQ,CAAC;IACJ,CAAC;IACD,OAAO,CACL,qBAAqB,UAAU,8BAA8B,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CACxF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"screens.js","sourceRoot":"","sources":["../../src/data/screens.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,2EAA2E;AAC3E,8EAA8E;AAC9E,iFAAiF;AACjF,8EAA8E;AAC9E,6EAA6E;AAC7E,EAAE;AACF,uEAAuE;AACvE,iFAAiF;AACjF,mEAAmE;AAEnE,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;+FAuB6E,CAAC;AAEhG,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EA8BiE,CAAC;AAE9E,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;6EAkB6D,CAAC;AAE9E,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;4HAwB0G,CAAC;AAE7H,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;;;;;;;;;iGAwBoF,CAAC;AAElG,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;qEAkBkD,CAAC;AAEtE,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;8DAkB6C,CAAC;AAE/D,MAAM,CAAC,MAAM,iBAAiB,GAA2B;IACvD,SAAS,EAAE,SAAS;IACpB,GAAG,EAAE,GAAG;IACR,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,IAAI;IACV,UAAU,EAAE,UAAU;IACtB,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;AAE3D,iEAAiE;AACjE,MAAM,UAAU,oBAAoB,CAAC,UAAkB;IACrD,MAAM,EAAE,GAAG,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACzC,IAAI,EAAE,EAAE,CAAC;QACP,OAAO,CACL,EAAE;YACF,4GAA4G;YAC5G,mQAAmQ,CACpQ,CAAC;IACJ,CAAC;IACD,OAAO,CACL,qBAAqB,UAAU,8BAA8B,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CACxF,CAAC;AACJ,CAAC"}

package/dist/data/theming.d.ts

@@ -0,0 +1,2 @@
+export declare const THEMING = "# AstralKit Theming \u2014 never ship default monochrome\n\nThe library ships **16 designed palettes**. A screen left on the bare default\ntheme reads as an unfinished template. UNLESS the brand is deliberately\nmonochrome, picking a palette is part of building the screen \u2014 not an optional\npolish step.\n\n## How to apply a palette (2 steps)\n\n1. Import the palette stylesheet once (globals.css or root layout):\n   `@import 'astralkit/palettes';`  (CSS) or `import 'astralkit/palettes'` (JS entry)\n2. Set the palette id on the root (or any container to scope it):\n   `<html data-ak-theme=\"indigo-craft\">` \u2014 every ak-* token re-resolves automatically.\n\nThat's it. No class changes: bg-ak-primary, text-ak-text, borders, gradients all\nre-theme because the palette re-declares the CSS variables.\n\nFor runtime/theme-builder scenarios, `astralkit/presets` exports the same\npalettes as data (`THEME_PALETTES`, `paletteToAkVariables()` \u2192 129 vars).\n\n## The catalog \u2014 pick by brand mood\n\n### Light palettes\n| id | mood \u2014 when to pick |\n|---|---|\n| astral-default | Violet on warm paper. The house default \u2014 good for dev tools, builders. |\n| warm-earth | Teal primary, coral highlights. Friendly, human, wellness/community products. |\n| slate-pro | Professional gray + blue accent. Fintech, B2B ops, \"serious software\". |\n| indigo-craft | Warm neutral + indigo. Productivity, project management, calm focus. |\n| medtrackr | Clean white + emerald + mint washes. Healthcare, success-coded domains. |\n| periwinkle | Lavender-white + vivid periwinkle. Fitness, lifestyle, consumer SaaS. |\n| scout-cyan | Crisp white + deep sky-cyan. Analytics, referral/growth dashboards. |\n| pulse | Bone neutrals, ink CTAs, volt-lime selection. High-energy, sporty, bold. |\n| logozap | Warm paper + Zap Blue. Creative tools, brand-forward products. |\n\n### Dark palettes\n| id | mood \u2014 when to pick |\n|---|---|\n| volt-noir | True black + volt-lime CTAs. Dark sibling of pulse \u2014 gyms, gaming, energy. |\n| neon-noir | Deep violet-black + periwinkle glow. Nightlife, entertainment, web3. |\n| astral-ultraviolet | Deep violet-black, rich purple gradients, coral pulse. Premium dark SaaS. |\n| plasma-orbit | Black-blue + electric indigo/cyan/violet. Data-heavy dark dashboards. |\n| lunar-citron | Obsidian + lavender depth + citron energy. Editorial dark, portfolios. |\n| magenta-circuit | Charcoal + hot magenta + data-green hits. Dev tools, monitoring, cyber. |\n| deep-teal | Dark ocean teal + golden accent. Calm dark, finance, maritime. |\n\n## How to choose (30 seconds, not a project)\n\n1. Read the brief for mood words: \"premium\" \u2192 astral-ultraviolet/slate-pro;\n   \"friendly\" \u2192 warm-earth/periwinkle; \"energetic\" \u2192 pulse/volt-noir;\n   \"professional PM/productivity\" \u2192 indigo-craft/slate-pro.\n2. PRESERVE an existing app's mode \u2014 dark app gets a dark palette, never flipped.\n3. Say which palette you chose and why in one line. If the user named brand\n   colors that match no palette, use the closest palette and override the\n   primary tokens in globals.css \u2014 never invent a full ad-hoc color system.\n\n## Anti-patterns\n\n- Shipping the bare default theme for a branded product (\"black and white\n  template syndrome\") \u2014 the single most common cold-build failure.\n- Hardcoding hexes on elements instead of applying a palette.\n- Mixing palettes across sections of one app (one palette per app; scoped\n  data-ak-theme only for deliberate contrast panels).\n- Flipping a dark app to a light palette (or vice versa).\n- Forgetting the 60-30-10 rule still applies WITHIN a palette: neutral canvas\n  dominates; the palette's accent belongs on CTAs and active states only.";
+//# sourceMappingURL=theming.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theming.d.ts","sourceRoot":"","sources":["../../src/data/theming.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO,qsHAiEsD,CAAC"}