react-floor-mapper 0.1.6 → 0.1.7

package/dist/{index.mjs → index.cjs}

@@ -1,10 +1,35 @@
-import * as React2 from 'react';
-import { useRef, useState, useEffect, useMemo } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Stage, Layer, Image as Image$1, Line, Group, Circle } from 'react-konva';
-import useImage from 'use-image';
-import { ZoomIn, ZoomOut } from 'lucide-react';
-import styled from 'styled-components';
+'use strict';
+
+var React2 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var reactKonva = require('react-konva');
+var useImage = require('use-image');
+var lucideReact = require('lucide-react');
+var styled = require('styled-components');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var useImage__default = /*#__PURE__*/_interopDefault(useImage);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 // src/components/ImageWithPoints.tsx
 
@@ -32,8 +57,8 @@ function ImageWithPoints({
   children,
   points
 }) {
-  const [size, setSize] = React2.useState(naturalSize ?? null);
-  React2.useEffect(() => {
+  const [size, setSize] = React2__namespace.useState(naturalSize != null ? naturalSize : null);
+  React2__namespace.useEffect(() => {
     let alive = true;
     (async () => {
       if (!naturalSize && image.type === "img") {
@@ -50,9 +75,9 @@ function ImageWithPoints({
       alive = false;
     };
   }, [image, naturalSize]);
-  if (!size) return /* @__PURE__ */ jsx("div", { className, style: { ...style, aspectRatio: "16/9", background: "#f6f8fa" } });
+  if (!size) return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...style, aspectRatio: "16/9", background: "#f6f8fa" } });
   const { width, height } = size;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
       className,
@@ -62,16 +87,16 @@ function ImageWithPoints({
       "aria-label": title,
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        title && /* @__PURE__ */ jsx("title", { children: title }),
-        desc && /* @__PURE__ */ jsx("desc", { children: desc }),
-        /* @__PURE__ */ jsx("image", { href: image.src, x: 0, y: 0, width, height, preserveAspectRatio: "none" }),
-        /* @__PURE__ */ jsx("g", { stroke: lineStroke, strokeWidth: lineWidth, strokeLinecap: "round", children: edges.map((e) => {
+        title && /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }),
+        desc && /* @__PURE__ */ jsxRuntime.jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsxRuntime.jsx("image", { href: image.src, x: 0, y: 0, width, height, preserveAspectRatio: "none" }),
+        /* @__PURE__ */ jsxRuntime.jsx("g", { stroke: lineStroke, strokeWidth: lineWidth, strokeLinecap: "round", children: edges.map((e) => {
           const a = points.find((p) => p.id === e.from);
           const b = points.find((p) => p.id === e.to);
           if (!a || !b) return null;
-          return /* @__PURE__ */ jsx("line", { x1: a.x, y1: a.y, x2: b.x, y2: b.y }, e.id);
+          return /* @__PURE__ */ jsxRuntime.jsx("line", { x1: a.x, y1: a.y, x2: b.x, y2: b.y }, e.id);
         }) }),
-        /* @__PURE__ */ jsx("g", { fill: pointFill, children: points.map((p) => /* @__PURE__ */ jsx("circle", { cx: p.x, cy: p.y, r: pointRadius }, p.id)) }),
+        /* @__PURE__ */ jsxRuntime.jsx("g", { fill: pointFill, children: points.map((p) => /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: p.x, cy: p.y, r: pointRadius }, p.id)) }),
         children
       ]
     }
@@ -108,24 +133,24 @@ function FloorMapDrawer(props) {
     title,
     desc
   } = props;
-  const wrapperRef = React2.useRef(null);
-  const svgRef = React2.useRef(null);
-  const [size, setSize] = React2.useState(naturalSize ?? null);
+  const wrapperRef = React2__namespace.useRef(null);
+  const svgRef = React2__namespace.useRef(null);
+  const [size, setSize] = React2__namespace.useState(naturalSize != null ? naturalSize : null);
   const isControlled = points !== void 0 || edges !== void 0;
-  const [localPoints, setLocalPoints] = React2.useState(defaultPoints);
-  const [localEdges, setLocalEdges] = React2.useState(defaultEdges);
-  const pts = points ?? localPoints;
-  const eds = edges ?? localEdges;
-  const [scale, setScale] = React2.useState(1);
-  const [tx, setTx] = React2.useState(0);
-  const [ty, setTy] = React2.useState(0);
-  const [mode, setMode] = React2.useState(initialMode);
-  const [hoverId, setHoverId] = React2.useState(null);
-  const [drag, setDrag] = React2.useState(null);
-  const spacePanningRef = React2.useRef(false);
-  const [undoStack, setUndoStack] = React2.useState([]);
-  const [redoStack, setRedoStack] = React2.useState([]);
-  React2.useEffect(() => {
+  const [localPoints, setLocalPoints] = React2__namespace.useState(defaultPoints);
+  const [localEdges, setLocalEdges] = React2__namespace.useState(defaultEdges);
+  const pts = points != null ? points : localPoints;
+  const eds = edges != null ? edges : localEdges;
+  const [scale, setScale] = React2__namespace.useState(1);
+  const [tx, setTx] = React2__namespace.useState(0);
+  const [ty, setTy] = React2__namespace.useState(0);
+  const [mode, setMode] = React2__namespace.useState(initialMode);
+  const [hoverId, setHoverId] = React2__namespace.useState(null);
+  const [drag, setDrag] = React2__namespace.useState(null);
+  const spacePanningRef = React2__namespace.useRef(false);
+  const [undoStack, setUndoStack] = React2__namespace.useState([]);
+  const [redoStack, setRedoStack] = React2__namespace.useState([]);
+  React2__namespace.useEffect(() => {
     let alive = true;
     (async () => {
       if (!naturalSize && image.type === "img") {
@@ -142,12 +167,12 @@ function FloorMapDrawer(props) {
       alive = false;
     };
   }, [image, naturalSize]);
-  const clamp = React2.useCallback((n, a, b) => Math.max(a, Math.min(b, n)), []);
-  const cryptoRandomId = React2.useCallback(
+  const clamp = React2__namespace.useCallback((n, a, b) => Math.max(a, Math.min(b, n)), []);
+  const cryptoRandomId = React2__namespace.useCallback(
     () => typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : Math.random().toString(36).slice(2),
     []
   );
-  const screenToImage = React2.useCallback((clientX, clientY) => {
+  const screenToImage = React2__namespace.useCallback((clientX, clientY) => {
     const svg = svgRef.current;
     if (!svg || !size) return null;
     const rect = svg.getBoundingClientRect();
@@ -157,12 +182,12 @@ function FloorMapDrawer(props) {
     const y = (cy - ty) / scale;
     return { x, y };
   }, [size, tx, ty, scale]);
-  const pushHistory = React2.useCallback((entry) => {
+  const pushHistory = React2__namespace.useCallback((entry) => {
     if (isControlled) return;
     setUndoStack((s) => [...s, entry]);
     setRedoStack([]);
   }, [isControlled]);
-  const undo = React2.useCallback(() => {
+  const undo = React2__namespace.useCallback(() => {
     if (isControlled) return;
     setUndoStack((s) => {
       if (s.length === 0) return s;
@@ -173,11 +198,11 @@ function FloorMapDrawer(props) {
       }, ...r]);
       setLocalPoints(prev.points);
       setLocalEdges(prev.edges);
-      onChange?.({ points: prev.points, edges: prev.edges });
+      onChange == null ? void 0 : onChange({ points: prev.points, edges: prev.edges });
       return s.slice(0, -1);
     });
   }, [isControlled, localPoints, localEdges, onChange]);
-  const redo = React2.useCallback(() => {
+  const redo = React2__namespace.useCallback(() => {
     if (isControlled) return;
     setRedoStack((r) => {
       if (r.length === 0) return r;
@@ -188,31 +213,32 @@ function FloorMapDrawer(props) {
       }]);
       setLocalPoints(next.points);
       setLocalEdges(next.edges);
-      onChange?.({ points: next.points, edges: next.edges });
+      onChange == null ? void 0 : onChange({ points: next.points, edges: next.edges });
       return r.slice(1);
     });
   }, [isControlled, localPoints, localEdges, onChange]);
-  const setAndEmitMode = React2.useCallback((m) => {
+  const setAndEmitMode = React2__namespace.useCallback((m) => {
     setMode(m);
-    onModeChange?.(m);
+    onModeChange == null ? void 0 : onModeChange(m);
   }, [onModeChange]);
-  const update = React2.useCallback((next) => {
-    const newPoints = next.points ?? pts;
-    const newEdges = next.edges ?? eds;
+  const update = React2__namespace.useCallback((next) => {
+    var _a, _b;
+    const newPoints = (_a = next.points) != null ? _a : pts;
+    const newEdges = (_b = next.edges) != null ? _b : eds;
     if (!isControlled) {
       pushHistory({ points: pts, edges: eds });
       if (next.points) setLocalPoints(newPoints);
       if (next.edges) setLocalEdges(newEdges);
     }
-    onChange?.({ points: newPoints, edges: newEdges });
+    onChange == null ? void 0 : onChange({ points: newPoints, edges: newEdges });
   }, [isControlled, pts, eds, onChange, pushHistory]);
-  const removePoint = React2.useCallback((id) => {
+  const removePoint = React2__namespace.useCallback((id) => {
     update({
       points: pts.filter((p) => p.id !== id),
       edges: eds.filter((e) => e.from !== id && e.to !== id)
     });
   }, [pts, eds, update]);
-  const addPointAt = React2.useCallback((clientX, clientY) => {
+  const addPointAt = React2__namespace.useCallback((clientX, clientY) => {
     const img = screenToImage(clientX, clientY);
     if (!img || !size) return;
     const x = clamp(img.x, 0, size.width);
@@ -232,12 +258,12 @@ function FloorMapDrawer(props) {
     }
     update({ points: newPoints, edges: newEdges });
   }, [screenToImage, size, clamp, cryptoRandomId, pts, eds, connectSequential, update]);
-  const resetZoom = React2.useCallback(() => {
+  const resetZoom = React2__namespace.useCallback(() => {
     setScale(1);
     setTx(0);
     setTy(0);
   }, []);
-  const fitToContainer = React2.useCallback(() => {
+  const fitToContainer = React2__namespace.useCallback(() => {
     if (!wrapperRef.current || !size) return;
     const rect = wrapperRef.current.getBoundingClientRect();
     const pad = 16;
@@ -248,7 +274,7 @@ function FloorMapDrawer(props) {
     setTx((rect.width - size.width * s) / 2);
     setTy((rect.height - size.height * s) / 2);
   }, [size]);
-  React2.useEffect(() => {
+  React2__namespace.useEffect(() => {
     const onKeyDown = (e) => {
       if (e.code === "Space") spacePanningRef.current = true;
       if (e.target && e.target.tagName === "INPUT") return;
@@ -297,7 +323,7 @@ function FloorMapDrawer(props) {
     if (!size) return;
     if (mode === "add") addPointAt(e.clientX, e.clientY);
   };
-  const wantPan = React2.useCallback(
+  const wantPan = React2__namespace.useCallback(
     () => panEnabled && (mode === "pan" || spacePanningRef.current),
     [panEnabled, mode]
   );
@@ -306,7 +332,7 @@ function FloorMapDrawer(props) {
     e.target.setPointerCapture(e.pointerId);
     setDrag({ kind: "panning", lastX: e.clientX, lastY: e.clientY });
   };
-  const onPointPointerDown = React2.useCallback((p) => (e) => {
+  const onPointPointerDown = React2__namespace.useCallback((p) => (e) => {
     if (mode === "erase") {
       e.stopPropagation();
       removePoint(p.id);
@@ -336,8 +362,9 @@ function FloorMapDrawer(props) {
     }
   };
   const onPointerUp = (e) => {
+    var _a, _b;
     if (drag) {
-      e.target.releasePointerCapture?.(e.pointerId);
+      (_b = (_a = e.target).releasePointerCapture) == null ? void 0 : _b.call(_a, e.pointerId);
     }
     setDrag(null);
   };
@@ -358,17 +385,17 @@ function FloorMapDrawer(props) {
     setTx(cx - imgX * newScale);
     setTy(cy - imgY * newScale);
   };
-  React2.useEffect(() => {
+  React2__namespace.useEffect(() => {
     if (!size || !wrapperRef.current) return;
     const id = requestAnimationFrame(() => fitToContainer());
     return () => cancelAnimationFrame(id);
-  }, [size?.width, size?.height, fitToContainer]);
+  }, [size == null ? void 0 : size.width, size == null ? void 0 : size.height, fitToContainer]);
   if (!size) {
-    return /* @__PURE__ */ jsx("div", { ref: wrapperRef, className, style: { position: "relative", ...style }, children: /* @__PURE__ */ jsx("div", { style: { aspectRatio: "16/9", background: "#f6f8fa", width: "100%" } }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, className, style: { position: "relative", ...style }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { aspectRatio: "16/9", background: "#f6f8fa", width: "100%" } }) });
   }
   const { width, height } = size;
-  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className, style: { position: "relative", ...style }, children: [
-    showToolbar && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className, style: { position: "relative", ...style }, children: [
+    showToolbar && /* @__PURE__ */ jsxRuntime.jsx(
       Toolbar,
       {
         mode,
@@ -381,7 +408,7 @@ function FloorMapDrawer(props) {
         canRedo: !isControlled && redoStack.length > 0
       }
     ),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       "svg",
       {
         ref: svgRef,
@@ -396,9 +423,9 @@ function FloorMapDrawer(props) {
         role: "img",
         "aria-label": title,
         children: [
-          title && /* @__PURE__ */ jsx("title", { children: title }),
-          desc && /* @__PURE__ */ jsx("desc", { children: desc }),
-          /* @__PURE__ */ jsx(
+          title && /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }),
+          desc && /* @__PURE__ */ jsxRuntime.jsx("desc", { children: desc }),
+          /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
             {
               x: 0,
@@ -410,18 +437,18 @@ function FloorMapDrawer(props) {
               style: { cursor: wantPan() ? "grab" : mode === "add" ? "crosshair" : "default" }
             }
           ),
-          /* @__PURE__ */ jsxs("g", { transform: `matrix(${scale},0,0,${scale},${tx},${ty})`, children: [
-            /* @__PURE__ */ jsx("image", { href: image.src, x: 0, y: 0, width, height, preserveAspectRatio: "none" }),
-            /* @__PURE__ */ jsx("g", { stroke: lineStroke, strokeWidth: lineWidth, strokeLinecap: "round", children: eds.map((e) => {
+          /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `matrix(${scale},0,0,${scale},${tx},${ty})`, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("image", { href: image.src, x: 0, y: 0, width, height, preserveAspectRatio: "none" }),
+            /* @__PURE__ */ jsxRuntime.jsx("g", { stroke: lineStroke, strokeWidth: lineWidth, strokeLinecap: "round", children: eds.map((e) => {
               const a = pts.find((p) => p.id === e.from);
               const b = pts.find((p) => p.id === e.to);
               if (!a || !b) return null;
-              return /* @__PURE__ */ jsx("line", { x1: a.x, y1: a.y, x2: b.x, y2: b.y }, e.id);
+              return /* @__PURE__ */ jsxRuntime.jsx("line", { x1: a.x, y1: a.y, x2: b.x, y2: b.y }, e.id);
             }) }),
-            /* @__PURE__ */ jsx("g", { children: pts.map((p) => {
+            /* @__PURE__ */ jsxRuntime.jsx("g", { children: pts.map((p) => {
               const active = hoverId === p.id;
               const showDelete = mode === "erase" && active;
-              return /* @__PURE__ */ jsxs(
+              return /* @__PURE__ */ jsxRuntime.jsxs(
                 "g",
                 {
                   onPointerDown: onPointPointerDown(p),
@@ -429,7 +456,7 @@ function FloorMapDrawer(props) {
                   onMouseLeave: () => setHoverId((curr) => curr === p.id ? null : curr),
                   style: { cursor: mode === "move" ? "grab" : mode === "erase" ? "pointer" : "default" },
                   children: [
-                    /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsxRuntime.jsx(
                       "circle",
                       {
                         cx: p.x,
@@ -438,7 +465,7 @@ function FloorMapDrawer(props) {
                         fill: active ? activePointFill : pointFill
                       }
                     ),
-                    showDelete && /* @__PURE__ */ jsxs(
+                    showDelete && /* @__PURE__ */ jsxRuntime.jsxs(
                       "g",
                       {
                         onClick: (e) => {
@@ -447,7 +474,7 @@ function FloorMapDrawer(props) {
                         },
                         style: { cursor: "pointer" },
                         children: [
-                          /* @__PURE__ */ jsx(
+                          /* @__PURE__ */ jsxRuntime.jsx(
                             "rect",
                             {
                               x: p.x + 8,
@@ -459,7 +486,7 @@ function FloorMapDrawer(props) {
                               stroke: "#d0d7de"
                             }
                           ),
-                          /* @__PURE__ */ jsx(
+                          /* @__PURE__ */ jsxRuntime.jsx(
                             "text",
                             {
                               x: p.x + 17,
@@ -486,7 +513,7 @@ function FloorMapDrawer(props) {
   ] });
 }
 function Toolbar(props) {
-  const Btn = ({ children, ...rest }) => /* @__PURE__ */ jsx(
+  const Btn = ({ children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       ...rest,
@@ -503,7 +530,7 @@ function Toolbar(props) {
       children
     }
   );
-  const Tab = ({ active, onClick, children }) => /* @__PURE__ */ jsx(
+  const Tab = ({ active, onClick, children }) => /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       onClick,
@@ -518,7 +545,7 @@ function Toolbar(props) {
       children
     }
   );
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       style: {
@@ -536,16 +563,16 @@ function Toolbar(props) {
         zIndex: 10
       },
       children: [
-        /* @__PURE__ */ jsx(Tab, { active: props.mode === "pan", onClick: () => props.onModeChange("pan"), children: "Pan" }),
-        /* @__PURE__ */ jsx(Tab, { active: props.mode === "add", onClick: () => props.onModeChange("add"), children: "Add" }),
-        /* @__PURE__ */ jsx(Tab, { active: props.mode === "move", onClick: () => props.onModeChange("move"), children: "Move" }),
-        /* @__PURE__ */ jsx(Tab, { active: props.mode === "erase", onClick: () => props.onModeChange("erase"), children: "Erase" }),
-        /* @__PURE__ */ jsx("div", { style: { width: 1, height: 22, background: "#d0d7de", margin: "0 6px" } }),
-        /* @__PURE__ */ jsx(Btn, { onClick: props.onFit, title: "Fit (F)", children: "Fit" }),
-        /* @__PURE__ */ jsx(Btn, { onClick: props.onReset, title: "1:1 (1)", children: "1:1" }),
-        /* @__PURE__ */ jsx("div", { style: { width: 1, height: 22, background: "#d0d7de", margin: "0 6px" } }),
-        /* @__PURE__ */ jsx(Btn, { onClick: props.onUndo, disabled: !props.canUndo, title: "Undo (Ctrl/Cmd+Z)", children: "Undo" }),
-        /* @__PURE__ */ jsx(Btn, { onClick: props.onRedo, disabled: !props.canRedo, title: "Redo (Shift+Ctrl/Cmd+Z)", children: "Redo" })
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { active: props.mode === "pan", onClick: () => props.onModeChange("pan"), children: "Pan" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { active: props.mode === "add", onClick: () => props.onModeChange("add"), children: "Add" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { active: props.mode === "move", onClick: () => props.onModeChange("move"), children: "Move" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Tab, { active: props.mode === "erase", onClick: () => props.onModeChange("erase"), children: "Erase" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 1, height: 22, background: "#d0d7de", margin: "0 6px" } }),
+        /* @__PURE__ */ jsxRuntime.jsx(Btn, { onClick: props.onFit, title: "Fit (F)", children: "Fit" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Btn, { onClick: props.onReset, title: "1:1 (1)", children: "1:1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 1, height: 22, background: "#d0d7de", margin: "0 6px" } }),
+        /* @__PURE__ */ jsxRuntime.jsx(Btn, { onClick: props.onUndo, disabled: !props.canUndo, title: "Undo (Ctrl/Cmd+Z)", children: "Undo" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Btn, { onClick: props.onRedo, disabled: !props.canRedo, title: "Redo (Shift+Ctrl/Cmd+Z)", children: "Redo" })
       ]
     }
   );
@@ -566,7 +593,7 @@ var getClosestPointOnSegment = (px, py, x1, y1, x2, y2) => {
   };
 };
 var usePoints = (initialPoints) => {
-  const [points, setPoints] = useState(
+  const [points, setPoints] = React2.useState(
     () => initialPoints.map((p, i) => ({ id: i + 1, x: p.x, y: p.y }))
   );
   return { points, setPoints };
@@ -575,7 +602,7 @@ var useZoom = (stage) => {
   const MIN_SCALE = 0.5;
   const MAX_SCALE = 5;
   const DEFAULT_SCALE = 1;
-  const [stageScale, setStageScale] = useState(DEFAULT_SCALE);
+  const [stageScale, setStageScale] = React2.useState(DEFAULT_SCALE);
   return {
     stageScale,
     setStageScale,
@@ -583,7 +610,7 @@ var useZoom = (stage) => {
     MAX_SCALE
   };
 };
-var Container = styled.div`
+var Container = styled__default.default.div`
   overflow: hidden;
   width:1200px;
   height:1200px;
@@ -592,7 +619,7 @@ var Container = styled.div`
   border:1px solid #ccc;
   border-radius:4px;
 `;
-var NavContainer = styled.div`
+var NavContainer = styled__default.default.div`
   width:80px;
   height:100%;
   background:red;
@@ -606,12 +633,12 @@ var NavContainer = styled.div`
   background:#ebebeb;
   border-left:1px solid #ccc;
 `;
-var CanvasContainer = styled.div`
+var CanvasContainer = styled__default.default.div`
   width:calc(100% - 80px);
   height:100%;
   overflow: hidden;
 `;
-var ButtonBase = styled.button`
+var ButtonBase = styled__default.default.button`
   padding:2px;
   background:white;
   border:none;
@@ -630,24 +657,24 @@ var ButtonBase = styled.button`
     cursor:not-allowed;
   }
 `;
-var Button = styled(ButtonBase)``;
+var Button = styled__default.default(ButtonBase)``;
 var Mapper = ({
   src = "https://konvajs.org/assets/line-building.png",
   initialPoints = [],
   maxWidth = 1200
 }) => {
-  const stageRef = useRef(null);
+  const stageRef = React2.useRef(null);
   const { points, setPoints } = usePoints(initialPoints);
-  const { stageScale, setStageScale, MAX_SCALE, MIN_SCALE } = useZoom(stageRef?.current);
+  const { stageScale, setStageScale, MAX_SCALE, MIN_SCALE } = useZoom(stageRef == null ? void 0 : stageRef.current);
   const SCALE_BY = 1.2;
-  const [closed, setClosed] = useState(initialPoints.length >= 3);
-  const [hoveringFirst, setHoveringFirst] = useState(false);
-  const [stagePosition, setStagePosition] = useState({ x: 0, y: 0 });
-  const [dragStart, setDragStart] = useState(null);
-  const [isDraggingPoint, setIsDraggingPoint] = useState(false);
-  const [image] = useImage(src, "anonymous");
-  const imgW = image?.width || 1;
-  const imgH = image?.height || 1;
+  const [closed, setClosed] = React2.useState(initialPoints.length >= 3);
+  const [hoveringFirst, setHoveringFirst] = React2.useState(false);
+  const [stagePosition, setStagePosition] = React2.useState({ x: 0, y: 0 });
+  const [dragStart, setDragStart] = React2.useState(null);
+  const [isDraggingPoint, setIsDraggingPoint] = React2.useState(false);
+  const [image] = useImage__default.default(src, "anonymous");
+  const imgW = (image == null ? void 0 : image.width) || 1;
+  const imgH = (image == null ? void 0 : image.height) || 1;
   const scale = maxWidth / imgW;
   const stageSize = { width: maxWidth, height: imgH * scale };
   const DRAG_THRESHOLD = 5;
@@ -768,13 +795,13 @@ var Mapper = ({
     }
     return null;
   };
-  useEffect(() => {
+  React2.useEffect(() => {
     if (image) {
       const initialPos = getConstrainedPosition({ x: 0, y: 0 }, 1);
       setStagePosition(initialPos);
     }
   }, [image]);
-  useEffect(() => {
+  React2.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.ctrlKey || e.metaKey) {
         if (e.key === "=" || e.key === "+") {
@@ -822,7 +849,7 @@ var Mapper = ({
     const y = (pos.y - stagePosition.y) / (scale * stageScale);
     return { x, y };
   };
-  const linePointsScaled = useMemo(() => {
+  const linePointsScaled = React2.useMemo(() => {
     const flat = points.flatMap((p) => [p.x * scale, p.y * scale]);
     return flat;
   }, [points, scale]);
@@ -915,9 +942,9 @@ var Mapper = ({
     const dist = Math.hypot(dx, dy);
     setHoveringFirst(dist < 15);
   };
-  return /* @__PURE__ */ jsxs(Container, { children: [
-    /* @__PURE__ */ jsx(CanvasContainer, { children: /* @__PURE__ */ jsx(
-      Stage,
+  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CanvasContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactKonva.Stage,
       {
         ref: stageRef,
         width: 1200,
@@ -934,9 +961,9 @@ var Mapper = ({
         onDragStart: handleStageDragStart,
         onDragEnd: handleStageDragEnd,
         dragBoundFunc: (pos) => getConstrainedPosition(pos, stageScale),
-        children: /* @__PURE__ */ jsxs(Layer, { children: [
-          /* @__PURE__ */ jsx(
-            Image$1,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(reactKonva.Layer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactKonva.Image,
             {
               image,
               width: stageSize.width,
@@ -944,8 +971,8 @@ var Mapper = ({
               listening: false
             }
           ),
-          points.length >= 2 && /* @__PURE__ */ jsx(
-            Line,
+          points.length >= 2 && /* @__PURE__ */ jsxRuntime.jsx(
+            reactKonva.Line,
             {
               points: linePointsScaled,
               closed,
@@ -958,8 +985,8 @@ var Mapper = ({
               hitStrokeWidth: LINE_HIT_THRESHOLD / stageScale
             }
           ),
-          /* @__PURE__ */ jsx(Group, { children: points.map((p, i) => /* @__PURE__ */ jsx(
-            Circle,
+          /* @__PURE__ */ jsxRuntime.jsx(reactKonva.Group, { children: points.map((p, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            reactKonva.Circle,
             {
               name: "point",
               x: p.x * scale,
@@ -978,26 +1005,26 @@ var Mapper = ({
         ] })
       }
     ) }),
-    /* @__PURE__ */ jsxs(NavContainer, { children: [
-      /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(NavContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
         Button,
         {
           onClick: handleZoomIn,
           disabled: stageScale >= MAX_SCALE,
           title: "Zoom In (Ctrl/Cmd + +)",
-          children: /* @__PURE__ */ jsx(ZoomIn, { style: { width: "20px", height: "20px" } })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomIn, { style: { width: "20px", height: "20px" } })
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(
         Button,
         {
           onClick: handleZoomOut,
           disabled: stageScale <= MIN_SCALE,
           title: "Zoom Out (Ctrl/Cmd + -)",
-          children: /* @__PURE__ */ jsx(ZoomOut, { style: { width: "20px", height: "20px" } })
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomOut, { style: { width: "20px", height: "20px" } })
         }
       ),
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsxRuntime.jsxs(
         Button,
         {
           onClick: handleResetZoom,
@@ -1012,6 +1039,8 @@ var Mapper = ({
   ] });
 };
 
-export { FloorMapDrawer, ImageWithPoints, Mapper };
-//# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map
+exports.FloorMapDrawer = FloorMapDrawer;
+exports.ImageWithPoints = ImageWithPoints;
+exports.Mapper = Mapper;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map