@elabs-ai/components-maps 4.2.0 → 5.1.0

package/dist/chunk-CJJT6AEI.js

@@ -0,0 +1,179 @@
+"use client";
+import {
+  createRouteArrowImage,
+  routeArrowImageId
+} from "./chunk-2VVJRT66.js";
+import {
+  useTokenColor
+} from "./chunk-Y44MEKJV.js";
+import {
+  useMap
+} from "./chunk-JYFERXZT.js";
+
+// src/map-route/map-route.tsx
+import { useEffect, useId, useMemo } from "react";
+function MapRoute({
+  id: propId,
+  coordinates,
+  color,
+  width = 3,
+  opacity = 0.8,
+  dashArray,
+  direction = "none",
+  directionSpacing = 80,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  interactive = true
+}) {
+  const { map, isLoaded, plan } = useMap();
+  const autoId = useId();
+  const id = propId ?? autoId;
+  const sourceId = `route-source-${id}`;
+  const layerId = `route-layer-${id}`;
+  const arrowLayerId = `route-arrows-${id}`;
+  const arrowImageId = routeArrowImageId(id);
+  const primary = useTokenColor("--primary");
+  const lineColor = color ?? primary;
+  const resolvedCoordinates = useMemo(
+    () => plan ? coordinates.map((point) => plan.toLngLat(point)) : coordinates,
+    [plan, coordinates]
+  );
+  useEffect(() => {
+    if (!isLoaded || !map) return;
+    map.addSource(sourceId, {
+      type: "geojson",
+      data: {
+        type: "Feature",
+        properties: {},
+        geometry: { type: "LineString", coordinates: [] }
+      }
+    });
+    map.addLayer({
+      id: layerId,
+      type: "line",
+      source: sourceId,
+      layout: { "line-join": "round", "line-cap": "round" },
+      paint: {
+        "line-color": lineColor,
+        "line-width": width,
+        "line-opacity": opacity,
+        ...dashArray && { "line-dasharray": dashArray }
+      }
+    });
+    return () => {
+      try {
+        if (map.getLayer(layerId)) map.removeLayer(layerId);
+        if (map.getSource(sourceId)) map.removeSource(sourceId);
+      } catch {
+      }
+    };
+  }, [isLoaded, map]);
+  useEffect(() => {
+    if (!isLoaded || !map || resolvedCoordinates.length < 2) return;
+    const source = map.getSource(sourceId);
+    if (source) {
+      source.setData({
+        type: "Feature",
+        properties: {},
+        geometry: { type: "LineString", coordinates: resolvedCoordinates }
+      });
+    }
+  }, [isLoaded, map, resolvedCoordinates, sourceId]);
+  useEffect(() => {
+    if (!isLoaded || !map || direction === "none") return;
+    const image = createRouteArrowImage(lineColor);
+    if (!image) return;
+    let cancelled = false;
+    const register = () => {
+      try {
+        if (map.hasImage(arrowImageId)) {
+          map.updateImage(arrowImageId, image);
+        } else {
+          map.addImage(arrowImageId, image, { pixelRatio: 2 });
+        }
+        if (!map.getLayer(arrowLayerId)) {
+          map.addLayer({
+            id: arrowLayerId,
+            type: "symbol",
+            source: sourceId,
+            layout: {
+              "symbol-placement": "line",
+              "symbol-spacing": directionSpacing,
+              "icon-image": arrowImageId,
+              "icon-rotate": direction === "backward" ? 180 : 0,
+              "icon-rotation-alignment": "map",
+              "icon-allow-overlap": true,
+              "icon-ignore-placement": true
+            },
+            paint: { "icon-opacity": opacity }
+          });
+        } else {
+          map.setLayoutProperty(arrowLayerId, "symbol-spacing", directionSpacing);
+          map.setLayoutProperty(arrowLayerId, "icon-rotate", direction === "backward" ? 180 : 0);
+          map.setPaintProperty(arrowLayerId, "icon-opacity", opacity);
+        }
+      } catch {
+      }
+    };
+    register();
+    const onStyleData = () => {
+      if (!cancelled) register();
+    };
+    map.on("styledata", onStyleData);
+    return () => {
+      cancelled = true;
+      map.off("styledata", onStyleData);
+      try {
+        if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);
+        if (map.hasImage(arrowImageId)) map.removeImage(arrowImageId);
+      } catch {
+      }
+    };
+  }, [
+    isLoaded,
+    map,
+    direction,
+    directionSpacing,
+    lineColor,
+    opacity,
+    sourceId,
+    arrowLayerId,
+    arrowImageId
+  ]);
+  useEffect(() => {
+    if (!isLoaded || !map || !map.getLayer(layerId)) return;
+    map.setPaintProperty(layerId, "line-color", lineColor);
+    map.setPaintProperty(layerId, "line-width", width);
+    map.setPaintProperty(layerId, "line-opacity", opacity);
+    map.setPaintProperty(layerId, "line-dasharray", dashArray);
+  }, [isLoaded, map, layerId, lineColor, width, opacity, dashArray]);
+  useEffect(() => {
+    if (!isLoaded || !map || !interactive) return;
+    const handleClick = () => {
+      onClick?.();
+    };
+    const handleMouseEnter = () => {
+      map.getCanvas().style.cursor = "pointer";
+      onMouseEnter?.();
+    };
+    const handleMouseLeave = () => {
+      map.getCanvas().style.cursor = "";
+      onMouseLeave?.();
+    };
+    map.on("click", layerId, handleClick);
+    map.on("mouseenter", layerId, handleMouseEnter);
+    map.on("mouseleave", layerId, handleMouseLeave);
+    return () => {
+      map.off("click", layerId, handleClick);
+      map.off("mouseenter", layerId, handleMouseEnter);
+      map.off("mouseleave", layerId, handleMouseLeave);
+    };
+  }, [isLoaded, map, layerId, onClick, onMouseEnter, onMouseLeave, interactive]);
+  return null;
+}
+
+export {
+  MapRoute
+};
+//# sourceMappingURL=chunk-CJJT6AEI.js.map

package/dist/chunk-CJJT6AEI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/map-route/map-route.tsx"],"sourcesContent":["\"use client\";\n\nimport type MapLibreGL from \"maplibre-gl\";\nimport { useEffect, useId, useMemo } from \"react\";\n\nimport { useMap } from \"../map-canvas/map-context\";\nimport { useTokenColor } from \"../lib/use-token-color\";\nimport { createRouteArrowImage, routeArrowImageId } from \"../lib/route-arrow\";\n\n/** Which way the route runs, drawn as chevrons along the line. */\nexport type MapRouteDirection = \"none\" | \"forward\" | \"backward\";\n\nexport interface MapRouteProps {\n  /** Optional unique identifier for the route layer. */\n  id?: string;\n  /**\n   * Array of [longitude, latitude] coordinate pairs defining the route — or, in\n   * a `<MapCanvas plan>`, [x, y] pairs in plan units.\n   */\n  coordinates: [number, number][];\n  /** Line color as a CSS color value. Defaults to the theme's `--primary` token. */\n  color?: string;\n  /** Line width in pixels (default: 3). */\n  width?: number;\n  /** Line opacity from 0 to 1 (default: 0.8). */\n  opacity?: number;\n  /** Dash pattern [dash length, gap length] for dashed lines. */\n  dashArray?: [number, number];\n  /**\n   * Draw chevrons along the line to show which way it runs (default: \"none\").\n   * A conveyor, a one-way aisle and a walking route all need this, and an arrow\n   * is a second channel that greyscale keeps.\n   */\n  direction?: MapRouteDirection;\n  /** Distance between chevrons in px (default: 80). */\n  directionSpacing?: number;\n  /** Callback when the route line is clicked. */\n  onClick?: () => void;\n  /** Callback when the mouse enters the route line. */\n  onMouseEnter?: () => void;\n  /** Callback when the mouse leaves the route line. */\n  onMouseLeave?: () => void;\n  /** Whether the route is interactive — shows a pointer cursor on hover (default: true). */\n  interactive?: boolean;\n}\n\n/** A GeoJSON line layer for routes/paths. Renders nothing itself — it draws on the map. */\nexport function MapRoute({\n  id: propId,\n  coordinates,\n  color,\n  width = 3,\n  opacity = 0.8,\n  dashArray,\n  direction = \"none\",\n  directionSpacing = 80,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  interactive = true,\n}: MapRouteProps) {\n  const { map, isLoaded, plan } = useMap();\n  const autoId = useId();\n  const id = propId ?? autoId;\n  const sourceId = `route-source-${id}`;\n  const layerId = `route-layer-${id}`;\n  const arrowLayerId = `route-arrows-${id}`;\n  const arrowImageId = routeArrowImageId(id);\n\n  const primary = useTokenColor(\"--primary\");\n  const lineColor = color ?? primary;\n\n  // On a plan map the pairs are plan units; on a geographic one they are handed\n  // through untouched, identity included.\n  const resolvedCoordinates = useMemo(\n    () => (plan ? coordinates.map((point) => plan.toLngLat(point)) : coordinates),\n    [plan, coordinates],\n  );\n\n  // Add source and layer on mount.\n  useEffect(() => {\n    if (!isLoaded || !map) return;\n\n    map.addSource(sourceId, {\n      type: \"geojson\",\n      data: {\n        type: \"Feature\",\n        properties: {},\n        geometry: { type: \"LineString\", coordinates: [] },\n      },\n    });\n\n    map.addLayer({\n      id: layerId,\n      type: \"line\",\n      source: sourceId,\n      layout: { \"line-join\": \"round\", \"line-cap\": \"round\" },\n      paint: {\n        \"line-color\": lineColor,\n        \"line-width\": width,\n        \"line-opacity\": opacity,\n        ...(dashArray && { \"line-dasharray\": dashArray }),\n      },\n    });\n\n    return () => {\n      try {\n        if (map.getLayer(layerId)) map.removeLayer(layerId);\n        if (map.getSource(sourceId)) map.removeSource(sourceId);\n      } catch {\n        // style may be mid-reload\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- source/layer created once per map; data + paint are synced by the effects below\n  }, [isLoaded, map]);\n\n  // When coordinates change, update the source data.\n  useEffect(() => {\n    if (!isLoaded || !map || resolvedCoordinates.length < 2) return;\n\n    const source = map.getSource(sourceId) as MapLibreGL.GeoJSONSource;\n    if (source) {\n      source.setData({\n        type: \"Feature\",\n        properties: {},\n        geometry: { type: \"LineString\", coordinates: resolvedCoordinates },\n      });\n    }\n  }, [isLoaded, map, resolvedCoordinates, sourceId]);\n\n  // Direction chevrons: a generated icon, re-registered whenever the ink\n  // changes, with the layer added only once the image really exists.\n  useEffect(() => {\n    if (!isLoaded || !map || direction === \"none\") return;\n\n    const image = createRouteArrowImage(lineColor);\n    if (!image) return;\n\n    let cancelled = false;\n\n    const register = () => {\n      try {\n        if (map.hasImage(arrowImageId)) {\n          map.updateImage(arrowImageId, image as unknown as ImageData);\n        } else {\n          map.addImage(arrowImageId, image as unknown as ImageData, { pixelRatio: 2 });\n        }\n        if (!map.getLayer(arrowLayerId)) {\n          map.addLayer({\n            id: arrowLayerId,\n            type: \"symbol\",\n            source: sourceId,\n            layout: {\n              \"symbol-placement\": \"line\",\n              \"symbol-spacing\": directionSpacing,\n              \"icon-image\": arrowImageId,\n              \"icon-rotate\": direction === \"backward\" ? 180 : 0,\n              \"icon-rotation-alignment\": \"map\",\n              \"icon-allow-overlap\": true,\n              \"icon-ignore-placement\": true,\n            },\n            paint: { \"icon-opacity\": opacity },\n          });\n        } else {\n          map.setLayoutProperty(arrowLayerId, \"symbol-spacing\", directionSpacing);\n          map.setLayoutProperty(arrowLayerId, \"icon-rotate\", direction === \"backward\" ? 180 : 0);\n          map.setPaintProperty(arrowLayerId, \"icon-opacity\", opacity);\n        }\n      } catch {\n        // style mid-reload; `styledata` re-runs this\n      }\n    };\n\n    register();\n    // A theme swap calls setStyle, which drops every style image AND every layer\n    // this component added.\n    const onStyleData = () => {\n      if (!cancelled) register();\n    };\n    map.on(\"styledata\", onStyleData);\n\n    return () => {\n      cancelled = true;\n      map.off(\"styledata\", onStyleData);\n      try {\n        if (map.getLayer(arrowLayerId)) map.removeLayer(arrowLayerId);\n        if (map.hasImage(arrowImageId)) map.removeImage(arrowImageId);\n      } catch {\n        // style may be mid-reload\n      }\n    };\n  }, [\n    isLoaded,\n    map,\n    direction,\n    directionSpacing,\n    lineColor,\n    opacity,\n    sourceId,\n    arrowLayerId,\n    arrowImageId,\n  ]);\n\n  // Sync paint when styling (or the resolved theme color) changes.\n  useEffect(() => {\n    if (!isLoaded || !map || !map.getLayer(layerId)) return;\n\n    map.setPaintProperty(layerId, \"line-color\", lineColor);\n    map.setPaintProperty(layerId, \"line-width\", width);\n    map.setPaintProperty(layerId, \"line-opacity\", opacity);\n    map.setPaintProperty(layerId, \"line-dasharray\", dashArray);\n  }, [isLoaded, map, layerId, lineColor, width, opacity, dashArray]);\n\n  // Handle click and hover events.\n  useEffect(() => {\n    if (!isLoaded || !map || !interactive) return;\n\n    const handleClick = () => {\n      onClick?.();\n    };\n    const handleMouseEnter = () => {\n      map.getCanvas().style.cursor = \"pointer\";\n      onMouseEnter?.();\n    };\n    const handleMouseLeave = () => {\n      map.getCanvas().style.cursor = \"\";\n      onMouseLeave?.();\n    };\n\n    map.on(\"click\", layerId, handleClick);\n    map.on(\"mouseenter\", layerId, handleMouseEnter);\n    map.on(\"mouseleave\", layerId, handleMouseLeave);\n\n    return () => {\n      map.off(\"click\", layerId, handleClick);\n      map.off(\"mouseenter\", layerId, handleMouseEnter);\n      map.off(\"mouseleave\", layerId, handleMouseLeave);\n    };\n  }, [isLoaded, map, layerId, onClick, onMouseEnter, onMouseLeave, interactive]);\n\n  return null;\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-D2RCPTRO.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-D2RCPTRO.js.map

package/dist/chunk-D2RCPTRO.js.map

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

package/dist/chunk-DTV7JZVN.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-DTV7JZVN.js.map

package/dist/chunk-DTV7JZVN.js.map

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

package/dist/chunk-E65Z3MSV.js

@@ -0,0 +1,80 @@
+"use client";
+
+// src/lib/plan-status.ts
+import { STATUS_TONE_ICONS } from "@elabs-ai/components-ui";
+var PLAN_STATUSES = ["free", "occupied", "warning", "down"];
+var DASH_ARRAYS = {
+  solid: void 0,
+  dotted: [1, 1.5],
+  dashed: [3, 2],
+  "dot-dash": [4, 1.5, 1, 1.5]
+};
+var PLAN_STATUS_ENCODING = Object.freeze(
+  {
+    free: {
+      tone: "success",
+      pattern: "none",
+      dash: "solid",
+      dashArray: DASH_ARRAYS.solid,
+      icon: void 0,
+      glyph: "none",
+      colorToken: "--success",
+      markClass: "bg-success",
+      textClass: "text-success-text"
+    },
+    occupied: {
+      tone: "neutral",
+      pattern: "diagonal",
+      dash: "dotted",
+      dashArray: DASH_ARRAYS.dotted,
+      icon: void 0,
+      glyph: "none",
+      colorToken: "--muted-foreground",
+      markClass: "bg-muted-foreground",
+      textClass: "text-muted-foreground"
+    },
+    warning: {
+      tone: "warning",
+      pattern: "cross",
+      dash: "dashed",
+      dashArray: DASH_ARRAYS.dashed,
+      icon: STATUS_TONE_ICONS.warning,
+      glyph: "clock",
+      colorToken: "--warning",
+      markClass: "bg-warning",
+      textClass: "text-warning-text"
+    },
+    down: {
+      tone: "destructive",
+      pattern: "dense",
+      dash: "dot-dash",
+      dashArray: DASH_ARRAYS["dot-dash"],
+      icon: STATUS_TONE_ICONS.destructive,
+      glyph: "alert",
+      colorToken: "--destructive",
+      markClass: "bg-destructive",
+      textClass: "text-destructive-text"
+    }
+  }
+);
+var PLAN_FILL_OPACITY = Object.freeze({
+  rest: 0.16,
+  hover: 0.28,
+  selected: 0.36
+});
+function planStatusMatch(property, value, fallback) {
+  const expression = ["match", ["get", property]];
+  for (const status of PLAN_STATUSES) {
+    expression.push(status, value(PLAN_STATUS_ENCODING[status], status));
+  }
+  expression.push(fallback ?? value(PLAN_STATUS_ENCODING.occupied, "occupied"));
+  return expression;
+}
+
+export {
+  PLAN_STATUSES,
+  PLAN_STATUS_ENCODING,
+  PLAN_FILL_OPACITY,
+  planStatusMatch
+};
+//# sourceMappingURL=chunk-E65Z3MSV.js.map

package/dist/chunk-E65Z3MSV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/plan-status.ts"],"sourcesContent":["/**\n * Status on a plan — free desk, busy machine, line in alarm — without leaning on\n * colour (WCAG 1.4.1).\n *\n * The MapLibre style spec decides how the channels split, and the split is not a\n * matter of taste: `fill-pattern` and `line-dasharray` accept `zoom` and\n * `feature` expressions but **not `feature-state`**, while `fill-color`,\n * `fill-opacity`, `line-color` and `line-width` accept all three. So:\n *\n * - **status** rides feature PROPERTIES — pattern and dash, which cannot read\n *   feature-state anyway;\n * - **hover and selection** ride feature STATE — opacity, width and colour.\n *\n * The two can therefore never collide, and selection must never be expressed as\n * a dash change: a selected free room would read as an occupied one.\n *\n * In greyscale each status still differs by four textures, four outline styles\n * and, on the two states that must never be confused, a glyph — with the legend\n * and the table repeating all of it as words.\n */\nimport { STATUS_TONE_ICONS } from \"@elabs-ai/components-ui\";\nimport type { LucideIcon } from \"lucide-react\";\n\n/** What a region on a plan can be. */\nexport type PlanStatus = \"free\" | \"occupied\" | \"warning\" | \"down\";\n\n/** Every {@link PlanStatus}, in legend order. */\nexport const PLAN_STATUSES: readonly PlanStatus[] = [\"free\", \"occupied\", \"warning\", \"down\"];\n\n/** The generated hatch tile a status is textured with — see `lib/plan-patterns.ts`. */\nexport type PlanPatternKind = \"none\" | \"diagonal\" | \"cross\" | \"dense\";\n\n/** The outline style a status is drawn with: the second non-colour channel. */\nexport type PlanDash = \"solid\" | \"dotted\" | \"dashed\" | \"dot-dash\";\n\n/** MapLibre `line-dasharray` values, in line widths. `undefined` means solid. */\nconst DASH_ARRAYS: Record<PlanDash, number[] | undefined> = {\n  solid: undefined,\n  dotted: [1, 1.5],\n  dashed: [3, 2],\n  \"dot-dash\": [4, 1.5, 1, 1.5],\n};\n\nexport interface PlanStatusEncoding {\n  /** The status tone, for the token rungs below. */\n  tone: \"success\" | \"neutral\" | \"warning\" | \"destructive\";\n  /** The hatch tile registered with `map.addImage`. */\n  pattern: PlanPatternKind;\n  /** The outline style. */\n  dash: PlanDash;\n  /** `line-dasharray` for the outline; `undefined` keeps it solid. */\n  dashArray: number[] | undefined;\n  /**\n   * A glyph, on the two states that must never be confused with a working one.\n   * `undefined` elsewhere: a glyph on every neutral region is noise.\n   */\n  icon: LucideIcon | undefined;\n  /** Stable glyph name, so a test can assert the four states read apart. */\n  glyph: \"none\" | \"clock\" | \"alert\";\n  /** The token the shape's own ink resolves from (the ≥3:1 mark rung). */\n  colorToken: string;\n  /** Mark (fill-rung) utility, for a legend swatch. */\n  markClass: string;\n  /** Ink (`-text` rung) utility, for coloured text on an ordinary surface. */\n  textClass: string;\n}\n\n/**\n * The one table every plan surface reads status from — map paint, legend, table\n * and readout alike. Frozen, so a surface cannot quietly drift from the others.\n */\nexport const PLAN_STATUS_ENCODING: Readonly<Record<PlanStatus, PlanStatusEncoding>> = Object.freeze(\n  {\n    free: {\n      tone: \"success\",\n      pattern: \"none\",\n      dash: \"solid\",\n      dashArray: DASH_ARRAYS.solid,\n      icon: undefined,\n      glyph: \"none\",\n      colorToken: \"--success\",\n      markClass: \"bg-success\",\n      textClass: \"text-success-text\",\n    },\n    occupied: {\n      tone: \"neutral\",\n      pattern: \"diagonal\",\n      dash: \"dotted\",\n      dashArray: DASH_ARRAYS.dotted,\n      icon: undefined,\n      glyph: \"none\",\n      colorToken: \"--muted-foreground\",\n      markClass: \"bg-muted-foreground\",\n      textClass: \"text-muted-foreground\",\n    },\n    warning: {\n      tone: \"warning\",\n      pattern: \"cross\",\n      dash: \"dashed\",\n      dashArray: DASH_ARRAYS.dashed,\n      icon: STATUS_TONE_ICONS.warning,\n      glyph: \"clock\",\n      colorToken: \"--warning\",\n      markClass: \"bg-warning\",\n      textClass: \"text-warning-text\",\n    },\n    down: {\n      tone: \"destructive\",\n      pattern: \"dense\",\n      dash: \"dot-dash\",\n      dashArray: DASH_ARRAYS[\"dot-dash\"],\n      icon: STATUS_TONE_ICONS.destructive,\n      glyph: \"alert\",\n      colorToken: \"--destructive\",\n      markClass: \"bg-destructive\",\n      textClass: \"text-destructive-text\",\n    },\n  },\n);\n\n/** Fill opacity per interaction state — the feature-state channel, in one place. */\nexport const PLAN_FILL_OPACITY = Object.freeze({\n  rest: 0.16,\n  hover: 0.28,\n  selected: 0.36,\n});\n\n/**\n * A MapLibre `match` expression over a status property, so one paint value can\n * serve every status without a layer per status.\n *\n * ```ts\n * \"line-dasharray\": planStatusMatch(\"status\", (encoding) => encoding.dashArray ?? [1, 0])\n * ```\n */\nexport function planStatusMatch<T>(\n  property: string,\n  value: (encoding: PlanStatusEncoding, status: PlanStatus) => T,\n  fallback?: T,\n): unknown[] {\n  const expression: unknown[] = [\"match\", [\"get\", property]];\n  for (const status of PLAN_STATUSES) {\n    expression.push(status, value(PLAN_STATUS_ENCODING[status], status));\n  }\n  expression.push(fallback ?? value(PLAN_STATUS_ENCODING.occupied, \"occupied\"));\n  return expression;\n}\n"],"mappings":";;;AAoBA,SAAS,yBAAyB;AAO3B,IAAM,gBAAuC,CAAC,QAAQ,YAAY,WAAW,MAAM;AAS1F,IAAM,cAAsD;AAAA,EAC1D,OAAO;AAAA,EACP,QAAQ,CAAC,GAAG,GAAG;AAAA,EACf,QAAQ,CAAC,GAAG,CAAC;AAAA,EACb,YAAY,CAAC,GAAG,KAAK,GAAG,GAAG;AAC7B;AA8BO,IAAM,uBAAyE,OAAO;AAAA,EAC3F;AAAA,IACE,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW,YAAY;AAAA,MACvB,MAAM;AAAA,MACN,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,WAAW;AAAA,IACb;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW,YAAY;AAAA,MACvB,MAAM;AAAA,MACN,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,WAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW,YAAY;AAAA,MACvB,MAAM,kBAAkB;AAAA,MACxB,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,WAAW;AAAA,IACb;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW,YAAY,UAAU;AAAA,MACjC,MAAM,kBAAkB;AAAA,MACxB,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,WAAW;AAAA,IACb;AAAA,EACF;AACF;AAGO,IAAM,oBAAoB,OAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AACZ,CAAC;AAUM,SAAS,gBACd,UACA,OACA,UACW;AACX,QAAM,aAAwB,CAAC,SAAS,CAAC,OAAO,QAAQ,CAAC;AACzD,aAAW,UAAU,eAAe;AAClC,eAAW,KAAK,QAAQ,MAAM,qBAAqB,MAAM,GAAG,MAAM,CAAC;AAAA,EACrE;AACA,aAAW,KAAK,YAAY,MAAM,qBAAqB,UAAU,UAAU,CAAC;AAC5E,SAAO;AACT;","names":[]}

package/dist/chunk-E7VPNINZ.js

@@ -0,0 +1,70 @@
+"use client";
+import {
+  MAP_CORNER_CLASSES
+} from "./chunk-GWULZOMW.js";
+import {
+  useMap
+} from "./chunk-JYFERXZT.js";
+
+// src/map-north-arrow/map-north-arrow.tsx
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NORTH_UP_TOLERANCE = 0.5;
+function normalizeBearing(bearing) {
+  const b = (bearing % 360 + 360) % 360;
+  return b > 180 ? b - 360 : b;
+}
+var MapNorthArrow = forwardRef(function MapNorthArrow2({ position = "top-left", label = "North", className, ...props }, ref) {
+  const { map } = useMap();
+  const glyphRef = useRef(null);
+  const [rotated, setRotated] = useState(false);
+  useEffect(() => {
+    if (!map) return void 0;
+    const update = () => {
+      const bearing = normalizeBearing(map.getBearing());
+      setRotated(Math.abs(bearing) > NORTH_UP_TOLERANCE);
+      if (glyphRef.current) glyphRef.current.style.transform = `rotate(${-bearing}deg)`;
+    };
+    update();
+    map.on("rotate", update);
+    return () => {
+      map.off("rotate", update);
+    };
+  }, [map]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "img",
+      "aria-label": label,
+      "data-slot": "map-north-arrow",
+      hidden: !rotated,
+      className: cn(
+        "pointer-events-none absolute z-10 flex size-9 items-center justify-center rounded-full bg-background/80 text-foreground",
+        MAP_CORNER_CLASSES[position],
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxs("svg", { ref: glyphRef, viewBox: "0 0 24 24", "aria-hidden": "true", className: "size-7", children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 3 L16 13 L12 11 Z", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 3 L8 13 L12 11 Z", fill: "currentColor", opacity: 0.55 }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M9.5 21 V15.5 L14.5 21 V15.5",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 1.5,
+            strokeLinejoin: "round"
+          }
+        )
+      ] })
+    }
+  );
+});
+
+export {
+  MapNorthArrow
+};
+//# sourceMappingURL=chunk-E7VPNINZ.js.map

package/dist/chunk-E7VPNINZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/map-north-arrow/map-north-arrow.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useEffect, useRef, useState, type HTMLAttributes } from \"react\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\n\nimport { useMap } from \"../map-canvas/map-context\";\nimport { MAP_CORNER_CLASSES, type MapCorner } from \"../map-legend/map-corner\";\n\n/** Below this rotation (degrees) the map counts as north-up and the arrow stays away. */\nconst NORTH_UP_TOLERANCE = 0.5;\n\n/** A bearing folded into (-180, 180]. */\nfunction normalizeBearing(bearing: number): number {\n  const b = ((bearing % 360) + 360) % 360;\n  return b > 180 ? b - 360 : b;\n}\n\nexport interface MapNorthArrowProps extends HTMLAttributes<HTMLDivElement> {\n  /** Corner of the map (default `\"top-left\"`). */\n  position?: MapCorner;\n  /** The arrow's accessible name (default `\"North\"`). */\n  label?: string;\n}\n\n/**\n * A north arrow that appears only while the map is rotated (bearing ≠ 0) and\n * turns with it — a north-up map needs none. Static furniture, not a control:\n * `<MapControls showCompass>` is the button that resets the bearing. Render\n * inside `<MapCanvas>`.\n */\nexport const MapNorthArrow = forwardRef<HTMLDivElement, MapNorthArrowProps>(function MapNorthArrow(\n  { position = \"top-left\", label = \"North\", className, ...props },\n  ref,\n) {\n  const { map } = useMap();\n  const glyphRef = useRef<SVGSVGElement>(null);\n  const [rotated, setRotated] = useState(false);\n\n  useEffect(() => {\n    if (!map) return undefined;\n    const update = () => {\n      const bearing = normalizeBearing(map.getBearing());\n      setRotated(Math.abs(bearing) > NORTH_UP_TOLERANCE);\n      if (glyphRef.current) glyphRef.current.style.transform = `rotate(${-bearing}deg)`;\n    };\n    update();\n    map.on(\"rotate\", update);\n    return () => {\n      map.off(\"rotate\", update);\n    };\n  }, [map]);\n\n  return (\n    <div\n      ref={ref}\n      role=\"img\"\n      aria-label={label}\n      data-slot=\"map-north-arrow\"\n      hidden={!rotated}\n      className={cn(\n        \"pointer-events-none absolute z-10 flex size-9 items-center justify-center rounded-full bg-background/80 text-foreground\",\n        MAP_CORNER_CLASSES[position],\n        className,\n      )}\n      {...props}\n    >\n      <svg ref={glyphRef} viewBox=\"0 0 24 24\" aria-hidden=\"true\" className=\"size-7\">\n        {/* The arrow: dark north half, hollow south half. */}\n        <path d=\"M12 3 L16 13 L12 11 Z\" fill=\"currentColor\" />\n        <path d=\"M12 3 L8 13 L12 11 Z\" fill=\"currentColor\" opacity={0.55} />\n        {/* The cartographic \"N\", drawn as strokes so it is not locale text. */}\n        <path\n          d=\"M9.5 21 V15.5 L14.5 21 V15.5\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={1.5}\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;AAEA,SAAS,YAAY,WAAW,QAAQ,gBAAqC;AAC7E,SAAS,UAAU;AA+Db,SAEE,KAFF;AAzDN,IAAM,qBAAqB;AAG3B,SAAS,iBAAiB,SAAyB;AACjD,QAAM,KAAM,UAAU,MAAO,OAAO;AACpC,SAAO,IAAI,MAAM,IAAI,MAAM;AAC7B;AAeO,IAAM,gBAAgB,WAA+C,SAASA,eACnF,EAAE,WAAW,YAAY,QAAQ,SAAS,WAAW,GAAG,MAAM,GAC9D,KACA;AACA,QAAM,EAAE,IAAI,IAAI,OAAO;AACvB,QAAM,WAAW,OAAsB,IAAI;AAC3C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,YAAU,MAAM;AACd,QAAI,CAAC,IAAK,QAAO;AACjB,UAAM,SAAS,MAAM;AACnB,YAAM,UAAU,iBAAiB,IAAI,WAAW,CAAC;AACjD,iBAAW,KAAK,IAAI,OAAO,IAAI,kBAAkB;AACjD,UAAI,SAAS,QAAS,UAAS,QAAQ,MAAM,YAAY,UAAU,CAAC,OAAO;AAAA,IAC7E;AACA,WAAO;AACP,QAAI,GAAG,UAAU,MAAM;AACvB,WAAO,MAAM;AACX,UAAI,IAAI,UAAU,MAAM;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAER,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,aAAU;AAAA,MACV,QAAQ,CAAC;AAAA,MACT,WAAW;AAAA,QACT;AAAA,QACA,mBAAmB,QAAQ;AAAA,QAC3B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,+BAAC,SAAI,KAAK,UAAU,SAAQ,aAAY,eAAY,QAAO,WAAU,UAEnE;AAAA,4BAAC,UAAK,GAAE,yBAAwB,MAAK,gBAAe;AAAA,QACpD,oBAAC,UAAK,GAAE,wBAAuB,MAAK,gBAAe,SAAS,MAAM;AAAA,QAElE;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA,YACL,QAAO;AAAA,YACP,aAAa;AAAA,YACb,gBAAe;AAAA;AAAA,QACjB;AAAA,SACF;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["MapNorthArrow"]}

package/dist/chunk-FHV5IA6N.js

@@ -0,0 +1,100 @@
+"use client";
+import {
+  PLAN_STATUSES,
+  PLAN_STATUS_ENCODING
+} from "./chunk-E65Z3MSV.js";
+
+// src/lib/plan-patterns.ts
+import { useEffect } from "react";
+var TILE = 16;
+var INK_ALPHA = 0.55;
+function planPatternImageId(kind) {
+  return `plan-pattern-${kind}`;
+}
+var OVERSHOOT = TILE / 2;
+function RISING(spacing) {
+  const lines = [];
+  for (let c = 0; c <= TILE * 2; c += spacing) {
+    lines.push([-OVERSHOOT, c + OVERSHOOT, TILE + OVERSHOOT, c - TILE - OVERSHOOT]);
+  }
+  return lines;
+}
+function FALLING(spacing) {
+  return RISING(spacing).map(
+    ([x1, y1, x2, y2]) => [x1, TILE - y1, x2, TILE - y2]
+  );
+}
+function strokeLines(context, lines, width) {
+  context.lineWidth = width;
+  context.lineCap = "square";
+  for (const [x1, y1, x2, y2] of lines) {
+    context.beginPath();
+    context.moveTo(x1, y1);
+    context.lineTo(x2, y2);
+    context.stroke();
+  }
+}
+function createPlanPatternTile(kind, ink) {
+  if (kind === "none") return null;
+  if (typeof document === "undefined") return null;
+  const canvas = document.createElement("canvas");
+  canvas.width = TILE;
+  canvas.height = TILE;
+  const context = canvas.getContext("2d");
+  if (!context) return null;
+  context.clearRect(0, 0, TILE, TILE);
+  context.globalAlpha = INK_ALPHA;
+  context.strokeStyle = ink;
+  if (kind === "diagonal") {
+    strokeLines(context, RISING(TILE), 1.5);
+  } else if (kind === "cross") {
+    strokeLines(context, [...RISING(TILE), ...FALLING(TILE)], 1.25);
+  } else {
+    strokeLines(context, RISING(TILE / 2), 1.25);
+  }
+  return canvas;
+}
+function usedPatternKinds() {
+  const kinds = /* @__PURE__ */ new Set();
+  for (const status of PLAN_STATUSES) kinds.add(PLAN_STATUS_ENCODING[status].pattern);
+  kinds.delete("none");
+  return [...kinds];
+}
+function usePlanPatterns(map, isLoaded, ink) {
+  useEffect(() => {
+    if (!map || !isLoaded) return;
+    const register = () => {
+      for (const kind of usedPatternKinds()) {
+        const tile = createPlanPatternTile(kind, ink);
+        if (!tile) continue;
+        const id = planPatternImageId(kind);
+        const image = {
+          width: tile.width,
+          height: tile.height,
+          data: tile.getContext("2d")?.getImageData(0, 0, tile.width, tile.height).data
+        };
+        if (!image.data) continue;
+        try {
+          if (map.hasImage(id)) {
+            map.updateImage(id, image);
+          } else {
+            map.addImage(id, image, { pixelRatio: 2 });
+          }
+        } catch {
+        }
+      }
+    };
+    register();
+    map.on("styledata", register);
+    return () => {
+      map.off("styledata", register);
+    };
+  }, [map, isLoaded, ink]);
+}
+
+export {
+  planPatternImageId,
+  createPlanPatternTile,
+  usePlanPatterns
+};
+//# sourceMappingURL=chunk-FHV5IA6N.js.map

package/dist/chunk-FHV5IA6N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/plan-patterns.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\nimport type MapLibreGL from \"maplibre-gl\";\n\nimport { PLAN_STATUSES, PLAN_STATUS_ENCODING, type PlanPatternKind } from \"./plan-status\";\n\n/**\n * Seamless hatch tiles for the status channel, generated on a canvas and handed\n * to `map.addImage`. Generated rather than fetched: a blank plan style has no\n * sprite and no glyph endpoint, and a texture that needs the network is a\n * texture that sometimes is not there.\n *\n * The tile geometry mirrors `SeriesPatternKind` in\n * `packages/charts/src/charts/series-pattern.tsx`, so a factory plan and a\n * chart of the same data are textured alike. It is deliberately a copy: the\n * one-way dependency graph forbids maps importing charts.\n */\n\n/** Tile edge, in px. Small enough to read at fit zoom, large enough not to moiré. */\nconst TILE = 16;\n/** Ink alpha. The pattern is a texture over a tone wash, not a second fill. */\nconst INK_ALPHA = 0.55;\n\n/** Image ids are stable and namespaced, so two plans on one map cannot collide. */\nexport function planPatternImageId(kind: PlanPatternKind): string {\n  return `plan-pattern-${kind}`;\n}\n\n/**\n * A hatch at `spacing` px, as segments that overshoot the tile on both ends.\n *\n * The lines are laid out so the set repeats under a TILE-sized shift in either\n * axis — that, not the overshoot alone, is what makes the tile seamless. Each\n * line is written as the two points where it meets the tile's own axes, so one\n * of them always crosses the tile's middle rather than clipping a corner: a\n * corner-only line paints nothing and leaves the status untextured.\n *\n * `RISING` runs bottom-left to top-right (canvas y grows downward, so these are\n * the `x + y = c` lines); `FALLING` is its mirror, and the two together are the\n * crosshatch.\n */\nconst OVERSHOOT = TILE / 2;\n\nfunction RISING(spacing: number): [number, number, number, number][] {\n  const lines: [number, number, number, number][] = [];\n  for (let c = 0; c <= TILE * 2; c += spacing) {\n    lines.push([-OVERSHOOT, c + OVERSHOOT, TILE + OVERSHOOT, c - TILE - OVERSHOOT]);\n  }\n  return lines;\n}\n\nfunction FALLING(spacing: number): [number, number, number, number][] {\n  return RISING(spacing).map(\n    ([x1, y1, x2, y2]) => [x1, TILE - y1, x2, TILE - y2] as [number, number, number, number],\n  );\n}\n\nfunction strokeLines(\n  context: CanvasRenderingContext2D,\n  lines: [number, number, number, number][],\n  width: number,\n) {\n  context.lineWidth = width;\n  context.lineCap = \"square\";\n  for (const [x1, y1, x2, y2] of lines) {\n    context.beginPath();\n    context.moveTo(x1, y1);\n    context.lineTo(x2, y2);\n    context.stroke();\n  }\n}\n\n/**\n * Draw one seamless tile. Returns `null` for `\"none\"`, and for any environment\n * with no 2D context (jsdom) — the dash channel then carries the meaning alone,\n * which is why status has two non-colour channels rather than one.\n */\nexport function createPlanPatternTile(\n  kind: PlanPatternKind,\n  ink: string,\n): HTMLCanvasElement | null {\n  if (kind === \"none\") return null;\n  if (typeof document === \"undefined\") return null;\n\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = TILE;\n  canvas.height = TILE;\n  const context = canvas.getContext(\"2d\");\n  if (!context) return null;\n\n  context.clearRect(0, 0, TILE, TILE);\n  context.globalAlpha = INK_ALPHA;\n  context.strokeStyle = ink;\n\n  if (kind === \"diagonal\") {\n    strokeLines(context, RISING(TILE), 1.5);\n  } else if (kind === \"cross\") {\n    strokeLines(context, [...RISING(TILE), ...FALLING(TILE)], 1.25);\n  } else {\n    // dense: half the spacing of `diagonal`, so the two never read alike.\n    strokeLines(context, RISING(TILE / 2), 1.25);\n  }\n\n  return canvas;\n}\n\n/** Every pattern kind the status table uses, deduplicated. */\nfunction usedPatternKinds(): PlanPatternKind[] {\n  const kinds = new Set<PlanPatternKind>();\n  for (const status of PLAN_STATUSES) kinds.add(PLAN_STATUS_ENCODING[status].pattern);\n  kinds.delete(\"none\");\n  return [...kinds];\n}\n\n/**\n * Register (and re-register) the status textures on a map.\n *\n * Re-registration is not optional: `map.setStyle` — which a theme swap performs —\n * drops every image the style holds, and a `fill-pattern` naming a missing image\n * renders nothing at all. So the images are (re)added on `styledata` as well as\n * whenever the ink changes.\n *\n * @param ink The colour to draw the hatch in, already resolved from a token.\n */\nexport function usePlanPatterns(map: MapLibreGL.Map | null, isLoaded: boolean, ink: string) {\n  useEffect(() => {\n    if (!map || !isLoaded) return;\n\n    const register = () => {\n      for (const kind of usedPatternKinds()) {\n        const tile = createPlanPatternTile(kind, ink);\n        if (!tile) continue;\n        const id = planPatternImageId(kind);\n        const image = {\n          width: tile.width,\n          height: tile.height,\n          data: tile.getContext(\"2d\")?.getImageData(0, 0, tile.width, tile.height).data,\n        };\n        if (!image.data) continue;\n        try {\n          if (map.hasImage(id)) {\n            map.updateImage(id, image as unknown as ImageData);\n          } else {\n            map.addImage(id, image as unknown as ImageData, { pixelRatio: 2 });\n          }\n        } catch {\n          // style mid-reload; the `styledata` handler below re-runs this\n        }\n      }\n    };\n\n    register();\n    map.on(\"styledata\", register);\n\n    return () => {\n      map.off(\"styledata\", register);\n    };\n  }, [map, isLoaded, ink]);\n}\n"],"mappings":"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","names":[]}