@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-JC22FNFA.js

@@ -0,0 +1,348 @@
+import {
+  fieldHeight
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+import {
+  absoluteInk,
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/CategorySelect/CategorySelect.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var METRICS = {
+  panelWidthPx: 340,
+  panelRadiusPx: 14,
+  listMaxHeightPx: 290,
+  sheetListMaxHeightPx: 340,
+  rowHeightPx: 36,
+  sheetRowHeightPx: 42,
+  rowRadiusPx: 8,
+  boxSizePx: 18,
+  chevronButtonPx: 22,
+  /** Extra left padding per level of nesting. */
+  rowIndentStepPx: 14,
+  footerButtonPx: 32,
+  sheetFooterButtonPx: 38,
+  /** Below this width the panel becomes a bottom sheet. */
+  sheetBreakpoint: 480
+};
+var accent = (theme) => ({
+  main: theme.palette.primary.main,
+  ink: theme.palette.primary.dark,
+  soft: alpha(theme.palette.primary.main, 0.08),
+  edge: alpha(theme.palette.primary.main, 0.28),
+  ring: alpha(theme.palette.primary.main, 0.15)
+});
+var triggerSx = (theme, selected, open) => {
+  const brand = accent(theme);
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: rem(theme, 8),
+    height: fieldHeight(theme),
+    padding: rems(theme, 0, 10, 0, 12),
+    borderRadius: fieldRadiusPx(theme),
+    border: `1px solid ${open || selected ? brand.edge : fieldEdge(theme)}`,
+    background: selected ? brand.soft : theme.palette.background.paper,
+    color: selected ? brand.ink : theme.palette.text.primary,
+    font: "inherit",
+    fontSize: rem(theme, 13),
+    cursor: "pointer",
+    maxWidth: "100%",
+    transition: "border-color .12s, box-shadow .12s",
+    boxShadow: open ? `0 0 0 ${rem(theme, 3)} ${brand.ring}` : "none",
+    "&:hover": { borderColor: open || selected ? brand.edge : theme.palette.text.disabled },
+    "&:focus-visible": {
+      outline: "none",
+      borderColor: brand.main,
+      boxShadow: `0 0 0 ${rem(theme, 3)} ${alpha(brand.main, 0.18)}`
+    },
+    "&:disabled": { opacity: 0.5, cursor: "default" }
+  };
+};
+var triggerCountSx = (theme) => ({
+  fontWeight: 600,
+  fontSize: rem(theme, 11),
+  lineHeight: 1,
+  background: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+  borderRadius: rem(theme, 999),
+  padding: rems(theme, 3, 6),
+  minWidth: rem(theme, 18),
+  textAlign: "center"
+});
+var triggerClearSx = (theme) => ({
+  width: rem(theme, 20),
+  height: rem(theme, 20),
+  flex: "0 0 auto",
+  border: 0,
+  background: "transparent",
+  borderRadius: rem(theme, 5),
+  display: "grid",
+  placeItems: "center",
+  cursor: "pointer",
+  color: "inherit",
+  opacity: 0.6,
+  padding: 0,
+  "&:hover": { background: alpha(absoluteInk(theme).black, 0.08), opacity: 1 }
+});
+var triggerChevronSx = (theme, open) => ({
+  width: rem(theme, 14),
+  height: rem(theme, 14),
+  flex: "0 0 auto",
+  opacity: 0.55,
+  transition: "transform .15s",
+  transform: open ? "rotate(180deg)" : "none"
+});
+var panelSx = (theme) => ({
+  width: rem(theme, METRICS.panelWidthPx),
+  maxWidth: "100%",
+  background: theme.palette.background.paper,
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: rem(theme, METRICS.panelRadiusPx),
+  boxShadow: `${rems(theme, 0, 1, 2)} ${alpha(uiInk(theme).panelShadowInk, 0.05)}, ${rems(theme, 0, 18, 40, -12)} ${alpha(uiInk(theme).panelShadowInk, 0.28)}`,
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden"
+});
+var sheetSx = (theme) => ({
+  width: "100%",
+  maxWidth: "none",
+  borderRadius: rems(theme, 18, 18, 0, 0),
+  borderBottom: 0,
+  position: "relative",
+  paddingTop: rem(theme, 4),
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: rem(theme, 7),
+    left: "50%",
+    transform: "translateX(-50%)",
+    width: rem(theme, 36),
+    height: rem(theme, 4),
+    borderRadius: rem(theme, 2),
+    background: theme.palette.divider
+  }
+});
+var panelHeadSx = (theme, sheet) => ({
+  padding: sheet ? rems(theme, 18, 10, 8) : rems(theme, 10, 10, 8),
+  borderBottom: `1px solid ${theme.palette.divider}`
+});
+var pinnedSx = (theme) => ({
+  padding: rems(theme, 9, 10),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  background: alpha(theme.palette.primary.main, 0.03)
+});
+var pinnedLabelSx = (theme) => ({
+  fontWeight: 600,
+  fontSize: rem(theme, 10),
+  lineHeight: 1,
+  letterSpacing: ".08em",
+  textTransform: "uppercase",
+  color: theme.palette.text.secondary,
+  marginBottom: rem(theme, 7)
+});
+var chipWrapSx = (theme) => ({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: rem(theme, 5),
+  maxHeight: rem(theme, 74),
+  overflow: "auto"
+});
+var chipSx = (theme) => {
+  const brand = accent(theme);
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: rem(theme, 5),
+    fontSize: rem(theme, 12),
+    background: brand.soft,
+    color: brand.ink,
+    border: `1px solid ${brand.edge}`,
+    borderRadius: rem(theme, 7),
+    padding: rems(theme, 3, 4, 3, 8),
+    "& button": {
+      border: 0,
+      background: "transparent",
+      color: "inherit",
+      cursor: "pointer",
+      padding: 0,
+      width: rem(theme, 16),
+      height: rem(theme, 16),
+      borderRadius: rem(theme, 4),
+      display: "grid",
+      placeItems: "center",
+      opacity: 0.65,
+      fontSize: rem(theme, 13),
+      lineHeight: 1,
+      "&:hover": { background: alpha(theme.palette.primary.main, 0.16), opacity: 1 }
+    }
+  };
+};
+var listSx = (theme, sheet) => ({
+  overflow: "auto",
+  maxHeight: rem(theme, sheet ? METRICS.sheetListMaxHeightPx : METRICS.listMaxHeightPx),
+  padding: rems(theme, 6, 6, 8),
+  scrollPadding: rems(theme, 8, 0),
+  overscrollBehavior: "contain"
+});
+var rowSx = (theme, active, sheet) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: rem(theme, 8),
+  padding: rems(theme, 0, 8),
+  height: rem(theme, sheet ? METRICS.sheetRowHeightPx : METRICS.rowHeightPx),
+  borderRadius: rem(theme, METRICS.rowRadiusPx),
+  cursor: "pointer",
+  userSelect: "none",
+  position: "relative",
+  width: "100%",
+  border: 0,
+  textAlign: "left",
+  font: "inherit",
+  background: active ? alpha(theme.palette.primary.main, 0.08) : "transparent",
+  boxShadow: active ? `inset 0 0 0 ${rem(theme, 1)} ${alpha(theme.palette.primary.main, 0.3)}` : "none",
+  "&:hover": {
+    background: active ? alpha(theme.palette.primary.main, 0.08) : theme.palette.action.hover
+  },
+  "&:focus-visible": { outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, 1) }
+});
+var rowIndent = (theme, depth) => depth === 0 ? {} : { paddingLeft: rem(theme, depth * METRICS.rowIndentStepPx) };
+var rowNameSx = (theme, isCategory) => ({
+  flex: 1,
+  minWidth: 0,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  fontSize: rem(theme, 13.5),
+  fontWeight: isCategory ? 600 : 450,
+  color: isCategory ? theme.palette.text.primary : theme.palette.text.secondary
+});
+var rowMetaSx = (theme, selected) => ({
+  font: `500 ${rem(theme, 11)}/1 ui-monospace, SFMono-Regular, Menlo, monospace`,
+  color: selected ? theme.palette.primary.main : theme.palette.text.secondary,
+  fontWeight: selected ? 600 : 500,
+  flex: "0 0 auto"
+});
+var markSx = (theme) => ({
+  background: uiInk(theme).highlightMark,
+  color: "inherit",
+  borderRadius: rem(theme, 2),
+  padding: rems(theme, 0, 1)
+});
+var chevronButtonSx = (theme, open) => ({
+  width: rem(theme, METRICS.chevronButtonPx),
+  height: rem(theme, METRICS.chevronButtonPx),
+  flex: "0 0 auto",
+  border: 0,
+  background: "transparent",
+  borderRadius: rem(theme, 6),
+  display: "grid",
+  placeItems: "center",
+  cursor: "pointer",
+  color: theme.palette.text.secondary,
+  padding: 0,
+  "&:hover": { background: theme.palette.action.hover, color: theme.palette.text.primary },
+  "& svg": { width: rem(theme, 12), height: rem(theme, 12), transition: "transform .15s", transform: open ? "rotate(90deg)" : "none" }
+});
+var checkboxSx = (theme, state) => ({
+  width: rem(theme, METRICS.boxSizePx),
+  height: rem(theme, METRICS.boxSizePx),
+  flex: "0 0 auto",
+  border: `${rem(theme, 1.5)} solid ${state === "off" ? theme.palette.divider : theme.palette.primary.main}`,
+  borderRadius: rem(theme, 5),
+  background: state === "off" ? theme.palette.background.paper : theme.palette.primary.main,
+  display: "grid",
+  placeItems: "center",
+  transition: "background .1s, border-color .1s",
+  "& svg": { width: rem(theme, 12), height: rem(theme, 12), color: theme.palette.primary.contrastText }
+});
+var checkboxBarSx = (theme) => ({
+  width: rem(theme, 9),
+  height: rem(theme, 2),
+  background: theme.palette.primary.contrastText,
+  borderRadius: rem(theme, 1)
+});
+var radioSx = (theme, on) => ({
+  width: rem(theme, METRICS.boxSizePx),
+  height: rem(theme, METRICS.boxSizePx),
+  flex: "0 0 auto",
+  borderRadius: "50%",
+  background: theme.palette.background.paper,
+  border: on ? `${rem(theme, 5.5)} solid ${theme.palette.primary.main}` : `${rem(theme, 1.5)} solid ${theme.palette.divider}`,
+  boxSizing: "border-box"
+});
+var sectionHeadSx = (theme) => ({
+  fontWeight: 600,
+  fontSize: rem(theme, 10),
+  lineHeight: 1,
+  letterSpacing: ".08em",
+  textTransform: "uppercase",
+  color: theme.palette.text.secondary,
+  padding: rems(theme, 9, 8, 6)
+});
+var footerSx = (theme) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: rem(theme, 8),
+  padding: rems(theme, 9, 10),
+  borderTop: `1px solid ${theme.palette.divider}`,
+  background: theme.palette.action.hover
+});
+var emptySx = (theme) => ({
+  padding: rems(theme, 26, 18),
+  textAlign: "center",
+  color: theme.palette.text.secondary,
+  "& strong": {
+    display: "block",
+    color: theme.palette.text.primary,
+    fontSize: rem(theme, 13.5),
+    marginBottom: rem(theme, 4)
+  },
+  "& p": { margin: rems(theme, 0, 0, 12), fontSize: rem(theme, 12.5), lineHeight: 1.5 }
+});
+var skeletonSx = (theme) => ({
+  height: rem(theme, METRICS.rowHeightPx),
+  margin: rems(theme, 4, 6),
+  borderRadius: rem(theme, METRICS.rowRadiusPx)
+});
+
+export {
+  METRICS,
+  triggerSx,
+  triggerCountSx,
+  triggerClearSx,
+  triggerChevronSx,
+  panelSx,
+  sheetSx,
+  panelHeadSx,
+  pinnedSx,
+  pinnedLabelSx,
+  chipWrapSx,
+  chipSx,
+  listSx,
+  rowSx,
+  rowIndent,
+  rowNameSx,
+  rowMetaSx,
+  markSx,
+  chevronButtonSx,
+  checkboxSx,
+  checkboxBarSx,
+  radioSx,
+  sectionHeadSx,
+  footerSx,
+  emptySx,
+  skeletonSx
+};
+//# sourceMappingURL=chunk-JC22FNFA.js.map

package/dist/chunk-JC22FNFA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/CategorySelect.styles.ts"],"sourcesContent":["import { alpha, type CSSObject, type Theme } from '@mui/material/styles/index.js';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { fieldHeight } from '../../../tokens/field-height';\nimport { absoluteInk, uiInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\n/**\n * The prototype's METRICS, verbatim, in the design's px.\n *\n * Every number here is lifted from the approved design and is intentionally\n * not derived from `theme.spacing`: the design is specified on a half-pixel\n * type scale (13.5px rows, 1.5px checkbox borders) that an 8px spacing grid\n * cannot express without rounding the look away. Each is drawn through\n * `rem()` (the theme's type scale) where it is read, so it follows a density\n * mode exactly — `sheetBreakpoint` excepted, which is a media-query width.\n *\n * The trigger's CORNER and HEIGHT are the other exception: it is a field, so it\n * takes the theme's field radius and field height (`tokens/field-radius`,\n * `tokens/field-height`) and lines up with the inputs and filter pills beside it.\n *\n * COLOURS are the deliberate exception — they come from the theme, because a\n * tenant can white-label the palette (a hard-coded indigo would survive the\n * rebrand and the rest of the screen would not) and because the library ships a\n * dark mode. On the default light indigo theme the tokens below resolve to the\n * prototype's own values.\n */\nexport const METRICS = {\n  panelWidthPx: 340,\n  panelRadiusPx: 14,\n  listMaxHeightPx: 290,\n  sheetListMaxHeightPx: 340,\n  rowHeightPx: 36,\n  sheetRowHeightPx: 42,\n  rowRadiusPx: 8,\n  boxSizePx: 18,\n  chevronButtonPx: 22,\n  /** Extra left padding per level of nesting. */\n  rowIndentStepPx: 14,\n  footerButtonPx: 32,\n  sheetFooterButtonPx: 38,\n  /** Below this width the panel becomes a bottom sheet. */\n  sheetBreakpoint: 480,\n} as const;\n\n/** Accent family, derived so a white-labelled palette carries through. */\nconst accent = (theme: Theme) => ({\n  main: theme.palette.primary.main,\n  ink: theme.palette.primary.dark,\n  soft: alpha(theme.palette.primary.main, 0.08),\n  edge: alpha(theme.palette.primary.main, 0.28),\n  ring: alpha(theme.palette.primary.main, 0.15),\n});\n\n/** The closed control. `selected` swaps it to the accent-tinted \"has filter\" skin. */\nexport const triggerSx = (theme: Theme, selected: boolean, open: boolean): CSSObject => {\n  const brand = accent(theme);\n  return {\n    display: 'flex',\n    alignItems: 'center',\n    gap: rem(theme, 8),\n    height: fieldHeight(theme),\n    padding: rems(theme, 0, 10, 0, 12),\n    borderRadius: fieldRadiusPx(theme),\n    border: `1px solid ${open || selected ? brand.edge : fieldEdge(theme)}`,\n    background: selected ? brand.soft : theme.palette.background.paper,\n    color: selected ? brand.ink : theme.palette.text.primary,\n    font: 'inherit',\n    fontSize: rem(theme, 13),\n    cursor: 'pointer',\n    maxWidth: '100%',\n    transition: 'border-color .12s, box-shadow .12s',\n    boxShadow: open ? `0 0 0 ${rem(theme, 3)} ${brand.ring}` : 'none',\n    '&:hover': { borderColor: open || selected ? brand.edge : theme.palette.text.disabled },\n    '&:focus-visible': {\n      outline: 'none',\n      borderColor: brand.main,\n      boxShadow: `0 0 0 ${rem(theme, 3)} ${alpha(brand.main, 0.18)}`,\n    },\n    '&:disabled': { opacity: 0.5, cursor: 'default' },\n  };\n};\n\n/** The count pill inside the trigger. */\nexport const triggerCountSx = (theme: Theme): CSSObject => ({\n  fontWeight: 600,\n  fontSize: rem(theme, 11),\n  lineHeight: 1,\n  background: theme.palette.primary.main,\n  color: theme.palette.primary.contrastText,\n  borderRadius: rem(theme, 999),\n  padding: rems(theme, 3, 6),\n  minWidth: rem(theme, 18),\n  textAlign: 'center',\n});\n\n/** The trigger's inline clear (×) and the chevron. */\nexport const triggerClearSx = (theme: Theme): CSSObject => ({\n  width: rem(theme, 20),\n  height: rem(theme, 20),\n  flex: '0 0 auto',\n  border: 0,\n  background: 'transparent',\n  borderRadius: rem(theme, 5),\n  display: 'grid',\n  placeItems: 'center',\n  cursor: 'pointer',\n  color: 'inherit',\n  opacity: 0.6,\n  padding: 0,\n  '&:hover': { background: alpha(absoluteInk(theme).black, 0.08), opacity: 1 },\n});\n\nexport const triggerChevronSx = (theme: Theme, open: boolean): CSSObject => ({\n  width: rem(theme, 14),\n  height: rem(theme, 14),\n  flex: '0 0 auto',\n  opacity: 0.55,\n  transition: 'transform .15s',\n  transform: open ? 'rotate(180deg)' : 'none',\n});\n\n/** The floating panel. */\nexport const panelSx = (theme: Theme): CSSObject => ({\n  width: rem(theme, METRICS.panelWidthPx),\n  maxWidth: '100%',\n  background: theme.palette.background.paper,\n  border: `1px solid ${theme.palette.divider}`,\n  borderRadius: rem(theme, METRICS.panelRadiusPx),\n  boxShadow: `${rems(theme, 0, 1, 2)} ${alpha(uiInk(theme).panelShadowInk, 0.05)}, ${rems(theme, 0, 18, 40, -12)} ${alpha(uiInk(theme).panelShadowInk, 0.28)}`,\n  display: 'flex',\n  flexDirection: 'column',\n  overflow: 'hidden',\n});\n\n/** Bottom-sheet skin, applied under {@link METRICS.sheetBreakpoint}. */\nexport const sheetSx = (theme: Theme): CSSObject => ({\n  width: '100%',\n  maxWidth: 'none',\n  borderRadius: rems(theme, 18, 18, 0, 0),\n  borderBottom: 0,\n  position: 'relative',\n  paddingTop: rem(theme, 4),\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: rem(theme, 7),\n    left: '50%',\n    transform: 'translateX(-50%)',\n    width: rem(theme, 36),\n    height: rem(theme, 4),\n    borderRadius: rem(theme, 2),\n    background: theme.palette.divider,\n  },\n});\n\nexport const panelHeadSx = (theme: Theme, sheet: boolean): CSSObject => ({\n  padding: sheet ? rems(theme, 18, 10, 8) : rems(theme, 10, 10, 8),\n  borderBottom: `1px solid ${theme.palette.divider}`,\n});\n\nexport const pinnedSx = (theme: Theme): CSSObject => ({\n  padding: rems(theme, 9, 10),\n  borderBottom: `1px solid ${theme.palette.divider}`,\n  background: alpha(theme.palette.primary.main, 0.03),\n});\n\nexport const pinnedLabelSx = (theme: Theme): CSSObject => ({\n  fontWeight: 600,\n  fontSize: rem(theme, 10),\n  lineHeight: 1,\n  letterSpacing: '.08em',\n  textTransform: 'uppercase',\n  color: theme.palette.text.secondary,\n  marginBottom: rem(theme, 7),\n});\n\nexport const chipWrapSx = (theme: Theme): CSSObject => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: rem(theme, 5),\n  maxHeight: rem(theme, 74),\n  overflow: 'auto',\n});\n\n/** A selected-category chip, in the pinned tray and the applied bar alike. */\nexport const chipSx = (theme: Theme): CSSObject => {\n  const brand = accent(theme);\n  return {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: rem(theme, 5),\n    fontSize: rem(theme, 12),\n    background: brand.soft,\n    color: brand.ink,\n    border: `1px solid ${brand.edge}`,\n    borderRadius: rem(theme, 7),\n    padding: rems(theme, 3, 4, 3, 8),\n    '& button': {\n      border: 0,\n      background: 'transparent',\n      color: 'inherit',\n      cursor: 'pointer',\n      padding: 0,\n      width: rem(theme, 16),\n      height: rem(theme, 16),\n      borderRadius: rem(theme, 4),\n      display: 'grid',\n      placeItems: 'center',\n      opacity: 0.65,\n      fontSize: rem(theme, 13),\n      lineHeight: 1,\n      '&:hover': { background: alpha(theme.palette.primary.main, 0.16), opacity: 1 },\n    },\n  };\n};\n\nexport const listSx = (theme: Theme, sheet: boolean): CSSObject => ({\n  overflow: 'auto',\n  maxHeight: rem(theme, sheet ? METRICS.sheetListMaxHeightPx : METRICS.listMaxHeightPx),\n  padding: rems(theme, 6, 6, 8),\n  scrollPadding: rems(theme, 8, 0),\n  overscrollBehavior: 'contain',\n});\n\n/** A row. `active` is the KEYBOARD cursor — deliberately distinct from hover. */\nexport const rowSx = (theme: Theme, active: boolean, sheet: boolean): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: rem(theme, 8),\n  padding: rems(theme, 0, 8),\n  height: rem(theme, sheet ? METRICS.sheetRowHeightPx : METRICS.rowHeightPx),\n  borderRadius: rem(theme, METRICS.rowRadiusPx),\n  cursor: 'pointer',\n  userSelect: 'none',\n  position: 'relative',\n  width: '100%',\n  border: 0,\n  textAlign: 'left',\n  font: 'inherit',\n  background: active ? alpha(theme.palette.primary.main, 0.08) : 'transparent',\n  boxShadow: active ? `inset 0 0 0 ${rem(theme, 1)} ${alpha(theme.palette.primary.main, 0.3)}` : 'none',\n  '&:hover': {\n    background: active\n      ? alpha(theme.palette.primary.main, 0.08)\n      : theme.palette.action.hover,\n  },\n  '&:focus-visible': { outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, 1) },\n});\n\n/**\n * How far a row sits in from the panel edge, by depth.\n *\n * One step per level, on top of {@link rowSx}'s own 8px gutter — depth 0 keeps\n * that gutter, and every level below it adds `METRICS.rowIndentStepPx`. Read\n * through the type scale like the rest of this file: the step is the design's\n * own 14px, not a spacing multiple that would round it.\n */\nexport const rowIndent = (theme: Theme, depth: number): CSSObject =>\n  depth === 0 ? {} : { paddingLeft: rem(theme, depth * METRICS.rowIndentStepPx) };\n\nexport const rowNameSx = (theme: Theme, isCategory: boolean): CSSObject => ({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  fontSize: rem(theme, 13.5),\n  fontWeight: isCategory ? 600 : 450,\n  color: isCategory ? theme.palette.text.primary : theme.palette.text.secondary,\n});\n\nexport const rowMetaSx = (theme: Theme, selected: boolean): CSSObject => ({\n  font: `500 ${rem(theme, 11)}/1 ui-monospace, SFMono-Regular, Menlo, monospace`,\n  color: selected ? theme.palette.primary.main : theme.palette.text.secondary,\n  fontWeight: selected ? 600 : 500,\n  flex: '0 0 auto',\n});\n\n/** The query hit inside a row label. */\nexport const markSx = (theme: Theme): CSSObject => ({\n  background: uiInk(theme).highlightMark,\n  color: 'inherit',\n  borderRadius: rem(theme, 2),\n  padding: rems(theme, 0, 1),\n});\n\nexport const chevronButtonSx = (theme: Theme, open: boolean): CSSObject => ({\n  width: rem(theme, METRICS.chevronButtonPx),\n  height: rem(theme, METRICS.chevronButtonPx),\n  flex: '0 0 auto',\n  border: 0,\n  background: 'transparent',\n  borderRadius: rem(theme, 6),\n  display: 'grid',\n  placeItems: 'center',\n  cursor: 'pointer',\n  color: theme.palette.text.secondary,\n  padding: 0,\n  '&:hover': { background: theme.palette.action.hover, color: theme.palette.text.primary },\n  '& svg': { width: rem(theme, 12), height: rem(theme, 12), transition: 'transform .15s', transform: open ? 'rotate(90deg)' : 'none' },\n});\n\n/** The tri-state checkbox: unchecked, checked, or the partial bar. */\nexport const checkboxSx = (theme: Theme, state: 'off' | 'partial' | 'on'): CSSObject => ({\n  width: rem(theme, METRICS.boxSizePx),\n  height: rem(theme, METRICS.boxSizePx),\n  flex: '0 0 auto',\n  border: `${rem(theme, 1.5)} solid ${state === 'off' ? theme.palette.divider : theme.palette.primary.main}`,\n  borderRadius: rem(theme, 5),\n  background: state === 'off' ? theme.palette.background.paper : theme.palette.primary.main,\n  display: 'grid',\n  placeItems: 'center',\n  transition: 'background .1s, border-color .1s',\n  '& svg': { width: rem(theme, 12), height: rem(theme, 12), color: theme.palette.primary.contrastText },\n});\n\n/** The partial bar drawn inside a half-selected checkbox. */\nexport const checkboxBarSx = (theme: Theme): CSSObject => ({\n  width: rem(theme, 9),\n  height: rem(theme, 2),\n  background: theme.palette.primary.contrastText,\n  borderRadius: rem(theme, 1),\n});\n\nexport const radioSx = (theme: Theme, on: boolean): CSSObject => ({\n  width: rem(theme, METRICS.boxSizePx),\n  height: rem(theme, METRICS.boxSizePx),\n  flex: '0 0 auto',\n  borderRadius: '50%',\n  background: theme.palette.background.paper,\n  border: on\n    ? `${rem(theme, 5.5)} solid ${theme.palette.primary.main}`\n    : `${rem(theme, 1.5)} solid ${theme.palette.divider}`,\n  boxSizing: 'border-box',\n});\n\nexport const sectionHeadSx = (theme: Theme): CSSObject => ({\n  fontWeight: 600,\n  fontSize: rem(theme, 10),\n  lineHeight: 1,\n  letterSpacing: '.08em',\n  textTransform: 'uppercase',\n  color: theme.palette.text.secondary,\n  padding: rems(theme, 9, 8, 6),\n});\n\nexport const footerSx = (theme: Theme): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: rem(theme, 8),\n  padding: rems(theme, 9, 10),\n  borderTop: `1px solid ${theme.palette.divider}`,\n  background: theme.palette.action.hover,\n});\n\nexport const emptySx = (theme: Theme): CSSObject => ({\n  padding: rems(theme, 26, 18),\n  textAlign: 'center',\n  color: theme.palette.text.secondary,\n  '& strong': {\n    display: 'block',\n    color: theme.palette.text.primary,\n    fontSize: rem(theme, 13.5),\n    marginBottom: rem(theme, 4),\n  },\n  '& p': { margin: rems(theme, 0, 0, 12), fontSize: rem(theme, 12.5), lineHeight: 1.5 },\n});\n\n/** Skeleton row used while the catalogue loads. */\nexport const skeletonSx = (theme: Theme): CSSObject => ({\n  height: rem(theme, METRICS.rowHeightPx),\n  margin: rems(theme, 4, 6),\n  borderRadius: rem(theme, METRICS.rowRadiusPx),\n});\n"],"mappings":"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","names":[]}

package/dist/chunk-JGRE56GQ.js

@@ -0,0 +1,57 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  default as default3
+} from "./chunk-WEBEOBN5.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/save-view-preview.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SummaryRow({
+  label,
+  items,
+  testId
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", gap: 1.5 }, "data-testid": testId, children: [
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { width: sxRem(116), flexShrink: 0, color: "text.secondary" }, children: label }) }),
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { minWidth: 0, flex: 1 }, children: items.join(", ") }) })
+  ] });
+}
+function PreviewBox({ preview, testIdPrefix }) {
+  const copy = useDataViewsCopy();
+  const empty = preview.filters.length === 0 && preview.columns.length === 0 && preview.sort.length === 0;
+  return /* @__PURE__ */ jsxs(default2, { sx: { p: 1.5, borderRadius: 1.5, bgcolor: "action.hover", border: (theme) => `1px solid ${theme.palette.divider}` }, children: [
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(
+      default2,
+      {
+        component: "span",
+        sx: { display: "block", mb: 1, textTransform: "uppercase", letterSpacing: sxRem(0.6), fontWeight: 600, color: "text.disabled" },
+        children: copy.saveView.previewHeading
+      }
+    ) }),
+    empty ? (
+      // Saving is still allowed — an operator may be naming the default on
+      // purpose — but it should not be a surprise afterwards.
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { color: "warning.main", lineHeight: 1.6 }, "data-testid": `${testIdPrefix}-preview-empty`, children: copy.saveView.previewUnchanged }) })
+    ) : /* @__PURE__ */ jsxs(default3, { spacing: 0.75, children: [
+      /* @__PURE__ */ jsx(SummaryRow, { label: copy.saveView.previewFilters, items: preview.filters, testId: `${testIdPrefix}-preview-filters` }),
+      /* @__PURE__ */ jsx(SummaryRow, { label: copy.saveView.previewHiddenColumns, items: preview.columns, testId: `${testIdPrefix}-preview-columns` }),
+      /* @__PURE__ */ jsx(SummaryRow, { label: copy.saveView.sortRowLabel, items: preview.sort, testId: `${testIdPrefix}-preview-sort` })
+    ] })
+  ] });
+}
+
+export {
+  PreviewBox
+};
+//# sourceMappingURL=chunk-JGRE56GQ.js.map

package/dist/chunk-JGRE56GQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/save-view-preview.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * What a saved view actually GUARDS, listed before it is saved.\n *\n * Split out of `SaveViewModal.tsx` when that file crossed the size gate: this\n * is the one self-contained piece of it — a read-only summary of the view\n * state, with no form and no dialog around it.\n */\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { Box } from \"../../../mui/Box\";\nimport { Stack } from \"../../../mui/Stack\";\nimport { Text } from \"../../typography/Text\";\nimport { sxRem } from \"../../../tokens/relative\";\n\nexport interface PreviewBoxProps {\n  preview: { filters: string[]; columns: string[]; sort: string[] };\n  testIdPrefix: string;\n}\n\n/** One \"label — value\" line of the summary. */\nfunction SummaryRow({\n  label,\n  items,\n  testId,\n}: {\n  label: string;\n  items: string[];\n  testId: string;\n}): React.JSX.Element | null {\n  if (items.length === 0) return null;\n  return (\n    <Box sx={{ display: \"flex\", gap: 1.5 }} data-testid={testId}>\n      <Text variant=\"caption\" as=\"span\">\n        <Box component=\"span\" sx={{ width: sxRem(116), flexShrink: 0, color: \"text.secondary\" }}>\n          {label}\n        </Box>\n      </Text>\n      <Text variant=\"caption\" as=\"span\">\n        <Box component=\"span\" sx={{ minWidth: 0, flex: 1 }}>\n          {items.join(\", \")}\n        </Box>\n      </Text>\n    </Box>\n  );\n}\n\nexport function PreviewBox({ preview, testIdPrefix }: PreviewBoxProps): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const empty =\n    preview.filters.length === 0 && preview.columns.length === 0 && preview.sort.length === 0;\n  return (\n    <Box sx={{ p: 1.5, borderRadius: 1.5, bgcolor: \"action.hover\", border: (theme) => `1px solid ${theme.palette.divider}` }}>\n      <Text variant=\"caption\" as=\"p\">\n        <Box\n          component=\"span\"\n          sx={{ display: \"block\", mb: 1, textTransform: \"uppercase\", letterSpacing: sxRem(0.6), fontWeight: 600, color: \"text.disabled\" }}\n        >\n          {copy.saveView.previewHeading}\n        </Box>\n      </Text>\n      {empty ? (\n        // Saving is still allowed — an operator may be naming the default on\n        // purpose — but it should not be a surprise afterwards.\n        <Text variant=\"caption\" as=\"p\">\n          <Box component=\"span\" sx={{ color: \"warning.main\", lineHeight: 1.6 }} data-testid={`${testIdPrefix}-preview-empty`}>\n            {copy.saveView.previewUnchanged}\n          </Box>\n        </Text>\n      ) : (\n        <Stack spacing={0.75}>\n          <SummaryRow label={copy.saveView.previewFilters} items={preview.filters} testId={`${testIdPrefix}-preview-filters`} />\n          <SummaryRow label={copy.saveView.previewHiddenColumns} items={preview.columns} testId={`${testIdPrefix}-preview-columns`} />\n          <SummaryRow label={copy.saveView.sortRowLabel} items={preview.sort} testId={`${testIdPrefix}-preview-sort`} />\n        </Stack>\n      )}\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAgCI,SAEI,KAFJ;AAXJ,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,GAI6B;AAC3B,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SACE,qBAACA,UAAA,EAAI,IAAI,EAAE,SAAS,QAAQ,KAAK,IAAI,GAAG,eAAa,QACnD;AAAA,wBAAC,QAAK,SAAQ,WAAU,IAAG,QACzB,8BAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,OAAO,MAAM,GAAG,GAAG,YAAY,GAAG,OAAO,iBAAiB,GACnF,iBACH,GACF;AAAA,IACA,oBAAC,QAAK,SAAQ,WAAU,IAAG,QACzB,8BAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,UAAU,GAAG,MAAM,EAAE,GAC9C,gBAAM,KAAK,IAAI,GAClB,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,WAAW,EAAE,SAAS,aAAa,GAAuC;AACxF,QAAM,OAAO,iBAAiB;AAC9B,QAAM,QACJ,QAAQ,QAAQ,WAAW,KAAK,QAAQ,QAAQ,WAAW,KAAK,QAAQ,KAAK,WAAW;AAC1F,SACE,qBAACA,UAAA,EAAI,IAAI,EAAE,GAAG,KAAK,cAAc,KAAK,SAAS,gBAAgB,QAAQ,CAAC,UAAU,aAAa,MAAM,QAAQ,OAAO,GAAG,GACrH;AAAA,wBAAC,QAAK,SAAQ,WAAU,IAAG,KACzB;AAAA,MAACA;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,IAAI,EAAE,SAAS,SAAS,IAAI,GAAG,eAAe,aAAa,eAAe,MAAM,GAAG,GAAG,YAAY,KAAK,OAAO,gBAAgB;AAAA,QAE7H,eAAK,SAAS;AAAA;AAAA,IACjB,GACF;AAAA,IACC;AAAA;AAAA;AAAA,MAGC,oBAAC,QAAK,SAAQ,WAAU,IAAG,KACzB,8BAACA,UAAA,EAAI,WAAU,QAAO,IAAI,EAAE,OAAO,gBAAgB,YAAY,IAAI,GAAG,eAAa,GAAG,YAAY,kBAC/F,eAAK,SAAS,kBACjB,GACF;AAAA,QAEA,qBAACA,UAAA,EAAM,SAAS,MACd;AAAA,0BAAC,cAAW,OAAO,KAAK,SAAS,gBAAgB,OAAO,QAAQ,SAAS,QAAQ,GAAG,YAAY,oBAAoB;AAAA,MACpH,oBAAC,cAAW,OAAO,KAAK,SAAS,sBAAsB,OAAO,QAAQ,SAAS,QAAQ,GAAG,YAAY,oBAAoB;AAAA,MAC1H,oBAAC,cAAW,OAAO,KAAK,SAAS,cAAc,OAAO,QAAQ,MAAM,QAAQ,GAAG,YAAY,iBAAiB;AAAA,OAC9G;AAAA,KAEJ;AAEJ;","names":["default"]}