@studiolxd/brand 49.10.0 → 49.12.0

package/CHANGELOG.md

@@ -7,6 +7,175 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
 regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
 para breaking changes.
 
+## [49.12.0] — 2026-09-19
+
+> **Minor.** Las seis piezas que pedían People, Projects y Finance al partir el ERP interno en
+> tres aplicaciones de la suite. Ninguna trae una dependencia nueva: lo que en el ERP hacían
+> `@xyflow/react` + `dagre`, `@tanstack/react-table` y una librería de calendario, aquí lo
+> hacen el CSS, una tabla y treinta líneas de gramática.
+
+### `Timeline` — el historial vertical de estados
+
+Un hito por cambio de estado, con su fecha, quien lo firmó y la nota. Es una `<ol>` de verdad,
+así que el orden y el número de hitos se anuncian solos. **No ordena, no interpreta y no
+formatea fechas**: los hitos se pintan en el orden en que llegan, el estado vigente se marca
+con `current` y la fecha llega escrita. El último hito no pinta carril —una línea que muere en
+el aire diría que falta algo por venir— y el estado vigente se **lee** además de pintarse.
+
+Subpath `@studiolxd/brand/timeline`. Textos en `timeline`.
+
+### `ClockWidget` — fichar entrada y salida
+
+En qué estado está el día, cuánto se lleva trabajado y los tramos ya fichados. **El botón es
+uno y lo decide el turno**: abierto ofrece fichar salida, cerrado ofrece fichar entrada, nunca
+los dos. Sin manejador no pinta botón y el widget se queda de solo lectura, que es lo que se ve
+en la ficha de otra persona.
+
+El reloj corre solo —un tic por segundo— mientras haya un tramo abierto, y `now` lo congela:
+es lo que hace que un test y una captura de Chromatic den siempre el mismo resultado. El tiempo
+trabajado va en `role="timer"`, que **no** anuncia cada segundo. En un día de vacaciones, de
+ausencia o no laborable dice por qué y no pinta ni botón ni reloj.
+
+La aritmética va aparte y exportada: `clockEntryMinutes`, `clockedMinutes`, `isClockRunning`.
+
+Subpath `@studiolxd/brand/clock-widget`. Textos en `clockWidget`, con `durationValue` como
+función de horas y minutos.
+
+### `Heatmap` — la matriz de valores con escala de color
+
+Competencias por persona, cobertura de puestos por trimestre. **La cifra va dentro de la
+celda**, así que el color no es nunca la única señal, y la tabla tiene encabezados de verdad en
+los dos ejes (`scope="row"`, `scope="col"`, `scope="colgroup"`).
+
+La rampa usa **seis de los siete peldaños** de la rampa secuencial del sistema. El que se queda
+fuera es `sequential-400`: la cifra que va dentro obliga a que cada relleno admita una de las
+dos tintas a 4,5:1, y sobre superficie oscura ese paso no llega con ninguna (4,34:1 con la
+tinta clara, 3,86:1 con la prusia). No se inventa un color para taparlo — regla 9.
+
+Una casilla ausente o con `value: null` es **sin dato**, no el mínimo: se pinta rayada sobre la
+superficie secundaria y se anuncia como tal.
+
+Subpath `@studiolxd/brand/heatmap`. Textos en `heatmap`. Helpers `heatmapStep`,
+`heatmapRampIndex`, `HEATMAP_RAMP_STEPS`.
+
+### `RecurrenceField` — el editor de recurrencia de un evento
+
+Cada cuánto, qué días y hasta cuándo, **enseñando solo lo que hace falta**: sin frecuencia el
+editor es un solo campo, y los días de la semana solo salen en la frecuencia semanal. `null` es
+«no se repite», que no es una repetición con los campos a cero.
+
+`buildRecurrenceRule` y `parseRecurrenceRule` escriben y leen el subconjunto de RFC 5545 que el
+editor expone (`FREQ`, `INTERVAL`, `BYDAY`, `UNTIL`/`COUNT`). **Lo que el editor no enseña se
+conserva**: `BYMONTHDAY`, `WKST` y demás se apartan al leer y se vuelven a escribir, así que
+editar la repetición no destruye lo que no se ve. `UNTIL` llega al final del día en UTC.
+
+Sin dependencia de calendario: lo que un campo de formulario necesita son treinta líneas de
+gramática, y una librería entera la pagarían las once aplicaciones que consumen el paquete.
+
+Los **días salen del `locale`** con `Intl`, no del catálogo de textos.
+
+Subpath `@studiolxd/brand/recurrence-field`. Textos en `recurrenceField`.
+
+### `PlanningGrid` — la rejilla editable de horas
+
+Fila × columna —proyecto por semana, persona por día—, con los totales de cada eje y la
+disponibilidad de cada columna al pie. No sabe qué hay en cada eje: es la misma pieza para la
+planificación semanal y para la dedicación diaria.
+
+`onCellChange` se llama al **confirmar** un cruce —al salir del campo o con Intro—, nunca en
+cada tecla. **El estado en vuelo y el error viajan en la propia celda** (`pending`, `error`),
+que es lo que permite dos cruces en vuelo a la vez sin que la rejilla lleve la cuenta. Lo que no
+se edita es **texto**, no un campo deshabilitado. Pasarse de la disponibilidad se pinta en el
+color de error **y se dice**.
+
+El campo admite coma y punto decimal; `parsePlanningHours` está exportado.
+
+Subpath `@studiolxd/brand/planning-grid`. Textos en `planningGrid`, con `cellLabel` como
+función de los dos ejes.
+
+### `OrgChart` — el organigrama de departamentos
+
+Quién responde de cada uno, quién está dentro y de quién cuelga. Plegable, con zoom y con
+desplazamiento.
+
+**Es un árbol de listas anidadas, no un lienzo de dibujo**: las líneas las pintan
+pseudoelementos, así que el orden del documento es el del árbol y un lector de pantalla recorre
+la jerarquía de verdad, sin necesidad de una alternativa en texto escrita aparte. No hay motor
+de disposición que mantener: un árbol se dibuja centrando cada nodo sobre sus hijos, y eso lo
+hace el CSS solo.
+
+El zoom usa **`zoom` y no `transform: scale()`**, porque `zoom` rehace la maqueta: el lienzo
+sigue sabiendo cuánto mide lo que tiene dentro y el desplazamiento llega justo al final. El
+valor lo escribe el CSSOM (`useCssProperties`), no un atributo `style`. Una rama plegada **no
+se renderiza**, para no dejar cientos de nodos en el árbol de accesibilidad y en el tabulador.
+
+Subpath `@studiolxd/brand/org-chart`. Textos en `orgChart`, con `collapse`/`expand` como
+funciones del nombre del departamento.
+
+### Tokens
+
+Seis conjuntos nuevos: `tokens/molecule/timeline.json`, `clock-widget.json`, `heatmap.json`,
+`recurrence-field.json` y `tokens/organism/planning-grid.json`, `org-chart.json`. Todos con sus
+pares `surface-dark-*` por la regla de derivación. Ningún color nuevo en `tokens/color/`.
+
+### Internacionalización
+
+Seis espacios nuevos en `BrandMessages`: `timeline`, `clockWidget`, `heatmap`,
+`recurrenceField`, `planningGrid` y `orgChart`. **Una aplicación que no los rellene no
+compila**, que es el contrato de siempre. La tabla de Foundations › Internacionalización queda
+actualizada.
+
+## [49.11.0] — 2026-09-19
+
+> **Minor.** Tres decisiones de maqueta sobre lo que la 49.10.0 dejó puesto: dónde va el
+> distintivo en el lanzador, que su panel crezca en vez de desplazarse, y que un grupo largo
+> del índice público quepa a dos columnas bajo un solo título.
+
+### El distintivo va encima del nombre, y su hueco se reserva siempre
+
+En `AppLauncher`, el distintivo de la baldosa se pinta **sobre** el nombre de la app, no a su
+lado. Y su fila se pinta **siempre**, lleve distintivo la baldosa o no: vacía es el hueco
+reservado que deja todos los nombres de la rejilla a la misma altura, de modo que una app que
+estrena píldora no empuja hacia abajo el nombre de su vecina.
+
+El alto de esa fila es el de una `Tag` y sale de sus tokens —
+`app-launcher.tile-badge-block-size` = `calc({tag.font-size} * {tag.line-height} + 2 *
+{tag.padding-block})` —, así que sigue cuadrando si la píldora cambia de talla. No hay medida
+escrita a mano.
+
+### El panel del lanzador crece con su contenido
+
+El panel **no tiene tope propio**: con las doce aplicaciones de la suite se ve entero. El único
+límite es el hueco que de verdad queda en la ventana (`--available-height`, que mide Base UI y
+que `app-launcher.content-max-height` no hace más que nombrar); solo cuando ni ese hueco da, el
+panel se recorta ahí y hace scroll. Un tope propio —una altura fija, «tantas filas»— recortaría
+la rejilla teniendo pantalla de sobra, y ahora lo impide un guardián sobre la hoja
+(`AppLauncher.panel.test.ts`).
+
+La rejilla pasa a **dos columnas en un panel estrecho** y tres desde `sm`
+(`app-launcher.content-columns-narrow`, nuevo, junto al `content-columns` de siempre): con tres
+columnas en móvil, doce baldosas dejaban los nombres partidos en tres líneas.
+
+### `SiteNav`: un grupo a dos columnas, bajo un solo título
+
+`SiteNavGroup` gana **`columns?: 1 | 2`** (por defecto `1`, el grupo de siempre). Con `2` el
+grupo ocupa en la rejilla el **ancho de dos** —doce tramos en `md`, ocho en `lg`, seis en `xl`—
+y reparte sus ítems en **dos columnas bajo un solo título**. Es lo que da sitio a un grupo largo
+—«Aplicaciones», con las diez o doce de la suite— sin partirlo en dos grupos con dos cabeceras,
+que sería otro índice.
+
+- El pasillo entre esas dos columnas es el mismo que separa dos grupos
+  (`site-nav.item-column-gap`, nuevo, que apunta a `group-gap`): más estrecho, el grupo ancho se
+  leería como dos grupos pegados.
+- Los ítems se leen **por filas**, en el orden del DOM.
+- **Por debajo de `md` vuelve a una columna**, como todo el índice.
+- El grupo ancho cuenta **por dos** en el tope de columnas (`site-nav.columns-max`) y queda
+  fuera del reparto de la última fila: ya ocupa lo que le toca y no tiene sobrante que recoger.
+- `disabled` y `badge` de la 49.10.0 siguen valiendo dentro de las dos columnas.
+
+El dato viaja en `data-group-columns`, nunca en un atributo `style` — el mismo motivo que
+`data-columns`.
+
 ## [49.10.0] — 2026-09-18
 
 > **Minor.** La suite marca productos como «próximamente»: se ven en su sitio pero apagados,

package/dist/_shared/tokens.js

@@ -193,6 +193,7 @@ var e = {
 	"--app-launcher-trigger-label-color": "#111e30",
 	"--app-launcher-content-min-width": "20rem",
 	"--app-launcher-content-columns": "3",
+	"--app-launcher-content-columns-narrow": "2",
 	"--app-launcher-content-gap": "0.25rem",
 	"--app-launcher-content-bg": "#ffffff",
 	"--app-launcher-content-border-width": "1px",
@@ -208,6 +209,7 @@ var e = {
 	"--app-launcher-tile-padding-block": "0.5rem",
 	"--app-launcher-tile-padding-inline": "1rem",
 	"--app-launcher-tile-gap": "0.25rem",
+	"--app-launcher-tile-badge-block-size": "calc(0.875rem * 1 + 2 * 0.25rem)",
 	"--app-launcher-tile-border-radius": "0px",
 	"--app-launcher-tile-name-font-size": "0.875rem",
 	"--app-launcher-tile-name-font-weight": "300",
@@ -2348,6 +2350,25 @@ var e = {
 	"--checkbox-field-helper-font-weight": "300",
 	"--checkbox-field-helper-line-height": "1.5",
 	"--checkbox-field-helper-color": "#111e30",
+	"--clock-widget-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+	"--clock-widget-gap": "1rem",
+	"--clock-widget-header-gap": "0.25rem",
+	"--clock-widget-date-font-size": "0.875rem",
+	"--clock-widget-date-color": "#4a4a4a",
+	"--clock-widget-status-gap": "0.5rem",
+	"--clock-widget-status-font-size": "0.875rem",
+	"--clock-widget-status-color": "#4a4a4a",
+	"--clock-widget-status-dot-size": "0.5rem",
+	"--clock-widget-status-dot-radius": "9999px",
+	"--clock-widget-status-dot-open-bg": "#006616",
+	"--clock-widget-status-dot-closed-bg": "#d0d0d0",
+	"--clock-widget-elapsed-font-size": "2rem",
+	"--clock-widget-elapsed-font-weight": "500",
+	"--clock-widget-elapsed-line-height": "1.1",
+	"--clock-widget-elapsed-color": "#111e30",
+	"--clock-widget-elapsed-label-font-size": "0.875rem",
+	"--clock-widget-elapsed-label-color": "#4a4a4a",
+	"--clock-widget-footer-margin-block-start": "0.5rem",
 	"--command-palette-max-height": "min(24rem, 60vh)",
 	"--command-palette-input-padding-block": "0.75rem",
 	"--command-palette-input-padding-inline": "0.5rem",
@@ -2561,6 +2582,51 @@ var e = {
 	"--filter-bar-label-offset": "calc(0.875rem * 1.5 + 0.5rem)",
 	"--filter-bar-control-block-size": "2.5rem",
 	"--form-field-gap": "0.25rem",
+	"--heatmap-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+	"--heatmap-radius": "0px",
+	"--heatmap-border-color": "#111e30",
+	"--heatmap-border-width": "1px",
+	"--heatmap-row-header-width": "10rem",
+	"--heatmap-row-header-font-size": "0.875rem",
+	"--heatmap-row-header-color": "#111e30",
+	"--heatmap-row-header-font-weight": "300",
+	"--heatmap-row-header-bg": "#ffffff",
+	"--heatmap-row-header-padding-block": "0.5rem",
+	"--heatmap-row-header-padding-inline": "0.75rem",
+	"--heatmap-column-header-font-size": "0.75rem",
+	"--heatmap-column-header-font-weight": "500",
+	"--heatmap-column-header-color": "#4a4a4a",
+	"--heatmap-column-header-bg": "#ffffff",
+	"--heatmap-column-header-padding-block": "0.5rem",
+	"--heatmap-column-header-padding-inline": "0.5rem",
+	"--heatmap-column-header-width": "3rem",
+	"--heatmap-group-header-font-size": "0.75rem",
+	"--heatmap-group-header-color": "#4a4a4a",
+	"--heatmap-cell-padding-block": "0.5rem",
+	"--heatmap-cell-padding-inline": "0.5rem",
+	"--heatmap-cell-font-size": "0.875rem",
+	"--heatmap-cell-font-weight": "500",
+	"--heatmap-empty-bg": "#f2f2f2",
+	"--heatmap-empty-pattern-color": "#d0d0d0",
+	"--heatmap-empty-pattern-width": "0.25rem",
+	"--heatmap-legend-gap": "0.5rem",
+	"--heatmap-legend-font-size": "0.875rem",
+	"--heatmap-legend-color": "#4a4a4a",
+	"--heatmap-legend-swatch-size": "0.75rem",
+	"--heatmap-legend-swatch-gap": "0.25rem",
+	"--heatmap-margin-block-start": "0.75rem",
+	"--heatmap-step-1-bg": "#dce9fc",
+	"--heatmap-step-1-color": "#111e30",
+	"--heatmap-step-2-bg": "#b6d2f8",
+	"--heatmap-step-2-color": "#111e30",
+	"--heatmap-step-3-bg": "#8fbaf5",
+	"--heatmap-step-3-color": "#111e30",
+	"--heatmap-step-4-bg": "#3b88ee",
+	"--heatmap-step-4-color": "#111e30",
+	"--heatmap-step-5-bg": "#236ac5",
+	"--heatmap-step-5-color": "#ffffff",
+	"--heatmap-step-6-bg": "#164b90",
+	"--heatmap-step-6-color": "#ffffff",
 	"--image-crop-dialog-gap": "1rem",
 	"--image-crop-dialog-area-max-height": "60vh",
 	"--image-crop-dialog-area-min-height": "60vh",
@@ -2822,6 +2888,14 @@ var e = {
 	"--recovery-codes-line-height": "1.65",
 	"--recovery-codes-color": "#111e30",
 	"--recovery-codes-index-color": "#4a4a4a",
+	"--recurrence-field-gap": "1rem",
+	"--recurrence-field-row-gap": "0.75rem",
+	"--recurrence-field-interval-width": "8rem",
+	"--recurrence-field-weekdays-gap": "0.25rem",
+	"--recurrence-field-legend-font-size": "0.875rem",
+	"--recurrence-field-legend-color": "#111e30",
+	"--recurrence-field-legend-font-weight": "500",
+	"--recurrence-field-legend-margin-block-end": "0.25rem",
 	"--search-form-inline-size": "100%",
 	"--search-form-xl-height": "4rem",
 	"--search-form-xl-padding-inline": "2rem",
@@ -2891,6 +2965,7 @@ var e = {
 	"--site-nav-item-hover-line-width": "1px",
 	"--site-nav-item-disabled-color": "#4a4a4a",
 	"--site-nav-item-badge-gap": "0.5rem",
+	"--site-nav-item-column-gap": "2rem",
 	"--site-nav-item-current-font-weight": "300",
 	"--site-nav-focus-ring-width": "2px",
 	"--site-nav-focus-ring-offset": "2px",
@@ -3027,6 +3102,25 @@ var e = {
 	"--time-field-helper-font-weight": "300",
 	"--time-field-helper-line-height": "1.5",
 	"--time-field-helper-color": "#111e30",
+	"--timeline-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+	"--timeline-gap": "1.5rem",
+	"--timeline-column-gap": "0.75rem",
+	"--timeline-rail-width": "1px",
+	"--timeline-rail-color": "#d0d0d0",
+	"--timeline-rail-gap": "0.25rem",
+	"--timeline-title-font-size": "1rem",
+	"--timeline-title-font-weight": "500",
+	"--timeline-title-line-height": "1.3",
+	"--timeline-title-color": "#111e30",
+	"--timeline-meta-font-size": "0.875rem",
+	"--timeline-meta-color": "#4a4a4a",
+	"--timeline-meta-gap": "0.5rem",
+	"--timeline-meta-separator-color": "#d0d0d0",
+	"--timeline-note-font-size": "1rem",
+	"--timeline-note-line-height": "1.5",
+	"--timeline-note-color": "#111e30",
+	"--timeline-body-gap": "0.25rem",
+	"--timeline-actions-margin-block-start": "0.5rem",
 	"--tree-view-icon-size": "16px",
 	"--tree-view-indent": "calc(16px + 0.5rem)",
 	"--tree-view-row-gap": "0.5rem",
@@ -3239,6 +3333,75 @@ var e = {
 	"--onboarding-shell-actions-gap": "1rem",
 	"--onboarding-shell-actions-margin-block-start": "2rem",
 	"--onboarding-shell-actions-padding-block-start": "1.5rem",
+	"--org-chart-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+	"--org-chart-gap": "0.75rem",
+	"--org-chart-viewport-block-size": "32rem",
+	"--org-chart-viewport-padding": "1.5rem",
+	"--org-chart-viewport-bg": "#f2f2f2",
+	"--org-chart-viewport-radius": "0px",
+	"--org-chart-viewport-border-color": "#d0d0d0",
+	"--org-chart-viewport-border-width": "1px",
+	"--org-chart-focus-ring-color": "#111e30",
+	"--org-chart-focus-ring-width": "2px",
+	"--org-chart-focus-ring-offset": "2px",
+	"--org-chart-sibling-gap": "1rem",
+	"--org-chart-connector-length": "2rem",
+	"--org-chart-connector-color": "#d0d0d0",
+	"--org-chart-connector-width": "1px",
+	"--org-chart-card-inline-size": "14rem",
+	"--org-chart-card-bg": "#ffffff",
+	"--org-chart-card-border-color": "#111e30",
+	"--org-chart-card-border-width": "1px",
+	"--org-chart-card-radius": "0px",
+	"--org-chart-card-padding-block": "0.5rem",
+	"--org-chart-card-padding-inline": "0.75rem",
+	"--org-chart-card-gap": "0.5rem",
+	"--org-chart-name-font-size": "0.875rem",
+	"--org-chart-name-font-weight": "500",
+	"--org-chart-name-color": "#111e30",
+	"--org-chart-group-font-size": "0.75rem",
+	"--org-chart-group-color": "#4a4a4a",
+	"--org-chart-group-gap": "0.25rem",
+	"--org-chart-group-margin-block-start": "0.5rem",
+	"--org-chart-person-font-size": "0.875rem",
+	"--org-chart-person-color": "#111e30",
+	"--org-chart-person-role-font-size": "0.75rem",
+	"--org-chart-person-role-color": "#4a4a4a",
+	"--org-chart-person-gap": "0.25rem",
+	"--org-chart-empty-color": "#4a4a4a",
+	"--planning-grid-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
+	"--planning-grid-radius": "0px",
+	"--planning-grid-border-color": "#111e30",
+	"--planning-grid-border-width": "1px",
+	"--planning-grid-row-header-width": "12rem",
+	"--planning-grid-row-header-font-size": "0.875rem",
+	"--planning-grid-row-header-font-weight": "300",
+	"--planning-grid-row-header-color": "#111e30",
+	"--planning-grid-row-header-bg": "#ffffff",
+	"--planning-grid-row-header-padding-block": "0.5rem",
+	"--planning-grid-row-header-padding-inline": "0.75rem",
+	"--planning-grid-column-header-font-size": "0.875rem",
+	"--planning-grid-column-header-font-weight": "500",
+	"--planning-grid-column-header-color": "#111e30",
+	"--planning-grid-column-header-sub-font-size": "0.75rem",
+	"--planning-grid-column-header-sub-color": "#4a4a4a",
+	"--planning-grid-column-header-bg": "#ffffff",
+	"--planning-grid-column-header-padding-block": "0.5rem",
+	"--planning-grid-column-width": "6rem",
+	"--planning-grid-current-outline-color": "#111e30",
+	"--planning-grid-current-outline-width": "2px",
+	"--planning-grid-cell-padding-block": "0.25rem",
+	"--planning-grid-cell-padding-inline": "0.25rem",
+	"--planning-grid-cell-font-size": "0.875rem",
+	"--planning-grid-cell-color": "#111e30",
+	"--planning-grid-cell-readonly-color": "#4a4a4a",
+	"--planning-grid-cell-readonly-bg": "#f2f2f2",
+	"--planning-grid-cell-input-width": "4.5rem",
+	"--planning-grid-footer-bg": "#f2f2f2",
+	"--planning-grid-footer-font-weight": "500",
+	"--planning-grid-footer-color": "#111e30",
+	"--planning-grid-over-color": "#b30000",
+	"--planning-grid-pending-opacity": "0.4",
 	"--public-page-shell-preferences-padding-block": "1.5rem",
 	"--public-page-shell-preferences-gap": "0.75rem",
 	"--steps-gap": "1.5rem",

package/dist/_types/messages/BrandMessages.d.ts

@@ -52,6 +52,12 @@ import type { ProgressBarMessages } from '../atoms/ProgressBar/ProgressBar';
 import type { SpinnerMessages } from '../atoms/Spinner/Spinner';
 import type { SliderMessages } from '../atoms/Slider/Slider';
 import type { TreeViewMessages } from '../molecules/TreeView/TreeView';
+import type { ClockWidgetMessages } from '../molecules/ClockWidget/ClockWidget';
+import type { HeatmapMessages } from '../molecules/Heatmap/Heatmap';
+import type { OrgChartMessages } from '../organisms/OrgChart/OrgChart';
+import type { PlanningGridMessages } from '../organisms/PlanningGrid/PlanningGrid';
+import type { RecurrenceFieldMessages } from '../molecules/RecurrenceField/RecurrenceField';
+import type { TimelineMessages } from '../molecules/Timeline/Timeline';
 import type { UptimeBarsMessages } from '../molecules/UptimeBars/UptimeBars';
 import type { ChartMessages } from '../organisms/Chart/Chart';
 import type { StepperMessages } from '../molecules/Stepper/Stepper';
@@ -150,6 +156,12 @@ export interface BrandMessages {
     spinner: SpinnerMessages;
     slider: SliderMessages;
     treeView: TreeViewMessages;
+    clockWidget: ClockWidgetMessages;
+    heatmap: HeatmapMessages;
+    orgChart: OrgChartMessages;
+    planningGrid: PlanningGridMessages;
+    recurrenceField: RecurrenceFieldMessages;
+    timeline: TimelineMessages;
     uptimeBars: UptimeBarsMessages;
     chart: ChartMessages;
     stepper: StepperMessages;
@@ -173,4 +185,4 @@ export interface BrandMessages {
     connectorExternalSignIn: ConnectorExternalSignInMessages;
     connectorRejection: ConnectorRejectionMessages;
 }
-export type { PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, ConsentMessages, CommandPaletteMessages, AppLauncherMessages, FloatingDockMessages, NotificationButtonMessages, NotificationPanelMessages, MenuButtonMessages, AppRootMessages, AppShellMessages, SidebarMessages, SidebarNavMessages, SiteNavMessages, SiteHeaderMessages, UserMenuMessages, OrgSwitcherMessages, BreadcrumbMessages, TableOfContentsMessages, PrevNextNavMessages, PublicPageShellMessages, OnboardingShellMessages, CopyMessages, CodeBlockMessages, DotsButtonMessages, ProgressBarMessages, SpinnerMessages, SliderMessages, TreeViewMessages, UptimeBarsMessages, ChartMessages, StepperMessages, CarouselMessages, LanguageSwitcherMessages, ProjectCardMessages, LegalFooterMessages, CalendarRosterMessages, CalendarPlannerMessages, NotificationListMessages, MessageComposerMessages, ConversationListMessages, ConversationThreadMessages, TypingIndicatorMessages, AnnotationThreadMessages, ChatShellMessages, UntrustedTextMessages, ConnectorRequestSummaryMessages, ConnectorConsentMessages, ConnectorSignInMessages, ConnectorExternalSignInMessages, ConnectorRejectionMessages, };
+export type { PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, ConsentMessages, CommandPaletteMessages, AppLauncherMessages, FloatingDockMessages, NotificationButtonMessages, NotificationPanelMessages, MenuButtonMessages, AppRootMessages, AppShellMessages, SidebarMessages, SidebarNavMessages, SiteNavMessages, SiteHeaderMessages, UserMenuMessages, OrgSwitcherMessages, BreadcrumbMessages, TableOfContentsMessages, PrevNextNavMessages, PublicPageShellMessages, OnboardingShellMessages, CopyMessages, CodeBlockMessages, DotsButtonMessages, ProgressBarMessages, SpinnerMessages, SliderMessages, TreeViewMessages, ClockWidgetMessages, HeatmapMessages, OrgChartMessages, PlanningGridMessages, RecurrenceFieldMessages, TimelineMessages, UptimeBarsMessages, ChartMessages, StepperMessages, CarouselMessages, LanguageSwitcherMessages, ProjectCardMessages, LegalFooterMessages, CalendarRosterMessages, CalendarPlannerMessages, NotificationListMessages, MessageComposerMessages, ConversationListMessages, ConversationThreadMessages, TypingIndicatorMessages, AnnotationThreadMessages, ChatShellMessages, UntrustedTextMessages, ConnectorRequestSummaryMessages, ConnectorConsentMessages, ConnectorSignInMessages, ConnectorExternalSignInMessages, ConnectorRejectionMessages, };

package/dist/_types/messages/index.d.ts

@@ -2,4 +2,4 @@ export { BrandMessagesProvider } from './BrandMessagesProvider';
 export type { BrandMessagesProviderProps } from './BrandMessagesProvider';
 export { useBrandMessages } from './BrandMessagesContext';
 export type { BrandMessagesReader } from './BrandMessagesContext';
-export type { BrandMessages, PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, ConsentMessages, CommandPaletteMessages, AppLauncherMessages, FloatingDockMessages, NotificationButtonMessages, NotificationPanelMessages, MenuButtonMessages, AppRootMessages, AppShellMessages, SidebarMessages, SidebarNavMessages, SiteNavMessages, SiteHeaderMessages, UserMenuMessages, OrgSwitcherMessages, BreadcrumbMessages, TableOfContentsMessages, PrevNextNavMessages, PublicPageShellMessages, OnboardingShellMessages, CopyMessages, CodeBlockMessages, DotsButtonMessages, ProgressBarMessages, SpinnerMessages, SliderMessages, TreeViewMessages, UptimeBarsMessages, ChartMessages, StepperMessages, CarouselMessages, LanguageSwitcherMessages, ProjectCardMessages, LegalFooterMessages, CalendarRosterMessages, CalendarPlannerMessages, NotificationListMessages, MessageComposerMessages, ConversationListMessages, ConversationThreadMessages, TypingIndicatorMessages, AnnotationThreadMessages, ChatShellMessages, UntrustedTextMessages, ConnectorRequestSummaryMessages, ConnectorConsentMessages, ConnectorSignInMessages, ConnectorExternalSignInMessages, ConnectorRejectionMessages, } from './BrandMessages';
+export type { BrandMessages, PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, ConsentMessages, CommandPaletteMessages, AppLauncherMessages, FloatingDockMessages, NotificationButtonMessages, NotificationPanelMessages, MenuButtonMessages, AppRootMessages, AppShellMessages, SidebarMessages, SidebarNavMessages, SiteNavMessages, SiteHeaderMessages, UserMenuMessages, OrgSwitcherMessages, BreadcrumbMessages, TableOfContentsMessages, PrevNextNavMessages, PublicPageShellMessages, OnboardingShellMessages, CopyMessages, CodeBlockMessages, DotsButtonMessages, ProgressBarMessages, SpinnerMessages, SliderMessages, TreeViewMessages, ClockWidgetMessages, HeatmapMessages, OrgChartMessages, PlanningGridMessages, RecurrenceFieldMessages, TimelineMessages, UptimeBarsMessages, ChartMessages, StepperMessages, CarouselMessages, LanguageSwitcherMessages, ProjectCardMessages, LegalFooterMessages, CalendarRosterMessages, CalendarPlannerMessages, NotificationListMessages, MessageComposerMessages, ConversationListMessages, ConversationThreadMessages, TypingIndicatorMessages, AnnotationThreadMessages, ChatShellMessages, UntrustedTextMessages, ConnectorRequestSummaryMessages, ConnectorConsentMessages, ConnectorSignInMessages, ConnectorExternalSignInMessages, ConnectorRejectionMessages, } from './BrandMessages';

package/dist/_types/molecules/ClockWidget/ClockWidget.d.ts

@@ -0,0 +1,116 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type ClockEntry } from './clockDuration';
+import './ClockWidget.css';
+export type { ClockEntry } from './clockDuration';
+/**
+ * El estado del día. `working` es el único en el que se ficha: en los otros
+ * tres el widget enseña por qué no hay nada que fichar y no pinta el botón.
+ */
+export type ClockWidgetDayState = 'working' | 'non-working' | 'vacation' | 'absence';
+/**
+ * Los textos del fichaje. Todo es **cromo**: el título del widget, los dos
+ * botones, los encabezados de la tabla de tramos y cómo se nombran los tres
+ * días en los que no se ficha. Las horas no pasan por aquí —son formato, y
+ * salen de `locale` con `Intl`—, pero la **duración** sí: «2 h 14 min» se
+ * escribe distinto en cada idioma, así que es una función del catálogo.
+ */
+export interface ClockWidgetMessages {
+    /** Título del widget. */
+    title: string;
+    /** Botón que abre el turno. */
+    clockIn: string;
+    /** Botón que lo cierra. */
+    clockOut: string;
+    /** Lo que dice el botón mientras la acción está en vuelo. */
+    pending: string;
+    /** Etiqueta de la cifra grande: el tiempo trabajado hoy. */
+    elapsed: string;
+    /** Nombre accesible de la tabla de tramos. */
+    entries: string;
+    /** Encabezado de la columna de entrada. */
+    in: string;
+    /** Encabezado de la columna de salida. */
+    out: string;
+    /** Encabezado de la columna de duración. */
+    duration: string;
+    /** Lo que se pone en la salida del tramo todavía abierto. */
+    running: string;
+    /** Etiqueta de la fila de total. */
+    total: string;
+    /** Un día no laborable. */
+    nonWorking: string;
+    /** Un día de vacaciones. */
+    vacation: string;
+    /** Un día de ausencia. */
+    absence: string;
+    /** Cómo se escribe una duración a partir de sus horas y sus minutos. */
+    durationValue: (hours: number, minutes: number) => string;
+}
+export interface ClockWidgetProps extends Omit<ComponentPropsWithoutRef<'section'>, 'children' | 'onError'> {
+    /** Los tramos del día, en orden. El que no tenga salida es el turno abierto. */
+    entries: ClockEntry[];
+    /**
+     * El día, **ya escrito** («Jueves, 19 de septiembre»). El widget no formatea
+     * fechas: eso es `Intl`, y sabe de idiomas y de husos.
+     */
+    date?: ReactNode;
+    /** Estado del día. Default `working`: el único en el que se ficha. */
+    dayState?: ClockWidgetDayState;
+    /** Se llama al pulsar «fichar entrada». Sin él, el botón no se pinta. */
+    onClockIn?: () => void;
+    /** Se llama al pulsar «fichar salida». Sin él, el botón no se pinta. */
+    onClockOut?: () => void;
+    /** La acción está en vuelo: el botón se deshabilita y cambia de texto. */
+    pending?: boolean;
+    /** Deshabilita el botón sin que la acción esté en vuelo (sin permiso, fuera de horario…). */
+    disabled?: boolean;
+    /** Lo que falló al fichar. Se pinta como `Alert` de error, que ya se anuncia. */
+    error?: ReactNode;
+    /**
+     * El instante contra el que se mide el turno abierto. **Sin él el reloj
+     * corre solo**, un tic por segundo, mientras haya un tramo abierto. Pasarlo
+     * lo congela: es lo que usan los tests y las capturas.
+     */
+    now?: Date;
+    /** Locale de la hora de cada tramo. Default `'es-ES'`. */
+    locale?: string;
+    /** Zona horaria de la hora de cada tramo. Sin ella, la del navegador. */
+    timeZone?: string;
+    /** Nivel del título del widget. Default 2. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Enseña la tabla de tramos del día. Default `true`. */
+    showEntries?: boolean;
+    /** El pie del widget: el enlace al histórico de fichajes, por ejemplo. */
+    footer?: ReactNode;
+    /**
+     * Título del widget. Sin él, sale de `clockWidget.title`. Se llama
+     * `titleLabel` y no `title` porque `title` ya es un atributo nativo de
+     * `<section>` —el bocadillo del navegador— y el widget lo sigue reenviando.
+     */
+    titleLabel?: string;
+    /** Texto del botón de entrada. Sin él, sale de `clockWidget.clockIn`. */
+    clockInLabel?: string;
+    /** Texto del botón de salida. Sin él, sale de `clockWidget.clockOut`. */
+    clockOutLabel?: string;
+    /** Texto del botón mientras la acción está en vuelo. Sin él, sale de `clockWidget.pending`. */
+    pendingLabel?: string;
+    /** Etiqueta de la cifra grande. Sin ella, sale de `clockWidget.elapsed`. */
+    elapsedLabel?: string;
+    /** Texto del estado del día. Sin él, sale del espacio según `dayState`. */
+    dayStateLabel?: ReactNode;
+    /** Cómo se escribe una duración. Sin ella, sale de `clockWidget.durationValue`. */
+    formatDuration?: (hours: number, minutes: number) => string;
+}
+/**
+ * El fichaje del día: en qué estado está, cuánto se lleva trabajado y los
+ * tramos ya fichados.
+ *
+ * **No ficha, ni sabe de permisos, ni de husos.** Recibe los tramos y llama a
+ * `onClockIn`/`onClockOut`; quien lo usa decide qué pasa después y le vuelve a
+ * pasar los tramos. Tampoco decide si hoy se trabaja: eso llega en `dayState`.
+ *
+ * El reloj corre solo mientras haya un tramo abierto —un tic por segundo— y se
+ * para al cerrarlo. `now` lo congela, que es lo que hacen los tests y las
+ * capturas de regresión visual.
+ */
+export declare const ClockWidget: import("react").ForwardRefExoticComponent<ClockWidgetProps & import("react").RefAttributes<HTMLElement>>;

package/dist/_types/molecules/ClockWidget/clockDuration.d.ts

@@ -0,0 +1,23 @@
+/**
+ * La aritmética del fichaje, aparte del componente para poder probarla sin
+ * montar nada: cuántos minutos suma un tramo, cuántos suma el día y si el
+ * turno sigue abierto.
+ */
+/** Un tramo fichado: la entrada y, si ya se fichó, la salida. */
+export interface ClockEntry {
+    id: string;
+    /** Cuándo se fichó la entrada. */
+    start: Date;
+    /** Cuándo se fichó la salida. `null` o ausente mientras el tramo sigue abierto. */
+    end?: Date | null;
+}
+/**
+ * Los minutos de un tramo. Uno abierto se mide contra `now`; uno que acaba
+ * antes de empezar —un reloj que se movió hacia atrás— cuenta cero en vez de
+ * restar del total del día.
+ */
+export declare function clockEntryMinutes(entry: ClockEntry, now: Date): number;
+/** Los minutos del día: la suma de todos los tramos, con el abierto medido contra `now`. */
+export declare function clockedMinutes(entries: ClockEntry[], now: Date): number;
+/** Si hay algún tramo sin salida: el turno está abierto. */
+export declare function isClockRunning(entries: ClockEntry[]): boolean;