@nuraly/lumenjs 0.1.2 → 0.1.4

package/templates/social/pages/index.ts

@@ -0,0 +1,351 @@
+import { LitElement, html, css } from 'lit';
+
+const svg = {
+  comment: html`<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>`,
+  repost: html`<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 014-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 01-4 4H3"/></svg>`,
+  heart: html`<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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>`,
+  share: html`<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>`,
+};
+
+export async function loader() {
+  return {
+    stories: [
+      { username: 'aymen', name: 'You', initials: 'AL', color: '#7c3aed', avatar: 'https://avatars.githubusercontent.com/u/3775924?v=4', isYou: true, image: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=700&fit=crop', caption: 'Late night coding session' },
+      { username: 'alex_design', name: 'Alex', initials: 'AR', color: '#e44d26', image: 'https://images.unsplash.com/photo-1561070791-2526d30994b5?w=400&h=700&fit=crop', caption: 'New design system preview' },
+      { username: 'emma_data', name: 'Emma', initials: 'EW', color: '#3572a5', image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=700&fit=crop', caption: 'Data viz experiments' },
+      { username: 'mike_ops', name: 'Mike', initials: 'MJ', color: '#22c55e', image: 'https://images.unsplash.com/photo-1618401471353-b98afee0b2eb?w=400&h=700&fit=crop', caption: 'Deploying to prod' },
+      { username: 'lisa_pm', name: 'Lisa', initials: 'LP', color: '#a855f7', image: 'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=400&h=700&fit=crop', caption: 'Team offsite recap' },
+      { username: 'tom_arch', name: 'Tom', initials: 'TB', color: '#ef4444', image: 'https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=400&h=700&fit=crop', caption: 'Architecture deep dive' },
+      { username: 'nina_sec', name: 'Nina', initials: 'NP', color: '#f59e0b', image: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=400&h=700&fit=crop', caption: 'Security audit walkthrough' },
+    ],
+    widgets: [
+      { type: 'poll', position: 2, username: 'alex_design', display_name: 'Alex Rivera', initials: 'AR', color: '#e44d26', time: '3h', question: 'What framework do you use most in 2025?', options: [{ label: 'React', pct: 45 }, { label: 'LumenJS', pct: 35 }, { label: 'Vue', pct: 15 }, { label: 'Other', pct: 5 }], votes: 142 },
+      { type: 'event', position: 4, username: 'mike_ops', display_name: 'Mike Johnson', initials: 'MJ', color: '#22c55e', time: '5h', title: 'DevOps Meetup 2025', date: 'Apr 5, 2025 · 6:00 PM', location: 'Online · Zoom', attendees: 48 },
+      { type: 'job', position: 6, username: 'emma_data', display_name: 'Emma Williams', initials: 'EW', color: '#3572a5', time: '8h', company: 'DataFlow', role: 'Senior ML Engineer', loc: 'Remote', salary: '$150k - $200k' },
+    ],
+    posts: [
+      { id: 1, username: 'aymen', display_name: 'Aymen Labidi', initials: 'AL', color: '#7c3aed', avatar: 'https://avatars.githubusercontent.com/u/3775924?v=4', content: 'Just shipped a new feature using LumenJS! The file-based routing makes everything so clean. No more route config files. Every page is just a .ts file in the pages/ directory. Dynamic routes use [param] syntax. Layouts nest automatically with _layout.ts. Server loaders run before render and pass data as properties. SSR works out of the box with Lit SSR. This is the future of web development.', media: { type: 'image', url: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=600&h=340&fit=crop' }, likes: 42, comments: 5, reposts: 12, time: '2h' },
+      { id: 2, username: 'alex_design', display_name: 'Alex Rivera', initials: 'AR', color: '#e44d26', content: 'Working on a new design system. The key insight after 6 months: consistency beats creativity when building at scale. Every component should feel like it belongs. We started with 40 one-off components and consolidated down to 12 primitives that compose into everything we need. The trick is establishing clear constraints early — spacing scale, color tokens, typography ramp — then letting the system do the heavy lifting.', likes: 38, comments: 3, reposts: 8, time: '4h' },
+      { id: 3, username: 'emma_data', display_name: 'Emma Williams', initials: 'EW', color: '#3572a5', content: 'Trained a new model on customer feedback data. Accuracy went from 78% to 94% just by cleaning the input data. No architecture changes needed. The biggest wins: removing duplicates, fixing encoding issues, normalizing date formats, and filtering out bot-generated entries. Spent 3 days on data prep vs 1 day on model tuning. Garbage in, garbage out is the most underrated lesson in ML.', media: { type: 'image', url: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=340&fit=crop' }, likes: 67, comments: 8, reposts: 21, time: '6h' },
+      { id: 4, username: 'mike_ops', display_name: 'Mike Johnson', initials: 'MJ', color: '#22c55e', content: 'Migrated our entire CI/CD pipeline from Jenkins to GitHub Actions. Results: 40% faster builds, half the YAML config, and our team actually understands the pipeline now. The reusable workflow feature is a game changer — we have one workflow that all 12 services share.', 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: 4, reposts: 6, time: '1d' },
+      { id: 5, username: 'aymen', display_name: 'Aymen Labidi', initials: 'AL', color: '#7c3aed', avatar: 'https://avatars.githubusercontent.com/u/3775924?v=4', content: 'Hot take: TypeScript\'s type system is a programming language in itself. Conditional types, mapped types, template literal types, recursive types... you can implement a full type-level parser if you want to. And I love every bit of it. The DX improvement from strict types is worth every extra line of type annotation.', likes: 85, comments: 12, reposts: 15, time: '1d' },
+      { id: 6, username: 'emma_data', display_name: 'Emma Williams', initials: 'EW', color: '#3572a5', content: 'PSA: If you\'re using pandas, try polars. I switched a production pipeline and it\'s not just faster — the lazy evaluation API is more intuitive, the error messages are clearer, and it handles larger-than-memory datasets natively. Here\'s a benchmark: 2GB CSV, pandas took 45s to groupby-aggregate, polars did it in 3s.', media: { type: 'image', url: 'https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=600&h=340&fit=crop' }, likes: 93, comments: 15, reposts: 34, time: '3d' },
+    ],
+  };
+}
+
+export class PageIndex extends LitElement {
+  static properties = { loaderData: { type: Object }, _storyOpen: { state: true }, _storyIdx: { state: true }, _storyProgress: { state: true } };
+  loaderData: any = {};
+  _storyOpen: boolean = false;
+  _storyIdx: number = 0;
+  _storyProgress: number = 0;
+  _storyTimer: any = null;
+  private _shell?: HTMLElement;
+
+  connectedCallback() {
+    super.connectedCallback();
+    requestAnimationFrame(() => {
+      const shell = this.closest('layout-root')?.shadowRoot?.querySelector('.shell') as HTMLElement;
+      if (shell) { shell.classList.add('show-right'); this._shell = shell; }
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._shell) { this._shell.classList.remove('show-right'); this._shell = undefined; }
+  }
+
+
+  static styles = css`
+    :host { display: block; }
+
+    /* Stories bar */
+    .stories { display: flex; gap: 6px; padding: 12px 12px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
+    .stories::-webkit-scrollbar { display: none; }
+    .story { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; flex-shrink: 0; width: 64px; }
+    .story-ring { width: 56px; height: 80px; border-radius: 10px; overflow: visible; border: 1px solid var(--border); }
+    .story-ring.you { }
+    .story-avatar { width: 56px; height: 80px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; overflow: hidden; }
+    .story-avatar img { width: 100%; height: 100%; object-fit: cover; }
+    .story-name { font-size: 11px; color: var(--text-secondary); max-width: 60px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .story-plus { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
+    .story-plus svg { width: 10px; height: 10px; }
+    .story-avatar-wrap { position: relative; }
+    @keyframes pulse-ring { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
+
+    /* Story/Reel viewer */
+    .story-viewer { position: fixed; inset: 0; z-index: 200; background: #000; display: flex; align-items: center; justify-content: center; }
+    .story-viewer-inner { position: relative; width: 100%; max-width: 420px; height: 100%; max-height: 100vh; }
+    .story-image { width: 100%; height: 100%; object-fit: cover; }
+    .story-progress { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 4px; z-index: 2; }
+    .story-bar { flex: 1; height: 3px; background: rgba(255,255,255,0.3); border-radius: 2px; overflow: hidden; }
+    .story-bar-fill { height: 100%; background: var(--bg); border-radius: 2px; transition: width 0.1s linear; }
+    .story-top { position: absolute; top: 18px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; z-index: 2; }
+    .story-top-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; border: 2px solid #fff; overflow: hidden; }
+    .story-top-avatar img { width: 100%; height: 100%; object-fit: cover; }
+    .story-top-name { color: #fff; font-size: 14px; font-weight: 700; }
+    .story-top-time { color: rgba(255,255,255,0.7); font-size: 12px; }
+    .story-top-live { background: #e53935; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
+    .story-close { margin-left: auto; width: 32px; height: 32px; border: none; background: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+    .story-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px 16px 24px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); z-index: 2; }
+    .story-caption-text { color: #fff; font-size: 15px; line-height: 1.4; }
+    .story-nav { position: absolute; inset: 0; display: flex; z-index: 1; }
+    .story-nav-prev, .story-nav-next { flex: 1; cursor: pointer; }
+
+    /* Widget cards */
+    .widget-card { border-bottom: 1px solid var(--border); padding: 12px 16px; }
+    .widget-header { display: flex; gap: 10px; margin-bottom: 10px; }
+    .widget-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #fff; flex-shrink: 0; }
+    .widget-meta { flex: 1; }
+    .widget-name { font-weight: 700; font-size: 15px; }
+    .widget-handle { color: var(--text-secondary); font-size: 14px; }
+    .widget-badge { font-size: 11px; color: var(--accent); background: rgba(124,58,237,0.1); padding: 2px 8px; border-radius: 4px; font-weight: 600; margin-left: 6px; }
+
+    /* Poll widget */
+    .poll-question { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
+    .poll-option { margin-bottom: 6px; }
+    .poll-bar { height: 28px; border-radius: 6px; background: var(--input-bg); position: relative; overflow: hidden; display: flex; align-items: center; padding: 0 10px; }
+    .poll-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(124,58,237,0.15); border-radius: 6px; }
+    .poll-label { position: relative; font-size: 13px; flex: 1; }
+    .poll-pct { position: relative; font-size: 13px; font-weight: 700; }
+    .poll-total { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
+
+    /* Event widget */
+    .event-card { background: var(--bg-secondary); border-radius: 12px; padding: 14px; }
+    .event-title { font-size: 16px; font-weight: 700; }
+    .event-detail { font-size: 13px; color: var(--text-secondary); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
+    .event-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
+    .event-attendees { font-size: 12px; color: var(--text-secondary); }
+    .event-btn { padding: 6px 16px; border-radius: 9999px; border: 1px solid var(--accent); color: var(--accent); background: var(--bg); font-size: 13px; font-weight: 600; cursor: pointer; }
+    .event-btn:hover { background: rgba(124,58,237,0.1); }
+
+    /* Job widget */
+    .job-card { background: var(--bg-secondary); border-radius: 12px; padding: 14px; }
+    .job-company { font-size: 13px; color: var(--text-secondary); }
+    .job-role { font-size: 16px; font-weight: 700; margin-top: 2px; }
+    .job-details { display: flex; gap: 12px; margin-top: 6px; font-size: 13px; color: var(--text-secondary); }
+    .job-btn { margin-top: 10px; padding: 6px 16px; border-radius: 9999px; background: var(--accent); color: #fff; border: none; font-size: 13px; font-weight: 600; cursor: pointer; }
+    .job-btn:hover { background: var(--accent-hover); }
+
+    .post { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; text-decoration: none; color: inherit; }
+    .post:hover { background: var(--bg-secondary); }
+    .post-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #fff; flex-shrink: 0; overflow: hidden; }
+    .post-avatar img { width: 100%; height: 100%; object-fit: cover; }
+    .post-media { margin-top: 8px; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; background: var(--input-bg); }
+    .post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
+    .post-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
+    .post-media .live-badge { position: absolute; top: 8px; left: 8px; background: #e53935; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
+    .post-media-wrap { position: relative; height: 100%; }
+    .post-body { flex: 1; min-width: 0; }
+    .post-header { display: flex; align-items: baseline; gap: 4px; }
+    .post-name { font-weight: 700; font-size: 15px; }
+    .post-handle { color: var(--text-secondary); font-size: 14px; }
+    .post-dot { color: var(--text-secondary); font-size: 14px; }
+    .post-time { color: var(--text-secondary); font-size: 14px; }
+    .post-content { margin-top: 2px; line-height: 1.4; font-size: 15px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
+    .post-content.expanded { -webkit-line-clamp: unset; }
+    .see-more { color: var(--accent); font-size: 14px; border: none; background: none; cursor: pointer; padding: 2px 0; font-weight: 500; }
+    .see-more:hover { text-decoration: underline; }
+    .post-actions { display: flex; gap: 0; margin-top: 8px; margin-left: -8px; }
+    .action { display: flex; align-items: center; gap: 4px; color: var(--text-secondary); font-size: 13px; border: none; background: none; cursor: pointer; padding: 4px 8px; border-radius: 9999px; min-width: 60px; }
+    .action:hover { color: var(--accent); background: rgba(29,155,240,0.1); }
+    .action.repost:hover { color: #00ba7c; background: rgba(0,186,124,0.1); }
+    .action.heart:hover { color: #f91880; background: rgba(249,24,128,0.1); }
+  `;
+
+  _openStory(idx: number) {
+    this._storyIdx = idx;
+    this._storyOpen = true;
+    this._storyProgress = 0;
+    this._startStoryTimer();
+  }
+
+  _closeStory() {
+    this._storyOpen = false;
+    if (this._storyTimer) { clearInterval(this._storyTimer); this._storyTimer = null; }
+  }
+
+  _startStoryTimer() {
+    if (this._storyTimer) clearInterval(this._storyTimer);
+    this._storyProgress = 0;
+    this._storyTimer = setInterval(() => {
+      this._storyProgress += 2;
+      if (this._storyProgress >= 100) this._nextStory();
+    }, 100);
+  }
+
+  _nextStory() {
+    const stories = this.loaderData.stories || [];
+    if (this._storyIdx < stories.length - 1) {
+      this._storyIdx++;
+      this._startStoryTimer();
+    } else {
+      this._closeStory();
+    }
+  }
+
+  _prevStory() {
+    if (this._storyIdx > 0) {
+      this._storyIdx--;
+      this._startStoryTimer();
+    }
+  }
+
+  _renderWidget(w: any) {
+    if (w.type === 'poll') return html`
+      <div class="widget-card">
+        <div class="widget-header">
+          <div class="widget-avatar" style="background:${w.color}">${w.initials}</div>
+          <div class="widget-meta">
+            <span class="widget-name">${w.display_name}</span>
+            <span class="widget-handle">· ${w.time}</span>
+            <span class="widget-badge">Poll</span>
+          </div>
+        </div>
+        <div class="poll-question">${w.question}</div>
+        ${w.options.map((o: any) => html`
+          <div class="poll-option">
+            <div class="poll-bar"><div class="poll-fill" style="width:${o.pct}%"></div><span class="poll-label">${o.label}</span><span class="poll-pct">${o.pct}%</span></div>
+          </div>
+        `)}
+        <div class="poll-total">${w.votes} votes</div>
+      </div>`;
+    if (w.type === 'event') return html`
+      <div class="widget-card">
+        <div class="widget-header">
+          <div class="widget-avatar" style="background:${w.color}">${w.initials}</div>
+          <div class="widget-meta">
+            <span class="widget-name">${w.display_name}</span>
+            <span class="widget-handle">· ${w.time}</span>
+            <span class="widget-badge">Event</span>
+          </div>
+        </div>
+        <div class="event-card">
+          <div class="event-title">${w.title}</div>
+          <div class="event-detail">${w.date}</div>
+          <div class="event-detail">${w.location}</div>
+          <div class="event-footer">
+            <span class="event-attendees">${w.attendees} attending</span>
+            <button class="event-btn">Interested</button>
+          </div>
+        </div>
+      </div>`;
+    if (w.type === 'job') return html`
+      <div class="widget-card">
+        <div class="widget-header">
+          <div class="widget-avatar" style="background:${w.color}">${w.initials}</div>
+          <div class="widget-meta">
+            <span class="widget-name">${w.display_name}</span>
+            <span class="widget-handle">· ${w.time}</span>
+            <span class="widget-badge">Job</span>
+          </div>
+        </div>
+        <div class="job-card">
+          <div class="job-company">${w.company}</div>
+          <div class="job-role">${w.role}</div>
+          <div class="job-details"><span>${w.loc}</span><span>${w.salary}</span></div>
+          <button class="job-btn">Apply</button>
+        </div>
+      </div>`;
+    return '';
+  }
+
+  render() {
+    const posts = this.loaderData.posts || [];
+    const stories = this.loaderData.stories || [];
+    const widgets = this.loaderData.widgets || [];
+
+    // Merge posts and widgets by position
+    const feed: any[] = [];
+    let postIdx = 0;
+    for (let i = 0; postIdx < posts.length; i++) {
+      const w = widgets.find((w: any) => w.position === i);
+      if (w) { feed.push({ _widget: true, ...w }); }
+      if (postIdx < posts.length) { feed.push(posts[postIdx]); postIdx++; }
+    }
+
+    return html`
+      <div class="stories">
+        ${stories.map((s: any, i: number) => html`
+          <div class="story" @click=${() => this._openStory(i)}>
+            <div class="story-ring ${s.isYou ? 'you' : ''}">
+              <div class="story-avatar-wrap">
+                <div class="story-avatar">
+                  <img src="${s.image}" alt="">
+                </div>
+                ${s.isYou ? html`<div class="story-plus"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></div>` : ''}
+              </div>
+            </div>
+            <span class="story-name">${s.name}</span>
+          </div>
+        `)}
+      </div>
+      ${feed.map((item: any) => item._widget
+        ? this._renderWidget(item)
+        : html`
+        <a class="post" href="/post/${item.id}">
+          <div class="post-avatar" style="background:${item.color}">${item.avatar ? html`<img src="${item.avatar}" alt="">` : item.initials}</div>
+          <div class="post-body">
+            <div class="post-header">
+              <span class="post-name">${item.display_name}</span>
+              <span class="post-handle">@${item.username}</span>
+              <span class="post-dot">·</span>
+              <span class="post-time">${item.time}</span>
+            </div>
+            <div class="post-content ${item.id === 1 ? '' : 'expanded'}" id="content-${item.id}">${item.content}</div>
+            ${item.id === 1 ? html`<button class="see-more" @click=${(e: Event) => { e.preventDefault(); e.stopPropagation(); const el = this.shadowRoot?.getElementById('content-1'); if (el) { el.classList.toggle('expanded'); (e.target as HTMLElement).textContent = el.classList.contains('expanded') ? 'Show less' : 'See more'; }}}>See more</button>` : ''}
+            ${item.media ? html`
+              <div class="post-media">
+                <div class="post-media-wrap">
+                  ${item.media.type === 'video' ? html`
+                    <video src="${item.media.url}" poster="${item.media.poster || ''}" controls preload="none"></video>
+                  ` : html`
+                    <img src="${item.media.url}" alt="" loading="lazy">
+                  `}
+                </div>
+              </div>
+            ` : ''}
+            <div class="post-actions">
+              <button class="action">${svg.comment} ${item.comments}</button>
+              <button class="action repost">${svg.repost} ${item.reposts}</button>
+              <button class="action heart">${svg.heart} ${item.likes}</button>
+              <button class="action">${svg.share}</button>
+            </div>
+          </div>
+        </a>
+      `)}
+      ${this._storyOpen ? html`
+        <div class="story-viewer">
+          <div class="story-viewer-inner">
+            <img class="story-image" src="${stories[this._storyIdx]?.image}" alt="">
+            <div class="story-progress">
+              ${stories.map((_: any, i: number) => html`
+                <div class="story-bar">
+                  <div class="story-bar-fill" style="width:${i < this._storyIdx ? 100 : i === this._storyIdx ? this._storyProgress : 0}%"></div>
+                </div>
+              `)}
+            </div>
+            <div class="story-top">
+              <div class="story-top-avatar" style="background:${stories[this._storyIdx]?.color}">
+                ${stories[this._storyIdx]?.avatar ? html`<img src="${stories[this._storyIdx]?.avatar}" alt="">` : stories[this._storyIdx]?.initials}
+              </div>
+              <span class="story-top-name">${stories[this._storyIdx]?.name}</span>
+              <span class="story-top-time">5h</span>
+              <button class="story-close" @click=${() => this._closeStory()}>
+                <svg width="24" height="24" 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>
+              </button>
+            </div>
+            <div class="story-caption">
+              <div class="story-caption-text">${stories[this._storyIdx]?.caption}</div>
+            </div>
+            <div class="story-nav">
+              <div class="story-nav-prev" @click=${() => this._prevStory()}></div>
+              <div class="story-nav-next" @click=${() => this._nextStory()}></div>
+            </div>
+          </div>
+        </div>
+      ` : ''}
+    `;
+  }
+}