@studiolxd/brand 49.23.1 → 49.24.1

package/CHANGELOG.md

@@ -7,6 +7,61 @@ 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.24.1] — 2026-10-04
+
+> **Patch.** `AppShell` y `ChatShell` ya no rompen la hidratación por debajo del punto de ruptura de
+> escritorio (encargo de Homenize: Next.js 16 con SSR, a 1000px de ancho, React 19 daba «Hydration
+> failed because the server rendered HTML didn't match the client» en cada carga). Sin cambios de API.
+
+### El ancho se lee sin desajustar el HTML del servidor
+
+- El servidor no conoce el ancho y pinta la versión de escritorio; el primer render del cliente leía
+  `matchMedia` en el estado inicial y, por debajo de `breakpoint.lg`, pintaba el cajón: otro
+  `aria-label`/`aria-expanded` en el botón de menú, otra clase, `data-state`, `inert` y `tabIndex` en
+  el `aside` de la `Sidebar`, y el asa de redimensión de menos.
+- Nuevo hook interno `useMediaQuery` (`src/stories/constants/media-query.ts`) sobre
+  `useSyncExternalStore`, con una instantánea de servidor fija (`null`, «todavía no se sabe»): servidor
+  y render de hidratación pintan lo mismo, y React vuelve a pintar con el valor real nada más hidratar.
+  Un render solo de cliente lee el valor real desde el principio.
+- `AppShell` y `ChatShell` publican la forma que han tomado en **`data-layout`** (`column`/`drawer`);
+  sin el atributo, aún no la saben. Por debajo de lg, su hoja esconde la columna mientras falte el
+  atributo —y el `AppShell` deja el glifo de menú en «menú»—, así que el HTML del servidor ya se ve
+  como el cajón cerrado: ni parpadeo ni salto de maquetación al hidratar.
+- Una vez montado, todo igual: en escritorio la barra abierta y redimensionable; en móvil el cajón
+  cerrado, con `inert`, foco, `aria-expanded` y `aria-controls`.
+- Revisados sin cambios: `SiteHeader` (el panel lo resuelve el CSS), `OrgSwitcher`, `Carousel` y
+  `ConversationThread` (solo leen `prefers-reduced-motion` dentro de efectos) y `Chart` (mide con
+  `ResizeObserver` tras montar). Las versiones nativas no hidratan y no tienen `AppShell`.
+- Test nuevo (`AppShell.hydration.test.tsx`): `renderToString` + `hydrateRoot` del `AppShell` con
+  `AppHeader` y `Sidebar`, y del `ChatShell`, a 1000px y a 1280px, sin ningún `console.error` ni
+  error recuperable.
+
+## [49.24.0] — 2026-10-04
+
+> **Minor.** Disparador propio y ancla sin disparador en `ColorPicker`, a petición de creator (la barra
+> de texto enriquecido y la celda de una tabla). Sin tocar nada, todo sigue igual.
+
+### `ColorPicker`: `trigger` y `anchor`
+
+- **`trigger`**: un elemento propio como disparador en lugar de la muestra —un `Toggle` con glifo y
+  `ColorSwatch size="sm"`, un `Button`—, con el patrón del `trigger` de `Popover`/`Menu` y las props
+  por `render` (`useRender`, como `Button`). Recibe `id`, `aria-haspopup="dialog"`, `aria-expanded`,
+  `aria-controls`, `aria-label`/`aria-labelledby`, `aria-invalid`, `disabled` y la descripción con el
+  valor (`colorPicker.value`/`empty`); lo que el elemento ya traiga gana, salvo la descripción, que se
+  suma, y `disabled`. El `ref` del selector se suma al suyo. El foco vuelve a él al cerrar. No lee
+  `colorPicker.trigger`: se nombra por sí mismo o por `aria-label`/la etiqueta.
+- **`anchor`**: coloca el panel contra otro elemento (la prop `anchor` de `Popover`). Sin `trigger`
+  no se pinta ninguna muestra: el panel se abre con `open` controlado, y al cerrarse el foco vuelve a
+  donde estaba antes de abrir.
+- `ColorPickerField` reenvía las dos; con `trigger`, la etiqueta sigue nombrando el elemento.
+- Stories «Con disparador propio» y «Anclado sin disparador», y sus `Test — …`.
+
+### `Popover`: `anchor`, y `trigger` opcional
+
+- **`anchor`** (tipo `PopoverAnchor`): la prop `anchor` del Positioner de Base UI, tal cual.
+- **`trigger` pasa a opcional**: sin él no se pinta disparador y el panel se abre con `open` contra
+  `anchor`.
+
 ## [49.23.1] — 2026-10-04
 
 > **Patch.** `appHeader` pasa a ser **opcional** en `BrandMessages`. En 49.23.0 entró obligatorio y un

package/dist/_shared/colorpicker.js

@@ -7,61 +7,62 @@ import { Popover as i } from "../popover.js";
 import { Slider as a } from "../slider.js";
 import { t as o } from "./css-properties.js";
 import { ColorSwatch as s } from "../color-swatch.js";
-import { forwardRef as c, useCallback as l, useId as u, useRef as d, useState as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { useDirection as h } from "@base-ui/react/direction-provider";
+import { cloneElement as c, forwardRef as l, useCallback as u, useId as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useRender as g } from "@base-ui/react/use-render";
+import { useDirection as _ } from "@base-ui/react/direction-provider";
 //#region src/stories/molecules/ColorPicker/ColorArea.tsx
-var g = 1, _ = 10, v = (e) => Math.min(100, Math.max(0, e)), y = c(function({ hueColor: e, saturation: t, brightness: n, onChange: r, onCommit: i, label: a, roleDescription: s, valueText: c, disabled: u = !1 }, f) {
-	let m = h() === "rtl", y = d(null), b = d(null), x = d({
+var v = 1, y = 10, b = (e) => Math.min(100, Math.max(0, e)), x = l(function({ hueColor: e, saturation: t, brightness: n, onChange: r, onCommit: i, label: a, roleDescription: s, valueText: c, disabled: l = !1 }, d) {
+	let p = _() === "rtl", h = f(null), g = f(null), x = f({
 		s: 0,
 		v: 0
 	}), S = o({
-		"--color-picker-area-x": `${m ? 100 - t : t}%`,
+		"--color-picker-area-x": `${p ? 100 - t : t}%`,
 		"--color-picker-area-y": `${100 - n}%`,
 		"--color-picker-area-hue": e
-	}), C = l((e) => {
-		y.current = e, S(e);
+	}), C = u((e) => {
+		h.current = e, S(e);
 	}, [S]), w = (e) => {
 		let t = e.currentTarget.getBoundingClientRect(), n = t.width ? (e.clientX - t.left) / t.width : 0, r = t.height ? (e.clientY - t.top) / t.height : 0;
 		return {
-			s: v((m ? 1 - n : n) * 100),
-			v: v((1 - r) * 100)
+			s: b((p ? 1 - n : n) * 100),
+			v: b((1 - r) * 100)
 		};
 	}, T = () => {
-		((typeof f == "function" ? null : f?.current) ?? y.current?.querySelector("[role=\"slider\"]"))?.focus({ preventScroll: !0 });
+		((typeof d == "function" ? null : d?.current) ?? h.current?.querySelector("[role=\"slider\"]"))?.focus({ preventScroll: !0 });
 	}, E = (e) => {
-		if (u || e.button !== 0) return;
+		if (l || e.button !== 0) return;
 		e.preventDefault();
 		try {
 			e.currentTarget.setPointerCapture?.(e.pointerId);
 		} catch {}
-		b.current = e.pointerId, T();
+		g.current = e.pointerId, T();
 		let t = w(e);
 		x.current = t, r(t);
 	}, D = (e) => {
-		if (b.current !== e.pointerId) return;
+		if (g.current !== e.pointerId) return;
 		let t = w(e);
 		x.current = t, r(t);
 	}, O = (e) => {
-		if (b.current === e.pointerId) {
-			b.current = null;
+		if (g.current === e.pointerId) {
+			g.current = null;
 			try {
 				e.currentTarget.releasePointerCapture?.(e.pointerId);
 			} catch {}
 			i(x.current);
 		}
 	}, k = (e) => {
-		if (u) return;
-		let a = e.shiftKey ? _ : g, { s: o, v: s } = {
+		if (l) return;
+		let a = e.shiftKey ? y : v, { s: o, v: s } = {
 			s: t,
 			v: n
 		};
 		switch (e.key) {
 			case "ArrowRight":
-				o += m ? -a : a;
+				o += p ? -a : a;
 				break;
 			case "ArrowLeft":
-				o += m ? a : -a;
+				o += p ? a : -a;
 				break;
 			case "ArrowUp":
 				s += a;
@@ -70,10 +71,10 @@ var g = 1, _ = 10, v = (e) => Math.min(100, Math.max(0, e)), y = c(function({ hu
 				s -= a;
 				break;
 			case "PageUp":
-				e.shiftKey ? o += _ : s += _;
+				e.shiftKey ? o += y : s += y;
 				break;
 			case "PageDown":
-				e.shiftKey ? o -= _ : s -= _;
+				e.shiftKey ? o -= y : s -= y;
 				break;
 			case "Home":
 				e.ctrlKey || e.metaKey ? s = 0 : o = 0;
@@ -85,37 +86,37 @@ var g = 1, _ = 10, v = (e) => Math.min(100, Math.max(0, e)), y = c(function({ hu
 		}
 		e.preventDefault();
 		let c = {
-			s: v(o),
-			v: v(s)
+			s: b(o),
+			v: b(s)
 		};
 		r(c), i(c);
 	};
-	return /* @__PURE__ */ p("div", {
+	return /* @__PURE__ */ m("div", {
 		ref: C,
 		className: "color-picker__area",
-		"data-direction": m ? "rtl" : "ltr",
-		"data-disabled": u ? "" : void 0,
+		"data-direction": p ? "rtl" : "ltr",
+		"data-disabled": l ? "" : void 0,
 		onPointerDown: E,
 		onPointerMove: D,
 		onPointerUp: O,
 		onPointerCancel: O,
-		children: /* @__PURE__ */ p("div", {
-			ref: f,
+		children: /* @__PURE__ */ m("div", {
+			ref: d,
 			className: "color-picker__area-thumb",
 			role: "slider",
-			tabIndex: u ? -1 : 0,
+			tabIndex: l ? -1 : 0,
 			"aria-label": a,
 			"aria-roledescription": s,
 			"aria-valuemin": 0,
 			"aria-valuemax": 100,
 			"aria-valuenow": Math.round(t),
 			"aria-valuetext": c,
-			"aria-disabled": u || void 0,
+			"aria-disabled": l || void 0,
 			onKeyDown: k
 		})
 	});
-}), b = (e, t, n) => Math.min(n, Math.max(t, e));
-function x(e) {
+}), S = (e, t, n) => Math.min(n, Math.max(t, e));
+function C(e) {
 	let t = e.trim().replace(/^#/, "");
 	if (!/^[0-9a-f]+$/i.test(t)) return null;
 	let n;
@@ -130,12 +131,12 @@ function x(e) {
 		a: n.length === 8 ? r(3) / 255 : 1
 	};
 }
-var S = (e) => b(Math.round(e), 0, 255).toString(16).padStart(2, "0");
-function C({ r: e, g: t, b: n, a: r }, i) {
-	let a = `#${S(e)}${S(t)}${S(n)}`;
-	return i ? `${a}${S(b(r, 0, 1) * 255)}` : a;
+var w = (e) => S(Math.round(e), 0, 255).toString(16).padStart(2, "0");
+function T({ r: e, g: t, b: n, a: r }, i) {
+	let a = `#${w(e)}${w(t)}${w(n)}`;
+	return i ? `${a}${w(S(r, 0, 1) * 255)}` : a;
 }
-function w({ r: e, g: t, b: n, a: r }) {
+function E({ r: e, g: t, b: n, a: r }) {
 	let i = e / 255, a = t / 255, o = n / 255, s = Math.max(i, a, o), c = s - Math.min(i, a, o), l = 0;
 	return c !== 0 && (l = s === i ? (a - o) / c % 6 : s === a ? (o - i) / c + 2 : (i - a) / c + 4, l *= 60, l < 0 && (l += 360)), {
 		h: l,
@@ -144,8 +145,8 @@ function w({ r: e, g: t, b: n, a: r }) {
 		a: r
 	};
 }
-function T({ h: e, s: t, v: n, a: r }) {
-	let i = (e % 360 + 360) % 360, a = b(t, 0, 100) / 100, o = b(n, 0, 100) / 100, s = o * a, c = s * (1 - Math.abs(i / 60 % 2 - 1)), l = o - s, u;
+function D({ h: e, s: t, v: n, a: r }) {
+	let i = (e % 360 + 360) % 360, a = S(t, 0, 100) / 100, o = S(n, 0, 100) / 100, s = o * a, c = s * (1 - Math.abs(i / 60 % 2 - 1)), l = o - s, u;
 	return u = i < 60 ? [
 		s,
 		c,
@@ -174,21 +175,21 @@ function T({ h: e, s: t, v: n, a: r }) {
 		r: (u[0] + l) * 255,
 		g: (u[1] + l) * 255,
 		b: (u[2] + l) * 255,
-		a: b(r, 0, 1)
+		a: S(r, 0, 1)
 	};
 }
-function E(e) {
-	let t = x(e);
-	return t ? w(t) : null;
+function O(e) {
+	let t = C(e);
+	return t ? E(t) : null;
 }
-function D(e, t) {
-	return C(T(e), t);
+function k(e, t) {
+	return T(D(e), t);
 }
-function O(e, t) {
-	let n = x(e);
-	return n ? C(n, t) : null;
+function A(e, t) {
+	let n = C(e);
+	return n ? T(n, t) : null;
 }
-function k() {
+function ee() {
 	return [
 		0,
 		60,
@@ -197,7 +198,7 @@ function k() {
 		240,
 		300,
 		360
-	].map((e) => D({
+	].map((e) => k({
 		h: e,
 		s: 100,
 		v: 100,
@@ -206,205 +207,228 @@ function k() {
 }
 //#endregion
 //#region src/stories/molecules/ColorPicker/ColorPicker.tsx
-var A = {
+var j = {
 	h: 0,
 	s: 0,
 	v: 0,
 	a: 1
-}, j = c(function({ value: c, defaultValue: g = null, onValueChange: _, onValueCommitted: v, alpha: b = !1, presets: x, clearable: S = !1, onClear: C, open: w, defaultOpen: T = !1, onOpenChange: j, size: M = "md", disabled: ee = !1, error: N = !1, locale: P = "es-ES", id: te, name: F, "aria-label": I, "aria-labelledby": L, "aria-describedby": ne, dialogLabel: re, clearLabel: ie, className: ae }, oe) {
-	let R = e("colorPicker"), z = h() === "rtl", [se, B] = f(T), V = w ?? se, H = c !== void 0, [ce, U] = f(g), W = H ? c : ce, G = W ? O(W, b) : null, [K, q] = f(() => G && E(G) || A), [le, ue] = f(G);
-	G !== le && (ue(G), G && D(K, b) !== G && q(E(G) ?? A));
-	let J = D(K, b), de = D({
-		...K,
+}, te = l(function({ value: l, defaultValue: v = null, onValueChange: y, onValueCommitted: b, alpha: S = !1, presets: C, clearable: w = !1, onClear: T, open: E, defaultOpen: D = !1, onOpenChange: te, size: M = "md", disabled: N = !1, error: P = !1, locale: ne = "es-ES", id: re, name: F, "aria-label": I, "aria-labelledby": L, "aria-describedby": ie, dialogLabel: ae, clearLabel: oe, trigger: R, anchor: z, className: se }, B) {
+	let V = e("colorPicker"), H = _() === "rtl", [ce, U] = p(D), W = E ?? ce, G = l !== void 0, [le, ue] = p(v), K = G ? l : le, q = K ? A(K, S) : null, [J, de] = p(() => q && O(q) || j), [fe, pe] = p(q);
+	q !== fe && (pe(q), q && k(J, S) !== q && de(O(q) ?? j));
+	let me = k(J, S), he = k({
+		...J,
 		a: 1
-	}, !1), Y = l((e, t) => {
-		let n = b ? e : {
+	}, !1), Y = u((e, t) => {
+		let n = S ? e : {
 			...e,
 			a: 1
 		};
-		q(n);
-		let r = D(n, b);
-		H || U(r), _?.(r), t && v?.(r);
+		de(n);
+		let r = k(n, S);
+		G || ue(r), y?.(r), t && b?.(r);
 	}, [
-		b,
-		H,
-		_,
-		v
-	]), [X, Z] = f(null), [fe, pe] = f(V);
-	V !== fe && (pe(V), V || Z(null));
-	let Q = (e, t) => {
-		let n = O(e, b), r = n ? E(n) : null;
+		S,
+		G,
+		y,
+		b
+	]), [X, Z] = p(null), [ge, _e] = p(W);
+	W !== ge && (_e(W), W || Z(null));
+	let ve = (e, t) => {
+		let n = A(e, S), r = n ? O(n) : null;
 		return r ? (Y(r, t), !0) : !1;
-	}, me = (e) => {
+	}, ye = (e) => {
 		let t = e.target.value;
 		Z(t);
 		let n = t.trim().replace(/^#/, "").length;
-		(n === 6 || b && n === 8) && Q(t, !0);
-	}, $ = () => {
-		X !== null && Q(X, !0), Z(null);
-	}, he = () => {
-		H || U(null), C?.(), w === void 0 && B(!1);
-	}, ge = (e, t) => {
-		e && ee || (w === void 0 && B(e), j?.(e, t));
-	}, _e = d(null), ve = u(), ye = o({
-		"--color-picker-hue-gradient": `linear-gradient(to ${z ? "left" : "right"}, ${k().join(", ")})`,
-		"--color-picker-alpha-gradient": `linear-gradient(to ${z ? "left" : "right"}, transparent, ${de})`
-	}), be = (e) => Y({
-		...K,
+		(n === 6 || S && n === 8) && ve(t, !0);
+	}, be = () => {
+		X !== null && ve(X, !0), Z(null);
+	}, xe = () => {
+		G || ue(null), T?.(), E === void 0 && U(!1);
+	}, Se = (e, t) => {
+		e && N || (E === void 0 && U(e), te?.(e, t));
+	}, Ce = f(null), Q = d(), we = o({
+		"--color-picker-hue-gradient": `linear-gradient(to ${H ? "left" : "right"}, ${ee().join(", ")})`,
+		"--color-picker-alpha-gradient": `linear-gradient(to ${H ? "left" : "right"}, transparent, ${he})`
+	}), Te = (e) => Y({
+		...J,
 		s: e.s,
 		v: e.v
-	}, !1), xe = (e) => Y({
-		...K,
+	}, !1), Ee = (e) => Y({
+		...J,
 		s: e.s,
 		v: e.v
-	}, !0), Se = (x ?? []).map((e) => ({
+	}, !0), De = (C ?? []).map((e) => ({
 		...e,
-		hex: O(e.color, b)
-	})).filter((e) => e.hex !== null), Ce = [
+		hex: A(e.color, S)
+	})).filter((e) => e.hex !== null), Oe = [
 		"color-picker",
 		M === "md" ? "" : `color-picker--${M}`,
-		N ? "color-picker--error" : "",
-		ae ?? ""
-	].filter(Boolean).join(" "), we = [ve, ne].filter(Boolean).join(" "), Te = /* @__PURE__ */ m("button", {
-		ref: oe,
-		id: te,
+		P ? "color-picker--error" : "",
+		se ?? ""
+	].filter(Boolean).join(" "), ke = [Q, ie].filter(Boolean).join(" "), Ae = /* @__PURE__ */ h("button", {
+		ref: B,
+		id: re,
 		type: "button",
 		className: "color-picker__trigger",
-		disabled: ee,
-		"aria-label": I ?? (L ? void 0 : R("trigger")),
+		disabled: N,
+		"aria-label": I ?? (L ? void 0 : V("trigger")),
 		"aria-labelledby": I ? void 0 : L,
-		"aria-describedby": we,
+		"aria-describedby": ke,
 		"aria-haspopup": "dialog",
-		"aria-expanded": V,
-		"aria-invalid": N || void 0,
-		children: [/* @__PURE__ */ p(s, {
-			color: W,
+		"aria-expanded": W,
+		"aria-invalid": P || void 0,
+		children: [/* @__PURE__ */ m(s, {
+			color: K,
 			className: "color-picker__swatch"
-		}), /* @__PURE__ */ p(t, {
-			id: ve,
-			children: W ? R("value")(G ?? W) : R("empty")
+		}), /* @__PURE__ */ m(t, {
+			id: Q,
+			children: K ? V("value")(q ?? K) : V("empty")
 		})]
-	});
-	return /* @__PURE__ */ m("div", {
-		className: Ce,
-		children: [F && /* @__PURE__ */ p("input", {
-			type: "hidden",
-			name: F,
-			value: G ?? ""
-		}), /* @__PURE__ */ p(i, {
-			trigger: Te,
-			label: R("dialog", re),
-			open: V,
-			onOpenChange: ge,
-			side: "bottom",
-			align: "start",
-			initialFocus: _e,
-			className: "color-picker__popover",
-			children: /* @__PURE__ */ m("div", {
-				ref: ye,
-				className: "color-picker__panel",
-				children: [
-					/* @__PURE__ */ p(y, {
-						ref: _e,
-						hueColor: D({
-							h: K.h,
-							s: 100,
-							v: 100,
-							a: 1
-						}, !1),
-						saturation: K.s,
-						brightness: K.v,
-						onChange: be,
-						onCommit: xe,
-						label: R("area"),
-						roleDescription: R("areaDescription"),
-						valueText: R("areaValue")(Math.round(K.s), Math.round(K.v))
-					}),
-					/* @__PURE__ */ p(a, {
-						className: "color-picker__channel color-picker__channel--hue",
-						label: R("hue"),
-						min: 0,
-						max: 360,
-						step: 1,
-						value: Math.round(K.h),
-						format: {
-							style: "unit",
-							unit: "degree"
-						},
-						locale: P,
-						onValueChange: (e) => Y({
-							...K,
-							h: e
-						}, !1),
-						onValueCommitted: (e) => Y({
-							...K,
-							h: e
-						}, !0)
-					}),
-					b && /* @__PURE__ */ p(a, {
-						className: "color-picker__channel color-picker__channel--alpha",
-						label: R("alpha"),
-						min: 0,
-						max: 100,
-						step: 1,
-						value: Math.round(K.a * 100),
-						format: {
-							style: "unit",
-							unit: "percent"
-						},
-						locale: P,
-						onValueChange: (e) => Y({
-							...K,
-							a: e / 100
-						}, !1),
-						onValueCommitted: (e) => Y({
-							...K,
-							a: e / 100
-						}, !0)
-					}),
-					/* @__PURE__ */ p(r, {
-						className: "color-picker__hex",
-						type: "text",
-						size: M,
-						"aria-label": R("hex"),
-						autoComplete: "off",
-						spellCheck: !1,
-						maxLength: b ? 9 : 7,
-						value: X ?? J,
-						onChange: me,
-						onBlur: $,
-						onKeyDown: (e) => {
-							e.key === "Enter" && (e.preventDefault(), $());
-						}
-					}),
-					Se.length > 0 && /* @__PURE__ */ p("div", {
-						className: "color-picker__presets",
-						role: "group",
-						"aria-label": R("presets"),
-						children: Se.map((e) => /* @__PURE__ */ p("button", {
-							type: "button",
-							className: "color-picker__preset",
-							title: e.title,
-							"aria-label": e.title,
-							"aria-pressed": e.hex === J,
-							onClick: () => Y(E(e.hex) ?? A, !0),
-							children: /* @__PURE__ */ p(s, {
-								color: e.hex,
-								className: "color-picker__preset-swatch"
-							})
-						}, `${e.hex}-${e.title}`))
-					}),
-					S && /* @__PURE__ */ p(n, {
-						variant: "ghost",
-						size: "sm",
-						className: "color-picker__clear",
-						onClick: he,
-						children: R("clear", ie)
-					})
-				]
+	}), je = R?.props ?? {}, Me = g({
+		render: R && c(R, {
+			disabled: N || je.disabled || void 0,
+			"aria-describedby": [ke, je["aria-describedby"]].filter(Boolean).join(" ")
+		}),
+		ref: B,
+		enabled: R !== void 0,
+		props: {
+			id: re,
+			"aria-label": I,
+			"aria-labelledby": I ? void 0 : L,
+			"aria-haspopup": "dialog",
+			"aria-expanded": W,
+			"aria-invalid": P || void 0
+		}
+	}), $;
+	return Me ? $ = Me : z === void 0 && ($ = Ae), /* @__PURE__ */ h("div", {
+		className: Oe,
+		children: [
+			F && /* @__PURE__ */ m("input", {
+				type: "hidden",
+				name: F,
+				value: q ?? ""
+			}),
+			R && /* @__PURE__ */ m(t, {
+				id: Q,
+				children: K ? V("value")(q ?? K) : V("empty")
+			}),
+			/* @__PURE__ */ m(i, {
+				trigger: $,
+				anchor: z,
+				label: V("dialog", ae),
+				open: W,
+				onOpenChange: Se,
+				side: "bottom",
+				align: "start",
+				initialFocus: Ce,
+				className: "color-picker__popover",
+				children: /* @__PURE__ */ h("div", {
+					ref: we,
+					className: "color-picker__panel",
+					children: [
+						/* @__PURE__ */ m(x, {
+							ref: Ce,
+							hueColor: k({
+								h: J.h,
+								s: 100,
+								v: 100,
+								a: 1
+							}, !1),
+							saturation: J.s,
+							brightness: J.v,
+							onChange: Te,
+							onCommit: Ee,
+							label: V("area"),
+							roleDescription: V("areaDescription"),
+							valueText: V("areaValue")(Math.round(J.s), Math.round(J.v))
+						}),
+						/* @__PURE__ */ m(a, {
+							className: "color-picker__channel color-picker__channel--hue",
+							label: V("hue"),
+							min: 0,
+							max: 360,
+							step: 1,
+							value: Math.round(J.h),
+							format: {
+								style: "unit",
+								unit: "degree"
+							},
+							locale: ne,
+							onValueChange: (e) => Y({
+								...J,
+								h: e
+							}, !1),
+							onValueCommitted: (e) => Y({
+								...J,
+								h: e
+							}, !0)
+						}),
+						S && /* @__PURE__ */ m(a, {
+							className: "color-picker__channel color-picker__channel--alpha",
+							label: V("alpha"),
+							min: 0,
+							max: 100,
+							step: 1,
+							value: Math.round(J.a * 100),
+							format: {
+								style: "unit",
+								unit: "percent"
+							},
+							locale: ne,
+							onValueChange: (e) => Y({
+								...J,
+								a: e / 100
+							}, !1),
+							onValueCommitted: (e) => Y({
+								...J,
+								a: e / 100
+							}, !0)
+						}),
+						/* @__PURE__ */ m(r, {
+							className: "color-picker__hex",
+							type: "text",
+							size: M,
+							"aria-label": V("hex"),
+							autoComplete: "off",
+							spellCheck: !1,
+							maxLength: S ? 9 : 7,
+							value: X ?? me,
+							onChange: ye,
+							onBlur: be,
+							onKeyDown: (e) => {
+								e.key === "Enter" && (e.preventDefault(), be());
+							}
+						}),
+						De.length > 0 && /* @__PURE__ */ m("div", {
+							className: "color-picker__presets",
+							role: "group",
+							"aria-label": V("presets"),
+							children: De.map((e) => /* @__PURE__ */ m("button", {
+								type: "button",
+								className: "color-picker__preset",
+								title: e.title,
+								"aria-label": e.title,
+								"aria-pressed": e.hex === me,
+								onClick: () => Y(O(e.hex) ?? j, !0),
+								children: /* @__PURE__ */ m(s, {
+									color: e.hex,
+									className: "color-picker__preset-swatch"
+								})
+							}, `${e.hex}-${e.title}`))
+						}),
+						w && /* @__PURE__ */ m(n, {
+							variant: "ghost",
+							size: "sm",
+							className: "color-picker__clear",
+							onClick: xe,
+							children: V("clear", oe)
+						})
+					]
+				})
 			})
-		})]
+		]
 	});
 });
 //#endregion
-export { j as t };
+export { te as t };

package/dist/_shared/media-query.js

@@ -0,0 +1,12 @@
+import { useCallback as e, useSyncExternalStore as t } from "react";
+//#region src/stories/constants/media-query.ts
+var n = () => null;
+function r(r) {
+	return t(e((e) => {
+		if (typeof window.matchMedia != "function") return () => {};
+		let t = window.matchMedia(r);
+		return t.addEventListener("change", e), () => t.removeEventListener("change", e);
+	}, [r]), () => typeof window.matchMedia == "function" ? window.matchMedia(r).matches : null, n);
+}
+//#endregion
+export { r as t };

package/dist/_types/atoms/Popover/Popover.d.ts

@@ -8,9 +8,25 @@ import './Popover.css';
  * forma a mano.
  */
 export type PopoverChangeDetails = Parameters<NonNullable<React.ComponentProps<typeof BasePopover.Root>['onOpenChange']>>[1];
+/**
+ * Elemento contra el que se coloca el panel cuando no es el disparador. Es la
+ * prop `anchor` del Positioner de Base UI, tal cual: un elemento, un `ref`, un
+ * elemento virtual o una función que lo devuelva.
+ */
+export type PopoverAnchor = React.ComponentProps<typeof BasePopover.Positioner>['anchor'];
 export interface PopoverProps {
-    /** Elemento que abre el panel. Recibe las props del disparador vía `render`. */
-    trigger: ReactNode;
+    /**
+     * Elemento que abre el panel. Recibe las props del disparador vía `render`.
+     * Sin él no se pinta disparador: el panel se abre con `open` y se coloca
+     * contra `anchor`.
+     */
+    trigger?: ReactNode;
+    /**
+     * Coloca el panel contra otro elemento que no es el disparador —o, sin
+     * disparador, contra el único que hay—. Por defecto, el disparador. Sin
+     * disparador, al cerrarse el foco vuelve a donde estaba antes de abrir.
+     */
+    anchor?: PopoverAnchor;
     /** Contenido del panel. */
     children: ReactNode;
     /**
@@ -74,4 +90,4 @@ export interface PopoverProps {
  * mantener el panel abierto cuando el clic cae en algo que el motor no
  * reconoce como suyo.
  */
-export declare function Popover({ trigger, children, label, open, defaultOpen, onOpenChange, onPointerDownOutside, onFocusOutside, onEscapeKeyDown, side, align, sideOffset, initialFocus, container, className, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function Popover({ trigger, anchor, children, label, open, defaultOpen, onOpenChange, onPointerDownOutside, onFocusOutside, onEscapeKeyDown, side, align, sideOffset, initialFocus, container, className, }: PopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/_types/constants/media-query.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Lee una media query **sin romper la hidratación**.
+ *
+ * El servidor no conoce el ancho de la ventana. Si el primer render del
+ * cliente leyera `matchMedia` (en el `useState` inicial, por ejemplo), pintaría
+ * otro marcado que el servidor y React 19 tiraría la hidratación con «server
+ * rendered HTML didn't match the client». Con `useSyncExternalStore` el
+ * servidor y el render de hidratación leen la misma instantánea fija —`null`,
+ * «todavía no se sabe»— y React vuelve a pintar con el valor real nada más
+ * hidratar. Un render solo de cliente (sin SSR) lee el valor real desde el
+ * primer momento.
+ *
+ * Mientras valga `null`, el componente pinta su forma de partida y es su CSS,
+ * con la misma media query, quien la corrige a la vista: así no hay parpadeo
+ * entre el HTML del servidor y el render hidratado.
+ *
+ * Sin `matchMedia` en el entorno, `null` siempre.
+ */
+export declare function useMediaQuery(query: string): boolean | null;

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

@@ -1,4 +1,5 @@
-import type { PopoverChangeDetails } from '../../atoms/Popover/Popover';
+import type { ReactElement } from 'react';
+import type { PopoverAnchor, PopoverChangeDetails } from '../../atoms/Popover/Popover';
 import './ColorPicker.css';
 /**
  * El cromo del selector de color. Ninguno trae el castellano puesto: salen
@@ -115,6 +116,24 @@ export interface ColorPickerProps {
     dialogLabel?: string;
     /** Texto de «Quitar color». **Sin default**: sin él, `colorPicker.clear`. */
     clearLabel?: string;
+    /**
+     * Disparador propio en lugar de la muestra: un `Toggle` con icono, un
+     * `Button`… Como el `trigger` de `Popover`, recibe las props del disparador
+     * por `render`, así que tiene que reenviarlas (y el `ref`) a su elemento.
+     * El selector le añade `id`, `disabled`, `aria-haspopup`, `aria-expanded`,
+     * `aria-invalid`, `aria-label` / `aria-labelledby` y la descripción con el
+     * valor actual; lo que el elemento ya traiga gana, salvo la descripción, que
+     * se suma, y `disabled`, que basta con que lo diga uno. Lo que pinte dentro
+     * (y su `pressed`, si es un `Toggle`) lo decide quien lo usa.
+     */
+    trigger?: ReactElement<Record<string, unknown>>;
+    /**
+     * Coloca el panel contra un elemento que no es el disparador —la celda de una
+     * tabla— (la prop `anchor` de `Popover`). Sin `trigger`, no se pinta ningún
+     * disparador: el panel se abre solo con `open`, y al cerrarse el foco vuelve
+     * a donde estaba antes de abrir.
+     */
+    anchor?: PopoverAnchor;
     /** Se añade DESPUÉS de las clases propias. */
     className?: string;
 }
@@ -125,6 +144,6 @@ export interface ColorPickerProps {
  *
  * Todo es Base UI salvo el área 2D: el `Popover` (foco, portal, cierre), las
  * bandas (`Slider`) y el campo (`Input`) son los de brand. El `ref` va al
- * disparador.
+ * disparador, sea la muestra o el `trigger` propio.
  */
 export declare const ColorPicker: import("react").ForwardRefExoticComponent<ColorPickerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/app-shell.css

@@ -1 +1 @@
-.app-shell{--app-shell-sidebar-width:var(--sidebar-width);--app-shell-banner-height:0px;--app-shell-chrome-block-start:calc(var(--app-shell-banner-height) + var(--app-header-height) + env(safe-area-inset-top));flex-direction:column;block-size:100dvh;display:flex;overflow:clip}.app-shell__banner{flex-shrink:0}.app-shell__body{flex:1;min-block-size:0;display:flex;position:relative}.app-shell__content{min-inline-size:0;padding-inline:var(--section-padding-inline);padding-block:var(--section-padding-block-lg);flex:1;padding-block-end:max(var(--section-padding-block-lg), env(safe-area-inset-bottom));padding-inline-end:max(var(--section-padding-inline), env(safe-area-inset-right));overflow:auto}.app-shell__content.app-shell__content--flush{padding-block:0;padding-inline:0;padding-block-end:env(safe-area-inset-bottom);padding-inline-end:env(safe-area-inset-right)}.app-shell__backdrop{inset:0;background-color:var(--sidebar-backdrop-bg);opacity:var(--sidebar-backdrop-opacity);z-index:var(--sidebar-backdrop-z-index);position:fixed;inset-block-start:var(--app-shell-chrome-block-start)}.app-shell:has(.app-header__logo) .sidebar__header{display:none}
+.app-shell{--app-shell-sidebar-width:var(--sidebar-width);--app-shell-banner-height:0px;--app-shell-chrome-block-start:calc(var(--app-shell-banner-height) + var(--app-header-height) + env(safe-area-inset-top));flex-direction:column;block-size:100dvh;display:flex;overflow:clip}.app-shell__banner{flex-shrink:0}.app-shell__body{flex:1;min-block-size:0;display:flex;position:relative}.app-shell__content{min-inline-size:0;padding-inline:var(--section-padding-inline);padding-block:var(--section-padding-block-lg);flex:1;padding-block-end:max(var(--section-padding-block-lg), env(safe-area-inset-bottom));padding-inline-end:max(var(--section-padding-inline), env(safe-area-inset-right));overflow:auto}.app-shell__content.app-shell__content--flush{padding-block:0;padding-inline:0;padding-block-end:env(safe-area-inset-bottom);padding-inline-end:env(safe-area-inset-right)}.app-shell__backdrop{inset:0;background-color:var(--sidebar-backdrop-bg);opacity:var(--sidebar-backdrop-opacity);z-index:var(--sidebar-backdrop-z-index);position:fixed;inset-block-start:var(--app-shell-chrome-block-start)}.app-shell:has(.app-header__logo) .sidebar__header{display:none}@media (width<=1023.98px){.app-shell:not([data-layout]) .sidebar{display:none}.app-shell:not([data-layout]) .app-header .menu-button .icon__line{opacity:1;transform:none}}

package/dist/app-shell.js

@@ -5,94 +5,88 @@ import { SkipLink as t } from "./skip-link.js";
 import { t as n } from "./_shared/css-properties.js";
 import { TooltipProvider as r } from "./tooltip.js";
 import { n as i, t as a } from "./_shared/appshellcontext.js";
-import { useCallback as o, useEffect as s, useMemo as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { t as o } from "./_shared/media-query.js";
+import { useCallback as s, useEffect as c, useMemo as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/stories/sections/AppShell/AppShell.tsx
-var f = "(min-width: 1024px)";
-function p() {
-	let [e, t] = l(() => typeof window > "u" || typeof window.matchMedia != "function" ? !0 : window.matchMedia(f).matches);
-	return s(() => {
-		if (typeof window.matchMedia != "function") return;
-		let e = window.matchMedia(f), n = () => t(e.matches);
-		return n(), e.addEventListener("change", n), () => e.removeEventListener("change", n);
-	}, []), e;
-}
-function m({ banner: i, header: f, sidebar: m, children: h, contentFlush: g = !1, defaultSidebar: _ = "open", sidebarState: v, onSidebarChange: y, defaultSidebarWidth: b, onSidebarWidthChange: x, skipLabel: S }) {
-	let C = e("appShell"), w = p(), [T, E] = l(_), [D, O] = l(!1), [k, A] = l(b), j = w ? v ?? T : D ? "open" : "closed", M = o((e) => {
-		w ? (E(e), y?.(e)) : O(e === "open");
-	}, [w, y]), N = o(() => M(j === "open" ? "closed" : "open"), [M, j]), P = o(() => M("closed"), [M]), F = o((e) => {
-		A(e), x?.(e);
-	}, [x]);
-	s(() => {
-		if (w || !D) return;
+var p = "(min-width: 1024px)";
+function m({ banner: i, header: m, sidebar: h, children: g, contentFlush: _ = !1, defaultSidebar: v = "open", sidebarState: y, onSidebarChange: b, defaultSidebarWidth: x, onSidebarWidthChange: S, skipLabel: C }) {
+	let w = e("appShell"), T = o(p), E = T ?? !0, [D, O] = u(v), [k, A] = u(!1), [j, M] = u(x), N = E ? y ?? D : k ? "open" : "closed", P = s((e) => {
+		E ? (O(e), b?.(e)) : A(e === "open");
+	}, [E, b]), F = s(() => P(N === "open" ? "closed" : "open"), [P, N]), I = s(() => P("closed"), [P]), L = s((e) => {
+		M(e), S?.(e);
+	}, [S]);
+	c(() => {
+		if (E || !k) return;
 		let e = (e) => {
-			e.key === "Escape" && O(!1);
+			e.key === "Escape" && A(!1);
 		};
 		document.addEventListener("keydown", e);
 		let t = document.body.style.overflow;
 		return document.body.style.overflow = "hidden", () => {
 			document.removeEventListener("keydown", e), document.body.style.overflow = t;
 		};
-	}, [w, D]);
-	let I = c(() => ({
-		sidebar: j,
-		setSidebar: M,
-		sidebarWidth: k ?? 0,
-		setSidebarWidth: F,
-		toggleSidebar: N,
-		closeSidebar: P,
-		isDesktop: w
+	}, [E, k]);
+	let R = l(() => ({
+		sidebar: N,
+		setSidebar: P,
+		sidebarWidth: j ?? 0,
+		setSidebarWidth: L,
+		toggleSidebar: F,
+		closeSidebar: I,
+		isDesktop: E
 	}), [
-		j,
-		M,
-		k,
-		F,
 		N,
 		P,
-		w
-	]), [L, R] = l(0), z = o((e) => {
+		j,
+		L,
+		F,
+		I,
+		E
+	]), [z, B] = u(0), V = s((e) => {
 		if (!e) return;
-		let t = () => R(e.getBoundingClientRect().height);
+		let t = () => B(e.getBoundingClientRect().height);
 		if (t(), typeof ResizeObserver > "u") return;
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => {
-			n.disconnect(), R(0);
+			n.disconnect(), B(0);
 		};
-	}, []), B = n({
-		"--app-shell-sidebar-width": k ? `${k}px` : void 0,
-		"--app-shell-banner-height": i ? `${L}px` : void 0
-	}), V = !w && D;
-	return /* @__PURE__ */ u(a.Provider, {
-		value: I,
-		children: /* @__PURE__ */ d(r, { children: [/* @__PURE__ */ u(t, {
+	}, []), H = n({
+		"--app-shell-sidebar-width": j ? `${j}px` : void 0,
+		"--app-shell-banner-height": i ? `${z}px` : void 0
+	}), U = !E && k;
+	return /* @__PURE__ */ d(a.Provider, {
+		value: R,
+		children: /* @__PURE__ */ f(r, { children: [/* @__PURE__ */ d(t, {
 			href: "#main-content",
-			children: C("skipToContent", S)
-		}), /* @__PURE__ */ d("div", {
-			ref: B,
+			children: w("skipToContent", C)
+		}), /* @__PURE__ */ f("div", {
+			ref: H,
 			className: "app-shell",
-			"data-sidebar": j,
+			"data-sidebar": N,
+			"data-layout": T === null ? void 0 : E ? "column" : "drawer",
 			children: [
-				i && /* @__PURE__ */ u("div", {
-					ref: z,
+				i && /* @__PURE__ */ d("div", {
+					ref: V,
 					className: "app-shell__banner",
 					children: i
 				}),
-				f,
-				/* @__PURE__ */ d("div", {
+				m,
+				/* @__PURE__ */ f("div", {
 					className: "app-shell__body",
 					children: [
-						m,
-						V && /* @__PURE__ */ u("div", {
+						h,
+						U && /* @__PURE__ */ d("div", {
 							className: "app-shell__backdrop",
-							onClick: P,
+							onClick: I,
 							"aria-hidden": "true"
 						}),
-						/* @__PURE__ */ u("main", {
+						/* @__PURE__ */ d("main", {
 							id: "main-content",
 							tabIndex: -1,
-							className: g ? "app-shell__content app-shell__content--flush" : "app-shell__content",
-							inert: V || void 0,
-							children: h
+							className: _ ? "app-shell__content app-shell__content--flush" : "app-shell__content",
+							inert: U || void 0,
+							children: g
 						})
 					]
 				})

package/dist/chat-shell.css

@@ -1 +1 @@
-.chat-shell{background-color:var(--chat-shell-bg);flex-direction:column;block-size:100%;min-block-size:0;display:flex;position:relative}.chat-shell .chat-shell__drawer,.chat-shell .sheet__overlay{position:absolute}.chat-shell .chat-shell__drawer{--sheet-inline-size:100%;--sheet-padding-block:0;--sheet-padding-inline:0;--sheet-gap:0;overflow:visible}.chat-shell__drawer .sheet__body{gap:var(--chat-shell-drawer-gap);flex-direction:column;min-block-size:0;display:flex}.chat-shell__drawer-list{flex:1;min-block-size:0;overflow-y:auto}.chat-shell__list{inline-size:var(--chat-shell-list-width);flex-shrink:0;block-size:100%;overflow-y:auto}.chat-shell.chat-shell--with-list{gap:var(--chat-shell-gap);flex-direction:row}.chat-shell__main{flex-direction:column;flex:1;min-block-size:0;display:flex}.chat-shell__header{justify-content:space-between;align-items:center;gap:var(--chat-shell-header-gap);flex-shrink:0;display:flex}.chat-shell__list-trigger{flex-shrink:0;align-self:flex-start}.chat-shell__header-content{justify-content:space-between;align-items:center;gap:var(--chat-shell-header-gap);flex:1;min-inline-size:0;display:flex}.chat-shell__thread{--conversation-thread-padding-inline:var(--chat-shell-thread-padding-inline);min-block-size:0;padding-block:var(--chat-shell-thread-padding-block);flex-direction:column;flex:1;display:flex;overflow-y:auto}.chat-shell__composer{flex-shrink:0}
+.chat-shell{background-color:var(--chat-shell-bg);flex-direction:column;block-size:100%;min-block-size:0;display:flex;position:relative}.chat-shell .chat-shell__drawer,.chat-shell .sheet__overlay{position:absolute}.chat-shell .chat-shell__drawer{--sheet-inline-size:100%;--sheet-padding-block:0;--sheet-padding-inline:0;--sheet-gap:0;overflow:visible}.chat-shell__drawer .sheet__body{gap:var(--chat-shell-drawer-gap);flex-direction:column;min-block-size:0;display:flex}.chat-shell__drawer-list{flex:1;min-block-size:0;overflow-y:auto}.chat-shell__list{inline-size:var(--chat-shell-list-width);flex-shrink:0;block-size:100%;overflow-y:auto}.chat-shell.chat-shell--with-list{gap:var(--chat-shell-gap);flex-direction:row}.chat-shell__main{flex-direction:column;flex:1;min-block-size:0;display:flex}.chat-shell__header{justify-content:space-between;align-items:center;gap:var(--chat-shell-header-gap);flex-shrink:0;display:flex}.chat-shell__list-trigger{flex-shrink:0;align-self:flex-start}.chat-shell__header-content{justify-content:space-between;align-items:center;gap:var(--chat-shell-header-gap);flex:1;min-inline-size:0;display:flex}.chat-shell__thread{--conversation-thread-padding-inline:var(--chat-shell-thread-padding-inline);min-block-size:0;padding-block:var(--chat-shell-thread-padding-block);flex-direction:column;flex:1;display:flex;overflow-y:auto}.chat-shell__composer{flex-shrink:0}@media (width<=1023.98px){.chat-shell:not([data-layout]) .chat-shell__list{display:none}.chat-shell.chat-shell--with-list:not([data-layout]){flex-direction:column}}

package/dist/chat-shell.js

@@ -4,50 +4,47 @@ import { n as e } from "./_shared/brandmessagescontext.js";
 import { Icon as t } from "./icon.js";
 import { Button as n } from "./button.js";
 import { Sheet as r } from "./sheet.js";
-import { forwardRef as i, useCallback as a, useEffect as o, useState as s } from "react";
+import { t as i } from "./_shared/media-query.js";
+import { forwardRef as a, useCallback as o, useState as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/stories/templates/ChatShell/ChatShell.tsx
-var u = "(min-width: 1024px)", d = i(function({ list: i, header: d, children: f, composer: p, listLabel: m, listTriggerLabel: h, listOpen: g, onListOpenChange: _, className: v, ...y }, b) {
-	let x = e("chatShell"), [S, C] = s(() => typeof window > "u" ? !0 : window.matchMedia(u).matches), [w, T] = s(!1), [E, D] = s(null), O = a((e) => {
+var u = "(min-width: 1024px)", d = a(function({ list: a, header: d, children: f, composer: p, listLabel: m, listTriggerLabel: h, listOpen: g, onListOpenChange: _, className: v, ...y }, b) {
+	let x = e("chatShell"), S = i(u), C = S ?? !0, [w, T] = s(!1), [E, D] = s(null), O = o((e) => {
 		D(e), typeof b == "function" ? b(e) : b && (b.current = e);
-	}, [b]);
-	o(() => {
-		let e = window.matchMedia(u), t = () => {
-			C(e.matches), e.matches && T(!1);
-		};
-		return t(), e.addEventListener("change", t), () => e.removeEventListener("change", t);
-	}, []);
-	let k = a((e) => {
+	}, [b]), [k, A] = s(S);
+	S !== k && (A(S), S && T(!1));
+	let j = o((e) => {
 		g === void 0 && T(e), _?.(e);
-	}, [g, _]), A = !S && (g ?? w), j = i != null && S, M = i != null && !S;
+	}, [g, _]), M = !C && (g ?? w), N = a != null && C, P = a != null && !C;
 	return /* @__PURE__ */ l("div", {
 		ref: O,
 		className: [
 			"chat-shell",
-			j ? "chat-shell--with-list" : "",
+			N ? "chat-shell--with-list" : "",
 			v ?? ""
 		].filter(Boolean).join(" "),
+		"data-layout": S === null ? void 0 : C ? "column" : "drawer",
 		...y,
 		children: [
-			j && /* @__PURE__ */ c("aside", {
+			N && /* @__PURE__ */ c("aside", {
 				className: "chat-shell__list",
 				"aria-label": x("list", m),
-				children: i
+				children: a
 			}),
 			/* @__PURE__ */ l("div", {
 				className: "chat-shell__main",
 				children: [
-					(d || M) && /* @__PURE__ */ l("header", {
+					(d || P) && /* @__PURE__ */ l("header", {
 						className: "chat-shell__header",
-						children: [M && /* @__PURE__ */ c(n, {
+						children: [P && /* @__PURE__ */ c(n, {
 							variant: "ghost",
 							size: "sm",
 							iconOnly: !0,
 							"aria-label": x("listTrigger", h),
 							"aria-haspopup": "dialog",
-							"aria-expanded": A,
+							"aria-expanded": M,
 							className: "chat-shell__list-trigger",
-							onClick: () => k(!0),
+							onClick: () => j(!0),
 							children: /* @__PURE__ */ c(t, {
 								name: "layout-sidebar",
 								size: "sm"
@@ -67,10 +64,10 @@ var u = "(min-width: 1024px)", d = i(function({ list: i, header: d, children: f,
 					})
 				]
 			}),
-			M && /* @__PURE__ */ l(r, {
+			P && /* @__PURE__ */ l(r, {
 				side: "left",
-				open: A,
-				onOpenChange: k,
+				open: M,
+				onOpenChange: j,
 				title: x("list", m),
 				titleHidden: !0,
 				container: E ?? void 0,
@@ -85,7 +82,7 @@ var u = "(min-width: 1024px)", d = i(function({ list: i, header: d, children: f,
 						"aria-label": x("listTrigger", h),
 						"aria-expanded": !0,
 						className: "chat-shell__list-trigger",
-						onClick: () => k(!1),
+						onClick: () => j(!1),
 						children: /* @__PURE__ */ c(t, {
 							name: "layout-sidebar",
 							size: "sm"
@@ -93,7 +90,7 @@ var u = "(min-width: 1024px)", d = i(function({ list: i, header: d, children: f,
 					})
 				}), /* @__PURE__ */ c("div", {
 					className: "chat-shell__drawer-list",
-					children: i
+					children: a
 				})]
 			})
 		]

package/dist/popover.js

@@ -12,26 +12,27 @@ function a() {
 	let e = document.documentElement;
 	return i(getComputedStyle(e).getPropertyValue("--popover-offset").trim());
 }
-function o({ trigger: i, children: o, label: s, open: c, defaultOpen: l, onOpenChange: u, onPointerDownOutside: d, onFocusOutside: f, onEscapeKeyDown: p, side: m = "bottom", align: h = "start", sideOffset: g, initialFocus: _, container: v, className: y }) {
-	let b = e(v);
+function o({ trigger: i, anchor: o, children: s, label: c, open: l, defaultOpen: u, onOpenChange: d, onPointerDownOutside: f, onFocusOutside: p, onEscapeKeyDown: m, side: h = "bottom", align: g = "start", sideOffset: _, initialFocus: v, container: y, className: b }) {
+	let x = e(y);
 	return /* @__PURE__ */ n(r.Root, {
-		open: c,
-		defaultOpen: l,
+		open: l,
+		defaultOpen: u,
 		onOpenChange: (e, t) => {
-			e || (t.reason === "outside-press" ? d?.(t) : t.reason === "focus-out" ? f?.(t) : t.reason === "escape-key" && p?.(t)), u?.(e, t);
+			e || (t.reason === "outside-press" ? f?.(t) : t.reason === "focus-out" ? p?.(t) : t.reason === "escape-key" && m?.(t)), d?.(e, t);
 		},
-		children: [/* @__PURE__ */ t(r.Trigger, { render: i }), /* @__PURE__ */ t(r.Portal, {
-			container: b,
+		children: [i !== void 0 && /* @__PURE__ */ t(r.Trigger, { render: i }), /* @__PURE__ */ t(r.Portal, {
+			container: x,
 			children: /* @__PURE__ */ t(r.Positioner, {
 				className: "popover__positioner",
-				side: m,
-				align: h,
-				sideOffset: g ?? a,
+				anchor: o,
+				side: h,
+				align: g,
+				sideOffset: _ ?? a,
 				children: /* @__PURE__ */ t(r.Popup, {
-					"aria-label": s,
-					initialFocus: _,
-					className: ["popover", y].filter(Boolean).join(" "),
-					children: o
+					"aria-label": c,
+					initialFocus: v,
+					className: ["popover", b].filter(Boolean).join(" "),
+					children: s
 				})
 			})
 		})]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.23.1",
+  "version": "49.24.1",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",