npm - @fluxy-chat/create-fluxy-chat - Versions diffs - 0.5.11 → 0.5.13 - Mend

@fluxy-chat/create-fluxy-chat 0.5.11 → 0.5.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (149) hide show

package/CHANGELOG.md +16 -0
package/dist/index.js +109 -0
package/package.json +1 -1
package/readme.md +11 -0
package/templates/basic/package.json +1 -1
package/templates/comments-board/.env.example +11 -0
package/templates/comments-board/README.md +9 -0
package/templates/comments-board/index.html +12 -0
package/templates/comments-board/package.json +26 -0
package/templates/comments-board/src/App.tsx +86 -0
package/templates/comments-board/src/index.css +75 -0
package/templates/comments-board/src/main.tsx +10 -0
package/templates/comments-board/src/session.ts +73 -0
package/templates/comments-board/src/vite-env.d.ts +13 -0
package/templates/comments-board/tsconfig.json +21 -0
package/templates/comments-board/vite.config.ts +7 -0
package/templates/deal-room/.env.example +11 -0
package/templates/deal-room/README.md +11 -0
package/templates/deal-room/index.html +12 -0
package/templates/deal-room/package.json +25 -0
package/templates/deal-room/src/App.tsx +110 -0
package/templates/deal-room/src/index.css +75 -0
package/templates/deal-room/src/main.tsx +10 -0
package/templates/deal-room/src/session.ts +73 -0
package/templates/deal-room/src/vite-env.d.ts +13 -0
package/templates/deal-room/tsconfig.json +21 -0
package/templates/deal-room/vite.config.ts +7 -0
package/templates/discord/package.json +1 -1
package/templates/draw/.env.example +7 -0
package/templates/draw/README.md +7 -0
package/templates/draw/index.html +12 -0
package/templates/draw/package.json +25 -0
package/templates/draw/src/App.tsx +91 -0
package/templates/draw/src/index.css +75 -0
package/templates/draw/src/main.tsx +10 -0
package/templates/draw/src/session.ts +73 -0
package/templates/draw/src/vite-env.d.ts +13 -0
package/templates/draw/tsconfig.json +21 -0
package/templates/draw/vite.config.ts +7 -0
package/templates/fleet-panel/.env.example +11 -0
package/templates/fleet-panel/README.md +9 -0
package/templates/fleet-panel/index.html +12 -0
package/templates/fleet-panel/package.json +25 -0
package/templates/fleet-panel/src/App.tsx +83 -0
package/templates/fleet-panel/src/index.css +75 -0
package/templates/fleet-panel/src/main.tsx +10 -0
package/templates/fleet-panel/src/session.ts +73 -0
package/templates/fleet-panel/src/vite-env.d.ts +13 -0
package/templates/fleet-panel/tsconfig.json +21 -0
package/templates/fleet-panel/vite.config.ts +7 -0
package/templates/full/package.json +3 -3
package/templates/game-tick/.env.example +11 -0
package/templates/game-tick/README.md +9 -0
package/templates/game-tick/index.html +12 -0
package/templates/game-tick/package.json +25 -0
package/templates/game-tick/src/App.tsx +87 -0
package/templates/game-tick/src/index.css +75 -0
package/templates/game-tick/src/main.tsx +10 -0
package/templates/game-tick/src/session.ts +73 -0
package/templates/game-tick/src/vite-env.d.ts +13 -0
package/templates/game-tick/tsconfig.json +21 -0
package/templates/game-tick/vite.config.ts +7 -0
package/templates/iot-panel/.env.example +7 -0
package/templates/iot-panel/README.md +16 -0
package/templates/iot-panel/index.html +12 -0
package/templates/iot-panel/package.json +25 -0
package/templates/iot-panel/src/App.tsx +97 -0
package/templates/iot-panel/src/index.css +75 -0
package/templates/iot-panel/src/main.tsx +10 -0
package/templates/iot-panel/src/session.ts +73 -0
package/templates/iot-panel/src/vite-env.d.ts +13 -0
package/templates/iot-panel/tsconfig.json +21 -0
package/templates/iot-panel/vite.config.ts +7 -0
package/templates/javascript-live-cursors/.env.example +9 -0
package/templates/javascript-live-cursors/README.md +9 -0
package/templates/javascript-live-cursors/index.html +17 -0
package/templates/javascript-live-cursors/package.json +18 -0
package/templates/javascript-live-cursors/src/index.css +31 -0
package/templates/javascript-live-cursors/src/main.ts +89 -0
package/templates/javascript-live-cursors/src/vite-env.d.ts +12 -0
package/templates/javascript-live-cursors/tsconfig.json +13 -0
package/templates/javascript-live-cursors/vite.config.ts +5 -0
package/templates/live-cursors/.env.example +9 -0
package/templates/live-cursors/README.md +20 -0
package/templates/live-cursors/index.html +12 -0
package/templates/live-cursors/package.json +25 -0
package/templates/live-cursors/src/App.tsx +214 -0
package/templates/live-cursors/src/index.css +94 -0
package/templates/live-cursors/src/main.tsx +10 -0
package/templates/live-cursors/src/vite-env.d.ts +12 -0
package/templates/live-cursors/tsconfig.json +21 -0
package/templates/live-cursors/vite.config.ts +7 -0
package/templates/live-cursors-chat/.env.example +9 -0
package/templates/live-cursors-chat/README.md +11 -0
package/templates/live-cursors-chat/index.html +12 -0
package/templates/live-cursors-chat/package.json +25 -0
package/templates/live-cursors-chat/src/App.tsx +241 -0
package/templates/live-cursors-chat/src/index.css +94 -0
package/templates/live-cursors-chat/src/main.tsx +10 -0
package/templates/live-cursors-chat/src/vite-env.d.ts +12 -0
package/templates/live-cursors-chat/tsconfig.json +21 -0
package/templates/live-cursors-chat/vite.config.ts +7 -0
package/templates/minimal/package.json +2 -2
package/templates/react/package.json +2 -2
package/templates/slack/package.json +1 -1
package/templates/telegram/package.json +1 -1
package/templates/tiptap-room/.env.example +9 -0
package/templates/tiptap-room/README.md +14 -0
package/templates/tiptap-room/index.html +12 -0
package/templates/tiptap-room/package.json +29 -0
package/templates/tiptap-room/src/App.tsx +217 -0
package/templates/tiptap-room/src/index.css +107 -0
package/templates/tiptap-room/src/main.tsx +10 -0
package/templates/tiptap-room/src/vite-env.d.ts +12 -0
package/templates/tiptap-room/tsconfig.json +21 -0
package/templates/tiptap-room/vite.config.ts +7 -0
package/templates/voice-stage/.env.example +11 -0
package/templates/voice-stage/README.md +11 -0
package/templates/voice-stage/index.html +12 -0
package/templates/voice-stage/package.json +25 -0
package/templates/voice-stage/src/App.tsx +61 -0
package/templates/voice-stage/src/index.css +75 -0
package/templates/voice-stage/src/main.tsx +10 -0
package/templates/voice-stage/src/session.ts +73 -0
package/templates/voice-stage/src/vite-env.d.ts +13 -0
package/templates/voice-stage/tsconfig.json +21 -0
package/templates/voice-stage/vite.config.ts +7 -0
package/templates/war-room/.env.example +11 -0
package/templates/war-room/README.md +11 -0
package/templates/war-room/index.html +12 -0
package/templates/war-room/package.json +26 -0
package/templates/war-room/src/App.tsx +120 -0
package/templates/war-room/src/index.css +75 -0
package/templates/war-room/src/main.tsx +10 -0
package/templates/war-room/src/session.ts +73 -0
package/templates/war-room/src/vite-env.d.ts +13 -0
package/templates/war-room/tsconfig.json +21 -0
package/templates/war-room/vite.config.ts +7 -0
package/templates/whiteboard/.env.example +11 -0
package/templates/whiteboard/README.md +9 -0
package/templates/whiteboard/index.html +12 -0
package/templates/whiteboard/package.json +26 -0
package/templates/whiteboard/src/App.tsx +122 -0
package/templates/whiteboard/src/index.css +75 -0
package/templates/whiteboard/src/main.tsx +10 -0
package/templates/whiteboard/src/session.ts +73 -0
package/templates/whiteboard/src/vite-env.d.ts +13 -0
package/templates/whiteboard/tsconfig.json +21 -0
package/templates/whiteboard/vite.config.ts +7 -0

package/templates/fleet-panel/.env.example ADDED Viewed

@@ -0,0 +1,11 @@
+# FluxyChat worker URL (hosted or self-hosted)
+VITE_FLUXYCHAT_WORKER_URL=https://your-worker.example.workers.dev
+# Option A — member JWT
+VITE_FLUXYCHAT_MEMBER_JWT=eyJ...
+VITE_FLUXYCHAT_ROOM_ID=demo
+# Optional — room-peer agent on the timeline
+# VITE_FLUXYCHAT_AGENT_ID=agt_...
+# Option B — public guest room
+# VITE_FLUXYCHAT_PUBLIC_ROOM_ID=your-public-room-id

package/templates/fleet-panel/README.md ADDED Viewed

@@ -0,0 +1,9 @@
+# FluxyChat fleet panel
+HTTP GPS ingest (`POST /fleet/gps`) fans out `server_event` `fleet.gps_update` on the room. Not MQTT.
+```bash
+npx @fluxy-chat/create-fluxy-chat@latest my-fleet --example fleet-panel
+cp .env.example .env
+npm run dev
+```

package/templates/fleet-panel/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FluxyChat fleet panel</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/fleet-panel/package.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "name": "fluxy-fleet-panel",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fluxy-chat/react": "^0.1.4",
+    "@fluxy-chat/sdk": "^0.6.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0"
+  }
+}

package/templates/fleet-panel/src/App.tsx ADDED Viewed

@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { FluxyRealtimeProvider, useChat, useFluxyChat } from "@fluxy-chat/react";
+import { useFluxySession, workerUrl } from "./session";
+function FleetBoard({ roomId }: { roomId: string }) {
+  const { client } = useFluxyChat();
+  const [rows, setRows] = useState<string[]>([]);
+  const [vehicleId, setVehicleId] = useState<string | null>(null);
+  const { connected } = useChat({
+    roomId,
+    replay: "request",
+    onServerEvent: (ev) => {
+      if (ev.name !== "fleet.gps_update") return;
+      const d = ev.data;
+      setRows((prev) =>
+        [`${String(d.vehicleId)} ${String(d.lat)},${String(d.lng)}`, ...prev].slice(0, 40),
+      );
+    },
+  });
+  async function ensureVehicle() {
+    if (!client) return null;
+    if (vehicleId) return vehicleId;
+    const created = await client.createFleetVehicle({ name: "demo-van" });
+    setVehicleId(created.vehicle.id);
+    return created.vehicle.id;
+  }
+  async function pingGps() {
+    if (!client) return;
+    const id = await ensureVehicle();
+    if (!id) return;
+    await client.ingestGps({
+      vehicleId: id,
+      lat: 45.46 + Math.random() * 0.01,
+      lng: 9.18 + Math.random() * 0.01,
+      roomId,
+    });
+  }
+  const curl = `curl -X POST "$VITE_FLUXYCHAT_WORKER_URL/fleet/gps" \\
+  -H "Authorization: Bearer $JWT" \\
+  -H "Content-Type: application/json" \\
+  -d '{"vehicleId":"<id>","lat":45.46,"lng":9.18,"roomId":"${roomId}"}'`;
+  return (
+    <section className="panel">
+      <header className="chat-header">
+        <strong>Fleet · {roomId}</strong>
+        <span className="status">{connected ? "listening for fleet.gps_update" : "connecting"}</span>
+      </header>
+      <p className="hint">{curl}</p>
+      <ul className="readings">
+        {rows.length === 0 ? <li>No GPS yet.</li> : null}
+        {rows.map((row, i) => (
+          <li key={`${row}-${i}`}>{row}</li>
+        ))}
+      </ul>
+      <div className="composer">
+        <button type="button" className="primary" onClick={() => void pingGps()}>
+          Post sample GPS
+        </button>
+      </div>
+    </section>
+  );
+}
+export function App() {
+  const { session, loading, error } = useFluxySession();
+  if (!workerUrl) return <div className="shell">Set <code>VITE_FLUXYCHAT_WORKER_URL</code>.</div>;
+  if (loading) return <div className="shell">Starting…</div>;
+  if (error) return <div className="shell error">{error}</div>;
+  if (!session) return <div className="shell">Set a member JWT or public room id.</div>;
+  return (
+    <div className="shell">
+      <p className="mode-badge">{session.mode} · HTTP GPS ingest. Not MQTT.</p>
+      <FluxyRealtimeProvider workerUrl={session.workerUrl} authTokenProvider={session.token} userId={session.userId}>
+        <FleetBoard roomId={session.roomId} />
+      </FluxyRealtimeProvider>
+    </div>
+  );
+}

package/templates/fleet-panel/src/index.css ADDED Viewed

@@ -0,0 +1,75 @@
+:root {
+  font-family: system-ui, -apple-system, sans-serif;
+  line-height: 1.5;
+  color: #0f172a;
+  background: #f8fafc;
+}
+* { box-sizing: border-box; }
+body { margin: 0; }
+.shell { max-width: 720px; margin: 0 auto; padding: 1.5rem; }
+.panel {
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #fff;
+}
+.chat-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: #0f172a;
+  color: #fff;
+}
+.status { font-size: 0.75rem; opacity: 0.9; }
+.roster {
+  margin: 0;
+  padding: 0.5rem 1rem;
+  list-style: none;
+  font-size: 0.8rem;
+  color: #64748b;
+  border-bottom: 1px solid #e2e8f0;
+}
+.log { min-height: 240px; max-height: 50vh; overflow: auto; padding: 1rem; }
+.composer { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid #e2e8f0; }
+.composer input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid #cbd5e1; border-radius: 8px; }
+.composer button, button.primary {
+  padding: 0.5rem 0.75rem;
+  border: 0;
+  border-radius: 8px;
+  background: #2563eb;
+  color: #fff;
+  cursor: pointer;
+}
+.mode-badge { font-size: 0.75rem; color: #64748b; margin-bottom: 0.75rem; }
+.error { color: #b91c1c; }
+code { font-size: 0.85em; }
+.hint { font-size: 0.8rem; color: #475569; white-space: pre-wrap; background: #f1f5f9; padding: 0.75rem; border-radius: 8px; }
+.readings { margin: 0; padding: 0.75rem 1rem; list-style: none; font-size: 0.875rem; }
+.canvas {
+  position: relative;
+  height: min(70vh, 480px);
+  background: #f8fafc;
+  touch-action: none;
+}
+.dot {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+.peer-cursor {
+  position: absolute;
+  pointer-events: none;
+  z-index: 2;
+}
+.peer-cursor span {
+  display: block;
+  margin-top: 2px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: currentColor;
+  color: #fff;
+  font-size: 11px;
+}

package/templates/fleet-panel/src/main.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./index.css";
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/fleet-panel/src/session.ts ADDED Viewed

@@ -0,0 +1,73 @@
+import { useEffect, useState } from "react";
+import { FluxyChatClient } from "@fluxy-chat/sdk";
+const workerUrl = import.meta.env.VITE_FLUXYCHAT_WORKER_URL?.trim();
+const memberJwt = import.meta.env.VITE_FLUXYCHAT_MEMBER_JWT?.trim();
+const publicRoomId = import.meta.env.VITE_FLUXYCHAT_PUBLIC_ROOM_ID?.trim();
+const configuredRoomId = import.meta.env.VITE_FLUXYCHAT_ROOM_ID?.trim() || "demo";
+export interface FluxySession {
+  workerUrl: string;
+  token: string;
+  userId: string;
+  roomId: string;
+  mode: "member" | "guest";
+}
+export function useFluxySession(): {
+  session: FluxySession | null;
+  loading: boolean;
+  error: string | null;
+} {
+  const [session, setSession] = useState<FluxySession | null>(null);
+  const [loading, setLoading] = useState(Boolean(workerUrl));
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    if (!workerUrl) {
+      setLoading(false);
+      return;
+    }
+    if (memberJwt) {
+      setSession({
+        workerUrl,
+        token: memberJwt,
+        userId: "demo-user",
+        roomId: configuredRoomId,
+        mode: "member",
+      });
+      setLoading(false);
+      return;
+    }
+    if (publicRoomId) {
+      let cancelled = false;
+      void FluxyChatClient.joinPublicRoomAsGuest(workerUrl, publicRoomId, {
+        displayName: "Guest",
+      })
+        .then((guest) => {
+          if (cancelled) return;
+          setSession({
+            workerUrl,
+            token: guest.token,
+            userId: guest.userId,
+            roomId: guest.roomId,
+            mode: "guest",
+          });
+        })
+        .catch((err) => {
+          if (!cancelled) setError(err instanceof Error ? err.message : "Guest session failed");
+        })
+        .finally(() => {
+          if (!cancelled) setLoading(false);
+        });
+      return () => {
+        cancelled = true;
+      };
+    }
+    setLoading(false);
+  }, []);
+  return { session, loading, error };
+}
+export { workerUrl };

package/templates/fleet-panel/src/vite-env.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+/// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly VITE_FLUXYCHAT_WORKER_URL: string;
+  readonly VITE_FLUXYCHAT_MEMBER_JWT?: string;
+  readonly VITE_FLUXYCHAT_ROOM_ID?: string;
+  readonly VITE_FLUXYCHAT_PUBLIC_ROOM_ID?: string;
+  readonly VITE_FLUXYCHAT_AGENT_ID?: string;
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/templates/fleet-panel/tsconfig.json ADDED Viewed

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/templates/fleet-panel/vite.config.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+export default defineConfig({
+  plugins: [react()],
+  server: { port: 5173 },
+});

package/templates/full/package.json CHANGED Viewed

@@ -16,8 +16,8 @@
     "postinstall": "node scripts/hoist-fluxy-sdk.mjs"
   },
   "dependencies": {
-    "@fluxy-chat/react": "^0.1.3",
-    "@fluxy-chat/sdk": "^0.6.3",
+    "@fluxy-chat/react": "^0.1.4",
+    "@fluxy-chat/sdk": "^0.6.4",
     "@fluxy-chat/ui": "^0.1.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -40,7 +40,7 @@
   },
   "pnpm": {
     "overrides": {
-      "@fluxy-chat/sdk": "^0.6.3"
+      "@fluxy-chat/sdk": "^0.6.4"
     }
   }
 }

package/templates/game-tick/.env.example ADDED Viewed

@@ -0,0 +1,11 @@
+# FluxyChat worker URL (hosted or self-hosted)
+VITE_FLUXYCHAT_WORKER_URL=https://your-worker.example.workers.dev
+# Option A — member JWT
+VITE_FLUXYCHAT_MEMBER_JWT=eyJ...
+VITE_FLUXYCHAT_ROOM_ID=demo
+# Optional — room-peer agent on the timeline
+# VITE_FLUXYCHAT_AGENT_ID=agt_...
+# Option B — public guest room
+# VITE_FLUXYCHAT_PUBLIC_ROOM_ID=your-public-room-id

package/templates/game-tick/README.md ADDED Viewed

@@ -0,0 +1,9 @@
+# FluxyChat game tick
+Lobby → match → `POST /games/matches/:id/input` fans out `server_event` `game.tick` on the same room WebSocket. **Not a netcode engine.**
+```bash
+npx @fluxy-chat/create-fluxy-chat@latest my-game --example game-tick
+cp .env.example .env
+npm run dev
+```

package/templates/game-tick/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FluxyChat game tick</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/game-tick/package.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "name": "fluxy-game-tick",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fluxy-chat/react": "^0.1.4",
+    "@fluxy-chat/sdk": "^0.6.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0"
+  }
+}

package/templates/game-tick/src/App.tsx ADDED Viewed

@@ -0,0 +1,87 @@
+import { useMemo, useState } from "react";
+import { createWorkerFluxyGameClient } from "@fluxy-chat/sdk";
+import { FluxyRealtimeProvider, useChat, useFluxyChat } from "@fluxy-chat/react";
+import { useFluxySession, workerUrl } from "./session";
+function GameBoard({ roomId, userId }: { roomId: string; userId: string }) {
+  const { client } = useFluxyChat();
+  const game = useMemo(() => (client ? createWorkerFluxyGameClient(client) : null), [client]);
+  const [ticks, setTicks] = useState<string[]>([]);
+  const [matchId, setMatchId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const { connected } = useChat({
+    roomId,
+    replay: "request",
+    onServerEvent: (ev) => {
+      if (ev.name === "game.tick" || ev.name === "game.match_started") {
+        setTicks((prev) => [`${ev.name} ${JSON.stringify(ev.data)}`, ...prev].slice(0, 40));
+      }
+    },
+  });
+  async function start() {
+    if (!game) return;
+    setError(null);
+    try {
+      const gameMode = `demo-${Date.now()}`;
+      await game.matchmake({ playerId: userId, roomId, gameMode, maxPlayers: 2 });
+      const lobby = await game.matchmake({
+        playerId: `${userId}-cpu`,
+        roomId,
+        gameMode,
+        maxPlayers: 2,
+      });
+      const match = await game.startMatch(lobby.lobbyId);
+      setMatchId(match.matchId);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "match_failed");
+    }
+  }
+  async function inputTick() {
+    if (!game || !matchId) return;
+    await game.submitInput(matchId, { playerId: userId, actions: { move: "nudge" } });
+  }
+  return (
+    <section className="panel">
+      <header className="chat-header">
+        <strong>Game tick · {roomId}</strong>
+        <span className="status">{connected ? "listening for game.tick" : "connecting"}</span>
+      </header>
+      <p className="hint">Not netcode. Matchmake binds this room, then input posts a server_event tick.</p>
+      {error ? <p className="error" style={{ padding: "0 1rem" }}>{error}</p> : null}
+      <ul className="readings">
+        {ticks.length === 0 ? <li>No ticks yet.</li> : null}
+        {ticks.map((row, i) => (
+          <li key={`${i}-${row.slice(0, 24)}`}>{row}</li>
+        ))}
+      </ul>
+      <div className="composer">
+        <button type="button" className="primary" onClick={() => void start()}>
+          Matchmake + start
+        </button>
+        <button type="button" className="primary" disabled={!matchId} onClick={() => void inputTick()}>
+          Submit input
+        </button>
+      </div>
+    </section>
+  );
+}
+export function App() {
+  const { session, loading, error } = useFluxySession();
+  if (!workerUrl) return <div className="shell">Set <code>VITE_FLUXYCHAT_WORKER_URL</code>.</div>;
+  if (loading) return <div className="shell">Starting…</div>;
+  if (error) return <div className="shell error">{error}</div>;
+  if (!session) return <div className="shell">Set a member JWT or public room id.</div>;
+  return (
+    <div className="shell">
+      <p className="mode-badge">{session.mode} · server_event ticks, not rollback netcode</p>
+      <FluxyRealtimeProvider workerUrl={session.workerUrl} authTokenProvider={session.token} userId={session.userId}>
+        <GameBoard roomId={session.roomId} userId={session.userId} />
+      </FluxyRealtimeProvider>
+    </div>
+  );
+}

package/templates/game-tick/src/index.css ADDED Viewed

@@ -0,0 +1,75 @@
+:root {
+  font-family: system-ui, -apple-system, sans-serif;
+  line-height: 1.5;
+  color: #0f172a;
+  background: #f8fafc;
+}
+* { box-sizing: border-box; }
+body { margin: 0; }
+.shell { max-width: 720px; margin: 0 auto; padding: 1.5rem; }
+.panel {
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #fff;
+}
+.chat-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  background: #0f172a;
+  color: #fff;
+}
+.status { font-size: 0.75rem; opacity: 0.9; }
+.roster {
+  margin: 0;
+  padding: 0.5rem 1rem;
+  list-style: none;
+  font-size: 0.8rem;
+  color: #64748b;
+  border-bottom: 1px solid #e2e8f0;
+}
+.log { min-height: 240px; max-height: 50vh; overflow: auto; padding: 1rem; }
+.composer { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid #e2e8f0; }
+.composer input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid #cbd5e1; border-radius: 8px; }
+.composer button, button.primary {
+  padding: 0.5rem 0.75rem;
+  border: 0;
+  border-radius: 8px;
+  background: #2563eb;
+  color: #fff;
+  cursor: pointer;
+}
+.mode-badge { font-size: 0.75rem; color: #64748b; margin-bottom: 0.75rem; }
+.error { color: #b91c1c; }
+code { font-size: 0.85em; }
+.hint { font-size: 0.8rem; color: #475569; white-space: pre-wrap; background: #f1f5f9; padding: 0.75rem; border-radius: 8px; }
+.readings { margin: 0; padding: 0.75rem 1rem; list-style: none; font-size: 0.875rem; }
+.canvas {
+  position: relative;
+  height: min(70vh, 480px);
+  background: #f8fafc;
+  touch-action: none;
+}
+.dot {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+.peer-cursor {
+  position: absolute;
+  pointer-events: none;
+  z-index: 2;
+}
+.peer-cursor span {
+  display: block;
+  margin-top: 2px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: currentColor;
+  color: #fff;
+  font-size: 11px;
+}

package/templates/game-tick/src/main.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./index.css";
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/game-tick/src/session.ts ADDED Viewed

@@ -0,0 +1,73 @@
+import { useEffect, useState } from "react";
+import { FluxyChatClient } from "@fluxy-chat/sdk";
+const workerUrl = import.meta.env.VITE_FLUXYCHAT_WORKER_URL?.trim();
+const memberJwt = import.meta.env.VITE_FLUXYCHAT_MEMBER_JWT?.trim();
+const publicRoomId = import.meta.env.VITE_FLUXYCHAT_PUBLIC_ROOM_ID?.trim();
+const configuredRoomId = import.meta.env.VITE_FLUXYCHAT_ROOM_ID?.trim() || "demo";
+export interface FluxySession {
+  workerUrl: string;
+  token: string;
+  userId: string;
+  roomId: string;
+  mode: "member" | "guest";
+}
+export function useFluxySession(): {
+  session: FluxySession | null;
+  loading: boolean;
+  error: string | null;
+} {
+  const [session, setSession] = useState<FluxySession | null>(null);
+  const [loading, setLoading] = useState(Boolean(workerUrl));
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    if (!workerUrl) {
+      setLoading(false);
+      return;
+    }
+    if (memberJwt) {
+      setSession({
+        workerUrl,
+        token: memberJwt,
+        userId: "demo-user",
+        roomId: configuredRoomId,
+        mode: "member",
+      });
+      setLoading(false);
+      return;
+    }
+    if (publicRoomId) {
+      let cancelled = false;
+      void FluxyChatClient.joinPublicRoomAsGuest(workerUrl, publicRoomId, {
+        displayName: "Guest",
+      })
+        .then((guest) => {
+          if (cancelled) return;
+          setSession({
+            workerUrl,
+            token: guest.token,
+            userId: guest.userId,
+            roomId: guest.roomId,
+            mode: "guest",
+          });
+        })
+        .catch((err) => {
+          if (!cancelled) setError(err instanceof Error ? err.message : "Guest session failed");
+        })
+        .finally(() => {
+          if (!cancelled) setLoading(false);
+        });
+      return () => {
+        cancelled = true;
+      };
+    }
+    setLoading(false);
+  }, []);
+  return { session, loading, error };
+}
+export { workerUrl };