@12-apps/ui 6.86.0 → 6.86.1

package/dist/types/components/data-display/RegionMap/RegionMap.labels.d.ts

@@ -0,0 +1,42 @@
+/** Where a label's centre may go along one axis so the whole label stays in view. */
+export declare function clampCentre(wanted: number, half: number, span: number, gap: number): number;
+/** An area that may carry a label, as {@link labelOrder} ranks it. */
+interface Labelable {
+    id: string;
+    name: string;
+    excluded?: boolean;
+    geometry: {
+        area: number;
+    };
+}
+/**
+ * The order labels claim their place in: highlighted first (what the person is
+ * looking for), then excluded, then the larger area, then by name. When two
+ * labels would overlap, the earlier one is drawn and the later one hidden.
+ */
+export declare function labelOrder<T extends Labelable>(areas: readonly T[], highlighted: ReadonlySet<string>): T[];
+/** A label measured in the drawing: where it wants to be (fractions), and its size in px. */
+export interface LabelBox {
+    fractionX: number;
+    fractionY: number;
+    spanX: number;
+    spanY: number;
+}
+/** Where each label goes, in px, and whether it is drawn at all. */
+export interface PlacedLabel {
+    x: number;
+    y: number;
+    visible: boolean;
+}
+/**
+ * Lay labels out in priority order ({@link labelOrder}): each is pulled inside
+ * the drawing by its own size, and one whose box would overlap a label already
+ * drawn is hidden — the area keeps its name in its `<title>` and in the list,
+ * so hiding costs nothing but the clutter two names over each other made.
+ */
+export declare function placeLabels(labels: readonly LabelBox[], box: {
+    spanX: number;
+    spanY: number;
+}, gap: number): PlacedLabel[];
+export {};
+//# sourceMappingURL=RegionMap.labels.d.ts.map

package/dist/types/components/data-display/RegionMap/RegionMap.labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegionMap.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMap.labels.ts"],"names":[],"mappings":"AAEA,qFAAqF;AACrF,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAG3F;AAED,sEAAsE;AACtE,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,EAAE,EAAE,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAK1G;AAED,6FAA6F;AAC7F,MAAM,WAAW,QAAQ;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,oEAAoE;AACpE,MAAM,WAAW,WAAW;IAC1B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,SAAS,QAAQ,EAAE,EAAE,GAAG,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,GAAG,EAAE,MAAM,GAAG,WAAW,EAAE,CAU1H"}

package/dist/types/components/data-display/RegionMap/RegionMapDrawing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RegionMapDrawing.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMapDrawing.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAsD,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACxG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,GAAG;QAAE,IAAI,EAAE,QAAQ,CAAA;KAAE,CAAC;IAC3C,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;CACd;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,UAAU,EACV,cAAc,EACd,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,GACN,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAmE3C"}
+{"version":3,"file":"RegionMapDrawing.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMapDrawing.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAsD,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACxG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,GAAG;QAAE,IAAI,EAAE,QAAQ,CAAA;KAAE,CAAC;IAC3C,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;CACd;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,UAAU,EACV,cAAc,EACd,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,GACN,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4D3C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.86.0",
+  "version": "6.86.1",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/RegionMap/RegionMap.labels.ts

@@ -0,0 +1,60 @@
+// How the labels over a RegionMap drawing are ranked and laid out.
+
+/** Where a label's centre may go along one axis so the whole label stays in view. */
+export function clampCentre(wanted: number, half: number, span: number, gap: number): number {
+  if (span <= 2 * (half + gap)) return span / 2;
+  return Math.min(span - half - gap, Math.max(half + gap, wanted));
+}
+
+/** An area that may carry a label, as {@link labelOrder} ranks it. */
+interface Labelable {
+  id: string;
+  name: string;
+  excluded?: boolean;
+  geometry: { area: number };
+}
+
+/**
+ * The order labels claim their place in: highlighted first (what the person is
+ * looking for), then excluded, then the larger area, then by name. When two
+ * labels would overlap, the earlier one is drawn and the later one hidden.
+ */
+export function labelOrder<T extends Labelable>(areas: readonly T[], highlighted: ReadonlySet<string>): T[] {
+  const rank = (area: T): number => (highlighted.has(area.id) ? 0 : area.excluded ? 1 : 2);
+  return [...areas].sort(
+    (a, b) => rank(a) - rank(b) || b.geometry.area - a.geometry.area || a.name.localeCompare(b.name),
+  );
+}
+
+/** A label measured in the drawing: where it wants to be (fractions), and its size in px. */
+export interface LabelBox {
+  fractionX: number;
+  fractionY: number;
+  spanX: number;
+  spanY: number;
+}
+
+/** Where each label goes, in px, and whether it is drawn at all. */
+export interface PlacedLabel {
+  x: number;
+  y: number;
+  visible: boolean;
+}
+
+/**
+ * Lay labels out in priority order ({@link labelOrder}): each is pulled inside
+ * the drawing by its own size, and one whose box would overlap a label already
+ * drawn is hidden — the area keeps its name in its `<title>` and in the list,
+ * so hiding costs nothing but the clutter two names over each other made.
+ */
+export function placeLabels(labels: readonly LabelBox[], box: { spanX: number; spanY: number }, gap: number): PlacedLabel[] {
+  const kept: { x0: number; y0: number; x1: number; y1: number }[] = [];
+  return labels.map((label) => {
+    const x = clampCentre(label.fractionX * box.spanX, label.spanX / 2, box.spanX, gap);
+    const y = clampCentre(label.fractionY * box.spanY, label.spanY / 2, box.spanY, gap);
+    const rect = { x0: x - label.spanX / 2, y0: y - label.spanY / 2, x1: x + label.spanX / 2, y1: y + label.spanY / 2 };
+    const visible = !kept.some((o) => rect.x0 < o.x1 && o.x0 < rect.x1 && rect.y0 < o.y1 && o.y0 < rect.y1);
+    if (visible) kept.push(rect);
+    return { x, y, visible };
+  });
+}

package/src/components/data-display/RegionMap/RegionMapDrawing.tsx

@@ -7,6 +7,7 @@ import { rem, remPx } from '../../../tokens/relative';
 
 import { labelPosition, type AreaGeometry, type DrawnRegion, type PlaneBox } from './RegionMap.helpers';
 import type { RegionMapModel } from './RegionMap.hooks';
+import { labelOrder, placeLabels } from './RegionMap.labels';
 
 export interface RegionMapDrawingProps {
   model: RegionMapModel & { view: PlaneBox };
@@ -43,7 +44,11 @@ export function RegionMapDrawing({
   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)];
+  // Highlighted, then excluded, then larger, then by name: the order labels
+  // claim their place in, so a collision hides the less important one.
+  const labelled = labelOrder(drawn.filter((d) => d.excluded || wanted.has(d.id)), wanted);
+  const boxRef = React.useRef<HTMLDivElement>(null);
+  useLabelPlacement(boxRef, labelled.map((d) => d.id).join('|'), remPx(theme, 4));
   const base = drawn.map((d) => ({ id: d.id, name: d.name, geometry: d.geometry, outside: d.outside === true }));
   return (
     <Box
@@ -60,6 +65,7 @@ export function RegionMapDrawing({
         bgcolor: 'background.paper',
       }}
       data-testid={`${testId}-canvas`}
+      ref={boxRef}
     >
       <svg
         viewBox={`${view.minX} ${view.minY} ${view.spanX} ${view.spanY}`}
@@ -73,19 +79,7 @@ export function RegionMapDrawing({
         <BaseAreas areas={base} testId={testId} theme={theme} />
         <ExcludedAreas drawn={drawn} hatchId={hatchId} testId={testId} theme={theme} />
         <Circles radii={model.radii} theme={theme} />
-        {highlighted.map((d) => (
-          <path
-            key={`h-${d.id}`}
-            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}`}
-          />
-        ))}
+        <Highlights areas={highlighted} testId={testId} theme={theme} />
         {showCenter && (
           <circle
             cx={0}
@@ -107,6 +101,35 @@ export function RegionMapDrawing({
   );
 }
 
+/** The highlighted areas, drawn over everything but the centre. */
+function Highlights({
+  areas,
+  testId,
+  theme,
+}: {
+  areas: readonly DrawnRegion[];
+  testId: string;
+  theme: Theme;
+}): React.JSX.Element {
+  return (
+    <>
+      {areas.map((d) => (
+        <path
+          key={`h-${d.id}`}
+          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}`}
+        />
+      ))}
+    </>
+  );
+}
+
 /** The hatch an excluded area is filled with: lines, not a colour. */
 function Hatch({ id, pitch, theme }: { id: string; pitch: number; theme: Theme }): React.JSX.Element {
   return (
@@ -225,16 +248,52 @@ function Circles({ radii, theme }: { radii: readonly number[]; theme: Theme }):
   );
 }
 
-/** Where a label's centre may go along one axis so the whole label stays in view. */
-function clampCentre(wanted: number, half: number, span: number, gap: number): number {
-  if (span <= 2 * (half + gap)) return span / 2;
-  return Math.min(span - half - gap, Math.max(half + gap, wanted));
+/**
+ * Places every label the drawing carries, in their DOM order (the priority
+ * order), and hides one that would overlap a label already drawn
+ * (`placeLabels`). Measured by a ResizeObserver, never in a layout effect: its
+ * first call comes after the browser's own layout, so mounting a label on a
+ * tap forces no synchronous reflow of the drawing.
+ */
+function useLabelPlacement(boxRef: React.RefObject<HTMLDivElement | null>, key: string, gap: number): void {
+  React.useEffect(() => {
+    const box = boxRef.current;
+    if (!box || typeof ResizeObserver === 'undefined') return undefined;
+    const labels = Array.from(box.querySelectorAll<HTMLElement>('[data-region-label]'));
+    const place = (): void => {
+      const spanX = box.clientWidth;
+      const spanY = box.clientHeight;
+      if (spanX === 0 || spanY === 0) return;
+      const placed = placeLabels(
+        labels.map((label) => ({
+          fractionX: Number(label.dataset.fractionX),
+          fractionY: Number(label.dataset.fractionY),
+          spanX: label.offsetWidth,
+          spanY: label.offsetHeight,
+        })),
+        { spanX, spanY },
+        gap,
+      );
+      placed.forEach(({ x, y, visible }, index) => {
+        const label = labels[index]!;
+        label.style.left = `${(x / spanX) * 100}%`;
+        label.style.top = `${(y / spanY) * 100}%`;
+        label.style.visibility = visible ? 'visible' : 'hidden';
+        label.dataset.hidden = visible ? 'false' : 'true';
+      });
+    };
+    const observer = new ResizeObserver(place);
+    observer.observe(box);
+    for (const label of labels) observer.observe(label);
+    return () => observer.disconnect();
+  }, [boxRef, key, gap]);
 }
 
 /**
  * An area's name over the drawing, at the theme's type size whatever the
- * width — and moved in by its own measured size, so it is never clipped at
- * the drawing's edge.
+ * width. Placed — and hidden on a collision — by {@link useLabelPlacement}.
+ * Decorative (`aria-hidden`): the area's name is its `<title>` and its row in
+ * the list.
  */
 function AreaLabel({
   area,
@@ -248,42 +307,25 @@ function AreaLabel({
   theme: Theme;
 }): React.JSX.Element {
   const at = labelPosition(area.geometry.rings, view);
-  const ref = React.useRef<HTMLSpanElement>(null);
-  const gap = remPx(theme, 4);
-  // Measured by a ResizeObserver, never in a layout effect: the observer's
-  // first call comes after the browser's own layout, so mounting a label on a
-  // tap forces no synchronous reflow of the drawing.
-  React.useEffect(() => {
-    const label = ref.current;
-    const box = label?.parentElement;
-    if (!label || !box || typeof ResizeObserver === 'undefined') return undefined;
-    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 (
     <Typography
-      ref={ref}
       component="span"
       aria-hidden
       data-testid={`${testId}-label-${area.id}`}
+      data-region-label=""
+      data-fraction-x={at.fractionX}
+      data-fraction-y={at.fractionY}
       // Position as an inline style, not `sx`: a per-label class would insert
       // a new CSS rule (and a style recalculation) on every tap.
-      style={{ left: `${(at.fractionX * 100).toFixed(2)}%`, top: `${(at.fractionY * 100).toFixed(2)}%` }}
+      style={{
+        left: `${(at.fractionX * 100).toFixed(2)}%`,
+        top: `${(at.fractionY * 100).toFixed(2)}%`,
+      }}
       sx={{
         position: 'absolute',
         transform: 'translate(-50%, -50%)',
-        fontSize: rem(theme, 11),
+        fontSize: rem(theme, 12),
         fontWeight: 700,
         lineHeight: 1.1,
         textAlign: 'center',

package/dist/chunk-A63WU4UZ.js.map

@@ -1 +0,0 @@
-{"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"]}