@12-apps/ui 6.24.3 → 6.24.5

package/src/components/layout/ContentToolbar/ContentToolbar.tsx

@@ -60,11 +60,24 @@ function SelectionCluster({
       sx={{
         display: 'flex',
         minWidth: 0,
-        // Mobile: don't grow, so the controls sit on the SAME line as the checkbox
-        // (no orphaned selection row). Desktop: grow to push controls right.
-        flex: { xs: '0 0 auto', md: 1 },
+        // Browsing (mobile): don't grow, so the controls sit on the SAME line as
+        // the checkbox (no orphaned selection row). Desktop: grow to push
+        // controls right.
+        //
+        // SELECTING (mobile) it must be able to shrink instead. Its children are
+        // all `flex-shrink: 0`, so a cluster pinned at content width cannot wrap
+        // and the row painted past the toolbar's own edge — on Produtos at 390px
+        // that took "Ações" off-screen behind a sideways scroll, which is the
+        // one control the selection exists to reach.
+        flex: { xs: hasSelection ? '1 1 auto' : '0 0 auto', md: 1 },
         alignItems: 'center',
-        gap: 1.5,
+        // Wrapping is the phone's answer, and only the phone's: below `md` the
+        // cluster carries the count, the scope control and "Ações" at once, and
+        // no combination of those fits 320px on one line. From `md` up it stays
+        // a single line, where it always fitted.
+        flexWrap: { xs: 'wrap', md: 'nowrap' },
+        columnGap: 1.5,
+        rowGap: 1,
         ml: edgeAlign ? -1.5 : 0,
       }}
     >
@@ -89,32 +102,75 @@ function SelectionCluster({
         sx={{ p: 0.5, display: { xs: 'inline-flex', md: 'none' } }}
       />
       {hasSelection ? (
+        <SelectionState
+          selectedCount={selectedCount}
+          clearSelection={clearSelection}
+          clearAllTestId={clearAllTestId}
+          clearAllText={clearAllText}
+          selectionExtra={selectionExtra}
+        />
+      ) : null}
+      {actionsSlot}
+    </Box>
+  );
+}
+
+/**
+ * What the cluster shows once something IS ticked: Clear All, the count, and
+ * the host's own `selectionExtra`.
+ *
+ * Its own component only because the cluster around it is at the complexity
+ * gate's line ceiling — but the split falls where the meaning does. Everything
+ * here exists only while a selection does, and the `actions` slot deliberately
+ * stays OUTSIDE it: a toolbar may carry actions while browsing too.
+ */
+function SelectionState({
+  selectedCount,
+  clearSelection,
+  clearAllTestId,
+  clearAllText,
+  selectionExtra,
+}: Pick<
+  ContentToolbarProps,
+  'selectedCount' | 'clearSelection' | 'clearAllTestId' | 'clearAllText' | 'selectionExtra'
+>): React.JSX.Element {
+  return (
+    <>
+      <Button
+        variant="text"
+        size="small"
+        color="inherit"
+        onClick={clearSelection}
+        data-testid={clearAllTestId}
+        sx={selectionButtonSx}
+      >
+        {clearAllText}
+      </Button>
+      <Divider orientation="vertical" flexItem sx={{ height: 16, alignSelf: 'center' }} />
+      <Typography
+        component="span"
+        data-testid="selected-count-indicator"
+        sx={{ fontSize: '0.875rem', color: 'text.secondary', whiteSpace: 'nowrap', flexShrink: 0 }}
+      >
+        {selectedCount} {selectedCount === 1 ? 'item' : 'items'} selected
+      </Typography>
+      {selectionExtra !== undefined && (
         <>
-          <Button
-            variant="text"
-            size="small"
-            color="inherit"
-            onClick={clearSelection}
-            data-testid={clearAllTestId}
-            sx={selectionButtonSx}
-          >
-            {clearAllText}
-          </Button>
-          <Divider orientation="vertical" flexItem sx={{ height: 16, alignSelf: 'center' }} />
-          <Typography
-            component="span"
-            data-testid="selected-count-indicator"
-            sx={{ fontSize: '0.875rem', color: 'text.secondary', whiteSpace: 'nowrap', flexShrink: 0 }}
-          >
-            {selectedCount} {selectedCount === 1 ? 'item' : 'items'} selected
-          </Typography>
+          {/* A DELIBERATE break, not a wrap that happened to land here. What
+              follows — "Seleção: 48 produtos — todas as páginas", its "Limpar
+              seleção", and "Ações" — is a sentence about the selection plus the
+              control that acts on it, and letting the phone break it wherever it
+              ran out of room split that sentence mid-phrase. Zero height so it
+              costs nothing but the row gap, and `display:none` from `md` up,
+              where the line still fits. */}
+          <Box
+            aria-hidden
+            sx={{ flexBasis: '100%', height: 0, display: { xs: 'block', md: 'none' } }}
+          />
           {selectionExtra}
-          {actionsSlot}
         </>
-      ) : (
-        actionsSlot
       )}
-    </Box>
+    </>
   );
 }
 

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

@@ -87,46 +87,146 @@ export const AppHeaderStatus: React.FC<AppHeaderStatusProps> = ({
 
 AppHeaderStatus.displayName = 'AppHeaderStatus';
 
-/** Title + chevron + the quieter lines under them. */
-const IdentityText: React.FC<
-  Pick<AppHeaderIdentityProps, 'title' | 'subtitle' | 'status' | 'size'> & {
+/** The name and, when the block opens onto something, the chevron beside it. */
+const IdentityTitle: React.FC<
+  Pick<AppHeaderIdentityProps, 'title' | 'size'> & {
     interactive: boolean;
     disclosed: boolean;
     dataTestId: string;
   }
-> = ({ title, subtitle, status, size = 'md', interactive, disclosed, dataTestId }) => (
-  <Box sx={{ minWidth: 0, display: 'flex', flexDirection: 'column', gap: 0.25 }}>
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, minWidth: 0 }}>
-      <Typography
-        component="span"
-        data-testid={`${dataTestId}-title`}
-        sx={{ fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE }}
-      >
-        {title}
-      </Typography>
-      {interactive && (
-        <KeyboardArrowDown
-          aria-hidden
-          data-testid={`${dataTestId}-chevron`}
-          sx={{
-            flex: '0 0 auto',
-            fontSize: 20,
-            opacity: 0.7,
-            transition: 'transform 150ms ease',
-            transform: disclosed ? 'rotate(180deg)' : 'none',
-          }}
-        />
-      )}
-    </Box>
-    {subtitle && (
-      <Typography variant="body2" color="text.secondary" component="span" sx={ONE_LINE}>
-        {subtitle}
-      </Typography>
+> = ({ title, size = 'md', interactive, disclosed, dataTestId }) => (
+  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, minWidth: 0, width: '100%' }}>
+    <Typography
+      component="span"
+      data-testid={`${dataTestId}-title`}
+      sx={{ fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE }}
+    >
+      {title}
+    </Typography>
+    {interactive && (
+      <KeyboardArrowDown
+        aria-hidden
+        data-testid={`${dataTestId}-chevron`}
+        sx={{
+          flex: '0 0 auto',
+          fontSize: 20,
+          opacity: 0.7,
+          transition: 'transform 150ms ease',
+          transform: disclosed ? 'rotate(180deg)' : 'none',
+        }}
+      />
     )}
-    {status}
   </Box>
 );
 
+/**
+ * The disclosure, wrapping the NAME ROW and nothing else (12-63).
+ *
+ * The padding is cancelled by an equal negative margin, so the hover and the
+ * focus ring bleed outward while the title still starts on the same pixel as
+ * the lines under it. A padded button with no offset moves one of the two.
+ */
+const discloseSx = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 0.25,
+  width: '100%',
+  minWidth: 0,
+  appearance: 'none',
+  px: 0.5,
+  mx: -0.5,
+  py: 0.25,
+  my: -0.25,
+  border: 'none',
+  borderRadius: 1.5,
+  background: 'none',
+  color: 'inherit',
+  font: 'inherit',
+  textAlign: 'left',
+  cursor: 'pointer',
+  // Guarded: on a touch screen an unguarded `:hover` sticks after the tap that
+  // opened the panel, so the row stays highlighted behind it.
+  '@media (hover: hover)': { '&:hover': { backgroundColor: 'action.hover' } },
+  '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 2 },
+} as const;
+
+/**
+ * The text column: the name row, then the quieter lines under it.
+ *
+ * ## `subtitle` and `status` are OUTSIDE the disclosure, on purpose (12-63)
+ *
+ * Both are `ReactNode`, and `AppHeaderStatus.items` is a `ReactNode[]` — so a
+ * segment of the state line is free to be a control, and consumers put controls
+ * there: a mesa chip, a service-mode picker. While the whole block was one
+ * `<button>` those were `<button>`s inside a `<button>`, which is invalid HTML
+ * (the content model of `button` excludes interactive content) and, more
+ * visibly, means one tap fires two handlers. An adopting storefront opened two
+ * popups on every tap of either control because of it, and had already
+ * hand-rolled this component at one tier to dodge the nesting — a consumer
+ * working around the component is the report.
+ *
+ * The target stays large. The button is the full-width NAME ROW, which is the
+ * thing a reader aims at — what it gives up is the mark beside it, and a mark
+ * that opens the panel is not worth a state line that cannot hold a control.
+ */
+const IdentityText: React.FC<
+  Pick<
+    AppHeaderIdentityProps,
+    'title' | 'subtitle' | 'status' | 'size' | 'discloseLabel' | 'className'
+  > & {
+    onDisclose: (() => void) | undefined;
+    disclosed: boolean;
+    dataTestId: string;
+  }
+> = ({
+  title,
+  subtitle,
+  status,
+  size = 'md',
+  onDisclose,
+  disclosed,
+  discloseLabel,
+  className,
+  dataTestId,
+}) => {
+  const name = (
+    <IdentityTitle
+      title={title}
+      size={size}
+      interactive={Boolean(onDisclose)}
+      disclosed={disclosed}
+      dataTestId={dataTestId}
+    />
+  );
+  return (
+    <Box sx={{ minWidth: 0, flex: 1, display: 'flex', flexDirection: 'column', gap: 0.25 }}>
+      {onDisclose ? (
+        <Box
+          component="button"
+          type="button"
+          className={className}
+          data-testid={dataTestId}
+          onClick={onDisclose}
+          aria-haspopup="dialog"
+          aria-expanded={disclosed}
+          aria-label={discloseLabel ?? `Detalhes de ${title}`}
+          sx={discloseSx}
+        >
+          {name}
+        </Box>
+      ) : (
+        name
+      )}
+      {subtitle && (
+        <Typography variant="body2" color="text.secondary" component="span" sx={ONE_LINE}>
+          {subtitle}
+        </Typography>
+      )}
+      {status}
+    </Box>
+  );
+};
+
 /** The placeholder held while the identity is still resolving. */
 const IdentitySkeleton: React.FC<{ size: SizeValue; dataTestId: string }> = ({
   size,
@@ -145,16 +245,13 @@ const IdentitySkeleton: React.FC<{ size: SizeValue; dataTestId: string }> = ({
 );
 
 /**
- * Row styling shared by the static and the button rendering.
+ * The BLOCK's row: the mark, then the text column beside it.
  *
- * `width: '100%'` is load-bearing, not cosmetic. A `<button>` sizes to
- * max-content and — unlike the `div` the non-interactive path renders — does
- * not stretch to fill its block container, so without it the DISCLOSING
- * identity measured its widest possible line at every viewport: the row's
- * right edge stayed pinned at 564px while the bar narrowed, `ONE_LINE` never
- * had a constraint to ellipsise against, and the title and state line ran
- * straight under the actions — 327px of overlap at 320px wide. Filling the
- * wrapper is what lets `minWidth: 0` bite and the ellipsis engage.
+ * Always a `Box` div now — since 12-63 the disclosure is the name row inside
+ * the text column ({@link discloseSx}), not this element. `width: '100%'` and
+ * `minWidth: 0` stay because the column below still has to ellipsise against
+ * something; the argument about a `<button>` sizing to max-content moved to
+ * `discloseSx`, which is where the button now is.
  */
 const rowSx = {
   display: 'flex',
@@ -166,12 +263,19 @@ const rowSx = {
 } as const;
 
 /**
- * Mark + title + state line, and — when it can be opened — the whole block as
- * one button.
+ * Mark + title + state line, and — when it can be opened — a name row that is
+ * the button.
  *
- * The button wraps EVERYTHING rather than sitting next to the title, because on
- * a phone the chevron alone is a 20px target next to a 40px one that does
- * nothing. A shopper aiming at the store's name expects the store's details.
+ * The disclosure used to wrap EVERYTHING, on the argument that the chevron
+ * alone is a 20px target next to a 40px mark that does nothing. The target is
+ * still not the chevron: the button is the full-width NAME ROW, which is what a
+ * reader aims at. What it no longer swallows is the mark beside it and the
+ * quieter lines below — because those lines take `ReactNode`s, consumers put
+ * CONTROLS in them, and a control inside a button is invalid HTML whose every
+ * tap fires two handlers. See {@link IdentityText} (12-63).
+ *
+ * `className` and `dataTestId` stay on the same elements they always named: the
+ * block when it is static, the disclosure when there is one.
  */
 export const AppHeaderIdentity: React.FC<AppHeaderIdentityProps> = ({
   title,
@@ -190,8 +294,12 @@ export const AppHeaderIdentity: React.FC<AppHeaderIdentityProps> = ({
 }) => {
   if (loading) return <IdentitySkeleton size={size} dataTestId={dataTestId} />;
 
-  const body = (
-    <>
+  return (
+    <Box
+      className={onDisclose ? undefined : className}
+      data-testid={onDisclose ? undefined : dataTestId}
+      sx={rowSx}
+    >
       {mark ?? (
         <AppHeaderBrand
           name={title}
@@ -206,47 +314,12 @@ export const AppHeaderIdentity: React.FC<AppHeaderIdentityProps> = ({
         subtitle={subtitle}
         status={status}
         size={size}
-        interactive={Boolean(onDisclose)}
+        onDisclose={onDisclose}
         disclosed={disclosed}
+        discloseLabel={discloseLabel}
+        className={className}
         dataTestId={dataTestId}
       />
-    </>
-  );
-
-  if (!onDisclose) {
-    return (
-      <Box className={className} data-testid={dataTestId} sx={rowSx}>
-        {body}
-      </Box>
-    );
-  }
-
-  return (
-    <Box
-      component="button"
-      type="button"
-      className={className}
-      data-testid={dataTestId}
-      onClick={onDisclose}
-      aria-haspopup="dialog"
-      aria-expanded={disclosed}
-      aria-label={discloseLabel ?? `Detalhes de ${title}`}
-      sx={{
-        ...rowSx,
-        appearance: 'none',
-        p: 0.5,
-        ml: -0.5,
-        border: 'none',
-        borderRadius: 1.5,
-        background: 'none',
-        color: 'inherit',
-        font: 'inherit',
-        cursor: 'pointer',
-        '&:hover': { backgroundColor: 'action.hover' },
-        '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 2 },
-      }}
-    >
-      {body}
     </Box>
   );
 };

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

@@ -118,11 +118,18 @@ throwing.
 
 - The mark is `role="img"` labelled with the name, so a screen reader says
   "Future Drink" rather than spelling out "F D".
-- With `onDisclose`, the whole identity block is one `<button>` with
-  `aria-haspopup="dialog"` and a live `aria-expanded`. The button wraps
-  everything rather than sitting beside the title: on a phone the chevron alone
-  is a 20px target next to a 40px one that does nothing, and a shopper aiming at
-  the store's name expects the store's details.
+- With `onDisclose`, the identity's **name row** is a `<button>` with
+  `aria-haspopup="dialog"` and a live `aria-expanded`. It is the full-width row,
+  chevron included, rather than the chevron alone — on a phone that would be a
+  20px target next to a 40px mark that does nothing, and a reader aiming at the
+  store's name expects the store's details.
+- **`status` and `subtitle` render OUTSIDE that button, and must** (12-63). Both
+  are `ReactNode`, and `AppHeaderStatus.items` is a `ReactNode[]`, so a segment
+  of the state line is free to be a control — a mesa chip, a mode picker — and
+  consumers do exactly that. The disclosure used to wrap the whole block, which
+  made those `<button>`s inside a `<button>`: invalid HTML, and one tap firing
+  two handlers. Put controls in the state line freely; put nothing interactive
+  in `title`, which is a `string` and belongs to the button.
 - The state line separates its segments with real whitespace, not CSS margin —
   a screen reader reads `textContent`, and a margin-only gap runs "Aberto agora"
   straight into "Retirada no balcão" as one word. The separator glyph itself is

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

@@ -62,20 +62,28 @@ export interface AppHeaderStatusProps {
  * the consumer's own router in the `leading` slot, whereas an `href` prop would
  * have to guess whose link component it is being handed — `to` for one router,
  * `href` for another — and would half-work for everybody. `onDisclose` is the
- * only interaction the block owns: with it the block is a button and a chevron
- * appears, without it the block is static text.
+ * only interaction the block owns: with it the NAME ROW is a button and a
+ * chevron appears, without it the row is static text.
+ *
+ * The button stops at that row (12-63). `status` and `subtitle` render as its
+ * SIBLINGS, so a consumer may put controls in the state line — which they do,
+ * and which used to nest a `<button>` inside a `<button>`.
  */
 export interface AppHeaderIdentityProps
   extends Pick<AppHeaderBrandProps, 'logoUrl' | 'seedColor'> {
   /** The name shown, and the one the mark derives its initials from. */
   title: string;
-  /** A quieter line under the title — use `status` for the dotted state line. */
+  /**
+   * A quieter line under the title — use `status` for the dotted state line.
+   *
+   * Rendered OUTSIDE the disclosure, like `status`, so it may hold a control.
+   */
   subtitle?: ReactNode;
   /** The state line, usually an {@link AppHeaderStatusProps} element. */
   status?: ReactNode;
   /** Replaces the derived mark entirely (an icon, an `<img>`, nothing). */
   mark?: ReactNode;
-  /** Opens the details panel. Renders the block as a button with a chevron. */
+  /** Opens the details panel. Renders the NAME ROW as a button with a chevron. */
   onDisclose?: () => void;
   /** Whether the panel `onDisclose` opens is currently open (`aria-expanded`). */
   disclosed?: boolean;

package/dist/chunk-5MXVT7DO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/CardKit/row-actions-to-menu.ts"],"sourcesContent":["import type { DropdownMenuItem } from '../../navigation/DropdownMenu';\nimport type { RowAction } from '../DataViews';\n\n/**\n * Adapt a list of {@link RowAction}s into single-row kebab items.\n *\n * Applies each action's `isVisible` guard, resolves its per-row `rowLabel`\n * override, carries its colour, and fires `onSelect([row])` on click.\n *\n * The point is that ONE definition drives both surfaces. An entity that already\n * declares its per-row actions as `RowAction[]` — because the table's multi-\n * select menu needs them — gets the card's kebab from the same array through\n * `renderRowMenu` / `renderCard`, with no second list to keep in step. Two\n * lists is how a \"Duplicar\" that appears in the table and not on the card\n * happens, and nothing reports it.\n */\nexport function rowActionsToMenuItems<T extends Record<string, unknown>>(\n  actions: RowAction<T>[],\n  row: T,\n): DropdownMenuItem[] {\n  return actions\n    .filter((action) => action.isVisible?.(row) ?? true)\n    .map((action) => ({\n      id: action.id,\n      label: action.rowLabel?.(row) ?? action.label,\n      color: action.color,\n      onClick: () => void action.onSelect([row]),\n    }));\n}\n"],"mappings":";AAgBO,SAAS,sBACd,SACA,KACoB;AACpB,SAAO,QACJ,OAAO,CAAC,WAAW,OAAO,YAAY,GAAG,KAAK,IAAI,EAClD,IAAI,CAAC,YAAY;AAAA,IAChB,IAAI,OAAO;AAAA,IACX,OAAO,OAAO,WAAW,GAAG,KAAK,OAAO;AAAA,IACxC,OAAO,OAAO;AAAA,IACd,SAAS,MAAM,KAAK,OAAO,SAAS,CAAC,GAAG,CAAC;AAAA,EAC3C,EAAE;AACN;","names":[]}

package/dist/chunk-TSPHRZ4U.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/layout/ContentToolbar/ContentToolbar.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Checkbox from '@mui/material/Checkbox/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React from 'react';\n\nimport type { ContentToolbarProps } from './ContentToolbar.types';\n\nconst selectionButtonSx = {\n  minWidth: 0,\n  height: 'auto',\n  borderRadius: 0.5,\n  fontWeight: 600,\n  py: 0.5,\n  px: 1.5,\n  fontSize: '0.75rem',\n  textTransform: 'none',\n  color: 'text.primary',\n} as const;\n\ntype SelectionClusterProps = Pick<\n  ContentToolbarProps,\n  | 'hasSelection'\n  | 'selectedCount'\n  | 'selectAll'\n  | 'clearSelection'\n  | 'actions'\n  | 'selectionExtra'\n  | 'selectAllTestId'\n  | 'clearAllTestId'\n  | 'edgeAlign'\n  | 'selectAllLabel'\n  | 'selectAllText'\n  | 'clearAllText'\n>;\n\n/** The left cluster: Select All + (when selecting) Clear All / count / actions. */\nfunction SelectionCluster({\n  hasSelection,\n  selectedCount,\n  selectAll,\n  clearSelection,\n  actions,\n  selectionExtra,\n  selectAllTestId,\n  clearAllTestId,\n  edgeAlign = false,\n  selectAllLabel,\n  selectAllText,\n  clearAllText,\n}: SelectionClusterProps): React.JSX.Element {\n  const actionsSlot = actions !== undefined && (\n    <Box sx={{ ml: 0.5, display: 'flex', flexShrink: 0, alignItems: 'center' }}>{actions}</Box>\n  );\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        minWidth: 0,\n        // Mobile: don't grow, so the controls sit on the SAME line as the checkbox\n        // (no orphaned selection row). Desktop: grow to push controls right.\n        flex: { xs: '0 0 auto', md: 1 },\n        alignItems: 'center',\n        gap: 1.5,\n        ml: edgeAlign ? -1.5 : 0,\n      }}\n    >\n      {/* Desktop: a \"Select All\" text button (md+). Mobile: a compact checkbox\n          that toggles select-all/clear — the text would eat the tight row. */}\n      <Button\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        onClick={selectAll}\n        data-testid={selectAllTestId}\n        sx={{ ...selectionButtonSx, display: { xs: 'none', md: 'inline-flex' } }}\n      >\n        {selectAllText}\n      </Button>\n      <Checkbox\n        size=\"small\"\n        checked={hasSelection}\n        onChange={(event) => (event.target.checked ? selectAll() : clearSelection())}\n        data-testid={`${selectAllTestId}-checkbox`}\n        inputProps={{ 'aria-label': selectAllLabel }}\n        sx={{ p: 0.5, display: { xs: 'inline-flex', md: 'none' } }}\n      />\n      {hasSelection ? (\n        <>\n          <Button\n            variant=\"text\"\n            size=\"small\"\n            color=\"inherit\"\n            onClick={clearSelection}\n            data-testid={clearAllTestId}\n            sx={selectionButtonSx}\n          >\n            {clearAllText}\n          </Button>\n          <Divider orientation=\"vertical\" flexItem sx={{ height: 16, alignSelf: 'center' }} />\n          <Typography\n            component=\"span\"\n            data-testid=\"selected-count-indicator\"\n            sx={{ fontSize: '0.875rem', color: 'text.secondary', whiteSpace: 'nowrap', flexShrink: 0 }}\n          >\n            {selectedCount} {selectedCount === 1 ? 'item' : 'items'} selected\n          </Typography>\n          {selectionExtra}\n          {actionsSlot}\n        </>\n      ) : (\n        actionsSlot\n      )}\n    </Box>\n  );\n}\n\n/**\n * The BROWSING half of the toolbar: search + filters on the left, the page's\n * own controls on the right. Split out of {@link ContentToolbar} so that\n * function stays inside the complexity gate — it is layout only, and the\n * decision of whether to show it at all is made by the caller.\n */\nfunction BrowsingClusters({\n  leadingControls,\n  rightControls,\n  hasSelection,\n  edgeAlign,\n}: {\n  leadingControls?: React.ReactNode;\n  rightControls: React.ReactNode;\n  hasSelection: boolean;\n  edgeAlign: boolean;\n}): React.JSX.Element {\n  return (\n    <>\n      {/* minWidth:0 lets this cluster be the one that gives up width as the row\n       * tightens, which is what the filter overflow measures against. */}\n      {leadingControls !== undefined && (\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            flexGrow: 1,\n            minWidth: 0,\n            // The collapse ladder has a FLOOR — below roughly 400px even the\n            // fully-collapsed row does not fit, and its controls cannot shrink\n            // (they are flexShrink:0 so an over-packed row sheds instead of\n            // squeezing). Past that point this scrolls rather than letting them\n            // paint outside the toolbar, which is what a narrow phone did.\n            overflowX: 'auto',\n            // No scrollbar gutter stealing height on the common case.\n            scrollbarWidth: 'thin',\n          }}\n        >\n          {leadingControls}\n        </Box>\n      )}\n      {/* ml:auto keeps the controls right-aligned even when the cluster wraps to\n       * its own row (where justify-content:space-between would otherwise snap a\n       * lone item to the left); it's a no-op on a shared row. */}\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          // Same single-line rule as the row itself: this cluster wrapping\n          // INTERNALLY buys a second line just as surely as the row wrapping\n          // does. It bit at exactly 900px, the `md` breakpoint where the \"N de\n          // N\" counter appears and pushes Exibir/Exportar over the edge.\n          flexWrap: leadingControls === undefined ? 'wrap' : 'nowrap',\n          // Tight (5px) when browsing so the controls fit one line beside the\n          // checkbox; roomier (14px) in selection mode where they get their own row.\n          gap: hasSelection ? '14px' : '5px',\n          ml: 'auto',\n          mr: edgeAlign ? -1.5 : 0,\n          '& > *': { flexShrink: 0 },\n        }}\n      >\n        {rightControls}\n      </Box>\n    </>\n  );\n}\n\n/**\n * Shared toolbar for content pages (Favorites, Personal Space, Recents, …). The\n * left cluster owns selection chrome — **Select All**, and once items are\n * selected, **Clear All** + an \"N items selected\" count + an optional `actions`\n * slot. The right cluster is a free `rightControls` slot for page-specific\n * controls (ViewSelector, SortByDropdown, MultiSelectDropdown, FilterTrigger).\n *\n * Faithful, generic MUI port of the reference `ContentPageToolbar` — the\n * domain-specific default actions are intentionally left to the consumer via\n * the `actions` slot so this stays agnostic and reusable across projects.\n *\n * @example\n * ```tsx\n * <ContentToolbar\n *   hasSelection={selected.size > 0}\n *   selectedCount={selected.size}\n *   selectAll={selectAll}\n *   clearSelection={clear}\n *   rightControls={\n *     <>\n *       <ViewSelector viewMode={view} onViewModeChange={setView} zoom={zoom} onZoomChange={setZoom} />\n *       <SortByDropdown fields={FIELDS} activeField={field} onFieldChange={setField} />\n *       <MultiSelectDropdown label=\"Content Type\" options={types} selected={typeSet} onToggle={toggle} onClear={clear} />\n *       <FilterTrigger open={panelOpen} onOpenChange={setPanelOpen} hasActiveFilters={hasFilters} />\n *     </>\n *   }\n * />\n * ```\n */\nexport function ContentToolbar({\n  hasSelection,\n  selectedCount,\n  selectAll,\n  clearSelection,\n  rightControls,\n  leadingControls,\n  actions,\n  selectionExtra,\n  selectAllTestId,\n  clearAllTestId,\n  edgeAlign = false,\n  exclusiveSelection = false,\n  selectAllLabel,\n  selectAllText,\n  clearAllText,\n}: ContentToolbarProps): React.JSX.Element {\n  // Under `exclusiveSelection` the two states are alternatives, not neighbours:\n  // browsing shows the controls and no checkbox, selecting shows the checkbox\n  // and no controls. Anything else double-books the row.\n  const showSelection = !exclusiveSelection || hasSelection;\n  const showControls = !exclusiveSelection || !hasSelection;\n  return (\n    // Two clusters on one line. They may wrap onto separate rows ONLY for a\n    // toolbar without `leadingControls` — one carrying search + filters is\n    // driven by a measured collapse ladder (see `useFilterOverflow`), and a\n    // wrap there is the ladder having failed: it would silently buy a second\n    // row instead of shedding a control into \"Mais\", which is the one outcome\n    // the ladder exists to prevent.\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        gap: 2,\n        flexWrap: leadingControls === undefined ? 'wrap' : 'nowrap',\n        rowGap: 1,\n      }}\n    >\n      {showSelection && (\n        <SelectionCluster\n          selectAllText={selectAllText}\n          clearAllText={clearAllText}\n          hasSelection={hasSelection}\n          selectedCount={selectedCount}\n          selectAll={selectAll}\n          clearSelection={clearSelection}\n          actions={actions}\n          selectionExtra={selectionExtra}\n          selectAllTestId={selectAllTestId}\n          clearAllTestId={clearAllTestId}\n          selectAllLabel={selectAllLabel}\n          edgeAlign={edgeAlign}\n        />\n      )}\n\n      {showControls && (\n        <BrowsingClusters\n          leadingControls={leadingControls}\n          rightControls={rightControls}\n          hasSelection={hasSelection}\n          edgeAlign={edgeAlign}\n        />\n      )}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-W2YNUUVJ.js.map

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