@studiolxd/brand 39.0.0 → 40.1.0

package/CHANGELOG.md

@@ -7,6 +7,113 @@ 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.
 
+## [40.1.0] — 2026-09-15
+
+> **Minor.** `AnnotationThread` gana un tercer estado y una ranura para la coordenada de
+> cada anotación.
+
+### El tercer estado: `acknowledged`
+
+El organismo tenía dos estados, `open` y `resolved`, y le faltaba el peldaño de en medio.
+No es un matiz visual: donde se usa, el pie ofrece **las transiciones disponibles desde
+donde estás**, así que colapsar «planteada» y «atendida» en un mismo `open` hace que el
+rótulo diga lo mismo en dos estados entre los que se puede mover, y la interfaz deja de
+decir si alguien se ha hecho cargo.
+
+Se llama `acknowledged` —«Atendida» por defecto, con su `acknowledgedLabel`— y no
+`verified`, que es el vocabulario de UN producto: donde nació, «verificada» significa que
+alguien comprobó el arreglo, pero en una nota de traducción el mismo peldaño es «alguien ya
+se ha hecho cargo». El nombre del sistema dice **dónde está el hilo** —planteado, atendido,
+cerrado—, no qué significa en tu dominio; el rótulo es prop, así que cada producto sigue
+diciendo su palabra. Se descartó `reviewed` por colisión: el componente vive en paneles de
+revisión, donde «revisada» ya se lee como otra cosa.
+
+El tratamiento es una **escala de presencia** —plena, segundo plano, retirada— con un solo
+token nuevo, `annotation-thread.acknowledged-opacity`, hermano del `resolved-opacity` que ya
+existía. Ningún color nuevo: el `Tag` usa su variante `info`. Y por ser opacidad se lee
+igual en superficie clara y oscura, así que no hizo falta ningún par `surface-dark-*`.
+
+### `AnnotationEntry.meta`: la coordenada de una anotación
+
+Ranura nueva **por anotación**, no del hilo: cada una tiene su fecha y su sitio, y una
+respuesta puede apuntar a otro lugar que la anotación que abre el hilo. Se pinta dentro de
+la cabecera de esa anotación, después del avatar, el autor, la fecha y la marca de editada
+— añade, no sustituye.
+
+No es `actions`, y la diferencia no es de colocación: `actions` son las cosas que se le
+hacen a la anotación —editar, borrar, citar—; la coordenada es parte de **lo que la
+anotación es**. Puesta entre los botones del pie se convertía en un botón más.
+
+Cuando no cabe, la que baja de línea es la coordenada y nunca la fecha: lo garantiza el
+orden del marcado, no una media query. Una coordenada larga —el título de una lección— se
+parte dentro en vez de desbordar el hilo. Las dos cosas las mide un test en un navegador de
+verdad, dentro de una caja estrecha.
+
+La ranura lee los tokens `meta-*` que el organismo ya tenía para la fecha, así que no
+estrena ninguno.
+
+## [40.0.0] — 2026-09-15
+
+> **Major.** El sistema estrena **proveedor de textos**: un catálogo que se monta una vez
+> en la raíz de la aplicación y del que los componentes leen lo que pintan. `Pagination`
+> es el primero en usarlo, y con él pierde sus textos castellano por defecto.
+
+### El proveedor de textos, y por qué
+
+Hasta hoy, todo texto que un componente emite por su cuenta venía en una prop opcional con
+el castellano puesto. En una suite de doce aplicaciones que hablan seis idiomas eso es un
+fallo silencioso: el componente pinta «Cancelar» dentro de una página en francés, no falla
+nada, ningún test lo ve, y se ve bien estando mal. Un inventario de hoy midió el tamaño del
+asunto: **111 componentes, 310 props de texto**.
+
+El mecanismo son cuatro piezas en `src/messages/`, y se importa desde
+`@studiolxd/brand/messages`:
+
+- **`BrandMessages`** — el contrato, anidado por componente. **El tipo nace aquí**, en el
+  sistema, y el catálogo de la aplicación lo satisface; no al revés, porque un sistema que
+  necesitara un paquete ajeno para declarar lo que necesita dejaría de sostenerse solo.
+- **`BrandMessagesProvider`** — se monta una vez, con el catálogo entero. Todas las claves
+  de cada espacio son **obligatorias**: si una aplicación se deja una, no compila.
+- **`useBrandMessages`** — el lector, para los componentes.
+
+El orden es **prop → proveedor → error**, y no hay cuarto escalón: ahí es donde estaba el
+castellano, y de ahí se ha ido. El error se lanza **donde el texto se pinta**, así que un
+paginador sin selector de registros no exige el texto del selector, y quien ya pasa todas
+las props sigue funcionando sin montar nada.
+
+Lo que se gana, dicho sin adornos: una clave que falta es un error de compilación; un
+proveedor sin montar es un fallo ruidoso e inmediato. Ninguno de los dos es un texto mudo
+en el idioma equivocado que nadie descubre.
+
+### Breaking — `Pagination` ya no trae sus textos
+
+Sus ocho textos —`label`, `pagesGroup`, `previous`, `next`, `goToPage`, `perPage`,
+`total` y el `allOption` del selector, que estaba cableado dentro— salen del proveedor o de
+las props. **Un `Pagination` sin proveedor y sin props de texto lanza en render.** Siete de
+las ocho claves ya existían tal cual en el espacio `pagination` de los catálogos de la
+suite; la octava se ha escrito en los seis idiomas.
+
+Alcanza a quien lo compone: `DataTable` monta un `Pagination`, así que una pantalla con
+tabla necesita el proveedor aunque no pagine a mano.
+
+### Storybook: un fixture, no un default por la puerta de atrás
+
+Las historias se envuelven en un decorador que monta el proveedor con un fixture
+castellano. No es el default de antes con otro nombre, y la diferencia es la que da sentido
+a todo lo anterior: el fixture vive fuera de `src/`, no es punto de entrada, ningún
+componente lo importa y `package.json#files` solo publica `dist/`, `src/tokens/` y el
+registro de cambios — así que **ningún código de un consumidor puede caer en él**. Un
+default viaja dentro del paquete y se alcanza en ejecución; un fixture no. Las cuatro
+condiciones las vigila un test, no un comentario.
+
+### Sobre lo que viene
+
+Esta versión es **una rebanada vertical**: una sola familia llevada hasta el final, con sus
+defaults retirados, para probar el patrón antes de comprometer los otros 110 componentes.
+El patrón aguanta. Lo que no es gratis, y conviene saberlo: retirar el default es
+incompatible por componente y se propaga a quien lo compone, así que lo que sigue se
+ordenará **por familias y con versión mayor**, no componente a componente.
+
 ## [39.0.0] — 2026-09-15
 
 > **Major.** `StarRating` deja de traer sus textos puestos: ahora se le pasan, y el

package/dist/_shared/brandmessagescontext.js

@@ -0,0 +1,15 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/stories/messages/BrandMessagesContext.ts
+var n = e(null);
+function r(e) {
+	let r = t(n);
+	return function(t, n) {
+		if (n !== void 0) return n;
+		if (!r) throw Error(`@studiolxd/brand: falta el texto «${String(e)}.${String(t)}» y no hay catálogo montado. Monta <BrandMessagesProvider> en la raíz de la aplicación con los textos del idioma vigente, o pasa la prop suelta en este uso concreto.`);
+		let i = r[e]?.[t];
+		if (i === void 0) throw Error(`@studiolxd/brand: el catálogo montado no trae «${String(e)}.${String(t)}».`);
+		return i;
+	};
+}
+//#endregion
+export { r as n, n as t };

package/dist/_shared/calendargrid.js

@@ -1,6 +1,6 @@
 import { Icon as e } from "../icon.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useCallback as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+import { useCallback as t, useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/stories/molecules/_shared/calendarGrid.tsx
 function c(e, t) {
 	return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
@@ -51,57 +51,57 @@ function p(e, t = "narrow") {
 		};
 	});
 }
-function m({ block: e, rowModifier: n, weekdays: r }) {
-	return /* @__PURE__ */ t("div", {
+function m({ block: e, rowModifier: t, weekdays: n }) {
+	return /* @__PURE__ */ o("div", {
 		role: "row",
-		className: [`${e}__row`, n && `${e}__row--${n}`].filter(Boolean).join(" "),
-		children: r.map(({ short: n, long: r }) => /* @__PURE__ */ t("div", {
+		className: [`${e}__row`, t && `${e}__row--${t}`].filter(Boolean).join(" "),
+		children: n.map(({ short: t, long: n }) => /* @__PURE__ */ o("div", {
 			role: "columnheader",
 			className: `${e}__weekday`,
-			"aria-label": r,
-			children: /* @__PURE__ */ t("abbr", {
-				title: r,
-				children: n
+			"aria-label": n,
+			children: /* @__PURE__ */ o("abbr", {
+				title: n,
+				children: t
 			})
-		}, r))
+		}, n))
 	});
 }
-function h({ block: r, title: i, titleId: a, navigable: o = !0, previousLabel: s, nextLabel: c, prevDisabled: l = !1, nextDisabled: u = !1, onPrev: d, onNext: f, chevronSize: p, onTitleClick: m, titleExpanded: h, titleRef: g, children: _ }) {
-	return /* @__PURE__ */ n("div", {
-		className: `${r}__header`,
+function h({ block: t, title: n, titleId: r, navigable: i = !0, previousLabel: a, nextLabel: c, prevDisabled: l = !1, nextDisabled: u = !1, onPrev: d, onNext: f, chevronSize: p, onTitleClick: m, titleExpanded: h, titleRef: g, children: _ }) {
+	return /* @__PURE__ */ s("div", {
+		className: `${t}__header`,
 		children: [
-			o && /* @__PURE__ */ t("button", {
+			i && /* @__PURE__ */ o("button", {
 				type: "button",
-				className: `${r}__nav`,
-				"aria-label": s,
+				className: `${t}__nav`,
+				"aria-label": a,
 				disabled: l,
 				onClick: d,
-				children: /* @__PURE__ */ t(e, {
+				children: /* @__PURE__ */ o(e, {
 					name: "chevron",
 					size: p,
-					className: `${r}__chevron--prev`
+					className: `${t}__chevron--prev`
 				})
 			}),
-			/* @__PURE__ */ t("h2", {
-				id: a,
-				className: `${r}__title`,
+			/* @__PURE__ */ o("h2", {
+				id: r,
+				className: `${t}__title`,
 				"aria-live": "polite",
-				children: m ? /* @__PURE__ */ t("button", {
+				children: m ? /* @__PURE__ */ o("button", {
 					type: "button",
 					ref: g,
-					className: `${r}__title-button`,
+					className: `${t}__title-button`,
 					"aria-expanded": h,
 					onClick: m,
-					children: i
-				}) : i
+					children: n
+				}) : n
 			}),
-			o && /* @__PURE__ */ t("button", {
+			i && /* @__PURE__ */ o("button", {
 				type: "button",
-				className: `${r}__nav`,
+				className: `${t}__nav`,
 				"aria-label": c,
 				disabled: u,
 				onClick: f,
-				children: /* @__PURE__ */ t(e, {
+				children: /* @__PURE__ */ o(e, {
 					name: "chevron",
 					size: p
 				})
@@ -123,29 +123,29 @@ function v(e, t) {
 function y(e) {
 	return `${e.getFullYear()}-${e.getMonth()}-${e.getDate()}`;
 }
-function b({ month: e, onMonthChange: t, selected: n, onActivate: u, minDate: d, maxDate: f }) {
-	let [p, m] = s(() => n ?? /* @__PURE__ */ new Date()), h = o(/* @__PURE__ */ new Map()), b = o(!1), x = a(() => {
+function b({ month: e, onMonthChange: o, selected: s, onActivate: u, minDate: d, maxDate: f }) {
+	let [p, m] = a(() => s ?? /* @__PURE__ */ new Date()), h = i(/* @__PURE__ */ new Map()), b = i(!1), x = r(() => {
 		if (l(p, e)) return p;
-		if (n && l(n, e)) return n;
+		if (s && l(s, e)) return s;
 		let t = /* @__PURE__ */ new Date();
 		return l(t, e) ? t : new Date(e.getFullYear(), e.getMonth(), 1);
 	}, [
 		p,
 		e,
-		n
+		s
 	]);
-	i(() => {
+	n(() => {
 		b.current && (b.current = !1, h.current.get(y(x))?.focus());
 	}, [x]);
-	let S = r((n) => {
-		let r = g(n, d, f);
-		b.current = !0, m(r), l(r, e) || t(new Date(r.getFullYear(), r.getMonth(), 1));
+	let S = t((t) => {
+		let n = g(t, d, f);
+		b.current = !0, m(n), l(n, e) || o(new Date(n.getFullYear(), n.getMonth(), 1));
 	}, [
 		f,
 		d,
 		e,
-		t
-	]), C = r((e) => {
+		o
+	]), C = t((e) => {
 		let t = x, n = null;
 		switch (e.key) {
 			case "ArrowLeft":
@@ -183,16 +183,16 @@ function b({ month: e, onMonthChange: t, selected: n, onActivate: u, minDate: d,
 		x,
 		S,
 		u
-	]), w = r((e) => (t) => {
+	]), w = t((e) => (t) => {
 		let n = y(e);
 		t ? h.current.set(n, t) : h.current.delete(n);
 	}, []);
 	return {
 		activeDate: x,
-		isTabbable: r((e) => c(e, x), [x]),
+		isTabbable: t((e) => c(e, x), [x]),
 		cellRef: w,
 		onKeyDown: C,
-		onCellFocus: r((e) => m(e), [])
+		onCellFocus: t((e) => m(e), [])
 	};
 }
 //#endregion

package/dist/_shared/datepicker.js

@@ -3,23 +3,23 @@ import { Icon as e } from "../icon.js";
 import { Input as t } from "../input.js";
 import { Popover as n } from "../popover.js";
 import { Calendar as r } from "../calendar.js";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { forwardRef as o, useCallback as s, useId as c, useMemo as l, useRef as ee, useState as u } from "react";
+import { forwardRef as i, useCallback as a, useId as o, useMemo as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/stories/molecules/DatePicker/dateMask.ts
-var d = {
+var f = {
 	day: "dd",
 	month: "mm",
 	year: "aaaa"
-}, f = /[‎‏؜]/g, p = new Date(2026, 8, 25);
-function m(e, t) {
+}, p = /[‎‏؜]/g, m = new Date(2026, 8, 25);
+function h(e, t) {
 	return String(e).padStart(t, "0");
 }
-function h(e) {
+function g(e) {
 	let t = new Intl.DateTimeFormat(e, {
 		day: "2-digit",
 		month: "2-digit",
 		year: "numeric"
-	}).formatToParts(p), n = t.filter((e) => e.type === "day" || e.type === "month" || e.type === "year").map((e) => e.type), r = t.find((e) => e.type === "literal" && e.value.replace(f, "").trim() !== "")?.value.replace(f, "").trim() || "/", i = {
+	}).formatToParts(m), n = t.filter((e) => e.type === "day" || e.type === "month" || e.type === "year").map((e) => e.type), r = t.find((e) => e.type === "literal" && e.value.replace(p, "").trim() !== "")?.value.replace(p, "").trim() || "/", i = {
 		day: 2,
 		month: 2,
 		year: 4
@@ -30,13 +30,13 @@ function h(e) {
 			month: e.getMonth() + 1,
 			year: e.getFullYear()
 		};
-		return n.map((e) => m(t[e], i[e])).join(r);
+		return n.map((e) => h(t[e], i[e])).join(r);
 	}
 	function o(e) {
 		return n.map((t) => e[t]).join(r);
 	}
 	function s(e) {
-		let t = e.replace(f, "").trim();
+		let t = e.replace(p, "").trim();
 		if (/\p{L}/u.test(t)) return null;
 		let r = t.split(/\D+/).filter(Boolean);
 		if (r.length !== 3) return null;
@@ -57,25 +57,25 @@ function h(e) {
 }
 //#endregion
 //#region src/stories/molecules/DatePicker/DatePicker.tsx
-function g(e) {
+function _(e) {
 	return `${String(e.getFullYear()).padStart(4, "0")}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
 }
-var _ = o(function({ value: o, onChange: f, placeholder: p, maskLetters: m = d, invalidMessage: _ = "Escribe una fecha completa, con el día, el mes y el año.", openCalendarLabel: v = "Abrir calendario", minDate: y, maxDate: b, disabledDates: x, size: S = "md", disabled: C, readOnly: w, error: T = !1, locale: E = "es-ES", id: D, name: O, describedBy: te, "aria-describedby": ne, "aria-label": re, calendarLabel: k = "Calendario", previousMonthLabel: A, nextMonthLabel: j, previousYearsLabel: M, nextYearsLabel: N, yearGridLabel: P, gridLabel: F, onBlur: I, className: L }, R) {
-	let [z, B] = u(!1), V = l(() => h(E), [E]), H = o instanceof Date ? V.format(o) : "", [U, W] = u(H), [G, K] = u(H);
+var v = i(function({ value: i, onChange: p, placeholder: m, maskLetters: h = f, invalidMessage: v = "Escribe una fecha completa, con el día, el mes y el año.", openCalendarLabel: y = "Abrir calendario", minDate: b, maxDate: ee, disabledDates: x, size: S = "md", disabled: C, readOnly: w, error: T = !1, locale: E = "es-ES", id: D, name: O, describedBy: k, "aria-describedby": te, "aria-label": ne, calendarLabel: A = "Calendario", previousMonthLabel: re, nextMonthLabel: j, previousYearsLabel: M, nextYearsLabel: N, yearGridLabel: P, gridLabel: F, onBlur: I, className: L }, R) {
+	let [z, B] = l(!1), V = s(() => g(E), [E]), H = i instanceof Date ? V.format(i) : "", [U, W] = l(H), [G, K] = l(H);
 	H !== G && (K(H), W(H));
-	let q = ee(null), J = s((e) => {
+	let q = c(null), J = a((e) => {
 		q.current = e, typeof R == "function" ? R(e) : R && (R.current = e);
-	}, [R]), Y = U.trim(), X = Y ? V.parse(U) : null, Z = Y !== "" && !X, ie = T || Z, Q = `${c()}-date-picker-invalid`, ae = [te ?? ne, Z ? Q : void 0].filter(Boolean).join(" ") || void 0, oe = s((e) => {
+	}, [R]), Y = U.trim(), X = Y ? V.parse(U) : null, Z = Y !== "" && !X, ie = T || Z, Q = `${o()}-date-picker-invalid`, ae = [k ?? te, Z ? Q : void 0].filter(Boolean).join(" ") || void 0, oe = a((e) => {
 		(w || C) && e || B(e);
-	}, [C, w]), $ = s((e) => {
+	}, [C, w]), $ = a((e) => {
 		let t = e.target.value;
 		if (W(t), t.trim() === "") {
-			f?.(null);
+			p?.(null);
 			return;
 		}
 		let n = V.parse(t);
-		n && f?.(n);
-	}, [V, f]), se = s((e) => {
+		n && p?.(n);
+	}, [V, p]), se = a((e) => {
 		if (e.key === "ArrowDown" && !w && !C) {
 			e.preventDefault(), B(!0);
 			return;
@@ -85,37 +85,37 @@ var _ = o(function({ value: o, onChange: f, placeholder: p, maskLetters: m = d,
 		C,
 		z,
 		w
-	]), ce = s((e) => {
-		W(V.format(e)), f?.(e), B(!1), requestAnimationFrame(() => q.current?.focus());
-	}, [V, f]), le = /* @__PURE__ */ i("button", {
+	]), ce = a((e) => {
+		W(V.format(e)), p?.(e), B(!1), requestAnimationFrame(() => q.current?.focus());
+	}, [V, p]), le = /* @__PURE__ */ u("button", {
 		type: "button",
 		className: "date-picker__button",
-		"aria-label": v,
+		"aria-label": y,
 		"aria-haspopup": "dialog",
 		"aria-expanded": z,
 		disabled: C,
 		tabIndex: w ? -1 : void 0,
-		children: /* @__PURE__ */ i(e, {
+		children: /* @__PURE__ */ u(e, {
 			name: "calendar",
 			size: "sm",
 			className: "date-picker__glyph"
 		})
 	});
-	return /* @__PURE__ */ a("div", {
+	return /* @__PURE__ */ d("div", {
 		className: [
 			"date-picker",
 			S === "md" ? "" : `date-picker--${S}`,
 			L ?? ""
 		].filter(Boolean).join(" "),
 		children: [
-			O && /* @__PURE__ */ i("input", {
+			O && /* @__PURE__ */ u("input", {
 				type: "hidden",
 				name: O,
-				value: o instanceof Date ? g(o) : ""
+				value: i instanceof Date ? _(i) : ""
 			}),
-			/* @__PURE__ */ a("div", {
+			/* @__PURE__ */ d("div", {
 				className: "date-picker__control",
-				children: [/* @__PURE__ */ i(t, {
+				children: [/* @__PURE__ */ u(t, {
 					ref: J,
 					id: D,
 					className: "date-picker__input",
@@ -125,48 +125,48 @@ var _ = o(function({ value: o, onChange: f, placeholder: p, maskLetters: m = d,
 					size: S,
 					error: ie,
 					value: U,
-					placeholder: p ?? V.mask(m),
+					placeholder: m ?? V.mask(h),
 					disabled: C,
 					readOnly: w,
-					"aria-label": re,
+					"aria-label": ne,
 					"aria-describedby": ae,
 					onChange: $,
 					onKeyDown: se,
 					onBlur: I
-				}), /* @__PURE__ */ i(n, {
+				}), /* @__PURE__ */ u(n, {
 					trigger: le,
-					label: k,
+					label: A,
 					open: z,
 					onOpenChange: oe,
 					side: "bottom",
 					align: "end",
 					sideOffset: -1,
 					className: "date-picker__popover",
-					children: /* @__PURE__ */ i(r, {
-						value: X ?? o ?? null,
+					children: /* @__PURE__ */ u(r, {
+						value: X ?? i ?? null,
 						onChange: ce,
-						gridLabel: F ?? k,
-						previousMonthLabel: A,
+						gridLabel: F ?? A,
+						previousMonthLabel: re,
 						nextMonthLabel: j,
 						previousYearsLabel: M,
 						nextYearsLabel: N,
 						yearGridLabel: P,
-						minDate: y,
-						maxDate: b,
+						minDate: b,
+						maxDate: ee,
 						disabledDates: x,
 						locale: E,
 						size: S
 					})
 				})]
 			}),
-			Z && /* @__PURE__ */ i("span", {
+			Z && /* @__PURE__ */ u("span", {
 				id: Q,
 				className: "date-picker__message",
 				role: "alert",
-				children: _
+				children: v
 			})
 		]
 	});
 });
 //#endregion
-export { _ as t };
+export { v as t };