@burdenoff/website-sdk 2026.703.2 → 2026.709.2

package/dist/content/index.mjs

@@ -1,6 +1,12 @@
-import { createContext, useState, useCallback, useEffect, useContext } from 'react';
+import * as React from 'react';
+import { createContext, useState, useCallback, useEffect, useContext, useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Helmet } from 'react-helmet-async';
+import { History, Search, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -1121,6 +1127,65 @@ function CaseStudyPage(props) {
     ] })
   ] });
 }
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Input = React.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
 var CHANGELOG_TAG = "changelog";
 var CHANGELOG_LIST_QUERY = `
   query ChangelogList($productId: String!, $limit: Int, $offset: Int) {
@@ -1166,21 +1231,17 @@ function sortByDateDesc(a, b) {
   const db = new Date(b.publishedAt || b.lastUpdated || 0).getTime();
   return db - da;
 }
-function ChangelogPage(props) {
-  const {
-    productName,
-    heroEyebrow = "What's new",
-    heroTitle = "Changelog",
-    heroSubtitle = "Platform updates, improvements, and announcements \u2014 newest first.",
-    ctaTitle,
-    ctaSubtitle,
-    ctaHref,
-    ctaLabel,
-    className = "",
-    seoTitle,
-    seoDescription,
-    seoKeywords
-  } = props;
+function normalize(value) {
+  return value.toLowerCase().trim();
+}
+function paginate(items, page, pageSize) {
+  const start = (page - 1) * pageSize;
+  return items.slice(start, start + pageSize);
+}
+function parseEntryDate(date) {
+  return new Date(date).getTime();
+}
+function useCmsChangelog() {
   const client = useWebSDK();
   const config = useWebSDKConfig();
   const { product } = useProduct();
@@ -1189,7 +1250,10 @@ function ChangelogPage(props) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const fetchEntries = useCallback(async () => {
-    if (!resolvedProductId) return;
+    if (!resolvedProductId) {
+      setLoading(false);
+      return;
+    }
     setLoading(true);
     try {
       const listResult = await client.query(CHANGELOG_LIST_QUERY, {
@@ -1231,93 +1295,320 @@ function ChangelogPage(props) {
   useEffect(() => {
     fetchEntries();
   }, [fetchEntries]);
+  return { entries, loading, error };
+}
+function CmsTimeline(props) {
+  const { entries, loading, error } = props;
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "max-w-3xl mx-auto space-y-12", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "rounded-2xl border border-border/40 bg-card overflow-hidden animate-pulse",
+        children: /* @__PURE__ */ jsxs("div", { className: "p-6 sm:p-8 space-y-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-3 bg-muted rounded w-1/3" }),
+          /* @__PURE__ */ jsx("div", { className: "h-6 bg-muted rounded w-2/3" }),
+          /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded" }),
+          /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-5/6" })
+        ] })
+      },
+      i
+    )) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "text-center py-12", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: error }) });
+  }
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "text-center py-12", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No changelog entries yet. Check back soon!" }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "max-w-3xl mx-auto space-y-12", children: entries.map((entry) => /* @__PURE__ */ jsxs(
+    "article",
+    {
+      id: entry.slug,
+      className: "rounded-2xl border border-border/40 bg-card overflow-hidden scroll-mt-24",
+      children: [
+        entry.thumbnail && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: entry.thumbnail,
+            alt: "",
+            width: 1024,
+            height: 576,
+            loading: "lazy",
+            decoding: "async",
+            className: "w-full aspect-video object-cover border-b border-border/40"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "p-6 sm:p-8", children: [
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mb-2", children: [
+            entry.publishedAt && /* @__PURE__ */ jsx("time", { dateTime: entry.publishedAt, children: formatDate(entry.publishedAt || entry.lastUpdated) }),
+            entry.author && /* @__PURE__ */ jsxs(Fragment, { children: [
+              " \xB7 ",
+              entry.author
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("h2", { className: "text-xl sm:text-2xl font-bold text-foreground mb-4", children: entry.title }),
+          entry.content ? /* @__PURE__ */ jsx("div", { className: "prose prose-sm prose-gray dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx(
+            ContentRenderer,
+            {
+              content: entry.content,
+              format: entry.contentFormat
+            }
+          ) }) : entry.excerpt && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground leading-relaxed", children: entry.excerpt })
+        ] })
+      ]
+    },
+    entry.id
+  )) });
+}
+function EntryContent({ content }) {
+  if (typeof content === "string") {
+    return /* @__PURE__ */ jsx("div", { className: "prose prose-sm prose-gray dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx(ContentRenderer, { content, format: "markdown" }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "prose prose-sm max-w-none", children: content });
+}
+function EntriesTimeline(props) {
+  const { entries, pageSize, productName } = props;
+  const [query, setQuery] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState(null);
+  const [page, setPage] = useState(1);
+  const categories = useMemo(
+    () => Array.from(new Set(entries.map((e) => e.category))).sort(),
+    [entries]
+  );
+  const filtered = useMemo(() => {
+    const normalized = normalize(query);
+    return entries.filter((entry) => {
+      if (selectedCategory && entry.category !== selectedCategory) {
+        return false;
+      }
+      if (!normalized) return true;
+      const haystack = [
+        entry.title,
+        entry.version,
+        entry.category,
+        ...entry.tags ?? [],
+        typeof entry.content === "string" ? entry.content : ""
+      ].join(" ").toLowerCase();
+      return haystack.includes(normalized);
+    }).sort((a, b) => parseEntryDate(b.date) - parseEntryDate(a.date));
+  }, [entries, query, selectedCategory]);
+  const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+  const safePage = Math.min(page, totalPages);
+  const pageItems = paginate(filtered, safePage, pageSize);
+  useEffect(() => {
+    setPage(1);
+  }, [query, selectedCategory]);
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "text-center py-12", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No changelog entries yet. Check back soon!" }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-8 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          Search,
+          {
+            className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "search",
+            placeholder: "Search releases, features, fixes\u2026",
+            value: query,
+            onChange: (e) => setQuery(e.target.value),
+            className: "pl-9",
+            "aria-label": "Search changelog"
+          }
+        )
+      ] }),
+      categories.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSelectedCategory(null),
+            className: cn(
+              "px-3 py-1 rounded-full text-xs font-medium border transition-colors",
+              selectedCategory === null ? "bg-primary text-primary-foreground border-primary" : "bg-background text-muted-foreground border-border/60 hover:border-primary/40"
+            ),
+            children: "All"
+          }
+        ),
+        categories.map((category) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSelectedCategory(category),
+            className: cn(
+              "px-3 py-1 rounded-full text-xs font-medium border transition-colors",
+              selectedCategory === category ? "bg-primary text-primary-foreground border-primary" : "bg-background text-muted-foreground border-border/60 hover:border-primary/40"
+            ),
+            children: category
+          },
+          category
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute left-[1.125rem] top-3 bottom-3 w-px bg-border/60 hidden sm:block",
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "space-y-8", children: pageItems.map((entry) => /* @__PURE__ */ jsxs(
+        "article",
+        {
+          className: "relative sm:pl-12",
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "hidden sm:flex absolute left-2 top-2 h-5 w-5 items-center justify-center rounded-full border-2 border-background bg-primary ring-1 ring-border/40",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-primary-foreground" })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "rounded-2xl border border-border/40 bg-card overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "p-6 sm:p-8", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-3", children: [
+                /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary", children: entry.category }),
+                /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center rounded-md bg-muted px-2 py-1 text-xs font-mono font-medium text-muted-foreground", children: [
+                  "v",
+                  entry.version
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "time",
+                  {
+                    className: "text-xs text-muted-foreground",
+                    dateTime: entry.date,
+                    children: formatDate(entry.date)
+                  }
+                )
+              ] }),
+              entry.tags && entry.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 mb-3", children: entry.tags.map((tag) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-[10px] uppercase tracking-wide text-muted-foreground bg-background border border-border/40 px-1.5 py-0.5 rounded",
+                  children: tag
+                },
+                tag
+              )) }),
+              /* @__PURE__ */ jsx("h2", { className: "text-xl sm:text-2xl font-bold text-foreground mb-4", children: entry.title }),
+              /* @__PURE__ */ jsx(EntryContent, { content: entry.content })
+            ] }) })
+          ]
+        },
+        `${entry.version}-${entry.date}`
+      )) })
+    ] }),
+    pageItems.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-center py-12", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No entries match your filters." }) }),
+    totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "mt-10 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        "Page ",
+        safePage,
+        " of ",
+        totalPages,
+        " \xB7 ",
+        filtered.length,
+        " entries"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => setPage((p) => Math.max(1, p - 1)),
+            disabled: safePage <= 1,
+            "aria-label": "Previous page",
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => setPage((p) => Math.min(totalPages, p + 1)),
+            disabled: safePage >= totalPages,
+            "aria-label": "Next page",
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    ] }),
+    productName && pageItems.length > 0 && /* @__PURE__ */ jsx("script", { type: "application/ld+json", children: JSON.stringify({
+      "@context": "https://schema.org",
+      "@type": "ItemList",
+      name: `${productName} Changelog`,
+      itemListElement: pageItems.map((entry, index) => ({
+        "@type": "ListItem",
+        position: (safePage - 1) * pageSize + index + 1,
+        name: entry.title,
+        description: typeof entry.content === "string" ? entry.content.slice(0, 200) : void 0,
+        datePublished: entry.date
+      }))
+    }) })
+  ] });
+}
+function ChangelogPage(props) {
+  const {
+    productName,
+    heroEyebrow = "What's new",
+    heroTitle = "Changelog",
+    heroSubtitle = "Platform updates, improvements, and announcements \u2014 newest first.",
+    ctaTitle,
+    ctaSubtitle,
+    ctaHref,
+    ctaLabel,
+    className = "",
+    seoTitle,
+    seoDescription,
+    seoKeywords,
+    entries,
+    pageSize = 10
+  } = props;
+  const { product } = useProduct();
+  const resolvedProductName = productName || product?.name;
+  const cms = useCmsChangelog();
   const showCta = Boolean(ctaHref && ctaLabel);
+  const isPropDriven = entries != null;
   return /* @__PURE__ */ jsxs("div", { className: `w-full ${className}`, children: [
-    seoTitle && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(
       PageHead,
       {
-        title: seoTitle,
+        title: seoTitle || heroTitle,
         description: seoDescription || heroSubtitle,
-        productName,
+        productName: resolvedProductName,
         keywords: seoKeywords
       }
     ),
     /* @__PURE__ */ jsx("section", { className: "py-16 md:py-20 px-4 sm:px-6 lg:px-8 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto", children: [
       /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-xs font-medium text-primary mb-6", children: [
-        /* @__PURE__ */ jsx(
-          "svg",
-          {
-            className: "h-3.5 w-3.5",
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "currentColor",
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-              }
-            )
-          }
-        ),
+        /* @__PURE__ */ jsx(History, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
         heroEyebrow
       ] }),
       /* @__PURE__ */ jsx("h1", { className: "text-4xl sm:text-5xl font-bold text-foreground mb-4", children: heroTitle }),
       /* @__PURE__ */ jsx("p", { className: "text-lg text-muted-foreground", children: heroSubtitle })
     ] }) }),
-    /* @__PURE__ */ jsx("section", { className: "px-4 sm:px-6 lg:px-8 pb-20", children: /* @__PURE__ */ jsx("div", { className: "max-w-3xl mx-auto space-y-12", children: loading ? [1, 2, 3].map((i) => /* @__PURE__ */ jsx(
-      "div",
+    /* @__PURE__ */ jsx("section", { className: "px-4 sm:px-6 lg:px-8 pb-20", children: isPropDriven ? /* @__PURE__ */ jsx(
+      EntriesTimeline,
       {
-        className: "rounded-2xl border border-border/40 bg-card overflow-hidden animate-pulse",
-        children: /* @__PURE__ */ jsxs("div", { className: "p-6 sm:p-8 space-y-4", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-3 bg-muted rounded w-1/3" }),
-          /* @__PURE__ */ jsx("div", { className: "h-6 bg-muted rounded w-2/3" }),
-          /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded" }),
-          /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-5/6" })
-        ] })
-      },
-      i
-    )) : error ? /* @__PURE__ */ jsx("div", { className: "text-center py-12", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: error }) }) : entries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-12", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No changelog entries yet. Check back soon!" }) }) : entries.map((entry) => /* @__PURE__ */ jsxs(
-      "article",
+        entries,
+        pageSize,
+        productName: resolvedProductName
+      }
+    ) : /* @__PURE__ */ jsx(
+      CmsTimeline,
       {
-        id: entry.slug,
-        className: "rounded-2xl border border-border/40 bg-card overflow-hidden scroll-mt-24",
-        children: [
-          entry.thumbnail && /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: entry.thumbnail,
-              alt: "",
-              width: 1024,
-              height: 576,
-              loading: "lazy",
-              decoding: "async",
-              className: "w-full aspect-video object-cover border-b border-border/40"
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "p-6 sm:p-8", children: [
-            /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mb-2", children: [
-              entry.publishedAt && /* @__PURE__ */ jsx("time", { dateTime: entry.publishedAt, children: formatDate(entry.publishedAt || entry.lastUpdated) }),
-              entry.author && /* @__PURE__ */ jsxs(Fragment, { children: [
-                " \xB7 ",
-                entry.author
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("h2", { className: "text-xl sm:text-2xl font-bold text-foreground mb-4", children: entry.title }),
-            entry.content ? /* @__PURE__ */ jsx("div", { className: "prose prose-sm prose-gray dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx(
-              ContentRenderer,
-              {
-                content: entry.content,
-                format: entry.contentFormat
-              }
-            ) }) : entry.excerpt && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground leading-relaxed", children: entry.excerpt })
-          ] })
-        ]
-      },
-      entry.id
-    )) }) }),
+        entries: cms.entries,
+        loading: cms.loading,
+        error: cms.error
+      }
+    ) }),
     showCta && /* @__PURE__ */ jsx("section", { className: "py-14 px-4 sm:px-6 lg:px-8 bg-primary/5 border-t border-border/40", children: /* @__PURE__ */ jsxs("div", { className: "max-w-2xl mx-auto text-center", children: [
       ctaTitle && /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-foreground mb-3", children: ctaTitle }),
       ctaSubtitle && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-7", children: ctaSubtitle }),