@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-DZNMS2SH.js

@@ -0,0 +1,182 @@
+import {
+  DiscloseSlot,
+  DragSlot,
+  SelectSlot
+} from "./chunk-B2VXP2B2.js";
+import {
+  actionProps,
+  metaShape,
+  rowStyles,
+  useRowShell
+} from "./chunk-UL7L6MFT.js";
+import {
+  ListCardActions,
+  ListCardCaption,
+  ListCardMeta,
+  ListCardTail
+} from "./chunk-RZ2C5CAW.js";
+import {
+  useDisclosure
+} from "./chunk-2JCRNWHE.js";
+import {
+  DropIndicator
+} from "./chunk-K4EKTMTC.js";
+import {
+  cellRailsTemplate
+} from "./chunk-JFEEV3XI.js";
+import {
+  ListCardCells,
+  cellTracks,
+  useCellConfig
+} from "./chunk-COYGTEN5.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Card
+} from "./chunk-N6CSXHFJ.js";
+
+// src/components/data-display/DataViews/base-list-card.tsx
+import Collapse from "@mui/material/Collapse/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function useResolvedCells(props, inGroup) {
+  const groupCells = useCellConfig();
+  const cells = groupCells ?? props.cells ?? null;
+  const configured = cells != null && cells.length > 0 && props.row != null;
+  const cellTemplate = configured && !inGroup ? cellRailsTemplate(cellTracks(cells)) : null;
+  return { cells, configured, cellTemplate };
+}
+function RowContent({
+  card,
+  cells,
+  configured,
+  slot,
+  actionable,
+  meta
+}) {
+  if (configured && cells != null) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ListCardCells, { cells, row: card.row }),
+      /* @__PURE__ */ jsx(
+        ListCardActions,
+        {
+          actions: actionable ? card.actions : void 0,
+          alwaysVisible: card.actionsAlwaysVisible,
+          menu: card.menu,
+          testId: slot
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ListCardCaption,
+      {
+        title: card.title,
+        subtitle: card.subtitle,
+        href: card.href,
+        target: card.target,
+        testId: slot("title")
+      }
+    ),
+    /* @__PURE__ */ jsx(ListCardMeta, { meta: card.meta, metaSlot: card.metaSlot, trailingRule: card.value != null }),
+    /* @__PURE__ */ jsx(
+      ListCardTail,
+      {
+        value: card.value,
+        separated: meta.present,
+        actions: actionable ? card.actions : void 0,
+        actionsAlwaysVisible: card.actionsAlwaysVisible,
+        menu: card.menu,
+        testId: slot
+      }
+    )
+  ] });
+}
+function ExpandableBody({
+  disclosure,
+  padY,
+  pad,
+  children
+}) {
+  if (!disclosure.expandable) return /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsx(default2, { sx: { gridColumn: "1 / -1", minWidth: 0 }, children: /* @__PURE__ */ jsx(Collapse, { in: disclosure.expanded, timeout: 150, children: /* @__PURE__ */ jsx(
+    default2,
+    {
+      id: disclosure.regionId,
+      role: "region",
+      sx: {
+        minWidth: 0,
+        // `padY`, not a fraction of the horizontal padding. The card's own
+        // `py` wraps the summary AND the body, so once the body is in flow
+        // the summary has no bottom padding of its own — at `comfortable`
+        // the row visibly lost the height it had while closed.
+        mt: padY,
+        pt: padY,
+        // A RULE BETWEEN SUMMARY AND BODY, bled through the row's horizontal
+        // padding so it spans the card edge to edge. Inset, it reads as a
+        // border around the content rather than a division of the card.
+        borderTop: 1,
+        borderColor: "divider",
+        mx: -pad,
+        px: pad
+      },
+      children
+    }
+  ) }) });
+}
+function BaseListCard(props) {
+  const { selected = false, onClick } = props;
+  const shell = useRowShell(props);
+  const { actionable, selectable, slot, drag, reserve, pad, padY, acts } = shell;
+  const meta = metaShape(props);
+  const disclosure = useDisclosure(props);
+  const { cells, configured, cellTemplate } = useResolvedCells(props, shell.group != null);
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant: "outlined",
+      className: props.className,
+      dataTestId: props.testId,
+      "aria-label": props["aria-label"],
+      "aria-disabled": actionable ? void 0 : true,
+      onContextMenu: props.onContextMenu,
+      ...acts ? actionProps(onClick) : {},
+      ...drag.itemProps,
+      sx: rowStyles(props, shell, cellTemplate),
+      children: [
+        drag.dropEdge != null && /* @__PURE__ */ jsx(DropIndicator, { edge: drag.dropEdge }),
+        /* @__PURE__ */ jsx(
+          DiscloseSlot,
+          {
+            expandable: disclosure.expandable,
+            expanded: disclosure.expanded,
+            reserve,
+            onToggle: disclosure.toggle,
+            controls: disclosure.regionId,
+            testId: slot("disclose")
+          }
+        ),
+        /* @__PURE__ */ jsx(DragSlot, { drag, reserve, testId: slot("drag") }),
+        /* @__PURE__ */ jsx(
+          SelectSlot,
+          {
+            selectable,
+            selected,
+            reserve,
+            onToggleSelect: props.onToggleSelect,
+            testId: slot("checkbox")
+          }
+        ),
+        /* @__PURE__ */ jsx(default2, { "data-slot": "leading", sx: { display: "flex", alignItems: "center" }, children: props.leading }),
+        /* @__PURE__ */ jsx(RowContent, { card: props, cells, configured, slot, actionable, meta }),
+        /* @__PURE__ */ jsx(ExpandableBody, { disclosure, padY, pad, children: props.children })
+      ]
+    }
+  );
+}
+
+export {
+  BaseListCard
+};
+//# sourceMappingURL=chunk-DZNMS2SH.js.map

package/dist/chunk-E4TNDTWV.js

@@ -0,0 +1,145 @@
+import {
+  SIZE_MAP,
+  makeTestIds,
+  resolveLoadingStateProps
+} from "./chunk-7DFEKTT7.js";
+import {
+  SKELETON_FULL_ROW_WIDTH,
+  SKELETON_LAST_ROW_WIDTH,
+  SKELETON_MESSAGE_MARGIN_TOP_UNITS,
+  SKELETON_PADDING_UNITS,
+  SKELETON_RADIUS,
+  SKELETON_ROW_GAP_UNITS,
+  SKELETON_ROW_HEIGHT,
+  SPINNER_GAP_UNITS,
+  SPINNER_MIN_HEIGHT,
+  SPINNER_PADDING_UNITS
+} from "./chunk-YSTHOE66.js";
+import {
+  Skeleton
+} from "./chunk-7F7TTOYN.js";
+import {
+  resolveTestId
+} from "./chunk-TYJR4GOF.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/LoadingState/LoadingState.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LoadingMessage = ({ message, size, testIds, sx }) => message ? /* @__PURE__ */ jsx(
+  Typography,
+  {
+    variant: SIZE_MAP[size].text,
+    color: "text.secondary",
+    sx,
+    "data-testid": testIds.named("message"),
+    children: message
+  }
+) : null;
+var SkeletonView = ({
+  message,
+  size,
+  skeletonRows,
+  className,
+  testIds
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": message || "Loading content",
+      className,
+      "data-testid": testIds.base,
+      sx: {
+        width: "100%",
+        padding: theme.spacing(SKELETON_PADDING_UNITS)
+      },
+      children: [
+        /* @__PURE__ */ jsx(Stack, { spacing: SKELETON_ROW_GAP_UNITS, children: Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rectangular",
+            animation: "wave",
+            height: rem(theme, SKELETON_ROW_HEIGHT[size]),
+            width: index === skeletonRows - 1 ? SKELETON_LAST_ROW_WIDTH : SKELETON_FULL_ROW_WIDTH,
+            borderRadius: SKELETON_RADIUS,
+            "data-testid": testIds.optional(`skeleton-${index}`)
+          },
+          `skeleton-row-${index}`
+        )) }),
+        /* @__PURE__ */ jsx(
+          LoadingMessage,
+          {
+            message,
+            size,
+            testIds,
+            sx: { mt: SKELETON_MESSAGE_MARGIN_TOP_UNITS, textAlign: "center" }
+          }
+        )
+      ]
+    }
+  );
+};
+var SpinnerView = ({ message, size, className, testIds }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": message || "Loading",
+      className,
+      "data-testid": testIds.base,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: theme.spacing(SPINNER_PADDING_UNITS),
+        minHeight: rem(theme, SPINNER_MIN_HEIGHT),
+        gap: theme.spacing(SPINNER_GAP_UNITS)
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          CircularProgress,
+          {
+            size: rem(theme, SIZE_MAP[size].spinner),
+            "data-testid": testIds.named("spinner")
+          }
+        ),
+        /* @__PURE__ */ jsx(LoadingMessage, { message, size, testIds })
+      ]
+    }
+  );
+};
+var LoadingState = React.memo((rawProps) => {
+  const resolved = resolveLoadingStateProps(rawProps);
+  const { variant, message, size, skeletonRows, className } = resolved;
+  const viewProps = {
+    message,
+    size,
+    skeletonRows,
+    className,
+    // `dataTestId` is the documented spelling; `testID`, the shared contract's
+    // other one, resolves to the same id.
+    testIds: makeTestIds(resolveTestId(resolved))
+  };
+  return variant === "skeleton" ? /* @__PURE__ */ jsx(SkeletonView, { ...viewProps }) : /* @__PURE__ */ jsx(SpinnerView, { ...viewProps });
+});
+LoadingState.displayName = "LoadingState";
+var LoadingState_default = LoadingState;
+
+export {
+  LoadingState,
+  LoadingState_default
+};
+//# sourceMappingURL=chunk-E4TNDTWV.js.map

package/dist/chunk-E4TNDTWV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/LoadingState/LoadingState.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { Skeleton } from '../../layout/Skeleton/Skeleton';\n\nimport {\n  makeTestIds,\n  resolveLoadingStateProps,\n  SIZE_MAP,\n  SKELETON_ROW_HEIGHT,\n} from './LoadingState.helpers';\nimport {\n  SKELETON_FULL_ROW_WIDTH,\n  SKELETON_LAST_ROW_WIDTH,\n  SKELETON_MESSAGE_MARGIN_TOP_UNITS,\n  SKELETON_PADDING_UNITS,\n  SKELETON_RADIUS,\n  SKELETON_ROW_GAP_UNITS,\n  SPINNER_GAP_UNITS,\n  SPINNER_MIN_HEIGHT,\n  SPINNER_PADDING_UNITS,\n} from './LoadingState.metrics';\nimport type { LoadingStateProps, LoadingStateSize } from './LoadingState.types';\nimport { resolveTestId } from '../../../platform/test-id';\nimport { rem } from '../../../tokens/relative';\n\ninterface ViewProps {\n  message?: string;\n  size: LoadingStateSize;\n  skeletonRows: number;\n  className?: string;\n  testIds: ReturnType<typeof makeTestIds>;\n}\n\nconst LoadingMessage: React.FC<{\n  message?: string;\n  size: LoadingStateSize;\n  testIds: ViewProps['testIds'];\n  sx?: object;\n}> = ({ message, size, testIds, sx }) =>\n  message ? (\n    <Typography\n      variant={SIZE_MAP[size].text}\n      color=\"text.secondary\"\n      sx={sx}\n      data-testid={testIds.named('message')}\n    >\n      {message}\n    </Typography>\n  ) : null;\n\nconst SkeletonView: React.FC<ViewProps> = ({\n  message,\n  size,\n  skeletonRows,\n  className,\n  testIds,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={message || 'Loading content'}\n      className={className}\n      data-testid={testIds.base}\n      sx={{\n        width: '100%',\n        padding: theme.spacing(SKELETON_PADDING_UNITS),\n      }}\n    >\n      <Stack spacing={SKELETON_ROW_GAP_UNITS}>\n        {Array.from({ length: skeletonRows }).map((_, index) => (\n          <Skeleton\n            key={`skeleton-row-${index}`}\n            variant=\"rectangular\"\n            animation=\"wave\"\n            height={rem(theme, SKELETON_ROW_HEIGHT[size])}\n            // The last row is short, so the block reads as a paragraph of text.\n            width={index === skeletonRows - 1 ? SKELETON_LAST_ROW_WIDTH : SKELETON_FULL_ROW_WIDTH}\n            borderRadius={SKELETON_RADIUS}\n            data-testid={testIds.optional(`skeleton-${index}`)}\n          />\n        ))}\n      </Stack>\n      <LoadingMessage\n        message={message}\n        size={size}\n        testIds={testIds}\n        sx={{ mt: SKELETON_MESSAGE_MARGIN_TOP_UNITS, textAlign: 'center' }}\n      />\n    </Box>\n  );\n};\n\nconst SpinnerView: React.FC<ViewProps> = ({ message, size, className, testIds }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={message || 'Loading'}\n      className={className}\n      data-testid={testIds.base}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        padding: theme.spacing(SPINNER_PADDING_UNITS),\n        minHeight: rem(theme, SPINNER_MIN_HEIGHT),\n        gap: theme.spacing(SPINNER_GAP_UNITS),\n      }}\n    >\n      <CircularProgress\n        size={rem(theme, SIZE_MAP[size].spinner)}\n        data-testid={testIds.named('spinner')}\n      />\n      <LoadingMessage message={message} size={size} testIds={testIds} />\n    </Box>\n  );\n};\n\nexport const LoadingState: React.FC<LoadingStateProps> = React.memo((rawProps) => {\n  const resolved = resolveLoadingStateProps(rawProps);\n  const { variant, message, size, skeletonRows, className } = resolved;\n  const viewProps: ViewProps = {\n    message,\n    size,\n    skeletonRows,\n    className,\n    // `dataTestId` is the documented spelling; `testID`, the shared contract's\n    // other one, resolves to the same id.\n    testIds: makeTestIds(resolveTestId(resolved)),\n  };\n\n  return variant === 'skeleton' ? (\n    <SkeletonView {...viewProps} />\n  ) : (\n    <SpinnerView {...viewProps} />\n  );\n});\n\nLoadingState.displayName = 'LoadingState';\n\nexport default LoadingState;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,WAAW;AAClB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AACzB,OAAO,WAAW;AAwCd,cAoBA,YApBA;AAPJ,IAAM,iBAKD,CAAC,EAAE,SAAS,MAAM,SAAS,GAAG,MACjC,UACE;AAAA,EAAC;AAAA;AAAA,IACC,SAAS,SAAS,IAAI,EAAE;AAAA,IACxB,OAAM;AAAA,IACN;AAAA,IACA,eAAa,QAAQ,MAAM,SAAS;AAAA,IAEnC;AAAA;AACH,IACE;AAEN,IAAM,eAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY,WAAW;AAAA,MACvB;AAAA,MACA,eAAa,QAAQ;AAAA,MACrB,IAAI;AAAA,QACF,OAAO;AAAA,QACP,SAAS,MAAM,QAAQ,sBAAsB;AAAA,MAC/C;AAAA,MAEA;AAAA,4BAAC,SAAM,SAAS,wBACb,gBAAM,KAAK,EAAE,QAAQ,aAAa,CAAC,EAAE,IAAI,CAAC,GAAG,UAC5C;AAAA,UAAC;AAAA;AAAA,YAEC,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,QAAQ,IAAI,OAAO,oBAAoB,IAAI,CAAC;AAAA,YAE5C,OAAO,UAAU,eAAe,IAAI,0BAA0B;AAAA,YAC9D,cAAc;AAAA,YACd,eAAa,QAAQ,SAAS,YAAY,KAAK,EAAE;AAAA;AAAA,UAP5C,gBAAgB,KAAK;AAAA,QAQ5B,CACD,GACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,IAAI,EAAE,IAAI,mCAAmC,WAAW,SAAS;AAAA;AAAA,QACnE;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,cAAmC,CAAC,EAAE,SAAS,MAAM,WAAW,QAAQ,MAAM;AAClF,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY,WAAW;AAAA,MACvB;AAAA,MACA,eAAa,QAAQ;AAAA,MACrB,IAAI;AAAA,QACF,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,SAAS,MAAM,QAAQ,qBAAqB;AAAA,QAC5C,WAAW,IAAI,OAAO,kBAAkB;AAAA,QACxC,KAAK,MAAM,QAAQ,iBAAiB;AAAA,MACtC;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,IAAI,OAAO,SAAS,IAAI,EAAE,OAAO;AAAA,YACvC,eAAa,QAAQ,MAAM,SAAS;AAAA;AAAA,QACtC;AAAA,QACA,oBAAC,kBAAe,SAAkB,MAAY,SAAkB;AAAA;AAAA;AAAA,EAClE;AAEJ;AAEO,IAAM,eAA4C,MAAM,KAAK,CAAC,aAAa;AAChF,QAAM,WAAW,yBAAyB,QAAQ;AAClD,QAAM,EAAE,SAAS,SAAS,MAAM,cAAc,UAAU,IAAI;AAC5D,QAAM,YAAuB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,SAAS,YAAY,cAAc,QAAQ,CAAC;AAAA,EAC9C;AAEA,SAAO,YAAY,aACjB,oBAAC,gBAAc,GAAG,WAAW,IAE7B,oBAAC,eAAa,GAAG,WAAW;AAEhC,CAAC;AAED,aAAa,cAAc;AAE3B,IAAO,uBAAQ;","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":"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","names":[]}