@12-apps/ui 3.3.0 → 3.4.0

package/components-catalog.md

@@ -569,6 +569,14 @@ Components for structuring and organizing page layouts.
 
 Components for site and app navigation.
 
+### AppHeader
+**Purpose**: The application bar — brand identity, state line, actions, and the details panel behind them
+**Use Cases**: Storefront header, back-office top bar, platform console header; any app bar that must serve a phone and a desktop from one component
+**Features**: Slot-based (`leading` / identity / `actions` / `meta` / `below`), context-agnostic (no router, session or data), brand mark with a gradient derived from ONE seed colour, dotted state line, disclosure panel that is a bottom sheet on phones and a centred dialog on large screens, sticky/fixed positioning with a self-measured spacer
+**Types**: `AppHeaderProps`, `AppHeaderIdentityProps`, `AppHeaderBrandProps`, `AppHeaderStatusProps`, `AppHeaderDetailsProps`, `AppHeaderDetailRow`
+**Location**: `src/components/navigation/AppHeader`
+**Docs**: `src/components/navigation/AppHeader/AppHeader.md`
+
 ### Breadcrumbs
 **Purpose**: Display navigation path
 **Use Cases**: Hierarchical navigation, page location indicator

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "license": "MIT",
   "packageManager": "pnpm@9.0.0",
   "type": "module",
@@ -120,6 +120,7 @@
     "./layout/Skeleton": "./src/components/layout/Skeleton/index.ts",
     "./layout/Spacer": "./src/components/layout/Spacer/index.ts",
     "./layout/TableFilter": "./src/components/layout/TableFilter/index.ts",
+    "./navigation/AppHeader": "./src/components/navigation/AppHeader/index.ts",
     "./navigation/Breadcrumbs": "./src/components/navigation/Breadcrumbs/index.ts",
     "./navigation/CommandPalette": "./src/components/navigation/CommandPalette/index.ts",
     "./navigation/ContextMenu": "./src/components/navigation/ContextMenu/index.ts",

package/src/components/navigation/AppHeader/AppHeader.brand.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { Box, useTheme } from '@mui/material';
+import type { Theme } from '@mui/material/styles';
+import React from 'react';
+
+import type { SizeValue } from '../../../tokens/scales';
+
+import { brandGradient, initialsOf } from './AppHeader.colors';
+import type { AppHeaderBrandProps } from './AppHeader.types';
+
+/** The mark's edge, per house size step. */
+const MARK_PX: Record<SizeValue, number> = { xs: 24, sm: 32, md: 40, lg: 48, xl: 56 };
+
+/** Initials are set at 40% of the mark so a two-letter pair never touches the edge. */
+const INITIALS_RATIO = 0.4;
+
+/** The mark's box, lifted out of the component to keep it inside the complexity bar. */
+function markSx(
+  theme: Theme,
+  { edge, round, showLogo, seed }: { edge: number; round: boolean; showLogo: boolean; seed: string },
+): Record<string, unknown> {
+  return {
+    width: edge,
+    height: edge,
+    flex: '0 0 auto',
+    overflow: 'hidden',
+    borderRadius: round ? '50%' : '30%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    // Only the initials need the gradient; a logo covers it entirely, and
+    // painting it underneath would show at the corners of a transparent PNG.
+    backgroundImage: showLogo ? 'none' : brandGradient(seed),
+    backgroundColor: showLogo ? theme.palette.action.hover : 'transparent',
+    color: theme.palette.getContrastText(seed),
+    fontSize: Math.round(edge * INITIALS_RATIO),
+    fontWeight: 700,
+    lineHeight: 1,
+    letterSpacing: '0.02em',
+    userSelect: 'none',
+  };
+}
+
+/**
+ * The mark that opens the header: the logo when there is one, the name's
+ * initials on a gradient derived from the brand colour when there is not.
+ *
+ * Both branches occupy the SAME box, so a header does not resize when a logo
+ * arrives — or when one fails to load and the initials take over, which is the
+ * case a plain `<img>` renders as a torn-page glyph beside the store's name.
+ */
+export const AppHeaderBrand: React.FC<AppHeaderBrandProps> = ({
+  name,
+  logoUrl,
+  seedColor,
+  size = 'md',
+  shape = 'rounded',
+  className,
+  dataTestId = 'app-header-brand',
+}) => {
+  const theme = useTheme();
+  const [broken, setBroken] = React.useState(false);
+  // Keyed on the URL so a store that swaps its logo gets a fresh attempt rather
+  // than inheriting the previous one's failure.
+  React.useEffect(() => setBroken(false), [logoUrl]);
+
+  const edge = MARK_PX[size];
+  const seed = seedColor || theme.palette.primary.main;
+  const showLogo = Boolean(logoUrl) && !broken;
+
+  return (
+    <Box
+      className={className}
+      data-testid={dataTestId}
+      // `role="img"` + the name: the initials are a picture of the brand, not
+      // two letters a screen reader should spell out.
+      role="img"
+      aria-label={name}
+      sx={markSx(theme, { edge, round: shape === 'circle', showLogo, seed })}
+    >
+      {showLogo ? (
+        <Box
+          component="img"
+          src={logoUrl ?? undefined}
+          alt=""
+          onError={() => setBroken(true)}
+          data-testid={`${dataTestId}-logo`}
+          sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+        />
+      ) : (
+        <Box component="span" aria-hidden data-testid={`${dataTestId}-initials`}>
+          {initialsOf(name)}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+AppHeaderBrand.displayName = 'AppHeaderBrand';
+
+export default AppHeaderBrand;

package/src/components/navigation/AppHeader/AppHeader.colors.ts

@@ -0,0 +1,120 @@
+import { decomposeColor } from '@mui/material/styles';
+
+/**
+ * Turning ONE brand colour into the mark's fill.
+ *
+ * The alternative — a second "highlight" prop — reads reasonable and is a trap:
+ * it asks every caller to pick a colour that pairs with a colour they already
+ * picked, and a multi-tenant app asks that of people who will never see this
+ * component. Most would leave it unset, some would set it to the same value
+ * (a gradient that is a flat fill), and the rest would get a pairing nobody
+ * checked. So the highlight is DERIVED, and a store configures one hex.
+ *
+ * The derivation moves the seed's HUE rather than only its lightness. A
+ * lighten-only gradient reads as a lit sphere — the same effect at every seed,
+ * and a weak one at the light end where there is little room left to lighten.
+ * Rotating toward the warm side gives the mark a direction the eye follows, and
+ * because the rotation is fixed the two stops stay recognisably one colour.
+ */
+
+/** Degrees the highlight is rotated from the seed. Warm, and short of a clash. */
+const HIGHLIGHT_HUE_SHIFT = 42;
+
+/** The highlight sits this much lighter than the seed. */
+const HIGHLIGHT_LIGHTEN = 0.12;
+
+/**
+ * A near-grey seed has no hue to rotate, so rotating it produces the same grey
+ * twice. Below this saturation the mark falls back to a lightness-only ramp,
+ * which is the honest rendering of "this brand has no colour".
+ */
+const HUELESS = 0.08;
+
+/** The angle light appears to come from — matches the house elevation. */
+const GRADIENT_ANGLE = '135deg';
+
+interface Hsl {
+  h: number;
+  s: number;
+  l: number;
+}
+
+/** `[r, g, b]` in 0–255 from any CSS colour MUI can parse, or `null`. */
+function toRgb(color: string): [number, number, number] | null {
+  try {
+    const { values } = decomposeColor(color);
+    const [r, g, b] = values;
+    if (r === undefined || g === undefined || b === undefined) return null;
+    return [r, g, b];
+  } catch {
+    // A CSS variable, a colour name MUI does not know, a typo in a tenant's
+    // config. The caller falls back to the theme rather than painting nothing.
+    return null;
+  }
+}
+
+function rgbToHsl([r255, g255, b255]: [number, number, number]): Hsl {
+  const [r, g, b] = [r255 / 255, g255 / 255, b255 / 255];
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  const delta = max - min;
+  if (delta === 0) return { h: 0, s: 0, l };
+  const s = delta / (1 - Math.abs(2 * l - 1));
+  return { h: hueOf(r, g, b, max, delta), s, l };
+}
+
+/** Split out so {@link rgbToHsl} stays inside the complexity bar. */
+function hueOf(r: number, g: number, b: number, max: number, delta: number): number {
+  let h: number;
+  if (max === r) h = 60 * (((g - b) / delta) % 6);
+  else if (max === g) h = 60 * ((b - r) / delta + 2);
+  else h = 60 * ((r - g) / delta + 4);
+  return (h + 360) % 360;
+}
+
+function hslToHex({ h, s, l }: Hsl): string {
+  const a = s * Math.min(l, 1 - l);
+  const channel = (n: number): string => {
+    const k = (n + h / 30) % 12;
+    const value = l - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)));
+    return Math.round(value * 255)
+      .toString(16)
+      .padStart(2, '0');
+  };
+  return `#${channel(0)}${channel(8)}${channel(4)}`;
+}
+
+const clamp01 = (value: number): number => Math.min(1, Math.max(0, value));
+
+/**
+ * The seed's companion stop: rotated toward the warm side and lightened, or —
+ * for a seed with no hue worth rotating — lightened alone.
+ */
+export function highlightOf(seed: string): string {
+  const rgb = toRgb(seed);
+  if (!rgb) return seed;
+  const { h, s, l } = rgbToHsl(rgb);
+  const lightened = clamp01(l + HIGHLIGHT_LIGHTEN);
+  if (s < HUELESS) return hslToHex({ h, s, l: lightened });
+  return hslToHex({ h: (h + HIGHLIGHT_HUE_SHIFT) % 360, s, l: lightened });
+}
+
+/** The mark's fill: the seed, running into its derived highlight. */
+export function brandGradient(seed: string): string {
+  return `linear-gradient(${GRADIENT_ANGLE}, ${seed} 0%, ${highlightOf(seed)} 100%)`;
+}
+
+/**
+ * Up to two initials for `name`, or `·` when there is nothing to take.
+ *
+ * First + last rather than first two: "Future Drink" is FD, and a one-word name
+ * still yields its single letter instead of a pair that reads as two words.
+ */
+export function initialsOf(name: string): string {
+  const parts = name.trim().split(/\s+/u).filter(Boolean);
+  if (parts.length === 0) return '·';
+  const first = parts[0]?.[0] ?? '';
+  const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? '') : '';
+  return (first + last).toUpperCase();
+}

package/src/components/navigation/AppHeader/AppHeader.details.tsx

@@ -0,0 +1,227 @@
+'use client';
+
+import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
+import React from 'react';
+
+import { accentFor } from '../../../tokens/scales';
+import { Sheet } from '../../data-display/Sheet/Sheet';
+import { Button } from '../../form/Button/Button';
+import { Dialog } from '../../feedback/Dialog/Dialog';
+
+import type {
+  AppHeaderDetailRow,
+  AppHeaderDetailsAction,
+  AppHeaderDetailsProps,
+} from './AppHeader.types';
+
+/** How wide the dialog presentation grows before it stops. */
+const DIALOG_WIDTH = 460;
+
+/**
+ * Where the smallest phones stop. The theme's scale starts at `xs`/`sm`, so
+ * there is no `xxs` breakpoint to ask for — this is that boundary, named once
+ * rather than inlined at the place it decides something.
+ */
+const XXS_MAX_WIDTH = 360;
+
+/**
+ * The sheet grows to its content and stops at the viewport; it does not take a
+ * fixed slab of height.
+ *
+ * `Sheet`'s vertical presets are absolute (`md` is 400px), which on a phone is
+ * shorter than six detail rows plus a button — so the panel scrolled INSIDE a
+ * screen that had room to spare, putting the address and the way out below the
+ * fold of a sheet using two thirds of the display. `height: auto` sizes it to
+ * what is in it, and the cap keeps a long panel on-screen: 100dvh on the
+ * smallest phones where every pixel counts, 90dvh above that so the panel still
+ * reads as a sheet over a page rather than as a new screen.
+ *
+ * `dvh` and not `vh` — mobile browser chrome makes `vh` overshoot, which would
+ * reintroduce exactly the scroll this removes.
+ */
+function sheetHeight(xxs: boolean): { height: string; maxHeight: string } {
+  return { height: 'auto', maxHeight: xxs ? '100dvh' : '90dvh' };
+}
+
+/** Which surface this viewport calls for. Lifted out to keep the component lean. */
+function usesSheet(presentation: AppHeaderDetailsProps['presentation'], compact: boolean): boolean {
+  if (presentation === 'sheet') return true;
+  if (presentation === 'dialog') return false;
+  return compact;
+}
+
+/** One label/value line. The value may wrap to two lines; the label may not. */
+const DetailRow: React.FC<{ row: AppHeaderDetailRow; last: boolean; dataTestId: string }> = ({
+  row,
+  last,
+  dataTestId,
+}) => {
+  const theme = useTheme();
+  return (
+    <Box
+      data-testid={`${dataTestId}-row`}
+      data-row={row.id ?? row.label}
+      sx={{
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        gap: 2,
+        py: 1.5,
+        borderBottom: last ? 'none' : `1px solid ${theme.palette.divider}`,
+      }}
+    >
+      <Typography variant="body1" color="text.secondary" component="span" sx={{ flex: '0 0 auto' }}>
+        {row.label}
+      </Typography>
+      <Typography
+        variant="body1"
+        component="span"
+        sx={{
+          minWidth: 0,
+          textAlign: 'right',
+          fontWeight: row.tone ? 700 : 500,
+          color: row.tone ? accentFor(theme, row.tone).main : 'text.primary',
+          // Newlines in a value are meaningful — an address is two lines.
+          whiteSpace: 'pre-line',
+        }}
+      >
+        {row.value}
+      </Typography>
+    </Box>
+  );
+};
+
+/** The rows plus whatever the caller put under them. */
+const DetailsBody: React.FC<
+  Pick<AppHeaderDetailsProps, 'rows' | 'children'> & { dataTestId: string }
+> = ({ rows, children, dataTestId }) => (
+  <Box data-testid={`${dataTestId}-body`}>
+    {(rows ?? []).map((row, index) => (
+      <DetailRow
+        key={row.id ?? row.label}
+        row={row}
+        last={index === (rows?.length ?? 0) - 1 && !children}
+        dataTestId={dataTestId}
+      />
+    ))}
+    {children}
+  </Box>
+);
+
+/**
+ * The single full-width call to action, or nothing.
+ *
+ * `padded` is for the dialog, which has no footer slot of its own — and the
+ * padding lives here rather than at the call site so an action-less panel does
+ * not end in a strip of empty space.
+ */
+const DetailsAction: React.FC<{
+  action?: AppHeaderDetailsAction;
+  dataTestId: string;
+  padded?: boolean;
+}> = ({ action, dataTestId, padded = false }) =>
+  action ? (
+    <Box sx={padded ? { pt: 2 } : undefined}>
+      <Button
+        variant="solid"
+        color={action.color ?? 'primary'}
+        size="lg"
+        fullWidth
+        disabled={action.disabled}
+        onClick={action.onClick}
+        dataTestId={action.dataTestId ?? `${dataTestId}-action`}
+      >
+        {action.label}
+      </Button>
+    </Box>
+  ) : null;
+
+/**
+ * The panel behind the header's disclosure — the hours, the address, the way
+ * out — in the shape the viewport calls for.
+ *
+ * ONE component with two presentations, because they are one thing to the user
+ * and one thing to the caller: a bottom sheet within reach of a thumb, a centred
+ * dialog under a pointer. `auto` picks by viewport, so nobody writes that branch
+ * at a call site and nobody ships a phone-shaped sheet stretched across a
+ * desktop. Force either one with `presentation` when the surrounding layout
+ * already decides (a preview frame, a story, a kiosk).
+ */
+export const AppHeaderDetails: React.FC<AppHeaderDetailsProps> = ({
+  open,
+  onClose,
+  title,
+  subtitle,
+  rows,
+  children,
+  action,
+  presentation = 'auto',
+  breakpoint = 'sm',
+  className,
+  dataTestId = 'app-header-details',
+}) => {
+  const theme = useTheme();
+  const asSheet = usesSheet(presentation, useMediaQuery(theme.breakpoints.down(breakpoint)));
+  const xxs = useMediaQuery(`(max-width:${XXS_MAX_WIDTH - 0.05}px)`);
+
+  // Split once, not per branch: a STRING subtitle is the panel's own
+  // `description` (both surfaces style it as part of their header), anything
+  // richer is a node we render ourselves above the rows.
+  const description = typeof subtitle === 'string' ? subtitle : undefined;
+  const richSubtitle = description === undefined ? subtitle : null;
+
+  const body = (
+    <DetailsBody rows={rows} dataTestId={dataTestId}>
+      {children}
+    </DetailsBody>
+  );
+  const footer = <DetailsAction action={action} dataTestId={dataTestId} />;
+
+  if (asSheet) {
+    // No `showHandle`. The grab bar promises a drag this panel does not answer:
+    // its height is its content's, so there is no second position to drag it
+    // to, and the handle sat above a ✕ that already closes it. Swipe-to-dismiss
+    // is `Sheet`'s default and still works — it just stops being advertised by
+    // a control that looked resizable and was not.
+    return (
+      <Sheet
+        open={open}
+        onClose={onClose}
+        onOpenChange={(next) => !next && onClose()}
+        position="bottom"
+        size="md"
+        style={sheetHeight(xxs)}
+        className={className}
+        title={title}
+        description={description}
+        showCloseButton
+        rounded
+        footer={footer}
+        dataTestId={dataTestId}
+      >
+        {richSubtitle}
+        {body}
+      </Sheet>
+    );
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={title}
+      description={description}
+      showCloseButton
+      fullWidth
+      className={className}
+      dataTestId={dataTestId}
+      PaperProps={{ sx: { maxWidth: DIALOG_WIDTH, borderRadius: 3 } }}
+    >
+      {richSubtitle}
+      {body}
+      <DetailsAction action={action} dataTestId={dataTestId} padded />
+    </Dialog>
+  );
+};
+
+AppHeaderDetails.displayName = 'AppHeaderDetails';

package/src/components/navigation/AppHeader/AppHeader.identity.tsx

@@ -0,0 +1,251 @@
+'use client';
+
+import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
+import { Box, Skeleton, Typography, useTheme } from '@mui/material';
+import React from 'react';
+
+import { accentFor, type SizeValue } from '../../../tokens/scales';
+
+import { AppHeaderBrand } from './AppHeader.brand';
+import type { AppHeaderIdentityProps, AppHeaderStatusProps } from './AppHeader.types';
+
+/** Title type scale, per house size step. */
+const TITLE_PX: Record<SizeValue, number> = { xs: 14, sm: 15, md: 17, lg: 20, xl: 24 };
+
+/** One line, ellipsised — a long store name must not push the actions off-screen. */
+const ONE_LINE = {
+  minWidth: 0,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+} as const;
+
+/**
+ * The dotted state line: "● Aberto agora · Retirada no balcão".
+ *
+ * Segments are joined here rather than by the caller because the separator is a
+ * presentational choice — a caller that pre-joins its own string can never be
+ * restyled, and each segment loses the chance to carry its own markup.
+ */
+export const AppHeaderStatus: React.FC<AppHeaderStatusProps> = ({
+  tone,
+  items,
+  separator = '·',
+  className,
+  dataTestId = 'app-header-status',
+}) => {
+  const theme = useTheme();
+  const visible = items.filter((item) => item !== null && item !== undefined && item !== '');
+  if (visible.length === 0) return null;
+
+  return (
+    <Box
+      className={className}
+      data-testid={dataTestId}
+      sx={{ display: 'flex', alignItems: 'center', gap: 0.75, ...ONE_LINE }}
+    >
+      {tone && (
+        <Box
+          aria-hidden
+          data-testid={`${dataTestId}-dot`}
+          sx={{
+            width: 8,
+            height: 8,
+            flex: '0 0 auto',
+            borderRadius: '50%',
+            backgroundColor: accentFor(theme, tone).main,
+          }}
+        />
+      )}
+      <Typography variant="body2" color="text.secondary" component="span" sx={ONE_LINE}>
+        {visible.map((item, index) => (
+          // Index keys: the segments are positional presentation, and nothing
+          // here reorders or is keyed on identity elsewhere.
+          <React.Fragment key={index}>
+            {index > 0 && (
+              <>
+                {/* Real spaces, not margin. A screen reader reads `textContent`,
+                    and a CSS-only gap runs "Aberto agora" straight into
+                    "Retirada no balcão" as one word. The glyph itself is
+                    hidden — it is punctuation, not something to announce. */}
+                {' '}
+                <Box component="span" aria-hidden>
+                  {separator}
+                </Box>{' '}
+              </>
+            )}
+            {item}
+          </React.Fragment>
+        ))}
+      </Typography>
+    </Box>
+  );
+};
+
+AppHeaderStatus.displayName = 'AppHeaderStatus';
+
+/** Title + chevron + the quieter lines under them. */
+const IdentityText: React.FC<
+  Pick<AppHeaderIdentityProps, 'title' | 'subtitle' | 'status' | 'size'> & {
+    interactive: boolean;
+    disclosed: boolean;
+    dataTestId: string;
+  }
+> = ({ title, subtitle, status, size = 'md', interactive, disclosed, dataTestId }) => (
+  <Box sx={{ minWidth: 0, display: 'flex', flexDirection: 'column', gap: 0.25 }}>
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, minWidth: 0 }}>
+      <Typography
+        component="span"
+        data-testid={`${dataTestId}-title`}
+        sx={{ fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE }}
+      >
+        {title}
+      </Typography>
+      {interactive && (
+        <KeyboardArrowDown
+          aria-hidden
+          data-testid={`${dataTestId}-chevron`}
+          sx={{
+            flex: '0 0 auto',
+            fontSize: 20,
+            opacity: 0.7,
+            transition: 'transform 150ms ease',
+            transform: disclosed ? 'rotate(180deg)' : 'none',
+          }}
+        />
+      )}
+    </Box>
+    {subtitle && (
+      <Typography variant="body2" color="text.secondary" component="span" sx={ONE_LINE}>
+        {subtitle}
+      </Typography>
+    )}
+    {status}
+  </Box>
+);
+
+/** The placeholder held while the identity is still resolving. */
+const IdentitySkeleton: React.FC<{ size: SizeValue; dataTestId: string }> = ({
+  size,
+  dataTestId,
+}) => (
+  <Box
+    data-testid={`${dataTestId}-loading`}
+    sx={{ display: 'flex', alignItems: 'center', gap: 1.25, minWidth: 0 }}
+  >
+    <Skeleton variant="rounded" width={40} height={40} sx={{ flex: '0 0 auto' }} />
+    <Box sx={{ minWidth: 0, flex: 1 }}>
+      <Skeleton variant="text" width={140} height={TITLE_PX[size] * 1.4} />
+      <Skeleton variant="text" width={180} height={16} />
+    </Box>
+  </Box>
+);
+
+/**
+ * Row styling shared by the static and the button rendering.
+ *
+ * `width: '100%'` is load-bearing, not cosmetic. A `<button>` sizes to
+ * max-content and — unlike the `div` the non-interactive path renders — does
+ * not stretch to fill its block container, so without it the DISCLOSING
+ * identity measured its widest possible line at every viewport: the row's
+ * right edge stayed pinned at 564px while the bar narrowed, `ONE_LINE` never
+ * had a constraint to ellipsise against, and the title and state line ran
+ * straight under the actions — 327px of overlap at 320px wide. Filling the
+ * wrapper is what lets `minWidth: 0` bite and the ellipsis engage.
+ */
+const rowSx = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 1.25,
+  width: '100%',
+  minWidth: 0,
+  textAlign: 'left',
+} as const;
+
+/**
+ * Mark + title + state line, and — when it can be opened — the whole block as
+ * one button.
+ *
+ * The button wraps EVERYTHING rather than sitting next to the title, because on
+ * a phone the chevron alone is a 20px target next to a 40px one that does
+ * nothing. A shopper aiming at the store's name expects the store's details.
+ */
+export const AppHeaderIdentity: React.FC<AppHeaderIdentityProps> = ({
+  title,
+  subtitle,
+  status,
+  mark,
+  logoUrl,
+  seedColor,
+  onDisclose,
+  disclosed = false,
+  discloseLabel,
+  loading = false,
+  size = 'md',
+  className,
+  dataTestId = 'app-header-identity',
+}) => {
+  if (loading) return <IdentitySkeleton size={size} dataTestId={dataTestId} />;
+
+  const body = (
+    <>
+      {mark ?? (
+        <AppHeaderBrand
+          name={title}
+          logoUrl={logoUrl}
+          seedColor={seedColor}
+          size={size}
+          dataTestId={`${dataTestId}-brand`}
+        />
+      )}
+      <IdentityText
+        title={title}
+        subtitle={subtitle}
+        status={status}
+        size={size}
+        interactive={Boolean(onDisclose)}
+        disclosed={disclosed}
+        dataTestId={dataTestId}
+      />
+    </>
+  );
+
+  if (!onDisclose) {
+    return (
+      <Box className={className} data-testid={dataTestId} sx={rowSx}>
+        {body}
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      component="button"
+      type="button"
+      className={className}
+      data-testid={dataTestId}
+      onClick={onDisclose}
+      aria-haspopup="dialog"
+      aria-expanded={disclosed}
+      aria-label={discloseLabel ?? `Detalhes de ${title}`}
+      sx={{
+        ...rowSx,
+        appearance: 'none',
+        p: 0.5,
+        ml: -0.5,
+        border: 'none',
+        borderRadius: 1.5,
+        background: 'none',
+        color: 'inherit',
+        font: 'inherit',
+        cursor: 'pointer',
+        '&:hover': { backgroundColor: 'action.hover' },
+        '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 2 },
+      }}
+    >
+      {body}
+    </Box>
+  );
+};
+
+AppHeaderIdentity.displayName = 'AppHeaderIdentity';

package/src/components/navigation/AppHeader/AppHeader.md

@@ -0,0 +1,138 @@
+# AppHeader
+
+The application bar, as a set of slots on one surface — plus the identity block,
+the state line and the disclosure panel that usually fill them.
+
+It is deliberately ignorant. There is no router in it, no session, no cart, no
+store: every slot is a `ReactNode` and every behaviour is a callback. That is
+what lets one bar serve a storefront, a back office and a platform console
+without any of the three leaking into the other two.
+
+```tsx
+import {
+  AppHeader,
+  AppHeaderDetails,
+  AppHeaderIdentity,
+  AppHeaderStatus,
+} from '@12-apps/ui/navigation/AppHeader';
+
+const [open, setOpen] = useState(false);
+
+<AppHeader
+  meta="Build 18"
+  actions={<Button onClick={signIn}>Entrar</Button>}
+  below={<SearchField />}
+>
+  <AppHeaderIdentity
+    title={store.name}
+    logoUrl={store.logoUrl}
+    seedColor={store.primaryColor}
+    status={<AppHeaderStatus tone="success" items={['Aberto agora', 'Retirada no balcão']} />}
+    disclosed={open}
+    onDisclose={() => setOpen(true)}
+  />
+</AppHeader>
+
+<AppHeaderDetails
+  open={open}
+  onClose={() => setOpen(false)}
+  title={store.name}
+  subtitle={store.tagline}
+  rows={[
+    { label: 'Agora', value: 'Aberto até 22h', tone: 'success' },
+    { label: 'Endereço', value: `${store.street}\n${store.district}` },
+  ]}
+  action={{ label: 'Trocar de loja', onClick: goToStorePicker }}
+/>;
+```
+
+## The parts
+
+| Component            | What it is                                                       |
+| -------------------- | ---------------------------------------------------------------- |
+| `AppHeader`          | The bar: `leading`, the identity (children), `actions`, `meta`, `below` |
+| `AppHeaderIdentity`  | Mark + title + state line, and the disclosure when it can open one |
+| `AppHeaderBrand`     | The mark alone — a logo, or initials on a gradient derived from one colour |
+| `AppHeaderStatus`    | The dotted state line: `● Aberto agora · Retirada no balcão`      |
+| `AppHeaderDetails`   | The panel behind the disclosure — a sheet on phones, a dialog on large screens |
+
+Each is exported on its own, so a bar that wants only the mark, or only the
+state line, takes just that.
+
+## One bar, every width
+
+The SURFACE always spans the viewport; the CONTENT stops at `maxWidth` (1200 by
+default) and centres. So the same element reads as a phone header and as a
+desktop one, with no breakpoint at the call site and no second component.
+
+`AppHeaderDetails` follows the same rule one level down. It is one component
+with two presentations because it is one thing to the user — a bottom sheet
+within reach of a thumb, a centred dialog under a pointer — and `presentation:
+'auto'` (the default) picks by viewport. Force it with `'sheet'` or `'dialog'`
+when the surrounding layout has already decided: a preview frame, a kiosk, a
+story.
+
+The sheet is **as tall as what is in it**, capped at the viewport — `100dvh`
+below 360px, `90dvh` above it. It does not take a fixed slab of height:
+`Sheet`'s vertical presets are absolute (`md` is 400px), which is shorter than
+six rows plus a button, so the panel scrolled INSIDE a screen that had room to
+spare and left the address and the way out below its own fold. `dvh` and not
+`vh`, because mobile browser chrome makes `vh` overshoot and would put that
+scroll straight back.
+
+It carries no grab handle either. There is no second position to drag the panel
+to now that its height is its content's, so the handle promised a resize it
+could not answer while sitting directly above a ✕ that already closes it.
+Swipe-to-dismiss is `Sheet`'s default and still works.
+
+## One brand colour is enough
+
+`seedColor` takes a single hex and the mark derives its own gradient from it, by
+rotating the seed's hue toward the warm side and lifting its lightness. With no
+seed it derives from the theme's primary instead, so an app with no per-tenant
+colour needs to pass nothing.
+
+The alternative — a second "highlight" prop — asks every caller to pick a colour
+that pairs with a colour they already picked, and in a multi-tenant app it asks
+that of people who will never see this component. A seed with no hue worth
+rotating (a grey, a black) stays grey: a hueless brand is not given a colour it
+never chose. A seed the browser cannot parse is returned untouched rather than
+throwing.
+
+## What it will not do
+
+- **Navigate.** There is no `href` on the identity. An `href` would have to guess
+  whose link component it is being handed — `to` for one router, `href` for
+  another — and would half-work for everybody. A title that navigates is one line
+  of your own router in the `leading` slot.
+- **Fetch anything.** `loading` on the identity holds a skeleton the size of the
+  real block; you decide when that is true. It exists because the obvious
+  fallback is actively wrong on a white-label storefront: painting a placeholder
+  name flashes the platform's brand for a frame on every load, on a page a
+  merchant pays for it not to appear on.
+- **Own its own open state.** `AppHeaderDetails` is controlled. The disclosure
+  and the panel are separate components precisely so the panel can live wherever
+  the layout needs it.
+
+## Accessibility
+
+- The mark is `role="img"` labelled with the name, so a screen reader says
+  "Future Drink" rather than spelling out "F D".
+- With `onDisclose`, the whole identity block is one `<button>` with
+  `aria-haspopup="dialog"` and a live `aria-expanded`. The button wraps
+  everything rather than sitting beside the title: on a phone the chevron alone
+  is a 20px target next to a 40px one that does nothing, and a shopper aiming at
+  the store's name expects the store's details.
+- The state line separates its segments with real whitespace, not CSS margin —
+  a screen reader reads `textContent`, and a margin-only gap runs "Aberto agora"
+  straight into "Retirada no balcão" as one word. The separator glyph itself is
+  `aria-hidden`: it is punctuation, not something to announce.
+- A `fixed` bar renders a spacer of its own MEASURED height. A constant cannot
+  do it — the height is whatever your slots add up to, and a search field in
+  `below` moves it — so the bar observes itself and republishes. Where
+  `ResizeObserver` does not exist (jsdom, so: your tests) it measures once
+  instead of throwing.
+
+## Props
+
+See `AppHeader.types.ts`. Every prop is documented at its declaration.

package/src/components/navigation/AppHeader/AppHeader.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import { Box } from '@mui/material';
+import React from 'react';
+
+import { withDefaults } from '../../../utils/withDefaults';
+
+import type { AppHeaderProps } from './AppHeader.types';
+
+/** Bar height, before the optional `below` row. */
+const BAR_MIN_HEIGHT = { regular: 64, dense: 52 } as const;
+
+/** The props {@link HEADER_DEFAULTS} guarantees a value for. */
+type Defaulted =
+  | 'position'
+  | 'offsetTop'
+  | 'maxWidth'
+  | 'divider'
+  | 'elevateOnScroll'
+  | 'dense'
+  | 'disableSpacer'
+  | 'dataTestId';
+
+/** `AppHeaderProps` as the body sees them: nothing defaulted is still optional. */
+type ResolvedHeaderProps = AppHeaderProps & Required<Pick<AppHeaderProps, Defaulted>>;
+
+const HEADER_DEFAULTS: Pick<ResolvedHeaderProps, Defaulted> = {
+  position: 'sticky',
+  offsetTop: 0,
+  maxWidth: 1200,
+  divider: true,
+  elevateOnScroll: false,
+  dense: false,
+  disableSpacer: false,
+  dataTestId: 'app-header',
+};
+
+/**
+ * Watch the document scroll so a lifted bar can cast a shadow only once there
+ * is something under it. Inert (and never attaches a listener) when off.
+ */
+function useScrolled(enabled: boolean): boolean {
+  const [scrolled, setScrolled] = React.useState(false);
+  React.useEffect(() => {
+    if (!enabled) return undefined;
+    const onScroll = (): void => setScrolled(window.scrollY > 0);
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, [enabled]);
+  return enabled && scrolled;
+}
+
+/**
+ * The bar's own height, republished whenever it changes.
+ *
+ * A `fixed` bar is out of flow, so something has to reserve its space — and a
+ * constant cannot, because this bar's height is whatever the caller's slots add
+ * up to. A search field in `below`, a status line, a wrapped title: each moves
+ * it, and a hard-coded spacer would leave the page's first element under the
+ * bar or floating below a gap.
+ */
+function useMeasuredHeight(enabled: boolean): [React.RefObject<HTMLElement | null>, number] {
+  const ref = React.useRef<HTMLElement | null>(null);
+  const [height, setHeight] = React.useState(0);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!enabled || !node) return undefined;
+    const measure = (): void => setHeight(node.getBoundingClientRect().height);
+    measure();
+    // Measured once unconditionally, observed only where the API exists. jsdom
+    // has no ResizeObserver, so constructing it unguarded takes down every
+    // consumer's test that happens to render a fixed bar — a crash in THEIR
+    // suite, thrown from a component they only laid out.
+    if (typeof ResizeObserver === 'undefined') return undefined;
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [enabled]);
+  return [ref, height];
+}
+
+/**
+ * The bar's own surface. Lifted out of the component both to keep it inside the
+ * complexity bar and because the positioning rules are the fiddly part: a
+ * `static` bar must claim neither a stacking context nor an offset, and only a
+ * `fixed` one needs pinning to the viewport's edges.
+ */
+function surfaceSx({
+  position,
+  offsetTop,
+  divider,
+  scrolled,
+}: Required<Pick<AppHeaderProps, 'position' | 'offsetTop' | 'divider'>> & {
+  scrolled: boolean;
+}): Record<string, unknown> {
+  return {
+    position,
+    ...(position === 'static' ? {} : { top: offsetTop, zIndex: 'appBar' }),
+    ...(position === 'fixed' ? { left: 0, right: 0 } : {}),
+    backgroundColor: 'background.paper',
+    borderBottom: divider ? 1 : 0,
+    borderColor: 'divider',
+    boxShadow: scrolled ? 2 : 0,
+    transition: 'box-shadow 150ms ease',
+  };
+}
+
+/** The trailing column: the muted note, and the actions under it. */
+const HeaderTrailing: React.FC<Pick<AppHeaderProps, 'meta' | 'actions'>> = ({ meta, actions }) => {
+  if (!meta && !actions) return null;
+  return (
+    <Box
+      sx={{
+        flex: '0 0 auto',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-end',
+        gap: 0.5,
+      }}
+    >
+      {meta && (
+        <Box
+          data-testid="app-header-meta"
+          sx={{
+            fontSize: 11,
+            fontWeight: 700,
+            letterSpacing: '0.08em',
+            textTransform: 'uppercase',
+            color: 'text.disabled',
+            lineHeight: 1,
+          }}
+        >
+          {meta}
+        </Box>
+      )}
+      {actions && (
+        <Box
+          component="nav"
+          data-testid="app-header-actions"
+          sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
+        >
+          {actions}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+/**
+ * The application bar: a row of slots on one surface, plus an optional second
+ * row that belongs to it.
+ *
+ * It knows nothing about routers, sessions, carts or stores — every slot is a
+ * `ReactNode` and every behaviour is a callback, which is what lets one bar
+ * serve a storefront, a back office and a platform console without any of them
+ * leaking into the others. Compose it with {@link AppHeaderIdentity},
+ * {@link AppHeaderStatus} and {@link AppHeaderDetails}, or put your own nodes in
+ * the slots.
+ *
+ * The SURFACE always spans the viewport while the CONTENT stops at `maxWidth`
+ * and centres, so the same bar reads as a phone header and as a desktop one
+ * without a second component or a breakpoint at the call site.
+ */
+export const AppHeader: React.FC<AppHeaderProps> = (props) => {
+  // A table of defaults rather than one per destructured prop: each `= default`
+  // is a branch, and nine of them put this component over the complexity bar
+  // before it rendered anything.
+  const {
+    leading,
+    children,
+    actions,
+    meta,
+    below,
+    position,
+    offsetTop,
+    maxWidth,
+    divider,
+    elevateOnScroll,
+    dense,
+    disableSpacer,
+    className,
+    dataTestId,
+    // True by construction — `withDefaults` fills exactly these keys — but not
+    // something TS can follow through a `Partial<T>` table.
+  } = withDefaults(props, HEADER_DEFAULTS) as ResolvedHeaderProps;
+
+  const scrolled = useScrolled(elevateOnScroll);
+  const needsSpacer = position === 'fixed' && !disableSpacer;
+  const [ref, height] = useMeasuredHeight(needsSpacer);
+
+  return (
+    <>
+      <Box
+        ref={ref}
+        component="header"
+        className={className}
+        data-testid={dataTestId}
+        sx={surfaceSx({ position, offsetTop, divider, scrolled })}
+      >
+        <Box sx={{ maxWidth, mx: 'auto', px: { xs: 2, md: 3 } }}>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: { xs: 1, md: 2 },
+              minHeight: dense ? BAR_MIN_HEIGHT.dense : BAR_MIN_HEIGHT.regular,
+              py: 1,
+            }}
+          >
+            {leading}
+            {/* The identity takes the slack and is the only part allowed to
+                shrink — the actions are targets and the meta note is already
+                the smallest thing in the bar. */}
+            <Box sx={{ flex: '1 1 auto', minWidth: 0 }}>{children}</Box>
+            <HeaderTrailing meta={meta} actions={actions} />
+          </Box>
+          {below && (
+            <Box data-testid={`${dataTestId}-below`} sx={{ pb: 1.5 }}>
+              {below}
+            </Box>
+          )}
+        </Box>
+      </Box>
+      {needsSpacer && <Box aria-hidden data-testid={`${dataTestId}-spacer`} sx={{ height }} />}
+    </>
+  );
+};
+
+AppHeader.displayName = 'AppHeader';
+
+export default AppHeader;

package/src/components/navigation/AppHeader/AppHeader.types.ts

@@ -0,0 +1,190 @@
+import type { Breakpoint } from '@mui/material/styles';
+import type { ReactNode } from 'react';
+
+import type { ColorValue, SizeValue } from '../../../tokens/scales';
+
+/**
+ * How the bar sits in the page.
+ *
+ * `fixed` lifts it out of flow, so {@link AppHeaderProps.disableSpacer} aside it
+ * also renders a spacer of its own measured height — a fixed bar with nothing
+ * reserving its space is the classic "first paragraph is under the header" bug.
+ */
+export type AppHeaderPosition = 'static' | 'sticky' | 'fixed';
+
+/** Which surface the details panel takes on this viewport. */
+export type AppHeaderDetailsPresentation = 'auto' | 'sheet' | 'dialog';
+
+/**
+ * The circular mark that opens the header: a logo when there is one, the name's
+ * initials on a derived gradient when there is not.
+ *
+ * The gradient is DERIVED from `seedColor` rather than configured, so a caller
+ * supplies one brand colour and gets a mark that belongs to it. With no seed it
+ * derives from the theme's primary, which is what makes the mark correct in an
+ * app that has no per-tenant colour at all.
+ */
+export interface AppHeaderBrandProps {
+  /** Who the mark stands for. Initials come from it, and it labels the mark. */
+  name: string;
+  /** Logo image; replaces the initials when it loads. */
+  logoUrl?: string | null;
+  /** `#RRGGBB` (or any CSS colour) to derive the gradient from. */
+  seedColor?: string | null;
+  /** @default 'md' */
+  size?: SizeValue;
+  /** @default 'circle' */
+  shape?: 'circle' | 'rounded';
+  className?: string;
+  dataTestId?: string;
+}
+
+/**
+ * The one-line state under the title — a tone dot plus segments read as a
+ * sentence ("Aberto agora · Retirada no balcão").
+ */
+export interface AppHeaderStatusProps {
+  /** The dot's colour. Omit for no dot. */
+  tone?: ColorValue;
+  /** The segments, in reading order. Empty entries are dropped. */
+  items: ReactNode[];
+  /** What goes between segments. @default '·' */
+  separator?: ReactNode;
+  className?: string;
+  dataTestId?: string;
+}
+
+/**
+ * Mark + title + status, optionally the control that discloses the details
+ * panel.
+ *
+ * There is deliberately no `href` here. A title that navigates is one line of
+ * the consumer's own router in the `leading` slot, whereas an `href` prop would
+ * have to guess whose link component it is being handed — `to` for one router,
+ * `href` for another — and would half-work for everybody. `onDisclose` is the
+ * only interaction the block owns: with it the block is a button and a chevron
+ * appears, without it the block is static text.
+ */
+export interface AppHeaderIdentityProps
+  extends Pick<AppHeaderBrandProps, 'logoUrl' | 'seedColor'> {
+  /** The name shown, and the one the mark derives its initials from. */
+  title: string;
+  /** A quieter line under the title — use `status` for the dotted state line. */
+  subtitle?: ReactNode;
+  /** The state line, usually an {@link AppHeaderStatusProps} element. */
+  status?: ReactNode;
+  /** Replaces the derived mark entirely (an icon, an `<img>`, nothing). */
+  mark?: ReactNode;
+  /** Opens the details panel. Renders the block as a button with a chevron. */
+  onDisclose?: () => void;
+  /** Whether the panel `onDisclose` opens is currently open (`aria-expanded`). */
+  disclosed?: boolean;
+  /** Accessible name of the disclosure. @default `Detalhes de {title}` */
+  discloseLabel?: string;
+  /**
+   * The identity is still being resolved — hold a skeleton the size of the real
+   * block rather than a fallback name. An app that paints a placeholder title
+   * flashes the wrong brand for a frame on every load.
+   */
+  loading?: boolean;
+  /** @default 'md' */
+  size?: SizeValue;
+  className?: string;
+  dataTestId?: string;
+}
+
+/**
+ * The bar itself: a row of slots on a surface, with an optional second row that
+ * belongs to the same surface (search, tabs, chips).
+ *
+ * Every slot is a `ReactNode`, so the header knows nothing about sessions,
+ * routers, carts or stores — it lays out what it is handed.
+ */
+export interface AppHeaderProps {
+  /** Before the identity: a back arrow, a menu toggle, a logo. */
+  leading?: ReactNode;
+  /** The identity block. Usually an `AppHeaderIdentity`. */
+  children?: ReactNode;
+  /** Trailing controls: sign-in, cart, account avatar. */
+  actions?: ReactNode;
+  /**
+   * A small muted note pinned to the top-right corner above `actions` — a build
+   * tag, an environment name. Hidden from assistive tech is NOT the default: if
+   * it is worth showing it is worth reading.
+   */
+  meta?: ReactNode;
+  /** A second row inside the same surface: a search field, tabs, filter chips. */
+  below?: ReactNode;
+  /** @default 'sticky' */
+  position?: AppHeaderPosition;
+  /**
+   * A CSS length the bar offsets itself by when `sticky`/`fixed` — for whatever
+   * already occupies the top of the viewport (an impersonation banner, an
+   * offline bar). Accepts a `var(--x, 0px)` so the offset can be published by
+   * the element itself. @default 0
+   */
+  offsetTop?: number | string;
+  /**
+   * How wide the content may grow before it stops and centres. This is what
+   * makes one bar work on a phone and on a desktop: the surface still spans the
+   * viewport, the content does not. @default 1200
+   */
+  maxWidth?: number | string;
+  /** Draw the bottom border. @default true */
+  divider?: boolean;
+  /** Raise a shadow once the page has scrolled under the bar. @default false */
+  elevateOnScroll?: boolean;
+  /** Tighter vertical rhythm, for a bar with no status line. @default false */
+  dense?: boolean;
+  /** Skip the flow spacer a `fixed` bar renders. @default false */
+  disableSpacer?: boolean;
+  className?: string;
+  dataTestId?: string;
+}
+
+/** One label/value line in the details panel. */
+export interface AppHeaderDetailRow {
+  /** Stable key; falls back to the label. */
+  id?: string;
+  label: string;
+  value: ReactNode;
+  /** Accent the value ("Aberto até 22h" in success green). */
+  tone?: ColorValue;
+}
+
+/** The details panel's single full-width call to action. */
+export interface AppHeaderDetailsAction {
+  label: string;
+  onClick: () => void;
+  /** @default 'primary' */
+  color?: ColorValue;
+  disabled?: boolean;
+  dataTestId?: string;
+}
+
+/**
+ * The panel the identity's disclosure opens.
+ *
+ * It is ONE component with two presentations because they are one thing to the
+ * user: a bottom sheet where the thumb is, a centred dialog where the pointer
+ * is. `presentation: 'auto'` picks by viewport so a caller never writes that
+ * branch — and never ships a phone-sized sheet stretched across a desktop.
+ */
+export interface AppHeaderDetailsProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  subtitle?: ReactNode;
+  /** The label/value lines. Rendered above `children`. */
+  rows?: AppHeaderDetailRow[];
+  /** Anything the rows cannot express — a map, a note, a list. */
+  children?: ReactNode;
+  /** The single full-width action at the foot of the panel. */
+  action?: AppHeaderDetailsAction;
+  /** @default 'auto' */
+  presentation?: AppHeaderDetailsPresentation;
+  /** Below this breakpoint `auto` chooses the sheet. @default 'sm' */
+  breakpoint?: Breakpoint;
+  className?: string;
+  dataTestId?: string;
+}

package/src/components/navigation/AppHeader/index.ts

@@ -0,0 +1,16 @@
+export { AppHeader, default } from './AppHeader';
+export { AppHeaderBrand } from './AppHeader.brand';
+export { AppHeaderDetails } from './AppHeader.details';
+export { AppHeaderIdentity, AppHeaderStatus } from './AppHeader.identity';
+export { brandGradient, highlightOf, initialsOf } from './AppHeader.colors';
+export type {
+  AppHeaderBrandProps,
+  AppHeaderDetailRow,
+  AppHeaderDetailsAction,
+  AppHeaderDetailsPresentation,
+  AppHeaderDetailsProps,
+  AppHeaderIdentityProps,
+  AppHeaderPosition,
+  AppHeaderProps,
+  AppHeaderStatusProps,
+} from './AppHeader.types';

package/src/components/navigation/index.ts

@@ -1,3 +1,4 @@
+export * from './AppHeader';
 export * from './Breadcrumbs/Breadcrumbs';
 export * from './CommandPalette';
 export * from './ContextMenu';