@12-apps/ui 6.37.0 → 6.39.0

package/dist/{chunk-JXUWWPZR.js → chunk-VQYR64QB.js}

@@ -1,3 +1,7 @@
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
 // src/components/feedback/Toast/Toast.tsx
 import SuccessIcon from "@mui/icons-material/CheckCircle";
 import CloseIcon from "@mui/icons-material/Close";
@@ -81,7 +85,7 @@ var useToast = () => {
   }
   return context;
 };
-var renderVariantIcon = (variant) => {
+var renderVariantIcon = (theme, variant) => {
   switch (variant) {
     case "success":
       return /* @__PURE__ */ jsx(SuccessIcon, {});
@@ -92,7 +96,7 @@ var renderVariantIcon = (variant) => {
     case "info":
       return /* @__PURE__ */ jsx(InfoIcon, {});
     case "promise":
-      return /* @__PURE__ */ jsx(CircularProgress, { size: 20 });
+      return /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 20) });
     default:
       return null;
   }
@@ -109,7 +113,7 @@ var buildToastStyles = (theme, glass) => {
     return {
       ...baseStyles,
       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)}`
     };
   }
@@ -135,7 +139,7 @@ var Toast = ({
     Alert,
     {
       "data-testid": dataTestId,
-      icon: renderVariantIcon(variant),
+      icon: renderVariantIcon(theme, variant),
       severity: toAlertSeverity(variant),
       onClose: closable ? handleClose : void 0,
       action: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
@@ -169,10 +173,11 @@ var Toast = ({
 var ToastContainer = ({
   position = "top-right",
   maxToasts = 5,
-  gap = 8,
+  gap,
   className,
   dataTestId = "toast-container"
 }) => {
+  const theme = useTheme();
   const context = useContext(ToastContext);
   if (!context) {
     throw new Error("ToastContainer must be used within a ToastProvider");
@@ -184,8 +189,9 @@ var ToastContainer = ({
       zIndex: 9999,
       display: "flex",
       flexDirection: "column",
-      gap: `${gap}px`,
-      padding: "16px",
+      // `gap` is design px (default 8), read through the type scale.
+      gap: rem(theme, gap ?? 8),
+      padding: rem(theme, 16),
       pointerEvents: "none"
     };
     switch (position) {
@@ -230,4 +236,4 @@ export {
   Toast,
   ToastContainer
 };
-//# sourceMappingURL=chunk-JXUWWPZR.js.map
+//# sourceMappingURL=chunk-VQYR64QB.js.map

package/dist/chunk-VQYR64QB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Toast/Toast.tsx"],"sourcesContent":["import SuccessIcon from '@mui/icons-material/CheckCircle';\nimport CloseIcon from '@mui/icons-material/Close';\nimport ErrorIcon from '@mui/icons-material/Error';\nimport InfoIcon from '@mui/icons-material/Info';\nimport WarningIcon from '@mui/icons-material/Warning';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport Alert from '@mui/material/Alert/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Portal from '@mui/material/Portal/index.js';\nimport Slide from '@mui/material/Slide/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport React, { createContext, useCallback,useContext, useState } from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nimport type { ToastContainerProps, ToastContextType, ToastItem,ToastProps } from './Toast.types';\n\nconst ToastContext = createContext<ToastContextType | null>(null);\n\ntype PromiseToastOptions<T> = {\n  loading: string;\n  success: string | ((data: T) => string);\n  error: string | ((error: unknown) => string);\n};\n\n// success/error may be a literal or a formatter over the settled value.\nconst resolveToastMessage = <T,>(message: string | ((value: T) => string), value: T): string =>\n  typeof message === 'function' ? message(value) : message;\n\n// Shows a persistent \"loading\" toast for the life of a promise, then swaps it\n// for a success or error one. Lives outside the provider so the provider body\n// stays readable; it takes add/remove rather than reaching for context.\nconst trackPromiseWithToasts = async <T,>(\n  promiseToResolve: Promise<T>,\n  options: PromiseToastOptions<T>,\n  addToast: (toast: Omit<ToastProps, 'id'>) => string,\n  removeToast: (id: string) => void,\n): Promise<T> => {\n  const toastId = addToast({\n    message: options.loading,\n    variant: 'promise',\n    persistent: true,\n  });\n\n  try {\n    const data = await promiseToResolve;\n\n    removeToast(toastId);\n    addToast({ message: resolveToastMessage(options.success, data), variant: 'success' });\n\n    return data;\n  } catch (error) {\n    removeToast(toastId);\n    addToast({ message: resolveToastMessage(options.error, error), variant: 'error' });\n\n    throw error;\n  }\n};\n\nexport const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n\n  const removeToast = useCallback((id: string) => {\n    setToasts((prev) => prev.filter((toast) => toast.id !== id));\n  }, []);\n\n  const addToast = useCallback(\n    (toast: Omit<ToastProps, 'id'>): string => {\n      const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n      const newToast: ToastItem = {\n        ...toast,\n        id,\n        timestamp: Date.now(),\n      };\n\n      setToasts((prev) => [...prev, newToast]);\n\n      if (!toast.persistent && toast.duration !== 0) {\n        const duration = toast.duration ?? 5000;\n        window.setTimeout(() => {\n          removeToast(id);\n        }, duration);\n      }\n\n      return id;\n    },\n    [removeToast],\n  );\n\n  const clearAllToasts = useCallback(() => {\n    setToasts([]);\n  }, []);\n\n  const promise = useCallback(\n    <T,>(promiseToResolve: Promise<T>, options: PromiseToastOptions<T>): Promise<T> =>\n      trackPromiseWithToasts(promiseToResolve, options, addToast, removeToast),\n    [addToast, removeToast],\n  );\n\n  const contextValue: ToastContextType = {\n    toasts,\n    addToast,\n    removeToast,\n    clearAllToasts,\n    promise,\n  };\n\n  return <ToastContext.Provider value={contextValue}>{children}</ToastContext.Provider>;\n};\n\nexport const useToast = (): ToastContextType => {\n  const context = useContext(ToastContext);\n  if (!context) {\n    throw new Error('useToast must be used within a ToastProvider');\n  }\n  return context;\n};\n\nconst renderVariantIcon = (theme: Theme, variant: ToastProps['variant']) => {\n  switch (variant) {\n    case 'success':\n      return <SuccessIcon />;\n    case 'error':\n      return <ErrorIcon />;\n    case 'warning':\n      return <WarningIcon />;\n    case 'info':\n      return <InfoIcon />;\n    case 'promise':\n      return <CircularProgress size={rem(theme, 20)} />;\n    default:\n      return null;\n  }\n};\n\n// 'default' and 'promise' have no MUI severity of their own; both read as info.\nconst toAlertSeverity = (variant: ToastProps['variant']) =>\n  variant === 'default' || variant === 'promise' ? 'info' : variant;\n\nconst buildToastStyles = (theme: Theme, glass: boolean) => {\n  const baseStyles = {\n    borderRadius: theme.spacing(1.5),\n    transition: theme.transitions.create(['background-color', 'backdrop-filter'], {\n      duration: theme.transitions.duration.standard,\n    }),\n  };\n\n  if (glass) {\n    return {\n      ...baseStyles,\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    };\n  }\n\n  return baseStyles;\n};\n\nexport const Toast: React.FC<ToastProps> = ({\n  id = '',\n  message,\n  variant = 'default',\n  closable = true,\n  action,\n  glass = false,\n  onClose,\n  dataTestId = 'toast',\n}) => {\n  const theme = useTheme();\n\n  const handleClose = () => {\n    if (onClose && id) {\n      onClose(id);\n    }\n  };\n\n  return (\n    <Alert\n      data-testid={dataTestId}\n      icon={renderVariantIcon(theme, variant)}\n      severity={toAlertSeverity(variant)}\n      onClose={closable ? handleClose : undefined}\n      action={\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n          {action && (\n            <Button\n              data-testid={`${dataTestId}-action`}\n              color=\"inherit\"\n              size=\"small\"\n              onClick={action.onClick}\n            >\n              {action.label}\n            </Button>\n          )}\n          {closable && (\n            <IconButton\n              data-testid={`${dataTestId}-close`}\n              aria-label=\"close\"\n              color=\"inherit\"\n              size=\"small\"\n              onClick={handleClose}\n            >\n              <CloseIcon fontSize=\"small\" />\n            </IconButton>\n          )}\n        </Box>\n      }\n      sx={buildToastStyles(theme, glass)}\n    >\n      <Typography data-testid={`${dataTestId}-message`} variant=\"body2\">{message}</Typography>\n    </Alert>\n  );\n};\n\nexport const ToastContainer: React.FC<ToastContainerProps> = ({\n  position = 'top-right',\n  maxToasts = 5,\n  gap,\n  className,\n  dataTestId = 'toast-container',\n}) => {\n  const theme = useTheme();\n  const context = useContext(ToastContext);\n  \n  if (!context) {\n    throw new Error('ToastContainer must be used within a ToastProvider');\n  }\n\n  const { toasts, removeToast } = context;\n\n  const getPositionStyles = (): React.CSSProperties => {\n    const baseStyles: React.CSSProperties = {\n      position: 'fixed',\n      zIndex: 9999,\n      display: 'flex',\n      flexDirection: 'column',\n      // `gap` is design px (default 8), read through the type scale.\n      gap: rem(theme, gap ?? 8),\n      padding: rem(theme, 16),\n      pointerEvents: 'none',\n    };\n\n    switch (position) {\n      case 'top-left':\n        return { ...baseStyles, top: 0, left: 0 };\n      case 'top-center':\n        return { ...baseStyles, top: 0, left: '50%', transform: 'translateX(-50%)' };\n      case 'top-right':\n        return { ...baseStyles, top: 0, right: 0 };\n      case 'bottom-left':\n        return { ...baseStyles, bottom: 0, left: 0, flexDirection: 'column-reverse' };\n      case 'bottom-center':\n        return {\n          ...baseStyles,\n          bottom: 0,\n          left: '50%',\n          transform: 'translateX(-50%)',\n          flexDirection: 'column-reverse',\n        };\n      case 'bottom-right':\n        return { ...baseStyles, bottom: 0, right: 0, flexDirection: 'column-reverse' };\n      default:\n        return { ...baseStyles, top: 0, right: 0 };\n    }\n  };\n\n  return (\n    <Portal>\n      <Box data-testid={dataTestId} className={className} sx={getPositionStyles()}>\n        {toasts.slice(0, maxToasts).map((toast, index) => (\n          <Slide\n            key={toast.id}\n            direction={position.includes('left') ? 'right' : 'left'}\n            in={true}\n            timeout={300}\n            style={{ pointerEvents: 'auto' }}\n          >\n            <Box data-testid={`${dataTestId}-item-${index}`}>\n              <Toast {...toast} onClose={removeToast} dataTestId={toast.dataTestId || `toast-${index}`} />\n            </Box>\n          </Slide>\n        ))}\n      </Box>\n    </Portal>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,iBAAiB;AACxB,OAAO,eAAe;AACtB,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,iBAAiB;AAExB,OAAO,WAAW;AAClB,OAAO,SAAS;AAChB,OAAO,YAAY;AACnB,OAAO,sBAAsB;AAC7B,OAAO,gBAAgB;AACvB,OAAO,YAAY;AACnB,OAAO,WAAW;AAClB,OAAO,gBAAgB;AACvB,SAAS,OAAO,gBAAgB;AAChC,SAAgB,eAAe,aAAY,YAAY,gBAAgB;AAgG9D,cA6ED,YA7EC;AA1FT,IAAM,eAAe,cAAuC,IAAI;AAShE,IAAM,sBAAsB,CAAK,SAA0C,UACzE,OAAO,YAAY,aAAa,QAAQ,KAAK,IAAI;AAKnD,IAAM,yBAAyB,OAC7B,kBACA,SACA,UACA,gBACe;AACf,QAAM,UAAU,SAAS;AAAA,IACvB,SAAS,QAAQ;AAAA,IACjB,SAAS;AAAA,IACT,YAAY;AAAA,EACd,CAAC;AAED,MAAI;AACF,UAAM,OAAO,MAAM;AAEnB,gBAAY,OAAO;AACnB,aAAS,EAAE,SAAS,oBAAoB,QAAQ,SAAS,IAAI,GAAG,SAAS,UAAU,CAAC;AAEpF,WAAO;AAAA,EACT,SAAS,OAAO;AACd,gBAAY,OAAO;AACnB,aAAS,EAAE,SAAS,oBAAoB,QAAQ,OAAO,KAAK,GAAG,SAAS,QAAQ,CAAC;AAEjF,UAAM;AAAA,EACR;AACF;AAEO,IAAM,gBAAyD,CAAC,EAAE,SAAS,MAAM;AACtF,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAsB,CAAC,CAAC;AAEpD,QAAM,cAAc,YAAY,CAAC,OAAe;AAC9C,cAAU,CAAC,SAAS,KAAK,OAAO,CAAC,UAAU,MAAM,OAAO,EAAE,CAAC;AAAA,EAC7D,GAAG,CAAC,CAAC;AAEL,QAAM,WAAW;AAAA,IACf,CAAC,UAA0C;AACzC,YAAM,KAAK,SAAS,KAAK,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,OAAO,GAAG,CAAC,CAAC;AACzE,YAAM,WAAsB;AAAA,QAC1B,GAAG;AAAA,QACH;AAAA,QACA,WAAW,KAAK,IAAI;AAAA,MACtB;AAEA,gBAAU,CAAC,SAAS,CAAC,GAAG,MAAM,QAAQ,CAAC;AAEvC,UAAI,CAAC,MAAM,cAAc,MAAM,aAAa,GAAG;AAC7C,cAAM,WAAW,MAAM,YAAY;AACnC,eAAO,WAAW,MAAM;AACtB,sBAAY,EAAE;AAAA,QAChB,GAAG,QAAQ;AAAA,MACb;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,iBAAiB,YAAY,MAAM;AACvC,cAAU,CAAC,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU;AAAA,IACd,CAAK,kBAA8B,YACjC,uBAAuB,kBAAkB,SAAS,UAAU,WAAW;AAAA,IACzE,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,eAAiC;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO,oBAAC,aAAa,UAAb,EAAsB,OAAO,cAAe,UAAS;AAC/D;AAEO,IAAM,WAAW,MAAwB;AAC9C,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,8CAA8C;AAAA,EAChE;AACA,SAAO;AACT;AAEA,IAAM,oBAAoB,CAAC,OAAc,YAAmC;AAC1E,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,oBAAC,eAAY;AAAA,IACtB,KAAK;AACH,aAAO,oBAAC,aAAU;AAAA,IACpB,KAAK;AACH,aAAO,oBAAC,eAAY;AAAA,IACtB,KAAK;AACH,aAAO,oBAAC,YAAS;AAAA,IACnB,KAAK;AACH,aAAO,oBAAC,oBAAiB,MAAM,IAAI,OAAO,EAAE,GAAG;AAAA,IACjD;AACE,aAAO;AAAA,EACX;AACF;AAGA,IAAM,kBAAkB,CAAC,YACvB,YAAY,aAAa,YAAY,YAAY,SAAS;AAE5D,IAAM,mBAAmB,CAAC,OAAc,UAAmB;AACzD,QAAM,aAAa;AAAA,IACjB,cAAc,MAAM,QAAQ,GAAG;AAAA,IAC/B,YAAY,MAAM,YAAY,OAAO,CAAC,oBAAoB,iBAAiB,GAAG;AAAA,MAC5E,UAAU,MAAM,YAAY,SAAS;AAAA,IACvC,CAAC;AAAA,EACH;AAEA,MAAI,OAAO;AACT,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,MAC1D,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,MACtC,QAAQ,aAAa,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,CAAC;AAAA,IAC7D;AAAA,EACF;AAEA,SAAO;AACT;AAEO,IAAM,QAA8B,CAAC;AAAA,EAC1C,KAAK;AAAA,EACL;AAAA,EACA,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,aAAa;AACf,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,QAAM,cAAc,MAAM;AACxB,QAAI,WAAW,IAAI;AACjB,cAAQ,EAAE;AAAA,IACZ;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,MAAM,kBAAkB,OAAO,OAAO;AAAA,MACtC,UAAU,gBAAgB,OAAO;AAAA,MACjC,SAAS,WAAW,cAAc;AAAA,MAClC,QACE,qBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAE,GACtD;AAAA,kBACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,GAAG,UAAU;AAAA,YAC1B,OAAM;AAAA,YACN,MAAK;AAAA,YACL,SAAS,OAAO;AAAA,YAEf,iBAAO;AAAA;AAAA,QACV;AAAA,QAED,YACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAa,GAAG,UAAU;AAAA,YAC1B,cAAW;AAAA,YACX,OAAM;AAAA,YACN,MAAK;AAAA,YACL,SAAS;AAAA,YAET,8BAAC,aAAU,UAAS,SAAQ;AAAA;AAAA,QAC9B;AAAA,SAEJ;AAAA,MAEF,IAAI,iBAAiB,OAAO,KAAK;AAAA,MAEjC,8BAAC,cAAW,eAAa,GAAG,UAAU,YAAY,SAAQ,SAAS,mBAAQ;AAAA;AAAA,EAC7E;AAEJ;AAEO,IAAM,iBAAgD,CAAC;AAAA,EAC5D,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,UAAU,WAAW,YAAY;AAEvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AAEA,QAAM,EAAE,QAAQ,YAAY,IAAI;AAEhC,QAAM,oBAAoB,MAA2B;AACnD,UAAM,aAAkC;AAAA,MACtC,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,eAAe;AAAA;AAAA,MAEf,KAAK,IAAI,OAAO,OAAO,CAAC;AAAA,MACxB,SAAS,IAAI,OAAO,EAAE;AAAA,MACtB,eAAe;AAAA,IACjB;AAEA,YAAQ,UAAU;AAAA,MAChB,KAAK;AACH,eAAO,EAAE,GAAG,YAAY,KAAK,GAAG,MAAM,EAAE;AAAA,MAC1C,KAAK;AACH,eAAO,EAAE,GAAG,YAAY,KAAK,GAAG,MAAM,OAAO,WAAW,mBAAmB;AAAA,MAC7E,KAAK;AACH,eAAO,EAAE,GAAG,YAAY,KAAK,GAAG,OAAO,EAAE;AAAA,MAC3C,KAAK;AACH,eAAO,EAAE,GAAG,YAAY,QAAQ,GAAG,MAAM,GAAG,eAAe,iBAAiB;AAAA,MAC9E,KAAK;AACH,eAAO;AAAA,UACL,GAAG;AAAA,UACH,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,WAAW;AAAA,UACX,eAAe;AAAA,QACjB;AAAA,MACF,KAAK;AACH,eAAO,EAAE,GAAG,YAAY,QAAQ,GAAG,OAAO,GAAG,eAAe,iBAAiB;AAAA,MAC/E;AACE,eAAO,EAAE,GAAG,YAAY,KAAK,GAAG,OAAO,EAAE;AAAA,IAC7C;AAAA,EACF;AAEA,SACE,oBAAC,UACC,8BAAC,OAAI,eAAa,YAAY,WAAsB,IAAI,kBAAkB,GACvE,iBAAO,MAAM,GAAG,SAAS,EAAE,IAAI,CAAC,OAAO,UACtC;AAAA,IAAC;AAAA;AAAA,MAEC,WAAW,SAAS,SAAS,MAAM,IAAI,UAAU;AAAA,MACjD,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,OAAO,EAAE,eAAe,OAAO;AAAA,MAE/B,8BAAC,OAAI,eAAa,GAAG,UAAU,SAAS,KAAK,IAC3C,8BAAC,SAAO,GAAG,OAAO,SAAS,aAAa,YAAY,MAAM,cAAc,SAAS,KAAK,IAAI,GAC5F;AAAA;AAAA,IARK,MAAM;AAAA,EASb,CACD,GACH,GACF;AAEJ;","names":[]}

package/dist/{chunk-72DKEBJM.js → chunk-VRPREI27.js}

@@ -38,7 +38,7 @@ function ViewSelector({
   const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0];
   const ActiveIcon = activeOption.icon;
   return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
-    viewMode === "grid" && /* @__PURE__ */ jsx(Box, { sx: { width: 96, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+    viewMode === "grid" && /* @__PURE__ */ jsx(Box, { sx: { width: sxRem(96), display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
       Slider,
       {
         "data-testid": "resize-card-slider",
@@ -77,7 +77,7 @@ function ViewSelector({
         onClose: () => setAnchorEl(null),
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
-        slotProps: { paper: { sx: { minWidth: 180 } } },
+        slotProps: { paper: { sx: { minWidth: sxRem(180) } } },
         children: VIEW_OPTIONS.map((option) => {
           const OptionIcon = option.icon;
           const selected = viewMode === option.value;
@@ -107,4 +107,4 @@ function ViewSelector({
 export {
   ViewSelector
 };
-//# sourceMappingURL=chunk-72DKEBJM.js.map
+//# sourceMappingURL=chunk-VRPREI27.js.map

package/dist/chunk-VRPREI27.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ContentToolbar/ViewSelector.tsx"],"sourcesContent":["'use client';\n\nimport CheckIcon from '@mui/icons-material/Check';\nimport ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport GridIcon from '@mui/icons-material/GridViewOutlined';\nimport ListIcon from '@mui/icons-material/FormatListBulletedRounded';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/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 Slider from '@mui/material/Slider/index.js';\n// `SvgIconComponent` is declared inline in @mui/icons-material's barrel and has\n// no module of its own, so the deep-import equivalent is its own definition:\n// `type SvgIconComponent = typeof SvgIcon`.\nimport type SvgIcon from '@mui/material/SvgIcon/index.js';\nimport React, { useState } from 'react';\n\nimport type { ViewMode, ViewSelectorProps } from './ContentToolbar.types';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { fieldHeight } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\n\nconst VIEW_OPTIONS: { value: ViewMode; label: string; icon: typeof SvgIcon }[] = [\n  { value: 'grid', label: 'Grid View', icon: GridIcon },\n  { value: 'list', label: 'List View', icon: ListIcon },\n];\n\n/**\n * View selector: a grid/list dropdown plus a card-size zoom slider (grid mode\n * only). Faithful MUI port of the reference toolbar's view control.\n */\nexport function ViewSelector({\n  viewMode,\n  onViewModeChange,\n  zoom,\n  onZoomChange,\n  cardSizeLabel,\n}: ViewSelectorProps): React.JSX.Element {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n  const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0]!;\n  const ActiveIcon = activeOption.icon;\n\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>\n      {viewMode === 'grid' && (\n        <Box sx={{ width: sxRem(96), display: 'flex', alignItems: 'center' }}>\n          <Slider\n            data-testid=\"resize-card-slider\"\n            aria-label={cardSizeLabel}\n            value={zoom[0] ?? 0}\n            onChange={(_, value) => onZoomChange([value as number])}\n            min={0}\n            max={100}\n            step={1}\n            size=\"small\"\n          />\n        </Box>\n      )}\n\n      <Button\n        data-testid=\"view-mode-btn\"\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        aria-label={activeOption.label}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={(event) => setAnchorEl(event.currentTarget)}\n        sx={{ minWidth: 0, height: fieldHeight, px: 1, gap: 1, borderRadius: fieldRadiusPx, color: 'text.secondary' }}\n      >\n        <ActiveIcon sx={{ fontSize: sxRem(16) }} />\n        <ChevronDownIcon sx={{ fontSize: sxRem(14) }} />\n      </Button>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={() => setAnchorEl(null)}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        slotProps={{ paper: { sx: { minWidth: sxRem(180) } } }}\n      >\n        {VIEW_OPTIONS.map((option) => {\n          const OptionIcon = option.icon;\n          const selected = viewMode === option.value;\n          return (\n            <MenuItem\n              key={option.value}\n              data-testid={`view-mode-${option.value}`}\n              onClick={() => {\n                onViewModeChange(option.value);\n                setAnchorEl(null);\n              }}\n              sx={{ gap: 1.5 }}\n            >\n              <ListItemText>{option.label}</ListItemText>\n              <OptionIcon sx={{ fontSize: sxRem(16), color: 'text.secondary' }} />\n              <ListItemIcon sx={{ minWidth: 'auto !important' }}>\n                <CheckIcon sx={{ fontSize: sxRem(16), color: selected ? 'text.primary' : 'transparent' }} />\n              </ListItemIcon>\n            </MenuItem>\n          );\n        })}\n      </Menu>\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-N6CSXHFJ.js → chunk-WN5PNP6F.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-FKUYRQSP.js";
 import {
   cardStyles
-} from "./chunk-LVEG6XQL.js";
+} from "./chunk-76X6JRVI.js";
 import {
   CARD_CONTENT_PADDING_UNITS,
   CARD_HEADER_CHILDREN_PADDING_UNITS,
@@ -191,4 +191,4 @@ export {
   CardActions,
   CardMedia
 };
-//# sourceMappingURL=chunk-N6CSXHFJ.js.map
+//# sourceMappingURL=chunk-WN5PNP6F.js.map

package/dist/{chunk-6QLPSMTA.js → chunk-XEWMY4ZM.js}

@@ -17,62 +17,63 @@ import {
   swingAnimation,
   translateAnimation,
   wobbleAnimation
-} from "./chunk-3T5Z5HXF.js";
+} from "./chunk-KM3Y5TCG.js";
 import {
   neutralTones,
   shadowInk,
   sheen
 } from "./chunk-FQ6UW7IY.js";
 import {
-  rem
+  rem,
+  rems
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/utility/AnimatedIcon/AnimatedIcon.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
 var sizeConfigs = {
-  xs: { size: 12, glyph: 10 },
-  sm: { size: 24, glyph: 20 },
-  md: { size: 32, glyph: 28 },
-  lg: { size: 48, glyph: 44 },
-  xl: { size: 64, glyph: 60 }
+  xs: { ring: 12, glyph: 10 },
+  sm: { ring: 24, glyph: 20 },
+  md: { ring: 32, glyph: 28 },
+  lg: { ring: 48, glyph: 44 },
+  xl: { ring: 64, glyph: 60 }
 };
 var ANIMATIONS = {
-  rotate: { keyframes: `${rotateAnimation}`, easing: "linear", scale: 1 },
-  pulse: { keyframes: `${pulseAnimation}`, easing: "ease-in-out", scale: 1 },
-  translate: { keyframes: `${translateAnimation}`, easing: "ease-in-out", scale: 1 },
-  bounce: { keyframes: `${bounceAnimation}`, easing: "ease-in-out", scale: 1 },
-  shake: { keyframes: `${shakeAnimation}`, easing: "ease-in-out", scale: 1 },
-  flip: { keyframes: `${flipAnimation}`, easing: "ease-in-out", scale: 1 },
-  spin: { keyframes: `${spinAnimation}`, easing: "ease-in-out", scale: 1 },
-  fadeInOut: { keyframes: `${fadeInOutAnimation}`, easing: "ease-in-out", scale: 1 },
-  heartbeat: { keyframes: `${heartbeatAnimation}`, easing: "ease-in-out", scale: 1 },
-  wobble: { keyframes: `${wobbleAnimation}`, easing: "ease-in-out", scale: 1 },
-  morph: { keyframes: `${morphAnimation}`, easing: "ease-in-out", scale: 1 },
-  swing: { keyframes: `${swingAnimation}`, easing: "ease-in-out", scale: 1 },
-  jello: { keyframes: `${jelloAnimation}`, easing: "ease-in-out", scale: 1 },
-  float: { keyframes: `${floatAnimation}`, easing: "ease-in-out", scale: 2 },
-  neonFlicker: { keyframes: `${neonFlickerAnimation}`, easing: "ease-in-out", scale: 2 },
-  breathe: { keyframes: `${breatheAnimation}`, easing: "ease-in-out", scale: 1.5 }
+  rotate: { keyframes: () => `${rotateAnimation}`, easing: "linear", scale: 1 },
+  pulse: { keyframes: () => `${pulseAnimation}`, easing: "ease-in-out", scale: 1 },
+  translate: { keyframes: (theme) => `${translateAnimation(theme)}`, easing: "ease-in-out", scale: 1 },
+  bounce: { keyframes: (theme) => `${bounceAnimation(theme)}`, easing: "ease-in-out", scale: 1 },
+  shake: { keyframes: (theme) => `${shakeAnimation(theme)}`, easing: "ease-in-out", scale: 1 },
+  flip: { keyframes: (theme) => `${flipAnimation(theme)}`, easing: "ease-in-out", scale: 1 },
+  spin: { keyframes: () => `${spinAnimation}`, easing: "ease-in-out", scale: 1 },
+  fadeInOut: { keyframes: () => `${fadeInOutAnimation}`, easing: "ease-in-out", scale: 1 },
+  heartbeat: { keyframes: () => `${heartbeatAnimation}`, easing: "ease-in-out", scale: 1 },
+  wobble: { keyframes: (theme) => `${wobbleAnimation(theme)}`, easing: "ease-in-out", scale: 1 },
+  morph: { keyframes: () => `${morphAnimation}`, easing: "ease-in-out", scale: 1 },
+  swing: { keyframes: () => `${swingAnimation}`, easing: "ease-in-out", scale: 1 },
+  jello: { keyframes: () => `${jelloAnimation}`, easing: "ease-in-out", scale: 1 },
+  float: { keyframes: (theme) => `${floatAnimation(theme)}`, easing: "ease-in-out", scale: 2 },
+  neonFlicker: { keyframes: (theme) => `${neonFlickerAnimation(theme)}`, easing: "ease-in-out", scale: 2 },
+  breathe: { keyframes: () => `${breatheAnimation}`, easing: "ease-in-out", scale: 1.5 }
 };
-var animationFor = (variant, duration, delay, loop) => {
+var animationFor = (theme, variant, duration, delay, loop) => {
   const spec = ANIMATIONS[variant];
   if (!spec) return "none";
   const iterationCount = loop ? "infinite" : "1";
-  return `${spec.keyframes} ${duration * spec.scale}s ${spec.easing} ${iterationCount} ${delay > 0 ? `${delay}s` : "0s"}`;
+  return `${spec.keyframes(theme)} ${duration * spec.scale}s ${spec.easing} ${iterationCount} ${delay > 0 ? `${delay}s` : "0s"}`;
 };
 var SHADOWS = {
-  soft: (theme) => `0 4px 20px ${shadowInk(theme, 0.15)}`,
-  hard: (theme) => `4px 4px 0px ${shadowInk(theme, 0.25)}`,
-  elevated: (theme) => `0 10px 40px ${shadowInk(theme, 0.2)}, 0 2px 10px ${shadowInk(theme, 0.1)}`
+  soft: (theme) => `0 ${rems(theme, 4, 20)} ${shadowInk(theme, 0.15)}`,
+  hard: (theme) => `${rems(theme, 4, 4)} 0px ${shadowInk(theme, 0.25)}`,
+  elevated: (theme) => `0 ${rems(theme, 10, 40)} ${shadowInk(theme, 0.2)}, 0 ${rems(theme, 2, 10)} ${shadowInk(theme, 0.1)}`
 };
 var effectStyles = (theme, flags, animation, color) => {
   const { $glass, $metallic, $gradient, $neon, $holographic } = flags;
   return {
     ...$glass && {
       background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.2)}, ${alpha(theme.palette.background.paper, 0.1)})`,
-      backdropFilter: "blur(10px)",
+      backdropFilter: `blur(${rem(theme, 10)})`,
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-      boxShadow: `inset 0 1px 1px ${sheen(theme, 0.3)}, 0 8px 32px ${shadowInk(theme, 0.1)}`
+      boxShadow: `inset 0 ${rems(theme, 1, 1)} ${sheen(theme, 0.3)}, 0 ${rems(theme, 8, 32)} ${shadowInk(theme, 0.1)}`
     },
     ...$metallic && {
       background: `linear-gradient(145deg,
@@ -83,9 +84,9 @@ var effectStyles = (theme, flags, animation, color) => {
       ${neutralTones(theme).subtle} 100%)`,
       backgroundSize: "200% 200%",
       animation: `${animation}, ${breatheAnimation} 4s ease-in-out infinite`,
-      boxShadow: `inset 0 2px 4px ${sheen(theme, 0.5)},
-                inset 0 -2px 4px ${shadowInk(theme, 0.3)},
-                0 4px 8px ${shadowInk(theme, 0.2)}`
+      boxShadow: `inset 0 ${rems(theme, 2, 4)} ${sheen(theme, 0.5)},
+                inset 0 ${rems(theme, -2, 4)} ${shadowInk(theme, 0.3)},
+                0 ${rems(theme, 4, 8)} ${shadowInk(theme, 0.2)}`
     },
     ...$gradient && {
       background: `linear-gradient(135deg,
@@ -96,9 +97,9 @@ var effectStyles = (theme, flags, animation, color) => {
     },
     ...$neon && {
       color,
-      textShadow: `0 0 10px ${color}, 0 0 20px ${color}, 0 0 30px ${color}`,
+      textShadow: `0 0 ${rem(theme, 10)} ${color}, 0 0 ${rem(theme, 20)} ${color}, 0 0 ${rem(theme, 30)} ${color}`,
       filter: `brightness(1.2) contrast(1.2)`,
-      animation: `${animation}, ${neonFlickerAnimation} 3s ease-in-out infinite`
+      animation: `${animation}, ${neonFlickerAnimation(theme)} 3s ease-in-out infinite`
     },
     ...$holographic && {
       background: `linear-gradient(45deg,
@@ -108,7 +109,7 @@ var effectStyles = (theme, flags, animation, color) => {
       ${theme.palette.warning.main} 75%,
       ${theme.palette.primary.main} 100%)`,
       backgroundSize: "400% 400%",
-      animation: `${animation}, ${floatAnimation} 6s ease-in-out infinite`,
+      animation: `${animation}, ${floatAnimation(theme)} 6s ease-in-out infinite`,
       backgroundClip: "text",
       WebkitBackgroundClip: "text",
       WebkitTextFillColor: "transparent",
@@ -120,10 +121,10 @@ var effectStyles = (theme, flags, animation, color) => {
       "&::before": {
         content: '""',
         position: "absolute",
-        inset: -2,
+        inset: rem(theme, -2),
         borderRadius: "50%",
         background: "inherit",
-        filter: "blur(10px)",
+        filter: `blur(${rem(theme, 10)})`,
         opacity: 0.5,
         zIndex: -1
       }
@@ -147,14 +148,18 @@ var iconSx = (theme, flags) => {
   } = flags;
   const color = $customColor || theme.palette.primary.main;
   const glowColor = $glowColor || color;
-  const animation = animationFor($animationVariant, $duration, $delay, $loop);
-  const glyphSize = { fontSize: rem(theme, $fontSize), width: $fontSize, height: $fontSize };
+  const animation = animationFor(theme, $animationVariant, $duration, $delay, $loop);
+  const glyphSize = {
+    fontSize: rem(theme, $fontSize),
+    width: rem(theme, $fontSize),
+    height: rem(theme, $fontSize)
+  };
   return {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    width: $size,
-    height: $size,
+    width: rem(theme, $size),
+    height: rem(theme, $size),
     color,
     animation,
     position: "relative",
@@ -166,13 +171,13 @@ var iconSx = (theme, flags) => {
       "&::before": {
         content: '""',
         position: "absolute",
-        inset: -8,
+        inset: rem(theme, -8),
         borderRadius: "50%",
         background: `radial-gradient(circle, ${alpha(glowColor, 0.3)} 0%, transparent 70%)`,
-        animation: `${glowPulseAnimation} ${$duration * 1.2}s ease-in-out infinite`,
+        animation: `${glowPulseAnimation(theme)} ${$duration * 1.2}s ease-in-out infinite`,
         zIndex: -1
       },
-      filter: `drop-shadow(0 0 8px ${alpha(glowColor, 0.5)})`
+      filter: `drop-shadow(0 0 ${rem(theme, 8)} ${alpha(glowColor, 0.5)})`
     },
     ...effectStyles(theme, flags, animation, color),
     ...$ripple && {
@@ -181,7 +186,7 @@ var iconSx = (theme, flags) => {
         position: "absolute",
         inset: 0,
         borderRadius: "50%",
-        border: `2px solid ${color}`,
+        border: `${rem(theme, 2)} solid ${color}`,
         animation: `${rippleAnimation} ${$duration * 1.5}s ease-out infinite`
       }
     },
@@ -198,4 +203,4 @@ export {
   sizeConfigs,
   iconSx
 };
-//# sourceMappingURL=chunk-6QLPSMTA.js.map
+//# sourceMappingURL=chunk-XEWMY4ZM.js.map

package/dist/chunk-XEWMY4ZM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/AnimatedIcon/AnimatedIcon.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport {\n  bounceAnimation,\n  breatheAnimation,\n  fadeInOutAnimation,\n  flipAnimation,\n  floatAnimation,\n  glowPulseAnimation,\n  heartbeatAnimation,\n  jelloAnimation,\n  morphAnimation,\n  neonFlickerAnimation,\n  pulseAnimation,\n  rippleAnimation,\n  rotateAnimation,\n  shakeAnimation,\n  spinAnimation,\n  swingAnimation,\n  translateAnimation,\n  wobbleAnimation,\n} from './AnimatedIcon.animations';\nimport type { AnimationSize, AnimationVariant } from './AnimatedIcon.types';\nimport { neutralTones, shadowInk, sheen } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\n/** Per size: the ring's edge and the glyph's edge (its font size, width and height), in design px. */\nexport const sizeConfigs: Record<AnimationSize, { ring: number; glyph: number }> = {\n  xs: { ring: 12, glyph: 10 },\n  sm: { ring: 24, glyph: 20 },\n  md: { ring: 32, glyph: 28 },\n  lg: { ring: 48, glyph: 44 },\n  xl: { ring: 64, glyph: 60 },\n};\n\n/**\n * Every variant produces the same shorthand — keyframes, duration, easing,\n * iteration count, delay — so only the three things that actually differ are\n * tabulated. `scale` multiplies the caller's duration for the variants that\n * read as slower than the rest.\n */\nconst ANIMATIONS: Record<string, { keyframes: (theme: Theme) => string; easing: string; scale: number }> = {\n  rotate: { keyframes: () => `${rotateAnimation}`, easing: 'linear', scale: 1 },\n  pulse: { keyframes: () => `${pulseAnimation}`, easing: 'ease-in-out', scale: 1 },\n  translate: { keyframes: (theme) => `${translateAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },\n  bounce: { keyframes: (theme) => `${bounceAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },\n  shake: { keyframes: (theme) => `${shakeAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },\n  flip: { keyframes: (theme) => `${flipAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },\n  spin: { keyframes: () => `${spinAnimation}`, easing: 'ease-in-out', scale: 1 },\n  fadeInOut: { keyframes: () => `${fadeInOutAnimation}`, easing: 'ease-in-out', scale: 1 },\n  heartbeat: { keyframes: () => `${heartbeatAnimation}`, easing: 'ease-in-out', scale: 1 },\n  wobble: { keyframes: (theme) => `${wobbleAnimation(theme)}`, easing: 'ease-in-out', scale: 1 },\n  morph: { keyframes: () => `${morphAnimation}`, easing: 'ease-in-out', scale: 1 },\n  swing: { keyframes: () => `${swingAnimation}`, easing: 'ease-in-out', scale: 1 },\n  jello: { keyframes: () => `${jelloAnimation}`, easing: 'ease-in-out', scale: 1 },\n  float: { keyframes: (theme) => `${floatAnimation(theme)}`, easing: 'ease-in-out', scale: 2 },\n  neonFlicker: { keyframes: (theme) => `${neonFlickerAnimation(theme)}`, easing: 'ease-in-out', scale: 2 },\n  breathe: { keyframes: () => `${breatheAnimation}`, easing: 'ease-in-out', scale: 1.5 },\n};\n\nconst animationFor = (\n  theme: Theme,\n  variant: AnimationVariant,\n  duration: number,\n  delay: number,\n  loop: boolean,\n) => {\n  const spec = ANIMATIONS[variant];\n  if (!spec) return 'none';\n\n  const iterationCount = loop ? 'infinite' : '1';\n  return `${spec.keyframes(theme)} ${duration * spec.scale}s ${spec.easing} ${iterationCount} ${delay > 0 ? `${delay}s` : '0s'}`;\n};\n\nconst SHADOWS: Record<string, (theme: Theme) => string> = {\n  soft: (theme) => `0 ${rems(theme, 4, 20)} ${shadowInk(theme, 0.15)}`,\n  hard: (theme) => `${rems(theme, 4, 4)} 0px ${shadowInk(theme, 0.25)}`,\n  elevated: (theme) =>\n    `0 ${rems(theme, 10, 40)} ${shadowInk(theme, 0.2)}, 0 ${rems(theme, 2, 10)} ${shadowInk(theme, 0.1)}`,\n};\n\nexport interface IconStyleFlags {\n  $size: number;\n  $fontSize: number;\n  $animationVariant: AnimationVariant;\n  $duration: number;\n  $delay: number;\n  $loop: boolean;\n  $glow: boolean;\n  $glass: boolean;\n  $glowColor?: string;\n  $customColor?: string;\n  $metallic?: boolean;\n  $gradient?: boolean;\n  $shadow?: 'soft' | 'hard' | 'elevated' | 'none';\n  $ripple?: boolean;\n  $neon?: boolean;\n  $holographic?: boolean;\n}\n\n/**\n * The four surface treatments that paint the icon themselves — metallic,\n * gradient, neon and holographic — each run a second animation alongside the\n * chosen one, so they all need the base animation string.\n */\nconst effectStyles = (\n  theme: Theme,\n  flags: IconStyleFlags,\n  animation: string,\n  color: string,\n): CSSObject => {\n  const { $glass, $metallic, $gradient, $neon, $holographic } = flags;\n\n  return {\n    ...($glass && {\n      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.2)}, ${alpha(theme.palette.background.paper, 0.1)})`,\n      backdropFilter: `blur(${rem(theme, 10)})`,\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n      boxShadow: `inset 0 ${rems(theme, 1, 1)} ${sheen(theme, 0.3)}, 0 ${rems(theme, 8, 32)} ${shadowInk(theme, 0.1)}`,\n    }),\n    ...($metallic && {\n      background: `linear-gradient(145deg,\n      ${neutralTones(theme).track} 0%,\n      ${neutralTones(theme).muted} 25%,\n      ${neutralTones(theme).subtle} 50%,\n      ${neutralTones(theme).emphasis} 75%,\n      ${neutralTones(theme).subtle} 100%)`,\n      backgroundSize: '200% 200%',\n      animation: `${animation}, ${breatheAnimation} 4s ease-in-out infinite`,\n      boxShadow: `inset 0 ${rems(theme, 2, 4)} ${sheen(theme, 0.5)},\n                inset 0 ${rems(theme, -2, 4)} ${shadowInk(theme, 0.3)},\n                0 ${rems(theme, 4, 8)} ${shadowInk(theme, 0.2)}`,\n    }),\n    ...($gradient && {\n      background: `linear-gradient(135deg,\n      ${theme.palette.primary.main} 0%,\n      ${theme.palette.secondary.main} 100%)`,\n      backgroundSize: '200% 200%',\n      animation: `${animation}, ${breatheAnimation} 3s ease-in-out infinite`,\n    }),\n    ...($neon && {\n      color,\n      textShadow: `0 0 ${rem(theme, 10)} ${color}, 0 0 ${rem(theme, 20)} ${color}, 0 0 ${rem(theme, 30)} ${color}`,\n      filter: `brightness(1.2) contrast(1.2)`,\n      animation: `${animation}, ${neonFlickerAnimation(theme)} 3s ease-in-out infinite`,\n    }),\n    ...($holographic && {\n      background: `linear-gradient(45deg,\n      ${theme.palette.primary.main} 0%,\n      ${theme.palette.secondary.main} 25%,\n      ${theme.palette.error.main} 50%,\n      ${theme.palette.warning.main} 75%,\n      ${theme.palette.primary.main} 100%)`,\n      backgroundSize: '400% 400%',\n      animation: `${animation}, ${floatAnimation(theme)} 6s ease-in-out infinite`,\n      backgroundClip: 'text',\n      WebkitBackgroundClip: 'text',\n      WebkitTextFillColor: 'transparent',\n      filter: `hue-rotate(0deg)`,\n      '@keyframes hueRotate': {\n        '0%': { filter: 'hue-rotate(0deg)' },\n        '100%': { filter: 'hue-rotate(360deg)' },\n      },\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute' as const,\n        inset: rem(theme, -2),\n        borderRadius: '50%',\n        background: 'inherit',\n        filter: `blur(${rem(theme, 10)})`,\n        opacity: 0.5,\n        zIndex: -1,\n      },\n    }),\n  };\n};\n\nexport const iconSx = (theme: Theme, flags: IconStyleFlags): CSSObject => {\n  const {\n    $size, $fontSize, $animationVariant, $duration, $delay, $loop,\n    $glow, $glowColor, $customColor, $shadow, $ripple, $neon,\n  } = flags;\n\n  const color = $customColor || theme.palette.primary.main;\n  const glowColor = $glowColor || color;\n  const animation = animationFor(theme, $animationVariant, $duration, $delay, $loop);\n\n  // Both selectors size the same glyph — MUI icons render an MuiSvgIcon-root,\n  // a bare child renders an svg.\n  const glyphSize = {\n    fontSize: rem(theme, $fontSize),\n    width: rem(theme, $fontSize),\n    height: rem(theme, $fontSize),\n  };\n\n  return {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: rem(theme, $size),\n    height: rem(theme, $size),\n    color,\n    animation,\n    position: 'relative' as const,\n    cursor: 'default',\n    borderRadius: '50%',\n    transition: 'all 0.3s ease',\n    boxShadow: SHADOWS[$shadow ?? 'none']?.(theme) ?? 'none',\n    ...($glow && {\n      '&::before': {\n        content: '\"\"',\n        position: 'absolute' as const,\n        inset: rem(theme, -8),\n        borderRadius: '50%',\n        background: `radial-gradient(circle, ${alpha(glowColor, 0.3)} 0%, transparent 70%)`,\n        animation: `${glowPulseAnimation(theme)} ${$duration * 1.2}s ease-in-out infinite`,\n        zIndex: -1,\n      },\n      filter: `drop-shadow(0 0 ${rem(theme, 8)} ${alpha(glowColor, 0.5)})`,\n    }),\n    ...effectStyles(theme, flags, animation, color),\n    ...($ripple && {\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute' as const,\n        inset: 0,\n        borderRadius: '50%',\n        border: `${rem(theme, 2)} solid ${color}`,\n        animation: `${rippleAnimation} ${$duration * 1.5}s ease-out infinite`,\n      },\n    }),\n    '& .MuiSvgIcon-root': glyphSize,\n    '& svg': glyphSize,\n    '&:hover': {\n      transform: 'scale(1.05)',\n      filter: $neon ? `brightness(1.4) contrast(1.3)` : undefined,\n    },\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-XR46FSOH.js → chunk-XIG3DXXX.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-2EAAWOZ2.js";
 import {
   Text
-} from "./chunk-WTOYEWW6.js";
+} from "./chunk-YBH4SPMM.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -297,4 +297,4 @@ export {
   ViewHeader,
   ViewFooter
 };
-//# sourceMappingURL=chunk-XR46FSOH.js.map
+//# sourceMappingURL=chunk-XIG3DXXX.js.map

package/dist/{chunk-GHTBUJ6E.js → chunk-XRUW7DMH.js}

@@ -1,6 +1,6 @@
 import {
   Skeleton
-} from "./chunk-7F7TTOYN.js";
+} from "./chunk-BEGTLELZ.js";
 import {
   rem,
   sxRem
@@ -205,4 +205,4 @@ export {
   StatCard,
   StatCard_default
 };
-//# sourceMappingURL=chunk-GHTBUJ6E.js.map
+//# sourceMappingURL=chunk-XRUW7DMH.js.map

package/dist/{chunk-CSTAQX2B.js → chunk-XWZJLXJT.js}

@@ -1,11 +1,12 @@
 import {
   SettingsStatusMarker
-} from "./chunk-2OIP3T5O.js";
+} from "./chunk-DBFRCTI5.js";
 import {
   TOUCH_TARGET
-} from "./chunk-LIG7TKIB.js";
+} from "./chunk-NYFNF7I5.js";
 import {
-  rem
+  rem,
+  sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/layout/SettingsLayout/SettingsSectionChips.tsx
@@ -13,7 +14,7 @@ import Box from "@mui/material/Box/index.js";
 import { alpha, useTheme } from "@mui/material/styles/index.js";
 import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var CHIP_HEIGHT = 34;
+var CHIP_HEIGHT = sxRem(34);
 function prefersReducedMotion() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -83,7 +84,7 @@ function SectionChip({
           insetInlineEnd: 0,
           top: "50%",
           transform: "translateY(-50%)",
-          height: TOUCH_TARGET
+          height: rem(theme, TOUCH_TARGET)
         }
       },
       children: [
@@ -149,4 +150,4 @@ SettingsSectionChips.displayName = "SettingsSectionChips";
 export {
   SettingsSectionChips
 };
-//# sourceMappingURL=chunk-CSTAQX2B.js.map
+//# sourceMappingURL=chunk-XWZJLXJT.js.map

package/dist/chunk-XWZJLXJT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsSectionChips.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport { alpha, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React, { useEffect, useRef, type RefObject } from 'react';\n\nimport { SettingsStatusMarker } from './SettingsStatusMarker';\nimport { TOUCH_TARGET } from './SettingsLayout.styles';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n/**\n * The chip's drawn height, against `TOUCH_TARGET`'s 44 for the tappable one.\n *\n * The strip sits between a section's header and its first field on the width\n * with the least room for either, so the pill is sized to its text rather than\n * to the thumb — and the thumb is served by the hit area instead.\n */\nconst CHIP_HEIGHT = sxRem(34);\nimport type { SettingsLayoutProps, SettingsNavItem } from './SettingsLayout.types';\n\nexport interface SettingsSectionChipsProps {\n  /** The sibling sections to offer — usually the open item's own group. */\n  items: SettingsNavItem[];\n  /** Which one is open. */\n  activeItemId?: string;\n  /** Accessible name of the strip, in the host's language. */\n  ariaLabel: string;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}\n\n/** True when the visitor asked the OS for less movement. Re-read per scroll. */\nfunction prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n/**\n * Keep the open section's chip in view, however the visitor got here.\n *\n * Keyed on `activeItemId` in an effect rather than done in a click handler:\n * arriving by the desktop rail, by a card, by a pasted link and by the browser's\n * back button all have to land the same way, and only one of those is a click on\n * a chip. Every re-render otherwise starts the strip at scroll 0, which parks\n * the active chip off the right edge on any list longer than a screen — the\n * visitor is told where they are by an element they cannot see.\n *\n * `itemsKey` rather than `items`: a host almost always rebuilds that array per\n * render (`groups.flatMap(...)`), and depending on it would re-run this on every\n * render and yank the strip back mid-drag.\n *\n * The key joins on NUL — as the ESCAPE `'\\u0000'`, which it must stay. A\n * literal NUL byte works identically at runtime and makes git classify this file\n * as BINARY: `git diff` prints \"Binary file not shown\" and the GitHub review UI\n * shows nothing at all. This file shipped that way once, and the cost was not\n * the byte — it was a whole change nobody could read.\n */\nfunction useCentreActiveChip(\n  stripRef: RefObject<HTMLDivElement | null>,\n  activeItemId: string | undefined,\n  itemsKey: string,\n): void {\n  useEffect(() => {\n    const strip = stripRef.current;\n    if (!strip || !activeItemId) return;\n    // Walked rather than selected: an id is host data, and a section id carrying\n    // a quote would turn a selector string into a thrown SyntaxError — which\n    // here would take the whole strip down to centre one chip.\n    const chip = Array.from(strip.children).find(\n      (node): node is HTMLElement =>\n        node instanceof HTMLElement && node.dataset.chipId === activeItemId,\n    );\n    if (!chip) return;\n    // Feature-checked, not assumed. `Element.scrollTo` is absent in jsdom and in\n    // a few embedded webviews, and an unguarded call there THROWS out of an\n    // effect — which React escalates to the nearest error boundary. The whole\n    // settings area would go down to centre one chip, and the host's own tests\n    // could not render the shell at all. Same reasoning as walking the children\n    // instead of building a selector: nothing in here is worth a crash.\n    if (typeof strip.scrollTo !== 'function') return;\n    const target = chip.offsetLeft + chip.offsetWidth / 2 - strip.clientWidth / 2;\n    const left = Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));\n    strip.scrollTo({ left, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });\n  }, [stripRef, activeItemId, itemsKey]);\n}\n\n/** One chip: a link when the host gave it a target, else a button. */\nfunction SectionChip({\n  item,\n  active,\n  theme,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: {\n  item: SettingsNavItem;\n  active: boolean;\n  theme: Theme;\n  linkComponent?: SettingsLayoutProps['linkComponent'];\n  onSelectItem?: (id: string) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const asLink = item.href !== undefined && linkComponent !== undefined;\n  const behaviour = asLink\n    ? { component: linkComponent, href: item.href }\n    : { component: 'button' as const, type: 'button' as const, onClick: () => onSelectItem?.(item.id) };\n\n  return (\n    <Box\n      {...behaviour}\n      data-chip-id={item.id}\n      data-testid={`${testIdPrefix}-chip-${item.id}`}\n      aria-current={active ? 'page' : undefined}\n      sx={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: 0.75,\n        flex: '0 0 auto',\n        position: 'relative',\n        // The chip LOOKS this tall; it is still tapped at `TOUCH_TARGET`.\n        //\n        // Shrinking `minHeight` alone would have bought a slimmer strip with a\n        // smaller hit area — on the one width where the strip IS the navigation\n        // and the input is a thumb. The `::after` below keeps the tappable\n        // region at the full target while the pill itself takes less room, so\n        // this is a visual change and not an accessibility trade.\n        minHeight: CHIP_HEIGHT,\n        px: 1.5,\n        borderRadius: 999,\n        cursor: 'pointer',\n        font: 'inherit',\n        fontSize: rem(theme, 13),\n        fontWeight: active ? 700 : 500,\n        textDecoration: 'none',\n        whiteSpace: 'nowrap',\n        color: active ? 'primary.main' : 'text.secondary',\n        bgcolor: active ? alpha(theme.palette.primary.main, 0.12) : 'transparent',\n        border: `1px solid ${active ? alpha(theme.palette.primary.main, 0.4) : theme.palette.divider}`,\n        // Spans the chip's width only, so neighbours never overlap: the strip\n        // is a row, and the extra reach is vertical.\n        '&::after': {\n          content: '\"\"',\n          position: 'absolute',\n          insetInlineStart: 0,\n          insetInlineEnd: 0,\n          top: '50%',\n          transform: 'translateY(-50%)',\n          height: rem(theme, TOUCH_TARGET),\n        },\n      }}\n    >\n      {item.status ? (\n        <SettingsStatusMarker\n          status={item.status}\n          label={item.statusLabel}\n          testId={`${testIdPrefix}-chip-status-${item.id}`}\n        />\n      ) : null}\n      {item.label}\n    </Box>\n  );\n}\n\n/**\n * The narrow-width section strip: horizontally scrollable chips for the sections\n * beside the open one.\n *\n * It clips its own overflow — `overflow-x: auto` on the strip, never on an\n * ancestor. A strip that pushes the page wide makes every OTHER screen at that\n * width scroll sideways too, and the cause is nowhere near the symptom.\n */\nexport function SettingsSectionChips({\n  items,\n  activeItemId,\n  ariaLabel,\n  linkComponent,\n  onSelectItem,\n  testIdPrefix,\n}: SettingsSectionChipsProps): React.JSX.Element {\n  const theme = useTheme();\n  const stripRef = useRef<HTMLDivElement | null>(null);\n  useCentreActiveChip(stripRef, activeItemId, items.map((item) => item.id).join('\\u0000'));\n\n  return (\n    <Box\n      ref={stripRef}\n      component=\"nav\"\n      aria-label={ariaLabel}\n      data-testid={`${testIdPrefix}-chips`}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: 0.75,\n        px: 0.25,\n        py: 0.25,\n        overflowX: 'auto',\n        overflowY: 'hidden',\n        scrollbarWidth: 'none',\n        '&::-webkit-scrollbar': { display: 'none' },\n      }}\n    >\n      {items.map((item) => (\n        <SectionChip\n          key={item.id}\n          item={item}\n          active={item.id === activeItemId}\n          theme={theme}\n          linkComponent={linkComponent}\n          onSelectItem={onSelectItem}\n          testIdPrefix={testIdPrefix}\n        />\n      ))}\n    </Box>\n  );\n}\n\nSettingsSectionChips.displayName = 'SettingsSectionChips';\n"],"mappings":"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","names":[]}

package/dist/{chunk-PMOEG36E.js → chunk-XZJM6EPC.js}

@@ -10,6 +10,9 @@ import {
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/DataViews/data-views-layout-context.tsx
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
@@ -17,7 +20,6 @@ import GridViewOutlinedIcon from "@mui/icons-material/GridViewOutlined";
 import { jsx, jsxs } from "react/jsx-runtime";
 var DataViewsLayoutContext = createContext(null);
 var DEFAULT_ZOOM = 35;
-var BASE_CARD_WIDTH = 180;
 var CARD_SCALE_RANGE = { min: 0.75, max: 2 };
 var LAYOUT_STORAGE_KEY = "dataviews:layout";
 var DENSITY_STORAGE_KEY = "dataviews:density";
@@ -45,7 +47,7 @@ function cardScaleForZoom(zoom) {
   return CARD_SCALE_RANGE.min + clamped / 100 * (CARD_SCALE_RANGE.max - CARD_SCALE_RANGE.min);
 }
 function cardMinWidthForZoom(zoom) {
-  return Math.round(BASE_CARD_WIDTH * cardScaleForZoom(zoom));
+  return Math.round(180 * cardScaleForZoom(zoom));
 }
 function isLayout(value) {
   return DATA_VIEWS_LAYOUTS.includes(value);
@@ -152,8 +154,8 @@ function DataViewsZoomSlider({ testIdPrefix }) {
         color: "text.secondary"
       },
       children: [
-        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: 14 } }),
-        /* @__PURE__ */ jsx(default2, { sx: { width: 88, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: sxRem(14) } }),
+        /* @__PURE__ */ jsx(default2, { sx: { width: sxRem(88), display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
           Slider,
           {
             size: "sm",
@@ -167,7 +169,7 @@ function DataViewsZoomSlider({ testIdPrefix }) {
             "data-testid": `${testIdPrefix}-card-zoom`
           }
         ) }),
-        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: 20 } })
+        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: sxRem(20) } })
       ]
     }
   );
@@ -184,4 +186,4 @@ export {
   useDataViewsLayout,
   DataViewsZoomSlider
 };
-//# sourceMappingURL=chunk-PMOEG36E.js.map
+//# sourceMappingURL=chunk-XZJM6EPC.js.map

package/dist/chunk-XZJM6EPC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-layout-context.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from \"react\";\n\nimport GridViewOutlinedIcon from \"@mui/icons-material/GridViewOutlined\";\n\nimport { Slider } from \"../../form/Slider\";\nimport { Box } from \"../../../mui/Box\";\nimport { sxRem } from \"../../../tokens/relative\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { DATA_VIEWS_LAYOUTS, type DataViewsLayout } from \"./data-views-types\";\n\n/**\n * The DataViews layout (view type): the dense \"Tabela\" grid, the \"Grade\" of\n * cards, the \"Lista\" of full-width rows, or the \"Quadro\" board of state columns.\n * Shared across the toolbar (the toggle) and the body (the selector) via context\n * so a single source of truth drives what renders — each layout only appears\n * when the table opts into it (`renderCard` for the grade, `renderListRow` for\n * the lista, `board` + `renderCard` for the quadro).\n */\nexport type { DataViewsLayout };\n\ninterface DataViewsLayoutValue {\n  layout: DataViewsLayout;\n  setLayout: (layout: DataViewsLayout) => void;\n  /** How much air each record gets — see {@link DataViewsDensity}. */\n  density: DataViewsDensity;\n  setDensity: (density: DataViewsDensity) => void;\n  /** Whether the cards layout is available (a `renderCard` was supplied). */\n  canUseCards: boolean;\n  /** Whether the list layout is available (a `renderListRow` was supplied). */\n  canUseList: boolean;\n  /** Whether the board layout is available (a `board` config AND a `renderCard`). */\n  canUseBoard: boolean;\n  /** Card-size zoom (0–100); drives the card grid's min column width. */\n  zoom: number;\n  setZoom: (zoom: number) => void;\n}\n\nconst DataViewsLayoutContext = createContext<DataViewsLayoutValue | null>(null);\n\n/** Default card zoom (0–100). */\nconst DEFAULT_ZOOM = 35;\n/** The size multiplier the zoom slider spans (0.75× to 2×). */\nconst CARD_SCALE_RANGE = { min: 0.75, max: 2 } as const;\n\n/**\n * Where the user's layout preference is remembered. ONE key for every DataViews\n * table in the app, on purpose: picking \"Grade\" on Produtos is a statement about\n * how this operator likes to read lists, not about that one screen. Every other\n * screen that CAN render cards then opens in cards, and one that cannot falls\n * back without forgetting the preference.\n */\nconst LAYOUT_STORAGE_KEY = \"dataviews:layout\";\n\n/**\n * The density preference, remembered app-wide for the same reason as the layout:\n * an operator who wants tight rows wants them on every list, not on one.\n */\nconst DENSITY_STORAGE_KEY = \"dataviews:density\";\n\n/**\n * How much room each record gets. It means different things per layout, and\n * that is the point — one control, phrased in the terms of what is on screen:\n *\n * - table / list → row height (\"Baixa / Média / Alta\")\n * - cards        → how many fit per row (\"Muitos / Médio / Poucos\")\n *\n * The board is unaffected: its cards are already sized by the zoom slider.\n */\nexport type DataViewsDensity = \"compact\" | \"cozy\" | \"comfortable\";\n\n/** Every density this build knows — the guard's single source. */\nconst DENSITIES: readonly DataViewsDensity[] = [\"compact\", \"cozy\", \"comfortable\"];\n\n/** Vertical padding (theme spacing units) per density, for a table or list row. */\nexport const DENSITY_ROW_PADDING: Record<DataViewsDensity, number> = {\n  compact: 0.25,\n  cozy: 0.75,\n  comfortable: 1.5,\n};\n\n/**\n * The card WIDTH each density aims for, as a multiple of the base card width.\n *\n * Density used to cap the column COUNT, with a track floor of\n * `max(baseWidth, 100% / count)`. That base is a constant, so wherever it won\n * the arithmetic every density produced an identical track — \"Muitos\" and\n * \"Medio\" both drew 3 cards of 279px at md — and where the percentage won\n * instead, on a wide screen, the count was pinned and each card grew to a share\n * of the viewport: ~430px of card holding one chip and two lines of text.\n *\n * One width per density fixes both, because the number `auto-fill` divides by\n * now differs per density at every size. The spread is chosen so the three land\n * on DIFFERENT column counts across the range rather than by eye — 4/3/2 at md,\n * 6/4/3 at lg, 7/5/4 at xl, 13/9/8 at 2560.\n */\nexport const DENSITY_CARD_SCALE: Record<DataViewsDensity, number> = {\n  compact: 0.84,\n  cozy: 1.15,\n  comfortable: 1.4,\n};\n\n/** The width a card aims for, in design px: the base width, scaled by zoom, then by density. */\nexport function cardTargetWidthFor(zoom: number, density: DataViewsDensity): number {\n  return Math.round(cardMinWidthForZoom(zoom) * DENSITY_CARD_SCALE[density]);\n}\n\n/**\n * The BOARD's column-width multiplier per density.\n *\n * Density means \"how much air a record gets\", and on a board that is the column\n * width — narrow columns fit more etapas on screen, wide ones give each card\n * room to be read. Without this the board was the one layout the Exibição tab\n * offered nothing for: the format tile switched to Quadro and the whole density\n * section vanished, which reads as a control that broke rather than one that\n * does not apply.\n *\n * The spread is deliberately narrower than the card grid's. A board column has\n * a hard floor (`MIN_COLUMN_WIDTH` — a card below it stops being readable), so\n * a multiplier that undershoots it buys nothing and makes \"Estreita\" a tile\n * that does nothing on a phone.\n */\nexport const DENSITY_BOARD_SCALE: Record<DataViewsDensity, number> = {\n  compact: 0.95,\n  cozy: 1,\n  comfortable: 1.25,\n};\n\n/**\n * Map the 0–100 zoom to the card SIZE multiplier. This is the single knob: the\n * card's width is its 180 design px × scale and its padding + typography\n * scale by the same factor, so the whole card grows together (scale 2 → twice\n * the size, proportion preserved by the aspect ratio). Passed to a card via\n * `DataViewCardSelection.scale`.\n */\nexport function cardScaleForZoom(zoom: number): number {\n  const clamped = Math.max(0, Math.min(100, zoom));\n  return CARD_SCALE_RANGE.min + (clamped / 100) * (CARD_SCALE_RANGE.max - CARD_SCALE_RANGE.min);\n}\n\n/**\n * The card grid's min column width in DESIGN px: the card's width at scale 1 —\n * 180 — times the zoom size multiplier. Drawn through `rem` where the track is\n * built (`cardGridTracks`), so it scales with the theme's type scale.\n */\nexport function cardMinWidthForZoom(zoom: number): number {\n  return Math.round(180 * cardScaleForZoom(zoom));\n}\n\n/** Which layouts this table can actually render. */\ninterface LayoutAvailability {\n  canUseCards: boolean;\n  canUseList: boolean;\n  canUseBoard: boolean;\n}\n\n/** Is this a layout string this build knows? Guards whatever is in storage. */\nfunction isLayout(value: unknown): value is DataViewsLayout {\n  return DATA_VIEWS_LAYOUTS.includes(value as DataViewsLayout);\n}\n\n/** Is this a density this build knows? Guards whatever is in storage. */\nfunction isDensity(value: unknown): value is DataViewsDensity {\n  return DENSITIES.includes(value as DataViewsDensity);\n}\n\n/** The remembered density, or undefined (no window, no value, junk). */\nfunction readStoredDensity(): DataViewsDensity | undefined {\n  try {\n    if (typeof window === \"undefined\") return undefined;\n    const stored = window.localStorage.getItem(DENSITY_STORAGE_KEY);\n    return isDensity(stored) ? stored : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * Pin a layout to one this table can render. \"Tabela\" is always available, so it\n * is the floor: a page with no `renderCard` never renders a cards body, one with\n * no `renderListRow` never renders a list, and one with no `board` config never\n * renders a board — whatever is stored, saved in a view, or requested.\n */\nfunction pinLayout(layout: DataViewsLayout, available: LayoutAvailability): DataViewsLayout {\n  if (layout === \"cards\") return available.canUseCards ? \"cards\" : \"table\";\n  if (layout === \"list\") return available.canUseList ? \"list\" : \"table\";\n  if (layout === \"board\") return available.canUseBoard ? \"board\" : \"table\";\n  return \"table\";\n}\n\n/** The stored cross-screen preference, or undefined (no window, no value, junk). */\nfunction readStoredLayout(): DataViewsLayout | undefined {\n  // Guarded rather than assumed: this module is also imported in Node (tests,\n  // any SSR host), and a `localStorage` access can throw outright under a\n  // restrictive privacy setting — a thrown read must not take the grid with it.\n  try {\n    if (typeof window === \"undefined\") return undefined;\n    const stored = window.localStorage.getItem(LAYOUT_STORAGE_KEY);\n    return isLayout(stored) ? stored : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\n/** Remember a preference for every other screen. A failed write is not an error. */\nfunction writeStored(key: string, value: string): void {\n  try {\n    if (typeof window === \"undefined\") return;\n    window.localStorage.setItem(key, value);\n  } catch {\n    // Private mode / quota / disabled storage: the preference simply does not\n    // survive the session. Nothing about the current view depends on it.\n  }\n}\n\ninterface LayoutProviderProps extends Partial<LayoutAvailability> {\n  /** Which layout to show first when the user has expressed no preference. */\n  defaultLayout?: DataViewsLayout;\n  /**\n   * The layout an APPLIED SAVED VIEW pins, when it stored one. It wins over the\n   * remembered preference for as long as that view is applied — the view is a\n   * snapshot someone chose to keep — but it does NOT overwrite the preference:\n   * only the toggle does that, because only the toggle is the user saying so.\n   */\n  viewLayout?: DataViewsLayout;\n  /**\n   * Ignore — and stop writing — the remembered cross-screen preference, making\n   * `defaultLayout` authoritative for this table.\n   *\n   * For a table that exists to SHOW a particular layout rather than to be\n   * browsed: a Storybook story called \"Board\", a docs example, a screenshot\n   * harness. Without it the remembered preference wins, so opening \"Board\"\n   * after having clicked Tabela anywhere renders a table — the demonstration\n   * silently showing the wrong thing, and a shared link doing it for everyone\n   * whose preference differs.\n   *\n   * A real screen leaves this off: remembering how someone likes to read\n   * lists is the point.\n   */\n  ignoreStoredLayout?: boolean;\n  children: ReactNode;\n}\n\n/**\n * Provides the view-type state, seeded from (in order) the applied saved view's\n * layout, the user's remembered cross-screen preference, then `defaultLayout` —\n * each pinned to what this table can actually render.\n */\nexport function DataViewsLayoutProvider({\n  canUseCards = false,\n  canUseList = false,\n  canUseBoard = false,\n  defaultLayout = \"table\",\n  viewLayout,\n  ignoreStoredLayout = false,\n  children,\n}: LayoutProviderProps): React.JSX.Element {\n  const availability = { canUseCards, canUseList, canUseBoard };\n  const [layout, setLayoutState] = useState<DataViewsLayout>(() =>\n    pinLayout(\n      viewLayout ?? (ignoreStoredLayout ? undefined : readStoredLayout()) ?? defaultLayout,\n      availability,\n    ),\n  );\n  const [density, setDensityState] = useState<DataViewsDensity>(\n    () => (ignoreStoredLayout ? undefined : readStoredDensity()) ?? \"cozy\",\n  );\n  const [zoom, setZoom] = useState(DEFAULT_ZOOM);\n  // A newly applied view carrying a layout switches to it (its reference-change\n  // is the signal, exactly as `appliedState` works for the filters).\n  useEffect(() => {\n    if (viewLayout) setLayoutState(pinLayout(viewLayout, availability));\n    // Availability is derived from props that do not change for a mounted table.\n  }, [viewLayout]);\n  // Pin again on read: `canUseCards`/`canUseBoard` can flip for a mounted table\n  // (a page that supplies `renderCard` only once its card data has loaded), and\n  // a stale \"cards\" would otherwise render a cards body with no renderer.\n  const effective = pinLayout(layout, availability);\n\n  const value = useMemo<DataViewsLayoutValue>(\n    () => ({\n      layout: effective,\n      setLayout: (next: DataViewsLayout) => {\n        const pinned = pinLayout(next, availability);\n        setLayoutState(pinned);\n        // Remember the user's own choice across every screen — see LAYOUT_STORAGE_KEY.\n        // A table pinned to a layout does not write: it would teach the\n        // preference a value the operator never chose.\n        if (!ignoreStoredLayout) writeStored(LAYOUT_STORAGE_KEY, pinned);\n      },\n      density,\n      setDensity: (next: DataViewsDensity) => {\n        setDensityState(next);\n        if (!ignoreStoredLayout) writeStored(DENSITY_STORAGE_KEY, next);\n      },\n      canUseCards,\n      canUseList,\n      canUseBoard,\n      zoom,\n      setZoom,\n    }),\n    [effective, density, canUseCards, canUseList, canUseBoard, zoom],\n  );\n  return <DataViewsLayoutContext.Provider value={value}>{children}</DataViewsLayoutContext.Provider>;\n}\n\n/** Read the current DataViews layout. Throws outside a provider. */\nexport function useDataViewsLayout(): DataViewsLayoutValue {\n  const ctx = useContext(DataViewsLayoutContext);\n  if (!ctx) {\n    throw new Error(\"useDataViewsLayout must be used within a DataViewsLayoutProvider\");\n  }\n  return ctx;\n}\n\n/**\n * Card-size slider for the toolbar — shown in the CARD-BASED layouts (\"Grade\"\n * and \"Quadro\"), mirroring the tabwoah view-selector's zoom. The board reuses\n * the same `renderCard`, so the same knob scales both.\n *\n * Deliberately ABSENT in \"Lista\" and \"Tabela\" (FUT-733): a list row is\n * full-width and sized by its content, so a card-size multiplier has nothing to\n * act on — a slider that moved and changed nothing would be worse than none.\n */\nexport function DataViewsZoomSlider({ testIdPrefix }: { testIdPrefix: string }): React.JSX.Element | null {\n  const { layout, zoom, setZoom } = useDataViewsLayout();\n  const copy = useDataViewsCopy();\n  if (layout !== \"cards\" && layout !== \"board\") return null;\n  return (\n    <Box\n      sx={{\n        display: { xs: \"none\", sm: \"flex\" },\n        alignItems: \"center\",\n        gap: 1,\n        color: \"text.secondary\",\n      }}\n    >\n      <GridViewOutlinedIcon sx={{ fontSize: sxRem(14) }} />\n      <Box sx={{ width: sxRem(88), display: \"flex\", alignItems: \"center\" }}>\n        <Slider\n          size=\"sm\"\n          showValue={false}\n          value={zoom}\n          min={0}\n          max={100}\n          step={5}\n          onChange={(_event, next) => setZoom(Array.isArray(next) ? (next[0] ?? 0) : next)}\n          aria-label={copy.display.cardZoom}\n          data-testid={`${testIdPrefix}-card-zoom`}\n        />\n      </Box>\n      <GridViewOutlinedIcon sx={{ fontSize: sxRem(20) }} />\n    </Box>\n  );\n}\n"],"mappings":"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","names":["default"]}

package/dist/{chunk-QF6LTUCE.js → chunk-Y2X7LYIN.js}

@@ -7,7 +7,7 @@ var resolveScrollable = (scrollableTarget) => {
   }
   return scrollableTarget;
 };
-var useSentinel = ({ testMode, threshold, scrollableTarget }) => {
+var useSentinel = ({ testMode, rootMargin, scrollableTarget }) => {
   const sentinelRef = useRef(null);
   const [isIntersecting, setIsIntersecting] = useState(false);
   useEffect(() => {
@@ -20,13 +20,13 @@ var useSentinel = ({ testMode, threshold, scrollableTarget }) => {
       },
       {
         root: resolveScrollable(scrollableTarget) || void 0,
-        rootMargin: `${threshold}px`,
+        rootMargin,
         threshold: 0
       }
     );
     observer.observe(sentinelRef.current);
     return () => observer.disconnect();
-  }, [testMode, threshold, scrollableTarget]);
+  }, [testMode, rootMargin, scrollableTarget]);
   return { sentinelRef, isIntersecting };
 };
 var useLoadMore = ({
@@ -75,4 +75,4 @@ export {
   useSentinel,
   useLoadMore
 };
-//# sourceMappingURL=chunk-QF6LTUCE.js.map
+//# sourceMappingURL=chunk-Y2X7LYIN.js.map