venuekit 0.10.2 → 0.11.0

package/dist/react.js

@@ -38,6 +38,8 @@ import {
   summarize,
   tableSize,
   toggleRemovedSeat,
+  toggleReservedSeat,
+  toggleReservedTable,
   toggleUnit,
   unitStates,
   zoneBounds,
@@ -45,7 +47,7 @@ import {
   zoneLocalSize,
   zoneOutline,
   zoneWithLocalSize
-} from "./chunk-QQQM6AFF.js";
+} from "./chunk-IRNVYNYV.js";
 
 // ../canvas/src/camera.ts
 var MIN_ZOOM = 0.05;
@@ -199,7 +201,12 @@ var defaultPalette = {
   unitLabel: "#0b0b0d",
   landmark: "#23232a",
   landmarkStroke: "#34343c",
-  landmarkLabel: "#d6d6dc"
+  landmarkLabel: "#d6d6dc",
+  courtesy: "#7c3aed",
+  courtesyLabel: "#ffffff",
+  heldFor: "#f59e0b",
+  heldForLabel: "#0b0b0d",
+  statusMark: "#ffffff"
 };
 var PALETTE_VARIABLES = {
   taken: "--vk-taken",
@@ -219,7 +226,12 @@ var PALETTE_VARIABLES = {
   unitLabel: "--vk-unit-fg",
   landmark: "--vk-landmark",
   landmarkStroke: "--vk-landmark-stroke",
-  landmarkLabel: "--vk-landmark-fg"
+  landmarkLabel: "--vk-landmark-fg",
+  courtesy: "--vk-courtesy",
+  courtesyLabel: "--vk-courtesy-fg",
+  heldFor: "--vk-held-for",
+  heldForLabel: "--vk-held-for-fg",
+  statusMark: "--vk-status-mark"
 };
 function paletteFromVariables(read, base = defaultPalette) {
   const out = { ...base };
@@ -296,12 +308,16 @@ function computeBounds(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;
     }
@@ -342,6 +358,7 @@ function unitRadii(layout) {
   }
   return out;
 }
+var RESERVED_DASH_PX = 3;
 var MIN_NUMBERED_RADIUS_PX = 8;
 var LABEL_INSET_PX = 12;
 var TWO_LINES_PX = 40;
@@ -525,7 +542,9 @@ function buildScene(input) {
     const maxWidth = (body.maxX - body.minX) * camera.zoom - 4;
     if (maxWidth < MIN_NUMBERED_RADIUS_PX * 2) continue;
     const ref = refOf(el);
-    const color = el.mode === "whole" ? dim(ref) ? palette.soldLabel : mapUnitPaint(states.get(el.id) ?? "free", "", palette).label : palette.landmarkLabel;
+    const state = states.get(el.id) ?? "free";
+    const mark = state !== "selected" && state !== "held" ? input.unitMarks?.get(el.id) : void 0;
+    const color = el.mode === "whole" ? dim(ref) ? palette.soldLabel : (mark ? markPaint(mark, palette) : mapUnitPaint(state, "", palette)).label : palette.landmarkLabel;
     labels.push({ x, y, text: el.label, size: 13, weight: 700, color, align: "centre", maxWidth });
   }
   const elementsById = new Map(layout.elements.map((el) => [el.id, el]));
@@ -535,8 +554,10 @@ function buildScene(input) {
     visibleUnitIds.push(u.id);
     const color = colorOf(u.placeTypeRef) ?? palette.unassigned;
     const state = mode === "designer" && input.locked?.has(u.id) ? "taken" : states.get(u.id) ?? "free";
-    const mapPaint = mode === "map" ? mapUnitPaint(state, color, palette) : null;
-    const paint2 = mapPaint ? { fill: mapPaint.fill, stroke: mapPaint.stroke, strokeWidth: mapPaint.strokeWidth } : unitPaint(state, color, palette);
+    const mark = mode === "map" && state !== "selected" && state !== "held" ? input.unitMarks?.get(u.id) : void 0;
+    const mapPaint = mode === "map" ? mark ? markPaint(mark, palette) : mapUnitPaint(state, color, palette) : null;
+    const base = mapPaint ? { fill: mapPaint.fill, stroke: mapPaint.stroke, strokeWidth: mapPaint.strokeWidth } : unitPaint(state, color, palette);
+    const paint2 = u.inviteOnly && state === "free" && !mark ? { ...base, stroke: palette.label, strokeWidth: 2, dash: RESERVED_DASH_PX } : base;
     const dimmed = dim(u.placeTypeRef);
     const alpha = dimmed ? { alpha: DIMMED_ALPHA } : {};
     const el = elementsById.get(u.elementId);
@@ -549,12 +570,30 @@ function buildScene(input) {
     if (el?.type === "table" && el.mode === "whole" && el.shape === "rect") {
       const b = tableBodyBox(el);
       shapes.push({ kind: "rect", x: b.minX, y: b.minY, width: b.maxX - b.minX, height: b.maxY - b.minY, ...paint2, ...alpha });
+      if (mark) shapes.push(...markBadge(mark, b.maxX - radius * 0.25, b.minY + radius * 0.25, radius, palette));
       continue;
     }
     shapes.push({ kind: "circle", x: u.x, y: u.y, radius, ...paint2, ...alpha });
+    if (mark) shapes.push(...markBadge(mark, u.x + radius * 0.65, u.y - radius * 0.65, radius, palette));
   }
   return { background, shapes, labels, visibleUnitIds };
 }
+function markPaint(mark, palette) {
+  switch (mark) {
+    case "sold":
+      return mapUnitPaint("taken", "", palette);
+    case "courtesy":
+      return { fill: palette.courtesy, stroke: palette.soldStroke, strokeWidth: 1, label: palette.courtesyLabel };
+    case "held":
+      return { fill: palette.heldFor, stroke: palette.soldStroke, strokeWidth: 1, label: palette.heldForLabel };
+  }
+}
+function markBadge(mark, x, y, radius, palette) {
+  if (mark === "sold") return [];
+  const r = radius * 0.4;
+  if (mark === "courtesy") return [{ kind: "circle", x, y, radius: r, fill: palette.statusMark, stroke: palette.soldStroke, strokeWidth: 1 }];
+  return [{ kind: "rect", x: x - r, y: y - r, width: r * 2, height: r * 2, fill: palette.statusMark, stroke: palette.soldStroke, strokeWidth: 1 }];
+}
 
 // ../canvas/src/label-fit.ts
 var MIN_LEGIBLE_PX = 11;
@@ -642,7 +681,10 @@ function drawShape(ctx, shape, zoom) {
     shape.points.forEach((p, i) => i === 0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y));
     ctx.closePath();
   } else ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
+  const dash = shape.kind !== "polygon" ? shape.dash : void 0;
+  if (dash) ctx.setLineDash([dash / zoom, dash / zoom]);
   paint(ctx, shape.fill, shape.stroke, shape.strokeWidth, zoom);
+  if (dash) ctx.setLineDash([]);
   ctx.globalAlpha = previous;
 }
 function renderScene(scene, target) {
@@ -802,12 +844,12 @@ var defaultA11yLabels = {
   row: "fila",
   seat: "asiento"
 };
-function buildA11yNodes(units, states, placeTypeNames, labels = defaultA11yLabels) {
+function buildA11yNodes(units, states, placeTypeNames, labels = defaultA11yLabels, stateWords) {
   return units.map((u) => {
     const state = states.get(u.id) ?? "free";
     const where = u.row !== void 0 && u.seat !== void 0 ? `${labels.row} ${u.row}, ${labels.seat} ${u.seat}` : u.label;
     const typeName = u.placeTypeRef === null ? void 0 : placeTypeNames.get(u.placeTypeRef);
-    const name = [typeName, where, labels[state]].filter(Boolean).join(", ");
+    const name = [typeName, where, stateWords?.get(u.id) ?? labels[state]].filter(Boolean).join(", ");
     return {
       id: u.id,
       name,
@@ -1341,7 +1383,18 @@ var es = {
   backToMap: "Todo el mapa",
   focusHintSeats: "Toc\xE1 las butacas que quer\xE9s.",
   focusHintPlaces: "Toc\xE1 los lugares que quer\xE9s en cada mesa.",
-  focusHintTables: "Toc\xE1 las mesas que quer\xE9s."
+  focusHintTables: "Toc\xE1 las mesas que quer\xE9s.",
+  notForSale: "no est\xE1 a la venta",
+  inviteOnlySeat: "Esa butaca no est\xE1 a la venta",
+  inviteOnlyTable: "Esa mesa no est\xE1 a la venta",
+  inviteOnlyPlace: "Ese lugar no est\xE1 a la venta",
+  inviteOnly: "s\xF3lo con invitaci\xF3n",
+  legendInviteOnly: "S\xF3lo con invitaci\xF3n",
+  statusSold: "vendida",
+  statusCourtesy: "regalada",
+  statusHeld: "apartada",
+  legendCourtesy: "Regalada",
+  legendHeld: "Apartada"
 };
 var en = {
   free: "available",
@@ -1386,7 +1439,18 @@ var en = {
   backToMap: "Whole map",
   focusHintSeats: "Tap the seats you want.",
   focusHintPlaces: "Tap the places you want at each table.",
-  focusHintTables: "Tap the tables you want."
+  focusHintTables: "Tap the tables you want.",
+  notForSale: "not for sale",
+  inviteOnlySeat: "That seat is not for sale",
+  inviteOnlyTable: "That table is not for sale",
+  inviteOnlyPlace: "That place is not for sale",
+  inviteOnly: "invitation only",
+  legendInviteOnly: "Invitation only",
+  statusSold: "sold",
+  statusCourtesy: "complimentary",
+  statusHeld: "held",
+  legendCourtesy: "Complimentary",
+  legendHeld: "Held"
 };
 function format(template, vars) {
   return template.replace(
@@ -1472,6 +1536,12 @@ var PICKER_CSS = `
  --vk-landmark:#23232a;
  --vk-landmark-stroke:#34343c;
  --vk-landmark-fg:#d6d6dc;
+ /* Panel de la productora: regalada, apartada y la marca que las distingue sin color. */
+ --vk-courtesy:#7c3aed;
+ --vk-courtesy-fg:#ffffff;
+ --vk-held-for:#f59e0b;
+ --vk-held-for-fg:#0b0b0d;
+ --vk-status-mark:#ffffff;
 }
 .vk-root{display:flex;flex-direction:column;gap:12px;font:var(--vk-font);
  color:var(--vk-fg);background:var(--vk-bg);position:relative;box-sizing:border-box;
@@ -1512,6 +1582,9 @@ var PICKER_CSS = `
 .vk-dot{width:14px;height:14px;border-radius:50%;flex:none;box-sizing:border-box}
 .vk-dot[data-state="selected"]{background:var(--vk-mine);border:3px solid var(--vk-accent)}
 .vk-dot[data-state="taken"]{background:var(--vk-sold);border:1px solid var(--vk-sold-stroke)}
+.vk-dot[data-state="courtesy"]{background:radial-gradient(circle at 70% 30%,var(--vk-status-mark,#fff) 0 2.5px,transparent 3px),var(--vk-courtesy,#7c3aed);border:1px solid var(--vk-sold-stroke)}
+.vk-dot[data-state="held-for"]{background:linear-gradient(var(--vk-status-mark,#fff),var(--vk-status-mark,#fff)) 80% 20%/5px 5px no-repeat,var(--vk-held-for,#f59e0b);border:1px solid var(--vk-sold-stroke)}
+.vk-dot[data-state="invite-only"]{border:2px dashed var(--vk-fg)}
 .vk-cta{border:1px solid var(--vk-accent);background:var(--vk-accent);color:var(--vk-accent-fg);
  border-radius:var(--vk-radius);padding:10px 16px;cursor:pointer;font-size:14px;font-weight:600;min-height:44px}
 .vk-cta:disabled{opacity:.5;cursor:default}
@@ -1556,6 +1629,38 @@ var PICKER_CSS = `
 .vk-type-btn[data-selected="true"]{border-color:var(--vk-accent)}
 `;
 
+// ../react/src/unit-status.ts
+var KINDS = ["sold", "courtesy", "held"];
+function unitMarks(status) {
+  const out = /* @__PURE__ */ new Map();
+  if (!status) return out;
+  for (const [id, s] of Object.entries(status)) {
+    if (s && KINDS.includes(s.kind)) out.set(id, s.kind);
+  }
+  return out;
+}
+function presentStatusKinds(marks, units) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const u of units) {
+    const k = marks.get(u.id);
+    if (k) seen.add(k);
+  }
+  return KINDS.filter((k) => seen.has(k));
+}
+function statusWord(kind, m) {
+  return kind === "sold" ? m.statusSold : kind === "courtesy" ? m.statusCourtesy : m.statusHeld;
+}
+function statusA11y(s, m) {
+  const word = statusWord(s.kind, m);
+  return s.label ? `${word}, ${s.label}` : word;
+}
+function statusAnnouncement(unit, s, m) {
+  return `${unitName(unit, m)}: ${s.label || statusWord(s.kind, m)}`;
+}
+function blockedInviteOnly(units, allow) {
+  return allow ? [] : units.filter((u) => u.inviteOnly).map((u) => u.id);
+}
+
 // ../react/src/useImage.ts
 import { useEffect, useState } from "react";
 function useImage(src) {
@@ -1664,7 +1769,8 @@ function VenueCanvas(props) {
       unassignedLabel: messages.unassigned,
       ...props.dimmedRefs ? { dimmedRefs: props.dimmedRefs } : {},
       ...props.placeTypePrices ? { placeTypePrices: props.placeTypePrices } : {},
-      ...props.highlightRefs ? { highlightRefs: props.highlightRefs } : {}
+      ...props.highlightRefs ? { highlightRefs: props.highlightRefs } : {},
+      ...props.unitMarks ? { unitMarks: props.unitMarks } : {}
     }),
     [
       layout,
@@ -1679,6 +1785,7 @@ function VenueCanvas(props) {
       props.dimmedRefs,
       props.placeTypePrices,
       props.highlightRefs,
+      props.unitMarks,
       messages.unassigned
     ]
   );
@@ -1772,7 +1879,8 @@ function VenueCanvas(props) {
       return;
     }
     const unit = unitById.get(unitId);
-    if (unit && props.focusRef !== null && unit.placeTypeRef === props.focusRef) {
+    const choosable = unit && unit.placeTypeRef !== null && (props.focusRef !== null && unit.placeTypeRef === props.focusRef || !!props.selectableRefs?.has(unit.placeTypeRef));
+    if (unit && choosable) {
       const closer = tapZoom(camera, viewport, result.tap, (props.radii.get(unit.elementId) ?? DEFAULT_UNIT_RADIUS) * camera.zoom);
       if (closer) {
         props.onCameraChange(closer);
@@ -1924,21 +2032,40 @@ function SeatMap(props) {
     const first = unitById.get(ids[0]);
     announce(byKind(first, messages.conflictSeat, messages.conflictTable, messages.conflictPlace), true);
   }, [props.conflictUnitIds, unitById, messages, announce]);
+  const marks = useMemo2(() => unitMarks(props.unitStatus), [props.unitStatus]);
+  const allowInviteOnly = props.allowInviteOnly === true;
+  const blocked = useMemo2(() => new Set(blockedInviteOnly(units, allowInviteOnly)), [units, allowInviteOnly]);
   const taken = useMemo2(
-    () => /* @__PURE__ */ new Set([...props.takenUnitIds, ...conflicted]),
-    [props.takenUnitIds, conflicted]
+    () => /* @__PURE__ */ new Set([...props.takenUnitIds, ...conflicted, ...marks.keys(), ...blocked]),
+    [props.takenUnitIds, conflicted, marks, blocked]
   );
   const held = useMemo2(() => new Set(props.heldUnitIds ?? NONE), [props.heldUnitIds]);
   const states = useMemo2(() => unitStates(units, taken, selection, held), [units, taken, selection, held]);
-  const selectable = useMemo2(() => units.filter((u) => u.placeTypeRef === focusRef), [units, focusRef]);
+  const multiType = props.multiType === true;
+  const selectableRefs = useMemo2(() => multiType ? new Set(placeTypeNames.keys()) : void 0, [multiType, placeTypeNames]);
+  const selectable = useMemo2(
+    () => units.filter((u) => selectableRefs ? u.placeTypeRef !== null && selectableRefs.has(u.placeTypeRef) : u.placeTypeRef === focusRef),
+    [units, focusRef, selectableRefs]
+  );
+  const stateWords = useMemo2(() => {
+    const out = /* @__PURE__ */ new Map();
+    for (const u of selectable) {
+      const s = props.unitStatus?.[u.id];
+      if (s && marks.has(u.id)) out.set(u.id, statusA11y(s, messages));
+      else if (blocked.has(u.id)) out.set(u.id, messages.notForSale);
+      else if (u.inviteOnly && states.get(u.id) === "free") out.set(u.id, `${messages.free}, ${messages.inviteOnly}`);
+    }
+    return out;
+  }, [selectable, props.unitStatus, marks, blocked, states, messages]);
   const a11yNodes = useMemo2(
     () => buildA11yNodes(
       selectable.map((u) => u.kind === "seat" ? u : { ...u, label: a11yLabel(u, messages) }),
       states,
       placeTypeNames,
-      { free: messages.free, taken: messages.taken, selected: messages.selected, held: messages.held, row: messages.row, seat: messages.seat }
+      { free: messages.free, taken: messages.taken, selected: messages.selected, held: messages.held, row: messages.row, seat: messages.seat },
+      stateWords
     ),
-    [selectable, states, placeTypeNames, messages]
+    [selectable, states, placeTypeNames, messages, stateWords]
   );
   const bg = layout.meta.background;
   const background = useImage(bg?.src ?? null);
@@ -1975,10 +2102,20 @@ function SeatMap(props) {
   const activateUnit = useCallback((unitId) => {
     const unit = unitById.get(unitId);
     if (!unit) return;
-    if (unit.placeTypeRef !== focusRef) {
+    const ownType = unit.placeTypeRef === focusRef || !!selectableRefs && unit.placeTypeRef !== null && selectableRefs.has(unit.placeTypeRef);
+    if (!ownType) {
       switchTo(unit.placeTypeRef);
       return;
     }
+    const status = props.unitStatus?.[unitId];
+    if (status && marks.has(unitId) && !selection.includes(unitId)) {
+      announce(statusAnnouncement(unit, status, messages), true);
+      return;
+    }
+    if (blocked.has(unitId) && !selection.includes(unitId)) {
+      announce(byKind(unit, messages.inviteOnlySeat, messages.inviteOnlyTable, messages.inviteOnlyPlace), true);
+      return;
+    }
     if (states.get(unitId) === "held" && !selection.includes(unitId)) {
       announce(messages.heldSeat, true);
       return;
@@ -1995,13 +2132,29 @@ function SeatMap(props) {
     const added = result.selection.includes(unitId);
     announce(`${unitName(unit, messages)}: ${added ? messages.selected : messages.free}`);
     onSelectionChange(result.selection);
-  }, [unitById, focusRef, states, selection, maxSelection, messages, announce, onSelectionChange, switchTo]);
+  }, [
+    unitById,
+    focusRef,
+    selectableRefs,
+    props.unitStatus,
+    marks,
+    blocked,
+    states,
+    selection,
+    maxSelection,
+    messages,
+    announce,
+    onSelectionChange,
+    switchTo
+  ]);
   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;
   const kind = useMemo2(() => focusKind(units, focusRef), [units, focusRef]);
   const hint = kind === "seat" ? messages.focusHintSeats : kind === "place" ? messages.focusHintPlaces : messages.focusHintTables;
+  const statusKinds = useMemo2(() => presentStatusKinds(marks, units), [marks, units]);
+  const showInviteOnly = useMemo2(() => allowInviteOnly && units.some((u) => u.inviteOnly && !marks.has(u.id)), [allowInviteOnly, units, marks]);
   return /* @__PURE__ */ jsxs2(
     "div",
     {
@@ -2043,7 +2196,9 @@ function SeatMap(props) {
             onActivateUnit: activateUnit,
             messages,
             placeTypeColors,
-            focusRef,
+            focusRef: multiType ? null : focusRef,
+            ...selectableRefs ? { selectableRefs } : {},
+            ...marks.size > 0 ? { unitMarks: marks } : {},
             onTapEmpty,
             placeTypePrices,
             ...props.height !== void 0 ? { height: props.height } : {},
@@ -2064,7 +2219,19 @@ function SeatMap(props) {
           /* @__PURE__ */ jsxs2("li", { children: [
             /* @__PURE__ */ jsx2("span", { className: "vk-dot", "data-state": "taken" }),
             messages.legendTaken
-          ] })
+          ] }),
+          statusKinds.includes("courtesy") ? /* @__PURE__ */ jsxs2("li", { children: [
+            /* @__PURE__ */ jsx2("span", { className: "vk-dot", "data-state": "courtesy" }),
+            messages.legendCourtesy
+          ] }) : null,
+          statusKinds.includes("held") ? /* @__PURE__ */ jsxs2("li", { children: [
+            /* @__PURE__ */ jsx2("span", { className: "vk-dot", "data-state": "held-for" }),
+            messages.legendHeld
+          ] }) : null,
+          showInviteOnly ? /* @__PURE__ */ jsxs2("li", { children: [
+            /* @__PURE__ */ jsx2("span", { className: "vk-dot", "data-state": "invite-only", style: { background: focusColor } }),
+            messages.legendInviteOnly
+          ] }) : null
         ] }),
         announcement.blocking && announcement.text ? /* @__PURE__ */ jsx2("p", { className: "vk-notice", "data-testid": "notice", children: announcement.text }) : null,
         embedded ? null : /* @__PURE__ */ jsxs2("div", { className: "vk-bar", "data-testid": "summary-bar", children: [
@@ -2135,9 +2302,11 @@ function VenueOverview(props) {
   const highlightRefs = useMemo3(() => new Set(selectedRefs), [selectedRefs]);
   const takenIds = props.takenUnitIds ?? NONE2;
   const selectedIds = props.selectedUnitIds ?? NONE2;
+  const marks = useMemo3(() => unitMarks(props.unitStatus), [props.unitStatus]);
+  const allowInviteOnly = props.allowInviteOnly === true;
   const states = useMemo3(
-    () => unitStates(units, new Set(takenIds), selectedIds, NO_HELD),
-    [units, takenIds, selectedIds]
+    () => unitStates(units, /* @__PURE__ */ new Set([...takenIds, ...blockedInviteOnly(units, allowInviteOnly)]), selectedIds, NO_HELD),
+    [units, takenIds, selectedIds, allowInviteOnly]
   );
   const hideList = props.hideList === true;
   const canvasMessages = useMemo3(
@@ -2214,6 +2383,7 @@ function VenueOverview(props) {
             dimmedRefs,
             placeTypePrices,
             highlightRefs,
+            ...marks.size > 0 ? { unitMarks: marks } : {},
             ...props.height !== void 0 ? { height: props.height } : {},
             ratio: contentRatio,
             cooperative: true,
@@ -3007,7 +3177,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 });
@@ -3362,20 +3532,23 @@ function blockRangeText(block, templates) {
 }
 function reshapeBlock(block, patch) {
   const next = { ...block, ...patch };
-  if (block.removed.length === 0) return next;
+  if (block.removed.length === 0 && !block.reserved?.length) return next;
   const oldRows = expandLabels(block.rowLabels, block.rows);
   const oldSeats = expandLabels(block.seatLabels, block.cols);
   const newRows = expandLabels(next.rowLabels, next.rows);
   const newSeats = expandLabels(next.seatLabels, next.cols);
-  const removed = [];
-  for (const id of block.removed) {
-    const [, row, seat] = parseUnitId(id);
-    const r = row === void 0 ? -1 : oldRows.indexOf(row);
-    const c = seat === void 0 ? -1 : oldSeats.indexOf(seat);
-    if (r < 0 || c < 0 || r >= next.rows || c >= next.cols) continue;
-    removed.push(seatUnitId(block.id, newRows[r], newSeats[c]));
-  }
-  return { ...next, removed };
+  const remap = (ids) => {
+    const out = [];
+    for (const id of ids) {
+      const [, row, seat] = parseUnitId(id);
+      const r = row === void 0 ? -1 : oldRows.indexOf(row);
+      const c = seat === void 0 ? -1 : oldSeats.indexOf(seat);
+      if (r < 0 || c < 0 || r >= next.rows || c >= next.cols) continue;
+      out.push(seatUnitId(block.id, newRows[r], newSeats[c]));
+    }
+    return out;
+  };
+  return { ...next, removed: remap(block.removed), ...block.reserved ? { reserved: remap(block.reserved) } : {} };
 }
 function labelStart(kind, raw, alphabet) {
   const start = kind === "letters" ? raw.trim().toUpperCase() : raw.trim();
@@ -3457,8 +3630,14 @@ function unitsOnSale(placeTypes, summary) {
 }
 function numberingCounts(block, m) {
   const removed = block.removed.length;
-  const onSale = format(m.resultOnSale, { seats: plural(block.rows * block.cols - removed, m.countSeat, m.countSeats) });
-  return removed === 0 ? onSale : `${onSale} \xB7 ${plural(removed, m.removedOne, m.removedMany)}`;
+  const out = new Set(block.removed);
+  const reserved = (block.reserved ?? []).filter((id) => !out.has(id)).length;
+  const onSale = format(m.resultOnSale, { seats: plural(block.rows * block.cols - removed - reserved, m.countSeat, m.countSeats) });
+  return [
+    onSale,
+    ...reserved > 0 ? [plural(reserved, m.reservedOne, m.reservedMany)] : [],
+    ...removed > 0 ? [plural(removed, m.removedOne, m.removedMany)] : []
+  ].join(" \xB7 ");
 }
 
 // ../react/src/designer/FloatingPanel.tsx
@@ -3951,7 +4130,7 @@ var designerEs = {
   blockRangeOneRow: "Fila {row} \xB7 butacas {seatFrom} a {seatTo}",
   numbering: "Numeraci\xF3n y pasillos",
   numberingTitle: "Numeraci\xF3n y pasillos \xB7 {name}",
-  numberingHint: "As\xED lo va a ver quien compra. Toc\xE1 una butaca para sacarla (pasillo o columna); los n\xFAmeros de las dem\xE1s no cambian.",
+  numberingHint: "As\xED lo va a ver quien compra. Toc\xE1 una butaca para reservarla, o eleg\xED \xABSacar (pasillo)\xBB para sacarla; los n\xFAmeros de las dem\xE1s no cambian.",
   numberingTooBig: "El bloque es muy grande para mostrarlo ac\xE1. La numeraci\xF3n se puede cambiar igual.",
   numberingFailed: "No se pudo aplicar este cambio.",
   rowsNamed: "Las filas se llaman",
@@ -3987,6 +4166,17 @@ var designerEs = {
   seatName: "Fila {row}, butaca {seat}",
   seatNameRemoved: "Fila {row}, butaca {seat} sacada",
   seatNameSold: "Fila {row}, butaca {seat}, ya vendida",
+  seatNameReserved: "Fila {row}, butaca {seat}, reservada",
+  tapMode: "Al tocar",
+  tapReserve: "Reservar",
+  tapRemove: "Sacar (pasillo)",
+  reservedNotice: "Una butaca reservada se ve en el mapa pero no se vende al p\xFAblico: queda para cortes\xEDas y cupos apartados.",
+  legendReserved: "Reservada",
+  reservedOne: "1 reservada",
+  reservedMany: "{n} reservadas",
+  tableInviteOnly: "Mesa s\xF3lo con invitaci\xF3n",
+  placesInviteOnly: "Lugares s\xF3lo con invitaci\xF3n",
+  placeInviteOnly: "Lugar {n} s\xF3lo con invitaci\xF3n",
   assignTitle: "\xBFDe qu\xE9 entrada es?",
   noPlaceTypes: "No hay entradas que le sirvan a esta pieza.",
   capacityCount: "{placed} de {capacity} lugares",
@@ -4171,7 +4361,7 @@ var designerEn = {
   blockRangeOneRow: "Row {row} \xB7 seats {seatFrom} to {seatTo}",
   numbering: "Numbering and aisles",
   numberingTitle: "Numbering and aisles \xB7 {name}",
-  numberingHint: "This is how buyers will see it. Tap a seat to remove it (an aisle or a pillar); the other numbers don't change.",
+  numberingHint: "This is how buyers will see it. Tap a seat to reserve it, or pick \xABRemove (aisle)\xBB to remove it; the other numbers don't change.",
   numberingTooBig: "The block is too big to show here. You can still change the numbering.",
   numberingFailed: "This change couldn't be applied.",
   rowsNamed: "Rows are named",
@@ -4207,6 +4397,17 @@ var designerEn = {
   seatName: "Row {row}, seat {seat}",
   seatNameRemoved: "Row {row}, seat {seat} removed",
   seatNameSold: "Row {row}, seat {seat}, already sold",
+  seatNameReserved: "Row {row}, seat {seat}, reserved",
+  tapMode: "On tap",
+  tapReserve: "Reserve",
+  tapRemove: "Remove (aisle)",
+  reservedNotice: "A reserved seat shows on the map but isn't sold to the public: it's kept for complimentary tickets and held allocations.",
+  legendReserved: "Reserved",
+  reservedOne: "1 reserved",
+  reservedMany: "{n} reserved",
+  tableInviteOnly: "Invitation-only table",
+  placesInviteOnly: "Invitation-only places",
+  placeInviteOnly: "Place {n} invitation only",
   assignTitle: "Which ticket is it for?",
   noPlaceTypes: "No tickets fit this piece.",
   capacityCount: "{placed} of {capacity} spots",
@@ -4378,6 +4579,38 @@ function pieceHeading(el, placeTypes, m) {
   const count = el.type === "seatBlock" ? plural2(expandSeatBlock(el).length, m.countSeat, m.countSeats) : el.mode === "whole" ? plural2(1, m.countTable, m.countTables) : plural2(el.places, m.countPlace, m.countPlaces);
   return { color: option?.color ?? null, text: `${name} \xB7 ${count}` };
 }
+function TableInviteOnly(props) {
+  const { table: t, messages: m } = props;
+  const reserved = new Set(t.reservedPlaces ?? []);
+  return /* @__PURE__ */ jsxs8("div", { className: "vk-d-num-group", "data-testid": "table-invite-only", style: { ["--vk-type"]: props.color ?? "var(--vk-unassigned, #9ca3af)" }, children: [
+    t.mode === "whole" ? /* @__PURE__ */ jsxs8("label", { className: "vk-d-check", children: [
+      /* @__PURE__ */ jsx9(
+        "input",
+        {
+          type: "checkbox",
+          checked: t.reserved === true,
+          onChange: () => props.onRun({ type: "replaceElement", element: toggleReservedTable(t) })
+        }
+      ),
+      /* @__PURE__ */ jsx9("span", { children: m.tableInviteOnly })
+    ] }) : /* @__PURE__ */ jsxs8("div", { role: "group", "aria-label": m.placesInviteOnly, children: [
+      /* @__PURE__ */ jsx9("span", { className: "vk-d-sub", children: m.placesInviteOnly }),
+      /* @__PURE__ */ jsx9("div", { className: "vk-d-places", children: Array.from({ length: t.places }, (_, i) => i + 1).map((n) => /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          className: "vk-d-place",
+          "aria-pressed": reserved.has(n),
+          "aria-label": format(m.placeInviteOnly, { n }),
+          onClick: () => props.onRun({ type: "replaceElement", element: toggleReservedTable(t, n) }),
+          children: n
+        },
+        n
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx9("p", { className: "vk-d-hint", children: m.reservedNotice })
+  ] });
+}
 function PieceInspector(props) {
   const { element: el, messages: m } = props;
   const [labelError, setLabelError] = useState8(null);
@@ -4519,7 +4752,8 @@ function PieceInspector(props) {
       /* @__PURE__ */ jsx9("span", { "data-testid": "block-range", children: blockRangeText(el, { many: m.blockRange, one: m.blockRangeOneRow }) }),
       /* @__PURE__ */ jsx9("button", { type: "button", className: "vk-d-link", "aria-haspopup": "dialog", onClick: props.onNumbering, children: m.numbering })
     ] }),
-    el.type === "table" && assigned && /* @__PURE__ */ jsx9("p", { className: "vk-d-hint", children: el.mode === "whole" ? m.sellWhole : m.sellPerPlace })
+    el.type === "table" && assigned && /* @__PURE__ */ jsx9("p", { className: "vk-d-hint", children: el.mode === "whole" ? m.sellWhole : m.sellPerPlace }),
+    el.type === "table" && assigned && /* @__PURE__ */ jsx9(TableInviteOnly, { table: el, color: heading.color, messages: m, onRun: props.onRun })
   ] });
 }
 
@@ -4584,6 +4818,8 @@ function NumberingDialog(props) {
   const rowLabels = expandLabels(draft.rowLabels, draft.rows);
   const seatLabels = expandLabels(draft.seatLabels, draft.cols);
   const removed = new Set(draft.removed);
+  const reserved = new Set(draft.reserved ?? []);
+  const [tapMode, setTapMode] = useState9("reserve");
   const origRows = expandLabels(props.block.rowLabels, props.block.rows);
   const origSeats = expandLabels(props.block.seatLabels, props.block.cols);
   const soldAt = (r, c) => r < origRows.length && c < origSeats.length && props.lockedUnitIds.has(seatUnitId(props.block.id, origRows[r], origSeats[c]));
@@ -4611,19 +4847,21 @@ function NumberingDialog(props) {
             const id = seatUnitId(draft.id, row, seat);
             const sold = soldAt(r, c) && !removed.has(id);
             const out = removed.has(id);
+            const held = !out && reserved.has(id);
             return /* @__PURE__ */ jsx10(
               "button",
               {
                 type: "button",
                 className: "vk-d-num-seat",
                 "data-removed": out || void 0,
+                "data-reserved": held || void 0,
                 "data-sold": sold || void 0,
                 disabled: sold,
-                "aria-pressed": out,
-                "aria-label": format(sold ? m.seatNameSold : out ? m.seatNameRemoved : m.seatName, { row, seat }),
+                "aria-pressed": tapMode === "reserve" ? held : out,
+                "aria-label": format(sold ? m.seatNameSold : out ? m.seatNameRemoved : held ? m.seatNameReserved : m.seatName, { row, seat }),
                 onClick: () => {
                   setFailed(false);
-                  setDraft((d) => toggleRemovedSeat(d, id));
+                  setDraft((d) => tapMode === "remove" || out ? toggleRemovedSeat(d, id) : toggleReservedSeat(d, id));
                 },
                 children: seat
               },
@@ -4636,6 +4874,10 @@ function NumberingDialog(props) {
             /* @__PURE__ */ jsx10("span", { className: "vk-d-legend-dot", "aria-hidden": "true" }),
             m.legendOnSale
           ] }),
+          /* @__PURE__ */ jsxs9("span", { children: [
+            /* @__PURE__ */ jsx10("span", { className: "vk-d-legend-dot vk-d-legend-reserved", "aria-hidden": "true" }),
+            m.legendReserved
+          ] }),
           /* @__PURE__ */ jsxs9("span", { children: [
             /* @__PURE__ */ jsx10("span", { className: "vk-d-legend-dot vk-d-legend-out", "aria-hidden": "true" }),
             m.legendRemoved
@@ -4644,6 +4886,18 @@ function NumberingDialog(props) {
       ] })
     ] }),
     /* @__PURE__ */ jsxs9("div", { className: "vk-d-num-side", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "vk-d-num-group", "data-testid": "tap-mode", children: [
+        /* @__PURE__ */ jsx10(
+          Segmented,
+          {
+            label: m.tapMode,
+            value: tapMode,
+            options: [{ value: "reserve", label: m.tapReserve }, { value: "remove", label: m.tapRemove }],
+            onChange: setTapMode
+          }
+        ),
+        /* @__PURE__ */ jsx10("p", { className: "vk-d-hint", "data-testid": "reserved-notice", children: m.reservedNotice })
+      ] }),
       /* @__PURE__ */ jsxs9("div", { className: "vk-d-num-group", children: [
         /* @__PURE__ */ jsx10(
           Segmented,
@@ -5262,10 +5516,15 @@ var DESIGNER_CSS = `
 .vk-d-num-seat{flex:none;width:34px;height:34px;border-radius:999px;border:0;padding:0;background:var(--vk-type);
  color:#fff;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
 .vk-d-num-seat[data-removed]{background:transparent;border:2px dashed var(--vk-unassigned,#5a5a66);color:var(--vk-muted)}
+.vk-d-num-seat[data-reserved]{background:repeating-linear-gradient(45deg,var(--vk-type) 0 4px,var(--vk-surface,#fff) 4px 7px);border:2px solid var(--vk-fg);color:var(--vk-fg)}
 .vk-d-num-seat[data-sold]{cursor:not-allowed;opacity:.55}
-.vk-d-legend{display:flex;gap:18px;font-size:13px;color:var(--vk-muted)}
+.vk-d-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:13px;color:var(--vk-muted)}
 .vk-d-legend > span{display:flex;align-items:center;gap:6px}
 .vk-d-legend-dot{width:12px;height:12px;border-radius:999px;background:var(--vk-type)}
+.vk-d-places{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
+.vk-d-place{min-width:44px;min-height:44px;border-radius:999px;border:1px solid var(--vk-line);background:var(--vk-seg,transparent);color:var(--vk-fg);font:inherit;font-weight:600;cursor:pointer}
+.vk-d-place[aria-pressed="true"]{background:repeating-linear-gradient(45deg,var(--vk-type,#9ca3af) 0 4px,var(--vk-surface,#fff) 4px 7px);border:2px solid var(--vk-fg)}
+.vk-d-legend-reserved{background:repeating-linear-gradient(45deg,var(--vk-type) 0 3px,var(--vk-surface,#fff) 3px 5px);border:2px solid var(--vk-fg)}
 .vk-d-legend-out{background:transparent;border:2px dashed var(--vk-unassigned,#5a5a66)}
 .vk-d-num-side{width:340px;flex:none;border-left:1px solid var(--vk-line);padding:24px;display:flex;flex-direction:column;gap:20px;overflow:auto;background:var(--vk-surface)}
 .vk-d-num-group{display:flex;flex-direction:column;gap:8px}
@@ -6098,7 +6357,7 @@ function VenueDesigner(props) {
 }
 
 // ../react/src/index.ts
-var VERSION = "0.10.2";
+var VERSION = "0.11.0";
 export {
   DESIGNER_CSS,
   PICKER_CSS,