@scalemule/discussions 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ScaleMule Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,34 @@
+# @scalemule/discussions
+
+Threaded comments for any ScaleMule object: blog posts, news articles, photos, videos, listings, or pages.
+
+```bash
+npm install @scalemule/discussions
+```
+
+Talks to `scalemule-discussions` at `/v1/discussions`. Do not put an internal service token in the browser. Customer apps use `SCALEMULE_API_KEY` (or a same-origin BFF that holds that key).
+
+```tsx
+import { DiscussionsClient } from '@scalemule/discussions';
+import { DiscussionThread, useDiscussion } from '@scalemule/discussions/react';
+
+const client = new DiscussionsClient({
+  apiKey: process.env.NEXT_PUBLIC_SCALEMULE_API_KEY,
+});
+
+function Comments({ articleId }: { articleId: string }) {
+  const { comments, addComment } = useDiscussion(client, 'blog_post', articleId);
+  return (
+    <DiscussionThread
+      comments={comments}
+      onAddComment={(body, parentId, guest) =>
+        addComment(body, { parentCommentId: parentId, ...guest })
+      }
+    />
+  );
+}
+```
+
+Same-origin proxy (Napsite news sites): set `apiBaseUrl` to `''` and `pathPrefix` to `/api/discussions` so the browser never sees the API key.
+
+Target types: `blog_post`, `photo`, `video`, `audio`, `listing`, `page`, `social_post`.

package/dist/chunk-BMUVJJXD.js

@@ -0,0 +1,83 @@
+// src/client.ts
+var DEFAULT_BASE = "https://api.scalemule.com";
+var DEFAULT_PREFIX = "/v1/discussions";
+var DiscussionsClient = class {
+  constructor(config = {}) {
+    this.apiKey = config.apiKey;
+    this.baseUrl = (config.apiBaseUrl ?? DEFAULT_BASE).replace(/\/$/, "");
+    this.prefix = (config.pathPrefix ?? DEFAULT_PREFIX).replace(/\/$/, "") || "";
+    this.getToken = config.getToken ?? (config.sessionToken ? async () => config.sessionToken ?? null : void 0);
+  }
+  threadPath(targetType, targetId) {
+    return `${this.prefix}/threads/${encodeURIComponent(targetType)}/${encodeURIComponent(targetId)}/comments`;
+  }
+  async listComments(targetType, targetId, options) {
+    const params = new URLSearchParams();
+    if (options?.page) params.set("page", String(options.page));
+    if (options?.per_page) params.set("per_page", String(options.per_page));
+    if (options?.since) params.set("since", options.since);
+    const qs = params.toString();
+    return this.request(
+      "GET",
+      `${this.threadPath(targetType, targetId)}${qs ? `?${qs}` : ""}`
+    );
+  }
+  async addComment(targetType, targetId, options) {
+    return this.request("POST", this.threadPath(targetType, targetId), {
+      content: options.body,
+      body: options.body,
+      parent_comment_id: options.parent_comment_id,
+      author_name: options.author_name,
+      author_email: options.author_email
+    });
+  }
+  async editComment(commentId, body) {
+    return this.request(
+      "PATCH",
+      `${this.prefix}/comments/${encodeURIComponent(commentId)}`,
+      { content: body, body }
+    );
+  }
+  async deleteComment(commentId) {
+    return this.request("DELETE", `${this.prefix}/comments/${encodeURIComponent(commentId)}`);
+  }
+  async request(method, path, body) {
+    const headers = { "Content-Type": "application/json" };
+    if (this.apiKey) headers["x-api-key"] = this.apiKey;
+    if (this.getToken) {
+      const token = await this.getToken();
+      if (token) headers.Authorization = `Bearer ${token}`;
+    }
+    try {
+      const response = await fetch(`${this.baseUrl}${path}`, {
+        method,
+        headers,
+        body: body === void 0 ? void 0 : JSON.stringify(body),
+        credentials: !this.baseUrl || this.baseUrl.startsWith("/") ? "same-origin" : "omit"
+      });
+      if (response.status === 204) return { data: null, error: null };
+      const json = await response.json().catch(() => null);
+      if (!response.ok) {
+        const error = {
+          code: json?.error?.code ?? "unknown",
+          message: json?.error?.message ?? json?.error ?? json?.message ?? response.statusText,
+          status: response.status
+        };
+        return { data: null, error };
+      }
+      const data = json?.data !== void 0 ? json.data : json;
+      return { data, error: null };
+    } catch (err) {
+      return {
+        data: null,
+        error: {
+          code: "network_error",
+          message: err instanceof Error ? err.message : "Network error",
+          status: 0
+        }
+      };
+    }
+  }
+};
+
+export { DiscussionsClient };

package/dist/index.cjs

@@ -0,0 +1,85 @@
+'use strict';
+
+// src/client.ts
+var DEFAULT_BASE = "https://api.scalemule.com";
+var DEFAULT_PREFIX = "/v1/discussions";
+var DiscussionsClient = class {
+  constructor(config = {}) {
+    this.apiKey = config.apiKey;
+    this.baseUrl = (config.apiBaseUrl ?? DEFAULT_BASE).replace(/\/$/, "");
+    this.prefix = (config.pathPrefix ?? DEFAULT_PREFIX).replace(/\/$/, "") || "";
+    this.getToken = config.getToken ?? (config.sessionToken ? async () => config.sessionToken ?? null : void 0);
+  }
+  threadPath(targetType, targetId) {
+    return `${this.prefix}/threads/${encodeURIComponent(targetType)}/${encodeURIComponent(targetId)}/comments`;
+  }
+  async listComments(targetType, targetId, options) {
+    const params = new URLSearchParams();
+    if (options?.page) params.set("page", String(options.page));
+    if (options?.per_page) params.set("per_page", String(options.per_page));
+    if (options?.since) params.set("since", options.since);
+    const qs = params.toString();
+    return this.request(
+      "GET",
+      `${this.threadPath(targetType, targetId)}${qs ? `?${qs}` : ""}`
+    );
+  }
+  async addComment(targetType, targetId, options) {
+    return this.request("POST", this.threadPath(targetType, targetId), {
+      content: options.body,
+      body: options.body,
+      parent_comment_id: options.parent_comment_id,
+      author_name: options.author_name,
+      author_email: options.author_email
+    });
+  }
+  async editComment(commentId, body) {
+    return this.request(
+      "PATCH",
+      `${this.prefix}/comments/${encodeURIComponent(commentId)}`,
+      { content: body, body }
+    );
+  }
+  async deleteComment(commentId) {
+    return this.request("DELETE", `${this.prefix}/comments/${encodeURIComponent(commentId)}`);
+  }
+  async request(method, path, body) {
+    const headers = { "Content-Type": "application/json" };
+    if (this.apiKey) headers["x-api-key"] = this.apiKey;
+    if (this.getToken) {
+      const token = await this.getToken();
+      if (token) headers.Authorization = `Bearer ${token}`;
+    }
+    try {
+      const response = await fetch(`${this.baseUrl}${path}`, {
+        method,
+        headers,
+        body: body === void 0 ? void 0 : JSON.stringify(body),
+        credentials: !this.baseUrl || this.baseUrl.startsWith("/") ? "same-origin" : "omit"
+      });
+      if (response.status === 204) return { data: null, error: null };
+      const json = await response.json().catch(() => null);
+      if (!response.ok) {
+        const error = {
+          code: json?.error?.code ?? "unknown",
+          message: json?.error?.message ?? json?.error ?? json?.message ?? response.statusText,
+          status: response.status
+        };
+        return { data: null, error };
+      }
+      const data = json?.data !== void 0 ? json.data : json;
+      return { data, error: null };
+    } catch (err) {
+      return {
+        data: null,
+        error: {
+          code: "network_error",
+          message: err instanceof Error ? err.message : "Network error",
+          status: 0
+        }
+      };
+    }
+  }
+};
+
+exports.DiscussionsClient = DiscussionsClient;

package/dist/index.d.cts

@@ -0,0 +1,64 @@
+type TargetType = 'blog_post' | 'photo' | 'video' | 'audio' | 'listing' | 'page' | 'social_post';
+interface DiscussionsConfig {
+    apiKey?: string;
+    /** Origin of the API, no trailing slash. Default https://api.scalemule.com */
+    apiBaseUrl?: string;
+    /** Path before /threads/.... Default /v1/discussions */
+    pathPrefix?: string;
+    getToken?: () => Promise<string | null>;
+    sessionToken?: string;
+    userId?: string;
+}
+interface ApiError {
+    code: string;
+    message: string;
+    status?: number;
+}
+interface ApiResponse<T> {
+    data: T | null;
+    error: ApiError | null;
+}
+type CommentStatus = 'pending' | 'approved' | 'spam' | 'deleted';
+interface DiscussionComment {
+    id: string;
+    thread_id?: string;
+    target_type?: string;
+    target_id?: string;
+    author_user_id?: string | null;
+    author_name?: string | null;
+    author_email?: string | null;
+    parent_comment_id?: string | null;
+    body: string;
+    status: CommentStatus | string;
+    depth?: number;
+    created_at: string;
+    updated_at: string;
+    replies?: DiscussionComment[];
+}
+interface AddCommentOptions {
+    body: string;
+    parent_comment_id?: string;
+    author_name?: string;
+    author_email?: string;
+}
+interface ListCommentsOptions {
+    page?: number;
+    per_page?: number;
+    since?: string;
+}
+
+declare class DiscussionsClient {
+    private readonly apiKey?;
+    private readonly baseUrl;
+    private readonly prefix;
+    private readonly getToken?;
+    constructor(config?: DiscussionsConfig);
+    threadPath(targetType: TargetType | string, targetId: string): string;
+    listComments(targetType: TargetType | string, targetId: string, options?: ListCommentsOptions): Promise<ApiResponse<DiscussionComment[]>>;
+    addComment(targetType: TargetType | string, targetId: string, options: AddCommentOptions): Promise<ApiResponse<DiscussionComment>>;
+    editComment(commentId: string, body: string): Promise<ApiResponse<DiscussionComment>>;
+    deleteComment(commentId: string): Promise<ApiResponse<void>>;
+    private request;
+}
+
+export { type AddCommentOptions, type ApiError, type ApiResponse, type CommentStatus, type DiscussionComment, DiscussionsClient, type DiscussionsConfig, type ListCommentsOptions, type TargetType };

package/dist/index.d.ts

@@ -0,0 +1,64 @@
+type TargetType = 'blog_post' | 'photo' | 'video' | 'audio' | 'listing' | 'page' | 'social_post';
+interface DiscussionsConfig {
+    apiKey?: string;
+    /** Origin of the API, no trailing slash. Default https://api.scalemule.com */
+    apiBaseUrl?: string;
+    /** Path before /threads/.... Default /v1/discussions */
+    pathPrefix?: string;
+    getToken?: () => Promise<string | null>;
+    sessionToken?: string;
+    userId?: string;
+}
+interface ApiError {
+    code: string;
+    message: string;
+    status?: number;
+}
+interface ApiResponse<T> {
+    data: T | null;
+    error: ApiError | null;
+}
+type CommentStatus = 'pending' | 'approved' | 'spam' | 'deleted';
+interface DiscussionComment {
+    id: string;
+    thread_id?: string;
+    target_type?: string;
+    target_id?: string;
+    author_user_id?: string | null;
+    author_name?: string | null;
+    author_email?: string | null;
+    parent_comment_id?: string | null;
+    body: string;
+    status: CommentStatus | string;
+    depth?: number;
+    created_at: string;
+    updated_at: string;
+    replies?: DiscussionComment[];
+}
+interface AddCommentOptions {
+    body: string;
+    parent_comment_id?: string;
+    author_name?: string;
+    author_email?: string;
+}
+interface ListCommentsOptions {
+    page?: number;
+    per_page?: number;
+    since?: string;
+}
+
+declare class DiscussionsClient {
+    private readonly apiKey?;
+    private readonly baseUrl;
+    private readonly prefix;
+    private readonly getToken?;
+    constructor(config?: DiscussionsConfig);
+    threadPath(targetType: TargetType | string, targetId: string): string;
+    listComments(targetType: TargetType | string, targetId: string, options?: ListCommentsOptions): Promise<ApiResponse<DiscussionComment[]>>;
+    addComment(targetType: TargetType | string, targetId: string, options: AddCommentOptions): Promise<ApiResponse<DiscussionComment>>;
+    editComment(commentId: string, body: string): Promise<ApiResponse<DiscussionComment>>;
+    deleteComment(commentId: string): Promise<ApiResponse<void>>;
+    private request;
+}
+
+export { type AddCommentOptions, type ApiError, type ApiResponse, type CommentStatus, type DiscussionComment, DiscussionsClient, type DiscussionsConfig, type ListCommentsOptions, type TargetType };

package/dist/index.js

@@ -0,0 +1 @@
+export { DiscussionsClient } from './chunk-BMUVJJXD.js';

package/dist/react.cjs

@@ -0,0 +1,359 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/react.tsx
+
+// src/client.ts
+var DEFAULT_BASE = "https://api.scalemule.com";
+var DEFAULT_PREFIX = "/v1/discussions";
+var DiscussionsClient = class {
+  constructor(config = {}) {
+    this.apiKey = config.apiKey;
+    this.baseUrl = (config.apiBaseUrl ?? DEFAULT_BASE).replace(/\/$/, "");
+    this.prefix = (config.pathPrefix ?? DEFAULT_PREFIX).replace(/\/$/, "") || "";
+    this.getToken = config.getToken ?? (config.sessionToken ? async () => config.sessionToken ?? null : void 0);
+  }
+  threadPath(targetType, targetId) {
+    return `${this.prefix}/threads/${encodeURIComponent(targetType)}/${encodeURIComponent(targetId)}/comments`;
+  }
+  async listComments(targetType, targetId, options) {
+    const params = new URLSearchParams();
+    if (options?.page) params.set("page", String(options.page));
+    if (options?.per_page) params.set("per_page", String(options.per_page));
+    if (options?.since) params.set("since", options.since);
+    const qs = params.toString();
+    return this.request(
+      "GET",
+      `${this.threadPath(targetType, targetId)}${qs ? `?${qs}` : ""}`
+    );
+  }
+  async addComment(targetType, targetId, options) {
+    return this.request("POST", this.threadPath(targetType, targetId), {
+      content: options.body,
+      body: options.body,
+      parent_comment_id: options.parent_comment_id,
+      author_name: options.author_name,
+      author_email: options.author_email
+    });
+  }
+  async editComment(commentId, body) {
+    return this.request(
+      "PATCH",
+      `${this.prefix}/comments/${encodeURIComponent(commentId)}`,
+      { content: body, body }
+    );
+  }
+  async deleteComment(commentId) {
+    return this.request("DELETE", `${this.prefix}/comments/${encodeURIComponent(commentId)}`);
+  }
+  async request(method, path, body) {
+    const headers = { "Content-Type": "application/json" };
+    if (this.apiKey) headers["x-api-key"] = this.apiKey;
+    if (this.getToken) {
+      const token = await this.getToken();
+      if (token) headers.Authorization = `Bearer ${token}`;
+    }
+    try {
+      const response = await fetch(`${this.baseUrl}${path}`, {
+        method,
+        headers,
+        body: body === void 0 ? void 0 : JSON.stringify(body),
+        credentials: !this.baseUrl || this.baseUrl.startsWith("/") ? "same-origin" : "omit"
+      });
+      if (response.status === 204) return { data: null, error: null };
+      const json = await response.json().catch(() => null);
+      if (!response.ok) {
+        const error = {
+          code: json?.error?.code ?? "unknown",
+          message: json?.error?.message ?? json?.error ?? json?.message ?? response.statusText,
+          status: response.status
+        };
+        return { data: null, error };
+      }
+      const data = json?.data !== void 0 ? json.data : json;
+      return { data, error: null };
+    } catch (err) {
+      return {
+        data: null,
+        error: {
+          code: "network_error",
+          message: err instanceof Error ? err.message : "Network error",
+          status: 0
+        }
+      };
+    }
+  }
+};
+
+// src/react-components/theme.ts
+function themeToStyle(theme) {
+  return {
+    "--sm-d-primary": theme?.primary ?? "#bb171d",
+    "--sm-d-primary-text": theme?.primaryText ?? "#ffffff",
+    "--sm-d-surface": theme?.surface ?? "#ffffff",
+    "--sm-d-border": theme?.borderColor ?? "#d7dcd7",
+    "--sm-d-text": theme?.textColor ?? "#171917",
+    "--sm-d-muted": theme?.mutedText ?? "#5c635c",
+    "--sm-d-heading": theme?.headingColor ?? "#171917",
+    "--sm-d-radius": theme?.borderRadius ?? "0",
+    "--sm-d-font": theme?.fontFamily ?? "Arial, sans-serif",
+    "--sm-d-heading-font": theme?.headingFontFamily ?? "Georgia, serif"
+  };
+}
+var MAX_INDENT = 4;
+function CommentItem({ comment, depth = 0, onReply, theme }) {
+  const indent = Math.min(depth, MAX_INDENT);
+  const replies = comment.replies ?? [];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        ...themeToStyle(theme),
+        marginLeft: indent * 24,
+        paddingLeft: depth > 0 ? 16 : 0,
+        borderLeft: depth > 0 ? "2px solid var(--sm-d-border, #d7dcd7)" : "none",
+        marginTop: 16,
+        fontFamily: "var(--sm-d-font, Arial, sans-serif)"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 700, fontSize: 14, color: "var(--sm-d-text)" }, children: comment.author_name ?? "A reader" }),
+          /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: comment.created_at, style: { fontSize: 12, color: "var(--sm-d-muted)" }, children: new Date(comment.created_at).toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" }) }),
+          comment.status === "pending" && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 11, padding: "1px 6px", background: "#fef3c7", color: "#92400e" }, children: "Pending review" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 16, lineHeight: 1.6, color: "var(--sm-d-text)", whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: comment.body }),
+        onReply && comment.status !== "pending" && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onReply(comment.id),
+            style: { border: "none", background: "transparent", color: "var(--sm-d-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer", padding: "8px 0", fontFamily: "inherit" },
+            children: "Reply"
+          }
+        ),
+        replies.map((child) => /* @__PURE__ */ jsxRuntime.jsx(CommentItem, { comment: child, depth: depth + 1, onReply, theme }, child.id))
+      ]
+    }
+  );
+}
+function CommentInput({
+  onSubmit,
+  showGuestFields = false,
+  replyingTo,
+  onCancelReply,
+  theme
+}) {
+  const [content, setContent] = react.useState("");
+  const [guestName, setGuestName] = react.useState("");
+  const [guestEmail, setGuestEmail] = react.useState("");
+  const [isSubmitting, setIsSubmitting] = react.useState(false);
+  const handleSubmit = react.useCallback(async () => {
+    const trimmed = content.trim();
+    if (!trimmed || isSubmitting) return;
+    setIsSubmitting(true);
+    try {
+      await onSubmit(
+        trimmed,
+        showGuestFields ? guestName.trim() || void 0 : void 0,
+        showGuestFields ? guestEmail.trim() || void 0 : void 0
+      );
+      setContent("");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [content, guestName, guestEmail, showGuestFields, isSubmitting, onSubmit]);
+  const inputStyle = {
+    width: "100%",
+    fontSize: 16,
+    border: "1px solid var(--sm-d-border, #d7dcd7)",
+    borderRadius: "var(--sm-d-radius, 0)",
+    padding: "10px 12px",
+    fontFamily: "var(--sm-d-font, Arial, sans-serif)",
+    color: "var(--sm-d-text, #171917)",
+    background: "var(--sm-d-surface, #ffffff)",
+    boxSizing: "border-box"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...themeToStyle(theme), fontFamily: "var(--sm-d-font, Arial, sans-serif)" }, children: [
+    replyingTo && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, fontSize: 13, color: "var(--sm-d-muted)", marginBottom: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Replying" }),
+      onCancelReply && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onCancelReply, style: { border: "none", background: "transparent", color: "var(--sm-d-primary)", cursor: "pointer", padding: 0 }, children: "Cancel" })
+    ] }),
+    showGuestFields && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, marginBottom: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", placeholder: "Name", value: guestName, onChange: (e) => setGuestName(e.target.value), style: { ...inputStyle, flex: 1 }, "aria-label": "Your name" }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "email", placeholder: "Email (optional)", value: guestEmail, onChange: (e) => setGuestEmail(e.target.value), style: { ...inputStyle, flex: 1 }, "aria-label": "Your email" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, alignItems: "flex-end" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          value: content,
+          onChange: (e) => setContent(e.target.value),
+          placeholder: "Write a comment...",
+          rows: 3,
+          style: { ...inputStyle, flex: 1, resize: "vertical", minHeight: 80 },
+          "aria-label": "Comment"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => void handleSubmit(),
+          disabled: !content.trim() || isSubmitting || showGuestFields && !guestName.trim(),
+          style: {
+            border: "1px solid var(--sm-d-primary, #bb171d)",
+            padding: "10px 20px",
+            minHeight: 44,
+            background: "var(--sm-d-primary, #bb171d)",
+            color: "var(--sm-d-primary-text, #ffffff)",
+            fontSize: 14,
+            fontWeight: 700,
+            cursor: "pointer",
+            opacity: !content.trim() || isSubmitting ? 0.5 : 1,
+            fontFamily: "inherit"
+          },
+          children: isSubmitting ? "Posting..." : "Post"
+        }
+      )
+    ] })
+  ] });
+}
+function buildTree(comments) {
+  const byId = /* @__PURE__ */ new Map();
+  const roots = [];
+  for (const comment of comments) {
+    byId.set(comment.id, { ...comment, replies: [] });
+  }
+  for (const comment of comments) {
+    const node = byId.get(comment.id);
+    if (comment.parent_comment_id && byId.has(comment.parent_comment_id)) {
+      byId.get(comment.parent_comment_id).replies.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+  return roots;
+}
+function DiscussionThread({
+  comments,
+  onAddComment,
+  currentUserId,
+  allowGuestComments = true,
+  theme,
+  title = "Comments",
+  error
+}) {
+  const [replyingTo, setReplyingTo] = react.useState();
+  const tree = buildTree(comments);
+  const isGuest = !currentUserId;
+  const handleAdd = react.useCallback(
+    async (content, guestName, guestEmail) => {
+      if (!onAddComment) return;
+      await onAddComment(content, replyingTo, { authorName: guestName, authorEmail: guestEmail });
+      setReplyingTo(void 0);
+    },
+    [onAddComment, replyingTo]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      "aria-label": title,
+      style: { ...themeToStyle(theme), fontFamily: "var(--sm-d-font, Arial, sans-serif)", marginTop: 36 },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "h2",
+          {
+            style: {
+              margin: "0 0 16px",
+              fontSize: 28,
+              fontWeight: 700,
+              fontFamily: "var(--sm-d-heading-font, Georgia, serif)",
+              color: "var(--sm-d-heading)"
+            },
+            children: [
+              title,
+              " (",
+              comments.length,
+              ")"
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--sm-d-primary)", fontSize: 14 }, children: error }),
+        tree.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--sm-d-muted)", fontSize: 15, padding: "8px 0 16px" }, children: "No comments yet. Be the first to share a thought on this story." }) : tree.map((comment) => /* @__PURE__ */ jsxRuntime.jsx(
+          CommentItem,
+          {
+            comment,
+            depth: 0,
+            onReply: onAddComment ? setReplyingTo : void 0,
+            theme
+          },
+          comment.id
+        )),
+        onAddComment && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 24 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          CommentInput,
+          {
+            onSubmit: handleAdd,
+            showGuestFields: isGuest && allowGuestComments,
+            replyingTo,
+            onCancelReply: replyingTo ? () => setReplyingTo(void 0) : void 0,
+            theme
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/react.tsx
+function useDiscussion(clientOrConfig, targetType, targetId) {
+  const client = react.useMemo(
+    () => clientOrConfig instanceof DiscussionsClient ? clientOrConfig : new DiscussionsClient(clientOrConfig),
+    [clientOrConfig]
+  );
+  const [comments, setComments] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  react.useEffect(() => {
+    if (!targetId) return;
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+    void client.listComments(targetType, targetId).then((result) => {
+      if (cancelled) return;
+      if (result.data) setComments(result.data);
+      if (result.error) setError(result.error.message);
+      setIsLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, targetType, targetId]);
+  const addComment = react.useCallback(
+    async (body, options) => {
+      if (!targetId) return;
+      const result = await client.addComment(targetType, targetId, {
+        body,
+        parent_comment_id: options?.parentCommentId,
+        author_name: options?.authorName,
+        author_email: options?.authorEmail
+      });
+      if (result.error) {
+        setError(result.error.message);
+        return result;
+      }
+      if (result.data) {
+        setComments((prev) => prev.some((c) => c.id === result.data.id) ? prev : [...prev, result.data]);
+      }
+      return result;
+    },
+    [client, targetType, targetId]
+  );
+  return { comments, isLoading, error, addComment, client };
+}
+
+exports.CommentInput = CommentInput;
+exports.CommentItem = CommentItem;
+exports.DiscussionThread = DiscussionThread;
+exports.useDiscussion = useDiscussion;

package/dist/react.d.cts

@@ -0,0 +1,60 @@
+import { DiscussionComment, DiscussionsClient, DiscussionsConfig, TargetType, ApiResponse } from './index.cjs';
+import React from 'react';
+
+interface DiscussionTheme {
+    primary?: string;
+    primaryText?: string;
+    surface?: string;
+    borderColor?: string;
+    textColor?: string;
+    mutedText?: string;
+    headingColor?: string;
+    fontFamily?: string;
+    headingFontFamily?: string;
+    borderRadius?: string;
+}
+
+interface DiscussionThreadProps {
+    comments: DiscussionComment[];
+    onAddComment?: (content: string, parentId?: string, guest?: {
+        authorName?: string;
+        authorEmail?: string;
+    }) => void | Promise<void>;
+    currentUserId?: string;
+    allowGuestComments?: boolean;
+    theme?: DiscussionTheme;
+    title?: string;
+    error?: string | null;
+}
+declare function DiscussionThread({ comments, onAddComment, currentUserId, allowGuestComments, theme, title, error, }: DiscussionThreadProps): React.JSX.Element;
+
+interface CommentItemProps {
+    comment: DiscussionComment;
+    depth?: number;
+    onReply?: (parentId: string) => void;
+    theme?: DiscussionTheme;
+}
+declare function CommentItem({ comment, depth, onReply, theme }: CommentItemProps): React.JSX.Element;
+
+interface CommentInputProps {
+    onSubmit: (content: string, guestName?: string, guestEmail?: string) => void | Promise<void>;
+    showGuestFields?: boolean;
+    replyingTo?: string;
+    onCancelReply?: () => void;
+    theme?: DiscussionTheme;
+}
+declare function CommentInput({ onSubmit, showGuestFields, replyingTo, onCancelReply, theme, }: CommentInputProps): React.JSX.Element;
+
+declare function useDiscussion(clientOrConfig: DiscussionsClient | DiscussionsConfig, targetType: TargetType | string, targetId?: string): {
+    comments: DiscussionComment[];
+    isLoading: boolean;
+    error: string | null;
+    addComment: (body: string, options?: {
+        parentCommentId?: string;
+        authorName?: string;
+        authorEmail?: string;
+    }) => Promise<ApiResponse<DiscussionComment> | undefined>;
+    client: DiscussionsClient;
+};
+
+export { CommentInput, CommentItem, type DiscussionTheme, DiscussionThread, useDiscussion };

package/dist/react.d.ts

@@ -0,0 +1,60 @@
+import { DiscussionComment, DiscussionsClient, DiscussionsConfig, TargetType, ApiResponse } from './index.js';
+import React from 'react';
+
+interface DiscussionTheme {
+    primary?: string;
+    primaryText?: string;
+    surface?: string;
+    borderColor?: string;
+    textColor?: string;
+    mutedText?: string;
+    headingColor?: string;
+    fontFamily?: string;
+    headingFontFamily?: string;
+    borderRadius?: string;
+}
+
+interface DiscussionThreadProps {
+    comments: DiscussionComment[];
+    onAddComment?: (content: string, parentId?: string, guest?: {
+        authorName?: string;
+        authorEmail?: string;
+    }) => void | Promise<void>;
+    currentUserId?: string;
+    allowGuestComments?: boolean;
+    theme?: DiscussionTheme;
+    title?: string;
+    error?: string | null;
+}
+declare function DiscussionThread({ comments, onAddComment, currentUserId, allowGuestComments, theme, title, error, }: DiscussionThreadProps): React.JSX.Element;
+
+interface CommentItemProps {
+    comment: DiscussionComment;
+    depth?: number;
+    onReply?: (parentId: string) => void;
+    theme?: DiscussionTheme;
+}
+declare function CommentItem({ comment, depth, onReply, theme }: CommentItemProps): React.JSX.Element;
+
+interface CommentInputProps {
+    onSubmit: (content: string, guestName?: string, guestEmail?: string) => void | Promise<void>;
+    showGuestFields?: boolean;
+    replyingTo?: string;
+    onCancelReply?: () => void;
+    theme?: DiscussionTheme;
+}
+declare function CommentInput({ onSubmit, showGuestFields, replyingTo, onCancelReply, theme, }: CommentInputProps): React.JSX.Element;
+
+declare function useDiscussion(clientOrConfig: DiscussionsClient | DiscussionsConfig, targetType: TargetType | string, targetId?: string): {
+    comments: DiscussionComment[];
+    isLoading: boolean;
+    error: string | null;
+    addComment: (body: string, options?: {
+        parentCommentId?: string;
+        authorName?: string;
+        authorEmail?: string;
+    }) => Promise<ApiResponse<DiscussionComment> | undefined>;
+    client: DiscussionsClient;
+};
+
+export { CommentInput, CommentItem, type DiscussionTheme, DiscussionThread, useDiscussion };

package/dist/react.js

@@ -0,0 +1,271 @@
+import { DiscussionsClient } from './chunk-BMUVJJXD.js';
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/react-components/theme.ts
+function themeToStyle(theme) {
+  return {
+    "--sm-d-primary": theme?.primary ?? "#bb171d",
+    "--sm-d-primary-text": theme?.primaryText ?? "#ffffff",
+    "--sm-d-surface": theme?.surface ?? "#ffffff",
+    "--sm-d-border": theme?.borderColor ?? "#d7dcd7",
+    "--sm-d-text": theme?.textColor ?? "#171917",
+    "--sm-d-muted": theme?.mutedText ?? "#5c635c",
+    "--sm-d-heading": theme?.headingColor ?? "#171917",
+    "--sm-d-radius": theme?.borderRadius ?? "0",
+    "--sm-d-font": theme?.fontFamily ?? "Arial, sans-serif",
+    "--sm-d-heading-font": theme?.headingFontFamily ?? "Georgia, serif"
+  };
+}
+var MAX_INDENT = 4;
+function CommentItem({ comment, depth = 0, onReply, theme }) {
+  const indent = Math.min(depth, MAX_INDENT);
+  const replies = comment.replies ?? [];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        ...themeToStyle(theme),
+        marginLeft: indent * 24,
+        paddingLeft: depth > 0 ? 16 : 0,
+        borderLeft: depth > 0 ? "2px solid var(--sm-d-border, #d7dcd7)" : "none",
+        marginTop: 16,
+        fontFamily: "var(--sm-d-font, Arial, sans-serif)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }, children: [
+          /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 14, color: "var(--sm-d-text)" }, children: comment.author_name ?? "A reader" }),
+          /* @__PURE__ */ jsx("time", { dateTime: comment.created_at, style: { fontSize: 12, color: "var(--sm-d-muted)" }, children: new Date(comment.created_at).toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" }) }),
+          comment.status === "pending" && /* @__PURE__ */ jsx("span", { style: { fontSize: 11, padding: "1px 6px", background: "#fef3c7", color: "#92400e" }, children: "Pending review" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 16, lineHeight: 1.6, color: "var(--sm-d-text)", whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: comment.body }),
+        onReply && comment.status !== "pending" && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onReply(comment.id),
+            style: { border: "none", background: "transparent", color: "var(--sm-d-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer", padding: "8px 0", fontFamily: "inherit" },
+            children: "Reply"
+          }
+        ),
+        replies.map((child) => /* @__PURE__ */ jsx(CommentItem, { comment: child, depth: depth + 1, onReply, theme }, child.id))
+      ]
+    }
+  );
+}
+function CommentInput({
+  onSubmit,
+  showGuestFields = false,
+  replyingTo,
+  onCancelReply,
+  theme
+}) {
+  const [content, setContent] = useState("");
+  const [guestName, setGuestName] = useState("");
+  const [guestEmail, setGuestEmail] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const handleSubmit = useCallback(async () => {
+    const trimmed = content.trim();
+    if (!trimmed || isSubmitting) return;
+    setIsSubmitting(true);
+    try {
+      await onSubmit(
+        trimmed,
+        showGuestFields ? guestName.trim() || void 0 : void 0,
+        showGuestFields ? guestEmail.trim() || void 0 : void 0
+      );
+      setContent("");
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [content, guestName, guestEmail, showGuestFields, isSubmitting, onSubmit]);
+  const inputStyle = {
+    width: "100%",
+    fontSize: 16,
+    border: "1px solid var(--sm-d-border, #d7dcd7)",
+    borderRadius: "var(--sm-d-radius, 0)",
+    padding: "10px 12px",
+    fontFamily: "var(--sm-d-font, Arial, sans-serif)",
+    color: "var(--sm-d-text, #171917)",
+    background: "var(--sm-d-surface, #ffffff)",
+    boxSizing: "border-box"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { ...themeToStyle(theme), fontFamily: "var(--sm-d-font, Arial, sans-serif)" }, children: [
+    replyingTo && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, fontSize: 13, color: "var(--sm-d-muted)", marginBottom: 8 }, children: [
+      /* @__PURE__ */ jsx("span", { children: "Replying" }),
+      onCancelReply && /* @__PURE__ */ jsx("button", { type: "button", onClick: onCancelReply, style: { border: "none", background: "transparent", color: "var(--sm-d-primary)", cursor: "pointer", padding: 0 }, children: "Cancel" })
+    ] }),
+    showGuestFields && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginBottom: 8 }, children: [
+      /* @__PURE__ */ jsx("input", { type: "text", placeholder: "Name", value: guestName, onChange: (e) => setGuestName(e.target.value), style: { ...inputStyle, flex: 1 }, "aria-label": "Your name" }),
+      /* @__PURE__ */ jsx("input", { type: "email", placeholder: "Email (optional)", value: guestEmail, onChange: (e) => setGuestEmail(e.target.value), style: { ...inputStyle, flex: 1 }, "aria-label": "Your email" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "flex-end" }, children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: content,
+          onChange: (e) => setContent(e.target.value),
+          placeholder: "Write a comment...",
+          rows: 3,
+          style: { ...inputStyle, flex: 1, resize: "vertical", minHeight: 80 },
+          "aria-label": "Comment"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => void handleSubmit(),
+          disabled: !content.trim() || isSubmitting || showGuestFields && !guestName.trim(),
+          style: {
+            border: "1px solid var(--sm-d-primary, #bb171d)",
+            padding: "10px 20px",
+            minHeight: 44,
+            background: "var(--sm-d-primary, #bb171d)",
+            color: "var(--sm-d-primary-text, #ffffff)",
+            fontSize: 14,
+            fontWeight: 700,
+            cursor: "pointer",
+            opacity: !content.trim() || isSubmitting ? 0.5 : 1,
+            fontFamily: "inherit"
+          },
+          children: isSubmitting ? "Posting..." : "Post"
+        }
+      )
+    ] })
+  ] });
+}
+function buildTree(comments) {
+  const byId = /* @__PURE__ */ new Map();
+  const roots = [];
+  for (const comment of comments) {
+    byId.set(comment.id, { ...comment, replies: [] });
+  }
+  for (const comment of comments) {
+    const node = byId.get(comment.id);
+    if (comment.parent_comment_id && byId.has(comment.parent_comment_id)) {
+      byId.get(comment.parent_comment_id).replies.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+  return roots;
+}
+function DiscussionThread({
+  comments,
+  onAddComment,
+  currentUserId,
+  allowGuestComments = true,
+  theme,
+  title = "Comments",
+  error
+}) {
+  const [replyingTo, setReplyingTo] = useState();
+  const tree = buildTree(comments);
+  const isGuest = !currentUserId;
+  const handleAdd = useCallback(
+    async (content, guestName, guestEmail) => {
+      if (!onAddComment) return;
+      await onAddComment(content, replyingTo, { authorName: guestName, authorEmail: guestEmail });
+      setReplyingTo(void 0);
+    },
+    [onAddComment, replyingTo]
+  );
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": title,
+      style: { ...themeToStyle(theme), fontFamily: "var(--sm-d-font, Arial, sans-serif)", marginTop: 36 },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "h2",
+          {
+            style: {
+              margin: "0 0 16px",
+              fontSize: 28,
+              fontWeight: 700,
+              fontFamily: "var(--sm-d-heading-font, Georgia, serif)",
+              color: "var(--sm-d-heading)"
+            },
+            children: [
+              title,
+              " (",
+              comments.length,
+              ")"
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsx("p", { style: { color: "var(--sm-d-primary)", fontSize: 14 }, children: error }),
+        tree.length === 0 ? /* @__PURE__ */ jsx("p", { style: { color: "var(--sm-d-muted)", fontSize: 15, padding: "8px 0 16px" }, children: "No comments yet. Be the first to share a thought on this story." }) : tree.map((comment) => /* @__PURE__ */ jsx(
+          CommentItem,
+          {
+            comment,
+            depth: 0,
+            onReply: onAddComment ? setReplyingTo : void 0,
+            theme
+          },
+          comment.id
+        )),
+        onAddComment && /* @__PURE__ */ jsx("div", { style: { marginTop: 24 }, children: /* @__PURE__ */ jsx(
+          CommentInput,
+          {
+            onSubmit: handleAdd,
+            showGuestFields: isGuest && allowGuestComments,
+            replyingTo,
+            onCancelReply: replyingTo ? () => setReplyingTo(void 0) : void 0,
+            theme
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/react.tsx
+function useDiscussion(clientOrConfig, targetType, targetId) {
+  const client = useMemo(
+    () => clientOrConfig instanceof DiscussionsClient ? clientOrConfig : new DiscussionsClient(clientOrConfig),
+    [clientOrConfig]
+  );
+  const [comments, setComments] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!targetId) return;
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+    void client.listComments(targetType, targetId).then((result) => {
+      if (cancelled) return;
+      if (result.data) setComments(result.data);
+      if (result.error) setError(result.error.message);
+      setIsLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, targetType, targetId]);
+  const addComment = useCallback(
+    async (body, options) => {
+      if (!targetId) return;
+      const result = await client.addComment(targetType, targetId, {
+        body,
+        parent_comment_id: options?.parentCommentId,
+        author_name: options?.authorName,
+        author_email: options?.authorEmail
+      });
+      if (result.error) {
+        setError(result.error.message);
+        return result;
+      }
+      if (result.data) {
+        setComments((prev) => prev.some((c) => c.id === result.data.id) ? prev : [...prev, result.data]);
+      }
+      return result;
+    },
+    [client, targetType, targetId]
+  );
+  return { comments, isLoading, error, addComment, client };
+}
+
+export { CommentInput, CommentItem, DiscussionThread, useDiscussion };

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@scalemule/discussions",
+  "version": "0.0.1",
+  "description": "ScaleMule Discussions SDK — threaded comments on any content object",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/react.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "lint": "tsc --noEmit",
+    "prepublishOnly": "node -e \"const v=require('./package.json').version; if(!/^0\\.(0|1)\\.\\d+$/.test(v)){console.error('ERR: SDK '+v+' violates patch-only policy (0.0.x or 0.1.x only). See CONTRIBUTING.md SDK versioning section.');process.exit(1)}\" && npm run lint && npm test && npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true },
+    "react-dom": { "optional": true }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0",
+    "vitest": "^1.0.0"
+  },
+  "keywords": [
+    "scalemule",
+    "comments",
+    "discussions",
+    "sdk"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/scalemule/discussions.git"
+  },
+  "author": "ScaleMule Inc. <support@scalemule.com>",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}