akanjs 2.2.4-rc.2 → 2.2.4-rc.3

package/fetch/client/fetchClient.ts

@@ -1,11 +1,5 @@
 import { DataList, getEnv, PrimitiveRegistry, type PromiseOrObject } from "akanjs/base";
-import {
-  capitalize,
-  type FetchPolicy,
-  fileUploadContract,
-  Logger,
-  resolveFileUploadCapability,
-} from "akanjs/common";
+import { capitalize, type FetchPolicy, fileUploadContract, Logger, resolveFileUploadCapability } from "akanjs/common";
 import { type BaseInsight, type BaseObject, ConstantRegistry, deserialize, serialize } from "akanjs/constant";
 import type {
   DatabaseSignal,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "2.2.4-rc.2",
+  "version": "2.2.4-rc.3",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {
@@ -175,7 +175,6 @@
     "@capgo/capacitor-updater": "^8.46.1",
     "@libsql/client": "^0.17.3",
     "@playwright/test": "^1.60.0",
-    "@radix-ui/react-dialog": "^1.1.15",
     "@react-spring/web": "^10.1.0",
     "@use-gesture/react": "^10.3.1",
     "bullmq": "^5.76.10",
@@ -250,9 +249,6 @@
     "@playwright/test": {
       "optional": true
     },
-    "@radix-ui/react-dialog": {
-      "optional": true
-    },
     "@react-spring/web": {
       "optional": true
     },

package/service/injectInfo.ts

@@ -254,20 +254,47 @@ export class InjectInfo<
         enumerable: true,
       });
     } else if (injectInfo.isMap) {
+      const topic = `akan:memory:${injectInfo.parentRefName}`;
+      const getter = injectInfo.get as unknown as (value: unknown) => unknown;
+      const setter = injectInfo.set as unknown as (value: unknown) => string | number | Buffer;
+      const get = async (key: string) => {
+        const value = await cacheAdaptor.hget(topic, propKey, key);
+        return value === undefined || value === null ? undefined : getter(value);
+      };
+      const set = async (key: string, value: unknown) => {
+        const setValue = setter(value);
+        await cacheAdaptor.hset(topic, propKey, key, setValue);
+      };
       Object.defineProperty(instance, propKey, {
         value: {
-          get: async (key: string) => {
-            const getter = injectInfo.get as unknown as (value: unknown) => unknown;
-            const value = await cacheAdaptor.hget(`akan:memory:${injectInfo.parentRefName}`, propKey, key);
-            return value === null ? undefined : getter(value);
+          get,
+          set,
+          delete: async (key: string) => {
+            await cacheAdaptor.hdelete(topic, propKey, key);
           },
-          set: async (key: string, value: unknown) => {
-            const setter = injectInfo.set as unknown as (value: unknown) => string | number | Buffer;
-            const setValue = setter(value);
-            await cacheAdaptor.hset(`akan:memory:${injectInfo.parentRefName}`, propKey, key, setValue);
+          getOrInsert: async (key: string, value: unknown) => {
+            const existingValue = await get(key);
+            if (existingValue !== undefined) return existingValue;
+            await set(key, value);
+            return value;
           },
-          delete: async (key: string) => {
-            await cacheAdaptor.hdelete(`akan:memory:${injectInfo.parentRefName}`, propKey, key);
+          getOrInsertComputed: async (key: string, compute: (key: string) => unknown | Promise<unknown>) => {
+            const existingValue = await get(key);
+            if (existingValue !== undefined) return existingValue;
+            const value = await compute(key);
+            await set(key, value);
+            return value;
+          },
+          keys: async () => await cacheAdaptor.hkeys(topic, propKey),
+          entries: async () => {
+            const entries = await cacheAdaptor.hentries(topic, propKey);
+            return entries.map(([key, value]) => [key, getter(value)]);
+          },
+          forEach: async (callback: (value: unknown, key: string) => void | Promise<void>) => {
+            for (const [key, value] of await cacheAdaptor.hentries(topic, propKey)) await callback(getter(value), key);
+          },
+          clear: async () => {
+            await cacheAdaptor.hclear(topic, propKey);
           },
         },
       });
@@ -360,6 +387,15 @@ export const injectionBuilder = (parentRefName: string) => ({
               get: (key: string) => Promise<MapFieldValue | undefined>;
               set: (key: string, value: MapFieldValue) => Promise<void>;
               delete: (key: string) => Promise<void>;
+              getOrInsert: (key: string, value: MapFieldValue) => Promise<MapFieldValue>;
+              getOrInsertComputed: (
+                key: string,
+                compute: (key: string) => MapFieldValue | Promise<MapFieldValue>,
+              ) => Promise<MapFieldValue>;
+              keys: () => Promise<string[]>;
+              entries: () => Promise<[string, MapFieldValue][]>;
+              forEach: (callback: (value: MapFieldValue, key: string) => void | Promise<void>) => Promise<void>;
+              clear: () => Promise<void>;
             }
           : { get: () => Promise<UseValue>; set: (value: UseValue) => Promise<void>; delete: () => Promise<void> },
       never,

package/service/predefinedAdaptor/cache.adaptor.ts

@@ -16,6 +16,9 @@ export interface CacheAdaptor {
   ): Promise<void>;
   hget<T extends string | number | Buffer>(topic: string, key: string, subKey: string): Promise<T | undefined>;
   hdelete(topic: string, key: string, subKey: string): Promise<void>;
+  hkeys(topic: string, key: string): Promise<string[]>;
+  hentries<T extends string | number | Buffer>(topic: string, key: string): Promise<[string, T][]>;
+  hclear(topic: string, key: string): Promise<void>;
 }
 
 interface RedisEnv extends BaseEnv {
@@ -96,6 +99,16 @@ export class RedisCache
   async hdelete(topic: string, key: string, subKey: string): Promise<void> {
     await this.redis.hdel(`${topic}:${key}`, subKey);
   }
+  async hkeys(topic: string, key: string): Promise<string[]> {
+    return await this.redis.hkeys(`${topic}:${key}`);
+  }
+  async hentries<T extends string | number | Buffer>(topic: string, key: string): Promise<[string, T][]> {
+    const values = await this.redis.hgetall(`${topic}:${key}`);
+    return Object.entries(values) as [string, T][];
+  }
+  async hclear(topic: string, key: string): Promise<void> {
+    await this.redis.del(`${topic}:${key}`);
+  }
   getClient(): Redis {
     return this.redis;
   }

package/service/predefinedAdaptor/solidCache.adaptor.ts

@@ -14,6 +14,7 @@ import {
 } from "./solidSqlite";
 
 type CacheRow = { value: string | Buffer | null; valueType: SolidValueType; expiresAt: number | null };
+type CacheEntryRow = CacheRow & { subKey: string };
 
 export class SolidCache
   extends adapt("solidCache", ({ env }) => ({
@@ -135,6 +136,28 @@ export class SolidCache
       .run(topic, key, subKey);
   }
 
+  async hkeys(topic: string, key: string): Promise<string[]> {
+    this.#cleanup();
+    const rows = this.#db
+      .query(`SELECT "subKey" FROM "_akan_solid_cache_hash" WHERE "topic" = ? AND "key" = ? ORDER BY "subKey" ASC`)
+      .all(topic, key) as { subKey: string }[];
+    return rows.map((row) => row.subKey);
+  }
+
+  async hentries<T extends string | number | Buffer>(topic: string, key: string): Promise<[string, T][]> {
+    this.#cleanup();
+    const rows = this.#db
+      .query(
+        `SELECT "subKey", "value", "valueType", "expiresAt" FROM "_akan_solid_cache_hash" WHERE "topic" = ? AND "key" = ? ORDER BY "subKey" ASC`,
+      )
+      .all(topic, key) as CacheEntryRow[];
+    return rows.map((row) => [row.subKey, decodeSolidValue<T>(row.valueType, row.value) as T]);
+  }
+
+  async hclear(topic: string, key: string): Promise<void> {
+    this.#db.query(`DELETE FROM "_akan_solid_cache_hash" WHERE "topic" = ? AND "key" = ?`).run(topic, key);
+  }
+
   #cleanup() {
     const now = Date.now();
     this.#db.query(`DELETE FROM "_akan_solid_cache" WHERE "expiresAt" IS NOT NULL AND "expiresAt" <= ?`).run(now);

package/types/service/injectInfo.d.ts

@@ -79,6 +79,12 @@ export declare const injectionBuilder: (parentRefName: string) => {
         get: (key: string) => Promise<(never extends GetFn ? FieldToValue<MapValue> : ReturnType<GetFn>) | undefined>;
         set: (key: string, value: never extends GetFn ? FieldToValue<MapValue> : ReturnType<GetFn>) => Promise<void>;
         delete: (key: string) => Promise<void>;
+        getOrInsert: (key: string, value: never extends GetFn ? FieldToValue<MapValue> : ReturnType<GetFn>) => Promise<never extends GetFn ? FieldToValue<MapValue> : ReturnType<GetFn>>;
+        getOrInsertComputed: (key: string, compute: (key: string) => (never extends GetFn ? FieldToValue<MapValue> : ReturnType<GetFn>) | Promise<never extends GetFn ? FieldToValue<MapValue> : ReturnType<GetFn>>) => Promise<never extends GetFn ? FieldToValue<MapValue> : ReturnType<GetFn>>;
+        keys: () => Promise<string[]>;
+        entries: () => Promise<[string, never extends GetFn ? FieldToValue<MapValue> : ReturnType<GetFn>][]>;
+        forEach: (callback: (value: never extends GetFn ? FieldToValue<MapValue> : ReturnType<GetFn>, key: string) => void | Promise<void>) => Promise<void>;
+        clear: () => Promise<void>;
     } : {
         get: () => Promise<(DefaultValue extends never ? true : false) extends true ? (never extends GetFn ? GetFieldValue<ValueRef, ExplicitType, MapValue> : ReturnType<GetFn>) | null : never extends GetFn ? GetFieldValue<ValueRef, ExplicitType, MapValue> : ReturnType<GetFn>>;
         set: (value: (DefaultValue extends never ? true : false) extends true ? (never extends GetFn ? GetFieldValue<ValueRef, ExplicitType, MapValue> : ReturnType<GetFn>) | null : never extends GetFn ? GetFieldValue<ValueRef, ExplicitType, MapValue> : ReturnType<GetFn>) => Promise<void>;

package/types/service/predefinedAdaptor/cache.adaptor.d.ts

@@ -12,6 +12,9 @@ export interface CacheAdaptor {
     }): Promise<void>;
     hget<T extends string | number | Buffer>(topic: string, key: string, subKey: string): Promise<T | undefined>;
     hdelete(topic: string, key: string, subKey: string): Promise<void>;
+    hkeys(topic: string, key: string): Promise<string[]>;
+    hentries<T extends string | number | Buffer>(topic: string, key: string): Promise<[string, T][]>;
+    hclear(topic: string, key: string): Promise<void>;
 }
 interface RedisEnv extends BaseEnv {
     redis?: {
@@ -34,6 +37,9 @@ export declare class RedisCache extends RedisCache_base implements CacheAdaptor
     }): Promise<void>;
     hget<T extends string | number | Buffer>(topic: string, key: string, subKey: string): Promise<T | undefined>;
     hdelete(topic: string, key: string, subKey: string): Promise<void>;
+    hkeys(topic: string, key: string): Promise<string[]>;
+    hentries<T extends string | number | Buffer>(topic: string, key: string): Promise<[string, T][]>;
+    hclear(topic: string, key: string): Promise<void>;
     getClient(): Redis;
     onDestroy(): Promise<void>;
 }

package/types/service/predefinedAdaptor/solidCache.adaptor.d.ts

@@ -18,5 +18,8 @@ export declare class SolidCache extends SolidCache_base implements CacheAdaptor
     }): Promise<void>;
     hget<T extends string | number | Buffer>(topic: string, key: string, subKey: string): Promise<T | undefined>;
     hdelete(topic: string, key: string, subKey: string): Promise<void>;
+    hkeys(topic: string, key: string): Promise<string[]>;
+    hentries<T extends string | number | Buffer>(topic: string, key: string): Promise<[string, T][]>;
+    hclear(topic: string, key: string): Promise<void>;
 }
 export {};

package/types/ui/Dialog/Modal.d.ts

@@ -6,4 +6,4 @@ export interface ModalProps {
     children?: ReactNode;
     onCancel?: () => void;
 }
-export declare const Modal: ({ className, bodyClassName, confirmClose, children, onCancel }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ className, bodyClassName, confirmClose, children, onCancel }: ModalProps) => import("react").ReactPortal | null;

package/types/ui/Dialog/index.d.ts

@@ -1,7 +1,7 @@
 import { type ProviderProps } from "./Provider.d.ts";
 export declare const Dialog: {
     ({ children, ...props }: ProviderProps): import("react/jsx-runtime").JSX.Element;
-    Modal: ({ className, bodyClassName, confirmClose, children, onCancel }: import("./Modal.d.ts").ModalProps) => import("react/jsx-runtime").JSX.Element;
+    Modal: ({ className, bodyClassName, confirmClose, children, onCancel }: import("./Modal.d.ts").ModalProps) => import("react").ReactPortal | null;
     Title: ({ children }: import("./Title.d.ts").TitleProps) => null;
     Action: ({ children }: import("./Action.d.ts").ActionProps) => null;
     Trigger: ({ className, children }: import("./Trigger.d.ts").TriggerProps) => import("react/jsx-runtime").JSX.Element;

package/types/ui/Modal.d.ts

@@ -16,15 +16,4 @@ export interface ModalProps {
     /** Ask for close confirmation before dismissing. */
     confirmClose?: boolean;
 }
-export declare const Modal: {
-    ({ className, title, action, open, onCancel, bodyClassName, children, confirmClose, }: ModalProps): import("react/jsx-runtime").JSX.Element;
-    Window: ({ open, onCancel, title, children }: WindowProps) => import("react/jsx-runtime").JSX.Element | null;
-};
-interface WindowProps {
-    open: boolean;
-    onCancel: () => void;
-    title: ReactNode;
-    children: ReactNode;
-}
-export declare const Window: ({ open, onCancel, title, children }: WindowProps) => import("react/jsx-runtime").JSX.Element | null;
-export {};
+export declare const Modal: ({ className, title, action, open, onCancel, bodyClassName, children, confirmClose, }: ModalProps) => import("react/jsx-runtime").JSX.Element;

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-base-content/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;