@urbicon-ui/mcp-server 6.19.3 → 6.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbicon-ui/mcp-server",
-  "version": "6.19.3",
+  "version": "6.21.0",
   "description": "Model Context Protocol server exposing the Urbicon UI component catalog, recipes and design intelligence to LLM agents",
   "license": "MIT",
   "repository": {
@@ -32,8 +32,8 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.29.0",
-    "@urbicon-ui/design-content": "6.19.3",
-    "@urbicon-ui/design-engine": "6.19.3",
+    "@urbicon-ui/design-content": "6.21.0",
+    "@urbicon-ui/design-engine": "6.21.0",
     "zod": "^4.3.6"
   },
   "devDependencies": {

package/src/tools/get-css-reference.test.ts

@@ -16,11 +16,15 @@ import { OVERVIEW, SECTIONS } from './get-css-reference.js';
  * assert each is documented, so a newly added token can no longer disappear.
  *
  * Scope: the three families `get_css_reference` enumerates exhaustively (one row
- * per token). It deliberately does NOT require every intent scale step
- * (`primary-50 … primary-950`, documented via shorthand), feedback/interactive,
- * chart, or internal-only token (e.g. `skeleton-shimmer`, used by the Skeleton
- * wave, never a consumer utility) to be spelled out. Whole-set token validity is
- * already guarded by design-engine's `tokens.test.ts`.
+ * per token), plus a lighter check that every intent is at least *named* (its base
+ * `--color-<intent>` token or a `bg-<intent>` utility appears in the prose) — the
+ * F-B drift where a whole intent (`info`, a real ramp behind `bg-info` /
+ * `--color-feedback-info`) went undocumented while the six others were listed. It
+ * deliberately does NOT require every intent scale step (`primary-50 … primary-950`,
+ * documented via shorthand), feedback/interactive, chart, or internal-only token
+ * (e.g. `skeleton-shimmer`, used by the Skeleton wave, never a consumer utility) to
+ * be spelled out. Whole-set token validity is already guarded by design-engine's
+ * `tokens.test.ts`.
  */
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -55,6 +59,15 @@ function deriveSemanticCores(family: string): string[] {
   return [...cores].sort();
 }
 
+/** Intent names from the `=== X INTENT ===` section markers in the CSS — robust to
+ * the multi-line `--color-neutral` definition a self-referential regex would miss. */
+function deriveIntents(): string[] {
+  const css = readFileSync(semantic, 'utf-8');
+  const cores = new Set<string>();
+  for (const m of css.matchAll(/=== ([A-Z-]+) INTENT ===/g)) cores.add(m[1]!.toLowerCase());
+  return [...cores].sort();
+}
+
 describe.skipIf(!cssAvailable)('get_css_reference token drift guard', () => {
   for (const { family } of TABLED_FAMILIES) {
     it(`documents every semantic \`${family}-*\` token defined in the CSS`, () => {
@@ -74,4 +87,14 @@ describe.skipIf(!cssAvailable)('get_css_reference token drift guard', () => {
       );
     });
   }
+
+  it('names every intent defined in the CSS (base token or utility)', () => {
+    const missing = deriveIntents().filter(
+      (c) => !ALL_CONTENT.includes(`--color-${c}`) && !ALL_CONTENT.includes(`bg-${c}`)
+    );
+    expect(
+      missing,
+      `Intents in the CSS but absent from get_css_reference: ${missing.join(', ')}`
+    ).toEqual([]);
+  });
 });

package/src/tools/get-css-reference.ts

@@ -5,7 +5,7 @@ export const OVERVIEW = `# Urbicon UI — CSS Design Tokens
 
 ## Architecture
 Three CSS layers, imported in order:
-1. \`foundation.css\` — Raw OKLCH color scales (neutral, primary, secondary, success, warning, danger)
+1. \`foundation.css\` — Raw OKLCH color scales (neutral, warm-neutral, primary, secondary, success, warning, danger, info)
 2. \`semantic.css\` — Purpose-based tokens that reference foundation (\`--color-surface-base\`, \`--color-text-primary\`, etc.)
 3. \`interaction.css\` — Animation timing, easing, shadows, focus rings
 
@@ -50,7 +50,7 @@ The \`@theme\` block sets the Tailwind utility value. The \`:root\` rule overrid
 → \`get_css_reference(section="surfaces")\` — 11 surface background tokens
 → \`get_css_reference(section="text")\` — 9 text color tokens
 → \`get_css_reference(section="borders")\` — 5 border color tokens
-→ \`get_css_reference(section="intents")\` — 6 intent palettes (primary, success, danger, etc.)
+→ \`get_css_reference(section="intents")\` — 6 component intents + the \`info\` status colour, feedback + interactive tokens
 → \`get_css_reference(section="shadows")\` — 5 shadow tokens + z-index scale
 → \`get_css_reference(section="theming")\` — How to create custom themes, available presets
 `;
@@ -137,7 +137,7 @@ Also available for intent-colored borders:
 
 const INTENTS = `# Intent Color System
 
-6 intent palettes, each with 5 semantic variants + 11 foundation steps.
+6 component intents (primary, secondary, success, warning, danger, neutral) plus a status \`info\` colour — each a full palette with 5 semantic variants + 11 foundation steps.
 
 ## Semantic Intent Tokens (auto dark mode)
 
@@ -151,7 +151,9 @@ Each intent has these variants (example: \`primary\`):
 | \`--color-primary-subtle\` | \`bg-primary-subtle\` | Soft background | primary-50 | primary-900 |
 | \`--color-primary-emphasis\` | \`bg-primary-emphasis\` | Strong/dark variant | primary-900 | — |
 
-Same pattern applies to: \`success-*\`, \`warning-*\`, \`danger-*\`, \`secondary-*\`, \`neutral-*\`
+Same pattern applies to: \`success-*\`, \`warning-*\`, \`danger-*\`, \`secondary-*\`, \`neutral-*\`.
+
+\`info-*\` has the identical shape (\`--color-info\`, \`-hover\`, \`-active\`, \`-subtle\`, \`-emphasis\` → \`bg-info\`, \`text-info\`, \`bg-info-subtle\`, …) — the status/feedback blue (hue 220) behind Alert/Toast/Tooltip's info state, \`--color-feedback-info\`, and \`--color-chart-5\`. It is NOT in the global \`ComponentIntent\` union above: the feedback components with a built-in info state (Alert, Toast, Tooltip) do accept \`intent="info"\`, but generic components (Button, Badge, …) take the six-value union, so on those reach for the \`bg-info\`/\`text-info\` utilities rather than \`intent="info"\`.
 
 ## Foundation Intent Scales
 
@@ -163,16 +165,21 @@ Each intent has 11 numbered steps (50–950) for granular control:
 --color-danger-50    through  --color-danger-950
 --color-secondary-50 through  --color-secondary-950
 --color-neutral-50   through  --color-neutral-950
+--color-info-50      through  --color-info-950
 \`\`\`
 
+Two ramps carry stops beyond the standard 50–950:
+- \`neutral\` adds finer steps — \`--color-neutral-0\` (pure white), \`-25\`, \`-650\`, \`-750\`, \`-850\` — so \`bg-neutral-650\` and friends are real tokens (they drive the surface/border light↔dark mappings), not hallucinations.
+- \`--color-warm-neutral-50\` through \`-950\` is a separate warm-tinted greyscale ramp; the \`neutral\` intent borrows its lightness profile (see the theming section) rather than exposing it as a surface.
+
 Tailwind usage: \`bg-primary-500\`, \`text-danger-700\`, \`border-success-300\`, etc.
 
 ## Feedback Tokens (for status messages)
 
 | CSS Variable | Tailwind Utility | Maps to |
 |---|---|---|
-| \`--color-feedback-info\` | \`bg-feedback-info\` / \`text-feedback-info\` | primary-500 |
-| \`--color-feedback-info-subtle\` | \`bg-feedback-info-subtle\` | primary-50 |
+| \`--color-feedback-info\` | \`bg-feedback-info\` / \`text-feedback-info\` | info-500 |
+| \`--color-feedback-info-subtle\` | \`bg-feedback-info-subtle\` | info-50 |
 | \`--color-feedback-success\` | \`bg-feedback-success\` / \`text-feedback-success\` | success-500 |
 | \`--color-feedback-success-subtle\` | \`bg-feedback-success-subtle\` | success-50 |
 | \`--color-feedback-warning\` | \`bg-feedback-warning\` / \`text-feedback-warning\` | warning-500 |

package/src/tools/suggest-implementation.ts

@@ -81,7 +81,7 @@ const IMPLEMENTATION_RULES = `## Implementation Rules
 - **Vary visual weight** — Don't use the same Card variant/padding everywhere. Reading-flow content → \`variant="quiet"\` (default) + \`padding="md"\`. Architectural delineation → \`variant="outlined"\` + \`padding="md"\`. Lifted content (cards-on-page) → \`variant="elevated"\` + \`padding="lg"\`. Popover-family floating surfaces → \`variant="floating"\`.
 - **Color = meaning** — Neutral surfaces dominate (80–90%). Use \`intent\` colors ONLY for semantic meaning (status, severity, actions) — never as decoration.
 - **Spacing = hierarchy** — Tight (\`gap-2\`/\`gap-3\`) within related items. Generous (\`gap-8\`/\`gap-10\`) between sections. Don't use uniform spacing everywhere.
-- **Commit to a radius** — Pick a radius philosophy (\`rounded-lg\`, \`rounded-xl\`, or \`rounded-2xl\`) and apply it consistently via \`class\` or \`slotClasses\`. Don't rely solely on component defaults.
+- **Commit to a radius** — Pick one radius philosophy and apply it consistently — cleanest via the semantic tier tokens (\`--radius-commit\`/\`-modify\`/\`-contain\`) or \`BlocksProvider\` defaults, so a whole component family moves together. Don't round a single component out of step with its peers, and don't just leave the bland defaults untouched.
 - **Data-driven styling** — Different states/severities should look visually distinct (vary padding, font-weight, Badge variant, text color) — not just carry a different label.
 - **Don't copy recipe styling** — Recipes show ONE interpretation. Create YOUR visual identity with your own spacing rhythm, color distribution, and layout density.
 `;