@studiolxd/brand 49.24.0 → 49.24.1

package/CHANGELOG.md

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

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "49.24.0",
+  "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",