@btst/stack 2.7.0 → 2.8.1

package/dist/shared/stack.Ldfkr5b2.d.ts

@@ -0,0 +1,112 @@
+declare const COMMENTS_LOCALIZATION: {
+    COMMENTS_MY_LOGIN_TITLE: string;
+    COMMENTS_MY_LOGIN_DESCRIPTION: string;
+    COMMENTS_MY_EMPTY_TITLE: string;
+    COMMENTS_MY_EMPTY_DESCRIPTION: string;
+    COMMENTS_MY_PAGE_TITLE: string;
+    COMMENTS_MY_COL_COMMENT: string;
+    COMMENTS_MY_COL_RESOURCE: string;
+    COMMENTS_MY_COL_STATUS: string;
+    COMMENTS_MY_COL_DATE: string;
+    COMMENTS_MY_REPLY_INDICATOR: string;
+    COMMENTS_MY_VIEW_LINK: string;
+    COMMENTS_MY_STATUS_APPROVED: string;
+    COMMENTS_MY_STATUS_PENDING: string;
+    COMMENTS_MY_STATUS_SPAM: string;
+    COMMENTS_MY_TOAST_DELETED: string;
+    COMMENTS_MY_TOAST_DELETE_ERROR: string;
+    COMMENTS_MY_DELETE_TITLE: string;
+    COMMENTS_MY_DELETE_DESCRIPTION: string;
+    COMMENTS_MY_DELETE_CANCEL: string;
+    COMMENTS_MY_DELETE_CONFIRM: string;
+    COMMENTS_MY_DELETE_BUTTON_SR: string;
+    COMMENTS_MODERATION_TITLE: string;
+    COMMENTS_MODERATION_DESCRIPTION: string;
+    COMMENTS_MODERATION_TAB_PENDING: string;
+    COMMENTS_MODERATION_TAB_APPROVED: string;
+    COMMENTS_MODERATION_TAB_SPAM: string;
+    COMMENTS_MODERATION_SELECTED: string;
+    COMMENTS_MODERATION_APPROVE_SELECTED: string;
+    COMMENTS_MODERATION_DELETE_SELECTED: string;
+    COMMENTS_MODERATION_EMPTY: string;
+    COMMENTS_MODERATION_COL_AUTHOR: string;
+    COMMENTS_MODERATION_COL_COMMENT: string;
+    COMMENTS_MODERATION_COL_RESOURCE: string;
+    COMMENTS_MODERATION_COL_DATE: string;
+    COMMENTS_MODERATION_COL_ACTIONS: string;
+    COMMENTS_MODERATION_SELECT_ALL: string;
+    COMMENTS_MODERATION_SELECT_ONE: string;
+    COMMENTS_MODERATION_ACTION_VIEW: string;
+    COMMENTS_MODERATION_ACTION_APPROVE: string;
+    COMMENTS_MODERATION_ACTION_SPAM: string;
+    COMMENTS_MODERATION_ACTION_DELETE: string;
+    COMMENTS_MODERATION_TOAST_APPROVED: string;
+    COMMENTS_MODERATION_TOAST_APPROVE_ERROR: string;
+    COMMENTS_MODERATION_TOAST_SPAM: string;
+    COMMENTS_MODERATION_TOAST_SPAM_ERROR: string;
+    COMMENTS_MODERATION_TOAST_DELETED: string;
+    COMMENTS_MODERATION_TOAST_DELETED_PLURAL: string;
+    COMMENTS_MODERATION_TOAST_DELETE_ERROR: string;
+    COMMENTS_MODERATION_TOAST_BULK_APPROVED: string;
+    COMMENTS_MODERATION_TOAST_BULK_APPROVE_ERROR: string;
+    COMMENTS_MODERATION_DIALOG_TITLE: string;
+    COMMENTS_MODERATION_DIALOG_RESOURCE: string;
+    COMMENTS_MODERATION_DIALOG_LIKES: string;
+    COMMENTS_MODERATION_DIALOG_REPLY_TO: string;
+    COMMENTS_MODERATION_DIALOG_EDITED: string;
+    COMMENTS_MODERATION_DIALOG_BODY: string;
+    COMMENTS_MODERATION_DIALOG_APPROVE: string;
+    COMMENTS_MODERATION_DIALOG_MARK_SPAM: string;
+    COMMENTS_MODERATION_DIALOG_DELETE: string;
+    COMMENTS_MODERATION_DELETE_TITLE_SINGULAR: string;
+    COMMENTS_MODERATION_DELETE_TITLE_PLURAL: string;
+    COMMENTS_MODERATION_DELETE_DESCRIPTION_SINGULAR: string;
+    COMMENTS_MODERATION_DELETE_DESCRIPTION_PLURAL: string;
+    COMMENTS_MODERATION_DELETE_CANCEL: string;
+    COMMENTS_MODERATION_DELETE_CONFIRM: string;
+    COMMENTS_MODERATION_DELETE_DELETING: string;
+    COMMENTS_MODERATION_PAGINATION_PREVIOUS: string;
+    COMMENTS_MODERATION_PAGINATION_NEXT: string;
+    COMMENTS_MODERATION_PAGINATION_SHOWING: string;
+    COMMENTS_RESOURCE_TITLE: string;
+    COMMENTS_RESOURCE_PENDING_SECTION: string;
+    COMMENTS_RESOURCE_THREAD_SECTION: string;
+    COMMENTS_RESOURCE_ACTION_APPROVE: string;
+    COMMENTS_RESOURCE_ACTION_SPAM: string;
+    COMMENTS_RESOURCE_ACTION_DELETE: string;
+    COMMENTS_RESOURCE_DELETE_CONFIRM: string;
+    COMMENTS_RESOURCE_TOAST_APPROVED: string;
+    COMMENTS_RESOURCE_TOAST_APPROVE_ERROR: string;
+    COMMENTS_RESOURCE_TOAST_SPAM: string;
+    COMMENTS_RESOURCE_TOAST_SPAM_ERROR: string;
+    COMMENTS_RESOURCE_TOAST_DELETED: string;
+    COMMENTS_RESOURCE_TOAST_DELETE_ERROR: string;
+    COMMENTS_TITLE: string;
+    COMMENTS_EMPTY: string;
+    COMMENTS_EDITED_BADGE: string;
+    COMMENTS_PENDING_BADGE: string;
+    COMMENTS_LIKE_ARIA: string;
+    COMMENTS_UNLIKE_ARIA: string;
+    COMMENTS_REPLY_BUTTON: string;
+    COMMENTS_EDIT_BUTTON: string;
+    COMMENTS_DELETE_BUTTON: string;
+    COMMENTS_SAVE_EDIT: string;
+    COMMENTS_REPLIES_SINGULAR: string;
+    COMMENTS_REPLIES_PLURAL: string;
+    COMMENTS_HIDE_REPLIES: string;
+    COMMENTS_DELETE_CONFIRM: string;
+    COMMENTS_LOGIN_PROMPT: string;
+    COMMENTS_LOGIN_LINK: string;
+    COMMENTS_FORM_PLACEHOLDER: string;
+    COMMENTS_FORM_CANCEL: string;
+    COMMENTS_FORM_POST_COMMENT: string;
+    COMMENTS_FORM_POST_REPLY: string;
+    COMMENTS_FORM_POSTING: string;
+    COMMENTS_FORM_SUBMIT_ERROR: string;
+    COMMENTS_LOAD_MORE: string;
+    COMMENTS_LOADING_MORE: string;
+};
+type CommentsLocalization = typeof COMMENTS_LOCALIZATION;
+
+export { COMMENTS_LOCALIZATION as a };
+export type { CommentsLocalization as C };

package/dist/shared/{stack.D3BsrpAz.d.ts → stack.VF6FhyZw.d.ts}

@@ -184,13 +184,10 @@ interface UseNextPreviousPostsResult {
     refetch: () => void;
 }
 /**
- * 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.
  */
-declare function useNextPreviousPosts(createdAt: string | Date, options?: UseNextPreviousPostsOptions): UseNextPreviousPostsResult & {
-    ref: (node: Element | null) => void;
-    inView: boolean;
-};
+declare function useNextPreviousPosts(createdAt: string | Date, options?: UseNextPreviousPostsOptions): UseNextPreviousPostsResult;
 /**
  * Options for the useRecentPosts hook
  */
@@ -216,13 +213,10 @@ interface UseRecentPostsResult {
     refetch: () => void;
 }
 /**
- * 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.
  */
-declare function useRecentPosts(options?: UseRecentPostsOptions): UseRecentPostsResult & {
-    ref: (node: Element | null) => void;
-    inView: boolean;
-};
+declare function useRecentPosts(options?: UseRecentPostsOptions): UseRecentPostsResult;
 
 export { useSuspensePosts as f, usePost as g, useSuspensePost as h, useTags as i, useSuspenseTags as j, useCreatePost as k, useUpdatePost as l, useDeletePost as m, usePostSearch as n, useNextPreviousPosts as q, useRecentPosts as t, usePosts as u };
 export type { PostCreateInput as P, UsePostsOptions as U, UsePostsResult as a, UsePostSearchOptions as b, UsePostSearchResult as c, UsePostResult as d, PostUpdateInput as e, UseNextPreviousPostsOptions as o, UseNextPreviousPostsResult as p, UseRecentPostsOptions as r, UseRecentPostsResult as s };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@btst/stack",
-  "version": "2.7.0",
+  "version": "2.8.1",
   "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.1.0",
+    "@btst/db": "2.1.1",
     "@lukemorales/query-key-factory": "^1.3.4",
     "@milkdown/crepe": "^7.17.1",
     "@milkdown/kit": "^7.17.1",
@@ -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.1.0",
+    "@btst/adapter-memory": "2.1.1",
     "@btst/yar": "1.2.0",
     "@types/react": "^19.0.0",
     "@types/slug": "^5.0.9",

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/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,
+			}}
+		/>
 	);
 }