@12-apps/ui 6.33.1 → 6.35.0

package/dist/chunk-E6YBXAZN.js

@@ -0,0 +1,266 @@
+import {
+  BANNER_TINT_S,
+  bannerPartStyles,
+  bannerPointerStates,
+  fadeInSlide,
+  getVariantColor
+} from "./chunk-GVLMG5WQ.js";
+import {
+  FOCUS
+} from "./chunk-P2UIXDEG.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Banner/Banner.tsx
+import CheckCircle from "@mui/icons-material/CheckCircle";
+import Close from "@mui/icons-material/Close";
+import Error from "@mui/icons-material/Error";
+import Info from "@mui/icons-material/Info";
+import Warning from "@mui/icons-material/Warning";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var StyledBanner = styled(Box, {
+  shouldForwardProp: (prop) => !["variant", "sticky", "fullWidth"].includes(prop)
+})(({ theme, variant, sticky, fullWidth }) => {
+  const colorPalette = getVariantColor(theme, variant);
+  return {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: theme.spacing(1.5),
+    padding: theme.spacing(1.5, 2),
+    borderRadius: theme.spacing(1),
+    backgroundColor: alpha(colorPalette.main, 0.1),
+    border: `1px solid ${alpha(colorPalette.main, 0.2)}`,
+    color: colorPalette.main,
+    position: sticky ? "sticky" : "relative",
+    top: sticky ? 0 : "auto",
+    zIndex: sticky ? theme.zIndex.appBar : "auto",
+    width: fullWidth ? "100vw" : "100%",
+    marginLeft: fullWidth ? "50%" : 0,
+    transform: fullWidth ? "translateX(-50%)" : "none",
+    animation: `${fadeInSlide} 0.3s ease-out`,
+    transition: `all 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow ${BANNER_TINT_S}s cubic-bezier(0.4, 0, 0.2, 1)`,
+    ...bannerPointerStates(theme),
+    // Focus: `:focus-visible`, not `:focus-within`.
+    //
+    // The banner carries `tabIndex={0}`, so a MOUSE CLICK focused it and
+    // painted this ring — a keyboard affordance answering a pointer, which is
+    // what made clicking one look like an error state. `:focus-visible` is the
+    // browser's own answer to whether the focus came from the keyboard: the
+    // ring stays for whoever tabs here and never fires on a click. Same defect
+    // and same fix as `Alert`, which is the sibling surface (FUT-1458).
+    "&:focus-visible": {
+      outline: `${FOCUS.ringWidth}px solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,
+      outlineOffset: `${FOCUS.offset}px`
+    },
+    ...bannerPartStyles(theme, colorPalette),
+    // Responsive layout
+    [theme.breakpoints.down("sm")]: {
+      flexDirection: "column",
+      alignItems: "stretch",
+      gap: theme.spacing(1),
+      ".banner-content": {
+        order: 1
+      },
+      ".banner-actions": {
+        order: 2,
+        justifyContent: "flex-start",
+        marginTop: theme.spacing(1),
+        marginLeft: 0
+      }
+    },
+    // Glass effect variant (optional enhancement)
+    "&.banner-glass": {
+      backgroundColor: alpha(theme.palette.background.paper, 0.1),
+      backdropFilter: "blur(20px)",
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+      color: theme.palette.text.primary,
+      ".banner-icon": {
+        color: colorPalette.main
+      }
+    }
+  };
+});
+var getVariantIcon = (variant) => {
+  const iconMap = {
+    info: /* @__PURE__ */ jsx(Info, {}),
+    success: /* @__PURE__ */ jsx(CheckCircle, {}),
+    warning: /* @__PURE__ */ jsx(Warning, {}),
+    critical: /* @__PURE__ */ jsx(Error, {})
+  };
+  return iconMap[variant];
+};
+var resolveAriaAnnouncement = (variant) => ({
+  role: variant === "warning" || variant === "critical" ? "alert" : "status",
+  live: variant === "critical" ? "assertive" : "polite"
+});
+var testIdFor = (base, suffix) => base ? `${base}-${suffix}` : `banner-${suffix}`;
+var buildActionSx = (theme, variant, actionVariant) => {
+  const palette = getVariantColor(theme, variant);
+  return {
+    minWidth: "auto",
+    px: 1.5,
+    py: 0.5,
+    fontSize: rem(theme, 13),
+    fontWeight: 500,
+    borderRadius: 1,
+    ...actionVariant === "primary" && {
+      backgroundColor: palette.main,
+      color: theme.palette.getContrastText(palette.main),
+      // Colour only. The banner itself moves nothing under a pointer, and an
+      // action that lifts inside one that does not is the inconsistency a
+      // reader notices without being able to name it (FUT-1458).
+      "&:hover": {
+        backgroundColor: palette.dark || palette.main
+      }
+    },
+    ...actionVariant === "secondary" && {
+      borderColor: palette.main,
+      color: palette.main,
+      "&:hover": {
+        backgroundColor: alpha(palette.main, 0.1),
+        borderColor: palette.main
+      }
+    }
+  };
+};
+var BannerActionButton = ({ action, variant, dataTestId }) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    size: "small",
+    variant: action.variant === "primary" ? "contained" : "outlined",
+    onClick: action.onClick,
+    "data-testid": testIdFor(dataTestId, "action"),
+    sx: (theme) => buildActionSx(theme, variant, action.variant),
+    children: action.label
+  }
+);
+var BannerBody = ({ displayIcon, title, description, dataTestId, children }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  displayIcon && /* @__PURE__ */ jsx(Box, { className: "banner-icon", "aria-hidden": "true", "data-testid": testIdFor(dataTestId, "icon"), children: displayIcon }),
+  /* @__PURE__ */ jsxs(Box, { className: "banner-content", children: [
+    title && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        className: "banner-title",
+        variant: "subtitle2",
+        component: "div",
+        "data-testid": testIdFor(dataTestId, "title"),
+        children: title
+      }
+    ),
+    description && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        className: "banner-description",
+        variant: "body2",
+        component: "div",
+        "data-testid": testIdFor(dataTestId, "message"),
+        children: description
+      }
+    ),
+    children
+  ] })
+] });
+var BannerTrailing = ({ actions, variant, dismissible, onDismissClick, dismissLabel, dataTestId }) => /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [
+  actions && actions.length > 0 && /* @__PURE__ */ jsx(Box, { className: "banner-actions", children: actions.map((action, index) => /* @__PURE__ */ jsx(
+    BannerActionButton,
+    {
+      action,
+      variant,
+      dataTestId
+    },
+    index
+  )) }),
+  dismissible && /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      className: "banner-dismiss",
+      size: "small",
+      onClick: onDismissClick,
+      "aria-label": dismissLabel,
+      "data-testid": testIdFor(dataTestId, "close"),
+      sx: { transition: "all 0.2s ease" },
+      children: /* @__PURE__ */ jsx(Close, { fontSize: "small" })
+    }
+  )
+] });
+var Banner = React.forwardRef(
+  ({
+    variant = "info",
+    title,
+    description,
+    icon,
+    dismissible = false,
+    dismissLabel,
+    onDismiss,
+    actions,
+    sticky = false,
+    fullWidth = false,
+    className,
+    children,
+    "data-testid": dataTestId = "banner",
+    ...props
+  }, ref) => {
+    const [visible, setVisible] = React.useState(true);
+    const handleDismiss = React.useCallback(() => {
+      setVisible(false);
+      onDismiss?.();
+    }, [onDismiss]);
+    const displayIcon = icon || getVariantIcon(variant);
+    const { role: ariaRole, live: ariaLive } = resolveAriaAnnouncement(variant);
+    if (!visible) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(
+      StyledBanner,
+      {
+        ref,
+        variant,
+        sticky,
+        fullWidth,
+        className,
+        role: ariaRole,
+        "aria-live": ariaLive,
+        "aria-atomic": "true",
+        tabIndex: 0,
+        "data-testid": dataTestId,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            BannerBody,
+            {
+              displayIcon,
+              title,
+              description,
+              dataTestId,
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            BannerTrailing,
+            {
+              actions,
+              variant,
+              dismissible,
+              onDismissClick: handleDismiss,
+              dismissLabel,
+              dataTestId
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Banner.displayName = "Banner";
+
+export {
+  Banner
+};
+//# sourceMappingURL=chunk-E6YBXAZN.js.map

package/dist/chunk-E6YBXAZN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Banner/Banner.tsx"],"sourcesContent":["import CheckCircle from '@mui/icons-material/CheckCircle';\nimport Close from '@mui/icons-material/Close';\nimport Error from '@mui/icons-material/Error';\nimport Info from '@mui/icons-material/Info';\nimport Warning from '@mui/icons-material/Warning';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { BANNER_TINT_S, bannerPartStyles, bannerPointerStates, fadeInSlide, getVariantColor } from './Banner.styles';\nimport { FOCUS } from '../Alert/Alert.metrics';\nimport type { BannerProps, BannerVariant } from './Banner.types';\nimport { rem } from '../../../tokens/relative';\n\n\n\nconst StyledBanner = styled(Box, {\n  shouldForwardProp: (prop) => !['variant', 'sticky', 'fullWidth'].includes(prop as string),\n})<{\n  variant: BannerVariant;\n  sticky: boolean;\n  fullWidth: boolean;\n}>(({ theme, variant, sticky, fullWidth }) => {\n\n  const colorPalette = getVariantColor(theme, variant);\n\n  return {\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: theme.spacing(1.5),\n    padding: theme.spacing(1.5, 2),\n    borderRadius: theme.spacing(1),\n    backgroundColor: alpha(colorPalette.main, 0.1),\n    border: `1px solid ${alpha(colorPalette.main, 0.2)}`,\n    color: colorPalette.main,\n    position: sticky ? 'sticky' : 'relative',\n    top: sticky ? 0 : 'auto',\n    zIndex: sticky ? theme.zIndex.appBar : 'auto',\n    width: fullWidth ? '100vw' : '100%',\n    marginLeft: fullWidth ? '50%' : 0,\n    transform: fullWidth ? 'translateX(-50%)' : 'none',\n    animation: `${fadeInSlide} 0.3s ease-out`,\n    transition: `all 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow ${BANNER_TINT_S}s cubic-bezier(0.4, 0, 0.2, 1)`,\n\n    ...bannerPointerStates(theme),\n\n    // Focus: `:focus-visible`, not `:focus-within`.\n    //\n    // The banner carries `tabIndex={0}`, so a MOUSE CLICK focused it and\n    // painted this ring — a keyboard affordance answering a pointer, which is\n    // what made clicking one look like an error state. `:focus-visible` is the\n    // browser's own answer to whether the focus came from the keyboard: the\n    // ring stays for whoever tabs here and never fires on a click. Same defect\n    // and same fix as `Alert`, which is the sibling surface (FUT-1458).\n    '&:focus-visible': {\n      outline: `${FOCUS.ringWidth}px solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,\n      outlineOffset: `${FOCUS.offset}px`,\n    },\n\n    ...bannerPartStyles(theme, colorPalette),\n\n    // Responsive layout\n    [theme.breakpoints.down('sm')]: {\n      flexDirection: 'column',\n      alignItems: 'stretch',\n      gap: theme.spacing(1),\n      \n      '.banner-content': {\n        order: 1,\n      },\n\n      '.banner-actions': {\n        order: 2,\n        justifyContent: 'flex-start',\n        marginTop: theme.spacing(1),\n        marginLeft: 0,\n      },\n    },\n\n    // Glass effect variant (optional enhancement)\n    '&.banner-glass': {\n      backgroundColor: alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: 'blur(20px)',\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n      color: theme.palette.text.primary,\n      \n      '.banner-icon': {\n        color: colorPalette.main,\n      },\n    },\n  };\n});\n\nconst getVariantIcon = (variant: BannerVariant) => {\n  const iconMap: Record<BannerVariant, React.ReactNode> = {\n    info: <Info />,\n    success: <CheckCircle />,\n    warning: <Warning />,\n    critical: <Error />,\n  };\n  return iconMap[variant];\n};\n\ntype BannerAction = NonNullable<BannerProps['actions']>[number];\n\n// Warnings and criticals interrupt the screen reader; the rest are announced\n// politely when it next pauses.\nconst resolveAriaAnnouncement = (variant: BannerVariant) => ({\n  role: variant === 'warning' || variant === 'critical' ? 'alert' : 'status',\n  live: (variant === 'critical' ? 'assertive' : 'polite') as 'assertive' | 'polite',\n});\n\nconst testIdFor = (base: string | undefined, suffix: string) =>\n  base ? `${base}-${suffix}` : `banner-${suffix}`;\n\n// Resolves the banner's palette once, rather than per property as the inline\n// version did — getVariantColor was being called nine times to build one button.\nconst buildActionSx = (\n  theme: Theme,\n  variant: BannerVariant,\n  actionVariant: BannerAction['variant'],\n) => {\n  const palette = getVariantColor(theme, variant);\n\n  return {\n    minWidth: 'auto',\n    px: 1.5,\n    py: 0.5,\n    fontSize: rem(theme, 13),\n    fontWeight: 500,\n    borderRadius: 1,\n\n    ...(actionVariant === 'primary' && {\n      backgroundColor: palette.main,\n      color: theme.palette.getContrastText(palette.main),\n\n      // Colour only. The banner itself moves nothing under a pointer, and an\n      // action that lifts inside one that does not is the inconsistency a\n      // reader notices without being able to name it (FUT-1458).\n      '&:hover': {\n        backgroundColor: palette.dark || palette.main,\n      },\n    }),\n\n    ...(actionVariant === 'secondary' && {\n      borderColor: palette.main,\n      color: palette.main,\n\n      '&:hover': {\n        backgroundColor: alpha(palette.main, 0.1),\n        borderColor: palette.main,\n      },\n    }),\n  };\n};\n\nconst BannerActionButton: React.FC<{\n  action: BannerAction;\n  variant: BannerVariant;\n  dataTestId?: string;\n}> = ({ action, variant, dataTestId }) => (\n  <Button\n    size=\"small\"\n    variant={action.variant === 'primary' ? 'contained' : 'outlined'}\n    onClick={action.onClick}\n    data-testid={testIdFor(dataTestId, 'action')}\n    sx={(theme) => buildActionSx(theme, variant, action.variant)}\n  >\n    {action.label}\n  </Button>\n);\n\nconst BannerBody: React.FC<{\n  displayIcon: React.ReactNode;\n  title?: BannerProps['title'];\n  description?: BannerProps['description'];\n  dataTestId?: string;\n  children?: React.ReactNode;\n}> = ({ displayIcon, title, description, dataTestId, children }) => (\n  <>\n    {displayIcon && (\n      <Box className=\"banner-icon\" aria-hidden=\"true\" data-testid={testIdFor(dataTestId, 'icon')}>\n        {displayIcon}\n      </Box>\n    )}\n\n    <Box className=\"banner-content\">\n      {title && (\n        <Typography\n          className=\"banner-title\"\n          variant=\"subtitle2\"\n          component=\"div\"\n          data-testid={testIdFor(dataTestId, 'title')}\n        >\n          {title}\n        </Typography>\n      )}\n      {description && (\n        <Typography\n          className=\"banner-description\"\n          variant=\"body2\"\n          component=\"div\"\n          data-testid={testIdFor(dataTestId, 'message')}\n        >\n          {description}\n        </Typography>\n      )}\n      {children}\n    </Box>\n  </>\n);\n\nconst BannerTrailing: React.FC<{\n  actions?: BannerProps['actions'];\n  variant: BannerVariant;\n  dismissible: boolean;\n  onDismissClick: () => void;\n  dismissLabel: string;\n  dataTestId?: string;\n}> = ({ actions, variant, dismissible, onDismissClick, dismissLabel, dataTestId }) => (\n  <Box display=\"flex\" alignItems=\"center\" gap={1}>\n    {actions && actions.length > 0 && (\n      <Box className=\"banner-actions\">\n        {actions.map((action, index) => (\n          <BannerActionButton\n            key={index}\n            action={action}\n            variant={variant}\n            dataTestId={dataTestId}\n          />\n        ))}\n      </Box>\n    )}\n\n    {dismissible && (\n      <IconButton\n        className=\"banner-dismiss\"\n        size=\"small\"\n        onClick={onDismissClick}\n        aria-label={dismissLabel}\n        data-testid={testIdFor(dataTestId, 'close')}\n        sx={{ transition: 'all 0.2s ease' }}\n      >\n        <Close fontSize=\"small\" />\n      </IconButton>\n    )}\n  </Box>\n);\n\nexport const Banner = React.forwardRef<HTMLDivElement, BannerProps>(\n  (\n    {\n      variant = 'info',\n      title,\n      description,\n      icon,\n      dismissible = false,\n      dismissLabel,\n      onDismiss,\n      actions,\n      sticky = false,\n      fullWidth = false,\n      className,\n      children,\n      'data-testid': dataTestId = 'banner',\n      ...props\n    },\n    ref,\n  ) => {\n    const [visible, setVisible] = React.useState(true);\n\n    const handleDismiss = React.useCallback(() => {\n      setVisible(false);\n      onDismiss?.();\n    }, [onDismiss]);\n\n    const displayIcon = icon || getVariantIcon(variant);\n\n    const { role: ariaRole, live: ariaLive } = resolveAriaAnnouncement(variant);\n\n    if (!visible) {\n      return null;\n    }\n\n    return (\n      <StyledBanner\n        ref={ref}\n        variant={variant}\n        sticky={sticky}\n        fullWidth={fullWidth}\n        className={className}\n        role={ariaRole}\n        aria-live={ariaLive}\n        aria-atomic=\"true\"\n        tabIndex={0}\n        data-testid={dataTestId}\n        {...props}\n      >\n        <BannerBody\n          displayIcon={displayIcon}\n          title={title}\n          description={description}\n          dataTestId={dataTestId}\n        >\n          {children}\n        </BannerBody>\n\n        <BannerTrailing\n          actions={actions}\n          variant={variant}\n          dismissible={dismissible}\n          onDismissClick={handleDismiss}\n          dismissLabel={dismissLabel}\n          dataTestId={dataTestId}\n        />\n      </StyledBanner>\n    );\n  },\n);\n\nBanner.displayName = 'Banner';"],"mappings":"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","names":[]}

package/dist/chunk-E7MSDXED.js

@@ -0,0 +1,170 @@
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/AppHeader/AppHeader.tsx
+import Box from "@mui/material/Box/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var BAR_MIN_HEIGHT = { regular: 64, dense: 52 };
+var HEADER_DEFAULTS = {
+  position: "sticky",
+  offsetTop: 0,
+  maxWidth: 1200,
+  divider: true,
+  elevateOnScroll: false,
+  dense: false,
+  disableSpacer: false,
+  dataTestId: "app-header"
+};
+function useScrolled(enabled) {
+  const [scrolled, setScrolled] = React.useState(false);
+  React.useEffect(() => {
+    if (!enabled) return void 0;
+    const onScroll = () => setScrolled(window.scrollY > 0);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [enabled]);
+  return enabled && scrolled;
+}
+function useMeasuredHeight(enabled) {
+  const ref = React.useRef(null);
+  const [height, setHeight] = React.useState(0);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!enabled || !node) return void 0;
+    const measure = () => setHeight(node.getBoundingClientRect().height);
+    measure();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [enabled]);
+  return [ref, height];
+}
+function surfaceSx({
+  position,
+  offsetTop,
+  divider,
+  scrolled
+}) {
+  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"
+  };
+}
+var HeaderTrailing = ({ meta, actions }) => {
+  if (!meta && !actions) return null;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        flex: "0 0 auto",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-end",
+        gap: 0.5
+      },
+      children: [
+        meta && /* @__PURE__ */ jsx(
+          Box,
+          {
+            "data-testid": "app-header-meta",
+            sx: {
+              fontSize: sxRem(11),
+              fontWeight: 700,
+              letterSpacing: "0.08em",
+              textTransform: "uppercase",
+              color: "text.disabled",
+              lineHeight: 1
+            },
+            children: meta
+          }
+        ),
+        actions && /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "nav",
+            "data-testid": "app-header-actions",
+            sx: { display: "flex", alignItems: "center", gap: 1 },
+            children: actions
+          }
+        )
+      ]
+    }
+  );
+};
+var AppHeader = (props) => {
+  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);
+  const scrolled = useScrolled(elevateOnScroll);
+  const needsSpacer = position === "fixed" && !disableSpacer;
+  const [ref, height] = useMeasuredHeight(needsSpacer);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        component: "header",
+        className,
+        "data-testid": dataTestId,
+        sx: surfaceSx({ position, offsetTop, divider, scrolled }),
+        children: /* @__PURE__ */ jsxs(Box, { sx: { maxWidth, mx: "auto", px: { xs: 2, md: 3 } }, children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: { xs: 1, md: 2 },
+                minHeight: dense ? BAR_MIN_HEIGHT.dense : BAR_MIN_HEIGHT.regular,
+                py: 1
+              },
+              children: [
+                leading,
+                /* @__PURE__ */ jsx(Box, { sx: { flex: "1 1 auto", minWidth: 0 }, children }),
+                /* @__PURE__ */ jsx(HeaderTrailing, { meta, actions })
+              ]
+            }
+          ),
+          below && /* @__PURE__ */ jsx(Box, { "data-testid": `${dataTestId}-below`, sx: { pb: 1.5 }, children: below })
+        ] })
+      }
+    ),
+    needsSpacer && /* @__PURE__ */ jsx(Box, { "aria-hidden": true, "data-testid": `${dataTestId}-spacer`, sx: { height } })
+  ] });
+};
+AppHeader.displayName = "AppHeader";
+var AppHeader_default = AppHeader;
+
+export {
+  AppHeader,
+  AppHeader_default
+};
+//# sourceMappingURL=chunk-E7MSDXED.js.map

package/dist/chunk-E7MSDXED.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/AppHeader/AppHeader.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport React from 'react';\n\nimport { sxRem } from '../../../tokens/relative';\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: sxRem(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"],"mappings":";;;;;;;;AAEA,OAAO,SAAS;AAChB,OAAO,WAAW;AA8Gd,SAgFA,UAtEI,KAVJ;AAtGJ,IAAM,iBAAiB,EAAE,SAAS,IAAI,OAAO,GAAG;AAgBhD,IAAM,kBAAwD;AAAA,EAC5D,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,eAAe;AAAA,EACf,YAAY;AACd;AAMA,SAAS,YAAY,SAA2B;AAC9C,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AACpD,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,QAAS,QAAO;AACrB,UAAM,WAAW,MAAY,YAAY,OAAO,UAAU,CAAC;AAC3D,aAAS;AACT,WAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,KAAK,CAAC;AAC7D,WAAO,MAAM,OAAO,oBAAoB,UAAU,QAAQ;AAAA,EAC5D,GAAG,CAAC,OAAO,CAAC;AACZ,SAAO,WAAW;AACpB;AAWA,SAAS,kBAAkB,SAAiE;AAC1F,QAAM,MAAM,MAAM,OAA2B,IAAI;AACjD,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,CAAC;AAC5C,QAAM,UAAU,MAAM;AACpB,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,WAAW,CAAC,KAAM,QAAO;AAC9B,UAAM,UAAU,MAAY,UAAU,KAAK,sBAAsB,EAAE,MAAM;AACzE,YAAQ;AAKR,QAAI,OAAO,mBAAmB,YAAa,QAAO;AAClD,UAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,aAAS,QAAQ,IAAI;AACrB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,OAAO,CAAC;AACZ,SAAO,CAAC,KAAK,MAAM;AACrB;AAQA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAE4B;AAC1B,SAAO;AAAA,IACL;AAAA,IACA,GAAI,aAAa,WAAW,CAAC,IAAI,EAAE,KAAK,WAAW,QAAQ,SAAS;AAAA,IACpE,GAAI,aAAa,UAAU,EAAE,MAAM,GAAG,OAAO,EAAE,IAAI,CAAC;AAAA,IACpD,iBAAiB;AAAA,IACjB,cAAc,UAAU,IAAI;AAAA,IAC5B,aAAa;AAAA,IACb,WAAW,WAAW,IAAI;AAAA,IAC1B,YAAY;AAAA,EACd;AACF;AAGA,IAAM,iBAAqE,CAAC,EAAE,MAAM,QAAQ,MAAM;AAChG,MAAI,CAAC,QAAQ,CAAC,QAAS,QAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,QACF,MAAM;AAAA,QACN,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,KAAK;AAAA,MACP;AAAA,MAEC;AAAA,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,IAAI;AAAA,cACF,UAAU,MAAM,EAAE;AAAA,cAClB,YAAY;AAAA,cACZ,eAAe;AAAA,cACf,eAAe;AAAA,cACf,OAAO;AAAA,cACP,YAAY;AAAA,YACd;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAED,WACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAE;AAAA,YAEnD;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAiBO,IAAM,YAAsC,CAAC,UAAU;AAI5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,EAGF,IAAI,aAAa,OAAO,eAAe;AAEvC,QAAM,WAAW,YAAY,eAAe;AAC5C,QAAM,cAAc,aAAa,WAAW,CAAC;AAC7C,QAAM,CAAC,KAAK,MAAM,IAAI,kBAAkB,WAAW;AAEnD,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV;AAAA,QACA,eAAa;AAAA,QACb,IAAI,UAAU,EAAE,UAAU,WAAW,SAAS,SAAS,CAAC;AAAA,QAExD,+BAAC,OAAI,IAAI,EAAE,UAAU,IAAI,QAAQ,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,EAAE,GACpD;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,gBACF,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE;AAAA,gBACpB,WAAW,QAAQ,eAAe,QAAQ,eAAe;AAAA,gBACzD,IAAI;AAAA,cACN;AAAA,cAEC;AAAA;AAAA,gBAID,oBAAC,OAAI,IAAI,EAAE,MAAM,YAAY,UAAU,EAAE,GAAI,UAAS;AAAA,gBACtD,oBAAC,kBAAe,MAAY,SAAkB;AAAA;AAAA;AAAA,UAChD;AAAA,UACC,SACC,oBAAC,OAAI,eAAa,GAAG,UAAU,UAAU,IAAI,EAAE,IAAI,IAAI,GACpD,iBACH;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IACC,eAAe,oBAAC,OAAI,eAAW,MAAC,eAAa,GAAG,UAAU,WAAW,IAAI,EAAE,OAAO,GAAG;AAAA,KACxF;AAEJ;AAEA,UAAU,cAAc;AAExB,IAAO,oBAAQ;","names":[]}