@nuraly/lumenjs 0.1.2 → 0.1.4

package/dist/storage/adapters/types.d.ts

@@ -0,0 +1,53 @@
+export interface StoredFile {
+    /** Storage key (path within bucket / upload-dir) */
+    key: string;
+    /** Publicly accessible URL (for public-read files) */
+    url: string;
+    size: number;
+    mimeType: string;
+    fileName: string;
+}
+export interface PutOptions {
+    /** Custom storage key. Auto-generated UUID if omitted. */
+    key?: string;
+    mimeType?: string;
+    fileName?: string;
+    /** Access control. Default: 'public-read' */
+    acl?: 'public-read' | 'private';
+}
+export interface PresignPutOptions {
+    /** Expected MIME type (enforced in local adapter; advisory on S3 via Content-Type condition) */
+    mimeType?: string;
+    /** URL expiry in seconds. Default: 3600 */
+    expiresIn?: number;
+    /** Maximum file size in bytes */
+    maxSize?: number;
+}
+export interface PresignGetOptions {
+    /** URL expiry in seconds. Default: 3600 */
+    expiresIn?: number;
+}
+export interface PresignedUpload {
+    /** Presigned URL the client should PUT the encrypted file to */
+    uploadUrl: string;
+    /** Storage key to reference the file after upload */
+    key: string;
+    /** ISO 8601 expiry timestamp */
+    expiresAt: string;
+}
+/** Storage adapter interface — implement for any backend (S3, R2, MinIO, local disk, etc.) */
+export interface StorageAdapter {
+    /** Upload a file buffer server-side. Returns stored file metadata with URL. */
+    put(data: Buffer, options?: PutOptions): Promise<StoredFile>;
+    /** Delete a file by its storage key. */
+    delete(key: string): Promise<void>;
+    /**
+     * Generate a presigned PUT URL for direct client-to-storage upload.
+     * Used for E2E-encrypted chat attachments — the server never sees the plaintext file.
+     */
+    presignPut(key: string, options?: PresignPutOptions): Promise<PresignedUpload>;
+    /** Generate a presigned GET URL for temporarily accessing a private file. */
+    presignGet(key: string, options?: PresignGetOptions): Promise<string>;
+    /** Return the permanent public URL for a public-read file. */
+    publicUrl(key: string): string;
+}

package/dist/storage/adapters/types.js

@@ -0,0 +1 @@
+export {};

package/dist/storage/index.d.ts

@@ -0,0 +1,76 @@
+import type { StorageAdapter } from './adapters/types.js';
+export type { StorageAdapter, StoredFile, PutOptions, PresignPutOptions, PresignGetOptions, PresignedUpload } from './adapters/types.js';
+export { LocalStorageAdapter } from './adapters/local.js';
+export { S3StorageAdapter } from './adapters/s3.js';
+export interface LocalStorageConfig {
+    provider: 'local';
+    /** Directory to write uploaded files. Default: './uploads' */
+    uploadDir?: string;
+    /** URL path prefix for serving files. Default: '/uploads' */
+    publicPath?: string;
+}
+export interface S3StorageConfig {
+    provider: 's3';
+    bucket: string;
+    region: string;
+    /** Read from env var LUMENJS_S3_ACCESS_KEY if omitted */
+    accessKeyId?: string;
+    /** Read from env var LUMENJS_S3_SECRET_KEY if omitted */
+    secretAccessKey?: string;
+    /** Custom endpoint for MinIO / Cloudflare R2 / other S3-compatible APIs */
+    endpoint?: string;
+    /** Public CDN base URL. Defaults to https://{bucket}.s3.{region}.amazonaws.com */
+    publicBaseUrl?: string;
+}
+export type StorageConfig = LocalStorageConfig | S3StorageConfig;
+/**
+ * Create a storage adapter from a config object.
+ *
+ * @example
+ * ```ts
+ * // Local dev (default)
+ * const storage = createStorage({ provider: 'local', uploadDir: './uploads' });
+ *
+ * // AWS S3
+ * const storage = createStorage({
+ *   provider: 's3',
+ *   bucket: 'my-bucket',
+ *   region: 'us-east-1',
+ *   accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
+ *   secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
+ * });
+ *
+ * // MinIO / Cloudflare R2
+ * const storage = createStorage({
+ *   provider: 's3',
+ *   endpoint: 'https://minio.example.com',
+ *   bucket: 'my-bucket',
+ *   region: 'us-east-1',
+ *   accessKeyId: process.env.MINIO_KEY!,
+ *   secretAccessKey: process.env.MINIO_SECRET!,
+ * });
+ * ```
+ */
+export declare function createStorage(config: StorageConfig): StorageAdapter;
+/**
+ * Get the global storage adapter (set by the LumenJS runtime or your app).
+ * Returns null if storage has not been configured.
+ *
+ * Available as `req.storage` in API route handlers.
+ */
+export declare function useStorage(): StorageAdapter | null;
+/**
+ * Set the global storage adapter.
+ * Call this in a `_middleware.ts` or app startup to configure storage.
+ *
+ * @example
+ * ```ts
+ * // pages/_middleware.ts
+ * import { setStorage, createStorage } from '@nuraly/lumenjs/dist/storage/index.js';
+ *
+ * setStorage(createStorage({ provider: 'local' }));
+ * ```
+ *
+ * @internal also called by vite-plugin-storage in dev mode
+ */
+export declare function setStorage(adapter: StorageAdapter | null): void;

package/dist/storage/index.js

@@ -0,0 +1,83 @@
+import { LocalStorageAdapter } from './adapters/local.js';
+import { S3StorageAdapter } from './adapters/s3.js';
+export { LocalStorageAdapter } from './adapters/local.js';
+export { S3StorageAdapter } from './adapters/s3.js';
+// ── Factory ───────────────────────────────────────────────────────
+/**
+ * Create a storage adapter from a config object.
+ *
+ * @example
+ * ```ts
+ * // Local dev (default)
+ * const storage = createStorage({ provider: 'local', uploadDir: './uploads' });
+ *
+ * // AWS S3
+ * const storage = createStorage({
+ *   provider: 's3',
+ *   bucket: 'my-bucket',
+ *   region: 'us-east-1',
+ *   accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
+ *   secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
+ * });
+ *
+ * // MinIO / Cloudflare R2
+ * const storage = createStorage({
+ *   provider: 's3',
+ *   endpoint: 'https://minio.example.com',
+ *   bucket: 'my-bucket',
+ *   region: 'us-east-1',
+ *   accessKeyId: process.env.MINIO_KEY!,
+ *   secretAccessKey: process.env.MINIO_SECRET!,
+ * });
+ * ```
+ */
+export function createStorage(config) {
+    if (config.provider === 's3') {
+        const accessKeyId = config.accessKeyId ?? process.env.LUMENJS_S3_ACCESS_KEY ?? '';
+        const secretAccessKey = config.secretAccessKey ?? process.env.LUMENJS_S3_SECRET_KEY ?? '';
+        if (!accessKeyId || !secretAccessKey) {
+            throw new Error('[LumenJS:Storage] S3 credentials are required. ' +
+                'Set accessKeyId/secretAccessKey in config, or set LUMENJS_S3_ACCESS_KEY / LUMENJS_S3_SECRET_KEY env vars.');
+        }
+        return new S3StorageAdapter({
+            bucket: config.bucket,
+            region: config.region,
+            accessKeyId,
+            secretAccessKey,
+            endpoint: config.endpoint,
+            publicBaseUrl: config.publicBaseUrl,
+        });
+    }
+    return new LocalStorageAdapter({
+        uploadDir: config.uploadDir ?? './uploads',
+        publicPath: config.publicPath ?? '/uploads',
+    });
+}
+// ── Singleton ─────────────────────────────────────────────────────
+let _storage = null;
+/**
+ * Get the global storage adapter (set by the LumenJS runtime or your app).
+ * Returns null if storage has not been configured.
+ *
+ * Available as `req.storage` in API route handlers.
+ */
+export function useStorage() {
+    return _storage;
+}
+/**
+ * Set the global storage adapter.
+ * Call this in a `_middleware.ts` or app startup to configure storage.
+ *
+ * @example
+ * ```ts
+ * // pages/_middleware.ts
+ * import { setStorage, createStorage } from '@nuraly/lumenjs/dist/storage/index.js';
+ *
+ * setStorage(createStorage({ provider: 'local' }));
+ * ```
+ *
+ * @internal also called by vite-plugin-storage in dev mode
+ */
+export function setStorage(adapter) {
+    _storage = adapter;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuraly/lumenjs",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Full-stack Lit web component framework with file-based routing, server loaders, SSR, and API routes",
   "type": "module",
   "main": "dist/cli.js",
@@ -9,6 +9,7 @@
   },
   "files": [
     "dist",
+    "templates",
     "README.md"
   ],
   "scripts": {
@@ -42,11 +43,29 @@
   "license": "MIT",
   "dependencies": {
     "@lit-labs/ssr": "^3.2.0",
+    "better-sqlite3": "^12.8.0",
+    "codejar": "^4.2.0",
     "glob": "^10.3.0",
     "lit": "^3.1.0",
+    "pg": "^8.20.0",
+    "socket.io": "^4.8.3",
+    "socket.io-client": "^4.8.3",
     "vite": "^5.4.0"
   },
+  "peerDependencies": {
+    "@aws-sdk/client-s3": "^3.0.0",
+    "@aws-sdk/s3-request-presigner": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@aws-sdk/client-s3": {
+      "optional": true
+    },
+    "@aws-sdk/s3-request-presigner": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@types/better-sqlite3": "^7.6.13",
     "@types/node": "^20.14.2",
     "@vitest/coverage-v8": "^4.0.18",
     "typescript": "^5.4.5",

package/templates/blog/api/posts.ts

@@ -0,0 +1,6 @@
+export function GET() {
+  return Response.json([
+    { slug: 'hello-world', title: 'Hello World' },
+    { slug: 'getting-started', title: 'Getting Started with LumenJS' },
+  ]);
+}

package/templates/blog/data/migrations/001_init.sql

@@ -0,0 +1,13 @@
+CREATE TABLE IF NOT EXISTS posts (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  title TEXT NOT NULL,
+  slug TEXT NOT NULL UNIQUE,
+  content TEXT NOT NULL,
+  date TEXT NOT NULL DEFAULT (date('now')),
+  tags TEXT NOT NULL DEFAULT '[]'
+);
+
+INSERT INTO posts (title, slug, content, date, tags) VALUES
+  ('Hello World', 'hello-world', 'Welcome to your new LumenJS blog! This post was loaded from SQLite.', '2025-01-15', '["introduction","lumenjs"]'),
+  ('Getting Started with LumenJS', 'getting-started', 'LumenJS makes it easy to build full-stack web apps with Lit web components and file-based routing.', '2025-01-20', '["tutorial","lumenjs","web-components"]'),
+  ('SQLite Persistence', 'sqlite-persistence', 'LumenJS includes built-in SQLite support via better-sqlite3. Just use useDb() in your loaders and API routes.', '2025-01-25', '["database","lumenjs"]');

package/templates/blog/lumenjs.config.ts

@@ -0,0 +1,3 @@
+export default {
+  title: '{{PROJECT_NAME}}',
+};

package/templates/blog/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "lumenjs dev",
+    "build": "lumenjs build",
+    "serve": "lumenjs serve"
+  },
+  "dependencies": {
+    "@nuraly/lumenjs": "^0.1.3",
+    "lit": "^3.1.0"
+  }
+}

package/templates/blog/pages/_layout.ts

@@ -0,0 +1,25 @@
+import { LitElement, html, css } from 'lit';
+
+export class LayoutRoot extends LitElement {
+  static styles = css`
+    :host { display: block; min-height: 100vh; font-family: system-ui; color: #1e293b; }
+    header { max-width: 720px; margin: 0 auto; padding: 1.5rem 1rem; display: flex; justify-content: space-between; align-items: center; }
+    header a { color: #7c3aed; text-decoration: none; font-weight: 600; font-size: 1.125rem; }
+    nav a { color: #64748b; text-decoration: none; margin-left: 1.5rem; }
+    nav a:hover { color: #7c3aed; }
+    main { max-width: 720px; margin: 0 auto; padding: 0 1rem 3rem; }
+  `;
+
+  render() {
+    return html`
+      <header>
+        <a href="/">{{PROJECT_NAME}}</a>
+        <nav>
+          <a href="/">Home</a>
+          <a href="/posts">Posts</a>
+        </nav>
+      </header>
+      <main><slot></slot></main>
+    `;
+  }
+}

package/templates/blog/pages/index.ts

@@ -0,0 +1,65 @@
+import { LitElement, html, css } from 'lit';
+
+function estimateReadingTime(text: string): number {
+  const wordsPerMinute = 200;
+  const words = text.trim().split(/\s+/).length;
+  return Math.max(1, Math.ceil(words / wordsPerMinute));
+}
+
+const POSTS = [
+  {
+    slug: 'hello-world',
+    title: 'Hello World',
+    date: '2025-01-15',
+    excerpt: 'Welcome to my blog built with LumenJS.',
+    content: 'Welcome to my blog! This is a sample post built with LumenJS. Each post is a dynamic route using the [slug] parameter.',
+  },
+  {
+    slug: 'getting-started',
+    title: 'Getting Started with LumenJS',
+    date: '2025-01-20',
+    excerpt: 'Learn how to build web apps with Lit components and file-based routing.',
+    content: 'LumenJS uses file-based routing with Lit web components. Create a file in pages/ and it becomes a route. Add a loader() function for server-side data fetching.',
+  },
+];
+
+export async function loader() {
+  return {
+    posts: POSTS.map(({ content, ...post }) => ({
+      ...post,
+      readingTime: estimateReadingTime(content),
+    })),
+  };
+}
+
+export class PageIndex extends LitElement {
+  static properties = { loaderData: { type: Object } };
+  loaderData: any = {};
+
+  static styles = css`
+    :host { display: block; }
+    h1 { font-size: 2rem; margin-bottom: 0.5rem; }
+    .subtitle { color: #64748b; margin-bottom: 2rem; }
+    .post { border-bottom: 1px solid #e2e8f0; padding: 1.5rem 0; }
+    .post:last-child { border-bottom: none; }
+    .post a { color: #1e293b; text-decoration: none; font-size: 1.25rem; font-weight: 600; }
+    .post a:hover { color: #7c3aed; }
+    .meta { color: #94a3b8; font-size: 0.875rem; margin-top: 0.25rem; }
+    .excerpt { color: #64748b; margin-top: 0.5rem; line-height: 1.5; }
+  `;
+
+  render() {
+    const posts = this.loaderData.posts || [];
+    return html`
+      <h1>Blog</h1>
+      <p class="subtitle">Thoughts and tutorials</p>
+      ${posts.map((p: any) => html`
+        <div class="post">
+          <a href="/posts/${p.slug}">${p.title}</a>
+          <div class="meta">${p.date} · ${p.readingTime} min read</div>
+          <p class="excerpt">${p.excerpt}</p>
+        </div>
+      `)}
+    `;
+  }
+}

package/templates/blog/pages/posts/[slug].ts

@@ -0,0 +1,60 @@
+import { LitElement, html, css } from 'lit';
+
+function estimateReadingTime(text: string): number {
+  const wordsPerMinute = 200;
+  const words = text.trim().split(/\s+/).length;
+  return Math.max(1, Math.ceil(words / wordsPerMinute));
+}
+
+const POSTS: Record<string, { title: string; date: string; content: string }> = {
+  'hello-world': {
+    title: 'Hello World',
+    date: '2025-01-15',
+    content: 'Welcome to my blog! This is a sample post built with LumenJS. Each post is a dynamic route using the [slug] parameter.',
+  },
+  'getting-started': {
+    title: 'Getting Started with LumenJS',
+    date: '2025-01-20',
+    content: 'LumenJS uses file-based routing with Lit web components. Create a file in pages/ and it becomes a route. Add a loader() function for server-side data fetching.',
+  },
+};
+
+export async function loader({ params }: { params: { slug: string } }) {
+  const post = POSTS[params.slug];
+  if (!post) return { notFound: true };
+  return {
+    ...post,
+    readingTime: estimateReadingTime(post.content),
+  };
+}
+
+export class PagePost extends LitElement {
+  static properties = { loaderData: { type: Object }, slug: { type: String } };
+  loaderData: any = {};
+  slug = '';
+
+  static styles = css`
+    :host { display: block; }
+    .back { color: #7c3aed; text-decoration: none; font-size: 0.875rem; }
+    .back:hover { text-decoration: underline; }
+    h1 { font-size: 2rem; margin: 1rem 0 0.25rem; }
+    .date { color: #94a3b8; font-size: 0.875rem; margin-bottom: 1.5rem; }
+    .content { line-height: 1.8; color: #334155; }
+    .not-found { color: #64748b; }
+  `;
+
+  render() {
+    if (this.loaderData.notFound) {
+      return html`
+        <a class="back" href="/posts">← Back to posts</a>
+        <p class="not-found">Post not found.</p>
+      `;
+    }
+    return html`
+      <a class="back" href="/">← Back to posts</a>
+      <h1>${this.loaderData.title}</h1>
+      <div class="date">${this.loaderData.date} · ${this.loaderData.readingTime} min read</div>
+      <p class="content">${this.loaderData.content}</p>
+    `;
+  }
+}

package/templates/blog/pages/tag/[tag].ts

@@ -0,0 +1,44 @@
+import { LitElement, html, css } from 'lit';
+
+const ALL_POSTS = [
+  { slug: 'hello-world', title: 'Hello World', date: '2025-01-15', excerpt: 'Welcome to my blog built with LumenJS.', tags: ['introduction', 'lumenjs'] },
+  { slug: 'getting-started', title: 'Getting Started with LumenJS', date: '2025-01-20', excerpt: 'Learn how to build web apps with Lit components and file-based routing.', tags: ['tutorial', 'lumenjs', 'web-components'] },
+];
+
+export async function loader({ params }: { params: { tag: string } }) {
+  const posts = ALL_POSTS.filter(p => p.tags.includes(params.tag));
+  return { tag: params.tag, posts };
+}
+
+export class PageTag extends LitElement {
+  static properties = { loaderData: { type: Object } };
+  loaderData: any = {};
+
+  static styles = css`
+    :host { display: block; }
+    h1 { font-size: 2rem; margin-bottom: 0.5rem; }
+    .subtitle { color: #64748b; margin-bottom: 2rem; }
+    .post { border-bottom: 1px solid #e2e8f0; padding: 1.5rem 0; }
+    .post:last-child { border-bottom: none; }
+    .post a { color: #1e293b; text-decoration: none; font-size: 1.25rem; font-weight: 600; }
+    .post a:hover { color: #7c3aed; }
+    .meta { color: #94a3b8; font-size: 0.875rem; margin-top: 0.25rem; }
+    .back { color: #7c3aed; text-decoration: none; font-size: 0.875rem; }
+    .back:hover { text-decoration: underline; }
+  `;
+
+  render() {
+    const { tag, posts } = this.loaderData;
+    return html`
+      <a class="back" href="/">← All posts</a>
+      <h1>Tagged: ${tag}</h1>
+      <p class="subtitle">${posts?.length || 0} post${posts?.length !== 1 ? 's' : ''}</p>
+      ${(posts || []).map((p: any) => html`
+        <div class="post">
+          <a href="/posts/${p.slug}">${p.title}</a>
+          <div class="meta">${p.date}</div>
+        </div>
+      `)}
+    `;
+  }
+}

package/templates/dashboard/api/stats.ts

@@ -0,0 +1,10 @@
+export function GET() {
+  return Response.json({
+    stats: [
+      { label: 'Users', value: 1234 },
+      { label: 'Revenue', value: 12345 },
+      { label: 'Orders', value: 567 },
+      { label: 'Conversion', value: 3.2 },
+    ],
+  });
+}

package/templates/dashboard/data/migrations/001_init.sql

@@ -0,0 +1,13 @@
+CREATE TABLE IF NOT EXISTS stats (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  label TEXT NOT NULL UNIQUE,
+  value REAL NOT NULL,
+  unit TEXT NOT NULL DEFAULT '',
+  updated_at TEXT NOT NULL DEFAULT (datetime('now'))
+);
+
+INSERT INTO stats (label, value, unit) VALUES
+  ('Total Users', 1284, 'users'),
+  ('Revenue', 42500, 'USD'),
+  ('Active Sessions', 89, 'sessions'),
+  ('Uptime', 99.97, '%');

package/templates/dashboard/lumenjs.config.ts

@@ -0,0 +1,3 @@
+export default {
+  title: '{{PROJECT_NAME}}',
+};

package/templates/dashboard/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "lumenjs dev",
+    "build": "lumenjs build",
+    "serve": "lumenjs serve"
+  },
+  "dependencies": {
+    "@nuraly/lumenjs": "^0.1.3",
+    "lit": "^3.1.0"
+  }
+}

package/templates/dashboard/pages/_layout.ts

@@ -0,0 +1,25 @@
+import { LitElement, html, css } from 'lit';
+
+export class LayoutRoot extends LitElement {
+  static styles = css`
+    :host { display: flex; min-height: 100vh; font-family: system-ui; color: #1e293b; }
+    aside { width: 240px; background: #0f172a; color: #cbd5e1; padding: 1.5rem 0; flex-shrink: 0; }
+    .logo { padding: 0 1.25rem 1.5rem; font-weight: 700; font-size: 1.125rem; color: #fff; }
+    nav a { display: block; padding: 0.625rem 1.25rem; color: #94a3b8; text-decoration: none; font-size: 0.875rem; }
+    nav a:hover { background: #1e293b; color: #fff; }
+    main { flex: 1; background: #f8fafc; padding: 2rem; }
+  `;
+
+  render() {
+    return html`
+      <aside>
+        <div class="logo">{{PROJECT_NAME}}</div>
+        <nav>
+          <a href="/">Overview</a>
+          <a href="/settings">Settings</a>
+        </nav>
+      </aside>
+      <main><slot></slot></main>
+    `;
+  }
+}

package/templates/dashboard/pages/index.ts

@@ -0,0 +1,72 @@
+import { LitElement, html, css } from 'lit';
+
+export async function loader() {
+  return {
+    stats: [
+      { label: 'Users', value: '1,234' },
+      { label: 'Revenue', value: '$12,345' },
+      { label: 'Orders', value: '567' },
+      { label: 'Conversion', value: '3.2%' },
+    ],
+  };
+}
+
+let tick = 0;
+
+export function subscribe({ push }: { push: (data: any) => void }) {
+  const interval = setInterval(() => {
+    tick++;
+    push({
+      stats: [
+        { label: 'Users', value: (1234 + tick * 3).toLocaleString() },
+        { label: 'Revenue', value: '$' + (12345 + tick * 47).toLocaleString() },
+        { label: 'Orders', value: (567 + tick).toLocaleString() },
+        { label: 'Conversion', value: (3.2 + Math.sin(tick / 5) * 0.5).toFixed(1) + '%' },
+      ],
+      updatedAt: new Date().toISOString(),
+    });
+  }, 2000);
+  return () => clearInterval(interval);
+}
+
+export class PageIndex extends LitElement {
+  static properties = {
+    loaderData: { type: Object },
+    liveData: { type: Object },
+  };
+  loaderData: any = {};
+  liveData: any = null;
+
+  static styles = css`
+    :host { display: block; }
+    h1 { font-size: 1.5rem; margin-bottom: 1.5rem; }
+    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
+    .card { background: #fff; border-radius: 8px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: box-shadow 0.2s; }
+    .card.live { box-shadow: 0 0 0 2px rgba(124,58,237,0.3), 0 1px 3px rgba(0,0,0,0.08); }
+    .card-label { font-size: 0.875rem; color: #64748b; }
+    .card-value { font-size: 1.75rem; font-weight: 700; margin-top: 0.25rem; }
+    .status { font-size: 0.75rem; color: #94a3b8; margin-top: 1.5rem; }
+    .status .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; margin-right: 0.375rem; vertical-align: middle; }
+  `;
+
+  render() {
+    const stats = this.liveData?.stats || this.loaderData.stats || [];
+    const isLive = !!this.liveData;
+    return html`
+      <h1>Overview</h1>
+      <div class="grid">
+        ${stats.map((s: any) => html`
+          <div class="card ${isLive ? 'live' : ''}">
+            <div class="card-label">${s.label}</div>
+            <div class="card-value">${s.value}</div>
+          </div>
+        `)}
+      </div>
+      ${isLive ? html`
+        <div class="status">
+          <span class="dot"></span>Live — updated ${this.liveData.updatedAt ? new Date(this.liveData.updatedAt).toLocaleTimeString() : ''}
+        </div>
+      ` : ''}
+    `;
+  }
+}