@zonetrix/viewer 2.11.2 → 2.12.0

package/dist/index.mjs

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