@zonetrix/viewer 2.11.1 → 2.11.2

package/dist/index.mjs

@@ -1,101 +1,116 @@
-import { jsx as u, jsxs as D } from "react/jsx-runtime";
-import { useState as k, useEffect as B, useRef as X, useCallback as z, useMemo as A, memo as J, useSyncExternalStore as gt } from "react";
-import { Stage as pt, Layer as ye, Group as bt, Text as Te, Circle as ze, Rect as De, Path as vt, RegularPolygon as yt } from "react-konva";
-import { ref as Se, onValue as Ne, off as $e, get as mt } from "firebase/database";
+import { jsx as f, jsxs as D } from "react/jsx-runtime";
+import { useState as W, useCallback as T, useEffect as U, useRef as P, useMemo as B, memo as Q, useSyncExternalStore as gt } from "react";
+import { Stage as pt, Layer as we, Group as bt, Text as Ne, Circle as $e, Rect as ke, Path as vt, RegularPolygon as yt } from "react-konva";
+import { ref as Re, onValue as We, off as Xe, get as mt } from "firebase/database";
 import { fromFirebaseSeatMap as St } from "@zonetrix/shared";
 function xt(n) {
-  const [r, t] = k(null), [o, d] = k(!1), [l, i] = k(null), S = async () => {
+  const [o, t] = W(null), [r, d] = W(!1), [c, s] = W(null), v = T(async () => {
     if (n) {
-      d(!0), i(null);
+      d(!0), s(null);
       try {
-        const p = await fetch(n);
-        if (!p.ok)
-          throw new Error(`Failed to fetch config: ${p.statusText}`);
-        const s = await p.json();
-        t(s);
-      } catch (p) {
-        const s = p instanceof Error ? p : new Error("Unknown error occurred");
-        i(s), console.error("Failed to fetch seat map config:", s);
+        const h = await fetch(n);
+        if (!h.ok)
+          throw new Error(`Failed to fetch config: ${h.statusText}`);
+        const i = await h.json();
+        t(i);
+      } catch (h) {
+        const i = h instanceof Error ? h : new Error("Unknown error occurred");
+        s(i), console.error("Failed to fetch seat map config:", i);
       } finally {
         d(!1);
       }
     }
-  };
-  return B(() => {
-    S();
-  }, [n]), {
-    config: r,
-    loading: o,
-    error: l,
-    refetch: S
+  }, [n]);
+  return U(() => {
+    v();
+  }, [v]), {
+    config: o,
+    loading: r,
+    error: c,
+    refetch: v
   };
 }
 function wt(n) {
-  const [r, t] = k({ width: 0, height: 0 });
-  return B(() => {
-    const o = n.current;
-    if (!o) return;
-    const { width: d, height: l } = o.getBoundingClientRect();
-    d > 0 && l > 0 && t({ width: d, height: l });
-    const i = new ResizeObserver((S) => {
-      const p = S[0];
-      if (!p) return;
-      const { width: s, height: a } = p.contentRect;
-      s > 0 && a > 0 && t((f) => f.width === s && f.height === a ? f : { width: s, height: a });
+  const [o, t] = W({ width: 0, height: 0 });
+  return U(() => {
+    const r = n.current;
+    if (!r) return;
+    const { width: d, height: c } = r.getBoundingClientRect();
+    d > 0 && c > 0 && t({ width: d, height: c });
+    const s = new ResizeObserver((v) => {
+      const h = v[0];
+      if (!h) return;
+      const { width: i, height: b } = h.contentRect;
+      i > 0 && b > 0 && t((y) => y.width === i && y.height === b ? y : { width: i, height: b });
     });
-    return i.observe(o), () => {
-      i.disconnect();
+    return s.observe(r), () => {
+      s.disconnect();
     };
-  }, [n]), r;
+  }, [n]), o;
 }
-function Fe(n, r) {
-  return Math.sqrt(Math.pow(r.x - n.x, 2) + Math.pow(r.y - n.y, 2));
+function ze(n, o) {
+  return Math.sqrt(Math.pow(o.x - n.x, 2) + Math.pow(o.y - n.y, 2));
 }
-function Le(n, r) {
+function De(n, o) {
   return {
-    x: (n.x + r.x) / 2,
-    y: (n.y + r.y) / 2
+    x: (n.x + o.x) / 2,
+    y: (n.y + o.y) / 2
   };
 }
-function Ct(n, r) {
-  const t = X(null), o = X(null), d = X(1);
-  B(() => {
-    const l = n.current;
-    if (!l || !r.enabled) return;
-    const i = l.container(), S = (a) => {
-      if (a.touches.length === 2) {
-        a.preventDefault();
-        const f = { x: a.touches[0].clientX, y: a.touches[0].clientY }, b = { x: a.touches[1].clientX, y: a.touches[1].clientY };
-        t.current = Fe(f, b), o.current = Le(f, b), d.current = r.currentScale;
+function Ct(n, o) {
+  const t = P(null), r = P(null), d = P(1), {
+    enabled: c,
+    minScale: s,
+    maxScale: v,
+    currentScale: h,
+    currentPosition: i,
+    onScaleChange: b
+  } = o;
+  U(() => {
+    const y = n.current;
+    if (!y || !c) return;
+    const u = y.container(), w = (g) => {
+      if (g.touches.length === 2) {
+        g.preventDefault();
+        const I = { x: g.touches[0].clientX, y: g.touches[0].clientY }, R = { x: g.touches[1].clientX, y: g.touches[1].clientY };
+        t.current = ze(I, R), r.current = De(I, R), d.current = h;
       }
-    }, p = (a) => {
-      if (a.touches.length !== 2) return;
-      a.preventDefault();
-      const f = { x: a.touches[0].clientX, y: a.touches[0].clientY }, b = { x: a.touches[1].clientX, y: a.touches[1].clientY }, x = Fe(f, b), g = Le(f, b);
-      if (t.current !== null && o.current !== null) {
-        const C = x / t.current, E = Math.min(
-          Math.max(r.currentScale * C, r.minScale),
-          r.maxScale
-        ), F = i.getBoundingClientRect(), R = g.x - F.left, I = g.y - F.top, M = r.currentScale, L = {
-          x: (R - r.currentPosition.x) / M,
-          y: (I - r.currentPosition.y) / M
-        }, W = g.x - o.current.x, Y = g.y - o.current.y, _ = {
-          x: R - L.x * E + W,
-          y: I - L.y * E + Y
+    }, m = (g) => {
+      if (g.touches.length !== 2) return;
+      g.preventDefault();
+      const I = { x: g.touches[0].clientX, y: g.touches[0].clientY }, R = { x: g.touches[1].clientX, y: g.touches[1].clientY }, F = ze(I, R), E = De(I, R);
+      if (t.current !== null && r.current !== null) {
+        const L = F / t.current, N = Math.min(
+          Math.max(h * L, s),
+          v
+        ), Y = u.getBoundingClientRect(), V = E.x - Y.left, se = E.y - Y.top, ae = h, ce = {
+          x: (V - i.x) / ae,
+          y: (se - i.y) / ae
+        }, le = E.x - r.current.x, A = E.y - r.current.y, _ = {
+          x: V - ce.x * N + le,
+          y: se - ce.y * N + A
         };
-        r.onScaleChange(E, _), t.current = x, o.current = g;
+        b(N, _), t.current = F, r.current = E;
       }
-    }, s = (a) => {
-      a.touches.length < 2 && (t.current = null, o.current = null);
+    }, M = (g) => {
+      g.touches.length < 2 && (t.current = null, r.current = null);
     };
-    return i.addEventListener("touchstart", S, {
+    return u.addEventListener("touchstart", w, {
       passive: !1
-    }), i.addEventListener("touchmove", p, {
+    }), u.addEventListener("touchmove", m, {
       passive: !1
-    }), i.addEventListener("touchend", s), () => {
-      i.removeEventListener("touchstart", S), i.removeEventListener("touchmove", p), i.removeEventListener("touchend", s);
+    }), u.addEventListener("touchend", M), () => {
+      u.removeEventListener("touchstart", w), u.removeEventListener("touchmove", m), u.removeEventListener("touchend", M);
     };
-  }, [n, r]);
+  }, [
+    n,
+    c,
+    s,
+    v,
+    h,
+    i,
+    b
+  ]);
 }
 const Rt = {
   canvasBackground: "#1a1a1a",
@@ -107,46 +122,46 @@ const Rt = {
   seatHidden: "#4a4a4a",
   gridLines: "#404040",
   currency: "KD"
-}, ke = J(
-  ({ seat: n, state: r, colors: t, onClick: o, onMouseEnter: d, onMouseLeave: l }) => {
-    const p = {
+}, Pe = Q(
+  ({ seat: n, state: o, colors: t, onClick: r, onMouseEnter: d, onMouseLeave: c }) => {
+    const h = {
       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");
+    }[o], i = o === "available" || o === "selected", b = T(() => {
+      i && r(n);
+    }, [n, r, i]), y = T(
+      (m) => {
+        d(n, m);
+        const M = m.target.getStage();
+        M && i && (M.container().style.cursor = "pointer");
       },
-      [n, d, s]
-    ), b = z(
-      (g) => {
-        l();
-        const C = g.target.getStage();
-        C && (C.container().style.cursor = "grab");
+      [n, d, i]
+    ), u = T(
+      (m) => {
+        c();
+        const M = m.target.getStage();
+        M && (M.container().style.cursor = "grab");
       },
-      [l]
-    ), x = {
+      [c]
+    ), w = {
       x: n.position.x,
       y: n.position.y,
-      fill: p,
+      fill: h,
       stroke: "#ffffff",
       strokeWidth: 1,
-      onClick: a,
-      onTap: a,
-      onMouseEnter: f,
-      onMouseLeave: b
+      onClick: b,
+      onTap: b,
+      onMouseEnter: y,
+      onMouseLeave: u
     };
-    return n.shape === "circle" ? /* @__PURE__ */ u(ze, { ...x, radius: 12 }) : /* @__PURE__ */ u(
-      De,
+    return n.shape === "circle" ? /* @__PURE__ */ f($e, { ...w, radius: 12 }) : /* @__PURE__ */ f(
+      ke,
       {
-        ...x,
+        ...w,
         width: 24,
         height: 24,
         offsetX: 12,
@@ -156,55 +171,55 @@ const Rt = {
     );
   }
 );
-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(
+Pe.displayName = "ViewerSeat";
+const Ye = Q(({ stage: n, stageColor: o }) => {
+  const t = n.config, r = t.shape || "rectangle", d = t.showLabel !== !1, c = t.color || o, s = t.width / t.height, v = s < 0.5, h = s > 2;
+  let i;
+  v ? i = t.width * 0.25 : h ? i = t.height * 0.35 : i = Math.min(t.width, t.height) * 0.25;
+  const b = t.label?.length || 6, w = t.width * 0.85 / b * 1.5, m = 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",
+    Math.min(24, Math.min(i, w))
+  ), M = 4, g = Math.max(20, t.width - M * 2), I = (t.width - g) / 2, R = {
+    fill: c + "80",
     stroke: "#ffffff",
     strokeWidth: 2,
     perfectDrawEnabled: !1,
     hitStrokeWidth: 0
-  }, I = () => {
-    switch (o) {
+  }, F = () => {
+    switch (r) {
       case "circle": {
-        const M = Math.min(t.width, t.height) / 2;
-        return /* @__PURE__ */ u(
-          ze,
+        const E = Math.min(t.width, t.height) / 2;
+        return /* @__PURE__ */ f(
+          $e,
           {
             x: t.width / 2,
             y: t.height / 2,
-            radius: M,
+            radius: E,
             ...R
           }
         );
       }
       case "triangle": {
-        const M = Math.min(t.width, t.height) / 2;
-        return /* @__PURE__ */ u(
+        const E = Math.min(t.width, t.height) / 2;
+        return /* @__PURE__ */ f(
           yt,
           {
             x: t.width / 2,
             y: t.height / 2,
             sides: 3,
-            radius: M,
+            radius: E,
             rotation: -90,
             ...R
           }
         );
       }
       case "arrow": {
-        const M = t.width / 24, L = t.height / 24, W = `M${9 * M},${18 * L} v${-8 * L} H${5 * M} l${7 * M},${-7 * L} l${7 * M},${7 * L} h${-4 * M} v${8 * L} Z`;
-        return /* @__PURE__ */ u(vt, { data: W, ...R });
+        const E = t.width / 24, L = t.height / 24, N = `M${9 * E},${18 * L} v${-8 * L} H${5 * E} l${7 * E},${-7 * L} l${7 * E},${7 * L} h${-4 * E} v${8 * L} Z`;
+        return /* @__PURE__ */ f(vt, { data: N, ...R });
       }
       default:
-        return /* @__PURE__ */ u(
-          De,
+        return /* @__PURE__ */ f(
+          ke,
           {
             width: t.width,
             height: t.height,
@@ -221,16 +236,16 @@ const We = J(({ stage: n, stageColor: r }) => {
       y: n.position.y,
       rotation: t.rotation || 0,
       children: [
-        I(),
-        d && /* @__PURE__ */ u(
-          Te,
+        F(),
+        d && /* @__PURE__ */ f(
+          Ne,
           {
             text: t.label,
-            x: F,
-            y: C,
-            width: E,
-            height: t.height - C * 2,
-            fontSize: g,
+            x: I,
+            y: M,
+            width: g,
+            height: t.height - M * 2,
+            fontSize: m,
             fontStyle: "bold",
             fill: "#ffffff",
             align: "center",
@@ -243,9 +258,9 @@ const We = J(({ stage: n, stageColor: r }) => {
     }
   );
 });
-We.displayName = "ViewerStage";
-const Pe = J(({ text: n }) => /* @__PURE__ */ u(
-  Te,
+Ye.displayName = "ViewerStage";
+const Ae = Q(({ text: n }) => /* @__PURE__ */ f(
+  Ne,
   {
     x: n.position.x,
     y: n.position.y,
@@ -256,21 +271,21 @@ const Pe = J(({ text: n }) => /* @__PURE__ */ u(
     listening: !1
   }
 ));
-Pe.displayName = "ViewerText";
-const Xe = J(
+Ae.displayName = "ViewerText";
+const Be = Q(
   ({
     floors: n,
-    currentFloorId: r,
+    currentFloorId: o,
     onFloorChange: t,
-    showAllOption: o,
+    showAllOption: r,
     allLabel: d,
-    position: l,
-    className: i
+    position: c,
+    className: s
   }) => {
-    const S = A(
-      () => [...n].sort((b, x) => b.order - x.order),
+    const v = B(
+      () => [...n].sort((u, w) => u.order - w.order),
       [n]
-    ), s = {
+    ), i = {
       position: "absolute",
       display: "flex",
       alignItems: "center",
@@ -285,8 +300,8 @@ const Xe = J(
         "top-right": { top: 0, right: 0 },
         "bottom-left": { bottom: 0, left: 0 },
         "bottom-right": { bottom: 0, right: 0 }
-      }[l]
-    }, a = {
+      }[c]
+    }, b = {
       padding: "10px 16px",
       fontSize: "14px",
       fontWeight: 500,
@@ -298,38 +313,38 @@ const Xe = J(
       transition: "all 0.2s ease",
       minHeight: "44px",
       touchAction: "manipulation"
-    }, f = {
-      ...a,
+    }, y = {
+      ...b,
       backgroundColor: "#3A7DE5",
       borderColor: "#3A7DE5"
     };
-    return /* @__PURE__ */ D("div", { className: i, style: s, children: [
-      o && /* @__PURE__ */ u(
+    return /* @__PURE__ */ D("div", { className: s, style: i, children: [
+      r && /* @__PURE__ */ f(
         "button",
         {
           type: "button",
           onClick: () => t(null),
-          style: r === null ? f : a,
+          style: o === null ? y : b,
           children: d
         }
       ),
-      S.map((b) => /* @__PURE__ */ u(
+      v.map((u) => /* @__PURE__ */ f(
         "button",
         {
           type: "button",
-          onClick: () => t(b.id),
-          style: r === b.id ? f : a,
-          children: b.name
+          onClick: () => t(u.id),
+          style: o === u.id ? y : b,
+          children: u.name
         },
-        b.id
+        u.id
       ))
     ] });
   }
 );
-Xe.displayName = "FloorSelectorBar";
-const Ye = J(
-  ({ scale: n, minScale: r, maxScale: t, onZoomIn: o, onZoomOut: d, position: l, className: i }) => {
-    const p = {
+Be.displayName = "FloorSelectorBar";
+const Ue = Q(
+  ({ scale: n, minScale: o, maxScale: t, onZoomIn: r, onZoomOut: d, position: c, className: s }) => {
+    const h = {
       position: "absolute",
       display: "flex",
       flexDirection: "column",
@@ -344,8 +359,8 @@ const Ye = J(
         "top-right": { top: 0, right: 0 },
         "bottom-left": { bottom: 0, left: 0 },
         "bottom-right": { bottom: 0, right: 0 }
-      }[l]
-    }, s = {
+      }[c]
+    }, i = {
       width: "44px",
       height: "44px",
       minWidth: "44px",
@@ -362,30 +377,30 @@ const Ye = J(
       justifyContent: "center",
       transition: "all 0.2s ease",
       touchAction: "manipulation"
-    }, a = {
-      ...s,
+    }, b = {
+      ...i,
       opacity: 0.4,
       cursor: "not-allowed"
-    }, f = n < t, b = n > r;
-    return /* @__PURE__ */ D("div", { className: i, style: p, children: [
-      /* @__PURE__ */ u(
+    }, y = n < t, u = n > o;
+    return /* @__PURE__ */ D("div", { className: s, style: h, children: [
+      /* @__PURE__ */ f(
         "button",
         {
           type: "button",
-          onClick: o,
-          disabled: !f,
-          style: f ? s : a,
+          onClick: r,
+          disabled: !y,
+          style: y ? i : b,
           title: "Zoom In",
           children: "+"
         }
       ),
-      /* @__PURE__ */ u(
+      /* @__PURE__ */ f(
         "button",
         {
           type: "button",
           onClick: d,
-          disabled: !b,
-          style: b ? s : a,
+          disabled: !u,
+          style: u ? i : b,
           title: "Zoom Out",
           children: "−"
         }
@@ -393,17 +408,17 @@ const Ye = J(
     ] });
   }
 );
-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 = {
+Ue.displayName = "ZoomControls";
+const He = Q(
+  ({ visible: n, x: o, y: t, seat: r, currency: d, state: c }) => {
+    if (!n || !r) return null;
+    const s = r.seatNumber || (r.rowLabel && r.columnLabel ? `${r.rowLabel}-${r.columnLabel}` : "N/A"), v = {
       position: "fixed",
-      left: `${r + 15}px`,
+      left: `${o + 15}px`,
       top: `${t + 15}px`,
       zIndex: 1e3,
       pointerEvents: "none"
-    }, p = {
+    }, h = {
       backgroundColor: "rgba(26, 26, 26, 0.95)",
       color: "#fff",
       border: "1px solid #444",
@@ -412,337 +427,334 @@ const Ae = J(
       fontSize: "13px",
       boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
       minWidth: "140px"
-    }, s = {
+    }, i = {
       color: "#9ca3af",
       marginRight: "4px"
-    }, a = {
+    }, b = {
       fontWeight: 600
-    }, f = {
+    }, y = {
       color: "#4ade80",
       fontWeight: 600
-    }, b = {
+    }, u = {
       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 })
+    return /* @__PURE__ */ f("div", { style: v, children: /* @__PURE__ */ D("div", { style: h, children: [
+      r.sectionName && /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
+        /* @__PURE__ */ f("span", { style: i, children: "Section:" }),
+        /* @__PURE__ */ f("span", { style: { ...b, color: "#3b82f6" }, children: r.sectionName })
       ] }),
       /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
-        /* @__PURE__ */ u("span", { style: s, children: "Seat:" }),
-        /* @__PURE__ */ u("span", { style: a, children: i })
+        /* @__PURE__ */ f("span", { style: i, children: "Seat:" }),
+        /* @__PURE__ */ f("span", { style: b, children: s })
       ] }),
-      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: [
+      r.price !== void 0 && r.price > 0 && c === "available" && /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
+        /* @__PURE__ */ f("span", { style: i, children: "Price:" }),
+        /* @__PURE__ */ D("span", { style: y, children: [
           d,
           " ",
-          o.price.toFixed(2)
+          r.price.toFixed(2)
         ] })
       ] }),
-      /* @__PURE__ */ D("div", { style: b, children: [
+      /* @__PURE__ */ D("div", { style: u, children: [
         "Status: ",
-        l
+        c
       ] })
     ] }) });
   }
 );
-Ae.displayName = "SeatTooltip";
+He.displayName = "SeatTooltip";
 const Nt = ({
   config: n,
-  configUrl: r,
+  configUrl: o,
   floorId: t,
-  onFloorChange: o,
+  onFloorChange: r,
   reservedSeats: d = [],
-  otherReservedSeats: l,
+  otherReservedSeats: c,
   // v2.4.0: New prop name (preferred)
-  unavailableSeats: i = [],
-  selectedSeats: S,
-  myReservedSeats: p = [],
-  onSeatSelect: s,
-  onSeatDeselect: a,
-  onSelectionChange: f,
-  colorOverrides: b,
-  showTooltip: x = !0,
-  zoomEnabled: g = !0,
-  className: C = "",
-  onConfigLoad: E,
-  onError: F,
+  unavailableSeats: s = [],
+  selectedSeats: v,
+  myReservedSeats: h = [],
+  onSeatSelect: i,
+  onSeatDeselect: b,
+  onSelectionChange: y,
+  colorOverrides: u,
+  showTooltip: w = !0,
+  zoomEnabled: m = !0,
+  className: M = "",
+  onConfigLoad: g,
+  onError: I,
   // Floor selector props
   showFloorSelector: R,
-  floorSelectorPosition: I = "top-left",
-  floorSelectorClassName: M,
+  floorSelectorPosition: F = "top-left",
+  floorSelectorClassName: E,
   showAllFloorsOption: L = !0,
-  allFloorsLabel: W = "All",
+  allFloorsLabel: N = "All",
   fitToView: Y = !0,
-  fitPadding: _ = 40,
+  fitPadding: V = 40,
   // Zoom controls
-  showZoomControls: Be = !0,
-  zoomControlsPosition: Ue = "bottom-right",
-  zoomControlsClassName: He,
-  minZoom: Ce,
-  maxZoom: U = 3,
-  zoomStep: ie = 0.25,
+  showZoomControls: se = !0,
+  zoomControlsPosition: ae = "bottom-right",
+  zoomControlsClassName: ce,
+  minZoom: le,
+  maxZoom: A = 3,
+  zoomStep: _ = 0.25,
   // Touch gestures
   touchEnabled: Ve = !0
 }) => {
-  const Re = l !== void 0 ? l : d, fe = X(null), Me = X(null), T = wt(Me), [q, Ee] = k(
+  const Ie = c !== void 0 ? c : d, ve = P(null), Fe = P(null), z = wt(Fe), [q, Le] = W(
     /* @__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(
+  ), [$, ee] = W(1), [X, Z] = W({ x: 0, y: 0 }), [Oe, je] = W(null), [_e, qe] = W(1), de = P({ width: 0, height: 0 }), [te, Te] = W({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: Ze, loading: Ge, error: ne } = xt(o), l = n || Ze, ye = t !== void 0, k = ye ? t || null : Oe, he = v !== void 0, Ke = T(
     (e) => {
-      ge || je(e), o?.(e);
+      ye || je(e), r?.(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(() => {
-    if (!h) return [];
-    let e = h.seats.filter((c) => c.state !== "hidden");
-    return $ && (e = e.filter(
-      (c) => c.floorId === $ || !c.floorId && $ === "floor_default"
+    [ye, r]
+  ), me = l?.floors || [], Je = R !== void 0 ? R : me.length > 1, ue = B(
+    () => l ? { ...l.colors, ...u } : { ...Rt, ...u },
+    [l, u]
+  ), G = B(() => {
+    if (!l) return [];
+    let e = l.seats.filter((a) => a.state !== "hidden");
+    return k && (e = e.filter(
+      (a) => a.floorId === k || !a.floorId && k === "floor_default"
     )), e;
-  }, [h, $]), le = A(() => h?.stages ? $ ? h.stages.filter(
-    (e) => e.floorId === $ || !e.floorId && $ === "floor_default"
-  ) : h.stages : [], [h, $]), de = A(() => h?.texts ? $ ? h.texts.filter(
-    (e) => e.floorId === $ || !e.floorId && $ === "floor_default"
-  ) : h.texts : [], [h, $]), H = A(() => {
-    if (!h || Z.length === 0 && le.length === 0 && de.length === 0)
+  }, [l, k]), fe = B(() => l?.stages ? k ? l.stages.filter(
+    (e) => e.floorId === k || !e.floorId && k === "floor_default"
+  ) : l.stages : [], [l, k]), ge = B(() => l?.texts ? k ? l.texts.filter(
+    (e) => e.floorId === k || !e.floorId && k === "floor_default"
+  ) : l.texts : [], [l, k]), H = B(() => {
+    if (!l || G.length === 0 && fe.length === 0 && ge.length === 0)
       return null;
     const e = 12;
-    let c = 1 / 0, v = 1 / 0, y = -1 / 0, w = -1 / 0;
-    return Z.forEach((m) => {
-      c = Math.min(c, m.position.x - e), v = Math.min(v, m.position.y - e), y = Math.max(y, m.position.x + e), w = Math.max(w, m.position.y + e);
-    }), le.forEach((m) => {
-      c = Math.min(c, m.position.x), v = Math.min(v, m.position.y), y = Math.max(y, m.position.x + (m.config?.width || 200)), w = Math.max(w, m.position.y + (m.config?.height || 100));
-    }), de.forEach((m) => {
-      const j = m.config.text.length * m.config.fontSize * 0.6, K = m.config.fontSize;
-      c = Math.min(c, m.position.x), v = Math.min(v, m.position.y), y = Math.max(y, m.position.x + j), w = Math.max(w, m.position.y + K);
-    }), { minX: c, minY: v, maxX: y, maxY: w, width: y - c, height: w - v };
-  }, [h, Z, le, de]);
-  B(() => {
-    if (!Y || !h || !H || T.width === 0 || T.height === 0) return;
+    let a = 1 / 0, p = 1 / 0, S = -1 / 0, C = -1 / 0;
+    return G.forEach((x) => {
+      a = Math.min(a, x.position.x - e), p = Math.min(p, x.position.y - e), S = Math.max(S, x.position.x + e), C = Math.max(C, x.position.y + e);
+    }), fe.forEach((x) => {
+      a = Math.min(a, x.position.x), p = Math.min(p, x.position.y), S = Math.max(S, x.position.x + (x.config?.width || 200)), C = Math.max(C, x.position.y + (x.config?.height || 100));
+    }), ge.forEach((x) => {
+      const j = x.config.text.length * x.config.fontSize * 0.6, J = x.config.fontSize;
+      a = Math.min(a, x.position.x), p = Math.min(p, x.position.y), S = Math.max(S, x.position.x + j), C = Math.max(C, x.position.y + J);
+    }), { minX: a, minY: p, maxX: S, maxY: C, width: S - a, height: C - p };
+  }, [l, G, fe, ge]);
+  U(() => {
+    if (!Y || !l || !H || z.width === 0 || z.height === 0) return;
     const e = Math.abs(
-      T.width - se.current.width
-    ), c = Math.abs(
-      T.height - se.current.height
+      z.width - de.current.width
+    ), a = Math.abs(
+      z.height - de.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);
+    if (!(de.current.width === 0) && e < 10 && a < 10) return;
+    de.current = z;
+    const S = z.width, C = z.height, x = S - V * 2, j = C - V * 2, J = x / H.width, xe = j / H.height, pe = Math.min(J, xe, A), ct = H.minX + H.width / 2, lt = H.minY + H.height / 2, dt = S / 2, ht = C / 2, ut = dt - ct * pe, ft = ht - lt * pe;
+    ee(pe), Z({ x: ut, y: ft }), qe(pe);
   }, [
     Y,
-    h,
+    l,
     H,
-    _,
-    U,
-    T,
-    $
+    V,
+    A,
+    z,
+    k
   ]);
-  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(
+  const O = B(() => {
+    const e = new Set(Ie), a = new Set(s), p = new Set(h);
+    return { reserved: e, unavailable: a, myReserved: p };
+  }, [Ie, s, h]), Se = B(() => v ? new Set(v) : null, [v]), re = T(
     (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;
+      const a = e.id, p = e.seatNumber || "";
+      return O.unavailable.has(a) || O.unavailable.has(p) ? "unavailable" : O.reserved.has(a) || O.reserved.has(p) ? "reserved" : O.myReserved.has(a) || O.myReserved.has(p) || q.has(a) ? "selected" : e.state;
     },
     [O, q]
   );
-  B(() => {
-    h && E && E(h);
-  }, [h, E]), B(() => {
-    te && F && F(te);
-  }, [te, F]), B(() => {
-    ae && be && Ee(be);
-  }, [ae, be]);
-  const Qe = z(
+  U(() => {
+    l && g && g(l);
+  }, [l, g]), U(() => {
+    ne && I && I(ne);
+  }, [ne, I]), U(() => {
+    he && Se && Le(Se);
+  }, [he, Se]);
+  const Qe = T(
     (e) => {
-      const c = ne(e);
-      if (c !== "available" && c !== "selected")
+      const a = re(e);
+      if (a !== "available" && a !== "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));
+      const p = q.has(e.id);
+      he || Le((S) => {
+        const C = new Set(S);
+        return p ? C.delete(e.id) : C.add(e.id), C;
+      }), p ? b?.(e) : (i?.(e), i || console.log("Seat selected:", e));
     },
     [
-      ne,
+      re,
       q,
-      ae,
-      s,
-      a
+      he,
+      i,
+      b
     ]
-  ), re = A(() => h ? Z.filter((e) => q.has(e.id)) : [], [Z, q]);
-  B(() => {
-    f?.(re);
-  }, [re, f]);
-  const G = Ce !== void 0 ? Ce : _e, et = z(() => {
-    if (!g) return;
-    const e = Math.min(N + ie, U);
-    if (e !== N) {
-      const c = T.width || h?.canvas.width || 800, v = T.height || h?.canvas.height || 600, y = c / 2, w = v / 2, m = {
-        x: (y - P.x) / N,
-        y: (w - P.y) / N
+  ), oe = B(() => l ? G.filter((e) => q.has(e.id)) : [], [l, G, q]);
+  U(() => {
+    y?.(oe);
+  }, [oe, y]);
+  const K = le !== void 0 ? le : _e, et = T(() => {
+    if (!m) return;
+    const e = Math.min($ + _, A);
+    if (e !== $) {
+      const a = z.width || l?.canvas.width || 800, p = z.height || l?.canvas.height || 600, S = a / 2, C = p / 2, x = {
+        x: (S - X.x) / $,
+        y: (C - X.y) / $
       };
-      Q(e), V({
-        x: y - m.x * e,
-        y: w - m.y * e
+      ee(e), Z({
+        x: S - x.x * e,
+        y: C - x.y * e
       });
     }
   }, [
-    g,
-    N,
-    ie,
-    U,
-    T,
-    h,
-    P
-  ]), tt = z(() => {
-    if (!g) return;
-    const e = Math.max(N - ie, G);
-    if (e !== N) {
-      const c = T.width || h?.canvas.width || 800, v = T.height || h?.canvas.height || 600, y = c / 2, w = v / 2, m = {
-        x: (y - P.x) / N,
-        y: (w - P.y) / N
+    m,
+    $,
+    _,
+    A,
+    z,
+    l,
+    X
+  ]), tt = T(() => {
+    if (!m) return;
+    const e = Math.max($ - _, K);
+    if (e !== $) {
+      const a = z.width || l?.canvas.width || 800, p = z.height || l?.canvas.height || 600, S = a / 2, C = p / 2, x = {
+        x: (S - X.x) / $,
+        y: (C - X.y) / $
       };
-      Q(e), V({
-        x: y - m.x * e,
-        y: w - m.y * e
+      ee(e), Z({
+        x: S - x.x * e,
+        y: C - x.y * e
       });
     }
   }, [
-    g,
-    N,
-    ie,
-    G,
-    T,
-    h,
-    P
-  ]), nt = z((e) => {
-    V({
+    m,
+    $,
+    _,
+    K,
+    z,
+    l,
+    X
+  ]), nt = T((e) => {
+    Z({
       x: e.target.x(),
       y: e.target.y()
     });
-  }, []), rt = z(
+  }, []), rt = T(
     (e) => {
-      if (!g) return;
+      if (!m) 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
+      const a = ve.current;
+      if (!a) return;
+      const p = a.scaleX(), S = a.getPointerPosition();
+      if (!S) return;
+      const C = 1.1, x = e.evt.deltaY > 0 ? p / C : p * C, j = Math.min(Math.max(x, K), A), J = {
+        x: (S.x - X.x) / p,
+        y: (S.y - X.y) / p
+      }, xe = {
+        x: S.x - J.x * j,
+        y: S.y - J.y * j
       };
-      Q(j), V(ve);
+      ee(j), Z(xe);
     },
-    [g, P, G, U]
+    [m, X, K, A]
   );
-  Ct(fe, {
-    enabled: Ve && g,
-    minScale: G,
-    maxScale: U,
-    currentScale: N,
-    currentPosition: P,
-    onScaleChange: (e, c) => {
-      Q(e), V(c);
-    },
-    onPositionChange: (e) => {
-      V(e);
+  Ct(ve, {
+    enabled: Ve && m,
+    minScale: K,
+    maxScale: A,
+    currentScale: $,
+    currentPosition: X,
+    onScaleChange: (e, a) => {
+      ee(e), Z(a);
     }
   });
-  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({
+  const ot = T(
+    (e, a) => {
+      if (!w) return;
+      const p = a.target.getStage();
+      if (!p) return;
+      const S = p.getPointerPosition();
+      if (!S) return;
+      const C = p.container().getBoundingClientRect();
+      Te({
         visible: !0,
-        x: w.left + y.x,
-        y: w.top + y.y,
+        x: C.left + S.x,
+        y: C.top + S.y,
         seat: e,
-        state: ne(e)
+        state: re(e)
       });
     },
-    [x, ne]
-  ), it = z(() => {
-    Ie((e) => ({ ...e, visible: !1 }));
+    [w, re]
+  ), it = T(() => {
+    Te((e) => ({ ...e, visible: !1 }));
   }, []);
   if (Ge)
-    return /* @__PURE__ */ u("div", { className: `flex items-center justify-center h-full ${C}`, children: /* @__PURE__ */ u("p", { children: "Loading seat map..." }) });
-  if (te)
-    return /* @__PURE__ */ u("div", { className: `flex items-center justify-center h-full ${C}`, children: /* @__PURE__ */ D("p", { className: "text-red-500", children: [
+    return /* @__PURE__ */ f("div", { className: `flex items-center justify-center h-full ${M}`, children: /* @__PURE__ */ f("p", { children: "Loading seat map..." }) });
+  if (ne)
+    return /* @__PURE__ */ f("div", { className: `flex items-center justify-center h-full ${M}`, children: /* @__PURE__ */ D("p", { className: "text-red-500", children: [
       "Error loading seat map: ",
-      te.message
+      ne.message
     ] }) });
-  if (!h)
-    return /* @__PURE__ */ u("div", { className: `flex items-center justify-center h-full ${C}`, children: /* @__PURE__ */ u("p", { children: "No configuration provided" }) });
-  const st = T.width || h.canvas.width, at = T.height || h.canvas.height;
+  if (!l)
+    return /* @__PURE__ */ f("div", { className: `flex items-center justify-center h-full ${M}`, children: /* @__PURE__ */ f("p", { children: "No configuration provided" }) });
+  const st = z.width || l.canvas.width, at = z.height || l.canvas.height;
   return /* @__PURE__ */ D(
     "div",
     {
-      ref: Me,
-      className: `relative ${C}`,
+      ref: Fe,
+      className: `relative ${M}`,
       style: { width: "100%", height: "100%" },
       children: [
-        Je && pe.length > 0 && /* @__PURE__ */ u(
-          Xe,
+        Je && me.length > 0 && /* @__PURE__ */ f(
+          Be,
           {
-            floors: pe,
-            currentFloorId: $,
+            floors: me,
+            currentFloorId: k,
             onFloorChange: Ke,
             showAllOption: L,
-            allLabel: W,
-            position: I,
-            className: M
+            allLabel: N,
+            position: F,
+            className: E
           }
         ),
         /* @__PURE__ */ D(
           pt,
           {
-            ref: fe,
+            ref: ve,
             width: st,
             height: at,
-            scaleX: N,
-            scaleY: N,
-            x: P.x,
-            y: P.y,
+            scaleX: $,
+            scaleY: $,
+            x: X.x,
+            y: X.y,
             draggable: !0,
             onDragEnd: nt,
             onWheel: rt,
             style: {
-              backgroundColor: h.canvas.backgroundColor,
+              backgroundColor: l.canvas.backgroundColor,
               cursor: "grab"
             },
             children: [
-              /* @__PURE__ */ u(ye, { listening: !1, children: le.map((e) => /* @__PURE__ */ u(
-                We,
+              /* @__PURE__ */ f(we, { listening: !1, children: fe.map((e) => /* @__PURE__ */ f(
+                Ye,
                 {
                   stage: e,
-                  stageColor: ce.stageColor
+                  stageColor: ue.stageColor
                 },
                 e.id
               )) }),
-              /* @__PURE__ */ u(ye, { listening: !1, children: de.map((e) => /* @__PURE__ */ u(Pe, { text: e }, e.id)) }),
-              /* @__PURE__ */ u(ye, { children: Z.map((e) => /* @__PURE__ */ u(
-                ke,
+              /* @__PURE__ */ f(we, { listening: !1, children: ge.map((e) => /* @__PURE__ */ f(Ae, { text: e }, e.id)) }),
+              /* @__PURE__ */ f(we, { children: G.map((e) => /* @__PURE__ */ f(
+                Pe,
                 {
                   seat: e,
-                  state: ne(e),
-                  colors: ce,
+                  state: re(e),
+                  colors: ue,
                   onClick: Qe,
                   onMouseEnter: ot,
                   onMouseLeave: it
@@ -752,77 +764,77 @@ const Nt = ({
             ]
           }
         ),
-        x && /* @__PURE__ */ u(
-          Ae,
+        w && /* @__PURE__ */ f(
+          He,
           {
-            visible: ee.visible,
-            x: ee.x,
-            y: ee.y,
-            seat: ee.seat,
-            currency: ce.currency,
-            state: ee.state
+            visible: te.visible,
+            x: te.x,
+            y: te.y,
+            seat: te.seat,
+            currency: ue.currency,
+            state: te.state
           }
         ),
-        Be && g && /* @__PURE__ */ u(
-          Ye,
+        se && m && /* @__PURE__ */ f(
+          Ue,
           {
-            scale: N,
-            minScale: G,
-            maxScale: U,
+            scale: $,
+            minScale: K,
+            maxScale: A,
             onZoomIn: et,
             onZoomOut: tt,
-            position: Ue,
-            className: He
+            position: ae,
+            className: ce
           }
         ),
-        re.length > 0 && /* @__PURE__ */ D("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
+        oe.length > 0 && /* @__PURE__ */ D("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
           /* @__PURE__ */ D("h3", { className: "font-semibold mb-2", children: [
             "Selected Seats (",
-            re.length,
+            oe.length,
             ")"
           ] }),
-          /* @__PURE__ */ u("div", { className: "max-h-48 overflow-y-auto space-y-1", children: re.map((e) => /* @__PURE__ */ D("div", { className: "text-sm", children: [
+          /* @__PURE__ */ f("div", { className: "max-h-48 overflow-y-auto space-y-1", children: oe.map((e) => /* @__PURE__ */ D("div", { className: "text-sm", children: [
             e.seatNumber,
-            e.price && ` - ${ce.currency} ${e.price.toFixed(2)}`
+            e.price && ` - ${ue.currency} ${e.price.toFixed(2)}`
           ] }, e.id)) })
         ] })
       ]
     }
   );
 };
-let oe = null;
+let ie = null;
 function $t(n) {
-  oe = n;
+  ie = n;
 }
-function xe() {
-  if (!oe)
+function Me() {
+  if (!ie)
     throw new Error(
       "Firebase database not initialized. Call initializeFirebaseForViewer(db) first."
     );
-  return oe;
+  return ie;
 }
-function we() {
-  return oe !== null;
+function Ee() {
+  return ie !== null;
 }
 function kt() {
-  oe = null;
+  ie = null;
 }
-function me(n, r) {
-  if (n.length !== r.length) return !1;
-  const t = [...n].sort(), o = [...r].sort();
-  return t.every((d, l) => d === o[l]);
+function Ce(n, o) {
+  if (n.length !== o.length) return !1;
+  const t = [...n].sort(), r = [...o].sort();
+  return t.every((d, c) => d === r[c]);
 }
-function Mt(n, r) {
-  const t = [], o = [], d = [];
-  return Object.entries(n).forEach(([l, i]) => {
-    i && typeof i == "object" && i.state && (i.state === "unavailable" ? d.push(l) : i.state === "reserved" && (r && i.userId === r ? t.push(l) : o.push(l)));
+function Mt(n, o) {
+  const t = [], r = [], d = [];
+  return Object.entries(n).forEach(([c, s]) => {
+    s && typeof s == "object" && s.state && (s.state === "unavailable" ? d.push(c) : s.state === "reserved" && (o && s.userId === o ? t.push(c) : r.push(c)));
   }), {
     myReserved: t.sort(),
-    otherReserved: o.sort(),
+    otherReserved: r.sort(),
     unavailable: d.sort()
   };
 }
-const ue = {
+const be = {
   states: null,
   loading: !0,
   error: null,
@@ -833,182 +845,182 @@ const ue = {
 };
 function Et(n) {
   const {
-    seatMapId: r,
+    seatMapId: o,
     currentUserId: t,
-    enabled: o = !0,
+    enabled: r = !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) => {
-      if (!o || !r)
-        return (i.current.loading !== !1 || i.current.states !== null) && (i.current = { ...ue, loading: !1 }, g()), () => {
+    onError: c
+  } = n, s = P({ ...be }), v = P(d), h = P(c), i = P(t);
+  v.current = d, h.current = c, i.current = t;
+  const b = T(
+    (m) => {
+      if (!r || !o)
+        return (s.current.loading !== !1 || s.current.states !== null) && (s.current = { ...be, loading: !1 }, m()), () => {
         };
-      if (!we()) {
-        const I = "Firebase not initialized. Call initializeFirebaseForViewer first.";
-        return i.current.error?.message !== I && (i.current = {
-          ...ue,
+      if (!Ee()) {
+        const F = "Firebase not initialized. Call initializeFirebaseForViewer first.";
+        return s.current.error?.message !== F && (s.current = {
+          ...be,
           loading: !1,
-          error: new Error(I)
-        }, g()), () => {
+          error: new Error(F)
+        }, m()), () => {
         };
       }
-      const C = xe(), E = Se(C, `seatmaps/${r}/seat_states`);
-      return Ne(E, (I) => {
-        const L = I.val() || {}, W = Mt(
+      const M = Me(), g = Re(M, `seatmaps/${o}/seat_states`);
+      return We(g, (F) => {
+        const L = F.val() || {}, N = Mt(
           L,
-          s.current
-        ), Y = i.current;
-        (Y.loading || !me(Y.myReservedSeats, W.myReserved) || !me(
+          i.current
+        ), Y = s.current;
+        (Y.loading || !Ce(Y.myReservedSeats, N.myReserved) || !Ce(
           Y.otherReservedSeats,
-          W.otherReserved
-        ) || !me(Y.unavailableSeats, W.unavailable)) && (i.current = {
+          N.otherReserved
+        ) || !Ce(Y.unavailableSeats, N.unavailable)) && (s.current = {
           states: L,
           loading: !1,
           error: null,
           lastUpdated: Date.now(),
-          myReservedSeats: W.myReserved,
-          otherReservedSeats: W.otherReserved,
-          unavailableSeats: W.unavailable
-        }, S.current?.(L), g());
-      }, (I) => {
-        i.current = {
-          ...i.current,
+          myReservedSeats: N.myReserved,
+          otherReservedSeats: N.otherReserved,
+          unavailableSeats: N.unavailable
+        }, v.current?.(L), m());
+      }, (F) => {
+        s.current = {
+          ...s.current,
           loading: !1,
-          error: I
-        }, p.current?.(I), g();
+          error: F
+        }, h.current?.(F), m();
       }), () => {
-        $e(E);
+        Xe(g);
       };
     },
-    [r, o]
+    [o, r]
     // 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
+  ), y = T(() => s.current, []), u = T(() => be, []), w = gt(
+    b,
+    y,
+    u
   );
   return {
-    states: x.states,
-    loading: x.loading,
-    error: x.error,
-    lastUpdated: x.lastUpdated,
-    myReservedSeats: x.myReservedSeats,
-    otherReservedSeats: x.otherReservedSeats,
-    unavailableSeats: x.unavailableSeats,
+    states: w.states,
+    loading: w.loading,
+    error: w.error,
+    lastUpdated: w.lastUpdated,
+    myReservedSeats: w.myReservedSeats,
+    otherReservedSeats: w.otherReservedSeats,
+    unavailableSeats: w.unavailableSeats,
     // Legacy alias
-    reservedSeats: x.otherReservedSeats
+    reservedSeats: w.otherReservedSeats
   };
 }
 function It(n) {
   const {
-    seatMapId: r,
+    seatMapId: o,
     enabled: t = !0,
-    subscribeToChanges: o = !1,
+    subscribeToChanges: r = !1,
     onConfigLoad: d,
-    onError: l
-  } = n, [i, S] = k(null), [p, s] = k(!0), [a, f] = k(null), b = X(d), x = X(l);
-  b.current = d, x.current = l;
-  const g = z(async () => {
-    if (!r) return;
-    if (!we()) {
-      f(
+    onError: c
+  } = n, [s, v] = W(null), [h, i] = W(!0), [b, y] = W(null), u = P(d), w = P(c);
+  u.current = d, w.current = c;
+  const m = T(async () => {
+    if (!o) return;
+    if (!Ee()) {
+      y(
         new Error(
           "Firebase not initialized. Call initializeFirebaseForViewer first."
         )
-      ), s(!1);
+      ), i(!1);
       return;
     }
-    const C = xe(), E = Se(C, `seatmaps/${r}`);
+    const M = Me(), g = Re(M, `seatmaps/${o}`);
     try {
-      s(!0), f(null);
-      const R = (await mt(E)).val();
+      i(!0), y(null);
+      const R = (await mt(g)).val();
       if (R) {
-        const I = St(R);
-        S(I), b.current?.(I);
+        const F = St(R);
+        v(F), u.current?.(F);
       } else
-        f(new Error(`Seat map ${r} not found in Firebase`));
-    } catch (F) {
-      const R = F instanceof Error ? F : new Error("Unknown error");
-      f(R), x.current?.(R);
+        y(new Error(`Seat map ${o} not found in Firebase`));
+    } catch (I) {
+      const R = I instanceof Error ? I : new Error("Unknown error");
+      y(R), w.current?.(R);
     } finally {
-      s(!1);
+      i(!1);
     }
-  }, [r]);
-  return B(() => {
-    if (!t || !r) {
-      s(!1);
+  }, [o]);
+  return U(() => {
+    if (!t || !o) {
+      i(!1);
       return;
     }
-    if (g(), o && we()) {
-      const C = xe(), E = Se(C, `seatmaps/${r}/meta/updated_at`);
-      let F = !0, R = null;
-      return Ne(E, (M) => {
-        if (F) {
-          F = !1, R = M.val();
+    if (m(), r && Ee()) {
+      const M = Me(), g = Re(M, `seatmaps/${o}/meta/updated_at`);
+      let I = !0, R = null;
+      return We(g, (E) => {
+        if (I) {
+          I = !1, R = E.val();
           return;
         }
-        const L = M.val();
-        M.exists() && L !== R && (R = L, g());
+        const L = E.val();
+        E.exists() && L !== R && (R = L, m());
       }), () => {
-        $e(E);
+        Xe(g);
       };
     }
-  }, [r, t, o]), {
-    config: i,
-    loading: p,
-    error: a,
-    refetch: g
+  }, [o, t, r]), {
+    config: s,
+    loading: h,
+    error: b,
+    refetch: m
   };
 }
 function Wt(n) {
   const {
-    seatMapId: r,
+    seatMapId: o,
     userId: t,
-    enabled: o = !0,
+    enabled: r = !0,
     subscribeToDesignChanges: d = !1,
-    onConfigLoad: l,
-    onStateChange: i,
-    onError: S
+    onConfigLoad: c,
+    onStateChange: s,
+    onError: v
   } = n, {
-    config: p,
-    loading: s,
-    error: a,
-    refetch: f
+    config: h,
+    loading: i,
+    error: b,
+    refetch: y
   } = It({
-    seatMapId: r,
-    enabled: o,
+    seatMapId: o,
+    enabled: r,
     subscribeToChanges: d,
-    onConfigLoad: l,
-    onError: S
+    onConfigLoad: c,
+    onError: v
   }), {
-    states: b,
-    loading: x,
-    error: g,
-    lastUpdated: C,
-    myReservedSeats: E,
-    otherReservedSeats: F,
+    states: u,
+    loading: w,
+    error: m,
+    lastUpdated: M,
+    myReservedSeats: g,
+    otherReservedSeats: I,
     unavailableSeats: R,
-    reservedSeats: I
+    reservedSeats: F
   } = Et({
-    seatMapId: r,
+    seatMapId: o,
     currentUserId: t,
-    enabled: o,
-    onStateChange: i,
-    onError: S
+    enabled: r,
+    onStateChange: s,
+    onError: v
   });
   return {
-    config: p,
-    loading: s || x,
-    error: a || g,
-    myReservedSeats: E,
-    otherReservedSeats: F,
+    config: h,
+    loading: i || w,
+    error: b || m,
+    myReservedSeats: g,
+    otherReservedSeats: I,
     unavailableSeats: R,
-    reservedSeats: I,
-    seatStates: b,
-    lastUpdated: C,
-    refetch: f
+    reservedSeats: F,
+    seatStates: u,
+    lastUpdated: M,
+    refetch: y
   };
 }
 export {
@@ -1016,7 +1028,7 @@ export {
   Nt as SeatMapViewer,
   kt as clearFirebaseInstance,
   $t as initializeFirebaseForViewer,
-  we as isFirebaseInitialized,
+  Ee as isFirebaseInitialized,
   xt as useConfigFetcher,
   wt as useContainerSize,
   It as useFirebaseConfig,