create-rindle 0.1.6

package/templates/minimal/shared/app-def.ts

@@ -0,0 +1,100 @@
+// The shared CONTRACT root: the normalized schema, the relationships the views join back over, the
+// normalization helpers, the mutator arg schemas, and the client's PREDICTED mutators. Both tiers
+// import it — the browser for everything, the API server for the schema + normalization + the
+// AUTHORITATIVE mutator twins (server/app-api.ts) with the same names.
+//
+// This module is the leaf of the contract DAG: it depends on nothing app-internal. The named root
+// queries AND the per-component SELECTIONS they compose are co-located with their components in
+// `src/components/*.queries.ts` (Relay-style co-location). Keeping the schema here, free of those
+// imports, is what keeps that graph acyclic.
+
+import { defineRelationships, newQueryBuilder, rel } from "@rindle/client";
+import type { Row } from "@rindle/client";
+import type { ClientRegistry, MutationTx } from "@rindle/optimistic";
+import { z } from "zod";
+
+// The schema is GENERATED from migrations/*.sql into ./schema.gen.ts by `rindle schema gen` — `pnpm
+// dev` regenerates it on every migration change, so the DDL is the single source of truth. We import
+// the tables + `schema` here and re-export them below, keeping this contract root the one import for
+// app code.
+import { message, room, schema } from "./schema.gen.ts";
+
+// --------------------------------------------------------------------------- tables (generated)
+
+export { message, room, schema };
+
+/** One schema-bound query builder, shared by every co-located `*.queries.ts`. Each `q.<table>` access
+ *  mints a fresh builder, so sharing the single instance is safe. */
+export const q = newQueryBuilder(schema);
+
+// --------------------------------------------------------------- row types (schema-derived)
+
+export type Room = Row<typeof room>;
+export type Message = Row<typeof message>;
+
+// --------------------------------------------------------------- relationships (joins, declared once)
+//
+// The one join in this app, declared ONCE: a room's messages. The home page's live `countAs` and the
+// room view both spread it instead of restating the `roomId → id` correlation.
+export const rels = defineRelationships({
+  roomMessages: rel(room, message, { id: "roomId" }),
+});
+
+// --------------------------------------------------------------------------- normalization
+
+export function normalizeName(name: string): string {
+  return name.trim().replace(/\s+/g, " ").slice(0, 80);
+}
+
+export function normalizeBody(body: string): string {
+  return body.trim().slice(0, 4000);
+}
+
+/** A login handle reduced to a stable slug, so the client's predicted author id matches the server's. */
+export function normalizeSubject(raw: string): string {
+  return raw.trim().replace(/\s+/g, "-").toLowerCase().slice(0, 40) || "anon";
+}
+
+// --------------------------------------------------------------------------- mutator args
+//
+// One zod schema per mutator. The SERVER parses the UNTRUSTED wire args through it (server/app-api.ts);
+// BOTH tiers derive the arg TYPE from it (`z.infer`). `author` rides the args for the CLIENT's
+// prediction only — the server ALWAYS overrides it with the authenticated identity, so it is
+// unspoofable for the authoritative write.
+
+export const createRoomArgs = z.object({ id: z.string(), name: z.string(), createdAt: z.number() });
+export type CreateRoomArgs = z.infer<typeof createRoomArgs>;
+
+export const postMessageArgs = z.object({
+  id: z.string(),
+  roomId: z.string(),
+  body: z.string(),
+  author: z.string(),
+  createdAt: z.number(),
+});
+export type PostMessageArgs = z.infer<typeof postMessageArgs>;
+
+// --------------------------------------------------------------------------- mutators (PREDICTED)
+//
+// Deterministic + replayable: every value that would otherwise come from the clock or a random source
+// is passed in args (ids, timestamps). The SQL twins in server/app-api.ts enforce the authoritative
+// policy (identity required, a "spam" rejection demo).
+
+export const mutators = {
+  createRoom: (tx: MutationTx, a: CreateRoomArgs) => {
+    const name = normalizeName(a.name);
+    if (!name) return;
+    tx.insert("room", { id: a.id, name, createdAt: a.createdAt });
+  },
+  postMessage: (tx: MutationTx, a: PostMessageArgs) => {
+    const body = normalizeBody(a.body);
+    if (!body) return;
+    tx.insert("message", {
+      id: a.id,
+      roomId: a.roomId,
+      author: normalizeSubject(a.author),
+      body,
+      createdAt: a.createdAt,
+    });
+  },
+} satisfies ClientRegistry;

package/templates/minimal/shared/auth.ts

@@ -0,0 +1,18 @@
+// The identity SEAM — the whole contract the app depends on for "who is this?". The app owns no
+// account lifecycle: it trusts a verified identity resolved from the inbound request and nothing more.
+//
+//   - This template wires the DEV provider (server/auth-dev.ts): a handle off an `x-rindle-user`
+//     header, so the example runs standalone with no auth service.
+//   - To go to production, write another AuthProvider that validates a real credential (e.g. a JWT
+//     against a JWKS) and maps it to the SAME Identity shape — the API server never changes.
+
+/** A verified identity. `subject` is the stable external id used as the author of writes. */
+export interface Identity {
+  subject: string;
+}
+
+/** Resolve the inbound request's credential to a verified identity, or null when anonymous. Reads are
+ *  public; only mutations require a non-null identity (server/app-api.ts). */
+export interface AuthProvider {
+  verify(req: Request): Promise<Identity | null>;
+}

package/templates/minimal/shared/schema.gen.ts

@@ -0,0 +1,29 @@
+// Generated by `rindle schema gen` from the daemon's introspected schema (GET /schema).
+// Do not edit by hand — re-run the generator after each migration.
+//
+// Column kinds come from your declared SQL types: TEXT maps to string(), INTEGER/REAL to
+// number(), and a column declared BOOLEAN/BOOL or JSON to boolean()/json(). The only thing the
+// SQL can't carry is a refinement *within* a kind — the element type of json<T>(), or a
+// string/number literal union — so re-apply those few annotations after each regen.
+
+import { createSchema, number, string, table } from "@rindle/client";
+
+export const message = table("message")
+  .columns({
+    id: string(),
+    roomId: string(),
+    author: string(),
+    body: string(),
+    createdAt: number(),
+  })
+  .primaryKey("id");
+
+export const room = table("room")
+  .columns({
+    id: string(),
+    name: string(),
+    createdAt: number(),
+  })
+  .primaryKey("id");
+
+export const schema = createSchema({ tables: [message, room] });

package/templates/minimal/src/RindleApp.tsx

@@ -0,0 +1,47 @@
+// The SSR→SPA store handoff. Provides the Rindle store to the tree via `@rindle/react`, swapping the
+// backend under `useQuery` without changing a single component:
+//
+//   - Server render + browser HYDRATION: a transport-less seed Store, hydrated from the SSR snapshot.
+//     `useQuery` reads its seed, so the server and the client's first render produce identical markup
+//     with NO engine on either side.
+//   - After hydration: the wasm IVM engine boots (client-only dynamic import, rindle-client.ts), its
+//     views are seeded from the same snapshot (so the swap shows the SSR rows with no flash), and the
+//     live `subscribe` reconciles — the page is now a live SPA.
+
+import { useEffect, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { Rindle } from "@rindle/react";
+import { OneShotBackend, Store, type DehydratedState } from "@rindle/client";
+
+import { schema } from "../shared/app-def.ts";
+import { bootClient } from "./rindle-client.ts";
+
+type RindleClient = Awaited<ReturnType<typeof bootClient>>;
+
+export function RindleApp({ ssrState, children }: { ssrState: DehydratedState; children: ReactNode }) {
+  // Built ONCE from the first-render snapshot. Backs the server render AND the matching client
+  // hydration pass — same seeds in, same markup out.
+  const [seedStore] = useState(() => {
+    const store = new Store(schema, new OneShotBackend());
+    store.hydrate(ssrState);
+    return store;
+  });
+
+  // The live wasm store — booted only in the browser, only after hydration.
+  const [liveStore, setLiveStore] = useState<RindleClient["store"] | null>(null);
+  const ssrStateRef = useRef(ssrState);
+  ssrStateRef.current = ssrState;
+  useEffect(() => {
+    let alive = true;
+    void bootClient().then((app) => {
+      if (!alive) return;
+      app.store.hydrate(ssrStateRef.current); // seed the live views so the swap doesn't flash empty
+      setLiveStore(app.store);
+    });
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  return <Rindle store={liveStore ?? seedStore}>{children}</Rindle>;
+}

package/templates/minimal/src/components/Composer.tsx

@@ -0,0 +1,38 @@
+// The message box at the foot of a room. Submitting fires `app.mutate.postMessage`, which applies
+// OPTIMISTICALLY in the local wasm engine (the message shows instantly) and reconciles when the
+// authority confirms — or snaps back via onRejected (e.g. a body containing "spam").
+
+import { useState } from "react";
+import type { FormEvent } from "react";
+
+import { app, currentHandle } from "../rindle-client.ts";
+
+export function Composer({ roomId }: { roomId: string }) {
+  const [body, setBody] = useState("");
+
+  function submit(e: FormEvent) {
+    e.preventDefault();
+    const text = body.trim();
+    if (!text) return;
+    const now = Date.now();
+    app.mutate.postMessage({
+      id: `msg-${now}-${Math.random().toString(36).slice(2, 7)}`,
+      roomId,
+      body: text,
+      author: currentHandle(),
+      createdAt: now,
+    });
+    setBody("");
+  }
+
+  return (
+    <form className="app-composer" onSubmit={submit}>
+      <textarea value={body} onChange={(e) => setBody(e.target.value)} placeholder="Write a message…" rows={3} />
+      <div className="app-composer-actions">
+        <button type="submit" className="app-btn" disabled={!body.trim()}>
+          Send
+        </button>
+      </div>
+    </form>
+  );
+}

package/templates/minimal/src/components/MessageCard.queries.ts

@@ -0,0 +1,13 @@
+// Co-located with the message row in the room view. Holds just the per-row SELECTION
+// (`MessageCardFragment`); the room view composes it into the room detail query. React-free.
+
+import { defineFragment } from "@rindle/client";
+import type { FragmentRef } from "@rindle/client";
+
+import { message } from "../../shared/app-def.ts";
+
+/** What a single message row renders. */
+export const MessageCardFragment = defineFragment(message, (m) =>
+  m.select("id", "author", "body", "createdAt"),
+);
+export type MessageCardRef = FragmentRef<typeof MessageCardFragment>;

package/templates/minimal/src/components/MessageCard.tsx

@@ -0,0 +1,20 @@
+// A single message in a room: author, body, and time. Reads its data through the `MessageCard` fragment.
+
+import { useFragment } from "@rindle/react";
+
+import { MessageCardFragment } from "./MessageCard.queries.ts";
+import type { MessageCardRef } from "./MessageCard.queries.ts";
+import { formatDateTime } from "../lib/format.ts";
+
+export function MessageCard({ message }: { message: MessageCardRef }) {
+  const data = useFragment(MessageCardFragment, message);
+  return (
+    <article className="app-message">
+      <div className="app-message-head">
+        <span className="app-message-author">{data.author}</span>
+        <span className="app-message-time">{formatDateTime(data.createdAt)}</span>
+      </div>
+      <p className="app-message-body">{data.body}</p>
+    </article>
+  );
+}

package/templates/minimal/src/components/NewRoomForm.tsx

@@ -0,0 +1,30 @@
+// Create a room from the home page. `app.mutate.createRoom` applies optimistically (the room appears
+// instantly) and reconciles on confirmation — try the name "spam" to see the authority reject it and
+// the optimistic row snap back with a toast.
+
+import { useState } from "react";
+import type { FormEvent } from "react";
+
+import { app } from "../rindle-client.ts";
+
+export function NewRoomForm() {
+  const [name, setName] = useState("");
+
+  function submit(e: FormEvent) {
+    e.preventDefault();
+    const text = name.trim();
+    if (!text) return;
+    const now = Date.now();
+    app.mutate.createRoom({ id: `room-${now}-${Math.random().toString(36).slice(2, 7)}`, name: text, createdAt: now });
+    setName("");
+  }
+
+  return (
+    <form className="app-new-room" onSubmit={submit}>
+      <input value={name} onChange={(e) => setName(e.target.value)} placeholder="New room name…" maxLength={80} />
+      <button type="submit" className="app-btn" disabled={!name.trim()}>
+        Create room
+      </button>
+    </form>
+  );
+}

package/templates/minimal/src/components/RoomCard.queries.ts

@@ -0,0 +1,20 @@
+// Co-located with the room card on the home page. Holds the per-card SELECTION (`RoomCardFragment`)
+// AND the named root query over the room table (`roomsQuery`). React-free, so the API server can
+// import it for query resolution without pulling in React.
+
+import { defineFragment, defineQuery } from "@rindle/client";
+import type { FragmentRef } from "@rindle/client";
+
+import { q, rels, room } from "../../shared/app-def.ts";
+
+/** A room row + a LIVE count of its messages (a scalar `countAs` over the whole `message` table —
+ *  maintained incrementally by the engine, never polled). */
+export const RoomCardFragment = defineFragment(room, (r) =>
+  r.select("id", "name", "createdAt").countAs("messageCount", rels.roomMessages),
+);
+export type RoomCardRef = FragmentRef<typeof RoomCardFragment>;
+
+/** Every room, newest first. No args, so no validator. */
+export const roomsQuery = defineQuery("rooms", () =>
+  q.room.orderBy("createdAt", "desc").orderBy("id", "asc").include(RoomCardFragment),
+);

package/templates/minimal/src/components/RoomCard.tsx

@@ -0,0 +1,23 @@
+// A single room on the home page: its name and a LIVE message count (the `countAs` stays exact as
+// messages are posted — no polling). Reads its data through the `RoomCard` fragment.
+
+import { Link } from "@tanstack/react-router";
+import { useFragment } from "@rindle/react";
+
+import { RoomCardFragment } from "./RoomCard.queries.ts";
+import type { RoomCardRef } from "./RoomCard.queries.ts";
+
+export function RoomCard({ room }: { room: RoomCardRef }) {
+  const data = useFragment(RoomCardFragment, room);
+  return (
+    <li className="app-room">
+      <Link to="/r/$id" params={{ id: data.id }} className="app-room-link">
+        <span className="app-room-name">{data.name}</span>
+        <span className="app-count" title={`${data.messageCount} messages`}>
+          {data.messageCount}
+          <small>messages</small>
+        </span>
+      </Link>
+    </li>
+  );
+}

package/templates/minimal/src/components/RoomView.queries.ts

@@ -0,0 +1,26 @@
+// Co-located with the room-detail view. Holds the detail SELECTION (`RoomDetailFragment`) AND the
+// named root query that fetches it on demand (`roomDetailQuery`). React-free.
+
+import { defineFragment, defineQuery } from "@rindle/client";
+import type { FragmentRef } from "@rindle/client";
+import { z } from "zod";
+
+import { q, rels, room } from "../../shared/app-def.ts";
+import { MessageCardFragment } from "./MessageCard.queries.ts";
+
+/** What the ROOM VIEW renders: the room chrome plus its WHOLE message thread `sub`'d in oldest-first,
+ *  each message via the shared `MessageCardFragment`. To cap the thread you'd add `.limit(n)` here. */
+export const RoomDetailFragment = defineFragment(room, (r) =>
+  r
+    .select("id", "name", "createdAt")
+    .sub("messages", rels.roomMessages, (m) => m.include(MessageCardFragment).orderBy("createdAt", "asc").orderBy("id", "asc")),
+);
+export type RoomDetailRef = FragmentRef<typeof RoomDetailFragment>;
+
+/** The room view's only arg: a room id. */
+const roomIdArgs = z.string().max(80);
+
+/** A single room by id with its WHOLE message thread (`RoomDetailFragment`). */
+export const roomDetailQuery = defineQuery("roomDetail", (raw) => roomIdArgs.parse(raw), (id) =>
+  q.room.where.id(id).include(RoomDetailFragment).one(),
+);

package/templates/minimal/src/components/Toaster.tsx

@@ -0,0 +1,31 @@
+// Surfaces authority REJECTIONS as transient toasts. When a mutation is rejected (e.g. a "spam" room
+// name or message), the optimistic layer snaps back AND `onRejected` fires — we show why.
+
+import { useEffect, useState } from "react";
+
+import { onRejection } from "../rindle-client.ts";
+
+interface Toast {
+  id: number;
+  message: string;
+}
+
+export function Toaster() {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  useEffect(() => {
+    return onRejection((_envelope, reason) => {
+      const id = Date.now() + Math.random();
+      setToasts((t) => [...t, { id, message: reason }]);
+      setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 4000);
+    });
+  }, []);
+  return (
+    <div className="app-toaster" role="status" aria-live="polite">
+      {toasts.map((t) => (
+        <div key={t.id} className="app-toast">
+          {t.message}
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/minimal/src/components/TopBar.tsx

@@ -0,0 +1,36 @@
+// The persistent top bar: the app wordmark + the dev identity control. "Who you are" is a handle
+// persisted per browser; "Switch user" rewrites it. A real app would show the signed-in account from
+// a verified token instead (see shared/auth.ts).
+
+import { Link } from "@tanstack/react-router";
+
+import { useCurrentHandle } from "../lib/use-handle.ts";
+import { currentHandle, setCurrentHandle } from "../rindle-client.ts";
+
+export function TopBar() {
+  const me = useCurrentHandle();
+
+  function switchUser() {
+    const next = prompt("Switch dev user (handle):", currentHandle());
+    if (next && next.trim()) {
+      setCurrentHandle(next.trim());
+      location.reload();
+    }
+  }
+
+  return (
+    <header className="app-topbar">
+      <Link to="/" className="app-wordmark">
+        rindle<span>starter</span>
+      </Link>
+      <div className="app-topbar-right">
+        <span className="app-whoami" title="Your dev identity">
+          signed in as <b>{me}</b>
+        </span>
+        <button type="button" className="app-btn app-btn-ghost" onClick={switchUser}>
+          Switch user
+        </button>
+      </div>
+    </header>
+  );
+}

package/templates/minimal/src/devtools.tsx

@@ -0,0 +1,27 @@
+// The in-browser Rindle devtools pane (mutation timeline / queries inspector / delta stream), mounted
+// ONLY in development. `import.meta.env.DEV` is a STATIC `false` in a production build, so Vite/Rollup
+// fold the ternary to `null` and dead-code-eliminate the dynamic `import("@rindle/react-devtools")` —
+// neither @rindle/react-devtools nor @rindle/devtools end up in the prod bundle. The client is attached
+// to the pane in src/rindle-client.ts (also dev-gated); this file is just the UI mount.
+
+import { lazy, Suspense, useEffect, useState } from "react";
+
+// In production this is `null` (and the import is tree-shaken); in dev it lazily loads the panel chunk,
+// so the devtools code is fetched only when the app actually runs in development.
+const Panel = import.meta.env.DEV
+  ? lazy(() => import("@rindle/react-devtools").then((m) => ({ default: m.RindleDevtools })))
+  : null;
+
+export function DevTools() {
+  // Client-only: don't render (or fetch) the pane during the SSR/prerender shell pass — it has no value
+  // there. Mounting after the first client effect also keeps the server and hydration markup identical
+  // (both render nothing here), so there is never a hydration mismatch.
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!Panel || !mounted) return null;
+  return (
+    <Suspense fallback={null}>
+      <Panel />
+    </Suspense>
+  );
+}

package/templates/minimal/src/lib/format.ts

@@ -0,0 +1,8 @@
+// Tiny date formatting helper, shared by the views. Pure + SSR-safe (same output on server and client
+// for a given input, so hydration matches).
+
+const DATE_TIME = new Intl.DateTimeFormat("en", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
+
+export function formatDateTime(ms: number): string {
+  return DATE_TIME.format(new Date(ms));
+}

package/templates/minimal/src/lib/use-handle.ts

@@ -0,0 +1,16 @@
+// Hydration-safe hook for "who am I (this browser)?". The server renders under the SSR placeholder and
+// so does the client's FIRST render (so the markup byte-matches); after mount it adopts the real
+// persisted handle. Personalized UI reads this so it never causes a hydration mismatch.
+
+import { useEffect, useState } from "react";
+
+import { currentHandle, SSR_USER } from "../rindle-client.ts";
+
+/** The current browser's handle — `SSR_USER` until mounted, then the persisted dev handle. */
+export function useCurrentHandle(): string {
+  const [handle, setHandle] = useState(SSR_USER);
+  useEffect(() => {
+    setHandle(currentHandle());
+  }, []);
+  return handle;
+}

package/templates/minimal/src/rindle-client.ts

@@ -0,0 +1,94 @@
+// The whole client wire-up is ONE call — but DEFERRED to the browser. The optimistic engine is wasm
+// (an in-process IVM engine), so it must never be constructed during the SSR/prerender shell pass.
+// `bootClient()` lazily imports the engine + optimistic glue the first time it runs on the client and
+// memoizes the promise; `app` is a live binding assigned once boot resolves, so the components that
+// fire mutations (`app.mutate.*`) read the ready client at call time.
+//
+// Queries materialize through the API server (subscribed on the daemon's public ws); mutations flush
+// through the client-side queue as confirmed in-order batches; rejections surface via onRejected.
+
+import type { MutationEnvelope } from "@rindle/client";
+
+import wasmUrl from "rindle-wasm-bin?url";
+
+import { mutators, schema } from "../shared/app-def.ts";
+
+// The precise client type — including the typed `mutate.*` surface — is INFERRED from the concrete
+// `createRindleClient({ schema, mutators, … })` call in `bootClientInner`.
+type RindleApp = Awaited<ReturnType<typeof bootClientInner>>;
+type RejectionHandler = (envelope: MutationEnvelope, reason: string) => void;
+
+/** The placeholder identity used before this browser's real persisted handle is known — i.e. during
+ *  SSR (no `localStorage`) and the first hydration render (which must byte-match the server). */
+export const SSR_USER = "ssr";
+
+/** The dev "login": a handle persisted per browser. A real app puts a verified token in `api.headers`
+ *  instead. SSR-safe: returns {@link SSR_USER} when there is no `localStorage` (the server render). */
+export function currentHandle(): string {
+  if (typeof localStorage === "undefined") return SSR_USER;
+  let handle = localStorage.getItem("rindle-user");
+  if (!handle) {
+    handle = `user-${Math.random().toString(36).slice(2, 7)}`;
+    localStorage.setItem("rindle-user", handle);
+  }
+  return handle;
+}
+
+export function setCurrentHandle(handle: string): void {
+  if (typeof localStorage === "undefined") return;
+  localStorage.setItem("rindle-user", handle);
+}
+
+let rejectionHandler: RejectionHandler = () => {};
+export function onRejection(handler: RejectionHandler): () => void {
+  rejectionHandler = handler;
+  return () => {
+    if (rejectionHandler === handler) rejectionHandler = () => {};
+  };
+}
+
+/** The live optimistic client — assigned once {@link bootClient} resolves. Components import this and
+ *  call `app.mutate.*` inside event handlers, by which point boot has completed (the provider in
+ *  src/RindleApp.tsx gates the whole tree on it). */
+export let app: RindleApp;
+
+/** Dynamically imports the wasm engine + optimistic glue (so the SSR/prerender shell never evaluates
+ *  them) and constructs the optimistic client. */
+async function bootClientInner() {
+  const [{ createRindleClient }, { initWasm }] = await Promise.all([
+    import("@rindle/optimistic"),
+    import("@rindle/wasm"),
+  ]);
+  await initWasm(wasmUrl);
+  return createRindleClient({
+    schema,
+    mutators,
+    api: {
+      url: "", // same-origin: /api/rindle/* is a Start server route on this same server
+      // Identity per request: the dev handle header. A real app sends a verified token instead.
+      headers: (): Record<string, string> => ({ "x-rindle-user": currentHandle() }),
+    },
+    // 7601 = the daemon's PUBLIC ws port (7600 is the HTTP control plane).
+    daemon: { wsUrl: import.meta.env.VITE_DAEMON_WS ?? "ws://127.0.0.1:7601" },
+    onRejected: (envelope, reason) => rejectionHandler(envelope, reason),
+  });
+}
+
+let bootPromise: Promise<RindleApp> | undefined;
+
+/** Construct the optimistic client in the browser (idempotent / memoized). */
+export function bootClient(): Promise<RindleApp> {
+  if (!bootPromise) {
+    bootPromise = bootClientInner().then((ready) => {
+      app = ready;
+      // Dev-only: register this client with the in-browser devtools pane (mutation timeline, queries
+      // inspector, delta stream). `import.meta.env.DEV` is a static `false` in a production build, so
+      // this dynamic import of @rindle/devtools is tree-shaken out — devtools never ship to users.
+      if (import.meta.env.DEV) {
+        void import("@rindle/devtools").then(({ attachDevtools }) => attachDevtools(ready));
+      }
+      return ready;
+    });
+  }
+  return bootPromise;
+}