@12-apps/ui 6.37.0 → 6.39.0

package/dist/{chunk-HTZNB6IV.js → chunk-H5ZTIELC.js}

@@ -1,7 +1,10 @@
 import {
   GridRow,
   HeaderCell
-} from "./chunk-AROBXRC5.js";
+} from "./chunk-F7JTIHV5.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/DataGrid/DataGrid.body.tsx
 import Checkbox from "@mui/material/Checkbox/index.js";
@@ -47,7 +50,9 @@ function rowIdOf(props, row, index) {
 }
 function GridHeader(section) {
   const { model, props } = section;
-  const { sorting = {}, stickyHeader = true, headerHeight = 56 } = props;
+  const theme = useTheme();
+  const { sorting = {}, stickyHeader = true } = props;
+  const headerHeight = rem(theme, props.headerHeight ?? 56);
   const sortable = sorting.mode === "client" || sorting.mode === "server";
   return /* @__PURE__ */ jsx(TableHead, { "data-slot": "header", children: /* @__PURE__ */ jsxs(TableRow, { "data-slot": "header-row", role: "row", children: [
     /* @__PURE__ */ jsx(HeaderControls, { ...section }),
@@ -65,16 +70,26 @@ function GridHeader(section) {
     ))
   ] }) });
 }
-function Spacer({ height, colSpan }) {
-  if (height <= 0) return null;
-  return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan, sx: { height, border: "none", p: 0 } }) });
+function Spacer({
+  rows,
+  rowHeight,
+  colSpan
+}) {
+  if (rows <= 0) return null;
+  return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+    TableCell,
+    {
+      colSpan,
+      sx: { height: `calc(${rows} * ${rowHeight})`, border: "none", p: 0 }
+    }
+  ) });
 }
 function GridBody(section) {
   const { model, props, totalColumns } = section;
   const { start, end } = model.visibleRange;
   const trailing = model.virtualized ? model.processedRows.length - end : 0;
   return /* @__PURE__ */ jsxs(TableBody, { "data-slot": "body", children: [
-    model.virtualized ? /* @__PURE__ */ jsx(Spacer, { height: start * model.rowHeight, colSpan: totalColumns }) : null,
+    model.virtualized ? /* @__PURE__ */ jsx(Spacer, { rows: start, rowHeight: model.rowHeight, colSpan: totalColumns }) : null,
     model.visibleRows.map((row, offset) => {
       const index = model.virtualized ? start + offset : offset;
       const rowId = rowIdOf(props, row, index);
@@ -93,7 +108,7 @@ function GridBody(section) {
         rowId
       );
     }),
-    model.virtualized ? /* @__PURE__ */ jsx(Spacer, { height: trailing * model.rowHeight, colSpan: totalColumns }) : null
+    model.virtualized ? /* @__PURE__ */ jsx(Spacer, { rows: trailing, rowHeight: model.rowHeight, colSpan: totalColumns }) : null
   ] });
 }
 
@@ -102,4 +117,4 @@ export {
   GridHeader,
   GridBody
 };
-//# sourceMappingURL=chunk-HTZNB6IV.js.map
+//# sourceMappingURL=chunk-H5ZTIELC.js.map

package/dist/chunk-H5ZTIELC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataGrid/DataGrid.body.tsx"],"sourcesContent":["/**\n * The DataGrid's `<thead>` and `<tbody>`.\n *\n * Split from the shell so each stays inside the size budget and so the\n * virtualization spacers — which are pure layout, not data — sit next to the\n * rows they pad rather than in the middle of the component that owns the paper.\n */\nimport Checkbox from '@mui/material/Checkbox/index.js';\nimport TableBody from '@mui/material/TableBody/index.js';\nimport TableCell from '@mui/material/TableCell/index.js';\nimport TableHead from '@mui/material/TableHead/index.js';\nimport TableRow from '@mui/material/TableRow/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type React from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nimport { GridRow, HeaderCell } from './DataGrid.cells';\nimport type { DataGridModel } from './DataGrid.model';\nimport type { DataGridProps } from './DataGrid.types';\n\nexport interface GridSectionProps<T extends Record<string, unknown>> {\n  model: DataGridModel<T>;\n  props: DataGridProps<T>;\n  totalColumns: number;\n}\n\n/** The leading header cells for the selection / expansion columns. */\nfunction HeaderControls<T extends Record<string, unknown>>({\n  model,\n  props,\n}: GridSectionProps<T>): React.JSX.Element {\n  const theme = useTheme();\n  const { selection = { mode: 'none' }, expansion, stickyHeader = true } = props;\n  const sticky = {\n    position: stickyHeader ? ('sticky' as const) : ('static' as const),\n    top: 0,\n    zIndex: 1,\n    backgroundColor: theme.palette.background.paper,\n  };\n  const total = model.processedRows.length;\n  const picked = model.selectedRowIds.length;\n  return (\n    <>\n      {selection.mode !== 'none' && (\n        <TableCell padding=\"checkbox\" sx={sticky}>\n          {selection.mode === 'multi' && (\n            <Checkbox\n              indeterminate={picked > 0 && picked < total}\n              checked={total > 0 && picked === total}\n              onChange={(event) =>\n                model.setSelectedRowIds(\n                  event.target.checked\n                    ? model.processedRows.map((row, index) => rowIdOf(props, row, index))\n                    : [],\n                )\n              }\n              inputProps={{ 'aria-label': 'Select all rows' }}\n            />\n          )}\n        </TableCell>\n      )}\n      {expansion && <TableCell padding=\"checkbox\" sx={sticky} />}\n    </>\n  );\n}\n\n/** The caller's `getRowId`, or the row's own `id`, or its index. */\nexport function rowIdOf<T extends Record<string, unknown>>(\n  props: DataGridProps<T>,\n  row: T,\n  index: number,\n): string | number {\n  if (props.getRowId) return props.getRowId(row, index);\n  const candidate = (row as { id?: string | number }).id;\n  return candidate ?? index;\n}\n\nexport function GridHeader<T extends Record<string, unknown>>(\n  section: GridSectionProps<T>,\n): React.JSX.Element {\n  const { model, props } = section;\n  const theme = useTheme();\n  const { sorting = {}, stickyHeader = true } = props;\n  // 56 design px unless the caller says, drawn through the type scale.\n  const headerHeight = rem(theme, props.headerHeight ?? 56);\n  const sortable = sorting.mode === 'client' || sorting.mode === 'server';\n  return (\n    <TableHead data-slot=\"header\">\n      <TableRow data-slot=\"header-row\" role=\"row\">\n        <HeaderControls {...section} />\n        {model.visibleColumns.map((column) => (\n          <HeaderCell\n            key={column.id}\n            column={column}\n            sort={model.sortBy.find((entry) => entry.id === column.id)}\n            sortable={column.enableSort !== false && sortable}\n            stickyHeader={stickyHeader}\n            headerHeight={headerHeight}\n            onSort={model.onSort}\n          />\n        ))}\n      </TableRow>\n    </TableHead>\n  );\n}\n\n/**\n * An invisible row standing in for `rows` rows the window is not rendering —\n * that many times the row's own CSS height, so the spacer and the rows it\n * replaces are the same length by construction.\n */\nfunction Spacer({\n  rows,\n  rowHeight,\n  colSpan,\n}: {\n  rows: number;\n  rowHeight: string;\n  colSpan: number;\n}): React.JSX.Element | null {\n  if (rows <= 0) return null;\n  return (\n    <TableRow>\n      <TableCell\n        colSpan={colSpan}\n        sx={{ height: `calc(${rows} * ${rowHeight})`, border: 'none', p: 0 }}\n      />\n    </TableRow>\n  );\n}\n\nexport function GridBody<T extends Record<string, unknown>>(\n  section: GridSectionProps<T>,\n): React.JSX.Element {\n  const { model, props, totalColumns } = section;\n  const { start, end } = model.visibleRange;\n  const trailing = model.virtualized ? model.processedRows.length - end : 0;\n  return (\n    <TableBody data-slot=\"body\">\n      {model.virtualized ? (\n        <Spacer rows={start} rowHeight={model.rowHeight} colSpan={totalColumns} />\n      ) : null}\n      {model.visibleRows.map((row, offset) => {\n        const index = model.virtualized ? start + offset : offset;\n        const rowId = rowIdOf(props, row, index);\n        return (\n          <GridRow\n            key={rowId}\n            row={row}\n            index={index}\n            rowId={rowId}\n            isSelected={model.selectedRowIdsSet.has(rowId)}\n            isExpanded={model.expandedRowIdsSet.has(rowId)}\n            totalColumns={totalColumns}\n            model={model}\n            props={props}\n          />\n        );\n      })}\n      {model.virtualized ? (\n        <Spacer rows={trailing} rowHeight={model.rowHeight} colSpan={totalColumns} />\n      ) : null}\n    </TableBody>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-AER4245J.js → chunk-H67EL3CG.js}

@@ -1,21 +1,21 @@
 import {
   PillControl
-} from "./chunk-CS3KOKL3.js";
+} from "./chunk-4GWHYLEB.js";
 import {
   PanelRangeField
-} from "./chunk-AJ5SDHX5.js";
+} from "./chunk-JCL7WK4G.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
 import {
   TableFilter
-} from "./chunk-HXEBKOSM.js";
+} from "./chunk-J5UZB6Y6.js";
 import {
   StackedModal
-} from "./chunk-IL7JZKXY.js";
+} from "./chunk-442FSG7G.js";
 import {
   StackedModalContent
-} from "./chunk-RWTFZ7J5.js";
+} from "./chunk-L4G5BZFF.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -157,4 +157,4 @@ export {
   GridFilterPanel,
   FilterDialog
 };
-//# sourceMappingURL=chunk-AER4245J.js.map
+//# sourceMappingURL=chunk-H67EL3CG.js.map

package/dist/{chunk-GSFNH4C5.js → chunk-HBP2OU4Q.js}

@@ -3,21 +3,26 @@ import {
   DefaultError,
   DefaultLoader,
   containerStyles
-} from "./chunk-ATSHKSSD.js";
+} from "./chunk-5KNDAC24.js";
 import {
   useLoadMore,
   useSentinel
-} from "./chunk-QF6LTUCE.js";
+} from "./chunk-Y2X7LYIN.js";
+import {
+  rem,
+  remPx
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/utility/InfiniteScroll/InfiniteScroll.tsx
 import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 var InfiniteScroll = ({
   children,
   variant = "default",
   hasMore,
   loading,
-  threshold = 150,
+  threshold,
   loadMore,
   loader,
   loadingText,
@@ -33,7 +38,9 @@ var InfiniteScroll = ({
   testMode = false,
   testTriggerRef
 }) => {
-  const { sentinelRef, isIntersecting } = useSentinel({ testMode, threshold, scrollableTarget });
+  const theme = useTheme();
+  const rootMargin = `${remPx(theme, threshold ?? 150)}px`;
+  const { sentinelRef, isIntersecting } = useSentinel({ testMode, rootMargin, scrollableTarget });
   useLoadMore({
     hasMore,
     loading,
@@ -54,8 +61,8 @@ var InfiniteScroll = ({
         ref: sentinelRef,
         "data-testid": "infinite-scroll-sentinel",
         style: {
-          height: variant === "horizontal" ? "100%" : "1px",
-          width: variant === "horizontal" ? "1px" : "100%"
+          height: variant === "horizontal" ? "100%" : rem(theme, 1),
+          width: variant === "horizontal" ? rem(theme, 1) : "100%"
         }
       }
     );
@@ -65,7 +72,7 @@ var InfiniteScroll = ({
     {
       className,
       sx: {
-        ...containerStyles(variant, width),
+        ...containerStyles(theme, variant, width),
         ...style
       },
       children: [
@@ -81,4 +88,4 @@ var InfiniteScroll = ({
 export {
   InfiniteScroll
 };
-//# sourceMappingURL=chunk-GSFNH4C5.js.map
+//# sourceMappingURL=chunk-HBP2OU4Q.js.map

package/dist/chunk-HBP2OU4Q.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/InfiniteScroll/InfiniteScroll.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem, remPx } from '../../../tokens/relative';\n\nimport { useLoadMore, useSentinel } from './InfiniteScroll.hooks';\nimport {\n  containerStyles,\n  DefaultEndMessage,\n  DefaultError,\n  DefaultLoader,\n} from './InfiniteScroll.parts';\nimport type { InfiniteScrollProps } from './InfiniteScroll.types';\n\nexport const InfiniteScroll: React.FC<InfiniteScrollProps> = ({\n  children,\n  variant = 'default',\n  hasMore,\n  loading,\n  threshold,\n  loadMore,\n  loader,\n  loadingText,\n  endText,\n  endMessage,\n  error,\n  errorComponent,\n  onError,\n  className,\n  style,\n  width,\n  scrollableTarget,\n  testMode = false,\n  testTriggerRef,\n}) => {\n  const theme = useTheme();\n  // 150 design px unless the caller says; `rootMargin` only takes px.\n  const rootMargin = `${remPx(theme, threshold ?? 150)}px`;\n  const { sentinelRef, isIntersecting } = useSentinel({ testMode, rootMargin, scrollableTarget });\n\n  useLoadMore({\n    hasMore,\n    loading,\n    error,\n    loadMore,\n    onError,\n    isIntersecting,\n    testMode,\n    testTriggerRef,\n  });\n\n  // The tail of the list is one of four things: the end message, an error, a\n  // spinner, or the sentinel that asks for the next page.\n  const renderSentinel = () => {\n    if (!hasMore) return endMessage || <DefaultEndMessage endText={endText} />;\n    if (error) return errorComponent || <DefaultError error={error} />;\n    if (loading) return loader || <DefaultLoader loadingText={loadingText} />;\n\n    return (\n      <div\n        ref={sentinelRef}\n        data-testid=\"infinite-scroll-sentinel\"\n        style={{\n          height: variant === 'horizontal' ? '100%' : rem(theme, 1),\n          width: variant === 'horizontal' ? rem(theme, 1) : '100%',\n        }}\n      />\n    );\n  };\n\n  return (\n    <Box\n      className={className}\n      sx={{\n        ...containerStyles(theme, variant, width),\n        ...style,\n      }}\n    >\n      {variant === 'reverse' && renderSentinel()}\n\n      {variant === 'horizontal' ? (\n        <Box sx={{ display: 'flex', flexDirection: 'row' }}>{children}</Box>\n      ) : (\n        children\n      )}\n\n      {variant !== 'reverse' && renderSentinel()}\n\n      {variant === 'horizontal' && renderSentinel()}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAS,gBAAgB;AAsDc,cAiBnC,YAjBmC;AAxChC,IAAM,iBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,QAAM,aAAa,GAAG,MAAM,OAAO,aAAa,GAAG,CAAC;AACpD,QAAM,EAAE,aAAa,eAAe,IAAI,YAAY,EAAE,UAAU,YAAY,iBAAiB,CAAC;AAE9F,cAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,iBAAiB,MAAM;AAC3B,QAAI,CAAC,QAAS,QAAO,cAAc,oBAAC,qBAAkB,SAAkB;AACxE,QAAI,MAAO,QAAO,kBAAkB,oBAAC,gBAAa,OAAc;AAChE,QAAI,QAAS,QAAO,UAAU,oBAAC,iBAAc,aAA0B;AAEvE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,eAAY;AAAA,QACZ,OAAO;AAAA,UACL,QAAQ,YAAY,eAAe,SAAS,IAAI,OAAO,CAAC;AAAA,UACxD,OAAO,YAAY,eAAe,IAAI,OAAO,CAAC,IAAI;AAAA,QACpD;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,QACF,GAAG,gBAAgB,OAAO,SAAS,KAAK;AAAA,QACxC,GAAG;AAAA,MACL;AAAA,MAEC;AAAA,oBAAY,aAAa,eAAe;AAAA,QAExC,YAAY,eACX,oBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,eAAe,MAAM,GAAI,UAAS,IAE9D;AAAA,QAGD,YAAY,aAAa,eAAe;AAAA,QAExC,YAAY,gBAAgB,eAAe;AAAA;AAAA;AAAA,EAC9C;AAEJ;","names":[]}

package/dist/{chunk-57JLS55D.js → chunk-HBRQPG7H.js}

@@ -1,31 +1,31 @@
 import {
   DataViewsBoard
-} from "./chunk-BNEWMFVB.js";
+} from "./chunk-UGGJ3KDT.js";
 import {
   SelectAllStrip
-} from "./chunk-BAQBUKDU.js";
+} from "./chunk-3KREF4ZF.js";
 import {
   toGridExpansion
 } from "./chunk-O5UGAL2V.js";
 import {
   cardGridTracks
-} from "./chunk-75LOTMSN.js";
+} from "./chunk-BWHOCNGW.js";
 import {
   ListCardGroup
-} from "./chunk-NB3FGWU4.js";
+} from "./chunk-EQXIW5MQ.js";
 import {
   DENSITY_BOARD_SCALE,
   DENSITY_ROW_PADDING,
   cardScaleForZoom,
   cardTargetWidthFor,
   useDataViewsLayout
-} from "./chunk-PMOEG36E.js";
+} from "./chunk-XZJM6EPC.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
 import {
   DataGrid
-} from "./chunk-G4HBNILE.js";
+} from "./chunk-LEHMWJNZ.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -273,4 +273,4 @@ function GridMain(props) {
 export {
   GridMain
 };
-//# sourceMappingURL=chunk-57JLS55D.js.map
+//# sourceMappingURL=chunk-HBRQPG7H.js.map

package/dist/{chunk-3D6HXKZM.js → chunk-HDJQDMHB.js}

@@ -1,23 +1,27 @@
 import {
-  rem
+  FIELD_BORDER_WIDTH
+} from "./chunk-PZBK3F52.js";
+import {
+  rem,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/Tabs/Tabs.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
 var sizeStyles = (theme, size) => ({
   ...size === "sm" && {
-    minHeight: 32,
+    minHeight: rem(theme, 32),
     "& .MuiTab-root": {
       fontSize: rem(theme, 14),
-      minHeight: 32,
+      minHeight: rem(theme, 32),
       padding: theme.spacing(0.5, 1.5)
     }
   },
   ...size === "lg" && {
-    minHeight: 56,
+    minHeight: rem(theme, 56),
     "& .MuiTab-root": {
       fontSize: rem(theme, 18),
-      minHeight: 56,
+      minHeight: rem(theme, 56),
       padding: theme.spacing(1.5, 3)
     }
   }
@@ -25,8 +29,8 @@ var sizeStyles = (theme, size) => ({
 var compactVariantStyles = (theme, customVariant) => ({
   ...customVariant === "default" && {
     "& .MuiTabs-indicator": {
-      height: 3,
-      borderRadius: "3px 3px 0 0",
+      height: rem(theme, 3),
+      borderRadius: rems(theme, 3, 3, 0, 0),
       background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`
     }
   },
@@ -42,12 +46,12 @@ var compactVariantStyles = (theme, customVariant) => ({
       transition: "all 0.3s ease",
       "&:hover": {
         backgroundColor: alpha(theme.palette.primary.main, 0.08),
-        transform: "translateY(-1px)"
+        transform: `translateY(${rem(theme, -1)})`
       },
       "&.Mui-selected": {
         backgroundColor: theme.palette.primary.main,
         color: theme.palette.primary.contrastText,
-        boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.3)}`,
+        boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(theme.palette.primary.main, 0.3)}`,
         "&:hover": {
           backgroundColor: theme.palette.primary.dark
         }
@@ -62,9 +66,9 @@ var boxedVariantStyles = (theme, customVariant) => ({
       gap: theme.spacing(2)
     },
     "& .MuiTabs-indicator": {
-      height: 2,
+      height: rem(theme, 2),
       backgroundColor: theme.palette.primary.main,
-      borderRadius: 1
+      borderRadius: rem(theme, 1)
     },
     "& .MuiTab-root": {
       textTransform: "none",
@@ -93,7 +97,8 @@ var boxedVariantStyles = (theme, customVariant) => ({
       borderBottom: "none",
       borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`,
       margin: theme.spacing(0, 0.5),
-      marginBottom: -1,
+      // Overlap the list's own hairline so the selected tab reads as open.
+      marginBottom: `-${FIELD_BORDER_WIDTH}px`,
       backgroundColor: alpha(theme.palette.action.hover, 0.5),
       "&:hover": {
         backgroundColor: alpha(theme.palette.action.hover, 0.8)
@@ -141,4 +146,4 @@ var tabsRootStyles = ({
 export {
   tabsRootStyles
 };
-//# sourceMappingURL=chunk-3D6HXKZM.js.map
+//# sourceMappingURL=chunk-HDJQDMHB.js.map

package/dist/chunk-HDJQDMHB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Tabs/Tabs.styles.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { alpha } from '@mui/material/styles/index.js';\nimport { FIELD_BORDER_WIDTH } from '../../../tokens/field-height';\nimport { rem, rems } from '../../../tokens/relative';\n\nconst sizeStyles = (theme: Theme, size?: string): CSSObject => ({\n    ...(size === 'sm' && {\n      minHeight: rem(theme, 32),\n      '& .MuiTab-root': {\n        fontSize: rem(theme, 14),\n        minHeight: rem(theme, 32),\n        padding: theme.spacing(0.5, 1.5),\n      },\n    }),\n\n    ...(size === 'lg' && {\n      minHeight: rem(theme, 56),\n      '& .MuiTab-root': {\n        fontSize: rem(theme, 18),\n        minHeight: rem(theme, 56),\n        padding: theme.spacing(1.5, 3),\n      },\n    }),\n\n});\n\nconst compactVariantStyles = (theme: Theme, customVariant?: string): CSSObject => ({\n    ...(customVariant === 'default' && {\n      '& .MuiTabs-indicator': {\n        height: rem(theme, 3),\n        borderRadius: rems(theme, 3, 3, 0, 0),\n        background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,\n      },\n    }),\n\n    // Pills variant (rounded tabs)\n    ...(customVariant === 'pills' && {\n      '& .MuiTabs-indicator': {\n        display: 'none',\n      },\n      '& .MuiTab-root': {\n        borderRadius: theme.spacing(3),\n        margin: theme.spacing(0, 0.5),\n        minWidth: 'auto',\n        transition: 'all 0.3s ease',\n        '&:hover': {\n          backgroundColor: alpha(theme.palette.primary.main, 0.08),\n          transform: `translateY(${rem(theme, -1)})`,\n        },\n        '&.Mui-selected': {\n          backgroundColor: theme.palette.primary.main,\n          color: theme.palette.primary.contrastText,\n          boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(theme.palette.primary.main, 0.3)}`,\n          '&:hover': {\n            backgroundColor: theme.palette.primary.dark,\n          },\n        },\n      },\n    }),\n\n    // Underline variant (minimal underline indicator)\n});\n\nconst boxedVariantStyles = (theme: Theme, customVariant?: string): CSSObject => ({\n    ...(customVariant === 'underline' && {\n      '& .MuiTabs-flexContainer': {\n        gap: theme.spacing(2),\n      },\n      '& .MuiTabs-indicator': {\n        height: rem(theme, 2),\n        backgroundColor: theme.palette.primary.main,\n        borderRadius: rem(theme, 1),\n      },\n      '& .MuiTab-root': {\n        textTransform: 'none',\n        fontWeight: 500,\n        padding: theme.spacing(1, 0),\n        minWidth: 'auto',\n        '&:hover': {\n          color: theme.palette.primary.main,\n        },\n        '&.Mui-selected': {\n          color: theme.palette.primary.main,\n          fontWeight: 600,\n        },\n      },\n    }),\n\n    // Enclosed variant (bordered tabs)\n    ...(customVariant === 'enclosed' && {\n      '& .MuiTabs-indicator': {\n        display: 'none',\n      },\n      '& .MuiTabs-flexContainer': {\n        borderBottom: `1px solid ${theme.palette.divider}`,\n      },\n      '& .MuiTab-root': {\n        border: `1px solid ${theme.palette.divider}`,\n        borderBottom: 'none',\n        borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`,\n        margin: theme.spacing(0, 0.5),\n        // Overlap the list's own hairline so the selected tab reads as open.\n        marginBottom: `-${FIELD_BORDER_WIDTH}px`,\n        backgroundColor: alpha(theme.palette.action.hover, 0.5),\n        '&:hover': {\n          backgroundColor: alpha(theme.palette.action.hover, 0.8),\n        },\n        '&.Mui-selected': {\n          backgroundColor: theme.palette.background.paper,\n          borderColor: theme.palette.divider,\n          borderBottomColor: theme.palette.background.paper,\n          zIndex: 1,\n        },\n      },\n    }),\n});\n\nconst variantStyles = (theme: Theme, customVariant?: string): CSSObject => ({\n  ...compactVariantStyles(theme, customVariant),\n  ...boxedVariantStyles(theme, customVariant),\n});\n\n// Vertical rules between tabs, for the variants that do not already have edges.\nconst dividerStyles = (\n  theme: Theme,\n  customVariant?: string,\n  showDividers?: boolean,\n): CSSObject => ({\n  ...(showDividers &&\n    customVariant !== 'enclosed' &&\n    customVariant !== 'pills' && {\n      '& .MuiTab-root:not(:last-child)': {\n        borderRight: `1px solid ${alpha(theme.palette.divider, 0.5)}`,\n      },\n    }),\n});\n\n// The root Tabs styling, kept out of Tabs.tsx so the styled() call stays small.\n// Spread into a fresh literal at the call site: handing styled() a named-type\n// value makes TypeScript demand a `variants` key (CSSObjectWithVariants).\nexport const tabsRootStyles = ({\n  theme,\n  customVariant,\n  size,\n  showDividers,\n}: {\n  theme: Theme;\n  customVariant?: string;\n  size?: string;\n  showDividers?: boolean;\n}): CSSObject => ({\n    position: 'relative',\n\n    // Collapse disabled scroll buttons (e.g. the left button at the start of a\n    // scrollable row) so they don't reserve empty space before the first tab.\n    '& .MuiTabs-scrollButtons.Mui-disabled': {\n      width: 0,\n      minWidth: 0,\n      overflow: 'hidden',\n    },\n\n    // Size variants\n  ...sizeStyles(theme, size),\n  ...variantStyles(theme, customVariant),\n  ...dividerStyles(theme, customVariant, showDividers),\n});\n"],"mappings":"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","names":[]}

package/dist/{chunk-HGMBY5LP.js → chunk-HQWJUHR4.js}

@@ -2,19 +2,24 @@ import {
   tileBackground
 } from "./chunk-X6AIKCAV.js";
 import {
-  TILE_SIZE
-} from "./chunk-TUBCN4DJ.js";
+  TILE_WORLD_UNITS
+} from "./chunk-CB6DTWD5.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/MapPreview/MapTiles.tsx
 import { alpha, useTheme } from "@mui/material/styles/index.js";
 import { jsx } from "react/jsx-runtime";
-var VISIBLE_TILES = Math.ceil(800 / TILE_SIZE) + 2;
+var VISIBLE_TILES = Math.ceil(800 / TILE_WORLD_UNITS) + 2;
 var LABEL_MIN_ZOOM = 10;
 var MapTiles = ({ origin, zoom, mapType, panOffset }) => {
   const theme = useTheme();
   const borderOpacity = theme.palette.mode === "dark" ? 0.15 : 0.1;
   const background = tileBackground(mapType, theme);
   const half = Math.floor(VISIBLE_TILES / 2);
+  const tile = rem(theme, TILE_WORLD_UNITS);
+  const grid = rem(theme, TILE_WORLD_UNITS * VISIBLE_TILES);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -22,12 +27,14 @@ var MapTiles = ({ origin, zoom, mapType, panOffset }) => {
         position: "absolute",
         top: "50%",
         left: "50%",
+        // The pan is pointer pixels dragged, so it stays px: the grid follows
+        // the cursor exactly, whatever the type scale.
         transform: `translate(calc(-50% + ${panOffset.x}px), calc(-50% + ${panOffset.y}px))`,
-        width: TILE_SIZE * VISIBLE_TILES,
-        height: TILE_SIZE * VISIBLE_TILES,
+        width: grid,
+        height: grid,
         display: "grid",
-        gridTemplateColumns: `repeat(${VISIBLE_TILES}, ${TILE_SIZE}px)`,
-        gridTemplateRows: `repeat(${VISIBLE_TILES}, ${TILE_SIZE}px)`,
+        gridTemplateColumns: `repeat(${VISIBLE_TILES}, ${tile})`,
+        gridTemplateRows: `repeat(${VISIBLE_TILES}, ${tile})`,
         transition: "transform 0.1s ease-out"
       },
       children: Array.from({ length: VISIBLE_TILES * VISIBLE_TILES }).map((_, index) => {
@@ -37,14 +44,14 @@ var MapTiles = ({ origin, zoom, mapType, panOffset }) => {
           "div",
           {
             style: {
-              width: TILE_SIZE,
-              height: TILE_SIZE,
+              width: tile,
+              height: tile,
               border: `1px solid ${alpha(theme.palette.divider, borderOpacity)}`,
               background,
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              fontSize: "10px",
+              fontSize: rem(theme, 10),
               color: alpha(theme.palette.text.secondary, 0.3),
               fontFamily: "monospace",
               userSelect: "none"
@@ -61,4 +68,4 @@ var MapTiles = ({ origin, zoom, mapType, panOffset }) => {
 export {
   MapTiles
 };
-//# sourceMappingURL=chunk-HGMBY5LP.js.map
+//# sourceMappingURL=chunk-HQWJUHR4.js.map

package/dist/chunk-HQWJUHR4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/MapTiles.tsx"],"sourcesContent":["import { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nimport { TILE_WORLD_UNITS } from './mapProjection';\nimport { tileBackground } from './mapSurface';\nimport type { MapType } from './MapPreview.types';\n\n// Two extra rows and columns so panning does not expose an edge.\nconst VISIBLE_TILES = Math.ceil(800 / TILE_WORLD_UNITS) + 2;\n// Tile coordinates are only legible once the grid is reasonably fine.\nconst LABEL_MIN_ZOOM = 10;\n\nexport interface MapTilesProps {\n  origin: { x: number; y: number } | null;\n  zoom: number;\n  mapType: MapType;\n  panOffset: { x: number; y: number };\n}\n\nexport const MapTiles: FC<MapTilesProps> = ({ origin, zoom, mapType, panOffset }) => {\n  const theme = useTheme();\n  const borderOpacity = theme.palette.mode === 'dark' ? 0.15 : 0.1;\n  const background = tileBackground(mapType, theme);\n  const half = Math.floor(VISIBLE_TILES / 2);\n  // A tile is drawn at one design px per world unit, through the type scale.\n  const tile = rem(theme, TILE_WORLD_UNITS);\n  const grid = rem(theme, TILE_WORLD_UNITS * VISIBLE_TILES);\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        // The pan is pointer pixels dragged, so it stays px: the grid follows\n        // the cursor exactly, whatever the type scale.\n        transform: `translate(calc(-50% + ${panOffset.x}px), calc(-50% + ${panOffset.y}px))`,\n        width: grid,\n        height: grid,\n        display: 'grid',\n        gridTemplateColumns: `repeat(${VISIBLE_TILES}, ${tile})`,\n        gridTemplateRows: `repeat(${VISIBLE_TILES}, ${tile})`,\n        transition: 'transform 0.1s ease-out',\n      }}\n    >\n      {Array.from({ length: VISIBLE_TILES * VISIBLE_TILES }).map((_, index) => {\n        // The grid is centred on the origin tile, so indices run from -half.\n        const tileX = (origin?.x || 0) + (index % VISIBLE_TILES) - half;\n        const tileY = (origin?.y || 0) + Math.floor(index / VISIBLE_TILES) - half;\n\n        return (\n          <div\n            key={`tile-${tileX}-${tileY}`}\n            style={{\n              width: tile,\n              height: tile,\n              border: `1px solid ${alpha(theme.palette.divider, borderOpacity)}`,\n              background,\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              fontSize: rem(theme, 10),\n              color: alpha(theme.palette.text.secondary, 0.3),\n              fontFamily: 'monospace',\n              userSelect: 'none',\n            }}\n          >\n            {zoom > LABEL_MIN_ZOOM && `${tileX},${tileY}`}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,OAAO,gBAAgB;AAsDtB;AA3CV,IAAM,gBAAgB,KAAK,KAAK,MAAM,gBAAgB,IAAI;AAE1D,IAAM,iBAAiB;AAShB,IAAM,WAA8B,CAAC,EAAE,QAAQ,MAAM,SAAS,UAAU,MAAM;AACnF,QAAM,QAAQ,SAAS;AACvB,QAAM,gBAAgB,MAAM,QAAQ,SAAS,SAAS,OAAO;AAC7D,QAAM,aAAa,eAAe,SAAS,KAAK;AAChD,QAAM,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAEzC,QAAM,OAAO,IAAI,OAAO,gBAAgB;AACxC,QAAM,OAAO,IAAI,OAAO,mBAAmB,aAAa;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA;AAAA;AAAA,QAGN,WAAW,yBAAyB,UAAU,CAAC,oBAAoB,UAAU,CAAC;AAAA,QAC9E,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,qBAAqB,UAAU,aAAa,KAAK,IAAI;AAAA,QACrD,kBAAkB,UAAU,aAAa,KAAK,IAAI;AAAA,QAClD,YAAY;AAAA,MACd;AAAA,MAEC,gBAAM,KAAK,EAAE,QAAQ,gBAAgB,cAAc,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AAEvE,cAAM,SAAS,QAAQ,KAAK,KAAM,QAAQ,gBAAiB;AAC3D,cAAM,SAAS,QAAQ,KAAK,KAAK,KAAK,MAAM,QAAQ,aAAa,IAAI;AAErE,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO;AAAA,cACL,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,aAAa,CAAC;AAAA,cAChE;AAAA,cACA,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB;AAAA,cAChB,UAAU,IAAI,OAAO,EAAE;AAAA,cACvB,OAAO,MAAM,MAAM,QAAQ,KAAK,WAAW,GAAG;AAAA,cAC9C,YAAY;AAAA,cACZ,YAAY;AAAA,YACd;AAAA,YAEC,iBAAO,kBAAkB,GAAG,KAAK,IAAI,KAAK;AAAA;AAAA,UAftC,QAAQ,KAAK,IAAI,KAAK;AAAA,QAgB7B;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/{chunk-UZ6AUTE6.js → chunk-I3F4C5SS.js}

@@ -1,27 +1,27 @@
 import {
   DataViewsDisplayPanel
-} from "./chunk-HNPWZ3W2.js";
+} from "./chunk-DDRKYNPB.js";
 import {
   DataViewsExportMenu
-} from "./chunk-BW62QQAG.js";
+} from "./chunk-6N4AA2Y7.js";
 import {
   renderBulkActions
-} from "./chunk-75LOTMSN.js";
+} from "./chunk-BWHOCNGW.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
 import {
   FilterTrigger
-} from "./chunk-L4QCIUTJ.js";
+} from "./chunk-UMNXSQ7I.js";
 import {
   ContentToolbar
-} from "./chunk-3VMGE7CU.js";
+} from "./chunk-TZFBJ47T.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -136,4 +136,4 @@ function GridToolbar(props) {
 export {
   GridToolbar
 };
-//# sourceMappingURL=chunk-UZ6AUTE6.js.map
+//# sourceMappingURL=chunk-I3F4C5SS.js.map

package/dist/{chunk-L7SFH3ED.js → chunk-I7GSRTGQ.js}

@@ -2,15 +2,23 @@ import {
   neutralTones,
   sheen
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/ScrollArea/ScrollArea.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
 var SCROLLBAR_SIZES = {
   thin: 8,
-  thick: 16
+  thick: 16,
+  default: 12
+};
+var getScrollbarSize = (scrollbarSize) => (scrollbarSize ? SCROLLBAR_SIZES[scrollbarSize] : void 0) ?? SCROLLBAR_SIZES.default;
+var sizeCss = (theme, value) => {
+  if (typeof value !== "number") return value;
+  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
 };
-var DEFAULT_SCROLLBAR_SIZE = 12;
-var getScrollbarSize = (scrollbarSize) => scrollbarSize ? SCROLLBAR_SIZES[scrollbarSize] ?? DEFAULT_SCROLLBAR_SIZE : DEFAULT_SCROLLBAR_SIZE;
 var getScrollbarColors = ({
   theme,
   variant,
@@ -46,27 +54,27 @@ var getOverflowStyle = ({
       };
   }
 };
-var autoHideScrollbarStyles = ({
+var autoHideScrollbarSx = ({
   thumbColor,
   trackColor,
-  size,
+  thickness,
   orientation,
   shouldShowScrollbar,
   theme,
   scrollbarSize
 }) => ({
   "&::-webkit-scrollbar": {
-    width: orientation !== "horizontal" ? size : "100%",
-    height: orientation !== "vertical" ? size : "100%"
+    width: orientation !== "horizontal" ? rem(theme, thickness) : "100%",
+    height: orientation !== "vertical" ? rem(theme, thickness) : "100%"
   },
   "&::-webkit-scrollbar-track": {
     background: shouldShowScrollbar ? trackColor : "transparent",
-    borderRadius: size / 2,
+    borderRadius: thickness / 2,
     transition: "background 0.3s ease"
   },
   "&::-webkit-scrollbar-thumb": {
     background: shouldShowScrollbar ? thumbColor : "transparent",
-    borderRadius: size / 2,
+    borderRadius: thickness / 2,
     transition: "background 0.3s ease",
     "&:hover": {
       background: shouldShowScrollbar ? theme.palette.primary.main : "transparent"
@@ -79,24 +87,24 @@ var autoHideScrollbarStyles = ({
   scrollbarWidth: shouldShowScrollbar ? scrollbarSize === "thin" ? "thin" : "auto" : "none",
   scrollbarColor: shouldShowScrollbar ? `${thumbColor} ${trackColor}` : "transparent transparent"
 });
-var VARIANT_SCROLLBARS = {
-  overlay: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) => ({
+var VARIANT_SCROLLBAR_SX = {
+  overlay: ({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize }) => ({
     "&::-webkit-scrollbar": {
-      width: orientation !== "horizontal" ? size : "100%",
-      height: orientation !== "vertical" ? size : "100%",
+      width: orientation !== "horizontal" ? rem(theme, thickness) : "100%",
+      height: orientation !== "vertical" ? rem(theme, thickness) : "100%",
       position: "absolute",
       right: 0,
       top: 0
     },
     "&::-webkit-scrollbar-track": {
       background: "transparent",
-      borderRadius: size / 2
+      borderRadius: thickness / 2
     },
     "&::-webkit-scrollbar-thumb": {
       background: shouldShowScrollbar ? alpha(colors.scrollbar, 0.5) : "transparent",
-      borderRadius: size / 2,
+      borderRadius: thickness / 2,
       transition: "background 0.3s ease",
-      border: "2px solid transparent",
+      border: `${rem(theme, 2)} solid transparent`,
       backgroundClip: "padding-box",
       "&:hover": {
         background: shouldShowScrollbar ? theme.palette.primary.main : "transparent"
@@ -113,13 +121,13 @@ var VARIANT_SCROLLBARS = {
   // Firefox property) keeps the solid palette colour rather than the gradient —
   // a gradient is not a valid value there, which is why the original picked
   // colors.scrollbar for it.
-  glass: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) => {
+  glass: ({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize }) => {
     const glassThumbColor = `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.3)}, ${alpha(theme.palette.secondary.main, 0.3)})`;
     const glassTrackColor = alpha(theme.palette.background.paper, 0.1);
-    const base = autoHideScrollbarStyles({
+    const base = autoHideScrollbarSx({
       thumbColor: glassThumbColor,
       trackColor: glassTrackColor,
-      size,
+      thickness,
       orientation,
       shouldShowScrollbar,
       theme,
@@ -129,20 +137,20 @@ var VARIANT_SCROLLBARS = {
       ...base,
       "&::-webkit-scrollbar-track": {
         ...base["&::-webkit-scrollbar-track"],
-        backdropFilter: shouldShowScrollbar ? "blur(5px)" : "none"
+        backdropFilter: shouldShowScrollbar ? `blur(${rem(theme, 5)})` : "none"
       },
       "&::-webkit-scrollbar-thumb": {
         ...base["&::-webkit-scrollbar-thumb"],
-        boxShadow: shouldShowScrollbar ? `inset 0 0 6px ${sheen(theme, 0.3)}` : "none"
+        boxShadow: shouldShowScrollbar ? `inset ${rems(theme, 0, 0, 6)} ${sheen(theme, 0.3)}` : "none"
       },
       scrollbarColor: shouldShowScrollbar ? `${colors.scrollbar} ${glassTrackColor}` : "transparent transparent",
-      backdropFilter: "blur(10px)"
+      backdropFilter: `blur(${rem(theme, 10)})`
     };
   },
-  default: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) => autoHideScrollbarStyles({
+  default: ({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize }) => autoHideScrollbarSx({
     thumbColor: colors.scrollbar,
     trackColor: colors.track,
-    size,
+    thickness,
     orientation,
     shouldShowScrollbar,
     theme,
@@ -159,13 +167,14 @@ var getVariantStyles = ({
   shouldShowScrollbar
 }) => {
   const colors = getScrollbarColors({ theme, variant, scrollbarColor, scrollbarTrackColor });
-  const size = getScrollbarSize(scrollbarSize);
-  const build = VARIANT_SCROLLBARS[variant ?? "default"] ?? VARIANT_SCROLLBARS.default;
-  return build({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize });
+  const thickness = getScrollbarSize(scrollbarSize);
+  const build = VARIANT_SCROLLBAR_SX[variant ?? "default"] ?? VARIANT_SCROLLBAR_SX.default;
+  return build({ theme, colors, thickness, orientation, shouldShowScrollbar, scrollbarSize });
 };
 
 export {
+  sizeCss,
   getOverflowStyle,
   getVariantStyles
 };
-//# sourceMappingURL=chunk-L7SFH3ED.js.map
+//# sourceMappingURL=chunk-I7GSRTGQ.js.map