@jant/core 0.3.24 → 0.3.25

package/dist/{themes/threads/timeline → ui/feed}/LinkCard.js

@@ -1,5 +1,5 @@
 /**
- * Threads Theme - Link Card
+ * Link Card
  *
  * Compact link preview box — date is shown at the feed level as a group header.
  */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
@@ -14,7 +14,9 @@ export const LinkCard = ({ post, compact })=>{
         }
     }
     return /*#__PURE__*/ _jsxs("article", {
-        class: `h-entry${compact ? " threads-compact" : ""}`,
+        class: `h-entry${compact ? " feed-compact" : ""}`,
+        "data-post": true,
+        "data-format": "link",
         children: [
             domain && /*#__PURE__*/ _jsxs("div", {
                 class: "text-xs text-muted-foreground mb-1 flex items-center gap-1",
@@ -47,12 +49,14 @@ export const LinkCard = ({ post, compact })=>{
             }),
             !compact && post.bodyHtml && /*#__PURE__*/ _jsx("div", {
                 class: "e-content prose text-muted-foreground",
+                "data-post-body": true,
                 dangerouslySetInnerHTML: {
                     __html: post.bodyHtml
                 }
             }),
             /*#__PURE__*/ _jsx("footer", {
                 class: "mt-2 text-xs text-muted-foreground",
+                "data-post-meta": true,
                 children: /*#__PURE__*/ _jsx("a", {
                     href: post.permalink,
                     class: "hover:underline",

package/dist/{themes/threads/timeline → ui/feed}/NoteCard.js

@@ -1,15 +1,17 @@
 /**
- * Threads Theme - Note Card
+ * Note Card
  *
- * Without title: plain text note — date is shown at the feed level as a group header.
+ * Without title: plain text note with full date in footer.
  * With title: article-style rendering with summary excerpt and "Read more" link.
  */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
-import { MediaGallery } from "../../../theme/index.js";
+import { MediaGallery } from "../shared/MediaGallery.js";
 export const NoteCard = ({ post, compact })=>{
     const isArticle = !!post.title;
     const displayHtml = isArticle ? post.summaryHtml : post.bodyHtml;
     return /*#__PURE__*/ _jsxs("article", {
-        class: `h-entry${compact ? " threads-compact" : ""}`,
+        class: `h-entry${compact ? " feed-compact" : ""}`,
+        "data-post": true,
+        "data-format": "note",
         children: [
             isArticle && /*#__PURE__*/ _jsx("h2", {
                 class: `p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`,
@@ -21,12 +23,14 @@ export const NoteCard = ({ post, compact })=>{
             }),
             displayHtml && /*#__PURE__*/ _jsx("div", {
                 class: `e-content prose ${compact ? "prose-sm" : isArticle ? "text-muted-foreground" : ""}`,
+                "data-post-body": true,
                 dangerouslySetInnerHTML: {
                     __html: displayHtml
                 }
             }),
             !compact && post.media.length > 0 && /*#__PURE__*/ _jsx("div", {
-                class: "threads-media mt-3",
+                class: "mt-3",
+                "data-post-media": true,
                 children: /*#__PURE__*/ _jsx(MediaGallery, {
                     attachments: post.media
                 })
@@ -38,13 +42,14 @@ export const NoteCard = ({ post, compact })=>{
             }),
             /*#__PURE__*/ _jsx("footer", {
                 class: "mt-2",
+                "data-post-meta": true,
                 children: /*#__PURE__*/ _jsx("a", {
                     href: post.permalink,
                     class: "u-url text-xs text-muted-foreground hover:underline",
                     children: /*#__PURE__*/ _jsx("time", {
                         class: "dt-published",
                         datetime: post.publishedAt,
-                        children: post.publishedAtRelative
+                        children: post.publishedAtFormatted
                     })
                 })
             })

package/dist/{themes/threads/timeline → ui/feed}/QuoteCard.js

@@ -1,9 +1,9 @@
 /**
- * Threads Theme - Quote Card
+ * Quote Card
  *
- * Left-border accent blockquote — date is shown at the feed level as a group header.
+ * Left-border accent blockquote with full date in footer.
  *
- * v2 fields:
+ * Fields:
  * - quoteText: the quoted text
  * - title: attribution (who said it)
  * - url: source link
@@ -11,10 +11,12 @@
  */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
 export const QuoteCard = ({ post, compact })=>{
     return /*#__PURE__*/ _jsxs("article", {
-        class: `h-entry${compact ? " threads-compact" : ""}`,
+        class: `h-entry${compact ? " feed-compact" : ""}`,
+        "data-post": true,
+        "data-format": "quote",
         children: [
             post.quoteText && /*#__PURE__*/ _jsx("blockquote", {
-                class: "threads-quote",
+                class: "feed-quote",
                 children: /*#__PURE__*/ _jsx("div", {
                     class: `e-content ${compact ? "text-sm" : "text-base"} leading-relaxed`,
                     children: post.quoteText
@@ -38,19 +40,21 @@ export const QuoteCard = ({ post, compact })=>{
             }),
             !compact && post.bodyHtml && /*#__PURE__*/ _jsx("div", {
                 class: "mt-3 prose text-muted-foreground",
+                "data-post-body": true,
                 dangerouslySetInnerHTML: {
                     __html: post.bodyHtml
                 }
             }),
             /*#__PURE__*/ _jsx("footer", {
                 class: "mt-2",
+                "data-post-meta": true,
                 children: /*#__PURE__*/ _jsx("a", {
                     href: post.permalink,
                     class: "u-url text-xs text-muted-foreground hover:underline",
                     children: /*#__PURE__*/ _jsx("time", {
                         class: "dt-published",
                         datetime: post.publishedAt,
-                        children: post.publishedAtRelative
+                        children: post.publishedAtFormatted
                     })
                 })
             })

package/dist/{themes/threads/timeline → ui/feed}/ThreadPreview.js

@@ -1,12 +1,12 @@
 /**
- * Threads Theme - Thread Preview
+ * Thread Preview
  *
  * Root post + vertical line connector + compact replies underneath.
  */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
 import { useLingui as $_useLingui } from "@jant/core/i18n";
 import { TimelineItem } from "./TimelineItem.js";
 import { TimelineItemFromPost } from "./TimelineItem.js";
-export const ThreadPreview = ({ rootPost, previewReplies, totalReplyCount, theme })=>{
+export const ThreadPreview = ({ rootPost, previewReplies, totalReplyCount })=>{
     const { i18n: $__i18n, _: $__ } = $_useLingui();
     const remainingCount = totalReplyCount - previewReplies.length;
     return /*#__PURE__*/ _jsxs("div", {
@@ -14,22 +14,20 @@ export const ThreadPreview = ({ rootPost, previewReplies, totalReplyCount, theme
             /*#__PURE__*/ _jsx(TimelineItem, {
                 item: {
                     post: rootPost
-                },
-                theme: theme
+                }
             }),
             previewReplies.length > 0 && /*#__PURE__*/ _jsxs("div", {
-                class: "threads-replies",
+                class: "feed-replies",
                 children: [
                     previewReplies.map((reply)=>/*#__PURE__*/ _jsx("div", {
-                            class: "threads-reply",
+                            class: "feed-reply",
                             children: /*#__PURE__*/ _jsx(TimelineItemFromPost, {
                                 post: reply,
-                                compact: true,
-                                theme: theme
+                                compact: true
                             })
                         }, reply.id)),
                     remainingCount > 0 && /*#__PURE__*/ _jsx("div", {
-                        class: "threads-reply",
+                        class: "feed-reply",
                         children: /*#__PURE__*/ _jsx("a", {
                             href: rootPost.permalink,
                             class: "text-sm text-muted-foreground hover:text-foreground hover:underline",

package/dist/ui/feed/TimelineFeed.js

@@ -0,0 +1,41 @@
+/**
+ * Timeline Feed
+ *
+ * Flat list of posts separated by simple dividers.
+ */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { TimelineItem } from "./TimelineItem.js";
+import { ThreadPreview } from "./ThreadPreview.js";
+import { PagePagination } from "../shared/Pagination.js";
+export const TimelineFeed = ({ items, currentPage, totalPages })=>{
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-feed": true,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                id: "timeline-feed",
+                children: /*#__PURE__*/ _jsx("div", {
+                    id: "timeline-items",
+                    class: "flex flex-col",
+                    children: items.map((item, i)=>/*#__PURE__*/ _jsxs("div", {
+                            children: [
+                                i > 0 && /*#__PURE__*/ _jsx("hr", {
+                                    class: "feed-divider"
+                                }),
+                                item.threadPreview ? /*#__PURE__*/ _jsx(ThreadPreview, {
+                                    rootPost: item.post,
+                                    previewReplies: item.threadPreview.replies,
+                                    totalReplyCount: item.threadPreview.totalReplyCount
+                                }) : /*#__PURE__*/ _jsx(TimelineItem, {
+                                    item: item
+                                })
+                            ]
+                        }, item.post.id))
+                })
+            }),
+            currentPage !== undefined && totalPages !== undefined && totalPages > 1 && /*#__PURE__*/ _jsx(PagePagination, {
+                baseUrl: "/",
+                currentPage: currentPage,
+                totalPages: totalPages
+            })
+        ]
+    });
+};

package/dist/ui/feed/TimelineItem.js

@@ -0,0 +1,27 @@
+/**
+ * Timeline Item
+ *
+ * Dispatches to the correct card component based on post format.
+ */ import { jsx as _jsx } from "hono/jsx/jsx-runtime";
+import { NoteCard } from "./NoteCard.js";
+import { LinkCard } from "./LinkCard.js";
+import { QuoteCard } from "./QuoteCard.js";
+const CARD_MAP = {
+    note: NoteCard,
+    link: LinkCard,
+    quote: QuoteCard
+};
+export const TimelineItem = ({ item, compact })=>{
+    const Card = CARD_MAP[item.post.format];
+    return /*#__PURE__*/ _jsx(Card, {
+        post: item.post,
+        compact: compact
+    });
+};
+export const TimelineItemFromPost = ({ post, compact })=>{
+    const Card = CARD_MAP[post.format];
+    return /*#__PURE__*/ _jsx(Card, {
+        post: post,
+        compact: compact
+    });
+};

package/dist/{theme → ui}/layouts/BaseLayout.js

@@ -18,6 +18,10 @@ export const BaseLayout = ({ title, description, lang, c, toast, children })=>{
     }) : children;
     // Read theme style from Hono context if available
     const themeStyle = c ? c.get("themeStyle") : undefined;
+    // Read custom CSS from Hono context if available
+    const customCSS = c ? c.get("customCSS") : undefined;
+    // Check authentication status for data attribute
+    const isAuthenticated = c ? c.get("isAuthenticated") : false;
     return /*#__PURE__*/ _jsxs("html", {
         lang: resolvedLang,
         children: [
@@ -45,6 +49,9 @@ export const BaseLayout = ({ title, description, lang, c, toast, children })=>{
                     themeStyle && /*#__PURE__*/ _jsx("style", {
                         children: themeStyle
                     }),
+                    customCSS && /*#__PURE__*/ _jsx("style", {
+                        children: customCSS
+                    }),
                     /*#__PURE__*/ _jsx(Script, {
                         src: "/src/client.ts"
                     })
@@ -52,6 +59,9 @@ export const BaseLayout = ({ title, description, lang, c, toast, children })=>{
             }),
             /*#__PURE__*/ _jsxs("body", {
                 class: "bg-background text-foreground antialiased",
+                ...isAuthenticated ? {
+                    "data-authenticated": true
+                } : {},
                 children: [
                     content,
                     /*#__PURE__*/ _jsx("div", {

package/dist/{theme → ui}/layouts/DashLayout.js

@@ -107,14 +107,6 @@ function DashLayoutContent({ siteName, currentPath, children }) {
                                         message: "Redirects"
                                     })
                                 }),
-                                /*#__PURE__*/ _jsx("a", {
-                                    href: "/dash/navigation",
-                                    class: navClass("/dash/navigation", /^\/dash\/navigation/),
-                                    children: $__i18n._({
-                                        id: "UxKoFf",
-                                        message: "Navigation"
-                                    })
-                                }),
                                 /*#__PURE__*/ _jsx("a", {
                                     href: "/dash/settings",
                                     class: navClass("/dash/settings", /^\/dash\/settings/),

package/dist/ui/layouts/SiteLayout.js

@@ -0,0 +1,141 @@
+/**
+ * Site Layout
+ *
+ * Vertical header: site name on top, custom nav links below, description under nav.
+ * Content area with browse filter tabs and compose prompt/dialog for authenticated users.
+ */ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "hono/jsx/jsx-runtime";
+import { useLingui as $_useLingui } from "@jant/core/i18n";
+import { ComposeDialog } from "../compose/ComposeDialog.js";
+import { ComposePrompt } from "../compose/ComposePrompt.js";
+function HeaderLink({ link }) {
+    return /*#__PURE__*/ _jsx("a", {
+        href: link.url,
+        class: `site-header-link ${link.isActive ? "site-header-link-active" : ""}`,
+        ...link.isExternal ? {
+            target: "_blank",
+            rel: "noopener noreferrer"
+        } : {},
+        children: link.label
+    });
+}
+export const SiteLayout = ({ siteName, siteDescription, links, currentPath, isAuthenticated, collections, children })=>{
+    const { i18n: $__i18n, _: $__ } = $_useLingui();
+    const browseLinks = [
+        {
+            href: "/",
+            label: $__i18n._({
+                id: "wL3cK8",
+                message: "Latest"
+            })
+        },
+        {
+            href: "/featured",
+            label: $__i18n._({
+                id: "FkMol5",
+                message: "Featured"
+            })
+        }
+    ];
+    const searchLabel = $__i18n._({
+        id: "A1taO8",
+        message: "Search"
+    });
+    const isHomePage = currentPath === "/" || currentPath === "/featured";
+    return /*#__PURE__*/ _jsxs("div", {
+        class: "site-page",
+        children: [
+            /*#__PURE__*/ _jsx("header", {
+                class: "site-header",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    class: "site-header-inner",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            class: "site-header-top site-header-top-bordered",
+                            children: [
+                                /*#__PURE__*/ _jsx("a", {
+                                    href: "/",
+                                    class: "site-logo",
+                                    children: siteName
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    class: "site-header-right",
+                                    children: [
+                                        links.length > 0 && /*#__PURE__*/ _jsx("nav", {
+                                            class: "site-header-nav",
+                                            children: links.map((link)=>/*#__PURE__*/ _jsx(HeaderLink, {
+                                                    link: link
+                                                }, link.id))
+                                        }),
+                                        /*#__PURE__*/ _jsx("a", {
+                                            href: "/search",
+                                            class: `site-header-search ${currentPath === "/search" ? "site-header-search-active" : ""}`,
+                                            "aria-label": searchLabel,
+                                            title: searchLabel,
+                                            children: /*#__PURE__*/ _jsxs("svg", {
+                                                xmlns: "http://www.w3.org/2000/svg",
+                                                width: "16",
+                                                height: "16",
+                                                viewBox: "0 0 24 24",
+                                                fill: "none",
+                                                stroke: "currentColor",
+                                                "stroke-width": "2",
+                                                "stroke-linecap": "round",
+                                                "stroke-linejoin": "round",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("circle", {
+                                                        cx: "11",
+                                                        cy: "11",
+                                                        r: "8"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("path", {
+                                                        d: "m21 21-4.35-4.35"
+                                                    })
+                                                ]
+                                            })
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        isHomePage && siteDescription && /*#__PURE__*/ _jsx("p", {
+                            class: "site-description",
+                            children: siteDescription
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx("main", {
+                class: "site-main",
+                children: /*#__PURE__*/ _jsx("div", {
+                    class: "site-container",
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        class: "site-content",
+                        children: [
+                            isHomePage && /*#__PURE__*/ _jsx("nav", {
+                                class: "site-browse-nav",
+                                children: browseLinks.map((link, i)=>/*#__PURE__*/ _jsxs(_Fragment, {
+                                        children: [
+                                            i > 0 && /*#__PURE__*/ _jsx("span", {
+                                                class: "site-browse-sep",
+                                                children: "/"
+                                            }),
+                                            /*#__PURE__*/ _jsx("a", {
+                                                href: link.href,
+                                                class: `site-browse-link ${currentPath === link.href ? "site-browse-link-active" : ""}`,
+                                                children: link.label
+                                            }, link.href)
+                                        ]
+                                    }))
+                            }),
+                            isHomePage && isAuthenticated && /*#__PURE__*/ _jsx(ComposePrompt, {}),
+                            children
+                        ]
+                    })
+                })
+            }),
+            isAuthenticated && /*#__PURE__*/ _jsx(ComposeDialog, {
+                collections: collections
+            })
+        ]
+    });
+};

package/dist/{themes/threads → ui}/pages/ArchivePage.js

@@ -1,11 +1,11 @@
 /**
- * Threads Theme - Archive Page
+ * Archive Page
  *
  * Posts grouped by year-month with format filter and cursor pagination.
  */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
 import { useLingui as $_useLingui } from "@jant/core/i18n";
-import { FORMATS } from "../../../types.js";
-import { Pagination as DefaultPagination } from "../../../theme/index.js";
+import { FORMATS } from "../../types.js";
+import { Pagination } from "../shared/Pagination.js";
 function getFormatLabel(format) {
     const { i18n: $__i18n, _: $__ } = $_useLingui();
     const labels = {
@@ -40,17 +40,17 @@ function getFormatLabelPlural(format) {
             message: "Quotes"
         })
     };
-    return labels[format] ?? `${format}s`;
+    return labels[format] ?? format + "s";
 }
-export const ArchivePage = ({ groups, hasMore, nextCursor, format, featured, theme })=>{
+export const ArchivePage = ({ groups, hasMore, nextCursor, format, featured })=>{
     const { i18n: $__i18n, _: $__ } = $_useLingui();
     const title = format ? getFormatLabelPlural(format) : $__i18n._({
         id: "B495Gs",
         message: "Archive"
     });
-    const PaginationComponent = theme?.Pagination ?? DefaultPagination;
     return /*#__PURE__*/ _jsxs("div", {
         class: "py-6",
+        "data-page": "archive",
         children: [
             /*#__PURE__*/ _jsxs("header", {
                 class: "mb-8",
@@ -64,20 +64,20 @@ export const ArchivePage = ({ groups, hasMore, nextCursor, format, featured, the
                         children: [
                             /*#__PURE__*/ _jsx("a", {
                                 href: "/archive",
-                                class: `badge ${!format && !featured ? "badge-primary" : "badge-outline"}`,
+                                class: "badge " + (!format && !featured ? "badge-primary" : "badge-outline"),
                                 children: $__i18n._({
                                     id: "N40H+G",
                                     message: "All"
                                 })
                             }),
                             FORMATS.map((formatKey)=>/*#__PURE__*/ _jsx("a", {
-                                    href: `/archive?format=${formatKey}`,
-                                    class: `badge ${format === formatKey ? "badge-primary" : "badge-outline"}`,
+                                    href: "/archive?format=" + formatKey,
+                                    class: "badge " + (format === formatKey ? "badge-primary" : "badge-outline"),
                                     children: getFormatLabelPlural(formatKey)
                                 }, formatKey)),
                             /*#__PURE__*/ _jsx("a", {
                                 href: "/archive?featured=true",
-                                class: `badge ${featured ? "badge-primary" : "badge-outline"}`,
+                                class: "badge " + (featured ? "badge-primary" : "badge-outline"),
                                 children: $__i18n._({
                                     id: "FkMol5",
                                     message: "Featured"
@@ -105,6 +105,8 @@ export const ArchivePage = ({ groups, hasMore, nextCursor, format, featured, the
                                 class: "divide-y divide-border",
                                 children: group.posts.map((post)=>/*#__PURE__*/ _jsxs("article", {
                                         class: "flex items-baseline gap-4 py-2.5",
+                                        "data-post": true,
+                                        "data-format": post.format,
                                         children: [
                                             /*#__PURE__*/ _jsx("time", {
                                                 class: "text-sm text-muted-foreground w-12 shrink-0",
@@ -117,7 +119,7 @@ export const ArchivePage = ({ groups, hasMore, nextCursor, format, featured, the
                                                     /*#__PURE__*/ _jsx("a", {
                                                         href: post.permalink,
                                                         class: "hover:underline",
-                                                        children: post.title || post.excerpt?.slice(0, 80) || `Post #${post.id}`
+                                                        children: post.title || post.excerpt?.slice(0, 80) || "Post #" + post.id
                                                     }),
                                                     !format && /*#__PURE__*/ _jsx("span", {
                                                         class: "ml-2 badge-outline text-xs",
@@ -129,10 +131,10 @@ export const ArchivePage = ({ groups, hasMore, nextCursor, format, featured, the
                                     }, post.id))
                             })
                         ]
-                    }, `${group.year}-${group.month}`))
+                    }, group.year + "-" + group.month))
             }),
-            /*#__PURE__*/ _jsx(PaginationComponent, {
-                baseUrl: format ? `/archive?format=${format}` : featured ? "/archive?featured=true" : "/archive",
+            /*#__PURE__*/ _jsx(Pagination, {
+                baseUrl: format ? "/archive?format=" + format : featured ? "/archive?featured=true" : "/archive",
                 hasMore: hasMore,
                 nextCursor: nextCursor
             })

package/dist/{themes/threads → ui}/pages/CollectionPage.js

@@ -1,5 +1,5 @@
 /**
- * Threads Theme - Collection Page
+ * Collection Page
  *
  * Collection header with divider-separated post list.
  */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
@@ -8,6 +8,7 @@ export const CollectionPage = ({ collection, posts })=>{
     const { i18n: $__i18n, _: $__ } = $_useLingui();
     return /*#__PURE__*/ _jsxs("div", {
         class: "py-6",
+        "data-page": "collection",
         children: [
             /*#__PURE__*/ _jsxs("header", {
                 class: "mb-8",
@@ -33,6 +34,8 @@ export const CollectionPage = ({ collection, posts })=>{
                     class: "divide-y divide-border",
                     children: posts.map((post)=>/*#__PURE__*/ _jsxs("article", {
                             class: "h-entry py-4",
+                            "data-post": true,
+                            "data-format": post.format,
                             children: [
                                 post.title && /*#__PURE__*/ _jsx("h2", {
                                     class: "p-name text-lg font-medium mb-2",
@@ -44,12 +47,14 @@ export const CollectionPage = ({ collection, posts })=>{
                                 }),
                                 /*#__PURE__*/ _jsx("div", {
                                     class: "e-content prose prose-sm",
+                                    "data-post-body": true,
                                     dangerouslySetInnerHTML: {
                                         __html: post.bodyHtml || ""
                                     }
                                 }),
                                 /*#__PURE__*/ _jsx("footer", {
                                     class: "mt-2 text-sm text-muted-foreground",
+                                    "data-post-meta": true,
                                     children: /*#__PURE__*/ _jsx("time", {
                                         class: "dt-published",
                                         datetime: post.publishedAt,

package/dist/ui/pages/CollectionsPage.js

@@ -0,0 +1,76 @@
+/**
+ * Collections Listing Page
+ *
+ * Lists all collections with titles, descriptions, and post counts.
+ */ import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+import { useLingui as $_useLingui } from "@jant/core/i18n";
+export const CollectionsPage = ({ collections })=>{
+    const { i18n: $__i18n, _: $__ } = $_useLingui();
+    return /*#__PURE__*/ _jsxs("div", {
+        class: "py-6",
+        "data-page": "collections",
+        children: [
+            /*#__PURE__*/ _jsx("header", {
+                class: "mb-8",
+                children: /*#__PURE__*/ _jsx("h1", {
+                    class: "text-2xl font-semibold",
+                    children: $__i18n._({
+                        id: "DoJzLz",
+                        message: "Collections"
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx("main", {
+                children: collections.length === 0 ? /*#__PURE__*/ _jsx("p", {
+                    class: "text-muted-foreground",
+                    children: $__i18n._({
+                        id: "+MACwa",
+                        message: "No collections yet."
+                    })
+                }) : /*#__PURE__*/ _jsx("div", {
+                    class: "divide-y divide-border",
+                    children: collections.map((collection)=>/*#__PURE__*/ _jsx("a", {
+                            href: "/c/" + collection.slug,
+                            class: "block py-4 hover:bg-accent/50 -mx-4 px-4 rounded-md transition-colors",
+                            children: /*#__PURE__*/ _jsxs("div", {
+                                class: "flex items-center gap-3",
+                                children: [
+                                    collection.icon && /*#__PURE__*/ _jsx("span", {
+                                        class: "text-2xl",
+                                        children: collection.icon
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        class: "flex-1 min-w-0",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("h2", {
+                                                class: "font-medium",
+                                                children: collection.title
+                                            }),
+                                            collection.description && /*#__PURE__*/ _jsx("p", {
+                                                class: "text-sm text-muted-foreground mt-1",
+                                                children: collection.description
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        class: "text-sm text-muted-foreground shrink-0",
+                                        children: [
+                                            collection.postCount,
+                                            " ",
+                                            collection.postCount === 1 ? $__i18n._({
+                                                id: "GHg6h/",
+                                                message: "post"
+                                            }) : $__i18n._({
+                                                id: "jt/Ow/",
+                                                message: "posts"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        }, collection.id))
+                })
+            })
+        ]
+    });
+};