@12-apps/ui 6.33.1 → 6.35.0

package/dist/chunk-236V2GRH.js

@@ -0,0 +1,281 @@
+import {
+  TutorialStepBody
+} from "./chunk-B76QCDCE.js";
+import {
+  useTutorialOverlay
+} from "./chunk-RSQMPCCR.js";
+import {
+  scrim,
+  sheen
+} from "./chunk-FQ6UW7IY.js";
+import {
+  ABSOLUTE_INK
+} from "./chunk-N3GAFIXG.js";
+
+// src/components/feedback/TutorialOverlay/TutorialOverlay.tsx
+import Box from "@mui/material/Box/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import LinearProgress from "@mui/material/LinearProgress/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import Portal from "@mui/material/Portal/index.js";
+import { alpha, keyframes, styled } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 ${alpha(ABSOLUTE_INK.white, 0.7)};
+  }
+  70% {
+    box-shadow: 0 0 0 20px ${alpha(ABSOLUTE_INK.white, 0)};
+  }
+  100% {
+    box-shadow: 0 0 0 0 ${alpha(ABSOLUTE_INK.white, 0)};
+  }
+`;
+var floatAnimation = keyframes`
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+`;
+var Overlay = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "allowClickThrough"
+})(({ theme, allowClickThrough }) => ({
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: theme.zIndex.modal + 100,
+  pointerEvents: allowClickThrough ? "none" : "auto",
+  transition: "opacity 0.3s ease"
+}));
+var Backdrop = styled(Box)(({ theme }) => ({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  background: scrim(theme, 0.7),
+  backdropFilter: "blur(2px)"
+}));
+var Spotlight = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "bounds" && prop !== "padding"
+})(({ theme, bounds, padding }) => ({
+  position: "absolute",
+  top: bounds.top - padding,
+  left: bounds.left - padding,
+  width: bounds.width + padding * 2,
+  height: bounds.height + padding * 2,
+  borderRadius: 8,
+  border: `2px solid ${sheen(theme, 0.5)}`,
+  animation: `${pulseAnimation} 2s infinite`,
+  pointerEvents: "none",
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    inset: -2,
+    borderRadius: 8,
+    background: "transparent",
+    boxShadow: `0 0 0 9999px ${scrim(theme, 0.7)}`
+  }
+}));
+var TooltipContainer = styled(Paper, {
+  shouldForwardProp: (prop) => prop !== "placement"
+})(({ theme, placement }) => ({
+  position: "absolute",
+  maxWidth: 360,
+  padding: theme.spacing(3),
+  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
+  backdropFilter: "blur(20px)",
+  WebkitBackdropFilter: "blur(20px)",
+  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+  boxShadow: theme.shadows[12],
+  animation: `${floatAnimation} 3s ease-in-out infinite`,
+  pointerEvents: "auto",
+  zIndex: theme.zIndex.modal + 101,
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    width: 12,
+    height: 12,
+    background: "inherit",
+    transform: "rotate(45deg)",
+    border: "inherit",
+    ...placement === "top" && {
+      bottom: -7,
+      left: "50%",
+      marginLeft: -6,
+      borderTop: "none",
+      borderLeft: "none"
+    },
+    ...placement === "bottom" && {
+      top: -7,
+      left: "50%",
+      marginLeft: -6,
+      borderBottom: "none",
+      borderRight: "none"
+    },
+    ...placement === "left" && {
+      right: -7,
+      top: "50%",
+      marginTop: -6,
+      borderLeft: "none",
+      borderBottom: "none"
+    },
+    ...placement === "right" && {
+      left: -7,
+      top: "50%",
+      marginTop: -6,
+      borderRight: "none",
+      borderTop: "none"
+    }
+  }
+}));
+var ProgressBar = styled(LinearProgress)(({ theme }) => ({
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  height: 4,
+  zIndex: theme.zIndex.modal + 102,
+  "& .MuiLinearProgress-bar": {
+    background: `linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 100%)`
+  }
+}));
+var TUTORIAL_DEFAULTS = {
+  initialStep: 0,
+  active: true,
+  showProgress: true,
+  allowKeyboardNavigation: true,
+  allowClickThrough: false,
+  variant: "tooltip",
+  allowSkip: false,
+  animated: true
+};
+var resolveProps = (props) => ({
+  ...TUTORIAL_DEFAULTS,
+  ...Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== void 0)
+  )
+});
+var TutorialLayers = ({ variant, targetBounds, isVisible, spotlightPadding }) => {
+  const isSpotlight = variant === "spotlight" || variant === "highlight";
+  const dimmed = variant === "modal" || isSpotlight;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    dimmed && /* @__PURE__ */ jsx(Backdrop, {}),
+    targetBounds && isVisible && isSpotlight && /* @__PURE__ */ jsx(
+      Spotlight,
+      {
+        bounds: targetBounds,
+        padding: spotlightPadding || 8,
+        "data-testid": "tutorial-highlight"
+      }
+    )
+  ] });
+};
+var TutorialTooltip = ({
+  tutorial,
+  steps,
+  allowSkip,
+  showProgress,
+  animated,
+  requiresActionBeforeNext,
+  copy
+}) => /* @__PURE__ */ jsx(Fade, { in: tutorial.isVisible, timeout: 300, children: /* @__PURE__ */ jsx(
+  TooltipContainer,
+  {
+    ref: tutorial.tooltipRef,
+    placement: tutorial.actualPlacement,
+    elevation: 12,
+    style: {
+      top: tutorial.tooltipPosition.top,
+      left: tutorial.tooltipPosition.left,
+      animation: animated ? void 0 : "none"
+    },
+    role: "dialog",
+    "aria-labelledby": `tutorial-title-${tutorial.currentStep}`,
+    "aria-describedby": `tutorial-content-${tutorial.currentStep}`,
+    "data-testid": `tutorial-step-${tutorial.currentStep}`,
+    children: /* @__PURE__ */ jsx(
+      TutorialStepBody,
+      {
+        copy,
+        step: tutorial.currentStepData,
+        currentStep: tutorial.currentStep,
+        stepCount: steps.length,
+        progress: tutorial.progress,
+        isLastStep: tutorial.isLastStep,
+        allowSkip,
+        showProgress,
+        requiresActionBeforeNext,
+        onNext: tutorial.handleNext,
+        onPrev: tutorial.handlePrev,
+        onSkip: tutorial.handleSkip,
+        onRestart: tutorial.handleRestart
+      }
+    )
+  }
+) });
+var TutorialOverlay = (componentProps) => {
+  const {
+    copy,
+    steps,
+    onComplete,
+    onSkip,
+    onStepComplete,
+    initialStep,
+    active,
+    showProgress,
+    allowKeyboardNavigation,
+    allowClickThrough,
+    variant,
+    allowSkip,
+    animated
+  } = resolveProps(componentProps);
+  const tutorial = useTutorialOverlay({
+    steps,
+    initialStep,
+    active,
+    allowKeyboardNavigation,
+    onComplete,
+    onSkip,
+    onStepComplete
+  });
+  const { currentStepData, isLastStep, isVisible, targetBounds, progress } = tutorial;
+  const requiresActionBeforeNext = Boolean(currentStepData?.requiresAction) && !isLastStep;
+  if (!active || !currentStepData) return null;
+  if (steps.length === 0) return null;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(Overlay, { allowClickThrough, "data-testid": "tutorial-overlay", children: [
+    showProgress && /* @__PURE__ */ jsx(ProgressBar, { variant: "determinate", value: progress }),
+    /* @__PURE__ */ jsx(
+      TutorialLayers,
+      {
+        variant,
+        targetBounds,
+        isVisible,
+        spotlightPadding: currentStepData.spotlightPadding
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TutorialTooltip,
+      {
+        copy,
+        tutorial: { ...tutorial, currentStepData },
+        steps,
+        allowSkip,
+        showProgress,
+        animated,
+        requiresActionBeforeNext
+      }
+    )
+  ] }) });
+};
+var TutorialOverlay_default = TutorialOverlay;
+
+export {
+  TutorialOverlay,
+  TutorialOverlay_default
+};
+//# sourceMappingURL=chunk-236V2GRH.js.map

package/dist/chunk-236V2GRH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/TutorialOverlay/TutorialOverlay.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport LinearProgress from '@mui/material/LinearProgress/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Portal from '@mui/material/Portal/index.js';\nimport { alpha, keyframes, styled } from '@mui/material/styles/index.js';\nimport type { FC} from 'react';\nimport React, {  } from 'react';\n\nimport { scrim, sheen } from '../../../tokens/ink';\nimport { ABSOLUTE_INK } from '../../../tokens/ink.core';\n\nimport { useTutorialOverlay } from './TutorialOverlay.hooks';\nimport { TutorialStepBody } from './TutorialStepBody';\nimport type { TutorialOverlayProps } from './TutorialOverlay.types';\n\n// Animation keyframes — static, so the ring's sheen is the absolute white.\nconst pulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 ${alpha(ABSOLUTE_INK.white, 0.7)};\n  }\n  70% {\n    box-shadow: 0 0 0 20px ${alpha(ABSOLUTE_INK.white, 0)};\n  }\n  100% {\n    box-shadow: 0 0 0 0 ${alpha(ABSOLUTE_INK.white, 0)};\n  }\n`;\n\nconst floatAnimation = keyframes`\n  0%, 100% {\n    transform: translateY(0);\n  }\n  50% {\n    transform: translateY(-10px);\n  }\n`;\n\n// Styled components\nconst Overlay = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'allowClickThrough' })<{ allowClickThrough?: boolean }>(({ theme, allowClickThrough }) => ({\n  position: 'fixed',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  zIndex: theme.zIndex.modal + 100,\n  pointerEvents: allowClickThrough ? 'none' : 'auto',\n  transition: 'opacity 0.3s ease' }));\n\nconst Backdrop = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n  background: scrim(theme, 0.7),\n  backdropFilter: 'blur(2px)' }));\n\nconst Spotlight = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'bounds' && prop !== 'padding' })<{ bounds: globalThis.DOMRect; padding: number }>(({ theme, bounds, padding }) => ({\n  position: 'absolute',\n  top: bounds.top - padding,\n  left: bounds.left - padding,\n  width: bounds.width + padding * 2,\n  height: bounds.height + padding * 2,\n  borderRadius: 8,\n  border: `2px solid ${sheen(theme, 0.5)}`,\n  animation: `${pulseAnimation} 2s infinite`,\n  pointerEvents: 'none',\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    inset: -2,\n    borderRadius: 8,\n    background: 'transparent',\n    boxShadow: `0 0 0 9999px ${scrim(theme, 0.7)}` } }));\n\nconst TooltipContainer = styled(Paper, {\n  shouldForwardProp: (prop) => prop !== 'placement' })<{ placement: string }>(({ theme, placement }) => ({\n  position: 'absolute',\n  maxWidth: 360,\n  padding: theme.spacing(3),\n  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,\n  backdropFilter: 'blur(20px)',\n  WebkitBackdropFilter: 'blur(20px)',\n  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n  boxShadow: theme.shadows[12],\n  animation: `${floatAnimation} 3s ease-in-out infinite`,\n  pointerEvents: 'auto',\n  zIndex: theme.zIndex.modal + 101,\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    width: 12,\n    height: 12,\n    background: 'inherit',\n    transform: 'rotate(45deg)',\n    border: 'inherit',\n    ...(placement === 'top' && {\n      bottom: -7,\n      left: '50%',\n      marginLeft: -6,\n      borderTop: 'none',\n      borderLeft: 'none' }),\n    ...(placement === 'bottom' && {\n      top: -7,\n      left: '50%',\n      marginLeft: -6,\n      borderBottom: 'none',\n      borderRight: 'none' }),\n    ...(placement === 'left' && {\n      right: -7,\n      top: '50%',\n      marginTop: -6,\n      borderLeft: 'none',\n      borderBottom: 'none' }),\n    ...(placement === 'right' && {\n      left: -7,\n      top: '50%',\n      marginTop: -6,\n      borderRight: 'none',\n      borderTop: 'none' }) } }));\n\nconst ProgressBar = styled(LinearProgress)(({ theme }) => ({\n  position: 'fixed',\n  top: 0,\n  left: 0,\n  right: 0,\n  height: 4,\n  zIndex: theme.zIndex.modal + 102,\n  '& .MuiLinearProgress-bar': {\n    background: `linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 100%)` } }));\n\ntype TutorialDefaultedKeys =\n  | 'initialStep'\n  | 'active'\n  | 'showProgress'\n  | 'allowKeyboardNavigation'\n  | 'allowClickThrough'\n  | 'variant'\n  | 'allowSkip'\n  | 'animated';\n\ntype ResolvedTutorialProps = TutorialOverlayProps &\n  Required<Pick<TutorialOverlayProps, TutorialDefaultedKeys>>;\n\nconst TUTORIAL_DEFAULTS: Pick<TutorialOverlayProps, TutorialDefaultedKeys> = {\n  initialStep: 0,\n  active: true,\n  showProgress: true,\n  allowKeyboardNavigation: true,\n  allowClickThrough: false,\n  variant: 'tooltip',\n  allowSkip: false,\n  animated: true };\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}` still\n// falls back to the default exactly as a destructuring default would. Applied as\n// a merge rather than destructuring defaults, which would otherwise put eight\n// branches into the component's own complexity budget.\nconst resolveProps = (props: TutorialOverlayProps): ResolvedTutorialProps =>\n  ({\n    ...TUTORIAL_DEFAULTS,\n    ...(Object.fromEntries(\n      Object.entries(props).filter(([, value]) => value !== undefined),\n    ) as Partial<TutorialOverlayProps>) }) as ResolvedTutorialProps;\n\n// The dimming layer and the cut-out over the highlighted element. Local because\n// Backdrop and Spotlight cannot cross a module boundary (TS2742).\nconst TutorialLayers: React.FC<{\n  variant: string;\n  targetBounds: globalThis.DOMRect | null;\n  isVisible: boolean;\n  spotlightPadding?: number;\n}> = ({ variant, targetBounds, isVisible, spotlightPadding }) => {\n  const isSpotlight = variant === 'spotlight' || variant === 'highlight';\n  const dimmed = variant === 'modal' || isSpotlight;\n\n  return (\n    <>\n      {dimmed && <Backdrop />}\n      {targetBounds && isVisible && isSpotlight && (\n        <Spotlight\n          bounds={targetBounds}\n          padding={spotlightPadding || 8}\n          data-testid=\"tutorial-highlight\"\n        />\n      )}\n    </>\n  );\n};\n\n// The positioned card. Local because TooltipContainer cannot cross a module\n// boundary (TS2742).\nconst TutorialTooltip: React.FC<{\n  tutorial: ReturnType<typeof useTutorialOverlay> & {\n    currentStepData: TutorialOverlayProps['steps'][number];\n  };\n  steps: TutorialOverlayProps['steps'];\n  allowSkip: boolean;\n  showProgress: boolean;\n  animated: boolean;\n  requiresActionBeforeNext: boolean;\n  copy: TutorialOverlayProps['copy'];\n}> = ({\n  tutorial,\n  steps,\n  allowSkip,\n  showProgress,\n  animated,\n  requiresActionBeforeNext,\n  copy,\n}) => (\n        <Fade in={tutorial.isVisible} timeout={300}>\n          <TooltipContainer\n            ref={tutorial.tooltipRef}\n            placement={tutorial.actualPlacement}\n            elevation={12}\n            style={{\n              top: tutorial.tooltipPosition.top,\n              left: tutorial.tooltipPosition.left,\n              animation: animated ? undefined : 'none' }}\n            role=\"dialog\"\n            aria-labelledby={`tutorial-title-${tutorial.currentStep}`}\n            aria-describedby={`tutorial-content-${tutorial.currentStep}`}\n            data-testid={`tutorial-step-${tutorial.currentStep}`}\n          >\n            <TutorialStepBody\n              copy={copy}\n              step={tutorial.currentStepData}\n              currentStep={tutorial.currentStep}\n              stepCount={steps.length}\n              progress={tutorial.progress}\n              isLastStep={tutorial.isLastStep}\n              allowSkip={allowSkip}\n              showProgress={showProgress}\n              requiresActionBeforeNext={requiresActionBeforeNext}\n              onNext={tutorial.handleNext}\n              onPrev={tutorial.handlePrev}\n              onSkip={tutorial.handleSkip}\n              onRestart={tutorial.handleRestart}\n            />\n          </TooltipContainer>\n        </Fade>\n);\n\nexport const TutorialOverlay: FC<TutorialOverlayProps> = (componentProps) => {\n  const {\n    copy,\n    steps,\n    onComplete,\n    onSkip,\n    onStepComplete,\n    initialStep,\n    active,\n    showProgress,\n    allowKeyboardNavigation,\n    allowClickThrough,\n    variant,\n    allowSkip,\n    animated } = resolveProps(componentProps);\n\n  const tutorial = useTutorialOverlay({\n    steps,\n    initialStep,\n    active,\n    allowKeyboardNavigation,\n    onComplete,\n    onSkip,\n    onStepComplete });\n  const { currentStepData, isLastStep, isVisible, targetBounds, progress } = tutorial;\n\n  const requiresActionBeforeNext = Boolean(currentStepData?.requiresAction) && !isLastStep;\n\n  if (!active || !currentStepData) return null;\n\n  // Handle empty steps array\n  if (steps.length === 0) return null;\n\n  return (\n    <Portal>\n      <Overlay allowClickThrough={allowClickThrough} data-testid=\"tutorial-overlay\">\n        {showProgress && <ProgressBar variant=\"determinate\" value={progress} />}\n\n        <TutorialLayers\n          variant={variant}\n          targetBounds={targetBounds}\n          isVisible={isVisible}\n          spotlightPadding={currentStepData.spotlightPadding}\n        />\n\n        <TutorialTooltip\n          copy={copy}\n          tutorial={{ ...tutorial, currentStepData }}\n          steps={steps}\n          allowSkip={allowSkip}\n          showProgress={showProgress}\n          animated={animated}\n          requiresActionBeforeNext={requiresActionBeforeNext}\n        />\n      </Overlay>\n    </Portal>\n  );\n};\n\n// Export default\nexport default TutorialOverlay;\n"],"mappings":"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","names":[]}

package/dist/chunk-24NXQG5F.js

@@ -0,0 +1,85 @@
+import {
+  MARKER_PIXELS_PER_DEGREE
+} from "./chunk-H2J2MTRE.js";
+import {
+  BOUNCE_KEYFRAMES
+} from "./chunk-X4PS3E3V.js";
+import {
+  shadowInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/MapPreview/MapMarkers.tsx
+import LocationIcon from "@mui/icons-material/LocationOn";
+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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CoordinatesDisplay = styled(Box)(({ theme }) => ({
+  position: "absolute",
+  bottom: theme.spacing(2),
+  left: theme.spacing(2),
+  padding: theme.spacing(1, 1.5),
+  background: alpha(theme.palette.background.paper, 0.95),
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)",
+  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+  borderRadius: theme.shape.borderRadius,
+  zIndex: 1
+}));
+var MapMarkers = ({ markers, centre, animated }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Fragment, { children: markers.map((markerItem, index) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": `map-marker-${index}`,
+      sx: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: `translate(
+              ${(markerItem.position.lng - centre.lng) * MARKER_PIXELS_PER_DEGREE}px,
+              ${-(markerItem.position.lat - centre.lat) * MARKER_PIXELS_PER_DEGREE}px
+            )`,
+        zIndex: 3,
+        cursor: markerItem.onClick ? "pointer" : "default"
+      },
+      onClick: markerItem.onClick,
+      title: markerItem.title,
+      children: /* @__PURE__ */ jsx(Tooltip, { title: markerItem.description || markerItem.title || "", children: /* @__PURE__ */ jsx(
+        LocationIcon,
+        {
+          sx: {
+            fontSize: rem(theme, 32),
+            color: theme.palette.error.main,
+            filter: `drop-shadow(0 2px 4px ${shadowInk(theme, 0.3)})`,
+            animation: animated ? "bounce 2s infinite" : "none",
+            "@keyframes bounce": BOUNCE_KEYFRAMES
+          }
+        }
+      ) })
+    },
+    `${markerItem.position.lat}-${markerItem.position.lng}-${index}`
+  )) });
+};
+var MapCoordinates = ({ position, zoom }) => /* @__PURE__ */ jsxs(CoordinatesDisplay, { "data-testid": "coordinates-display", children: [
+  /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: { fontFamily: "monospace" }, children: [
+    "Lat: ",
+    position.lat.toFixed(6),
+    ", Lng: ",
+    position.lng.toFixed(6)
+  ] }),
+  zoom > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: { fontFamily: "monospace", display: "block" }, children: [
+    "Zoom: ",
+    zoom
+  ] })
+] });
+
+export {
+  MapMarkers,
+  MapCoordinates
+};
+//# sourceMappingURL=chunk-24NXQG5F.js.map

package/dist/chunk-24NXQG5F.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/MapMarkers.tsx"],"sourcesContent":["import LocationIcon from '@mui/icons-material/LocationOn';\nimport Box from '@mui/material/Box/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { MARKER_PIXELS_PER_DEGREE } from './MapPreview.constants';\nimport type { LatLng, MapMarker } from './MapPreview.types';\nimport { BOUNCE_KEYFRAMES } from './mapSurface';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\n// Kept module-local: styled() components cannot be exported across a module\n// boundary here without tripping TS2742.\nconst CoordinatesDisplay = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  bottom: theme.spacing(2),\n  left: theme.spacing(2),\n  padding: theme.spacing(1, 1.5),\n  background: alpha(theme.palette.background.paper, 0.95),\n  backdropFilter: 'blur(10px)',\n  WebkitBackdropFilter: 'blur(10px)',\n  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  borderRadius: theme.shape.borderRadius,\n  zIndex: 1,\n}));\n\nexport interface MapMarkersProps {\n  markers: MapMarker[];\n  centre: LatLng;\n  animated: boolean;\n}\n\n// Markers are placed relative to the current centre, so panning moves them with\n// the surface.\nexport const MapMarkers: FC<MapMarkersProps> = ({ markers, centre, animated }) => {\n  const theme = useTheme();\n\n  return (\n    <>\n      {markers.map((markerItem, index) => (\n        <Box\n          key={`${markerItem.position.lat}-${markerItem.position.lng}-${index}`}\n          data-testid={`map-marker-${index}`}\n          sx={{\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            transform: `translate(\n              ${(markerItem.position.lng - centre.lng) * MARKER_PIXELS_PER_DEGREE}px,\n              ${-(markerItem.position.lat - centre.lat) * MARKER_PIXELS_PER_DEGREE}px\n            )`,\n            zIndex: 3,\n            cursor: markerItem.onClick ? 'pointer' : 'default',\n          }}\n          onClick={markerItem.onClick}\n          title={markerItem.title}\n        >\n          <Tooltip title={markerItem.description || markerItem.title || ''}>\n            <LocationIcon\n              sx={{\n                fontSize: rem(theme, 32),\n                color: theme.palette.error.main,\n                filter: `drop-shadow(0 2px 4px ${shadowInk(theme, 0.3)})`,\n                animation: animated ? 'bounce 2s infinite' : 'none',\n                '@keyframes bounce': BOUNCE_KEYFRAMES,\n              }}\n            />\n          </Tooltip>\n        </Box>\n      ))}\n    </>\n  );\n};\n\nexport const MapCoordinates: FC<{ position: LatLng; zoom: number }> = ({ position, zoom }) => (\n  <CoordinatesDisplay data-testid=\"coordinates-display\">\n    <Typography variant=\"caption\" sx={{ fontFamily: 'monospace' }}>\n      Lat: {position.lat.toFixed(6)}, Lng: {position.lng.toFixed(6)}\n    </Typography>\n    {zoom > 0 && (\n      <Typography variant=\"caption\" sx={{ fontFamily: 'monospace', display: 'block' }}>\n        Zoom: {zoom}\n      </Typography>\n    )}\n  </CoordinatesDisplay>\n);\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,kBAAkB;AACzB,OAAO,SAAS;AAChB,OAAO,aAAa;AACpB,OAAO,gBAAgB;AACvB,SAAS,OAAO,QAAQ,gBAAgB;AAqCpC,mBAoBQ,KAkBR,YAtCA;AAzBJ,IAAM,qBAAqB,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACrD,UAAU;AAAA,EACV,QAAQ,MAAM,QAAQ,CAAC;AAAA,EACvB,MAAM,MAAM,QAAQ,CAAC;AAAA,EACrB,SAAS,MAAM,QAAQ,GAAG,GAAG;AAAA,EAC7B,YAAY,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,EACtD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC;AAAA,EACtD,cAAc,MAAM,MAAM;AAAA,EAC1B,QAAQ;AACV,EAAE;AAUK,IAAM,aAAkC,CAAC,EAAE,SAAS,QAAQ,SAAS,MAAM;AAChF,QAAM,QAAQ,SAAS;AAEvB,SACE,gCACG,kBAAQ,IAAI,CAAC,YAAY,UACxB;AAAA,IAAC;AAAA;AAAA,MAEC,eAAa,cAAc,KAAK;AAAA,MAChC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW;AAAA,iBACN,WAAW,SAAS,MAAM,OAAO,OAAO,wBAAwB;AAAA,gBACjE,EAAE,WAAW,SAAS,MAAM,OAAO,OAAO,wBAAwB;AAAA;AAAA,QAEtE,QAAQ;AAAA,QACR,QAAQ,WAAW,UAAU,YAAY;AAAA,MAC3C;AAAA,MACA,SAAS,WAAW;AAAA,MACpB,OAAO,WAAW;AAAA,MAElB,8BAAC,WAAQ,OAAO,WAAW,eAAe,WAAW,SAAS,IAC5D;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,YACF,UAAU,IAAI,OAAO,EAAE;AAAA,YACvB,OAAO,MAAM,QAAQ,MAAM;AAAA,YAC3B,QAAQ,yBAAyB,UAAU,OAAO,GAAG,CAAC;AAAA,YACtD,WAAW,WAAW,uBAAuB;AAAA,YAC7C,qBAAqB;AAAA,UACvB;AAAA;AAAA,MACF,GACF;AAAA;AAAA,IA1BK,GAAG,WAAW,SAAS,GAAG,IAAI,WAAW,SAAS,GAAG,IAAI,KAAK;AAAA,EA2BrE,CACD,GACH;AAEJ;AAEO,IAAM,iBAAyD,CAAC,EAAE,UAAU,KAAK,MACtF,qBAAC,sBAAmB,eAAY,uBAC9B;AAAA,uBAAC,cAAW,SAAQ,WAAU,IAAI,EAAE,YAAY,YAAY,GAAG;AAAA;AAAA,IACvD,SAAS,IAAI,QAAQ,CAAC;AAAA,IAAE;AAAA,IAAQ,SAAS,IAAI,QAAQ,CAAC;AAAA,KAC9D;AAAA,EACC,OAAO,KACN,qBAAC,cAAW,SAAQ,WAAU,IAAI,EAAE,YAAY,aAAa,SAAS,QAAQ,GAAG;AAAA;AAAA,IACxE;AAAA,KACT;AAAA,GAEJ;","names":[]}

package/dist/chunk-2AKQPXSJ.js

@@ -0,0 +1,64 @@
+import {
+  useAutoplay,
+  useLightboxKeyboard,
+  useNavigation,
+  usePreloader,
+  useSwipe,
+  useWheelZoom,
+  useZoomState
+} from "./chunk-C6FRVGMC.js";
+
+// src/components/data-display/Lightbox/useLightbox.ts
+import { useCallback, useImperativeHandle, useState } from "react";
+var useLightbox = ({ isOpen, onClose, items, startIndex, showControls, loop, autoplay, zoomable }, ref) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const preloadImage = usePreloader();
+  const zoom = useZoomState();
+  const { currentIndex, goToIndex, next, prev } = useNavigation({
+    items,
+    loop,
+    startIndex,
+    resetZoom: zoom.resetZoom,
+    preloadImage
+  });
+  const currentItem = items[currentIndex];
+  const canZoom = Boolean(zoomable && currentItem && currentItem.type !== "video");
+  const handleWheel = useWheelZoom({ enabled: canZoom, setZoomLevel: zoom.setZoomLevel });
+  const { isAutoPlaying, setIsAutoPlaying, stopAutoplay } = useAutoplay({
+    isOpen,
+    autoplay,
+    itemCount: items.length,
+    currentIndex,
+    next
+  });
+  const close = useCallback(() => {
+    stopAutoplay();
+    onClose();
+  }, [stopAutoplay, onClose]);
+  const open = useCallback((index = 0) => goToIndex(index), [goToIndex]);
+  useImperativeHandle(ref, () => ({ open, close, next, prev, goTo: goToIndex }));
+  useLightboxKeyboard({ isOpen, showControls, autoplay, close, prev, next, setIsAutoPlaying });
+  const { handleTouchStart, handleTouchEnd } = useSwipe({ prev, next, close });
+  return {
+    currentIndex,
+    currentItem,
+    canZoom,
+    isLoading,
+    setIsLoading,
+    isAutoPlaying,
+    setIsAutoPlaying,
+    zoom,
+    handleWheel,
+    goToIndex,
+    next,
+    prev,
+    close,
+    handleTouchStart,
+    handleTouchEnd
+  };
+};
+
+export {
+  useLightbox
+};
+//# sourceMappingURL=chunk-2AKQPXSJ.js.map

package/dist/chunk-2B76FIMN.js

@@ -0,0 +1,206 @@
+import {
+  Skeleton
+} from "./chunk-7F7TTOYN.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/StatCard/StatCard.tsx
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import RemoveIcon from "@mui/icons-material/Remove";
+import Box from "@mui/material/Box/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DIRECTION_ICON = {
+  up: ArrowUpwardIcon,
+  down: ArrowDownwardIcon,
+  neutral: RemoveIcon
+};
+var DIRECTION_WORD = {
+  up: "Increase of",
+  down: "Decrease of",
+  neutral: "Change of"
+};
+var IMPLIED_TONE = {
+  up: "positive",
+  down: "negative",
+  neutral: "neutral"
+};
+function toneColor(tone, theme) {
+  if (tone === "positive") return theme.palette.success.main;
+  if (tone === "negative") return theme.palette.error.main;
+  return theme.palette.text.secondary;
+}
+function deltaAriaLabel(delta) {
+  if (delta.ariaLabel) return delta.ariaLabel;
+  const suffix = delta.label ? ` ${delta.label}` : "";
+  return `${DIRECTION_WORD[delta.direction]} ${delta.value}${suffix}`;
+}
+function DeltaRow({ delta, testId }) {
+  const theme = useTheme();
+  const tone = delta.tone ?? IMPLIED_TONE[delta.direction];
+  const Icon = DIRECTION_ICON[delta.direction];
+  const color = toneColor(tone, theme);
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "row",
+      spacing: 0.5,
+      sx: { alignItems: "center", flexWrap: "wrap" },
+      "data-testid": testId,
+      "data-direction": delta.direction,
+      "data-tone": tone,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", sx: { fontSize: sxRem(16), color } }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body2",
+            component: "span",
+            "aria-label": deltaAriaLabel(delta),
+            sx: { color, fontWeight: theme.typography.fontWeightMedium },
+            children: delta.value
+          }
+        ),
+        delta.label && /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "span", sx: { color: theme.palette.text.secondary }, children: delta.label })
+      ]
+    }
+  );
+}
+function LabelRow({
+  label,
+  icon,
+  labelId,
+  testId
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+    icon && /* @__PURE__ */ jsx(
+      Box,
+      {
+        "aria-hidden": "true",
+        "data-testid": `${testId}-icon`,
+        sx: { display: "flex", color: theme.palette.text.secondary },
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: labelId,
+        variant: "caption",
+        component: "p",
+        "data-testid": `${testId}-label`,
+        sx: { color: theme.palette.text.secondary },
+        children: label
+      }
+    )
+  ] });
+}
+function ValueRow({
+  value,
+  loading,
+  testId
+}) {
+  const theme = useTheme();
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rectangular",
+        height: 28,
+        width: "60%",
+        borderRadius: 4,
+        "data-testid": `${testId}-value-skeleton`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "h6",
+      component: "p",
+      "data-testid": `${testId}-value`,
+      sx: {
+        fontWeight: theme.typography.fontWeightMedium,
+        color: theme.palette.text.primary,
+        overflowWrap: "anywhere"
+      },
+      children: value
+    }
+  );
+}
+function DeltaSlot({
+  delta,
+  loading,
+  testId
+}) {
+  if (!delta) return null;
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rectangular",
+        height: 16,
+        width: "40%",
+        borderRadius: 4,
+        "data-testid": `${testId}-delta-skeleton`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(DeltaRow, { delta, testId: `${testId}-delta` });
+}
+var StatCard = React.memo(
+  ({ label, value, delta, icon, hint, loading = false, className, dataTestId }) => {
+    const theme = useTheme();
+    const labelId = React.useId();
+    const testId = dataTestId || "stat-card";
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        role: "group",
+        "aria-labelledby": labelId,
+        "aria-busy": loading || void 0,
+        className,
+        "data-testid": testId,
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: theme.spacing(0.5),
+          padding: theme.spacing(2),
+          borderRadius: theme.shape.borderRadius / 4,
+          border: `1px solid ${theme.palette.divider}`,
+          backgroundColor: theme.palette.background.paper,
+          minWidth: 0
+        },
+        children: [
+          /* @__PURE__ */ jsx(LabelRow, { label, icon, labelId, testId }),
+          /* @__PURE__ */ jsx(ValueRow, { value, loading, testId }),
+          /* @__PURE__ */ jsx(DeltaSlot, { delta, loading, testId }),
+          hint && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              component: "p",
+              "data-testid": `${testId}-hint`,
+              sx: { color: theme.palette.text.secondary },
+              children: hint
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+StatCard.displayName = "StatCard";
+var StatCard_default = StatCard;
+
+export {
+  StatCard,
+  StatCard_default
+};
+//# sourceMappingURL=chunk-2B76FIMN.js.map