orbital-ds 0.2.0 → 0.4.0

package/dist/themes/zyro.scoped.css

@@ -0,0 +1,381 @@
+/*
+ * TEMA zyro — «liquid glass» (traducido de faro-orbital-zyro-ui).
+ *
+ * Personalidad: lavanda claro / azul muy oscuro, acento azul profundo (claro) y
+ * cian (oscuro). El cristal vive en la capa de NAVEGACIÓN y CONTROLES (sidebar,
+ * campos, menús); el CONTENIDO (tarjetas) se mantiene casi opaco, como indican
+ * las guías de cristal. Sidebar a ras de borde, sin silueta flotante. Acción
+ * primaria = píldora con degradado de marca y brillo.
+ *
+ * Estructura del fichero:
+ *   1. Variables claras (:root) y oscuras (.dark) — el CONTRATO del tema.
+ *   2. Capa de PERSONALIDAD — reglas sobre los ganchos del DOM (`data-slot`,
+ *      `data-variant`…) escritas solo con variables. Va SIN capa para ganar a las
+ *      utilidades de los componentes, así que define también los estados
+ *      (hover, active). Es lo que da forma propia a los elementos.
+ *
+ * Variables `--zy-*`: privadas de este tema (no son contrato).
+ * Importar DESPUÉS de la estructura. Fuentes: `zyro.fonts.css`, lo primero del CSS.
+ */
+
+/* ── 1. VARIABLES · PIEL CLARA ───────────────────────────────────────────── */
+:root[data-theme='zyro'] {
+  --radius: 18px;
+
+  /* Tipografía: Montserrat (titulares) + Roboto (cuerpo) */
+  --ds-font-sans: 'Roboto', system-ui, -apple-system, sans-serif;
+  --ds-font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
+  --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+  --ds-heading-tracking: -0.01em;
+
+  /* Color */
+  --background: #eaeefb;
+  --foreground: rgba(14, 22, 48, 0.92);
+
+  --card: rgba(255, 255, 255, 0.98);
+  --card-foreground: rgba(14, 22, 48, 0.92);
+  --popover: #ffffff;
+  --popover-foreground: rgba(14, 22, 48, 0.92);
+
+  --primary: #0349fe;
+  --primary-foreground: #ffffff;
+  --secondary: rgba(243, 246, 253, 0.9);
+  --secondary-foreground: rgba(14, 22, 48, 0.92);
+  --muted: rgba(243, 246, 253, 0.9);
+  --muted-foreground: rgba(14, 22, 48, 0.66);
+  --accent: rgba(3, 73, 254, 0.09);
+  --accent-foreground: #0349fe;
+  --destructive: #eb1919;
+  --destructive-foreground: #ffffff;
+
+  --border: rgba(168, 190, 235, 0.3);
+  --input: rgba(168, 190, 235, 0.55);
+  --ring: #0349fe;
+
+  --chart-1: #0349fe;
+  --chart-2: #14bd44;
+  --chart-3: #ffb300;
+  --chart-4: #eb1919;
+  --chart-5: #9747ff;
+
+  --sidebar: rgba(255, 255, 255, 0.58);
+  --sidebar-foreground: rgba(14, 22, 48, 0.78);
+  --sidebar-primary: #0349fe;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: rgba(3, 73, 254, 0.09);
+  --sidebar-accent-foreground: #0349fe;
+  --sidebar-border: rgba(168, 190, 235, 0.35);
+  --sidebar-ring: #0349fe;
+
+  --danger: #c21414;
+  --danger-soft: rgba(235, 25, 25, 0.1);
+  --warning: #9a6e00;
+  --warning-soft: rgba(255, 179, 0, 0.16);
+  --success: #0e8f34;
+  --success-soft: rgba(20, 189, 68, 0.12);
+  --info: #136ba8;
+  --info-soft: rgba(42, 147, 213, 0.12);
+  --neutral: rgba(14, 22, 48, 0.6);
+  --neutral-soft: rgba(14, 22, 48, 0.06);
+
+  --link: #0349fe;
+  --link-hover: #0236c0;
+  --inset: rgba(243, 246, 253, 0.9);
+  --inset-foreground: rgba(14, 22, 48, 0.92);
+  --brand: #0349fe;
+  --brand-bright: #36b3ed;
+
+  /* Formas: la esquina crece con el tamaño del contenedor (7·10·14·18·22) */
+  --ds-radius-sm: 7px;
+  --ds-radius-md: 10px;
+  --ds-radius-lg: 14px;
+  --ds-radius-xl: 18px;
+  --ds-radius-2xl: 22px;
+  --ds-radius-control: 10px;
+  --ds-radius-overlay: 22px;
+
+  /* Sombras de cristal: capa tenue + brillo interior en el borde superior */
+  --ds-shadow-card: 0 2px 14px rgba(28, 48, 100, 0.07);
+  --ds-shadow-card-hover: 0 6px 26px rgba(28, 48, 100, 0.1);
+  --ds-shadow-raised: 0 4px 30px rgba(28, 48, 100, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
+  --ds-shadow-overlay: 0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
+  --ds-shadow-popover: 0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
+
+  /* Medidas: controles algo más altos y holgados */
+  --ds-control-h-sm: 2.25rem;
+  --ds-control-h-md: 2.5rem;
+  --ds-control-h-lg: 2.75rem;
+  --ds-button-px-sm: 1rem;
+  --ds-button-px-md: 1.25rem;
+  --ds-button-px-lg: 1.5rem;
+  --ds-field-px: 1rem;
+
+  /* Materiales: cristal en navegación y controles; tarjetas sin desenfoque */
+  --ds-sidebar-backdrop: blur(28px) saturate(180%);
+  --ds-overlay-backdrop: blur(28px) saturate(180%);
+  --ds-field-backdrop: blur(12px) saturate(160%);
+  --ds-card-backdrop: none;
+  --ds-page-backdrop:
+    radial-gradient(55% 45% at 78% 6%, rgba(54, 179, 237, 0.3), transparent 70%),
+    radial-gradient(50% 45% at 96% 58%, rgba(3, 73, 254, 0.16), transparent 70%),
+    radial-gradient(55% 50% at 40% 106%, rgba(151, 71, 255, 0.14), transparent 70%);
+
+  /* Sidebar a ras de borde: sin separación, sin silueta; filo de 1px */
+  --ds-sidebar-pad: 0px;
+  --ds-sidebar-radius: 0px;
+  --ds-sidebar-shadow: 0 0 #0000;
+  --ds-sidebar-ring: 0px;
+  --ds-sidebar-edge: 1px solid var(--zy-glass-bs);
+  --ds-sidebar-item-radius: var(--ds-radius-lg);
+
+  /* Privadas de zyro */
+  --zy-accent-g: linear-gradient(135deg, #0349fe, #36b3ed);
+  --zy-accent-glow: rgba(3, 73, 254, 0.24);
+  --zy-glass-bt: rgba(255, 255, 255, 0.95);
+  --zy-glass-bs: rgba(168, 190, 235, 0.4);
+  --zy-card-bt: rgba(255, 255, 255, 1);
+  --zy-card-bs: rgba(168, 190, 235, 0.46);
+  --zy-field-bg: rgba(255, 255, 255, 0.72);
+  --zy-field-b: rgba(168, 190, 235, 0.55);
+  --zy-field-bt: rgba(255, 255, 255, 1);
+  --zy-pill: rgba(255, 255, 255, 0.55);
+  --zy-pill-on: rgba(255, 255, 255, 0.98);
+  --zy-conv-h: rgba(20, 40, 90, 0.04);
+  --zy-conv-a: rgba(3, 73, 254, 0.07);
+  --zy-conv-ab: rgba(3, 73, 254, 0.24);
+  --zy-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+/* ── 1b. VARIABLES · PIEL OSCURA ─────────────────────────────────────────── */
+:root[data-theme='zyro'].dark {
+  --background: #0e3148;
+  --foreground: rgba(255, 255, 255, 0.94);
+
+  --card: rgba(16, 24, 54, 0.94);
+  --card-foreground: rgba(255, 255, 255, 0.94);
+  --popover: rgba(22, 32, 68, 0.97);
+  --popover-foreground: rgba(255, 255, 255, 0.94);
+
+  --primary: #36b3ed;
+  --primary-foreground: #04121c;
+  --secondary: rgba(255, 255, 255, 0.05);
+  --secondary-foreground: rgba(255, 255, 255, 0.94);
+  --muted: rgba(255, 255, 255, 0.05);
+  --muted-foreground: rgba(255, 255, 255, 0.68);
+  --accent: rgba(54, 179, 237, 0.16);
+  --accent-foreground: #36b3ed;
+  --destructive: #eb1919;
+  --destructive-foreground: #ffffff;
+
+  --border: rgba(255, 255, 255, 0.07);
+  --input: rgba(255, 255, 255, 0.12);
+  --ring: #36b3ed;
+
+  --chart-1: #36b3ed;
+  --chart-2: #14bd44;
+  --chart-3: #ffb300;
+  --chart-4: #eb1919;
+  --chart-5: #9747ff;
+
+  --sidebar: rgba(255, 255, 255, 0.04);
+  --sidebar-foreground: rgba(255, 255, 255, 0.72);
+  --sidebar-primary: #36b3ed;
+  --sidebar-primary-foreground: #04121c;
+  --sidebar-accent: rgba(54, 179, 237, 0.16);
+  --sidebar-accent-foreground: #36b3ed;
+  --sidebar-border: rgba(255, 255, 255, 0.07);
+  --sidebar-ring: #36b3ed;
+
+  --danger: #ff6b6b;
+  --danger-soft: rgba(235, 25, 25, 0.2);
+  --warning: #ffb300;
+  --warning-soft: rgba(255, 179, 0, 0.18);
+  --success: #14bd44;
+  --success-soft: rgba(20, 189, 68, 0.18);
+  --info: #2a93d5;
+  --info-soft: rgba(42, 147, 213, 0.2);
+  --neutral: rgba(255, 255, 255, 0.6);
+  --neutral-soft: rgba(255, 255, 255, 0.08);
+
+  --link: #36b3ed;
+  --link-hover: #7fd0f5;
+  --inset: rgba(255, 255, 255, 0.05);
+  --inset-foreground: rgba(255, 255, 255, 0.94);
+  --brand: #36b3ed;
+  --brand-bright: #7fd0f5;
+
+  --ds-shadow-card: 0 2px 14px rgba(0, 0, 0, 0.3);
+  --ds-shadow-card-hover: 0 6px 26px rgba(0, 0, 0, 0.38);
+  --ds-shadow-raised: 0 8px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  --ds-shadow-overlay: 0 22px 64px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.13);
+  --ds-shadow-popover: 0 22px 64px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.13);
+
+  --ds-sidebar-backdrop: blur(24px) saturate(180%);
+  --ds-overlay-backdrop: blur(24px) saturate(180%);
+  --ds-page-backdrop:
+    radial-gradient(55% 45% at 78% 6%, rgba(54, 179, 237, 0.26), transparent 70%),
+    radial-gradient(50% 45% at 96% 58%, rgba(3, 73, 254, 0.24), transparent 70%),
+    radial-gradient(55% 50% at 40% 106%, rgba(151, 71, 255, 0.2), transparent 70%);
+
+  --zy-accent-g: linear-gradient(135deg, #36b3ed, #0349fe);
+  --zy-accent-glow: rgba(54, 179, 237, 0.42);
+  --zy-glass-bt: rgba(255, 255, 255, 0.3);
+  --zy-glass-bs: rgba(255, 255, 255, 0.07);
+  --zy-card-bt: rgba(255, 255, 255, 0.11);
+  --zy-card-bs: rgba(255, 255, 255, 0.06);
+  --zy-field-bg: rgba(255, 255, 255, 0.06);
+  --zy-field-b: rgba(255, 255, 255, 0.12);
+  --zy-field-bt: rgba(255, 255, 255, 0.26);
+  --zy-pill: rgba(255, 255, 255, 0.05);
+  --zy-pill-on: rgba(255, 255, 255, 0.12);
+  --zy-conv-h: rgba(255, 255, 255, 0.05);
+  --zy-conv-a: rgba(54, 179, 237, 0.14);
+  --zy-conv-ab: rgba(54, 179, 237, 0.4);
+}
+
+/* ── 2. PERSONALIDAD ─────────────────────────────────────────────────────────
+ * Sin capa: gana a las utilidades de los componentes. Solo variables.
+ */
+:root[data-theme='zyro'] {
+  /* Botones: píldora. Acción primaria con degradado de marca y brillo. */
+  [data-slot='button'] {
+    border-radius: 9999px;
+    transition: all var(--ds-motion-base) var(--zy-ease);
+  }
+  [data-slot='button'][data-size^='icon'] {
+    border-radius: var(--ds-radius-xl);
+  }
+  [data-slot='button']:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+  [data-slot='button'][data-variant='default'] {
+    background-color: transparent;
+    background-image: var(--zy-accent-g);
+    color: #ffffff;
+    border-color: transparent;
+    box-shadow: 0 4px 16px var(--zy-accent-glow);
+  }
+  [data-slot='button'][data-variant='default']:hover:not(:disabled) {
+    filter: brightness(1.1);
+    box-shadow: 0 6px 22px var(--zy-accent-glow);
+  }
+  [data-slot='button'][data-variant='destructive'] {
+    box-shadow: 0 4px 16px rgba(235, 25, 25, 0.3);
+  }
+  [data-slot='button'][data-variant='outline'],
+  [data-slot='button'][data-variant='secondary'] {
+    border: 1px solid var(--zy-field-b);
+    background: color-mix(in oklch, var(--foreground) 5%, var(--background));
+    color: var(--muted-foreground);
+  }
+  [data-slot='button'][data-variant='outline']:hover:not(:disabled),
+  [data-slot='button'][data-variant='secondary']:hover:not(:disabled) {
+    background: color-mix(in oklch, var(--foreground) 11%, var(--background));
+    color: var(--foreground);
+  }
+  [data-slot='button'][data-variant='ghost']:hover:not(:disabled) {
+    background: var(--zy-conv-h);
+    color: var(--foreground);
+  }
+
+  /* Tarjetas: contenido casi opaco con filo superior luminoso */
+  [data-slot='card'] {
+    border: 1px solid var(--zy-card-bs);
+    border-top-color: var(--zy-card-bt);
+  }
+
+  /* Campos: cristal claro con filo superior */
+  [data-slot='input'],
+  [data-slot='textarea'],
+  [data-slot='select-trigger'] {
+    background-color: var(--zy-field-bg);
+    border-color: var(--zy-field-b);
+    border-top-color: var(--zy-field-bt);
+  }
+
+  /* Capas flotantes: filo de cristal */
+  [data-slot='dialog-content'],
+  [data-slot='popover-content'],
+  [data-slot='dropdown-menu-content'],
+  [data-slot='select-content'] {
+    border: 1px solid var(--zy-glass-bs);
+    border-top-color: var(--zy-glass-bt);
+  }
+
+  /* Etiquetas en píldora */
+  [data-slot='badge'] {
+    border-radius: 9999px;
+  }
+
+  /* Pestañas: píldora de cristal con la activa elevada */
+  [data-slot='tabs-list'] {
+    background: var(--zy-pill);
+    border: 1px solid var(--zy-card-bs);
+    border-radius: 9999px;
+  }
+  [data-slot='tabs-trigger'] {
+    border-radius: 9999px;
+  }
+  [data-slot='tabs-trigger'][data-active] {
+    background: var(--zy-pill-on);
+    box-shadow: 0 1px 6px rgba(28, 48, 100, 0.12);
+  }
+
+  /* Interruptor y progreso: degradado de marca */
+  [data-slot='switch'][data-checked] {
+    background-image: var(--zy-accent-g);
+    background-color: transparent;
+  }
+  [data-slot='progress-indicator'] {
+    background-image: var(--zy-accent-g);
+    background-color: transparent;
+  }
+
+  /* Sidebar: destino activo con tinte y filo, como la conversación activa de zyro */
+  [data-sidebar='menu-button'][data-active='true'] {
+    background: var(--zy-conv-a);
+    box-shadow: inset 0 0 0 1px var(--zy-conv-ab);
+    color: var(--sidebar-accent-foreground);
+  }
+  [data-sidebar='menu-button']:hover:not([data-active='true']) {
+    background: var(--zy-conv-h);
+  }
+}
+
+/* Ajustes de personalidad (vistos en el banco de pruebas) */
+:root[data-theme='zyro'] {
+  /* Grupos de botones: píldora solo en los extremos, el interior recto */
+  [data-slot='button-group'] [data-slot='button'] {
+    border-radius: 0;
+  }
+  [data-slot='button-group'] [data-slot='button']:first-child {
+    border-start-start-radius: 9999px;
+    border-end-start-radius: 9999px;
+  }
+  [data-slot='button-group'] [data-slot='button']:last-child {
+    border-start-end-radius: 9999px;
+    border-end-end-radius: 9999px;
+  }
+
+  /* Esqueletos: visibles sobre la tarjeta casi blanca */
+  [data-slot='skeleton'] {
+    background: color-mix(in oklch, var(--foreground) 9%, transparent);
+  }
+}
+
+/* Fondo vivo: los degradados derivan despacio (aproximación ligera, sin WebGL de la
+   malla original). `prefers-reduced-motion` ya detiene la animación en la estructura. */
+:root[data-theme='zyro'] {
+  body {
+    background-size: 160% 160%;
+    animation: zy-drift 40s ease-in-out infinite alternate;
+  }
+}
+@keyframes zy-drift {
+  from {
+    background-position: 0% 0%;
+  }
+  to {
+    background-position: 100% 100%;
+  }
+}

package/dist/ui/attachment.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 import { Button } from './button.js';
 
 declare const attachmentVariants: (props?: ({
-    size?: "default" | "xs" | "sm" | null | undefined;
+    size?: "default" | "sm" | "xs" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Attachment({ className, state, size, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentVariants> & {

package/dist/ui/badge.d.ts

@@ -4,7 +4,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 

package/dist/ui/bubble.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 
 declare function BubbleGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare const bubbleVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "muted" | "tinted" | null | undefined;
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "muted" | "tinted" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Bubble({ variant, align, className, ...props }: React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & {
     align?: "start" | "end";

package/dist/ui/button.d.ts

@@ -4,8 +4,8 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, render, nativeButton: _nativeButton, ...props }: useRender.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     nativeButton?: boolean;

package/dist/ui/input-group.d.ts

@@ -10,7 +10,7 @@ declare const inputGroupAddonVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
-    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
     type?: "button" | "submit" | "reset";

package/dist/ui/item.d.ts

@@ -9,11 +9,11 @@ declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">)
 declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
 declare const itemVariants: (props?: ({
     variant?: "default" | "outline" | "muted" | null | undefined;
-    size?: "default" | "xs" | "sm" | null | undefined;
+    size?: "default" | "sm" | "xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Item({ className, variant, size, render, ...props }: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare const itemMediaVariants: (props?: ({
-    variant?: "default" | "image" | "icon" | null | undefined;
+    variant?: "image" | "default" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): React.JSX.Element;
 declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/ui/sidebar.js

@@ -170,7 +170,7 @@ function Sidebar({
               "relative w-(--sidebar-width) bg-transparent transition-[width] duration-(--ds-motion-base) ease-linear",
               "group-data-[collapsible=offcanvas]:w-0",
               "group-data-[side=right]:rotate-180",
-              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(var(--ds-sidebar-pad)*2))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
             )
           }
         ),
@@ -182,7 +182,7 @@ function Sidebar({
             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",
               // Adjust the padding for floating and inset variants.
-              variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              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
             ),
             ...props,
@@ -191,7 +191,7 @@ function Sidebar({
               {
                 "data-sidebar": "sidebar",
                 "data-slot": "sidebar-inner",
-                className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-raised group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border",
+                className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-(--ds-sidebar-radius) group-data-[variant=floating]:shadow-(--ds-sidebar-shadow) group-data-[variant=floating]:ring-(length:--ds-sidebar-ring) group-data-[variant=floating]:ring-sidebar-border",
                 children
               }
             )
@@ -421,7 +421,7 @@ function SidebarMenuItem({ className, ...props }) {
   );
 }
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-(--ds-sidebar-item-radius) px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
   {
     variants: {
       variant: {

package/dist/ui/tabs.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
 
 declare function Tabs({ className, orientation, ...props }: Tabs$1.Root.Props): React.JSX.Element;
 declare const tabsListVariants: (props?: ({
-    variant?: "default" | "line" | null | undefined;
+    variant?: "line" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function TabsList({ className, variant, ...props }: Tabs$1.List.Props & VariantProps<typeof tabsListVariants>): React.JSX.Element;
 declare function TabsTrigger({ className, ...props }: Tabs$1.Tab.Props): React.JSX.Element;

package/docs/CONTRACT.md

@@ -6,13 +6,15 @@ colores, medidas, sombras, capas ni duraciones escritos a mano. Por eso cambiar
 tema cambia todo el aspecto sin tocar un componente.
 
 El contrato vive en [`contract.json`](../contract.json) y lo comprueba
-`pnpm doctor` (que forma parte de `pnpm verify`): si a un tema le falta un token
+`pnpm check:ds` (que forma parte de `pnpm verify`): si a un tema le falta un token
 obligatorio, el build falla.
 
 ## Cómo se usa
 
 ```css
+@import 'orbital-ds/themes/qratia.fonts.css'; /* 0. las FUENTES del tema: lo PRIMERO del fichero */
 @import 'tailwindcss';
+@plugin '@tailwindcss/typography';
 @import 'tw-animate-css';
 
 @import 'orbital-ds/styles.css';        /* 1. la ESTRUCTURA común */
@@ -24,6 +26,14 @@ obligatorio, el build falla.
 El tema se importa **después** de la estructura: así puede sobrescribir también la
 escala de radios y las sombras, que viven en `@theme`.
 
+Las **fuentes** van en un fichero aparte por tema (`themes/<tema>.fonts.css`, solo un
+`@import url(...)` de Google Fonts) porque un `@import` remoto solo vale al principio
+de la hoja. Importado el primero, el empaquetador lo sube al inicio y se cargan. Dentro
+del propio `<tema>.css` no se pueden poner.
+
+Los títulos usan `--font-display` (por defecto, la misma fuente que el cuerpo; un tema
+con fuente de titulares, como zyro, la sobrescribe).
+
 Para ajustar un valor sin crear un tema, se sobrescribe la variable al final:
 
 ```css
@@ -46,9 +56,9 @@ Para ajustar un valor sin crear un tema, se sobrescribe la variable al final:
 | Texto acentuado | `--link`, `--link-hover` |
 | Superficie hundida | `--inset`, `--inset-foreground` |
 | Marca | `--brand`, `--brand-bright` |
-| Tipografía | `--font-sans` (en `:root` o en `@theme`) |
+| Tipografía | `--font-sans` (en `:root` o en `@theme`); opcional `--font-display` para titulares |
 
-En `.dark` se redefine lo que cambie; `doctor` avisa (no falla) de los tokens
+En `.dark` se redefine lo que cambie; `check:ds` avisa (no falla) de los tokens
 principales que se hereden de la piel clara.
 
 `--destructive` es el rojo de **acciones** (botón de borrar); `--danger` es el rojo
@@ -74,6 +84,35 @@ Los **materiales** son lo que hace posible un tema de cristal como `zyro`: con v
 neutros no hay efecto ni coste; con `blur(28px) saturate(180%)` las superficies se
 vuelven translúcidas.
 
+## Capa de marca (`brand.css`): lo que cambia una app, y nunca se pisa
+
+Tres capas, de menos a más personal:
+
+1. **Estructura y componentes** (paquete): se actualizan.
+2. **Tema y personalidad** (paquete: `qratia`, `zyro`…): formas, sombras, materiales,
+   anatomía del sidebar. Se actualizan con versión y changelog.
+3. **Marca** (`src/brand.css`, **en la app**): el grupo estable de variables que una marca
+   suele cambiar (`brand.tokens` en `contract.json`: color principal, foco, enlace,
+   acento, radio, fuentes). Se importa **después** del tema, así gana, y **ninguna
+   actualización lo toca**. Sin fichero, o vacío, se aplica el estándar del tema.
+
+```css
+@import 'orbital-ds/themes/qratia.css';
+@import './brand.css';   /* tuyo: gana al tema */
+```
+
+`pnpm exec orbital-ds-init` lo crea la primera vez (con las variables comentadas) y **nunca
+sobrescribe** uno existente.
+
+**Por qué una actualización no lo rompe:** los nombres de ese grupo son estables; quitar o
+renombrar uno es versión **mayor**, con aviso antes. Además,
+`orbital-ds-doctor --css src/brand.css` falla si el fichero usa una `--ds-*` que el paquete
+ya no define, para que una renombrada no se ignore en silencio.
+
+**Cambiar el color principal:** mueve juntas `primary`, `ring`, `link`, `brand`,
+`sidebar-primary` y `chart-1`, y comprueba el contraste del texto sobre ellas. Nunca edites
+el tema dentro de `node_modules` para personalizar una app.
+
 ## Reglas de nombres
 
 - Todo en **inglés**: tokens, props y valores de variantes.
@@ -83,7 +122,7 @@ vuelven translúcidas.
 - Un componente que necesite un hueco nuevo **añade el token** con un valor que deje
   el aspecto como estaba; nunca escribe el valor en el componente.
 
-## Qué comprueba `pnpm doctor`
+## Qué comprueba `pnpm check:ds`
 
 1. **Contrato**: cada tema define todos los tokens obligatorios.
 2. **Repetidos**: ninguna variable se define dos veces en el mismo bloque.
@@ -99,7 +138,7 @@ También se puede pasar el CSS de una app: `orbital-ds-doctor --css src/styles.c
 
 1. Copia `themes/qratia.css` (o `zyro.css`) a `themes/<nombre>.css`.
 2. Cambia los valores; no quites ninguno.
-3. `pnpm doctor`: te dice qué falta.
+3. `pnpm check:ds`: te dice qué falta.
 4. Opcional: usa los materiales para dar cristal, relieve o un fondo propio.
 
 Se puede partir de un tema de shadcn (por ejemplo exportado desde tweakcn): usa los

package/package.json

@@ -1,7 +1,7 @@
 {
   "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.",
+  "version": "0.4.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",
@@ -20,9 +20,13 @@
     "dist",
     "scripts/doctor.mjs",
     "contract.json",
+    "components.manifest.json",
     "docs",
+    "AGENTS.md",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "scripts/init.mjs",
+    "scripts/manifest.mjs"
   ],
   "exports": {
     "./styles.css": "./dist/styles.css",
@@ -40,14 +44,16 @@
       "import": "./dist/hooks/*.js"
     },
     "./package.json": "./package.json",
-    "./contract.json": "./contract.json"
+    "./contract.json": "./contract.json",
+    "./components.manifest.json": "./components.manifest.json"
   },
   "scripts": {
-    "build": "tsup && node scripts/copy-css.mjs",
+    "build": "tsup && node scripts/build-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"
+    "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",
@@ -128,6 +134,7 @@
     "react-resizable-panels": "^4.14.4"
   },
   "bin": {
-    "orbital-ds-doctor": "./scripts/doctor.mjs"
+    "orbital-ds-doctor": "./scripts/doctor.mjs",
+    "orbital-ds-init": "./scripts/init.mjs"
   }
 }