g-comments 0.0.0-stage → 0.2.0

package/dist/react.js

@@ -0,0 +1,2745 @@
+"use client";
+import { createTranslator, PACKAGE_NAME, currentUrlWithoutHash, findComment, createComposerTimer, normalizeForum, resolveLocale, clientRegistry, STORAGE_PREFIX, isCommentsError, CommentsError, encodeRef, defaultPageUrl } from './chunk-WACVXJHD.js';
+import { createContext, useState, useRef, useCallback, useEffect, useMemo, Fragment as Fragment$1, useId, useContext, useLayoutEffect, useSyncExternalStore } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function toCommentsError(error) {
+  if (isCommentsError(error)) {
+    return error;
+  }
+  return new CommentsError("unknown", error instanceof Error ? error.message : String(error), {
+    cause: error
+  });
+}
+function noop() {
+}
+function rootNodeOf(element) {
+  const root = element.getRootNode();
+  return root instanceof Document || root instanceof ShadowRoot ? root : element.ownerDocument;
+}
+function isLocalPage() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  const host = window.location.hostname;
+  return host === "localhost" || host === "127.0.0.1" || host === "[::1]" || host.endsWith(".localhost") || host.endsWith(".test");
+}
+function readDraft(key) {
+  try {
+    return globalThis.localStorage?.getItem(key) ?? "";
+  } catch {
+    return "";
+  }
+}
+function writeDraft(key, value) {
+  try {
+    if (value.trim() === "") {
+      globalThis.localStorage?.removeItem(key);
+    } else {
+      globalThis.localStorage?.setItem(key, value);
+    }
+  } catch {
+  }
+}
+var tickListeners = /* @__PURE__ */ new Set();
+var tickTimer;
+function onMinuteTick(listener) {
+  tickListeners.add(listener);
+  tickTimer ??= setInterval(() => {
+    for (const tick of [...tickListeners]) {
+      tick();
+    }
+  }, 6e4);
+  return () => {
+    tickListeners.delete(listener);
+    if (tickListeners.size === 0) {
+      clearInterval(tickTimer);
+      tickTimer = void 0;
+    }
+  };
+}
+var UNITS = [
+  ["year", 31536e3],
+  ["month", 2592e3],
+  ["week", 604800],
+  ["day", 86400],
+  ["hour", 3600],
+  ["minute", 60]
+];
+function formatRelative(iso, now, locale) {
+  const seconds = Math.round((Date.parse(iso) - now) / 1e3);
+  const format = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
+  for (const [unit, size] of UNITS) {
+    if (Math.abs(seconds) >= size) {
+      return format.format(Math.round(seconds / size), unit);
+    }
+  }
+  return format.format(0, "second");
+}
+function formatAbsolute(iso, locale) {
+  return new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short" }).format(
+    new Date(iso)
+  );
+}
+
+// src/react/context.ts
+var CommentsContext = createContext(null);
+var defaultTranslator = createTranslator();
+function useCommentsContext(forum) {
+  const value = useOptionalCommentsContext(forum);
+  if (!value) {
+    throw new Error(
+      `${PACKAGE_NAME}: render this inside <DiscourseComments forum="\u2026"> or pass a \`forum\` prop`
+    );
+  }
+  return value;
+}
+function useOptionalCommentsContext(forum) {
+  const context = useContext(CommentsContext);
+  const standalone = useMemo(() => {
+    if (forum === void 0 || context && normalizeForum(forum).base === context.client.forum) {
+      return null;
+    }
+    return {
+      client: clientRegistry.acquire({ forum }),
+      t: context?.t ?? defaultTranslator,
+      locale: context?.locale ?? resolveLocale(void 0),
+      messages: context?.messages,
+      theme: context?.theme ?? "auto",
+      appearance: context?.appearance,
+      debug: context?.debug ?? false,
+      emit: context?.emit ?? noop
+    };
+  }, [forum, context]);
+  return standalone ?? context;
+}
+function useClient() {
+  const context = useContext(CommentsContext);
+  if (!context) {
+    throw new Error(`${PACKAGE_NAME}: useClient() needs a <DiscourseComments> provider`);
+  }
+  return context.client;
+}
+var QUIET_AUTH_ERRORS = /* @__PURE__ */ new Set(["cancelled", "invalid_key"]);
+function DiscourseComments(props) {
+  const { children, appearance, locale, messages, theme = "auto", debug = false, onEvent } = props;
+  const explicitClient = props.client;
+  const forum = props.forum;
+  const creation = props.forum === void 0 ? null : {
+    forum: props.forum,
+    fetch: props.fetch,
+    headers: props.headers,
+    storage: props.storage,
+    clientId: props.clientId,
+    locale,
+    debug
+  };
+  const client = useMemo(
+    () => explicitClient ?? clientRegistry.acquire(creation),
+    [explicitClient, forum]
+  );
+  const messagesKey = messages ? JSON.stringify(messages) : "";
+  const t = useMemo(() => createTranslator(locale, messages), [locale, messagesKey]);
+  const onEventRef = useRef(onEvent);
+  useEffect(() => {
+    onEventRef.current = onEvent;
+  });
+  const value = useMemo(
+    () => ({
+      client,
+      t,
+      locale: resolveLocale(locale),
+      messages,
+      theme,
+      appearance,
+      debug,
+      emit: (event) => onEventRef.current?.(event)
+    }),
+    [client, t, locale, messagesKey, theme, appearance, debug]
+  );
+  useEffect(() => {
+    let previous = client.auth.state();
+    return client.auth.onChange((state) => {
+      const wasSignedIn = previous.status === "signed-in";
+      if (state.status === "signed-in" && state.user && !wasSignedIn) {
+        onEventRef.current?.({ type: "auth.signedIn", user: state.user });
+      } else if (state.status === "anonymous" && wasSignedIn) {
+        onEventRef.current?.({
+          type: "auth.signedOut",
+          expired: state.error?.type === "invalid_key"
+        });
+      }
+      const failure = state.error;
+      if (failure && failure !== previous.error && !QUIET_AUTH_ERRORS.has(failure.type)) {
+        onEventRef.current?.({ type: "error", action: "signIn", error: failure });
+      }
+      previous = state;
+    });
+  }, [client]);
+  return /* @__PURE__ */ jsx(CommentsContext.Provider, { value, children });
+}
+
+// src/react/appearance.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function mergeAppearance(...layers) {
+  const variables = {};
+  const elements = {};
+  for (const layer of layers) {
+    if (!layer) {
+      continue;
+    }
+    Object.assign(variables, layer.variables);
+    for (const [name, value] of Object.entries(layer.elements ?? {})) {
+      elements[name] = cx(elements[name], value) || void 0;
+    }
+  }
+  return { variables, elements };
+}
+function variablesStyle(variables) {
+  const style = {};
+  for (const [name, value] of Object.entries(variables ?? {})) {
+    if (value !== void 0 && value !== "") {
+      style[`--gc-${name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}`] = value;
+    }
+  }
+  return style;
+}
+function Icon({ children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "gc-icon",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children
+    }
+  );
+}
+function HeartIcon({ filled = false }) {
+  return /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: filled ? "currentColor" : "none",
+      d: "M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z"
+    }
+  ) });
+}
+function ReplyIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 17 4 12l5-5" }),
+    /* @__PURE__ */ jsx("path", { d: "M20 18v-2a4 4 0 0 0-4-4H4" })
+  ] });
+}
+function MoreIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1" })
+  ] });
+}
+function PinIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 17v5" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 10.8V4h6v6.8l2 3.2H7z" })
+  ] });
+}
+function BoldIcon() {
+  return /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx("path", { d: "M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z" }) });
+}
+function ItalicIcon() {
+  return /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx("path", { d: "M19 4h-9M14 20H5M15 4 9 20" }) });
+}
+function LinkIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7" })
+  ] });
+}
+function CodeIcon() {
+  return /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx("path", { d: "m16 18 6-6-6-6M8 6l-6 6 6 6" }) });
+}
+function QuoteIcon() {
+  return /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx("path", { d: "M3 21c3 0 7-1 7-8V5H3v7h4c0 3-1 5-4 6zM14 21c3 0 7-1 7-8V5h-7v7h4c0 3-1 5-4 6z" }) });
+}
+function ImageIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" })
+  ] });
+}
+function BackIcon() {
+  return /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) });
+}
+
+// src/react/forum-theme.ts
+var FORUM_ROOT = '.gc-root[data-gc-theme="forum"]';
+var FORUM_STYLED_ROOT = '.gc-root--styled[data-gc-theme="forum"]';
+var TOKEN_SOURCES = [
+  ["fg", "primary"],
+  ["fg-muted", "primary-medium"],
+  ["bg", "secondary"],
+  ["bg-subtle", "primary-very-low"],
+  ["border", "primary-low"],
+  ["accent", "tertiary"],
+  ["accent-fg", "secondary"],
+  ["danger", "danger"]
+];
+var SAFE_NAME = /^[\w-]+$/;
+var SAFE_VALUE = /^[^;{}<>]+$/;
+var SAFE_FAMILY = /^[^"'\;{}<>]+$/;
+var FONT_SOURCE = /^url\("https?:\/\/[^"\s<>]+"\)(?:\s+format\("[\w-]+"\))?$|^local\("[^"\\<>]+"\)$/;
+var FONT_WEIGHT = /^(?:[1-9]\d{0,2}|normal|bold)$/;
+var SCHEME_TYPES = /* @__PURE__ */ new Set(["light", "dark"]);
+var STYLE_ATTRIBUTE = "data-gc-forum-theme";
+var FONTS_ATTRIBUTE = "data-gc-forum-fonts";
+function colorDeclarations(scheme) {
+  let css = "";
+  for (const [name, value] of Object.entries(scheme.colors)) {
+    if (SAFE_NAME.test(name) && SAFE_VALUE.test(value)) {
+      css += `--gc-forum-${name}:${value};`;
+    }
+  }
+  if (SCHEME_TYPES.has(scheme.type)) {
+    css += `color-scheme:${scheme.type};`;
+  }
+  return css;
+}
+function fontDeclarations(fonts) {
+  let css = "";
+  for (const [role, font] of Object.entries(fonts)) {
+    if (font && SAFE_NAME.test(role) && SAFE_VALUE.test(font.stack)) {
+      css += `--gc-forum-font-${role}:${font.stack};`;
+    }
+  }
+  return css;
+}
+function tokenDeclarations(theme) {
+  let css = "";
+  for (const [token, color] of TOKEN_SOURCES) {
+    if (color in theme.schemes.light.colors) {
+      css += `--_gc-${token}:var(--gc-${token},var(--gc-forum-${color}));`;
+    }
+  }
+  if (theme.fonts.body) {
+    css += "--_gc-font:var(--gc-font,var(--gc-forum-font-body));";
+  }
+  return css;
+}
+function forumThemeCss(theme) {
+  const { light, dark } = theme.schemes;
+  let css = `${FORUM_ROOT}{${colorDeclarations(light)}${fontDeclarations(theme.fonts)}}
+`;
+  css += `${FORUM_STYLED_ROOT}{${tokenDeclarations(theme)}}
+`;
+  if (dark) {
+    css += `@media (prefers-color-scheme: dark){${FORUM_ROOT}{${colorDeclarations(dark)}}}
+`;
+  }
+  return css;
+}
+function forumFontFacesCss(theme) {
+  let css = "";
+  for (const font of Object.values(theme.fonts)) {
+    for (const face of font?.faces ?? []) {
+      const weight = String(face.weight);
+      if (SAFE_FAMILY.test(face.family) && FONT_SOURCE.test(face.src) && FONT_WEIGHT.test(weight)) {
+        css += `@font-face{font-family:"${face.family}";src:${face.src};font-weight:${weight};font-display:swap;}
+`;
+      }
+    }
+  }
+  return css;
+}
+function forumStylesheetUrls(theme, forum) {
+  const secure = forum.startsWith("https:");
+  const urls = [];
+  for (const href of theme.stylesheets) {
+    let url;
+    try {
+      url = new URL(href);
+    } catch {
+      continue;
+    }
+    if (url.protocol === "https:" || !secure && url.protocol === "http:") {
+      urls.push(url.href);
+    }
+  }
+  return urls;
+}
+function documentOf(root) {
+  return root.nodeType === 9 ? root : root.ownerDocument;
+}
+function replaceNodes(container, attribute, forum, key, create) {
+  let current = false;
+  for (const node of container.querySelectorAll(`[${attribute}]`)) {
+    const value = node.getAttribute(attribute);
+    if (value === key) {
+      current = true;
+    } else if (value?.startsWith(`${forum}#`)) {
+      node.remove();
+    }
+  }
+  if (!current) {
+    container.append(...create());
+  }
+}
+function applyForumTheme(root, theme, forum) {
+  const doc = documentOf(root);
+  const container = root.nodeType === 9 ? doc.head : root;
+  const key = `${forum}#${theme.version}`;
+  replaceNodes(container, STYLE_ATTRIBUTE, forum, key, () => {
+    const style = doc.createElement("style");
+    style.setAttribute(STYLE_ATTRIBUTE, key);
+    style.textContent = forumThemeCss(theme);
+    const links = forumStylesheetUrls(theme, forum).map((href) => {
+      const link = doc.createElement("link");
+      link.rel = "stylesheet";
+      link.href = href;
+      link.setAttribute(STYLE_ATTRIBUTE, key);
+      return link;
+    });
+    return [style, ...links];
+  });
+  const faces = forumFontFacesCss(theme);
+  if (faces) {
+    replaceNodes(doc.head, FONTS_ATTRIBUTE, forum, key, () => {
+      const style = doc.createElement("style");
+      style.setAttribute(FONTS_ATTRIBUTE, key);
+      style.textContent = faces;
+      return [style];
+    });
+  }
+}
+var loaded = /* @__PURE__ */ new WeakMap();
+function initial(client) {
+  return { client, config: loaded.get(client) ?? null, error: null };
+}
+function useConfig(client) {
+  const [stored, setState] = useState(() => initial(client));
+  let state = stored;
+  if (stored.client !== client) {
+    state = initial(client);
+    setState(state);
+  }
+  const [attempt, setAttempt] = useState(0);
+  useEffect(() => {
+    let active = true;
+    const update = (next) => setState((current) => active && current.client === client ? next(current) : current);
+    const load = () => client.config().then(
+      (config) => {
+        loaded.set(client, config);
+        update(
+          (current) => current.config === config && !current.error ? current : { client, config, error: null }
+        );
+      },
+      (error) => {
+        update((current) => ({ ...current, error: toCommentsError(error) }));
+      }
+    );
+    void load();
+    const stop = client.auth.onChange(() => void load());
+    return () => {
+      active = false;
+      stop();
+    };
+  }, [client, attempt]);
+  const reload = useCallback(() => setAttempt((count) => count + 1), []);
+  return { config: state.config, error: state.error, reload };
+}
+
+// src/react/hooks/use-commenter.ts
+function useCommenter(options = {}) {
+  const { client } = useCommentsContext(options.forum);
+  const { config } = useConfig(client);
+  return useCommenterFor(client, config);
+}
+function useCommenterFor(client, config) {
+  const { auth } = client;
+  const subscribe = useCallback((onChange) => auth.onChange(onChange), [auth]);
+  const getState = useCallback(() => auth.state(), [auth]);
+  const state = useSyncExternalStore(subscribe, getState, getState);
+  const actions = useMemo(
+    () => ({
+      signIn: (signInOptions) => auth.signIn(signInOptions),
+      cancelSignIn: () => auth.cancelSignIn(),
+      signOut: () => auth.signOut()
+    }),
+    [auth]
+  );
+  const providers = config?.auth_providers ?? auth.providers;
+  return useMemo(
+    () => ({
+      user: state.user,
+      status: state.status,
+      providers,
+      degraded: state.degraded,
+      error: state.error,
+      ...actions
+    }),
+    [state, providers, actions]
+  );
+}
+var loaded2 = /* @__PURE__ */ new WeakMap();
+function initial2(client) {
+  return { client, theme: loaded2.get(client) ?? null, error: null };
+}
+function useForumThemeFor(client, enabled) {
+  const [stored, setState] = useState(() => initial2(client));
+  let state = stored;
+  if (stored.client !== client) {
+    state = initial2(client);
+    setState(state);
+  }
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    let active = true;
+    client.theme().then(
+      (theme) => {
+        loaded2.set(client, theme);
+        if (active) {
+          setState(
+            (current) => current.client === client && current.theme !== theme ? { client, theme, error: null } : current
+          );
+        }
+      },
+      (error) => {
+        if (active) {
+          setState(
+            (current) => current.client === client ? { ...current, error: toCommentsError(error) } : current
+          );
+        }
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [client, enabled]);
+  return { theme: state.theme, error: state.error };
+}
+function useForumTheme() {
+  const { client } = useCommentsContext();
+  return useForumThemeFor(client, true);
+}
+function useThread(options = {}) {
+  const { client } = useCommentsContext(options.forum);
+  return useThreadFor(client, options);
+}
+function useThreadFor(client, { identifier, url, title, sort }, onOpenError) {
+  const [attempt, setAttempt] = useState(0);
+  const [opened, setOpened] = useState(
+    { thread: null, error: null }
+  );
+  const pageKey = url === void 0 ? currentUrlWithoutHash() ?? "" : "";
+  const latest = useRef({ title, sort, onOpenError });
+  latest.current = { title, sort, onOpenError };
+  const requestedSort = useRef(sort);
+  useEffect(() => {
+    let active = true;
+    let handle = null;
+    setOpened((current) => current.thread || current.error ? { thread: null, error: null } : current);
+    queueMicrotask(() => {
+      if (!active) {
+        return;
+      }
+      const { title: openTitle, sort: openSort } = latest.current;
+      requestedSort.current = openSort;
+      client.threads.open({ identifier, url, title: openTitle, sort: openSort }).then(
+        (thread2) => {
+          if (!active) {
+            thread2.dispose();
+            return;
+          }
+          handle = thread2;
+          setOpened({ thread: thread2, error: null });
+        },
+        (error) => {
+          if (active) {
+            const failure = toCommentsError(error);
+            setOpened({ thread: null, error: failure });
+            latest.current.onOpenError?.(failure);
+          }
+        }
+      );
+    });
+    return () => {
+      active = false;
+      handle?.dispose();
+    };
+  }, [client, identifier, url, pageKey, attempt]);
+  const { thread } = opened;
+  useEffect(() => {
+    if (thread && sort !== void 0 && sort !== requestedSort.current) {
+      requestedSort.current = sort;
+      void thread.setSort(sort).catch(() => {
+      });
+    }
+  }, [thread, sort]);
+  const subscribe = useCallback(
+    (onChange) => thread ? thread.subscribe(onChange) : () => {
+    },
+    [thread]
+  );
+  const getSnapshot = useCallback(() => thread?.snapshot() ?? null, [thread]);
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const retry = useCallback(() => {
+    if (thread) {
+      void thread.load().catch(() => {
+      });
+    } else {
+      setAttempt((count) => count + 1);
+    }
+  }, [thread]);
+  return { thread, snapshot, error: opened.error, retry };
+}
+var RootContext = createContext(null);
+function useRootContext(component = "This component") {
+  const value = useContext(RootContext);
+  if (!value) {
+    throw new Error(`${PACKAGE_NAME}: ${component} must be rendered inside <Comments.Root>`);
+  }
+  return value;
+}
+function Root(props) {
+  const context = useOptionalCommentsContext(props.forum);
+  if (!context) {
+    return /* @__PURE__ */ jsx("section", { className: cx("gc-root", "gc-root--unconfigured", props.className), "data-gc-unconfigured": "", children: /* @__PURE__ */ jsx("p", { className: "gc-notice", children: `${PACKAGE_NAME}: render <Comments> inside <DiscourseComments forum="\u2026"> or pass a forum prop.` }) });
+  }
+  return /* @__PURE__ */ jsx(ConfiguredRoot, { ...props });
+}
+function ConfiguredRoot(props) {
+  const {
+    forum,
+    identifier,
+    url,
+    title,
+    sort,
+    maxDepth = 2,
+    signIn: signInMode = "inline",
+    onSignInRequired,
+    readOnly = false,
+    highlight,
+    guidelinesUrl,
+    onPosted,
+    appearance,
+    unstyled = false,
+    theme: themeProp,
+    locale: localeProp,
+    className,
+    children
+  } = props;
+  const context = useCommentsContext(forum);
+  const { client, emit } = context;
+  const rootRef = useRef(null);
+  const t = useMemo(
+    () => localeProp ? createTranslator(localeProp, context.messages) : context.t,
+    [localeProp, context.messages, context.t]
+  );
+  const locale = localeProp ? resolveLocale(localeProp) : context.locale;
+  const theme = themeProp ?? context.theme;
+  const { variables, elements } = useMemo(
+    () => mergeAppearance(context.appearance, appearance),
+    [context.appearance, appearance]
+  );
+  const threadIdRef = useRef(void 0);
+  const reportError = useCallback(
+    (action, error) => emit({ type: "error", action, error: toCommentsError(error), threadId: threadIdRef.current }),
+    [emit]
+  );
+  const { thread, snapshot, error: openError, retry: retryThread } = useThreadFor(
+    client,
+    { identifier, url, title, sort },
+    (error) => reportError("open", error)
+  );
+  threadIdRef.current = thread?.id;
+  const { config, error: configError, reload: reloadConfig } = useConfig(client);
+  const commenter = useCommenterFor(client, config);
+  const forumTheme = useForumThemeFor(client, theme === "forum");
+  useEffect(() => {
+    const element = rootRef.current;
+    if (theme === "forum" && forumTheme.theme && element) {
+      applyForumTheme(rootNodeOf(element), forumTheme.theme, client.forum);
+    }
+  }, [theme, forumTheme.theme, client.forum]);
+  const themeError = theme === "forum" ? forumTheme.error : null;
+  useEffect(() => {
+    if (themeError) {
+      reportError("theme", themeError);
+    }
+  }, [themeError, reportError]);
+  const retry = useCallback(() => {
+    retryThread();
+    if (configError) {
+      reloadConfig();
+    }
+  }, [retryThread, configError, reloadConfig]);
+  const loadError = snapshot?.status === "error" ? snapshot.error : null;
+  useEffect(() => {
+    if (loadError) {
+      reportError("load", loadError);
+    }
+  }, [loadError, reportError]);
+  const userId = commenter.user?.id ?? null;
+  const [authEpoch, setAuthEpoch] = useState(
+    { userId, thread: null }
+  );
+  if (authEpoch.userId !== userId) {
+    setAuthEpoch({ userId, thread: snapshot?.thread ?? null });
+  }
+  const permissionsFresh = !!snapshot && snapshot.thread !== authEpoch.thread;
+  const signedIn = commenter.status === "signed-in";
+  const closed = snapshot?.thread.closed ?? false;
+  const writable = !readOnly && !commenter.degraded;
+  const open = !!snapshot && snapshot.status !== "error" && writable && !closed;
+  const commentingDenied = open && signedIn && permissionsFresh && !snapshot.thread.can_comment;
+  const canCompose = open && !commentingDenied && (signedIn || signInMode === "on-submit");
+  const canReply = open && !commentingDenied;
+  const [focusView, setFocusView] = useState(null);
+  const viewRequest = useRef(0);
+  const [highlightId, setHighlightId] = useState(null);
+  const focusRequest = useRef(null);
+  const [, setFocusTick] = useState(0);
+  const focusComment = useCallback((commentId, options) => {
+    focusRequest.current = { id: commentId, scroll: options?.scroll ?? false };
+    setFocusTick((tick) => tick + 1);
+  }, []);
+  useEffect(() => {
+    const request = focusRequest.current;
+    const element = request && rootRef.current?.querySelector(`#gc-${request.id}`);
+    if (!request || !element) {
+      return;
+    }
+    focusRequest.current = null;
+    if (request.scroll) {
+      element.scrollIntoView?.({ block: "center" });
+    }
+    element.focus({ preventScroll: request.scroll });
+  });
+  useEffect(() => {
+    viewRequest.current++;
+    setFocusView(null);
+  }, [thread]);
+  const continueThread = useCallback(
+    async (commentId) => {
+      if (!thread) {
+        return;
+      }
+      const request = ++viewRequest.current;
+      try {
+        const context2 = await thread.context(commentId);
+        if (request !== viewRequest.current) {
+          return;
+        }
+        setFocusView({
+          id: commentId,
+          ancestors: context2.ancestors,
+          truncated: context2.ancestorsTruncated
+        });
+        focusComment(commentId);
+      } catch (error) {
+        if (request === viewRequest.current) {
+          reportError("context", error);
+        }
+      }
+    },
+    [thread, focusComment, reportError]
+  );
+  const closeFocusView = useCallback(() => {
+    viewRequest.current++;
+    if (focusView) {
+      focusComment(focusView.id);
+    }
+    setFocusView(null);
+  }, [focusView, focusComment]);
+  const hashId = useHashCommentId();
+  const requestedHighlight = highlight ?? hashId;
+  const handledHighlight = useRef(null);
+  const ready = snapshot?.status === "ready";
+  useEffect(() => {
+    const handled = handledHighlight.current;
+    if (!thread || !ready || requestedHighlight === null || handled?.thread === thread && handled.id === requestedHighlight) {
+      return;
+    }
+    handledHighlight.current = { thread, id: requestedHighlight };
+    const id = requestedHighlight;
+    const request = ++viewRequest.current;
+    void (async () => {
+      let location = findComment(thread.snapshot().comments, id);
+      if (!location) {
+        try {
+          await thread.context(id);
+        } catch (error) {
+          if (request === viewRequest.current) {
+            reportError("context", error);
+          }
+          return;
+        }
+        location = findComment(thread.snapshot().comments, id);
+      }
+      if (!location || request !== viewRequest.current) {
+        return;
+      }
+      if (location.depth > maxDepth) {
+        const cut = location.depth - maxDepth;
+        const tree = thread.snapshot().comments;
+        const ancestors = location.path.slice(0, cut).map((ancestorId) => findComment(tree, ancestorId)?.node).filter((node) => node !== void 0);
+        setFocusView({ id: location.path[cut], ancestors, truncated: false });
+      } else {
+        setFocusView(null);
+      }
+      setHighlightId(id);
+      focusComment(id, { scroll: true });
+    })();
+  }, [thread, ready, requestedHighlight, maxDepth, focusComment, reportError]);
+  const onSignInRequiredRef = useRef(onSignInRequired);
+  onSignInRequiredRef.current = onSignInRequired;
+  const canRequestSignIn = signInMode !== "manual" || onSignInRequired !== void 0;
+  const ensureSignedIn = useCallback(() => {
+    if (client.auth.status === "signed-in") {
+      return Promise.resolve(true);
+    }
+    if (signInMode === "manual") {
+      onSignInRequiredRef.current?.();
+      return Promise.resolve(false);
+    }
+    return client.auth.signIn().then(
+      (user) => user !== null,
+      () => false
+    );
+  }, [client, signInMode]);
+  const threadKey = snapshot?.thread.key;
+  const draftKey = useCallback(
+    (scope) => threadKey === void 0 ? null : `${STORAGE_PREFIX}:${client.forum}:draft:${threadKey}:${scope}`,
+    [client.forum, threadKey]
+  );
+  const value = {
+    client,
+    t,
+    locale,
+    thread,
+    snapshot,
+    openError,
+    retry,
+    config,
+    configError,
+    commenter,
+    maxDepth,
+    signInMode,
+    readOnly,
+    guidelinesUrl: guidelinesUrl ?? config?.guidelines_url ?? null,
+    debug: context.debug,
+    elements,
+    writable,
+    canCompose,
+    commentingDenied,
+    canReply,
+    canRequestSignIn,
+    focusView,
+    continueThread,
+    closeFocusView,
+    highlightId,
+    focusComment,
+    ensureSignedIn,
+    reportError,
+    emit,
+    onPosted,
+    draftKey
+  };
+  return /* @__PURE__ */ jsx(RootContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "section",
+    {
+      ref: rootRef,
+      className: cx("gc-root", !unstyled && "gc-root--styled", elements.root, className),
+      "data-gc-theme": theme === "inherit" ? void 0 : theme,
+      style: variablesStyle(variables),
+      "aria-label": t("comments"),
+      "aria-busy": !snapshot && !openError ? true : void 0,
+      children
+    }
+  ) });
+}
+function useHashCommentId() {
+  const [id, setId] = useState(null);
+  useEffect(() => {
+    const read = () => {
+      const match = /^#gc-(\d+)$/.exec(window.location.hash);
+      setId(match ? Number(match[1]) : null);
+    };
+    read();
+    window.addEventListener("hashchange", read);
+    return () => window.removeEventListener("hashchange", read);
+  }, []);
+  return id;
+}
+
+// src/react/composer/markdown.ts
+function applyFormat(value, start, end, format) {
+  const selected = value.slice(start, end);
+  switch (format) {
+    case "bold":
+      return wrap(value, start, end, "**", "**");
+    case "italic":
+      return wrap(value, start, end, "*", "*");
+    case "code":
+      return selected.includes("\n") ? fence(value, start, end) : wrap(value, start, end, "`", "`");
+    case "link": {
+      const url = "https://";
+      const urlStart = start + selected.length + 3;
+      return {
+        value: `${value.slice(0, start)}[${selected}](${url})${value.slice(end)}`,
+        selectionStart: urlStart,
+        selectionEnd: urlStart + url.length
+      };
+    }
+    case "quote":
+      return quote(value, start, end);
+  }
+}
+function insertText(value, start, end, text) {
+  const caret = start + text.length;
+  return {
+    value: value.slice(0, start) + text + value.slice(end),
+    selectionStart: caret,
+    selectionEnd: caret
+  };
+}
+function imageMarkdown(upload) {
+  const name = upload.original_filename.replace(/\.[^.]+$/, "").replace(/[[\]|]/g, "");
+  const size = upload.width && upload.height ? `|${upload.width}x${upload.height}` : "";
+  return `![${name}${size}](${upload.short_url})`;
+}
+function mentionQuery(value, caret) {
+  const match = /(?:^|[\s([{])@([\w.-]{1,60})$/.exec(value.slice(0, caret));
+  if (!match) {
+    return null;
+  }
+  const query = match[1];
+  return { start: caret - query.length - 1, query };
+}
+function wrap(value, start, end, before, after) {
+  return {
+    value: value.slice(0, start) + before + value.slice(start, end) + after + value.slice(end),
+    selectionStart: start + before.length,
+    selectionEnd: end + before.length
+  };
+}
+function fence(value, start, end) {
+  const before = start > 0 && value[start - 1] !== "\n" ? "\n" : "";
+  const open = `${before}\`\`\`
+`;
+  const close = "\n```\n";
+  return {
+    value: value.slice(0, start) + open + value.slice(start, end) + close + value.slice(end),
+    selectionStart: start + open.length,
+    selectionEnd: end + open.length
+  };
+}
+function quote(value, start, end) {
+  const lineStart = value.lastIndexOf("\n", start - 1) + 1;
+  const lines = value.slice(lineStart, end).split("\n");
+  const quoted = lines.map((line) => `> ${line}`).join("\n");
+  return {
+    value: value.slice(0, lineStart) + quoted + value.slice(end),
+    selectionStart: start + 2,
+    selectionEnd: end + 2 * lines.length
+  };
+}
+var SEARCH_DELAY_MS = 150;
+function useMentions(options) {
+  const { client, threadId, enabled, value, caret, onPick } = options;
+  const query = enabled ? mentionQuery(value, caret) : null;
+  const [results, setResults] = useState({
+    query: "",
+    users: []
+  });
+  const [active, setActive] = useState(0);
+  const [dismissed, setDismissed] = useState(null);
+  const queryKey = query ? `${query.start}:${query.query}` : null;
+  useEffect(() => {
+    if (!query) {
+      return;
+    }
+    let current = true;
+    const timer = setTimeout(() => {
+      client.mentions(query.query, threadId).then(
+        (users) => {
+          if (current) {
+            setResults({ query: query.query, users });
+            setActive(0);
+          }
+        },
+        () => {
+        }
+      );
+    }, SEARCH_DELAY_MS);
+    return () => {
+      current = false;
+      clearTimeout(timer);
+    };
+  }, [client, threadId, query?.query]);
+  const open = query !== null && results.query === query.query && results.users.length > 0 && dismissed !== queryKey;
+  const pick = useCallback(
+    (index) => {
+      const user = results.users[index];
+      if (query && user) {
+        onPick(query, user.username);
+      }
+    },
+    [results.users, query, onPick]
+  );
+  const onKeyDown = (event) => {
+    if (!open) {
+      return false;
+    }
+    const count = results.users.length;
+    switch (event.key) {
+      case "ArrowDown":
+        setActive((index) => (index + 1) % count);
+        break;
+      case "ArrowUp":
+        setActive((index) => (index - 1 + count) % count);
+        break;
+      case "Enter":
+      case "Tab":
+        if (event.metaKey || event.ctrlKey) {
+          return false;
+        }
+        pick(active);
+        break;
+      case "Escape":
+        setDismissed(queryKey);
+        break;
+      default:
+        return false;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    return true;
+  };
+  return { open, users: results.users, active, setActive, onKeyDown, pick };
+}
+function Composer(props) {
+  const root = useRootContext("Comments.Composer");
+  if (!root.thread || !root.snapshot || !composerAllowed(root, props.editing)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ComposerForm, { ...props, thread: root.thread });
+}
+function composerAllowed(root, editing) {
+  if (editing) {
+    return root.writable && root.commenter.status === "signed-in" && editing.can.edit;
+  }
+  return root.canCompose;
+}
+var FORMATS = [
+  { format: "bold", label: "bold", icon: /* @__PURE__ */ jsx(BoldIcon, {}) },
+  { format: "italic", label: "italic", icon: /* @__PURE__ */ jsx(ItalicIcon, {}) },
+  { format: "link", label: "insertLink", icon: /* @__PURE__ */ jsx(LinkIcon, {}) },
+  { format: "code", label: "code", icon: /* @__PURE__ */ jsx(CodeIcon, {}) },
+  { format: "quote", label: "quote", icon: /* @__PURE__ */ jsx(QuoteIcon, {}) }
+];
+function ComposerForm({
+  replyTo,
+  editing,
+  placeholder,
+  autoFocus,
+  onDone,
+  className,
+  thread
+}) {
+  const root = useRootContext();
+  const { t, client, config, commenter, elements } = root;
+  const id = useId();
+  const textareaRef = useRef(null);
+  const fileRef = useRef(null);
+  const pendingSelection = useRef(null);
+  const [timer] = useState(createComposerTimer);
+  const draftKey = editing ? null : root.draftKey(replyTo ? `reply:${replyTo.id}` : "root");
+  const [value, setValueState] = useState(() => draftKey ? readDraft(draftKey) : "");
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const [caret, setCaret] = useState(0);
+  const [raw, setRaw] = useState(editing ? "loading" : "loaded");
+  const [rawAttempt, setRawAttempt] = useState(0);
+  const [tab, setTab] = useState("write");
+  const [preview, setPreview] = useState(
+    { html: null, loading: false, failed: false }
+  );
+  const previewRequest = useRef(0);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+  const [uploading, setUploading] = useState(0);
+  const [waitSeconds, startCountdown] = useCountdown();
+  const submission = useRef(0);
+  const allowedRef = useRef(true);
+  allowedRef.current = composerAllowed(root, editing);
+  const setValue = useCallback(
+    (next, selection) => {
+      valueRef.current = next;
+      setValueState(next);
+      if (draftKey) {
+        writeDraft(draftKey, next);
+      }
+      if (selection) {
+        pendingSelection.current = selection;
+      }
+    },
+    [draftKey]
+  );
+  const applyEdit = useCallback(
+    (edit) => setValue(edit.value, [edit.selectionStart, edit.selectionEnd]),
+    [setValue]
+  );
+  useIsomorphicLayoutEffect(() => {
+    const selection = pendingSelection.current;
+    const textarea = textareaRef.current;
+    if (selection && textarea) {
+      pendingSelection.current = null;
+      textarea.focus();
+      textarea.setSelectionRange(selection[0], selection[1]);
+      setCaret(selection[1]);
+    }
+  });
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (autoFocus && !editing && textarea) {
+      const end = valueRef.current.length;
+      textarea.focus();
+      textarea.setSelectionRange(end, end);
+      setCaret(end);
+    }
+  }, [autoFocus, editing]);
+  useEffect(
+    () => () => {
+      submission.current++;
+    },
+    [thread]
+  );
+  const editingId = editing?.id;
+  useEffect(() => {
+    if (editingId === void 0) {
+      return;
+    }
+    let active = true;
+    setRaw("loading");
+    setError(null);
+    thread.raw(editingId).then(
+      (source) => {
+        if (active) {
+          setValue(source, [source.length, source.length]);
+          setRaw("loaded");
+        }
+      },
+      (failure) => {
+        if (active) {
+          setError(toCommentsError(failure));
+          setRaw("failed");
+        }
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [thread, editingId, setValue, rawAttempt]);
+  useEffect(() => {
+    if (waitSeconds === 0) {
+      setError((current) => current?.type === "rate_limit" ? null : current);
+    }
+  }, [waitSeconds]);
+  const signedIn = commenter.status === "signed-in";
+  const signingIn = commenter.status === "signing-in";
+  const uploadsEnabled = signedIn && config?.features.uploads === true;
+  const min = Math.max(config?.limits.min_post_length ?? 1, 1);
+  const max = config?.limits.max_post_length ?? Number.POSITIVE_INFINITY;
+  const length = value.trim().length;
+  const tooShort = length > 0 && length < min;
+  const tooLong = length > max;
+  const loadingRaw = raw === "loading";
+  const editable = raw === "loaded" && !submitting;
+  const busy = submitting || raw !== "loaded" || uploading > 0 || waitSeconds > 0 || signingIn;
+  const canSubmit = !busy && length >= min && !tooLong;
+  const onPickMention = useCallback(
+    (query, username) => applyEdit(insertText(valueRef.current, query.start, caret, `@${username} `)),
+    [applyEdit, caret]
+  );
+  const mentions = useMentions({
+    client,
+    threadId: thread.id,
+    enabled: signedIn && config?.features.mentions !== false && tab === "write" && editable,
+    value,
+    caret,
+    onPick: onPickMention
+  });
+  async function send() {
+    if (!allowedRef.current) {
+      return;
+    }
+    const body = valueRef.current;
+    setSubmitting(true);
+    setError(null);
+    try {
+      if (editing) {
+        await thread.edit(editing.id, body);
+        onDone?.();
+        return;
+      }
+      const result = await thread.post({ body, replyTo: replyTo?.id, composer: timer });
+      if (valueRef.current === body) {
+        setValue("");
+      }
+      setTab("write");
+      if (result.type === "created") {
+        root.emit({ type: "comment.posted", threadId: thread.id, comment: result.comment });
+        if (replyTo) {
+          root.focusComment(result.comment.id);
+        }
+      } else {
+        root.emit({ type: "comment.pending", threadId: thread.id, pending: result.pending });
+      }
+      root.onPosted?.(result);
+      onDone?.();
+    } catch (failure) {
+      const commentsError = toCommentsError(failure);
+      if (commentsError.type === "rate_limit" && commentsError.waitSeconds) {
+        startCountdown(commentsError.waitSeconds);
+      }
+      setError(commentsError);
+      root.reportError(editing ? "edit" : "post", commentsError);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  function submit() {
+    if (!canSubmit) {
+      return;
+    }
+    if (signedIn) {
+      void send();
+      return;
+    }
+    if (root.signInMode === "on-submit") {
+      const token = ++submission.current;
+      setError(null);
+      client.auth.signIn().then(
+        (user) => {
+          if (user && token === submission.current) {
+            void send();
+          }
+        },
+        (failure) => {
+          const signInError = toCommentsError(failure);
+          if (token === submission.current && signInError.type !== "cancelled") {
+            setError(signInError);
+          }
+        }
+      );
+    }
+  }
+  function cancel() {
+    submission.current++;
+    onDone?.();
+  }
+  function format(kind) {
+    const textarea = textareaRef.current;
+    const start = textarea?.selectionStart ?? valueRef.current.length;
+    const end = textarea?.selectionEnd ?? start;
+    applyEdit(applyFormat(valueRef.current, start, end, kind));
+  }
+  async function upload(files, pasted = false) {
+    for (const file of files.filter((candidate) => candidate.type.startsWith("image/"))) {
+      setUploading((count) => count + 1);
+      try {
+        const uploaded = await client.attachments.upload(thread.id, file, { pasted });
+        const textarea = textareaRef.current;
+        const current = valueRef.current;
+        const start = textarea?.selectionStart ?? current.length;
+        const end = textarea?.selectionEnd ?? start;
+        const before = start > 0 && current[start - 1] !== "\n" ? "\n" : "";
+        applyEdit(insertText(current, start, end, `${before}${imageMarkdown(uploaded)}
+`));
+      } catch (failure) {
+        setError(toCommentsError(failure));
+        root.reportError("upload", failure);
+      } finally {
+        setUploading((count) => count - 1);
+      }
+    }
+  }
+  function showPreview() {
+    setTab("preview");
+    const body = valueRef.current;
+    const request = ++previewRequest.current;
+    if (!body.trim()) {
+      setPreview({ html: null, loading: false, failed: false });
+      return;
+    }
+    setPreview({ html: null, loading: true, failed: false });
+    client.preview(body).then(
+      (html) => {
+        if (request === previewRequest.current) {
+          setPreview({ html, loading: false, failed: false });
+        }
+      },
+      (failure) => {
+        if (request === previewRequest.current) {
+          setPreview({ html: null, loading: false, failed: true });
+          root.reportError("preview", failure);
+        }
+      }
+    );
+  }
+  function onChange(event) {
+    timer.typing();
+    setValue(event.target.value);
+    setCaret(event.target.selectionStart);
+  }
+  function onKeyDown(event) {
+    if (mentions.onKeyDown(event)) {
+      return;
+    }
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      submit();
+    } else if (event.key === "Escape" && (replyTo || editing)) {
+      event.preventDefault();
+      cancel();
+    }
+  }
+  function onPaste(event) {
+    const files = [...event.clipboardData.files];
+    if (uploadsEnabled && editable && files.some((file) => file.type.startsWith("image/"))) {
+      event.preventDefault();
+      void upload(files, true);
+    }
+  }
+  function onDragOver(event) {
+    if (uploadsEnabled && editable && event.dataTransfer.types.includes("Files")) {
+      event.preventDefault();
+    }
+  }
+  function onDrop(event) {
+    const files = [...event.dataTransfer.files];
+    if (uploadsEnabled && editable && files.length > 0) {
+      event.preventDefault();
+      void upload(files);
+    }
+  }
+  function onTabKeyDown(event) {
+    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+      event.preventDefault();
+      if (tab === "write") {
+        showPreview();
+      } else {
+        setTab("write");
+      }
+      rootNodeOf(event.currentTarget).getElementById(`${id}-${tab === "write" ? "preview" : "write"}-tab`)?.focus();
+    }
+  }
+  const label = editing ? t("editing") : replyTo ? t("replyingTo", { username: replyTo.author?.username ?? "" }) : t("composerPlaceholder");
+  const hintId = `${id}-hint`;
+  const errorId = `${id}-error`;
+  const listId = `${id}-mentions`;
+  const messages = error ? errorMessages(error, waitSeconds, t) : [];
+  const submitLabel = editing ? t("save") : replyTo ? t("reply") : t("post");
+  const defaultPlaceholder = editing ? void 0 : replyTo ? t("replyPlaceholder") : t("composerPlaceholder");
+  const hint = tooLong ? t("tooLong", { max }) : tooShort ? t("tooShort", { min }) : null;
+  const canPreview = signedIn;
+  const isMain = !replyTo && !editing;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "gc-composer",
+        replyTo && "gc-composer--replying",
+        editing && "gc-composer--editing",
+        elements.composer,
+        className
+      ),
+      children: [
+        isMain && root.guidelinesUrl && /* @__PURE__ */ jsx(
+          "a",
+          {
+            className: "gc-composer__guidelines",
+            href: root.guidelinesUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: t("guidelines")
+          }
+        ),
+        !isMain && /* @__PURE__ */ jsx("p", { className: "gc-composer__context", children: label }),
+        canPreview && /* @__PURE__ */ jsxs("div", { className: "gc-composer__tabs", role: "tablist", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              id: `${id}-write-tab`,
+              className: "gc-composer__tab",
+              "aria-selected": tab === "write",
+              "aria-controls": `${id}-write`,
+              tabIndex: tab === "write" ? 0 : -1,
+              onClick: () => setTab("write"),
+              onKeyDown: onTabKeyDown,
+              children: t("write")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              id: `${id}-preview-tab`,
+              className: "gc-composer__tab",
+              "aria-selected": tab === "preview",
+              "aria-controls": `${id}-preview`,
+              tabIndex: tab === "preview" ? 0 : -1,
+              onClick: showPreview,
+              onKeyDown: onTabKeyDown,
+              children: t("preview")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "gc-composer__panel",
+            id: `${id}-write`,
+            role: canPreview ? "tabpanel" : void 0,
+            "aria-labelledby": canPreview ? `${id}-write-tab` : void 0,
+            hidden: tab !== "write",
+            children: [
+              signedIn && /* @__PURE__ */ jsxs("div", { className: cx("gc-toolbar", elements.toolbar), role: "group", "aria-label": t("formatting"), children: [
+                FORMATS.map(({ format: kind, label: key, icon }) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "gc-toolbar__button",
+                    "aria-label": t(key),
+                    title: t(key),
+                    disabled: !editable,
+                    onClick: () => format(kind),
+                    children: icon
+                  },
+                  kind
+                )),
+                uploadsEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "gc-toolbar__button",
+                      "aria-label": t("upload"),
+                      title: t("upload"),
+                      disabled: !editable,
+                      onClick: () => fileRef.current?.click(),
+                      children: /* @__PURE__ */ jsx(ImageIcon, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: fileRef,
+                      type: "file",
+                      accept: "image/*",
+                      multiple: true,
+                      hidden: true,
+                      onChange: (event) => {
+                        const files = [...event.target.files ?? []];
+                        event.target.value = "";
+                        void upload(files);
+                      }
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "gc-composer__field", children: [
+                /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    ref: textareaRef,
+                    className: cx("gc-composer__input", elements.textarea),
+                    value,
+                    placeholder: placeholder ?? defaultPlaceholder,
+                    "aria-label": label,
+                    "aria-describedby": cx(hint && hintId, messages.length > 0 && errorId) || void 0,
+                    "aria-invalid": tooLong || void 0,
+                    "aria-autocomplete": mentions.open ? "list" : void 0,
+                    "aria-controls": mentions.open ? listId : void 0,
+                    "aria-activedescendant": mentions.open ? `${listId}-${mentions.active}` : void 0,
+                    rows: isMain ? 3 : 2,
+                    disabled: raw !== "loaded",
+                    readOnly: submitting,
+                    onChange,
+                    onSelect: (event) => setCaret(event.currentTarget.selectionStart),
+                    onFocus: () => timer.start(),
+                    onKeyDown,
+                    onPaste,
+                    onDragOver,
+                    onDrop
+                  }
+                ),
+                mentions.open && /* @__PURE__ */ jsx("ul", { className: "gc-mentions", role: "listbox", id: listId, "aria-label": t("mentionSuggestions"), children: mentions.users.map((user, index) => /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    id: `${listId}-${index}`,
+                    role: "option",
+                    "aria-selected": index === mentions.active,
+                    className: cx(
+                      "gc-mentions__option",
+                      index === mentions.active && "gc-mentions__option--active"
+                    ),
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                      mentions.pick(index);
+                    },
+                    onMouseEnter: () => mentions.setActive(index),
+                    children: [
+                      /* @__PURE__ */ jsx("img", { className: "gc-avatar gc-avatar--small", src: user.avatar_url, alt: "" }),
+                      /* @__PURE__ */ jsxs("span", { className: "gc-mentions__username", children: [
+                        "@",
+                        user.username
+                      ] }),
+                      user.name && /* @__PURE__ */ jsx("span", { className: "gc-mentions__name", children: user.name })
+                    ]
+                  },
+                  user.id
+                )) })
+              ] })
+            ]
+          }
+        ),
+        canPreview && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "gc-composer__panel",
+            id: `${id}-preview`,
+            role: "tabpanel",
+            "aria-labelledby": `${id}-preview-tab`,
+            "aria-busy": preview.loading || void 0,
+            hidden: tab !== "preview",
+            children: preview.loading ? /* @__PURE__ */ jsx("p", { className: "gc-composer__status", children: t("loading") }) : preview.failed ? /* @__PURE__ */ jsx("p", { className: "gc-composer__status", children: t("genericError") }) : preview.html ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "gc-composer__preview gc-prose",
+                dangerouslySetInnerHTML: { __html: preview.html }
+              }
+            ) : /* @__PURE__ */ jsx("p", { className: "gc-composer__status", children: t("previewEmpty") })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "gc-composer__footer", children: [
+          /* @__PURE__ */ jsxs("div", { className: "gc-composer__messages", "aria-live": "polite", children: [
+            loadingRaw && /* @__PURE__ */ jsx("p", { className: "gc-composer__status", children: t("loading") }),
+            uploading > 0 && /* @__PURE__ */ jsx("p", { className: "gc-composer__status", children: t("uploading") }),
+            signingIn && /* @__PURE__ */ jsx("p", { className: "gc-composer__status", children: t("signingIn") }),
+            hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "gc-composer__hint", children: hint }),
+            messages.length > 0 && /* @__PURE__ */ jsx("div", { id: errorId, className: "gc-composer__error", role: "alert", children: messages.map((message) => /* @__PURE__ */ jsx("p", { children: message }, message)) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "gc-composer__buttons", children: [
+            signingIn && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cx("gc-button", elements.button),
+                onClick: () => client.auth.cancelSignIn(),
+                children: t("signInCancel")
+              }
+            ),
+            raw === "failed" && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cx("gc-button", elements.button),
+                onClick: () => setRawAttempt((count) => count + 1),
+                children: t("retry")
+              }
+            ),
+            !isMain && !signingIn && /* @__PURE__ */ jsx("button", { type: "button", className: cx("gc-button", elements.button), onClick: cancel, children: t("cancel") }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cx("gc-button", "gc-button--primary", elements.button, elements.primaryButton),
+                disabled: !canSubmit,
+                "aria-busy": submitting || void 0,
+                onClick: submit,
+                children: submitting && !editing ? t("posting") : submitLabel
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function errorMessages(error, waitSeconds, t) {
+  switch (error.type) {
+    case "rate_limit":
+      return waitSeconds > 0 ? [t("rateLimited", { count: waitSeconds })] : error.errors.slice(0, 1);
+    case "invalid_key":
+    case "not_logged_in":
+      return [t("sessionExpired")];
+    case "unreachable":
+    case "unknown":
+    case "cancelled":
+      return [t("genericError")];
+    default:
+      return error.errors.length > 0 ? error.errors : [t("genericError")];
+  }
+}
+function useCountdown() {
+  const [until, setUntil] = useState(0);
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (until <= Date.now()) {
+      return;
+    }
+    const timer = setInterval(() => {
+      const at = Date.now();
+      setNow(at);
+      if (at >= until) {
+        clearInterval(timer);
+      }
+    }, 250);
+    return () => clearInterval(timer);
+  }, [until]);
+  const start = useCallback((seconds) => {
+    const at = Date.now();
+    setNow(at);
+    setUntil(at + seconds * 1e3);
+  }, []);
+  return [Math.max(0, Math.ceil((until - now) / 1e3)), start];
+}
+var ItemContext = createContext(null);
+function useItemContext(component) {
+  const value = useContext(ItemContext);
+  if (!value) {
+    throw new Error(`${PACKAGE_NAME}: ${component} must be rendered inside <Comments.Item>`);
+  }
+  return value;
+}
+function Avatar({ className }) {
+  const { comment } = useItemContext("Comments.Avatar");
+  const { elements } = useRootContext("Comments.Avatar");
+  return /* @__PURE__ */ jsx(UserAvatar, { user: comment.author, className: cx(elements.avatar, className) });
+}
+function UserAvatar({
+  user,
+  className
+}) {
+  if (user?.avatar_url) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        className: cx("gc-avatar", className),
+        src: user.avatar_url,
+        alt: "",
+        loading: "lazy",
+        decoding: "async"
+      }
+    );
+  }
+  const initial3 = (user?.name || user?.username || "").charAt(0).toUpperCase();
+  return /* @__PURE__ */ jsx("span", { className: cx("gc-avatar", "gc-avatar--placeholder", className), "aria-hidden": "true", children: initial3 });
+}
+function Meta({ className }) {
+  const { comment } = useItemContext("Comments.Meta");
+  const { t, locale, client, elements } = useRootContext("Comments.Meta");
+  const author = comment.author;
+  const name = author ? author.name || author.username : null;
+  return /* @__PURE__ */ jsxs("div", { className: cx("gc-comment__meta", elements.meta, className), children: [
+    name && (author?.username ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        className: "gc-comment__author",
+        href: `${client.forum}/u/${encodeURIComponent(author.username)}`,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: name
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "gc-comment__author", children: name })),
+    author?.staff && /* @__PURE__ */ jsx("span", { className: "gc-badge gc-badge--staff", children: t("staff") }),
+    comment.pinned && /* @__PURE__ */ jsxs("span", { className: "gc-badge gc-badge--featured", children: [
+      /* @__PURE__ */ jsx(PinIcon, {}),
+      t("pinned")
+    ] }),
+    /* @__PURE__ */ jsx("a", { className: "gc-comment__time", href: `#gc-${comment.id}`, children: /* @__PURE__ */ jsx(RelativeTime, { iso: comment.created_at, locale }) }),
+    comment.edited && /* @__PURE__ */ jsx("span", { className: "gc-comment__edited", title: formatAbsolute(comment.updated_at, locale), children: t("edited") })
+  ] });
+}
+function RelativeTime({ iso, locale }) {
+  const [now, setNow] = useState(Date.now);
+  useEffect(() => onMinuteTick(() => setNow(Date.now())), []);
+  return /* @__PURE__ */ jsx("time", { dateTime: iso, title: formatAbsolute(iso, locale), children: formatRelative(iso, now, locale) });
+}
+function Body({ className }) {
+  const { comment, mode, setMode } = useItemContext("Comments.Body");
+  const { t, elements } = useRootContext("Comments.Body");
+  const classes = cx("gc-comment__body", elements.body, className);
+  if (mode === "edit") {
+    return /* @__PURE__ */ jsx(Composer, { editing: comment, onDone: () => setMode("view") });
+  }
+  if (comment.deleted) {
+    return /* @__PURE__ */ jsx("p", { className: cx(classes, "gc-comment__body--removed"), children: t("deleted") });
+  }
+  if (comment.hidden && !comment.html) {
+    return /* @__PURE__ */ jsx("p", { className: cx(classes, "gc-comment__body--removed"), children: t("hidden") });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    comment.hidden && /* @__PURE__ */ jsx("p", { className: "gc-comment__hidden-note", children: t("hidden") }),
+    /* @__PURE__ */ jsx("div", { className: cx(classes, "gc-prose"), dangerouslySetInnerHTML: { __html: comment.html } })
+  ] });
+}
+function Actions({ className }) {
+  const root = useRootContext("Comments.Actions");
+  const { comment, depth, setMode, setNotice } = useItemContext("Comments.Actions");
+  const { t, thread, commenter, elements, writable } = root;
+  if (!thread || comment.deleted) {
+    return null;
+  }
+  const signedIn = commenter.status === "signed-in";
+  const { likes, can } = comment;
+  const likeDisabled = !writable || (signedIn ? !likes.can_like && !likes.liked : !root.canRequestSignIn);
+  const buttonClass = cx("gc-button", "gc-button--ghost", "gc-button--small", elements.button);
+  const fail = (action, error) => {
+    setNotice({ text: actionError(error, t), error: true });
+    root.reportError(action, error);
+  };
+  const toggleLike = () => {
+    setNotice(null);
+    const liked = !likes.liked;
+    const ready = signedIn ? Promise.resolve(true) : root.ensureSignedIn();
+    void ready.then(async (ok) => {
+      if (!ok) {
+        return;
+      }
+      try {
+        const updated = liked ? await thread.like(comment.id) : await thread.unlike(comment.id);
+        root.emit({ type: "comment.liked", threadId: thread.id, comment: updated, liked });
+      } catch (error) {
+        fail("like", error);
+      }
+    });
+  };
+  const reply = (event) => {
+    const trigger = event.currentTarget;
+    setNotice(null);
+    if (signedIn || root.signInMode === "on-submit") {
+      setMode("reply", trigger);
+      return;
+    }
+    void root.ensureSignedIn().then((ok) => ok && setMode("reply", trigger));
+  };
+  const items = [
+    {
+      key: "copy",
+      label: t("copyLink"),
+      onSelect: () => {
+        const href = `${currentUrlWithoutHash() ?? ""}#gc-${comment.id}`;
+        const clipboard = typeof navigator === "undefined" ? void 0 : navigator.clipboard;
+        if (!clipboard) {
+          window.location.hash = `gc-${comment.id}`;
+          return;
+        }
+        clipboard.writeText(href).then(
+          () => setNotice({ text: t("linkCopied"), error: false }),
+          () => {
+            window.location.hash = `gc-${comment.id}`;
+          }
+        );
+      }
+    }
+  ];
+  if (writable && can.edit) {
+    items.push({ key: "edit", label: t("edit"), onSelect: (trigger) => setMode("edit", trigger) });
+  }
+  if (writable && can.pin && depth === 0) {
+    items.push({
+      key: "pin",
+      label: comment.pinned ? t("unpin") : t("pin"),
+      onSelect: () => {
+        const action = comment.pinned ? thread.unpin(comment.id) : thread.pin(comment.id);
+        action.catch((error) => fail("pin", error));
+      }
+    });
+  }
+  if (writable && can.flag) {
+    items.push({ key: "report", label: t("report"), onSelect: (trigger) => setMode("report", trigger) });
+  }
+  if (writable && can.delete) {
+    items.push({
+      key: "delete",
+      label: t("delete"),
+      danger: true,
+      onSelect: (trigger) => setMode("delete", trigger)
+    });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cx("gc-actions", elements.actions, className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cx(buttonClass, "gc-actions__like", likes.liked && "gc-actions__like--active"),
+        "aria-pressed": likes.liked,
+        "aria-label": `${t(likes.liked ? "unlike" : "like")}, ${t("likeCount", { count: likes.count })}`,
+        disabled: likeDisabled,
+        onClick: toggleLike,
+        children: [
+          /* @__PURE__ */ jsx(HeartIcon, { filled: likes.liked }),
+          /* @__PURE__ */ jsx("span", { className: "gc-actions__count", children: likes.count })
+        ]
+      }
+    ),
+    root.canReply && (signedIn || root.canRequestSignIn) && /* @__PURE__ */ jsxs("button", { type: "button", className: buttonClass, onClick: reply, children: [
+      /* @__PURE__ */ jsx(ReplyIcon, {}),
+      t("reply")
+    ] }),
+    /* @__PURE__ */ jsx(ActionMenu, { items, label: t("moreActions"), buttonClass })
+  ] });
+}
+function ActionMenu({
+  items,
+  label,
+  buttonClass
+}) {
+  const { elements } = useRootContext();
+  const [open, setOpen] = useState(false);
+  const id = useId();
+  const buttonRef = useRef(null);
+  const menuRef = useRef(null);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    menuRef.current?.querySelector('[role="menuitem"]')?.focus();
+    const onPointerDown = (event) => {
+      const path = event.composedPath();
+      const inside = (node) => node !== null && path.includes(node);
+      if (!inside(menuRef.current) && !inside(buttonRef.current)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+  const close = (refocus) => {
+    setOpen(false);
+    {
+      buttonRef.current?.focus();
+    }
+  };
+  const onMenuKeyDown = (event) => {
+    const options = [...menuRef.current?.querySelectorAll('[role="menuitem"]') ?? []];
+    const index = options.indexOf(rootNodeOf(event.currentTarget).activeElement);
+    const move = (next) => options[(next + options.length) % options.length]?.focus();
+    switch (event.key) {
+      case "ArrowDown":
+        move(index + 1);
+        break;
+      case "ArrowUp":
+        move(index - 1);
+        break;
+      case "Home":
+        move(0);
+        break;
+      case "End":
+        move(options.length - 1);
+        break;
+      case "Escape":
+        close();
+        break;
+      case "Tab":
+        setOpen(false);
+        return;
+      default:
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "gc-menu", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        className: cx(buttonClass, "gc-button--icon"),
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? id : void 0,
+        onClick: () => setOpen((current) => !current),
+        children: /* @__PURE__ */ jsx(MoreIcon, {})
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref: menuRef,
+        id,
+        role: "menu",
+        "aria-label": label,
+        className: cx("gc-menu__list", elements.menu),
+        onKeyDown: onMenuKeyDown,
+        children: items.map((item) => /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            tabIndex: -1,
+            className: cx("gc-menu__item", item.danger && "gc-menu__item--danger"),
+            onClick: () => {
+              close();
+              item.onSelect(buttonRef.current);
+            },
+            children: item.label
+          }
+        ) }, item.key))
+      }
+    )
+  ] });
+}
+var FLAG_TYPES = [
+  "inappropriate",
+  "spam",
+  "illegal",
+  "off_topic",
+  "notify_moderators"
+];
+var MESSAGE_REQUIRED = /* @__PURE__ */ new Set(["illegal", "notify_moderators"]);
+function ReportForm({ onClose }) {
+  const root = useRootContext("Comments.Item");
+  const { comment, setNotice } = useItemContext("Comments.Item");
+  const { t, thread, elements } = root;
+  const [type, setType] = useState("inappropriate");
+  const [message, setMessage] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+  const id = useId();
+  const formRef = useRef(null);
+  const needsMessage = MESSAGE_REQUIRED.has(type);
+  const messageLabel = needsMessage ? t("reportMessageRequired") : t("reportMessagePlaceholder");
+  useEffect(() => {
+    formRef.current?.querySelector("input:checked")?.focus();
+  }, []);
+  const submit = async (event) => {
+    event.preventDefault();
+    if (!thread || !root.writable || !comment.can.flag || needsMessage && !message.trim()) {
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      await thread.flag(comment.id, { type, message: message.trim() || void 0 });
+      setNotice({ text: t("reportSent"), error: false });
+      onClose();
+    } catch (failure) {
+      setError(actionError(failure, t));
+      root.reportError("flag", failure);
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "false",
+      "aria-labelledby": `${id}-title`,
+      className: cx("gc-report", elements.dialog),
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          onClose();
+        }
+      },
+      children: /* @__PURE__ */ jsxs("form", { ref: formRef, onSubmit: submit, children: [
+        /* @__PURE__ */ jsxs("fieldset", { className: "gc-report__options", children: [
+          /* @__PURE__ */ jsx("legend", { id: `${id}-title`, className: "gc-report__title", children: t("reportTitle") }),
+          FLAG_TYPES.map((flag) => /* @__PURE__ */ jsxs("label", { className: "gc-report__option", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                name: `${id}-type`,
+                value: flag,
+                checked: type === flag,
+                onChange: () => setType(flag)
+              }
+            ),
+            t(`report.${flag}`)
+          ] }, flag))
+        ] }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            className: "gc-report__message",
+            value: message,
+            placeholder: messageLabel,
+            "aria-label": messageLabel,
+            required: needsMessage,
+            rows: 2,
+            onChange: (event) => setMessage(event.target.value)
+          }
+        ),
+        error && /* @__PURE__ */ jsx("p", { className: "gc-report__error", role: "alert", children: error }),
+        /* @__PURE__ */ jsxs("div", { className: "gc-report__buttons", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: cx("gc-button", elements.button), onClick: onClose, children: t("cancel") }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "submit",
+              className: cx("gc-button", "gc-button--primary", elements.button, elements.primaryButton),
+              disabled: submitting || needsMessage && !message.trim(),
+              children: t("report")
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function DeleteConfirm({ onClose }) {
+  const root = useRootContext("Comments.Item");
+  const { comment, setNotice } = useItemContext("Comments.Item");
+  const { t, thread, elements } = root;
+  const [deleting, setDeleting] = useState(false);
+  const id = useId();
+  const cancelRef = useRef(null);
+  useEffect(() => cancelRef.current?.focus(), []);
+  const confirm = async () => {
+    if (!thread || !root.writable || !comment.can.delete) {
+      return;
+    }
+    setDeleting(true);
+    try {
+      await thread.remove(comment.id);
+    } catch (failure) {
+      setNotice({ text: actionError(failure, t), error: true });
+      root.reportError("delete", failure);
+    }
+    onClose();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alertdialog",
+      "aria-modal": "false",
+      "aria-labelledby": id,
+      className: cx("gc-confirm", elements.dialog),
+      onKeyDown: (event) => {
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          onClose();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("p", { id, className: "gc-confirm__text", children: t("deleteConfirm") }),
+        /* @__PURE__ */ jsxs("div", { className: "gc-confirm__buttons", children: [
+          /* @__PURE__ */ jsx("button", { ref: cancelRef, type: "button", className: cx("gc-button", elements.button), onClick: onClose, children: t("cancel") }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cx("gc-button", "gc-button--danger", elements.button),
+              disabled: deleting,
+              onClick: () => void confirm(),
+              children: t("delete")
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function actionError(error, t) {
+  const failure = toCommentsError(error);
+  if (failure.type === "rate_limit" && failure.waitSeconds) {
+    return t("rateLimited", { count: failure.waitSeconds });
+  }
+  if (failure.type === "invalid_key" || failure.type === "not_logged_in") {
+    return t("sessionExpired");
+  }
+  if (failure.type === "unreachable" || failure.type === "unknown" || failure.errors.length === 0) {
+    return t("genericError");
+  }
+  return failure.errors[0];
+}
+function DevPanel({ className }) {
+  const { client, openError, snapshot, configError, debug, commenter } = useRootContext("Comments.DevPanel");
+  if (!debug && !isLocalPage()) {
+    return null;
+  }
+  const error = openError ?? (snapshot?.status === "error" ? snapshot.error : null) ?? configError ?? null;
+  const origin = typeof window === "undefined" ? "" : window.location.origin;
+  if (!error) {
+    if (!debug || !snapshot) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs("details", { className: cx("gc-devpanel", "gc-devpanel--ok", className), children: [
+      /* @__PURE__ */ jsxs("summary", { className: "gc-devpanel__title", children: [
+        PACKAGE_NAME,
+        " diagnostics"
+      ] }),
+      /* @__PURE__ */ jsxs("dl", { className: "gc-devpanel__details", children: [
+        /* @__PURE__ */ jsx("dt", { children: "Forum" }),
+        /* @__PURE__ */ jsx("dd", { children: client.forum }),
+        /* @__PURE__ */ jsx("dt", { children: "Thread" }),
+        /* @__PURE__ */ jsxs("dd", { children: [
+          snapshot.thread.id,
+          " ",
+          snapshot.virtual ? "(not created yet)" : ""
+        ] }),
+        /* @__PURE__ */ jsx("dt", { children: "Key" }),
+        /* @__PURE__ */ jsx("dd", { children: snapshot.thread.key }),
+        /* @__PURE__ */ jsx("dt", { children: "Updates" }),
+        /* @__PURE__ */ jsx("dd", { children: snapshot.connection }),
+        /* @__PURE__ */ jsx("dt", { children: "Reader" }),
+        /* @__PURE__ */ jsxs("dd", { children: [
+          commenter.status,
+          commenter.degraded ? " (degraded)" : ""
+        ] })
+      ] })
+    ] });
+  }
+  const { summary, causes } = diagnose(error, client.forum, origin);
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cx("gc-devpanel", className),
+      "aria-label": `${PACKAGE_NAME} setup diagnostics`,
+      children: [
+        /* @__PURE__ */ jsxs("p", { className: "gc-devpanel__title", children: [
+          PACKAGE_NAME,
+          " could not load comments"
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "gc-devpanel__summary", children: summary }),
+        causes.length > 0 && /* @__PURE__ */ jsx("ol", { className: "gc-devpanel__causes", children: causes.map((cause) => /* @__PURE__ */ jsxs("li", { children: [
+          cause.text,
+          cause.link && /* @__PURE__ */ jsxs(Fragment, { children: [
+            " ",
+            /* @__PURE__ */ jsx("a", { href: cause.link.href, target: "_blank", rel: "noopener noreferrer", children: cause.link.label })
+          ] }),
+          cause.code && /* @__PURE__ */ jsx("pre", { className: "gc-devpanel__code", children: /* @__PURE__ */ jsx("code", { children: cause.code }) })
+        ] }, cause.text)) }),
+        /* @__PURE__ */ jsxs("dl", { className: "gc-devpanel__details", children: [
+          /* @__PURE__ */ jsx("dt", { children: "Forum" }),
+          /* @__PURE__ */ jsx("dd", { children: client.forum }),
+          /* @__PURE__ */ jsx("dt", { children: "Page origin" }),
+          /* @__PURE__ */ jsx("dd", { children: origin }),
+          /* @__PURE__ */ jsx("dt", { children: "Error" }),
+          /* @__PURE__ */ jsxs("dd", { children: [
+            /* @__PURE__ */ jsx("code", { children: error.type }),
+            " (status ",
+            error.status,
+            "): ",
+            error.message
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "gc-devpanel__note", children: "Shown on localhost or with debug. Readers see a short \u201CComments are unavailable\u201D notice." })
+      ]
+    }
+  );
+}
+function diagnose(error, forum, origin) {
+  const host = origin ? new URL(origin).host : "this site's host";
+  const embedding = {
+    href: `${forum}/admin/customize/embedding`,
+    label: "Open Admin \u2192 Customize \u2192 Embedding"
+  };
+  const setting = (name) => ({
+    href: `${forum}/admin/site_settings/category/all_results?filter=${name}`,
+    label: `Open ${name}`
+  });
+  const originNotAllowed = {
+    text: `This page's origin (${origin || "unknown"}) is not allowed: add ${host} as an embedding host, or add the origin to discourse_comments_allowed_origins.`,
+    link: embedding
+  };
+  const pluginDisabled = {
+    text: "The discourse-comments plugin is not installed or is disabled (discourse_comments_enabled).",
+    link: setting("discourse_comments_enabled")
+  };
+  switch (error.type) {
+    case "unreachable":
+      return {
+        summary: `The browser got no usable response from ${forum}; CORS hides the reason, so check these in order.`,
+        causes: [
+          originNotAllowed,
+          {
+            text: "The forum is behind HTTP basic auth, which rejects CORS preflight (OPTIONS) requests. Let OPTIONS through without credentials and pass the credentials with the provider's headers prop, e.g. in nginx:",
+            code: [
+              "location / {",
+              "  limit_except OPTIONS {",
+              '    auth_basic "Restricted";',
+              "    auth_basic_user_file /etc/nginx/.htpasswd;",
+              "  }",
+              "}"
+            ].join("\n")
+          },
+          pluginDisabled,
+          {
+            text: "The forum URL is wrong or the forum is offline.",
+            link: { href: forum, label: "Open the forum" }
+          }
+        ]
+      };
+    case "not_found":
+      return { summary: "The comments API answered 404.", causes: [pluginDisabled] };
+    case "page_not_allowed":
+      return {
+        summary: `${forum} does not accept comments for this page.`,
+        causes: [
+          {
+            text: `Add ${host} as an embedding host (check its allowed paths), or add this origin to discourse_comments_allowed_origins.`,
+            link: embedding
+          }
+        ]
+      };
+    case "no_category":
+      return {
+        summary: "The forum has no category for new comment threads.",
+        causes: [
+          { text: `Pick a category for ${host} under Embedding.`, link: embedding },
+          {
+            text: "Or set discourse_comments_default_category (and discourse_comments_default_author).",
+            link: setting("discourse_comments_default_category")
+          }
+        ]
+      };
+    case "invalid_url":
+      return {
+        summary: "The forum rejected the page URL.",
+        causes: [
+          {
+            text: 'Pass an absolute http(s) url prop, or add a <link rel="canonical"> to the page.'
+          }
+        ]
+      };
+    case "thread_conflict":
+      return {
+        summary: "The identifier and the URL already belong to different threads.",
+        causes: [
+          { text: "Pass the identifier this URL was first used with, or only one of the two." }
+        ]
+      };
+    case "invalid_access":
+      return {
+        summary: "The forum refused access to this thread.",
+        causes: [
+          {
+            text: "The thread's category may not be visible to this reader; check the category's security settings."
+          }
+        ]
+      };
+    default:
+      return { summary: error.message, causes: [] };
+  }
+}
+function Header({ children, className }) {
+  const { elements } = useRootContext("Comments.Header");
+  return /* @__PURE__ */ jsx("header", { className: cx("gc-header", elements.header, className), children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Count, {}),
+    /* @__PURE__ */ jsx(Sort, {})
+  ] }) });
+}
+function Count({ as: Tag = "h2", render, className }) {
+  const { t, snapshot, elements } = useRootContext("Comments.Count");
+  const count = snapshot?.thread.count;
+  return /* @__PURE__ */ jsx(Tag, { className: cx("gc-header__count", elements.count, className), children: count === void 0 ? t("comments") : render ? render(count) : t("commentCount", { count }) });
+}
+function Sort({ className }) {
+  const { t, thread, snapshot, elements, reportError } = useRootContext("Comments.Sort");
+  const id = useId();
+  if (!thread || !snapshot || snapshot.thread.sorts.length < 2) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cx("gc-sort", elements.sort, className), children: [
+    /* @__PURE__ */ jsx("label", { className: "gc-sort__label", htmlFor: id, children: t("sortBy") }),
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        id,
+        className: "gc-sort__select",
+        value: snapshot.sort,
+        disabled: snapshot.status === "loading",
+        onChange: (event) => void thread.setSort(event.target.value).catch(
+          (error) => reportError("load", error)
+        ),
+        children: snapshot.thread.sorts.map((sort) => /* @__PURE__ */ jsx("option", { value: sort, children: t(`sort.${sort}`) }, sort))
+      }
+    )
+  ] });
+}
+var defaultRender = (comment, depth) => /* @__PURE__ */ jsx(Item, { comment, depth });
+var ListContext = createContext(defaultRender);
+function List({ children, className }) {
+  const root = useRootContext("Comments.List");
+  const render = children ?? defaultRender;
+  const { snapshot, openError, t, elements, focusView } = root;
+  if (openError || snapshot?.status === "error") {
+    return /* @__PURE__ */ jsxs("div", { className: cx("gc-notice", "gc-notice--error", elements.notice), role: "alert", children: [
+      /* @__PURE__ */ jsx("p", { className: "gc-notice__text", children: t("unavailable") }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: cx("gc-button", elements.button), onClick: root.retry, children: t("retry") })
+    ] });
+  }
+  if (!snapshot || snapshot.status === "loading" && snapshot.comments.length === 0) {
+    return /* @__PURE__ */ jsx("p", { className: "gc-list__status", role: "status", children: t("loading") });
+  }
+  const listClass = cx("gc-list", elements.list, className);
+  if (focusView) {
+    const tree = snapshot.comments;
+    const target = findComment(tree, focusView.id)?.node;
+    return /* @__PURE__ */ jsx(ListContext.Provider, { value: render, children: /* @__PURE__ */ jsxs("div", { className: "gc-focus", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cx("gc-button", "gc-button--link", "gc-focus__back", elements.button),
+          onClick: root.closeFocusView,
+          children: [
+            /* @__PURE__ */ jsx(BackIcon, {}),
+            t("backToAll")
+          ]
+        }
+      ),
+      focusView.truncated && /* @__PURE__ */ jsx("p", { className: "gc-focus__truncated", children: t("ancestorsTruncated") }),
+      focusView.ancestors.length > 0 && /* @__PURE__ */ jsx("ol", { className: "gc-context", children: focusView.ancestors.map((ancestor) => /* @__PURE__ */ jsx(
+        Item,
+        {
+          comment: findComment(tree, ancestor.id)?.node ?? ancestor,
+          showReplies: false
+        },
+        ancestor.id
+      )) }),
+      target && /* @__PURE__ */ jsx("ol", { className: listClass, children: render(target, 0) })
+    ] }) });
+  }
+  if (snapshot.comments.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ListContext.Provider, { value: render, children: /* @__PURE__ */ jsx("ol", { className: listClass, children: snapshot.comments.map((comment) => /* @__PURE__ */ jsx(Fragment$1, { children: render(comment, 0) }, comment.id)) }) });
+}
+function Item({ comment, depth = 0, children, showReplies = true, className }) {
+  const root = useRootContext("Comments.Item");
+  const { t, elements } = root;
+  const [mode, setModeState] = useState("view");
+  const [notice, setNotice] = useState(null);
+  const articleRef = useRef(null);
+  const triggerRef = useRef(null);
+  const restoreFocus = useRef(false);
+  const setMode = useCallback((next, trigger) => {
+    if (next === "view") {
+      restoreFocus.current = true;
+    } else {
+      triggerRef.current = trigger ?? null;
+    }
+    setModeState(next);
+  }, []);
+  useEffect(() => {
+    if (mode !== "view" || !restoreFocus.current) {
+      return;
+    }
+    restoreFocus.current = false;
+    const trigger = triggerRef.current;
+    (trigger?.isConnected ? trigger : articleRef.current)?.focus();
+  }, [mode]);
+  const signedIn = root.commenter.status === "signed-in";
+  const writable = root.writable && signedIn;
+  const allowed = {
+    view: true,
+    reply: root.canCompose,
+    edit: writable && comment.can.edit,
+    report: writable && comment.can.flag,
+    delete: writable && comment.can.delete
+  };
+  const modeAllowed = allowed[mode];
+  const activeMode = modeAllowed ? mode : "view";
+  useEffect(() => {
+    if (!modeAllowed) {
+      setMode("view");
+    }
+  }, [modeAllowed, setMode]);
+  useEffect(() => {
+    if (!notice || notice.error) {
+      return;
+    }
+    const timer = setTimeout(() => setNotice(null), 3e3);
+    return () => clearTimeout(timer);
+  }, [notice]);
+  const value = useMemo(
+    () => ({ comment, depth, mode: activeMode, setMode, notice, setNotice }),
+    [comment, depth, activeMode, setMode, notice]
+  );
+  const name = comment.author ? comment.author.name || comment.author.username : null;
+  const label = comment.deleted || !name ? t("deletedComment") : t("commentBy", { name });
+  const close = () => setMode("view");
+  return /* @__PURE__ */ jsx(ItemContext.Provider, { value, children: /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: cx(
+        "gc-comment",
+        depth > 0 && "gc-comment--reply",
+        comment.pinned && "gc-comment--pinned",
+        comment.deleted && "gc-comment--deleted",
+        root.highlightId === comment.id && "gc-comment--highlighted",
+        elements.comment,
+        className
+      ),
+      "data-depth": depth,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "article",
+          {
+            ref: articleRef,
+            id: `gc-${comment.id}`,
+            className: "gc-comment__card",
+            tabIndex: -1,
+            "aria-label": label,
+            children: [
+              children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Avatar, {}),
+                /* @__PURE__ */ jsxs("div", { className: "gc-comment__main", children: [
+                  /* @__PURE__ */ jsx(Meta, {}),
+                  /* @__PURE__ */ jsx(Body, {}),
+                  /* @__PURE__ */ jsx(Actions, {})
+                ] })
+              ] }),
+              activeMode === "report" && /* @__PURE__ */ jsx(ReportForm, { onClose: close }),
+              activeMode === "delete" && /* @__PURE__ */ jsx(DeleteConfirm, { onClose: close }),
+              notice && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cx("gc-comment__notice", notice.error && "gc-comment__notice--error"),
+                  role: notice.error ? "alert" : "status",
+                  children: notice.text
+                }
+              )
+            ]
+          }
+        ),
+        activeMode === "reply" && /* @__PURE__ */ jsx(Composer, { replyTo: comment, autoFocus: true, onDone: close }),
+        showReplies && /* @__PURE__ */ jsx(Replies, {})
+      ]
+    }
+  ) });
+}
+function Replies() {
+  const root = useRootContext();
+  const { comment, depth } = useItemContext("Comments.Item");
+  const render = useContext(ListContext);
+  const { t, thread, snapshot, maxDepth, elements } = root;
+  if (!thread || !snapshot) {
+    return null;
+  }
+  const children = comment.children;
+  const linkButton = cx("gc-button", "gc-button--link", elements.button);
+  if (depth >= maxDepth) {
+    if (comment.direct_reply_count === 0 && children.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cx(linkButton, "gc-comment__continue"),
+        onClick: () => void root.continueThread(comment.id),
+        children: t("continueThread")
+      }
+    );
+  }
+  const branch = snapshot.branches[comment.id];
+  const remaining = comment.direct_reply_count - children.length;
+  const hasMore = (branch?.hasMore ?? true) && remaining > 0;
+  const name = comment.author?.name || comment.author?.username || "";
+  const loadReplies = async () => {
+    const before = new Set(children.map((child) => child.id));
+    try {
+      await thread.loadReplies(comment.id);
+    } catch (error) {
+      root.reportError("loadReplies", error);
+      return;
+    }
+    const loaded3 = findComment(thread.snapshot().comments, comment.id)?.node.children ?? [];
+    const first = loaded3.find((child) => !before.has(child.id));
+    if (first) {
+      root.focusComment(first.id);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children.length > 0 && /* @__PURE__ */ jsx("ol", { className: "gc-replies", "aria-label": t("repliesTo", { name }), children: children.map((child) => /* @__PURE__ */ jsx(Fragment$1, { children: render(child, depth + 1) }, child.id)) }),
+    hasMore && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cx(linkButton, "gc-comment__more"),
+        disabled: branch?.loading,
+        "aria-busy": branch?.loading || void 0,
+        onClick: () => void loadReplies(),
+        children: children.length === 0 ? t("loadReplies", { count: remaining }) : t("loadMoreReplies", { count: remaining })
+      }
+    )
+  ] });
+}
+function SignIn({ children, className }) {
+  const root = useRootContext("Comments.SignIn");
+  const { t, commenter, elements, client, config, snapshot, signInMode } = root;
+  const titleId = useId();
+  if (children) {
+    return /* @__PURE__ */ jsx(Fragment, { children: children(commenter) });
+  }
+  if (signInMode === "manual") {
+    return null;
+  }
+  const button = cx("gc-button", elements.button);
+  const classes = cx("gc-signin", elements.signIn, className);
+  if (commenter.status === "signed-in" && commenter.user) {
+    const { user } = commenter;
+    return /* @__PURE__ */ jsxs("div", { className: cx(classes, "gc-signin--signed-in"), children: [
+      /* @__PURE__ */ jsx(UserAvatar, { user, className: "gc-avatar--small" }),
+      /* @__PURE__ */ jsx("span", { className: "gc-signin__user", children: t("signedInAs", { username: `@${user.username}` }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cx(button, "gc-button--link"),
+          onClick: () => void commenter.signOut(),
+          children: t("signOut")
+        }
+      )
+    ] });
+  }
+  const closed = snapshot?.thread.closed ?? false;
+  if (signInMode !== "inline" || !root.writable || closed || !snapshot) {
+    return null;
+  }
+  const forumName = config?.forum.name ?? new URL(client.forum).host;
+  const signingIn = commenter.status === "signing-in";
+  const failure = commenter.error && commenter.error.type !== "cancelled" ? commenter.error.type === "invalid_key" ? t("sessionExpired") : commenter.error.errors[0] ?? t("genericError") : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(classes, signingIn && "gc-signin--signing-in"),
+      role: "group",
+      "aria-labelledby": titleId,
+      children: [
+        /* @__PURE__ */ jsx("p", { id: titleId, className: "gc-signin__title", children: t("joinConversation") }),
+        /* @__PURE__ */ jsxs("div", { "aria-live": "polite", children: [
+          signingIn ? /* @__PURE__ */ jsx("p", { className: "gc-signin__body", children: t("signingIn") }) : /* @__PURE__ */ jsx("p", { className: "gc-signin__body", children: t("joinConversationBody", { forum: forumName }) }),
+          failure && !signingIn && /* @__PURE__ */ jsx("p", { className: "gc-signin__error", role: "alert", children: failure })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "gc-signin__actions", children: signingIn ? /* @__PURE__ */ jsx("button", { type: "button", className: button, onClick: () => commenter.cancelSignIn(), children: t("signInCancel") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cx(button, "gc-button--primary", elements.primaryButton),
+              onClick: () => void commenter.signIn().catch(() => {
+              }),
+              children: t("signIn")
+            }
+          ),
+          commenter.providers.map((provider) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: button,
+              onClick: () => void commenter.signIn({ provider: provider.name }).catch(() => {
+              }),
+              children: t("signInWith", { provider: provider.title })
+            },
+            provider.name
+          ))
+        ] }) })
+      ]
+    }
+  );
+}
+function Notice({ className }) {
+  const { t, snapshot, readOnly, commenter, commentingDenied, elements } = useRootContext("Comments.Notice");
+  if (!snapshot || snapshot.status === "error") {
+    return null;
+  }
+  let text = null;
+  let modifier = "";
+  if (readOnly || commenter.degraded) {
+    text = t("readOnly");
+    modifier = "gc-notice--read-only";
+  } else if (snapshot.thread.closed) {
+    text = t("closed");
+    modifier = "gc-notice--closed";
+  } else if (commentingDenied) {
+    text = t("cannotComment");
+    modifier = "gc-notice--denied";
+  }
+  if (!text) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("p", { className: cx("gc-notice", modifier, elements.notice, className), role: "status", children: text });
+}
+function NewComments({ className }) {
+  const root = useRootContext("Comments.NewComments");
+  const { t, thread, snapshot, elements, focusView } = root;
+  const count = focusView ? 0 : snapshot?.pendingNew ?? 0;
+  const show = () => {
+    if (!thread) {
+      return;
+    }
+    const before = new Set(thread.snapshot().comments.map((comment) => comment.id));
+    thread.showPending();
+    const first = thread.snapshot().comments.find((comment) => !before.has(comment.id));
+    if (first) {
+      root.focusComment(first.id);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "gc-pill-region", "aria-live": "polite", children: count > 0 && /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cx("gc-button", "gc-pill", elements.button, elements.pill, className),
+      onClick: show,
+      children: t("newComments", { count })
+    }
+  ) });
+}
+function AwaitingApproval({ className }) {
+  const { t, snapshot, elements } = useRootContext("Comments.AwaitingApproval");
+  const pending = snapshot?.awaitingApproval ?? [];
+  return /* @__PURE__ */ jsx("div", { className: "gc-pending-region", "aria-live": "polite", children: pending.map((entry, index) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cx("gc-notice", "gc-notice--pending", elements.notice, className),
+      children: entry.message || t("pending")
+    },
+    entry.reviewable_id ?? `pending-${index}`
+  )) });
+}
+function LoadMore({ className }) {
+  const root = useRootContext("Comments.LoadMore");
+  const { t, thread, snapshot, elements, focusView } = root;
+  if (!thread || !snapshot?.hasMore || focusView || snapshot.status !== "ready") {
+    return null;
+  }
+  const loadMore = async () => {
+    const before = new Set(thread.snapshot().comments.map((comment) => comment.id));
+    try {
+      await thread.loadMore();
+    } catch (error) {
+      root.reportError("loadMore", error);
+      return;
+    }
+    const first = thread.snapshot().comments.find((comment) => !before.has(comment.id));
+    if (first && !thread.snapshot().hasMore) {
+      root.focusComment(first.id);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cx("gc-button", "gc-load-more", elements.button, elements.loadMore, className),
+      disabled: snapshot.loadingMore,
+      "aria-busy": snapshot.loadingMore || void 0,
+      onClick: () => void loadMore(),
+      children: snapshot.loadingMore ? t("loading") : t("loadMore")
+    }
+  );
+}
+function CommentsSection(props) {
+  return /* @__PURE__ */ jsxs(Root, { ...props, children: [
+    /* @__PURE__ */ jsx(Header, {}),
+    /* @__PURE__ */ jsx(DevPanel, {}),
+    /* @__PURE__ */ jsx(Notice, {}),
+    /* @__PURE__ */ jsx(SignIn, {}),
+    /* @__PURE__ */ jsx(Composer, {}),
+    /* @__PURE__ */ jsx(AwaitingApproval, {}),
+    /* @__PURE__ */ jsx(NewComments, {}),
+    /* @__PURE__ */ jsx(List, {}),
+    /* @__PURE__ */ jsx(LoadMore, {})
+  ] });
+}
+var Comments = Object.assign(CommentsSection, {
+  Root,
+  Header,
+  Count,
+  Sort,
+  SignIn,
+  Composer,
+  List,
+  Item,
+  Avatar,
+  Meta,
+  Body,
+  Actions,
+  LoadMore,
+  NewComments,
+  AwaitingApproval,
+  Notice,
+  DevPanel
+});
+function useCommentCount(ref, options = {}) {
+  const client = useOptionalCommentsContext(options.forum)?.client;
+  const key = ref ? safeEncode(ref) : null;
+  const latestRef = useRef(ref);
+  latestRef.current = ref;
+  const [state, setState] = useState({
+    key: null,
+    count: null,
+    error: null
+  });
+  useEffect(() => {
+    const current = latestRef.current;
+    if (key === null || !current || !client) {
+      return;
+    }
+    let active = true;
+    client.count(current).then(
+      (count) => active && setState({ key, count, error: null }),
+      (error) => active && setState({ key, count: null, error: toCommentsError(error) })
+    );
+    return () => {
+      active = false;
+    };
+  }, [client, key]);
+  return state.key === key ? { count: state.count, error: state.error } : { count: null, error: null };
+}
+function safeEncode(ref) {
+  try {
+    return encodeRef(ref);
+  } catch {
+    return null;
+  }
+}
+function CommentCount({
+  identifier,
+  host,
+  url,
+  topicId,
+  forum,
+  render,
+  className
+}) {
+  const context = useOptionalCommentsContext(forum);
+  const pageUrl = url ?? defaultPageUrl();
+  const ref = topicId !== void 0 ? { topicId } : identifier !== void 0 ? { identifier, host } : pageUrl ? { url: pageUrl } : null;
+  const { count } = useCommentCount(ref, { forum });
+  if (!context) {
+    return null;
+  }
+  const { t } = context;
+  return /* @__PURE__ */ jsx("span", { className: cx("gc-count", className), "aria-busy": count === null || void 0, children: count === null ? null : render ? render(count) : t("commentCount", { count }) });
+}
+
+export { CommentCount, Comments, DiscourseComments, useClient, useCommentCount, useCommenter, useForumTheme, useThread };
+//# sourceMappingURL=react.js.map
+//# sourceMappingURL=react.js.map