orbital-ds 0.9.0 → 0.10.0

package/dist/lib/echarts-theme.js

@@ -0,0 +1,142 @@
+const PALETTE_VARS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5", "--info", "--success", "--warning", "--danger", "--brand"];
+let ctx;
+function dsResolveColor(value) {
+  const v = value.trim();
+  if (!v || typeof document === "undefined") return v;
+  if (ctx === void 0) {
+    const canvas = document.createElement("canvas");
+    canvas.width = canvas.height = 1;
+    ctx = canvas.getContext("2d", { willReadFrequently: true });
+  }
+  if (!ctx) return v;
+  ctx.clearRect(0, 0, 1, 1);
+  ctx.fillStyle = "#000";
+  ctx.fillStyle = v;
+  ctx.fillRect(0, 0, 1, 1);
+  const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+  return `rgba(${r}, ${g}, ${b}, ${Math.round(a / 255 * 1e3) / 1e3})`;
+}
+function cssColor(style, name, fallback) {
+  const raw = style.getPropertyValue(name).trim();
+  if (!raw) return fallback;
+  if (raw.includes("var(") && typeof document !== "undefined") {
+    const probe = document.createElement("span");
+    probe.style.color = raw;
+    probe.style.display = "none";
+    document.body.appendChild(probe);
+    const resolved = getComputedStyle(probe).color;
+    probe.remove();
+    return dsResolveColor(resolved || fallback);
+  }
+  return dsResolveColor(raw);
+}
+function dsChartTokens(el) {
+  const style = getComputedStyle(el ?? document.documentElement);
+  const c = (name, fallback) => cssColor(style, name, fallback);
+  const ms = (name, d) => {
+    const v = style.getPropertyValue(name).trim();
+    const n = parseFloat(v);
+    return Number.isNaN(n) ? d : v.endsWith("ms") ? n : n * 1e3;
+  };
+  const foreground = c("--foreground", "#1f2937");
+  const fontSans = style.getPropertyValue("--ds-font-sans").trim() || "system-ui, sans-serif";
+  return {
+    palette: PALETTE_VARS.map((v) => c(v, "")).filter((x, i, a) => x && a.indexOf(x) === i),
+    foreground,
+    muted: c("--muted-foreground", "#6b7280"),
+    border: c("--border", "#e5e7eb"),
+    surface: c("--popover", "#ffffff"),
+    surfaceForeground: c("--popover-foreground", foreground),
+    fontSans,
+    fontDisplay: style.getPropertyValue("--ds-font-display").trim() || fontSans,
+    motionBaseMs: ms("--ds-motion-base", 200),
+    motionSlowMs: ms("--ds-motion-slow", 300)
+  };
+}
+function dsChartPalette(el) {
+  return typeof window === "undefined" ? [] : dsChartTokens(el).palette;
+}
+function mix(a, b, weight) {
+  const parse = (s) => {
+    const m = s.match(/rgba?\(([^)]+)\)/);
+    if (m) return m[1].split(/[ ,/]+/).filter(Boolean).map(Number).slice(0, 3);
+    const h = s.replace("#", "");
+    if (/^[0-9a-f]{6}/i.test(h)) return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16));
+    return null;
+  };
+  const x = parse(a);
+  const y = parse(b);
+  if (!x || !y) return a;
+  const v = x.map((n, i) => Math.round(n * weight + y[i] * (1 - weight)));
+  return `rgb(${v[0]}, ${v[1]}, ${v[2]})`;
+}
+function dsEchartsThemeFromTokens(t, { reducedMotion = false } = {}) {
+  const primary = t.palette[0] ?? t.foreground;
+  const axis = {
+    axisLine: { show: true, lineStyle: { color: t.border } },
+    axisTick: { show: false, lineStyle: { color: t.border } },
+    axisLabel: { color: t.muted, fontFamily: t.fontSans },
+    splitLine: { show: true, lineStyle: { color: t.border, type: "dashed" } },
+    splitArea: { show: false },
+    nameTextStyle: { color: t.muted, fontFamily: t.fontSans }
+  };
+  return {
+    color: t.palette,
+    backgroundColor: "transparent",
+    textStyle: { fontFamily: t.fontSans, color: t.foreground },
+    title: {
+      textStyle: { color: t.foreground, fontFamily: t.fontDisplay, fontWeight: 600 },
+      subtextStyle: { color: t.muted, fontFamily: t.fontSans }
+    },
+    legend: { textStyle: { color: t.muted, fontFamily: t.fontSans }, inactiveColor: t.border, pageIconColor: t.foreground, pageTextStyle: { color: t.muted } },
+    tooltip: {
+      backgroundColor: t.surface,
+      borderColor: t.border,
+      borderWidth: 1,
+      textStyle: { color: t.surfaceForeground, fontFamily: t.fontSans },
+      axisPointer: { lineStyle: { color: t.muted }, crossStyle: { color: t.muted }, shadowStyle: { color: t.border } },
+      extraCssText: "border-radius: var(--ds-radius-popover, 12px); box-shadow: var(--ds-shadow-popover, none);"
+    },
+    categoryAxis: { ...axis, splitLine: { show: false } },
+    valueAxis: { ...axis, axisLine: { show: false } },
+    logAxis: axis,
+    timeAxis: { ...axis, splitLine: { show: false } },
+    grid: { borderColor: t.border, left: 8, right: 16, top: 32, bottom: 8 },
+    // ECharts 6: las etiquetas ya caben (outerBounds por defecto)
+    dataZoom: {
+      borderColor: t.border,
+      textStyle: { color: t.muted },
+      fillerColor: mix(primary, t.surface, 0.15),
+      handleStyle: { color: t.surface, borderColor: t.muted },
+      moveHandleStyle: { color: t.muted },
+      dataBackground: { lineStyle: { color: t.muted }, areaStyle: { color: t.border } }
+    },
+    visualMap: { textStyle: { color: t.muted }, inRange: { color: [mix(primary, t.surface, 0.12), primary] } },
+    line: { symbol: "circle", symbolSize: 6, smooth: false, lineStyle: { width: 2 } },
+    bar: { itemStyle: { borderRadius: 3 } },
+    pie: { itemStyle: { borderColor: t.surface, borderWidth: 2 } },
+    sankey: { label: { color: t.foreground, fontFamily: t.fontSans }, lineStyle: { color: "gradient", opacity: 0.35 } },
+    gauge: { axisLine: { lineStyle: { color: [[1, t.border]] } }, axisLabel: { color: t.muted }, detail: { color: t.foreground, fontFamily: t.fontDisplay } },
+    markLine: { lineStyle: { color: t.muted }, label: { color: t.muted } },
+    markArea: { itemStyle: { color: mix(primary, t.surface, 0.1) }, label: { color: t.muted } },
+    animation: !reducedMotion,
+    animationDuration: reducedMotion ? 0 : t.motionSlowMs,
+    animationDurationUpdate: reducedMotion ? 0 : t.motionBaseMs,
+    animationEasing: "cubicOut",
+    animationEasingUpdate: "cubicOut"
+  };
+}
+function dsEchartsTheme(el) {
+  if (typeof window === "undefined") {
+    return { color: [], backgroundColor: "transparent", textStyle: { fontFamily: "system-ui, sans-serif", color: "#333" } };
+  }
+  const reducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+  return dsEchartsThemeFromTokens(dsChartTokens(el), { reducedMotion });
+}
+export {
+  dsChartPalette,
+  dsChartTokens,
+  dsEchartsTheme,
+  dsEchartsThemeFromTokens,
+  dsResolveColor
+};

package/dist/lib/i18n.d.ts

@@ -28,6 +28,60 @@ declare const en: {
     questionnaireSkip: string;
     questionnaireNext: string;
     questionnaireSubmit: string;
+    codeCopy: string;
+    codeCopied: string;
+    notifications: string;
+    notificationsMarkAllRead: string;
+    notificationsEmpty: string;
+    notificationsUnread: string;
+    datePickerPlaceholder: string;
+    dateRangePlaceholder: string;
+    dropzoneTitle: string;
+    dropzoneHint: string;
+    dropzoneTooLarge: string;
+    dropzoneWrongType: string;
+    dataTableSearch: string;
+    dataTableColumns: string;
+    dataTableNoResults: string;
+    dataTableSelected: string;
+    dataTableRowsPerPage: string;
+    dataTablePage: string;
+    dataTableSortAsc: string;
+    dataTableSortDesc: string;
+    dataTableHideColumn: string;
+    chartExportSvg: string;
+    chartExportPng: string;
+    chartNoData: string;
+    stepperStep: string;
+    stepperCompleted: string;
+    stepperCurrent: string;
+    stepperError: string;
+    statIncrease: string;
+    statDecrease: string;
+    statNoChange: string;
+    notificationsForYou: string;
+    notificationsGeneral: string;
+    notificationsHistory: string;
+    datePresetToday: string;
+    datePresetYesterday: string;
+    datePresetLastDays: string;
+    dateApply: string;
+    dateClear: string;
+    dateMaxSpan: string;
+    filterAll: string;
+    filterClear: string;
+    statNoData: string;
+    heatmapLow: string;
+    heatmapHigh: string;
+    dataTableFilter: string;
+    dataTableLoading: string;
+    dropzoneTooMany: string;
+    calendarPrevious: string;
+    calendarNext: string;
+    notificationUnread: string;
+    statusMeaning: string;
+    statusCause: string;
+    statusAction: string;
 };
 type DsMessages = typeof en;
 type DsMessageKey = keyof DsMessages;
@@ -38,9 +92,11 @@ declare const dsCatalogs: Record<DsLocale, DsMessages>;
  * coincidencia exacta → mismo idioma base → inglés. Misma regla que la plantilla.
  */
 declare function resolveDsLocale(tag: string | null | undefined): DsLocale;
+/** Rellena {marcadores} de un texto: dsFormat("{n} sin leer", { n: 3 }) → "3 sin leer". */
+declare function dsFormat(text: string, vars: Record<string, string | number>): string;
 /** Textos para un idioma, con sobrescrituras opcionales. */
 declare function dsMessagesFor(tag?: string | null, overrides?: Partial<DsMessages>): DsMessages;
 declare const DS_RTL_LANGS: readonly ["ar", "he", "fa", "ur", "ps", "sd", "ug", "yi", "dv", "ckb"];
 declare function dsDirection(tag: string | null | undefined): "ltr" | "rtl";
 
-export { DS_DEFAULT_LOCALE, DS_LOCALES, DS_RTL_LANGS, type DsLocale, type DsMessageKey, type DsMessages, dsCatalogs, dsDirection, dsMessagesFor, resolveDsLocale };
+export { DS_DEFAULT_LOCALE, DS_LOCALES, DS_RTL_LANGS, type DsLocale, type DsMessageKey, type DsMessages, dsCatalogs, dsDirection, dsFormat, dsMessagesFor, resolveDsLocale };

package/dist/lib/i18n.js

@@ -26,7 +26,61 @@ const en = {
   questionnairePrevious: "Previous",
   questionnaireSkip: "Skip",
   questionnaireNext: "Next",
-  questionnaireSubmit: "Submit"
+  questionnaireSubmit: "Submit",
+  codeCopy: "Copy code",
+  codeCopied: "Copied",
+  notifications: "Notifications",
+  notificationsMarkAllRead: "Mark all as read",
+  notificationsEmpty: "You're all caught up",
+  notificationsUnread: "{n} unread",
+  datePickerPlaceholder: "Pick a date",
+  dateRangePlaceholder: "Pick a date range",
+  dropzoneTitle: "Drop files here",
+  dropzoneHint: "or click to browse",
+  dropzoneTooLarge: "{name} is larger than {max}",
+  dropzoneWrongType: "{name} is not an accepted file type",
+  dataTableSearch: "Search\u2026",
+  dataTableColumns: "Columns",
+  dataTableNoResults: "No results",
+  dataTableSelected: "{n} of {total} selected",
+  dataTableRowsPerPage: "Rows per page",
+  dataTablePage: "Page {page} of {pages}",
+  dataTableSortAsc: "Sort ascending",
+  dataTableSortDesc: "Sort descending",
+  dataTableHideColumn: "Hide column",
+  chartExportSvg: "Download SVG",
+  chartExportPng: "Download PNG",
+  chartNoData: "No data",
+  stepperStep: "Step {n}",
+  stepperCompleted: "Completed",
+  stepperCurrent: "Current step",
+  stepperError: "Needs attention",
+  statIncrease: "Increase",
+  statDecrease: "Decrease",
+  statNoChange: "No change",
+  notificationsForYou: "For you",
+  notificationsGeneral: "General",
+  notificationsHistory: "History",
+  datePresetToday: "Today",
+  datePresetYesterday: "Yesterday",
+  datePresetLastDays: "Last {n} days",
+  dateApply: "Apply",
+  dateClear: "Clear",
+  dateMaxSpan: "Up to {n} days",
+  filterAll: "All",
+  filterClear: "Clear filters",
+  statNoData: "No data",
+  heatmapLow: "Low",
+  heatmapHigh: "High",
+  dataTableFilter: "Filter",
+  dataTableLoading: "Loading data",
+  dropzoneTooMany: "{name}: up to {n} files",
+  calendarPrevious: "Previous month",
+  calendarNext: "Next month",
+  notificationUnread: "Unread",
+  statusMeaning: "What it means",
+  statusCause: "Why",
+  statusAction: "What to do"
 };
 const es = {
   close: "Cerrar",
@@ -54,7 +108,61 @@ const es = {
   questionnairePrevious: "Anterior",
   questionnaireSkip: "Omitir",
   questionnaireNext: "Siguiente",
-  questionnaireSubmit: "Enviar"
+  questionnaireSubmit: "Enviar",
+  codeCopy: "Copiar c\xF3digo",
+  codeCopied: "Copiado",
+  notifications: "Notificaciones",
+  notificationsMarkAllRead: "Marcar todo como le\xEDdo",
+  notificationsEmpty: "Est\xE1s al d\xEDa",
+  notificationsUnread: "{n} sin leer",
+  datePickerPlaceholder: "Elige una fecha",
+  dateRangePlaceholder: "Elige un rango de fechas",
+  dropzoneTitle: "Suelta aqu\xED los ficheros",
+  dropzoneHint: "o haz clic para buscarlos",
+  dropzoneTooLarge: "{name} supera {max}",
+  dropzoneWrongType: "{name} no es un tipo de fichero admitido",
+  dataTableSearch: "Buscar\u2026",
+  dataTableColumns: "Columnas",
+  dataTableNoResults: "Sin resultados",
+  dataTableSelected: "{n} de {total} seleccionadas",
+  dataTableRowsPerPage: "Filas por p\xE1gina",
+  dataTablePage: "P\xE1gina {page} de {pages}",
+  dataTableSortAsc: "Orden ascendente",
+  dataTableSortDesc: "Orden descendente",
+  dataTableHideColumn: "Ocultar columna",
+  chartExportSvg: "Descargar SVG",
+  chartExportPng: "Descargar PNG",
+  chartNoData: "Sin datos",
+  stepperStep: "Paso {n}",
+  stepperCompleted: "Completado",
+  stepperCurrent: "Paso actual",
+  stepperError: "Requiere atenci\xF3n",
+  statIncrease: "Subida",
+  statDecrease: "Bajada",
+  statNoChange: "Sin cambios",
+  notificationsForYou: "Para ti",
+  notificationsGeneral: "General",
+  notificationsHistory: "Hist\xF3rico",
+  datePresetToday: "Hoy",
+  datePresetYesterday: "Ayer",
+  datePresetLastDays: "\xDAltimos {n} d\xEDas",
+  dateApply: "Aplicar",
+  dateClear: "Borrar",
+  dateMaxSpan: "Hasta {n} d\xEDas",
+  filterAll: "Todos",
+  filterClear: "Quitar filtros",
+  statNoData: "Sin dato",
+  heatmapLow: "Bajo",
+  heatmapHigh: "Alto",
+  dataTableFilter: "Filtrar",
+  dataTableLoading: "Cargando datos",
+  dropzoneTooMany: "{name}: m\xE1ximo {n} ficheros",
+  calendarPrevious: "Mes anterior",
+  calendarNext: "Mes siguiente",
+  notificationUnread: "Sin leer",
+  statusMeaning: "Qu\xE9 significa",
+  statusCause: "Por qu\xE9",
+  statusAction: "Qu\xE9 hacer"
 };
 const ptBR = {
   close: "Fechar",
@@ -82,7 +190,61 @@ const ptBR = {
   questionnairePrevious: "Anterior",
   questionnaireSkip: "Pular",
   questionnaireNext: "Pr\xF3xima",
-  questionnaireSubmit: "Enviar"
+  questionnaireSubmit: "Enviar",
+  codeCopy: "Copiar c\xF3digo",
+  codeCopied: "Copiado",
+  notifications: "Notifica\xE7\xF5es",
+  notificationsMarkAllRead: "Marcar tudo como lido",
+  notificationsEmpty: "Voc\xEA est\xE1 em dia",
+  notificationsUnread: "{n} n\xE3o lidas",
+  datePickerPlaceholder: "Escolha uma data",
+  dateRangePlaceholder: "Escolha um intervalo de datas",
+  dropzoneTitle: "Solte os arquivos aqui",
+  dropzoneHint: "ou clique para procurar",
+  dropzoneTooLarge: "{name} excede {max}",
+  dropzoneWrongType: "{name} n\xE3o \xE9 um tipo de arquivo aceito",
+  dataTableSearch: "Pesquisar\u2026",
+  dataTableColumns: "Colunas",
+  dataTableNoResults: "Nenhum resultado",
+  dataTableSelected: "{n} de {total} selecionadas",
+  dataTableRowsPerPage: "Linhas por p\xE1gina",
+  dataTablePage: "P\xE1gina {page} de {pages}",
+  dataTableSortAsc: "Ordem crescente",
+  dataTableSortDesc: "Ordem decrescente",
+  dataTableHideColumn: "Ocultar coluna",
+  chartExportSvg: "Baixar SVG",
+  chartExportPng: "Baixar PNG",
+  chartNoData: "Sem dados",
+  stepperStep: "Etapa {n}",
+  stepperCompleted: "Conclu\xEDdo",
+  stepperCurrent: "Etapa atual",
+  stepperError: "Requer aten\xE7\xE3o",
+  statIncrease: "Aumento",
+  statDecrease: "Queda",
+  statNoChange: "Sem altera\xE7\xE3o",
+  notificationsForYou: "Para voc\xEA",
+  notificationsGeneral: "Geral",
+  notificationsHistory: "Hist\xF3rico",
+  datePresetToday: "Hoje",
+  datePresetYesterday: "Ontem",
+  datePresetLastDays: "\xDAltimos {n} dias",
+  dateApply: "Aplicar",
+  dateClear: "Limpar",
+  dateMaxSpan: "At\xE9 {n} dias",
+  filterAll: "Todos",
+  filterClear: "Limpar filtros",
+  statNoData: "Sem dado",
+  heatmapLow: "Baixo",
+  heatmapHigh: "Alto",
+  dataTableFilter: "Filtrar",
+  dataTableLoading: "Carregando dados",
+  dropzoneTooMany: "{name}: m\xE1ximo de {n} arquivos",
+  calendarPrevious: "M\xEAs anterior",
+  calendarNext: "Pr\xF3ximo m\xEAs",
+  notificationUnread: "N\xE3o lida",
+  statusMeaning: "O que significa",
+  statusCause: "Por qu\xEA",
+  statusAction: "O que fazer"
 };
 const dsCatalogs = { en, es, "pt-BR": ptBR };
 function resolveDsLocale(tag) {
@@ -90,6 +252,9 @@ function resolveDsLocale(tag) {
   const base = tag.split("-")[0];
   return DS_LOCALES.find((l) => l === tag) ?? DS_LOCALES.find((l) => l.split("-")[0] === base) ?? DS_DEFAULT_LOCALE;
 }
+function dsFormat(text, vars) {
+  return text.replace(/\{(\w+)\}/g, (m, k) => k in vars ? String(vars[k]) : m);
+}
 function dsMessagesFor(tag, overrides) {
   return { ...dsCatalogs[resolveDsLocale(tag)], ...overrides };
 }
@@ -104,6 +269,7 @@ export {
   DS_RTL_LANGS,
   dsCatalogs,
   dsDirection,
+  dsFormat,
   dsMessagesFor,
   resolveDsLocale
 };

package/dist/styles.css

@@ -102,6 +102,7 @@
   --radius-avatar: var(--ds-radius-avatar);
   --radius-bubble: var(--ds-radius-bubble);
   --radius-xs: var(--ds-radius-xs);
+  --radius-code: var(--ds-radius-code);
   --radius-tooltip: var(--ds-radius-tooltip);
   --radius-tab: var(--ds-radius-tab);
   --radius-field-multiline: var(--ds-radius-field-multiline);
@@ -128,6 +129,7 @@
   --ds-radius-chip: var(--ds-radius-xl); /* adjuntos y fichas */
   --ds-radius-avatar: var(--ds-radius-pill);
   --ds-radius-bubble: var(--ds-radius-overlay);
+  --ds-radius-code: var(--ds-radius-lg); /* bloque de código */
   --ds-radius-xs: 2px; /* marcas de leyenda y flecha del tooltip */
   --ds-radius-tooltip: var(--ds-radius-2xl);
   --ds-radius-tab: var(--ds-radius-xl);
@@ -296,6 +298,9 @@
   --ds-field-bg-hover: color-mix(in oklch, var(--input) 50%, transparent);
   --ds-invalid-border: var(--destructive); /* borde de un campo con error */
   --ds-switch-track-off: var(--input); /* carril del interruptor apagado */
+  --ds-code-bg: var(--inset); /* fondo del código */
+  --ds-code-fg: var(--inset-foreground);
+  --ds-code-muted: var(--muted-foreground); /* números de línea y cabecera */
   --ds-check-bg: transparent; /* fondo de casilla y radio sin marcar */
   --ds-row-hover: color-mix(in oklch, var(--muted) 50%, transparent); /* fila señalada (tabla, acordeón abierto, item muted) */
   --ds-choice-selected: color-mix(in oklch, var(--primary) 10%, transparent); /* opción elegida en tarjeta */
@@ -328,6 +333,8 @@
   --ds-tab-line-w: 2px;
   --ds-tab-line-offset: -5px;
   --ds-table-head-h: 3rem;
+  --ds-table-head-h-compact: calc(var(--ds-table-head-h) * 0.75); /* tabla densa */
+  --ds-cell-p-compact: calc(var(--ds-cell-p) * 0.5);
   --ds-popover-w: 18rem;
   --ds-hover-card-w: 18rem;
   --ds-sheet-w: 24rem;
@@ -399,7 +406,35 @@
   --ds-button-px-md: 1rem;
   --ds-button-px-lg: 1rem;
   --ds-badge-px: 0.625rem;
-  --ds-banner-px: 1rem; /* aviso de página (Banner) */
+  --ds-panel-p: var(--ds-card-spacing); /* Panel: superficie con relleno uniforme */
+  --ds-panel-p-sm: var(--ds-card-spacing-sm);
+  --ds-panel-p-lg: 2rem;
+  --ds-code-p: 1rem; /* bloque de código */
+  --ds-code-inline-px: 0.375rem; /* código en línea */
+  --ds-code-inline-size: 0.875em;
+  /* Piezas de datos y estructura (0.10.0) */
+  --ds-page-max-w: 72rem; /* ancho máximo del contenido de una vista (PageHeader) */
+  --ds-page-gap: 1.5rem;
+  --ds-section-gap: 1rem;
+  --ds-stat-value-weight: 600; /* cifra de un KPI */
+  --ds-stat-accent-w: calc(var(--ds-rule-w) * 3); /* filete de tono del KPI */
+  --ds-sparkline-h: 2rem;
+  --ds-sparkline-w: 1.5px; /* grosor del trazo */
+  --ds-status-dot: 0.5rem;
+  --ds-motion-pulse: calc(var(--ds-motion-blink) * 2); /* latido de un estado vivo */
+  --ds-proportion-h: 0.5rem; /* barra de proporción */
+  --ds-legend-swatch: 0.625rem;
+  --ds-heatmap-cell: 2rem;
+  --ds-heatmap-low: color-mix(in oklch, var(--ds-heatmap-high) 6%, var(--card)); /* mapa de calor: extremo bajo (distinto de la tarjeta) */
+  --ds-hatch: repeating-linear-gradient(-45deg, color-mix(in oklch, var(--muted-foreground) 25%, transparent) 0 2px, transparent 2px 6px); /* rayado de «sin dato» */
+  --ds-heatmap-high: var(--chart-1); /* mapa de calor: extremo alto */
+  --ds-timeline-dot: 0.625rem;
+  --ds-step-size: 2rem; /* indicador de un paso */
+  --ds-notifications-w: 24rem;
+  --ds-notifications-max-h: 24rem; /* alto máximo de la lista antes de desplazarse */
+  --ds-dropzone-p: 2rem;
+  --ds-filter-gap: 0.5rem;
+    --ds-banner-px: 1rem; /* aviso de página (Banner) */
   --ds-banner-py: 0.625rem;
   --ds-tabs-gap: 0.25rem; /* separación entre pestañas cuando el tema las separa */
 
@@ -684,13 +719,15 @@
   }
 
   /*
-   * TARJETA: radio `xl`, borde de 1px y sombra de reposo. `ui/card.tsx` ya lleva
+   * TARJETA y PANEL: radio de tarjeta, filete (`--ds-rule-w`) y sombra de reposo. `ui/card.tsx` ya lleva
    * estos valores; esta regla los GARANTIZA aunque se regenere con la CLI de
    * shadcn. Material de la tarjeta: `--ds-card-backdrop`.
    */
-  [data-slot='card'] {
-    @apply rounded-xl shadow-card ring-0;
-    border: 1px solid var(--border);
+  [data-slot='card'],
+  [data-slot='panel'][data-variant='default'],
+  [data-slot='stat'][data-variant='card'] {
+    @apply rounded-card shadow-card ring-0;
+    border: var(--ds-rule-w) solid var(--border);
     -webkit-backdrop-filter: var(--ds-card-backdrop);
     backdrop-filter: var(--ds-card-backdrop);
   }
@@ -851,6 +888,7 @@
    */
   @media (prefers-reduced-transparency: reduce) {
     [data-slot='card'],
+    [data-slot='panel'],
     [data-slot='popover-content'],
     [data-slot='dropdown-menu-content'],
     [data-slot='dropdown-menu-sub-content'],

package/dist/themes/friendly.css

@@ -302,7 +302,9 @@
   }
 
   /* Tarjetas: blancas, sin borde, solo la sombra teñida */
-  [data-slot='card'] {
+  [data-slot='card'],
+  [data-slot='panel'][data-variant='default'],
+  [data-slot='stat'][data-variant='card'] {
     border-color: transparent;
   }
 

package/dist/themes/friendly.scoped.css

@@ -302,7 +302,9 @@
   }
 
   /* Tarjetas: blancas, sin borde, solo la sombra teñida */
-  [data-slot='card'] {
+  [data-slot='card'],
+  [data-slot='panel'][data-variant='default'],
+  [data-slot='stat'][data-variant='card'] {
     border-color: transparent;
   }
 

package/dist/themes/friendly.tokens.json

@@ -0,0 +1,45 @@
+{
+  "name": "friendly",
+  "light": {
+    "palette": [
+      "#5f6ec9",
+      "#fbb232",
+      "#1db87a",
+      "#e5484d",
+      "#3784f7",
+      "#2962c0",
+      "#097650",
+      "#955800",
+      "#bb3137"
+    ],
+    "foreground": "#232450",
+    "muted": "#6b6d96",
+    "border": "rgba(35, 36, 80, 0.08)",
+    "surface": "#ffffff",
+    "surfaceForeground": "#232450",
+    "fontSans": "'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "fontDisplay": "'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "motionBaseMs": 200,
+    "motionSlowMs": 300
+  },
+  "dark": {
+    "palette": [
+      "#8a98f0",
+      "#fbb232",
+      "#3fd397",
+      "#ef5d62",
+      "#569cff",
+      "#8dbbff",
+      "#ff7a7f"
+    ],
+    "foreground": "#ecedfa",
+    "muted": "#a3a6d4",
+    "border": "rgba(255, 255, 255, 0.09)",
+    "surface": "#25275c",
+    "surfaceForeground": "#ecedfa",
+    "fontSans": "'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "fontDisplay": "'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "motionBaseMs": 200,
+    "motionSlowMs": 300
+  }
+}

package/dist/themes/qratia.tokens.json

@@ -0,0 +1,49 @@
+{
+  "name": "qratia",
+  "light": {
+    "palette": [
+      "#2a78d6",
+      "#eb6834",
+      "#1baf7a",
+      "#eda100",
+      "#e87ba4",
+      "#006a91",
+      "#05773b",
+      "#975800",
+      "#bb0916",
+      "#00b4d8"
+    ],
+    "foreground": "#0a1128",
+    "muted": "#5b6b84",
+    "border": "#dce6f0",
+    "surface": "#f5fafe",
+    "surfaceForeground": "#0a1128",
+    "fontSans": "'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "fontDisplay": "'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "motionBaseMs": 200,
+    "motionSlowMs": 300
+  },
+  "dark": {
+    "palette": [
+      "#3987e5",
+      "#d95926",
+      "#199e70",
+      "#c98500",
+      "#d55181",
+      "#73d3f1",
+      "#55c483",
+      "#e8aa4e",
+      "#f66d62",
+      "#00e5ff"
+    ],
+    "foreground": "#e9f0f8",
+    "muted": "#93a3bc",
+    "border": "#28324a",
+    "surface": "#19233e",
+    "surfaceForeground": "#e9f0f8",
+    "fontSans": "'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "fontDisplay": "'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "motionBaseMs": 200,
+    "motionSlowMs": 300
+  }
+}

package/dist/themes/tactile.css

@@ -339,7 +339,9 @@
   }
 
   /* ── SUPERFICIES: filete suave y una arista inferior más marcada ── */
-  [data-slot='card'] {
+  [data-slot='card'],
+  [data-slot='panel']:is([data-variant='default'], [data-variant='outline']),
+  [data-slot='stat'][data-variant='card'] {
     border: var(--ds-rule-w) solid var(--border);
     border-bottom: var(--ds-key-edge-w) solid var(--ds-key-edge);
     box-shadow: none;

package/dist/themes/tactile.scoped.css

@@ -339,7 +339,9 @@
   }
 
   /* ── SUPERFICIES: filete suave y una arista inferior más marcada ── */
-  [data-slot='card'] {
+  [data-slot='card'],
+  [data-slot='panel']:is([data-variant='default'], [data-variant='outline']),
+  [data-slot='stat'][data-variant='card'] {
     border: var(--ds-rule-w) solid var(--border);
     border-bottom: var(--ds-key-edge-w) solid var(--ds-key-edge);
     box-shadow: none;