@affectively/aeon-pages 1.3.0

package/examples/basic/components/Cursor.tsx

@@ -0,0 +1,86 @@
+import type { PresenceUser } from '@affectively/aeon-pages/react';
+
+interface CursorProps {
+  user: PresenceUser;
+}
+
+// Generate a color from user ID
+function userColor(userId: string): string {
+  const colors = [
+    '#ef4444', // red
+    '#f97316', // orange
+    '#eab308', // yellow
+    '#22c55e', // green
+    '#06b6d4', // cyan
+    '#3b82f6', // blue
+    '#336699', // steel blue
+    '#ec4899', // pink
+  ];
+  let hash = 0;
+  for (let i = 0; i < userId.length; i++) {
+    hash = (hash << 5) - hash + userId.charCodeAt(i);
+    hash = hash & hash;
+  }
+  return colors[Math.abs(hash) % colors.length];
+}
+
+export function Cursor({ user }: CursorProps) {
+  if (!user.cursor || user.status === 'offline') {
+    return null;
+  }
+
+  const color = userColor(user.userId);
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        left: user.cursor.x,
+        top: user.cursor.y,
+        pointerEvents: 'none',
+        zIndex: 9999,
+        transition: 'left 0.1s ease-out, top 0.1s ease-out',
+      }}
+    >
+      {/* Cursor arrow */}
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        style={{ filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.3))' }}
+      >
+        <path
+          d="M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87c.48 0 .72-.58.38-.92L5.92 2.53a.5.5 0 0 0-.42.68z"
+          fill={color}
+          stroke="white"
+          strokeWidth="1.5"
+        />
+      </svg>
+
+      {/* User label */}
+      <div
+        style={{
+          marginLeft: '16px',
+          marginTop: '-4px',
+          padding: '2px 8px',
+          backgroundColor: color,
+          color: 'white',
+          fontSize: '12px',
+          fontWeight: 500,
+          borderRadius: '4px',
+          whiteSpace: 'nowrap',
+          boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
+        }}
+      >
+        {user.role === 'assistant' ? '🤖 ' : ''}
+        {user.userId.slice(0, 8)}
+        {user.editing && (
+          <span style={{ marginLeft: '4px', opacity: 0.8 }}>editing</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Cursor;

package/examples/basic/components/OfflineIndicator.tsx

@@ -0,0 +1,103 @@
+import { useOfflineStatus } from '@affectively/aeon-pages/react';
+
+export function OfflineIndicator() {
+  const { isOffline, isSyncing, pendingOperations, lastSyncAt } =
+    useOfflineStatus();
+
+  if (!isOffline && !isSyncing && pendingOperations === 0) {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-4 right-4 flex flex-col gap-2">
+      {/* Offline banner */}
+      {isOffline && (
+        <div className="flex items-center gap-2 bg-yellow-50 border border-yellow-200 rounded-lg px-4 py-2 shadow-lg">
+          <svg
+            className="w-5 h-5 text-yellow-500"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3"
+            />
+          </svg>
+          <div>
+            <p className="text-sm font-medium text-yellow-800">
+              You're offline
+            </p>
+            <p className="text-xs text-yellow-600">
+              Changes will sync when back online
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Pending operations */}
+      {pendingOperations > 0 && (
+        <div className="flex items-center gap-2 bg-blue-50 border border-blue-200 rounded-lg px-4 py-2 shadow-lg">
+          <div className="w-5 h-5">
+            <svg
+              className="animate-spin text-blue-500"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+          </div>
+          <div>
+            <p className="text-sm font-medium text-blue-800">
+              {isSyncing ? 'Syncing...' : `${pendingOperations} pending`}
+            </p>
+            <p className="text-xs text-blue-600">
+              {pendingOperations}{' '}
+              {pendingOperations === 1 ? 'change' : 'changes'} to sync
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Last sync time */}
+      {lastSyncAt && !isOffline && pendingOperations === 0 && (
+        <div className="text-xs text-gray-400 text-right">
+          Last synced: {formatRelativeTime(lastSyncAt)}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatRelativeTime(isoString: string): string {
+  const date = new Date(isoString);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+
+  if (seconds < 10) return 'just now';
+  if (seconds < 60) return `${seconds}s ago`;
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+
+  return date.toLocaleDateString();
+}
+
+export default OfflineIndicator;

package/examples/basic/components/PresenceBar.tsx

@@ -0,0 +1,77 @@
+import type { PresenceUser } from '@affectively/aeon-pages/react';
+
+interface PresenceBarProps {
+  users: PresenceUser[];
+}
+
+export function PresenceBar({ users }: PresenceBarProps) {
+  const onlineUsers = users.filter((u) => u.status === 'online');
+  const awayUsers = users.filter((u) => u.status === 'away');
+
+  return (
+    <div className="fixed top-4 right-4 flex items-center gap-2 bg-white rounded-full px-4 py-2 shadow-lg border border-gray-200">
+      {/* Online indicator */}
+      <div className="flex items-center gap-1">
+        <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+        <span className="text-sm text-gray-600">
+          {onlineUsers.length} online
+        </span>
+      </div>
+
+      {awayUsers.length > 0 && (
+        <>
+          <div className="w-px h-4 bg-gray-200" />
+          <div className="flex items-center gap-1">
+            <div className="w-2 h-2 bg-yellow-500 rounded-full" />
+            <span className="text-sm text-gray-500">
+              {awayUsers.length} away
+            </span>
+          </div>
+        </>
+      )}
+
+      {/* User avatars */}
+      <div className="w-px h-4 bg-gray-200 ml-2" />
+      <div className="flex -space-x-2">
+        {users.slice(0, 5).map((user) => (
+          <UserAvatar key={user.userId} user={user} />
+        ))}
+        {users.length > 5 && (
+          <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-xs text-gray-600 border-2 border-white">
+            +{users.length - 5}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function UserAvatar({ user }: { user: PresenceUser }) {
+  const isAgent = user.role === 'assistant';
+  const statusColor =
+    user.status === 'online'
+      ? 'bg-green-500'
+      : user.status === 'away'
+        ? 'bg-yellow-500'
+        : 'bg-gray-400';
+
+  return (
+    <div
+      className="relative w-8 h-8 rounded-full border-2 border-white flex items-center justify-center text-xs font-medium"
+      style={{
+        backgroundColor: isAgent ? '#336699' : '#3b82f6',
+        color: 'white',
+      }}
+      title={`${user.userId.slice(0, 8)} (${user.role})`}
+    >
+      {isAgent ? '🤖' : user.userId.slice(0, 2).toUpperCase()}
+
+      {/* Status indicator */}
+      <div
+        className={`absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full ${statusColor} border border-white`}
+      />
+    </div>
+  );
+}
+
+export default PresenceBar;

package/examples/basic/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@affectively/aeon-pages-example-basic",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "aeon dev",
+    "build": "aeon build",
+    "start": "aeon start"
+  },
+  "dependencies": {
+    "@affectively/aeon-pages": "workspace:*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "@types/react": "^18.0.0"
+  }
+}

package/examples/basic/pages/index.tsx

@@ -0,0 +1,80 @@
+'use aeon';
+
+import {
+  usePresence,
+  useAeonData,
+  useCursorTracking,
+} from '@affectively/aeon-pages/react';
+import { Cursor } from '../components/Cursor';
+import { PresenceBar } from '../components/PresenceBar';
+import { OfflineIndicator } from '../components/OfflineIndicator';
+
+export default function HomePage() {
+  const { presence, localUser } = usePresence();
+  const [title, setTitle] = useAeonData<string>('title');
+  const [description, setDescription] = useAeonData<string>('description');
+
+  // Auto-track cursor movement
+  useCursorTracking(true);
+
+  // Filter out self from presence
+  const otherUsers = presence.filter((u) => u.userId !== localUser?.userId);
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      {/* Presence bar showing who's viewing */}
+      <PresenceBar users={presence} />
+
+      {/* Offline indicator */}
+      <OfflineIndicator />
+
+      {/* Main content - editable in place */}
+      <main className="max-w-4xl mx-auto mt-8">
+        <h1
+          contentEditable
+          suppressContentEditableWarning
+          onBlur={(e) => setTitle(e.currentTarget.textContent || '')}
+          className="text-4xl font-bold text-gray-900 outline-none focus:ring-2 focus:ring-blue-500 rounded px-2 py-1"
+        >
+          {title || 'Welcome to Aeon Pages'}
+        </h1>
+
+        <p
+          contentEditable
+          suppressContentEditableWarning
+          onBlur={(e) => setDescription(e.currentTarget.textContent || '')}
+          className="mt-4 text-xl text-gray-600 outline-none focus:ring-2 focus:ring-blue-500 rounded px-2 py-1"
+        >
+          {description || 'Click any text to edit. Changes sync in real-time.'}
+        </p>
+
+        <div className="mt-8 p-6 bg-white rounded-lg shadow">
+          <h2 className="text-2xl font-semibold text-gray-800">Features</h2>
+          <ul className="mt-4 space-y-2 text-gray-700">
+            <li>Real-time collaborative editing</li>
+            <li>See other editors cursors</li>
+            <li>Works offline, syncs when back online</li>
+            <li>Version history with rollback</li>
+            <li>~20KB runtime</li>
+          </ul>
+        </div>
+
+        <div className="mt-8 text-sm text-gray-500">
+          {otherUsers.length > 0 ? (
+            <p>
+              {otherUsers.length} other{' '}
+              {otherUsers.length === 1 ? 'person' : 'people'} viewing this page
+            </p>
+          ) : (
+            <p>You're the only one here</p>
+          )}
+        </div>
+      </main>
+
+      {/* Render other users' cursors */}
+      {otherUsers.map((user) => (
+        <Cursor key={user.userId} user={user} />
+      ))}
+    </div>
+  );
+}

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@affectively/aeon-pages",
+  "version": "1.3.0",
+  "description": "Collaborative page surface with CRDT-based flux state, Edge Side Inference, and zero-CLS rendering. Pages that think.",
+  "type": "module",
+  "workspaces": [
+    "packages/*"
+  ],
+  "main": "./packages/runtime/dist/index.js",
+  "types": "./packages/runtime/dist/index.d.ts",
+  "bin": {
+    "aeon": "packages/cli/dist/index.js"
+  },
+  "exports": {
+    ".": {
+      "import": "./packages/runtime/dist/index.js",
+      "types": "./packages/runtime/dist/index.d.ts"
+    },
+    "./runtime": {
+      "import": "./packages/runtime/dist/index.js",
+      "types": "./packages/runtime/dist/index.d.ts"
+    },
+    "./react": {
+      "import": "./packages/react/dist/index.js",
+      "types": "./packages/react/dist/index.d.ts"
+    },
+    "./esi": {
+      "import": "./packages/runtime/dist/router/index.js",
+      "types": "./packages/runtime/dist/router/index.d.ts"
+    },
+    "./server": {
+      "import": "./packages/runtime/dist/server.js",
+      "types": "./packages/runtime/dist/server.d.ts"
+    },
+    "./auth": {
+      "import": "@affectively/auth",
+      "types": "@affectively/auth"
+    },
+    "./directives": {
+      "import": "./packages/directives/dist/use-aeon.js",
+      "types": "./packages/directives/dist/use-aeon.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "bun run build:wasm && bun run build:ts",
+    "build:wasm": "cd packages/runtime-wasm && wasm-pack build --target web --out-dir ../runtime/wasm",
+    "build:ts": "bun run --filter='./packages/*' build",
+    "dev": "bun run packages/cli/src/dev.ts",
+    "test": "bun test",
+    "clean": "rm -rf packages/*/dist packages/runtime/wasm"
+  },
+  "dependencies": {
+    "@affectively/aeon": "^1.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "@types/bun": "latest",
+    "@types/react": "^18.0.0",
+    "wasm-pack": "^0.13.0"
+  },
+  "peerDependencies": {
+    "bun": ">=1.0.0",
+    "react": ">=18.0.0",
+    "@affectively/auth": ">=0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@affectively/auth": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "bun": ">=1.0.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/affectively-ai/aeon-flux.git"
+  },
+  "keywords": [
+    "aeon",
+    "flux",
+    "crdt",
+    "framework",
+    "collaborative",
+    "cms",
+    "real-time",
+    "bun",
+    "cloudflare",
+    "d1",
+    "durable-objects",
+    "wasm",
+    "skeleton",
+    "zero-cls",
+    "performance"
+  ],
+  "author": "AFFECTIVELY",
+  "homepage": "https://github.com/affectively-ai/aeon-flux#readme",
+  "bugs": {
+    "url": "https://github.com/affectively-ai/aeon-flux/issues"
+  }
+}