@higinio/design-mcp 0.2.0 → 0.2.1

package/dist/server.js

@@ -14,7 +14,7 @@ function text(payload) {
     return { content: [{ type: "text", text: body }] };
 }
 export function buildServer(store) {
-    const server = new McpServer({ name: "design-mcp", version: "0.2.0" });
+    const server = new McpServer({ name: "design-mcp", version: "0.2.1" });
     server.registerTool("list_design_systems", {
         description: "Lista los sistemas de diseño disponibles con su metadata (filosofía, paleta, fuentes).",
         inputSchema: {},

package/dist/snippet.js

@@ -1,45 +1,54 @@
 const CSS = {
     button: `.btn-primary {
-  background: var(--accent);
-  color: var(--on-accent, #fff);
+  background: var(--action-bg);
+  color: var(--text-on-action);
   border: 1px solid transparent;
-  border-radius: var(--radius-md, 10px);
-  padding: 10px 16px;
+  border-radius: var(--radius-md);
+  min-height: var(--control-height-md);
+  padding: var(--button-padding-md);
   font-family: var(--font-body);
 }
-.btn-primary:hover { background: var(--accent-hover); }`,
+.btn-primary:hover:not(:disabled) { background: var(--action-hover); }
+.btn-primary:active:not(:disabled) { background: var(--action-active); }
+.btn-primary:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }
+.btn-primary:disabled { opacity: .5; cursor: not-allowed; }`,
     card: `.card {
   background: var(--surface);
   border: 1px solid var(--border);
-  border-radius: var(--radius-lg, 14px);
-  padding: 20px;
+  border-radius: var(--radius-lg);
+  padding: var(--card-padding);
   color: var(--text-primary);
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-content-gap);
 }`,
     input: `.input {
   background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md, 10px);
-  padding: 10px 12px;
+  border: 1px solid var(--control-border);
+  border-radius: var(--radius-sm);
+  min-height: var(--control-height-md);
+  padding: var(--space-3);
   color: var(--text-primary);
 }
-.input:focus { outline: 2px solid var(--accent); }`,
+.input::placeholder { color: var(--placeholder); }
+.input:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }`,
 };
 const REACT = {
     button: `export function Button({ children, ...props }) {
-  return <button className="btn-primary" {...props}>{children}</button>;
+  return <button type="button" {...props} className={['btn', 'btn--primary', props.className].filter(Boolean).join(' ')}>{children}</button>;
 }`,
     card: `export function Card({ children }) {
   return <div className="card">{children}</div>;
 }`,
-    input: `export function Input(props) {
-  return <input className="input" {...props} />;
+    input: `export function Input({ className, ...props }) {
+  return <input {...props} className={['input', className].filter(Boolean).join(' ')} />;
 }`,
 };
 function tailwindFor(component) {
     const map = {
-        button: `<button class="bg-[var(--accent)] text-[var(--on-accent)] rounded-[10px] px-4 py-2.5 font-[var(--font-body)] hover:bg-[var(--accent-hover)]">Acción</button>`,
-        card: `<div class="bg-[var(--surface)] border border-[var(--border)] rounded-[14px] p-5 text-[var(--text-primary)]">…</div>`,
-        input: `<input class="bg-[var(--surface)] border border-[var(--border)] rounded-[10px] px-3 py-2.5 text-[var(--text-primary)] focus:outline-2 focus:outline-[var(--accent)]" />`,
+        button: `<button type="button" class="bg-[var(--action-bg)] text-[var(--text-on-action)] rounded-[var(--radius-md)] min-h-[var(--control-height-md)] px-5 py-3 font-[family-name:var(--font-body)] hover:enabled:bg-[var(--action-hover)] active:enabled:bg-[var(--action-active)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--focus-color)] disabled:opacity-50">Acción</button>`,
+        card: `<div class="flex flex-col gap-[var(--card-content-gap)] bg-[var(--surface)] border border-[var(--border)] rounded-[var(--radius-lg)] p-[var(--card-padding)] text-[var(--text-primary)]">…</div>`,
+        input: `<label class="flex flex-col gap-[var(--field-gap)]">Correo<input type="email" autocomplete="email" class="block w-full bg-[var(--surface)] border border-[var(--control-border)] rounded-[var(--radius-sm)] min-h-[var(--control-height-md)] p-3 text-[var(--text-primary)] placeholder:text-[var(--placeholder)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--focus-color)]" /></label>`,
     };
     return map[component] ?? `<div class="bg-[var(--surface)] text-[var(--text-primary)] p-4">${component}</div>`;
 }

package/dist/tokens.js

@@ -1,6 +1,34 @@
-function valueToString(value) {
-    if (value && typeof value === "object" && "hex" in value) {
-        return String(value.hex);
+/**
+ * Serializa magnitudes y valores compuestos DTCG como valores CSS.
+ * @param value - Valor del token con sus unidades y componentes.
+ * @param type - Tipo efectivo, incluido el heredado del grupo.
+ * @returns Valor CSS; los objetos de tipos desconocidos conservan su JSON.
+ */
+function valueToString(value, type) {
+    if (Array.isArray(value)) {
+        if (type === "cubicBezier")
+            return `cubic-bezier(${value.join(", ")})`;
+        if (type === "fontFamily")
+            return value.map((font) => /^(serif|sans-serif|monospace|system-ui|ui-sans-serif|ui-serif|ui-monospace)$/.test(String(font)) ? font : JSON.stringify(font)).join(", ");
+        return value.map((item) => valueToString(item, type)).join(", ");
+    }
+    if (value && typeof value === "object") {
+        const obj = value;
+        if ("value" in obj && "unit" in obj)
+            return `${obj.value}${obj.unit}`;
+        if ("hex" in obj) {
+            if (typeof obj.alpha === "number" && obj.alpha < 1 && typeof obj.hex === "string") {
+                const hex = obj.hex.replace("#", "");
+                const rgb = [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16));
+                return `rgba(${rgb.join(", ")}, ${obj.alpha})`;
+            }
+            return String(obj.hex);
+        }
+        if (type === "shadow") {
+            const dimensions = ["offsetX", "offsetY", "blur", "spread"].map((key) => valueToString(obj[key], "dimension"));
+            return `${obj.inset ? "inset " : ""}${dimensions.join(" ")} ${valueToString(obj.color, "color")}`;
+        }
+        return JSON.stringify(value);
     }
     return String(value);
 }
@@ -15,7 +43,7 @@ export function parseDtcgTokens(json) {
         if ("$value" in obj) {
             out.push({
                 path: path.join("."),
-                value: valueToString(obj.$value),
+                value: valueToString(obj.$value, type),
                 type,
                 description: typeof obj.$description === "string" ? obj.$description : undefined,
             });
@@ -28,7 +56,16 @@ export function parseDtcgTokens(json) {
         }
     };
     walk(json, [], "unknown");
-    return out;
+    const index = new Map(out.map((token) => [token.path, token]));
+    const resolve = (path, seen = new Set()) => {
+        const token = index.get(path);
+        if (!token || seen.has(path))
+            return `{${path}}`;
+        const next = new Set(seen).add(path);
+        return token.value.replace(/\{([^{}]+)\}/g, (_, reference) => resolve(reference, next));
+    };
+    const resolved = out.map((token) => ({ ...token, value: resolve(token.path) }));
+    return resolved;
 }
 /** Extrae variables CSS `--nombre: valor;` del bloque :root canónico (ignora overrides de tema). */
 export function parseCssAliases(css) {

package/package.json

@@ -1,18 +1,42 @@
 {
   "name": "@higinio/design-mcp",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "MCP server de los design systems de Higinio (Celeste Clásica, Nocturna Eléctrica, Salvia Serena y Bruma Lavanda).",
   "type": "module",
   "license": "UNLICENSED",
   "author": "Higinio Sosa",
-  "repository": { "type": "git", "url": "git+https://github.com/HiginioSosa/Diseno-Higinio.git", "directory": "mcp" },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/HiginioSosa/Diseno-Higinio.git",
+    "directory": "mcp"
+  },
   "homepage": "https://github.com/HiginioSosa/Diseno-Higinio#readme",
-  "bugs": { "url": "https://github.com/HiginioSosa/Diseno-Higinio/issues" },
-  "keywords": ["mcp", "design-system", "design-tokens", "celeste-clasica", "nocturna-electrica", "salvia-serena", "bruma-lavanda"],
-  "bin": { "design-mcp": "dist/index.js", "design-lint": "dist/cli.js" },
-  "files": ["dist", "assets"],
-  "publishConfig": { "access": "public" },
-  "engines": { "node": ">=20" },
+  "bugs": {
+    "url": "https://github.com/HiginioSosa/Diseno-Higinio/issues"
+  },
+  "keywords": [
+    "mcp",
+    "design-system",
+    "design-tokens",
+    "celeste-clasica",
+    "nocturna-electrica",
+    "salvia-serena",
+    "bruma-lavanda"
+  ],
+  "bin": {
+    "design-mcp": "dist/index.js",
+    "design-lint": "dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "assets"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20"
+  },
   "scripts": {
     "sync-assets": "tsx scripts/sync-assets.ts",
     "build": "tsc",