@zonetrix/viewer 2.13.1 → 2.13.3

package/dist/index.mjs

@@ -1,20 +1,20 @@
-import { jsx as a, jsxs as k } from "react/jsx-runtime";
-import { useState as Y, useCallback as N, useEffect as B, useRef as U, useMemo as z, memo as K } from "react";
-import { Stage as oe, Layer as vt, Group as re, Text as Rt, Circle as Dt, Rect as Nt, Path as se, RegularPolygon as ae } from "react-konva";
-import { clearFirebaseInstance as be, getFirebaseDatabase as me, initializeFirebaseForViewer as ve, isFirebaseInitialized as Se, useFirebaseConfig as we, useFirebaseSeatStates as Ce, useRealtimeSeatMap as Me } from "@zonetrix/shared";
-function ce(n) {
-  const [u, e] = Y(null), [r, S] = Y(!1), [y, f] = Y(null), x = N(async () => {
+import { jsx as c, jsxs as k } from "react/jsx-runtime";
+import { useState as A, useCallback as N, useEffect as B, useRef as K, useMemo as z, memo as J } from "react";
+import { Stage as oe, Layer as St, Group as re, Text as Dt, Circle as Nt, Rect as Tt, Path as se, RegularPolygon as ce } from "react-konva";
+import { clearFirebaseInstance as me, getFirebaseDatabase as be, initializeFirebaseForViewer as ve, isFirebaseInitialized as Se, useFirebaseConfig as we, useFirebaseSeatStates as Ce, useRealtimeSeatMap as Me } from "@zonetrix/shared";
+function ae(n) {
+  const [u, e] = A(null), [r, S] = A(!1), [y, f] = A(null), x = N(async () => {
     if (n) {
       S(!0), f(null);
       try {
         const g = await fetch(n);
         if (!g.ok)
           throw new Error(`Failed to fetch config: ${g.statusText}`);
-        const c = await g.json();
-        e(c);
+        const a = await g.json();
+        e(a);
       } catch (g) {
-        const c = g instanceof Error ? g : new Error("Unknown error occurred");
-        f(c), console.error("Failed to fetch seat map config:", c);
+        const a = g instanceof Error ? g : new Error("Unknown error occurred");
+        f(a), console.error("Failed to fetch seat map config:", a);
       } finally {
         S(!1);
       }
@@ -30,7 +30,7 @@ function ce(n) {
   };
 }
 function le(n) {
-  const [u, e] = Y({ width: 0, height: 0 });
+  const [u, e] = A({ width: 0, height: 0 });
   return B(() => {
     const r = n.current;
     if (!r) return;
@@ -39,67 +39,69 @@ function le(n) {
     const f = new ResizeObserver((x) => {
       const g = x[0];
       if (!g) return;
-      const { width: c, height: p } = g.contentRect;
-      c > 0 && p > 0 && e((b) => b.width === c && b.height === p ? b : { width: c, height: p });
+      const { width: a, height: p } = g.contentRect;
+      a > 0 && p > 0 && e((m) => m.width === a && m.height === p ? m : { width: a, height: p });
     });
     return f.observe(r), () => {
       f.disconnect();
     };
   }, [n]), u;
 }
-function Ft(n, u) {
+function kt(n, u) {
   return Math.sqrt(Math.pow(u.x - n.x, 2) + Math.pow(u.y - n.y, 2));
 }
-function kt(n, u) {
+function Rt(n, u) {
   return {
     x: (n.x + u.x) / 2,
     y: (n.y + u.y) / 2
   };
 }
 function he(n, u) {
-  const e = U(null), r = U(null), S = U(1), {
+  const e = K(null), r = K(null), S = K(1), {
     enabled: y,
     minScale: f,
     maxScale: x,
     currentScale: g,
-    currentPosition: c,
+    currentPosition: a,
     onScaleChange: p
   } = u;
   B(() => {
-    const b = n.current;
-    if (!b || !y) return;
-    const d = b.container(), I = (m) => {
-      if (m.touches.length === 2) {
-        m.preventDefault();
-        const L = { x: m.touches[0].clientX, y: m.touches[0].clientY }, W = { x: m.touches[1].clientX, y: m.touches[1].clientY };
-        e.current = Ft(L, W), r.current = kt(L, W), S.current = g;
+    const m = n.current;
+    if (!m || !y) return;
+    const h = m.container(), I = h.style.touchAction;
+    h.style.touchAction = "none";
+    const b = (v) => {
+      if (v.touches.length === 2) {
+        v.preventDefault();
+        const T = { x: v.touches[0].clientX, y: v.touches[0].clientY }, P = { x: v.touches[1].clientX, y: v.touches[1].clientY };
+        e.current = kt(T, P), r.current = Rt(T, P), S.current = g;
       }
-    }, v = (m) => {
-      if (m.touches.length !== 2) return;
-      m.preventDefault();
-      const L = { x: m.touches[0].clientX, y: m.touches[0].clientY }, W = { x: m.touches[1].clientX, y: m.touches[1].clientY }, O = Ft(L, W), M = kt(L, W);
+    }, w = (v) => {
+      if (v.touches.length !== 2) return;
+      v.preventDefault();
+      const T = { x: v.touches[0].clientX, y: v.touches[0].clientY }, P = { x: v.touches[1].clientX, y: v.touches[1].clientY }, F = kt(T, P), W = Rt(T, P);
       if (e.current !== null && r.current !== null) {
-        const P = O / e.current, A = Math.min(
-          Math.max(g * P, f),
+        const Q = F / e.current, O = Math.min(
+          Math.max(g * Q, f),
           x
-        ), J = d.getBoundingClientRect(), j = M.x - J.left, ot = M.y - J.top, rt = g, st = {
-          x: (j - c.x) / rt,
-          y: (ot - c.y) / rt
-        }, at = M.x - r.current.x, $ = M.y - r.current.y, V = {
-          x: j - st.x * A + at,
-          y: ot - st.y * A + $
+        ), j = h.getBoundingClientRect(), ct = W.x - j.left, at = W.y - j.top, lt = g, tt = {
+          x: (ct - a.x) / lt,
+          y: (at - a.y) / lt
+        }, Y = W.x - r.current.x, V = W.y - r.current.y, ht = {
+          x: ct - tt.x * O + Y,
+          y: at - tt.y * O + V
         };
-        p(A, V), e.current = O, r.current = M;
+        p(O, ht), e.current = F, r.current = W;
       }
-    }, w = (m) => {
-      m.touches.length < 2 && (e.current = null, r.current = null);
+    }, E = (v) => {
+      v.touches.length < 2 && (e.current = null, r.current = null);
     };
-    return d.addEventListener("touchstart", I, {
+    return h.addEventListener("touchstart", b, {
       passive: !1
-    }), d.addEventListener("touchmove", v, {
+    }), h.addEventListener("touchmove", w, {
       passive: !1
-    }), d.addEventListener("touchend", w), () => {
-      d.removeEventListener("touchstart", I), d.removeEventListener("touchmove", v), d.removeEventListener("touchend", w);
+    }), h.addEventListener("touchend", E), () => {
+      h.style.touchAction = I, h.removeEventListener("touchstart", b), h.removeEventListener("touchmove", w), h.removeEventListener("touchend", E);
     };
   }, [
     n,
@@ -107,7 +109,7 @@ function he(n, u) {
     f,
     x,
     g,
-    c,
+    a,
     p
   ]);
 }
@@ -121,7 +123,7 @@ const de = {
   seatHidden: "#4a4a4a",
   gridLines: "#404040",
   currency: "KD"
-}, Wt = K(
+}, Wt = J(
   ({ seat: n, state: u, colors: e, onClick: r, onMouseEnter: S, onMouseLeave: y }) => {
     const f = (n.size || 24) / 2, g = {
       available: e.seatAvailable,
@@ -130,35 +132,36 @@ const de = {
       unavailable: e.seatUnavailable,
       hidden: e.seatHidden
       // Hidden seats are filtered out, but included for type safety
-    }[u], c = u === "available" || u === "selected", p = N(() => {
-      c && r(n);
-    }, [n, r, c]), b = N(
-      (v) => {
-        S(n, v);
-        const w = v.target.getStage();
-        w && c && (w.container().style.cursor = "pointer");
+    }[u], a = u === "available" || u === "selected", p = N(() => {
+      a && r(n);
+    }, [n, r, a]), m = N(
+      (b) => {
+        S(n, b);
+        const w = b.target.getStage();
+        w && a && (w.container().style.cursor = "pointer");
       },
-      [n, S, c]
-    ), d = N(
-      (v) => {
+      [n, S, a]
+    ), h = N(
+      (b) => {
         y();
-        const w = v.target.getStage();
+        const w = b.target.getStage();
         w && (w.container().style.cursor = "grab");
       },
       [y]
     ), I = {
       x: n.position.x,
       y: n.position.y,
+      rotation: n.rotation || 0,
       fill: g,
       stroke: "#ffffff",
       strokeWidth: 1,
       onClick: p,
       onTap: p,
-      onMouseEnter: b,
-      onMouseLeave: d
+      onMouseEnter: m,
+      onMouseLeave: h
     };
-    return n.shape === "circle" ? /* @__PURE__ */ a(Dt, { ...I, radius: f }) : /* @__PURE__ */ a(
-      Nt,
+    return n.shape === "circle" ? /* @__PURE__ */ c(Nt, { ...I, radius: f }) : /* @__PURE__ */ c(
+      Tt,
       {
         ...I,
         width: f * 2,
@@ -171,59 +174,59 @@ const de = {
   }
 );
 Wt.displayName = "ViewerSeat";
-const Tt = K(({ stage: n, stageColor: u }) => {
+const Xt = J(({ stage: n, stageColor: u }) => {
   const e = n.config, r = e.shape || "rectangle", S = e.showLabel !== !1, y = e.color || u, f = e.width / e.height, x = f < 0.5, g = f > 2;
-  let c;
-  x ? c = e.width * 0.25 : g ? c = e.height * 0.35 : c = Math.min(e.width, e.height) * 0.25;
-  const p = e.label?.length || 6, I = e.width * 0.85 / p * 1.5, v = Math.max(
+  let a;
+  x ? a = e.width * 0.25 : g ? a = e.height * 0.35 : a = Math.min(e.width, e.height) * 0.25;
+  const p = e.label?.length || 6, I = e.width * 0.85 / p * 1.5, b = Math.max(
     10,
-    Math.min(24, Math.min(c, I))
-  ), w = 4, m = Math.max(20, e.width - w * 2), L = (e.width - m) / 2, W = {
+    Math.min(24, Math.min(a, I))
+  ), w = 4, E = Math.max(20, e.width - w * 2), v = (e.width - E) / 2, T = {
     fill: y + "80",
     stroke: "#ffffff",
     strokeWidth: 2,
     perfectDrawEnabled: !1,
     hitStrokeWidth: 0
-  }, O = () => {
+  }, P = () => {
     switch (r) {
       case "circle": {
-        const M = Math.min(e.width, e.height) / 2;
-        return /* @__PURE__ */ a(
-          Dt,
+        const F = Math.min(e.width, e.height) / 2;
+        return /* @__PURE__ */ c(
+          Nt,
           {
             x: e.width / 2,
             y: e.height / 2,
-            radius: M,
-            ...W
+            radius: F,
+            ...T
           }
         );
       }
       case "triangle": {
-        const M = Math.min(e.width, e.height) / 2;
-        return /* @__PURE__ */ a(
-          ae,
+        const F = Math.min(e.width, e.height) / 2;
+        return /* @__PURE__ */ c(
+          ce,
           {
             x: e.width / 2,
             y: e.height / 2,
             sides: 3,
-            radius: M,
+            radius: F,
             rotation: -90,
-            ...W
+            ...T
           }
         );
       }
       case "arrow": {
-        const M = e.width / 24, P = e.height / 24, A = `M${9 * M},${18 * P} v${-8 * P} H${5 * M} l${7 * M},${-7 * P} l${7 * M},${7 * P} h${-4 * M} v${8 * P} Z`;
-        return /* @__PURE__ */ a(se, { data: A, ...W });
+        const F = e.width / 24, W = e.height / 24, Q = `M${9 * F},${18 * W} v${-8 * W} H${5 * F} l${7 * F},${-7 * W} l${7 * F},${7 * W} h${-4 * F} v${8 * W} Z`;
+        return /* @__PURE__ */ c(se, { data: Q, ...T });
       }
       default:
-        return /* @__PURE__ */ a(
-          Nt,
+        return /* @__PURE__ */ c(
+          Tt,
           {
             width: e.width,
             height: e.height,
             cornerRadius: 10,
-            ...W
+            ...T
           }
         );
     }
@@ -235,16 +238,16 @@ const Tt = K(({ stage: n, stageColor: u }) => {
       y: n.position.y,
       rotation: e.rotation || 0,
       children: [
-        O(),
-        S && /* @__PURE__ */ a(
-          Rt,
+        P(),
+        S && /* @__PURE__ */ c(
+          Dt,
           {
             text: e.label,
-            x: L,
+            x: v,
             y: w,
-            width: m,
+            width: E,
             height: e.height - w * 2,
-            fontSize: v,
+            fontSize: b,
             fontStyle: "bold",
             fill: "#ffffff",
             align: "center",
@@ -257,9 +260,9 @@ const Tt = K(({ stage: n, stageColor: u }) => {
     }
   );
 });
-Tt.displayName = "ViewerStage";
-const Lt = K(({ text: n }) => /* @__PURE__ */ a(
-  Rt,
+Xt.displayName = "ViewerStage";
+const Yt = J(({ text: n }) => /* @__PURE__ */ c(
+  Dt,
   {
     x: n.position.x,
     y: n.position.y,
@@ -267,11 +270,13 @@ const Lt = K(({ text: n }) => /* @__PURE__ */ a(
     fontSize: n.config.fontSize,
     fill: n.config.color,
     rotation: n.config.rotation || 0,
+    scaleX: n.config.scaleX || 1,
+    scaleY: n.config.scaleY || 1,
     listening: !1
   }
 ));
-Lt.displayName = "ViewerText";
-const $t = K(
+Yt.displayName = "ViewerText";
+const Lt = J(
   ({
     floors: n,
     currentFloorId: u,
@@ -282,9 +287,9 @@ const $t = K(
     className: f
   }) => {
     const x = z(
-      () => [...n].sort((d, I) => d.order - I.order),
+      () => [...n].sort((h, I) => h.order - I.order),
       [n]
-    ), c = {
+    ), a = {
       position: "absolute",
       display: "flex",
       alignItems: "center",
@@ -312,36 +317,36 @@ const $t = K(
       transition: "all 0.2s ease",
       minHeight: "44px",
       touchAction: "manipulation"
-    }, b = {
+    }, m = {
       ...p,
       backgroundColor: "#3A7DE5",
       borderColor: "#3A7DE5"
     };
-    return /* @__PURE__ */ k("div", { className: f, style: c, children: [
-      r && /* @__PURE__ */ a(
+    return /* @__PURE__ */ k("div", { className: f, style: a, children: [
+      r && /* @__PURE__ */ c(
         "button",
         {
           type: "button",
           onClick: () => e(null),
-          style: u === null ? b : p,
+          style: u === null ? m : p,
           children: S
         }
       ),
-      x.map((d) => /* @__PURE__ */ a(
+      x.map((h) => /* @__PURE__ */ c(
         "button",
         {
           type: "button",
-          onClick: () => e(d.id),
-          style: u === d.id ? b : p,
-          children: d.name
+          onClick: () => e(h.id),
+          style: u === h.id ? m : p,
+          children: h.name
         },
-        d.id
+        h.id
       ))
     ] });
   }
 );
-$t.displayName = "FloorSelectorBar";
-const Et = K(
+Lt.displayName = "FloorSelectorBar";
+const $t = J(
   ({ scale: n, minScale: u, maxScale: e, fitScale: r, onZoomIn: S, onZoomOut: y, onFitToScreen: f, position: x, className: g }) => {
     const p = {
       position: "absolute",
@@ -359,7 +364,7 @@ const Et = K(
         "bottom-left": { bottom: 0, left: 0 },
         "bottom-right": { bottom: 0, right: 0 }
       }[x]
-    }, b = {
+    }, m = {
       width: "44px",
       height: "44px",
       minWidth: "44px",
@@ -376,43 +381,43 @@ const Et = K(
       justifyContent: "center",
       transition: "all 0.2s ease",
       touchAction: "manipulation"
-    }, d = {
-      ...b,
+    }, h = {
+      ...m,
       opacity: 0.4,
       cursor: "not-allowed"
-    }, I = n < e, v = n > u, w = Math.abs(n - r) < 0.01;
+    }, I = n < e, b = n > u, w = Math.abs(n - r) < 0.01;
     return /* @__PURE__ */ k("div", { className: g, style: p, children: [
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ c(
         "button",
         {
           type: "button",
           onClick: S,
           disabled: !I,
-          style: I ? b : d,
+          style: I ? m : h,
           title: "Zoom In",
           "aria-label": "Zoom In",
           children: "+"
         }
       ),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ c(
         "button",
         {
           type: "button",
           onClick: f,
           disabled: w,
-          style: w ? d : b,
+          style: w ? h : m,
           title: "Fit to Screen",
           "aria-label": "Fit to Screen",
           children: "⤢"
         }
       ),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ c(
         "button",
         {
           type: "button",
           onClick: y,
-          disabled: !v,
-          style: v ? b : d,
+          disabled: !b,
+          style: b ? m : h,
           title: "Zoom Out",
           "aria-label": "Zoom Out",
           children: "−"
@@ -421,8 +426,8 @@ const Et = K(
     ] });
   }
 );
-Et.displayName = "ZoomControls";
-const Xt = K(
+$t.displayName = "ZoomControls";
+const At = J(
   ({ visible: n, x: u, y: e, seat: r, currency: S, state: y }) => {
     if (!n || !r) return null;
     const f = r.seatNumber || (r.rowLabel && r.columnLabel ? `${r.rowLabel}-${r.columnLabel}` : "N/A"), x = {
@@ -440,45 +445,45 @@ const Xt = K(
       fontSize: "13px",
       boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
       minWidth: "140px"
-    }, c = {
+    }, a = {
       color: "#9ca3af",
       marginRight: "4px"
     }, p = {
       fontWeight: 600
-    }, b = {
+    }, m = {
       color: "#4ade80",
       fontWeight: 600
-    }, d = {
+    }, h = {
       fontSize: "11px",
       color: "#6b7280",
       textTransform: "capitalize",
       marginTop: "4px"
     };
-    return /* @__PURE__ */ a("div", { style: x, children: /* @__PURE__ */ k("div", { style: g, children: [
+    return /* @__PURE__ */ c("div", { style: x, children: /* @__PURE__ */ k("div", { style: g, children: [
       r.sectionName && /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
-        /* @__PURE__ */ a("span", { style: c, children: "Section:" }),
-        /* @__PURE__ */ a("span", { style: { ...p, color: "#3b82f6" }, children: r.sectionName })
+        /* @__PURE__ */ c("span", { style: a, children: "Section:" }),
+        /* @__PURE__ */ c("span", { style: { ...p, color: "#3b82f6" }, children: r.sectionName })
       ] }),
       /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
-        /* @__PURE__ */ a("span", { style: c, children: "Seat:" }),
-        /* @__PURE__ */ a("span", { style: p, children: f })
+        /* @__PURE__ */ c("span", { style: a, children: "Seat:" }),
+        /* @__PURE__ */ c("span", { style: p, children: f })
       ] }),
       r.price !== void 0 && r.price > 0 && y === "available" && /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
-        /* @__PURE__ */ a("span", { style: c, children: "Price:" }),
-        /* @__PURE__ */ k("span", { style: b, children: [
+        /* @__PURE__ */ c("span", { style: a, children: "Price:" }),
+        /* @__PURE__ */ k("span", { style: m, children: [
           S,
           " ",
           r.price.toFixed(2)
         ] })
       ] }),
-      /* @__PURE__ */ k("div", { style: d, children: [
+      /* @__PURE__ */ k("div", { style: h, children: [
         "Status: ",
         y
       ] })
     ] }) });
   }
 );
-Xt.displayName = "SeatTooltip";
+At.displayName = "SeatTooltip";
 const pe = ({
   config: n,
   configUrl: u,
@@ -490,84 +495,84 @@ const pe = ({
   unavailableSeats: f = [],
   selectedSeats: x,
   myReservedSeats: g = [],
-  onSeatSelect: c,
+  onSeatSelect: a,
   onSeatDeselect: p,
-  onSelectionChange: b,
-  colorOverrides: d,
+  onSelectionChange: m,
+  colorOverrides: h,
   showTooltip: I = !0,
-  zoomEnabled: v = !0,
+  zoomEnabled: b = !0,
   className: w = "",
-  onConfigLoad: m,
-  onError: L,
+  onConfigLoad: E,
+  onError: v,
   // Floor selector props
-  showFloorSelector: W,
-  floorSelectorPosition: O = "top-left",
-  floorSelectorClassName: M,
-  showAllFloorsOption: P = !0,
-  allFloorsLabel: A = "All",
-  fitToView: J = !0,
+  showFloorSelector: T,
+  floorSelectorPosition: P = "top-left",
+  floorSelectorClassName: F,
+  showAllFloorsOption: W = !0,
+  allFloorsLabel: Q = "All",
+  fitToView: O = !0,
   fitPadding: j = 40,
   // Zoom controls
-  showZoomControls: ot = !0,
-  zoomControlsPosition: rt = "bottom-right",
-  zoomControlsClassName: st,
-  minZoom: at,
-  maxZoom: $ = 3,
+  showZoomControls: ct = !0,
+  zoomControlsPosition: at = "bottom-right",
+  zoomControlsClassName: lt,
+  minZoom: tt,
+  maxZoom: Y = 3,
   zoomStep: V = 0.25,
   // Touch gestures
-  touchEnabled: Yt = !0
+  touchEnabled: ht = !0
 }) => {
-  const St = y !== void 0 ? y : S, gt = U(null), wt = U(null), C = le(wt), [Z, Ct] = Y(
+  const wt = y !== void 0 ? y : S, yt = K(null), Ct = K(null), C = le(Ct), [Z, Mt] = A(
     /* @__PURE__ */ new Set()
-  ), [R, Q] = Y(1), [T, _] = Y({ x: 0, y: 0 }), [Pt, zt] = Y(null), [Mt, Bt] = Y(1), ct = U({ width: 0, height: 0 }), [tt, It] = Y({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: At, loading: Ht, error: et } = ce(u), s = n || At, pt = e !== void 0, D = pt ? e || null : Pt, lt = x !== void 0, Ot = N(
+  ), [R, et] = A(1), [X, _] = A({ x: 0, y: 0 }), [Et, Pt] = A(null), [It, zt] = A(1), dt = K({ width: 0, height: 0 }), [nt, Ft] = A({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: Bt, loading: Ht, error: it } = ae(u), s = n || Bt, xt = e !== void 0, D = xt ? e || null : Et, ut = x !== void 0, Ot = N(
     (t) => {
-      pt || zt(t), r?.(t);
+      xt || Pt(t), r?.(t);
     },
-    [pt, r]
-  ), yt = s?.floors || [], jt = W !== void 0 ? W : yt.length > 1, ht = z(
-    () => s ? { ...s.colors, ...d } : { ...de, ...d },
-    [s, d]
+    [xt, r]
+  ), mt = s?.floors || [], jt = T !== void 0 ? T : mt.length > 1, ft = z(
+    () => s ? { ...s.colors, ...h } : { ...de, ...h },
+    [s, h]
   ), q = z(() => {
     if (!s) return [];
     let t = s.seats.filter((i) => i.state !== "hidden");
     return D && (t = t.filter(
       (i) => i.floorId === D || !i.floorId && D === "floor_default"
     )), t;
-  }, [s, D]), dt = z(() => s?.stages ? D ? s.stages.filter(
+  }, [s, D]), gt = z(() => s?.stages ? D ? s.stages.filter(
     (t) => t.floorId === D || !t.floorId && D === "floor_default"
-  ) : s.stages : [], [s, D]), ut = z(() => s?.texts ? D ? s.texts.filter(
+  ) : s.stages : [], [s, D]), pt = z(() => s?.texts ? D ? s.texts.filter(
     (t) => t.floorId === D || !t.floorId && D === "floor_default"
-  ) : s.texts : [], [s, D]), E = z(() => {
-    if (!s || q.length === 0 && dt.length === 0 && ut.length === 0)
+  ) : s.texts : [], [s, D]), L = z(() => {
+    if (!s || q.length === 0 && gt.length === 0 && pt.length === 0)
       return null;
-    let t = 1 / 0, i = 1 / 0, l = -1 / 0, h = -1 / 0;
+    let t = 1 / 0, i = 1 / 0, l = -1 / 0, d = -1 / 0;
     return q.forEach((o) => {
-      const F = (o.size || 24) / 2;
-      t = Math.min(t, o.position.x - F), i = Math.min(i, o.position.y - F), l = Math.max(l, o.position.x + F), h = Math.max(h, o.position.y + F);
-    }), dt.forEach((o) => {
-      t = Math.min(t, o.position.x), i = Math.min(i, o.position.y), l = Math.max(l, o.position.x + (o.config?.width || 200)), h = Math.max(h, o.position.y + (o.config?.height || 100));
-    }), ut.forEach((o) => {
-      const F = o.config.text.length * o.config.fontSize * 0.6, X = o.config.fontSize;
-      t = Math.min(t, o.position.x), i = Math.min(i, o.position.y), l = Math.max(l, o.position.x + F), h = Math.max(h, o.position.y + X);
-    }), { minX: t, minY: i, maxX: l, maxY: h, width: l - t, height: h - i };
-  }, [s, q, dt, ut]), xt = N(() => {
-    if (!s || !E || C.width === 0 || C.height === 0) return;
-    const t = C.width, i = C.height, l = t - j * 2, h = i - j * 2, o = l / E.width, F = h / E.height, X = Math.min(o, F, $), ft = E.minX + E.width / 2, mt = E.minY + E.height / 2, te = t / 2, ee = i / 2, ne = te - ft * X, ie = ee - mt * X;
-    Q(X), _({ x: ne, y: ie }), Bt(X);
-  }, [s, E, C, j, $]);
+      const M = (o.size || 24) / 2;
+      t = Math.min(t, o.position.x - M), i = Math.min(i, o.position.y - M), l = Math.max(l, o.position.x + M), d = Math.max(d, o.position.y + M);
+    }), gt.forEach((o) => {
+      t = Math.min(t, o.position.x), i = Math.min(i, o.position.y), l = Math.max(l, o.position.x + (o.config?.width || 200)), d = Math.max(d, o.position.y + (o.config?.height || 100));
+    }), pt.forEach((o) => {
+      const M = o.config.scaleX || 1, $ = o.config.scaleY || 1, U = o.config.text.length * o.config.fontSize * 0.6 * M, st = o.config.fontSize * $;
+      t = Math.min(t, o.position.x), i = Math.min(i, o.position.y), l = Math.max(l, o.position.x + U), d = Math.max(d, o.position.y + st);
+    }), { minX: t, minY: i, maxX: l, maxY: d, width: l - t, height: d - i };
+  }, [s, q, gt, pt]), bt = N(() => {
+    if (!s || !L || C.width === 0 || C.height === 0) return;
+    const t = C.width, i = C.height, l = t - j * 2, d = i - j * 2, o = l / L.width, M = d / L.height, $ = Math.min(o, M, Y), U = L.minX + L.width / 2, st = L.minY + L.height / 2, te = t / 2, ee = i / 2, ne = te - U * $, ie = ee - st * $;
+    et($), _({ x: ne, y: ie }), zt($);
+  }, [s, L, C, j, Y]);
   B(() => {
-    if (!J || !s || !E || C.width === 0 || C.height === 0) return;
+    if (!O || !s || !L || C.width === 0 || C.height === 0) return;
     const t = Math.abs(
-      C.width - ct.current.width
+      C.width - dt.current.width
     ), i = Math.abs(
-      C.height - ct.current.height
+      C.height - dt.current.height
     );
-    !(ct.current.width === 0) && t < 10 && i < 10 || (ct.current = C, xt());
-  }, [J, s, E, C, D, xt]);
+    !(dt.current.width === 0) && t < 10 && i < 10 || (dt.current = C, bt());
+  }, [O, s, L, C, D, bt]);
   const H = z(() => {
-    const t = new Set(St), i = new Set(f), l = new Set(g);
+    const t = new Set(wt), i = new Set(f), l = new Set(g);
     return { reserved: t, unavailable: i, myReserved: l };
-  }, [St, f, g]), bt = z(() => x ? new Set(x) : null, [x]), nt = N(
+  }, [wt, f, g]), vt = z(() => x ? new Set(x) : null, [x]), ot = N(
     (t) => {
       const i = t.id, l = t.seatNumber || "";
       return H.unavailable.has(i) || H.unavailable.has(l) ? "unavailable" : H.reserved.has(i) || H.reserved.has(l) ? "reserved" : H.myReserved.has(i) || H.myReserved.has(l) || Z.has(i) ? "selected" : t.state;
@@ -575,76 +580,76 @@ const pe = ({
     [H, Z]
   );
   B(() => {
-    s && m && m(s);
-  }, [s, m]), B(() => {
-    et && L && L(et);
-  }, [et, L]), B(() => {
-    lt && bt && Ct(bt);
-  }, [lt, bt]);
+    s && E && E(s);
+  }, [s, E]), B(() => {
+    it && v && v(it);
+  }, [it, v]), B(() => {
+    ut && vt && Mt(vt);
+  }, [ut, vt]);
   const Vt = N(
     (t) => {
-      const i = nt(t);
+      const i = ot(t);
       if (i !== "available" && i !== "selected")
         return;
       const l = Z.has(t.id);
-      lt || Ct((h) => {
-        const o = new Set(h);
+      ut || Mt((d) => {
+        const o = new Set(d);
         return l ? o.delete(t.id) : o.add(t.id), o;
-      }), l ? p?.(t) : (c?.(t), c || console.log("Seat selected:", t));
+      }), l ? p?.(t) : (a?.(t), a || console.log("Seat selected:", t));
     },
     [
-      nt,
+      ot,
       Z,
-      lt,
-      c,
+      ut,
+      a,
       p
     ]
-  ), it = z(() => s ? q.filter((t) => Z.has(t.id)) : [], [s, q, Z]);
+  ), rt = z(() => s ? q.filter((t) => Z.has(t.id)) : [], [s, q, Z]);
   B(() => {
-    b?.(it);
-  }, [it, b]);
-  const G = at !== void 0 ? at : Mt * 0.5, Zt = N(() => {
-    if (!v) return;
-    const t = Math.min(R + V, $);
+    m?.(rt);
+  }, [rt, m]);
+  const G = tt !== void 0 ? tt : It * 0.5, Zt = N(() => {
+    if (!b) return;
+    const t = Math.min(R + V, Y);
     if (t !== R) {
-      const i = C.width || s?.canvas.width || 800, l = C.height || s?.canvas.height || 600, h = i / 2, o = l / 2, F = {
-        x: (h - T.x) / R,
-        y: (o - T.y) / R
+      const i = C.width || s?.canvas.width || 800, l = C.height || s?.canvas.height || 600, d = i / 2, o = l / 2, M = {
+        x: (d - X.x) / R,
+        y: (o - X.y) / R
       };
-      Q(t), _({
-        x: h - F.x * t,
-        y: o - F.y * t
+      et(t), _({
+        x: d - M.x * t,
+        y: o - M.y * t
       });
     }
   }, [
-    v,
+    b,
     R,
     V,
-    $,
+    Y,
     C,
     s,
-    T
+    X
   ]), _t = N(() => {
-    if (!v) return;
+    if (!b) return;
     const t = Math.max(R - V, G);
     if (t !== R) {
-      const i = C.width || s?.canvas.width || 800, l = C.height || s?.canvas.height || 600, h = i / 2, o = l / 2, F = {
-        x: (h - T.x) / R,
-        y: (o - T.y) / R
+      const i = C.width || s?.canvas.width || 800, l = C.height || s?.canvas.height || 600, d = i / 2, o = l / 2, M = {
+        x: (d - X.x) / R,
+        y: (o - X.y) / R
       };
-      Q(t), _({
-        x: h - F.x * t,
-        y: o - F.y * t
+      et(t), _({
+        x: d - M.x * t,
+        y: o - M.y * t
       });
     }
   }, [
-    v,
+    b,
     R,
     V,
     G,
     C,
     s,
-    T
+    X
   ]), qt = N((t) => {
     _({
       x: t.target.x(),
@@ -652,31 +657,31 @@ const pe = ({
     });
   }, []), Gt = N(
     (t) => {
-      if (!v) return;
+      if (!b) return;
       t.evt.preventDefault();
-      const i = gt.current;
+      const i = yt.current;
       if (!i) return;
-      const l = i.scaleX(), h = i.getPointerPosition();
-      if (!h) return;
-      const o = 1.1, F = t.evt.deltaY > 0 ? l / o : l * o, X = Math.min(Math.max(F, G), $), ft = {
-        x: (h.x - T.x) / l,
-        y: (h.y - T.y) / l
-      }, mt = {
-        x: h.x - ft.x * X,
-        y: h.y - ft.y * X
+      const l = i.scaleX(), d = i.getPointerPosition();
+      if (!d) return;
+      const o = 1.1, M = t.evt.deltaY > 0 ? l / o : l * o, $ = Math.min(Math.max(M, G), Y), U = {
+        x: (d.x - X.x) / l,
+        y: (d.y - X.y) / l
+      }, st = {
+        x: d.x - U.x * $,
+        y: d.y - U.y * $
       };
-      Q(X), _(mt);
+      et($), _(st);
     },
-    [v, T, G, $]
+    [b, X, G, Y]
   );
-  he(gt, {
-    enabled: Yt && v,
+  he(yt, {
+    enabled: ht && b,
     minScale: G,
-    maxScale: $,
+    maxScale: Y,
     currentScale: R,
-    currentPosition: T,
+    currentPosition: X,
     onScaleChange: (t, i) => {
-      Q(t), _(i);
+      et(t), _(i);
     }
   });
   const Ut = N(
@@ -684,60 +689,60 @@ const pe = ({
       if (!I) return;
       const l = i.target.getStage();
       if (!l) return;
-      const h = l.getPointerPosition();
-      if (!h) return;
+      const d = l.getPointerPosition();
+      if (!d) return;
       const o = l.container().getBoundingClientRect();
-      It({
+      Ft({
         visible: !0,
-        x: o.left + h.x,
-        y: o.top + h.y,
+        x: o.left + d.x,
+        y: o.top + d.y,
         seat: t,
-        state: nt(t)
+        state: ot(t)
       });
     },
-    [I, nt]
+    [I, ot]
   ), Kt = N(() => {
-    It((t) => ({ ...t, visible: !1 }));
+    Ft((t) => ({ ...t, visible: !1 }));
   }, []);
   if (Ht)
-    return /* @__PURE__ */ a("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ a("p", { children: "Loading seat map..." }) });
-  if (et)
-    return /* @__PURE__ */ a("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ k("p", { className: "text-red-500", children: [
+    return /* @__PURE__ */ c("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ c("p", { children: "Loading seat map..." }) });
+  if (it)
+    return /* @__PURE__ */ c("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ k("p", { className: "text-red-500", children: [
       "Error loading seat map: ",
-      et.message
+      it.message
     ] }) });
   if (!s)
-    return /* @__PURE__ */ a("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ a("p", { children: "No configuration provided" }) });
+    return /* @__PURE__ */ c("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ c("p", { children: "No configuration provided" }) });
   const Jt = C.width || s.canvas.width, Qt = C.height || s.canvas.height;
   return /* @__PURE__ */ k(
     "div",
     {
-      ref: wt,
+      ref: Ct,
       className: `relative ${w}`,
-      style: { width: "100%", height: "100%" },
+      style: { width: "100%", height: "100%", touchAction: ht && b ? "none" : "auto" },
       children: [
-        jt && yt.length > 0 && /* @__PURE__ */ a(
-          $t,
+        jt && mt.length > 0 && /* @__PURE__ */ c(
+          Lt,
           {
-            floors: yt,
+            floors: mt,
             currentFloorId: D,
             onFloorChange: Ot,
-            showAllOption: P,
-            allLabel: A,
-            position: O,
-            className: M
+            showAllOption: W,
+            allLabel: Q,
+            position: P,
+            className: F
           }
         ),
         /* @__PURE__ */ k(
           oe,
           {
-            ref: gt,
+            ref: yt,
             width: Jt,
             height: Qt,
             scaleX: R,
             scaleY: R,
-            x: T.x,
-            y: T.y,
+            x: X.x,
+            y: X.y,
             draggable: !0,
             onDragEnd: qt,
             onWheel: Gt,
@@ -746,21 +751,21 @@ const pe = ({
               cursor: "grab"
             },
             children: [
-              /* @__PURE__ */ a(vt, { listening: !1, children: dt.map((t) => /* @__PURE__ */ a(
-                Tt,
+              /* @__PURE__ */ c(St, { listening: !1, children: gt.map((t) => /* @__PURE__ */ c(
+                Xt,
                 {
                   stage: t,
-                  stageColor: ht.stageColor
+                  stageColor: ft.stageColor
                 },
                 t.id
               )) }),
-              /* @__PURE__ */ a(vt, { listening: !1, children: ut.map((t) => /* @__PURE__ */ a(Lt, { text: t }, t.id)) }),
-              /* @__PURE__ */ a(vt, { children: q.map((t) => /* @__PURE__ */ a(
+              /* @__PURE__ */ c(St, { listening: !1, children: pt.map((t) => /* @__PURE__ */ c(Yt, { text: t }, t.id)) }),
+              /* @__PURE__ */ c(St, { children: q.map((t) => /* @__PURE__ */ c(
                 Wt,
                 {
                   seat: t,
-                  state: nt(t),
-                  colors: ht,
+                  state: ot(t),
+                  colors: ft,
                   onClick: Vt,
                   onMouseEnter: Ut,
                   onMouseLeave: Kt
@@ -770,40 +775,40 @@ const pe = ({
             ]
           }
         ),
-        I && /* @__PURE__ */ a(
-          Xt,
+        I && /* @__PURE__ */ c(
+          At,
           {
-            visible: tt.visible,
-            x: tt.x,
-            y: tt.y,
-            seat: tt.seat,
-            currency: ht.currency,
-            state: tt.state
+            visible: nt.visible,
+            x: nt.x,
+            y: nt.y,
+            seat: nt.seat,
+            currency: ft.currency,
+            state: nt.state
           }
         ),
-        ot && v && /* @__PURE__ */ a(
-          Et,
+        ct && b && /* @__PURE__ */ c(
+          $t,
           {
             scale: R,
             minScale: G,
-            maxScale: $,
-            fitScale: Mt,
+            maxScale: Y,
+            fitScale: It,
             onZoomIn: Zt,
             onZoomOut: _t,
-            onFitToScreen: xt,
-            position: rt,
-            className: st
+            onFitToScreen: bt,
+            position: at,
+            className: lt
           }
         ),
-        it.length > 0 && /* @__PURE__ */ k("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
+        rt.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 (",
-            it.length,
+            rt.length,
             ")"
           ] }),
-          /* @__PURE__ */ a("div", { className: "max-h-48 overflow-y-auto space-y-1", children: it.map((t) => /* @__PURE__ */ k("div", { className: "text-sm", children: [
+          /* @__PURE__ */ c("div", { className: "max-h-48 overflow-y-auto space-y-1", children: rt.map((t) => /* @__PURE__ */ k("div", { className: "text-sm", children: [
             t.seatNumber,
-            t.price && ` - ${ht.currency} ${t.price.toFixed(2)}`
+            t.price && ` - ${ft.currency} ${t.price.toFixed(2)}`
           ] }, t.id)) })
         ] })
       ]
@@ -813,11 +818,11 @@ const pe = ({
 export {
   de as DEFAULT_COLORS,
   pe as SeatMapViewer,
-  be as clearFirebaseInstance,
-  me as getFirebaseDatabase,
+  me as clearFirebaseInstance,
+  be as getFirebaseDatabase,
   ve as initializeFirebaseForViewer,
   Se as isFirebaseInitialized,
-  ce as useConfigFetcher,
+  ae as useConfigFetcher,
   le as useContainerSize,
   we as useFirebaseConfig,
   Ce as useFirebaseSeatStates,