@btst/stack 2.12.2 → 3.0.0-rc.1

package/dist/packages/stack/src/plugins/cms/client/hooks/cms-resource.mjs

@@ -0,0 +1,10 @@
+"use client";
+import { createResource } from '@btst/stack/plugins/client/hooks';
+import { cmsResources } from '../../../../../../../plugins/cms/query-keys.mjs';
+
+const cms = createResource({
+  plugin: "cms",
+  resources: cmsResources
+});
+
+export { cms };

package/dist/packages/stack/src/plugins/cms/client/plugin.cjs

@@ -41,10 +41,7 @@ function createDashboardLoader(config) {
       const typesQuery = queries.cmsTypes.list();
       try {
         if (hooks?.beforeLoadDashboard) {
-          await client.runClientHookWithShim(
-            () => hooks.beforeLoadDashboard(context),
-            "Load prevented by beforeLoadDashboard hook"
-          );
+          await hooks.beforeLoadDashboard(context);
         }
         await queryClient.prefetchQuery(typesQuery);
         if (hooks?.afterLoadDashboard) {
@@ -96,33 +93,14 @@ function createContentListLoader(typeSlug, config) {
       const queries = plugins_cms_queryKeys.createCMSQueryKeys(client$1, headers);
       const limit = 20;
       const typesQuery = queries.cmsTypes.list();
-      const listQuery = queries.cmsContent.list({
-        typeSlug,
-        limit,
-        offset: 0
-      });
+      const listQuery = queries.cmsContent.list({ typeSlug, limit });
       try {
         if (hooks?.beforeLoadContentList) {
-          await client.runClientHookWithShim(
-            () => hooks.beforeLoadContentList(typeSlug, context),
-            "Load prevented by beforeLoadContentList hook"
-          );
+          await hooks.beforeLoadContentList(typeSlug, context);
         }
         await queryClient.prefetchQuery(typesQuery);
         await queryClient.prefetchInfiniteQuery({
-          queryKey: listQuery.queryKey,
-          queryFn: async ({ pageParam = 0 }) => {
-            const response = await client$1("/content/:typeSlug", {
-              method: "GET",
-              params: { typeSlug },
-              query: { limit, offset: pageParam },
-              headers
-            });
-            if (typeof response === "object" && response !== null && "error" in response && response.error) {
-              throw new Error(String(response.error));
-            }
-            return response.data;
-          },
+          ...listQuery,
           initialPageParam: 0
         });
         if (hooks?.afterLoadContentList) {
@@ -179,10 +157,7 @@ function createContentEditorLoader(typeSlug, id, config) {
       const detailQuery = id ? queries.cmsContent.detail(typeSlug, id) : void 0;
       try {
         if (hooks?.beforeLoadContentEditor) {
-          await client.runClientHookWithShim(
-            () => hooks.beforeLoadContentEditor(typeSlug, id, context),
-            "Load prevented by beforeLoadContentEditor hook"
-          );
+          await hooks.beforeLoadContentEditor(typeSlug, id, context);
         }
         const promises = [queryClient.prefetchQuery(typesQuery)];
         if (id) {
@@ -282,46 +257,37 @@ function createContentEditorMeta(typeSlug, id, config) {
 }
 const cmsClientPlugin = (config) => client.defineClientPlugin({
   name: "cms",
-  routes: () => ({
-    dashboard: yar.createRoute("/cms", () => {
-      const CustomDashboard = config.pageComponents?.dashboard;
-      return {
-        PageComponent: CustomDashboard ?? (() => /* @__PURE__ */ jsxRuntime.jsx(DashboardPageComponent, {})),
+  routes: () => yar.defineRoutes(
+    {
+      dashboard: yar.defineRoute("/cms", {
+        page: DashboardPageComponent,
         loader: createDashboardLoader(config),
         meta: createDashboardMeta()
-      };
-    }),
-    contentList: yar.createRoute("/cms/:typeSlug", ({ params }) => {
-      const CustomContentList = config.pageComponents?.contentList;
-      return {
-        PageComponent: CustomContentList ? () => /* @__PURE__ */ jsxRuntime.jsx(CustomContentList, { typeSlug: params.typeSlug }) : () => /* @__PURE__ */ jsxRuntime.jsx(ContentListPageComponent, { typeSlug: params.typeSlug }),
-        loader: createContentListLoader(params.typeSlug, config),
-        meta: createContentListMeta(params.typeSlug, config)
-      };
-    }),
-    newContent: yar.createRoute("/cms/:typeSlug/new", ({ params }) => {
-      const CustomNewContent = config.pageComponents?.newContent;
-      return {
-        PageComponent: CustomNewContent ? () => /* @__PURE__ */ jsxRuntime.jsx(CustomNewContent, { typeSlug: params.typeSlug }) : () => /* @__PURE__ */ jsxRuntime.jsx(ContentEditorPageComponent, { typeSlug: params.typeSlug }),
-        loader: createContentEditorLoader(params.typeSlug, void 0, config),
-        meta: createContentEditorMeta(params.typeSlug, void 0, config)
-      };
-    }),
-    editContent: yar.createRoute("/cms/:typeSlug/:id", ({ params }) => {
-      const CustomEditContent = config.pageComponents?.editContent;
-      return {
-        PageComponent: CustomEditContent ? () => /* @__PURE__ */ jsxRuntime.jsx(CustomEditContent, { typeSlug: params.typeSlug, id: params.id }) : () => /* @__PURE__ */ jsxRuntime.jsx(
+      }),
+      contentList: yar.defineRoute("/cms/:typeSlug", {
+        page: ({ params }) => /* @__PURE__ */ jsxRuntime.jsx(ContentListPageComponent, { typeSlug: params.typeSlug }),
+        loader: ({ params }) => createContentListLoader(params.typeSlug, config)(),
+        meta: ({ params }) => createContentListMeta(params.typeSlug, config)()
+      }),
+      newContent: yar.defineRoute("/cms/:typeSlug/new", {
+        page: ({ params }) => /* @__PURE__ */ jsxRuntime.jsx(ContentEditorPageComponent, { typeSlug: params.typeSlug }),
+        loader: ({ params }) => createContentEditorLoader(params.typeSlug, void 0, config)(),
+        meta: ({ params }) => createContentEditorMeta(params.typeSlug, void 0, config)()
+      }),
+      editContent: yar.defineRoute("/cms/:typeSlug/:id", {
+        page: ({ params }) => /* @__PURE__ */ jsxRuntime.jsx(
           ContentEditorPageComponent,
           {
             typeSlug: params.typeSlug,
             id: params.id
           }
         ),
-        loader: createContentEditorLoader(params.typeSlug, params.id, config),
-        meta: createContentEditorMeta(params.typeSlug, params.id, config)
-      };
-    })
-  }),
+        loader: ({ params }) => createContentEditorLoader(params.typeSlug, params.id, config)(),
+        meta: ({ params }) => createContentEditorMeta(params.typeSlug, params.id, config)()
+      })
+    },
+    { pages: config.pageComponents }
+  ),
   sitemap: async () => {
     return [];
   }

package/dist/packages/stack/src/plugins/cms/client/plugin.mjs

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { lazy } from 'react';
-import { defineClientPlugin, createApiClient, runClientHookWithShim, isConnectionError } from '@btst/stack/plugins/client';
-import { createRoute } from '@btst/yar';
+import { defineClientPlugin, createApiClient, isConnectionError } from '@btst/stack/plugins/client';
+import { defineRoutes, defineRoute } from '@btst/yar';
 import { createSanitizedSSRLoaderError } from '../../utils.mjs';
 import { createCMSQueryKeys } from '../../../../../../plugins/cms/query-keys.mjs';
 
@@ -39,10 +39,7 @@ function createDashboardLoader(config) {
       const typesQuery = queries.cmsTypes.list();
       try {
         if (hooks?.beforeLoadDashboard) {
-          await runClientHookWithShim(
-            () => hooks.beforeLoadDashboard(context),
-            "Load prevented by beforeLoadDashboard hook"
-          );
+          await hooks.beforeLoadDashboard(context);
         }
         await queryClient.prefetchQuery(typesQuery);
         if (hooks?.afterLoadDashboard) {
@@ -94,33 +91,14 @@ function createContentListLoader(typeSlug, config) {
       const queries = createCMSQueryKeys(client, headers);
       const limit = 20;
       const typesQuery = queries.cmsTypes.list();
-      const listQuery = queries.cmsContent.list({
-        typeSlug,
-        limit,
-        offset: 0
-      });
+      const listQuery = queries.cmsContent.list({ typeSlug, limit });
       try {
         if (hooks?.beforeLoadContentList) {
-          await runClientHookWithShim(
-            () => hooks.beforeLoadContentList(typeSlug, context),
-            "Load prevented by beforeLoadContentList hook"
-          );
+          await hooks.beforeLoadContentList(typeSlug, context);
         }
         await queryClient.prefetchQuery(typesQuery);
         await queryClient.prefetchInfiniteQuery({
-          queryKey: listQuery.queryKey,
-          queryFn: async ({ pageParam = 0 }) => {
-            const response = await client("/content/:typeSlug", {
-              method: "GET",
-              params: { typeSlug },
-              query: { limit, offset: pageParam },
-              headers
-            });
-            if (typeof response === "object" && response !== null && "error" in response && response.error) {
-              throw new Error(String(response.error));
-            }
-            return response.data;
-          },
+          ...listQuery,
           initialPageParam: 0
         });
         if (hooks?.afterLoadContentList) {
@@ -177,10 +155,7 @@ function createContentEditorLoader(typeSlug, id, config) {
       const detailQuery = id ? queries.cmsContent.detail(typeSlug, id) : void 0;
       try {
         if (hooks?.beforeLoadContentEditor) {
-          await runClientHookWithShim(
-            () => hooks.beforeLoadContentEditor(typeSlug, id, context),
-            "Load prevented by beforeLoadContentEditor hook"
-          );
+          await hooks.beforeLoadContentEditor(typeSlug, id, context);
         }
         const promises = [queryClient.prefetchQuery(typesQuery)];
         if (id) {
@@ -280,46 +255,37 @@ function createContentEditorMeta(typeSlug, id, config) {
 }
 const cmsClientPlugin = (config) => defineClientPlugin({
   name: "cms",
-  routes: () => ({
-    dashboard: createRoute("/cms", () => {
-      const CustomDashboard = config.pageComponents?.dashboard;
-      return {
-        PageComponent: CustomDashboard ?? (() => /* @__PURE__ */ jsx(DashboardPageComponent, {})),
+  routes: () => defineRoutes(
+    {
+      dashboard: defineRoute("/cms", {
+        page: DashboardPageComponent,
         loader: createDashboardLoader(config),
         meta: createDashboardMeta()
-      };
-    }),
-    contentList: createRoute("/cms/:typeSlug", ({ params }) => {
-      const CustomContentList = config.pageComponents?.contentList;
-      return {
-        PageComponent: CustomContentList ? () => /* @__PURE__ */ jsx(CustomContentList, { typeSlug: params.typeSlug }) : () => /* @__PURE__ */ jsx(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 ? () => /* @__PURE__ */ jsx(CustomNewContent, { typeSlug: params.typeSlug }) : () => /* @__PURE__ */ jsx(ContentEditorPageComponent, { typeSlug: params.typeSlug }),
-        loader: createContentEditorLoader(params.typeSlug, void 0, config),
-        meta: createContentEditorMeta(params.typeSlug, void 0, config)
-      };
-    }),
-    editContent: createRoute("/cms/:typeSlug/:id", ({ params }) => {
-      const CustomEditContent = config.pageComponents?.editContent;
-      return {
-        PageComponent: CustomEditContent ? () => /* @__PURE__ */ jsx(CustomEditContent, { typeSlug: params.typeSlug, id: params.id }) : () => /* @__PURE__ */ jsx(
+      }),
+      contentList: defineRoute("/cms/:typeSlug", {
+        page: ({ params }) => /* @__PURE__ */ jsx(ContentListPageComponent, { typeSlug: params.typeSlug }),
+        loader: ({ params }) => createContentListLoader(params.typeSlug, config)(),
+        meta: ({ params }) => createContentListMeta(params.typeSlug, config)()
+      }),
+      newContent: defineRoute("/cms/:typeSlug/new", {
+        page: ({ params }) => /* @__PURE__ */ jsx(ContentEditorPageComponent, { typeSlug: params.typeSlug }),
+        loader: ({ params }) => createContentEditorLoader(params.typeSlug, void 0, config)(),
+        meta: ({ params }) => createContentEditorMeta(params.typeSlug, void 0, config)()
+      }),
+      editContent: defineRoute("/cms/:typeSlug/:id", {
+        page: ({ params }) => /* @__PURE__ */ jsx(
           ContentEditorPageComponent,
           {
             typeSlug: params.typeSlug,
             id: params.id
           }
         ),
-        loader: createContentEditorLoader(params.typeSlug, params.id, config),
-        meta: createContentEditorMeta(params.typeSlug, params.id, config)
-      };
-    })
-  }),
+        loader: ({ params }) => createContentEditorLoader(params.typeSlug, params.id, config)(),
+        meta: ({ params }) => createContentEditorMeta(params.typeSlug, params.id, config)()
+      })
+    },
+    { pages: config.pageComponents }
+  ),
   sitemap: async () => {
     return [];
   }

package/dist/packages/stack/src/plugins/cms/schemas.cjs

@@ -6,6 +6,7 @@ const DEFAULT_MAX_PAGE_SIZE = 1e3;
 function createListContentQuerySchema(maxPageSize = DEFAULT_MAX_PAGE_SIZE) {
   return z.z.object({
     slug: z.z.string().optional(),
+    search: z.z.string().max(200).optional(),
     limit: z.z.coerce.number().min(1).max(maxPageSize).optional().default(20),
     offset: z.z.coerce.number().min(0).optional().default(0)
   });

package/dist/packages/stack/src/plugins/cms/schemas.mjs

@@ -4,6 +4,7 @@ const DEFAULT_MAX_PAGE_SIZE = 1e3;
 function createListContentQuerySchema(maxPageSize = DEFAULT_MAX_PAGE_SIZE) {
   return z.object({
     slug: z.string().optional(),
+    search: z.string().max(200).optional(),
     limit: z.coerce.number().min(1).max(maxPageSize).optional().default(20),
     offset: z.coerce.number().min(0).optional().default(0)
   });

package/dist/packages/stack/src/plugins/comments/api/plugin.cjs

@@ -40,7 +40,7 @@ const commentsBackendPlugin = (options) => {
                 message: "Forbidden: authorId filter requires onBeforeListByAuthor hook"
               });
             }
-            await utils.runHookWithShim(
+            await utils.runHook(
               () => options.onBeforeListByAuthor(
                 ctx.query.authorId,
                 ctx.query,
@@ -56,13 +56,13 @@ const commentsBackendPlugin = (options) => {
                 message: "Forbidden: status filter requires authorization"
               });
             }
-            await utils.runHookWithShim(
+            await utils.runHook(
               () => options.onBeforeList(ctx.query, context),
               ctx.error,
               "Forbidden: Cannot list comments with this status filter"
             );
           } else if (options?.onBeforeList && !ctx.query.authorId) {
-            await utils.runHookWithShim(
+            await utils.runHook(
               () => options.onBeforeList(ctx.query, context),
               ctx.error,
               "Forbidden: Cannot list comments"
@@ -98,7 +98,7 @@ const commentsBackendPlugin = (options) => {
             body: ctx.body,
             headers: ctx.headers
           };
-          const { authorId } = await utils.runHookWithShim(
+          const { authorId } = await utils.runHook(
             () => onBeforePost(ctx.body, context),
             ctx.error,
             "Unauthorized: Cannot post comment"
@@ -146,7 +146,7 @@ const commentsBackendPlugin = (options) => {
               message: "Forbidden: editing comments requires the onBeforeEdit hook"
             });
           }
-          await utils.runHookWithShim(
+          await utils.runHook(
             () => options.onBeforeEdit(id, { body: ctx.body.body }, context),
             ctx.error,
             "Unauthorized: Cannot edit comment"
@@ -188,7 +188,7 @@ const commentsBackendPlugin = (options) => {
                 message: "Forbidden: status filter requires authorization"
               });
             }
-            await utils.runHookWithShim(
+            await utils.runHook(
               () => options.onBeforeList(
                 { ...ctx.query, status: ctx.query.status },
                 context
@@ -197,7 +197,7 @@ const commentsBackendPlugin = (options) => {
               "Forbidden: Cannot count comments with this status filter"
             );
           } else if (options?.onBeforeList) {
-            await utils.runHookWithShim(
+            await utils.runHook(
               () => options.onBeforeList(
                 { ...ctx.query, status: ctx.query.status },
                 context
@@ -228,7 +228,7 @@ const commentsBackendPlugin = (options) => {
               message: "Forbidden: toggling likes requires the onBeforeLike hook"
             });
           }
-          await utils.runHookWithShim(
+          await utils.runHook(
             () => options.onBeforeLike(id, ctx.body.authorId, context),
             ctx.error,
             "Unauthorized: Cannot like comment"
@@ -259,7 +259,7 @@ const commentsBackendPlugin = (options) => {
               message: "Forbidden: changing comment status requires the onBeforeStatusChange hook"
             });
           }
-          await utils.runHookWithShim(
+          await utils.runHook(
             () => options.onBeforeStatusChange(id, ctx.body.status, context),
             ctx.error,
             "Unauthorized: Cannot change comment status"
@@ -304,7 +304,7 @@ const commentsBackendPlugin = (options) => {
               message: "Forbidden: deleting comments requires the onBeforeDelete hook"
             });
           }
-          await utils.runHookWithShim(
+          await utils.runHook(
             () => options.onBeforeDelete(id, context),
             ctx.error,
             "Unauthorized: Cannot delete comment"

package/dist/packages/stack/src/plugins/comments/api/plugin.mjs

@@ -4,7 +4,7 @@ import { commentsSchema } from '../db.mjs';
 import { CommentListQuerySchema, createCommentSchema, updateCommentSchema, CommentCountQuerySchema, updateCommentStatusSchema } from '../schemas.mjs';
 import { getCommentCount, getCommentById, listComments } from './getters.mjs';
 import { createComment, updateComment, toggleCommentLike, updateCommentStatus, deleteComment } from './mutations.mjs';
-import { runHookWithShim } from '../../utils.mjs';
+import { runHook } from '../../utils.mjs';
 
 const commentsBackendPlugin = (options) => {
   const postingEnabled = options.allowPosting !== false;
@@ -38,7 +38,7 @@ const commentsBackendPlugin = (options) => {
                 message: "Forbidden: authorId filter requires onBeforeListByAuthor hook"
               });
             }
-            await runHookWithShim(
+            await runHook(
               () => options.onBeforeListByAuthor(
                 ctx.query.authorId,
                 ctx.query,
@@ -54,13 +54,13 @@ const commentsBackendPlugin = (options) => {
                 message: "Forbidden: status filter requires authorization"
               });
             }
-            await runHookWithShim(
+            await runHook(
               () => options.onBeforeList(ctx.query, context),
               ctx.error,
               "Forbidden: Cannot list comments with this status filter"
             );
           } else if (options?.onBeforeList && !ctx.query.authorId) {
-            await runHookWithShim(
+            await runHook(
               () => options.onBeforeList(ctx.query, context),
               ctx.error,
               "Forbidden: Cannot list comments"
@@ -96,7 +96,7 @@ const commentsBackendPlugin = (options) => {
             body: ctx.body,
             headers: ctx.headers
           };
-          const { authorId } = await runHookWithShim(
+          const { authorId } = await runHook(
             () => onBeforePost(ctx.body, context),
             ctx.error,
             "Unauthorized: Cannot post comment"
@@ -144,7 +144,7 @@ const commentsBackendPlugin = (options) => {
               message: "Forbidden: editing comments requires the onBeforeEdit hook"
             });
           }
-          await runHookWithShim(
+          await runHook(
             () => options.onBeforeEdit(id, { body: ctx.body.body }, context),
             ctx.error,
             "Unauthorized: Cannot edit comment"
@@ -186,7 +186,7 @@ const commentsBackendPlugin = (options) => {
                 message: "Forbidden: status filter requires authorization"
               });
             }
-            await runHookWithShim(
+            await runHook(
               () => options.onBeforeList(
                 { ...ctx.query, status: ctx.query.status },
                 context
@@ -195,7 +195,7 @@ const commentsBackendPlugin = (options) => {
               "Forbidden: Cannot count comments with this status filter"
             );
           } else if (options?.onBeforeList) {
-            await runHookWithShim(
+            await runHook(
               () => options.onBeforeList(
                 { ...ctx.query, status: ctx.query.status },
                 context
@@ -226,7 +226,7 @@ const commentsBackendPlugin = (options) => {
               message: "Forbidden: toggling likes requires the onBeforeLike hook"
             });
           }
-          await runHookWithShim(
+          await runHook(
             () => options.onBeforeLike(id, ctx.body.authorId, context),
             ctx.error,
             "Unauthorized: Cannot like comment"
@@ -257,7 +257,7 @@ const commentsBackendPlugin = (options) => {
               message: "Forbidden: changing comment status requires the onBeforeStatusChange hook"
             });
           }
-          await runHookWithShim(
+          await runHook(
             () => options.onBeforeStatusChange(id, ctx.body.status, context),
             ctx.error,
             "Unauthorized: Cannot change comment status"
@@ -302,7 +302,7 @@ const commentsBackendPlugin = (options) => {
               message: "Forbidden: deleting comments requires the onBeforeDelete hook"
             });
           }
-          await runHookWithShim(
+          await runHook(
             () => options.onBeforeDelete(id, context),
             ctx.error,
             "Unauthorized: Cannot delete comment"

package/dist/packages/stack/src/plugins/comments/client/components/comment-count.cjs

@@ -3,19 +3,18 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const LucideIcons = require('lucide-react');
+const context = require('@btst/stack/context');
 const useComments = require('../hooks/use-comments.cjs');
 
 function CommentCount({
   resourceId,
   resourceType,
   status = "approved",
-  apiBaseURL,
-  apiBasePath,
-  headers,
   className
 }) {
+  const { api } = context.useStack();
   const { count, isLoading } = useComments.useCommentCount(
-    { apiBaseURL, apiBasePath, headers },
+    { apiBaseURL: api?.baseURL ?? "", apiBasePath: api?.basePath ?? "" },
     { resourceId, resourceType, status }
   );
   if (isLoading) {

package/dist/packages/stack/src/plugins/comments/client/components/comment-count.mjs

@@ -1,19 +1,18 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { MessageSquare } from 'lucide-react';
+import { useStack } from '@btst/stack/context';
 import { useCommentCount } from '../hooks/use-comments.mjs';
 
 function CommentCount({
   resourceId,
   resourceType,
   status = "approved",
-  apiBaseURL,
-  apiBasePath,
-  headers,
   className
 }) {
+  const { api } = useStack();
   const { count, isLoading } = useCommentCount(
-    { apiBaseURL, apiBasePath, headers },
+    { apiBaseURL: api?.baseURL ?? "", apiBasePath: api?.basePath ?? "" },
     { resourceId, resourceType, status }
   );
   if (isLoading) {

package/dist/packages/stack/src/plugins/comments/client/components/comment-form.cjs

@@ -5,7 +5,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const button = require('../../../../../../ui/src/components/button.cjs');
 const textarea = require('../../../../../../ui/src/components/textarea.cjs');
-const index = require('../localization/index.cjs');
+const context = require('@btst/stack/context');
 
 function CommentForm({
   authorId: _authorId,
@@ -14,13 +14,13 @@ function CommentForm({
   onSubmit,
   onCancel,
   InputComponent,
-  localization: localizationProp
+  localization
 }) {
-  const loc = { ...index.COMMENTS_LOCALIZATION, ...localizationProp };
+  const t = context.useTranslate();
   const [body, setBody] = React.useState(initialBody);
   const [isPending, setIsPending] = React.useState(false);
   const [error, setError] = React.useState(null);
-  const resolvedSubmitLabel = submitLabel ?? loc.COMMENTS_FORM_POST_COMMENT;
+  const resolvedSubmitLabel = submitLabel ?? localization?.COMMENTS_FORM_POST_COMMENT ?? t("comments.form.postComment", "Post comment");
   const handleSubmit = async (e) => {
     e.preventDefault();
     if (!body.trim()) return;
@@ -30,8 +30,10 @@ function CommentForm({
       await onSubmit(body.trim());
       setBody("");
     } catch (err) {
+      const bodyError = err?.errors?.body;
+      const bodyMessage = Array.isArray(bodyError) ? bodyError[0] : bodyError;
       setError(
-        err instanceof Error ? err.message : loc.COMMENTS_FORM_SUBMIT_ERROR
+        bodyMessage ?? (err instanceof Error && err.message ? err.message : localization?.COMMENTS_FORM_SUBMIT_ERROR ?? t("comments.form.submitError", "Failed to submit comment"))
       );
     } finally {
       setIsPending(false);
@@ -50,20 +52,27 @@ function CommentForm({
             value: body,
             onChange: setBody,
             disabled: isPending,
-            placeholder: loc.COMMENTS_FORM_PLACEHOLDER
+            placeholder: localization?.COMMENTS_FORM_PLACEHOLDER ?? t("comments.form.placeholder", "Write a comment\u2026")
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(
           textarea.Textarea,
           {
             value: body,
             onChange: (e) => setBody(e.target.value),
-            placeholder: loc.COMMENTS_FORM_PLACEHOLDER,
+            placeholder: localization?.COMMENTS_FORM_PLACEHOLDER ?? t("comments.form.placeholder", "Write a comment\u2026"),
             disabled: isPending,
             rows: 3,
             className: "resize-none"
           }
         ),
-        error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: error }),
+        error && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: "text-sm text-destructive",
+            "data-testid": "comment-form-error",
+            children: error
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 justify-end", children: [
           onCancel && /* @__PURE__ */ jsxRuntime.jsx(
             button.Button,
@@ -73,10 +82,10 @@ function CommentForm({
               size: "sm",
               onClick: onCancel,
               disabled: isPending,
-              children: loc.COMMENTS_FORM_CANCEL
+              children: localization?.COMMENTS_FORM_CANCEL ?? t("comments.form.cancel", "Cancel")
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "submit", size: "sm", disabled: isPending || !body.trim(), children: isPending ? loc.COMMENTS_FORM_POSTING : resolvedSubmitLabel })
+          /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "submit", size: "sm", disabled: isPending || !body.trim(), children: isPending ? localization?.COMMENTS_FORM_POSTING ?? t("comments.form.posting", "Posting\u2026") : resolvedSubmitLabel })
         ] })
       ]
     }