akanjs 3.0.2 → 3.1.0-rc.0

package/ui/Dialog/LegacyModal.tsx

@@ -1,14 +1,14 @@
 "use client";
 import { useDrag } from "@use-gesture/react";
 import { cn, usePage } from "akanjs/client";
-import { animated } from "akanjs/ui";
 import { useBodyScrollLock, useEscapeKey } from "akanjs/webkit";
 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";
+import { animated } from "../animated";
 import { buttonRecipe } from "../Button";
-import { useOverlayLayerProps } from "../overlayLayer";
+import { OverlayPortalProvider, overlayZ, useOverlayLayerProps, useOverlayPortal } from "../overlayLayer";
 
 import { DialogContext } from "./Provider";
 
@@ -38,7 +38,8 @@ export const LegacyModal = ({ className, bodyClassName, confirmClose, children,
   const contentId = useId();
   const overlayLayerProps = useOverlayLayerProps();
   const [{ translate }, api] = useSpring(() => ({ translate: 1 }));
-  const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);
+  const portalElement = useOverlayPortal();
+  const [root, setRoot] = useState<HTMLDivElement | null>(null);
   const [isMounted, setIsMounted] = useState(open);
   const [showBackground, setShowBackground] = useState(false);
 
@@ -111,11 +112,6 @@ export const LegacyModal = ({ className, bodyClassName, confirmClose, children,
     return `${t * 100}%`;
   });
 
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-    setPortalElement(document.body);
-  }, []);
-
   useEffect(() => {
     if (open) {
       void openModal();
@@ -171,65 +167,70 @@ export const LegacyModal = ({ className, bodyClassName, confirmClose, children,
     <>
       <div
         {...overlayLayerProps}
-        className={cn("fixed inset-0 z-10", showBackground && "animate-fadeIn bg-black/50 backdrop-blur-sm")}
+        className={cn("fixed inset-0", showBackground && "animate-fadeIn bg-black/50 backdrop-blur-sm")}
+        style={{ zIndex: overlayZ.modal }}
       />
       <div
         {...overlayLayerProps}
-        className="fixed inset-0 z-10 flex items-center justify-center p-4"
+        ref={setRoot}
+        className="fixed inset-0 flex items-center justify-center p-4"
+        style={{ zIndex: overlayZ.modal }}
         onClick={(event) => {
           if (event.target !== event.currentTarget) return;
           requestClose();
         }}
       >
-        <animated.div
-          ref={ref}
-          style={{ translateY, opacity }}
-          
-          className={cn(
-            "relative flex max-h-full w-full max-w-2xl flex-col overflow-hidden rounded-box border border-border bg-card text-card-foreground shadow-2xl shadow-black/25 outline-none",
-            className,
-          )}
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby={title ? titleId : undefined}
-          aria-describedby={contentId}
-          tabIndex={-1}
-        >
+        <OverlayPortalProvider value={root}>
           <animated.div
-            {...bind()}
+            ref={ref}
+            style={{ translateY, opacity }}
+            
             className={cn(
-              "flex shrink-0 touch-pan-y flex-col",
-              title && "border-border/70 border-b bg-card/80 backdrop-blur-sm",
+              "relative flex max-h-full w-full max-w-2xl flex-col overflow-hidden rounded-box border border-border bg-card text-card-foreground shadow-2xl shadow-black/25 outline-none",
+              className,
             )}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={title ? titleId : undefined}
+            aria-describedby={contentId}
+            tabIndex={-1}
           >
-            <div className="flex justify-center pt-2 md:hidden">
-              <div className="h-1 w-10 rounded-full bg-foreground/15" />
-            </div>
-            <div className="flex items-start gap-3 px-5 pt-4 pb-3">
-              <div className="min-w-0 flex-1 font-semibold text-lg leading-snug" id={titleId}>
-                {title}
+            <animated.div
+              {...bind()}
+              className={cn(
+                "flex shrink-0 touch-pan-y flex-col",
+                title && "border-border/70 border-b bg-card/80 backdrop-blur-sm",
+              )}
+            >
+              <div className="flex justify-center pt-2 md:hidden">
+                <div className="h-1 w-10 rounded-full bg-foreground/15" />
+              </div>
+              <div className="flex items-start gap-3 px-5 pt-4 pb-3">
+                <div className="min-w-0 flex-1 font-semibold text-lg leading-snug" id={titleId}>
+                  {title}
+                </div>
+                <button
+                  aria-label="Close"
+                  className={buttonRecipe(
+                    { variant: "ghost", size: "icon" },
+                    "-mt-1 -mr-2 size-8 shrink-0 rounded-full text-foreground/45 hover:text-foreground",
+                  )}
+                  onClick={() => requestClose()}
+                  type="button"
+                >
+                  <BiX className="text-2xl" />
+                </button>
               </div>
-              <button
-                aria-label="Close"
-                className={buttonRecipe(
-                  { variant: "ghost", size: "icon" },
-                  "-mt-1 -mr-2 size-8 shrink-0 rounded-full text-foreground/45 hover:text-foreground",
-                )}
-                onClick={() => requestClose()}
-                type="button"
-              >
-                <BiX className="text-2xl" />
-              </button>
+            </animated.div>
+            <div
+              className={cn("min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-5 pt-4 pb-5", bodyClassName)}
+              id={contentId}
+            >
+              {children}
             </div>
+            {action ? <div className="shrink-0 border-border/70 border-t bg-muted/30 px-5 py-4">{action}</div> : null}
           </animated.div>
-          <div
-            className={cn("min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-5 pt-4 pb-5", bodyClassName)}
-            id={contentId}
-          >
-            {children}
-          </div>
-          {action ? <div className="shrink-0 border-border/70 border-t bg-muted/30 px-5 py-4">{action}</div> : null}
-        </animated.div>
+        </OverlayPortalProvider>
       </div>
     </>,
     portalElement,

package/ui/Dialog/Modal.tsx

@@ -1,14 +1,18 @@
 "use client";
+import { useDrag } from "@use-gesture/react";
 import { cn, usePage } from "akanjs/client";
 import { useBodyScrollLock, useEscapeKey } from "akanjs/webkit";
 import { type ReactNode, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { BiX } from "react-icons/bi";
 import { buttonRecipe } from "../Button";
-import { useOverlayLayerProps } from "../overlayLayer";
+import { OverlayPortalProvider, overlayZ, useOverlayLayerProps, useOverlayPortal } from "../overlayLayer";
 
+import { isSheetNow, type ModalPlacement, type ModalPresentation, modalSurfaceOf } from "./modalSurface";
 import { DialogContext } from "./Provider";
 
+const DISMISS_DRAG_PX = 120;
+
 export interface ModalProps {
   className?: string;
   bodyClassName?: string;
@@ -17,8 +21,21 @@ export interface ModalProps {
   closeButton?: ReactNode | false;
   children?: ReactNode;
   onCancel?: () => void;
+  /** `auto` is a full-screen sheet below `md`, which a drag down on its handle or title dismisses. */
+  presentation?: ModalPresentation;
+  /** `right` is a full-height side sheet from `md` up. */
+  placement?: ModalPlacement;
 }
-export const Modal = ({ className, bodyClassName, confirmClose, closeButton, children, onCancel }: ModalProps) => {
+export const Modal = ({
+  className,
+  bodyClassName,
+  confirmClose,
+  closeButton,
+  children,
+  onCancel,
+  presentation = "dialog",
+  placement = "center",
+}: ModalProps) => {
   const { open, setOpen, registerDismiss, title, action } = useContext(DialogContext);
   const { l } = usePage();
   const ref = useRef<HTMLDivElement>(null);
@@ -26,8 +43,10 @@ export const Modal = ({ className, bodyClassName, confirmClose, closeButton, chi
   const titleId = useId();
   const contentId = useId();
   const overlayLayerProps = useOverlayLayerProps();
-  
-  const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);
+  const portalElement = useOverlayPortal();
+  const [root, setRoot] = useState<HTMLDivElement | null>(null);
+  const [dragY, setDragY] = useState(0);
+  const surface = modalSurfaceOf(presentation, placement);
 
   const requestClose = useCallback(() => {
     if (confirmClose && !window.confirm(l("base.confirmClose"))) return;
@@ -35,10 +54,19 @@ export const Modal = ({ className, bodyClassName, confirmClose, closeButton, chi
     onCancel?.();
   }, [confirmClose, l, onCancel, setOpen]);
 
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-    setPortalElement(document.body);
-  }, []);
+  const bindDismissDrag = useDrag(
+    ({ down, movement: [, my], velocity: [, vy], direction: [, dy] }) => {
+      if (!isSheetNow(presentation, placement)) return;
+      if (down) {
+        setDragY(Math.max(0, my));
+        return;
+      }
+      setDragY(0);
+      if (my > DISMISS_DRAG_PX || (vy > 0.5 && dy > 0)) requestClose();
+    },
+    { axis: "y", filterTaps: true },
+  );
+  const dragProps = presentation === "dialog" ? {} : bindDismissDrag();
 
   useBodyScrollLock(open);
   useEscapeKey(open, requestClose);
@@ -69,55 +97,71 @@ export const Modal = ({ className, bodyClassName, confirmClose, closeButton, chi
   return createPortal(
     <div
       {...overlayLayerProps}
-      className="fixed inset-0 z-10 flex items-center justify-center bg-black/40 p-4"
+      ref={setRoot}
+      className={cn("fixed inset-0 flex bg-black/40", surface.root)}
+      style={{ zIndex: overlayZ.modal }}
       onClick={(event) => {
         if (event.target !== event.currentTarget) return;
         requestClose();
       }}
     >
-      <div
-        ref={ref}
-        
-        className={cn(
-          "relative flex max-h-full w-full max-w-2xl flex-col overflow-hidden rounded-box border border-border bg-card text-card-foreground shadow-lg outline-none",
-          className,
-        )}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={title ? titleId : undefined}
-        aria-describedby={contentId}
-        tabIndex={-1}
-      >
-        {/* The dismissal is on the slot, not on the button inside it, so a replacement needs no wiring — a
+      <OverlayPortalProvider value={root}>
+        <div
+          ref={ref}
+          
+          className={cn(
+            "relative flex w-full flex-col overflow-hidden bg-card text-card-foreground shadow-lg outline-none",
+            surface.panel,
+            dragY === 0 && "transition-transform",
+            className,
+          )}
+          style={dragY ? { transform: `translateY(${dragY}px)` } : undefined}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={title ? titleId : undefined}
+          aria-describedby={contentId}
+          tabIndex={-1}
+        >
+          {/* The dismissal is on the slot, not on the button inside it, so a replacement needs no wiring — a
             click on whatever the caller put here bubbles to exactly one handler. */}
-        {closeButton === false ? null : (
-          <div className="absolute top-3 right-3 z-10" onClick={() => requestClose()}>
-            {closeButton ?? (
-              <button
-                aria-label="Close"
-                className={buttonRecipe({ variant: "ghost", size: "icon" }, "size-8")}
-                type="button"
-              >
-                <BiX className="text-xl" />
-              </button>
-            )}
-          </div>
-        )}
-        {title ? (
-          <div
-            className="shrink-0 border-border border-b py-3.5 pr-14 pl-5 font-semibold text-base leading-snug"
-            id={titleId}
-          >
-            {title}
+          {closeButton === false ? null : (
+            <div className={cn("absolute right-3 z-10", surface.close)} onClick={() => requestClose()}>
+              {closeButton ?? (
+                <button
+                  aria-label="Close"
+                  className={buttonRecipe({ variant: "ghost", size: "icon" }, "size-8")}
+                  type="button"
+                >
+                  <BiX className="text-xl" />
+                </button>
+              )}
+            </div>
+          )}
+          {presentation === "dialog" ? null : (
+            <div {...dragProps} className={cn("shrink-0 touch-none justify-center pt-2", surface.handle)}>
+              <div className="h-1 w-10 rounded-full bg-foreground/15" />
+            </div>
+          )}
+          {title ? (
+            <div
+              {...dragProps}
+              className={cn(
+                "shrink-0 border-border border-b py-3.5 pr-14 pl-5 font-semibold text-base leading-snug",
+                presentation !== "dialog" && "touch-none",
+              )}
+              id={titleId}
+            >
+              {title}
+            </div>
+          ) : null}
+          <div className={cn("min-h-0 flex-1 overflow-y-auto px-5 py-4", bodyClassName)} id={contentId}>
+            {children}
           </div>
-        ) : null}
-        <div className={cn("min-h-0 flex-1 overflow-y-auto px-5 py-4", bodyClassName)} id={contentId}>
-          {children}
+          {action ? (
+            <div className="flex shrink-0 justify-end gap-2 border-border border-t px-5 py-3">{action}</div>
+          ) : null}
         </div>
-        {action ? (
-          <div className="flex shrink-0 justify-end gap-2 border-border border-t px-5 py-3">{action}</div>
-        ) : null}
-      </div>
+      </OverlayPortalProvider>
     </div>,
     portalElement,
   );

package/ui/Dialog/modalSurface.ts

@@ -0,0 +1,61 @@
+/** How the modal shows on a phone: a centred dialog, a full-screen sheet, or a sheet below `md` and a dialog above. */
+export type ModalPresentation = "dialog" | "sheet" | "auto";
+/** Where the modal sits from `md` up: centred, or a full-height sheet on the right edge. */
+export type ModalPlacement = "center" | "right";
+
+interface SurfaceClassNames {
+  root: string;
+  panel: string;
+  close: string;
+  handle: string;
+}
+
+const presentationClassNames: { [presentation in ModalPresentation]: SurfaceClassNames } = {
+  dialog: {
+    root: "items-center justify-center p-4",
+    panel: "max-h-full max-w-2xl rounded-box border border-border",
+    close: "top-3",
+    handle: "hidden",
+  },
+  sheet: {
+    root: "items-stretch justify-stretch p-0",
+    panel:
+      "h-full max-h-full max-w-none rounded-none border-0 pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]",
+    close: "top-[calc(env(safe-area-inset-top)+0.75rem)]",
+    handle: "flex",
+  },
+  auto: {
+    root: "items-stretch p-0 md:items-center md:justify-center md:p-4",
+    panel:
+      "h-full max-h-full rounded-none border-0 pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] md:h-auto md:max-w-2xl md:rounded-box md:border md:border-border md:pt-0 md:pb-0",
+    close: "top-[calc(env(safe-area-inset-top)+0.75rem)] md:top-3",
+    handle: "flex md:hidden",
+  },
+} as const;
+
+const placementClassNames: { [placement in ModalPlacement]: Pick<SurfaceClassNames, "root" | "panel"> } = {
+  center: { root: "", panel: "" },
+  right: {
+    root: "md:items-stretch md:justify-end md:p-0",
+    panel: "md:h-full md:max-h-full md:max-w-md md:rounded-none md:border-0 md:border-border md:border-l",
+  },
+} as const;
+
+export const modalSurfaceOf = (presentation: ModalPresentation, placement: ModalPlacement) => {
+  const shape = presentationClassNames[presentation];
+  const side = placementClassNames[placement];
+  return {
+    root: [shape.root, side.root],
+    panel: [shape.panel, side.panel],
+    close: shape.close,
+    handle: shape.handle,
+  };
+};
+
+/** Whether a drag down dismisses: only while the modal is drawn as a sheet at the current width. */
+export const isSheetNow = (presentation: ModalPresentation, placement: ModalPlacement) => {
+  if (presentation === "dialog") return false;
+  const wide = typeof window !== "undefined" && window.matchMedia("(min-width: 48rem)").matches;
+  if (!wide) return true;
+  return presentation === "sheet" && placement === "center";
+};

package/ui/DragAction.tsx

@@ -2,10 +2,10 @@
 import { useGesture } from "@use-gesture/react";
 import type { ReactDOMAttributes } from "@use-gesture/react/dist/declarations/src/types";
 import { cn } from "akanjs/client";
-import { animated } from "akanjs/ui";
 import { type ReactNode, useContext, useRef } from "react";
 import { SpringValue, useSpring } from "react-spring";
 import { sharedContext } from "../client/sharedContext";
+import { animated } from "./animated";
 
 interface DragActionContextType {
   bind: () => ReactDOMAttributes;

package/ui/DraggableList.tsx

@@ -4,12 +4,12 @@ import { useGesture } from "@use-gesture/react";
 import { cn } from "akanjs/client";
 import { clamp } from "akanjs/common";
 import { useFieldTool } from "akanjs/store";
-import { animated } from "akanjs/ui";
 import { type ReactElement, type ReactNode, useContext, useRef } from "react";
 import { BiTrash } from "react-icons/bi";
 import { MdDragIndicator } from "react-icons/md";
 import { sharedContext } from "../client/sharedContext";
 import { agentAttrs } from "./agentAttrs";
+import { animated } from "./animated";
 import { buttonRecipe } from "./Button";
 import { useUiRecipe } from "./UiOverride";
 

package/ui/Dropdown.tsx

@@ -12,6 +12,7 @@ import {
   OverlayOwnerProvider,
   overlayZ,
   useOverlayLayerProps,
+  useOverlayPortal,
   useOverlayScope,
 } from "./overlayLayer";
 import { useOverlayPosition } from "./overlayPosition";
@@ -49,8 +50,7 @@ export const DefaultDropdown = ({
   namespace,
 }: DropdownProps) => {
   const [opened, setOpened] = useState(false);
-  
-  const [portal, setPortal] = useState<HTMLElement | null>(null);
+  const portal = useOverlayPortal();
   const ref = useRef<HTMLDivElement>(null);
   const menuRef = useRef<HTMLUListElement>(null);
   const scope = useOverlayScope(useId());
@@ -75,9 +75,6 @@ export const DefaultDropdown = ({
     });
   
   const toggle = opened ? closeDropdown : openDropdown;
-  useEffect(() => {
-    setPortal(document.body);
-  }, []);
   useEffect(() => {
     if (!opened) return;
     const onMouseDown = (e: MouseEvent) => {
@@ -104,7 +101,8 @@ export const DefaultDropdown = ({
         left: position?.left ?? 0,
         visibility: position ? undefined : "hidden",
       }}
-      onClick={(e) => {
+      
+      onClickCapture={(e) => {
         
         if (isOwnOverlayClick(e.target, scope)) return;
         if (e.target instanceof Element && e.target.closest(keepOpenSelector)) return;

package/ui/KeyboardAvoiding.tsx

@@ -1,9 +1,9 @@
 "use client";
 import { useCsr } from "akanjs/client";
 import { st } from "akanjs/store";
-import { animated } from "akanjs/ui";
 import { type ReactNode, useEffect, useRef } from "react";
 import { useSpring } from "react-spring";
+import { animated } from "./animated";
 
 interface KeyboardAvoidingProps {
   children: ReactNode;

package/ui/Layout/BottomInset.tsx

@@ -1,9 +1,10 @@
 "use client";
 import { getEnv } from "akanjs/base";
 import { cn, DEFAULT_BOTTOM_INSET, debugFrame, type FrameSlotRegistration, usePathCtx } from "akanjs/client";
-import { type ReactNode, useLayoutEffect, useRef, useState } from "react";
+import { type ReactNode, useLayoutEffect, useState } from "react";
 
 import { Portal } from "../Portal";
+import { FrameSlotFallback } from "./FrameSlotFallback";
 
 export interface BottomInsetProps {
   className?: string;
@@ -29,7 +30,8 @@ export const BottomInset = ({
   frameCache,
 }: BottomInsetProps) => {
   const [measuredHeight, setMeasuredHeight] = useState<number>();
-  const contentRef = useRef<HTMLDivElement>(null);
+  
+  const [contentElement, setContentElement] = useState<HTMLDivElement | null>(null);
   const pathCtx = usePathCtx();
   const pathRoute = pathCtx.location?.pathRoute;
   const path = pathCtx.location?.pathRoute?.path;
@@ -40,7 +42,7 @@ export const BottomInset = ({
   const resolvedEstimatedHeight = estimatedHeight ?? pathRoute?.pageState.bottomInset ?? DEFAULT_BOTTOM_INSET;
   const useDeclaredHeight = pathRoute?.explicitPageConfigKeys?.bottomInset === true;
   const readContentHeight = () => {
-    const element = contentRef.current;
+    const element = contentElement;
     if (!element) return undefined;
     const height = Math.ceil(element.getBoundingClientRect().height);
     return height > 0 ? height : undefined;
@@ -84,7 +86,7 @@ export const BottomInset = ({
     useDeclaredHeight,
   ]);
   useLayoutEffect(() => {
-    const element = contentRef.current;
+    const element = contentElement;
     if (!element || typeof ResizeObserver === "undefined") return;
     const update = () => {
       const height = readContentHeight();
@@ -99,18 +101,22 @@ export const BottomInset = ({
     const observer = new ResizeObserver(update);
     observer.observe(element);
     return () => observer.disconnect();
-  }, []);
+  }, [contentElement]);
 
+  const content = (
+    <div
+      ref={setContentElement}
+      data-akan-frame-slot="bottomInset"
+      data-akan-frame-role={frameRole}
+      className={cn("pointer-events-auto w-full", className)}
+    >
+      {children}
+    </div>
+  );
+  const fallbackSlot = frameRole === "keyboardAccessory" ? "keyboardInset" : "bottomInset";
   return (
-    <Portal id={portalId}>
-      <div
-        ref={contentRef}
-        data-akan-frame-slot="bottomInset"
-        data-akan-frame-role={frameRole}
-        className={cn("pointer-events-auto w-full", className)}
-      >
-        {children}
-      </div>
+    <Portal id={portalId} fallback={<FrameSlotFallback slot={fallbackSlot}>{content}</FrameSlotFallback>}>
+      {content}
     </Portal>
   );
 };