@higinio/design-mcp 0.1.1 → 0.2.1

package/dist/cli.js

@@ -3,7 +3,8 @@
  * design-lint — CLI de los validadores puros del MCP (validate_code, validate_motion,
  * check_slop, checklist_preflight) para correr sobre archivos locales (pre-commit, CI).
  *
- * Uso: design-lint --system celeste|nocturna [--lang css|html|js] [--json] <archivos o globs...>
+ * Uso: design-lint --system <id> [--lang css|html|js] [--json] <archivos o globs...>
+ * (la lista de ids la imprime USAGE).
  *
  * Exit codes: 0 = sin hallazgos de severidad alta · 1 = hay al menos un hallazgo de
  * severidad alta (level "error") · 2 = error de uso (argumentos inválidos, sin archivos).
@@ -21,6 +22,7 @@ import { validateCode } from "./validate.js";
 import { auditMotion } from "./motion.js";
 import { checkSlop } from "./slop.js";
 import { checkPreflight } from "./preflight.js";
+import { SYSTEM_IDS } from "./systems.js";
 const LANG_BY_EXT = {
     ".css": "css",
     ".html": "html",
@@ -190,7 +192,7 @@ export function formatText(summary) {
         `en ${n} archivo${n === 1 ? "" : "s"} (sistema: ${summary.system}).`);
     return lines.join("\n");
 }
-const USAGE = `Uso: design-lint --system celeste|nocturna [--lang css|html|js] [--json] <archivos o globs...>
+const USAGE = `Uso: design-lint --system ${SYSTEM_IDS.join("|")} [--lang css|html|js] [--json] <archivos o globs...>
 
 Corre validate_code, validate_motion, check_slop y checklist_preflight sobre cada archivo.
 El lenguaje se infiere por extensión (.css / .html|.htm / .js|.mjs|.cjs|.ts|.jsx|.tsx) salvo que se pase --lang.
@@ -217,9 +219,9 @@ export function parseArgs(argv) {
     }
     if (!opts.help) {
         if (!opts.system)
-            opts.errors.push("Falta --system (celeste|nocturna).");
-        else if (opts.system !== "celeste" && opts.system !== "nocturna")
-            opts.errors.push(`Sistema desconocido: ${opts.system} (usa celeste o nocturna).`);
+            opts.errors.push(`Falta --system (${SYSTEM_IDS.join("|")}).`);
+        else if (!SYSTEM_IDS.includes(opts.system))
+            opts.errors.push(`Sistema desconocido: ${opts.system} (usa ${SYSTEM_IDS.join(" o ")}).`);
         if (opts.lang && !["css", "html", "js"].includes(opts.lang))
             opts.errors.push(`Lenguaje desconocido: ${opts.lang} (usa css, html o js).`);
         if (opts.patterns.length === 0)

package/dist/doc.js

@@ -43,10 +43,24 @@ export function listComponents(sections) {
     }
     return out;
 }
-/** Devuelve la sección de un componente por slug exacto o por inclusión. */
+/**
+ * Devuelve la sección de un componente por slug exacto o por inclusión. El `body` incluye sus
+ * subsecciones (encabezados de nivel mayor que la siguen), con su línea de encabezado, hasta el
+ * siguiente encabezado de nivel igual o menor.
+ */
 export function getComponentSpec(sections, name) {
     const target = slugify(name);
-    return (sections.find((s) => s.slug === target) ??
-        sections.find((s) => s.slug.includes(target)) ??
-        null);
+    let idx = sections.findIndex((s) => s.slug === target);
+    if (idx === -1)
+        idx = sections.findIndex((s) => s.slug.includes(target));
+    if (idx === -1)
+        return null;
+    const found = sections[idx];
+    const parts = [found.body];
+    for (const sub of sections.slice(idx + 1)) {
+        if (sub.level <= found.level)
+            break;
+        parts.push(`${"#".repeat(sub.level)} ${sub.heading}\n${sub.body}`);
+    }
+    return { ...found, body: parts.filter(Boolean).join("\n\n") };
 }

package/dist/preflight.js

@@ -1,3 +1,4 @@
+import { SYSTEMS, SYSTEM_IDS } from "./systems.js";
 /** Verifica estáticamente la estructura de un documento HTML/CSS antes de producción (SEO, a11y, perf estático). */
 export function checkPreflight(code, lang) {
     const out = [];
@@ -43,7 +44,7 @@ export function checkPreflight(code, lang) {
             if (!/<meta\b[^>]*name\s*=\s*["']theme-color["']/i.test(code)) {
                 out.push({ level: "info", rule: "sin-theme-color", line: 0,
                     message: 'No hay <meta name="theme-color">.',
-                    fix: "Añade theme-color con el fondo de la marca (Nocturna #010203, Celeste #f7f8fa); sin él la barra del navegador queda clara sobre una app oscura." });
+                    fix: `Añade theme-color con el fondo de la marca (${SYSTEM_IDS.map((id) => `${SYSTEMS[id].name} ${SYSTEMS[id].themeColor}`).join(", ")}); sin él la barra del navegador queda clara sobre una app oscura.` });
             }
             for (const meta of code.match(/<meta\b[^>]*>/gi) ?? []) {
                 if (/name\s*=\s*["']robots["']/i.test(meta) && /noindex/i.test(meta)) {

package/dist/server.js

@@ -1,6 +1,6 @@
 import { McpServer, ResourceTemplate } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { z } from "zod";
-import { SYSTEM_IDS } from "./systems.js";
+import { SYSTEMS, SYSTEM_IDS } from "./systems.js";
 import { resolveToken, searchTokens } from "./tokens.js";
 import { listComponents, getComponentSpec } from "./doc.js";
 import { validateCode } from "./validate.js";
@@ -8,13 +8,13 @@ import { generateSnippet } from "./snippet.js";
 import { auditMotion } from "./motion.js";
 import { checkSlop } from "./slop.js";
 import { checkPreflight } from "./preflight.js";
-const systemEnum = z.enum(["celeste", "nocturna"]);
+const systemEnum = z.enum(SYSTEM_IDS);
 function text(payload) {
     const body = typeof payload === "string" ? payload : JSON.stringify(payload, null, 2);
     return { content: [{ type: "text", text: body }] };
 }
 export function buildServer(store) {
-    const server = new McpServer({ name: "design-mcp", version: "0.1.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: {},
@@ -177,7 +177,7 @@ export function buildServer(store) {
     });
     server.registerPrompt("recomendar_direccion", {
         title: "Recomendar dirección de diseño desde un brief",
-        description: "Dado un brief de producto, recomienda el sistema (Celeste vs Nocturna), los valores de dial (variación/motion/densidad) y una dirección de diseño sobria.",
+        description: "Dado un brief de producto, recomienda el sistema (entre los sistemas registrados), los valores de dial (variación/motion/densidad) y una dirección de diseño sobria.",
         argsSchema: { brief: z.string() },
     }, ({ brief }) => ({
         messages: [
@@ -186,8 +186,8 @@ export function buildServer(store) {
                 content: {
                     type: "text",
                     text: `Brief: "${brief}".\n\n` +
-                        `Recomienda una dirección de diseño para uno de los dos sistemas de Higinio y justifícalo:\n` +
-                        `- Elige "Celeste Clásica" (light-first, sereno, profesional) o "Nocturna Eléctrica" (dark-first, técnico, alto contraste), en una línea con el porqué.\n` +
+                        `Recomienda una dirección de diseño para uno de los sistemas de Higinio y justifícalo:\n` +
+                        `- Elige ${SYSTEM_IDS.map((id) => `"${SYSTEMS[id].name}" (${SYSTEMS[id].pitch})`).join(", ")}, en una línea con el porqué.\n` +
                         `- Propón valores de dial acotados a la sobriedad de la marca: VARIANCE 1-6 (1=simétrico, 6=asimetría contenida), MOTION 1-5 (1=estático, 5=reveals sobrios), DENSITY por superficie (aireada en landings, densa en dashboards).\n` +
                         `- Da 2-3 decisiones clave (tipografía, uso del acento ≤10%, layout), dentro de las reglas duras del sistema elegido.\n\n` +
                         `Ancla la recomendación con list_design_systems y get_rules. No propongas gradientes, glassmorphism ni fuentes genéricas (Inter/Roboto).`,
@@ -208,7 +208,7 @@ export function buildServer(store) {
                     text: `Datos: "${datos}".\n\n` +
                         `Recomienda cómo visualizarlos con la skill dataviz-marca de Higinio:\n` +
                         `- El tipo de gráfica según la función del dato (magnitud → barras; tiempo → línea/área; parte de un todo → barra apilada; relación → scatter; un solo número → stat tile). Si no es una gráfica, dilo. Para tareas más específicas (waterfall, funnel, heatmap, treemap, box plot, bullet en vez de gauge, waffle, banda de confianza, anomalías) la tabla ampliada —con umbral de volumen, grado de accesibilidad y fallback por tipo— vive en la skill dataviz-marca (references/paletas-graficas.md); no la repitas aquí.\n` +
-                        `- Qué paleta del sistema activo usar: categórica (identidad), secuencial (magnitud, una hue claro→oscuro), divergente (polaridad, dos hues + gris al centro) o estado (con icono + etiqueta). Usa la paleta del sistema (Celeste o Nocturna); no inventes hex.\n` +
+                        `- Qué paleta del sistema activo usar: categórica (identidad), secuencial (magnitud, una hue claro→oscuro), divergente (polaridad, dos hues + gris al centro) o estado (con icono + etiqueta). Usa la paleta del sistema activo; no inventes hex.\n` +
                         `- El fallback de accesibilidad: leyenda + etiquetas directas, vista de tabla, y patrón/textura para daltonismo. La identidad nunca es solo por color.\n\n` +
                         `Nunca dual-axis, ni arcoíris, ni 3D. El texto lleva tokens de ink, no el color de la serie.`,
                 },

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/systems.js

@@ -5,6 +5,8 @@ export const SYSTEMS = {
         name: "Celeste Clásica",
         mode: "light",
         philosophy: "Light-first, sereno y profesional. Banca privada boutique, no startup ruidosa.",
+        pitch: "light-first, sereno, profesional",
+        themeColor: "#f7f8fa",
         palette: ["#a0c0d4", "#7192ba", "#31343e"],
         fonts: { display: "Fraunces", body: "Public Sans", mono: "IBM Plex Mono" },
     },
@@ -14,8 +16,32 @@ export const SYSTEMS = {
         name: "Nocturna Eléctrica",
         mode: "dark",
         philosophy: "Dark-first, técnico y de alto contraste.",
+        pitch: "dark-first, técnico, alto contraste",
+        themeColor: "#010203",
         palette: ["#52baed", "#353d7c", "#010203"],
         fonts: { display: "Space Grotesk", body: "Manrope", mono: "JetBrains Mono" },
     },
+    salvia: {
+        id: "salvia",
+        dir: "salvia-serena",
+        name: "Salvia Serena",
+        mode: "light",
+        philosophy: "Light-first, natural y relajante. Lino al sol y hojas de salvia; nada urge.",
+        pitch: "light-first, natural, relajante",
+        themeColor: "#f3f2ec",
+        palette: ["#4f6b58", "#2f7d6a", "#2c3630"],
+        fonts: { display: "Lora", body: "Nunito Sans", mono: "Source Code Pro" },
+    },
+    bruma: {
+        id: "bruma",
+        dir: "bruma-lavanda",
+        name: "Bruma Lavanda",
+        mode: "light",
+        philosophy: "Light-first, en calma, ordenado y legible. Una mañana de niebla en orden; todo en su sitio.",
+        pitch: "light-first, en calma, ordenado y legible",
+        themeColor: "#f2f1f6",
+        palette: ["#5b578a", "#2f7a68", "#2c2b38"],
+        fonts: { display: "Bricolage Grotesque", body: "Atkinson Hyperlegible Next", mono: "Atkinson Hyperlegible Mono" },
+    },
 };
-export const SYSTEM_IDS = ["celeste", "nocturna"];
+export const SYSTEM_IDS = ["celeste", "nocturna", "salvia", "bruma"];

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/dist/validate.js

@@ -1,3 +1,9 @@
+/** primary-300 de los sistemas que lo reservan para decoración: nunca como color de texto. */
+const PRIMARY_300_NO_TEXTO = {
+    celeste: "#a0c0d4",
+    salvia: "#97b09e",
+    bruma: "#9d99c4",
+};
 function relLuminance(hex) {
     const h = hex.replace("#", "");
     const n = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
@@ -26,15 +32,17 @@ export function validateCode(sys, code, lang) {
     const lines = code.split("\n");
     const paletteHex = new Set(sys.tokens.filter((t) => t.type === "color").map((t) => t.value.toLowerCase()));
     const aliasByHex = hexToAlias(sys);
+    const primary300 = PRIMARY_300_NO_TEXTO[sys.meta.id];
     lines.forEach((line, i) => {
         const ln = i + 1;
         const lower = line.toLowerCase();
-        const primary300AsText = sys.meta.id === "celeste" && /(?<![\w-])color\s*:\s*#a0c0d4/.test(lower);
+        const primary300AsText = primary300 !== undefined
+            && new RegExp(`(?<![\\w-])color\\s*:\\s*${primary300}`).test(lower);
         for (const hex of lower.match(/#[0-9a-f]{6}\b/g) ?? []) {
-            if (hex === "#a0c0d4" && primary300AsText) {
+            if (hex === primary300 && primary300AsText) {
                 out.push({ level: "error", rule: "primary-300-no-texto", line: ln,
-                    message: "primary-300 (#a0c0d4) no debe usarse como color de texto.",
-                    fix: "Usa --text-primary o --link; reserva #a0c0d4 para decoración." });
+                    message: `primary-300 (${primary300}) no debe usarse como color de texto.`,
+                    fix: `Usa --text-primary o --link; reserva ${primary300} para decoración.` });
             }
             else if (aliasByHex.has(hex)) {
                 out.push({ level: "warn", rule: "hex-directo", line: ln,
@@ -84,7 +92,7 @@ export function validateCode(sys, code, lang) {
         }
         // Escala tipográfica derivada de los aliases --text-* en rem (mismo enfoque que drift-radio con
         // --radius-*). Si los tokens no la expusieran, cae a {12,14,16,18,20,25,31,39,49}: la escala 1.25
-        // base 16 de §4.2, idéntica en ambos sistemas. Solo se evalúan px; rem/em y 0 quedan exentos.
+        // base 16 de §4.2, idéntica en todos los sistemas. Solo se evalúan px; rem/em y 0 quedan exentos.
         const allowedFontPx = new Set([0]);
         for (const [alias, val] of sys.aliases) {
             if (!/^--text-/.test(alias))

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@higinio/design-mcp",
-  "version": "0.1.1",
-  "description": "MCP server de los design systems de Higinio (Celeste Clásica y Nocturna Eléctrica).",
+  "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",
@@ -19,7 +19,9 @@
     "design-system",
     "design-tokens",
     "celeste-clasica",
-    "nocturna-electrica"
+    "nocturna-electrica",
+    "salvia-serena",
+    "bruma-lavanda"
   ],
   "bin": {
     "design-mcp": "dist/index.js",