create-rindle 0.1.6

package/templates/minimal/src/routeTree.gen.ts

@@ -0,0 +1,147 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as RIdRouteImport } from './routes/r.$id'
+import { Route as ApiRindleReadRouteImport } from './routes/api.rindle.read'
+import { Route as ApiRindleQueryRouteImport } from './routes/api.rindle.query'
+import { Route as ApiRindleMutateRouteImport } from './routes/api.rindle.mutate'
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const RIdRoute = RIdRouteImport.update({
+  id: '/r/$id',
+  path: '/r/$id',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiRindleReadRoute = ApiRindleReadRouteImport.update({
+  id: '/api/rindle/read',
+  path: '/api/rindle/read',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiRindleQueryRoute = ApiRindleQueryRouteImport.update({
+  id: '/api/rindle/query',
+  path: '/api/rindle/query',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiRindleMutateRoute = ApiRindleMutateRouteImport.update({
+  id: '/api/rindle/mutate',
+  path: '/api/rindle/mutate',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/r/$id': typeof RIdRoute
+  '/api/rindle/mutate': typeof ApiRindleMutateRoute
+  '/api/rindle/query': typeof ApiRindleQueryRoute
+  '/api/rindle/read': typeof ApiRindleReadRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/r/$id': typeof RIdRoute
+  '/api/rindle/mutate': typeof ApiRindleMutateRoute
+  '/api/rindle/query': typeof ApiRindleQueryRoute
+  '/api/rindle/read': typeof ApiRindleReadRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/r/$id': typeof RIdRoute
+  '/api/rindle/mutate': typeof ApiRindleMutateRoute
+  '/api/rindle/query': typeof ApiRindleQueryRoute
+  '/api/rindle/read': typeof ApiRindleReadRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/r/$id'
+    | '/api/rindle/mutate'
+    | '/api/rindle/query'
+    | '/api/rindle/read'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/'
+    | '/r/$id'
+    | '/api/rindle/mutate'
+    | '/api/rindle/query'
+    | '/api/rindle/read'
+  id:
+    | '__root__'
+    | '/'
+    | '/r/$id'
+    | '/api/rindle/mutate'
+    | '/api/rindle/query'
+    | '/api/rindle/read'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  RIdRoute: typeof RIdRoute
+  ApiRindleMutateRoute: typeof ApiRindleMutateRoute
+  ApiRindleQueryRoute: typeof ApiRindleQueryRoute
+  ApiRindleReadRoute: typeof ApiRindleReadRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/r/$id': {
+      id: '/r/$id'
+      path: '/r/$id'
+      fullPath: '/r/$id'
+      preLoaderRoute: typeof RIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/rindle/read': {
+      id: '/api/rindle/read'
+      path: '/api/rindle/read'
+      fullPath: '/api/rindle/read'
+      preLoaderRoute: typeof ApiRindleReadRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/rindle/query': {
+      id: '/api/rindle/query'
+      path: '/api/rindle/query'
+      fullPath: '/api/rindle/query'
+      preLoaderRoute: typeof ApiRindleQueryRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/rindle/mutate': {
+      id: '/api/rindle/mutate'
+      path: '/api/rindle/mutate'
+      fullPath: '/api/rindle/mutate'
+      preLoaderRoute: typeof ApiRindleMutateRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  RIdRoute: RIdRoute,
+  ApiRindleMutateRoute: ApiRindleMutateRoute,
+  ApiRindleQueryRoute: ApiRindleQueryRoute,
+  ApiRindleReadRoute: ApiRindleReadRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

package/templates/minimal/src/router.tsx

@@ -0,0 +1,20 @@
+// The TanStack Router instance. The route tree is generated from src/routes/* by the Start/router
+// plugin into routeTree.gen.ts (run `pnpm generate-routes` to refresh it outside a dev/build).
+
+import { createRouter as createTanStackRouter } from "@tanstack/react-router";
+
+import { routeTree } from "./routeTree.gen";
+
+export function getRouter() {
+  return createTanStackRouter({
+    routeTree,
+    scrollRestoration: true,
+    defaultPreload: "intent",
+  });
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof getRouter>;
+  }
+}

package/templates/minimal/src/routes/__root.tsx

@@ -0,0 +1,64 @@
+// The root route: the HTML document + the app frame. Inside the document, <RindleApp> renders the
+// merged SSR seed on the server AND through hydration, then boots the in-browser wasm engine
+// (client-only) and swaps to the live store — the SSR→SPA handoff. <TopBar> + <Toaster> are the
+// persistent chrome around the matched view (`children`).
+//
+// Each LEAF route owns its own first-paint preload (its loader returns `{ rindle }`); RootDocument
+// merges every matched route's slice, so a first visit to any route seeds exactly the queries it renders.
+
+import { useMemo } from "react";
+import { HeadContent, Outlet, Scripts, createRootRoute, useMatches } from "@tanstack/react-router";
+import type { DehydratedState } from "@rindle/client";
+
+import { RindleApp } from "../RindleApp.tsx";
+import { TopBar } from "../components/TopBar.tsx";
+import { Toaster } from "../components/Toaster.tsx";
+import { DevTools } from "../devtools.tsx";
+import appCss from "../styles.css?url";
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1.0" },
+      { title: "__PROJECT_NAME__" },
+      { name: "theme-color", content: "#0f1115" },
+    ],
+    links: [{ rel: "stylesheet", href: appCss }],
+  }),
+  shellComponent: RootDocument,
+});
+
+function RootDocument() {
+  // Merge the dehydrated first-paint cache from EVERY matched route, so a first visit to any route
+  // seeds exactly the queries it renders.
+  const matches = useMatches();
+  const ssrState = useMemo<DehydratedState>(() => {
+    const merged: DehydratedState = {};
+    for (const match of matches) {
+      const slice = (match.loaderData as { rindle?: DehydratedState } | undefined)?.rindle;
+      if (slice) Object.assign(merged, slice);
+    }
+    return merged;
+  }, [matches]);
+
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <RindleApp ssrState={ssrState}>
+          <TopBar />
+          <main className="app-main">
+            <Outlet />
+          </main>
+          <Toaster />
+        </RindleApp>
+        {/* Dev-only floating devtools pane (tree-shaken out of production builds). */}
+        <DevTools />
+        <Scripts />
+      </body>
+    </html>
+  );
+}

package/templates/minimal/src/routes/api.rindle.mutate.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+// The authoritative mutation endpoint (`/api/rindle/mutate`), mounted as a TanStack Start server route.
+// The client's optimistic writes flush here; the authority validates args, enforces policy, and runs
+// the approved SQL against the daemon. The dynamic import keeps that server-only code out of the client
+// bundle.
+export const Route = createFileRoute("/api/rindle/mutate")({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const { handleRindleJson } = await import("../../server/rindle-http.ts");
+        return handleRindleJson("mutate", request);
+      },
+    },
+  },
+});

package/templates/minimal/src/routes/api.rindle.query.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+// The live-query lease endpoint, mounted as a TanStack Start server route (`/api/rindle/query`). The
+// authority is reached through a dynamic import INSIDE the handler, so Start strips it — and all its
+// server-only deps (the daemon client, SQL) — from the client bundle entirely. The browser hits this
+// to mint a lease, then opens its subscription straight to the daemon ws.
+export const Route = createFileRoute("/api/rindle/query")({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const { handleRindleJson } = await import("../../server/rindle-http.ts");
+        return handleRindleJson("query", request);
+      },
+    },
+  },
+});

package/templates/minimal/src/routes/api.rindle.read.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+// The one-shot read endpoint (`/api/rindle/read`), mounted as a TanStack Start server route. Kept for
+// non-TanStack/Worker clients and HTTP parity — this app's own SSR reads call the authority IN-PROCESS
+// (src/ssr.ts), skipping the network hop. The dynamic import keeps the server-only authority out of the
+// client bundle.
+export const Route = createFileRoute("/api/rindle/read")({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const { handleRindleJson } = await import("../../server/rindle-http.ts");
+        return handleRindleJson("read", request);
+      },
+    },
+  },
+});

package/templates/minimal/src/routes/index.tsx

@@ -0,0 +1,51 @@
+// The home view (`/`): the list of rooms, each with a LIVE message count, plus a form to create a
+// room. Its loader seeds the rooms query for first paint (SSR); after hydration the wasm engine owns
+// the live read — post a message in any room and its count here updates with no polling.
+
+import { useMemo } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { useQuery, useQueryStatus } from "@rindle/react";
+import type { DehydratedState } from "@rindle/client";
+
+import { roomsQuery } from "../components/RoomCard.queries.ts";
+import { RoomCard } from "../components/RoomCard.tsx";
+import { NewRoomForm } from "../components/NewRoomForm.tsx";
+
+export const Route = createFileRoute("/")({
+  loader: async (): Promise<{ rindle: DehydratedState }> => {
+    if (!import.meta.env.SSR) return { rindle: {} };
+    // Dynamic import: ssr.ts is server-only (it builds the daemon client), so it must never enter the
+    // client bundle. The static `import.meta.env.SSR` guard + this dynamic import keep it out.
+    const { preloadRindle } = await import("../ssr.ts");
+    return { rindle: await preloadRindle([roomsQuery()]) };
+  },
+  component: Home,
+});
+
+function Home() {
+  const query = useMemo(() => roomsQuery(), []);
+  const rooms = useQuery(query);
+  const status = useQueryStatus(query);
+  const loading = status !== "complete" && rooms.length === 0;
+
+  return (
+    <section className="app-page">
+      <div className="app-page-head">
+        <p className="app-eyebrow">Rindle starter</p>
+        <h1>Rooms</h1>
+      </div>
+      <NewRoomForm />
+      {loading ? (
+        <p className="app-empty">Loading rooms…</p>
+      ) : rooms.length === 0 ? (
+        <p className="app-empty">No rooms yet — create the first one above.</p>
+      ) : (
+        <ul className="app-rooms">
+          {rooms.map((room) => (
+            <RoomCard key={room.id} room={room} />
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

package/templates/minimal/src/routes/r.$id.tsx

@@ -0,0 +1,60 @@
+// A room view (`/r/:id`): the room's messages oldest-first, each a live row, plus the composer. The
+// single detail query is seeded by the loader for first paint; after hydration the wasm engine owns
+// the live read and every new message streams in.
+
+import { useMemo } from "react";
+import { Link, createFileRoute } from "@tanstack/react-router";
+import { useQuery, useQueryStatus } from "@rindle/react";
+import type { DehydratedState } from "@rindle/client";
+
+import { roomDetailQuery } from "../components/RoomView.queries.ts";
+import { MessageCard } from "../components/MessageCard.tsx";
+import { Composer } from "../components/Composer.tsx";
+
+export const Route = createFileRoute("/r/$id")({
+  loader: async ({ params }): Promise<{ rindle: DehydratedState }> => {
+    if (!import.meta.env.SSR) return { rindle: {} };
+    const { preloadRindle } = await import("../ssr.ts");
+    return { rindle: await preloadRindle([roomDetailQuery(params.id)]) };
+  },
+  component: RoomView,
+});
+
+function RoomView() {
+  const { id } = Route.useParams();
+  const query = useMemo(() => roomDetailQuery(id), [id]);
+  const room = useQuery(query);
+  const status = useQueryStatus(query);
+
+  if (!room) {
+    return (
+      <section className="app-page">
+        <p className="app-empty">{status === "complete" ? "Room not found." : "Loading room…"}</p>
+        <Link to="/" className="app-link">← Back to rooms</Link>
+      </section>
+    );
+  }
+
+  const messages = room.messages ?? [];
+
+  return (
+    <section className="app-page">
+      <div className="app-breadcrumb">
+        <Link to="/">Rooms</Link> <span aria-hidden="true">/</span> <span>{room.name}</span>
+      </div>
+      <div className="app-page-head">
+        <h1>{room.name}</h1>
+      </div>
+
+      <div className="app-messages">
+        {messages.length === 0 ? (
+          <p className="app-empty">No messages yet — say something below.</p>
+        ) : (
+          messages.map((message) => <MessageCard key={message.id} message={message} />)
+        )}
+      </div>
+
+      <Composer roomId={room.id} />
+    </section>
+  );
+}

package/templates/minimal/src/ssr.ts

@@ -0,0 +1,51 @@
+// SSR preload — the server-side counterpart to the in-browser engine. On the first visit the route
+// loader runs HERE (the server) and reads each first-paint query ONCE through the app authority
+// (server/app-api.ts) — the SAME `createAppApi` factory the /api/rindle server route uses, called
+// IN-PROCESS (no HTTP hop) because SSR and the API now share one server. The authority resolves
+// `(name, args)` → AST itself; the loader never ships a raw AST. It returns the dehydrated snapshot
+// for the HTML, the browser hydrates it (src/RindleApp.tsx) for an instant correct first paint, then
+// the wasm engine boots and the live `subscribe` reconciles.
+//
+// This is a STRICTLY server-side module: it builds the daemon client and reads `process.env`, so it is
+// imported ONLY from inside a loader's `import.meta.env.SSR` guard (a dynamic import), keeping it out
+// of the client bundle. It never imports the engine.
+
+import { createServerStore, type DehydratedState, type OneShotQueryFn, type OneShotResult, type Query } from "@rindle/client";
+import type { ApiContext } from "@rindle/api-server";
+
+import { createAppApi, resolveDaemon } from "../server/app-api.ts";
+import type { User } from "../server/app-api.ts";
+import { schema } from "../shared/app-def.ts";
+
+// SSR reads are PUBLIC (the authority's `authorizeQuery` allows anonymous), so the server reads the
+// first-paint views under no principal. The browser's real per-tab handle takes over on the live
+// subscribe after hydration.
+const SSR_USER: User = undefined;
+
+/** The one-shot read the server Store calls per preloaded query: resolve the NAMED query through the
+ *  authority IN-PROCESS — the same path as the HTTP /api/rindle/read, minus the network round trip —
+ *  and hand back the assembled current view. */
+const readInProcess: OneShotQueryFn = async ({ name, args }): Promise<OneShotResult> => {
+  const daemon = resolveDaemon(process.env, {
+    daemonUrl: "http://127.0.0.1:7600",
+    daemonToken: "dev-daemon-token",
+  });
+  const api = createAppApi(daemon);
+  const context: ApiContext<User> = { user: SSR_USER, request: undefined };
+  return (await api.handleReadJson({ name, args }, context)) as OneShotResult;
+};
+
+/** Preload the given NAMED queries through the authority and return the dehydrated first-paint cache to
+ *  embed in the HTML. Call from a route loader (server only). A failed read degrades to no seed for
+ *  that query (the live engine fills it in after hydration) rather than breaking the whole page. */
+export async function preloadRindle(queries: Array<Query<any, any, any>>): Promise<DehydratedState> {
+  const server = createServerStore(schema, { query: readInProcess });
+  await Promise.all(
+    queries.map((query) =>
+      server.preload(query).catch((err) => {
+        console.error("[ssr] preload failed; rendering this query without its first-paint seed:", err instanceof Error ? err.message : err);
+      }),
+    ),
+  );
+  return server.dehydrate();
+}

package/templates/minimal/src/styles.css

@@ -0,0 +1,220 @@
+:root {
+  --bg: #0f1115;
+  --panel: #171a21;
+  --panel-2: #1e222b;
+  --border: #2a2f3a;
+  --text: #e7e9ee;
+  --muted: #9aa3b2;
+  --accent: #6ea8fe;
+  --danger: #ff7b72;
+  color-scheme: dark;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  line-height: 1.5;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.app-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.85rem 1.25rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+
+.app-wordmark {
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  font-size: 1.15rem;
+}
+.app-wordmark span {
+  color: var(--accent);
+}
+
+.app-topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.app-whoami {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.app-main {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem 4rem;
+}
+
+.app-eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.72rem;
+  color: var(--muted);
+  margin: 0 0 0.15rem;
+}
+.app-page-head h1 {
+  margin: 0 0 1rem;
+  font-size: 1.6rem;
+}
+
+.app-empty {
+  color: var(--muted);
+}
+.app-link {
+  color: var(--accent);
+}
+.app-breadcrumb {
+  color: var(--muted);
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+}
+.app-breadcrumb a {
+  color: var(--accent);
+}
+
+.app-btn {
+  background: var(--accent);
+  color: #0b1020;
+  border: none;
+  border-radius: 8px;
+  padding: 0.5rem 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.app-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.app-btn-ghost {
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+
+input,
+textarea {
+  width: 100%;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  padding: 0.55rem 0.7rem;
+  font: inherit;
+  resize: vertical;
+}
+
+.app-new-room {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.25rem;
+}
+.app-new-room input {
+  flex: 1;
+}
+.app-new-room .app-btn {
+  white-space: nowrap;
+}
+
+.app-rooms {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.6rem;
+}
+.app-room-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.9rem 1rem;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+}
+.app-room-link:hover {
+  border-color: var(--accent);
+}
+.app-room-name {
+  font-weight: 600;
+}
+.app-count {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+.app-count small {
+  font-weight: 400;
+  font-size: 0.7rem;
+  color: var(--muted);
+}
+
+.app-messages {
+  display: grid;
+  gap: 0.6rem;
+  margin: 1rem 0;
+}
+.app-message {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 0.75rem 0.9rem;
+}
+.app-message-head {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.8rem;
+  color: var(--muted);
+  margin-bottom: 0.25rem;
+}
+.app-message-author {
+  font-weight: 600;
+  color: var(--text);
+}
+.app-message-body {
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.app-composer textarea {
+  margin-bottom: 0.5rem;
+}
+.app-composer-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.app-toaster {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  display: grid;
+  gap: 0.5rem;
+  z-index: 50;
+}
+.app-toast {
+  background: var(--danger);
+  color: #1a0c0a;
+  padding: 0.6rem 0.9rem;
+  border-radius: 10px;
+  font-weight: 600;
+  max-width: 320px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}

package/templates/minimal/src/tanstack-start.d.ts

@@ -0,0 +1,6 @@
+// Pull @tanstack/react-start's augmentation of TanStack Router's route options into the type program,
+// so the `server` key our API routes (src/routes/api.rindle.*.tsx) use is typed under `tsc`. The vite
+// Start plugin injects this import into routeTree.gen.ts during dev/build, but `pnpm typecheck`
+// regenerates that file with the bare `tsr` CLI (which omits it) — so we load it here once, for the
+// whole project, where the generator can't strip it.
+import type {} from "@tanstack/react-start";