@cedros/data-react 0.1.7 → 0.1.8

package/dist/site-templates/DocsTemplates.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { normalizeDocsHref } from "../docsContract.js";
 import { buildContentListHref, collectFilterValues, prepareDocsIndex } from "./contentIndex.js";
 import { Breadcrumbs, ContentPagination } from "./contentUi.js";
-import { buildHierarchicalDocsSidebarSections, buildDocsSidebarSections, withActiveDocsSidebar } from "./docsNavigation.js";
+import { buildDocsNavigation, buildDocsSidebarSections, withActiveDocsSidebar } from "./docsNavigation.js";
 import { DocsSidebar } from "./DocsSidebar.js";
 import { renderDocsTemplateShell } from "./docsTemplateShell.js";
 import { MarkdownContent } from "./MarkdownContent.js";
@@ -11,7 +12,9 @@ export function DocsIndexTemplate({ siteTitle, navigation, docs, title = "Docume
     const resolvedCategories = categories ?? normalizedFilters.categories;
     const resolvedTags = tags ?? normalizedFilters.tags;
     const activePath = currentPath ?? basePath;
-    const resolvedSidebarSections = withActiveDocsSidebar(sidebarSections ?? buildDefaultDocsSidebarSections(docs, basePath), activePath);
+    const resolvedSidebarSections = withActiveDocsSidebar(sidebarSections ?? buildDefaultDocsSidebarSections(docs, basePath, activePath), activePath);
+    const categoryCount = resolvedCategories.length;
+    const tagCount = resolvedTags.length;
     const result = prepareDocsIndex(docs, {
         query,
         category,
@@ -20,14 +23,12 @@ export function DocsIndexTemplate({ siteTitle, navigation, docs, title = "Docume
         page,
         pageSize
     });
-    return renderDocsTemplateShell((_jsxs("section", { className: "cedros-site__docs-page", children: [_jsx(DocsSidebar, { title: sidebarTitle, basePath: basePath, searchQuery: query, sections: resolvedSidebarSections }), _jsxs("div", { className: "cedros-site__docs-main", children: [_jsxs("section", { className: "cedros-site__card", children: [_jsx("span", { className: "cedros-site__pill", children: "docs" }), _jsx("h1", { className: "cedros-site__title", style: { marginTop: "0.6rem" }, children: title }), description && _jsx("p", { className: "cedros-site__subtitle", children: description }), _jsxs("p", { className: "cedros-site__entry-meta", style: { marginTop: "0.6rem" }, children: [result.totalItems, " results"] })] }), _jsx(DocsIndexControls, { basePath: basePath, query: query, category: category, tag: tag, sort: sort, categories: resolvedCategories, tags: resolvedTags }), result.totalItems === 0 && (_jsxs("section", { className: "cedros-site__card cedros-site__empty-state", children: [_jsx("h2", { className: "cedros-site__title", style: { fontSize: "1.25rem" }, children: "No documentation pages found" }), _jsx("p", { className: "cedros-site__subtitle", style: { marginTop: "0.6rem" }, children: "Try a broader query or clear filters." })] })), result.totalItems > 0 && (_jsxs(_Fragment, { children: [_jsx("section", { className: "cedros-site__content-grid cedros-site__content-grid--docs", children: result.items.map((doc) => (_jsxs("article", { className: "cedros-site__card cedros-site__entry-card", children: [_jsx("h2", { className: "cedros-site__entry-title", children: _jsx("a", { href: `${basePath}/${doc.slug}`, children: doc.title }) }), doc.description && _jsx("p", { className: "cedros-site__subtitle", children: doc.description }), (doc.lastUpdated || doc.category) && (_jsx("p", { className: "cedros-site__entry-meta", children: [doc.category, doc.lastUpdated ? `Updated ${doc.lastUpdated}` : ""]
-                                                .filter(Boolean)
-                                                .join(" • ") })), doc.tags && doc.tags.length > 0 && (_jsx("div", { className: "cedros-site__tag-list", children: doc.tags.map((entryTag) => (_jsx("a", { href: buildContentListHref(basePath, {
+    return renderDocsTemplateShell((_jsxs("section", { className: "cedros-site__docs-page", children: [_jsx(DocsSidebar, { title: sidebarTitle, basePath: basePath, searchQuery: query, sections: resolvedSidebarSections }), _jsxs("div", { className: "cedros-site__docs-main", children: [_jsxs("section", { className: "cedros-site__card cedros-site__docs-hero", children: [_jsxs("div", { className: "cedros-site__docs-hero-copy", children: [_jsx("span", { className: "cedros-site__pill cedros-site__pill--strong", children: "Documentation" }), _jsx("h1", { className: "cedros-site__title cedros-site__docs-hero-title", children: title }), description && _jsx("p", { className: "cedros-site__subtitle", children: description })] }), _jsxs("dl", { className: "cedros-site__hero-stats", children: [_jsxs("div", { className: "cedros-site__hero-stat", children: [_jsx("dt", { children: "Articles" }), _jsx("dd", { children: result.totalItems })] }), _jsxs("div", { className: "cedros-site__hero-stat", children: [_jsx("dt", { children: "Categories" }), _jsx("dd", { children: categoryCount })] }), _jsxs("div", { className: "cedros-site__hero-stat", children: [_jsx("dt", { children: "Topics" }), _jsx("dd", { children: tagCount })] })] })] }), _jsx(DocsIndexControls, { basePath: basePath, query: query, category: category, tag: tag, sort: sort, categories: resolvedCategories, tags: resolvedTags }), result.totalItems === 0 && (_jsxs("section", { className: "cedros-site__card cedros-site__empty-state", children: [_jsx("p", { className: "cedros-site__eyebrow", children: "No matches" }), _jsx("h2", { className: "cedros-site__section-title", children: "No documentation pages found" }), _jsx("p", { className: "cedros-site__subtitle", children: "Try a broader query or clear filters." })] })), result.totalItems > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cedros-site__section-heading", children: [_jsxs("div", { children: [_jsx("p", { className: "cedros-site__eyebrow", children: "Browse" }), _jsx("h2", { className: "cedros-site__section-title", children: "Available guides and references" })] }), _jsxs("p", { className: "cedros-site__entry-meta", children: [result.totalItems, " matching pages"] })] }), _jsx("section", { className: "cedros-site__content-grid cedros-site__content-grid--docs", children: result.items.map((doc) => (_jsxs("article", { className: "cedros-site__card cedros-site__entry-card cedros-site__docs-entry-card", children: [_jsxs("div", { className: "cedros-site__docs-entry-head", children: [doc.category && _jsx("span", { className: "cedros-site__pill", children: doc.category }), doc.lastUpdated && (_jsxs("p", { className: "cedros-site__entry-meta", children: ["Updated ", doc.lastUpdated] }))] }), _jsx("h2", { className: "cedros-site__entry-title cedros-site__entry-title--docs", children: _jsx("a", { href: normalizeDocsHref(doc.slug, { basePath }), children: doc.title }) }), doc.description && _jsx("p", { className: "cedros-site__subtitle", children: doc.description }), doc.tags && doc.tags.length > 0 && (_jsx("div", { className: "cedros-site__tag-list", children: doc.tags.map((entryTag) => (_jsx("a", { href: buildContentListHref(basePath, {
                                                     q: query,
                                                     category,
                                                     tag: entryTag,
                                                     sort
-                                                }), className: "cedros-site__pill", children: entryTag }, entryTag))) }))] }, doc.slug))) }), _jsx(ContentPagination, { basePath: basePath, page: result.page, totalPages: result.totalPages, query: { q: query, category, tag, sort } })] }))] })] })), {
+                                                }), className: "cedros-site__pill", children: entryTag }, entryTag))) })), _jsx("div", { className: "cedros-site__docs-entry-footer", children: _jsx("a", { href: normalizeDocsHref(doc.slug, { basePath }), className: "cedros-site__button cedros-site__button--ghost", children: "Read article" }) })] }, doc.slug))) }), _jsx(ContentPagination, { basePath: basePath, page: result.page, totalPages: result.totalPages, query: { q: query, category, tag, sort } })] }))] })] })), {
         siteTitle,
         navigation,
         headless,
@@ -36,10 +37,8 @@ export function DocsIndexTemplate({ siteTitle, navigation, docs, title = "Docume
 }
 export function DocArticleTemplate({ siteTitle, navigation, title, bodyMarkdown, bodyHtml, allowUnsafeHtmlFallback = false, lastUpdated, readingMinutes, basePath = "/docs", currentPath, searchQuery = "", docs = [], sidebarSections, sidebarTitle = "Docs", breadcrumbs = [], toc = [], previousDoc, nextDoc, editHref, headless = false, renderLayout }) {
     const activePath = currentPath ?? breadcrumbs[breadcrumbs.length - 1]?.href;
-    const resolvedSidebarSections = withActiveDocsSidebar(sidebarSections ?? buildDefaultDocsSidebarSections(docs, basePath), activePath);
-    return renderDocsTemplateShell((_jsxs("section", { className: "cedros-site__docs-page cedros-site__docs-page--article", children: [_jsx(DocsSidebar, { title: sidebarTitle, basePath: basePath, searchQuery: searchQuery, sections: resolvedSidebarSections }), _jsxs("article", { className: "cedros-site__card cedros-site__article cedros-site__docs-article", children: [_jsx(Breadcrumbs, { trail: breadcrumbs }), _jsxs("div", { className: "cedros-site__article-header", children: [_jsx("span", { className: "cedros-site__pill", children: "docs" }), _jsx("h1", { className: "cedros-site__title", children: title }), (lastUpdated || readingMinutes) && (_jsx("p", { className: "cedros-site__entry-meta", children: [lastUpdated ? `Last updated ${lastUpdated}` : "", readingTime(readingMinutes)]
-                                    .filter(Boolean)
-                                    .join(" • ") }))] }), _jsx(MarkdownContent, { bodyMarkdown: bodyMarkdown, bodyHtml: bodyHtml, allowUnsafeHtmlFallback: allowUnsafeHtmlFallback }), (previousDoc || nextDoc || editHref) && (_jsxs("footer", { className: "cedros-site__doc-footer", children: [previousDoc && (_jsxs("a", { href: previousDoc.href, className: "cedros-site__nav-link", children: ["\u2190 ", previousDoc.title] })), nextDoc && (_jsxs("a", { href: nextDoc.href, className: "cedros-site__nav-link", children: [nextDoc.title, " \u2192"] })), editHref && (_jsx("a", { href: editHref, className: "cedros-site__nav-link", children: "Suggest edit" }))] }))] }), toc.length > 0 && (_jsxs("aside", { className: "cedros-site__card cedros-site__toc", children: [_jsx("h2", { className: "cedros-site__toc-title", children: "On this page" }), _jsx(TocScrollSpy, { entries: toc })] }))] })), {
+    const resolvedSidebarSections = withActiveDocsSidebar(sidebarSections ?? buildDefaultDocsSidebarSections(docs, basePath, activePath), activePath);
+    return renderDocsTemplateShell((_jsxs("section", { className: "cedros-site__docs-page cedros-site__docs-page--article", children: [_jsx(DocsSidebar, { title: sidebarTitle, basePath: basePath, searchQuery: searchQuery, sections: resolvedSidebarSections }), _jsxs("article", { className: "cedros-site__card cedros-site__article cedros-site__docs-article", children: [_jsxs("div", { className: "cedros-site__article-top", children: [_jsx(Breadcrumbs, { trail: breadcrumbs }), editHref && (_jsx("a", { href: editHref, className: "cedros-site__button cedros-site__button--ghost", children: "Suggest edit" }))] }), _jsxs("div", { className: "cedros-site__article-header", children: [_jsx("span", { className: "cedros-site__pill cedros-site__pill--strong", children: "Documentation" }), _jsx("h1", { className: "cedros-site__title", children: title }), (lastUpdated || readingMinutes) && (_jsxs("div", { className: "cedros-site__article-meta-list", children: [lastUpdated && (_jsxs("span", { className: "cedros-site__meta-chip", children: ["Updated ", lastUpdated] })), readingMinutes && (_jsx("span", { className: "cedros-site__meta-chip", children: readingTime(readingMinutes) }))] }))] }), _jsx("div", { className: "cedros-site__article-body", children: _jsx(MarkdownContent, { bodyMarkdown: bodyMarkdown, bodyHtml: bodyHtml, allowUnsafeHtmlFallback: allowUnsafeHtmlFallback }) }), (previousDoc || nextDoc) && (_jsxs("footer", { className: "cedros-site__doc-footer", children: [previousDoc && (_jsxs("a", { href: previousDoc.href, className: "cedros-site__pager-card", children: [_jsx("span", { className: "cedros-site__pager-label", children: "Previous" }), _jsx("span", { className: "cedros-site__pager-title", children: previousDoc.title })] })), nextDoc && (_jsxs("a", { href: nextDoc.href, className: "cedros-site__pager-card cedros-site__pager-card--next", children: [_jsx("span", { className: "cedros-site__pager-label", children: "Next" }), _jsx("span", { className: "cedros-site__pager-title", children: nextDoc.title })] }))] }))] }), toc.length > 0 && (_jsxs("aside", { className: "cedros-site__card cedros-site__toc", children: [_jsxs("div", { className: "cedros-site__toc-header", children: [_jsx("p", { className: "cedros-site__eyebrow", children: "On this page" }), _jsx("h2", { className: "cedros-site__toc-title", children: "Contents" })] }), _jsx(TocScrollSpy, { entries: toc })] }))] })), {
         siteTitle,
         navigation,
         headless,
@@ -47,7 +46,7 @@ export function DocArticleTemplate({ siteTitle, navigation, title, bodyMarkdown,
     });
 }
 function DocsIndexControls({ basePath, query, category, tag, sort, categories, tags }) {
-    return (_jsxs("form", { method: "get", action: basePath, className: "cedros-site__controls cedros-site__card", children: [_jsxs("label", { className: "cedros-site__control", children: [_jsx("span", { children: "Search" }), _jsx("input", { type: "search", name: "q", defaultValue: query, placeholder: "Search docs" })] }), _jsxs("label", { className: "cedros-site__control", children: [_jsx("span", { children: "Category" }), _jsxs("select", { name: "category", defaultValue: category, children: [_jsx("option", { value: "", children: "All" }), categories.map((entry) => (_jsx("option", { value: entry, children: entry }, entry)))] })] }), _jsxs("label", { className: "cedros-site__control", children: [_jsx("span", { children: "Tag" }), _jsxs("select", { name: "tag", defaultValue: tag, children: [_jsx("option", { value: "", children: "All" }), tags.map((entry) => (_jsx("option", { value: entry, children: entry }, entry)))] })] }), _jsxs("label", { className: "cedros-site__control", children: [_jsx("span", { children: "Sort" }), _jsxs("select", { name: "sort", defaultValue: sort, children: [_jsx("option", { value: "title-asc", children: "Title A-Z" }), _jsx("option", { value: "title-desc", children: "Title Z-A" }), _jsx("option", { value: "updated-desc", children: "Recently updated" }), _jsx("option", { value: "updated-asc", children: "Least recently updated" })] })] }), _jsxs("div", { className: "cedros-site__control-actions", children: [_jsx("button", { className: "cedros-site__nav-link", type: "submit", children: "Apply" }), _jsx("a", { className: "cedros-site__nav-link", href: basePath, children: "Clear" })] })] }));
+    return (_jsxs("form", { method: "get", action: basePath, className: "cedros-site__controls cedros-site__card cedros-site__controls--docs", children: [_jsxs("div", { className: "cedros-site__controls-header", children: [_jsxs("div", { children: [_jsx("p", { className: "cedros-site__eyebrow", children: "Refine" }), _jsx("h2", { className: "cedros-site__section-title", children: "Search and filter the knowledge base" })] }), _jsx("p", { className: "cedros-site__entry-meta", children: "Use text search, categories, and tags to narrow the result set." })] }), _jsxs("div", { className: "cedros-site__controls-grid", children: [_jsxs("label", { className: "cedros-site__control", children: [_jsx("span", { children: "Search" }), _jsx("input", { type: "search", name: "q", defaultValue: query, placeholder: "Search docs" })] }), _jsxs("label", { className: "cedros-site__control", children: [_jsx("span", { children: "Category" }), _jsxs("select", { name: "category", defaultValue: category, children: [_jsx("option", { value: "", children: "All categories" }), categories.map((entry) => (_jsx("option", { value: entry, children: entry }, entry)))] })] }), _jsxs("label", { className: "cedros-site__control", children: [_jsx("span", { children: "Tag" }), _jsxs("select", { name: "tag", defaultValue: tag, children: [_jsx("option", { value: "", children: "All topics" }), tags.map((entry) => (_jsx("option", { value: entry, children: entry }, entry)))] })] }), _jsxs("label", { className: "cedros-site__control", children: [_jsx("span", { children: "Sort" }), _jsxs("select", { name: "sort", defaultValue: sort, children: [_jsx("option", { value: "title-asc", children: "Title A-Z" }), _jsx("option", { value: "title-desc", children: "Title Z-A" }), _jsx("option", { value: "updated-desc", children: "Recently updated" }), _jsx("option", { value: "updated-asc", children: "Least recently updated" })] })] }), _jsxs("div", { className: "cedros-site__control-actions", children: [_jsx("button", { className: "cedros-site__button", type: "submit", children: "Apply filters" }), _jsx("a", { className: "cedros-site__button cedros-site__button--ghost", href: basePath, children: "Clear" })] })] })] }));
 }
 function readingTime(minutes) {
     if (!minutes) {
@@ -55,8 +54,8 @@ function readingTime(minutes) {
     }
     return `${minutes} min read`;
 }
-function buildDefaultDocsSidebarSections(docs, basePath) {
-    return docs.some((doc) => doc.slug.includes("/"))
-        ? buildHierarchicalDocsSidebarSections(docs, basePath)
+function buildDefaultDocsSidebarSections(docs, basePath, currentPath) {
+    return docs.some((doc) => doc.slug.includes("/") || doc.productSlug || doc.sectionKey)
+        ? buildDocsNavigation(docs, { basePath, currentPath, collapsible: true })
         : buildDocsSidebarSections(docs, basePath);
 }

package/dist/site-templates/SiteFooter.js

@@ -3,5 +3,5 @@ export function SiteFooter({ siteTitle, note, links = [], rightSlot, layout }) {
     const footerClasses = layout?.width === "full"
         ? "cedros-site__footer cedros-site__footer--full"
         : "cedros-site__footer";
-    return (_jsx("footer", { className: footerClasses, children: _jsxs("div", { className: "cedros-site__container cedros-site__footer-inner", children: [_jsxs("div", { className: "cedros-site__footer-brand", children: [_jsx("span", { children: siteTitle }), note && _jsx("span", { children: note })] }), links.length > 0 && (_jsx("nav", { className: "cedros-site__footer-links", "aria-label": "Footer", children: links.map((link) => (_jsx("a", { href: link.route, className: "cedros-site__footer-link", children: link.label }, link.key))) })), rightSlot && _jsx("div", { className: "cedros-site__footer-right", children: rightSlot })] }) }));
+    return (_jsx("footer", { className: footerClasses, children: _jsxs("div", { className: "cedros-site__container cedros-site__footer-inner", children: [_jsxs("div", { className: "cedros-site__footer-brand", children: [_jsxs("div", { className: "cedros-site__footer-brand-row", children: [_jsx("span", { className: "cedros-site__brand-mark cedros-site__brand-mark--footer", "aria-hidden": "true" }), _jsx("span", { className: "cedros-site__footer-title", children: siteTitle })] }), note && _jsx("p", { className: "cedros-site__footer-note", children: note })] }), links.length > 0 && (_jsx("nav", { className: "cedros-site__footer-links", "aria-label": "Footer", children: links.map((link) => (_jsx("a", { href: link.route, className: "cedros-site__footer-link", children: link.label }, link.key))) })), rightSlot && _jsx("div", { className: "cedros-site__footer-right", children: rightSlot })] }) }));
 }

package/dist/site-templates/SiteLayout.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SiteFooter } from "./SiteFooter.js";
 import { TopNav } from "./TopNav.js";
-export function SiteLayout({ siteTitle, navigation, children, brandHref = "/", footerNote = "Powered by cedros-data", layout }) {
+export function SiteLayout({ siteTitle, navigation, children, brandHref = "/", footerNote, layout }) {
     return (_jsxs("div", { className: "cedros-site", children: [_jsx(TopNav, { siteTitle: siteTitle, navigation: navigation, brandHref: brandHref, layout: layout?.nav }), _jsx("main", { className: "cedros-site__main", children: _jsx("div", { className: "cedros-site__container", children: children }) }), _jsx(SiteFooter, { siteTitle: siteTitle, note: footerNote, layout: layout?.footer })] }));
 }

package/dist/site-templates/TopNav.js

@@ -6,7 +6,7 @@ export function TopNav({ siteTitle, navigation, brandHref = "/", rightSlot, curr
         : navigation.map((item) => ({ ...item, isActive: false }));
     const headerClasses = buildHeaderClasses(layout);
     const linkStyleClass = layout?.linkStyle === "text" ? " cedros-site__nav-link--text" : "";
-    return (_jsx("header", { className: headerClasses, children: _jsxs("div", { className: "cedros-site__container cedros-site__header-inner", children: [_jsx("a", { href: brandHref, className: "cedros-site__brand", children: siteTitle }), _jsx("nav", { className: "cedros-site__nav", "aria-label": "Primary", children: activeNavigation.map((item) => (_jsx("a", { href: item.route, className: `cedros-site__nav-link${linkStyleClass}${item.isActive ? " cedros-site__nav-link--active" : ""}`, "aria-current": item.isActive ? "page" : undefined, children: item.label }, item.key))) }), rightSlot && _jsx("div", { className: "cedros-site__header-right", children: rightSlot })] }) }));
+    return (_jsx("header", { className: headerClasses, children: _jsxs("div", { className: "cedros-site__container cedros-site__header-inner", children: [_jsxs("a", { href: brandHref, className: "cedros-site__brand", "aria-label": siteTitle, children: [_jsx("span", { className: "cedros-site__brand-mark", "aria-hidden": "true" }), _jsx("span", { className: "cedros-site__brand-name", children: siteTitle })] }), activeNavigation.length > 0 && (_jsx("div", { className: "cedros-site__nav-shell", children: _jsx("nav", { className: "cedros-site__nav", "aria-label": "Primary", children: activeNavigation.map((item) => (_jsx("a", { href: item.route, className: `cedros-site__nav-link${linkStyleClass}${item.isActive ? " cedros-site__nav-link--active" : ""}`, "aria-current": item.isActive ? "page" : undefined, children: item.label }, item.key))) }) })), rightSlot && _jsx("div", { className: "cedros-site__header-right", children: rightSlot })] }) }));
 }
 function buildHeaderClasses(layout) {
     let classes = "cedros-site__header";

package/dist/site-templates/blog-styles.css

@@ -0,0 +1,259 @@
+.cedros-site__blog-page {
+  display: grid;
+  gap: 1rem;
+}
+
+.cedros-site__blog-page--article {
+  gap: 1.1rem;
+}
+
+.cedros-site__blog-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.8fr);
+  gap: 1rem;
+  padding: 1.45rem;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, #f59e0b 9%, var(--cds-panel) 91%), color-mix(in srgb, var(--cds-link) 8%, var(--cds-panel) 92%)),
+    var(--cds-panel);
+}
+
+.cedros-site__blog-hero-copy {
+  display: grid;
+  gap: 0.9rem;
+}
+
+.cedros-site__blog-hero-title {
+  max-width: 7ch;
+}
+
+.cedros-site__blog-hero-subtitle {
+  max-width: 42ch;
+}
+
+.cedros-site__blog-controls-panel,
+.cedros-site__controls--blog {
+  padding: 1.15rem 1.2rem 1.25rem;
+}
+
+.cedros-site__content-grid--blog {
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
+.cedros-site__entry-title--blog {
+  font-size: 1.22rem;
+}
+
+.cedros-site__blog-card {
+  height: 100%;
+  align-content: start;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--cds-panel) 92%, transparent), color-mix(in srgb, var(--cds-panel) 78%, var(--cds-bg) 22%)),
+    var(--cds-panel);
+  transition:
+    transform 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.cedros-site__blog-card:hover,
+.cedros-site__blog-related-card:hover {
+  transform: translateY(-2px);
+  border-color: color-mix(in srgb, var(--cds-link) 28%, var(--cds-border) 72%);
+  box-shadow: var(--cds-shadow-lg);
+}
+
+.cedros-site__blog-card-top,
+.cedros-site__blog-card-footer,
+.cedros-site__blog-article-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.cedros-site__blog-card-taxonomy,
+.cedros-site__blog-taxonomy {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.cedros-site__blog-card-footer {
+  margin-top: auto;
+  align-items: flex-end;
+}
+
+.cedros-site__blog-card-footer .cedros-site__entry-meta {
+  flex: 1 1 220px;
+}
+
+.cedros-site__blog-article {
+  gap: 1.2rem;
+}
+
+.cedros-site__blog-related,
+.cedros-site__blog-support-card {
+  display: grid;
+  gap: 0.95rem;
+}
+
+.cedros-site__blog-related-header,
+.cedros-site__blog-support-header {
+  display: grid;
+  gap: 0.3rem;
+}
+
+.cedros-site__blog-related-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1rem;
+}
+
+.cedros-site__blog-related-card {
+  display: grid;
+  gap: 0.75rem;
+  height: 100%;
+  transition:
+    transform 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.cedros-site__search-field {
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  gap: 0.75rem;
+  min-height: 3rem;
+  border: 1px solid color-mix(in srgb, var(--cds-border) 88%, transparent);
+  border-radius: calc(var(--cds-radius) - 0.05rem);
+  background: color-mix(in srgb, var(--cds-panel) 86%, transparent);
+  padding: 0 0.9rem;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 38%);
+  transition:
+    border-color 140ms ease,
+    box-shadow 140ms ease,
+    background 140ms ease;
+}
+
+.cedros-site__search-field:focus-within {
+  border-color: color-mix(in srgb, var(--cds-link) 48%, var(--cds-border) 52%);
+  box-shadow: 0 0 0 0.24rem color-mix(in srgb, var(--cds-link) 12%, transparent);
+  background: var(--cds-panel);
+}
+
+.cedros-site__search-icon {
+  width: 1rem;
+  height: 1rem;
+  color: var(--cds-muted);
+  flex-shrink: 0;
+}
+
+.cedros-site__search-icon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.cedros-site__search-input {
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--cds-fg);
+  padding: 0;
+}
+
+.cedros-site__search-input::placeholder {
+  color: color-mix(in srgb, var(--cds-muted) 74%, transparent);
+}
+
+.cedros-site__search-shortcut {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.75rem;
+  padding: 0 0.55rem;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--cds-border) 82%, transparent);
+  background: color-mix(in srgb, var(--cds-panel-muted) 86%, transparent);
+  color: var(--cds-muted);
+  font-size: 0.72rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.cedros-site__filter-dimensions {
+  display: grid;
+  gap: 0.8rem;
+}
+
+.cedros-site__filter-group {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.cedros-site__filter-group + .cedros-site__filter-group {
+  padding-top: 0.8rem;
+  border-top: 1px solid color-mix(in srgb, var(--cds-border) 76%, transparent);
+}
+
+.cedros-site__filter-group-label {
+  font-size: 0.72rem;
+  color: var(--cds-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 700;
+}
+
+.cedros-site__filter-group-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.cedros-site__bookmark {
+  background: color-mix(in srgb, var(--cds-panel) 88%, transparent);
+  border: 1px solid color-mix(in srgb, var(--cds-border) 84%, transparent);
+  border-radius: 999px;
+  padding: 0.38rem 0.56rem;
+  cursor: pointer;
+  color: var(--cds-muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.2rem;
+  min-height: 2.2rem;
+}
+
+.cedros-site__bookmark:hover,
+.cedros-site__bookmark[aria-pressed="true"] {
+  color: var(--cds-link-strong);
+  border-color: color-mix(in srgb, var(--cds-link) 42%, var(--cds-border) 58%);
+  background: var(--cds-link-soft);
+}
+
+@media (max-width: 960px) {
+  .cedros-site__blog-hero {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 700px) {
+  .cedros-site__blog-hero,
+  .cedros-site__blog-controls-panel,
+  .cedros-site__controls--blog {
+    padding: 1rem;
+  }
+
+  .cedros-site__blog-card-footer .cedros-site__button,
+  .cedros-site__blog-related-card .cedros-site__button,
+  .cedros-site__blog-article-actions .cedros-site__button {
+    width: 100%;
+  }
+
+  .cedros-site__search-shortcut {
+    display: none;
+  }
+}

package/dist/site-templates/blogControls.js

@@ -24,10 +24,10 @@ export function BlogSearchInput({ defaultValue = "", onSearch, placeholder = "Se
                 clearTimeout(timerRef.current);
         };
     }, []);
-    return (_jsx("input", { ref: inputRef, type: "search", defaultValue: defaultValue, onChange: handleChange, placeholder: placeholder, className: "cedros-site__search-input" }));
+    return (_jsxs("label", { className: "cedros-site__search-field", children: [_jsx("span", { className: "cedros-site__search-icon", "aria-hidden": "true", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", children: [_jsx("circle", { cx: "11", cy: "11", r: "7" }), _jsx("path", { d: "m20 20-3.5-3.5" })] }) }), _jsx("input", { ref: inputRef, type: "search", defaultValue: defaultValue, onChange: handleChange, placeholder: placeholder, className: "cedros-site__search-input" }), _jsx("span", { className: "cedros-site__search-shortcut", "aria-hidden": "true", children: "Ctrl/\u2318K" })] }));
 }
 export function FilterDimensionChips({ dimensions, active, onChange }) {
-    return (_jsx("div", { className: "cedros-site__filter-dimensions", children: dimensions.map((dim) => (_jsxs("div", { className: "cedros-site__filter-group", children: [_jsx("span", { className: "cedros-site__filter-group-label", children: dim.label }), _jsx("div", { className: "cedros-site__tag-list", children: dim.values.map((value) => {
+    return (_jsx("div", { className: "cedros-site__filter-dimensions", children: dimensions.map((dim) => (_jsxs("div", { className: "cedros-site__filter-group", children: [_jsx("span", { className: "cedros-site__filter-group-label", children: dim.label }), _jsx("div", { className: "cedros-site__filter-group-chips", children: dim.values.map((value) => {
                         const isActive = active[dim.key] === value;
                         return (_jsx("button", { type: "button", className: `cedros-site__pill${isActive ? " cedros-site__pill--active" : ""}`, onClick: () => onChange(dim.key, isActive ? "" : value), children: value }, value));
                     }) })] }, dim.key))) }));

package/dist/site-templates/blogTemplateUi.d.ts

@@ -0,0 +1,10 @@
+export interface BlogIndexControlsProps {
+    basePath: string;
+    query: string;
+    category: string;
+    tag: string;
+    sort: "newest" | "oldest" | "title-asc" | "title-desc";
+    categories: string[];
+    tags: string[];
+}
+export declare function BlogIndexControls({ basePath, query, category, tag, sort, categories, tags }: BlogIndexControlsProps): React.JSX.Element;

package/dist/site-templates/blogTemplateUi.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function BlogIndexControls({ basePath, query, category, tag, sort, categories, tags }) {
+    return (_jsxs("form", { method: "get", action: basePath, className: "cedros-site__controls cedros-site__card cedros-site__controls--blog", children: [_jsxs("div", { className: "cedros-site__controls-header", children: [_jsxs("div", { children: [_jsx("p", { className: "cedros-site__eyebrow", children: "Refine" }), _jsx("h2", { className: "cedros-site__section-title", children: "Search the editorial archive" })] }), _jsx("p", { className: "cedros-site__entry-meta", children: "Filter by category, topic, or sort order to find the right post faster." })] }), _jsxs("div", { className: "cedros-site__controls-grid", children: [_jsxs("label", { className: "cedros-site__control", children: [_jsx("span", { children: "Search" }), _jsx("input", { type: "search", name: "q", defaultValue: query, placeholder: "Search blog posts" })] }), _jsxs("label", { className: "cedros-site__control", children: [_jsx("span", { children: "Category" }), _jsxs("select", { name: "category", defaultValue: category, children: [_jsx("option", { value: "", children: "All categories" }), categories.map((entry) => (_jsx("option", { value: entry, children: entry }, entry)))] })] }), _jsxs("label", { className: "cedros-site__control", children: [_jsx("span", { children: "Tag" }), _jsxs("select", { name: "tag", defaultValue: tag, children: [_jsx("option", { value: "", children: "All topics" }), tags.map((entry) => (_jsx("option", { value: entry, children: entry }, entry)))] })] }), _jsxs("label", { className: "cedros-site__control", children: [_jsx("span", { children: "Sort" }), _jsxs("select", { name: "sort", defaultValue: sort, children: [_jsx("option", { value: "newest", children: "Newest" }), _jsx("option", { value: "oldest", children: "Oldest" }), _jsx("option", { value: "title-asc", children: "Title A-Z" }), _jsx("option", { value: "title-desc", children: "Title Z-A" })] })] }), _jsxs("div", { className: "cedros-site__control-actions", children: [_jsx("button", { className: "cedros-site__button", type: "submit", children: "Apply filters" }), _jsx("a", { className: "cedros-site__button cedros-site__button--ghost", href: basePath, children: "Clear" })] })] })] }));
+}