@nuraly/lumenjs 0.1.4 → 0.2.0

package/dist/storage/adapters/s3.js

@@ -61,16 +61,19 @@ export class S3StorageAdapter {
         const mimeType = options?.mimeType ?? 'application/octet-stream';
         const acl = options?.acl ?? 'public-read';
         const { s3, PutObjectCommand } = await this.getClient();
-        await s3.send(new PutObjectCommand({
+        const cmd = {
             Bucket: this.options.bucket,
             Key: key,
             Body: data,
             ContentType: mimeType,
-            ACL: acl,
             ...(options?.fileName
                 ? { ContentDisposition: `inline; filename="${options.fileName.replace(/[\r\n"\\]/g, '_')}"` }
                 : {}),
-        }));
+        };
+        // R2 and some S3-compatible APIs don't support ACL
+        if (!this.options.endpoint)
+            cmd.ACL = acl;
+        await s3.send(new PutObjectCommand(cmd));
         return {
             key,
             url: this.publicUrl(key),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuraly/lumenjs",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Full-stack Lit web component framework with file-based routing, server loaders, SSR, and API routes",
   "type": "module",
   "main": "dist/cli.js",
@@ -43,18 +43,20 @@
   "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"
+    "@aws-sdk/s3-request-presigner": "^3.0.0",
+    "better-sqlite3": "^12.8.0",
+    "codejar": "^4.2.0",
+    "otplib": "^12.0.0",
+    "pg": "^8.0.0",
+    "qrcode": "^1.5.0",
+    "socket.io": "^4.0.0",
+    "socket.io-client": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@aws-sdk/client-s3": {
@@ -62,12 +64,36 @@
     },
     "@aws-sdk/s3-request-presigner": {
       "optional": true
+    },
+    "better-sqlite3": {
+      "optional": true
+    },
+    "codejar": {
+      "optional": true
+    },
+    "pg": {
+      "optional": true
+    },
+    "socket.io": {
+      "optional": true
+    },
+    "socket.io-client": {
+      "optional": true
+    },
+    "otplib": {
+      "optional": true
+    },
+    "qrcode": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.13",
     "@types/node": "^20.14.2",
+    "@types/qrcode": "^1.5.6",
     "@vitest/coverage-v8": "^4.0.18",
+    "otplib": "^12.0.1",
+    "qrcode": "^1.5.4",
     "typescript": "^5.4.5",
     "vitest": "^4.0.18"
   },

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

@@ -1,14 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
--- 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

@@ -1,76 +0,0 @@
-# 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

@@ -1,100 +0,0 @@
-# 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

@@ -1,89 +0,0 @@
-# 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`

package/templates/social/docs/pages.md

@@ -1,96 +0,0 @@
-# Pages Reference
-
-## `_layout.ts` — App Shell
-
-Root layout wrapping all pages.
-
-**Desktop**: icon sidebar | main `<slot>` | right sidebar (weather, calendar, quick apps, trending)
-**Mobile**: top bar (avatar + "Home" + icons) | content | bottom nav (home, explore, +post, messages, more)
-
-Features:
-- Sidebar nav: Home, Explore, Notifications, Messages, Bookmarks, Apps, Profile, Settings
-- Right sidebar widgets: weather (Tunisia 24°), calendar (3 events), quick apps (4 icons), trending tags
-- Mobile "more" bottom sheet: Profile, Bookmarks, Apps, Notifications, Settings
-- Dark mode theming via CSS custom properties
-- Viewport meta override (no zoom on mobile)
-
-## `index.ts` — Feed (`/`)
-
-**Stories bar**: horizontal scrollable thumbnails (56x80px, rounded rect), "You" has + icon, images from Unsplash. Click opens full-screen story viewer with progress bars, auto-advance (5s), tap left/right to navigate.
-
-**Widget cards** mixed between posts:
-- **Poll** (position 2): question + 4 options with percentage bars + vote count
-- **Event** (position 4): title, date, location, attendees, "Interested" button
-- **Job** (position 6): company, role, location, salary, "Apply" button
-
-**Post cards**: avatar (image for aymen, initials for others) + name + @handle + time + content (3-line clamp, "See more" on first post) + media (image/video, 16:9 aspect ratio) + action bar (comment, repost, heart, share with SVG icons)
-
-Loader returns: `{ stories[], widgets[], posts[] }`
-
-## `post/[id].ts` — Post Detail (`/post/:id`)
-
-Full article view with larger text. Shows media (full-width, no padding). Tags, author meta, date + read time.
-
-Action bar: heart, comment, bookmark (SVG). Comment input below. Replies rendered as cards with avatar + name + content.
-
-6 mock posts with IDs 1-6. Posts 1, 3, 4, 6 have media.
-
-## `profile/[username].ts` — Profile (`/profile/:username`)
-
-No banner. Avatar + name + bio on same row, follow button (SVG user-plus icon) top-right.
-
-Meta: location (pin icon), work (briefcase icon), joined date (calendar icon).
-
-Posts list below. 4 mock users: aymen, alex_design, mike_ops, emma_data.
-
-Aymen uses GitHub avatar image, others use letter initials with brand colors.
-
-## `explore.ts` — Explore (`/explore`)
-
-Tag cards grid (colored top bar per tag), 8 tags. Top posts section with title links.
-
-## `notifications.ts` — Notifications (`/notifications`)
-
-List with avatar + type icon badge (heart=red, comment=blue, follow=green). 5 mock notifications.
-
-## `messages.ts` — Messages (`/messages`)
-
-Split view: conversation list (340px) + chat panel. Click conversation to switch. 5 conversations with full message histories.
-
-Chat features: message bubbles (purple=me, gray=them), small avatar on their messages, date separators, read receipts (single check=sent, double purple check=read), online indicators (green dot).
-
-Input: attach, image, emoji, mic buttons + text input + send button.
-
-Mobile: click conversation → full-screen chat with back arrow.
-
-## `bookmarks.ts` — Bookmarks (`/bookmarks`)
-
-Simple list with bookmark icon + title + author + saved time. 3 mock bookmarks.
-
-## `settings.ts` — Settings (`/settings`)
-
-Profile card (avatar + name + email + edit button).
-
-Sections:
-- Account: account info, password, privacy (menu items with chevron)
-- Preferences: dark mode (wired toggle), push notifications, email notifications, sound effects
-- More: accessibility, language, help center, log out (red)
-
-## `new.ts` — New Post (`/new`)
-
-Compose screen: close button + post button in header. Avatar + textarea. Visibility line ("Everyone can reply"). Tool bar: image, video, emoji, location + char counter (0/500).
-
-## `apps/index.ts` — App Marketplace (`/apps`)
-
-Search bar, 3 featured cards, category filter buttons (All + 6 categories, active state), app list (icon + name + desc + category + "Open" button). 12 mock apps.
-
-## `apps/[id].ts` — App Detail (`/apps/:id`)
-
-Header: large icon + name + description + "Open" + "Add to sidebar" buttons.
-
-Body: 3 apps have real UI:
-- **poll**: question input + option inputs + add option + settings
-- **calendar**: March 2025 grid with today highlighted + nav arrows
-- **notes**: note list with title/preview/date + new note button
-
-Other apps show placeholder.

package/templates/social/docs/theming.md

@@ -1,52 +0,0 @@
-# Theming & Dark Mode
-
-## How It Works
-
-1. `_layout.ts` defines two theme objects: `THEME_LIGHT` and `THEME_DARK`
-2. `applyTheme(dark)` sets CSS custom properties on `document.documentElement`
-3. On page load, reads `localStorage.getItem('theme')` and applies immediately
-4. `window.__nk_toggle_theme(dark)` exposed for the settings page to call
-5. All pages use `var(--xxx)` instead of hardcoded colors
-
-## CSS Custom Properties
-
-| Variable | Light | Dark | Usage |
-|----------|-------|------|-------|
-| `--bg` | `#fff` | `#15202b` | Page/card backgrounds |
-| `--bg-secondary` | `#f7f9f9` | `#1e2d3d` | Sidebar cards, secondary panels |
-| `--bg-hover` | `#fafafa` | `#1c2b3a` | Hover states |
-| `--border` | `#eff3f4` | `#38444d` | Primary borders |
-| `--border-light` | `#f0f0f0` | `#2f3b44` | Subtle dividers |
-| `--text` | `#0f1419` | `#e7e9ea` | Primary text |
-| `--text-secondary` | `#536471` | `#8b98a5` | Secondary text, handles |
-| `--text-tertiary` | `#a3a3a3` | `#6e767d` | Timestamps, counts |
-| `--accent` | `#7c3aed` | `#8b5cf6` | Purple accent (buttons, links) |
-| `--accent-hover` | `#6d28d9` | `#7c3aed` | Accent hover state |
-| `--input-bg` | `#eff3f4` | `#253341` | Input/search backgrounds |
-| `--card-bg` | `#f7f9f9` | `#1e2d3d` | Card backgrounds |
-| `--overlay` | `rgba(0,0,0,0.4)` | `rgba(0,0,0,0.7)` | Modal overlays |
-| `--backdrop` | `rgba(255,255,255,0.85)` | `rgba(21,32,43,0.85)` | Glassmorphism headers |
-
-## Persistence
-
-- Key: `localStorage.getItem('theme')`
-- Values: `'light'` (default) or `'dark'`
-- Applied before first render (runs at module scope in `_layout.ts`)
-
-## Settings Toggle
-
-In `pages/settings.ts`, the dark mode checkbox:
-```typescript
-<input type="checkbox"
-  .checked=${this._dark}
-  @change=${(e) => {
-    this._dark = e.target.checked;
-    window.__nk_toggle_theme?.(this._dark);
-  }}>
-```
-
-## Colors That Stay Fixed (Not Themed)
-
-Avatar brand colors are per-user and don't change with theme:
-- `#e44d26` (Alex), `#3572a5` (Emma), `#22c55e` (Mike), `#a855f7` (Lisa), `#ef4444` (Tom), `#f59e0b` (Nina)
-- White text on colored backgrounds (`color: #fff`) stays white in both themes