@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-VNOFFVRQ.js

@@ -0,0 +1,113 @@
+import {
+  MAX_ZOOM,
+  MIN_ZOOM
+} from "./chunk-H2J2MTRE.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/MapPreview/MapControlBar.tsx
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+import LayersIcon from "@mui/icons-material/Layers";
+import CenterIcon from "@mui/icons-material/MyLocation";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import ZoomOutIcon from "@mui/icons-material/ZoomOut";
+import Box from "@mui/material/Box/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Tooltip from "@mui/material/Tooltip/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MapControls = styled(Box)(({ theme }) => ({
+  position: "absolute",
+  top: theme.spacing(2),
+  right: theme.spacing(2),
+  zIndex: 1,
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1)
+}));
+var ControlButton = styled(IconButton)(({ theme }) => ({
+  background: alpha(theme.palette.background.paper, 0.95),
+  backdropFilter: `blur(${rem(theme, 10)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
+  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+  boxShadow: theme.shadows[2],
+  // Kept clickable while disabled so hover tooltips still work at the limits.
+  pointerEvents: "auto",
+  "&:hover": {
+    background: theme.palette.background.paper,
+    transform: "scale(1.05)"
+  },
+  "&:disabled": {
+    opacity: 0.5,
+    pointerEvents: "auto"
+  }
+}));
+var MapControlBar = ({
+  copy,
+  zoom,
+  mapType,
+  onZoomIn,
+  onZoomOut,
+  onCenter,
+  onToggleMapType,
+  onToggleFullscreen
+}) => /* @__PURE__ */ jsxs(MapControls, { "data-testid": "map-controls", children: [
+  /* @__PURE__ */ jsx(Tooltip, { title: copy.zoomIn, placement: "left", children: /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      size: "small",
+      onClick: onZoomIn,
+      "aria-label": copy.zoomIn,
+      "data-testid": "zoom-in-button",
+      disabled: zoom >= MAX_ZOOM,
+      children: /* @__PURE__ */ jsx(ZoomInIcon, { fontSize: "small" })
+    }
+  ) }),
+  /* @__PURE__ */ jsx(Tooltip, { title: copy.zoomOut, placement: "left", children: /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      size: "small",
+      onClick: onZoomOut,
+      "aria-label": copy.zoomOut,
+      "data-testid": "zoom-out-button",
+      disabled: zoom <= MIN_ZOOM,
+      children: /* @__PURE__ */ jsx(ZoomOutIcon, { fontSize: "small" })
+    }
+  ) }),
+  /* @__PURE__ */ jsx(Tooltip, { title: copy.center, placement: "left", children: /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      size: "small",
+      onClick: onCenter,
+      "aria-label": copy.center,
+      "data-testid": "center-button",
+      children: /* @__PURE__ */ jsx(CenterIcon, { fontSize: "small" })
+    }
+  ) }),
+  /* @__PURE__ */ jsx(Tooltip, { title: `Map type: ${mapType}`, placement: "left", children: /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      size: "small",
+      onClick: onToggleMapType,
+      "aria-label": copy.mapType,
+      "data-testid": "map-type-button",
+      children: /* @__PURE__ */ jsx(LayersIcon, { fontSize: "small" })
+    }
+  ) }),
+  /* @__PURE__ */ jsx(Tooltip, { title: copy.fullscreen, placement: "left", children: /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      size: "small",
+      onClick: onToggleFullscreen,
+      "aria-label": copy.fullscreen,
+      "data-testid": "fullscreen-button",
+      children: /* @__PURE__ */ jsx(FullscreenIcon, { fontSize: "small" })
+    }
+  ) })
+] });
+
+export {
+  MapControlBar
+};
+//# sourceMappingURL=chunk-VNOFFVRQ.js.map

package/dist/chunk-VNOFFVRQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/MapControlBar.tsx"],"sourcesContent":["import FullscreenIcon from '@mui/icons-material/Fullscreen';\nimport LayersIcon from '@mui/icons-material/Layers';\nimport CenterIcon from '@mui/icons-material/MyLocation';\nimport ZoomInIcon from '@mui/icons-material/ZoomIn';\nimport ZoomOutIcon from '@mui/icons-material/ZoomOut';\nimport Box from '@mui/material/Box/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { MAX_ZOOM, MIN_ZOOM } from './MapPreview.constants';\nimport type { MapType } from './MapPreview.types';\nimport type { MapPreviewCopy } from '../../../copy';\nimport { rem } from '../../../tokens/relative';\n\n// Kept module-local: the inferred type of a styled() component cannot be named\n// across a module boundary here (TS2742).\nconst MapControls = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  top: theme.spacing(2),\n  right: theme.spacing(2),\n  zIndex: 1,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(1),\n}));\n\nconst ControlButton = styled(IconButton)(({ theme }) => ({\n  background: alpha(theme.palette.background.paper, 0.95),\n  backdropFilter: `blur(${rem(theme, 10)})`,\n  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,\n  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  boxShadow: theme.shadows[2],\n  // Kept clickable while disabled so hover tooltips still work at the limits.\n  pointerEvents: 'auto',\n  '&:hover': {\n    background: theme.palette.background.paper,\n    transform: 'scale(1.05)',\n  },\n  '&:disabled': {\n    opacity: 0.5,\n    pointerEvents: 'auto',\n  },\n}));\n\nexport interface MapControlBarProps {\n  /**\n   * The six controls' names. Every one is a glyph with a `title` AND an\n   * `aria-label`, so this object is both the tooltip and what a screen reader\n   * reads — REQUIRED, because a default is one language for every adopter.\n   */\n  copy: MapPreviewCopy;\n  zoom: number;\n  mapType: MapType;\n  onZoomIn: () => void;\n  onZoomOut: () => void;\n  onCenter: () => void;\n  onToggleMapType: () => void;\n  onToggleFullscreen: () => void;\n}\n\nexport const MapControlBar: FC<MapControlBarProps> = ({\n  copy,\n  zoom,\n  mapType,\n  onZoomIn,\n  onZoomOut,\n  onCenter,\n  onToggleMapType,\n  onToggleFullscreen,\n}) => (\n  <MapControls data-testid=\"map-controls\">\n    <Tooltip title={copy.zoomIn} placement=\"left\">\n      <ControlButton\n        size=\"small\"\n        onClick={onZoomIn}\n        aria-label={copy.zoomIn}\n        data-testid=\"zoom-in-button\"\n        disabled={zoom >= MAX_ZOOM}\n      >\n        <ZoomInIcon fontSize=\"small\" />\n      </ControlButton>\n    </Tooltip>\n    <Tooltip title={copy.zoomOut} placement=\"left\">\n      <ControlButton\n        size=\"small\"\n        onClick={onZoomOut}\n        aria-label={copy.zoomOut}\n        data-testid=\"zoom-out-button\"\n        disabled={zoom <= MIN_ZOOM}\n      >\n        <ZoomOutIcon fontSize=\"small\" />\n      </ControlButton>\n    </Tooltip>\n    <Tooltip title={copy.center} placement=\"left\">\n      <ControlButton\n        size=\"small\"\n        onClick={onCenter}\n        aria-label={copy.center}\n        data-testid=\"center-button\"\n      >\n        <CenterIcon fontSize=\"small\" />\n      </ControlButton>\n    </Tooltip>\n    <Tooltip title={`Map type: ${mapType}`} placement=\"left\">\n      <ControlButton\n        size=\"small\"\n        onClick={onToggleMapType}\n        aria-label={copy.mapType}\n        data-testid=\"map-type-button\"\n      >\n        <LayersIcon fontSize=\"small\" />\n      </ControlButton>\n    </Tooltip>\n    <Tooltip title={copy.fullscreen} placement=\"left\">\n      <ControlButton\n        size=\"small\"\n        onClick={onToggleFullscreen}\n        aria-label={copy.fullscreen}\n        data-testid=\"fullscreen-button\"\n      >\n        <FullscreenIcon fontSize=\"small\" />\n      </ControlButton>\n    </Tooltip>\n  </MapControls>\n);\n"],"mappings":";;;;;;;;;AAAA,OAAO,oBAAoB;AAC3B,OAAO,gBAAgB;AACvB,OAAO,gBAAgB;AACvB,OAAO,gBAAgB;AACvB,OAAO,iBAAiB;AACxB,OAAO,SAAS;AAChB,OAAO,gBAAgB;AACvB,OAAO,aAAa;AACpB,SAAS,OAAO,cAAc;AAiE5B,SASM,KATN;AAtDF,IAAM,cAAc,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC9C,UAAU;AAAA,EACV,KAAK,MAAM,QAAQ,CAAC;AAAA,EACpB,OAAO,MAAM,QAAQ,CAAC;AAAA,EACtB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,IAAM,gBAAgB,OAAO,UAAU,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACvD,YAAY,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,EACtD,gBAAgB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,EACtC,sBAAsB,QAAQ,IAAI,OAAO,EAAE,CAAC;AAAA,EAC5C,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC;AAAA,EACtD,WAAW,MAAM,QAAQ,CAAC;AAAA;AAAA,EAE1B,eAAe;AAAA,EACf,WAAW;AAAA,IACT,YAAY,MAAM,QAAQ,WAAW;AAAA,IACrC,WAAW;AAAA,EACb;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AACF,EAAE;AAkBK,IAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,qBAAC,eAAY,eAAY,gBACvB;AAAA,sBAAC,WAAQ,OAAO,KAAK,QAAQ,WAAU,QACrC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,cAAY,KAAK;AAAA,MACjB,eAAY;AAAA,MACZ,UAAU,QAAQ;AAAA,MAElB,8BAAC,cAAW,UAAS,SAAQ;AAAA;AAAA,EAC/B,GACF;AAAA,EACA,oBAAC,WAAQ,OAAO,KAAK,SAAS,WAAU,QACtC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,cAAY,KAAK;AAAA,MACjB,eAAY;AAAA,MACZ,UAAU,QAAQ;AAAA,MAElB,8BAAC,eAAY,UAAS,SAAQ;AAAA;AAAA,EAChC,GACF;AAAA,EACA,oBAAC,WAAQ,OAAO,KAAK,QAAQ,WAAU,QACrC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,cAAY,KAAK;AAAA,MACjB,eAAY;AAAA,MAEZ,8BAAC,cAAW,UAAS,SAAQ;AAAA;AAAA,EAC/B,GACF;AAAA,EACA,oBAAC,WAAQ,OAAO,aAAa,OAAO,IAAI,WAAU,QAChD;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,cAAY,KAAK;AAAA,MACjB,eAAY;AAAA,MAEZ,8BAAC,cAAW,UAAS,SAAQ;AAAA;AAAA,EAC/B,GACF;AAAA,EACA,oBAAC,WAAQ,OAAO,KAAK,YAAY,WAAU,QACzC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,cAAY,KAAK;AAAA,MACjB,eAAY;AAAA,MAEZ,8BAAC,kBAAe,UAAS,SAAQ;AAAA;AAAA,EACnC,GACF;AAAA,GACF;","names":[]}

package/dist/chunk-VRDNUY4H.js

@@ -0,0 +1,138 @@
+import {
+  SettingsPanel
+} from "./chunk-2E2WOBID.js";
+import {
+  SettingsRail
+} from "./chunk-3CVTQZQJ.js";
+import {
+  activeItemLabel,
+  filterGroups
+} from "./chunk-BXC6GRLE.js";
+import {
+  atLeastRail
+} from "./chunk-LIG7TKIB.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/layout/SettingsLayout/SettingsLayout.tsx
+import Box from "@mui/material/Box/index.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULTS = {
+  searchPlaceholder: "Search settings",
+  defaultQuery: "",
+  emptySearchLabel: "No settings match your search.",
+  testIdPrefix: "settings",
+  railBreakpoint: "md",
+  navVariant: "switcher",
+  atIndex: false,
+  backLabel: "Back"
+};
+function shellSx(breakpoint, fillHeight) {
+  return (theme) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    gap: 1.5,
+    width: "100%",
+    minWidth: 0,
+    // Only ever at the wide shape. Narrow, the rail is a disclosure or the page
+    // itself, and two independent scrollbars on a phone is a trap rather than a
+    // convenience.
+    [atLeastRail(theme, breakpoint ?? "md")]: {
+      flexDirection: "row",
+      gap: 3,
+      ...fillHeight ? { height: "100%", minHeight: 0 } : {}
+    }
+  });
+}
+var SettingsLayout = (props) => {
+  const {
+    title,
+    groups,
+    activeItemId,
+    onSelectItem,
+    searchPlaceholder,
+    defaultQuery,
+    emptySearchLabel,
+    emptySearchAction,
+    linkComponent,
+    children,
+    testIdPrefix,
+    railBreakpoint,
+    fillHeight = false,
+    navVariant,
+    atIndex,
+    indexHref,
+    backLabel,
+    sectionChips
+  } = withDefaults(props, DEFAULTS);
+  const [query, setQuery] = useState(defaultQuery);
+  const [navOpen, setNavOpen] = useState(false);
+  const filteredGroups = useMemo(() => filterGroups(groups, query), [groups, query]);
+  const activeLabel = useMemo(() => activeItemLabel(groups, activeItemId), [groups, activeItemId]);
+  const drilldown = navVariant === "drilldown";
+  const ariaLabel = typeof title === "string" ? title : "Settings";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": testIdPrefix,
+      "data-nav-variant": navVariant,
+      "data-at-index": atIndex ? "true" : "false",
+      sx: shellSx(railBreakpoint, fillHeight),
+      children: [
+        /* @__PURE__ */ jsx(
+          SettingsRail,
+          {
+            title,
+            activeLabel,
+            navOpen,
+            onToggleNav: () => setNavOpen((open) => !open),
+            query,
+            onQueryChange: setQuery,
+            searchPlaceholder,
+            emptySearchLabel,
+            emptySearchAction,
+            filteredGroups,
+            activeItemId,
+            linkComponent,
+            onSelectItem,
+            onNavigate: () => setNavOpen(false),
+            testIdPrefix,
+            variant: navVariant,
+            breakpoint: railBreakpoint,
+            atIndex,
+            fillHeight
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsPanel,
+          {
+            inSection: drilldown && !atIndex,
+            hideOnNarrow: drilldown && atIndex,
+            breakpoint: railBreakpoint,
+            indexHref,
+            sectionTitle: props.sectionTitle,
+            sectionDescription: props.sectionDescription,
+            backLabel,
+            ariaLabel,
+            sectionChips,
+            activeItemId,
+            linkComponent,
+            onSelectItem,
+            testIdPrefix,
+            fillHeight,
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+SettingsLayout.displayName = "SettingsLayout";
+
+export {
+  SettingsLayout
+};
+//# sourceMappingURL=chunk-VRDNUY4H.js.map

package/dist/chunk-VYSFKR32.js

@@ -0,0 +1,97 @@
+import {
+  iconSx,
+  sizeConfigs
+} from "./chunk-6QLPSMTA.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/utility/AnimatedIcon/AnimatedIcon.tsx
+import Box from "@mui/material/Box/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var AnimationContainer = styled(Box)(({ theme, ...flags }) => ({
+  ...iconSx(theme, flags)
+}));
+var DEFAULTS = {
+  variant: "none",
+  size: "md",
+  duration: 2,
+  delay: 0,
+  loop: true,
+  glow: false,
+  glass: false,
+  metallic: false,
+  gradient: false,
+  shadow: "none",
+  ripple: false,
+  neon: false,
+  holographic: false
+};
+var AnimatedIcon = (props) => {
+  const {
+    children,
+    variant,
+    size,
+    color,
+    duration,
+    delay,
+    loop,
+    glow,
+    glass,
+    glowColor,
+    metallic,
+    gradient,
+    shadow,
+    ripple,
+    neon,
+    holographic,
+    className,
+    style,
+    "aria-label": ariaLabel,
+    onClick,
+    tabIndex,
+    onFocus,
+    onBlur,
+    dataTestId
+  } = withDefaults(props, DEFAULTS);
+  const config = sizeConfigs[size] ?? sizeConfigs.md;
+  return /* @__PURE__ */ jsx(
+    AnimationContainer,
+    {
+      $size: config.size,
+      $fontSize: config.glyph,
+      $animationVariant: variant,
+      $duration: duration,
+      $delay: delay,
+      $loop: loop,
+      $glow: glow,
+      $glass: glass,
+      $glowColor: glowColor,
+      $customColor: color,
+      $metallic: metallic,
+      $gradient: gradient,
+      $shadow: shadow,
+      $ripple: ripple,
+      $neon: neon,
+      $holographic: holographic,
+      className,
+      style,
+      role: "img",
+      "aria-label": ariaLabel || `Animated ${variant} icon`,
+      onClick,
+      tabIndex,
+      onFocus,
+      onBlur,
+      "data-testid": dataTestId,
+      children
+    }
+  );
+};
+var AnimatedIcon_default = AnimatedIcon;
+
+export {
+  AnimatedIcon,
+  AnimatedIcon_default
+};
+//# sourceMappingURL=chunk-VYSFKR32.js.map

package/dist/chunk-VYSFKR32.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/AnimatedIcon/AnimatedIcon.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { iconSx, sizeConfigs } from './AnimatedIcon.styles';\nimport type { IconStyleFlags } from './AnimatedIcon.styles';\nimport type { AnimatedIconProps } from './AnimatedIcon.types';\n\nconst AnimationContainer = styled(Box)<IconStyleFlags>(({ theme, ...flags }) => ({\n  ...iconSx(theme, flags),\n}));\n\nconst DEFAULTS = {\n  variant: 'none',\n  size: 'md',\n  duration: 2,\n  delay: 0,\n  loop: true,\n  glow: false,\n  glass: false,\n  metallic: false,\n  gradient: false,\n  shadow: 'none',\n  ripple: false,\n  neon: false,\n  holographic: false,\n} satisfies Partial<AnimatedIconProps>;\n\ntype ResolvedProps = AnimatedIconProps & Required<Pick<AnimatedIconProps, keyof typeof DEFAULTS>>;\n\nexport const AnimatedIcon: FC<AnimatedIconProps> = (props) => {\n  const {\n    children, variant, size, color, duration, delay, loop, glow, glass, glowColor,\n    metallic, gradient, shadow, ripple, neon, holographic, className, style,\n    'aria-label': ariaLabel, onClick, tabIndex, onFocus, onBlur, dataTestId,\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n\n  const config = sizeConfigs[size] ?? sizeConfigs.md;\n\n  return (\n    <AnimationContainer\n      $size={config.size}\n      $fontSize={config.glyph}\n      $animationVariant={variant}\n      $duration={duration}\n      $delay={delay}\n      $loop={loop}\n      $glow={glow}\n      $glass={glass}\n      $glowColor={glowColor}\n      $customColor={color}\n      $metallic={metallic}\n      $gradient={gradient}\n      $shadow={shadow}\n      $ripple={ripple}\n      $neon={neon}\n      $holographic={holographic}\n      className={className}\n      style={style}\n      role=\"img\"\n      aria-label={ariaLabel || `Animated ${variant} icon`}\n      onClick={onClick}\n      tabIndex={tabIndex}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      data-testid={dataTestId}\n    >\n      {children}\n    </AnimationContainer>\n  );\n};\n\nexport default AnimatedIcon;\n"],"mappings":";;;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAS,cAAc;AA0CnB;AAhCJ,IAAM,qBAAqB,OAAO,GAAG,EAAkB,CAAC,EAAE,OAAO,GAAG,MAAM,OAAO;AAAA,EAC/E,GAAG,OAAO,OAAO,KAAK;AACxB,EAAE;AAEF,IAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AAAA,EACV,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,aAAa;AACf;AAIO,IAAM,eAAsC,CAAC,UAAU;AAC5D,QAAM;AAAA,IACJ;AAAA,IAAU;AAAA,IAAS;AAAA,IAAM;AAAA,IAAO;AAAA,IAAU;AAAA,IAAO;AAAA,IAAM;AAAA,IAAM;AAAA,IAAO;AAAA,IACpE;AAAA,IAAU;AAAA,IAAU;AAAA,IAAQ;AAAA,IAAQ;AAAA,IAAM;AAAA,IAAa;AAAA,IAAW;AAAA,IAClE,cAAc;AAAA,IAAW;AAAA,IAAS;AAAA,IAAU;AAAA,IAAS;AAAA,IAAQ;AAAA,EAC/D,IAAI,aAAa,OAAO,QAAQ;AAEhC,QAAM,SAAS,YAAY,IAAI,KAAK,YAAY;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,OAAO;AAAA,MACd,WAAW,OAAO;AAAA,MAClB,mBAAmB;AAAA,MACnB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,WAAW;AAAA,MACX,WAAW;AAAA,MACX,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,cAAY,aAAa,YAAY,OAAO;AAAA,MAC5C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}

package/dist/chunk-WFAJTO2B.js

@@ -0,0 +1,304 @@
+import {
+  onMedia,
+  sheen,
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/TimingDiagram/TimingDiagram.views.tsx
+import Box from "@mui/material/Box/index.js";
+import Tooltip from "@mui/material/Tooltip/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled, useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var phaseColors = (theme) => {
+  const phases = uiInk(theme).timingPhases;
+  return {
+    dns: phases.dns,
+    connect: phases.connect,
+    ssl: phases.tls,
+    request: phases.request,
+    response: phases.response
+  };
+};
+var formatTime = (ms) => {
+  if (ms < 1e3) return `${ms}ms`;
+  return `${(ms / 1e3).toFixed(2)}s`;
+};
+var colorOf = (theme, phase) => phaseColors(theme)[phase.key];
+var widthOf = (percentages, phase) => percentages[phase.key] ?? 0;
+var withTooltip = (phase, enabled, element) => enabled ? /* @__PURE__ */ jsx(
+  Tooltip,
+  {
+    title: `${phase.label}: ${formatTime(phase.value)}`,
+    placement: "top",
+    role: "tooltip",
+    "aria-describedby": `tooltip-${phase.key}`,
+    children: element
+  },
+  phase.key
+) : element;
+var WaterfallContainer = styled(Box)(({ theme }) => ({
+  position: "relative",
+  width: "100%",
+  marginTop: theme.spacing(2)
+}));
+var WaterfallBar = styled(Box, {
+  shouldForwardProp: (prop) => !["phaseColor", "offset", "widthPct", "animated"].includes(prop)
+})(({ theme, phaseColor, offset, widthPct, animated }) => ({
+  position: "absolute",
+  height: rem(theme, 32),
+  left: `${offset}%`,
+  width: `${widthPct}%`,
+  background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.8)} 100%)`,
+  borderRadius: theme.shape.borderRadius,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: theme.palette.getContrastText(phaseColor),
+  fontSize: rem(theme, 12),
+  fontWeight: 500,
+  boxShadow: `${rems(theme, 0, 2, 8)} ${alpha(phaseColor, 0.3)}`,
+  transition: animated ? "all 0.5s ease" : "none",
+  animation: animated ? "slideIn 0.5s ease" : "none",
+  "@keyframes slideIn": {
+    from: {
+      transform: `translateX(${rem(theme, -20)})`,
+      opacity: 0
+    },
+    to: {
+      transform: "translateX(0)",
+      opacity: 1
+    }
+  },
+  "&:hover": {
+    transform: `translateY(${rem(theme, -2)})`,
+    boxShadow: `${rems(theme, 0, 4, 12)} ${alpha(phaseColor, 0.5)}`,
+    zIndex: 10
+  }
+}));
+var TimelineAxis = styled(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  marginTop: theme.spacing(1),
+  paddingTop: theme.spacing(1),
+  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+}));
+var TimeLabel = styled(Typography)(({ theme }) => ({
+  fontSize: rem(theme, 11.2),
+  color: theme.palette.text.secondary,
+  fontWeight: 500
+}));
+var WaterfallView = ({
+  phases,
+  percentages,
+  data,
+  animated,
+  showLabels,
+  showTooltips,
+  plotHeightPx
+}) => {
+  const theme = useTheme();
+  let offset = 0;
+  return /* @__PURE__ */ jsxs(WaterfallContainer, { style: { height: rem(theme, plotHeightPx + 40) }, "data-variant": "waterfall", children: [
+    phases.map((phase, index) => {
+      const width = widthOf(percentages, phase);
+      const currentOffset = offset;
+      offset += width;
+      return withTooltip(
+        phase,
+        showTooltips,
+        /* @__PURE__ */ jsx(
+          WaterfallBar,
+          {
+            "data-testid": `timing-segment-${phase.key}`,
+            phaseColor: colorOf(theme, phase),
+            offset: currentOffset,
+            widthPct: width,
+            animated,
+            "data-animated": animated.toString(),
+            style: {
+              top: rem(theme, index * 8),
+              width: `${width}%`,
+              left: `${currentOffset}%`
+            },
+            children: showLabels && width > 10 && /* @__PURE__ */ jsx("span", { "data-testid": "timing-label", children: formatTime(phase.value) })
+          },
+          phase.key
+        )
+      );
+    }),
+    /* @__PURE__ */ jsxs(TimelineAxis, { style: { marginTop: rem(theme, plotHeightPx) }, children: [
+      /* @__PURE__ */ jsx(TimeLabel, { children: "0ms" }),
+      /* @__PURE__ */ jsx(TimeLabel, { children: formatTime(data.total / 2) }),
+      /* @__PURE__ */ jsx(TimeLabel, { children: formatTime(data.total) })
+    ] })
+  ] });
+};
+var StackedBar = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "animated"
+})(({ theme, animated }) => ({
+  display: "flex",
+  width: "100%",
+  height: rem(theme, 40),
+  borderRadius: theme.shape.borderRadius,
+  overflow: "hidden",
+  boxShadow: theme.shadows[2],
+  ...animated && {
+    "& > div": {
+      animation: "expandWidth 0.8s ease"
+    },
+    "@keyframes expandWidth": {
+      from: { width: 0 },
+      to: { width: "100%" }
+    }
+  }
+}));
+var StackedSegment = styled(Box, {
+  shouldForwardProp: (prop) => !["phaseColor", "widthPct"].includes(prop)
+})(({ theme, phaseColor, widthPct }) => ({
+  width: `${widthPct}%`,
+  background: `linear-gradient(135deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.85)} 100%)`,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: onMedia(theme),
+  fontSize: rem(theme, 11.2),
+  fontWeight: 600,
+  position: "relative",
+  transition: "all 0.3s ease",
+  "&:hover": {
+    filter: "brightness(1.1)",
+    zIndex: 1
+  }
+}));
+var StackedView = ({
+  phases,
+  percentages,
+  data,
+  animated,
+  showLabels,
+  showTooltips
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Box, { "data-variant": "stacked", children: [
+    /* @__PURE__ */ jsx(StackedBar, { animated, "data-animated": animated.toString(), children: phases.map((phase) => {
+      const width = widthOf(percentages, phase);
+      return withTooltip(
+        phase,
+        showTooltips,
+        /* @__PURE__ */ jsx(
+          StackedSegment,
+          {
+            "data-testid": `timing-segment-${phase.key}`,
+            phaseColor: colorOf(theme, phase),
+            widthPct: width,
+            style: { width: `${width}%` },
+            children: showLabels && width > 10 && /* @__PURE__ */ jsx("span", { "data-testid": "timing-label", children: formatTime(phase.value) })
+          },
+          phase.key
+        )
+      );
+    }) }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", mt: 1 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "0ms" }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", fontWeight: "bold", children: [
+        "Total: ",
+        formatTime(data.total)
+      ] })
+    ] })
+  ] });
+};
+var HorizontalBar = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1),
+  marginTop: theme.spacing(2)
+}));
+var HorizontalSegment = styled(Box, {
+  shouldForwardProp: (prop) => !["phaseColor", "widthPct", "animated"].includes(prop)
+})(({ theme, phaseColor, animated }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(2),
+  "& .label": {
+    minWidth: rem(theme, 80),
+    fontSize: rem(theme, 13.6),
+    fontWeight: 500,
+    color: theme.palette.text.secondary
+  },
+  "& .bar": {
+    flex: 1,
+    height: rem(theme, 24),
+    borderRadius: theme.shape.borderRadius,
+    background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.7)} 100%)`,
+    position: "relative",
+    overflow: "hidden",
+    boxShadow: `${rems(theme, 0, 2, 6)} ${alpha(phaseColor, 0.25)}`,
+    ...animated && {
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: `linear-gradient(90deg, transparent 0%, ${sheen(theme, 0.3)} 50%, transparent 100%)`,
+        animation: "shimmer 2s infinite"
+      },
+      "@keyframes shimmer": {
+        from: { transform: "translateX(-100%)" },
+        to: { transform: "translateX(100%)" }
+      }
+    }
+  },
+  "& .value": {
+    minWidth: rem(theme, 60),
+    textAlign: "right",
+    fontSize: rem(theme, 13.6),
+    fontWeight: 600,
+    color: phaseColor
+  }
+}));
+var HorizontalView = ({
+  phases,
+  percentages,
+  data,
+  animated
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(HorizontalBar, { "data-variant": "horizontal", children: [
+    phases.map((phase) => /* @__PURE__ */ jsxs(
+      HorizontalSegment,
+      {
+        "data-testid": `timing-segment-${phase.key}`,
+        phaseColor: colorOf(theme, phase),
+        widthPct: widthOf(percentages, phase),
+        animated,
+        "data-animated": animated.toString(),
+        children: [
+          /* @__PURE__ */ jsx(Typography, { className: "label", children: phase.label }),
+          /* @__PURE__ */ jsx(Box, { className: "bar", style: { width: `${percentages[phase.key]}%` } }),
+          /* @__PURE__ */ jsx(Typography, { className: "value", "data-testid": "timing-label", children: formatTime(phase.value) })
+        ]
+      },
+      phase.key
+    )),
+    /* @__PURE__ */ jsx(Box, { sx: { mt: 2, pt: 2, borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}` }, children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", fontWeight: "bold", color: "primary", children: [
+      "Total Time: ",
+      formatTime(data.total)
+    ] }) })
+  ] });
+};
+
+export {
+  phaseColors,
+  formatTime,
+  WaterfallView,
+  StackedView,
+  HorizontalView
+};
+//# sourceMappingURL=chunk-WFAJTO2B.js.map