@seriphxyz/astro 0.1.2 → 0.1.7

package/README.md

@@ -152,6 +152,49 @@ import Reactions from "@seriphxyz/astro/Reactions";
 - `seriph:reaction-added` - Reaction added
 - `seriph:reaction-removed` - Reaction removed
 
+### Subscribe
+
+Email subscription form with double opt-in:
+
+```astro
+---
+import Subscribe from "@seriphxyz/astro/Subscribe";
+---
+
+<Subscribe
+  siteKey={import.meta.env.SERIPH_SITE_KEY}
+  buttonText="Subscribe"
+  placeholder="your@email.com"
+/>
+```
+
+**Props:**
+- `siteKey` (required) - Your Seriph site key
+- `endpoint` - Base URL (default: `https://seriph.xyz`)
+- `buttonText` - Submit button text (default: `'Subscribe'`)
+- `placeholder` - Email input placeholder
+- `successMessage` - Custom success message
+- `theme` - `'light'` | `'dark'` | `'auto'` (default: `'light'`)
+- `class` - Additional CSS class
+
+**Events:**
+- `seriph:subscribed` - Subscription successful
+
+### SubscribeForm
+
+A more flexible subscription form that wraps your own markup:
+
+```astro
+---
+import SubscribeForm from "@seriphxyz/astro/SubscribeForm";
+---
+
+<SubscribeForm siteKey={import.meta.env.SERIPH_SITE_KEY}>
+  <input name="email" type="email" placeholder="Email" required />
+  <button type="submit">Join newsletter</button>
+</SubscribeForm>
+```
+
 ## JavaScript API
 
 For advanced use cases, use the JavaScript API directly:

package/dist/index.d.ts

@@ -1,63 +1,8 @@
-export interface SeriphConfig {
-    /** Your site key (required) */
-    siteKey: string;
-    /** @deprecated Use siteKey instead */
-    apiKey?: string;
-    /** Base URL of your Seriph instance (default: 'https://seriph.xyz') */
-    endpoint?: string;
-}
-/** @deprecated Use SeriphConfig instead */
-export type SeraphConfig = SeriphConfig;
-export { seriphPostsLoader, seraphPostsLoader, fetchPosts, fetchPost, type SeriphPost, type SeraphPost, type SeriphPostsLoaderOptions, type SeraphPostsLoaderOptions, type FetchPostsOptions, type FetchPostOptions, } from "./loader.js";
-export interface FormSubmitOptions {
-    onSuccess?: (data: unknown) => void;
-    onError?: (error: Error) => void;
-}
-export interface Comment {
-    id: string;
-    pageId: string;
-    parentId?: string;
-    authorName: string;
-    content: string;
-    createdAt: string;
-    replies: Comment[];
-}
-export interface ReactionCounts {
-    pageId: string;
-    counts: Record<string, number>;
-}
-export interface SubmitFormOptions extends SeriphConfig {
-    formSlug: string;
-    data: Record<string, unknown>;
-    /** Form load timestamp for spam detection (auto-set if not provided) */
-    formLoadTime?: number;
-}
-export interface FormSubmitResponse {
-    success: boolean;
-    message: string;
-}
-export declare function submitForm(options: SubmitFormOptions): Promise<FormSubmitResponse>;
-export interface FetchCommentsOptions extends SeriphConfig {
-    pageId: string;
-}
-export declare function fetchComments(options: FetchCommentsOptions): Promise<Comment[]>;
-export interface PostCommentOptions extends SeriphConfig {
-    pageId: string;
-    authorName: string;
-    authorEmail?: string;
-    content: string;
-    parentId?: string;
-}
-export declare function postComment(options: PostCommentOptions): Promise<Comment>;
-export interface FetchReactionsOptions extends SeriphConfig {
-    pageId: string;
-}
-export declare function fetchReactions(options: FetchReactionsOptions): Promise<ReactionCounts>;
-export interface AddReactionOptions extends SeriphConfig {
-    pageId: string;
-    reactionType?: string;
-}
-export declare function addReaction(options: AddReactionOptions): Promise<{
-    reactionType: string;
-    count: number;
-}>;
+/**
+ * @seriphxyz/astro
+ *
+ * Astro components and content loader for Seriph widgets.
+ * Re-exports all types, API functions, and controllers from @seriphxyz/core.
+ */
+export { DEFAULT_ENDPOINT, API_PATH, VISITOR_STORAGE_KEY, type SeriphConfig, type Comment, type ReactionCounts, type FormSubmitResponse, type SubscribeResponse, type SeriphPost, buildUrl, getSiteKey, getVisitorId, setVisitorId, type SubmitFormOptions, submitForm, type FetchCommentsOptions, fetchComments, type PostCommentOptions, postComment, type FetchReactionsOptions, type FetchReactionsResponse, fetchReactions, type AddReactionOptions, addReaction, type RemoveReactionOptions, removeReaction, type SubscribeOptions, subscribe, type JoinWaitlistOptions, type JoinWaitlistResponse, joinWaitlist, type ViewCountsOptions, type ViewCounts, type RecordViewResponse, getViewCounts, recordView, type FetchPostsOptions, fetchPosts, type FetchPostOptions, fetchPost, type ControllerStatus, type ControllerListener, type SubscribeState, type FormState, type ReactionsState, type CommentsState, type WaitlistState, SubscribeController, WaitlistController, FormController, ReactionsController, CommentsController, } from "@seriphxyz/core";
+export { seriphPostsLoader, type SeriphPostsLoaderOptions, } from "./loader.js";

package/dist/index.js

@@ -1,111 +1,14 @@
-const DEFAULT_ENDPOINT = "https://seriph.xyz";
-const API_PATH = "/api/v1";
-// Re-export loader
-export { seriphPostsLoader, seraphPostsLoader, fetchPosts, fetchPost, } from "./loader.js";
-// Helper to build API URL
-function buildUrl(endpoint, path) {
-    const base = (endpoint || DEFAULT_ENDPOINT).replace(/\/+$/, "");
-    return `${base}${API_PATH}${path}`;
-}
-// Helper to get site key (supports both siteKey and deprecated apiKey)
-function getSiteKey(config) {
-    const key = config.siteKey || config.apiKey;
-    if (!key) {
-        throw new Error("siteKey is required");
-    }
-    return key;
-}
-// Client utilities
-export async function submitForm(options) {
-    const { endpoint, formSlug, data, formLoadTime } = options;
-    const siteKey = getSiteKey(options);
-    const url = buildUrl(endpoint, `/forms/${formSlug}/submit`);
-    // Include timestamp for time-based spam detection
-    const payload = {
-        ...data,
-        _seriph_ts: formLoadTime || Math.floor(Date.now() / 1000),
-    };
-    const response = await fetch(url, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-            "X-Seriph-Key": siteKey,
-        },
-        body: JSON.stringify(payload),
-    });
-    if (!response.ok) {
-        throw new Error(`Form submission failed: ${response.statusText}`);
-    }
-    return response.json();
-}
-export async function fetchComments(options) {
-    const { endpoint, pageId } = options;
-    const siteKey = getSiteKey(options);
-    const url = buildUrl(endpoint, `/comments/${encodeURIComponent(pageId)}`);
-    const response = await fetch(url, {
-        headers: {
-            "X-Seriph-Key": siteKey,
-        },
-    });
-    if (!response.ok) {
-        throw new Error(`Failed to fetch comments: ${response.statusText}`);
-    }
-    const data = await response.json();
-    return data.data || [];
-}
-export async function postComment(options) {
-    const { endpoint, pageId, ...rest } = options;
-    const siteKey = getSiteKey(options);
-    const url = buildUrl(endpoint, `/comments/${encodeURIComponent(pageId)}`);
-    const response = await fetch(url, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-            "X-Seriph-Key": siteKey,
-        },
-        body: JSON.stringify({
-            authorName: rest.authorName,
-            authorEmail: rest.authorEmail,
-            content: rest.content,
-            parentId: rest.parentId,
-        }),
-    });
-    if (!response.ok) {
-        throw new Error(`Failed to post comment: ${response.statusText}`);
-    }
-    const data = await response.json();
-    return data.data;
-}
-export async function fetchReactions(options) {
-    const { endpoint, pageId } = options;
-    const siteKey = getSiteKey(options);
-    const url = buildUrl(endpoint, `/reactions/${encodeURIComponent(pageId)}`);
-    const response = await fetch(url, {
-        headers: {
-            "X-Seriph-Key": siteKey,
-        },
-    });
-    if (!response.ok) {
-        throw new Error(`Failed to fetch reactions: ${response.statusText}`);
-    }
-    const data = await response.json();
-    return data.data;
-}
-export async function addReaction(options) {
-    const { endpoint, pageId, reactionType = "like" } = options;
-    const siteKey = getSiteKey(options);
-    const url = buildUrl(endpoint, `/reactions/${encodeURIComponent(pageId)}`);
-    const response = await fetch(url, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-            "X-Seriph-Key": siteKey,
-        },
-        body: JSON.stringify({ reactionType }),
-    });
-    if (!response.ok) {
-        throw new Error(`Failed to add reaction: ${response.statusText}`);
-    }
-    const data = await response.json();
-    return data.data;
-}
+/**
+ * @seriphxyz/astro
+ *
+ * Astro components and content loader for Seriph widgets.
+ * Re-exports all types, API functions, and controllers from @seriphxyz/core.
+ */
+// Re-export everything from core
+export { 
+// Constants
+DEFAULT_ENDPOINT, API_PATH, VISITOR_STORAGE_KEY, 
+// Helpers
+buildUrl, getSiteKey, getVisitorId, setVisitorId, submitForm, fetchComments, postComment, fetchReactions, addReaction, removeReaction, subscribe, joinWaitlist, getViewCounts, recordView, fetchPosts, fetchPost, SubscribeController, WaitlistController, FormController, ReactionsController, CommentsController, } from "@seriphxyz/core";
+// Re-export loader (Astro-specific)
+export { seriphPostsLoader, } from "./loader.js";

package/dist/loader.d.ts

@@ -6,7 +6,7 @@
  * @example
  * // In src/content.config.ts
  * import { defineCollection } from 'astro:content';
- * import { seriphPostsLoader } from 'seriph-astro/loader';
+ * import { seriphPostsLoader } from '@seriphxyz/astro/loader';
  *
  * const posts = defineCollection({
  *   loader: seriphPostsLoader({
@@ -16,25 +16,12 @@
  *
  * export const collections = { posts };
  */
-export interface SeriphPost {
-    id: string;
-    title: string;
-    slug: string;
-    content: string;
-    excerpt?: string;
-    coverImage?: string;
-    metaTitle?: string;
-    metaDescription?: string;
-    tags: string[];
-    publishedAt: string;
-}
-/** @deprecated Use SeriphPost instead */
-export type SeraphPost = SeriphPost;
+import { fetchPosts as coreFetchPosts, fetchPost as coreFetchPost, type SeriphPost, type FetchPostsOptions, type FetchPostOptions } from "@seriphxyz/core";
+export type { SeriphPost, FetchPostsOptions, FetchPostOptions };
+export { coreFetchPosts as fetchPosts, coreFetchPost as fetchPost };
 export interface SeriphPostsLoaderOptions {
     /** Your site key (required) */
-    siteKey?: string;
-    /** @deprecated Use siteKey instead */
-    apiKey?: string;
+    siteKey: string;
     /** Base URL of your Seriph instance (default: 'https://seriph.xyz') */
     endpoint?: string;
     /** Filter posts by tag */
@@ -44,8 +31,6 @@ export interface SeriphPostsLoaderOptions {
     /** How to handle errors: 'throw' (default), 'warn', or 'ignore' */
     onError?: "throw" | "warn" | "ignore";
 }
-/** @deprecated Use SeriphPostsLoaderOptions instead */
-export type SeraphPostsLoaderOptions = SeriphPostsLoaderOptions;
 interface LoaderContext {
     store: {
         set: (entry: {
@@ -70,36 +55,3 @@ export declare function seriphPostsLoader(options: SeriphPostsLoaderOptions): {
     name: string;
     load(context: LoaderContext): Promise<void>;
 };
-/** @deprecated Use seriphPostsLoader instead (note the 'i' in seriph) */
-export declare const seraphPostsLoader: typeof seriphPostsLoader;
-export interface FetchPostsOptions {
-    /** Your site key (required) */
-    siteKey?: string;
-    /** @deprecated Use siteKey instead */
-    apiKey?: string;
-    /** Base URL of your Seriph instance (default: 'https://seriph.xyz') */
-    endpoint?: string;
-    /** Filter posts by tag */
-    tag?: string;
-    /** Maximum number of posts to fetch (default: 500) */
-    limit?: number;
-}
-/**
- * Utility function to fetch posts directly (for server-side use cases)
- */
-export declare function fetchPosts(options: FetchPostsOptions): Promise<SeriphPost[]>;
-export interface FetchPostOptions {
-    /** Your site key (required) */
-    siteKey?: string;
-    /** @deprecated Use siteKey instead */
-    apiKey?: string;
-    /** Base URL of your Seriph instance (default: 'https://seriph.xyz') */
-    endpoint?: string;
-    /** The post slug to fetch */
-    slug: string;
-}
-/**
- * Utility function to fetch a single post by slug
- */
-export declare function fetchPost(options: FetchPostOptions): Promise<SeriphPost | null>;
-export {};

package/dist/loader.js

@@ -6,7 +6,7 @@
  * @example
  * // In src/content.config.ts
  * import { defineCollection } from 'astro:content';
- * import { seriphPostsLoader } from 'seriph-astro/loader';
+ * import { seriphPostsLoader } from '@seriphxyz/astro/loader';
  *
  * const posts = defineCollection({
  *   loader: seriphPostsLoader({
@@ -16,16 +16,8 @@
  *
  * export const collections = { posts };
  */
-const DEFAULT_ENDPOINT = "https://seriph.xyz";
-const API_PATH = "/api/v1";
-// Helper to get site key (supports both siteKey and deprecated apiKey)
-function getSiteKey(options) {
-    const key = options.siteKey || options.apiKey;
-    if (!key) {
-        throw new Error("siteKey is required");
-    }
-    return key;
-}
+import { DEFAULT_ENDPOINT, API_PATH, getSiteKey, fetchPosts as coreFetchPosts, fetchPost as coreFetchPost, } from "@seriphxyz/core";
+export { coreFetchPosts as fetchPosts, coreFetchPost as fetchPost };
 /**
  * Creates an Astro content loader that fetches posts from Seriph.
  *
@@ -33,15 +25,13 @@ function getSiteKey(options) {
  */
 export function seriphPostsLoader(options) {
     const { endpoint = DEFAULT_ENDPOINT, tag, limit = 500, onError = "throw", } = options;
-    const siteKey = getSiteKey(options);
-    // Build the base API URL (strip trailing slash, add API path)
+    const siteKey = getSiteKey({ siteKey: options.siteKey });
     const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
     return {
         name: "seriph-posts-loader",
         async load(context) {
             const { store, logger } = context;
             try {
-                // Build the URL with query parameters
                 const url = new URL(`${baseUrl}/posts`);
                 url.searchParams.set("limit", String(limit));
                 if (tag) {
@@ -57,24 +47,11 @@ export function seriphPostsLoader(options) {
                     throw new Error(`Failed to fetch posts: ${response.status} ${response.statusText}`);
                 }
                 const data = await response.json();
-                // Clear previous entries
                 store.clear();
-                // Add each post as an entry
                 for (const post of data.posts) {
                     store.set({
                         id: post.slug,
-                        data: {
-                            id: post.id,
-                            title: post.title,
-                            slug: post.slug,
-                            content: post.content,
-                            excerpt: post.excerpt,
-                            coverImage: post.coverImage,
-                            metaTitle: post.metaTitle,
-                            metaDescription: post.metaDescription,
-                            tags: post.tags,
-                            publishedAt: post.publishedAt,
-                        },
+                        data: post,
                     });
                 }
                 logger.info(`Loaded ${data.posts.length} posts from Seriph`);
@@ -88,54 +65,7 @@ export function seriphPostsLoader(options) {
                 else if (onError === "warn") {
                     logger.warn(`Error loading posts (continuing anyway): ${message}`);
                 }
-                // onError === "ignore" - silently continue
             }
         },
     };
 }
-/** @deprecated Use seriphPostsLoader instead (note the 'i' in seriph) */
-export const seraphPostsLoader = seriphPostsLoader;
-/**
- * Utility function to fetch posts directly (for server-side use cases)
- */
-export async function fetchPosts(options) {
-    const { endpoint = DEFAULT_ENDPOINT, tag, limit = 500 } = options;
-    const siteKey = getSiteKey(options);
-    const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
-    const url = new URL(`${baseUrl}/posts`);
-    url.searchParams.set("limit", String(limit));
-    if (tag) {
-        url.searchParams.set("tag", tag);
-    }
-    const response = await fetch(url.toString(), {
-        headers: {
-            "X-Seriph-Key": siteKey,
-        },
-    });
-    if (!response.ok) {
-        throw new Error(`Failed to fetch posts: ${response.status} ${response.statusText}`);
-    }
-    const data = await response.json();
-    return data.posts;
-}
-/**
- * Utility function to fetch a single post by slug
- */
-export async function fetchPost(options) {
-    const { endpoint = DEFAULT_ENDPOINT, slug } = options;
-    const siteKey = getSiteKey(options);
-    const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
-    const response = await fetch(`${baseUrl}/posts/${encodeURIComponent(slug)}`, {
-        headers: {
-            "X-Seriph-Key": siteKey,
-        },
-    });
-    if (response.status === 404) {
-        return null;
-    }
-    if (!response.ok) {
-        throw new Error(`Failed to fetch post: ${response.status} ${response.statusText}`);
-    }
-    const data = await response.json();
-    return data.public_post || data;
-}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@seriphxyz/astro",
-  "version": "0.1.2",
+  "version": "0.1.7",
   "description": "Astro components and content loader for Seriph widgets (forms, comments, reactions, posts)",
   "repository": {
     "type": "git",
-    "url": "https://github.com/seriphxyz/astro"
+    "url": "git+https://github.com/seriphxyz/astro.git"
   },
   "homepage": "https://seriph.xyz",
   "author": "Tim Shedor",
@@ -20,16 +20,14 @@
     },
     "./Form": "./src/Form.astro",
     "./Comments": "./src/Comments.astro",
-    "./Reactions": "./src/Reactions.astro"
+    "./Reactions": "./src/Reactions.astro",
+    "./Subscribe": "./src/Subscribe.astro",
+    "./SubscribeForm": "./src/SubscribeForm.astro"
   },
   "files": [
     "src",
     "dist"
   ],
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch"
-  },
   "keywords": [
     "astro",
     "seriph",
@@ -38,13 +36,21 @@
     "reactions",
     "posts",
     "widgets",
-    "content-loader"
+    "content-loader",
+    "subscribe"
   ],
   "license": "MIT",
+  "dependencies": {
+    "@seriphxyz/core": "0.1.7"
+  },
   "peerDependencies": {
     "astro": "^5.0.0"
   },
   "devDependencies": {
     "typescript": "^5.7.3"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
   }
-}
+}

package/src/Comments.astro

@@ -2,7 +2,7 @@
 /**
  * Seriph Comments Component
  *
- * Displays threaded comments with a form to post new comments.
+ * Displays threaded comments with a form to post new comments and replies.
  * Customize with CSS custom properties.
  *
  * @example
@@ -47,6 +47,11 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
   <div class="seriph-comments-list"></div>
 
   <form class="seriph-comments-form">
+    <div class="seriph-reply-indicator" style="display: none;">
+      <span>Replying to <strong class="seriph-reply-to-name"></strong></span>
+      <button type="button" class="seriph-cancel-reply">Cancel</button>
+    </div>
+    <input type="hidden" name="parentId" value="" />
     <slot name="form">
       <div class="seriph-form-group">
         <label for="seriph-author-name">Name</label>
@@ -76,6 +81,7 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
         <span class="seriph-comment-date"></span>
       </div>
       <div class="seriph-comment-content"></div>
+      <button type="button" class="seriph-reply-btn">Reply</button>
       <div class="seriph-comment-replies"></div>
     </div>
   </template>
@@ -98,14 +104,28 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
     const siteKey = (container as HTMLElement).dataset.siteKey;
     const pageId = (container as HTMLElement).dataset.pageId;
     const list = container.querySelector(".seriph-comments-list");
-    const form = container.querySelector(".seriph-comments-form");
+    const form = container.querySelector(".seriph-comments-form") as HTMLFormElement;
     const template = container.querySelector("#seriph-comment-template") as HTMLTemplateElement;
+    const replyIndicator = container.querySelector(".seriph-reply-indicator") as HTMLElement;
+    const replyToName = container.querySelector(".seriph-reply-to-name") as HTMLElement;
+    const cancelReplyBtn = container.querySelector(".seriph-cancel-reply") as HTMLButtonElement;
+    const parentIdInput = form?.querySelector('input[name="parentId"]') as HTMLInputElement;
 
     if (!endpoint || !siteKey || !pageId || !list || !form || !template) return;
 
     // Record when form was loaded (for time-based spam detection)
     formTimestamps.set(form, Math.floor(Date.now() / 1000));
 
+    // Cancel reply mode
+    function cancelReply() {
+      if (parentIdInput) parentIdInput.value = "";
+      if (replyIndicator) replyIndicator.style.display = "none";
+      const submitBtn = form.querySelector('[type="submit"]') as HTMLButtonElement;
+      if (submitBtn) submitBtn.textContent = "Post Comment";
+    }
+
+    cancelReplyBtn?.addEventListener("click", cancelReply);
+
     async function loadComments() {
       try {
         const response = await fetch(
@@ -144,6 +164,20 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
       ).toLocaleDateString();
       el.querySelector(".seriph-comment-content")!.textContent = comment.content;
 
+      // Add reply button handler
+      const replyBtn = el.querySelector(".seriph-reply-btn") as HTMLButtonElement;
+      replyBtn?.addEventListener("click", () => {
+        if (parentIdInput) parentIdInput.value = comment.id;
+        if (replyToName) replyToName.textContent = comment.authorName;
+        if (replyIndicator) replyIndicator.style.display = "flex";
+        const submitBtn = form.querySelector('[type="submit"]') as HTMLButtonElement;
+        if (submitBtn) submitBtn.textContent = "Post Reply";
+        // Scroll form into view and focus
+        form.scrollIntoView({ behavior: "smooth", block: "center" });
+        const contentField = form.querySelector('textarea[name="content"]') as HTMLTextAreaElement;
+        setTimeout(() => contentField?.focus(), 300);
+      });
+
       const repliesContainer = el.querySelector(".seriph-comment-replies")!;
       comment.replies?.forEach((reply) => renderComment(reply, repliesContainer));
 
@@ -164,6 +198,9 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
       // Get load timestamp for time-based spam detection
       const loadTimestamp = formTimestamps.get(formEl);
 
+      // Get parent ID if replying
+      const parentId = formData.get("parentId") as string | null;
+
       try {
         const response = await fetch(
           `${endpoint}/comments/${encodeURIComponent(pageId)}`,
@@ -177,6 +214,7 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
               authorName: formData.get("authorName"),
               authorEmail: formData.get("authorEmail") || undefined,
               content: formData.get("content"),
+              parentId: parentId ? parseInt(parentId, 10) : undefined,
               _gotcha: honeypot || undefined,
               _seriph_ts: loadTimestamp,
             }),
@@ -186,6 +224,7 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
         if (!response.ok) throw new Error("Failed to post comment");
 
         formEl.reset();
+        cancelReply(); // Reset reply mode
         container.dispatchEvent(
           new CustomEvent("seriph:comment-posted", {
             detail: await response.json(),
@@ -278,12 +317,40 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
         grid-template-columns: 1fr 1fr;
       }
 
-      .seriph-comments-form .seriph-form-group:nth-child(3),
+      .seriph-comments-form .seriph-form-group:nth-child(4),
+      .seriph-comments-form .seriph-reply-indicator,
       .seriph-comments-form button[type="submit"] {
         grid-column: 1 / -1;
       }
     }
 
+    .seriph-reply-indicator {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 0.75rem;
+      background: var(--seriph-notice-bg);
+      color: var(--seriph-notice-text);
+      border-radius: 0.25rem;
+      font-size: 0.8125rem;
+      grid-column: 1 / -1;
+    }
+
+    .seriph-cancel-reply {
+      margin-left: auto;
+      padding: 0.125rem 0.5rem;
+      background: transparent;
+      border: 1px solid currentColor;
+      border-radius: 0.25rem;
+      color: inherit;
+      font-size: 0.75rem;
+      cursor: pointer;
+    }
+
+    .seriph-cancel-reply:hover {
+      background: rgba(0, 0, 0, 0.1);
+    }
+
     .seriph-form-group {
       margin-bottom: 0;
     }
@@ -368,6 +435,21 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
       font-size: 0.875rem;
     }
 
+    .seriph-reply-btn {
+      margin-top: 0.5rem;
+      padding: 0.125rem 0.5rem;
+      background: transparent;
+      border: none;
+      color: var(--seriph-text-muted);
+      font-size: 0.75rem;
+      cursor: pointer;
+    }
+
+    .seriph-reply-btn:hover {
+      color: var(--seriph-focus-color);
+      text-decoration: underline;
+    }
+
     .seriph-comment-replies {
       margin-left: 1rem;
       margin-top: 0.5rem;