@elabs-ai/components-maps 4.2.0 → 5.0.0

package/src/map-inset/index.ts

@@ -0,0 +1 @@
+export { MapInset, type MapInsetProps, type MapInsetKind } from "./map-inset";

package/src/map-inset/map-inset.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor } from "storybook/test";
+
+import { MapCanvas } from "../map-canvas";
+import { LOCATOR_BOUNDS } from "../test-utils/locator-fixture";
+import { MapInset } from "./map-inset";
+
+const meta = {
+  title: "Maps/MapInset",
+  component: MapInset,
+  tags: ["autodocs"],
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof MapInset>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * A globe inset marks where the main map sits in the world. It is a second,
+ * static map; the main view shows as a box (or a dot when the view is too
+ * small to draw). It shrinks at `narrow` and never takes more than 40 % of
+ * the map width.
+ */
+export const Default: Story = {
+  render: (args) => (
+    <div className="w-full p-4">
+      <MapCanvas
+        interactive={false}
+        bounds={LOCATOR_BOUNDS}
+        fitBoundsOptions={{ padding: { top: 152, right: 24, bottom: 24, left: 24 } }}
+      >
+        <MapInset {...args} />
+      </MapCanvas>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    if (!canvasElement.querySelector(".maplibregl-canvas")) return;
+    await waitFor(() =>
+      expect(
+        canvasElement.querySelectorAll('[data-slot="map-inset"] .maplibregl-canvas'),
+      ).toHaveLength(1),
+    );
+  },
+};
+
+/** A zoomed-out flat map of the region instead of a globe, bottom-left. */
+export const Region: Story = {
+  args: { kind: "region", position: "bottom-left" },
+  render: Default.render,
+};
+
+/** The remaining corners, at a fixed size. */
+export const Corners: Story = {
+  render: () => (
+    <div className="w-full p-4">
+      <MapCanvas interactive={false} center={[-78.2, 43.7]} zoom={6}>
+        <MapInset position="top-left" size={96} />
+        <MapInset kind="region" position="bottom-right" size={96} />
+      </MapCanvas>
+    </div>
+  ),
+};

package/src/map-inset/map-inset.test.tsx

@@ -0,0 +1,117 @@
+import { act, cleanup, render, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("maplibre-gl", async () => {
+  const { createMaplibreMock } = await import("../test-utils/maplibre-mock");
+  return createMaplibreMock();
+});
+
+import { MockMap, resetMaplibreMock } from "../test-utils/maplibre-mock";
+import { MapCanvas } from "../map-canvas";
+import { MapInset } from "./map-inset";
+
+afterEach(() => {
+  cleanup();
+  resetMaplibreMock();
+});
+
+describe("MapInset", () => {
+  it("renders a second, static globe canvas that marks the main view", async () => {
+    render(
+      <MapCanvas>
+        <MapInset />
+      </MapCanvas>,
+    );
+    await waitFor(() => expect(MockMap.instances).toHaveLength(2));
+    const inset = MockMap.instances[1]!;
+    expect(inset.options.dragPan).toBe(false);
+    expect(inset.options.scrollZoom).toBe(false);
+    await waitFor(() =>
+      expect([...inset.layers.keys()].some((id) => id.includes("map-inset-box"))).toBe(true),
+    );
+    const wrapper = document.querySelector<HTMLElement>('[data-slot="map-inset"]')!;
+    expect(wrapper).toHaveAttribute("aria-hidden", "true");
+    expect(wrapper).toHaveAttribute("data-kind", "globe");
+    expect(wrapper.style.maxWidth).toBe("40%");
+  });
+
+  it("uses a zoomed-out mercator map for a region inset", async () => {
+    render(
+      <MapCanvas zoom={7}>
+        <MapInset kind="region" />
+      </MapCanvas>,
+    );
+    await waitFor(() => expect(MockMap.instances).toHaveLength(2));
+    expect(MockMap.instances[1]!.options.projection).toBeUndefined();
+    expect(document.querySelector('[data-slot="map-inset"]')).toHaveAttribute(
+      "data-kind",
+      "region",
+    );
+  });
+});
+
+describe("MapInset — a locator shape, not a second map (c-6)", () => {
+  /** The globe zoom the inset asked for on its last update. */
+  function lastGlobeZoom(inset: MockMap): number | undefined {
+    const call = [...inset.jumpToCalls].reverse().find((c) => typeof c?.zoom === "number");
+    return call?.zoom as number | undefined;
+  }
+
+  it("fills the frame with the globe at every latitude", async () => {
+    render(
+      <MapCanvas>
+        <MapInset kind="globe" />
+      </MapCanvas>,
+    );
+    await waitFor(() => expect(MockMap.instances).toHaveLength(2));
+    const main = MockMap.instances[0]!;
+    const inset = MockMap.instances[1]!;
+    // jsdom measures nothing: give the inset box the 96 px it has at `narrow`.
+    Object.defineProperty(inset.getContainer(), "clientWidth", { value: 96, configurable: true });
+    act(() => inset.emit("resize"));
+
+    /** Move the MAIN map and wait for the inset to re-frame its globe. */
+    async function globeZoomAt(lng: number, lat: number) {
+      const before = inset.jumpToCalls.length;
+      main.center = { lng, lat };
+      act(() => main.emit("moveend"));
+      await waitFor(() => expect(inset.jumpToCalls.length).toBeGreaterThan(before));
+      return lastGlobeZoom(inset);
+    }
+
+    const atToronto = await globeZoomAt(-79.38, 43.65);
+    const atEquator = await globeZoomAt(9.4, 0); // the Gulf of Guinea
+
+    // Before the fix the zoom carried a Mercator cos(latitude) factor, so the
+    // same globe came out log2(cos 43.65°) = 0.47 zoom levels smaller over
+    // Toronto than over the equator.
+    expect(atToronto).toBeCloseTo(Math.log2((0.9 * 96 * Math.PI) / 512), 6);
+    expect(atToronto).toBeCloseTo(atEquator!, 6);
+  });
+
+  it("drops the basemap's own labels inside the frame by default", async () => {
+    const { rerender } = render(
+      <MapCanvas>
+        <MapInset kind="globe" basemapLabels />
+      </MapCanvas>,
+    );
+    await waitFor(() => expect(MockMap.instances).toHaveLength(2));
+    const inset = MockMap.instances[1]!;
+    inset.addLayer({
+      id: "place-continent",
+      type: "symbol",
+      layout: { "text-field": ["get", "name"] },
+    });
+
+    rerender(
+      <MapCanvas>
+        <MapInset kind="globe" />
+      </MapCanvas>,
+    );
+    await waitFor(() =>
+      expect(inset.getLayoutProperty("place-continent", "visibility")).toBe("none"),
+    );
+    // The MAIN map keeps its own labels — the default is the inset's alone.
+    expect(MockMap.instances[0]!.layoutProperties.size).toBe(0);
+  });
+});

package/src/map-inset/map-inset.tsx

@@ -0,0 +1,264 @@
+"use client";
+
+import { forwardRef, useEffect, useId, useState, type HTMLAttributes } from "react";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+
+import { MapCanvas, type MapCanvasProps } from "../map-canvas/map-canvas";
+import { useMap } from "../map-canvas/map-context";
+import { type MapResponsive, useMapResponsive } from "../lib/use-map-breakpoint";
+import { useTokenColor } from "../lib/use-token-color";
+import { MAP_CORNER_CLASSES, type MapCorner } from "../map-legend/map-corner";
+
+/** A globe with the main view marked, or a zoomed-out regional map around it. */
+export type MapInsetKind = "globe" | "region";
+
+export interface MapInsetProps extends HTMLAttributes<HTMLDivElement> {
+  /** Default `"globe"`. */
+  kind?: MapInsetKind;
+  /** Corner of the main map (default `"top-right"`). */
+  position?: MapCorner;
+  /**
+   * Side length in CSS px, optionally per tier (default
+   * `{ base: 128, narrow: 88 }`). Never more than 40 % of the main map's width.
+   */
+  size?: MapResponsive<number>;
+  /** Basemap styles for the inset (default: the main map's defaults). */
+  styles?: MapCanvasProps["styles"];
+  /** A tile-less inset — pair it with your own layers via `styles`. */
+  blank?: boolean;
+  /**
+   * Draw the basemap's own place labels inside the inset. Default `false`
+   * (c-6): a basemap's labels are sized for a full map, so in an 88–128 px
+   * frame they are sliced mid-word ("EUROP", "AMERIC") and read louder than
+   * the globe they caption. An inset is a locator SHAPE, not a second map.
+   */
+  basemapLabels?: boolean;
+}
+
+/** How many zoom levels a `region` inset sits below the main map. */
+const REGION_ZOOM_OUT = 4;
+/** Below this many px across, the main view is marked as a dot, not a box. */
+const MIN_BOX_PX = 6;
+
+interface MainView {
+  center: [number, number];
+  zoom: number;
+  bounds: [west: number, south: number, east: number, north: number];
+}
+
+function readView(map: NonNullable<ReturnType<typeof useMap>["map"]>): MainView {
+  const center = map.getCenter();
+  const bounds = map.getBounds();
+  return {
+    center: [center.lng, center.lat],
+    zoom: map.getZoom(),
+    bounds: [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()],
+  };
+}
+
+/**
+ * The zoom at which a globe fills ~90 % of a `width`-px box.
+ *
+ * Latitude-independent on purpose (c-6): the old `cos(latitude)` factor is
+ * Mercator's scale correction, and a globe projection does not stretch with
+ * latitude — it only made the sphere shrink the further the main map sat from
+ * the equator (a Toronto locator's globe came out ~28 % narrower than the same
+ * globe over the Gulf of Guinea).
+ */
+function globeZoom(width: number): number {
+  const scale = (0.9 * width * Math.PI) / 512;
+  return Math.log2(Math.max(scale, 1e-3));
+}
+
+/** Inside the inset canvas: follows the main view and marks its extent. */
+function InsetFollower({ view, kind }: { view: MainView; kind: MapInsetKind }) {
+  const { map, isLoaded } = useMap();
+  const id = useId();
+  const sourceId = `map-inset-view-${id}`;
+  const lineId = `map-inset-box-${id}`;
+  const fillId = `map-inset-fill-${id}`;
+  const dotId = `map-inset-dot-${id}`;
+  const accent = useTokenColor("--primary");
+  const surface = useTokenColor("--background");
+
+  // The inset's own box is responsive: `size` resolves at the MAIN map's tier,
+  // which is measured one render after the inset canvas is built, so a narrow
+  // inset is created 128 px wide and settles at 88. A globe is zoomed to fill
+  // its box, so that zoom has to be recomputed when the box changes.
+  const [boxWidth, setBoxWidth] = useState(0);
+  useEffect(() => {
+    if (!map) return undefined;
+    const update = () => setBoxWidth(map.getContainer().clientWidth);
+    update();
+    map.on("resize", update);
+    return () => {
+      map.off("resize", update);
+    };
+  }, [map]);
+
+  useEffect(() => {
+    if (!map || !isLoaded) return undefined;
+    map.addSource(sourceId, { type: "geojson", data: { type: "FeatureCollection", features: [] } });
+    map.addLayer({
+      id: fillId,
+      type: "fill",
+      source: sourceId,
+      filter: ["==", ["geometry-type"], "Polygon"],
+      paint: { "fill-color": accent, "fill-opacity": 0.2 },
+    });
+    map.addLayer({
+      id: lineId,
+      type: "line",
+      source: sourceId,
+      filter: ["==", ["geometry-type"], "Polygon"],
+      paint: { "line-color": accent, "line-width": 1.5 },
+    });
+    map.addLayer({
+      id: dotId,
+      type: "circle",
+      source: sourceId,
+      filter: ["==", ["geometry-type"], "Point"],
+      paint: {
+        "circle-color": accent,
+        "circle-radius": 3.5,
+        "circle-stroke-color": surface,
+        "circle-stroke-width": 1,
+      },
+    });
+    return () => {
+      try {
+        for (const layer of [dotId, lineId, fillId])
+          if (map.getLayer(layer)) map.removeLayer(layer);
+        if (map.getSource(sourceId)) map.removeSource(sourceId);
+      } catch {
+        // style may be mid-reload
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- layers created once per load; colours synced below
+  }, [map, isLoaded]);
+
+  useEffect(() => {
+    if (!map || !isLoaded) return;
+    if (map.getLayer(fillId)) map.setPaintProperty(fillId, "fill-color", accent);
+    if (map.getLayer(lineId)) map.setPaintProperty(lineId, "line-color", accent);
+    if (map.getLayer(dotId)) {
+      map.setPaintProperty(dotId, "circle-color", accent);
+      map.setPaintProperty(dotId, "circle-stroke-color", surface);
+    }
+  }, [map, isLoaded, accent, surface, fillId, lineId, dotId]);
+
+  useEffect(() => {
+    if (!map || !isLoaded) return;
+    const width = boxWidth || map.getContainer().clientWidth;
+    const zoom = kind === "globe" ? globeZoom(width) : Math.max(0, view.zoom - REGION_ZOOM_OUT);
+    map.jumpTo({ center: view.center, zoom });
+
+    const [west, south, east, north] = view.bounds;
+    const a = map.project([west, north]);
+    const b = map.project([east, south]);
+    const small = Math.abs(b.x - a.x) < MIN_BOX_PX && Math.abs(b.y - a.y) < MIN_BOX_PX;
+    const feature: GeoJSON.Feature = small
+      ? { type: "Feature", properties: {}, geometry: { type: "Point", coordinates: view.center } }
+      : {
+          type: "Feature",
+          properties: {},
+          geometry: {
+            type: "Polygon",
+            coordinates: [
+              [
+                [west, south],
+                [east, south],
+                [east, north],
+                [west, north],
+                [west, south],
+              ],
+            ],
+          },
+        };
+    const source = map.getSource(sourceId) as { setData?: (data: unknown) => void } | undefined;
+    source?.setData?.({ type: "FeatureCollection", features: [feature] });
+  }, [map, isLoaded, kind, view, sourceId, boxWidth]);
+
+  return null;
+}
+
+/**
+ * MapInset — a small locator map in a corner of the main map: a globe
+ * (`kind="globe"`) or a zoomed-out regional map (`kind="region"`), with the
+ * main map's current view marked (a box, or a dot when the box would be too
+ * small to see). It is a second, static `<MapCanvas>` that follows the main
+ * view; decorative, so hidden from assistive tech and never a tab stop.
+ * Render inside `<MapCanvas>`.
+ */
+export const MapInset = forwardRef<HTMLDivElement, MapInsetProps>(function MapInset(
+  {
+    kind = "globe",
+    position = "top-right",
+    size: sizeProp = { base: 128, narrow: 88 },
+    styles,
+    blank,
+    basemapLabels = false,
+    className,
+    style,
+    ...props
+  },
+  ref,
+) {
+  const { map } = useMap();
+  const size = Math.max(0, useMapResponsive(sizeProp));
+  const [view, setView] = useState<MainView | null>(() => (map ? readView(map) : null));
+
+  useEffect(() => {
+    if (!map) return undefined;
+    const update = () => setView(readView(map));
+    update();
+    map.on("moveend", update);
+    map.on("resize", update);
+    return () => {
+      map.off("moveend", update);
+      map.off("resize", update);
+    };
+  }, [map]);
+
+  return (
+    <div
+      ref={ref}
+      aria-hidden="true"
+      data-slot="map-inset"
+      data-kind={kind}
+      className={cn(
+        "pointer-events-none absolute z-10 overflow-hidden bg-background shadow-ring-sm",
+        kind === "globe" ? "rounded-full" : "rounded-md",
+        MAP_CORNER_CLASSES[position],
+        className,
+      )}
+      // `transitionProperty: none` for the same reason `<MapCanvas>` pins it: a
+      // transitioned width (the reduced-motion clamp gives EVERY element a
+      // 0.01 ms duration) only lands on the next animation frame, and the
+      // engine inside measures this box.
+      style={{
+        width: size,
+        maxWidth: "40%",
+        aspectRatio: "1 / 1",
+        transitionProperty: "none",
+        ...style,
+      }}
+      {...props}
+    >
+      {view && (
+        <MapCanvas
+          interactive={false}
+          center={view.center}
+          zoom={kind === "globe" ? 0 : Math.max(0, view.zoom - REGION_ZOOM_OUT)}
+          minZoom={-2}
+          projection={kind === "globe" ? "globe" : undefined}
+          styles={styles}
+          blank={blank}
+          basemapLabels={basemapLabels}
+        >
+          <InsetFollower view={view} kind={kind} />
+        </MapCanvas>
+      )}
+    </div>
+  );
+});

package/src/map-legend/index.ts

@@ -0,0 +1,10 @@
+export {
+  MapLegend,
+  type MapLegendProps,
+  type MapLegendItem,
+  type MapLegendScale,
+  type MapLegendShape,
+  type MapLegendPosition,
+  type MapLegendLayout,
+} from "./map-legend";
+export { MAP_CORNERS, type MapCorner } from "./map-corner";

package/src/map-legend/map-corner.ts

@@ -0,0 +1,23 @@
+/**
+ * The four corners map furniture (legend, scale bar, north arrow, inset) can
+ * sit in, inside the map box. Chrome, not geography: the corners are LOGICAL
+ * (`start` / `end`), so "top-left" is the reading-start corner and mirrors in
+ * RTL like the rest of the page.
+ */
+export type MapCorner = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+
+/** Every corner, clockwise from top-left (for stories and validation). */
+export const MAP_CORNERS: readonly MapCorner[] = [
+  "top-left",
+  "top-right",
+  "bottom-right",
+  "bottom-left",
+];
+
+/** The inset classes for each corner. */
+export const MAP_CORNER_CLASSES: Record<MapCorner, string> = {
+  "top-left": "top-2 start-2",
+  "top-right": "top-2 end-2",
+  "bottom-left": "bottom-2 start-2",
+  "bottom-right": "bottom-2 end-2",
+};

package/src/map-legend/map-legend.stories.tsx

@@ -0,0 +1,171 @@
+import type { ReactNode } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor } from "storybook/test";
+
+import { MapCanvas } from "../map-canvas";
+import { LOCATOR_BOUNDS } from "../test-utils/locator-fixture";
+import { MAP_CORNERS } from "./map-corner";
+import { MapLegend, type MapLegendItem } from "./map-legend";
+
+const meta = {
+  title: "Maps/MapLegend",
+  component: MapLegend,
+  tags: ["autodocs"],
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof MapLegend>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ITEMS: MapLegendItem[] = [
+  { id: "lake", label: "Lake Ontario", color: "var(--chart-1)", shape: "square" },
+  { id: "gta", label: "Greater Toronto Area", color: "var(--chart-2)", shape: "square" },
+  // Four rows, four colours (c-12): `var(--primary)` aliases `var(--chart-1)`
+  // in every shipped theme, so a "City" circle painted with it was the same
+  // colour as the "Lake Ontario" square — a distinction the marks can't carry.
+  { id: "city", label: "City", color: "var(--chart-4)", shape: "circle" },
+  { id: "ferry", label: "Ferry route", color: "var(--chart-3)", shape: "line" },
+];
+
+const RENT_INDEX = [62, 71, 74, 80, 86, 91, 97, 104, 112, 118, 125, 131, 140];
+
+function Frame({ children }: { children: ReactNode }) {
+  return (
+    <div className="w-full p-4">
+      <MapCanvas interactive={false} bounds={LOCATOR_BOUNDS} fitBoundsOptions={{ padding: 32 }}>
+        {children}
+      </MapCanvas>
+    </div>
+  );
+}
+
+/** A key for markers and areas, laid out as a list over the top-left corner. */
+export const Default: Story = {
+  render: () => (
+    <Frame>
+      <MapLegend title="Legend" position="top-left" items={ITEMS} />
+    </Frame>
+  ),
+  play: async ({ canvasElement }) => {
+    // c-12: four rows, four colours. `var(--primary)` aliases `var(--chart-1)`
+    // in every shipped theme, so the "City" circle and the "Lake Ontario"
+    // square were painted the same — a distinction the marks could not carry,
+    // with only a 10 px shape to tell them apart.
+    const swatches = await waitFor(() => {
+      const found = [
+        ...canvasElement.querySelectorAll<HTMLElement>('[data-slot="map-legend-swatch"]'),
+      ];
+      expect(found).toHaveLength(ITEMS.length);
+      return found;
+    });
+    const colors = swatches.map((swatch) => getComputedStyle(swatch).backgroundColor);
+    await expect(new Set(colors).size).toBe(ITEMS.length);
+  },
+};
+
+/** The same key as a grid, under the map — for keys wider than a corner. */
+export const GridBelow: Story = {
+  render: () => (
+    <Frame>
+      <MapLegend title="Legend" position="below" layout="grid" items={ITEMS} />
+    </Frame>
+  ),
+  play: async ({ canvasElement }) => {
+    // c-5: `auto-fill` held 7 tracks of 113.7 px on the 868 px strip for these
+    // four keys, so "Greater Toronto Area" truncated (scrollWidth 123 vs
+    // clientWidth 98) with three EMPTY tracks beside it. `auto-fit` collapses
+    // the empty tracks, so the strip never carries more tracks than keys.
+    const list = await waitFor(() => {
+      const found = canvasElement.querySelector<HTMLElement>('[data-slot="map-legend-items"]');
+      expect(found).not.toBeNull();
+      return found!;
+    });
+    const tracks = getComputedStyle(list)
+      .gridTemplateColumns.split(" ")
+      .map((value) => Number.parseFloat(value));
+    const filled = tracks.filter((width) => width > 0);
+    await expect(filled.length).toBeLessThanOrEqual(ITEMS.length);
+
+    // On a strip wide enough to hold every key in one row, none of them
+    // truncates any more.
+    if (filled.length === ITEMS.length) {
+      for (const item of canvasElement.querySelectorAll('[data-slot="map-legend-item"]')) {
+        const label = item.querySelector("span:not([data-slot])") as HTMLElement;
+        await expect(label.scrollWidth).toBeLessThanOrEqual(label.clientWidth);
+      }
+    }
+  },
+};
+
+/** Above the map, as a list. */
+export const Above: Story = {
+  render: () => (
+    <Frame>
+      <MapLegend title="Legend" position="above" layout="list" items={ITEMS} />
+    </Frame>
+  ),
+};
+
+/**
+ * A stepped ramp from the shared colour-scale helper: every swatch is a
+ * `var(--chart-seq-N)` reference, so the ramp follows the theme.
+ */
+export const SteppedRamp: Story = {
+  render: () => (
+    <Frame>
+      <MapLegend
+        title="Rent index (Toronto = 100)"
+        position="bottom-right"
+        scale={{ values: RENT_INDEX, spec: { type: "stepped", steps: 5 } }}
+      />
+    </Frame>
+  ),
+  play: async ({ canvasElement }) => {
+    if (!canvasElement.querySelector(".maplibregl-canvas")) return;
+    const steps = await waitFor(() => {
+      const found = canvasElement.querySelectorAll<HTMLElement>('[data-slot="map-legend-step"]');
+      expect(found).toHaveLength(5);
+      return found;
+    });
+    for (const step of steps) {
+      await expect(step.getAttribute("style") ?? "").toMatch(/var\(--chart-seq-\d\)/);
+    }
+  },
+};
+
+/** A continuous ramp, drawn as a gradient of token references. */
+export const ContinuousRamp: Story = {
+  render: () => (
+    <Frame>
+      <MapLegend
+        title="Rent index"
+        position="bottom-left"
+        scale={{ values: RENT_INDEX, spec: { type: "continuous" } }}
+        formatValue={(value) => `${value}`}
+      />
+    </Frame>
+  ),
+};
+
+/** Every corner a key can sit in. */
+export const Corners: Story = {
+  render: () => (
+    <Frame>
+      {MAP_CORNERS.map((corner) => (
+        <MapLegend
+          key={corner}
+          position={corner}
+          items={[{ id: corner, label: corner, color: "var(--chart-1)" }]}
+        />
+      ))}
+    </Frame>
+  ),
+};
+
+/** Over a corner on wide maps; under the map at `narrow`, where it would cover data. */
+export const ResponsivePosition: Story = {
+  render: () => (
+    <Frame>
+      <MapLegend title="Legend" position={{ base: "top-right", narrow: "below" }} items={ITEMS} />
+    </Frame>
+  ),
+};