@12-apps/ui 6.10.1 → 6.11.1

package/dist/chunk-NY4QY5U3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Sheet/Sheet.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material';\nimport type { CSSObject, Theme } from '@mui/material';\nimport type React from 'react';\n\nimport { glowAnimation, pulseAnimation, shimmerAnimation } from './Sheet.animations';\nimport type { SheetProps } from './Sheet.types';\nimport { accentFor } from '../../../tokens/scales';\n\ntype Position = NonNullable<SheetProps['position']>;\ntype Variant = NonNullable<SheetProps['variant']>;\ntype Size = NonNullable<SheetProps['size']>;\ntype Color = NonNullable<SheetProps['color']>;\n\nconst isHorizontalPosition = (position: Position) => position === 'left' || position === 'right';\n\n/**\n * Horizontal (left/right) sheets are viewport-aware: a px floor keeps the panel\n * usable, `…vw` lets the larger presets grow on wide screens (lg ≥32%, xl ≥40%\n * of the viewport), and the outer `min(92vw, …)` guarantees the panel never\n * overflows a small screen. Vertical presets stay fixed-height.\n */\nconst HORIZONTAL_SIZES: Record<Size, string> = {\n  xs: 'min(92vw, 240px)',\n  sm: 'min(92vw, 320px)',\n  md: 'min(92vw, 400px)',\n  lg: 'min(92vw, max(560px, 32vw))',\n  xl: 'min(92vw, max(720px, 40vw))',\n  full: '100%',\n};\n\nconst VERTICAL_SIZES: Record<Size, number | string> = {\n  xs: 200,\n  sm: 300,\n  md: 400,\n  lg: 500,\n  xl: 600,\n  full: '100%',\n};\n\ninterface SizeStyleInput {\n  position: Position;\n  size: Size;\n  isDraggableVariant: boolean;\n  isVerticalSheet: boolean;\n  currentHeight: number | null;\n}\n\nconst sizeStyles = ({\n  position,\n  size,\n  isDraggableVariant,\n  isVerticalSheet,\n  currentHeight,\n}: SizeStyleInput) => {\n  // The draggable variant owns its own height: the snap point decides it, so a\n  // preset would fight the drag.\n  if (isDraggableVariant && isVerticalSheet && currentHeight !== null) {\n    return { height: currentHeight };\n  }\n\n  return isHorizontalPosition(position)\n    ? { width: HORIZONTAL_SIZES[size] ?? HORIZONTAL_SIZES.md }\n    : { height: VERTICAL_SIZES[size] ?? VERTICAL_SIZES.md };\n};\n\n/** `r, g, b` for a hex colour, so it can feed an `rgba(var(--x), a)` custom property. */\nconst toRgbTriplet = (hexColor: string) => {\n  const hex = hexColor.replace('#', '');\n  const r = parseInt(hex.substring(0, 2), 16);\n  const g = parseInt(hex.substring(2, 4), 16);\n  const b = parseInt(hex.substring(4, 6), 16);\n  return `${r}, ${g}, ${b}`;\n};\n\nconst roundedStyles = (theme: Theme, position: Position) => {\n  const radius = theme.spacing(2);\n  const byPosition: Record<Position, string> = {\n    top: `0 0 ${radius} ${radius}`,\n    bottom: `${radius} ${radius} 0 0`,\n    left: `0 ${radius} ${radius} 0`,\n    right: `${radius} 0 0 ${radius}`,\n  };\n  return { borderRadius: byPosition[position] };\n};\n\ninterface VariantStyleInput {\n  theme: Theme;\n  variant: Variant;\n  color: Color;\n  position: Position;\n  elevation: number;\n  glow: boolean;\n  pulse: boolean;\n  glass: boolean;\n  gradient: boolean;\n  rounded: boolean;\n  disabled: boolean;\n  isDragging: boolean;\n  isAnimating: boolean;\n  isDraggableVariant: boolean;\n  isVerticalSheet: boolean;\n}\n\ntype SurfaceInput = VariantStyleInput & { accent: string };\n\n/**\n * Each variant's own additions to the shared surface — never the shared part\n * itself. Every arm of the old switch re-spread the same base, glow, pulse and\n * rounded objects before adding these few rules; `variantStyles` applies that\n * prefix once and lets the table hold only what actually differs.\n */\nconst SURFACES: Record<Variant, (input: SurfaceInput) => Record<string, unknown>> = {\n  draggable: ({ theme, elevation, accent }) => ({\n    boxShadow: `\n            ${theme.shadows[Math.min(elevation + 4, 24)]},\n            0 -2px 10px 0 ${alpha(theme.palette.common.black, 0.1)}\n          `,\n    border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,\n    borderTop: `2px solid ${alpha(accent, 0.3)}`,\n    transition: theme.transitions.create(['transform', 'box-shadow', 'border-color'], {\n      duration: theme.transitions.duration.shorter,\n      easing: theme.transitions.easing.easeInOut,\n    }),\n    '&:hover': { borderTopColor: alpha(accent, 0.5) },\n  }),\n\n  glass: ({ theme, glass }) => ({\n    backgroundColor: alpha(theme.palette.background.paper, glass ? 0.75 : 0.95),\n    backdropFilter: 'blur(24px) saturate(180%)',\n    WebkitBackdropFilter: 'blur(24px) saturate(180%)',\n    border: `1px solid ${alpha(theme.palette.divider, 0.15)}`,\n    boxShadow: `\n            0 8px 32px 0 ${alpha(theme.palette.common.black, 0.15)},\n            inset 0 0 0 1px ${alpha(theme.palette.common.white, 0.1)}\n          `,\n  }),\n\n  gradient: ({ theme, color, gradient, accent }) => ({\n    background: gradient\n      ? `linear-gradient(\n                135deg,\n                ${theme.palette.background.paper} 0%,\n                ${alpha(accent, 0.08)} 50%,\n                ${alpha(accentFor(theme, color)?.dark || accent, 0.12)} 100%\n              )`\n      : theme.palette.background.paper,\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n    '&::before': gradient ? shimmerOverlay(theme) : {},\n  }),\n\n  elevated: ({ theme, elevation }) => ({\n    boxShadow: `\n            ${theme.shadows[elevation]},\n            0 20px 40px -15px ${alpha(theme.palette.common.black, 0.15)}\n          `,\n    transform: 'translateZ(0)',\n    willChange: 'transform',\n  }),\n\n  minimal: () => ({ boxShadow: 'none', border: 'none' }),\n\n  default: () => ({}),\n};\n\n/** The sweep of light the gradient variant runs across itself. */\nconst shimmerOverlay = (theme: Theme) => ({\n  content: '\"\"',\n  position: 'absolute',\n  top: 0,\n  left: '-100%',\n  width: '100%',\n  height: '100%',\n  background: `linear-gradient(\n              90deg,\n              transparent,\n              ${alpha(theme.palette.common.white, 0.2)},\n              transparent\n            )`,\n  animation: `${shimmerAnimation} 3s infinite`,\n});\n\n/**\n * The parts of the surface that do not depend on the variant: the paper colour,\n * the transition suppression while a drag or spring is driving the panel, the\n * disabled and cursor states, and the two colour custom properties the glow and\n * pulse keyframes read.\n */\nconst baseSurface = (input: VariantStyleInput, accent: string) => {\n  const { theme, disabled, isDragging, isAnimating, isDraggableVariant, isVerticalSheet } = input;\n  const colorRgb = toRgbTriplet(accent);\n\n  return {\n    backgroundColor: theme.palette.background.paper,\n    // A transition would fight the per-frame height writes while a drag or a\n    // snap animation is driving the panel.\n    transition:\n      !isDragging && !isAnimating\n        ? theme.transitions.create(['all'], {\n            duration: theme.transitions.duration.standard,\n            easing: theme.transitions.easing.easeInOut,\n          })\n        : 'none',\n    opacity: disabled ? 0.5 : 1,\n    pointerEvents: disabled ? ('none' as const) : ('auto' as const),\n    cursor: isDraggableVariant && isVerticalSheet ? 'grab' : 'auto',\n    '--pulse-color': colorRgb,\n    '--glow-color': colorRgb,\n    ...(isDragging && { cursor: 'grabbing' }),\n  };\n};\n\nconst variantStyles = (input: VariantStyleInput) => {\n  const { theme, variant, color, position, glow, pulse, rounded } = input;\n  const accent = accentFor(theme, color)?.main || theme.palette.primary.main;\n\n  return {\n    ...baseSurface(input, accent),\n    // glow first, then pulse: with both set the pulse keyframes win the shared\n    // `animation` slot, which is the order the original spread produced.\n    ...(glow && { animation: `${glowAnimation} 2s ease-in-out infinite`, filter: 'brightness(1.05)' }),\n    ...(pulse && { animation: `${pulseAnimation} 2s infinite`, position: 'relative' as const }),\n    ...(rounded && roundedStyles(theme, position)),\n    ...(SURFACES[variant] ?? SURFACES.default)({ ...input, accent }),\n  };\n};\n\ninterface PanelSxInput extends VariantStyleInput {\n  size: Size;\n  currentHeight: number | null;\n  fullHeight: boolean;\n  style?: React.CSSProperties;\n}\n\n/**\n * The drawer paper's complete `sx`: its size, its variant surface, the caller's\n * own `style`, and the full-height rule.\n *\n * Built here rather than in the component so the component holds no style\n * branches of its own — the cross-axis rule below is four on its own.\n */\nexport const panelSx = (input: PanelSxInput): CSSObject => {\n  const { position, size, isDraggableVariant, isVerticalSheet, currentHeight, fullHeight, style } =\n    input;\n\n  return {\n    ...sizeStyles({ position, size, isDraggableVariant, isVerticalSheet, currentHeight }),\n    ...variantStyles(input),\n    ...style,\n    overflow: 'visible',\n    // Expand only the cross axis so the chosen `size` still governs the main\n    // axis: side sheets keep their (responsive) width and go full-height;\n    // top/bottom sheets keep their height and go full-width.\n    ...(fullHeight &&\n      !isDraggableVariant &&\n      (isHorizontalPosition(position) ? { height: '100%' } : { width: '100%' })),\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-NYZO3JNB.js

@@ -0,0 +1,46 @@
+// src/components/feedback/TutorialOverlay/TutorialOverlay.geometry.ts
+var DEFAULT_PADDING = 16;
+var getElementBounds = (selector) => document.querySelector(selector)?.getBoundingClientRect() ?? null;
+var pickPlacement = (targetBounds) => {
+  const spaces = {
+    top: targetBounds.top,
+    bottom: window.innerHeight - targetBounds.bottom,
+    left: targetBounds.left,
+    right: window.innerWidth - targetBounds.right
+  };
+  return Object.entries(spaces).reduce((a, b) => b[1] > a[1] ? b : a)[0];
+};
+var offsetFor = (placement, targetBounds, tooltipBounds, padding) => {
+  const centredLeft = targetBounds.left + targetBounds.width / 2 - tooltipBounds.width / 2;
+  const centredTop = targetBounds.top + targetBounds.height / 2 - tooltipBounds.height / 2;
+  switch (placement) {
+    case "top":
+      return { top: targetBounds.top - tooltipBounds.height - padding, left: centredLeft };
+    case "bottom":
+      return { top: targetBounds.bottom + padding, left: centredLeft };
+    case "left":
+      return { top: centredTop, left: targetBounds.left - tooltipBounds.width - padding };
+    case "right":
+      return { top: centredTop, left: targetBounds.right + padding };
+    default:
+      return { top: 0, left: 0 };
+  }
+};
+var clampToViewport = (position, tooltipBounds, padding) => ({
+  top: Math.max(padding, Math.min(position.top, window.innerHeight - tooltipBounds.height - padding)),
+  left: Math.max(padding, Math.min(position.left, window.innerWidth - tooltipBounds.width - padding))
+});
+var calculateTooltipPosition = (targetBounds, tooltipBounds, placement, padding = DEFAULT_PADDING) => {
+  const finalPlacement = placement === "auto" ? pickPlacement(targetBounds) : placement;
+  const offset = offsetFor(finalPlacement, targetBounds, tooltipBounds, padding);
+  return {
+    position: clampToViewport(offset, tooltipBounds, padding),
+    placement: finalPlacement
+  };
+};
+
+export {
+  getElementBounds,
+  calculateTooltipPosition
+};
+//# sourceMappingURL=chunk-NYZO3JNB.js.map

package/dist/chunk-NYZO3JNB.js.map

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

package/dist/chunk-NYZZOQV4.js

@@ -0,0 +1,73 @@
+// src/components/navigation/Tabs/TabsPanel.tsx
+import { Box, CircularProgress, Fade } from "@mui/material";
+import { styled } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var TabPanel = styled(Box, {
+  shouldForwardProp: (prop) => !["animate", "persist"].includes(prop)
+})(({ animate, persist }) => ({
+  width: "100%",
+  ...animate && {
+    transition: "all 0.3s ease-in-out"
+  },
+  ...persist && {
+    "&[hidden]": {
+      display: "none !important"
+    }
+  }
+}));
+var LoadingContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minHeight: 200,
+  color: theme.palette.text.secondary
+}));
+var panelContent = (loading, loadingComponent, children) => {
+  if (!loading) return children;
+  return loadingComponent || /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(CircularProgress, { size: 32 }) });
+};
+var panelTestId = (dataTestId, index) => dataTestId ? `${dataTestId}-panel-${index}` : `tabs-panel-${index}`;
+var CustomTabPanel = ({
+  children,
+  id,
+  value,
+  animate = false,
+  animationDuration = 300,
+  persist = false,
+  loading = false,
+  loadingComponent,
+  className,
+  dataTestId,
+  index,
+  ...props
+}) => {
+  const isActive = value === id;
+  const shouldRender = isActive || persist;
+  if (!shouldRender) {
+    return null;
+  }
+  const content = panelContent(loading, loadingComponent, children);
+  const testId = panelTestId(dataTestId, index);
+  const panel = /* @__PURE__ */ jsx(
+    TabPanel,
+    {
+      role: "tabpanel",
+      hidden: !isActive,
+      id: `tabpanel-${id}`,
+      "aria-labelledby": `tab-${id}`,
+      animate,
+      persist,
+      className,
+      "data-testid": testId,
+      ...props,
+      children: content
+    }
+  );
+  if (!animate) return panel;
+  return /* @__PURE__ */ jsx(Fade, { in: isActive, timeout: animationDuration, children: panel });
+};
+
+export {
+  CustomTabPanel
+};
+//# sourceMappingURL=chunk-NYZZOQV4.js.map

package/dist/chunk-NYZZOQV4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Tabs/TabsPanel.tsx"],"sourcesContent":["import { Box, CircularProgress, Fade } from '@mui/material';\nimport { styled } from '@mui/material';\nimport React from 'react';\n\nimport type { TabPanelProps } from './Tabs.types';\n\nconst TabPanel = styled(Box, {\n  shouldForwardProp: (prop) => !['animate', 'persist'].includes(prop as string),\n})<{ animate?: boolean; persist?: boolean }>(({ animate, persist }) => ({\n  width: '100%',\n\n  ...(animate && {\n    transition: 'all 0.3s ease-in-out',\n  }),\n\n  ...(persist && {\n    '&[hidden]': {\n      display: 'none !important',\n    },\n  }),\n}));\n\nconst LoadingContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  minHeight: 200,\n  color: theme.palette.text.secondary,\n}));\n\n// A loading panel shows the caller's placeholder, or a spinner if there isn't one.\nconst panelContent = (\n  loading: boolean,\n  loadingComponent: React.ReactNode,\n  children: React.ReactNode,\n): React.ReactNode => {\n  if (!loading) return children;\n\n  return (\n    loadingComponent || (\n      <LoadingContainer>\n        <CircularProgress size={32} />\n      </LoadingContainer>\n    )\n  );\n};\n\nconst panelTestId = (dataTestId: string | undefined, index: number): string =>\n  dataTestId ? `${dataTestId}-panel-${index}` : `tabs-panel-${index}`;\n\nexport const CustomTabPanel: React.FC<TabPanelProps & { dataTestId?: string; index: number }> = ({\n  children,\n  id,\n  value,\n  animate = false,\n  animationDuration = 300,\n  persist = false,\n  loading = false,\n  loadingComponent,\n  className,\n  dataTestId,\n  index,\n  ...props\n}) => {\n  const isActive = value === id;\n  const shouldRender = isActive || persist;\n\n  if (!shouldRender) {\n    return null;\n  }\n\n  const content = panelContent(loading, loadingComponent, children);\n  const testId = panelTestId(dataTestId, index);\n\n  const panel = (\n    <TabPanel\n      role=\"tabpanel\"\n      hidden={!isActive}\n      id={`tabpanel-${id}`}\n      aria-labelledby={`tab-${id}`}\n      animate={animate}\n      persist={persist}\n      className={className}\n      data-testid={testId}\n      {...props}\n    >\n      {content}\n    </TabPanel>\n  );\n\n  // The animated and plain panels are the same element; only the Fade wrapper\n  // differs.\n  if (!animate) return panel;\n\n  return (\n    <Fade in={isActive} timeout={animationDuration}>\n      {panel}\n    </Fade>\n  );\n};\n"],"mappings":";AAAA,SAAS,KAAK,kBAAkB,YAAY;AAC5C,SAAS,cAAc;AAwCf;AAnCR,IAAM,WAAW,OAAO,KAAK;AAAA,EAC3B,mBAAmB,CAAC,SAAS,CAAC,CAAC,WAAW,SAAS,EAAE,SAAS,IAAc;AAC9E,CAAC,EAA4C,CAAC,EAAE,SAAS,QAAQ,OAAO;AAAA,EACtE,OAAO;AAAA,EAEP,GAAI,WAAW;AAAA,IACb,YAAY;AAAA,EACd;AAAA,EAEA,GAAI,WAAW;AAAA,IACb,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,EACF;AACF,EAAE;AAEF,IAAM,mBAAmB,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACnD,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,OAAO,MAAM,QAAQ,KAAK;AAC5B,EAAE;AAGF,IAAM,eAAe,CACnB,SACA,kBACA,aACoB;AACpB,MAAI,CAAC,QAAS,QAAO;AAErB,SACE,oBACE,oBAAC,oBACC,8BAAC,oBAAiB,MAAM,IAAI,GAC9B;AAGN;AAEA,IAAM,cAAc,CAAC,YAAgC,UACnD,aAAa,GAAG,UAAU,UAAU,KAAK,KAAK,cAAc,KAAK;AAE5D,IAAM,iBAAmF,CAAC;AAAA,EAC/F;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,WAAW,UAAU;AAC3B,QAAM,eAAe,YAAY;AAEjC,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,aAAa,SAAS,kBAAkB,QAAQ;AAChE,QAAM,SAAS,YAAY,YAAY,KAAK;AAE5C,QAAM,QACJ;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAQ,CAAC;AAAA,MACT,IAAI,YAAY,EAAE;AAAA,MAClB,mBAAiB,OAAO,EAAE;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAKF,MAAI,CAAC,QAAS,QAAO;AAErB,SACE,oBAAC,QAAK,IAAI,UAAU,SAAS,mBAC1B,iBACH;AAEJ;","names":[]}

package/dist/chunk-NZC63KJ7.js

@@ -0,0 +1,108 @@
+import {
+  HorizontalView,
+  StackedView,
+  WaterfallView,
+  phaseColors
+} from "./chunk-KG2D7C2M.js";
+
+// src/components/data-display/TimingDiagram/TimingDiagram.tsx
+import { alpha, Box, Paper, styled, Typography } from "@mui/material";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DiagramContainer = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(3),
+  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)",
+  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+  borderRadius: theme.shape.borderRadius * 2
+}));
+var Legend = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: theme.spacing(2),
+  marginTop: theme.spacing(2),
+  paddingTop: theme.spacing(2),
+  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+}));
+var LegendItem = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  "& .color": {
+    width: 12,
+    height: 12,
+    borderRadius: 2
+  },
+  "& .label": {
+    fontSize: "0.8rem",
+    color: theme.palette.text.secondary
+  }
+}));
+var calculatePercentages = (data) => {
+  const total = data.total || 1;
+  return {
+    dns: (data.dns || 0) / total * 100,
+    connect: (data.connect || 0) / total * 100,
+    ssl: (data.ssl || 0) / total * 100,
+    request: (data.request || 0) / total * 100,
+    response: (data.response || 0) / total * 100
+  };
+};
+var phasesOf = (data) => [
+  { key: "dns", label: "DNS Lookup", value: data.dns },
+  { key: "connect", label: "Connection", value: data.connect },
+  { key: "ssl", label: "SSL/TLS", value: data.ssl },
+  { key: "request", label: "Request", value: data.request },
+  { key: "response", label: "Response", value: data.response }
+].filter((phase) => phase.value !== void 0 && phase.value > 0);
+var VIEWS = {
+  waterfall: WaterfallView,
+  stacked: StackedView,
+  horizontal: HorizontalView
+};
+var TimingDiagram = ({
+  copy,
+  data,
+  showLabels = true,
+  height = 40,
+  animated = true,
+  showTooltips = true,
+  variant = "waterfall"
+}) => {
+  const percentages = useMemo(() => calculatePercentages(data), [data]);
+  const phases = phasesOf(data);
+  const View = VIEWS[variant];
+  return /* @__PURE__ */ jsxs(DiagramContainer, { elevation: 2, role: "region", "aria-label": copy.regionLabel, tabIndex: 0, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h6", fontWeight: "bold", gutterBottom: true, children: copy.heading }),
+    View && /* @__PURE__ */ jsx(
+      View,
+      {
+        phases,
+        percentages,
+        data,
+        animated,
+        showLabels,
+        showTooltips,
+        height
+      }
+    ),
+    showLabels && /* @__PURE__ */ jsx(Legend, { children: phases.map((phase) => /* @__PURE__ */ jsxs(LegendItem, { children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: "color",
+          sx: { backgroundColor: phaseColors[phase.key] }
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { className: "label", children: phase.label })
+    ] }, phase.key)) })
+  ] });
+};
+var TimingDiagram_default = TimingDiagram;
+
+export {
+  TimingDiagram,
+  TimingDiagram_default
+};
+//# sourceMappingURL=chunk-NZC63KJ7.js.map

package/dist/chunk-NZC63KJ7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/TimingDiagram/TimingDiagram.tsx"],"sourcesContent":["import { alpha, Box, Paper, styled, Typography } from '@mui/material';\nimport type { FC } from 'react';\nimport React, { useMemo } from 'react';\n\nimport type { TimingData, TimingDiagramProps } from './TimingDiagram.types';\nimport type { Phase, PhaseKey, TimingViewProps } from './TimingDiagram.views';\nimport {\n  HorizontalView,\n  phaseColors,\n  StackedView,\n  WaterfallView,\n} from './TimingDiagram.views';\n\n// Styled components\nconst DiagramContainer = styled(Paper)(({ theme }) => ({\n  padding: theme.spacing(3),\n  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,\n  backdropFilter: 'blur(10px)',\n  WebkitBackdropFilter: 'blur(10px)',\n  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n  borderRadius: theme.shape.borderRadius * 2,\n}));\n\nconst Legend = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: theme.spacing(2),\n  marginTop: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n}));\n\nconst LegendItem = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  '& .color': {\n    width: 12,\n    height: 12,\n    borderRadius: 2,\n  },\n  '& .label': {\n    fontSize: '0.8rem',\n    color: theme.palette.text.secondary,\n  },\n}));\n\n// Helper functions\nconst calculatePercentages = (data: TimingData): Record<string, number> => {\n  const total = data.total || 1;\n  return {\n    dns: ((data.dns || 0) / total) * 100,\n    connect: ((data.connect || 0) / total) * 100,\n    ssl: ((data.ssl || 0) / total) * 100,\n    request: ((data.request || 0) / total) * 100,\n    response: ((data.response || 0) / total) * 100,\n  };\n};\n\n// A phase with no recorded time never happened — an HTTP request has no SSL\n// handshake, for instance — so it gets no bar and no legend entry.\nconst phasesOf = (data: TimingData): Phase[] =>\n  [\n    { key: 'dns', label: 'DNS Lookup', value: data.dns },\n    { key: 'connect', label: 'Connection', value: data.connect },\n    { key: 'ssl', label: 'SSL/TLS', value: data.ssl },\n    { key: 'request', label: 'Request', value: data.request },\n    { key: 'response', label: 'Response', value: data.response },\n  ].filter((phase) => phase.value !== undefined && phase.value > 0);\n\nconst VIEWS: Record<string, FC<TimingViewProps>> = {\n  waterfall: WaterfallView,\n  stacked: StackedView,\n  horizontal: HorizontalView,\n};\n\n// Main component\nexport const TimingDiagram: FC<TimingDiagramProps> = ({\n  copy,\n  data,\n  showLabels = true,\n  height = 40,\n  animated = true,\n  showTooltips = true,\n  variant = 'waterfall',\n}) => {\n  const percentages = useMemo(() => calculatePercentages(data), [data]);\n  const phases = phasesOf(data);\n  const View = VIEWS[variant];\n\n  return (\n    <DiagramContainer elevation={2} role=\"region\" aria-label={copy.regionLabel} tabIndex={0}>\n      <Typography variant=\"h6\" fontWeight=\"bold\" gutterBottom>\n        {copy.heading}\n      </Typography>\n\n      {View && (\n        <View\n          phases={phases}\n          percentages={percentages}\n          data={data}\n          animated={animated}\n          showLabels={showLabels}\n          showTooltips={showTooltips}\n          height={height}\n        />\n      )}\n\n      {showLabels && (\n        <Legend>\n          {phases.map((phase) => (\n            <LegendItem key={phase.key}>\n              <Box\n                className=\"color\"\n                sx={{ backgroundColor: phaseColors[phase.key as PhaseKey] }}\n              />\n              <Typography className=\"label\">{phase.label}</Typography>\n            </LegendItem>\n          ))}\n        </Legend>\n      )}\n    </DiagramContainer>\n  );\n};\n\n// Export default\nexport default TimingDiagram;\n"],"mappings":";;;;;;;;AAAA,SAAS,OAAO,KAAK,OAAO,QAAQ,kBAAkB;AAEtD,SAAgB,eAAe;AA0FzB,cAmBM,YAnBN;AA9EN,IAAM,mBAAmB,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACrD,SAAS,MAAM,QAAQ,CAAC;AAAA,EACxB,YAAY,2BAA2B,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC;AAAA,EACnI,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,IAAI,CAAC;AAAA,EACvD,cAAc,MAAM,MAAM,eAAe;AAC3C,EAAE;AAEF,IAAM,SAAS,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACzC,SAAS;AAAA,EACT,UAAU;AAAA,EACV,KAAK,MAAM,QAAQ,CAAC;AAAA,EACpB,WAAW,MAAM,QAAQ,CAAC;AAAA,EAC1B,YAAY,MAAM,QAAQ,CAAC;AAAA,EAC3B,WAAW,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC;AAC3D,EAAE;AAEF,IAAM,aAAa,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EAC7C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK,MAAM,QAAQ,CAAC;AAAA,EACpB,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,EAChB;AAAA,EACA,YAAY;AAAA,IACV,UAAU;AAAA,IACV,OAAO,MAAM,QAAQ,KAAK;AAAA,EAC5B;AACF,EAAE;AAGF,IAAM,uBAAuB,CAAC,SAA6C;AACzE,QAAM,QAAQ,KAAK,SAAS;AAC5B,SAAO;AAAA,IACL,MAAO,KAAK,OAAO,KAAK,QAAS;AAAA,IACjC,UAAW,KAAK,WAAW,KAAK,QAAS;AAAA,IACzC,MAAO,KAAK,OAAO,KAAK,QAAS;AAAA,IACjC,UAAW,KAAK,WAAW,KAAK,QAAS;AAAA,IACzC,WAAY,KAAK,YAAY,KAAK,QAAS;AAAA,EAC7C;AACF;AAIA,IAAM,WAAW,CAAC,SAChB;AAAA,EACE,EAAE,KAAK,OAAO,OAAO,cAAc,OAAO,KAAK,IAAI;AAAA,EACnD,EAAE,KAAK,WAAW,OAAO,cAAc,OAAO,KAAK,QAAQ;AAAA,EAC3D,EAAE,KAAK,OAAO,OAAO,WAAW,OAAO,KAAK,IAAI;AAAA,EAChD,EAAE,KAAK,WAAW,OAAO,WAAW,OAAO,KAAK,QAAQ;AAAA,EACxD,EAAE,KAAK,YAAY,OAAO,YAAY,OAAO,KAAK,SAAS;AAC7D,EAAE,OAAO,CAAC,UAAU,MAAM,UAAU,UAAa,MAAM,QAAQ,CAAC;AAElE,IAAM,QAA6C;AAAA,EACjD,WAAW;AAAA,EACX,SAAS;AAAA,EACT,YAAY;AACd;AAGO,IAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,SAAS;AAAA,EACT,WAAW;AAAA,EACX,eAAe;AAAA,EACf,UAAU;AACZ,MAAM;AACJ,QAAM,cAAc,QAAQ,MAAM,qBAAqB,IAAI,GAAG,CAAC,IAAI,CAAC;AACpE,QAAM,SAAS,SAAS,IAAI;AAC5B,QAAM,OAAO,MAAM,OAAO;AAE1B,SACE,qBAAC,oBAAiB,WAAW,GAAG,MAAK,UAAS,cAAY,KAAK,aAAa,UAAU,GACpF;AAAA,wBAAC,cAAW,SAAQ,MAAK,YAAW,QAAO,cAAY,MACpD,eAAK,SACR;AAAA,IAEC,QACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IAGD,cACC,oBAAC,UACE,iBAAO,IAAI,CAAC,UACX,qBAAC,cACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,IAAI,EAAE,iBAAiB,YAAY,MAAM,GAAe,EAAE;AAAA;AAAA,MAC5D;AAAA,MACA,oBAAC,cAAW,WAAU,SAAS,gBAAM,OAAM;AAAA,SAL5B,MAAM,GAMvB,CACD,GACH;AAAA,KAEJ;AAEJ;AAGA,IAAO,wBAAQ;","names":[]}

package/dist/chunk-NZD2WISW.js

@@ -0,0 +1,156 @@
+import {
+  dynamicViewportHeight
+} from "./chunk-IHS3GDPZ.js";
+
+// src/components/feedback/Dialog/Dialog.styles.ts
+import { alpha, keyframes } from "@mui/material";
+var pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 20px currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+function borderRadiusOf(theme, borderRadius) {
+  switch (borderRadius) {
+    case "none":
+      return 0;
+    case "sm":
+      return theme.spacing(0.5);
+    case "md":
+      return theme.spacing(1);
+    case "xl":
+      return theme.spacing(3);
+    case "lg":
+    default:
+      return theme.spacing(2);
+  }
+}
+function maxWidthOf(size) {
+  switch (size) {
+    case "xs":
+      return 400;
+    case "sm":
+      return 600;
+    case "lg":
+      return 1e3;
+    case "xl":
+      return 1200;
+    case "md":
+    default:
+      return 800;
+  }
+}
+function baseStylesOf(theme, opts) {
+  return {
+    borderRadius: borderRadiusOf(theme, opts.borderRadius),
+    maxWidth: maxWidthOf(opts.size),
+    width: "90vw",
+    margin: theme.spacing(2),
+    transition: theme.transitions.create(
+      ["box-shadow", "background-color", "backdrop-filter"],
+      { duration: theme.transitions.duration.standard }
+    )
+  };
+}
+function glowStylesOf(theme, glow) {
+  return glow ? { boxShadow: `0 0 40px ${alpha(theme.palette.primary.main, 0.3)}` } : {};
+}
+function pulseStylesOf(theme, pulse) {
+  if (!pulse) return {};
+  return {
+    position: "relative",
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: "inherit",
+      backgroundColor: theme.palette.primary.main,
+      opacity: 0.3,
+      animation: `${pulseAnimation} 2s infinite`,
+      pointerEvents: "none",
+      zIndex: -1
+    }
+  };
+}
+function defaultVariantStyles(theme, opts) {
+  const gradientStyles = opts.gradient ? {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,
+    backdropFilter: "blur(10px)"
+  } : {};
+  return {
+    ...gradientStyles,
+    backgroundColor: opts.glass ? alpha(theme.palette.background.paper, 0.1) : theme.palette.background.paper,
+    backdropFilter: opts.glass ? "blur(20px)" : "none",
+    border: opts.glass ? `1px solid ${alpha(theme.palette.primary.main, 0.2)}` : "none"
+  };
+}
+function variantStylesOf(theme, opts) {
+  const decorations = {
+    ...glowStylesOf(theme, opts.glow),
+    ...pulseStylesOf(theme, opts.pulse)
+  };
+  switch (opts.variant) {
+    case "glass":
+      return {
+        ...baseStylesOf(theme, opts),
+        ...decorations,
+        backgroundColor: alpha(theme.palette.background.paper, 0.1),
+        backdropFilter: "blur(20px)",
+        border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+        boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`
+      };
+    case "fullscreen":
+      return {
+        borderRadius: 0,
+        margin: 0,
+        width: "100vw",
+        // `100dvh`, not `100vh` — see `dynamicViewportHeight`.
+        ...dynamicViewportHeight("height"),
+        maxWidth: "none",
+        maxHeight: "none",
+        ...decorations
+      };
+    case "drawer": {
+      const radius = borderRadiusOf(theme, opts.borderRadius);
+      return {
+        borderRadius: `${radius}px 0 0 ${radius}px`,
+        margin: 0,
+        width: maxWidthOf(opts.size),
+        ...dynamicViewportHeight("height"),
+        maxHeight: "none",
+        position: "absolute",
+        right: 0,
+        ...decorations
+      };
+    }
+    default:
+      return {
+        ...baseStylesOf(theme, opts),
+        ...decorations,
+        ...defaultVariantStyles(theme, opts)
+      };
+  }
+}
+function backdropSxOf(theme, glass) {
+  return {
+    backgroundColor: glass ? alpha(theme.palette.common.black, 0.2) : alpha(theme.palette.common.black, 0.5),
+    backdropFilter: glass ? "blur(8px)" : "none"
+  };
+}
+
+export {
+  variantStylesOf,
+  backdropSxOf
+};
+//# sourceMappingURL=chunk-NZD2WISW.js.map

package/dist/chunk-NZD2WISW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Dialog/Dialog.styles.ts"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material';\nimport { alpha, keyframes } from '@mui/material';\n\nimport { dynamicViewportHeight } from '../../../utils/viewport';\nimport type { DialogProps } from './Dialog.types';\n\n/**\n * Paper/backdrop styling for the Dialog component (FUT-181 gate cleanup):\n * pure helpers so `Dialog.tsx` stays within the size/complexity budget.\n */\n\n// Define pulse animation\nconst pulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 20px currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\n/** Style toggles that shape the dialog paper (extracted so each fn stays small). */\ninterface VariantStyleOptions {\n  variant: NonNullable<DialogProps['variant']>;\n  size: NonNullable<DialogProps['size']>;\n  borderRadius: NonNullable<DialogProps['borderRadius']>;\n  glass: boolean;\n  gradient: boolean;\n  glow: boolean;\n  pulse: boolean;\n}\n\nfunction borderRadiusOf(theme: Theme, borderRadius: VariantStyleOptions['borderRadius']) {\n  switch (borderRadius) {\n    case 'none': return 0;\n    case 'sm': return theme.spacing(0.5);\n    case 'md': return theme.spacing(1);\n    case 'xl': return theme.spacing(3);\n    case 'lg':\n    default: return theme.spacing(2);\n  }\n}\n\nfunction maxWidthOf(size: VariantStyleOptions['size']): number {\n  switch (size) {\n    case 'xs': return 400;\n    case 'sm': return 600;\n    case 'lg': return 1000;\n    case 'xl': return 1200;\n    case 'md':\n    default: return 800;\n  }\n}\n\nfunction baseStylesOf(theme: Theme, opts: VariantStyleOptions) {\n  return {\n    borderRadius: borderRadiusOf(theme, opts.borderRadius),\n    maxWidth: maxWidthOf(opts.size),\n    width: '90vw',\n    margin: theme.spacing(2),\n    transition: theme.transitions.create(\n      ['box-shadow', 'background-color', 'backdrop-filter'],\n      { duration: theme.transitions.duration.standard },\n    ),\n  };\n}\n\nfunction glowStylesOf(theme: Theme, glow: boolean) {\n  return glow ? { boxShadow: `0 0 40px ${alpha(theme.palette.primary.main, 0.3)}` } : {};\n}\n\nfunction pulseStylesOf(theme: Theme, pulse: boolean) {\n  if (!pulse) return {};\n  return {\n    position: 'relative' as const,\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute' as const,\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      borderRadius: 'inherit',\n      backgroundColor: theme.palette.primary.main,\n      opacity: 0.3,\n      animation: `${pulseAnimation} 2s infinite`,\n      pointerEvents: 'none' as const,\n      zIndex: -1,\n    },\n  };\n}\n\n/** The default variant's paper: optional gradient/glass over the base styles. */\nfunction defaultVariantStyles(theme: Theme, opts: VariantStyleOptions) {\n  const gradientStyles = opts.gradient\n    ? {\n        background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,\n        backdropFilter: 'blur(10px)',\n      }\n    : {};\n  return {\n    ...gradientStyles,\n    backgroundColor: opts.glass\n      ? alpha(theme.palette.background.paper, 0.1)\n      : theme.palette.background.paper,\n    backdropFilter: opts.glass ? 'blur(20px)' : 'none',\n    border: opts.glass ? `1px solid ${alpha(theme.palette.primary.main, 0.2)}` : 'none',\n  };\n}\n\nexport function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProps<Theme> {\n  const decorations = {\n    ...glowStylesOf(theme, opts.glow),\n    ...pulseStylesOf(theme, opts.pulse),\n  };\n  switch (opts.variant) {\n    case 'glass':\n      return {\n        ...baseStylesOf(theme, opts),\n        ...decorations,\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: 'blur(20px)',\n        border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n        boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,\n      };\n    case 'fullscreen':\n      return {\n        borderRadius: 0,\n        margin: 0,\n        width: '100vw',\n        // `100dvh`, not `100vh` — see `dynamicViewportHeight`.\n        ...dynamicViewportHeight('height'),\n        maxWidth: 'none',\n        maxHeight: 'none',\n        ...decorations,\n      };\n    case 'drawer': {\n      const radius = borderRadiusOf(theme, opts.borderRadius);\n      return {\n        borderRadius: `${radius}px 0 0 ${radius}px`,\n        margin: 0,\n        width: maxWidthOf(opts.size),\n        ...dynamicViewportHeight('height'),\n        maxHeight: 'none',\n        position: 'absolute' as const,\n        right: 0,\n        ...decorations,\n      };\n    }\n    default:\n      return {\n        ...baseStylesOf(theme, opts),\n        ...decorations,\n        ...defaultVariantStyles(theme, opts),\n      };\n  }\n}\n\nexport function backdropSxOf(theme: Theme, glass: boolean) {\n  return {\n    backgroundColor: glass\n      ? alpha(theme.palette.common.black, 0.2)\n      : alpha(theme.palette.common.black, 0.5),\n    backdropFilter: glass ? 'blur(8px)' : 'none',\n  };\n}\n\n"],"mappings":"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","names":[]}

package/dist/chunk-O2CYLVPM.js

@@ -0,0 +1,200 @@
+import {
+  AppHeaderBrand
+} from "./chunk-MZ7XU5HB.js";
+import {
+  accentFor
+} from "./chunk-OZCEKQIX.js";
+
+// src/components/navigation/AppHeader/AppHeader.identity.tsx
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import { Box, Skeleton, Typography, useTheme } from "@mui/material";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TITLE_PX = { xs: 14, sm: 15, md: 17, lg: 20, xl: 24 };
+var ONE_LINE = {
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+var AppHeaderStatus = ({
+  tone,
+  items,
+  separator = "\xB7",
+  className,
+  dataTestId = "app-header-status"
+}) => {
+  const theme = useTheme();
+  const visible = items.filter((item) => item !== null && item !== void 0 && item !== "");
+  if (visible.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      "data-testid": dataTestId,
+      sx: { display: "flex", alignItems: "center", gap: 0.75, ...ONE_LINE },
+      children: [
+        tone && /* @__PURE__ */ jsx(
+          Box,
+          {
+            "aria-hidden": true,
+            "data-testid": `${dataTestId}-dot`,
+            sx: {
+              width: 8,
+              height: 8,
+              flex: "0 0 auto",
+              borderRadius: "50%",
+              backgroundColor: accentFor(theme, tone).main
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", component: "span", sx: ONE_LINE, children: visible.map((item, index) => (
+          // Index keys: the segments are positional presentation, and nothing
+          // here reorders or is keyed on identity elsewhere.
+          /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            index > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              " ",
+              /* @__PURE__ */ jsx(Box, { component: "span", "aria-hidden": true, children: separator }),
+              " "
+            ] }),
+            item
+          ] }, index)
+        )) })
+      ]
+    }
+  );
+};
+AppHeaderStatus.displayName = "AppHeaderStatus";
+var IdentityText = ({ title, subtitle, status, size = "md", interactive, disclosed, dataTestId }) => /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0, display: "flex", flexDirection: "column", gap: 0.25 }, children: [
+  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.25, minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        component: "span",
+        "data-testid": `${dataTestId}-title`,
+        sx: { fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE },
+        children: title
+      }
+    ),
+    interactive && /* @__PURE__ */ jsx(
+      KeyboardArrowDown,
+      {
+        "aria-hidden": true,
+        "data-testid": `${dataTestId}-chevron`,
+        sx: {
+          flex: "0 0 auto",
+          fontSize: 20,
+          opacity: 0.7,
+          transition: "transform 150ms ease",
+          transform: disclosed ? "rotate(180deg)" : "none"
+        }
+      }
+    )
+  ] }),
+  subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", component: "span", sx: ONE_LINE, children: subtitle }),
+  status
+] });
+var IdentitySkeleton = ({
+  size,
+  dataTestId
+}) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    "data-testid": `${dataTestId}-loading`,
+    sx: { display: "flex", alignItems: "center", gap: 1.25, minWidth: 0 },
+    children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: 40, height: 40, sx: { flex: "0 0 auto" } }),
+      /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0, flex: 1 }, children: [
+        /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 140, height: TITLE_PX[size] * 1.4 }),
+        /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 180, height: 16 })
+      ] })
+    ]
+  }
+);
+var rowSx = {
+  display: "flex",
+  alignItems: "center",
+  gap: 1.25,
+  width: "100%",
+  minWidth: 0,
+  textAlign: "left"
+};
+var AppHeaderIdentity = ({
+  title,
+  subtitle,
+  status,
+  mark,
+  logoUrl,
+  seedColor,
+  onDisclose,
+  disclosed = false,
+  discloseLabel,
+  loading = false,
+  size = "md",
+  className,
+  dataTestId = "app-header-identity"
+}) => {
+  if (loading) return /* @__PURE__ */ jsx(IdentitySkeleton, { size, dataTestId });
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    mark ?? /* @__PURE__ */ jsx(
+      AppHeaderBrand,
+      {
+        name: title,
+        logoUrl,
+        seedColor,
+        size,
+        dataTestId: `${dataTestId}-brand`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IdentityText,
+      {
+        title,
+        subtitle,
+        status,
+        size,
+        interactive: Boolean(onDisclose),
+        disclosed,
+        dataTestId
+      }
+    )
+  ] });
+  if (!onDisclose) {
+    return /* @__PURE__ */ jsx(Box, { className, "data-testid": dataTestId, sx: rowSx, children: body });
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "button",
+      type: "button",
+      className,
+      "data-testid": dataTestId,
+      onClick: onDisclose,
+      "aria-haspopup": "dialog",
+      "aria-expanded": disclosed,
+      "aria-label": discloseLabel ?? `Detalhes de ${title}`,
+      sx: {
+        ...rowSx,
+        appearance: "none",
+        p: 0.5,
+        ml: -0.5,
+        border: "none",
+        borderRadius: 1.5,
+        background: "none",
+        color: "inherit",
+        font: "inherit",
+        cursor: "pointer",
+        "&:hover": { backgroundColor: "action.hover" },
+        "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: 2 }
+      },
+      children: body
+    }
+  );
+};
+AppHeaderIdentity.displayName = "AppHeaderIdentity";
+
+export {
+  AppHeaderStatus,
+  AppHeaderIdentity
+};
+//# sourceMappingURL=chunk-O2CYLVPM.js.map