orbital-ds 0.6.0 → 0.7.0

package/package.json

@@ -1,142 +1,142 @@
-{
-  "name": "orbital-ds",
-  "version": "0.6.0",
-  "description": "Sistema de diseño genérico: estructura común + temas con personalidad (qratia, zyro) + ~60 componentes sobre Base UI y Tailwind v4, con contrato verificable y legible por agentes.",
-  "keywords": [
-    "design-system",
-    "design-tokens",
-    "theme",
-    "tailwindcss",
-    "base-ui",
-    "shadcn",
-    "react"
-  ],
-  "license": "MIT",
-  "type": "module",
-  "sideEffects": [
-    "*.css"
-  ],
-  "files": [
-    "dist",
-    "scripts/doctor.mjs",
-    "contract.json",
-    "components.manifest.json",
-    "docs",
-    "AGENTS.md",
-    "README.md",
-    "LICENSE",
-    "scripts/init.mjs",
-    "scripts/manifest.mjs"
-  ],
-  "exports": {
-    "./styles.css": "./dist/styles.css",
-    "./themes/*.css": "./dist/themes/*.css",
-    "./themes/*.md": "./dist/themes/*.md",
-    "./themes/*.meta.json": "./dist/themes/*.meta.json",
-    "./ui/*": {
-      "types": "./dist/ui/*.d.ts",
-      "import": "./dist/ui/*.js"
-    },
-    "./lib/*": {
-      "types": "./dist/lib/*.d.ts",
-      "import": "./dist/lib/*.js"
-    },
-    "./hooks/*": {
-      "types": "./dist/hooks/*.d.ts",
-      "import": "./dist/hooks/*.js"
-    },
-    "./package.json": "./package.json",
-    "./contract.json": "./contract.json",
-    "./components.manifest.json": "./components.manifest.json"
-  },
-  "scripts": {
-    "build": "tsup && node scripts/build-css.mjs",
-    "dev": "tsup --watch --onSuccess \"node scripts/copy-css.mjs\"",
-    "typecheck": "tsc --noEmit",
-    "verify": "pnpm check:ds && pnpm typecheck && pnpm build",
-    "manifest": "node scripts/manifest.mjs",
-    "check:ds": "node scripts/doctor.mjs"
-  },
-  "peerDependencies": {
-    "@base-ui/react": ">=1.9",
-    "class-variance-authority": ">=0.7",
-    "clsx": ">=2",
-    "lucide-react": ">=0.400",
-    "react": ">=19",
-    "react-dom": ">=19",
-    "tailwind-merge": ">=3",
-    "tailwindcss": ">=4.1",
-    "tw-animate-css": ">=1.3",
-    "next-themes": ">=0.4",
-    "recharts": ">=3",
-    "sonner": ">=2",
-    "@shadcn/react": ">=0.3",
-    "cmdk": ">=1.1",
-    "date-fns": ">=4",
-    "embla-carousel-react": ">=8.6",
-    "input-otp": ">=1.5",
-    "react-day-picker": ">=10",
-    "react-resizable-panels": ">=4"
-  },
-  "peerDependenciesMeta": {
-    "next-themes": {
-      "optional": true
-    },
-    "recharts": {
-      "optional": true
-    },
-    "sonner": {
-      "optional": true
-    },
-    "@shadcn/react": {
-      "optional": true
-    },
-    "cmdk": {
-      "optional": true
-    },
-    "date-fns": {
-      "optional": true
-    },
-    "embla-carousel-react": {
-      "optional": true
-    },
-    "input-otp": {
-      "optional": true
-    },
-    "react-day-picker": {
-      "optional": true
-    },
-    "react-resizable-panels": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@base-ui/react": "^1.9.0",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.577.0",
-    "next-themes": "^0.4.6",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "recharts": "3.8.0",
-    "sonner": "^2.0.8",
-    "tailwind-merge": "^3.0.2",
-    "tailwindcss": "^4.1.18",
-    "tsup": "^8.5.0",
-    "tw-animate-css": "^1.3.6",
-    "typescript": "^5.9.0",
-    "@shadcn/react": "^0.3.1",
-    "cmdk": "^1.1.1",
-    "date-fns": "^4.4.0",
-    "embla-carousel-react": "^8.6.0",
-    "input-otp": "^1.5.0",
-    "react-day-picker": "^10.0.2",
-    "react-resizable-panels": "^4.14.4"
-  },
-  "bin": {
-    "orbital-ds-doctor": "./scripts/doctor.mjs",
-    "orbital-ds-init": "./scripts/init.mjs"
-  }
-}
+{
+  "name": "orbital-ds",
+  "version": "0.7.0",
+  "description": "Sistema de diseño genérico: estructura común + temas con personalidad (qratia, zyro) + ~60 componentes sobre Base UI y Tailwind v4, con contrato verificable y legible por agentes.",
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "theme",
+    "tailwindcss",
+    "base-ui",
+    "shadcn",
+    "react"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "scripts/doctor.mjs",
+    "contract.json",
+    "components.manifest.json",
+    "docs",
+    "AGENTS.md",
+    "README.md",
+    "LICENSE",
+    "scripts/init.mjs",
+    "scripts/manifest.mjs"
+  ],
+  "exports": {
+    "./styles.css": "./dist/styles.css",
+    "./themes/*.css": "./dist/themes/*.css",
+    "./themes/*.md": "./dist/themes/*.md",
+    "./themes/*.meta.json": "./dist/themes/*.meta.json",
+    "./ui/*": {
+      "types": "./dist/ui/*.d.ts",
+      "import": "./dist/ui/*.js"
+    },
+    "./lib/*": {
+      "types": "./dist/lib/*.d.ts",
+      "import": "./dist/lib/*.js"
+    },
+    "./hooks/*": {
+      "types": "./dist/hooks/*.d.ts",
+      "import": "./dist/hooks/*.js"
+    },
+    "./package.json": "./package.json",
+    "./contract.json": "./contract.json",
+    "./components.manifest.json": "./components.manifest.json"
+  },
+  "peerDependencies": {
+    "@base-ui/react": ">=1.9",
+    "class-variance-authority": ">=0.7",
+    "clsx": ">=2",
+    "lucide-react": ">=0.400",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "tailwind-merge": ">=3",
+    "tailwindcss": ">=4.1",
+    "tw-animate-css": ">=1.3",
+    "next-themes": ">=0.4",
+    "recharts": ">=3",
+    "sonner": ">=2",
+    "@shadcn/react": ">=0.3",
+    "cmdk": ">=1.1",
+    "date-fns": ">=4",
+    "embla-carousel-react": ">=8.6",
+    "input-otp": ">=1.5",
+    "react-day-picker": ">=10",
+    "react-resizable-panels": ">=4"
+  },
+  "peerDependenciesMeta": {
+    "next-themes": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "sonner": {
+      "optional": true
+    },
+    "@shadcn/react": {
+      "optional": true
+    },
+    "cmdk": {
+      "optional": true
+    },
+    "date-fns": {
+      "optional": true
+    },
+    "embla-carousel-react": {
+      "optional": true
+    },
+    "input-otp": {
+      "optional": true
+    },
+    "react-day-picker": {
+      "optional": true
+    },
+    "react-resizable-panels": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@base-ui/react": "^1.9.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.577.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "recharts": "3.8.0",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss": "^4.1.18",
+    "tsup": "^8.5.0",
+    "tw-animate-css": "^1.3.6",
+    "typescript": "^5.9.0",
+    "@shadcn/react": "^0.3.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.5.0",
+    "react-day-picker": "^10.0.2",
+    "react-resizable-panels": "^4.14.4"
+  },
+  "bin": {
+    "orbital-ds-doctor": "./scripts/doctor.mjs",
+    "orbital-ds-init": "./scripts/init.mjs"
+  },
+  "scripts": {
+    "build": "tsup && node scripts/build-css.mjs",
+    "dev": "tsup --watch --onSuccess \"node scripts/copy-css.mjs\"",
+    "typecheck": "tsc --noEmit",
+    "verify": "pnpm check:ds && pnpm typecheck && pnpm build",
+    "manifest": "node scripts/manifest.mjs",
+    "check:ds": "node scripts/doctor.mjs"
+  }
+}

package/scripts/doctor.mjs

@@ -147,6 +147,99 @@ for (const f of themeFiles) {
   if (meta.name !== t) errors.push(`tema ${t}: ${t}.meta.json tiene name «${meta.name}»`);
 }
 
+// 1c) CONTRASTE de los textos de estado: info, danger, warning, success y neutral
+// sobre su fondo suave (compuesto sobre el lienzo), mínimo WCAG AA 4.5:1, en claro y oscuro.
+// No incluye `link` ni `primary-foreground`: dependen de colores de marca fijados por la
+// identidad (p. ej. el azul de Twitter), y se documentan como limitación en la guía del tema.
+{
+  const parseColor = (raw) => {
+    const v = raw.replace(/\s+/g, ' ').trim();
+    let m = v.match(/^#([0-9a-f]{3,8})$/i);
+    if (m) {
+      let h = m[1];
+      if (h.length === 3) h = [...h].map((c) => c + c).join('');
+      return { r: parseInt(h.slice(0, 2), 16), g: parseInt(h.slice(2, 4), 16), b: parseInt(h.slice(4, 6), 16), a: h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1 };
+    }
+    m = v.match(/^rgba?\(([^)]+)\)$/i);
+    if (m) { const p = m[1].split(/[ ,/]+/).filter(Boolean).map(Number); return { r: p[0], g: p[1], b: p[2], a: p[3] ?? 1 }; }
+    m = v.match(/^oklch\(\s*([\d.]+%?)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+%?))?\s*\)$/i);
+    if (m) {
+      const L = m[1].endsWith('%') ? parseFloat(m[1]) / 100 : +m[1];
+      const C = +m[2], H = (+m[3] * Math.PI) / 180;
+      const a = C * Math.cos(H), b = C * Math.sin(H);
+      const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+      const mm = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+      const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+      const lin = [4.0767416621 * l - 3.3077115913 * mm + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * mm - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * mm + 1.707614701 * s];
+      const g = (x) => Math.round(255 * Math.min(1, Math.max(0, x <= 0.0031308 ? 12.92 * x : 1.055 * x ** (1 / 2.4) - 0.055)));
+      const al = m[4] ? (m[4].endsWith('%') ? parseFloat(m[4]) / 100 : +m[4]) : 1;
+      return { r: g(lin[0]), g: g(lin[1]), b: g(lin[2]), a: al };
+    }
+    return null;
+  };
+  const lum = ({ r, g, b }) => {
+    const f = (c) => { c /= 255; return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4; };
+    return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
+  };
+  const over = (fg, bg) => ({ r: fg.r * fg.a + bg.r * (1 - fg.a), g: fg.g * fg.a + bg.g * (1 - fg.a), b: fg.b * fg.a + bg.b * (1 - fg.a), a: 1 });
+  const ratio = (x, y) => { const [p, q] = [lum(x), lum(y)].sort((u, w) => w - u); return (p + 0.05) / (q + 0.05); };
+  const varsDe = (css, selector) => {
+    const m = new RegExp(`(^|\\n)${selector}\\s*\\{`).exec(css);
+    if (!m) return {};
+    let i = m.index + m[0].length, d = 1, j = i;
+    while (d && j < css.length) { if (css[j] === '{') d++; else if (css[j] === '}') d--; j++; }
+    const out = {};
+    for (const mm of css.slice(i, j - 1).matchAll(/--([\w-]+):\s*([^;]+);/g)) out[mm[1]] = mm[2];
+    return out;
+  };
+  for (const f of themeFiles) {
+    const tema = f.replace(/\.css$/, '');
+    const css = stripComments(read(join(themesDir, f)));
+    const claro = varsDe(css, ':root');
+    for (const [piel, vars] of [['claro', claro], ['oscuro', { ...claro, ...varsDe(css, '\\.dark') }]]) {
+      const lienzo = parseColor(vars.background ?? '#fff');
+      if (!lienzo) continue;
+      for (const estado of ['info', 'danger', 'warning', 'success', 'neutral']) {
+        const fg = vars[estado] && parseColor(vars[estado]);
+        const suave = vars[`${estado}-soft`] && parseColor(vars[`${estado}-soft`]);
+        if (!fg || !suave) continue;
+        const fondo = over(suave, over(lienzo, { r: 255, g: 255, b: 255, a: 1 }));
+        const r = ratio(over(fg, fondo), fondo);
+        if (r < 4.5) errors.push(`tema ${tema} (${piel}): ${estado} sobre ${estado}-soft = ${r.toFixed(2)}:1 (mínimo 4.5:1)`);
+      }
+
+      // Pares principales de texto sobre su superficie. AA (4.5:1) es el mínimo exigible; las
+      // excepciones deben estar declaradas en `<tema>.meta.json` → `a11y.exceptions` ("fg/bg").
+      // AAA (7:1) es el objetivo del texto del cuerpo: solo avisa, y solo con `--aaa`.
+      const PARES = [
+        ['foreground', 'background'], ['card-foreground', 'card'], ['popover-foreground', 'popover'],
+        ['primary-foreground', 'primary'], ['secondary-foreground', 'secondary'],
+        ['muted-foreground', 'background'], ['muted-foreground', 'card'],
+        ['sidebar-foreground', 'sidebar'], ['sidebar-primary-foreground', 'sidebar-primary'],
+        ['destructive-foreground', 'destructive'],
+      ];
+      let excepciones = [];
+      try { excepciones = JSON.parse(read(join(themesDir, `${tema}.meta.json`))).a11y?.exceptions ?? []; } catch { /* sin ficha: lo avisa 1b */ }
+      const blanco = { r: 255, g: 255, b: 255, a: 1 };
+      for (const [fgName, bgName] of PARES) {
+        const fgRaw = vars[fgName] && parseColor(vars[fgName]);
+        const bgRaw = vars[bgName] && parseColor(vars[bgName]);
+        if (!fgRaw || !bgRaw) continue;
+        const bg = over(bgRaw, over(lienzo, blanco));
+        const r = ratio(over(fgRaw, bg), bg);
+        const par = `${fgName}/${bgName}`;
+        if (r < 4.5) {
+          const msg = `tema ${tema} (${piel}): ${par} = ${r.toFixed(2)}:1 (mínimo AA 4.5:1)`;
+          if (excepciones.includes(par)) warnings.push(`${msg} — excepción declarada en la ficha`);
+          else errors.push(`${msg}; corrígelo o decláralo en ${tema}.meta.json → a11y.exceptions`);
+        } else if (process.argv.includes('--aaa') && r < 7 && (par === 'foreground/background' || par === 'card-foreground/card')) {
+          warnings.push(`tema ${tema} (${piel}): ${par} = ${r.toFixed(2)}:1 (objetivo AAA 7:1 para el texto del cuerpo)`);
+        }
+      }
+    }
+  }
+}
+
 // 4) fugas desde el tema base
 const base = contract.baseTheme;
 if (base && themeInfo[base]) {