g-comments 0.1.0 → 0.2.0

package/dist/react.d.cts

@@ -1,9 +1,12 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { g as Comment, R as Pending, o as Commenter, r as CommentsError, P as Messages, C as CreateClientOptions, a as CommentsClient, e as AuthStatus, c as AuthProvider, Z as SignInOptions, Q as OpenThreadOptions, V as PostResult, a5 as ThreadHandle, a7 as ThreadSnapshot, b as CountRef } from './messages-BlBkT6Kr.cjs';
+import { g as Comment, V as Pending, o as Commenter, r as CommentsError, T as Messages, C as CreateClientOptions, a as CommentsClient, e as AuthStatus, c as AuthProvider, a1 as SignInOptions, U as OpenThreadOptions, Z as PostResult, a9 as ThreadHandle, ab as ThreadSnapshot, b as CountRef, N as ForumTheme } from './messages-C9bMljl3.cjs';
 
-/** `auto` follows `prefers-color-scheme`; `inherit` leaves the colours to the page. */
-type Theme = "auto" | "light" | "dark" | "inherit";
+/**
+ * `auto` follows `prefers-color-scheme`, `inherit` leaves the colours to the
+ * page, and `forum` applies the forum's own palettes, fonts and theme CSS.
+ */
+type Theme = "auto" | "light" | "dark" | "inherit" | "forum";
 /** Design tokens; each is set as `--gc-<kebab-case name>` on the widget root. */
 type AppearanceVariable = "font" | "fg" | "fgMuted" | "bg" | "bgSubtle" | "border" | "accent" | "accentFg" | "danger" | "radius" | "shadow" | "space" | "avatarSize";
 /** Elements that accept extra class names through `appearance.elements`. */
@@ -16,7 +19,7 @@ interface Appearance {
 }
 
 /** What the widget was doing when an `error` event fired. */
-type CommentsAction = "open" | "load" | "loadMore" | "loadReplies" | "context" | "post" | "edit" | "delete" | "like" | "flag" | "pin" | "upload" | "preview" | "signIn";
+type CommentsAction = "open" | "load" | "loadMore" | "loadReplies" | "context" | "post" | "edit" | "delete" | "like" | "flag" | "pin" | "upload" | "preview" | "signIn" | "theme";
 /** Delivered to `<DiscourseComments onEvent>`. */
 type CommentsEvent = {
     type: "comment.posted";
@@ -317,4 +320,16 @@ declare function useCommentCount(ref: CountRef | null, options?: {
     forum?: string;
 }): CommentCountState;
 
-export { type Appearance, type AppearanceElement, type AppearanceVariable, CommentCount, type CommentCountProps, type CommentCountState, type CommenterState, Comments, type CommentsAction, type CommentsEvent, type CommentsProps, type ComposerProps, type CountProps, DiscourseComments, type DiscourseCommentsProps, type HeaderProps, type ItemProps, type ListProps, type RenderComment, type RootProps, type SignInMode, type SignInProps, type Theme, type UseThreadOptions, type UseThreadResult, useClient, useCommentCount, useCommenter, useThread };
+interface ForumThemeState {
+    /** `null` until loaded (or when `enabled` is false). */
+    theme: ForumTheme | null;
+    error: CommentsError | null;
+}
+/**
+ * The forum's palettes, fonts and theme stylesheets (`GET /comments/theme`),
+ * for sites that style their own UI after the forum. `<Comments theme="forum">`
+ * applies the same data to the widget.
+ */
+declare function useForumTheme(): ForumThemeState;
+
+export { type Appearance, type AppearanceElement, type AppearanceVariable, CommentCount, type CommentCountProps, type CommentCountState, type CommenterState, Comments, type CommentsAction, type CommentsEvent, type CommentsProps, type ComposerProps, type CountProps, DiscourseComments, type DiscourseCommentsProps, type ForumThemeState, type HeaderProps, type ItemProps, type ListProps, type RenderComment, type RootProps, type SignInMode, type SignInProps, type Theme, type UseThreadOptions, type UseThreadResult, useClient, useCommentCount, useCommenter, useForumTheme, useThread };

package/dist/react.d.ts

@@ -1,9 +1,12 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { g as Comment, R as Pending, o as Commenter, r as CommentsError, P as Messages, C as CreateClientOptions, a as CommentsClient, e as AuthStatus, c as AuthProvider, Z as SignInOptions, Q as OpenThreadOptions, V as PostResult, a5 as ThreadHandle, a7 as ThreadSnapshot, b as CountRef } from './messages-BlBkT6Kr.js';
+import { g as Comment, V as Pending, o as Commenter, r as CommentsError, T as Messages, C as CreateClientOptions, a as CommentsClient, e as AuthStatus, c as AuthProvider, a1 as SignInOptions, U as OpenThreadOptions, Z as PostResult, a9 as ThreadHandle, ab as ThreadSnapshot, b as CountRef, N as ForumTheme } from './messages-C9bMljl3.js';
 
-/** `auto` follows `prefers-color-scheme`; `inherit` leaves the colours to the page. */
-type Theme = "auto" | "light" | "dark" | "inherit";
+/**
+ * `auto` follows `prefers-color-scheme`, `inherit` leaves the colours to the
+ * page, and `forum` applies the forum's own palettes, fonts and theme CSS.
+ */
+type Theme = "auto" | "light" | "dark" | "inherit" | "forum";
 /** Design tokens; each is set as `--gc-<kebab-case name>` on the widget root. */
 type AppearanceVariable = "font" | "fg" | "fgMuted" | "bg" | "bgSubtle" | "border" | "accent" | "accentFg" | "danger" | "radius" | "shadow" | "space" | "avatarSize";
 /** Elements that accept extra class names through `appearance.elements`. */
@@ -16,7 +19,7 @@ interface Appearance {
 }
 
 /** What the widget was doing when an `error` event fired. */
-type CommentsAction = "open" | "load" | "loadMore" | "loadReplies" | "context" | "post" | "edit" | "delete" | "like" | "flag" | "pin" | "upload" | "preview" | "signIn";
+type CommentsAction = "open" | "load" | "loadMore" | "loadReplies" | "context" | "post" | "edit" | "delete" | "like" | "flag" | "pin" | "upload" | "preview" | "signIn" | "theme";
 /** Delivered to `<DiscourseComments onEvent>`. */
 type CommentsEvent = {
     type: "comment.posted";
@@ -317,4 +320,16 @@ declare function useCommentCount(ref: CountRef | null, options?: {
     forum?: string;
 }): CommentCountState;
 
-export { type Appearance, type AppearanceElement, type AppearanceVariable, CommentCount, type CommentCountProps, type CommentCountState, type CommenterState, Comments, type CommentsAction, type CommentsEvent, type CommentsProps, type ComposerProps, type CountProps, DiscourseComments, type DiscourseCommentsProps, type HeaderProps, type ItemProps, type ListProps, type RenderComment, type RootProps, type SignInMode, type SignInProps, type Theme, type UseThreadOptions, type UseThreadResult, useClient, useCommentCount, useCommenter, useThread };
+interface ForumThemeState {
+    /** `null` until loaded (or when `enabled` is false). */
+    theme: ForumTheme | null;
+    error: CommentsError | null;
+}
+/**
+ * The forum's palettes, fonts and theme stylesheets (`GET /comments/theme`),
+ * for sites that style their own UI after the forum. `<Comments theme="forum">`
+ * applies the same data to the widget.
+ */
+declare function useForumTheme(): ForumThemeState;
+
+export { type Appearance, type AppearanceElement, type AppearanceVariable, CommentCount, type CommentCountProps, type CommentCountState, type CommenterState, Comments, type CommentsAction, type CommentsEvent, type CommentsProps, type ComposerProps, type CountProps, DiscourseComments, type DiscourseCommentsProps, type ForumThemeState, type HeaderProps, type ItemProps, type ListProps, type RenderComment, type RootProps, type SignInMode, type SignInProps, type Theme, type UseThreadOptions, type UseThreadResult, useClient, useCommentCount, useCommenter, useForumTheme, useThread };

package/dist/react.js

@@ -1,5 +1,5 @@
 "use client";
-import { createTranslator, PACKAGE_NAME, currentUrlWithoutHash, findComment, createComposerTimer, normalizeForum, resolveLocale, clientRegistry, STORAGE_PREFIX, isCommentsError, CommentsError, encodeRef, defaultPageUrl } from './chunk-6E3M3PQN.js';
+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';
 
@@ -282,6 +282,146 @@ function ImageIcon() {
 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 };
@@ -351,6 +491,49 @@ function useCommenterFor(client, config) {
     [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);
@@ -484,6 +667,19 @@ function ConfiguredRoot(props) {
   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) {
@@ -1455,8 +1651,8 @@ function UserAvatar({
       }
     );
   }
-  const initial2 = (user?.name || user?.username || "").charAt(0).toUpperCase();
-  return /* @__PURE__ */ jsx("span", { className: cx("gc-avatar", "gc-avatar--placeholder", className), "aria-hidden": "true", children: initial2 });
+  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");
@@ -2274,8 +2470,8 @@ function Replies() {
       root.reportError("loadReplies", error);
       return;
     }
-    const loaded2 = findComment(thread.snapshot().comments, comment.id)?.node.children ?? [];
-    const first = loaded2.find((child) => !before.has(child.id));
+    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);
     }
@@ -2544,6 +2740,6 @@ function CommentCount({
   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, useThread };
+export { CommentCount, Comments, DiscourseComments, useClient, useCommentCount, useCommenter, useForumTheme, useThread };
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map