apps/web/
├── index.html                 # Entry HTML
├── vite.config.ts             # Vite + React + Tailwind plugins
├── package.json               # elizaos app metadata included
├── tsconfig.json
├── public/
│   └── lunchtable/            # Brand assets
└── src/
    ├── main.tsx               # React root + ConvexProvider
    ├── App.tsx                # BrowserRouter + Routes
    ├── globals.css            # Full zine theming
    ├── lib/
    │   ├── utils.ts           # cn() utility
    │   ├── convexHelpers.ts   # TS2589-safe Convex hooks
    │   ├── archetypeThemes.ts # Archetype color system
    │   └── iframe.ts          # milaidy postMessage protocol
    ├── hooks/
    │   └── useIframeMode.ts   # iframe detection + auth
    ├── stores/                # Zustand stores
    ├── pages/                 # Route page components
    │   ├── Home.tsx
    │   └── embed/             # Chromeless embed pages
    └── components/
        ├── ui/                # Radix primitives (shadcn pattern)
        ├── game/              # Game board components
        ├── collection/        # Card binder
        ├── story/             # Story mode
        ├── auth/              # Privy auth
        ├── streaming/         # retake.tv iframe
        └── layout/            # Nav, sidebar

import { BrowserRouter, Routes, Route } from "react-router";

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/play/:matchId" element={<Play />} />
    <Route path="/collection" element={<Collection />} />
    <Route path="/decks" element={<Decks />} />
    <Route path="/story" element={<Story />} />
    <Route path="/story/:chapterId" element={<StoryChapter />} />
    <Route path="/profile/:playerId" element={<Profile />} />
    {/* Embed routes - no layout chrome */}
    <Route path="/embed/play" element={<EmbedPlay />} />
    <Route path="/embed/stream/:streamId" element={<EmbedStream />} />
  </Routes>
</BrowserRouter>

// ALWAYS use helpers - never import from convex/react directly
import { apiAny, useConvexQuery, useConvexMutation } from "@/lib/convexHelpers";

function useUserDecks() {
  return useConvexQuery(apiAny.game.getUserDecks);
}

function useCreateDeck() {
  return useConvexMutation(apiAny.game.createDeck);
}

import { create } from "zustand";

interface GameUIStore {
  selectedCard: string | null;
  selectCard: (id: string | null) => void;
  targetingMode: boolean;
  setTargetingMode: (mode: boolean) => void;
}

export const useGameUIStore = create<GameUIStore>((set) => ({
  selectedCard: null,
  selectCard: (id) => set({ selectedCard: id }),
  targetingMode: false,
  setTargetingMode: (mode) => set({ targetingMode: mode }),
}));

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

import { motion, AnimatePresence } from "framer-motion";

// Card hover
<motion.div
  whileHover={{ y: -8, scale: 1.02 }}
  transition={{ type: "spring", stiffness: 300 }}
>

// Card play animation
<motion.div
  initial={{ y: 100, opacity: 0 }}
  animate={{ y: 0, opacity: 1 }}
  exit={{ y: -50, opacity: 0, scale: 0.8 }}
/>

import * as Dialog from "@radix-ui/react-dialog";

<Dialog.Content className="paper-panel p-6 max-w-md mx-auto">
  <Dialog.Title className="font-heading text-xl uppercase tracking-tight">
    {title}
  </Dialog.Title>
  {children}
</Dialog.Content>

import { useIframeMode } from "@/hooks/useIframeMode";

function MyComponent() {
  const { isEmbedded, authToken, agentId } = useIframeMode();

  // Adapt UI for embedded mode
  if (isEmbedded) {
    // No sidebar, no header, fullscreen game
  }
}

// vite.config.ts
resolve: {
  alias: {
    "@": path.resolve(__dirname, "./src"),
  },
}

// Usage
import { cn } from "@/lib/utils";
import { useIframeMode } from "@/hooks/useIframeMode";

bun run dev:web    # Vite on port 3334