@urbicon-ui/mcp-server 6.19.3 → 6.21.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbicon-ui/mcp-server",
-  "version": "6.19.3",
+  "version": "6.21.1",
   "description": "Model Context Protocol server exposing the Urbicon UI component catalog, recipes and design intelligence to LLM agents",
   "license": "MIT",
   "repository": {
@@ -32,13 +32,13 @@
   },
   "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.1",
+    "@urbicon-ui/design-engine": "6.21.1",
     "zod": "^4.3.6"
   },
   "devDependencies": {
     "typescript": "^6.0.3",
-    "@types/node": "^25.9.4",
+    "@types/node": "^25.9.5",
     "vitest": "^4.1.9"
   }
 }

package/src/data/design-system-loader.ts

@@ -88,8 +88,8 @@ function extractDescription(content: string): string {
   if (titleIdx === -1) return '';
 
   for (let i = titleIdx + 1; i < lines.length; i++) {
-    const line = lines[i]!.trim();
-    if (line === '') continue;
+    const line = lines[i]?.trim();
+    if (!line) continue;
     if (line.startsWith('#')) break;
     return line;
   }
@@ -115,7 +115,7 @@ export function extractPrincipleSection(content: string, topic: PrincipleTopic):
 
   let endIdx = lines.length;
   for (let i = startIdx + 1; i < lines.length; i++) {
-    if (/^## /.test(lines[i]!)) {
+    if (/^## /.test(lines[i] ?? '')) {
       endIdx = i;
       break;
     }

package/src/tools/find-icons.ts

@@ -36,8 +36,9 @@ export function registerFindIconsTool(server: McpServer): void {
       const byCategory = new Map<string, typeof icons>();
       for (const icon of icons) {
         for (const cat of icon.categories) {
-          if (!byCategory.has(cat)) byCategory.set(cat, []);
-          byCategory.get(cat)!.push(icon);
+          const bucket = byCategory.get(cat);
+          if (bucket) bucket.push(icon);
+          else byCategory.set(cat, [icon]);
         }
       }
 

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 |
@@ -229,8 +236,8 @@ Shadows automatically increase opacity in dark mode (0.05 → 0.2 for xs, etc.).
 | \`--z-hide\` | -1 | Hidden |
 | \`--z-base\` | 0 | Default |
 | \`--z-docked\` | 10 | Docked elements |
-| \`--z-dropdown\` | 9999 | Menus, listboxes, floating panels |
 | \`--z-sticky\` | 1100 | Sticky headers |
+| \`--z-dropdown\` | 1150 | Menus, listboxes, floating panels (above sticky, below banner) |
 | \`--z-banner\` | 1200 | Banners |
 | \`--z-overlay\` | 1300 | Overlays |
 | \`--z-sidebar\` | 1350 | Sidebars |
@@ -338,7 +345,7 @@ For a temperature-free, true grayscale chassis (content-focused UIs), set chroma
 
 ## Intent-hue collisions
 
-If your accent hue lands near an intent hue, the two become hard to tell apart. The library intents sit at: success 140, warning 80, danger 25, info 220, secondary 280. A green brand (~140) collides with success; an amber brand (~80) collides with warning. When that happens, re-tune the colliding intent ramp away from the accent (push the hue ±15–25° and/or drop its lightness so it reads as "status", not "brand"). \`apps/docs/src/lib/style/editorial.css\` is a worked example (green brand → success pushed to 150 + darkened, warning pulled to amber 55).
+If your accent hue lands near an intent hue, the two become hard to tell apart. The library intents sit at: success 140, warning 80, danger 25, info 220, secondary 280. A green brand (~140) collides with success; an amber brand (~80) collides with warning. When that happens, re-tune the colliding intent ramp away from the accent (push the hue ±15–25° and/or drop its lightness so it reads as "status", not "brand"). \`apps/docs/src/lib/style/rooms-docs.css\` is a worked example (green brand → success pushed to 150 + darkened, warning pulled to amber 55).
 
 ## Overriding Semantic Tokens
 
@@ -383,7 +390,7 @@ Fix: inside the scoped block, re-declare the derived tokens too, so substitution
   /* ...and the same for any neutral-derived surface/text/border tokens you rely on */
 }
 \`\`\`
-A global \`@theme\` block (the built-in themes, the Theme Builder output) does NOT hit this — everything lands on \`:root\`, the same element where the derived tokens compute, so re-declaration is unnecessary. Prefer global themes unless you genuinely need multiple themes live on one page. \`apps/docs/src/lib/style/editorial.css\` is the canonical scoped example.
+A global \`@theme\` block (the built-in themes, the Theme Builder output) does NOT hit this — everything lands on \`:root\`, the same element where the derived tokens compute, so re-declaration is unnecessary. Prefer global themes unless you genuinely need multiple themes live on one page. \`apps/docs/src/lib/style/rooms-docs.css\` is the canonical scoped example.
 
 ## Component-Level Overrides
 

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.
 `;

package/src/transports/http.ts

@@ -17,8 +17,9 @@ export async function startHttpTransport(port: number): Promise<void> {
     const sessionId = req.headers['mcp-session-id'] as string | undefined;
 
     if (req.method === 'POST') {
-      if (sessionId && sessions.has(sessionId)) {
-        await sessions.get(sessionId)!.handleRequest(req, res);
+      const session = sessionId ? sessions.get(sessionId) : undefined;
+      if (session) {
+        await session.handleRequest(req, res);
       } else if (!sessionId) {
         const transport = new StreamableHTTPServerTransport({
           sessionIdGenerator: () => crypto.randomUUID()
@@ -41,8 +42,9 @@ export async function startHttpTransport(port: number): Promise<void> {
         );
       }
     } else if (req.method === 'GET') {
-      if (sessionId && sessions.has(sessionId)) {
-        await sessions.get(sessionId)!.handleRequest(req, res);
+      const session = sessionId ? sessions.get(sessionId) : undefined;
+      if (session) {
+        await session.handleRequest(req, res);
       } else {
         res.writeHead(400, { 'Content-Type': 'application/json' });
         res.end(
@@ -54,8 +56,9 @@ export async function startHttpTransport(port: number): Promise<void> {
         );
       }
     } else if (req.method === 'DELETE') {
-      if (sessionId && sessions.has(sessionId)) {
-        await sessions.get(sessionId)!.handleRequest(req, res);
+      const session = sessionId ? sessions.get(sessionId) : undefined;
+      if (session && sessionId) {
+        await session.handleRequest(req, res);
         sessions.delete(sessionId);
       } else {
         res.writeHead(204);

package/src/utils/format-catalog.ts

@@ -46,8 +46,9 @@ export function formatCompactCatalog(
   for (const comp of filtered) {
     const primaryTag = comp.tags[0];
     if (primaryTag && TAG_LABELS[primaryTag]) {
-      if (!grouped.has(primaryTag)) grouped.set(primaryTag, []);
-      grouped.get(primaryTag)!.push(comp);
+      const bucket = grouped.get(primaryTag);
+      if (bucket) bucket.push(comp);
+      else grouped.set(primaryTag, [comp]);
     } else {
       ungrouped.push(comp);
     }