@12-apps/ui 6.33.0 → 6.34.0

package/dist/chunk-WYXNFH5Y.js

@@ -0,0 +1,42 @@
+import {
+  ICON_SIZES
+} from "./chunk-RTSK5OZT.js";
+import {
+  ELEVATION_SHADOWS
+} from "./chunk-N3GAFIXG.js";
+
+// src/components/form/Select/Select.metrics.ts
+var inputVariantFor = (variant) => variant === "default" ? "outlined" : variant;
+var selectInputSize = (size) => size === "sm" ? "sm" : "md";
+var SELECT_ICON = {
+  size: ICON_SIZES.md,
+  right: 7,
+  displayPaddingRight: 32,
+  openRotateDeg: 180
+};
+var SELECT_ICON_GAP = SELECT_ICON.displayPaddingRight - SELECT_ICON.size - SELECT_ICON.right;
+var SELECT_DISPLAY_MIN_HEIGHT = 23;
+var SELECT_MENU = {
+  itemMinHeight: 48,
+  itemPaddingVertical: 6,
+  itemPaddingHorizontal: 16,
+  listPaddingVertical: 8,
+  selectedAlpha: { light: 0.08, dark: 0.16 },
+  disabledOpacity: 0.38,
+  /** MUI's `Menu` paper is `calc(100% - 96px)` tall at most. */
+  maxHeightInset: 96
+};
+var MUI_MENU_SHADOW = ELEVATION_SHADOWS[8];
+var selectedWashAlpha = (theme) => theme.mode === "dark" ? SELECT_MENU.selectedAlpha.dark : SELECT_MENU.selectedAlpha.light;
+
+export {
+  inputVariantFor,
+  selectInputSize,
+  SELECT_ICON,
+  SELECT_ICON_GAP,
+  SELECT_DISPLAY_MIN_HEIGHT,
+  SELECT_MENU,
+  MUI_MENU_SHADOW,
+  selectedWashAlpha
+};
+//# sourceMappingURL=chunk-WYXNFH5Y.js.map

package/dist/chunk-WYXNFH5Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Select/Select.metrics.ts"],"sourcesContent":["import type { SelectVariant } from './Select.base';\nimport type { InputVariant } from '../Input/Input.base';\nimport { ICON_SIZES } from '../../../icons/Icon.types';\nimport { ELEVATION_SHADOWS } from '../../../tokens/ink.core';\nimport type { UiTheme } from '../../../tokens/theme';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Select` RENDERERS DRAW WITH.\n *\n * A `Select` on the web IS an `OutlinedInput` with a display slot and an arrow\n * where the value would be typed, so the box's own numbers — the padding, the\n * border, the radius, the field edge — are `Input.metrics.ts`'s, read through\n * {@link inputVariantFor} rather than restated. What is here is what a select\n * has and a text field does not: the arrow, the option list, and the two\n * heights MUI's `FormControl` offers.\n */\n\n/** Our three variants onto the `Input` variant that draws the same box. */\nexport const inputVariantFor = (variant: SelectVariant): InputVariant =>\n  variant === 'default' ? 'outlined' : variant;\n\n/**\n * The house scale as a `FormControl` size.\n *\n * Not `muiSize`: that collapses five onto MUI's three, and a FormControl takes\n * only two — `sm` draws small and EVERY other step, `xs` included, draws\n * medium. Restated from `Select.tsx`'s `formControlSize` so the native side\n * reads the same lossy map rather than inventing a kinder one.\n */\nexport const selectInputSize = (size: SizeValue | undefined): 'sm' | 'md' =>\n  size === 'sm' ? 'sm' : 'md';\n\n/**\n * The arrow: MUI's `ArrowDropDown` at `SvgIcon`'s medium size, 7px from the\n * right edge, turned over while the list is open. The display slot reserves\n * 32px for it, so the flow-laid glyph takes the difference as a margin.\n */\nexport const SELECT_ICON = {\n  size: ICON_SIZES.md,\n  right: 7,\n  displayPaddingRight: 32,\n  openRotateDeg: 180,\n} as const;\n\n/** What the glyph leaves between itself and the value: 32 - 24 - 7. */\nexport const SELECT_ICON_GAP =\n  SELECT_ICON.displayPaddingRight - SELECT_ICON.size - SELECT_ICON.right;\n\n/** `.MuiSelect-select`'s floor, MUI's `1.4375em` at the 16px body size. */\nexport const SELECT_DISPLAY_MIN_HEIGHT = 23;\n\n/**\n * The option list: MUI's `Menu` over a `MenuList` of `MenuItem`s.\n *\n * `selectedAlpha` is `palette.action.selectedOpacity`, which MUI doubles in\n * dark mode; `disabledOpacity` is `palette.action.disabledOpacity`. Neither is\n * on `UiTheme`, whose `action` carries colours rather than opacities.\n */\nexport const SELECT_MENU = {\n  itemMinHeight: 48,\n  itemPaddingVertical: 6,\n  itemPaddingHorizontal: 16,\n  listPaddingVertical: 8,\n  selectedAlpha: { light: 0.08, dark: 0.16 },\n  disabledOpacity: 0.38,\n  /** MUI's `Menu` paper is `calc(100% - 96px)` tall at most. */\n  maxHeightInset: 96,\n} as const;\n\n/** MUI's `theme.shadows[8]`, the elevation a `Menu` paper rests at. */\nexport const MUI_MENU_SHADOW = ELEVATION_SHADOWS[8];\n\n/** The wash behind the option the value currently names. */\nexport const selectedWashAlpha = (theme: UiTheme): number =>\n  theme.mode === 'dark' ? SELECT_MENU.selectedAlpha.dark : SELECT_MENU.selectedAlpha.light;\n\n/**\n * The box a select draws IS the input's box, so these are the input's tables\n * under this component's names — the border widths, the glass and gradient\n * alphas, the halo and the pulse. Restating them here is how the two controls\n * would come to disagree about what an outlined field looks like.\n */\nexport {\n  INPUT_BORDER as SELECT_BORDER,\n  INPUT_GLASS as SELECT_GLASS,\n  INPUT_GLOW as SELECT_GLOW,\n  INPUT_GRADIENT as SELECT_GRADIENT,\n  INPUT_PULSE as SELECT_PULSE,\n} from '../Input/Input.metrics';\n"],"mappings":";;;;;;;;AAmBO,IAAM,kBAAkB,CAAC,YAC9B,YAAY,YAAY,aAAa;AAUhC,IAAM,kBAAkB,CAAC,SAC9B,SAAS,OAAO,OAAO;AAOlB,IAAM,cAAc;AAAA,EACzB,MAAM,WAAW;AAAA,EACjB,OAAO;AAAA,EACP,qBAAqB;AAAA,EACrB,eAAe;AACjB;AAGO,IAAM,kBACX,YAAY,sBAAsB,YAAY,OAAO,YAAY;AAG5D,IAAM,4BAA4B;AASlC,IAAM,cAAc;AAAA,EACzB,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,uBAAuB;AAAA,EACvB,qBAAqB;AAAA,EACrB,eAAe,EAAE,OAAO,MAAM,MAAM,KAAK;AAAA,EACzC,iBAAiB;AAAA;AAAA,EAEjB,gBAAgB;AAClB;AAGO,IAAM,kBAAkB,kBAAkB,CAAC;AAG3C,IAAM,oBAAoB,CAAC,UAChC,MAAM,SAAS,SAAS,YAAY,cAAc,OAAO,YAAY,cAAc;","names":[]}

package/dist/chunk-X4PS3E3V.js

@@ -0,0 +1,40 @@
+import {
+  neutralTones,
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/data-display/MapPreview/mapSurface.ts
+import { alpha } from "@mui/material/styles/index.js";
+var toneGradient = (from, to, opacity = 1) => `linear-gradient(135deg, ${alpha(from, opacity)} 0%, ${alpha(to, opacity)} 100%)`;
+var surfaceBackground = (mapType, theme) => {
+  const tones = neutralTones(theme);
+  if (mapType === "satellite") return toneGradient(tones.inverseSurface, tones.raised);
+  if (mapType === "terrain") {
+    const ground = uiInk(theme).mapSurface;
+    return `linear-gradient(135deg, ${alpha(ground.terrainFrom, 0.2)} 0%, ${alpha(ground.terrainTo, 0.3)} 100%)`;
+  }
+  if (theme.palette.mode === "dark") return toneGradient(tones.inverseSurface, tones.raised);
+  return toneGradient(tones.surface, tones.faint);
+};
+var tileBackground = (mapType, theme) => {
+  const ground = uiInk(theme).mapSurface;
+  if (mapType === "satellite") {
+    return `linear-gradient(135deg, ${alpha(ground.satelliteTileFrom, 0.9)} 0%, ${alpha(ground.satelliteTileTo, 0.9)} 100%)`;
+  }
+  if (mapType === "terrain") {
+    return `linear-gradient(135deg, ${alpha(ground.terrainTileFrom, 0.1)} 0%, ${alpha(ground.terrainTileTo, 0.1)} 100%)`;
+  }
+  const tones = neutralTones(theme);
+  return toneGradient(tones.surface, tones.faint, 0.5);
+};
+var BOUNCE_KEYFRAMES = {
+  "0%, 100%": { transform: "translateY(0)" },
+  "50%": { transform: "translateY(-10px)" }
+};
+
+export {
+  surfaceBackground,
+  tileBackground,
+  BOUNCE_KEYFRAMES
+};
+//# sourceMappingURL=chunk-X4PS3E3V.js.map

package/dist/chunk-X4PS3E3V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/mapSurface.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\nimport { alpha } from '@mui/material/styles/index.js';\n\nimport type { MapType } from './MapPreview.types';\nimport { neutralTones, uiInk } from '../../../tokens/ink';\n\nconst toneGradient = (from: string, to: string, opacity = 1): string =>\n  `linear-gradient(135deg, ${alpha(from, opacity)} 0%, ${alpha(to, opacity)} 100%)`;\n\n// The backdrop behind the tiles: dark for satellite, green for terrain, and\n// grey for road maps, following the theme's own light/dark choice.\nexport const surfaceBackground = (mapType: MapType, theme: Theme): string => {\n  const tones = neutralTones(theme);\n  if (mapType === 'satellite') return toneGradient(tones.inverseSurface, tones.raised);\n  if (mapType === 'terrain') {\n    const ground = uiInk(theme).mapSurface;\n    return `linear-gradient(135deg, ${alpha(ground.terrainFrom, 0.2)} 0%, ${alpha(ground.terrainTo, 0.3)} 100%)`;\n  }\n  if (theme.palette.mode === 'dark') return toneGradient(tones.inverseSurface, tones.raised);\n  return toneGradient(tones.surface, tones.faint);\n};\n\nexport const tileBackground = (mapType: MapType, theme: Theme): string => {\n  const ground = uiInk(theme).mapSurface;\n  if (mapType === 'satellite') {\n    return `linear-gradient(135deg, ${alpha(ground.satelliteTileFrom, 0.9)} 0%, ${alpha(ground.satelliteTileTo, 0.9)} 100%)`;\n  }\n  if (mapType === 'terrain') {\n    return `linear-gradient(135deg, ${alpha(ground.terrainTileFrom, 0.1)} 0%, ${alpha(ground.terrainTileTo, 0.1)} 100%)`;\n  }\n  const tones = neutralTones(theme);\n  return toneGradient(tones.surface, tones.faint, 0.5);\n};\n\nexport const BOUNCE_KEYFRAMES = {\n  '0%, 100%': { transform: 'translateY(0)' },\n  '50%': { transform: 'translateY(-10px)' },\n} as const;\n"],"mappings":";;;;;;AACA,SAAS,aAAa;AAKtB,IAAM,eAAe,CAAC,MAAc,IAAY,UAAU,MACxD,2BAA2B,MAAM,MAAM,OAAO,CAAC,QAAQ,MAAM,IAAI,OAAO,CAAC;AAIpE,IAAM,oBAAoB,CAAC,SAAkB,UAAyB;AAC3E,QAAM,QAAQ,aAAa,KAAK;AAChC,MAAI,YAAY,YAAa,QAAO,aAAa,MAAM,gBAAgB,MAAM,MAAM;AACnF,MAAI,YAAY,WAAW;AACzB,UAAM,SAAS,MAAM,KAAK,EAAE;AAC5B,WAAO,2BAA2B,MAAM,OAAO,aAAa,GAAG,CAAC,QAAQ,MAAM,OAAO,WAAW,GAAG,CAAC;AAAA,EACtG;AACA,MAAI,MAAM,QAAQ,SAAS,OAAQ,QAAO,aAAa,MAAM,gBAAgB,MAAM,MAAM;AACzF,SAAO,aAAa,MAAM,SAAS,MAAM,KAAK;AAChD;AAEO,IAAM,iBAAiB,CAAC,SAAkB,UAAyB;AACxE,QAAM,SAAS,MAAM,KAAK,EAAE;AAC5B,MAAI,YAAY,aAAa;AAC3B,WAAO,2BAA2B,MAAM,OAAO,mBAAmB,GAAG,CAAC,QAAQ,MAAM,OAAO,iBAAiB,GAAG,CAAC;AAAA,EAClH;AACA,MAAI,YAAY,WAAW;AACzB,WAAO,2BAA2B,MAAM,OAAO,iBAAiB,GAAG,CAAC,QAAQ,MAAM,OAAO,eAAe,GAAG,CAAC;AAAA,EAC9G;AACA,QAAM,QAAQ,aAAa,KAAK;AAChC,SAAO,aAAa,MAAM,SAAS,MAAM,OAAO,GAAG;AACrD;AAEO,IAAM,mBAAmB;AAAA,EAC9B,YAAY,EAAE,WAAW,gBAAgB;AAAA,EACzC,OAAO,EAAE,WAAW,oBAAoB;AAC1C;","names":[]}

package/dist/chunk-XEYLYUDM.js

@@ -0,0 +1,147 @@
+import {
+  accentFor
+} from "./chunk-TCAQOUIB.js";
+import {
+  headingMetrics
+} from "./chunk-PT6TCWIW.js";
+import {
+  fieldOverrides
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
+import {
+  FONT_WEIGHTS,
+  TYPE_SIZES,
+  WEB_FONT_FAMILY,
+  WEB_MONOSPACE_FONT_FAMILY
+} from "./chunk-PE4ZW3IA.js";
+import {
+  cssLengthToPx,
+  cssTrackingToEm
+} from "./chunk-AG66JBNH.js";
+import {
+  HEADING_LEVELS
+} from "./chunk-FZXKH2ZT.js";
+import {
+  resolveFieldHeight
+} from "./chunk-PZBK3F52.js";
+
+// src/provider/mui-bridge.ts
+var slot = (color) => ({
+  main: color.main,
+  light: color.light,
+  dark: color.dark,
+  contrastText: color.contrastText
+});
+function headingSteps(theme) {
+  return Object.fromEntries(
+    HEADING_LEVELS.map((level) => {
+      const metrics = headingMetrics(theme, level);
+      return [
+        level,
+        {
+          fontSize: cssLengthToPx(metrics.fontSize, 16),
+          lineHeight: metrics.lineHeight,
+          letterSpacing: cssTrackingToEm(metrics.letterSpacing),
+          normalWeight: metrics.normalWeight
+        }
+      ];
+    })
+  );
+}
+function uiThemeFromMui(theme) {
+  const { palette } = theme;
+  const unit = cssLengthToPx(theme.spacing(1), 8);
+  const md = cssLengthToPx(theme.shape.borderRadius, 4);
+  return {
+    mode: palette.mode,
+    palette: {
+      mode: palette.mode,
+      primary: slot(palette.primary),
+      secondary: slot(palette.secondary),
+      success: slot(palette.success),
+      warning: slot(palette.warning),
+      info: slot(palette.info),
+      danger: slot(palette.error),
+      neutral: accentFor(theme, "neutral"),
+      text: {
+        primary: palette.text.primary,
+        secondary: palette.text.secondary,
+        disabled: palette.text.disabled
+      },
+      background: { default: palette.background.default, paper: palette.background.paper },
+      divider: palette.divider,
+      action: {
+        active: palette.action.active,
+        hover: palette.action.hover,
+        selected: palette.action.selected,
+        disabled: palette.action.disabled,
+        disabledBackground: palette.action.disabledBackground,
+        focus: palette.action.focus
+      },
+      grey: {
+        50: palette.grey[50],
+        100: palette.grey[100],
+        200: palette.grey[200],
+        300: palette.grey[300],
+        400: palette.grey[400],
+        500: palette.grey[500],
+        600: palette.grey[600],
+        700: palette.grey[700],
+        800: palette.grey[800],
+        900: palette.grey[900]
+      }
+    },
+    spacing: (units) => units * unit,
+    spacingUnit: unit,
+    radius: { sm: md / 2, md, lg: md * 2, xl: md * 4, full: 9999, field: fieldRadius(theme) },
+    fieldHeight: resolveFieldHeight(theme.fieldHeight),
+    typography: {
+      fontFamily: theme.typography.fontFamily ?? WEB_FONT_FAMILY,
+      monospaceFontFamily: WEB_MONOSPACE_FONT_FAMILY,
+      sizes: TYPE_SIZES,
+      weights: FONT_WEIGHTS,
+      heading: headingSteps(theme)
+    },
+    zIndex: {
+      appBar: theme.zIndex.appBar,
+      drawer: theme.zIndex.drawer,
+      modal: theme.zIndex.modal,
+      snackbar: theme.zIndex.snackbar,
+      tooltip: theme.zIndex.tooltip
+    }
+  };
+}
+function muiThemeOptionsFrom(ui) {
+  const { palette } = ui;
+  return {
+    palette: {
+      mode: palette.mode,
+      primary: { ...palette.primary },
+      secondary: { ...palette.secondary },
+      success: { ...palette.success },
+      warning: { ...palette.warning },
+      info: { ...palette.info },
+      error: { ...palette.danger },
+      text: { ...palette.text },
+      background: { ...palette.background },
+      divider: palette.divider,
+      action: { ...palette.action },
+      grey: { ...palette.grey }
+    },
+    shape: { borderRadius: ui.radius.md },
+    fieldRadius: ui.radius.field,
+    fieldHeight: ui.fieldHeight,
+    components: fieldOverrides(ui.radius.field, ui.fieldHeight),
+    spacing: ui.spacingUnit,
+    typography: { fontFamily: ui.typography.fontFamily ?? WEB_FONT_FAMILY },
+    zIndex: { ...ui.zIndex }
+  };
+}
+
+export {
+  uiThemeFromMui,
+  muiThemeOptionsFrom
+};
+//# sourceMappingURL=chunk-XEYLYUDM.js.map

package/dist/chunk-XNBN5CVF.js

@@ -0,0 +1,145 @@
+import {
+  LabelBody
+} from "./chunk-BMEJN27K.js";
+import {
+  SR_ONLY_SX,
+  labelStyles,
+  sizeStyles,
+  textColor
+} from "./chunk-KDIPBEVE.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/form/Label/Label.tsx
+import Box from "@mui/material/Box/index.js";
+import Tooltip from "@mui/material/Tooltip/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULTS = {
+  required: false,
+  disabled: false,
+  error: false,
+  variant: "default",
+  size: "md",
+  color: "neutral",
+  glow: false,
+  pulse: false,
+  ripple: false,
+  loading: false,
+  asteriskPlacement: "end",
+  iconPosition: "start",
+  srOnly: false,
+  weight: "regular",
+  transform: "none",
+  align: "left",
+  nowrap: false,
+  truncate: false
+};
+var Label = forwardRef((props, ref) => {
+  const {
+    children,
+    htmlFor,
+    required,
+    disabled,
+    error,
+    variant,
+    size,
+    color,
+    glow,
+    pulse,
+    ripple,
+    loading,
+    className,
+    style,
+    tooltip,
+    helperText,
+    asteriskPlacement,
+    icon,
+    iconPosition,
+    onClick,
+    onFocus,
+    onBlur,
+    srOnly,
+    weight,
+    transform,
+    align,
+    nowrap,
+    truncate,
+    dataTestId,
+    ...rest
+  } = withDefaults(props, DEFAULTS);
+  const theme = useTheme();
+  const flags = {
+    variant,
+    size,
+    color,
+    weight,
+    transform,
+    align,
+    error,
+    disabled,
+    glow,
+    pulse,
+    ripple,
+    srOnly,
+    nowrap,
+    truncate,
+    clickable: Boolean(onClick)
+  };
+  const labelContent = /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "label",
+      ref,
+      htmlFor,
+      onClick,
+      onFocus,
+      onBlur,
+      className,
+      "data-testid": dataTestId,
+      sx: { ...labelStyles(theme, flags), ...style },
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        LabelBody,
+        {
+          required,
+          asteriskPlacement,
+          icon,
+          iconPosition,
+          loading,
+          fontSize: sizeStyles(theme, size).fontSize,
+          color: textColor(theme, flags),
+          children
+        }
+      )
+    }
+  );
+  if (srOnly) {
+    return /* @__PURE__ */ jsx(Box, { component: "label", htmlFor, "data-testid": dataTestId, sx: SR_ONLY_SX, children });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    tooltip ? /* @__PURE__ */ jsx(Tooltip, { title: tooltip, arrow: true, children: labelContent }) : labelContent,
+    helperText && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "caption",
+        sx: {
+          display: "block",
+          color: error ? theme.palette.error.main : theme.palette.text.secondary,
+          marginTop: theme.spacing(0.5),
+          fontSize: "0.75rem"
+        },
+        children: helperText
+      }
+    )
+  ] });
+});
+Label.displayName = "Label";
+
+export {
+  Label
+};
+//# sourceMappingURL=chunk-XNBN5CVF.js.map

package/dist/chunk-XOL2QCSP.js

@@ -0,0 +1,273 @@
+import {
+  DataViewsBoard
+} from "./chunk-VLVMJDGD.js";
+import {
+  SelectAllStrip
+} from "./chunk-DSIJEJQ7.js";
+import {
+  toGridExpansion
+} from "./chunk-O5UGAL2V.js";
+import {
+  cardGridTracks
+} from "./chunk-TNDV33LP.js";
+import {
+  ListCardGroup
+} from "./chunk-TAB6AIPN.js";
+import {
+  DENSITY_BOARD_SCALE,
+  DENSITY_ROW_PADDING,
+  cardScaleForZoom,
+  cardTargetWidthFor,
+  useDataViewsLayout
+} from "./chunk-2XGGHYEA.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  DataGrid
+} from "./chunk-UCTJJYVC.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+
+// src/components/data-display/DataViews/data-views-grid-bodies.tsx
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function GridBody({
+  rows,
+  columns,
+  getRowId,
+  selectedIds,
+  onChangeSelected,
+  sortBy,
+  onChangeSortBy,
+  sortMode,
+  rowPadding,
+  rowDetail,
+  dataTestId,
+  emptyState
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        width: "100%",
+        overflowX: "auto",
+        mt: 1.5,
+        // Tabwoah-style dense rows: MUI's default TableCell padding keeps rows
+        // tall regardless of rowHeight, so the DENSITY preference is applied
+        // here rather than through `rowHeight`, which it would fight.
+        "& .MuiTableCell-root": { py: rowPadding, fontSize: "0.8125rem" },
+        "& .MuiTableCell-head": { py: 0.5, fontSize: "0.75rem" }
+      },
+      children: /* @__PURE__ */ jsx(
+        DataGrid,
+        {
+          rows,
+          columns,
+          getRowId: (row) => getRowId(row),
+          virtualizeRows: false,
+          density: "compact",
+          rowHeight: 36,
+          headerHeight: 36,
+          selection: { mode: "multi", selectedRowIds: selectedIds, onChangeSelected },
+          sorting: { mode: sortMode, sortBy, onChangeSortBy },
+          expansion: toGridExpansion(rowDetail, copy),
+          "data-testid": dataTestId,
+          emptyState,
+          emptyText: copy.grid.emptyFilteredTitle
+        }
+      )
+    }
+  );
+}
+function CardBody({
+  rows,
+  renderCard,
+  getRowId,
+  selectedIds,
+  onToggleId,
+  targetCardWidth,
+  cardScale,
+  dataTestId,
+  emptyState
+}) {
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(default2, { sx: { mt: 1.5 }, children: emptyState });
+  }
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        mt: 1.5,
+        display: "grid",
+        // Fixed inter-card gap — deliberately NOT scaled by the zoom slider, so
+        // only the cards grow while the space between them stays constant.
+        gap: 1.5,
+        ...cardGridTracks(targetCardWidth)
+      },
+      "data-testid": dataTestId ? `${dataTestId}-cards` : "data-views-cards",
+      children: rows.map((row) => {
+        const id = getRowId(row);
+        return /* @__PURE__ */ jsx(default2, { children: renderCard(row, {
+          selected: selectedIds.has(id),
+          onToggleSelect: () => onToggleId(id),
+          scale: cardScale
+        }) }, id);
+      })
+    }
+  );
+}
+function ListBody({
+  rows,
+  renderListRow,
+  getRowId,
+  selectedIds,
+  onToggleId,
+  rowGap,
+  group,
+  density,
+  dataTestId,
+  emptyState
+}) {
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(default2, { sx: { mt: 1.5 }, children: emptyState });
+  }
+  const testId = dataTestId ? `${dataTestId}-list` : "data-views-list";
+  const selectionFor = (id) => ({
+    selected: selectedIds.has(id),
+    onToggleSelect: () => onToggleId(id),
+    scale: 1
+  });
+  if (group) {
+    return /* @__PURE__ */ jsx(default2, { sx: { mt: 1.5 }, children: /* @__PURE__ */ jsx(
+      ListCardGroup,
+      {
+        cells: group.cells,
+        metaColumns: group.metaColumns,
+        rails: group.rails,
+        reserveGutters: group.reserveGutters,
+        density,
+        gap: rowGap,
+        dataTestId: testId,
+        children: rows.map((row) => {
+          const id = getRowId(row);
+          return /* @__PURE__ */ jsx(React.Fragment, { children: renderListRow(row, selectionFor(id)) }, id);
+        })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: { mt: 1.5, display: "flex", flexDirection: "column", gap: rowGap },
+      "data-testid": testId,
+      children: rows.map((row) => {
+        const id = getRowId(row);
+        return /* @__PURE__ */ jsx(default2, { children: renderListRow(row, selectionFor(id)) }, id);
+      })
+    }
+  );
+}
+function Headerless({
+  c,
+  getRowId,
+  testIdPrefix,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SelectAllStrip,
+      {
+        rows: c.matched,
+        getRowId,
+        selectedIds: c.selectedIds,
+        onChange: (next) => c.setSelectedIds(next),
+        testIdPrefix
+      }
+    ),
+    children
+  ] });
+}
+function headerlessBody({ c, getRowId, renderCard, renderListRow, listGroup, board, dataTestId, emptyState }, { layout, zoom, density }) {
+  if (layout === "list" && renderListRow) {
+    return /* @__PURE__ */ jsx(
+      ListBody,
+      {
+        rows: c.matched,
+        renderListRow,
+        getRowId,
+        selectedIds: c.selectedIds,
+        onToggleId: c.toggleId,
+        rowGap: DENSITY_ROW_PADDING[density],
+        group: listGroup,
+        density,
+        dataTestId,
+        emptyState
+      }
+    );
+  }
+  if (layout === "board" && board && renderCard) {
+    return /* @__PURE__ */ jsx(
+      DataViewsBoard,
+      {
+        rows: c.matched,
+        board,
+        getRowId,
+        renderCard,
+        selectedIds: c.selectedIds,
+        onToggleId: c.toggleId,
+        cardScale: DENSITY_BOARD_SCALE[density],
+        dataTestId
+      }
+    );
+  }
+  if (layout === "cards" && renderCard) {
+    return /* @__PURE__ */ jsx(
+      CardBody,
+      {
+        rows: c.matched,
+        renderCard,
+        getRowId,
+        selectedIds: c.selectedIds,
+        onToggleId: c.toggleId,
+        targetCardWidth: cardTargetWidthFor(zoom, density),
+        cardScale: cardScaleForZoom(zoom),
+        dataTestId,
+        emptyState
+      }
+    );
+  }
+  return null;
+}
+function GridMain(props) {
+  const { c, getRowId, dataTestId, emptyState, testIdPrefix } = props;
+  const layoutState = useDataViewsLayout();
+  const body = headerlessBody(props, layoutState);
+  if (body) {
+    return /* @__PURE__ */ jsx(Headerless, { c, getRowId, testIdPrefix, children: body });
+  }
+  return /* @__PURE__ */ jsx(
+    GridBody,
+    {
+      rows: c.matched,
+      columns: c.gridColumns,
+      getRowId,
+      selectedIds: [...c.selectedIds],
+      onChangeSelected: (ids) => c.setSelectedIds(new Set(ids)),
+      sortBy: c.state.sortBy,
+      onChangeSortBy: (next) => c.patch({ sortBy: next }),
+      sortMode: c.serverMode ? "server" : "client",
+      rowPadding: DENSITY_ROW_PADDING[layoutState.density],
+      rowDetail: props.rowDetail,
+      dataTestId,
+      emptyState
+    }
+  );
+}
+
+export {
+  GridMain
+};
+//# sourceMappingURL=chunk-XOL2QCSP.js.map