akanjs 2.2.7 → 2.2.9

package/ui/Dialog/Modal.tsx

@@ -1,9 +1,9 @@
 "use client";
-import * as Dialog from "@radix-ui/react-dialog";
 import { useDrag } from "@use-gesture/react";
 import { clsx, usePage } from "akanjs/client";
 import { animated } from "akanjs/ui";
-import { type ReactNode, useContext, useEffect, useRef, useState } from "react";
+import { type ReactNode, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { BiX } from "react-icons/bi";
 import { config, useSpring } from "react-spring";
 
@@ -11,6 +11,8 @@ import { DialogContext } from "./context";
 
 const MODAL_MARGIN = 0; 
 const OPACITY = { START: 0, END: 1 };
+let bodyScrollLockCount = 0;
+let previousBodyOverflow = "";
 
 const interpolate = (o: number, i: number, t: number) => {
   return o + (i - o) * t;
@@ -25,41 +27,80 @@ export interface ModalProps {
 }
 export const Modal = ({ className, bodyClassName, confirmClose, children, onCancel }: ModalProps) => {
   const { open, setOpen, title, action } = useContext(DialogContext);
-  const openRef = useRef<boolean>(open);
   const { l } = usePage();
   const ref = useRef<HTMLDivElement>(null);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const closingRef = useRef(false);
+  const focusedElementRef = useRef<HTMLElement | null>(null);
+  const titleId = useId();
+  const contentId = useId();
   const [{ translate }, api] = useSpring(() => ({ translate: 1 }));
+  const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);
+  const [isMounted, setIsMounted] = useState(open);
   const [showBackground, setShowBackground] = useState(false);
-  const openModal = async ({ canceled }: { canceled?: boolean } = {}) => {
-    setTimeout(() => {
-      setShowBackground(true);
-    }, 100);
-    await Promise.all(api.start({ translate: 0, immediate: false, config: canceled ? config.wobbly : config.stiff }));
-  };
-  const closeModal = async ({ velocity = 0, confirmClose }: { velocity?: number; confirmClose?: boolean }) => {
-    if (confirmClose && !window.confirm(l("base.confirmClose"))) {
-      return;
-    }
-    setTimeout(() => {
-      setShowBackground(false);
-    }, 100);
-    await Promise.all(api.start({ translate: 1, immediate: false, config: { ...config.stiff, velocity } }));
-    setOpen(false);
-    onCancel?.();
-  };
+
+  const openModal = useCallback(
+    async ({ canceled }: { canceled?: boolean } = {}) => {
+      closingRef.current = false;
+      setIsMounted(true);
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = setTimeout(() => {
+        setShowBackground(true);
+      }, 100);
+      await Promise.all(api.start({ translate: 0, immediate: false, config: canceled ? config.wobbly : config.stiff }));
+    },
+    [api],
+  );
+
+  const closeModal = useCallback(
+    async ({
+      velocity = 0,
+      confirmClose,
+      notifyCancel = true,
+    }: {
+      velocity?: number;
+      confirmClose?: boolean;
+      notifyCancel?: boolean;
+    }) => {
+      if (closingRef.current) return;
+      if (confirmClose && !window.confirm(l("base.confirmClose"))) {
+        return;
+      }
+
+      closingRef.current = true;
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = setTimeout(() => {
+        setShowBackground(false);
+      }, 100);
+      await Promise.all(api.start({ translate: 1, immediate: false, config: { ...config.stiff, velocity } }));
+      setIsMounted(false);
+      setOpen(false);
+      if (notifyCancel) onCancel?.();
+      closingRef.current = false;
+    },
+    [api, l, onCancel, setOpen],
+  );
+
+  const requestClose = useCallback(
+    (options?: { velocity?: number }) => {
+      void closeModal({ velocity: options?.velocity, confirmClose });
+    },
+    [closeModal, confirmClose],
+  );
+
   const bind = useDrag(
     ({ last, velocity: [, vy], direction: [, dy], offset: [, oy], movement: [, my], cancel, canceled }) => {
       if (!ref.current) return;
-      const height = (ref.current.clientHeight || MODAL_MARGIN) - MODAL_MARGIN;
+      const height = Math.max((ref.current.clientHeight || MODAL_MARGIN) - MODAL_MARGIN, 1);
       if (my > 70) cancel();
       if (last) {
-        if (my > height * 0.5 || (vy > 0.5 && dy > 0))
-          void closeModal({ velocity: vy / height, confirmClose: confirmClose });
+        if (my > height * 0.5 || (vy > 0.5 && dy > 0)) requestClose({ velocity: vy / height });
         else void openModal({ canceled });
       } else void api.start({ translate: oy / height, immediate: true });
     },
     { from: () => [0, translate.get()], filterTaps: true, bounds: { top: 0 }, rubberband: true },
   );
+
   const opacity = translate.to((t) => {
     return interpolate(OPACITY.END, OPACITY.START, t);
   });
@@ -68,33 +109,104 @@ export const Modal = ({ className, bodyClassName, confirmClose, children, onCanc
   });
 
   useEffect(() => {
-    if (openRef.current === open) return;
-    openRef.current = open;
-    if (open) void openModal();
-    else void closeModal({});
-  }, [open]);
-
-  return (
-    <Dialog.Portal>
-      <Dialog.Overlay
-        onClick={() => {
-          void closeModal({ confirmClose });
+    if (typeof document === "undefined") return;
+    setPortalElement(document.body);
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      void openModal();
+    }
+  }, [open, openModal]);
+
+  useEffect(() => {
+    if (!open && isMounted) {
+      void closeModal({ notifyCancel: false });
+    }
+  }, [closeModal, isMounted, open]);
+
+  useEffect(() => {
+    if (!isMounted || typeof document === "undefined") return;
+
+    bodyScrollLockCount += 1;
+    if (bodyScrollLockCount === 1) {
+      previousBodyOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+    }
+
+    return () => {
+      bodyScrollLockCount -= 1;
+      if (bodyScrollLockCount === 0) {
+        document.body.style.overflow = previousBodyOverflow;
+        previousBodyOverflow = "";
+      }
+    };
+  }, [isMounted]);
+
+  useEffect(() => {
+    if (!isMounted || !portalElement || typeof document === "undefined") return;
+
+    focusedElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    queueMicrotask(() => {
+      ref.current?.focus();
+    });
+
+    return () => {
+      if (focusedElementRef.current && document.contains(focusedElementRef.current)) {
+        focusedElementRef.current.focus();
+      }
+      focusedElementRef.current = null;
+    };
+  }, [isMounted, portalElement]);
+
+  useEffect(() => {
+    if (!isMounted) return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      requestClose();
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isMounted, requestClose]);
+
+  useEffect(() => {
+    return () => {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    };
+  }, []);
+
+  if (!isMounted || !portalElement) return null;
+
+  return createPortal(
+    <>
+      <div
+        className={clsx("fixed inset-0 z-10", showBackground && "animate-fadeIn bg-black/50 backdrop-blur-md")}
+        onClick={(event) => {
+          if (event.target !== event.currentTarget) return;
+          requestClose();
         }}
-      >
-        {showBackground ? (
-          <div className={"fixed inset-0 z-10 bg-base-content/50 backdrop-blur-md data-[state=open]:animate-fadeIn"} />
-        ) : null}
-      </Dialog.Overlay>
-      <Dialog.Content
-        className="fixed top-1/2 left-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center"
-        asChild
-        forceMount
-      >
+      />
+      <div className="fixed top-1/2 left-1/2 z-10 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center">
         <div className="z-10">
-          <animated.div ref={ref} style={{ translateY, opacity }}>
+          <animated.div
+            ref={ref}
+            style={{ translateY, opacity }}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={title ? titleId : undefined}
+            aria-describedby={contentId}
+            tabIndex={-1}
+          >
             <button
+              type="button"
+              aria-label="Close"
               className="btn btn-circle btn-sm absolute top-[-16px] right-0 z-20 md:top-[-40px]"
-              onClick={() => void closeModal({ confirmClose })}
+              onClick={() => requestClose()}
             >
               <BiX className="text-3xl" />
             </button>
@@ -104,34 +216,33 @@ export const Modal = ({ className, bodyClassName, confirmClose, children, onCanc
                 className,
               )}
             >
-              <Dialog.Title asChild>
-                <animated.div
-                  {...bind()}
-                  className="relative z-10 flex w-full animate-fadeIn cursor-pointer touch-pan-y flex-col items-center justify-center px-4 pt-1"
-                >
-                  <div className="flex w-full cursor-pointer items-center justify-center pt-1 opacity-50">
-                    <div className="h-1 w-24 rounded-full bg-gray-500" />
-                  </div>
-                  <div className="flex w-full items-center justify-start">
-                    <div className="w-full text-start font-bold text-lg">{title}</div>
-                  </div>
-                </animated.div>
-              </Dialog.Title>
-              <Dialog.Description asChild>
-                <div
-                  className={clsx(
-                    "scrollbar-none relative m-2 flex size-full min-w-[90vw] overflow-x-hidden overflow-y-scroll border-base-content/30 border-t-[0.1px] p-4 sm:p-4 md:min-w-[384px] md:px-8 lg:min-w-[576px] xl:min-w-[768px]",
-                    bodyClassName,
-                  )}
-                >
-                  {children}
+              <animated.div
+                {...bind()}
+                id={titleId}
+                className="relative z-10 flex w-full animate-fadeIn cursor-pointer touch-pan-y flex-col items-center justify-center px-4 pt-1"
+              >
+                <div className="flex w-full cursor-pointer items-center justify-center pt-1 opacity-50">
+                  <div className="h-1 w-24 rounded-full bg-gray-500" />
+                </div>
+                <div className="flex w-full items-center justify-start">
+                  <div className="w-full text-start font-bold text-lg">{title}</div>
                 </div>
-              </Dialog.Description>
+              </animated.div>
+              <div
+                id={contentId}
+                className={clsx(
+                  "scrollbar-none relative m-2 flex size-full min-w-[90vw] overflow-x-hidden overflow-y-scroll border-base-content/30 border-t-[0.1px] p-4 sm:p-4 md:min-w-[384px] md:px-8 lg:min-w-[576px] xl:min-w-[768px]",
+                  bodyClassName,
+                )}
+              >
+                {children}
+              </div>
               {action ? <div className="w-full">{action}</div> : null}
             </div>
           </animated.div>
         </div>
-      </Dialog.Content>
-    </Dialog.Portal>
+      </div>
+    </>,
+    portalElement,
   );
 };

package/ui/Dialog/Provider.tsx

@@ -1,5 +1,4 @@
 "use client";
-import * as Dialog from "@radix-ui/react-dialog";
 import { clsx } from "akanjs/client";
 import { type ReactNode, useEffect, useState } from "react";
 
@@ -23,11 +22,9 @@ export const Provider = ({ className, defaultOpen = false, open = defaultOpen, c
   }, [open]);
   return (
     <DialogContext.Provider value={{ open: openState, setOpen: setOpenState, title, setTitle, action, setAction }}>
-      <Dialog.Root open={openState}>
-        <div data-open={openState} className={clsx("group/dialog", className)}>
-          {children}
-        </div>
-      </Dialog.Root>
+      <div data-open={openState} className={clsx("group/dialog", className)}>
+        {children}
+      </div>
     </DialogContext.Provider>
   );
 };

package/ui/Modal.tsx

@@ -1,7 +1,5 @@
 "use client";
-import * as RadixDialog from "@radix-ui/react-dialog";
 import type { ReactNode } from "react";
-import { BiX } from "react-icons/bi";
 
 import { Dialog } from "./Dialog";
 
@@ -43,45 +41,3 @@ export const Modal = ({
     </Dialog>
   );
 };
-
-interface WindowProps {
-  open: boolean;
-  onCancel: () => void;
-  title: ReactNode;
-  children: ReactNode;
-}
-
-export const Window = ({ open, onCancel, title, children }: WindowProps) => {
-  if (!open) return null;
-
-  return (
-    <RadixDialog.Root open={open}>
-      <RadixDialog.Portal>
-        <RadixDialog.Overlay className="fixed inset-0 bg-black/40" />
-        <RadixDialog.Content
-          className="fixed top-1/2 left-1/2 z-[2] w-[90%] min-w-auto -translate-x-1/2 -translate-y-1/2 animate-fadeIn rounded-[10px] border-[3px] border-black text-black backdrop-blur-lg md:w-fit"
-          style={{
-            background: `rgba(255, 255, 255, 0.3)`,
-            width: "406px",
-          }}
-        >
-          <RadixDialog.Title className="height-[36px] relative overflow-hidden rounded-t-[6px] border-black border-b-2 bg-white/60 text-center">
-            <div className="m-0 text-[22px]">{title}</div>
-            <RadixDialog.Close
-              onClick={() => {
-                onCancel();
-              }}
-              className="absolute top-0 right-0 flex h-[34px] w-[40px] cursor-pointer items-center justify-center border-black border-l-2"
-            >
-              <BiX className="text-[32px]" />
-            </RadixDialog.Close>
-          </RadixDialog.Title>
-          <RadixDialog.Description className="overflow-y-hidden rounded-b-[10px] p-2">
-            {children}
-          </RadixDialog.Description>
-        </RadixDialog.Content>
-      </RadixDialog.Portal>
-    </RadixDialog.Root>
-  );
-};
-Modal.Window = Window;

package/ui/System/CSR.tsx

@@ -45,6 +45,7 @@ const CSRProvider = ({
   fonts,
   layoutStyle = "web",
   reconnect = getEnv().operationMode === "local",
+  wsConnect = true,
   of,
 }: CSRProviderProps) => {
   return (
@@ -72,7 +73,14 @@ const CSRProvider = ({
           </Client.Wrapper>
           <Client.Inner />
           <CSRInner />
-          <Client.Bridge lang={lang} env={env} theme={theme} prefix={prefix} gaTrackingId={gaTrackingId} />
+          <Client.Bridge
+            lang={lang}
+            env={env}
+            theme={theme}
+            prefix={prefix}
+            gaTrackingId={gaTrackingId}
+            wsConnect={wsConnect}
+          />
           <CSRBridge lang={lang} prefix={prefix} />
         </>
       )}

package/ui/System/Client.tsx

@@ -5,6 +5,7 @@ import {
   clsx,
   Device,
   defaultPageState,
+  fetch,
   getPathInfo,
   initAuth,
   type Location,
@@ -55,8 +56,10 @@ export const ClientWrapper = ({
   reconnect = true,
 }: ClientWrapperProps) => {
 
-  if (dictionary) Translator.seed(lang, dictionary);
-  if (getEnv().renderMode === "ssr") {
+  if (dictionary) {
+    Translator.seed(lang, dictionary);
+
+    if (typeof window !== "undefined") Translator.setActiveLocale(lang);
   }
   useLayoutEffect(() => {
     Logger.rawLog(logo);
@@ -71,8 +74,7 @@ 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";
@@ -93,18 +95,12 @@ 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 ?? {
@@ -137,9 +133,7 @@ export const ClientPathWrapper = ({
       }}
     >
       <animated.div
-        {...(bind && pathRoute.pageState.gesture && gestureEnabled
-          ? bind()
-          : {})}
+        {...(bind && pathRoute.pageState.gesture && gestureEnabled ? bind() : {})}
         className={clsx("group/path", className)}
         ref={wrapperRef}
         {...props}
@@ -159,15 +153,10 @@ interface ClientBridgeProps {
   theme?: AkanTheme;
   prefix?: string;
   gaTrackingId?: string;
+  wsConnect?: boolean;
 }
 
-export const ClientBridge = ({
-  env,
-  lang,
-  theme,
-  prefix,
-  gaTrackingId,
-}: ClientBridgeProps) => {
+export const ClientBridge = ({ env, lang, theme, prefix, gaTrackingId, wsConnect = true }: ClientBridgeProps) => {
   const uiOperation = st.use.uiOperation();
   const pathname = st.use.pathname();
   const params = st.use.params();
@@ -187,6 +176,11 @@ export const ClientBridge = ({
     }, 2000);
   }, []);
 
+  useEffect(() => {
+    if (!wsConnect) return;
+    (fetch.instance as { connect: () => void }).connect();
+  }, [wsConnect]);
+
   useEffect(() => {
     if (getThemeCookie() !== undefined) return;
     applyThemePolicy(theme ?? "system");
@@ -234,26 +228,18 @@ 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;
 }
@@ -273,10 +259,7 @@ 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 = (
@@ -290,19 +273,13 @@ export const ClientSsrBridge = ({
         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 });
     };
@@ -314,17 +291,11 @@ export const ClientSsrBridge = ({
       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();
@@ -346,14 +317,8 @@ export const ClientSsrBridge = ({
     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;
+  /** Connect the client WebSocket runtime after the browser loads. */
+  wsConnect?: boolean;
   /** Active-locale dictionary injected by the server (SSR only) to seed the client Translator. */
   dictionary?: Record<string, Record<string, unknown>>;
   /**

package/ui/System/SSR.tsx

@@ -29,6 +29,7 @@ const SSRProvider = ({
   fonts,
   layoutStyle = "web",
   reconnect = getEnv().operationMode === "local",
+  wsConnect = true,
   dictionary,
   allDictionary,
   of,
@@ -65,7 +66,14 @@ const SSRProvider = ({
               <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}
+                wsConnect={wsConnect}
+              />
               <ClientSsrBridge key="ssr-bridge" lang={lang} prefix={prefix} />
             </Suspense>
           </ClientWrapper>

package/webkit/bootCsr.tsx

@@ -293,6 +293,7 @@ function validateRouteModuleExports(key: string, mod: RouteModule) {
             "manifest",
             "theme",
             "reconnect",
+            "wsConnect",
             "layoutStyle",
             "gaTrackingId",
             "Loading",