@12-apps/ui 6.37.0 → 6.38.0

package/dist/{chunk-ZTYUKEN3.js → chunk-OVXSQQDK.js}

@@ -1,18 +1,23 @@
 import {
   shadowInk
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/Sidebar/Sidebar.tsx
 import Box from "@mui/material/Box/index.js";
 import { alpha, useTheme } from "@mui/material/styles/index.js";
 import { jsx } from "react/jsx-runtime";
+var widthCss = (theme, value) => value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
 var Sidebar = ({
   children,
   variant = "fixed",
   open = true,
   onToggle: _onToggle,
-  width = 280,
-  collapsedWidth = 64,
+  width,
+  collapsedWidth,
   position = "left",
   className,
   dataTestId = "sidebar",
@@ -21,7 +26,7 @@ var Sidebar = ({
   void _onToggle;
   const theme = useTheme();
   const isCollapsed = variant === "collapsible" && !open;
-  const currentWidth = isCollapsed ? collapsedWidth : width;
+  const currentWidth = isCollapsed ? collapsedWidth ?? 64 : width ?? 280;
   const getVariantStyles = () => {
     switch (variant) {
       case "floating":
@@ -37,9 +42,9 @@ var Sidebar = ({
       case "glass":
         return {
           backgroundColor: alpha(theme.palette.background.paper, 0.1),
-          backdropFilter: "blur(20px)",
+          backdropFilter: `blur(${rem(theme, 20)})`,
           border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
-          boxShadow: `0 8px 32px ${shadowInk(theme, 0.1)}`
+          boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}`
         };
       case "collapsible":
         return {
@@ -62,7 +67,7 @@ var Sidebar = ({
       "data-testid": dataTestId,
       ...rest,
       sx: {
-        width: currentWidth,
+        width: widthCss(theme, currentWidth),
         height: "100vh",
         display: "flex",
         flexDirection: "column",
@@ -125,4 +130,4 @@ export {
   SidebarContent,
   SidebarFooter
 };
-//# sourceMappingURL=chunk-ZTYUKEN3.js.map
+//# sourceMappingURL=chunk-OVXSQQDK.js.map

package/dist/chunk-OVXSQQDK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Sidebar/Sidebar.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type {\n  SidebarContentProps,\n  SidebarFooterProps,\n  SidebarHeaderProps,\n  SidebarProps,\n} from './Sidebar.types';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\n/**\n * A width prop as CSS. `sx` reads a number of 1 or less as a fraction of the\n * parent, and that stays so; any other number is design px, through the type scale.\n */\nconst widthCss = (theme: Theme, value: number): string =>\n  value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);\n\nexport const Sidebar: React.FC<SidebarProps> = ({\n  children,\n  variant = 'fixed',\n  open = true,\n  onToggle: _onToggle,\n  width,\n  collapsedWidth,\n  position = 'left',\n  className,\n  dataTestId = 'sidebar',\n  ...rest\n}) => {\n  // Prevent unused variable warning for onToggle\n  void _onToggle;\n  const theme = useTheme();\n\n  const isCollapsed = variant === 'collapsible' && !open;\n  // Design px: 280 open, 64 collapsed, unless the caller says otherwise.\n  const currentWidth = isCollapsed ? (collapsedWidth ?? 64) : (width ?? 280);\n\n  const getVariantStyles = () => {\n    switch (variant) {\n      case 'floating':\n        return {\n          position: 'fixed' as const,\n          top: theme.spacing(2),\n          bottom: theme.spacing(2),\n          [position]: theme.spacing(2),\n          borderRadius: theme.spacing(2),\n          boxShadow: theme.shadows[8],\n          zIndex: theme.zIndex.drawer,\n        };\n      case 'glass':\n        return {\n          backgroundColor: alpha(theme.palette.background.paper, 0.1),\n          backdropFilter: `blur(${rem(theme, 20)})`,\n          border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n          boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}`,\n        };\n      case 'collapsible':\n        return {\n          transition: theme.transitions.create('width', {\n            easing: theme.transitions.easing.sharp,\n            duration: theme.transitions.duration.leavingScreen,\n          }),\n        };\n      default:\n        return {\n          backgroundColor: theme.palette.background.paper,\n          borderRight: `1px solid ${theme.palette.divider}`,\n        };\n    }\n  };\n\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      {...rest}\n      sx={{\n        width: widthCss(theme, currentWidth),\n        height: '100vh',\n        display: 'flex',\n        flexDirection: 'column',\n        overflow: 'hidden',\n        ...getVariantStyles(),\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\n\nexport const SidebarHeader: React.FC<SidebarHeaderProps> = ({ children, dataTestId = 'sidebar-header', ...rest }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid={dataTestId}\n      {...rest}\n      sx={{\n        padding: theme.spacing(2),\n        borderBottom: `1px solid ${theme.palette.divider}`,\n        flexShrink: 0,\n        overflow: 'hidden',\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\n\nexport const SidebarContent: React.FC<SidebarContentProps> = ({ children, dataTestId = 'sidebar-content', ...rest }) => (\n    <Box\n      data-testid={dataTestId}\n      {...rest}\n      sx={{\n        flex: 1,\n        overflow: 'auto',\n      }}\n    >\n      {children}\n    </Box>\n  );\n\nexport const SidebarFooter: React.FC<SidebarFooterProps> = ({ children, dataTestId = 'sidebar-footer', ...rest }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid={dataTestId}\n      {...rest}\n      sx={{\n        padding: theme.spacing(2),\n        borderTop: `1px solid ${theme.palette.divider}`,\n        flexShrink: 0,\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-ZQL5RXVE.js → chunk-PA3AA55Q.js}

@@ -84,7 +84,7 @@ function ColumnsMenu({
         onClose: close,
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
-        slotProps: { paper: { sx: { minWidth: 200 } } },
+        slotProps: { paper: { sx: { minWidth: sxRem(200) } } },
         children: [
           /* @__PURE__ */ jsx(ListSubheader, { sx: { px: 1.5, py: 0.75, fontSize: sxRem(12), fontWeight: 600, color: "text.primary", lineHeight: 1.5 }, children: title }),
           columns.map((option) => /* @__PURE__ */ jsx(
@@ -105,4 +105,4 @@ function ColumnsMenu({
 export {
   ColumnsMenu
 };
-//# sourceMappingURL=chunk-ZQL5RXVE.js.map
+//# sourceMappingURL=chunk-PA3AA55Q.js.map

package/dist/{chunk-ZQL5RXVE.js.map → chunk-PA3AA55Q.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/layout/ContentToolbar/ColumnsMenu.tsx"],"sourcesContent":["'use client';\n\nimport ColumnsIcon from '@mui/icons-material/ViewColumnRounded';\nimport Box from '@mui/material/Box/index.js';\nimport Checkbox from '@mui/material/Checkbox/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport ListSubheader from '@mui/material/ListSubheader/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport React, { useState } from 'react';\n\nimport type { ColumnVisibilityOption, ColumnsMenuProps } from './ContentToolbar.types';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { fieldHeight } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\n\n/** One column checkbox row; toggling never closes the menu. */\nfunction ColumnRow({\n  option,\n  onToggle,\n  testId,\n}: {\n  option: ColumnVisibilityOption;\n  onToggle: (id: string, visible: boolean) => void;\n  testId?: string;\n}): React.JSX.Element {\n  return (\n    <MenuItem\n      data-testid={testId}\n      onClick={() => onToggle(option.id, !option.visible)}\n      disabled={option.locked}\n      sx={{ gap: 1 }}\n    >\n      <Checkbox\n        checked={option.visible}\n        size=\"small\"\n        disableRipple\n        sx={{ p: 0, pointerEvents: 'none' }}\n        tabIndex={-1}\n      />\n      <Box component=\"span\" sx={{ flex: 1, minWidth: 0, textAlign: 'left' }}>\n        {option.label}\n      </Box>\n    </MenuItem>\n  );\n}\n\n/**\n * Stateless column-visibility selector: a neutral icon button (matching\n * {@link FilterTrigger}/{@link SortByDropdown}) opening a checkbox list of the\n * hideable columns. Purely presentational — the caller owns the visibility state\n * and is notified via `onToggle`. The menu stays open while toggling so several\n * columns can be flipped at once.\n */\nexport function ColumnsMenu({\n  columns,\n  onToggle,\n  title = 'Columns',\n  ariaLabel = 'Toggle columns',\n  'data-testid': testId,\n}: ColumnsMenuProps): React.JSX.Element {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n  const close = (): void => setAnchorEl(null);\n\n  return (\n    <>\n      <IconButton\n        size=\"small\"\n        data-testid={testId}\n        aria-label={ariaLabel}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={(event) => setAnchorEl(event.currentTarget)}\n        sx={{\n          width: fieldHeight,\n          height: fieldHeight,\n          borderRadius: fieldRadiusPx,\n          color: 'text.secondary',\n          bgcolor: open ? 'action.selected' : 'transparent',\n        }}\n      >\n        <ColumnsIcon sx={{ fontSize: sxRem(16) }} />\n      </IconButton>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={close}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        slotProps={{ paper: { sx: { minWidth: 200 } } }}\n      >\n        <ListSubheader sx={{ px: 1.5, py: 0.75, fontSize: sxRem(12), fontWeight: 600, color: 'text.primary', lineHeight: 1.5 }}>\n          {title}\n        </ListSubheader>\n        {columns.map((option) => (\n          <ColumnRow\n            key={option.id}\n            option={option}\n            onToggle={onToggle}\n            testId={testId ? `${testId}-${option.id}` : undefined}\n          />\n        ))}\n      </Menu>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAEA,OAAO,iBAAiB;AACxB,OAAO,SAAS;AAChB,OAAO,cAAc;AACrB,OAAO,gBAAgB;AACvB,OAAO,mBAAmB;AAC1B,OAAO,UAAU;AACjB,OAAO,cAAc;AACrB,SAAgB,gBAAgB;AAkB5B,SAuCA,UAjCE,KANF;AAVJ,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AACF,GAIsB;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,SAAS,MAAM,SAAS,OAAO,IAAI,CAAC,OAAO,OAAO;AAAA,MAClD,UAAU,OAAO;AAAA,MACjB,IAAI,EAAE,KAAK,EAAE;AAAA,MAEb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,OAAO;AAAA,YAChB,MAAK;AAAA,YACL,eAAa;AAAA,YACb,IAAI,EAAE,GAAG,GAAG,eAAe,OAAO;AAAA,YAClC,UAAU;AAAA;AAAA,QACZ;AAAA,QACA,oBAAC,OAAI,WAAU,QAAO,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,WAAW,OAAO,GACjE,iBAAO,OACV;AAAA;AAAA;AAAA,EACF;AAEJ;AASO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,eAAe;AACjB,GAAwC;AACtC,QAAM,CAAC,UAAU,WAAW,IAAI,SAA6B,IAAI;AACjE,QAAM,OAAO,QAAQ,QAAQ;AAC7B,QAAM,QAAQ,MAAY,YAAY,IAAI;AAE1C,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAa;AAAA,QACb,cAAY;AAAA,QACZ,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,SAAS,CAAC,UAAU,YAAY,MAAM,aAAa;AAAA,QACnD,IAAI;AAAA,UACF,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,OAAO;AAAA,UACP,SAAS,OAAO,oBAAoB;AAAA,QACtC;AAAA,QAEA,8BAAC,eAAY,IAAI,EAAE,UAAU,MAAM,EAAE,EAAE,GAAG;AAAA;AAAA,IAC5C;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,cAAc,EAAE,UAAU,UAAU,YAAY,QAAQ;AAAA,QACxD,iBAAiB,EAAE,UAAU,OAAO,YAAY,QAAQ;AAAA,QACxD,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,IAAI,EAAE,EAAE;AAAA,QAE9C;AAAA,8BAAC,iBAAc,IAAI,EAAE,IAAI,KAAK,IAAI,MAAM,UAAU,MAAM,EAAE,GAAG,YAAY,KAAK,OAAO,gBAAgB,YAAY,IAAI,GAClH,iBACH;AAAA,UACC,QAAQ,IAAI,CAAC,WACZ;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA;AAAA,cACA,QAAQ,SAAS,GAAG,MAAM,IAAI,OAAO,EAAE,KAAK;AAAA;AAAA,YAHvC,OAAO;AAAA,UAId,CACD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/components/layout/ContentToolbar/ColumnsMenu.tsx"],"sourcesContent":["'use client';\n\nimport ColumnsIcon from '@mui/icons-material/ViewColumnRounded';\nimport Box from '@mui/material/Box/index.js';\nimport Checkbox from '@mui/material/Checkbox/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport ListSubheader from '@mui/material/ListSubheader/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport React, { useState } from 'react';\n\nimport type { ColumnVisibilityOption, ColumnsMenuProps } from './ContentToolbar.types';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { fieldHeight } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\n\n/** One column checkbox row; toggling never closes the menu. */\nfunction ColumnRow({\n  option,\n  onToggle,\n  testId,\n}: {\n  option: ColumnVisibilityOption;\n  onToggle: (id: string, visible: boolean) => void;\n  testId?: string;\n}): React.JSX.Element {\n  return (\n    <MenuItem\n      data-testid={testId}\n      onClick={() => onToggle(option.id, !option.visible)}\n      disabled={option.locked}\n      sx={{ gap: 1 }}\n    >\n      <Checkbox\n        checked={option.visible}\n        size=\"small\"\n        disableRipple\n        sx={{ p: 0, pointerEvents: 'none' }}\n        tabIndex={-1}\n      />\n      <Box component=\"span\" sx={{ flex: 1, minWidth: 0, textAlign: 'left' }}>\n        {option.label}\n      </Box>\n    </MenuItem>\n  );\n}\n\n/**\n * Stateless column-visibility selector: a neutral icon button (matching\n * {@link FilterTrigger}/{@link SortByDropdown}) opening a checkbox list of the\n * hideable columns. Purely presentational — the caller owns the visibility state\n * and is notified via `onToggle`. The menu stays open while toggling so several\n * columns can be flipped at once.\n */\nexport function ColumnsMenu({\n  columns,\n  onToggle,\n  title = 'Columns',\n  ariaLabel = 'Toggle columns',\n  'data-testid': testId,\n}: ColumnsMenuProps): React.JSX.Element {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n  const close = (): void => setAnchorEl(null);\n\n  return (\n    <>\n      <IconButton\n        size=\"small\"\n        data-testid={testId}\n        aria-label={ariaLabel}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={(event) => setAnchorEl(event.currentTarget)}\n        sx={{\n          width: fieldHeight,\n          height: fieldHeight,\n          borderRadius: fieldRadiusPx,\n          color: 'text.secondary',\n          bgcolor: open ? 'action.selected' : 'transparent',\n        }}\n      >\n        <ColumnsIcon sx={{ fontSize: sxRem(16) }} />\n      </IconButton>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={close}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        slotProps={{ paper: { sx: { minWidth: sxRem(200) } } }}\n      >\n        <ListSubheader sx={{ px: 1.5, py: 0.75, fontSize: sxRem(12), fontWeight: 600, color: 'text.primary', lineHeight: 1.5 }}>\n          {title}\n        </ListSubheader>\n        {columns.map((option) => (\n          <ColumnRow\n            key={option.id}\n            option={option}\n            onToggle={onToggle}\n            testId={testId ? `${testId}-${option.id}` : undefined}\n          />\n        ))}\n      </Menu>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAEA,OAAO,iBAAiB;AACxB,OAAO,SAAS;AAChB,OAAO,cAAc;AACrB,OAAO,gBAAgB;AACvB,OAAO,mBAAmB;AAC1B,OAAO,UAAU;AACjB,OAAO,cAAc;AACrB,SAAgB,gBAAgB;AAkB5B,SAuCA,UAjCE,KANF;AAVJ,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AACF,GAIsB;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,SAAS,MAAM,SAAS,OAAO,IAAI,CAAC,OAAO,OAAO;AAAA,MAClD,UAAU,OAAO;AAAA,MACjB,IAAI,EAAE,KAAK,EAAE;AAAA,MAEb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,OAAO;AAAA,YAChB,MAAK;AAAA,YACL,eAAa;AAAA,YACb,IAAI,EAAE,GAAG,GAAG,eAAe,OAAO;AAAA,YAClC,UAAU;AAAA;AAAA,QACZ;AAAA,QACA,oBAAC,OAAI,WAAU,QAAO,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,WAAW,OAAO,GACjE,iBAAO,OACV;AAAA;AAAA;AAAA,EACF;AAEJ;AASO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,eAAe;AACjB,GAAwC;AACtC,QAAM,CAAC,UAAU,WAAW,IAAI,SAA6B,IAAI;AACjE,QAAM,OAAO,QAAQ,QAAQ;AAC7B,QAAM,QAAQ,MAAY,YAAY,IAAI;AAE1C,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAa;AAAA,QACb,cAAY;AAAA,QACZ,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,SAAS,CAAC,UAAU,YAAY,MAAM,aAAa;AAAA,QACnD,IAAI;AAAA,UACF,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,OAAO;AAAA,UACP,SAAS,OAAO,oBAAoB;AAAA,QACtC;AAAA,QAEA,8BAAC,eAAY,IAAI,EAAE,UAAU,MAAM,EAAE,EAAE,GAAG;AAAA;AAAA,IAC5C;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,cAAc,EAAE,UAAU,UAAU,YAAY,QAAQ;AAAA,QACxD,iBAAiB,EAAE,UAAU,OAAO,YAAY,QAAQ;AAAA,QACxD,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,MAAM,GAAG,EAAE,EAAE,EAAE;AAAA,QAErD;AAAA,8BAAC,iBAAc,IAAI,EAAE,IAAI,KAAK,IAAI,MAAM,UAAU,MAAM,EAAE,GAAG,YAAY,KAAK,OAAO,gBAAgB,YAAY,IAAI,GAClH,iBACH;AAAA,UACC,QAAQ,IAAI,CAAC,WACZ;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA;AAAA,cACA,QAAQ,SAAS,GAAG,MAAM,IAAI,OAAO,EAAE,KAAK;AAAA;AAAA,YAHvC,OAAO;AAAA,UAId,CACD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/{chunk-75LOTMSN.js → chunk-PPRV4LTM.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   DropdownMenu
-} from "./chunk-VFHGILXI.js";
+} from "./chunk-U3DBQXPI.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -166,4 +166,4 @@ export {
   togglePillValues,
   cardGridTracks
 };
-//# sourceMappingURL=chunk-75LOTMSN.js.map
+//# sourceMappingURL=chunk-PPRV4LTM.js.map

package/dist/{chunk-LT4NEKXB.js → chunk-QA2ZGCRL.js}

@@ -7,7 +7,7 @@ import {
 import {
   Dialog,
   DialogContent
-} from "./chunk-L4UP5VYS.js";
+} from "./chunk-GVH7C2PT.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -19,7 +19,7 @@ import {
 } from "./chunk-2EAAWOZ2.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 
 // src/components/data-display/DataViews/ManageViewsDialog.tsx
 import { useMemo } from "react";
@@ -128,4 +128,4 @@ function ManageViewsDialog({
 export {
   ManageViewsDialog
 };
-//# sourceMappingURL=chunk-LT4NEKXB.js.map
+//# sourceMappingURL=chunk-QA2ZGCRL.js.map

package/dist/{chunk-2E2WOBID.js → chunk-QGFBIUOK.js}

@@ -1,14 +1,14 @@
 import {
   SettingsSectionChips
-} from "./chunk-CSTAQX2B.js";
+} from "./chunk-XWZJLXJT.js";
 import {
   SettingsSectionHeader
-} from "./chunk-CPTY6UZ6.js";
+} from "./chunk-6KEXHOIF.js";
 import {
   TOUCH_TARGET,
   atLeastRail,
   displayAcrossRail
-} from "./chunk-LIG7TKIB.js";
+} from "./chunk-NYFNF7I5.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -35,7 +35,7 @@ function BackLink({
         ...displayAcrossRail(theme, breakpoint, "inline-flex", "none"),
         alignItems: "center",
         gap: 0.5,
-        minHeight: TOUCH_TARGET,
+        minHeight: rem(theme, TOUCH_TARGET),
         pr: 1,
         textDecoration: "none",
         color: "text.secondary",
@@ -167,4 +167,4 @@ function SettingsPanel({
 export {
   SettingsPanel
 };
-//# sourceMappingURL=chunk-2E2WOBID.js.map
+//# sourceMappingURL=chunk-QGFBIUOK.js.map

package/dist/chunk-QGFBIUOK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport ChevronLeftIcon from \"@mui/icons-material/ChevronLeft\";\nimport type { CSSObject, Theme } from \"@mui/material/styles/index.js\";\nimport Box from \"@mui/material/Box/index.js\";\nimport React from \"react\";\n\nimport {\n  atLeastRail,\n  displayAcrossRail,\n  TOUCH_TARGET,\n} from \"./SettingsLayout.styles\";\nimport { SettingsSectionChips } from \"./SettingsSectionChips\";\nimport { SettingsSectionHeader } from \"./SettingsSectionHeader\";\nimport type {\n  SettingsLayoutProps,\n  SettingsNavItem,\n  SettingsRailBreakpoint,\n} from \"./SettingsLayout.types\";\nimport { rem } from \"../../../tokens/relative\";\n\nexport interface SettingsPanelProps {\n  /** True in `drilldown`, inside a section rather than at the index. */\n  inSection: boolean;\n  /** True in `drilldown`, at the area's index. */\n  hideOnNarrow: boolean;\n  breakpoint: SettingsRailBreakpoint;\n  indexHref?: string;\n  backLabel: string;\n  /** The open section's own name — turns the back link into a compact header. */\n  sectionTitle?: string;\n  /** One line under that name. */\n  sectionDescription?: string;\n  ariaLabel: string;\n  sectionChips?: SettingsNavItem[];\n  activeItemId?: string;\n  linkComponent?: SettingsLayoutProps[\"linkComponent\"];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n  children: React.ReactNode;\n  /** Scroll inside the panel rather than with the page. See `fillHeight`. */\n  fillHeight?: boolean;\n}\n\n/** The way back to the area's index — narrow widths only. */\nfunction BackLink({\n  href,\n  label,\n  breakpoint,\n  linkComponent,\n  testIdPrefix,\n}: {\n  href: string;\n  label: string;\n  breakpoint: SettingsRailBreakpoint;\n  linkComponent: NonNullable<SettingsLayoutProps[\"linkComponent\"]>;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <Box\n      component={linkComponent}\n      href={href}\n      aria-label={label}\n      data-testid={`${testIdPrefix}-back`}\n      sx={(theme) => ({\n        ...displayAcrossRail(theme, breakpoint, \"inline-flex\", \"none\"),\n        alignItems: \"center\",\n        gap: 0.5,\n        minHeight: rem(theme, TOUCH_TARGET),\n        pr: 1,\n        textDecoration: \"none\",\n        color: \"text.secondary\",\n        font: \"inherit\",\n        fontSize: rem(theme, 14),\n      })}\n    >\n      <ChevronLeftIcon fontSize=\"small\" />\n      {label}\n    </Box>\n  );\n}\n\n/**\n * Two shapes of the same control, chosen by whether the host named the section.\n *\n * With a `sectionTitle` the back folds into a compact header that also says\n * where you are; without one the original text link is kept, so no existing\n * consumer's header grows a title and pushes their first field down the page on\n * upgrade. Its own component so `SettingsPanel` keeps one branch rather than\n * three.\n */\nfunction PanelBack({\n  href,\n  backLabel,\n  sectionTitle,\n  sectionDescription,\n  breakpoint,\n  linkComponent,\n  testIdPrefix,\n}: {\n  href: string;\n  backLabel: string;\n  sectionTitle?: string;\n  sectionDescription?: string;\n  breakpoint: SettingsRailBreakpoint;\n  linkComponent: NonNullable<SettingsLayoutProps['linkComponent']>;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  if (sectionTitle === undefined) {\n    return (\n      <BackLink\n        href={href}\n        label={backLabel}\n        breakpoint={breakpoint}\n        linkComponent={linkComponent}\n        testIdPrefix={testIdPrefix}\n      />\n    );\n  }\n  return (\n    <SettingsSectionHeader\n      href={href}\n      backLabel={backLabel}\n      title={sectionTitle}\n      description={sectionDescription}\n      breakpoint={breakpoint}\n      linkComponent={linkComponent}\n      testIdPrefix={testIdPrefix}\n    />\n  );\n}\n\n/**\n * The panel's own box, as ONE object per media query rather than two.\n *\n * Both the `display` rule and `fillHeight`'s belong at the same wide-shape\n * query, and spreading them as separate `{ [query]: … }` objects makes the\n * second REPLACE the first — so turning `fillHeight` on silently dropped the\n * `display: block` that `hideOnNarrow` puts there and left the panel\n * `display: none` at every width. That only shows at a drilldown INDEX, where\n * `hideOnNarrow` is true, which is why a section route looked fine.\n *\n * `overflowY` here is also what lets a `position: sticky` toolbar inside\n * `children` pin to the TOP OF THE PANEL — under the host's header — instead\n * of to a document that is not the scroller.\n */\nfunction panelSx(\n  breakpoint: SettingsRailBreakpoint,\n  hideOnNarrow: boolean,\n  fillHeight: boolean,\n): (theme: Theme) => CSSObject {\n  return (theme) => ({\n    display: hideOnNarrow ? \"none\" : \"block\",\n    flex: \"1 1 auto\",\n    minWidth: 0,\n    width: \"100%\",\n    [atLeastRail(theme, breakpoint)]: {\n      ...(hideOnNarrow ? { display: \"block\" } : {}),\n      ...(fillHeight\n        ? {\n            height: \"100%\",\n            minHeight: 0,\n            overflowY: \"auto\",\n            overscrollBehavior: \"contain\",\n          }\n        : {}),\n    },\n  });\n}\n\n/**\n * The central column: the open screen, and — in `drilldown`, inside a section —\n * the back link and sibling-section strip above it.\n *\n * At the index in `drilldown` this whole column is `display: none` below the\n * breakpoint and the rail becomes the page. Mounted either way: the panel and\n * the list are one tree with `display` between them, not two branches of a\n * render.\n */\nexport function SettingsPanel({\n  inSection,\n  hideOnNarrow,\n  breakpoint,\n  indexHref,\n  backLabel,\n  sectionTitle,\n  sectionDescription,\n  ariaLabel,\n  sectionChips,\n  activeItemId,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n  fillHeight = false,\n  children,\n}: SettingsPanelProps): React.JSX.Element {\n  const showBack =\n    inSection && indexHref !== undefined && linkComponent !== undefined;\n  const showChips =\n    inSection && sectionChips !== undefined && sectionChips.length > 0;\n\n  return (\n    <Box\n      data-testid={`${testIdPrefix}-panel`}\n      sx={panelSx(breakpoint, hideOnNarrow, fillHeight)}\n    >\n      {showBack ? (\n        <PanelBack\n          href={indexHref}\n          backLabel={backLabel}\n          sectionTitle={sectionTitle}\n          sectionDescription={sectionDescription}\n          breakpoint={breakpoint}\n          linkComponent={linkComponent}\n          testIdPrefix={testIdPrefix}\n        />\n      ) : null}\n\n      {showChips ? (\n        <Box\n          sx={(theme) => ({\n            ...displayAcrossRail(theme, breakpoint, \"block\", \"none\"),\n            mb: 1,\n            minWidth: 0,\n          })}\n        >\n          <SettingsSectionChips\n            items={sectionChips}\n            activeItemId={activeItemId}\n            ariaLabel={ariaLabel}\n            linkComponent={linkComponent}\n            onSelectItem={onSelectItem}\n            testIdPrefix={testIdPrefix}\n          />\n        </Box>\n      ) : null}\n\n      {children}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-ROT57BP4.js → chunk-R2XVTUVR.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -184,4 +184,4 @@ function MoveButton({
 export {
   ColumnsTab
 };
-//# sourceMappingURL=chunk-ROT57BP4.js.map
+//# sourceMappingURL=chunk-R2XVTUVR.js.map

package/dist/{chunk-QEG3P5D4.js → chunk-R6SN73RX.js}

@@ -1,22 +1,22 @@
 import {
   GridMain
-} from "./chunk-57JLS55D.js";
+} from "./chunk-I4QA2F4L.js";
 import {
   FilterDialog,
   GridFilterPanel
-} from "./chunk-AER4245J.js";
+} from "./chunk-H67EL3CG.js";
 import {
   DataViewsEmpty
-} from "./chunk-CQPFSEJB.js";
+} from "./chunk-L7NQCLFU.js";
 import {
   InlineFilterControls
-} from "./chunk-HU7TX7RB.js";
+} from "./chunk-DUBTI4DI.js";
 import {
   GridHeaderRow
-} from "./chunk-KK57AHWS.js";
+} from "./chunk-OAEYCKBN.js";
 import {
   DataViewsPagination
-} from "./chunk-CRZXSZ5O.js";
+} from "./chunk-2S752BIJ.js";
 import {
   toOverflowFields,
   useFilterOverflow
@@ -29,10 +29,10 @@ import {
 } from "./chunk-H5BEWPEY.js";
 import {
   ShellToolbar
-} from "./chunk-35S6QI5G.js";
+} from "./chunk-XJJXBUPN.js";
 import {
   togglePillValues
-} from "./chunk-75LOTMSN.js";
+} from "./chunk-PPRV4LTM.js";
 import {
   DataViewsLayoutProvider,
   useDataViewsLayout
@@ -42,7 +42,7 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   TableFilter
-} from "./chunk-HXEBKOSM.js";
+} from "./chunk-J5UZB6Y6.js";
 import {
   default as default2
 } from "./chunk-WEBEOBN5.js";
@@ -238,4 +238,4 @@ function GridShell(props) {
 export {
   GridShell
 };
-//# sourceMappingURL=chunk-QEG3P5D4.js.map
+//# sourceMappingURL=chunk-R6SN73RX.js.map

package/dist/{chunk-MVKYNDT2.js → chunk-RKROWJVF.js}

@@ -5,7 +5,9 @@ import {
   sheen
 } from "./chunk-FQ6UW7IY.js";
 import {
-  rem
+  rem,
+  rems,
+  sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/ContextMenu/ContextMenu.tsx
@@ -22,13 +24,13 @@ var StyledMenu = styled(Menu, {
   shouldForwardProp: (prop) => prop !== "customVariant" && prop !== "size"
 })(({ theme, customVariant, size }) => ({
   "& .MuiPaper-root": {
-    minWidth: 160,
+    minWidth: rem(theme, 160),
     borderRadius: theme.spacing(1),
     ...customVariant === "glass" && {
       backgroundColor: alpha(theme.palette.background.paper, 0.85),
-      backdropFilter: "blur(20px)",
+      backdropFilter: `blur(${rem(theme, 20)})`,
       border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
-      boxShadow: `0 8px 32px ${shadowInk(theme, 0.12)}`
+      boxShadow: `0 ${rems(theme, 8, 32)} ${shadowInk(theme, 0.12)}`
     },
     ...customVariant === "dark" && {
       backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.95),
@@ -46,14 +48,14 @@ var StyledMenu = styled(Menu, {
     ...size === "sm" && {
       "& .MuiMenuItem-root": {
         fontSize: rem(theme, 14),
-        minHeight: 32,
+        minHeight: rem(theme, 32),
         padding: theme.spacing(0.5, 1.5)
       }
     },
     ...size === "lg" && {
       "& .MuiMenuItem-root": {
         fontSize: rem(theme, 18),
-        minHeight: 48,
+        minHeight: rem(theme, 48),
         padding: theme.spacing(1.5, 2)
       }
     }
@@ -91,7 +93,7 @@ var MenuHeader = styled(Typography)(({ theme }) => ({
   fontWeight: 600,
   textTransform: "uppercase",
   color: theme.palette.text.secondary,
-  letterSpacing: 0.5
+  letterSpacing: rem(theme, 0.5)
 }));
 var ShortcutText = styled(Typography)(({ theme }) => ({
   fontSize: rem(theme, 12),
@@ -115,7 +117,7 @@ var renderMenuItem = (item, handleItemClick, size) => {
       color: item.color,
       dangerous: item.dangerous,
       children: [
-        hasIcon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: size === "sm" ? 32 : 40 }, children: item.icon }),
+        hasIcon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: sxRem(size === "sm" ? 32 : 40) }, children: item.icon }),
         /* @__PURE__ */ jsx(ListItemText, { primary: item.label }),
         item.shortcut && /* @__PURE__ */ jsx(ShortcutText, { variant: "caption", children: item.shortcut })
       ]
@@ -211,4 +213,4 @@ ContextMenu.displayName = "ContextMenu";
 export {
   ContextMenu
 };
-//# sourceMappingURL=chunk-MVKYNDT2.js.map
+//# sourceMappingURL=chunk-RKROWJVF.js.map

package/dist/chunk-RKROWJVF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import Divider from '@mui/material/Divider/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React, { cloneElement, isValidElement,useState } from 'react';\n\nimport type { ContextMenuItem,ContextMenuProps } from './ContextMenu.types';\nimport { absoluteInk, neutralTones, shadowInk, sheen } from '../../../tokens/ink';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\nconst StyledMenu = styled(Menu, {\n  shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'size',\n})<{ customVariant?: string; size?: string }>(({ theme, customVariant, size }) => ({\n  '& .MuiPaper-root': {\n    minWidth: rem(theme, 160),\n    borderRadius: theme.spacing(1),\n\n    ...(customVariant === 'glass' && {\n      backgroundColor: alpha(theme.palette.background.paper, 0.85),\n      backdropFilter: `blur(${rem(theme, 20)})`,\n      border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,\n      boxShadow: `0 ${rems(theme, 8, 32)} ${shadowInk(theme, 0.12)}`,\n    }),\n\n    ...(customVariant === 'dark' && {\n      backgroundColor: alpha(neutralTones(theme).inverseSurface, 0.95),\n      color: absoluteInk(theme).white,\n      '& .MuiMenuItem-root': {\n        color: absoluteInk(theme).white,\n      },\n      '& .MuiListItemIcon-root': {\n        color: absoluteInk(theme).white,\n      },\n      '& .MuiDivider-root': {\n        borderColor: sheen(theme, 0.12),\n      },\n    }),\n\n    ...(size === 'sm' && {\n      '& .MuiMenuItem-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      '& .MuiMenuItem-root': {\n        fontSize: rem(theme, 18),\n        minHeight: rem(theme, 48),\n        padding: theme.spacing(1.5, 2),\n      },\n    }),\n  },\n}));\n\n// `color` names a palette key (`success`, `warning`, …) that MUI's Theme type does\n// not index, so it is read structurally and falls back to primary.\nconst paletteColor = (theme: Theme, color: string): string =>\n  (theme.palette as unknown as Record<string, { main?: string }>)[color]?.main ||\n  theme.palette.primary.main;\n\nconst accentStyles = (theme: Theme, color: string): CSSObject => {\n  const main = paletteColor(theme, color);\n\n  return {\n    color: main,\n    '& .MuiListItemIcon-root': { color: main },\n    '&:hover': { backgroundColor: alpha(main, 0.08) },\n  };\n};\n\nconst StyledMenuItem = styled(MenuItem, {\n  shouldForwardProp: (prop) => !['color', 'dangerous'].includes(prop as string),\n})<{ color?: string; dangerous?: boolean }>(({ theme, color, dangerous }) => ({\n  borderRadius: theme.spacing(0.5),\n  margin: theme.spacing(0.25, 0.5),\n  transition: 'all 0.2s ease',\n\n  '&:hover': {\n    backgroundColor: alpha(dangerous ? theme.palette.error.main : theme.palette.primary.main, 0.08),\n  },\n\n  ...(dangerous && {\n    color: theme.palette.error.main,\n    '& .MuiListItemIcon-root': {\n      color: theme.palette.error.main,\n    },\n  }),\n\n  ...(color && color !== 'default' && !dangerous ? accentStyles(theme, color) : {}),\n}));\n\nconst MenuHeader = styled(Typography)(({ theme }) => ({\n  padding: theme.spacing(1, 2),\n  fontSize: rem(theme, 12),\n  fontWeight: 600,\n  textTransform: 'uppercase',\n  color: theme.palette.text.secondary,\n  letterSpacing: rem(theme, 0.5),\n}));\n\nconst ShortcutText = styled(Typography)(({ theme }) => ({\n  fontSize: rem(theme, 12),\n  color: theme.palette.text.secondary,\n  marginLeft: 'auto',\n  paddingLeft: theme.spacing(2),\n}));\n\nconst renderMenuItem = (\n  item: ContextMenuItem,\n  handleItemClick: (item: ContextMenuItem) => void,\n  size?: string,\n) => {\n  if (item.type === 'divider') {\n    return <Divider key={item.id} sx={{ my: 0.5 }} />;\n  }\n\n  if (item.type === 'header') {\n    return <MenuHeader key={item.id}>{item.label}</MenuHeader>;\n  }\n\n  const hasIcon = !!item.icon;\n\n  return (\n    <StyledMenuItem\n      key={item.id}\n      disabled={item.disabled}\n      onClick={() => handleItemClick(item)}\n      color={item.color}\n      dangerous={item.dangerous}\n    >\n      {hasIcon && (\n        <ListItemIcon sx={{ minWidth: sxRem(size === 'sm' ? 32 : 40) }}>{item.icon}</ListItemIcon>\n      )}\n      <ListItemText primary={item.label} />\n      {item.shortcut && <ShortcutText variant=\"caption\">{item.shortcut}</ShortcutText>}\n    </StyledMenuItem>\n  );\n};\n\ninterface TriggerOptions {\n  disabled: boolean;\n  triggerClassName?: string;\n  triggerStyle?: React.CSSProperties;\n}\n\n// The trigger is whatever the caller passed as children. A single element is\n// cloned, so the handler and cursor land on the caller's own node; anything else\n// gets wrapped in a div that can carry them.\nconst buildTrigger = (\n  children: React.ReactNode,\n  onContextMenu: (event: React.MouseEvent) => void,\n  { disabled, triggerClassName, triggerStyle }: TriggerOptions,\n) => {\n  const cursor = disabled ? 'default' : 'context-menu';\n\n  if (!isValidElement(children)) {\n    return (\n      <div\n        onContextMenu={onContextMenu}\n        className={triggerClassName}\n        style={{ ...triggerStyle, cursor }}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  const element = children as React.ReactElement<{\n    onContextMenu?: (event: React.MouseEvent) => void;\n    className?: string;\n    style?: React.CSSProperties;\n  }>;\n\n  return cloneElement(element, {\n    onContextMenu,\n    className: [\n      element.props.className,\n      triggerClassName,\n      !disabled ? 'context-menu-trigger' : '',\n    ]\n      .filter(Boolean)\n      .join(' '),\n    style: { ...element.props.style, ...triggerStyle, cursor },\n  });\n};\n\nexport const ContextMenu = React.forwardRef<HTMLDivElement, ContextMenuProps>(\n  (\n    {\n      variant = 'default',\n      items,\n      children,\n      disabled = false,\n      onOpen,\n      onClose,\n      size = 'md',\n      triggerClassName,\n      triggerStyle,\n      ...menuProps\n    },\n    ref,\n  ) => {\n    const [contextMenu, setContextMenu] = useState<{\n      mouseX: number;\n      mouseY: number;\n    } | null>(null);\n\n    const handleContextMenu = (event: React.MouseEvent) => {\n      if (disabled) return;\n\n      event.preventDefault();\n      setContextMenu(\n        contextMenu === null\n          ? {\n              mouseX: event.clientX + 2,\n              mouseY: event.clientY - 6,\n            }\n          : null,\n      );\n      onOpen?.(event);\n    };\n\n    const handleClose = () => {\n      setContextMenu(null);\n      onClose?.();\n    };\n\n    const handleItemClick = (item: ContextMenuItem) => {\n      if (item.onClick) {\n        item.onClick();\n      }\n      handleClose();\n    };\n\n    const triggerElement = buildTrigger(children, handleContextMenu, {\n      disabled,\n      triggerClassName,\n      triggerStyle,\n    });\n\n    return (\n      <>\n        {triggerElement}\n        <StyledMenu\n          ref={ref}\n          open={contextMenu !== null}\n          onClose={handleClose}\n          anchorReference=\"anchorPosition\"\n          anchorPosition={\n            contextMenu !== null ? { top: contextMenu.mouseY, left: contextMenu.mouseX } : undefined\n          }\n          customVariant={variant}\n          size={size}\n          {...menuProps}\n        >\n          {items.map((item) => renderMenuItem(item, handleItemClick, size))}\n        </StyledMenu>\n      </>\n    );\n  },\n);\n\nContextMenu.displayName = 'ContextMenu';\n"],"mappings":"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","names":[]}

package/dist/{chunk-NYZO3JNB.js → chunk-RXJQA3FQ.js}

@@ -1,5 +1,4 @@
 // src/components/feedback/TutorialOverlay/TutorialOverlay.geometry.ts
-var DEFAULT_PADDING = 16;
 var getElementBounds = (selector) => document.querySelector(selector)?.getBoundingClientRect() ?? null;
 var pickPlacement = (targetBounds) => {
   const spaces = {
@@ -30,7 +29,7 @@ var clampToViewport = (position, tooltipBounds, padding) => ({
   top: Math.max(padding, Math.min(position.top, window.innerHeight - tooltipBounds.height - padding)),
   left: Math.max(padding, Math.min(position.left, window.innerWidth - tooltipBounds.width - padding))
 });
-var calculateTooltipPosition = (targetBounds, tooltipBounds, placement, padding = DEFAULT_PADDING) => {
+var calculateTooltipPosition = (targetBounds, tooltipBounds, placement, padding) => {
   const finalPlacement = placement === "auto" ? pickPlacement(targetBounds) : placement;
   const offset = offsetFor(finalPlacement, targetBounds, tooltipBounds, padding);
   return {
@@ -43,4 +42,4 @@ export {
   getElementBounds,
   calculateTooltipPosition
 };
-//# sourceMappingURL=chunk-NYZO3JNB.js.map
+//# sourceMappingURL=chunk-RXJQA3FQ.js.map

package/dist/chunk-RXJQA3FQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/TutorialOverlay/TutorialOverlay.geometry.ts"],"sourcesContent":["export const getElementBounds = (selector: string): globalThis.DOMRect | null =>\n  document.querySelector(selector)?.getBoundingClientRect() ?? null;\n\n// With placement 'auto', the side with the most free space around the target\n// wins.\nconst pickPlacement = (targetBounds: globalThis.DOMRect): string => {\n  const spaces = {\n    top: targetBounds.top,\n    bottom: window.innerHeight - targetBounds.bottom,\n    left: targetBounds.left,\n    right: window.innerWidth - targetBounds.right,\n  };\n\n  return Object.entries(spaces).reduce((a, b) => (b[1] > a[1] ? b : a))[0];\n};\n\nconst offsetFor = (\n  placement: string,\n  targetBounds: globalThis.DOMRect,\n  tooltipBounds: globalThis.DOMRect,\n  padding: number,\n): { top: number; left: number } => {\n  const centredLeft = targetBounds.left + targetBounds.width / 2 - tooltipBounds.width / 2;\n  const centredTop = targetBounds.top + targetBounds.height / 2 - tooltipBounds.height / 2;\n\n  switch (placement) {\n    case 'top':\n      return { top: targetBounds.top - tooltipBounds.height - padding, left: centredLeft };\n    case 'bottom':\n      return { top: targetBounds.bottom + padding, left: centredLeft };\n    case 'left':\n      return { top: centredTop, left: targetBounds.left - tooltipBounds.width - padding };\n    case 'right':\n      return { top: centredTop, left: targetBounds.right + padding };\n    default:\n      return { top: 0, left: 0 };\n  }\n};\n\n// Keeps the tooltip fully on screen, whatever the chosen side works out to.\nconst clampToViewport = (\n  position: { top: number; left: number },\n  tooltipBounds: globalThis.DOMRect,\n  padding: number,\n) => ({\n  top: Math.max(padding, Math.min(position.top, window.innerHeight - tooltipBounds.height - padding)),\n  left: Math.max(padding, Math.min(position.left, window.innerWidth - tooltipBounds.width - padding)),\n});\n\nexport const calculateTooltipPosition = (\n  targetBounds: globalThis.DOMRect,\n  tooltipBounds: globalThis.DOMRect,\n  placement: string,\n  /** The clearance around the target, in px — the caller reads it through `remPx`. */\n  padding: number,\n) => {\n  const finalPlacement = placement === 'auto' ? pickPlacement(targetBounds) : placement;\n  const offset = offsetFor(finalPlacement, targetBounds, tooltipBounds, padding);\n\n  return {\n    position: clampToViewport(offset, tooltipBounds, padding),\n    placement: finalPlacement,\n  };\n};\n"],"mappings":";AAAO,IAAM,mBAAmB,CAAC,aAC/B,SAAS,cAAc,QAAQ,GAAG,sBAAsB,KAAK;AAI/D,IAAM,gBAAgB,CAAC,iBAA6C;AAClE,QAAM,SAAS;AAAA,IACb,KAAK,aAAa;AAAA,IAClB,QAAQ,OAAO,cAAc,aAAa;AAAA,IAC1C,MAAM,aAAa;AAAA,IACnB,OAAO,OAAO,aAAa,aAAa;AAAA,EAC1C;AAEA,SAAO,OAAO,QAAQ,MAAM,EAAE,OAAO,CAAC,GAAG,MAAO,EAAE,CAAC,IAAI,EAAE,CAAC,IAAI,IAAI,CAAE,EAAE,CAAC;AACzE;AAEA,IAAM,YAAY,CAChB,WACA,cACA,eACA,YACkC;AAClC,QAAM,cAAc,aAAa,OAAO,aAAa,QAAQ,IAAI,cAAc,QAAQ;AACvF,QAAM,aAAa,aAAa,MAAM,aAAa,SAAS,IAAI,cAAc,SAAS;AAEvF,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAO,EAAE,KAAK,aAAa,MAAM,cAAc,SAAS,SAAS,MAAM,YAAY;AAAA,IACrF,KAAK;AACH,aAAO,EAAE,KAAK,aAAa,SAAS,SAAS,MAAM,YAAY;AAAA,IACjE,KAAK;AACH,aAAO,EAAE,KAAK,YAAY,MAAM,aAAa,OAAO,cAAc,QAAQ,QAAQ;AAAA,IACpF,KAAK;AACH,aAAO,EAAE,KAAK,YAAY,MAAM,aAAa,QAAQ,QAAQ;AAAA,IAC/D;AACE,aAAO,EAAE,KAAK,GAAG,MAAM,EAAE;AAAA,EAC7B;AACF;AAGA,IAAM,kBAAkB,CACtB,UACA,eACA,aACI;AAAA,EACJ,KAAK,KAAK,IAAI,SAAS,KAAK,IAAI,SAAS,KAAK,OAAO,cAAc,cAAc,SAAS,OAAO,CAAC;AAAA,EAClG,MAAM,KAAK,IAAI,SAAS,KAAK,IAAI,SAAS,MAAM,OAAO,aAAa,cAAc,QAAQ,OAAO,CAAC;AACpG;AAEO,IAAM,2BAA2B,CACtC,cACA,eACA,WAEA,YACG;AACH,QAAM,iBAAiB,cAAc,SAAS,cAAc,YAAY,IAAI;AAC5E,QAAM,SAAS,UAAU,gBAAgB,cAAc,eAAe,OAAO;AAE7E,SAAO;AAAA,IACL,UAAU,gBAAgB,QAAQ,eAAe,OAAO;AAAA,IACxD,WAAW;AAAA,EACb;AACF;","names":[]}

package/dist/{chunk-IKLOIONQ.js → chunk-RZYSKQTS.js}

@@ -1,7 +1,7 @@
 import {
   useColumnsWithActions,
   useRenderedColumns
-} from "./chunk-FFOQZRFC.js";
+} from "./chunk-ZAY6OA6F.js";
 import {
   filterRows
 } from "./chunk-YGQX7BNI.js";
@@ -18,7 +18,7 @@ import {
 import {
   computeActiveFilterCount,
   defaultSortFields
-} from "./chunk-75LOTMSN.js";
+} from "./chunk-PPRV4LTM.js";
 import {
   serverDerived,
   useServerQuery
@@ -172,4 +172,4 @@ function useDataViewsState({
 export {
   useDataViewsState
 };
-//# sourceMappingURL=chunk-IKLOIONQ.js.map
+//# sourceMappingURL=chunk-RZYSKQTS.js.map

package/dist/{chunk-NCPWLHZT.js → chunk-SKT2V2OX.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-PGPPN63I.js";
 import {
   Card
-} from "./chunk-N6CSXHFJ.js";
+} from "./chunk-WN5PNP6F.js";
 import {
   Button
 } from "./chunk-2EAAWOZ2.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 
 // src/user-avatar/user-avatar.tsx
 import Box from "@mui/material/Box/index.js";
@@ -74,4 +74,4 @@ export {
   UserAvatar,
   UserMenu
 };
-//# sourceMappingURL=chunk-NCPWLHZT.js.map
+//# sourceMappingURL=chunk-SKT2V2OX.js.map

package/dist/{chunk-EOW2ECB3.js → chunk-SNURSSTN.js}

@@ -1,6 +1,6 @@
 import {
   StepRow
-} from "./chunk-R75DZ3AK.js";
+} from "./chunk-BVLMKSHX.js";
 import {
   resolveWorkflowStepProps,
   withDerivedStatus
@@ -104,4 +104,4 @@ export {
   WorkflowStep,
   WorkflowStep_default
 };
-//# sourceMappingURL=chunk-EOW2ECB3.js.map
+//# sourceMappingURL=chunk-SNURSSTN.js.map

package/dist/{chunk-GRDPGHQJ.js → chunk-SV6JGFHG.js}

@@ -3,13 +3,17 @@ import {
 } from "./chunk-QB3TVUPD.js";
 import {
   Dialog
-} from "./chunk-L4UP5VYS.js";
+} from "./chunk-GVH7C2PT.js";
 import {
   Button
 } from "./chunk-2EAAWOZ2.js";
 import {
   accentFor
 } from "./chunk-TCAQOUIB.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/navigation/AppHeader/AppHeader.details.tsx
 import Box from "@mui/material/Box/index.js";
@@ -17,8 +21,8 @@ import Typography from "@mui/material/Typography/index.js";
 import { useTheme } from "@mui/material/styles/index.js";
 import useMediaQuery from "@mui/material/useMediaQuery/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-var DIALOG_WIDTH = 460;
-var XXS_MAX_WIDTH = 360;
+var DIALOG_WIDTH = sxRem(460);
+var xxsQuery = (theme) => `(max-width:${rem(theme, 360 - 0.05)})`;
 function sheetHeight(xxs) {
   return { height: "auto", maxHeight: xxs ? "100dvh" : "90dvh" };
 }
@@ -108,7 +112,7 @@ var AppHeaderDetails = ({
 }) => {
   const theme = useTheme();
   const asSheet = usesSheet(presentation, useMediaQuery(theme.breakpoints.down(breakpoint)));
-  const xxs = useMediaQuery(`(max-width:${XXS_MAX_WIDTH - 0.05}px)`);
+  const xxs = useMediaQuery(xxsQuery(theme));
   const description = typeof subtitle === "string" ? subtitle : void 0;
   const richSubtitle = description === void 0 ? subtitle : null;
   const body = /* @__PURE__ */ jsx(DetailsBody, { rows, dataTestId, children });
@@ -162,4 +166,4 @@ AppHeaderDetails.displayName = "AppHeaderDetails";
 export {
   AppHeaderDetails
 };
-//# sourceMappingURL=chunk-GRDPGHQJ.js.map
+//# sourceMappingURL=chunk-SV6JGFHG.js.map

package/dist/chunk-SV6JGFHG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/AppHeader/AppHeader.details.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport useMediaQuery from '@mui/material/useMediaQuery/index.js';\nimport React from 'react';\n\nimport { rem, sxRem } from '../../../tokens/relative';\nimport { accentFor } from '../../../tokens/scales';\nimport { Sheet } from '../../data-display/Sheet/Sheet';\nimport { Button } from '../../form/Button/Button';\nimport { Dialog } from '../../feedback/Dialog/Dialog';\n\nimport type {\n  AppHeaderDetailRow,\n  AppHeaderDetailsAction,\n  AppHeaderDetailsProps,\n} from './AppHeader.types';\n\n/** How wide the dialog presentation grows before it stops (460 design px). */\nconst DIALOG_WIDTH = sxRem(460);\n\n/**\n * Where the smallest phones stop (360 design px). The theme's scale starts at\n * `xs`/`sm`, so there is no `xxs` breakpoint to ask for — this is that\n * boundary, named once rather than inlined at the place it decides something.\n */\nconst xxsQuery = (theme: Theme): string => `(max-width:${rem(theme, 360 - 0.05)})`;\n\n/**\n * The sheet grows to its content and stops at the viewport; it does not take a\n * fixed slab of height.\n *\n * `Sheet`'s vertical presets are absolute (`md` is 400px), which on a phone is\n * shorter than six detail rows plus a button — so the panel scrolled INSIDE a\n * screen that had room to spare, putting the address and the way out below the\n * fold of a sheet using two thirds of the display. `height: auto` sizes it to\n * what is in it, and the cap keeps a long panel on-screen: 100dvh on the\n * smallest phones where every pixel counts, 90dvh above that so the panel still\n * reads as a sheet over a page rather than as a new screen.\n *\n * `dvh` and not `vh` — mobile browser chrome makes `vh` overshoot, which would\n * reintroduce exactly the scroll this removes.\n */\nfunction sheetHeight(xxs: boolean): { height: string; maxHeight: string } {\n  return { height: 'auto', maxHeight: xxs ? '100dvh' : '90dvh' };\n}\n\n/** Which surface this viewport calls for. Lifted out to keep the component lean. */\nfunction usesSheet(presentation: AppHeaderDetailsProps['presentation'], compact: boolean): boolean {\n  if (presentation === 'sheet') return true;\n  if (presentation === 'dialog') return false;\n  return compact;\n}\n\n/** One label/value line. The value may wrap to two lines; the label may not. */\nconst DetailRow: React.FC<{ row: AppHeaderDetailRow; last: boolean; dataTestId: string }> = ({\n  row,\n  last,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n  return (\n    <Box\n      data-testid={`${dataTestId}-row`}\n      data-row={row.id ?? row.label}\n      sx={{\n        display: 'flex',\n        alignItems: 'flex-start',\n        justifyContent: 'space-between',\n        gap: 2,\n        py: 1.5,\n        borderBottom: last ? 'none' : `1px solid ${theme.palette.divider}`,\n      }}\n    >\n      <Typography variant=\"body1\" color=\"text.secondary\" component=\"span\" sx={{ flex: '0 0 auto' }}>\n        {row.label}\n      </Typography>\n      <Typography\n        variant=\"body1\"\n        component=\"span\"\n        sx={{\n          minWidth: 0,\n          textAlign: 'right',\n          fontWeight: row.tone ? 700 : 500,\n          color: row.tone ? accentFor(theme, row.tone).main : 'text.primary',\n          // Newlines in a value are meaningful — an address is two lines.\n          whiteSpace: 'pre-line',\n        }}\n      >\n        {row.value}\n      </Typography>\n    </Box>\n  );\n};\n\n/** The rows plus whatever the caller put under them. */\nconst DetailsBody: React.FC<\n  Pick<AppHeaderDetailsProps, 'rows' | 'children'> & { dataTestId: string }\n> = ({ rows, children, dataTestId }) => (\n  <Box data-testid={`${dataTestId}-body`}>\n    {(rows ?? []).map((row, index) => (\n      <DetailRow\n        key={row.id ?? row.label}\n        row={row}\n        last={index === (rows?.length ?? 0) - 1 && !children}\n        dataTestId={dataTestId}\n      />\n    ))}\n    {children}\n  </Box>\n);\n\n/**\n * The single full-width call to action, or nothing.\n *\n * `padded` is for the dialog, which has no footer slot of its own — and the\n * padding lives here rather than at the call site so an action-less panel does\n * not end in a strip of empty space.\n */\nconst DetailsAction: React.FC<{\n  action?: AppHeaderDetailsAction;\n  dataTestId: string;\n  padded?: boolean;\n}> = ({ action, dataTestId, padded = false }) =>\n  action ? (\n    <Box sx={padded ? { pt: 2 } : undefined}>\n      <Button\n        variant=\"solid\"\n        color={action.color ?? 'primary'}\n        size=\"lg\"\n        fullWidth\n        disabled={action.disabled}\n        onClick={action.onClick}\n        dataTestId={action.dataTestId ?? `${dataTestId}-action`}\n      >\n        {action.label}\n      </Button>\n    </Box>\n  ) : null;\n\n/**\n * The panel behind the header's disclosure — the hours, the address, the way\n * out — in the shape the viewport calls for.\n *\n * ONE component with two presentations, because they are one thing to the user\n * and one thing to the caller: a bottom sheet within reach of a thumb, a centred\n * dialog under a pointer. `auto` picks by viewport, so nobody writes that branch\n * at a call site and nobody ships a phone-shaped sheet stretched across a\n * desktop. Force either one with `presentation` when the surrounding layout\n * already decides (a preview frame, a story, a kiosk).\n */\nexport const AppHeaderDetails: React.FC<AppHeaderDetailsProps> = ({\n  open,\n  onClose,\n  title,\n  subtitle,\n  rows,\n  children,\n  action,\n  presentation = 'auto',\n  breakpoint = 'sm',\n  className,\n  dataTestId = 'app-header-details',\n}) => {\n  const theme = useTheme();\n  const asSheet = usesSheet(presentation, useMediaQuery(theme.breakpoints.down(breakpoint)));\n  const xxs = useMediaQuery(xxsQuery(theme));\n\n  // Split once, not per branch: a STRING subtitle is the panel's own\n  // `description` (both surfaces style it as part of their header), anything\n  // richer is a node we render ourselves above the rows.\n  const description = typeof subtitle === 'string' ? subtitle : undefined;\n  const richSubtitle = description === undefined ? subtitle : null;\n\n  const body = (\n    <DetailsBody rows={rows} dataTestId={dataTestId}>\n      {children}\n    </DetailsBody>\n  );\n  const footer = <DetailsAction action={action} dataTestId={dataTestId} />;\n\n  if (asSheet) {\n    // No `showHandle`. The grab bar promises a drag this panel does not answer:\n    // its height is its content's, so there is no second position to drag it\n    // to, and the handle sat above a ✕ that already closes it. Swipe-to-dismiss\n    // is `Sheet`'s default and still works — it just stops being advertised by\n    // a control that looked resizable and was not.\n    return (\n      <Sheet\n        open={open}\n        onClose={onClose}\n        onOpenChange={(next) => !next && onClose()}\n        position=\"bottom\"\n        size=\"md\"\n        style={sheetHeight(xxs)}\n        className={className}\n        title={title}\n        description={description}\n        showCloseButton\n        rounded\n        footer={footer}\n        dataTestId={dataTestId}\n      >\n        {richSubtitle}\n        {body}\n      </Sheet>\n    );\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onClose={onClose}\n      title={title}\n      description={description}\n      showCloseButton\n      fullWidth\n      className={className}\n      dataTestId={dataTestId}\n      PaperProps={{ sx: { maxWidth: DIALOG_WIDTH, borderRadius: 3 } }}\n    >\n      {richSubtitle}\n      {body}\n      <DetailsAction action={action} dataTestId={dataTestId} padded />\n    </Dialog>\n  );\n};\n\nAppHeaderDetails.displayName = 'AppHeaderDetails';\n"],"mappings":"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","names":[]}

package/dist/{chunk-CZBND7AY.js → chunk-T7DE44SP.js}

@@ -5,7 +5,7 @@ import {
 } from "./chunk-HCT5ELST.js";
 import {
   Skeleton
-} from "./chunk-7F7TTOYN.js";
+} from "./chunk-BEGTLELZ.js";
 import {
   sheen
 } from "./chunk-FQ6UW7IY.js";
@@ -215,4 +215,4 @@ LazyImage.displayName = "LazyImage";
 export {
   LazyImage
 };
-//# sourceMappingURL=chunk-CZBND7AY.js.map
+//# sourceMappingURL=chunk-T7DE44SP.js.map

package/dist/{chunk-DB2ZFZVW.js → chunk-TKC6WHGB.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-DVAAUWTC.js";
 import {
   FleetRoster
-} from "./chunk-E7T3A4IR.js";
+} from "./chunk-5JCGBCFJ.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -79,4 +79,4 @@ function FleetBody({
 export {
   FleetBody
 };
-//# sourceMappingURL=chunk-DB2ZFZVW.js.map
+//# sourceMappingURL=chunk-TKC6WHGB.js.map