@zonetrix/shared 2.4.2 → 2.4.3

package/dist/index.d.mts

@@ -1,3 +1,5 @@
+import { Database } from 'firebase/database';
+
 /**
  * Centralized type definitions for the Seat Map Studio packages
  */
@@ -18,6 +20,7 @@ interface SeatData {
     price?: number;
     seatNumber?: string;
     floorId?: string;
+    size?: number;
 }
 /**
  * Section configuration for creating seat groups
@@ -129,6 +132,7 @@ interface SerializedSeat {
     seatNumber?: string;
     price?: number;
     floorId?: string;
+    size?: number;
 }
 /**
  * Serialized section for JSON export/import
@@ -510,4 +514,224 @@ declare function deriveSeatArraysFromStates(states: FirebaseSeatStates, currentU
  */
 declare function createIndexUpdates(seatMapId: string, eventId: number, subEventId: number): Record<string, boolean>;
 
-export { type AlignmentGuide, type BookingSelection, type CanvasConfig, type CanvasState, type ColorSettings, DEFAULT_COLORS, type EditorMode, type FirebaseCanvasConfig, type FirebaseConfigResult, type FirebaseHookOptions, type FirebaseIndexEntry, FirebasePaths, type FirebasePosition, type FirebaseSeat, type FirebaseSeatMap, type FirebaseSeatMapConfig, type FirebaseSeatMapMeta, type FirebaseSeatState, type FirebaseSeatStateEntry, type FirebaseSeatStateValue, type FirebaseSeatStates, type FirebaseSeatStatesResult, type FirebaseStage, type ObjectConfig, type ObjectType, type RowPricing, type SeatData, type SeatMapConfig, type SeatMapMetadata, type SeatShape, type SeatState, type SectionConfig, type SerializedSeat, type SerializedSection, type SerializedStage, type StageConfig, type Tool, type ValidationResult, applySeatStateOverrides, calculateAvailableSeats, calculateCapacity, calculateSeatPrice, cloneConfig, createDefaultConfig, createIndexUpdates, decodeSeatId, deriveSeatArraysFromStates, downloadConfigAsFile, encodeSeatId, exportConfigAsJSON, extractSeatStates, formatDate, fromFirebaseSeatMap, fromFirebaseState, generateId, getSelectedSeats, importConfigFromJSON, toFirebaseSeatMap, toFirebaseState, updateConfigTimestamp, validateSeatMapConfig };
+/**
+ * Firebase client singleton for the viewer package
+ * This allows the host application to initialize Firebase once
+ * and the viewer to use the same instance
+ */
+
+/**
+ * Initialize the Firebase database instance for the viewer
+ * This should be called by the host application after Firebase is initialized
+ *
+ * @example
+ * ```tsx
+ * import { initializeApp } from 'firebase/app';
+ * import { getDatabase } from 'firebase/database';
+ * import { initializeFirebaseForViewer } from '@zonetrix/viewer';
+ *
+ * const app = initializeApp(firebaseConfig);
+ * const db = getDatabase(app);
+ * initializeFirebaseForViewer(db);
+ * ```
+ */
+declare function initializeFirebaseForViewer(database: Database): void;
+/**
+ * Get the Firebase database instance
+ * @throws Error if Firebase hasn't been initialized
+ */
+declare function getFirebaseDatabase(): Database;
+/**
+ * Check if Firebase has been initialized for the viewer
+ */
+declare function isFirebaseInitialized(): boolean;
+/**
+ * Clear the Firebase database instance (useful for testing)
+ */
+declare function clearFirebaseInstance(): void;
+
+/**
+ * Hook for real-time seat state updates from Firebase
+ * Uses useSyncExternalStore for stable snapshot handling
+ * Supports user-aware seat state derivation
+ */
+
+interface UseFirebaseSeatStatesOptions {
+    /** The seat map ID to subscribe to */
+    seatMapId: string | null;
+    /** Current user ID for user-aware state derivation */
+    currentUserId?: string;
+    /** Whether the subscription is enabled (default: true) */
+    enabled?: boolean;
+    /** Callback when states change */
+    onStateChange?: (states: FirebaseSeatStates) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+}
+interface UseFirebaseSeatStatesResult {
+    /** Current seat states map */
+    states: FirebaseSeatStates | null;
+    /** Whether initial load is in progress */
+    loading: boolean;
+    /** Any error that occurred */
+    error: Error | null;
+    /** Timestamp of last update */
+    lastUpdated: number | null;
+    /** Seats reserved by current user (show as selected) */
+    myReservedSeats: string[];
+    /** Seats reserved by other users (show as reserved) */
+    otherReservedSeats: string[];
+    /** Seats unavailable for everyone */
+    unavailableSeats: string[];
+    /** @deprecated Use otherReservedSeats instead */
+    reservedSeats: string[];
+}
+/**
+ * Subscribe to real-time seat state updates from Firebase
+ * Uses useSyncExternalStore for stable snapshot handling
+ *
+ * @example
+ * ```tsx
+ * const { myReservedSeats, otherReservedSeats, unavailableSeats, loading } = useFirebaseSeatStates({
+ *   seatMapId: '123',
+ *   currentUserId: 'user-abc',
+ * });
+ *
+ * return (
+ *   <SeatMapViewer
+ *     config={config}
+ *     myReservedSeats={myReservedSeats}
+ *     reservedSeats={otherReservedSeats}
+ *     unavailableSeats={unavailableSeats}
+ *   />
+ * );
+ * ```
+ */
+declare function useFirebaseSeatStates(options: UseFirebaseSeatStatesOptions): UseFirebaseSeatStatesResult;
+
+/**
+ * Hook for loading seat map configuration from Firebase
+ * Optionally subscribes to design changes
+ */
+
+interface UseFirebaseConfigOptions {
+    /** The seat map ID to load */
+    seatMapId: string | null;
+    /** Whether loading is enabled (default: true) */
+    enabled?: boolean;
+    /** Subscribe to design changes in real-time (default: false) */
+    subscribeToChanges?: boolean;
+    /** Callback when config loads or changes */
+    onConfigLoad?: (config: SeatMapConfig) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+}
+interface UseFirebaseConfigResult {
+    /** The loaded configuration */
+    config: SeatMapConfig | null;
+    /** Whether loading is in progress */
+    loading: boolean;
+    /** Any error that occurred */
+    error: Error | null;
+    /** Manually refetch the config */
+    refetch: () => Promise<void>;
+}
+/**
+ * Load seat map configuration from Firebase
+ *
+ * @example
+ * ```tsx
+ * // One-time load
+ * const { config, loading, error } = useFirebaseConfig({
+ *   seatMapId: '123',
+ * });
+ *
+ * // With real-time design updates (for admin/editor preview)
+ * const { config } = useFirebaseConfig({
+ *   seatMapId: '123',
+ *   subscribeToChanges: true,
+ * });
+ * ```
+ */
+declare function useFirebaseConfig(options: UseFirebaseConfigOptions): UseFirebaseConfigResult;
+
+/**
+ * Combined hook for loading seat map config and subscribing to real-time state updates
+ * This is the recommended hook for most use cases
+ * Supports user-aware seat state derivation
+ */
+
+interface UseRealtimeSeatMapOptions {
+    /** The seat map ID to load and subscribe to */
+    seatMapId: string | null;
+    /** Current user ID for user-aware state derivation */
+    userId?: string;
+    /** Whether the hook is enabled (default: true) */
+    enabled?: boolean;
+    /** Subscribe to design changes in real-time (default: false) */
+    subscribeToDesignChanges?: boolean;
+    /** Callback when config loads */
+    onConfigLoad?: (config: SeatMapConfig) => void;
+    /** Callback when seat states change */
+    onStateChange?: (states: FirebaseSeatStates) => void;
+    /** Callback on any error */
+    onError?: (error: Error) => void;
+}
+interface UseRealtimeSeatMapResult {
+    /** The seat map configuration */
+    config: SeatMapConfig | null;
+    /** Whether initial loading is in progress */
+    loading: boolean;
+    /** Any error that occurred */
+    error: Error | null;
+    /** Seats reserved by current user (show as selected) */
+    myReservedSeats: string[];
+    /** Seats reserved by other users (show as reserved) */
+    otherReservedSeats: string[];
+    /** Seats unavailable for everyone */
+    unavailableSeats: string[];
+    /** @deprecated Use otherReservedSeats instead */
+    reservedSeats: string[];
+    /** Raw seat states map */
+    seatStates: FirebaseSeatStates | null;
+    /** Timestamp of last state update */
+    lastUpdated: number | null;
+    /** Manually refetch the config */
+    refetch: () => Promise<void>;
+}
+/**
+ * Combined hook for loading config and subscribing to real-time seat states
+ *
+ * @example
+ * ```tsx
+ * import { useRealtimeSeatMap, SeatMapViewer } from '@zonetrix/viewer';
+ *
+ * function BookingPage({ seatMapId, userId }) {
+ *   const {
+ *     config,
+ *     myReservedSeats,
+ *     otherReservedSeats,
+ *     unavailableSeats,
+ *     loading,
+ *     error
+ *   } = useRealtimeSeatMap({ seatMapId, userId });
+ *
+ *   if (loading) return <LoadingSpinner />;
+ *   if (error) return <ErrorMessage error={error} />;
+ *   if (!config) return null;
+ *
+ *   return (
+ *     <SeatMapViewer
+ *       config={config}
+ *       myReservedSeats={myReservedSeats}
+ *       reservedSeats={otherReservedSeats}
+ *       unavailableSeats={unavailableSeats}
+ *       onSeatSelect={handleSeatSelect}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function useRealtimeSeatMap(options: UseRealtimeSeatMapOptions): UseRealtimeSeatMapResult;
+
+export { type AlignmentGuide, type BookingSelection, type CanvasConfig, type CanvasState, type ColorSettings, DEFAULT_COLORS, type EditorMode, type FirebaseCanvasConfig, type FirebaseConfigResult, type FirebaseHookOptions, type FirebaseIndexEntry, FirebasePaths, type FirebasePosition, type FirebaseSeat, type FirebaseSeatMap, type FirebaseSeatMapConfig, type FirebaseSeatMapMeta, type FirebaseSeatState, type FirebaseSeatStateEntry, type FirebaseSeatStateValue, type FirebaseSeatStates, type FirebaseSeatStatesResult, type FirebaseStage, type ObjectConfig, type ObjectType, type RowPricing, type SeatData, type SeatMapConfig, type SeatMapMetadata, type SeatShape, type SeatState, type SectionConfig, type SerializedSeat, type SerializedSection, type SerializedStage, type StageConfig, type Tool, type UseFirebaseConfigOptions, type UseFirebaseConfigResult, type UseFirebaseSeatStatesOptions, type UseFirebaseSeatStatesResult, type UseRealtimeSeatMapOptions, type UseRealtimeSeatMapResult, type ValidationResult, applySeatStateOverrides, calculateAvailableSeats, calculateCapacity, calculateSeatPrice, clearFirebaseInstance, cloneConfig, createDefaultConfig, createIndexUpdates, decodeSeatId, deriveSeatArraysFromStates, downloadConfigAsFile, encodeSeatId, exportConfigAsJSON, extractSeatStates, formatDate, fromFirebaseSeatMap, fromFirebaseState, generateId, getFirebaseDatabase, getSelectedSeats, importConfigFromJSON, initializeFirebaseForViewer, isFirebaseInitialized, toFirebaseSeatMap, toFirebaseState, updateConfigTimestamp, useFirebaseConfig, useFirebaseSeatStates, useRealtimeSeatMap, validateSeatMapConfig };

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import { Database } from 'firebase/database';
+
 /**
  * Centralized type definitions for the Seat Map Studio packages
  */
@@ -18,6 +20,7 @@ interface SeatData {
     price?: number;
     seatNumber?: string;
     floorId?: string;
+    size?: number;
 }
 /**
  * Section configuration for creating seat groups
@@ -129,6 +132,7 @@ interface SerializedSeat {
     seatNumber?: string;
     price?: number;
     floorId?: string;
+    size?: number;
 }
 /**
  * Serialized section for JSON export/import
@@ -510,4 +514,224 @@ declare function deriveSeatArraysFromStates(states: FirebaseSeatStates, currentU
  */
 declare function createIndexUpdates(seatMapId: string, eventId: number, subEventId: number): Record<string, boolean>;
 
-export { type AlignmentGuide, type BookingSelection, type CanvasConfig, type CanvasState, type ColorSettings, DEFAULT_COLORS, type EditorMode, type FirebaseCanvasConfig, type FirebaseConfigResult, type FirebaseHookOptions, type FirebaseIndexEntry, FirebasePaths, type FirebasePosition, type FirebaseSeat, type FirebaseSeatMap, type FirebaseSeatMapConfig, type FirebaseSeatMapMeta, type FirebaseSeatState, type FirebaseSeatStateEntry, type FirebaseSeatStateValue, type FirebaseSeatStates, type FirebaseSeatStatesResult, type FirebaseStage, type ObjectConfig, type ObjectType, type RowPricing, type SeatData, type SeatMapConfig, type SeatMapMetadata, type SeatShape, type SeatState, type SectionConfig, type SerializedSeat, type SerializedSection, type SerializedStage, type StageConfig, type Tool, type ValidationResult, applySeatStateOverrides, calculateAvailableSeats, calculateCapacity, calculateSeatPrice, cloneConfig, createDefaultConfig, createIndexUpdates, decodeSeatId, deriveSeatArraysFromStates, downloadConfigAsFile, encodeSeatId, exportConfigAsJSON, extractSeatStates, formatDate, fromFirebaseSeatMap, fromFirebaseState, generateId, getSelectedSeats, importConfigFromJSON, toFirebaseSeatMap, toFirebaseState, updateConfigTimestamp, validateSeatMapConfig };
+/**
+ * Firebase client singleton for the viewer package
+ * This allows the host application to initialize Firebase once
+ * and the viewer to use the same instance
+ */
+
+/**
+ * Initialize the Firebase database instance for the viewer
+ * This should be called by the host application after Firebase is initialized
+ *
+ * @example
+ * ```tsx
+ * import { initializeApp } from 'firebase/app';
+ * import { getDatabase } from 'firebase/database';
+ * import { initializeFirebaseForViewer } from '@zonetrix/viewer';
+ *
+ * const app = initializeApp(firebaseConfig);
+ * const db = getDatabase(app);
+ * initializeFirebaseForViewer(db);
+ * ```
+ */
+declare function initializeFirebaseForViewer(database: Database): void;
+/**
+ * Get the Firebase database instance
+ * @throws Error if Firebase hasn't been initialized
+ */
+declare function getFirebaseDatabase(): Database;
+/**
+ * Check if Firebase has been initialized for the viewer
+ */
+declare function isFirebaseInitialized(): boolean;
+/**
+ * Clear the Firebase database instance (useful for testing)
+ */
+declare function clearFirebaseInstance(): void;
+
+/**
+ * Hook for real-time seat state updates from Firebase
+ * Uses useSyncExternalStore for stable snapshot handling
+ * Supports user-aware seat state derivation
+ */
+
+interface UseFirebaseSeatStatesOptions {
+    /** The seat map ID to subscribe to */
+    seatMapId: string | null;
+    /** Current user ID for user-aware state derivation */
+    currentUserId?: string;
+    /** Whether the subscription is enabled (default: true) */
+    enabled?: boolean;
+    /** Callback when states change */
+    onStateChange?: (states: FirebaseSeatStates) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+}
+interface UseFirebaseSeatStatesResult {
+    /** Current seat states map */
+    states: FirebaseSeatStates | null;
+    /** Whether initial load is in progress */
+    loading: boolean;
+    /** Any error that occurred */
+    error: Error | null;
+    /** Timestamp of last update */
+    lastUpdated: number | null;
+    /** Seats reserved by current user (show as selected) */
+    myReservedSeats: string[];
+    /** Seats reserved by other users (show as reserved) */
+    otherReservedSeats: string[];
+    /** Seats unavailable for everyone */
+    unavailableSeats: string[];
+    /** @deprecated Use otherReservedSeats instead */
+    reservedSeats: string[];
+}
+/**
+ * Subscribe to real-time seat state updates from Firebase
+ * Uses useSyncExternalStore for stable snapshot handling
+ *
+ * @example
+ * ```tsx
+ * const { myReservedSeats, otherReservedSeats, unavailableSeats, loading } = useFirebaseSeatStates({
+ *   seatMapId: '123',
+ *   currentUserId: 'user-abc',
+ * });
+ *
+ * return (
+ *   <SeatMapViewer
+ *     config={config}
+ *     myReservedSeats={myReservedSeats}
+ *     reservedSeats={otherReservedSeats}
+ *     unavailableSeats={unavailableSeats}
+ *   />
+ * );
+ * ```
+ */
+declare function useFirebaseSeatStates(options: UseFirebaseSeatStatesOptions): UseFirebaseSeatStatesResult;
+
+/**
+ * Hook for loading seat map configuration from Firebase
+ * Optionally subscribes to design changes
+ */
+
+interface UseFirebaseConfigOptions {
+    /** The seat map ID to load */
+    seatMapId: string | null;
+    /** Whether loading is enabled (default: true) */
+    enabled?: boolean;
+    /** Subscribe to design changes in real-time (default: false) */
+    subscribeToChanges?: boolean;
+    /** Callback when config loads or changes */
+    onConfigLoad?: (config: SeatMapConfig) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+}
+interface UseFirebaseConfigResult {
+    /** The loaded configuration */
+    config: SeatMapConfig | null;
+    /** Whether loading is in progress */
+    loading: boolean;
+    /** Any error that occurred */
+    error: Error | null;
+    /** Manually refetch the config */
+    refetch: () => Promise<void>;
+}
+/**
+ * Load seat map configuration from Firebase
+ *
+ * @example
+ * ```tsx
+ * // One-time load
+ * const { config, loading, error } = useFirebaseConfig({
+ *   seatMapId: '123',
+ * });
+ *
+ * // With real-time design updates (for admin/editor preview)
+ * const { config } = useFirebaseConfig({
+ *   seatMapId: '123',
+ *   subscribeToChanges: true,
+ * });
+ * ```
+ */
+declare function useFirebaseConfig(options: UseFirebaseConfigOptions): UseFirebaseConfigResult;
+
+/**
+ * Combined hook for loading seat map config and subscribing to real-time state updates
+ * This is the recommended hook for most use cases
+ * Supports user-aware seat state derivation
+ */
+
+interface UseRealtimeSeatMapOptions {
+    /** The seat map ID to load and subscribe to */
+    seatMapId: string | null;
+    /** Current user ID for user-aware state derivation */
+    userId?: string;
+    /** Whether the hook is enabled (default: true) */
+    enabled?: boolean;
+    /** Subscribe to design changes in real-time (default: false) */
+    subscribeToDesignChanges?: boolean;
+    /** Callback when config loads */
+    onConfigLoad?: (config: SeatMapConfig) => void;
+    /** Callback when seat states change */
+    onStateChange?: (states: FirebaseSeatStates) => void;
+    /** Callback on any error */
+    onError?: (error: Error) => void;
+}
+interface UseRealtimeSeatMapResult {
+    /** The seat map configuration */
+    config: SeatMapConfig | null;
+    /** Whether initial loading is in progress */
+    loading: boolean;
+    /** Any error that occurred */
+    error: Error | null;
+    /** Seats reserved by current user (show as selected) */
+    myReservedSeats: string[];
+    /** Seats reserved by other users (show as reserved) */
+    otherReservedSeats: string[];
+    /** Seats unavailable for everyone */
+    unavailableSeats: string[];
+    /** @deprecated Use otherReservedSeats instead */
+    reservedSeats: string[];
+    /** Raw seat states map */
+    seatStates: FirebaseSeatStates | null;
+    /** Timestamp of last state update */
+    lastUpdated: number | null;
+    /** Manually refetch the config */
+    refetch: () => Promise<void>;
+}
+/**
+ * Combined hook for loading config and subscribing to real-time seat states
+ *
+ * @example
+ * ```tsx
+ * import { useRealtimeSeatMap, SeatMapViewer } from '@zonetrix/viewer';
+ *
+ * function BookingPage({ seatMapId, userId }) {
+ *   const {
+ *     config,
+ *     myReservedSeats,
+ *     otherReservedSeats,
+ *     unavailableSeats,
+ *     loading,
+ *     error
+ *   } = useRealtimeSeatMap({ seatMapId, userId });
+ *
+ *   if (loading) return <LoadingSpinner />;
+ *   if (error) return <ErrorMessage error={error} />;
+ *   if (!config) return null;
+ *
+ *   return (
+ *     <SeatMapViewer
+ *       config={config}
+ *       myReservedSeats={myReservedSeats}
+ *       reservedSeats={otherReservedSeats}
+ *       unavailableSeats={unavailableSeats}
+ *       onSeatSelect={handleSeatSelect}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function useRealtimeSeatMap(options: UseRealtimeSeatMapOptions): UseRealtimeSeatMapResult;
+
+export { type AlignmentGuide, type BookingSelection, type CanvasConfig, type CanvasState, type ColorSettings, DEFAULT_COLORS, type EditorMode, type FirebaseCanvasConfig, type FirebaseConfigResult, type FirebaseHookOptions, type FirebaseIndexEntry, FirebasePaths, type FirebasePosition, type FirebaseSeat, type FirebaseSeatMap, type FirebaseSeatMapConfig, type FirebaseSeatMapMeta, type FirebaseSeatState, type FirebaseSeatStateEntry, type FirebaseSeatStateValue, type FirebaseSeatStates, type FirebaseSeatStatesResult, type FirebaseStage, type ObjectConfig, type ObjectType, type RowPricing, type SeatData, type SeatMapConfig, type SeatMapMetadata, type SeatShape, type SeatState, type SectionConfig, type SerializedSeat, type SerializedSection, type SerializedStage, type StageConfig, type Tool, type UseFirebaseConfigOptions, type UseFirebaseConfigResult, type UseFirebaseSeatStatesOptions, type UseFirebaseSeatStatesResult, type UseRealtimeSeatMapOptions, type UseRealtimeSeatMapResult, type ValidationResult, applySeatStateOverrides, calculateAvailableSeats, calculateCapacity, calculateSeatPrice, clearFirebaseInstance, cloneConfig, createDefaultConfig, createIndexUpdates, decodeSeatId, deriveSeatArraysFromStates, downloadConfigAsFile, encodeSeatId, exportConfigAsJSON, extractSeatStates, formatDate, fromFirebaseSeatMap, fromFirebaseState, generateId, getFirebaseDatabase, getSelectedSeats, importConfigFromJSON, initializeFirebaseForViewer, isFirebaseInitialized, toFirebaseSeatMap, toFirebaseState, updateConfigTimestamp, useFirebaseConfig, useFirebaseSeatStates, useRealtimeSeatMap, validateSeatMapConfig };

package/dist/index.js

@@ -26,6 +26,7 @@ __export(index_exports, {
   calculateAvailableSeats: () => calculateAvailableSeats,
   calculateCapacity: () => calculateCapacity,
   calculateSeatPrice: () => calculateSeatPrice,
+  clearFirebaseInstance: () => clearFirebaseInstance,
   cloneConfig: () => cloneConfig,
   createDefaultConfig: () => createDefaultConfig,
   createIndexUpdates: () => createIndexUpdates,
@@ -39,11 +40,17 @@ __export(index_exports, {
   fromFirebaseSeatMap: () => fromFirebaseSeatMap,
   fromFirebaseState: () => fromFirebaseState,
   generateId: () => generateId,
+  getFirebaseDatabase: () => getFirebaseDatabase,
   getSelectedSeats: () => getSelectedSeats,
   importConfigFromJSON: () => importConfigFromJSON,
+  initializeFirebaseForViewer: () => initializeFirebaseForViewer,
+  isFirebaseInitialized: () => isFirebaseInitialized,
   toFirebaseSeatMap: () => toFirebaseSeatMap,
   toFirebaseState: () => toFirebaseState,
   updateConfigTimestamp: () => updateConfigTimestamp,
+  useFirebaseConfig: () => useFirebaseConfig,
+  useFirebaseSeatStates: () => useFirebaseSeatStates,
+  useRealtimeSeatMap: () => useRealtimeSeatMap,
   validateSeatMapConfig: () => validateSeatMapConfig
 });
 module.exports = __toCommonJS(index_exports);
@@ -488,6 +495,335 @@ function createIndexUpdates(seatMapId, eventId, subEventId) {
     [`indexes/by_sub_event/${subEventId}/${seatMapId}`]: true
   };
 }
+
+// src/firebase/client.ts
+var firebaseDatabase = null;
+function initializeFirebaseForViewer(database) {
+  firebaseDatabase = database;
+}
+function getFirebaseDatabase() {
+  if (!firebaseDatabase) {
+    throw new Error(
+      "Firebase database not initialized. Call initializeFirebaseForViewer(db) first."
+    );
+  }
+  return firebaseDatabase;
+}
+function isFirebaseInitialized() {
+  return firebaseDatabase !== null;
+}
+function clearFirebaseInstance() {
+  firebaseDatabase = null;
+}
+
+// src/firebase/hooks/useFirebaseSeatStates.ts
+var import_react = require("react");
+var import_database = require("firebase/database");
+function arraysEqualUnordered(a, b) {
+  if (a.length !== b.length) return false;
+  const sortedA = [...a].sort();
+  const sortedB = [...b].sort();
+  return sortedA.every((val, idx) => val === sortedB[idx]);
+}
+function deriveUserAwareSeatArrays(statesData, currentUserId) {
+  const myReserved = [];
+  const otherReserved = [];
+  const unavailable = [];
+  Object.entries(statesData).forEach(([seatId, entry]) => {
+    if (!entry) return;
+    if (typeof entry === "object" && entry.state) {
+      if (entry.state === "unavailable") {
+        unavailable.push(seatId);
+      } else if (entry.state === "reserved") {
+        if (currentUserId && entry.userId === currentUserId) {
+          myReserved.push(seatId);
+        } else {
+          otherReserved.push(seatId);
+        }
+      }
+    }
+  });
+  return {
+    myReserved: myReserved.sort(),
+    otherReserved: otherReserved.sort(),
+    unavailable: unavailable.sort()
+  };
+}
+var INITIAL_SNAPSHOT = {
+  states: null,
+  loading: true,
+  error: null,
+  lastUpdated: null,
+  myReservedSeats: [],
+  otherReservedSeats: [],
+  unavailableSeats: []
+};
+function useFirebaseSeatStates(options) {
+  const {
+    seatMapId,
+    currentUserId,
+    enabled = true,
+    onStateChange,
+    onError
+  } = options;
+  const snapshotRef = (0, import_react.useRef)({ ...INITIAL_SNAPSHOT });
+  const onStateChangeRef = (0, import_react.useRef)(onStateChange);
+  const onErrorRef = (0, import_react.useRef)(onError);
+  const currentUserIdRef = (0, import_react.useRef)(currentUserId);
+  onStateChangeRef.current = onStateChange;
+  onErrorRef.current = onError;
+  currentUserIdRef.current = currentUserId;
+  const subscribe = (0, import_react.useCallback)(
+    (callback) => {
+      if (!enabled || !seatMapId) {
+        if (snapshotRef.current.loading !== false || snapshotRef.current.states !== null) {
+          snapshotRef.current = { ...INITIAL_SNAPSHOT, loading: false };
+          callback();
+        }
+        return () => {
+        };
+      }
+      if (!isFirebaseInitialized()) {
+        const errorMsg = "Firebase not initialized. Call initializeFirebaseForViewer first.";
+        if (snapshotRef.current.error?.message !== errorMsg) {
+          snapshotRef.current = {
+            ...INITIAL_SNAPSHOT,
+            loading: false,
+            error: new Error(errorMsg)
+          };
+          callback();
+        }
+        return () => {
+        };
+      }
+      const db = getFirebaseDatabase();
+      const statesRef = (0, import_database.ref)(db, `seatmaps/${seatMapId}/seat_states`);
+      console.log("\u{1F525} Firebase Listener - Subscribing to:", `seatmaps/${seatMapId}/seat_states`);
+      const handleValue = (dataSnapshot) => {
+        const data = dataSnapshot.val();
+        const statesData = data || {};
+        const derived = deriveUserAwareSeatArrays(
+          statesData,
+          currentUserIdRef.current
+        );
+        console.log("\u{1F4E1} Firebase Event Received:", {
+          path: `seatmaps/${seatMapId}/seat_states`,
+          dataSnapshot: dataSnapshot.exists(),
+          rawData: data,
+          statesCount: Object.keys(statesData).length,
+          derived: {
+            myReserved: derived.myReserved,
+            otherReserved: derived.otherReserved,
+            unavailable: derived.unavailable
+          }
+        });
+        const current = snapshotRef.current;
+        const hasChanged = current.loading || !arraysEqualUnordered(current.myReservedSeats, derived.myReserved) || !arraysEqualUnordered(
+          current.otherReservedSeats,
+          derived.otherReserved
+        ) || !arraysEqualUnordered(current.unavailableSeats, derived.unavailable);
+        console.log("\u{1F504} Firebase Data Changed?", {
+          hasChanged,
+          currentOtherReserved: current.otherReservedSeats,
+          newOtherReserved: derived.otherReserved
+        });
+        if (hasChanged) {
+          console.log("\u2705 Updating React state with new Firebase data");
+          snapshotRef.current = {
+            states: statesData,
+            loading: false,
+            error: null,
+            lastUpdated: Date.now(),
+            myReservedSeats: derived.myReserved,
+            otherReservedSeats: derived.otherReserved,
+            unavailableSeats: derived.unavailable
+          };
+          onStateChangeRef.current?.(statesData);
+          callback();
+        } else {
+          console.log("\u23ED\uFE0F No change detected, skipping update");
+        }
+      };
+      const handleError = (err) => {
+        snapshotRef.current = {
+          ...snapshotRef.current,
+          loading: false,
+          error: err
+        };
+        onErrorRef.current?.(err);
+        callback();
+      };
+      (0, import_database.onValue)(statesRef, handleValue, handleError);
+      return () => {
+        console.log("\u{1F525} Firebase Listener - Unsubscribing from:", `seatmaps/${seatMapId}/seat_states`);
+        (0, import_database.off)(statesRef);
+      };
+    },
+    [seatMapId, enabled]
+    // Don't include currentUserId - we use currentUserIdRef.current which is always up-to-date
+  );
+  const getSnapshot = (0, import_react.useCallback)(() => snapshotRef.current, []);
+  const getServerSnapshot = (0, import_react.useCallback)(() => INITIAL_SNAPSHOT, []);
+  const snapshot = (0, import_react.useSyncExternalStore)(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  );
+  return {
+    states: snapshot.states,
+    loading: snapshot.loading,
+    error: snapshot.error,
+    lastUpdated: snapshot.lastUpdated,
+    myReservedSeats: snapshot.myReservedSeats,
+    otherReservedSeats: snapshot.otherReservedSeats,
+    unavailableSeats: snapshot.unavailableSeats,
+    // Legacy alias
+    reservedSeats: snapshot.otherReservedSeats
+  };
+}
+
+// src/firebase/hooks/useFirebaseConfig.ts
+var import_react2 = require("react");
+var import_database2 = require("firebase/database");
+function useFirebaseConfig(options) {
+  const {
+    seatMapId,
+    enabled = true,
+    subscribeToChanges = false,
+    onConfigLoad,
+    onError
+  } = options;
+  const [config, setConfig] = (0, import_react2.useState)(null);
+  const [loading, setLoading] = (0, import_react2.useState)(true);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const onConfigLoadRef = (0, import_react2.useRef)(onConfigLoad);
+  const onErrorRef = (0, import_react2.useRef)(onError);
+  onConfigLoadRef.current = onConfigLoad;
+  onErrorRef.current = onError;
+  const fetchConfig = (0, import_react2.useCallback)(async () => {
+    if (!seatMapId) return;
+    if (!isFirebaseInitialized()) {
+      setError(
+        new Error(
+          "Firebase not initialized. Call initializeFirebaseForViewer first."
+        )
+      );
+      setLoading(false);
+      return;
+    }
+    const db = getFirebaseDatabase();
+    const seatmapRef = (0, import_database2.ref)(db, `seatmaps/${seatMapId}`);
+    try {
+      setLoading(true);
+      setError(null);
+      const snapshot = await (0, import_database2.get)(seatmapRef);
+      const data = snapshot.val();
+      if (data) {
+        const converted = fromFirebaseSeatMap(data);
+        setConfig(converted);
+        onConfigLoadRef.current?.(converted);
+      } else {
+        setError(new Error(`Seat map ${seatMapId} not found in Firebase`));
+      }
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Unknown error");
+      setError(error2);
+      onErrorRef.current?.(error2);
+    } finally {
+      setLoading(false);
+    }
+  }, [seatMapId]);
+  (0, import_react2.useEffect)(() => {
+    if (!enabled || !seatMapId) {
+      setLoading(false);
+      return;
+    }
+    fetchConfig();
+    if (subscribeToChanges && isFirebaseInitialized()) {
+      const db = getFirebaseDatabase();
+      const metaRef = (0, import_database2.ref)(db, `seatmaps/${seatMapId}/meta/updated_at`);
+      let isFirstSnapshot = true;
+      let lastSeenTimestamp = null;
+      const handleUpdate = (snapshot) => {
+        if (isFirstSnapshot) {
+          isFirstSnapshot = false;
+          lastSeenTimestamp = snapshot.val();
+          return;
+        }
+        const currentTimestamp = snapshot.val();
+        if (snapshot.exists() && currentTimestamp !== lastSeenTimestamp) {
+          lastSeenTimestamp = currentTimestamp;
+          fetchConfig();
+        }
+      };
+      (0, import_database2.onValue)(metaRef, handleUpdate);
+      return () => {
+        (0, import_database2.off)(metaRef);
+      };
+    }
+  }, [seatMapId, enabled, subscribeToChanges]);
+  return {
+    config,
+    loading,
+    error,
+    refetch: fetchConfig
+  };
+}
+
+// src/firebase/hooks/useRealtimeSeatMap.ts
+function useRealtimeSeatMap(options) {
+  const {
+    seatMapId,
+    userId,
+    enabled = true,
+    subscribeToDesignChanges = false,
+    onConfigLoad,
+    onStateChange,
+    onError
+  } = options;
+  const {
+    config,
+    loading: configLoading,
+    error: configError,
+    refetch
+  } = useFirebaseConfig({
+    seatMapId,
+    enabled,
+    subscribeToChanges: subscribeToDesignChanges,
+    onConfigLoad,
+    onError
+  });
+  const {
+    states: seatStates,
+    loading: statesLoading,
+    error: statesError,
+    lastUpdated,
+    myReservedSeats,
+    otherReservedSeats,
+    unavailableSeats,
+    reservedSeats
+  } = useFirebaseSeatStates({
+    seatMapId,
+    currentUserId: userId,
+    enabled,
+    onStateChange,
+    onError
+  });
+  const loading = configLoading || statesLoading;
+  const error = configError || statesError;
+  return {
+    config,
+    loading,
+    error,
+    myReservedSeats,
+    otherReservedSeats,
+    unavailableSeats,
+    reservedSeats,
+    seatStates,
+    lastUpdated,
+    refetch
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_COLORS,
@@ -496,6 +832,7 @@ function createIndexUpdates(seatMapId, eventId, subEventId) {
   calculateAvailableSeats,
   calculateCapacity,
   calculateSeatPrice,
+  clearFirebaseInstance,
   cloneConfig,
   createDefaultConfig,
   createIndexUpdates,
@@ -509,10 +846,16 @@ function createIndexUpdates(seatMapId, eventId, subEventId) {
   fromFirebaseSeatMap,
   fromFirebaseState,
   generateId,
+  getFirebaseDatabase,
   getSelectedSeats,
   importConfigFromJSON,
+  initializeFirebaseForViewer,
+  isFirebaseInitialized,
   toFirebaseSeatMap,
   toFirebaseState,
   updateConfigTimestamp,
+  useFirebaseConfig,
+  useFirebaseSeatStates,
+  useRealtimeSeatMap,
   validateSeatMapConfig
 });

package/dist/index.mjs

@@ -438,6 +438,335 @@ function createIndexUpdates(seatMapId, eventId, subEventId) {
     [`indexes/by_sub_event/${subEventId}/${seatMapId}`]: true
   };
 }
+
+// src/firebase/client.ts
+var firebaseDatabase = null;
+function initializeFirebaseForViewer(database) {
+  firebaseDatabase = database;
+}
+function getFirebaseDatabase() {
+  if (!firebaseDatabase) {
+    throw new Error(
+      "Firebase database not initialized. Call initializeFirebaseForViewer(db) first."
+    );
+  }
+  return firebaseDatabase;
+}
+function isFirebaseInitialized() {
+  return firebaseDatabase !== null;
+}
+function clearFirebaseInstance() {
+  firebaseDatabase = null;
+}
+
+// src/firebase/hooks/useFirebaseSeatStates.ts
+import { useSyncExternalStore, useCallback, useRef } from "react";
+import { ref, onValue, off } from "firebase/database";
+function arraysEqualUnordered(a, b) {
+  if (a.length !== b.length) return false;
+  const sortedA = [...a].sort();
+  const sortedB = [...b].sort();
+  return sortedA.every((val, idx) => val === sortedB[idx]);
+}
+function deriveUserAwareSeatArrays(statesData, currentUserId) {
+  const myReserved = [];
+  const otherReserved = [];
+  const unavailable = [];
+  Object.entries(statesData).forEach(([seatId, entry]) => {
+    if (!entry) return;
+    if (typeof entry === "object" && entry.state) {
+      if (entry.state === "unavailable") {
+        unavailable.push(seatId);
+      } else if (entry.state === "reserved") {
+        if (currentUserId && entry.userId === currentUserId) {
+          myReserved.push(seatId);
+        } else {
+          otherReserved.push(seatId);
+        }
+      }
+    }
+  });
+  return {
+    myReserved: myReserved.sort(),
+    otherReserved: otherReserved.sort(),
+    unavailable: unavailable.sort()
+  };
+}
+var INITIAL_SNAPSHOT = {
+  states: null,
+  loading: true,
+  error: null,
+  lastUpdated: null,
+  myReservedSeats: [],
+  otherReservedSeats: [],
+  unavailableSeats: []
+};
+function useFirebaseSeatStates(options) {
+  const {
+    seatMapId,
+    currentUserId,
+    enabled = true,
+    onStateChange,
+    onError
+  } = options;
+  const snapshotRef = useRef({ ...INITIAL_SNAPSHOT });
+  const onStateChangeRef = useRef(onStateChange);
+  const onErrorRef = useRef(onError);
+  const currentUserIdRef = useRef(currentUserId);
+  onStateChangeRef.current = onStateChange;
+  onErrorRef.current = onError;
+  currentUserIdRef.current = currentUserId;
+  const subscribe = useCallback(
+    (callback) => {
+      if (!enabled || !seatMapId) {
+        if (snapshotRef.current.loading !== false || snapshotRef.current.states !== null) {
+          snapshotRef.current = { ...INITIAL_SNAPSHOT, loading: false };
+          callback();
+        }
+        return () => {
+        };
+      }
+      if (!isFirebaseInitialized()) {
+        const errorMsg = "Firebase not initialized. Call initializeFirebaseForViewer first.";
+        if (snapshotRef.current.error?.message !== errorMsg) {
+          snapshotRef.current = {
+            ...INITIAL_SNAPSHOT,
+            loading: false,
+            error: new Error(errorMsg)
+          };
+          callback();
+        }
+        return () => {
+        };
+      }
+      const db = getFirebaseDatabase();
+      const statesRef = ref(db, `seatmaps/${seatMapId}/seat_states`);
+      console.log("\u{1F525} Firebase Listener - Subscribing to:", `seatmaps/${seatMapId}/seat_states`);
+      const handleValue = (dataSnapshot) => {
+        const data = dataSnapshot.val();
+        const statesData = data || {};
+        const derived = deriveUserAwareSeatArrays(
+          statesData,
+          currentUserIdRef.current
+        );
+        console.log("\u{1F4E1} Firebase Event Received:", {
+          path: `seatmaps/${seatMapId}/seat_states`,
+          dataSnapshot: dataSnapshot.exists(),
+          rawData: data,
+          statesCount: Object.keys(statesData).length,
+          derived: {
+            myReserved: derived.myReserved,
+            otherReserved: derived.otherReserved,
+            unavailable: derived.unavailable
+          }
+        });
+        const current = snapshotRef.current;
+        const hasChanged = current.loading || !arraysEqualUnordered(current.myReservedSeats, derived.myReserved) || !arraysEqualUnordered(
+          current.otherReservedSeats,
+          derived.otherReserved
+        ) || !arraysEqualUnordered(current.unavailableSeats, derived.unavailable);
+        console.log("\u{1F504} Firebase Data Changed?", {
+          hasChanged,
+          currentOtherReserved: current.otherReservedSeats,
+          newOtherReserved: derived.otherReserved
+        });
+        if (hasChanged) {
+          console.log("\u2705 Updating React state with new Firebase data");
+          snapshotRef.current = {
+            states: statesData,
+            loading: false,
+            error: null,
+            lastUpdated: Date.now(),
+            myReservedSeats: derived.myReserved,
+            otherReservedSeats: derived.otherReserved,
+            unavailableSeats: derived.unavailable
+          };
+          onStateChangeRef.current?.(statesData);
+          callback();
+        } else {
+          console.log("\u23ED\uFE0F No change detected, skipping update");
+        }
+      };
+      const handleError = (err) => {
+        snapshotRef.current = {
+          ...snapshotRef.current,
+          loading: false,
+          error: err
+        };
+        onErrorRef.current?.(err);
+        callback();
+      };
+      onValue(statesRef, handleValue, handleError);
+      return () => {
+        console.log("\u{1F525} Firebase Listener - Unsubscribing from:", `seatmaps/${seatMapId}/seat_states`);
+        off(statesRef);
+      };
+    },
+    [seatMapId, enabled]
+    // Don't include currentUserId - we use currentUserIdRef.current which is always up-to-date
+  );
+  const getSnapshot = useCallback(() => snapshotRef.current, []);
+  const getServerSnapshot = useCallback(() => INITIAL_SNAPSHOT, []);
+  const snapshot = useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  );
+  return {
+    states: snapshot.states,
+    loading: snapshot.loading,
+    error: snapshot.error,
+    lastUpdated: snapshot.lastUpdated,
+    myReservedSeats: snapshot.myReservedSeats,
+    otherReservedSeats: snapshot.otherReservedSeats,
+    unavailableSeats: snapshot.unavailableSeats,
+    // Legacy alias
+    reservedSeats: snapshot.otherReservedSeats
+  };
+}
+
+// src/firebase/hooks/useFirebaseConfig.ts
+import { useState, useEffect, useCallback as useCallback2, useRef as useRef2 } from "react";
+import { ref as ref2, get, onValue as onValue2, off as off2 } from "firebase/database";
+function useFirebaseConfig(options) {
+  const {
+    seatMapId,
+    enabled = true,
+    subscribeToChanges = false,
+    onConfigLoad,
+    onError
+  } = options;
+  const [config, setConfig] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const onConfigLoadRef = useRef2(onConfigLoad);
+  const onErrorRef = useRef2(onError);
+  onConfigLoadRef.current = onConfigLoad;
+  onErrorRef.current = onError;
+  const fetchConfig = useCallback2(async () => {
+    if (!seatMapId) return;
+    if (!isFirebaseInitialized()) {
+      setError(
+        new Error(
+          "Firebase not initialized. Call initializeFirebaseForViewer first."
+        )
+      );
+      setLoading(false);
+      return;
+    }
+    const db = getFirebaseDatabase();
+    const seatmapRef = ref2(db, `seatmaps/${seatMapId}`);
+    try {
+      setLoading(true);
+      setError(null);
+      const snapshot = await get(seatmapRef);
+      const data = snapshot.val();
+      if (data) {
+        const converted = fromFirebaseSeatMap(data);
+        setConfig(converted);
+        onConfigLoadRef.current?.(converted);
+      } else {
+        setError(new Error(`Seat map ${seatMapId} not found in Firebase`));
+      }
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Unknown error");
+      setError(error2);
+      onErrorRef.current?.(error2);
+    } finally {
+      setLoading(false);
+    }
+  }, [seatMapId]);
+  useEffect(() => {
+    if (!enabled || !seatMapId) {
+      setLoading(false);
+      return;
+    }
+    fetchConfig();
+    if (subscribeToChanges && isFirebaseInitialized()) {
+      const db = getFirebaseDatabase();
+      const metaRef = ref2(db, `seatmaps/${seatMapId}/meta/updated_at`);
+      let isFirstSnapshot = true;
+      let lastSeenTimestamp = null;
+      const handleUpdate = (snapshot) => {
+        if (isFirstSnapshot) {
+          isFirstSnapshot = false;
+          lastSeenTimestamp = snapshot.val();
+          return;
+        }
+        const currentTimestamp = snapshot.val();
+        if (snapshot.exists() && currentTimestamp !== lastSeenTimestamp) {
+          lastSeenTimestamp = currentTimestamp;
+          fetchConfig();
+        }
+      };
+      onValue2(metaRef, handleUpdate);
+      return () => {
+        off2(metaRef);
+      };
+    }
+  }, [seatMapId, enabled, subscribeToChanges]);
+  return {
+    config,
+    loading,
+    error,
+    refetch: fetchConfig
+  };
+}
+
+// src/firebase/hooks/useRealtimeSeatMap.ts
+function useRealtimeSeatMap(options) {
+  const {
+    seatMapId,
+    userId,
+    enabled = true,
+    subscribeToDesignChanges = false,
+    onConfigLoad,
+    onStateChange,
+    onError
+  } = options;
+  const {
+    config,
+    loading: configLoading,
+    error: configError,
+    refetch
+  } = useFirebaseConfig({
+    seatMapId,
+    enabled,
+    subscribeToChanges: subscribeToDesignChanges,
+    onConfigLoad,
+    onError
+  });
+  const {
+    states: seatStates,
+    loading: statesLoading,
+    error: statesError,
+    lastUpdated,
+    myReservedSeats,
+    otherReservedSeats,
+    unavailableSeats,
+    reservedSeats
+  } = useFirebaseSeatStates({
+    seatMapId,
+    currentUserId: userId,
+    enabled,
+    onStateChange,
+    onError
+  });
+  const loading = configLoading || statesLoading;
+  const error = configError || statesError;
+  return {
+    config,
+    loading,
+    error,
+    myReservedSeats,
+    otherReservedSeats,
+    unavailableSeats,
+    reservedSeats,
+    seatStates,
+    lastUpdated,
+    refetch
+  };
+}
 export {
   DEFAULT_COLORS,
   FirebasePaths,
@@ -445,6 +774,7 @@ export {
   calculateAvailableSeats,
   calculateCapacity,
   calculateSeatPrice,
+  clearFirebaseInstance,
   cloneConfig,
   createDefaultConfig,
   createIndexUpdates,
@@ -458,10 +788,16 @@ export {
   fromFirebaseSeatMap,
   fromFirebaseState,
   generateId,
+  getFirebaseDatabase,
   getSelectedSeats,
   importConfigFromJSON,
+  initializeFirebaseForViewer,
+  isFirebaseInitialized,
   toFirebaseSeatMap,
   toFirebaseState,
   updateConfigTimestamp,
+  useFirebaseConfig,
+  useFirebaseSeatStates,
+  useRealtimeSeatMap,
   validateSeatMapConfig
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonetrix/shared",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "description": "Shared types and utilities for seat-map-studio packages",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -27,6 +27,10 @@
   ],
   "author": "",
   "license": "MIT",
+  "peerDependencies": {
+    "firebase": "^11.0.0 || ^12.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
   "devDependencies": {
     "tsup": "^8.0.1",
     "typescript": "^5.8.3"