@nuraly/lumenjs 0.1.4 → 0.2.0

package/templates/social/lib/media.ts

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

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

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

package/templates/social/package.json

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

package/templates/social/pages/_layout.ts

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

@@ -1,173 +0,0 @@
-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>
-    `;
-  }
-}