@nuraly/lumenjs 0.1.3 → 0.1.4

package/templates/social/pages/messages.ts

@@ -0,0 +1,298 @@
+import { LitElement, html, css } from 'lit';
+
+export const auth = true;
+
+const svg = {
+  send: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>`,
+  image: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`,
+  smile: 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="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>`,
+  check: html`<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>`,
+  checkDouble: html`<svg width="16" height="12" viewBox="0 0 28 24" fill="none" stroke="#7c3aed" stroke-width="2.5"><polyline points="16 6 8 17 4 12"/><polyline points="24 6 13 17 11 14"/></svg>`,
+  checkDoubleGray: html`<svg width="16" height="12" viewBox="0 0 28 24" fill="none" stroke="var(--text-secondary, #9ca3af)" stroke-width="2.5"><polyline points="16 6 8 17 4 12"/><polyline points="24 6 13 17 11 14"/></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>`,
+  video: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>`,
+  info: 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="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,
+  attach: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>`,
+  mic: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></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 {
+    conversations: [
+      { id: 1, name: 'Alex Rivera', initials: 'AR', color: '#e44d26', lastMessage: 'Love the new design system docs!', time: '2h', unread: 2, online: true },
+      { id: 2, name: 'Emma Williams', initials: 'EW', color: '#3572a5', lastMessage: 'The polars benchmarks are ready to review', time: '5h', unread: 0, online: true },
+      { id: 3, name: 'Mike Johnson', initials: 'MJ', color: '#22c55e', lastMessage: 'CI pipeline is green now', time: '1d', unread: 0, online: false },
+      { id: 4, name: 'Lisa Park', initials: 'LP', color: '#a855f7', lastMessage: 'Can we sync on the roadmap tomorrow?', time: '2d', unread: 1, online: false },
+      { id: 5, name: 'Tom Brooks', initials: 'TB', color: '#ef4444', lastMessage: 'Sent you the architecture diagram', time: '3d', unread: 0, online: false },
+      { id: 6, name: 'Team Chat', initials: 'TC', color: '#6366f1', lastMessage: 'See you all there.', time: '1h', unread: 0, online: false, type: 'group', participants: [
+        { name: 'Alex Rivera', initials: 'AR', color: '#e44d26' },
+        { name: 'Emma Williams', initials: 'EW', color: '#3572a5' },
+        { name: 'Mike Johnson', initials: 'MJ', color: '#22c55e' },
+      ]},
+    ],
+    chats: {
+      1: {
+        name: 'Alex Rivera', initials: 'AR', color: '#e44d26', online: true,
+        messages: [
+          { from: 'date', text: 'Today' },
+          { from: 'them', text: 'Hey! Did you see the new LumenJS release?', time: '10:30 AM', status: 'read' },
+          { from: 'me', text: 'Yes! The file-based routing is amazing. Already migrated our project.', time: '10:32 AM', status: 'read' },
+          { from: 'them', text: 'How long did the migration take?', time: '10:33 AM', status: 'read' },
+          { from: 'me', text: 'About 2 hours. Most of it was just moving files around.', time: '10:35 AM', status: 'read' },
+          { from: 'them', text: 'That\'s fast. I\'m going to try it this weekend.', time: '10:36 AM', status: 'read' },
+          { from: 'me', text: 'Let me know if you need help. The layouts system is the best part.', time: '10:38 AM', status: 'delivered' },
+          { from: 'them', text: 'Love the new design system docs!', time: '11:00 AM', status: 'delivered' },
+          { from: 'them', text: 'Also, can you share the Figma link for the social template?', time: '11:01 AM', status: 'sent' },
+        ],
+      },
+      2: {
+        name: 'Emma Williams', initials: 'EW', color: '#3572a5', online: true,
+        messages: [
+          { from: 'date', text: 'Yesterday' },
+          { from: 'them', text: 'Hey, the polars benchmarks are done. Want to take a look?', time: '3:15 PM', status: 'read' },
+          { from: 'me', text: 'Sure, send me the notebook link.', time: '3:20 PM', status: 'read' },
+          { from: 'them', text: 'Here it is. The groupby performance is 15x faster.', time: '3:22 PM', status: 'read' },
+          { from: 'me', text: 'Wow, that\'s impressive. Should we write a blog post about this?', time: '3:30 PM', status: 'read' },
+          { from: 'them', text: 'The polars benchmarks are ready to review', time: '4:00 PM', status: 'read' },
+        ],
+      },
+      3: {
+        name: 'Mike Johnson', initials: 'MJ', color: '#22c55e', online: false,
+        messages: [
+          { from: 'date', text: 'Monday' },
+          { from: 'me', text: 'How\'s the GitHub Actions migration going?', time: '9:00 AM', status: 'read' },
+          { from: 'them', text: 'Almost done. Just the deploy workflow left.', time: '9:15 AM', status: 'read' },
+          { from: 'them', text: 'CI pipeline is green now', time: '2:30 PM', status: 'read' },
+          { from: 'me', text: 'Nice work! Merge it when ready.', time: '2:35 PM', status: 'sent' },
+        ],
+      },
+      4: {
+        name: 'Lisa Park', initials: 'LP', color: '#a855f7', online: false,
+        messages: [
+          { from: 'date', text: 'Last week' },
+          { from: 'them', text: 'Hi! I saw the roadmap update. Great progress.', time: '10:00 AM', status: 'read' },
+          { from: 'me', text: 'Thanks! We\'re ahead of schedule on the social template.', time: '10:05 AM', status: 'read' },
+          { from: 'them', text: 'Can we sync on the roadmap tomorrow?', time: '10:10 AM', status: 'delivered' },
+        ],
+      },
+      5: {
+        name: 'Tom Brooks', initials: 'TB', color: '#ef4444', online: false,
+        messages: [
+          { from: 'date', text: 'Last week' },
+          { from: 'them', text: 'Sent you the architecture diagram', time: '4:00 PM', status: 'read' },
+          { from: 'me', text: 'Got it, looks good. Let\'s discuss in the next standup.', time: '4:15 PM', status: 'read' },
+        ],
+      },
+      6: {
+        name: 'Team Chat', initials: 'TC', color: '#6366f1', online: false, type: 'group',
+        participants: [
+          { name: 'Alex Rivera', initials: 'AR', color: '#e44d26' },
+          { name: 'Emma Williams', initials: 'EW', color: '#3572a5' },
+          { name: 'Mike Johnson', initials: 'MJ', color: '#22c55e' },
+        ],
+        messages: [
+          { from: 'date', text: 'Today' },
+          { from: 'them', text: 'Hey team, sprint planning at 3pm', time: '1:00 PM', status: 'read' },
+          { from: 'them', text: 'Works for me!', time: '1:05 PM', status: 'read' },
+          { from: 'me', text: 'See you all there.', time: '1:10 PM', status: 'sent' },
+        ],
+      },
+    },
+  };
+}
+
+export class PageMessages extends LitElement {
+  static properties = { loaderData: { type: Object }, _activeId: { state: true }, _showChat: { state: true } };
+  loaderData: any = {};
+  _activeId: number = 1;
+  _showChat: boolean = false;
+
+
+  static styles = css`
+    :host { display: flex; height: calc(100vh - 56px); }
+
+    /* Conversation list */
+    .convo-list { width: 260px; border-right: 1px solid var(--border); overflow-y: auto; flex-shrink: 0; display: flex; flex-direction: column; }
+    .convo-header { padding: 14px 16px; font-size: 18px; font-weight: 800; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
+    .convo-search { padding: 8px 16px; border-bottom: 1px solid var(--border); }
+    .convo-search-input { width: 100%; padding: 8px 12px 8px 32px; border: 1px solid var(--border); border-radius: 9999px; font-size: 13px; outline: none; background: var(--input-bg); position: relative; }
+    .convo-search-wrap { position: relative; }
+    .convo-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); display: flex; }
+    .convo-list-items { flex: 1; overflow-y: auto; }
+    .convo { display: flex; gap: 10px; padding: 12px 16px; cursor: pointer; }
+    .convo:hover { background: var(--bg-secondary); }
+    .convo.active { background: var(--input-bg); }
+    .convo-avatar-wrap { position: relative; flex-shrink: 0; }
+    .convo-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: #fff; }
+    .group-avatar { position: relative; width: 44px; height: 44px; }
+    .group-avatar .ga-circle { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: #fff; position: absolute; border: 2px solid var(--bg, #fff); }
+    .group-avatar .ga-circle:nth-child(1) { top: 0; left: 0; z-index: 3; }
+    .group-avatar .ga-circle:nth-child(2) { top: 6px; left: 14px; z-index: 2; }
+    .group-avatar .ga-circle:nth-child(3) { top: 16px; left: 4px; z-index: 1; }
+    .group-avatar-sm { position: relative; width: 38px; height: 38px; }
+    .group-avatar-sm .ga-circle { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; color: #fff; position: absolute; border: 2px solid var(--bg, #fff); }
+    .group-avatar-sm .ga-circle:nth-child(1) { top: 0; left: 0; z-index: 3; }
+    .group-avatar-sm .ga-circle:nth-child(2) { top: 4px; left: 12px; z-index: 2; }
+    .group-avatar-sm .ga-circle:nth-child(3) { top: 14px; left: 3px; z-index: 1; }
+    .online-dot { position: absolute; bottom: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
+    .convo-body { flex: 1; min-width: 0; }
+    .convo-top { display: flex; justify-content: space-between; align-items: baseline; }
+    .convo-name { font-size: 14px; font-weight: 700; }
+    .convo-time { font-size: 12px; color: var(--text-secondary); }
+    .convo-preview { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
+    .convo-unread { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: center; }
+
+    /* Chat area */
+    .chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+    .chat-header { padding: 10px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
+    .chat-header-avatar { position: relative; }
+    .chat-header-av { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #fff; }
+    .chat-header-info { flex: 1; }
+    .chat-header-name { font-size: 15px; font-weight: 700; }
+    .chat-header-status { font-size: 12px; color: #22c55e; }
+    .chat-header-status.offline { color: var(--text-secondary); }
+    .chat-header-actions { display: flex; gap: 4px; }
+    .chat-header-actions button { width: 36px; height: 36px; border: none; background: none; color: var(--text-secondary); cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
+    .chat-header-actions button:hover { background: var(--input-bg); color: var(--text); }
+
+    /* Messages */
+    .chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 2px; }
+    .date-sep { align-self: center; font-size: 12px; color: var(--text-secondary); background: var(--input-bg); padding: 4px 12px; border-radius: 9999px; margin: 12px 0; }
+    .msg-row { display: flex; gap: 6px; align-items: flex-end; }
+    .msg-row.me { flex-direction: row-reverse; }
+    .msg-avatar { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: #fff; flex-shrink: 0; margin-bottom: 16px; }
+    .msg-bubble { max-width: 65%; }
+    .msg { padding: 8px 14px; border-radius: 18px; font-size: 14px; line-height: 1.4; word-wrap: break-word; }
+    .msg.me { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
+    .msg.them { background: var(--input-bg); color: var(--text); border-bottom-left-radius: 4px; }
+    .msg-footer { display: flex; align-items: center; gap: 4px; margin-top: 2px; padding: 0 4px; }
+    .msg-footer.me { justify-content: flex-end; }
+    .msg-time { font-size: 11px; color: var(--text-secondary); }
+    .msg-read { display: flex; align-items: center; }
+
+    /* Input */
+    .chat-input { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); align-items: center; }
+    .chat-input-tools { display: flex; gap: 2px; }
+    .chat-input-tools button { width: 34px; height: 34px; border: none; background: none; color: var(--text-secondary); cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
+    .chat-input-tools button:hover { background: var(--input-bg); color: var(--accent); }
+    .chat-input input { flex: 1; padding: 10px 16px; border: 1px solid var(--border); border-radius: 9999px; font-size: 14px; outline: none; background: var(--input-bg); }
+    .chat-input input:focus { border-color: var(--accent); background: var(--bg); }
+    .send-btn { width: 38px; height: 38px; border: none; background: var(--accent); color: #fff; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+    .send-btn:hover { background: var(--accent-hover); }
+
+    .back-btn { display: none; border: none; background: none; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: 50%; }
+    .back-btn:hover { background: var(--input-bg); color: var(--text); }
+    .back-btn svg { display: block; }
+
+    @media (max-width: 640px) {
+      :host { display: block; }
+      .convo-list { width: 100%; }
+      .chat { display: none; }
+      :host(.chat-open) .convo-list { display: none; }
+      :host(.chat-open) .chat { display: flex; height: calc(100vh - 56px); }
+      .back-btn { display: flex; align-items: center; justify-content: center; }
+    }
+  `;
+
+  updated() {
+    this._showChat ? this.classList.add('chat-open') : this.classList.remove('chat-open');
+  }
+
+  _selectChat(id: number) {
+    this._activeId = id;
+    this._showChat = true;
+  }
+
+  _backToList() {
+    this._showChat = false;
+  }
+
+  render() {
+    const { conversations, chats } = this.loaderData;
+    const activeChat = chats?.[this._activeId];
+    return html`
+      <div class="convo-list">
+        <div class="convo-header">
+          <span>Messages</span>
+        </div>
+        <div class="convo-search">
+          <div class="convo-search-wrap">
+            <span class="convo-search-icon">${svg.search}</span>
+            <input class="convo-search-input" type="text" placeholder="Search messages">
+          </div>
+        </div>
+        <div class="convo-list-items">
+          ${(conversations || []).map((c: any) => html`
+            <div class="convo ${c.id === this._activeId ? 'active' : ''}" @click=${() => this._selectChat(c.id)}>
+              <div class="convo-avatar-wrap">
+                ${c.type === 'group' && c.participants?.length > 1
+                  ? html`<div class="group-avatar">${c.participants.slice(0, 3).map((p: any) => html`<div class="ga-circle" style="background:${p.color}">${p.initials?.charAt(0)}</div>`)}</div>`
+                  : html`<div class="convo-avatar" style="background:${c.color}">${c.initials}</div>`}
+                ${c.online ? html`<div class="online-dot"></div>` : ''}
+              </div>
+              <div class="convo-body">
+                <div class="convo-top">
+                  <span class="convo-name">${c.name}</span>
+                  <span class="convo-time">${c.time}</span>
+                </div>
+                <div class="convo-preview">${c.lastMessage}</div>
+              </div>
+              ${c.unread > 0 ? html`<div class="convo-unread">${c.unread}</div>` : ''}
+            </div>
+          `)}
+        </div>
+      </div>
+      <div class="chat">
+        <div class="chat-header">
+          <button class="back-btn" @click=${() => this._backToList()}><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg></button>
+          <div class="chat-header-avatar">
+            ${activeChat?.type === 'group' && activeChat?.participants?.length > 1
+              ? html`<div class="group-avatar-sm">${activeChat.participants.slice(0, 3).map((p: any) => html`<div class="ga-circle" style="background:${p.color}">${p.initials?.charAt(0)}</div>`)}</div>`
+              : html`<div class="chat-header-av" style="background:${activeChat?.color}">${activeChat?.initials}</div>`}
+            ${activeChat?.type !== 'group' && activeChat?.online ? html`<div class="online-dot"></div>` : ''}
+          </div>
+          <div class="chat-header-info">
+            <div class="chat-header-name">${activeChat?.name}</div>
+            ${activeChat?.type === 'group'
+              ? html`<div class="chat-header-status">${activeChat?.participants?.length} members</div>`
+              : html`<div class="chat-header-status ${activeChat?.online ? '' : 'offline'}">${activeChat?.online ? 'Active now' : 'Offline'}</div>`}
+          </div>
+          <div class="chat-header-actions">
+            <button>${svg.phone}</button>
+            <button>${svg.video}</button>
+            <button>${svg.info}</button>
+          </div>
+        </div>
+        <div class="chat-messages">
+          ${(activeChat?.messages || []).map((m: any) =>
+            m.from === 'date'
+              ? html`<div class="date-sep">${m.text}</div>`
+              : html`
+                <div class="msg-row ${m.from}">
+                  ${m.from === 'them' ? html`<div class="msg-avatar" style="background:${activeChat?.color}">${activeChat?.initials?.charAt(0)}</div>` : ''}
+                  <div class="msg-bubble">
+                    <div class="msg ${m.from}">${m.text}</div>
+                    <div class="msg-footer ${m.from}">
+                      <span class="msg-time">${m.time}</span>
+                      ${m.from === 'me' ? html`<span class="msg-read">${m.status === 'read' ? svg.checkDouble : m.status === 'delivered' ? svg.checkDoubleGray : svg.check}</span>` : ''}
+                    </div>
+                  </div>
+                </div>
+              `
+          )}
+        </div>
+        <div class="chat-input">
+          <div class="chat-input-tools">
+            <button>${svg.attach}</button>
+            <button>${svg.image}</button>
+            <button>${svg.smile}</button>
+          </div>
+          <input type="text" placeholder="Type a message...">
+          <button class="chat-input-tools" style="padding:0">${svg.mic}</button>
+          <button class="send-btn">${svg.send}</button>
+        </div>
+      </div>
+    `;
+  }
+}

package/templates/social/pages/new.ts

@@ -0,0 +1,77 @@
+import { LitElement, html, css } from 'lit';
+
+const svg = {
+  image: html`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`,
+  video: html`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>`,
+  smile: html`<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"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>`,
+  mapPin: html`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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>`,
+  globe: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>`,
+  close: html`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`,
+};
+
+export class PageNew extends LitElement {
+  static styles = css`
+    :host { display: block; }
+    .card { background: var(--bg); border-radius: 6px; border: 1px solid var(--border); overflow: hidden; }
+
+    .header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
+    .header-left { display: flex; align-items: center; gap: 8px; }
+    .close-btn { width: 36px; height: 36px; border: none; background: none; color: var(--text-secondary); cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
+    .close-btn:hover { background: var(--input-bg); color: var(--text); }
+    .header-title { font-size: 16px; font-weight: 700; }
+    .post-btn { padding: 8px 20px; border-radius: 9999px; background: var(--accent); color: #fff; border: none; font-weight: 700; font-size: 14px; cursor: pointer; }
+    .post-btn:hover { background: var(--accent-hover); }
+
+    .compose { display: flex; gap: 12px; padding: 16px; }
+    .compose-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
+    .compose-body { flex: 1; }
+    .compose textarea { width: 100%; border: none; font-size: 18px; resize: none; outline: none; font-family: inherit; padding: 0; min-height: 120px; color: var(--text); line-height: 1.5; }
+    .compose textarea::placeholder { color: var(--text-secondary); }
+
+    .visibility { display: flex; align-items: center; gap: 6px; padding: 0 16px 12px 68px; font-size: 13px; color: var(--accent); font-weight: 600; cursor: pointer; }
+    .visibility svg { color: var(--accent); }
+    .visibility:hover { text-decoration: underline; }
+
+    .divider { height: 1px; background: var(--input-bg); margin: 0 16px; }
+
+    .tools { display: flex; gap: 4px; padding: 10px 16px; align-items: center; }
+    .tool-btn { width: 36px; height: 36px; border: none; background: none; color: var(--accent); cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
+    .tool-btn:hover { background: rgba(124,58,237,0.1); }
+
+    .char-count { margin-left: auto; font-size: 13px; color: var(--text-secondary); }
+    .char-count.warn { color: #f59e0b; }
+    .char-count.over { color: #e53935; }
+
+    @media (max-width: 640px) {
+      .card { border: none; border-radius: 0; min-height: 100vh; }
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="card">
+        <div class="header">
+          <div class="header-left">
+            <a class="close-btn" href="/">${svg.close}</a>
+          </div>
+          <button class="post-btn">Post</button>
+        </div>
+        <div class="compose">
+          <img class="compose-avatar" src="https://avatars.githubusercontent.com/u/3775924?v=4" alt="A">
+          <div class="compose-body">
+            <textarea placeholder="What's on your mind?"></textarea>
+          </div>
+        </div>
+        <div class="visibility">${svg.globe} Everyone can reply</div>
+        <div class="divider"></div>
+        <div class="tools">
+          <button class="tool-btn">${svg.image}</button>
+          <button class="tool-btn">${svg.video}</button>
+          <button class="tool-btn">${svg.smile}</button>
+          <button class="tool-btn">${svg.mapPin}</button>
+          <span class="char-count">0 / 500</span>
+        </div>
+      </div>
+    `;
+  }
+}

package/templates/social/pages/notifications.ts

@@ -0,0 +1,73 @@
+import { LitElement, html, css } from 'lit';
+
+const svg = {
+  heart: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="#e53935" stroke="none"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>`,
+  comment: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="#3b49df" stroke="none"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>`,
+  userPlus: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#22c55e" 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>`,
+  followRequest: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" 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"/><circle cx="20" cy="11" r="3"/><path d="M20 9.5v3"/><path d="M18.5 11h3"/></svg>`,
+};
+
+export async function loader() {
+  return {
+    notifications: [
+      { id: 1, type: 'like', actor: 'Alex Rivera', initials: 'AR', color: '#e44d26', action: 'reacted to your post', preview: 'Why file-based routing changes everything', time: '2 hours ago' },
+      { id: 2, type: 'comment', actor: 'Alex Rivera', initials: 'AR', color: '#e44d26', action: 'commented on your post', preview: 'Love this approach! How does it handle dynamic params?', time: '2 hours ago' },
+      { id: 3, type: 'follow', actor: 'Mike Johnson', initials: 'MJ', color: '#22c55e', action: 'followed you', preview: '', time: '5 hours ago' },
+      { id: 4, type: 'like', actor: 'Emma Williams', initials: 'EW', color: '#3572a5', action: 'reacted to your post', preview: 'TypeScript\'s type system is secretly a language', time: '1 day ago' },
+      { id: 5, type: 'comment', actor: 'Mike Johnson', initials: 'MJ', color: '#22c55e', action: 'commented on your post', preview: 'Totally agree. The conditional types are mind-bending though.', time: '1 day ago' },
+    ],
+  };
+}
+
+export class PageNotifications 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); }
+    .notif { display: flex; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--border-light); cursor: pointer; }
+    .notif:hover { background: var(--bg-hover); }
+    .notif:last-child { border-bottom: none; }
+    .notif-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; position: relative; }
+    .notif-type { position: absolute; bottom: -2px; right: -2px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; }
+    .notif-body { flex: 1; }
+    .notif-text { font-size: 14px; color: var(--text); line-height: 1.4; }
+    .notif-text strong { font-weight: 600; color: var(--text); }
+    .notif-preview { font-size: 13px; color: var(--text-secondary); margin-top: 2px; font-style: italic; }
+    .notif-time { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
+  `;
+
+  _icon(type: string) {
+    switch (type) {
+      case 'like': return svg.heart;
+      case 'comment': return svg.comment;
+      case 'follow': return svg.userPlus;
+      case 'follow_request': return svg.followRequest;
+      default: return svg.heart;
+    }
+  }
+
+  render() {
+    const notifications = this.loaderData.notifications || [];
+    return html`
+      <div class="card">
+        <h2>Notifications</h2>
+        ${notifications.map((n: any) => html`
+          <div class="notif">
+            <div class="notif-avatar" style="background:${n.color}">
+              ${n.initials}
+              <span class="notif-type">${this._icon(n.type)}</span>
+            </div>
+            <div class="notif-body">
+              <div class="notif-text"><strong>${n.actor}</strong> ${n.action}</div>
+              ${n.preview ? html`<div class="notif-preview">${n.preview}</div>` : ''}
+              <div class="notif-time">${n.time}</div>
+            </div>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+}

package/templates/social/pages/post/[id].ts

@@ -0,0 +1,124 @@
+import { LitElement, html, css } from 'lit';
+
+const svg = {
+  heart: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>`,
+  comment: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>`,
+  bookmark: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>`,
+};
+
+const POSTS: Record<string, any> = {
+  '1': { username: 'aymen', display_name: 'Aymen Labidi', initials: 'AL', color: '#3b49df', title: 'Why file-based routing changes everything', tags: ['webdev', 'javascript', 'lumenjs'], date: 'Mar 21, 2025', readtime: '3 min read', content: 'Just shipped a new feature using LumenJS! The file-based routing makes everything so clean. No more route config files — just drop a .ts in pages/ and you have a route.\n\nHere\'s what I love about this approach:\n\n• Zero config — the file system IS the config\n• Dynamic routes with [param] syntax\n• Nested layouts with _layout.ts\n• Server loaders for data fetching\n\nIf you\'re building web apps in 2025, give file-based routing a try.', media: { type: 'image', url: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=600&h=340&fit=crop' }, likes: 42, comments: [
+    { display_name: 'Alex Rivera', initials: 'AR', color: '#e44d26', content: 'Love this approach! How does it handle dynamic params?', likes: 8, time: '6 hours ago' },
+  ]},
+  '2': { username: 'alex_design', display_name: 'Alex Rivera', initials: 'AR', color: '#e44d26', title: 'Building a design system from scratch', tags: ['design', 'css', 'ux'], date: 'Mar 21, 2025', readtime: '5 min read', content: 'The key insight after 6 months: consistency beats creativity when building at scale. Every component should feel like it belongs.', likes: 38, comments: [] },
+  '3': { username: 'emma_data', display_name: 'Emma Williams', initials: 'EW', color: '#3572a5', title: 'Data cleaning is 80% of ML — here\'s proof', tags: ['machinelearning', 'python'], date: 'Mar 21, 2025', readtime: '4 min read', content: 'Trained a new model on customer feedback data. Accuracy went from 78% to 94% just by cleaning the input data.', media: { type: 'image', url: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=340&fit=crop' }, likes: 67, comments: [] },
+  '4': { username: 'mike_ops', display_name: 'Mike Johnson', initials: 'MJ', color: '#22c55e', title: 'Migrating CI/CD to GitHub Actions: a retrospective', tags: ['devops', 'github'], date: 'Mar 20, 2025', readtime: '6 min read', content: 'We switched from Jenkins to GitHub Actions last month. 40% faster builds, half the YAML, and our team actually understands the pipeline now.', media: { type: 'video', url: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm', poster: 'https://images.unsplash.com/photo-1618401471353-b98afee0b2eb?w=600&h=340&fit=crop' }, likes: 29, comments: [] },
+  '5': { username: 'aymen', display_name: 'Aymen Labidi', initials: 'AL', color: '#3b49df', title: 'TypeScript\'s type system is secretly a language', tags: ['typescript', 'programming'], date: 'Mar 20, 2025', readtime: '7 min read', content: 'Hot take: TypeScript\'s type system is a programming language in itself. Conditional types, mapped types, template literals... and I love every bit of it.', likes: 85, comments: [
+    { display_name: 'Mike Johnson', initials: 'MJ', color: '#22c55e', content: 'Totally agree. The conditional types are mind-bending though.', likes: 12, time: '1 day ago' },
+  ]},
+  '6': { username: 'emma_data', display_name: 'Emma Williams', initials: 'EW', color: '#3572a5', title: 'Polars vs Pandas: a practical comparison', tags: ['python', 'datascience'], date: 'Mar 19, 2025', readtime: '8 min read', content: 'I switched a production pipeline from pandas to polars. Not just faster — the API is more intuitive.', media: { type: 'image', url: 'https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=600&h=340&fit=crop' }, likes: 93, comments: [] },
+};
+
+export async function loader({ params }: { params: { id: string } }) {
+  const post = POSTS[params.id];
+  if (!post) return { notFound: true };
+  return { ...post, id: params.id };
+}
+
+export class PagePost 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; }
+
+    .article-header { padding: 32px 48px 0; }
+    .article-title { font-size: 32px; font-weight: 800; line-height: 1.2; margin: 0; }
+    .article-tags { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
+    .article-tag { font-size: 13px; color: var(--text-secondary); padding: 2px 6px; border-radius: 4px; text-decoration: none; }
+    .article-tag:hover { background: #e8e8ff; color: var(--accent); }
+    .article-meta { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
+    .article-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; }
+    .article-author { font-size: 14px; font-weight: 600; }
+    .article-author a { color: var(--text); text-decoration: none; }
+    .article-author a:hover { color: var(--accent); }
+    .article-date { font-size: 12px; color: var(--text-secondary); }
+    .article-body { padding: 24px 48px 32px; font-size: 16px; line-height: 1.7; color: var(--text); white-space: pre-line; }
+    .article-media { margin: 0 0 16px; overflow: hidden; aspect-ratio: 16/9; background: var(--input-bg); }
+    .article-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
+    .article-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+    .article-actions { display: flex; gap: 16px; padding: 0 48px 24px; border-bottom: 1px solid var(--border-light); }
+    .action-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: none; background: none; font-size: 14px; color: var(--text-secondary); cursor: pointer; border-radius: 6px; }
+    .action-btn:hover { background: var(--border-light); color: var(--text); }
+
+    .comments-section { padding: 20px 48px; }
+    .comments-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
+    .comment-form { display: flex; gap: 8px; margin-bottom: 20px; }
+    .comment-avatar { width: 32px; height: 32px; border-radius: 50%; background: #3b49df; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
+    .comment-input { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; outline: none; }
+    .comment-input:focus { border-color: var(--accent); }
+    .comment { display: flex; gap: 8px; margin-bottom: 16px; }
+    .comment-av { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; flex-shrink: 0; }
+    .comment-body { flex: 1; border: 1px solid var(--border); border-radius: 6px; padding: 12px; }
+    .comment-name { font-size: 13px; font-weight: 600; }
+    .comment-content { font-size: 14px; line-height: 1.5; margin-top: 4px; }
+    .comment-footer { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
+    .not-found { padding: 48px; text-align: center; color: var(--text-secondary); }
+
+    @media (max-width: 768px) { .article-header, .article-body, .article-actions, .comments-section { padding-left: 20px; padding-right: 20px; } .article-title { font-size: 24px; } }
+  `;
+
+  render() {
+    if (this.loaderData.notFound) return html`<div class="card"><div class="not-found">Post not found</div></div>`;
+    const { display_name, username, initials, color, title, tags, date, readtime, content, likes, comments } = this.loaderData;
+    return html`
+      <div class="card">
+        <div class="article-header">
+          <h1 class="article-title">${title}</h1>
+          <div class="article-tags">${(tags || []).map((t: string) => html`<a class="article-tag" href="#">#${t}</a>`)}</div>
+          <div class="article-meta">
+            <div class="article-avatar" style="background:${color}">${initials}</div>
+            <div>
+              <div class="article-author"><a href="/profile/${username}">${display_name}</a></div>
+              <div class="article-date">${date} · ${readtime}</div>
+            </div>
+          </div>
+        </div>
+        <div class="article-body">${content}</div>
+        ${this.loaderData.media ? html`
+          <div class="article-media">
+            ${this.loaderData.media.type === 'video' ? html`
+              <video src="${this.loaderData.media.url}" poster="${this.loaderData.media.poster || ''}" controls preload="none"></video>
+            ` : html`
+              <img src="${this.loaderData.media.url}" alt="" loading="lazy">
+            `}
+          </div>
+        ` : ''}
+        <div class="article-actions">
+          <button class="action-btn">${svg.heart} ${likes} Reactions</button>
+          <button class="action-btn">${svg.comment} ${(comments || []).length} Comments</button>
+          <button class="action-btn">${svg.bookmark} Save</button>
+        </div>
+        <div class="comments-section">
+          <div class="comments-title">Discussion</div>
+          <div class="comment-form">
+            <div class="comment-avatar">S</div>
+            <input class="comment-input" placeholder="Add to the discussion">
+          </div>
+          ${(comments || []).map((c: any) => html`
+            <div class="comment">
+              <div class="comment-av" style="background:${c.color}">${c.initials}</div>
+              <div class="comment-body">
+                <div class="comment-name">${c.display_name}</div>
+                <div class="comment-content">${c.content}</div>
+                <div class="comment-footer">${c.likes} likes · ${c.time}</div>
+              </div>
+            </div>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+}