/**
 * UI entry point.
 *
 * Boot order:
 *   1. Mount React with the local sync database as context. The DB instance
 *      is already constructed (see `lib/sync.ts`) but its WASM SQLite engine
 *      hasn't been initialised yet — that happens asynchronously.
 *   2. Kick off `db.init()` (open the local SQLite file) and `db.connect()`
 *      (open the WebSocket to the sync service). Both are fire-and-forget;
 *      the React tree renders immediately and `useQuery` calls return empty
 *      arrays until the local store is ready, then update reactively.
 *
 * Why we don't `await` these calls:
 *   - The local SQLite engine is loaded from a WASM module. On a cold cache
 *     it can take a second or two. Awaiting it here blocks the browser's
 *     first paint and the user sees a blank page for that whole window.
 *   - Connecting to the sync service requires a network round-trip to fetch
 *     a JWT and open a WebSocket. The UI should be visible and interactive
 *     long before that resolves.
 *
 * The PowerSync React adapter handles the "not yet ready" state correctly —
 * components reading from the DB just see an empty result until it isn't.
 */

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { PowerSyncContext } from '@powersync/react';
import { registerAppSW } from '@kazzle/app/pwa';
import { db } from './lib/sync';
import { AppConnector } from './lib/connector';
import App from './App';
import './styles/theme.css';

db.init();
db.connect(new AppConnector());

// Production SW — owned by `@kazzle/app/pwa` + `kazzleAppPwa()` in vite.config.
registerAppSW();

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <PowerSyncContext.Provider value={db}>
      <App />
    </PowerSyncContext.Provider>
  </StrictMode>
);