@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-BYH5GPLT.js

@@ -0,0 +1,154 @@
+import {
+  fadeInScaleAnimation
+} from "./chunk-3UIDKLML.js";
+import {
+  shadowInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/card-surface.ts
+import { alpha, keyframes } from "@mui/material/styles/index.js";
+var pulseRing = keyframes`
+  0% { transform: scale(1); opacity: 0.9; }
+  70% { transform: scale(1.04); opacity: 0; }
+  100% { transform: scale(1.04); opacity: 0; }
+`;
+var CARD_RADIUS = sxRem(3);
+function slotTestIds(testId) {
+  return (slot) => testId ? `${testId}-${slot}` : void 0;
+}
+function isSelectable(props) {
+  return props.selectable ?? props.onToggleSelect != null;
+}
+function isActionable(state) {
+  return state !== "disabled" && state !== "cancelled";
+}
+function variantSx(variant, theme) {
+  if (variant === "ghost") {
+    return {
+      border: 0,
+      backgroundColor: "action.hover",
+      "&:hover": { backgroundColor: "action.selected" }
+    };
+  }
+  if (variant === "text") {
+    return { border: 0, backgroundColor: "transparent", boxShadow: "none" };
+  }
+  if (variant === "glass") {
+    return {
+      backgroundColor: alpha(theme.palette.background.paper, 0.55),
+      backdropFilter: `blur(${rem(theme, 8)})`,
+      // `divider` as-is. NOT `alpha(divider, …)`: MUI's `alpha` REPLACES the
+      // channel rather than scaling it, and `divider` is already a 12% black —
+      // so asking for 80% of it produced an 80% black slab of a border.
+      borderColor: theme.palette.divider,
+      boxShadow: `0 ${rems(theme, 1, 3)} ${shadowInk(theme, 0.1)}`
+    };
+  }
+  return {};
+}
+var MOTION_OK = "@media (prefers-reduced-motion: no-preference)";
+function accentBar(theme, main) {
+  return {
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      insetInlineStart: 0,
+      insetBlock: 0,
+      width: rem(theme, 3),
+      borderStartStartRadius: "inherit",
+      borderEndStartRadius: "inherit",
+      backgroundColor: main,
+      pointerEvents: "none"
+    }
+  };
+}
+function liftSx(theme, main) {
+  return {
+    boxShadow: [
+      `0 0 0 ${rem(theme, 1)} ${alpha(main, 0.45)}`,
+      `0 ${rems(theme, 1, 2)} ${alpha(main, 0.12)}`,
+      `0 ${rems(theme, 8, 20, -6)} ${alpha(main, 0.3)}`
+    ].join(", ")
+  };
+}
+function pulseSx(theme, main) {
+  return {
+    [MOTION_OK]: {
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        inset: 0,
+        borderRadius: "inherit",
+        border: `${rem(theme, 2)} solid ${main}`,
+        animation: `${pulseRing} 1.6s ease-out 6`,
+        pointerEvents: "none"
+      }
+    }
+  };
+}
+function emphasisSx(theme, emphasis, main, shape) {
+  if (emphasis === "attention") {
+    return {
+      ...accentBar(theme, main),
+      ...shape === "tile" ? liftSx(theme, main) : {},
+      ...pulseSx(theme, main)
+    };
+  }
+  if (emphasis === "new") {
+    return {
+      ...accentBar(theme, main),
+      [MOTION_OK]: { animation: `${fadeInScaleAnimation} 240ms ease-out` }
+    };
+  }
+  return {};
+}
+function stateSx(state) {
+  if (state === "cancelled") {
+    return {
+      opacity: 0.65,
+      // The META CLUSTER is struck too. It was left out, so a voided row kept a
+      // crisp `05/08/2026, 13:45` and `PIX` between a struck title and a struck
+      // total — the middle of the row reading as live data on a record the two
+      // ends call void. Both lines of each pair go, as both lines of the caption
+      // already do: on a cancelled record the label is as void as the value.
+      '& [data-slot="value"], & [data-slot="caption"], & [data-slot="meta"]': {
+        textDecoration: "line-through"
+      }
+    };
+  }
+  if (state === "disabled") {
+    return { opacity: 0.45, filter: "grayscale(1)", cursor: "not-allowed" };
+  }
+  return { opacity: 1 };
+}
+function cardSurfaceStyles(props, theme) {
+  const { variant = "outline", color = "primary", selected = false, selectable } = props;
+  const { state = "default", emphasis = "none" } = props;
+  const main = theme.palette[color].main;
+  const showSelected = selectable && selected;
+  return {
+    transition: "border-color 120ms, box-shadow 120ms, background-color 120ms",
+    ...stateSx(state),
+    ...variantSx(variant, theme),
+    ...showSelected ? {
+      borderColor: `${color}.main`,
+      boxShadow: `inset 0 0 0 ${rem(theme, 1)} ${main}`,
+      backgroundColor: "action.selected"
+    } : {},
+    ...emphasisSx(theme, emphasis, main, props.shape)
+  };
+}
+
+export {
+  CARD_RADIUS,
+  slotTestIds,
+  isSelectable,
+  isActionable,
+  cardSurfaceStyles
+};
+//# sourceMappingURL=chunk-BYH5GPLT.js.map

package/dist/chunk-BYH5GPLT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/card-surface.ts"],"sourcesContent":["import { alpha, keyframes, type CSSObject, type Theme } from \"@mui/material/styles/index.js\";\n\nimport { fadeInScaleAnimation } from \"../Badge/Badge.animations\";\nimport { shadowInk } from \"../../../tokens/ink\";\nimport { rem, rems, sxRem } from \"../../../tokens/relative\";\n\n/**\n * A plain style object, not MUI's `SxProps`.\n *\n * `SxProps` is a union including arrays and functions, so a value typed as one\n * cannot be spread — and these fragments exist precisely to be merged. Note also\n * that `Card` merges by SPREADING (`sx={{ ...defaults, ...sx }}`), so handing it\n * a function yields nothing at all: resolve the theme with `useTheme` first.\n */\ntype CardSx = CSSObject | Record<string, unknown>;\n\n/** The ring, as scale + opacity so it never leaves the compositor. */\nconst pulseRing = keyframes`\n  0% { transform: scale(1); opacity: 0.9; }\n  70% { transform: scale(1.04); opacity: 0; }\n  100% { transform: scale(1.04); opacity: 0; }\n`;\n\n/**\n * THE CONTRACT BOTH CARDS IMPLEMENT.\n *\n * `BaseCard` (a tile) and `BaseListCard` (a row) are one object seen from two\n * angles, so the surface — variant, colour, selectability, draggability,\n * emphasis and state — is declared once and spread into both.\n */\n\n/**\n * How much chrome the surface claims. Button's vocabulary, spelled Button's\n * way: a card and a button are both surfaces the operator presses, and having\n * one say `outline` while the other says `outlined` taxes everyone who writes\n * both. Chip's `filled | outlined` was the wrong model — a chip is a token in a\n * sentence and has only those two things to say.\n */\nexport type CardSurfaceVariant = \"outline\" | \"ghost\" | \"text\" | \"glass\";\n\n/** The theme colour a card's selection and emphasis are drawn in. */\nexport type CardSurfaceColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\n\n/**\n * Why this card is asking to be noticed.\n *\n * ONE union, not six booleans. `glow`/`pulse`/`animate`/`bounce`/`shimmer`\n * combined into 32 states of which about three meant anything —\n * `pulse + shimmer + bounce` is not a thing anyone wants, and every one of\n * those combinations was a state somebody could reach by accident.\n */\nexport type CardEmphasis =\n  /** Nothing. The overwhelming default. */\n  | \"none\"\n  /** Look here now: an accent bar, and a ring that beats six times and settles. */\n  | \"attention\"\n  /** This just arrived: an accent bar and one fade-in. */\n  | \"new\";\n\n/** A row and a tile carry emphasis differently — see `emphasisSx`. */\ntype CardShape = \"row\" | \"tile\";\n\n/**\n * What this record IS, as opposed to how it looks.\n *\n * `dimmed` only greyed pixels, which left a cancelled row's buttons live and\n * clickable. This carries the meaning, so the card can also stop offering\n * actions on something that cannot be acted on.\n */\nexport type CardState = \"default\" | \"cancelled\" | \"disabled\";\n\nexport interface CardSurfaceProps {\n  /** How much chrome the surface claims. Defaults to `outline`. */\n  variant?: CardSurfaceVariant;\n  /** Theme colour for selection and emphasis. Defaults to `primary`. */\n  color?: CardSurfaceColor;\n  /**\n   * Can this card be selected — and does it show it?\n   *\n   * The capability, separate from the handler. `selectable` gets the checkbox\n   * AND the selected treatment; `selectable={false}` has neither, however\n   * `selected` is set, so a stale flag arriving with the data cannot make a\n   * read-only row render as picked. Defaults to whether `onToggleSelect` exists.\n   */\n  selectable?: boolean;\n  /** Whether this card is currently in the selection. */\n  selected?: boolean;\n  /**\n   * Opt OUT of dragging even inside a drag container.\n   *\n   * Draggability is the container's decision (see `data-views-drag`); this is\n   * the card's veto — a pinned row, a summary line, a record that may not move.\n   */\n  draggable?: boolean;\n  /**\n   * Where this card leads.\n   *\n   * PREFER THIS TO `onClick`. A clickable `<div>` cannot be cmd-clicked,\n   * middle-clicked or \"copy link address\"'d, and wrapping interactive children\n   * in a click handler is the a11y violation it looks like. With `href` the\n   * title is a real `<a>` stretched over the card by a pseudo-element: one\n   * whole-row target, correct tab order, every browser affordance intact, and\n   * the buttons inside stay ordinary buttons.\n   */\n  href?: string;\n  /** Anchor target, when `href` is set. */\n  target?: string;\n  /** Card click, for a card that does not navigate. See `href` first. */\n  onClick?: () => void;\n  /** What this record is. `cancelled`/`disabled` also suppress the actions. */\n  state?: CardState;\n  /** Why this card is asking to be noticed. Defaults to `none`. */\n  emphasis?: CardEmphasis;\n  className?: string;\n  /**\n   * One id; the parts derive from it (`${testId}-checkbox`, `-drag`, `-menu`,\n   * `-value`). A prop per slot would have been `checkboxTestId`,\n   * `menuTestId`, `valueTestId`… one for every part anybody ever tested.\n   */\n  testId?: string;\n  \"aria-label\"?: string;\n}\n\n/**\n * ONE RADIUS FOR BOTH SHAPES, off the token scale on purpose.\n *\n * `Card`'s own steps are 4px and 8px and its `lg` is 16px, all chosen for a\n * surface nearly as tall as it is wide. A 56px row is not that shape — the\n * corner runs most of the way down both ends and curves away from the square\n * checkbox and square thumbnail inside it — and a tile that rounds harder than\n * the row it sits beside in the same view reads as a different component.\n *\n * 3px takes the hard point off the corner without being seen as a curve.\n * `divider` rows override it back to 0; a bottom rule has no corners to round.\n */\nexport const CARD_RADIUS = sxRem(3);\n\n/** Every slot's test id, derived from the card's one. */\nexport function slotTestIds(testId: string | undefined): (slot: string) => string | undefined {\n  return (slot) => (testId ? `${testId}-${slot}` : undefined);\n}\n\n/** Is this card selectable? Explicit wins; otherwise a handler implies it. */\nexport function isSelectable(\n  props: Pick<CardSurfaceProps, \"selectable\"> & { onToggleSelect?: () => void },\n): boolean {\n  return props.selectable ?? props.onToggleSelect != null;\n}\n\n/** Can this record be acted on at all? */\nexport function isActionable(state: CardState | undefined): boolean {\n  return state !== \"disabled\" && state !== \"cancelled\";\n}\n\n/**\n * Variant styling. Everything but `outline` drops the border.\n *\n * `ghost` keeps a faint SURFACE where `text` has none — without that the two\n * were pixel-identical at rest and the union carried a distinction it did not\n * draw. Ghost is \"a surface, quietly\"; text is \"no surface at all\", which is\n * what a host wants when it is drawing the container itself.\n */\nfunction variantSx(variant: CardSurfaceVariant, theme: Theme): CardSx {\n  if (variant === \"ghost\") {\n    return {\n      border: 0,\n      backgroundColor: \"action.hover\",\n      \"&:hover\": { backgroundColor: \"action.selected\" },\n    };\n  }\n  if (variant === \"text\") {\n    return { border: 0, backgroundColor: \"transparent\", boxShadow: \"none\" };\n  }\n  if (variant === \"glass\") {\n    // THEME-AWARE, and it keeps its edges.\n    //\n    // This was a hardcoded `rgba(255,255,255,·)` fill with a near-white border,\n    // which had two problems. On a dark palette a 55%-white pane is not frosted\n    // glass, it is a pale rectangle. And on a light one BOTH the fill and the\n    // border land on white and vanish, so `glass` rendered as `text` — the same\n    // nothing, reached by a different name.\n    //\n    // The blur is what makes it glass, and a blur is only visible over\n    // something. So the pane keeps a real hairline and a shallow shadow: over a\n    // plain surface it still reads as a raised pane rather than as absence, and\n    // over an image or a gradient the blur does the rest.\n    return {\n      backgroundColor: alpha(theme.palette.background.paper, 0.55),\n      backdropFilter: `blur(${rem(theme, 8)})`,\n      // `divider` as-is. NOT `alpha(divider, …)`: MUI's `alpha` REPLACES the\n      // channel rather than scaling it, and `divider` is already a 12% black —\n      // so asking for 80% of it produced an 80% black slab of a border.\n      borderColor: theme.palette.divider,\n      boxShadow: `0 ${rems(theme, 1, 3)} ${shadowInk(theme, 0.1)}`,\n    };\n  }\n  return {};\n}\n\n/**\n * MOTION IS OPT-IN, ALWAYS.\n *\n * Everything animated here is wrapped in this. Fifty rows breathing in unison\n * is a vestibular trigger, and honouring the OS setting is not a polish item —\n * it is the difference between a list somebody can look at and one they cannot.\n */\nconst MOTION_OK = \"@media (prefers-reduced-motion: no-preference)\";\n\n/**\n * THE ROW'S ATTENTION SIGNAL IS A BAR, NOT A HALO.\n *\n * A glow is a weak signal in a list: full-width rows stacked tight means the\n * halo bleeds 15px into the neighbours above and below and reads as a rendering\n * artifact, and stacked with a `selected` ring and the browser's focus ring it\n * becomes three concentric halos on one row. Five rows needing attention at\n * once turns the page into a smear.\n *\n * A 3px accent on the leading edge is stronger, costs no motion at all, works\n * under reduced-motion, cannot bleed into a neighbour, and stacks cleanly\n * however many rows raise their hand. It is where operational tables land.\n */\nfunction accentBar(theme: Theme, main: string): CardSx {\n  return {\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      insetInlineStart: 0,\n      insetBlock: 0,\n      width: rem(theme, 3),\n      borderStartStartRadius: \"inherit\",\n      borderEndStartRadius: \"inherit\",\n      backgroundColor: main,\n      pointerEvents: \"none\",\n    },\n  };\n}\n\n/**\n * The tile's lift — a card that has been RAISED, not one that is lit from within.\n *\n * This was Button's glow: a 20px bloom at 0.6 over a 40px bloom at 0.3, plus\n * `brightness(1.05)`. On a button, which is small and pressed and gone, that\n * reads as energy. On a tile it read as a neon sign — 40px of saturated colour\n * bleeding into the gaps of a grid whose whole job is to let the eye compare\n * cards, and the brightness filter washing the image and the caption with it.\n *\n * Three shadows doing three jobs instead: a hairline ring that tints the card's\n * own edge in the accent colour, a tight contact shadow, and one soft shadow\n * offset DOWNWARD. Offset is what separates elevation from emission — a glow is\n * symmetrical because its source is the object; a shadow falls because the\n * light is somewhere else. It stays legible on a dark canvas, where the old\n * bloom was the brightest thing on the screen.\n */\nfunction liftSx(theme: Theme, main: string): CardSx {\n  return {\n    boxShadow: [\n      `0 0 0 ${rem(theme, 1)} ${alpha(main, 0.45)}`,\n      `0 ${rems(theme, 1, 2)} ${alpha(main, 0.12)}`,\n      `0 ${rems(theme, 8, 20, -6)} ${alpha(main, 0.3)}`,\n    ].join(\", \"),\n  };\n}\n\n/**\n * A breath that STOPS.\n *\n * Six iterations, not `infinite`. A restaurant admin has this open for a whole\n * shift, and something pulsing in the periphery forever is fatigue rather than\n * urgency — worse, once two or three rows are doing it the signal means\n * nothing. It settles, and the accent bar carries the state from then on.\n *\n * Animating `transform`/`opacity` on a pseudo-element, never `box-shadow`: a\n * box-shadow keyframe repaints every frame, and fifty of them drop frames on\n * exactly the tablet a restaurant floor uses. This one is compositor-only.\n */\nfunction pulseSx(theme: Theme, main: string): CardSx {\n  return {\n    [MOTION_OK]: {\n      \"&::after\": {\n        content: '\"\"',\n        position: \"absolute\",\n        inset: 0,\n        borderRadius: \"inherit\",\n        border: `${rem(theme, 2)} solid ${main}`,\n        animation: `${pulseRing} 1.6s ease-out 6`,\n        pointerEvents: \"none\",\n      },\n    },\n  };\n}\n\n/** The emphasis treatments, in the terms the shape can actually carry. */\nfunction emphasisSx(theme: Theme, emphasis: CardEmphasis, main: string, shape: CardShape): CardSx {\n  if (emphasis === \"attention\") {\n    // The bar on both; the lift only where there is room for it to spread.\n    return {\n      ...accentBar(theme, main),\n      ...(shape === \"tile\" ? liftSx(theme, main) : {}),\n      ...pulseSx(theme, main),\n    };\n  }\n  if (emphasis === \"new\") {\n    return {\n      ...accentBar(theme, main),\n      [MOTION_OK]: { animation: `${fadeInScaleAnimation} 240ms ease-out` },\n    };\n  }\n  return {};\n}\n\n/**\n * The shared half of a card's styling. Each component adds its own geometry —\n * a tile's aspect ratio, a row's rails.\n */\n/**\n * WHAT THE TWO NON-DEFAULT STATES LOOK LIKE — and why they cannot look alike.\n *\n * Both were `opacity: 0.6` and nothing else, so a record the business CANCELLED\n * and a row this user merely cannot touch were pixel-identical. The type has\n * always drawn the distinction (`CardState`); only the styling had not, which\n * made `cancelled` a comment rather than a state.\n *\n * `cancelled` is a VOIDED record: still there, still worth reading, no longer\n * counting. The figures get struck through, because a dimmed `R$ 1.250,00`\n * still reads as money owed and a struck one cannot.\n *\n * `disabled` is INERT: nothing to read into, nothing to do with. It goes\n * greyscale — which also drains the status chip's colour, the one thing on the\n * row still shouting for attention — and says so on hover.\n */\nfunction stateSx(state: CardState): CardSx {\n  if (state === \"cancelled\") {\n    return {\n      opacity: 0.65,\n      // The META CLUSTER is struck too. It was left out, so a voided row kept a\n      // crisp `05/08/2026, 13:45` and `PIX` between a struck title and a struck\n      // total — the middle of the row reading as live data on a record the two\n      // ends call void. Both lines of each pair go, as both lines of the caption\n      // already do: on a cancelled record the label is as void as the value.\n      '& [data-slot=\"value\"], & [data-slot=\"caption\"], & [data-slot=\"meta\"]': {\n        textDecoration: \"line-through\",\n      },\n    };\n  }\n  if (state === \"disabled\") {\n    return { opacity: 0.45, filter: \"grayscale(1)\", cursor: \"not-allowed\" };\n  }\n  return { opacity: 1 };\n}\n\nexport function cardSurfaceStyles(\n  props: CardSurfaceProps & { selectable: boolean; shape: CardShape },\n  theme: Theme,\n): CardSx {\n  const { variant = \"outline\", color = \"primary\", selected = false, selectable } = props;\n  const { state = \"default\", emphasis = \"none\" } = props;\n  const main = theme.palette[color].main;\n  // Selection styling is gated on the CAPABILITY: a card that cannot be\n  // selected must not render as selected because a stale flag came with its data.\n  const showSelected = selectable && selected;\n  return {\n    transition: \"border-color 120ms, box-shadow 120ms, background-color 120ms\",\n    ...stateSx(state),\n    ...variantSx(variant, theme),\n    ...(showSelected\n      ? {\n          borderColor: `${color}.main`,\n          boxShadow: `inset 0 0 0 ${rem(theme, 1)} ${main}`,\n          backgroundColor: \"action.selected\",\n        }\n      : {}),\n    ...emphasisSx(theme, emphasis, main, props.shape),\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-C3LZ3OGJ.js

@@ -0,0 +1,67 @@
+import {
+  accentFor
+} from "./chunk-TCAQOUIB.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Command/Command.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var SIZE_MAP = {
+  xs: { widthPx: 400, fontPx: 12 },
+  sm: { widthPx: 450, fontPx: 14 },
+  md: { widthPx: 500, fontPx: 16 },
+  lg: { widthPx: 550, fontPx: 18 },
+  xl: { widthPx: 600, fontPx: 20 }
+};
+var commandSizeStyles = (theme, size) => {
+  const { widthPx, fontPx } = SIZE_MAP[size] || SIZE_MAP.md;
+  return { width: rem(theme, widthPx), fontSize: rem(theme, fontPx) };
+};
+var emphasisStyles = (theme, color, glow, pulse) => ({
+  ...glow && {
+    boxShadow: `0 0 ${rem(theme, 20)} ${alpha(accentFor(theme, color).main, 0.4)}`
+  },
+  ...pulse && {
+    animation: "pulse 2s infinite",
+    "@keyframes pulse": {
+      "0%": { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0.4)}` },
+      "70%": { boxShadow: `0 0 0 ${rem(theme, 10)} ${alpha(accentFor(theme, color).main, 0)}` },
+      "100%": { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0)}` }
+    }
+  }
+});
+var surfaceStyles = (theme, variant, color) => {
+  switch (variant) {
+    case "glass":
+      return {
+        backgroundColor: alpha(theme.palette.background.paper, 0.1),
+        backdropFilter: `blur(${rem(theme, 20)})`,
+        border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`
+      };
+    case "gradient":
+      return {
+        background: `linear-gradient(135deg, ${accentFor(theme, color).main}, ${accentFor(theme, color).dark})`,
+        color: accentFor(theme, color).contrastText
+      };
+    case "elevated":
+      return { boxShadow: theme.shadows[8] };
+    case "minimal":
+      return { border: "none", boxShadow: "none" };
+    default:
+      return {};
+  }
+};
+var commandPaperStyles = (theme, { variant, color, glow, pulse }) => ({
+  transition: theme.transitions.create(["all"], {
+    duration: theme.transitions.duration.standard
+  }),
+  ...emphasisStyles(theme, color, glow, pulse),
+  ...surfaceStyles(theme, variant, color)
+});
+
+export {
+  commandSizeStyles,
+  commandPaperStyles
+};
+//# sourceMappingURL=chunk-C3LZ3OGJ.js.map

package/dist/chunk-C3LZ3OGJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Command/Command.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { CommandProps } from './Command.types';\nimport { accentFor, rem } from '../../../tokens/scales';\n\ntype CommandVariant = NonNullable<CommandProps['variant']>;\ntype CommandColor = NonNullable<CommandProps['color']>;\ntype CommandSize = NonNullable<CommandProps['size']>;\n\nconst SIZE_MAP: Record<CommandSize, { widthPx: number; fontPx: number }> = {\n  xs: { widthPx: 400, fontPx: 12 },\n  sm: { widthPx: 450, fontPx: 14 },\n  md: { widthPx: 500, fontPx: 16 },\n  lg: { widthPx: 550, fontPx: 18 },\n  xl: { widthPx: 600, fontPx: 20 },\n};\n\n/** The paper's width and type for a size, both design px read through the type scale. */\nexport const commandSizeStyles = (theme: Theme, size: CommandSize) => {\n  const { widthPx, fontPx } = SIZE_MAP[size] || SIZE_MAP.md;\n  return { width: rem(theme, widthPx), fontSize: rem(theme, fontPx) };\n};\n\nconst emphasisStyles = (\n  theme: Theme,\n  color: CommandColor,\n  glow: boolean,\n  pulse: boolean,\n): CSSObject => ({\n  ...(glow && {\n    boxShadow: `0 0 ${rem(theme, 20)} ${alpha(accentFor(theme, color).main, 0.4)}`,\n  }),\n  ...(pulse && {\n    animation: 'pulse 2s infinite',\n    '@keyframes pulse': {\n      '0%': { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0.4)}` },\n      '70%': { boxShadow: `0 0 0 ${rem(theme, 10)} ${alpha(accentFor(theme, color).main, 0)}` },\n      '100%': { boxShadow: `0 0 0 0 ${alpha(accentFor(theme, color).main, 0)}` },\n    },\n  }),\n});\n\nconst surfaceStyles = (\n  theme: Theme,\n  variant: CommandVariant,\n  color: CommandColor,\n): CSSObject => {\n  switch (variant) {\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: `blur(${rem(theme, 20)})`,\n        border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`,\n      };\n    case 'gradient':\n      return {\n        background: `linear-gradient(135deg, ${accentFor(theme, color).main}, ${accentFor(theme, color).dark})`,\n        color: accentFor(theme, color).contrastText,\n      };\n    case 'elevated':\n      return { boxShadow: theme.shadows[8] };\n    case 'minimal':\n      return { border: 'none', boxShadow: 'none' };\n    default:\n      return {};\n  }\n};\n\n/**\n * Every variant shares the same transition and the same optional glow/pulse; only\n * the surface — background, border, shadow — differs.\n */\nexport const commandPaperStyles = (\n  theme: Theme,\n  { variant, color, glow, pulse }: {\n    variant: CommandVariant;\n    color: CommandColor;\n    glow: boolean;\n    pulse: boolean;\n  },\n): CSSObject => ({\n  transition: theme.transitions.create(['all'], {\n    duration: theme.transitions.duration.standard,\n  }),\n  ...emphasisStyles(theme, color, glow, pulse),\n  ...surfaceStyles(theme, variant, color),\n});\n"],"mappings":";;;;;;;;AAAA,SAAS,aAAa;AAUtB,IAAM,WAAqE;AAAA,EACzE,IAAI,EAAE,SAAS,KAAK,QAAQ,GAAG;AAAA,EAC/B,IAAI,EAAE,SAAS,KAAK,QAAQ,GAAG;AAAA,EAC/B,IAAI,EAAE,SAAS,KAAK,QAAQ,GAAG;AAAA,EAC/B,IAAI,EAAE,SAAS,KAAK,QAAQ,GAAG;AAAA,EAC/B,IAAI,EAAE,SAAS,KAAK,QAAQ,GAAG;AACjC;AAGO,IAAM,oBAAoB,CAAC,OAAc,SAAsB;AACpE,QAAM,EAAE,SAAS,OAAO,IAAI,SAAS,IAAI,KAAK,SAAS;AACvD,SAAO,EAAE,OAAO,IAAI,OAAO,OAAO,GAAG,UAAU,IAAI,OAAO,MAAM,EAAE;AACpE;AAEA,IAAM,iBAAiB,CACrB,OACA,OACA,MACA,WACe;AAAA,EACf,GAAI,QAAQ;AAAA,IACV,WAAW,OAAO,IAAI,OAAO,EAAE,CAAC,IAAI,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC;AAAA,EAC9E;AAAA,EACA,GAAI,SAAS;AAAA,IACX,WAAW;AAAA,IACX,oBAAoB;AAAA,MAClB,MAAM,EAAE,WAAW,WAAW,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC,GAAG;AAAA,MACzE,OAAO,EAAE,WAAW,SAAS,IAAI,OAAO,EAAE,CAAC,IAAI,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,CAAC,CAAC,GAAG;AAAA,MACxF,QAAQ,EAAE,WAAW,WAAW,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,CAAC,CAAC,GAAG;AAAA,IAC3E;AAAA,EACF;AACF;AAEA,IAAM,gBAAgB,CACpB,OACA,SACA,UACc;AACd,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,QACL,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,QAC1D,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,QACtC,QAAQ,aAAa,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC;AAAA,MAC/D;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,YAAY,2BAA2B,UAAU,OAAO,KAAK,EAAE,IAAI,KAAK,UAAU,OAAO,KAAK,EAAE,IAAI;AAAA,QACpG,OAAO,UAAU,OAAO,KAAK,EAAE;AAAA,MACjC;AAAA,IACF,KAAK;AACH,aAAO,EAAE,WAAW,MAAM,QAAQ,CAAC,EAAE;AAAA,IACvC,KAAK;AACH,aAAO,EAAE,QAAQ,QAAQ,WAAW,OAAO;AAAA,IAC7C;AACE,aAAO,CAAC;AAAA,EACZ;AACF;AAMO,IAAM,qBAAqB,CAChC,OACA,EAAE,SAAS,OAAO,MAAM,MAAM,OAMf;AAAA,EACf,YAAY,MAAM,YAAY,OAAO,CAAC,KAAK,GAAG;AAAA,IAC5C,UAAU,MAAM,YAAY,SAAS;AAAA,EACvC,CAAC;AAAA,EACD,GAAG,eAAe,OAAO,OAAO,MAAM,KAAK;AAAA,EAC3C,GAAG,cAAc,OAAO,SAAS,KAAK;AACxC;","names":[]}

package/dist/chunk-C55AWF3U.js

@@ -0,0 +1,192 @@
+import {
+  STACK_BREAK
+} from "./chunk-2ZIHZLF5.js";
+import {
+  CARD_RADIUS,
+  cardSurfaceStyles,
+  isActionable,
+  isSelectable,
+  slotTestIds
+} from "./chunk-BYH5GPLT.js";
+import {
+  useDragItem
+} from "./chunk-K4EKTMTC.js";
+import {
+  RAIL_COUNT,
+  RAIL_GAP,
+  railsTemplateFor,
+  useListRails
+} from "./chunk-NB3FGWU4.js";
+import {
+  DENSITY_ROW_PADDING
+} from "./chunk-PMOEG36E.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/base-list-card-geometry.tsx
+import { useTheme } from "@mui/material/styles/index.js";
+function isTextSelection() {
+  return (globalThis.getSelection?.()?.toString().length ?? 0) > 0;
+}
+function clickKeys(onClick) {
+  return (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onClick();
+  };
+}
+var rowSx = (theme, opts) => {
+  const { inGroup, railCount, cellTemplate, gutters, metaColumns, pad, padY, scale, divider, interactive, draggable } = opts;
+  return {
+    position: "relative",
+    borderRadius: CARD_RADIUS,
+    display: "grid",
+    zoom: scale,
+    // SUBGRID AND `container-type` CANNOT COEXIST on one element: containment
+    // makes the box size independently of its parent, so the browser drops the
+    // subgrid and every slot stacks into one column. (Observed exactly that —
+    // computed `grid-template-columns: 1222px` on a card asking for subgrid.)
+    //
+    // So inside a group the GROUP is the query container and the row is the
+    // subgrid; standalone, the row is both the container and its own grid.
+    ...inGroup ? { gridColumn: `span ${railCount}`, gridTemplateColumns: "subgrid" } : {
+      containerType: "inline-size",
+      gridTemplateColumns: cellTemplate ?? railsTemplateFor(gutters, metaColumns)
+    },
+    alignItems: "center",
+    // Wide enough that the meta cluster, the value and the status read as three
+    // columns rather than one run of text — the complaint that started all this
+    // was `MÉTODO PIX R$ 13,90` scanning as a single phrase.
+    columnGap: RAIL_GAP,
+    width: "100%",
+    px: pad,
+    py: padY,
+    cursor: draggable ? "grab" : interactive ? "pointer" : void 0,
+    ...draggable ? { touchAction: "none", "&:active": { cursor: "grabbing" } } : {},
+    ...interactive ? { "&:hover": { backgroundColor: "action.hover" } } : {},
+    // A real focus ring, which a clickable <div> never had.
+    "&:focus-visible": {
+      outline: `${rem(theme, 2)} solid`,
+      outlineStyle: "solid",
+      outlineColor: "primary.main",
+      outlineOffset: rem(theme, 2)
+    },
+    // TWO-LINE, below the point where the shared rails stop helping.
+    //
+    // The standard mobile transaction row: what the record IS and what it COST
+    // on the first line, the supporting detail on the second. Better than
+    // truncating four columns into ellipses, and the reason each slot carries a
+    // `data-slot` — the placement is explicit rather than whatever order the
+    // children happen to be in.
+    //
+    //   [ select ][ leading ][ title …………… ][   menu ]
+    //                        [ (cells) …………… ][  value ]
+    //
+    // The MENU stays in the top-right corner at every width. It is the row's
+    // one fixed landmark — an overflow that moves to the second line on a phone
+    // is an overflow nobody finds twice.
+    [`@container (max-width: ${rem(theme, STACK_BREAK)})`]: {
+      gridTemplateColumns: "auto auto minmax(0, 1fr) max-content",
+      ...inGroup ? { gridColumn: `span ${RAIL_COUNT}` } : {},
+      rowGap: 0.75,
+      columnGap: 1,
+      '& > [data-slot="drag"]': { display: "none" },
+      '& > [data-slot="select"]': { gridArea: "1 / 1" },
+      '& > [data-slot="leading"]': { gridArea: "1 / 2" },
+      '& > [data-slot="caption"]': { gridArea: "1 / 3" },
+      '& > [data-slot="actions"]': { gridArea: "1 / 4", justifyContent: "flex-end" },
+      '& > [data-slot="meta"]': { display: "none" },
+      // Second line, starting under the title rather than under the checkbox.
+      '& > [data-slot="value"]': { gridArea: "2 / 4", textAlign: "right" }
+    },
+    ...divider ? { borderRadius: 0, borderWidth: 0, borderBottomWidth: 1, borderStyle: "solid" } : {}
+  };
+};
+function dragIdFor(props, actionable) {
+  return props.draggable === false || !actionable ? void 0 : props.dragId;
+}
+function metaShape(props) {
+  const columns = props.meta?.length ?? 0;
+  return { columns, present: columns > 0 || props.metaSlot != null };
+}
+function useRowShell(props) {
+  const actionable = isActionable(props.state);
+  const group = useListRails();
+  const scale = props.scale ?? 1;
+  return {
+    group,
+    actionable,
+    scale,
+    theme: useTheme(),
+    selectable: isSelectable(props),
+    slot: slotTestIds(props.testId),
+    drag: useDragItem(dragIdFor(props, actionable)),
+    // Standalone holds no gutter open: there is no list beside it to line up
+    // with, so a reserved-but-empty rail is pure inset.
+    reserve: group?.reserveGutters ?? false,
+    // 1, not 1.5. The row's contents still have to line up with the toolbar
+    // above them, but 12px of card padding stacked on the checkbox's own 9px
+    // and an empty drag gutter's 24px read as a row indented for no reason.
+    //
+    // Not multiplied by `scale` — the row's `zoom` already scales it, and doing
+    // both would square the factor on padding alone.
+    pad: 1,
+    padY: DENSITY_ROW_PADDING[group?.density ?? props.density ?? "cozy"],
+    // A card that navigates does so with a real anchor, so it takes no click
+    // handler of its own — the stretched link IS the target.
+    acts: props.onClick != null && props.href == null && actionable
+  };
+}
+function actionProps(onClick) {
+  return {
+    role: "button",
+    tabIndex: 0,
+    onClick: () => {
+      if (isTextSelection()) return;
+      onClick?.();
+    },
+    onKeyDown: clickKeys(() => onClick?.())
+  };
+}
+function rowSurface(props, shell) {
+  const { theme, selectable, drag } = shell;
+  const surface = cardSurfaceStyles(
+    { ...props, selectable, shape: "row", state: drag.dragging ? "disabled" : props.state },
+    theme
+  );
+  if (props.divider !== true || surface.borderColor != null) return surface;
+  return { ...surface, borderBottomColor: theme.palette.divider };
+}
+function rowStyles(props, shell, cellTemplate) {
+  const { theme, group, selectable, drag, reserve, pad, padY, scale, acts } = shell;
+  return {
+    ...rowSurface(props, shell),
+    ...rowSx(theme, {
+      inGroup: group !== null,
+      railCount: group?.railCount ?? RAIL_COUNT,
+      cellTemplate,
+      gutters: {
+        disclose: reserve || props.children != null,
+        drag: reserve || drag.draggable,
+        select: reserve || selectable
+      },
+      metaColumns: metaShape(props).columns,
+      pad,
+      padY,
+      scale,
+      divider: props.divider ?? false,
+      interactive: acts || props.href != null,
+      draggable: drag.draggable && drag.handleProps === void 0
+    })
+  };
+}
+
+export {
+  rowSx,
+  metaShape,
+  useRowShell,
+  actionProps,
+  rowStyles
+};
+//# sourceMappingURL=chunk-C55AWF3U.js.map

package/dist/chunk-C55AWF3U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/base-list-card-geometry.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTheme, type Theme } from \"@mui/material/styles/index.js\";\n\nimport {\n  CARD_RADIUS,\n  cardSurfaceStyles,\n  isActionable,\n  isSelectable,\n  slotTestIds,\n} from \"./card-surface\";\nimport { useDragItem } from \"./data-views-drag\";\nimport { DENSITY_ROW_PADDING } from \"./data-views-layout-context\";\nimport { RAIL_COUNT, RAIL_GAP, railsTemplateFor, useListRails } from \"./list-card-rails\";\nimport { STACK_BREAK } from \"./base-list-card-slots\";\nimport type { BaseListCardProps } from \"./base-list-card\";\nimport { rem } from \"../../../tokens/relative\";\n\n/**\n * THE ROW'S GEOMETRY AND SURFACE, split from the component at the size gate.\n *\n * Everything here answers \"what shape is this row, and where do its slots land\"\n * — the rails, the density padding, the two-line collapse, the drag and\n * selection plumbing. None of it renders anything, which is why the two halves\n * can live apart without either becoming harder to follow.\n */\n/**\n * Whether a click was really a click, or the tail of a text selection.\n *\n * Without this, selecting an order id to copy it navigates away instead — the\n * single most annoying thing a clickable row does.\n */\nfunction isTextSelection(): boolean {\n  return (globalThis.getSelection?.()?.toString().length ?? 0) > 0;\n}\n\n/** Keyboard equivalence for a card that acts but does not navigate. */\nfunction clickKeys(onClick: () => void) {\n  return (event: React.KeyboardEvent): void => {\n    if (event.key !== \"Enter\" && event.key !== \" \") return;\n    event.preventDefault();\n    onClick();\n  };\n}\n\n/**\n * Geometry: the rails, the density padding, the two-line collapse.\n *\n * SCALE IS `zoom`, NOT A SET OF MULTIPLIED FONT SIZES.\n *\n * It used to be the latter, on exactly three values — title, value, row padding\n * — so the slider left the subtitle, the meta labels, the rules, the checkbox,\n * the grip, the chip and the menu at their fixed sizes, and the row came apart\n * as you dragged it. Multiplying the rest is not a fix: the checkbox and the\n * chip are MUI internals sized in their own px, and no prop we pass reaches\n * them.\n *\n * `zoom` scales the used value of every length in the subtree — ours and theirs\n * — and unlike `transform: scale` it REFLOWS, so the row still occupies the\n * space it draws and the rails still resolve. Verified against the group: at\n * 1.4 all four rows keep identical rail edges, because subgrid tracks and the\n * zoom that reads them are the same for every row.\n */\n/** What {@link rowSx} needs to know about the row it lays out. */\ninterface RowSxOptions {\n  inGroup: boolean;\n  railCount: number;\n  cellTemplate: string | null;\n  gutters: { disclose: boolean; drag: boolean; select: boolean };\n  metaColumns: number;\n  pad: number;\n  padY: number;\n  scale: number;\n  divider: boolean;\n  interactive: boolean;\n  draggable: boolean;\n}\n\n/**\n * DIVIDER COMPOSES WITH THE VARIANT — it changes the row's SHAPE, not its\n * surface.\n *\n * It used to set `border: 0` and hard-code its own rule colour, which discarded\n * whatever the variant had drawn: `outline`, `text` and `ghost` all collapsed\n * to one identical flush row, and the variant control silently stopped meaning\n * anything the moment `divider` was on.\n *\n * Now only the GEOMETRY changes here — the box's sides go, one edge stays — and\n * no `borderColor` is written, so the colour set by `cardSurfaceStyles` survives.\n * A variant that draws no border of its own gets the neutral rule from\n * {@link rowStyles}.\n */\nexport const rowSx = (theme: Theme, opts: RowSxOptions): Record<string, unknown> => {\n  const { inGroup, railCount, cellTemplate, gutters, metaColumns, pad, padY, scale, divider, interactive, draggable } = opts;\n  return {\n    position: \"relative\",\n    borderRadius: CARD_RADIUS,\n    display: \"grid\",\n    zoom: scale,\n    // SUBGRID AND `container-type` CANNOT COEXIST on one element: containment\n    // makes the box size independently of its parent, so the browser drops the\n    // subgrid and every slot stacks into one column. (Observed exactly that —\n    // computed `grid-template-columns: 1222px` on a card asking for subgrid.)\n    //\n    // So inside a group the GROUP is the query container and the row is the\n    // subgrid; standalone, the row is both the container and its own grid.\n    ...(inGroup\n      ? { gridColumn: `span ${railCount}`, gridTemplateColumns: \"subgrid\" }\n      : {\n          containerType: \"inline-size\",\n          gridTemplateColumns: cellTemplate ?? railsTemplateFor(gutters, metaColumns),\n        }),\n    alignItems: \"center\",\n    // Wide enough that the meta cluster, the value and the status read as three\n    // columns rather than one run of text — the complaint that started all this\n    // was `MÉTODO PIX R$ 13,90` scanning as a single phrase.\n    columnGap: RAIL_GAP,\n    width: \"100%\",\n    px: pad,\n    py: padY,\n    cursor: draggable ? \"grab\" : interactive ? \"pointer\" : undefined,\n    ...(draggable ? { touchAction: \"none\", \"&:active\": { cursor: \"grabbing\" } } : {}),\n    ...(interactive ? { \"&:hover\": { backgroundColor: \"action.hover\" } } : {}),\n    // A real focus ring, which a clickable <div> never had.\n    \"&:focus-visible\": {\n      outline: `${rem(theme, 2)} solid`,\n      outlineStyle: \"solid\",\n      outlineColor: \"primary.main\",\n      outlineOffset: rem(theme, 2),\n    },\n    // TWO-LINE, below the point where the shared rails stop helping.\n    //\n    // The standard mobile transaction row: what the record IS and what it COST\n    // on the first line, the supporting detail on the second. Better than\n    // truncating four columns into ellipses, and the reason each slot carries a\n    // `data-slot` — the placement is explicit rather than whatever order the\n    // children happen to be in.\n    //\n    //   [ select ][ leading ][ title …………… ][   menu ]\n    //                        [ (cells) …………… ][  value ]\n    //\n    // The MENU stays in the top-right corner at every width. It is the row's\n    // one fixed landmark — an overflow that moves to the second line on a phone\n    // is an overflow nobody finds twice.\n    [`@container (max-width: ${rem(theme, STACK_BREAK)})`]: {\n      gridTemplateColumns: \"auto auto minmax(0, 1fr) max-content\",\n      ...(inGroup ? { gridColumn: `span ${RAIL_COUNT}` } : {}),\n      rowGap: 0.75,\n      columnGap: 1,\n      '& > [data-slot=\"drag\"]': { display: \"none\" },\n      '& > [data-slot=\"select\"]': { gridArea: \"1 / 1\" },\n      '& > [data-slot=\"leading\"]': { gridArea: \"1 / 2\" },\n      '& > [data-slot=\"caption\"]': { gridArea: \"1 / 3\" },\n      '& > [data-slot=\"actions\"]': { gridArea: \"1 / 4\", justifyContent: \"flex-end\" },\n      '& > [data-slot=\"meta\"]': { display: \"none\" },\n      // Second line, starting under the title rather than under the checkbox.\n      '& > [data-slot=\"value\"]': { gridArea: \"2 / 4\", textAlign: \"right\" },\n    },\n    ...(divider\n      ? { borderRadius: 0, borderWidth: 0, borderBottomWidth: 1, borderStyle: \"solid\" }\n      : {}),\n  };\n};\n\n/**\n * A selectable full-width row: a marker, a title over a subtitle, labelled\n * middle columns, a value, a status, actions and a menu.\n *\n * A SHELL, like {@link BaseCard}. Domain rows live in the app and compose it.\n */\n/**\n * The id this row drags under, or nothing.\n *\n * `undefined` is the inert answer: `useDragItem` treats a missing id as \"no\n * drag\", which is how the card's own veto (`draggable={false}`) and an\n * unactionable record both switch dragging off without the card knowing\n * anything about the container above it.\n */\nfunction dragIdFor(\n  props: BaseListCardProps,\n  actionable: boolean,\n): string | number | undefined {\n  return props.draggable === false || !actionable ? undefined : props.dragId;\n}\n\n/**\n * What the meta cluster amounts to — asked once, used three times: to size the\n * rail, to close the cluster with a rule, and to decide whether the value has\n * anything to be divided FROM.\n */\nexport function metaShape(props: BaseListCardProps): { columns: number; present: boolean } {\n  const columns = props.meta?.length ?? 0;\n  return { columns, present: columns > 0 || props.metaSlot != null };\n}\n\n/**\n * Everything the row derives before it can render — extracted so the component\n * stays inside the size budget.\n */\nexport function useRowShell(props: BaseListCardProps) {\n  const actionable = isActionable(props.state);\n  const group = useListRails();\n  const scale = props.scale ?? 1;\n  return {\n    group,\n    actionable,\n    scale,\n    theme: useTheme(),\n    selectable: isSelectable(props),\n    slot: slotTestIds(props.testId),\n    drag: useDragItem(dragIdFor(props, actionable)),\n    // Standalone holds no gutter open: there is no list beside it to line up\n    // with, so a reserved-but-empty rail is pure inset.\n    reserve: group?.reserveGutters ?? false,\n    // 1, not 1.5. The row's contents still have to line up with the toolbar\n    // above them, but 12px of card padding stacked on the checkbox's own 9px\n    // and an empty drag gutter's 24px read as a row indented for no reason.\n    //\n    // Not multiplied by `scale` — the row's `zoom` already scales it, and doing\n    // both would square the factor on padding alone.\n    pad: 1,\n    padY: DENSITY_ROW_PADDING[group?.density ?? props.density ?? \"cozy\"],\n    // A card that navigates does so with a real anchor, so it takes no click\n    // handler of its own — the stretched link IS the target.\n    acts: props.onClick != null && props.href == null && actionable,\n  };\n}\n\n/** The click/keyboard props a row that acts (but does not navigate) needs. */\nexport function actionProps(onClick: (() => void) | undefined) {\n  return {\n    role: \"button\",\n    tabIndex: 0,\n    onClick: () => {\n      if (isTextSelection()) return;\n      onClick?.();\n    },\n    onKeyDown: clickKeys(() => onClick?.()),\n  };\n}\n\n/** The surface and the geometry, merged — the row's whole `sx` in one place. */\n\n/**\n * The row's painted surface, plus the divider's colour fallback.\n *\n * A variant with no border of its own (`text`, `ghost`) would draw its rule in\n * the inherited colour — the TEXT colour, i.e. a black bar across the row. The\n * neutral divider token is supplied only in that case; a variant that has a\n * border keeps it, which is the whole point of composing the two.\n */\nfunction rowSurface(\n  props: BaseListCardProps,\n  shell: ReturnType<typeof useRowShell>,\n): Record<string, unknown> {\n  const { theme, selectable, drag } = shell;\n  const surface = cardSurfaceStyles(\n    { ...props, selectable, shape: \"row\", state: drag.dragging ? \"disabled\" : props.state },\n    theme,\n  );\n  if (props.divider !== true || surface.borderColor != null) return surface;\n  return { ...surface, borderBottomColor: theme.palette.divider };\n}\n\nexport function rowStyles(\n  props: BaseListCardProps,\n  shell: ReturnType<typeof useRowShell>,\n  cellTemplate: string | null,\n): Record<string, unknown> {\n  const { theme, group, selectable, drag, reserve, pad, padY, scale, acts } = shell;\n  return {\n    ...rowSurface(props, shell),\n    ...rowSx(theme, {\n      inGroup: group !== null,\n      railCount: group?.railCount ?? RAIL_COUNT,\n      cellTemplate,\n      gutters: {\n        disclose: reserve || props.children != null,\n        drag: reserve || drag.draggable,\n        select: reserve || selectable,\n      },\n      metaColumns: metaShape(props).columns,\n      pad,\n      padY,\n      scale,\n      divider: props.divider ?? false,\n      interactive: acts || props.href != null,\n      draggable: drag.draggable && drag.handleProps === undefined,\n    }),\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-C5RQBTRZ.js

@@ -0,0 +1,31 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/AddressAutocomplete/AddressSuggestionsPaper.tsx
+import Paper from "@mui/material/Paper/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var AddressSuggestionsPaper = (props) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Paper,
+    {
+      ...props,
+      elevation: 8,
+      "data-testid": "address-suggestions-dropdown",
+      sx: {
+        mt: 1,
+        background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
+        backdropFilter: `blur(${rem(theme, 20)})`,
+        WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
+        border: `1px solid ${alpha(theme.palette.divider, 0.18)}`
+      }
+    }
+  );
+};
+
+export {
+  AddressSuggestionsPaper
+};
+//# sourceMappingURL=chunk-C5RQBTRZ.js.map

package/dist/chunk-C5RQBTRZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/AddressAutocomplete/AddressSuggestionsPaper.tsx"],"sourcesContent":["import type { PaperProps } from '@mui/material/Paper/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\n// The dropdown surface, frosted to match the glass field.\nexport const AddressSuggestionsPaper: FC<PaperProps> = (props) => {\n  const theme = useTheme();\n\n  return (\n    <Paper\n      {...props}\n      elevation={8}\n      data-testid=\"address-suggestions-dropdown\"\n      sx={{\n        mt: 1,\n        background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,\n        backdropFilter: `blur(${rem(theme, 20)})`,\n        WebkitBackdropFilter: `blur(${rem(theme, 20)})`,\n        border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n      }}\n    />\n  );\n};\n"],"mappings":";;;;;AACA,OAAO,WAAW;AAClB,SAAS,OAAO,gBAAgB;AAW5B;AAJG,IAAM,0BAA0C,CAAC,UAAU;AAChE,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,eAAY;AAAA,MACZ,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,YAAY,2BAA2B,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,CAAC,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,CAAC;AAAA,QACrI,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,QACtC,sBAAsB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,QAC5C,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,IAAI,CAAC;AAAA,MACzD;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-CPAJYJUD.js

@@ -0,0 +1,58 @@
+import {
+  FormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  Form
+} from "./chunk-D6KL74KI.js";
+
+// src/components/form/total-form/FormContainer.tsx
+import { validateFields } from "@12-apps/forms-core";
+import { useCallback, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function FormContainer({
+  initialValues,
+  schema,
+  onSubmit,
+  children,
+  dataTestId = "total-form"
+}) {
+  const [values, setValues] = useState(initialValues);
+  const [errors, setErrors] = useState({});
+  const [submitting, setSubmitting] = useState(false);
+  const setFieldValue = useCallback((name, value) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+    setErrors((prev) => {
+      if (!prev[name]) return prev;
+      const next = { ...prev };
+      delete next[name];
+      return next;
+    });
+  }, []);
+  const handleSubmit = useCallback(
+    async (event) => {
+      event.preventDefault();
+      const nextErrors = schema ? validateFields(values, schema) : {};
+      setErrors(nextErrors);
+      if (Object.values(nextErrors).some(Boolean)) return;
+      setSubmitting(true);
+      try {
+        await onSubmit(values, {
+          setFieldErrors: (fieldErrors) => setErrors(fieldErrors)
+        });
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [onSubmit, schema, values]
+  );
+  const contextValue = useMemo(
+    () => ({ values, errors, submitting, setFieldValue }),
+    [errors, setFieldValue, submitting, values]
+  );
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Form, { dataTestId, onSubmit: handleSubmit, noValidate: true, children }) });
+}
+
+export {
+  FormContainer
+};
+//# sourceMappingURL=chunk-CPAJYJUD.js.map

package/dist/chunk-CPWWMGYR.js

@@ -0,0 +1,49 @@
+import {
+  Chart
+} from "./chunk-Q2YNXJEL.js";
+import {
+  CHART_SEMANTIC_COLORS,
+  specToChartProps
+} from "./chunk-R6SBP5M5.js";
+import {
+  accentFor
+} from "./chunk-TCAQOUIB.js";
+
+// src/components/data-display/Chart/SpecChart.tsx
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var SpecChart = ({
+  spec,
+  data,
+  size,
+  fillHeight,
+  loading,
+  className,
+  onClick,
+  "data-testid": dataTestId = "spec-chart"
+}) => {
+  const theme = useTheme();
+  const chartProps = React.useMemo(() => {
+    const scheme = spec.colorScheme && spec.colorScheme.length > 0 ? spec.colorScheme : CHART_SEMANTIC_COLORS;
+    const resolveColor = (token, index) => accentFor(theme, token ?? scheme[index % scheme.length] ?? "primary").main;
+    return specToChartProps(spec, data, { resolveColor });
+  }, [spec, data, theme]);
+  return /* @__PURE__ */ jsx(
+    Chart,
+    {
+      ...chartProps,
+      size,
+      fillHeight,
+      loading,
+      className,
+      onClick,
+      "data-testid": dataTestId
+    }
+  );
+};
+
+export {
+  SpecChart
+};
+//# sourceMappingURL=chunk-CPWWMGYR.js.map