g-comments 0.1.0 → 0.2.0

package/dist/react.cjs

@@ -1,16 +1,16 @@
 "use client";
 'use strict';
 
-var chunkX6RAR374_cjs = require('./chunk-X6RAR374.cjs');
+var chunkIBNNENCZ_cjs = require('./chunk-IBNNENCZ.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
 function toCommentsError(error) {
-  if (chunkX6RAR374_cjs.isCommentsError(error)) {
+  if (chunkIBNNENCZ_cjs.isCommentsError(error)) {
     return error;
   }
-  return new chunkX6RAR374_cjs.CommentsError("unknown", error instanceof Error ? error.message : String(error), {
+  return new chunkIBNNENCZ_cjs.CommentsError("unknown", error instanceof Error ? error.message : String(error), {
     cause: error
   });
 }
@@ -87,12 +87,12 @@ function formatAbsolute(iso, locale) {
 
 // src/react/context.ts
 var CommentsContext = react.createContext(null);
-var defaultTranslator = chunkX6RAR374_cjs.createTranslator();
+var defaultTranslator = chunkIBNNENCZ_cjs.createTranslator();
 function useCommentsContext(forum) {
   const value = useOptionalCommentsContext(forum);
   if (!value) {
     throw new Error(
-      `${chunkX6RAR374_cjs.PACKAGE_NAME}: render this inside <DiscourseComments forum="\u2026"> or pass a \`forum\` prop`
+      `${chunkIBNNENCZ_cjs.PACKAGE_NAME}: render this inside <DiscourseComments forum="\u2026"> or pass a \`forum\` prop`
     );
   }
   return value;
@@ -100,13 +100,13 @@ function useCommentsContext(forum) {
 function useOptionalCommentsContext(forum) {
   const context = react.useContext(CommentsContext);
   const standalone = react.useMemo(() => {
-    if (forum === void 0 || context && chunkX6RAR374_cjs.normalizeForum(forum).base === context.client.forum) {
+    if (forum === void 0 || context && chunkIBNNENCZ_cjs.normalizeForum(forum).base === context.client.forum) {
       return null;
     }
     return {
-      client: chunkX6RAR374_cjs.clientRegistry.acquire({ forum }),
+      client: chunkIBNNENCZ_cjs.clientRegistry.acquire({ forum }),
       t: context?.t ?? defaultTranslator,
-      locale: context?.locale ?? chunkX6RAR374_cjs.resolveLocale(void 0),
+      locale: context?.locale ?? chunkIBNNENCZ_cjs.resolveLocale(void 0),
       messages: context?.messages,
       theme: context?.theme ?? "auto",
       appearance: context?.appearance,
@@ -119,7 +119,7 @@ function useOptionalCommentsContext(forum) {
 function useClient() {
   const context = react.useContext(CommentsContext);
   if (!context) {
-    throw new Error(`${chunkX6RAR374_cjs.PACKAGE_NAME}: useClient() needs a <DiscourseComments> provider`);
+    throw new Error(`${chunkIBNNENCZ_cjs.PACKAGE_NAME}: useClient() needs a <DiscourseComments> provider`);
   }
   return context.client;
 }
@@ -138,11 +138,11 @@ function DiscourseComments(props) {
     debug
   };
   const client = react.useMemo(
-    () => explicitClient ?? chunkX6RAR374_cjs.clientRegistry.acquire(creation),
+    () => explicitClient ?? chunkIBNNENCZ_cjs.clientRegistry.acquire(creation),
     [explicitClient, forum]
   );
   const messagesKey = messages ? JSON.stringify(messages) : "";
-  const t = react.useMemo(() => chunkX6RAR374_cjs.createTranslator(locale, messages), [locale, messagesKey]);
+  const t = react.useMemo(() => chunkIBNNENCZ_cjs.createTranslator(locale, messages), [locale, messagesKey]);
   const onEventRef = react.useRef(onEvent);
   react.useEffect(() => {
     onEventRef.current = onEvent;
@@ -151,7 +151,7 @@ function DiscourseComments(props) {
     () => ({
       client,
       t,
-      locale: chunkX6RAR374_cjs.resolveLocale(locale),
+      locale: chunkIBNNENCZ_cjs.resolveLocale(locale),
       messages,
       theme,
       appearance,
@@ -284,6 +284,146 @@ function ImageIcon() {
 function BackIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.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 };
@@ -353,6 +493,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] = react.useState(() => initial2(client));
+  let state = stored;
+  if (stored.client !== client) {
+    state = initial2(client);
+    setState(state);
+  }
+  react.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);
@@ -362,7 +545,7 @@ function useThreadFor(client, { identifier, url, title, sort }, onOpenError) {
   const [opened, setOpened] = react.useState(
     { thread: null, error: null }
   );
-  const pageKey = url === void 0 ? chunkX6RAR374_cjs.currentUrlWithoutHash() ?? "" : "";
+  const pageKey = url === void 0 ? chunkIBNNENCZ_cjs.currentUrlWithoutHash() ?? "" : "";
   const latest = react.useRef({ title, sort, onOpenError });
   latest.current = { title, sort, onOpenError };
   const requestedSort = react.useRef(sort);
@@ -428,14 +611,14 @@ var RootContext = react.createContext(null);
 function useRootContext(component = "This component") {
   const value = react.useContext(RootContext);
   if (!value) {
-    throw new Error(`${chunkX6RAR374_cjs.PACKAGE_NAME}: ${component} must be rendered inside <Comments.Root>`);
+    throw new Error(`${chunkIBNNENCZ_cjs.PACKAGE_NAME}: ${component} must be rendered inside <Comments.Root>`);
   }
   return value;
 }
 function Root(props) {
   const context = useOptionalCommentsContext(props.forum);
   if (!context) {
-    return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cx("gc-root", "gc-root--unconfigured", props.className), "data-gc-unconfigured": "", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "gc-notice", children: `${chunkX6RAR374_cjs.PACKAGE_NAME}: render <Comments> inside <DiscourseComments forum="\u2026"> or pass a forum prop.` }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cx("gc-root", "gc-root--unconfigured", props.className), "data-gc-unconfigured": "", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "gc-notice", children: `${chunkIBNNENCZ_cjs.PACKAGE_NAME}: render <Comments> inside <DiscourseComments forum="\u2026"> or pass a forum prop.` }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(ConfiguredRoot, { ...props });
 }
@@ -464,10 +647,10 @@ function ConfiguredRoot(props) {
   const { client, emit } = context;
   const rootRef = react.useRef(null);
   const t = react.useMemo(
-    () => localeProp ? chunkX6RAR374_cjs.createTranslator(localeProp, context.messages) : context.t,
+    () => localeProp ? chunkIBNNENCZ_cjs.createTranslator(localeProp, context.messages) : context.t,
     [localeProp, context.messages, context.t]
   );
-  const locale = localeProp ? chunkX6RAR374_cjs.resolveLocale(localeProp) : context.locale;
+  const locale = localeProp ? chunkIBNNENCZ_cjs.resolveLocale(localeProp) : context.locale;
   const theme = themeProp ?? context.theme;
   const { variables, elements } = react.useMemo(
     () => mergeAppearance(context.appearance, appearance),
@@ -486,6 +669,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");
+  react.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;
+  react.useEffect(() => {
+    if (themeError) {
+      reportError("theme", themeError);
+    }
+  }, [themeError, reportError]);
   const retry = react.useCallback(() => {
     retryThread();
     if (configError) {
@@ -583,7 +779,7 @@ function ConfiguredRoot(props) {
     const id = requestedHighlight;
     const request = ++viewRequest.current;
     void (async () => {
-      let location = chunkX6RAR374_cjs.findComment(thread.snapshot().comments, id);
+      let location = chunkIBNNENCZ_cjs.findComment(thread.snapshot().comments, id);
       if (!location) {
         try {
           await thread.context(id);
@@ -593,7 +789,7 @@ function ConfiguredRoot(props) {
           }
           return;
         }
-        location = chunkX6RAR374_cjs.findComment(thread.snapshot().comments, id);
+        location = chunkIBNNENCZ_cjs.findComment(thread.snapshot().comments, id);
       }
       if (!location || request !== viewRequest.current) {
         return;
@@ -601,7 +797,7 @@ function ConfiguredRoot(props) {
       if (location.depth > maxDepth) {
         const cut = location.depth - maxDepth;
         const tree = thread.snapshot().comments;
-        const ancestors = location.path.slice(0, cut).map((ancestorId) => chunkX6RAR374_cjs.findComment(tree, ancestorId)?.node).filter((node) => node !== void 0);
+        const ancestors = location.path.slice(0, cut).map((ancestorId) => chunkIBNNENCZ_cjs.findComment(tree, ancestorId)?.node).filter((node) => node !== void 0);
         setFocusView({ id: location.path[cut], ancestors, truncated: false });
       } else {
         setFocusView(null);
@@ -628,7 +824,7 @@ function ConfiguredRoot(props) {
   }, [client, signInMode]);
   const threadKey = snapshot?.thread.key;
   const draftKey = react.useCallback(
-    (scope) => threadKey === void 0 ? null : `${chunkX6RAR374_cjs.STORAGE_PREFIX}:${client.forum}:draft:${threadKey}:${scope}`,
+    (scope) => threadKey === void 0 ? null : `${chunkIBNNENCZ_cjs.STORAGE_PREFIX}:${client.forum}:draft:${threadKey}:${scope}`,
     [client.forum, threadKey]
   );
   const value = {
@@ -872,7 +1068,7 @@ function ComposerForm({
   const textareaRef = react.useRef(null);
   const fileRef = react.useRef(null);
   const pendingSelection = react.useRef(null);
-  const [timer] = react.useState(chunkX6RAR374_cjs.createComposerTimer);
+  const [timer] = react.useState(chunkIBNNENCZ_cjs.createComposerTimer);
   const draftKey = editing ? null : root.draftKey(replyTo ? `reply:${replyTo.id}` : "root");
   const [value, setValueState] = react.useState(() => draftKey ? readDraft(draftKey) : "");
   const valueRef = react.useRef(value);
@@ -1432,7 +1628,7 @@ var ItemContext = react.createContext(null);
 function useItemContext(component) {
   const value = react.useContext(ItemContext);
   if (!value) {
-    throw new Error(`${chunkX6RAR374_cjs.PACKAGE_NAME}: ${component} must be rendered inside <Comments.Item>`);
+    throw new Error(`${chunkIBNNENCZ_cjs.PACKAGE_NAME}: ${component} must be rendered inside <Comments.Item>`);
   }
   return value;
 }
@@ -1457,8 +1653,8 @@ function UserAvatar({
       }
     );
   }
-  const initial2 = (user?.name || user?.username || "").charAt(0).toUpperCase();
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: cx("gc-avatar", "gc-avatar--placeholder", className), "aria-hidden": "true", children: initial3 });
 }
 function Meta({ className }) {
   const { comment } = useItemContext("Comments.Meta");
@@ -1553,7 +1749,7 @@ function Actions({ className }) {
       key: "copy",
       label: t("copyLink"),
       onSelect: () => {
-        const href = `${chunkX6RAR374_cjs.currentUrlWithoutHash() ?? ""}#gc-${comment.id}`;
+        const href = `${chunkIBNNENCZ_cjs.currentUrlWithoutHash() ?? ""}#gc-${comment.id}`;
         const clipboard = typeof navigator === "undefined" ? void 0 : navigator.clipboard;
         if (!clipboard) {
           window.location.hash = `gc-${comment.id}`;
@@ -1895,7 +2091,7 @@ function DevPanel({ className }) {
     }
     return /* @__PURE__ */ jsxRuntime.jsxs("details", { className: cx("gc-devpanel", "gc-devpanel--ok", className), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "gc-devpanel__title", children: [
-        chunkX6RAR374_cjs.PACKAGE_NAME,
+        chunkIBNNENCZ_cjs.PACKAGE_NAME,
         " diagnostics"
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("dl", { className: "gc-devpanel__details", children: [
@@ -1924,10 +2120,10 @@ function DevPanel({ className }) {
     "aside",
     {
       className: cx("gc-devpanel", className),
-      "aria-label": `${chunkX6RAR374_cjs.PACKAGE_NAME} setup diagnostics`,
+      "aria-label": `${chunkIBNNENCZ_cjs.PACKAGE_NAME} setup diagnostics`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "gc-devpanel__title", children: [
-          chunkX6RAR374_cjs.PACKAGE_NAME,
+          chunkIBNNENCZ_cjs.PACKAGE_NAME,
           " could not load comments"
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "gc-devpanel__summary", children: summary }),
@@ -2105,7 +2301,7 @@ function List({ children, className }) {
   const listClass = cx("gc-list", elements.list, className);
   if (focusView) {
     const tree = snapshot.comments;
-    const target = chunkX6RAR374_cjs.findComment(tree, focusView.id)?.node;
+    const target = chunkIBNNENCZ_cjs.findComment(tree, focusView.id)?.node;
     return /* @__PURE__ */ jsxRuntime.jsx(ListContext.Provider, { value: render, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gc-focus", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
@@ -2123,7 +2319,7 @@ function List({ children, className }) {
       focusView.ancestors.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "gc-context", children: focusView.ancestors.map((ancestor) => /* @__PURE__ */ jsxRuntime.jsx(
         Item,
         {
-          comment: chunkX6RAR374_cjs.findComment(tree, ancestor.id)?.node ?? ancestor,
+          comment: chunkIBNNENCZ_cjs.findComment(tree, ancestor.id)?.node ?? ancestor,
           showReplies: false
         },
         ancestor.id
@@ -2276,8 +2472,8 @@ function Replies() {
       root.reportError("loadReplies", error);
       return;
     }
-    const loaded2 = chunkX6RAR374_cjs.findComment(thread.snapshot().comments, comment.id)?.node.children ?? [];
-    const first = loaded2.find((child) => !before.has(child.id));
+    const loaded3 = chunkIBNNENCZ_cjs.findComment(thread.snapshot().comments, comment.id)?.node.children ?? [];
+    const first = loaded3.find((child) => !before.has(child.id));
     if (first) {
       root.focusComment(first.id);
     }
@@ -2521,7 +2717,7 @@ function useCommentCount(ref, options = {}) {
 }
 function safeEncode(ref) {
   try {
-    return chunkX6RAR374_cjs.encodeRef(ref);
+    return chunkIBNNENCZ_cjs.encodeRef(ref);
   } catch {
     return null;
   }
@@ -2536,7 +2732,7 @@ function CommentCount({
   className
 }) {
   const context = useOptionalCommentsContext(forum);
-  const pageUrl = url ?? chunkX6RAR374_cjs.defaultPageUrl();
+  const pageUrl = url ?? chunkIBNNENCZ_cjs.defaultPageUrl();
   const ref = topicId !== void 0 ? { topicId } : identifier !== void 0 ? { identifier, host } : pageUrl ? { url: pageUrl } : null;
   const { count } = useCommentCount(ref, { forum });
   if (!context) {
@@ -2552,6 +2748,7 @@ exports.DiscourseComments = DiscourseComments;
 exports.useClient = useClient;
 exports.useCommentCount = useCommentCount;
 exports.useCommenter = useCommenter;
+exports.useForumTheme = useForumTheme;
 exports.useThread = useThread;
 //# sourceMappingURL=react.cjs.map
 //# sourceMappingURL=react.cjs.map