@sansavision/create-pulse 0.4.4 → 0.4.6

package/templates/aurora-auth-node-demo/src/routes/dashboard/demos/watch-together/page.tsx

@@ -0,0 +1,5 @@
+import WatchTogetherPage from "./page.client";
+
+export default function Page() {
+    return <WatchTogetherPage />;
+}

package/templates/aurora-auth-node-demo/src/routes/dashboard/layout.client.tsx

@@ -0,0 +1,113 @@
+
+
+import { createClientNavigation } from "@sansavision/aurora/router";
+
+import { useSession, signOut } from "@/lib/auth-client";
+import {
+    Zap,
+    LayoutDashboard,
+    MessageSquare,
+    PhoneCall,
+    Video,
+    Database,
+    Gamepad2,
+    Lock,
+    LogOut,
+    Loader2,
+    ChevronRight,
+    Swords,
+} from "lucide-react";
+import { useEffect } from "react";
+
+const navItems = [
+    { href: "/dashboard", label: "Overview", icon: LayoutDashboard },
+    { href: "/dashboard/demos/chat", label: "Real-time Chat", icon: MessageSquare },
+    { href: "/dashboard/demos/video-call", label: "Video Call", icon: PhoneCall },
+    { href: "/dashboard/demos/watch-together", label: "Watch Together", icon: Video },
+    { href: "/dashboard/demos/queues", label: "Durable Queues", icon: Database },
+    { href: "/dashboard/demos/game-sync", label: "Game Sync", icon: Gamepad2 },
+    { href: "/dashboard/demos/arena-game", label: "Arena Game", icon: Swords },
+    { href: "/dashboard/demos/encrypted-chat", label: "E2E Encrypted", icon: Lock },
+];
+
+export default function DashboardLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    const { data: session, isPending } = useSession();
+    const router = createClientNavigation();
+
+    useEffect(() => {
+        if (!isPending && !session) {
+            router.navigate("/auth/sign-in");
+        }
+    }, [session, isPending, router]);
+
+    if (isPending) {
+        return (
+            <div className="min-h-screen flex items-center justify-center">
+                <Loader2 className="w-8 h-8 animate-spin text-purple-500" />
+            </div>
+        );
+    }
+
+    if (!session) return null;
+
+    return (
+        <div className="min-h-screen flex">
+            {/* Sidebar */}
+            <aside className="w-64 border-r border-slate-800 flex flex-col">
+                <div className="p-5 border-b border-slate-800">
+                    <a href="/" 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-lg font-bold">Pulse</span>
+                    </a>
+                </div>
+
+                <nav className="flex-1 p-3 space-y-1">
+                    {navItems.map((item) => (
+                        <a
+                            key={item.href}
+                            href={item.href}
+                            className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-slate-400 hover:text-white hover:bg-slate-800/50 transition-all group"
+                        >
+                            <item.icon className="w-4 h-4" />
+                            <span className="flex-1">{item.label}</span>
+                            <ChevronRight className="w-3.5 h-3.5 opacity-0 group-hover:opacity-100 transition-opacity" />
+                        </a>
+                    ))}
+                </nav>
+
+                {/* User info */}
+                <div className="p-4 border-t border-slate-800">
+                    <div className="flex items-center gap-3 mb-3">
+                        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center text-xs font-bold">
+                            {session.user.name?.charAt(0)?.toUpperCase() || "?"}
+                        </div>
+                        <div className="flex-1 min-w-0">
+                            <div className="text-sm font-medium truncate">
+                                {session.user.name}
+                            </div>
+                            <div className="text-xs text-slate-500 truncate">
+                                {session.user.email}
+                            </div>
+                        </div>
+                    </div>
+                    <button
+                        onClick={() => signOut().then(() => router.navigate("/"))}
+                        className="flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm text-slate-400 hover:text-red-400 hover:bg-red-500/10 transition-all"
+                    >
+                        <LogOut className="w-4 h-4" />
+                        Sign out
+                    </button>
+                </div>
+            </aside>
+
+            {/* Main content */}
+            <main className="flex-1 overflow-y-auto">{children}</main>
+        </div>
+    );
+}

package/templates/aurora-auth-node-demo/src/routes/dashboard/layout.tsx

@@ -0,0 +1,5 @@
+import DashboardLayout from "./layout.client";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return <DashboardLayout>{children}</DashboardLayout>;
+}

package/templates/aurora-auth-node-demo/src/routes/dashboard/page.client.tsx

@@ -0,0 +1,195 @@
+
+
+import { useState, useEffect } from "react";
+
+import { useSession } from "@/lib/auth-client";
+import { connectWithAuth } from "@/lib/pulse";
+import {
+    MessageSquare,
+    Video,
+    PhoneCall,
+    Database,
+    Gamepad2,
+    Lock,
+    ArrowRight,
+    Shield,
+    Zap,
+    Activity,
+    Circle,
+    Swords,
+} from "lucide-react";
+import type { PulseConnection } from "@sansavision/pulse-sdk";
+
+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/video-call",
+        icon: PhoneCall,
+        title: "Video Call",
+        desc: "Zoom-like peer-to-peer video calls using Pulse as the signaling layer. Camera, mic, screen sharing, and dynamic grid layout.",
+        color: "from-indigo-500 to-sky-500",
+        badge: "WebRTC",
+    },
+    {
+        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/arena-game",
+        icon: Swords,
+        title: "Arena Game",
+        desc: "Real-time multiplayer arena. Create a room, share the code, and compete to collect golden orbs. 30 updates/sec state sync.",
+        color: "from-orange-500 to-red-600",
+        badge: "Multiplayer",
+    },
+    {
+        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();
+    const [relayConnected, setRelayConnected] = useState(false);
+
+    useEffect(() => {
+        if (!session) return;
+        let conn: PulseConnection | null = null;
+        connectWithAuth().then((c) => {
+            conn = c;
+            setRelayConnected(true);
+            c.on("disconnect", () => setRelayConnected(false));
+            c.on("reconnected", () => setRelayConnected(true));
+        }).catch(() => setRelayConnected(false));
+        return () => { conn?.disconnect(); };
+    }, [session]);
+
+    const relayUrl = process.env.NEXT_PUBLIC_PULSE_URL || "ws://localhost:4001";
+    const plpUrl = relayUrl.replace(/^ws:\/\//, "plp://").replace(/^wss:\/\//, "plps://");
+
+    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 flex-wrap">
+                <div className="flex items-center gap-2">
+                    {relayConnected ? (
+                        <Circle className="w-3 h-3 text-green-400 fill-green-400 animate-pulse" />
+                    ) : (
+                        <Circle className="w-3 h-3 text-red-400 fill-red-400" />
+                    )}
+                    <span className={`text-sm font-medium ${relayConnected ? 'text-green-400' : 'text-red-400'}`}>
+                        {relayConnected ? 'Connected' : 'Disconnected'}
+                    </span>
+                </div>
+                <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">
+                    <Zap 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">
+                            {plpUrl}
+                        </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) => (
+                    <a 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>
+                    </a>
+                ))}
+            </div>
+        </div>
+    );
+}

package/templates/aurora-auth-node-demo/src/routes/dashboard/page.tsx

@@ -0,0 +1,5 @@
+import DashboardPage from "./page.client";
+
+export default function Page() {
+    return <DashboardPage />;
+}

package/templates/aurora-auth-node-demo/src/routes/layout.tsx

@@ -0,0 +1,18 @@
+// Styles are auto-loaded by Aurora from src/styles/app.css
+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/aurora-auth-node-demo/src/routes/page.client.tsx

@@ -0,0 +1,263 @@
+
+
+
+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">
+            <a
+              href="/auth/sign-in"
+              className="px-4 py-2 text-sm text-slate-300 hover:text-white transition-colors"
+            >
+              Sign In
+            </a>
+            <a
+              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
+            </a>
+          </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">
+            <a
+              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" />
+            </a>
+            <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">
+                {(() => {
+                  const Icon = stat.icon;
+                  return <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`}
+                >
+                  {(() => {
+                    const Icon = feature.icon;
+                    return <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>
+                  {(() => {
+                    const Icon = item.icon;
+                    return <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>
+          <a
+            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" />
+          </a>
+        </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/aurora-auth-node-demo/src/routes/page.tsx

@@ -0,0 +1,5 @@
+import LandingPage from "./page.client";
+
+export default function Page() {
+    return <LandingPage />;
+}