@nuraly/lumenjs 0.1.4 → 0.3.0

package/dist/shared/html-to-markdown.js

@@ -0,0 +1,73 @@
+/**
+ * Convert simple HTML to markdown.
+ * Handles the subset of HTML that Lit SSR produces for LumenJS pages.
+ * Not a full HTML parser — intentionally minimal.
+ */
+export function htmlToMarkdown(html) {
+    let md = html;
+    // Extract content from declarative shadow DOM (<template shadowroot="open">...</template>)
+    md = md.replace(/<template\s+shadowroot(?:mode)?="open"[^>]*>([\s\S]*?)<\/template>/gi, '$1');
+    // Remove script/style tags and their content
+    md = md.replace(/<script[\s\S]*?<\/script>/gi, '');
+    md = md.replace(/<style[\s\S]*?<\/style>/gi, '');
+    md = md.replace(/<template[\s\S]*?<\/template>/gi, '');
+    // Remove Lit SSR markers (<!--lit-part-->, <!--/lit-part-->, etc.)
+    md = md.replace(/<!--[\s\S]*?-->/g, '');
+    // Headings
+    md = md.replace(/<h1[^>]*>([\s\S]*?)<\/h1>/gi, (_, c) => `# ${strip(c)}\n\n`);
+    md = md.replace(/<h2[^>]*>([\s\S]*?)<\/h2>/gi, (_, c) => `## ${strip(c)}\n\n`);
+    md = md.replace(/<h3[^>]*>([\s\S]*?)<\/h3>/gi, (_, c) => `### ${strip(c)}\n\n`);
+    md = md.replace(/<h4[^>]*>([\s\S]*?)<\/h4>/gi, (_, c) => `#### ${strip(c)}\n\n`);
+    // Links
+    md = md.replace(/<a[^>]*href="([^"]*)"[^>]*>([\s\S]*?)<\/a>/gi, (_, href, text) => `[${strip(text)}](${href})`);
+    // Bold / italic
+    md = md.replace(/<(strong|b)[^>]*>([\s\S]*?)<\/\1>/gi, (_, __, c) => `**${strip(c)}**`);
+    md = md.replace(/<(em|i)[^>]*>([\s\S]*?)<\/\1>/gi, (_, __, c) => `*${strip(c)}*`);
+    // Inline code
+    md = md.replace(/<code[^>]*>([\s\S]*?)<\/code>/gi, (_, c) => `\`${strip(c)}\``);
+    // Code blocks (pre > code or pre alone)
+    md = md.replace(/<pre[^>]*>\s*<code[^>]*>([\s\S]*?)<\/code>\s*<\/pre>/gi, (_, c) => `\n\`\`\`\n${decodeEntities(strip(c))}\n\`\`\`\n\n`);
+    md = md.replace(/<pre[^>]*>([\s\S]*?)<\/pre>/gi, (_, c) => `\n\`\`\`\n${decodeEntities(strip(c))}\n\`\`\`\n\n`);
+    // List items
+    md = md.replace(/<li[^>]*>([\s\S]*?)<\/li>/gi, (_, c) => `- ${strip(c).trim()}\n`);
+    // Table → simple text rows
+    md = md.replace(/<tr[^>]*>([\s\S]*?)<\/tr>/gi, (_, c) => {
+        const cells = [...c.matchAll(/<t[hd][^>]*>([\s\S]*?)<\/t[hd]>/gi)].map((m) => strip(m[1]).trim());
+        return cells.length > 0 ? `| ${cells.join(' | ')} |\n` : '';
+    });
+    // Paragraphs and divs → newlines
+    md = md.replace(/<\/p>/gi, '\n\n');
+    md = md.replace(/<br\s*\/?>/gi, '\n');
+    md = md.replace(/<\/div>/gi, '\n');
+    // Images
+    md = md.replace(/<img[^>]*alt="([^"]*)"[^>]*>/gi, (_, alt) => alt ? `[${alt}]` : '');
+    md = md.replace(/<img[^>]*>/gi, '');
+    // Strip all remaining HTML tags
+    md = md.replace(/<[^>]+>/g, '');
+    // Decode HTML entities
+    md = decodeEntities(md);
+    // Clean up whitespace
+    md = md.replace(/\n{3,}/g, '\n\n');
+    md = md.trim();
+    return md + '\n';
+}
+/** Strip HTML tags from a string. */
+function strip(html) {
+    return html.replace(/<[^>]+>/g, '').trim();
+}
+/** Decode common HTML entities. */
+function decodeEntities(text) {
+    return text
+        .replace(/&amp;/g, '&')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'")
+        .replace(/&rarr;/g, '→')
+        .replace(/&larr;/g, '←')
+        .replace(/&middot;/g, '·')
+        .replace(/&copy;/g, '©')
+        .replace(/\\u003c/g, '<')
+        .replace(/&#x27;/g, "'")
+        .replace(/&nbsp;/g, ' ');
+}

package/dist/shared/types.d.ts

@@ -9,6 +9,7 @@ export interface ManifestRoute {
     module: string;
     hasLoader: boolean;
     hasSubscribe: boolean;
+    hasSocket?: boolean;
     hasAuth?: boolean;
     hasMeta?: boolean;
     authRoles?: string[];

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.3.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/blog/pages/index.ts

@@ -33,8 +33,8 @@ export async function loader() {
 }
 
 export class PageIndex extends LitElement {
-  static properties = { loaderData: { type: Object } };
-  loaderData: any = {};
+  static properties = { posts: { type: Array } };
+  posts: any[] = [];
 
   static styles = css`
     :host { display: block; }
@@ -49,7 +49,7 @@ export class PageIndex extends LitElement {
   `;
 
   render() {
-    const posts = this.loaderData.posts || [];
+    const posts = this.posts || [];
     return html`
       <h1>Blog</h1>
       <p class="subtitle">Thoughts and tutorials</p>

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

@@ -29,8 +29,19 @@ export async function loader({ params }: { params: { slug: string } }) {
 }
 
 export class PagePost extends LitElement {
-  static properties = { loaderData: { type: Object }, slug: { type: String } };
-  loaderData: any = {};
+  static properties = {
+    title: { type: String },
+    date: { type: String },
+    content: { type: String },
+    readingTime: { type: Number },
+    notFound: { type: Boolean },
+    slug: { type: String },
+  };
+  title = '';
+  date = '';
+  content = '';
+  readingTime = 0;
+  notFound = false;
   slug = '';
 
   static styles = css`
@@ -44,7 +55,7 @@ export class PagePost extends LitElement {
   `;
 
   render() {
-    if (this.loaderData.notFound) {
+    if (this.notFound) {
       return html`
         <a class="back" href="/posts">← Back to posts</a>
         <p class="not-found">Post not found.</p>
@@ -52,9 +63,9 @@ export class PagePost extends LitElement {
     }
     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>
+      <h1>${this.title}</h1>
+      <div class="date">${this.date} · ${this.readingTime} min read</div>
+      <p class="content">${this.content}</p>
     `;
   }
 }

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

@@ -11,8 +11,9 @@ export async function loader({ params }: { params: { tag: string } }) {
 }
 
 export class PageTag extends LitElement {
-  static properties = { loaderData: { type: Object } };
-  loaderData: any = {};
+  static properties = { tag: { type: String }, posts: { type: Array } };
+  tag = '';
+  posts: any[] = [];
 
   static styles = css`
     :host { display: block; }
@@ -28,12 +29,11 @@ export class PageTag extends LitElement {
   `;
 
   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`
+      <h1>Tagged: ${this.tag}</h1>
+      <p class="subtitle">${this.posts?.length || 0} post${this.posts?.length !== 1 ? 's' : ''}</p>
+      ${(this.posts || []).map((p: any) => html`
         <div class="post">
           <a href="/posts/${p.slug}">${p.title}</a>
           <div class="meta">${p.date}</div>

package/templates/dashboard/pages/index.ts

@@ -31,11 +31,11 @@ export function subscribe({ push }: { push: (data: any) => void }) {
 
 export class PageIndex extends LitElement {
   static properties = {
-    loaderData: { type: Object },
-    liveData: { type: Object },
+    stats: { type: Array },
+    updatedAt: { type: String },
   };
-  loaderData: any = {};
-  liveData: any = null;
+  stats: any[] = [];
+  updatedAt = '';
 
   static styles = css`
     :host { display: block; }
@@ -50,8 +50,8 @@ export class PageIndex extends LitElement {
   `;
 
   render() {
-    const stats = this.liveData?.stats || this.loaderData.stats || [];
-    const isLive = !!this.liveData;
+    const stats = this.stats || [];
+    const isLive = !!this.updatedAt;
     return html`
       <h1>Overview</h1>
       <div class="grid">
@@ -64,7 +64,7 @@ export class PageIndex extends LitElement {
       </div>
       ${isLive ? html`
         <div class="status">
-          <span class="dot"></span>Live — updated ${this.liveData.updatedAt ? new Date(this.liveData.updatedAt).toLocaleTimeString() : ''}
+          <span class="dot"></span>Live — updated ${this.updatedAt ? new Date(this.updatedAt).toLocaleTimeString() : ''}
         </div>
       ` : ''}
     `;

package/templates/default/pages/index.ts

@@ -5,8 +5,8 @@ export async function loader() {
 }
 
 export class PageIndex extends LitElement {
-  static properties = { loaderData: { type: Object } };
-  loaderData: any = {};
+  static properties = { title: { type: String } };
+  title = '';
 
   static styles = css`
     :host { display: block; max-width: 640px; margin: 0 auto; padding: 2rem; font-family: system-ui; }
@@ -17,7 +17,7 @@ export class PageIndex extends LitElement {
 
   render() {
     return html`
-      <h1>${this.loaderData.title}</h1>
+      <h1>${this.title}</h1>
       <p>Edit <code>pages/index.ts</code> to get started.</p>
     `;
   }

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