orbital-ds 0.1.1 → 0.2.0

package/package.json

@@ -1,95 +1,133 @@
-{
-  "name": "orbital-ds",
-  "version": "0.1.1",
-  "description": "Sistema de diseño genérico: estructura común (tokens semánticos, capa base) + temas intercambiables + primitivos sobre Base UI y Tailwind v4.",
-  "keywords": [
-    "design-system",
-    "design-tokens",
-    "theme",
-    "tailwindcss",
-    "base-ui",
-    "shadcn",
-    "react"
-  ],
-  "license": "MIT",
-  "type": "module",
-  "sideEffects": [
-    "*.css"
-  ],
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
-  "exports": {
-    "./styles.css": "./dist/styles.css",
-    "./themes/*.css": "./dist/themes/*.css",
-    "./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"
-  },
-  "scripts": {
-    "build": "tsup && node scripts/copy-css.mjs",
-    "dev": "tsup --watch --onSuccess \"node scripts/copy-css.mjs\"",
-    "typecheck": "tsc --noEmit",
-    "verify": "pnpm typecheck && pnpm build"
-  },
-  "peerDependencies": {
-    "@base-ui/react": ">=1.7",
-    "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"
-  },
-  "peerDependenciesMeta": {
-    "next-themes": {
-      "optional": true
-    },
-    "recharts": {
-      "optional": true
-    },
-    "sonner": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@base-ui/react": "^1.7.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"
-  },
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "esbuild"
-    ]
-  }
-}
+{
+  "name": "orbital-ds",
+  "version": "0.2.0",
+  "description": "Sistema de diseño genérico: estructura común + temas intercambiables (qratia, zyro) + ~60 componentes sobre Base UI y Tailwind v4, con contrato de tema verificable.",
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "theme",
+    "tailwindcss",
+    "base-ui",
+    "shadcn",
+    "react"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "scripts/doctor.mjs",
+    "contract.json",
+    "docs",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    "./styles.css": "./dist/styles.css",
+    "./themes/*.css": "./dist/themes/*.css",
+    "./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"
+  },
+  "scripts": {
+    "build": "tsup && node scripts/copy-css.mjs",
+    "dev": "tsup --watch --onSuccess \"node scripts/copy-css.mjs\"",
+    "typecheck": "tsc --noEmit",
+    "verify": "pnpm doctor && pnpm typecheck && pnpm build",
+    "doctor": "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"
+  }
+}

package/scripts/doctor.mjs

@@ -0,0 +1,142 @@
+#!/usr/bin/env node
+/**
+ * orbital-ds doctor — comprueba que el sistema se cumple.
+ *
+ *   1. CONTRATO: cada tema (themes/*.css) define en :root todos los tokens de
+ *      contract.json (y la fuente `--font-sans`). En .dark solo avisa.
+ *   2. REPETIDOS: ninguna variable CSS se define dos veces en el mismo bloque.
+ *   3. VALORES FIJOS: ningún componente (ui/*.tsx) escribe colores, z-index,
+ *      duraciones ni sombras a mano; todo sale de tokens.
+ *
+ * Uso:
+ *   node scripts/doctor.mjs                 # temas y componentes del paquete
+ *   node scripts/doctor.mjs --css app.css   # además, un CSS de una app (contrato + repetidos)
+ *
+ * Sale con código 1 si hay errores (los avisos no fallan).
+ */
+import { readFileSync, readdirSync, existsSync } from 'node:fs';
+import { join, dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const contract = JSON.parse(readFileSync(join(ROOT, 'contract.json'), 'utf8'));
+
+const errors = [];
+const warnings = [];
+const read = (p) => readFileSync(p, 'utf8');
+const stripComments = (css) => css.replace(/\/\*[\s\S]*?\*\//g, '');
+
+/** Devuelve el cuerpo de cada bloque `selector { ... }` (respeta llaves anidadas). */
+function blocks(css, selectorRe) {
+  const out = [];
+  const re = new RegExp(selectorRe.source + '\\s*\\{', 'g');
+  let m;
+  while ((m = re.exec(css))) {
+    let depth = 1;
+    let i = re.lastIndex;
+    const start = i;
+    while (i < css.length && depth > 0) {
+      if (css[i] === '{') depth++;
+      else if (css[i] === '}') depth--;
+      i++;
+    }
+    out.push(css.slice(start, i - 1));
+    re.lastIndex = i;
+  }
+  return out;
+}
+
+const definedVars = (body) => [...body.matchAll(/(^|[;{\s])(--[a-z0-9-]+)\s*:/gi)].map((m) => m[2]);
+
+function checkTheme(file, label) {
+  const css = stripComments(read(file));
+  const roots = blocks(css, /(?:^|[\s}])\:root/);
+  const darks = blocks(css, /(?:^|[\s}])\.dark/);
+  const themeBlocks = blocks(css, /@theme\s+inline/);
+
+  const rootVars = new Set(roots.flatMap(definedVars));
+  const themeVars = new Set(themeBlocks.flatMap(definedVars));
+  const darkVars = new Set(darks.flatMap(definedVars));
+
+  for (const t of contract.root) {
+    if (!rootVars.has(`--${t}`)) errors.push(`${label}: falta el token obligatorio --${t} en :root`);
+  }
+  for (const f of contract.fonts) {
+    if (!rootVars.has(`--${f}`) && !themeVars.has(`--${f}`)) {
+      errors.push(`${label}: falta la fuente --${f} (en :root o @theme)`);
+    }
+  }
+  if (darks.length) {
+    for (const t of contract.dark.avisar_si_falta) {
+      if (!darkVars.has(`--${t}`)) warnings.push(`${label}: .dark no redefine --${t} (hereda el valor claro)`);
+    }
+  } else {
+    warnings.push(`${label}: no define piel .dark`);
+  }
+
+  // Repetidos dentro de un mismo bloque
+  for (const [name, list] of [['@theme', themeBlocks], [':root', roots], ['.dark', darks]]) {
+    list.forEach((body, idx) => {
+      const seen = new Map();
+      for (const v of definedVars(body)) seen.set(v, (seen.get(v) ?? 0) + 1);
+      for (const [v, n] of seen) {
+        if (n > 1) errors.push(`${label}: ${v} definido ${n} veces en el mismo bloque ${name} (#${idx + 1})`);
+      }
+    });
+  }
+}
+
+// 1+2) temas del paquete
+const themesDir = join(ROOT, existsSync(join(ROOT, 'src/themes')) ? 'src/themes' : 'dist/themes');
+for (const f of readdirSync(themesDir).filter((n) => n.endsWith('.css'))) {
+  checkTheme(join(themesDir, f), `tema ${f}`);
+}
+
+// CSS de una app (opcional)
+const cssArgIdx = process.argv.indexOf('--css');
+if (cssArgIdx > -1 && process.argv[cssArgIdx + 1]) {
+  const f = resolve(process.argv[cssArgIdx + 1]);
+  const css = stripComments(read(f));
+  const roots = blocks(css, /(?:^|[\s}])\:root/);
+  roots.forEach((body, idx) => {
+    const seen = new Map();
+    for (const v of definedVars(body)) seen.set(v, (seen.get(v) ?? 0) + 1);
+    for (const [v, n] of seen) if (n > 1) errors.push(`app css: ${v} definido ${n} veces en :root (#${idx + 1})`);
+  });
+}
+
+// 3) valores fijos en componentes
+const NO_HARDCODE = [
+  { re: /#[0-9a-fA-F]{3,8}\b/g, why: 'color hexadecimal', skip: ['chart.tsx'] },
+  { re: /\b(?:rgb|rgba|hsl|hsla|oklch)\((?!from_)/g, why: 'color literal' },
+  { re: /(?<![\w-])z-(?!0(?![\w-]))\d+(?![\w-])/g, why: 'z-index numérico (usa --ds-z-*)' },
+  { re: /(?<![\w-])duration-(?!0(?![\w-]))\d+(?![\w-])/g, why: 'duración fija (usa --ds-motion-*)' },
+  { re: /(?<![\w-])(?:bg|text|border)-(?:black|white)(?:\/\d+)?(?![\w-])/g, why: 'color fijo (usa un token de color)' },
+  { re: /(?<![\w-])shadow-(?:xs|sm|md|lg|xl|2xl)(?![\w-])/g, why: 'sombra de la escala Tailwind (usa shadow-card/control/raised/overlay/popover)' },
+  { re: /(?<![\w-])text-\[\d+px\]/g, why: 'tamaño de texto arbitrario (usa la escala estándar)' },
+  { re: /(?<![\w-])rounded-(?:3xl|4xl)(?![\w-])/g, why: 'radio fuera de la rampa (usa rounded-control/overlay o la rampa sm…2xl)' },
+  { re: /(?<![\w-])(?:bg|text|border|ring|fill|stroke)-(?:red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|slate|gray|zinc|neutral|stone)-\d{2,3}(?![\w-])/g, why: 'color de la paleta Tailwind (usa tokens del tema)' },
+];
+
+const uiDir = join(ROOT, 'src/ui');
+if (existsSync(uiDir)) {
+  for (const f of readdirSync(uiDir).filter((n) => n.endsWith('.tsx'))) {
+    const lines = read(join(uiDir, f)).split(/\r?\n/);
+    lines.forEach((line, i) => {
+      const code = line.replace(/\/\/.*$/, '');
+      for (const rule of NO_HARDCODE) {
+        if (rule.skip?.includes(f)) continue;
+        const hits = code.match(rule.re);
+        if (hits) errors.push(`ui/${f}:${i + 1}: ${rule.why} → ${[...new Set(hits)].join(', ')}`);
+      }
+    });
+  }
+}
+
+for (const w of warnings) console.log(`AVISO  ${w}`);
+for (const e of errors) console.log(`ERROR  ${e}`);
+if (errors.length) {
+  console.log(`\ndoctor: ${errors.length} error(es), ${warnings.length} aviso(s)`);
+  process.exit(1);
+}
+console.log(`doctor: contrato, repetidos y valores fijos correctos (${warnings.length} aviso(s)).`);