@zonetrix/viewer 2.8.1 → 2.10.0

package/dist/index.mjs

@@ -1,97 +1,99 @@
-import { jsx as h, jsxs as w } from "react/jsx-runtime";
-import { useState as E, useEffect as T, useRef as F, useCallback as N, useMemo as Y, memo as Z } from "react";
-import { Stage as te, Layer as bt, Group as ee, Rect as Ct, Text as vt, Circle as ne } from "react-konva";
-function oe(e) {
-  const [i, a] = E(null), [n, m] = E(!1), [y, u] = E(null), v = async () => {
-    if (e) {
-      m(!0), u(null);
+import { jsx as b, jsxs as k } from "react/jsx-runtime";
+import { useState as M, useEffect as T, useRef as X, useCallback as N, useMemo as V, memo as se } from "react";
+import { Stage as ct, Layer as Ee, Group as lt, Rect as De, Text as Fe, Circle as dt } from "react-konva";
+import { ref as Se, onValue as Ne, off as ze, get as ut } from "firebase/database";
+import { fromFirebaseSeatMap as ht } from "@zonetrix/shared";
+function ft(t) {
+  const [n, s] = M(null), [o, u] = M(!1), [l, r] = M(null), S = async () => {
+    if (t) {
+      u(!0), r(null);
       try {
-        const x = await fetch(e);
-        if (!x.ok)
-          throw new Error(`Failed to fetch config: ${x.statusText}`);
-        const s = await x.json();
-        a(s);
-      } catch (x) {
-        const s = x instanceof Error ? x : new Error("Unknown error occurred");
-        u(s), console.error("Failed to fetch seat map config:", s);
+        const f = await fetch(t);
+        if (!f.ok)
+          throw new Error(`Failed to fetch config: ${f.statusText}`);
+        const i = await f.json();
+        s(i);
+      } catch (f) {
+        const i = f instanceof Error ? f : new Error("Unknown error occurred");
+        r(i), console.error("Failed to fetch seat map config:", i);
       } finally {
-        m(!1);
+        u(!1);
       }
     }
   };
   return T(() => {
-    v();
-  }, [e]), {
-    config: i,
-    loading: n,
-    error: y,
-    refetch: v
+    S();
+  }, [t]), {
+    config: n,
+    loading: o,
+    error: l,
+    refetch: S
   };
 }
-function ie(e) {
-  const [i, a] = E({ width: 0, height: 0 });
+function pt(t) {
+  const [n, s] = M({ width: 0, height: 0 });
   return T(() => {
-    const n = e.current;
-    if (!n) return;
-    const { width: m, height: y } = n.getBoundingClientRect();
-    m > 0 && y > 0 && a({ width: m, height: y });
-    const u = new ResizeObserver((v) => {
-      const x = v[0];
-      if (!x) return;
-      const { width: s, height: o } = x.contentRect;
-      s > 0 && o > 0 && a((g) => g.width === s && g.height === o ? g : { width: s, height: o });
+    const o = t.current;
+    if (!o) return;
+    const { width: u, height: l } = o.getBoundingClientRect();
+    u > 0 && l > 0 && s({ width: u, height: l });
+    const r = new ResizeObserver((S) => {
+      const f = S[0];
+      if (!f) return;
+      const { width: i, height: a } = f.contentRect;
+      i > 0 && a > 0 && s((d) => d.width === i && d.height === a ? d : { width: i, height: a });
     });
-    return u.observe(n), () => {
-      u.disconnect();
+    return r.observe(o), () => {
+      r.disconnect();
     };
-  }, [e]), i;
+  }, [t]), n;
 }
-function St(e, i) {
-  return Math.sqrt(Math.pow(i.x - e.x, 2) + Math.pow(i.y - e.y, 2));
+function Ie(t, n) {
+  return Math.sqrt(Math.pow(n.x - t.x, 2) + Math.pow(n.y - t.y, 2));
 }
-function wt(e, i) {
+function ke(t, n) {
   return {
-    x: (e.x + i.x) / 2,
-    y: (e.y + i.y) / 2
+    x: (t.x + n.x) / 2,
+    y: (t.y + n.y) / 2
   };
 }
-function re(e, i) {
-  const a = F(null), n = F(null), m = F(1);
+function gt(t, n) {
+  const s = X(null), o = X(null), u = X(1);
   T(() => {
-    const y = e.current;
-    if (!y || !i.enabled) return;
-    const u = y.container(), v = (o) => {
-      if (o.touches.length === 2) {
-        o.preventDefault();
-        const g = { x: o.touches[0].clientX, y: o.touches[0].clientY }, l = { x: o.touches[1].clientX, y: o.touches[1].clientY };
-        a.current = St(g, l), n.current = wt(g, l), m.current = i.currentScale;
+    const l = t.current;
+    if (!l || !n.enabled) return;
+    const r = l.container(), S = (a) => {
+      if (a.touches.length === 2) {
+        a.preventDefault();
+        const d = { x: a.touches[0].clientX, y: a.touches[0].clientY }, h = { x: a.touches[1].clientX, y: a.touches[1].clientY };
+        s.current = Ie(d, h), o.current = ke(d, h), u.current = n.currentScale;
       }
-    }, x = (o) => {
-      if (o.touches.length !== 2) return;
-      o.preventDefault();
-      const g = { x: o.touches[0].clientX, y: o.touches[0].clientY }, l = { x: o.touches[1].clientX, y: o.touches[1].clientY }, k = St(g, l), C = wt(g, l);
-      if (a.current !== null && n.current !== null) {
-        const D = k / a.current, P = Math.min(
-          Math.max(i.currentScale * D, i.minScale),
-          i.maxScale
-        ), K = u.getBoundingClientRect(), J = C.x - K.left, Q = C.y - K.top, tt = i.currentScale, z = {
-          x: (J - i.currentPosition.x) / tt,
-          y: (Q - i.currentPosition.y) / tt
-        }, $ = C.x - n.current.x, at = C.y - n.current.y, lt = {
-          x: J - z.x * P + $,
-          y: Q - z.y * P + at
+    }, f = (a) => {
+      if (a.touches.length !== 2) return;
+      a.preventDefault();
+      const d = { x: a.touches[0].clientX, y: a.touches[0].clientY }, h = { x: a.touches[1].clientX, y: a.touches[1].clientY }, x = Ie(d, h), m = ke(d, h);
+      if (s.current !== null && o.current !== null) {
+        const C = x / s.current, R = Math.min(
+          Math.max(n.currentScale * C, n.minScale),
+          n.maxScale
+        ), E = r.getBoundingClientRect(), I = m.x - E.left, L = m.y - E.top, W = n.currentScale, P = {
+          x: (I - n.currentPosition.x) / W,
+          y: (L - n.currentPosition.y) / W
+        }, H = m.x - o.current.x, j = m.y - o.current.y, $ = {
+          x: I - P.x * R + H,
+          y: L - P.y * R + j
         };
-        i.onScaleChange(P, lt), a.current = k, n.current = C;
+        n.onScaleChange(R, $), s.current = x, o.current = m;
       }
-    }, s = (o) => {
-      o.touches.length < 2 && (a.current = null, n.current = null);
+    }, i = (a) => {
+      a.touches.length < 2 && (s.current = null, o.current = null);
     };
-    return u.addEventListener("touchstart", v, { passive: !1 }), u.addEventListener("touchmove", x, { passive: !1 }), u.addEventListener("touchend", s), () => {
-      u.removeEventListener("touchstart", v), u.removeEventListener("touchmove", x), u.removeEventListener("touchend", s);
+    return r.addEventListener("touchstart", S, { passive: !1 }), r.addEventListener("touchmove", f, { passive: !1 }), r.addEventListener("touchend", i), () => {
+      r.removeEventListener("touchstart", S), r.removeEventListener("touchmove", f), r.removeEventListener("touchend", i);
     };
-  }, [e, i]);
+  }, [t, n]);
 }
-const se = {
+const bt = {
   canvasBackground: "#1a1a1a",
   stageColor: "#808080",
   seatAvailable: "#2C2B30",
@@ -101,56 +103,56 @@ const se = {
   seatHidden: "#4a4a4a",
   gridLines: "#404040",
   currency: "KD"
-}, Mt = Z(({ seat: e, state: i, colors: a, onClick: n, onMouseEnter: m, onMouseLeave: y }) => {
-  const x = {
-    available: a.seatAvailable,
-    reserved: a.seatReserved,
-    selected: a.seatSelected,
-    unavailable: a.seatUnavailable,
-    hidden: a.seatHidden
+}, Te = se(({ seat: t, state: n, colors: s, onClick: o, onMouseEnter: u, onMouseLeave: l }) => {
+  const f = {
+    available: s.seatAvailable,
+    reserved: s.seatReserved,
+    selected: s.seatSelected,
+    unavailable: s.seatUnavailable,
+    hidden: s.seatHidden
     // Hidden seats are filtered out, but included for type safety
-  }[i], s = i === "available" || i === "selected", o = N(() => {
-    s && n(e);
-  }, [e, n, s]), g = N((C) => {
-    m(e, C);
-    const D = C.target.getStage();
-    D && s && (D.container().style.cursor = "pointer");
-  }, [e, m, s]), l = N((C) => {
-    y();
-    const D = C.target.getStage();
-    D && (D.container().style.cursor = "grab");
-  }, [y]), k = {
-    x: e.position.x,
-    y: e.position.y,
-    fill: x,
+  }[n], i = n === "available" || n === "selected", a = N(() => {
+    i && o(t);
+  }, [t, o, i]), d = N((m) => {
+    u(t, m);
+    const C = m.target.getStage();
+    C && i && (C.container().style.cursor = "pointer");
+  }, [t, u, i]), h = N((m) => {
+    l();
+    const C = m.target.getStage();
+    C && (C.container().style.cursor = "grab");
+  }, [l]), x = {
+    x: t.position.x,
+    y: t.position.y,
+    fill: f,
     stroke: "#ffffff",
     strokeWidth: 1,
-    onClick: o,
-    onTap: o,
-    onMouseEnter: g,
-    onMouseLeave: l
+    onClick: a,
+    onTap: a,
+    onMouseEnter: d,
+    onMouseLeave: h
   };
-  return e.shape === "circle" ? /* @__PURE__ */ h(
-    ne,
+  return t.shape === "circle" ? /* @__PURE__ */ b(
+    dt,
     {
-      ...k,
+      ...x,
       radius: 12
     }
-  ) : /* @__PURE__ */ h(
-    Ct,
+  ) : /* @__PURE__ */ b(
+    De,
     {
-      ...k,
+      ...x,
       width: 24,
       height: 24,
       offsetX: 12,
       offsetY: 12,
-      cornerRadius: e.shape === "square" ? 0 : 4
+      cornerRadius: t.shape === "square" ? 0 : 4
     }
   );
 });
-Mt.displayName = "ViewerSeat";
-const kt = Z(({ stage: e, stageColor: i }) => {
-  const a = (y) => ({
+Te.displayName = "ViewerSeat";
+const Xe = se(({ stage: t, stageColor: n }) => {
+  const s = (l) => ({
     stage: "🎭",
     table: "⬜",
     wall: "▬",
@@ -159,41 +161,41 @@ const kt = Z(({ stage: e, stageColor: i }) => {
     bar: "🍷",
     "entry-exit": "🚪",
     custom: "➕"
-  })[y || "stage"] || "🎭", n = e.config.color || i, m = a(e.config.objectType);
-  return /* @__PURE__ */ w(ee, { x: e.position.x, y: e.position.y, rotation: e.config.rotation || 0, children: [
-    /* @__PURE__ */ h(
-      Ct,
+  })[l || "stage"] || "🎭", o = t.config.color || n, u = s(t.config.objectType);
+  return /* @__PURE__ */ k(lt, { x: t.position.x, y: t.position.y, rotation: t.config.rotation || 0, children: [
+    /* @__PURE__ */ b(
+      De,
       {
-        width: e.config.width,
-        height: e.config.height,
-        fill: n + "80",
+        width: t.config.width,
+        height: t.config.height,
+        fill: o + "80",
         stroke: "#ffffff",
         strokeWidth: 2,
         cornerRadius: 10
       }
     ),
-    /* @__PURE__ */ h(
-      vt,
+    /* @__PURE__ */ b(
+      Fe,
       {
-        text: m,
+        text: u,
         x: 0,
         y: 0,
-        width: e.config.width,
-        height: e.config.height * 0.4,
+        width: t.config.width,
+        height: t.config.height * 0.4,
         fontSize: 32,
         fill: "#ffffff",
         align: "center",
         verticalAlign: "middle"
       }
     ),
-    /* @__PURE__ */ h(
-      vt,
+    /* @__PURE__ */ b(
+      Fe,
       {
-        text: e.config.label,
+        text: t.config.label,
         x: 0,
-        y: e.config.height * 0.4,
-        width: e.config.width,
-        height: e.config.height * 0.6,
+        y: t.config.height * 0.4,
+        width: t.config.width,
+        height: t.config.height * 0.6,
         fontSize: 20,
         fontStyle: "bold",
         fill: "#ffffff",
@@ -203,20 +205,20 @@ const kt = Z(({ stage: e, stageColor: i }) => {
     )
   ] });
 });
-kt.displayName = "ViewerStage";
-const It = Z(({
-  floors: e,
-  currentFloorId: i,
-  onFloorChange: a,
-  showAllOption: n,
-  allLabel: m,
-  position: y,
-  className: u
+Xe.displayName = "ViewerStage";
+const Ye = se(({
+  floors: t,
+  currentFloorId: n,
+  onFloorChange: s,
+  showAllOption: o,
+  allLabel: u,
+  position: l,
+  className: r
 }) => {
-  const v = Y(
-    () => [...e].sort((l, k) => l.order - k.order),
-    [e]
-  ), s = {
+  const S = V(
+    () => [...t].sort((h, x) => h.order - x.order),
+    [t]
+  ), i = {
     position: "absolute",
     display: "flex",
     alignItems: "center",
@@ -231,8 +233,8 @@ const It = Z(({
       "top-right": { top: 0, right: 0 },
       "bottom-left": { bottom: 0, left: 0 },
       "bottom-right": { bottom: 0, right: 0 }
-    }[y]
-  }, o = {
+    }[l]
+  }, a = {
     padding: "10px 16px",
     fontSize: "14px",
     fontWeight: 500,
@@ -244,44 +246,44 @@ const It = Z(({
     transition: "all 0.2s ease",
     minHeight: "44px",
     touchAction: "manipulation"
-  }, g = {
-    ...o,
+  }, d = {
+    ...a,
     backgroundColor: "#3A7DE5",
     borderColor: "#3A7DE5"
   };
-  return /* @__PURE__ */ w("div", { className: u, style: s, children: [
-    n && /* @__PURE__ */ h(
+  return /* @__PURE__ */ k("div", { className: r, style: i, children: [
+    o && /* @__PURE__ */ b(
       "button",
       {
         type: "button",
-        onClick: () => a(null),
-        style: i === null ? g : o,
-        children: m
+        onClick: () => s(null),
+        style: n === null ? d : a,
+        children: u
       }
     ),
-    v.map((l) => /* @__PURE__ */ h(
+    S.map((h) => /* @__PURE__ */ b(
       "button",
       {
         type: "button",
-        onClick: () => a(l.id),
-        style: i === l.id ? g : o,
-        children: l.name
+        onClick: () => s(h.id),
+        style: n === h.id ? d : a,
+        children: h.name
       },
-      l.id
+      h.id
     ))
   ] });
 });
-It.displayName = "FloorSelectorBar";
-const Nt = Z(({
-  scale: e,
-  minScale: i,
-  maxScale: a,
-  onZoomIn: n,
-  onZoomOut: m,
-  position: y,
-  className: u
+Ye.displayName = "FloorSelectorBar";
+const je = se(({
+  scale: t,
+  minScale: n,
+  maxScale: s,
+  onZoomIn: o,
+  onZoomOut: u,
+  position: l,
+  className: r
 }) => {
-  const x = {
+  const f = {
     position: "absolute",
     display: "flex",
     flexDirection: "column",
@@ -296,8 +298,8 @@ const Nt = Z(({
       "top-right": { top: 0, right: 0 },
       "bottom-left": { bottom: 0, left: 0 },
       "bottom-right": { bottom: 0, right: 0 }
-    }[y]
-  }, s = {
+    }[l]
+  }, i = {
     width: "44px",
     height: "44px",
     minWidth: "44px",
@@ -314,53 +316,53 @@ const Nt = Z(({
     justifyContent: "center",
     transition: "all 0.2s ease",
     touchAction: "manipulation"
-  }, o = {
-    ...s,
+  }, a = {
+    ...i,
     opacity: 0.4,
     cursor: "not-allowed"
-  }, g = e < a, l = e > i;
-  return /* @__PURE__ */ w("div", { className: u, style: x, children: [
-    /* @__PURE__ */ h(
+  }, d = t < s, h = t > n;
+  return /* @__PURE__ */ k("div", { className: r, style: f, children: [
+    /* @__PURE__ */ b(
       "button",
       {
         type: "button",
-        onClick: n,
-        disabled: !g,
-        style: g ? s : o,
+        onClick: o,
+        disabled: !d,
+        style: d ? i : a,
         title: "Zoom In",
         children: "+"
       }
     ),
-    /* @__PURE__ */ h(
+    /* @__PURE__ */ b(
       "button",
       {
         type: "button",
-        onClick: m,
-        disabled: !l,
-        style: l ? s : o,
+        onClick: u,
+        disabled: !h,
+        style: h ? i : a,
         title: "Zoom Out",
         children: "−"
       }
     )
   ] });
 });
-Nt.displayName = "ZoomControls";
-const Dt = Z(({
-  visible: e,
-  x: i,
-  y: a,
-  seat: n,
-  currency: m,
-  state: y
+je.displayName = "ZoomControls";
+const Ae = se(({
+  visible: t,
+  x: n,
+  y: s,
+  seat: o,
+  currency: u,
+  state: l
 }) => {
-  if (!e || !n) return null;
-  const u = n.seatNumber || (n.rowLabel && n.columnLabel ? `${n.rowLabel}-${n.columnLabel}` : "N/A"), v = {
+  if (!t || !o) return null;
+  const r = o.seatNumber || (o.rowLabel && o.columnLabel ? `${o.rowLabel}-${o.columnLabel}` : "N/A"), S = {
     position: "fixed",
-    left: `${i + 15}px`,
-    top: `${a + 15}px`,
+    left: `${n + 15}px`,
+    top: `${s + 15}px`,
     zIndex: 1e3,
     pointerEvents: "none"
-  }, x = {
+  }, f = {
     backgroundColor: "rgba(26, 26, 26, 0.95)",
     color: "#fff",
     border: "1px solid #444",
@@ -369,324 +371,498 @@ const Dt = Z(({
     fontSize: "13px",
     boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
     minWidth: "140px"
-  }, s = {
+  }, i = {
     color: "#9ca3af",
     marginRight: "4px"
-  }, o = {
+  }, a = {
     fontWeight: 600
-  }, g = {
+  }, d = {
     color: "#4ade80",
     fontWeight: 600
-  }, l = {
+  }, h = {
     fontSize: "11px",
     color: "#6b7280",
     textTransform: "capitalize",
     marginTop: "4px"
   };
-  return /* @__PURE__ */ h("div", { style: v, children: /* @__PURE__ */ w("div", { style: x, children: [
-    n.sectionName && /* @__PURE__ */ w("div", { style: { marginBottom: "4px" }, children: [
-      /* @__PURE__ */ h("span", { style: s, children: "Section:" }),
-      /* @__PURE__ */ h("span", { style: { ...o, color: "#3b82f6" }, children: n.sectionName })
+  return /* @__PURE__ */ b("div", { style: S, children: /* @__PURE__ */ k("div", { style: f, children: [
+    o.sectionName && /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
+      /* @__PURE__ */ b("span", { style: i, children: "Section:" }),
+      /* @__PURE__ */ b("span", { style: { ...a, color: "#3b82f6" }, children: o.sectionName })
     ] }),
-    /* @__PURE__ */ w("div", { style: { marginBottom: "4px" }, children: [
-      /* @__PURE__ */ h("span", { style: s, children: "Seat:" }),
-      /* @__PURE__ */ h("span", { style: o, children: u })
+    /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
+      /* @__PURE__ */ b("span", { style: i, children: "Seat:" }),
+      /* @__PURE__ */ b("span", { style: a, children: r })
     ] }),
-    n.price !== void 0 && n.price > 0 && y === "available" && /* @__PURE__ */ w("div", { style: { marginBottom: "4px" }, children: [
-      /* @__PURE__ */ h("span", { style: s, children: "Price:" }),
-      /* @__PURE__ */ w("span", { style: g, children: [
-        m,
+    o.price !== void 0 && o.price > 0 && l === "available" && /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
+      /* @__PURE__ */ b("span", { style: i, children: "Price:" }),
+      /* @__PURE__ */ k("span", { style: d, children: [
+        u,
         " ",
-        n.price.toFixed(2)
+        o.price.toFixed(2)
       ] })
     ] }),
-    /* @__PURE__ */ w("div", { style: l, children: [
+    /* @__PURE__ */ k("div", { style: h, children: [
       "Status: ",
-      y
+      l
     ] })
   ] }) });
 });
-Dt.displayName = "SeatTooltip";
-const he = ({
-  config: e,
-  configUrl: i,
-  floorId: a,
-  onFloorChange: n,
-  reservedSeats: m = [],
-  unavailableSeats: y = [],
-  selectedSeats: u,
-  onSeatSelect: v,
-  onSeatDeselect: x,
-  onSelectionChange: s,
-  colorOverrides: o,
-  showTooltip: g = !0,
-  zoomEnabled: l = !0,
-  className: k = "",
+Ae.displayName = "SeatTooltip";
+const Mt = ({
+  config: t,
+  configUrl: n,
+  floorId: s,
+  onFloorChange: o,
+  reservedSeats: u = [],
+  unavailableSeats: l = [],
+  selectedSeats: r,
+  myReservedSeats: S = [],
+  onSeatSelect: f,
+  onSeatDeselect: i,
+  onSelectionChange: a,
+  colorOverrides: d,
+  showTooltip: h = !0,
+  zoomEnabled: x = !0,
+  className: m = "",
   onConfigLoad: C,
-  onError: D,
+  onError: R,
   // Floor selector props
-  showFloorSelector: P,
-  floorSelectorPosition: K = "top-left",
-  floorSelectorClassName: J,
-  showAllFloorsOption: Q = !0,
-  allFloorsLabel: tt = "All",
-  fitToView: z = !0,
-  fitPadding: $ = 40,
+  showFloorSelector: E,
+  floorSelectorPosition: I = "top-left",
+  floorSelectorClassName: L,
+  showAllFloorsOption: W = !0,
+  allFloorsLabel: P = "All",
+  fitToView: H = !0,
+  fitPadding: j = 40,
   // Zoom controls
-  showZoomControls: at = !0,
-  zoomControlsPosition: lt = "bottom-right",
-  zoomControlsClassName: Rt,
-  minZoom: gt,
-  maxZoom: L = 3,
-  zoomStep: et = 0.25,
+  showZoomControls: $ = !0,
+  zoomControlsPosition: ae = "bottom-right",
+  zoomControlsClassName: Ce,
+  minZoom: O,
+  maxZoom: A = 3,
+  zoomStep: B = 0.25,
   // Touch gestures
-  touchEnabled: Et = !0
+  touchEnabled: ge = !0
 }) => {
-  const ht = F(null), yt = F(null), S = ie(yt), [j, xt] = E(/* @__PURE__ */ new Set()), [M, H] = E(1), [I, W] = E({ x: 0, y: 0 }), [Lt, Xt] = E(null), [Yt, Tt] = E(1), nt = F({ width: 0, height: 0 }), [O, mt] = E({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: Wt, loading: Pt, error: V } = oe(i), c = e || Wt, dt = a !== void 0, R = dt ? a || null : Lt, ot = u !== void 0, jt = N((t) => {
-    dt || Xt(t), n?.(t);
-  }, [dt, n]), ut = c?.floors || [], At = P !== void 0 ? P : ut.length > 1, it = Y(
-    () => c ? { ...c.colors, ...o } : { ...se, ...o },
-    [c, o]
-  ), A = Y(() => {
-    if (!c) return [];
-    let t = c.seats.filter((r) => r.state !== "hidden");
-    return R && (t = t.filter(
-      (r) => r.floorId === R || !r.floorId && R === "floor_default"
-    )), t;
-  }, [c, R]), rt = Y(() => c?.stages ? R ? c.stages.filter(
-    (t) => t.floorId === R || !t.floorId && R === "floor_default"
-  ) : c.stages : [], [c, R]), X = Y(() => {
-    if (!c || A.length === 0 && rt.length === 0)
+  const J = X(null), ce = X(null), F = pt(ce), [G, Me] = M(/* @__PURE__ */ new Set()), [D, Q] = M(1), [z, _] = M({ x: 0, y: 0 }), [We, Pe] = M(null), [$e, Be] = M(1), le = X({ width: 0, height: 0 }), [ee, Re] = M({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: Ue, loading: Ve, error: te } = ft(n), p = t || Ue, be = s !== void 0, Y = be ? s || null : We, de = r !== void 0, He = N((e) => {
+    be || Pe(e), o?.(e);
+  }, [be, o]), ye = p?.floors || [], Oe = E !== void 0 ? E : ye.length > 1, ue = V(
+    () => p ? { ...p.colors, ...d } : { ...bt, ...d },
+    [p, d]
+  ), Z = V(() => {
+    if (!p) return [];
+    let e = p.seats.filter((c) => c.state !== "hidden");
+    return Y && (e = e.filter(
+      (c) => c.floorId === Y || !c.floorId && Y === "floor_default"
+    )), e;
+  }, [p, Y]), he = V(() => p?.stages ? Y ? p.stages.filter(
+    (e) => e.floorId === Y || !e.floorId && Y === "floor_default"
+  ) : p.stages : [], [p, Y]), U = V(() => {
+    if (!p || Z.length === 0 && he.length === 0)
       return null;
-    const t = 12;
-    let r = 1 / 0, f = 1 / 0, d = -1 / 0, p = -1 / 0;
-    return A.forEach((b) => {
-      r = Math.min(r, b.position.x - t), f = Math.min(f, b.position.y - t), d = Math.max(d, b.position.x + t), p = Math.max(p, b.position.y + t);
-    }), rt.forEach((b) => {
-      r = Math.min(r, b.position.x), f = Math.min(f, b.position.y), d = Math.max(d, b.position.x + (b.config?.width || 200)), p = Math.max(p, b.position.y + (b.config?.height || 100));
-    }), { minX: r, minY: f, maxX: d, maxY: p, width: d - r, height: p - f };
-  }, [c, A, rt]);
+    const e = 12;
+    let c = 1 / 0, g = 1 / 0, y = -1 / 0, v = -1 / 0;
+    return Z.forEach((w) => {
+      c = Math.min(c, w.position.x - e), g = Math.min(g, w.position.y - e), y = Math.max(y, w.position.x + e), v = Math.max(v, w.position.y + e);
+    }), he.forEach((w) => {
+      c = Math.min(c, w.position.x), g = Math.min(g, w.position.y), y = Math.max(y, w.position.x + (w.config?.width || 200)), v = Math.max(v, w.position.y + (w.config?.height || 100));
+    }), { minX: c, minY: g, maxX: y, maxY: v, width: y - c, height: v - g };
+  }, [p, Z, he]);
   T(() => {
-    if (!z || !c || !X || S.width === 0 || S.height === 0) return;
-    const t = Math.abs(S.width - nt.current.width), r = Math.abs(S.height - nt.current.height);
-    if (!(nt.current.width === 0) && t < 10 && r < 10) return;
-    nt.current = S;
-    const d = S.width, p = S.height, b = d - $ * 2, U = p - $ * 2, st = b / X.width, pt = U / X.height, ct = Math.min(st, pt, L), Gt = X.minX + X.width / 2, Ut = X.minY + X.height / 2, Zt = d / 2, Kt = p / 2, Jt = Zt - Gt * ct, Qt = Kt - Ut * ct;
-    H(ct), W({ x: Jt, y: Qt }), Tt(ct);
-  }, [z, c, X, $, L, S, R]);
-  const _ = Y(() => {
-    const t = new Set(m), r = new Set(y);
-    return { reserved: t, unavailable: r };
-  }, [m, y]), ft = Y(() => u ? new Set(u) : null, [u]), q = N((t) => {
-    const r = t.id, f = t.seatNumber || "";
-    return _.unavailable.has(r) || _.unavailable.has(f) ? "unavailable" : _.reserved.has(r) || _.reserved.has(f) ? "reserved" : j.has(r) ? "selected" : t.state;
-  }, [_, j]);
+    if (!H || !p || !U || F.width === 0 || F.height === 0) return;
+    const e = Math.abs(F.width - le.current.width), c = Math.abs(F.height - le.current.height);
+    if (!(le.current.width === 0) && e < 10 && c < 10) return;
+    le.current = F;
+    const y = F.width, v = F.height, w = y - j * 2, re = v - j * 2, fe = w / U.width, me = re / U.height, pe = Math.min(fe, me, A), nt = U.minX + U.width / 2, ot = U.minY + U.height / 2, rt = y / 2, it = v / 2, st = rt - nt * pe, at = it - ot * pe;
+    Q(pe), _({ x: st, y: at }), Be(pe);
+  }, [H, p, U, j, A, F, Y]);
+  const q = V(() => {
+    const e = new Set(u), c = new Set(l), g = new Set(S);
+    return { reserved: e, unavailable: c, myReserved: g };
+  }, [u, l, S]), ve = V(() => r ? new Set(r) : null, [r]), ne = N((e) => {
+    const c = e.id, g = e.seatNumber || "";
+    return q.unavailable.has(c) || q.unavailable.has(g) ? "unavailable" : q.reserved.has(c) || q.reserved.has(g) ? "reserved" : q.myReserved.has(c) || q.myReserved.has(g) || G.has(c) ? "selected" : e.state;
+  }, [q, G]);
   T(() => {
-    c && C && C(c);
-  }, [c, C]), T(() => {
-    V && D && D(V);
-  }, [V, D]), T(() => {
-    ot && ft && xt(ft);
-  }, [ot, ft]);
-  const Bt = N((t) => {
-    const r = q(t);
-    if (r !== "available" && r !== "selected")
+    p && C && C(p);
+  }, [p, C]), T(() => {
+    te && R && R(te);
+  }, [te, R]), T(() => {
+    de && ve && Me(ve);
+  }, [de, ve]);
+  const _e = N((e) => {
+    const c = ne(e);
+    if (c !== "available" && c !== "selected")
       return;
-    const f = j.has(t.id);
-    ot || xt((d) => {
-      const p = new Set(d);
-      return f ? p.delete(t.id) : p.add(t.id), p;
-    }), f ? x?.(t) : (v?.(t), v || console.log("Seat selected:", t));
-  }, [q, j, ot, v, x]), G = Y(() => c ? A.filter((t) => j.has(t.id)) : [], [A, j]);
+    const g = G.has(e.id);
+    de || Me((y) => {
+      const v = new Set(y);
+      return g ? v.delete(e.id) : v.add(e.id), v;
+    }), g ? i?.(e) : (f?.(e), f || console.log("Seat selected:", e));
+  }, [ne, G, de, f, i]), oe = V(() => p ? Z.filter((e) => G.has(e.id)) : [], [Z, G]);
   T(() => {
-    s?.(G);
-  }, [G, s]);
-  const B = gt !== void 0 ? gt : Yt, Ft = N(() => {
-    if (!l) return;
-    const t = Math.min(M + et, L);
-    if (t !== M) {
-      const r = S.width || c?.canvas.width || 800, f = S.height || c?.canvas.height || 600, d = r / 2, p = f / 2, b = {
-        x: (d - I.x) / M,
-        y: (p - I.y) / M
+    a?.(oe);
+  }, [oe, a]);
+  const K = O !== void 0 ? O : $e, qe = N(() => {
+    if (!x) return;
+    const e = Math.min(D + B, A);
+    if (e !== D) {
+      const c = F.width || p?.canvas.width || 800, g = F.height || p?.canvas.height || 600, y = c / 2, v = g / 2, w = {
+        x: (y - z.x) / D,
+        y: (v - z.y) / D
       };
-      H(t), W({
-        x: d - b.x * t,
-        y: p - b.y * t
+      Q(e), _({
+        x: y - w.x * e,
+        y: v - w.y * e
       });
     }
-  }, [l, M, et, L, S, c, I]), zt = N(() => {
-    if (!l) return;
-    const t = Math.max(M - et, B);
-    if (t !== M) {
-      const r = S.width || c?.canvas.width || 800, f = S.height || c?.canvas.height || 600, d = r / 2, p = f / 2, b = {
-        x: (d - I.x) / M,
-        y: (p - I.y) / M
+  }, [x, D, B, A, F, p, z]), Ge = N(() => {
+    if (!x) return;
+    const e = Math.max(D - B, K);
+    if (e !== D) {
+      const c = F.width || p?.canvas.width || 800, g = F.height || p?.canvas.height || 600, y = c / 2, v = g / 2, w = {
+        x: (y - z.x) / D,
+        y: (v - z.y) / D
       };
-      H(t), W({
-        x: d - b.x * t,
-        y: p - b.y * t
+      Q(e), _({
+        x: y - w.x * e,
+        y: v - w.y * e
       });
     }
-  }, [l, M, et, B, S, c, I]), $t = N((t) => {
-    W({
-      x: t.target.x(),
-      y: t.target.y()
+  }, [x, D, B, K, F, p, z]), Ze = N((e) => {
+    _({
+      x: e.target.x(),
+      y: e.target.y()
     });
-  }, []), Ht = N((t) => {
-    if (!l) return;
-    t.evt.preventDefault();
-    const r = ht.current;
-    if (!r) return;
-    const f = r.scaleX(), d = r.getPointerPosition();
-    if (!d) return;
-    const p = 1.1, b = t.evt.deltaY > 0 ? f / p : f * p, U = Math.min(Math.max(b, B), L), st = {
-      x: (d.x - I.x) / f,
-      y: (d.y - I.y) / f
-    }, pt = {
-      x: d.x - st.x * U,
-      y: d.y - st.y * U
+  }, []), Ke = N((e) => {
+    if (!x) return;
+    e.evt.preventDefault();
+    const c = J.current;
+    if (!c) return;
+    const g = c.scaleX(), y = c.getPointerPosition();
+    if (!y) return;
+    const v = 1.1, w = e.evt.deltaY > 0 ? g / v : g * v, re = Math.min(Math.max(w, K), A), fe = {
+      x: (y.x - z.x) / g,
+      y: (y.y - z.y) / g
+    }, me = {
+      x: y.x - fe.x * re,
+      y: y.y - fe.y * re
     };
-    H(U), W(pt);
-  }, [l, I, B, L]);
-  re(ht, {
-    enabled: Et && l,
-    minScale: B,
-    maxScale: L,
-    currentScale: M,
-    currentPosition: I,
-    onScaleChange: (t, r) => {
-      H(t), W(r);
+    Q(re), _(me);
+  }, [x, z, K, A]);
+  gt(J, {
+    enabled: ge && x,
+    minScale: K,
+    maxScale: A,
+    currentScale: D,
+    currentPosition: z,
+    onScaleChange: (e, c) => {
+      Q(e), _(c);
     },
-    onPositionChange: (t) => {
-      W(t);
+    onPositionChange: (e) => {
+      _(e);
     }
   });
-  const Ot = N((t, r) => {
+  const Je = N((e, c) => {
+    if (!h) return;
+    const g = c.target.getStage();
     if (!g) return;
-    const f = r.target.getStage();
-    if (!f) return;
-    const d = f.getPointerPosition();
-    if (!d) return;
-    const p = f.container().getBoundingClientRect();
-    mt({
+    const y = g.getPointerPosition();
+    if (!y) return;
+    const v = g.container().getBoundingClientRect();
+    Re({
       visible: !0,
-      x: p.left + d.x,
-      y: p.top + d.y,
-      seat: t,
-      state: q(t)
+      x: v.left + y.x,
+      y: v.top + y.y,
+      seat: e,
+      state: ne(e)
     });
-  }, [g, q]), Vt = N(() => {
-    mt((t) => ({ ...t, visible: !1 }));
+  }, [h, ne]), Qe = N(() => {
+    Re((e) => ({ ...e, visible: !1 }));
   }, []);
-  if (Pt)
-    return /* @__PURE__ */ h("div", { className: `flex items-center justify-center h-full ${k}`, children: /* @__PURE__ */ h("p", { children: "Loading seat map..." }) });
-  if (V)
-    return /* @__PURE__ */ h("div", { className: `flex items-center justify-center h-full ${k}`, children: /* @__PURE__ */ w("p", { className: "text-red-500", children: [
+  if (Ve)
+    return /* @__PURE__ */ b("div", { className: `flex items-center justify-center h-full ${m}`, children: /* @__PURE__ */ b("p", { children: "Loading seat map..." }) });
+  if (te)
+    return /* @__PURE__ */ b("div", { className: `flex items-center justify-center h-full ${m}`, children: /* @__PURE__ */ k("p", { className: "text-red-500", children: [
       "Error loading seat map: ",
-      V.message
+      te.message
     ] }) });
-  if (!c)
-    return /* @__PURE__ */ h("div", { className: `flex items-center justify-center h-full ${k}`, children: /* @__PURE__ */ h("p", { children: "No configuration provided" }) });
-  const _t = S.width || c.canvas.width, qt = S.height || c.canvas.height;
-  return /* @__PURE__ */ w(
+  if (!p)
+    return /* @__PURE__ */ b("div", { className: `flex items-center justify-center h-full ${m}`, children: /* @__PURE__ */ b("p", { children: "No configuration provided" }) });
+  const et = F.width || p.canvas.width, tt = F.height || p.canvas.height;
+  return /* @__PURE__ */ k(
     "div",
     {
-      ref: yt,
-      className: `relative ${k}`,
+      ref: ce,
+      className: `relative ${m}`,
       style: { width: "100%", height: "100%" },
       children: [
-        At && ut.length > 0 && /* @__PURE__ */ h(
-          It,
+        Oe && ye.length > 0 && /* @__PURE__ */ b(
+          Ye,
           {
-            floors: ut,
-            currentFloorId: R,
-            onFloorChange: jt,
-            showAllOption: Q,
-            allLabel: tt,
-            position: K,
-            className: J
+            floors: ye,
+            currentFloorId: Y,
+            onFloorChange: He,
+            showAllOption: W,
+            allLabel: P,
+            position: I,
+            className: L
           }
         ),
-        /* @__PURE__ */ w(
-          te,
+        /* @__PURE__ */ k(
+          ct,
           {
-            ref: ht,
-            width: _t,
-            height: qt,
-            scaleX: M,
-            scaleY: M,
-            x: I.x,
-            y: I.y,
+            ref: J,
+            width: et,
+            height: tt,
+            scaleX: D,
+            scaleY: D,
+            x: z.x,
+            y: z.y,
             draggable: !0,
-            onDragEnd: $t,
-            onWheel: Ht,
-            style: { backgroundColor: c.canvas.backgroundColor, cursor: "grab" },
+            onDragEnd: Ze,
+            onWheel: Ke,
+            style: { backgroundColor: p.canvas.backgroundColor, cursor: "grab" },
             children: [
-              /* @__PURE__ */ h(bt, { listening: !1, children: rt.map((t) => /* @__PURE__ */ h(
-                kt,
+              /* @__PURE__ */ b(Ee, { listening: !1, children: he.map((e) => /* @__PURE__ */ b(
+                Xe,
                 {
-                  stage: t,
-                  stageColor: it.stageColor
+                  stage: e,
+                  stageColor: ue.stageColor
                 },
-                t.id
+                e.id
               )) }),
-              /* @__PURE__ */ h(bt, { children: A.map((t) => /* @__PURE__ */ h(
-                Mt,
+              /* @__PURE__ */ b(Ee, { children: Z.map((e) => /* @__PURE__ */ b(
+                Te,
                 {
-                  seat: t,
-                  state: q(t),
-                  colors: it,
-                  onClick: Bt,
-                  onMouseEnter: Ot,
-                  onMouseLeave: Vt
+                  seat: e,
+                  state: ne(e),
+                  colors: ue,
+                  onClick: _e,
+                  onMouseEnter: Je,
+                  onMouseLeave: Qe
                 },
-                t.id
+                e.id
               )) })
             ]
           }
         ),
-        g && /* @__PURE__ */ h(
-          Dt,
+        h && /* @__PURE__ */ b(
+          Ae,
           {
-            visible: O.visible,
-            x: O.x,
-            y: O.y,
-            seat: O.seat,
-            currency: it.currency,
-            state: O.state
+            visible: ee.visible,
+            x: ee.x,
+            y: ee.y,
+            seat: ee.seat,
+            currency: ue.currency,
+            state: ee.state
           }
         ),
-        at && l && /* @__PURE__ */ h(
-          Nt,
+        $ && x && /* @__PURE__ */ b(
+          je,
           {
-            scale: M,
-            minScale: B,
-            maxScale: L,
-            onZoomIn: Ft,
-            onZoomOut: zt,
-            position: lt,
-            className: Rt
+            scale: D,
+            minScale: K,
+            maxScale: A,
+            onZoomIn: qe,
+            onZoomOut: Ge,
+            position: ae,
+            className: Ce
           }
         ),
-        G.length > 0 && /* @__PURE__ */ w("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
-          /* @__PURE__ */ w("h3", { className: "font-semibold mb-2", children: [
+        oe.length > 0 && /* @__PURE__ */ k("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
+          /* @__PURE__ */ k("h3", { className: "font-semibold mb-2", children: [
             "Selected Seats (",
-            G.length,
+            oe.length,
             ")"
           ] }),
-          /* @__PURE__ */ h("div", { className: "max-h-48 overflow-y-auto space-y-1", children: G.map((t) => /* @__PURE__ */ w("div", { className: "text-sm", children: [
-            t.seatNumber,
-            t.price && ` - ${it.currency} ${t.price.toFixed(2)}`
-          ] }, t.id)) })
+          /* @__PURE__ */ b("div", { className: "max-h-48 overflow-y-auto space-y-1", children: oe.map((e) => /* @__PURE__ */ k("div", { className: "text-sm", children: [
+            e.seatNumber,
+            e.price && ` - ${ue.currency} ${e.price.toFixed(2)}`
+          ] }, e.id)) })
         ] })
       ]
     }
   );
 };
+let ie = null;
+function Rt(t) {
+  ie = t;
+}
+function xe() {
+  if (!ie)
+    throw new Error(
+      "Firebase database not initialized. Call initializeFirebaseForViewer(db) first."
+    );
+  return ie;
+}
+function we() {
+  return ie !== null;
+}
+function Et() {
+  ie = null;
+}
+function Le(t, n) {
+  const s = [], o = [], u = [];
+  return Object.entries(t).forEach(([l, r]) => {
+    r && typeof r == "object" && r.state && (r.state === "unavailable" ? u.push(l) : r.state === "reserved" && (n && r.userId === n ? s.push(l) : o.push(l)));
+  }), { myReservedSeats: s, otherReservedSeats: o, unavailableSeats: u };
+}
+function yt(t) {
+  const { seatMapId: n, currentUserId: s, enabled: o = !0, onStateChange: u, onError: l } = t, [r, S] = M(null), [f, i] = M(!0), [a, d] = M(null), [h, x] = M(null), [m, C] = M([]), [R, E] = M([]), [I, L] = M([]), W = X(u), P = X(l), H = X(s);
+  return W.current = u, P.current = l, H.current = s, T(() => {
+    if (!o || !n) {
+      i(!1);
+      return;
+    }
+    if (!we()) {
+      i(!1), d(new Error("Firebase not initialized. Call initializeFirebaseForViewer first."));
+      return;
+    }
+    const j = xe(), $ = Se(j, `seat_states/${n}`);
+    return i(!0), d(null), Ne($, (O) => {
+      const B = O.val() || {};
+      S(B), i(!1), x(Date.now());
+      const { myReservedSeats: ge, otherReservedSeats: J, unavailableSeats: ce } = Le(B, H.current);
+      C(ge), E(J), L(ce), W.current?.(B);
+    }, (O) => {
+      d(O), i(!1), P.current?.(O);
+    }), () => {
+      ze($);
+    };
+  }, [n, o]), T(() => {
+    if (r) {
+      const { myReservedSeats: j, otherReservedSeats: $, unavailableSeats: ae } = Le(r, s);
+      C(j), E($), L(ae);
+    }
+  }, [s, r]), {
+    states: r,
+    loading: f,
+    error: a,
+    lastUpdated: h,
+    myReservedSeats: m,
+    otherReservedSeats: R,
+    unavailableSeats: I,
+    // Legacy alias
+    reservedSeats: R
+  };
+}
+function vt(t) {
+  const {
+    seatMapId: n,
+    enabled: s = !0,
+    subscribeToChanges: o = !1,
+    onConfigLoad: u,
+    onError: l
+  } = t, [r, S] = M(null), [f, i] = M(!0), [a, d] = M(null), h = X(u), x = X(l);
+  h.current = u, x.current = l;
+  const m = N(async () => {
+    if (!n) return;
+    if (!we()) {
+      d(new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")), i(!1);
+      return;
+    }
+    const C = xe(), R = Se(C, `seatmaps/${n}`);
+    try {
+      i(!0), d(null);
+      const I = (await ut(R)).val();
+      if (I) {
+        const L = ht(I);
+        S(L), h.current?.(L);
+      } else
+        d(new Error(`Seat map ${n} not found in Firebase`));
+    } catch (E) {
+      const I = E instanceof Error ? E : new Error("Unknown error");
+      d(I), x.current?.(I);
+    } finally {
+      i(!1);
+    }
+  }, [n]);
+  return T(() => {
+    if (!s || !n) {
+      i(!1);
+      return;
+    }
+    if (m(), o && we()) {
+      const C = xe(), R = Se(C, `seatmaps/${n}/meta/updated_at`);
+      let E = !0;
+      return Ne(R, (L) => {
+        if (E) {
+          E = !1;
+          return;
+        }
+        L.exists() && m();
+      }), () => {
+        ze(R);
+      };
+    }
+  }, [n, s, o, m]), {
+    config: r,
+    loading: f,
+    error: a,
+    refetch: m
+  };
+}
+function Ft(t) {
+  const {
+    seatMapId: n,
+    userId: s,
+    enabled: o = !0,
+    subscribeToDesignChanges: u = !1,
+    onConfigLoad: l,
+    onStateChange: r,
+    onError: S
+  } = t, {
+    config: f,
+    loading: i,
+    error: a,
+    refetch: d
+  } = vt({
+    seatMapId: n,
+    enabled: o,
+    subscribeToChanges: u,
+    onConfigLoad: l,
+    onError: S
+  }), {
+    states: h,
+    loading: x,
+    error: m,
+    lastUpdated: C,
+    myReservedSeats: R,
+    otherReservedSeats: E,
+    unavailableSeats: I,
+    reservedSeats: L
+  } = yt({
+    seatMapId: n,
+    currentUserId: s,
+    enabled: o,
+    onStateChange: r,
+    onError: S
+  });
+  return {
+    config: f,
+    loading: i || x,
+    error: a || m,
+    myReservedSeats: R,
+    otherReservedSeats: E,
+    unavailableSeats: I,
+    reservedSeats: L,
+    seatStates: h,
+    lastUpdated: C,
+    refetch: d
+  };
+}
 export {
-  se as DEFAULT_COLORS,
-  he as SeatMapViewer,
-  oe as useConfigFetcher,
-  ie as useContainerSize,
-  re as useTouchGestures
+  bt as DEFAULT_COLORS,
+  Mt as SeatMapViewer,
+  Et as clearFirebaseInstance,
+  Rt as initializeFirebaseForViewer,
+  we as isFirebaseInitialized,
+  ft as useConfigFetcher,
+  pt as useContainerSize,
+  vt as useFirebaseConfig,
+  yt as useFirebaseSeatStates,
+  Ft as useRealtimeSeatMap,
+  gt as useTouchGestures
 };