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

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

@@ -0,0 +1,94 @@
+: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: 960px;
+  margin: 0 auto;
+  padding: 1.5rem;
+}
+
+.canvas-wrap {
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #fff;
+}
+
+.chat-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #e2e8f0;
+  background: #0f172a;
+  color: #fff;
+}
+
+.status {
+  font-size: 0.75rem;
+  opacity: 0.9;
+}
+
+.canvas {
+  position: relative;
+  height: min(70vh, 560px);
+  background:
+    linear-gradient(#e2e8f0 1px, transparent 1px) 0 0 / 32px 32px,
+    linear-gradient(90deg, #e2e8f0 1px, transparent 1px) 0 0 / 32px 32px,
+    #f8fafc;
+  cursor: none;
+  touch-action: none;
+}
+
+.peer-cursor {
+  position: absolute;
+  pointer-events: none;
+  transform: translate(-2px, -2px);
+  z-index: 2;
+}
+
+.peer-cursor span {
+  display: block;
+  margin-top: 2px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: currentColor;
+  color: #fff;
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.mode-badge {
+  font-size: 0.75rem;
+  color: #64748b;
+  margin: 0 0 0.75rem;
+}
+
+.error {
+  color: #b91c1c;
+}
+
+.room-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+}
+
+.room-picker input {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+}

package/templates/live-cursors-chat/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/live-cursors-chat/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;
+}

package/templates/live-cursors-chat/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/live-cursors-chat/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/minimal/package.json

@@ -11,8 +11,8 @@
   "dependencies": {
     "@fluxy-chat/ui-kit": "^0.1.1",
     "@fluxy-chat/ui": "^0.1.4",
-    "@fluxy-chat/react": "^0.1.3",
-    "@fluxy-chat/sdk": "^0.6.3",
+    "@fluxy-chat/react": "^0.1.4",
+    "@fluxy-chat/sdk": "^0.6.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package/templates/react/package.json

@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "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",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "zustand": "^5.0.0"

package/templates/slack/package.json

@@ -9,7 +9,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@fluxy-chat/sdk": "^0.6.3",
+    "@fluxy-chat/sdk": "^0.6.4",
     "@slack/bolt": "^4.0.0",
     "@slack/web-api": "^7.0.0"
   },

package/templates/telegram/package.json

@@ -9,7 +9,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@fluxy-chat/sdk": "^0.6.3",
+    "@fluxy-chat/sdk": "^0.6.4",
     "node-telegram-bot-api": "^0.66.0"
   },
   "devDependencies": {

package/templates/tiptap-room/.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 (~2 min via onboarding)
+VITE_FLUXYCHAT_MEMBER_JWT=eyJ...
+VITE_FLUXYCHAT_ROOM_ID=demo
+
+# Option B — public guest room (~60s, no signup)
+# VITE_FLUXYCHAT_PUBLIC_ROOM_ID=your-public-room-id

package/templates/tiptap-room/README.md

@@ -0,0 +1,14 @@
+# FluxyChat Tiptap room
+
+Yjs Storage + Tiptap on the room Durable Object (binary WS, `yjs-sync.js`). Not a second CRDT. Open **two tabs**.
+
+```bash
+npx @fluxy-chat/create-fluxy-chat@latest my-doc --example tiptap-room
+cp .env.example .env
+# VITE_FLUXYCHAT_WORKER_URL + PUBLIC_ROOM_ID or MEMBER_JWT
+npm run dev
+```
+
+## Code
+
+`FluxyYjsProvider` + `useStorage` / `useMutation` from `@fluxy-chat/sdk/yjs`. Tiptap `Collaboration` uses `useYjsDoc()` and `field: "prosemirror"`. LiveFile refs go through `uploadLiveFile` (existing `POST /upload`).

package/templates/tiptap-room/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 Tiptap room</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/tiptap-room/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "fluxy-tiptap-room",
+  "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",
+    "@tiptap/extension-collaboration": "^2.11.5",
+    "@tiptap/pm": "^2.11.5",
+    "@tiptap/react": "^2.11.5",
+    "@tiptap/starter-kit": "^2.11.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "yjs": "^13.6.31"
+  },
+  "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/tiptap-room/src/App.tsx

@@ -0,0 +1,217 @@
+import { useEffect, useState } from "react";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Collaboration from "@tiptap/extension-collaboration";
+import { FluxyChatClient } from "@fluxy-chat/sdk";
+import {
+  FLUXY_YJS_EDITOR_FRAGMENT,
+  FluxyYjsProvider,
+  isLiveFile,
+  uploadLiveFile,
+  useMutation,
+  useRedo,
+  useStorage,
+  useUndo,
+  useYjsContext,
+  type FluxyLiveFile,
+} from "@fluxy-chat/sdk/yjs";
+
+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";
+
+interface FluxySession {
+  workerUrl: string;
+  token: string;
+  userId: string;
+  roomId: string;
+  mode: "member" | "guest";
+}
+
+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 };
+}
+
+function DocBoard() {
+  const { doc, connected, client, roomId } = useYjsContext();
+  const title = useStorage((root) => (typeof root.title === "string" ? root.title : "Untitled"));
+  const hero = useStorage((root) => (isLiveFile(root.hero) ? (root.hero as FluxyLiveFile) : null));
+  const setTitle = useMutation((storage, next: string) => {
+    storage.set("title", next);
+  }, []);
+  const setHero = useMutation((storage, file: FluxyLiveFile) => {
+    storage.set("hero", file);
+  }, []);
+  const undo = useUndo();
+  const redo = useRedo();
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({ history: false }),
+      Collaboration.configure({
+        document: doc,
+        field: FLUXY_YJS_EDITOR_FRAGMENT,
+      }),
+    ],
+  });
+
+  async function onPickFile(file: File | undefined) {
+    if (!file) return;
+    const live = await uploadLiveFile(client, roomId, file);
+    setHero(live);
+  }
+
+  return (
+    <>
+      <div className="chat-header">
+        <strong>Tiptap room</strong>
+        <span className="status">{connected ? "Yjs connected" : "connecting…"}</span>
+      </div>
+      <div className="toolbar">
+        <input
+          type="text"
+          value={title}
+          onChange={(event) => setTitle(event.target.value)}
+          aria-label="Document title"
+        />
+        <button type="button" onClick={() => undo()}>
+          Undo
+        </button>
+        <button type="button" onClick={() => redo()}>
+          Redo
+        </button>
+        <input
+          type="file"
+          accept="image/*"
+          onChange={(event) => void onPickFile(event.target.files?.[0])}
+        />
+      </div>
+      <div className="editor">
+        {editor ? <EditorContent editor={editor} /> : <p>Loading editor…</p>}
+        {hero ? <img className="hero" src={hero.url} alt={hero.name} /> : null}
+      </div>
+    </>
+  );
+}
+
+export function App() {
+  const { session, loading, error } = useFluxySession();
+  const [roomOverride, setRoomOverride] = useState("");
+
+  if (!workerUrl) {
+    return (
+      <div className="shell">
+        <p>Set <code>VITE_FLUXYCHAT_WORKER_URL</code> in <code>.env</code>.</p>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="shell">
+        <p>Starting session…</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="shell">
+        <p className="error">{error}</p>
+      </div>
+    );
+  }
+
+  if (!session) {
+    return (
+      <div className="shell">
+        <p>Set a member JWT or a public room id in <code>.env</code>.</p>
+      </div>
+    );
+  }
+
+  const roomId = roomOverride.trim() || session.roomId;
+
+  return (
+    <div className="shell">
+      <p className="mode-badge">
+        {session.mode} · room <code>{roomId}</code> · open two tabs
+      </p>
+      <label className="room-picker">
+        Room id
+        <input
+          value={roomOverride}
+          placeholder={session.roomId}
+          onChange={(event) => setRoomOverride(event.target.value)}
+        />
+      </label>
+      <FluxyYjsProvider
+        key={roomId}
+        workerUrl={session.workerUrl}
+        token={session.token}
+        userId={session.userId}
+        roomId={roomId}
+      >
+        <DocBoard />
+      </FluxyYjsProvider>
+    </div>
+  );
+}

package/templates/tiptap-room/src/index.css

@@ -0,0 +1,107 @@
+: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: 800px;
+  margin: 0 auto;
+  padding: 1.5rem;
+}
+
+.chat-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border: 1px solid #e2e8f0;
+  border-bottom: 0;
+  border-radius: 12px 12px 0 0;
+  background: #0f172a;
+  color: #fff;
+}
+
+.status {
+  font-size: 0.75rem;
+  opacity: 0.9;
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border: 1px solid #e2e8f0;
+  border-bottom: 0;
+  background: #fff;
+}
+
+.toolbar input[type="text"] {
+  flex: 1;
+  min-width: 12rem;
+  padding: 0.4rem 0.6rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+}
+
+.toolbar button {
+  padding: 0.4rem 0.75rem;
+  border: 0;
+  border-radius: 8px;
+  background: #2563eb;
+  color: #fff;
+  cursor: pointer;
+}
+
+.editor {
+  min-height: 280px;
+  padding: 1rem 1.25rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0 0 12px 12px;
+  background: #fff;
+}
+
+.editor .tiptap {
+  outline: none;
+  min-height: 240px;
+}
+
+.hero {
+  margin: 0.75rem 0 0;
+  max-width: 100%;
+  border-radius: 8px;
+}
+
+.mode-badge {
+  font-size: 0.75rem;
+  color: #64748b;
+  margin: 0 0 0.75rem;
+}
+
+.error {
+  color: #b91c1c;
+}
+
+.room-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+}
+
+.room-picker input {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+}

package/templates/tiptap-room/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/tiptap-room/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;
+}

package/templates/tiptap-room/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/tiptap-room/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/voice-stage/.env.example

@@ -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/voice-stage/README.md

@@ -0,0 +1,11 @@
+# FluxyChat voice stage
+
+`joinVoiceStage` is **signaling on the room WebSocket** (who is speaker/listener). It is not live WebRTC audio and does not publish latency numbers.
+
+Async clips: `POST /messages/voice`.
+
+```bash
+npx @fluxy-chat/create-fluxy-chat@latest my-stage --example voice-stage
+cp .env.example .env
+npm run dev
+```

package/templates/voice-stage/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 voice stage</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>