@nuraly/lumenjs 0.1.3 → 0.1.4

package/templates/social/docs/pages.md

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

package/templates/social/docs/theming.md

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

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>
+    `;
+  }
+}