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/whiteboard/.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/whiteboard/README.md ADDED Viewed

@@ -0,0 +1,9 @@
+# FluxyChat whiteboard
+Freehand strokes on **Yjs** (`Y.Array` on `Y.Map("storage")`) plus live cursors on the same room. Not a second CRDT. Open **two tabs**.
+```bash
+npx @fluxy-chat/create-fluxy-chat@latest my-board --example whiteboard
+cp .env.example .env
+npm run dev
+```

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

package/templates/whiteboard/package.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "name": "fluxy-whiteboard",
+  "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",
+    "yjs": "^13.6.31",
+    "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/whiteboard/src/App.tsx ADDED Viewed

@@ -0,0 +1,122 @@
+import { useRef, useState, type PointerEvent } from "react";
+import * as Y from "yjs";
+import { FluxyRealtimeProvider, useChat } from "@fluxy-chat/react";
+import { FluxyYjsProvider, useMutation, useStorage } from "@fluxy-chat/sdk/yjs";
+import { useFluxySession, workerUrl } from "./session";
+interface Stroke {
+  id: string;
+  color: string;
+  points: number[];
+}
+function Board({ roomId, selfUserId }: { roomId: string; selfUserId: string }) {
+  const strokes = useStorage((root) => (Array.isArray(root.strokes) ? (root.strokes as Stroke[]) : []));
+  const addStroke = useMutation((storage, stroke: Stroke) => {
+    let arr = storage.get("strokes");
+    if (!(arr instanceof Y.Array)) {
+      arr = new Y.Array();
+      storage.set("strokes", arr);
+    }
+    (arr as Y.Array<Stroke>).push([stroke]);
+  }, []);
+  const { liveCursors, sendCursor, connected } = useChat({ roomId, replay: "off" });
+  const current = useRef<number[]>([]);
+  const [preview, setPreview] = useState<number[]>([]);
+  function point(event: PointerEvent<HTMLDivElement>) {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return [event.clientX - rect.left, event.clientY - rect.top] as const;
+  }
+  return (
+    <section className="panel">
+      <header className="chat-header">
+        <strong>Whiteboard · {roomId}</strong>
+        <span className="status">{connected ? "Yjs + cursors" : "connecting"}</span>
+      </header>
+      <div
+        className="canvas"
+        onPointerDown={(event) => {
+          event.currentTarget.setPointerCapture(event.pointerId);
+          const [x, y] = point(event);
+          current.current = [x, y];
+          setPreview([x, y]);
+        }}
+        onPointerMove={(event) => {
+          const [x, y] = point(event);
+          sendCursor({ x, y, color: "#2563eb", label: selfUserId.slice(0, 12) });
+          if (event.buttons === 0) return;
+          current.current = [...current.current, x, y];
+          setPreview([...current.current]);
+        }}
+        onPointerUp={() => {
+          const points = current.current;
+          current.current = [];
+          setPreview([]);
+          if (points.length < 4) return;
+          addStroke({ id: crypto.randomUUID(), color: "#0f172a", points });
+        }}
+      >
+        <svg width="100%" height="100%" style={{ position: "absolute", inset: 0 }}>
+          {strokes.map((stroke) => (
+            <polyline
+              key={stroke.id}
+              points={chunkPoints(stroke.points)}
+              fill="none"
+              stroke={stroke.color}
+              strokeWidth="3"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          ))}
+          {preview.length >= 4 ? (
+            <polyline
+              points={chunkPoints(preview)}
+              fill="none"
+              stroke="#0f172a"
+              strokeWidth="3"
+              strokeLinecap="round"
+            />
+          ) : null}
+        </svg>
+        {Object.values(liveCursors)
+          .filter((c) => c.userId !== selfUserId)
+          .map((cursor) => (
+            <div
+              key={cursor.userId}
+              className="peer-cursor"
+              style={{ left: cursor.x, top: cursor.y, color: cursor.color || "#2563eb" }}
+            >
+              <span>{cursor.label || cursor.userId}</span>
+            </div>
+          ))}
+      </div>
+    </section>
+  );
+}
+function chunkPoints(points: number[]): string {
+  const out: string[] = [];
+  for (let i = 0; i + 1 < points.length; i += 2) out.push(`${points[i]},${points[i + 1]}`);
+  return out.join(" ");
+}
+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} · draw in two tabs — Yjs strokes, not Excalidraw lock-in</p>
+      <FluxyRealtimeProvider workerUrl={session.workerUrl} authTokenProvider={session.token} userId={session.userId}>
+        <FluxyYjsProvider workerUrl={session.workerUrl} token={session.token} userId={session.userId} roomId={session.roomId}>
+          <Board roomId={session.roomId} selfUserId={session.userId} />
+        </FluxyYjsProvider>
+      </FluxyRealtimeProvider>
+    </div>
+  );
+}

package/templates/whiteboard/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/whiteboard/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/whiteboard/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/whiteboard/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/whiteboard/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/whiteboard/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 },
+});