@jant/core 0.3.23 → 0.3.24

package/dist/lib/schemas.js

@@ -1,5 +1,5 @@
 /**
- * Shared Zod schemas for validation
+ * Shared Zod schemas for validation (v2)
  *
  * These schemas ensure type-safe validation of user input
  * from forms, API requests, and other external sources.
@@ -7,15 +7,21 @@
  * IMPORTANT: Types are defined in types.ts as the single source of truth.
  * This file only defines Zod validation schemas based on those types.
  */ import { z } from "zod";
-import { POST_TYPES, VISIBILITY_LEVELS, MAX_MEDIA_ATTACHMENTS, POST_TYPE_MEDIA_RULES } from "../types.js";
+import { FORMATS, STATUSES, SORT_ORDERS, NAV_ITEM_TYPES, MAX_MEDIA_ATTACHMENTS } from "../types.js";
 /**
- * Post type enum schema
- * Based on POST_TYPES from types.ts
- */ export const PostTypeSchema = z.enum(POST_TYPES);
+ * Post format enum schema
+ * Based on FORMATS from types.ts
+ */ export const FormatSchema = z.enum(FORMATS);
 /**
- * Visibility enum schema
- * Based on VISIBILITY_LEVELS from types.ts
- */ export const VisibilitySchema = z.enum(VISIBILITY_LEVELS);
+ * Post status enum schema
+ * Based on STATUSES from types.ts
+ */ export const StatusSchema = z.enum(STATUSES);
+/**
+ * Collection sort order enum schema
+ */ export const SortOrderSchema = z.enum(SORT_ORDERS);
+/**
+ * Navigation item type enum schema
+ */ export const NavItemTypeSchema = z.enum(NAV_ITEM_TYPES);
 /**
  * Redirect type enum schema
  * Form input validation for redirect type (stored as number in DB)
@@ -23,16 +29,29 @@ import { POST_TYPES, VISIBILITY_LEVELS, MAX_MEDIA_ATTACHMENTS, POST_TYPE_MEDIA_R
     "301",
     "302"
 ]);
+/**
+ * Rating schema (1-5 integer)
+ */ export const RatingSchema = z.coerce.number().int().min(1).max(5).optional().or(z.literal("").transform(()=>undefined));
 /**
  * API request body schema for creating a post
  */ export const CreatePostSchema = z.object({
-    type: PostTypeSchema,
+    format: FormatSchema,
+    slug: z.string().regex(/^[a-z0-9][a-z0-9-]*[a-z0-9]$|^[a-z0-9]$/).optional().or(z.literal("").transform(()=>undefined)),
     title: z.string().optional(),
-    content: z.string(),
-    visibility: VisibilitySchema,
-    sourceUrl: z.url().optional().or(z.literal("")),
-    sourceName: z.string().optional(),
-    path: z.string().regex(/^[a-z0-9-]*$/).optional().or(z.literal("")),
+    body: z.string().optional(),
+    status: StatusSchema.optional(),
+    featured: z.union([
+        z.boolean(),
+        z.literal("on").transform(()=>true)
+    ]).optional(),
+    pinned: z.union([
+        z.boolean(),
+        z.literal("on").transform(()=>true)
+    ]).optional(),
+    url: z.url().optional().or(z.literal("")),
+    quoteText: z.string().optional(),
+    rating: RatingSchema,
+    collectionId: z.coerce.number().int().positive().optional().or(z.literal("").transform(()=>undefined)),
     replyToId: z.string().optional(),
     publishedAt: z.number().int().positive().optional(),
     mediaIds: z.array(z.string()).max(MAX_MEDIA_ATTACHMENTS).optional()
@@ -40,13 +59,53 @@ import { POST_TYPES, VISIBILITY_LEVELS, MAX_MEDIA_ATTACHMENTS, POST_TYPE_MEDIA_R
 /**
  * API request body schema for updating a post
  */ export const UpdatePostSchema = CreatePostSchema.partial();
+/**
+ * API request body schema for creating a page
+ */ export const CreatePageSchema = z.object({
+    slug: z.string().min(1).regex(/^[a-z0-9][a-z0-9-]*[a-z0-9]$|^[a-z0-9]$/),
+    title: z.string().optional(),
+    body: z.string().optional(),
+    status: StatusSchema.optional()
+});
+/**
+ * API request body schema for updating a page
+ */ export const UpdatePageSchema = CreatePageSchema.partial();
+/**
+ * API request body schema for creating a navigation item
+ */ export const CreateNavItemSchema = z.object({
+    type: NavItemTypeSchema,
+    label: z.string().min(1),
+    url: z.string().min(1),
+    pageId: z.coerce.number().int().positive().optional(),
+    position: z.coerce.number().int().min(0).optional()
+});
+/**
+ * API request body schema for updating a navigation item
+ */ export const UpdateNavItemSchema = CreateNavItemSchema.partial();
+/**
+ * API request body schema for creating a collection
+ */ export const CreateCollectionSchema = z.object({
+    slug: z.string().min(1).regex(/^[a-z0-9][a-z0-9-]*[a-z0-9]$|^[a-z0-9]$/),
+    title: z.string().min(1),
+    description: z.string().optional(),
+    icon: z.string().optional(),
+    sortOrder: SortOrderSchema.optional(),
+    position: z.coerce.number().int().min(0).optional(),
+    showDivider: z.union([
+        z.boolean(),
+        z.literal("on").transform(()=>true)
+    ]).optional()
+});
+/**
+ * API request body schema for updating a collection
+ */ export const UpdateCollectionSchema = CreateCollectionSchema.partial();
 /**
  * Form data helper: safely parse a FormData value with a schema
  *
  * @example
  * ```ts
- * const type = parseFormData(formData, "type", PostTypeSchema);
- * // type is PostType, throws if invalid
+ * const format = parseFormData(formData, "format", FormatSchema);
+ * // format is Format, throws if invalid
  * ```
  */ export function parseFormData(formData, key, schema) {
     const value = formData.get(key);
@@ -71,31 +130,14 @@ import { POST_TYPES, VISIBILITY_LEVELS, MAX_MEDIA_ATTACHMENTS, POST_TYPE_MEDIA_R
     return schema.parse(value);
 }
 /**
- * Validates media attachment count against post type rules.
+ * Validates media attachment count for a post.
+ * All formats allow 0-20 media attachments.
  *
- * @param type - The post type to validate against
  * @param mediaIds - Array of media IDs to attach
  * @returns null if valid, error string if invalid
- *
- * @example
- * ```ts
- * const error = validateMediaForPostType("image", []);
- * // Returns: "image posts require at least 1 media attachment"
- * ```
- */ export function validateMediaForPostType(type, mediaIds) {
-    const rules = POST_TYPE_MEDIA_RULES[type];
-    if (rules === null) {
-        if (mediaIds.length > 0) {
-            return `${type} posts do not allow media attachments`;
-        }
-        return null;
-    }
-    const [min, max] = rules;
-    if (mediaIds.length < min) {
-        return `${type} posts require at least ${min} media attachment${min !== 1 ? "s" : ""}`;
-    }
-    if (mediaIds.length > max) {
-        return `${type} posts allow at most ${max} media attachment${max !== 1 ? "s" : ""}`;
+ */ export function validateMediaCount(mediaIds) {
+    if (mediaIds.length > MAX_MEDIA_ATTACHMENTS) {
+        return `Posts allow at most ${MAX_MEDIA_ATTACHMENTS} media attachments`;
     }
     return null;
 }

package/dist/lib/theme-components.js

@@ -4,11 +4,8 @@
  * Resolves theme-overridable components, falling back to defaults.
  */ const THEME_KEY_MAP = {
     note: "NoteCard",
-    article: "ArticleCard",
     link: "LinkCard",
-    quote: "QuoteCard",
-    image: "ImageCard",
-    page: "NoteCard"
+    quote: "QuoteCard"
 };
 /**
  * Generic component resolver.
@@ -29,21 +26,21 @@
     return themeComponents?.[key] ?? defaultComponent;
 }
 /**
- * Resolves the card component for a given post type.
+ * Resolves the card component for a given post format.
  *
  * Checks theme overrides first, then falls back to the provided default card component.
  *
- * @param type - The post type to resolve a card for
- * @param defaults - Map of post type to default card component
+ * @param format - The post format to resolve a card for
+ * @param defaults - Map of format to default card component
  * @param themeComponents - Optional theme component overrides
  * @returns The resolved card component
  *
  * @example
  * ```ts
- * const Card = resolveCardComponent("article", DEFAULT_CARD_MAP, c.var.config.theme?.components);
+ * const Card = resolveCardComponent("note", DEFAULT_CARD_MAP, c.var.config.theme?.components);
  * ```
- */ export function resolveCardComponent(type, defaults, themeComponents) {
-    const key = THEME_KEY_MAP[type];
+ */ export function resolveCardComponent(format, defaults, themeComponents) {
+    const key = THEME_KEY_MAP[format];
     const override = themeComponents?.[key];
-    return override ?? defaults[type];
+    return override ?? defaults[format];
 }

package/dist/lib/time.js

@@ -96,7 +96,62 @@
  * const yearMonth = formatYearMonth(1706745600);
  * // Returns: "2024-02"
  * ```
- */ export function formatYearMonth(timestamp) {
+ */ /**
+ * Formats a Unix timestamp as a 24-hour time string (HH:MM).
+ *
+ * Converts a Unix timestamp (in seconds) to a zero-padded time string in
+ * 24-hour format. Always uses UTC timezone for consistency.
+ *
+ * @param timestamp - Unix timestamp in seconds to format
+ * @returns Formatted time string in "HH:MM" format
+ *
+ * @example
+ * ```ts
+ * const time = formatTime(1706745600);
+ * // Returns: "00:00"
+ * ```
+ */ export function formatTime(timestamp) {
+    const date = new Date(timestamp * 1000);
+    const hours = String(date.getUTCHours()).padStart(2, "0");
+    const minutes = String(date.getUTCMinutes()).padStart(2, "0");
+    return `${hours}:${minutes}`;
+}
+/**
+ * Formats a Unix timestamp as a short relative time string.
+ *
+ * Returns compact labels like "1m", "5h", "3d" for recent timestamps,
+ * and falls back to "MMM D" (e.g. "Feb 1") for anything older than 7 days.
+ *
+ * @param timestamp - Unix timestamp in seconds
+ * @returns Short relative time string
+ *
+ * @example
+ * ```ts
+ * // Assuming current time is Feb 16, 2026
+ * formatRelativeTime(now() - 30);       // "1m"  (30 seconds → rounds up)
+ * formatRelativeTime(now() - 3600);     // "1h"
+ * formatRelativeTime(now() - 86400);    // "1d"
+ * formatRelativeTime(now() - 604800);   // "7d"
+ * formatRelativeTime(now() - 864000);   // "Feb 6"
+ * ```
+ */ export function formatRelativeTime(timestamp) {
+    const seconds = now() - timestamp;
+    if (seconds < 60) return "1m";
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return `${minutes}m`;
+    const hours = Math.floor(seconds / 3600);
+    if (hours < 24) return `${hours}h`;
+    const days = Math.floor(seconds / 86400);
+    if (days <= 7) return `${days}d`;
+    // Older than 7 days: show "MMM D" (e.g. "Feb 1")
+    const date = new Date(timestamp * 1000);
+    return date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        timeZone: "UTC"
+    });
+}
+export function formatYearMonth(timestamp) {
     const date = new Date(timestamp * 1000);
     const year = date.getUTCFullYear();
     const month = String(date.getUTCMonth() + 1).padStart(2, "0");

package/dist/lib/timeline.js

@@ -0,0 +1,119 @@
+/**
+ * Timeline Data Assembly
+ *
+ * Shared helper for assembling timeline items with media and thread previews.
+ * Used by both full-page rendering and load-more SSE responses.
+ */ import { buildMediaMap } from "./media-helpers.js";
+import { createMediaContext, toPostView, toPostViews } from "./view.js";
+const DEFAULT_PAGE_SIZE = 20;
+/**
+ * Assembles a page of timeline items with media attachments and thread previews.
+ *
+ * Fetches posts, batch-loads media, identifies threads, and returns
+ * render-ready `TimelineItemView[]` with pagination info.
+ *
+ * @param c - Hono context (provides services + env)
+ * @param options - Optional cursor for pagination
+ * @returns Assembled timeline items with pagination info
+ *
+ * @example
+ * ```ts
+ * const { items, hasMore, nextCursor } = await assembleTimeline(c);
+ * const { items, hasMore, nextCursor } = await assembleTimeline(c, { cursor: 42 });
+ * ```
+ */ export async function assembleTimeline(c, options) {
+    const pageSize = parseInt(c.env.PAGE_SIZE ?? String(DEFAULT_PAGE_SIZE), 10) || DEFAULT_PAGE_SIZE;
+    // Fetch one extra to determine if there are more
+    const posts = await c.var.services.posts.list({
+        status: "published",
+        excludeReplies: true,
+        limit: pageSize + 1,
+        cursor: options?.cursor
+    });
+    const hasMore = posts.length > pageSize;
+    const displayPosts = hasMore ? posts.slice(0, pageSize) : posts;
+    if (displayPosts.length === 0) {
+        return {
+            items: [],
+            hasMore: false
+        };
+    }
+    // Batch load media attachments
+    const postIds = displayPosts.map((p)=>p.id);
+    const rawMediaMap = await c.var.services.media.getByPostIds(postIds);
+    const mediaCtx = createMediaContext(c);
+    const mediaMap = buildMediaMap(rawMediaMap, mediaCtx.r2PublicUrl, mediaCtx.imageTransformUrl, mediaCtx.s3PublicUrl);
+    // Get reply counts to identify thread roots
+    const replyCounts = await c.var.services.posts.getReplyCounts(postIds);
+    const threadRootIds = postIds.filter((id)=>(replyCounts.get(id) ?? 0) > 0);
+    // Batch load thread previews
+    const threadPreviews = await c.var.services.posts.getThreadPreviews(threadRootIds, 3);
+    // Batch load media for preview replies
+    const previewReplyIds = [];
+    for (const replies of threadPreviews.values()){
+        for (const reply of replies){
+            previewReplyIds.push(reply.id);
+        }
+    }
+    const previewMediaMap = previewReplyIds.length > 0 ? buildMediaMap(await c.var.services.media.getByPostIds(previewReplyIds), mediaCtx.r2PublicUrl, mediaCtx.imageTransformUrl, mediaCtx.s3PublicUrl) : new Map();
+    // Assemble timeline items with View Models
+    const items = displayPosts.map((post)=>{
+        const postView = toPostView({
+            ...post,
+            mediaAttachments: mediaMap.get(post.id) ?? []
+        }, mediaCtx);
+        const replyCount = replyCounts.get(post.id) ?? 0;
+        const previewReplies = threadPreviews.get(post.id);
+        if (replyCount > 0 && previewReplies) {
+            return {
+                post: postView,
+                threadPreview: {
+                    replies: toPostViews(previewReplies.map((r)=>({
+                            ...r,
+                            mediaAttachments: previewMediaMap.get(r.id) ?? []
+                        })), mediaCtx),
+                    totalReplyCount: replyCount
+                }
+            };
+        }
+        return {
+            post: postView
+        };
+    });
+    // Determine next cursor
+    const lastPost = displayPosts[displayPosts.length - 1];
+    const nextCursor = hasMore && lastPost ? lastPost.id : undefined;
+    return {
+        items,
+        hasMore,
+        nextCursor
+    };
+}
+/**
+ * Groups timeline items by their publication date (YYYY-MM-DD).
+ *
+ * @param items - Timeline items to group
+ * @returns Array of date groups, each containing items published on the same day
+ *
+ * @example
+ * ```ts
+ * const groups = groupByDate(items);
+ * // [{ dateKey: "2024-02-01", label: "Feb 1, 2024", items: [...] }, ...]
+ * ```
+ */ export function groupByDate(items) {
+    const groups = [];
+    let current = null;
+    for (const item of items){
+        const dateKey = item.post.publishedAt.slice(0, 10);
+        if (!current || current.dateKey !== dateKey) {
+            current = {
+                dateKey,
+                label: item.post.publishedAtFormatted,
+                items: []
+            };
+            groups.push(current);
+        }
+        current.items.push(item);
+    }
+    return groups;
+}

package/dist/lib/view.js

@@ -1,22 +1,17 @@
 /**
- * View Model Conversions
+ * View Model Conversions (v2)
  *
  * Transforms raw database models into render-ready View types.
- * Theme components receive only View types — no lib/ imports needed.
+ * Theme components receive only View types -- no lib/ imports needed.
  */ import { encode } from "./sqid.js";
-import { toISOString, formatDate } from "./time.js";
+import { toISOString, formatDate, formatTime, formatRelativeTime } from "./time.js";
 import { getMediaUrl, getImageUrl, getPublicUrlForProvider } from "./image.js";
+import { getHtmlExcerpt } from "./excerpt.js";
 /**
  * Creates a MediaContext from Hono context environment variables.
  *
  * @param c - Hono context
  * @returns MediaContext with env values
- *
- * @example
- * ```ts
- * const mediaCtx = createMediaContext(c);
- * const postView = toPostView(post, mediaCtx);
- * ```
  */ export function createMediaContext(c) {
     return {
         r2PublicUrl: c.env.R2_PUBLIC_URL,
@@ -60,20 +55,22 @@ import { getMediaUrl, getImageUrl, getPublicUrlForProvider } from "./image.js";
  * Converts a PostWithMedia to a render-ready PostView.
  *
  * @param post - Post with media attachments from database
- * @param ctx - Media context with URL configuration
+ * @param _ctx - Media context with URL configuration
  * @returns Render-ready PostView with pre-computed fields
- *
- * @example
- * ```ts
- * const mediaCtx = createMediaContext(c);
- * const postView = toPostView({ ...post, mediaAttachments: [...] }, mediaCtx);
- * ```
  */ export function toPostView(post, _ctx) {
-    const permalink = `/p/${encode(post.id)}`;
-    // Pre-compute excerpt from raw content
+    const permalink = post.slug ? `/${post.slug}` : `/p/${encode(post.id)}`;
+    // Pre-compute excerpt from raw body
     let excerpt;
-    if (post.content) {
-        excerpt = post.content.length > 160 ? post.content.slice(0, 160) + "..." : post.content;
+    if (post.body) {
+        excerpt = post.body.length > 160 ? post.body.slice(0, 160) + "..." : post.body;
+    }
+    // Pre-compute HTML summary for article-style posts (with title)
+    let summaryHtml;
+    let summaryHasMore;
+    if (post.title && post.bodyHtml) {
+        const result = getHtmlExcerpt(post.bodyHtml);
+        summaryHtml = result.excerpt;
+        summaryHasMore = result.hasMore;
     }
     // Convert media attachments
     const media = post.mediaAttachments.map((m)=>({
@@ -88,39 +85,38 @@ import { getMediaUrl, getImageUrl, getPublicUrlForProvider } from "./image.js";
     return {
         id: post.id,
         permalink,
+        slug: post.slug ?? undefined,
         title: post.title ?? undefined,
-        contentHtml: post.contentHtml ?? undefined,
+        bodyHtml: post.bodyHtml ?? undefined,
         excerpt,
-        type: post.type,
-        visibility: post.visibility,
-        path: post.path ?? undefined,
+        summaryHtml,
+        summaryHasMore,
+        url: post.url ?? undefined,
+        quoteText: post.quoteText ?? undefined,
+        format: post.format,
+        status: post.status,
+        featured: post.featured === 1,
+        pinned: post.pinned === 1,
+        rating: post.rating ?? undefined,
+        collectionId: post.collectionId ?? undefined,
         publishedAt: toISOString(post.publishedAt),
         publishedAtFormatted: formatDate(post.publishedAt),
+        publishedAtTime: formatTime(post.publishedAt),
+        publishedAtRelative: formatRelativeTime(post.publishedAt),
         updatedAt: toISOString(post.updatedAt),
-        sourceUrl: post.sourceUrl ?? undefined,
-        sourceName: post.sourceName ?? undefined,
-        sourceDomain: post.sourceDomain ?? undefined,
         media,
         replyToId: post.replyToId ?? undefined,
         threadRootId: post.threadId ?? undefined,
-        content: post.content ?? undefined
+        body: post.body ?? undefined
     };
 }
 /**
  * Batch converts PostWithMedia[] to PostView[].
- *
- * @param posts - Array of posts with media
- * @param ctx - Media context
- * @returns Array of PostView
  */ export function toPostViews(posts, ctx) {
     return posts.map((p)=>toPostView(p, ctx));
 }
 /**
  * Converts a bare Post (no media) to a PostView with empty media array.
- *
- * @param post - Post without media
- * @param ctx - Media context (unused but kept for consistency)
- * @returns PostView with empty media
  */ export function toPostViewFromPost(post, ctx) {
     return toPostView({
         ...post,
@@ -129,58 +125,60 @@ import { getMediaUrl, getImageUrl, getPublicUrlForProvider } from "./image.js";
 }
 /**
  * Batch converts Post[] (no media) to PostView[].
- *
- * @param posts - Array of posts without media
- * @param ctx - Media context
- * @returns Array of PostView
  */ export function toPostViewsFromPosts(posts, ctx) {
     return posts.map((p)=>toPostViewFromPost(p, ctx));
 }
 // =============================================================================
+// Page Conversions
+// =============================================================================
+/**
+ * Converts a Page to a render-ready PageView.
+ */ export function toPageView(page) {
+    return {
+        id: page.id,
+        slug: page.slug,
+        title: page.title ?? undefined,
+        bodyHtml: page.bodyHtml ?? undefined,
+        status: page.status,
+        createdAt: toISOString(page.createdAt),
+        updatedAt: toISOString(page.updatedAt)
+    };
+}
+// =============================================================================
 // Navigation Conversions
 // =============================================================================
 /**
- * Converts a NavigationLink to a NavLinkView with pre-computed state.
- *
- * @param link - Raw navigation link from database
- * @param currentPath - Current page path for active state computation
- * @returns NavLinkView with isActive and isExternal pre-computed
- */ export function toNavLinkView(link, currentPath) {
-    const isExternal = link.url.startsWith("http://") || link.url.startsWith("https://");
+ * Converts a NavItem to a NavItemView with pre-computed state.
+ */ export function toNavItemView(item, currentPath) {
+    const isExternal = item.url.startsWith("http://") || item.url.startsWith("https://");
     let isActive = false;
     if (!isExternal) {
-        if (link.url === "/") {
+        if (item.url === "/") {
             isActive = currentPath === "/";
         } else {
-            isActive = currentPath === link.url || currentPath.startsWith(link.url + "/");
+            isActive = currentPath === item.url || currentPath.startsWith(item.url + "/");
         }
     }
     return {
-        id: link.id,
-        label: link.label,
-        url: link.url,
+        id: item.id,
+        type: item.type,
+        label: item.label,
+        url: item.url,
+        pageId: item.pageId ?? undefined,
         isActive,
         isExternal
     };
 }
 /**
- * Batch converts NavigationLink[] to NavLinkView[].
- *
- * @param links - Raw navigation links
- * @param currentPath - Current page path
- * @returns Array of NavLinkView
- */ export function toNavLinkViews(links, currentPath) {
-    return links.map((l)=>toNavLinkView(l, currentPath));
+ * Batch converts NavItem[] to NavItemView[].
+ */ export function toNavItemViews(items, currentPath) {
+    return items.map((item)=>toNavItemView(item, currentPath));
 }
 // =============================================================================
 // Search Result Conversions
 // =============================================================================
 /**
  * Converts a SearchResult to a SearchResultView with PostView.
- *
- * @param result - Raw search result
- * @param ctx - Media context
- * @returns SearchResultView with PostView
  */ export function toSearchResultView(result, ctx) {
     return {
         post: toPostViewFromPost(result.post, ctx),
@@ -190,10 +188,6 @@ import { getMediaUrl, getImageUrl, getPublicUrlForProvider } from "./image.js";
 }
 /**
  * Batch converts SearchResult[] to SearchResultView[].
- *
- * @param results - Raw search results
- * @param ctx - Media context
- * @returns Array of SearchResultView
  */ export function toSearchResultViews(results, ctx) {
     return results.map((r)=>toSearchResultView(r, ctx));
 }
@@ -202,16 +196,11 @@ import { getMediaUrl, getImageUrl, getPublicUrlForProvider } from "./image.js";
 // =============================================================================
 /**
  * Converts a grouped post map to typed ArchiveGroup[].
- *
- * @param grouped - Map of "YYYY-MM" keys to Post arrays
- * @param ctx - Media context
- * @returns Array of ArchiveGroup with pre-formatted labels
  */ export function toArchiveGroups(grouped, ctx) {
     const groups = [];
     for (const [yearMonth, posts] of grouped){
         const [year, month] = yearMonth.split("-");
         if (!year || !month) continue;
-        // Format label like "February 2024"
         const date = new Date(parseInt(year, 10), parseInt(month, 10) - 1);
         const label = date.toLocaleDateString("en-US", {
             year: "numeric",