neogestify-ui-components 1.2.21 → 2.0.1

package/dist/components/VenueMapEditor/index.js

@@ -0,0 +1,2684 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/VenueMapEditor/VenueMapEditor.tsx
+function IconCursor({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", className, fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 1l12 5.5-5.5 1.5L7 13.5 2 1z" }) });
+}
+function IconHand({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 16 16", className, fill: "currentColor", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 1a1 1 0 011 1v4.586l1.293-1.293a1 1 0 111.414 1.414L8 10.414 4.293 6.707a1 1 0 111.414-1.414L7 6.586V2a1 1 0 011-1z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 8a1 1 0 011-1h.5V4.5a1 1 0 012 0V7h1V3.5a1 1 0 012 0V7h1V4.5a1 1 0 012 0V9a5 5 0 01-5 5H6A3 3 0 013 11V8z" })
+  ] });
+}
+function IconGrid({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", className, fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M1 1h6v6H1V1zm8 0h6v6H9V1zM1 9h6v6H1V9zm8 0h6v6H9V9z",
+      clipRule: "evenodd",
+      opacity: 0.7
+    }
+  ) });
+}
+function IconZoomIn({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", className, fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 1a5.5 5.5 0 104.39 8.803l3.154 3.153a.75.75 0 001.06-1.06l-3.153-3.154A5.5 5.5 0 006.5 1zM2.5 6.5a4 4 0 118 0 4 4 0 01-8 0zM6 4.75a.75.75 0 011.5 0V6h1.25a.75.75 0 010 1.5H7.5v1.25a.75.75 0 01-1.5 0V7.5H4.75a.75.75 0 010-1.5H6V4.75z" }) });
+}
+function IconZoomOut({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", className, fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 1a5.5 5.5 0 104.39 8.803l3.154 3.153a.75.75 0 001.06-1.06l-3.153-3.154A5.5 5.5 0 006.5 1zM2.5 6.5a4 4 0 118 0 4 4 0 01-8 0zM4.75 6a.75.75 0 000 1.5h3.5a.75.75 0 000-1.5h-3.5z" }) });
+}
+function IconReset({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", className, fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 1a7 7 0 100 14A7 7 0 008 1zm0 1.5a5.5 5.5 0 110 11 5.5 5.5 0 010-11zM8 4a.75.75 0 01.75.75v3.19l1.28 1.28a.75.75 0 01-1.06 1.06l-1.5-1.5A.75.75 0 017.25 8V4.75A.75.75 0 018 4z" }) });
+}
+function IconUndo({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", className, fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.5 5.5A.5.5 0 013 5h5a5 5 0 110 10H3a.5.5 0 010-1h5a4 4 0 100-8H3.707l1.647 1.646a.5.5 0 01-.708.708l-2.5-2.5a.5.5 0 010-.708l2.5-2.5a.5.5 0 01.708.708L3.207 5H3a.5.5 0 01-.5-.5z" }) });
+}
+function IconRedo({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", className, fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.5 5.5A.5.5 0 0113 5H8a4 4 0 100 8h5a.5.5 0 010 1H8A5 5 0 118 5h4.293l-1.647-1.646a.5.5 0 01.708-.708l2.5 2.5a.5.5 0 010 .708l-2.5 2.5a.5.5 0 01-.708-.708L12.793 6H13a.5.5 0 01.5.5z" }) });
+}
+function IconPlace({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", className, fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 2a.5.5 0 01.5-.5h2a.5.5 0 010 1H3v1.5a.5.5 0 01-1 0V2zm11 0a.5.5 0 00-.5-.5h-2a.5.5 0 000 1H12v1.5a.5.5 0 001 0V2zM2 14a.5.5 0 00.5.5h2a.5.5 0 000-1H3v-1.5a.5.5 0 00-1 0V14zm11 0a.5.5 0 01-.5.5h-2a.5.5 0 010-1H12v-1.5a.5.5 0 011 0V14zM8 4.5a.5.5 0 000 1V7H6.5a.5.5 0 000 1H8v1.5a.5.5 0 001 0V8h1.5a.5.5 0 000-1H9V5.5a.5.5 0 00-1 0z" }) });
+}
+function IconErase({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", className, fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.086 2.207a2 2 0 012.828 0l2.879 2.878a2 2 0 010 2.83l-7.513 7.51A2 2 0 014.872 16H2.4a1 1 0 01-.966-.741L.8 13.2a2 2 0 01.5-1.946l7.786-9.047zM7.586 5L5 7.586 8.414 11 11 8.414 7.586 5zM6 12L4 10l-1.5 1.5a1 1 0 000 1.414l.587.587A1 1 0 003.793 15H5l1-1-1-1 1-1z" }) });
+}
+function IconWall({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 16 16", className, fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { strokeWidth: "2", d: "M3 14 L3 2 L14 2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { strokeWidth: "2", d: "M6 14 L6 5 L14 5" })
+  ] });
+}
+function IconDownload({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 16 16", className, fill: "currentColor", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M.5 9.9a.5.5 0 01.5.5v2.5a1 1 0 001 1h12a1 1 0 001-1v-2.5a.5.5 0 011 0v2.5a2 2 0 01-2 2H2a2 2 0 01-2-2v-2.5a.5.5 0 01.5-.5z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.646 11.854a.5.5 0 00.708 0l3-3a.5.5 0 00-.708-.708L8.5 10.293V1.5a.5.5 0 00-1 0v8.793L5.354 8.146a.5.5 0 10-.708.708l3 3z" })
+  ] });
+}
+function IconUpload({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 16 16", className, fill: "currentColor", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M.5 9.9a.5.5 0 01.5.5v2.5a1 1 0 001 1h12a1 1 0 001-1v-2.5a.5.5 0 011 0v2.5a2 2 0 01-2 2H2a2 2 0 01-2-2v-2.5a.5.5 0 01.5-.5z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.646 1.146a.5.5 0 01.708 0l3 3a.5.5 0 01-.708.708L8.5 2.707V11.5a.5.5 0 01-1 0V2.707L5.354 4.854a.5.5 0 11-.708-.708l3-3z" })
+  ] });
+}
+function IconLayers({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", className, fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.235 1.559a.5.5 0 0 0-.47 0l-7.5 4a.5.5 0 0 0 0 .882L3.188 8 .265 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l2.922-1.559a.5.5 0 0 0 0-.882l-7.5-4zm3.515 7.008L14.438 10 8 13.433 1.562 10 4.25 8.567l3.515 1.874a.5.5 0 0 0 .47 0l3.515-1.874zM8 9.433 1.562 6 8 2.567 14.438 6 8 9.433z" }) });
+}
+function ToolButton({ active, disabled, title, onClick, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      title,
+      onClick,
+      disabled,
+      className: [
+        "flex items-center justify-center w-8 h-8 rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+        active ? "bg-blue-100 text-blue-700 ring-1 ring-blue-400" : "text-slate-600 hover:bg-slate-100 hover:text-slate-800"
+      ].join(" "),
+      children
+    }
+  );
+}
+function Sep() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-6 bg-slate-200 mx-1" });
+}
+function TypeChip({ typeDef, active, onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      title: typeDef.label,
+      onClick,
+      className: [
+        "flex items-center gap-1.5 px-2 py-1 rounded border text-xs whitespace-nowrap transition-colors",
+        active ? "border-blue-400 bg-blue-50 text-blue-700 font-medium" : "border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50"
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "w-2.5 h-2.5 rounded-sm shrink-0",
+            style: { background: typeDef.color, border: `1px solid ${typeDef.strokeColor}` }
+          }
+        ),
+        typeDef.label
+      ]
+    }
+  );
+}
+function Toolbar({
+  tool,
+  onToolChange,
+  showGrid,
+  onToggleGrid,
+  zoom,
+  onZoomIn,
+  onZoomOut,
+  onResetView,
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo,
+  paletteGroups,
+  activePlaceTypeId,
+  onActivePlaceTypeChange,
+  areaShape,
+  onToggleAreaShape,
+  onExportMap,
+  onImportMap,
+  onLoadLibrary,
+  onRemoveLibraryGroup
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col bg-white border-b border-slate-200 shadow-sm shrink-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 px-2 py-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { title: "Seleccionar (V)", active: tool === "SELECT", onClick: () => onToolChange("SELECT"), children: /* @__PURE__ */ jsxRuntime.jsx(IconCursor, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { title: "Desplazar (H)", active: tool === "PAN", onClick: () => onToolChange("PAN"), children: /* @__PURE__ */ jsxRuntime.jsx(IconHand, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { title: "Dibujar pared (W)", active: tool === "WALL", onClick: () => onToolChange("WALL"), children: /* @__PURE__ */ jsxRuntime.jsx(IconWall, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { title: "Colocar elemento (P)", active: tool === "PLACE", onClick: () => onToolChange("PLACE"), children: /* @__PURE__ */ jsxRuntime.jsx(IconPlace, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { title: "Borrar (E)", active: tool === "ERASE", onClick: () => onToolChange("ERASE"), children: /* @__PURE__ */ jsxRuntime.jsx(IconErase, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Sep, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { title: "Deshacer (Ctrl+Z)", disabled: !canUndo, onClick: onUndo, children: /* @__PURE__ */ jsxRuntime.jsx(IconUndo, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { title: "Rehacer (Ctrl+Y)", disabled: !canRedo, onClick: onRedo, children: /* @__PURE__ */ jsxRuntime.jsx(IconRedo, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Sep, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ToolButton,
+        {
+          title: showGrid ? "Ocultar cuadr\xEDcula" : "Mostrar cuadr\xEDcula",
+          active: showGrid,
+          onClick: onToggleGrid,
+          children: /* @__PURE__ */ jsxRuntime.jsx(IconGrid, { className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Sep, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { title: "Acercar (+)", onClick: onZoomIn, children: /* @__PURE__ */ jsxRuntime.jsx(IconZoomIn, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-slate-500 w-10 text-center tabular-nums select-none", children: [
+        Math.round(zoom * 100),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { title: "Alejar (-)", onClick: onZoomOut, children: /* @__PURE__ */ jsxRuntime.jsx(IconZoomOut, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { title: "Restablecer vista", onClick: onResetView, children: /* @__PURE__ */ jsxRuntime.jsx(IconReset, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Sep, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { title: "Exportar mapa JSON", onClick: () => onExportMap?.(), children: /* @__PURE__ */ jsxRuntime.jsx(IconDownload, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { title: "Importar mapa JSON", onClick: () => onImportMap?.(), children: /* @__PURE__ */ jsxRuntime.jsx(IconUpload, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { title: "Cargar librer\xEDa de elementos (.json)", onClick: () => onLoadLibrary?.(), children: /* @__PURE__ */ jsxRuntime.jsx(IconLayers, { className: "w-4 h-4" }) }),
+      areaShape !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Sep, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { title: areaShape === "polygon" ? "Cambiar a rect\xE1ngulo" : "Cambiar a pol\xEDgono", onClick: () => onToggleAreaShape?.(), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: areaShape === "polygon" ? "Poly" : "Rect" }) })
+      ] })
+    ] }),
+    tool === "PLACE" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-stretch gap-0 border-t border-slate-100 bg-slate-50 overflow-x-auto", children: paletteGroups.map((group, gi) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center shrink-0", children: [
+      gi > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px self-stretch bg-slate-200 mx-1" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 px-1.5 shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-slate-400 font-medium whitespace-nowrap select-none", children: group.name }),
+        !group.isBase && onRemoveLibraryGroup && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            title: `Eliminar grupo "${group.name}"`,
+            onClick: () => onRemoveLibraryGroup(group.id),
+            className: "text-slate-300 hover:text-red-400 leading-none text-xs ml-0.5 transition-colors",
+            children: "\xD7"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 px-1 py-1.5", children: group.types.map((typeDef) => /* @__PURE__ */ jsxRuntime.jsx(
+        TypeChip,
+        {
+          typeDef,
+          active: activePlaceTypeId === typeDef.id,
+          onClick: () => onActivePlaceTypeChange(typeDef.id)
+        },
+        typeDef.id
+      )) })
+    ] }, group.id)) })
+  ] });
+}
+var ZOOM_MIN = 0.1;
+var ZOOM_MAX = 10;
+var ZOOM_FACTOR = 1.1;
+function usePanZoom(initialZoom = 1, leftClickPan = false) {
+  const [state, setState] = react.useState({
+    panX: 80,
+    panY: 80,
+    zoom: initialZoom
+  });
+  const isPanningRef = react.useRef(false);
+  const [isPanning, setIsPanning] = react.useState(false);
+  const lastPosRef = react.useRef({ x: 0, y: 0 });
+  const handleWheel = react.useCallback((e) => {
+    const factor = e.deltaY < 0 ? ZOOM_FACTOR : 1 / ZOOM_FACTOR;
+    const svgEl = e.currentTarget;
+    const rect = svgEl.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    setState((prev) => {
+      const newZoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, prev.zoom * factor));
+      const canvasX = (mouseX - prev.panX) / prev.zoom;
+      const canvasY = (mouseY - prev.panY) / prev.zoom;
+      return {
+        panX: mouseX - canvasX * newZoom,
+        panY: mouseY - canvasY * newZoom,
+        zoom: newZoom
+      };
+    });
+  }, []);
+  const handleMouseDown = react.useCallback((e) => {
+    const valid = leftClickPan ? e.button === 0 || e.button === 1 : e.button === 1;
+    if (!valid) return;
+    e.preventDefault();
+    isPanningRef.current = true;
+    setIsPanning(true);
+    lastPosRef.current = { x: e.clientX, y: e.clientY };
+  }, [leftClickPan]);
+  const handleMouseMove = react.useCallback((e) => {
+    if (!isPanningRef.current) return;
+    const dx = e.clientX - lastPosRef.current.x;
+    const dy = e.clientY - lastPosRef.current.y;
+    lastPosRef.current = { x: e.clientX, y: e.clientY };
+    setState((prev) => ({ ...prev, panX: prev.panX + dx, panY: prev.panY + dy }));
+  }, []);
+  const stopPan = react.useCallback((_e) => {
+    if (!isPanningRef.current) return;
+    isPanningRef.current = false;
+    setIsPanning(false);
+  }, []);
+  const handleMouseLeave = react.useCallback(() => {
+    if (isPanningRef.current) {
+      isPanningRef.current = false;
+      setIsPanning(false);
+    }
+  }, []);
+  const zoomBy = react.useCallback((factor, cx, cy) => {
+    setState((prev) => {
+      const newZoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, prev.zoom * factor));
+      if (cx !== void 0 && cy !== void 0) {
+        const canvasX = (cx - prev.panX) / prev.zoom;
+        const canvasY = (cy - prev.panY) / prev.zoom;
+        return { panX: cx - canvasX * newZoom, panY: cy - canvasY * newZoom, zoom: newZoom };
+      }
+      return { ...prev, zoom: newZoom };
+    });
+  }, []);
+  const resetView = react.useCallback(() => {
+    setState({ panX: 80, panY: 80, zoom: 1 });
+  }, []);
+  return {
+    state,
+    setState,
+    isPanning,
+    handleWheel,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp: stopPan,
+    handleMouseLeave,
+    zoomBy,
+    resetView
+  };
+}
+
+// src/components/VenueMapEditor/utils/snapUtils.ts
+var snapToGrid = (value, gridSize) => Math.round(value / gridSize) * gridSize;
+var snapPoint = (x, y, gridSize, enabled) => ({
+  x: enabled ? snapToGrid(x, gridSize) : x,
+  y: enabled ? snapToGrid(y, gridSize) : y
+});
+var findNearestNode = (x, y, nodes, threshold) => {
+  let best = null;
+  let bestDist = threshold;
+  for (const node of nodes) {
+    const dist = Math.hypot(node.x - x, node.y - y);
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = node;
+    }
+  }
+  return best;
+};
+
+// src/components/VenueMapEditor/utils/wallGeometry.ts
+function norm(v) {
+  const len = Math.hypot(v.x, v.y);
+  return len < 1e-10 ? { x: 1, y: 0 } : { x: v.x / len, y: v.y / len };
+}
+function perp(v) {
+  return { x: -v.y, y: v.x };
+}
+function add(a, b) {
+  return { x: a.x + b.x, y: a.y + b.y };
+}
+function scale(v, s) {
+  return { x: v.x * s, y: v.y * s };
+}
+function lineIntersect(p1, d1, p2, d2) {
+  const det = d1.x * d2.y - d1.y * d2.x;
+  if (Math.abs(det) < 1e-8) return null;
+  const dx = p2.x - p1.x, dy = p2.y - p1.y;
+  const s = (dx * d2.y - dy * d2.x) / det;
+  return { x: p1.x + s * d1.x, y: p1.y + s * d1.y };
+}
+function wallSegmentPath(ax, ay, bx, by, thickness, adjDirAtA, adjDirAtB) {
+  const dir = norm({ x: bx - ax, y: by - ay });
+  const n = perp(dir);
+  const h = thickness / 2;
+  const A = { x: ax, y: ay };
+  const B = { x: bx, y: by };
+  let lA = add(A, scale(n, h));
+  let rA = add(A, scale(n, -h));
+  let lB = add(B, scale(n, h));
+  let rB = add(B, scale(n, -h));
+  if (adjDirAtA) {
+    const n2 = perp(adjDirAtA);
+    const mL = lineIntersect(add(A, scale(n, h)), dir, add(A, scale(n2, h)), adjDirAtA);
+    const mR = lineIntersect(add(A, scale(n, -h)), dir, add(A, scale(n2, -h)), adjDirAtA);
+    if (mL) lA = mL;
+    if (mR) rA = mR;
+  }
+  if (adjDirAtB) {
+    const n2 = perp(adjDirAtB);
+    const mL = lineIntersect(add(B, scale(n, h)), dir, add(B, scale(n2, h)), adjDirAtB);
+    const mR = lineIntersect(add(B, scale(n, -h)), dir, add(B, scale(n2, -h)), adjDirAtB);
+    if (mL) lB = mL;
+    if (mR) rB = mR;
+  }
+  return `M ${lA.x} ${lA.y} L ${lB.x} ${lB.y} L ${rB.x} ${rB.y} L ${rA.x} ${rA.y} Z`;
+}
+function GridOverlay({ gridSize }) {
+  const majorSize = gridSize * 5;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "pattern",
+        {
+          id: "vme-grid-minor",
+          width: gridSize,
+          height: gridSize,
+          patternUnits: "userSpaceOnUse",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: `M ${gridSize} 0 L 0 0 0 ${gridSize}`,
+              fill: "none",
+              stroke: "#e2e8f0",
+              strokeWidth: 0.5
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "pattern",
+        {
+          id: "vme-grid-major",
+          width: majorSize,
+          height: majorSize,
+          patternUnits: "userSpaceOnUse",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                width: majorSize,
+                height: majorSize,
+                fill: "url(#vme-grid-minor)"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: `M ${majorSize} 0 L 0 0 0 ${majorSize}`,
+                fill: "none",
+                stroke: "#cbd5e1",
+                strokeWidth: 1
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: -5e4,
+        y: -5e4,
+        width: 1e5,
+        height: 1e5,
+        fill: "url(#vme-grid-major)"
+      }
+    )
+  ] });
+}
+function useDrag(svgRef, panZoomRef, callbacks) {
+  const cbRef = react.useRef(callbacks);
+  cbRef.current = callbacks;
+  const lastCanvas = react.useRef({ x: 0, y: 0 });
+  const toCanvas = react.useCallback(
+    (clientX, clientY) => {
+      const rect = svgRef.current?.getBoundingClientRect() ?? { left: 0, top: 0 };
+      const { panX, panY, zoom } = panZoomRef.current;
+      return {
+        x: (clientX - rect.left - panX) / zoom,
+        y: (clientY - rect.top - panY) / zoom
+      };
+    },
+    [svgRef, panZoomRef]
+  );
+  const handleMouseDown = react.useCallback(
+    (e) => {
+      if (e.button !== 0) return;
+      e.stopPropagation();
+      e.preventDefault();
+      const canvas = toCanvas(e.clientX, e.clientY);
+      lastCanvas.current = canvas;
+      cbRef.current.onDragStart?.(canvas.x, canvas.y);
+      const onMove = (ev) => {
+        const c = toCanvas(ev.clientX, ev.clientY);
+        const dx = c.x - lastCanvas.current.x;
+        const dy = c.y - lastCanvas.current.y;
+        lastCanvas.current = c;
+        cbRef.current.onDragMove(dx, dy, c.x, c.y);
+      };
+      const onUp = (ev) => {
+        const c = toCanvas(ev.clientX, ev.clientY);
+        cbRef.current.onDragEnd?.(c.x, c.y);
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    },
+    [toCanvas]
+  );
+  return { handleMouseDown };
+}
+var HANDLE_CURSORS = {
+  nw: "nwse-resize",
+  ne: "nesw-resize",
+  se: "nwse-resize",
+  sw: "nesw-resize",
+  n: "ns-resize",
+  s: "ns-resize",
+  e: "ew-resize",
+  w: "ew-resize"
+};
+var MIN_SIZE = 50;
+var HANDLE_PX = 8;
+function applyHandleDelta(area, handle, dx, dy) {
+  const ax = area.x ?? 0;
+  const ay = area.y ?? 0;
+  const aw = area.width ?? 400;
+  const ah = area.height ?? 300;
+  const right = ax + aw;
+  const bottom = ay + ah;
+  let nx = ax, ny = ay, nw = aw, nh = ah;
+  switch (handle) {
+    case "nw":
+      nw = Math.max(MIN_SIZE, aw - dx);
+      nh = Math.max(MIN_SIZE, ah - dy);
+      nx = right - nw;
+      ny = bottom - nh;
+      break;
+    case "n":
+      nh = Math.max(MIN_SIZE, ah - dy);
+      ny = bottom - nh;
+      break;
+    case "ne":
+      nw = Math.max(MIN_SIZE, aw + dx);
+      nh = Math.max(MIN_SIZE, ah - dy);
+      ny = bottom - nh;
+      break;
+    case "e":
+      nw = Math.max(MIN_SIZE, aw + dx);
+      break;
+    case "se":
+      nw = Math.max(MIN_SIZE, aw + dx);
+      nh = Math.max(MIN_SIZE, ah + dy);
+      break;
+    case "s":
+      nh = Math.max(MIN_SIZE, ah + dy);
+      break;
+    case "sw":
+      nw = Math.max(MIN_SIZE, aw - dx);
+      nh = Math.max(MIN_SIZE, ah + dy);
+      nx = right - nw;
+      break;
+    case "w":
+      nw = Math.max(MIN_SIZE, aw - dx);
+      nx = right - nw;
+      break;
+  }
+  return { ...area, x: nx, y: ny, width: nw, height: nh };
+}
+function PolygonArtboard({
+  area,
+  onResize,
+  onMove,
+  onResizeCommit,
+  svgRef,
+  panZoomRef,
+  zoom,
+  readOnly = false
+}) {
+  const pts = area.points ?? [];
+  const areaRef = react.useRef(area);
+  areaRef.current = area;
+  const activeVertex = react.useRef(null);
+  const vertexStart = react.useRef({ vx: 0, vy: 0, mx: 0, my: 0 });
+  const { handleMouseDown: handleVertexDown } = useDrag(svgRef, panZoomRef, {
+    onDragStart: (mx, my) => {
+      const idx = activeVertex.current;
+      if (idx === null) return;
+      const currentPts = areaRef.current.points ?? [];
+      vertexStart.current = { vx: currentPts[idx][0], vy: currentPts[idx][1], mx, my };
+    },
+    onDragMove: (_dx, _dy, canvasX, canvasY) => {
+      const idx = activeVertex.current;
+      if (idx === null) return;
+      const { vx, vy, mx, my } = vertexStart.current;
+      const newX = vx + (canvasX - mx);
+      const newY = vy + (canvasY - my);
+      const currentPts = areaRef.current.points ?? [];
+      const newPts = currentPts.map(
+        (p, i) => i === idx ? [newX, newY] : p
+      );
+      const newArea = { ...areaRef.current, points: newPts };
+      onResize(newArea);
+    },
+    onDragEnd: () => {
+      onResizeCommit?.(areaRef.current);
+      activeVertex.current = null;
+    }
+  });
+  const startVertexDrag = react.useCallback(
+    (e, idx) => {
+      activeVertex.current = idx;
+      handleVertexDown(e);
+    },
+    [handleVertexDown]
+  );
+  const { handleMouseDown: handleBodyDown } = useDrag(svgRef, panZoomRef, {
+    onDragMove: (dx, dy) => {
+      onMove?.(dx, dy);
+    }
+  });
+  const handleDeleteVertex = react.useCallback(
+    (e, idx) => {
+      e.stopPropagation();
+      const currentPts = areaRef.current.points ?? [];
+      if (currentPts.length <= 3) return;
+      const newPts = currentPts.filter((_, i) => i !== idx);
+      const newArea = { ...areaRef.current, points: newPts };
+      onResize(newArea);
+      onResizeCommit?.(newArea);
+    },
+    [onResize, onResizeCommit]
+  );
+  const handleAddVertex = react.useCallback(
+    (e, insertAfterIdx) => {
+      e.stopPropagation();
+      const currentPts = areaRef.current.points ?? [];
+      const a = currentPts[insertAfterIdx];
+      const b = currentPts[(insertAfterIdx + 1) % currentPts.length];
+      const mid = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
+      const newPts = [
+        ...currentPts.slice(0, insertAfterIdx + 1),
+        mid,
+        ...currentPts.slice(insertAfterIdx + 1)
+      ];
+      const newArea = { ...areaRef.current, points: newPts };
+      onResize(newArea);
+      onResizeCommit?.(newArea);
+    },
+    [onResize, onResizeCommit]
+  );
+  if (pts.length < 3) return null;
+  const pointsStr = pts.map(([x, y]) => `${x},${y}`).join(" ");
+  const hs = HANDLE_PX / zoom;
+  const sw = 1.5 / zoom;
+  const dash = `${6 / zoom},${3 / zoom}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("filter", { id: "vme-artboard-shadow", x: "-4%", y: "-4%", width: "108%", height: "108%", children: /* @__PURE__ */ jsxRuntime.jsx("feDropShadow", { dx: 0, dy: 3 / zoom, stdDeviation: 6 / zoom, floodOpacity: 0.12 }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "polygon",
+      {
+        points: pointsStr,
+        fill: "#fafaf9",
+        stroke: "none",
+        filter: "url(#vme-artboard-shadow)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "polygon",
+      {
+        points: pointsStr,
+        fill: "transparent",
+        stroke: "#94a3b8",
+        strokeWidth: sw,
+        strokeDasharray: dash,
+        style: { cursor: readOnly ? "default" : "move" },
+        onMouseDown: readOnly ? void 0 : handleBodyDown
+      }
+    ),
+    !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      pts.map(([ax, ay], i) => {
+        const [bx, by] = pts[(i + 1) % pts.length];
+        const mx = (ax + bx) / 2;
+        const my = (ay + by) / 2;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: mx - hs * 0.75,
+            y: my - hs * 0.75,
+            width: hs * 1.5,
+            height: hs * 1.5,
+            fill: "white",
+            stroke: "#94a3b8",
+            strokeWidth: sw,
+            style: { cursor: "copy", transform: `rotate(45deg)`, transformOrigin: `${mx}px ${my}px` },
+            onClick: (e) => handleAddVertex(e, i)
+          },
+          `mid-${i}`
+        );
+      }),
+      pts.map(([vx, vy], i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "rect",
+        {
+          x: vx - hs,
+          y: vy - hs,
+          width: hs * 2,
+          height: hs * 2,
+          rx: 1 / zoom,
+          fill: "white",
+          stroke: "#3b82f6",
+          strokeWidth: sw,
+          style: { cursor: "move" },
+          onMouseDown: (e) => startVertexDrag(e, i),
+          onDoubleClick: (e) => handleDeleteVertex(e, i)
+        },
+        `v-${i}`
+      ))
+    ] })
+  ] });
+}
+function RectArtboard({
+  area,
+  onResize,
+  onMove,
+  onResizeCommit,
+  svgRef,
+  panZoomRef,
+  zoom,
+  readOnly = false
+}) {
+  const activeHandle = react.useRef(null);
+  const areaRef = react.useRef(area);
+  areaRef.current = area;
+  const { handleMouseDown: handleHandleDown } = useDrag(svgRef, panZoomRef, {
+    onDragMove: (dx, dy) => {
+      if (!activeHandle.current) return;
+      onResize(applyHandleDelta(areaRef.current, activeHandle.current, dx, dy));
+    },
+    onDragEnd: () => {
+      onResizeCommit?.(areaRef.current);
+      activeHandle.current = null;
+    }
+  });
+  const startHandleDrag = react.useCallback(
+    (e, type) => {
+      activeHandle.current = type;
+      handleHandleDown(e);
+    },
+    [handleHandleDown]
+  );
+  const { handleMouseDown: handleBodyDown } = useDrag(svgRef, panZoomRef, {
+    onDragMove: (dx, dy) => {
+      onMove?.(dx, dy);
+    }
+  });
+  const ax = area.x ?? 0;
+  const ay = area.y ?? 0;
+  const aw = area.width ?? 400;
+  const ah = area.height ?? 300;
+  const hs = HANDLE_PX / zoom;
+  const sw = 1.5 / zoom;
+  const dash = `${6 / zoom},${3 / zoom}`;
+  const handles = [
+    { type: "nw", cx: ax, cy: ay },
+    { type: "n", cx: ax + aw / 2, cy: ay },
+    { type: "ne", cx: ax + aw, cy: ay },
+    { type: "e", cx: ax + aw, cy: ay + ah / 2 },
+    { type: "se", cx: ax + aw, cy: ay + ah },
+    { type: "s", cx: ax + aw / 2, cy: ay + ah },
+    { type: "sw", cx: ax, cy: ay + ah },
+    { type: "w", cx: ax, cy: ay + ah / 2 }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("filter", { id: "vme-artboard-shadow", x: "-4%", y: "-4%", width: "108%", height: "108%", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "feDropShadow",
+      {
+        dx: 0,
+        dy: 3 / zoom,
+        stdDeviation: 6 / zoom,
+        floodOpacity: 0.12
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: ax,
+        y: ay,
+        width: aw,
+        height: ah,
+        fill: "#fafaf9",
+        stroke: "none",
+        filter: "url(#vme-artboard-shadow)"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: ax,
+        y: ay,
+        width: aw,
+        height: ah,
+        fill: "transparent",
+        stroke: "#94a3b8",
+        strokeWidth: sw,
+        strokeDasharray: dash,
+        style: { cursor: readOnly ? "default" : "move" },
+        onMouseDown: readOnly ? void 0 : handleBodyDown
+      }
+    ),
+    !readOnly && handles.map(({ type, cx, cy }) => /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: cx - hs,
+        y: cy - hs,
+        width: hs * 2,
+        height: hs * 2,
+        rx: 1 / zoom,
+        fill: "white",
+        stroke: "#3b82f6",
+        strokeWidth: sw,
+        style: { cursor: HANDLE_CURSORS[type] },
+        onMouseDown: (e) => startHandleDrag(e, type)
+      },
+      type
+    ))
+  ] });
+}
+function Artboard(props) {
+  if (props.area.shape === "polygon") {
+    return /* @__PURE__ */ jsxRuntime.jsx(PolygonArtboard, { ...props });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(RectArtboard, { ...props });
+}
+function vecNorm(v) {
+  const len = Math.hypot(v.x, v.y);
+  return len < 1e-10 ? { x: 1, y: 0 } : { x: v.x / len, y: v.y / len };
+}
+function WallLayer({ nodes, walls, zoom, tool, onDeleteWall }) {
+  if (walls.length === 0 && nodes.length === 0) return null;
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  const nodeWalls = /* @__PURE__ */ new Map();
+  for (const n of nodes) nodeWalls.set(n.id, []);
+  for (const wall of walls) {
+    nodeWalls.get(wall.nodeAId)?.push(wall);
+    nodeWalls.get(wall.nodeBId)?.push(wall);
+  }
+  const sw = 0.75 / zoom;
+  const isErase = tool === "ERASE";
+  const items = walls.map((wall) => {
+    const nodeA = nodeMap.get(wall.nodeAId);
+    const nodeB = nodeMap.get(wall.nodeBId);
+    if (!nodeA || !nodeB) return null;
+    const wallsAtA = (nodeWalls.get(wall.nodeAId) ?? []).filter((w) => w.id !== wall.id);
+    let adjDirAtA = null;
+    if (wallsAtA.length === 1) {
+      const w2 = wallsAtA[0];
+      const otherId = w2.nodeAId === wall.nodeAId ? w2.nodeBId : w2.nodeAId;
+      const other = nodeMap.get(otherId);
+      if (other) adjDirAtA = vecNorm({ x: other.x - nodeA.x, y: other.y - nodeA.y });
+    }
+    const wallsAtB = (nodeWalls.get(wall.nodeBId) ?? []).filter((w) => w.id !== wall.id);
+    let adjDirAtB = null;
+    if (wallsAtB.length === 1) {
+      const w2 = wallsAtB[0];
+      const otherId = w2.nodeAId === wall.nodeBId ? w2.nodeBId : w2.nodeAId;
+      const other = nodeMap.get(otherId);
+      if (other) adjDirAtB = vecNorm({ x: other.x - nodeB.x, y: other.y - nodeB.y });
+    }
+    const path = wallSegmentPath(
+      nodeA.x,
+      nodeA.y,
+      nodeB.x,
+      nodeB.y,
+      wall.thickness,
+      adjDirAtA,
+      adjDirAtB
+    );
+    return { wall, path };
+  }).filter((x) => x !== null);
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    items.map(({ wall, path }) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: path,
+          fill: "#475569",
+          stroke: "#1e293b",
+          strokeWidth: sw,
+          strokeLinejoin: "miter",
+          style: { pointerEvents: "none" }
+        }
+      ),
+      isErase && /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: path,
+          fill: "transparent",
+          stroke: "transparent",
+          strokeWidth: Math.max(wall.thickness, 16) / zoom,
+          style: { cursor: "crosshair", pointerEvents: "all" },
+          onClick: () => onDeleteWall?.(wall.id)
+        }
+      )
+    ] }, wall.id)),
+    tool === "WALL" && nodes.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: node.x,
+        cy: node.y,
+        r: 4 / zoom,
+        fill: "#3b82f6",
+        stroke: "white",
+        strokeWidth: 1.5 / zoom,
+        style: { pointerEvents: "none" }
+      },
+      node.id
+    ))
+  ] });
+}
+function arrowPath(x, y, w, h) {
+  const headW = Math.min(w * 0.4, h * 0.9);
+  const tailH = h * 0.45;
+  const yt = y + (h - tailH) / 2;
+  const yb = y + (h + tailH) / 2;
+  return [
+    `M ${x} ${yt}`,
+    `L ${x + w - headW} ${yt}`,
+    `L ${x + w - headW} ${y}`,
+    `L ${x + w} ${y + h / 2}`,
+    `L ${x + w - headW} ${y + h}`,
+    `L ${x + w - headW} ${yb}`,
+    `L ${x} ${yb}`,
+    "Z"
+  ].join(" ");
+}
+var HANDLE_CURSORS2 = {
+  nw: "nwse-resize",
+  ne: "nesw-resize",
+  se: "nwse-resize",
+  sw: "nesw-resize",
+  n: "ns-resize",
+  s: "ns-resize",
+  e: "ew-resize",
+  w: "ew-resize"
+};
+var MIN_SIZE2 = 10;
+function rotateDelta(dx, dy, deg) {
+  const r = -deg * (Math.PI / 180);
+  return [dx * Math.cos(r) - dy * Math.sin(r), dx * Math.sin(r) + dy * Math.cos(r)];
+}
+function ElementNode({
+  element,
+  typeDef,
+  isSelected,
+  tool,
+  zoom,
+  svgRef,
+  panZoomRef,
+  snapEnabled,
+  gridSize,
+  statusFill,
+  onSelect,
+  onMove,
+  onMoveCommit,
+  onResize,
+  onResizeCommit,
+  onRotate,
+  onRotateCommit,
+  onDelete,
+  onViewerClick
+}) {
+  const { x, y, width: w, height: h, rotation } = element;
+  const cx = x + w / 2;
+  const cy = y + h / 2;
+  const sw = 1.5 / zoom;
+  const hs = 7 / zoom;
+  const rotOffset = 22 / zoom;
+  const fontSize = Math.max(9 / zoom, Math.min(13 / zoom, h * 0.35));
+  const startPos = react.useRef({ elX: 0, elY: 0, mouseX: 0, mouseY: 0 });
+  const lastMovePos = react.useRef({ x: 0, y: 0 });
+  const { handleMouseDown: handleBodyDown } = useDrag(svgRef, panZoomRef, {
+    onDragStart: (mx, my) => {
+      startPos.current = { elX: element.x, elY: element.y, mouseX: mx, mouseY: my };
+      lastMovePos.current = { x: element.x, y: element.y };
+    },
+    onDragMove: (_dx, _dy, canvasX, canvasY) => {
+      let nx = startPos.current.elX + (canvasX - startPos.current.mouseX);
+      let ny = startPos.current.elY + (canvasY - startPos.current.mouseY);
+      if (snapEnabled) {
+        nx = snapToGrid(nx, gridSize);
+        ny = snapToGrid(ny, gridSize);
+      }
+      lastMovePos.current = { x: nx, y: ny };
+      onMove(nx, ny);
+    },
+    onDragEnd: () => {
+      onMoveCommit(lastMovePos.current.x, lastMovePos.current.y);
+    }
+  });
+  const activeHandle = react.useRef(null);
+  const startGeom = react.useRef({ x: 0, y: 0, w: 0, h: 0, mouseX: 0, mouseY: 0 });
+  const lastResizeGeom = react.useRef({ x: 0, y: 0, w: 0, h: 0 });
+  const { handleMouseDown: handleHandleDown } = useDrag(svgRef, panZoomRef, {
+    onDragStart: (mx, my) => {
+      startGeom.current = { x: element.x, y: element.y, w: element.width, h: element.height, mouseX: mx, mouseY: my };
+      lastResizeGeom.current = { x: element.x, y: element.y, w: element.width, h: element.height };
+    },
+    onDragMove: (_dx, _dy, canvasX, canvasY) => {
+      const type = activeHandle.current;
+      if (!type) return;
+      const totalDx = canvasX - startGeom.current.mouseX;
+      const totalDy = canvasY - startGeom.current.mouseY;
+      const [ldx, ldy] = rotateDelta(totalDx, totalDy, rotation);
+      const { x: sx, y: sy, w: sw_, h: sh } = startGeom.current;
+      const right = sx + sw_;
+      const bottom = sy + sh;
+      let nx = sx, ny = sy, nw = sw_, nh = sh;
+      switch (type) {
+        case "nw":
+          nw = Math.max(MIN_SIZE2, sw_ - ldx);
+          nh = Math.max(MIN_SIZE2, sh - ldy);
+          nx = right - nw;
+          ny = bottom - nh;
+          break;
+        case "n":
+          nh = Math.max(MIN_SIZE2, sh - ldy);
+          ny = bottom - nh;
+          break;
+        case "ne":
+          nw = Math.max(MIN_SIZE2, sw_ + ldx);
+          nh = Math.max(MIN_SIZE2, sh - ldy);
+          ny = bottom - nh;
+          break;
+        case "e":
+          nw = Math.max(MIN_SIZE2, sw_ + ldx);
+          break;
+        case "se":
+          nw = Math.max(MIN_SIZE2, sw_ + ldx);
+          nh = Math.max(MIN_SIZE2, sh + ldy);
+          break;
+        case "s":
+          nh = Math.max(MIN_SIZE2, sh + ldy);
+          break;
+        case "sw":
+          nw = Math.max(MIN_SIZE2, sw_ - ldx);
+          nh = Math.max(MIN_SIZE2, sh + ldy);
+          nx = right - nw;
+          break;
+        case "w":
+          nw = Math.max(MIN_SIZE2, sw_ - ldx);
+          nx = right - nw;
+          break;
+      }
+      if (snapEnabled) {
+        nw = Math.max(MIN_SIZE2, snapToGrid(nw, gridSize));
+        nh = Math.max(MIN_SIZE2, snapToGrid(nh, gridSize));
+      }
+      lastResizeGeom.current = { x: nx, y: ny, w: nw, h: nh };
+      onResize(nx, ny, nw, nh);
+    },
+    onDragEnd: () => {
+      const { x: rx, y: ry, w: rw, h: rh } = lastResizeGeom.current;
+      onResizeCommit(rx, ry, rw, rh);
+      activeHandle.current = null;
+    }
+  });
+  const startHandleDrag = react.useCallback(
+    (e, type) => {
+      activeHandle.current = type;
+      handleHandleDown(e);
+    },
+    [handleHandleDown]
+  );
+  const rotStart = react.useRef({ angleOffset: 0 });
+  const handleRotateDown = react.useCallback(
+    (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      const svgRect = svgRef.current?.getBoundingClientRect();
+      if (!svgRect) return;
+      const { panX, panY, zoom: z } = panZoomRef.current;
+      const mcx = (e.clientX - svgRect.left - panX) / z;
+      const mcy = (e.clientY - svgRect.top - panY) / z;
+      const initAngle = Math.atan2(mcy - cy, mcx - cx) * (180 / Math.PI);
+      rotStart.current.angleOffset = element.rotation - initAngle;
+      let currentRot = element.rotation;
+      const onMove2 = (ev) => {
+        const rect = svgRef.current?.getBoundingClientRect();
+        if (!rect) return;
+        const { panX: px, panY: py, zoom: z2 } = panZoomRef.current;
+        const mx2 = (ev.clientX - rect.left - px) / z2;
+        const my2 = (ev.clientY - rect.top - py) / z2;
+        let newRot = Math.atan2(my2 - cy, mx2 - cx) * (180 / Math.PI) + rotStart.current.angleOffset;
+        if (ev.shiftKey) newRot = Math.round(newRot / 15) * 15;
+        currentRot = newRot;
+        onRotate(newRot);
+      };
+      const onUp = () => {
+        onRotateCommit(currentRot);
+        window.removeEventListener("mousemove", onMove2);
+        window.removeEventListener("mouseup", onUp);
+      };
+      window.addEventListener("mousemove", onMove2);
+      window.addEventListener("mouseup", onUp);
+    },
+    [cx, cy, element.rotation, panZoomRef, svgRef, onRotate, onRotateCommit]
+  );
+  const handleBodyClick = react.useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (onViewerClick) {
+        onViewerClick();
+        return;
+      }
+      if (tool === "ERASE") {
+        onDelete();
+        return;
+      }
+      if (tool === "SELECT") {
+        onSelect(e.ctrlKey || e.metaKey || e.shiftKey);
+      }
+    },
+    [tool, onDelete, onSelect, onViewerClick]
+  );
+  const fillColor = statusFill ?? typeDef.color;
+  const bodyCursor = onViewerClick ? "pointer" : tool === "ERASE" ? "crosshair" : tool === "SELECT" ? "move" : "default";
+  const customPath = typeDef.shape === "path" && typeDef.svgPath ? (() => {
+    const parts = (typeDef.viewBox ?? "0 0 100 100").split(/[\s,]+/).map(Number);
+    const vw = parts[2] ?? 100;
+    const vh = parts[3] ?? 100;
+    const scaleX = vw > 0 ? w / vw : 1;
+    const scaleY = vh > 0 ? h / vh : 1;
+    const avgScale = Math.sqrt(Math.abs(scaleX * scaleY)) || 1;
+    return { scaleX, scaleY, strokeWidth: sw / avgScale };
+  })() : null;
+  const handles = [
+    { type: "nw", hx: x, hy: y },
+    { type: "n", hx: x + w / 2, hy: y },
+    { type: "ne", hx: x + w, hy: y },
+    { type: "e", hx: x + w, hy: y + h / 2 },
+    { type: "se", hx: x + w, hy: y + h },
+    { type: "s", hx: x + w / 2, hy: y + h },
+    { type: "sw", hx: x, hy: y + h },
+    { type: "w", hx: x, hy: y + h / 2 }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `rotate(${rotation}, ${cx}, ${cy})`, children: [
+    typeDef.shape === "rect" && /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x,
+        y,
+        width: w,
+        height: h,
+        fill: fillColor,
+        stroke: isSelected ? "#3b82f6" : typeDef.strokeColor,
+        strokeWidth: isSelected ? sw * 1.5 : sw,
+        style: { cursor: bodyCursor },
+        onMouseDown: tool === "SELECT" && !onViewerClick ? handleBodyDown : void 0,
+        onClick: handleBodyClick
+      }
+    ),
+    typeDef.shape === "circle" && /* @__PURE__ */ jsxRuntime.jsx(
+      "ellipse",
+      {
+        cx,
+        cy,
+        rx: w / 2,
+        ry: h / 2,
+        fill: fillColor,
+        stroke: isSelected ? "#3b82f6" : typeDef.strokeColor,
+        strokeWidth: isSelected ? sw * 1.5 : sw,
+        style: { cursor: bodyCursor },
+        onMouseDown: tool === "SELECT" && !onViewerClick ? handleBodyDown : void 0,
+        onClick: handleBodyClick
+      }
+    ),
+    typeDef.shape === "arrow" && /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: arrowPath(x, y, w, h),
+        fill: fillColor,
+        stroke: isSelected ? "#3b82f6" : typeDef.strokeColor,
+        strokeWidth: isSelected ? sw * 1.5 : sw,
+        style: { cursor: bodyCursor },
+        onMouseDown: tool === "SELECT" && !onViewerClick ? handleBodyDown : void 0,
+        onClick: handleBodyClick
+      }
+    ),
+    typeDef.shape === "path" && customPath && typeDef.svgPath && /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${x}, ${y}) scale(${customPath.scaleX}, ${customPath.scaleY})`, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: typeDef.svgPath,
+        fill: fillColor,
+        stroke: isSelected ? "#3b82f6" : typeDef.strokeColor,
+        strokeWidth: isSelected ? customPath.strokeWidth * 1.5 : customPath.strokeWidth,
+        style: { cursor: bodyCursor },
+        onMouseDown: tool === "SELECT" && !onViewerClick ? handleBodyDown : void 0,
+        onClick: handleBodyClick
+      }
+    ) }),
+    (element.label ?? typeDef.label) && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: cx,
+        y: cy,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fontSize,
+        fill: typeDef.strokeColor,
+        style: { pointerEvents: "none", userSelect: "none" },
+        children: element.label ?? typeDef.label
+      }
+    ),
+    isSelected && tool === "SELECT" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          x1: cx,
+          y1: y,
+          x2: cx,
+          y2: y - rotOffset,
+          stroke: "#3b82f6",
+          strokeWidth: sw,
+          style: { pointerEvents: "none" }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          cx,
+          cy: y - rotOffset,
+          r: hs * 0.8,
+          fill: "white",
+          stroke: "#3b82f6",
+          strokeWidth: sw,
+          style: { cursor: "grab" },
+          onMouseDown: handleRotateDown
+        }
+      ),
+      handles.map(({ type, hx, hy }) => /* @__PURE__ */ jsxRuntime.jsx(
+        "rect",
+        {
+          x: hx - hs,
+          y: hy - hs,
+          width: hs * 2,
+          height: hs * 2,
+          rx: 1 / zoom,
+          fill: "white",
+          stroke: "#3b82f6",
+          strokeWidth: sw,
+          style: { cursor: HANDLE_CURSORS2[type] },
+          onMouseDown: (e) => startHandleDrag(e, type)
+        },
+        type
+      ))
+    ] })
+  ] });
+}
+var SNAP_PX = 10;
+var DEFAULT_THICKNESS = 8;
+function insideFloor(x, y, floor) {
+  const { area } = floor;
+  if (area.shape === "rect") {
+    const ax = area.x ?? 0, ay = area.y ?? 0, aw = area.width ?? 0, ah = area.height ?? 0;
+    return x >= ax && x <= ax + aw && y >= ay && y <= ay + ah;
+  }
+  if (area.shape === "polygon") {
+    const pts = area.points ?? [];
+    let inside = false;
+    for (let i = 0, j = pts.length - 1; i < pts.length; j = i++) {
+      const [xi, yi] = pts[i], [xj, yj] = pts[j];
+      if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) inside = !inside;
+    }
+    return inside;
+  }
+  return true;
+}
+function rectsIntersect(a, b) {
+  return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+}
+function EditorCanvas({
+  floor,
+  tool,
+  gridSize,
+  showGrid,
+  readOnly,
+  snapEnabled,
+  elementTypeDefs,
+  selectedIds,
+  statusMap,
+  onAreaResize,
+  onAreaMove,
+  onAreaResizeCommit,
+  onSelectElement,
+  onSelectSet,
+  onClearSelection,
+  onMoveElement,
+  onMoveCommit,
+  onResizeElement,
+  onResizeCommit,
+  onRotateElement,
+  onRotateCommit,
+  onDeleteElement,
+  onPlaceElement,
+  onAddWall,
+  onDeleteWall,
+  onViewerElementClick,
+  onZoomChange,
+  onRegisterZoomBy,
+  onRegisterResetView
+}) {
+  const svgRef = react.useRef(null);
+  const {
+    state: panZoom,
+    isPanning,
+    handleWheel,
+    handleMouseDown: handlePanMouseDown,
+    handleMouseMove: handlePanMouseMove,
+    handleMouseUp: handlePanMouseUp,
+    handleMouseLeave,
+    zoomBy,
+    resetView
+  } = usePanZoom(1, tool === "PAN");
+  const panZoomRef = react.useRef(panZoom);
+  panZoomRef.current = panZoom;
+  const [lasso, setLasso] = react.useState(null);
+  const lassoStart = react.useRef(null);
+  const [wallDraw, setWallDraw] = react.useState(null);
+  react.useEffect(() => {
+    if (tool !== "WALL") setWallDraw(null);
+  }, [tool]);
+  react.useEffect(() => {
+    onRegisterZoomBy?.(zoomBy);
+    onRegisterResetView?.(resetView);
+  }, []);
+  react.useEffect(() => {
+    onZoomChange?.(panZoom.zoom);
+  }, [panZoom.zoom, onZoomChange]);
+  react.useEffect(() => {
+    const el = svgRef.current;
+    if (!el) return;
+    const prevent = (e) => e.preventDefault();
+    el.addEventListener("wheel", prevent, { passive: false });
+    return () => el.removeEventListener("wheel", prevent);
+  }, []);
+  const toCanvas = react.useCallback((clientX, clientY) => {
+    const rect = svgRef.current?.getBoundingClientRect() ?? { left: 0, top: 0 };
+    const { panX: panX2, panY: panY2, zoom: zoom2 } = panZoomRef.current;
+    return { x: (clientX - rect.left - panX2) / zoom2, y: (clientY - rect.top - panY2) / zoom2 };
+  }, []);
+  const findSnapNode = react.useCallback((cx, cy, excludeId) => {
+    const threshold = SNAP_PX / panZoomRef.current.zoom;
+    const candidates = excludeId ? floor.wallNodes.filter((n) => n.id !== excludeId) : floor.wallNodes;
+    return findNearestNode(cx, cy, candidates, threshold);
+  }, [floor.wallNodes]);
+  const handleSvgMouseDown = react.useCallback((e) => {
+    if (e.button === 1 || e.button === 0 && tool === "PAN") {
+      handlePanMouseDown(e);
+      return;
+    }
+    if (e.button !== 0) return;
+    const raw = toCanvas(e.clientX, e.clientY);
+    const { x: cx, y: cy } = snapPoint(raw.x, raw.y, gridSize, snapEnabled);
+    if (tool === "WALL") {
+      if (!wallDraw) {
+        if (!insideFloor(cx, cy, floor)) return;
+        const snapNode = findSnapNode(cx, cy, null);
+        const sx = snapNode ? snapNode.x : cx;
+        const sy = snapNode ? snapNode.y : cy;
+        setWallDraw({
+          startX: sx,
+          startY: sy,
+          snapStartNode: snapNode,
+          previewX: cx,
+          previewY: cy,
+          snapEndNode: null
+        });
+      } else {
+        const snapNode = findSnapNode(cx, cy, wallDraw.snapStartNode?.id ?? null);
+        let ex, ey;
+        if (snapNode) {
+          ex = snapNode.x;
+          ey = snapNode.y;
+        } else {
+          const { area } = floor;
+          if (area.shape === "rect") {
+            const ax = area.x ?? 0, ay = area.y ?? 0;
+            const aw = area.width ?? 0, ah = area.height ?? 0;
+            ex = Math.max(ax, Math.min(ax + aw, cx));
+            ey = Math.max(ay, Math.min(ay + ah, cy));
+          } else if (area.shape === "polygon") {
+            const pts = area.points ?? [];
+            if (insideFloor(cx, cy, floor)) {
+              ex = cx;
+              ey = cy;
+            } else {
+              let bestDist = Infinity;
+              ex = cx;
+              ey = cy;
+              for (let i = 0, j = pts.length - 1; i < pts.length; j = i++) {
+                const [ax2, ay2] = pts[j], [bx2, by2] = pts[i];
+                const dx = bx2 - ax2, dy = by2 - ay2;
+                const len2 = dx * dx + dy * dy;
+                const t = len2 > 0 ? Math.max(0, Math.min(1, ((cx - ax2) * dx + (cy - ay2) * dy) / len2)) : 0;
+                const nx = ax2 + t * dx, ny = ay2 + t * dy;
+                const dist2 = (cx - nx) ** 2 + (cy - ny) ** 2;
+                if (dist2 < bestDist) {
+                  bestDist = dist2;
+                  ex = nx;
+                  ey = ny;
+                }
+              }
+            }
+          } else {
+            ex = cx;
+            ey = cy;
+          }
+        }
+        const dist = Math.hypot(ex - wallDraw.startX, ey - wallDraw.startY);
+        if (dist > 2) {
+          onAddWall?.(
+            wallDraw.startX,
+            wallDraw.startY,
+            ex,
+            ey,
+            wallDraw.snapStartNode?.id ?? null,
+            snapNode?.id ?? null
+          );
+        }
+        setWallDraw({
+          startX: ex,
+          startY: ey,
+          snapStartNode: snapNode,
+          previewX: cx,
+          previewY: cy,
+          snapEndNode: null
+        });
+      }
+      return;
+    }
+    if (tool === "PLACE") {
+      onPlaceElement(cx, cy);
+      return;
+    }
+    if (tool === "SELECT") {
+      lassoStart.current = { cx, cy };
+      setLasso({ x: cx, y: cy, w: 0, h: 0 });
+    }
+  }, [
+    handlePanMouseDown,
+    tool,
+    toCanvas,
+    gridSize,
+    snapEnabled,
+    wallDraw,
+    findSnapNode,
+    onAddWall,
+    onPlaceElement
+  ]);
+  const handleSvgMouseMove = react.useCallback((e) => {
+    handlePanMouseMove(e);
+    const raw = toCanvas(e.clientX, e.clientY);
+    const { x: cx, y: cy } = snapPoint(raw.x, raw.y, gridSize, snapEnabled);
+    if (tool === "WALL" && wallDraw) {
+      const snapNode = findSnapNode(cx, cy, wallDraw.snapStartNode?.id ?? null);
+      setWallDraw(
+        (prev) => prev ? { ...prev, previewX: cx, previewY: cy, snapEndNode: snapNode } : null
+      );
+      return;
+    }
+    if (tool === "SELECT" && lassoStart.current) {
+      const lx = Math.min(cx, lassoStart.current.cx);
+      const ly = Math.min(cy, lassoStart.current.cy);
+      setLasso({ x: lx, y: ly, w: Math.abs(cx - lassoStart.current.cx), h: Math.abs(cy - lassoStart.current.cy) });
+    }
+  }, [handlePanMouseMove, tool, toCanvas, gridSize, snapEnabled, wallDraw, findSnapNode]);
+  const handleSvgMouseUp = react.useCallback((e) => {
+    handlePanMouseUp(e);
+    if (lassoStart.current && lasso) {
+      if (lasso.w > 4 / panZoom.zoom || lasso.h > 4 / panZoom.zoom) {
+        const ids = floor.elements.filter((el) => rectsIntersect(lasso, { x: el.x, y: el.y, w: el.width, h: el.height })).map((el) => el.id);
+        if (ids.length > 0) onSelectSet(ids);
+        else if (!e.ctrlKey && !e.metaKey) onClearSelection();
+      } else {
+        if (!e.ctrlKey && !e.metaKey) onClearSelection();
+      }
+      lassoStart.current = null;
+      setLasso(null);
+    }
+  }, [handlePanMouseUp, lasso, panZoom.zoom, floor.elements, onSelectSet, onClearSelection]);
+  const handleContextMenu = react.useCallback((e) => {
+    e.preventDefault();
+    if (tool === "WALL") setWallDraw(null);
+  }, [tool]);
+  const cursor = isPanning ? "grabbing" : tool === "PAN" ? "grab" : tool === "WALL" ? "crosshair" : tool === "PLACE" ? "crosshair" : tool === "ERASE" ? "crosshair" : "default";
+  const { panX, panY, zoom } = panZoom;
+  const previewPath = wallDraw && (() => {
+    const ex = wallDraw.snapEndNode?.x ?? wallDraw.previewX;
+    const ey = wallDraw.snapEndNode?.y ?? wallDraw.previewY;
+    const dist = Math.hypot(ex - wallDraw.startX, ey - wallDraw.startY);
+    return dist > 2 ? wallSegmentPath(wallDraw.startX, wallDraw.startY, ex, ey, DEFAULT_THICKNESS, null, null) : null;
+  })();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      ref: svgRef,
+      className: "w-full h-full select-none outline-none",
+      style: { cursor, display: "block" },
+      onWheel: handleWheel,
+      onMouseDown: handleSvgMouseDown,
+      onMouseMove: handleSvgMouseMove,
+      onMouseUp: handleSvgMouseUp,
+      onMouseLeave: handleMouseLeave,
+      onContextMenu: handleContextMenu,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${panX}, ${panY}) scale(${zoom})`, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: -5e4, y: -5e4, width: 1e5, height: 1e5, fill: "#f1f5f9" }),
+        showGrid && /* @__PURE__ */ jsxRuntime.jsx(GridOverlay, { gridSize }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Artboard,
+          {
+            area: floor.area,
+            onResize: (area) => onAreaResize({ ...floor, area }),
+            onMove: onAreaMove,
+            onResizeCommit: (area) => onAreaResizeCommit?.({ ...floor, area }),
+            svgRef,
+            panZoomRef,
+            zoom,
+            readOnly: readOnly || tool !== "SELECT"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          WallLayer,
+          {
+            nodes: floor.wallNodes,
+            walls: floor.walls,
+            zoom,
+            tool,
+            onDeleteWall
+          }
+        ),
+        floor.elements.map((el) => {
+          const typeDef = elementTypeDefs.get(el.type);
+          if (!typeDef) return null;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            ElementNode,
+            {
+              element: el,
+              typeDef,
+              isSelected: selectedIds.has(el.id),
+              tool,
+              zoom,
+              svgRef,
+              panZoomRef,
+              snapEnabled,
+              gridSize,
+              statusFill: statusMap?.get(el.id),
+              onSelect: (multi) => onSelectElement(el.id, multi),
+              onMove: (x, y) => onMoveElement(el.id, x, y),
+              onMoveCommit: (x, y) => onMoveCommit(el.id, x, y),
+              onResize: (x, y, w, h) => onResizeElement(el.id, x, y, w, h),
+              onResizeCommit: (x, y, w, h) => onResizeCommit(el.id, x, y, w, h),
+              onRotate: (r) => onRotateElement(el.id, r),
+              onRotateCommit: (r) => onRotateCommit(el.id, r),
+              onDelete: () => onDeleteElement(el.id),
+              onViewerClick: onViewerElementClick ? () => onViewerElementClick(el.id) : void 0
+            },
+            el.id
+          );
+        }),
+        lasso && lasso.w > 0 && lasso.h > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: lasso.x,
+            y: lasso.y,
+            width: lasso.w,
+            height: lasso.h,
+            fill: "rgba(59,130,246,0.06)",
+            stroke: "#3b82f6",
+            strokeWidth: 1 / zoom,
+            strokeDasharray: `${4 / zoom},${2 / zoom}`,
+            style: { pointerEvents: "none" }
+          }
+        ),
+        wallDraw && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          previewPath && /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: previewPath,
+              fill: "#94a3b8",
+              fillOpacity: 0.45,
+              stroke: "#3b82f6",
+              strokeWidth: 1 / zoom,
+              strokeDasharray: `${5 / zoom},${3 / zoom}`,
+              style: { pointerEvents: "none" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: wallDraw.startX,
+              cy: wallDraw.startY,
+              r: 5 / zoom,
+              fill: "#3b82f6",
+              stroke: "white",
+              strokeWidth: 1.5 / zoom,
+              style: { pointerEvents: "none" }
+            }
+          ),
+          wallDraw.snapEndNode && /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: wallDraw.snapEndNode.x,
+              cy: wallDraw.snapEndNode.y,
+              r: 9 / zoom,
+              fill: "none",
+              stroke: "#3b82f6",
+              strokeWidth: 2 / zoom,
+              style: { pointerEvents: "none" }
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function NumField({ label, value, onChange, step = 1 }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-slate-400 uppercase tracking-wide", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "number",
+        value: Math.round(value),
+        step,
+        onChange: (e) => onChange(Number(e.target.value)),
+        className: "w-full border border-slate-200 rounded px-1.5 py-1 text-xs text-slate-700 focus:outline-none focus:ring-1 focus:ring-blue-400 bg-white"
+      }
+    )
+  ] });
+}
+function PropertiesPanel({
+  elements,
+  typeDefs,
+  onChangeLabel,
+  onChangeGeometry,
+  onDelete,
+  onDuplicate
+}) {
+  const count = elements.length;
+  const handleLabelChange = react.useCallback(
+    (id, e) => onChangeLabel(id, e.target.value),
+    [onChangeLabel]
+  );
+  if (count === 0) return null;
+  if (count > 1) {
+    const ids = elements.map((el2) => el2.id);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-56 shrink-0 border-l border-slate-200 bg-white flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 border-b border-slate-100 text-xs font-semibold text-slate-500 uppercase tracking-wide", children: "Propiedades" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center justify-center gap-3 p-4 text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl font-bold text-slate-700", children: count }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-slate-400", children: "elementos seleccionados" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 pb-3 flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onDuplicate(ids),
+            className: "w-full text-xs px-3 py-1.5 rounded border border-slate-200 text-slate-600 hover:bg-slate-50 transition-colors",
+            children: "Duplicar selecci\xF3n"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onDelete(ids),
+            className: "w-full text-xs px-3 py-1.5 rounded bg-red-50 border border-red-200 text-red-600 hover:bg-red-100 transition-colors",
+            children: "Eliminar selecci\xF3n"
+          }
+        )
+      ] })
+    ] });
+  }
+  const el = elements[0];
+  const typeDef = typeDefs.get(el.type);
+  const setGeom = (patch) => {
+    onChangeGeometry(
+      el.id,
+      patch.x ?? el.x,
+      patch.y ?? el.y,
+      patch.w ?? el.width,
+      patch.h ?? el.height,
+      patch.r ?? el.rotation
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-56 shrink-0 border-l border-slate-200 bg-white flex flex-col overflow-y-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 border-b border-slate-100 text-xs font-semibold text-slate-500 uppercase tracking-wide", children: "Propiedades" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-4 p-3", children: [
+      typeDef && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "w-3.5 h-3.5 rounded-sm shrink-0 border",
+            style: { background: typeDef.color, borderColor: typeDef.strokeColor }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-slate-700 truncate", children: typeDef.label })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-slate-400 uppercase tracking-wide", children: "Etiqueta" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: el.label ?? "",
+            placeholder: typeDef?.label ?? "",
+            onChange: (e) => handleLabelChange(el.id, e),
+            className: "w-full border border-slate-200 rounded px-1.5 py-1 text-xs text-slate-700 focus:outline-none focus:ring-1 focus:ring-blue-400 bg-white"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(NumField, { label: "X", value: el.x, onChange: (v) => setGeom({ x: v }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumField, { label: "Y", value: el.y, onChange: (v) => setGeom({ y: v }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(NumField, { label: "Ancho", value: el.width, onChange: (v) => setGeom({ w: Math.max(1, v) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(NumField, { label: "Alto", value: el.height, onChange: (v) => setGeom({ h: Math.max(1, v) }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(NumField, { label: "Rotaci\xF3n \xB0", value: el.rotation, onChange: (v) => setGeom({ r: v }), step: 15 }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-slate-400 uppercase tracking-wide", children: "\xA0" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setGeom({ r: 0 }),
+              className: "border border-slate-200 rounded px-1.5 py-1 text-xs text-slate-500 hover:bg-slate-50 transition-colors",
+              children: "Resetear"
+            }
+          )
+        ] })
+      ] }),
+      el.metadata && Object.keys(el.metadata).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-slate-400 uppercase tracking-wide", children: "Metadata" }),
+        Object.entries(el.metadata).map(([k, v]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-xs text-slate-500", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: k }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-slate-400 truncate", children: String(v) })
+        ] }, k))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 pb-3 flex flex-col gap-2 border-t border-slate-100 pt-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => onDuplicate([el.id]),
+          className: "w-full text-xs px-3 py-1.5 rounded border border-slate-200 text-slate-600 hover:bg-slate-50 transition-colors",
+          children: "Duplicar (Ctrl+D)"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => onDelete([el.id]),
+          className: "w-full text-xs px-3 py-1.5 rounded bg-red-50 border border-red-200 text-red-600 hover:bg-red-100 transition-colors",
+          children: "Eliminar"
+        }
+      )
+    ] })
+  ] });
+}
+function FloorTabs({
+  floors,
+  activeFloorId,
+  readOnly,
+  onSelect,
+  onAdd,
+  onRename,
+  onDelete,
+  onReorder
+}) {
+  const [editingId, setEditingId] = react.useState(null);
+  const [editValue, setEditValue] = react.useState("");
+  const inputRef = react.useRef(null);
+  const sorted = floors.slice().sort((a, b) => a.order - b.order);
+  const startEditing = react.useCallback((floor) => {
+    if (readOnly) return;
+    setEditingId(floor.id);
+    setEditValue(floor.name);
+    setTimeout(() => inputRef.current?.select(), 0);
+  }, [readOnly]);
+  const commitEdit = react.useCallback(() => {
+    if (editingId && editValue.trim()) {
+      onRename(editingId, editValue.trim());
+    }
+    setEditingId(null);
+  }, [editingId, editValue, onRename]);
+  const cancelEdit = react.useCallback(() => {
+    setEditingId(null);
+  }, []);
+  const handleKeyDown = react.useCallback((e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commitEdit();
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      cancelEdit();
+    }
+  }, [commitEdit, cancelEdit]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 px-2 py-1 border-b border-slate-200 bg-slate-50 text-xs overflow-x-auto", children: [
+    sorted.map((floor) => {
+      const isActive = floor.id === activeFloorId;
+      const idx = sorted.indexOf(floor);
+      const canMoveLeft = idx > 0;
+      const canMoveRight = idx < sorted.length - 1;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: [
+            "flex items-center gap-0.5 px-2 py-1 rounded-t border transition-colors shrink-0",
+            isActive ? "bg-white border-slate-300 text-slate-800 font-medium" : "border-transparent text-slate-500 hover:text-slate-700 cursor-pointer"
+          ].join(" "),
+          onClick: () => !isActive && onSelect(floor.id),
+          children: [
+            !readOnly && isActive && canMoveLeft && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "text-slate-400 hover:text-slate-700 px-0.5 leading-none",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onReorder(floor.id, "left");
+                },
+                title: "Mover a la izquierda",
+                children: "\u25C0"
+              }
+            ),
+            editingId === floor.id ? /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                value: editValue,
+                onChange: (e) => setEditValue(e.target.value),
+                onBlur: commitEdit,
+                onKeyDown: handleKeyDown,
+                onClick: (e) => e.stopPropagation(),
+                className: "w-24 border border-blue-400 rounded px-1 text-xs outline-none"
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                onDoubleClick: (e) => {
+                  e.stopPropagation();
+                  startEditing(floor);
+                },
+                className: "select-none",
+                children: floor.name
+              }
+            ),
+            !readOnly && isActive && canMoveRight && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "text-slate-400 hover:text-slate-700 px-0.5 leading-none",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onReorder(floor.id, "right");
+                },
+                title: "Mover a la derecha",
+                children: "\u25B6"
+              }
+            ),
+            !readOnly && floors.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "text-slate-400 hover:text-red-500 px-0.5 leading-none",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onDelete(floor.id);
+                },
+                title: "Eliminar planta",
+                children: "\xD7"
+              }
+            )
+          ]
+        },
+        floor.id
+      );
+    }),
+    !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: "flex items-center justify-center w-6 h-6 rounded border border-dashed border-slate-300 text-slate-400 hover:border-blue-400 hover:text-blue-500 transition-colors shrink-0",
+        onClick: onAdd,
+        title: "A\xF1adir planta",
+        children: "+"
+      }
+    )
+  ] });
+}
+function useHistory(initial) {
+  const [history, setHistory] = react.useState({
+    past: [],
+    present: initial,
+    future: []
+  });
+  const push = react.useCallback((next) => {
+    setHistory((h) => ({
+      past: [...h.past.slice(-49), h.present],
+      present: next,
+      future: []
+    }));
+  }, []);
+  const replace = react.useCallback((next) => {
+    setHistory((h) => ({ ...h, present: next }));
+  }, []);
+  const undo = react.useCallback(() => {
+    setHistory((h) => {
+      if (h.past.length === 0) return h;
+      const previous = h.past[h.past.length - 1];
+      return {
+        past: h.past.slice(0, -1),
+        present: previous,
+        future: [h.present, ...h.future]
+      };
+    });
+  }, []);
+  const redo = react.useCallback(() => {
+    setHistory((h) => {
+      if (h.future.length === 0) return h;
+      const next = h.future[0];
+      return {
+        past: [...h.past, h.present],
+        present: next,
+        future: h.future.slice(1)
+      };
+    });
+  }, []);
+  return {
+    map: history.present,
+    canUndo: history.past.length > 0,
+    canRedo: history.future.length > 0,
+    push,
+    replace,
+    undo,
+    redo
+  };
+}
+function useSelection() {
+  const [selectedIds, setSelectedIds] = react.useState(/* @__PURE__ */ new Set());
+  const select = react.useCallback((id, multi = false) => {
+    setSelectedIds((prev) => {
+      if (multi) {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        return next;
+      }
+      if (prev.size === 1 && prev.has(id)) return prev;
+      return /* @__PURE__ */ new Set([id]);
+    });
+  }, []);
+  const selectSet = react.useCallback((ids) => {
+    setSelectedIds(new Set(ids));
+  }, []);
+  const clear = react.useCallback(() => {
+    setSelectedIds((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Set());
+  }, []);
+  const isSelected = react.useCallback(
+    (id) => selectedIds.has(id),
+    [selectedIds]
+  );
+  return { selectedIds, select, selectSet, clear, isSelected };
+}
+
+// src/components/VenueMapEditor/utils/idGen.ts
+var genId = () => crypto.randomUUID();
+function pointInPolygon(px, py, pts) {
+  let inside = false;
+  for (let i = 0, j = pts.length - 1; i < pts.length; j = i++) {
+    const [xi, yi] = pts[i], [xj, yj] = pts[j];
+    if (yi > py !== yj > py && px < (xj - xi) * (py - yi) / (yj - yi) + xi) inside = !inside;
+  }
+  return inside;
+}
+function clampPointToPolygon(px, py, pts) {
+  let bestDist = Infinity, bx = pts[0][0], by = pts[0][1];
+  for (let i = 0, j = pts.length - 1; i < pts.length; j = i++) {
+    const [ax, ay] = pts[j], [bex, bey] = pts[i];
+    const dx = bex - ax, dy = bey - ay;
+    const len2 = dx * dx + dy * dy;
+    const t = len2 > 0 ? Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / len2)) : 0;
+    const nx = ax + t * dx, ny = ay + t * dy;
+    const dist = (px - nx) ** 2 + (py - ny) ** 2;
+    if (dist < bestDist) {
+      bestDist = dist;
+      bx = nx;
+      by = ny;
+    }
+  }
+  return { x: bx, y: by };
+}
+function clampToFloor(x, y, w, h, area) {
+  const s = Math.min(w, h);
+  const hs = s / 2;
+  const cx = x + w / 2;
+  const cy = y + h / 2;
+  if (area.shape === "rect") {
+    const ax = area.x ?? 0;
+    const ay = area.y ?? 0;
+    const aw = area.width ?? 0;
+    const ah = area.height ?? 0;
+    const ncx = aw >= s ? Math.max(ax + hs, Math.min(ax + aw - hs, cx)) : ax + aw / 2;
+    const ncy = ah >= s ? Math.max(ay + hs, Math.min(ay + ah - hs, cy)) : ay + ah / 2;
+    return { x: ncx - w / 2, y: ncy - h / 2 };
+  }
+  if (area.shape === "polygon") {
+    const pts = area.points ?? [];
+    if (pts.length < 3) return { x, y };
+    if (pointInPolygon(cx, cy, pts)) return { x, y };
+    const clamped = clampPointToPolygon(cx, cy, pts);
+    return { x: clamped.x - w / 2, y: clamped.y - h / 2 };
+  }
+  return { x, y };
+}
+function createDefaultMap() {
+  return {
+    id: genId(),
+    name: "Nuevo mapa",
+    floors: [
+      {
+        id: genId(),
+        name: "Planta 1",
+        order: 0,
+        area: { shape: "rect", x: 60, y: 60, width: 600, height: 400 },
+        wallNodes: [],
+        walls: [],
+        elements: []
+      }
+    ]
+  };
+}
+var EMPTY_DOMAIN_CONFIG = { id: "__empty__", name: "", elementTypes: [] };
+function updateFloor(map, updatedFloor) {
+  return {
+    ...map,
+    floors: map.floors.map((f) => f.id === updatedFloor.id ? updatedFloor : f)
+  };
+}
+function rectToPolygon(area) {
+  const ax = area.x ?? 0;
+  const ay = area.y ?? 0;
+  const aw = area.width ?? 400;
+  const ah = area.height ?? 300;
+  return {
+    shape: "polygon",
+    points: [
+      [ax, ay],
+      [ax + aw, ay],
+      [ax + aw, ay + ah],
+      [ax, ay + ah]
+    ]
+  };
+}
+function polygonToRect(area) {
+  const pts = area.points ?? [];
+  if (pts.length === 0) return { shape: "rect", x: 60, y: 60, width: 400, height: 300 };
+  const xs = pts.map((p) => p[0]);
+  const ys = pts.map((p) => p[1]);
+  const minX = Math.min(...xs);
+  const minY = Math.min(...ys);
+  const maxX = Math.max(...xs);
+  const maxY = Math.max(...ys);
+  return {
+    shape: "rect",
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+}
+function VenueMapEditor({
+  domainConfig = EMPTY_DOMAIN_CONFIG,
+  initialMap,
+  onChange,
+  width = "100%",
+  height = "600px",
+  gridSize = 20,
+  showGrid: showGridProp = true,
+  snapToGrid: snapEnabled = false,
+  readOnly = false,
+  fixed = false,
+  elementStatus,
+  onElementClick,
+  onElementTypeClick
+}) {
+  const initialMapRef = react.useRef(initialMap ?? createDefaultMap());
+  const { map, canUndo, canRedo, push, replace, undo, redo } = useHistory(
+    initialMapRef.current
+  );
+  const { selectedIds, select, selectSet, clear: clearSelection } = useSelection();
+  const [activeFloorId, setActiveFloorId] = react.useState(
+    () => initialMapRef.current.floors[0]?.id ?? ""
+  );
+  const [tool, setTool] = react.useState("SELECT");
+  const [showGrid, setShowGrid] = react.useState(showGridProp);
+  const [zoom, setZoom] = react.useState(1);
+  const [activePlaceTypeId, setActivePlaceTypeId] = react.useState(null);
+  const zoomByRef = react.useRef(() => void 0);
+  const resetViewRef = react.useRef(() => void 0);
+  const importInputRef = react.useRef(null);
+  const libraryInputRef = react.useRef(null);
+  const buildTypeDefs = react.useCallback(() => {
+    const m = new Map(domainConfig.elementTypes.map((t) => [t.id, t]));
+    const libs = map.libraries ?? {};
+    for (const group of Object.values(libs)) {
+      for (const t of group.objects) {
+        if (!m.has(t.id)) m.set(t.id, t);
+      }
+    }
+    return m;
+  }, [domainConfig, map.libraries]);
+  const elementTypeDefs = react.useRef(buildTypeDefs());
+  react.useEffect(() => {
+    elementTypeDefs.current = buildTypeDefs();
+  }, [buildTypeDefs]);
+  const paletteGroups = react.useMemo(() => {
+    const groups = [];
+    if (domainConfig.elementTypes.length > 0) {
+      groups.push({ id: domainConfig.id, name: domainConfig.name, types: domainConfig.elementTypes, isBase: true });
+    }
+    const libs = map.libraries ?? {};
+    for (const [gid, group] of Object.entries(libs)) {
+      groups.push({ id: gid, name: group.name, types: group.objects, isBase: false });
+    }
+    return groups;
+  }, [domainConfig, map.libraries]);
+  react.useEffect(() => {
+    if (activePlaceTypeId) return;
+    const firstType = paletteGroups[0]?.types[0];
+    if (firstType) setActivePlaceTypeId(firstType.id);
+  }, [paletteGroups, activePlaceTypeId]);
+  const lastEmittedMap = react.useRef(void 0);
+  const prevInitial = react.useRef(initialMap);
+  react.useEffect(() => {
+    lastEmittedMap.current = map;
+    onChange?.(map);
+  }, [map, onChange]);
+  react.useEffect(() => {
+    if (!initialMap) return;
+    if (initialMap === prevInitial.current) return;
+    prevInitial.current = initialMap;
+    if (initialMap === lastEmittedMap.current) return;
+    push(initialMap);
+    setActiveFloorId(initialMap.floors[0]?.id ?? "");
+  }, [initialMap, push]);
+  const activeFloor = map.floors.find((f) => f.id === activeFloorId) ?? map.floors[0];
+  const replaceFloor = react.useCallback(
+    (floor) => replace(updateFloor(map, floor)),
+    [map, replace]
+  );
+  const pushFloor = react.useCallback(
+    (floor) => push(updateFloor(map, floor)),
+    [map, push]
+  );
+  const handleAreaResize = react.useCallback(
+    (updatedFloor) => replaceFloor(updatedFloor),
+    [replaceFloor]
+  );
+  const handleAreaResizeCommit = react.useCallback(
+    (updatedFloor) => pushFloor(updatedFloor),
+    [pushFloor]
+  );
+  const handleAreaMove = react.useCallback(
+    (dx, dy) => {
+      if (!activeFloor) return;
+      const area = activeFloor.area;
+      const newArea = area.shape === "polygon" ? { ...area, points: (area.points ?? []).map(([x, y]) => [x + dx, y + dy]) } : { ...area, x: (area.x ?? 0) + dx, y: (area.y ?? 0) + dy };
+      replaceFloor({
+        ...activeFloor,
+        area: newArea,
+        wallNodes: activeFloor.wallNodes.map((n) => ({ ...n, x: n.x + dx, y: n.y + dy })),
+        elements: activeFloor.elements.map((el) => ({ ...el, x: el.x + dx, y: el.y + dy }))
+      });
+    },
+    [activeFloor, replaceFloor]
+  );
+  const handleToggleAreaShape = react.useCallback(() => {
+    if (!activeFloor) return;
+    const { area } = activeFloor;
+    const newArea = area.shape === "polygon" ? polygonToRect(area) : rectToPolygon(area);
+    pushFloor({ ...activeFloor, area: newArea });
+  }, [activeFloor, pushFloor]);
+  const handleAddFloor = react.useCallback(() => {
+    const maxOrder = map.floors.reduce((m, f) => Math.max(m, f.order), -1);
+    const newFloor = {
+      id: genId(),
+      name: `Planta ${map.floors.length + 1}`,
+      order: maxOrder + 1,
+      area: { shape: "rect", x: 60, y: 60, width: 600, height: 400 },
+      wallNodes: [],
+      walls: [],
+      elements: []
+    };
+    const newMap = { ...map, floors: [...map.floors, newFloor] };
+    push(newMap);
+    setActiveFloorId(newFloor.id);
+  }, [map, push]);
+  const handleRenameFloor = react.useCallback(
+    (id, name) => {
+      const floor = map.floors.find((f) => f.id === id);
+      if (!floor) return;
+      push(updateFloor(map, { ...floor, name }));
+    },
+    [map, push]
+  );
+  const handleDeleteFloor = react.useCallback(
+    (id) => {
+      if (map.floors.length <= 1) return;
+      const remaining = map.floors.filter((f) => f.id !== id);
+      const newMap = { ...map, floors: remaining };
+      push(newMap);
+      if (activeFloorId === id) {
+        setActiveFloorId(remaining[0]?.id ?? "");
+      }
+    },
+    [map, push, activeFloorId]
+  );
+  const handleReorderFloor = react.useCallback(
+    (id, direction) => {
+      const sorted = map.floors.slice().sort((a2, b2) => a2.order - b2.order);
+      const idx = sorted.findIndex((f) => f.id === id);
+      if (idx < 0) return;
+      const swapIdx = direction === "left" ? idx - 1 : idx + 1;
+      if (swapIdx < 0 || swapIdx >= sorted.length) return;
+      const a = sorted[idx];
+      const b = sorted[swapIdx];
+      const updatedFloors = map.floors.map((f) => {
+        if (f.id === a.id) return { ...f, order: b.order };
+        if (f.id === b.id) return { ...f, order: a.order };
+        return f;
+      });
+      push({ ...map, floors: updatedFloors });
+    },
+    [map, push]
+  );
+  const handleExportMap = react.useCallback(() => {
+    const blob = new Blob([JSON.stringify(map, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${map.name || "mapa"}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [map]);
+  const handleImportMap = react.useCallback(
+    (file) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        try {
+          const parsed = JSON.parse(e.target?.result);
+          push(parsed);
+          setActiveFloorId(parsed.floors[0]?.id ?? "");
+        } catch {
+        }
+      };
+      reader.readAsText(file);
+    },
+    [push]
+  );
+  const handleLoadLibrary = react.useCallback(
+    (file) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        try {
+          const parsed = JSON.parse(e.target?.result);
+          const merged = { ...map.libraries ?? {}, ...parsed };
+          push({ ...map, libraries: merged });
+        } catch {
+        }
+      };
+      reader.readAsText(file);
+    },
+    [map, push]
+  );
+  const handleRemoveLibraryGroup = react.useCallback(
+    (groupId) => {
+      const libs = { ...map.libraries ?? {} };
+      delete libs[groupId];
+      push({ ...map, libraries: Object.keys(libs).length > 0 ? libs : void 0 });
+    },
+    [map, push]
+  );
+  const DEFAULT_WALL_THICKNESS = 8;
+  const handleAddWall = react.useCallback(
+    (x1, y1, x2, y2, snapStartId, snapEndId) => {
+      if (!activeFloor) return;
+      const nodes = [...activeFloor.wallNodes];
+      let nodeAId;
+      if (snapStartId) {
+        nodeAId = snapStartId;
+      } else {
+        const n = { id: genId(), x: x1, y: y1 };
+        nodes.push(n);
+        nodeAId = n.id;
+      }
+      let nodeBId;
+      if (snapEndId) {
+        nodeBId = snapEndId;
+      } else {
+        const n = { id: genId(), x: x2, y: y2 };
+        nodes.push(n);
+        nodeBId = n.id;
+      }
+      const newWall = {
+        id: genId(),
+        nodeAId,
+        nodeBId,
+        thickness: DEFAULT_WALL_THICKNESS,
+        material: "concrete"
+      };
+      pushFloor({ ...activeFloor, wallNodes: nodes, walls: [...activeFloor.walls, newWall] });
+    },
+    [activeFloor, pushFloor, DEFAULT_WALL_THICKNESS]
+  );
+  const handleDeleteWall = react.useCallback(
+    (wallId) => {
+      if (!activeFloor) return;
+      const remainingWalls = activeFloor.walls.filter((w) => w.id !== wallId);
+      const usedNodeIds = new Set(remainingWalls.flatMap((w) => [w.nodeAId, w.nodeBId]));
+      const remainingNodes = activeFloor.wallNodes.filter((n) => usedNodeIds.has(n.id));
+      pushFloor({ ...activeFloor, walls: remainingWalls, wallNodes: remainingNodes });
+    },
+    [activeFloor, pushFloor]
+  );
+  const handleMoveElement = react.useCallback(
+    (id, x, y) => {
+      if (!activeFloor) return;
+      const el = activeFloor.elements.find((e) => e.id === id);
+      if (!el) return;
+      const { x: cx, y: cy } = clampToFloor(x, y, el.width, el.height, activeFloor.area);
+      replaceFloor({
+        ...activeFloor,
+        elements: activeFloor.elements.map((e) => e.id === id ? { ...e, x: cx, y: cy } : e)
+      });
+    },
+    [activeFloor, replaceFloor]
+  );
+  const handleMoveCommit = react.useCallback(
+    (id, x, y) => {
+      if (!activeFloor) return;
+      const el = activeFloor.elements.find((e) => e.id === id);
+      if (!el) return;
+      const { x: cx, y: cy } = clampToFloor(x, y, el.width, el.height, activeFloor.area);
+      pushFloor({
+        ...activeFloor,
+        elements: activeFloor.elements.map((e) => e.id === id ? { ...e, x: cx, y: cy } : e)
+      });
+    },
+    [activeFloor, pushFloor]
+  );
+  const handleResizeElement = react.useCallback(
+    (id, x, y, w, h) => {
+      if (!activeFloor) return;
+      replaceFloor({
+        ...activeFloor,
+        elements: activeFloor.elements.map(
+          (el) => el.id === id ? { ...el, x, y, width: w, height: h } : el
+        )
+      });
+    },
+    [activeFloor, replaceFloor]
+  );
+  const handleResizeCommit = react.useCallback(
+    (id, x, y, w, h) => {
+      if (!activeFloor) return;
+      pushFloor({
+        ...activeFloor,
+        elements: activeFloor.elements.map(
+          (el) => el.id === id ? { ...el, x, y, width: w, height: h } : el
+        )
+      });
+    },
+    [activeFloor, pushFloor]
+  );
+  const handleRotateElement = react.useCallback(
+    (id, rotation) => {
+      if (!activeFloor) return;
+      replaceFloor({
+        ...activeFloor,
+        elements: activeFloor.elements.map(
+          (el) => el.id === id ? { ...el, rotation } : el
+        )
+      });
+    },
+    [activeFloor, replaceFloor]
+  );
+  const handleRotateCommit = react.useCallback(
+    (id, rotation) => {
+      if (!activeFloor) return;
+      pushFloor({
+        ...activeFloor,
+        elements: activeFloor.elements.map(
+          (el) => el.id === id ? { ...el, rotation } : el
+        )
+      });
+    },
+    [activeFloor, pushFloor]
+  );
+  const handleDeleteElement = react.useCallback(
+    (id) => {
+      if (!activeFloor) return;
+      clearSelection();
+      pushFloor({
+        ...activeFloor,
+        elements: activeFloor.elements.filter((el) => el.id !== id)
+      });
+    },
+    [activeFloor, pushFloor, clearSelection]
+  );
+  const handleDeleteElements = react.useCallback(
+    (ids) => {
+      if (!activeFloor) return;
+      const idSet = new Set(ids);
+      clearSelection();
+      pushFloor({
+        ...activeFloor,
+        elements: activeFloor.elements.filter((el) => !idSet.has(el.id))
+      });
+    },
+    [activeFloor, pushFloor, clearSelection]
+  );
+  const handleDuplicateElements = react.useCallback(
+    (ids) => {
+      if (!activeFloor) return;
+      const idSet = new Set(ids);
+      const copies = activeFloor.elements.filter((el) => idSet.has(el.id)).map((el) => ({ ...el, id: genId(), x: el.x + 20, y: el.y + 20 }));
+      const newFloor = { ...activeFloor, elements: [...activeFloor.elements, ...copies] };
+      pushFloor(newFloor);
+      selectSet(copies.map((c) => c.id));
+    },
+    [activeFloor, pushFloor, selectSet]
+  );
+  const handlePlaceElement = react.useCallback(
+    (canvasX, canvasY) => {
+      if (!activeFloor || !activePlaceTypeId) return;
+      const typeDef = elementTypeDefs.current.get(activePlaceTypeId);
+      if (!typeDef) return;
+      const { area } = activeFloor;
+      if (area.shape === "rect") {
+        const ax = area.x ?? 0, ay = area.y ?? 0;
+        const aw = area.width ?? 0, ah = area.height ?? 0;
+        if (canvasX < ax || canvasX > ax + aw || canvasY < ay || canvasY > ay + ah) return;
+      } else if (area.shape === "polygon") {
+        const pts = area.points ?? [];
+        if (pts.length >= 3 && !pointInPolygon(canvasX, canvasY, pts)) return;
+      }
+      const { x, y } = clampToFloor(
+        canvasX - typeDef.defaultWidth / 2,
+        canvasY - typeDef.defaultHeight / 2,
+        typeDef.defaultWidth,
+        typeDef.defaultHeight,
+        area
+      );
+      const newEl = {
+        id: genId(),
+        type: activePlaceTypeId,
+        x,
+        y,
+        width: typeDef.defaultWidth,
+        height: typeDef.defaultHeight,
+        rotation: 0
+      };
+      pushFloor({ ...activeFloor, elements: [...activeFloor.elements, newEl] });
+      select(newEl.id, false);
+    },
+    [activeFloor, activePlaceTypeId, pushFloor, select]
+  );
+  const handleChangeLabel = react.useCallback(
+    (id, label) => {
+      if (!activeFloor) return;
+      pushFloor({
+        ...activeFloor,
+        elements: activeFloor.elements.map(
+          (el) => el.id === id ? { ...el, label } : el
+        )
+      });
+    },
+    [activeFloor, pushFloor]
+  );
+  const handleChangeGeometry = react.useCallback(
+    (id, x, y, w, h, r) => {
+      if (!activeFloor) return;
+      pushFloor({
+        ...activeFloor,
+        elements: activeFloor.elements.map(
+          (el) => el.id === id ? { ...el, x, y, width: w, height: h, rotation: r } : el
+        )
+      });
+    },
+    [activeFloor, pushFloor]
+  );
+  const handleViewerElementClick = react.useCallback(
+    (id) => {
+      const el = activeFloor?.elements.find((e) => e.id === id);
+      if (!el) return;
+      const typeHandler = onElementTypeClick?.[el.type];
+      if (typeHandler) {
+        typeHandler(el);
+      } else {
+        onElementClick?.(el);
+      }
+    },
+    [activeFloor, onElementClick, onElementTypeClick]
+  );
+  const hasViewerHandlers = !!(onElementClick || onElementTypeClick);
+  const statusMap = react.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    (elementStatus ?? []).forEach((s) => {
+      if (s.status === "occupied") m.set(s.elementId, "#fca5a5");
+      else if (s.status === "reserved") m.set(s.elementId, "#fde68a");
+      else if (s.status === "disabled") m.set(s.elementId, "#d1d5db");
+    });
+    return m;
+  }, [elementStatus]);
+  const selectedElements = activeFloor ? activeFloor.elements.filter((el) => selectedIds.has(el.id)) : [];
+  react.useEffect(() => {
+    const onKey = (e) => {
+      const tag = e.target.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA") return;
+      const ctrl = e.ctrlKey || e.metaKey;
+      if (ctrl && e.key === "z") {
+        e.preventDefault();
+        undo();
+        return;
+      }
+      if (ctrl && (e.key === "y" || e.key === "Y")) {
+        e.preventDefault();
+        redo();
+        return;
+      }
+      if (ctrl && (e.key === "d" || e.key === "D")) {
+        e.preventDefault();
+        if (selectedIds.size > 0) handleDuplicateElements([...selectedIds]);
+        return;
+      }
+      if (e.key === "Delete" || e.key === "Backspace") {
+        if (selectedIds.size > 0) handleDeleteElements([...selectedIds]);
+        return;
+      }
+      switch (e.key) {
+        case "v":
+        case "V":
+          setTool("SELECT");
+          break;
+        case "h":
+        case "H":
+          setTool("PAN");
+          break;
+        case "w":
+        case "W":
+          setTool("WALL");
+          break;
+        case "p":
+        case "P":
+          setTool("PLACE");
+          break;
+        case "e":
+        case "E":
+          setTool("ERASE");
+          break;
+        case "Escape":
+          setTool("SELECT");
+          break;
+        case "+":
+        case "=":
+          zoomByRef.current(1.2);
+          break;
+        case "-":
+        case "_":
+          zoomByRef.current(1 / 1.2);
+          break;
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [undo, redo, selectedIds, handleDuplicateElements, handleDeleteElements]);
+  const effectiveReadOnly = readOnly || fixed;
+  const effectiveTool = fixed ? "PAN" : tool;
+  const containerStyle = {
+    width,
+    height,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    border: "1px solid #e2e8f0",
+    borderRadius: "0.5rem",
+    background: "#fff",
+    fontFamily: "system-ui, sans-serif"
+  };
+  const activeAreaShape = activeFloor?.area.shape;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: importInputRef,
+        type: "file",
+        accept: ".json",
+        className: "hidden",
+        onChange: (e) => {
+          const f = e.target.files?.[0];
+          if (f) handleImportMap(f);
+          e.target.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: libraryInputRef,
+        type: "file",
+        accept: ".json",
+        className: "hidden",
+        onChange: (e) => {
+          const f = e.target.files?.[0];
+          if (f) handleLoadLibrary(f);
+          e.target.value = "";
+        }
+      }
+    ),
+    !effectiveReadOnly && /* @__PURE__ */ jsxRuntime.jsx(
+      Toolbar,
+      {
+        tool,
+        onToolChange: (t) => {
+          setTool(t);
+          if (t !== "PLACE") clearSelection();
+        },
+        showGrid,
+        onToggleGrid: () => setShowGrid((g) => !g),
+        zoom,
+        onZoomIn: () => zoomByRef.current(1.2),
+        onZoomOut: () => zoomByRef.current(1 / 1.2),
+        onResetView: () => resetViewRef.current(),
+        canUndo,
+        canRedo,
+        onUndo: undo,
+        onRedo: redo,
+        paletteGroups,
+        activePlaceTypeId,
+        onActivePlaceTypeChange: setActivePlaceTypeId,
+        areaShape: activeAreaShape,
+        onToggleAreaShape: handleToggleAreaShape,
+        onExportMap: handleExportMap,
+        onImportMap: () => importInputRef.current?.click(),
+        onLoadLibrary: () => libraryInputRef.current?.click(),
+        onRemoveLibraryGroup: handleRemoveLibraryGroup
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FloorTabs,
+      {
+        floors: map.floors,
+        activeFloorId,
+        readOnly: effectiveReadOnly,
+        onSelect: setActiveFloorId,
+        onAdd: handleAddFloor,
+        onRename: handleRenameFloor,
+        onDelete: handleDeleteFloor,
+        onReorder: handleReorderFloor
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0 relative", children: activeFloor && /* @__PURE__ */ jsxRuntime.jsx(
+        EditorCanvas,
+        {
+          floor: activeFloor,
+          tool: effectiveTool,
+          gridSize,
+          showGrid,
+          readOnly: effectiveReadOnly,
+          snapEnabled,
+          elementTypeDefs: elementTypeDefs.current,
+          selectedIds,
+          statusMap,
+          onAreaResize: handleAreaResize,
+          onAreaMove: handleAreaMove,
+          onAreaResizeCommit: handleAreaResizeCommit,
+          onSelectElement: select,
+          onSelectSet: selectSet,
+          onClearSelection: clearSelection,
+          onMoveElement: handleMoveElement,
+          onMoveCommit: handleMoveCommit,
+          onResizeElement: handleResizeElement,
+          onResizeCommit: handleResizeCommit,
+          onRotateElement: handleRotateElement,
+          onRotateCommit: handleRotateCommit,
+          onDeleteElement: handleDeleteElement,
+          onPlaceElement: handlePlaceElement,
+          onAddWall: handleAddWall,
+          onDeleteWall: handleDeleteWall,
+          onViewerElementClick: hasViewerHandlers ? handleViewerElementClick : void 0,
+          onZoomChange: setZoom,
+          onRegisterZoomBy: (fn) => {
+            zoomByRef.current = fn;
+          },
+          onRegisterResetView: (fn) => {
+            resetViewRef.current = fn;
+          }
+        },
+        activeFloor.id
+      ) }),
+      !effectiveReadOnly && selectedElements.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        PropertiesPanel,
+        {
+          elements: selectedElements,
+          typeDefs: elementTypeDefs.current,
+          onChangeLabel: handleChangeLabel,
+          onChangeGeometry: handleChangeGeometry,
+          onDelete: handleDeleteElements,
+          onDuplicate: handleDuplicateElements
+        }
+      )
+    ] })
+  ] });
+}
+function VenueMapViewer({ elementStatus, onElementClick, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    VenueMapEditor,
+    {
+      ...rest,
+      fixed: true,
+      elementStatus,
+      onElementClick
+    }
+  );
+}
+
+exports.VenueMapEditor = VenueMapEditor;
+exports.VenueMapViewer = VenueMapViewer;
+exports.findNearestNode = findNearestNode;
+exports.genId = genId;
+exports.snapPoint = snapPoint;
+exports.snapToGrid = snapToGrid;
+exports.usePanZoom = usePanZoom;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map