@btst/stack 2.5.6 → 2.6.1

package/src/plugins/blog/client/components/forms/markdown-editor.tsx

@@ -9,25 +9,24 @@ import { listener, listenerCtx } from "@milkdown/kit/plugin/listener";
 import { Slice } from "@milkdown/kit/prose/model";
 import { Selection } from "@milkdown/kit/prose/state";
 import { useLayoutEffect, useRef, useState } from "react";
-import { usePluginOverrides } from "@btst/stack/context";
-import type { BlogPluginOverrides } from "../../overrides";
-import { BLOG_LOCALIZATION } from "../../localization";
+
+export interface MarkdownEditorProps {
+	value?: string;
+	onChange?: (markdown: string) => void;
+	className?: string;
+	/** Optional image upload handler. When provided, enables image upload in the editor. */
+	uploadImage?: (file: File) => Promise<string>;
+	/** Placeholder text shown when the editor is empty. */
+	placeholder?: string;
+}
 
 export function MarkdownEditor({
 	value,
 	onChange,
 	className,
-}: {
-	value?: string;
-	onChange?: (markdown: string) => void;
-	className?: string;
-}) {
-	const { uploadImage, localization } = usePluginOverrides<
-		BlogPluginOverrides,
-		Partial<BlogPluginOverrides>
-	>("blog", {
-		localization: BLOG_LOCALIZATION,
-	});
+	uploadImage,
+	placeholder = "Write something...",
+}: MarkdownEditorProps) {
 	const containerRef = useRef<HTMLDivElement | null>(null);
 	const crepeRef = useRef<Crepe | null>(null);
 	const isReadyRef = useRef(false);
@@ -52,14 +51,18 @@ export function MarkdownEditor({
 			defaultValue: initialValueRef.current,
 			featureConfigs: {
 				[CrepeFeature.Placeholder]: {
-					text: localization.BLOG_FORMS_EDITOR_PLACEHOLDER,
-				},
-				[CrepeFeature.ImageBlock]: {
-					onUpload: async (file) => {
-						const url = await uploadImage(file);
-						return url;
-					},
+					text: placeholder,
 				},
+				...(uploadImage
+					? {
+							[CrepeFeature.ImageBlock]: {
+								onUpload: async (file: File) => {
+									const url = await uploadImage(file);
+									return url;
+								},
+							},
+						}
+					: {}),
 			},
 		});
 

package/src/plugins/blog/client/components/forms/post-forms.tsx

@@ -52,8 +52,8 @@ import { z } from "zod";
 import { FeaturedImageField } from "./image-field";
 
 const MarkdownEditor = lazy(() =>
-	import("./markdown-editor").then((module) => ({
-		default: module.MarkdownEditor,
+	import("./markdown-editor-with-overrides").then((module) => ({
+		default: module.MarkdownEditorWithOverrides,
 	})),
 );
 import { BLOG_LOCALIZATION } from "../../localization";

package/src/plugins/blog/client/components/shared/default-error.tsx

@@ -18,6 +18,7 @@ export function DefaultError({ error }: FallbackProps) {
 	const message =
 		process.env.NODE_ENV === "production"
 			? localization.BLOG_GENERIC_ERROR_MESSAGE
-			: (error?.message ?? localization.BLOG_GENERIC_ERROR_MESSAGE);
+			: ((error instanceof Error ? error.message : undefined) ??
+				localization.BLOG_GENERIC_ERROR_MESSAGE);
 	return <ErrorPlaceholder title={title} message={message} />;
 }

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

@@ -2,7 +2,7 @@ import { usePluginOverrides } from "@btst/stack/context";
 import type { SerializedPost } from "../../../types";
 import { Button } from "@workspace/ui/components/button";
 import { EmptyList } from "./empty-list";
-import SearchInput from "./search-input";
+import { SearchInput } from "./search-input";
 import type { BlogPluginOverrides } from "../../overrides";
 import { PostCard as DefaultPostCard } from "./post-card";
 import { BLOG_LOCALIZATION } from "../../localization";

package/src/plugins/blog/client/components/shared/search-input.tsx

@@ -142,5 +142,3 @@ export function SearchInput({
 		/>
 	);
 }
-
-export default SearchInput;

package/src/plugins/blog/client/components/shared/search-modal.tsx

@@ -158,5 +158,3 @@ export function SearchModal<T extends SearchResult>({
 		</>
 	);
 }
-
-export default SearchModal;

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

@@ -1 +1,2 @@
 export * from "./blog-hooks";
+export * from "./use-debounce";

package/src/plugins/blog/client/plugin.tsx

@@ -5,6 +5,7 @@ import {
 	runClientHookWithShim,
 } from "@btst/stack/plugins/client";
 import { createRoute } from "@btst/yar";
+import type { ComponentType } from "react";
 import type { QueryClient } from "@tanstack/react-query";
 import type { BlogApiRouter } from "../api";
 import { createBlogQueryKeys } from "../query-keys";
@@ -84,6 +85,26 @@ export interface BlogClientConfig {
 
 	/** Optional headers for SSR (e.g., forwarding cookies) */
 	headers?: Headers;
+
+	/**
+	 * Optional page component overrides.
+	 * Replace any plugin page with a custom React component.
+	 * The built-in component is used as the fallback when not provided.
+	 */
+	pageComponents?: {
+		/** Replaces the published posts list page */
+		posts?: ComponentType;
+		/** Replaces the drafts list page */
+		drafts?: ComponentType;
+		/** Replaces the new post page */
+		newPost?: ComponentType;
+		/** Replaces the single post page */
+		post?: ComponentType<{ slug: string }>;
+		/** Replaces the edit post page */
+		editPost?: ComponentType<{ slug: string }>;
+		/** Replaces the tag posts page */
+		tag?: ComponentType<{ tagSlug: string }>;
+	};
 }
 
 /**
@@ -700,43 +721,57 @@ export const blogClientPlugin = (config: BlogClientConfig) =>
 
 		routes: () => ({
 			posts: createRoute("/blog", () => {
+				const CustomPosts = config.pageComponents?.posts;
 				return {
-					PageComponent: () => <HomePageComponent published={true} />,
+					PageComponent:
+						CustomPosts ?? (() => <HomePageComponent published={true} />),
 					loader: createPostsLoader(true, config),
 					meta: createPostsListMeta(true, config),
 				};
 			}),
 			drafts: createRoute("/blog/drafts", () => {
+				const CustomDrafts = config.pageComponents?.drafts;
 				return {
-					PageComponent: () => <HomePageComponent published={false} />,
+					PageComponent:
+						CustomDrafts ?? (() => <HomePageComponent published={false} />),
 					loader: createPostsLoader(false, config),
 					meta: createPostsListMeta(false, config),
 				};
 			}),
 			newPost: createRoute("/blog/new", () => {
+				const CustomNewPost = config.pageComponents?.newPost;
 				return {
-					PageComponent: NewPostPageComponent,
+					PageComponent: CustomNewPost ?? NewPostPageComponent,
 					loader: createNewPostLoader(config),
 					meta: createNewPostMeta(config),
 				};
 			}),
 			editPost: createRoute("/blog/:slug/edit", ({ params: { slug } }) => {
+				const CustomEditPost = config.pageComponents?.editPost;
 				return {
-					PageComponent: () => <EditPostPageComponent slug={slug} />,
+					PageComponent: CustomEditPost
+						? () => <CustomEditPost slug={slug} />
+						: () => <EditPostPageComponent slug={slug} />,
 					loader: createPostLoader(slug, config, `/blog/${slug}/edit`),
 					meta: createEditPostMeta(slug, config),
 				};
 			}),
 			tag: createRoute("/blog/tag/:tagSlug", ({ params: { tagSlug } }) => {
+				const CustomTag = config.pageComponents?.tag;
 				return {
-					PageComponent: () => <TagPageComponent tagSlug={tagSlug} />,
+					PageComponent: CustomTag
+						? () => <CustomTag tagSlug={tagSlug} />
+						: () => <TagPageComponent tagSlug={tagSlug} />,
 					loader: createTagLoader(tagSlug, config),
 					meta: createTagMeta(tagSlug, config),
 				};
 			}),
 			post: createRoute("/blog/:slug", ({ params: { slug } }) => {
+				const CustomPost = config.pageComponents?.post;
 				return {
-					PageComponent: () => <PostPageComponent slug={slug} />,
+					PageComponent: CustomPost
+						? () => <CustomPost slug={slug} />
+						: () => <PostPageComponent slug={slug} />,
 					loader: createPostLoader(slug, config),
 					meta: createPostMeta(slug, config),
 				};

package/src/plugins/cms/client/components/shared/default-error.tsx

@@ -4,7 +4,7 @@ import { AlertCircle } from "lucide-react";
 import { Button } from "@workspace/ui/components/button";
 
 interface DefaultErrorProps {
-	error: Error;
+	error: unknown;
 	resetErrorBoundary?: () => void;
 }
 
@@ -18,7 +18,8 @@ export function DefaultError({ error, resetErrorBoundary }: DefaultErrorProps) {
 				Something went wrong
 			</h3>
 			<p className="text-sm text-muted-foreground mb-4 max-w-sm">
-				{error.message || "An unexpected error occurred"}
+				{(error instanceof Error ? error.message : undefined) ||
+					"An unexpected error occurred"}
 			</p>
 			{resetErrorBoundary && (
 				<Button variant="outline" onClick={resetErrorBoundary}>

package/src/plugins/cms/client/plugin.tsx

@@ -6,6 +6,7 @@ import {
 	runClientHookWithShim,
 } from "@btst/stack/plugins/client";
 import { createRoute } from "@btst/yar";
+import type { ComponentType } from "react";
 import type { QueryClient } from "@tanstack/react-query";
 import type { CMSApiRouter } from "../api";
 import { createCMSQueryKeys } from "../query-keys";
@@ -129,6 +130,22 @@ export interface CMSClientConfig {
 	headers?: Headers;
 	/** Optional hooks for customizing behavior (authorization, redirects, etc.) */
 	hooks?: CMSClientHooks;
+
+	/**
+	 * Optional page component overrides.
+	 * Replace any plugin page with a custom React component.
+	 * The built-in component is used as the fallback when not provided.
+	 */
+	pageComponents?: {
+		/** Replaces the CMS dashboard page */
+		dashboard?: ComponentType;
+		/** Replaces the content list page */
+		contentList?: ComponentType<{ typeSlug: string }>;
+		/** Replaces the new content editor page */
+		newContent?: ComponentType<{ typeSlug: string }>;
+		/** Replaces the edit content editor page */
+		editContent?: ComponentType<{ typeSlug: string; id: string }>;
+	};
 }
 
 /**
@@ -469,38 +486,54 @@ export const cmsClientPlugin = (config: CMSClientConfig) =>
 		name: "cms",
 
 		routes: () => ({
-			dashboard: createRoute("/cms", () => ({
-				PageComponent: () => <DashboardPageComponent />,
-				loader: createDashboardLoader(config),
-				meta: createDashboardMeta(),
-			})),
-
-			contentList: createRoute("/cms/:typeSlug", ({ params }) => ({
-				PageComponent: () => (
-					<ContentListPageComponent typeSlug={params.typeSlug} />
-				),
-				loader: createContentListLoader(params.typeSlug, config),
-				meta: createContentListMeta(params.typeSlug, config),
-			})),
-
-			newContent: createRoute("/cms/:typeSlug/new", ({ params }) => ({
-				PageComponent: () => (
-					<ContentEditorPageComponent typeSlug={params.typeSlug} />
-				),
-				loader: createContentEditorLoader(params.typeSlug, undefined, config),
-				meta: createContentEditorMeta(params.typeSlug, undefined, config),
-			})),
-
-			editContent: createRoute("/cms/:typeSlug/:id", ({ params }) => ({
-				PageComponent: () => (
-					<ContentEditorPageComponent
-						typeSlug={params.typeSlug}
-						id={params.id}
-					/>
-				),
-				loader: createContentEditorLoader(params.typeSlug, params.id, config),
-				meta: createContentEditorMeta(params.typeSlug, params.id, config),
-			})),
+			dashboard: createRoute("/cms", () => {
+				const CustomDashboard = config.pageComponents?.dashboard;
+				return {
+					PageComponent: CustomDashboard ?? (() => <DashboardPageComponent />),
+					loader: createDashboardLoader(config),
+					meta: createDashboardMeta(),
+				};
+			}),
+
+			contentList: createRoute("/cms/:typeSlug", ({ params }) => {
+				const CustomContentList = config.pageComponents?.contentList;
+				return {
+					PageComponent: CustomContentList
+						? () => <CustomContentList typeSlug={params.typeSlug} />
+						: () => <ContentListPageComponent typeSlug={params.typeSlug} />,
+					loader: createContentListLoader(params.typeSlug, config),
+					meta: createContentListMeta(params.typeSlug, config),
+				};
+			}),
+
+			newContent: createRoute("/cms/:typeSlug/new", ({ params }) => {
+				const CustomNewContent = config.pageComponents?.newContent;
+				return {
+					PageComponent: CustomNewContent
+						? () => <CustomNewContent typeSlug={params.typeSlug} />
+						: () => <ContentEditorPageComponent typeSlug={params.typeSlug} />,
+					loader: createContentEditorLoader(params.typeSlug, undefined, config),
+					meta: createContentEditorMeta(params.typeSlug, undefined, config),
+				};
+			}),
+
+			editContent: createRoute("/cms/:typeSlug/:id", ({ params }) => {
+				const CustomEditContent = config.pageComponents?.editContent;
+				return {
+					PageComponent: CustomEditContent
+						? () => (
+								<CustomEditContent typeSlug={params.typeSlug} id={params.id} />
+							)
+						: () => (
+								<ContentEditorPageComponent
+									typeSlug={params.typeSlug}
+									id={params.id}
+								/>
+							),
+					loader: createContentEditorLoader(params.typeSlug, params.id, config),
+					meta: createContentEditorMeta(params.typeSlug, params.id, config),
+				};
+			}),
 		}),
 
 		sitemap: async () => {

package/src/plugins/form-builder/client/components/shared/default-error.tsx

@@ -4,7 +4,7 @@ import { AlertCircle } from "lucide-react";
 import { Button } from "@workspace/ui/components/button";
 
 interface DefaultErrorProps {
-	error: Error;
+	error: unknown;
 	resetErrorBoundary?: () => void;
 }
 
@@ -18,7 +18,8 @@ export function DefaultError({ error, resetErrorBoundary }: DefaultErrorProps) {
 				Something went wrong
 			</h3>
 			<p className="text-sm text-muted-foreground mb-4 max-w-sm">
-				{error.message || "An unexpected error occurred"}
+				{(error instanceof Error ? error.message : undefined) ||
+					"An unexpected error occurred"}
 			</p>
 			{resetErrorBoundary && (
 				<Button variant="outline" onClick={resetErrorBoundary}>

package/src/plugins/form-builder/client/plugin.tsx

@@ -7,6 +7,7 @@ import {
 	runClientHookWithShim,
 } from "@btst/stack/plugins/client";
 import { createRoute } from "@btst/yar";
+import type { ComponentType } from "react";
 import type { QueryClient } from "@tanstack/react-query";
 import type { FormBuilderApiRouter } from "../api";
 import { createFormBuilderQueryKeys } from "../query-keys";
@@ -126,6 +127,22 @@ export interface FormBuilderClientConfig {
 	headers?: Headers;
 	/** Optional hooks for customizing behavior (authorization, redirects, etc.) */
 	hooks?: FormBuilderClientHooks;
+
+	/**
+	 * Optional page component overrides.
+	 * Replace any plugin page with a custom React component.
+	 * The built-in component is used as the fallback when not provided.
+	 */
+	pageComponents?: {
+		/** Replaces the form list page */
+		formList?: ComponentType;
+		/** Replaces the new form page */
+		newForm?: ComponentType;
+		/** Replaces the form editor page */
+		editForm?: ComponentType<{ id: string }>;
+		/** Replaces the form submissions page */
+		submissions?: ComponentType<{ formId: string }>;
+	};
 }
 
 /**
@@ -476,29 +493,45 @@ export const formBuilderClientPlugin = (config: FormBuilderClientConfig) =>
 		name: "form-builder",
 
 		routes: () => ({
-			formList: createRoute("/forms", () => ({
-				PageComponent: () => <FormListPageComponent />,
-				loader: createFormListLoader(config),
-				meta: createFormListMeta(),
-			})),
-
-			newForm: createRoute("/forms/new", () => ({
-				PageComponent: () => <FormBuilderPageComponent />,
-				loader: createFormBuilderLoader(undefined, config),
-				meta: createFormBuilderMeta(undefined, config),
-			})),
-
-			editForm: createRoute("/forms/:id/edit", ({ params }) => ({
-				PageComponent: () => <FormBuilderPageComponent id={params.id} />,
-				loader: createFormBuilderLoader(params.id, config),
-				meta: createFormBuilderMeta(params.id, config),
-			})),
-
-			submissions: createRoute("/forms/:id/submissions", ({ params }) => ({
-				PageComponent: () => <SubmissionsPageComponent formId={params.id} />,
-				loader: createSubmissionsLoader(params.id, config),
-				meta: createSubmissionsMeta(params.id, config),
-			})),
+			formList: createRoute("/forms", () => {
+				const CustomFormList = config.pageComponents?.formList;
+				return {
+					PageComponent: CustomFormList ?? (() => <FormListPageComponent />),
+					loader: createFormListLoader(config),
+					meta: createFormListMeta(),
+				};
+			}),
+
+			newForm: createRoute("/forms/new", () => {
+				const CustomNewForm = config.pageComponents?.newForm;
+				return {
+					PageComponent: CustomNewForm ?? (() => <FormBuilderPageComponent />),
+					loader: createFormBuilderLoader(undefined, config),
+					meta: createFormBuilderMeta(undefined, config),
+				};
+			}),
+
+			editForm: createRoute("/forms/:id/edit", ({ params }) => {
+				const CustomEditForm = config.pageComponents?.editForm;
+				return {
+					PageComponent: CustomEditForm
+						? () => <CustomEditForm id={params.id} />
+						: () => <FormBuilderPageComponent id={params.id} />,
+					loader: createFormBuilderLoader(params.id, config),
+					meta: createFormBuilderMeta(params.id, config),
+				};
+			}),
+
+			submissions: createRoute("/forms/:id/submissions", ({ params }) => {
+				const CustomSubmissions = config.pageComponents?.submissions;
+				return {
+					PageComponent: CustomSubmissions
+						? () => <CustomSubmissions formId={params.id} />
+						: () => <SubmissionsPageComponent formId={params.id} />,
+					loader: createSubmissionsLoader(params.id, config),
+					meta: createSubmissionsMeta(params.id, config),
+				};
+			}),
 		}),
 
 		sitemap: async () => {

package/src/plugins/kanban/client/components/shared/default-error.tsx

@@ -4,7 +4,7 @@ import { AlertCircle, RefreshCw } from "lucide-react";
 import { Button } from "@workspace/ui/components/button";
 
 interface DefaultErrorProps {
-	error?: Error;
+	error?: unknown;
 	reset?: () => void;
 }
 
@@ -19,7 +19,8 @@ export function DefaultError({ error, reset }: DefaultErrorProps) {
 			</div>
 			<h3 className="text-lg font-semibold mb-2">Something went wrong</h3>
 			<p className="text-muted-foreground max-w-md mb-4">
-				{error?.message || "An unexpected error occurred. Please try again."}
+				{(error instanceof Error ? error.message : undefined) ||
+					"An unexpected error occurred. Please try again."}
 			</p>
 			{reset && (
 				<Button onClick={reset} variant="outline">

package/src/plugins/kanban/client/plugin.tsx

@@ -5,6 +5,7 @@ import {
 	runClientHookWithShim,
 } from "@btst/stack/plugins/client";
 import { createRoute } from "@btst/yar";
+import type { ComponentType } from "react";
 import type { QueryClient } from "@tanstack/react-query";
 import type { KanbanApiRouter } from "../api";
 import { createKanbanQueryKeys } from "../query-keys";
@@ -79,6 +80,20 @@ export interface KanbanClientConfig {
 
 	/** Optional headers for SSR (e.g., forwarding cookies) */
 	headers?: Headers;
+
+	/**
+	 * Optional page component overrides.
+	 * Replace any plugin page with a custom React component.
+	 * The built-in component is used as the fallback when not provided.
+	 */
+	pageComponents?: {
+		/** Replaces the boards list page */
+		boards?: ComponentType;
+		/** Replaces the new board page */
+		newBoard?: ComponentType;
+		/** Replaces the board detail page */
+		board?: ComponentType<{ boardId: string }>;
+	};
 }
 
 /**
@@ -407,22 +422,27 @@ export const kanbanClientPlugin = (config: KanbanClientConfig) =>
 
 		routes: () => ({
 			boards: createRoute("/kanban", () => {
+				const CustomBoards = config.pageComponents?.boards;
 				return {
-					PageComponent: () => <BoardsListPageComponent />,
+					PageComponent: CustomBoards ?? (() => <BoardsListPageComponent />),
 					loader: createBoardsLoader(config),
 					meta: createBoardsListMeta(config),
 				};
 			}),
 			newBoard: createRoute("/kanban/new", () => {
+				const CustomNewBoard = config.pageComponents?.newBoard;
 				return {
-					PageComponent: NewBoardPageComponent,
+					PageComponent: CustomNewBoard ?? NewBoardPageComponent,
 					loader: createNewBoardLoader(config),
 					meta: createNewBoardMeta(config),
 				};
 			}),
 			board: createRoute("/kanban/:boardId", ({ params: { boardId } }) => {
+				const CustomBoard = config.pageComponents?.board;
 				return {
-					PageComponent: () => <BoardPageComponent boardId={boardId} />,
+					PageComponent: CustomBoard
+						? () => <CustomBoard boardId={boardId} />
+						: () => <BoardPageComponent boardId={boardId} />,
 					loader: createBoardLoader(boardId, config),
 					meta: createBoardMeta(boardId, config),
 				};

package/src/plugins/ui-builder/client/components/page-renderer.tsx

@@ -29,13 +29,15 @@ function DefaultLoadingComponent(): ReactNode {
 /**
  * Default error component for PageRenderer
  */
-function DefaultErrorComponent({ error }: { error: Error }): ReactNode {
+function DefaultErrorComponent({ error }: { error: unknown }): ReactNode {
 	return (
 		<div className="flex flex-col items-center justify-center min-h-[200px] p-4">
 			<div className="text-destructive font-medium">
 				{uiBuilderLocalization.pageRenderer.error}
 			</div>
-			<div className="text-sm text-muted-foreground mt-2">{error.message}</div>
+			<div className="text-sm text-muted-foreground mt-2">
+				{error instanceof Error ? error.message : String(error)}
+			</div>
 		</div>
 	);
 }
@@ -65,7 +67,7 @@ export interface PageRendererProps {
 	/** Custom loading component */
 	LoadingComponent?: ComponentType;
 	/** Custom error component */
-	ErrorComponent?: ComponentType<{ error: Error }>;
+	ErrorComponent?: ComponentType<{ error: unknown }>;
 	/** Custom not found component */
 	NotFoundComponent?: ComponentType;
 	/** Additional className for the container */

package/src/plugins/ui-builder/client/components/shared/default-error.tsx

@@ -4,7 +4,7 @@ import { AlertCircle } from "lucide-react";
 import { Button } from "@workspace/ui/components/button";
 
 interface DefaultErrorProps {
-	error: Error;
+	error: unknown;
 	resetErrorBoundary?: () => void;
 }
 
@@ -18,7 +18,8 @@ export function DefaultError({ error, resetErrorBoundary }: DefaultErrorProps) {
 				Something went wrong
 			</h3>
 			<p className="text-sm text-muted-foreground mb-4 max-w-sm">
-				{error.message || "An unexpected error occurred"}
+				{(error instanceof Error ? error.message : undefined) ||
+					"An unexpected error occurred"}
 			</p>
 			{resetErrorBoundary && (
 				<Button variant="outline" onClick={resetErrorBoundary}>