@zonetrix/viewer 2.11.0 → 2.11.1

package/dist/components/SeatMapViewer.d.ts

@@ -21,14 +21,14 @@ export interface SeatMapViewerProps {
     onConfigLoad?: (config: SeatMapConfig) => void;
     onError?: (error: Error) => void;
     showFloorSelector?: boolean;
-    floorSelectorPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    floorSelectorPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
     floorSelectorClassName?: string;
     showAllFloorsOption?: boolean;
     allFloorsLabel?: string;
     fitToView?: boolean;
     fitPadding?: number;
     showZoomControls?: boolean;
-    zoomControlsPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    zoomControlsPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
     zoomControlsClassName?: string;
     /**
      * Minimum zoom level.

package/dist/index.d.ts

@@ -6,9 +6,9 @@ export { useConfigFetcher } from './hooks/useConfigFetcher';
 export { useContainerSize } from './hooks/useContainerSize';
 export { useTouchGestures } from './hooks/useTouchGestures';
 export { useFirebaseSeatStates } from './hooks/useFirebaseSeatStates';
-export type { UseFirebaseSeatStatesOptions, UseFirebaseSeatStatesResult } from './hooks/useFirebaseSeatStates';
+export type { UseFirebaseSeatStatesOptions, UseFirebaseSeatStatesResult, } from './hooks/useFirebaseSeatStates';
 export { useFirebaseConfig } from './hooks/useFirebaseConfig';
-export type { UseFirebaseConfigOptions, UseFirebaseConfigResult } from './hooks/useFirebaseConfig';
+export type { UseFirebaseConfigOptions, UseFirebaseConfigResult, } from './hooks/useFirebaseConfig';
 export { useRealtimeSeatMap } from './hooks/useRealtimeSeatMap';
-export type { UseRealtimeSeatMapOptions, UseRealtimeSeatMapResult } from './hooks/useRealtimeSeatMap';
+export type { UseRealtimeSeatMapOptions, UseRealtimeSeatMapResult, } from './hooks/useRealtimeSeatMap';
 export { initializeFirebaseForViewer, isFirebaseInitialized, clearFirebaseInstance, } from './firebase/client';

package/dist/index.mjs

@@ -88,7 +88,11 @@ function Ct(n, r) {
     }, s = (a) => {
       a.touches.length < 2 && (t.current = null, o.current = null);
     };
-    return i.addEventListener("touchstart", S, { passive: !1 }), i.addEventListener("touchmove", p, { passive: !1 }), i.addEventListener("touchend", s), () => {
+    return i.addEventListener("touchstart", S, {
+      passive: !1
+    }), i.addEventListener("touchmove", p, {
+      passive: !1
+    }), i.addEventListener("touchend", s), () => {
       i.removeEventListener("touchstart", S), i.removeEventListener("touchmove", p), i.removeEventListener("touchend", s);
     };
   }, [n, r]);
@@ -103,59 +107,64 @@ const Rt = {
   seatHidden: "#4a4a4a",
   gridLines: "#404040",
   currency: "KD"
-}, ke = J(({ seat: n, state: r, colors: t, onClick: o, onMouseEnter: d, onMouseLeave: l }) => {
-  const p = {
-    available: t.seatAvailable,
-    reserved: t.seatReserved,
-    selected: t.seatSelected,
-    unavailable: t.seatUnavailable,
-    hidden: t.seatHidden
-    // Hidden seats are filtered out, but included for type safety
-  }[r], s = r === "available" || r === "selected", a = z(() => {
-    s && o(n);
-  }, [n, o, s]), f = z((g) => {
-    d(n, g);
-    const C = g.target.getStage();
-    C && s && (C.container().style.cursor = "pointer");
-  }, [n, d, s]), b = z((g) => {
-    l();
-    const C = g.target.getStage();
-    C && (C.container().style.cursor = "grab");
-  }, [l]), x = {
-    x: n.position.x,
-    y: n.position.y,
-    fill: p,
-    stroke: "#ffffff",
-    strokeWidth: 1,
-    onClick: a,
-    onTap: a,
-    onMouseEnter: f,
-    onMouseLeave: b
-  };
-  return n.shape === "circle" ? /* @__PURE__ */ u(
-    ze,
-    {
-      ...x,
-      radius: 12
-    }
-  ) : /* @__PURE__ */ u(
-    De,
-    {
-      ...x,
-      width: 24,
-      height: 24,
-      offsetX: 12,
-      offsetY: 12,
-      cornerRadius: n.shape === "square" ? 0 : 4
-    }
-  );
-});
+}, ke = J(
+  ({ seat: n, state: r, colors: t, onClick: o, onMouseEnter: d, onMouseLeave: l }) => {
+    const p = {
+      available: t.seatAvailable,
+      reserved: t.seatReserved,
+      selected: t.seatSelected,
+      unavailable: t.seatUnavailable,
+      hidden: t.seatHidden
+      // Hidden seats are filtered out, but included for type safety
+    }[r], s = r === "available" || r === "selected", a = z(() => {
+      s && o(n);
+    }, [n, o, s]), f = z(
+      (g) => {
+        d(n, g);
+        const C = g.target.getStage();
+        C && s && (C.container().style.cursor = "pointer");
+      },
+      [n, d, s]
+    ), b = z(
+      (g) => {
+        l();
+        const C = g.target.getStage();
+        C && (C.container().style.cursor = "grab");
+      },
+      [l]
+    ), x = {
+      x: n.position.x,
+      y: n.position.y,
+      fill: p,
+      stroke: "#ffffff",
+      strokeWidth: 1,
+      onClick: a,
+      onTap: a,
+      onMouseEnter: f,
+      onMouseLeave: b
+    };
+    return n.shape === "circle" ? /* @__PURE__ */ u(ze, { ...x, radius: 12 }) : /* @__PURE__ */ u(
+      De,
+      {
+        ...x,
+        width: 24,
+        height: 24,
+        offsetX: 12,
+        offsetY: 12,
+        cornerRadius: n.shape === "square" ? 0 : 4
+      }
+    );
+  }
+);
 ke.displayName = "ViewerSeat";
 const We = J(({ stage: n, stageColor: r }) => {
   const t = n.config, o = t.shape || "rectangle", d = t.showLabel !== !1, l = t.color || r, i = t.width / t.height, S = i < 0.5, p = i > 2;
   let s;
   S ? s = t.width * 0.25 : p ? s = t.height * 0.35 : s = Math.min(t.width, t.height) * 0.25;
-  const a = t.label?.length || 6, x = t.width * 0.85 / a * 1.5, g = Math.max(10, Math.min(24, Math.min(s, x))), C = 4, E = Math.max(20, t.width - C * 2), F = (t.width - E) / 2, R = {
+  const a = t.label?.length || 6, x = t.width * 0.85 / a * 1.5, g = Math.max(
+    10,
+    Math.min(24, Math.min(s, x))
+  ), C = 4, E = Math.max(20, t.width - C * 2), F = (t.width - E) / 2, R = {
     fill: l + "80",
     stroke: "#ffffff",
     strokeWidth: 2,
@@ -205,26 +214,34 @@ const We = J(({ stage: n, stageColor: r }) => {
         );
     }
   };
-  return /* @__PURE__ */ D(bt, { x: n.position.x, y: n.position.y, rotation: t.rotation || 0, children: [
-    I(),
-    d && /* @__PURE__ */ u(
-      Te,
-      {
-        text: t.label,
-        x: F,
-        y: C,
-        width: E,
-        height: t.height - C * 2,
-        fontSize: g,
-        fontStyle: "bold",
-        fill: "#ffffff",
-        align: "center",
-        verticalAlign: "middle",
-        wrap: "word",
-        ellipsis: !0
-      }
-    )
-  ] });
+  return /* @__PURE__ */ D(
+    bt,
+    {
+      x: n.position.x,
+      y: n.position.y,
+      rotation: t.rotation || 0,
+      children: [
+        I(),
+        d && /* @__PURE__ */ u(
+          Te,
+          {
+            text: t.label,
+            x: F,
+            y: C,
+            width: E,
+            height: t.height - C * 2,
+            fontSize: g,
+            fontStyle: "bold",
+            fill: "#ffffff",
+            align: "center",
+            verticalAlign: "middle",
+            wrap: "word",
+            ellipsis: !0
+          }
+        )
+      ]
+    }
+  );
 });
 We.displayName = "ViewerStage";
 const Pe = J(({ text: n }) => /* @__PURE__ */ u(
@@ -240,208 +257,199 @@ const Pe = J(({ text: n }) => /* @__PURE__ */ u(
   }
 ));
 Pe.displayName = "ViewerText";
-const Xe = J(({
-  floors: n,
-  currentFloorId: r,
-  onFloorChange: t,
-  showAllOption: o,
-  allLabel: d,
-  position: l,
-  className: i
-}) => {
-  const S = A(
-    () => [...n].sort((b, x) => b.order - x.order),
-    [n]
-  ), s = {
-    position: "absolute",
-    display: "flex",
-    alignItems: "center",
-    gap: "8px",
-    padding: "8px 12px",
-    backgroundColor: "rgba(26, 26, 26, 0.95)",
-    borderRadius: "8px",
-    margin: "12px",
-    zIndex: 10,
-    ...{
-      "top-left": { top: 0, left: 0 },
-      "top-right": { top: 0, right: 0 },
-      "bottom-left": { bottom: 0, left: 0 },
-      "bottom-right": { bottom: 0, right: 0 }
-    }[l]
-  }, a = {
-    padding: "10px 16px",
-    fontSize: "14px",
-    fontWeight: 500,
-    border: "1px solid #444",
-    borderRadius: "6px",
-    backgroundColor: "transparent",
-    color: "#fff",
-    cursor: "pointer",
-    transition: "all 0.2s ease",
-    minHeight: "44px",
-    touchAction: "manipulation"
-  }, f = {
-    ...a,
-    backgroundColor: "#3A7DE5",
-    borderColor: "#3A7DE5"
-  };
-  return /* @__PURE__ */ D("div", { className: i, style: s, children: [
-    o && /* @__PURE__ */ u(
-      "button",
-      {
-        type: "button",
-        onClick: () => t(null),
-        style: r === null ? f : a,
-        children: d
-      }
-    ),
-    S.map((b) => /* @__PURE__ */ u(
-      "button",
-      {
-        type: "button",
-        onClick: () => t(b.id),
-        style: r === b.id ? f : a,
-        children: b.name
-      },
-      b.id
-    ))
-  ] });
-});
+const Xe = J(
+  ({
+    floors: n,
+    currentFloorId: r,
+    onFloorChange: t,
+    showAllOption: o,
+    allLabel: d,
+    position: l,
+    className: i
+  }) => {
+    const S = A(
+      () => [...n].sort((b, x) => b.order - x.order),
+      [n]
+    ), s = {
+      position: "absolute",
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      padding: "8px 12px",
+      backgroundColor: "rgba(26, 26, 26, 0.95)",
+      borderRadius: "8px",
+      margin: "12px",
+      zIndex: 10,
+      ...{
+        "top-left": { top: 0, left: 0 },
+        "top-right": { top: 0, right: 0 },
+        "bottom-left": { bottom: 0, left: 0 },
+        "bottom-right": { bottom: 0, right: 0 }
+      }[l]
+    }, a = {
+      padding: "10px 16px",
+      fontSize: "14px",
+      fontWeight: 500,
+      border: "1px solid #444",
+      borderRadius: "6px",
+      backgroundColor: "transparent",
+      color: "#fff",
+      cursor: "pointer",
+      transition: "all 0.2s ease",
+      minHeight: "44px",
+      touchAction: "manipulation"
+    }, f = {
+      ...a,
+      backgroundColor: "#3A7DE5",
+      borderColor: "#3A7DE5"
+    };
+    return /* @__PURE__ */ D("div", { className: i, style: s, children: [
+      o && /* @__PURE__ */ u(
+        "button",
+        {
+          type: "button",
+          onClick: () => t(null),
+          style: r === null ? f : a,
+          children: d
+        }
+      ),
+      S.map((b) => /* @__PURE__ */ u(
+        "button",
+        {
+          type: "button",
+          onClick: () => t(b.id),
+          style: r === b.id ? f : a,
+          children: b.name
+        },
+        b.id
+      ))
+    ] });
+  }
+);
 Xe.displayName = "FloorSelectorBar";
-const Ye = J(({
-  scale: n,
-  minScale: r,
-  maxScale: t,
-  onZoomIn: o,
-  onZoomOut: d,
-  position: l,
-  className: i
-}) => {
-  const p = {
-    position: "absolute",
-    display: "flex",
-    flexDirection: "column",
-    gap: "4px",
-    padding: "8px",
-    backgroundColor: "rgba(26, 26, 26, 0.95)",
-    borderRadius: "8px",
-    margin: "12px",
-    zIndex: 10,
-    ...{
-      "top-left": { top: 0, left: 0 },
-      "top-right": { top: 0, right: 0 },
-      "bottom-left": { bottom: 0, left: 0 },
-      "bottom-right": { bottom: 0, right: 0 }
-    }[l]
-  }, s = {
-    width: "44px",
-    height: "44px",
-    minWidth: "44px",
-    minHeight: "44px",
-    fontSize: "22px",
-    fontWeight: "bold",
-    border: "1px solid #444",
-    borderRadius: "6px",
-    backgroundColor: "transparent",
-    color: "#fff",
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    transition: "all 0.2s ease",
-    touchAction: "manipulation"
-  }, a = {
-    ...s,
-    opacity: 0.4,
-    cursor: "not-allowed"
-  }, f = n < t, b = n > r;
-  return /* @__PURE__ */ D("div", { className: i, style: p, children: [
-    /* @__PURE__ */ u(
-      "button",
-      {
-        type: "button",
-        onClick: o,
-        disabled: !f,
-        style: f ? s : a,
-        title: "Zoom In",
-        children: "+"
-      }
-    ),
-    /* @__PURE__ */ u(
-      "button",
-      {
-        type: "button",
-        onClick: d,
-        disabled: !b,
-        style: b ? s : a,
-        title: "Zoom Out",
-        children: "−"
-      }
-    )
-  ] });
-});
+const Ye = J(
+  ({ scale: n, minScale: r, maxScale: t, onZoomIn: o, onZoomOut: d, position: l, className: i }) => {
+    const p = {
+      position: "absolute",
+      display: "flex",
+      flexDirection: "column",
+      gap: "4px",
+      padding: "8px",
+      backgroundColor: "rgba(26, 26, 26, 0.95)",
+      borderRadius: "8px",
+      margin: "12px",
+      zIndex: 10,
+      ...{
+        "top-left": { top: 0, left: 0 },
+        "top-right": { top: 0, right: 0 },
+        "bottom-left": { bottom: 0, left: 0 },
+        "bottom-right": { bottom: 0, right: 0 }
+      }[l]
+    }, s = {
+      width: "44px",
+      height: "44px",
+      minWidth: "44px",
+      minHeight: "44px",
+      fontSize: "22px",
+      fontWeight: "bold",
+      border: "1px solid #444",
+      borderRadius: "6px",
+      backgroundColor: "transparent",
+      color: "#fff",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      transition: "all 0.2s ease",
+      touchAction: "manipulation"
+    }, a = {
+      ...s,
+      opacity: 0.4,
+      cursor: "not-allowed"
+    }, f = n < t, b = n > r;
+    return /* @__PURE__ */ D("div", { className: i, style: p, children: [
+      /* @__PURE__ */ u(
+        "button",
+        {
+          type: "button",
+          onClick: o,
+          disabled: !f,
+          style: f ? s : a,
+          title: "Zoom In",
+          children: "+"
+        }
+      ),
+      /* @__PURE__ */ u(
+        "button",
+        {
+          type: "button",
+          onClick: d,
+          disabled: !b,
+          style: b ? s : a,
+          title: "Zoom Out",
+          children: "−"
+        }
+      )
+    ] });
+  }
+);
 Ye.displayName = "ZoomControls";
-const Ae = J(({
-  visible: n,
-  x: r,
-  y: t,
-  seat: o,
-  currency: d,
-  state: l
-}) => {
-  if (!n || !o) return null;
-  const i = o.seatNumber || (o.rowLabel && o.columnLabel ? `${o.rowLabel}-${o.columnLabel}` : "N/A"), S = {
-    position: "fixed",
-    left: `${r + 15}px`,
-    top: `${t + 15}px`,
-    zIndex: 1e3,
-    pointerEvents: "none"
-  }, p = {
-    backgroundColor: "rgba(26, 26, 26, 0.95)",
-    color: "#fff",
-    border: "1px solid #444",
-    borderRadius: "8px",
-    padding: "8px 12px",
-    fontSize: "13px",
-    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
-    minWidth: "140px"
-  }, s = {
-    color: "#9ca3af",
-    marginRight: "4px"
-  }, a = {
-    fontWeight: 600
-  }, f = {
-    color: "#4ade80",
-    fontWeight: 600
-  }, b = {
-    fontSize: "11px",
-    color: "#6b7280",
-    textTransform: "capitalize",
-    marginTop: "4px"
-  };
-  return /* @__PURE__ */ u("div", { style: S, children: /* @__PURE__ */ D("div", { style: p, children: [
-    o.sectionName && /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
-      /* @__PURE__ */ u("span", { style: s, children: "Section:" }),
-      /* @__PURE__ */ u("span", { style: { ...a, color: "#3b82f6" }, children: o.sectionName })
-    ] }),
-    /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
-      /* @__PURE__ */ u("span", { style: s, children: "Seat:" }),
-      /* @__PURE__ */ u("span", { style: a, children: i })
-    ] }),
-    o.price !== void 0 && o.price > 0 && l === "available" && /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
-      /* @__PURE__ */ u("span", { style: s, children: "Price:" }),
-      /* @__PURE__ */ D("span", { style: f, children: [
-        d,
-        " ",
-        o.price.toFixed(2)
+const Ae = J(
+  ({ visible: n, x: r, y: t, seat: o, currency: d, state: l }) => {
+    if (!n || !o) return null;
+    const i = o.seatNumber || (o.rowLabel && o.columnLabel ? `${o.rowLabel}-${o.columnLabel}` : "N/A"), S = {
+      position: "fixed",
+      left: `${r + 15}px`,
+      top: `${t + 15}px`,
+      zIndex: 1e3,
+      pointerEvents: "none"
+    }, p = {
+      backgroundColor: "rgba(26, 26, 26, 0.95)",
+      color: "#fff",
+      border: "1px solid #444",
+      borderRadius: "8px",
+      padding: "8px 12px",
+      fontSize: "13px",
+      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
+      minWidth: "140px"
+    }, s = {
+      color: "#9ca3af",
+      marginRight: "4px"
+    }, a = {
+      fontWeight: 600
+    }, f = {
+      color: "#4ade80",
+      fontWeight: 600
+    }, b = {
+      fontSize: "11px",
+      color: "#6b7280",
+      textTransform: "capitalize",
+      marginTop: "4px"
+    };
+    return /* @__PURE__ */ u("div", { style: S, children: /* @__PURE__ */ D("div", { style: p, children: [
+      o.sectionName && /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
+        /* @__PURE__ */ u("span", { style: s, children: "Section:" }),
+        /* @__PURE__ */ u("span", { style: { ...a, color: "#3b82f6" }, children: o.sectionName })
+      ] }),
+      /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
+        /* @__PURE__ */ u("span", { style: s, children: "Seat:" }),
+        /* @__PURE__ */ u("span", { style: a, children: i })
+      ] }),
+      o.price !== void 0 && o.price > 0 && l === "available" && /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
+        /* @__PURE__ */ u("span", { style: s, children: "Price:" }),
+        /* @__PURE__ */ D("span", { style: f, children: [
+          d,
+          " ",
+          o.price.toFixed(2)
+        ] })
+      ] }),
+      /* @__PURE__ */ D("div", { style: b, children: [
+        "Status: ",
+        l
       ] })
-    ] }),
-    /* @__PURE__ */ D("div", { style: b, children: [
-      "Status: ",
-      l
-    ] })
-  ] }) });
-});
+    ] }) });
+  }
+);
 Ae.displayName = "SeatTooltip";
 const Nt = ({
   config: n,
@@ -481,9 +489,14 @@ const Nt = ({
   // Touch gestures
   touchEnabled: Ve = !0
 }) => {
-  const Re = l !== void 0 ? l : d, fe = X(null), Me = X(null), T = wt(Me), [q, Ee] = k(/* @__PURE__ */ new Set()), [N, Q] = k(1), [P, V] = k({ x: 0, y: 0 }), [Oe, je] = k(null), [_e, qe] = k(1), se = X({ width: 0, height: 0 }), [ee, Ie] = k({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: Ze, loading: Ge, error: te } = xt(r), h = n || Ze, ge = t !== void 0, $ = ge ? t || null : Oe, ae = S !== void 0, Ke = z((e) => {
-    ge || je(e), o?.(e);
-  }, [ge, o]), pe = h?.floors || [], Je = R !== void 0 ? R : pe.length > 1, ce = A(
+  const Re = l !== void 0 ? l : d, fe = X(null), Me = X(null), T = wt(Me), [q, Ee] = k(
+    /* @__PURE__ */ new Set()
+  ), [N, Q] = k(1), [P, V] = k({ x: 0, y: 0 }), [Oe, je] = k(null), [_e, qe] = k(1), se = X({ width: 0, height: 0 }), [ee, Ie] = k({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: Ze, loading: Ge, error: te } = xt(r), h = n || Ze, ge = t !== void 0, $ = ge ? t || null : Oe, ae = S !== void 0, Ke = z(
+    (e) => {
+      ge || je(e), o?.(e);
+    },
+    [ge, o]
+  ), pe = h?.floors || [], Je = R !== void 0 ? R : pe.length > 1, ce = A(
     () => h ? { ...h.colors, ...b } : { ...Rt, ...b },
     [h, b]
   ), Z = A(() => {
@@ -512,19 +525,34 @@ const Nt = ({
   }, [h, Z, le, de]);
   B(() => {
     if (!Y || !h || !H || T.width === 0 || T.height === 0) return;
-    const e = Math.abs(T.width - se.current.width), c = Math.abs(T.height - se.current.height);
+    const e = Math.abs(
+      T.width - se.current.width
+    ), c = Math.abs(
+      T.height - se.current.height
+    );
     if (!(se.current.width === 0) && e < 10 && c < 10) return;
     se.current = T;
     const y = T.width, w = T.height, m = y - _ * 2, j = w - _ * 2, K = m / H.width, ve = j / H.height, he = Math.min(K, ve, U), ct = H.minX + H.width / 2, lt = H.minY + H.height / 2, dt = y / 2, ht = w / 2, ut = dt - ct * he, ft = ht - lt * he;
     Q(he), V({ x: ut, y: ft }), qe(he);
-  }, [Y, h, H, _, U, T, $]);
+  }, [
+    Y,
+    h,
+    H,
+    _,
+    U,
+    T,
+    $
+  ]);
   const O = A(() => {
     const e = new Set(Re), c = new Set(i), v = new Set(p);
     return { reserved: e, unavailable: c, myReserved: v };
-  }, [Re, i, p]), be = A(() => S ? new Set(S) : null, [S]), ne = z((e) => {
-    const c = e.id, v = e.seatNumber || "";
-    return O.unavailable.has(c) || O.unavailable.has(v) ? "unavailable" : O.reserved.has(c) || O.reserved.has(v) ? "reserved" : O.myReserved.has(c) || O.myReserved.has(v) || q.has(c) ? "selected" : e.state;
-  }, [O, q]);
+  }, [Re, i, p]), be = A(() => S ? new Set(S) : null, [S]), ne = z(
+    (e) => {
+      const c = e.id, v = e.seatNumber || "";
+      return O.unavailable.has(c) || O.unavailable.has(v) ? "unavailable" : O.reserved.has(c) || O.reserved.has(v) ? "reserved" : O.myReserved.has(c) || O.myReserved.has(v) || q.has(c) ? "selected" : e.state;
+    },
+    [O, q]
+  );
   B(() => {
     h && E && E(h);
   }, [h, E]), B(() => {
@@ -532,16 +560,25 @@ const Nt = ({
   }, [te, F]), B(() => {
     ae && be && Ee(be);
   }, [ae, be]);
-  const Qe = z((e) => {
-    const c = ne(e);
-    if (c !== "available" && c !== "selected")
-      return;
-    const v = q.has(e.id);
-    ae || Ee((y) => {
-      const w = new Set(y);
-      return v ? w.delete(e.id) : w.add(e.id), w;
-    }), v ? a?.(e) : (s?.(e), s || console.log("Seat selected:", e));
-  }, [ne, q, ae, s, a]), re = A(() => h ? Z.filter((e) => q.has(e.id)) : [], [Z, q]);
+  const Qe = z(
+    (e) => {
+      const c = ne(e);
+      if (c !== "available" && c !== "selected")
+        return;
+      const v = q.has(e.id);
+      ae || Ee((y) => {
+        const w = new Set(y);
+        return v ? w.delete(e.id) : w.add(e.id), w;
+      }), v ? a?.(e) : (s?.(e), s || console.log("Seat selected:", e));
+    },
+    [
+      ne,
+      q,
+      ae,
+      s,
+      a
+    ]
+  ), re = A(() => h ? Z.filter((e) => q.has(e.id)) : [], [Z, q]);
   B(() => {
     f?.(re);
   }, [re, f]);
@@ -558,7 +595,15 @@ const Nt = ({
         y: w - m.y * e
       });
     }
-  }, [g, N, ie, U, T, h, P]), tt = z(() => {
+  }, [
+    g,
+    N,
+    ie,
+    U,
+    T,
+    h,
+    P
+  ]), tt = z(() => {
     if (!g) return;
     const e = Math.max(N - ie, G);
     if (e !== N) {
@@ -571,27 +616,38 @@ const Nt = ({
         y: w - m.y * e
       });
     }
-  }, [g, N, ie, G, T, h, P]), nt = z((e) => {
+  }, [
+    g,
+    N,
+    ie,
+    G,
+    T,
+    h,
+    P
+  ]), nt = z((e) => {
     V({
       x: e.target.x(),
       y: e.target.y()
     });
-  }, []), rt = z((e) => {
-    if (!g) return;
-    e.evt.preventDefault();
-    const c = fe.current;
-    if (!c) return;
-    const v = c.scaleX(), y = c.getPointerPosition();
-    if (!y) return;
-    const w = 1.1, m = e.evt.deltaY > 0 ? v / w : v * w, j = Math.min(Math.max(m, G), U), K = {
-      x: (y.x - P.x) / v,
-      y: (y.y - P.y) / v
-    }, ve = {
-      x: y.x - K.x * j,
-      y: y.y - K.y * j
-    };
-    Q(j), V(ve);
-  }, [g, P, G, U]);
+  }, []), rt = z(
+    (e) => {
+      if (!g) return;
+      e.evt.preventDefault();
+      const c = fe.current;
+      if (!c) return;
+      const v = c.scaleX(), y = c.getPointerPosition();
+      if (!y) return;
+      const w = 1.1, m = e.evt.deltaY > 0 ? v / w : v * w, j = Math.min(Math.max(m, G), U), K = {
+        x: (y.x - P.x) / v,
+        y: (y.y - P.y) / v
+      }, ve = {
+        x: y.x - K.x * j,
+        y: y.y - K.y * j
+      };
+      Q(j), V(ve);
+    },
+    [g, P, G, U]
+  );
   Ct(fe, {
     enabled: Ve && g,
     minScale: G,
@@ -605,21 +661,24 @@ const Nt = ({
       V(e);
     }
   });
-  const ot = z((e, c) => {
-    if (!x) return;
-    const v = c.target.getStage();
-    if (!v) return;
-    const y = v.getPointerPosition();
-    if (!y) return;
-    const w = v.container().getBoundingClientRect();
-    Ie({
-      visible: !0,
-      x: w.left + y.x,
-      y: w.top + y.y,
-      seat: e,
-      state: ne(e)
-    });
-  }, [x, ne]), it = z(() => {
+  const ot = z(
+    (e, c) => {
+      if (!x) return;
+      const v = c.target.getStage();
+      if (!v) return;
+      const y = v.getPointerPosition();
+      if (!y) return;
+      const w = v.container().getBoundingClientRect();
+      Ie({
+        visible: !0,
+        x: w.left + y.x,
+        y: w.top + y.y,
+        seat: e,
+        state: ne(e)
+      });
+    },
+    [x, ne]
+  ), it = z(() => {
     Ie((e) => ({ ...e, visible: !1 }));
   }, []);
   if (Ge)
@@ -664,7 +723,10 @@ const Nt = ({
             draggable: !0,
             onDragEnd: nt,
             onWheel: rt,
-            style: { backgroundColor: h.canvas.backgroundColor, cursor: "grab" },
+            style: {
+              backgroundColor: h.canvas.backgroundColor,
+              cursor: "grab"
+            },
             children: [
               /* @__PURE__ */ u(ye, { listening: !1, children: le.map((e) => /* @__PURE__ */ u(
                 We,
@@ -770,7 +832,13 @@ const ue = {
   unavailableSeats: []
 };
 function Et(n) {
-  const { seatMapId: r, currentUserId: t, enabled: o = !0, onStateChange: d, onError: l } = n, i = X({ ...ue }), S = X(d), p = X(l), s = X(t);
+  const {
+    seatMapId: r,
+    currentUserId: t,
+    enabled: o = !0,
+    onStateChange: d,
+    onError: l
+  } = n, i = X({ ...ue }), S = X(d), p = X(l), s = X(t);
   S.current = d, p.current = l, s.current = t;
   const a = z(
     (g) => {
@@ -788,8 +856,14 @@ function Et(n) {
       }
       const C = xe(), E = Se(C, `seatmaps/${r}/seat_states`);
       return Ne(E, (I) => {
-        const L = I.val() || {}, W = Mt(L, s.current), Y = i.current;
-        (Y.loading || !me(Y.myReservedSeats, W.myReserved) || !me(Y.otherReservedSeats, W.otherReserved) || !me(Y.unavailableSeats, W.unavailable)) && (i.current = {
+        const L = I.val() || {}, W = Mt(
+          L,
+          s.current
+        ), Y = i.current;
+        (Y.loading || !me(Y.myReservedSeats, W.myReserved) || !me(
+          Y.otherReservedSeats,
+          W.otherReserved
+        ) || !me(Y.unavailableSeats, W.unavailable)) && (i.current = {
           states: L,
           loading: !1,
           error: null,
@@ -810,7 +884,11 @@ function Et(n) {
     },
     [r, o]
     // Don't include currentUserId - we use currentUserIdRef.current which is always up-to-date
-  ), f = z(() => i.current, []), b = z(() => ue, []), x = gt(a, f, b);
+  ), f = z(() => i.current, []), b = z(() => ue, []), x = gt(
+    a,
+    f,
+    b
+  );
   return {
     states: x.states,
     loading: x.loading,
@@ -835,7 +913,11 @@ function It(n) {
   const g = z(async () => {
     if (!r) return;
     if (!we()) {
-      f(new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")), s(!1);
+      f(
+        new Error(
+          "Firebase not initialized. Call initializeFirebaseForViewer first."
+        )
+      ), s(!1);
       return;
     }
     const C = xe(), E = Se(C, `seatmaps/${r}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonetrix/viewer",
-  "version": "2.11.0",
+  "version": "2.11.1",
   "type": "module",
   "description": "Lightweight React component for rendering interactive seat maps",
   "main": "./dist/index.js",