@zonetrix/viewer 2.9.0 → 2.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -1,99 +1,99 @@
1
- import { jsx as p, jsxs as k } from "react/jsx-runtime";
2
- import { useState as M, useEffect as Y, useRef as W, useCallback as D, useMemo as $, memo as it } from "react";
3
- import { Stage as se, Layer as Et, Group as ae, Rect as kt, Text as Ft, Circle as ce } from "react-konva";
4
- import { ref as mt, onValue as Lt, off as Dt, get as le } from "firebase/database";
5
- import { fromFirebaseSeatMap as ue } from "@zonetrix/shared";
6
- function de(e) {
7
- const [n, s] = M(null), [o, h] = M(!1), [f, l] = M(null), m = async () => {
8
- if (e) {
9
- h(!0), l(null);
1
+ import { jsx as y, jsxs as k } from "react/jsx-runtime";
2
+ import { useState as C, useEffect as j, useRef as N, useCallback as L, useMemo as H, memo as se } from "react";
3
+ import { Stage as ct, Layer as Fe, Group as lt, Rect as Le, Text as Ie, Circle as ut } from "react-konva";
4
+ import { ref as we, onValue as Ne, off as Te, get as dt } from "firebase/database";
5
+ import { fromFirebaseSeatMap as ht } from "@zonetrix/shared";
6
+ function ft(t) {
7
+ const [n, o] = C(null), [r, d] = C(!1), [l, a] = C(null), m = async () => {
8
+ if (t) {
9
+ d(!0), a(null);
10
10
  try {
11
- const u = await fetch(e);
12
- if (!u.ok)
13
- throw new Error(`Failed to fetch config: ${u.statusText}`);
14
- const i = await u.json();
15
- s(i);
16
- } catch (u) {
17
- const i = u instanceof Error ? u : new Error("Unknown error occurred");
18
- l(i), console.error("Failed to fetch seat map config:", i);
11
+ const f = await fetch(t);
12
+ if (!f.ok)
13
+ throw new Error(`Failed to fetch config: ${f.statusText}`);
14
+ const i = await f.json();
15
+ o(i);
16
+ } catch (f) {
17
+ const i = f instanceof Error ? f : new Error("Unknown error occurred");
18
+ a(i), console.error("Failed to fetch seat map config:", i);
19
19
  } finally {
20
- h(!1);
20
+ d(!1);
21
21
  }
22
22
  }
23
23
  };
24
- return Y(() => {
24
+ return j(() => {
25
25
  m();
26
- }, [e]), {
26
+ }, [t]), {
27
27
  config: n,
28
- loading: o,
29
- error: f,
28
+ loading: r,
29
+ error: l,
30
30
  refetch: m
31
31
  };
32
32
  }
33
- function he(e) {
34
- const [n, s] = M({ width: 0, height: 0 });
35
- return Y(() => {
36
- const o = e.current;
37
- if (!o) return;
38
- const { width: h, height: f } = o.getBoundingClientRect();
39
- h > 0 && f > 0 && s({ width: h, height: f });
40
- const l = new ResizeObserver((m) => {
41
- const u = m[0];
42
- if (!u) return;
43
- const { width: i, height: r } = u.contentRect;
44
- i > 0 && r > 0 && s((d) => d.width === i && d.height === r ? d : { width: i, height: r });
33
+ function gt(t) {
34
+ const [n, o] = C({ width: 0, height: 0 });
35
+ return j(() => {
36
+ const r = t.current;
37
+ if (!r) return;
38
+ const { width: d, height: l } = r.getBoundingClientRect();
39
+ d > 0 && l > 0 && o({ width: d, height: l });
40
+ const a = new ResizeObserver((m) => {
41
+ const f = m[0];
42
+ if (!f) return;
43
+ const { width: i, height: s } = f.contentRect;
44
+ i > 0 && s > 0 && o((u) => u.width === i && u.height === s ? u : { width: i, height: s });
45
45
  });
46
- return l.observe(o), () => {
47
- l.disconnect();
46
+ return a.observe(r), () => {
47
+ a.disconnect();
48
48
  };
49
- }, [e]), n;
49
+ }, [t]), n;
50
50
  }
51
- function It(e, n) {
52
- return Math.sqrt(Math.pow(n.x - e.x, 2) + Math.pow(n.y - e.y, 2));
51
+ function ke(t, n) {
52
+ return Math.sqrt(Math.pow(n.x - t.x, 2) + Math.pow(n.y - t.y, 2));
53
53
  }
54
- function Rt(e, n) {
54
+ function De(t, n) {
55
55
  return {
56
- x: (e.x + n.x) / 2,
57
- y: (e.y + n.y) / 2
56
+ x: (t.x + n.x) / 2,
57
+ y: (t.y + n.y) / 2
58
58
  };
59
59
  }
60
- function fe(e, n) {
61
- const s = W(null), o = W(null), h = W(1);
62
- Y(() => {
63
- const f = e.current;
64
- if (!f || !n.enabled) return;
65
- const l = f.container(), m = (r) => {
66
- if (r.touches.length === 2) {
67
- r.preventDefault();
68
- const d = { x: r.touches[0].clientX, y: r.touches[0].clientY }, a = { x: r.touches[1].clientX, y: r.touches[1].clientY };
69
- s.current = It(d, a), o.current = Rt(d, a), h.current = n.currentScale;
60
+ function pt(t, n) {
61
+ const o = N(null), r = N(null), d = N(1);
62
+ j(() => {
63
+ const l = t.current;
64
+ if (!l || !n.enabled) return;
65
+ const a = l.container(), m = (s) => {
66
+ if (s.touches.length === 2) {
67
+ s.preventDefault();
68
+ const u = { x: s.touches[0].clientX, y: s.touches[0].clientY }, h = { x: s.touches[1].clientX, y: s.touches[1].clientY };
69
+ o.current = ke(u, h), r.current = De(u, h), d.current = n.currentScale;
70
70
  }
71
- }, u = (r) => {
72
- if (r.touches.length !== 2) return;
73
- r.preventDefault();
74
- const d = { x: r.touches[0].clientX, y: r.touches[0].clientY }, a = { x: r.touches[1].clientX, y: r.touches[1].clientY }, w = It(d, a), S = Rt(d, a);
75
- if (s.current !== null && o.current !== null) {
76
- const C = w / s.current, F = Math.min(
77
- Math.max(n.currentScale * C, n.minScale),
71
+ }, f = (s) => {
72
+ if (s.touches.length !== 2) return;
73
+ s.preventDefault();
74
+ const u = { x: s.touches[0].clientX, y: s.touches[0].clientY }, h = { x: s.touches[1].clientX, y: s.touches[1].clientY }, x = ke(u, h), S = De(u, h);
75
+ if (o.current !== null && r.current !== null) {
76
+ const R = x / o.current, F = Math.min(
77
+ Math.max(n.currentScale * R, n.minScale),
78
78
  n.maxScale
79
- ), I = l.getBoundingClientRect(), R = S.x - I.left, z = S.y - I.top, A = n.currentScale, H = {
80
- x: (R - n.currentPosition.x) / A,
81
- y: (z - n.currentPosition.y) / A
82
- }, O = S.x - o.current.x, j = S.y - o.current.y, st = {
83
- x: R - H.x * F + O,
84
- y: z - H.y * F + j
79
+ ), I = a.getBoundingClientRect(), M = S.x - I.left, T = S.y - I.top, z = n.currentScale, X = {
80
+ x: (M - n.currentPosition.x) / z,
81
+ y: (T - n.currentPosition.y) / z
82
+ }, _ = S.x - r.current.x, O = S.y - r.current.y, J = {
83
+ x: M - X.x * F + _,
84
+ y: T - X.y * F + O
85
85
  };
86
- n.onScaleChange(F, st), s.current = w, o.current = S;
86
+ n.onScaleChange(F, J), o.current = x, r.current = S;
87
87
  }
88
- }, i = (r) => {
89
- r.touches.length < 2 && (s.current = null, o.current = null);
88
+ }, i = (s) => {
89
+ s.touches.length < 2 && (o.current = null, r.current = null);
90
90
  };
91
- return l.addEventListener("touchstart", m, { passive: !1 }), l.addEventListener("touchmove", u, { passive: !1 }), l.addEventListener("touchend", i), () => {
92
- l.removeEventListener("touchstart", m), l.removeEventListener("touchmove", u), l.removeEventListener("touchend", i);
91
+ return a.addEventListener("touchstart", m, { passive: !1 }), a.addEventListener("touchmove", f, { passive: !1 }), a.addEventListener("touchend", i), () => {
92
+ a.removeEventListener("touchstart", m), a.removeEventListener("touchmove", f), a.removeEventListener("touchend", i);
93
93
  };
94
- }, [e, n]);
94
+ }, [t, n]);
95
95
  }
96
- const ge = {
96
+ const yt = {
97
97
  canvasBackground: "#1a1a1a",
98
98
  stageColor: "#808080",
99
99
  seatAvailable: "#2C2B30",
@@ -103,56 +103,56 @@ const ge = {
103
103
  seatHidden: "#4a4a4a",
104
104
  gridLines: "#404040",
105
105
  currency: "KD"
106
- }, Nt = it(({ seat: e, state: n, colors: s, onClick: o, onMouseEnter: h, onMouseLeave: f }) => {
107
- const u = {
108
- available: s.seatAvailable,
109
- reserved: s.seatReserved,
110
- selected: s.seatSelected,
111
- unavailable: s.seatUnavailable,
112
- hidden: s.seatHidden
106
+ }, ze = se(({ seat: t, state: n, colors: o, onClick: r, onMouseEnter: d, onMouseLeave: l }) => {
107
+ const f = {
108
+ available: o.seatAvailable,
109
+ reserved: o.seatReserved,
110
+ selected: o.seatSelected,
111
+ unavailable: o.seatUnavailable,
112
+ hidden: o.seatHidden
113
113
  // Hidden seats are filtered out, but included for type safety
114
- }[n], i = n === "available" || n === "selected", r = D(() => {
115
- i && o(e);
116
- }, [e, o, i]), d = D((S) => {
117
- h(e, S);
118
- const C = S.target.getStage();
119
- C && i && (C.container().style.cursor = "pointer");
120
- }, [e, h, i]), a = D((S) => {
121
- f();
122
- const C = S.target.getStage();
123
- C && (C.container().style.cursor = "grab");
124
- }, [f]), w = {
125
- x: e.position.x,
126
- y: e.position.y,
127
- fill: u,
114
+ }[n], i = n === "available" || n === "selected", s = L(() => {
115
+ i && r(t);
116
+ }, [t, r, i]), u = L((S) => {
117
+ d(t, S);
118
+ const R = S.target.getStage();
119
+ R && i && (R.container().style.cursor = "pointer");
120
+ }, [t, d, i]), h = L((S) => {
121
+ l();
122
+ const R = S.target.getStage();
123
+ R && (R.container().style.cursor = "grab");
124
+ }, [l]), x = {
125
+ x: t.position.x,
126
+ y: t.position.y,
127
+ fill: f,
128
128
  stroke: "#ffffff",
129
129
  strokeWidth: 1,
130
- onClick: r,
131
- onTap: r,
132
- onMouseEnter: d,
133
- onMouseLeave: a
130
+ onClick: s,
131
+ onTap: s,
132
+ onMouseEnter: u,
133
+ onMouseLeave: h
134
134
  };
135
- return e.shape === "circle" ? /* @__PURE__ */ p(
136
- ce,
135
+ return t.shape === "circle" ? /* @__PURE__ */ y(
136
+ ut,
137
137
  {
138
- ...w,
138
+ ...x,
139
139
  radius: 12
140
140
  }
141
- ) : /* @__PURE__ */ p(
142
- kt,
141
+ ) : /* @__PURE__ */ y(
142
+ Le,
143
143
  {
144
- ...w,
144
+ ...x,
145
145
  width: 24,
146
146
  height: 24,
147
147
  offsetX: 12,
148
148
  offsetY: 12,
149
- cornerRadius: e.shape === "square" ? 0 : 4
149
+ cornerRadius: t.shape === "square" ? 0 : 4
150
150
  }
151
151
  );
152
152
  });
153
- Nt.displayName = "ViewerSeat";
154
- const zt = it(({ stage: e, stageColor: n }) => {
155
- const s = (f) => ({
153
+ ze.displayName = "ViewerSeat";
154
+ const Ae = se(({ stage: t, stageColor: n }) => {
155
+ const o = (l) => ({
156
156
  stage: "🎭",
157
157
  table: "⬜",
158
158
  wall: "▬",
@@ -161,41 +161,41 @@ const zt = it(({ stage: e, stageColor: n }) => {
161
161
  bar: "🍷",
162
162
  "entry-exit": "🚪",
163
163
  custom: "➕"
164
- })[f || "stage"] || "🎭", o = e.config.color || n, h = s(e.config.objectType);
165
- return /* @__PURE__ */ k(ae, { x: e.position.x, y: e.position.y, rotation: e.config.rotation || 0, children: [
166
- /* @__PURE__ */ p(
167
- kt,
164
+ })[l || "stage"] || "🎭", r = t.config.color || n, d = o(t.config.objectType);
165
+ return /* @__PURE__ */ k(lt, { x: t.position.x, y: t.position.y, rotation: t.config.rotation || 0, children: [
166
+ /* @__PURE__ */ y(
167
+ Le,
168
168
  {
169
- width: e.config.width,
170
- height: e.config.height,
171
- fill: o + "80",
169
+ width: t.config.width,
170
+ height: t.config.height,
171
+ fill: r + "80",
172
172
  stroke: "#ffffff",
173
173
  strokeWidth: 2,
174
174
  cornerRadius: 10
175
175
  }
176
176
  ),
177
- /* @__PURE__ */ p(
178
- Ft,
177
+ /* @__PURE__ */ y(
178
+ Ie,
179
179
  {
180
- text: h,
180
+ text: d,
181
181
  x: 0,
182
182
  y: 0,
183
- width: e.config.width,
184
- height: e.config.height * 0.4,
183
+ width: t.config.width,
184
+ height: t.config.height * 0.4,
185
185
  fontSize: 32,
186
186
  fill: "#ffffff",
187
187
  align: "center",
188
188
  verticalAlign: "middle"
189
189
  }
190
190
  ),
191
- /* @__PURE__ */ p(
192
- Ft,
191
+ /* @__PURE__ */ y(
192
+ Ie,
193
193
  {
194
- text: e.config.label,
194
+ text: t.config.label,
195
195
  x: 0,
196
- y: e.config.height * 0.4,
197
- width: e.config.width,
198
- height: e.config.height * 0.6,
196
+ y: t.config.height * 0.4,
197
+ width: t.config.width,
198
+ height: t.config.height * 0.6,
199
199
  fontSize: 20,
200
200
  fontStyle: "bold",
201
201
  fill: "#ffffff",
@@ -205,19 +205,19 @@ const zt = it(({ stage: e, stageColor: n }) => {
205
205
  )
206
206
  ] });
207
207
  });
208
- zt.displayName = "ViewerStage";
209
- const Tt = it(({
210
- floors: e,
208
+ Ae.displayName = "ViewerStage";
209
+ const Xe = se(({
210
+ floors: t,
211
211
  currentFloorId: n,
212
- onFloorChange: s,
213
- showAllOption: o,
214
- allLabel: h,
215
- position: f,
216
- className: l
212
+ onFloorChange: o,
213
+ showAllOption: r,
214
+ allLabel: d,
215
+ position: l,
216
+ className: a
217
217
  }) => {
218
- const m = $(
219
- () => [...e].sort((a, w) => a.order - w.order),
220
- [e]
218
+ const m = H(
219
+ () => [...t].sort((h, x) => h.order - x.order),
220
+ [t]
221
221
  ), i = {
222
222
  position: "absolute",
223
223
  display: "flex",
@@ -233,8 +233,8 @@ const Tt = it(({
233
233
  "top-right": { top: 0, right: 0 },
234
234
  "bottom-left": { bottom: 0, left: 0 },
235
235
  "bottom-right": { bottom: 0, right: 0 }
236
- }[f]
237
- }, r = {
236
+ }[l]
237
+ }, s = {
238
238
  padding: "10px 16px",
239
239
  fontSize: "14px",
240
240
  fontWeight: 500,
@@ -246,44 +246,44 @@ const Tt = it(({
246
246
  transition: "all 0.2s ease",
247
247
  minHeight: "44px",
248
248
  touchAction: "manipulation"
249
- }, d = {
250
- ...r,
249
+ }, u = {
250
+ ...s,
251
251
  backgroundColor: "#3A7DE5",
252
252
  borderColor: "#3A7DE5"
253
253
  };
254
- return /* @__PURE__ */ k("div", { className: l, style: i, children: [
255
- o && /* @__PURE__ */ p(
254
+ return /* @__PURE__ */ k("div", { className: a, style: i, children: [
255
+ r && /* @__PURE__ */ y(
256
256
  "button",
257
257
  {
258
258
  type: "button",
259
- onClick: () => s(null),
260
- style: n === null ? d : r,
261
- children: h
259
+ onClick: () => o(null),
260
+ style: n === null ? u : s,
261
+ children: d
262
262
  }
263
263
  ),
264
- m.map((a) => /* @__PURE__ */ p(
264
+ m.map((h) => /* @__PURE__ */ y(
265
265
  "button",
266
266
  {
267
267
  type: "button",
268
- onClick: () => s(a.id),
269
- style: n === a.id ? d : r,
270
- children: a.name
268
+ onClick: () => o(h.id),
269
+ style: n === h.id ? u : s,
270
+ children: h.name
271
271
  },
272
- a.id
272
+ h.id
273
273
  ))
274
274
  ] });
275
275
  });
276
- Tt.displayName = "FloorSelectorBar";
277
- const Xt = it(({
278
- scale: e,
276
+ Xe.displayName = "FloorSelectorBar";
277
+ const Ye = se(({
278
+ scale: t,
279
279
  minScale: n,
280
- maxScale: s,
281
- onZoomIn: o,
282
- onZoomOut: h,
283
- position: f,
284
- className: l
280
+ maxScale: o,
281
+ onZoomIn: r,
282
+ onZoomOut: d,
283
+ position: l,
284
+ className: a
285
285
  }) => {
286
- const u = {
286
+ const f = {
287
287
  position: "absolute",
288
288
  display: "flex",
289
289
  flexDirection: "column",
@@ -298,7 +298,7 @@ const Xt = it(({
298
298
  "top-right": { top: 0, right: 0 },
299
299
  "bottom-left": { bottom: 0, left: 0 },
300
300
  "bottom-right": { bottom: 0, right: 0 }
301
- }[f]
301
+ }[l]
302
302
  }, i = {
303
303
  width: "44px",
304
304
  height: "44px",
@@ -316,53 +316,53 @@ const Xt = it(({
316
316
  justifyContent: "center",
317
317
  transition: "all 0.2s ease",
318
318
  touchAction: "manipulation"
319
- }, r = {
319
+ }, s = {
320
320
  ...i,
321
321
  opacity: 0.4,
322
322
  cursor: "not-allowed"
323
- }, d = e < s, a = e > n;
324
- return /* @__PURE__ */ k("div", { className: l, style: u, children: [
325
- /* @__PURE__ */ p(
323
+ }, u = t < o, h = t > n;
324
+ return /* @__PURE__ */ k("div", { className: a, style: f, children: [
325
+ /* @__PURE__ */ y(
326
326
  "button",
327
327
  {
328
328
  type: "button",
329
- onClick: o,
330
- disabled: !d,
331
- style: d ? i : r,
329
+ onClick: r,
330
+ disabled: !u,
331
+ style: u ? i : s,
332
332
  title: "Zoom In",
333
333
  children: "+"
334
334
  }
335
335
  ),
336
- /* @__PURE__ */ p(
336
+ /* @__PURE__ */ y(
337
337
  "button",
338
338
  {
339
339
  type: "button",
340
- onClick: h,
341
- disabled: !a,
342
- style: a ? i : r,
340
+ onClick: d,
341
+ disabled: !h,
342
+ style: h ? i : s,
343
343
  title: "Zoom Out",
344
344
  children: "−"
345
345
  }
346
346
  )
347
347
  ] });
348
348
  });
349
- Xt.displayName = "ZoomControls";
350
- const Yt = it(({
351
- visible: e,
349
+ Ye.displayName = "ZoomControls";
350
+ const je = se(({
351
+ visible: t,
352
352
  x: n,
353
- y: s,
354
- seat: o,
355
- currency: h,
356
- state: f
353
+ y: o,
354
+ seat: r,
355
+ currency: d,
356
+ state: l
357
357
  }) => {
358
- if (!e || !o) return null;
359
- const l = o.seatNumber || (o.rowLabel && o.columnLabel ? `${o.rowLabel}-${o.columnLabel}` : "N/A"), m = {
358
+ if (!t || !r) return null;
359
+ const a = r.seatNumber || (r.rowLabel && r.columnLabel ? `${r.rowLabel}-${r.columnLabel}` : "N/A"), m = {
360
360
  position: "fixed",
361
361
  left: `${n + 15}px`,
362
- top: `${s + 15}px`,
362
+ top: `${o + 15}px`,
363
363
  zIndex: 1e3,
364
364
  pointerEvents: "none"
365
- }, u = {
365
+ }, f = {
366
366
  backgroundColor: "rgba(26, 26, 26, 0.95)",
367
367
  color: "#fff",
368
368
  border: "1px solid #444",
@@ -374,476 +374,504 @@ const Yt = it(({
374
374
  }, i = {
375
375
  color: "#9ca3af",
376
376
  marginRight: "4px"
377
- }, r = {
377
+ }, s = {
378
378
  fontWeight: 600
379
- }, d = {
379
+ }, u = {
380
380
  color: "#4ade80",
381
381
  fontWeight: 600
382
- }, a = {
382
+ }, h = {
383
383
  fontSize: "11px",
384
384
  color: "#6b7280",
385
385
  textTransform: "capitalize",
386
386
  marginTop: "4px"
387
387
  };
388
- return /* @__PURE__ */ p("div", { style: m, children: /* @__PURE__ */ k("div", { style: u, children: [
389
- o.sectionName && /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
390
- /* @__PURE__ */ p("span", { style: i, children: "Section:" }),
391
- /* @__PURE__ */ p("span", { style: { ...r, color: "#3b82f6" }, children: o.sectionName })
388
+ return /* @__PURE__ */ y("div", { style: m, children: /* @__PURE__ */ k("div", { style: f, children: [
389
+ r.sectionName && /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
390
+ /* @__PURE__ */ y("span", { style: i, children: "Section:" }),
391
+ /* @__PURE__ */ y("span", { style: { ...s, color: "#3b82f6" }, children: r.sectionName })
392
392
  ] }),
393
393
  /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
394
- /* @__PURE__ */ p("span", { style: i, children: "Seat:" }),
395
- /* @__PURE__ */ p("span", { style: r, children: l })
394
+ /* @__PURE__ */ y("span", { style: i, children: "Seat:" }),
395
+ /* @__PURE__ */ y("span", { style: s, children: a })
396
396
  ] }),
397
- o.price !== void 0 && o.price > 0 && f === "available" && /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
398
- /* @__PURE__ */ p("span", { style: i, children: "Price:" }),
399
- /* @__PURE__ */ k("span", { style: d, children: [
400
- h,
397
+ r.price !== void 0 && r.price > 0 && l === "available" && /* @__PURE__ */ k("div", { style: { marginBottom: "4px" }, children: [
398
+ /* @__PURE__ */ y("span", { style: i, children: "Price:" }),
399
+ /* @__PURE__ */ k("span", { style: u, children: [
400
+ d,
401
401
  " ",
402
- o.price.toFixed(2)
402
+ r.price.toFixed(2)
403
403
  ] })
404
404
  ] }),
405
- /* @__PURE__ */ k("div", { style: a, children: [
405
+ /* @__PURE__ */ k("div", { style: h, children: [
406
406
  "Status: ",
407
- f
407
+ l
408
408
  ] })
409
409
  ] }) });
410
410
  });
411
- Yt.displayName = "SeatTooltip";
412
- const we = ({
413
- config: e,
411
+ je.displayName = "SeatTooltip";
412
+ const Et = ({
413
+ config: t,
414
414
  configUrl: n,
415
- floorId: s,
416
- onFloorChange: o,
417
- reservedSeats: h = [],
418
- unavailableSeats: f = [],
419
- selectedSeats: l,
420
- onSeatSelect: m,
421
- onSeatDeselect: u,
422
- onSelectionChange: i,
423
- colorOverrides: r,
424
- showTooltip: d = !0,
425
- zoomEnabled: a = !0,
426
- className: w = "",
427
- onConfigLoad: S,
428
- onError: C,
415
+ floorId: o,
416
+ onFloorChange: r,
417
+ reservedSeats: d = [],
418
+ unavailableSeats: l = [],
419
+ selectedSeats: a,
420
+ myReservedSeats: m = [],
421
+ onSeatSelect: f,
422
+ onSeatDeselect: i,
423
+ onSelectionChange: s,
424
+ colorOverrides: u,
425
+ showTooltip: h = !0,
426
+ zoomEnabled: x = !0,
427
+ className: S = "",
428
+ onConfigLoad: R,
429
+ onError: F,
429
430
  // Floor selector props
430
- showFloorSelector: F,
431
- floorSelectorPosition: I = "top-left",
432
- floorSelectorClassName: R,
431
+ showFloorSelector: I,
432
+ floorSelectorPosition: M = "top-left",
433
+ floorSelectorClassName: T,
433
434
  showAllFloorsOption: z = !0,
434
- allFloorsLabel: A = "All",
435
- fitToView: H = !0,
435
+ allFloorsLabel: X = "All",
436
+ fitToView: _ = !0,
436
437
  fitPadding: O = 40,
437
438
  // Zoom controls
438
- showZoomControls: j = !0,
439
- zoomControlsPosition: st = "bottom-right",
440
- zoomControlsClassName: G,
441
- minZoom: Z,
442
- maxZoom: T = 3,
443
- zoomStep: B = 0.25,
439
+ showZoomControls: J = !0,
440
+ zoomControlsPosition: ge = "bottom-right",
441
+ zoomControlsClassName: ae,
442
+ minZoom: pe,
443
+ maxZoom: W = 3,
444
+ zoomStep: P = 0.25,
444
445
  // Touch gestures
445
- touchEnabled: at = !0
446
+ touchEnabled: Me = !0
446
447
  }) => {
447
- const gt = W(null), wt = W(null), E = he(wt), [U, Ct] = M(/* @__PURE__ */ new Set()), [L, K] = M(1), [N, V] = M({ x: 0, y: 0 }), [Wt, jt] = M(null), [Pt, $t] = M(1), ct = W({ width: 0, height: 0 }), [J, Mt] = M({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: At, loading: Bt, error: Q } = de(n), g = e || At, pt = s !== void 0, X = pt ? s || null : Wt, lt = l !== void 0, Vt = D((t) => {
448
- pt || jt(t), o?.(t);
449
- }, [pt, o]), bt = g?.floors || [], Ht = F !== void 0 ? F : bt.length > 1, ut = $(
450
- () => g ? { ...g.colors, ...r } : { ...ge, ...r },
451
- [g, r]
452
- ), _ = $(() => {
448
+ const $ = N(null), U = N(null), E = gt(U), [B, ye] = C(/* @__PURE__ */ new Set()), [D, Q] = C(1), [A, q] = C({ x: 0, y: 0 }), [We, Pe] = C(null), [$e, Be] = C(1), ce = N({ width: 0, height: 0 }), [ee, Ee] = C({ visible: !1, x: 0, y: 0, seat: null, state: "available" }), { config: Oe, loading: Ue, error: te } = ft(n), g = t || Oe, be = o !== void 0, Y = be ? o || null : We, le = a !== void 0, Ve = L((e) => {
449
+ be || Pe(e), r?.(e);
450
+ }, [be, r]), ve = g?.floors || [], He = I !== void 0 ? I : ve.length > 1, ue = H(
451
+ () => g ? { ...g.colors, ...u } : { ...yt, ...u },
452
+ [g, u]
453
+ ), Z = H(() => {
453
454
  if (!g) return [];
454
- let t = g.seats.filter((c) => c.state !== "hidden");
455
- return X && (t = t.filter(
456
- (c) => c.floorId === X || !c.floorId && X === "floor_default"
457
- )), t;
458
- }, [g, X]), dt = $(() => g?.stages ? X ? g.stages.filter(
459
- (t) => t.floorId === X || !t.floorId && X === "floor_default"
460
- ) : g.stages : [], [g, X]), P = $(() => {
461
- if (!g || _.length === 0 && dt.length === 0)
455
+ let e = g.seats.filter((c) => c.state !== "hidden");
456
+ return Y && (e = e.filter(
457
+ (c) => c.floorId === Y || !c.floorId && Y === "floor_default"
458
+ )), e;
459
+ }, [g, Y]), de = H(() => g?.stages ? Y ? g.stages.filter(
460
+ (e) => e.floorId === Y || !e.floorId && Y === "floor_default"
461
+ ) : g.stages : [], [g, Y]), V = H(() => {
462
+ if (!g || Z.length === 0 && de.length === 0)
462
463
  return null;
463
- const t = 12;
464
- let c = 1 / 0, y = 1 / 0, b = -1 / 0, x = -1 / 0;
465
- return _.forEach((v) => {
466
- c = Math.min(c, v.position.x - t), y = Math.min(y, v.position.y - t), b = Math.max(b, v.position.x + t), x = Math.max(x, v.position.y + t);
467
- }), dt.forEach((v) => {
468
- c = Math.min(c, v.position.x), y = Math.min(y, v.position.y), b = Math.max(b, v.position.x + (v.config?.width || 200)), x = Math.max(x, v.position.y + (v.config?.height || 100));
469
- }), { minX: c, minY: y, maxX: b, maxY: x, width: b - c, height: x - y };
470
- }, [g, _, dt]);
471
- Y(() => {
472
- if (!H || !g || !P || E.width === 0 || E.height === 0) return;
473
- const t = Math.abs(E.width - ct.current.width), c = Math.abs(E.height - ct.current.height);
474
- if (!(ct.current.width === 0) && t < 10 && c < 10) return;
475
- ct.current = E;
476
- const b = E.width, x = E.height, v = b - O * 2, ot = x - O * 2, ht = v / P.width, xt = ot / P.height, ft = Math.min(ht, xt, T), te = P.minX + P.width / 2, ee = P.minY + P.height / 2, ne = b / 2, oe = x / 2, re = ne - te * ft, ie = oe - ee * ft;
477
- K(ft), V({ x: re, y: ie }), $t(ft);
478
- }, [H, g, P, O, T, E, X]);
479
- const tt = $(() => {
480
- const t = new Set(h), c = new Set(f);
481
- return { reserved: t, unavailable: c };
482
- }, [h, f]), yt = $(() => l ? new Set(l) : null, [l]), et = D((t) => {
483
- const c = t.id, y = t.seatNumber || "";
484
- return tt.unavailable.has(c) || tt.unavailable.has(y) ? "unavailable" : tt.reserved.has(c) || tt.reserved.has(y) ? "reserved" : U.has(c) ? "selected" : t.state;
485
- }, [tt, U]);
486
- Y(() => {
487
- g && S && S(g);
488
- }, [g, S]), Y(() => {
489
- Q && C && C(Q);
490
- }, [Q, C]), Y(() => {
491
- lt && yt && Ct(yt);
492
- }, [lt, yt]);
493
- const Ot = D((t) => {
494
- const c = et(t);
464
+ const e = 12;
465
+ let c = 1 / 0, p = 1 / 0, b = -1 / 0, v = -1 / 0;
466
+ return Z.forEach((w) => {
467
+ c = Math.min(c, w.position.x - e), p = Math.min(p, w.position.y - e), b = Math.max(b, w.position.x + e), v = Math.max(v, w.position.y + e);
468
+ }), de.forEach((w) => {
469
+ c = Math.min(c, w.position.x), p = Math.min(p, w.position.y), b = Math.max(b, w.position.x + (w.config?.width || 200)), v = Math.max(v, w.position.y + (w.config?.height || 100));
470
+ }), { minX: c, minY: p, maxX: b, maxY: v, width: b - c, height: v - p };
471
+ }, [g, Z, de]);
472
+ j(() => {
473
+ if (!_ || !g || !V || E.width === 0 || E.height === 0) return;
474
+ const e = Math.abs(E.width - ce.current.width), c = Math.abs(E.height - ce.current.height);
475
+ if (!(ce.current.width === 0) && e < 10 && c < 10) return;
476
+ ce.current = E;
477
+ const b = E.width, v = E.height, w = b - O * 2, oe = v - O * 2, he = w / V.width, xe = oe / V.height, fe = Math.min(he, xe, W), nt = V.minX + V.width / 2, rt = V.minY + V.height / 2, ot = b / 2, it = v / 2, st = ot - nt * fe, at = it - rt * fe;
478
+ Q(fe), q({ x: st, y: at }), Be(fe);
479
+ }, [_, g, V, O, W, E, Y]);
480
+ const G = H(() => {
481
+ const e = new Set(d), c = new Set(l), p = new Set(m);
482
+ return { reserved: e, unavailable: c, myReserved: p };
483
+ }, [d, l, m]), me = H(() => a ? new Set(a) : null, [a]), ne = L((e) => {
484
+ const c = e.id, p = e.seatNumber || "";
485
+ return G.unavailable.has(c) || G.unavailable.has(p) ? "unavailable" : G.reserved.has(c) || G.reserved.has(p) ? "reserved" : G.myReserved.has(c) || G.myReserved.has(p) || B.has(c) ? "selected" : e.state;
486
+ }, [G, B]);
487
+ j(() => {
488
+ g && R && R(g);
489
+ }, [g, R]), j(() => {
490
+ te && F && F(te);
491
+ }, [te, F]), j(() => {
492
+ le && me && ye(me);
493
+ }, [le, me]);
494
+ const _e = L((e) => {
495
+ const c = ne(e);
495
496
  if (c !== "available" && c !== "selected")
496
497
  return;
497
- const y = U.has(t.id);
498
- lt || Ct((b) => {
499
- const x = new Set(b);
500
- return y ? x.delete(t.id) : x.add(t.id), x;
501
- }), y ? u?.(t) : (m?.(t), m || console.log("Seat selected:", t));
502
- }, [et, U, lt, m, u]), nt = $(() => g ? _.filter((t) => U.has(t.id)) : [], [_, U]);
503
- Y(() => {
504
- i?.(nt);
505
- }, [nt, i]);
506
- const q = Z !== void 0 ? Z : Pt, Ut = D(() => {
507
- if (!a) return;
508
- const t = Math.min(L + B, T);
509
- if (t !== L) {
510
- const c = E.width || g?.canvas.width || 800, y = E.height || g?.canvas.height || 600, b = c / 2, x = y / 2, v = {
511
- x: (b - N.x) / L,
512
- y: (x - N.y) / L
498
+ const p = B.has(e.id);
499
+ le || ye((b) => {
500
+ const v = new Set(b);
501
+ return p ? v.delete(e.id) : v.add(e.id), v;
502
+ }), p ? i?.(e) : (f?.(e), f || console.log("Seat selected:", e));
503
+ }, [ne, B, le, f, i]), re = H(() => g ? Z.filter((e) => B.has(e.id)) : [], [Z, B]);
504
+ j(() => {
505
+ s?.(re);
506
+ }, [re, s]);
507
+ const K = pe !== void 0 ? pe : $e, qe = L(() => {
508
+ if (!x) return;
509
+ const e = Math.min(D + P, W);
510
+ if (e !== D) {
511
+ const c = E.width || g?.canvas.width || 800, p = E.height || g?.canvas.height || 600, b = c / 2, v = p / 2, w = {
512
+ x: (b - A.x) / D,
513
+ y: (v - A.y) / D
513
514
  };
514
- K(t), V({
515
- x: b - v.x * t,
516
- y: x - v.y * t
515
+ Q(e), q({
516
+ x: b - w.x * e,
517
+ y: v - w.y * e
517
518
  });
518
519
  }
519
- }, [a, L, B, T, E, g, N]), _t = D(() => {
520
- if (!a) return;
521
- const t = Math.max(L - B, q);
522
- if (t !== L) {
523
- const c = E.width || g?.canvas.width || 800, y = E.height || g?.canvas.height || 600, b = c / 2, x = y / 2, v = {
524
- x: (b - N.x) / L,
525
- y: (x - N.y) / L
520
+ }, [x, D, P, W, E, g, A]), Ge = L(() => {
521
+ if (!x) return;
522
+ const e = Math.max(D - P, K);
523
+ if (e !== D) {
524
+ const c = E.width || g?.canvas.width || 800, p = E.height || g?.canvas.height || 600, b = c / 2, v = p / 2, w = {
525
+ x: (b - A.x) / D,
526
+ y: (v - A.y) / D
526
527
  };
527
- K(t), V({
528
- x: b - v.x * t,
529
- y: x - v.y * t
528
+ Q(e), q({
529
+ x: b - w.x * e,
530
+ y: v - w.y * e
530
531
  });
531
532
  }
532
- }, [a, L, B, q, E, g, N]), qt = D((t) => {
533
- V({
534
- x: t.target.x(),
535
- y: t.target.y()
533
+ }, [x, D, P, K, E, g, A]), Je = L((e) => {
534
+ q({
535
+ x: e.target.x(),
536
+ y: e.target.y()
536
537
  });
537
- }, []), Gt = D((t) => {
538
- if (!a) return;
539
- t.evt.preventDefault();
540
- const c = gt.current;
538
+ }, []), Ze = L((e) => {
539
+ if (!x) return;
540
+ e.evt.preventDefault();
541
+ const c = $.current;
541
542
  if (!c) return;
542
- const y = c.scaleX(), b = c.getPointerPosition();
543
+ const p = c.scaleX(), b = c.getPointerPosition();
543
544
  if (!b) return;
544
- const x = 1.1, v = t.evt.deltaY > 0 ? y / x : y * x, ot = Math.min(Math.max(v, q), T), ht = {
545
- x: (b.x - N.x) / y,
546
- y: (b.y - N.y) / y
547
- }, xt = {
548
- x: b.x - ht.x * ot,
549
- y: b.y - ht.y * ot
545
+ const v = 1.1, w = e.evt.deltaY > 0 ? p / v : p * v, oe = Math.min(Math.max(w, K), W), he = {
546
+ x: (b.x - A.x) / p,
547
+ y: (b.y - A.y) / p
548
+ }, xe = {
549
+ x: b.x - he.x * oe,
550
+ y: b.y - he.y * oe
550
551
  };
551
- K(ot), V(xt);
552
- }, [a, N, q, T]);
553
- fe(gt, {
554
- enabled: at && a,
555
- minScale: q,
556
- maxScale: T,
557
- currentScale: L,
558
- currentPosition: N,
559
- onScaleChange: (t, c) => {
560
- K(t), V(c);
552
+ Q(oe), q(xe);
553
+ }, [x, A, K, W]);
554
+ pt($, {
555
+ enabled: Me && x,
556
+ minScale: K,
557
+ maxScale: W,
558
+ currentScale: D,
559
+ currentPosition: A,
560
+ onScaleChange: (e, c) => {
561
+ Q(e), q(c);
561
562
  },
562
- onPositionChange: (t) => {
563
- V(t);
563
+ onPositionChange: (e) => {
564
+ q(e);
564
565
  }
565
566
  });
566
- const Zt = D((t, c) => {
567
- if (!d) return;
568
- const y = c.target.getStage();
569
- if (!y) return;
570
- const b = y.getPointerPosition();
567
+ const Ke = L((e, c) => {
568
+ if (!h) return;
569
+ const p = c.target.getStage();
570
+ if (!p) return;
571
+ const b = p.getPointerPosition();
571
572
  if (!b) return;
572
- const x = y.container().getBoundingClientRect();
573
- Mt({
573
+ const v = p.container().getBoundingClientRect();
574
+ Ee({
574
575
  visible: !0,
575
- x: x.left + b.x,
576
- y: x.top + b.y,
577
- seat: t,
578
- state: et(t)
576
+ x: v.left + b.x,
577
+ y: v.top + b.y,
578
+ seat: e,
579
+ state: ne(e)
579
580
  });
580
- }, [d, et]), Kt = D(() => {
581
- Mt((t) => ({ ...t, visible: !1 }));
581
+ }, [h, ne]), Qe = L(() => {
582
+ Ee((e) => ({ ...e, visible: !1 }));
582
583
  }, []);
583
- if (Bt)
584
- return /* @__PURE__ */ p("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ p("p", { children: "Loading seat map..." }) });
585
- if (Q)
586
- return /* @__PURE__ */ p("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ k("p", { className: "text-red-500", children: [
584
+ if (Ue)
585
+ return /* @__PURE__ */ y("div", { className: `flex items-center justify-center h-full ${S}`, children: /* @__PURE__ */ y("p", { children: "Loading seat map..." }) });
586
+ if (te)
587
+ return /* @__PURE__ */ y("div", { className: `flex items-center justify-center h-full ${S}`, children: /* @__PURE__ */ k("p", { className: "text-red-500", children: [
587
588
  "Error loading seat map: ",
588
- Q.message
589
+ te.message
589
590
  ] }) });
590
591
  if (!g)
591
- return /* @__PURE__ */ p("div", { className: `flex items-center justify-center h-full ${w}`, children: /* @__PURE__ */ p("p", { children: "No configuration provided" }) });
592
- const Jt = E.width || g.canvas.width, Qt = E.height || g.canvas.height;
592
+ return /* @__PURE__ */ y("div", { className: `flex items-center justify-center h-full ${S}`, children: /* @__PURE__ */ y("p", { children: "No configuration provided" }) });
593
+ const et = E.width || g.canvas.width, tt = E.height || g.canvas.height;
593
594
  return /* @__PURE__ */ k(
594
595
  "div",
595
596
  {
596
- ref: wt,
597
- className: `relative ${w}`,
597
+ ref: U,
598
+ className: `relative ${S}`,
598
599
  style: { width: "100%", height: "100%" },
599
600
  children: [
600
- Ht && bt.length > 0 && /* @__PURE__ */ p(
601
- Tt,
601
+ He && ve.length > 0 && /* @__PURE__ */ y(
602
+ Xe,
602
603
  {
603
- floors: bt,
604
- currentFloorId: X,
605
- onFloorChange: Vt,
604
+ floors: ve,
605
+ currentFloorId: Y,
606
+ onFloorChange: Ve,
606
607
  showAllOption: z,
607
- allLabel: A,
608
- position: I,
609
- className: R
608
+ allLabel: X,
609
+ position: M,
610
+ className: T
610
611
  }
611
612
  ),
612
613
  /* @__PURE__ */ k(
613
- se,
614
+ ct,
614
615
  {
615
- ref: gt,
616
- width: Jt,
617
- height: Qt,
618
- scaleX: L,
619
- scaleY: L,
620
- x: N.x,
621
- y: N.y,
616
+ ref: $,
617
+ width: et,
618
+ height: tt,
619
+ scaleX: D,
620
+ scaleY: D,
621
+ x: A.x,
622
+ y: A.y,
622
623
  draggable: !0,
623
- onDragEnd: qt,
624
- onWheel: Gt,
624
+ onDragEnd: Je,
625
+ onWheel: Ze,
625
626
  style: { backgroundColor: g.canvas.backgroundColor, cursor: "grab" },
626
627
  children: [
627
- /* @__PURE__ */ p(Et, { listening: !1, children: dt.map((t) => /* @__PURE__ */ p(
628
- zt,
628
+ /* @__PURE__ */ y(Fe, { listening: !1, children: de.map((e) => /* @__PURE__ */ y(
629
+ Ae,
629
630
  {
630
- stage: t,
631
- stageColor: ut.stageColor
631
+ stage: e,
632
+ stageColor: ue.stageColor
632
633
  },
633
- t.id
634
+ e.id
634
635
  )) }),
635
- /* @__PURE__ */ p(Et, { children: _.map((t) => /* @__PURE__ */ p(
636
- Nt,
636
+ /* @__PURE__ */ y(Fe, { children: Z.map((e) => /* @__PURE__ */ y(
637
+ ze,
637
638
  {
638
- seat: t,
639
- state: et(t),
640
- colors: ut,
641
- onClick: Ot,
642
- onMouseEnter: Zt,
643
- onMouseLeave: Kt
639
+ seat: e,
640
+ state: ne(e),
641
+ colors: ue,
642
+ onClick: _e,
643
+ onMouseEnter: Ke,
644
+ onMouseLeave: Qe
644
645
  },
645
- t.id
646
+ e.id
646
647
  )) })
647
648
  ]
648
649
  }
649
650
  ),
650
- d && /* @__PURE__ */ p(
651
- Yt,
651
+ h && /* @__PURE__ */ y(
652
+ je,
652
653
  {
653
- visible: J.visible,
654
- x: J.x,
655
- y: J.y,
656
- seat: J.seat,
657
- currency: ut.currency,
658
- state: J.state
654
+ visible: ee.visible,
655
+ x: ee.x,
656
+ y: ee.y,
657
+ seat: ee.seat,
658
+ currency: ue.currency,
659
+ state: ee.state
659
660
  }
660
661
  ),
661
- j && a && /* @__PURE__ */ p(
662
- Xt,
662
+ J && x && /* @__PURE__ */ y(
663
+ Ye,
663
664
  {
664
- scale: L,
665
- minScale: q,
666
- maxScale: T,
667
- onZoomIn: Ut,
668
- onZoomOut: _t,
669
- position: st,
670
- className: G
665
+ scale: D,
666
+ minScale: K,
667
+ maxScale: W,
668
+ onZoomIn: qe,
669
+ onZoomOut: Ge,
670
+ position: ge,
671
+ className: ae
671
672
  }
672
673
  ),
673
- nt.length > 0 && /* @__PURE__ */ k("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
674
+ re.length > 0 && /* @__PURE__ */ k("div", { className: "absolute top-4 right-4 bg-white dark:bg-gray-800 p-4 rounded shadow-lg", children: [
674
675
  /* @__PURE__ */ k("h3", { className: "font-semibold mb-2", children: [
675
676
  "Selected Seats (",
676
- nt.length,
677
+ re.length,
677
678
  ")"
678
679
  ] }),
679
- /* @__PURE__ */ p("div", { className: "max-h-48 overflow-y-auto space-y-1", children: nt.map((t) => /* @__PURE__ */ k("div", { className: "text-sm", children: [
680
- t.seatNumber,
681
- t.price && ` - ${ut.currency} ${t.price.toFixed(2)}`
682
- ] }, t.id)) })
680
+ /* @__PURE__ */ y("div", { className: "max-h-48 overflow-y-auto space-y-1", children: re.map((e) => /* @__PURE__ */ k("div", { className: "text-sm", children: [
681
+ e.seatNumber,
682
+ e.price && ` - ${ue.currency} ${e.price.toFixed(2)}`
683
+ ] }, e.id)) })
683
684
  ] })
684
685
  ]
685
686
  }
686
687
  );
687
688
  };
688
- let rt = null;
689
- function Ce(e) {
690
- rt = e;
689
+ let ie = null;
690
+ function Ft(t) {
691
+ ie = t;
691
692
  }
692
- function St() {
693
- if (!rt)
693
+ function Ce() {
694
+ if (!ie)
694
695
  throw new Error(
695
696
  "Firebase database not initialized. Call initializeFirebaseForViewer(db) first."
696
697
  );
697
- return rt;
698
+ return ie;
699
+ }
700
+ function Re() {
701
+ return ie !== null;
702
+ }
703
+ function It() {
704
+ ie = null;
698
705
  }
699
- function vt() {
700
- return rt !== null;
706
+ function Se(t, n) {
707
+ if (t.length !== n.length) return !1;
708
+ for (let o = 0; o < t.length; o++)
709
+ if (t[o] !== n[o]) return !1;
710
+ return !0;
701
711
  }
702
- function Me() {
703
- rt = null;
712
+ function bt(t, n) {
713
+ return Se(t.myReserved, n.myReserved) && Se(t.otherReserved, n.otherReserved) && Se(t.unavailable, n.unavailable);
704
714
  }
705
- function pe(e) {
706
- const { seatMapId: n, enabled: s = !0, onStateChange: o, onError: h } = e, [f, l] = M(null), [m, u] = M(!0), [i, r] = M(null), [d, a] = M(null), [w, S] = M([]), [C, F] = M([]), I = W(o), R = W(h);
707
- return I.current = o, R.current = h, Y(() => {
708
- if (!s || !n) {
709
- u(!1);
715
+ function vt(t, n) {
716
+ const o = [], r = [], d = [];
717
+ return Object.entries(t).forEach(([l, a]) => {
718
+ a && typeof a == "object" && a.state && (a.state === "unavailable" ? d.push(l) : a.state === "reserved" && (n && a.userId === n ? o.push(l) : r.push(l)));
719
+ }), { myReserved: o, otherReserved: r, unavailable: d };
720
+ }
721
+ function mt(t) {
722
+ const { seatMapId: n, currentUserId: o, enabled: r = !0, onStateChange: d, onError: l } = t, [a, m] = C(null), [f, i] = C(!0), [s, u] = C(null), [h, x] = C(null), [S, R] = C([]), [F, I] = C([]), [M, T] = C([]), z = N(d), X = N(l), _ = N(o);
723
+ z.current = d, X.current = l, _.current = o;
724
+ const O = N({
725
+ myReserved: [],
726
+ otherReserved: [],
727
+ unavailable: []
728
+ }), J = N(null);
729
+ return j(() => {
730
+ if (!r || !n) {
731
+ i(!1);
710
732
  return;
711
733
  }
712
- if (!vt()) {
713
- u(!1), r(new Error("Firebase not initialized. Call initializeFirebaseForViewer first."));
734
+ if (!Re()) {
735
+ i(!1), u(new Error("Firebase not initialized. Call initializeFirebaseForViewer first."));
714
736
  return;
715
737
  }
716
- const z = St(), A = mt(z, `seat_states/${n}`);
717
- return u(!0), r(null), Lt(A, (j) => {
718
- const G = j.val() || {};
719
- l(G), u(!1), a(Date.now());
720
- const Z = [], T = [];
721
- Object.entries(G).forEach(([B, at]) => {
722
- at === "reserved" ? Z.push(B) : at === "unavailable" && T.push(B);
723
- }), S(Z), F(T), I.current?.(G);
724
- }, (j) => {
725
- r(j), u(!1), R.current?.(j);
738
+ const ge = Ce(), ae = we(ge, `seat_states/${n}`);
739
+ return i(!0), u(null), Ne(ae, (P) => {
740
+ const $ = P.val() || {}, U = vt($, _.current), E = O.current, B = JSON.stringify(J.current) !== JSON.stringify($);
741
+ B && (m($), J.current = $), i(!1), !bt(E, U) && (x(Date.now()), R(U.myReserved), I(U.otherReserved), T(U.unavailable), O.current = U), B && z.current?.($);
742
+ }, (P) => {
743
+ u(P), i(!1), X.current?.(P);
726
744
  }), () => {
727
- Dt(A);
745
+ Te(ae);
728
746
  };
729
- }, [n, s]), {
730
- states: f,
731
- loading: m,
732
- error: i,
733
- lastUpdated: d,
734
- reservedSeats: w,
735
- unavailableSeats: C
747
+ }, [n, r]), {
748
+ states: a,
749
+ loading: f,
750
+ error: s,
751
+ lastUpdated: h,
752
+ myReservedSeats: S,
753
+ otherReservedSeats: F,
754
+ unavailableSeats: M,
755
+ // Legacy alias
756
+ reservedSeats: F
736
757
  };
737
758
  }
738
- function be(e) {
759
+ function xt(t) {
739
760
  const {
740
761
  seatMapId: n,
741
- enabled: s = !0,
742
- subscribeToChanges: o = !1,
743
- onConfigLoad: h,
744
- onError: f
745
- } = e, [l, m] = M(null), [u, i] = M(!0), [r, d] = M(null), a = W(h), w = W(f);
746
- a.current = h, w.current = f;
747
- const S = D(async () => {
762
+ enabled: o = !0,
763
+ subscribeToChanges: r = !1,
764
+ onConfigLoad: d,
765
+ onError: l
766
+ } = t, [a, m] = C(null), [f, i] = C(!0), [s, u] = C(null), h = N(d), x = N(l);
767
+ h.current = d, x.current = l;
768
+ const S = L(async () => {
748
769
  if (!n) return;
749
- if (!vt()) {
750
- d(new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")), i(!1);
770
+ if (!Re()) {
771
+ u(new Error("Firebase not initialized. Call initializeFirebaseForViewer first.")), i(!1);
751
772
  return;
752
773
  }
753
- const C = St(), F = mt(C, `seatmaps/${n}`);
774
+ const R = Ce(), F = we(R, `seatmaps/${n}`);
754
775
  try {
755
- i(!0), d(null);
756
- const R = (await le(F)).val();
757
- if (R) {
758
- const z = ue(R);
759
- m(z), a.current?.(z);
776
+ i(!0), u(null);
777
+ const M = (await dt(F)).val();
778
+ if (M) {
779
+ const T = ht(M);
780
+ m(T), h.current?.(T);
760
781
  } else
761
- d(new Error(`Seat map ${n} not found in Firebase`));
782
+ u(new Error(`Seat map ${n} not found in Firebase`));
762
783
  } catch (I) {
763
- const R = I instanceof Error ? I : new Error("Unknown error");
764
- d(R), w.current?.(R);
784
+ const M = I instanceof Error ? I : new Error("Unknown error");
785
+ u(M), x.current?.(M);
765
786
  } finally {
766
787
  i(!1);
767
788
  }
768
789
  }, [n]);
769
- return Y(() => {
770
- if (!s || !n) {
790
+ return j(() => {
791
+ if (!o || !n) {
771
792
  i(!1);
772
793
  return;
773
794
  }
774
- if (S(), o && vt()) {
775
- const C = St(), F = mt(C, `seatmaps/${n}/meta/updated_at`);
776
- let I = !0;
777
- return Lt(F, (z) => {
795
+ if (S(), r && Re()) {
796
+ const R = Ce(), F = we(R, `seatmaps/${n}/meta/updated_at`);
797
+ let I = !0, M = null;
798
+ return Ne(F, (z) => {
778
799
  if (I) {
779
- I = !1;
800
+ I = !1, M = z.val();
780
801
  return;
781
802
  }
782
- z.exists() && S();
803
+ const X = z.val();
804
+ z.exists() && X !== M && (M = X, S());
783
805
  }), () => {
784
- Dt(F);
806
+ Te(F);
785
807
  };
786
808
  }
787
- }, [n, s, o, S]), {
788
- config: l,
789
- loading: u,
790
- error: r,
809
+ }, [n, o, r]), {
810
+ config: a,
811
+ loading: f,
812
+ error: s,
791
813
  refetch: S
792
814
  };
793
815
  }
794
- function Ee(e) {
816
+ function kt(t) {
795
817
  const {
796
818
  seatMapId: n,
797
- enabled: s = !0,
798
- subscribeToDesignChanges: o = !1,
799
- onConfigLoad: h,
800
- onStateChange: f,
801
- onError: l
802
- } = e, {
803
- config: m,
804
- loading: u,
805
- error: i,
806
- refetch: r
807
- } = be({
819
+ userId: o,
820
+ enabled: r = !0,
821
+ subscribeToDesignChanges: d = !1,
822
+ onConfigLoad: l,
823
+ onStateChange: a,
824
+ onError: m
825
+ } = t, {
826
+ config: f,
827
+ loading: i,
828
+ error: s,
829
+ refetch: u
830
+ } = xt({
808
831
  seatMapId: n,
809
- enabled: s,
810
- subscribeToChanges: o,
811
- onConfigLoad: h,
812
- onError: l
832
+ enabled: r,
833
+ subscribeToChanges: d,
834
+ onConfigLoad: l,
835
+ onError: m
813
836
  }), {
814
- states: d,
815
- loading: a,
816
- error: w,
817
- lastUpdated: S,
818
- reservedSeats: C,
819
- unavailableSeats: F
820
- } = pe({
837
+ states: h,
838
+ loading: x,
839
+ error: S,
840
+ lastUpdated: R,
841
+ myReservedSeats: F,
842
+ otherReservedSeats: I,
843
+ unavailableSeats: M,
844
+ reservedSeats: T
845
+ } = mt({
821
846
  seatMapId: n,
822
- enabled: s,
823
- onStateChange: f,
824
- onError: l
847
+ currentUserId: o,
848
+ enabled: r,
849
+ onStateChange: a,
850
+ onError: m
825
851
  });
826
852
  return {
827
- config: m,
828
- loading: u || a,
829
- error: i || w,
830
- reservedSeats: C,
831
- unavailableSeats: F,
832
- seatStates: d,
833
- lastUpdated: S,
834
- refetch: r
853
+ config: f,
854
+ loading: i || x,
855
+ error: s || S,
856
+ myReservedSeats: F,
857
+ otherReservedSeats: I,
858
+ unavailableSeats: M,
859
+ reservedSeats: T,
860
+ seatStates: h,
861
+ lastUpdated: R,
862
+ refetch: u
835
863
  };
836
864
  }
837
865
  export {
838
- ge as DEFAULT_COLORS,
839
- we as SeatMapViewer,
840
- Me as clearFirebaseInstance,
841
- Ce as initializeFirebaseForViewer,
842
- vt as isFirebaseInitialized,
843
- de as useConfigFetcher,
844
- he as useContainerSize,
845
- be as useFirebaseConfig,
846
- pe as useFirebaseSeatStates,
847
- Ee as useRealtimeSeatMap,
848
- fe as useTouchGestures
866
+ yt as DEFAULT_COLORS,
867
+ Et as SeatMapViewer,
868
+ It as clearFirebaseInstance,
869
+ Ft as initializeFirebaseForViewer,
870
+ Re as isFirebaseInitialized,
871
+ ft as useConfigFetcher,
872
+ gt as useContainerSize,
873
+ xt as useFirebaseConfig,
874
+ mt as useFirebaseSeatStates,
875
+ kt as useRealtimeSeatMap,
876
+ pt as useTouchGestures
849
877
  };