@canvas-digital/blog-sdk 2.0.0

package/dist/components/user/SiteMediaHero.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { formatDate } from "../../styles/userTheme";
+import { estimateReadingMinutes } from "./detail/toc";
+import { HeroFadeSlide } from "./detail/HeroFadeSlide";
+/** Matches `--hero-loop: 5s` on `.hero-fade-slide` so copy + slide stay in sync. */
+const HERO_LOOP_MS = 5000;
+/** BlogUploader cinematic list hero — image slides + looping HeroFadeSlide copy. */
+export function SiteMediaHero({ slides: rawSlides, siteName, onSelect }) {
+    const slides = useMemo(() => rawSlides.filter((s) => Boolean(s.blog.featured_image)), [rawSlides]);
+    const slideKey = slides.map((s) => s.blog.id).join("|");
+    const [index, setIndex] = useState(0);
+    const [reduceMotion, setReduceMotion] = useState(false);
+    useEffect(() => {
+        const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+        const sync = () => setReduceMotion(mq.matches);
+        sync();
+        mq.addEventListener("change", sync);
+        return () => mq.removeEventListener("change", sync);
+    }, []);
+    useEffect(() => {
+        if (reduceMotion || slides.length <= 1)
+            return;
+        const id = window.setInterval(() => {
+            setIndex((i) => (i + 1) % slides.length);
+        }, HERO_LOOP_MS);
+        return () => window.clearInterval(id);
+    }, [reduceMotion, slides.length, slideKey]);
+    useEffect(() => {
+        setIndex(0);
+    }, [slideKey]);
+    if (!slides.length)
+        return null;
+    const safeIndex = index % slides.length;
+    const { blog, href } = slides[safeIndex];
+    const category = blog.category?.name;
+    const eyebrow = category || siteName;
+    const excerpt = blog.excerpt || "";
+    const published = blog.published_at || blog.created_at;
+    const readingMinutes = estimateReadingMinutes([blog.excerpt, blog.content].filter(Boolean).join(" "));
+    const multi = slides.length > 1;
+    return (_jsxs("section", { className: "site-hero-media", "aria-labelledby": "site-hero-media-title", "aria-roledescription": multi ? "carousel" : undefined, children: [_jsxs("div", { className: "site-hero-media-bg", children: [slides.map(({ blog: slideBlog }, i) => (_jsx("div", { className: `site-hero-media-slide${i === safeIndex ? " is-active" : ""}`, "aria-hidden": i !== safeIndex, children: _jsx("img", { className: "site-hero-media-visual", src: slideBlog.featured_image, alt: "" }) }, slideBlog.id))), _jsx("div", { className: "site-hero-media-scrim", "aria-hidden": "true" }), _jsx("div", { className: "site-hero-media-grain", "aria-hidden": "true" })] }), _jsxs("div", { className: "site-hero-media-content", children: [_jsxs("div", { className: "site-hero-media-copy", children: [_jsx(HeroFadeSlide, { from: "left", delayMs: 100, children: _jsx("p", { className: "site-hero-media-eyebrow", children: eyebrow }) }), _jsx(HeroFadeSlide, { from: "left", delayMs: 260, children: _jsx("h1", { id: "site-hero-media-title", className: "site-hero-media-title", children: blog.title }) }), excerpt ? (_jsx(HeroFadeSlide, { from: "right", delayMs: 420, children: _jsx("p", { className: "site-hero-media-desc", children: excerpt }) })) : null, _jsx(HeroFadeSlide, { from: "left", delayMs: excerpt ? 580 : 420, className: "site-hero-media-meta-wrap", children: _jsxs("div", { className: "site-hero-media-meta", children: [published ? _jsx("time", { dateTime: published, children: formatDate(published) }) : null, readingMinutes ? (_jsxs("span", { className: "site-hero-media-reading", children: [readingMinutes, " min read"] })) : null] }) }), _jsx(HeroFadeSlide, { from: "left", delayMs: excerpt ? 700 : 540, children: href ? (_jsxs("a", { href: href, className: "site-hero-media-cta", children: [_jsx("span", { className: "site-hero-media-cta-label", children: "Read story" }), _jsx("span", { className: "site-hero-media-cta-arrow", "aria-hidden": "true", children: "\u2192" })] })) : (_jsxs("button", { type: "button", className: "site-hero-media-cta", onClick: () => onSelect?.(blog), children: [_jsx("span", { className: "site-hero-media-cta-label", children: "Read story" }), _jsx("span", { className: "site-hero-media-cta-arrow", "aria-hidden": "true", children: "\u2192" })] })) })] }, blog.id), multi ? (_jsx("div", { className: "site-hero-media-dots", role: "tablist", "aria-label": "Featured posts", children: slides.map(({ blog: slideBlog }, i) => (_jsx("button", { type: "button", role: "tab", className: `site-hero-media-dot${i === safeIndex ? " is-active" : ""}`, "aria-selected": i === safeIndex, "aria-label": `Show ${slideBlog.title}`, onClick: () => setIndex(i) }, slideBlog.id))) })) : null] }), _jsx("div", { className: "site-hero-media-edge", "aria-hidden": "true" })] }));
+}

package/dist/components/user/detail/ArticleDetailHero.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+export type AuthorChip = {
+    id: string;
+    name: string;
+    avatarUrl?: string | null;
+};
+type Props = {
+    homeHref: string;
+    homeLabel: string;
+    category?: {
+        slug: string;
+        name: string;
+    } | null;
+    categoryHref?: string | null;
+    title: string;
+    excerpt?: string | null;
+    publishedAt?: string | null;
+    readingMinutes?: number | null;
+    authors: AuthorChip[];
+    mediaUrl?: string | null;
+    mediaAlt?: string;
+    mediaCaption?: string | null;
+    formatHero?: ReactNode;
+    onBack?: () => void;
+    onHome?: () => void;
+    onCategory?: (slug: string) => void;
+};
+export declare function ArticleDetailHero({ homeHref, homeLabel, category, categoryHref, title, excerpt, publishedAt, readingMinutes, authors, mediaUrl, mediaAlt, mediaCaption, formatHero, onBack, onHome, onCategory, }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ArticleDetailHero.d.ts.map

package/dist/components/user/detail/ArticleDetailHero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleDetailHero.d.ts","sourceRoot":"","sources":["../../../../app/components/user/detail/ArticleDetailHero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,OAAO,EACP,WAAW,EACX,cAAc,EACd,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,MAAM,EACN,MAAM,EACN,UAAU,GACX,EAAE,KAAK,+BA0JP"}

package/dist/components/user/detail/ArticleDetailHero.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { HeroFadeSlide } from "./HeroFadeSlide";
+import { BackButton } from "./BackButton";
+import { articleFormatDate } from "./toc";
+export function ArticleDetailHero({ homeHref, homeLabel, category, categoryHref, title, excerpt, publishedAt, readingMinutes, authors, mediaUrl, mediaAlt, mediaCaption, formatHero, onBack, onHome, onCategory, }) {
+    const isBlogDetails = !mediaUrl && !formatHero;
+    const homeEl = onHome ? (_jsx("button", { type: "button", className: "bp-linkish", onClick: onHome, style: { color: "inherit", background: "none", border: 0, padding: 0, cursor: "pointer", font: "inherit" }, children: homeLabel })) : (_jsx("a", { href: homeHref, style: { color: "inherit", textDecoration: "none" }, children: homeLabel }));
+    const catEl = category ? (categoryHref || onCategory ? (onCategory ? (_jsx("button", { type: "button", onClick: () => onCategory(category.slug), style: { color: "inherit", background: "none", border: 0, padding: 0, cursor: "pointer", font: "inherit", textDecoration: "none" }, children: category.name })) : (_jsx("a", { href: categoryHref, style: { color: "inherit", textDecoration: "none" }, children: category.name }))) : (_jsx("span", { children: category.name }))) : null;
+    return (_jsxs("section", { className: `article-detail-hero${isBlogDetails ? " blog-details-hero" : ""}`, "aria-labelledby": "article-hero-title", style: isBlogDetails
+            ? { backgroundColor: "#0B4A75", color: "#fff", paddingTop: 40, paddingBottom: 60 }
+            : undefined, children: [mediaUrl ? (_jsxs("figure", { className: "article-hero-media", children: [_jsx("img", { className: "article-hero-visual", src: mediaUrl, alt: mediaAlt || title }), mediaCaption ? _jsx("figcaption", { className: "article-hero-caption", children: mediaCaption }) : null] })) : formatHero ? (_jsx("div", { className: "article-hero-media article-hero-format", children: formatHero })) : null, _jsx("header", { className: "article-hero-copy", children: _jsxs("div", { className: "article-hero-copy-inner", style: { maxWidth: 1200, margin: "0 auto", width: "100%" }, children: [_jsx(HeroFadeSlide, { from: "left", delayMs: 80, children: _jsxs("ul", { className: "breadcrumb", style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    flexWrap: "wrap",
+                                    gap: 8,
+                                    listStyle: "none",
+                                    padding: 0,
+                                    margin: "0 0 40px 0",
+                                    color: isBlogDetails ? "#fff" : "inherit",
+                                    fontSize: "0.9rem",
+                                }, children: [_jsx("li", { children: homeEl }), category ? (_jsxs(_Fragment, { children: [_jsx("li", { "aria-hidden": "true", style: { opacity: 0.6, fontSize: "0.8em" }, children: "\u2794" }), _jsx("li", { children: catEl })] })) : null, _jsx("li", { "aria-hidden": "true", style: { opacity: 0.6, fontSize: "0.8em" }, children: "\u2794" }), _jsx("li", { style: { opacity: 0.9 }, children: title })] }) }), category && !isBlogDetails ? (_jsx(HeroFadeSlide, { from: "left", delayMs: 180, children: _jsx("p", { className: "eyebrow", children: category.name }) })) : null, _jsx(HeroFadeSlide, { from: "left", delayMs: category ? 300 : 220, children: _jsxs("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: isBlogDetails ? "center" : "flex-start",
+                                    gap: 16,
+                                    marginBottom: 24,
+                                    textAlign: isBlogDetails ? "center" : "left",
+                                }, children: [!isBlogDetails ? _jsx(BackButton, { onBack: onBack }) : null, _jsx("h1", { id: "article-hero-title", className: "article-hero-title", style: { margin: 0, color: isBlogDetails ? "#fff" : "inherit" }, children: title })] }) }), excerpt ? (_jsx(HeroFadeSlide, { from: "right", delayMs: category ? 460 : 380, children: _jsx("p", { className: "standfirst article-hero-standfirst", children: excerpt }) })) : null, _jsx(HeroFadeSlide, { from: "left", delayMs: excerpt ? 620 : 500, children: _jsxs("div", { className: "byline-row", children: [authors.length ? (_jsx("div", { className: "byline-faces", children: authors.map((a) => a.avatarUrl ? (_jsx("img", { src: a.avatarUrl, alt: "", width: 34, height: 34 }, a.id)) : (_jsx("span", { className: "face-fallback", "aria-hidden": "true", children: a.name.slice(0, 1) }, a.id))) })) : null, _jsxs("div", { className: "byline-text", children: [authors.length ? (_jsx("span", { className: "by", children: authors.map((a) => a.name).join(" and ") })) : null, _jsxs("span", { className: "meta", children: [publishedAt ? (_jsx("time", { dateTime: publishedAt, children: articleFormatDate(publishedAt) })) : null, readingMinutes ? _jsxs("span", { children: [readingMinutes, " min read"] }) : null] })] })] }) })] }) })] }));
+}

package/dist/components/user/detail/ArticleRailDetails.d.ts

@@ -0,0 +1,24 @@
+export type RailOwner = {
+    id: string;
+    name: string;
+    jobTitle?: string | null;
+    bio?: string | null;
+    avatarUrl?: string | null;
+};
+export type RailRelatedPost = {
+    id: string;
+    title?: string | null;
+    slug: string;
+    publishedAt?: string | null;
+    readingMinutes?: number | null;
+};
+type Props = {
+    owners: RailOwner[];
+    related: RailRelatedPost[];
+    hrefFor: (slug: string) => string;
+    onSelect?: (slug: string) => void;
+    className?: string;
+};
+export declare function ArticleRailDetails({ owners, related, hrefFor, onSelect, className }: Props): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=ArticleRailDetails.d.ts.map

package/dist/components/user/detail/ArticleRailDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleRailDetails.d.ts","sourceRoot":"","sources":["../../../../app/components/user/detail/ArticleRailDetails.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,KAAK,sCA6E1F"}

package/dist/components/user/detail/ArticleRailDetails.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { relativeTime } from "./toc";
+export function ArticleRailDetails({ owners, related, hrefFor, onSelect, className }) {
+    if (!owners.length && !related.length)
+        return null;
+    return (_jsxs("div", { className: `article-rail-details${className ? ` ${className}` : ""}`, children: [owners.length ? (_jsxs("section", { className: "rail-owner-panel", "aria-label": "Post owner", children: [_jsx("div", { className: "rail-related-head", children: _jsx("h3", { children: owners.length > 1 ? "Authors" : "Owner" }) }), _jsx("ul", { className: "rail-owner-list", children: owners.map((owner) => (_jsxs("li", { className: "rail-owner", children: [owner.avatarUrl ? (_jsx("img", { src: owner.avatarUrl, alt: "", width: 40, height: 40 })) : (_jsx("span", { className: "rail-owner-fallback", "aria-hidden": "true", children: owner.name
+                                        .split(/\s+/)
+                                        .filter(Boolean)
+                                        .slice(0, 2)
+                                        .map((p) => p[0]?.toUpperCase() ?? "")
+                                        .join("") || "?" })), _jsxs("div", { className: "rail-owner-body", children: [_jsx("p", { className: "rail-owner-name", children: owner.name }), owner.jobTitle ? _jsx("p", { className: "rail-owner-role", children: owner.jobTitle }) : null, owner.bio ? _jsx("p", { className: "rail-owner-bio", children: owner.bio }) : null] })] }, owner.id))) })] })) : null, related.length ? (_jsxs("section", { className: "rail-related-panel", "aria-label": "Related posts", children: [_jsx("div", { className: "rail-related-head", children: _jsx("h3", { children: "Related posts" }) }), _jsx("div", { className: "rail-related-rows", children: related.map((item) => (_jsx("div", { className: "rail-related-row", children: _jsxs("div", { className: "rail-related-row-main", children: [onSelect ? (_jsx("button", { type: "button", className: "rail-related-t", onClick: () => onSelect(item.slug), children: item.title })) : (_jsx("a", { className: "rail-related-t", href: hrefFor(item.slug), children: item.title })), _jsxs("div", { className: "rail-related-sub", children: [_jsx("span", { children: relativeTime(item.publishedAt) }), item.readingMinutes ? _jsxs("span", { children: [item.readingMinutes, " min"] }) : null, onSelect ? (_jsx("button", { type: "button", className: "bp-linkish", onClick: () => onSelect(item.slug), children: "View \u2197" })) : (_jsx("a", { href: hrefFor(item.slug), children: "View \u2197" }))] })] }) }, item.id))) })] })) : null] }));
+}

package/dist/components/user/detail/BackButton.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties } from "react";
+export declare function BackButton({ className, style, onBack, }: {
+    className?: string;
+    style?: CSSProperties;
+    onBack?: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=BackButton.d.ts.map

package/dist/components/user/detail/BackButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../../app/components/user/detail/BackButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,MAAM,GACP,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,+BA4BA"}

package/dist/components/user/detail/BackButton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function BackButton({ className, style, onBack, }) {
+    return (_jsx("button", { type: "button", onClick: () => (onBack ? onBack() : typeof history !== "undefined" && history.back()), className: className, style: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 40,
+            height: 40,
+            background: "var(--bp-paper, #fff)",
+            border: "1px solid var(--bp-rule, #e2e8f0)",
+            borderRadius: "50%",
+            cursor: "pointer",
+            color: "var(--bp-ink, #0f172a)",
+            boxShadow: "0 1px 2px rgba(15,23,42,0.06)",
+            flexShrink: 0,
+            ...style,
+        }, "aria-label": "Go back", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) }) }));
+}

package/dist/components/user/detail/CommentSection.d.ts

@@ -0,0 +1,28 @@
+export type PublicComment = {
+    id: string;
+    authorName: string;
+    body: string;
+    createdAt: string;
+};
+export type CommentSubmitInput = {
+    postId: string;
+    authorName: string;
+    authorEmail: string;
+    body: string;
+    website: string;
+};
+export type CommentSubmitResult = {
+    pending?: boolean;
+    message?: string;
+    comment?: PublicComment;
+};
+type Props = {
+    postId: string;
+    allowComments: boolean;
+    initialComments?: PublicComment[];
+    /** Optional host API. If omitted, comments are accepted locally as pending. */
+    onSubmitComment?: (input: CommentSubmitInput) => Promise<CommentSubmitResult>;
+};
+export declare function CommentSection({ postId, allowComments, initialComments, onSubmitComment, }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=CommentSection.d.ts.map

package/dist/components/user/detail/CommentSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentSection.d.ts","sourceRoot":"","sources":["../../../../app/components/user/detail/CommentSection.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AASF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,aAAa,EAAE,CAAC;IAClC,+EAA+E;IAC/E,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;CAC/E,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,aAAa,EACb,eAAoB,EACpB,eAAe,GAChB,EAAE,KAAK,+BA4JP"}

package/dist/components/user/detail/CommentSection.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { articleFormatDate } from "./toc";
+const initialsFor = (name) => {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (!parts.length)
+        return "?";
+    if (parts.length === 1)
+        return parts[0].slice(0, 2).toUpperCase();
+    return `${parts[0][0] ?? ""}${parts[parts.length - 1][0] ?? ""}`.toUpperCase();
+};
+export function CommentSection({ postId, allowComments, initialComments = [], onSubmitComment, }) {
+    const [comments, setComments] = useState(initialComments);
+    const [name, setName] = useState("");
+    const [email, setEmail] = useState("");
+    const [body, setBody] = useState("");
+    const [website, setWebsite] = useState("");
+    const [error, setError] = useState(null);
+    const [flash, setFlash] = useState(null);
+    const [pending, setPending] = useState(false);
+    useEffect(() => {
+        setComments(initialComments);
+    }, [initialComments]);
+    if (!allowComments) {
+        return (_jsxs("section", { className: "comments", id: "comments", "aria-labelledby": "comments-heading", children: [_jsx("h2", { id: "comments-heading", children: "Comments" }), _jsx("p", { className: "comments-closed", children: "Comments are closed for this post." })] }));
+    }
+    const submit = () => {
+        setError(null);
+        setFlash(null);
+        if (!name.trim() || !body.trim()) {
+            setError("Name and comment are required.");
+            return;
+        }
+        void (async () => {
+            setPending(true);
+            try {
+                const input = {
+                    postId,
+                    authorName: name.trim(),
+                    authorEmail: email.trim(),
+                    body: body.trim(),
+                    website,
+                };
+                const data = onSubmitComment
+                    ? await onSubmitComment(input)
+                    : {
+                        pending: true,
+                        message: "Thanks — your comment is awaiting approval.",
+                    };
+                if (data.comment && !data.pending) {
+                    setComments((list) => [...list, data.comment]);
+                    setFlash("Thanks — your comment is live.");
+                }
+                else {
+                    setFlash(data.message || "Thanks — your comment is awaiting approval.");
+                }
+                setBody("");
+            }
+            catch {
+                setError("Network error. Please try again.");
+            }
+            finally {
+                setPending(false);
+            }
+        })();
+    };
+    return (_jsxs("section", { className: "comments", id: "comments", "aria-labelledby": "comments-heading", children: [_jsxs("h2", { id: "comments-heading", children: ["Comments", comments.length ? _jsxs("span", { className: "comments-count", children: [" (", comments.length, ")"] }) : null] }), comments.length === 0 ? (_jsx("p", { className: "comments-empty", children: "No comments yet. Be the first to share your thoughts." })) : (_jsx("ul", { className: "comments-list", children: comments.map((c) => (_jsx("li", { className: "comment-item", children: _jsxs("div", { className: "comment-profile", children: [_jsx("span", { className: "comment-avatar", "aria-hidden": "true", children: initialsFor(c.authorName) }), _jsxs("div", { className: "comment-profile-body", children: [_jsxs("div", { className: "comment-meta", children: [_jsx("strong", { className: "comment-author", children: c.authorName }), _jsx("time", { dateTime: c.createdAt, children: articleFormatDate(c.createdAt) })] }), _jsx("p", { className: "comment-body", children: c.body })] })] }) }, c.id))) })), _jsxs("div", { className: "comment-form", children: [_jsx("h3", { className: "comment-form-title", children: "Leave a comment" }), error ? (_jsx("p", { className: "comment-error", role: "alert", children: error })) : null, flash ? (_jsx("p", { className: "comment-ok", role: "status", children: flash })) : null, _jsxs("label", { className: "comment-hp", "aria-hidden": "true", children: ["Website", _jsx("input", { tabIndex: -1, autoComplete: "off", value: website, onChange: (e) => setWebsite(e.target.value) })] }), _jsxs("div", { className: "comment-form-grid", children: [_jsxs("label", { children: [_jsx("span", { children: "Name" }), _jsx("input", { value: name, onChange: (e) => setName(e.target.value), maxLength: 80, required: true, autoComplete: "name" })] }), _jsxs("label", { children: [_jsxs("span", { children: ["Email ", _jsx("em", { children: "(optional, never shown)" })] }), _jsx("input", { type: "email", value: email, onChange: (e) => setEmail(e.target.value), autoComplete: "email" })] })] }), _jsxs("label", { className: "comment-body-field", children: [_jsx("span", { children: "Comment" }), _jsx("textarea", { rows: 5, value: body, onChange: (e) => setBody(e.target.value), maxLength: 4000, required: true })] }), _jsx("button", { type: "button", className: "comment-submit", disabled: pending, onClick: submit, children: pending ? "Posting…" : "Post comment" }), _jsx("p", { className: "comment-moderation-note", children: "Comments are reviewed before they appear on this post." })] })] }));
+}

package/dist/components/user/detail/HeroFadeSlide.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+    delayMs?: number;
+    /** Enter from the left (moves left → right) or from the right (moves right → left). */
+    from?: "left" | "right";
+    className?: string;
+};
+/** BlogUploader looping fade/slide wrapper used on list media hero + article detail. */
+export declare function HeroFadeSlide({ children, delayMs, from, className }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=HeroFadeSlide.d.ts.map

package/dist/components/user/detail/HeroFadeSlide.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroFadeSlide.d.ts","sourceRoot":"","sources":["../../../../app/components/user/detail/HeroFadeSlide.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uFAAuF;IACvF,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wFAAwF;AACxF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,OAAW,EAAE,IAAa,EAAE,SAAS,EAAE,EAAE,KAAK,+BASvF"}

package/dist/components/user/detail/HeroFadeSlide.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** BlogUploader looping fade/slide wrapper used on list media hero + article detail. */
+export function HeroFadeSlide({ children, delayMs = 0, from = "left", className }) {
+    return (_jsx("div", { className: `hero-fade-slide hero-fade-slide-${from}${className ? ` ${className}` : ""}`.trim(), style: { ["--slide-delay"]: `${delayMs}ms` }, children: children }));
+}

package/dist/components/user/detail/ReadingProgress.d.ts

@@ -0,0 +1,2 @@
+export declare function ReadingProgress(): import("react").JSX.Element;
+//# sourceMappingURL=ReadingProgress.d.ts.map

package/dist/components/user/detail/ReadingProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReadingProgress.d.ts","sourceRoot":"","sources":["../../../../app/components/user/detail/ReadingProgress.tsx"],"names":[],"mappings":"AAEA,wBAAgB,eAAe,gCAuB9B"}

package/dist/components/user/detail/ReadingProgress.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+export function ReadingProgress() {
+    const [pct, setPct] = useState(0);
+    useEffect(() => {
+        const update = () => {
+            const doc = document.documentElement;
+            const scrollable = doc.scrollHeight - doc.clientHeight;
+            setPct(scrollable > 0 ? Math.min(100, (doc.scrollTop / scrollable) * 100) : 0);
+        };
+        update();
+        window.addEventListener("scroll", update, { passive: true });
+        window.addEventListener("resize", update);
+        return () => {
+            window.removeEventListener("scroll", update);
+            window.removeEventListener("resize", update);
+        };
+    }, []);
+    return (_jsx("div", { className: "progress", "aria-hidden": "true", children: _jsx("span", { style: { width: `${pct}%` } }) }));
+}

package/dist/components/user/detail/ShareRow.d.ts

@@ -0,0 +1,7 @@
+export declare function ShareRow({ title, slug, origin, path, }: {
+    title: string;
+    slug: string;
+    origin: string;
+    path?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ShareRow.d.ts.map

package/dist/components/user/detail/ShareRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareRow.d.ts","sourceRoot":"","sources":["../../../../app/components/user/detail/ShareRow.tsx"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,IAAI,GACL,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,+BAoCA"}

package/dist/components/user/detail/ShareRow.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ShareRow({ title, slug, origin, path, }) {
+    const url = `${origin}${path ?? `/blogs/${slug}`}`;
+    const encoded = encodeURIComponent(url);
+    const text = encodeURIComponent(title);
+    return (_jsxs("div", { className: "share", children: [_jsx("span", { className: "share-label", children: "Share" }), _jsx("a", { href: `https://www.linkedin.com/sharing/share-offsite/?url=${encoded}`, target: "_blank", rel: "noreferrer noopener", children: "LinkedIn" }), _jsx("a", { href: `https://x.com/intent/tweet?url=${encoded}&text=${text}`, target: "_blank", rel: "noreferrer noopener", children: "X" }), _jsx("a", { href: `https://api.whatsapp.com/send?text=${text}%20${encoded}`, target: "_blank", rel: "noreferrer noopener", children: "WhatsApp" }), _jsx("a", { href: `mailto:?subject=${text}&body=${encoded}`, children: "Email" }), _jsxs("details", { className: "share-copy", children: [_jsx("summary", { children: "Copy link" }), _jsx("input", { readOnly: true, value: url, "aria-label": "Article URL" })] })] }));
+}

package/dist/components/user/detail/toc.d.ts

@@ -0,0 +1,14 @@
+export type TocHeading = {
+    id: string;
+    text: string;
+    level: 2 | 3;
+};
+export declare const headingId: (text: string) => string;
+/** Extract h2/h3 headings from HTML for the on-this-page rail. */
+export declare function extractHeadingsFromHtml(html: string): TocHeading[];
+/** Ensure h2/h3 in HTML have stable ids matching extractHeadingsFromHtml. */
+export declare function injectHeadingIds(html: string, headings: TocHeading[]): string;
+export declare function estimateReadingMinutes(html: string): number;
+export declare function relativeTime(value?: string | Date | null): string;
+export declare function articleFormatDate(value?: string | null): string;
+//# sourceMappingURL=toc.d.ts.map

package/dist/components/user/detail/toc.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toc.d.ts","sourceRoot":"","sources":["../../../../app/components/user/detail/toc.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAA;CAAE,CAAC;AAWpE,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,KAAG,MAA8B,CAAC;AAExE,kEAAkE;AAClE,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,EAAE,CAkBlE;AAoBD,6EAA6E;AAC7E,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,MAAM,CAa7E;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAQ3D;AAED,wBAAgB,YAAY,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAUjE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAU/D"}

package/dist/components/user/detail/toc.js

@@ -0,0 +1,106 @@
+const slugify = (text) => text
+    .toLowerCase()
+    .normalize("NFKD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 60) || "section";
+export const headingId = (text) => `h-${slugify(text)}`;
+/** Extract h2/h3 headings from HTML for the on-this-page rail. */
+export function extractHeadingsFromHtml(html) {
+    if (typeof document === "undefined") {
+        return extractHeadingsFromHtmlRegex(html);
+    }
+    const root = document.createElement("div");
+    root.innerHTML = html;
+    const out = [];
+    const seen = new Set();
+    root.querySelectorAll("h2, h3").forEach((el) => {
+        const text = (el.textContent ?? "").trim();
+        if (!text)
+            return;
+        let id = headingId(text);
+        let n = 2;
+        while (seen.has(id))
+            id = `${headingId(text)}-${n++}`;
+        seen.add(id);
+        out.push({ id, text, level: el.tagName === "H3" ? 3 : 2 });
+    });
+    return out;
+}
+function extractHeadingsFromHtmlRegex(html) {
+    const out = [];
+    const seen = new Set();
+    const re = /<h([23])([^>]*)>([\s\S]*?)<\/h\1>/gi;
+    let m;
+    while ((m = re.exec(html))) {
+        const level = Number(m[1]);
+        const text = m[3].replace(/<[^>]+>/g, "").trim();
+        if (!text)
+            continue;
+        let id = headingId(text);
+        let n = 2;
+        while (seen.has(id))
+            id = `${headingId(text)}-${n++}`;
+        seen.add(id);
+        out.push({ id, text, level });
+    }
+    return out;
+}
+/** Ensure h2/h3 in HTML have stable ids matching extractHeadingsFromHtml. */
+export function injectHeadingIds(html, headings) {
+    if (!headings.length)
+        return html;
+    let i = 0;
+    return html.replace(/<h([23])([^>]*)>([\s\S]*?)<\/h\1>/gi, (full, level, attrs, inner) => {
+        const text = String(inner).replace(/<[^>]+>/g, "").trim();
+        if (!text)
+            return full;
+        const heading = headings[i++];
+        if (!heading)
+            return full;
+        if (/\sid\s*=/.test(attrs)) {
+            return `<h${level}${attrs.replace(/\sid\s*=\s*(["']).*?\1/, ` id="${heading.id}"`)}>${inner}</h${level}>`;
+        }
+        return `<h${level}${attrs} id="${heading.id}">${inner}</h${level}>`;
+    });
+}
+export function estimateReadingMinutes(html) {
+    const words = html
+        .replace(/<[^>]+>/g, " ")
+        .replace(/\s+/g, " ")
+        .trim()
+        .split(" ")
+        .filter(Boolean).length;
+    return Math.max(1, Math.round(words / 220));
+}
+export function relativeTime(value) {
+    if (!value)
+        return "—";
+    const date = typeof value === "string" ? new Date(value) : value;
+    if (Number.isNaN(date.getTime()))
+        return "—";
+    const days = Math.floor((Date.now() - date.getTime()) / 86400000);
+    if (days <= 0)
+        return "today";
+    if (days === 1)
+        return "yesterday";
+    if (days < 30)
+        return `${days}d ago`;
+    if (days < 365)
+        return `${Math.floor(days / 30)}mo ago`;
+    return `${Math.floor(days / 365)}y ago`;
+}
+export function articleFormatDate(value) {
+    if (!value)
+        return "";
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return value;
+    return new Intl.DateTimeFormat("en-GB", {
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+        timeZone: "UTC",
+    }).format(date);
+}

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

@@ -0,0 +1,14 @@
+export * from "./BlogList";
+export * from "./BlogDetail";
+export * from "./BlogSearch";
+export * from "./BlogCategories";
+export * from "./BlogTags";
+export * from "./FeaturedBlogs";
+export * from "./RelatedBlogs";
+export * from "./SiteMediaHero";
+export * from "./detail/ArticleDetailHero";
+export * from "./detail/ArticleRailDetails";
+export * from "./detail/ShareRow";
+export * from "./detail/CommentSection";
+export * from "./detail/ReadingProgress";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../app/components/user/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC"}

package/dist/components/user/index.js

@@ -0,0 +1,13 @@
+export * from "./BlogList";
+export * from "./BlogDetail";
+export * from "./BlogSearch";
+export * from "./BlogCategories";
+export * from "./BlogTags";
+export * from "./FeaturedBlogs";
+export * from "./RelatedBlogs";
+export * from "./SiteMediaHero";
+export * from "./detail/ArticleDetailHero";
+export * from "./detail/ArticleRailDetails";
+export * from "./detail/ShareRow";
+export * from "./detail/CommentSection";
+export * from "./detail/ReadingProgress";

package/dist/components/user/internal/States.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties, ReactNode } from "react";
+export declare function LoadingState({ label }: {
+    label?: string;
+}): import("react").JSX.Element;
+export declare function ErrorState({ message, authError, }: {
+    message: string;
+    authError?: boolean;
+}): import("react").JSX.Element;
+export declare function EmptyState({ label }: {
+    label?: string;
+}): import("react").JSX.Element;
+export declare function Scope({ className, style, css, children, }: {
+    className?: string;
+    style?: CSSProperties;
+    css?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=States.d.ts.map

package/dist/components/user/internal/States.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"States.d.ts","sourceRoot":"","sources":["../../../../app/components/user/internal/States.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,wBAAgB,YAAY,CAAC,EAAE,KAAoB,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAMxE;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,SAAS,GACV,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,+BAQA;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAyB,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAM3E;AAED,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,KAAK,EACL,GAAG,EACH,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAeA"}

package/dist/components/user/internal/States.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "../../../styles/userTheme";
+export function LoadingState({ label = "Loading..." }) {
+    return (_jsx("div", { className: "bp-state bp-state--loading", role: "status", children: label }));
+}
+export function ErrorState({ message, authError, }) {
+    return (_jsx("div", { className: "bp-state bp-state--error", role: "alert", children: authError
+            ? "Authentication failed. Check the public API key."
+            : message || "Something went wrong." }));
+}
+export function EmptyState({ label = "No posts found." }) {
+    return (_jsx("div", { className: "bp-state bp-state--empty", children: label }));
+}
+export function Scope({ className, style, css, children, }) {
+    return (_jsxs("div", { className: cx("bp-root", className), style: {
+            width: "100%",
+            maxWidth: "100%",
+            boxSizing: "border-box",
+            ...style,
+        }, children: [css ? _jsx("style", { children: css }) : null, children] }));
+}

package/dist/constants/index.d.ts

@@ -0,0 +1,4 @@
+/** Shared SDK constants. */
+export declare const SDK_NAME = "@canvas-digital/blog-sdk";
+export declare const DEFAULT_PAGE_SIZE = 12;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../app/constants/index.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,eAAO,MAAM,QAAQ,6BAA6B,CAAC;AACnD,eAAO,MAAM,iBAAiB,KAAK,CAAC"}

package/dist/constants/index.js

@@ -0,0 +1,3 @@
+/** Shared SDK constants. */
+export const SDK_NAME = "@canvas-digital/blog-sdk";
+export const DEFAULT_PAGE_SIZE = 12;

package/dist/hooks/index.d.ts

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

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

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

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export * from "./useAsync";