@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/observations-map.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"observations-map.mjs","names":[],"sources":["../src/observations-map.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {RotateCcw} from \"lucide-react\";\nimport mapboxgl from \"mapbox-gl\";\nimport \"mapbox-gl/dist/mapbox-gl.css\";\nimport * as React from \"react\";\n\nimport {FLOAT_SHADOW} from \"./float-shadow\";\nimport {MAPBOX_TOKEN} from \"./mapbox-token\";\nimport {TimeScrubber, type TimeScrubberProps} from \"./time-scrubber\";\n\nconst BLUEPRINT_SOURCE_ID = \"observations-blueprint\";\nconst BLUEPRINT_LAYER_ID = \"observations-blueprint-raster\";\nconst FOOTPRINT_SOURCE_ID = \"observations-blueprint-footprint\";\nconst FOOTPRINT_FILL_ID = \"observations-blueprint-footprint-fill\";\nconst FOOTPRINT_LINE_ID = \"observations-blueprint-footprint-line\";\nconst ZONES_SOURCE_ID = \"observations-zones\";\nconst ZONES_FILL_ID = \"observations-zones-fill\";\nconst ZONES_LABEL_ID = \"observations-zones-label\";\nconst ZONES_SELECTED_ID = \"observations-zones-selected\";\nconst COVERAGE_SOURCE_ID = \"observations-coverage\";\nconst COVERAGE_FILL_ID = \"observations-coverage-fill\";\nconst COVERAGE_LINE_ID = \"observations-coverage-line\";\nconst TRACK_SOURCE_ID = \"observations-track\";\nconst TRACK_CORRIDOR_ID = \"observations-track-corridor\";\nconst TRACK_LINE_ID = \"observations-track-line\";\nconst TRACK_DISC_SOURCE_ID = \"observations-track-disc\";\nconst TRACK_DISC_FILL_ID = \"observations-track-disc-fill\";\nconst TRACK_DISC_LINE_ID = \"observations-track-disc-line\";\n/**\n * Emphasis while a zone selection is live: the selected zone is lifted and everything else fades back.\n * The fade is deliberately strong — the point is that the selection stands alone — but stops short of\n * zero so the surrounding geometry is still faintly readable.\n */\nconst ZONE_SELECTED_FILL_BOOST = 2;\nconst ZONE_SELECTED_FILL_MAX = 0.6;\nconst ZONE_UNSELECTED_FILL_DIM = 0.25;\nconst ZONE_UNSELECTED_LABEL_DIM = 0.2;\n/** Fade duration in ms, so selecting reads as a fade rather than a snap. */\nconst ZONE_FADE_MS = 350;\n\n/** A `[longitude, latitude]` pair, in the order Mapbox expects. */\nexport type LngLat = [number, number];\n\n/**\n * The four georeferenced corners of a blueprint, in Mapbox image-source order:\n * `[top-left, top-right, bottom-right, bottom-left]` — i.e. clockwise from the\n * north-west corner. Mapbox is strict about this order; a rotated array renders\n * the plan flipped or sheared.\n */\nexport type BlueprintCorners = [LngLat, LngLat, LngLat, LngLat];\n\n/**\n * Corners of the default site blueprint (Eastern Province, KSA), already\n * normalized into Mapbox order: NW, NE, SE, SW.\n */\nconst DEFAULT_BLUEPRINT_CORNERS: BlueprintCorners = [\n\t[49.592229, 26.883951], // top-left / NW\n\t[49.805313, 26.885901], // top-right / NE\n\t[49.8069796, 26.7313363], // bottom-right / SE\n\t[49.5941116, 26.729402], // bottom-left / SW\n];\n\nexport interface MapZone {\n\t/** Stable identity — passed back on select. */\n\tid: string | number;\n\t/** Label drawn at the zone's centre. Omit to render the polygon unlabelled. */\n\tname?: string;\n\t/**\n\t * Ring of `[longitude, latitude]` points. The ring may repeat its first point at the end, and may\n\t * carry consecutive duplicates — both are tolerated and cleaned up before drawing.\n\t */\n\tcoordinates: LngLat[];\n\t/** Fill and outline colour, any CSS colour. Default `#f97316`. */\n\tcolor?: string;\n\t/** Draw the heavier outline used for restricted areas. Default false. */\n\trestricted?: boolean;\n}\n\nexport interface Observation {\n\t/** Stable identity — used as the React key and passed back on select. */\n\tid: string;\n\t/** Where the observation sits, as `[longitude, latitude]`. */\n\tcoordinates: LngLat;\n\t/** Popup title. Omit to render a marker with no popup. */\n\tlabel?: string;\n\t/** Secondary popup line, e.g. the trade or the reporter. */\n\tdescription?: string;\n\t/** Marker fill. Default `#f97316` (Core orange). */\n\tcolor?: string;\n}\n\n/**\n * Filled hazard mark, built from lucide's `triangle-alert` outline. Lucide ships outline-only, so the\n * solid variant is authored here: the body takes the glyph fill (white) and the exclamation is knocked\n * back out in `currentColor`, which {@link badgeElement} sets to the badge's own colour.\n *\n * Markers are plain DOM — mounting a React root per pin would cost hundreds of roots on a busy day —\n * so glyphs ship as markup rather than components.\n */\nconst HAZARD_ICON =\n\t'<path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\"/>' +\n\t'<rect x=\"11\" y=\"9\" width=\"2\" height=\"5.4\" rx=\"1\" fill=\"currentColor\"/>' +\n\t'<circle cx=\"12\" cy=\"17.4\" r=\"1.15\" fill=\"currentColor\"/>';\n\n/**\n * Filled video camera, built from lucide's `video` outline — a body and a lens barrel that both close\n * cleanly, with the lens knocked out in `currentColor`. Reads as a live feed rather than a stills\n * camera, which is what these actually are.\n */\nconst CAMERA_ICON =\n\t'<rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2.5\"/>' +\n\t'<path d=\"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5z\"/>' +\n\t'<circle cx=\"9\" cy=\"12\" r=\"2.6\" fill=\"currentColor\"/>';\n\n/**\n * Filled guard mark, built from lucide's `shield-user`: a shield body that fills, with the head and\n * shoulders knocked back out in `currentColor`.\n */\nconst RESPONDER_ICON =\n\t'<path d=\"M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z\"/>' +\n\t'<circle cx=\"12\" cy=\"10.2\" r=\"2.9\" fill=\"currentColor\"/>' +\n\t'<path d=\"M6.9 18.5a5.6 5.6 0 0 1 10.2 0\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\"/>';\n\nexport {HAZARD_ICON, CAMERA_ICON, RESPONDER_ICON};\n\nexport interface MapResponder {\n\t/** Stable identity — passed back on select. */\n\tid: string | number;\n\t/** Where the responder is, as `[longitude, latitude]`. */\n\tcoordinates: LngLat;\n\t/** Responder name, used for the marker tooltip. */\n\tname?: string;\n\t/** Marks them as on shift; offline responders draw at reduced strength. */\n\tonline?: boolean;\n\t/** Badge body colour. Default `#2f6b63` — distinct from cameras and from every status. */\n\tcolor?: string;\n}\n\nexport interface MapCamera {\n\t/** Stable identity — passed back on select. */\n\tid: string | number;\n\t/** Where the camera sits, as `[longitude, latitude]`. */\n\tcoordinates: LngLat;\n\t/** Camera name, used for the tooltip and popup title. */\n\tname?: string;\n\t/**\n\t * Violations attributed to this camera. Rendered as an always-on count badge, the way an alert icon\n\t * carries its notification number — one camera commonly accounts for many violations.\n\t */\n\tviolations?: number;\n\t/** Badge body colour. Default `#3d4a5c` — a muted slate-blue that sits back rather than competing with the violations. */\n\tcolor?: string;\n}\n\nexport interface ObservationsMapProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * URL of the blueprint image to drape over the map. Until one is supplied the\n\t * component draws the footprint outline from `corners` so the placement is\n\t * still verifiable.\n\t */\n\tblueprintUrl?: string;\n\t/** Georeferenced corners of the blueprint. Default: the built-in site corners. */\n\tcorners?: BlueprintCorners;\n\t/** Blueprint opacity, 0–1. Default `0.85`. */\n\tblueprintOpacity?: number;\n\t/** Toggle the blueprint (and its footprint) without tearing the map down. Default `true`. */\n\tshowBlueprint?: boolean;\n\t/** Zone polygons drawn over the blueprint, each in its own colour. */\n\tzones?: MapZone[];\n\t/** Toggle the zone polygons without tearing the map down. Default `true`. */\n\tshowZones?: boolean;\n\t/** Zone fill opacity, 0–1. Default `0.3`. */\n\tzoneOpacity?: number;\n\t/** Draw each zone's `name` at its centre. Default `true`. */\n\tshowZoneLabels?: boolean;\n\t/**\n\t * How zones are coloured. `payload` uses each zone's own `color`; `neutral` replaces them with a\n\t * quiet grey ramp, so the only meaningful colour on the map is the observation status. Default\n\t * `payload`.\n\t */\n\tzoneColorMode?: \"payload\" | \"neutral\";\n\t/** Fires when a zone polygon is clicked. */\n\tonZoneSelect?: (zone: MapZone) => void;\n\t/**\n\t * Zones to treat as selected: the map flies to fit them, and they get a marching-ants outline so the\n\t * selection is legible even when every other zone is still drawn for context. Empty or omitted\n\t * leaves the view alone.\n\t */\n\tselectedZoneIds?: (string | number)[];\n\t/** Pixel padding used when flying to the selection. Default `80`. */\n\tselectionPadding?: number;\n\t/**\n\t * Show a control that returns the camera to the view the map opened on, appearing only once the\n\t * view has actually moved. Default `true`.\n\t */\n\tshowResetView?: boolean;\n\t/** Label on the reset control. Default \"Reset view\". */\n\tresetViewLabel?: string;\n\t/**\n\t * Width of the reset control in px, matched to a collapsed `MapControlPanel` so the row of floating\n\t * controls reads as one set of modules. Default `160`.\n\t */\n\tresetViewWidth?: number;\n\t/** Observations to pin on top of the blueprint. */\n\tobservations?: Observation[];\n\t/** Fires when a marker is clicked. */\n\tonObservationSelect?: (observation: Observation) => void;\n\t/**\n\t * Inner SVG markup for the glyph inside each observation marker, drawn on a 24x24 viewBox. Paths\n\t * inherit a white fill; use `currentColor` for detail that should read as knocked out of the badge.\n\t * Defaults to a filled hazard mark — the sign for a safety violation.\n\t */\n\tobservationIcon?: string;\n\t/** Marker badge size in px. Default `20`. */\n\tobservationMarkerSize?: number;\n\t/** Cameras pinned on the map, each showing its violation count. */\n\tcameras?: MapCamera[];\n\t/** Toggle the camera markers. Default `true`. */\n\tshowCameras?: boolean;\n\t/** Fires when a camera marker is clicked. */\n\tonCameraSelect?: (camera: MapCamera) => void;\n\t/** Inner SVG markup for the camera glyph, same contract as `observationIcon`. Defaults to a filled camera. */\n\tcameraIcon?: string;\n\t/** Camera badge size in px. Default `20`, matching an observation — shape, not size, distinguishes them. */\n\tcameraMarkerSize?: number;\n\t/** Safety responders pinned on the map. */\n\tresponders?: MapResponder[];\n\t/** Toggle the responder markers. Default `true`. */\n\tshowResponders?: boolean;\n\t/** Fires when a responder marker is clicked. */\n\tonResponderSelect?: (responder: MapResponder) => void;\n\t/** Inner SVG markup for the responder glyph. Defaults to a filled guard mark. */\n\tresponderIcon?: string;\n\t/** Responder badge size in px. Default `20`, matching the others. */\n\tresponderMarkerSize?: number;\n\t/**\n\t * A coverage radius drawn around a point — the area a selected responder covers. Given in metres, so\n\t * it stays true on the ground as the map zooms.\n\t */\n\tcoverage?: {center: LngLat; radiusMeters: number; color?: string};\n\t/**\n\t * A responder's path through the selected window, as one segment per unbroken run of contact. Drawn\n\t * as a thin line wrapped in a corridor of `radiusMeters` — the ground they could reach along it. A\n\t * moving responder has no single coverage circle, so the corridor is the honest answer.\n\t *\n\t * Segments rather than one path because contact drops: joining the last point before a gap to the\n\t * first point after it would draw a walk that may never have happened, and would claim coverage over\n\t * ground nobody was on. A gap is drawn as a gap.\n\t */\n\ttrack?: {segments: LngLat[][]; radiusMeters?: number; color?: string};\n\t/**\n\t * Ids to keep at full strength — everything else on the map fades back. Use it to focus a selection:\n\t * pass the selected observation, or a camera together with the violations it caught. Empty or\n\t * omitted dims nothing.\n\t */\n\tfocusedIds?: (string | number)[];\n\t/** Opacity applied to everything outside `focusedIds`. Default `0.2`. */\n\tdimOpacity?: number;\n\t/**\n\t * Card shown while a marker is hovered. The widget tracks what is under the cursor and places the\n\t * card above it; the caller only supplies its content, so each kind of marker can say something\n\t * different. Return null to show nothing for that kind.\n\t */\n\trenderHoverCard?: (hovered: {kind: \"observation\" | \"camera\" | \"responder\"; id: string | number}) => React.ReactNode;\n\t/**\n\t * Fires when the map itself is clicked rather than a marker — the \"clicked outside\" signal for a\n\t * floating panel. Marker clicks never reach the canvas, so they do not trigger it.\n\t */\n\tonBackgroundClick?: () => void;\n\t/**\n\t * Fires as the camera moves, with the values needed to restore this exact view: `center`, `zoom`,\n\t * `bearing` (right-drag rotates) and `pitch` (right-drag up/down tilts). Feed them back as\n\t * `center` / `zoom` / `bearing` / `pitch` to open on a chosen framing.\n\t */\n\tonViewChange?: (view: {center: [number, number]; zoom: number; bearing: number; pitch: number}) => void;\n\t/** Initial bearing in degrees. Default `0`. */\n\tbearing?: number;\n\t/** Initial pitch in degrees, 0–85. Default `0`. */\n\tpitch?: number;\n\t/**\n\t * What to frame on first load, ignoring `center` / `zoom`. `\"zones\"` is usually what you want when\n\t * zones cover a small part of a large site — the blueprint footprint here is ~21km across while its\n\t * zones sit inside ~2km of it, so framing the footprint renders them near-invisible. Falls back to\n\t * the blueprint when there are no zones. Default `\"blueprint\"`.\n\t */\n\tfitTo?: \"blueprint\" | \"zones\" | \"none\";\n\t/** Pixel padding used when fitting to the blueprint. Default `40`. */\n\tfitPadding?: number;\n\t/** Initial center, used only when `fitToBlueprint` is false. */\n\tcenter?: LngLat;\n\t/** Initial zoom, used only when `fitToBlueprint` is false. */\n\tzoom?: number;\n\t/** Mapbox style URL. Default satellite streets — a site plan reads best over imagery. */\n\tmapStyle?: string;\n\t/**\n\t * Fill the parent's height instead of the default 500px. The parent must be height-constrained\n\t * (e.g. a `h-dvh` flex column) — `height: 100%` of an auto-height parent collapses to nothing.\n\t */\n\tfullHeight?: boolean;\n\t/**\n\t * Floating content in the bottom-right corner — typically a `MapLegend`. It sits above the timeline\n\t * by default; set `legendInline` once the timeline is collapsed and narrow enough to share the row.\n\t */\n\tlegend?: React.ReactNode;\n\t/** Place the legend on the timeline's own row rather than above it. Default false. */\n\tlegendInline?: boolean;\n\t/**\n\t * Floating content pinned to the map's top-left corner — typically a `MapControlPanel`. The widget\n\t * owns only the placement; the controls stay in the caller's hands.\n\t */\n\tcontrols?: React.ReactNode;\n\t/**\n\t * Floating content pinned to the map's top-right corner — typically an `ObservationDetailPanel`\n\t * for whichever observation is selected. Sized by the content, so give it a fixed width.\n\t */\n\tdetail?: React.ReactNode;\n\t/**\n\t * Float a {@link TimeScrubber} along the bottom of the map. Pass the scrubber's own props — the\n\t * widget only owns the placement, so the timeline behaves exactly as it does elsewhere. Filtering\n\t * `observations` by the cursor time is the caller's job; the map just renders what it is handed.\n\t */\n\ttimeline?: TimeScrubberProps;\n\tstyle?: React.CSSProperties;\n}\n\nfunction boundsOf(corners: BlueprintCorners) {\n\treturn corners.reduce((bounds, corner) => bounds.extend(corner), new mapboxgl.LngLatBounds(corners[0], corners[0]));\n}\n\n/**\n * Turn a raw ring into one GeoJSON is willing to draw: drop consecutive duplicate points (the spaces\n * API repeats the closing point two or three times on some zones), then close the ring explicitly.\n * Returns null for anything that can't form a triangle.\n */\n/** Mapbox filter matching only the selected zones; `false` when nothing is selected. */\nfunction selectionFilter(ids: (string | number)[] | undefined): mapboxgl.FilterSpecification {\n\tif (!ids || ids.length === 0) return [\"==\", [\"literal\", 1], [\"literal\", 0]];\n\treturn [\"in\", [\"get\", \"zoneId\"], [\"literal\", ids.map(String)]];\n}\n\n/**\n * The marching-ants dash cycle. A dash array cannot be interpolated, so the motion comes from stepping\n * through pre-computed patterns — and it has to be the *full* fourteen-step cycle: the first seven\n * only slide the dash halfway, so stopping there snaps back to the start and reads as a stutter rather\n * than travel. Step fourteen lands exactly where step one begins, so the loop is seamless.\n */\nconst ANT_DASHES: number[][] = [\n\t[0, 4, 3],\n\t[0.5, 4, 2.5],\n\t[1, 4, 2],\n\t[1.5, 4, 1.5],\n\t[2, 4, 1],\n\t[2.5, 4, 0.5],\n\t[3, 4, 0],\n\t[0, 0.5, 3, 3.5],\n\t[0, 1, 3, 3],\n\t[0, 1.5, 3, 2.5],\n\t[0, 2, 3, 2],\n\t[0, 2.5, 3, 1.5],\n\t[0, 3, 3, 1],\n\t[0, 3.5, 3, 0.5],\n];\n\n/**\n * A circle of `radiusMeters` around `center`, as a polygon. Longitude degrees shrink with latitude, so\n * the x radius is divided by cos(lat) — skip that and the circle reads as an ellipse away from the\n * equator.\n */\n/**\n * Ground metres per screen pixel at a given zoom and latitude. Mapbox GL tiles are 512px, so the\n * constant is the equator's circumference over 512 — not the 256px figure quoted in most Web Mercator\n * references, which yields double the true scale and a corridor half the width it should be.\n */\nfunction metresPerPixel(latitude: number, zoom: number) {\n\treturn (78271.516964 * Math.cos((latitude * Math.PI) / 180)) / 2 ** zoom;\n}\n\nfunction circlePolygon(center: LngLat, radiusMeters: number, steps = 72): GeoJSON.Feature<GeoJSON.Polygon> {\n\tconst [lng, lat] = center;\n\tconst dLat = radiusMeters / 110574;\n\tconst dLng = radiusMeters / (111320 * Math.cos((lat * Math.PI) / 180));\n\tconst ring: [number, number][] = [];\n\tfor (let i = 0; i <= steps; i++) {\n\t\tconst angle = (i / steps) * Math.PI * 2;\n\t\tring.push([lng + dLng * Math.cos(angle), lat + dLat * Math.sin(angle)]);\n\t}\n\treturn {type: \"Feature\", properties: {}, geometry: {type: \"Polygon\", coordinates: [ring]}};\n}\n\nfunction zonesBounds(zones: MapZone[]) {\n\tlet bounds: mapboxgl.LngLatBounds | null = null;\n\tfor (const zone of zones) {\n\t\tfor (const point of zone.coordinates) {\n\t\t\tbounds = bounds ? bounds.extend(point) : new mapboxgl.LngLatBounds(point, point);\n\t\t}\n\t}\n\treturn bounds;\n}\n\nfunction cleanRing(points: LngLat[]): LngLat[] | null {\n\tconst ring: LngLat[] = [];\n\tfor (const point of points) {\n\t\tconst last = ring[ring.length - 1];\n\t\tif (!last || last[0] !== point[0] || last[1] !== point[1]) ring.push(point);\n\t}\n\t// A closed ring's repeated last point is not a distinct vertex.\n\tconst first = ring[0];\n\tconst last = ring[ring.length - 1];\n\tif (ring.length > 1 && first[0] === last[0] && first[1] === last[1]) ring.pop();\n\tif (ring.length < 3) return null;\n\treturn [...ring, ring[0]];\n}\n\n/**\n * Neutral ramp for `zoneColorMode: \"neutral\"`. Several tones rather than one grey: 90 zones overlap\n * heavily, and a single fill would merge them into one shape. These stay quiet enough that the status\n * colours on the markers remain the only thing on the map that means something.\n */\nconst NEUTRAL_ZONE_COLORS = [\"#64748b\", \"#94a3b8\", \"#78716c\", \"#a8a29e\", \"#71717a\", \"#8b8b8b\"];\n\nfunction zonesData(zones: MapZone[], neutral: boolean): GeoJSON.FeatureCollection<GeoJSON.Polygon> {\n\tconst features: GeoJSON.Feature<GeoJSON.Polygon>[] = [];\n\tfor (const [index, zone] of zones.entries()) {\n\t\tconst ring = cleanRing(zone.coordinates);\n\t\tif (!ring) continue;\n\t\tconst color = neutral ? NEUTRAL_ZONE_COLORS[index % NEUTRAL_ZONE_COLORS.length] : (zone.color ?? \"#f97316\");\n\t\tfeatures.push({\n\t\t\ttype: \"Feature\",\n\t\t\tid: typeof zone.id === \"number\" ? zone.id : undefined,\n\t\t\tproperties: {\n\t\t\t\tzoneId: String(zone.id),\n\t\t\t\tname: zone.name ?? \"\",\n\t\t\t\tcolor,\n\t\t\t\trestricted: zone.restricted === true,\n\t\t\t},\n\t\t\tgeometry: {type: \"Polygon\", coordinates: [ring]},\n\t\t});\n\t}\n\treturn {type: \"FeatureCollection\", features};\n}\n\n/**\n * The shared marker chrome: a rounded-square badge with a light ring, a soft shadow and a centred\n * glyph. Plain DOM on purpose — a busy day puts hundreds of these on the map, and a React root each\n * would be untenable.\n */\nfunction badgeElement(size: number, color: string, icon: string, round = false) {\n\tconst element = document.createElement(\"div\");\n\t// Ring scales with the badge, floored so it stays visible on a small marker.\n\tconst ring = Math.max(1.5, Math.round(size * 0.06 * 2) / 2);\n\t// No `position` here: mapbox-gl.css positions `.mapboxgl-marker` absolutely, and an inline\n\t// `position:relative` would override it and drop every marker into normal document flow. The\n\t// count badge below anchors against that mapbox-owned positioning instead.\n\telement.style.cssText = [\n\t\t`width:${size}px`,\n\t\t`height:${size}px`,\n\t\t`border-radius:${round ? \"50%\" : `${Math.round(size * 0.3)}px`}`,\n\t\t`background:${color}`,\n\t\t`border:${ring}px solid rgba(255,255,255,0.92)`,\n\t\t\"box-shadow:0 1px 4px rgba(0,0,0,0.35)\",\n\t\t\"display:flex\",\n\t\t\"align-items:center\",\n\t\t\"justify-content:center\",\n\t\t\"cursor:pointer\",\n\t\t\"box-sizing:border-box\",\n\t\t// Knockouts inside the glyph read as holes: `currentColor` resolves to the badge body.\n\t\t`color:${color}`,\n\t].join(\";\");\n\tconst glyph = Math.round(size * 0.58);\n\telement.innerHTML =\n\t\t`<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${glyph}\" height=\"${glyph}\" viewBox=\"0 0 24 24\" ` +\n\t\t`fill=\"#fff\" stroke=\"none\" aria-hidden=\"true\">${icon}</svg>`;\n\treturn element;\n}\n\n/**\n * Notification-style count, pinned to the badge's top-right corner and always visible. Neutral rather\n * than alarm-coloured: the number says how many, not how bad — severity is the observation markers'\n * job. A single digit gets a true circle; longer counts widen into a pill.\n */\nfunction countBadge(count: number, size: number) {\n\tconst badge = document.createElement(\"span\");\n\tconst text = count > 99 ? \"99+\" : String(count);\n\tbadge.textContent = text;\n\tconst single = text.length === 1;\n\t// Everything scales off the badge it sits on — a fixed 16px chip swamps a 20px marker.\n\tconst box = Math.max(10, Math.round(size * 0.55));\n\tconst font = Math.max(8, Math.round(size * 0.42));\n\tconst offset = Math.round(size * 0.22);\n\tconst ring = Math.max(1, Math.round(size * 0.06 * 2) / 2);\n\tbadge.style.cssText = [\n\t\t\"position:absolute\",\n\t\t`top:-${offset}px`,\n\t\t`right:-${offset}px`,\n\t\t`height:${box}px`,\n\t\tsingle ? `width:${box}px` : `min-width:${box}px`,\n\t\tsingle ? \"padding:0\" : `padding:0 ${Math.round(box * 0.28)}px`,\n\t\t\"border-radius:999px\",\n\t\t\"background:#f8fafc\",\n\t\t\"color:#0f172a\",\n\t\t`font:600 ${font}px/${box}px ui-sans-serif,system-ui,sans-serif`,\n\t\t\"text-align:center\",\n\t\t`border:${ring}px solid rgba(15,23,42,0.25)`,\n\t\t\"box-sizing:content-box\",\n\t\t\"pointer-events:none\",\n\t].join(\";\");\n\treturn badge;\n}\n\nfunction footprintData(corners: BlueprintCorners): GeoJSON.Feature<GeoJSON.Polygon> {\n\treturn {\n\t\ttype: \"Feature\",\n\t\tproperties: {},\n\t\tgeometry: {type: \"Polygon\", coordinates: [[...corners, corners[0]]]},\n\t};\n}\n\n/**\n * Mapbox map that drapes a georeferenced blueprint over the basemap and pins observations on top of\n * it. The blueprint is an image source anchored by its four corners, so it stays locked to the ground\n * as the map pans and zooms. Pass `blueprintUrl` once the plan image exists; until then the component\n * renders the footprint outline so the corner coordinates can be checked against the basemap.\n */\nconst ObservationsMap = React.forwardRef<HTMLDivElement, ObservationsMapProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tblueprintUrl,\n\t\t\tcorners = DEFAULT_BLUEPRINT_CORNERS,\n\t\t\tblueprintOpacity = 0.85,\n\t\t\tshowBlueprint = true,\n\t\t\tzones = [],\n\t\t\tshowZones = true,\n\t\t\tzoneOpacity = 0.3,\n\t\t\tshowZoneLabels = true,\n\t\t\tzoneColorMode = \"payload\",\n\t\t\tonZoneSelect,\n\t\t\tselectedZoneIds,\n\t\t\tselectionPadding = 80,\n\t\t\tshowResetView = true,\n\t\t\tresetViewLabel = \"Reset view\",\n\t\t\tresetViewWidth = 160,\n\t\t\tobservations = [],\n\t\t\tonObservationSelect,\n\t\t\tobservationIcon = HAZARD_ICON,\n\t\t\tobservationMarkerSize = 20,\n\t\t\tcameras = [],\n\t\t\tshowCameras = true,\n\t\t\tonCameraSelect,\n\t\t\tcameraIcon = CAMERA_ICON,\n\t\t\tcameraMarkerSize = 20,\n\t\t\tresponders = [],\n\t\t\tshowResponders = true,\n\t\t\tonResponderSelect,\n\t\t\tresponderIcon = RESPONDER_ICON,\n\t\t\tresponderMarkerSize = 20,\n\t\t\tcoverage,\n\t\t\ttrack,\n\t\t\tfocusedIds,\n\t\t\tdimOpacity = 0.2,\n\t\t\trenderHoverCard,\n\t\t\tonBackgroundClick,\n\t\t\tonViewChange,\n\t\t\tbearing = 0,\n\t\t\tpitch = 0,\n\t\t\tfitTo = \"blueprint\",\n\t\t\tfitPadding = 40,\n\t\t\tcenter,\n\t\t\tzoom = 13,\n\t\t\tmapStyle = \"mapbox://styles/mapbox/satellite-streets-v12\",\n\t\t\tfullHeight = false,\n\t\t\tcontrols,\n\t\t\tlegend,\n\t\t\tlegendInline = false,\n\t\t\tdetail,\n\t\t\ttimeline,\n\t\t\tstyle,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst containerRef = React.useRef<HTMLDivElement>(null);\n\t\tconst mapRef = React.useRef<mapboxgl.Map | null>(null);\n\t\tconst markersRef = React.useRef<{id: string | number; marker: mapboxgl.Marker}[]>([]);\n\t\tconst cameraMarkersRef = React.useRef<{id: string | number; marker: mapboxgl.Marker}[]>([]);\n\t\tconst responderMarkersRef = React.useRef<{id: string | number; marker: mapboxgl.Marker; at: LngLat}[]>([]);\n\t\t// The view the map opened on — where a cleared selection flies back to.\n\t\tconst homeViewRef = React.useRef<{center: mapboxgl.LngLat; zoom: number; bearing: number; pitch: number} | null>(\n\t\t\tnull,\n\t\t);\n\t\t// Selection size on the previous render, so \"cleared\" can be told apart from \"never had one\".\n\t\tconst hadSelectionRef = React.useRef(false);\n\t\t// What the cursor is over, and where on screen to put its card.\n\t\tconst [hovered, setHovered] = React.useState<{\n\t\t\tkind: \"observation\" | \"camera\" | \"responder\";\n\t\t\tid: string | number;\n\t\t\tx: number;\n\t\t\ty: number;\n\t\t} | null>(null);\n\n\t\t// Whether the camera has left the view it opened on — drives the reset control.\n\t\tconst [viewMoved, setViewMoved] = React.useState(false);\n\n\t\t// Latest props, so the map callbacks below never close over a stale render.\n\t\tconst latest = React.useRef({\n\t\t\tblueprintUrl,\n\t\t\tcorners,\n\t\t\tblueprintOpacity,\n\t\t\tshowBlueprint,\n\t\t\tzones,\n\t\t\tshowZones,\n\t\t\tzoneOpacity,\n\t\t\tshowZoneLabels,\n\t\t\tzoneColorMode,\n\t\t\tonZoneSelect,\n\t\t\tselectedZoneIds,\n\t\t\tfocusedIds,\n\t\t\tdimOpacity,\n\t\t\tonBackgroundClick,\n\t\t\tonViewChange,\n\t\t\tresponderMarkerSize,\n\t\t\tcoverage,\n\t\t\ttrack,\n\t\t});\n\t\tlatest.current = {\n\t\t\tblueprintUrl,\n\t\t\tcorners,\n\t\t\tblueprintOpacity,\n\t\t\tshowBlueprint,\n\t\t\tzones,\n\t\t\tshowZones,\n\t\t\tzoneOpacity,\n\t\t\tshowZoneLabels,\n\t\t\tzoneColorMode,\n\t\t\tonZoneSelect,\n\t\t\tselectedZoneIds,\n\t\t\tfocusedIds,\n\t\t\tdimOpacity,\n\t\t\tonBackgroundClick,\n\t\t\tonViewChange,\n\t\t\tresponderMarkerSize,\n\t\t\tcoverage,\n\t\t\ttrack,\n\t\t};\n\n\t\tReact.useImperativeHandle(ref, () => rootRef.current!);\n\n\t\t/**\n\t\t * Fade everything outside `focusedIds` — markers via their own element opacity, layers via their\n\t\t * paint properties. Applied after every marker/layer rebuild as well as on focus changes, since\n\t\t * a rebuild produces fresh elements that know nothing about the current selection.\n\t\t */\n\t\tconst applyFocus = React.useCallback(() => {\n\t\t\tconst {focusedIds: focus, dimOpacity: dim, zoneOpacity: zoneFill, blueprintOpacity: bp} = latest.current;\n\t\t\tconst focused = focus && focus.length > 0 ? new Set(focus.map(String)) : null;\n\t\t\tconst factor = focused ? dim : 1;\n\n\t\t\tfor (const {id, marker} of [...markersRef.current, ...cameraMarkersRef.current, ...responderMarkersRef.current]) {\n\t\t\t\tconst lit = !focused || focused.has(String(id));\n\t\t\t\tconst element = marker.getElement();\n\t\t\t\t// Fade with `filter`, not `opacity`: mapbox-gl writes `style.opacity` on every render frame\n\t\t\t\t// for terrain occlusion, so anything set there is clobbered within a frame.\n\t\t\t\telement.style.filter = lit ? \"\" : `opacity(${dim})`;\n\t\t\t\t// A faded marker should not intercept clicks meant for what is still in focus.\n\t\t\t\telement.style.pointerEvents = lit ? \"\" : \"none\";\n\t\t\t}\n\n\t\t\tconst map = mapRef.current;\n\t\t\t// No isStyleLoaded() guard here: with a live style it stays false for long stretches while tiles\n\t\t\t// load, which silently skipped every layer update below. Each setPaintProperty is already\n\t\t\t// guarded by its own getLayer check, which is the condition that actually matters.\n\t\t\tif (!map) return;\n\n\t\t\t// With a zone selection live, the unselected zones fade back so the chosen ones carry the view.\n\t\t\t// Data-driven rather than a whole-layer opacity, since it has to differ per feature.\n\t\t\tconst selected = latest.current.selectedZoneIds;\n\t\t\tconst hasSelection = selected != null && selected.length > 0;\n\t\t\tconst zoneDim = (lit: number, dim: number) =>\n\t\t\t\thasSelection ? ([\"case\", selectionFilter(selected), lit, lit * dim] as unknown as number) : lit;\n\n\t\t\tif (map.getLayer(ZONES_FILL_ID)) {\n\t\t\t\tconst lit = zoneFill * factor;\n\t\t\t\tmap.setPaintProperty(ZONES_FILL_ID, \"fill-opacity-transition\", {duration: ZONE_FADE_MS, delay: 0});\n\t\t\t\tmap.setPaintProperty(\n\t\t\t\t\tZONES_FILL_ID,\n\t\t\t\t\t\"fill-opacity\",\n\t\t\t\t\thasSelection\n\t\t\t\t\t\t? ([\n\t\t\t\t\t\t\t\t\"case\",\n\t\t\t\t\t\t\t\tselectionFilter(selected),\n\t\t\t\t\t\t\t\tMath.min(lit * ZONE_SELECTED_FILL_BOOST, ZONE_SELECTED_FILL_MAX),\n\t\t\t\t\t\t\t\tlit * ZONE_UNSELECTED_FILL_DIM,\n\t\t\t\t\t\t\t] as unknown as number)\n\t\t\t\t\t\t: lit,\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (map.getLayer(ZONES_LABEL_ID)) {\n\t\t\t\tmap.setPaintProperty(ZONES_LABEL_ID, \"text-opacity-transition\", {duration: ZONE_FADE_MS, delay: 0});\n\t\t\t\tmap.setPaintProperty(ZONES_LABEL_ID, \"text-opacity\", zoneDim(factor, ZONE_UNSELECTED_LABEL_DIM));\n\t\t\t}\n\t\t\tif (map.getLayer(BLUEPRINT_LAYER_ID)) map.setPaintProperty(BLUEPRINT_LAYER_ID, \"raster-opacity\", bp * factor);\n\t\t\tif (map.getLayer(FOOTPRINT_FILL_ID)) map.setPaintProperty(FOOTPRINT_FILL_ID, \"fill-opacity\", 0.12 * factor);\n\t\t\tif (map.getLayer(FOOTPRINT_LINE_ID)) map.setPaintProperty(FOOTPRINT_LINE_ID, \"line-opacity\", factor);\n\t\t}, []);\n\n\t\tReact.useEffect(() => {\n\t\t\tapplyFocus();\n\t\t}, [focusedIds, dimOpacity, applyFocus]);\n\n\t\t/**\n\t\t * Cameras and responders are both posted to places rather than events, so they routinely share a\n\t\t * coordinate — and one badge then sits exactly on the other, leaving the lower one unclickable.\n\t\t * Nudge the responder clear when that happens.\n\t\t *\n\t\t * The test is in pixels, not degrees: badges are a fixed pixel size, so a geographic offset that\n\t\t * separates them at site zoom leaves them overlapping when zoomed out. Re-run on zoom for the\n\t\t * same reason.\n\t\t */\n\t\t/**\n\t\t * The corridor is a stroked line, so its width is in pixels — recomputed from metres at the\n\t\t * current zoom and latitude, and re-applied on zoom so the ground it covers stays constant.\n\t\t */\n\t\tconst corridorWidth = React.useCallback(() => {\n\t\t\tconst map = mapRef.current;\n\t\t\tconst spread = latest.current.track;\n\t\t\tif (!map || !spread) return 0;\n\t\t\tconst radius = spread.radiusMeters ?? 0;\n\t\t\treturn (radius * 2) / metresPerPixel(map.getCenter().lat, map.getZoom());\n\t\t}, []);\n\n\t\tReact.useEffect(() => {\n\t\t\tconst map = mapRef.current;\n\t\t\tif (!map) return;\n\t\t\tconst resize = () => {\n\t\t\t\tif (map.getLayer(TRACK_CORRIDOR_ID)) map.setPaintProperty(TRACK_CORRIDOR_ID, \"line-width\", corridorWidth());\n\t\t\t};\n\t\t\tresize();\n\t\t\tmap.on(\"zoom\", resize);\n\t\t\treturn () => {\n\t\t\t\tmap.off(\"zoom\", resize);\n\t\t\t};\n\t\t}, [corridorWidth, track]);\n\n\t\t/**\n\t\t * Wire hover on a marker. The point is taken once, in the map root's own coordinates — the card is\n\t\t * dismissed by leaving the marker, so it never needs to track a moving map.\n\t\t */\n\t\tconst bindHover = React.useCallback(\n\t\t\t(element: HTMLElement, kind: \"observation\" | \"camera\" | \"responder\", id: string | number) => {\n\t\t\t\telement.addEventListener(\"mouseenter\", () => {\n\t\t\t\t\tconst root = rootRef.current;\n\t\t\t\t\tif (!root) return;\n\t\t\t\t\tconst marker = element.getBoundingClientRect();\n\t\t\t\t\tconst bounds = root.getBoundingClientRect();\n\t\t\t\t\tsetHovered({\n\t\t\t\t\t\tkind,\n\t\t\t\t\t\tid,\n\t\t\t\t\t\tx: marker.x - bounds.x + marker.width / 2,\n\t\t\t\t\t\ty: marker.y - bounds.y,\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t\telement.addEventListener(\"mouseleave\", () => setHovered(null));\n\t\t\t},\n\t\t\t[],\n\t\t);\n\n\t\tconst separateResponders = React.useCallback(() => {\n\t\t\tconst map = mapRef.current;\n\t\t\tif (!map) return;\n\t\t\tconst cameraPoints = cameraMarkersRef.current.map((entry) => map.project(entry.marker.getLngLat()));\n\t\t\tif (cameraPoints.length === 0) {\n\t\t\t\tfor (const entry of responderMarkersRef.current) entry.marker.setLngLat(entry.at);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst gap = latest.current.responderMarkerSize + 6;\n\t\t\t// A focused responder is never nudged: its coverage and track are drawn at its true position, so\n\t\t\t// a displaced badge would sit off-centre in its own circle and read as pointing at the camera.\n\t\t\tconst focused = latest.current.focusedIds;\n\t\t\tconst pinned = focused && focused.length > 0 ? new Set(focused.map(String)) : null;\n\n\t\t\tfor (const entry of responderMarkersRef.current) {\n\t\t\t\tconst point = map.project(entry.at);\n\t\t\t\tconst clashes =\n\t\t\t\t\t!pinned?.has(String(entry.id)) && cameraPoints.some((c) => Math.hypot(c.x - point.x, c.y - point.y) < gap);\n\t\t\t\tentry.marker.setLngLat(clashes ? map.unproject([point.x + gap, point.y - gap * 0.5]) : entry.at);\n\t\t\t}\n\t\t}, []);\n\n\t\tReact.useEffect(() => {\n\t\t\tseparateResponders();\n\t\t\tconst map = mapRef.current;\n\t\t\tif (!map) return;\n\t\t\t// The offset is a pixel distance, so it has to be re-laid whenever the projection changes.\n\t\t\tmap.on(\"zoom\", separateResponders);\n\t\t\tmap.on(\"rotate\", separateResponders);\n\t\t\tmap.on(\"pitch\", separateResponders);\n\t\t\treturn () => {\n\t\t\t\tmap.off(\"zoom\", separateResponders);\n\t\t\t\tmap.off(\"rotate\", separateResponders);\n\t\t\t\tmap.off(\"pitch\", separateResponders);\n\t\t\t};\n\t\t}, [separateResponders]);\n\n\t\t// Fly to the selection whenever it changes, and back to the opening view when it is cleared.\n\t\tReact.useEffect(() => {\n\t\t\tconst map = mapRef.current;\n\t\t\tif (!map) return;\n\t\t\tconst selection = selectedZoneIds ?? [];\n\n\t\t\tif (selection.length === 0) {\n\t\t\t\t// Only on the transition out of a selection — not on mount, when there never was one.\n\t\t\t\tif (hadSelectionRef.current && homeViewRef.current) map.easeTo({...homeViewRef.current, duration: 700});\n\t\t\t\thadSelectionRef.current = false;\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\thadSelectionRef.current = true;\n\t\t\tconst chosen = new Set(selection.map(String));\n\t\t\tconst bounds = zonesBounds(zones.filter((z) => chosen.has(String(z.id))));\n\t\t\tif (bounds) map.fitBounds(bounds, {padding: selectionPadding, duration: 700, maxZoom: 17});\n\t\t}, [selectedZoneIds, zones, selectionPadding]);\n\n\t\t// Keep the highlight layer's filter in step without rebuilding every zone layer, and re-apply the\n\t\t// fade so the unselected zones drop back the moment the selection changes.\n\t\tReact.useEffect(() => {\n\t\t\tconst map = mapRef.current;\n\t\t\tif (map?.getLayer(ZONES_SELECTED_ID)) map.setFilter(ZONES_SELECTED_ID, selectionFilter(selectedZoneIds));\n\t\t\tapplyFocus();\n\t\t}, [selectedZoneIds, applyFocus]);\n\n\t\t// March the ants. Only runs while something is selected — an idle timer repainting a hidden layer\n\t\t// would keep the map busy for nothing.\n\t\tReact.useEffect(() => {\n\t\t\tif (!selectedZoneIds || selectedZoneIds.length === 0) return;\n\t\t\tlet step = 0;\n\t\t\tconst timer = setInterval(() => {\n\t\t\t\tconst map = mapRef.current;\n\t\t\t\tif (!map?.getLayer(ZONES_SELECTED_ID)) return;\n\t\t\t\tstep = (step + 1) % ANT_DASHES.length;\n\t\t\t\tmap.setPaintProperty(ZONES_SELECTED_ID, \"line-dasharray\", ANT_DASHES[step]);\n\t\t\t}, 55);\n\t\t\treturn () => clearInterval(timer);\n\t\t}, [selectedZoneIds]);\n\n\t\t/**\n\t\t * Rebuild the blueprint and zone layers from scratch, blueprint first so the zones sit above it.\n\t\t * `setStyle` wipes every custom layer, and an image source cannot swap between \"no image\" and \"an\n\t\t * image\", so a teardown/rebuild is the only reliable path — it is cheap, it keeps every state in\n\t\t * one code path, and it is what guarantees the draw order after any of them changes.\n\t\t */\n\t\tconst applyOverlays = React.useCallback(() => {\n\t\t\tconst map = mapRef.current;\n\t\t\tif (!map) return;\n\t\t\t// `style.load` fires before the style reports itself loaded, and addLayer throws until it is.\n\t\t\t// Bailing here is what dropped every overlay on a basemap change — retry once the map settles.\n\t\t\tif (!map.isStyleLoaded()) {\n\t\t\t\tmap.once(\"idle\", applyOverlays);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst {blueprintUrl: url, corners: pts, blueprintOpacity: opacity, showBlueprint: visible} = latest.current;\n\n\t\t\tfor (const id of [\n\t\t\t\tTRACK_DISC_LINE_ID,\n\t\t\t\tTRACK_DISC_FILL_ID,\n\t\t\t\tTRACK_LINE_ID,\n\t\t\t\tTRACK_CORRIDOR_ID,\n\t\t\t\tCOVERAGE_LINE_ID,\n\t\t\t\tCOVERAGE_FILL_ID,\n\t\t\t\tZONES_SELECTED_ID,\n\t\t\t\tZONES_LABEL_ID,\n\t\t\t\tZONES_FILL_ID,\n\t\t\t]) {\n\t\t\t\tif (map.getLayer(id)) map.removeLayer(id);\n\t\t\t}\n\t\t\tif (map.getSource(ZONES_SOURCE_ID)) map.removeSource(ZONES_SOURCE_ID);\n\t\t\tif (map.getSource(COVERAGE_SOURCE_ID)) map.removeSource(COVERAGE_SOURCE_ID);\n\t\t\tif (map.getSource(TRACK_SOURCE_ID)) map.removeSource(TRACK_SOURCE_ID);\n\t\t\tif (map.getSource(TRACK_DISC_SOURCE_ID)) map.removeSource(TRACK_DISC_SOURCE_ID);\n\n\t\t\tfor (const id of [BLUEPRINT_LAYER_ID, FOOTPRINT_FILL_ID, FOOTPRINT_LINE_ID]) {\n\t\t\t\tif (map.getLayer(id)) map.removeLayer(id);\n\t\t\t}\n\t\t\tfor (const id of [BLUEPRINT_SOURCE_ID, FOOTPRINT_SOURCE_ID]) {\n\t\t\t\tif (map.getSource(id)) map.removeSource(id);\n\t\t\t}\n\n\t\t\tconst visibility = visible ? \"visible\" : \"none\";\n\n\t\t\tif (url) {\n\t\t\t\tmap.addSource(BLUEPRINT_SOURCE_ID, {type: \"image\", url, coordinates: pts});\n\t\t\t\tmap.addLayer({\n\t\t\t\t\tid: BLUEPRINT_LAYER_ID,\n\t\t\t\t\ttype: \"raster\",\n\t\t\t\t\tsource: BLUEPRINT_SOURCE_ID,\n\t\t\t\t\tlayout: {visibility},\n\t\t\t\t\t// No cross-fade: a blueprint should snap into place, not dissolve.\n\t\t\t\t\tpaint: {\"raster-opacity\": opacity, \"raster-fade-duration\": 0},\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\t// No image yet — show the footprint so the corners are still verifiable on the basemap.\n\t\t\t\tmap.addSource(FOOTPRINT_SOURCE_ID, {type: \"geojson\", data: footprintData(pts)});\n\t\t\t\tmap.addLayer({\n\t\t\t\t\tid: FOOTPRINT_FILL_ID,\n\t\t\t\t\ttype: \"fill\",\n\t\t\t\t\tsource: FOOTPRINT_SOURCE_ID,\n\t\t\t\t\tlayout: {visibility},\n\t\t\t\t\tpaint: {\"fill-color\": \"#f97316\", \"fill-opacity\": 0.12},\n\t\t\t\t});\n\t\t\t\tmap.addLayer({\n\t\t\t\t\tid: FOOTPRINT_LINE_ID,\n\t\t\t\t\ttype: \"line\",\n\t\t\t\t\tsource: FOOTPRINT_SOURCE_ID,\n\t\t\t\t\tlayout: {visibility},\n\t\t\t\t\tpaint: {\"line-color\": \"#f97316\", \"line-width\": 2, \"line-dasharray\": [3, 2]},\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tconst {zones: zoneList, showZones: zonesVisible, zoneOpacity: zoneFill, showZoneLabels: labels} = latest.current;\n\t\t\tif (!zoneList.length) return;\n\n\t\t\tconst zoneVisibility = zonesVisible ? \"visible\" : \"none\";\n\t\t\tmap.addSource(ZONES_SOURCE_ID, {\n\t\t\t\ttype: \"geojson\",\n\t\t\t\tdata: zonesData(zoneList, latest.current.zoneColorMode === \"neutral\"),\n\t\t\t});\n\t\t\tmap.addLayer({\n\t\t\t\tid: ZONES_FILL_ID,\n\t\t\t\ttype: \"fill\",\n\t\t\t\tsource: ZONES_SOURCE_ID,\n\t\t\t\tlayout: {visibility: zoneVisibility},\n\t\t\t\t// Each zone carries its own colour in the payload, so read it off the feature.\n\t\t\t\tpaint: {\"fill-color\": [\"get\", \"color\"], \"fill-opacity\": zoneFill},\n\t\t\t});\n\t\t\tmap.addLayer({\n\t\t\t\tid: ZONES_LABEL_ID,\n\t\t\t\ttype: \"symbol\",\n\t\t\t\tsource: ZONES_SOURCE_ID,\n\t\t\t\tlayout: {\n\t\t\t\t\tvisibility: labels && zonesVisible ? \"visible\" : \"none\",\n\t\t\t\t\t\"text-field\": [\"get\", \"name\"],\n\t\t\t\t\t\"text-size\": 11,\n\t\t\t\t\t// Zones are long thin corridors; let the label ride the polygon rather than overflow it.\n\t\t\t\t\t\"text-max-width\": 10,\n\t\t\t\t\t\"symbol-placement\": \"point\",\n\t\t\t\t},\n\t\t\t\tpaint: {\"text-color\": \"#ffffff\", \"text-halo-color\": \"rgba(0,0,0,0.65)\", \"text-halo-width\": 1.4},\n\t\t\t});\n\n\t\t\t// Marching-ants outline for the current selection. Its own layer so the dash can animate without\n\t\t\t// touching the base zone styling, and it draws last so it sits above every other zone.\n\t\t\tmap.addLayer({\n\t\t\t\tid: ZONES_SELECTED_ID,\n\t\t\t\ttype: \"line\",\n\t\t\t\tsource: ZONES_SOURCE_ID,\n\t\t\t\tfilter: selectionFilter(latest.current.selectedZoneIds),\n\t\t\t\tpaint: {\"line-color\": \"#ffffff\", \"line-width\": 2.5, \"line-dasharray\": [0, 4, 3]},\n\t\t\t});\n\n\t\t\t// Coverage sits above the zones — it describes a person, not the ground.\n\t\t\tconst cover = latest.current.coverage;\n\t\t\tif (cover) {\n\t\t\t\tconst tint = cover.color ?? \"#2f6b63\";\n\t\t\t\tmap.addSource(COVERAGE_SOURCE_ID, {\n\t\t\t\t\ttype: \"geojson\",\n\t\t\t\t\tdata: circlePolygon(cover.center, cover.radiusMeters),\n\t\t\t\t});\n\t\t\t\tmap.addLayer({\n\t\t\t\t\tid: COVERAGE_FILL_ID,\n\t\t\t\t\ttype: \"fill\",\n\t\t\t\t\tsource: COVERAGE_SOURCE_ID,\n\t\t\t\t\tpaint: {\"fill-color\": tint, \"fill-opacity\": 0.15},\n\t\t\t\t});\n\t\t\t\tmap.addLayer({\n\t\t\t\t\tid: COVERAGE_LINE_ID,\n\t\t\t\t\ttype: \"line\",\n\t\t\t\t\tsource: COVERAGE_SOURCE_ID,\n\t\t\t\t\tpaint: {\"line-color\": tint, \"line-width\": 1.5, \"line-dasharray\": [3, 2]},\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tconst path = latest.current.track;\n\t\t\t// Each run is deduped; a run where they never moved collapses to one point, and a zero-length\n\t\t\t// line strokes to nothing — so it is nudged into a hair-length segment, which the round cap\n\t\t\t// renders as exactly the disc it should be. One geometry type, no special-cased layers.\n\t\t\tconst deduped = (path?.segments ?? [])\n\t\t\t\t.map((run) => run.filter((p, i, all) => i === 0 || p[0] !== all[i - 1][0] || p[1] !== all[i - 1][1]))\n\t\t\t\t.filter((run) => run.length > 0);\n\t\t\t// A run where they never moved has no line to stroke. It cannot be faked with a very short\n\t\t\t// segment either — mapbox drops a line below about a metre as too small to tile, and the\n\t\t\t// coverage silently disappears. Those runs are drawn as discs instead.\n\t\t\tconst runs = deduped.filter((run) => run.length > 1);\n\t\t\tconst stood = deduped.filter((run) => run.length === 1).map((run) => run[0]);\n\n\t\t\tif (path && stood.length > 0) {\n\t\t\t\tconst tint = path.color ?? \"#2f6b63\";\n\t\t\t\tmap.addSource(TRACK_DISC_SOURCE_ID, {\n\t\t\t\t\ttype: \"geojson\",\n\t\t\t\t\tdata: {\n\t\t\t\t\t\ttype: \"FeatureCollection\",\n\t\t\t\t\t\tfeatures: stood.map((point) => circlePolygon(point, path.radiusMeters ?? 0)),\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t\tmap.addLayer({\n\t\t\t\t\tid: TRACK_DISC_FILL_ID,\n\t\t\t\t\ttype: \"fill\",\n\t\t\t\t\tsource: TRACK_DISC_SOURCE_ID,\n\t\t\t\t\tpaint: {\"fill-color\": tint, \"fill-opacity\": 0.15},\n\t\t\t\t});\n\t\t\t\t// The outline is only drawn when a disc is the whole story. Beside a corridor it reads as a\n\t\t\t\t// separate object rather than the same coverage, so a standing run there is fill alone —\n\t\t\t\t// exactly what the corridor is.\n\t\t\t\tif (runs.length === 0) {\n\t\t\t\t\tmap.addLayer({\n\t\t\t\t\t\tid: TRACK_DISC_LINE_ID,\n\t\t\t\t\t\ttype: \"line\",\n\t\t\t\t\t\tsource: TRACK_DISC_SOURCE_ID,\n\t\t\t\t\t\tpaint: {\"line-color\": tint, \"line-width\": 1.5, \"line-dasharray\": [3, 2]},\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (path && runs.length > 0) {\n\t\t\t\tconst tint = path.color ?? \"#2f6b63\";\n\t\t\t\tmap.addSource(TRACK_SOURCE_ID, {\n\t\t\t\t\ttype: \"geojson\",\n\t\t\t\t\tdata: {type: \"Feature\", properties: {}, geometry: {type: \"MultiLineString\", coordinates: runs}},\n\t\t\t\t});\n\t\t\t\t// The corridor is the path stroked at twice the radius with round caps and joins — which is\n\t\t\t\t// exactly the ground within `radiusMeters` of the path, without any buffer geometry.\n\t\t\t\tmap.addLayer({\n\t\t\t\t\tid: TRACK_CORRIDOR_ID,\n\t\t\t\t\ttype: \"line\",\n\t\t\t\t\tsource: TRACK_SOURCE_ID,\n\t\t\t\t\tlayout: {\"line-cap\": \"round\", \"line-join\": \"round\"},\n\t\t\t\t\tpaint: {\"line-color\": tint, \"line-opacity\": 0.15, \"line-width\": corridorWidth()},\n\t\t\t\t});\n\t\t\t\tmap.addLayer({\n\t\t\t\t\tid: TRACK_LINE_ID,\n\t\t\t\t\ttype: \"line\",\n\t\t\t\t\tsource: TRACK_SOURCE_ID,\n\t\t\t\t\tlayout: {\"line-cap\": \"round\", \"line-join\": \"round\"},\n\t\t\t\t\tpaint: {\"line-color\": tint, \"line-width\": 1.5, \"line-dasharray\": [2, 2], \"line-opacity\": 0.9},\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tapplyFocus();\n\t\t}, [applyFocus, corridorWidth]);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!containerRef.current || mapRef.current) return;\n\n\t\t\tmapboxgl.accessToken = MAPBOX_TOKEN;\n\n\t\t\tconst map = new mapboxgl.Map({\n\t\t\t\tcontainer: containerRef.current,\n\t\t\t\tstyle: mapStyle,\n\t\t\t\tcenter: center ?? boundsOf(corners).getCenter(),\n\t\t\t\tzoom,\n\t\t\t\tbearing,\n\t\t\t\tpitch,\n\t\t\t});\n\t\t\tmapRef.current = map;\n\n\t\t\tif (fitTo !== \"none\") {\n\t\t\t\tconst target = (fitTo === \"zones\" && zonesBounds(zones)) || boundsOf(corners);\n\t\t\t\tmap.fitBounds(target, {padding: fitPadding, duration: 0});\n\t\t\t}\n\n\t\t\t// Captured after the opening fit, so it is the view the user actually starts from.\n\t\t\thomeViewRef.current = {\n\t\t\t\tcenter: map.getCenter(),\n\t\t\t\tzoom: map.getZoom(),\n\t\t\t\tbearing: map.getBearing(),\n\t\t\t\tpitch: map.getPitch(),\n\t\t\t};\n\n\t\t\tconst emitView = () =>\n\t\t\t\tlatest.current.onViewChange?.({\n\t\t\t\t\tcenter: [Number(map.getCenter().lng.toFixed(6)), Number(map.getCenter().lat.toFixed(6))],\n\t\t\t\t\tzoom: Number(map.getZoom().toFixed(2)),\n\t\t\t\t\tbearing: Number(map.getBearing().toFixed(1)),\n\t\t\t\t\tpitch: Number(map.getPitch().toFixed(1)),\n\t\t\t\t});\n\t\t\tmap.on(\"move\", emitView);\n\n\t\t\t// A small tolerance so a nudge does not count as having moved.\n\t\t\tconst checkMoved = () => {\n\t\t\t\tconst home = homeViewRef.current;\n\t\t\t\tif (!home) return;\n\t\t\t\tconst moved =\n\t\t\t\t\tmap.getCenter().distanceTo(home.center) > 40 ||\n\t\t\t\t\tMath.abs(map.getZoom() - home.zoom) > 0.15 ||\n\t\t\t\t\tMath.abs(map.getBearing() - home.bearing) > 1 ||\n\t\t\t\t\tMath.abs(map.getPitch() - home.pitch) > 1;\n\t\t\t\tsetViewMoved(moved);\n\t\t\t};\n\t\t\tmap.on(\"moveend\", checkMoved);\n\t\t\t// The initial fitBounds happens before this listener exists, so publish the opening view once.\n\t\t\temitView();\n\n\t\t\tmap.on(\"load\", applyOverlays);\n\t\t\t// setStyle drops every custom layer; re-add them once the new style settles.\n\t\t\tmap.on(\"style.load\", applyOverlays);\n\n\t\t\treturn () => {\n\t\t\t\tmap.off(\"move\", emitView);\n\t\t\t\tmap.off(\"moveend\", checkMoved);\n\t\t\t\tfor (const entry of markersRef.current) entry.marker.remove();\n\t\t\t\tmarkersRef.current = [];\n\t\t\t\tfor (const entry of cameraMarkersRef.current) entry.marker.remove();\n\t\t\t\tcameraMarkersRef.current = [];\n\t\t\t\tfor (const entry of responderMarkersRef.current) entry.marker.remove();\n\t\t\t\tresponderMarkersRef.current = [];\n\t\t\t\tmap.remove();\n\t\t\t\tmapRef.current = null;\n\t\t\t};\n\t\t}, []);\n\n\t\tReact.useEffect(() => {\n\t\t\tmapRef.current?.setStyle(mapStyle);\n\t\t}, [mapStyle]);\n\n\t\tReact.useEffect(() => {\n\t\t\tapplyOverlays();\n\t\t}, [blueprintUrl, corners, zones, zoneColorMode, coverage, track, applyOverlays]);\n\n\t\t// Routed through applyFocus so a live opacity change respects any active dim factor.\n\t\tReact.useEffect(() => {\n\t\t\tapplyFocus();\n\t\t}, [blueprintOpacity, applyFocus]);\n\n\t\tReact.useEffect(() => {\n\t\t\tconst map = mapRef.current;\n\t\t\tif (!map) return;\n\t\t\tconst visibility = showBlueprint ? \"visible\" : \"none\";\n\t\t\tfor (const id of [BLUEPRINT_LAYER_ID, FOOTPRINT_FILL_ID, FOOTPRINT_LINE_ID]) {\n\t\t\t\tif (map.getLayer(id)) map.setLayoutProperty(id, \"visibility\", visibility);\n\t\t\t}\n\t\t}, [showBlueprint]);\n\n\t\tReact.useEffect(() => {\n\t\t\tapplyFocus();\n\t\t}, [zoneOpacity, applyFocus]);\n\n\t\tReact.useEffect(() => {\n\t\t\tconst map = mapRef.current;\n\t\t\tif (!map) return;\n\t\t\tconst visibility = showZones ? \"visible\" : \"none\";\n\t\t\tfor (const id of [ZONES_FILL_ID]) {\n\t\t\t\tif (map.getLayer(id)) map.setLayoutProperty(id, \"visibility\", visibility);\n\t\t\t}\n\t\t\tif (map.getLayer(ZONES_LABEL_ID)) {\n\t\t\t\tmap.setLayoutProperty(ZONES_LABEL_ID, \"visibility\", showZoneLabels && showZones ? \"visible\" : \"none\");\n\t\t\t}\n\t\t}, [showZones, showZoneLabels]);\n\n\t\tReact.useEffect(() => {\n\t\t\tconst map = mapRef.current;\n\t\t\tif (!map) return;\n\n\t\t\t// Delegated to the layer rather than per-feature, so it survives every overlay rebuild.\n\t\t\tconst onClick = (event: mapboxgl.MapMouseEvent & {features?: GeoJSON.Feature[]}) => {\n\t\t\t\t// Markers sit inside the canvas container, so a marker click also fires this layer handler\n\t\t\t\t// for whatever polygon happens to be underneath. Clicking a violation must not select its\n\t\t\t\t// zone as well — the same guard the background handler needs.\n\t\t\t\tconst target = event.originalEvent?.target as HTMLElement | null;\n\t\t\t\tif (target?.closest?.(\".mapboxgl-marker\")) return;\n\t\t\t\tconst id = event.features?.[0]?.properties?.zoneId;\n\t\t\t\tif (id == null) return;\n\t\t\t\tconst zone = latest.current.zones.find((z) => String(z.id) === id);\n\t\t\t\tif (zone) latest.current.onZoneSelect?.(zone);\n\t\t\t};\n\t\t\tconst enter = () => {\n\t\t\t\tmap.getCanvas().style.cursor = \"pointer\";\n\t\t\t};\n\t\t\tconst leave = () => {\n\t\t\t\tmap.getCanvas().style.cursor = \"\";\n\t\t\t};\n\n\t\t\t// Markers live inside mapbox's canvas container, so a marker click bubbles up and fires the map's\n\t\t\t// own click too. Without this guard the background handler clears the selection the marker just\n\t\t\t// made, and nothing ever opens.\n\t\t\tconst onBackground = (event: mapboxgl.MapMouseEvent) => {\n\t\t\t\tconst target = event.originalEvent?.target as HTMLElement | null;\n\t\t\t\tif (target?.closest?.(\".mapboxgl-marker\")) return;\n\t\t\t\tlatest.current.onBackgroundClick?.();\n\t\t\t};\n\n\t\t\tmap.on(\"click\", onBackground);\n\t\t\tmap.on(\"click\", ZONES_FILL_ID, onClick);\n\t\t\tmap.on(\"mouseenter\", ZONES_FILL_ID, enter);\n\t\t\tmap.on(\"mouseleave\", ZONES_FILL_ID, leave);\n\t\t\treturn () => {\n\t\t\t\tmap.off(\"click\", onBackground);\n\t\t\t\tmap.off(\"click\", ZONES_FILL_ID, onClick);\n\t\t\t\tmap.off(\"mouseenter\", ZONES_FILL_ID, enter);\n\t\t\t\tmap.off(\"mouseleave\", ZONES_FILL_ID, leave);\n\t\t\t};\n\t\t}, []);\n\n\t\tReact.useEffect(() => {\n\t\t\tconst map = mapRef.current;\n\t\t\tif (!map) return;\n\n\t\t\tfor (const entry of markersRef.current) entry.marker.remove();\n\n\t\t\tconst size = observationMarkerSize;\n\n\t\t\tmarkersRef.current = observations.map((observation) => {\n\t\t\t\t// A circular badge, not a teardrop pin: the glyph stays upright and readable, and the marker\n\t\t\t\t// centres on its coordinate instead of pointing at it from above. Round for observations,\n\t\t\t\t// square for cameras — at the same size, shape is what tells the two apart.\n\t\t\t\tconst element = badgeElement(size, observation.color ?? \"#f97316\", observationIcon, true);\n\t\t\t\tif (observation.label) element.title = observation.label;\n\n\t\t\t\t// No popup: the detail panel carries the record, and a bubble over the pin would cover the\n\t\t\t\t// very markers the selection is meant to be read against.\n\t\t\t\tconst marker = new mapboxgl.Marker({element, anchor: \"center\"}).setLngLat(observation.coordinates);\n\t\t\t\telement.addEventListener(\"click\", () => onObservationSelect?.(observation));\n\t\t\t\tbindHover(element, \"observation\", observation.id);\n\t\t\t\treturn {id: observation.id, marker: marker.addTo(map)};\n\t\t\t});\n\t\t\tapplyFocus();\n\t\t}, [observations, onObservationSelect, observationIcon, observationMarkerSize, applyFocus, bindHover]);\n\n\t\tReact.useEffect(() => {\n\t\t\tconst map = mapRef.current;\n\t\t\tif (!map) return;\n\n\t\t\tfor (const entry of cameraMarkersRef.current) entry.marker.remove();\n\t\t\tif (!showCameras) {\n\t\t\t\tcameraMarkersRef.current = [];\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tcameraMarkersRef.current = cameras.map((camera) => {\n\t\t\t\t// Deliberately quiet: a camera is context, not a finding. Desaturated and dark, so it stays\n\t\t\t\t// legible without pulling attention from the status-coloured violations.\n\t\t\t\tconst element = badgeElement(cameraMarkerSize, camera.color ?? \"#3d4a5c\", cameraIcon);\n\t\t\t\tconst violations = camera.violations ?? 0;\n\t\t\t\tif (violations > 0) element.appendChild(countBadge(violations, cameraMarkerSize));\n\t\t\t\telement.title = camera.name\n\t\t\t\t\t? `${camera.name} — ${violations} violation${violations === 1 ? \"\" : \"s\"}`\n\t\t\t\t\t: `${violations} violations`;\n\n\t\t\t\tconst marker = new mapboxgl.Marker({element, anchor: \"center\"}).setLngLat(camera.coordinates);\n\t\t\t\telement.addEventListener(\"click\", () => onCameraSelect?.(camera));\n\t\t\t\tbindHover(element, \"camera\", camera.id);\n\t\t\t\treturn {id: camera.id, marker: marker.addTo(map)};\n\t\t\t});\n\t\t\tapplyFocus();\n\t\t\tseparateResponders();\n\t\t}, [cameras, showCameras, onCameraSelect, cameraIcon, cameraMarkerSize, applyFocus, separateResponders, bindHover]);\n\n\t\tReact.useEffect(() => {\n\t\t\tconst map = mapRef.current;\n\t\t\tif (!map) return;\n\n\t\t\tfor (const entry of responderMarkersRef.current) entry.marker.remove();\n\t\t\tif (!showResponders) {\n\t\t\t\tresponderMarkersRef.current = [];\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tresponderMarkersRef.current = responders.map((responder) => {\n\t\t\t\t// Square like a camera — both are fixed site infrastructure rather than findings — but in a\n\t\t\t\t// different hue, so the two are told apart by colour and glyph.\n\t\t\t\tconst element = badgeElement(responderMarkerSize, responder.color ?? \"#2f6b63\", responderIcon);\n\t\t\t\t// Off shift reads as receded rather than absent; they are still on site.\n\t\t\t\tif (responder.online === false) element.style.opacity = \"0.55\";\n\t\t\t\tif (responder.name) element.title = responder.name;\n\t\t\t\tconst marker = new mapboxgl.Marker({element, anchor: \"center\"}).setLngLat(responder.coordinates);\n\t\t\t\telement.addEventListener(\"click\", () => onResponderSelect?.(responder));\n\t\t\t\tbindHover(element, \"responder\", responder.id);\n\t\t\t\treturn {id: responder.id, marker: marker.addTo(map), at: responder.coordinates};\n\t\t\t});\n\t\t\tapplyFocus();\n\t\t\tseparateResponders();\n\t\t}, [\n\t\t\tresponders,\n\t\t\tshowResponders,\n\t\t\tonResponderSelect,\n\t\t\tresponderIcon,\n\t\t\tresponderMarkerSize,\n\t\t\tapplyFocus,\n\t\t\tseparateResponders,\n\t\t\tbindHover,\n\t\t]);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={rootRef}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"wwc:relative wwc:w-full wwc:overflow-hidden wwc:rounded-lg\",\n\t\t\t\t\t// min-h-0 lets the map shrink inside a flex column instead of being pinned to its content.\n\t\t\t\t\tfullHeight ? \"wwc:h-full wwc:min-h-0\" : \"wwc:h-[500px]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tstyle={style}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{/* The map fills the root rather than being it, so the timeline can float above the canvas.\n\t\t\t\t    Sized, not positioned: mapbox-gl.css declares `.mapboxgl-map { position: relative }` and loads\n\t\t\t\t    after the utilities, so an `absolute inset-0` container would be overridden and collapse to 0. */}\n\t\t\t\t<div ref={containerRef} className=\"wwc:h-full wwc:w-full\" />\n\n\t\t\t\t{/* The reset control rides alongside the controls rather than floating on its own, so it sits\n\t\t\t\t    beside whatever the caller put in the corner without needing to know its width. */}\n\t\t\t\t{(controls || (showResetView && viewMoved)) && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"wwc:absolute wwc:left-3 wwc:top-3 wwc:z-20 wwc:flex wwc:items-start wwc:gap-2\",\n\t\t\t\t\t\t\t// Bounded above the timeline and scrolling, so a tall stack of panels runs out of room\n\t\t\t\t\t\t\t// rather than sliding underneath it.\n\t\t\t\t\t\t\t\"wwc:overflow-y-auto\",\n\t\t\t\t\t\t\tlegendInline ? \"wwc:bottom-12\" : \"wwc:bottom-28\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{controls}\n\t\t\t\t\t\t{showResetView && viewMoved && (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tif (homeViewRef.current) mapRef.current?.easeTo({...homeViewRef.current, duration: 700});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tstyle={{width: resetViewWidth}}\n\t\t\t\t\t\t\t\t// Same padding, radius, surface and inner row height as a collapsed panel header, so the\n\t\t\t\t\t\t\t\t// three float as one set rather than three sizes.\n\t\t\t\t\t\t\t\tclassName={`wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-1.5 wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card wwc:px-2.5 wwc:py-1.5 wwc:text-xs wwc:font-medium wwc:text-muted-foreground wwc:transition-colors wwc:hover:bg-accent ${FLOAT_SHADOW}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"wwc:flex wwc:h-6 wwc:items-center wwc:gap-1.5\">\n\t\t\t\t\t\t\t\t\t<RotateCcw className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t\t\t\t\t{resetViewLabel}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{hovered && renderHoverCard && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"wwc:pointer-events-none wwc:absolute wwc:z-30 wwc:-translate-x-1/2 wwc:-translate-y-full\"\n\t\t\t\t\t\tstyle={{left: hovered.x, top: hovered.y - 8}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderHoverCard({kind: hovered.kind, id: hovered.id})}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{legend && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"wwc:absolute wwc:right-3 wwc:z-20\",\n\t\t\t\t\t\t\t// A collapsed timeline gives up the right of its row, so the legend can drop into it.\n\t\t\t\t\t\t\tlegendInline ? \"wwc:bottom-3\" : \"wwc:bottom-24\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{legend}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{/* The panel caps its own height, so the wrapper only has to place it. */}\n\t\t\t\t{detail && <div className=\"wwc:absolute wwc:right-3 wwc:top-3 wwc:z-20\">{detail}</div>}\n\n\t\t\t\t{timeline && (\n\t\t\t\t\t<div className=\"wwc:absolute wwc:inset-x-3 wwc:bottom-3 wwc:z-10\">\n\t\t\t\t\t\t<TimeScrubber {...timeline} className={cn(\"wwc:bg-card\", timeline.className)} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nObservationsMap.displayName = \"ObservationsMap\";\n\nexport {DEFAULT_BLUEPRINT_CORNERS, ObservationsMap};\n"],"mappings":"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"}

package/dist/operations-drawer.d.mts

@@ -0,0 +1,51 @@
+//#region src/operations-drawer.d.ts
+/** A single operation line in the drawer's table. */
+export interface OperationRow {
+  /** Operation name — the bold first line (e.g. "Backfill"). */
+  name: string;
+  /** Operation code — the muted second line (e.g. "BF-01"). */
+  code: string;
+  /** Weight of the operation. */
+  wt: string;
+  /** Previous progress. */
+  prev: string;
+  /** Budget at completion. */
+  bac: string;
+  /** Earned value. */
+  ev: string;
+  /** Editable progress value shown in the input (e.g. "100%"). */
+  progress: string;
+  /** Called when the progress input changes. */
+  onProgressChange?: (value: string) => void;
+}
+export interface OperationsDrawerProps {
+  /** Bold title — the object identifier (e.g. "2266-DP1-R-SS"). */
+  title: string;
+  /** Full WBS path, shown muted under the title. */
+  wbs: string;
+  /** Overall completion percentage (0–100) for the header bar. */
+  progress: number;
+  /** Optional pager shown beside the title (e.g. 1 of 4). */
+  page?: {
+    current: number;
+    total: number;
+  };
+  /** Operation rows for the table. */
+  rows: OperationRow[];
+  onWalkthrough?: () => void;
+  onClose?: () => void;
+  onPrev?: () => void;
+  onNext?: () => void;
+  onDiscard?: () => void;
+  onSave?: () => void;
+  className?: string;
+}
+/**
+ * A drawer for reviewing and editing the operations under a single object: a header (identifier, WBS
+ * path, overall progress, and a walkthrough button), a compact per-operation table with an editable
+ * progress field, and a discard / save footer (Save is disabled until a progress value changes).
+ * Composed from Core Table, Progress, Input, and Button.
+ */
+export declare function OperationsDrawer({ title, wbs, progress, page, rows, onWalkthrough, onClose, onPrev, onNext, onDiscard, onSave, className }: OperationsDrawerProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=operations-drawer.d.mts.map

package/dist/operations-drawer.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"operations-drawer.d.mts","names":[],"sources":["../src/operations-drawer.tsx"],"mappings":";;iBAUiB;;EAEhB;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,oBAAoB;;iBAGJ;;EAEhB;;EAEA;;EAEA;;EAEA;IAAQ;IAAiB;;;EAEzB,MAAM;EACN;EACA;EACA;EACA;EACA;EACA;EACA;;;;;;;;wBAYe,mBACf,OACA,KACA,UACA,MACA,MACA,eACA,SACA,QACA,QACA,WACA,QACA,aACE,oDAAqB,IAAA"}

package/dist/operations-drawer.mjs

@@ -0,0 +1,193 @@
+import { Button } from "./button.mjs";
+import { Input } from "./input.mjs";
+import { Table as Table$1, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.mjs";
+import { Progress } from "./progress.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ChevronLeft, ChevronRight, Video, X } from "lucide-react";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/operations-drawer.tsx
+const numericHead = "wwc:h-9 wwc:w-12 wwc:px-1.5 wwc:text-center wwc:text-[11px] wwc:uppercase wwc:tracking-wide";
+const numericCell = "wwc:px-1.5 wwc:text-center wwc:text-xs wwc:text-foreground";
+/**
+* A drawer for reviewing and editing the operations under a single object: a header (identifier, WBS
+* path, overall progress, and a walkthrough button), a compact per-operation table with an editable
+* progress field, and a discard / save footer (Save is disabled until a progress value changes).
+* Composed from Core Table, Progress, Input, and Button.
+*/
+function OperationsDrawer({ title, wbs, progress, page, rows, onWalkthrough, onClose, onPrev, onNext, onDiscard, onSave, className }) {
+	const rowsKey = rows.map((r) => r.code).join("|");
+	const snapshotKey = useRef("");
+	const initialByCode = useRef({});
+	if (snapshotKey.current !== rowsKey) {
+		snapshotKey.current = rowsKey;
+		initialByCode.current = Object.fromEntries(rows.map((r) => [r.code, r.progress]));
+	}
+	const dirty = rows.some((r) => r.progress !== initialByCode.current[r.code]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:flex wwc:h-full wwc:w-[440px] wwc:max-w-full wwc:flex-col wwc:overflow-hidden wwc:rounded-b-lg wwc:border wwc:border-border wwc:bg-background wwc:shadow-lg", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:flex-col wwc:gap-3 wwc:px-5 wwc:py-4",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:justify-between wwc:gap-2",
+						children: [/* @__PURE__ */ jsx("h2", {
+							className: "wwc:truncate wwc:text-sm wwc:font-bold wwc:text-foreground",
+							children: title
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-1",
+							children: [page && /* @__PURE__ */ jsxs("div", {
+								className: "wwc:flex wwc:items-center wwc:text-muted-foreground",
+								children: [
+									/* @__PURE__ */ jsx(Button, {
+										variant: "ghost",
+										size: "sm",
+										icon: true,
+										"aria-label": "Previous object",
+										onClick: onPrev,
+										children: /* @__PURE__ */ jsx(ChevronLeft, {})
+									}),
+									/* @__PURE__ */ jsxs("span", {
+										className: "wwc:tabular-nums wwc:text-xs",
+										children: [
+											page.current,
+											" / ",
+											page.total
+										]
+									}),
+									/* @__PURE__ */ jsx(Button, {
+										variant: "ghost",
+										size: "sm",
+										icon: true,
+										"aria-label": "Next object",
+										onClick: onNext,
+										children: /* @__PURE__ */ jsx(ChevronRight, {})
+									})
+								]
+							}), /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								icon: true,
+								"aria-label": "Close",
+								onClick: onClose,
+								children: /* @__PURE__ */ jsx(X, {})
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "wwc:text-xs wwc:text-muted-foreground",
+						children: wbs
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:gap-3",
+						children: [/* @__PURE__ */ jsx(Progress, {
+							value: progress,
+							className: "wwc:h-1.5 wwc:flex-1"
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "wwc:shrink-0 wwc:text-xs wwc:font-semibold wwc:text-muted-foreground",
+							children: [progress, "%"]
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Button, {
+						variant: "outline",
+						size: "sm",
+						onClick: onWalkthrough,
+						children: [/* @__PURE__ */ jsx(Video, {}), "Walkthrough"]
+					}) })
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "wwc:min-h-0 wwc:flex-1 wwc:overflow-y-auto wwc:border-t wwc:border-border",
+				children: /* @__PURE__ */ jsxs(Table$1, { children: [/* @__PURE__ */ jsx(TableHeader, {
+					className: "wwc:bg-muted",
+					children: /* @__PURE__ */ jsxs(TableRow, {
+						className: "wwc:hover:bg-muted",
+						children: [
+							/* @__PURE__ */ jsx(TableHead, {
+								className: "wwc:h-9 wwc:px-4 wwc:text-[11px] wwc:uppercase wwc:tracking-wide",
+								children: "Operation"
+							}),
+							/* @__PURE__ */ jsx(TableHead, {
+								className: numericHead,
+								children: "WT"
+							}),
+							/* @__PURE__ */ jsx(TableHead, {
+								className: numericHead,
+								children: "Prev"
+							}),
+							/* @__PURE__ */ jsx(TableHead, {
+								className: numericHead,
+								children: "BAC"
+							}),
+							/* @__PURE__ */ jsx(TableHead, {
+								className: numericHead,
+								children: "EV"
+							}),
+							/* @__PURE__ */ jsx(TableHead, {
+								className: "wwc:h-9 wwc:w-[88px] wwc:px-3 wwc:text-right wwc:text-[11px] wwc:uppercase wwc:tracking-wide",
+								children: "Progress"
+							})
+						]
+					})
+				}), /* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => /* @__PURE__ */ jsxs(TableRow, { children: [
+					/* @__PURE__ */ jsx(TableCell, {
+						className: "wwc:px-4 wwc:py-2.5",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:flex-col",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "wwc:truncate wwc:text-xs wwc:font-semibold wwc:text-foreground",
+								title: row.name,
+								children: row.name
+							}), /* @__PURE__ */ jsx("span", {
+								className: "wwc:text-[11px] wwc:text-muted-foreground",
+								children: row.code
+							})]
+						})
+					}),
+					/* @__PURE__ */ jsx(TableCell, {
+						className: numericCell,
+						children: row.wt
+					}),
+					/* @__PURE__ */ jsx(TableCell, {
+						className: numericCell,
+						children: row.prev
+					}),
+					/* @__PURE__ */ jsx(TableCell, {
+						className: numericCell,
+						children: row.bac
+					}),
+					/* @__PURE__ */ jsx(TableCell, {
+						className: numericCell,
+						children: row.ev
+					}),
+					/* @__PURE__ */ jsx(TableCell, {
+						className: "wwc:px-3 wwc:py-2.5",
+						children: /* @__PURE__ */ jsx(Input, {
+							value: row.progress,
+							onChange: (e) => row.onProgressChange?.(e.target.value),
+							"aria-label": `${row.name} progress`,
+							className: "wwc:ml-auto wwc:h-8 wwc:w-14 wwc:px-2 wwc:text-center wwc:text-xs"
+						})
+					})
+				] }, row.code)) })] })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:items-center wwc:justify-between wwc:border-t wwc:border-border wwc:px-5 wwc:py-3",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					onClick: onDiscard,
+					children: "Discard"
+				}), /* @__PURE__ */ jsx(Button, {
+					onClick: onSave,
+					disabled: !dirty,
+					children: "Save changes"
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { OperationsDrawer };
+
+//# sourceMappingURL=operations-drawer.mjs.map

package/dist/operations-drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"operations-drawer.mjs","names":["Table"],"sources":["../src/operations-drawer.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {ChevronLeft, ChevronRight, Video, X} from \"lucide-react\";\nimport {useRef} from \"react\";\n\nimport {Button} from \"./button\";\nimport {Input} from \"./input\";\nimport {Progress} from \"./progress\";\nimport {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from \"./table\";\n\n/** A single operation line in the drawer's table. */\nexport interface OperationRow {\n\t/** Operation name — the bold first line (e.g. \"Backfill\"). */\n\tname: string;\n\t/** Operation code — the muted second line (e.g. \"BF-01\"). */\n\tcode: string;\n\t/** Weight of the operation. */\n\twt: string;\n\t/** Previous progress. */\n\tprev: string;\n\t/** Budget at completion. */\n\tbac: string;\n\t/** Earned value. */\n\tev: string;\n\t/** Editable progress value shown in the input (e.g. \"100%\"). */\n\tprogress: string;\n\t/** Called when the progress input changes. */\n\tonProgressChange?: (value: string) => void;\n}\n\nexport interface OperationsDrawerProps {\n\t/** Bold title — the object identifier (e.g. \"2266-DP1-R-SS\"). */\n\ttitle: string;\n\t/** Full WBS path, shown muted under the title. */\n\twbs: string;\n\t/** Overall completion percentage (0–100) for the header bar. */\n\tprogress: number;\n\t/** Optional pager shown beside the title (e.g. 1 of 4). */\n\tpage?: {current: number; total: number};\n\t/** Operation rows for the table. */\n\trows: OperationRow[];\n\tonWalkthrough?: () => void;\n\tonClose?: () => void;\n\tonPrev?: () => void;\n\tonNext?: () => void;\n\tonDiscard?: () => void;\n\tonSave?: () => void;\n\tclassName?: string;\n}\n\nconst numericHead = \"wwc:h-9 wwc:w-12 wwc:px-1.5 wwc:text-center wwc:text-[11px] wwc:uppercase wwc:tracking-wide\";\nconst numericCell = \"wwc:px-1.5 wwc:text-center wwc:text-xs wwc:text-foreground\";\n\n/**\n * A drawer for reviewing and editing the operations under a single object: a header (identifier, WBS\n * path, overall progress, and a walkthrough button), a compact per-operation table with an editable\n * progress field, and a discard / save footer (Save is disabled until a progress value changes).\n * Composed from Core Table, Progress, Input, and Button.\n */\nexport function OperationsDrawer({\n\ttitle,\n\twbs,\n\tprogress,\n\tpage,\n\trows,\n\tonWalkthrough,\n\tonClose,\n\tonPrev,\n\tonNext,\n\tonDiscard,\n\tonSave,\n\tclassName,\n}: OperationsDrawerProps) {\n\t// Snapshot the progress values first seen for this set of operations; Save enables only once a value\n\t// diverges from that snapshot. A new operation set (e.g. paging to another object) re-snapshots.\n\tconst rowsKey = rows.map((r) => r.code).join(\"|\");\n\tconst snapshotKey = useRef(\"\");\n\tconst initialByCode = useRef<Record<string, string>>({});\n\tif (snapshotKey.current !== rowsKey) {\n\t\tsnapshotKey.current = rowsKey;\n\t\tinitialByCode.current = Object.fromEntries(rows.map((r) => [r.code, r.progress]));\n\t}\n\tconst dirty = rows.some((r) => r.progress !== initialByCode.current[r.code]);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:flex wwc:h-full wwc:w-[440px] wwc:max-w-full wwc:flex-col wwc:overflow-hidden wwc:rounded-b-lg wwc:border wwc:border-border wwc:bg-background wwc:shadow-lg\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{/* Header */}\n\t\t\t<div className=\"wwc:flex wwc:flex-col wwc:gap-3 wwc:px-5 wwc:py-4\">\n\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:justify-between wwc:gap-2\">\n\t\t\t\t\t<h2 className=\"wwc:truncate wwc:text-sm wwc:font-bold wwc:text-foreground\">{title}</h2>\n\t\t\t\t\t<div className=\"wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-1\">\n\t\t\t\t\t\t{page && (\n\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:text-muted-foreground\">\n\t\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" icon aria-label=\"Previous object\" onClick={onPrev}>\n\t\t\t\t\t\t\t\t\t<ChevronLeft />\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t<span className=\"wwc:tabular-nums wwc:text-xs\">\n\t\t\t\t\t\t\t\t\t{page.current} / {page.total}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" icon aria-label=\"Next object\" onClick={onNext}>\n\t\t\t\t\t\t\t\t\t<ChevronRight />\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" icon aria-label=\"Close\" onClick={onClose}>\n\t\t\t\t\t\t\t<X />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<p className=\"wwc:text-xs wwc:text-muted-foreground\">{wbs}</p>\n\n\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-3\">\n\t\t\t\t\t<Progress value={progress} className=\"wwc:h-1.5 wwc:flex-1\" />\n\t\t\t\t\t<span className=\"wwc:shrink-0 wwc:text-xs wwc:font-semibold wwc:text-muted-foreground\">{progress}%</span>\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<Button variant=\"outline\" size=\"sm\" onClick={onWalkthrough}>\n\t\t\t\t\t\t<Video />\n\t\t\t\t\t\tWalkthrough\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{/* Operations table */}\n\t\t\t<div className=\"wwc:min-h-0 wwc:flex-1 wwc:overflow-y-auto wwc:border-t wwc:border-border\">\n\t\t\t\t<Table>\n\t\t\t\t\t<TableHeader className=\"wwc:bg-muted\">\n\t\t\t\t\t\t<TableRow className=\"wwc:hover:bg-muted\">\n\t\t\t\t\t\t\t<TableHead className=\"wwc:h-9 wwc:px-4 wwc:text-[11px] wwc:uppercase wwc:tracking-wide\">\n\t\t\t\t\t\t\t\tOperation\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t<TableHead className={numericHead}>WT</TableHead>\n\t\t\t\t\t\t\t<TableHead className={numericHead}>Prev</TableHead>\n\t\t\t\t\t\t\t<TableHead className={numericHead}>BAC</TableHead>\n\t\t\t\t\t\t\t<TableHead className={numericHead}>EV</TableHead>\n\t\t\t\t\t\t\t<TableHead className=\"wwc:h-9 wwc:w-[88px] wwc:px-3 wwc:text-right wwc:text-[11px] wwc:uppercase wwc:tracking-wide\">\n\t\t\t\t\t\t\t\tProgress\n\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t</TableHeader>\n\t\t\t\t\t<TableBody>\n\t\t\t\t\t\t{rows.map((row) => (\n\t\t\t\t\t\t\t<TableRow key={row.code}>\n\t\t\t\t\t\t\t\t<TableCell className=\"wwc:px-4 wwc:py-2.5\">\n\t\t\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:flex-col\">\n\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:truncate wwc:text-xs wwc:font-semibold wwc:text-foreground\" title={row.name}>\n\t\t\t\t\t\t\t\t\t\t\t{row.name}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:text-[11px] wwc:text-muted-foreground\">{row.code}</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t<TableCell className={numericCell}>{row.wt}</TableCell>\n\t\t\t\t\t\t\t\t<TableCell className={numericCell}>{row.prev}</TableCell>\n\t\t\t\t\t\t\t\t<TableCell className={numericCell}>{row.bac}</TableCell>\n\t\t\t\t\t\t\t\t<TableCell className={numericCell}>{row.ev}</TableCell>\n\t\t\t\t\t\t\t\t<TableCell className=\"wwc:px-3 wwc:py-2.5\">\n\t\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\t\tvalue={row.progress}\n\t\t\t\t\t\t\t\t\t\tonChange={(e) => row.onProgressChange?.(e.target.value)}\n\t\t\t\t\t\t\t\t\t\taria-label={`${row.name} progress`}\n\t\t\t\t\t\t\t\t\t\tclassName=\"wwc:ml-auto wwc:h-8 wwc:w-14 wwc:px-2 wwc:text-center wwc:text-xs\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableBody>\n\t\t\t\t</Table>\n\t\t\t</div>\n\n\t\t\t{/* Footer */}\n\t\t\t<div className=\"wwc:flex wwc:items-center wwc:justify-between wwc:border-t wwc:border-border wwc:px-5 wwc:py-3\">\n\t\t\t\t<Button variant=\"ghost\" onClick={onDiscard}>\n\t\t\t\t\tDiscard\n\t\t\t\t</Button>\n\t\t\t\t<Button onClick={onSave} disabled={!dirty}>\n\t\t\t\t\tSave changes\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/outline.d.mts

@@ -0,0 +1,27 @@
+import * as React from "react";
+//#region src/outline.d.ts
+export interface OutlineItem {
+  id: string;
+  label: string;
+  level: number;
+  children?: OutlineItem[];
+}
+export interface OutlineProps extends React.HTMLAttributes<HTMLElement> {
+  /** Outline items (headings) */
+  items: OutlineItem[];
+  /** Currently active item ID */
+  activeId?: string;
+  /** Callback when an item is clicked */
+  onItemClick?: (id: string) => void;
+  /** Maximum nesting level to display */
+  maxLevel?: number;
+  /** Indent per level in pixels */
+  indentSize?: number;
+  /** Show connecting lines */
+  showLines?: boolean;
+}
+/** Document outline navigation component for table of contents. */
+declare const Outline: React.ForwardRefExoticComponent<OutlineProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Outline };
+//# sourceMappingURL=outline.d.mts.map

package/dist/outline.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"outline.d.mts","names":[],"sources":["../src/outline.tsx"],"mappings":";;iBAGiB;EAChB;EACA;EACA;EACA,WAAW;;iBAGK,qBAAqB,MAAM,eAAe;;EAE1D,OAAO;;EAEP;;EAEA,eAAe;;EAEf;;EAEA;;EAEA;;;cAIK,SAAO,MAAA,0BAAA,eAAA,MAAA,cAAA"}

package/dist/outline.mjs

@@ -0,0 +1,47 @@
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/outline.tsx
+/** Document outline navigation component for table of contents. */
+const Outline = React.forwardRef(({ className, items, activeId, onItemClick, maxLevel = 6, indentSize = 16, showLines = false, ...props }, ref) => {
+	const renderItem = (item) => {
+		if (item.level > maxLevel) return null;
+		const isActive = item.id === activeId;
+		const indent = (item.level - 1) * indentSize;
+		return /* @__PURE__ */ jsxs("li", {
+			className: "wwc:relative",
+			children: [
+				showLines && item.level > 1 && /* @__PURE__ */ jsx("div", {
+					className: "wwc:absolute wwc:left-0 wwc:top-0 wwc:bottom-0 wwc:border-l wwc:border-border",
+					style: { left: `${indent - indentSize / 2}px` }
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => onItemClick?.(item.id),
+					className: cn("wwc:w-full wwc:text-left wwc:py-1.5 wwc:px-2 wwc:rounded-md wwc:text-sm wwc:transition-colors", "hover:wwc:bg-accent hover:wwc:text-accent-foreground", isActive ? "wwc:bg-accent wwc:text-accent-foreground wwc:font-medium" : "wwc:text-muted-foreground"),
+					style: { paddingLeft: `${indent + 8}px` },
+					children: item.label
+				}),
+				item.children && item.children.length > 0 && /* @__PURE__ */ jsx("ul", {
+					className: "wwc:list-none wwc:m-0 wwc:p-0",
+					children: item.children.map(renderItem)
+				})
+			]
+		}, item.id);
+	};
+	return /* @__PURE__ */ jsx("nav", {
+		ref,
+		className: cn("wwc:relative", className),
+		"aria-label": "Document outline",
+		...props,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: "wwc:list-none wwc:m-0 wwc:p-0 wwc:space-y-0.5",
+			children: items.map(renderItem)
+		})
+	});
+});
+Outline.displayName = "Outline";
+//#endregion
+export { Outline };
+
+//# sourceMappingURL=outline.mjs.map

package/dist/outline.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"outline.mjs","names":[],"sources":["../src/outline.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport * as React from \"react\";\n\nexport interface OutlineItem {\n\tid: string;\n\tlabel: string;\n\tlevel: number;\n\tchildren?: OutlineItem[];\n}\n\nexport interface OutlineProps extends React.HTMLAttributes<HTMLElement> {\n\t/** Outline items (headings) */\n\titems: OutlineItem[];\n\t/** Currently active item ID */\n\tactiveId?: string;\n\t/** Callback when an item is clicked */\n\tonItemClick?: (id: string) => void;\n\t/** Maximum nesting level to display */\n\tmaxLevel?: number;\n\t/** Indent per level in pixels */\n\tindentSize?: number;\n\t/** Show connecting lines */\n\tshowLines?: boolean;\n}\n\n/** Document outline navigation component for table of contents. */\nconst Outline = React.forwardRef<HTMLElement, OutlineProps>(\n\t({className, items, activeId, onItemClick, maxLevel = 6, indentSize = 16, showLines = false, ...props}, ref) => {\n\t\tconst renderItem = (item: OutlineItem) => {\n\t\t\tif (item.level > maxLevel) return null;\n\n\t\t\tconst isActive = item.id === activeId;\n\t\t\tconst indent = (item.level - 1) * indentSize;\n\n\t\t\treturn (\n\t\t\t\t<li key={item.id} className=\"wwc:relative\">\n\t\t\t\t\t{showLines && item.level > 1 && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"wwc:absolute wwc:left-0 wwc:top-0 wwc:bottom-0 wwc:border-l wwc:border-border\"\n\t\t\t\t\t\t\tstyle={{left: `${indent - indentSize / 2}px`}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={() => onItemClick?.(item.id)}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"wwc:w-full wwc:text-left wwc:py-1.5 wwc:px-2 wwc:rounded-md wwc:text-sm wwc:transition-colors\",\n\t\t\t\t\t\t\t\"hover:wwc:bg-accent hover:wwc:text-accent-foreground\",\n\t\t\t\t\t\t\tisActive ? \"wwc:bg-accent wwc:text-accent-foreground wwc:font-medium\" : \"wwc:text-muted-foreground\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tstyle={{paddingLeft: `${indent + 8}px`}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.label}\n\t\t\t\t\t</button>\n\t\t\t\t\t{item.children && item.children.length > 0 && (\n\t\t\t\t\t\t<ul className=\"wwc:list-none wwc:m-0 wwc:p-0\">{item.children.map(renderItem)}</ul>\n\t\t\t\t\t)}\n\t\t\t\t</li>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<nav ref={ref} className={cn(\"wwc:relative\", className)} aria-label=\"Document outline\" {...props}>\n\t\t\t\t<ul className=\"wwc:list-none wwc:m-0 wwc:p-0 wwc:space-y-0.5\">{items.map(renderItem)}</ul>\n\t\t\t</nav>\n\t\t);\n\t},\n);\nOutline.displayName = \"Outline\";\n\nexport {Outline};\n"],"mappings":";;;;;AA0BA,MAAM,UAAU,MAAM,YACpB,EAAC,WAAW,OAAO,UAAU,aAAa,WAAW,GAAG,aAAa,IAAI,YAAY,OAAO,GAAG,SAAQ,QAAQ;CAC/G,MAAM,cAAc,SAAsB;EACzC,IAAI,KAAK,QAAQ,UAAU,OAAO;EAElC,MAAM,WAAW,KAAK,OAAO;EAC7B,MAAM,UAAU,KAAK,QAAQ,KAAK;EAElC,OACC,qBAAC,MAAD;GAAkB,WAAU;GAA5B,UAAA;IACE,aAAa,KAAK,QAAQ,KAC1B,oBAAC,OAAD;KACC,WAAU;KACV,OAAO,EAAC,MAAM,GAAG,SAAS,aAAa,EAAE,IAAG;IAC5C,CAAA;IAEF,oBAAC,UAAD;KACC,MAAK;KACL,eAAe,cAAc,KAAK,EAAE;KACpC,WAAW,GACV,iGACA,wDACA,WAAW,6DAA6D,2BACzE;KACA,OAAO,EAAC,aAAa,GAAG,SAAS,EAAE,IAAG;KAErC,UAAA,KAAK;IACC,CAAA;IACP,KAAK,YAAY,KAAK,SAAS,SAAS,KACxC,oBAAC,MAAD;KAAI,WAAU;KAAiC,UAAA,KAAK,SAAS,IAAI,UAAU;IAAM,CAAA;GAE/E;EAtBK,GAAA,KAAK,EAsBV;CAEN;CAEA,OACC,oBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,gBAAgB,SAAS;EAAG,cAAW;EAAmB,GAAI;EAC1F,UAAA,oBAAC,MAAD;GAAI,WAAU;GAAiD,UAAA,MAAM,IAAI,UAAU;EAAM,CAAA;CACrF,CAAA;AAEP,CACD;AACA,QAAQ,cAAc"}

package/dist/overflow-list.d.mts

@@ -0,0 +1,23 @@
+import * as React from "react";
+//#region src/overflow-list.d.ts
+export interface OverflowListProps<T> {
+  /** Array of items to display */
+  items: T[];
+  /** Maximum number of items to show before overflow */
+  maxVisible?: number;
+  /** Render function for each item */
+  renderItem: (item: T, index: number) => React.ReactNode;
+  /** Render function for the overflow trigger */
+  renderOverflow?: (count: number) => React.ReactNode;
+  /** Render function for items in the overflow popover */
+  renderOverflowItem?: (item: T, index: number) => React.ReactNode;
+  /** className for the container */
+  className?: string;
+  /** className for the list */
+  listClassName?: string;
+}
+/** A list component that shows a subset of items and hides the rest in an overflow menu. */
+declare function OverflowList<T>({ items, maxVisible, renderItem, renderOverflow, renderOverflowItem, className, listClassName }: OverflowListProps<T>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { OverflowList };
+//# sourceMappingURL=overflow-list.d.mts.map

package/dist/overflow-list.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow-list.d.mts","names":[],"sources":["../src/overflow-list.tsx"],"mappings":";;iBAKiB,kBAAkB;;EAElC,OAAO;;EAEP;;EAEA,aAAa,MAAM,GAAG,kBAAkB,MAAM;;EAE9C,kBAAkB,kBAAkB,MAAM;;EAE1C,sBAAsB,MAAM,GAAG,kBAAkB,MAAM;;EAEvD;;EAEA;;;iBAIQ,aAAa,KACrB,OACA,YACA,YACA,gBACA,oBACA,WACA,iBACE,kBAAkB,iCAAE,IAAA"}

package/dist/overflow-list.mjs

@@ -0,0 +1,38 @@
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.mjs";
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/overflow-list.tsx
+/** A list component that shows a subset of items and hides the rest in an overflow menu. */
+function OverflowList({ items, maxVisible = 3, renderItem, renderOverflow, renderOverflowItem, className, listClassName }) {
+	const visibleItems = items.slice(0, maxVisible);
+	const overflowItems = items.slice(maxVisible);
+	const hasOverflow = overflowItems.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:flex wwc:items-center wwc:gap-2", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("wwc:flex wwc:items-center wwc:gap-2", listClassName),
+			children: visibleItems.map((item, index) => /* @__PURE__ */ jsx(React.Fragment, { children: renderItem(item, index) }, index))
+		}), hasOverflow && /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("button", {
+				className: "wwc:text-sm wwc:text-muted-foreground wwc:hover:text-foreground wwc:transition-colors",
+				children: renderOverflow ? renderOverflow(overflowItems.length) : /* @__PURE__ */ jsxs("span", { children: [
+					"+",
+					overflowItems.length,
+					" more"
+				] })
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "wwc:w-auto wwc:p-2",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "wwc:space-y-1",
+				children: overflowItems.map((item, index) => /* @__PURE__ */ jsx("div", { children: renderOverflowItem ? renderOverflowItem(item, index + maxVisible) : renderItem(item, index + maxVisible) }, index))
+			})
+		})] })]
+	});
+}
+//#endregion
+export { OverflowList };
+
+//# sourceMappingURL=overflow-list.mjs.map