mapped-image 0.1.1 → 0.2.0

package/README.md

@@ -5,12 +5,12 @@ A React component that overlays a clickable row/column grid on top of one or mor
 ## Install
 
 ```bash
-npm install github:notetuwu/mapped-image
+npm install mapped-image
 ```
 
 `leaflet` and `react-leaflet` are declared as dependencies and installed automatically. `react` and `react-dom` are peer dependencies, resolved from your app.
 
-> **Note:** this package currently ships untranspiled `.tsx` source (no build step) and is intended to be installed straight from this repository's source. Your app's own bundler is expected to compile it. If you instead need a pre-built `dist` (ESM/CJS + type declarations) for non-TS-aware consumers, that's not set up yet.
+The package ships compiled ESM + type declarations (built with `tsup`), so it works like any normal npm package — no extra bundler configuration needed.
 
 ## Usage
 

package/{types.ts → dist/MappedImage.d.ts}

@@ -1,7 +1,8 @@
-import type { LatLngTuple } from "leaflet";
-import type { ReactNode } from "react";
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { LatLngTuple } from 'leaflet';
 
-export type ImageConfig = {
+type ImageConfig = {
     name: string;
     src: string;
     columns: number;
@@ -11,14 +12,12 @@ export type ImageConfig = {
     /** rowIndex -> relative height weight, default weight is 1. Only needs entries for non-uniform rows. */
     rowWeights?: Record<number, number>;
 };
-
-export type ImageSelectorProps = {
+type ImageSelectorProps = {
     images: ImageConfig[];
     selectedIndex: number;
     onSelect: (index: number) => void;
 };
-
-export type MappedImageProps = {
+type MappedImageProps = {
     images: ImageConfig[];
     alt: string;
     width: number;
@@ -32,8 +31,7 @@ export type MappedImageProps = {
     /** Extra pannable margin (in pixels) beyond the image edges. Defaults to 50. */
     maxBoundsPadding?: number;
 };
-
-export type ImageLayerProps = {
+type ImageLayerProps = {
     image: ImageConfig;
     colOffset: number;
     rowOffset: number;
@@ -44,8 +42,7 @@ export type ImageLayerProps = {
     maxBoundsPadding?: number;
     onCellClick: GridProps["onCellClick"];
 };
-
-export type GridProps = {
+type GridProps = {
     rows: number;
     rowOffset: number;
     rowWeights: number[];
@@ -55,8 +52,11 @@ export type GridProps = {
     selectedCells: Set<string>;
     onCellClick?: (props: ICellClickProps) => void;
 };
-
-export interface ICellClickProps {
+interface ICellClickProps {
     col: string;
     row: number;
 }
+
+declare const MappedImage: (props: MappedImageProps) => react.JSX.Element;
+
+export { type GridProps, type ICellClickProps, type ImageConfig, type ImageLayerProps, type ImageSelectorProps, MappedImage, type MappedImageProps };

package/dist/MappedImage.js

@@ -0,0 +1,335 @@
+// MappedImage.tsx
+import { useState as useState2 } from "react";
+import "leaflet/dist/leaflet.css";
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// MappedImage.css
+styleInject(".grid-header-label-icon {\n  background: none;\n  border: none;\n}\n.grid-header-label {\n  position: absolute;\n  display: block;\n  font-weight: bold;\n  white-space: nowrap;\n}\n.grid-header-label--column {\n  transform: translate(-50%, -100%);\n}\n.grid-header-label--row {\n  transform: translate(-100%, -50%);\n}\n");
+
+// components/DefaultImageSelector.tsx
+import { jsx } from "react/jsx-runtime";
+var DefaultImageSelector = ({ images, selectedIndex, onSelect }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    style: {
+      position: "absolute",
+      top: 10,
+      right: 10,
+      zIndex: 1e3,
+      display: "flex",
+      gap: 8
+    },
+    children: images.map((image, index) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onSelect(index),
+        style: {
+          padding: "12px 20px",
+          fontSize: 16,
+          fontWeight: index === selectedIndex ? "bold" : "normal",
+          background: index === selectedIndex ? "#3388ff" : "white",
+          color: index === selectedIndex ? "white" : "black",
+          border: "1px solid #3388ff",
+          borderRadius: 6
+        },
+        children: image.name
+      },
+      image.name
+    ))
+  }
+);
+
+// components/ImageLayer.tsx
+import { useEffect, useState } from "react";
+import { CRS } from "leaflet";
+import { MapContainer, ImageOverlay } from "react-leaflet";
+
+// components/Grid.tsx
+import { Rectangle, Marker } from "react-leaflet";
+
+// helpers/weights.ts
+var resolveWeights = (count, overrides = {}) => Array.from({ length: count }, (_, i) => overrides[i] ?? 1);
+var weightOffsets = (weights) => {
+  const offsets = [0];
+  weights.forEach((weight) => offsets.push(offsets[offsets.length - 1] + weight));
+  return offsets;
+};
+
+// helpers/headerIcon.ts
+import { divIcon } from "leaflet";
+var headerIcon = (label, className) => divIcon({
+  html: `<span class="grid-header-label ${className}">${label}</span>`,
+  className: "grid-header-label-icon",
+  iconSize: [0, 0]
+});
+
+// helpers/cellAccessibility.ts
+var getPathElement = (instance) => instance.getElement();
+var bindCellAccessibility = (instance, label, selected, onActivate) => {
+  const el = instance && getPathElement(instance);
+  if (!el) {
+    return;
+  }
+  el.setAttribute("role", "button");
+  el.setAttribute("tabindex", "0");
+  el.setAttribute("aria-label", label);
+  el.setAttribute("aria-pressed", String(selected));
+  el.onkeydown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onActivate();
+    }
+  };
+};
+
+// components/Grid.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Grid = ({
+  rows,
+  rowOffset,
+  rowWeights,
+  columnLabels,
+  columnWeights,
+  imgBounds,
+  selectedCells,
+  onCellClick
+}) => {
+  const [height, width] = imgBounds;
+  const colOffsets = weightOffsets(columnWeights);
+  const pxPerColWeightUnit = width / colOffsets[colOffsets.length - 1];
+  const colLeft = (colCount) => colOffsets[colCount] * pxPerColWeightUnit;
+  const colRight = (colCount) => colOffsets[colCount + 1] * pxPerColWeightUnit;
+  const rowOffsets = weightOffsets(rowWeights);
+  const pxPerRowWeightUnit = height / rowOffsets[rowOffsets.length - 1];
+  const rowBottom = (rowCount) => rowOffsets[rowCount] * pxPerRowWeightUnit;
+  const rowTop = (rowCount) => rowOffsets[rowCount + 1] * pxPerRowWeightUnit;
+  const cells = Array.from({ length: rows }).map(
+    (_, rowCount) => columnLabels.map((columnLabel, colCount) => {
+      const bounds = [
+        [rowTop(rowCount), colRight(colCount)],
+        [rowBottom(rowCount), colLeft(colCount)]
+      ];
+      const rowLabel = rowOffset + (rows - rowCount);
+      const cellId = `${rowLabel},${columnLabel}`;
+      const selected = selectedCells.has(cellId);
+      const activate = () => onCellClick?.({ col: columnLabel, row: rowLabel });
+      return /* @__PURE__ */ jsx2(
+        Rectangle,
+        {
+          ref: (instance) => bindCellAccessibility(instance, `${columnLabel}${rowLabel}`, selected, activate),
+          bounds,
+          pathOptions: {
+            fillColor: selected ? "red" : "transparent",
+            fillOpacity: selected ? 0.5 : 0,
+            weight: 1.5
+          },
+          eventHandlers: {
+            click: activate
+          }
+        },
+        cellId
+      );
+    })
+  );
+  const columnHeaders = columnLabels.map((columnLabel, colCount) => /* @__PURE__ */ jsx2(
+    Marker,
+    {
+      position: [height, (colLeft(colCount) + colRight(colCount)) / 2],
+      icon: headerIcon(columnLabel, "grid-header-label--column"),
+      interactive: false
+    },
+    `col-${columnLabel}`
+  ));
+  const rowHeaders = Array.from({ length: rows }).map((_, rowCount) => {
+    const rowLabel = rowOffset + (rows - rowCount);
+    return /* @__PURE__ */ jsx2(
+      Marker,
+      {
+        position: [(rowBottom(rowCount) + rowTop(rowCount)) / 2, -7],
+        icon: headerIcon(String(rowLabel), "grid-header-label--row"),
+        interactive: false
+      },
+      `row-${rowLabel}`
+    );
+  });
+  return [...cells, columnHeaders, rowHeaders];
+};
+
+// helpers/imageBounds.ts
+var imageBounds = (src, containerWidth, containerHeight) => new Promise((resolve, reject) => {
+  const img = new Image();
+  img.src = src;
+  img.onload = () => {
+    const scale = Math.min(containerWidth / img.width, containerHeight / img.height);
+    resolve([img.height * scale, img.width * scale]);
+  };
+  img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
+});
+
+// helpers/colNames.ts
+var toColumnLetter = (n) => {
+  let result = "";
+  let remaining = n;
+  while (remaining > 0) {
+    const remainder = (remaining - 1) % 26;
+    result = String.fromCharCode(65 + remainder) + result;
+    remaining = Math.floor((remaining - 1) / 26);
+  }
+  return result;
+};
+var colNames = (startIndex, count) => Array.from({ length: count }, (_, i) => toColumnLetter(startIndex + i + 1));
+
+// components/ImageLayer.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var ImageLayer = ({
+  image,
+  colOffset,
+  rowOffset,
+  width,
+  height,
+  alt,
+  selectedCells,
+  maxBoundsPadding = 100,
+  onCellClick
+}) => {
+  const [imgBounds, setImgBounds] = useState(null);
+  const [loadError, setLoadError] = useState(null);
+  useEffect(() => {
+    imageBounds(image.src, width, height).then(setImgBounds).catch(setLoadError);
+  }, [image.src, width, height]);
+  if (loadError) {
+    throw loadError;
+  }
+  if (!imgBounds) {
+    return null;
+  }
+  const [imgHeight, imgWidth] = imgBounds;
+  const bounds = [[0, 0], imgBounds];
+  const maxBounds = [
+    [-maxBoundsPadding, -maxBoundsPadding],
+    [imgHeight + maxBoundsPadding, imgWidth + maxBoundsPadding]
+  ];
+  const columnLabels = colNames(colOffset, image.columns);
+  const columnWeights = resolveWeights(image.columns, image.columnWeights);
+  const rowWeights = resolveWeights(image.rows, image.rowWeights);
+  return /* @__PURE__ */ jsxs(
+    MapContainer,
+    {
+      crs: CRS.Simple,
+      bounds,
+      boundsOptions: { padding: [50, 50] },
+      maxBounds,
+      maxBoundsViscosity: 0.5,
+      style: { width, height },
+      maxZoom: 2,
+      children: [
+        /* @__PURE__ */ jsx3(
+          Grid,
+          {
+            rows: image.rows,
+            rowOffset,
+            rowWeights,
+            columnLabels,
+            columnWeights,
+            imgBounds,
+            selectedCells,
+            onCellClick
+          }
+        ),
+        /* @__PURE__ */ jsx3(ImageOverlay, { url: image.src, bounds, alt })
+      ]
+    }
+  );
+};
+
+// MappedImage.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var MappedImage = (props) => {
+  if (props.images.length === 0) {
+    throw new Error("MappedImage requires at least one entry in `images`.");
+  }
+  const invalidImage = props.images.find((image) => image.rows <= 0 || image.columns <= 0);
+  if (invalidImage) {
+    throw new Error(
+      `MappedImage: image "${invalidImage.name}" must have rows > 0 and columns > 0.`
+    );
+  }
+  const [internalSelectedCells, setInternalSelectedCells] = useState2(
+    props.selectedCells ?? /* @__PURE__ */ new Set()
+  );
+  const isSelectionControlled = props.selectedCells !== void 0;
+  const selectedCells = isSelectionControlled ? props.selectedCells : internalSelectedCells;
+  const [selectedImageIndex, setSelectedImageIndex] = useState2(
+    props.selectedImageIndex ?? 0
+  );
+  const selectedImage = props.images[selectedImageIndex];
+  const colOffset = props.images.slice(0, selectedImageIndex).reduce((sum, image) => sum + image.columns, 0);
+  const rowOffset = props.images.slice(0, selectedImageIndex).reduce((sum, image) => sum + image.rows, 0);
+  const handleSelectImage = (index) => {
+    setSelectedImageIndex(index);
+    props.onSelectedImageIndexChange?.(index);
+  };
+  const handleCellClick = ({ row, col }) => {
+    const cellId = `${row},${col}`;
+    const next = new Set(selectedCells);
+    if (next.has(cellId)) {
+      next.delete(cellId);
+    } else {
+      next.add(cellId);
+    }
+    if (!isSelectionControlled) {
+      setInternalSelectedCells(next);
+    }
+    props.onSelectedCellsChange?.(next);
+    props.onCellClick?.({ row, col });
+  };
+  const renderSelector = props.renderImageSelector ?? ((selectorProps) => /* @__PURE__ */ jsx4(DefaultImageSelector, { ...selectorProps }));
+  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative", width: props.width, height: props.height }, children: [
+    /* @__PURE__ */ jsx4(
+      ImageLayer,
+      {
+        image: selectedImage,
+        colOffset,
+        rowOffset,
+        width: props.width,
+        height: props.height,
+        alt: props.alt,
+        selectedCells,
+        maxBoundsPadding: props.maxBoundsPadding,
+        onCellClick: handleCellClick
+      },
+      selectedImage.src
+    ),
+    renderSelector({
+      images: props.images,
+      selectedIndex: selectedImageIndex,
+      onSelect: handleSelectImage
+    })
+  ] });
+};
+export {
+  MappedImage
+};
+//# sourceMappingURL=MappedImage.js.map

package/dist/MappedImage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../MappedImage.tsx","#style-inject:#style-inject","../MappedImage.css","../components/DefaultImageSelector.tsx","../components/ImageLayer.tsx","../components/Grid.tsx","../helpers/weights.ts","../helpers/headerIcon.ts","../helpers/cellAccessibility.ts","../helpers/imageBounds.ts","../helpers/colNames.ts"],"sourcesContent":["import { useState } from \"react\";\nimport \"leaflet/dist/leaflet.css\";\nimport \"./MappedImage.css\";\nimport type { ICellClickProps, ImageSelectorProps, MappedImageProps } from \"./types\";\nimport { DefaultImageSelector } from \"./components/DefaultImageSelector\";\nimport { ImageLayer } from \"./components/ImageLayer\";\n\nexport * from \"./types\";\n\nexport const MappedImage = (props: MappedImageProps) => {\n    if (props.images.length === 0) {\n        throw new Error(\"MappedImage requires at least one entry in `images`.\");\n    }\n\n    const invalidImage = props.images.find((image) => image.rows <= 0 || image.columns <= 0);\n    if (invalidImage) {\n        throw new Error(\n            `MappedImage: image \"${invalidImage.name}\" must have rows > 0 and columns > 0.`,\n        );\n    }\n\n    const [internalSelectedCells, setInternalSelectedCells] = useState<Set<string>>(\n        props.selectedCells ?? new Set(),\n    );\n    const isSelectionControlled = props.selectedCells !== undefined;\n    const selectedCells = isSelectionControlled ? props.selectedCells! : internalSelectedCells;\n\n    const [selectedImageIndex, setSelectedImageIndex] = useState(\n        props.selectedImageIndex ?? 0,\n    );\n\n    const selectedImage = props.images[selectedImageIndex];\n    const colOffset = props.images\n        .slice(0, selectedImageIndex)\n        .reduce((sum, image) => sum + image.columns, 0);\n    const rowOffset = props.images\n        .slice(0, selectedImageIndex)\n        .reduce((sum, image) => sum + image.rows, 0);\n\n    const handleSelectImage = (index: number) => {\n        setSelectedImageIndex(index);\n        props.onSelectedImageIndexChange?.(index);\n    };\n\n    const handleCellClick = ({ row, col }: ICellClickProps) => {\n        const cellId = `${row},${col}`;\n        const next = new Set(selectedCells);\n        if (next.has(cellId)) {\n            next.delete(cellId);\n        } else {\n            next.add(cellId);\n        }\n\n        if (!isSelectionControlled) {\n            setInternalSelectedCells(next);\n        }\n        props.onSelectedCellsChange?.(next);\n        props.onCellClick?.({ row, col });\n    };\n\n    const renderSelector = props.renderImageSelector ?? (\n        (selectorProps: ImageSelectorProps) => <DefaultImageSelector {...selectorProps} />\n    );\n\n    return (\n        <div style={{ position: \"relative\", width: props.width, height: props.height }}>\n            <ImageLayer\n                key={selectedImage.src}\n                image={selectedImage}\n                colOffset={colOffset}\n                rowOffset={rowOffset}\n                width={props.width}\n                height={props.height}\n                alt={props.alt}\n                selectedCells={selectedCells}\n                maxBoundsPadding={props.maxBoundsPadding}\n                onCellClick={handleCellClick}\n            />\n            {renderSelector({\n                images: props.images,\n                selectedIndex: selectedImageIndex,\n                onSelect: handleSelectImage,\n            })}\n        </div>\n    );\n};\n","\n          export default function styleInject(css, { insertAt } = {}) {\n            if (!css || typeof document === 'undefined') return\n          \n            const head = document.head || document.getElementsByTagName('head')[0]\n            const style = document.createElement('style')\n            style.type = 'text/css'\n          \n            if (insertAt === 'top') {\n              if (head.firstChild) {\n                head.insertBefore(style, head.firstChild)\n              } else {\n                head.appendChild(style)\n              }\n            } else {\n              head.appendChild(style)\n            }\n          \n            if (style.styleSheet) {\n              style.styleSheet.cssText = css\n            } else {\n              style.appendChild(document.createTextNode(css))\n            }\n          }\n          ","import styleInject from '#style-inject';styleInject(\".grid-header-label-icon {\\n  background: none;\\n  border: none;\\n}\\n.grid-header-label {\\n  position: absolute;\\n  display: block;\\n  font-weight: bold;\\n  white-space: nowrap;\\n}\\n.grid-header-label--column {\\n  transform: translate(-50%, -100%);\\n}\\n.grid-header-label--row {\\n  transform: translate(-100%, -50%);\\n}\\n\")","import type { ImageSelectorProps } from \"../types\";\n\nexport const DefaultImageSelector = ({ images, selectedIndex, onSelect }: ImageSelectorProps) => (\n    <div\n        style={{\n            position: \"absolute\",\n            top: 10,\n            right: 10,\n            zIndex: 1000,\n            display: \"flex\",\n            gap: 8,\n        }}\n    >\n        {images.map((image, index) => (\n            <button\n                key={image.name}\n                type=\"button\"\n                onClick={() => onSelect(index)}\n                style={{\n                    padding: \"12px 20px\",\n                    fontSize: 16,\n                    fontWeight: index === selectedIndex ? \"bold\" : \"normal\",\n                    background: index === selectedIndex ? \"#3388ff\" : \"white\",\n                    color: index === selectedIndex ? \"white\" : \"black\",\n                    border: \"1px solid #3388ff\",\n                    borderRadius: 6,\n                }}\n            >\n                {image.name}\n            </button>\n        ))}\n    </div>\n);\n","import { useEffect, useState } from \"react\";\nimport { CRS, type LatLngBoundsExpression, type LatLngTuple } from \"leaflet\";\nimport { MapContainer, ImageOverlay } from \"react-leaflet\";\nimport type { ImageLayerProps } from \"../types\";\nimport { Grid } from \"./Grid\";\nimport { imageBounds } from \"../helpers/imageBounds\";\nimport { colNames } from \"../helpers/colNames\";\nimport { resolveWeights } from \"../helpers/weights\";\n\nexport const ImageLayer = ({\n    image,\n    colOffset,\n    rowOffset,\n    width,\n    height,\n    alt,\n    selectedCells,\n    maxBoundsPadding = 100,\n    onCellClick,\n}: ImageLayerProps) => {\n    const [imgBounds, setImgBounds] = useState<LatLngTuple | null>(null);\n    const [loadError, setLoadError] = useState<Error | null>(null);\n\n    useEffect(() => {\n        imageBounds(image.src, width, height).then(setImgBounds).catch(setLoadError);\n    }, [image.src, width, height]);\n\n    if (loadError) {\n        throw loadError;\n    }\n\n    if (!imgBounds) {\n        return null;\n    }\n\n    const [imgHeight, imgWidth] = imgBounds;\n    const bounds: LatLngBoundsExpression = [[0, 0], imgBounds];\n    const maxBounds: LatLngBoundsExpression = [\n        [-maxBoundsPadding , -maxBoundsPadding],\n        [imgHeight + maxBoundsPadding, imgWidth + maxBoundsPadding],\n    ];\n    const columnLabels = colNames(colOffset, image.columns);\n    const columnWeights = resolveWeights(image.columns, image.columnWeights);\n    const rowWeights = resolveWeights(image.rows, image.rowWeights);\n\n    return (\n        <MapContainer\n            crs={CRS.Simple}\n            bounds={bounds}\n            boundsOptions={{ padding: [50, 50] }}\n            maxBounds={maxBounds}\n            maxBoundsViscosity={0.5}\n            style={{ width, height }}\n            maxZoom={2}\n        >\n            <Grid\n                rows={image.rows}\n                rowOffset={rowOffset}\n                rowWeights={rowWeights}\n                columnLabels={columnLabels}\n                columnWeights={columnWeights}\n                imgBounds={imgBounds}\n                selectedCells={selectedCells}\n                onCellClick={onCellClick}\n            />\n            <ImageOverlay url={image.src} bounds={bounds} alt={alt} />\n        </MapContainer>\n    );\n};\n","import { Rectangle, Marker } from \"react-leaflet\";\nimport type { LatLngBoundsExpression } from \"leaflet\";\nimport type { GridProps } from \"../types\";\nimport { weightOffsets } from \"../helpers/weights\";\nimport { headerIcon } from \"../helpers/headerIcon\";\nimport { bindCellAccessibility } from \"../helpers/cellAccessibility\";\n\nexport const Grid = ({\n    rows,\n    rowOffset,\n    rowWeights,\n    columnLabels,\n    columnWeights,\n    imgBounds,\n    selectedCells,\n    onCellClick,\n}: GridProps) => {\n    const [height, width] = imgBounds;\n\n    const colOffsets = weightOffsets(columnWeights);\n    const pxPerColWeightUnit = width / colOffsets[colOffsets.length - 1];\n    const colLeft = (colCount: number) => colOffsets[colCount] * pxPerColWeightUnit;\n    const colRight = (colCount: number) => colOffsets[colCount + 1] * pxPerColWeightUnit;\n\n    const rowOffsets = weightOffsets(rowWeights);\n    const pxPerRowWeightUnit = height / rowOffsets[rowOffsets.length - 1];\n    const rowBottom = (rowCount: number) => rowOffsets[rowCount] * pxPerRowWeightUnit;\n    const rowTop = (rowCount: number) => rowOffsets[rowCount + 1] * pxPerRowWeightUnit;\n\n    const cells = Array.from({ length: rows }).map((_, rowCount) =>\n        columnLabels.map((columnLabel, colCount) => {\n            const bounds: LatLngBoundsExpression = [\n                [rowTop(rowCount), colRight(colCount)],\n                [rowBottom(rowCount), colLeft(colCount)],\n            ];\n\n            const rowLabel = rowOffset + (rows - rowCount);\n            const cellId = `${rowLabel},${columnLabel}`;\n            const selected = selectedCells.has(cellId);\n            const activate = () => onCellClick?.({ col: columnLabel, row: rowLabel });\n\n            return (\n                <Rectangle\n                    key={cellId}\n                    ref={(instance) =>\n                        bindCellAccessibility(instance, `${columnLabel}${rowLabel}`, selected, activate)\n                    }\n                    bounds={bounds}\n                    pathOptions={{\n                        fillColor: selected ? \"red\" : \"transparent\",\n                        fillOpacity: selected ? 0.5 : 0,\n                        weight: 1.5,\n                    }}\n                    eventHandlers={{\n                        click: activate,\n                    }}\n                />\n            );\n        }),\n    );\n\n    const columnHeaders = columnLabels.map((columnLabel, colCount) => (\n        <Marker\n            key={`col-${columnLabel}`}\n            position={[height, (colLeft(colCount) + colRight(colCount)) / 2]}\n            icon={headerIcon(columnLabel, \"grid-header-label--column\")}\n            interactive={false}\n        />\n    ));\n\n    const rowHeaders = Array.from({ length: rows }).map((_, rowCount) => {\n        const rowLabel = rowOffset + (rows - rowCount);\n        return (\n            <Marker\n                key={`row-${rowLabel}`}\n                position={[(rowBottom(rowCount) + rowTop(rowCount)) / 2, -7]}\n                icon={headerIcon(String(rowLabel), \"grid-header-label--row\")}\n                interactive={false}\n            />\n        );\n    });\n\n    return [...cells, columnHeaders, rowHeaders];\n};\n","export const resolveWeights = (\n    count: number,\n    overrides: Record<number, number> = {},\n): number[] => Array.from({ length: count }, (_, i) => overrides[i] ?? 1);\n\n/** Cumulative leading edge (in weight units) of each index, plus the total at the end. */\nexport const weightOffsets = (weights: number[]): number[] => {\n    const offsets = [0];\n    weights.forEach((weight) => offsets.push(offsets[offsets.length - 1] + weight));\n    return offsets;\n};\n","import { divIcon } from \"leaflet\";\n\nexport const headerIcon = (label: string, className: string) =>\n    divIcon({\n        html: `<span class=\"grid-header-label ${className}\">${label}</span>`,\n        className: \"grid-header-label-icon\",\n        iconSize: [0, 0],\n    });\n","import type { Rectangle as LeafletRectangle } from \"leaflet\";\n\n// Path.getElement() returns the underlying SVG node but isn't declared in @types/leaflet, hence the cast.\nconst getPathElement = (instance: LeafletRectangle) =>\n    (instance as unknown as { getElement(): SVGElement | undefined }).getElement();\n\nexport const bindCellAccessibility = (\n    instance: LeafletRectangle | null,\n    label: string,\n    selected: boolean,\n    onActivate: () => void,\n) => {\n    const el = instance && getPathElement(instance);\n    if (!el) {\n        return;\n    }\n\n    el.setAttribute(\"role\", \"button\");\n    el.setAttribute(\"tabindex\", \"0\");\n    el.setAttribute(\"aria-label\", label);\n    el.setAttribute(\"aria-pressed\", String(selected));\n    el.onkeydown = (e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n            e.preventDefault();\n            onActivate();\n        }\n    };\n};\n","import type { LatLngTuple } from \"leaflet\";\r\n\r\nexport const imageBounds = (src: string, containerWidth: number, containerHeight: number): Promise<LatLngTuple> =>\r\n    new Promise((resolve, reject) => {\r\n        const img = new Image();\r\n        img.src = src;\r\n        img.onload = () => {\r\n            const scale = Math.min(containerWidth / img.width, containerHeight / img.height);\r\n            resolve([img.height * scale, img.width * scale]);\r\n        };\r\n        img.onerror = () => reject(new Error(`Failed to load image: ${src}`));\r\n    });","const toColumnLetter = (n: number): string => {\n    let result = \"\";\n    let remaining = n;\n\n    while (remaining > 0) {\n        const remainder = (remaining - 1) % 26;\n        result = String.fromCharCode(65 + remainder) + result;\n        remaining = Math.floor((remaining - 1) / 26);\n    }\n\n    return result;\n};\n\nexport const colNames = (startIndex: number, count: number): string[] =>\n    Array.from({ length: count }, (_, i) => toColumnLetter(startIndex + i + 1));\n"],"mappings":"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","names":["useState","jsx","jsx","jsx","jsxs","useState"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapped-image",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "private": false,
   "license": "MIT",
   "description": "A React component that overlays a clickable, weighted row/column grid on top of one or more images, built on react-leaflet.",
@@ -21,22 +21,32 @@
     "url": "https://github.com/notetuwu/mapped-image/issues"
   },
   "type": "module",
-  "main": "MappedImage.tsx",
-  "types": "MappedImage.tsx",
+  "main": "dist/MappedImage.js",
+  "module": "dist/MappedImage.js",
+  "types": "dist/MappedImage.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/MappedImage.d.ts",
+      "import": "./dist/MappedImage.js"
+    }
+  },
   "files": [
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.css"
+    "dist"
   ],
+  "scripts": {
+    "build": "tsup",
+    "prepare": "tsup"
+  },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "dependencies": {
     "leaflet": "^1.9.4",
-    "react-leaflet": "^5.0.0"
+    "react-leaflet": "^5.0.0",
+    "@types/leaflet": "^1.9.21"
   },
   "devDependencies": {
-    "@types/leaflet": "^1.9.21"
+    "tsup": "^8.3.5"
   }
 }

package/MappedImage.css

@@ -1,19 +0,0 @@
-.grid-header-label-icon {
-    background: none;
-    border: none;
-}
-
-.grid-header-label {
-    position: absolute;
-    display: block;
-    font-weight: bold;
-    white-space: nowrap;
-}
-
-.grid-header-label--column {
-    transform: translate(-50%, -100%);
-}
-
-.grid-header-label--row {
-    transform: translate(-100%, -50%);
-}

package/MappedImage.tsx

@@ -1,84 +0,0 @@
-import { useState } from "react";
-import "leaflet/dist/leaflet.css";
-import "./MappedImage.css";
-import type { ICellClickProps, ImageSelectorProps, MappedImageProps } from "./types";
-import { DefaultImageSelector } from "./components/DefaultImageSelector";
-import { ImageLayer } from "./components/ImageLayer";
-
-export const MappedImage = (props: MappedImageProps) => {
-    if (props.images.length === 0) {
-        throw new Error("MappedImage requires at least one entry in `images`.");
-    }
-
-    const invalidImage = props.images.find((image) => image.rows <= 0 || image.columns <= 0);
-    if (invalidImage) {
-        throw new Error(
-            `MappedImage: image "${invalidImage.name}" must have rows > 0 and columns > 0.`,
-        );
-    }
-
-    const [internalSelectedCells, setInternalSelectedCells] = useState<Set<string>>(
-        props.selectedCells ?? new Set(),
-    );
-    const isSelectionControlled = props.selectedCells !== undefined;
-    const selectedCells = isSelectionControlled ? props.selectedCells! : internalSelectedCells;
-
-    const [selectedImageIndex, setSelectedImageIndex] = useState(
-        props.selectedImageIndex ?? 0,
-    );
-
-    const selectedImage = props.images[selectedImageIndex];
-    const colOffset = props.images
-        .slice(0, selectedImageIndex)
-        .reduce((sum, image) => sum + image.columns, 0);
-    const rowOffset = props.images
-        .slice(0, selectedImageIndex)
-        .reduce((sum, image) => sum + image.rows, 0);
-
-    const handleSelectImage = (index: number) => {
-        setSelectedImageIndex(index);
-        props.onSelectedImageIndexChange?.(index);
-    };
-
-    const handleCellClick = ({ row, col }: ICellClickProps) => {
-        const cellId = `${row},${col}`;
-        const next = new Set(selectedCells);
-        if (next.has(cellId)) {
-            next.delete(cellId);
-        } else {
-            next.add(cellId);
-        }
-
-        if (!isSelectionControlled) {
-            setInternalSelectedCells(next);
-        }
-        props.onSelectedCellsChange?.(next);
-        props.onCellClick?.({ row, col });
-    };
-
-    const renderSelector = props.renderImageSelector ?? (
-        (selectorProps: ImageSelectorProps) => <DefaultImageSelector {...selectorProps} />
-    );
-
-    return (
-        <div style={{ position: "relative", width: props.width, height: props.height }}>
-            <ImageLayer
-                key={selectedImage.src}
-                image={selectedImage}
-                colOffset={colOffset}
-                rowOffset={rowOffset}
-                width={props.width}
-                height={props.height}
-                alt={props.alt}
-                selectedCells={selectedCells}
-                maxBoundsPadding={props.maxBoundsPadding}
-                onCellClick={handleCellClick}
-            />
-            {renderSelector({
-                images: props.images,
-                selectedIndex: selectedImageIndex,
-                onSelect: handleSelectImage,
-            })}
-        </div>
-    );
-};

package/components/DefaultImageSelector.tsx

@@ -1,33 +0,0 @@
-import type { ImageSelectorProps } from "../types";
-
-export const DefaultImageSelector = ({ images, selectedIndex, onSelect }: ImageSelectorProps) => (
-    <div
-        style={{
-            position: "absolute",
-            top: 10,
-            right: 10,
-            zIndex: 1000,
-            display: "flex",
-            gap: 8,
-        }}
-    >
-        {images.map((image, index) => (
-            <button
-                key={image.name}
-                type="button"
-                onClick={() => onSelect(index)}
-                style={{
-                    padding: "12px 20px",
-                    fontSize: 16,
-                    fontWeight: index === selectedIndex ? "bold" : "normal",
-                    background: index === selectedIndex ? "#3388ff" : "white",
-                    color: index === selectedIndex ? "white" : "black",
-                    border: "1px solid #3388ff",
-                    borderRadius: 6,
-                }}
-            >
-                {image.name}
-            </button>
-        ))}
-    </div>
-);

package/components/Grid.tsx

@@ -1,84 +0,0 @@
-import { Rectangle, Marker } from "react-leaflet";
-import type { LatLngBoundsExpression } from "leaflet";
-import type { GridProps } from "../types";
-import { weightOffsets } from "../helpers/weights";
-import { headerIcon } from "../helpers/headerIcon";
-import { bindCellAccessibility } from "../helpers/cellAccessibility";
-
-export const Grid = ({
-    rows,
-    rowOffset,
-    rowWeights,
-    columnLabels,
-    columnWeights,
-    imgBounds,
-    selectedCells,
-    onCellClick,
-}: GridProps) => {
-    const [height, width] = imgBounds;
-
-    const colOffsets = weightOffsets(columnWeights);
-    const pxPerColWeightUnit = width / colOffsets[colOffsets.length - 1];
-    const colLeft = (colCount: number) => colOffsets[colCount] * pxPerColWeightUnit;
-    const colRight = (colCount: number) => colOffsets[colCount + 1] * pxPerColWeightUnit;
-
-    const rowOffsets = weightOffsets(rowWeights);
-    const pxPerRowWeightUnit = height / rowOffsets[rowOffsets.length - 1];
-    const rowBottom = (rowCount: number) => rowOffsets[rowCount] * pxPerRowWeightUnit;
-    const rowTop = (rowCount: number) => rowOffsets[rowCount + 1] * pxPerRowWeightUnit;
-
-    const cells = Array.from({ length: rows }).map((_, rowCount) =>
-        columnLabels.map((columnLabel, colCount) => {
-            const bounds: LatLngBoundsExpression = [
-                [rowTop(rowCount), colRight(colCount)],
-                [rowBottom(rowCount), colLeft(colCount)],
-            ];
-
-            const rowLabel = rowOffset + (rows - rowCount);
-            const cellId = `${rowLabel},${columnLabel}`;
-            const selected = selectedCells.has(cellId);
-            const activate = () => onCellClick?.({ col: columnLabel, row: rowLabel });
-
-            return (
-                <Rectangle
-                    key={cellId}
-                    ref={(instance) =>
-                        bindCellAccessibility(instance, `${columnLabel}${rowLabel}`, selected, activate)
-                    }
-                    bounds={bounds}
-                    pathOptions={{
-                        fillColor: selected ? "red" : "transparent",
-                        fillOpacity: selected ? 0.5 : 0,
-                        weight: 1.5,
-                    }}
-                    eventHandlers={{
-                        click: activate,
-                    }}
-                />
-            );
-        }),
-    );
-
-    const columnHeaders = columnLabels.map((columnLabel, colCount) => (
-        <Marker
-            key={`col-${columnLabel}`}
-            position={[height, (colLeft(colCount) + colRight(colCount)) / 2]}
-            icon={headerIcon(columnLabel, "grid-header-label--column")}
-            interactive={false}
-        />
-    ));
-
-    const rowHeaders = Array.from({ length: rows }).map((_, rowCount) => {
-        const rowLabel = rowOffset + (rows - rowCount);
-        return (
-            <Marker
-                key={`row-${rowLabel}`}
-                position={[(rowBottom(rowCount) + rowTop(rowCount)) / 2, -7]}
-                icon={headerIcon(String(rowLabel), "grid-header-label--row")}
-                interactive={false}
-            />
-        );
-    });
-
-    return [...cells, columnHeaders, rowHeaders];
-};

package/components/ImageLayer.tsx

@@ -1,69 +0,0 @@
-import { useEffect, useState } from "react";
-import { CRS, type LatLngBoundsExpression, type LatLngTuple } from "leaflet";
-import { MapContainer, ImageOverlay } from "react-leaflet";
-import type { ImageLayerProps } from "../types";
-import { Grid } from "./Grid";
-import { imageBounds } from "../helpers/imageBounds";
-import { colNames } from "../helpers/colNames";
-import { resolveWeights } from "../helpers/weights";
-
-export const ImageLayer = ({
-    image,
-    colOffset,
-    rowOffset,
-    width,
-    height,
-    alt,
-    selectedCells,
-    maxBoundsPadding = 100,
-    onCellClick,
-}: ImageLayerProps) => {
-    const [imgBounds, setImgBounds] = useState<LatLngTuple | null>(null);
-    const [loadError, setLoadError] = useState<Error | null>(null);
-
-    useEffect(() => {
-        imageBounds(image.src, width, height).then(setImgBounds).catch(setLoadError);
-    }, [image.src, width, height]);
-
-    if (loadError) {
-        throw loadError;
-    }
-
-    if (!imgBounds) {
-        return null;
-    }
-
-    const [imgHeight, imgWidth] = imgBounds;
-    const bounds: LatLngBoundsExpression = [[0, 0], imgBounds];
-    const maxBounds: LatLngBoundsExpression = [
-        [-maxBoundsPadding , -maxBoundsPadding],
-        [imgHeight + maxBoundsPadding, imgWidth + maxBoundsPadding],
-    ];
-    const columnLabels = colNames(colOffset, image.columns);
-    const columnWeights = resolveWeights(image.columns, image.columnWeights);
-    const rowWeights = resolveWeights(image.rows, image.rowWeights);
-
-    return (
-        <MapContainer
-            crs={CRS.Simple}
-            bounds={bounds}
-            boundsOptions={{ padding: [50, 50] }}
-            maxBounds={maxBounds}
-            maxBoundsViscosity={0.5}
-            style={{ width, height }}
-            maxZoom={2}
-        >
-            <Grid
-                rows={image.rows}
-                rowOffset={rowOffset}
-                rowWeights={rowWeights}
-                columnLabels={columnLabels}
-                columnWeights={columnWeights}
-                imgBounds={imgBounds}
-                selectedCells={selectedCells}
-                onCellClick={onCellClick}
-            />
-            <ImageOverlay url={image.src} bounds={bounds} alt={alt} />
-        </MapContainer>
-    );
-};

package/helpers/cellAccessibility.ts

@@ -1,28 +0,0 @@
-import type { Rectangle as LeafletRectangle } from "leaflet";
-
-// Path.getElement() returns the underlying SVG node but isn't declared in @types/leaflet, hence the cast.
-const getPathElement = (instance: LeafletRectangle) =>
-    (instance as unknown as { getElement(): SVGElement | undefined }).getElement();
-
-export const bindCellAccessibility = (
-    instance: LeafletRectangle | null,
-    label: string,
-    selected: boolean,
-    onActivate: () => void,
-) => {
-    const el = instance && getPathElement(instance);
-    if (!el) {
-        return;
-    }
-
-    el.setAttribute("role", "button");
-    el.setAttribute("tabindex", "0");
-    el.setAttribute("aria-label", label);
-    el.setAttribute("aria-pressed", String(selected));
-    el.onkeydown = (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            onActivate();
-        }
-    };
-};

package/helpers/colNames.test.ts

@@ -1,20 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { colNames } from "./colNames";
-
-describe("colNames", () => {
-    it("generates the first 26 letters starting from offset 0", () => {
-        expect(colNames(0, 3)).toEqual(["A", "B", "C"]);
-    });
-
-    it("wraps into double letters after Z", () => {
-        expect(colNames(24, 4)).toEqual(["Y", "Z", "AA", "AB"]);
-    });
-
-    it("continues from a non-zero offset, as used for multi-image column continuity", () => {
-        expect(colNames(5, 3)).toEqual(["F", "G", "H"]);
-    });
-
-    it("returns an empty array for a zero count", () => {
-        expect(colNames(0, 0)).toEqual([]);
-    });
-});

package/helpers/colNames.ts

@@ -1,15 +0,0 @@
-const toColumnLetter = (n: number): string => {
-    let result = "";
-    let remaining = n;
-
-    while (remaining > 0) {
-        const remainder = (remaining - 1) % 26;
-        result = String.fromCharCode(65 + remainder) + result;
-        remaining = Math.floor((remaining - 1) / 26);
-    }
-
-    return result;
-};
-
-export const colNames = (startIndex: number, count: number): string[] =>
-    Array.from({ length: count }, (_, i) => toColumnLetter(startIndex + i + 1));

package/helpers/headerIcon.ts

@@ -1,8 +0,0 @@
-import { divIcon } from "leaflet";
-
-export const headerIcon = (label: string, className: string) =>
-    divIcon({
-        html: `<span class="grid-header-label ${className}">${label}</span>`,
-        className: "grid-header-label-icon",
-        iconSize: [0, 0],
-    });

package/helpers/imageBounds.test.ts

@@ -1,62 +0,0 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { imageBounds } from "./imageBounds";
-
-class FakeImage {
-    width: number;
-    height: number;
-    shouldError: boolean;
-    onload: (() => void) | null = null;
-    onerror: (() => void) | null = null;
-
-    constructor(width: number, height: number, shouldError: boolean) {
-        this.width = width;
-        this.height = height;
-        this.shouldError = shouldError;
-    }
-
-    set src(_value: string) {
-        queueMicrotask(() => {
-            if (this.shouldError) {
-                this.onerror?.();
-            } else {
-                this.onload?.();
-            }
-        });
-    }
-}
-
-const stubImage = (width: number, height: number, shouldError = false) => {
-    vi.stubGlobal(
-        "Image",
-        class {
-            constructor() {
-                return new FakeImage(width, height, shouldError);
-            }
-        },
-    );
-};
-
-afterEach(() => {
-    vi.unstubAllGlobals();
-});
-
-describe("imageBounds", () => {
-    it("scales by the limiting dimension, preserving aspect ratio (width-constrained)", async () => {
-        stubImage(400, 200);
-        const bounds = await imageBounds("img.png", 100, 100);
-        expect(bounds).toEqual([50, 100]);
-    });
-
-    it("scales by the limiting dimension, preserving aspect ratio (height-constrained)", async () => {
-        stubImage(200, 400);
-        const bounds = await imageBounds("img.png", 100, 100);
-        expect(bounds).toEqual([100, 50]);
-    });
-
-    it("rejects when the image fails to load", async () => {
-        stubImage(0, 0, true);
-        await expect(imageBounds("missing.png", 100, 100)).rejects.toThrow(
-            "Failed to load image: missing.png",
-        );
-    });
-});

package/helpers/imageBounds.ts

@@ -1,12 +0,0 @@
-import type { LatLngTuple } from "leaflet";
-
-export const imageBounds = (src: string, containerWidth: number, containerHeight: number): Promise<LatLngTuple> =>
-    new Promise((resolve, reject) => {
-        const img = new Image();
-        img.src = src;
-        img.onload = () => {
-            const scale = Math.min(containerWidth / img.width, containerHeight / img.height);
-            resolve([img.height * scale, img.width * scale]);
-        };
-        img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
-    });

package/helpers/weights.test.ts

@@ -1,22 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { resolveWeights, weightOffsets } from "./weights";
-
-describe("resolveWeights", () => {
-    it("defaults every index to weight 1 with no overrides", () => {
-        expect(resolveWeights(4)).toEqual([1, 1, 1, 1]);
-    });
-
-    it("applies overrides only to the specified indices", () => {
-        expect(resolveWeights(4, { 2: 3 })).toEqual([1, 1, 3, 1]);
-    });
-});
-
-describe("weightOffsets", () => {
-    it("returns cumulative offsets starting at 0, ending at the total weight", () => {
-        expect(weightOffsets([1, 1, 3, 1])).toEqual([0, 1, 2, 5, 6]);
-    });
-
-    it("returns [0] for an empty weight list", () => {
-        expect(weightOffsets([])).toEqual([0]);
-    });
-});

package/helpers/weights.ts

@@ -1,11 +0,0 @@
-export const resolveWeights = (
-    count: number,
-    overrides: Record<number, number> = {},
-): number[] => Array.from({ length: count }, (_, i) => overrides[i] ?? 1);
-
-/** Cumulative leading edge (in weight units) of each index, plus the total at the end. */
-export const weightOffsets = (weights: number[]): number[] => {
-    const offsets = [0];
-    weights.forEach((weight) => offsets.push(offsets[offsets.length - 1] + weight));
-    return offsets;
-};