@nuraly/lumenjs 0.1.4 → 0.3.0

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

package/templates/social/pages/apps/index.ts

@@ -1,116 +0,0 @@
-import { LitElement, html, css } from 'lit';
-
-const 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>`,
-};
-
-export async function loader() {
-  return {
-    featured: [
-      { id: 'poll', name: 'Polls', desc: 'Create polls and surveys for your community', color: '#7c3aed', icon: 'bar-chart' },
-      { id: 'calendar', name: 'Calendar', desc: 'Track events, meetings, and deadlines', color: '#3b49df', icon: 'calendar' },
-      { id: 'notes', name: 'Quick Notes', desc: 'Markdown notes that sync across devices', color: '#22c55e', icon: 'file-text' },
-    ],
-    categories: ['Productivity', 'Entertainment', 'Finance', 'Social', 'Developer Tools', 'Health'],
-    apps: [
-      { id: 'poll', name: 'Poll Creator', desc: 'Create polls and surveys for your feed', category: 'Social', color: '#7c3aed' },
-      { id: 'calendar', name: 'Mini Calendar', desc: 'Track events and meetings', category: 'Productivity', color: '#3b49df' },
-      { id: 'notes', name: 'Quick Notes', desc: 'Markdown notes with cloud sync', category: 'Productivity', color: '#22c55e' },
-      { id: 'timer', name: 'Focus Timer', desc: 'Pomodoro timer for deep work', category: 'Productivity', color: '#ef4444' },
-      { id: 'weather', name: 'Weather', desc: 'Local weather and forecasts', category: 'Entertainment', color: '#f59e0b' },
-      { id: 'stocks', name: 'Stock Tracker', desc: 'Watch your portfolio in real-time', category: 'Finance', color: '#10b981' },
-      { id: 'news', name: 'News Feed', desc: 'Curated tech news from top sources', category: 'Entertainment', color: '#6366f1' },
-      { id: 'tasks', name: 'Task Board', desc: 'Kanban-style task management', category: 'Productivity', color: '#8b5cf6' },
-      { id: 'translate', name: 'Translator', desc: 'Translate text between languages', category: 'Developer Tools', color: '#06b6d4' },
-      { id: 'code', name: 'Code Snippets', desc: 'Save and share code snippets', category: 'Developer Tools', color: '#0f172a' },
-      { id: 'fitness', name: 'Step Counter', desc: 'Track daily steps and activity', category: 'Health', color: '#ec4899' },
-      { id: 'budget', name: 'Budget Tracker', desc: 'Track expenses and income', category: 'Finance', color: '#14b8a6' },
-    ],
-  };
-}
-
-export class PageApps extends LitElement {
-  static properties = { loaderData: { type: Object }, _category: { state: true } };
-  loaderData: any = {};
-  _category: string = '';
-
-  static styles = css`
-    :host { display: block; }
-    .card { background: var(--bg); border-radius: 6px; border: 1px solid var(--border); overflow: hidden; margin-bottom: 12px; }
-    h2 { font-size: 20px; font-weight: 700; padding: 16px 20px 8px; margin: 0; }
-
-    .search-wrap { padding: 0 20px 16px; position: relative; }
-    .search-icon { position: absolute; left: 32px; 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); }
-
-    .featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 20px 16px; }
-    .feat-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; cursor: pointer; text-decoration: none; color: inherit; transition: box-shadow 0.15s; }
-    .feat-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
-    .feat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 700; }
-    .feat-name { font-size: 15px; font-weight: 700; margin-top: 10px; }
-    .feat-desc { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.3; }
-
-    .categories { display: flex; gap: 6px; padding: 0 20px 12px; overflow-x: auto; scrollbar-width: none; }
-    .categories::-webkit-scrollbar { display: none; }
-    .cat-btn { padding: 6px 14px; border-radius: 9999px; border: 1px solid var(--border); background: var(--bg); font-size: 13px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; font-weight: 500; }
-    .cat-btn:hover { border-color: var(--accent); color: var(--accent); }
-    .cat-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
-
-    .app-list { padding: 0 20px 8px; }
-    .app-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-light); align-items: center; }
-    .app-item:last-child { border-bottom: none; }
-    .app-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0; }
-    .app-info { flex: 1; min-width: 0; }
-    .app-name { font-size: 14px; font-weight: 700; }
-    .app-desc { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
-    .app-cat { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
-    .open-btn { padding: 5px 14px; border-radius: 9999px; border: 1px solid var(--accent); color: var(--accent); background: var(--bg); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; }
-    .open-btn:hover { background: rgba(124,58,237,0.1); }
-
-    @media (max-width: 640px) { .featured { grid-template-columns: 1fr; } }
-  `;
-
-  render() {
-    const { featured, categories, apps } = this.loaderData;
-    const filtered = this._category ? apps?.filter((a: any) => a.category === this._category) : apps;
-    return html`
-      <div class="card">
-        <h2>Apps</h2>
-        <div class="search-wrap">
-          <span class="search-icon">${svg.search}</span>
-          <input class="search" type="text" placeholder="Search apps...">
-        </div>
-        <h2 style="font-size:16px;padding-top:0">Featured</h2>
-        <div class="featured">
-          ${(featured || []).map((f: any) => html`
-            <a class="feat-card" href="/apps/${f.id}">
-              <div class="feat-icon" style="background:${f.color}">${f.name.charAt(0)}</div>
-              <div class="feat-name">${f.name}</div>
-              <div class="feat-desc">${f.desc}</div>
-            </a>
-          `)}
-        </div>
-        <div class="categories">
-          <button class="cat-btn ${this._category === '' ? 'active' : ''}" @click=${() => this._category = ''}>All</button>
-          ${(categories || []).map((c: string) => html`
-            <button class="cat-btn ${this._category === c ? 'active' : ''}" @click=${() => this._category = c}>${c}</button>
-          `)}
-        </div>
-        <div class="app-list">
-          ${(filtered || []).map((a: any) => html`
-            <div class="app-item">
-              <div class="app-icon" style="background:${a.color}">${a.name.charAt(0)}</div>
-              <div class="app-info">
-                <div class="app-name">${a.name}</div>
-                <div class="app-desc">${a.desc}</div>
-                <div class="app-cat">${a.category}</div>
-              </div>
-              <a class="open-btn" href="/apps/${a.id}">Open</a>
-            </div>
-          `)}
-        </div>
-      </div>
-    `;
-  }
-}

package/templates/social/pages/auth/login.ts

@@ -1,92 +0,0 @@
-import { LitElement, html, css } from 'lit';
-
-// Google 'G' logo SVG (official colors)
-const googleLogo = html`<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
-  <path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844a4.14 4.14 0 01-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" fill="#4285F4"/>
-  <path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 009 18z" fill="#34A853"/>
-  <path d="M3.964 10.71A5.41 5.41 0 013.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 000 9c0 1.452.348 2.827.957 4.042l3.007-2.332z" fill="#FBBC05"/>
-  <path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 00.957 4.958L3.964 6.29C4.672 4.163 6.656 3.58 9 3.58z" fill="#EA4335"/>
-</svg>`;
-
-export async function loader({ query }: any) {
-  return {
-    error: query?.error ?? null,
-    returnTo: query?.returnTo ?? '/',
-  };
-}
-
-export class PageAuthLogin extends LitElement {
-  static properties = { loaderData: { type: Object } };
-  loaderData: any = {};
-
-  static styles = css`
-    :host { display: flex; align-items: center; justify-content: center; min-height: 80vh; padding: 24px 16px; }
-
-    .card {
-      width: 100%; max-width: 380px;
-      background: var(--bg); border: 1px solid var(--border);
-      border-radius: 16px; padding: 40px 32px;
-      text-align: center;
-      box-shadow: 0 4px 24px rgba(0,0,0,0.06);
-    }
-
-    .logo {
-      width: 52px; height: 52px; border-radius: 50%;
-      background: var(--accent); color: #fff;
-      font-size: 24px; font-weight: 900;
-      display: flex; align-items: center; justify-content: center;
-      margin: 0 auto 20px;
-    }
-
-    h1 { font-size: 22px; font-weight: 800; margin: 0 0 6px; color: var(--text); }
-    p { font-size: 14px; color: var(--text-secondary); margin: 0 0 28px; }
-
-    .error {
-      background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px;
-      color: #dc2626; font-size: 13px; padding: 10px 14px;
-      margin-bottom: 20px; text-align: left;
-    }
-
-    .google-btn {
-      display: flex; align-items: center; justify-content: center; gap: 10px;
-      width: 100%; padding: 11px 20px;
-      background: var(--bg); color: var(--text);
-      border: 1px solid var(--border); border-radius: 8px;
-      font-size: 14px; font-weight: 600;
-      text-decoration: none; cursor: pointer;
-      transition: background 0.15s, border-color 0.15s;
-    }
-    .google-btn:hover { background: var(--bg-secondary); border-color: var(--accent); }
-
-    .divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-tertiary); font-size: 12px; }
-    .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
-
-    .terms { font-size: 12px; color: var(--text-tertiary); margin-top: 20px; line-height: 1.5; }
-  `;
-
-  render() {
-    const { error, returnTo } = this.loaderData;
-    const loginUrl = `/__nk_auth/login/google?returnTo=${encodeURIComponent(returnTo ?? '/')}`;
-    const errorMsg = error === 'access_denied' ? 'Access was denied. Please try again.'
-      : error === 'state_mismatch' ? 'Login session expired. Please try again.'
-      : error ? 'Authentication failed. Please try again.'
-      : null;
-
-    return html`
-      <div class="card">
-        <div class="logo">N</div>
-        <h1>Sign in</h1>
-        <p>Welcome back — sign in to continue</p>
-
-        ${errorMsg ? html`<div class="error">${errorMsg}</div>` : ''}
-
-        <a class="google-btn" href="${loginUrl}">
-          ${googleLogo}
-          Continue with Google
-        </a>
-
-        <p class="terms">By signing in you agree to our Terms of Service and Privacy Policy.</p>
-      </div>
-    `;
-  }
-}

package/templates/social/pages/bookmarks.ts

@@ -1,57 +0,0 @@
-import { LitElement, html, css } from 'lit';
-
-const svg = {
-  bookmark: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>`,
-};
-
-export async function loader() {
-  return {
-    bookmarks: [
-      { id: 1, username: 'aymen', display_name: 'Aymen Labidi', initials: 'AL', color: '#7c3aed', title: 'Why file-based routing changes everything', saved: '2 hours ago' },
-      { id: 7, username: 'emma_data', display_name: 'Emma Williams', initials: 'EW', color: '#3572a5', title: 'Polars vs Pandas: a practical comparison', saved: '1 day ago' },
-      { id: 4, username: 'mike_ops', display_name: 'Mike Johnson', initials: 'MJ', color: '#22c55e', title: 'Migrating CI/CD to GitHub Actions: a retrospective', saved: '3 days ago' },
-    ],
-  };
-}
-
-export class PageBookmarks 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; }
-    h2 { font-size: 20px; font-weight: 700; padding: 16px 20px; margin: 0; border-bottom: 1px solid var(--border-light); }
-    .item { display: flex; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--border-light); cursor: pointer; }
-    .item:hover { background: var(--bg-hover); }
-    .item:last-child { border-bottom: none; }
-    .item-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
-    .item-body { flex: 1; }
-    .item-title { font-size: 15px; font-weight: 600; }
-    .item-title a { color: var(--text); text-decoration: none; }
-    .item-title a:hover { color: var(--accent); }
-    .item-meta { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
-    .empty { padding: 48px 20px; text-align: center; color: var(--text-secondary); font-size: 14px; }
-  `;
-
-  render() {
-    const bookmarks = this.loaderData.bookmarks || [];
-    return html`
-      <div class="card">
-        <h2>Bookmarks</h2>
-        ${bookmarks.length === 0
-          ? html`<div class="empty">No bookmarks yet</div>`
-          : bookmarks.map((b: any) => html`
-            <div class="item">
-              <div class="item-icon">${svg.bookmark}</div>
-              <div class="item-body">
-                <div class="item-title"><a href="/post/${b.id}">${b.title}</a></div>
-                <div class="item-meta">${b.display_name} · Saved ${b.saved}</div>
-              </div>
-            </div>
-          `)
-        }
-      </div>
-    `;
-  }
-}

package/templates/social/pages/explore.ts

@@ -1,73 +0,0 @@
-import { LitElement, html, css } from 'lit';
-
-export async function loader() {
-  return {
-    tags: [
-      { name: 'webcomponents', count: 1250, color: '#3b49df' },
-      { name: 'typescript', count: 3400, color: '#3178c6' },
-      { name: 'devops', count: 890, color: '#e44d26' },
-      { name: 'machinelearning', count: 2100, color: '#f7df1e' },
-      { name: 'opensource', count: 1800, color: '#22c55e' },
-      { name: 'css', count: 4200, color: '#a855f7' },
-      { name: 'python', count: 5100, color: '#3572a5' },
-      { name: 'beginners', count: 6300, color: '#ef4444' },
-    ],
-    topPosts: [
-      { id: 9, display_name: 'Aymen Labidi', title: 'Building a commit message generator with Claude', likes: 112, comments: 18, time: '4 days ago' },
-      { id: 7, display_name: 'Emma Williams', title: 'Polars vs Pandas: a practical comparison', likes: 93, comments: 15, time: '3 days ago' },
-      { id: 5, display_name: 'Aymen Labidi', title: 'TypeScript\'s type system is secretly a language', likes: 85, comments: 12, time: '2 days ago' },
-    ],
-  };
-}
-
-export class PageExplore 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); padding: 20px; margin-bottom: 12px; }
-    h2 { font-size: 20px; font-weight: 700; margin: 0 0 16px; }
-
-    .tags-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
-    .tag-card { border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px; cursor: pointer; transition: all 0.15s; }
-    .tag-card:hover { border-color: #d0d0d0; box-shadow: 0 2px 4px rgba(0,0,0,0.04); }
-    .tag-top { width: 100%; height: 6px; border-radius: 3px; margin-bottom: 8px; }
-    .tag-name { font-size: 16px; font-weight: 600; }
-    .tag-count { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
-
-    .top-post { padding: 10px 0; border-bottom: 1px solid var(--border-light); }
-    .top-post:last-child { border-bottom: none; }
-    .top-title { font-size: 15px; font-weight: 600; }
-    .top-title a { color: var(--text); text-decoration: none; }
-    .top-title a:hover { color: var(--accent); }
-    .top-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
-  `;
-
-  render() {
-    const { tags, topPosts } = this.loaderData;
-    return html`
-      <div class="card">
-        <h2>Popular Tags</h2>
-        <div class="tags-grid">
-          ${(tags || []).map((t: any) => html`
-            <div class="tag-card">
-              <div class="tag-top" style="background:${t.color}"></div>
-              <div class="tag-name">#${t.name}</div>
-              <div class="tag-count">${t.count.toLocaleString()} posts published</div>
-            </div>
-          `)}
-        </div>
-      </div>
-      <div class="card">
-        <h2>Top Posts This Week</h2>
-        ${(topPosts || []).map((p: any) => html`
-          <div class="top-post">
-            <div class="top-title"><a href="/post/${p.id}">${p.title}</a></div>
-            <div class="top-meta">${p.display_name} · ${p.likes} reactions · ${p.comments} comments · ${p.time}</div>
-          </div>
-        `)}
-      </div>
-    `;
-  }
-}