akanjs 3.0.2 → 3.1.0-rc.1

package/ui/Constant/schemaDoc.ts

@@ -11,17 +11,26 @@ import {
   type ConstantCls,
   type ConstantField,
   type ConstantModel,
+  type ConstantOriginKind,
   ConstantRegistry,
   type TextFieldRole,
 } from "akanjs/constant";
+import { ownerOf, ownerOrderOf } from "../Reference/origin";
 
 export const databaseModelVariants = ["input", "object", "full", "light", "insight"] as const;
 export type DatabaseModelVariant = (typeof databaseModelVariants)[number];
 
+/**
+ * `undefined` is "every registered one" and `[]` is "none". Once any option narrows the scope, scalars default to
+ * the ones the shown models embed and enums to the ones the shown models and scalars use.
+ */
 export interface ConstantSchemaOptions {
   models?: string[];
   scalars?: string[];
   enums?: string[];
+  include?: string[];
+  exclude?: string[];
+  libs?: string[];
 }
 
 export interface ConstantSchemaDoc {
@@ -34,6 +43,7 @@ export interface ConstantSchemaDoc {
 export interface DatabaseSchema {
   kind: "database";
   refName: string;
+  origin: string[];
   modelName: string;
   variants: Record<DatabaseModelVariant, ModelVariantSchema>;
 }
@@ -41,6 +51,7 @@ export interface DatabaseSchema {
 export interface ScalarSchema {
   kind: "scalar";
   refName: string;
+  origin: string[];
   modelName: string;
   modelRef: ConstantCls;
   fields: FieldSchema[];
@@ -57,6 +68,7 @@ export interface ModelVariantSchema {
 export interface EnumSchema {
   key: string;
   refName: string;
+  origin: string[];
   typeName: string;
   values: (string | number)[];
   enumRef: EnumInstance;
@@ -105,33 +117,80 @@ export interface FieldSchema {
 }
 
 export const getConstantSchemaDoc = (options: ConstantSchemaOptions = {}): ConstantSchemaDoc => {
-  const databases = getSelectedEntries(ConstantRegistry.database, options.models).map(([refName, model]) =>
-    buildDatabaseSchema(refName, model),
-  );
-  const scalars = getSelectedEntries(ConstantRegistry.scalar, options.scalars).map(([refName, scalar]) => {
-    const modelRef = scalar.model;
-    return {
-      kind: "scalar" as const,
-      refName,
-      modelName: getModelName(modelRef, refName),
-      modelRef,
-      fields: getFields(modelRef, "scalar"),
-    };
-  });
-  const selectedEnums = getSelectedEntries(ConstantRegistry.enum, options.enums);
+  const { models, scalars: scalarKeys, enums: enumKeys, include, exclude, libs } = options;
+  const isScoped = [models, scalarKeys, enumKeys, include, exclude, libs].some((option) => option !== undefined);
+  const keeps = (kind: ConstantOriginKind) => (key: string) =>
+    !exclude?.includes(key) && (!libs || libs.includes(ownerOf(ConstantRegistry.getOrigin(kind, key)) ?? ""));
+  const isRoot = (key: string) => keeps("database")(key) && (!include || include.includes(key));
+  const databases = selectKeys(ConstantRegistry.database, models)
+    .filter(isRoot)
+    .map((refName) => buildDatabaseSchema(refName, ConstantRegistry.getDatabase(refName)));
+  const scalars = (
+    scalarKeys !== undefined
+      ? selectKeys(ConstantRegistry.scalar, scalarKeys).filter(keeps("scalar"))
+      : isScoped
+        ? collectEmbeddedScalars(
+            databases,
+            include ? selectKeys(ConstantRegistry.scalar, include).filter(keeps("scalar")) : [],
+            keeps("scalar"),
+          )
+        : selectKeys(ConstantRegistry.scalar)
+  ).map(buildScalarSchema);
   const enumUsages = collectEnumUsages(databases, scalars);
-  const enums = selectedEnums.map(([key, enumRef]) => ({
+  const enums = selectKeys(ConstantRegistry.enum, enumKeys)
+    .filter(keeps("enum"))
+    .map((key) => buildEnumSchema(key, enumUsages))
+    .filter((enumSchema) => enumKeys !== undefined || !isScoped || enumSchema.usedBy.length);
+  const relations = collectRelations(databases, scalars);
+  return { databases, scalars, enums, relations };
+};
+
+const buildScalarSchema = (refName: string): ScalarSchema => {
+  const modelRef = ConstantRegistry.getScalar(refName).model;
+  return {
+    kind: "scalar",
+    refName,
+    origin: ConstantRegistry.getOrigin("scalar", refName),
+    modelName: getModelName(modelRef, refName),
+    modelRef,
+    fields: getFields(modelRef, "scalar"),
+  };
+};
+
+const buildEnumSchema = (key: string, enumUsages: Map<EnumInstance, EnumUsage[]>): EnumSchema => {
+  const enumRef = ConstantRegistry.enum.get(key) as EnumInstance;
+  return {
     key,
     refName: enumRef.refName,
+    origin: ConstantRegistry.getOrigin("enum", key),
     typeName: PrimitiveRegistry.getName(enumRef.type as typeof PrimitiveScalar),
     values: [...enumRef.values] as (string | number)[],
     enumRef,
     usedBy: enumUsages.get(enumRef) ?? [],
-  }));
-  const relations = collectRelations(databases, scalars);
-  return { databases, scalars, enums, relations };
+  };
+};
+
+const collectEmbeddedScalars = (
+  databases: DatabaseSchema[],
+  rootScalars: string[],
+  isKept: (key: string) => boolean,
+) => {
+  const found = new Set(rootScalars);
+  const visit = (fields: FieldSchema[]) => {
+    for (const field of fields) {
+      const refName = field.typeRefName;
+      if (!refName || found.has(refName) || !isKept(refName) || !ConstantRegistry.scalar.has(refName)) continue;
+      found.add(refName);
+      visit(getFields(ConstantRegistry.getScalar(refName).model, "scalar"));
+    }
+  };
+  for (const database of databases) for (const variant of Object.values(database.variants)) visit(variant.fields);
+  for (const refName of rootScalars) visit(getFields(ConstantRegistry.getScalar(refName).model, "scalar"));
+  return [...found].sort((a, b) => a.localeCompare(b));
 };
 
+export const getConstantOwnerOrder = () => ownerOrderOf([...ConstantRegistry.origin.values()]);
+
 export const getDefaultVariant = (database: DatabaseSchema): ModelVariantSchema => database.variants.full;
 
 export const getVariantTitle = (variant: DatabaseModelVariant | "scalar") => {
@@ -155,7 +214,13 @@ const buildDatabaseSchema = (refName: string, model: ConstantModel): DatabaseSch
       ];
     }),
   ) as Record<DatabaseModelVariant, ModelVariantSchema>;
-  return { kind: "database", refName, modelName: ConstantRegistry.getModelName(model.full), variants };
+  return {
+    kind: "database",
+    refName,
+    origin: ConstantRegistry.getOrigin("database", refName),
+    modelName: ConstantRegistry.getModelName(model.full),
+    variants,
+  };
 };
 
 const getFields = (modelRef: ConstantCls, variant: DatabaseModelVariant | "scalar"): FieldSchema[] =>
@@ -265,13 +330,8 @@ const getConstraints = (props: ReturnType<ConstantField["getProps"]>) =>
     props.accumulate ? "accumulate" : null,
   ].filter((constraint): constraint is string => !!constraint);
 
-const getSelectedEntries = <Value>(map: Map<string, Value>, selected?: string[]): [string, Value][] => {
-  if (!selected?.length) return [...map.entries()].sort(([a], [b]) => a.localeCompare(b));
-  return selected.flatMap((key) => {
-    const value = map.get(key);
-    return value ? ([[key, value]] as [string, Value][]) : [];
-  });
-};
+const selectKeys = (map: Map<string, unknown>, selected?: string[]) =>
+  selected ? selected.filter((key) => map.has(key)) : [...map.keys()].sort((a, b) => a.localeCompare(b));
 
 const collectEnumUsages = (databases: DatabaseSchema[], scalars: ScalarSchema[]) => {
   const usages = new Map<EnumInstance, EnumUsage[]>();

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;