@nuraly/lumenjs 0.1.2 → 0.1.4

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

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

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

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