astro-atmosphere-comments 0.2.0 → 0.4.0

package/components/AtmosphereComments.astro

@@ -31,8 +31,12 @@
 // text, author, createdAt, quote, parent }), and after a like or repost (or
 // undoing one) `atmosphere:reacted` (detail: { kind, on, author }), so a site
 // can show it straight away.
-import logo from "../assets/union.svg?url";
 import settings from "../lib/settings";
+import SignInForm from "./SignInForm.astro";
+import Composer from "./Composer.astro";
+import "./atmosphere.css";
+import { messagesFor, pickLocale, translate, translateHtml } from "../lib/i18n";
+import { escapeHtml } from "../lib/translate";
 
 interface Props {
   /**
@@ -49,15 +53,26 @@ interface Props {
   credit?: boolean;
   /** "Rather not sign in here? Reply on Bluesky instead →" under the sign-in form. Default true. */
   blueskyLink?: boolean;
+  /** The language of the wording, e.g. "fr". Overrides the integration's `locale`. */
+  locale?: string;
+  /** Your own wording for any line, by its key in locales/en.json. */
+  messages?: Record<string, string>;
 }
 
-const {
-  post = "",
-  label = "Sign in to leave a comment, like or repost",
-  authorLabel = "Author",
-  credit = true,
-  blueskyLink = true,
-} = Astro.props;
+const { post = "", label, authorLabel, credit = true, blueskyLink = true } = Astro.props;
+// The wording: the language asked for (or Astro's i18n locale for the page),
+// with the site's own lines on top. The script gets the same, as JSON.
+const lang = pickLocale(Astro.props.locale, settings.locale, Astro.currentLocale);
+const messages = messagesFor(lang, {
+  ...settings.messages,
+  ...Astro.props.messages,
+  ...(label && { "signIn.heading": label }),
+  ...(authorLabel && { "comment.author": authorLabel }),
+});
+const t = (key: string, vars?: Record<string, string | number>) => translate(messages, lang, key, vars);
+const th = (key: string, html: Record<string, string>) => translateHtml(messages, lang, key, html);
+const link = (href: string | undefined, text: string, attributes = "") =>
+  `<a${href ? ` href="${escapeHtml(href)}"` : ""}${attributes}>${escapeHtml(text)}</a>`;
 // The announcement on bsky.app, when the page is given it (otherwise the
 // script fills it in once the thread has loaded).
 const atUri = post.match(/^at:\/\/([^/]+)\/app\.bsky\.feed\.post\/([^/]+)$/);
@@ -71,121 +86,41 @@ const { base } = settings;
 const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
 ---
 
-<atmosphere-comments class="atmo" id="atmosphere-comments" data-post={post} data-base={base} data-author-label={authorLabel}>
+<atmosphere-comments class="atmo" id="atmosphere-comments" data-post={post} data-base={base} data-locale={lang} data-messages={JSON.stringify(messages)}>
   <div class="atmo-reactions" data-reactions data-pagefind-ignore hidden></div>
 
   <div class="atmo__signed-out" data-view="signed-out" data-pagefind-ignore>
-    <form class="atmo__login" id="atmo-login" method="post" action={`${base}/login`} data-login-form>
-      <label for="atmo-handle">{label}</label>
-      <p class="atmo__hint">Any <a href="https://atmosphereaccount.com">Atmosphere account</a> works, including <a href="https://bsky.app">Bluesky</a>: one account for a whole network of open apps.</p>
-      <div class="atmo__row">
-        <span class="atmo__handle">
-          <span class="atmo__logo" style={`--atmo-logo: url("${logo}")`} aria-hidden="true"></span>
-          <input
-          id="atmo-handle"
-          name="handle"
-          type="text"
-          inputmode="url"
-          data-1p-ignore
-          data-lpignore="true"
-          data-bwignore
-          data-form-type="other"
-          autocapitalize="none"
-          spellcheck="false"
-          placeholder="alice.bsky.social"
-          required
-          />
-          <ul class="atmo__suggestions" id="atmo-handle-suggestions" role="listbox" aria-label="Matching accounts" data-handle-suggestions hidden></ul>
-        </span>
-        <input type="hidden" name="returnTo" value={returnTo} />
-        <button type="submit" class="atmo__button atmo__button--sign-in">
-          <span class="atmo__logo" style={`--atmo-logo: url("${logo}")`} aria-hidden="true"></span>
-          Sign in with Atmosphere
-        </button>
-      </div>
-      <p class="atmo__hint">
-        You'll approve this on your account's own site (Bluesky's, for most people); your password
-        is never shared here.
-        No account yet? <a href="https://atmosphereaccount.com">Create a free Atmosphere account</a>.
-      </p>
-    </form>
+    <SignInForm id="atmo" returnTo={returnTo} messages={messages} lang={lang} />
     {blueskyLink && (
-      <p class="atmo__elsewhere" data-elsewhere hidden={!blueskyUrl}>
-        Rather not sign in here?{" "}
-        {/* u-syndication: microformats readers learn this is the post's copy on Bluesky. */}
-        <a class="atmo__elsewhere-link u-syndication" href={blueskyUrl || undefined} data-elsewhere-link>Reply on Bluesky instead →</a>{" "}
-        It shows up here just the same, as do likes and reposts.
-      </p>
+      <p
+        class="atmo__elsewhere"
+        data-elsewhere
+        hidden={!blueskyUrl}
+        set:html={th("elsewhere.text", {
+          // u-syndication: microformats readers learn this is the post's copy on Bluesky.
+          link: link(blueskyUrl || undefined, t("elsewhere.link"), ' class="atmo__elsewhere-link u-syndication" data-elsewhere-link'),
+        })}
+      />
     )}
   </div>
 
   <div class="atmo__signed-in" data-view="signed-in" data-pagefind-ignore hidden>
-    <div class="atmo__actions" role="group" aria-label="Respond to this post">
+    <div class="atmo__actions" role="group" aria-label={t("actions.label")}>
       <button type="button" class="atmo__action" data-react="like" aria-pressed="false">
         <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20.5s-7.5-4.4-7.5-10.1A4.4 4.4 0 0 1 12 7.6a4.4 4.4 0 0 1 7.5 2.8c0 5.7-7.5 10.1-7.5 10.1Z" /></svg>
-        <span data-label-off>Like</span><span data-label-on>Liked</span>
+        <span data-label-off>{t("actions.like")}</span><span data-label-on>{t("actions.liked")}</span>
       </button>
       <button type="button" class="atmo__action" data-react="repost" aria-pressed="false">
         <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 8h10l-3-3M17 16H7l3 3M5 13V9.5A1.5 1.5 0 0 1 6.5 8M19 11v3.5a1.5 1.5 0 0 1-1.5 1.5" /></svg>
-        <span data-label-off>Repost</span><span data-label-on>Reposted</span>
+        <span data-label-off>{t("actions.repost")}</span><span data-label-on>{t("actions.reposted")}</span>
       </button>
       <button type="button" class="atmo__action" data-quote>
         <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 18h5v-5H6.5A4.5 4.5 0 0 1 11 8.5V7a6 6 0 0 0-6 6Zm9 0h5v-5h-3.5A4.5 4.5 0 0 1 20 8.5V7a6 6 0 0 0-6 6Z" /></svg>
-        <span>Quote</span>
+        <span>{t("actions.quote")}</span>
       </button>
     </div>
 
-    <form class="atmo__composer" data-composer>
-      <p class="atmo__context" data-context hidden>
-        <span data-context-text></span>
-        <button type="button" class="atmo__link-button" data-cancel-context>Cancel</button>
-      </p>
-      <label for="atmo-text" class="atmo__as">
-        <span class="atmo__avatar atmo__avatar--me" data-me-avatar aria-hidden="true"></span>
-        <span><span data-verb>Comment</span> as <strong data-handle></strong></span>
-      </label>
-      <div class="atmo__field">
-        <textarea
-          id="atmo-text"
-          name="text"
-          rows="4"
-          required
-          aria-autocomplete="list"
-          aria-controls="atmo-suggestions"
-          aria-expanded="false"></textarea>
-        <ul class="atmo__suggestions" id="atmo-suggestions" role="listbox" aria-label="Accounts to mention" data-suggestions hidden></ul>
-      </div>
-      <figure class="atmo__preview" data-preview hidden>
-        <figcaption>How your post will look</figcaption>
-        <div class="atmo__preview-post">
-          <span class="atmo__avatar" data-preview-avatar aria-hidden="true"></span>
-          <div class="atmo__preview-body">
-            <p class="atmo__preview-author"><strong data-preview-name></strong> <span data-preview-handle></span> <span>· now</span></p>
-            <p class="atmo__preview-text" data-preview-text></p>
-            <div class="atmo__quoted">
-              <p class="atmo__preview-author">
-                <span class="atmo__avatar atmo__avatar--small" data-quoted-avatar aria-hidden="true"></span>
-                <strong data-quoted-name></strong> <span data-quoted-handle></span>
-              </p>
-              <p class="atmo__preview-text" data-quoted-text></p>
-              <div class="atmo__card" data-card hidden>
-                <img data-card-image alt="" hidden />
-                <div>
-                  <strong data-card-title></strong>
-                  <span data-card-description></span>
-                  <span class="atmo__card-domain" data-card-domain></span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </figure>
-      <div class="atmo__row atmo__row--end">
-        <span class="atmo__count" data-count aria-live="polite"></span>
-        <button type="button" class="atmo__link-button" data-sign-out>Sign out</button>
-        <button type="submit" class="atmo__button" data-submit>Post comment</button>
-      </div>
-    </form>
+    <Composer id="atmo" messages={messages} lang={lang} signOut />
   </div>
 
   <p class="atmo__status" data-status role="status" data-pagefind-ignore></p>
@@ -199,37 +134,41 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
   <slot />
 
   {credit && (
-    <p class="atmo__credit" data-credit data-pagefind-ignore>
-      Powered by <a href={CREDIT_URL}>Atmosphere Comments for Astro</a>
-    </p>
+    <p class="atmo__credit" data-credit data-pagefind-ignore set:html={th("credit", { link: link(CREDIT_URL, "Atmosphere Comments for Astro") })} />
   )}
 </atmosphere-comments>
 
 <script>
-  const MAX = 300;
-  const graphemes = new Intl.Segmenter();
-  const count = (text: string) => [...graphemes.segment(text.trim())].length;
-
-  const MESSAGES: Record<string, string> = {
-    "signed-in": "You're signed in. You can comment, like or repost above.",
-    "sign-in-failed": "Signing in didn't finish. Please try again.",
-    "account-not-found": "We couldn't find that account. Check the handle and try again.",
-    "invalid-handle": "That doesn't look like a handle. It's usually something like alice.bsky.social.",
-    "signed-out": "You've been signed out. Please sign in again.",
-    "needs-permission": "To delete comments here, this site needs one more permission from your account.",
-    "not-allowed": "That can't be done here.",
-    "new-permissions": "This site can now also like and repost for you, so it needs your permission again. Please sign in again.",
-    "too-long": `Posts can be up to ${MAX} characters.`,
-    "too-many": "You're going quickly. Please wait a minute and try again.",
-    error: "That didn't work. Please try again.",
+  import { translate } from "../lib/translate";
+  import { enhanceHandleBox } from "../lib/client/handle-suggestions";
+  import { MAX, quotePreview, setUpComposer, type ComposerBehaviour, type Posted } from "../lib/client/composer";
+
+
+  // The error and status codes the routes and the sign-in round trip send,
+  // and the wording for each (in locales/*.json).
+  const MESSAGE_KEYS: Record<string, string> = {
+    "signed-in": "messages.signedIn",
+    "sign-in-failed": "messages.signInFailed",
+    "account-not-found": "messages.accountNotFound",
+    "invalid-handle": "messages.invalidHandle",
+    "signed-out": "messages.signedOut",
+    "needs-permission": "messages.needsPermission",
+    "not-allowed": "messages.notAllowed",
+    "new-permissions": "messages.newPermissions",
+    "too-long": "messages.tooLong",
+    "too-many": "messages.tooMany",
+    error: "messages.error",
   };
 
-  type Posted = { uri: string; url: string; quote: boolean };
-  type Suggestion = { handle: string; displayName?: string; avatar?: string };
 
   class AtmosphereComments extends HTMLElement {
     connectedCallback() {
       const base = this.dataset.base ?? "/atmosphere";
+      // The wording, in the page's language, from the server.
+      const lang = this.dataset.locale || "en";
+      const wording = JSON.parse(this.dataset.messages || "{}") as Record<string, string>;
+      const t = (key: string, vars?: Record<string, string | number>) => translate(wording, lang, key, vars);
+      const message = (code: string) => t(MESSAGE_KEYS[code] ?? MESSAGE_KEYS.error, { max: MAX });
       // The announcement's AT URI. A bsky.app address or the page's
       // Standard.site record is turned into one when the thread loads.
       let post = this.dataset.post?.startsWith("at://") ? this.dataset.post : "";
@@ -281,9 +220,9 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       let thread: Thread | null = null;
       const reactionsBox = $<HTMLElement>("[data-reactions]");
       const repliesList = $<HTMLOListElement>("[data-replies]");
-      const authorLabel = this.dataset.authorLabel || "Author";
+      const authorLabel = t("comment.author");
       const nameOf = (person: Pick<Person, "handle" | "displayName">) => person.displayName || `@${person.handle}`;
-      const dates = new Intl.DateTimeFormat(document.documentElement.lang || undefined, {
+      const dates = new Intl.DateTimeFormat(lang, {
         day: "numeric",
         month: "long",
         year: "numeric",
@@ -312,7 +251,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           ...groups.map(({ kind, count, people }) => {
             const group = make("div", "atmo-reactions__group");
             group.dataset.reaction = kind;
-            group.append(make("p", "atmo-reactions__count", `${count} ${kind}${count === 1 ? "" : "s"}`));
+            group.append(make("p", "atmo-reactions__count", t(kind === "like" ? "reactions.likes" : "reactions.reposts", { count })));
             const faces = make("ul", "atmo-facepile");
             for (const person of people) {
               const link = Object.assign(make("a"), { href: person.url, title: nameOf(person), rel: "ugc nofollow noopener" });
@@ -345,7 +284,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         if (reply.byAuthor) who.append(make("span", "atmo-comment__badge", authorLabel));
         const date = Object.assign(make("a", "atmo-comment__date"), { href: reply.url, rel: "ugc nofollow noopener" });
         const time = Object.assign(make("time"), { dateTime: reply.createdAt, textContent: reply.createdAt ? dates.format(new Date(reply.createdAt)) : "" });
-        date.append(time, make("span", "", " · view on Bluesky"));
+        date.append(time, make("span", "", ` · ${t("comment.viewOnBluesky")}`));
         const names = make("div");
         names.append(who, date);
         const header = make("header", "atmo-comment__header");
@@ -406,7 +345,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       const threadReady = loadThread();
 
       // A comment just posted, shown at once (Bluesky takes a moment to list it).
-      const showPosted = (data: Posted & { text: string; createdAt: string; parent: string | null; author: Person }) => {
+      const showPosted = (data: Posted) => {
         if (data.quote) return;
         const parent = data.parent
           ? repliesList.querySelector<HTMLElement>(`[data-atmosphere-uri="${CSS.escape(data.parent)}"]`)
@@ -443,98 +382,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
 
       const openLogin = () => loginForm.querySelector("input")?.focus({ preventScroll: true });
 
-      // Matching accounts under the handle box as the reader types, with their
-      // avatars, so they can see they've found the right one. Picking one signs
-      // in with it. Without JavaScript the box works as a plain text box.
-      {
-        const input = loginForm.querySelector<HTMLInputElement>("#atmo-handle")!;
-        const list = loginForm.querySelector<HTMLUListElement>("[data-handle-suggestions]")!;
-        let found: Suggestion[] = [];
-        let active = -1;
-        let latest = "";
-        let timer: number | undefined;
-        input.setAttribute("role", "combobox");
-        input.setAttribute("aria-autocomplete", "list");
-        input.setAttribute("aria-controls", list.id);
-        input.setAttribute("aria-expanded", "false");
-
-        const close = () => {
-          list.hidden = true;
-          list.replaceChildren();
-          found = [];
-          active = -1;
-          input.setAttribute("aria-expanded", "false");
-          input.removeAttribute("aria-activedescendant");
-        };
-        const highlight = (index: number) => {
-          active = index;
-          list.querySelectorAll("li").forEach((item, i) => item.setAttribute("aria-selected", String(i === index)));
-          if (index >= 0) input.setAttribute("aria-activedescendant", `${list.id}-option-${index}`);
-          else input.removeAttribute("aria-activedescendant");
-        };
-        const choose = (index: number) => {
-          const option = found[index];
-          if (!option) return;
-          input.value = option.handle;
-          close();
-          loginForm.requestSubmit();
-        };
-        const show = (actors: Suggestion[]) => {
-          found = actors.slice(0, 5);
-          if (!found.length || document.activeElement !== input) return close();
-          list.replaceChildren(
-            ...found.map((option, index) => {
-              const item = make("li");
-              item.id = `${list.id}-option-${index}`;
-              item.setAttribute("role", "option");
-              const avatar = make("span", "atmo__avatar atmo__avatar--small");
-              avatar.setAttribute("aria-hidden", "true");
-              setAvatar(avatar, option.displayName || option.handle, option.avatar);
-              item.append(avatar, make("strong", "", option.displayName || option.handle), make("span", "", `@${option.handle}`));
-              // mousedown keeps the focus in the handle box.
-              item.addEventListener("mousedown", (event) => event.preventDefault());
-              item.addEventListener("click", () => choose(index));
-              return item;
-            }),
-          );
-          list.hidden = false;
-          input.setAttribute("aria-expanded", "true");
-          // Nothing is picked until the reader chooses, so Enter still signs in
-          // with exactly what they typed.
-          highlight(-1);
-        };
-
-        input.addEventListener("input", () => {
-          window.clearTimeout(timer);
-          const query = input.value.trim().replace(/^@/, "");
-          latest = query;
-          if (query.length < 2 || query.startsWith("did:") || /\s/.test(query)) return close();
-          timer = window.setTimeout(async () => {
-            try {
-              const response = await fetch(`${base}/typeahead?q=${encodeURIComponent(query)}`, { credentials: "same-origin" });
-              const data = (await response.json()) as { actors?: Suggestion[] };
-              if (query === latest) show(data.actors ?? []);
-            } catch {
-              close();
-            }
-          }, 250);
-        });
-        input.addEventListener("keydown", (event) => {
-          if (list.hidden) return;
-          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-            event.preventDefault();
-            const step = event.key === "ArrowDown" ? 1 : -1;
-            highlight(active < 0 && step < 0 ? found.length - 1 : (active + step + found.length) % found.length);
-          } else if (event.key === "Enter" && active >= 0) {
-            event.preventDefault();
-            choose(active);
-          } else if (event.key === "Escape") {
-            event.preventDefault();
-            close();
-          }
-        });
-        input.addEventListener("blur", () => window.setTimeout(close, 150));
-      }
+      enhanceHandleBox(loginForm, base);
 
       // An avatar picture, or the name's first letter if there isn't one.
       const setAvatar = (slot: HTMLElement, name: string, src?: string) => {
@@ -547,226 +395,57 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
 
       const handleError = (error: string, tell: (message: string) => void = say) => {
         if (error === "signed-out" || error === "new-permissions") void show(false);
-        tell(MESSAGES[error] ?? MESSAGES.error);
+        tell(message(error));
       };
 
       const postedMessage = (where: HTMLElement, data: Posted) =>
         where.replaceChildren(
-          data.quote ? "Your quote post is on Bluesky. " : "Your comment is posted. ",
-          Object.assign(document.createElement("a"), { href: data.url, textContent: "See it on Bluesky →" }),
+          `${t(data.quote ? "posted.quote" : "posted.comment")} `,
+          Object.assign(document.createElement("a"), { href: data.url, textContent: t("posted.see") }),
         );
 
-      // Everything a comment box does: counting characters, @mention
-      // suggestions and posting. Used by the main box and every reply box.
-      const setUpComposer = (
+      // The comment box (lib/client/composer.ts): posts as a reply to the
+      // announcement, then shows it straight away and tells the page.
+      const composerContext = { base, t, message, setAvatar };
+      const composerFor = (
         form: HTMLFormElement,
-        behaviour: {
-          extra: () => Record<string, unknown>;
-          tell: (message: string) => void;
-          onPosted: (data: Posted) => void;
-          onInput?: () => void;
-        },
-      ) => {
-        const textarea = form.querySelector("textarea")!;
-        const counter = form.querySelector<HTMLElement>("[data-count]")!;
-        const submit = form.querySelector<HTMLButtonElement>("[data-submit]")!;
-        const suggestions = form.querySelector<HTMLUListElement>("[data-suggestions]")!;
-
-        const updateCount = () => {
-          const used = count(textarea.value);
-          counter.textContent = used > MAX - 50 ? `${MAX - used} left` : "";
-          counter.classList.toggle("is-over", used > MAX);
-        };
-
-        // @mention suggestions, as in the Bluesky app: typing @ and the start
-        // of a handle or name lists matching accounts to choose from.
-        let options: Suggestion[] = [];
-        let active = -1;
-        let lookup: number | undefined;
-        let latestQuery = "";
-        const mentionAtCaret = () => {
-          const before = textarea.value.slice(0, textarea.selectionStart);
-          const match = /(?:^|[\s(])@([a-zA-Z0-9.-]{1,64})$/.exec(before);
-          return match ? { query: match[1], start: before.length - match[1].length - 1 } : null;
-        };
-        const closeSuggestions = () => {
-          suggestions.hidden = true;
-          suggestions.replaceChildren();
-          options = [];
-          active = -1;
-          textarea.setAttribute("aria-expanded", "false");
-          textarea.removeAttribute("aria-activedescendant");
-        };
-        const highlight = (index: number) => {
-          active = index;
-          suggestions.querySelectorAll("li").forEach((item, i) => item.setAttribute("aria-selected", String(i === index)));
-          if (index >= 0) textarea.setAttribute("aria-activedescendant", `${suggestions.id}-option-${index}`);
-        };
-        const choose = (index: number) => {
-          const mention = mentionAtCaret();
-          const option = options[index];
-          if (!mention || !option) return closeSuggestions();
-          const after = textarea.value.slice(textarea.selectionStart);
-          textarea.value = `${textarea.value.slice(0, mention.start)}@${option.handle} ${after}`;
-          const caret = mention.start + option.handle.length + 2;
-          textarea.setSelectionRange(caret, caret);
-          closeSuggestions();
-          textarea.focus();
-          updateCount();
-          behaviour.onInput?.();
-        };
-        const showSuggestions = (found: Suggestion[]) => {
-          options = found;
-          if (!found.length) return closeSuggestions();
-          suggestions.replaceChildren(
-            ...found.map((option, index) => {
-              const item = document.createElement("li");
-              item.id = `${suggestions.id}-option-${index}`;
-              item.setAttribute("role", "option");
-              const avatar = document.createElement("span");
-              avatar.className = "atmo__avatar atmo__avatar--small";
-              setAvatar(avatar, option.displayName || option.handle, option.avatar);
-              const name = Object.assign(document.createElement("strong"), { textContent: option.displayName || option.handle });
-              const handle = Object.assign(document.createElement("span"), { textContent: `@${option.handle}` });
-              item.append(avatar, name, handle);
-              // mousedown keeps the focus in the text box.
-              item.addEventListener("mousedown", (event) => event.preventDefault());
-              item.addEventListener("click", () => choose(index));
-              return item;
-            }),
-          );
-          suggestions.hidden = false;
-          textarea.setAttribute("aria-expanded", "true");
-          highlight(0);
-        };
-        const lookUpMention = () => {
-          window.clearTimeout(lookup);
-          const mention = mentionAtCaret();
-          if (!mention) return closeSuggestions();
-          latestQuery = mention.query;
-          lookup = window.setTimeout(async () => {
-            const query = mention.query;
-            try {
-              const response = await fetch(`${base}/typeahead?q=${encodeURIComponent(query)}`, { credentials: "same-origin" });
-              const data = (await response.json()) as { actors?: Suggestion[] };
-              if (query === latestQuery) showSuggestions(data.actors ?? []);
-            } catch {
-              closeSuggestions();
-            }
-          }, 200);
-        };
-
-        textarea.addEventListener("input", () => {
-          updateCount();
-          behaviour.onInput?.();
-          lookUpMention();
-        });
-        textarea.addEventListener("keydown", (event) => {
-          if (suggestions.hidden) return;
-          if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-            event.preventDefault();
-            const step = event.key === "ArrowDown" ? 1 : -1;
-            highlight((active + step + options.length) % options.length);
-          } else if (event.key === "Enter" || event.key === "Tab") {
-            event.preventDefault();
-            choose(Math.max(active, 0));
-          } else if (event.key === "Escape") {
-            event.preventDefault();
-            closeSuggestions();
-          }
-        });
-        textarea.addEventListener("blur", () => window.setTimeout(closeSuggestions, 150));
-
-        form.addEventListener("submit", async (event) => {
-          event.preventDefault();
-          const text = textarea.value.trim();
-          if (!text) return;
-          if (count(text) > MAX) return behaviour.tell(MESSAGES["too-long"]);
-          submit.disabled = true;
-          behaviour.tell("Posting…");
-          try {
-            const response = await send("comment", { text, root: post, ...behaviour.extra() });
-            const data = await response.json();
-            if (!response.ok) return handleError(data.error, behaviour.tell);
-            textarea.value = "";
-            updateCount();
+        behaviour: Omit<ComposerBehaviour, "root" | "onError" | "onPosted"> & { onPosted: (data: Posted) => void },
+      ) =>
+        setUpComposer(form, composerContext, {
+          ...behaviour,
+          root: () => post,
+          onError: handleError,
+          onPosted: (data) => {
             behaviour.onPosted(data);
             showPosted(data);
             this.dispatchEvent(new CustomEvent("atmosphere:commented", { detail: data, bubbles: true }));
-          } catch {
-            behaviour.tell(MESSAGES.error);
-          } finally {
-            submit.disabled = false;
-          }
+          },
         });
 
-        return { textarea, updateCount };
-      };
-
-      // The Quote preview: the reader's words as they type, with the
-      // announcement quoted beneath, as Bluesky will show it.
+      // The Quote preview (lib/client/composer.ts).
       const preview = $<HTMLElement>("[data-preview]");
-      const previewText = $<HTMLElement>("[data-preview-text]");
-      let quotedLoaded = false;
-      const updatePreviewText = () => {
-        const words = main.textarea.value.trim();
-        previewText.textContent = words || "Your words appear here.";
-        previewText.classList.toggle("is-placeholder", !words);
-      };
-      const loadQuoted = async () => {
-        updatePreviewText();
-        if (quotedLoaded) return;
-        try {
-          const response = await fetch(`${base}/post?uri=${encodeURIComponent(post)}`);
-          if (!response.ok) return;
-          const quoted = (await response.json()) as {
-            author: { handle: string; displayName?: string; avatar?: string };
-            text: string;
-            external?: { uri: string; title: string; description: string; thumb?: string };
-          };
-          quotedLoaded = true;
-          const quotedName = quoted.author.displayName || quoted.author.handle;
-          $<HTMLElement>("[data-quoted-name]").textContent = quotedName;
-          setAvatar($<HTMLElement>("[data-quoted-avatar]"), quotedName, quoted.author.avatar);
-          $<HTMLElement>("[data-quoted-handle]").textContent = `@${quoted.author.handle}`;
-          $<HTMLElement>("[data-quoted-text]").textContent = quoted.text;
-          if (quoted.external) {
-            $<HTMLElement>("[data-card]").hidden = false;
-            $<HTMLElement>("[data-card-title]").textContent = quoted.external.title;
-            $<HTMLElement>("[data-card-description]").textContent = quoted.external.description;
-            $<HTMLElement>("[data-card-domain]").textContent = new URL(quoted.external.uri).hostname;
-            if (quoted.external.thumb) {
-              const img = $<HTMLImageElement>("[data-card-image]");
-              img.onload = () => (img.hidden = false);
-              img.onerror = () => (img.hidden = true);
-              img.src = quoted.external.thumb;
-            }
-          }
-        } catch {
-          // The preview is a nicety: quoting still works without it.
-        }
-      };
 
       // The main box: a comment on the post, or (after Quote) a quote post.
       const setMainMode = (next: "comment" | "quote") => {
         mainMode = next;
         const quoting = next === "quote";
         $<HTMLElement>("[data-context]").hidden = !quoting;
-        $<HTMLElement>("[data-context-text]").textContent = quoting ? "Quoting this post on your own account" : "";
-        $<HTMLElement>("[data-verb]").textContent = quoting ? "Quote" : "Comment";
-        $<HTMLElement>("[data-submit]").textContent = quoting ? "Post quote" : "Post comment";
+        $<HTMLElement>("[data-context-text]").textContent = quoting ? t("composer.quoting") : "";
+        $<HTMLElement>("[data-verb]").textContent = t(quoting ? "composer.quote" : "composer.comment");
+        $<HTMLElement>("[data-submit]").textContent = t(quoting ? "composer.postQuote" : "composer.postComment");
         preview.hidden = !quoting;
-        if (quoting) void loadQuoted();
+        if (quoting) void quote.load(post);
       };
-      const main = setUpComposer(composer, {
+      const main = composerFor(composer, {
         extra: () => (mainMode === "quote" ? { quote: true } : {}),
         tell: say,
         onPosted: (data) => {
           setMainMode("comment");
           postedMessage(status, data);
         },
-        onInput: updatePreviewText,
+        onInput: () => quote.update(),
       });
+      const quote = quotePreview(composer, main.textarea, composerContext);
       $<HTMLButtonElement>("[data-cancel-context]").addEventListener("click", () => {
         setMainMode("comment");
         main.textarea.focus();
@@ -795,9 +474,9 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         suggestions.id = `${id}-suggestions`;
         textarea.setAttribute("aria-controls", suggestions.id);
         form.querySelector<HTMLElement>("[data-context]")!.hidden = false;
-        form.querySelector("[data-context-text]")!.textContent = `Replying to ${author}`;
-        form.querySelector("[data-verb]")!.textContent = "Reply";
-        form.querySelector("[data-submit]")!.textContent = "Post reply";
+        form.querySelector("[data-context-text]")!.textContent = t("composer.replyingTo", { name: author });
+        form.querySelector("[data-verb]")!.textContent = t("comment.reply");
+        form.querySelector("[data-submit]")!.textContent = t("composer.postReply");
         form.querySelector("[data-handle]")!.textContent = me.handle ? `@${me.handle}` : "";
         setAvatar(form.querySelector<HTMLElement>("[data-me-avatar]")!, me.displayName || me.handle || "?", me.avatar);
         const replyStatus = scoped(Object.assign(document.createElement("p"), { className: "atmo__status" }));
@@ -806,7 +485,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         (comment.querySelector("article") ?? comment).append(holder);
         const close = () => holder.remove();
         form.querySelector("[data-cancel-context]")!.addEventListener("click", close);
-        setUpComposer(form, {
+        composerFor(form, {
           extra: () => ({ parent: comment.dataset.atmosphereUri }),
           tell: (message) => (replyStatus.textContent = message),
           // The reply appears under the comment (the page adds it), so the box goes.
@@ -835,8 +514,8 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         button.dataset.kind = kind;
         const seen = known[comment.dataset.atmosphereUri!];
         button.setAttribute("aria-pressed", String(!!(kind === "like" ? seen?.liked : seen?.reposted)));
-        const author = comment.dataset.atmosphereAuthor || "this comment";
-        button.setAttribute("aria-label", `${kind === "like" ? "Like" : "Repost"} ${author}'s comment`);
+        const author = comment.dataset.atmosphereAuthor || t("comment.someone");
+        button.setAttribute("aria-label", t(kind === "like" ? "comment.likeLabel" : "comment.repostLabel", { name: author }));
         const count = Number(comment.dataset[kind === "like" ? "atmosphereLikes" : "atmosphereReposts"] || 0);
         button.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true">${kind === "like" ? HEART : ARROWS}</svg><span></span>`;
         const setCount = (value: number) => {
@@ -845,7 +524,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         };
         setCount(count);
         button.addEventListener("click", async () => {
-          if (!isSignedIn) return signInFirst(`Sign in to ${kind} comments.`);
+          if (!isSignedIn) return signInFirst(t(kind === "like" ? "signInFirst.like" : "signInFirst.repost"));
           const on = button.getAttribute("aria-pressed") !== "true";
           const before = Number(button.dataset.count || 0);
           button.setAttribute("aria-pressed", String(on));
@@ -869,15 +548,15 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           if (comment.querySelector(":scope .atmo-comment-actions")) return;
           added += 1;
           const actions = Object.assign(document.createElement("div"), { className: "atmo-comment-actions" });
-          const author = comment.dataset.atmosphereAuthor || "this comment";
+          const author = comment.dataset.atmosphereAuthor || t("comment.someone");
           const reply = Object.assign(document.createElement("button"), {
             type: "button",
             className: "atmo-comment-action",
-            textContent: "Reply",
+            textContent: t("comment.reply"),
           });
-          reply.setAttribute("aria-label", `Reply to ${author}`);
+          reply.setAttribute("aria-label", t("comment.replyTo", { name: author }));
           reply.addEventListener("click", () => {
-            if (!isSignedIn) return signInFirst("Sign in to reply.");
+            if (!isSignedIn) return signInFirst(t("signInFirst.reply"));
             openReply(comment, author);
           });
           actions.append(reply, commentButton("like", comment), commentButton("repost", comment));
@@ -892,13 +571,13 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
 
       const deleteComment = async (comment: HTMLElement, panel: HTMLElement) => {
         const uri = comment.dataset.atmosphereUri!;
-        panel.replaceChildren(make("span", "atmo-comment-delete__text", "Deleting…"));
+        panel.replaceChildren(make("span", "atmo-comment-delete__text", t("comment.deleting")));
         try {
           const response = await send("delete", { post: uri });
           const data = (await response.json()) as { error?: string };
           if (response.ok) {
             comment.remove();
-            say("Your comment was deleted.");
+            say(t("comment.deleted"));
             this.dispatchEvent(new CustomEvent("atmosphere:deleted", { detail: { uri }, bubbles: true }));
             return;
           }
@@ -907,7 +586,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
           handleError(data.error ?? "error");
         } catch {
           panel.remove();
-          say(MESSAGES.error);
+          say(message("error"));
         }
       };
 
@@ -920,15 +599,15 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         field("handle", me.did!);
         field("permission", "delete");
         field("returnTo", `${location.pathname}#atmo-delete=${encodeURIComponent(comment.dataset.atmosphereUri!)}`);
-        const go = Object.assign(make("button", "atmo-comment-action atmo-comment-action--danger", "Continue to approve"), { type: "submit" });
-        const cancel = Object.assign(make("button", "atmo-comment-action", "Cancel"), { type: "button" });
+        const go = Object.assign(make("button", "atmo-comment-action atmo-comment-action--danger", t("comment.continue")), { type: "submit" });
+        const cancel = Object.assign(make("button", "atmo-comment-action", t("comment.cancel")), { type: "button" });
         cancel.addEventListener("click", () => panel.remove());
         form.append(go, cancel);
         panel.replaceChildren(
           make(
             "span",
             "atmo-comment-delete__text",
-            "To delete comments here, this site needs one more permission from your account. You can also delete it in any Bluesky app.",
+            t("comment.deletePermission"),
           ),
           form,
         );
@@ -936,22 +615,22 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       };
 
       const deleteButton = (comment: HTMLElement) => {
-        const button = Object.assign(make("button", "atmo-comment-action atmo-comment-action--delete", "Delete"), { type: "button" });
-        button.setAttribute("aria-label", "Delete your comment");
+        const button = Object.assign(make("button", "atmo-comment-action atmo-comment-action--delete", t("comment.delete")), { type: "button" });
+        button.setAttribute("aria-label", t("comment.deleteLabel"));
         button.addEventListener("click", () => {
           const actions = button.parentElement!;
           if (actions.nextElementSibling?.matches(".atmo-comment-delete")) return;
           const panel = make("div", "atmo-comment-delete");
-          const yes = Object.assign(make("button", "atmo-comment-action atmo-comment-action--danger", "Delete"), { type: "button" });
-          const no = Object.assign(make("button", "atmo-comment-action", "Cancel"), { type: "button" });
+          const yes = Object.assign(make("button", "atmo-comment-action atmo-comment-action--danger", t("comment.delete")), { type: "button" });
+          const no = Object.assign(make("button", "atmo-comment-action", t("comment.cancel")), { type: "button" });
           yes.addEventListener("click", () => deleteComment(comment, panel));
           no.addEventListener("click", () => {
             panel.remove();
             button.focus();
           });
-          panel.append(make("span", "atmo-comment-delete__text", "Delete this comment from Bluesky?"), yes, no);
+          panel.append(make("span", "atmo-comment-delete__text", t("comment.deleteConfirm")), yes, no);
           panel.setAttribute("role", "group");
-          panel.setAttribute("aria-label", "Delete your comment");
+          panel.setAttribute("aria-label", t("comment.deleteLabel"));
           actions.after(panel);
           no.focus();
         });
@@ -1033,7 +712,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
       const url = new URL(location.href);
       const result = url.searchParams.get("atmosphere");
       if (result) {
-        say(MESSAGES[result] ?? "");
+        say(MESSAGE_KEYS[result] ? message(result) : "");
         url.searchParams.delete("atmosphere");
         history.replaceState(history.state, "", url);
       }
@@ -1072,7 +751,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
               setPressed(kind, !on);
               return handleError((await response.json()).error);
             }
-            say(on ? (kind === "like" ? "Liked." : "Reposted.") : kind === "like" ? "Like removed." : "Repost removed.");
+            say(t(on ? (kind === "like" ? "status.liked" : "status.reposted") : kind === "like" ? "status.likeRemoved" : "status.repostRemoved"));
             showReaction(kind, on);
             this.dispatchEvent(
               new CustomEvent("atmosphere:reacted", {
@@ -1082,7 +761,7 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
             );
           } catch {
             setPressed(kind, !on);
-            say(MESSAGES.error);
+            say(message("error"));
           }
         });
       }
@@ -1091,656 +770,10 @@ const returnTo = `${Astro.url.pathname}#atmosphere-comments`;
         await fetch(`${base}/logout`, { method: "POST", credentials: "same-origin" }).catch(() => undefined);
         void show(false);
         setMainMode("comment");
-        say("You're signed out.");
+        say(t("status.signedOut"));
       });
     }
   }
 
   customElements.define("atmosphere-comments", AtmosphereComments);
 </script>
-
-<style>
-  .atmo {
-    display: block;
-    color: var(--atmo-text, currentColor);
-  }
-
-  /* Only the component's own parts wait for sign-in to be checked; the
-     site's slot content shows straight away. */
-  .atmo.is-loading > :is([data-view], [data-reactions], [data-replies]) {
-    visibility: hidden;
-  }
-
-  .atmo [hidden] {
-    display: none !important;
-  }
-
-  /* The Atmosphere Account logo inside the handle box, on the left, and at
-     the start of the sign-in button. It is single-colour, so it is drawn in
-     the muted text colour in the box and the button's text colour on it. */
-  .atmo__handle {
-    position: relative;
-    display: flex;
-    flex: 1 1 220px;
-    min-width: 0;
-  }
-
-  /* Matching accounts sit under the handle box, as wide as it. */
-  .atmo__handle .atmo__suggestions {
-    width: 100%;
-  }
-
-  .atmo__handle .atmo__logo {
-    position: absolute;
-    top: 50%;
-    left: 11px;
-    width: 20px;
-    height: 20px;
-    transform: translateY(-50%);
-    background-color: var(--atmo-muted, currentColor);
-    mask: var(--atmo-logo) center / contain no-repeat;
-    pointer-events: none;
-  }
-
-  .atmo .atmo__handle input[type="text"] {
-    padding-left: 40px;
-  }
-
-  .atmo__button--sign-in {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .atmo__button--sign-in .atmo__logo {
-    flex: none;
-    width: 20px;
-    height: 20px;
-    background-color: currentColor;
-    mask: var(--atmo-logo) center / contain no-repeat;
-  }
-
-  /* The comment box when it sits under a comment being replied to. */
-  .atmo--inline {
-    margin: 4px 0 6px;
-  }
-
-  .atmo--inline .atmo__composer {
-    margin-top: 10px;
-  }
-
-  .atmo__elsewhere {
-    max-width: 560px;
-    margin: 14px 0 0;
-    font-size: 0.9em;
-  }
-
-  .atmo__elsewhere-link {
-    font-weight: 700;
-  }
-
-  .atmo__login,
-  .atmo__composer {
-    display: grid;
-    gap: 8px;
-    max-width: 560px;
-    margin-top: 14px;
-  }
-
-  .atmo label {
-    font-weight: 700;
-  }
-
-  .atmo__row {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 10px;
-  }
-
-  .atmo__row--end {
-    justify-content: flex-end;
-  }
-
-  .atmo input[type="text"],
-  .atmo textarea {
-    flex: 1 1 220px;
-    min-width: 0;
-    padding: 10px 12px;
-    border: 1px solid var(--atmo-border, #8886);
-    border-radius: var(--atmo-radius, 10px);
-    background: var(--atmo-field-bg, transparent);
-    color: inherit;
-    font: inherit;
-  }
-
-  .atmo textarea {
-    resize: vertical;
-  }
-
-  .atmo__button {
-    padding: 10px 16px;
-    border: 0;
-    border-radius: var(--atmo-radius, 10px);
-    background: var(--atmo-accent, #1185fe);
-    color: var(--atmo-on-accent, #fff);
-    font: inherit;
-    font-weight: 700;
-    cursor: pointer;
-  }
-
-  .atmo__button:disabled {
-    opacity: 0.6;
-    cursor: progress;
-  }
-
-  .atmo__link-button {
-    padding: 0;
-    border: 0;
-    background: none;
-    color: var(--atmo-muted, inherit);
-    font: inherit;
-    text-decoration: underline;
-    cursor: pointer;
-  }
-
-  /* Like, Repost and Quote: outlined pills that fill in once done. */
-  .atmo__actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .atmo__action {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 7px 14px 7px 10px;
-    border: 1px solid var(--atmo-border, #8886);
-    border-radius: 999px;
-    background: none;
-    color: inherit;
-    font: inherit;
-    font-weight: 600;
-    cursor: pointer;
-  }
-
-  .atmo__action:hover,
-  .atmo__action:focus-visible {
-    border-color: var(--atmo-accent, #1185fe);
-    color: var(--atmo-accent, #1185fe);
-  }
-
-  .atmo__action svg {
-    width: 18px;
-    height: 18px;
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 1.8;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-
-  .atmo__action[aria-pressed="true"] {
-    border-color: var(--atmo-accent, #1185fe);
-    color: var(--atmo-accent, #1185fe);
-  }
-
-  .atmo__action[data-react="like"][aria-pressed="true"] svg {
-    fill: currentColor;
-  }
-
-  .atmo__action [data-label-on],
-  .atmo__action[aria-pressed="true"] [data-label-off] {
-    display: none;
-  }
-
-  .atmo__action[aria-pressed="true"] [data-label-on] {
-    display: inline;
-  }
-
-  .atmo__context {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    margin: 0;
-    color: var(--atmo-muted, inherit);
-    font-size: 0.9em;
-  }
-
-  .atmo__hint,
-  .atmo__count,
-  .atmo__status {
-    margin: 0;
-    color: var(--atmo-muted, inherit);
-    font-size: 0.9em;
-  }
-
-  .atmo__count {
-    margin-right: auto;
-  }
-
-  .atmo__count.is-over {
-    color: var(--atmo-error, #d33);
-  }
-
-  .atmo__status:not(:empty) {
-    margin-top: 10px;
-  }
-
-  .atmo__credit {
-    margin: 14px 0 0;
-    color: var(--atmo-muted, inherit);
-    font-size: 0.75em;
-    opacity: 0.8;
-  }
-
-  .atmo__credit a {
-    color: inherit;
-  }
-
-  /* @mention suggestions, under the text box. */
-  .atmo__field {
-    position: relative;
-    display: grid;
-  }
-
-  .atmo__suggestions {
-    position: absolute;
-    z-index: 5;
-    top: calc(100% + 4px);
-    left: 0;
-    width: min(100%, 360px);
-    margin: 0;
-    padding: 4px;
-    list-style: none;
-    border: 1px solid var(--atmo-border, #8886);
-    border-radius: var(--atmo-radius, 10px);
-    background: var(--atmo-menu-bg, Canvas);
-    box-shadow: 0 12px 30px rgb(0 0 0 / 0.25);
-  }
-
-  .atmo__suggestions :global(li) {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 7px 9px;
-    border-radius: calc(var(--atmo-radius, 10px) - 4px);
-    cursor: pointer;
-  }
-
-  .atmo__suggestions :global(li[aria-selected="true"]),
-  .atmo__suggestions :global(li:hover) {
-    background: color-mix(in srgb, var(--atmo-accent, #1185fe) 14%, transparent);
-  }
-
-  .atmo__suggestions :global(li span:last-child) {
-    overflow: hidden;
-    color: var(--atmo-muted, inherit);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .atmo__suggestions :global(.atmo__avatar) {
-    display: grid;
-    flex: none;
-    place-items: center;
-    width: 26px;
-    height: 26px;
-    overflow: hidden;
-    border-radius: 50%;
-    background: var(--atmo-border, #8886);
-    font-size: 11px;
-    font-weight: 700;
-  }
-
-  .atmo__suggestions :global(.atmo__avatar img) {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  /* The Quote preview: a post card with the quoted post nested inside. */
-  .atmo__preview {
-    display: grid;
-    gap: 6px;
-    margin: 4px 0 0;
-  }
-
-  .atmo__preview figcaption {
-    color: var(--atmo-muted, inherit);
-    font-size: 0.85em;
-    font-weight: 700;
-  }
-
-  .atmo__preview-post,
-  .atmo__quoted {
-    padding: 12px 14px;
-    border: 1px solid var(--atmo-border, #8886);
-    border-radius: var(--atmo-radius, 10px);
-  }
-
-  /* As on Bluesky: the avatar beside the post, the post's parts stacked. */
-  .atmo__preview-post {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    gap: 12px;
-  }
-
-  .atmo__preview-body,
-  .atmo__quoted {
-    display: grid;
-    gap: 6px;
-    min-width: 0;
-  }
-
-  .atmo__avatar {
-    display: grid;
-    place-items: center;
-    width: 42px;
-    height: 42px;
-    overflow: hidden;
-    border-radius: 50%;
-    background: var(--atmo-border, #8886);
-    color: var(--atmo-text, inherit);
-    font-weight: 700;
-  }
-
-  /* "Comment as @handle", with the reader's avatar as a reminder of which
-     account they're signed in with. */
-  .atmo__as {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .atmo__avatar--me {
-    width: 28px;
-    height: 28px;
-    font-size: 12px;
-  }
-
-  .atmo__avatar--small {
-    display: inline-grid;
-    width: 18px;
-    height: 18px;
-    margin-right: 4px;
-    font-size: 10px;
-    vertical-align: -4px;
-  }
-
-  /* Added by the script, so outside Astro's scoped styles. */
-  .atmo__avatar :global(img) {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .atmo__preview-post p,
-  .atmo__card span {
-    margin: 0;
-  }
-
-  .atmo__preview-author span,
-  .atmo__card-domain {
-    color: var(--atmo-muted, inherit);
-  }
-
-  .atmo__preview-text {
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-  }
-
-  .atmo__preview-text.is-placeholder {
-    color: var(--atmo-muted, inherit);
-    font-style: italic;
-  }
-
-  .atmo__quoted {
-    font-size: 0.92em;
-  }
-
-  .atmo__card {
-    overflow: hidden;
-    border: 1px solid var(--atmo-border, #8886);
-    border-radius: var(--atmo-radius, 10px);
-  }
-
-  .atmo__card img {
-    display: block;
-    width: 100%;
-    aspect-ratio: 1.91 / 1;
-    object-fit: cover;
-  }
-
-  .atmo__card > div {
-    display: grid;
-    gap: 2px;
-    padding: 10px 12px;
-  }
-
-  .atmo__card [data-card-description] {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
-
-  .atmo__card-domain {
-    font-size: 0.85em;
-  }
-
-  /* The likes and reposts, and the comments. These are drawn by the script,
-     and wrapped in :where() so they carry no weight: any rule a site writes
-     for these classes wins. */
-  :global(:where(.atmo-reactions)) {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px 32px;
-    margin: 0 0 18px;
-  }
-
-  :global(:where(.atmo-reactions__count)) {
-    margin: 0 0 8px;
-    font-weight: 700;
-  }
-
-  :global(:where(.atmo-facepile)) {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0;
-    padding: 0 0 0 8px;
-    list-style: none;
-  }
-
-  :global(:where(.atmo-facepile li)) {
-    margin-left: -8px;
-  }
-
-  :global(:where(.atmo-facepile a)) {
-    display: block;
-    border-radius: 50%;
-  }
-
-  :global(:where(.atmo-facepile__avatar, .atmo-facepile__more)) {
-    display: grid;
-    place-items: center;
-    width: 36px;
-    height: 36px;
-    border: 2px solid var(--atmo-ring, Canvas);
-    border-radius: 50%;
-    object-fit: cover;
-    background: var(--atmo-field-bg, #8882);
-    font-size: 12px;
-  }
-
-  :global(:where(.atmo-facepile__more)) {
-    width: auto;
-    min-width: 36px;
-    padding: 0 8px;
-    border-radius: 18px;
-  }
-
-  :global(:where(.atmo-avatar-initial)) {
-    display: inline-grid;
-    place-items: center;
-    color: #fff;
-    font-weight: 800;
-    background: var(--atmo-accent, #1185fe);
-  }
-
-  :global(:where(.atmo-comments)) {
-    display: grid;
-    gap: 12px;
-    margin: 24px 0 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  :global(:where(.atmo-comments:empty)) {
-    display: none;
-  }
-
-  :global(:where(.atmo-comment article)) {
-    padding: 16px 18px;
-    border: 1px solid var(--atmo-border, #8886);
-    border-radius: 16px;
-    background: var(--atmo-card-bg, transparent);
-  }
-
-  :global(:where(.atmo-comment--author > article)) {
-    border-color: var(--atmo-accent, #1185fe);
-  }
-
-  /* Replies step in under the comment they answer (up to three levels). */
-  :global(:where(.atmo-comment--nested)) {
-    margin-left: calc((var(--depth, 1) - 1) * 24px);
-    padding-left: 22px;
-    border-left: 2px solid var(--atmo-border, #8886);
-  }
-
-  :global(:where(.atmo-comment__header)) {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  :global(:where(.atmo-comment__avatar)) {
-    flex: none;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    object-fit: cover;
-  }
-
-  :global(:where(.atmo-comment__who)) {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 8px;
-  }
-
-  :global(:where(.atmo-comment__author)) {
-    color: inherit;
-    font-weight: 750;
-    text-decoration: none;
-  }
-
-  :global(:where(.atmo-comment__badge)) {
-    padding: 2px 7px;
-    border: 1px solid var(--atmo-accent, #1185fe);
-    border-radius: 999px;
-    color: var(--atmo-accent, #1185fe);
-    font-size: 11px;
-    font-weight: 800;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-  }
-
-  :global(:where(.atmo-comment__date)) {
-    color: var(--atmo-muted, inherit);
-    font-size: 13px;
-    text-decoration: none;
-  }
-
-  :global(:where(.atmo-comment__body)) {
-    margin-top: 10px;
-    line-height: 1.65;
-    overflow-wrap: anywhere;
-    white-space: pre-line;
-  }
-
-  :global(:where(.atmo-comment__body p)) {
-    margin: 0;
-  }
-
-  /* Reply, Like and Repost under each comment (outside this element, so
-     unscoped). */
-  :global(.atmo-comment-actions) {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 18px;
-    margin-top: 8px;
-  }
-
-  :global(.atmo-comment-delete) {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 6px 12px;
-    margin-top: 8px;
-    font-size: 0.9em;
-  }
-
-  :global(.atmo-comment-delete form) {
-    display: contents;
-  }
-
-  :global(.atmo-comment-delete__text) {
-    color: var(--atmo-muted, inherit);
-  }
-
-
-  :global(.atmo-comment-action) {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    padding: 0;
-    border: 0;
-    background: none;
-    color: var(--atmo-muted, inherit);
-    font: inherit;
-    font-size: 0.85em;
-    font-weight: 600;
-    cursor: pointer;
-  }
-
-  :global(.atmo-comment-action--delete) {
-    margin-left: auto;
-  }
-
-  :global(.atmo-comment-action--danger) {
-    color: var(--atmo-danger, #c0392b);
-    font-weight: 700;
-  }
-
-  :global(.atmo-comment-action:hover),
-  :global(.atmo-comment-action:focus-visible),
-  :global(.atmo-comment-action[aria-pressed="true"]) {
-    color: var(--atmo-accent, #1185fe);
-  }
-
-  :global(.atmo-comment-action svg) {
-    width: 16px;
-    height: 16px;
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 1.8;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-
-  :global(.atmo-comment-action[data-kind="like"][aria-pressed="true"] svg) {
-    fill: currentColor;
-  }
-</style>