orbital-ds 0.6.0 → 0.6.2

package/dist/ui/sidebar.js

@@ -26,7 +26,7 @@ const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = "17.5rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "4rem";
+const SIDEBAR_WIDTH_ICON = "var(--ds-sidebar-rail-w, 4rem)";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 const SidebarContext = React.createContext(null);
 function useSidebar() {
@@ -180,7 +180,7 @@ function Sidebar({
             "data-slot": "sidebar-container",
             "data-side": side,
             className: cn(
-              "fixed inset-y-0 z-(--ds-z-raised) hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-(--ds-motion-base) ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+              "fixed inset-y-0 z-(--ds-z-sidebar) hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-(--ds-motion-base) ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
               // Adjust the padding for floating and inset variants.
               variant === "floating" || variant === "inset" ? "p-(--ds-sidebar-pad) group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(var(--ds-sidebar-pad)*2)+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
               className

package/docs/CONTRACT.md

@@ -74,9 +74,10 @@ Los define la estructura con un valor neutro; un tema los sobrescribe si quiere.
 | Sombras | `--shadow-card`, `--shadow-card-hover`, `--shadow-control`, `--shadow-raised`, `--shadow-overlay`, `--shadow-popover` |
 | Altura de controles | `--ds-control-h-sm`, `-md`, `-lg` |
 | Espaciado interno | `--ds-card-spacing`, `--ds-card-spacing-sm`, `--ds-field-px`, `--ds-cell-p`, `--ds-overlay-p`, `--ds-overlay-gap`, `--ds-popover-p`, `--ds-menu-p`, `--ds-menu-item-px`, `--ds-menu-item-py`, `--ds-button-px-sm/md/lg`, `--ds-badge-px` |
-| Capas | `--ds-z-raised`, `--ds-z-sticky`, `--ds-z-overlay` |
+| Capas | `--ds-z-raised`, `--ds-z-sticky`, `--ds-z-sidebar` (sobre la cabecera sticky), `--ds-z-overlay` |
 | Movimiento | `--ds-motion-fast`, `--ds-motion-base`, `--ds-motion-slow`, `--ds-motion-blink` |
 | Foco | `--ds-ring-width` |
+| Sidebar | `--ds-sidebar-rail-w` (ancho del lateral contraído; por defecto `4rem`) |
 | Velo | `--color-scrim` |
 | **Materiales** | `--ds-card-backdrop`, `--ds-overlay-backdrop`, `--ds-field-backdrop`, `--ds-sidebar-backdrop` (un `backdrop-filter` completo; por defecto `none`) y `--ds-page-backdrop` (un `background-image` para el fondo de la página; por defecto `none`) |
 

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.6.2",
+  "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"
+  }
+}

package/scripts/doctor.mjs

@@ -147,6 +147,70 @@ 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)`);
+      }
+    }
+  }
+}
+
 // 4) fugas desde el tema base
 const base = contract.baseTheme;
 if (base && themeInfo[base]) {