@urbicon-ui/mcp-server 6.2.0 → 6.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/package.json +3 -3
  2. package/src/tools/get-checklist.ts +3 -1
  3. package/src/tools/get-css-reference.ts +7 -4
  4. package/src/tools/suggest-implementation.ts +2 -2
  5. package/src/utils/format-catalog.ts +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@urbicon-ui/mcp-server",
3
- "version": "6.2.0",
3
+ "version": "6.3.1",
4
4
  "description": "Model Context Protocol server exposing the Urbicon UI component catalog, recipes and design intelligence to LLM agents",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -32,8 +32,8 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@modelcontextprotocol/sdk": "^1.29.0",
35
- "@urbicon-ui/design-content": "6.2.0",
36
- "@urbicon-ui/design-engine": "6.2.0",
35
+ "@urbicon-ui/design-content": "6.3.1",
36
+ "@urbicon-ui/design-engine": "6.3.1",
37
37
  "zod": "^4.3.6"
38
38
  },
39
39
  "devDependencies": {
package/src/tools/get-checklist.ts CHANGED
@@ -34,7 +34,7 @@ export function registerGetChecklistTool(server: McpServer): void {
34
34
  md +=
35
35
  '- [ ] Use OKLCH interaction tokens for hover/active states (`bg-surface-hover`, `bg-surface-active`)\n';
36
36
  md +=
37
- '- [ ] Dark mode is automatic via `prefers-color-scheme` — semantic tokens switch automatically. For manual control, use `ThemeSwitcher` or set `data-theme="dark"` on `<html>`. Do NOT add `dark:` overrides\n';
37
+ '- [ ] Dark mode is automatic via the CSS `light-dark()` function (`:root` sets `color-scheme: light dark`, following the OS `prefers-color-scheme`) — semantic tokens switch automatically. For manual control, use `ThemeSwitcher` or add a `.light`/`.dark` class to `<html>`. Do NOT add `dark:` overrides\n';
38
38
  md +=
39
39
  '- [ ] Use z-index tokens via CSS custom properties: `z-[var(--z-modal)]`, `z-[var(--z-dropdown)]`, etc.\n';
40
40
  md += '\n';
@@ -44,6 +44,8 @@ export function registerGetChecklistTool(server: McpServer): void {
44
44
  md += '- [ ] Use `slotClasses` for targeted style overrides on specific sub-elements\n';
45
45
  md +=
46
46
  '- [ ] For reusable variant sets, register named `preset`s via `BlocksProvider` (and select with the `preset` prop) — not external variant libraries; Urbicon UI ships its own zero-dependency variant engine\n';
47
+ md +=
48
+ '- [ ] To style only one variant/intent/state project-wide (e.g. just `variant="outlined"`), register prop-conditional `overrides` on `BlocksProvider` `defaults`/`presets` — what an unconditional `slotClasses` cannot express\n';
47
49
  md +=
48
50
  "- [ ] For conditional classes, pass an array to `class` (`class={['base', condition && 'extra']}`) — not concatenated conditional class strings\n";
49
51
  md += '- [ ] Use `class` prop for simple additions — merges with defaults automatically\n';
package/src/tools/get-css-reference.ts CHANGED
@@ -32,8 +32,8 @@ Override tokens in your app CSS using Tailwind's \`@theme\` block:
32
32
  \`\`\`
33
33
 
34
34
  ## Dark Mode
35
- Mechanism: \`@media (prefers-color-scheme: dark)\` on \`:root\` in \`semantic.css\`.
36
- Manual override: add \`.light\` or \`.dark\` class to \`<html>\` (via \`ThemeSwitcher\` component).
35
+ Mechanism: semantic tokens use the CSS \`light-dark()\` function; \`:root\` declares \`color-scheme: light dark\` so the browser resolves the matching branch automatically (following the OS \`prefers-color-scheme\`). No \`dark:\` overrides.
36
+ Manual override: add a \`.light\` or \`.dark\` class to \`<html>\` (via the \`ThemeSwitcher\` component) — the class only flips \`color-scheme\`, and \`light-dark()\` re-resolves on its own.
37
37
 
38
38
  To override a token for ALL modes (light, dark, and manual overrides):
39
39
  \`\`\`css
@@ -385,13 +385,16 @@ A global \`@theme\` block (the built-in themes, the Theme Builder output) does N
385
385
 
386
386
  ## Component-Level Overrides
387
387
 
388
- Use \`BlocksProvider\` to change component defaults globally:
388
+ Use \`BlocksProvider\` to style components project-wide — unconditional \`defaults\`, named \`presets\` (opt-in via the \`preset\` prop), and prop-conditional \`overrides\`:
389
389
  \`\`\`svelte
390
390
  <BlocksProvider defaults={{
391
391
  Card: { slotClasses: { base: 'rounded-2xl shadow-lg' } },
392
- Button: { slotClasses: { base: 'rounded-full font-bold uppercase' } }
392
+ Button: { slotClasses: { base: 'rounded-full font-bold uppercase' } },
393
+ // prop-conditional: style ONLY the outlined variant — what an unconditional slotClasses cannot express
394
+ Badge: { overrides: [{ variant: 'outlined', class: { base: 'border' } }] }
393
395
  }}>
394
396
  \`\`\`
397
+ Cascade (conflict-resolved per Tailwind bucket, later wins): \`defaults.slotClasses → defaults.overrides → preset.slotClasses → preset.overrides → instance slotClasses → instance class\`.
395
398
 
396
399
  Or override per-instance:
397
400
  \`\`\`svelte
package/src/tools/suggest-implementation.ts CHANGED
@@ -69,11 +69,11 @@ const IMPLEMENTATION_RULES = `## Implementation Rules
69
69
 
70
70
  - **CSS imports** — Add to root layout, Tailwind first: \`@import 'tailwindcss';\` then \`@import '@urbicon-ui/blocks/style/index.css';\` (ships tokens + the \`@source\` directives). Import \`index.css\`, NOT the \`foundation\`/\`semantic\`/\`interaction\` subfiles, and add no manual \`@source\`
71
71
  - **Semantic tokens only** — Use \`bg-surface-elevated\`, \`text-text-primary\`, \`border-border-default\` — never raw Tailwind colors
72
- - **Dark mode** — Automatic via \`prefers-color-scheme\`. Do NOT add \`dark:\` overrides
72
+ - **Dark mode** — Automatic via the CSS \`light-dark()\` function (\`:root\` sets \`color-scheme: light dark\`, following the OS \`prefers-color-scheme\`). For manual control use \`ThemeSwitcher\` (toggles a \`.light\`/\`.dark\` class). Do NOT add \`dark:\` overrides
73
73
  - **Focus** — Always \`focus-visible:\` (not \`focus:\`) for keyboard-only focus rings
74
74
  - **State binding** — \`bind:value\`, \`bind:checked\`, \`bind:open\` for two-way state; callback props (\`onValueChange\`) for side effects
75
75
  - **Custom content** — Use Svelte 5 snippets (\`{#snippet name()}...{/snippet}\`), not legacy slots
76
- - **Styling overrides** — \`class\` for simple additions, \`slotClasses\` for per-slot targeting, \`unstyled\` to strip all defaults
76
+ - **Styling overrides** — per instance: \`class\` for simple additions, \`slotClasses\` for per-slot targeting, \`unstyled\` to strip all defaults. Project-wide via \`BlocksProvider\`: \`defaults\` (every instance), named \`presets\`, and prop-conditional \`overrides\` (style only one variant, e.g. \`variant="outlined"\`)
77
77
  - **Mint** — Add \`mint="scale"\` or \`mint="ripple"\` sparingly on primary CTAs only
78
78
 
79
79
  ## Design Quality
package/src/utils/format-catalog.ts CHANGED
@@ -69,7 +69,7 @@ export function formatCompactCatalog(
69
69
  md += '```\n';
70
70
  md += "Import: `import { Button, Card } from '@urbicon-ui/blocks';` (always from package root)\n";
71
71
  md +=
72
- 'Dark mode: automatic via `prefers-color-scheme` — semantic tokens switch automatically. For manual control, use `ThemeSwitcher` or `data-theme="dark"` on `<html>`.\n\n';
72
+ 'Dark mode: automatic via the CSS `light-dark()` function (`:root` sets `color-scheme: light dark`, following the OS `prefers-color-scheme`) — semantic tokens switch automatically. For manual control, use `ThemeSwitcher` or add a `.light`/`.dark` class to `<html>`.\n\n';
73
73
 
74
74
  for (const tag of TAG_ORDER) {
75
75
  const comps = grouped.get(tag);