@btst/stack 2.6.2 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@btst/stack",
-  "version": "2.6.2",
+  "version": "2.8.0",
   "description": "A composable, plugin-based library for building full-stack applications.",
   "repository": {
     "type": "git",
@@ -363,6 +363,57 @@
       }
     },
     "./plugins/kanban/css": "./dist/plugins/kanban/style.css",
+    "./plugins/comments/api": {
+      "import": {
+        "types": "./dist/plugins/comments/api/index.d.ts",
+        "default": "./dist/plugins/comments/api/index.mjs"
+      },
+      "require": {
+        "types": "./dist/plugins/comments/api/index.d.cts",
+        "default": "./dist/plugins/comments/api/index.cjs"
+      }
+    },
+    "./plugins/comments/client": {
+      "import": {
+        "types": "./dist/plugins/comments/client/index.d.ts",
+        "default": "./dist/plugins/comments/client/index.mjs"
+      },
+      "require": {
+        "types": "./dist/plugins/comments/client/index.d.cts",
+        "default": "./dist/plugins/comments/client/index.cjs"
+      }
+    },
+    "./plugins/comments/client/components": {
+      "import": {
+        "types": "./dist/plugins/comments/client/components/index.d.ts",
+        "default": "./dist/plugins/comments/client/components/index.mjs"
+      },
+      "require": {
+        "types": "./dist/plugins/comments/client/components/index.d.cts",
+        "default": "./dist/plugins/comments/client/components/index.cjs"
+      }
+    },
+    "./plugins/comments/client/hooks": {
+      "import": {
+        "types": "./dist/plugins/comments/client/hooks/index.d.ts",
+        "default": "./dist/plugins/comments/client/hooks/index.mjs"
+      },
+      "require": {
+        "types": "./dist/plugins/comments/client/hooks/index.d.cts",
+        "default": "./dist/plugins/comments/client/hooks/index.cjs"
+      }
+    },
+    "./plugins/comments/query-keys": {
+      "import": {
+        "types": "./dist/plugins/comments/query-keys.d.ts",
+        "default": "./dist/plugins/comments/query-keys.mjs"
+      },
+      "require": {
+        "types": "./dist/plugins/comments/query-keys.d.cts",
+        "default": "./dist/plugins/comments/query-keys.cjs"
+      }
+    },
+    "./plugins/comments/css": "./dist/plugins/comments/style.css",
     "./plugins/route-docs/client": {
       "import": {
         "types": "./dist/plugins/route-docs/client/index.d.ts",
@@ -544,6 +595,21 @@
       "plugins/kanban/client/hooks": [
         "./dist/plugins/kanban/client/hooks/index.d.ts"
       ],
+      "plugins/comments/api": [
+        "./dist/plugins/comments/api/index.d.ts"
+      ],
+      "plugins/comments/client": [
+        "./dist/plugins/comments/client/index.d.ts"
+      ],
+      "plugins/comments/client/components": [
+        "./dist/plugins/comments/client/components/index.d.ts"
+      ],
+      "plugins/comments/client/hooks": [
+        "./dist/plugins/comments/client/hooks/index.d.ts"
+      ],
+      "plugins/comments/query-keys": [
+        "./dist/plugins/comments/query-keys.d.ts"
+      ],
       "plugins/route-docs/client": [
         "./dist/plugins/route-docs/client/index.d.ts"
       ],
@@ -571,7 +637,7 @@
     }
   },
   "dependencies": {
-    "@btst/db": "2.0.3",
+    "@btst/db": "2.1.0",
     "@lukemorales/query-key-factory": "^1.3.4",
     "@milkdown/crepe": "^7.17.1",
     "@milkdown/kit": "^7.17.1",
@@ -588,7 +654,7 @@
     "@radix-ui/react-switch": ">=1.1.0",
     "@tanstack/react-query": "^5.0.0",
     "ai": ">=5.0.0",
-    "better-call": ">=1.1.5",
+    "better-call": ">=1.3.2",
     "class-variance-authority": ">=0.7.0",
     "clsx": ">=2.1.0",
     "cmdk": ">=1.1.0",
@@ -600,7 +666,6 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-error-boundary": ">=4.0.0",
     "react-hook-form": ">=7.55.0",
-    "react-intersection-observer": ">=9.0.0",
     "react-markdown": ">=9.1.0",
     "rehype-highlight": ">=7.0.0",
     "rehype-katex": ">=7.0.0",
@@ -616,7 +681,7 @@
   "devDependencies": {
     "tsx": "catalog:",
     "@ai-sdk/react": "^2.0.94",
-    "@btst/adapter-memory": "2.0.3",
+    "@btst/adapter-memory": "2.1.0",
     "@btst/yar": "1.2.0",
     "@types/react": "^19.0.0",
     "@types/slug": "^5.0.9",

package/src/__tests__/plugins.test.tsx

@@ -4,7 +4,11 @@ import { createStackClient } from "../client";
 import { defineBackendPlugin } from "../plugins/api";
 import { defineClientPlugin } from "../plugins/client";
 import type { BackendPlugin, ClientPlugin } from "../types";
-import type { BetterAuthDBSchema, DatabaseDefinition, Adapter } from "@btst/db";
+import type {
+	BetterAuthDBSchema,
+	DatabaseDefinition,
+	DBAdapter as Adapter,
+} from "@btst/db";
 import { createDbPlugin } from "@btst/db";
 import { createMemoryAdapter } from "@btst/adapter-memory";
 import { createEndpoint as endpoint } from "better-call";

package/src/__tests__/stack-api.test.ts

@@ -3,7 +3,7 @@ import { stack } from "../api";
 import { defineBackendPlugin } from "../plugins/api";
 import { createDbPlugin } from "@btst/db";
 import { createMemoryAdapter } from "@btst/adapter-memory";
-import type { Adapter, DatabaseDefinition } from "@btst/db";
+import type { DBAdapter as Adapter, DatabaseDefinition } from "@btst/db";
 import { blogBackendPlugin } from "../plugins/blog/api";
 import { kanbanBackendPlugin } from "../plugins/kanban/api";
 

package/src/plugins/ai-chat/__tests__/getters.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach } from "vitest";
 import { createMemoryAdapter } from "@btst/adapter-memory";
 import { defineDb } from "@btst/db";
-import type { Adapter } from "@btst/db";
+import type { DBAdapter as Adapter } from "@btst/db";
 import { aiChatSchema } from "../db";
 import { getAllConversations, getConversationById } from "../api/getters";
 

package/src/plugins/ai-chat/api/getters.ts

@@ -1,4 +1,4 @@
-import type { Adapter } from "@btst/db";
+import type { DBAdapter as Adapter } from "@btst/db";
 import type { Conversation, ConversationWithMessages, Message } from "../types";
 
 /**

package/src/plugins/ai-chat/api/plugin.ts

@@ -1,4 +1,4 @@
-import type { Adapter } from "@btst/db";
+import type { DBAdapter as Adapter } from "@btst/db";
 import { defineBackendPlugin } from "@btst/stack/plugins/api";
 import { createEndpoint } from "@btst/stack/plugins/api";
 import {

package/src/plugins/api/index.ts

@@ -18,7 +18,11 @@ export type {
 	ClientPlugin,
 } from "../../types";
 
-export type { Adapter, DatabaseDefinition, DbPlugin } from "@btst/db";
+export type {
+	DBAdapter as Adapter,
+	DatabaseDefinition,
+	DbPlugin,
+} from "@btst/db";
 
 // Re-export Better Call functions needed for plugins
 export type { Endpoint, Router } from "better-call";

package/src/plugins/blog/__tests__/getters.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach } from "vitest";
 import { createMemoryAdapter } from "@btst/adapter-memory";
 import { defineDb } from "@btst/db";
-import type { Adapter } from "@btst/db";
+import type { DBAdapter as Adapter } from "@btst/db";
 import { blogSchema } from "../db";
 import { getAllPosts, getPostBySlug, getAllTags } from "../api/getters";
 

package/src/plugins/blog/api/getters.ts

@@ -1,4 +1,4 @@
-import type { Adapter } from "@btst/db";
+import type { DBAdapter as Adapter } from "@btst/db";
 import type { Post, PostWithPostTag, Tag } from "../types";
 
 /**

package/src/plugins/blog/api/plugin.ts

@@ -1,4 +1,4 @@
-import type { Adapter } from "@btst/db";
+import type { DBAdapter as Adapter } from "@btst/db";
 import { defineBackendPlugin } from "@btst/stack/plugins/api";
 import { createEndpoint } from "@btst/stack/plugins/api";
 import { z } from "zod";

package/src/plugins/blog/client/components/loading/post-navigation-skeleton.tsx

@@ -0,0 +1,10 @@
+import { Skeleton } from "@workspace/ui/components/skeleton";
+
+export function PostNavigationSkeleton() {
+	return (
+		<div className="border-t mt-4 pt-4 w-full flex flex-col sm:flex-row gap-4">
+			<Skeleton className="h-14 flex-1 rounded-md" />
+			<Skeleton className="h-14 flex-1 rounded-md" />
+		</div>
+	);
+}

package/src/plugins/blog/client/components/loading/recent-posts-carousel-skeleton.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from "@workspace/ui/components/skeleton";
+import { PostCardSkeleton } from "./post-card-skeleton";
+
+export function RecentPostsCarouselSkeleton() {
+	return (
+		<div className="w-full mt-4 py-4 border-t">
+			<div className="flex items-center justify-between mb-4">
+				<Skeleton className="h-7 w-36" />
+				<Skeleton className="h-4 w-16" />
+			</div>
+			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+				{[1, 2, 3].map((i) => (
+					<PostCardSkeleton key={i} />
+				))}
+			</div>
+		</div>
+	);
+}

package/src/plugins/blog/client/components/pages/post-page.internal.tsx

@@ -21,6 +21,9 @@ import { useRouteLifecycle } from "@workspace/ui/hooks/use-route-lifecycle";
 import { OnThisPage, OnThisPageSelect } from "../shared/on-this-page";
 import type { SerializedPost } from "../../../types";
 import { useRegisterPageAIContext } from "@btst/stack/plugins/ai-chat/client/context";
+import { WhenVisible } from "@workspace/ui/components/when-visible";
+import { PostNavigationSkeleton } from "../loading/post-navigation-skeleton";
+import { RecentPostsCarouselSkeleton } from "../loading/recent-posts-carousel-skeleton";
 
 // Internal component with actual page content
 export function PostPage({ slug }: { slug: string }) {
@@ -52,14 +55,14 @@ export function PostPage({ slug }: { slug: string }) {
 
 	const { post } = useSuspensePost(slug ?? "");
 
-	const { previousPost, nextPost, ref } = useNextPreviousPosts(
+	const { previousPost, nextPost } = useNextPreviousPosts(
 		post?.createdAt ?? new Date(),
 		{
 			enabled: !!post,
 		},
 	);
 
-	const { recentPosts, ref: recentPostsRef } = useRecentPosts({
+	const { recentPosts } = useRecentPosts({
 		limit: 5,
 		excludeSlug: slug,
 		enabled: !!post,
@@ -120,13 +123,25 @@ export function PostPage({ slug }: { slug: string }) {
 					</div>
 
 					<div className="flex flex-col gap-4 w-full">
-						<PostNavigation
-							previousPost={previousPost}
-							nextPost={nextPost}
-							ref={ref}
-						/>
+						<WhenVisible
+							rootMargin="200px"
+							fallback={<PostNavigationSkeleton />}
+						>
+							<PostNavigation previousPost={previousPost} nextPost={nextPost} />
+						</WhenVisible>
 
-						<RecentPostsCarousel posts={recentPosts} ref={recentPostsRef} />
+						<WhenVisible
+							rootMargin="200px"
+							fallback={<RecentPostsCarouselSkeleton />}
+						>
+							<RecentPostsCarousel posts={recentPosts} />
+						</WhenVisible>
+
+						{overrides.postBottomSlot && (
+							<div data-testid="post-bottom-slot">
+								{overrides.postBottomSlot(post)}
+							</div>
+						)}
 					</div>
 				</div>
 				<OnThisPage markdown={post.content} />

package/src/plugins/blog/client/components/shared/post-navigation.tsx

@@ -10,13 +10,11 @@ import type { SerializedPost } from "../../../types";
 interface PostNavigationProps {
 	previousPost: SerializedPost | null;
 	nextPost: SerializedPost | null;
-	ref?: (node: Element | null) => void;
 }
 
 export function PostNavigation({
 	previousPost,
 	nextPost,
-	ref,
 }: PostNavigationProps) {
 	const { Link } = usePluginOverrides<
 		BlogPluginOverrides,
@@ -29,9 +27,6 @@ export function PostNavigation({
 
 	return (
 		<>
-			{/* Ref div to trigger intersection observer when scrolled into view */}
-			{ref && <div ref={ref} />}
-
 			{/* Only show navigation buttons if posts are available */}
 			{(previousPost || nextPost) && (
 				<>

package/src/plugins/blog/client/components/shared/recent-posts-carousel.tsx

@@ -16,10 +16,9 @@ import { BLOG_LOCALIZATION } from "../../localization";
 
 interface RecentPostsCarouselProps {
 	posts: SerializedPost[];
-	ref?: (node: Element | null) => void;
 }
 
-export function RecentPostsCarousel({ posts, ref }: RecentPostsCarouselProps) {
+export function RecentPostsCarousel({ posts }: RecentPostsCarouselProps) {
 	const { PostCard, Link, localization } = usePluginOverrides<
 		BlogPluginOverrides,
 		Partial<BlogPluginOverrides>
@@ -32,9 +31,6 @@ export function RecentPostsCarousel({ posts, ref }: RecentPostsCarouselProps) {
 	const basePath = useBasePath();
 	return (
 		<div className="w-full">
-			{/* Ref div to trigger intersection observer when scrolled into view */}
-			{ref && <div ref={ref} />}
-
 			{posts && posts.length > 0 && (
 				<>
 					<div className="mt-4 py-4 w-full text-start border-t">

package/src/plugins/blog/client/hooks/blog-hooks.tsx

@@ -15,7 +15,6 @@ import type { BlogApiRouter } from "../../api/plugin";
 import { useDebounce } from "./use-debounce";
 import { useEffect, useRef } from "react";
 import { z } from "zod";
-import { useInView } from "react-intersection-observer";
 import { createPostSchema, updatePostSchema } from "../../schemas";
 import { createBlogQueryKeys } from "../../query-keys";
 import { usePluginOverrides } from "@btst/stack/context";
@@ -604,16 +603,13 @@ export interface UseNextPreviousPostsResult {
 }
 
 /**
- * Hook for fetching previous and next posts relative to a given date
- * Uses useInView to only fetch when the component is in view
+ * Hook for fetching previous and next posts relative to a given date.
+ * Pair with `<WhenVisible>` in the render tree for lazy loading.
  */
 export function useNextPreviousPosts(
 	createdAt: string | Date,
 	options: UseNextPreviousPostsOptions = {},
-): UseNextPreviousPostsResult & {
-	ref: (node: Element | null) => void;
-	inView: boolean;
-} {
+): UseNextPreviousPostsResult {
 	const { apiBaseURL, apiBasePath, headers } =
 		usePluginOverrides<BlogPluginOverrides>("blog");
 	const client = createApiClient<BlogApiRouter>({
@@ -622,13 +618,6 @@ export function useNextPreviousPosts(
 	});
 	const queries = createBlogQueryKeys(client, headers);
 
-	const { ref, inView } = useInView({
-		// start a little early so the data is ready as it scrolls in
-		rootMargin: "200px 0px",
-		// run once; keep data cached after
-		triggerOnce: true,
-	});
-
 	const dateValue =
 		typeof createdAt === "string" ? new Date(createdAt) : createdAt;
 	const baseQuery = queries.posts.nextPrevious(dateValue);
@@ -641,7 +630,7 @@ export function useNextPreviousPosts(
 	>({
 		...baseQuery,
 		...SHARED_QUERY_CONFIG,
-		enabled: (options.enabled ?? true) && inView && !!client,
+		enabled: (options.enabled ?? true) && !!client,
 	});
 
 	return {
@@ -650,8 +639,6 @@ export function useNextPreviousPosts(
 		isLoading,
 		error,
 		refetch,
-		ref,
-		inView,
 	};
 }
 
@@ -682,15 +669,12 @@ export interface UseRecentPostsResult {
 }
 
 /**
- * Hook for fetching recent posts
- * Uses useInView to only fetch when the component is in view
+ * Hook for fetching recent posts.
+ * Pair with `<WhenVisible>` in the render tree for lazy loading.
  */
 export function useRecentPosts(
 	options: UseRecentPostsOptions = {},
-): UseRecentPostsResult & {
-	ref: (node: Element | null) => void;
-	inView: boolean;
-} {
+): UseRecentPostsResult {
 	const { apiBaseURL, apiBasePath, headers } =
 		usePluginOverrides<BlogPluginOverrides>("blog");
 	const client = createApiClient<BlogApiRouter>({
@@ -699,13 +683,6 @@ export function useRecentPosts(
 	});
 	const queries = createBlogQueryKeys(client, headers);
 
-	const { ref, inView } = useInView({
-		// start a little early so the data is ready as it scrolls in
-		rootMargin: "200px 0px",
-		// run once; keep data cached after
-		triggerOnce: true,
-	});
-
 	const baseQuery = queries.posts.recent({
 		limit: options.limit ?? 5,
 		excludeSlug: options.excludeSlug,
@@ -719,7 +696,7 @@ export function useRecentPosts(
 	>({
 		...baseQuery,
 		...SHARED_QUERY_CONFIG,
-		enabled: (options.enabled ?? true) && inView && !!client,
+		enabled: (options.enabled ?? true) && !!client,
 	});
 
 	return {
@@ -727,7 +704,5 @@ export function useRecentPosts(
 		isLoading,
 		error,
 		refetch,
-		ref,
-		inView,
 	};
 }

package/src/plugins/blog/client/overrides.ts

@@ -1,5 +1,5 @@
 import type { SerializedPost } from "../types";
-import type { ComponentType } from "react";
+import type { ComponentType, ReactNode } from "react";
 import type { BlogLocalization } from "./localization";
 
 /**
@@ -134,4 +134,29 @@ export interface BlogPluginOverrides {
 	 * @param context - Route context
 	 */
 	onBeforeDraftsPageRendered?: (context: RouteContext) => boolean;
+
+	// ============ Slot Overrides ============
+
+	/**
+	 * Optional slot rendered below the blog post body.
+	 * Use this to inject a comment thread or any custom content without
+	 * coupling the blog plugin to the comments plugin.
+	 *
+	 * @example
+	 * ```tsx
+	 * blog: {
+	 *   postBottomSlot: (post) => (
+	 *     <CommentThread
+	 *       resourceId={post.slug}
+	 *       resourceType="blog-post"
+	 *       apiBaseURL={apiBaseURL}
+	 *       apiBasePath="/api/data"
+	 *       currentUserId={session?.userId}
+	 *       loginHref="/login"
+	 *     />
+	 *   ),
+	 * }
+	 * ```
+	 */
+	postBottomSlot?: (post: SerializedPost) => ReactNode;
 }

package/src/plugins/cms/__tests__/getters.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach } from "vitest";
 import { createMemoryAdapter } from "@btst/adapter-memory";
 import { defineDb } from "@btst/db";
-import type { Adapter } from "@btst/db";
+import type { DBAdapter as Adapter } from "@btst/db";
 import { cmsSchema } from "../db";
 import {
 	getAllContentTypes,

package/src/plugins/cms/api/getters.ts

@@ -1,4 +1,4 @@
-import type { Adapter } from "@btst/db";
+import type { DBAdapter as Adapter } from "@btst/db";
 import type {
 	ContentType,
 	ContentItem,

package/src/plugins/cms/api/mutations.ts

@@ -1,4 +1,4 @@
-import type { Adapter } from "@btst/db";
+import type { DBAdapter as Adapter } from "@btst/db";
 import type { ContentType, ContentItem } from "../types";
 import { serializeContentItem } from "./getters";
 import type { SerializedContentItem } from "../types";

package/src/plugins/cms/api/plugin.ts

@@ -1,4 +1,4 @@
-import type { Adapter } from "@btst/db";
+import type { DBAdapter as Adapter } from "@btst/db";
 import { defineBackendPlugin } from "@btst/stack/plugins/api";
 import { createEndpoint } from "@btst/stack/plugins/api";
 import { z } from "zod";

package/src/plugins/cms/client/components/shared/pagination.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { Button } from "@workspace/ui/components/button";
-import { ChevronLeft, ChevronRight } from "lucide-react";
 import { usePluginOverrides } from "@btst/stack/context";
 import type { CMSPluginOverrides } from "../../overrides";
 import { CMS_LOCALIZATION } from "../../localization";
+import { PaginationControls } from "@workspace/ui/components/pagination-controls";
 
 interface PaginationProps {
 	currentPage: number;
@@ -27,46 +26,19 @@ export function Pagination({
 		usePluginOverrides<CMSPluginOverrides>("cms");
 	const localization = { ...CMS_LOCALIZATION, ...customLocalization };
 
-	const from = offset + 1;
-	const to = Math.min(offset + limit, total);
-
-	if (totalPages <= 1) {
-		return null;
-	}
-
 	return (
-		<div className="flex items-center justify-between px-4 py-3 border-t">
-			<p className="text-sm text-muted-foreground">
-				{localization.CMS_LIST_PAGINATION_SHOWING.replace(
-					"{from}",
-					String(from),
-				)
-					.replace("{to}", String(to))
-					.replace("{total}", String(total))}
-			</p>
-			<div className="flex items-center gap-2">
-				<Button
-					variant="outline"
-					size="sm"
-					onClick={() => onPageChange(currentPage - 1)}
-					disabled={currentPage === 1}
-				>
-					<ChevronLeft className="h-4 w-4 mr-1" />
-					{localization.CMS_LIST_PAGINATION_PREVIOUS}
-				</Button>
-				<span className="text-sm text-muted-foreground">
-					{currentPage} / {totalPages}
-				</span>
-				<Button
-					variant="outline"
-					size="sm"
-					onClick={() => onPageChange(currentPage + 1)}
-					disabled={currentPage === totalPages}
-				>
-					{localization.CMS_LIST_PAGINATION_NEXT}
-					<ChevronRight className="h-4 w-4 ml-1" />
-				</Button>
-			</div>
-		</div>
+		<PaginationControls
+			currentPage={currentPage}
+			totalPages={totalPages}
+			onPageChange={onPageChange}
+			total={total}
+			limit={limit}
+			offset={offset}
+			labels={{
+				previous: localization.CMS_LIST_PAGINATION_PREVIOUS,
+				next: localization.CMS_LIST_PAGINATION_NEXT,
+				showing: localization.CMS_LIST_PAGINATION_SHOWING,
+			}}
+		/>
 	);
 }