@12-apps/ui 6.83.0 → 6.85.0

package/dist/{chunk-62XVHRTX.js → chunk-72HOUWAW.js}

@@ -1,13 +1,13 @@
 import {
   fieldTextFieldStyles
-} from "./chunk-QQHZBJMU.js";
+} from "./chunk-RGVNXES5.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
 
 // src/components/data-display/DataViews/data-views-day-input.tsx
 import TextField from "@mui/material/TextField/index.js";
-import { useEffect, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 var SEGMENT_WIDTH = { year: 4, month: 2, day: 2 };
 function segmentsOf(mask) {
@@ -62,13 +62,62 @@ function maskDate(raw, mask) {
   }
   return out.join(separator);
 }
+var ISO_DAY = /^\s*(\d{4}-\d{2}-\d{2})\s*$/;
+function readDayText(raw, mask) {
+  const iso = ISO_DAY.exec(raw)?.[1];
+  const masked = iso ? isoToMasked(iso, mask) : "";
+  return masked || maskDate(raw, mask);
+}
+function isImpossibleDay(text, mask) {
+  return text.replace(/\D/g, "").length === 8 && maskedToIso(text, mask) === "";
+}
 function dayInputProps(testId, describedBy) {
+  const ids = describedBy.filter(Boolean).join(" ");
   return {
     "data-testid": testId,
     maxLength: 10,
     inputMode: "numeric",
     autoComplete: "off",
-    ...describedBy ? { "aria-describedby": describedBy } : {}
+    ...ids ? { "aria-describedby": ids } : {}
+  };
+}
+function useDayText(applied, mask, onChange, judgesImpossible) {
+  const [text, setText] = useState(() => isoToMasked(applied, mask));
+  const impossible = judgesImpossible && isImpossibleDay(text, mask);
+  const enter = (next) => {
+    setText(next);
+    if (next === "") return onChange(void 0);
+    const iso = maskedToIso(next, mask);
+    if (iso) onChange(iso);
+  };
+  useEffect(() => {
+    setText((current) => {
+      const iso = maskedToIso(current, mask);
+      const means = (iso !== "" || current === "") && iso === applied;
+      return means ? current : isoToMasked(applied, mask);
+    });
+  }, [applied, mask]);
+  return {
+    text,
+    impossible,
+    handleChange: (event) => enter(readDayText(event.target.value, mask)),
+    // A pasted ISO day REPLACES the field whatever it held: inserted at the
+    // caret into existing digits it would be read as more digits, and the
+    // `maxLength` would cut a padded one before `onChange` ever saw it.
+    handlePaste: (event) => {
+      const pasted = event.clipboardData.getData("text");
+      if (!ISO_DAY.test(pasted)) return;
+      event.preventDefault();
+      enter(readDayText(pasted, mask));
+    },
+    // Leaving a half-typed date on screen would show a filter the list is not
+    // actually using. On blur the field snaps back to what IS applied; a
+    // complete date already equals it, so this only ever tidies. An impossible
+    // day the field is SAYING is impossible stays, with its message: snapping
+    // it back is the silent forgetting FUT-4144 removed.
+    handleBlur: () => {
+      if (!impossible) setText(isoToMasked(applied, mask));
+    }
   };
 }
 function DayBoundInput({
@@ -78,34 +127,32 @@ function DayBoundInput({
   testId,
   error = false,
   describedBy,
-  mask
+  mask,
+  invalidMessage
 }) {
-  const applied = value ?? "";
-  const [text, setText] = useState(() => isoToMasked(applied, mask));
-  useEffect(() => {
-    setText(
-      (current) => maskedToIso(current, mask) === applied ? current : isoToMasked(applied, mask)
-    );
-  }, [applied, mask]);
+  const id = useId();
+  const { text, impossible, handleChange, handlePaste, handleBlur } = useDayText(
+    value ?? "",
+    mask,
+    onChange,
+    invalidMessage !== void 0
+  );
   return /* @__PURE__ */ jsx(
     TextField,
     {
       size: "small",
       type: "text",
+      id,
       label,
-      error,
+      error: error || impossible,
+      helperText: impossible ? invalidMessage : void 0,
       placeholder: mask,
       value: text,
-      onChange: (event) => {
-        const next = maskDate(event.target.value, mask);
-        setText(next);
-        if (next === "") return onChange(void 0);
-        const iso = maskedToIso(next, mask);
-        if (iso) onChange(iso);
-      },
-      onBlur: () => setText(isoToMasked(applied, mask)),
+      onChange: handleChange,
+      onPaste: handlePaste,
+      onBlur: handleBlur,
       InputLabelProps: { shrink: true },
-      inputProps: dayInputProps(testId, describedBy),
+      inputProps: dayInputProps(testId, [impossible ? `${id}-helper-text` : void 0, describedBy]),
       sx: [{ width: sxRem(165) }, fieldTextFieldStyles]
     }
   );
@@ -115,6 +162,8 @@ export {
   isoToMasked,
   maskedToIso,
   maskDate,
+  readDayText,
+  isImpossibleDay,
   DayBoundInput
 };
-//# sourceMappingURL=chunk-62XVHRTX.js.map
+//# sourceMappingURL=chunk-72HOUWAW.js.map

package/dist/chunk-72HOUWAW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-day-input.tsx"],"sourcesContent":["'use client';\n\n/**\n * A day bound as a MASKED `dd/mm/aaaa` text field, replacing `<input type=\"date\">`.\n *\n * The native control is three separate segments wearing one box. Typing a date\n * means filling a segment, being jumped to the next, and starting over — and\n * which segment comes first is the BROWSER's locale, not ours, so the same\n * field reads `dd/mm/aaaa` for one merchant and `mm/dd/yyyy` for the next with\n * nothing in our code saying which. There is no way to type a date as one\n * continuous run of digits, which is how people actually type dates.\n *\n * A mask gives that back: eight digits straight through, separators inserted as\n * you go, backspace walking back through them.\n *\n * Measured, driving both controls in Chromium with the same eight keystrokes\n * (`01072026`, one `keydown` at a time):\n *\n *   native  →  field ends EMPTY, no filter applied, 0 requests\n *   masked  →  field reads `01/07/2026`, filter applied, 1 request\n *\n * The native result is the whole complaint: you type a date and nothing lands.\n *\n * The second half of the fix is WHEN the bound is written. A partially-typed\n * year is itself a valid date — `2026` passes through `0002`, `0020`, `0202` on\n * the way — so committing on every keystroke would send the grid off to fetch\n * years nobody meant. A bound is written only once the text is a WHOLE, real\n * date, which is what keeps the run above at one request rather than four.\n */\nimport TextField from '@mui/material/TextField/index.js';\nimport React, { useEffect, useId, useState } from 'react';\nimport { fieldTextFieldStyles } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\n\n\n/**\n * THE MASK IS THE ORDER, and both halves of this file read it.\n *\n * The placeholder a host supplies (`copy.filters.dayMask` — `dd/mm/aaaa` for\n * pt-BR, `mm/dd/yyyy` for en-US) is not decoration: it tells the reader which\n * segment comes first. Everything below therefore derives the segment order\n * FROM that same string, so the shape on screen and the shape the parser\n * expects cannot disagree.\n *\n * They did disagree, and the failure was silent in the worst direction. The\n * mask/parse pair was hardcoded day-first (the `Br` in the old names was\n * accurate) while the placeholder followed the copy pack — so under `en-US` the\n * field ASKED for `mm/dd/yyyy`, and a reader who typed exactly that got a day\n * of 12 and a month of 31, which is not a date, which commits nothing. No\n * error, no filter, a full list that reads like an answer. The en-US pack's own\n * comment already said the mask \"is the shape that gets a date entered\n * backwards\"; nothing enforced it.\n */\n\n/** What one segment of a mask is, and how many digits it takes. */\ntype DaySegment = 'year' | 'month' | 'day';\nconst SEGMENT_WIDTH: Readonly<Record<DaySegment, number>> = { year: 4, month: 2, day: 2 };\n\n/**\n * The segments a mask asks for, in its own order.\n *\n * Keyed on each token's FIRST letter so one rule covers every spelling a host\n * might use — `aaaa`/`yyyy` for the year, `mm` for the month, `dd`/`tt` for the\n * day. An unreadable mask falls back to day-first rather than throwing: this\n * runs on every keystroke, and a field that renders is recoverable where one\n * that crashes the grid is not.\n */\nfunction segmentsOf(mask: string): readonly DaySegment[] {\n  const tokens = mask.split(/[^A-Za-z]+/).filter(Boolean);\n  if (tokens.length !== 3) return ['day', 'month', 'year'];\n  const segments = tokens.map((token): DaySegment => {\n    const head = token.slice(0, 1).toLowerCase();\n    if (head === 'y' || head === 'a') return 'year';\n    return head === 'm' ? 'month' : 'day';\n  });\n  // A mask naming the same segment twice describes no date. Fall back rather\n  // than build a parser that can never succeed.\n  return new Set(segments).size === 3 ? segments : ['day', 'month', 'year'];\n}\n\n/** The separator the mask uses, defaulting to `/`. */\nconst separatorOf = (mask: string): string => mask.replace(/[A-Za-z]/g, '').slice(0, 1) || '/';\n\n/** `AAAA-MM-DD` (the wire) → the mask's own order (what the reader sees). */\nexport function isoToMasked(iso: string, mask: string): string {\n  const parts = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(iso);\n  if (!parts) return '';\n  const value: Record<DaySegment, string> = {\n    year: parts[1] as string,\n    month: parts[2] as string,\n    day: parts[3] as string,\n  };\n  return segmentsOf(mask)\n    .map((segment) => value[segment])\n    .join(separatorOf(mask));\n}\n\n/**\n * The mask's order → `AAAA-MM-DD`, but ONLY for a day that exists.\n *\n * `31/02/2026` parses fine as three numbers and is not a date, and `Date` would\n * silently roll it into March rather than reject it — so the round trip through\n * UTC is the check: if the month or day comes back changed, the input was not a\n * day.\n */\nexport function maskedToIso(text: string, mask: string): string {\n  const segments = segmentsOf(mask);\n  const digits = text.replace(/\\D/g, '');\n  if (digits.length !== 8) return '';\n  const value = {} as Record<DaySegment, string>;\n  let cursor = 0;\n  for (const segment of segments) {\n    value[segment] = digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]);\n    cursor += SEGMENT_WIDTH[segment];\n  }\n  const year = Number(value.year);\n  const month = Number(value.month);\n  const day = Number(value.day);\n  if (year < 1000) return '';\n  const probe = new Date(Date.UTC(year, month - 1, day));\n  if (probe.getUTCMonth() !== month - 1 || probe.getUTCDate() !== day) return '';\n  return `${value.year}-${value.month}-${value.day}`;\n}\n\n/**\n * Digits only, capped at the mask's width, with the separators put back as you\n * type.\n *\n * Deriving the whole string from the digits — rather than editing the text in\n * place — is what makes backspace behave. Four digits of `dd/mm/aaaa` render as\n * `06/08`, not `06/08/`, so deleting the first digit of the year removes the\n * trailing separator with it instead of leaving a dead keystroke that changes\n * nothing.\n */\nexport function maskDate(raw: string, mask: string): string {\n  const segments = segmentsOf(mask);\n  const separator = separatorOf(mask);\n  const digits = raw.replace(/\\D/g, '').slice(0, 8);\n  const out: string[] = [];\n  let cursor = 0;\n  for (const segment of segments) {\n    if (cursor >= digits.length) break;\n    out.push(digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]));\n    cursor += SEGMENT_WIDTH[segment];\n  }\n  return out.join(separator);\n}\n\n/** A wire day on its own, as a paste or an autofill delivers it: `2026-10-01`. */\nconst ISO_DAY = /^\\s*(\\d{4}-\\d{2}-\\d{2})\\s*$/;\n\n/**\n * What the field shows for whatever arrived — typed, pasted, autofilled.\n *\n * A whole ISO day (`AAAA-MM-DD`) is READ AS THAT DAY and written in the mask's\n * order. Through `maskDate` alone it is eight digits taken day-first, so a\n * pasted `2026-10-01` came out as `20/26/1001` (FUT-4144). Anything else is\n * masked exactly as typing always was, so the typed and pasted forms of one day\n * land on the same text.\n */\nexport function readDayText(raw: string, mask: string): string {\n  const iso = ISO_DAY.exec(raw)?.[1];\n  const masked = iso ? isoToMasked(iso, mask) : '';\n  return masked || maskDate(raw, mask);\n}\n\n/**\n * Whether `text` is a WHOLE day that does not exist — `31/02/2026`. A partial\n * entry is not impossible, only unfinished, and is never flagged.\n */\nexport function isImpossibleDay(text: string, mask: string): boolean {\n  return text.replace(/\\D/g, '').length === 8 && maskedToIso(text, mask) === '';\n}\n\n/**\n * What has to land on the `<input>` itself rather than on the `TextField`.\n *\n * Anything `TextField` does not recognise is spread onto its root `FormControl`\n * div. `inputMode` went up there once: the attribute sat on a non-editable\n * wrapper, meant nothing, and the phone went on offering the letter keyboard\n * for a field that only takes digits (the `dd/mm/aaaa` hint under a QWERTY\n * layout). Only the `<input>` this reaches decides which keypad opens — and the\n * same is true of `aria-describedby`, which on the wrapper points at a\n * description no screen reader will read out for the field.\n *\n * `numeric` and not `tel`: both raise a keypad, but the phone one is a dialler\n * with `+ * #` on it — keys that cannot occur in a date. A paste carrying\n * separators still lands, because the MASK is what filters the text; the keypad\n * only narrows what a thumb can reach for.\n *\n * Autofill off for the same reason: the browser's saved-value strip covers the\n * keypad to suggest names and addresses, none of which are a date, and none of\n * which the mask would keep.\n */\nfunction dayInputProps(testId: string, describedBy: readonly (string | undefined)[]) {\n  const ids = describedBy.filter(Boolean).join(' ');\n  return {\n    'data-testid': testId,\n    maxLength: 10,\n    inputMode: 'numeric' as const,\n    autoComplete: 'off',\n    ...(ids ? { 'aria-describedby': ids } : {}),\n  };\n}\n\n/** Props of {@link DayBoundInput}. */\ninterface DayBoundInputProps {\n  label: string;\n  /** The applied bound, `AAAA-MM-DD`, or undefined when this end is open. */\n  value: string | undefined;\n  onChange: (bound: string | undefined) => void;\n  testId: string;\n  /**\n   * Paint the field as rejected. It only ever writes a real day by itself, so\n   * this is for a caller judging the PAIR: a window whose end precedes its\n   * start is two valid days and one impossible period, and the field it was\n   * typed into is the only place to say which half is being complained about.\n   */\n  error?: boolean;\n  /** Id of the element carrying that complaint, so it is read WITH the field. */\n  describedBy?: string;\n  /**\n   * The day mask, which IS the placeholder — so the expected ORDER is on\n   * screen before the first keystroke rather than discovered by getting it\n   * wrong. `dd/mm/aaaa` is one locale's order and one locale's letters.\n   *\n   * A PROP rather than a context read: this field has two callers, and only\n   * one of them is inside DataViews. `DateRangePicker` mounts it standalone\n   * with its own message table, so a context read here throws for every host\n   * of that picker — which is exactly what it did.\n   */\n  mask: string;\n  /**\n   * Said under the field when its eight digits name no day (`31/02/2026`); the\n   * field is then marked invalid and KEEPS the text on blur, so the reader sees\n   * what was refused instead of the old value quietly coming back (FUT-4144).\n   *\n   * Opt-in, because the field ships no words of its own: without it an\n   * impossible day is still never written, and blur still snaps back.\n   */\n  invalidMessage?: string;\n}\n\n/** What {@link useDayText} hands the field: its text, its verdict and its handlers. */\ninterface DayText {\n  text: string;\n  impossible: boolean;\n  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  handlePaste: (event: React.ClipboardEvent<HTMLDivElement>) => void;\n  handleBlur: () => void;\n}\n\n/** The typed text of one bound, kept apart from the APPLIED bound it may commit. */\nfunction useDayText(\n  applied: string,\n  mask: string,\n  onChange: (bound: string | undefined) => void,\n  judgesImpossible: boolean,\n): DayText {\n  const [text, setText] = useState(() => isoToMasked(applied, mask));\n  const impossible = judgesImpossible && isImpossibleDay(text, mask);\n\n  // Emptying clears the bound. A COMPLETE day applies it. A partial (or an\n  // impossible) one does NEITHER — it leaves whatever is applied alone, so\n  // typing is never fought and a half-typed year never reaches the backend.\n  const enter = (next: string) => {\n    setText(next);\n    if (next === '') return onChange(undefined);\n    const iso = maskedToIso(next, mask);\n    if (iso) onChange(iso);\n  };\n\n  // The bound is the APPLIED filter; `text` is what is being typed. Re-sync only\n  // when the applied value moved somewhere the text does not already mean — a\n  // \"Limpar\", a saved view, the other pill resetting the pair. Without that\n  // guard the field's own write bounces straight back mid-edit and resets the\n  // caret, which is the native control's worst habit reproduced by hand.\n  //\n  // \"Already means\" is a REAL day equal to the bound, or an empty field for an\n  // open bound. An impossible day parses to `''` too, so a bare comparison let\n  // a \"Limpar\" (applied → `''`) keep `31/02/2026` on screen, red, over a filter\n  // that had just been cleared.\n  useEffect(() => {\n    setText((current) => {\n      const iso = maskedToIso(current, mask);\n      const means = (iso !== '' || current === '') && iso === applied;\n      return means ? current : isoToMasked(applied, mask);\n    });\n  }, [applied, mask]);\n\n  return {\n    text,\n    impossible,\n    handleChange: (event) => enter(readDayText(event.target.value, mask)),\n    // A pasted ISO day REPLACES the field whatever it held: inserted at the\n    // caret into existing digits it would be read as more digits, and the\n    // `maxLength` would cut a padded one before `onChange` ever saw it.\n    handlePaste: (event) => {\n      const pasted = event.clipboardData.getData('text');\n      if (!ISO_DAY.test(pasted)) return;\n      event.preventDefault();\n      enter(readDayText(pasted, mask));\n    },\n    // Leaving a half-typed date on screen would show a filter the list is not\n    // actually using. On blur the field snaps back to what IS applied; a\n    // complete date already equals it, so this only ever tidies. An impossible\n    // day the field is SAYING is impossible stays, with its message: snapping\n    // it back is the silent forgetting FUT-4144 removed.\n    handleBlur: () => {\n      if (!impossible) setText(isoToMasked(applied, mask));\n    },\n  };\n}\n\n/**\n * One end of a day window. The BOUND stays `AAAA-MM-DD` — the form the backend's\n * inclusive day comparison already speaks, and the form the chip label reads —\n * so only the typing surface changes.\n */\nexport function DayBoundInput({\n  label,\n  value,\n  onChange,\n  testId,\n  error = false,\n  describedBy,\n  mask,\n  invalidMessage,\n}: DayBoundInputProps): React.JSX.Element {\n  const id = useId();\n  const { text, impossible, handleChange, handlePaste, handleBlur } = useDayText(\n    value ?? '',\n    mask,\n    onChange,\n    invalidMessage !== undefined,\n  );\n\n  return (\n    <TextField\n      size=\"small\"\n      type=\"text\"\n      id={id}\n      label={label}\n      error={error || impossible}\n      helperText={impossible ? invalidMessage : undefined}\n      placeholder={mask}\n      value={text}\n      onChange={handleChange}\n      onPaste={handlePaste}\n      onBlur={handleBlur}\n      // The placeholder occupies the space an un-shrunk label would render into.\n      InputLabelProps={{ shrink: true }}\n      inputProps={dayInputProps(testId, [impossible ? `${id}-helper-text` : undefined, describedBy])}\n      sx={[{ width: sxRem(165) }, fieldTextFieldStyles]}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-2D4WKET2.js → chunk-75FHDUJW.js}

@@ -7,13 +7,13 @@ import {
 import {
   asFieldSize,
   fieldHeight
-} from "./chunk-QQHZBJMU.js";
-import {
-  fieldEdge
-} from "./chunk-7ZADLRLP.js";
+} from "./chunk-RGVNXES5.js";
 import {
   fieldRadius
 } from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7ZADLRLP.js";
 import {
   FIELD_BORDER_WIDTH
 } from "./chunk-O6MJWHU5.js";
@@ -264,4 +264,4 @@ export {
   segmentContainerSx,
   segmentButtonSx
 };
-//# sourceMappingURL=chunk-2D4WKET2.js.map
+//# sourceMappingURL=chunk-75FHDUJW.js.map

package/dist/{chunk-66QQ7YQN.js → chunk-75I42HHE.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   ToggleGroup
-} from "./chunk-TR7ZA67L.js";
+} from "./chunk-U2QV4TTZ.js";
 import {
   FormControl,
   FormLabel,
@@ -38,4 +38,4 @@ function ToggleField({ name, options, label }) {
 export {
   ToggleField
 };
-//# sourceMappingURL=chunk-66QQ7YQN.js.map
+//# sourceMappingURL=chunk-75I42HHE.js.map

package/dist/{chunk-AAREDFH6.js → chunk-7TKQIZ3K.js}

@@ -1,6 +1,6 @@
 import {
   fieldHeight
-} from "./chunk-QQHZBJMU.js";
+} from "./chunk-RGVNXES5.js";
 import {
   fieldRadiusPx
 } from "./chunk-GDN2LUTZ.js";
@@ -192,4 +192,4 @@ function SortByDropdown({
 export {
   SortByDropdown
 };
-//# sourceMappingURL=chunk-AAREDFH6.js.map
+//# sourceMappingURL=chunk-7TKQIZ3K.js.map

package/dist/{chunk-WPFVQVQC.js → chunk-7VUXSNVZ.js}

@@ -1,15 +1,15 @@
-import {
-  freshnessOf
-} from "./chunk-XPMGFAJ3.js";
 import {
   FLEET_DOT,
   FLEET_ROSTER,
   FLEET_ROW,
   FLEET_SKELETON
 } from "./chunk-BTQZ3EX3.js";
+import {
+  freshnessOf
+} from "./chunk-XPMGFAJ3.js";
 import {
   Skeleton
-} from "./chunk-62SXUU5U.js";
+} from "./chunk-3DPPDGOF.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -220,4 +220,4 @@ function FleetRoster({
 export {
   FleetRoster
 };
-//# sourceMappingURL=chunk-WPFVQVQC.js.map
+//# sourceMappingURL=chunk-7VUXSNVZ.js.map

package/dist/{chunk-4J62V5OE.js → chunk-7YJYIMWP.js}

@@ -5,7 +5,7 @@ import {
 } from "./chunk-3ZVUNSFF.js";
 import {
   AvatarView
-} from "./chunk-7XSCEHGA.js";
+} from "./chunk-EOQ6EKTS.js";
 import {
   BORDER_WIDTH,
   GROUP_HOVER,
@@ -178,4 +178,4 @@ export {
   Avatar,
   AvatarGroup
 };
-//# sourceMappingURL=chunk-4J62V5OE.js.map
+//# sourceMappingURL=chunk-7YJYIMWP.js.map

package/dist/chunk-A63WU4UZ.js

@@ -0,0 +1,226 @@
+import {
+  labelPosition
+} from "./chunk-COOSJKZL.js";
+import {
+  rem,
+  remPx
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/RegionMap/RegionMapDrawing.tsx
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha } from "@mui/material/styles/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function RegionMapDrawing({
+  model,
+  showCenter,
+  highlightedIds,
+  maxHeight,
+  label,
+  tappable,
+  testId,
+  theme
+}) {
+  const hatchId = `${React.useId().replace(/:/g, "")}-hatch`;
+  const { view, drawn } = model;
+  const wanted = new Set(highlightedIds);
+  const highlighted = drawn.filter((d) => wanted.has(d.id));
+  const labelled = [...drawn.filter((d) => d.excluded), ...highlighted.filter((d) => !d.excluded)];
+  const base = drawn.map((d) => ({ id: d.id, name: d.name, geometry: d.geometry, outside: d.outside === true }));
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "relative",
+        width: "100%",
+        maxWidth: maxHeight,
+        maxHeight,
+        aspectRatio: "1 / 1",
+        border: 1,
+        borderColor: "divider",
+        borderRadius: 1,
+        overflow: "hidden",
+        bgcolor: "background.paper"
+      },
+      "data-testid": `${testId}-canvas`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox: `${view.minX} ${view.minY} ${view.spanX} ${view.spanY}`,
+            role: "img",
+            "aria-label": label,
+            onPointerDown: model.onPointerDown,
+            onClick: model.onClick,
+            style: { display: "block", width: "100%", height: "100%", cursor: tappable ? "pointer" : "default" },
+            children: [
+              /* @__PURE__ */ jsx(Hatch, { id: hatchId, pitch: view.spanX / 70, theme }),
+              /* @__PURE__ */ jsx(BaseAreas, { areas: base, testId, theme }),
+              /* @__PURE__ */ jsx(ExcludedAreas, { drawn, hatchId, testId, theme }),
+              /* @__PURE__ */ jsx(Circles, { radii: model.radii, theme }),
+              highlighted.map((d) => /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: d.geometry.path,
+                  fillRule: "evenodd",
+                  vectorEffect: "non-scaling-stroke",
+                  fill: alpha(theme.palette.primary.main, 0.3),
+                  stroke: theme.palette.primary.main,
+                  strokeWidth: 2.5,
+                  pointerEvents: "none",
+                  "data-testid": `${testId}-highlight-${d.id}`
+                },
+                `h-${d.id}`
+              )),
+              showCenter && /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: 0,
+                  cy: 0,
+                  r: view.spanX / 90,
+                  fill: theme.palette.primary.main,
+                  stroke: theme.palette.background.paper,
+                  strokeWidth: 2,
+                  vectorEffect: "non-scaling-stroke",
+                  pointerEvents: "none",
+                  "data-testid": `${testId}-center`
+                }
+              )
+            ]
+          }
+        ),
+        labelled.map((d) => /* @__PURE__ */ jsx(AreaLabel, { area: d, view, testId, theme }, `l-${d.id}`))
+      ]
+    }
+  );
+}
+function Hatch({ id, pitch, theme }) {
+  return /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("pattern", { id, width: pitch, height: pitch, patternUnits: "userSpaceOnUse", patternTransform: "rotate(45)", children: [
+    /* @__PURE__ */ jsx("rect", { width: pitch, height: pitch, fill: alpha(theme.palette.text.primary, 0.1) }),
+    /* @__PURE__ */ jsx("rect", { width: pitch / 3, height: pitch, fill: theme.palette.text.secondary })
+  ] }) });
+}
+function sameBase(a, b) {
+  if (a.theme !== b.theme || a.testId !== b.testId || a.areas.length !== b.areas.length) return false;
+  return a.areas.every((area, i) => {
+    const other = b.areas[i];
+    return area.id === other.id && area.geometry === other.geometry && area.outside === other.outside && area.name === other.name;
+  });
+}
+var BaseAreas = React.memo(function BaseAreas2({ areas, testId, theme }) {
+  const { palette } = theme;
+  return /* @__PURE__ */ jsx(Fragment, { children: areas.map((d) => /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: d.geometry.path,
+      fillRule: "evenodd",
+      vectorEffect: "non-scaling-stroke",
+      fill: d.outside ? palette.background.paper : palette.action.hover,
+      stroke: palette.divider,
+      strokeWidth: 1,
+      "data-region-id": d.id,
+      "data-testid": `${testId}-area-${d.id}`,
+      children: /* @__PURE__ */ jsx("title", { children: d.name })
+    },
+    d.id
+  )) });
+}, sameBase);
+function ExcludedAreas({
+  drawn,
+  hatchId,
+  testId,
+  theme
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: drawn.filter((d) => d.excluded).map((d) => /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: d.geometry.path,
+      fillRule: "evenodd",
+      vectorEffect: "non-scaling-stroke",
+      fill: `url(#${hatchId})`,
+      stroke: theme.palette.text.secondary,
+      strokeWidth: 1.5,
+      pointerEvents: "none",
+      "data-testid": `${testId}-excluded-${d.id}`
+    },
+    `x-${d.id}`
+  )) });
+}
+function Circles({ radii, theme }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: radii.map((radius) => /* @__PURE__ */ jsx(
+    "circle",
+    {
+      cx: 0,
+      cy: 0,
+      r: radius,
+      fill: "none",
+      stroke: theme.palette.info.main,
+      strokeWidth: 1.75,
+      strokeDasharray: "7 5",
+      vectorEffect: "non-scaling-stroke",
+      pointerEvents: "none"
+    },
+    radius
+  )) });
+}
+function clampCentre(wanted, half, span, gap) {
+  if (span <= 2 * (half + gap)) return span / 2;
+  return Math.min(span - half - gap, Math.max(half + gap, wanted));
+}
+function AreaLabel({
+  area,
+  view,
+  testId,
+  theme
+}) {
+  const at = labelPosition(area.geometry.rings, view);
+  const ref = React.useRef(null);
+  const gap = remPx(theme, 4);
+  React.useEffect(() => {
+    const label = ref.current;
+    const box = label?.parentElement;
+    if (!label || !box || typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(() => {
+      const width = box.clientWidth;
+      const height = box.clientHeight;
+      if (width === 0 || height === 0) return;
+      const x = clampCentre(at.fractionX * width, label.offsetWidth / 2, width, gap);
+      const y = clampCentre(at.fractionY * height, label.offsetHeight / 2, height, gap);
+      label.style.left = `${x / width * 100}%`;
+      label.style.top = `${y / height * 100}%`;
+    });
+    observer.observe(box);
+    observer.observe(label);
+    return () => observer.disconnect();
+  }, [at.fractionX, at.fractionY, gap]);
+  const halo = `0 0 ${rem(theme, 3)} ${theme.palette.background.paper}`;
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      ref,
+      component: "span",
+      "aria-hidden": true,
+      "data-testid": `${testId}-label-${area.id}`,
+      style: { left: `${(at.fractionX * 100).toFixed(2)}%`, top: `${(at.fractionY * 100).toFixed(2)}%` },
+      sx: {
+        position: "absolute",
+        transform: "translate(-50%, -50%)",
+        fontSize: rem(theme, 11),
+        fontWeight: 700,
+        lineHeight: 1.1,
+        textAlign: "center",
+        maxWidth: "45%",
+        color: "text.primary",
+        pointerEvents: "none",
+        textShadow: `${halo}, ${halo}`
+      },
+      children: area.name
+    }
+  );
+}
+
+export {
+  RegionMapDrawing
+};
+//# sourceMappingURL=chunk-A63WU4UZ.js.map

package/dist/chunk-A63WU4UZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/RegionMap/RegionMapDrawing.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem, remPx } from '../../../tokens/relative';\n\nimport { labelPosition, type AreaGeometry, type DrawnRegion, type PlaneBox } from './RegionMap.helpers';\nimport type { RegionMapModel } from './RegionMap.hooks';\n\nexport interface RegionMapDrawingProps {\n  model: RegionMapModel & { view: PlaneBox };\n  showCenter: boolean;\n  highlightedIds: readonly string[];\n  maxHeight: string | undefined;\n  label: string;\n  tappable: boolean;\n  testId: string;\n  theme: Theme;\n}\n\n/**\n * The drawing: one `role=\"img\"`, square, with HTML labels laid over it.\n *\n * Strokes are `non-scaling-stroke` and labels are HTML at theme sizes, so the\n * picture reads the same at 320 px and 1600 px; `maxHeight` caps it on a wide\n * screen. Where it sits in a wider box is the host's call.\n *\n * The base areas are a memoised layer: a toggle changes `excluded`, not the\n * geometry, so only the hatch, highlight and label layers re-render.\n */\nexport function RegionMapDrawing({\n  model,\n  showCenter,\n  highlightedIds,\n  maxHeight,\n  label,\n  tappable,\n  testId,\n  theme,\n}: RegionMapDrawingProps): React.JSX.Element {\n  const hatchId = `${React.useId().replace(/:/g, '')}-hatch`;\n  const { view, drawn } = model;\n  const wanted = new Set(highlightedIds);\n  const highlighted = drawn.filter((d) => wanted.has(d.id));\n  const labelled = [...drawn.filter((d) => d.excluded), ...highlighted.filter((d) => !d.excluded)];\n  const base = drawn.map((d) => ({ id: d.id, name: d.name, geometry: d.geometry, outside: d.outside === true }));\n  return (\n    <Box\n      sx={{\n        position: 'relative',\n        width: '100%',\n        maxWidth: maxHeight,\n        maxHeight,\n        aspectRatio: '1 / 1',\n        border: 1,\n        borderColor: 'divider',\n        borderRadius: 1,\n        overflow: 'hidden',\n        bgcolor: 'background.paper',\n      }}\n      data-testid={`${testId}-canvas`}\n    >\n      <svg\n        viewBox={`${view.minX} ${view.minY} ${view.spanX} ${view.spanY}`}\n        role=\"img\"\n        aria-label={label}\n        onPointerDown={model.onPointerDown}\n        onClick={model.onClick}\n        style={{ display: 'block', width: '100%', height: '100%', cursor: tappable ? 'pointer' : 'default' }}\n      >\n        <Hatch id={hatchId} pitch={view.spanX / 70} theme={theme} />\n        <BaseAreas areas={base} testId={testId} theme={theme} />\n        <ExcludedAreas drawn={drawn} hatchId={hatchId} testId={testId} theme={theme} />\n        <Circles radii={model.radii} theme={theme} />\n        {highlighted.map((d) => (\n          <path\n            key={`h-${d.id}`}\n            d={d.geometry.path}\n            fillRule=\"evenodd\"\n            vectorEffect=\"non-scaling-stroke\"\n            fill={alpha(theme.palette.primary.main, 0.3)}\n            stroke={theme.palette.primary.main}\n            strokeWidth={2.5}\n            pointerEvents=\"none\"\n            data-testid={`${testId}-highlight-${d.id}`}\n          />\n        ))}\n        {showCenter && (\n          <circle\n            cx={0}\n            cy={0}\n            r={view.spanX / 90}\n            fill={theme.palette.primary.main}\n            stroke={theme.palette.background.paper}\n            strokeWidth={2}\n            vectorEffect=\"non-scaling-stroke\"\n            pointerEvents=\"none\"\n            data-testid={`${testId}-center`}\n          />\n        )}\n      </svg>\n      {labelled.map((d) => (\n        <AreaLabel key={`l-${d.id}`} area={d} view={view} testId={testId} theme={theme} />\n      ))}\n    </Box>\n  );\n}\n\n/** The hatch an excluded area is filled with: lines, not a colour. */\nfunction Hatch({ id, pitch, theme }: { id: string; pitch: number; theme: Theme }): React.JSX.Element {\n  return (\n    <defs>\n      <pattern id={id} width={pitch} height={pitch} patternUnits=\"userSpaceOnUse\" patternTransform=\"rotate(45)\">\n        <rect width={pitch} height={pitch} fill={alpha(theme.palette.text.primary, 0.1)} />\n        <rect width={pitch / 3} height={pitch} fill={theme.palette.text.secondary} />\n      </pattern>\n    </defs>\n  );\n}\n\ninterface BaseArea {\n  id: string;\n  name: string;\n  geometry: AreaGeometry;\n  outside: boolean;\n}\n\ninterface BaseAreasProps {\n  areas: readonly BaseArea[];\n  testId: string;\n  theme: Theme;\n}\n\n/** Same areas, same geometry objects, same look: nothing to re-render. */\nfunction sameBase(a: BaseAreasProps, b: BaseAreasProps): boolean {\n  if (a.theme !== b.theme || a.testId !== b.testId || a.areas.length !== b.areas.length) return false;\n  return a.areas.every((area, i) => {\n    const other = b.areas[i]!;\n    return (\n      area.id === other.id &&\n      area.geometry === other.geometry &&\n      area.outside === other.outside &&\n      area.name === other.name\n    );\n  });\n}\n\n/** Every area's fill and border — the tap targets. Memoised: see `sameBase`. */\nconst BaseAreas = React.memo(function BaseAreas({ areas, testId, theme }: BaseAreasProps): React.JSX.Element {\n  const { palette } = theme;\n  return (\n    <>\n      {areas.map((d) => (\n        <path\n          key={d.id}\n          d={d.geometry.path}\n          fillRule=\"evenodd\"\n          vectorEffect=\"non-scaling-stroke\"\n          fill={d.outside ? palette.background.paper : palette.action.hover}\n          stroke={palette.divider}\n          strokeWidth={1}\n          data-region-id={d.id}\n          data-testid={`${testId}-area-${d.id}`}\n        >\n          <title>{d.name}</title>\n        </path>\n      ))}\n    </>\n  );\n}, sameBase);\n\n/** The hatch over every excluded area. */\nfunction ExcludedAreas({\n  drawn,\n  hatchId,\n  testId,\n  theme,\n}: {\n  drawn: readonly DrawnRegion[];\n  hatchId: string;\n  testId: string;\n  theme: Theme;\n}): React.JSX.Element {\n  return (\n    <>\n      {drawn\n        .filter((d) => d.excluded)\n        .map((d) => (\n          <path\n            key={`x-${d.id}`}\n            d={d.geometry.path}\n            fillRule=\"evenodd\"\n            vectorEffect=\"non-scaling-stroke\"\n            fill={`url(#${hatchId})`}\n            stroke={theme.palette.text.secondary}\n            strokeWidth={1.5}\n            pointerEvents=\"none\"\n            data-testid={`${testId}-excluded-${d.id}`}\n          />\n        ))}\n    </>\n  );\n}\n\n/** The dashed circles around the centre. */\nfunction Circles({ radii, theme }: { radii: readonly number[]; theme: Theme }): React.JSX.Element {\n  return (\n    <>\n      {radii.map((radius) => (\n        <circle\n          key={radius}\n          cx={0}\n          cy={0}\n          r={radius}\n          fill=\"none\"\n          stroke={theme.palette.info.main}\n          strokeWidth={1.75}\n          strokeDasharray=\"7 5\"\n          vectorEffect=\"non-scaling-stroke\"\n          pointerEvents=\"none\"\n        />\n      ))}\n    </>\n  );\n}\n\n/** Where a label's centre may go along one axis so the whole label stays in view. */\nfunction clampCentre(wanted: number, half: number, span: number, gap: number): number {\n  if (span <= 2 * (half + gap)) return span / 2;\n  return Math.min(span - half - gap, Math.max(half + gap, wanted));\n}\n\n/**\n * An area's name over the drawing, at the theme's type size whatever the\n * width — and moved in by its own measured size, so it is never clipped at\n * the drawing's edge.\n */\nfunction AreaLabel({\n  area,\n  view,\n  testId,\n  theme,\n}: {\n  area: DrawnRegion;\n  view: PlaneBox;\n  testId: string;\n  theme: Theme;\n}): React.JSX.Element {\n  const at = labelPosition(area.geometry.rings, view);\n  const ref = React.useRef<HTMLSpanElement>(null);\n  const gap = remPx(theme, 4);\n  // Measured by a ResizeObserver, never in a layout effect: the observer's\n  // first call comes after the browser's own layout, so mounting a label on a\n  // tap forces no synchronous reflow of the drawing.\n  React.useEffect(() => {\n    const label = ref.current;\n    const box = label?.parentElement;\n    if (!label || !box || typeof ResizeObserver === 'undefined') return undefined;\n    const observer = new ResizeObserver(() => {\n      const width = box.clientWidth;\n      const height = box.clientHeight;\n      if (width === 0 || height === 0) return;\n      const x = clampCentre(at.fractionX * width, label.offsetWidth / 2, width, gap);\n      const y = clampCentre(at.fractionY * height, label.offsetHeight / 2, height, gap);\n      label.style.left = `${(x / width) * 100}%`;\n      label.style.top = `${(y / height) * 100}%`;\n    });\n    observer.observe(box);\n    observer.observe(label);\n    return () => observer.disconnect();\n  }, [at.fractionX, at.fractionY, gap]);\n  const halo = `0 0 ${rem(theme, 3)} ${theme.palette.background.paper}`;\n  return (\n    <Typography\n      ref={ref}\n      component=\"span\"\n      aria-hidden\n      data-testid={`${testId}-label-${area.id}`}\n      // Position as an inline style, not `sx`: a per-label class would insert\n      // a new CSS rule (and a style recalculation) on every tap.\n      style={{ left: `${(at.fractionX * 100).toFixed(2)}%`, top: `${(at.fractionY * 100).toFixed(2)}%` }}\n      sx={{\n        position: 'absolute',\n        transform: 'translate(-50%, -50%)',\n        fontSize: rem(theme, 11),\n        fontWeight: 700,\n        lineHeight: 1.1,\n        textAlign: 'center',\n        maxWidth: '45%',\n        color: 'text.primary',\n        pointerEvents: 'none',\n        textShadow: `${halo}, ${halo}`,\n      }}\n    >\n      {area.name}\n    </Typography>\n  );\n}\n"],"mappings":"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","names":["BaseAreas"]}

package/dist/chunk-ABRUOINB.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-ABRUOINB.js.map

package/dist/chunk-ABRUOINB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/{chunk-UERGWYGY.js → chunk-ABRVOPC2.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-4XK6JQ4D.js";
 import {
   Button
-} from "./chunk-OKDAHCYE.js";
+} from "./chunk-HJJR2WGL.js";
 import {
   fieldHeight
-} from "./chunk-QQHZBJMU.js";
+} from "./chunk-RGVNXES5.js";
 import {
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -34,4 +34,4 @@ function SubmitButton({
 export {
   SubmitButton
 };
-//# sourceMappingURL=chunk-UERGWYGY.js.map
+//# sourceMappingURL=chunk-ABRVOPC2.js.map

package/dist/{chunk-M74YHHJE.js → chunk-ACBHZG3Z.js}

@@ -7,13 +7,13 @@ import {
 import {
   fieldHeight,
   fieldTextFieldStyles
-} from "./chunk-QQHZBJMU.js";
-import {
-  fieldEdge
-} from "./chunk-7ZADLRLP.js";
+} from "./chunk-RGVNXES5.js";
 import {
   fieldRadiusPx
 } from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7ZADLRLP.js";
 import {
   rem,
   sxRem
@@ -154,4 +154,4 @@ export {
   InlineKeyword,
   CollapsedSearch
 };
-//# sourceMappingURL=chunk-M74YHHJE.js.map
+//# sourceMappingURL=chunk-ACBHZG3Z.js.map

package/dist/chunk-ACFKPE2T.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-ACFKPE2T.js.map

package/dist/chunk-ACFKPE2T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/{chunk-XKPV52CG.js → chunk-ARMKSYEQ.js}

@@ -1,9 +1,9 @@
 import {
   FleetCanvas
-} from "./chunk-GYFKIPR2.js";
+} from "./chunk-IEAPXS57.js";
 import {
   FleetRoster
-} from "./chunk-WPFVQVQC.js";
+} from "./chunk-7VUXSNVZ.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -79,4 +79,4 @@ function FleetBody({
 export {
   FleetBody
 };
-//# sourceMappingURL=chunk-XKPV52CG.js.map
+//# sourceMappingURL=chunk-ARMKSYEQ.js.map

package/dist/{chunk-MHFXJRLD.js → chunk-AT6UKTH4.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-6DPAWXZ3.js";
 import {
   fieldHeight
-} from "./chunk-QQHZBJMU.js";
+} from "./chunk-RGVNXES5.js";
 import {
   fieldEdge
 } from "./chunk-7ZADLRLP.js";
@@ -126,4 +126,4 @@ export {
   QuickChip,
   QuickRow
 };
-//# sourceMappingURL=chunk-MHFXJRLD.js.map
+//# sourceMappingURL=chunk-AT6UKTH4.js.map