@k2b/ui 0.30.0 → 0.32.0

package/dist/browser/content/MapViewFrame.js

@@ -0,0 +1,395 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-map-view__fit><svg class=k2b-map-view__geometry preserveAspectRatio=none overflow=visible aria-hidden=true><!$><!/><!$><!/><!$><!/></svg><!$><!/><div class=k2b-map-view__pins role=group>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<svg><path class=k2b-map-view__area vector-effect=non-scaling-stroke></svg>`, false, true, false),
+  _tmpl$3 = /*#__PURE__*/_$template(`<svg><path class=k2b-map-view__casing vector-effect=non-scaling-stroke></svg>`, false, true, false),
+  _tmpl$4 = /*#__PURE__*/_$template(`<svg><g class=k2b-map-view__line><!$><!/><path class=k2b-map-view__stroke vector-effect=non-scaling-stroke></svg>`, false, true, false),
+  _tmpl$5 = /*#__PURE__*/_$template(`<svg><circle class=k2b-map-view__accuracy vector-effect=non-scaling-stroke></svg>`, false, true, false),
+  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-map-view__me role=img>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<span class=k2b-map-view__pin role=img><span aria-hidden=true>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<button type=button class=k2b-map-view__pin><span aria-hidden=true>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-map-view__scale><span></span><div>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-map-view__foot-row><!$><!/><div class=k2b-map-view__attribution>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div data-state=static role=region><span class=k2b-sr-only></span><!$><!/><div class=k2b-map-view__foot>`);
+import { createMemo, For, Show } from "solid-js";
+import { DEFAULT_PADDING, EARTH_CIRCUMFERENCE, isStop, linePoints, mapFrame, pinHitRadii, pinOffsets, projectPoint, scaleBar, sortMarkers, unprojectPoint } from "./map-view-geometry";
+import { useMapViewMessages } from "./map-view-messages";
+const S = 1e6;
+export const mapNumber = value => String(Number(value.toFixed(6)));
+export const selectedMarker = (markers, selectedId) => selectedId !== undefined ? markers.find(marker => marker.id === selectedId) : markers.find(marker => marker.selected);
+
+/** The CSS form of fitCamera's width rule, so the server lays out exactly what MapLibre shows. */
+const fittedWidth = (frame, padding) => `max(min(100% - ${2 * padding}px, ${frame.referenceWidth}px), ${frame.minWidth}px)`;
+export function frameStyle(frame, padding) {
+  return {
+    left: "50%",
+    top: "50%",
+    width: fittedWidth(frame, padding),
+    "aspect-ratio": `${frame.spanX} / ${frame.spanY}`,
+    transform: "translate(-50%, -50%)"
+  };
+}
+const pointInFrame = (point, frame) => {
+  const p = projectPoint(point);
+  return {
+    x: (p.x - frame.minX) / frame.spanX,
+    y: (p.y - frame.minY) / frame.spanY
+  };
+};
+const positionStyle = (point, frame) => {
+  const p = pointInFrame(point, frame);
+  return {
+    left: `${mapNumber(p.x * 100)}%`,
+    top: `${mapNumber(p.y * 100)}%`
+  };
+};
+const path = (points, frame, closed = false) => points.map((point, index) => {
+  const p = projectPoint(point);
+  return `${index ? "L" : "M"}${mapNumber((p.x - frame.minX) * S)} ${mapNumber((p.y - frame.minY) * S)}`;
+}).join(" ") + (closed && points.length ? " Z" : "");
+export function MapGeometry(props) {
+  const messages = useMapViewMessages();
+  const markers = createMemo(() => sortMarkers(props.markers ?? []));
+  const markerIds = createMemo(() => markers().map(marker => marker.id));
+  const markersById = createMemo(() => new Map(markers().map(marker => [marker.id, marker])));
+  const offsets = createMemo(() => pinOffsets(markers(), props.frame, props.zoomFactor, props.ownLocation?.point));
+  const hitRadii = createMemo(() => pinHitRadii(markers(), props.frame, offsets(), props.zoomFactor));
+  // Input order decides the fallback selection, as in MapView; sorting is only for drawing and keys.
+  const selected = createMemo(() => selectedMarker(props.markers ?? [], props.selectedId));
+  const keydown = (event, id) => {
+    const index = markerIds().indexOf(id);
+    let next;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        next = (index + 1) % markers().length;
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        next = (index + markers().length - 1) % markers().length;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = markers().length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const target = markers()[next];
+    if (target) {
+      event.currentTarget.parentElement?.querySelectorAll(".k2b-map-view__pin")[next]?.focus({
+        preventScroll: true
+      });
+      props.onSelect?.(target.id);
+    }
+  };
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.firstChild,
+      [_el$4, _co$] = _$getNextMarker(_el$3.nextSibling),
+      _el$5 = _el$4.nextSibling,
+      [_el$6, _co$2] = _$getNextMarker(_el$5.nextSibling),
+      _el$7 = _el$6.nextSibling,
+      [_el$8, _co$3] = _$getNextMarker(_el$7.nextSibling),
+      _el$0 = _el$2.nextSibling,
+      [_el$1, _co$4] = _$getNextMarker(_el$0.nextSibling),
+      _el$9 = _el$1.nextSibling;
+    _$insert(_el$2, _$createComponent(For, {
+      get each() {
+        return props.areas;
+      },
+      children: area => (() => {
+        var _el$10 = _$getNextElement(_tmpl$2);
+        _$effect(_p$ => {
+          var _v$4 = area.tone ?? "accent",
+            _v$5 = path(area.polygon, props.frame, true);
+          _v$4 !== _p$.e && _$setAttribute(_el$10, "data-tone", _p$.e = _v$4);
+          _v$5 !== _p$.t && _$setAttribute(_el$10, "d", _p$.t = _v$5);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$10;
+      })()
+    }), _el$4, _co$);
+    _$insert(_el$2, _$createComponent(For, {
+      get each() {
+        return props.lines;
+      },
+      children: line => (() => {
+        var _el$11 = _$getNextElement(_tmpl$4),
+          _el$14 = _el$11.firstChild,
+          [_el$15, _co$5] = _$getNextMarker(_el$14.nextSibling),
+          _el$13 = _el$15.nextSibling;
+        _$insert(_el$11, _$createComponent(Show, {
+          get when() {
+            return !line.tone || line.tone === "accent" || line.tone === "preview";
+          },
+          get children() {
+            var _el$12 = _$getNextElement(_tmpl$3);
+            _$effect(() => _$setAttribute(_el$12, "d", path(linePoints(line), props.frame)));
+            return _el$12;
+          }
+        }), _el$15, _co$5);
+        _$effect(_p$ => {
+          var _v$6 = line.tone ?? "accent",
+            _v$7 = path(linePoints(line), props.frame);
+          _v$6 !== _p$.e && _$setAttribute(_el$11, "data-tone", _p$.e = _v$6);
+          _v$7 !== _p$.t && _$setAttribute(_el$13, "d", _p$.t = _v$7);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$11;
+      })()
+    }), _el$6, _co$2);
+    _$insert(_el$2, _$createComponent(Show, {
+      get when() {
+        return props.ownLocation;
+      },
+      children: location => {
+        const p = () => projectPoint(location().point);
+        return (() => {
+          var _el$16 = _$getNextElement(_tmpl$5);
+          _$effect(_p$ => {
+            var _v$8 = mapNumber((p().x - props.frame.minX) * S),
+              _v$9 = mapNumber((p().y - props.frame.minY) * S),
+              _v$0 = mapNumber((location().accuracyMeters ?? 0) / (EARTH_CIRCUMFERENCE * Math.cos(location().point.lat * Math.PI / 180)) * S);
+            _v$8 !== _p$.e && _$setAttribute(_el$16, "cx", _p$.e = _v$8);
+            _v$9 !== _p$.t && _$setAttribute(_el$16, "cy", _p$.t = _v$9);
+            _v$0 !== _p$.a && _$setAttribute(_el$16, "r", _p$.a = _v$0);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined
+          });
+          return _el$16;
+        })();
+      }
+    }), _el$8, _co$3);
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return props.ownLocation;
+      },
+      children: location => (() => {
+        var _el$17 = _$getNextElement(_tmpl$6);
+        _$effect(_p$ => {
+          var _v$1 = messages().ownLocation,
+            _v$10 = positionStyle(location().point, props.frame);
+          _v$1 !== _p$.e && _$setAttribute(_el$17, "aria-label", _p$.e = _v$1);
+          _p$.t = _$style(_el$17, _v$10, _p$.t);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$17;
+      })()
+    }), _el$1, _co$4);
+    _$insert(_el$9, _$createComponent(For, {
+      get each() {
+        return markerIds();
+      },
+      children: id => {
+        const marker = () => markersById().get(id);
+        const name = () => marker().mark === undefined ? marker().label : `${marker().mark} ${marker().label}`;
+        const style = () => ({
+          ...positionStyle(marker().point, props.frame),
+          "--k2b-map-pin-dx": `${mapNumber(offsets().get(marker().id)?.dx ?? 0)}px`,
+          "--k2b-map-pin-dy": `${mapNumber(offsets().get(marker().id)?.dy ?? 0)}px`,
+          "--k2b-map-pin-hit": `${mapNumber(hitRadii().get(marker().id) ?? 22)}px`
+        });
+        if (!props.interactive) return (() => {
+          var _el$18 = _$getNextElement(_tmpl$7),
+            _el$19 = _el$18.firstChild;
+          _$insert(_el$19, () => marker().mark);
+          _$effect(_p$ => {
+            var _v$11 = marker().id,
+              _v$12 = marker().tone ?? "accent",
+              _v$13 = isStop(marker()) || undefined,
+              _v$14 = marker().mark === undefined || undefined,
+              _v$15 = selected()?.id === marker().id || undefined,
+              _v$16 = style(),
+              _v$17 = name();
+            _v$11 !== _p$.e && _$setAttribute(_el$18, "data-id", _p$.e = _v$11);
+            _v$12 !== _p$.t && _$setAttribute(_el$18, "data-tone", _p$.t = _v$12);
+            _v$13 !== _p$.a && _$setAttribute(_el$18, "data-stop", _p$.a = _v$13);
+            _v$14 !== _p$.o && _$setAttribute(_el$18, "data-drop", _p$.o = _v$14);
+            _v$15 !== _p$.i && _$setAttribute(_el$18, "data-selected", _p$.i = _v$15);
+            _p$.n = _$style(_el$18, _v$16, _p$.n);
+            _v$17 !== _p$.s && _$setAttribute(_el$18, "aria-label", _p$.s = _v$17);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined,
+            o: undefined,
+            i: undefined,
+            n: undefined,
+            s: undefined
+          });
+          return _el$18;
+        })();
+        return (() => {
+          var _el$20 = _$getNextElement(_tmpl$8),
+            _el$21 = _el$20.firstChild;
+          _el$20.$$click = () => props.onSelect?.(marker().id);
+          _el$20.$$keydown = event => keydown(event, id);
+          _$insert(_el$21, () => marker().mark);
+          _$effect(_p$ => {
+            var _v$18 = marker().id,
+              _v$19 = marker().tone ?? "accent",
+              _v$20 = isStop(marker()) || undefined,
+              _v$21 = marker().mark === undefined || undefined,
+              _v$22 = style(),
+              _v$23 = name(),
+              _v$24 = selected()?.id === marker().id,
+              _v$25 = (selected() ?? markers()[0])?.id === marker().id ? 0 : -1;
+            _v$18 !== _p$.e && _$setAttribute(_el$20, "data-id", _p$.e = _v$18);
+            _v$19 !== _p$.t && _$setAttribute(_el$20, "data-tone", _p$.t = _v$19);
+            _v$20 !== _p$.a && _$setAttribute(_el$20, "data-stop", _p$.a = _v$20);
+            _v$21 !== _p$.o && _$setAttribute(_el$20, "data-drop", _p$.o = _v$21);
+            _p$.i = _$style(_el$20, _v$22, _p$.i);
+            _v$23 !== _p$.n && _$setAttribute(_el$20, "aria-label", _p$.n = _v$23);
+            _v$24 !== _p$.s && _$setAttribute(_el$20, "aria-pressed", _p$.s = _v$24);
+            _v$25 !== _p$.h && _$setAttribute(_el$20, "tabindex", _p$.h = _v$25);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined,
+            o: undefined,
+            i: undefined,
+            n: undefined,
+            s: undefined,
+            h: undefined
+          });
+          _$runHydrationEvents();
+          return _el$20;
+        })();
+      }
+    }));
+    _$effect(_p$ => {
+      var _v$ = props.boxStyle ?? frameStyle(props.frame, props.padding ?? DEFAULT_PADDING),
+        _v$2 = `0 0 ${mapNumber(props.frame.spanX * S)} ${mapNumber(props.frame.spanY * S)}`,
+        _v$3 = messages().pins;
+      _p$.e = _$style(_el$, _v$, _p$.e);
+      _v$2 !== _p$.t && _$setAttribute(_el$2, "viewBox", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute(_el$9, "aria-label", _p$.a = _v$3);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$;
+  })();
+}
+export function referenceScale(frame, padding) {
+  const center = unprojectPoint(frame.minX + frame.spanX / 2, frame.minY + frame.spanY / 2);
+  const spanMeters = frame.spanX * EARTH_CIRCUMFERENCE * Math.cos(center.lat * Math.PI / 180);
+  const bar = scaleBar(spanMeters / frame.referenceWidth);
+  return {
+    label: bar.label,
+    width: `calc(${fittedWidth(frame, padding)} * ${bar.meters / spanMeters})`
+  };
+}
+export function MapScaleBar(props) {
+  return (() => {
+    var _el$22 = _$getNextElement(_tmpl$9),
+      _el$23 = _el$22.firstChild;
+    _$insert(_el$23, () => props.scale.label);
+    _$effect(_$p => _$setStyleProperty(_el$22, "width", props.scale.width));
+    return _el$22;
+  })();
+}
+/** The scale bar and the attribution share the bottom row, so a long attribution wraps before it covers the scale. */
+export function MapFootRow(props) {
+  return (() => {
+    var _el$24 = _$getNextElement(_tmpl$0),
+      _el$26 = _el$24.firstChild,
+      [_el$27, _co$6] = _$getNextMarker(_el$26.nextSibling),
+      _el$25 = _el$27.nextSibling;
+    _$insert(_el$24, _$createComponent(Show, {
+      get when() {
+        return props.scale;
+      },
+      children: scale => _$createComponent(MapScaleBar, {
+        get scale() {
+          return scale();
+        }
+      })
+    }), _el$27, _co$6);
+    _$insert(_el$25, () => props.children);
+    return _el$24;
+  })();
+}
+/** Geometry without a browser, a canvas, or a network dependency; suitable for server rendering and PDF output. */
+export function MapViewFrame(props) {
+  const messages = useMapViewMessages();
+  const frame = createMemo(() => mapFrame(props, props.height, props.padding ?? DEFAULT_PADDING));
+  return (() => {
+    var _el$28 = _$getNextElement(_tmpl$1),
+      _el$29 = _el$28.firstChild,
+      _el$31 = _el$29.nextSibling,
+      [_el$32, _co$7] = _$getNextMarker(_el$31.nextSibling),
+      _el$30 = _el$32.nextSibling;
+    _$insert(_el$29, () => messages().summary({
+      count: props.markers?.length ?? 0
+    }));
+    _$insert(_el$28, _$createComponent(Show, {
+      get when() {
+        return frame();
+      },
+      children: value => _$createComponent(MapGeometry, _$mergeProps(props, {
+        get frame() {
+          return value();
+        }
+      }))
+    }), _el$32, _co$7);
+    _$insert(_el$30, _$createComponent(MapFootRow, {
+      get scale() {
+        return _$memo(() => !!frame())() ? referenceScale(frame(), props.padding ?? DEFAULT_PADDING) : undefined;
+      },
+      get children() {
+        return props.attribution;
+      }
+    }));
+    _$effect(_p$ => {
+      var _v$26 = `k2b-map-view${props.class ? ` ${props.class}` : ""}`,
+        _v$27 = `${props.height}px`,
+        _v$28 = messages().mapLabel;
+      _v$26 !== _p$.e && _$className(_el$28, _p$.e = _v$26);
+      _v$27 !== _p$.t && _$setStyleProperty(_el$28, "height", _p$.t = _v$27);
+      _v$28 !== _p$.a && _$setAttribute(_el$28, "aria-label", _p$.a = _v$28);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$28;
+  })();
+}
+_$delegateEvents(["keydown", "click"]);
+//# sourceMappingURL=MapViewFrame.js.map

package/dist/browser/content/MapViewFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["content/MapViewFrame.tsx"],"sourcesContent":["import { createMemo, For, type JSX, Show } from \"solid-js\";\nimport {\n  DEFAULT_PADDING,\n  EARTH_CIRCUMFERENCE,\n  isStop,\n  linePoints,\n  type MapFrame,\n  mapFrame,\n  pinHitRadii,\n  pinOffsets,\n  projectPoint,\n  scaleBar,\n  sortMarkers,\n  unprojectPoint,\n} from \"./map-view-geometry\";\nimport { useMapViewMessages } from \"./map-view-messages\";\nimport type { MapViewFrameProps, MapViewMarker, MapViewPoint } from \"./map-view-types\";\n\nexport type { MapViewFrameProps } from \"./map-view-types\";\n\nconst S = 1e6;\nexport const mapNumber = (value: number): string => String(Number(value.toFixed(6)));\nexport const selectedMarker = (markers: MapViewMarker[], selectedId?: string): MapViewMarker | undefined =>\n  selectedId !== undefined ? markers.find((marker) => marker.id === selectedId) : markers.find((marker) => marker.selected);\n\n/** The CSS form of fitCamera's width rule, so the server lays out exactly what MapLibre shows. */\nconst fittedWidth = (frame: MapFrame, padding: number): string =>\n  `max(min(100% - ${2 * padding}px, ${frame.referenceWidth}px), ${frame.minWidth}px)`;\n\nexport function frameStyle(frame: MapFrame, padding: number): JSX.CSSProperties {\n  return {\n    left: \"50%\",\n    top: \"50%\",\n    width: fittedWidth(frame, padding),\n    \"aspect-ratio\": `${frame.spanX} / ${frame.spanY}`,\n    transform: \"translate(-50%, -50%)\",\n  };\n}\nconst pointInFrame = (point: MapViewPoint, frame: MapFrame) => {\n  const p = projectPoint(point);\n  return { x: (p.x - frame.minX) / frame.spanX, y: (p.y - frame.minY) / frame.spanY };\n};\nconst positionStyle = (point: MapViewPoint, frame: MapFrame): JSX.CSSProperties => {\n  const p = pointInFrame(point, frame);\n  return { left: `${mapNumber(p.x * 100)}%`, top: `${mapNumber(p.y * 100)}%` };\n};\nconst path = (points: MapViewPoint[], frame: MapFrame, closed = false): string =>\n  points\n    .map((point, index) => {\n      const p = projectPoint(point);\n      return `${index ? \"L\" : \"M\"}${mapNumber((p.x - frame.minX) * S)} ${mapNumber((p.y - frame.minY) * S)}`;\n    })\n    .join(\" \") + (closed && points.length ? \" Z\" : \"\");\n\nexport function MapGeometry(\n  props: MapViewFrameProps & {\n    frame: MapFrame;\n    boxStyle?: JSX.CSSProperties;\n    onSelect?: (id: string) => void;\n    /** Pins are buttons in MapView; the standalone frame draws them as labelled images, never focusable. */\n    interactive?: boolean;\n    /** 2^(live zoom - fitted zoom), so pin separation follows the person's zoom; 1 until then. */\n    zoomFactor?: number;\n  },\n): JSX.Element {\n  const messages = useMapViewMessages();\n  const markers = createMemo(() => sortMarkers(props.markers ?? []));\n  const markerIds = createMemo(() => markers().map((marker) => marker.id));\n  const markersById = createMemo(() => new Map(markers().map((marker) => [marker.id, marker])));\n  const offsets = createMemo(() => pinOffsets(markers(), props.frame, props.zoomFactor, props.ownLocation?.point));\n  const hitRadii = createMemo(() => pinHitRadii(markers(), props.frame, offsets(), props.zoomFactor));\n  // Input order decides the fallback selection, as in MapView; sorting is only for drawing and keys.\n  const selected = createMemo(() => selectedMarker(props.markers ?? [], props.selectedId));\n  const keydown = (event: KeyboardEvent & { currentTarget: HTMLButtonElement }, id: string) => {\n    const index = markerIds().indexOf(id);\n    let next: number;\n    switch (event.key) {\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        next = (index + 1) % markers().length;\n        break;\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        next = (index + markers().length - 1) % markers().length;\n        break;\n      case \"Home\":\n        next = 0;\n        break;\n      case \"End\":\n        next = markers().length - 1;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    event.stopPropagation();\n    const target = markers()[next];\n    if (target) {\n      event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\".k2b-map-view__pin\")[next]?.focus({ preventScroll: true });\n      props.onSelect?.(target.id);\n    }\n  };\n  return (\n    <div class=\"k2b-map-view__fit\" style={props.boxStyle ?? frameStyle(props.frame, props.padding ?? DEFAULT_PADDING)}>\n      <svg\n        class=\"k2b-map-view__geometry\"\n        viewBox={`0 0 ${mapNumber(props.frame.spanX * S)} ${mapNumber(props.frame.spanY * S)}`}\n        preserveAspectRatio=\"none\"\n        overflow=\"visible\"\n        aria-hidden=\"true\"\n      >\n        <For each={props.areas}>\n          {(area) => (\n            <path\n              class=\"k2b-map-view__area\"\n              data-tone={area.tone ?? \"accent\"}\n              d={path(area.polygon, props.frame, true)}\n              vector-effect=\"non-scaling-stroke\"\n            />\n          )}\n        </For>\n        <For each={props.lines}>\n          {(line) => (\n            <g class=\"k2b-map-view__line\" data-tone={line.tone ?? \"accent\"}>\n              <Show when={!line.tone || line.tone === \"accent\" || line.tone === \"preview\"}>\n                <path class=\"k2b-map-view__casing\" d={path(linePoints(line), props.frame)} vector-effect=\"non-scaling-stroke\" />\n              </Show>\n              <path class=\"k2b-map-view__stroke\" d={path(linePoints(line), props.frame)} vector-effect=\"non-scaling-stroke\" />\n            </g>\n          )}\n        </For>\n        <Show when={props.ownLocation}>\n          {(location) => {\n            const p = () => projectPoint(location().point);\n            return (\n              <circle\n                class=\"k2b-map-view__accuracy\"\n                cx={mapNumber((p().x - props.frame.minX) * S)}\n                cy={mapNumber((p().y - props.frame.minY) * S)}\n                r={mapNumber(\n                  ((location().accuracyMeters ?? 0) / (EARTH_CIRCUMFERENCE * Math.cos((location().point.lat * Math.PI) / 180))) * S,\n                )}\n                vector-effect=\"non-scaling-stroke\"\n              />\n            );\n          }}\n        </Show>\n      </svg>\n      <Show when={props.ownLocation}>\n        {(location) => (\n          <span\n            class=\"k2b-map-view__me\"\n            role=\"img\"\n            aria-label={messages().ownLocation}\n            style={positionStyle(location().point, props.frame)}\n          />\n        )}\n      </Show>\n      <div class=\"k2b-map-view__pins\" role=\"group\" aria-label={messages().pins}>\n        <For each={markerIds()}>\n          {(id) => {\n            const marker = () => markersById().get(id)!;\n            const name = () => (marker().mark === undefined ? marker().label : `${marker().mark} ${marker().label}`);\n            const style = () => ({\n              ...positionStyle(marker().point, props.frame),\n              \"--k2b-map-pin-dx\": `${mapNumber(offsets().get(marker().id)?.dx ?? 0)}px`,\n              \"--k2b-map-pin-dy\": `${mapNumber(offsets().get(marker().id)?.dy ?? 0)}px`,\n              \"--k2b-map-pin-hit\": `${mapNumber(hitRadii().get(marker().id) ?? 22)}px`,\n            });\n            if (!props.interactive)\n              return (\n                <span\n                  class=\"k2b-map-view__pin\"\n                  data-id={marker().id}\n                  data-tone={marker().tone ?? \"accent\"}\n                  data-stop={isStop(marker()) || undefined}\n                  data-drop={marker().mark === undefined || undefined}\n                  data-selected={selected()?.id === marker().id || undefined}\n                  style={style()}\n                  role=\"img\"\n                  aria-label={name()}\n                >\n                  <span aria-hidden=\"true\">{marker().mark}</span>\n                </span>\n              );\n            return (\n              <button\n                type=\"button\"\n                class=\"k2b-map-view__pin\"\n                data-id={marker().id}\n                data-tone={marker().tone ?? \"accent\"}\n                data-stop={isStop(marker()) || undefined}\n                data-drop={marker().mark === undefined || undefined}\n                style={style()}\n                aria-label={name()}\n                aria-pressed={selected()?.id === marker().id}\n                tabIndex={(selected() ?? markers()[0])?.id === marker().id ? 0 : -1}\n                onKeyDown={(event) => keydown(event, id)}\n                onClick={() => props.onSelect?.(marker().id)}\n              >\n                <span aria-hidden=\"true\">{marker().mark}</span>\n              </button>\n            );\n          }}\n        </For>\n      </div>\n    </div>\n  );\n}\nexport type MapScale = { label: string; width: string };\nexport function referenceScale(frame: MapFrame, padding: number): MapScale {\n  const center = unprojectPoint(frame.minX + frame.spanX / 2, frame.minY + frame.spanY / 2);\n  const spanMeters = frame.spanX * EARTH_CIRCUMFERENCE * Math.cos((center.lat * Math.PI) / 180);\n  const bar = scaleBar(spanMeters / frame.referenceWidth);\n  return { label: bar.label, width: `calc(${fittedWidth(frame, padding)} * ${bar.meters / spanMeters})` };\n}\nexport function MapScaleBar(props: { scale: MapScale }): JSX.Element {\n  return (\n    <div class=\"k2b-map-view__scale\" style={{ width: props.scale.width }}>\n      <span>{props.scale.label}</span>\n      <div />\n    </div>\n  );\n}\n/** The scale bar and the attribution share the bottom row, so a long attribution wraps before it covers the scale. */\nexport function MapFootRow(props: { scale?: MapScale; children?: JSX.Element }): JSX.Element {\n  return (\n    <div class=\"k2b-map-view__foot-row\">\n      <Show when={props.scale}>{(scale) => <MapScaleBar scale={scale()} />}</Show>\n      <div class=\"k2b-map-view__attribution\">{props.children}</div>\n    </div>\n  );\n}\n/** Geometry without a browser, a canvas, or a network dependency; suitable for server rendering and PDF output. */\nexport function MapViewFrame(props: MapViewFrameProps): JSX.Element {\n  const messages = useMapViewMessages();\n  const frame = createMemo(() => mapFrame(props, props.height, props.padding ?? DEFAULT_PADDING));\n  return (\n    <div\n      class={`k2b-map-view${props.class ? ` ${props.class}` : \"\"}`}\n      style={{ height: `${props.height}px` }}\n      data-state=\"static\"\n      role=\"region\"\n      aria-label={messages().mapLabel}\n    >\n      <span class=\"k2b-sr-only\">{messages().summary({ count: props.markers?.length ?? 0 })}</span>\n      <Show when={frame()}>{(value) => <MapGeometry {...props} frame={value()} />}</Show>\n      <div class=\"k2b-map-view__foot\">\n        <MapFootRow scale={frame() ? referenceScale(frame()!, props.padding ?? DEFAULT_PADDING) : undefined}>\n          {props.attribution}\n        </MapFootRow>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/content/chart-inspection-core.js

@@ -295,7 +295,10 @@ export function createChartInspector(options) {
     if (hit && nodes.includes(hit)) return hit;
     if (seriesChart()) {
       const plot = updatePlotBounds();
-      if (plot && (x < plot.left || x > plot.right || y < plot.top || y > plot.bottom)) return;
+      // SVG transforms and DOM rectangles can round the same painted edge
+      // differently. Keep its half-pixel raster fringe inspectable.
+      const edgeTolerance = 0.5;
+      if (plot && (x < plot.left - edgeTolerance || x > plot.right + edgeTolerance || y < plot.top - edgeTolerance || y > plot.bottom + edgeTolerance)) return;
     }
     // Exact shapes win. A small physical hit radius also reaches tiny or
     // zero-sized marks; distant whitespace leaves the chart unselected.