@12-apps/ui 5.0.0 → 5.0.1

package/dist/navigation/AppHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/navigation/AppHeader/AppHeader.tsx","../../src/components/navigation/AppHeader/AppHeader.brand.tsx","../../src/components/navigation/AppHeader/AppHeader.colors.ts","../../src/components/navigation/AppHeader/AppHeader.details.tsx","../../src/components/navigation/AppHeader/AppHeader.identity.tsx"],"sourcesContent":["'use client';\n\nimport { Box } from '@mui/material';\nimport React from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport type { AppHeaderProps } from './AppHeader.types';\n\n/** Bar height, before the optional `below` row. */\nconst BAR_MIN_HEIGHT = { regular: 64, dense: 52 } as const;\n\n/** The props {@link HEADER_DEFAULTS} guarantees a value for. */\ntype Defaulted =\n  | 'position'\n  | 'offsetTop'\n  | 'maxWidth'\n  | 'divider'\n  | 'elevateOnScroll'\n  | 'dense'\n  | 'disableSpacer'\n  | 'dataTestId';\n\n/** `AppHeaderProps` as the body sees them: nothing defaulted is still optional. */\ntype ResolvedHeaderProps = AppHeaderProps & Required<Pick<AppHeaderProps, Defaulted>>;\n\nconst HEADER_DEFAULTS: Pick<ResolvedHeaderProps, Defaulted> = {\n  position: 'sticky',\n  offsetTop: 0,\n  maxWidth: 1200,\n  divider: true,\n  elevateOnScroll: false,\n  dense: false,\n  disableSpacer: false,\n  dataTestId: 'app-header',\n};\n\n/**\n * Watch the document scroll so a lifted bar can cast a shadow only once there\n * is something under it. Inert (and never attaches a listener) when off.\n */\nfunction useScrolled(enabled: boolean): boolean {\n  const [scrolled, setScrolled] = React.useState(false);\n  React.useEffect(() => {\n    if (!enabled) return undefined;\n    const onScroll = (): void => setScrolled(window.scrollY > 0);\n    onScroll();\n    window.addEventListener('scroll', onScroll, { passive: true });\n    return () => window.removeEventListener('scroll', onScroll);\n  }, [enabled]);\n  return enabled && scrolled;\n}\n\n/**\n * The bar's own height, republished whenever it changes.\n *\n * A `fixed` bar is out of flow, so something has to reserve its space — and a\n * constant cannot, because this bar's height is whatever the caller's slots add\n * up to. A search field in `below`, a status line, a wrapped title: each moves\n * it, and a hard-coded spacer would leave the page's first element under the\n * bar or floating below a gap.\n */\nfunction useMeasuredHeight(enabled: boolean): [React.RefObject<HTMLElement | null>, number] {\n  const ref = React.useRef<HTMLElement | null>(null);\n  const [height, setHeight] = React.useState(0);\n  React.useEffect(() => {\n    const node = ref.current;\n    if (!enabled || !node) return undefined;\n    const measure = (): void => setHeight(node.getBoundingClientRect().height);\n    measure();\n    // Measured once unconditionally, observed only where the API exists. jsdom\n    // has no ResizeObserver, so constructing it unguarded takes down every\n    // consumer's test that happens to render a fixed bar — a crash in THEIR\n    // suite, thrown from a component they only laid out.\n    if (typeof ResizeObserver === 'undefined') return undefined;\n    const observer = new ResizeObserver(measure);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [enabled]);\n  return [ref, height];\n}\n\n/**\n * The bar's own surface. Lifted out of the component both to keep it inside the\n * complexity bar and because the positioning rules are the fiddly part: a\n * `static` bar must claim neither a stacking context nor an offset, and only a\n * `fixed` one needs pinning to the viewport's edges.\n */\nfunction surfaceSx({\n  position,\n  offsetTop,\n  divider,\n  scrolled,\n}: Required<Pick<AppHeaderProps, 'position' | 'offsetTop' | 'divider'>> & {\n  scrolled: boolean;\n}): Record<string, unknown> {\n  return {\n    position,\n    ...(position === 'static' ? {} : { top: offsetTop, zIndex: 'appBar' }),\n    ...(position === 'fixed' ? { left: 0, right: 0 } : {}),\n    backgroundColor: 'background.paper',\n    borderBottom: divider ? 1 : 0,\n    borderColor: 'divider',\n    boxShadow: scrolled ? 2 : 0,\n    transition: 'box-shadow 150ms ease',\n  };\n}\n\n/** The trailing column: the muted note, and the actions under it. */\nconst HeaderTrailing: React.FC<Pick<AppHeaderProps, 'meta' | 'actions'>> = ({ meta, actions }) => {\n  if (!meta && !actions) return null;\n  return (\n    <Box\n      sx={{\n        flex: '0 0 auto',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-end',\n        gap: 0.5,\n      }}\n    >\n      {meta && (\n        <Box\n          data-testid=\"app-header-meta\"\n          sx={{\n            fontSize: 11,\n            fontWeight: 700,\n            letterSpacing: '0.08em',\n            textTransform: 'uppercase',\n            color: 'text.disabled',\n            lineHeight: 1,\n          }}\n        >\n          {meta}\n        </Box>\n      )}\n      {actions && (\n        <Box\n          component=\"nav\"\n          data-testid=\"app-header-actions\"\n          sx={{ display: 'flex', alignItems: 'center', gap: 1 }}\n        >\n          {actions}\n        </Box>\n      )}\n    </Box>\n  );\n};\n\n/**\n * The application bar: a row of slots on one surface, plus an optional second\n * row that belongs to it.\n *\n * It knows nothing about routers, sessions, carts or stores — every slot is a\n * `ReactNode` and every behaviour is a callback, which is what lets one bar\n * serve a storefront, a back office and a platform console without any of them\n * leaking into the others. Compose it with {@link AppHeaderIdentity},\n * {@link AppHeaderStatus} and {@link AppHeaderDetails}, or put your own nodes in\n * the slots.\n *\n * The SURFACE always spans the viewport while the CONTENT stops at `maxWidth`\n * and centres, so the same bar reads as a phone header and as a desktop one\n * without a second component or a breakpoint at the call site.\n */\nexport const AppHeader: React.FC<AppHeaderProps> = (props) => {\n  // A table of defaults rather than one per destructured prop: each `= default`\n  // is a branch, and nine of them put this component over the complexity bar\n  // before it rendered anything.\n  const {\n    leading,\n    children,\n    actions,\n    meta,\n    below,\n    position,\n    offsetTop,\n    maxWidth,\n    divider,\n    elevateOnScroll,\n    dense,\n    disableSpacer,\n    className,\n    dataTestId,\n    // True by construction — `withDefaults` fills exactly these keys — but not\n    // something TS can follow through a `Partial<T>` table.\n  } = withDefaults(props, HEADER_DEFAULTS) as ResolvedHeaderProps;\n\n  const scrolled = useScrolled(elevateOnScroll);\n  const needsSpacer = position === 'fixed' && !disableSpacer;\n  const [ref, height] = useMeasuredHeight(needsSpacer);\n\n  return (\n    <>\n      <Box\n        ref={ref}\n        component=\"header\"\n        className={className}\n        data-testid={dataTestId}\n        sx={surfaceSx({ position, offsetTop, divider, scrolled })}\n      >\n        <Box sx={{ maxWidth, mx: 'auto', px: { xs: 2, md: 3 } }}>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: { xs: 1, md: 2 },\n              minHeight: dense ? BAR_MIN_HEIGHT.dense : BAR_MIN_HEIGHT.regular,\n              py: 1,\n            }}\n          >\n            {leading}\n            {/* The identity takes the slack and is the only part allowed to\n                shrink — the actions are targets and the meta note is already\n                the smallest thing in the bar. */}\n            <Box sx={{ flex: '1 1 auto', minWidth: 0 }}>{children}</Box>\n            <HeaderTrailing meta={meta} actions={actions} />\n          </Box>\n          {below && (\n            <Box data-testid={`${dataTestId}-below`} sx={{ pb: 1.5 }}>\n              {below}\n            </Box>\n          )}\n        </Box>\n      </Box>\n      {needsSpacer && <Box aria-hidden data-testid={`${dataTestId}-spacer`} sx={{ height }} />}\n    </>\n  );\n};\n\nAppHeader.displayName = 'AppHeader';\n\nexport default AppHeader;\n","'use client';\n\nimport { Box, useTheme } from '@mui/material';\nimport type { Theme } from '@mui/material';\nimport React from 'react';\n\nimport type { SizeValue } from '../../../tokens/scales';\n\nimport { brandGradient, initialsOf } from './AppHeader.colors';\nimport type { AppHeaderBrandProps } from './AppHeader.types';\n\n/** The mark's edge, per house size step. */\nconst MARK_PX: Record<SizeValue, number> = { xs: 24, sm: 32, md: 40, lg: 48, xl: 56 };\n\n/** Initials are set at 40% of the mark so a two-letter pair never touches the edge. */\nconst INITIALS_RATIO = 0.4;\n\n/** The mark's box, lifted out of the component to keep it inside the complexity bar. */\nfunction markSx(\n  theme: Theme,\n  { edge, round, showLogo, seed }: { edge: number; round: boolean; showLogo: boolean; seed: string },\n): Record<string, unknown> {\n  return {\n    width: edge,\n    height: edge,\n    flex: '0 0 auto',\n    overflow: 'hidden',\n    borderRadius: round ? '50%' : '30%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    // Only the initials need the gradient; a logo covers it entirely, and\n    // painting it underneath would show at the corners of a transparent PNG.\n    backgroundImage: showLogo ? 'none' : brandGradient(seed),\n    backgroundColor: showLogo ? theme.palette.action.hover : 'transparent',\n    color: theme.palette.getContrastText(seed),\n    fontSize: Math.round(edge * INITIALS_RATIO),\n    fontWeight: 700,\n    lineHeight: 1,\n    letterSpacing: '0.02em',\n    userSelect: 'none',\n  };\n}\n\n/**\n * The mark that opens the header: the logo when there is one, the name's\n * initials on a gradient derived from the brand colour when there is not.\n *\n * Both branches occupy the SAME box, so a header does not resize when a logo\n * arrives — or when one fails to load and the initials take over, which is the\n * case a plain `<img>` renders as a torn-page glyph beside the store's name.\n */\nexport const AppHeaderBrand: React.FC<AppHeaderBrandProps> = ({\n  name,\n  logoUrl,\n  seedColor,\n  size = 'md',\n  shape = 'rounded',\n  className,\n  dataTestId = 'app-header-brand',\n}) => {\n  const theme = useTheme();\n  const [broken, setBroken] = React.useState(false);\n  // Keyed on the URL so a store that swaps its logo gets a fresh attempt rather\n  // than inheriting the previous one's failure.\n  React.useEffect(() => setBroken(false), [logoUrl]);\n\n  const edge = MARK_PX[size];\n  const seed = seedColor || theme.palette.primary.main;\n  const showLogo = Boolean(logoUrl) && !broken;\n\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      // `role=\"img\"` + the name: the initials are a picture of the brand, not\n      // two letters a screen reader should spell out.\n      role=\"img\"\n      aria-label={name}\n      sx={markSx(theme, { edge, round: shape === 'circle', showLogo, seed })}\n    >\n      {showLogo ? (\n        <Box\n          component=\"img\"\n          src={logoUrl ?? undefined}\n          alt=\"\"\n          onError={() => setBroken(true)}\n          data-testid={`${dataTestId}-logo`}\n          sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}\n        />\n      ) : (\n        <Box component=\"span\" aria-hidden data-testid={`${dataTestId}-initials`}>\n          {initialsOf(name)}\n        </Box>\n      )}\n    </Box>\n  );\n};\n\nAppHeaderBrand.displayName = 'AppHeaderBrand';\n\nexport default AppHeaderBrand;\n","import { decomposeColor } from '@mui/material';\n\n/**\n * Turning ONE brand colour into the mark's fill.\n *\n * The alternative — a second \"highlight\" prop — reads reasonable and is a trap:\n * it asks every caller to pick a colour that pairs with a colour they already\n * picked, and a multi-tenant app asks that of people who will never see this\n * component. Most would leave it unset, some would set it to the same value\n * (a gradient that is a flat fill), and the rest would get a pairing nobody\n * checked. So the highlight is DERIVED, and a store configures one hex.\n *\n * The derivation moves the seed's HUE rather than only its lightness. A\n * lighten-only gradient reads as a lit sphere — the same effect at every seed,\n * and a weak one at the light end where there is little room left to lighten.\n * Rotating toward the warm side gives the mark a direction the eye follows, and\n * because the rotation is fixed the two stops stay recognisably one colour.\n */\n\n/** Degrees the highlight is rotated from the seed. Warm, and short of a clash. */\nconst HIGHLIGHT_HUE_SHIFT = 42;\n\n/** The highlight sits this much lighter than the seed. */\nconst HIGHLIGHT_LIGHTEN = 0.12;\n\n/**\n * A near-grey seed has no hue to rotate, so rotating it produces the same grey\n * twice. Below this saturation the mark falls back to a lightness-only ramp,\n * which is the honest rendering of \"this brand has no colour\".\n */\nconst HUELESS = 0.08;\n\n/** The angle light appears to come from — matches the house elevation. */\nconst GRADIENT_ANGLE = '135deg';\n\ninterface Hsl {\n  h: number;\n  s: number;\n  l: number;\n}\n\n/** `[r, g, b]` in 0–255 from any CSS colour MUI can parse, or `null`. */\nfunction toRgb(color: string): [number, number, number] | null {\n  try {\n    const { values } = decomposeColor(color);\n    const [r, g, b] = values;\n    if (r === undefined || g === undefined || b === undefined) return null;\n    return [r, g, b];\n  } catch {\n    // A CSS variable, a colour name MUI does not know, a typo in a tenant's\n    // config. The caller falls back to the theme rather than painting nothing.\n    return null;\n  }\n}\n\nfunction rgbToHsl([r255, g255, b255]: [number, number, number]): Hsl {\n  const [r, g, b] = [r255 / 255, g255 / 255, b255 / 255];\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  const l = (max + min) / 2;\n  const delta = max - min;\n  if (delta === 0) return { h: 0, s: 0, l };\n  const s = delta / (1 - Math.abs(2 * l - 1));\n  return { h: hueOf(r, g, b, max, delta), s, l };\n}\n\n/** Split out so {@link rgbToHsl} stays inside the complexity bar. */\nfunction hueOf(r: number, g: number, b: number, max: number, delta: number): number {\n  let h: number;\n  if (max === r) h = 60 * (((g - b) / delta) % 6);\n  else if (max === g) h = 60 * ((b - r) / delta + 2);\n  else h = 60 * ((r - g) / delta + 4);\n  return (h + 360) % 360;\n}\n\nfunction hslToHex({ h, s, l }: Hsl): string {\n  const a = s * Math.min(l, 1 - l);\n  const channel = (n: number): string => {\n    const k = (n + h / 30) % 12;\n    const value = l - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)));\n    return Math.round(value * 255)\n      .toString(16)\n      .padStart(2, '0');\n  };\n  return `#${channel(0)}${channel(8)}${channel(4)}`;\n}\n\nconst clamp01 = (value: number): number => Math.min(1, Math.max(0, value));\n\n/**\n * The seed's companion stop: rotated toward the warm side and lightened, or —\n * for a seed with no hue worth rotating — lightened alone.\n */\nexport function highlightOf(seed: string): string {\n  const rgb = toRgb(seed);\n  if (!rgb) return seed;\n  const { h, s, l } = rgbToHsl(rgb);\n  const lightened = clamp01(l + HIGHLIGHT_LIGHTEN);\n  if (s < HUELESS) return hslToHex({ h, s, l: lightened });\n  return hslToHex({ h: (h + HIGHLIGHT_HUE_SHIFT) % 360, s, l: lightened });\n}\n\n/** The mark's fill: the seed, running into its derived highlight. */\nexport function brandGradient(seed: string): string {\n  return `linear-gradient(${GRADIENT_ANGLE}, ${seed} 0%, ${highlightOf(seed)} 100%)`;\n}\n\n/**\n * Up to two initials for `name`, or `·` when there is nothing to take.\n *\n * First + last rather than first two: \"Future Drink\" is FD, and a one-word name\n * still yields its single letter instead of a pair that reads as two words.\n */\nexport function initialsOf(name: string): string {\n  const parts = name.trim().split(/\\s+/u).filter(Boolean);\n  if (parts.length === 0) return '·';\n  const first = parts[0]?.[0] ?? '';\n  const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? '') : '';\n  return (first + last).toUpperCase();\n}\n","'use client';\n\nimport { Box, Typography, useMediaQuery, useTheme } from '@mui/material';\nimport React from 'react';\n\nimport { accentFor } from '../../../tokens/scales';\nimport { Sheet } from '../../data-display/Sheet/Sheet';\nimport { Button } from '../../form/Button/Button';\nimport { Dialog } from '../../feedback/Dialog/Dialog';\n\nimport type {\n  AppHeaderDetailRow,\n  AppHeaderDetailsAction,\n  AppHeaderDetailsProps,\n} from './AppHeader.types';\n\n/** How wide the dialog presentation grows before it stops. */\nconst DIALOG_WIDTH = 460;\n\n/**\n * Where the smallest phones stop. The theme's scale starts at `xs`/`sm`, so\n * there is no `xxs` breakpoint to ask for — this is that boundary, named once\n * rather than inlined at the place it decides something.\n */\nconst XXS_MAX_WIDTH = 360;\n\n/**\n * The sheet grows to its content and stops at the viewport; it does not take a\n * fixed slab of height.\n *\n * `Sheet`'s vertical presets are absolute (`md` is 400px), which on a phone is\n * shorter than six detail rows plus a button — so the panel scrolled INSIDE a\n * screen that had room to spare, putting the address and the way out below the\n * fold of a sheet using two thirds of the display. `height: auto` sizes it to\n * what is in it, and the cap keeps a long panel on-screen: 100dvh on the\n * smallest phones where every pixel counts, 90dvh above that so the panel still\n * reads as a sheet over a page rather than as a new screen.\n *\n * `dvh` and not `vh` — mobile browser chrome makes `vh` overshoot, which would\n * reintroduce exactly the scroll this removes.\n */\nfunction sheetHeight(xxs: boolean): { height: string; maxHeight: string } {\n  return { height: 'auto', maxHeight: xxs ? '100dvh' : '90dvh' };\n}\n\n/** Which surface this viewport calls for. Lifted out to keep the component lean. */\nfunction usesSheet(presentation: AppHeaderDetailsProps['presentation'], compact: boolean): boolean {\n  if (presentation === 'sheet') return true;\n  if (presentation === 'dialog') return false;\n  return compact;\n}\n\n/** One label/value line. The value may wrap to two lines; the label may not. */\nconst DetailRow: React.FC<{ row: AppHeaderDetailRow; last: boolean; dataTestId: string }> = ({\n  row,\n  last,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n  return (\n    <Box\n      data-testid={`${dataTestId}-row`}\n      data-row={row.id ?? row.label}\n      sx={{\n        display: 'flex',\n        alignItems: 'flex-start',\n        justifyContent: 'space-between',\n        gap: 2,\n        py: 1.5,\n        borderBottom: last ? 'none' : `1px solid ${theme.palette.divider}`,\n      }}\n    >\n      <Typography variant=\"body1\" color=\"text.secondary\" component=\"span\" sx={{ flex: '0 0 auto' }}>\n        {row.label}\n      </Typography>\n      <Typography\n        variant=\"body1\"\n        component=\"span\"\n        sx={{\n          minWidth: 0,\n          textAlign: 'right',\n          fontWeight: row.tone ? 700 : 500,\n          color: row.tone ? accentFor(theme, row.tone).main : 'text.primary',\n          // Newlines in a value are meaningful — an address is two lines.\n          whiteSpace: 'pre-line',\n        }}\n      >\n        {row.value}\n      </Typography>\n    </Box>\n  );\n};\n\n/** The rows plus whatever the caller put under them. */\nconst DetailsBody: React.FC<\n  Pick<AppHeaderDetailsProps, 'rows' | 'children'> & { dataTestId: string }\n> = ({ rows, children, dataTestId }) => (\n  <Box data-testid={`${dataTestId}-body`}>\n    {(rows ?? []).map((row, index) => (\n      <DetailRow\n        key={row.id ?? row.label}\n        row={row}\n        last={index === (rows?.length ?? 0) - 1 && !children}\n        dataTestId={dataTestId}\n      />\n    ))}\n    {children}\n  </Box>\n);\n\n/**\n * The single full-width call to action, or nothing.\n *\n * `padded` is for the dialog, which has no footer slot of its own — and the\n * padding lives here rather than at the call site so an action-less panel does\n * not end in a strip of empty space.\n */\nconst DetailsAction: React.FC<{\n  action?: AppHeaderDetailsAction;\n  dataTestId: string;\n  padded?: boolean;\n}> = ({ action, dataTestId, padded = false }) =>\n  action ? (\n    <Box sx={padded ? { pt: 2 } : undefined}>\n      <Button\n        variant=\"solid\"\n        color={action.color ?? 'primary'}\n        size=\"lg\"\n        fullWidth\n        disabled={action.disabled}\n        onClick={action.onClick}\n        dataTestId={action.dataTestId ?? `${dataTestId}-action`}\n      >\n        {action.label}\n      </Button>\n    </Box>\n  ) : null;\n\n/**\n * The panel behind the header's disclosure — the hours, the address, the way\n * out — in the shape the viewport calls for.\n *\n * ONE component with two presentations, because they are one thing to the user\n * and one thing to the caller: a bottom sheet within reach of a thumb, a centred\n * dialog under a pointer. `auto` picks by viewport, so nobody writes that branch\n * at a call site and nobody ships a phone-shaped sheet stretched across a\n * desktop. Force either one with `presentation` when the surrounding layout\n * already decides (a preview frame, a story, a kiosk).\n */\nexport const AppHeaderDetails: React.FC<AppHeaderDetailsProps> = ({\n  open,\n  onClose,\n  title,\n  subtitle,\n  rows,\n  children,\n  action,\n  presentation = 'auto',\n  breakpoint = 'sm',\n  className,\n  dataTestId = 'app-header-details',\n}) => {\n  const theme = useTheme();\n  const asSheet = usesSheet(presentation, useMediaQuery(theme.breakpoints.down(breakpoint)));\n  const xxs = useMediaQuery(`(max-width:${XXS_MAX_WIDTH - 0.05}px)`);\n\n  // Split once, not per branch: a STRING subtitle is the panel's own\n  // `description` (both surfaces style it as part of their header), anything\n  // richer is a node we render ourselves above the rows.\n  const description = typeof subtitle === 'string' ? subtitle : undefined;\n  const richSubtitle = description === undefined ? subtitle : null;\n\n  const body = (\n    <DetailsBody rows={rows} dataTestId={dataTestId}>\n      {children}\n    </DetailsBody>\n  );\n  const footer = <DetailsAction action={action} dataTestId={dataTestId} />;\n\n  if (asSheet) {\n    // No `showHandle`. The grab bar promises a drag this panel does not answer:\n    // its height is its content's, so there is no second position to drag it\n    // to, and the handle sat above a ✕ that already closes it. Swipe-to-dismiss\n    // is `Sheet`'s default and still works — it just stops being advertised by\n    // a control that looked resizable and was not.\n    return (\n      <Sheet\n        open={open}\n        onClose={onClose}\n        onOpenChange={(next) => !next && onClose()}\n        position=\"bottom\"\n        size=\"md\"\n        style={sheetHeight(xxs)}\n        className={className}\n        title={title}\n        description={description}\n        showCloseButton\n        rounded\n        footer={footer}\n        dataTestId={dataTestId}\n      >\n        {richSubtitle}\n        {body}\n      </Sheet>\n    );\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onClose={onClose}\n      title={title}\n      description={description}\n      showCloseButton\n      fullWidth\n      className={className}\n      dataTestId={dataTestId}\n      PaperProps={{ sx: { maxWidth: DIALOG_WIDTH, borderRadius: 3 } }}\n    >\n      {richSubtitle}\n      {body}\n      <DetailsAction action={action} dataTestId={dataTestId} padded />\n    </Dialog>\n  );\n};\n\nAppHeaderDetails.displayName = 'AppHeaderDetails';\n","'use client';\n\nimport KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';\nimport { Box, Skeleton, Typography, useTheme } from '@mui/material';\nimport React from 'react';\n\nimport { accentFor, type SizeValue } from '../../../tokens/scales';\n\nimport { AppHeaderBrand } from './AppHeader.brand';\nimport type { AppHeaderIdentityProps, AppHeaderStatusProps } from './AppHeader.types';\n\n/** Title type scale, per house size step. */\nconst TITLE_PX: Record<SizeValue, number> = { xs: 14, sm: 15, md: 17, lg: 20, xl: 24 };\n\n/** One line, ellipsised — a long store name must not push the actions off-screen. */\nconst ONE_LINE = {\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n} as const;\n\n/**\n * The dotted state line: \"● Aberto agora · Retirada no balcão\".\n *\n * Segments are joined here rather than by the caller because the separator is a\n * presentational choice — a caller that pre-joins its own string can never be\n * restyled, and each segment loses the chance to carry its own markup.\n */\nexport const AppHeaderStatus: React.FC<AppHeaderStatusProps> = ({\n  tone,\n  items,\n  separator = '·',\n  className,\n  dataTestId = 'app-header-status',\n}) => {\n  const theme = useTheme();\n  const visible = items.filter((item) => item !== null && item !== undefined && item !== '');\n  if (visible.length === 0) return null;\n\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      sx={{ display: 'flex', alignItems: 'center', gap: 0.75, ...ONE_LINE }}\n    >\n      {tone && (\n        <Box\n          aria-hidden\n          data-testid={`${dataTestId}-dot`}\n          sx={{\n            width: 8,\n            height: 8,\n            flex: '0 0 auto',\n            borderRadius: '50%',\n            backgroundColor: accentFor(theme, tone).main,\n          }}\n        />\n      )}\n      <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\" sx={ONE_LINE}>\n        {visible.map((item, index) => (\n          // Index keys: the segments are positional presentation, and nothing\n          // here reorders or is keyed on identity elsewhere.\n          <React.Fragment key={index}>\n            {index > 0 && (\n              <>\n                {/* Real spaces, not margin. A screen reader reads `textContent`,\n                    and a CSS-only gap runs \"Aberto agora\" straight into\n                    \"Retirada no balcão\" as one word. The glyph itself is\n                    hidden — it is punctuation, not something to announce. */}\n                {' '}\n                <Box component=\"span\" aria-hidden>\n                  {separator}\n                </Box>{' '}\n              </>\n            )}\n            {item}\n          </React.Fragment>\n        ))}\n      </Typography>\n    </Box>\n  );\n};\n\nAppHeaderStatus.displayName = 'AppHeaderStatus';\n\n/** Title + chevron + the quieter lines under them. */\nconst IdentityText: React.FC<\n  Pick<AppHeaderIdentityProps, 'title' | 'subtitle' | 'status' | 'size'> & {\n    interactive: boolean;\n    disclosed: boolean;\n    dataTestId: string;\n  }\n> = ({ title, subtitle, status, size = 'md', interactive, disclosed, dataTestId }) => (\n  <Box sx={{ minWidth: 0, display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, minWidth: 0 }}>\n      <Typography\n        component=\"span\"\n        data-testid={`${dataTestId}-title`}\n        sx={{ fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE }}\n      >\n        {title}\n      </Typography>\n      {interactive && (\n        <KeyboardArrowDown\n          aria-hidden\n          data-testid={`${dataTestId}-chevron`}\n          sx={{\n            flex: '0 0 auto',\n            fontSize: 20,\n            opacity: 0.7,\n            transition: 'transform 150ms ease',\n            transform: disclosed ? 'rotate(180deg)' : 'none',\n          }}\n        />\n      )}\n    </Box>\n    {subtitle && (\n      <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\" sx={ONE_LINE}>\n        {subtitle}\n      </Typography>\n    )}\n    {status}\n  </Box>\n);\n\n/** The placeholder held while the identity is still resolving. */\nconst IdentitySkeleton: React.FC<{ size: SizeValue; dataTestId: string }> = ({\n  size,\n  dataTestId,\n}) => (\n  <Box\n    data-testid={`${dataTestId}-loading`}\n    sx={{ display: 'flex', alignItems: 'center', gap: 1.25, minWidth: 0 }}\n  >\n    <Skeleton variant=\"rounded\" width={40} height={40} sx={{ flex: '0 0 auto' }} />\n    <Box sx={{ minWidth: 0, flex: 1 }}>\n      <Skeleton variant=\"text\" width={140} height={TITLE_PX[size] * 1.4} />\n      <Skeleton variant=\"text\" width={180} height={16} />\n    </Box>\n  </Box>\n);\n\n/**\n * Row styling shared by the static and the button rendering.\n *\n * `width: '100%'` is load-bearing, not cosmetic. A `<button>` sizes to\n * max-content and — unlike the `div` the non-interactive path renders — does\n * not stretch to fill its block container, so without it the DISCLOSING\n * identity measured its widest possible line at every viewport: the row's\n * right edge stayed pinned at 564px while the bar narrowed, `ONE_LINE` never\n * had a constraint to ellipsise against, and the title and state line ran\n * straight under the actions — 327px of overlap at 320px wide. Filling the\n * wrapper is what lets `minWidth: 0` bite and the ellipsis engage.\n */\nconst rowSx = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 1.25,\n  width: '100%',\n  minWidth: 0,\n  textAlign: 'left',\n} as const;\n\n/**\n * Mark + title + state line, and — when it can be opened — the whole block as\n * one button.\n *\n * The button wraps EVERYTHING rather than sitting next to the title, because on\n * a phone the chevron alone is a 20px target next to a 40px one that does\n * nothing. A shopper aiming at the store's name expects the store's details.\n */\nexport const AppHeaderIdentity: React.FC<AppHeaderIdentityProps> = ({\n  title,\n  subtitle,\n  status,\n  mark,\n  logoUrl,\n  seedColor,\n  onDisclose,\n  disclosed = false,\n  discloseLabel,\n  loading = false,\n  size = 'md',\n  className,\n  dataTestId = 'app-header-identity',\n}) => {\n  if (loading) return <IdentitySkeleton size={size} dataTestId={dataTestId} />;\n\n  const body = (\n    <>\n      {mark ?? (\n        <AppHeaderBrand\n          name={title}\n          logoUrl={logoUrl}\n          seedColor={seedColor}\n          size={size}\n          dataTestId={`${dataTestId}-brand`}\n        />\n      )}\n      <IdentityText\n        title={title}\n        subtitle={subtitle}\n        status={status}\n        size={size}\n        interactive={Boolean(onDisclose)}\n        disclosed={disclosed}\n        dataTestId={dataTestId}\n      />\n    </>\n  );\n\n  if (!onDisclose) {\n    return (\n      <Box className={className} data-testid={dataTestId} sx={rowSx}>\n        {body}\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      className={className}\n      data-testid={dataTestId}\n      onClick={onDisclose}\n      aria-haspopup=\"dialog\"\n      aria-expanded={disclosed}\n      aria-label={discloseLabel ?? `Detalhes de ${title}`}\n      sx={{\n        ...rowSx,\n        appearance: 'none',\n        p: 0.5,\n        ml: -0.5,\n        border: 'none',\n        borderRadius: 1.5,\n        background: 'none',\n        color: 'inherit',\n        font: 'inherit',\n        cursor: 'pointer',\n        '&:hover': { backgroundColor: 'action.hover' },\n        '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 2 },\n      }}\n    >\n      {body}\n    </Box>\n  );\n};\n\nAppHeaderIdentity.displayName = 'AppHeaderIdentity';\n"],"mappings":"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","names":["Box","React","jsx","React","Box","Box","useTheme","jsx","jsxs","useTheme","Box","Box","Typography","useTheme","React","Fragment","jsx","jsxs","useTheme","Box","Typography","React"]}