@zonetrix/viewer 2.10.0 → 2.10.2

package/dist/index.mjs

@@ -1,54 +1,54 @@
-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 () => {
+import { jsx as y, jsxs as D } from "react/jsx-runtime";
+import { useState as R, useEffect as Y, useRef as T, useCallback as N, useMemo as _, memo as ce } from "react";
+import { Stage as dt, Layer as Fe, Group as ut, Rect as Te, Text as Ie, Circle as ht } from "react-konva";
+import { ref as we, onValue as ze, off as Ae, get as ft } from "firebase/database";
+import { fromFirebaseSeatMap as gt } from "@zonetrix/shared";
+function pt(t) {
+  const [n, o] = R(null), [r, u] = R(!1), [l, s] = R(null), x = async () => {
     if (t) {
-      u(!0), r(null);
+      u(!0), s(null);
       try {
         const f = await fetch(t);
         if (!f.ok)
           throw new Error(`Failed to fetch config: ${f.statusText}`);
         const i = await f.json();
-        s(i);
+        o(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);
+        s(i), console.error("Failed to fetch seat map config:", i);
       } finally {
         u(!1);
       }
     }
   };
-  return T(() => {
-    S();
+  return Y(() => {
+    x();
   }, [t]), {
     config: n,
-    loading: o,
+    loading: r,
     error: l,
-    refetch: S
+    refetch: x
   };
 }
-function pt(t) {
-  const [n, s] = M({ width: 0, height: 0 });
-  return T(() => {
-    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];
+function yt(t) {
+  const [n, o] = R({ width: 0, height: 0 });
+  return Y(() => {
+    const r = t.current;
+    if (!r) return;
+    const { width: u, height: l } = r.getBoundingClientRect();
+    u > 0 && l > 0 && o({ width: u, height: l });
+    const s = new ResizeObserver((x) => {
+      const f = x[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 });
+      i > 0 && a > 0 && o((d) => d.width === i && d.height === a ? d : { width: i, height: a });
     });
-    return r.observe(o), () => {
-      r.disconnect();
+    return s.observe(r), () => {
+      s.disconnect();
     };
   }, [t]), n;
 }
-function Ie(t, n) {
+function De(t, n) {
   return Math.sqrt(Math.pow(n.x - t.x, 2) + Math.pow(n.y - t.y, 2));
 }
 function ke(t, n) {
@@ -57,43 +57,43 @@ function ke(t, n) {
     y: (t.y + n.y) / 2
   };
 }
-function gt(t, n) {
-  const s = X(null), o = X(null), u = X(1);
-  T(() => {
+function bt(t, n) {
+  const o = T(null), r = T(null), u = T(1);
+  Y(() => {
     const l = t.current;
     if (!l || !n.enabled) return;
-    const r = l.container(), S = (a) => {
+    const s = l.container(), x = (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;
+        o.current = De(d, h), r.current = ke(d, h), u.current = n.currentScale;
       }
     }, 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(
+      const d = { x: a.touches[0].clientX, y: a.touches[0].clientY }, h = { x: a.touches[1].clientX, y: a.touches[1].clientY }, m = De(d, h), S = ke(d, h);
+      if (o.current !== null && r.current !== null) {
+        const C = m / o.current, F = 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 = s.getBoundingClientRect(), M = S.x - I.left, L = S.y - I.top, z = n.currentScale, X = {
+          x: (M - n.currentPosition.x) / z,
+          y: (L - n.currentPosition.y) / z
+        }, q = S.x - r.current.x, j = S.y - r.current.y, Z = {
+          x: M - X.x * F + q,
+          y: L - X.y * F + j
         };
-        n.onScaleChange(R, $), s.current = x, o.current = m;
+        n.onScaleChange(F, Z), o.current = m, r.current = S;
       }
     }, i = (a) => {
-      a.touches.length < 2 && (s.current = null, o.current = null);
+      a.touches.length < 2 && (o.current = null, r.current = null);
     };
-    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);
+    return s.addEventListener("touchstart", x, { passive: !1 }), s.addEventListener("touchmove", f, { passive: !1 }), s.addEventListener("touchend", i), () => {
+      s.removeEventListener("touchstart", x), s.removeEventListener("touchmove", f), s.removeEventListener("touchend", i);
     };
   }, [t, n]);
 }
-const bt = {
+const vt = {
   canvasBackground: "#1a1a1a",
   stageColor: "#808080",
   seatAvailable: "#2C2B30",
@@ -103,25 +103,25 @@ const bt = {
   seatHidden: "#4a4a4a",
   gridLines: "#404040",
   currency: "KD"
-}, Te = se(({ seat: t, state: n, colors: s, onClick: o, onMouseEnter: u, onMouseLeave: l }) => {
+}, Xe = ce(({ seat: t, state: n, colors: o, onClick: r, onMouseEnter: u, onMouseLeave: l }) => {
   const f = {
-    available: s.seatAvailable,
-    reserved: s.seatReserved,
-    selected: s.seatSelected,
-    unavailable: s.seatUnavailable,
-    hidden: s.seatHidden
+    available: o.seatAvailable,
+    reserved: o.seatReserved,
+    selected: o.seatSelected,
+    unavailable: o.seatUnavailable,
+    hidden: o.seatHidden
     // Hidden seats are filtered out, but included for type safety
   }[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();
+    i && r(t);
+  }, [t, r, i]), d = N((S) => {
+    u(t, S);
+    const C = S.target.getStage();
     C && i && (C.container().style.cursor = "pointer");
-  }, [t, u, i]), h = N((m) => {
+  }, [t, u, i]), h = N((S) => {
     l();
-    const C = m.target.getStage();
+    const C = S.target.getStage();
     C && (C.container().style.cursor = "grab");
-  }, [l]), x = {
+  }, [l]), m = {
     x: t.position.x,
     y: t.position.y,
     fill: f,
@@ -132,16 +132,16 @@ const bt = {
     onMouseEnter: d,
     onMouseLeave: h
   };
-  return t.shape === "circle" ? /* @__PURE__ */ b(
-    dt,
+  return t.shape === "circle" ? /* @__PURE__ */ y(
+    ht,
     {
-      ...x,
+      ...m,
       radius: 12
     }
-  ) : /* @__PURE__ */ b(
-    De,
+  ) : /* @__PURE__ */ y(
+    Te,
     {
-      ...x,
+      ...m,
       width: 24,
       height: 24,
       offsetX: 12,
@@ -150,9 +150,9 @@ const bt = {
     }
   );
 });
-Te.displayName = "ViewerSeat";
-const Xe = se(({ stage: t, stageColor: n }) => {
-  const s = (l) => ({
+Xe.displayName = "ViewerSeat";
+const Ye = ce(({ stage: t, stageColor: n }) => {
+  const o = (l) => ({
     stage: "🎭",
     table: "⬜",
     wall: "▬",
@@ -161,21 +161,21 @@ const Xe = se(({ stage: t, stageColor: n }) => {
     bar: "🍷",
     "entry-exit": "🚪",
     custom: "➕"
-  })[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,
+  })[l || "stage"] || "🎭", r = t.config.color || n, u = o(t.config.objectType);
+  return /* @__PURE__ */ D(ut, { x: t.position.x, y: t.position.y, rotation: t.config.rotation || 0, children: [
+    /* @__PURE__ */ y(
+      Te,
       {
         width: t.config.width,
         height: t.config.height,
-        fill: o + "80",
+        fill: r + "80",
         stroke: "#ffffff",
         strokeWidth: 2,
         cornerRadius: 10
       }
     ),
-    /* @__PURE__ */ b(
-      Fe,
+    /* @__PURE__ */ y(
+      Ie,
       {
         text: u,
         x: 0,
@@ -188,8 +188,8 @@ const Xe = se(({ stage: t, stageColor: n }) => {
         verticalAlign: "middle"
       }
     ),
-    /* @__PURE__ */ b(
-      Fe,
+    /* @__PURE__ */ y(
+      Ie,
       {
         text: t.config.label,
         x: 0,
@@ -205,18 +205,18 @@ const Xe = se(({ stage: t, stageColor: n }) => {
     )
   ] });
 });
-Xe.displayName = "ViewerStage";
-const Ye = se(({
+Ye.displayName = "ViewerStage";
+const je = ce(({
   floors: t,
   currentFloorId: n,
-  onFloorChange: s,
-  showAllOption: o,
+  onFloorChange: o,
+  showAllOption: r,
   allLabel: u,
   position: l,
-  className: r
+  className: s
 }) => {
-  const S = V(
-    () => [...t].sort((h, x) => h.order - x.order),
+  const x = _(
+    () => [...t].sort((h, m) => h.order - m.order),
     [t]
   ), i = {
     position: "absolute",
@@ -251,21 +251,21 @@ const Ye = se(({
     backgroundColor: "#3A7DE5",
     borderColor: "#3A7DE5"
   };
-  return /* @__PURE__ */ k("div", { className: r, style: i, children: [
-    o && /* @__PURE__ */ b(
+  return /* @__PURE__ */ D("div", { className: s, style: i, children: [
+    r && /* @__PURE__ */ y(
       "button",
       {
         type: "button",
-        onClick: () => s(null),
+        onClick: () => o(null),
         style: n === null ? d : a,
         children: u
       }
     ),
-    S.map((h) => /* @__PURE__ */ b(
+    x.map((h) => /* @__PURE__ */ y(
       "button",
       {
         type: "button",
-        onClick: () => s(h.id),
+        onClick: () => o(h.id),
         style: n === h.id ? d : a,
         children: h.name
       },
@@ -273,15 +273,15 @@ const Ye = se(({
     ))
   ] });
 });
-Ye.displayName = "FloorSelectorBar";
-const je = se(({
+je.displayName = "FloorSelectorBar";
+const We = ce(({
   scale: t,
   minScale: n,
-  maxScale: s,
-  onZoomIn: o,
+  maxScale: o,
+  onZoomIn: r,
   onZoomOut: u,
   position: l,
-  className: r
+  className: s
 }) => {
   const f = {
     position: "absolute",
@@ -320,20 +320,20 @@ const je = se(({
     ...i,
     opacity: 0.4,
     cursor: "not-allowed"
-  }, d = t < s, h = t > n;
-  return /* @__PURE__ */ k("div", { className: r, style: f, children: [
-    /* @__PURE__ */ b(
+  }, d = t < o, h = t > n;
+  return /* @__PURE__ */ D("div", { className: s, style: f, children: [
+    /* @__PURE__ */ y(
       "button",
       {
         type: "button",
-        onClick: o,
+        onClick: r,
         disabled: !d,
         style: d ? i : a,
         title: "Zoom In",
         children: "+"
       }
     ),
-    /* @__PURE__ */ b(
+    /* @__PURE__ */ y(
       "button",
       {
         type: "button",
@@ -346,20 +346,20 @@ const je = se(({
     )
   ] });
 });
-je.displayName = "ZoomControls";
-const Ae = se(({
+We.displayName = "ZoomControls";
+const Pe = ce(({
   visible: t,
   x: n,
-  y: s,
-  seat: o,
+  y: o,
+  seat: r,
   currency: u,
   state: l
 }) => {
-  if (!t || !o) return null;
-  const r = o.seatNumber || (o.rowLabel && o.columnLabel ? `${o.rowLabel}-${o.columnLabel}` : "N/A"), S = {
+  if (!t || !r) return null;
+  const s = r.seatNumber || (r.rowLabel && r.columnLabel ? `${r.rowLabel}-${r.columnLabel}` : "N/A"), x = {
     position: "fixed",
     left: `${n + 15}px`,
-    top: `${s + 15}px`,
+    top: `${o + 15}px`,
     zIndex: 1e3,
     pointerEvents: "none"
   }, f = {
@@ -385,468 +385,482 @@ const Ae = se(({
     textTransform: "capitalize",
     marginTop: "4px"
   };
-  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 })
+  return /* @__PURE__ */ y("div", { style: x, children: /* @__PURE__ */ D("div", { style: f, children: [
+    r.sectionName && /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
+      /* @__PURE__ */ y("span", { style: i, children: "Section:" }),
+      /* @__PURE__ */ y("span", { style: { ...a, color: "#3b82f6" }, children: r.sectionName })
     ] }),
-    /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
-      /* @__PURE__ */ b("span", { style: i, children: "Seat:" }),
-      /* @__PURE__ */ b("span", { style: a, children: r })
+    /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
+      /* @__PURE__ */ y("span", { style: i, children: "Seat:" }),
+      /* @__PURE__ */ y("span", { style: a, children: s })
     ] }),
-    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: [
+    r.price !== void 0 && r.price > 0 && l === "available" && /* @__PURE__ */ D("div", { style: { marginBottom: "4px" }, children: [
+      /* @__PURE__ */ y("span", { style: i, children: "Price:" }),
+      /* @__PURE__ */ D("span", { style: d, children: [
         u,
         " ",
-        o.price.toFixed(2)
+        r.price.toFixed(2)
       ] })
     ] }),
-    /* @__PURE__ */ k("div", { style: h, children: [
+    /* @__PURE__ */ D("div", { style: h, children: [
       "Status: ",
       l
     ] })
   ] }) });
 });
-Ae.displayName = "SeatTooltip";
-const Mt = ({
+Pe.displayName = "SeatTooltip";
+const Et = ({
   config: t,
   configUrl: n,
-  floorId: s,
-  onFloorChange: o,
+  floorId: o,
+  onFloorChange: r,
   reservedSeats: u = [],
   unavailableSeats: l = [],
-  selectedSeats: r,
-  myReservedSeats: S = [],
+  selectedSeats: s,
+  myReservedSeats: x = [],
   onSeatSelect: f,
   onSeatDeselect: i,
   onSelectionChange: a,
   colorOverrides: d,
   showTooltip: h = !0,
-  zoomEnabled: x = !0,
-  className: m = "",
+  zoomEnabled: m = !0,
+  className: S = "",
   onConfigLoad: C,
-  onError: R,
+  onError: F,
   // Floor selector props
-  showFloorSelector: E,
-  floorSelectorPosition: I = "top-left",
+  showFloorSelector: I,
+  floorSelectorPosition: M = "top-left",
   floorSelectorClassName: L,
-  showAllFloorsOption: W = !0,
-  allFloorsLabel: P = "All",
-  fitToView: H = !0,
+  showAllFloorsOption: z = !0,
+  allFloorsLabel: X = "All",
+  fitToView: q = !0,
   fitPadding: j = 40,
   // Zoom controls
-  showZoomControls: $ = !0,
-  zoomControlsPosition: ae = "bottom-right",
-  zoomControlsClassName: Ce,
-  minZoom: O,
-  maxZoom: A = 3,
+  showZoomControls: Z = !0,
+  zoomControlsPosition: P = "bottom-right",
+  zoomControlsClassName: K,
+  minZoom: le,
+  maxZoom: $ = 3,
   zoomStep: B = 0.25,
   // Touch gestures
-  touchEnabled: ge = !0
+  touchEnabled: Me = !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"
+  const O = T(null), V = T(null), E = yt(V), [U, ye] = R(/* @__PURE__ */ new Set()), [k, te] = R(1), [A, G] = R({ x: 0, y: 0 }), [$e, Be] = R(null), [Oe, Ue] = R(1), de = T({ width: 0, height: 0 }), [ne, Ee] = R({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: Ve, loading: He, error: re } = pt(n), g = t || Ve, be = o !== void 0, W = be ? o || null : $e, ue = s !== void 0, _e = N((e) => {
+    be || Be(e), r?.(e);
+  }, [be, r]), ve = g?.floors || [], qe = I !== void 0 ? I : ve.length > 1, he = _(
+    () => g ? { ...g.colors, ...d } : { ...vt, ...d },
+    [g, d]
+  ), Q = _(() => {
+    if (!g) return [];
+    let e = g.seats.filter((c) => c.state !== "hidden");
+    return W && (e = e.filter(
+      (c) => c.floorId === W || !c.floorId && W === "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)
+  }, [g, W]), fe = _(() => g?.stages ? W ? g.stages.filter(
+    (e) => e.floorId === W || !e.floorId && W === "floor_default"
+  ) : g.stages : [], [g, W]), H = _(() => {
+    if (!g || Q.length === 0 && fe.length === 0)
       return null;
     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 (!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(() => {
-    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);
+    let c = 1 / 0, p = 1 / 0, b = -1 / 0, v = -1 / 0;
+    return Q.forEach((w) => {
+      c = Math.min(c, w.position.x - e), p = Math.min(p, w.position.y - e), b = Math.max(b, w.position.x + e), v = Math.max(v, w.position.y + e);
+    }), fe.forEach((w) => {
+      c = Math.min(c, w.position.x), p = Math.min(p, w.position.y), b = Math.max(b, w.position.x + (w.config?.width || 200)), v = Math.max(v, w.position.y + (w.config?.height || 100));
+    }), { minX: c, minY: p, maxX: b, maxY: v, width: b - c, height: v - p };
+  }, [g, Q, fe]);
+  Y(() => {
+    if (!q || !g || !H || E.width === 0 || E.height === 0) return;
+    const e = Math.abs(E.width - de.current.width), c = Math.abs(E.height - de.current.height);
+    if (!(de.current.width === 0) && e < 10 && c < 10) return;
+    de.current = E;
+    const b = E.width, v = E.height, w = b - j * 2, se = v - j * 2, ge = w / H.width, xe = se / H.height, pe = Math.min(ge, xe, $), ot = H.minX + H.width / 2, it = H.minY + H.height / 2, st = b / 2, at = v / 2, ct = st - ot * pe, lt = at - it * pe;
+    te(pe), G({ x: ct, y: lt }), Ue(pe);
+  }, [q, g, H, j, $, E, W]);
+  const J = _(() => {
+    const e = new Set(u), c = new Set(l), p = new Set(x);
+    return { reserved: e, unavailable: c, myReserved: p };
+  }, [u, l, x]), me = _(() => s ? new Set(s) : null, [s]), oe = N((e) => {
+    const c = e.id, p = e.seatNumber || "";
+    return J.unavailable.has(c) || J.unavailable.has(p) ? "unavailable" : J.reserved.has(c) || J.reserved.has(p) ? "reserved" : J.myReserved.has(c) || J.myReserved.has(p) || U.has(c) ? "selected" : e.state;
+  }, [J, U]);
+  Y(() => {
+    g && C && C(g);
+  }, [g, C]), Y(() => {
+    re && F && F(re);
+  }, [re, F]), Y(() => {
+    ue && me && ye(me);
+  }, [ue, me]);
+  const Ge = N((e) => {
+    const c = oe(e);
     if (c !== "available" && c !== "selected")
       return;
-    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(() => {
-    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
+    const p = U.has(e.id);
+    ue || ye((b) => {
+      const v = new Set(b);
+      return p ? v.delete(e.id) : v.add(e.id), v;
+    }), p ? i?.(e) : (f?.(e), f || console.log("Seat selected:", e));
+  }, [oe, U, ue, f, i]), ie = _(() => g ? Q.filter((e) => U.has(e.id)) : [], [Q, U]);
+  Y(() => {
+    a?.(ie);
+  }, [ie, a]);
+  const ee = le !== void 0 ? le : Oe, Je = N(() => {
+    if (!m) return;
+    const e = Math.min(k + B, $);
+    if (e !== k) {
+      const c = E.width || g?.canvas.width || 800, p = E.height || g?.canvas.height || 600, b = c / 2, v = p / 2, w = {
+        x: (b - A.x) / k,
+        y: (v - A.y) / k
       };
-      Q(e), _({
-        x: y - w.x * e,
+      te(e), G({
+        x: b - w.x * e,
         y: v - w.y * e
       });
     }
-  }, [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
+  }, [m, k, B, $, E, g, A]), Ze = N(() => {
+    if (!m) return;
+    const e = Math.max(k - B, ee);
+    if (e !== k) {
+      const c = E.width || g?.canvas.width || 800, p = E.height || g?.canvas.height || 600, b = c / 2, v = p / 2, w = {
+        x: (b - A.x) / k,
+        y: (v - A.y) / k
       };
-      Q(e), _({
-        x: y - w.x * e,
+      te(e), G({
+        x: b - w.x * e,
         y: v - w.y * e
       });
     }
-  }, [x, D, B, K, F, p, z]), Ze = N((e) => {
-    _({
+  }, [m, k, B, ee, E, g, A]), Ke = N((e) => {
+    G({
       x: e.target.x(),
       y: e.target.y()
     });
-  }, []), Ke = N((e) => {
-    if (!x) return;
+  }, []), Qe = N((e) => {
+    if (!m) return;
     e.evt.preventDefault();
-    const c = J.current;
+    const c = O.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
+    const p = c.scaleX(), b = c.getPointerPosition();
+    if (!b) return;
+    const v = 1.1, w = e.evt.deltaY > 0 ? p / v : p * v, se = Math.min(Math.max(w, ee), $), ge = {
+      x: (b.x - A.x) / p,
+      y: (b.y - A.y) / p
+    }, xe = {
+      x: b.x - ge.x * se,
+      y: b.y - ge.y * se
     };
-    Q(re), _(me);
-  }, [x, z, K, A]);
-  gt(J, {
-    enabled: ge && x,
-    minScale: K,
-    maxScale: A,
-    currentScale: D,
-    currentPosition: z,
+    te(se), G(xe);
+  }, [m, A, ee, $]);
+  bt(O, {
+    enabled: Me && m,
+    minScale: ee,
+    maxScale: $,
+    currentScale: k,
+    currentPosition: A,
     onScaleChange: (e, c) => {
-      Q(e), _(c);
+      te(e), G(c);
     },
     onPositionChange: (e) => {
-      _(e);
+      G(e);
     }
   });
-  const Je = N((e, c) => {
+  const et = N((e, c) => {
     if (!h) return;
-    const g = c.target.getStage();
-    if (!g) return;
-    const y = g.getPointerPosition();
-    if (!y) return;
-    const v = g.container().getBoundingClientRect();
-    Re({
+    const p = c.target.getStage();
+    if (!p) return;
+    const b = p.getPointerPosition();
+    if (!b) return;
+    const v = p.container().getBoundingClientRect();
+    Ee({
       visible: !0,
-      x: v.left + y.x,
-      y: v.top + y.y,
+      x: v.left + b.x,
+      y: v.top + b.y,
       seat: e,
-      state: ne(e)
+      state: oe(e)
     });
-  }, [h, ne]), Qe = N(() => {
-    Re((e) => ({ ...e, visible: !1 }));
+  }, [h, oe]), tt = N(() => {
+    Ee((e) => ({ ...e, visible: !1 }));
   }, []);
-  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: [
+  if (He)
+    return /* @__PURE__ */ y("div", { className: `flex items-center justify-center h-full ${S}`, children: /* @__PURE__ */ y("p", { children: "Loading seat map..." }) });
+  if (re)
+    return /* @__PURE__ */ y("div", { className: `flex items-center justify-center h-full ${S}`, children: /* @__PURE__ */ D("p", { className: "text-red-500", children: [
       "Error loading seat map: ",
-      te.message
+      re.message
     ] }) });
-  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(
+  if (!g)
+    return /* @__PURE__ */ y("div", { className: `flex items-center justify-center h-full ${S}`, children: /* @__PURE__ */ y("p", { children: "No configuration provided" }) });
+  const nt = E.width || g.canvas.width, rt = E.height || g.canvas.height;
+  return /* @__PURE__ */ D(
     "div",
     {
-      ref: ce,
-      className: `relative ${m}`,
+      ref: V,
+      className: `relative ${S}`,
       style: { width: "100%", height: "100%" },
       children: [
-        Oe && ye.length > 0 && /* @__PURE__ */ b(
-          Ye,
+        qe && ve.length > 0 && /* @__PURE__ */ y(
+          je,
           {
-            floors: ye,
-            currentFloorId: Y,
-            onFloorChange: He,
-            showAllOption: W,
-            allLabel: P,
-            position: I,
+            floors: ve,
+            currentFloorId: W,
+            onFloorChange: _e,
+            showAllOption: z,
+            allLabel: X,
+            position: M,
             className: L
           }
         ),
-        /* @__PURE__ */ k(
-          ct,
+        /* @__PURE__ */ D(
+          dt,
           {
-            ref: J,
-            width: et,
-            height: tt,
-            scaleX: D,
-            scaleY: D,
-            x: z.x,
-            y: z.y,
+            ref: O,
+            width: nt,
+            height: rt,
+            scaleX: k,
+            scaleY: k,
+            x: A.x,
+            y: A.y,
             draggable: !0,
-            onDragEnd: Ze,
-            onWheel: Ke,
-            style: { backgroundColor: p.canvas.backgroundColor, cursor: "grab" },
+            onDragEnd: Ke,
+            onWheel: Qe,
+            style: { backgroundColor: g.canvas.backgroundColor, cursor: "grab" },
             children: [
-              /* @__PURE__ */ b(Ee, { listening: !1, children: he.map((e) => /* @__PURE__ */ b(
-                Xe,
+              /* @__PURE__ */ y(Fe, { listening: !1, children: fe.map((e) => /* @__PURE__ */ y(
+                Ye,
                 {
                   stage: e,
-                  stageColor: ue.stageColor
+                  stageColor: he.stageColor
                 },
                 e.id
               )) }),
-              /* @__PURE__ */ b(Ee, { children: Z.map((e) => /* @__PURE__ */ b(
-                Te,
+              /* @__PURE__ */ y(Fe, { children: Q.map((e) => /* @__PURE__ */ y(
+                Xe,
                 {
                   seat: e,
-                  state: ne(e),
-                  colors: ue,
-                  onClick: _e,
-                  onMouseEnter: Je,
-                  onMouseLeave: Qe
+                  state: oe(e),
+                  colors: he,
+                  onClick: Ge,
+                  onMouseEnter: et,
+                  onMouseLeave: tt
                 },
                 e.id
               )) })
             ]
           }
         ),
-        h && /* @__PURE__ */ b(
-          Ae,
+        h && /* @__PURE__ */ y(
+          Pe,
           {
-            visible: ee.visible,
-            x: ee.x,
-            y: ee.y,
-            seat: ee.seat,
-            currency: ue.currency,
-            state: ee.state
+            visible: ne.visible,
+            x: ne.x,
+            y: ne.y,
+            seat: ne.seat,
+            currency: he.currency,
+            state: ne.state
           }
         ),
-        $ && x && /* @__PURE__ */ b(
-          je,
+        Z && m && /* @__PURE__ */ y(
+          We,
           {
-            scale: D,
-            minScale: K,
-            maxScale: A,
-            onZoomIn: qe,
-            onZoomOut: Ge,
-            position: ae,
-            className: Ce
+            scale: k,
+            minScale: ee,
+            maxScale: $,
+            onZoomIn: Je,
+            onZoomOut: Ze,
+            position: P,
+            className: K
           }
         ),
-        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: [
+        ie.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 (",
-            oe.length,
+            ie.length,
             ")"
           ] }),
-          /* @__PURE__ */ b("div", { className: "max-h-48 overflow-y-auto space-y-1", children: oe.map((e) => /* @__PURE__ */ k("div", { className: "text-sm", children: [
+          /* @__PURE__ */ y("div", { className: "max-h-48 overflow-y-auto space-y-1", children: ie.map((e) => /* @__PURE__ */ D("div", { className: "text-sm", children: [
             e.seatNumber,
-            e.price && ` - ${ue.currency} ${e.price.toFixed(2)}`
+            e.price && ` - ${he.currency} ${e.price.toFixed(2)}`
           ] }, e.id)) })
         ] })
       ]
     }
   );
 };
-let ie = null;
-function Rt(t) {
-  ie = t;
+let ae = null;
+function Ft(t) {
+  ae = t;
 }
-function xe() {
-  if (!ie)
+function Ce() {
+  if (!ae)
     throw new Error(
       "Firebase database not initialized. Call initializeFirebaseForViewer(db) first."
     );
-  return ie;
+  return ae;
+}
+function Re() {
+  return ae !== null;
 }
-function we() {
-  return ie !== null;
+function It() {
+  ae = null;
 }
-function Et() {
-  ie = null;
+function Se(t, n) {
+  if (t.length !== n.length) return !1;
+  for (let o = 0; o < t.length; o++)
+    if (t[o] !== n[o]) return !1;
+  return !0;
 }
 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 };
+  return Se(t.myReserved, n.myReserved) && Se(t.otherReserved, n.otherReserved) && Se(t.unavailable, n.unavailable);
 }
-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) {
+function Ne(t, n) {
+  const o = [], r = [], u = [];
+  return Object.entries(t).forEach(([l, s]) => {
+    s && typeof s == "object" && s.state && (s.state === "unavailable" ? u.push(l) : s.state === "reserved" && (n && s.userId === n ? o.push(l) : r.push(l)));
+  }), { myReserved: o, otherReserved: r, unavailable: u };
+}
+function mt(t) {
+  const { seatMapId: n, currentUserId: o, enabled: r = !0, onStateChange: u, onError: l } = t, [s, x] = R(null), [f, i] = R(!0), [a, d] = R(null), [h, m] = R(null), [S, C] = R([]), [F, I] = R([]), [M, L] = R([]), z = T(u), X = T(l), q = T(o);
+  z.current = u, X.current = l, q.current = o;
+  const j = T({
+    myReserved: [],
+    otherReserved: [],
+    unavailable: []
+  }), Z = T(null);
+  return Y(() => {
+    if (!r || !n) {
       i(!1);
       return;
     }
-    if (!we()) {
+    if (!Re()) {
       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);
+    const P = Ce(), K = we(P, `seat_states/${n}`);
+    return i(!0), d(null), ze(K, (B) => {
+      const O = B.val() || {}, V = Ne(O, q.current), E = j.current, U = JSON.stringify(Z.current) !== JSON.stringify(O);
+      U && (x(O), Z.current = O), i(!1), !Le(E, V) && (m(Date.now()), C(V.myReserved), I(V.otherReserved), L(V.unavailable), j.current = V), U && z.current?.(O);
+    }, (B) => {
+      d(B), i(!1), X.current?.(B);
     }), () => {
-      ze($);
+      Ae(K);
     };
-  }, [n, o]), T(() => {
-    if (r) {
-      const { myReservedSeats: j, otherReservedSeats: $, unavailableSeats: ae } = Le(r, s);
-      C(j), E($), L(ae);
+  }, [n, r]), Y(() => {
+    if (s) {
+      const P = Ne(s, o), K = j.current;
+      !Le(K, P) && (C(P.myReserved), I(P.otherReserved), L(P.unavailable), j.current = P, m(Date.now()));
     }
-  }, [s, r]), {
-    states: r,
+  }, [o]), {
+    states: s,
     loading: f,
     error: a,
     lastUpdated: h,
-    myReservedSeats: m,
-    otherReservedSeats: R,
-    unavailableSeats: I,
+    myReservedSeats: S,
+    otherReservedSeats: F,
+    unavailableSeats: M,
     // Legacy alias
-    reservedSeats: R
+    reservedSeats: F
   };
 }
-function vt(t) {
+function xt(t) {
   const {
     seatMapId: n,
-    enabled: s = !0,
-    subscribeToChanges: o = !1,
+    enabled: o = !0,
+    subscribeToChanges: r = !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 () => {
+  } = t, [s, x] = R(null), [f, i] = R(!0), [a, d] = R(null), h = T(u), m = T(l);
+  h.current = u, m.current = l;
+  const S = N(async () => {
     if (!n) return;
-    if (!we()) {
+    if (!Re()) {
       d(new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")), i(!1);
       return;
     }
-    const C = xe(), R = Se(C, `seatmaps/${n}`);
+    const C = Ce(), F = we(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);
+      const M = (await ft(F)).val();
+      if (M) {
+        const L = gt(M);
+        x(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);
+    } catch (I) {
+      const M = I instanceof Error ? I : new Error("Unknown error");
+      d(M), m.current?.(M);
     } finally {
       i(!1);
     }
   }, [n]);
-  return T(() => {
-    if (!s || !n) {
+  return Y(() => {
+    if (!o || !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;
+    if (S(), r && Re()) {
+      const C = Ce(), F = we(C, `seatmaps/${n}/meta/updated_at`);
+      let I = !0, M = null;
+      return ze(F, (z) => {
+        if (I) {
+          I = !1, M = z.val();
           return;
         }
-        L.exists() && m();
+        const X = z.val();
+        z.exists() && X !== M && (M = X, S());
       }), () => {
-        ze(R);
+        Ae(F);
       };
     }
-  }, [n, s, o, m]), {
-    config: r,
+  }, [n, o, r]), {
+    config: s,
     loading: f,
     error: a,
-    refetch: m
+    refetch: S
   };
 }
-function Ft(t) {
+function Dt(t) {
   const {
     seatMapId: n,
-    userId: s,
-    enabled: o = !0,
+    userId: o,
+    enabled: r = !0,
     subscribeToDesignChanges: u = !1,
     onConfigLoad: l,
-    onStateChange: r,
-    onError: S
+    onStateChange: s,
+    onError: x
   } = t, {
     config: f,
     loading: i,
     error: a,
     refetch: d
-  } = vt({
+  } = xt({
     seatMapId: n,
-    enabled: o,
+    enabled: r,
     subscribeToChanges: u,
     onConfigLoad: l,
-    onError: S
+    onError: x
   }), {
     states: h,
-    loading: x,
-    error: m,
+    loading: m,
+    error: S,
     lastUpdated: C,
-    myReservedSeats: R,
-    otherReservedSeats: E,
-    unavailableSeats: I,
+    myReservedSeats: F,
+    otherReservedSeats: I,
+    unavailableSeats: M,
     reservedSeats: L
-  } = yt({
+  } = mt({
     seatMapId: n,
-    currentUserId: s,
-    enabled: o,
-    onStateChange: r,
-    onError: S
+    currentUserId: o,
+    enabled: r,
+    onStateChange: s,
+    onError: x
   });
   return {
     config: f,
-    loading: i || x,
-    error: a || m,
-    myReservedSeats: R,
-    otherReservedSeats: E,
-    unavailableSeats: I,
+    loading: i || m,
+    error: a || S,
+    myReservedSeats: F,
+    otherReservedSeats: I,
+    unavailableSeats: M,
     reservedSeats: L,
     seatStates: h,
     lastUpdated: C,
@@ -854,15 +868,15 @@ function Ft(t) {
   };
 }
 export {
-  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
+  vt as DEFAULT_COLORS,
+  Et as SeatMapViewer,
+  It as clearFirebaseInstance,
+  Ft as initializeFirebaseForViewer,
+  Re as isFirebaseInitialized,
+  pt as useConfigFetcher,
+  yt as useContainerSize,
+  xt as useFirebaseConfig,
+  mt as useFirebaseSeatStates,
+  Dt as useRealtimeSeatMap,
+  bt as useTouchGestures
 };