@nuraly/lumenjs 0.1.4 → 0.3.0

package/templates/social/pages/profile/[username].ts

@@ -1,100 +0,0 @@
-import { LitElement, html, css } from 'lit';
-
-const svg = {
-  location: html`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>`,
-  briefcase: html`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/></svg>`,
-  calendar: html`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>`,
-};
-
-const USERS: Record<string, any> = {
-  aymen: { display_name: 'Aymen Labidi', initials: 'AL', color: '#3b49df', avatar: 'https://avatars.githubusercontent.com/u/3775924?v=4', bio: 'Founder & Developer. Building Nuraly — workflow automation platform. LumenJS creator.', location: 'Tunisia', joined: 'Jun 15, 2024', work: 'Founder at Nuraly' },
-  alex_design: { display_name: 'Alex Rivera', initials: 'AR', color: '#e44d26', bio: 'UI/UX designer. Pixels matter. Currently exploring design systems.', location: 'New York, NY', joined: 'Aug 20, 2024', work: 'Design Lead at PixelCo' },
-  mike_ops: { display_name: 'Mike Johnson', initials: 'MJ', color: '#22c55e', bio: 'DevOps engineer. Infrastructure as code. Coffee as fuel.', location: 'Austin, TX', joined: 'Sep 10, 2024', work: 'SRE at CloudScale' },
-  emma_data: { display_name: 'Emma Williams', initials: 'EW', color: '#3572a5', bio: 'Data scientist. ML enthusiast. Turning data into insights.', location: 'Seattle, WA', joined: 'Mar 5, 2024', work: 'ML Engineer at DataFlow' },
-};
-
-const USER_POSTS: Record<string, any[]> = {
-  aymen: [
-    { id: 1, title: 'Why file-based routing changes everything', tags: ['webdev', 'javascript'], likes: 42, comments: 5, time: '8 hours ago' },
-    { id: 5, title: 'TypeScript\'s type system is secretly a language', tags: ['typescript'], likes: 85, comments: 12, time: '2 days ago' },
-  ],
-  alex_design: [{ id: 2, title: 'Building a design system from scratch', tags: ['design', 'css'], likes: 38, comments: 3, time: '12 hours ago' }],
-  mike_ops: [{ id: 4, title: 'Migrating CI/CD to GitHub Actions', tags: ['devops', 'github'], likes: 29, comments: 4, time: '2 days ago' }],
-  emma_data: [
-    { id: 3, title: 'Data cleaning is 80% of ML', tags: ['machinelearning', 'python'], likes: 67, comments: 8, time: '1 day ago' },
-    { id: 6, title: 'Polars vs Pandas', tags: ['python', 'datascience'], likes: 93, comments: 15, time: '4 days ago' },
-  ],
-};
-
-export async function loader({ params }: { params: { username: string } }) {
-  const user = USERS[params.username];
-  if (!user) return { notFound: true };
-  return { ...user, username: params.username, posts: USER_POSTS[params.username] || [] };
-}
-
-export class PageProfile 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; }
-    .profile-body { padding: 20px; }
-    .profile-top { display: flex; gap: 14px; align-items: flex-start; }
-    .profile-info { flex: 1; min-width: 0; }
-    .profile-top .btn-follow { flex-shrink: 0; }
-    .avatar { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: #fff; overflow: hidden; flex-shrink: 0; }
-    .avatar img { width: 100%; height: 100%; object-fit: cover; }
-    .name { font-size: 20px; font-weight: 700; }
-    .bio { font-size: 14px; color: var(--text); line-height: 1.4; margin-top: 2px; }
-    .meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--text-secondary); }
-    .meta span { display: flex; align-items: center; gap: 4px; }
-    .actions { margin-top: 12px; }
-    .btn-follow { width: 36px; height: 36px; border-radius: 50%; background: #3b49df; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
-    .btn-follow:hover { background: #2f3ab2; }
-    .posts-header { padding: 16px 20px; font-size: 18px; font-weight: 700; border-bottom: 1px solid var(--border-light); }
-    .post-item { padding: 12px 20px; border-bottom: 1px solid var(--border-light); }
-    .post-item:last-child { border-bottom: none; }
-    .post-title { font-size: 16px; font-weight: 600; }
-    .post-title a { color: var(--text); text-decoration: none; }
-    .post-title a:hover { color: var(--accent); }
-    .post-tags { display: flex; gap: 4px; margin-top: 4px; }
-    .post-tag { font-size: 12px; color: var(--text-secondary); }
-    .post-stats { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
-    .not-found { padding: 48px 20px; text-align: center; color: var(--text-secondary); }
-  `;
-
-  render() {
-    if (this.loaderData.notFound) return html`<div class="card"><div class="not-found">User not found</div></div>`;
-    const { display_name, username, initials, color, bio, location, joined, work, posts } = this.loaderData;
-    return html`
-      <div class="card">
-        <div class="profile-body">
-          <div class="profile-top">
-            <div class="avatar" style="background:${color}">${this.loaderData.avatar ? html`<img src="${this.loaderData.avatar}" alt="">` : initials}</div>
-            <div class="profile-info">
-              <div class="name">${display_name}</div>
-              <div class="bio">${bio}</div>
-            </div>
-            <button class="btn-follow"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg></button>
-          </div>
-          <div class="meta">
-            ${location ? html`<span>${svg.location} ${location}</span>` : ''}
-            ${work ? html`<span>${svg.briefcase} ${work}</span>` : ''}
-            <span>${svg.calendar} Joined ${joined}</span>
-          </div>
-        </div>
-      </div>
-      <div class="card">
-        <div class="posts-header">Posts</div>
-        ${(posts || []).map((p: any) => html`
-          <div class="post-item">
-            <div class="post-title"><a href="/post/${p.id}">${p.title}</a></div>
-            <div class="post-tags">${(p.tags || []).map((t: string) => html`<span class="post-tag">#${t}</span>`)}</div>
-            <div class="post-stats">${p.likes} reactions · ${p.comments} comments · ${p.time}</div>
-          </div>
-        `)}
-      </div>
-    `;
-  }
-}

package/templates/social/pages/settings/accessibility.ts

@@ -1,153 +0,0 @@
-import { LitElement, html, css } from 'lit';
-
-const svg = {
-  back: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>`,
-  type: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>`,
-  sun: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>`,
-  zap: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>`,
-  eye: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>`,
-};
-
-export async function loader() {
-  return {};
-}
-
-export class PageSettingsAccessibility extends LitElement {
-  static properties = {
-    loaderData: { type: Object },
-    _fontSize: { state: true },
-    _reduceMotion: { state: true },
-    _highContrast: { state: true },
-    _autoplayMedia: { state: true },
-    _colorBlind: { state: true },
-  };
-  loaderData: any = {};
-  _fontSize: string = 'medium';
-  _reduceMotion = false;
-  _highContrast = false;
-  _autoplayMedia = true;
-  _colorBlind: string = 'none';
-
-  static styles = css`
-    :host { display: block; }
-    .card { background: var(--bg); border-radius: 6px; border: 1px solid var(--border); overflow: hidden; margin-bottom: 12px; }
-
-    .header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-light); }
-    .back { width: 32px; height: 32px; border-radius: 50%; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; }
-    .back:hover { background: var(--bg-secondary); }
-    .header h2 { font-size: 20px; font-weight: 700; margin: 0; }
-
-    .section-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 20px 6px; }
-
-    .row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
-    .row:last-child { border-bottom: none; }
-    .row-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0; }
-    .row-body { flex: 1; }
-    .row-label { font-size: 14px; font-weight: 600; }
-    .row-desc { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
-
-    .toggle { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
-    .toggle input { opacity: 0; width: 0; height: 0; }
-    .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #ccc; border-radius: 24px; transition: 0.2s; }
-    .toggle-slider:before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: var(--bg); border-radius: 50%; transition: 0.2s; }
-    .toggle input:checked + .toggle-slider { background: var(--accent); }
-    .toggle input:checked + .toggle-slider:before { transform: translateX(18px); }
-
-    .font-sizes { display: flex; gap: 8px; }
-    .font-size-btn { padding: 6px 16px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; font-weight: 600; color: var(--text-secondary); }
-    .font-size-btn:hover { background: var(--bg-secondary); }
-    .font-size-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
-    .font-size-btn.sm { font-size: 12px; }
-    .font-size-btn.md { font-size: 14px; }
-    .font-size-btn.lg { font-size: 16px; }
-    .font-size-btn.xl { font-size: 18px; }
-
-    .preview { margin: 16px 20px; padding: 16px; border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--border); }
-    .preview-title { font-weight: 700; margin-bottom: 4px; }
-    .preview-text { color: var(--text-secondary); line-height: 1.5; }
-    .preview.sm { font-size: 13px; }
-    .preview.md { font-size: 15px; }
-    .preview.lg { font-size: 17px; }
-    .preview.xl { font-size: 19px; }
-
-    select { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); font-size: 13px; color: var(--text); cursor: pointer; outline: none; }
-    select:focus { border-color: var(--accent); }
-  `;
-
-  render() {
-    return html`
-      <div class="card">
-        <div class="header">
-          <a class="back" href="/settings">${svg.back}</a>
-          <h2>Accessibility</h2>
-        </div>
-      </div>
-
-      <div class="card">
-        <div class="section-title">Font size</div>
-        <div class="row">
-          <div class="row-icon">${svg.type}</div>
-          <div class="row-body">
-            <div class="row-label">Text size</div>
-            <div class="row-desc">Adjust the size of text across the app</div>
-          </div>
-          <div class="font-sizes">
-            <button class="font-size-btn sm ${this._fontSize === 'small' ? 'active' : ''}" @click=${() => this._fontSize = 'small'}>A</button>
-            <button class="font-size-btn md ${this._fontSize === 'medium' ? 'active' : ''}" @click=${() => this._fontSize = 'medium'}>A</button>
-            <button class="font-size-btn lg ${this._fontSize === 'large' ? 'active' : ''}" @click=${() => this._fontSize = 'large'}>A</button>
-            <button class="font-size-btn xl ${this._fontSize === 'xlarge' ? 'active' : ''}" @click=${() => this._fontSize = 'xlarge'}>A</button>
-          </div>
-        </div>
-        <div class="preview ${this._fontSize === 'small' ? 'sm' : this._fontSize === 'large' ? 'lg' : this._fontSize === 'xlarge' ? 'xl' : 'md'}">
-          <div class="preview-title">Preview</div>
-          <div class="preview-text">This is how text will appear across the app with your selected font size.</div>
-        </div>
-      </div>
-
-      <div class="card">
-        <div class="section-title">Display</div>
-        <div class="row">
-          <div class="row-icon">${svg.sun}</div>
-          <div class="row-body">
-            <div class="row-label">High contrast</div>
-            <div class="row-desc">Increase contrast for better readability</div>
-          </div>
-          <label class="toggle"><input type="checkbox" .checked=${this._highContrast} @change=${(e: Event) => { this._highContrast = (e.target as HTMLInputElement).checked; }}><span class="toggle-slider"></span></label>
-        </div>
-        <div class="row">
-          <div class="row-icon">${svg.eye}</div>
-          <div class="row-body">
-            <div class="row-label">Color blind mode</div>
-            <div class="row-desc">Adjust colors for color vision deficiency</div>
-          </div>
-          <select @change=${(e: Event) => { this._colorBlind = (e.target as HTMLSelectElement).value; }}>
-            <option value="none" ?selected=${this._colorBlind === 'none'}>None</option>
-            <option value="protanopia" ?selected=${this._colorBlind === 'protanopia'}>Protanopia (red-weak)</option>
-            <option value="deuteranopia" ?selected=${this._colorBlind === 'deuteranopia'}>Deuteranopia (green-weak)</option>
-            <option value="tritanopia" ?selected=${this._colorBlind === 'tritanopia'}>Tritanopia (blue-weak)</option>
-          </select>
-        </div>
-      </div>
-
-      <div class="card">
-        <div class="section-title">Motion</div>
-        <div class="row">
-          <div class="row-icon">${svg.zap}</div>
-          <div class="row-body">
-            <div class="row-label">Reduce motion</div>
-            <div class="row-desc">Minimize animations and transitions</div>
-          </div>
-          <label class="toggle"><input type="checkbox" .checked=${this._reduceMotion} @change=${(e: Event) => { this._reduceMotion = (e.target as HTMLInputElement).checked; }}><span class="toggle-slider"></span></label>
-        </div>
-        <div class="row">
-          <div class="row-icon">${svg.eye}</div>
-          <div class="row-body">
-            <div class="row-label">Autoplay media</div>
-            <div class="row-desc">Automatically play videos and GIFs in feed</div>
-          </div>
-          <label class="toggle"><input type="checkbox" .checked=${this._autoplayMedia} @change=${(e: Event) => { this._autoplayMedia = (e.target as HTMLInputElement).checked; }}><span class="toggle-slider"></span></label>
-        </div>
-      </div>
-    `;
-  }
-}

package/templates/social/pages/settings/account.ts

@@ -1,260 +0,0 @@
-import { LitElement, html, css } from 'lit';
-
-const svg = {
-  back: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>`,
-  user: html`<svg width="18" height="18" 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>`,
-  mail: html`<svg width="18" height="18" 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>`,
-  phone: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>`,
-  calendar: html`<svg width="18" height="18" 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>`,
-  trash: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>`,
-  upload: html`<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>`,
-  camera: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/></svg>`,
-};
-
-export async function loader() {
-  return {
-    account: {
-      username: 'aymen',
-      display_name: 'Aymen Labidi',
-      email: 'aymen@nuraly.io',
-      phone: '+216 50 123 456',
-      joined: 'January 2024',
-      avatar: 'https://avatars.githubusercontent.com/u/3775924?v=4',
-    },
-  };
-}
-
-export class PageSettingsAccount extends LitElement {
-  static properties = { loaderData: { type: Object }, _showPhotoModal: { state: true }, _previewUrl: { state: true }, _dragOver: { state: true }, _pendingFile: { state: true }, _saving: { state: true }, _avatarUrl: { state: true } };
-  loaderData: any = {};
-  _showPhotoModal = false;
-  _previewUrl: string | null = null;
-  _dragOver = false;
-  _pendingFile: File | null = null;
-  _saving = false;
-  _avatarUrl: string | null = null;
-
-  static styles = css`
-    :host { display: block; }
-    .card { background: var(--bg); border-radius: 6px; border: 1px solid var(--border); overflow: hidden; margin-bottom: 12px; }
-
-    .header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-light); }
-    .back { width: 32px; height: 32px; border-radius: 50%; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text); }
-    .back:hover { background: var(--bg-secondary); }
-    .header h2 { font-size: 20px; font-weight: 700; margin: 0; }
-
-    .avatar-section { display: flex; align-items: center; gap: 16px; padding: 20px; border-bottom: 1px solid var(--border); }
-    .avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
-    .avatar-actions { display: flex; flex-direction: column; gap: 6px; }
-    .btn-change { padding: 6px 16px; border-radius: 6px; background: var(--accent); color: #fff; border: none; font-size: 13px; font-weight: 600; cursor: pointer; }
-    .btn-change:hover { background: var(--accent-hover); }
-    .btn-remove { padding: 6px 16px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; }
-    .btn-remove:hover { background: var(--bg-secondary); }
-
-    .field { padding: 16px 20px; border-bottom: 1px solid var(--border); }
-    .field:last-child { border-bottom: none; }
-    .field-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
-    .field-row { display: flex; align-items: center; gap: 12px; }
-    .field-icon { color: var(--text-secondary); display: flex; align-items: center; }
-    .field-value { flex: 1; font-size: 15px; color: var(--text); }
-    .field-edit { padding: 4px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-secondary); }
-    .field-edit:hover { background: var(--bg-secondary); color: var(--text); }
-
-    .danger-zone { padding: 20px; }
-    .danger-title { font-size: 14px; font-weight: 700; color: #e53935; margin-bottom: 4px; }
-    .danger-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.4; }
-    .btn-danger { padding: 8px 20px; border-radius: 6px; border: 1px solid #e53935; background: none; color: #e53935; font-size: 13px; font-weight: 600; cursor: pointer; }
-    .btn-danger:hover { background: #fef2f2; }
-
-    /* Photo modal */
-    .modal-overlay { position: fixed; inset: 0; background: var(--overlay, rgba(0,0,0,0.4)); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
-    .modal { background: var(--bg); border-radius: 12px; width: 100%; max-width: 440px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
-    .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
-    .modal-header h3 { font-size: 18px; font-weight: 700; margin: 0; }
-    .modal-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 20px; }
-    .modal-close:hover { background: var(--bg-secondary); color: var(--text); }
-    .modal-body { padding: 20px; }
-
-    .drop-zone { border: 2px dashed var(--border); border-radius: 12px; padding: 32px 20px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
-    .drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent); background: rgba(124, 58, 237, 0.04); }
-    .drop-icon { margin-bottom: 12px; color: var(--text-tertiary); }
-    .drop-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
-    .drop-desc { font-size: 13px; color: var(--text-secondary); }
-    .drop-desc a { color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: none; }
-    .drop-hint { font-size: 11px; color: var(--text-tertiary); margin-top: 8px; }
-
-    .preview-section { text-align: center; }
-    .preview-img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; display: block; border: 3px solid var(--border); }
-    .preview-name { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
-
-    .modal-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 16px 20px; border-top: 1px solid var(--border); }
-    .btn-cancel { padding: 8px 20px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text); }
-    .btn-cancel:hover { background: var(--bg-secondary); }
-    .btn-save { padding: 8px 20px; border-radius: 8px; border: none; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
-    .btn-save:hover { background: var(--accent-hover); }
-    .btn-save:disabled { opacity: 0.5; cursor: not-allowed; }
-    .btn-reselect { padding: 6px 16px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-secondary); }
-    .btn-reselect:hover { background: var(--bg-secondary); }
-  `;
-
-  _openFilePicker() {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = 'image/png,image/jpeg,image/gif,image/webp';
-    input.onchange = () => {
-      const file = input.files?.[0];
-      if (file) this._handleFile(file);
-    };
-    input.click();
-  }
-
-  _handleFile(file: File) {
-    if (!file.type.startsWith('image/')) return;
-    if (this._previewUrl?.startsWith('blob:')) URL.revokeObjectURL(this._previewUrl);
-    this._pendingFile = file;
-    this._previewUrl = URL.createObjectURL(file);
-  }
-
-  _onDrop(e: DragEvent) {
-    e.preventDefault();
-    this._dragOver = false;
-    const file = e.dataTransfer?.files?.[0];
-    if (file) this._handleFile(file);
-  }
-
-  _onDragOver(e: DragEvent) { e.preventDefault(); this._dragOver = true; }
-  _onDragLeave() { this._dragOver = false; }
-
-  _closeModal() {
-    if (this._previewUrl?.startsWith('blob:')) URL.revokeObjectURL(this._previewUrl);
-    this._showPhotoModal = false;
-    this._previewUrl = null;
-    this._pendingFile = null;
-    this._dragOver = false;
-  }
-
-  async _savePhoto() {
-    if (!this._pendingFile || this._saving) return;
-    this._saving = true;
-    try {
-      const fd = new FormData();
-      fd.append('file', this._pendingFile, this._pendingFile.name);
-      const res = await fetch('/api/upload', { method: 'POST', body: fd });
-      if (!res.ok) throw new Error('Upload failed');
-      const { url } = await res.json();
-      this._avatarUrl = url;
-      this._closeModal();
-    } catch {
-      this._saving = false;
-    }
-  }
-
-  render() {
-    const a = this.loaderData.account || {};
-    const avatarSrc = this._avatarUrl || a.avatar;
-    return html`
-      ${this._showPhotoModal ? html`
-        <div class="modal-overlay" @click=${this._closeModal}>
-          <div class="modal" @click=${(e: Event) => e.stopPropagation()}>
-            <div class="modal-header">
-              <h3>${this._previewUrl ? 'Preview' : 'Change photo'}</h3>
-              <button class="modal-close" @click=${this._closeModal}>&times;</button>
-            </div>
-            <div class="modal-body">
-              ${this._previewUrl ? html`
-                <div class="preview-section">
-                  <img class="preview-img" src="${this._previewUrl}" alt="Preview">
-                  <button class="btn-reselect" @click=${() => { this._previewUrl = null; }}>Choose another</button>
-                </div>
-              ` : html`
-                <div class="drop-zone ${this._dragOver ? 'drag-over' : ''}"
-                  @click=${this._openFilePicker}
-                  @drop=${this._onDrop}
-                  @dragover=${this._onDragOver}
-                  @dragleave=${this._onDragLeave}>
-                  <div class="drop-icon">${svg.upload}</div>
-                  <div class="drop-title">Drag and drop your photo here</div>
-                  <div class="drop-desc">or <a>browse files</a></div>
-                  <div class="drop-hint">JPG, PNG, GIF or WebP. Max 5MB.</div>
-                </div>
-              `}
-            </div>
-            <div class="modal-actions">
-              <button class="btn-cancel" @click=${this._closeModal}>Cancel</button>
-              <button class="btn-save" ?disabled=${!this._previewUrl || this._saving} @click=${this._savePhoto}>
-                ${this._saving ? 'Uploading…' : 'Save photo'}
-              </button>
-            </div>
-          </div>
-        </div>
-      ` : ''}
-
-      <div class="card">
-        <div class="header">
-          <a class="back" href="/settings">${svg.back}</a>
-          <h2>Account information</h2>
-        </div>
-
-        <div class="avatar-section">
-          <img class="avatar" src="${avatarSrc}" alt="">
-          <div class="avatar-actions">
-            <button class="btn-change" @click=${() => { this._showPhotoModal = true; }}>${svg.camera} Change photo</button>
-            <button class="btn-remove">Remove</button>
-          </div>
-        </div>
-
-        <div class="field">
-          <div class="field-label">Display name</div>
-          <div class="field-row">
-            ${svg.user}
-            <span class="field-value">${a.display_name}</span>
-            <button class="field-edit">Edit</button>
-          </div>
-        </div>
-
-        <div class="field">
-          <div class="field-label">Username</div>
-          <div class="field-row">
-            <span class="field-icon">@</span>
-            <span class="field-value">${a.username}</span>
-            <button class="field-edit">Edit</button>
-          </div>
-        </div>
-
-        <div class="field">
-          <div class="field-label">Email address</div>
-          <div class="field-row">
-            ${svg.mail}
-            <span class="field-value">${a.email}</span>
-            <button class="field-edit">Edit</button>
-          </div>
-        </div>
-
-        <div class="field">
-          <div class="field-label">Phone number</div>
-          <div class="field-row">
-            ${svg.phone}
-            <span class="field-value">${a.phone}</span>
-            <button class="field-edit">Edit</button>
-          </div>
-        </div>
-
-        <div class="field">
-          <div class="field-label">Joined</div>
-          <div class="field-row">
-            ${svg.calendar}
-            <span class="field-value">${a.joined}</span>
-          </div>
-        </div>
-      </div>
-
-      <div class="card">
-        <div class="danger-zone">
-          <div class="danger-title">Deactivate account</div>
-          <div class="danger-desc">This will disable your account. Your profile, posts, and data will be hidden until you reactivate by signing in again.</div>
-          <button class="btn-danger">${svg.trash} Deactivate</button>
-        </div>
-      </div>
-    `;
-  }
-}