orbital-ds 0.9.0 → 0.10.0

package/AGENTS.md

@@ -54,6 +54,23 @@ adivinar. Lee antes: `README.md`, `docs/CONTRACT.md`, `contract.json` y
   ni capa se escribe a mano (el doctor lo comprueba también dentro de valores arbitrarios).
 - Otras librerías: `readDsTransition()` (`orbital-ds/lib/motion`) da duración y curva CSS.
 
+## Gráficos e informes (Apache ECharts)
+
+- **Librería oficial: ECharts** (dependencia opcional). `chart.tsx` (Recharts) se mantiene por compatibilidad,
+  sin nuevas funciones.
+- **El tema gobierna el gráfico**: `<EChart option={…} />` (`orbital-ds/ui/echart`) monta un tema de ECharts
+  desde las variables del tema activo y de la marca (paleta `--chart-1…5` + estados, textos, ejes, tooltip,
+  fuentes, ritmo) y se repinta al cambiar de tema o de piel. SVG por defecto; `exportable` descarga SVG/PNG.
+  Nunca pongas colores en el `option`: los da el tema (si una serie necesita un tono, usa la paleta del tema).
+- **Opciones listas**: `orbital-ds/lib/echarts-presets` (línea/área, barras, combo, mapa de calor, sankey,
+  gauge, donut, líneas y áreas de referencia). Sirven igual en pantalla y en informes.
+- **Informes automáticos (servidor / Workers, sin DOM)**: `renderEChartToSvg(option, { width, height, tokens })`
+  (`orbital-ds/lib/echarts-server`) con `tokens` = `orbital-ds/themes/<tema>.tokens.json` → `.light` o
+  `.dark` (colores ya resueltos; mezcla ahí los de la marca si la app tiene). Para PNG (plantillas de
+  documento), la app convierte el SVG (p. ej. resvg) con las fuentes del tema.
+- Registro común de tipos y componentes: `orbital-ds/lib/echarts-setup`. Otro tipo → `echarts.use([...])` en la app.
+- **Recetas completas** (pantalla, informe SVG→PNG, función de servidor de TanStack Start, endpoint en un Worker, marca en los informes): `docs/GRAFICOS.md`.
+
 ## Idioma (i18n)
 
 - Los textos PROPIOS de los componentes (cerrar, cargando, paginación, carrusel, lateral,
@@ -74,7 +91,7 @@ adivinar. Lee antes: `README.md`, `docs/CONTRACT.md`, `contract.json` y
   el inglés y LISTA las claves pendientes: tradúcelas en el JSON hasta que `--check` pase.
 - **RTL**: `dsDirection(idioma)` (`orbital-ds/lib/i18n`) da `ltr`/`rtl`; la app lo pone en `<html dir>` y
   `DsI18nProvider` lo pasa a Base UI. La conversión de los componentes a clases lógicas
-  (`ms-`/`ps-`/`start-`/`text-start` en lugar de `ml-`/`pl-`/`left-`/`text-left`) es una fase pendiente.
+  (`ms-`/`ps-`/`start-`/`text-start` en lugar de `ml-`/`pl-`/`left-`/`text-left`) es una fase pendiente: decisión y plan en `docs/adr/0001-rtl-clases-logicas.md`.
 
 ## Instalar en una app
 

package/components.manifest.json

@@ -1,6 +1,6 @@
 {
   "package": "orbital-ds",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "engine": "@base-ui/react",
   "docs": [
     "README.md",
@@ -321,6 +321,23 @@
       ],
       "optionalPeers": []
     },
+    "code-block": {
+      "import": "orbital-ds/ui/code-block",
+      "exports": [
+        "Code",
+        "CodeBlock"
+      ],
+      "slots": [
+        "code",
+        "code-block",
+        "code-block-code",
+        "code-block-copy",
+        "code-block-header",
+        "code-block-line",
+        "code-block-pre"
+      ],
+      "optionalPeers": []
+    },
     "collapsible": {
       "import": "orbital-ds/ui/collapsible",
       "exports": [
@@ -441,6 +458,70 @@
       ],
       "optionalPeers": []
     },
+    "data-table": {
+      "import": "orbital-ds/ui/data-table",
+      "exports": [
+        "DATA_TABLE_PAGE_SIZES",
+        "DataTable",
+        "DataTableBarCell",
+        "DataTableNumber",
+        "createDataTableColumnHelper",
+        "dataTableFeatures",
+        "dataTableStateFromSearch",
+        "dataTableStateToSearch",
+        "validateDataTableSearch"
+      ],
+      "slots": [
+        "data-table",
+        "data-table-actions",
+        "data-table-bar-cell",
+        "data-table-body",
+        "data-table-cell",
+        "data-table-columns",
+        "data-table-empty",
+        "data-table-empty-row",
+        "data-table-filter",
+        "data-table-footer",
+        "data-table-head",
+        "data-table-header",
+        "data-table-no-data",
+        "data-table-number",
+        "data-table-page",
+        "data-table-pagination",
+        "data-table-row",
+        "data-table-search",
+        "data-table-select",
+        "data-table-selected",
+        "data-table-skeleton-row",
+        "data-table-sort",
+        "data-table-toolbar"
+      ],
+      "optionalPeers": [
+        "@tanstack/react-table"
+      ]
+    },
+    "date-picker": {
+      "import": "orbital-ds/ui/date-picker",
+      "exports": [
+        "DatePicker",
+        "DateRangePicker",
+        "defaultDatePresets",
+        "type DateRange",
+        "type DateRangePreset"
+      ],
+      "slots": [
+        "date-picker",
+        "date-picker-content",
+        "date-range-footer",
+        "date-range-hint",
+        "date-range-picker",
+        "date-range-picker-content",
+        "date-range-presets"
+      ],
+      "optionalPeers": [
+        "react-day-picker"
+      ]
+    },
     "dialog": {
       "import": "orbital-ds/ui/dialog",
       "exports": [
@@ -550,6 +631,39 @@
       ],
       "optionalPeers": []
     },
+    "dropzone": {
+      "import": "orbital-ds/ui/dropzone",
+      "exports": [
+        "Dropzone",
+        "formatBytes",
+        "type DropzoneRejectReason",
+        "type DropzoneRejection",
+        "type DropzoneState"
+      ],
+      "slots": [
+        "dropzone",
+        "dropzone-area",
+        "dropzone-description",
+        "dropzone-errors",
+        "dropzone-hint",
+        "dropzone-icon",
+        "dropzone-title"
+      ],
+      "optionalPeers": []
+    },
+    "echart": {
+      "import": "orbital-ds/ui/echart",
+      "exports": [
+        "EChart"
+      ],
+      "slots": [
+        "echart",
+        "echart-actions",
+        "echart-canvas",
+        "echart-empty"
+      ],
+      "optionalPeers": []
+    },
     "empty": {
       "import": "orbital-ds/ui/empty",
       "exports": [
@@ -570,6 +684,15 @@
       ],
       "optionalPeers": []
     },
+    "eyebrow": {
+      "import": "orbital-ds/ui/eyebrow",
+      "exports": [
+        "Eyebrow",
+        "eyebrowClassName"
+      ],
+      "slots": [],
+      "optionalPeers": []
+    },
     "field": {
       "import": "orbital-ds/ui/field",
       "exports": [
@@ -598,6 +721,45 @@
       ],
       "optionalPeers": []
     },
+    "filter-bar": {
+      "import": "orbital-ds/ui/filter-bar",
+      "exports": [
+        "FilterBar",
+        "FilterMenu",
+        "type FilterOption"
+      ],
+      "slots": [
+        "filter-bar",
+        "filter-bar-actions",
+        "filter-bar-clear",
+        "filter-bar-filters",
+        "filter-menu-content",
+        "filter-menu-label",
+        "filter-menu-trigger",
+        "filter-menu-value"
+      ],
+      "optionalPeers": []
+    },
+    "heatmap-grid": {
+      "import": "orbital-ds/ui/heatmap-grid",
+      "exports": [
+        "HeatmapGrid"
+      ],
+      "slots": [
+        "heatmap-grid",
+        "heatmap-grid-caption",
+        "heatmap-grid-card",
+        "heatmap-grid-column-header",
+        "heatmap-grid-row",
+        "heatmap-grid-row-header",
+        "heatmap-grid-scale",
+        "heatmap-grid-scale-bar",
+        "heatmap-grid-scale-empty",
+        "heatmap-grid-scroll",
+        "heatmap-grid-table"
+      ],
+      "optionalPeers": []
+    },
     "hover-card": {
       "import": "orbital-ds/ui/hover-card",
       "exports": [
@@ -728,6 +890,25 @@
       ],
       "optionalPeers": []
     },
+    "legend": {
+      "import": "orbital-ds/ui/legend",
+      "exports": [
+        "Legend",
+        "LegendItem",
+        "LegendSwatch",
+        "dataToneBg",
+        "dataToneVar"
+      ],
+      "slots": [
+        "legend",
+        "legend-item",
+        "legend-label",
+        "legend-swatch",
+        "legend-toggle",
+        "legend-value"
+      ],
+      "optionalPeers": []
+    },
     "marker": {
       "import": "orbital-ds/ui/marker",
       "exports": [
@@ -880,6 +1061,74 @@
       ],
       "optionalPeers": []
     },
+    "notifications": {
+      "import": "orbital-ds/ui/notifications",
+      "exports": [
+        "NotificationCenter",
+        "NotificationEmpty",
+        "NotificationItem",
+        "NotificationList",
+        "NotificationTabs",
+        "NotificationTabsContent",
+        "formatRelativeTime",
+        "type NotificationState",
+        "type NotificationTab",
+        "type NotificationTone"
+      ],
+      "slots": [
+        "notification-actions",
+        "notification-center",
+        "notification-count",
+        "notification-dot",
+        "notification-empty",
+        "notification-header",
+        "notification-icon",
+        "notification-item",
+        "notification-item-description",
+        "notification-item-title",
+        "notification-list",
+        "notification-mark-all",
+        "notification-meta",
+        "notification-tab",
+        "notification-tab-count",
+        "notification-tabs",
+        "notification-tabs-content",
+        "notification-title",
+        "notification-trigger",
+        "notification-unread"
+      ],
+      "optionalPeers": []
+    },
+    "page-header": {
+      "import": "orbital-ds/ui/page-header",
+      "exports": [
+        "PageHeader",
+        "PageHeaderActions",
+        "PageHeaderBreadcrumb",
+        "PageHeaderDescription",
+        "PageHeaderNotice",
+        "PageHeaderTitle",
+        "SectionHeader",
+        "SectionHeaderActions",
+        "SectionHeaderDescription",
+        "SectionHeaderIcon",
+        "SectionHeaderTitle"
+      ],
+      "slots": [
+        "page-header",
+        "page-header-actions",
+        "page-header-breadcrumb",
+        "page-header-description",
+        "page-header-notice",
+        "page-header-title",
+        "section-header",
+        "section-header-actions",
+        "section-header-description",
+        "section-header-icon",
+        "section-header-title"
+      ],
+      "optionalPeers": []
+    },
     "pagination": {
       "import": "orbital-ds/ui/pagination",
       "exports": [
@@ -900,6 +1149,15 @@
       ],
       "optionalPeers": []
     },
+    "panel": {
+      "import": "orbital-ds/ui/panel",
+      "exports": [
+        "Panel",
+        "panelVariants"
+      ],
+      "slots": [],
+      "optionalPeers": []
+    },
     "popover": {
       "import": "orbital-ds/ui/popover",
       "exports": [
@@ -934,6 +1192,22 @@
       ],
       "optionalPeers": []
     },
+    "proportion-bar": {
+      "import": "orbital-ds/ui/proportion-bar",
+      "exports": [
+        "ProportionBar"
+      ],
+      "slots": [
+        "proportion-bar",
+        "proportion-bar-header",
+        "proportion-bar-indicator",
+        "proportion-bar-label",
+        "proportion-bar-segment",
+        "proportion-bar-track",
+        "proportion-bar-value"
+      ],
+      "optionalPeers": []
+    },
     "questionnaire": {
       "import": "orbital-ds/ui/questionnaire",
       "exports": [
@@ -1178,6 +1452,19 @@
         "sonner"
       ]
     },
+    "sparkline": {
+      "import": "orbital-ds/ui/sparkline",
+      "exports": [
+        "Sparkline",
+        "sparklineVariants"
+      ],
+      "slots": [
+        "sparkline",
+        "sparkline-area",
+        "sparkline-line"
+      ],
+      "optionalPeers": []
+    },
     "spinner": {
       "import": "orbital-ds/ui/spinner",
       "exports": [
@@ -1188,6 +1475,79 @@
       ],
       "optionalPeers": []
     },
+    "stat": {
+      "import": "orbital-ds/ui/stat",
+      "exports": [
+        "Stat",
+        "StatChart",
+        "StatDelta",
+        "StatDescription",
+        "StatLabel",
+        "StatSwatch",
+        "StatValue",
+        "statVariants"
+      ],
+      "slots": [
+        "stat-chart",
+        "stat-delta",
+        "stat-description",
+        "stat-label",
+        "stat-swatch",
+        "stat-value",
+        "stat-value-number",
+        "stat-value-prefix",
+        "stat-value-reason",
+        "stat-value-unit"
+      ],
+      "optionalPeers": []
+    },
+    "status-badge": {
+      "import": "orbital-ds/ui/status-badge",
+      "exports": [
+        "StatusBadge",
+        "StatusDot",
+        "StatusExplanation",
+        "StatusExplanationDetail",
+        "StatusExplanationTerm",
+        "statusBadgeVariants",
+        "statusDotVariants"
+      ],
+      "slots": [
+        "status-badge-explanation",
+        "status-badge-info",
+        "status-badge-label",
+        "status-dot",
+        "status-dot-pulse",
+        "status-explanation",
+        "status-explanation-detail",
+        "status-explanation-term"
+      ],
+      "optionalPeers": []
+    },
+    "stepper": {
+      "import": "orbital-ds/ui/stepper",
+      "exports": [
+        "Stepper",
+        "StepperContent",
+        "StepperDescription",
+        "StepperIndicator",
+        "StepperItem",
+        "StepperSeparator",
+        "StepperTitle",
+        "type StepStatus",
+        "type StepperOrientation"
+      ],
+      "slots": [
+        "stepper",
+        "stepper-content",
+        "stepper-description",
+        "stepper-indicator",
+        "stepper-item",
+        "stepper-separator",
+        "stepper-title"
+      ],
+      "optionalPeers": []
+    },
     "switch": {
       "import": "orbital-ds/ui/switch",
       "exports": [
@@ -1251,6 +1611,33 @@
       ],
       "optionalPeers": []
     },
+    "timeline": {
+      "import": "orbital-ds/ui/timeline",
+      "exports": [
+        "Timeline",
+        "TimelineActions",
+        "TimelineContent",
+        "TimelineDescription",
+        "TimelineIndicator",
+        "TimelineItem",
+        "TimelineTime",
+        "TimelineTitle"
+      ],
+      "slots": [
+        "timeline",
+        "timeline-actions",
+        "timeline-connector",
+        "timeline-content",
+        "timeline-description",
+        "timeline-dot",
+        "timeline-icon",
+        "timeline-indicator",
+        "timeline-item",
+        "timeline-time",
+        "timeline-title"
+      ],
+      "optionalPeers": []
+    },
     "toast": {
       "import": "orbital-ds/ui/toast",
       "exports": [

package/contract.json

@@ -140,6 +140,11 @@
         "alert",
         "banner",
         "toast"
+      ],
+      "surface": [
+        "card",
+        "panel",
+        "stat"
       ]
     }
   },

package/dist/hooks/use-ds-messages.d.ts

@@ -29,8 +29,66 @@ declare const DsMessagesContext: React.Context<{
     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;
 }>;
 /** Textos de los componentes en el idioma activo. */
 declare function useDsMessages(): DsMessages;
+/** Idioma activo (etiqueta BCP 47 de la app, p. ej. "es-CO"): para formatear fechas y números con Intl. */
+declare const DsLocaleContext: React.Context<string>;
+/** Idioma activo para Intl (DateTimeFormat, NumberFormat…). */
+declare function useDsLocale(): string;
 
-export { DsMessagesContext, useDsMessages };
+export { DsLocaleContext, DsMessagesContext, useDsLocale, useDsMessages };

package/dist/hooks/use-ds-messages.js

@@ -6,7 +6,13 @@ const DsMessagesContext = React.createContext(
 function useDsMessages() {
   return React.useContext(DsMessagesContext);
 }
+const DsLocaleContext = React.createContext(DS_DEFAULT_LOCALE);
+function useDsLocale() {
+  return React.useContext(DsLocaleContext);
+}
 export {
+  DsLocaleContext,
   DsMessagesContext,
+  useDsLocale,
   useDsMessages
 };