@canvas-digital/blog-sdk 2.0.0

package/dist/components/admin/tools/ToolsHub.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { useAdminMock } from "../mock/store";
+export function ExportTool() {
+    const store = useAdminMock();
+    const brandSlug = store.activeBrand?.slug ?? null;
+    const brandName = store.activeBrand?.name ?? "All brands";
+    const brandId = store.activeBrandId;
+    const postCount = store.filterPosts({ state: "all", brandId }).length;
+    const mediaCount = store.listMedia(brandId, "", 1, 1000).total;
+    const [kind, setKind] = useState("all");
+    const [format, setFormat] = useState("json");
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const options = [
+        {
+            value: "all",
+            label: "All content",
+            description: `Posts and media for ${brandName} (${postCount} posts · ${mediaCount} media).`,
+        },
+        { value: "posts", label: "Posts", description: `Published and draft posts only (${postCount}).` },
+        { value: "media", label: "Media", description: `Uploaded files and their metadata (${mediaCount}).` },
+    ];
+    const formats = [
+        { value: "json", label: "JSON", description: "Full nested structure. Best for backups." },
+        { value: "xml", label: "XML", description: "Structured markup wrapper." },
+        { value: "csv", label: "CSV", description: "Flat table with a recordType column." },
+    ];
+    const download = () => {
+        setError(null);
+        setBusy(true);
+        try {
+            const content = store.exportPayload(kind, format, brandId);
+            const blob = new Blob([content], {
+                type: format === "json" ? "application/json" : format === "csv" ? "text/csv" : "application/xml",
+            });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = `export-${kind}${brandSlug ? `-${brandSlug}` : ""}.${format}`;
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            URL.revokeObjectURL(url);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Export failed.");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs("section", { className: "panel", children: [_jsx("div", { className: "panel-head", children: _jsx("h2", { children: "Choose what to export" }) }), _jsxs("div", { className: "panel-body stack", children: [_jsxs("p", { className: "note", style: { marginTop: 0 }, children: ["Download a JSON, XML, or CSV file from the mock store", brandSlug ? ` (currently ${brandName})` : " (all brands)", "."] }), error ? (_jsx("p", { className: "form-error", role: "alert", children: error })) : null, _jsxs("fieldset", { className: "export-fieldset", children: [_jsx("legend", { className: "sr-only", children: "Export type" }), options.map((opt) => (_jsxs("label", { className: `export-option${kind === opt.value ? " is-on" : ""}`, children: [_jsx("input", { type: "radio", name: "export-kind", value: opt.value, checked: kind === opt.value, onChange: () => setKind(opt.value) }), _jsxs("span", { className: "export-option-body", children: [_jsx("span", { className: "export-option-label", children: opt.label }), _jsx("span", { className: "export-option-desc", children: opt.description })] })] }, opt.value)))] }), _jsxs("fieldset", { className: "export-fieldset", children: [_jsx("legend", { className: "export-fieldset-label", children: "File format" }), formats.map((opt) => (_jsxs("label", { className: `export-option${format === opt.value ? " is-on" : ""}`, children: [_jsx("input", { type: "radio", name: "export-format", value: opt.value, checked: format === opt.value, onChange: () => setFormat(opt.value) }), _jsxs("span", { className: "export-option-body", children: [_jsx("span", { className: "export-option-label", children: opt.label }), _jsx("span", { className: "export-option-desc", children: opt.description })] })] }, opt.value)))] }), _jsx("div", { className: "btn-row", children: _jsx("button", { type: "button", className: "btn btn-primary", onClick: download, disabled: busy, children: busy ? "Preparing…" : `Download ${format.toUpperCase()} File` }) })] })] }));
+}
+export function ImportTool() {
+    const store = useAdminMock();
+    const brand = store.activeBrand ?? store.brands[0];
+    const brandSlug = brand?.slug ?? "";
+    const brandName = brand?.name ?? "Brand";
+    const tenantId = brand?.id ?? "";
+    const fileRef = useRef(null);
+    const [kind, setKind] = useState("all");
+    const [file, setFile] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const [result, setResult] = useState(null);
+    const options = [
+        { value: "all", label: "Posts and comments", description: "Import posts first, then comments by post slug." },
+        { value: "posts", label: "Posts only", description: "Bulk create posts. Existing slugs are skipped." },
+        { value: "comments", label: "Comments only", description: "Each row must include a postSlug that exists." },
+    ];
+    const runImport = async () => {
+        setError(null);
+        setResult(null);
+        if (!file) {
+            setError("Choose a JSON file to import.");
+            return;
+        }
+        if (!tenantId) {
+            setError("Pick a brand first.");
+            return;
+        }
+        setBusy(true);
+        try {
+            const content = await file.text();
+            if (!content.trim().startsWith("{") && !content.trim().startsWith("[")) {
+                throw new Error("Mock import accepts JSON only.");
+            }
+            setResult(store.importPayload(content, kind, tenantId));
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Import failed.");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs("section", { className: "panel", children: [_jsxs("div", { className: "panel-head", children: [_jsx("h2", { children: "Choose what to import" }), _jsx("span", { className: "hint", children: brandName })] }), _jsxs("div", { className: "panel-body stack", children: [_jsxs("p", { className: "note", style: { marginTop: 0 }, children: ["Upload a JSON file from Tools \u2192 Export. Scoped to ", brandSlug || brandName, "."] }), error ? (_jsx("p", { className: "form-error", role: "alert", children: error })) : null, result ? (_jsxs("div", { className: "form-ok", role: "status", children: ["Imported ", result.postsCreated, " post", result.postsCreated === 1 ? "" : "s", result.postsSkipped ? ` (${result.postsSkipped} skipped)` : "", ", ", result.commentsCreated, " comment", result.commentsCreated === 1 ? "" : "s", result.commentsSkipped ? ` (${result.commentsSkipped} skipped)` : "", "."] })) : null, _jsxs("fieldset", { className: "export-fieldset", children: [_jsx("legend", { className: "sr-only", children: "Import type" }), options.map((opt) => (_jsxs("label", { className: `export-option${kind === opt.value ? " is-on" : ""}`, children: [_jsx("input", { type: "radio", name: "import-kind", value: opt.value, checked: kind === opt.value, onChange: () => setKind(opt.value) }), _jsxs("span", { className: "export-option-body", children: [_jsx("span", { className: "export-option-label", children: opt.label }), _jsx("span", { className: "export-option-desc", children: opt.description })] })] }, opt.value)))] }), _jsxs("div", { className: "import-file", children: [_jsx("input", { ref: fileRef, type: "file", accept: ".json,application/json", className: "sr-only", onChange: (e) => {
+                                    setFile(e.target.files?.[0] ?? null);
+                                    setResult(null);
+                                    setError(null);
+                                } }), _jsx("button", { type: "button", className: "btn", onClick: () => fileRef.current?.click(), disabled: busy, children: file ? "Change file" : "Choose file" }), _jsx("span", { className: "import-file-name mono", children: file ? file.name : "JSON" })] }), _jsx("div", { className: "btn-row", children: _jsx("button", { type: "button", className: "btn btn-primary", onClick: () => void runImport(), disabled: busy || !file, children: busy ? "Importing…" : "Run Import" }) })] })] }));
+}
+export function ToolsHub({ onExport, onImport }) {
+    return (_jsxs(_Fragment, { children: [_jsx("p", { className: "explain", children: "Utilities for moving content in and out of the portal. Import and export are scoped to the brand selected in the top bar." }), _jsxs("section", { className: "panel", children: [_jsx("div", { className: "panel-head", children: _jsx("h2", { children: "Available Tools" }) }), _jsxs("ul", { className: "seo-link-list", children: [_jsx("li", { children: _jsxs("button", { type: "button", onClick: onExport, style: { width: "100%", textAlign: "left" }, children: [_jsxs("span", { children: [_jsx("strong", { children: "Export" }), _jsx("span", { className: "cell-sub", style: { display: "block", marginTop: 4 }, children: "Download posts and media as JSON, XML, or CSV." })] }), _jsx("span", { className: "mono", children: "Open \u2192" })] }) }), _jsx("li", { children: _jsxs("button", { type: "button", onClick: onImport, style: { width: "100%", textAlign: "left" }, children: [_jsxs("span", { children: [_jsx("strong", { children: "Import" }), _jsx("span", { className: "cell-sub", style: { display: "block", marginTop: 4 }, children: "Bulk import blog posts and comments from JSON." })] }), _jsx("span", { className: "mono", children: "Open \u2192" })] }) })] })] })] }));
+}

package/dist/components/admin/tools/index.d.ts

@@ -0,0 +1,3 @@
+export { ExportTool, ImportTool, ToolsHub } from "./ToolsHub";
+export type { ExportKind, ImportKind, TransferFormat } from "./ToolsHub";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/admin/tools/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../app/components/admin/tools/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC9D,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/admin/tools/index.js

@@ -0,0 +1 @@
+export { ExportTool, ImportTool, ToolsHub } from "./ToolsHub";

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./user";
+export * from "./admin";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../app/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,2 @@
+export * from "./user";
+export * from "./admin";

package/dist/components/user/BlogCard.d.ts

@@ -0,0 +1,20 @@
+import type { Blog, BlogComponentProps } from "../../types/user";
+export declare function BlogCard({ blog, theme, onSelect, href, lead, index, priority, }: {
+    blog: Blog;
+    theme?: BlogComponentProps["theme"];
+    onSelect?: (blog: Blog) => void;
+    href?: string;
+    lead?: boolean;
+    index?: number;
+    priority?: boolean;
+}): import("react").JSX.Element;
+export declare function BlogGrid({ blogs, theme, onSelect, getHref, className, leadFirst, }: {
+    blogs: Blog[];
+    theme?: BlogComponentProps["theme"];
+    onSelect?: (blog: Blog) => void;
+    getHref?: (blog: Blog) => string;
+    className?: string;
+    /** First card as horizontal lead (BlogUploader page-1 pattern). */
+    leadFirst?: boolean;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=BlogCard.d.ts.map

package/dist/components/user/BlogCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogCard.d.ts","sourceRoot":"","sources":["../../../app/components/user/BlogCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAIjE,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,IAAY,EACZ,KAAS,EACT,QAAgB,GACjB,EAAE;IACD,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,+BAkEA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,SAAiB,GAClB,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,sCAsCA"}

package/dist/components/user/BlogCard.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { DEFAULT_THEME, formatDate } from "../../styles/userTheme";
+import { estimateReadingMinutes } from "./detail/toc";
+export function BlogCard({ blog, theme, onSelect, href, lead = false, index = 0, priority = false, }) {
+    const resolved = { ...DEFAULT_THEME, ...theme };
+    const [imgFailed, setImgFailed] = useState(false);
+    const published = blog.published_at || blog.created_at;
+    const categoryName = blog.category?.name;
+    const thumb = blog.featured_image;
+    const showThumb = Boolean(thumb) && !imgFailed;
+    const readingMinutes = estimateReadingMinutes([blog.excerpt, blog.content].filter(Boolean).join(" "));
+    const body = (_jsxs(_Fragment, { children: [showThumb ? (_jsx("span", { className: "card-img", children: _jsx("img", { src: thumb, alt: blog.title, width: lead ? 1600 : 768, height: lead ? 900 : 512, loading: priority ? "eager" : "lazy", decoding: "async", onError: () => setImgFailed(true) }) })) : (_jsx("span", { className: "card-img card-img-blank", "aria-hidden": "true" })), _jsxs("span", { className: "card-body", children: [categoryName ? _jsx("span", { className: "card-eyebrow", children: categoryName }) : null, _jsx("span", { className: "card-title", children: blog.title }), resolved.showExcerpt && blog.excerpt ? (_jsx("span", { className: "card-excerpt", children: blog.excerpt })) : null, _jsxs("span", { className: "card-meta", children: [resolved.showDate && published ? (_jsx("time", { dateTime: published, children: formatDate(published) })) : null, resolved.showAuthor && blog.author?.name ? (_jsx("span", { children: blog.author.name })) : null, _jsxs("span", { children: [readingMinutes, " min read"] })] })] })] }));
+    return (_jsx("li", { className: lead ? "card card-lead" : "card", style: { ["--motion-i"]: index }, children: href ? (_jsx("a", { href: href, children: body })) : (_jsx("button", { type: "button", className: "card-link", onClick: () => onSelect?.(blog), children: body })) }));
+}
+export function BlogGrid({ blogs, theme, onSelect, getHref, className, leadFirst = false, }) {
+    if (blogs.length === 0)
+        return null;
+    const lead = leadFirst ? blogs[0] : null;
+    const rest = leadFirst ? blogs.slice(1) : blogs;
+    return (_jsxs(_Fragment, { children: [lead ? (_jsx("ul", { className: "post-grid post-grid-lead", children: _jsx(BlogCard, { blog: lead, theme: theme, onSelect: onSelect, href: getHref?.(lead), lead: true, priority: true, index: 0 }) })) : null, rest.length > 0 ? (_jsx("ul", { className: className ? `post-grid ${className}` : "post-grid", children: rest.map((blog, i) => (_jsx(BlogCard, { blog: blog, theme: theme, onSelect: onSelect, href: getHref?.(blog), priority: !lead && i === 0, index: i }, blog.id))) })) : null] }));
+}

package/dist/components/user/BlogCategories.d.ts

@@ -0,0 +1,6 @@
+import type { BlogComponentProps, Category } from "../../types/user";
+export type BlogCategoriesProps = BlogComponentProps & {
+    onSelect?: (category: Category) => void;
+};
+export declare function BlogCategories({ config, theme, branding, className, onSelect, }: BlogCategoriesProps): import("react").JSX.Element;
+//# sourceMappingURL=BlogCategories.d.ts.map

package/dist/components/user/BlogCategories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogCategories.d.ts","sourceRoot":"","sources":["../../../app/components/user/BlogCategories.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGrE,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,mBAAmB,+BAmCrB"}

package/dist/components/user/BlogCategories.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { BlogClient } from "../../services";
+import { useAsync } from "../../hooks/useAsync";
+import { cx, themeVars } from "../../styles/userTheme";
+import { EmptyState, ErrorState, LoadingState, Scope } from "./internal/States";
+export function BlogCategories({ config, theme, branding, className, onSelect, }) {
+    const client = useMemo(() => new BlogClient(config), [config.apiUrl, config.publicApiKey, config.email, config.domain, config.timeoutMs]);
+    const state = useAsync(() => client.getCategories(), [client], (data) => data.length === 0);
+    return (_jsxs(Scope, { className: cx("bp-blog-categories", branding?.className, className), style: themeVars(theme, branding), css: branding?.css, children: [state.status === "loading" ? _jsx(LoadingState, { label: "Loading categories..." }) : null, state.status === "error" ? (_jsx(ErrorState, { message: state.error, authError: state.authError })) : null, state.status === "empty" ? _jsx(EmptyState, { label: "No categories yet." }) : null, state.status === "success" ? (_jsx("ul", { className: "bp-blog-categories__list", style: { listStyle: "none", padding: 0, margin: 0 }, children: state.data.map((category) => (_jsx("li", { style: { marginBottom: "0.5rem" }, children: _jsx("button", { type: "button", onClick: () => onSelect?.(category), children: category.name }) }, category.id))) })) : null] }));
+}

package/dist/components/user/BlogDetail.d.ts

@@ -0,0 +1,25 @@
+import type { BlogComponentProps } from "../../types/user";
+import { type CommentSubmitInput, type CommentSubmitResult, type PublicComment } from "./detail/CommentSection";
+export type BlogDetailProps = BlogComponentProps & {
+    slug: string;
+    trackViews?: boolean;
+    /** Breadcrumb home link. Default `/blogs`. */
+    homeHref?: string;
+    homeLabel?: string;
+    /** Absolute site origin for share links. Defaults to `window.location.origin`. */
+    origin?: string;
+    /** Build public post URL path. Default `/blogs/${slug}`. */
+    postPath?: (slug: string) => string;
+    categoryPath?: (slug: string) => string;
+    allowComments?: boolean;
+    initialComments?: PublicComment[];
+    onSubmitComment?: (input: CommentSubmitInput) => Promise<CommentSubmitResult>;
+    onBack?: () => void;
+    onHome?: () => void;
+    onSelectRelated?: (slug: string) => void;
+    onCategory?: (slug: string) => void;
+    /** Prefer blue blog-details hero (no featured media). Default false — show featured image when present. */
+    blogDetailsHero?: boolean;
+};
+export declare function BlogDetail({ config, slug, theme, branding, className, trackViews, homeHref, homeLabel, origin: originProp, postPath, categoryPath, allowComments: allowCommentsProp, initialComments, onSubmitComment, onBack, onHome, onSelectRelated, onCategory, blogDetailsHero, }: BlogDetailProps): import("react").JSX.Element;
+//# sourceMappingURL=BlogDetail.d.ts.map

package/dist/components/user/BlogDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogDetail.d.ts","sourceRoot":"","sources":["../../../app/components/user/BlogDetail.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,OAAO,EAAkB,KAAK,kBAAkB,EAAE,KAAK,mBAAmB,EAAE,KAAK,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAQhI,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAAG;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,aAAa,EAAE,CAAC;IAClC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAC9E,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,2GAA2G;IAC3G,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,UAAiB,EACjB,QAAmB,EACnB,SAAmB,EACnB,MAAM,EAAE,UAAU,EAClB,QAA+B,EAC/B,YAA4C,EAC5C,aAAa,EAAE,iBAAiB,EAChC,eAAe,EACf,eAAe,EACf,MAAM,EACN,MAAM,EACN,eAAe,EACf,UAAU,EACV,eAAsB,GACvB,EAAE,eAAe,+BA6NjB"}

package/dist/components/user/BlogDetail.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { BlogClient } from "../../services";
+import { useAsync } from "../../hooks/useAsync";
+import { sanitizeHtml } from "../../utils/sanitize";
+import { cx, themeVars } from "../../styles/userTheme";
+import { EmptyState, ErrorState, LoadingState, Scope } from "./internal/States";
+import { ArticleDetailHero } from "./detail/ArticleDetailHero";
+import { ArticleRailDetails } from "./detail/ArticleRailDetails";
+import { ShareRow } from "./detail/ShareRow";
+import { CommentSection } from "./detail/CommentSection";
+import { ReadingProgress } from "./detail/ReadingProgress";
+import { estimateReadingMinutes, extractHeadingsFromHtml, injectHeadingIds, } from "./detail/toc";
+export function BlogDetail({ config, slug, theme, branding, className, trackViews = true, homeHref = "/blogs", homeLabel = "Blogs", origin: originProp, postPath = (s) => `/blogs/${s}`, categoryPath = (s) => `/blogs/category/${s}`, allowComments: allowCommentsProp, initialComments, onSubmitComment, onBack, onHome, onSelectRelated, onCategory, blogDetailsHero = true, }) {
+    const client = useMemo(() => new BlogClient(config), [config.apiUrl, config.publicApiKey, config.email, config.domain, config.timeoutMs]);
+    const state = useAsync(() => client.getBlogBySlug(slug), [client, slug]);
+    const [related, setRelated] = useState([]);
+    const [origin, setOrigin] = useState(originProp ?? "");
+    const loadedId = state.status === "success" || state.status === "empty" ? state.data?.id ?? null : null;
+    const loadedCategoryId = state.status === "success" || state.status === "empty"
+        ? state.data?.category_id ?? state.data?.category?.id ?? null
+        : null;
+    useEffect(() => {
+        if (originProp) {
+            setOrigin(originProp);
+            return;
+        }
+        if (typeof window !== "undefined")
+            setOrigin(window.location.origin);
+    }, [originProp]);
+    useEffect(() => {
+        if (!trackViews || !loadedId)
+            return;
+        const referrer = typeof document !== "undefined" ? document.referrer || null : null;
+        void client.trackView(loadedId, referrer).catch(() => undefined);
+    }, [client, trackViews, loadedId]);
+    useEffect(() => {
+        if (!loadedId) {
+            setRelated([]);
+            return;
+        }
+        let cancelled = false;
+        void client
+            .getRelatedBlogs({ id: loadedId, category_id: loadedCategoryId }, 5)
+            .then((items) => {
+            if (!cancelled)
+                setRelated(items);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setRelated([]);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [client, loadedId, loadedCategoryId]);
+    const post = state.status === "success" || state.status === "empty" ? state.data : null;
+    const sanitized = useMemo(() => (post ? sanitizeHtml(post.content) : ""), [post]);
+    const headings = useMemo(() => extractHeadingsFromHtml(sanitized), [sanitized]);
+    const contentHtml = useMemo(() => injectHeadingIds(sanitized, headings), [sanitized, headings]);
+    const readingMinutes = useMemo(() => (post ? estimateReadingMinutes(sanitized) : 0), [post, sanitized]);
+    const authors = useMemo(() => {
+        if (!post)
+            return [];
+        if (post.author?.name) {
+            return [
+                {
+                    id: post.author.id ?? post.author_id ?? "author",
+                    name: post.author.name,
+                    avatarUrl: null,
+                    jobTitle: null,
+                    bio: null,
+                },
+            ];
+        }
+        return [];
+    }, [post]);
+    const categories = post?.category ? [post.category] : [];
+    const tags = post?.tags ?? [];
+    const allowComments = allowCommentsProp ?? (post ? String(post.status) === "published" : false);
+    const mediaUrl = blogDetailsHero ? null : post?.featured_image ?? null;
+    const railRelated = related.map((r) => ({
+        id: r.id,
+        title: r.title,
+        slug: r.slug,
+        publishedAt: r.published_at,
+        readingMinutes: estimateReadingMinutes(r.content || ""),
+    }));
+    return (_jsxs(Scope, { className: cx("bp-blog-detail", "bp-site-article", branding?.className, className), style: themeVars(theme, branding), css: branding?.css, children: [state.status === "loading" ? _jsx(LoadingState, { label: "Loading..." }) : null, state.status === "error" ? (_jsx(ErrorState, { message: state.authError ? state.error : "Blog not found.", authError: state.authError })) : null, post ? (_jsxs(_Fragment, { children: [_jsx(ReadingProgress, {}), _jsx(ArticleDetailHero, { homeHref: homeHref, homeLabel: homeLabel, category: post.category ? { slug: post.category.slug, name: post.category.name } : null, categoryHref: post.category ? categoryPath(post.category.slug) : null, title: post.title, excerpt: post.excerpt, publishedAt: post.published_at, readingMinutes: readingMinutes, authors: authors, mediaUrl: mediaUrl, mediaAlt: post.title, onBack: onBack, onHome: onHome, onCategory: onCategory }), _jsxs("main", { className: "wrap article-shell", children: [_jsx(ArticleRailDetails, { className: "rail-details-mobile", owners: authors, related: railRelated, hrefFor: postPath, onSelect: onSelectRelated }), _jsxs("article", { className: "article", children: [_jsx("div", { className: "prose", dangerouslySetInnerHTML: { __html: contentHtml } }), categories.length > 0 || tags.length > 0 ? (_jsxs("div", { className: "tag-row", children: [categories.map((c) => onCategory ? (_jsx("button", { type: "button", className: "tag-pill", onClick: () => onCategory(c.slug), children: c.name }, c.id)) : (_jsx("a", { className: "tag-pill", href: categoryPath(c.slug), children: c.name }, c.id))), tags.map((t) => (_jsxs("span", { className: "tag-pill", children: ["#", t.name] }, t.id)))] })) : null, _jsx("div", { className: "share-foot", children: _jsx(ShareRow, { title: post.title, slug: post.slug, origin: origin || (config.domain ? `https://${config.domain}` : ""), path: postPath(post.slug) }) }), authors.map((a) => (_jsx("div", { className: "author-card", children: _jsxs("div", { children: [_jsxs("p", { className: "author-name", children: [a.name, a.jobTitle ? _jsxs("span", { children: [" \u2014 ", a.jobTitle] }) : null] }), a.bio ? _jsx("p", { className: "author-bio", children: a.bio }) : null] }) }, a.id))), _jsx(CommentSection, { postId: post.id, allowComments: allowComments, initialComments: initialComments, onSubmitComment: onSubmitComment })] }), _jsxs("aside", { className: "rail", children: [_jsx(ArticleRailDetails, { className: "rail-details-desktop", owners: authors, related: railRelated, hrefFor: postPath, onSelect: onSelectRelated }), headings.length > 1 ? (_jsxs("nav", { className: "toc", "aria-label": "On this page", children: [_jsx("p", { className: "rail-title", children: "On this page" }), _jsx("ol", { children: headings.map((h) => (_jsx("li", { className: h.level === 3 ? "sub" : undefined, children: _jsx("a", { href: `#${h.id}`, children: h.text }) }, h.id))) })] })) : null] })] })] })) : state.status === "success" || state.status === "empty" ? (_jsx(EmptyState, { label: "Blog not found." })) : null] }));
+}

package/dist/components/user/BlogList.d.ts

@@ -0,0 +1,20 @@
+import type { Blog, BlogComponentProps, BlogListParams } from "../../types/user";
+export type BlogListProps = BlogComponentProps & {
+    params?: BlogListParams;
+    onSelect?: (blog: Blog) => void;
+    getHref?: (blog: Blog) => string;
+    /** Hero title. Defaults to branding name or "Blog". */
+    title?: string;
+    /** Hero supporting copy. */
+    description?: string;
+    /** Feed section label. Default "Latest stories". */
+    feedLabel?: string;
+    /**
+     * BlogUploader home: cinematic media hero from posts with featured images.
+     * Default true on page 1; falls back to text hero when no images.
+     */
+    mediaHero?: boolean;
+};
+/** BlogUploader-style public index: media/text hero → category bar → lead card + grid. */
+export declare function BlogList({ config, theme, branding, className, params, onSelect, getHref, title, description, feedLabel, mediaHero, }: BlogListProps): import("react").JSX.Element;
+//# sourceMappingURL=BlogList.d.ts.map

package/dist/components/user/BlogList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogList.d.ts","sourceRoot":"","sources":["../../../app/components/user/BlogList.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE,cAAc,EAAY,MAAM,kBAAkB,CAAC;AAK3F,MAAM,MAAM,aAAa,GAAG,kBAAkB,GAAG;IAC/C,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACjC,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,0FAA0F;AAC1F,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,KAAK,EACL,WAAW,EACX,SAA4B,EAC5B,SAAgB,GACjB,EAAE,aAAa,+BA4Kf"}

package/dist/components/user/BlogList.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { BlogClient } from "../../services";
+import { useAsync } from "../../hooks/useAsync";
+import { DEFAULT_THEME, cx, themeVars } from "../../styles/userTheme";
+import { BlogGrid } from "./BlogCard";
+import { SiteMediaHero } from "./SiteMediaHero";
+import { ErrorState, LoadingState, Scope } from "./internal/States";
+/** BlogUploader-style public index: media/text hero → category bar → lead card + grid. */
+export function BlogList({ config, theme, branding, className, params, onSelect, getHref, title, description, feedLabel = "Latest stories", mediaHero = true, }) {
+    const client = useMemo(() => new BlogClient(config), [config.apiUrl, config.publicApiKey, config.email, config.domain, config.timeoutMs]);
+    const [page, setPage] = useState(params?.page ?? 1);
+    const [categoryId, setCategoryId] = useState(params?.category_id);
+    const pageSize = params?.page_size ?? 12;
+    const resolvedTheme = { ...DEFAULT_THEME, ...theme };
+    const listParams = {
+        ...params,
+        page,
+        page_size: pageSize,
+        category_id: categoryId,
+    };
+    const state = useAsync(() => client.getBlogs(listParams), [
+        client,
+        page,
+        pageSize,
+        categoryId,
+        params?.search,
+        params?.tag_id,
+        params?.sort,
+        params?.order,
+        params?.published_after,
+        params?.published_before,
+    ], (data) => data.items.length === 0);
+    const categoriesState = useAsync(() => client.getCategories(), [client], (data) => data.length === 0);
+    const totalPages = state.status === "success" || state.status === "empty"
+        ? Math.max(1, Math.ceil(state.data.total / pageSize))
+        : 1;
+    const siteName = branding?.name || "Blog";
+    const heroTitle = title || siteName;
+    const heroDesc = description || "Published stories, guides, and updates from our team.";
+    const items = state.status === "success" || state.status === "empty" ? state.data.items : [];
+    const heroSlides = mediaHero && page === 1 && !categoryId
+        ? items
+            .filter((b) => Boolean(b.featured_image))
+            .slice(0, 5)
+            .map((blog) => ({ blog, href: getHref?.(blog) }))
+        : [];
+    const showMediaHero = heroSlides.length > 0;
+    const showLeadCard = page === 1 && !categoryId && !showMediaHero;
+    const categories = categoriesState.status === "success" ? categoriesState.data : [];
+    const selectCategory = (id) => {
+        setCategoryId(id);
+        setPage(1);
+    };
+    return (_jsxs(Scope, { className: cx("bp-site-index", branding?.className, className), style: themeVars(resolvedTheme, branding), css: branding?.css, children: [showMediaHero ? (_jsx(SiteMediaHero, { slides: heroSlides, siteName: siteName, onSelect: onSelect })) : (_jsxs("section", { className: "site-hero site-animate-in", children: [_jsxs("div", { className: "site-hero-inner", children: [_jsx("p", { className: "site-hero-eyebrow site-animate-item", children: siteName }), _jsx("h1", { className: "site-hero-title site-animate-item", children: heroTitle }), _jsx("p", { className: "site-hero-desc site-animate-item", children: heroDesc })] }), _jsx("div", { className: "site-hero-glow", "aria-hidden": "true" })] })), _jsxs("section", { className: "site-index-feed", "aria-label": feedLabel, children: [_jsxs("div", { className: "site-index-bridge", "aria-hidden": "true", children: [_jsx("span", { className: "site-index-bridge-glow" }), _jsx("span", { className: "site-index-bridge-line" })] }), _jsxs("div", { className: "site-index-feed-inner", children: [_jsxs("header", { className: "site-index-feed-head", children: [_jsx("p", { className: "site-index-feed-eyebrow", children: feedLabel }), _jsx("span", { className: "site-index-feed-rule", "aria-hidden": "true" })] }), _jsxs("div", { className: "site-page site-index-feed-body", children: [categories.length > 0 ? (_jsxs("nav", { className: "cat-bar site-animate-in", "aria-label": "Filter by category", children: [_jsx("button", { type: "button", className: "site-animate-item", "aria-current": !categoryId ? "page" : undefined, onClick: () => selectCategory(undefined), children: "All" }), categories.map((c) => (_jsx("button", { type: "button", className: "site-animate-item", "aria-current": categoryId === c.id ? "page" : undefined, onClick: () => selectCategory(c.id), children: c.name }, c.id)))] })) : null, state.status === "loading" ? _jsx(LoadingState, { label: "Loading blogs..." }) : null, state.status === "error" ? (_jsx(ErrorState, { message: state.error, authError: state.authError })) : null, state.status === "empty" ? (_jsx("p", { className: "empty site-animate-in", children: _jsx("span", { className: "site-animate-item", children: "Nothing published yet." }) })) : null, state.status === "success" ? (_jsxs(_Fragment, { children: [_jsx(BlogGrid, { blogs: state.data.items, theme: resolvedTheme, onSelect: onSelect, getHref: getHref, leadFirst: showLeadCard && state.data.items.length > 0 }), totalPages > 1 ? (_jsxs("div", { className: "pagination", children: [_jsx("button", { type: "button", disabled: page <= 1, onClick: () => setPage((value) => Math.max(1, value - 1)), children: "Previous" }), _jsxs("span", { children: ["Page ", page, " of ", totalPages] }), _jsx("button", { type: "button", disabled: page >= totalPages, onClick: () => setPage((value) => value + 1), children: "Next" })] })) : null] })) : null] })] })] })] }));
+}

package/dist/components/user/BlogSearch.d.ts

@@ -0,0 +1,8 @@
+import type { Blog, BlogComponentProps } from "../../types/user";
+export type BlogSearchProps = BlogComponentProps & {
+    onSelect?: (blog: Blog) => void;
+    getHref?: (blog: Blog) => string;
+    placeholder?: string;
+};
+export declare function BlogSearch({ config, theme, branding, className, onSelect, getHref, placeholder, }: BlogSearchProps): import("react").JSX.Element;
+//# sourceMappingURL=BlogSearch.d.ts.map

package/dist/components/user/BlogSearch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogSearch.d.ts","sourceRoot":"","sources":["../../../app/components/user/BlogSearch.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAIjE,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAAG;IACjD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,OAAO,EACP,WAA+B,GAChC,EAAE,eAAe,+BAoDjB"}

package/dist/components/user/BlogSearch.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { BlogClient } from "../../services";
+import { useAsync } from "../../hooks/useAsync";
+import { cx, themeVars } from "../../styles/userTheme";
+import { BlogGrid } from "./BlogCard";
+import { EmptyState, ErrorState, LoadingState, Scope } from "./internal/States";
+export function BlogSearch({ config, theme, branding, className, onSelect, getHref, placeholder = "Search posts...", }) {
+    const client = useMemo(() => new BlogClient(config), [config.apiUrl, config.publicApiKey, config.email, config.domain, config.timeoutMs]);
+    const [query, setQuery] = useState("");
+    const [submitted, setSubmitted] = useState("");
+    const state = useAsync(() => submitted
+        ? client.searchBlogs(submitted, { page: 1, page_size: 12 })
+        : Promise.resolve({ items: [], page: 1, pageSize: 12, total: 0 }), [client, submitted], (data) => submitted !== "" && data.items.length === 0);
+    return (_jsxs(Scope, { className: cx("bp-site-index", "bp-blog-search", branding?.className, className), style: themeVars(theme, branding), css: branding?.css, children: [_jsxs("form", { className: "bp-blog-search__form", onSubmit: (event) => {
+                    event.preventDefault();
+                    setSubmitted(query.trim());
+                }, style: { display: "flex", gap: "0.5rem", marginBottom: "1rem" }, children: [_jsx("input", { value: query, onChange: (event) => setQuery(event.target.value), placeholder: placeholder, "aria-label": "Search blogs", style: { flex: 1, padding: "0.6rem 0.75rem", borderRadius: "var(--bp-radius)" } }), _jsx("button", { type: "submit", children: "Search" })] }), !submitted ? _jsx("p", { className: "bp-state", children: "Enter a search term to find posts." }) : null, submitted && state.status === "loading" ? _jsx(LoadingState, { label: "Searching..." }) : null, state.status === "error" ? (_jsx(ErrorState, { message: state.error, authError: state.authError })) : null, state.status === "empty" ? _jsx(EmptyState, { label: "No matching posts." }) : null, state.status === "success" ? (_jsx(BlogGrid, { blogs: state.data.items, theme: theme, onSelect: onSelect, getHref: getHref })) : null] }));
+}

package/dist/components/user/BlogTags.d.ts

@@ -0,0 +1,6 @@
+import type { BlogComponentProps, Tag } from "../../types/user";
+export type BlogTagsProps = BlogComponentProps & {
+    onSelect?: (tag: Tag) => void;
+};
+export declare function BlogTags({ config, theme, branding, className, onSelect, }: BlogTagsProps): import("react").JSX.Element;
+//# sourceMappingURL=BlogTags.d.ts.map

package/dist/components/user/BlogTags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogTags.d.ts","sourceRoot":"","sources":["../../../app/components/user/BlogTags.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGhE,MAAM,MAAM,aAAa,GAAG,kBAAkB,GAAG;IAC/C,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,aAAa,+BAiCf"}

package/dist/components/user/BlogTags.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { BlogClient } from "../../services";
+import { useAsync } from "../../hooks/useAsync";
+import { cx, themeVars } from "../../styles/userTheme";
+import { EmptyState, ErrorState, LoadingState, Scope } from "./internal/States";
+export function BlogTags({ config, theme, branding, className, onSelect, }) {
+    const client = useMemo(() => new BlogClient(config), [config.apiUrl, config.publicApiKey, config.email, config.domain, config.timeoutMs]);
+    const state = useAsync(() => client.getTags(), [client], (data) => data.length === 0);
+    return (_jsxs(Scope, { className: cx("bp-blog-tags", branding?.className, className), style: themeVars(theme, branding), css: branding?.css, children: [state.status === "loading" ? _jsx(LoadingState, { label: "Loading tags..." }) : null, state.status === "error" ? (_jsx(ErrorState, { message: state.error, authError: state.authError })) : null, state.status === "empty" ? _jsx(EmptyState, { label: "No tags yet." }) : null, state.status === "success" ? (_jsx("div", { className: "bp-blog-tags__list", style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: state.data.map((tag) => (_jsx("button", { type: "button", onClick: () => onSelect?.(tag), children: tag.name }, tag.id))) })) : null] }));
+}

package/dist/components/user/FeaturedBlogs.d.ts

@@ -0,0 +1,8 @@
+import type { Blog, BlogComponentProps } from "../../types/user";
+export type FeaturedBlogsProps = BlogComponentProps & {
+    limit?: number;
+    onSelect?: (blog: Blog) => void;
+    getHref?: (blog: Blog) => string;
+};
+export declare function FeaturedBlogs({ config, theme, branding, className, limit, onSelect, getHref, }: FeaturedBlogsProps): import("react").JSX.Element;
+//# sourceMappingURL=FeaturedBlogs.d.ts.map

package/dist/components/user/FeaturedBlogs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeaturedBlogs.d.ts","sourceRoot":"","sources":["../../../app/components/user/FeaturedBlogs.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAIjE,MAAM,MAAM,kBAAkB,GAAG,kBAAkB,GAAG;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;CAClC,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAS,EACT,QAAQ,EACR,OAAO,GACR,EAAE,kBAAkB,+BA2BpB"}

package/dist/components/user/FeaturedBlogs.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { BlogClient } from "../../services";
+import { useAsync } from "../../hooks/useAsync";
+import { cx, themeVars } from "../../styles/userTheme";
+import { BlogGrid } from "./BlogCard";
+import { EmptyState, ErrorState, LoadingState, Scope } from "./internal/States";
+export function FeaturedBlogs({ config, theme, branding, className, limit = 3, onSelect, getHref, }) {
+    const client = useMemo(() => new BlogClient(config), [config.apiUrl, config.publicApiKey, config.email, config.domain, config.timeoutMs]);
+    const state = useAsync(() => client.getFeaturedBlogs(limit), [client, limit], (data) => data.length === 0);
+    return (_jsxs(Scope, { className: cx("bp-site-index", "bp-featured-blogs", branding?.className, className), style: themeVars(theme, branding), css: branding?.css, children: [state.status === "loading" ? _jsx(LoadingState, {}) : null, state.status === "error" ? (_jsx(ErrorState, { message: state.error, authError: state.authError })) : null, state.status === "empty" ? _jsx(EmptyState, {}) : null, state.status === "success" ? (_jsx(BlogGrid, { blogs: state.data, theme: theme, onSelect: onSelect, getHref: getHref })) : null] }));
+}

package/dist/components/user/RelatedBlogs.d.ts

@@ -0,0 +1,9 @@
+import type { Blog, BlogComponentProps } from "../../types/user";
+export type RelatedBlogsProps = BlogComponentProps & {
+    blog: Pick<Blog, "id" | "category_id">;
+    limit?: number;
+    onSelect?: (blog: Blog) => void;
+    getHref?: (blog: Blog) => string;
+};
+export declare function RelatedBlogs({ config, blog, theme, branding, className, limit, onSelect, getHref, }: RelatedBlogsProps): import("react").JSX.Element;
+//# sourceMappingURL=RelatedBlogs.d.ts.map

package/dist/components/user/RelatedBlogs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelatedBlogs.d.ts","sourceRoot":"","sources":["../../../app/components/user/RelatedBlogs.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAIjE,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG;IACnD,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,GAAG,aAAa,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;CAClC,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAS,EACT,QAAQ,EACR,OAAO,GACR,EAAE,iBAAiB,+BA2BnB"}

package/dist/components/user/RelatedBlogs.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { BlogClient } from "../../services";
+import { useAsync } from "../../hooks/useAsync";
+import { cx, themeVars } from "../../styles/userTheme";
+import { BlogGrid } from "./BlogCard";
+import { EmptyState, ErrorState, LoadingState, Scope } from "./internal/States";
+export function RelatedBlogs({ config, blog, theme, branding, className, limit = 3, onSelect, getHref, }) {
+    const client = useMemo(() => new BlogClient(config), [config.apiUrl, config.publicApiKey, config.email, config.domain, config.timeoutMs]);
+    const state = useAsync(() => client.getRelatedBlogs(blog, limit), [client, blog.id, blog.category_id, limit], (data) => data.length === 0);
+    return (_jsxs(Scope, { className: cx("bp-site-index", "bp-related-blogs", branding?.className, className), style: themeVars(theme, branding), css: branding?.css, children: [state.status === "loading" ? _jsx(LoadingState, {}) : null, state.status === "error" ? (_jsx(ErrorState, { message: state.error, authError: state.authError })) : null, state.status === "empty" ? _jsx(EmptyState, { label: "No related posts." }) : null, state.status === "success" ? (_jsx(BlogGrid, { blogs: state.data, theme: theme, onSelect: onSelect, getHref: getHref })) : null] }));
+}

package/dist/components/user/SiteMediaHero.d.ts

@@ -0,0 +1,14 @@
+import type { Blog } from "../../types/user";
+export type HeroSlide = {
+    blog: Blog;
+    href?: string;
+};
+type Props = {
+    slides: HeroSlide[];
+    siteName: string;
+    onSelect?: (blog: Blog) => void;
+};
+/** BlogUploader cinematic list hero — image slides + looping HeroFadeSlide copy. */
+export declare function SiteMediaHero({ slides: rawSlides, siteName, onSelect }: Props): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=SiteMediaHero.d.ts.map

package/dist/components/user/SiteMediaHero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SiteMediaHero.d.ts","sourceRoot":"","sources":["../../../app/components/user/SiteMediaHero.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAQ7C,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,KAAK,sCAyI7E"}