venuekit 0.10.1 → 0.10.3

package/dist/react.js

@@ -45,7 +45,7 @@ import {
   zoneLocalSize,
   zoneOutline,
   zoneWithLocalSize
-} from "./chunk-4FCSKCFJ.js";
+} from "./chunk-TDC5G7L7.js";
 
 // ../canvas/src/camera.ts
 var MIN_ZOOM = 0.05;
@@ -270,7 +270,15 @@ function tableBodyBox(table) {
 function elementBounds(_layout, element) {
   return pieceBounds(element);
 }
+var boundsCache = /* @__PURE__ */ new WeakMap();
 function pieceBounds(element) {
+  const cached = boundsCache.get(element);
+  if (cached !== void 0) return cached;
+  const box = computeBounds(element);
+  boundsCache.set(element, box);
+  return box;
+}
+function computeBounds(element) {
   if (element.type === "zone") return zoneBounds(element);
   if (element.type === "landmark") {
     return centredBox(element.transform, element.width, element.height, element.transform.rotation);
@@ -288,12 +296,16 @@ function pieceBounds(element) {
   }
   return own;
 }
-function elementAt(layout, screen, camera, viewport) {
+var EDIT_HIT_SLOP_PX = 4;
+function elementAt(layout, screen, camera, viewport, options = {}) {
   const world = screenToWorld(camera, viewport, screen);
+  const slop = (options.slopPx ?? 0) / camera.zoom;
   for (let i = layout.elements.length - 1; i >= 0; i -= 1) {
     const element = layout.elements[i];
     const box = elementBounds(layout, element);
-    if (box && world.x >= box.minX && world.x <= box.maxX && world.y >= box.minY && world.y <= box.maxY) {
+    const ownsRadius = element.type === "seatBlock" || element.type === "table" && element.mode === "perPlace";
+    const pad = element.type === "seatBlock" || element.type === "table" ? (ownsRadius ? options.radii?.get(element.id) ?? 0 : 0) + slop : 0;
+    if (box && world.x >= box.minX - pad && world.x <= box.maxX + pad && world.y >= box.minY - pad && world.y <= box.maxY + pad) {
       if (element.type === "zone" && !pointInZone(element, world)) continue;
       return element;
     }
@@ -481,16 +493,12 @@ function buildScene(input) {
       }
     }
   }
-  const byElement = /* @__PURE__ */ new Map();
-  for (const u of units) {
-    const list2 = byElement.get(u.elementId);
-    if (list2) list2.push(u);
-    else byElement.set(u.elementId, [u]);
-  }
-  for (const el of mode === "designer" ? layout.elements : []) {
-    if (el.type === "landmark" || colorOf(refOf(el)) !== null) continue;
+  const chipped = mode === "designer" ? layout.elements.filter((el) => el.type !== "landmark" && colorOf(refOf(el)) === null) : [];
+  const byElement = new Map(chipped.map((el) => [el.id, []]));
+  if (byElement.size > 0) for (const u of units) byElement.get(u.elementId)?.push(u);
+  for (const el of chipped) {
     const own = byElement.get(el.id);
-    if (!own) continue;
+    if (!own || own.length === 0) continue;
     let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
     for (const u of own) {
       if (u.x < minX) minX = u.x;
@@ -1326,6 +1334,8 @@ var es = {
   mapLabel: "Plano del lugar. Movete con las flechas y eleg\xED con Enter.",
   zoomIn: "Acercar",
   zoomOut: "Alejar",
+  zoomToChoose: "Hay {n} lugares a la vista. Acerc\xE1 el mapa para elegir uno.",
+  wheelHint: "Para acercar el mapa, us\xE1 Ctrl + rueda o los botones + y \u2212",
   overviewMapLabel: "Plano del lugar. Toc\xE1 una entrada en el mapa o elegila en la lista de abajo.",
   overviewList: "Entradas del lugar",
   soldOut: "Agotada",
@@ -1369,6 +1379,8 @@ var en = {
   mapLabel: "Venue map. Move with the arrow keys and choose with Enter.",
   zoomIn: "Zoom in",
   zoomOut: "Zoom out",
+  zoomToChoose: "There are {n} spots in view. Zoom in to choose one.",
+  wheelHint: "To zoom the map, use Ctrl + scroll or the + and \u2212 buttons",
   overviewMapLabel: "Venue map. Tap a ticket on the map or choose it from the list below.",
   overviewList: "Tickets at the venue",
   soldOut: "Sold out",
@@ -1481,11 +1493,19 @@ var PICKER_CSS = `
  min-height:300px;max-height:70vh;background:var(--vk-surface);
  border:1px solid var(--vk-line);border-radius:var(--vk-radius-lg);overflow:hidden;touch-action:none}
 .vk-root[data-fill="true"] .vk-map{flex:1;aspect-ratio:auto;min-height:0;max-height:none}
+.vk-map[data-cooperative="true"]{touch-action:pan-y}
 .vk-canvas{display:block;width:100%;height:100%}
 .vk-a11y{position:absolute;inset:0;pointer-events:none}
 .vk-seat{position:absolute;transform:translate(-50%,-50%);padding:0;margin:0;border:0;background:transparent;
  border-radius:50%;cursor:pointer;color:transparent;overflow:hidden}
 .vk-seat:focus-visible{outline:3px solid var(--vk-accent);outline-offset:2px}
+.vk-choose{position:absolute;left:8px;top:8px;max-width:calc(100% - 64px);min-height:44px;padding:8px 12px;
+ border:1px solid var(--vk-line);border-radius:var(--vk-radius);background:var(--vk-bg);color:var(--vk-fg);
+ font:inherit;font-size:14px;text-align:left;cursor:pointer;opacity:0}
+.vk-choose:focus{opacity:1;pointer-events:auto;outline:3px solid var(--vk-accent);outline-offset:2px}
+.vk-map-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;max-width:calc(100% - 32px);
+ padding:8px 12px;border-radius:var(--vk-radius);background:rgba(0,0,0,.72);color:#fff;font-size:14px;
+ text-align:center;pointer-events:none}
 .vk-zoom{position:absolute;right:8px;bottom:8px;display:flex;flex-direction:column;gap:4px}
 .vk-zoom button{width:36px;height:36px;border:1px solid var(--vk-line);background:var(--vk-bg);
  color:var(--vk-fg);border-radius:var(--vk-radius);font-size:16px;line-height:1;cursor:pointer}
@@ -1567,7 +1587,37 @@ function useImage(src) {
 
 // ../react/src/VenueCanvas.tsx
 import { useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+
+// ../react/src/map-targets.ts
+var MAX_SEAT_BUTTONS = 500;
+var MIN_PICK_RADIUS_PX = 6;
+function chooseTarget(visible, activeId, centre) {
+  const active = activeId === null ? void 0 : visible.find((n) => n.id === activeId);
+  if (active) return active;
+  let best2 = null;
+  let bestD = Infinity;
+  for (const n of visible) {
+    const d = (n.x - centre.x) ** 2 + (n.y - centre.y) ** 2;
+    if (d < bestD) {
+      bestD = d;
+      best2 = n;
+    }
+  }
+  return best2;
+}
+function zoomToChoose(camera, visibleCount, target) {
+  const factor = Math.max(2, Math.sqrt(visibleCount / (MAX_SEAT_BUTTONS / 2)));
+  return { x: target.x, y: target.y, zoom: clampZoom(camera.zoom * factor) };
+}
+function tapZoom(camera, viewport, screen, radiusPx) {
+  if (radiusPx >= MIN_PICK_RADIUS_PX) return null;
+  const next = zoomAt(camera, viewport, screen, Math.max(2, MIN_NUMBERED_RADIUS_PX / Math.max(radiusPx, 0.01)));
+  return next.zoom > camera.zoom ? next : null;
+}
+
+// ../react/src/VenueCanvas.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+var WHEEL_HINT_MS = 1600;
 var ARROWS = {
   ArrowUp: "up",
   ArrowDown: "down",
@@ -1638,6 +1688,9 @@ function VenueCanvas(props) {
   );
   const visible = useMemo(() => new Set(scene.visibleUnitIds), [scene]);
   const visibleNodes = useMemo(() => a11yNodes.filter((n) => visible.has(n.id)), [a11yNodes, visible]);
+  const tooMany = visibleNodes.length > MAX_SEAT_BUTTONS;
+  const unitById = useMemo(() => new Map(units.map((u) => [u.id, u])), [units]);
+  const chooseRef = useRef(null);
   const sizeOf = (elementId) => Math.max(24, 2 * (props.radii.get(elementId) ?? DEFAULT_UNIT_RADIUS) * camera.zoom);
   const lastSize = useRef({ width: 0, height: 0 });
   const onViewportChangeRef = useRef(props.onViewportChange);
@@ -1674,10 +1727,23 @@ function VenueCanvas(props) {
   viewportRef.current = viewport;
   const onCameraChangeRef = useRef(props.onCameraChange);
   onCameraChangeRef.current = props.onCameraChange;
+  const cooperativeRef = useRef(props.cooperative === true);
+  cooperativeRef.current = props.cooperative === true;
+  const [wheelHint, setWheelHint] = useState2(false);
+  const hintTimer = useRef(null);
+  useEffect2(() => () => {
+    if (hintTimer.current) clearTimeout(hintTimer.current);
+  }, []);
   useEffect2(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const onWheel = (e) => {
+      if (cooperativeRef.current && !e.ctrlKey && !e.metaKey) {
+        setWheelHint(true);
+        if (hintTimer.current) clearTimeout(hintTimer.current);
+        hintTimer.current = setTimeout(() => setWheelHint(false), WHEEL_HINT_MS);
+        return;
+      }
       e.preventDefault();
       const rect = canvas.getBoundingClientRect();
       const currentCamera = cameraRef.current;
@@ -1697,7 +1763,7 @@ function VenueCanvas(props) {
     if (!id) return;
     const button = wrapRef.current?.querySelector(`[data-unit-id="${id}"]`);
     pendingFocus.current = null;
-    button?.focus();
+    (button ?? chooseRef.current)?.focus();
   }, [visibleNodes]);
   const send = (input) => {
     const result = reduceGesture(gesture.current, camera, viewport, input);
@@ -1705,8 +1771,26 @@ function VenueCanvas(props) {
     if (result.camera !== camera) props.onCameraChange(result.camera);
     if (!result.tap) return;
     const unitId = hitUnit({ index, camera, viewport, screenPoint: result.tap, units, radii: props.radii });
-    if (unitId) props.onActivateUnit(unitId);
-    else props.onTapEmpty?.(result.tap);
+    if (!unitId) {
+      props.onTapEmpty?.(result.tap);
+      return;
+    }
+    const unit = unitById.get(unitId);
+    if (unit && props.focusRef !== null && unit.placeTypeRef === props.focusRef) {
+      const closer = tapZoom(camera, viewport, result.tap, (props.radii.get(unit.elementId) ?? DEFAULT_UNIT_RADIUS) * camera.zoom);
+      if (closer) {
+        props.onCameraChange(closer);
+        return;
+      }
+    }
+    props.onActivateUnit(unitId);
+  };
+  const zoomInToChoose = () => {
+    const target = chooseTarget(visibleNodes, activeId, camera);
+    if (!target) return;
+    setActiveId(target.id);
+    pendingFocus.current = target.id;
+    props.onCameraChange(zoomToChoose(camera, visibleNodes.length, target));
   };
   const samplePointer = (e) => {
     const rect = e.currentTarget.getBoundingClientRect();
@@ -1738,6 +1822,7 @@ function VenueCanvas(props) {
       "data-testid": "venue-map",
       "data-background": props.backgroundStatus,
       "data-camera": `${camera.x.toFixed(2)},${camera.y.toFixed(2)},${camera.zoom.toFixed(4)}`,
+      "data-cooperative": props.cooperative ? "true" : void 0,
       style: {
         ["--vk-plan-ratio"]: props.ratio ? `${Math.round(props.ratio.width)} / ${Math.round(props.ratio.height)}` : `${layout.meta.width} / ${layout.meta.height}`,
         ...props.height !== void 0 ? { height: props.height, aspectRatio: "auto", minHeight: 0, maxHeight: "none" } : {}
@@ -1758,7 +1843,7 @@ function VenueCanvas(props) {
             onPointerCancel: (e) => send({ type: "pointercancel", pointer: samplePointer(e) })
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "vk-a11y", role: "group", "aria-label": messages.mapLabel, onKeyDown, children: visibleNodes.map((node) => {
+        /* @__PURE__ */ jsx("div", { className: "vk-a11y", role: "group", "aria-label": messages.mapLabel, onKeyDown, children: tooMany ? /* @__PURE__ */ jsx("button", { ref: chooseRef, type: "button", className: "vk-choose", "data-testid": "zoom-to-choose", onClick: zoomInToChoose, children: format(messages.zoomToChoose, { n: visibleNodes.length.toLocaleString() }) }) : visibleNodes.map((node) => {
           const p = worldToScreen(camera, viewport, node);
           const size = sizeOf(node.elementId);
           return /* @__PURE__ */ jsx(
@@ -1779,6 +1864,7 @@ function VenueCanvas(props) {
             node.id
           );
         }) }),
+        wheelHint ? /* @__PURE__ */ jsx("p", { className: "vk-map-hint", role: "status", children: messages.wheelHint }) : null,
         /* @__PURE__ */ jsxs("div", { className: "vk-zoom", children: [
           /* @__PURE__ */ jsx("button", { type: "button", onClick: zoomButton(1.4), "aria-label": messages.zoomIn, children: "+" }),
           /* @__PURE__ */ jsx("button", { type: "button", onClick: zoomButton(1 / 1.4), "aria-label": messages.zoomOut, children: "\u2212" })
@@ -1914,7 +2000,7 @@ function SeatMap(props) {
     announce(`${unitName(unit, messages)}: ${added ? messages.selected : messages.free}`);
     onSelectionChange(result.selection);
   }, [unitById, focusRef, states, selection, maxSelection, messages, announce, onSelectionChange, switchTo]);
-  const summary = selectionSummary(units, selection, messages);
+  const summary = useMemo2(() => selectionSummary(units, selection, messages), [units, selection, messages]);
   const focusColor = placeTypeColors.get(focusRef) ?? "var(--vk-unassigned)";
   const focusType = props.placeTypes.find((p) => p.ref === focusRef);
   const embedded = props.embedded === true;
@@ -1965,6 +2051,7 @@ function SeatMap(props) {
             onTapEmpty,
             placeTypePrices,
             ...props.height !== void 0 ? { height: props.height } : {},
+            cooperative: embedded,
             images,
             ...backgroundStatus ? { backgroundStatus } : {}
           }
@@ -2133,6 +2220,7 @@ function VenueOverview(props) {
             highlightRefs,
             ...props.height !== void 0 ? { height: props.height } : {},
             ratio: contentRatio,
+            cooperative: true,
             images,
             ...backgroundStatus ? { backgroundStatus } : {}
           }
@@ -2394,6 +2482,57 @@ function BackgroundControl(props) {
 // ../react/src/designer/DesignerCanvas.tsx
 import { forwardRef, useEffect as useEffect5, useImperativeHandle, useMemo as useMemo4, useRef as useRef5, useState as useState5 } from "react";
 
+// ../react/src/designer/drag-preview.ts
+function changedIds(preview) {
+  return preview.kind === "move" ? [...preview.ids] : [preview.element.id];
+}
+function splitUnits(units, changed) {
+  const still = [];
+  const moving = [];
+  for (const u of units) (changed.has(u.elementId) ? moving : still).push(u);
+  return { changed, still, stillIndex: new SpatialIndex(still), moving, movingIndex: new SpatialIndex(moving) };
+}
+function boxesOf(layout) {
+  const out = /* @__PURE__ */ new Map();
+  for (const el of layout.elements) {
+    const b = pieceBounds(el);
+    if (b) out.set(el.id, b);
+  }
+  return out;
+}
+function shifted(el, dx, dy) {
+  return { ...el, transform: { ...el.transform, x: el.transform.x + dx, y: el.transform.y + dy } };
+}
+function joined(still, moving, dx, dy) {
+  return {
+    queryRect: (q) => {
+      const out = still.queryRect(q);
+      for (const id of moving.queryRect({ minX: q.minX - dx, minY: q.minY - dy, maxX: q.maxX - dx, maxY: q.maxY - dy })) out.push(id);
+      return out;
+    }
+  };
+}
+function previewFrame(base, split, baseBoxes, preview) {
+  const boxes = new Map(baseBoxes);
+  if (preview.kind === "move") {
+    const { dx, dy } = preview;
+    const layout2 = { ...base, elements: base.elements.map((el) => split.changed.has(el.id) ? shifted(el, dx, dy) : el) };
+    for (const id of split.changed) {
+      const b2 = baseBoxes.get(id);
+      if (b2) boxes.set(id, shiftBox(b2, dx, dy));
+    }
+    const units = split.still.concat(split.moving.map((u) => ({ ...u, x: u.x + dx, y: u.y + dy })));
+    return { layout: layout2, units, index: joined(split.stillIndex, split.movingIndex, dx, dy), boxes };
+  }
+  const { element } = preview;
+  const layout = { ...base, elements: base.elements.map((el) => el.id === element.id ? element : el) };
+  const own = expand({ ...base, elements: [element] });
+  const b = pieceBounds(element);
+  if (b) boxes.set(element.id, b);
+  else boxes.delete(element.id);
+  return { layout, units: split.still.concat(own), index: joined(split.stillIndex, new SpatialIndex(own), 0, 0), boxes };
+}
+
 // ../react/src/designer/sizing.ts
 var SIZE_STEP = 0.1;
 var KEY_RESIZE_STEP = 20;
@@ -2416,9 +2555,6 @@ var NO_STATES = /* @__PURE__ */ new Map();
 var TICK_MS = 50;
 var MAX_SEAT_TARGETS = 1e3;
 var isScaled2 = (el) => el.type === "seatBlock" || el.type === "table";
-function withElement(layout, el) {
-  return { ...layout, elements: layout.elements.map((e) => e.id === el.id ? el : e) };
-}
 function union(boxes) {
   if (boxes.length === 0) return null;
   return boxes.reduce((a, b) => ({
@@ -2455,9 +2591,20 @@ function fullBlock(layout, id) {
 }
 var DesignerCanvas = forwardRef(function DesignerCanvas2({ designer, placeTypes, lockedUnitIds, messages, frameKey, onPieceTap, backgroundImage = null, compact = false, overlay, theme }, ref) {
   const { ui } = designer;
-  const [resizing, setResizing] = useState5(null);
+  const [preview, setPreview] = useState5(null);
   const resizingRef = useRef5(null);
-  const layout = useMemo4(() => resizing ? withElement(designer.layout, resizing) : designer.layout, [designer.layout, resizing]);
+  const resizing = preview?.kind === "replace" ? preview.element : null;
+  const base = designer.layout;
+  const baseUnits = useMemo4(() => expand(base), [base]);
+  const baseIndex = useMemo4(() => new SpatialIndex(baseUnits), [baseUnits]);
+  const baseBoxes = useMemo4(() => boxesOf(base), [base]);
+  const changedKey = preview ? changedIds(preview).join("\0") : "";
+  const split = useMemo4(() => changedKey ? splitUnits(baseUnits, new Set(changedKey.split("\0"))) : null, [baseUnits, changedKey]);
+  const view = useMemo4(
+    () => preview && split ? previewFrame(base, split, baseBoxes, preview) : { layout: base, units: baseUnits, index: baseIndex, boxes: baseBoxes },
+    [preview, split, base, baseUnits, baseIndex, baseBoxes]
+  );
+  const { layout, units, index, boxes } = view;
   const stageRef = useRef5(null);
   const canvasRef = useRef5(null);
   const [viewport, setViewport] = useState5({ width: 0, height: 0 });
@@ -2480,8 +2627,6 @@ var DesignerCanvas = forwardRef(function DesignerCanvas2({ designer, placeTypes,
   const spaceHeld = useRef5(false);
   const [panReady, setPanReady] = useState5(false);
   const marqueeArmed = useRef5(false);
-  const units = useMemo4(() => expand(layout), [layout]);
-  const index = useMemo4(() => new SpatialIndex(units), [units]);
   const radii = useMemo4(() => unitRadii(layout), [layout]);
   const bg = layout.meta.background;
   const images = useMemo4(
@@ -2489,21 +2634,21 @@ var DesignerCanvas = forwardRef(function DesignerCanvas2({ designer, placeTypes,
     [bg, backgroundImage]
   );
   const placeTypeColors = useMemo4(() => new Map(placeTypes.map((p) => [p.ref, p.color])), [placeTypes]);
-  const seatEditUnits = useMemo4(() => fullBlock(layout, ui.seatEditId), [layout, ui.seatEditId]);
+  const seatEditUnits = useMemo4(() => fullBlock(base, ui.seatEditId), [base, ui.seatEditId]);
   const seatEditIndex = useMemo4(() => new SpatialIndex(seatEditUnits), [seatEditUnits]);
   const seatEditById = useMemo4(() => new Map(seatEditUnits.map((u) => [u.id, u])), [seatEditUnits]);
   const elementBoxes = useMemo4(
     () => layout.elements.flatMap((el) => {
-      const b = elementBounds(layout, el);
+      const b = boxes.get(el.id);
       return b ? [{ el, b }] : [];
     }),
-    [layout]
+    [layout, boxes]
   );
   const removed = useMemo4(() => {
     if (seatEditUnits.length === 0) return /* @__PURE__ */ new Set();
-    const present = new Set(units.map((u) => u.id));
+    const present = new Set(baseUnits.map((u) => u.id));
     return new Set(seatEditUnits.filter((u) => !present.has(u.id)).map((u) => u.id));
-  }, [seatEditUnits, units]);
+  }, [seatEditUnits, baseUnits]);
   useEffect5(() => {
     const el = stageRef.current;
     if (!el) return;
@@ -2574,20 +2719,19 @@ var DesignerCanvas = forwardRef(function DesignerCanvas2({ designer, placeTypes,
     if (bg && ui.backgroundEditing && !bg.locked) {
       const a = worldToScreen(camera, viewport, { x: bg.x, y: bg.y });
       const b = worldToScreen(camera, viewport, { x: bg.x + bg.width, y: bg.y + bg.height });
-      const up2 = lifted === BACKGROUND_ID;
+      const up = lifted === BACKGROUND_ID;
       ctx.save();
-      if (up2) {
+      if (up) {
         ctx.shadowColor = "rgba(0,0,0,.35)";
         ctx.shadowBlur = 12;
       } else ctx.setLineDash([6, 4]);
-      ctx.lineWidth = up2 ? 3 : 1.5;
+      ctx.lineWidth = up ? 3 : 1.5;
       ctx.strokeStyle = palette.selectedStroke;
       ctx.strokeRect(a.x, a.y, b.x - a.x, b.y - a.y);
       ctx.restore();
     }
     for (const id of ui.selection) {
-      const selected = layout.elements.find((e) => e.id === id);
-      const box = selected ? elementBounds(layout, selected) : null;
+      const box = boxes.get(id);
       if (!box) continue;
       const a = worldToScreen(camera, viewport, { x: box.minX, y: box.minY });
       const b = worldToScreen(camera, viewport, { x: box.maxX, y: box.maxY });
@@ -2612,12 +2756,11 @@ var DesignerCanvas = forwardRef(function DesignerCanvas2({ designer, placeTypes,
       ctx.strokeRect(Math.min(a.x, b.x), Math.min(a.y, b.y), Math.abs(b.x - a.x), Math.abs(b.y - a.y));
       ctx.restore();
     }
-    const up = lifted ? layout.elements.find((e) => e.id === lifted) : void 0;
-    const upBox = up ? elementBounds(layout, up) : null;
-    if (upBox) {
+    const upBox = lifted ? boxes.get(lifted) : void 0;
+    if (lifted && upBox) {
       const a = worldToScreen(camera, viewport, { x: upBox.minX, y: upBox.minY });
       const b = worldToScreen(camera, viewport, { x: upBox.maxX, y: upBox.maxY });
-      const pad = 12 + (radii.get(up.id) ?? 0) * camera.zoom;
+      const pad = 12 + (radii.get(lifted) ?? 0) * camera.zoom;
       ctx.save();
       ctx.shadowColor = "rgba(0,0,0,.35)";
       ctx.shadowBlur = 12;
@@ -2640,7 +2783,7 @@ var DesignerCanvas = forwardRef(function DesignerCanvas2({ designer, placeTypes,
       }
       ctx.setLineDash([]);
     }
-  }, [scene, camera, viewport, dpr, images, bg, ui.backgroundEditing, ui.selection, ui.seatEditId, layout, radii, palette, seatEditUnits, removed, lifted, hints, marquee]);
+  }, [scene, camera, viewport, dpr, images, bg, ui.backgroundEditing, ui.selection, ui.seatEditId, boxes, radii, palette, seatEditUnits, removed, lifted, hints, marquee]);
   useImperativeHandle(ref, () => ({
     clientToWorld: (clientX, clientY) => {
       const r = stageRef.current?.getBoundingClientRect();
@@ -2679,9 +2822,12 @@ var DesignerCanvas = forwardRef(function DesignerCanvas2({ designer, placeTypes,
     } else if (fx.type === "moveBy") {
       moveDragged(fx.elementId, fx.dx, fx.dy, fx.key, zoom);
     } else if (fx.type === "moveEnd") {
-      const group = drag.current && drag.current.ids.length > 1;
+      const done = drag.current;
+      const group = done && done.ids.length > 1;
       drag.current = null;
       setHints(null);
+      setPreview(null);
+      if (done && (done.applied.x !== 0 || done.applied.y !== 0)) d.moveMany(done.ids, done.applied.x, done.applied.y);
       if (!group) d.dispatchUi({ type: "select", id: fx.elementId });
     } else if (fx.type === "marquee") {
       setMarquee({ from: fx.from, to: fx.to });
@@ -2699,12 +2845,12 @@ var DesignerCanvas = forwardRef(function DesignerCanvas2({ designer, placeTypes,
       const start = d.layout.elements.find((e) => e.id === fx.elementId);
       if (!start) return;
       resizingRef.current = snappedResize(start, fx.corner, fx.from, fx.to, zoom);
-      setResizing(resizingRef.current);
+      setPreview({ kind: "replace", element: resizingRef.current });
     } else if (fx.type === "resizeEnd" || fx.type === "resizeCancel") {
       const done = resizingRef.current;
       resizingRef.current = null;
       resizeOthers.current = null;
-      setResizing(null);
+      setPreview(null);
       setHints(null);
       const start = d.layout.elements.find((e) => e.id === fx.elementId);
       if (fx.type === "resizeEnd" && done && start && done !== start) d.run({ type: "replaceElement", element: done });
@@ -2737,9 +2883,10 @@ var DesignerCanvas = forwardRef(function DesignerCanvas2({ designer, placeTypes,
     current.raw = { x: current.raw.x + dx, y: current.raw.y + dy };
     const snap = altHeld.current ? null : snapMove(shiftBox(current.start, current.raw.x, current.raw.y), current.others, SNAP_PX / zoom, { sheet: sheetBox(d.layout) });
     const target = { x: current.raw.x + (snap?.dx ?? 0), y: current.raw.y + (snap?.dy ?? 0) };
-    const ddx = target.x - current.applied.x;
-    const ddy = target.y - current.applied.y;
-    if ((ddx !== 0 || ddy !== 0) && d.moveMany(current.ids, ddx, ddy, key)) current.applied = target;
+    if (target.x !== current.applied.x || target.y !== current.applied.y) {
+      current.applied = target;
+      setPreview({ kind: "move", ids: current.ids, dx: target.x, dy: target.y });
+    }
     setHints(snap && (snap.guides.length > 0 || snap.gaps.length > 0) ? { guides: snap.guides, gaps: snap.gaps, matches: [] } : null);
   };
   const snappedResize = (start, corner, from, to, zoom) => {
@@ -2864,7 +3011,7 @@ var DesignerCanvas = forwardRef(function DesignerCanvas2({ designer, placeTypes,
     }
     const d = latest.current.designer;
     const { camera: c, viewport: v } = latest.current;
-    const hit = kind === "down" ? backgroundAt(d.layout.meta.background, screenToWorld(c, v, p), d.ui.backgroundEditing) ?? elementAt(d.layout, p, c, v)?.id ?? null : null;
+    const hit = kind === "down" ? backgroundAt(d.layout.meta.background, screenToWorld(c, v, p), d.ui.backgroundEditing) ?? elementAt(d.layout, p, c, v, { radii, slopPx: EDIT_HIT_SLOP_PX })?.id ?? null : null;
     const elementLocked = d.ui.armed !== null || hit !== null && hit === d.ui.seatEditId;
     if (kind !== "down") {
       feed({ kind, p, hitElementId: hit, elementLocked });
@@ -2931,17 +3078,16 @@ var DesignerCanvas = forwardRef(function DesignerCanvas2({ designer, placeTypes,
   const selectedEl = ui.selectedId ? layout.elements.find((e) => e.id === ui.selectedId) : void 0;
   const selectedBox = useMemo4(() => {
     if (viewport.width === 0) return null;
-    const boxes = ui.selection.flatMap((id) => {
-      const el = layout.elements.find((e) => e.id === id);
-      const b = el ? elementBounds(layout, el) : null;
+    const picked2 = ui.selection.flatMap((id) => {
+      const b = boxes.get(id);
       if (!b) return [];
       const a = worldToScreen(camera, viewport, { x: b.minX, y: b.minY });
       const z = worldToScreen(camera, viewport, { x: b.maxX, y: b.maxY });
       const pad = 8 + (radii.get(id) ?? 0) * camera.zoom;
       return [{ minX: a.x - pad, minY: a.y - pad, maxX: z.x + pad, maxY: z.y + pad }];
     });
-    return union(boxes);
-  }, [ui.selection, layout, camera, viewport, radii]);
+    return union(picked2);
+  }, [ui.selection, boxes, camera, viewport, radii]);
   return /* @__PURE__ */ jsxs5(
     "div",
     {
@@ -3160,6 +3306,9 @@ function violationText(v, m) {
   return v.reason === "table" ? format(m.rejectTable, { table: v.table }) : format(m.rejectRow, { row: v.row });
 }
 function rejectionText(r, m) {
+  if (r.invalid !== void 0) {
+    return /máximo de unidades vendibles/.test(r.invalid) ? m.rejectTooManyUnits : m.rejectInvalid;
+  }
   const [over, ...moreOver] = r.capacity ?? [];
   if (over) {
     const head2 = format(m.rejectCapacity, { type: over.label, capacity: over.capacity, placed: over.placed });
@@ -3176,12 +3325,12 @@ import { useEffect as useEffect6, useLayoutEffect, useRef as useRef6, useState a
 
 // ../react/src/designer/guide.ts
 var overlaps = (a, b) => a.minX < b.maxX && a.maxX > b.minX && a.minY < b.maxY && a.maxY > b.minY;
-var shifted = (b, dx, dy) => ({ minX: b.minX + dx, minY: b.minY + dy, maxX: b.maxX + dx, maxY: b.maxY + dy });
+var shifted2 = (b, dx, dy) => ({ minX: b.minX + dx, minY: b.minY + dy, maxX: b.maxX + dx, maxY: b.maxY + dy });
 function freeSpot(box, occupied, gap = 24, rings = 12) {
   const sx = box.maxX - box.minX + gap;
   const sy = box.maxY - box.minY + gap;
   const padded = occupied.map((o) => ({ minX: o.minX - gap / 2, minY: o.minY - gap / 2, maxX: o.maxX + gap / 2, maxY: o.maxY + gap / 2 }));
-  const free = (dx, dy) => !padded.some((o) => overlaps(shifted(box, dx, dy), o));
+  const free = (dx, dy) => !padded.some((o) => overlaps(shifted2(box, dx, dy), o));
   if (free(0, 0)) return { dx: 0, dy: 0 };
   const dirs = [[0, 1], [1, 0], [0, -1], [-1, 0], [1, 1], [-1, 1], [1, -1], [-1, -1]];
   for (let k = 1; k <= rings; k++) {
@@ -3851,6 +4000,8 @@ var designerEs = {
   trimToCapacityLabel: "Sacar los {over} lugares que sobran de {name}",
   trimPartial: "Quedan {n} de m\xE1s que no se pueden sacar: ya est\xE1n vendidos o reservados.",
   rejectCapacity: "{type} tiene {capacity} lugares y ya ubicaste {placed}.",
+  rejectInvalid: "No se pudo hacer ese cambio: la pieza quedar\xEDa demasiado grande o fuera del plano.",
+  rejectTooManyUnits: "No se pudo hacer ese cambio: un plano puede tener hasta 100.000 lugares.",
   zonesTitle: "Tus entradas generales",
   zonesHint: "Si quer\xE9s, marc\xE1 en el plano d\xF3nde queda cada una. Quien compra la toca en el mapa.",
   acceptsZone: "Entrada general",
@@ -4069,6 +4220,8 @@ var designerEn = {
   trimToCapacityLabel: "Remove the {over} extra spots of {name}",
   trimPartial: "{n} extra spots can't be removed: they are already sold or held.",
   rejectCapacity: "{type} has {capacity} spots and you've already placed {placed}.",
+  rejectInvalid: "That change couldn't be made: the piece would be too big or off the plan.",
+  rejectTooManyUnits: "That change couldn't be made: a plan can have up to 100,000 spots.",
   zonesTitle: "Your general admission tickets",
   zonesHint: "If you want, mark on the plan where each one is. Buyers tap it on the map.",
   acceptsZone: "General admission",
@@ -5273,7 +5426,8 @@ function elementPrefix(el) {
   return el.type === "seatBlock" ? "b" : el.type === "table" ? "m" : el.type === "zone" ? "z" : "r";
 }
 function useDesigner({ initial, lockedUnitIds, onChange, placeTypes }) {
-  const historyRef = useRef9(new History(initial));
+  const [history] = useState10(() => new History(initial));
+  const historyRef = useRef9(history);
   const [layout, setLayout] = useState10(initial);
   const [rejection, setRejectionState] = useState10(null);
   const [rejectionSeq, setRejectionSeq] = useState10(0);
@@ -5300,10 +5454,10 @@ function useDesigner({ initial, lockedUnitIds, onChange, placeTypes }) {
     const previous = seenTypes.current.list;
     const next = placeTypesRef.current;
     seenTypes.current = { key: typesKey, list: next };
-    const history = historyRef.current;
-    const before = history.present;
-    history.rewrite((l) => syncPlaceTypes(l, previous, next));
-    if (history.present !== before) commit(history.present);
+    const history2 = historyRef.current;
+    const before = history2.present;
+    history2.rewrite((l) => syncPlaceTypes(l, previous, next));
+    if (history2.present !== before) commit(history2.present);
   }, [typesKey, commit]);
   const run = useCallback3(
     (command, key) => {
@@ -5311,20 +5465,22 @@ function useDesigner({ initial, lockedUnitIds, onChange, placeTypes }) {
       let candidate;
       try {
         candidate = applyCommand(before, command);
-      } catch {
+      } catch (error) {
+        setRejection({ violations: [], invalid: error instanceof Error ? error.message : String(error) });
         return false;
       }
-      const violations = findLockViolations(before, candidate, locked);
+      const moveOnly = keepsCount(command);
+      const violations = moveOnly ? [] : findLockViolations(before, candidate, locked);
       if (violations.length > 0) {
         setRejection({ violations });
         return false;
       }
-      const capacity = keepsCount(command) ? [] : capacityRejections(before, candidate, placeTypesRef.current);
+      const capacity = moveOnly ? [] : capacityRejections(before, candidate, placeTypesRef.current);
       if (capacity.length > 0) {
         setRejection({ violations: [], capacity });
         return false;
       }
-      commit(historyRef.current.apply(command, key));
+      commit(historyRef.current.commit(candidate, key));
       return true;
     },
     [locked, commit, setRejection]
@@ -5946,7 +6102,7 @@ function VenueDesigner(props) {
 }
 
 // ../react/src/index.ts
-var VERSION = "0.10.1";
+var VERSION = "0.10.3";
 export {
   DESIGNER_CSS,
   PICKER_CSS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venuekit",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "description": "VenueKit: editor y mapa de butacas. `venuekit` es el núcleo (sin DOM, para el servidor); `venuekit/react` trae <VenueDesigner /> y <SeatMap />.",
   "keywords": [
     "venue",