@btst/stack 3.0.0-rc.2 → 3.0.0-rc.4

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

@@ -2,6 +2,7 @@
 import { useCallback, useRef } from "react";
 import { usePluginOverrides, useTranslate } from "@btst/stack/context";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 import { MarkdownEditor, type MarkdownEditorProps } from "./markdown-editor";
 
 type MarkdownEditorWithOverridesProps = Omit<
@@ -20,7 +21,7 @@ export function MarkdownEditorWithOverrides(
 		uploadImage,
 		imagePicker: ImagePickerTrigger,
 		localization,
-	} = usePluginOverrides<BlogPluginOverrides>("blog");
+	} = usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 
 	const insertImageRef = useRef<((url: string) => void) | null>(null);
 	// Holds the Crepe-image-block `setUrl` callback while the picker is open.

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

@@ -65,13 +65,15 @@ const MarkdownEditor = lazy(() =>
 	})),
 );
 import {
-	CanAccess,
+	PermissionAccess,
 	useNotify,
 	usePluginOverrides,
 	useTranslate,
 	type TranslateFn,
 } from "@btst/stack/context";
+import { blogPermissions } from "../../../permissions";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 import { EmptyList } from "../shared/empty-list";
 import { TagsMultiSelect } from "./tags-multiselect";
 
@@ -126,6 +128,7 @@ function PostFormBody<T extends CommonPostFormValues>({
 	errorMessage,
 	setFeaturedImageUploading,
 	initialSlugTouched = false,
+	publishedPermission,
 }: {
 	form: UseFormReturn<T>;
 	onSubmit: SubmitHandler<T>;
@@ -135,9 +138,13 @@ function PostFormBody<T extends CommonPostFormValues>({
 	errorMessage?: string;
 	setFeaturedImageUploading: (uploading: boolean) => void;
 	initialSlugTouched?: boolean;
+	publishedPermission?:
+		| ReturnType<typeof blogPermissions.post.create>
+		| ReturnType<typeof blogPermissions.post.update>;
 }) {
 	const t = useTranslate();
-	const { localization } = usePluginOverrides<BlogPluginOverrides>("blog");
+	const { localization } =
+		usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 	const [slugTouched, setSlugTouched] = useState(initialSlugTouched);
 	const requiredAsterisk =
 		localization?.BLOG_FORMS_REQUIRED_ASTERISK ??
@@ -149,6 +156,32 @@ function PostFormBody<T extends CommonPostFormValues>({
 	const nameTags = "tags" as FieldPath<T>;
 	const nameContent = "content" as FieldPath<T>;
 	const namePublished = "published" as FieldPath<T>;
+	const publishedField = (
+		<FormField
+			control={form.control}
+			name={namePublished}
+			render={({ field }) => (
+				<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+					<div className="space-y-0.5">
+						<FormLabel>
+							{localization?.BLOG_FORMS_PUBLISHED_LABEL ??
+								t("blog.forms.publishedLabel", "Published")}
+						</FormLabel>
+						<FormDescription>
+							{localization?.BLOG_FORMS_PUBLISHED_DESCRIPTION ??
+								t(
+									"blog.forms.publishedDescription",
+									"Toggle to publish immediately",
+								)}
+						</FormDescription>
+					</div>
+					<FormControl>
+						<Switch checked={!!field.value} onCheckedChange={field.onChange} />
+					</FormControl>
+				</FormItem>
+			)}
+		/>
+	);
 	return (
 		<Form {...form}>
 			<form className="w-full space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
@@ -332,33 +365,13 @@ function PostFormBody<T extends CommonPostFormValues>({
 					)}
 				/>
 
-				<FormField
-					control={form.control}
-					name={namePublished}
-					render={({ field }) => (
-						<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-							<div className="space-y-0.5">
-								<FormLabel>
-									{localization?.BLOG_FORMS_PUBLISHED_LABEL ??
-										t("blog.forms.publishedLabel", "Published")}
-								</FormLabel>
-								<FormDescription>
-									{localization?.BLOG_FORMS_PUBLISHED_DESCRIPTION ??
-										t(
-											"blog.forms.publishedDescription",
-											"Toggle to publish immediately",
-										)}
-								</FormDescription>
-							</div>
-							<FormControl>
-								<Switch
-									checked={!!field.value}
-									onCheckedChange={field.onChange}
-								/>
-							</FormControl>
-						</FormItem>
-					)}
-				/>
+				{publishedPermission ? (
+					<PermissionAccess permission={publishedPermission}>
+						{publishedField}
+					</PermissionAccess>
+				) : (
+					publishedField
+				)}
 
 				<div className="flex gap-2 pt-4">
 					<Button type="submit" disabled={disabled}>
@@ -445,7 +458,8 @@ const AddPostFormComponent = ({
 }: AddPostFormProps) => {
 	const [featuredImageUploading, setFeaturedImageUploading] = useState(false);
 	const t = useTranslate();
-	const { localization } = usePluginOverrides<BlogPluginOverrides>("blog");
+	const { localization } =
+		usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 
 	const schema = useMemo(() => {
 		const required = localizedRequiredFields(t);
@@ -523,6 +537,9 @@ const AddPostFormComponent = ({
 			disabled={resourceForm.isSubmitting || featuredImageUploading}
 			errorMessage={hasFieldErrors ? undefined : resourceForm.error?.message}
 			setFeaturedImageUploading={setFeaturedImageUploading}
+			publishedPermission={blogPermissions.post.create({
+				publish: "published",
+			})}
 		/>
 	);
 };
@@ -562,7 +579,8 @@ const EditPostFormComponent = ({
 	const [featuredImageUploading, setFeaturedImageUploading] = useState(false);
 	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 	const t = useTranslate();
-	const { localization } = usePluginOverrides<BlogPluginOverrides>("blog");
+	const { localization } =
+		usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 
 	const { post } = useSuspensePost(postSlug);
 	const notify = useNotify();
@@ -715,8 +733,18 @@ const EditPostFormComponent = ({
 				errorMessage={hasFieldErrors ? undefined : resourceForm.error?.message}
 				setFeaturedImageUploading={setFeaturedImageUploading}
 				initialSlugTouched={!!post?.slug}
+				publishedPermission={blogPermissions.post.update({
+					id: post.id,
+					...(post.authorId ? { authorId: post.authorId } : {}),
+					publish: post.published ? "unpublish" : "publish",
+				})}
 			/>
-			<CanAccess resource="blog:post" action="delete" params={{ id: post.id }}>
+			<PermissionAccess
+				permission={blogPermissions.post.delete({
+					id: post.id,
+					...(post.authorId ? { authorId: post.authorId } : {}),
+				})}
+			>
 				<div className="w-full">
 					<AlertDialog
 						open={deleteDialogOpen}
@@ -773,7 +801,7 @@ const EditPostFormComponent = ({
 						</AlertDialogContent>
 					</AlertDialog>
 				</div>
-			</CanAccess>
+			</PermissionAccess>
 		</>
 	);
 };

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

@@ -3,11 +3,13 @@
 import { usePluginOverrides, useTranslate } from "@btst/stack/context";
 import { ErrorPlaceholder } from "../shared/error-placeholder";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 import { PageWrapper } from "../shared/page-wrapper";
 
 export function NotFoundPage({ message }: { message: string }) {
 	const t = useTranslate();
-	const { localization } = usePluginOverrides<BlogPluginOverrides>("blog");
+	const { localization } =
+		usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 	const title =
 		localization?.BLOG_PAGE_NOT_FOUND_TITLE ??
 		t("blog.common.pageNotFoundTitle", "Not Found");

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

@@ -10,6 +10,7 @@ import { EditPostForm } from "../forms/post-forms";
 import { PageHeader } from "../shared/page-header";
 import { PageWrapper } from "../shared/page-wrapper";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 import { useRouteLifecycle } from "@workspace/ui/hooks/use-route-lifecycle";
 import { useRegisterPageAIContext } from "@btst/stack/plugins/ai-chat/client/context";
 import { useRef, useCallback } from "react";
@@ -19,7 +20,7 @@ import { createFillBlogFormHandler } from "./fill-blog-form-handler";
 // Internal component with actual page content
 export function EditPostPage({ slug }: { slug: string }) {
 	const t = useTranslate();
-	const overrides = usePluginOverrides<BlogPluginOverrides>("blog");
+	const overrides = usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 	const { localization } = overrides;
 	const { router } = useStack();
 	const navigate = router?.navigate;

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

@@ -3,29 +3,52 @@
 import { lazy } from "react";
 import { usePluginOverrides } from "@btst/stack/context";
 import type { BlogPluginOverrides } from "../../overrides";
-import { ComposedRoute } from "@btst/stack/client/components";
+import { BLOG_PLUGIN_ID } from "../../constants";
+import {
+	ComposedRoute,
+	PermissionRouteAccess,
+} from "@btst/stack/client/components";
 import { DefaultError } from "../shared/default-error";
 import { FormLoading } from "../loading";
 import { NotFoundPage } from "./404-page";
+import { useSuspensePost } from "../../hooks/blog-hooks";
+import { blogPermissions } from "../../../permissions";
 
 // Lazy load the internal component with actual page content
-const EditPostPage = lazy(() =>
+const EditPostPageContent = lazy(() =>
 	import("./edit-post-page.internal").then((m) => ({
 		default: m.EditPostPage,
 	})),
 );
 
+function AuthorizedEditPostPage({ slug }: { slug: string }) {
+	const { post } = useSuspensePost(slug);
+	if (!post) return <EditPostPageContent slug={slug} />;
+	return (
+		<PermissionRouteAccess
+			permission={blogPermissions.post.update({
+				id: post.id,
+				...(post.authorId ? { authorId: post.authorId } : {}),
+				publish: "unchanged",
+			})}
+			LoadingComponent={FormLoading}
+		>
+			<EditPostPageContent slug={slug} />
+		</PermissionRouteAccess>
+	);
+}
+
 // Exported wrapped component with error and loading boundaries
 export function EditPostPageComponent({ slug }: { slug: string }) {
-	const { onRouteError } = usePluginOverrides<BlogPluginOverrides>("blog");
+	const { onRouteError } =
+		usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 	return (
 		<ComposedRoute
 			path={`/blog/${slug}/edit`}
-			PageComponent={EditPostPage}
+			PageComponent={AuthorizedEditPostPage}
 			ErrorComponent={DefaultError}
 			LoadingComponent={FormLoading}
 			NotFoundComponent={NotFoundPage}
-			permission={{ resource: "blog:post", action: "update" }}
 			props={{ slug }}
 			onError={(error) => {
 				if (onRouteError) {

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

@@ -8,12 +8,13 @@ import { TagsList } from "../shared/tags-list";
 import { useSuspensePosts } from "../../hooks/blog-hooks";
 import { usePluginOverrides, useTranslate } from "@btst/stack/context";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 import { useRouteLifecycle } from "@workspace/ui/hooks/use-route-lifecycle";
 
 // Internal component with actual page content
 export function HomePage({ published }: { published: boolean }) {
 	const t = useTranslate();
-	const overrides = usePluginOverrides<BlogPluginOverrides>("blog");
+	const overrides = usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 	const { localization } = overrides;
 
 	// Call lifecycle hooks

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

@@ -3,10 +3,12 @@
 import { lazy } from "react";
 import { usePluginOverrides } from "@btst/stack/context";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 import { ComposedRoute } from "@btst/stack/client/components";
 import { DefaultError } from "../shared/default-error";
 import { PostsLoading } from "../loading";
 import { NotFoundPage } from "./404-page";
+import { blogPermissions } from "../../../permissions";
 
 // Lazy load the internal component with actual page content
 const HomePage = lazy(() =>
@@ -19,7 +21,8 @@ export function HomePageComponent({
 }: {
 	published?: boolean;
 }) {
-	const { onRouteError } = usePluginOverrides<BlogPluginOverrides>("blog");
+	const { onRouteError } =
+		usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 	return (
 		<ComposedRoute
 			path={published ? "/blog" : "/blog/drafts"}
@@ -27,9 +30,9 @@ export function HomePageComponent({
 			ErrorComponent={DefaultError}
 			LoadingComponent={PostsLoading}
 			NotFoundComponent={NotFoundPage}
-			permission={
-				published ? undefined : { resource: "blog:draft", action: "read" }
-			}
+			permission={blogPermissions.post.read({
+				scope: published ? "published" : "drafts",
+			})}
 			props={{ published }}
 			onError={(error) => {
 				if (onRouteError) {

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

@@ -10,6 +10,7 @@ import { AddPostForm } from "../forms/post-forms";
 import { PageHeader } from "../shared/page-header";
 import { PageWrapper } from "../shared/page-wrapper";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 import { useRouteLifecycle } from "@workspace/ui/hooks/use-route-lifecycle";
 import { useRegisterPageAIContext } from "@btst/stack/plugins/ai-chat/client/context";
 import { useRef, useCallback } from "react";
@@ -19,7 +20,7 @@ import { createFillBlogFormHandler } from "./fill-blog-form-handler";
 // Internal component with actual page content
 export function NewPostPage() {
 	const t = useTranslate();
-	const overrides = usePluginOverrides<BlogPluginOverrides>("blog");
+	const overrides = usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 	const { localization } = overrides;
 	const { router } = useStack();
 	const navigate = router?.navigate;

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

@@ -3,10 +3,12 @@
 import { lazy } from "react";
 import { usePluginOverrides } from "@btst/stack/context";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 import { ComposedRoute } from "@btst/stack/client/components";
 import { DefaultError } from "../shared/default-error";
 import { FormLoading } from "../loading";
 import { NotFoundPage } from "./404-page";
+import { blogPermissions } from "../../../permissions";
 
 // Lazy load the internal component with actual page content
 const NewPostPage = lazy(() =>
@@ -15,7 +17,8 @@ const NewPostPage = lazy(() =>
 
 // Exported wrapped component with error and loading boundaries
 export function NewPostPageComponent() {
-	const { onRouteError } = usePluginOverrides<BlogPluginOverrides>("blog");
+	const { onRouteError } =
+		usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 	return (
 		<ComposedRoute
 			path="/blog/new"
@@ -23,7 +26,7 @@ export function NewPostPageComponent() {
 			ErrorComponent={DefaultError}
 			LoadingComponent={FormLoading}
 			NotFoundComponent={NotFoundPage}
-			permission={{ resource: "blog:post", action: "create" }}
+			permission={blogPermissions.post.create({ publish: "draft" })}
 			onError={(error) => {
 				if (onRouteError) {
 					onRouteError("newPost", error, {

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

@@ -16,6 +16,7 @@ import { MarkdownContent } from "../shared/markdown-content";
 import { PageHeader } from "../shared/page-header";
 import { PageWrapper } from "../shared/page-wrapper";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 import { DefaultImage } from "../shared/defaults";
 import { PostNavigation } from "../shared/post-navigation";
 import { RecentPostsCarousel } from "../shared/recent-posts-carousel";
@@ -31,7 +32,7 @@ import { CollapsibleTagList } from "../shared/collapsible-tag-list";
 // Internal component with actual page content
 export function PostPage({ slug }: { slug: string }) {
 	const t = useTranslate();
-	const overrides = usePluginOverrides<BlogPluginOverrides>("blog");
+	const overrides = usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 	const { localization } = overrides;
 	const { router } = useStack();
 	const Image = router?.Image ?? DefaultImage;

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

@@ -3,23 +3,57 @@
 import { lazy } from "react";
 import { usePluginOverrides } from "@btst/stack/context";
 import type { BlogPluginOverrides } from "../../overrides";
-import { ComposedRoute } from "@btst/stack/client/components";
+import { BLOG_PLUGIN_ID } from "../../constants";
+import {
+	ComposedRoute,
+	PermissionRouteAccess,
+} from "@btst/stack/client/components";
 import { DefaultError } from "../shared/default-error";
 import { PostLoading } from "../loading";
 import { NotFoundPage } from "./404-page";
+import { useSuspensePost } from "../../hooks/blog-hooks";
+import { blogPermissions } from "../../../permissions";
 
 // Lazy load the internal component with actual page content
-const PostPage = lazy(() =>
+const PostPageContent = lazy(() =>
 	import("./post-page.internal").then((m) => ({ default: m.PostPage })),
 );
 
+function AuthorizedPostPage({ slug }: { slug: string }) {
+	const { post } = useSuspensePost(slug);
+	const permission = post
+		? blogPermissions.post.read({
+				scope: "post",
+				slug: post.slug,
+				exists: true,
+				id: post.id,
+				...(post.authorId ? { authorId: post.authorId } : {}),
+				published: post.published,
+			})
+		: blogPermissions.post.read({
+				scope: "post",
+				slug,
+				exists: false,
+				published: false,
+			});
+	return (
+		<PermissionRouteAccess
+			permission={permission}
+			LoadingComponent={PostLoading}
+		>
+			<PostPageContent slug={slug} />
+		</PermissionRouteAccess>
+	);
+}
+
 // Exported wrapped component with error and loading boundaries
 export function PostPageComponent({ slug }: { slug: string }) {
-	const { onRouteError } = usePluginOverrides<BlogPluginOverrides>("blog");
+	const { onRouteError } =
+		usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 	return (
 		<ComposedRoute
 			path={`/blog/${slug}`}
-			PageComponent={PostPage}
+			PageComponent={AuthorizedPostPage}
 			ErrorComponent={DefaultError}
 			LoadingComponent={PostLoading}
 			NotFoundComponent={NotFoundPage}

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

@@ -8,13 +8,14 @@ import { EmptyList } from "../shared/empty-list";
 import { useSuspensePosts } from "../../hooks/blog-hooks";
 import { usePluginOverrides, useTranslate } from "@btst/stack/context";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 import { useTags } from "../../hooks/blog-hooks";
 import { useRouteLifecycle } from "@workspace/ui/hooks/use-route-lifecycle";
 
 // Internal component with actual page content
 export function TagPage({ tagSlug }: { tagSlug: string }) {
 	const t = useTranslate();
-	const overrides = usePluginOverrides<BlogPluginOverrides>("blog");
+	const overrides = usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 	const { localization } = overrides;
 
 	// Call lifecycle hooks

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

@@ -3,10 +3,12 @@
 import { lazy } from "react";
 import { usePluginOverrides } from "@btst/stack/context";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 import { ComposedRoute } from "@btst/stack/client/components";
 import { DefaultError } from "../shared/default-error";
 import { PostsLoading } from "../loading";
 import { NotFoundPage } from "./404-page";
+import { blogPermissions } from "../../../permissions";
 
 // Lazy load the internal component with actual page content
 const TagPage = lazy(() =>
@@ -15,7 +17,8 @@ const TagPage = lazy(() =>
 
 // Exported wrapped component with error and loading boundaries
 export function TagPageComponent({ tagSlug }: { tagSlug: string }) {
-	const { onRouteError } = usePluginOverrides<BlogPluginOverrides>("blog");
+	const { onRouteError } =
+		usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 	return (
 		<ComposedRoute
 			path={`/blog/tag/${tagSlug}`}
@@ -23,6 +26,7 @@ export function TagPageComponent({ tagSlug }: { tagSlug: string }) {
 			ErrorComponent={DefaultError}
 			LoadingComponent={PostsLoading}
 			NotFoundComponent={NotFoundPage}
+			permission={blogPermissions.tag.read()}
 			props={{ tagSlug }}
 			onError={(error) => {
 				if (onRouteError) {

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

@@ -7,6 +7,7 @@ import {
 	useTranslate,
 } from "@btst/stack/context";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 import { DefaultLink } from "./defaults";
 import { Badge } from "@workspace/ui/components/badge";
 import { ChevronDown, ChevronUp } from "lucide-react";
@@ -28,7 +29,7 @@ export function CollapsibleTagList({
 	const { localization } = usePluginOverrides<
 		BlogPluginOverrides,
 		Partial<BlogPluginOverrides>
-	>("blog", {});
+	>(BLOG_PLUGIN_ID, {});
 	const { router } = useStack();
 	const Link = router?.Link ?? DefaultLink;
 	const basePath = useBasePath();

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

@@ -4,11 +4,13 @@ import type { FallbackProps } from "react-error-boundary";
 import { ErrorPlaceholder } from "./error-placeholder";
 import { usePluginOverrides, useTranslate } from "@btst/stack/context";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 
 // Default error component for blog plugin routes
 export function DefaultError({ error }: FallbackProps) {
 	const t = useTranslate();
-	const { localization } = usePluginOverrides<BlogPluginOverrides>("blog");
+	const { localization } =
+		usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 	const title =
 		localization?.BLOG_GENERIC_ERROR_TITLE ??
 		t("blog.common.genericErrorTitle", "Something went wrong");

package/src/plugins/blog/client/components/shared/on-this-page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState, useMemo, useRef } from "react";
 import { cn, slugify } from "../../../utils";
 import { usePluginOverrides, useTranslate } from "@btst/stack/context";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 import {
 	Select,
 	SelectContent,
@@ -26,7 +27,8 @@ interface OnThisPageProps {
 
 export function OnThisPage({ markdown, className }: OnThisPageProps) {
 	const t = useTranslate();
-	const { localization } = usePluginOverrides<BlogPluginOverrides>("blog");
+	const { localization } =
+		usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 	const headings = useMemo(() => extractHeadings(markdown), [markdown]);
 	const activeId = useActiveHeading(headings);
 
@@ -107,7 +109,8 @@ export function OnThisPage({ markdown, className }: OnThisPageProps) {
 
 export function OnThisPageSelect({ markdown, className }: OnThisPageProps) {
 	const t = useTranslate();
-	const { localization } = usePluginOverrides<BlogPluginOverrides>("blog");
+	const { localization } =
+		usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 	const headings = useMemo(() => extractHeadings(markdown), [markdown]);
 	const initialValue = useMemo(() => headings[0]?.id ?? "", [headings]);
 	const activeId = useActiveHeading(headings);

package/src/plugins/blog/client/components/shared/page-wrapper.tsx

@@ -3,6 +3,7 @@
 import { usePluginOverrides } from "@btst/stack/context";
 import { PageWrapper as SharedPageWrapper } from "@workspace/ui/components/page-wrapper";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 
 export function PageWrapper({
 	children,
@@ -16,7 +17,7 @@ export function PageWrapper({
 	const { showAttribution } = usePluginOverrides<
 		BlogPluginOverrides,
 		Partial<BlogPluginOverrides>
-	>("blog", {
+	>(BLOG_PLUGIN_ID, {
 		showAttribution: true,
 	});
 

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

@@ -16,6 +16,7 @@ import { formatDate } from "date-fns";
 import type { SerializedPost } from "../../../types";
 import { CalendarIcon } from "lucide-react";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 import { DefaultLink, DefaultImage } from "./defaults";
 
 // Beautiful gradient color combinations
@@ -224,7 +225,7 @@ export function PostCard({ post }: { post: SerializedPost }) {
 	const { localization } = usePluginOverrides<
 		BlogPluginOverrides,
 		Partial<BlogPluginOverrides>
-	>("blog", {});
+	>(BLOG_PLUGIN_ID, {});
 	const { router } = useStack();
 	const Link = router?.Link ?? DefaultLink;
 	const Image = router?.Image ?? DefaultImage;

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

@@ -4,6 +4,7 @@ import { Button } from "@workspace/ui/components/button";
 import { EmptyList } from "./empty-list";
 import { SearchInput } from "./search-input";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 import { PostCard as DefaultPostCard } from "./post-card";
 
 interface PostsListProps {
@@ -21,7 +22,7 @@ export function PostsList({
 }: PostsListProps) {
 	const t = useTranslate();
 	const { localization, PostCard } =
-		usePluginOverrides<BlogPluginOverrides>("blog");
+		usePluginOverrides<BlogPluginOverrides>(BLOG_PLUGIN_ID);
 
 	const PostCardComponent = PostCard || DefaultPostCard;
 	if (posts.length === 0) {

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

@@ -7,6 +7,7 @@ import {
 	useTranslate,
 } from "@btst/stack/context";
 import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_PLUGIN_ID } from "../../constants";
 import type { SerializedPost } from "../../../types";
 import {
 	Carousel,
@@ -27,7 +28,7 @@ export function RecentPostsCarousel({ posts }: RecentPostsCarouselProps) {
 	const { PostCard, localization } = usePluginOverrides<
 		BlogPluginOverrides,
 		Partial<BlogPluginOverrides>
-	>("blog", {
+	>(BLOG_PLUGIN_ID, {
 		PostCard: DefaultPostCard,
 	});
 	const { router } = useStack();

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

@@ -6,7 +6,7 @@ import { stripHtml, stripMarkdown } from "../../../utils";
 import { HighlightText } from "./highlight-text";
 import { SearchModal, type SearchResult } from "./search-modal";
 import { useBasePath, useStack } from "@btst/stack/context";
-import { useListState, type ListStateSchema } from "@btst/stack/client";
+import { useListState, type ListStateSchema } from "@btst/stack/client/hooks";
 
 // Simplified blog post search result interface
 interface BlogPostSearchResult extends SearchResult {

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

@@ -0,0 +1,2 @@
+/** Canonical programmatic identifier for the Blog client plugin. */
+export const BLOG_PLUGIN_ID = "blog" as const;