@btst/stack 2.12.2 → 3.0.0-rc.2

package/dist/packages/stack/src/plugins/blog/client/components/shared/default-error.cjs

@@ -4,14 +4,13 @@
 const jsxRuntime = require('react/jsx-runtime');
 const errorPlaceholder = require('./error-placeholder.cjs');
 const context = require('@btst/stack/context');
-const index = require('../../localization/index.cjs');
 
 function DefaultError({ error }) {
-  const { localization } = context.usePluginOverrides("blog", {
-    localization: index.BLOG_LOCALIZATION
-  });
-  const title = localization.BLOG_GENERIC_ERROR_TITLE;
-  const message = process.env.NODE_ENV === "production" ? localization.BLOG_GENERIC_ERROR_MESSAGE : (error instanceof Error ? error.message : void 0) ?? localization.BLOG_GENERIC_ERROR_MESSAGE;
+  const t = context.useTranslate();
+  const { localization } = context.usePluginOverrides("blog");
+  const title = localization?.BLOG_GENERIC_ERROR_TITLE ?? t("blog.common.genericErrorTitle", "Something went wrong");
+  const genericMessage = localization?.BLOG_GENERIC_ERROR_MESSAGE ?? t("blog.common.genericErrorMessage", "An unexpected error occurred.");
+  const message = process.env.NODE_ENV === "production" ? genericMessage : (error instanceof Error ? error.message : void 0) ?? genericMessage;
   return /* @__PURE__ */ jsxRuntime.jsx(errorPlaceholder.ErrorPlaceholder, { title, message });
 }
 

package/dist/packages/stack/src/plugins/blog/client/components/shared/default-error.mjs

@@ -1,15 +1,14 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { ErrorPlaceholder } from './error-placeholder.mjs';
-import { usePluginOverrides } from '@btst/stack/context';
-import { BLOG_LOCALIZATION } from '../../localization/index.mjs';
+import { useTranslate, usePluginOverrides } from '@btst/stack/context';
 
 function DefaultError({ error }) {
-  const { localization } = usePluginOverrides("blog", {
-    localization: BLOG_LOCALIZATION
-  });
-  const title = localization.BLOG_GENERIC_ERROR_TITLE;
-  const message = process.env.NODE_ENV === "production" ? localization.BLOG_GENERIC_ERROR_MESSAGE : (error instanceof Error ? error.message : void 0) ?? localization.BLOG_GENERIC_ERROR_MESSAGE;
+  const t = useTranslate();
+  const { localization } = usePluginOverrides("blog");
+  const title = localization?.BLOG_GENERIC_ERROR_TITLE ?? t("blog.common.genericErrorTitle", "Something went wrong");
+  const genericMessage = localization?.BLOG_GENERIC_ERROR_MESSAGE ?? t("blog.common.genericErrorMessage", "An unexpected error occurred.");
+  const message = process.env.NODE_ENV === "production" ? genericMessage : (error instanceof Error ? error.message : void 0) ?? genericMessage;
   return /* @__PURE__ */ jsx(ErrorPlaceholder, { title, message });
 }
 

package/dist/packages/stack/src/plugins/blog/client/components/shared/markdown-content.cjs

@@ -8,10 +8,9 @@ const defaults = require('./defaults.cjs');
 require('highlight.js/styles/panda-syntax-light.css');
 
 function MarkdownContent({ markdown, className }) {
-  const { Link, Image } = context.usePluginOverrides("blog", {
-    Link: defaults.DefaultLink,
-    Image: defaults.DefaultImage
-  });
+  const { router } = context.useStack();
+  const Link = router?.Link ?? defaults.DefaultLink;
+  const Image = router?.Image ?? defaults.DefaultImage;
   return /* @__PURE__ */ jsxRuntime.jsx(
     markdownContent.MarkdownContent,
     {

package/dist/packages/stack/src/plugins/blog/client/components/shared/markdown-content.mjs

@@ -1,15 +1,14 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { MarkdownContent as MarkdownContent$1 } from '../../../../../../../ui/src/components/markdown-content.mjs';
-import { usePluginOverrides } from '@btst/stack/context';
-import { DefaultImage, DefaultLink } from './defaults.mjs';
+import { useStack } from '@btst/stack/context';
+import { DefaultLink, DefaultImage } from './defaults.mjs';
 import 'highlight.js/styles/panda-syntax-light.css';
 
 function MarkdownContent({ markdown, className }) {
-  const { Link, Image } = usePluginOverrides("blog", {
-    Link: DefaultLink,
-    Image: DefaultImage
-  });
+  const { router } = useStack();
+  const Link = router?.Link ?? DefaultLink;
+  const Image = router?.Image ?? DefaultImage;
   return /* @__PURE__ */ jsx(
     MarkdownContent$1,
     {

package/dist/packages/stack/src/plugins/blog/client/components/shared/on-this-page.cjs

@@ -5,14 +5,12 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const utils = require('../../../utils.cjs');
 const context = require('@btst/stack/context');
-const index = require('../../localization/index.cjs');
 const select = require('../../../../../../../ui/src/components/select.cjs');
 const LucideIcons = require('lucide-react');
 
 function OnThisPage({ markdown, className }) {
-  const { localization } = context.usePluginOverrides("blog", {
-    localization: index.BLOG_LOCALIZATION
-  });
+  const t = context.useTranslate();
+  const { localization } = context.usePluginOverrides("blog");
   const headings = React.useMemo(() => extractHeadings(markdown), [markdown]);
   const activeId = useActiveHeading(headings);
   if (headings.length === 0) {
@@ -44,7 +42,7 @@ function OnThisPage({ markdown, className }) {
         /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 font-semibold text-muted-foreground sticky top-0 h-6 text-xs", children: [
           /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.TextAlignStart, { className: "w-3 h-3" }),
           " ",
-          localization.BLOG_POST_ON_THIS_PAGE
+          localization?.BLOG_POST_ON_THIS_PAGE ?? t("blog.post.onThisPage", "In This Post")
         ] }),
         headings.map(({ id, text, level }) => {
           const paddingLeft = level === 1 ? "0" : level === 2 ? "0.5rem" : level === 3 ? "1rem" : level === 4 ? "1.5rem" : level === 5 ? "2rem" : level === 6 ? "2.5rem" : "0";
@@ -73,9 +71,8 @@ function OnThisPage({ markdown, className }) {
   );
 }
 function OnThisPageSelect({ markdown, className }) {
-  const { localization } = context.usePluginOverrides("blog", {
-    localization: index.BLOG_LOCALIZATION
-  });
+  const t = context.useTranslate();
+  const { localization } = context.usePluginOverrides("blog");
   const headings = React.useMemo(() => extractHeadings(markdown), [markdown]);
   const initialValue = React.useMemo(() => headings[0]?.id ?? "", [headings]);
   const activeId = useActiveHeading(headings);
@@ -100,7 +97,12 @@ function OnThisPageSelect({ markdown, className }) {
         top: "var(--navbar-height, 16px)"
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(select.Select, { value, onValueChange: handleValueChange, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { placeholder: localization.BLOG_POST_ON_THIS_PAGE }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+          select.SelectValue,
+          {
+            placeholder: localization?.BLOG_POST_ON_THIS_PAGE ?? t("blog.post.onThisPage", "In This Post")
+          }
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: headings.map(({ id, text, level }) => {
           const indent = level > 1 ? `${(level - 1) * 0.5}rem` : "0";
           return /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: id, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { paddingLeft: indent }, children: text }) }, id);

package/dist/packages/stack/src/plugins/blog/client/components/shared/on-this-page.mjs

@@ -2,15 +2,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo, useState, useRef, useEffect } from 'react';
 import { cn, slugify } from '../../../utils.mjs';
-import { usePluginOverrides } from '@btst/stack/context';
-import { BLOG_LOCALIZATION } from '../../localization/index.mjs';
+import { useTranslate, usePluginOverrides } from '@btst/stack/context';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../../../../../../ui/src/components/select.mjs';
 import { TextAlignStart } from 'lucide-react';
 
 function OnThisPage({ markdown, className }) {
-  const { localization } = usePluginOverrides("blog", {
-    localization: BLOG_LOCALIZATION
-  });
+  const t = useTranslate();
+  const { localization } = usePluginOverrides("blog");
   const headings = useMemo(() => extractHeadings(markdown), [markdown]);
   const activeId = useActiveHeading(headings);
   if (headings.length === 0) {
@@ -42,7 +40,7 @@ function OnThisPage({ markdown, className }) {
         /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 font-semibold text-muted-foreground sticky top-0 h-6 text-xs", children: [
           /* @__PURE__ */ jsx(TextAlignStart, { className: "w-3 h-3" }),
           " ",
-          localization.BLOG_POST_ON_THIS_PAGE
+          localization?.BLOG_POST_ON_THIS_PAGE ?? t("blog.post.onThisPage", "In This Post")
         ] }),
         headings.map(({ id, text, level }) => {
           const paddingLeft = level === 1 ? "0" : level === 2 ? "0.5rem" : level === 3 ? "1rem" : level === 4 ? "1.5rem" : level === 5 ? "2rem" : level === 6 ? "2.5rem" : "0";
@@ -71,9 +69,8 @@ function OnThisPage({ markdown, className }) {
   );
 }
 function OnThisPageSelect({ markdown, className }) {
-  const { localization } = usePluginOverrides("blog", {
-    localization: BLOG_LOCALIZATION
-  });
+  const t = useTranslate();
+  const { localization } = usePluginOverrides("blog");
   const headings = useMemo(() => extractHeadings(markdown), [markdown]);
   const initialValue = useMemo(() => headings[0]?.id ?? "", [headings]);
   const activeId = useActiveHeading(headings);
@@ -98,7 +95,12 @@ function OnThisPageSelect({ markdown, className }) {
         top: "var(--navbar-height, 16px)"
       },
       children: /* @__PURE__ */ jsxs(Select, { value, onValueChange: handleValueChange, children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: localization.BLOG_POST_ON_THIS_PAGE }) }),
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx(
+          SelectValue,
+          {
+            placeholder: localization?.BLOG_POST_ON_THIS_PAGE ?? t("blog.post.onThisPage", "In This Post")
+          }
+        ) }),
         /* @__PURE__ */ jsx(SelectContent, { children: headings.map(({ id, text, level }) => {
           const indent = level > 1 ? `${(level - 1) * 0.5}rem` : "0";
           return /* @__PURE__ */ jsx(SelectItem, { value: id, children: /* @__PURE__ */ jsx("span", { style: { paddingLeft: indent }, children: text }) }, id);

package/dist/packages/stack/src/plugins/blog/client/components/shared/post-card.cjs

@@ -7,7 +7,6 @@ const card = require('../../../../../../../ui/src/components/card.cjs');
 const context = require('@btst/stack/context');
 const dateFns = require('date-fns');
 const LucideIcons = require('lucide-react');
-const index = require('../../localization/index.cjs');
 const defaults = require('./defaults.cjs');
 
 const GRADIENT_PALETTES = [
@@ -207,13 +206,11 @@ function getGradientFromTitle(title) {
   return palette;
 }
 function PostCard({ post }) {
-  const { Link, Image } = context.usePluginOverrides("blog", {
-    Link: defaults.DefaultLink,
-    Image: defaults.DefaultImage
-  });
-  const { localization } = context.usePluginOverrides("blog", {
-    localization: index.BLOG_LOCALIZATION
-  });
+  const t = context.useTranslate();
+  const { localization } = context.usePluginOverrides("blog", {});
+  const { router } = context.useStack();
+  const Link = router?.Link ?? defaults.DefaultLink;
+  const Image = router?.Image ?? defaults.DefaultImage;
   const basePath = context.useBasePath();
   const blogPath = `${basePath}/blog/${post.slug}`;
   const postDate = dateFns.formatDate(
@@ -254,7 +251,7 @@ function PostCard({ post }) {
         ] })
       }
     ),
-    !post.published && /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { variant: "destructive", className: "absolute top-2 left-2 text-xs", children: localization.BLOG_CARD_DRAFT_BADGE }),
+    !post.published && /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { variant: "destructive", className: "absolute top-2 left-2 text-xs", children: localization?.BLOG_CARD_DRAFT_BADGE ?? t("blog.card.draftBadge", "Draft") }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       Link,
       {

package/dist/packages/stack/src/plugins/blog/client/components/shared/post-card.mjs

@@ -2,11 +2,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Badge } from '../../../../../../../ui/src/components/badge.mjs';
 import { Card, CardHeader, CardTitle, CardContent } from '../../../../../../../ui/src/components/card.mjs';
-import { usePluginOverrides, useBasePath } from '@btst/stack/context';
+import { useTranslate, usePluginOverrides, useStack, useBasePath } from '@btst/stack/context';
 import { formatDate } from 'date-fns';
 import { CalendarIcon } from 'lucide-react';
-import { BLOG_LOCALIZATION } from '../../localization/index.mjs';
-import { DefaultImage, DefaultLink } from './defaults.mjs';
+import { DefaultLink, DefaultImage } from './defaults.mjs';
 
 const GRADIENT_PALETTES = [
   {
@@ -205,13 +204,11 @@ function getGradientFromTitle(title) {
   return palette;
 }
 function PostCard({ post }) {
-  const { Link, Image } = usePluginOverrides("blog", {
-    Link: DefaultLink,
-    Image: DefaultImage
-  });
-  const { localization } = usePluginOverrides("blog", {
-    localization: BLOG_LOCALIZATION
-  });
+  const t = useTranslate();
+  const { localization } = usePluginOverrides("blog", {});
+  const { router } = useStack();
+  const Link = router?.Link ?? DefaultLink;
+  const Image = router?.Image ?? DefaultImage;
   const basePath = useBasePath();
   const blogPath = `${basePath}/blog/${post.slug}`;
   const postDate = formatDate(
@@ -252,7 +249,7 @@ function PostCard({ post }) {
         ] })
       }
     ),
-    !post.published && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "absolute top-2 left-2 text-xs", children: localization.BLOG_CARD_DRAFT_BADGE }),
+    !post.published && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "absolute top-2 left-2 text-xs", children: localization?.BLOG_CARD_DRAFT_BADGE ?? t("blog.card.draftBadge", "Draft") }),
     /* @__PURE__ */ jsxs(
       Link,
       {

package/dist/packages/stack/src/plugins/blog/client/components/shared/post-navigation.cjs

@@ -11,9 +11,9 @@ function PostNavigation({
   previousPost,
   nextPost
 }) {
-  const { Link } = context.usePluginOverrides("blog", {
-    Link: defaults.DefaultLink
-  });
+  const t = context.useTranslate();
+  const { router } = context.useStack();
+  const Link = router?.Link ?? defaults.DefaultLink;
   const basePath = context.useBasePath();
   const blogPath = `${basePath}/blog`;
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (previousPost || nextPost) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -33,7 +33,7 @@ function PostNavigation({
               children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronLeft, { className: "h-4 w-4 shrink-0" }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Previous" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: t("blog.post.previous", "Previous") }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold line-clamp-2 text-sm leading-tight transition-colors text-start", children: previousPost.title })
                 ] })
               ] })
@@ -54,7 +54,7 @@ function PostNavigation({
               className: "w-full justify-end py-4 px-4 whitespace-normal! h-full hover:cursor-pointer",
               children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Next" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: t("blog.post.next", "Next") }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold line-clamp-2 text-sm leading-tight transition-colors text-start", children: nextPost.title })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronRight, { className: "h-4 w-4 shrink-0" })

package/dist/packages/stack/src/plugins/blog/client/components/shared/post-navigation.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { usePluginOverrides, useBasePath } from '@btst/stack/context';
+import { useTranslate, useStack, useBasePath } from '@btst/stack/context';
 import { Button } from '../../../../../../../ui/src/components/button.mjs';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { DefaultLink } from './defaults.mjs';
@@ -9,9 +9,9 @@ function PostNavigation({
   previousPost,
   nextPost
 }) {
-  const { Link } = usePluginOverrides("blog", {
-    Link: DefaultLink
-  });
+  const t = useTranslate();
+  const { router } = useStack();
+  const Link = router?.Link ?? DefaultLink;
   const basePath = useBasePath();
   const blogPath = `${basePath}/blog`;
   return /* @__PURE__ */ jsx(Fragment, { children: (previousPost || nextPost) && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -31,7 +31,7 @@ function PostNavigation({
               children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
                 /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4 shrink-0" }),
                 /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Previous" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("blog.post.previous", "Previous") }),
                   /* @__PURE__ */ jsx("div", { className: "font-semibold line-clamp-2 text-sm leading-tight transition-colors text-start", children: previousPost.title })
                 ] })
               ] })
@@ -52,7 +52,7 @@ function PostNavigation({
               className: "w-full justify-end py-4 px-4 whitespace-normal! h-full hover:cursor-pointer",
               children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Next" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("blog.post.next", "Next") }),
                   /* @__PURE__ */ jsx("div", { className: "font-semibold line-clamp-2 text-sm leading-tight transition-colors text-start", children: nextPost.title })
                 ] }),
                 /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })

package/dist/packages/stack/src/plugins/blog/client/components/shared/posts-list.cjs

@@ -6,7 +6,6 @@ const button = require('../../../../../../../ui/src/components/button.cjs');
 const emptyList = require('./empty-list.cjs');
 const searchInput = require('./search-input.cjs');
 const postCard = require('./post-card.cjs');
-const index = require('../../localization/index.cjs');
 
 function PostsList({
   posts,
@@ -14,21 +13,24 @@ function PostsList({
   hasMore,
   isLoadingMore
 }) {
-  const { localization } = context.usePluginOverrides("blog", {
-    localization: index.BLOG_LOCALIZATION
-  });
-  const { PostCard } = context.usePluginOverrides("blog");
+  const t = context.useTranslate();
+  const { localization, PostCard } = context.usePluginOverrides("blog");
   const PostCardComponent = PostCard || postCard.PostCard;
   if (posts.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(emptyList.EmptyList, { message: localization.BLOG_LIST_EMPTY });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      emptyList.EmptyList,
+      {
+        message: localization?.BLOG_LIST_EMPTY ?? t("blog.list.empty", "There are no posts here yet.")
+      }
+    );
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full space-y-6", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pb-6", children: /* @__PURE__ */ jsxRuntime.jsx(
       searchInput.SearchInput,
       {
-        placeholder: localization.BLOG_LIST_SEARCH_PLACEHOLDER,
-        buttonText: localization.BLOG_LIST_SEARCH_BUTTON,
-        emptyMessage: localization.BLOG_LIST_SEARCH_EMPTY
+        placeholder: localization?.BLOG_LIST_SEARCH_PLACEHOLDER ?? t("blog.list.searchPlaceholder", "Search Blog Posts..."),
+        buttonText: localization?.BLOG_LIST_SEARCH_BUTTON ?? t("blog.list.searchButton", "Search Posts"),
+        emptyMessage: localization?.BLOG_LIST_SEARCH_EMPTY ?? t("blog.list.searchEmpty", "No blog posts found.")
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: posts.map((post) => /* @__PURE__ */ jsxRuntime.jsx(PostCardComponent, { post }, post.id)) }),
@@ -39,7 +41,7 @@ function PostsList({
         disabled: isLoadingMore,
         variant: "outline",
         size: "lg",
-        children: isLoadingMore ? localization.BLOG_LIST_LOADING_MORE : localization.BLOG_LIST_LOAD_MORE
+        children: isLoadingMore ? localization?.BLOG_LIST_LOADING_MORE ?? t("blog.list.loadingMore", "Loading more...") : localization?.BLOG_LIST_LOAD_MORE ?? t("blog.list.loadMore", "Load more posts")
       }
     ) })
   ] });

package/dist/packages/stack/src/plugins/blog/client/components/shared/posts-list.mjs

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { usePluginOverrides } from '@btst/stack/context';
+import { useTranslate, usePluginOverrides } from '@btst/stack/context';
 import { Button } from '../../../../../../../ui/src/components/button.mjs';
 import { EmptyList } from './empty-list.mjs';
 import { SearchInput } from './search-input.mjs';
 import { PostCard } from './post-card.mjs';
-import { BLOG_LOCALIZATION } from '../../localization/index.mjs';
 
 function PostsList({
   posts,
@@ -12,21 +11,24 @@ function PostsList({
   hasMore,
   isLoadingMore
 }) {
-  const { localization } = usePluginOverrides("blog", {
-    localization: BLOG_LOCALIZATION
-  });
-  const { PostCard: PostCard$1 } = usePluginOverrides("blog");
+  const t = useTranslate();
+  const { localization, PostCard: PostCard$1 } = usePluginOverrides("blog");
   const PostCardComponent = PostCard$1 || PostCard;
   if (posts.length === 0) {
-    return /* @__PURE__ */ jsx(EmptyList, { message: localization.BLOG_LIST_EMPTY });
+    return /* @__PURE__ */ jsx(
+      EmptyList,
+      {
+        message: localization?.BLOG_LIST_EMPTY ?? t("blog.list.empty", "There are no posts here yet.")
+      }
+    );
   }
   return /* @__PURE__ */ jsxs("div", { className: "w-full space-y-6", children: [
     /* @__PURE__ */ jsx("div", { className: "flex justify-center pb-6", children: /* @__PURE__ */ jsx(
       SearchInput,
       {
-        placeholder: localization.BLOG_LIST_SEARCH_PLACEHOLDER,
-        buttonText: localization.BLOG_LIST_SEARCH_BUTTON,
-        emptyMessage: localization.BLOG_LIST_SEARCH_EMPTY
+        placeholder: localization?.BLOG_LIST_SEARCH_PLACEHOLDER ?? t("blog.list.searchPlaceholder", "Search Blog Posts..."),
+        buttonText: localization?.BLOG_LIST_SEARCH_BUTTON ?? t("blog.list.searchButton", "Search Posts"),
+        emptyMessage: localization?.BLOG_LIST_SEARCH_EMPTY ?? t("blog.list.searchEmpty", "No blog posts found.")
       }
     ) }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: posts.map((post) => /* @__PURE__ */ jsx(PostCardComponent, { post }, post.id)) }),
@@ -37,7 +39,7 @@ function PostsList({
         disabled: isLoadingMore,
         variant: "outline",
         size: "lg",
-        children: isLoadingMore ? localization.BLOG_LIST_LOADING_MORE : localization.BLOG_LIST_LOAD_MORE
+        children: isLoadingMore ? localization?.BLOG_LIST_LOADING_MORE ?? t("blog.list.loadingMore", "Loading more...") : localization?.BLOG_LIST_LOAD_MORE ?? t("blog.list.loadMore", "Load more posts")
       }
     ) })
   ] });

package/dist/packages/stack/src/plugins/blog/client/components/shared/recent-posts-carousel.cjs

@@ -6,25 +6,25 @@ const context = require('@btst/stack/context');
 const carousel = require('../../../../../../../ui/src/components/carousel.cjs');
 const postCard = require('./post-card.cjs');
 const defaults = require('./defaults.cjs');
-const index = require('../../localization/index.cjs');
 
 function RecentPostsCarousel({ posts }) {
-  const { PostCard, Link, localization } = context.usePluginOverrides("blog", {
-    PostCard: postCard.PostCard,
-    Link: defaults.DefaultLink,
-    localization: index.BLOG_LOCALIZATION
+  const t = context.useTranslate();
+  const { PostCard, localization } = context.usePluginOverrides("blog", {
+    PostCard: postCard.PostCard
   });
+  const { router } = context.useStack();
+  const Link = router?.Link ?? defaults.DefaultLink;
   const PostCardComponent = PostCard || postCard.PostCard;
   const basePath = context.useBasePath();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: posts && posts.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 py-4 w-full text-start border-t", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: localization.BLOG_POST_KEEP_READING }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: localization?.BLOG_POST_KEEP_READING ?? t("blog.post.keepReading", "Keep Reading") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         Link,
         {
           href: `${basePath}/blog`,
           className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
-          children: localization.BLOG_POST_VIEW_ALL
+          children: localization?.BLOG_POST_VIEW_ALL ?? t("blog.post.viewAll", "View all")
         }
       )
     ] }) }),

package/dist/packages/stack/src/plugins/blog/client/components/shared/recent-posts-carousel.mjs

@@ -1,28 +1,28 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { usePluginOverrides, useBasePath } from '@btst/stack/context';
+import { useTranslate, usePluginOverrides, useStack, useBasePath } from '@btst/stack/context';
 import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from '../../../../../../../ui/src/components/carousel.mjs';
 import { PostCard } from './post-card.mjs';
 import { DefaultLink } from './defaults.mjs';
-import { BLOG_LOCALIZATION } from '../../localization/index.mjs';
 
 function RecentPostsCarousel({ posts }) {
-  const { PostCard: PostCard$1, Link, localization } = usePluginOverrides("blog", {
-    PostCard: PostCard,
-    Link: DefaultLink,
-    localization: BLOG_LOCALIZATION
+  const t = useTranslate();
+  const { PostCard: PostCard$1, localization } = usePluginOverrides("blog", {
+    PostCard: PostCard
   });
+  const { router } = useStack();
+  const Link = router?.Link ?? DefaultLink;
   const PostCardComponent = PostCard$1 || PostCard;
   const basePath = useBasePath();
   return /* @__PURE__ */ jsx("div", { className: "w-full", children: posts && posts.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: "mt-4 py-4 w-full text-start border-t", children: /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: localization.BLOG_POST_KEEP_READING }),
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: localization?.BLOG_POST_KEEP_READING ?? t("blog.post.keepReading", "Keep Reading") }),
       /* @__PURE__ */ jsx(
         Link,
         {
           href: `${basePath}/blog`,
           className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
-          children: localization.BLOG_POST_VIEW_ALL
+          children: localization?.BLOG_POST_VIEW_ALL ?? t("blog.post.viewAll", "View all")
         }
       )
     ] }) }),

package/dist/packages/stack/src/plugins/blog/client/components/shared/search-input.cjs

@@ -8,6 +8,7 @@ const utils = require('../../../utils.cjs');
 const highlightText = require('./highlight-text.cjs');
 const searchModal = require('./search-modal.cjs');
 const context = require('@btst/stack/context');
+const client = require('@btst/stack/client');
 
 function _interopNamespaceCompat(e) {
 	if (e && typeof e === 'object' && 'default' in e) return e;
@@ -78,6 +79,9 @@ const renderBlogResult = (item, index, query) => {
     item.id
   );
 };
+const SEARCH_LIST_STATE_SCHEMA = {
+  q: { type: "string", default: "", history: "replace" }
+};
 function SearchInput({
   className,
   triggerClassName,
@@ -85,9 +89,13 @@ function SearchInput({
   buttonText,
   emptyMessage
 }) {
-  const { navigate } = context.usePluginOverrides("blog");
+  const { router } = context.useStack();
+  const navigate = router?.navigate;
   const basePath = context.useBasePath();
-  const [currentQuery, setCurrentQuery] = React__namespace.useState("");
+  const [{ q: currentQuery }, setListState] = client.useListState(
+    "blog-posts",
+    SEARCH_LIST_STATE_SCHEMA
+  );
   const { data: searchResults = [], isLoading } = blogHooks.usePostSearch({
     query: currentQuery,
     enabled: currentQuery.trim().length > 0,
@@ -103,15 +111,15 @@ function SearchInput({
       authorName: "",
       processedContent: utils.stripMarkdown(utils.stripHtml(post.content || "")),
       processedExcerpt: utils.stripMarkdown(utils.stripHtml(post.excerpt || "")),
-      onClick: () => navigate(`${basePath}/blog/${post.slug}`)
+      onClick: () => void navigate?.(`${basePath}/blog/${post.slug}`)
     }));
   }, [searchResults, navigate, basePath]);
   const handleSearch = React__namespace.useCallback(
     (query) => {
-      setCurrentQuery(query);
+      setListState({ q: query });
       return [];
     },
-    []
+    [setListState]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
     searchModal.SearchModal,
@@ -119,6 +127,7 @@ function SearchInput({
       placeholder,
       buttonText,
       emptyMessage,
+      initialQuery: currentQuery,
       searchFn: handleSearch,
       renderResult: renderBlogResult,
       results: formattedResults,