@zonetrix/viewer 2.11.0 → 2.11.2

package/dist/index.mjs

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