@studiolxd/brand 40.0.0 → 40.1.0

package/CHANGELOG.md

@@ -7,6 +7,51 @@ 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

package/dist/_shared/tokens.js

@@ -3104,6 +3104,7 @@ var e = {
 	"--annotation-thread-body-color": "#111e30",
 	"--annotation-thread-replies-label-font-size": "0.875rem",
 	"--annotation-thread-replies-label-color": "#4a4a4a",
+	"--annotation-thread-acknowledged-opacity": "0.7",
 	"--annotation-thread-resolved-opacity": "0.4",
 	"--chart-series-1": "#1e7ff6",
 	"--chart-series-2": "#f16123",

package/dist/_types/organisms/AnnotationThread/AnnotationThread.d.ts

@@ -13,16 +13,36 @@ export interface AnnotationEntry {
     avatar?: ReactNode;
     /** Se marca como editada junto a la fecha. */
     edited?: boolean;
+    /**
+     * Lo que el producto añade **a la fila de metadatos**, al lado de la fecha:
+     * la coordenada de la anotación —el enlace a la lección, al segmento, a la
+     * versión—, no una acción sobre ella (para eso está `actions`).
+     *
+     * Se añade DESPUÉS de la fecha y de la marca de editada: no las sustituye, y
+     * al estrecharse cae a su propia línea sin empujarlas fuera de la vista.
+     */
+    meta?: ReactNode;
     /** Acciones de **esta** anotación: editar, borrar, citar. */
     actions?: ReactNode;
 }
+/**
+ * Los tres estados del hilo, en orden de flujo. El nombre dice **dónde está el
+ * hilo**, no cómo lo llama cada producto: el rótulo es una prop, así que una
+ * revisión puede escribir «Verificada» sobre `acknowledged` sin que el sistema
+ * herede el vocabulario de un producto.
+ */
+export type AnnotationThreadStatus = 'open' | 'acknowledged' | 'resolved';
 export interface AnnotationThreadProps extends React.ComponentPropsWithoutRef<'article'> {
     /** La anotación que abre el hilo. */
     annotation: AnnotationEntry;
     /** Las respuestas, en orden. */
     replies?: AnnotationEntry[];
-    /** Estado del hilo. Un hilo resuelto se retira visualmente sin desaparecer. */
-    status?: 'open' | 'resolved';
+    /**
+     * Estado del hilo, en orden de flujo. `open` pide atención; `acknowledged`
+     * es el hilo que alguien ya ha mirado y da un paso atrás sin cerrarse;
+     * `resolved` se retira visualmente sin desaparecer.
+     */
+    status?: AnnotationThreadStatus;
     /** Acciones del hilo entero: resolver, reabrir, seguir. Van al pie. */
     actions?: ReactNode;
     /** Con qué se responde: un `MessageComposer`, un `TextareaField`, un `Button`. */
@@ -33,6 +53,8 @@ export interface AnnotationThreadProps extends React.ComponentPropsWithoutRef<'a
     dateFormat?: Intl.DateTimeFormatOptions;
     /** Rótulo del estado abierto. Por defecto, en castellano: «Abierta». */
     openLabel?: string;
+    /** Rótulo del estado atendido. Por defecto, en castellano: «Atendida». */
+    acknowledgedLabel?: string;
     /** Rótulo del estado resuelto. Por defecto, en castellano: «Resuelta». */
     resolvedLabel?: string;
     /** Marca de anotación editada. Por defecto, en castellano: «editada». */
@@ -50,12 +72,12 @@ export interface AnnotationThreadProps extends React.ComponentPropsWithoutRef<'a
 /**
  * Un hilo de anotaciones sobre algo: el comentario de revisión de una lección,
  * la nota sobre un segmento de traducción. Cada anotación lleva **autor, fecha
- * y sus propias acciones**, el hilo tiene **estado** (abierta o resuelta) y se
- * responde al pie.
+ * y sus propias acciones**, el hilo tiene **estado** (abierta, atendida o
+ * resuelta) y se responde al pie.
  *
  * No es `ConversationThread`: aquello es una conversación de usuario y
  * asistente, con burbujas, orden de emisor y desplazamiento automático. Aquí
  * todas las anotaciones son iguales, lo que importa es quién dijo qué y cuándo,
  * y si el asunto sigue abierto.
  */
-export declare function AnnotationThread({ annotation, replies, status, actions, reply, locale, dateFormat, openLabel, resolvedLabel, editedLabel, repliesLabel, label, className, ...rest }: AnnotationThreadProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnnotationThread({ annotation, replies, status, actions, reply, locale, dateFormat, openLabel, acknowledgedLabel, resolvedLabel, editedLabel, repliesLabel, label, className, ...rest }: AnnotationThreadProps): import("react/jsx-runtime").JSX.Element;

package/dist/annotation-thread.css

@@ -1 +1 @@
-.annotation-thread{gap:var(--annotation-thread-gap);padding-block:var(--annotation-thread-padding-block);padding-inline:var(--annotation-thread-padding-inline);border:var(--annotation-thread-border-width) var(--annotation-thread-border-style) var(--annotation-thread-border-color);flex-direction:column;display:flex}.annotation-thread.annotation-thread--resolved{opacity:var(--annotation-thread-resolved-opacity)}.annotation-thread__status{display:flex}.annotation-thread__item{gap:var(--annotation-thread-item-gap);flex-direction:column;display:flex}.annotation-thread__header{align-items:center;gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__avatar{flex-shrink:0;display:inline-flex}.annotation-thread__author{font-family:var(--annotation-thread-author-font-family);font-size:var(--annotation-thread-author-font-size);font-weight:var(--annotation-thread-author-font-weight);color:var(--annotation-thread-author-color)}.annotation-thread__date,.annotation-thread__edited{font-size:var(--annotation-thread-meta-font-size);color:var(--annotation-thread-meta-color)}.annotation-thread__body{font-size:var(--annotation-thread-body-font-size);line-height:var(--annotation-thread-body-line-height);color:var(--annotation-thread-body-color)}.annotation-thread__item-actions{gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__replies{gap:var(--annotation-thread-items-gap);border-inline-start:var(--annotation-thread-reply-guide-width) var(--annotation-thread-reply-guide-style) var(--annotation-thread-reply-guide-color);flex-direction:column;padding-inline-start:var(--annotation-thread-reply-indent);display:flex}.annotation-thread__replies-label{font-size:var(--annotation-thread-replies-label-font-size);color:var(--annotation-thread-replies-label-color);margin-block:0}.annotation-thread__actions{gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}
+.annotation-thread{gap:var(--annotation-thread-gap);padding-block:var(--annotation-thread-padding-block);padding-inline:var(--annotation-thread-padding-inline);border:var(--annotation-thread-border-width) var(--annotation-thread-border-style) var(--annotation-thread-border-color);flex-direction:column;display:flex}.annotation-thread.annotation-thread--acknowledged{opacity:var(--annotation-thread-acknowledged-opacity)}.annotation-thread.annotation-thread--resolved{opacity:var(--annotation-thread-resolved-opacity)}.annotation-thread__status{display:flex}.annotation-thread__item{gap:var(--annotation-thread-item-gap);flex-direction:column;display:flex}.annotation-thread__header{align-items:center;gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__avatar{flex-shrink:0;display:inline-flex}.annotation-thread__author{font-family:var(--annotation-thread-author-font-family);font-size:var(--annotation-thread-author-font-size);font-weight:var(--annotation-thread-author-font-weight);color:var(--annotation-thread-author-color)}.annotation-thread__date,.annotation-thread__edited{font-size:var(--annotation-thread-meta-font-size);color:var(--annotation-thread-meta-color)}.annotation-thread__meta{align-items:center;gap:var(--annotation-thread-header-gap);overflow-wrap:anywhere;min-inline-size:0;font-size:var(--annotation-thread-meta-font-size);color:var(--annotation-thread-meta-color);flex-wrap:wrap;display:inline-flex}.annotation-thread__body{font-size:var(--annotation-thread-body-font-size);line-height:var(--annotation-thread-body-line-height);color:var(--annotation-thread-body-color)}.annotation-thread__item-actions{gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__replies{gap:var(--annotation-thread-items-gap);border-inline-start:var(--annotation-thread-reply-guide-width) var(--annotation-thread-reply-guide-style) var(--annotation-thread-reply-guide-color);flex-direction:column;padding-inline-start:var(--annotation-thread-reply-indent);display:flex}.annotation-thread__replies-label{font-size:var(--annotation-thread-replies-label-font-size);color:var(--annotation-thread-replies-label-color);margin-block:0}.annotation-thread__actions{gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}

package/dist/annotation-thread.js

@@ -4,12 +4,16 @@ import "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/stories/organisms/AnnotationThread/AnnotationThread.tsx
 var r = {
+	open: "warning",
+	acknowledged: "info",
+	resolved: "success"
+}, i = {
 	day: "numeric",
 	month: "short",
 	hour: "2-digit",
 	minute: "2-digit"
 };
-function i({ entry: e, locale: r, dateFormat: i, editedLabel: a }) {
+function a({ entry: e, locale: r, dateFormat: i, editedLabel: a }) {
 	let o = e.date instanceof Date ? e.date : new Date(e.date), s = new Intl.DateTimeFormat(r, i).format(o);
 	return /* @__PURE__ */ n("article", {
 		className: "annotation-thread__item",
@@ -33,6 +37,10 @@ function i({ entry: e, locale: r, dateFormat: i, editedLabel: a }) {
 					e.edited && /* @__PURE__ */ t("span", {
 						className: "annotation-thread__edited",
 						children: a
+					}),
+					e.meta && /* @__PURE__ */ t("span", {
+						className: "annotation-thread__meta",
+						children: e.meta
 					})
 				]
 			}),
@@ -47,52 +55,55 @@ function i({ entry: e, locale: r, dateFormat: i, editedLabel: a }) {
 		]
 	});
 }
-function a({ annotation: a, replies: o = [], status: s = "open", actions: c, reply: l, locale: u = "es-ES", dateFormat: d = r, openLabel: f = "Abierta", resolvedLabel: p = "Resuelta", editedLabel: m = "editada", repliesLabel: h = (e) => e === 1 ? "1 respuesta" : `${e} respuestas`, label: g = "Hilo de anotaciones", className: _, ...v }) {
-	let y = s === "resolved";
+function o({ annotation: o, replies: s = [], status: c = "open", actions: l, reply: u, locale: d = "es-ES", dateFormat: f = i, openLabel: p = "Abierta", acknowledgedLabel: m = "Atendida", resolvedLabel: h = "Resuelta", editedLabel: g = "editada", repliesLabel: _ = (e) => e === 1 ? "1 respuesta" : `${e} respuestas`, label: v = "Hilo de anotaciones", className: y, ...b }) {
 	return /* @__PURE__ */ n("article", {
 		className: [
 			"annotation-thread",
-			y ? "annotation-thread--resolved" : "",
-			_ ?? ""
+			c === "open" ? "" : `annotation-thread--${c}`,
+			y ?? ""
 		].filter(Boolean).join(" "),
-		"aria-label": g,
-		...v,
+		"aria-label": v,
+		...b,
 		children: [
 			/* @__PURE__ */ t("div", {
 				className: "annotation-thread__status",
 				children: /* @__PURE__ */ t(e, {
-					variant: y ? "success" : "warning",
-					children: y ? p : f
+					variant: r[c],
+					children: {
+						open: p,
+						acknowledged: m,
+						resolved: h
+					}[c]
 				})
 			}),
-			/* @__PURE__ */ t(i, {
-				entry: a,
-				locale: u,
-				dateFormat: d,
-				editedLabel: m
+			/* @__PURE__ */ t(a, {
+				entry: o,
+				locale: d,
+				dateFormat: f,
+				editedLabel: g
 			}),
-			o.length > 0 && /* @__PURE__ */ n("div", {
+			s.length > 0 && /* @__PURE__ */ n("div", {
 				className: "annotation-thread__replies",
 				children: [/* @__PURE__ */ t("p", {
 					className: "annotation-thread__replies-label",
-					children: h(o.length)
-				}), o.map((e) => /* @__PURE__ */ t(i, {
+					children: _(s.length)
+				}), s.map((e) => /* @__PURE__ */ t(a, {
 					entry: e,
-					locale: u,
-					dateFormat: d,
-					editedLabel: m
+					locale: d,
+					dateFormat: f,
+					editedLabel: g
 				}, e.id))]
 			}),
-			l && /* @__PURE__ */ t("div", {
+			u && /* @__PURE__ */ t("div", {
 				className: "annotation-thread__reply",
-				children: l
+				children: u
 			}),
-			c && /* @__PURE__ */ t("footer", {
+			l && /* @__PURE__ */ t("footer", {
 				className: "annotation-thread__actions",
-				children: c
+				children: l
 			})
 		]
 	});
 }
 //#endregion
-export { a as AnnotationThread };
+export { o as AnnotationThread };