@12-apps/ui 6.35.0 → 6.36.0

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

@@ -2,13 +2,16 @@ import {
   imgPassThrough,
   resolveLazyImageProps,
   useLazyImage
-} from "./chunk-WR7ELCIL.js";
+} from "./chunk-HCT5ELST.js";
 import {
   Skeleton
 } from "./chunk-7F7TTOYN.js";
 import {
   sheen
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/LazyImage/LazyImage.tsx
 import Box from "@mui/material/Box/index.js";
@@ -52,25 +55,33 @@ var FallbackContainer = styled(Box)(({ theme }) => ({
   top: 0,
   left: 0
 }));
-var SkeletonIndicator = ({ props, metrics }) => /* @__PURE__ */ jsx(
-  Skeleton,
-  {
-    variant: "rectangular",
-    width: metrics.width || "100%",
-    height: metrics.height || 200,
-    animation: props.skeletonProps.animation || "pulse",
-    intensity: props.skeletonProps.intensity,
-    borderRadius: props.borderRadius,
-    "data-testid": `${props["data-testid"]}-skeleton`
-  }
-);
+var styleLength = (theme, value) => typeof value === "number" ? rem(theme, value) : value;
+var sxLength = (theme, value) => {
+  if (typeof value !== "number") return value;
+  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+};
+var SkeletonIndicator = ({ props }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      variant: "rectangular",
+      width: styleLength(theme, props.width || "100%"),
+      height: styleLength(theme, props.height || 200),
+      animation: props.skeletonProps.animation || "pulse",
+      intensity: props.skeletonProps.intensity,
+      borderRadius: props.borderRadius,
+      "data-testid": `${props["data-testid"]}-skeleton`
+    }
+  );
+};
 var SpinnerIndicator = ({ props }) => {
   const theme = useTheme();
   const { spinnerProps } = props;
   return /* @__PURE__ */ jsx(SpinnerOverlay, { children: /* @__PURE__ */ jsx(
     CircularProgress,
     {
-      size: spinnerProps.size || 40,
+      size: styleLength(theme, spinnerProps.size || 40),
       thickness: spinnerProps.thickness || 4,
       sx: { color: spinnerProps.color || theme.palette.primary.main },
       "data-testid": `${props["data-testid"]}-spinner`
@@ -106,7 +117,8 @@ var LoadingIndicator = ({ kind, hasSrc, ...rest }) => {
   }
 };
 var ErrorFallback = ({ props, metrics }) => {
-  const { alt, fallback, borderRadius } = props;
+  const theme = useTheme();
+  const { alt, fallback, width, height, borderRadius } = props;
   const testId = props["data-testid"];
   if (!fallback) return null;
   if (typeof fallback === "string") {
@@ -125,7 +137,7 @@ var ErrorFallback = ({ props, metrics }) => {
   return /* @__PURE__ */ jsx(
     FallbackContainer,
     {
-      sx: { width: metrics.width, height: metrics.height, borderRadius },
+      sx: { width: sxLength(theme, width), height: sxLength(theme, height), borderRadius },
       "data-testid": `${testId}-fallback`,
       children: fallback
     }
@@ -133,6 +145,7 @@ var ErrorFallback = ({ props, metrics }) => {
 };
 var LazyImage = React.memo(function LazyImage2(rawProps) {
   const props = resolveLazyImageProps(rawProps);
+  const theme = useTheme();
   const {
     state,
     containerRef,
@@ -145,18 +158,22 @@ var LazyImage = React.memo(function LazyImage2(rawProps) {
   const { width, height, borderRadius, alt } = props;
   const testId = props["data-testid"];
   const metrics = {
-    width,
-    height,
+    width: styleLength(theme, width),
+    height: styleLength(theme, height),
     objectFit: props.objectFit,
     objectPosition: props.objectPosition,
-    borderRadius
+    borderRadius: styleLength(theme, borderRadius)
   };
   return /* @__PURE__ */ jsxs(
     ImageContainer,
     {
       ref: containerRef,
       className: props.className,
-      sx: { width: width || "auto", height: height || "auto", borderRadius },
+      sx: {
+        width: sxLength(theme, width || "auto"),
+        height: sxLength(theme, height || "auto"),
+        borderRadius
+      },
       "data-testid": testId,
       children: [
         showLoading && /* @__PURE__ */ jsx(
@@ -198,4 +215,4 @@ LazyImage.displayName = "LazyImage";
 export {
   LazyImage
 };
-//# sourceMappingURL=chunk-PGNJCUDA.js.map
+//# sourceMappingURL=chunk-CZBND7AY.js.map

package/dist/chunk-CZBND7AY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/LazyImage/LazyImage.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport { styled, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\nimport { Skeleton } from '../../layout/Skeleton';\nimport type { ResolvedLazyImageProps } from './LazyImage.hooks';\nimport { imgPassThrough, resolveLazyImageProps, useLazyImage } from './LazyImage.hooks';\nimport type { LazyImageProps } from './LazyImage.types';\nimport { sheen } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\nconst ImageContainer = styled(Box)(() => ({\n  position: 'relative',\n  display: 'inline-block',\n  overflow: 'hidden',\n}));\n\nconst StyledImage = styled('img')<{\n  fadeIn?: boolean;\n  fadeInDuration?: number;\n  isLoaded?: boolean;\n}>(({ fadeIn, fadeInDuration = 300, isLoaded }) => ({\n  display: 'block',\n  maxWidth: '100%',\n  height: 'auto',\n  opacity: fadeIn ? (isLoaded ? 1 : 0) : 1,\n  transition: fadeIn ? `opacity ${fadeInDuration}ms ease-in-out` : 'none',\n}));\n\nconst SpinnerOverlay = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: sheen(theme, 0.8),\n  borderRadius: '50%',\n  padding: theme.spacing(1),\n}));\n\nconst FallbackContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: theme.palette.action.disabledBackground,\n  color: theme.palette.text.secondary,\n  width: '100%',\n  height: '100%',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n}));\n\ntype Length = number | string | undefined;\n\n/** A length prop as React `style` and MUI's `Skeleton` read it: a number is design px. */\nconst styleLength = (theme: Theme, value: Length): string | undefined =>\n  typeof value === 'number' ? rem(theme, value) : value;\n\n/**\n * A length prop as `sx` reads it on a width or height: a number of 1 or less is\n * a fraction of the parent, and that stays so; any other number is design px.\n */\nconst sxLength = (theme: Theme, value: Length): string | undefined => {\n  if (typeof value !== 'number') return value;\n  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);\n};\n\n/** The box the image occupies, as CSS, shared by the real image and every stand-in for it. */\ninterface BoxMetrics {\n  width?: string;\n  height?: string;\n  objectFit: NonNullable<LazyImageProps['objectFit']>;\n  objectPosition: string;\n  borderRadius?: string;\n}\n\ninterface IndicatorProps {\n  props: ResolvedLazyImageProps;\n  metrics: BoxMetrics;\n}\n\nconst SkeletonIndicator: React.FC<IndicatorProps> = ({ props }) => {\n  const theme = useTheme();\n  return (\n    <Skeleton\n      variant=\"rectangular\"\n      width={styleLength(theme, props.width || '100%')}\n      height={styleLength(theme, props.height || 200)}\n      animation={props.skeletonProps.animation || 'pulse'}\n      intensity={props.skeletonProps.intensity}\n      borderRadius={props.borderRadius}\n      data-testid={`${props['data-testid']}-skeleton`}\n    />\n  );\n};\n\nconst SpinnerIndicator: React.FC<IndicatorProps> = ({ props }) => {\n  const theme = useTheme();\n  const { spinnerProps } = props;\n\n  return (\n    <SpinnerOverlay>\n      <CircularProgress\n        size={styleLength(theme, spinnerProps.size || 40)}\n        thickness={spinnerProps.thickness || 4}\n        sx={{ color: spinnerProps.color || theme.palette.primary.main }}\n        data-testid={`${props['data-testid']}-spinner`}\n      />\n    </SpinnerOverlay>\n  );\n};\n\nconst PlaceholderIndicator: React.FC<IndicatorProps & { hasSrc: boolean }> = ({\n  props,\n  metrics,\n  hasSrc,\n}) => {\n  // Once a src has been chosen the real <img> is on screen, so the placeholder\n  // would only stack behind it.\n  if (!props.placeholder || hasSrc) return null;\n\n  return (\n    <StyledImage\n      src={props.placeholder}\n      alt={`${props.alt} (loading)`}\n      style={metrics}\n      data-testid={`${props['data-testid']}-placeholder`}\n    />\n  );\n};\n\nconst LoadingIndicator: React.FC<\n  IndicatorProps & { kind: NonNullable<LazyImageProps['loadingState']>; hasSrc: boolean }\n> = ({ kind, hasSrc, ...rest }) => {\n  switch (kind) {\n    case 'skeleton':\n      return <SkeletonIndicator {...rest} />;\n    case 'spinner':\n      return <SpinnerIndicator {...rest} />;\n    case 'placeholder':\n      return <PlaceholderIndicator {...rest} hasSrc={hasSrc} />;\n    default:\n      return null;\n  }\n};\n\nconst ErrorFallback: React.FC<IndicatorProps> = ({ props, metrics }) => {\n  const theme = useTheme();\n  const { alt, fallback, width, height, borderRadius } = props;\n  const testId = props['data-testid'];\n\n  if (!fallback) return null;\n\n  if (typeof fallback === 'string') {\n    return (\n      <StyledImage\n        src={fallback}\n        alt={`${alt} (fallback)`}\n        style={metrics}\n        fadeIn={false}\n        isLoaded={true}\n        data-testid={`${testId}-fallback`}\n      />\n    );\n  }\n\n  return (\n    <FallbackContainer\n      sx={{ width: sxLength(theme, width), height: sxLength(theme, height), borderRadius }}\n      data-testid={`${testId}-fallback`}\n    >\n      {fallback}\n    </FallbackContainer>\n  );\n};\n\n/**\n * LazyImage component with enhanced features for optimized image loading\n * Supports lazy loading, placeholders, error handling, and various loading states\n */\nexport const LazyImage = React.memo<LazyImageProps>(function LazyImage(rawProps) {\n  const props = resolveLazyImageProps(rawProps);\n  const theme = useTheme();\n  const {\n    state,\n    containerRef,\n    effectiveLoadingState,\n    handleImageLoad,\n    handleImageError,\n    showImage,\n    showLoading,\n  } = useLazyImage(props);\n\n  const { width, height, borderRadius, alt } = props;\n  const testId = props['data-testid'];\n  const metrics: BoxMetrics = {\n    width: styleLength(theme, width),\n    height: styleLength(theme, height),\n    objectFit: props.objectFit,\n    objectPosition: props.objectPosition,\n    borderRadius: styleLength(theme, borderRadius),\n  };\n\n  return (\n    <ImageContainer\n      ref={containerRef}\n      className={props.className}\n      sx={{\n        width: sxLength(theme, width || 'auto'),\n        height: sxLength(theme, height || 'auto'),\n        borderRadius,\n      }}\n      data-testid={testId}\n    >\n      {showLoading && (\n        <LoadingIndicator\n          kind={effectiveLoadingState}\n          props={props}\n          metrics={metrics}\n          hasSrc={Boolean(state.currentSrc)}\n        />\n      )}\n\n      {showImage && (\n        <StyledImage\n          src={state.currentSrc || undefined}\n          alt={alt}\n          onLoad={handleImageLoad}\n          onError={handleImageError}\n          fadeIn={props.fadeIn}\n          fadeInDuration={props.fadeInDuration}\n          isLoaded={!state.isLoading}\n          decoding={props.decoding}\n          loading={props.lazy ? 'lazy' : props.loading}\n          style={{ ...metrics, ...props.sx }}\n          aria-label={props['aria-label'] || alt}\n          aria-describedby={props['aria-describedby']}\n          role={props.role}\n          data-testid={`${testId}-img`}\n          {...imgPassThrough(props)}\n        />\n      )}\n\n      {state.hasError && <ErrorFallback props={props} metrics={metrics} />}\n    </ImageContainer>\n  );\n});\n\nLazyImage.displayName = 'LazyImage';\n"],"mappings":"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","names":["LazyImage"]}

package/dist/{chunk-73HBIIRB.js → chunk-D2UDM2SU.js}

@@ -3,16 +3,16 @@ import {
 } from "./chunk-UOS7DEQZ.js";
 import {
   useLightbox
-} from "./chunk-2AKQPXSJ.js";
+} from "./chunk-HJPPNVCF.js";
 import {
   LightboxThumbnails
-} from "./chunk-7ZWC5CKA.js";
+} from "./chunk-BAFDSAWY.js";
 import {
   LightboxStage
-} from "./chunk-JWK4GI2I.js";
+} from "./chunk-N2GEKC4J.js";
 import {
   LightboxOverlay
-} from "./chunk-KLMP2BYC.js";
+} from "./chunk-IVJKILIX.js";
 import {
   LightboxCurrentMedia
 } from "./chunk-2DWBJJK6.js";
@@ -21,10 +21,14 @@ import {
 } from "./chunk-TEQYTEM2.js";
 import {
   makeTestId
-} from "./chunk-TFZI36UD.js";
+} from "./chunk-3KA6MYIR.js";
 import {
   scrim
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/Lightbox/Lightbox.tsx
 import Dialog from "@mui/material/Dialog/index.js";
@@ -37,7 +41,7 @@ var DIALOG_STATIC_PROPS = {
   fullScreen: true,
   TransitionComponent: Fade,
   TransitionProps: { timeout: 300 },
-  PaperProps: { sx: { background: (theme) => scrim(theme, 0.9), backdropFilter: "blur(2px)" } },
+  PaperProps: { sx: { background: (theme) => scrim(theme, 0.9), backdropFilter: (theme) => `blur(${rem(theme, 2)})` } },
   "aria-label": "Lightbox",
   "aria-labelledby": "lightbox-title",
   role: "dialog",
@@ -62,7 +66,7 @@ var Lightbox = React.forwardRef((componentProps, ref) => {
       onTouchEnd: lightbox.handleTouchEnd,
       "data-testid": dataTestId || "lightbox",
       children: [
-        /* @__PURE__ */ jsxs(Typography, { id: "lightbox-title", variant: "h6", sx: { position: "absolute", left: -1e4 }, children: [
+        /* @__PURE__ */ jsxs(Typography, { id: "lightbox-title", variant: "h6", sx: { position: "absolute", left: sxRem(-1e4) }, children: [
           "Lightbox - ",
           currentItem?.alt || `Item ${currentIndex + 1} of ${items.length}`
         ] }),
@@ -131,4 +135,4 @@ export {
   Lightbox,
   Lightbox_default
 };
-//# sourceMappingURL=chunk-73HBIIRB.js.map
+//# sourceMappingURL=chunk-D2UDM2SU.js.map

package/dist/chunk-D2UDM2SU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Lightbox/Lightbox.tsx"],"sourcesContent":["import Dialog from '@mui/material/Dialog/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { makeTestId } from './Lightbox.constants';\nimport { resolveLightboxProps } from './Lightbox.helpers';\nimport { LightboxCopyProvider } from './lightbox-copy-context';\nimport type { LightboxProps, LightboxRef } from './Lightbox.types';\nimport { LightboxCurrentMedia } from './LightboxCurrentMedia';\nimport { LightboxOverlay } from './LightboxOverlay';\nimport { LightboxStage } from './LightboxStage';\nimport { LightboxThumbnails } from './LightboxThumbnails';\nimport { useLightbox } from './useLightbox';\nimport { scrim } from '../../../tokens/ink';\nimport { rem, sxRem } from '../../../tokens/relative';\n\nconst DIALOG_STATIC_PROPS = {\n  maxWidth: false,\n  fullScreen: true,\n  TransitionComponent: Fade,\n  TransitionProps: { timeout: 300 },\n  PaperProps: { sx: { background: (theme: Theme) => scrim(theme, 0.9), backdropFilter: (theme: Theme) => `blur(${rem(theme, 2)})` } },\n  'aria-label': 'Lightbox',\n  'aria-labelledby': 'lightbox-title',\n  role: 'dialog',\n  'aria-modal': 'true',\n} as const;\n\nexport const Lightbox = React.forwardRef<LightboxRef, LightboxProps>((componentProps, ref) => {\n  const props = resolveLightboxProps(componentProps);\n  const { isOpen, items, loop, autoplay, showControls, showCaptions, thumbnails, zoomable } = props;\n  const { className, style, dataTestId } = props;\n\n  const testId = makeTestId(dataTestId);\n  const lightbox = useLightbox(props, ref);\n  const { currentIndex, currentItem, zoom } = lightbox;\n\n  return (\n    <LightboxCopyProvider copy={props.copy}>\n    <Dialog\n      open={isOpen}\n      onClose={lightbox.close}\n      {...DIALOG_STATIC_PROPS}\n      className={className}\n      style={style}\n      onTouchStart={lightbox.handleTouchStart}\n      onTouchEnd={lightbox.handleTouchEnd}\n      data-testid={dataTestId || 'lightbox'}\n    >\n      {/* Visually hidden title for screen readers */}\n      <Typography id=\"lightbox-title\" variant=\"h6\" sx={{ position: 'absolute', left: sxRem(-10000) }}>\n        Lightbox - {currentItem?.alt || `Item ${currentIndex + 1} of ${items.length}`}\n      </Typography>\n\n      <LightboxOverlay\n        testId={testId}\n        itemCount={items.length}\n        currentIndex={currentIndex}\n        showControls={showControls}\n        loop={loop}\n        autoplay={autoplay}\n        canZoom={lightbox.canZoom}\n        isAutoPlaying={lightbox.isAutoPlaying}\n        onClose={lightbox.close}\n        onPrev={lightbox.prev}\n        onNext={lightbox.next}\n        onZoomIn={zoom.zoomIn}\n        onZoomOut={zoom.zoomOut}\n        onResetZoom={zoom.resetZoom}\n        onToggleAutoplay={() => lightbox.setIsAutoPlaying((playing) => !playing)}\n      />\n\n      <LightboxStage\n        items={items}\n        currentItem={currentItem}\n        currentIndex={currentIndex}\n        isLoading={lightbox.isLoading}\n        showCaptions={showCaptions}\n        thumbnails={thumbnails}\n        testId={testId}\n        media={\n          <LightboxCurrentMedia\n            item={currentItem}\n            index={currentIndex}\n            total={items.length}\n            zoomable={zoomable}\n            zoom={zoom}\n            testId={testId}\n            onLoadingChange={lightbox.setIsLoading}\n            onWheel={lightbox.handleWheel}\n          />\n        }\n        thumbnailStrip={\n          thumbnails &&\n          items.length > 1 && (\n            <LightboxThumbnails\n              items={items}\n              currentIndex={currentIndex}\n              testId={testId}\n              onSelect={lightbox.goToIndex}\n            />\n          )\n        }\n      />\n    </Dialog>\n    </LightboxCopyProvider>\n  );\n});\n\nLightbox.displayName = 'Lightbox';\n\nexport default Lightbox;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,OAAO,gBAAgB;AAEvB,OAAO,WAAW;AAgDZ,SAIA,KAJA;AAlCN,IAAM,sBAAsB;AAAA,EAC1B,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,iBAAiB,EAAE,SAAS,IAAI;AAAA,EAChC,YAAY,EAAE,IAAI,EAAE,YAAY,CAAC,UAAiB,MAAM,OAAO,GAAG,GAAG,gBAAgB,CAAC,UAAiB,QAAQ,IAAI,OAAO,CAAC,CAAC,IAAI,EAAE;AAAA,EAClI,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,MAAM;AAAA,EACN,cAAc;AAChB;AAEO,IAAM,WAAW,MAAM,WAAuC,CAAC,gBAAgB,QAAQ;AAC5F,QAAM,QAAQ,qBAAqB,cAAc;AACjD,QAAM,EAAE,QAAQ,OAAO,MAAM,UAAU,cAAc,cAAc,YAAY,SAAS,IAAI;AAC5F,QAAM,EAAE,WAAW,OAAO,WAAW,IAAI;AAEzC,QAAM,SAAS,WAAW,UAAU;AACpC,QAAM,WAAW,YAAY,OAAO,GAAG;AACvC,QAAM,EAAE,cAAc,aAAa,KAAK,IAAI;AAE5C,SACE,oBAAC,wBAAqB,MAAM,MAAM,MAClC;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,SAAS,SAAS;AAAA,MACjB,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,cAAc,SAAS;AAAA,MACvB,YAAY,SAAS;AAAA,MACrB,eAAa,cAAc;AAAA,MAG3B;AAAA,6BAAC,cAAW,IAAG,kBAAiB,SAAQ,MAAK,IAAI,EAAE,UAAU,YAAY,MAAM,MAAM,IAAM,EAAE,GAAG;AAAA;AAAA,UAClF,aAAa,OAAO,QAAQ,eAAe,CAAC,OAAO,MAAM,MAAM;AAAA,WAC7E;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,MAAM;AAAA,YACjB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,SAAS;AAAA,YAClB,eAAe,SAAS;AAAA,YACxB,SAAS,SAAS;AAAA,YAClB,QAAQ,SAAS;AAAA,YACjB,QAAQ,SAAS;AAAA,YACjB,UAAU,KAAK;AAAA,YACf,WAAW,KAAK;AAAA,YAChB,aAAa,KAAK;AAAA,YAClB,kBAAkB,MAAM,SAAS,iBAAiB,CAAC,YAAY,CAAC,OAAO;AAAA;AAAA,QACzE;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,SAAS;AAAA,YACpB;AAAA,YACA;AAAA,YACA;AAAA,YACA,OACE;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,OAAO,MAAM;AAAA,gBACb;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,iBAAiB,SAAS;AAAA,gBAC1B,SAAS,SAAS;AAAA;AAAA,YACpB;AAAA,YAEF,gBACE,cACA,MAAM,SAAS,KACb;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,UAAU,SAAS;AAAA;AAAA,YACrB;AAAA;AAAA,QAGN;AAAA;AAAA;AAAA,EACF,GACA;AAEJ,CAAC;AAED,SAAS,cAAc;AAEvB,IAAO,mBAAQ;","names":[]}

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

@@ -1,9 +1,12 @@
 import {
   FleetCanvas
-} from "./chunk-JYRQBZEV.js";
+} from "./chunk-DVAAUWTC.js";
 import {
   FleetRoster
-} from "./chunk-IFSUKWE7.js";
+} from "./chunk-E7T3A4IR.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/FleetMap/FleetBody.tsx
 import Box from "@mui/material/Box/index.js";
@@ -36,7 +39,7 @@ function FleetBody({
           Box,
           {
             sx: {
-              flexBasis: { md: "280px", lg: "320px", xl: "380px" },
+              flexBasis: (theme) => ({ md: rem(theme, 280), lg: rem(theme, 320), xl: rem(theme, 380) }),
               flexShrink: 0,
               minWidth: 0,
               maxHeight: height,
@@ -76,4 +79,4 @@ function FleetBody({
 export {
   FleetBody
 };
-//# sourceMappingURL=chunk-YU647YW4.js.map
+//# sourceMappingURL=chunk-DB2ZFZVW.js.map

package/dist/chunk-DB2ZFZVW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/FleetMap/FleetBody.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\n\nimport { FleetCanvas } from './FleetCanvas';\nimport type { FleetMapState } from './FleetMap.hooks';\nimport type { FleetMapCopy } from './FleetMap.types';\nimport { FleetRoster } from './FleetRoster';\n\nexport interface FleetBodyProps\n  extends Pick<FleetMapState, 'ordered' | 'centre' | 'markers' | 'select' | 'onKeyDown'> {\n  copy: FleetMapCopy;\n  selectedId: string | null | undefined;\n  laggingAfterSeconds: number;\n  staleAfterSeconds: number;\n  height: string;\n  loading: boolean;\n  testId: string;\n}\n\n/**\n * The two halves side by side: the roster that reads the fleet, and the map.\n *\n * A component rather than JSX inside {@link import('./FleetMap').FleetMap}\n * because the layout is where every responsive decision lives, and keeping it\n * here is what leaves the exported component short enough to read in one\n * screen — which the complexity ledger enforces rather than merely suggests.\n */\nexport function FleetBody({\n  ordered,\n  centre,\n  markers,\n  select,\n  onKeyDown,\n  copy,\n  selectedId,\n  laggingAfterSeconds,\n  staleAfterSeconds,\n  height,\n  loading,\n  testId,\n}: FleetBodyProps): React.JSX.Element {\n  return (\n    <Stack\n      direction={{ xs: 'column', md: 'row' }}\n      spacing={2}\n      // `aria-busy` belongs on the halves that are actually reloading, NOT on\n      // the panel root — the live region announcing the reload is a sibling up\n      // there, and a live region inside a busy subtree is exactly what\n      // `aria-busy` tells assistive tech to hold back. Marking the root busy\n      // would have silenced the announcement for the whole of the only window\n      // in which it has anything to say. `CepField` splits them the same way.\n      aria-busy={loading || undefined}\n      data-testid={`${testId}-body`}\n      sx={{ alignItems: 'stretch', minWidth: 0 }}\n    >\n      {/* The roster reads first on a phone and sits beside the map from md up.\n          It keeps a ceiling so thirty units scroll rather than push the map off\n          the screen.\n\n          It also WIDENS with the viewport rather than staying at its md width.\n          Held at 280px, a desktop gave the map 1600px for three pins while the\n          roster stayed too narrow for its own meta line — `Lagging · 2 min ago ·\n          ±180 m` wrapped, at 1920px of all widths. The rungs below are the ones\n          the six-width pass was taken at. */}\n      <Box\n        sx={{\n          flexBasis: (theme: Theme) => ({ md: rem(theme, 280), lg: rem(theme, 320), xl: rem(theme, 380) }),\n          flexShrink: 0,\n          minWidth: 0,\n          maxHeight: height,\n          display: 'flex',\n        }}\n      >\n        <FleetRoster\n          units={ordered}\n          copy={copy}\n          selectedId={selectedId}\n          onSelect={select}\n          laggingAfterSeconds={laggingAfterSeconds}\n          staleAfterSeconds={staleAfterSeconds}\n          loading={loading}\n          testId={testId}\n          onKeyDown={onKeyDown}\n        />\n      </Box>\n      <FleetCanvas\n        copy={copy}\n        centre={centre}\n        markers={markers}\n        height={height}\n        testId={testId}\n      />\n    </Stack>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,WAAW;AA6Cd,SA+BI,KA/BJ;AAfG,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,EAAE,IAAI,UAAU,IAAI,MAAM;AAAA,MACrC,SAAS;AAAA,MAOT,aAAW,WAAW;AAAA,MACtB,eAAa,GAAG,MAAM;AAAA,MACtB,IAAI,EAAE,YAAY,WAAW,UAAU,EAAE;AAAA,MAWzC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,cACF,WAAW,CAAC,WAAkB,EAAE,IAAI,IAAI,OAAO,GAAG,GAAG,IAAI,IAAI,OAAO,GAAG,GAAG,IAAI,IAAI,OAAO,GAAG,EAAE;AAAA,cAC9F,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,WAAW;AAAA,cACX,SAAS;AAAA,YACX;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP;AAAA,gBACA;AAAA,gBACA,UAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/{chunk-GUVBR62X.js → chunk-DCJSHYE5.js}

@@ -4,13 +4,13 @@ import {
   MapDecorativePins,
   MapRoads,
   MapScaleBar
-} from "./chunk-M5BTIIL7.js";
+} from "./chunk-4CHROSWR.js";
 import {
   MapTiles
-} from "./chunk-6Q5GZUQ5.js";
+} from "./chunk-HGMBY5LP.js";
 import {
   surfaceBackground
-} from "./chunk-X4PS3E3V.js";
+} from "./chunk-X6AIKCAV.js";
 import {
   getTileCoordinates
 } from "./chunk-TUBCN4DJ.js";
@@ -59,4 +59,4 @@ var StaticMapView = ({
 export {
   StaticMapView
 };
-//# sourceMappingURL=chunk-GUVBR62X.js.map
+//# sourceMappingURL=chunk-DCJSHYE5.js.map

package/dist/{chunk-VV7MGILP.js → chunk-DMWSXWCZ.js}

@@ -3,14 +3,14 @@ import {
 } from "./chunk-4WQ3YXQL.js";
 import {
   DataViewsGrid
-} from "./chunk-DRE6DSJ7.js";
+} from "./chunk-5TJRJSJY.js";
 import {
   viewStateKey
 } from "./chunk-ZOLAYP2D.js";
 import {
   ViewDialogs,
   ViewMutationErrorAlert
-} from "./chunk-5ZTQTJAJ.js";
+} from "./chunk-PWF32ILG.js";
 import {
   useSavedViewsController
 } from "./chunk-HR7YTBR7.js";
@@ -178,4 +178,4 @@ function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
 export {
   DataViewsTableBase
 };
-//# sourceMappingURL=chunk-VV7MGILP.js.map
+//# sourceMappingURL=chunk-DMWSXWCZ.js.map

package/dist/{chunk-JYRQBZEV.js → chunk-DVAAUWTC.js}

@@ -1,6 +1,6 @@
 import {
   MapPreview
-} from "./chunk-KTYZRAB7.js";
+} from "./chunk-XJPJ6ESI.js";
 
 // src/components/data-display/FleetMap/FleetCanvas.tsx
 import Box from "@mui/material/Box/index.js";
@@ -38,4 +38,4 @@ function FleetCanvas({
 export {
   FleetCanvas
 };
-//# sourceMappingURL=chunk-JYRQBZEV.js.map
+//# sourceMappingURL=chunk-DVAAUWTC.js.map

package/dist/{chunk-C6NI3FAV.js → chunk-DVGBFT6O.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-L7BRU4UF.js";
 import {
   Alert
-} from "./chunk-2PWVPTS3.js";
+} from "./chunk-AUHYR7ID.js";
 import {
   Button
 } from "./chunk-KH25WUSX.js";
@@ -106,4 +106,4 @@ NotificationStatusNotice.displayName = "NotificationStatusNotice";
 export {
   NotificationStatusNotice
 };
-//# sourceMappingURL=chunk-C6NI3FAV.js.map
+//# sourceMappingURL=chunk-DVGBFT6O.js.map

package/dist/{chunk-5RP3KXC7.js → chunk-DY4BP5WA.js}

@@ -4,13 +4,13 @@ import {
 import {
   DisplayTab,
   SortTab
-} from "./chunk-OOSD7363.js";
+} from "./chunk-ZAFFKQQU.js";
 import {
   ViewActions,
   ViewFooter,
   ViewHeader,
   ViewsList
-} from "./chunk-7VJH4FYU.js";
+} from "./chunk-FZ4YTEP2.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -21,6 +21,7 @@ import {
   Button
 } from "./chunk-KH25WUSX.js";
 import {
+  rem,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
 
@@ -144,7 +145,7 @@ function PanelSurface({
         testIdPrefix
       }
     ),
-    /* @__PURE__ */ jsx(default2, { sx: { maxHeight: 320, minHeight: 220, overflowY: "auto" }, children: nav ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(default2, { sx: { maxHeight: sxRem(320), minHeight: sxRem(220), overflowY: "auto" }, children: nav ? /* @__PURE__ */ jsx(
       ViewsBody,
       {
         nav,
@@ -190,7 +191,7 @@ function DisplayTrigger({
       children: /* @__PURE__ */ jsxs(default2, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: [
         /* @__PURE__ */ jsx(DisplaySettingsRoundedIcon, { fontSize: "small" }),
         !compact && /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: { xs: "none", sm: "inline" } }, children: copy.display.trigger }),
-        dirty && /* @__PURE__ */ jsx(default2, { component: "span", sx: { height: 6, width: 6, borderRadius: "50%", bgcolor: "primary.main" } }),
+        dirty && /* @__PURE__ */ jsx(default2, { component: "span", sx: { height: sxRem(6), width: sxRem(6), borderRadius: "50%", bgcolor: "primary.main" } }),
         !compact && /* @__PURE__ */ jsx(KeyboardArrowDownRoundedIcon, { fontSize: "small" })
       ] })
     }
@@ -231,7 +232,7 @@ function DataViewsDisplayPanel({
         onClose: close,
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
-        slotProps: { paper: { sx: { width: 320, maxWidth: "calc(100vw - 32px)" } } },
+        slotProps: { paper: { sx: { width: sxRem(320), maxWidth: (theme) => `calc(100vw - ${rem(theme, 32)})` } } },
         children: /* @__PURE__ */ jsx(
           PanelSurface,
           {
@@ -264,4 +265,4 @@ function DataViewsDisplayPanel({
 export {
   DataViewsDisplayPanel
 };
-//# sourceMappingURL=chunk-5RP3KXC7.js.map
+//# sourceMappingURL=chunk-DY4BP5WA.js.map

package/dist/chunk-DY4BP5WA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-display-panel.tsx"],"sourcesContent":["\"use client\";\n\nimport type { DataViewsCopy } from \"./data-views-copy\";\nimport KeyboardArrowDownRoundedIcon from \"@mui/icons-material/KeyboardArrowDownRounded\";\n// Says \"display settings\" rather than the generic tune sliders it used to\n// share with the \"Mais\" FILTER trigger — see the note there.\nimport DisplaySettingsRoundedIcon from \"@mui/icons-material/DisplaySettingsRounded\";\nimport Popover from \"@mui/material/Popover/index.js\";\nimport type { Theme } from \"@mui/material/styles/index.js\";\nimport { useState } from \"react\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { Button } from \"../../form/Button\";\nimport { Box } from \"../../../mui/Box\";\n\nimport { ColumnsTab } from \"./data-views-columns-tab\";\nimport {\n  ViewActions,\n  ViewFooter,\n  ViewHeader,\n  ViewsList,\n  type ViewNavHandlers,\n} from \"./data-views-view-nav\";\nimport type { SavedViewSummary } from \"./data-views-types\";\nimport { DisplayTab, SortTab } from \"./data-views-display-tabs\";\nimport type { DataViewsController } from \"./use-data-views-state\";\nimport { rem, sxRem } from \"../../../tokens/relative\";\n\n/**\n * \"EXIBIR\" — one panel for every question about how the list is READ.\n *\n * Sort, columns and format used to be three separate toolbar dropdowns, which\n * asked the operator to already know which one held what. They are one decision\n * (\"how do I want to read this?\") so they are one control with three tabs.\n *\n * A view BRACKETS the panel: its name pinned at the top, the save actions\n * pinned at the bottom, both visible on every tab — so a change made in Colunas\n * is one glance away from the button that saves it. A separate \"Visão\" button\n * in the toolbar would be the same concept twice, in two places, disagreeing\n * about whether there are unsaved changes.\n */\n\n/** Which tab is showing. `columns` first: it is what an operator opens this for. */\ntype DisplayTabKey = \"sort\" | \"columns\" | \"display\";\n\nfunction displayTabs(copy: DataViewsCopy): { key: DisplayTabKey; label: string }[] {\n  return [\n    { key: \"sort\", label: copy.display.sortTab },\n    { key: \"columns\", label: copy.display.columnsTab },\n    { key: \"display\", label: copy.display.panelTab },\n  ];\n}\n\n/** The saved-view chrome the panel brackets its tabs with, when a host supplies it. */\nexport interface DisplayPanelView {\n  /** The applied view's name, or undefined for the built-in \"Visão principal\". */\n  activeViewName?: string;\n  /** True when the live state differs from the applied view (or from pristine). */\n  dirty: boolean;\n  /** Restore the applied view (or the pristine default) — discards local changes. */\n  onReset: () => void;\n  /** Persist the live state over the applied view. Absent ⇒ no update affordance. */\n  onUpdate?: () => void;\n  /** Persist the live state as a NEW view. */\n  onSaveAs: () => void;\n  /**\n   * The saved views themselves, rendered INLINE in this panel's body when the\n   * VISÃO header is opened — not as a dropdown of their own. The panel stays\n   * data-free: the host owns the views and every mutation, this only decides\n   * where they appear.\n   */\n  nav?: ViewNavHandlers;\n}\n\ninterface DisplayPanelProps<T extends Record<string, unknown>> {\n  c: DataViewsController<T>;\n  testIdPrefix: string;\n  /** Per-sort-field value kind, so directions read in the column's own terms. */\n  sortKinds?: Record<string, string>;\n  view?: DisplayPanelView;\n  /** Icon only — step 2 of the toolbar's measured degradation ladder. */\n  compact?: boolean;\n}\n\n/** The tab strip inside the panel. */\nfunction PanelTabs({\n  tab,\n  onChange,\n  muted,\n  testIdPrefix,\n}: {\n  tab: DisplayTabKey;\n  onChange: (tab: DisplayTabKey) => void;\n  /** The views own the body — no tab is showing, so none reads as selected. */\n  muted?: boolean;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Box sx={{ display: \"flex\", gap: 0.5, p: 0.75, bgcolor: \"action.hover\", borderBottom: 1, borderColor: \"divider\" }}>\n      {displayTabs(copy).map((entry) => {\n        const active = tab === entry.key && !muted;\n        return (\n        <Box\n          key={entry.key}\n          component=\"button\"\n          type=\"button\"\n          onClick={() => onChange(entry.key)}\n          data-testid={`${testIdPrefix}-display-tab-${entry.key}`}\n          aria-current={active}\n          sx={{\n            flex: 1,\n            px: 1,\n            py: 0.75,\n            border: 0,\n            borderRadius: 1,\n            cursor: \"pointer\",\n            font: \"inherit\",\n            fontSize: sxRem(13),\n            bgcolor: active ? \"background.paper\" : \"transparent\",\n            boxShadow: active ? 1 : 0,\n            fontWeight: active ? 600 : 400,\n            color: active ? \"text.primary\" : \"text.secondary\",\n          }}\n        >\n          {entry.label}\n        </Box>\n        );\n      })}\n    </Box>\n  );\n}\n\n/** The active tab's body. */\nfunction PanelBody<T extends Record<string, unknown>>({\n  tab,\n  c,\n  sortKinds,\n  testIdPrefix,\n}: {\n  tab: DisplayTabKey;\n  c: DataViewsController<T>;\n  sortKinds?: Record<string, string>;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  if (tab === \"sort\") {\n    return (\n      <SortTab\n        fields={c.resolvedSortFields}\n        activeField={c.activeSortField}\n        activeOrder={c.activeSortOrder}\n        onChange={(field, order) => c.patch({ sortBy: [{ id: field, dir: order }] })}\n        sortKinds={sortKinds}\n        testIdPrefix={testIdPrefix}\n      />\n    );\n  }\n  if (tab === \"columns\") {\n    return (\n      <ColumnsTab\n        columns={c.hideableColumns}\n        order={c.columnOrder}\n        visibleColumns={c.state.visibleColumns}\n        onToggle={c.toggleColumn}\n        onReorder={(order) => c.patch({ order })}\n        onShowAll={() => c.patch({ visibleColumns: c.columnOrder })}\n        // \"Padrão\" restores BOTH: the declared order and every column visible.\n        onReset={() => c.patch({ visibleColumns: c.columnOrder, order: undefined })}\n        testIdPrefix={testIdPrefix}\n      />\n    );\n  }\n  return <DisplayTab testIdPrefix={testIdPrefix} />;\n}\n\n/** Everything inside the popover: VISÃO header, tabs, body, save footer. */\nfunction PanelSurface<T extends Record<string, unknown>>({\n  c, view, nav, tab, onTab, viewsOpen, onToggleViews, actionsFor, onOpenActions,\n  onBack, sortKinds, onDone, testIdPrefix,\n}: {\n  c: DataViewsController<T>;\n  view?: DisplayPanelView;\n  nav?: ViewNavHandlers;\n  tab: DisplayTabKey;\n  onTab: (tab: DisplayTabKey) => void;\n  viewsOpen: boolean;\n  onToggleViews: () => void;\n  actionsFor: SavedViewSummary | null;\n  onOpenActions: (view: SavedViewSummary) => void;\n  onBack: () => void;\n  sortKinds?: Record<string, string>;\n  onDone: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  return (\n    <Box data-testid={`${testIdPrefix}-display-panel`}>\n          {view && (\n            <ViewHeader\n              view={view}\n              open={viewsOpen}\n              onToggle={onToggleViews}\n              testIdPrefix={testIdPrefix}\n            />\n          )}\n          <PanelTabs\n            tab={tab}\n            onChange={onTab}\n            muted={Boolean(nav)}\n            testIdPrefix={testIdPrefix}\n          />\n          {/* Constrained + scrolled: the columns list is unbounded, and a panel\n              taller than the viewport puts its own save button off screen. */}\n          <Box sx={{ maxHeight: sxRem(320), minHeight: sxRem(220), overflowY: \"auto\" }}>\n            {nav ? (\n              <ViewsBody\n                nav={nav}\n                actionsFor={actionsFor}\n                onOpenActions={onOpenActions}\n                onBack={onBack}\n                testIdPrefix={testIdPrefix}\n              />\n            ) : (\n              <PanelBody tab={tab} c={c} sortKinds={sortKinds} testIdPrefix={testIdPrefix} />\n            )}\n          </Box>\n          {view && <ViewFooter view={view} onDone={onDone} testIdPrefix={testIdPrefix} />}\n    </Box>\n  );\n}\n\n\n/** The views as the panel's body: the list, or one view's actions. */\nfunction ViewsBody({\n  nav,\n  actionsFor,\n  onOpenActions,\n  onBack,\n  testIdPrefix,\n}: {\n  nav: ViewNavHandlers;\n  actionsFor: SavedViewSummary | null;\n  onOpenActions: (view: SavedViewSummary) => void;\n  onBack: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  // Resolve against the LIVE list, not the object captured when the kebab was\n  // clicked: toggling \"Fixar\" or \"Compartilhar\" replaces the view in `views`,\n  // and a held snapshot would keep showing the state from before the click.\n  const live = actionsFor ? nav.views.find((view) => view.id === actionsFor.id) : undefined;\n  if (live) {\n    return <ViewActions view={live} handlers={nav} onBack={onBack} testIdPrefix={testIdPrefix} />;\n  }\n  return <ViewsList handlers={nav} onOpenActions={onOpenActions} testIdPrefix={testIdPrefix} />;\n}\n\n/** The \"Exibir\" button, with the dot that says the view has unsaved changes. */\nfunction DisplayTrigger({\n  dirty,\n  compact,\n  onOpen,\n  testIdPrefix,\n}: {\n  dirty: boolean;\n  compact: boolean;\n  onOpen: (anchor: HTMLElement) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Button\n      variant=\"outline\"\n      size=\"sm\"\n      color=\"neutral\"\n      onClick={(event) => onOpen(event.currentTarget as HTMLElement)}\n      dataTestId={`${testIdPrefix}-display-trigger`}\n      aria-label={copy.display.trigger}\n      title={compact ? copy.display.trigger : undefined}\n    >\n      <Box component=\"span\" sx={{ display: \"inline-flex\", alignItems: \"center\", gap: 0.5 }}>\n        <DisplaySettingsRoundedIcon fontSize=\"small\" />\n        {!compact && (\n          <Box component=\"span\" sx={{ display: { xs: \"none\", sm: \"inline\" } }}>\n            {copy.display.trigger}\n          </Box>\n        )}\n        {dirty && (\n          <Box component=\"span\" sx={{ height: sxRem(6), width: sxRem(6), borderRadius: \"50%\", bgcolor: \"primary.main\" }} />\n        )}\n        {/* The chevron goes with the label. Once the control is a bare icon it\n            is already unmistakably a button, and on the rung where that happens\n            the ~24px it costs is the difference between a row that fits and one\n            that scrolls. */}\n        {!compact && <KeyboardArrowDownRoundedIcon fontSize=\"small\" />}\n      </Box>\n    </Button>\n  );\n}\n\n/**\n * The toolbar's \"Exibir\" control: one button, one popover, three tabs, and the\n * view bracketing all of it.\n */\nexport function DataViewsDisplayPanel<T extends Record<string, unknown>>({\n  c,\n  testIdPrefix,\n  sortKinds,\n  view,\n  compact,\n}: DisplayPanelProps<T>): React.JSX.Element {\n  const [anchor, setAnchor] = useState<HTMLElement | null>(null);\n  const [tab, setTab] = useState<DisplayTabKey>(\"columns\");\n  // The views REPLACE the tab body rather than opening over it — see\n  // `data-views-view-nav`. `actionsFor` is the second level of that drill-down.\n  const [viewsOpen, setViewsOpen] = useState(false);\n  const [actionsFor, setActionsFor] = useState<SavedViewSummary | null>(null);\n  // Non-null only while the views are the body — the one place that decides\n  // whether this panel is showing tabs or views.\n  const nav = viewsOpen ? view?.nav : undefined;\n  const close = (): void => setAnchor(null);\n  const leaveViews = (): void => {\n    setViewsOpen(false);\n    setActionsFor(null);\n  };\n  return (\n    <>\n      <DisplayTrigger\n        dirty={Boolean(view?.dirty)}\n        compact={Boolean(compact)}\n        onOpen={setAnchor}\n        testIdPrefix={testIdPrefix}\n      />\n      <Popover\n        open={Boolean(anchor)}\n        anchorEl={anchor}\n        onClose={close}\n        anchorOrigin={{ vertical: \"bottom\", horizontal: \"right\" }}\n        transformOrigin={{ vertical: \"top\", horizontal: \"right\" }}\n        slotProps={{ paper: { sx: { width: sxRem(320), maxWidth: (theme: Theme) => `calc(100vw - ${rem(theme, 32)})` } } }}\n      >\n        <PanelSurface\n          c={c}\n          view={view}\n          nav={nav}\n          tab={tab}\n          onTab={(next) => {\n            setTab(next);\n            leaveViews();\n          }}\n          viewsOpen={viewsOpen}\n          onToggleViews={() => {\n            setViewsOpen((prev) => !prev);\n            setActionsFor(null);\n          }}\n          actionsFor={actionsFor}\n          onOpenActions={setActionsFor}\n          onBack={() => setActionsFor(null)}\n          sortKinds={sortKinds}\n          onDone={close}\n          testIdPrefix={testIdPrefix}\n        />\n      </Popover>\n    </>\n  );\n}\n"],"mappings":"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","names":["default"]}

package/dist/{chunk-W5ENK5CM.js → chunk-DZNMS2SH.js}

@@ -2,25 +2,25 @@ import {
   DiscloseSlot,
   DragSlot,
   SelectSlot
-} from "./chunk-QWHURFJ3.js";
+} from "./chunk-B2VXP2B2.js";
 import {
   actionProps,
   metaShape,
   rowStyles,
   useRowShell
-} from "./chunk-AQSX3YH2.js";
+} from "./chunk-UL7L6MFT.js";
 import {
   ListCardActions,
   ListCardCaption,
   ListCardMeta,
   ListCardTail
-} from "./chunk-RORP6DWR.js";
+} from "./chunk-RZ2C5CAW.js";
 import {
   useDisclosure
 } from "./chunk-2JCRNWHE.js";
 import {
   DropIndicator
-} from "./chunk-JCJGJX7V.js";
+} from "./chunk-K4EKTMTC.js";
 import {
   cellRailsTemplate
 } from "./chunk-JFEEV3XI.js";
@@ -179,4 +179,4 @@ function BaseListCard(props) {
 export {
   BaseListCard
 };
-//# sourceMappingURL=chunk-W5ENK5CM.js.map
+//# sourceMappingURL=chunk-DZNMS2SH.js.map

package/dist/{chunk-QO6QWBDI.js → chunk-E4TNDTWV.js}

@@ -21,6 +21,9 @@ import {
 import {
   resolveTestId
 } from "./chunk-TYJR4GOF.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/LoadingState/LoadingState.tsx
 import Box from "@mui/material/Box/index.js";
@@ -66,7 +69,7 @@ var SkeletonView = ({
           {
             variant: "rectangular",
             animation: "wave",
-            height: SKELETON_ROW_HEIGHT[size],
+            height: rem(theme, SKELETON_ROW_HEIGHT[size]),
             width: index === skeletonRows - 1 ? SKELETON_LAST_ROW_WIDTH : SKELETON_FULL_ROW_WIDTH,
             borderRadius: SKELETON_RADIUS,
             "data-testid": testIds.optional(`skeleton-${index}`)
@@ -102,14 +105,14 @@ var SpinnerView = ({ message, size, className, testIds }) => {
         alignItems: "center",
         justifyContent: "center",
         padding: theme.spacing(SPINNER_PADDING_UNITS),
-        minHeight: SPINNER_MIN_HEIGHT,
+        minHeight: rem(theme, SPINNER_MIN_HEIGHT),
         gap: theme.spacing(SPINNER_GAP_UNITS)
       },
       children: [
         /* @__PURE__ */ jsx(
           CircularProgress,
           {
-            size: SIZE_MAP[size].spinner,
+            size: rem(theme, SIZE_MAP[size].spinner),
             "data-testid": testIds.named("spinner")
           }
         ),
@@ -139,4 +142,4 @@ export {
   LoadingState,
   LoadingState_default
 };
-//# sourceMappingURL=chunk-QO6QWBDI.js.map
+//# sourceMappingURL=chunk-E4TNDTWV.js.map

package/dist/chunk-E4TNDTWV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/LoadingState/LoadingState.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { Skeleton } from '../../layout/Skeleton/Skeleton';\n\nimport {\n  makeTestIds,\n  resolveLoadingStateProps,\n  SIZE_MAP,\n  SKELETON_ROW_HEIGHT,\n} from './LoadingState.helpers';\nimport {\n  SKELETON_FULL_ROW_WIDTH,\n  SKELETON_LAST_ROW_WIDTH,\n  SKELETON_MESSAGE_MARGIN_TOP_UNITS,\n  SKELETON_PADDING_UNITS,\n  SKELETON_RADIUS,\n  SKELETON_ROW_GAP_UNITS,\n  SPINNER_GAP_UNITS,\n  SPINNER_MIN_HEIGHT,\n  SPINNER_PADDING_UNITS,\n} from './LoadingState.metrics';\nimport type { LoadingStateProps, LoadingStateSize } from './LoadingState.types';\nimport { resolveTestId } from '../../../platform/test-id';\nimport { rem } from '../../../tokens/relative';\n\ninterface ViewProps {\n  message?: string;\n  size: LoadingStateSize;\n  skeletonRows: number;\n  className?: string;\n  testIds: ReturnType<typeof makeTestIds>;\n}\n\nconst LoadingMessage: React.FC<{\n  message?: string;\n  size: LoadingStateSize;\n  testIds: ViewProps['testIds'];\n  sx?: object;\n}> = ({ message, size, testIds, sx }) =>\n  message ? (\n    <Typography\n      variant={SIZE_MAP[size].text}\n      color=\"text.secondary\"\n      sx={sx}\n      data-testid={testIds.named('message')}\n    >\n      {message}\n    </Typography>\n  ) : null;\n\nconst SkeletonView: React.FC<ViewProps> = ({\n  message,\n  size,\n  skeletonRows,\n  className,\n  testIds,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={message || 'Loading content'}\n      className={className}\n      data-testid={testIds.base}\n      sx={{\n        width: '100%',\n        padding: theme.spacing(SKELETON_PADDING_UNITS),\n      }}\n    >\n      <Stack spacing={SKELETON_ROW_GAP_UNITS}>\n        {Array.from({ length: skeletonRows }).map((_, index) => (\n          <Skeleton\n            key={`skeleton-row-${index}`}\n            variant=\"rectangular\"\n            animation=\"wave\"\n            height={rem(theme, SKELETON_ROW_HEIGHT[size])}\n            // The last row is short, so the block reads as a paragraph of text.\n            width={index === skeletonRows - 1 ? SKELETON_LAST_ROW_WIDTH : SKELETON_FULL_ROW_WIDTH}\n            borderRadius={SKELETON_RADIUS}\n            data-testid={testIds.optional(`skeleton-${index}`)}\n          />\n        ))}\n      </Stack>\n      <LoadingMessage\n        message={message}\n        size={size}\n        testIds={testIds}\n        sx={{ mt: SKELETON_MESSAGE_MARGIN_TOP_UNITS, textAlign: 'center' }}\n      />\n    </Box>\n  );\n};\n\nconst SpinnerView: React.FC<ViewProps> = ({ message, size, className, testIds }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={message || 'Loading'}\n      className={className}\n      data-testid={testIds.base}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        padding: theme.spacing(SPINNER_PADDING_UNITS),\n        minHeight: rem(theme, SPINNER_MIN_HEIGHT),\n        gap: theme.spacing(SPINNER_GAP_UNITS),\n      }}\n    >\n      <CircularProgress\n        size={rem(theme, SIZE_MAP[size].spinner)}\n        data-testid={testIds.named('spinner')}\n      />\n      <LoadingMessage message={message} size={size} testIds={testIds} />\n    </Box>\n  );\n};\n\nexport const LoadingState: React.FC<LoadingStateProps> = React.memo((rawProps) => {\n  const resolved = resolveLoadingStateProps(rawProps);\n  const { variant, message, size, skeletonRows, className } = resolved;\n  const viewProps: ViewProps = {\n    message,\n    size,\n    skeletonRows,\n    className,\n    // `dataTestId` is the documented spelling; `testID`, the shared contract's\n    // other one, resolves to the same id.\n    testIds: makeTestIds(resolveTestId(resolved)),\n  };\n\n  return variant === 'skeleton' ? (\n    <SkeletonView {...viewProps} />\n  ) : (\n    <SpinnerView {...viewProps} />\n  );\n});\n\nLoadingState.displayName = 'LoadingState';\n\nexport default LoadingState;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,WAAW;AAClB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AACzB,OAAO,WAAW;AAwCd,cAoBA,YApBA;AAPJ,IAAM,iBAKD,CAAC,EAAE,SAAS,MAAM,SAAS,GAAG,MACjC,UACE;AAAA,EAAC;AAAA;AAAA,IACC,SAAS,SAAS,IAAI,EAAE;AAAA,IACxB,OAAM;AAAA,IACN;AAAA,IACA,eAAa,QAAQ,MAAM,SAAS;AAAA,IAEnC;AAAA;AACH,IACE;AAEN,IAAM,eAAoC,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY,WAAW;AAAA,MACvB;AAAA,MACA,eAAa,QAAQ;AAAA,MACrB,IAAI;AAAA,QACF,OAAO;AAAA,QACP,SAAS,MAAM,QAAQ,sBAAsB;AAAA,MAC/C;AAAA,MAEA;AAAA,4BAAC,SAAM,SAAS,wBACb,gBAAM,KAAK,EAAE,QAAQ,aAAa,CAAC,EAAE,IAAI,CAAC,GAAG,UAC5C;AAAA,UAAC;AAAA;AAAA,YAEC,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,QAAQ,IAAI,OAAO,oBAAoB,IAAI,CAAC;AAAA,YAE5C,OAAO,UAAU,eAAe,IAAI,0BAA0B;AAAA,YAC9D,cAAc;AAAA,YACd,eAAa,QAAQ,SAAS,YAAY,KAAK,EAAE;AAAA;AAAA,UAP5C,gBAAgB,KAAK;AAAA,QAQ5B,CACD,GACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,IAAI,EAAE,IAAI,mCAAmC,WAAW,SAAS;AAAA;AAAA,QACnE;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,cAAmC,CAAC,EAAE,SAAS,MAAM,WAAW,QAAQ,MAAM;AAClF,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY,WAAW;AAAA,MACvB;AAAA,MACA,eAAa,QAAQ;AAAA,MACrB,IAAI;AAAA,QACF,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,SAAS,MAAM,QAAQ,qBAAqB;AAAA,QAC5C,WAAW,IAAI,OAAO,kBAAkB;AAAA,QACxC,KAAK,MAAM,QAAQ,iBAAiB;AAAA,MACtC;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,IAAI,OAAO,SAAS,IAAI,EAAE,OAAO;AAAA,YACvC,eAAa,QAAQ,MAAM,SAAS;AAAA;AAAA,QACtC;AAAA,QACA,oBAAC,kBAAe,SAAkB,MAAY,SAAkB;AAAA;AAAA;AAAA,EAClE;AAEJ;AAEO,IAAM,eAA4C,MAAM,KAAK,CAAC,aAAa;AAChF,QAAM,WAAW,yBAAyB,QAAQ;AAClD,QAAM,EAAE,SAAS,SAAS,MAAM,cAAc,UAAU,IAAI;AAC5D,QAAM,YAAuB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,SAAS,YAAY,cAAc,QAAQ,CAAC;AAAA,EAC9C;AAEA,SAAO,YAAY,aACjB,oBAAC,gBAAc,GAAG,WAAW,IAE7B,oBAAC,eAAa,GAAG,WAAW;AAEhC,CAAC;AAED,aAAa,cAAc;AAE3B,IAAO,uBAAQ;","names":[]}

package/dist/{chunk-IFSUKWE7.js → chunk-E7T3A4IR.js}

@@ -10,6 +10,9 @@ import {
 import {
   Skeleton
 } from "./chunk-7F7TTOYN.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/FleetMap/FleetRoster.tsx
 import Box from "@mui/material/Box/index.js";
@@ -125,8 +128,8 @@ function FleetRow({
             "aria-hidden": "true",
             "data-testid": `${testId}-dot`,
             sx: {
-              width: FLEET_DOT.size,
-              height: FLEET_DOT.size,
+              width: rem(theme, FLEET_DOT.size),
+              height: rem(theme, FLEET_DOT.size),
               borderRadius: "50%",
               flexShrink: 0,
               backgroundColor: color
@@ -149,11 +152,12 @@ function FleetRow({
   );
 }
 function FirstLoad({ testId }) {
+  const theme = useTheme();
   return /* @__PURE__ */ jsx(Stack, { spacing: FLEET_SKELETON.gapUnits, "data-testid": `${testId}-skeleton`, "aria-hidden": "true", children: Array.from({ length: FLEET_SKELETON.rows }, (_, row) => /* @__PURE__ */ jsx(
     Skeleton,
     {
       variant: "rectangular",
-      height: FLEET_SKELETON.height,
+      height: rem(theme, FLEET_SKELETON.height),
       borderRadius: FLEET_SKELETON.radiusMultiple
     },
     row
@@ -191,8 +195,8 @@ function FleetRoster({
         overflowY: "auto",
         minWidth: 0,
         "&:focus-visible": {
-          outline: `${FLEET_ROSTER.focusRingWidth}px solid ${theme.palette.primary.main}`,
-          outlineOffset: FLEET_ROSTER.focusRingOffset
+          outline: `${rem(theme, FLEET_ROSTER.focusRingWidth)} solid ${theme.palette.primary.main}`,
+          outlineOffset: rem(theme, FLEET_ROSTER.focusRingOffset)
         }
       },
       children: units.map((unit, index) => /* @__PURE__ */ jsx(
@@ -216,4 +220,4 @@ function FleetRoster({
 export {
   FleetRoster
 };
-//# sourceMappingURL=chunk-IFSUKWE7.js.map
+//# sourceMappingURL=chunk-E7T3A4IR.js.map