npm install @waitify-io/fanfare-sdk-react @waitify-io/fanfare-sdk-core
# or
pnpm add @waitify-io/fanfare-sdk-react @waitify-io/fanfare-sdk-core
# or
yarn add @waitify-io/fanfare-sdk-react @waitify-io/fanfare-sdk-core

import { FanfareProvider } from "@waitify-io/fanfare-sdk-react";

function App() {
  return (
    <FanfareProvider organizationId="org_xxx" publishableKey="pk_live_xxx">
      <YourApp />
    </FanfareProvider>
  );
}

import { useQueue, useFanfareAuth } from "@waitify-io/fanfare-sdk-react";

function QueuePage() {
  const { isAuthenticated, guest } = useFanfareAuth();
  const { queue, status, position, enter, leave, isLoading, error } = useQueue("queue_123");

  const handleEnter = async () => {
    if (!isAuthenticated) {
      await guest();
    }
    await enter();
  };

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>{queue?.name}</h1>

      {status?.status === "QUEUED" && (
        <div>
          <p>Your position: {position}</p>
          <button onClick={leave}>Leave Queue</button>
        </div>
      )}

      {status?.status === "ADMITTED" && (
        <div>
          <p>You are admitted!</p>
          <a href={`/checkout?token=${status.admissionToken}`}>Go to Checkout</a>
        </div>
      )}

      {!status && <button onClick={handleEnter}>Enter Queue</button>}
    </div>
  );
}

export { FanfareProvider } from "./provider";
export type { FanfareProviderProps } from "./provider";

// Core hook
export { useFanfare } from "./hooks/use-fanfare";

// Auth hook
export { useFanfareAuth } from "./hooks/use-auth";

// Experience hooks
export { useQueue } from "./hooks/use-queue";
export { useDraw } from "./hooks/use-draw";
export { useAuction } from "./hooks/use-auction";
export { useWaitlist } from "./hooks/use-waitlist";
export { useTimedRelease } from "./hooks/use-timed-release";

// Journey hook
export { useExperienceJourney } from "./hooks/use-experience-journey";
export type {
  ExperienceJourneyOptions,
  ExperienceJourneyState,
  ExperienceJourneyStatus,
  UseExperienceJourneyOptions,
  UseExperienceJourneyResult,
} from "./hooks/use-experience-journey";

export {
  I18nProvider,
  useTranslations,
  useI18nContext,
  type I18nProviderProps,
  type Locale,
  type TranslationMessages,
  type PartialTranslationMessages,
} from "./i18n";

export { ThemeProvider, useThemeContext } from "./theme";
export type { ThemeProviderProps, ExperienceTheme } from "./theme";

┌─────────────────────────────────────────────────────────────┐
│                    Your React App                           │
├─────────────────────────────────────────────────────────────┤
│  FanfareProvider                                            │
│  ├── I18nProvider (translations)                            │
│  ├── ThemeProvider (optional)                               │
│  └── FanfareContext (SDK instance)                          │
├─────────────────────────────────────────────────────────────┤
│  React Hooks                                                │
│  ├── useFanfare() → SDK instance                            │
│  ├── useFanfareAuth() → Auth state + methods                │
│  ├── useQueue() → Queue state + methods                     │
│  ├── useDraw() → Draw state + methods                       │
│  ├── useAuction() → Auction state + methods                 │
│  ├── useWaitlist() → Waitlist state + methods               │
│  ├── useTimedRelease() → Timed release state + methods      │
│  └── useExperienceJourney() → Journey orchestration         │
├─────────────────────────────────────────────────────────────┤
│  Core SDK (@waitify-io/fanfare-sdk-core)                    │
└─────────────────────────────────────────────────────────────┘

interface UseExperienceHook<TState, TActions> {
  // State
  isLoading: boolean;
  error: Error | null;
  status: ClientStatus;
  // ... experience-specific state

  // Actions
  enter: (metadata?: Record<string, unknown>) => Promise<void>;
  leave: () => Promise<void>;
  // ... experience-specific actions
}

function QueueComponent() {
  const { position, status } = useQueue("queue_123");

  // position updates automatically when queue:position-changed fires
  // status updates automatically when queue:admitted fires

  return <div>Position: {position}</div>;
}

import type {
  FanfareProviderProps,
  UseDrawClientStatus,
  UseAuctionClientStatus,
  UseTimedReleaseClientStatus,
  UseWaitlistClientStatus,
  ExperienceJourneyStatus,
} from "@waitify-io/fanfare-sdk-react";