@bhooai/nexus-examples 2.0.0

package/examples/saas-starter/apps/backend/src/listeners/OnTeamCreated.ts

@@ -0,0 +1,11 @@
+import { Listener } from '@bhooai/nexus-core';
+import type TeamCreated from '../events/TeamCreated.js';
+import { Membership } from '../models/Membership.js';
+
+/** Make the team creator an owner and log the event. */
+export default class OnTeamCreated extends Listener<TeamCreated> {
+  async handle(event: TeamCreated) {
+    await Membership.create({ teamId: event.teamId, userId: event.ownerId, role: 'owner' });
+    console.log(`[events] team created: "${event.name}" by ${event.ownerId}`);
+  }
+}

package/examples/saas-starter/apps/backend/src/listeners/OnUserRegistered.ts

@@ -0,0 +1,10 @@
+import { Listener } from '@bhooai/nexus-core';
+import type UserRegistered from '../events/UserRegistered.js';
+
+/** Convention: On<Foo> listens for <Foo> — auto-wired by createNexusApp(). */
+export default class OnUserRegistered extends Listener<UserRegistered> {
+  async handle(event: UserRegistered) {
+    console.log(`[events] user registered: ${event.email} (${event.userId})`);
+    // Production: send a welcome email, seed default preferences, etc.
+  }
+}

package/examples/saas-starter/apps/backend/src/middleware/auth.ts

@@ -0,0 +1,14 @@
+import type { Middleware } from '@bhooai/nexus-core';
+import { AuthenticationError } from '@bhooai/nexus-core';
+
+/**
+ * Demo auth middleware: trusts an `x-user-id` header instead of verifying a
+ * real session/JWT. Swap for nexus-auth's jwt middleware in production.
+ */
+export const requireAuth: Middleware = async (ctx) => {
+  const userId = ctx.headers['x-user-id'];
+  if (typeof userId !== 'string' || userId.length === 0) {
+    throw new AuthenticationError('Sign in required (x-user-id header in this demo)');
+  }
+  ctx.state.userId = userId;
+};

package/examples/saas-starter/apps/backend/src/models/Membership.ts

@@ -0,0 +1,20 @@
+import { model, Schema } from '@bhooai/nexus-data';
+
+export const ROLES = ['owner', 'member', 'viewer'] as const;
+export type Role = (typeof ROLES)[number];
+
+const membershipSchema = new Schema({
+  teamId:    { type: String, required: true, index: true },
+  userId:    { type: String, required: true, index: true },
+  role:      { type: String, required: true, enum: [...ROLES], default: 'member' },
+  createdAt: { type: Date, default: () => new Date() },
+});
+
+export const Membership = model('memberships', membershipSchema);
+
+/** Role of a user within a team, or null when not a member. */
+export async function roleInTeam(teamId: string, userId: string): Promise<Role | null> {
+  const m = await Membership.findOne({ teamId, userId });
+  const role = (m as unknown as { role?: string } | null)?.role;
+  return ROLES.includes(role as Role) ? (role as Role) : null;
+}

package/examples/saas-starter/apps/backend/src/models/Team.ts

@@ -0,0 +1,10 @@
+import { model, Schema } from '@bhooai/nexus-data';
+
+const teamSchema = new Schema({
+  name:      { type: String, required: true },
+  slug:      { type: String, required: true, index: true },
+  ownerId:   { type: String, required: true },
+  createdAt: { type: Date, default: () => new Date() },
+});
+
+export const Team = model('teams', teamSchema);

package/examples/saas-starter/apps/backend/src/models/User.ts

@@ -0,0 +1,17 @@
+import { model, Schema } from '@bhooai/nexus-data';
+
+const userSchema = new Schema({
+  name:      { type: String, required: true },
+  email:     { type: String, required: true, index: true },
+  createdAt: { type: Date, default: () => new Date() },
+});
+
+export const User = model('users', userSchema);
+
+/** A hydrated User document (property reads proxy to the underlying doc). */
+export type UserDoc = InstanceType<typeof User>;
+
+/** Look up a user by email, or null. */
+export async function findUserByEmail(email: string): Promise<UserDoc | null> {
+  return User.findOne({ email });
+}

package/examples/saas-starter/apps/backend/src/policies/TeamPolicy.ts

@@ -0,0 +1,35 @@
+import { Policy } from '@bhooai/nexus-core';
+import { roleInTeam, type Role } from '../models/Membership.js';
+
+interface Actor { userId: string }
+interface TeamResource { id: string }
+
+const RANK: Record<Role, number> = { viewer: 0, member: 1, owner: 2 };
+
+async function hasRole(actor: Actor, teamId: string, min: Role): Promise<boolean> {
+  const role = await roleInTeam(teamId, actor.userId);
+  return role !== null && RANK[role] >= RANK[min];
+}
+
+/**
+ * TeamPolicy — abilities by role:
+ *   view   : viewer+   (any member can look)
+ *   update : member+   (edit name/settings, manage projects)
+ *   delete : owner     (destructive)
+ *   invite : member+   (add people)
+ */
+export default class TeamPolicy extends Policy<Actor, TeamResource> {
+  async view(actor: Actor, team: TeamResource) { return hasRole(actor, team.id, 'viewer'); }
+  async update(actor: Actor, team: TeamResource) { return hasRole(actor, team.id, 'member'); }
+  async invite(actor: Actor, team: TeamResource) { return hasRole(actor, team.id, 'member'); }
+  async delete(actor: Actor, team: TeamResource) { return hasRole(actor, team.id, 'owner'); }
+}
+
+export type TeamAbility = 'view' | 'update' | 'invite' | 'delete';
+
+/** Direct check used by routes (policyRegistry.check needs a ResourceCtor
+ *  match, so a helper is simpler for this example). */
+export function canTeam(userId: string, ability: TeamAbility, teamId: string): Promise<boolean> {
+  const policy = new TeamPolicy();
+  return policy[ability]({ userId }, { id: teamId });
+}

package/examples/saas-starter/apps/backend/src/routes/projects.ts

@@ -0,0 +1,52 @@
+import { randomUUID } from 'node:crypto';
+import { defineRoutes, AuthorizationError } from '@bhooai/nexus-core';
+import { requireAuth } from '../middleware/auth.js';
+import { canTeam } from '../policies/TeamPolicy.js';
+
+// Projects are intentionally in-memory here — the demo is about the CRUD +
+// policy wiring, not about one more ODM collection.
+interface Project { id: string; teamId: string; name: string; status: 'active' | 'archived' }
+const projects: Project[] = [];
+
+export default defineRoutes([
+  {
+    method: 'GET',
+    path: '/api/teams/:teamId/projects',
+    middleware: [requireAuth],
+    handler: async (ctx) => {
+      if (!(await canTeam(String(ctx.state.userId), 'view', ctx.params.teamId))) {
+        throw new AuthorizationError('not a member of this team');
+      }
+      ctx.json({ projects: projects.filter((p) => p.teamId === ctx.params.teamId) });
+    },
+  },
+  {
+    method: 'POST',
+    path: '/api/teams/:teamId/projects',
+    middleware: [requireAuth],
+    handler: async (ctx) => {
+      if (!(await canTeam(String(ctx.state.userId), 'update', ctx.params.teamId))) {
+        throw new AuthorizationError('viewer cannot create projects');
+      }
+      const body = (ctx.body ?? {}) as { name?: string };
+      if (!body.name?.trim()) return ctx.json({ error: 'name is required' }, 422);
+      const project: Project = { id: randomUUID(), teamId: ctx.params.teamId, name: body.name.trim(), status: 'active' };
+      projects.push(project);
+      ctx.json({ project }, 201);
+    },
+  },
+  {
+    method: 'DELETE',
+    path: '/api/teams/:teamId/projects/:projectId',
+    middleware: [requireAuth],
+    handler: async (ctx) => {
+      if (!(await canTeam(String(ctx.state.userId), 'update', ctx.params.teamId))) {
+        throw new AuthorizationError('viewer cannot delete projects');
+      }
+      const idx = projects.findIndex((p) => p.id === ctx.params.projectId && p.teamId === ctx.params.teamId);
+      if (idx === -1) return ctx.json({ error: 'project not found' }, 404);
+      projects.splice(idx, 1);
+      ctx.json({ ok: true });
+    },
+  },
+]);

package/examples/saas-starter/apps/backend/src/routes/teams.ts

@@ -0,0 +1,112 @@
+import { defineRoutes } from '@bhooai/nexus-core';
+import { eventBus, AuthorizationError, NotFoundError } from '@bhooai/nexus-core';
+import { Team } from '../models/Team.js';
+import { User, findUserByEmail } from '../models/User.js';
+import { Membership } from '../models/Membership.js';
+import { requireAuth } from '../middleware/auth.js';
+import { canTeam } from '../policies/TeamPolicy.js';
+import UserRegistered from '../events/UserRegistered.js';
+import TeamCreated from '../events/TeamCreated.js';
+
+const slugify = (s: string) => s.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+
+export default defineRoutes([
+  {
+    // Demo sign-in: find-or-create by email (no password/OAuth in this example).
+    method: 'POST',
+    path: '/api/auth/signin',
+    handler: async (ctx) => {
+      const body = (ctx.body ?? {}) as { email?: string; name?: string };
+      if (!body.email) return ctx.json({ error: 'email is required' }, 422);
+      let user = await findUserByEmail(body.email);
+      if (!user) {
+        [user] = await User.create({ email: body.email, name: body.name ?? body.email.split('@')[0] });
+        const created = user as unknown as { _id: unknown; email: string };
+        await eventBus.dispatch(new UserRegistered(String(created._id), created.email));
+      }
+      const doc = user as unknown as { _id: unknown; name: string; email: string };
+      ctx.json({ user: { id: String(doc._id), name: doc.name, email: doc.email } });
+    },
+  },
+  {
+    method: 'GET',
+    path: '/api/teams',
+    middleware: [requireAuth],
+    handler: async (ctx) => {
+      const userId = String(ctx.state.userId);
+      const memberships = await Membership.find({ userId });
+      const teams = [];
+      for (const m of memberships) {
+        const mem = m as unknown as { teamId: string; role: string };
+        const team = await Team.findById(mem.teamId);
+        if (team) {
+          const t = team as unknown as { _id: unknown; name: string; slug: string };
+          teams.push({ id: String(t._id), name: t.name, slug: t.slug, role: mem.role });
+        }
+      }
+      ctx.json({ teams });
+    },
+  },
+  {
+    method: 'POST',
+    path: '/api/teams',
+    middleware: [requireAuth],
+    handler: async (ctx) => {
+      const body = (ctx.body ?? {}) as { name?: string };
+      if (!body.name?.trim()) return ctx.json({ error: 'name is required' }, 422);
+      const userId = String(ctx.state.userId);
+      const [team] = await Team.create({ name: body.name.trim(), slug: slugify(body.name), ownerId: userId });
+      const t = team as unknown as { _id: unknown; name: string; slug: string };
+      await eventBus.dispatch(new TeamCreated(String(t._id), userId, t.name));
+      ctx.json({ team: { id: String(t._id), name: t.name, slug: t.slug } }, 201);
+    },
+  },
+  {
+    method: 'GET',
+    path: '/api/teams/:teamId/members',
+    middleware: [requireAuth],
+    handler: async (ctx) => {
+      const userId = String(ctx.state.userId);
+      if (!(await canTeam(userId, 'view', ctx.params.teamId))) {
+        throw new AuthorizationError('not a member of this team');
+      }
+      const members = await Membership.find({ teamId: ctx.params.teamId });
+      ctx.json({ members: members.map((m) => {
+        const mem = m as unknown as { userId: string; role: string };
+        return { userId: mem.userId, role: mem.role };
+      }) });
+    },
+  },
+  {
+    method: 'POST',
+    path: '/api/teams/:teamId/members',
+    middleware: [requireAuth],
+    handler: async (ctx) => {
+      const userId = String(ctx.state.userId);
+      if (!(await canTeam(userId, 'invite', ctx.params.teamId))) {
+        throw new AuthorizationError('member role required to invite');
+      }
+      const body = (ctx.body ?? {}) as { email?: string; role?: string };
+      const user = await findUserByEmail(body.email ?? '');
+      if (!user) throw new NotFoundError('no user with that email');
+      const role = body.role === 'viewer' || body.role === 'owner' ? body.role : 'member';
+      const doc = user as unknown as { _id: unknown };
+      await Membership.create({ teamId: ctx.params.teamId, userId: String(doc._id), role });
+      ctx.json({ ok: true }, 201);
+    },
+  },
+  {
+    method: 'DELETE',
+    path: '/api/teams/:teamId',
+    middleware: [requireAuth],
+    handler: async (ctx) => {
+      const userId = String(ctx.state.userId);
+      if (!(await canTeam(userId, 'delete', ctx.params.teamId))) {
+        throw new AuthorizationError('only the owner can delete a team');
+      }
+      await Membership.deleteMany({ teamId: ctx.params.teamId });
+      await Team.deleteOne({ _id: ctx.params.teamId });
+      ctx.json({ ok: true });
+    },
+  },
+]);

package/examples/saas-starter/apps/frontend/src/main.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+interface User { id: string; name: string; email: string }
+interface Team { id: string; name: string; slug: string; role: string }
+
+function App() {
+  const [user, setUser] = useState<User | null>(null);
+  const [email, setEmail] = useState('you@example.com');
+  const [teams, setTeams] = useState<Team[]>([]);
+  const [teamName, setTeamName] = useState('');
+  const [error, setError] = useState('');
+
+  // Demo auth: the backend trusts an x-user-id header instead of a session.
+  const api = async (path: string, init: RequestInit = {}) => {
+    const res = await fetch(path, {
+      ...init,
+      headers: {
+        'content-type': 'application/json',
+        ...(user ? { 'x-user-id': user.id } : {}),
+        ...(init.headers ?? {}),
+      },
+    });
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error((data as { error?: string }).error ?? `HTTP ${res.status}`);
+    return data;
+  };
+
+  const signIn = async () => {
+    setError('');
+    try {
+      const data = await api('/api/auth/signin', { method: 'POST', body: JSON.stringify({ email }) });
+      setUser(data.user);
+    } catch (err) { setError((err as Error).message); }
+  };
+
+  const loadTeams = async () => {
+    try {
+      const data = await api('/api/teams');
+      setTeams(data.teams ?? []);
+    } catch (err) { setError((err as Error).message); }
+  };
+  useEffect(() => { if (user) loadTeams(); }, [user]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const createTeam = async () => {
+    if (!teamName.trim()) return;
+    try {
+      await api('/api/teams', { method: 'POST', body: JSON.stringify({ name: teamName }) });
+      setTeamName('');
+      loadTeams();
+    } catch (err) { setError((err as Error).message); }
+  };
+
+  if (!user) {
+    // Stub only — wire real OAuth via nexus-auth providers in production.
+    return (
+      <main style={{ fontFamily: 'system-ui', maxWidth: 420, margin: '4rem auto', padding: '0 1rem' }}>
+        <h1>SaaS starter</h1>
+        <p style={{ color: '#666' }}>Demo sign-in (find-or-create by email). No password, no OAuth.</p>
+        <div style={{ display: 'flex', gap: '0.5rem' }}>
+          <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="email" style={{ flex: 1, padding: '0.5rem' }} />
+          <button onClick={signIn}>Sign in</button>
+        </div>
+        {error && <p style={{ color: '#c00' }}>{error}</p>}
+      </main>
+    );
+  }
+
+  return (
+    <main style={{ fontFamily: 'system-ui', maxWidth: 720, margin: '2rem auto', padding: '0 1rem' }}>
+      <h1>SaaS starter</h1>
+      <p>Signed in as <strong>{user.name}</strong> ({user.email}) <button onClick={() => setUser(null)}>Sign out</button></p>
+
+      <h2 style={{ fontSize: '1rem' }}>Your teams</h2>
+      {teams.length === 0 && <p style={{ color: '#666' }}>No teams yet — create one below.</p>}
+      <ul>
+        {teams.map((t) => (
+          <li key={t.id}>
+            <strong>{t.name}</strong> <span style={{ color: '#666' }}>/{t.slug}</span>{' '}
+            <em style={{ fontSize: '0.85rem' }}>({t.role})</em>
+          </li>
+        ))}
+      </ul>
+
+      <div style={{ display: 'flex', gap: '0.5rem', marginTop: '1rem' }}>
+        <input value={teamName} onChange={(e) => setTeamName(e.target.value)} placeholder="New team name" style={{ flex: 1, padding: '0.5rem' }} />
+        <button onClick={createTeam}>Create team</button>
+      </div>
+      {error && <p style={{ color: '#c00' }}>{error}</p>}
+    </main>
+  );
+}
+
+const el = document.getElementById('root');
+if (el) createRoot(el).render(<App />);

package/examples/video-call/README.md

@@ -0,0 +1,30 @@
+# Video call example
+
+1:1 WebRTC call with signaling over the Nexus WS layer. No SFU — media flows
+peer-to-peer; the backend only relays SDP + ICE.
+
+## What's here
+
+- `apps/backend/src/ws/signaling.room.ts` — WS room relaying `offer` / `answer` / `candidate`
+- `apps/frontend/src/main.tsx` — camera capture + `RTCPeerConnection` + two `<video>` elements
+
+## Call flow
+
+1. Both clients open a WS connection and `join` the same room.
+2. First client in becomes the **caller**, second the **callee**.
+3. Caller creates an `RTCPeerConnection`, adds local tracks, sends an SDP `offer`.
+4. Callee sets the remote description, answers — SDP `answer` goes back.
+5. Both sides trickle `candidate` (ICE) messages until a path is found.
+6. `ontrack` fires on each side and the remote stream is attached to its video element.
+
+## Run
+
+```bash
+npx nexus dev
+# Frontend: http://localhost:3000
+# Backend : http://localhost:4000
+```
+
+Open **two browser windows** (camera permission needed in each), pick the same
+room name in both, and press *Join call*. The second window to join triggers
+the offer/answer exchange automatically.

package/examples/video-call/apps/backend/src/ws/signaling.room.ts

@@ -0,0 +1,47 @@
+/**
+ * WebRTC signaling room. Auto-discovered by createNexusApp() from ws/*.room.ts.
+ *
+ * The server never touches media — it only relays SDP offers/answers and ICE
+ * candidates between the two peers in a call room.
+ *
+ * Client protocol:
+ *   -> join      { roomId }            (first client = caller, second = callee)
+ *   <- peer-joined  { role, peers }    (sent on join + whenever the room fills)
+ *   -> offer     { roomId, sdp }
+ *   -> answer    { roomId, sdp }
+ *   -> candidate { roomId, candidate }
+ *   <- offer/answer/candidate          (relayed to the *other* peer)
+ *   <- peer-left {}                    (when the other peer disconnects)
+ */
+export default {
+  name: 'signaling',
+
+  async onJoin(socket: any, payload: { roomId: string }) {
+    const room = `call:${payload.roomId}`;
+    socket.data.roomId = payload.roomId;
+    socket.join(room);
+
+    const peers = await socket.in(room).fetchSockets();
+    // Caller is the first to arrive; the second is the callee. The `peers`
+    // count lets the caller offer only once someone is actually listening.
+    const role = peers.length <= 1 ? 'caller' : 'callee';
+    socket.emit('peer-joined', { role, peers: peers.length });
+    socket.to(room).emit('peer-joined', { role: role === 'caller' ? 'callee' : 'caller', peers: peers.length });
+  },
+
+  async onLeave(socket: any, payload: { roomId: string }) {
+    socket.to(`call:${payload.roomId}`).emit('peer-left', {});
+  },
+
+  onMessage: {
+    'offer': (socket: any, payload: { roomId: string; sdp: unknown }, _ctx: any) => {
+      socket.to(`call:${payload.roomId}`).emit('offer', { sdp: payload.sdp });
+    },
+    'answer': (socket: any, payload: { roomId: string; sdp: unknown }, _ctx: any) => {
+      socket.to(`call:${payload.roomId}`).emit('answer', { sdp: payload.sdp });
+    },
+    'candidate': (socket: any, payload: { roomId: string; candidate: unknown }, _ctx: any) => {
+      socket.to(`call:${payload.roomId}`).emit('candidate', { candidate: payload.candidate });
+    },
+  },
+};

package/examples/video-call/apps/frontend/src/main.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+type Role = 'caller' | 'callee';
+
+function App() {
+  const [roomId, setRoomId] = useState('demo');
+  const [status, setStatus] = useState('idle');
+  const [connected, setConnected] = useState(false);
+  const localRef = useRef<HTMLVideoElement>(null);
+  const remoteRef = useRef<HTMLVideoElement>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const pcRef = useRef<RTCPeerConnection | null>(null);
+  const roleRef = useRef<Role>('caller');
+
+  useEffect(() => {
+    return () => hangUp();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const connect = async () => {
+    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+    if (localRef.current) localRef.current.srcObject = stream;
+
+    const pc = new RTCPeerConnection({ iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] });
+    pcRef.current = pc;
+    for (const track of stream.getTracks()) pc.addTrack(track, stream);
+    pc.ontrack = (ev) => {
+      if (remoteRef.current) remoteRef.current.srcObject = ev.streams[0];
+    };
+    pc.onicecandidate = (ev) => {
+      if (ev.candidate) send('candidate', { roomId, candidate: ev.candidate });
+    };
+
+    const host = (import.meta as any).env?.VITE_BACKEND_HOST ?? 'localhost';
+    const port = (import.meta as any).env?.VITE_BACKEND_PORT ?? '4000';
+    const ws = new WebSocket(`ws://${host}:${port}/ws`);
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      setConnected(true);
+      setStatus('waiting for peer...');
+      ws.send(JSON.stringify({ type: 'join', roomId }));
+    };
+    ws.onclose = () => { setConnected(false); setStatus('disconnected'); };
+    ws.onmessage = async (ev) => {
+      try {
+        const data = JSON.parse(ev.data);
+        const pc = pcRef.current;
+        if (!pc) return;
+        if (data.type === 'peer-joined') {
+          roleRef.current = data.payload.role;
+          setStatus(`peer joined — you are the ${data.payload.role}`);
+          // The caller offers only once a second peer is actually in the room.
+          if (data.payload.role === 'caller' && data.payload.peers >= 2) {
+            await pc.setLocalDescription(await pc.createOffer());
+            send('offer', { roomId, sdp: pc.localDescription });
+          }
+        } else if (data.type === 'offer') {
+          await pc.setRemoteDescription(data.payload.sdp);
+          await pc.setLocalDescription(await pc.createAnswer());
+          send('answer', { roomId, sdp: pc.localDescription });
+          setStatus('in call');
+        } else if (data.type === 'answer') {
+          await pc.setRemoteDescription(data.payload.sdp);
+          setStatus('in call');
+        } else if (data.type === 'candidate') {
+          await pc.addIceCandidate(data.payload.candidate);
+        } else if (data.type === 'peer-left') {
+          setStatus('peer left');
+          if (remoteRef.current) remoteRef.current.srcObject = null;
+        }
+      } catch { /* ignore */ }
+    };
+  };
+
+  const send = (type: string, payload: Record<string, unknown>) => {
+    wsRef.current?.send(JSON.stringify({ type, ...payload }));
+  };
+
+  const hangUp = () => {
+    pcRef.current?.close();
+    pcRef.current = null;
+    wsRef.current?.close();
+    wsRef.current = null;
+    (localRef.current?.srcObject as MediaStream | null)?.getTracks().forEach((t) => t.stop());
+    setConnected(false);
+    setStatus('idle');
+  };
+
+  return (
+    <main style={{ fontFamily: 'system-ui', maxWidth: 900, margin: '2rem auto', padding: '0 1rem' }}>
+      <h1>Video call</h1>
+      <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem', alignItems: 'center' }}>
+        <input value={roomId} onChange={(e) => setRoomId(e.target.value)} placeholder="room" disabled={connected} />
+        {!connected
+          ? <button onClick={connect}>Join call</button>
+          : <button onClick={hangUp}>Hang up</button>}
+        <span style={{ color: '#666' }}>{connected ? '*' : 'o'} {status}</span>
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+        <figure style={{ margin: 0 }}>
+          <video ref={localRef} autoPlay muted playsInline style={{ width: '100%', background: '#000', borderRadius: 8 }} />
+          <figcaption style={{ fontSize: '0.85rem', color: '#666' }}>You (local)</figcaption>
+        </figure>
+        <figure style={{ margin: 0 }}>
+          <video ref={remoteRef} autoPlay playsInline style={{ width: '100%', background: '#000', borderRadius: 8 }} />
+          <figcaption style={{ fontSize: '0.85rem', color: '#666' }}>Peer (remote)</figcaption>
+        </figure>
+      </div>
+    </main>
+  );
+}
+
+const el = document.getElementById('root');
+if (el) createRoot(el).render(<App />);

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@bhooai/nexus-examples",
+  "version": "2.0.0",
+  "description": "Working examples for BhooAI Nexus v2 — each demos a slice of the framework.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./src/index.ts",
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  }
+}