@nuraly/lumenjs 0.1.3 → 0.1.4

package/templates/dashboard/pages/index.ts

@@ -1,41 +1,72 @@
 import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { useDb } from '@nuraly/lumenjs/db';
 
-export function loader() {
-  const db = useDb();
-  const stats = db.all('SELECT id, label, value, unit, updated_at FROM stats ORDER BY id');
-  return { stats };
+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%' },
+    ],
+  };
 }
 
-@customElement('page-dashboard')
-export class PageDashboard extends LitElement {
-  @property({ type: Object }) data: any;
+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; max-width: 960px; margin: 0 auto; padding: 2rem; font-family: system-ui, sans-serif; }
-    h1 { font-size: 2rem; margin-bottom: 1.5rem; }
+    :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: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; }
-    .card .label { font-size: 0.875rem; color: #6b7280; margin-bottom: 0.25rem; }
-    .card .value { font-size: 1.75rem; font-weight: 600; color: #111827; }
-    .card .unit { font-size: 0.75rem; color: #9ca3af; margin-left: 0.25rem; }
+    .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.data?.stats || [];
+    const stats = this.liveData?.stats || this.loaderData.stats || [];
+    const isLive = !!this.liveData;
     return html`
-      <h1>Dashboard</h1>
+      <h1>Overview</h1>
       <div class="grid">
-        ${stats.map((stat: any) => html`
-          <div class="card">
-            <div class="label">${stat.label}</div>
-            <div class="value">
-              ${stat.value}<span class="unit">${stat.unit}</span>
-            </div>
+        ${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>
+      ` : ''}
     `;
   }
 }

package/templates/dashboard/pages/settings/index.ts

@@ -0,0 +1,29 @@
+import { LitElement, html, css } from 'lit';
+
+export class PageSettings extends LitElement {
+  static properties = { name: { type: String } };
+  name = '';
+
+  static styles = css`
+    :host { display: block; }
+    h1 { font-size: 1.5rem; margin-bottom: 1.5rem; }
+    .form-group { margin-bottom: 1rem; }
+    label { display: block; font-size: 0.875rem; color: #64748b; margin-bottom: 0.375rem; }
+    input { width: 100%; max-width: 400px; padding: 0.5rem 0.75rem; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 0.875rem; }
+    input:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,0.15); }
+    button { background: #7c3aed; color: #fff; border: none; padding: 0.5rem 1.25rem; border-radius: 6px; cursor: pointer; font-size: 0.875rem; }
+    button:hover { background: #6d28d9; }
+  `;
+
+  render() {
+    return html`
+      <h1>Settings</h1>
+      <div class="form-group">
+        <label>Display Name</label>
+        <input type="text" placeholder="Enter your name" .value=${this.name}
+          @input=${(e: Event) => this.name = (e.target as HTMLInputElement).value} />
+      </div>
+      <button @click=${() => alert(`Saved: ${this.name}`)}>Save</button>
+    `;
+  }
+}

package/templates/default/lumenjs.config.ts

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

package/templates/default/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/default/pages/index.ts

@@ -0,0 +1,24 @@
+import { LitElement, html, css } from 'lit';
+
+export async function loader() {
+  return { title: 'Welcome to LumenJS' };
+}
+
+export class PageIndex extends LitElement {
+  static properties = { loaderData: { type: Object } };
+  loaderData: any = {};
+
+  static styles = css`
+    :host { display: block; max-width: 640px; margin: 0 auto; padding: 2rem; font-family: system-ui; }
+    h1 { color: #7c3aed; margin-bottom: 0.5rem; }
+    p { color: #64748b; line-height: 1.6; }
+    a { color: #7c3aed; }
+  `;
+
+  render() {
+    return html`
+      <h1>${this.loaderData.title}</h1>
+      <p>Edit <code>pages/index.ts</code> to get started.</p>
+    `;
+  }
+}

package/templates/social/api/posts/[id].ts

@@ -0,0 +1,14 @@
+export function GET({ params }: { params: { id: string } }) {
+  return Response.json({
+    id: params.id,
+    username: 'sarah_dev',
+    display_name: 'Sarah Chen',
+    content: 'Sample post content',
+    likes: 42,
+    replies: [],
+  });
+}
+
+export function DELETE({ params }: { params: { id: string } }) {
+  return Response.json({ ok: true, deleted: params.id });
+}

package/templates/social/api/posts.ts

@@ -0,0 +1,11 @@
+export function GET() {
+  return Response.json([
+    { id: 1, username: 'sarah_dev', display_name: 'Sarah Chen', content: 'Just shipped a new feature using LumenJS!', likes: 42, replies: 5, shares: 12 },
+    { id: 2, username: 'alex_design', display_name: 'Alex Rivera', content: 'Working on a new design system.', likes: 38, replies: 3, shares: 8 },
+    { id: 3, username: 'emma_data', display_name: 'Emma Williams', content: 'Trained a new model on customer feedback data.', likes: 67, replies: 8, shares: 21 },
+  ]);
+}
+
+export function POST() {
+  return Response.json({ ok: true, message: 'Post created (mock)' });
+}

package/templates/social/api/profile/[username].ts

@@ -0,0 +1,10 @@
+export function GET({ params }: { params: { username: string } }) {
+  return Response.json({
+    username: params.username,
+    display_name: params.username,
+    bio: 'User profile (mock)',
+    followers: 0,
+    following: 0,
+    posts: [],
+  });
+}

package/templates/social/api/upload.ts

@@ -0,0 +1,19 @@
+import crypto from 'crypto';
+import { compress } from '../lib/media.js';
+
+export async function POST(req: any) {
+  const file = req.files?.[0];
+  if (!file) throw { status: 400, message: 'No file provided' };
+  if (!req.storage) throw { status: 503, message: 'Storage not configured' };
+
+  const { data, mimeType, ext } = await compress(file.data, file.contentType);
+  const key = `uploads/${crypto.randomUUID()}${ext}`;
+
+  const stored = await req.storage.put(data, {
+    key,
+    mimeType,
+    fileName: file.fileName,
+  });
+
+  return { url: stored.url, key: stored.key };
+}

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

@@ -0,0 +1,78 @@
+CREATE TABLE IF NOT EXISTS users (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  username TEXT NOT NULL UNIQUE,
+  display_name TEXT NOT NULL,
+  avatar_url TEXT NOT NULL DEFAULT '',
+  bio TEXT NOT NULL DEFAULT '',
+  cover_url TEXT NOT NULL DEFAULT '',
+  followers_count INTEGER NOT NULL DEFAULT 0,
+  following_count INTEGER NOT NULL DEFAULT 0,
+  created_at TEXT NOT NULL DEFAULT (date('now'))
+);
+
+CREATE TABLE IF NOT EXISTS posts (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  user_id INTEGER NOT NULL REFERENCES users(id),
+  content TEXT NOT NULL,
+  parent_id INTEGER REFERENCES posts(id),
+  likes_count INTEGER NOT NULL DEFAULT 0,
+  replies_count INTEGER NOT NULL DEFAULT 0,
+  shares_count INTEGER NOT NULL DEFAULT 0,
+  created_at TEXT NOT NULL DEFAULT (datetime('now'))
+);
+
+CREATE TABLE IF NOT EXISTS notifications (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  user_id INTEGER NOT NULL REFERENCES users(id),
+  type TEXT NOT NULL,
+  actor_id INTEGER NOT NULL REFERENCES users(id),
+  post_id INTEGER REFERENCES posts(id),
+  read INTEGER NOT NULL DEFAULT 0,
+  created_at TEXT NOT NULL DEFAULT (datetime('now'))
+);
+
+CREATE TABLE IF NOT EXISTS trending (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  hashtag TEXT NOT NULL UNIQUE,
+  post_count INTEGER NOT NULL DEFAULT 0
+);
+
+-- Seed users
+INSERT INTO users (username, display_name, avatar_url, bio, followers_count, following_count, created_at) VALUES
+  ('sarah_dev', 'Sarah Chen', '🧑‍💻', 'Full-stack developer. Open source enthusiast. Building the future one commit at a time.', 1240, 385, '2024-06-15'),
+  ('alex_design', 'Alex Rivera', '🎨', 'UI/UX designer at heart. Pixels matter. Currently exploring design systems.', 890, 210, '2024-08-20'),
+  ('mike_ops', 'Mike Johnson', '🛠️', 'DevOps engineer. Infrastructure as code. Coffee as fuel.', 560, 420, '2024-09-10'),
+  ('emma_data', 'Emma Williams', '📊', 'Data scientist. ML enthusiast. Turning data into insights.', 2100, 150, '2024-03-05');
+
+-- Seed posts
+INSERT INTO posts (user_id, content, likes_count, replies_count, shares_count, created_at) VALUES
+  (1, 'Just shipped a new feature using LumenJS! The file-based routing makes everything so clean. No more route config files! 🚀', 42, 5, 12, '2025-03-21 14:30:00'),
+  (2, 'Working on a new design system. The key insight: consistency beats creativity when building at scale. Every component should feel like it belongs.', 38, 3, 8, '2025-03-21 12:15:00'),
+  (4, 'Trained a new model on customer feedback data. Accuracy went from 78% to 94% just by cleaning the input data. Garbage in, garbage out is real. 📈', 67, 8, 21, '2025-03-21 10:00:00'),
+  (3, 'Migrated our entire CI/CD pipeline to GitHub Actions. 40% faster builds and way easier to maintain. Should have done this months ago.', 29, 4, 6, '2025-03-20 18:45:00'),
+  (1, 'Hot take: TypeScript''s type system is a programming language in itself. And I love it. 💙', 85, 12, 15, '2025-03-20 16:20:00'),
+  (2, 'New blog post: "Why your loading states are making users anxious" — skeleton screens vs spinners vs progress bars. Link in bio!', 51, 7, 19, '2025-03-20 11:30:00'),
+  (4, 'PSA: If you''re using pandas, try polars. It''s not just faster — the API is actually more intuitive once you get used to it.', 93, 15, 34, '2025-03-19 20:00:00'),
+  (3, 'Docker tip: multi-stage builds reduced our image size from 1.2GB to 180MB. Always worth the extra 5 minutes of setup.', 44, 6, 11, '2025-03-19 15:30:00'),
+  (1, 'Weekend project: built a CLI tool that generates commit messages from diffs using Claude. It''s surprisingly good at understanding context.', 112, 18, 28, '2025-03-18 09:15:00'),
+  (2, 'The best design feedback I ever got: "Can my grandma use this?" Simple but powerful heuristic. 👵', 76, 9, 22, '2025-03-17 14:00:00');
+
+-- Seed replies (parent_id references)
+INSERT INTO posts (user_id, content, parent_id, likes_count, created_at) VALUES
+  (2, 'Love the file-based routing approach! How does it handle dynamic params?', 1, 8, '2025-03-21 14:45:00'),
+  (3, 'Totally agree on TypeScript. The conditional types are mind-bending though 😅', 5, 12, '2025-03-20 16:35:00'),
+  (4, 'Multi-stage builds are a game changer. We use them everywhere now.', 8, 5, '2025-03-19 15:45:00');
+
+-- Seed notifications (for user 1 - sarah_dev)
+INSERT INTO notifications (user_id, type, actor_id, post_id, created_at) VALUES
+  (1, 'like', 2, 1, '2025-03-21 14:35:00'),
+  (1, 'reply', 2, 1, '2025-03-21 14:45:00'),
+  (1, 'follow', 3, NULL, '2025-03-21 13:00:00'),
+  (1, 'like', 4, 5, '2025-03-20 16:25:00'),
+  (1, 'reply', 3, 5, '2025-03-20 16:35:00');
+
+-- Seed trending
+INSERT INTO trending (hashtag, post_count) VALUES
+  ('#WebComponents', 1250),
+  ('#TypeScript', 3400),
+  ('#DevOps', 890);

package/templates/social/data/migrations/002_add_image_url.sql

@@ -0,0 +1 @@
+ALTER TABLE posts ADD COLUMN image_url TEXT NOT NULL DEFAULT '';

package/templates/social/data/migrations/003_auth.sql

@@ -0,0 +1,7 @@
+-- Add OAuth identity columns to users table
+ALTER TABLE users ADD COLUMN oauth_provider TEXT;
+ALTER TABLE users ADD COLUMN oauth_sub TEXT;
+ALTER TABLE users ADD COLUMN email TEXT;
+
+-- Prevent duplicate OAuth accounts
+CREATE UNIQUE INDEX IF NOT EXISTS idx_users_oauth_sub ON users(oauth_provider, oauth_sub);

package/templates/social/docs/architecture.md

@@ -0,0 +1,76 @@
+# Social Template — Architecture
+
+A social networking super app template for LumenJS, inspired by Twitter, LinkedIn, and dev.to.
+
+**Demo**: https://social.lumenjs.dev
+
+## Tech Stack
+
+- **LumenJS** — file-based routing, SSR with Lit SSR, server loaders, API routes
+- **Lit** — web components with Shadow DOM, reactive properties, CSS-in-JS
+- **SQLite** — mock data via migrations (seeded on first run)
+- **No frameworks** — pure Lit + native HTML elements, no Tailwind, no NuralyUI
+
+## Directory Structure
+
+```
+templates/social/
+├── lumenjs.config.ts          # App config (title only)
+├── package.json               # Template metadata
+├── data/
+│   └── migrations/
+│       └── 001_init.sql       # DB schema + seed data
+├── api/
+│   ├── posts.ts               # GET /api/posts, POST /api/posts
+│   ├── posts/[id].ts          # GET /api/posts/:id, DELETE
+│   └── profile/[username].ts  # GET /api/profile/:username
+├── pages/
+│   ├── _layout.ts             # App shell (sidebar, right panel, mobile nav, theming)
+│   ├── index.ts               # Feed with stories bar + widget cards
+│   ├── explore.ts             # Tags, suggested users, top posts
+│   ├── notifications.ts       # Notification list with type icons
+│   ├── messages.ts            # Conversations + chat detail
+│   ├── bookmarks.ts           # Saved posts list
+│   ├── settings.ts            # Settings with dark mode toggle
+│   ├── new.ts                 # New post composer
+│   ├── post/
+│   │   └── [id].ts            # Post detail with comments
+│   ├── profile/
+│   │   └── [username].ts      # User profile with posts
+│   └── apps/
+│       ├── index.ts           # App marketplace
+│       └── [id].ts            # Individual app view
+└── docs/                      # This documentation
+```
+
+## Pages & Routes
+
+| Route | File | Description |
+|-------|------|-------------|
+| `/` | `pages/index.ts` | Feed with stories, posts, widget cards |
+| `/explore` | `pages/explore.ts` | Tags, users, popular posts |
+| `/notifications` | `pages/notifications.ts` | Activity notifications |
+| `/messages` | `pages/messages.ts` | Chat conversations |
+| `/bookmarks` | `pages/bookmarks.ts` | Saved posts |
+| `/settings` | `pages/settings.ts` | Account & theme settings |
+| `/new` | `pages/new.ts` | Create new post |
+| `/post/:id` | `pages/post/[id].ts` | Single post with comments |
+| `/profile/:username` | `pages/profile/[username].ts` | User profile |
+| `/apps` | `pages/apps/index.ts` | App marketplace |
+| `/apps/:id` | `pages/apps/[id].ts` | Individual app |
+
+## Layout Architecture
+
+`_layout.ts` is the root layout wrapping all pages via `<slot>`.
+
+**Desktop** (>860px): icon sidebar (68px) + main content (600px max) + right sidebar (350px)
+**Tablet** (640-860px): sidebar + main content (right sidebar hidden)
+**Mobile** (<640px): mobile top bar + full-width content + bottom nav bar + more menu sheet
+
+## Theming
+
+Dark mode via CSS custom properties set on `document.documentElement`. Toggle in settings persists to `localStorage('theme')`. See `docs/theming.md`.
+
+## Data
+
+All data is mock — hardcoded in loaders and API handlers. SQLite migration seeds initial data. See `docs/data.md`.

package/templates/social/docs/components.md

@@ -0,0 +1,100 @@
+# Shared Patterns & Components
+
+## SVG Icon Library
+
+All icons are inline SVG in Lit `html` tagged templates. Style: feather icons (stroke, no fill, 1.5 stroke-width, 22x22 default).
+
+### Layout icons (`_layout.ts`)
+- `home` — house with chimney
+- `explore` — magnifying glass (search)
+- `bell` — notification bell
+- `message` — envelope
+- `user` — person silhouette
+- `search` — small magnifying glass (16x16)
+- `post` — pen/edit
+- `bookmark` — bookmark flag
+- `plus` — plus sign (24x24, 2 stroke-width)
+- `settings` — gear/cog
+
+### Feed icons (`index.ts`)
+- `comment` — chat bubble (17x17)
+- `repost` — circular arrows (17x17)
+- `heart` — heart outline (17x17)
+- `share` — upload/share arrow (17x17)
+
+### Post detail icons (`post/[id].ts`)
+- `heart`, `comment`, `bookmark` — 18x18 variants
+
+### Profile icon (`profile/[username].ts`)
+- `location` — map pin (14x14)
+- `briefcase` — work bag (14x14)
+- `calendar` — calendar grid (14x14)
+- Follow button: user-plus (18x18, 2 stroke-width)
+
+### Messages icons (`messages.ts`)
+- `send`, `image`, `smile`, `check`, `checkDouble`, `phone`, `video`, `info`, `attach`, `mic`, `search`
+
+### Notifications icons (`notifications.ts`)
+- `heart` — filled red (#e53935)
+- `comment` — filled blue (#3b49df)
+- `userPlus` — stroke green (#22c55e)
+
+### New post icons (`new.ts`)
+- `image`, `video`, `smile`, `mapPin`, `globe`, `close`
+
+### Settings icons (`settings.ts`)
+- `user`, `lock`, `bell`, `eye`, `palette`, `globe`, `shield`, `help`, `logout`, `chevron`
+
+## Post Card Pattern
+
+Used in feed, profile, and bookmarks:
+```
+<a class="post" href="/post/${id}">
+  <div class="post-avatar" style="background:${color}">
+    ${avatar ? <img> : initials}
+  </div>
+  <div class="post-body">
+    <div class="post-header">name + @handle + · + time</div>
+    <div class="post-content">text (3-line clamp)</div>
+    <div class="post-media">image or video (16:9)</div>
+    <div class="post-actions">comment + repost + heart + share</div>
+  </div>
+</a>
+```
+
+## Widget Card Pattern
+
+Used for poll, event, job in feed:
+```
+<div class="widget-card">
+  <div class="widget-header">
+    avatar + name + time + badge (Poll/Event/Job)
+  </div>
+  <div class="...">custom widget body</div>
+</div>
+```
+
+## Story Thumbnail
+
+```
+<div class="story">
+  <div class="story-ring">
+    <div class="story-avatar-wrap">
+      <div class="story-avatar"><img></div>
+      (optional: story-plus for "You")
+    </div>
+  </div>
+  <span class="story-name">Name</span>
+</div>
+```
+56x80px rounded rectangles with border. Click opens full-screen viewer.
+
+## Mobile Patterns
+
+**Bottom bar**: 5 items — Home, Explore, + (purple FAB), Messages, More (three dots)
+
+**More menu**: overlay + bottom sheet with drag handle + menu items (Profile, Bookmarks, Apps, Notifications, Settings)
+
+**Mobile top bar**: avatar + "Home" text (link to /) + spacer + settings gear + bell + message icons
+
+**Message mobile**: click conversation → `_showChat` state toggles `.chat-open` class → hides list, shows full-screen chat with back arrow

package/templates/social/docs/data.md

@@ -0,0 +1,89 @@
+# Mock Data & API Routes
+
+## Mock Users
+
+| Username | Display Name | Initials | Color | Avatar |
+|----------|-------------|----------|-------|--------|
+| `aymen` | Aymen Labidi | AL | `#7c3aed` | GitHub avatar (u/3775924) |
+| `alex_design` | Alex Rivera | AR | `#e44d26` | Initials |
+| `emma_data` | Emma Williams | EW | `#3572a5` | Initials |
+| `mike_ops` | Mike Johnson | MJ | `#22c55e` | Initials |
+| `lisa_pm` | Lisa Park | LP | `#a855f7` | Initials |
+| `tom_arch` | Tom Brooks | TB | `#ef4444` | Initials |
+| `nina_sec` | Nina Patel | NP | `#f59e0b` | Initials |
+
+"aymen" is the current user (shown in compose avatars, sidebar, settings).
+
+## Mock Posts (Feed)
+
+6 posts in `index.ts` loader with IDs 1-6. Posts 1, 3 have images, post 4 has video, post 6 has image. Content is long (multi-line, triggers "See more" on post 1).
+
+## Stories
+
+7 stories in `index.ts` loader. Each has an Unsplash image (400x700 crop) and caption. Displayed as rectangular thumbnails.
+
+## Feed Widgets
+
+3 widgets inserted between posts by `position`:
+- **Poll** (pos 2): "What framework do you use most in 2025?" — React 45%, LumenJS 35%, Vue 15%, Other 5% (142 votes)
+- **Event** (pos 4): "DevOps Meetup 2025" — Apr 5, 2025, Online/Zoom, 48 attending
+- **Job** (pos 6): DataFlow, Senior ML Engineer, Remote, $150k-$200k
+
+## Post Detail Data
+
+`post/[id].ts` has 6 posts (IDs 1-6) with full content, tags, dates, read times. Posts 1 and 5 have comment threads.
+
+## Messages Data
+
+5 conversations in `messages.ts` with full chat histories:
+1. Alex Rivera — LumenJS discussion (9 messages, 2 unread)
+2. Emma Williams — polars benchmarks (6 messages)
+3. Mike Johnson — CI pipeline (5 messages)
+4. Lisa Park — roadmap sync (3 messages, 1 unread)
+5. Tom Brooks — architecture diagram (2 messages)
+
+## Notifications
+
+5 notifications for user "aymen": 2 likes, 2 comments, 1 follow.
+
+## Apps Marketplace
+
+12 apps with categories:
+- Productivity: Calendar, Notes, Timer, Task Board
+- Social: Poll Creator
+- Entertainment: Weather, News Feed
+- Finance: Stock Tracker, Budget Tracker
+- Developer Tools: Translator, Code Snippets
+- Health: Step Counter
+
+3 apps have real UI: poll (form), calendar (grid), notes (list).
+
+## Database Schema (`001_init.sql`)
+
+```sql
+users (id, username, display_name, avatar_url, bio, cover_url, followers_count, following_count, created_at)
+posts (id, user_id, content, parent_id, likes_count, replies_count, shares_count, created_at)
+notifications (id, user_id, type, actor_id, post_id, read, created_at)
+trending (id, hashtag, post_count)
+```
+
+Seeded with 4 users, 10 posts + 3 replies, 5 notifications, 3 trending tags.
+
+## API Routes
+
+| Method | Route | Response |
+|--------|-------|----------|
+| GET | `/api/posts` | Array of posts (id, username, display_name, content, likes, replies, shares) |
+| POST | `/api/posts` | `{ ok: true, message: "Post created (mock)" }` |
+| GET | `/api/posts/:id` | Single post with replies array |
+| DELETE | `/api/posts/:id` | `{ ok: true, deleted: id }` |
+| GET | `/api/profile/:username` | User profile with posts array |
+
+All API routes return hardcoded mock data — not connected to SQLite. The migration exists for future use when persistence is implemented.
+
+## Adding New Mock Data
+
+1. Add to the `loader()` function in the relevant page file
+2. For new users: add to the `USERS` object in profile and post detail pages
+3. For new posts: add to both `index.ts` (feed) and `post/[id].ts` (detail) loaders
+4. For new apps: add to `apps/index.ts` loader + `APPS` object in `apps/[id].ts`