@zonetrix/viewer 2.8.1 → 2.9.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 () => {
+import { jsx as p, jsxs as k } from "react/jsx-runtime";
+import { useState as M, useEffect as Y, useRef as W, useCallback as D, useMemo as $, memo as it } from "react";
+import { Stage as se, Layer as Et, Group as ae, Rect as kt, Text as Ft, Circle as ce } from "react-konva";
+import { ref as mt, onValue as Lt, off as Dt, get as le } from "firebase/database";
+import { fromFirebaseSeatMap as ue } from "@zonetrix/shared";
+function de(e) {
+  const [n, s] = M(null), [o, h] = M(!1), [f, l] = M(null), m = async () => {
     if (e) {
-      m(!0), u(null);
+      h(!0), l(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 u = await fetch(e);
+        if (!u.ok)
+          throw new Error(`Failed to fetch config: ${u.statusText}`);
+        const i = await u.json();
+        s(i);
+      } catch (u) {
+        const i = u instanceof Error ? u : new Error("Unknown error occurred");
+        l(i), console.error("Failed to fetch seat map config:", i);
       } finally {
-        m(!1);
+        h(!1);
       }
     }
   };
-  return T(() => {
-    v();
+  return Y(() => {
+    m();
   }, [e]), {
-    config: i,
-    loading: n,
-    error: y,
-    refetch: v
+    config: n,
+    loading: o,
+    error: f,
+    refetch: m
   };
 }
-function ie(e) {
-  const [i, a] = E({ 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 });
+function he(e) {
+  const [n, s] = M({ width: 0, height: 0 });
+  return Y(() => {
+    const o = e.current;
+    if (!o) return;
+    const { width: h, height: f } = o.getBoundingClientRect();
+    h > 0 && f > 0 && s({ width: h, height: f });
+    const l = new ResizeObserver((m) => {
+      const u = m[0];
+      if (!u) return;
+      const { width: i, height: r } = u.contentRect;
+      i > 0 && r > 0 && s((d) => d.width === i && d.height === r ? d : { width: i, height: r });
     });
-    return u.observe(n), () => {
-      u.disconnect();
+    return l.observe(o), () => {
+      l.disconnect();
     };
-  }, [e]), i;
+  }, [e]), n;
 }
-function St(e, i) {
-  return Math.sqrt(Math.pow(i.x - e.x, 2) + Math.pow(i.y - e.y, 2));
+function It(e, n) {
+  return Math.sqrt(Math.pow(n.x - e.x, 2) + Math.pow(n.y - e.y, 2));
 }
-function wt(e, i) {
+function Rt(e, n) {
   return {
-    x: (e.x + i.x) / 2,
-    y: (e.y + i.y) / 2
+    x: (e.x + n.x) / 2,
+    y: (e.y + n.y) / 2
   };
 }
-function re(e, i) {
-  const a = F(null), n = F(null), m = F(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;
+function fe(e, n) {
+  const s = W(null), o = W(null), h = W(1);
+  Y(() => {
+    const f = e.current;
+    if (!f || !n.enabled) return;
+    const l = f.container(), m = (r) => {
+      if (r.touches.length === 2) {
+        r.preventDefault();
+        const d = { x: r.touches[0].clientX, y: r.touches[0].clientY }, a = { x: r.touches[1].clientX, y: r.touches[1].clientY };
+        s.current = It(d, a), o.current = Rt(d, a), h.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
+    }, u = (r) => {
+      if (r.touches.length !== 2) return;
+      r.preventDefault();
+      const d = { x: r.touches[0].clientX, y: r.touches[0].clientY }, a = { x: r.touches[1].clientX, y: r.touches[1].clientY }, w = It(d, a), S = Rt(d, a);
+      if (s.current !== null && o.current !== null) {
+        const C = w / s.current, F = Math.min(
+          Math.max(n.currentScale * C, n.minScale),
+          n.maxScale
+        ), I = l.getBoundingClientRect(), R = S.x - I.left, z = S.y - I.top, A = n.currentScale, H = {
+          x: (R - n.currentPosition.x) / A,
+          y: (z - n.currentPosition.y) / A
+        }, O = S.x - o.current.x, j = S.y - o.current.y, st = {
+          x: R - H.x * F + O,
+          y: z - H.y * F + j
         };
-        i.onScaleChange(P, lt), a.current = k, n.current = C;
+        n.onScaleChange(F, st), s.current = w, o.current = S;
       }
-    }, s = (o) => {
-      o.touches.length < 2 && (a.current = null, n.current = null);
+    }, i = (r) => {
+      r.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 l.addEventListener("touchstart", m, { passive: !1 }), l.addEventListener("touchmove", u, { passive: !1 }), l.addEventListener("touchend", i), () => {
+      l.removeEventListener("touchstart", m), l.removeEventListener("touchmove", u), l.removeEventListener("touchend", i);
     };
-  }, [e, i]);
+  }, [e, n]);
 }
-const se = {
+const ge = {
   canvasBackground: "#1a1a1a",
   stageColor: "#808080",
   seatAvailable: "#2C2B30",
@@ -101,45 +103,45 @@ 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
+}, Nt = it(({ seat: e, state: n, colors: s, onClick: o, onMouseEnter: h, onMouseLeave: f }) => {
+  const u = {
+    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 = {
+  }[n], i = n === "available" || n === "selected", r = D(() => {
+    i && o(e);
+  }, [e, o, i]), d = D((S) => {
+    h(e, S);
+    const C = S.target.getStage();
+    C && i && (C.container().style.cursor = "pointer");
+  }, [e, h, i]), a = D((S) => {
+    f();
+    const C = S.target.getStage();
+    C && (C.container().style.cursor = "grab");
+  }, [f]), w = {
     x: e.position.x,
     y: e.position.y,
-    fill: x,
+    fill: u,
     stroke: "#ffffff",
     strokeWidth: 1,
-    onClick: o,
-    onTap: o,
-    onMouseEnter: g,
-    onMouseLeave: l
+    onClick: r,
+    onTap: r,
+    onMouseEnter: d,
+    onMouseLeave: a
   };
-  return e.shape === "circle" ? /* @__PURE__ */ h(
-    ne,
+  return e.shape === "circle" ? /* @__PURE__ */ p(
+    ce,
     {
-      ...k,
+      ...w,
       radius: 12
     }
-  ) : /* @__PURE__ */ h(
-    Ct,
+  ) : /* @__PURE__ */ p(
+    kt,
     {
-      ...k,
+      ...w,
       width: 24,
       height: 24,
       offsetX: 12,
@@ -148,9 +150,9 @@ const se = {
     }
   );
 });
-Mt.displayName = "ViewerSeat";
-const kt = Z(({ stage: e, stageColor: i }) => {
-  const a = (y) => ({
+Nt.displayName = "ViewerSeat";
+const zt = it(({ stage: e, stageColor: n }) => {
+  const s = (f) => ({
     stage: "🎭",
     table: "⬜",
     wall: "▬",
@@ -159,23 +161,23 @@ 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,
+  })[f || "stage"] || "🎭", o = e.config.color || n, h = s(e.config.objectType);
+  return /* @__PURE__ */ k(ae, { x: e.position.x, y: e.position.y, rotation: e.config.rotation || 0, children: [
+    /* @__PURE__ */ p(
+      kt,
       {
         width: e.config.width,
         height: e.config.height,
-        fill: n + "80",
+        fill: o + "80",
         stroke: "#ffffff",
         strokeWidth: 2,
         cornerRadius: 10
       }
     ),
-    /* @__PURE__ */ h(
-      vt,
+    /* @__PURE__ */ p(
+      Ft,
       {
-        text: m,
+        text: h,
         x: 0,
         y: 0,
         width: e.config.width,
@@ -186,8 +188,8 @@ const kt = Z(({ stage: e, stageColor: i }) => {
         verticalAlign: "middle"
       }
     ),
-    /* @__PURE__ */ h(
-      vt,
+    /* @__PURE__ */ p(
+      Ft,
       {
         text: e.config.label,
         x: 0,
@@ -203,20 +205,20 @@ const kt = Z(({ stage: e, stageColor: i }) => {
     )
   ] });
 });
-kt.displayName = "ViewerStage";
-const It = Z(({
+zt.displayName = "ViewerStage";
+const Tt = it(({
   floors: e,
-  currentFloorId: i,
-  onFloorChange: a,
-  showAllOption: n,
-  allLabel: m,
-  position: y,
-  className: u
+  currentFloorId: n,
+  onFloorChange: s,
+  showAllOption: o,
+  allLabel: h,
+  position: f,
+  className: l
 }) => {
-  const v = Y(
-    () => [...e].sort((l, k) => l.order - k.order),
+  const m = $(
+    () => [...e].sort((a, w) => a.order - w.order),
     [e]
-  ), s = {
+  ), 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 = {
+    }[f]
+  }, r = {
     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 = {
+    ...r,
     backgroundColor: "#3A7DE5",
     borderColor: "#3A7DE5"
   };
-  return /* @__PURE__ */ w("div", { className: u, style: s, children: [
-    n && /* @__PURE__ */ h(
+  return /* @__PURE__ */ k("div", { className: l, style: i, children: [
+    o && /* @__PURE__ */ p(
       "button",
       {
         type: "button",
-        onClick: () => a(null),
-        style: i === null ? g : o,
-        children: m
+        onClick: () => s(null),
+        style: n === null ? d : r,
+        children: h
       }
     ),
-    v.map((l) => /* @__PURE__ */ h(
+    m.map((a) => /* @__PURE__ */ p(
       "button",
       {
         type: "button",
-        onClick: () => a(l.id),
-        style: i === l.id ? g : o,
-        children: l.name
+        onClick: () => s(a.id),
+        style: n === a.id ? d : r,
+        children: a.name
       },
-      l.id
+      a.id
     ))
   ] });
 });
-It.displayName = "FloorSelectorBar";
-const Nt = Z(({
+Tt.displayName = "FloorSelectorBar";
+const Xt = it(({
   scale: e,
-  minScale: i,
-  maxScale: a,
-  onZoomIn: n,
-  onZoomOut: m,
-  position: y,
-  className: u
+  minScale: n,
+  maxScale: s,
+  onZoomIn: o,
+  onZoomOut: h,
+  position: f,
+  className: l
 }) => {
-  const x = {
+  const u = {
     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 = {
+    }[f]
+  }, 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,
+  }, r = {
+    ...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 = e < s, a = e > n;
+  return /* @__PURE__ */ k("div", { className: l, style: u, children: [
+    /* @__PURE__ */ p(
       "button",
       {
         type: "button",
-        onClick: n,
-        disabled: !g,
-        style: g ? s : o,
+        onClick: o,
+        disabled: !d,
+        style: d ? i : r,
         title: "Zoom In",
         children: "+"
       }
     ),
-    /* @__PURE__ */ h(
+    /* @__PURE__ */ p(
       "button",
       {
         type: "button",
-        onClick: m,
-        disabled: !l,
-        style: l ? s : o,
+        onClick: h,
+        disabled: !a,
+        style: a ? i : r,
         title: "Zoom Out",
         children: "−"
       }
     )
   ] });
 });
-Nt.displayName = "ZoomControls";
-const Dt = Z(({
+Xt.displayName = "ZoomControls";
+const Yt = it(({
   visible: e,
-  x: i,
-  y: a,
-  seat: n,
-  currency: m,
-  state: y
+  x: n,
+  y: s,
+  seat: o,
+  currency: h,
+  state: f
 }) => {
-  if (!e || !n) return null;
-  const u = n.seatNumber || (n.rowLabel && n.columnLabel ? `${n.rowLabel}-${n.columnLabel}` : "N/A"), v = {
+  if (!e || !o) return null;
+  const l = o.seatNumber || (o.rowLabel && o.columnLabel ? `${o.rowLabel}-${o.columnLabel}` : "N/A"), m = {
     position: "fixed",
-    left: `${i + 15}px`,
-    top: `${a + 15}px`,
+    left: `${n + 15}px`,
+    top: `${s + 15}px`,
     zIndex: 1e3,
     pointerEvents: "none"
-  }, x = {
+  }, u = {
     backgroundColor: "rgba(26, 26, 26, 0.95)",
     color: "#fff",
     border: "1px solid #444",
@@ -369,324 +371,479 @@ const Dt = Z(({
     fontSize: "13px",
     boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
     minWidth: "140px"
-  }, s = {
+  }, i = {
     color: "#9ca3af",
     marginRight: "4px"
-  }, o = {
+  }, r = {
     fontWeight: 600
-  }, g = {
+  }, d = {
     color: "#4ade80",
     fontWeight: 600
-  }, l = {
+  }, a = {
     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__ */ p("div", { style: m, children: /* @__PURE__ */ k("div", { style: u, children: [
+    o.sectionName && /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
+      /* @__PURE__ */ p("span", { style: i, children: "Section:" }),
+      /* @__PURE__ */ p("span", { style: { ...r, 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__ */ p("span", { style: i, children: "Seat:" }),
+      /* @__PURE__ */ p("span", { style: r, children: l })
     ] }),
-    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 && f === "available" && /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
+      /* @__PURE__ */ p("span", { style: i, children: "Price:" }),
+      /* @__PURE__ */ k("span", { style: d, children: [
+        h,
         " ",
-        n.price.toFixed(2)
+        o.price.toFixed(2)
       ] })
     ] }),
-    /* @__PURE__ */ w("div", { style: l, children: [
+    /* @__PURE__ */ k("div", { style: a, children: [
       "Status: ",
-      y
+      f
     ] })
   ] }) });
 });
-Dt.displayName = "SeatTooltip";
-const he = ({
+Yt.displayName = "SeatTooltip";
+const we = ({
   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 = "",
-  onConfigLoad: C,
-  onError: D,
+  configUrl: n,
+  floorId: s,
+  onFloorChange: o,
+  reservedSeats: h = [],
+  unavailableSeats: f = [],
+  selectedSeats: l,
+  onSeatSelect: m,
+  onSeatDeselect: u,
+  onSelectionChange: i,
+  colorOverrides: r,
+  showTooltip: d = !0,
+  zoomEnabled: a = !0,
+  className: w = "",
+  onConfigLoad: S,
+  onError: C,
   // Floor selector props
-  showFloorSelector: P,
-  floorSelectorPosition: K = "top-left",
-  floorSelectorClassName: J,
-  showAllFloorsOption: Q = !0,
-  allFloorsLabel: tt = "All",
-  fitToView: z = !0,
-  fitPadding: $ = 40,
+  showFloorSelector: F,
+  floorSelectorPosition: I = "top-left",
+  floorSelectorClassName: R,
+  showAllFloorsOption: z = !0,
+  allFloorsLabel: A = "All",
+  fitToView: H = !0,
+  fitPadding: O = 40,
   // Zoom controls
-  showZoomControls: at = !0,
-  zoomControlsPosition: lt = "bottom-right",
-  zoomControlsClassName: Rt,
-  minZoom: gt,
-  maxZoom: L = 3,
-  zoomStep: et = 0.25,
+  showZoomControls: j = !0,
+  zoomControlsPosition: st = "bottom-right",
+  zoomControlsClassName: G,
+  minZoom: Z,
+  maxZoom: T = 3,
+  zoomStep: B = 0.25,
   // Touch gestures
-  touchEnabled: Et = !0
+  touchEnabled: at = !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"
+  const gt = W(null), wt = W(null), E = he(wt), [U, Ct] = M(/* @__PURE__ */ new Set()), [L, K] = M(1), [N, V] = M({ x: 0, y: 0 }), [Wt, jt] = M(null), [Pt, $t] = M(1), ct = W({ width: 0, height: 0 }), [J, Mt] = M({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: At, loading: Bt, error: Q } = de(n), g = e || At, pt = s !== void 0, X = pt ? s || null : Wt, lt = l !== void 0, Vt = D((t) => {
+    pt || jt(t), o?.(t);
+  }, [pt, o]), bt = g?.floors || [], Ht = F !== void 0 ? F : bt.length > 1, ut = $(
+    () => g ? { ...g.colors, ...r } : { ...ge, ...r },
+    [g, r]
+  ), _ = $(() => {
+    if (!g) return [];
+    let t = g.seats.filter((c) => c.state !== "hidden");
+    return X && (t = t.filter(
+      (c) => c.floorId === X || !c.floorId && X === "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)
+  }, [g, X]), dt = $(() => g?.stages ? X ? g.stages.filter(
+    (t) => t.floorId === X || !t.floorId && X === "floor_default"
+  ) : g.stages : [], [g, X]), P = $(() => {
+    if (!g || _.length === 0 && dt.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]);
-  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]);
-  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")
+    let c = 1 / 0, y = 1 / 0, b = -1 / 0, x = -1 / 0;
+    return _.forEach((v) => {
+      c = Math.min(c, v.position.x - t), y = Math.min(y, v.position.y - t), b = Math.max(b, v.position.x + t), x = Math.max(x, v.position.y + t);
+    }), dt.forEach((v) => {
+      c = Math.min(c, v.position.x), y = Math.min(y, v.position.y), b = Math.max(b, v.position.x + (v.config?.width || 200)), x = Math.max(x, v.position.y + (v.config?.height || 100));
+    }), { minX: c, minY: y, maxX: b, maxY: x, width: b - c, height: x - y };
+  }, [g, _, dt]);
+  Y(() => {
+    if (!H || !g || !P || E.width === 0 || E.height === 0) return;
+    const t = Math.abs(E.width - ct.current.width), c = Math.abs(E.height - ct.current.height);
+    if (!(ct.current.width === 0) && t < 10 && c < 10) return;
+    ct.current = E;
+    const b = E.width, x = E.height, v = b - O * 2, ot = x - O * 2, ht = v / P.width, xt = ot / P.height, ft = Math.min(ht, xt, T), te = P.minX + P.width / 2, ee = P.minY + P.height / 2, ne = b / 2, oe = x / 2, re = ne - te * ft, ie = oe - ee * ft;
+    K(ft), V({ x: re, y: ie }), $t(ft);
+  }, [H, g, P, O, T, E, X]);
+  const tt = $(() => {
+    const t = new Set(h), c = new Set(f);
+    return { reserved: t, unavailable: c };
+  }, [h, f]), yt = $(() => l ? new Set(l) : null, [l]), et = D((t) => {
+    const c = t.id, y = t.seatNumber || "";
+    return tt.unavailable.has(c) || tt.unavailable.has(y) ? "unavailable" : tt.reserved.has(c) || tt.reserved.has(y) ? "reserved" : U.has(c) ? "selected" : t.state;
+  }, [tt, U]);
+  Y(() => {
+    g && S && S(g);
+  }, [g, S]), Y(() => {
+    Q && C && C(Q);
+  }, [Q, C]), Y(() => {
+    lt && yt && Ct(yt);
+  }, [lt, yt]);
+  const Ot = D((t) => {
+    const c = et(t);
+    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]);
-  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
+    const y = U.has(t.id);
+    lt || Ct((b) => {
+      const x = new Set(b);
+      return y ? x.delete(t.id) : x.add(t.id), x;
+    }), y ? u?.(t) : (m?.(t), m || console.log("Seat selected:", t));
+  }, [et, U, lt, m, u]), nt = $(() => g ? _.filter((t) => U.has(t.id)) : [], [_, U]);
+  Y(() => {
+    i?.(nt);
+  }, [nt, i]);
+  const q = Z !== void 0 ? Z : Pt, Ut = D(() => {
+    if (!a) return;
+    const t = Math.min(L + B, T);
+    if (t !== L) {
+      const c = E.width || g?.canvas.width || 800, y = E.height || g?.canvas.height || 600, b = c / 2, x = y / 2, v = {
+        x: (b - N.x) / L,
+        y: (x - N.y) / L
       };
-      H(t), W({
-        x: d - b.x * t,
-        y: p - b.y * t
+      K(t), V({
+        x: b - v.x * t,
+        y: x - v.y * t
       });
     }
-  }, [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
+  }, [a, L, B, T, E, g, N]), _t = D(() => {
+    if (!a) return;
+    const t = Math.max(L - B, q);
+    if (t !== L) {
+      const c = E.width || g?.canvas.width || 800, y = E.height || g?.canvas.height || 600, b = c / 2, x = y / 2, v = {
+        x: (b - N.x) / L,
+        y: (x - N.y) / L
       };
-      H(t), W({
-        x: d - b.x * t,
-        y: p - b.y * t
+      K(t), V({
+        x: b - v.x * t,
+        y: x - v.y * t
       });
     }
-  }, [l, M, et, B, S, c, I]), $t = N((t) => {
-    W({
+  }, [a, L, B, q, E, g, N]), qt = D((t) => {
+    V({
       x: t.target.x(),
       y: t.target.y()
     });
-  }, []), Ht = N((t) => {
-    if (!l) return;
+  }, []), Gt = D((t) => {
+    if (!a) 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
+    const c = gt.current;
+    if (!c) return;
+    const y = c.scaleX(), b = c.getPointerPosition();
+    if (!b) return;
+    const x = 1.1, v = t.evt.deltaY > 0 ? y / x : y * x, ot = Math.min(Math.max(v, q), T), ht = {
+      x: (b.x - N.x) / y,
+      y: (b.y - N.y) / y
+    }, xt = {
+      x: b.x - ht.x * ot,
+      y: b.y - ht.y * ot
     };
-    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);
+    K(ot), V(xt);
+  }, [a, N, q, T]);
+  fe(gt, {
+    enabled: at && a,
+    minScale: q,
+    maxScale: T,
+    currentScale: L,
+    currentPosition: N,
+    onScaleChange: (t, c) => {
+      K(t), V(c);
     },
     onPositionChange: (t) => {
-      W(t);
+      V(t);
     }
   });
-  const Ot = N((t, r) => {
-    if (!g) return;
-    const f = r.target.getStage();
-    if (!f) return;
-    const d = f.getPointerPosition();
+  const Zt = D((t, c) => {
     if (!d) return;
-    const p = f.container().getBoundingClientRect();
-    mt({
+    const y = c.target.getStage();
+    if (!y) return;
+    const b = y.getPointerPosition();
+    if (!b) return;
+    const x = y.container().getBoundingClientRect();
+    Mt({
       visible: !0,
-      x: p.left + d.x,
-      y: p.top + d.y,
+      x: x.left + b.x,
+      y: x.top + b.y,
       seat: t,
-      state: q(t)
+      state: et(t)
     });
-  }, [g, q]), Vt = N(() => {
-    mt((t) => ({ ...t, visible: !1 }));
+  }, [d, et]), Kt = D(() => {
+    Mt((t) => ({ ...t, 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 (Bt)
+    return /* @__PURE__ */ p("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ p("p", { children: "Loading seat map..." }) });
+  if (Q)
+    return /* @__PURE__ */ p("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ k("p", { className: "text-red-500", children: [
       "Error loading seat map: ",
-      V.message
+      Q.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 (!g)
+    return /* @__PURE__ */ p("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ p("p", { children: "No configuration provided" }) });
+  const Jt = E.width || g.canvas.width, Qt = E.height || g.canvas.height;
+  return /* @__PURE__ */ k(
     "div",
     {
-      ref: yt,
-      className: `relative ${k}`,
+      ref: wt,
+      className: `relative ${w}`,
       style: { width: "100%", height: "100%" },
       children: [
-        At && ut.length > 0 && /* @__PURE__ */ h(
-          It,
+        Ht && bt.length > 0 && /* @__PURE__ */ p(
+          Tt,
           {
-            floors: ut,
-            currentFloorId: R,
-            onFloorChange: jt,
-            showAllOption: Q,
-            allLabel: tt,
-            position: K,
-            className: J
+            floors: bt,
+            currentFloorId: X,
+            onFloorChange: Vt,
+            showAllOption: z,
+            allLabel: A,
+            position: I,
+            className: R
           }
         ),
-        /* @__PURE__ */ w(
-          te,
+        /* @__PURE__ */ k(
+          se,
           {
-            ref: ht,
-            width: _t,
-            height: qt,
-            scaleX: M,
-            scaleY: M,
-            x: I.x,
-            y: I.y,
+            ref: gt,
+            width: Jt,
+            height: Qt,
+            scaleX: L,
+            scaleY: L,
+            x: N.x,
+            y: N.y,
             draggable: !0,
-            onDragEnd: $t,
-            onWheel: Ht,
-            style: { backgroundColor: c.canvas.backgroundColor, cursor: "grab" },
+            onDragEnd: qt,
+            onWheel: Gt,
+            style: { backgroundColor: g.canvas.backgroundColor, cursor: "grab" },
             children: [
-              /* @__PURE__ */ h(bt, { listening: !1, children: rt.map((t) => /* @__PURE__ */ h(
-                kt,
+              /* @__PURE__ */ p(Et, { listening: !1, children: dt.map((t) => /* @__PURE__ */ p(
+                zt,
                 {
                   stage: t,
-                  stageColor: it.stageColor
+                  stageColor: ut.stageColor
                 },
                 t.id
               )) }),
-              /* @__PURE__ */ h(bt, { children: A.map((t) => /* @__PURE__ */ h(
-                Mt,
+              /* @__PURE__ */ p(Et, { children: _.map((t) => /* @__PURE__ */ p(
+                Nt,
                 {
                   seat: t,
-                  state: q(t),
-                  colors: it,
-                  onClick: Bt,
-                  onMouseEnter: Ot,
-                  onMouseLeave: Vt
+                  state: et(t),
+                  colors: ut,
+                  onClick: Ot,
+                  onMouseEnter: Zt,
+                  onMouseLeave: Kt
                 },
                 t.id
               )) })
             ]
           }
         ),
-        g && /* @__PURE__ */ h(
-          Dt,
+        d && /* @__PURE__ */ p(
+          Yt,
           {
-            visible: O.visible,
-            x: O.x,
-            y: O.y,
-            seat: O.seat,
-            currency: it.currency,
-            state: O.state
+            visible: J.visible,
+            x: J.x,
+            y: J.y,
+            seat: J.seat,
+            currency: ut.currency,
+            state: J.state
           }
         ),
-        at && l && /* @__PURE__ */ h(
-          Nt,
+        j && a && /* @__PURE__ */ p(
+          Xt,
           {
-            scale: M,
-            minScale: B,
-            maxScale: L,
-            onZoomIn: Ft,
-            onZoomOut: zt,
-            position: lt,
-            className: Rt
+            scale: L,
+            minScale: q,
+            maxScale: T,
+            onZoomIn: Ut,
+            onZoomOut: _t,
+            position: st,
+            className: G
           }
         ),
-        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: [
+        nt.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,
+            nt.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: [
+          /* @__PURE__ */ p("div", { className: "max-h-48 overflow-y-auto space-y-1", children: nt.map((t) => /* @__PURE__ */ k("div", { className: "text-sm", children: [
             t.seatNumber,
-            t.price && ` - ${it.currency} ${t.price.toFixed(2)}`
+            t.price && ` - ${ut.currency} ${t.price.toFixed(2)}`
           ] }, t.id)) })
         ] })
       ]
     }
   );
 };
+let rt = null;
+function Ce(e) {
+  rt = e;
+}
+function St() {
+  if (!rt)
+    throw new Error(
+      "Firebase database not initialized. Call initializeFirebaseForViewer(db) first."
+    );
+  return rt;
+}
+function vt() {
+  return rt !== null;
+}
+function Me() {
+  rt = null;
+}
+function pe(e) {
+  const { seatMapId: n, enabled: s = !0, onStateChange: o, onError: h } = e, [f, l] = M(null), [m, u] = M(!0), [i, r] = M(null), [d, a] = M(null), [w, S] = M([]), [C, F] = M([]), I = W(o), R = W(h);
+  return I.current = o, R.current = h, Y(() => {
+    if (!s || !n) {
+      u(!1);
+      return;
+    }
+    if (!vt()) {
+      u(!1), r(new Error("Firebase not initialized. Call initializeFirebaseForViewer first."));
+      return;
+    }
+    const z = St(), A = mt(z, `seat_states/${n}`);
+    return u(!0), r(null), Lt(A, (j) => {
+      const G = j.val() || {};
+      l(G), u(!1), a(Date.now());
+      const Z = [], T = [];
+      Object.entries(G).forEach(([B, at]) => {
+        at === "reserved" ? Z.push(B) : at === "unavailable" && T.push(B);
+      }), S(Z), F(T), I.current?.(G);
+    }, (j) => {
+      r(j), u(!1), R.current?.(j);
+    }), () => {
+      Dt(A);
+    };
+  }, [n, s]), {
+    states: f,
+    loading: m,
+    error: i,
+    lastUpdated: d,
+    reservedSeats: w,
+    unavailableSeats: C
+  };
+}
+function be(e) {
+  const {
+    seatMapId: n,
+    enabled: s = !0,
+    subscribeToChanges: o = !1,
+    onConfigLoad: h,
+    onError: f
+  } = e, [l, m] = M(null), [u, i] = M(!0), [r, d] = M(null), a = W(h), w = W(f);
+  a.current = h, w.current = f;
+  const S = D(async () => {
+    if (!n) return;
+    if (!vt()) {
+      d(new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")), i(!1);
+      return;
+    }
+    const C = St(), F = mt(C, `seatmaps/${n}`);
+    try {
+      i(!0), d(null);
+      const R = (await le(F)).val();
+      if (R) {
+        const z = ue(R);
+        m(z), a.current?.(z);
+      } else
+        d(new Error(`Seat map ${n} not found in Firebase`));
+    } catch (I) {
+      const R = I instanceof Error ? I : new Error("Unknown error");
+      d(R), w.current?.(R);
+    } finally {
+      i(!1);
+    }
+  }, [n]);
+  return Y(() => {
+    if (!s || !n) {
+      i(!1);
+      return;
+    }
+    if (S(), o && vt()) {
+      const C = St(), F = mt(C, `seatmaps/${n}/meta/updated_at`);
+      let I = !0;
+      return Lt(F, (z) => {
+        if (I) {
+          I = !1;
+          return;
+        }
+        z.exists() && S();
+      }), () => {
+        Dt(F);
+      };
+    }
+  }, [n, s, o, S]), {
+    config: l,
+    loading: u,
+    error: r,
+    refetch: S
+  };
+}
+function Ee(e) {
+  const {
+    seatMapId: n,
+    enabled: s = !0,
+    subscribeToDesignChanges: o = !1,
+    onConfigLoad: h,
+    onStateChange: f,
+    onError: l
+  } = e, {
+    config: m,
+    loading: u,
+    error: i,
+    refetch: r
+  } = be({
+    seatMapId: n,
+    enabled: s,
+    subscribeToChanges: o,
+    onConfigLoad: h,
+    onError: l
+  }), {
+    states: d,
+    loading: a,
+    error: w,
+    lastUpdated: S,
+    reservedSeats: C,
+    unavailableSeats: F
+  } = pe({
+    seatMapId: n,
+    enabled: s,
+    onStateChange: f,
+    onError: l
+  });
+  return {
+    config: m,
+    loading: u || a,
+    error: i || w,
+    reservedSeats: C,
+    unavailableSeats: F,
+    seatStates: d,
+    lastUpdated: S,
+    refetch: r
+  };
+}
 export {
-  se as DEFAULT_COLORS,
-  he as SeatMapViewer,
-  oe as useConfigFetcher,
-  ie as useContainerSize,
-  re as useTouchGestures
+  ge as DEFAULT_COLORS,
+  we as SeatMapViewer,
+  Me as clearFirebaseInstance,
+  Ce as initializeFirebaseForViewer,
+  vt as isFirebaseInitialized,
+  de as useConfigFetcher,
+  he as useContainerSize,
+  be as useFirebaseConfig,
+  pe as useFirebaseSeatStates,
+  Ee as useRealtimeSeatMap,
+  fe as useTouchGestures
 };