@btst/stack 2.12.2 → 3.0.0-rc.1

package/dist/packages/stack/src/plugins/ai-chat/client/plugin.mjs

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { defineClientPlugin, runClientHookWithShim, createApiClient } from '@btst/stack/plugins/client';
-import { createRoute } from '@btst/yar';
+import { defineClientPlugin, createApiClient, isConnectionError, createSanitizedSSRLoaderError } from '@btst/stack/plugins/client';
+import { defineRoutes, defineRoute } from '@btst/yar';
 import { createAiChatQueryKeys } from '../../../../../../plugins/ai-chat/query-keys.mjs';
-import { ChatLayout } from './components/chat-layout.mjs';
+import { ChatPageComponent } from './components/pages/chat-page.mjs';
 
 function createConversationsLoader(config) {
   return async () => {
@@ -18,28 +18,22 @@ function createConversationsLoader(config) {
         apiBasePath,
         headers
       };
+      const client = createApiClient({
+        baseURL: apiBaseURL,
+        basePath: apiBasePath
+      });
+      const queries = createAiChatQueryKeys(client, headers);
+      const listQuery = queries.conversations.list();
       try {
         if (hooks?.beforeLoadConversations) {
-          await runClientHookWithShim(
-            () => hooks.beforeLoadConversations(context),
-            "Load prevented by beforeLoadConversations hook"
-          );
+          await hooks.beforeLoadConversations(context);
         }
-        const client = createApiClient({
-          baseURL: apiBaseURL,
-          basePath: apiBasePath
-        });
-        const queries = createAiChatQueryKeys(client, headers);
-        const listQuery = queries.conversations.list();
         await queryClient.prefetchQuery(listQuery);
         if (hooks?.afterLoadConversations) {
           const conversations = queryClient.getQueryData(
             listQuery.queryKey
           ) || null;
-          await runClientHookWithShim(
-            () => hooks.afterLoadConversations(conversations, context),
-            "Load prevented by afterLoadConversations hook"
-          );
+          await hooks.afterLoadConversations(conversations, context);
         }
         const queryState = queryClient.getQueryState(listQuery.queryKey);
         if (queryState?.error && hooks?.onLoadError) {
@@ -47,6 +41,20 @@ function createConversationsLoader(config) {
           await hooks.onLoadError(error, context);
         }
       } catch (error) {
+        if (isConnectionError(error)) {
+          console.warn(
+            "[btst/ai-chat] route.loader() failed \u2014 no server running at build time. AI Chat conversation history does not support SSG."
+          );
+        } else {
+          const errToStore = createSanitizedSSRLoaderError();
+          await queryClient.prefetchQuery({
+            queryKey: listQuery.queryKey,
+            queryFn: () => {
+              throw errToStore;
+            },
+            retry: false
+          });
+        }
         if (hooks?.onLoadError) {
           await hooks.onLoadError(error, context);
         }
@@ -66,30 +74,24 @@ function createConversationLoader(id, config) {
         apiBasePath,
         headers
       };
+      const client = createApiClient({
+        baseURL: apiBaseURL,
+        basePath: apiBasePath
+      });
+      const queries = createAiChatQueryKeys(client, headers);
+      const conversationQuery = queries.conversations.detail(id);
+      const listQuery = queries.conversations.list();
       try {
         if (hooks?.beforeLoadConversation) {
-          await runClientHookWithShim(
-            () => hooks.beforeLoadConversation(id, context),
-            "Load prevented by beforeLoadConversation hook"
-          );
+          await hooks.beforeLoadConversation(id, context);
         }
-        const client = createApiClient({
-          baseURL: apiBaseURL,
-          basePath: apiBasePath
-        });
-        const queries = createAiChatQueryKeys(client, headers);
-        const conversationQuery = queries.conversations.detail(id);
-        const listQuery = queries.conversations.list();
         await Promise.all([
           queryClient.prefetchQuery(conversationQuery),
           queryClient.prefetchQuery(listQuery)
         ]);
         if (hooks?.afterLoadConversation) {
           const conversation = queryClient.getQueryData(conversationQuery.queryKey) || null;
-          await runClientHookWithShim(
-            () => hooks.afterLoadConversation(conversation, id, context),
-            "Load prevented by afterLoadConversation hook"
-          );
+          await hooks.afterLoadConversation(conversation, id, context);
         }
         const queryState = queryClient.getQueryState(
           conversationQuery.queryKey
@@ -99,6 +101,29 @@ function createConversationLoader(id, config) {
           await hooks.onLoadError(error, context);
         }
       } catch (error) {
+        if (isConnectionError(error)) {
+          console.warn(
+            "[btst/ai-chat] route.loader() failed \u2014 no server running at build time. AI Chat conversations do not support SSG."
+          );
+        } else {
+          const errToStore = createSanitizedSSRLoaderError();
+          await Promise.all([
+            queryClient.prefetchQuery({
+              queryKey: conversationQuery.queryKey,
+              queryFn: () => {
+                throw errToStore;
+              },
+              retry: false
+            }),
+            queryClient.prefetchQuery({
+              queryKey: listQuery.queryKey,
+              queryFn: () => {
+                throw errToStore;
+              },
+              retry: false
+            })
+          ]);
+        }
         if (hooks?.onLoadError) {
           await hooks.onLoadError(error, context);
         }
@@ -175,62 +200,39 @@ const aiChatClientPlugin = (config) => {
   if (isPublicMode) {
     return defineClientPlugin({
       name: "ai-chat",
-      routes: () => ({
-        // Chat home - simple chat interface without history
-        chat: createRoute("/chat", () => {
-          const CustomChat = config.pageComponents?.chat;
-          return {
-            PageComponent: CustomChat ?? (() => /* @__PURE__ */ jsx(
-              ChatLayout,
-              {
-                apiBaseURL: config.apiBaseURL,
-                apiBasePath: config.apiBasePath,
-                showSidebar: false
-              }
-            )),
+      routes: () => defineRoutes(
+        {
+          // Chat home - simple chat interface without history
+          chat: defineRoute("/chat", {
+            page: () => /* @__PURE__ */ jsx(ChatPageComponent, {}),
             loader: createConversationsLoader(config),
             meta: createChatHomeMeta(config)
-          };
-        })
-      }),
+          })
+        },
+        { pages: config.pageComponents }
+      ),
       sitemap: async () => []
     });
   }
   return defineClientPlugin({
     name: "ai-chat",
-    routes: () => ({
-      // Chat home - new conversation or list
-      chat: createRoute("/chat", () => {
-        const CustomChat = config.pageComponents?.chat;
-        return {
-          PageComponent: CustomChat ?? (() => /* @__PURE__ */ jsx(
-            ChatLayout,
-            {
-              apiBaseURL: config.apiBaseURL,
-              apiBasePath: config.apiBasePath
-            }
-          )),
+    routes: () => defineRoutes(
+      {
+        // Chat home - new conversation or list
+        chat: defineRoute("/chat", {
+          page: () => /* @__PURE__ */ jsx(ChatPageComponent, {}),
           loader: createConversationsLoader(config),
           meta: createChatHomeMeta(config)
-        };
-      }),
-      // Existing conversation
-      chatConversation: createRoute("/chat/:id", ({ params }) => {
-        const CustomConversation = config.pageComponents?.chatConversation;
-        return {
-          PageComponent: CustomConversation ? () => /* @__PURE__ */ jsx(CustomConversation, { conversationId: params.id }) : () => /* @__PURE__ */ jsx(
-            ChatLayout,
-            {
-              apiBaseURL: config.apiBaseURL,
-              apiBasePath: config.apiBasePath,
-              conversationId: params.id
-            }
-          ),
-          loader: createConversationLoader(params.id, config),
-          meta: createConversationMeta(params.id, config)
-        };
-      })
-    }),
+        }),
+        // Existing conversation
+        chatConversation: defineRoute("/chat/:id", {
+          page: ({ params }) => /* @__PURE__ */ jsx(ChatPageComponent, { conversationId: params.id }),
+          loader: ({ params }) => createConversationLoader(params.id, config)(),
+          meta: ({ params }) => createConversationMeta(params.id, config)()
+        })
+      },
+      { pages: config.pageComponents }
+    ),
     // Chat pages typically shouldn't be in sitemap, but we provide the option
     sitemap: async () => {
       return [];

package/dist/packages/stack/src/plugins/ai-chat/schemas.cjs

@@ -7,7 +7,7 @@ const createConversationSchema = z.z.object({
   title: z.z.string().optional()
 });
 const updateConversationSchema = z.z.object({
-  title: z.z.string().optional()
+  title: z.z.string().trim().min(1, "Title is required")
 });
 const chatRequestSchema = z.z.object({
   messages: z.z.array(

package/dist/packages/stack/src/plugins/ai-chat/schemas.mjs

@@ -5,7 +5,7 @@ const createConversationSchema = z.object({
   title: z.string().optional()
 });
 const updateConversationSchema = z.object({
-  title: z.string().optional()
+  title: z.string().trim().min(1, "Title is required")
 });
 const chatRequestSchema = z.object({
   messages: z.array(

package/dist/packages/stack/src/plugins/api/create-endpoint.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+const betterCall = require('better-call');
+
+function serializeIssues(issues) {
+  if (!Array.isArray(issues)) return [];
+  return issues.filter((issue) => typeof issue?.message === "string").map((issue) => ({
+    message: issue.message,
+    path: (issue.path ?? []).map((segment) => {
+      const key = typeof segment === "object" && segment !== null ? segment.key : segment;
+      return typeof key === "number" ? key : String(key);
+    })
+  }));
+}
+const createEndpoint = ((pathOrOptions, handlerOrOptions, handlerOrNever) => {
+  const isPathForm = typeof pathOrOptions === "string";
+  const options = isPathForm ? handlerOrOptions : pathOrOptions;
+  const wrappedOptions = options && typeof options === "object" && !options.onValidationError ? {
+    ...options,
+    onValidationError: ({
+      message,
+      issues
+    }) => {
+      throw new betterCall.APIError(400, {
+        message,
+        code: "VALIDATION_ERROR",
+        issues: serializeIssues(issues)
+      });
+    }
+  } : options;
+  return isPathForm ? betterCall.createEndpoint(pathOrOptions, wrappedOptions, handlerOrNever) : betterCall.createEndpoint(wrappedOptions, handlerOrOptions);
+});
+createEndpoint.create = betterCall.createEndpoint.create;
+
+exports.createEndpoint = createEndpoint;

package/dist/packages/stack/src/plugins/api/create-endpoint.mjs

@@ -0,0 +1,33 @@
+import { createEndpoint as createEndpoint$1, APIError } from 'better-call';
+
+function serializeIssues(issues) {
+  if (!Array.isArray(issues)) return [];
+  return issues.filter((issue) => typeof issue?.message === "string").map((issue) => ({
+    message: issue.message,
+    path: (issue.path ?? []).map((segment) => {
+      const key = typeof segment === "object" && segment !== null ? segment.key : segment;
+      return typeof key === "number" ? key : String(key);
+    })
+  }));
+}
+const createEndpoint = ((pathOrOptions, handlerOrOptions, handlerOrNever) => {
+  const isPathForm = typeof pathOrOptions === "string";
+  const options = isPathForm ? handlerOrOptions : pathOrOptions;
+  const wrappedOptions = options && typeof options === "object" && !options.onValidationError ? {
+    ...options,
+    onValidationError: ({
+      message,
+      issues
+    }) => {
+      throw new APIError(400, {
+        message,
+        code: "VALIDATION_ERROR",
+        issues: serializeIssues(issues)
+      });
+    }
+  } : options;
+  return isPathForm ? createEndpoint$1(pathOrOptions, wrappedOptions, handlerOrNever) : createEndpoint$1(wrappedOptions, handlerOrOptions);
+});
+createEndpoint.create = createEndpoint$1.create;
+
+export { createEndpoint };

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

@@ -64,7 +64,7 @@ const PostListQuerySchema = z.z.object({
   tagSlug: z.z.string().optional(),
   offset: z.z.coerce.number().int().min(0).optional(),
   limit: z.z.coerce.number().int().min(1).max(100).optional(),
-  query: z.z.string().optional(),
+  query: z.z.string().max(200).optional(),
   published: z.z.string().optional().transform((val) => {
     if (val === void 0) return void 0;
     if (val === "true") return true;
@@ -100,7 +100,7 @@ const blogBackendPlugin = (hooks) => api.defineBackendPlugin({
         const context = { query, headers };
         try {
           if (hooks?.onBeforeListPosts) {
-            await utils.runHookWithShim(
+            await utils.runHook(
               () => hooks.onBeforeListPosts(query, context),
               ctx.error,
               "Unauthorized: Cannot list posts"
@@ -132,7 +132,7 @@ const blogBackendPlugin = (hooks) => api.defineBackendPlugin({
         };
         try {
           if (hooks?.onBeforeCreatePost) {
-            await utils.runHookWithShim(
+            await utils.runHook(
               () => hooks.onBeforeCreatePost(ctx.body, context),
               ctx.error,
               "Unauthorized: Cannot create post"
@@ -184,7 +184,7 @@ const blogBackendPlugin = (hooks) => api.defineBackendPlugin({
         };
         try {
           if (hooks?.onBeforeUpdatePost) {
-            await utils.runHookWithShim(
+            await utils.runHook(
               () => hooks.onBeforeUpdatePost(ctx.params.id, ctx.body, context),
               ctx.error,
               "Unauthorized: Cannot update post"
@@ -235,7 +235,7 @@ const blogBackendPlugin = (hooks) => api.defineBackendPlugin({
         };
         try {
           if (hooks?.onBeforeDeletePost) {
-            await utils.runHookWithShim(
+            await utils.runHook(
               () => hooks.onBeforeDeletePost(ctx.params.id, context),
               ctx.error,
               "Unauthorized: Cannot delete post"
@@ -265,7 +265,7 @@ const blogBackendPlugin = (hooks) => api.defineBackendPlugin({
         const context = { query, headers };
         try {
           if (hooks?.onBeforeListPosts) {
-            await utils.runHookWithShim(
+            await utils.runHook(
               () => hooks.onBeforeListPosts({ published: true }, context),
               ctx.error,
               "Unauthorized: Cannot list posts"

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

@@ -7,7 +7,7 @@ import { getAllTags, getPostBySlug, getAllPosts } from './getters.mjs';
 import { deletePost, updatePost, createPost } from './mutations.mjs';
 import { BLOG_QUERY_KEYS } from './query-key-defs.mjs';
 import { serializePost, serializeTag } from './serializers.mjs';
-import { runHookWithShim } from '../../utils.mjs';
+import { runHook } from '../../utils.mjs';
 
 function createBlogPrefetchForRoute(adapter) {
   return async function prefetchForRoute(key, qc, params) {
@@ -62,7 +62,7 @@ const PostListQuerySchema = z.object({
   tagSlug: z.string().optional(),
   offset: z.coerce.number().int().min(0).optional(),
   limit: z.coerce.number().int().min(1).max(100).optional(),
-  query: z.string().optional(),
+  query: z.string().max(200).optional(),
   published: z.string().optional().transform((val) => {
     if (val === void 0) return void 0;
     if (val === "true") return true;
@@ -98,7 +98,7 @@ const blogBackendPlugin = (hooks) => defineBackendPlugin({
         const context = { query, headers };
         try {
           if (hooks?.onBeforeListPosts) {
-            await runHookWithShim(
+            await runHook(
               () => hooks.onBeforeListPosts(query, context),
               ctx.error,
               "Unauthorized: Cannot list posts"
@@ -130,7 +130,7 @@ const blogBackendPlugin = (hooks) => defineBackendPlugin({
         };
         try {
           if (hooks?.onBeforeCreatePost) {
-            await runHookWithShim(
+            await runHook(
               () => hooks.onBeforeCreatePost(ctx.body, context),
               ctx.error,
               "Unauthorized: Cannot create post"
@@ -182,7 +182,7 @@ const blogBackendPlugin = (hooks) => defineBackendPlugin({
         };
         try {
           if (hooks?.onBeforeUpdatePost) {
-            await runHookWithShim(
+            await runHook(
               () => hooks.onBeforeUpdatePost(ctx.params.id, ctx.body, context),
               ctx.error,
               "Unauthorized: Cannot update post"
@@ -233,7 +233,7 @@ const blogBackendPlugin = (hooks) => defineBackendPlugin({
         };
         try {
           if (hooks?.onBeforeDeletePost) {
-            await runHookWithShim(
+            await runHook(
               () => hooks.onBeforeDeletePost(ctx.params.id, context),
               ctx.error,
               "Unauthorized: Cannot delete post"
@@ -263,7 +263,7 @@ const blogBackendPlugin = (hooks) => defineBackendPlugin({
         const context = { query, headers };
         try {
           if (hooks?.onBeforeListPosts) {
-            await runHookWithShim(
+            await runHook(
               () => hooks.onBeforeListPosts({ published: true }, context),
               ctx.error,
               "Unauthorized: Cannot list posts"

package/dist/packages/stack/src/plugins/blog/client/components/forms/image-field.cjs

@@ -7,8 +7,6 @@ const input = require('../../../../../../../ui/src/components/input.cjs');
 const context = require('@btst/stack/context');
 const LucideIcons = require('lucide-react');
 const React = require('react');
-const sonner = require('sonner');
-const index = require('../../localization/index.cjs');
 
 function FeaturedImageField({
   isRequired,
@@ -18,25 +16,25 @@ function FeaturedImageField({
 }) {
   const fileInputRef = React.useRef(null);
   const [isUploading, setIsUploading] = React.useState(false);
+  const notify = context.useNotify();
+  const t = context.useTranslate();
   const {
     uploadImage,
-    Image,
     localization,
     imageInputField: ImageInput
-  } = context.usePluginOverrides(
-    "blog",
-    { localization: index.BLOG_LOCALIZATION }
-  );
-  const ImageComponent = Image ? Image : DefaultImage;
+  } = context.usePluginOverrides("blog");
+  const { router } = context.useStack();
+  const ImageComponent = router?.Image ?? DefaultImage;
+  const label = /* @__PURE__ */ jsxRuntime.jsxs(form.FormLabel, { children: [
+    localization?.BLOG_FORMS_FEATURED_IMAGE_LABEL ?? t("blog.forms.featuredImageLabel", "Image"),
+    isRequired && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-destructive", children: [
+      " ",
+      localization?.BLOG_FORMS_FEATURED_IMAGE_REQUIRED_ASTERISK ?? t("blog.forms.featuredImageRequiredAsterisk", " *")
+    ] })
+  ] });
   if (ImageInput) {
     return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(form.FormLabel, { children: [
-        localization.BLOG_FORMS_FEATURED_IMAGE_LABEL,
-        isRequired && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-destructive", children: [
-          " ",
-          localization.BLOG_FORMS_FEATURED_IMAGE_REQUIRED_ASTERISK
-        ] })
-      ] }),
+      label,
       /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
         ImageInput,
         {
@@ -53,11 +51,21 @@ function FeaturedImageField({
     const file = event.target.files?.[0];
     if (!file) return;
     if (!file.type.startsWith("image/")) {
-      sonner.toast.error(localization.BLOG_FORMS_FEATURED_IMAGE_ERROR_NOT_IMAGE);
+      notify.error(
+        localization?.BLOG_FORMS_FEATURED_IMAGE_ERROR_NOT_IMAGE ?? t(
+          "blog.forms.featuredImageErrorNotImage",
+          "Please select an image file"
+        )
+      );
       return;
     }
     if (file.size > 4 * 1024 * 1024) {
-      sonner.toast.error(localization.BLOG_FORMS_FEATURED_IMAGE_ERROR_TOO_LARGE);
+      notify.error(
+        localization?.BLOG_FORMS_FEATURED_IMAGE_ERROR_TOO_LARGE ?? t(
+          "blog.forms.featuredImageErrorTooLarge",
+          "Image size must be less than 4MB"
+        )
+      );
       return;
     }
     try {
@@ -65,30 +73,33 @@ function FeaturedImageField({
       setFeaturedImageUploading(true);
       const url = await uploadImage(file);
       onChange(url);
-      sonner.toast.success(localization.BLOG_FORMS_FEATURED_IMAGE_TOAST_SUCCESS);
+      notify.success(
+        localization?.BLOG_FORMS_FEATURED_IMAGE_TOAST_SUCCESS ?? t(
+          "blog.forms.featuredImageToastSuccess",
+          "Image uploaded successfully"
+        )
+      );
     } catch (error) {
-      sonner.toast.error(localization.BLOG_FORMS_FEATURED_IMAGE_TOAST_FAILURE);
       console.error("Failed to upload image:", error);
-      sonner.toast.error(localization.BLOG_FORMS_FEATURED_IMAGE_TOAST_FAILURE);
+      notify.error(
+        localization?.BLOG_FORMS_FEATURED_IMAGE_TOAST_FAILURE ?? t("blog.forms.featuredImageToastFailure", "Failed to upload image")
+      );
     } finally {
       setIsUploading(false);
       setFeaturedImageUploading(false);
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(form.FormLabel, { children: [
-      localization.BLOG_FORMS_FEATURED_IMAGE_LABEL,
-      isRequired && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-destructive", children: [
-        " ",
-        localization.BLOG_FORMS_FEATURED_IMAGE_REQUIRED_ASTERISK
-      ] })
-    ] }),
+    label,
     /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           input.Input,
           {
-            placeholder: localization.BLOG_FORMS_FEATURED_IMAGE_INPUT_PLACEHOLDER,
+            placeholder: localization?.BLOG_FORMS_FEATURED_IMAGE_INPUT_PLACEHOLDER ?? t(
+              "blog.forms.featuredImageInputPlaceholder",
+              "Image URL or upload below..."
+            ),
             value: value || "",
             onChange: (e) => onChange(e.target.value),
             disabled: isUploading
@@ -103,10 +114,13 @@ function FeaturedImageField({
             disabled: isUploading,
             children: isUploading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
-              localization.BLOG_FORMS_FEATURED_IMAGE_UPLOADING_BUTTON
+              localization?.BLOG_FORMS_FEATURED_IMAGE_UPLOADING_BUTTON ?? t(
+                "blog.forms.featuredImageUploadingButton",
+                "Uploading..."
+              )
             ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Upload, { className: "mr-2 h-4 w-4" }),
-              localization.BLOG_FORMS_FEATURED_IMAGE_UPLOAD_BUTTON
+              localization?.BLOG_FORMS_FEATURED_IMAGE_UPLOAD_BUTTON ?? t("blog.forms.featuredImageUploadButton", "Upload")
             ] })
           }
         )
@@ -123,13 +137,19 @@ function FeaturedImageField({
       ),
       isUploading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-sm", children: [
         /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "h-4 w-4 animate-spin" }),
-        localization.BLOG_FORMS_FEATURED_IMAGE_UPLOADING_TEXT
+        localization?.BLOG_FORMS_FEATURED_IMAGE_UPLOADING_TEXT ?? t(
+          "blog.forms.featuredImageUploadingText",
+          "Uploading image..."
+        )
       ] }),
       value && !isUploading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
         ImageComponent,
         {
           src: value,
-          alt: localization.BLOG_FORMS_FEATURED_IMAGE_PREVIEW_ALT,
+          alt: localization?.BLOG_FORMS_FEATURED_IMAGE_PREVIEW_ALT ?? t(
+            "blog.forms.featuredImagePreviewAlt",
+            "Featured image preview"
+          ),
           className: "h-auto w-full max-w-xs rounded-md border",
           width: 400,
           height: 400