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

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

@@ -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/game-tick/src/vite-env.d.ts

@@ -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/game-tick/tsconfig.json

@@ -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/game-tick/vite.config.ts

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

package/templates/iot-panel/.env.example

@@ -0,0 +1,7 @@
+# FluxyChat worker URL
+VITE_FLUXYCHAT_WORKER_URL=https://your-worker.example.workers.dev
+
+VITE_FLUXYCHAT_MEMBER_JWT=eyJ...
+VITE_FLUXYCHAT_ROOM_ID=demo
+
+# VITE_FLUXYCHAT_PUBLIC_ROOM_ID=your-public-room-id

package/templates/iot-panel/README.md

@@ -0,0 +1,16 @@
+# FluxyChat IoT panel
+
+HTTP ingest + room `server_event` (`iot.reading`). **Not MQTT.** Keep this tab open; curl from another terminal.
+
+```bash
+npx @fluxy-chat/create-fluxy-chat@latest my-iot --example iot-panel
+```
+
+```bash
+curl -X POST "$WORKER/rooms/$ROOM/iot/events" \
+  -H "Authorization: Bearer $JWT" \
+  -H "Content-Type: application/json" \
+  -d '{"deviceId":"sim-1","eventType":"telemetry","payload":{"temp":21}}'
+```
+
+Registered devices: `POST /iot/devices` then `POST /iot/devices/:id/readings` (device shadow). Same room WebSocket.

package/templates/iot-panel/index.html

@@ -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 IoT panel</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/iot-panel/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "fluxy-iot-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/iot-panel/src/App.tsx

@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { FluxyRealtimeProvider, useChat } from "@fluxy-chat/react";
+import { useFluxySession, workerUrl } from "./session";
+
+function IotPanel({
+  roomId,
+  token,
+  workerBase,
+}: {
+  roomId: string;
+  token: string;
+  workerBase: string;
+}) {
+  const [readings, setReadings] = useState<string[]>([]);
+  const { connected, sendMessage, messages } = useChat({
+    roomId,
+    replay: "request",
+    onServerEvent: (ev) => {
+      if (ev.name === "iot.reading") {
+        const d = ev.data;
+        setReadings((prev) => [
+          `${String(d.deviceId ?? ev.userId)} ${String(d.sensor ?? "value")}=${String(d.value)}`,
+          ...prev,
+        ].slice(0, 40));
+      }
+    },
+  });
+
+  const curl = `curl -X POST "$VITE_FLUXYCHAT_WORKER_URL/rooms/${roomId}/iot/events" \\
+  -H "Authorization: Bearer $JWT" \\
+  -H "Content-Type: application/json" \\
+  -d '{"deviceId":"sim-1","eventType":"telemetry","payload":{"temp":21}}'`;
+
+  return (
+    <section className="panel">
+      <header className="chat-header">
+        <strong>IoT panel · {roomId}</strong>
+        <span className="status">{connected ? "listening for iot.reading" : "connecting"}</span>
+      </header>
+      <p className="hint">{curl}</p>
+      <p className="mode-badge" style={{ padding: "0 1rem" }}>
+        HTTP ingest + device shadow. Not MQTT. Prefer POST /iot/devices/:id/readings after registerDevice.
+      </p>
+      <ul className="readings">
+        {readings.length === 0 && messages.length === 0 ? <li>No events yet.</li> : null}
+        {readings.map((row, i) => (
+          <li key={`r-${i}`}>{row}</li>
+        ))}
+        {messages.slice(-12).map((msg) => (
+          <li key={msg.id}>
+            chat · {msg.userId}: {msg.content}
+          </li>
+        ))}
+      </ul>
+      <div className="composer">
+        <button
+          type="button"
+          className="primary"
+          onClick={() => {
+            void fetch(new URL(`/rooms/${encodeURIComponent(roomId)}/iot/events`, workerBase).toString(), {
+              method: "POST",
+              headers: {
+                Authorization: `Bearer ${token}`,
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                deviceId: "sim-1",
+                eventType: "telemetry",
+                payload: { temp: 20 + Math.round(Math.random() * 8) },
+              }),
+            });
+            void sendMessage("simulated ingest posted");
+          }}
+        >
+          Post sample ingest
+        </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} · keep this tab open while you curl</p>
+      <FluxyRealtimeProvider workerUrl={session.workerUrl} authTokenProvider={session.token} userId={session.userId}>
+        <IotPanel roomId={session.roomId} token={session.token} workerBase={session.workerUrl} />
+      </FluxyRealtimeProvider>
+    </div>
+  );
+}

package/templates/iot-panel/src/index.css

@@ -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/iot-panel/src/main.tsx

@@ -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/iot-panel/src/session.ts

@@ -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/iot-panel/src/vite-env.d.ts

@@ -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/iot-panel/tsconfig.json

@@ -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/iot-panel/vite.config.ts

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

package/templates/javascript-live-cursors/.env.example

@@ -0,0 +1,9 @@
+# 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
+
+# Option B — public guest room
+# VITE_FLUXYCHAT_PUBLIC_ROOM_ID=your-public-room-id

package/templates/javascript-live-cursors/README.md

@@ -0,0 +1,9 @@
+# FluxyChat vanilla live cursors
+
+No React. `FluxyChatClient.connect` + WebSocket `type: "cursor"`. Open **two tabs**.
+
+```bash
+npx @fluxy-chat/create-fluxy-chat@latest my-vanilla --example javascript-live-cursors
+cp .env.example .env
+npm run dev
+```

package/templates/javascript-live-cursors/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FluxyChat vanilla cursors</title>
+    <link rel="stylesheet" href="/src/index.css" />
+  </head>
+  <body>
+    <main class="shell">
+      <h1>Vanilla live cursors</h1>
+      <p id="status" class="mode-badge">Starting…</p>
+      <div id="canvas" class="canvas"></div>
+    </main>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/javascript-live-cursors/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "fluxy-javascript-live-cursors",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fluxy-chat/sdk": "^0.6.4"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0"
+  }
+}

package/templates/javascript-live-cursors/src/index.css

@@ -0,0 +1,31 @@
+:root {
+  font-family: system-ui, sans-serif;
+  color: #0f172a;
+  background: #f8fafc;
+}
+body { margin: 0; }
+.shell { max-width: 960px; margin: 0 auto; padding: 1.5rem; }
+.mode-badge { font-size: 0.75rem; color: #64748b; }
+.canvas {
+  position: relative;
+  height: min(70vh, 560px);
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  background: #fff;
+  cursor: none;
+  touch-action: none;
+}
+.peer-cursor {
+  position: absolute;
+  pointer-events: none;
+  transform: translate(-2px, -2px);
+}
+.peer-cursor span {
+  display: block;
+  margin-top: 2px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: currentColor;
+  color: #fff;
+  font-size: 11px;
+}

package/templates/javascript-live-cursors/src/main.ts

@@ -0,0 +1,89 @@
+import {
+  FluxyChatClient,
+  buildCursorOutbound,
+  parseLiveCursorEvent,
+} 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";
+
+const statusEl = document.getElementById("status")!;
+const canvas = document.getElementById("canvas")!;
+const peers = new Map<string, HTMLDivElement>();
+
+function renderCursor(userId: string, x: number, y: number, color?: string, label?: string) {
+  let el = peers.get(userId);
+  if (!el) {
+    el = document.createElement("div");
+    el.className = "peer-cursor";
+    el.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24"><path d="M5.5 3.2 19 12.4l-6.2 1.4 2.6 6.6-2.8 1.1-2.6-6.6L5.5 3.2Z" fill="currentColor"/></svg><span></span>`;
+    canvas.appendChild(el);
+    peers.set(userId, el);
+  }
+  el.style.left = `${x}px`;
+  el.style.top = `${y}px`;
+  el.style.color = color || "#2563eb";
+  const span = el.querySelector("span");
+  if (span) span.textContent = label || userId;
+}
+
+async function boot() {
+  if (!workerUrl) {
+    statusEl.textContent = "Set VITE_FLUXYCHAT_WORKER_URL";
+    return;
+  }
+
+  let token = memberJwt;
+  let userId = "demo-user";
+  let roomId = configuredRoomId;
+
+  if (!token && publicRoomId) {
+    const guest = await FluxyChatClient.joinPublicRoomAsGuest(workerUrl, publicRoomId, {
+      displayName: "Guest",
+    });
+    token = guest.token;
+    userId = guest.userId;
+    roomId = guest.roomId;
+  }
+
+  if (!token) {
+    statusEl.textContent = "Set MEMBER_JWT or PUBLIC_ROOM_ID";
+    return;
+  }
+
+  const client = new FluxyChatClient({ baseUrl: workerUrl, userId, token });
+  const ws = client.connect(roomId, { replay: "off" });
+  statusEl.textContent = `${roomId} · vanilla · two tabs`;
+
+  ws.addEventListener("message", (event) => {
+    if (typeof event.data !== "string") return;
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(event.data);
+    } catch {
+      return;
+    }
+    const cursor = parseLiveCursorEvent(parsed);
+    if (!cursor || cursor.userId === userId) return;
+    renderCursor(cursor.userId, cursor.x, cursor.y, cursor.color, cursor.label);
+  });
+
+  canvas.addEventListener("pointermove", (event) => {
+    if (ws.readyState !== WebSocket.OPEN) return;
+    const rect = canvas.getBoundingClientRect();
+    ws.send(
+      JSON.stringify(
+        buildCursorOutbound({
+          x: event.clientX - rect.left,
+          y: event.clientY - rect.top,
+          color: "#2563eb",
+          label: userId.slice(0, 12),
+        }),
+      ),
+    );
+  });
+}
+
+void boot();

package/templates/javascript-live-cursors/src/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <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;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}