@nuraly/lumenjs 0.1.2 → 0.1.4

package/templates/social/lib/media.ts

@@ -0,0 +1,130 @@
+import os from 'os';
+import path from 'path';
+import fs from 'fs';
+import crypto from 'crypto';
+
+export interface CompressOptions {
+  /** Max width in pixels for images. Default: 1920 */
+  maxWidth?: number;
+  /** JPEG quality 1–100. Default: 82 */
+  quality?: number;
+  /** Audio bitrate. Default: '128k' */
+  audioBitrate?: string;
+}
+
+export interface CompressResult {
+  data: Buffer;
+  mimeType: string;
+  /** File extension including dot, e.g. '.jpg' or '.aac' */
+  ext: string;
+}
+
+// ── Image ────────────────────────────────────────────────────────────────────
+
+async function compressImage(data: Buffer, mimeType: string, opts: CompressOptions): Promise<CompressResult> {
+  // GIF: skip — compressing would break animation
+  if (mimeType === 'image/gif') return { data, mimeType, ext: '.gif' };
+
+  let sharp: any;
+  try {
+    const mod = await import('sharp' as string);
+    sharp = mod.default ?? mod;
+  } catch {
+    throw new Error(
+      '[LumenJS:Media] sharp is required for image compression. ' +
+      'Install with: npm install sharp',
+    );
+  }
+
+  const compressed = await sharp(data)
+    .resize({ width: opts.maxWidth ?? 1920, withoutEnlargement: true })
+    .jpeg({ quality: opts.quality ?? 82 })
+    .toBuffer();
+
+  return { data: compressed, mimeType: 'image/jpeg', ext: '.jpg' };
+}
+
+// ── Audio ────────────────────────────────────────────────────────────────────
+
+const AUDIO_INPUT_EXT: Record<string, string> = {
+  'audio/mpeg': '.mp3',
+  'audio/mp3': '.mp3',
+  'audio/mp4': '.m4a',
+  'audio/aac': '.aac',
+  'audio/ogg': '.ogg',
+  'audio/wav': '.wav',
+  'audio/webm': '.webm',
+  'audio/flac': '.flac',
+  'audio/x-flac': '.flac',
+};
+
+async function compressAudio(data: Buffer, mimeType: string, opts: CompressOptions): Promise<CompressResult> {
+  // Already AAC at target bitrate — skip re-encoding
+  if (mimeType === 'audio/aac') return { data, mimeType, ext: '.aac' };
+
+  let ffmpeg: any;
+  try {
+    const [ffmpegMod, installerMod] = await Promise.all([
+      import('fluent-ffmpeg' as string),
+      import('@ffmpeg-installer/ffmpeg' as string),
+    ]);
+    ffmpeg = ffmpegMod.default ?? ffmpegMod;
+    ffmpeg.setFfmpegPath((installerMod.default ?? installerMod).path);
+  } catch {
+    throw new Error(
+      '[LumenJS:Media] fluent-ffmpeg and @ffmpeg-installer/ffmpeg are required for audio compression. ' +
+      'Install with: npm install fluent-ffmpeg @ffmpeg-installer/ffmpeg',
+    );
+  }
+
+  const inExt = AUDIO_INPUT_EXT[mimeType] ?? '.bin';
+  const tmpIn = path.join(os.tmpdir(), `nk-audio-in-${crypto.randomUUID()}${inExt}`);
+  const tmpOut = path.join(os.tmpdir(), `nk-audio-out-${crypto.randomUUID()}.aac`);
+
+  try {
+    fs.writeFileSync(tmpIn, data);
+    await new Promise<void>((resolve, reject) => {
+      ffmpeg(tmpIn)
+        .noVideo()
+        .audioCodec('aac')
+        .audioBitrate(opts.audioBitrate ?? '128k')
+        .on('error', reject)
+        .on('end', resolve)
+        .save(tmpOut);
+    });
+    return { data: fs.readFileSync(tmpOut), mimeType: 'audio/aac', ext: '.aac' };
+  } finally {
+    fs.rmSync(tmpIn, { force: true });
+    fs.rmSync(tmpOut, { force: true });
+  }
+}
+
+// ── Public API ───────────────────────────────────────────────────────────────
+
+/**
+ * Compress a media buffer before storing.
+ *
+ * - Images (JPEG, PNG, WebP) → JPEG, max 1920px wide, quality 82
+ * - GIF → pass-through (preserves animation)
+ * - Audio → AAC 128k via ffmpeg
+ * - Everything else (video, PDF, binary) → pass-through
+ *
+ * Uses lazy dynamic imports so sharp/ffmpeg are only required if you
+ * actually upload that media type.
+ *
+ * @example
+ * 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 });
+ */
+export async function compress(
+  data: Buffer,
+  mimeType: string,
+  options: CompressOptions = {},
+): Promise<CompressResult> {
+  if (mimeType.startsWith('image/')) return compressImage(data, mimeType, options);
+  if (mimeType.startsWith('audio/')) return compressAudio(data, mimeType, options);
+  // video, PDF, binary — store as-is
+  const ext = path.extname(mimeType.split('/')[1] ?? '') || '';
+  return { data, mimeType, ext: ext ? `.${ext}` : '' };
+}

package/templates/social/lumenjs.auth.ts

@@ -0,0 +1,21 @@
+import { googleProvider } from '@nuraly/lumenjs/dist/auth/index.js';
+
+export default {
+  providers: [
+    googleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID!,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
+    }),
+  ],
+  session: {
+    secret: process.env.SESSION_SECRET ?? 'dev-secret-change-in-production',
+    cookieName: 'social-session',
+    maxAge: 60 * 60 * 24 * 7, // 7 days
+    secure: process.env.NODE_ENV === 'production',
+  },
+  routes: {
+    loginPage: '/auth/login',
+    postLogin: '/',
+    postLogout: '/auth/login',
+  },
+};

package/templates/social/lumenjs.config.ts

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

package/templates/social/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "type": "module"
+}

package/templates/social/pages/_layout.ts

@@ -0,0 +1,239 @@
+import { LitElement, html, css } from 'lit';
+
+const svg = {
+  home: html`<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>`,
+  explore: html`<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`,
+  bell: html`<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>`,
+  message: html`<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>`,
+  user: html`<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`,
+  search: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`,
+  post: html`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>`,
+  bookmark: html`<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>`,
+  plus: html`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>`,
+  settings: html`<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>`,
+};
+
+const THEME_LIGHT = {
+  '--bg': '#fff', '--bg-secondary': '#f7f9f9', '--bg-hover': '#fafafa',
+  '--border': '#eff3f4', '--border-light': '#f0f0f0',
+  '--text': '#0f1419', '--text-secondary': '#536471', '--text-tertiary': '#a3a3a3',
+  '--accent': '#7c3aed', '--accent-hover': '#6d28d9',
+  '--input-bg': '#eff3f4', '--card-bg': '#f7f9f9',
+  '--overlay': 'rgba(0,0,0,0.4)', '--backdrop': 'rgba(255,255,255,0.85)',
+};
+
+const THEME_DARK = {
+  '--bg': '#15202b', '--bg-secondary': '#1e2d3d', '--bg-hover': '#1c2b3a',
+  '--border': '#38444d', '--border-light': '#2f3b44',
+  '--text': '#e7e9ea', '--text-secondary': '#8b98a5', '--text-tertiary': '#6e767d',
+  '--accent': '#8b5cf6', '--accent-hover': '#7c3aed',
+  '--input-bg': '#253341', '--card-bg': '#1e2d3d',
+  '--overlay': 'rgba(0,0,0,0.7)', '--backdrop': 'rgba(21,32,43,0.85)',
+};
+
+function applyTheme(dark: boolean) {
+  const theme = dark ? THEME_DARK : THEME_LIGHT;
+  const root = document.documentElement;
+  for (const [k, v] of Object.entries(theme)) root.style.setProperty(k, v);
+  root.style.setProperty('color-scheme', dark ? 'dark' : 'light');
+  document.body.style.background = theme['--bg'];
+}
+
+// Apply saved theme immediately (before render)
+applyTheme(typeof localStorage !== 'undefined' && localStorage.getItem('theme') === 'dark');
+
+// Expose toggle for settings page
+(window as any).__nk_toggle_theme = (dark: boolean) => {
+  localStorage.setItem('theme', dark ? 'dark' : 'light');
+  applyTheme(dark);
+};
+
+export class LayoutRoot extends LitElement {
+
+  static styles = css`
+    :host { display: block; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--text); background: var(--bg); font-size: 15px; touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; }
+
+    .shell { display: flex; max-width: 1000px; margin: 0 auto; min-height: 100vh; }
+
+    .sidebar { width: 68px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; padding: 12px 0; }
+    .sidebar .logo { font-weight: 900; font-size: 22px; color: var(--text); text-decoration: none; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; }
+    .sidebar a, .sidebar button { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); text-decoration: none; border: none; background: none; cursor: pointer; margin: 2px 0; position: relative; }
+    .sidebar a:hover, .sidebar button:hover { background: var(--input-bg); color: var(--text); }
+    .sidebar a[title]:hover::after { content: attr(title); position: absolute; left: 54px; top: 50%; transform: translateY(-50%); background: var(--text); color: var(--bg); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 100; }
+    .sidebar .avatar { width: 34px; height: 34px; border-radius: 50%; background: #0f1419; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; margin-top: auto; margin-bottom: 8px; }
+    .sidebar .post-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-top: 12px; }
+    .sidebar .post-btn:hover { background: var(--accent-hover); }
+
+    .main { flex: 1; min-width: 0; border-right: 1px solid var(--border); }
+
+    .right { width: 220px; flex-shrink: 0; padding: 10px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; font-size: 13px; display: none; }
+    .shell.show-right .right { display: block; }
+    .search-wrap { position: relative; margin-bottom: 16px; }
+    .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); display: flex; }
+    .search { width: 100%; padding: 10px 12px 10px 36px; border: 1px solid var(--border); border-radius: 9999px; font-size: 14px; outline: none; background: var(--input-bg); }
+    .search:focus { border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 1px #7c3aed; }
+    .right-card { background: var(--bg-secondary); border-radius: 16px; margin-bottom: 16px; overflow: hidden; }
+    .right-card h3 { font-size: 15px; font-weight: 800; padding: 10px 12px; margin: 0; }
+    .trend { padding: 8px 12px; cursor: pointer; }
+    .trend:hover { background: var(--input-bg); }
+    .trend-label { font-size: 12px; color: var(--text-secondary); }
+    .trend-name { font-size: 15px; font-weight: 700; margin-top: 1px; }
+    .trend-count { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
+    .who-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
+    .who-item:hover { background: var(--input-bg); }
+    .who-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; flex-shrink: 0; }
+    .who-info { flex: 1; min-width: 0; }
+    .who-name { font-size: 14px; font-weight: 700; }
+    .who-handle { font-size: 13px; color: var(--text-secondary); }
+    .follow-btn { padding: 5px 14px; border-radius: 9999px; background: #0f1419; color: #fff; border: none; font-size: 13px; font-weight: 700; cursor: pointer; }
+    .follow-btn:hover { opacity: 0.85; }
+    .show-more { display: block; padding: 10px 12px; color: var(--accent); font-size: 13px; text-decoration: none; }
+    .show-more:hover { background: var(--input-bg); }
+
+    /* Weather widget */
+    .widget-weather { padding: 16px; }
+    .w-header { display: flex; justify-content: space-between; align-items: baseline; }
+    .w-city { font-size: 15px; font-weight: 700; }
+    .w-temp { font-size: 28px; font-weight: 800; color: var(--text); }
+    .w-desc { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
+    .w-forecast { display: flex; gap: 0; margin-top: 12px; }
+    .w-day { flex: 1; text-align: center; padding: 6px 0; }
+    .w-label { display: block; font-size: 12px; color: var(--text-secondary); }
+    .w-val { display: block; font-size: 14px; font-weight: 600; margin-top: 2px; }
+
+    /* Calendar widget */
+    .widget-calendar h3 { font-size: 15px; font-weight: 700; }
+    .cal-event { display: flex; gap: 10px; padding: 8px 16px; font-size: 13px; }
+    .cal-time { color: var(--text-secondary); font-weight: 600; width: 40px; flex-shrink: 0; }
+    .cal-name { color: var(--text); }
+
+    /* Quick apps widget */
+    .widget-apps h3 { font-size: 15px; font-weight: 700; }
+    .qapps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px 16px 8px; }
+    .qapp { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 8px; color: var(--text-secondary); text-decoration: none; font-size: 11px; }
+    .qapp:hover { background: var(--input-bg); color: var(--text); }
+    .show-more:hover { background: var(--input-bg); }
+
+    /* Mobile top bar + bottom nav */
+    .mobile-top { display: none; }
+    .mobile-bar { display: none; }
+    @media (max-width: 860px) { .right { display: none; } }
+    @media (max-width: 640px) {
+      .sidebar { display: none; }
+      .mobile-top { display: flex; position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px 16px; align-items: center; gap: 12px; }
+      .mobile-top .m-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
+      .mobile-top .m-title { font-weight: 800; font-size: 18px; color: var(--text); }
+      .mobile-top .m-spacer { flex: 1; }
+      .mobile-top .m-icon { color: var(--text-secondary); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; text-decoration: none; }
+      .mobile-top .m-icon:hover { background: var(--input-bg); color: var(--text); }
+      .mobile-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--bg); border-top: 1px solid var(--border); height: 50px; align-items: center; justify-content: space-around; }
+      .mobile-bar a { color: var(--text-secondary); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; text-decoration: none; }
+      .mobile-bar a:hover { background: var(--input-bg); color: var(--text); }
+      .mobile-bar .post-fab { width: 42px; height: 42px; background: var(--accent); color: #fff; border-radius: 50%; }
+      .mobile-bar .post-fab:hover { background: var(--accent-hover); }
+      .mobile-bar .more-btn { width: 44px; height: 44px; border: none; background: none; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
+      .mobile-bar .more-btn:hover { background: var(--input-bg); color: var(--text); }
+
+      /* More menu overlay */
+      .more-menu { display: none; }
+      .more-menu.open { display: flex; position: fixed; inset: 0; z-index: 100; background: var(--overlay); align-items: flex-end; justify-content: center; }
+      .more-sheet { background: var(--bg); border-radius: 16px 16px 0 0; width: 100%; max-width: 480px; padding: 8px 0 20px; }
+      .more-handle { width: 36px; height: 4px; border-radius: 2px; background: #d0d0d0; margin: 0 auto 12px; }
+      .more-item { display: flex; align-items: center; gap: 14px; padding: 14px 24px; color: var(--text); text-decoration: none; font-size: 16px; font-weight: 500; }
+      .more-item:hover { background: var(--bg-secondary); }
+      .more-item svg { color: var(--text-secondary); }
+      .main { padding-bottom: 56px; }
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    const vp = document.querySelector('meta[name="viewport"]');
+    if (vp) vp.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
+  }
+
+  render() {
+    return html`
+      <div class="mobile-top">
+        <a href="/" style="display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit">
+          <img class="m-avatar" src="https://avatars.githubusercontent.com/u/3775924?v=4" alt="A">
+          <span class="m-title">Home</span>
+        </a>
+        <div class="m-spacer"></div>
+        <a class="m-icon" href="/settings">${svg.settings}</a>
+        <a class="m-icon" href="/notifications">${svg.bell}</a>
+        <a class="m-icon" href="/messages">${svg.message}</a>
+      </div>
+      <div class="shell">
+        <nav class="sidebar">
+          <a class="logo" href="/">N</a>
+          <a href="/" title="Home">${svg.home}</a>
+          <a href="/explore" title="Explore">${svg.explore}</a>
+          <a href="/notifications" title="Notifications">${svg.bell}</a>
+          <a href="/messages" title="Messages">${svg.message}</a>
+          <a href="/bookmarks" title="Bookmarks">${svg.bookmark}</a>
+          <a href="/apps" title="Apps">${svg.explore}</a>
+          <a href="/profile/aymen" title="Profile">${svg.user}</a>
+          <a href="/settings" title="Settings">${svg.settings}</a>
+          <img class="avatar" src="https://avatars.githubusercontent.com/u/3775924?v=4" alt="A">
+        </nav>
+        <main class="main"><slot></slot></main>
+        <aside class="right">
+          <div class="search-wrap">
+            <span class="search-icon">${svg.search}</span>
+            <input class="search" type="text" placeholder="Search">
+          </div>
+          <div class="right-card widget-weather">
+            <div class="w-header"><span class="w-city">Tunisia</span><span class="w-temp">24°</span></div>
+            <div class="w-desc">Sunny</div>
+            <div class="w-forecast">
+              <div class="w-day"><span class="w-label">Mon</span><span class="w-val">22°</span></div>
+              <div class="w-day"><span class="w-label">Tue</span><span class="w-val">25°</span></div>
+              <div class="w-day"><span class="w-label">Wed</span><span class="w-val">23°</span></div>
+              <div class="w-day"><span class="w-label">Thu</span><span class="w-val">26°</span></div>
+            </div>
+          </div>
+          <div class="right-card widget-calendar">
+            <h3>Today, Mar 22</h3>
+            <div class="cal-event"><span class="cal-time">10:00</span><span class="cal-name">Team standup</span></div>
+            <div class="cal-event"><span class="cal-time">14:00</span><span class="cal-name">Design review</span></div>
+            <div class="cal-event"><span class="cal-time">16:30</span><span class="cal-name">Deploy v2.1</span></div>
+          </div>
+          <div class="right-card widget-apps">
+            <h3>Quick Apps</h3>
+            <div class="qapps-grid">
+              <a class="qapp" href="/apps/notes"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg><span>Notes</span></a>
+              <a class="qapp" href="/apps/poll"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg><span>Polls</span></a>
+              <a class="qapp" href="/apps/calendar"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg><span>Calendar</span></a>
+              <a class="qapp" href="/apps/timer"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg><span>Timer</span></a>
+            </div>
+            <a class="show-more" href="/apps">All apps</a>
+          </div>
+          <div class="right-card">
+            <h3>Trending</h3>
+            <div class="trend"><div class="trend-name">#WebComponents</div><div class="trend-count">1,250 posts</div></div>
+            <div class="trend"><div class="trend-name">#TypeScript</div><div class="trend-count">3,400 posts</div></div>
+            <div class="trend"><div class="trend-name">#DevOps</div><div class="trend-count">890 posts</div></div>
+          </div>
+        </aside>
+      </div>
+      <nav class="mobile-bar">
+        <a href="/">${svg.home}</a>
+        <a href="/explore">${svg.explore}</a>
+        <a class="post-fab" href="/new">${svg.plus}</a>
+        <a href="/messages">${svg.message}</a>
+        <button class="more-btn" @click=${() => { const m = this.shadowRoot?.querySelector('.more-menu') as HTMLElement; if (m) m.classList.toggle('open'); }}><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
+      </nav>
+      <div class="more-menu" @click=${(e: Event) => { (e.currentTarget as HTMLElement).classList.remove('open'); }}>
+        <div class="more-sheet" @click=${(e: Event) => e.stopPropagation()}>
+          <div class="more-handle"></div>
+          <a class="more-item" href="/profile/aymen">${svg.user} <span>Profile</span></a>
+          <a class="more-item" href="/bookmarks">${svg.bookmark} <span>Bookmarks</span></a>
+          <a class="more-item" href="/apps">${svg.explore} <span>Apps</span></a>
+          <a class="more-item" href="/notifications">${svg.bell} <span>Notifications</span></a>
+          <a class="more-item" href="/settings">${svg.settings} <span>Settings</span></a>
+        </div>
+      </div>
+    `;
+  }
+}

package/templates/social/pages/apps/[id].ts

@@ -0,0 +1,173 @@
+import { LitElement, html, css } from 'lit';
+
+const APPS: Record<string, any> = {
+  poll: { name: 'Poll Creator', desc: 'Create polls and surveys for your community feed.', color: '#7c3aed', type: 'poll' },
+  calendar: { name: 'Mini Calendar', desc: 'Track events, meetings, and deadlines at a glance.', color: '#3b49df', type: 'calendar' },
+  notes: { name: 'Quick Notes', desc: 'Markdown notes that sync across devices. Simple, fast, distraction-free.', color: '#22c55e', type: 'notes' },
+  timer: { name: 'Focus Timer', desc: 'Pomodoro timer for deep work sessions.', color: '#ef4444', type: 'timer' },
+  weather: { name: 'Weather', desc: 'Local weather and 7-day forecasts.', color: '#f59e0b', type: 'generic' },
+  stocks: { name: 'Stock Tracker', desc: 'Watch your portfolio in real-time.', color: '#10b981', type: 'generic' },
+  news: { name: 'News Feed', desc: 'Curated tech news from top sources.', color: '#6366f1', type: 'generic' },
+  tasks: { name: 'Task Board', desc: 'Kanban-style task management.', color: '#8b5cf6', type: 'generic' },
+  translate: { name: 'Translator', desc: 'Translate text between 50+ languages.', color: '#06b6d4', type: 'generic' },
+  code: { name: 'Code Snippets', desc: 'Save and share code snippets with syntax highlighting.', color: '#0f172a', type: 'generic' },
+  fitness: { name: 'Step Counter', desc: 'Track daily steps and activity goals.', color: '#ec4899', type: 'generic' },
+  budget: { name: 'Budget Tracker', desc: 'Track expenses and income with categories.', color: '#14b8a6', type: 'generic' },
+};
+
+export async function loader({ params }: { params: { id: string } }) {
+  const app = APPS[params.id];
+  if (!app) return { notFound: true };
+  return { ...app, id: params.id };
+}
+
+export class PageApp extends LitElement {
+  static properties = { loaderData: { type: Object } };
+  loaderData: any = {};
+
+  static styles = css`
+    :host { display: block; }
+    .card { background: var(--bg); border-radius: 6px; border: 1px solid var(--border); overflow: hidden; margin-bottom: 12px; }
+
+    .app-header { display: flex; gap: 14px; padding: 20px; align-items: flex-start; border-bottom: 1px solid var(--border-light); }
+    .app-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; font-weight: 800; flex-shrink: 0; }
+    .app-info { flex: 1; }
+    .app-name { font-size: 20px; font-weight: 800; }
+    .app-desc { font-size: 14px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
+    .app-actions { display: flex; gap: 8px; margin-top: 10px; }
+    .btn-open { padding: 7px 20px; border-radius: 9999px; background: var(--accent); color: #fff; border: none; font-size: 14px; font-weight: 600; cursor: pointer; }
+    .btn-open:hover { background: var(--accent-hover); }
+    .btn-add { padding: 7px 20px; border-radius: 9999px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; }
+    .btn-add:hover { background: var(--bg-secondary); }
+
+    .app-body { padding: 20px; min-height: 300px; }
+
+    /* Poll app mock */
+    .poll-create { padding: 0; }
+    .poll-create input { width: 100%; padding: 10px 0; border: none; border-bottom: 1px solid var(--border); font-size: 16px; font-weight: 600; outline: none; margin-bottom: 8px; }
+    .poll-create input::placeholder { color: var(--text-tertiary); }
+    .poll-option-input { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
+    .poll-option-input input { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; outline: none; }
+    .poll-option-input input:focus { border-color: var(--accent); }
+    .poll-num { font-size: 12px; color: var(--text-tertiary); width: 20px; }
+    .add-option { color: var(--accent); font-size: 14px; font-weight: 600; border: none; background: none; cursor: pointer; padding: 4px 0; }
+    .poll-settings { display: flex; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-secondary); }
+
+    /* Calendar app mock */
+    .cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+    .cal-month { font-size: 18px; font-weight: 700; }
+    .cal-nav { display: flex; gap: 4px; }
+    .cal-nav button { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
+    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
+    .cal-dow { font-size: 11px; color: var(--text-tertiary); font-weight: 600; padding: 4px; }
+    .cal-day { font-size: 13px; padding: 8px 4px; border-radius: 6px; cursor: pointer; }
+    .cal-day:hover { background: var(--input-bg); }
+    .cal-day.today { background: var(--accent); color: #fff; font-weight: 700; border-radius: 50%; }
+    .cal-day.empty { visibility: hidden; }
+
+    /* Notes app mock */
+    .notes-list { display: flex; flex-direction: column; gap: 8px; }
+    .note-item { border: 1px solid var(--border); border-radius: 8px; padding: 12px; cursor: pointer; }
+    .note-item:hover { border-color: #d0d0d0; }
+    .note-title { font-size: 14px; font-weight: 700; }
+    .note-preview { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
+    .note-date { font-size: 11px; color: var(--text-tertiary); margin-top: 6px; }
+    .new-note { border: 1px dashed var(--border); border-radius: 8px; padding: 12px; text-align: center; color: var(--text-tertiary); font-size: 14px; cursor: pointer; }
+    .new-note:hover { border-color: var(--accent); color: var(--accent); }
+
+    /* Generic placeholder */
+    .placeholder { text-align: center; padding: 40px 20px; color: var(--text-tertiary); }
+    .placeholder-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700; margin-bottom: 12px; }
+    .placeholder-text { font-size: 14px; }
+
+    .not-found { padding: 48px 20px; text-align: center; color: var(--text-secondary); }
+  `;
+
+  _renderPoll() {
+    return html`
+      <div class="poll-create">
+        <input type="text" placeholder="Ask a question...">
+        <div class="poll-option-input"><span class="poll-num">1</span><input type="text" placeholder="Option 1"></div>
+        <div class="poll-option-input"><span class="poll-num">2</span><input type="text" placeholder="Option 2"></div>
+        <div class="poll-option-input"><span class="poll-num">3</span><input type="text" placeholder="Option 3 (optional)"></div>
+        <button class="add-option">+ Add option</button>
+        <div class="poll-settings">
+          <span>Duration: 1 day</span>
+          <span>Multiple choice: Off</span>
+        </div>
+      </div>
+    `;
+  }
+
+  _renderCalendar() {
+    const days = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+    const march = [0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];
+    return html`
+      <div class="cal-header">
+        <span class="cal-month">March 2025</span>
+        <div class="cal-nav">
+          <button>&lt;</button>
+          <button>&gt;</button>
+        </div>
+      </div>
+      <div class="cal-grid">
+        ${days.map(d => html`<div class="cal-dow">${d}</div>`)}
+        ${march.map(d => html`<div class="cal-day ${d === 0 ? 'empty' : ''} ${d === 22 ? 'today' : ''}">${d || ''}</div>`)}
+      </div>
+    `;
+  }
+
+  _renderNotes() {
+    return html`
+      <div class="notes-list">
+        <div class="new-note">+ New note</div>
+        <div class="note-item">
+          <div class="note-title">LumenJS Migration Plan</div>
+          <div class="note-preview">Steps to migrate from React Router to LumenJS file-based routing...</div>
+          <div class="note-date">Today, 10:30 AM</div>
+        </div>
+        <div class="note-item">
+          <div class="note-title">Design System Tokens</div>
+          <div class="note-preview">Color: #7c3aed (primary), #0f1419 (text), #536471 (secondary)...</div>
+          <div class="note-date">Yesterday</div>
+        </div>
+        <div class="note-item">
+          <div class="note-title">Meeting Notes — Sprint Review</div>
+          <div class="note-preview">Completed: social template, widget system, micro-app foundation...</div>
+          <div class="note-date">Mar 20</div>
+        </div>
+      </div>
+    `;
+  }
+
+  render() {
+    if (this.loaderData.notFound) return html`<div class="card"><div class="not-found">App not found</div></div>`;
+    const { name, desc, color, type } = this.loaderData;
+    return html`
+      <div class="card">
+        <div class="app-header">
+          <div class="app-icon" style="background:${color}">${name?.charAt(0)}</div>
+          <div class="app-info">
+            <div class="app-name">${name}</div>
+            <div class="app-desc">${desc}</div>
+            <div class="app-actions">
+              <button class="btn-open">Open</button>
+              <button class="btn-add">Add to sidebar</button>
+            </div>
+          </div>
+        </div>
+        <div class="app-body">
+          ${type === 'poll' ? this._renderPoll()
+            : type === 'calendar' ? this._renderCalendar()
+            : type === 'notes' ? this._renderNotes()
+            : html`
+              <div class="placeholder">
+                <div class="placeholder-icon" style="background:${color}">${name?.charAt(0)}</div>
+                <div class="placeholder-text">${name} app will appear here</div>
+              </div>
+            `}
+        </div>
+      </div>
+    `;
+  }
+}