@studiolxd/brand 49.22.0 → 49.23.0

package/CHANGELOG.md

@@ -7,6 +7,30 @@ 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.23.0] — 2026-10-04
+
+> **Minor.** Ranura `logo` en `AppHeader`, a petición de Homenize. Espacio nuevo `appHeader` en
+> `BrandMessages` (una clave, `logo`): el catálogo de cada app tiene que añadirla para compilar.
+
+### Logo en la cabecera de la aplicación
+
+- **`logo`**: la marca del producto entre el botón de menú y `start`. Toma el alto de contenido de la
+  barra (`--app-header-content-height`, 40px) y el ancho de su proporción: el `Logo` del sistema a
+  cualquier talla, un SVG con `viewBox` o un `<img>` de cualquier proporción, sin darle medidas. Sin
+  `logo`, la barra queda exactamente igual que antes.
+- **`logoHref`** (por defecto `/`) y **`renderLogoLink`** para el router del producto, con el mismo
+  contrato que `SiteHeader`: recibe `href`, `className`, `aria-label` y `children`. Tipo nuevo
+  exportado: `AppHeaderLogoLinkProps`.
+- **`logoLabel`**, o sin él **`appHeader.logo`** del `BrandMessagesProvider` («Homenize, ir al
+  inicio»), como `siteHeader.logo`. Solo se lee con `logo`. Tipo nuevo: `AppHeaderMessages`.
+- **Una marca a la vez con el `Sidebar`.** La cabecera está siempre a la vista, encima de la columna y
+  del cajón, así que el `logo` va en uno solo —mejor en la cabecera, que se ve también en rail y con la
+  sidebar cerrada—. Si llegan los dos, dentro de un `AppShell` manda el de la cabecera: el armazón
+  oculta `.sidebar__header` mientras el `AppHeader` lleve `logo` (`:has`, sin JS, sin parpadeo en SSR).
+- Stories: `AppHeader` «Con logo», «Con una marca de producto», «Con logo (móvil)»; `AppShell` «Con logo
+  en la cabecera». Tests de story (orden, enlace, 40px de alto con `Logo xxl`, imagen 4:1 a 160×40, sin
+  logo nada cambia, sidebar sin marca) y unitarios (`AppHeader.test.tsx`).
+
 ## [49.22.0] — 2026-10-04
 
 > **Minor.** Muestra y selector de color: `ColorSwatch`, `ColorPicker` y `ColorPickerField`, sin

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

@@ -36,6 +36,7 @@ import type { NotificationPanelMessages } from '../molecules/NotificationPanel/N
 import type { MenuButtonMessages } from '../atoms/MenuButton/MenuButton';
 import type { AppRootMessages } from '../sections/AppRoot/AppRoot';
 import type { AppShellMessages } from '../sections/AppShell/AppShell';
+import type { AppHeaderMessages } from '../sections/AppHeader/AppHeader';
 import type { SidebarMessages } from '../sections/Sidebar/Sidebar';
 import type { SidebarNavMessages } from '../molecules/SidebarNav/SidebarNav';
 import type { SiteNavMessages } from '../molecules/SiteNav/SiteNav';
@@ -142,6 +143,7 @@ export interface BrandMessages {
     menuButton: MenuButtonMessages;
     appRoot: AppRootMessages;
     appShell: AppShellMessages;
+    appHeader: AppHeaderMessages;
     sidebar: SidebarMessages;
     sidebarNav: SidebarNavMessages;
     siteNav: SiteNavMessages;
@@ -189,4 +191,4 @@ export interface BrandMessages {
     connectorExternalSignIn: ConnectorExternalSignInMessages;
     connectorRejection: ConnectorRejectionMessages;
 }
-export type { PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, SiteSearchMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, ColorPickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, ConsentMessages, CommandPaletteMessages, AppLauncherMessages, FloatingDockMessages, NotificationButtonMessages, NotificationPanelMessages, MenuButtonMessages, AppRootMessages, AppShellMessages, SidebarMessages, SidebarNavMessages, SiteNavMessages, SiteHeaderMessages, UserMenuMessages, OrgSwitcherMessages, BreadcrumbMessages, TableOfContentsMessages, PrevNextNavMessages, PublicPageShellMessages, OnboardingShellMessages, CopyMessages, CodeBlockMessages, DotsButtonMessages, ProgressBarMessages, SpinnerMessages, SliderMessages, TreeViewMessages, ClockWidgetMessages, HeatmapMessages, OrgChartMessages, PlanningGridMessages, RecurrenceFieldMessages, TimelineMessages, UptimeBarsMessages, ChartMessages, StepperMessages, CarouselMessages, LanguageSwitcherMessages, ProjectCardMessages, LegalFooterMessages, CalendarRosterMessages, CalendarPlannerMessages, NotificationListMessages, MessageComposerMessages, ConversationListMessages, ConversationThreadMessages, TypingIndicatorMessages, AnnotationThreadMessages, ChatShellMessages, UntrustedTextMessages, ConnectorRequestSummaryMessages, ConnectorConsentMessages, ConnectorSignInMessages, ConnectorExternalSignInMessages, ConnectorRejectionMessages, };
+export type { PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, SiteSearchMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, ColorPickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, ConsentMessages, CommandPaletteMessages, AppLauncherMessages, FloatingDockMessages, NotificationButtonMessages, NotificationPanelMessages, MenuButtonMessages, AppRootMessages, AppShellMessages, AppHeaderMessages, SidebarMessages, SidebarNavMessages, SiteNavMessages, SiteHeaderMessages, UserMenuMessages, OrgSwitcherMessages, BreadcrumbMessages, TableOfContentsMessages, PrevNextNavMessages, PublicPageShellMessages, OnboardingShellMessages, CopyMessages, CodeBlockMessages, DotsButtonMessages, ProgressBarMessages, SpinnerMessages, SliderMessages, TreeViewMessages, ClockWidgetMessages, HeatmapMessages, OrgChartMessages, PlanningGridMessages, RecurrenceFieldMessages, TimelineMessages, UptimeBarsMessages, ChartMessages, StepperMessages, CarouselMessages, LanguageSwitcherMessages, ProjectCardMessages, LegalFooterMessages, CalendarRosterMessages, CalendarPlannerMessages, NotificationListMessages, MessageComposerMessages, ConversationListMessages, ConversationThreadMessages, TypingIndicatorMessages, AnnotationThreadMessages, ChatShellMessages, UntrustedTextMessages, ConnectorRequestSummaryMessages, ConnectorConsentMessages, ConnectorSignInMessages, ConnectorExternalSignInMessages, ConnectorRejectionMessages, };

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

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

package/dist/_types/sections/AppHeader/AppHeader.d.ts

@@ -1,6 +1,41 @@
 import { type ReactNode } from 'react';
 import './AppHeader.css';
+export type AppHeaderLogoLinkProps = {
+    href: string;
+    className: string;
+    'aria-label': string;
+    children: ReactNode;
+};
+/**
+ * El único texto propio de la barra, y solo cuando lleva `logo`: es **cromo**,
+ * qué hace el logotipo («ir al inicio»), no qué marca es — el mismo criterio
+ * que `siteHeader.logo`.
+ */
+export interface AppHeaderMessages {
+    /** Texto accesible del enlace del logotipo. */
+    logo: string;
+}
 export interface AppHeaderProps {
+    /**
+     * La marca del producto, entre el botón de menú y `start`: un `Logo`, un SVG
+     * o una imagen de cualquier proporción. Toma el alto de contenido de la barra
+     * (`--app-header-content-height`) y el ancho que le dé su proporción; no hay
+     * que darle medidas. Sin `logo`, la barra no cambia.
+     */
+    logo?: ReactNode;
+    /** Destino del logotipo. Solo se usa con `logo`. */
+    logoHref?: string;
+    /**
+     * Texto accesible del enlace del logotipo. **Sin default**: sin él, sale de
+     * `appHeader.logo` del `BrandMessagesProvider`. Solo se lee con `logo`.
+     */
+    logoLabel?: string;
+    /**
+     * Enlace del logotipo para el router del producto. Recibe `href`, `className`,
+     * `aria-label` y `children`, y debe reenviarlos todos. Mismo contrato que en
+     * `SiteHeader`.
+     */
+    renderLogoLink?: (props: AppHeaderLogoLinkProps) => ReactNode;
     /** Tras el botón de menú: breadcrumb, buscador, título de página… */
     start?: ReactNode;
     /** Antes del avatar: la campana con su contador. Sitio fijo. */
@@ -24,6 +59,6 @@ export interface AppHeaderProps {
  * La barra superior de la aplicación, en todos los anchos. A la izquierda el
  * botón de menú, que abre el cajón en móvil y pliega/despliega la sidebar en
  * escritorio; a la derecha, notificaciones y cuenta. Entre medias, lo que la
- * página necesite.
+ * página necesite. Con `logo`, la marca del producto va justo tras el botón.
  */
-export declare function AppHeader({ start, notifications, end, menuLabel, menuCloseLabel, sidebarId, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppHeader({ logo, logoHref, logoLabel, renderLogoLink, start, notifications, end, menuLabel, menuCloseLabel, sidebarId, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/app-header.css

@@ -1 +1 @@
-.app-header{align-items:center;gap:var(--app-header-gap);block-size:var(--app-header-height);padding-inline:var(--app-header-padding-inline);box-sizing:content-box;background-color:var(--app-header-bg);box-shadow:0 var(--app-header-border-width) 0 var(--app-header-border-color);z-index:var(--app-header-z-index);flex-shrink:0;padding-block-start:env(safe-area-inset-top);display:flex;position:sticky;inset-block-start:0}.app-header__start{flex:1;align-items:center;min-inline-size:0;display:flex}.app-header__notifications,.app-header__end{flex-shrink:0;align-items:center;display:flex}
+.app-header{align-items:center;gap:var(--app-header-gap);block-size:var(--app-header-height);padding-inline:var(--app-header-padding-inline);box-sizing:content-box;background-color:var(--app-header-bg);box-shadow:0 var(--app-header-border-width) 0 var(--app-header-border-color);z-index:var(--app-header-z-index);flex-shrink:0;padding-block-start:env(safe-area-inset-top);display:flex;position:sticky;inset-block-start:0}.app-header__start{flex:1;align-items:center;min-inline-size:0;display:flex}.app-header__notifications,.app-header__end{flex-shrink:0;align-items:center;display:flex}.app-header__logo{box-shadow:none;color:inherit;--logo-height-sm:var(--app-header-content-height);--logo-height-md:var(--app-header-content-height);--logo-height-lg:var(--app-header-content-height);--logo-height-xl:var(--app-header-content-height);--logo-height-xxl:var(--app-header-content-height);flex-shrink:0;align-items:center;padding-block-end:0;display:flex}.app-header__logo:hover{box-shadow:none;color:inherit}.app-header__logo>*{block-size:var(--app-header-content-height);inline-size:auto}

package/dist/app-header.js

@@ -1,37 +1,50 @@
 'use client';
 import './app-header.css';
-import { MenuButton as e } from "./menu-button.js";
-import { t } from "./_shared/appshellcontext.js";
-import { useContext as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { MenuButton as t } from "./menu-button.js";
+import { t as n } from "./_shared/appshellcontext.js";
+import { useContext as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/stories/sections/AppHeader/AppHeader.tsx
-function o({ start: o, notifications: s, end: c, menuLabel: l, menuCloseLabel: u, sidebarId: d }) {
-	let f = n(t), [p, m] = r(!1), h = f ? f.sidebar === "open" : p;
-	return /* @__PURE__ */ a("header", {
+function s({ children: e, ...t }) {
+	return /* @__PURE__ */ a("a", {
+		...t,
+		children: e
+	});
+}
+function c({ logo: c, logoHref: l = "/", logoLabel: u, renderLogoLink: d = s, start: f, notifications: p, end: m, menuLabel: h, menuCloseLabel: g, sidebarId: _ }) {
+	let v = r(n), [y, b] = i(!1), x = v ? v.sidebar === "open" : y, S = v ? v.toggleSidebar : () => b((e) => !e), C = e("appHeader");
+	return /* @__PURE__ */ o("header", {
 		className: "app-header",
 		children: [
-			/* @__PURE__ */ i(e, {
-				isOpen: h,
-				onClick: f ? f.toggleSidebar : () => m((e) => !e),
-				label: l,
-				closeLabel: u,
-				"aria-controls": d,
-				"aria-expanded": h
+			/* @__PURE__ */ a(t, {
+				isOpen: x,
+				onClick: S,
+				label: h,
+				closeLabel: g,
+				"aria-controls": _,
+				"aria-expanded": x
 			}),
-			/* @__PURE__ */ i("div", {
+			c && d({
+				href: l,
+				className: "app-header__logo",
+				"aria-label": C("logo", u),
+				children: c
+			}),
+			/* @__PURE__ */ a("div", {
 				className: "app-header__start",
-				children: o
+				children: f
 			}),
-			s && /* @__PURE__ */ i("div", {
+			p && /* @__PURE__ */ a("div", {
 				className: "app-header__notifications",
-				children: s
+				children: p
 			}),
-			c && /* @__PURE__ */ i("div", {
+			m && /* @__PURE__ */ a("div", {
 				className: "app-header__end",
-				children: c
+				children: m
 			})
 		]
 	});
 }
 //#endregion
-export { o as AppHeader };
+export { c as AppHeader };

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{--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}

package/package.json

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