@zonetrix/viewer 2.10.7 → 2.11.0

package/dist/index.mjs

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