@12-apps/ui 6.33.1 → 6.35.0

package/dist/chunk-CMTR3WEA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Avatar/Avatar.view.tsx"],"sourcesContent":["import MuiAvatar from '@mui/material/Avatar/index.js';\nimport Badge from '@mui/material/Badge/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport { alpha, useTheme, styled } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { pulseAnimation, rotateAnimation, scaleInAnimation, shimmerAnimation } from './Avatar.animations';\nimport {\n  AVATAR_SIZES,\n  AVATAR_TRANSITION_EASING,\n  AVATAR_TRANSITION_MS,\n  ACTIVE_SCALE,\n  BORDER_HALO_ALPHA,\n  BORDER_WIDTH,\n  FADE_MS,\n  FOCUS_RING,\n  GLOW,\n  HOVER,\n  LOADING_OVERLAY,\n  PULSE,\n  ROUNDED_RADIUS_UNITS,\n  SCALE_IN_MS,\n  SHIMMER,\n  SPINNER,\n  STATUS_DOT,\n} from './Avatar.metrics';\nimport type { AvatarSize, AvatarStatus, ContentType } from './Avatar.types';\nimport { absoluteInk, controlNeutral, neutralTones } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\nexport type { ContentType };\n\n\ninterface PaletteLike {\n  main: string;\n  contrastText?: string;\n  light?: string;\n  dark?: string;\n}\n\nconst getColorFromTheme = (theme: Theme, color: string): PaletteLike => {\n  const neutral = controlNeutral(theme);\n  const colorMap: Record<string, PaletteLike> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    // `danger`, not `error`. This map was keyed on MUI's word while the prop\n    // took the house one, so `danger` matched nothing and fell through to\n    // primary — a red avatar rendering blue, silently.\n    danger: theme.palette.error,\n    neutral: { main: neutral.main, contrastText: neutral.contrastText },\n  };\n\n  return colorMap[color] || theme.palette.primary;\n};\n\ninterface SizeStyle {\n  width: number;\n  height: number;\n}\n\n// Derived from the shared metrics, not restated: the native `Avatar` reads the\n// same table, so the two renderers cannot disagree on a box.\nconst sizeMap: Record<AvatarSize, SizeStyle> = Object.fromEntries(\n  Object.entries(AVATAR_SIZES).map(([size, step]) => [\n    size,\n    { width: step.box, height: step.box },\n  ]),\n) as Record<AvatarSize, SizeStyle>;\n\nconst getSizeStyles = (size: AvatarSize): SizeStyle => sizeMap[size] || sizeMap.md;\n\n/** The glyph size in design px, read through the type scale where it is drawn. */\nconst glyphPx = (size: AvatarSize): number => (AVATAR_SIZES[size] || AVATAR_SIZES.md).fontSize;\n\nconst getStatusColor = (status: AvatarStatus, theme: Theme): string => {\n  // The same four decisions the native half reads out of `Avatar.metrics`,\n  // against MUI's `Theme` rather than the shared one.\n  const statusColorMap: Record<AvatarStatus, string> = {\n    online: theme.palette.success.main,\n    offline: neutralTones(theme).muted,\n    away: theme.palette.warning.main,\n    busy: theme.palette.error.main,\n  };\n\n  return statusColorMap[status] || statusColorMap.offline;\n};\n\n/** Hover/active lift, only when the avatar is interactive. */\nconst interactiveStyles = (interactive: boolean | undefined, main: string): CSSObject =>\n  interactive\n    ? {\n        '&:hover': {\n          transform: `scale(${HOVER.scale}) translateY(-${HOVER.lift}px)`,\n          boxShadow: `0 ${HOVER.shadowY}px ${HOVER.shadowBlur}px ${alpha(main, HOVER.shadowAlpha)}`,\n          filter: `brightness(${HOVER.brightness})`,\n          zIndex: 10,\n        },\n        '&:active': { transform: `scale(${ACTIVE_SCALE})` },\n      }\n    : {};\n\n/** Shimmer gradient while the image loads. */\nconst loadingStyles = (isLoading: boolean | undefined, main: string): CSSObject =>\n  isLoading\n    ? {\n        background: `linear-gradient(\n        90deg,\n        ${alpha(main, SHIMMER.fromAlpha)},\n        ${alpha(main, SHIMMER.toAlpha)},\n        ${alpha(main, SHIMMER.fromAlpha)}\n      )`,\n        backgroundSize: '200% 100%',\n        animation: `${shimmerAnimation} ${SHIMMER.durationMs / 1000}s ease-in-out infinite`,\n      }\n    : {};\n\n/** Corner radius per shape variant (circle/status are round). */\nconst variantRadius = (variant: string | undefined, theme: Theme): CSSObject => {\n  if (variant === 'square') return { borderRadius: 0 };\n  if (variant === 'rounded') return { borderRadius: theme.spacing(ROUNDED_RADIUS_UNITS) };\n  return { borderRadius: '50%' };\n};\n\n/** Paper ring when bordered (e.g. inside an AvatarGroup). */\nconst borderedStyles = (bordered: boolean | undefined, theme: Theme): CSSObject =>\n  bordered\n    ? {\n        border: `${BORDER_WIDTH}px solid ${theme.palette.background.paper}`,\n        boxShadow: `0 0 0 1px ${alpha(theme.palette.divider, BORDER_HALO_ALPHA)}`,\n      }\n    : {};\n\n/** Glow adds the halo; pulse adds the expanding ring — either or both. */\nconst glowPulseStyles = (\n  glow: boolean | undefined,\n  pulse: boolean | undefined,\n  main: string,\n): CSSObject => {\n  const styles: CSSObject = {};\n  if (glow) {\n    styles.boxShadow = `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(main, GLOW.alpha)} !important`;\n    styles.filter = `brightness(${GLOW.brightness})`;\n  }\n  if (pulse) {\n    styles.position = 'relative';\n    styles['&::after'] = {\n      content: '\"\"',\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      width: '100%',\n      height: '100%',\n      borderRadius: 'inherit',\n      transform: 'translate(-50%, -50%)',\n      backgroundColor: main,\n      opacity: PULSE.alpha,\n      animation: `${pulseAnimation} ${PULSE.durationMs / 1000}s infinite`,\n      pointerEvents: 'none',\n      zIndex: -1,\n    };\n  }\n  return styles;\n};\n\ninterface StyledAvatarProps {\n  customVariant?: string;\n  customSize?: AvatarSize;\n  customColor?: string;\n  glow?: boolean;\n  pulse?: boolean;\n  bordered?: boolean;\n  isLoading?: boolean;\n  hasError?: boolean;\n  interactive?: boolean;\n}\n\nconst STYLED_AVATAR_PROPS = [\n  'customVariant',\n  'customSize',\n  'customColor',\n  'glow',\n  'pulse',\n  'bordered',\n  'isLoading',\n  'hasError',\n  'interactive',\n];\n\nconst StyledAvatar = styled(MuiAvatar, {\n  shouldForwardProp: (prop) => !STYLED_AVATAR_PROPS.includes(prop as string),\n})<StyledAvatarProps>(\n  ({\n    theme,\n    customVariant,\n    customSize = 'md',\n    customColor = 'primary',\n    glow,\n    pulse,\n    bordered,\n    isLoading,\n    hasError,\n    interactive,\n  }) => {\n    const palette = getColorFromTheme(theme, customColor);\n    return {\n      ...getSizeStyles(customSize),\n      fontSize: rem(theme, glyphPx(customSize)),\n      transition: `all ${AVATAR_TRANSITION_MS / 1000}s ${AVATAR_TRANSITION_EASING}`,\n      position: 'relative',\n      overflow: 'visible',\n      animation: `${scaleInAnimation} ${SCALE_IN_MS / 1000}s ease-out`,\n      cursor: interactive ? 'pointer' : 'default',\n      backgroundColor: hasError ? theme.palette.error.main : palette.main,\n      color: hasError ? theme.palette.error.contrastText : (palette.contrastText ?? absoluteInk(theme).white),\n      ...interactiveStyles(interactive, palette.main),\n      ...loadingStyles(isLoading, palette.main),\n      ...variantRadius(customVariant, theme),\n      ...borderedStyles(bordered, theme),\n      ...glowPulseStyles(glow, pulse, palette.main),\n      '&:focus-visible': {\n        outline: `${FOCUS_RING.width}px solid ${alpha(palette.main, FOCUS_RING.alpha)}`,\n        outlineOffset: FOCUS_RING.offset,\n      },\n    };\n  },\n);\n\nconst LoadingOverlay = styled('div')<{ size: AvatarSize }>(({ theme, size }) => {\n  const sizeStyles = getSizeStyles(size);\n  return {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: sizeStyles.width,\n    height: sizeStyles.height,\n    borderRadius: 'inherit',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: alpha(theme.palette.background.paper, LOADING_OVERLAY.paperAlpha),\n    backdropFilter: `blur(${LOADING_OVERLAY.blur}px)`,\n    '& .loading-spinner': {\n      width: sizeStyles.width * SPINNER.scale,\n      height: sizeStyles.height * SPINNER.scale,\n      border: `${SPINNER.ringWidth}px solid ${alpha(theme.palette.primary.main, SPINNER.trackAlpha)}`,\n      borderTopColor: theme.palette.primary.main,\n      borderRadius: '50%',\n      animation: `${rotateAnimation} ${SPINNER.durationMs / 1000}s linear infinite`,\n    },\n  };\n});\n\nconst StatusBadge = styled(Badge, {\n  shouldForwardProp: (prop) => !['statusColor', 'avatarSize'].includes(prop as string),\n})<{\n  statusColor?: string;\n  avatarSize?: AvatarSize;\n}>(({ theme, statusColor, avatarSize = 'md' }) => {\n  const sizeStyles = getSizeStyles(avatarSize);\n  const badgeSize = Math.max(STATUS_DOT.min, sizeStyles.width * STATUS_DOT.scale);\n\n  return {\n    '& .MuiBadge-badge': {\n      backgroundColor: statusColor || theme.palette.success.main,\n      color: statusColor || theme.palette.success.main,\n      width: badgeSize,\n      height: badgeSize,\n      borderRadius: '50%',\n      border: `${STATUS_DOT.borderWidth}px solid ${theme.palette.background.paper}`,\n      '&::after': {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        borderRadius: '50%',\n        backgroundColor: 'currentColor',\n        content: '\"\"',\n      },\n    },\n  };\n});\n\nexport interface AvatarViewProps {\n  mounted: boolean;\n  variant: string;\n  size: AvatarSize;\n  color: string;\n  glow: boolean;\n  pulse: boolean;\n  bordered: boolean;\n  showSpinner: boolean;\n  imageError: boolean;\n  clickable: boolean;\n  imgSrc?: string;\n  alt?: string;\n  ariaLabel: string;\n  content: React.ReactNode;\n  contentType: ContentType;\n  className?: string;\n  dataTestId?: string;\n  status?: AvatarStatus;\n  forwardedRef: React.Ref<HTMLDivElement>;\n  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  handleImageError: React.ReactEventHandler;\n  handleImageLoad: () => void;\n  rest: Record<string, unknown>;\n}\n\n/** The avatar box itself: the styled MUI avatar plus the loading overlay. */\nfunction AvatarSurface(props: AvatarViewProps): React.JSX.Element {\n  const { showSpinner, dataTestId, clickable } = props;\n  const testId = (suffix: string): string | undefined =>\n    dataTestId ? `${dataTestId}-${suffix}` : undefined;\n\n  return (\n    <Fade in={props.mounted} timeout={FADE_MS}>\n      <div style={{ position: 'relative', display: 'inline-block' }}>\n        <StyledAvatar\n          ref={props.forwardedRef}\n          className={props.className}\n          customVariant={props.variant}\n          customSize={props.size}\n          customColor={props.color}\n          glow={props.glow}\n          pulse={props.pulse}\n          bordered={props.bordered}\n          isLoading={showSpinner}\n          hasError={props.imageError}\n          interactive={clickable}\n          src={props.imgSrc}\n          alt={props.alt}\n          onClick={props.onClick}\n          tabIndex={clickable ? 0 : undefined}\n          role={clickable ? 'button' : undefined}\n          aria-label={props.ariaLabel}\n          data-testid={dataTestId}\n          {...props.rest}\n          // Load/error fire on the inner <img>, not the root — and don't bubble.\n          // Wiring them via the img slot lets `imageLoading` actually clear (else\n          // the spinner overlays the avatar forever whenever `src` is set). Keep\n          // after {...props.rest} so a consumer-supplied slotProps can't override\n          // and detach these handlers.\n          slotProps={{ img: { onError: props.handleImageError, onLoad: props.handleImageLoad } }}\n        >\n          {showSpinner ? null : (\n            <span data-testid={testId(props.contentType)}>{props.content}</span>\n          )}\n        </StyledAvatar>\n        {showSpinner && (\n          <LoadingOverlay size={props.size} data-testid={testId('loading')}>\n            <div className=\"loading-spinner\" data-testid={testId('loading-spinner')} />\n          </LoadingOverlay>\n        )}\n      </div>\n    </Fade>\n  );\n}\n\n/** Presentational avatar: the surface, wrapped in a status dot badge when requested. */\nexport function AvatarView(props: AvatarViewProps): React.JSX.Element {\n  const theme = useTheme();\n  const surface = <AvatarSurface {...props} />;\n\n  if (props.variant === 'status' && props.status) {\n    return (\n      <StatusBadge\n        overlap=\"circular\"\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        variant=\"dot\"\n        statusColor={getStatusColor(props.status, theme)}\n        avatarSize={props.size}\n        data-testid={props.dataTestId ? `${props.dataTestId}-badge` : undefined}\n      >\n        {surface}\n      </StatusBadge>\n    );\n  }\n\n  return surface;\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-COYGTEN5.js

@@ -0,0 +1,88 @@
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/list-card-cells.tsx
+import { createContext, useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ALIGN_ITEMS = { start: "flex-start", center: "center", end: "flex-end" };
+var TEXT_ALIGN = { start: "left", center: "center", end: "right" };
+var DEFAULT_CELL_WIDTH = "minmax(0, 1fr)";
+function cellTracks(cells) {
+  return (cells ?? []).map((cell) => cell.width ?? DEFAULT_CELL_WIDTH);
+}
+var CellConfigContext = createContext(null);
+function CellConfigProvider({
+  cells,
+  children
+}) {
+  return /* @__PURE__ */ jsx(CellConfigContext.Provider, { value: cells ?? null, children });
+}
+function useCellConfig() {
+  return useContext(CellConfigContext);
+}
+function Cell({
+  config,
+  row
+}) {
+  const align = config.align ?? "start";
+  const numeric = align === "end" ? { fontVariantNumeric: "tabular-nums" } : {};
+  const clamp = {
+    minWidth: 0,
+    maxWidth: "100%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  };
+  const secondary = config.secondary?.(row);
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      "data-slot": `cell-${config.id}`,
+      sx: {
+        minWidth: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: ALIGN_ITEMS[align],
+        justifyContent: "center",
+        textAlign: TEXT_ALIGN[align]
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          default2,
+          {
+            component: "span",
+            sx: { ...clamp, fontSize: sxRem(14), fontWeight: config.strong ? 700 : 600, lineHeight: 1.25, ...numeric },
+            children: config.primary(row)
+          }
+        ),
+        secondary != null && /* @__PURE__ */ jsx(
+          default2,
+          {
+            component: "span",
+            sx: { ...clamp, fontSize: sxRem(12.5), lineHeight: 1.3, color: "text.secondary", ...numeric },
+            children: secondary
+          }
+        )
+      ]
+    }
+  );
+}
+function ListCardCells({
+  cells,
+  row
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: cells.map((config) => /* @__PURE__ */ jsx(Cell, { config, row }, config.id)) });
+}
+
+export {
+  DEFAULT_CELL_WIDTH,
+  cellTracks,
+  CellConfigProvider,
+  useCellConfig,
+  ListCardCells
+};
+//# sourceMappingURL=chunk-COYGTEN5.js.map

package/dist/chunk-COYGTEN5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/list-card-cells.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, type ReactNode } from \"react\";\n\nimport { Box } from \"../../../mui/Box\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/**\n * THE CELL CONFIG — the list declares its columns once, every row obeys them.\n *\n * The row used to name its middle slots: a title, a subtitle beneath it, then\n * labelled `meta` pairs, then a value, then a status. That vocabulary was the\n * mistake twice over. It reads as a description of every list, and no list is\n * quite that shape — so a consumer wanting a date over a time, or an order\n * number over the client who placed it, had to pick whichever named slot was\n * least wrong and take its styling with it. And because each row decided its own\n * content, alignment across a list was a convention the rows could break.\n *\n * So cells are CONFIGURED, the way a data grid's columns are: the list declares\n * them once, and every card renders the same columns in the same tracks from its\n * own row. Two cards cannot disagree about the shape of the list, because\n * neither of them is deciding it.\n *\n * THE SECOND LINE IS AN OPTION, NOT A SUBTITLE. `secondary` is not \"the small\n * grey text under the title\" — it is the cell's second line, for whatever pairs\n * naturally in this list: date over time, name over e-mail, pedido over cliente.\n * It carries no meaning the config did not put there, and a cell that wants one\n * line simply omits it.\n */\nexport interface ListCardCellConfig<T extends Record<string, unknown> = Record<string, unknown>> {\n  /** Stable key. Also the cell's `data-slot`, so a test can find it by name. */\n  id: string;\n  /** The cell's first line, from the row. */\n  primary: (row: T) => ReactNode;\n  /** An optional second line beneath it. Anything that pairs with the first. */\n  secondary?: (row: T) => ReactNode;\n  /**\n   * Which edge the lines sit on. `end` is what a column of numbers wants, so its\n   * digits line up with the values above and below it — and it switches the cell\n   * to tabular figures, since nothing else ever asks for that alignment.\n   */\n  align?: \"start\" | \"center\" | \"end\";\n  /**\n   * This cell's track, as a `grid-template-columns` entry. Defaults to an even\n   * share of the spare width.\n   *\n   * A cell holding a number usually wants `max-content`: the rail is then as\n   * wide as the widest amount in the list and no wider, and its right edge does\n   * not move when a longer row arrives.\n   */\n  width?: string;\n  /** Emphasise the first line — for the one figure the row is really about. */\n  strong?: boolean;\n}\n\nconst ALIGN_ITEMS = { start: \"flex-start\", center: \"center\", end: \"flex-end\" } as const;\nconst TEXT_ALIGN = { start: \"left\", center: \"center\", end: \"right\" } as const;\n\n/** The default track: an even share of whatever width the row has spare. */\nexport const DEFAULT_CELL_WIDTH = \"minmax(0, 1fr)\";\n\n/** The tracks a cell config asks for, in order. */\nexport function cellTracks(cells: readonly ListCardCellConfig<never>[] | undefined): string[] {\n  return (cells ?? []).map((cell) => cell.width ?? DEFAULT_CELL_WIDTH);\n}\n\n/**\n * The config handed down by the list.\n *\n * A card inside a group takes its columns from here rather than from props, so\n * there is exactly one declaration of the list's shape and no way for a row to\n * hold a different one.\n */\nconst CellConfigContext = createContext<readonly ListCardCellConfig<never>[] | null>(null);\n\nexport function CellConfigProvider({\n  cells,\n  children,\n}: {\n  cells: readonly ListCardCellConfig<never>[] | undefined;\n  children: ReactNode;\n}): React.JSX.Element {\n  return <CellConfigContext.Provider value={cells ?? null}>{children}</CellConfigContext.Provider>;\n}\n\n/** The list's cell config, if it declared one. */\nexport function useCellConfig(): readonly ListCardCellConfig<never>[] | null {\n  return useContext(CellConfigContext);\n}\n\n/**\n * One cell rendered from its config.\n *\n * Both lines truncate rather than wrap: a row is a fixed-height scanning unit,\n * and a cell that grows to two lines because one name was long drags every rail\n * on that row down with it. Whatever does not fit belongs in the expandable\n * body, which is the entire reason the body exists.\n */\nfunction Cell<T extends Record<string, unknown>>({\n  config,\n  row,\n}: {\n  config: ListCardCellConfig<T>;\n  row: T;\n}): React.JSX.Element {\n  const align = config.align ?? \"start\";\n  const numeric = align === \"end\" ? { fontVariantNumeric: \"tabular-nums\" } : {};\n  const clamp = {\n    minWidth: 0,\n    maxWidth: \"100%\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  } as const;\n  const secondary = config.secondary?.(row);\n  return (\n    <Box\n      data-slot={`cell-${config.id}`}\n      sx={{\n        minWidth: 0,\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: ALIGN_ITEMS[align],\n        justifyContent: \"center\",\n        textAlign: TEXT_ALIGN[align],\n      }}\n    >\n      <Box\n        component=\"span\"\n        sx={{ ...clamp, fontSize: sxRem(14), fontWeight: config.strong ? 700 : 600, lineHeight: 1.25, ...numeric }}\n      >\n        {config.primary(row)}\n      </Box>\n      {secondary != null && (\n        <Box\n          component=\"span\"\n          sx={{ ...clamp, fontSize: sxRem(12.5), lineHeight: 1.3, color: \"text.secondary\", ...numeric }}\n        >\n          {secondary}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\n/** Every configured cell of a row, in the list's declared order. */\nexport function ListCardCells<T extends Record<string, unknown>>({\n  cells,\n  row,\n}: {\n  cells: readonly ListCardCellConfig<T>[];\n  row: T;\n}): React.JSX.Element {\n  return (\n    <>\n      {cells.map((config) => (\n        <Cell key={config.id} config={config} row={row} />\n      ))}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,eAAe,kBAAkC;AAgFjD,SAwEL,UAxEK,KAkCL,YAlCK;AA3BT,IAAM,cAAc,EAAE,OAAO,cAAc,QAAQ,UAAU,KAAK,WAAW;AAC7E,IAAM,aAAa,EAAE,OAAO,QAAQ,QAAQ,UAAU,KAAK,QAAQ;AAG5D,IAAM,qBAAqB;AAG3B,SAAS,WAAW,OAAmE;AAC5F,UAAQ,SAAS,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,SAAS,kBAAkB;AACrE;AASA,IAAM,oBAAoB,cAA2D,IAAI;AAElF,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAGsB;AACpB,SAAO,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,SAAS,MAAO,UAAS;AACrE;AAGO,SAAS,gBAA6D;AAC3E,SAAO,WAAW,iBAAiB;AACrC;AAUA,SAAS,KAAwC;AAAA,EAC/C;AAAA,EACA;AACF,GAGsB;AACpB,QAAM,QAAQ,OAAO,SAAS;AAC9B,QAAM,UAAU,UAAU,QAAQ,EAAE,oBAAoB,eAAe,IAAI,CAAC;AAC5E,QAAM,QAAQ;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACA,QAAM,YAAY,OAAO,YAAY,GAAG;AACxC,SACE;AAAA,IAACA;AAAA,IAAA;AAAA,MACC,aAAW,QAAQ,OAAO,EAAE;AAAA,MAC5B,IAAI;AAAA,QACF,UAAU;AAAA,QACV,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY,YAAY,KAAK;AAAA,QAC7B,gBAAgB;AAAA,QAChB,WAAW,WAAW,KAAK;AAAA,MAC7B;AAAA,MAEA;AAAA;AAAA,UAACA;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,EAAE,GAAG,OAAO,UAAU,MAAM,EAAE,GAAG,YAAY,OAAO,SAAS,MAAM,KAAK,YAAY,MAAM,GAAG,QAAQ;AAAA,YAExG,iBAAO,QAAQ,GAAG;AAAA;AAAA,QACrB;AAAA,QACC,aAAa,QACZ;AAAA,UAACA;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,EAAE,GAAG,OAAO,UAAU,MAAM,IAAI,GAAG,YAAY,KAAK,OAAO,kBAAkB,GAAG,QAAQ;AAAA,YAE3F;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAGO,SAAS,cAAiD;AAAA,EAC/D;AAAA,EACA;AACF,GAGsB;AACpB,SACE,gCACG,gBAAM,IAAI,CAAC,WACV,oBAAC,QAAqB,QAAgB,OAA3B,OAAO,EAA8B,CACjD,GACH;AAEJ;","names":["default"]}

package/dist/chunk-CPTY6UZ6.js

@@ -0,0 +1,124 @@
+import {
+  TOUCH_TARGET,
+  displayAcrossRail
+} from "./chunk-LIG7TKIB.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/layout/SettingsLayout/SettingsSectionHeader.tsx
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import Box from "@mui/material/Box/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CLIP = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+function HeaderText({
+  title,
+  description
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "h2",
+        sx: { m: 0, font: "inherit", fontSize: sxRem(16), fontWeight: 600, lineHeight: 1.3, ...CLIP },
+        children: title
+      }
+    ),
+    description !== void 0 && description !== "" && /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "p",
+        sx: {
+          m: 0,
+          font: "inherit",
+          fontSize: sxRem(13),
+          color: "text.secondary",
+          lineHeight: 1.35,
+          ...CLIP
+        },
+        children: description
+      }
+    )
+  ] });
+}
+function SettingsSectionHeader({
+  href,
+  backLabel,
+  title,
+  description,
+  breakpoint,
+  linkComponent,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": `${testIdPrefix}-section-header`,
+      sx: (theme) => ({
+        ...displayAcrossRail(theme, breakpoint, "flex", "none"),
+        alignItems: "center",
+        gap: 1.5,
+        minWidth: 0,
+        // ITS OWN SURFACE, not the panel's.
+        //
+        // The header, the chip strip and the first card were all the same
+        // white, so nothing said where "you are here" ended and the screen
+        // began — the eye had only the type sizes to go on. A tint plus the
+        // rule below turns three stacked runs of text into two blocks.
+        //
+        // `paper` against a `default` panel rather than a hand-picked grey, so
+        // it tracks the host's theme (and its dark mode) instead of being a
+        // light-mode constant that goes wrong the moment the palette does.
+        bgcolor: "background.paper",
+        px: 1.5,
+        pt: 1.5,
+        pb: 1.5,
+        mb: 1,
+        borderRadius: 1,
+        // A rule under the header, because what follows it is the sibling strip
+        // — a row of other sections. Without a line the section's own name and
+        // the chip naming a DIFFERENT section sit in one undifferentiated
+        // block, which reads as one navigation rather than as "you are here"
+        // above "go elsewhere".
+        borderBottom: 1,
+        borderColor: "divider"
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: linkComponent,
+            href,
+            "aria-label": backLabel,
+            "data-testid": `${testIdPrefix}-back`,
+            sx: (theme) => ({
+              flex: "0 0 auto",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: TOUCH_TARGET,
+              height: TOUCH_TARGET,
+              border: 1,
+              borderColor: "divider",
+              borderRadius: 2,
+              color: "text.primary",
+              textDecoration: "none",
+              "&:hover": { backgroundColor: theme.palette.action.hover }
+            }),
+            children: /* @__PURE__ */ jsx(ChevronLeftIcon, { fontSize: "small" })
+          }
+        ),
+        /* @__PURE__ */ jsx(HeaderText, { title, description })
+      ]
+    }
+  );
+}
+
+export {
+  SettingsSectionHeader
+};
+//# sourceMappingURL=chunk-CPTY6UZ6.js.map

package/dist/chunk-CPTY6UZ6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsSectionHeader.tsx"],"sourcesContent":["'use client';\n\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport Box from '@mui/material/Box/index.js';\nimport React from 'react';\n\nimport { displayAcrossRail, TOUCH_TARGET } from './SettingsLayout.styles';\nimport type { SettingsLayoutProps, SettingsRailBreakpoint } from './SettingsLayout.types';\nimport { sxRem } from '../../../tokens/relative';\n\n/** One line that must not wrap, whatever the section is called. */\nconst CLIP = {\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n} as const;\n\n/**\n * The name of where you are, and optionally what it holds.\n *\n * `minWidth: 0` on the wrapper is what lets the clipping work at all: without\n * it a flex item refuses to shrink below its content, so a long section name\n * pushes the back button off the row instead of ellipsising.\n */\nfunction HeaderText({\n  title,\n  description,\n}: {\n  title: string;\n  description?: string;\n}): React.JSX.Element {\n  return (\n    <Box sx={{ minWidth: 0 }}>\n      <Box\n        component=\"h2\"\n        sx={{ m: 0, font: 'inherit', fontSize: sxRem(16), fontWeight: 600, lineHeight: 1.3, ...CLIP }}\n      >\n        {title}\n      </Box>\n      {description !== undefined && description !== '' && (\n        <Box\n          component=\"p\"\n          sx={{\n            m: 0,\n            font: 'inherit',\n            fontSize: sxRem(13),\n            color: 'text.secondary',\n            lineHeight: 1.35,\n            ...CLIP,\n          }}\n        >\n          {description}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\n/**\n * The narrow-width panel header: a back control, and the name of where you are.\n *\n * ## Why this replaced a \"‹ Voltar\" link\n *\n * The bare link spent a whole row saying only that a back existed. Under it came\n * the sibling chips and under those the section's own Salvar, so three stacked\n * rows went by before the first field — on the width with the least room for\n * them. Worse, none of the three said WHICH section was open: the chips mark the\n * active one, but a chip strip scrolls, so the answer could be off-screen.\n *\n * Folding the control into a square button beside the title buys back a row and\n * makes the header say where you are, which is what a header is for.\n *\n * ## Narrow only, and mounted at every width\n *\n * `displayAcrossRail` hides this above the breakpoint rather than unmounting it,\n * for the reason the whole component works that way: navigation that exists at\n * one width and not the other is navigation nothing can assert about. Above the\n * breakpoint the rail is on screen with the open row marked, so a back control\n * would point at a list already visible.\n *\n * The button is `TOUCH_TARGET` square because this is the phone shape, and it\n * keeps the accessible name — the visible text is the section, not the verb, so\n * a screen reader still hears \"Voltar\" rather than being handed an icon.\n */\nexport function SettingsSectionHeader({\n  href,\n  backLabel,\n  title,\n  description,\n  breakpoint,\n  linkComponent,\n  testIdPrefix,\n}: {\n  href: string;\n  backLabel: string;\n  title: string;\n  description?: string;\n  breakpoint: SettingsRailBreakpoint;\n  linkComponent: NonNullable<SettingsLayoutProps['linkComponent']>;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      data-testid={`${testIdPrefix}-section-header`}\n      sx={(theme) => ({\n        ...displayAcrossRail(theme, breakpoint, 'flex', 'none'),\n        alignItems: 'center',\n        gap: 1.5,\n        minWidth: 0,\n        // ITS OWN SURFACE, not the panel's.\n        //\n        // The header, the chip strip and the first card were all the same\n        // white, so nothing said where \"you are here\" ended and the screen\n        // began — the eye had only the type sizes to go on. A tint plus the\n        // rule below turns three stacked runs of text into two blocks.\n        //\n        // `paper` against a `default` panel rather than a hand-picked grey, so\n        // it tracks the host's theme (and its dark mode) instead of being a\n        // light-mode constant that goes wrong the moment the palette does.\n        bgcolor: 'background.paper',\n        px: 1.5,\n        pt: 1.5,\n        pb: 1.5,\n        mb: 1,\n        borderRadius: 1,\n        // A rule under the header, because what follows it is the sibling strip\n        // — a row of other sections. Without a line the section's own name and\n        // the chip naming a DIFFERENT section sit in one undifferentiated\n        // block, which reads as one navigation rather than as \"you are here\"\n        // above \"go elsewhere\".\n        borderBottom: 1,\n        borderColor: 'divider',\n      })}\n    >\n      <Box\n        component={linkComponent}\n        href={href}\n        aria-label={backLabel}\n        data-testid={`${testIdPrefix}-back`}\n        sx={(theme) => ({\n          flex: '0 0 auto',\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: TOUCH_TARGET,\n          height: TOUCH_TARGET,\n          border: 1,\n          borderColor: 'divider',\n          borderRadius: 2,\n          color: 'text.primary',\n          textDecoration: 'none',\n          '&:hover': { backgroundColor: theme.palette.action.hover },\n        })}\n      >\n        <ChevronLeftIcon fontSize=\"small\" />\n      </Box>\n\n      <HeaderText title={title} description={description} />\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;AAEA,OAAO,qBAAqB;AAC5B,OAAO,SAAS;AA6BZ,SACE,KADF;AArBJ,IAAM,OAAO;AAAA,EACX,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AASA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AACF,GAGsB;AACpB,SACE,qBAAC,OAAI,IAAI,EAAE,UAAU,EAAE,GACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,IAAI,EAAE,GAAG,GAAG,MAAM,WAAW,UAAU,MAAM,EAAE,GAAG,YAAY,KAAK,YAAY,KAAK,GAAG,KAAK;AAAA,QAE3F;AAAA;AAAA,IACH;AAAA,IACC,gBAAgB,UAAa,gBAAgB,MAC5C;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,IAAI;AAAA,UACF,GAAG;AAAA,UACH,MAAM;AAAA,UACN,UAAU,MAAM,EAAE;AAAA,UAClB,OAAO;AAAA,UACP,YAAY;AAAA,UACZ,GAAG;AAAA,QACL;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AA4BO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQsB;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,GAAG,YAAY;AAAA,MAC5B,IAAI,CAAC,WAAW;AAAA,QACd,GAAG,kBAAkB,OAAO,YAAY,QAAQ,MAAM;AAAA,QACtD,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWV,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMd,cAAc;AAAA,QACd,aAAa;AAAA,MACf;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX;AAAA,YACA,cAAY;AAAA,YACZ,eAAa,GAAG,YAAY;AAAA,YAC5B,IAAI,CAAC,WAAW;AAAA,cACd,MAAM;AAAA,cACN,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,cAChB,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,QAAQ;AAAA,cACR,aAAa;AAAA,cACb,cAAc;AAAA,cACd,OAAO;AAAA,cACP,gBAAgB;AAAA,cAChB,WAAW,EAAE,iBAAiB,MAAM,QAAQ,OAAO,MAAM;AAAA,YAC3D;AAAA,YAEA,8BAAC,mBAAgB,UAAS,SAAQ;AAAA;AAAA,QACpC;AAAA,QAEA,oBAAC,cAAW,OAAc,aAA0B;AAAA;AAAA;AAAA,EACtD;AAEJ;","names":[]}

package/dist/chunk-CRZXSZ5O.js

@@ -0,0 +1,34 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Pagination
+} from "./chunk-YVUD3MY4.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+
+// src/components/data-display/DataViews/data-views-pagination.tsx
+import { jsx } from "react/jsx-runtime";
+function DataViewsPagination({
+  c,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  if (!c.serverMode || c.serverPageCount <= 1) return null;
+  return /* @__PURE__ */ jsx(default2, { sx: { mt: 2, display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      pageSizeLabel: copy.nav.pageSize,
+      page: c.serverPage,
+      count: c.serverPageCount,
+      onChange: (_event, page) => c.changePage(page),
+      dataTestId: `${testIdPrefix}-pagination`
+    }
+  ) });
+}
+
+export {
+  DataViewsPagination
+};
+//# sourceMappingURL=chunk-CRZXSZ5O.js.map

package/dist/chunk-CS3RKXT5.js

@@ -0,0 +1,67 @@
+import {
+  GridToolbar
+} from "./chunk-YSKGLU2V.js";
+
+// src/components/data-display/DataViews/data-views-shell-toolbar.tsx
+import { jsx } from "react/jsx-runtime";
+function ShellToolbar({
+  c,
+  rows,
+  testIdPrefix,
+  rowActions,
+  bulkActions,
+  selectionExtra,
+  toolbarRightSlot,
+  showInline,
+  compactControls,
+  counterHidden,
+  sortKinds,
+  displayView,
+  exportConfig,
+  filterControls,
+  barRef
+}) {
+  const columnOptions = c.hideableColumns.map((col) => ({
+    id: col.id,
+    label: col.label,
+    visible: c.state.visibleColumns.includes(col.id)
+  }));
+  return /* @__PURE__ */ jsx(
+    GridToolbar,
+    {
+      c,
+      sortKinds,
+      displayView,
+      exportConfig,
+      filterControls,
+      barRef,
+      compactControls,
+      counterHidden,
+      testIdPrefix,
+      selectedRows: c.selectedRows,
+      selectAll: c.selectAll,
+      clearSelection: c.clearSelection,
+      rowActions,
+      bulkActions,
+      selectionExtra,
+      sortFields: c.resolvedSortFields,
+      activeSortField: c.activeSortField,
+      activeSortOrder: c.activeSortOrder,
+      onChangeSort: (field, order) => c.patch({ sortBy: [{ id: field, dir: order }] }),
+      matchedCount: c.matched.length,
+      totalCount: c.serverMode ? c.serverTotalCount : rows.length,
+      toolbarRightSlot,
+      columnOptions,
+      onToggleColumn: c.toggleColumn,
+      filterOpen: c.filterOpen,
+      setFilterOpen: c.setFilterOpen,
+      activeFilterCount: c.activeFilterCount,
+      showFilterTrigger: !showInline
+    }
+  );
+}
+
+export {
+  ShellToolbar
+};
+//# sourceMappingURL=chunk-CS3RKXT5.js.map

package/dist/chunk-CSTAQX2B.js

@@ -0,0 +1,152 @@
+import {
+  SettingsStatusMarker
+} from "./chunk-2OIP3T5O.js";
+import {
+  TOUCH_TARGET
+} from "./chunk-LIG7TKIB.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/layout/SettingsLayout/SettingsSectionChips.tsx
+import Box from "@mui/material/Box/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CHIP_HEIGHT = 34;
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function useCentreActiveChip(stripRef, activeItemId, itemsKey) {
+  useEffect(() => {
+    const strip = stripRef.current;
+    if (!strip || !activeItemId) return;
+    const chip = Array.from(strip.children).find(
+      (node) => node instanceof HTMLElement && node.dataset.chipId === activeItemId
+    );
+    if (!chip) return;
+    if (typeof strip.scrollTo !== "function") return;
+    const target = chip.offsetLeft + chip.offsetWidth / 2 - strip.clientWidth / 2;
+    const left = Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));
+    strip.scrollTo({ left, behavior: prefersReducedMotion() ? "auto" : "smooth" });
+  }, [stripRef, activeItemId, itemsKey]);
+}
+function SectionChip({
+  item,
+  active,
+  theme,
+  linkComponent,
+  onSelectItem,
+  testIdPrefix
+}) {
+  const asLink = item.href !== void 0 && linkComponent !== void 0;
+  const behaviour = asLink ? { component: linkComponent, href: item.href } : { component: "button", type: "button", onClick: () => onSelectItem?.(item.id) };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...behaviour,
+      "data-chip-id": item.id,
+      "data-testid": `${testIdPrefix}-chip-${item.id}`,
+      "aria-current": active ? "page" : void 0,
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.75,
+        flex: "0 0 auto",
+        position: "relative",
+        // The chip LOOKS this tall; it is still tapped at `TOUCH_TARGET`.
+        //
+        // Shrinking `minHeight` alone would have bought a slimmer strip with a
+        // smaller hit area — on the one width where the strip IS the navigation
+        // and the input is a thumb. The `::after` below keeps the tappable
+        // region at the full target while the pill itself takes less room, so
+        // this is a visual change and not an accessibility trade.
+        minHeight: CHIP_HEIGHT,
+        px: 1.5,
+        borderRadius: 999,
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: rem(theme, 13),
+        fontWeight: active ? 700 : 500,
+        textDecoration: "none",
+        whiteSpace: "nowrap",
+        color: active ? "primary.main" : "text.secondary",
+        bgcolor: active ? alpha(theme.palette.primary.main, 0.12) : "transparent",
+        border: `1px solid ${active ? alpha(theme.palette.primary.main, 0.4) : theme.palette.divider}`,
+        // Spans the chip's width only, so neighbours never overlap: the strip
+        // is a row, and the extra reach is vertical.
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          insetInlineStart: 0,
+          insetInlineEnd: 0,
+          top: "50%",
+          transform: "translateY(-50%)",
+          height: TOUCH_TARGET
+        }
+      },
+      children: [
+        item.status ? /* @__PURE__ */ jsx(
+          SettingsStatusMarker,
+          {
+            status: item.status,
+            label: item.statusLabel,
+            testId: `${testIdPrefix}-chip-status-${item.id}`
+          }
+        ) : null,
+        item.label
+      ]
+    }
+  );
+}
+function SettingsSectionChips({
+  items,
+  activeItemId,
+  ariaLabel,
+  linkComponent,
+  onSelectItem,
+  testIdPrefix
+}) {
+  const theme = useTheme();
+  const stripRef = useRef(null);
+  useCentreActiveChip(stripRef, activeItemId, items.map((item) => item.id).join("\0"));
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: stripRef,
+      component: "nav",
+      "aria-label": ariaLabel,
+      "data-testid": `${testIdPrefix}-chips`,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 0.75,
+        px: 0.25,
+        py: 0.25,
+        overflowX: "auto",
+        overflowY: "hidden",
+        scrollbarWidth: "none",
+        "&::-webkit-scrollbar": { display: "none" }
+      },
+      children: items.map((item) => /* @__PURE__ */ jsx(
+        SectionChip,
+        {
+          item,
+          active: item.id === activeItemId,
+          theme,
+          linkComponent,
+          onSelectItem,
+          testIdPrefix
+        },
+        item.id
+      ))
+    }
+  );
+}
+SettingsSectionChips.displayName = "SettingsSectionChips";
+
+export {
+  SettingsSectionChips
+};
+//# sourceMappingURL=chunk-CSTAQX2B.js.map

package/dist/chunk-CSTAQX2B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsSectionChips.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport { alpha, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React, { useEffect, useRef, type RefObject } from 'react';\n\nimport { SettingsStatusMarker } from './SettingsStatusMarker';\nimport { TOUCH_TARGET } from './SettingsLayout.styles';\nimport { rem } from '../../../tokens/relative';\n\n/**\n * The chip's drawn height, against `TOUCH_TARGET`'s 44 for the tappable one.\n *\n * The strip sits between a section's header and its first field on the width\n * with the least room for either, so the pill is sized to its text rather than\n * to the thumb — and the thumb is served by the hit area instead.\n */\nconst CHIP_HEIGHT = 34;\nimport type { SettingsLayoutProps, SettingsNavItem } from './SettingsLayout.types';\n\nexport interface SettingsSectionChipsProps {\n  /** The sibling sections to offer — usually the open item's own group. */\n  items: SettingsNavItem[];\n  /** Which one is open. */\n  activeItemId?: string;\n  /** Accessible name of the strip, in the host's language. */\n  ariaLabel: string;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}\n\n/** True when the visitor asked the OS for less movement. Re-read per scroll. */\nfunction prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Keep the open section's chip in view, however the visitor got here.\n *\n * Keyed on `activeItemId` in an effect rather than done in a click handler:\n * arriving by the desktop rail, by a card, by a pasted link and by the browser's\n * back button all have to land the same way, and only one of those is a click on\n * a chip. Every re-render otherwise starts the strip at scroll 0, which parks\n * the active chip off the right edge on any list longer than a screen — the\n * visitor is told where they are by an element they cannot see.\n *\n * `itemsKey` rather than `items`: a host almost always rebuilds that array per\n * render (`groups.flatMap(...)`), and depending on it would re-run this on every\n * render and yank the strip back mid-drag.\n *\n * The key joins on NUL — as the ESCAPE `'\\u0000'`, which it must stay. A\n * literal NUL byte works identically at runtime and makes git classify this file\n * as BINARY: `git diff` prints \"Binary file not shown\" and the GitHub review UI\n * shows nothing at all. This file shipped that way once, and the cost was not\n * the byte — it was a whole change nobody could read.\n */\nfunction useCentreActiveChip(\n  stripRef: RefObject<HTMLDivElement | null>,\n  activeItemId: string | undefined,\n  itemsKey: string,\n): void {\n  useEffect(() => {\n    const strip = stripRef.current;\n    if (!strip || !activeItemId) return;\n    // Walked rather than selected: an id is host data, and a section id carrying\n    // a quote would turn a selector string into a thrown SyntaxError — which\n    // here would take the whole strip down to centre one chip.\n    const chip = Array.from(strip.children).find(\n      (node): node is HTMLElement =>\n        node instanceof HTMLElement && node.dataset.chipId === activeItemId,\n    );\n    if (!chip) return;\n    // Feature-checked, not assumed. `Element.scrollTo` is absent in jsdom and in\n    // a few embedded webviews, and an unguarded call there THROWS out of an\n    // effect — which React escalates to the nearest error boundary. The whole\n    // settings area would go down to centre one chip, and the host's own tests\n    // could not render the shell at all. Same reasoning as walking the children\n    // instead of building a selector: nothing in here is worth a crash.\n    if (typeof strip.scrollTo !== 'function') return;\n    const target = chip.offsetLeft + chip.offsetWidth / 2 - strip.clientWidth / 2;\n    const left = Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));\n    strip.scrollTo({ left, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });\n  }, [stripRef, activeItemId, itemsKey]);\n}\n\n/** One chip: a link when the host gave it a target, else a button. */\nfunction SectionChip({\n  item,\n  active,\n  theme,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: {\n  item: SettingsNavItem;\n  active: boolean;\n  theme: Theme;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const asLink = item.href !== undefined && linkComponent !== undefined;\n  const behaviour = asLink\n    ? { component: linkComponent, href: item.href }\n    : { component: 'button' as const, type: 'button' as const, onClick: () => onSelectItem?.(item.id) };\n\n  return (\n    <Box\n      {...behaviour}\n      data-chip-id={item.id}\n      data-testid={`${testIdPrefix}-chip-${item.id}`}\n      aria-current={active ? 'page' : undefined}\n      sx={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: 0.75,\n        flex: '0 0 auto',\n        position: 'relative',\n        // The chip LOOKS this tall; it is still tapped at `TOUCH_TARGET`.\n        //\n        // Shrinking `minHeight` alone would have bought a slimmer strip with a\n        // smaller hit area — on the one width where the strip IS the navigation\n        // and the input is a thumb. The `::after` below keeps the tappable\n        // region at the full target while the pill itself takes less room, so\n        // this is a visual change and not an accessibility trade.\n        minHeight: CHIP_HEIGHT,\n        px: 1.5,\n        borderRadius: 999,\n        cursor: 'pointer',\n        font: 'inherit',\n        fontSize: rem(theme, 13),\n        fontWeight: active ? 700 : 500,\n        textDecoration: 'none',\n        whiteSpace: 'nowrap',\n        color: active ? 'primary.main' : 'text.secondary',\n        bgcolor: active ? alpha(theme.palette.primary.main, 0.12) : 'transparent',\n        border: `1px solid ${active ? alpha(theme.palette.primary.main, 0.4) : theme.palette.divider}`,\n        // Spans the chip's width only, so neighbours never overlap: the strip\n        // is a row, and the extra reach is vertical.\n        '&::after': {\n          content: '\"\"',\n          position: 'absolute',\n          insetInlineStart: 0,\n          insetInlineEnd: 0,\n          top: '50%',\n          transform: 'translateY(-50%)',\n          height: TOUCH_TARGET,\n        },\n      }}\n    >\n      {item.status ? (\n        <SettingsStatusMarker\n          status={item.status}\n          label={item.statusLabel}\n          testId={`${testIdPrefix}-chip-status-${item.id}`}\n        />\n      ) : null}\n      {item.label}\n    </Box>\n  );\n}\n\n/**\n * The narrow-width section strip: horizontally scrollable chips for the sections\n * beside the open one.\n *\n * It clips its own overflow — `overflow-x: auto` on the strip, never on an\n * ancestor. A strip that pushes the page wide makes every OTHER screen at that\n * width scroll sideways too, and the cause is nowhere near the symptom.\n */\nexport function SettingsSectionChips({\n  items,\n  activeItemId,\n  ariaLabel,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: SettingsSectionChipsProps): React.JSX.Element {\n  const theme = useTheme();\n  const stripRef = useRef<HTMLDivElement | null>(null);\n  useCentreActiveChip(stripRef, activeItemId, items.map((item) => item.id).join('\\u0000'));\n\n  return (\n    <Box\n      ref={stripRef}\n      component=\"nav\"\n      aria-label={ariaLabel}\n      data-testid={`${testIdPrefix}-chips`}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 0.75,\n        px: 0.25,\n        py: 0.25,\n        overflowX: 'auto',\n        overflowY: 'hidden',\n        scrollbarWidth: 'none',\n        '&::-webkit-scrollbar': { display: 'none' },\n      }}\n    >\n      {items.map((item) => (\n        <SectionChip\n          key={item.id}\n          item={item}\n          active={item.id === activeItemId}\n          theme={theme}\n          linkComponent={linkComponent}\n          onSelectItem={onSelectItem}\n          testIdPrefix={testIdPrefix}\n        />\n      ))}\n    </Box>\n  );\n}\n\nSettingsSectionChips.displayName = 'SettingsSectionChips';\n"],"mappings":"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","names":[]}