@astralkit/mcp 1.2.0 → 1.2.1

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## 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";
+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";
 //# 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,w8KA6G5B,CAAC"}
+{"version":3,"file":"rules.d.ts","sourceRoot":"","sources":["../../src/data/rules.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,ytMAwH5B,CAAC"}

package/dist/data/rules.js

@@ -73,6 +73,17 @@ AstralKit ships CSS-only premium effects — reach for them so screens feel desi
 - **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>
+\`\`\`
+
 ## 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

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6G/B,CAAC"}
+{"version":3,"file":"rules.js","sourceRoot":"","sources":["../../src/data/rules.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwH/B,CAAC"}

package/dist/server.js

@@ -7,7 +7,7 @@ import { DESIGN_TOKENS } from './data/tokens.js';
 import { CODING_STANDARDS } from './data/rules.js';
 import { PHOSPHOR_ICONS, PHOSPHOR_ICON_NAMES } from './data/icons.js';
 import { SETUP } from './data/setup.js';
-const VERSION = '1.2.0';
+const VERSION = '1.2.1';
 // The golden path — surfaced as server `instructions` so even a naive agent
 // (one that just gets "build X") self-guides to design-system-quality output.
 const SERVER_INSTRUCTIONS = `AstralKit builds polished, accessible, on-brand UI with a design-token system.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astralkit/mcp",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "AstralKit MCP Server — search, browse, and install UI components from any AI coding tool",
   "type": "module",
   "bin": {