@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-E7T3A4IR.js

@@ -0,0 +1,223 @@
+import {
+  FLEET_DOT,
+  FLEET_ROSTER,
+  FLEET_ROW,
+  FLEET_SKELETON
+} from "./chunk-BTQZ3EX3.js";
+import {
+  freshnessOf
+} from "./chunk-XPMGFAJ3.js";
+import {
+  Skeleton
+} from "./chunk-7F7TTOYN.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/FleetMap/FleetRoster.tsx
+import Box from "@mui/material/Box/index.js";
+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";
+function freshnessColor(freshness, theme) {
+  if (freshness === "live") return theme.palette.success.main;
+  if (freshness === "lagging") return theme.palette.warning.main;
+  return theme.palette.text.disabled;
+}
+function RowText({
+  unit,
+  copy,
+  freshness,
+  testId
+}) {
+  const theme = useTheme();
+  const meta = [
+    copy.freshness[freshness],
+    copy.lastSeen(unit.staleSeconds),
+    unit.accuracyM == null ? null : copy.accuracy(unit.accuracyM)
+  ].filter((part) => Boolean(part)).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs(Stack, { sx: { minWidth: 0, flexGrow: 1 }, children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "body2",
+        component: "p",
+        "data-testid": `${testId}-label`,
+        sx: { fontWeight: theme.typography.fontWeightMedium, overflowWrap: "anywhere" },
+        children: unit.label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "caption",
+        component: "p",
+        "data-testid": `${testId}-meta`,
+        sx: { color: theme.palette.text.secondary },
+        children: meta
+      }
+    )
+  ] });
+}
+function useKeptInView(selected, position) {
+  const row = React.useRef(null);
+  React.useEffect(() => {
+    const box = row.current;
+    const list = box?.parentElement;
+    if (!selected || !box || !list) return;
+    const top = box.offsetTop - list.offsetTop;
+    if (top < list.scrollTop) {
+      list.scrollTop = top;
+    } else if (top + box.offsetHeight > list.scrollTop + list.clientHeight) {
+      list.scrollTop = top + box.offsetHeight - list.clientHeight;
+    }
+  }, [selected, position]);
+  return row;
+}
+function rowSx(theme, selected) {
+  const resting = selected ? theme.palette.action.selected : "transparent";
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(FLEET_ROW.gapUnits),
+    padding: theme.spacing(FLEET_ROW.paddingYUnits, FLEET_ROW.paddingXUnits),
+    // `1`, not `theme.shape.borderRadius / 4`. MUI's `sx` reads a NUMBER here as
+    // a multiple of `theme.shape.borderRadius`, so dividing the theme value out
+    // and letting `sx` multiply it back in is quadratic: measured 4px on the
+    // default theme — which is why this looked right — and 36px on a host that
+    // sets its own radius to 12. In a package whose whole premise is being
+    // re-themed, only the multiple is portable.
+    borderRadius: FLEET_ROW.radiusMultiple,
+    cursor: "pointer",
+    backgroundColor: resting,
+    "&:hover": {
+      backgroundColor: selected ? theme.palette.action.selected : theme.palette.action.hover
+    }
+  };
+}
+function FleetRow({
+  unit,
+  copy,
+  freshness,
+  selected,
+  onSelect,
+  optionId,
+  position,
+  testId
+}) {
+  const theme = useTheme();
+  const color = freshnessColor(freshness, theme);
+  const row = useKeptInView(selected, position);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref: row,
+      role: "option",
+      "aria-selected": selected,
+      id: optionId,
+      "data-testid": testId,
+      "data-freshness": freshness,
+      onClick: () => onSelect(unit.id),
+      sx: rowSx(theme, selected),
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            "aria-hidden": "true",
+            "data-testid": `${testId}-dot`,
+            sx: {
+              width: rem(theme, FLEET_DOT.size),
+              height: rem(theme, FLEET_DOT.size),
+              borderRadius: "50%",
+              flexShrink: 0,
+              backgroundColor: color
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(RowText, { unit, copy, freshness, testId }),
+        unit.badge && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "caption",
+            component: "span",
+            "data-testid": `${testId}-badge`,
+            sx: { color: theme.palette.text.secondary, flexShrink: 0 },
+            children: unit.badge
+          }
+        )
+      ]
+    }
+  );
+}
+function FirstLoad({ testId }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Stack, { spacing: FLEET_SKELETON.gapUnits, "data-testid": `${testId}-skeleton`, "aria-hidden": "true", children: Array.from({ length: FLEET_SKELETON.rows }, (_, row) => /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      variant: "rectangular",
+      height: rem(theme, FLEET_SKELETON.height),
+      borderRadius: FLEET_SKELETON.radiusMultiple
+    },
+    row
+  )) });
+}
+function FleetRoster({
+  units,
+  copy,
+  selectedId,
+  onSelect,
+  laggingAfterSeconds,
+  staleAfterSeconds,
+  loading,
+  testId,
+  onKeyDown
+}) {
+  const theme = useTheme();
+  const rowIdPrefix = React.useId();
+  const optionId = (id) => `${rowIdPrefix}-${id}`;
+  const active = units.some((unit) => unit.id === selectedId) ? selectedId : null;
+  if (loading && units.length === 0) return /* @__PURE__ */ jsx(FirstLoad, { testId });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "listbox",
+      tabIndex: 0,
+      "aria-label": copy.rosterLabel,
+      "aria-activedescendant": active ? optionId(active) : void 0,
+      "data-testid": `${testId}-roster`,
+      onKeyDown,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.spacing(FLEET_ROSTER.gapUnits),
+        overflowY: "auto",
+        minWidth: 0,
+        "&:focus-visible": {
+          outline: `${rem(theme, FLEET_ROSTER.focusRingWidth)} solid ${theme.palette.primary.main}`,
+          outlineOffset: rem(theme, FLEET_ROSTER.focusRingOffset)
+        }
+      },
+      children: units.map((unit, index) => /* @__PURE__ */ jsx(
+        FleetRow,
+        {
+          unit,
+          copy,
+          freshness: freshnessOf(unit.staleSeconds, laggingAfterSeconds, staleAfterSeconds),
+          selected: unit.id === active,
+          onSelect,
+          optionId: optionId(unit.id),
+          position: index,
+          testId: `${testId}-${unit.id}`
+        },
+        unit.id
+      ))
+    }
+  );
+}
+
+export {
+  FleetRoster
+};
+//# sourceMappingURL=chunk-E7T3A4IR.js.map

package/dist/chunk-E7T3A4IR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/FleetMap/FleetRoster.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\nimport { Skeleton } from '../../layout/Skeleton/Skeleton';\n\nimport { freshnessOf } from './FleetMap.helpers';\nimport { FLEET_DOT, FLEET_ROSTER, FLEET_ROW, FLEET_SKELETON } from './FleetMap.metrics';\nimport type { FleetFreshness, FleetMapCopy, FleetUnit } from './FleetMap.types';\n\n/**\n * The roster beside the map — and the ACCESSIBLE half of this component.\n *\n * A map is a picture of positions and a screen reader cannot read a picture, so\n * the panel's information is carried by this list. That is not a consolation\n * prize: the list answers the questions a dispatcher actually asks — who is\n * reporting, how recently, and what are they carrying — and it answers them in\n * an order the map cannot express.\n *\n * The map beside it is a NAMED LANDMARK rather than an `aria-hidden` one, so a\n * reader can skip it in one gesture — see `FleetCanvas`, which carries the\n * reason it must not be hidden.\n */\n\n/** Each freshness draws from the semantic palette, never a hardcoded hex. */\nfunction freshnessColor(freshness: FleetFreshness, theme: Theme): string {\n  if (freshness === 'live') return theme.palette.success.main;\n  if (freshness === 'lagging') return theme.palette.warning.main;\n  return theme.palette.text.disabled;\n}\n\n/**\n * A row's two lines of text — the name, and the one-line summary under it.\n *\n * Split out of `FleetRow` to keep that function under the size gate, and the\n * seam is the natural one: everything here is READ, nothing is interactive.\n */\nfunction RowText({\n  unit,\n  copy,\n  freshness,\n  testId,\n}: Pick<RowProps, 'unit' | 'copy' | 'freshness' | 'testId'>): React.JSX.Element {\n  const theme = useTheme();\n\n  // Dropped rather than rendered empty: a phone that reports no accuracy radius\n  // would otherwise print a trailing separator with nothing after it.\n  const meta = [\n    copy.freshness[freshness],\n    copy.lastSeen(unit.staleSeconds),\n    unit.accuracyM == null ? null : copy.accuracy(unit.accuracyM),\n  ]\n    .filter((part): part is string => Boolean(part))\n    .join(' · ');\n\n  return (\n    <Stack sx={{ minWidth: 0, flexGrow: 1 }}>\n      <Typography\n        variant=\"body2\"\n        component=\"p\"\n        data-testid={`${testId}-label`}\n        sx={{ fontWeight: theme.typography.fontWeightMedium, overflowWrap: 'anywhere' }}\n      >\n        {unit.label}\n      </Typography>\n      <Typography\n        variant=\"caption\"\n        component=\"p\"\n        data-testid={`${testId}-meta`}\n        sx={{ color: theme.palette.text.secondary }}\n      >\n        {meta}\n      </Typography>\n    </Stack>\n  );\n}\n\n/**\n * Keep the selected row visible INSIDE the roster.\n *\n * The roster caps its own height, so a dispatcher arrowing through a fleet of\n * thirty otherwise walks the selection below the fold with nothing moving —\n * `aria-activedescendant` follows, and a SIGHTED keyboard user sees no feedback\n * at all.\n *\n * Watches the row's POSITION as well as its selectedness, because the roster\n * re-sorts on every poll: a rider who stays selected while their staleness\n * moves them down the list would otherwise slide out of view with the effect\n * never re-running.\n *\n * Arithmetic rather than `scrollIntoView({ block: 'nearest' })` because that\n * walks every scrollable ancestor, the document included, and `nearest` only\n * spares an ancestor the row is already visible in — which is exactly false\n * when the panel is off screen. Re-running on every re-sort, it would yank the\n * whole page back to the map on a timer, and drag it there on mount for any\n * board rendered below the fold with a selection already set.\n */\nfunction useKeptInView(\n  selected: boolean,\n  position: number,\n): React.RefObject<HTMLDivElement | null> {\n  const row = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    const box = row.current;\n    const list = box?.parentElement;\n    if (!selected || !box || !list) return;\n    const top = box.offsetTop - list.offsetTop;\n    if (top < list.scrollTop) {\n      list.scrollTop = top;\n    } else if (top + box.offsetHeight > list.scrollTop + list.clientHeight) {\n      list.scrollTop = top + box.offsetHeight - list.clientHeight;\n    }\n  }, [selected, position]);\n\n  return row;\n}\n\n/**\n * A row's own box, selected or not.\n *\n * Out of line because the hover rule needs the explanation more than the JSX\n * has room for: hover must never WEAKEN the selection. Written flat as\n * `'&:hover': { backgroundColor: action.hover }`, the pseudo-class wins on\n * specificity and repaints the selected row with the hover tint — measured at\n * `rgba(0,0,0,0.08)` idle against `rgba(0,0,0,0.04)` hovered, so pointing at\n * the selected row visually DESELECTED it and made it indistinguishable from\n * any other row under the cursor.\n */\nfunction rowSx(theme: Theme, selected: boolean): SxProps<Theme> {\n  const resting = selected ? theme.palette.action.selected : 'transparent';\n  return {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(FLEET_ROW.gapUnits),\n    padding: theme.spacing(FLEET_ROW.paddingYUnits, FLEET_ROW.paddingXUnits),\n    // `1`, not `theme.shape.borderRadius / 4`. MUI's `sx` reads a NUMBER here as\n    // a multiple of `theme.shape.borderRadius`, so dividing the theme value out\n    // and letting `sx` multiply it back in is quadratic: measured 4px on the\n    // default theme — which is why this looked right — and 36px on a host that\n    // sets its own radius to 12. In a package whose whole premise is being\n    // re-themed, only the multiple is portable.\n    borderRadius: FLEET_ROW.radiusMultiple,\n    cursor: 'pointer',\n    backgroundColor: resting,\n    '&:hover': {\n      backgroundColor: selected ? theme.palette.action.selected : theme.palette.action.hover,\n    },\n  };\n}\n\ninterface RowProps {\n  unit: FleetUnit;\n  copy: FleetMapCopy;\n  freshness: FleetFreshness;\n  selected: boolean;\n  onSelect: (id: string) => void;\n  /** The row's DOM id, which `aria-activedescendant` points at. */\n  optionId: string;\n  /** Where the row sits in the re-sorted roster — see the scroll effect. */\n  position: number;\n  testId: string;\n}\n\nfunction FleetRow({\n  unit,\n  copy,\n  freshness,\n  selected,\n  onSelect,\n  optionId,\n  position,\n  testId,\n}: RowProps): React.JSX.Element {\n  const theme = useTheme();\n  const color = freshnessColor(freshness, theme);\n  const row = useKeptInView(selected, position);\n\n  return (\n    <Box\n      ref={row}\n      role=\"option\"\n      aria-selected={selected}\n      id={optionId}\n      data-testid={testId}\n      data-freshness={freshness}\n      onClick={() => onSelect(unit.id)}\n      sx={rowSx(theme, selected)}\n    >\n      {/* The dot repeats what the freshness word beside it already says, so it\n          is hidden rather than read twice — and colour is never the only\n          carrier of the state. */}\n      <Box\n        aria-hidden=\"true\"\n        data-testid={`${testId}-dot`}\n        sx={{\n          width: rem(theme, FLEET_DOT.size),\n          height: rem(theme, FLEET_DOT.size),\n          borderRadius: '50%',\n          flexShrink: 0,\n          backgroundColor: color,\n        }}\n      />\n      <RowText unit={unit} copy={copy} freshness={freshness} testId={testId} />\n      {unit.badge && (\n        <Typography\n          variant=\"caption\"\n          component=\"span\"\n          data-testid={`${testId}-badge`}\n          sx={{ color: theme.palette.text.secondary, flexShrink: 0 }}\n        >\n          {unit.badge}\n        </Typography>\n      )}\n    </Box>\n  );\n}\n\n/**\n * What stands in for the roster before any unit has landed.\n *\n * `aria-hidden`, because three grey bars are not information — the panel's\n * `aria-busy` and its optional announcement carry that. The radius is the same\n * MULTIPLE a real row uses rather than a raw pixel count: `Skeleton` forwards\n * the number into `sx`, where it scales with `theme.shape.borderRadius`, so a\n * literal `4` drew 16px against the rows' 4px on the default theme and 48px\n * against 12px on a re-themed host.\n */\nfunction FirstLoad({ testId }: { testId: string }): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Stack spacing={FLEET_SKELETON.gapUnits} data-testid={`${testId}-skeleton`} aria-hidden=\"true\">\n      {Array.from({ length: FLEET_SKELETON.rows }, (_, row) => (\n        <Skeleton\n          key={row}\n          variant=\"rectangular\"\n          height={rem(theme, FLEET_SKELETON.height)}\n          borderRadius={FLEET_SKELETON.radiusMultiple}\n        />\n      ))}\n    </Stack>\n  );\n}\n\nexport interface FleetRosterProps {\n  units: readonly FleetUnit[];\n  copy: FleetMapCopy;\n  selectedId: string | null | undefined;\n  onSelect: (id: string) => void;\n  laggingAfterSeconds: number;\n  staleAfterSeconds: number;\n  loading: boolean;\n  testId: string;\n  onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\nexport function FleetRoster({\n  units,\n  copy,\n  selectedId,\n  onSelect,\n  laggingAfterSeconds,\n  staleAfterSeconds,\n  loading,\n  testId,\n  onKeyDown,\n}: FleetRosterProps): React.JSX.Element {\n  const theme = useTheme();\n  // Generated, not derived from `dataTestId`: two boards on one page filtered\n  // from the same fleet would otherwise emit duplicate DOM ids and an ambiguous\n  // `aria-activedescendant`. Same reason the heading uses one.\n  const rowIdPrefix = React.useId();\n  const optionId = (id: string): string => `${rowIdPrefix}-${id}`;\n\n  // The selection is CONTROLLED, so it can name a unit that has since dropped\n  // out of the freshness window — a courier ending their shift mid-poll. The\n  // attribute must then be absent rather than pointing at an element that no\n  // longer renders, which announces nothing and fails an axe audit. `mapCentre`\n  // and `nextSelection` both handle the same case; this is the third place.\n  const active = units.some((unit) => unit.id === selectedId) ? selectedId : null;\n\n  // Only when there is nothing to show yet. Unmounting a populated listbox on\n  // every poll destroys the focus inside it, so a dispatcher arrowing through\n  // the roster is thrown back to the top of the page each time the data\n  // refreshes — and the rows they were reading vanish and return.\n  if (loading && units.length === 0) return <FirstLoad testId={testId} />;\n\n  return (\n    <Box\n      role=\"listbox\"\n      // A single tab stop with arrow keys inside, which is the listbox pattern:\n      // a dispatcher tabbing past a fleet of thirty should not have to press it\n      // thirty times to reach the map.\n      tabIndex={0}\n      aria-label={copy.rosterLabel}\n      aria-activedescendant={active ? optionId(active) : undefined}\n      data-testid={`${testId}-roster`}\n      onKeyDown={onKeyDown}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: theme.spacing(FLEET_ROSTER.gapUnits),\n        overflowY: 'auto',\n        minWidth: 0,\n        '&:focus-visible': {\n          outline: `${rem(theme, FLEET_ROSTER.focusRingWidth)} solid ${theme.palette.primary.main}`,\n          outlineOffset: rem(theme, FLEET_ROSTER.focusRingOffset),\n        },\n      }}\n    >\n      {units.map((unit, index) => (\n        <FleetRow\n          key={unit.id}\n          unit={unit}\n          copy={copy}\n          freshness={freshnessOf(unit.staleSeconds, laggingAfterSeconds, staleAfterSeconds)}\n          selected={unit.id === active}\n          onSelect={onSelect}\n          optionId={optionId(unit.id)}\n          position={index}\n          testId={`${testId}-${unit.id}`}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-EA2UNEL6.js

@@ -0,0 +1,132 @@
+import {
+  accentFor
+} from "./chunk-TCAQOUIB.js";
+import {
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  remPx,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Chart/chart-internals.ts
+import { alpha } from "@mui/material/styles/index.js";
+var SIZE_PRESETS = {
+  xs: { heightPx: 200, fontSize: sxRem(12), tickMarginPx: 10 },
+  sm: { heightPx: 300, fontSize: sxRem(14), tickMarginPx: 12 },
+  md: { heightPx: 400, fontSize: sxRem(16), tickMarginPx: 14 },
+  lg: { heightPx: 500, fontSize: sxRem(18), tickMarginPx: 16 },
+  xl: { heightPx: 600, fontSize: sxRem(20), tickMarginPx: 18 }
+};
+var presetOf = (size) => SIZE_PRESETS[size ?? "md"] ?? SIZE_PRESETS.md;
+var plotHeightPx = (size, height) => height ?? presetOf(size).heightPx;
+function getSizeStyles(theme, size, height) {
+  const preset = presetOf(size);
+  return {
+    height: remPx(theme, plotHeightPx(size, height)),
+    fontSize: preset.fontSize(theme),
+    tickMargin: remPx(theme, preset.tickMarginPx)
+  };
+}
+function getDefaultColors(theme, variant, colors) {
+  if (colors) return colors;
+  if (variant === "neon") return [...uiInk(theme).dataVizNeon.series];
+  return [
+    theme.palette.primary.main,
+    theme.palette.secondary.main,
+    theme.palette.success.main,
+    theme.palette.warning.main,
+    theme.palette.error.main,
+    theme.palette.info.main
+  ];
+}
+function effectStyles(theme, options) {
+  const accent = accentFor(theme, options.color).main;
+  const glow = options.glow ? { boxShadow: `0 0 ${rem(theme, 30)} ${alpha(accent, 0.4)}` } : {};
+  const pulse = options.pulse ? {
+    animation: "pulse 2s infinite",
+    "@keyframes pulse": {
+      "0%": { boxShadow: `0 0 0 0 ${alpha(accent, 0.4)}` },
+      "70%": { boxShadow: `0 0 0 ${rem(theme, 20)} ${alpha(accent, 0)}` },
+      "100%": { boxShadow: `0 0 0 0 ${alpha(accent, 0)}` }
+    }
+  } : {};
+  return { ...glow, ...pulse };
+}
+function variantSurface(theme, options) {
+  switch (options.variant) {
+    case "glass":
+      return {
+        backgroundColor: alpha(theme.palette.background.paper, options.glass ? 0.1 : 0.9),
+        backdropFilter: `blur(${rem(theme, 20)})`,
+        border: `1px solid ${alpha(theme.palette.divider, 0.1)}`
+      };
+    case "gradient":
+      return {
+        background: options.gradient ? `linear-gradient(135deg, ${alpha(accentFor(theme, options.color).light, 0.05)}, ${alpha(accentFor(theme, options.color).dark, 0.05)})` : theme.palette.background.paper
+      };
+    case "elevated":
+      return { boxShadow: theme.shadows[4] };
+    case "minimal":
+      return { border: "none", backgroundColor: "transparent" };
+    case "neon": {
+      const neon = uiInk(theme).dataVizNeon;
+      return {
+        backgroundColor: neon.ground,
+        border: `1px solid ${alpha(neon.accent, 0.3)}`,
+        "& .recharts-cartesian-grid-horizontal line, & .recharts-cartesian-grid-vertical line": {
+          stroke: alpha(neon.accent, 0.1)
+        }
+      };
+    }
+    default:
+      return { backgroundColor: theme.palette.background.paper };
+  }
+}
+function getVariantStyles(theme, options) {
+  return {
+    borderRadius: theme.spacing(1),
+    transition: theme.transitions.create(["all"], {
+      duration: theme.transitions.duration.standard
+    }),
+    opacity: options.disabled ? 0.5 : 1,
+    pointerEvents: options.disabled ? "none" : "auto",
+    ...effectStyles(theme, options),
+    ...variantSurface(theme, options)
+  };
+}
+function resolveSeries(data, series, xAxisKey, palette) {
+  if (series) return series;
+  if (data.length === 0) return [];
+  return Object.keys(data[0] ?? {}).filter((key) => key !== xAxisKey).map((key, index) => ({
+    dataKey: key,
+    name: key,
+    color: palette[index % palette.length]
+  }));
+}
+function getAxisStyles(theme, variant, fontSize) {
+  const neon = variant === "neon";
+  const neonAccent = uiInk(theme).dataVizNeon.accent;
+  return {
+    axisStyle: {
+      fontSize,
+      fill: neon ? neonAccent : theme.palette.text.secondary,
+      // Ticks are columns of digits: they have to line up between rows.
+      fontVariantNumeric: "tabular-nums"
+    },
+    gridStroke: neon ? alpha(neonAccent, 0.1) : theme.palette.divider,
+    // The neon grid is already a 10%-alpha cyan; halving it again would erase it.
+    gridOpacity: neon ? 1 : 0.5
+  };
+}
+
+export {
+  plotHeightPx,
+  getSizeStyles,
+  getDefaultColors,
+  getVariantStyles,
+  resolveSeries,
+  getAxisStyles
+};
+//# sourceMappingURL=chunk-EA2UNEL6.js.map

package/dist/chunk-EA2UNEL6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chart/chart-internals.ts"],"sourcesContent":["import { alpha, type Theme } from '@mui/material/styles/index.js';\nimport type { CSSProperties } from 'react';\n\nimport type { ChartProps, ChartSeries } from './Chart.types';\nimport { uiInk } from '../../../tokens/ink';\nimport { accentFor, rem, remPx, sxRem } from '../../../tokens/scales';\n\n/**\n * Non-JSX internals of the prop-driven Chart: size/variant styling, palette\n * resolution and series auto-detection. Split from Chart.tsx to keep every\n * function inside the repo's complexity budget.\n */\n\nexport interface SizeStyles {\n  /** The plot's height in rendered px — Recharts sizes from a number — through the type scale. */\n  height: number;\n  fontSize: string;\n  /**\n   * Gap between an axis line and its tick labels, in rendered px, through the\n   * type scale.\n   *\n   * Recharts' default of 2 is not enough. The bottom VALUE tick is centred on\n   * the x-axis line, so its text box reaches ~0.79em BELOW that line, while\n   * the category labels begin 2px under the 6px tick mark — the two collide at\n   * the axis corner, at every viewport. Each value below is ~0.8em of its own\n   * font size, which clears the value label's descender with ~6px to spare.\n   */\n  tickMargin: number;\n}\n\n/** One size step, in design px: the plot's height, its type size and its tick margin. */\ninterface SizePreset {\n  heightPx: number;\n  fontSize: (theme: Theme) => string;\n  tickMarginPx: number;\n}\n\nconst SIZE_PRESETS: Record<NonNullable<ChartProps['size']>, SizePreset> = {\n  xs: { heightPx: 200, fontSize: sxRem(12), tickMarginPx: 10 },\n  sm: { heightPx: 300, fontSize: sxRem(14), tickMarginPx: 12 },\n  md: { heightPx: 400, fontSize: sxRem(16), tickMarginPx: 14 },\n  lg: { heightPx: 500, fontSize: sxRem(18), tickMarginPx: 16 },\n  xl: { heightPx: 600, fontSize: sxRem(20), tickMarginPx: 18 },\n};\n\nconst presetOf = (size: ChartProps['size']): SizePreset => SIZE_PRESETS[size ?? 'md'] ?? SIZE_PRESETS.md;\n\n/** The plot's height in design px: the explicit `height`, else the size's preset. */\nexport const plotHeightPx = (size: ChartProps['size'], height?: number): number =>\n  height ?? presetOf(size).heightPx;\n\nexport function getSizeStyles(theme: Theme, size: ChartProps['size'], height?: number): SizeStyles {\n  const preset = presetOf(size);\n  return {\n    height: remPx(theme, plotHeightPx(size, height)),\n    fontSize: preset.fontSize(theme),\n    tickMargin: remPx(theme, preset.tickMarginPx),\n  };\n}\n\nexport function getDefaultColors(theme: Theme, variant: ChartProps['variant'], colors?: string[]): string[] {\n  if (colors) return colors;\n  if (variant === 'neon') return [...uiInk(theme).dataVizNeon.series];\n  return [\n    theme.palette.primary.main,\n    theme.palette.secondary.main,\n    theme.palette.success.main,\n    theme.palette.warning.main,\n    theme.palette.error.main,\n    theme.palette.info.main,\n  ];\n}\n\ntype SxStyles = Record<string, unknown>;\n\ninterface VariantOptions {\n  variant: NonNullable<ChartProps['variant']>;\n  color: NonNullable<ChartProps['color']>;\n  glow: boolean;\n  pulse: boolean;\n  glass: boolean;\n  gradient: boolean;\n  disabled: boolean;\n}\n\nfunction effectStyles(theme: Theme, options: VariantOptions): SxStyles {\n  const accent = accentFor(theme, options.color).main;\n  const glow = options.glow ? { boxShadow: `0 0 ${rem(theme, 30)} ${alpha(accent, 0.4)}` } : {};\n  const pulse = options.pulse\n    ? {\n        animation: 'pulse 2s infinite',\n        '@keyframes pulse': {\n          '0%': { boxShadow: `0 0 0 0 ${alpha(accent, 0.4)}` },\n          '70%': { boxShadow: `0 0 0 ${rem(theme, 20)} ${alpha(accent, 0)}` },\n          '100%': { boxShadow: `0 0 0 0 ${alpha(accent, 0)}` },\n        },\n      }\n    : {};\n  return { ...glow, ...pulse };\n}\n\nfunction variantSurface(theme: Theme, options: VariantOptions): SxStyles {\n  switch (options.variant) {\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, options.glass ? 0.1 : 0.9),\n        backdropFilter: `blur(${rem(theme, 20)})`,\n        border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,\n      };\n    case 'gradient':\n      return {\n        background: options.gradient\n          ? `linear-gradient(135deg, ${alpha(accentFor(theme, options.color).light, 0.05)}, ${alpha(accentFor(theme, options.color).dark, 0.05)})`\n          : theme.palette.background.paper,\n      };\n    case 'elevated':\n      return { boxShadow: theme.shadows[4] };\n    case 'minimal':\n      return { border: 'none', backgroundColor: 'transparent' };\n    case 'neon': {\n      const neon = uiInk(theme).dataVizNeon;\n      return {\n        backgroundColor: neon.ground,\n        border: `1px solid ${alpha(neon.accent, 0.3)}`,\n        '& .recharts-cartesian-grid-horizontal line, & .recharts-cartesian-grid-vertical line': {\n          stroke: alpha(neon.accent, 0.1),\n        },\n      };\n    }\n    default:\n      return { backgroundColor: theme.palette.background.paper };\n  }\n}\n\nexport function getVariantStyles(theme: Theme, options: VariantOptions): SxStyles {\n  return {\n    borderRadius: theme.spacing(1),\n    transition: theme.transitions.create(['all'], {\n      duration: theme.transitions.duration.standard,\n    }),\n    opacity: options.disabled ? 0.5 : 1,\n    pointerEvents: options.disabled ? ('none' as const) : ('auto' as const),\n    ...effectStyles(theme, options),\n    ...variantSurface(theme, options),\n  };\n}\n\n/** Explicit series, or one series per non-axis key found in the first row. */\nexport function resolveSeries(\n  data: ChartProps['data'],\n  series: ChartSeries[] | undefined,\n  xAxisKey: string,\n  palette: string[],\n): ChartSeries[] {\n  if (series) return series;\n  if (data.length === 0) return [];\n  return Object.keys(data[0] ?? {})\n    .filter((key) => key !== xAxisKey)\n    .map((key, index) => ({\n      dataKey: key,\n      name: key,\n      color: palette[index % palette.length],\n    }));\n}\n\ninterface AxisTextStyles {\n  axisStyle: CSSProperties;\n  gridStroke: string;\n  /**\n   * Multiplier applied to `gridStroke`'s own alpha. Gridlines must read one\n   * step BELOW the card border — the border is `divider`, so half of it —\n   * without being dashed at data weight. Expressing the step as an opacity\n   * rather than a second colour keeps it derived from the theme's divider\n   * whatever form that takes (rgba, hex, or a CSS variable, which the colour\n   * helpers cannot decompose).\n   */\n  gridOpacity: number;\n}\n\nexport function getAxisStyles(theme: Theme, variant: ChartProps['variant'], fontSize: string): AxisTextStyles {\n  const neon = variant === 'neon';\n  const neonAccent = uiInk(theme).dataVizNeon.accent;\n  return {\n    axisStyle: {\n      fontSize,\n      fill: neon ? neonAccent : theme.palette.text.secondary,\n      // Ticks are columns of digits: they have to line up between rows.\n      fontVariantNumeric: 'tabular-nums',\n    },\n    gridStroke: neon ? alpha(neonAccent, 0.1) : theme.palette.divider,\n    // The neon grid is already a 10%-alpha cyan; halving it again would erase it.\n    gridOpacity: neon ? 1 : 0.5,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-EARWC6PD.js

@@ -0,0 +1,59 @@
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataGrid/DataGrid.states.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { jsx } from "react/jsx-runtime";
+function Placeholder({
+  dataTestId,
+  ariaLabel,
+  className,
+  style,
+  htmlProps,
+  children,
+  flag
+}) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-ui": "datagrid",
+      ...{ [flag]: "true" },
+      "data-testid": dataTestId,
+      className,
+      style,
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+        gap: 2,
+        height: sxRem(200)
+      },
+      "aria-label": ariaLabel,
+      role: "grid",
+      ...htmlProps,
+      children
+    }
+  );
+}
+function DataGridLoading(props) {
+  return /* @__PURE__ */ jsx(Placeholder, { ...props, flag: "data-loading", children: /* @__PURE__ */ jsx(CircularProgress, {}) });
+}
+function DataGridError(props) {
+  const { error, ...rest } = props;
+  return /* @__PURE__ */ jsx(Placeholder, { ...rest, flag: "data-error", children: /* @__PURE__ */ jsx(Typography, { color: "error", variant: "body1", children: error }) });
+}
+function DataGridEmpty(props) {
+  const { emptyState, emptyText, ...rest } = props;
+  return /* @__PURE__ */ jsx(Placeholder, { ...rest, flag: "data-empty", children: emptyState ?? /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", children: emptyText }) });
+}
+
+export {
+  DataGridLoading,
+  DataGridError,
+  DataGridEmpty
+};
+//# sourceMappingURL=chunk-EARWC6PD.js.map

package/dist/chunk-EARWC6PD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataGrid/DataGrid.states.tsx"],"sourcesContent":["/**\n * The DataGrid's three PLACEHOLDER states: loading, error, and empty.\n *\n * ## Why they carry `data-testid`\n *\n * They used to not, and it was invisible: `data-testid` is destructured out of\n * the props and was re-applied only on the populated render, so a grid whose\n * first paint was any of these three states rendered with NO test id at all.\n * The grid had booted perfectly and simply could not be found — every spec that\n * landed on a screen with no rows yet waited out its whole budget on an element\n * that would only appear once somebody created a row. `stations.e2e.ts` carries\n * a paragraph about working around exactly this.\n *\n * So all four renders now agree: the id names the GRID, not the grid's data.\n * A test that asks \"did the grid mount\" gets the same answer in every state,\n * and `data-loading` / `data-error` / `data-empty` say WHICH state it is.\n */\nimport Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport type React from 'react';\n\nimport { sxRem } from '../../../tokens/relative';\n\n/** Shared by all three: the same box, the same role, the same id. */\ninterface PlaceholderProps {\n  dataTestId?: string;\n  ariaLabel?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  htmlProps: React.HTMLAttributes<HTMLElement>;\n  children: React.ReactNode;\n  /** The single state flag this placeholder sets (`data-loading` etc.). */\n  flag: 'data-loading' | 'data-error' | 'data-empty';\n}\n\nfunction Placeholder({\n  dataTestId,\n  ariaLabel,\n  className,\n  style,\n  htmlProps,\n  children,\n  flag,\n}: PlaceholderProps): React.JSX.Element {\n  return (\n    <Box\n      data-ui=\"datagrid\"\n      {...{ [flag]: 'true' }}\n      data-testid={dataTestId}\n      className={className}\n      style={style}\n      sx={{\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        flexDirection: 'column',\n        gap: 2,\n        height: sxRem(200),\n      }}\n      aria-label={ariaLabel}\n      role=\"grid\"\n      {...htmlProps}\n    >\n      {children}\n    </Box>\n  );\n}\n\ntype StateProps = Omit<PlaceholderProps, 'children' | 'flag'>;\n\nexport function DataGridLoading(props: StateProps): React.JSX.Element {\n  return (\n    <Placeholder {...props} flag=\"data-loading\">\n      <CircularProgress />\n    </Placeholder>\n  );\n}\n\nexport function DataGridError(\n  props: StateProps & { error: React.ReactNode },\n): React.JSX.Element {\n  const { error, ...rest } = props;\n  return (\n    <Placeholder {...rest} flag=\"data-error\">\n      <Typography color=\"error\" variant=\"body1\">\n        {error}\n      </Typography>\n    </Placeholder>\n  );\n}\n\nexport function DataGridEmpty(\n  props: StateProps & { emptyState?: React.ReactNode; emptyText: string },\n): React.JSX.Element {\n  const { emptyState, emptyText, ...rest } = props;\n  return (\n    <Placeholder {...rest} flag=\"data-empty\">\n      {emptyState ?? (\n        <Typography variant=\"body1\" color=\"text.secondary\">\n          {emptyText}\n        </Typography>\n      )}\n    </Placeholder>\n  );\n}\n"],"mappings":";;;;;AAiBA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,gBAAgB;AA2BnB;AAVJ,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwC;AACtC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAQ;AAAA,MACP,GAAG,EAAE,CAAC,IAAI,GAAG,OAAO;AAAA,MACrB,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,IAAI;AAAA,QACF,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,KAAK;AAAA,QACL,QAAQ,MAAM,GAAG;AAAA,MACnB;AAAA,MACA,cAAY;AAAA,MACZ,MAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAIO,SAAS,gBAAgB,OAAsC;AACpE,SACE,oBAAC,eAAa,GAAG,OAAO,MAAK,gBAC3B,8BAAC,oBAAiB,GACpB;AAEJ;AAEO,SAAS,cACd,OACmB;AACnB,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAC3B,SACE,oBAAC,eAAa,GAAG,MAAM,MAAK,cAC1B,8BAAC,cAAW,OAAM,SAAQ,SAAQ,SAC/B,iBACH,GACF;AAEJ;AAEO,SAAS,cACd,OACmB;AACnB,QAAM,EAAE,YAAY,WAAW,GAAG,KAAK,IAAI;AAC3C,SACE,oBAAC,eAAa,GAAG,MAAM,MAAK,cACzB,wBACC,oBAAC,cAAW,SAAQ,SAAQ,OAAM,kBAC/B,qBACH,GAEJ;AAEJ;","names":[]}

package/dist/chunk-EFHIMCJN.js

@@ -0,0 +1,181 @@
+import {
+  shadowInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/feedback/Sonner/SonnerToast.tsx
+import SuccessIcon from "@mui/icons-material/CheckCircle";
+import CloseIcon from "@mui/icons-material/Close";
+import ErrorIcon from "@mui/icons-material/Error";
+import InfoIcon from "@mui/icons-material/Info";
+import WarningIcon from "@mui/icons-material/Warning";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Collapse from "@mui/material/Collapse/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var renderToastIcon = (icon, type) => {
+  if (icon) return icon;
+  switch (type) {
+    case "success":
+      return /* @__PURE__ */ jsx(SuccessIcon, { sx: { fontSize: sxRem(20), color: "success.main" } });
+    case "error":
+      return /* @__PURE__ */ jsx(ErrorIcon, { sx: { fontSize: sxRem(20), color: "error.main" } });
+    case "warning":
+      return /* @__PURE__ */ jsx(WarningIcon, { sx: { fontSize: sxRem(20), color: "warning.main" } });
+    case "info":
+      return /* @__PURE__ */ jsx(InfoIcon, { sx: { fontSize: sxRem(20), color: "info.main" } });
+    case "loading":
+      return /* @__PURE__ */ jsx(CircularProgress, { size: 16 });
+    default:
+      return null;
+  }
+};
+var resolveToastAnnouncement = (important, type) => {
+  const interrupts = important || type === "error";
+  return {
+    role: interrupts ? "alert" : "status",
+    live: interrupts ? "assertive" : "polite"
+  };
+};
+var buildToastStyles = (theme, variant, visible) => {
+  const baseStyles = {
+    borderRadius: theme.spacing(1.5),
+    border: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: theme.shadows[4],
+    transition: theme.transitions.create(["all", "transform", "opacity"], {
+      duration: theme.transitions.duration.short
+    }),
+    transform: visible ? "scale(1)" : "scale(0.95)",
+    opacity: visible ? 1 : 0
+  };
+  switch (variant) {
+    case "glass":
+      return {
+        ...baseStyles,
+        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 ${shadowInk(theme, 0.1)}`
+      };
+    case "minimal":
+      return {
+        ...baseStyles,
+        backgroundColor: theme.palette.background.default,
+        border: "none",
+        boxShadow: "none",
+        borderLeft: `4px solid ${theme.palette.primary.main}`,
+        borderRadius: 0
+      };
+    default:
+      return baseStyles;
+  }
+};
+var ToastContent = ({ title, description, important, action, cancel }) => /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+  title && /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "body2",
+      sx: {
+        fontWeight: important ? 600 : 500,
+        color: "text.primary",
+        mb: description ? 0.5 : 0
+      },
+      children: title
+    }
+  ),
+  description && /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", fontSize: sxRem(14) }, children: description }),
+  (action || cancel) && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1, mt: 1.5 }, children: [
+    action && /* @__PURE__ */ jsx(ToastActionButton, { action, buttonVariant: "contained" }),
+    cancel && /* @__PURE__ */ jsx(ToastActionButton, { action: cancel, buttonVariant: "outlined" })
+  ] })
+] });
+var ToastActionButton = ({ action, buttonVariant }) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    size: "small",
+    onClick: action.onClick,
+    variant: buttonVariant,
+    sx: { fontSize: sxRem(12), py: 0.5, px: 1.5 },
+    children: action.label
+  }
+);
+var SonnerToast = ({
+  id,
+  title,
+  description,
+  type = "default",
+  variant = "default",
+  closable = true,
+  dismissLabel,
+  action,
+  cancel,
+  icon,
+  important = false,
+  visible,
+  onDismiss
+}) => {
+  const theme = useTheme();
+  const announcement = resolveToastAnnouncement(important, type);
+  const handleDismiss = () => {
+    onDismiss(id);
+  };
+  return /* @__PURE__ */ jsx(Collapse, { in: visible, timeout: 200, children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: announcement.role,
+      "aria-live": announcement.live,
+      "aria-atomic": "true",
+      sx: {
+        ...buildToastStyles(theme, variant, visible),
+        p: 2,
+        mb: 1,
+        minWidth: 356,
+        maxWidth: 400,
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 1.5
+      },
+      children: [
+        renderToastIcon(icon, type),
+        /* @__PURE__ */ jsx(
+          ToastContent,
+          {
+            title,
+            description,
+            important,
+            action,
+            cancel
+          }
+        ),
+        closable && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: handleDismiss,
+            "aria-label": dismissLabel,
+            sx: {
+              ml: "auto",
+              color: "text.secondary",
+              "&:hover": {
+                backgroundColor: "action.hover"
+              }
+            },
+            children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+export {
+  SonnerToast
+};
+//# sourceMappingURL=chunk-EFHIMCJN.js.map