@btst/stack 2.3.0 → 2.5.0

package/src/plugins/ai-chat/client/context/page-ai-context.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useId,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+
+/**
+ * A client-side tool handler — receives the AI's tool call args and returns a result.
+ * The result is sent back to the model so it can continue the conversation.
+ */
+export type PageAIClientTool = (
+	args: any,
+) => Promise<{ success: boolean; message?: string }>;
+
+/**
+ * Configuration registered by a page to provide AI context and capabilities.
+ * Any component in the tree can call useRegisterPageAIContext with this config.
+ */
+export interface PageAIContextConfig {
+	/**
+	 * Identifier for the current route/page (e.g. "blog-post", "ui-builder-edit-page").
+	 * Shown as a badge in the chat header.
+	 */
+	routeName: string;
+
+	/**
+	 * Human-readable description of the current page and its content.
+	 * Injected into the AI system prompt so it understands what the user is looking at.
+	 * Capped at 8,000 characters server-side.
+	 */
+	pageDescription: string;
+
+	/**
+	 * Optional suggested prompts shown as quick-action chips in the chat empty state.
+	 * These augment (not replace) any static suggestions configured in plugin overrides.
+	 */
+	suggestions?: string[];
+
+	/**
+	 * Client-side tool handlers keyed by tool name.
+	 * When the AI calls a tool by this name, the handler is invoked with the tool args.
+	 * The result is sent back to the model via addToolResult.
+	 *
+	 * Tool schemas must be registered server-side via enablePageTools + clientToolSchemas
+	 * in aiChatBackendPlugin (built-in tools like fillBlogForm are pre-registered).
+	 */
+	clientTools?: Record<string, PageAIClientTool>;
+}
+
+interface PageAIAPIContextValue {
+	register: (id: string, config: PageAIContextConfig) => void;
+	unregister: (id: string) => void;
+	getActive: () => PageAIContextConfig | null;
+}
+
+/**
+ * Stable API context — holds register/unregister/getActive.
+ * Never changes reference, so useRegisterPageAIContext effects don't re-run
+ * simply because the provider re-rendered after a bumpVersion call.
+ */
+const PageAIAPIContext = createContext<PageAIAPIContextValue | null>(null);
+
+/**
+ * Reactive version context — incremented on every register/unregister.
+ * Consumers of usePageAIContext subscribe here so they re-render when
+ * registrations change and re-call getActive() to pick up the latest config.
+ */
+const PageAIVersionContext = createContext<number>(0);
+
+/**
+ * Provider that enables route-aware AI context across the app.
+ *
+ * Place this at the root layout — above all StackProviders — so it spans
+ * both your main app tree and any chat modals rendered as parallel/intercept routes.
+ *
+ * @example
+ * // app/layout.tsx
+ * import { PageAIContextProvider } from "@btst/stack/plugins/ai-chat/client/context"
+ *
+ * export default function RootLayout({ children }) {
+ *   return <PageAIContextProvider>{children}</PageAIContextProvider>
+ * }
+ */
+export function PageAIContextProvider({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	// Map from stable registration id → config
+	// Using useRef so mutations don't trigger re-renders of the provider itself
+	const registrationsRef = useRef<Map<string, PageAIContextConfig>>(new Map());
+	// Track insertion order so the last-registered (most specific) wins
+	const insertionOrderRef = useRef<string[]>([]);
+
+	// Version counter — bumped on every register/unregister so consumers re-read
+	const [version, setVersion] = useState(0);
+	const bumpVersion = useCallback(() => setVersion((v) => v + 1), []);
+
+	const register = useCallback(
+		(id: string, config: PageAIContextConfig) => {
+			registrationsRef.current.set(id, config);
+			// Move to end to mark as most recent
+			insertionOrderRef.current = insertionOrderRef.current.filter(
+				(k) => k !== id,
+			);
+			insertionOrderRef.current.push(id);
+			bumpVersion();
+		},
+		[bumpVersion],
+	);
+
+	const unregister = useCallback(
+		(id: string) => {
+			registrationsRef.current.delete(id);
+			insertionOrderRef.current = insertionOrderRef.current.filter(
+				(k) => k !== id,
+			);
+			bumpVersion();
+		},
+		[bumpVersion],
+	);
+
+	const getActive = useCallback((): PageAIContextConfig | null => {
+		const order = insertionOrderRef.current;
+		if (order.length === 0) return null;
+		// Last registered wins (most deeply nested / most recently mounted)
+		const lastId = order[order.length - 1];
+		if (!lastId) return null;
+		return registrationsRef.current.get(lastId) ?? null;
+	}, []);
+
+	// Memoize the API object so its reference never changes — this is what
+	// breaks the infinite loop: useRegisterPageAIContext has `ctx` (the API)
+	// in its effect deps, and a stable reference means the effect won't re-run
+	// just because the provider re-rendered after bumpVersion().
+	const api = useMemo(
+		() => ({ register, unregister, getActive }),
+		[register, unregister, getActive],
+	);
+
+	return (
+		<PageAIAPIContext.Provider value={api}>
+			<PageAIVersionContext.Provider value={version}>
+				{children}
+			</PageAIVersionContext.Provider>
+		</PageAIAPIContext.Provider>
+	);
+}
+
+/**
+ * Register page AI context from any component.
+ * The registration is cleaned up automatically when the component unmounts.
+ *
+ * Pass `null` to conditionally disable context (e.g. while data is loading).
+ *
+ * @example
+ * // Blog post page
+ * useRegisterPageAIContext(post ? {
+ *   routeName: "blog-post",
+ *   pageDescription: `Blog post: "${post.title}"\n\n${post.content?.slice(0, 16000)}`,
+ *   suggestions: ["Summarize this post", "What are the key takeaways?"],
+ * } : null)
+ */
+export function useRegisterPageAIContext(
+	config: PageAIContextConfig | null,
+): void {
+	// Use the stable API context — its reference never changes, so adding it
+	// to the dependency array below does NOT cause the effect to re-run after
+	// bumpVersion() fires. This breaks the register → bumpVersion → re-render
+	// → effect re-run → register loop that caused "Maximum update depth exceeded".
+	const ctx = useContext(PageAIAPIContext);
+	const id = useId();
+
+	// Always keep the ref current so clientTools handlers are never stale.
+	// Updating a ref during render is safe — the value is visible to any effect
+	// that runs in the same commit.
+	const configRef = useRef<PageAIContextConfig | null>(config);
+	configRef.current = config;
+
+	useEffect(() => {
+		if (!ctx || !configRef.current) return;
+		// Register a live proxy that always reads from configRef. This ensures
+		// clientTools handlers are fresh even when the effect doesn't re-run —
+		// for example when a handler's closure captures new state but the
+		// serializable fields (routeName, pageDescription, suggestions) are unchanged.
+		// JSON.stringify silently strips function values, so clientTools would be
+		// invisible to a plain JSON.stringify(config) dependency check.
+		ctx.register(id, {
+			get routeName() {
+				return configRef.current?.routeName ?? "";
+			},
+			get pageDescription() {
+				return configRef.current?.pageDescription ?? "";
+			},
+			get suggestions() {
+				return configRef.current?.suggestions;
+			},
+			get clientTools() {
+				return configRef.current?.clientTools;
+			},
+		});
+		return () => {
+			ctx.unregister(id);
+		};
+		// Track serializable fields individually. JSON.stringify on the whole config
+		// would silently strip clientTools (functions), making handler changes invisible.
+		// Handler freshness is provided by the ref-proxy above instead.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [
+		ctx,
+		id,
+		config === null,
+		config?.routeName,
+		config?.pageDescription,
+		JSON.stringify(config?.suggestions),
+	]);
+}
+
+/**
+ * Read the currently active page AI context.
+ * Returns null when no page has registered context, or when PageAIContextProvider
+ * is not in the tree.
+ *
+ * Used internally by ChatInterface to inject context into requests.
+ */
+export function usePageAIContext(): PageAIContextConfig | null {
+	// Subscribe to the version counter so this hook re-runs whenever a page
+	// registers or unregisters context, then read the latest active config.
+	useContext(PageAIVersionContext);
+	const ctx = useContext(PageAIAPIContext);
+	if (!ctx) return null;
+	return ctx.getActive();
+}

package/src/plugins/ai-chat/client/plugin.tsx

@@ -1,6 +1,7 @@
 import {
 	defineClientPlugin,
 	createApiClient,
+	runClientHookWithShim,
 } from "@btst/stack/plugins/client";
 import { createRoute } from "@btst/yar";
 import type { QueryClient } from "@tanstack/react-query";
@@ -92,35 +93,33 @@ export interface AiChatClientConfig {
  */
 export interface AiChatClientHooks {
 	/**
-	 * Called before loading conversations list. Return false to cancel loading.
+	 * Called before loading conversations list. Throw an error to cancel loading.
 	 * @param context - Loader context with path, params, etc.
 	 */
-	beforeLoadConversations?: (
-		context: LoaderContext,
-	) => Promise<boolean> | boolean;
+	beforeLoadConversations?: (context: LoaderContext) => Promise<void> | void;
 
 	/**
-	 * Called after conversations are loaded. Return false to cancel further processing.
+	 * Called after conversations are loaded. Throw an error to cancel further processing.
 	 * @param conversations - Array of loaded conversations or null
 	 * @param context - Loader context
 	 */
 	afterLoadConversations?: (
 		conversations: SerializedConversation[] | null,
 		context: LoaderContext,
-	) => Promise<boolean> | boolean;
+	) => Promise<void> | void;
 
 	/**
-	 * Called before loading a single conversation. Return false to cancel loading.
+	 * Called before loading a single conversation. Throw an error to cancel loading.
 	 * @param id - Conversation ID being loaded
 	 * @param context - Loader context
 	 */
 	beforeLoadConversation?: (
 		id: string,
 		context: LoaderContext,
-	) => Promise<boolean> | boolean;
+	) => Promise<void> | void;
 
 	/**
-	 * Called after a conversation is loaded. Return false to cancel further processing.
+	 * Called after a conversation is loaded. Throw an error to cancel further processing.
 	 * @param conversation - Loaded conversation or null if not found
 	 * @param id - Conversation ID that was requested
 	 * @param context - Loader context
@@ -131,7 +130,7 @@ export interface AiChatClientHooks {
 			| null,
 		id: string,
 		context: LoaderContext,
-	) => Promise<boolean> | boolean;
+	) => Promise<void> | void;
 
 	/**
 	 * Called when a loading error occurs
@@ -163,10 +162,10 @@ function createConversationsLoader(config: AiChatClientConfig) {
 			try {
 				// Before hook
 				if (hooks?.beforeLoadConversations) {
-					const canLoad = await hooks.beforeLoadConversations(context);
-					if (!canLoad) {
-						throw new Error("Load prevented by beforeLoadConversations hook");
-					}
+					await runClientHookWithShim(
+						() => hooks.beforeLoadConversations!(context),
+						"Load prevented by beforeLoadConversations hook",
+					);
 				}
 
 				const client = createApiClient<AiChatApiRouter>({
@@ -185,13 +184,10 @@ function createConversationsLoader(config: AiChatClientConfig) {
 						queryClient.getQueryData<SerializedConversation[]>(
 							listQuery.queryKey,
 						) || null;
-					const canContinue = await hooks.afterLoadConversations(
-						conversations,
-						context,
+					await runClientHookWithShim(
+						() => hooks.afterLoadConversations!(conversations, context),
+						"Load prevented by afterLoadConversations hook",
 					);
-					if (canContinue === false) {
-						throw new Error("Load prevented by afterLoadConversations hook");
-					}
 				}
 
 				// Check for errors
@@ -230,10 +226,10 @@ function createConversationLoader(id: string, config: AiChatClientConfig) {
 			try {
 				// Before hook
 				if (hooks?.beforeLoadConversation) {
-					const canLoad = await hooks.beforeLoadConversation(id, context);
-					if (!canLoad) {
-						throw new Error("Load prevented by beforeLoadConversation hook");
-					}
+					await runClientHookWithShim(
+						() => hooks.beforeLoadConversation!(id, context),
+						"Load prevented by beforeLoadConversation hook",
+					);
 				}
 
 				const client = createApiClient<AiChatApiRouter>({
@@ -258,14 +254,10 @@ function createConversationLoader(id: string, config: AiChatClientConfig) {
 						queryClient.getQueryData<
 							SerializedConversation & { messages: SerializedMessage[] }
 						>(conversationQuery.queryKey) || null;
-					const canContinue = await hooks.afterLoadConversation(
-						conversation,
-						id,
-						context,
+					await runClientHookWithShim(
+						() => hooks.afterLoadConversation!(conversation, id, context),
+						"Load prevented by afterLoadConversation hook",
 					);
-					if (canContinue === false) {
-						throw new Error("Load prevented by afterLoadConversation hook");
-					}
 				}
 
 				// Check for errors

package/src/plugins/ai-chat/schemas.ts

@@ -37,4 +37,20 @@ export const chatRequestSchema = z.object({
 	),
 	conversationId: z.string().optional(),
 	model: z.string().optional(),
+	/**
+	 * Description of the current page context, injected into the AI system prompt.
+	 * Sent by ChatInterface when a page has registered context via useRegisterPageAIContext.
+	 */
+	pageContext: z.string().max(16000).optional(),
+	/**
+	 * Names of client-side tools currently available on the page.
+	 * The server includes matching tool schemas in the streamText call.
+	 */
+	availableTools: z.array(z.string()).optional(),
+	/**
+	 * The routeName registered by the page via useRegisterPageAIContext.
+	 * Cross-validated server-side against each built-in tool's route allowlist
+	 * to prevent a page from claiming tools intended for a different route.
+	 */
+	routeName: z.string().optional(),
 });

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

@@ -10,6 +10,7 @@ import { getAllPosts, getPostBySlug, getAllTags } from "./getters";
 import { BLOG_QUERY_KEYS } from "./query-key-defs";
 import { serializePost, serializeTag } from "./serializers";
 import type { QueryClient } from "@tanstack/react-query";
+import { runHookWithShim } from "../../utils";
 
 /**
  * Route keys for the blog plugin — matches the keys returned by
@@ -131,25 +132,25 @@ export interface BlogApiContext<TBody = any, TParams = any, TQuery = any> {
  */
 export interface BlogBackendHooks {
 	/**
-	 * Called before listing posts. Return false to deny access.
+	 * Called before listing posts. Throw an error to deny access.
 	 * @param filter - Query parameters for filtering posts
 	 * @param context - Request context with headers, etc.
 	 */
 	onBeforeListPosts?: (
 		filter: z.infer<typeof PostListQuerySchema>,
 		context: BlogApiContext,
-	) => Promise<boolean> | boolean;
+	) => Promise<void> | void;
 	/**
-	 * Called before creating a post. Return false to deny access.
+	 * Called before creating a post. Throw an error to deny access.
 	 * @param data - Post data being created
 	 * @param context - Request context with headers, etc.
 	 */
 	onBeforeCreatePost?: (
 		data: z.infer<typeof createPostSchema>,
 		context: BlogApiContext,
-	) => Promise<boolean> | boolean;
+	) => Promise<void> | void;
 	/**
-	 * Called before updating a post. Return false to deny access.
+	 * Called before updating a post. Throw an error to deny access.
 	 * @param postId - ID of the post being updated
 	 * @param data - Updated post data
 	 * @param context - Request context with headers, etc.
@@ -158,16 +159,16 @@ export interface BlogBackendHooks {
 		postId: string,
 		data: z.infer<typeof updatePostSchema>,
 		context: BlogApiContext,
-	) => Promise<boolean> | boolean;
+	) => Promise<void> | void;
 	/**
-	 * Called before deleting a post. Return false to deny access.
+	 * Called before deleting a post. Throw an error to deny access.
 	 * @param postId - ID of the post being deleted
 	 * @param context - Request context with headers, etc.
 	 */
 	onBeforeDeletePost?: (
 		postId: string,
 		context: BlogApiContext,
-	) => Promise<boolean> | boolean;
+	) => Promise<void> | void;
 
 	/**
 	 * Called after posts are read successfully
@@ -350,12 +351,11 @@ export const blogBackendPlugin = (hooks?: BlogBackendHooks) =>
 
 					try {
 						if (hooks?.onBeforeListPosts) {
-							const canList = await hooks.onBeforeListPosts(query, context);
-							if (!canList) {
-								throw ctx.error(403, {
-									message: "Unauthorized: Cannot list posts",
-								});
-							}
+							await runHookWithShim(
+								() => hooks.onBeforeListPosts!(query, context),
+								ctx.error,
+								"Unauthorized: Cannot list posts",
+							);
 						}
 
 						const result = await getAllPosts(adapter, query);
@@ -387,15 +387,11 @@ export const blogBackendPlugin = (hooks?: BlogBackendHooks) =>
 
 					try {
 						if (hooks?.onBeforeCreatePost) {
-							const canCreate = await hooks.onBeforeCreatePost(
-								ctx.body,
-								context,
+							await runHookWithShim(
+								() => hooks.onBeforeCreatePost!(ctx.body, context),
+								ctx.error,
+								"Unauthorized: Cannot create post",
 							);
-							if (!canCreate) {
-								throw ctx.error(403, {
-									message: "Unauthorized: Cannot create post",
-								});
-							}
 						}
 
 						const { tags, ...postData } = ctx.body;
@@ -471,16 +467,12 @@ export const blogBackendPlugin = (hooks?: BlogBackendHooks) =>
 
 					try {
 						if (hooks?.onBeforeUpdatePost) {
-							const canUpdate = await hooks.onBeforeUpdatePost(
-								ctx.params.id,
-								ctx.body,
-								context,
+							await runHookWithShim(
+								() =>
+									hooks.onBeforeUpdatePost!(ctx.params.id, ctx.body, context),
+								ctx.error,
+								"Unauthorized: Cannot update post",
 							);
-							if (!canUpdate) {
-								throw ctx.error(403, {
-									message: "Unauthorized: Cannot update post",
-								});
-							}
 						}
 
 						const { tags, slug: rawSlug, ...restPostData } = ctx.body;
@@ -598,15 +590,11 @@ export const blogBackendPlugin = (hooks?: BlogBackendHooks) =>
 					try {
 						// Authorization hook
 						if (hooks?.onBeforeDeletePost) {
-							const canDelete = await hooks.onBeforeDeletePost(
-								ctx.params.id,
-								context,
+							await runHookWithShim(
+								() => hooks.onBeforeDeletePost!(ctx.params.id, context),
+								ctx.error,
+								"Unauthorized: Cannot delete post",
 							);
-							if (!canDelete) {
-								throw ctx.error(403, {
-									message: "Unauthorized: Cannot delete post",
-								});
-							}
 						}
 
 						await adapter.delete<Post>({
@@ -642,15 +630,11 @@ export const blogBackendPlugin = (hooks?: BlogBackendHooks) =>
 
 					try {
 						if (hooks?.onBeforeListPosts) {
-							const canList = await hooks.onBeforeListPosts(
-								{ published: true },
-								context,
+							await runHookWithShim(
+								() => hooks.onBeforeListPosts!({ published: true }, context),
+								ctx.error,
+								"Unauthorized: Cannot list posts",
 							);
-							if (!canList) {
-								throw ctx.error(403, {
-									message: "Unauthorized: Cannot list posts",
-								});
-							}
 						}
 
 						const date = query.date;

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

@@ -40,7 +40,7 @@ import {
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
-import { lazy, memo, Suspense, useMemo, useState } from "react";
+import { lazy, memo, Suspense, useEffect, useMemo, useState } from "react";
 import {
 	type FieldPath,
 	type SubmitHandler,
@@ -325,6 +325,10 @@ const CustomPostUpdateSchema = PostUpdateSchema.omit({
 type AddPostFormProps = {
 	onClose: () => void;
 	onSuccess: (post: { published: boolean }) => void;
+	/** Called once with the form instance so parent components can access form state */
+	onFormReady?: (
+		form: UseFormReturn<z.input<typeof CustomPostCreateSchema>>,
+	) => void;
 };
 
 const addPostFormPropsAreEqual = (
@@ -333,10 +337,15 @@ const addPostFormPropsAreEqual = (
 ): boolean => {
 	if (prevProps.onClose !== nextProps.onClose) return false;
 	if (prevProps.onSuccess !== nextProps.onSuccess) return false;
+	if (prevProps.onFormReady !== nextProps.onFormReady) return false;
 	return true;
 };
 
-const AddPostFormComponent = ({ onClose, onSuccess }: AddPostFormProps) => {
+const AddPostFormComponent = ({
+	onClose,
+	onSuccess,
+	onFormReady,
+}: AddPostFormProps) => {
 	const [featuredImageUploading, setFeaturedImageUploading] = useState(false);
 	const { localization } = usePluginOverrides<
 		BlogPluginOverrides,
@@ -393,6 +402,12 @@ const AddPostFormComponent = ({ onClose, onSuccess }: AddPostFormProps) => {
 		},
 	});
 
+	// Expose form instance to parent for AI context integration
+	useEffect(() => {
+		onFormReady?.(form);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	return (
 		<PostFormBody
 			form={form}
@@ -417,6 +432,10 @@ type EditPostFormProps = {
 	onClose: () => void;
 	onSuccess: (post: { slug: string; published: boolean }) => void;
 	onDelete?: () => void;
+	/** Called once with the form instance so parent components can access form state */
+	onFormReady?: (
+		form: UseFormReturn<z.input<typeof CustomPostUpdateSchema>>,
+	) => void;
 };
 
 const editPostFormPropsAreEqual = (
@@ -427,6 +446,7 @@ const editPostFormPropsAreEqual = (
 	if (prevProps.onClose !== nextProps.onClose) return false;
 	if (prevProps.onSuccess !== nextProps.onSuccess) return false;
 	if (prevProps.onDelete !== nextProps.onDelete) return false;
+	if (prevProps.onFormReady !== nextProps.onFormReady) return false;
 	return true;
 };
 
@@ -435,6 +455,7 @@ const EditPostFormComponent = ({
 	onClose,
 	onSuccess,
 	onDelete,
+	onFormReady,
 }: EditPostFormProps) => {
 	const [featuredImageUploading, setFeaturedImageUploading] = useState(false);
 	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -537,6 +558,12 @@ const EditPostFormComponent = ({
 		values: initialData as z.input<typeof schema>,
 	});
 
+	// Expose form instance to parent for AI context integration
+	useEffect(() => {
+		onFormReady?.(form);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	if (!post) {
 		return <EmptyList message={localization.BLOG_PAGE_NOT_FOUND_DESCRIPTION} />;
 	}

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

@@ -7,6 +7,10 @@ import { PageWrapper } from "../shared/page-wrapper";
 import { BLOG_LOCALIZATION } from "../../localization";
 import type { BlogPluginOverrides } from "../../overrides";
 import { useRouteLifecycle } from "@workspace/ui/hooks/use-route-lifecycle";
+import { useRegisterPageAIContext } from "@btst/stack/plugins/ai-chat/client/context";
+import { useRef, useCallback } from "react";
+import type { UseFormReturn } from "react-hook-form";
+import { createFillBlogFormHandler } from "./fill-blog-form-handler";
 
 // Internal component with actual page content
 export function EditPostPage({ slug }: { slug: string }) {
@@ -36,6 +40,29 @@ export function EditPostPage({ slug }: { slug: string }) {
 		},
 	});
 
+	// Ref to capture the form instance from EditPostForm via onFormReady callback
+	const formRef = useRef<UseFormReturn<any> | null>(null);
+	const handleFormReady = useCallback((form: UseFormReturn<any>) => {
+		formRef.current = form;
+	}, []);
+
+	// Register AI context so the chat can fill in the edit form
+	useRegisterPageAIContext({
+		routeName: "blog-edit-post",
+		pageDescription: `User is editing a blog post (slug: "${slug}") in the admin editor.`,
+		suggestions: [
+			"Improve this post's title",
+			"Rewrite the intro paragraph",
+			"Suggest better tags",
+		],
+		clientTools: {
+			fillBlogForm: createFillBlogFormHandler(
+				formRef,
+				"Form updated successfully",
+			),
+		},
+	});
+
 	const handleClose = () => {
 		navigate(`${basePath}/blog`);
 	};
@@ -61,6 +88,7 @@ export function EditPostPage({ slug }: { slug: string }) {
 				onClose={handleClose}
 				onSuccess={handleSuccess}
 				onDelete={handleDelete}
+				onFormReady={handleFormReady}
 			/>
 		</PageWrapper>
 	);