npm - @rathnasgala/theme - Versions diffs - 0.0.20 → 2.0.1 - Mend

@rathnasgala/theme 0.0.20 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/package.json +1 -1
package/payload/.gala/managed-files.json +22 -19
package/payload/eleventy.config.js +15 -1
package/payload/lib/site-config.js +13 -5
package/payload/package-lock.json +487 -2
package/payload/package.json +7 -6
package/payload/scripts/build-reader.js +24 -0
package/payload/scripts/lint.js +21 -0
package/payload/src/_includes/components/ui.njk +26 -17
package/payload/src/_includes/layouts/base.njk +10 -11
package/payload/src/_includes/layouts/post.njk +5 -6
package/payload/src/accent.11ty.js +10 -0
package/payload/src/assets/engagement-comments.js +115 -234
package/payload/src/assets/engagement-transport.js +10 -4
package/payload/src/assets/interactions.js +51 -1
package/payload/src/assets/reader.js +2 -0
package/payload/src/assets/theme.css +1 -676
package/payload/src/client/reader.js +5 -0
package/payload/src/styles/theme.css +811 -0
package/payload/src/assets/vendor/hooks.js +0 -2
package/payload/src/assets/vendor/htm.js +0 -2
package/payload/src/assets/vendor/preact.js +0 -2
package/payload/src/assets/vendor/signals-core.js +0 -2
package/payload/src/assets/vendor/signals.js +0 -2

package/payload/src/_includes/layouts/base.njk CHANGED Viewed

@@ -1,9 +1,10 @@
 <!doctype html>
-<html lang="{{ post.language or site.site.defaultLanguage }}" data-theme="{{ site.design.theme | default('modern') }}" data-layout="{{ site.design.layout }}" data-palette="{{ site.design.palette | default('default') }}" data-mode="{{ site.design.colorMode | default('system') }}"{% if site.accent %} style="--gala-accent-light: {{ site.accent.light }}; --gala-accent-dark: {{ site.accent.dark }}"{% endif %}>
+<html lang="{{ post.language or site.site.defaultLanguage }}" data-theme="{{ site.design.theme | default('modern') }}" data-layout="{{ site.design.layout | default('article-first') }}" data-palette="{{ site.design.palette | default('default') }}" data-mode="{{ site.design.colorMode | default('system') }}">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script>(function(){try{var m=localStorage.getItem('gala-color-mode');if(m==='light'||m==='dark'||m==='system')document.documentElement.dataset.mode=m}catch(e){}})();</script>
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; base-uri 'self'; object-src 'none'; script-src 'self' 'sha256-{{ themeBootstrap | sha256Csp }}'{% if seo %} 'sha256-{{ seo.structuredDataJson | sha256Csp }}'{% endif %}; style-src 'self'; img-src 'self' data: https:; connect-src 'self' {{ site.platform.apiBaseUrl or 'https://api.gala67.com' }}; frame-src {{ site.platform.apiBaseUrl or 'https://api.gala67.com' }} https://www.youtube-nocookie.com https://codepen.io; form-action 'self'; upgrade-insecure-requests">
+    <script>{{ themeBootstrap | safe }}</script>
     <title>{{ post.frontmatter.title or title }} · {{ site.site.name }}</title>
     {% if post %}<link rel="canonical" href="{{ post.canonicalUrl }}">{% endif %}
     {% for alternate in hreflangLinks %}<link rel="alternate" hreflang="{{ alternate.hreflang }}" href="{{ alternate.href }}">{% endfor %}
@@ -23,20 +24,17 @@
     {% endif %}
     {% if post.publicationState == "tombstoned" %}<meta name="robots" content="noindex">{% endif %}
     <link rel="stylesheet" href="{{ '/assets/theme.css' | url }}">
+    <link rel="stylesheet" href="{{ '/assets/accent.css' | url }}">
     <link rel="stylesheet" href="{{ '/custom.css' | url }}">
-    <script src="{{ '/assets/theme-mode.js' | url }}" defer></script>
-    <script src="{{ '/assets/preferences.js' | url }}" defer></script>
     <link rel="icon" href="{{ '/assets/favicon.svg' | url }}" type="image/svg+xml">
-    <script src="{{ '/assets/interactions.js' | url }}" defer></script>
-    <script type="module" src="{{ '/assets/engagement-comments.js' | url }}"></script>
-    <script src="{{ '/assets/search.js' | url }}" defer></script>
+    <script src="{{ '/assets/reader.js' | url }}" defer></script>
   </head>
   <body>
+    <a class="gala-skip-link" href="#main-content">Skip to content</a>
     <header class="gala-site-header">
-      <a class="gala-icon-control" href="{{ '/' | url }}" aria-label="Home" title="Home">
-        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.2 12 3.5l9 6.7"/><path d="M5.4 8.9V19a1.4 1.4 0 0 0 1.4 1.4h3.1v-5.1h4.2v5.1h3.1A1.4 1.4 0 0 0 18.6 19V8.9"/></svg>
-      </a>
+      <a class="gala-site-name" href="{{ '/' | url }}" aria-label="Home">{{ site.site.name }}</a>
       <nav class="gala-site-header__actions" aria-label="Site controls">
+        {% if post %}<a class="gala-header-link" href="#article">Article</a><a class="gala-header-link" href="#conversation">Conversation</a>{% endif %}
         {% if site.contact.enabled %}<a class="gala-icon-control" href="{{ '/contact/' | url }}" aria-label="Contact author" title="Contact">
           <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5.4" width="18" height="13.2" rx="2.2"/><path d="m3.9 7.3 7.2 5.1a1.6 1.6 0 0 0 1.8 0l7.2-5.1"/></svg>
         </a>{% endif %}
@@ -50,8 +48,9 @@
         <button class="gala-icon-control" type="button" data-open-dialog="gala-search-dialog" aria-label="Search" title="Search">
           <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20.3 20.3-4.4-4.4"/></svg>
         </button>
-        <button class="gala-icon-control" type="button" data-open-dialog="gala-account-dialog" data-user-control aria-label="Sign in or view account" title="Account">
+        <button class="gala-account-control" type="button" data-open-dialog="gala-account-dialog" data-user-control aria-label="Sign in or view account" title="Account">
           <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 20.4v-1.7a3.9 3.9 0 0 0-3.9-3.9H8.9A3.9 3.9 0 0 0 5 18.7v1.7"/><circle cx="12" cy="7.6" r="3.9"/></svg>
+          <span data-user-label>Sign in</span>
         </button>
       </nav>
     </header>

package/payload/src/_includes/layouts/post.njk CHANGED Viewed

@@ -1,12 +1,11 @@
 ---
 layout: layouts/base.njk
 ---
-{% from "components/ui.njk" import engagementSummary, languageSwitcher, shareControl, tableOfContents %}
-<article>
-  {% if post.publicationState == "published" %}<h1>{{ post.frontmatter.title }}</h1>{% endif %}
+{% from "components/ui.njk" import engagementSummary, languageSwitcher, tableOfContents %}
+<article id="article" class="gala-article">
+  {% if post.publicationState == "published" %}<header class="gala-article-header"><p class="gala-eyebrow">Published {{ post.frontmatter.publishAfterDate }} · {{ post.language }}</p><h1>{{ post.frontmatter.title }}</h1><p class="gala-byline">By {{ post.frontmatter.author or site.site.author or site.site.name }}</p></header>{% endif %}
   {% if post.publicationState == "published" %}{{ languageSwitcher(hreflangLinks, post.language) }}{% endif %}
   {% if postTableOfContents.length %}{{ tableOfContents(postTableOfContents) }}{% endif %}
-  {{ content | safe }}
-  {% if post.publicationState == "published" %}{{ engagementSummary(post.id, engagement, site.platform.apiBaseUrl or "https://api.gala67.com") }}{% endif %}
-  {% if post.publicationState == "published" %}{{ shareControl(post.canonicalUrl, shareTargets) }}{% endif %}
+  <div class="gala-markdown">{{ content | safe }}</div>
+  {% if post.publicationState == "published" %}{{ engagementSummary(post.id, post.canonicalUrl, engagement, site.platform.apiBaseUrl or "https://api.gala67.com") }}{% endif %}
 </article>

package/payload/src/accent.11ty.js ADDED Viewed

@@ -0,0 +1,10 @@
+export default class AccentStylesheet {
+  data() {
+    return { permalink: '/assets/accent.css', eleventyExcludeFromCollections: true };
+  }
+  render({ site }) {
+    if (!site.accent) return '';
+    return `:root{--gala-accent-light:${site.accent.light};--gala-accent-dark:${site.accent.dark}}\n`;
+  }
+}

package/payload/src/assets/engagement-comments.js CHANGED Viewed

@@ -1,264 +1,145 @@
-/**
- * The conversation under an article.
- *
- * Built as an island rather than by hand-writing DOM, because the state here is real: a thread
- * five deep, a page of roots with more behind a cursor, a reply form belonging to one comment, an
- * edit in progress, and a reader who may sign in halfway through. The imperative version rebuilt
- * the whole region from a fresh fetch after every write, which is how a posted comment could take
- * a browser cache's word for it and not appear at all — and a comment that is not rendered has no
- * Reply button, so the thread died with it.
- *
- * The article itself is never touched. Eleventy renders the post and everything search engines
- * read; this mounts only into the comments container, which was always filled from the API and so
- * has nothing to lose by being rendered here.
- */
-import { h, render } from './vendor/preact.js';
-import { useCallback, useEffect, useMemo, useState } from './vendor/hooks.js';
-import htm from './vendor/htm.js';
-// Importing the signals integration is what lets a component re-render when it reads `.value`.
-import './vendor/signals.js';
-import {
-  engagementErrorMessage, requestSignIn, sendEngagementWrite, sessionUser,
-} from './engagement-transport.js';
+import { engagementErrorMessage, requestSignIn, sendEngagementWrite, sessionUser } from './engagement-transport.js';
-const html = htm.bind(h);
-/** The server's own limit. A reply deeper than this is refused, so it is not offered. */
 const MAXIMUM_DEPTH = 5;
-const isoTime = (value) => {
-  const at = Date.parse(value);
-  return Number.isFinite(at) ? new Date(at).toLocaleDateString() : '';
+const element = (name, className, text) => {
+  const node = document.createElement(name);
+  if (className) node.className = className;
+  if (text !== undefined) node.textContent = text;
+  return node;
 };
-/** Roots in order, each followed by its own descendants, from one flat API page. */
-function toThreads(items) {
-  const byParent = new Map();
+function threads(items) {
+  const children = new Map();
   for (const item of items) {
-    const key = item.parentCommentId ?? '';
-    if (!byParent.has(key)) byParent.set(key, []);
-    byParent.get(key).push(item);
+    const parent = item.parentCommentId ?? '';
+    if (!children.has(parent)) children.set(parent, []);
+    children.get(parent).push(item);
   }
-  const build = (parentId, depth) => (byParent.get(parentId) ?? []).map((comment) => ({
-    ...comment,
-    depth,
-    replies: build(comment.commentId, depth + 1),
+  const build = (parent, depth) => (children.get(parent) ?? []).map((item) => ({
+    ...item, depth, replies: build(item.commentId, depth + 1),
   }));
   return build('', 0);
 }
-function Comment({ comment, reader, onReply, onEdit, onDelete, busy }) {
-  const [replying, setReplying] = useState(false);
-  const [editing, setEditing] = useState(false);
-  const [draft, setDraft] = useState('');
-  const mine = !comment.deleted && reader && comment.author?.userId === reader.id;
-  const canReply = !comment.deleted && comment.depth < MAXIMUM_DEPTH;
-  const submitReply = async (event) => {
-    event.preventDefault();
-    if (!draft.trim()) return;
-    const posted = await onReply(comment.commentId, draft.trim());
-    if (posted) { setDraft(''); setReplying(false); }
-  };
-  const submitEdit = async (event) => {
-    event.preventDefault();
-    if (!draft.trim()) return;
-    const saved = await onEdit(comment.commentId, draft.trim());
-    if (saved) setEditing(false);
-  };
-  return html`
-    <li class="gala-comment" data-comment-id=${comment.commentId} data-depth=${comment.depth}>
-      <p class="gala-comment__meta">
-        <strong>${comment.author?.displayName ?? '[deleted]'}</strong>
-        ${comment.createdAt && html`<time datetime=${comment.createdAt}>${isoTime(comment.createdAt)}</time>`}
-        ${comment.editedAt && html`<span class="gala-comment__edited">edited</span>`}
-        ${comment.pending && html`<span class="gala-comment__pending">sending…</span>`}
-      </p>
+function commentsController(root, endpoint) {
+  const state = { items: [], cursor: null, total: 0, busy: false, status: '', loading: true };
+  const articleId = /\/v1\/articles\/([^/]+)\/engagement/.exec(endpoint)?.[1] ?? '';
-      ${editing
-        ? html`<form class="gala-comment__form" onSubmit=${submitEdit}>
-            <label class="gala-visually-hidden" for=${`edit-${comment.commentId}`}>Edit your comment</label>
-            <textarea id=${`edit-${comment.commentId}`} rows="3" value=${draft}
-              onInput=${(e) => setDraft(e.target.value)}></textarea>
-            <div class="gala-comment__controls">
-              <button type="submit" disabled=${busy}>Save</button>
-              <button type="button" onClick=${() => setEditing(false)}>Cancel</button>
-            </div>
-          </form>`
-        : html`<p class="gala-comment__body">${comment.deleted ? '[deleted]' : comment.body}</p>`}
-      ${!comment.deleted && html`
-        <div class="gala-comment-actions">
-          ${canReply && html`<button type="button" data-reply-comment=${comment.commentId}
-            onClick=${() => { setReplying((open) => !open); setDraft(''); }}>Reply</button>`}
-          ${mine && html`<button type="button" data-edit-comment=${comment.commentId}
-            onClick=${() => { setEditing(true); setDraft(comment.body ?? ''); }}>Edit</button>`}
-          ${mine && html`<button type="button" data-delete-comment=${comment.commentId}
-            onClick=${() => onDelete(comment.commentId)} disabled=${busy}>Delete</button>`}
-        </div>`}
-      ${replying && html`
-        <form class="gala-comment__form" onSubmit=${submitReply}>
-          <label class="gala-visually-hidden" for=${`reply-${comment.commentId}`}>
-            Reply to ${comment.author?.displayName ?? 'this comment'}
-          </label>
-          <textarea id=${`reply-${comment.commentId}`} rows="3" value=${draft} autofocus
-            placeholder="Write a reply" onInput=${(e) => setDraft(e.target.value)}></textarea>
-          <div class="gala-comment__controls">
-            <button type="submit" disabled=${busy || !draft.trim()}>Post reply</button>
-            <button type="button" onClick=${() => setReplying(false)}>Cancel</button>
-          </div>
-        </form>`}
-      ${comment.replies.length > 0 && html`
-        <ol class="gala-comment-replies">
-          ${comment.replies.map((reply) => html`
-            <${Comment} key=${reply.commentId} comment=${reply} reader=${reader} busy=${busy}
-              onReply=${onReply} onEdit=${onEdit} onDelete=${onDelete} />`)}
-        </ol>`}
-    </li>`;
-}
-function Comments({ endpoint }) {
-  // Reading `.value` during render subscribes this component to the signal, so a sign-in
-  // anywhere on the page re-renders the conversation without anything having to tell it.
-  const reader = sessionUser.value;
-  const [items, setItems] = useState([]);
-  const [cursor, setCursor] = useState(null);
-  const [total, setTotal] = useState(0);
-  const [status, setStatus] = useState('');
-  const [busy, setBusy] = useState(false);
-  const [draft, setDraft] = useState('');
-  const [loading, setLoading] = useState(true);
-  /* `fresh` skips the browser cache. The endpoint is `max-age=60, public`, which is right for a
-     cold visit and wrong straight after a write: the browser would answer from its own cache with
-     the state from before the reader wrote anything. */
-  const load = useCallback(async (nextCursor = '', { append = false, fresh = false } = {}) => {
+  async function load(nextCursor = '', { append = false, fresh = false } = {}) {
     const url = new URL(endpoint);
     if (nextCursor) url.searchParams.set('commentsCursor', nextCursor);
     const response = await fetch(url, {
-      headers: { Accept: 'application/json' },
-      credentials: 'omit',
-      cache: fresh ? 'no-store' : 'default',
+      headers: { Accept: 'application/json' }, credentials: 'omit', cache: fresh ? 'no-store' : 'default',
     });
     if (!response.ok) throw new Error(`Comments returned HTTP ${response.status}`);
-    const payload = await response.json();
-    const page = payload?.data?.comments;
-    if (!page) throw new TypeError('Comment page is invalid');
-    setItems((current) => (append ? [...current, ...page.items] : page.items));
-    setCursor(page.nextCursor ?? null);
-    if (Number.isSafeInteger(page.totalCount)) setTotal(page.totalCount);
-    return page;
-  }, [endpoint]);
-  useEffect(() => {
-    let live = true;
-    load().catch(() => { if (live) setStatus('Comments are temporarily unavailable.'); })
-      .finally(() => { if (live) setLoading(false); });
-    return () => { live = false; };
-  }, [load]);
-  // Signing in changes what the reader may do, not what the article says, so only re-read when
-  // the reader actually changes.
-  useEffect(() => {
-    if (!reader) return undefined;
-    load('', { fresh: true }).catch(() => {});
-    return undefined;
-  }, [reader?.id]);
+    const page = (await response.json())?.data?.comments;
+    if (!page || !Array.isArray(page.items)) throw new TypeError('Comment page is invalid');
+    state.items = append ? [...state.items, ...page.items] : page.items;
+    state.cursor = page.nextCursor ?? null;
+    if (Number.isSafeInteger(page.totalCount)) state.total = page.totalCount;
+  }
-  const write = useCallback(async (operation, payload, optimistic) => {
-    if (!reader) { requestSignIn({ kind: 'comment' }); return false; }
-    setBusy(true);
-    setStatus('');
-    if (optimistic) setItems((current) => [optimistic, ...current]);
+  async function write(operation, payload) {
+    if (!sessionUser.value) { requestSignIn({ kind: 'comment' }); return false; }
+    state.busy = true; state.status = ''; render();
     try {
       await sendEngagementWrite(operation, payload);
-      /* Re-read past the cache so what is on screen is what the server actually holds — the
-         optimistic row above is a promise to the reader, not a source of truth. */
       await load('', { fresh: true });
       return true;
     } catch (error) {
-      if (optimistic) {
-        setItems((current) => current.filter((item) => item.commentId !== optimistic.commentId));
-      }
-      setStatus(engagementErrorMessage(error.message));
+      state.status = engagementErrorMessage(error.message);
       return false;
-    } finally {
-      setBusy(false);
-    }
-  }, [reader?.id, load]);
-  const articleId = useMemo(() => {
-    const match = /\/v1\/articles\/([^/]+)\/engagement/.exec(endpoint);
-    return match ? match[1] : '';
-  }, [endpoint]);
+    } finally { state.busy = false; render(); }
+  }
-  const post = async (event) => {
-    event.preventDefault();
-    const body = draft.trim();
-    if (!body) return;
-    const posted = await write('comment.create', { articleId, body }, {
-      commentId: `pending-${crypto.randomUUID()}`,
-      parentCommentId: null,
-      body,
-      depth: 0,
-      createdAt: new Date().toISOString(),
-      author: { userId: reader?.id, displayName: reader?.displayName },
-      pending: true,
+  function form(label, initial, submit) {
+    const formNode = element('form', 'gala-comment__form');
+    const field = element('textarea');
+    field.rows = 3; field.value = initial; field.placeholder = label; field.setAttribute('aria-label', label);
+    const send = element('button', '', 'Post'); send.type = 'submit'; send.disabled = state.busy;
+    formNode.append(field, send);
+    formNode.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      const body = field.value.trim();
+      if (body && await submit(body)) field.value = '';
     });
-    if (posted) setDraft('');
-  };
-  const reply = (parentCommentId, body) =>
-    write('comment.create', { articleId, parentCommentId, body });
-  const edit = (commentId, body) => write('comment.edit', { articleId, commentId, body });
-  const remove = (commentId) => write('comment.delete', { articleId, commentId });
-  const threads = useMemo(() => toThreads(items), [items]);
-  return html`
-    <section class="gala-comments-island" aria-label="Comments">
-      <h2 class="gala-comments__heading">${total === 1 ? '1 comment' : `${total} comments`}</h2>
-      ${reader
-        ? html`<form class="gala-comment__form" onSubmit=${post}>
-            <label class="gala-visually-hidden" for="gala-new-comment">Add a comment</label>
-            <textarea id="gala-new-comment" rows="3" value=${draft} placeholder="Add a comment"
-              onInput=${(e) => setDraft(e.target.value)}></textarea>
-            <button type="submit" disabled=${busy || !draft.trim()}>Post comment</button>
-          </form>`
-        : html`<p class="gala-comments__prompt">
-            <button type="button" onClick=${() => requestSignIn({ kind: 'comment' })}>
-              Sign in to join the conversation
-            </button>
-          </p>`}
+    return formNode;
+  }
-      ${status && html`<p class="gala-comments__status" role="status">${status}</p>`}
+  function commentNode(comment) {
+    const item = element('li', 'gala-comment');
+    item.dataset.commentId = comment.commentId; item.dataset.depth = comment.depth;
+    const meta = element('p', 'gala-comment__meta');
+    meta.append(element('strong', '', comment.author?.displayName ?? '[deleted]'));
+    if (comment.createdAt) {
+      const time = element('time', '', new Date(comment.createdAt).toLocaleDateString());
+      time.dateTime = comment.createdAt; meta.append(time);
+    }
+    item.append(meta, element('p', 'gala-comment__body', comment.deleted ? '[deleted]' : comment.body));
+    if (!comment.deleted) {
+      const actions = element('div', 'gala-comment-actions');
+      if (comment.depth < MAXIMUM_DEPTH) {
+        const reply = element('button', '', 'Reply'); reply.type = 'button'; reply.dataset.replyComment = comment.commentId;
+        reply.addEventListener('click', () => {
+          const existing = item.querySelector(':scope > .gala-comment__form');
+          if (existing) { existing.remove(); return; }
+          actions.after(form(`Reply to ${comment.author?.displayName ?? 'this comment'}`, '',
+            (body) => write('comment.create', { articleId, parentCommentId: comment.commentId, body })));
+        }); actions.append(reply);
+      }
+      const mine = sessionUser.value && comment.author?.userId === sessionUser.value.id;
+      if (mine) {
+        const edit = element('button', '', 'Edit'); edit.type = 'button'; edit.dataset.editComment = comment.commentId;
+        edit.addEventListener('click', () => actions.after(form('Edit your comment', comment.body ?? '',
+          (body) => write('comment.edit', { articleId, commentId: comment.commentId, body }))));
+        const remove = element('button', '', 'Delete'); remove.type = 'button'; remove.dataset.deleteComment = comment.commentId;
+        remove.addEventListener('click', () => write('comment.delete', { articleId, commentId: comment.commentId }));
+        actions.append(edit, remove);
+      } else {
+        const report = element('button', '', 'Report'); report.type = 'button'; report.dataset.reportComment = comment.commentId;
+        report.addEventListener('click', () => write('comment.report', { articleId, commentId: comment.commentId, reason: 'OTHER' }));
+        actions.append(report);
+      }
+      item.append(actions);
+    }
+    if (comment.replies.length) {
+      const replies = element('ol', 'gala-comment-replies');
+      replies.append(...comment.replies.map(commentNode)); item.append(replies);
+    }
+    return item;
+  }
-      ${loading
-        ? html`<p class="gala-comments__status" role="status">Loading comments…</p>`
-        : threads.length === 0
-          ? html`<p class="gala-comments__empty">No comments yet.</p>`
-          : html`<ol class="gala-comments">
-              ${threads.map((comment) => html`
-                <${Comment} key=${comment.commentId} comment=${comment} reader=${reader}
-                  busy=${busy} onReply=${reply} onEdit=${edit} onDelete=${remove} />`)}
-            </ol>`}
+  function render() {
+    const section = element('section', 'gala-comments-island'); section.setAttribute('aria-label', 'Comments');
+    section.append(element('h2', 'gala-comments__heading', state.total === 1 ? '1 comment' : `${state.total} comments`));
+    if (sessionUser.value) section.append(form('Add a comment', '', (body) => write('comment.create', { articleId, body })));
+    else {
+      const prompt = element('p', 'gala-comments__prompt');
+      const signIn = element('button', '', 'Sign in to join the conversation'); signIn.type = 'button';
+      signIn.addEventListener('click', () => requestSignIn({ kind: 'comment' })); prompt.append(signIn); section.append(prompt);
+    }
+    if (state.status) { const status = element('p', 'gala-comments__status', state.status); status.role = 'status'; section.append(status); }
+    if (state.loading) section.append(element('p', 'gala-comments__status', 'Loading comments…'));
+    else if (!state.items.length) section.append(element('p', 'gala-comments__empty', 'No comments yet.'));
+    else { const list = element('ol', 'gala-comments'); list.append(...threads(state.items).map(commentNode)); section.append(list); }
+    if (state.cursor) {
+      const more = element('button', 'gala-comments__more', 'Show more comments'); more.type = 'button'; more.disabled = state.busy;
+      more.addEventListener('click', async () => {
+        state.busy = true; render();
+        try { await load(state.cursor, { append: true }); } catch { state.status = 'Could not load more comments.'; }
+        state.busy = false; render();
+      }); section.append(more);
+    }
+    root.replaceChildren(section);
+  }
-      ${cursor && html`
-        <button type="button" class="gala-comments__more" disabled=${busy}
-          onClick=${() => { setBusy(true); load(cursor, { append: true })
-            .catch(() => setStatus('Could not load more comments.'))
-            .finally(() => setBusy(false)); }}>
-          Show more comments
-        </button>`}
-    </section>`;
+  window.addEventListener('gala-session-change', render);
+  render();
+  load().catch(() => { state.status = 'Comments are temporarily unavailable.'; })
+    .finally(() => { state.loading = false; render(); });
 }
-for (const mount of document.querySelectorAll('[data-gala-comments]')) {
-  const endpoint = mount.closest('[data-engagement-url]')?.dataset.engagementUrl;
-  if (endpoint) render(html`<${Comments} endpoint=${endpoint} />`, mount);
-}
+document.querySelectorAll('[data-gala-comments]').forEach((root) => {
+  const endpoint = root.closest('[data-engagement-url]')?.dataset.engagementUrl;
+  if (endpoint) commentsController(root, endpoint);
+});

package/payload/src/assets/engagement-transport.js CHANGED Viewed

@@ -9,9 +9,7 @@
  * `sessionUser` is a signal rather than a variable because more than one island depends on it and
  * they must not each keep their own copy going stale in its own way.
  */
-import { signal } from './vendor/signals.js';
-export const sessionUser = signal(null);
+export const sessionUser = { value: null };
 const sessionFrame = document.querySelector('[data-gala-session-frame]');
 const frameOrigin = sessionFrame ? new URL(sessionFrame.src).origin : null;
@@ -39,7 +37,14 @@ export function sendEngagementWrite(operation, payload) {
   }
   const requestId = crypto.randomUUID();
   return new Promise((resolve, reject) => {
-    pending.set(requestId, { resolve, reject });
+    const timeout = setTimeout(() => {
+      pending.delete(requestId);
+      reject(new Error('REQUEST_TIMEOUT'));
+    }, 10_000);
+    pending.set(requestId, {
+      resolve: (value) => { clearTimeout(timeout); resolve(value); },
+      reject: (error) => { clearTimeout(timeout); reject(error); }
+    });
     sessionFrame.contentWindow.postMessage(
       { type: 'gala-engagement-write', requestId, operation, payload }, frameOrigin);
   });
@@ -69,5 +74,6 @@ if (sessionFrame) {
     if (event.data?.type !== 'gala-session') return;
     const user = event.data.user;
     sessionUser.value = user && typeof user.id === 'string' ? user : null;
+    window.dispatchEvent(new CustomEvent('gala-session-change'));
   });
 }

package/payload/src/assets/interactions.js CHANGED Viewed

@@ -1,6 +1,7 @@
 function selectableFallback(control) {
   const region = control.closest('.gala-share');
   const fallback = region?.querySelector('.gala-share__fallback');
+  fallback?.classList.add('gala-share__fallback--visible');
   fallback?.focus();
   fallback?.select();
   const status = region?.querySelector('.gala-share__status');
@@ -87,6 +88,20 @@ document.addEventListener('click', async (event) => {
     return;
   }
+  const nativeShare = event.target.closest('[data-native-share]');
+  if (nativeShare) {
+    if (navigator.share) {
+      try {
+        await navigator.share({ title: document.title, url: nativeShare.dataset.nativeShare });
+      } catch (error) {
+        if (error.name !== 'AbortError') selectableFallback(nativeShare);
+      }
+    } else {
+      selectableFallback(nativeShare);
+    }
+    return;
+  }
   const copy = event.target.closest('[data-copy-code]');
   if (!copy) return;
   const code = copy.closest('.gala-code-block')?.querySelector('code');
@@ -225,6 +240,7 @@ let sessionUser = null;
 // The reader the current engagement render was built for: null until the frame reports, and
 // null again for a signed-out reader, so an anonymous load never re-requests.
 let renderedSessionUser = null;
+let readerStateRequestId = null;
 const pendingEngagementWrites = new Map();
 /**
@@ -331,7 +347,14 @@ function sendEngagementWrite(operation, payload) {
   if (!sessionFrame || !sessionUser) return Promise.reject(new Error('AUTHENTICATION_REQUIRED'));
   const requestId = crypto.randomUUID();
   return new Promise((resolve, reject) => {
-    pendingEngagementWrites.set(requestId, { resolve, reject });
+    const timeout = setTimeout(() => {
+      pendingEngagementWrites.delete(requestId);
+      reject(new Error('REQUEST_TIMEOUT'));
+    }, 10_000);
+    pendingEngagementWrites.set(requestId, {
+      resolve: (value) => { clearTimeout(timeout); resolve(value); },
+      reject: (error) => { clearTimeout(timeout); reject(error); }
+    });
     sessionFrame.contentWindow.postMessage({
       type: 'gala-engagement-write', requestId, operation, payload
     }, new URL(sessionFrame.src).origin);
@@ -392,6 +415,21 @@ if (sessionFrame) {
       else pending.reject(new Error(event.data.error?.code || 'ENGAGEMENT_WRITE_FAILED'));
       return;
     }
+    if (event.data?.type === 'gala-reader-state-result') {
+      if (event.data.requestId !== readerStateRequestId || event.data.ok !== true) return;
+      readerStateRequestId = null;
+      const active = new Set(Array.isArray(event.data.state?.reactions) ? event.data.state.reactions : []);
+      document.querySelectorAll('[data-reaction]').forEach((control) => {
+        control.setAttribute('aria-pressed', String(active.has(control.dataset.reaction)));
+      });
+      document.querySelectorAll('[data-follow-article]').forEach((control) => {
+        const following = event.data.state?.following === true;
+        control.setAttribute('aria-pressed', String(following));
+        control.setAttribute('aria-label', following ? 'Unfollow article' : 'Follow article');
+        control.title = following ? 'Unfollow article' : 'Follow article';
+      });
+      return;
+    }
     /* The frame is cross-origin, so its content height is not readable from here — it reports
        its own, and the box is sized to it. Without this the account panel scrolled inside a fixed
        box, clipping the first line of its own text. */
@@ -410,12 +448,24 @@ if (sessionFrame) {
       control.setAttribute('aria-label', displayName
         ? `Account: ${displayName}` : 'Sign in or view account');
       control.title = displayName ? `Account: ${displayName}` : 'Account';
+      const label = control.querySelector('[data-user-label]');
+      if (label) label.textContent = displayName || 'Sign in';
     }
     // The session frame reports on every page load, signed in or not. Re-reading engagement
     // then duplicated the request made on load and returned an identical payload for anyone
     // who was not signed in. Only a change of reader can change what the API answers.
     const changed = renderedSessionUser !== (sessionUser?.id ?? null);
     renderedSessionUser = sessionUser?.id ?? null;
+    if (sessionUser) {
+      const region = document.querySelector('[data-article-id]');
+      if (region) {
+        readerStateRequestId = crypto.randomUUID();
+        sessionFrame.contentWindow.postMessage({
+          type: 'gala-reader-state-request', requestId: readerStateRequestId,
+          articleId: region.dataset.articleId
+        }, sessionOrigin);
+      }
+    }
     document.querySelectorAll('[data-engagement-url]').forEach((region) => {
       if (changed) refreshEngagement(region);
     });