@12-apps/ui 6.33.1 → 6.34.0

package/dist/chunk-2SGPNJHJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/MapDecorations.tsx"],"sourcesContent":["import LocationIcon from '@mui/icons-material/LocationOn';\nimport NavigationIcon from '@mui/icons-material/Navigation';\nimport PlaceIcon from '@mui/icons-material/Place';\nimport Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { getScaleDistance } from './mapProjection';\nimport { BOUNCE_KEYFRAMES } from './mapSurface';\nimport { shadowInk } from '../../../tokens/ink';\n\n// Decorative only: these give the mock surface something to look like without\n// standing in for real map data.\nexport const MapRoads: FC = () => {\n  const theme = useTheme();\n\n  return (\n    <Box sx={{ position: 'absolute', top: '20%', left: '15%', width: '70%', height: '60%', opacity: 0.2 }}>\n      <svg width=\"100%\" height=\"100%\" style={{ position: 'absolute' }}>\n        <path\n          d=\"M 10,50 Q 30,30 50,50 T 90,50\"\n          stroke={theme.palette.text.secondary}\n          strokeWidth=\"2\"\n          fill=\"none\"\n          opacity=\"0.3\"\n        />\n        <path\n          d=\"M 50,10 L 50,90\"\n          stroke={theme.palette.text.secondary}\n          strokeWidth=\"1.5\"\n          fill=\"none\"\n          opacity=\"0.3\"\n        />\n        <path\n          d=\"M 20,30 L 80,70\"\n          stroke={theme.palette.text.secondary}\n          strokeWidth=\"1\"\n          fill=\"none\"\n          opacity=\"0.2\"\n        />\n      </svg>\n    </Box>\n  );\n};\n\nconst DecorativePin: FC<{ top: string; left: string }> = ({ top, left }) => {\n  const theme = useTheme();\n\n  return (\n    <Box sx={{ position: 'absolute', top, left, opacity: 0.6 }}>\n      <PlaceIcon sx={{ fontSize: 20, color: theme.palette.primary.main }} />\n    </Box>\n  );\n};\n\nexport const MapDecorativePins: FC = () => (\n  <>\n    <DecorativePin top=\"30%\" left=\"25%\" />\n    <DecorativePin top=\"65%\" left=\"70%\" />\n  </>\n);\n\nexport const MapCentreMarker: FC = () => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid=\"map-marker\"\n      sx={{\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -100%)',\n        zIndex: 2,\n        filter: `drop-shadow(0 2px 4px ${shadowInk(theme, 0.3)})`,\n      }}\n    >\n      <LocationIcon\n        sx={{\n          fontSize: 36,\n          color: theme.palette.error.main,\n          animation: 'bounce 2s infinite',\n          '@keyframes bounce': BOUNCE_KEYFRAMES,\n        }}\n      />\n    </Box>\n  );\n};\n\nexport const MapScaleBar: FC<{ zoom: number }> = ({ zoom }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        position: 'absolute',\n        bottom: theme.spacing(2),\n        right: theme.spacing(2),\n        display: 'flex',\n        alignItems: 'center',\n        gap: 0.5,\n        padding: theme.spacing(0.5, 1),\n        background: alpha(theme.palette.background.paper, 0.9),\n        borderRadius: theme.shape.borderRadius,\n        fontSize: '0.75rem',\n        color: theme.palette.text.secondary,\n      }}\n    >\n      <Box\n        sx={{\n          width: 40,\n          height: 2,\n          background: theme.palette.text.secondary,\n          position: 'relative',\n          // The end caps that make the bar read as a measurement.\n          '&::before, &::after': {\n            content: '\"\"',\n            position: 'absolute',\n            width: 2,\n            height: 6,\n            background: theme.palette.text.secondary,\n          },\n          '&::before': { left: 0, top: -2 },\n          '&::after': { right: 0, top: -2 },\n        }}\n      />\n      <Typography variant=\"caption\">{getScaleDistance(zoom)}</Typography>\n    </Box>\n  );\n};\n\nexport const MapCompass: FC = () => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      sx={{\n        position: 'absolute',\n        top: theme.spacing(2),\n        left: theme.spacing(2),\n        width: 40,\n        height: 40,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        background: alpha(theme.palette.background.paper, 0.9),\n        borderRadius: '50%',\n        boxShadow: theme.shadows[2],\n      }}\n    >\n      <NavigationIcon\n        sx={{ fontSize: 24, color: theme.palette.primary.main, transform: 'rotate(-45deg)' }}\n      />\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-2TJOCI54.js

@@ -0,0 +1,86 @@
+import {
+  transitionFor
+} from "./chunk-N7GE6BGM.js";
+import {
+  backdropSx,
+  panelSx
+} from "./chunk-IVIHRZEY.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/feedback/Modal/Modal.tsx
+import Backdrop from "@mui/material/Backdrop/index.js";
+import Box from "@mui/material/Box/index.js";
+import MuiModal from "@mui/material/Modal/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var DEFAULTS = {
+  variant: "center",
+  size: "md",
+  backdrop: true,
+  persistent: false,
+  glass: false,
+  gradient: false,
+  glow: false,
+  pulse: false,
+  borderRadius: "lg"
+};
+var Modal = (props) => {
+  const {
+    children,
+    variant,
+    size,
+    backdrop,
+    persistent,
+    glass,
+    gradient,
+    glow,
+    pulse,
+    borderRadius,
+    onClose,
+    open,
+    dataTestId,
+    ...rest
+  } = withDefaults(props, DEFAULTS);
+  const theme = useTheme();
+  const isGlass = glass || variant === "glass";
+  const handleClose = (_event, reason) => {
+    if (persistent && (reason === "backdropClick" || reason === "escapeKeyDown")) {
+      return;
+    }
+    onClose?.();
+  };
+  const TransitionComponent = transitionFor(variant);
+  return /* @__PURE__ */ jsx(
+    MuiModal,
+    {
+      open,
+      onClose: handleClose,
+      closeAfterTransition: true,
+      BackdropComponent: backdrop ? Backdrop : void 0,
+      BackdropProps: {
+        timeout: 500,
+        sx: backdropSx(theme, isGlass),
+        // @ts-expect-error - data-testid is not part of BackdropProps type but is valid HTML
+        "data-testid": dataTestId ? `${dataTestId}-backdrop` : "modal-backdrop"
+      },
+      ...rest,
+      children: /* @__PURE__ */ jsx(TransitionComponent, { in: open, timeout: 500, children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: panelSx(theme, { variant, size, borderRadius, glass, gradient, glow, pulse }),
+          "data-testid": dataTestId || "modal",
+          children
+        }
+      ) })
+    }
+  );
+};
+var ModalContent = ({ children, padding = 3, dataTestId }) => /* @__PURE__ */ jsx(Box, { sx: { p: padding }, "data-testid": dataTestId || "modal-content", children });
+
+export {
+  Modal,
+  ModalContent
+};
+//# sourceMappingURL=chunk-2TJOCI54.js.map

package/dist/chunk-2XGGHYEA.js

@@ -0,0 +1,187 @@
+import {
+  DATA_VIEWS_LAYOUTS
+} from "./chunk-LHHAYZ55.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Slider
+} from "./chunk-DQIRSUEK.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+
+// src/components/data-display/DataViews/data-views-layout-context.tsx
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import GridViewOutlinedIcon from "@mui/icons-material/GridViewOutlined";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DataViewsLayoutContext = createContext(null);
+var DEFAULT_ZOOM = 35;
+var BASE_CARD_WIDTH = 180;
+var CARD_SCALE_RANGE = { min: 0.75, max: 2 };
+var LAYOUT_STORAGE_KEY = "dataviews:layout";
+var DENSITY_STORAGE_KEY = "dataviews:density";
+var DENSITIES = ["compact", "cozy", "comfortable"];
+var DENSITY_ROW_PADDING = {
+  compact: 0.25,
+  cozy: 0.75,
+  comfortable: 1.5
+};
+var DENSITY_CARD_SCALE = {
+  compact: 0.84,
+  cozy: 1.15,
+  comfortable: 1.4
+};
+function cardTargetWidthFor(zoom, density) {
+  return Math.round(cardMinWidthForZoom(zoom) * DENSITY_CARD_SCALE[density]);
+}
+var DENSITY_BOARD_SCALE = {
+  compact: 0.95,
+  cozy: 1,
+  comfortable: 1.25
+};
+function cardScaleForZoom(zoom) {
+  const clamped = Math.max(0, Math.min(100, zoom));
+  return CARD_SCALE_RANGE.min + clamped / 100 * (CARD_SCALE_RANGE.max - CARD_SCALE_RANGE.min);
+}
+function cardMinWidthForZoom(zoom) {
+  return Math.round(BASE_CARD_WIDTH * cardScaleForZoom(zoom));
+}
+function isLayout(value) {
+  return DATA_VIEWS_LAYOUTS.includes(value);
+}
+function isDensity(value) {
+  return DENSITIES.includes(value);
+}
+function readStoredDensity() {
+  try {
+    if (typeof window === "undefined") return void 0;
+    const stored = window.localStorage.getItem(DENSITY_STORAGE_KEY);
+    return isDensity(stored) ? stored : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function pinLayout(layout, available) {
+  if (layout === "cards") return available.canUseCards ? "cards" : "table";
+  if (layout === "list") return available.canUseList ? "list" : "table";
+  if (layout === "board") return available.canUseBoard ? "board" : "table";
+  return "table";
+}
+function readStoredLayout() {
+  try {
+    if (typeof window === "undefined") return void 0;
+    const stored = window.localStorage.getItem(LAYOUT_STORAGE_KEY);
+    return isLayout(stored) ? stored : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function writeStored(key, value) {
+  try {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function DataViewsLayoutProvider({
+  canUseCards = false,
+  canUseList = false,
+  canUseBoard = false,
+  defaultLayout = "table",
+  viewLayout,
+  ignoreStoredLayout = false,
+  children
+}) {
+  const availability = { canUseCards, canUseList, canUseBoard };
+  const [layout, setLayoutState] = useState(
+    () => pinLayout(
+      viewLayout ?? (ignoreStoredLayout ? void 0 : readStoredLayout()) ?? defaultLayout,
+      availability
+    )
+  );
+  const [density, setDensityState] = useState(
+    () => (ignoreStoredLayout ? void 0 : readStoredDensity()) ?? "cozy"
+  );
+  const [zoom, setZoom] = useState(DEFAULT_ZOOM);
+  useEffect(() => {
+    if (viewLayout) setLayoutState(pinLayout(viewLayout, availability));
+  }, [viewLayout]);
+  const effective = pinLayout(layout, availability);
+  const value = useMemo(
+    () => ({
+      layout: effective,
+      setLayout: (next) => {
+        const pinned = pinLayout(next, availability);
+        setLayoutState(pinned);
+        if (!ignoreStoredLayout) writeStored(LAYOUT_STORAGE_KEY, pinned);
+      },
+      density,
+      setDensity: (next) => {
+        setDensityState(next);
+        if (!ignoreStoredLayout) writeStored(DENSITY_STORAGE_KEY, next);
+      },
+      canUseCards,
+      canUseList,
+      canUseBoard,
+      zoom,
+      setZoom
+    }),
+    [effective, density, canUseCards, canUseList, canUseBoard, zoom]
+  );
+  return /* @__PURE__ */ jsx(DataViewsLayoutContext.Provider, { value, children });
+}
+function useDataViewsLayout() {
+  const ctx = useContext(DataViewsLayoutContext);
+  if (!ctx) {
+    throw new Error("useDataViewsLayout must be used within a DataViewsLayoutProvider");
+  }
+  return ctx;
+}
+function DataViewsZoomSlider({ testIdPrefix }) {
+  const { layout, zoom, setZoom } = useDataViewsLayout();
+  const copy = useDataViewsCopy();
+  if (layout !== "cards" && layout !== "board") return null;
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      sx: {
+        display: { xs: "none", sm: "flex" },
+        alignItems: "center",
+        gap: 1,
+        color: "text.secondary"
+      },
+      children: [
+        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: 14 } }),
+        /* @__PURE__ */ jsx(default2, { sx: { width: 88, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+          Slider,
+          {
+            size: "sm",
+            showValue: false,
+            value: zoom,
+            min: 0,
+            max: 100,
+            step: 5,
+            onChange: (_event, next) => setZoom(Array.isArray(next) ? next[0] ?? 0 : next),
+            "aria-label": copy.display.cardZoom,
+            "data-testid": `${testIdPrefix}-card-zoom`
+          }
+        ) }),
+        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: 20 } })
+      ]
+    }
+  );
+}
+
+export {
+  DENSITY_ROW_PADDING,
+  DENSITY_CARD_SCALE,
+  cardTargetWidthFor,
+  DENSITY_BOARD_SCALE,
+  cardScaleForZoom,
+  cardMinWidthForZoom,
+  DataViewsLayoutProvider,
+  useDataViewsLayout,
+  DataViewsZoomSlider
+};
+//# sourceMappingURL=chunk-2XGGHYEA.js.map

package/dist/chunk-2ZRZTGWP.js

@@ -0,0 +1,230 @@
+import {
+  isDateDisabledBy,
+  nextRangeStep
+} from "./chunk-E2Y7G4MP.js";
+import {
+  ACTIVATION_KEYS,
+  navigateFocus
+} from "./chunk-FFQ4NOJT.js";
+import {
+  addMonths,
+  generateMonthMatrix,
+  getWeekdayNames,
+  normalizeDate
+} from "./chunk-TERT6TIS.js";
+
+// src/components/form/Calendar/Calendar.hooks.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+var startOfMonth = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
+var initialFocus = (props, today) => {
+  if (props.selectionMode === "single" && props.value) return normalizeDate(props.value);
+  if (props.selectionMode === "range" && props.range.start) return normalizeDate(props.range.start);
+  return today;
+};
+var useCalendarState = (props, today) => {
+  const [focusedDate, setFocusedDate] = useState(() => initialFocus(props, today));
+  const [hoveredDate, setHoveredDate] = useState(null);
+  const [currentMonth, setCurrentMonth] = useState(() => startOfMonth(focusedDate));
+  return {
+    focusedDate,
+    setFocusedDate,
+    hoveredDate,
+    setHoveredDate,
+    currentMonth,
+    setCurrentMonth
+  };
+};
+var useAutoFocusGrid = (autoFocus) => {
+  const gridRef = useRef(null);
+  useEffect(() => {
+    if (autoFocus && gridRef.current) gridRef.current.focus();
+  }, [autoFocus]);
+  return gridRef;
+};
+var useVisibleMonths = ({
+  currentMonth,
+  monthsToShow,
+  firstDayOfWeek
+}) => useMemo(() => {
+  const matrices = [];
+  let cursor = currentMonth;
+  for (let i = 0; i < monthsToShow; i++) {
+    matrices.push(generateMonthMatrix(cursor.getMonth(), cursor.getFullYear(), firstDayOfWeek));
+    cursor = addMonths(cursor, 1);
+  }
+  return matrices;
+}, [currentMonth, monthsToShow, firstDayOfWeek]);
+var useDateClick = ({
+  props,
+  isDisabled,
+  setFocusedDate
+}) => {
+  const {
+    selectionMode,
+    range,
+    onChange,
+    onRangeChange,
+    onIntermediateRangeChange,
+    allowSameDayRange,
+    minRangeLength,
+    maxRangeLength
+  } = props;
+  return useCallback(
+    (date) => {
+      if (isDisabled(date)) return;
+      const candidate = normalizeDate(date);
+      setFocusedDate(candidate);
+      if (selectionMode === "single") {
+        onChange?.(candidate);
+        return;
+      }
+      const step = nextRangeStep({
+        start: range.start,
+        end: range.end,
+        candidate,
+        allowSameDayRange,
+        minRangeLength,
+        maxRangeLength
+      });
+      if (step.kind === "rejected") return;
+      if (step.kind === "complete") onRangeChange?.(step.range);
+      onIntermediateRangeChange?.(step.range);
+    },
+    [
+      selectionMode,
+      range,
+      onChange,
+      onRangeChange,
+      onIntermediateRangeChange,
+      isDisabled,
+      allowSameDayRange,
+      minRangeLength,
+      maxRangeLength,
+      setFocusedDate
+    ]
+  );
+};
+var useHoverHandlers = ({
+  selectionMode,
+  range,
+  isDisabled,
+  setHoveredDate
+}) => {
+  const handleDateMouseEnter = useCallback(
+    (date) => {
+      if (selectionMode === "range" && range.start && !range.end && !isDisabled(date)) {
+        setHoveredDate(normalizeDate(date));
+      }
+    },
+    [selectionMode, range, isDisabled, setHoveredDate]
+  );
+  const handleDateMouseLeave = useCallback(() => setHoveredDate(null), [setHoveredDate]);
+  return { handleDateMouseEnter, handleDateMouseLeave };
+};
+var useKeyboardHandler = ({
+  focusedDate,
+  firstDayOfWeek,
+  currentMonth,
+  handleDateClick,
+  setFocusedDate,
+  setCurrentMonth,
+  setHoveredDate
+}) => useCallback(
+  (event) => {
+    const { key } = event;
+    const moved = navigateFocus(key, focusedDate, { firstDayOfWeek, shiftKey: event.shiftKey });
+    if (moved) {
+      event.preventDefault();
+      setFocusedDate(normalizeDate(moved));
+      const month = startOfMonth(moved);
+      if (month.getTime() !== currentMonth.getTime()) setCurrentMonth(month);
+      return;
+    }
+    if (ACTIVATION_KEYS.includes(key)) {
+      event.preventDefault();
+      handleDateClick(focusedDate);
+      return;
+    }
+    if (key === "Escape") {
+      event.preventDefault();
+      setHoveredDate(null);
+    }
+  },
+  [
+    focusedDate,
+    firstDayOfWeek,
+    currentMonth,
+    handleDateClick,
+    setFocusedDate,
+    setCurrentMonth,
+    setHoveredDate
+  ]
+);
+var useCalendar = (props) => {
+  const { monthsToShow, firstDayOfWeek, locale, minDate, maxDate, isDateDisabled } = props;
+  const today = useMemo(() => normalizeDate(/* @__PURE__ */ new Date()), []);
+  const state = useCalendarState(props, today);
+  const gridRef = useAutoFocusGrid(props.autoFocus);
+  const monthMatrices = useVisibleMonths({
+    currentMonth: state.currentMonth,
+    monthsToShow,
+    firstDayOfWeek
+  });
+  const weekdayNames = useMemo(
+    () => getWeekdayNames(locale, firstDayOfWeek),
+    [locale, firstDayOfWeek]
+  );
+  const isDisabled = useCallback(
+    (date) => isDateDisabledBy({ date, minDate, maxDate, isDateDisabled }),
+    [minDate, maxDate, isDateDisabled]
+  );
+  const { setCurrentMonth } = state;
+  const goToPreviousMonth = useCallback(
+    () => setCurrentMonth((prev) => addMonths(prev, -1)),
+    [setCurrentMonth]
+  );
+  const goToNextMonth = useCallback(
+    () => setCurrentMonth((prev) => addMonths(prev, 1)),
+    [setCurrentMonth]
+  );
+  const handleDateClick = useDateClick({
+    props,
+    isDisabled,
+    setFocusedDate: state.setFocusedDate
+  });
+  const { handleDateMouseEnter, handleDateMouseLeave } = useHoverHandlers({
+    selectionMode: props.selectionMode,
+    range: props.range,
+    isDisabled,
+    setHoveredDate: state.setHoveredDate
+  });
+  const handleKeyDown = useKeyboardHandler({
+    focusedDate: state.focusedDate,
+    firstDayOfWeek,
+    currentMonth: state.currentMonth,
+    handleDateClick,
+    setFocusedDate: state.setFocusedDate,
+    setCurrentMonth: state.setCurrentMonth,
+    setHoveredDate: state.setHoveredDate
+  });
+  return {
+    gridRef,
+    today,
+    focusedDate: state.focusedDate,
+    hoveredDate: state.hoveredDate,
+    monthMatrices,
+    weekdayNames,
+    isDisabled,
+    goToPreviousMonth,
+    goToNextMonth,
+    handleDateClick,
+    handleDateMouseEnter,
+    handleDateMouseLeave,
+    handleKeyDown
+  };
+};
+
+export {
+  useCalendar
+};
+//# sourceMappingURL=chunk-2ZRZTGWP.js.map

package/dist/chunk-37DCYIT5.js

@@ -0,0 +1,79 @@
+import {
+  FleetCanvas
+} from "./chunk-DELT2W42.js";
+import {
+  FleetRoster
+} from "./chunk-IFSUKWE7.js";
+
+// src/components/data-display/FleetMap/FleetBody.tsx
+import Box from "@mui/material/Box/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FleetBody({
+  ordered,
+  centre,
+  markers,
+  select,
+  onKeyDown,
+  copy,
+  selectedId,
+  laggingAfterSeconds,
+  staleAfterSeconds,
+  height,
+  loading,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: { xs: "column", md: "row" },
+      spacing: 2,
+      "aria-busy": loading || void 0,
+      "data-testid": `${testId}-body`,
+      sx: { alignItems: "stretch", minWidth: 0 },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              flexBasis: { md: "280px", lg: "320px", xl: "380px" },
+              flexShrink: 0,
+              minWidth: 0,
+              maxHeight: height,
+              display: "flex"
+            },
+            children: /* @__PURE__ */ jsx(
+              FleetRoster,
+              {
+                units: ordered,
+                copy,
+                selectedId,
+                onSelect: select,
+                laggingAfterSeconds,
+                staleAfterSeconds,
+                loading,
+                testId,
+                onKeyDown
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FleetCanvas,
+          {
+            copy,
+            centre,
+            markers,
+            height,
+            testId
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  FleetBody
+};
+//# sourceMappingURL=chunk-37DCYIT5.js.map