@sansavision/create-pulse 0.4.0 → 0.4.2

package/templates/nextjs-auth-demo/src/app/dashboard/page.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import Link from "next/link";
+import { useSession } from "@/lib/auth-client";
+import {
+    MessageSquare,
+    Video,
+    Database,
+    Gamepad2,
+    Lock,
+    ArrowRight,
+    Shield,
+    Wifi,
+    Activity,
+} from "lucide-react";
+
+const demos = [
+    {
+        href: "/dashboard/demos/chat",
+        icon: MessageSquare,
+        title: "Real-time Chat",
+        desc: "Multi-user rooms with presence, typing indicators, and auth identity. Open a second tab with a different user to see live messaging.",
+        color: "from-blue-500 to-blue-600",
+        badge: "Pub/Sub",
+    },
+    {
+        href: "/dashboard/demos/watch-together",
+        icon: Video,
+        title: "Watch Together",
+        desc: "Synchronized video playback. Play, pause, and seek in perfect sync across all connected users.",
+        color: "from-pink-500 to-rose-600",
+        badge: "Broadcast",
+    },
+    {
+        href: "/dashboard/demos/queues",
+        icon: Database,
+        title: "Durable Queues",
+        desc: "Publish messages, simulate going offline, come back online — messages persist and are delivered. Full ACK/NACK flow.",
+        color: "from-amber-500 to-orange-600",
+        badge: "Queue",
+    },
+    {
+        href: "/dashboard/demos/game-sync",
+        icon: Gamepad2,
+        title: "Game State Sync",
+        desc: "Shared game board with real-time state sync. Multiple users can interact with the same game state simultaneously.",
+        color: "from-green-500 to-emerald-600",
+        badge: "State",
+    },
+    {
+        href: "/dashboard/demos/encrypted-chat",
+        icon: Lock,
+        title: "E2E Encrypted Chat",
+        desc: "End-to-end encrypted messaging where the relay cannot read content. Key exchange visualization included.",
+        color: "from-purple-500 to-violet-600",
+        badge: "P2P",
+    },
+];
+
+export default function DashboardPage() {
+    const { data: session } = useSession();
+
+    return (
+        <div className="p-8">
+            {/* Header */}
+            <div className="mb-8">
+                <h1 className="text-3xl font-bold mb-2">
+                    Welcome, {session?.user?.name?.split(" ")[0] || "there"} 👋
+                </h1>
+                <p className="text-slate-400 text-lg">
+                    Choose a demo to explore Pulse&apos;s capabilities with authenticated
+                    connections.
+                </p>
+            </div>
+
+            {/* Connection status */}
+            <div className="glass rounded-xl p-5 mb-8 flex items-center gap-6">
+                <div className="flex items-center gap-2">
+                    <Shield className="w-4 h-4 text-green-400" />
+                    <span className="text-sm text-green-400 font-medium">
+                        Authenticated
+                    </span>
+                </div>
+                <div className="flex items-center gap-2">
+                    <Wifi className="w-4 h-4 text-cyan-400" />
+                    <span className="text-sm text-slate-400">
+                        Relay:{" "}
+                        <code className="text-cyan-400 bg-cyan-500/10 px-1.5 py-0.5 rounded text-xs">
+                            {process.env.NEXT_PUBLIC_PULSE_URL || "ws://localhost:4001"}
+                        </code>
+                    </span>
+                </div>
+                <div className="flex items-center gap-2">
+                    <Activity className="w-4 h-4 text-purple-400" />
+                    <span className="text-sm text-slate-400">
+                        Auth Mode:{" "}
+                        <code className="text-purple-400 bg-purple-500/10 px-1.5 py-0.5 rounded text-xs">
+                            webhook
+                        </code>
+                    </span>
+                </div>
+            </div>
+
+            {/* Tip */}
+            <div className="glass rounded-xl p-5 mb-8 border-l-4 border-purple-500">
+                <h3 className="text-sm font-semibold text-purple-400 mb-1">
+                    💡 Multi-User Tip
+                </h3>
+                <p className="text-sm text-slate-400">
+                    Open a second browser tab (or incognito window), create a different
+                    account, and interact simultaneously. Watch messages, video sync, and
+                    game state flow in real-time between users.
+                </p>
+            </div>
+
+            {/* Demo cards */}
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {demos.map((demo) => (
+                    <Link key={demo.href} href={demo.href}>
+                        <div className="demo-card glass rounded-2xl p-6 h-full cursor-pointer group">
+                            <div className="flex items-start justify-between mb-4">
+                                <div
+                                    className={`w-12 h-12 rounded-xl bg-gradient-to-br ${demo.color} flex items-center justify-center`}
+                                >
+                                    <demo.icon className="w-6 h-6 text-white" />
+                                </div>
+                                <span className="text-xs font-mono px-2 py-1 rounded-md bg-slate-800 text-slate-400 border border-slate-700">
+                                    {demo.badge}
+                                </span>
+                            </div>
+                            <h3 className="text-lg font-semibold mb-2 group-hover:text-purple-400 transition-colors">
+                                {demo.title}
+                            </h3>
+                            <p className="text-sm text-slate-400 leading-relaxed mb-4">
+                                {demo.desc}
+                            </p>
+                            <div className="flex items-center gap-1 text-sm text-purple-400 font-medium">
+                                Open Demo
+                                <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
+                            </div>
+                        </div>
+                    </Link>
+                ))}
+            </div>
+        </div>
+    );
+}

package/templates/nextjs-auth-demo/src/app/globals.css

@@ -0,0 +1,96 @@
+@import "tailwindcss";
+
+:root {
+  --color-primary: #7c3aed;
+  --color-primary-light: #a78bfa;
+  --color-accent: #06b6d4;
+  --color-surface: #0f172a;
+  --color-surface-elevated: #1e293b;
+  --color-surface-hover: #334155;
+  --color-text: #f1f5f9;
+  --color-text-muted: #94a3b8;
+  --color-border: #334155;
+  --color-danger: #ef4444;
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Inter", "SF Pro Display", -apple-system, system-ui, sans-serif;
+  background: var(--color-surface);
+  color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Smooth scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 3px;
+}
+
+/* Glassmorphism utility */
+.glass {
+  background: rgba(30, 41, 59, 0.7);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(148, 163, 184, 0.1);
+}
+
+/* Gradient text */
+.gradient-text {
+  background: linear-gradient(135deg, #7c3aed, #06b6d4, #10b981);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Pulse animation */
+@keyframes pulse-glow {
+  0%, 100% { box-shadow: 0 0 20px rgba(124, 58, 237, 0.3); }
+  50% { box-shadow: 0 0 40px rgba(124, 58, 237, 0.6); }
+}
+
+.pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+/* Status indicator */
+@keyframes status-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.status-online {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-success);
+  animation: status-blink 2s ease-in-out infinite;
+}
+
+.status-offline {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-danger);
+}
+
+/* Card hover effect */
+.demo-card {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.demo-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 20px 60px rgba(124, 58, 237, 0.15);
+}

package/templates/nextjs-auth-demo/src/app/layout.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Pulse — Real-Time Protocol Demo",
+  description:
+    "Investor-ready demo showcasing PLP (Pulse Line Protocol) with auth, real-time chat, synchronized video, durable queues, and encrypted messaging.",
+  keywords: ["pulse", "real-time", "websocket", "protocol", "auth"],
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className="dark">
+      <head>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body className="min-h-screen antialiased">{children}</body>
+    </html>
+  );
+}

package/templates/nextjs-auth-demo/src/app/page.tsx

@@ -0,0 +1,254 @@
+"use client";
+
+import Link from "next/link";
+import {
+  Zap,
+  Shield,
+  Wifi,
+  MessageSquare,
+  Video,
+  Database,
+  Gamepad2,
+  Lock,
+  ArrowRight,
+  Globe,
+  Clock,
+  Activity,
+} from "lucide-react";
+
+export default function LandingPage() {
+  return (
+    <div className="min-h-screen">
+      {/* Nav */}
+      <nav className="fixed top-0 left-0 right-0 z-50 glass">
+        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center">
+              <Zap className="w-5 h-5 text-white" />
+            </div>
+            <span className="text-xl font-bold">Pulse</span>
+          </div>
+          <div className="flex items-center gap-4">
+            <Link
+              href="/auth/sign-in"
+              className="px-4 py-2 text-sm text-slate-300 hover:text-white transition-colors"
+            >
+              Sign In
+            </Link>
+            <Link
+              href="/auth/sign-up"
+              className="px-5 py-2 text-sm bg-purple-600 hover:bg-purple-500 rounded-lg font-medium transition-all hover:shadow-lg hover:shadow-purple-500/25"
+            >
+              Get Started
+            </Link>
+          </div>
+        </div>
+      </nav>
+
+      {/* Hero */}
+      <section className="relative pt-32 pb-20 px-6 overflow-hidden">
+        {/* Background gradient orbs */}
+        <div className="absolute top-20 left-1/4 w-96 h-96 bg-purple-500/20 rounded-full blur-[128px]" />
+        <div className="absolute top-40 right-1/4 w-96 h-96 bg-cyan-500/20 rounded-full blur-[128px]" />
+
+        <div className="max-w-5xl mx-auto text-center relative z-10">
+          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-purple-500/30 bg-purple-500/10 text-purple-300 text-sm mb-8">
+            <Activity className="w-3.5 h-3.5" />
+            <span>PLP — Pulse Line Protocol v1</span>
+          </div>
+
+          <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight leading-tight mb-6">
+            <span className="gradient-text">The Real-Time Protocol</span>
+            <br />
+            <span className="text-slate-200">for Modern Applications</span>
+          </h1>
+
+          <p className="text-xl text-slate-400 max-w-2xl mx-auto mb-10 leading-relaxed">
+            Sub-millisecond latency, end-to-end encryption, durable queues, and
+            external auth — all in one binary. Built with Rust, powered by QUIC.
+          </p>
+
+          <div className="flex items-center justify-center gap-4">
+            <Link
+              href="/auth/sign-up"
+              className="inline-flex items-center gap-2 px-8 py-3.5 bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-500 hover:to-purple-400 rounded-xl font-semibold text-lg transition-all hover:shadow-xl hover:shadow-purple-500/25 pulse-glow"
+            >
+              Try the Demo
+              <ArrowRight className="w-5 h-5" />
+            </Link>
+            <a
+              href="https://github.com/Sansa-Organisation/pulse"
+              target="_blank"
+              rel="noopener"
+              className="px-8 py-3.5 rounded-xl font-semibold text-lg border border-slate-700 hover:border-slate-500 hover:bg-slate-800/50 transition-all"
+            >
+              GitHub
+            </a>
+          </div>
+
+          {/* Stats */}
+          <div className="grid grid-cols-3 gap-8 max-w-xl mx-auto mt-16">
+            {[
+              { label: "Latency", value: "<1ms", icon: Clock },
+              { label: "Connections", value: "100K+", icon: Globe },
+              { label: "Uptime", value: "99.99%", icon: Activity },
+            ].map((stat) => (
+              <div key={stat.label} className="text-center">
+                <stat.icon className="w-5 h-5 text-purple-400 mx-auto mb-2" />
+                <div className="text-2xl font-bold">{stat.value}</div>
+                <div className="text-sm text-slate-500">{stat.label}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section className="py-20 px-6">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4">
+              Everything you need, out of the box
+            </h2>
+            <p className="text-slate-400 text-lg max-w-xl mx-auto">
+              One protocol, five powerful modes. Each demo below is fully functional
+              and uses real PLP connections.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {[
+              {
+                icon: MessageSquare,
+                title: "Real-time Chat",
+                desc: "Multi-user rooms with typing indicators, presence, and message history.",
+                color: "from-blue-500 to-blue-600",
+              },
+              {
+                icon: Video,
+                title: "Watch Together",
+                desc: "Synchronized video playback — play, pause, seek in perfect sync.",
+                color: "from-pink-500 to-rose-600",
+              },
+              {
+                icon: Database,
+                title: "Durable Queues",
+                desc: "Persist messages, simulate offline, come back online — nothing lost.",
+                color: "from-amber-500 to-orange-600",
+              },
+              {
+                icon: Gamepad2,
+                title: "Game State Sync",
+                desc: "Real-time shared state with conflict-free resolution.",
+                color: "from-green-500 to-emerald-600",
+              },
+              {
+                icon: Lock,
+                title: "E2E Encrypted Chat",
+                desc: "End-to-end encryption with relay-blind transport.",
+                color: "from-purple-500 to-violet-600",
+              },
+              {
+                icon: Shield,
+                title: "Auth Context",
+                desc: "External auth integration — Better Auth, Clerk, Auth0, and more.",
+                color: "from-cyan-500 to-teal-600",
+              },
+            ].map((feature) => (
+              <div
+                key={feature.title}
+                className="demo-card glass rounded-2xl p-6"
+              >
+                <div
+                  className={`w-12 h-12 rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-4`}
+                >
+                  <feature.icon className="w-6 h-6 text-white" />
+                </div>
+                <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
+                <p className="text-slate-400 text-sm leading-relaxed">
+                  {feature.desc}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Architecture */}
+      <section className="py-20 px-6">
+        <div className="max-w-4xl mx-auto">
+          <div className="glass rounded-2xl p-8 md:p-12">
+            <h2 className="text-2xl font-bold mb-6 text-center">
+              How Auth Works
+            </h2>
+            <div className="flex flex-col md:flex-row items-center gap-6">
+              {[
+                {
+                  step: 1,
+                  icon: Shield,
+                  title: "Sign In",
+                  desc: "User authenticates via Better Auth (email/password)",
+                },
+                {
+                  step: 2,
+                  icon: Wifi,
+                  title: "Connect",
+                  desc: "SDK sends bearer token in PLP CONNECT handshake",
+                },
+                {
+                  step: 3,
+                  icon: Zap,
+                  title: "Verify",
+                  desc: "Relay calls webhook → Better Auth validates session",
+                },
+              ].map((item, i) => (
+                <div key={item.step} className="flex-1 text-center">
+                  <div className="w-10 h-10 rounded-full bg-purple-600 text-white font-bold flex items-center justify-center mx-auto mb-3">
+                    {item.step}
+                  </div>
+                  <item.icon className="w-6 h-6 text-purple-400 mx-auto mb-2" />
+                  <h4 className="font-semibold mb-1">{item.title}</h4>
+                  <p className="text-sm text-slate-400">{item.desc}</p>
+                  {i < 2 && (
+                    <ArrowRight className="w-5 h-5 text-slate-600 mx-auto mt-4 hidden md:block rotate-0" />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-20 px-6">
+        <div className="max-w-3xl mx-auto text-center">
+          <h2 className="text-3xl md:text-4xl font-bold mb-4">
+            Ready to experience it?
+          </h2>
+          <p className="text-slate-400 text-lg mb-8">
+            Create an account and explore every feature live. Open two browser
+            tabs to see multi-user sync in action.
+          </p>
+          <Link
+            href="/auth/sign-up"
+            className="inline-flex items-center gap-2 px-10 py-4 bg-gradient-to-r from-purple-600 to-cyan-600 hover:from-purple-500 hover:to-cyan-500 rounded-xl font-semibold text-lg transition-all hover:shadow-xl hover:shadow-purple-500/25"
+          >
+            Create Account
+            <ArrowRight className="w-5 h-5" />
+          </Link>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-slate-800 py-8 px-6">
+        <div className="max-w-6xl mx-auto flex items-center justify-between text-sm text-slate-500">
+          <span>© 2026 Sansa Vision. Pulse Protocol.</span>
+          <div className="flex items-center gap-1">
+            <div className="status-online" />
+            <span>Relay Live</span>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}

package/templates/nextjs-auth-demo/src/lib/auth-client.ts

@@ -0,0 +1,15 @@
+import { createAuthClient } from "better-auth/react";
+
+export const authClient = createAuthClient({
+    baseURL: typeof window !== "undefined" ? window.location.origin : "http://localhost:3000",
+    fetchOptions: {
+        onSuccess: (ctx) => {
+            const authToken = ctx.response.headers.get("set-auth-token");
+            if (authToken && typeof window !== "undefined") {
+                localStorage.setItem("pulse_bearer_token", authToken);
+            }
+        },
+    },
+});
+
+export const { signIn, signUp, signOut, useSession } = authClient;

package/templates/nextjs-auth-demo/src/lib/auth.ts

@@ -0,0 +1,13 @@
+import { betterAuth } from "better-auth";
+import { drizzleAdapter } from "better-auth/adapters/drizzle";
+import { bearer } from "better-auth/plugins";
+import { db } from "./db";
+
+export const auth = betterAuth({
+    database: drizzleAdapter(db, { provider: "sqlite" }),
+    emailAndPassword: {
+        enabled: true,
+    },
+    plugins: [bearer()],
+    trustedOrigins: [process.env.BETTER_AUTH_URL || "http://localhost:3000"],
+});

package/templates/nextjs-auth-demo/src/lib/db.ts

@@ -0,0 +1,5 @@
+import Database from "better-sqlite3";
+import { drizzle } from "drizzle-orm/better-sqlite3";
+
+const sqlite = new Database("./sqlite.db");
+export const db = drizzle(sqlite);

package/templates/nextjs-auth-demo/src/lib/pulse.ts

@@ -0,0 +1,45 @@
+"use client";
+
+import { Pulse } from "@sansavision/pulse-sdk";
+
+let pulseInstance: Pulse | null = null;
+
+export function getPulse(): Pulse {
+    if (!pulseInstance) {
+        pulseInstance = new Pulse({ apiKey: "demo" });
+    }
+    return pulseInstance;
+}
+
+/**
+ * Get the bearer token stored by Better Auth for Pulse auth.
+ */
+export function getPulseToken(): string | null {
+    if (typeof window === "undefined") return null;
+    return localStorage.getItem("pulse_bearer_token");
+}
+
+/**
+ * Connect to the Pulse relay with authentication.
+ * Uses the Better Auth bearer token for the PLP CONNECT handshake.
+ */
+export async function connectWithAuth() {
+    const pulse = getPulse();
+    const token = getPulseToken();
+    const url = process.env.NEXT_PUBLIC_PULSE_URL || "ws://localhost:4001";
+
+    const conn = await pulse.connect(url, {
+        encoding: "json",
+        autoReconnect: true,
+        ...(token
+            ? {
+                auth: {
+                    token,
+                    provider: "better-auth",
+                },
+            }
+            : {}),
+    });
+
+    return conn;
+}

package/templates/nextjs-auth-demo/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

package/templates/react-all-features/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@sansavision/pulse-sdk": "0.3.0",
+    "@sansavision/pulse-sdk": "^0.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "lucide-react": "^0.412.0"
@@ -24,4 +24,4 @@
     "typescript": "^5.5.3",
     "vite": "^5.3.4"
   }
-}
+}