akanjs 2.1.1 → 2.1.2-rc.0

package/types/ui/System/Common.d.ts

@@ -28,6 +28,8 @@ export interface ProviderProps {
     layoutStyle?: "mobile" | "web";
     /** Enable reconnect helper. Defaults to local operation mode in CSR. */
     reconnect?: boolean;
+    /** Active-locale dictionary injected by the server (SSR only) to seed the client Translator. */
+    dictionary?: Record<string, Record<string, unknown>>;
     /** Root route component used by CSR page loading. */
     of: (props: unknown) => ReactNode | null;
 }

package/types/ui/System/SSR.d.ts

@@ -3,13 +3,13 @@ import { type ReactNode } from "react";
 import { type ProviderProps } from "./Common.d.ts";
 export declare const SSR: {
     (): import("react/jsx-runtime").JSX.Element;
-    Provider: ({ className, appName, params, head, manifest, env, gaTrackingId, children, theme, prefix, fonts, layoutStyle, reconnect, of, }: SSRProviderProps) => import("react/jsx-runtime").JSX.Element;
+    Provider: ({ className, appName, params, head, manifest, env, gaTrackingId, children, theme, prefix, fonts, layoutStyle, reconnect, dictionary, of, }: SSRProviderProps) => import("react/jsx-runtime").JSX.Element;
     Wrapper: ({ children, head, manifest, fonts, className, prefix, layoutStyle, }: SSRWrapperProps) => import("react/jsx-runtime").JSX.Element;
 };
 export type SSRProviderProps = ProviderProps & {
     fonts?: ReactFont[];
 };
-declare const SSRProvider: ({ className, appName, params, head, manifest, env, gaTrackingId, children, theme, prefix, fonts, layoutStyle, reconnect, of, }: SSRProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const SSRProvider: ({ className, appName, params, head, manifest, env, gaTrackingId, children, theme, prefix, fonts, layoutStyle, reconnect, dictionary, of, }: SSRProviderProps) => import("react/jsx-runtime").JSX.Element;
 interface SSRWrapperProps {
     className?: string;
     appName: string;

package/ui/InfiniteScroll.tsx

@@ -43,7 +43,6 @@ export const InfiniteScroll = ({
     if (nextPage > totalPages) return;
     setIsFetching(true);
     await onAddPage(nextPage);
-    void onAddPage(nextPage);
     onPageSelect(nextPage);
     setIsFetching(false);
     page.current = nextPage;

package/ui/System/Client.tsx

@@ -14,6 +14,7 @@ import {
   router,
   setCookie,
   type TransitionStyle,
+  Translator,
 } from "akanjs/client";
 import { Logger } from "akanjs/common";
 import type { AkanTheme } from "akanjs/fetch";
@@ -41,7 +42,7 @@ interface ClientWrapperProps {
   children: ReactNode;
   theme?: AkanTheme;
   lang?: string;
-  dictionary?: { [key: string]: { [key: string]: string } };
+  dictionary?: Record<string, Record<string, unknown>>;
   signals?: SerializedSignal[];
   reconnect?: boolean;
 }
@@ -49,10 +50,12 @@ export const ClientWrapper = ({
   children,
   theme,
   lang = "en",
-  dictionary = {},
+  dictionary,
   signals = [],
   reconnect = true,
 }: ClientWrapperProps) => {
+
+  if (dictionary) Translator.seed(lang, dictionary);
   if (getEnv().renderMode === "ssr") {
   }
   useLayoutEffect(() => {
@@ -68,7 +71,8 @@ export const ClientWrapper = ({
 };
 Client.Wrapper = ClientWrapper;
 
-interface ClientPathWrapperProps extends Omit<HTMLAttributes<HTMLDivElement>, "style"> {
+interface ClientPathWrapperProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "style"> {
   bind?: () => HTMLAttributes<HTMLDivElement>;
   wrapperRef?: RefObject<HTMLDivElement | null> | null;
   pageType?: "current" | "prev" | "cached";
@@ -89,12 +93,18 @@ export const ClientPathWrapper = ({
   layoutStyle = "web",
   ...props
 }: ClientPathWrapperProps) => {
-  const href = location?.href ?? (typeof window !== "undefined" ? window.location.href : "");
-  const hash = location?.hash ?? (typeof window !== "undefined" ? window.location.hash : "");
+  const href =
+    location?.href ??
+    (typeof window !== "undefined" ? window.location.href : "");
+  const hash =
+    location?.hash ??
+    (typeof window !== "undefined" ? window.location.hash : "");
   const pathname = location?.pathname ?? "/"; 
   const params = location?.params ?? {}; 
   const searchParams = location?.searchParams ?? {}; 
-  const search = location?.search ?? (typeof window !== "undefined" ? window.location.search : "");
+  const search =
+    location?.search ??
+    (typeof window !== "undefined" ? window.location.search : "");
   const lang = params.lang;
   const firstPath = pathname.split("/")[2];
   const pathRoute: PathRoute = location?.pathRoute ?? {
@@ -112,14 +122,24 @@ export const ClientPathWrapper = ({
     <pathContext.Provider
       value={{
         pageType,
-        location: { href, hash, pathname, params, searchParams, search, pathRoute },
+        location: {
+          href,
+          hash,
+          pathname,
+          params,
+          searchParams,
+          search,
+          pathRoute,
+        },
         prefix,
         gestureEnabled,
         setGestureEnabled,
       }}
     >
       <animated.div
-        {...(bind && pathRoute.pageState.gesture && gestureEnabled ? bind() : {})}
+        {...(bind && pathRoute.pageState.gesture && gestureEnabled
+          ? bind()
+          : {})}
         className={clsx("group/path", className)}
         ref={wrapperRef}
         {...props}
@@ -141,7 +161,13 @@ interface ClientBridgeProps {
   gaTrackingId?: string;
 }
 
-export const ClientBridge = ({ env, lang, theme, prefix, gaTrackingId }: ClientBridgeProps) => {
+export const ClientBridge = ({
+  env,
+  lang,
+  theme,
+  prefix,
+  gaTrackingId,
+}: ClientBridgeProps) => {
   const uiOperation = st.use.uiOperation();
   const pathname = st.use.pathname();
   const params = st.use.params();
@@ -208,18 +234,26 @@ function applyThemePolicy(theme: AkanTheme): void {
   }
   if (theme === "system") {
     const dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
+    document.documentElement.setAttribute(
+      "data-theme",
+      dark ? "dark" : "light",
+    );
     return;
   }
   document.documentElement.setAttribute("data-theme", theme);
 }
 
-function buildSearchParams(entries: Iterable<[string, string]>): Record<string, string | string[]> {
+function buildSearchParams(
+  entries: Iterable<[string, string]>,
+): Record<string, string | string[]> {
   const params: Record<string, string | string[]> = {};
   for (const [key, value] of entries) {
     const current = params[key];
     if (current === undefined) params[key] = value;
-    else params[key] = Array.isArray(current) ? [...current, value] : [current, value];
+    else
+      params[key] = Array.isArray(current)
+        ? [...current, value]
+        : [current, value];
   }
   return params;
 }
@@ -239,7 +273,10 @@ interface ClientSsrBridgeProps {
   lang: string;
   prefix?: string;
 }
-export const ClientSsrBridge = ({ lang, prefix = "" }: ClientSsrBridgeProps) => {
+export const ClientSsrBridge = ({
+  lang,
+  prefix = "",
+}: ClientSsrBridgeProps) => {
   useEffect(() => {
     const visiblePrefix = getEnv().operationMode === "local" ? prefix : "";
     const navigateRscWithFallback = (
@@ -253,13 +290,19 @@ export const ClientSsrBridge = ({ lang, prefix = "" }: ClientSsrBridgeProps) =>
         return;
       }
       void navigation.catch((error) => {
-        Logger.warn(`RSC navigation failed, falling back to document navigation: ${String(error)}`);
+        Logger.warn(
+          `RSC navigation failed, falling back to document navigation: ${String(error)}`,
+        );
         fallback();
       });
     };
     const syncHref = (href: string) => {
       const url = new URL(href, window.location.origin);
-      const { path } = getPathInfo(`${url.pathname}${url.search}${url.hash}`, lang, visiblePrefix);
+      const { path } = getPathInfo(
+        `${url.pathname}${url.search}${url.hash}`,
+        lang,
+        visiblePrefix,
+      );
       const searchParams = buildSearchParams(url.searchParams.entries());
       st.set({ pathname: url.pathname, path, searchParams });
     };
@@ -271,11 +314,17 @@ export const ClientSsrBridge = ({ lang, prefix = "" }: ClientSsrBridgeProps) =>
       router: {
         push: (href, routeOptions) => {
           syncHref(href);
-          navigateRscWithFallback(href, routeOptions, () => window.location.assign(href));
+          navigateRscWithFallback(href, routeOptions, () =>
+            window.location.assign(href),
+          );
         },
         replace: (href, routeOptions) => {
           syncHref(href);
-          navigateRscWithFallback(href, { ...routeOptions, replace: true }, () => window.location.replace(href));
+          navigateRscWithFallback(
+            href,
+            { ...routeOptions, replace: true },
+            () => window.location.replace(href),
+          );
         },
         back: () => {
           window.history.back();
@@ -283,7 +332,10 @@ export const ClientSsrBridge = ({ lang, prefix = "" }: ClientSsrBridgeProps) =>
         refresh: () => {
           clearRscNavigationCache();
           syncHref(window.location.href);
-          void navigateRsc(window.location.href, { replace: true, scrollToTop: false });
+          void navigateRsc(window.location.href, {
+            replace: true,
+            scrollToTop: false,
+          });
         },
       },
     });
@@ -294,8 +346,14 @@ export const ClientSsrBridge = ({ lang, prefix = "" }: ClientSsrBridgeProps) =>
     const visiblePrefix = getEnv().operationMode === "local" ? prefix : "";
     const sync = () => {
       const { pathname, search, hash } = window.location;
-      const { path } = getPathInfo(`${pathname}${search}${hash}`, lang, visiblePrefix);
-      const searchParams = buildSearchParams(new URLSearchParams(search).entries());
+      const { path } = getPathInfo(
+        `${pathname}${search}${hash}`,
+        lang,
+        visiblePrefix,
+      );
+      const searchParams = buildSearchParams(
+        new URLSearchParams(search).entries(),
+      );
       st.set({ pathname: window.location.pathname, path, searchParams });
     };
     sync();

package/ui/System/Common.tsx

@@ -30,6 +30,8 @@ export interface ProviderProps {
   layoutStyle?: "mobile" | "web";
   /** Enable reconnect helper. Defaults to local operation mode in CSR. */
   reconnect?: boolean;
+  /** Active-locale dictionary injected by the server (SSR only) to seed the client Translator. */
+  dictionary?: Record<string, Record<string, unknown>>;
   /** Root route component used by CSR page loading. */
   of: (props: unknown) => ReactNode | null;
 }
@@ -55,7 +57,10 @@ export function toManifestJson(value: unknown): unknown {
   return Object.fromEntries(
     Object.entries(value)
       .filter(([, entryValue]) => entryValue !== undefined)
-      .map(([key, entryValue]) => [camelToSnake(key), toManifestJson(entryValue)]),
+      .map(([key, entryValue]) => [
+        camelToSnake(key),
+        toManifestJson(entryValue),
+      ]),
   );
 }
 
@@ -75,7 +80,11 @@ function encodeBase64Utf8(value: string): string {
 
   const buffer = (
     globalThis as typeof globalThis & {
-      Buffer?: { from: (bytes: Uint8Array) => { toString: (encoding: "base64") => string } };
+      Buffer?: {
+        from: (bytes: Uint8Array) => {
+          toString: (encoding: "base64") => string;
+        };
+      };
     }
   ).Buffer;
   if (buffer) return buffer.from(bytes).toString("base64");

package/ui/System/SSR.tsx

@@ -1,10 +1,21 @@
 import { getEnv } from "akanjs/base";
-import { clsx, type ReactFont, router, type WebAppManifest } from "akanjs/client";
+import {
+  clsx,
+  type ReactFont,
+  router,
+  type WebAppManifest,
+} from "akanjs/client";
 import { setRequestTheme } from "akanjs/fetch";
 import { Children, Fragment, type ReactNode, Suspense } from "react";
 import { FontCss } from "../fontCss";
 import { Load } from "../Load";
-import { ClientBridge, ClientInner, ClientPathWrapper, ClientSsrBridge, ClientWrapper } from "./Client";
+import {
+  ClientBridge,
+  ClientInner,
+  ClientPathWrapper,
+  ClientSsrBridge,
+  ClientWrapper,
+} from "./Client";
 import { ManifestLink, type ProviderProps } from "./Common";
 
 export const SSR = () => {
@@ -29,6 +40,7 @@ const SSRProvider = ({
   fonts,
   layoutStyle = "web",
   reconnect = getEnv().operationMode === "local",
+  dictionary,
   of,
 }: SSRProviderProps) => {
   setRequestTheme(theme);
@@ -38,7 +50,8 @@ const SSRProvider = ({
       of={of}
       loader={async () => {
         const { lang } = params;
-        if (!router.isInitialized) router.init({ type: "ssr", side: "server", lang, prefix });
+        if (!router.isInitialized)
+          router.init({ type: "ssr", side: "server", lang, prefix });
         return { lang } as const;
       }}
       render={({ lang }) => (
@@ -52,13 +65,24 @@ const SSRProvider = ({
           prefix={prefix}
           layoutStyle={layoutStyle}
         >
-          <ClientWrapper theme={theme} lang={lang} reconnect={reconnect}>
+          <ClientWrapper
+            theme={theme}
+            lang={lang}
+            reconnect={reconnect}
+            dictionary={dictionary}
+          >
             <Fragment key="children">{Children.toArray(children)}</Fragment>
             <Suspense key="client-inner" fallback={null}>
               <ClientInner />
             </Suspense>
             <Suspense key="client-bridge" fallback={null}>
-              <ClientBridge key="bridge" env={env} theme={theme} prefix={prefix} gaTrackingId={gaTrackingId} />
+              <ClientBridge
+                key="bridge"
+                env={env}
+                theme={theme}
+                prefix={prefix}
+                gaTrackingId={gaTrackingId}
+              />
               <ClientSsrBridge key="ssr-bridge" lang={lang} prefix={prefix} />
             </Suspense>
           </ClientWrapper>
@@ -77,7 +101,14 @@ const ServerFontFace = ({ fonts }: { fonts: ReactFont[] }) => {
   return (
     <>
       {preloads.map((preload) => (
-        <link key={preload.href} rel="preload" href={preload.href} as="font" type={preload.type} crossOrigin="" />
+        <link
+          key={preload.href}
+          rel="preload"
+          href={preload.href}
+          as="font"
+          type={preload.type}
+          crossOrigin=""
+        />
       ))}
       {css ? (
         
@@ -114,14 +145,23 @@ const SSRWrapper = ({
     {head ? <Fragment key="head">{head}</Fragment> : null}
     <div key="frame-root" id="frameRoot" className={className}>
       <ClientPathWrapper layoutStyle={layoutStyle} prefix={prefix}>
-        <div key="top-safe-area" id="topSafeArea" className={clsx("fixed inset-x-0 top-0 bg-base-100")} />
-        <div key="page-containers" id="pageContainers" className={clsx("isolate")}>
+        <div
+          key="top-safe-area"
+          id="topSafeArea"
+          className={clsx("fixed inset-x-0 top-0 bg-base-100")}
+        />
+        <div
+          key="page-containers"
+          id="pageContainers"
+          className={clsx("isolate")}
+        >
           <div id="pageContainer">
             <div
               id="pageContent"
               className={clsx("relative isolate", {
                 "w-full": layoutStyle === "web",
-                "left-1/2 h-screen w-[600px] -translate-x-1/2": layoutStyle === "mobile",
+                "left-1/2 h-screen w-[600px] -translate-x-1/2":
+                  layoutStyle === "mobile",
               })}
             >
               {Children.toArray(children)}
@@ -136,7 +176,10 @@ const SSRWrapper = ({
             "w-full": layoutStyle === "web",
           })}
         >
-          <div id="topInsetContent" className={clsx("relative isolate size-full")} />
+          <div
+            id="topInsetContent"
+            className={clsx("relative isolate size-full")}
+          />
         </div>
         <div
           key="top-left-action"
@@ -153,7 +196,11 @@ const SSRWrapper = ({
         >
           <div id="bottomInsetContent" className="isolate size-full" />
         </div>
-        <div key="bottom-safe-area" id="bottomSafeArea" className="fixed inset-x-0 bg-base-100" />
+        <div
+          key="bottom-safe-area"
+          id="bottomSafeArea"
+          className="fixed inset-x-0 bg-base-100"
+        />
       </ClientPathWrapper>
     </div>
   </>

package/webkit/bootCsr.tsx

@@ -6,6 +6,7 @@ import {
   Device,
   defaultPageState,
   initAuth,
+  type LayoutModule,
   type PageConfig,
   type PageState,
   type PathRoute,
@@ -151,7 +152,15 @@ export const bootCsr = async (context: Record<string, () => Promise<RouteModule>
     if (!targetPath) continue;
     const page = pages[filePath];
     if (!page) continue;
-    const routeRender: RouteRender = { render: page.default as never, Loading: page.Loading as never };
+    const layoutPage = parsed.kind === "layout" ? (page as LayoutModule) : null;
+    const routeRender: RouteRender = {
+      render: page.default as never,
+      Loading: page.Loading as never,
+      NotFound: layoutPage?.NotFound,
+      Error: layoutPage?.Error,
+      resolveNotFound: layoutPage ? () => layoutPage.NotFound : undefined,
+      resolveError: layoutPage ? () => layoutPage.Error : undefined,
+    };
     targetRouteMap.set(targetPath, {
 
       ...(targetRouteMap.get(targetPath) ?? { path: targetPath, children: new Map<string, Route>() }),
@@ -265,8 +274,10 @@ function validateRouteModuleExports(key: string, mod: RouteModule) {
             "layoutStyle",
             "gaTrackingId",
             "Loading",
+            "NotFound",
+            "Error",
           ])
-        : new Set(["default", "head", "generateHead", "Loading"]);
+        : new Set(["default", "head", "generateHead", "Loading", "NotFound", "Error"]);
   for (const exportName of Object.keys(mod)) {
     if (!allowed.has(exportName)) {
       throw new Error(`[route-convention] unsupported export "${exportName}" in ${key}`);