akanjs 3.0.2 → 3.1.0-rc.0

package/ui/Layout/BottomTab.tsx

@@ -1,32 +1,46 @@
 "use client";
-import { cn, usePage } from "akanjs/client";
+import { cn, usePage, usePathCtx } from "akanjs/client";
 import { st } from "akanjs/store";
 import type { ReactNode } from "react";
 
 import { Link } from "../Link";
+import { isActiveHref } from "../Link/activePath";
 import { BottomInset } from "./BottomInset";
 
 interface TabType {
   name: ReactNode;
-  icon: ReactNode;
+  icon?: ReactNode;
   activeIcon?: ReactNode;
+  /** Drawn in the tab's link in place of icon and name, and passable from a server component, unlike `renderTab`. */
+  content?: ReactNode;
+  activeContent?: ReactNode;
   notiCount?: number;
   href: string;
+  /** Lights on `href` alone, not on the pages under it: a home tab at `/org/<id>` under which every org page sits. */
+  exact?: boolean;
+  /** More paths that light the tab, each with the pages under it: a "More" tab that claims several sections. */
+  match?: string[];
 }
 
 export interface BottomTabProps {
   className?: string;
   tabs: TabType[];
   height?: number;
+  /** Names the tab bar's navigation landmark for a screen reader. */
+  label?: string;
   /** Draws one tab inside its link. The link, the route match, and the badge placement stay the framework's. */
   renderTab?: (tab: TabType, active: boolean) => ReactNode;
 }
 
-export const BottomTab = ({ className, tabs, height = 64, renderTab }: BottomTabProps) => {
+export const BottomTab = ({ className, tabs, height = 64, label, renderTab }: BottomTabProps) => {
   const { lang } = usePage();
-  const path = st.use.path({ agent: false });
-  const localePath = path.startsWith(`/${lang}`) ? path.slice(lang.length + 1) || "/" : path;
-  const isActiveTab = (href: string) => (href === "/" ? localePath === href : localePath.startsWith(href));
+  const pathCtx = usePathCtx();
+  const statePathname = st.use.pathname({ agent: false });
+  
+  const pathname = typeof window === "undefined" ? (pathCtx.location?.pathname ?? statePathname) : statePathname;
+  const prefix = pathCtx.prefix;
+  const isActiveTab = ({ href, exact, match }: TabType) =>
+    isActiveHref({ pathname, href, lang, prefix: prefix ?? "", exact, match });
 
   return (
     <BottomInset
@@ -37,35 +51,47 @@ export const BottomTab = ({ className, tabs, height = 64, renderTab }: BottomTab
       frameScope="layout"
       frameSource="bottomTab"
     >
-      <div
+      <nav
+        aria-label={label}
         className={cn(
           "flex size-full items-center justify-around border-border border-t bg-background/95 text-foreground backdrop-blur-sm",
           className,
         )}
       >
         {tabs.map((tab) => {
-          const active = isActiveTab(tab.href);
+          const active = isActiveTab(tab);
+          const custom = renderTab ? renderTab(tab, active) : active ? (tab.activeContent ?? tab.content) : tab.content;
+          const badge = tab.notiCount ? (
+            <span
+              className={cn(
+                "absolute flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 font-medium text-[10px] text-destructive-foreground leading-none",
+                custom !== undefined ? "top-1 left-[calc(50%+0.5rem)]" : "-top-1 -right-2",
+              )}
+            >
+              {tab.notiCount > 99 ? "99+" : tab.notiCount}
+            </span>
+          ) : null;
           return (
             <Link
               key={tab.href}
               href={tab.href}
               replace
+              aria-current={active ? "page" : undefined}
               className={cn(
                 "relative flex w-full flex-col items-center justify-end gap-1 py-1.5 transition-colors",
                 active ? "font-medium text-primary" : "text-foreground/55 hover:text-foreground/80",
               )}
             >
-              {renderTab ? (
-                renderTab(tab, active)
+              {custom !== undefined ? (
+                <>
+                  {custom}
+                  {badge}
+                </>
               ) : (
                 <>
                   <div className="relative inline-flex w-max text-xl">
                     {active ? (tab.activeIcon ?? tab.icon) : tab.icon}
-                    {tab.notiCount ? (
-                      <span className="absolute -top-1 -right-2 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 font-medium text-[10px] text-destructive-foreground leading-none">
-                        {tab.notiCount > 99 ? "99+" : tab.notiCount}
-                      </span>
-                    ) : null}
+                    {badge}
                   </div>
                   <span className="text-[11px]">{tab.name}</span>
                 </>
@@ -73,7 +99,7 @@ export const BottomTab = ({ className, tabs, height = 64, renderTab }: BottomTab
             </Link>
           );
         })}
-      </div>
+      </nav>
     </BottomInset>
   );
 };

package/ui/Layout/FrameSlotFallback.tsx

@@ -0,0 +1,59 @@
+import { getEnv } from "akanjs/base";
+import type { CSSProperties, ReactNode } from "react";
+
+export type FrameSlotName = "topInset" | "topLeftAction" | "bottomInset" | "keyboardInset";
+
+const topVisibility = "var(--akan-top-inset-visibility, visible)" as CSSProperties["visibility"];
+const bottomVisibility = "var(--akan-bottom-inset-visibility, visible)" as CSSProperties["visibility"];
+const top: CSSProperties = {
+  top: "calc(var(--akan-top-safe-area) + var(--akan-viewport-offset-top, 0px))",
+  height: "var(--akan-top-inset)",
+  visibility: topVisibility,
+};
+const bottom: CSSProperties = {
+  bottom: "var(--akan-bottom-safe-area)",
+  height: "var(--akan-bottom-inset)",
+  visibility: bottomVisibility,
+};
+const keyboard: CSSProperties = {
+  bottom: "max(var(--akan-bottom-safe-area), var(--akan-keyboard-inset, 0px))",
+  height: "var(--akan-bottom-inset)",
+  visibility: bottomVisibility,
+};
+
+const outerClassNames: { [slot in FrameSlotName]: string } = {
+  topInset: "fixed inset-x-0 z-10 isolate overflow-hidden bg-background",
+  topLeftAction: "fixed left-0 z-10 isolate flex aspect-1 items-center justify-center overflow-hidden",
+  bottomInset: "pointer-events-none fixed inset-x-0 z-10 isolate overflow-hidden",
+  keyboardInset: "pointer-events-none fixed inset-x-0 z-10 isolate overflow-hidden",
+} as const;
+
+const innerClassNames: { [slot in FrameSlotName]: string } = {
+  topInset: "relative isolate size-full",
+  topLeftAction: "isolate flex size-full items-center justify-center",
+  bottomInset: "pointer-events-none isolate size-full",
+  keyboardInset: "pointer-events-none isolate size-full",
+} as const;
+
+const slotStyles: { [slot in FrameSlotName]: CSSProperties } = {
+  topInset: top,
+  topLeftAction: top,
+  bottomInset: bottom,
+  keyboardInset: keyboard,
+} as const;
+
+interface FrameSlotFallbackProps {
+  slot: FrameSlotName;
+  children: ReactNode;
+}
+
+/** Chrome drawn in place on the server, in the box its frame slot draws, until the client moves it into that slot. */
+export const FrameSlotFallback = ({ slot, children }: FrameSlotFallbackProps) => {
+  
+  if (getEnv().renderMode === "csr") return null;
+  return (
+    <div data-akan-frame-fallback={slot} className={outerClassNames[slot]} style={slotStyles[slot]}>
+      <div className={innerClassNames[slot]}>{children}</div>
+    </div>
+  );
+};

package/ui/Layout/Navbar.tsx

@@ -6,20 +6,33 @@ import { BiChevronLeft, BiX } from "react-icons/bi";
 
 import { Link } from "../Link";
 import { Portal } from "../Portal";
+import { FrameSlotFallback } from "./FrameSlotFallback";
 
 export interface NavbarProps {
   className?: string;
   children?: ReactNode;
   height?: number;
   title?: ReactNode;
+  /** `true` draws the framework's back button; any other node is drawn in its place. */
   back?: ReactNode;
+  /** Where the default back button goes when there is no history to go back to, as on a deep link. */
+  backFallback?: string;
   left?: ReactNode;
   right?: ReactNode;
 }
 
 const closeIconTransitions = new Set<TransitionType>(["bottomUp", "scaleOut", "fade"]);
 
-export const Navbar = ({ back = false, className, height, children, title, left, right }: NavbarProps) => {
+export const Navbar = ({
+  back = false,
+  backFallback,
+  className,
+  height,
+  children,
+  title,
+  left,
+  right,
+}: NavbarProps) => {
   const pathCtx = usePathCtx();
   const pathRoute = pathCtx.location?.pathRoute;
   const path = pathRoute?.path;
@@ -41,20 +54,33 @@ export const Navbar = ({ back = false, className, height, children, title, left,
       height,
     });
   }, [registerFrameSlot, height, path]);
+  const bar = (
+    <div className={cn("flex size-full items-center gap-2 px-5", back && "pl-14", className)}>
+      {left ? <div className="flex shrink-0 items-center gap-1">{left}</div> : null}
+      {title ? <div className="min-w-0 flex-1 truncate font-semibold text-base">{title}</div> : null}
+      {children}
+      {right ? <div className="ml-auto flex shrink-0 items-center gap-1">{right}</div> : null}
+    </div>
+  );
+  const backButton =
+    back === true ? (
+      <Link.Back className="text-4xl" fallback={backFallback}>
+        <BackIcon />
+      </Link.Back>
+    ) : (
+      back
+    );
   return (
     <>
-      <Portal id={`topInsetContent${suffix}`}>
-        <div className={cn("flex size-full items-center px-5", back && "pl-14", className)}>{children}</div>
+      <Portal id={`topInsetContent${suffix}`} fallback={<FrameSlotFallback slot="topInset">{bar}</FrameSlotFallback>}>
+        {bar}
       </Portal>
       {back ? (
-        <Portal id={`topLeftActionContent${suffix}`}>
-          {typeof back === "boolean" ? (
-            <Link.Back className="text-4xl">
-              <BackIcon />
-            </Link.Back>
-          ) : (
-            back
-          )}
+        <Portal
+          id={`topLeftActionContent${suffix}`}
+          fallback={<FrameSlotFallback slot="topLeftAction">{backButton}</FrameSlotFallback>}
+        >
+          {backButton}
         </Portal>
       ) : null}
     </>

package/ui/Layout/Sider.tsx

@@ -1,12 +1,12 @@
 "use client";
 import { cn } from "akanjs/client";
 import { st } from "akanjs/store";
-import { animated } from "akanjs/ui";
 import { type ReactNode, useEffect, useState } from "react";
 import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
 import { BiX } from "react-icons/bi";
 import { useSpring } from "react-spring";
 import { agentAttrs } from "../agentAttrs";
+import { animated } from "../animated";
 import { buttonRecipe } from "../Button";
 
 export interface SiderProps {

package/ui/Layout/TopInset.tsx

@@ -1,9 +1,10 @@
 "use client";
 import { getEnv } from "akanjs/base";
 import { cn, DEFAULT_TOP_INSET, debugFrame, usePathCtx } from "akanjs/client";
-import { type ReactNode, useEffect, useLayoutEffect, useState } from "react";
+import { type ReactNode, useLayoutEffect } from "react";
 
 import { Portal } from "../Portal";
+import { FrameSlotFallback } from "./FrameSlotFallback";
 
 export interface TopInsetProps {
   className?: string;
@@ -32,11 +33,14 @@ export const TopInset = ({ className, children, estimatedHeight = DEFAULT_TOP_IN
     });
   }, [registerFrameSlot, estimatedHeight, path]);
 
+  const content = (
+    <div data-akan-frame-slot="topInset" data-akan-frame-role="topChrome" className={cn("size-full", className)}>
+      {children}
+    </div>
+  );
   return (
-    <Portal id={`topInsetContent${suffix}`}>
-      <div data-akan-frame-slot="topInset" data-akan-frame-role="topChrome" className={cn("size-full", className)}>
-        {children}
-      </div>
+    <Portal id={`topInsetContent${suffix}`} fallback={<FrameSlotFallback slot="topInset">{content}</FrameSlotFallback>}>
+      {content}
     </Portal>
   );
 };
@@ -47,19 +51,16 @@ export interface TopLeftActionProps {
 }
 
 export const TopLeftAction = ({ className, children }: TopLeftActionProps) => {
-  const [render, setRender] = useState(false);
   const pathCtx = usePathCtx();
   const path = pathCtx.location?.pathRoute?.path;
   const suffix = getEnv().renderMode === "csr" && path ? `-${pathCtx.pageKey ?? path}` : "";
-  useEffect(() => {
-    setRender(true);
-  }, []);
-
-  if (!render) return null;
-
+  const content = <div className={className}>{children}</div>;
   return (
-    <Portal id={`topLeftActionContent${suffix}`}>
-      <div className={className}>{children}</div>
+    <Portal
+      id={`topLeftActionContent${suffix}`}
+      fallback={<FrameSlotFallback slot="topLeftAction">{content}</FrameSlotFallback>}
+    >
+      {content}
     </Portal>
   );
 };

package/ui/Link/Action.tsx

@@ -7,11 +7,21 @@ export interface ActionProps {
   children?: ReactNode;
 }
 
-export const Back = ({ className, children }: ActionProps) => (
-  <div className={cn("cursor-pointer", className)} onClick={() => router.back()}>
-    {children}
-  </div>
-);
+export interface BackProps extends ActionProps {
+  /** Where to go when there is no history to go back to, as on a deep link or a freshly opened app. */
+  fallback?: string;
+}
+
+export const Back = ({ className, children, fallback }: BackProps) =>
+  fallback === undefined ? (
+    <div className={cn("cursor-pointer", className)} onClick={() => router.back()}>
+      {children}
+    </div>
+  ) : (
+    <button type="button" className={cn("cursor-pointer", className)} onClick={() => router.backOrFallback(fallback)}>
+      {children}
+    </button>
+  );
 
 export const Close = ({ className, children }: ActionProps) => (
   <div className={cn("cursor-pointer", className)} onClick={() => window.close()}>

package/ui/Link/Anchor.tsx

@@ -1,10 +1,11 @@
 "use client";
 import { getEnv } from "akanjs/base";
-import { cn, getPathInfo, router, usePage, usePathCtx } from "akanjs/client";
+import { cn, csrLocation, getPathInfo, router, usePage, usePathCtx } from "akanjs/client";
 import { openExternalUrl } from "akanjs/client/native";
 import { Logger } from "akanjs/common";
 import { st } from "akanjs/store";
 import type { AnchorHTMLAttributes } from "react";
+import { isActiveHref } from "./activePath";
 
 export type CommonLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
   /** Omitted, or with `disabled`, Link renders a plain div around the same children. */
@@ -13,9 +14,11 @@ export type CommonLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "hre
   scrollToTop?: boolean;
   /** Replaces the current history entry instead of pushing a new one. */
   replace?: boolean;
-  /** Applied while the current path starts with `href`, or equals it with `activeExact`. */
+  /** Applied while the current page is `href` or below it, or exactly `href` with `activeExact`; basePath-aware. */
   activeClassName?: string;
   activeExact?: boolean;
+  /** More paths under which the link counts as active, as a tab does for its detail pages. */
+  activeMatch?: string[];
   /** @deprecated Has no effect: neither renderer reads it. */
   noCache?: boolean;
 };
@@ -29,26 +32,26 @@ export const CsrLink = ({
   activeClassName,
   scrollToTop,
   activeExact,
+  activeMatch,
   noCache,
   ...props
 }: AnchorProps) => {
   const { prefix } = usePathCtx();
-  const currentPath = st.use.path({ agent: false });
+  const pathname = st.use.pathname({ agent: false });
   const { lang } = usePage();
-  const { path, hash } = getPathInfo(href, lang, prefix ?? "");
+  const { hash } = getPathInfo(href, lang, prefix ?? "");
+  const active =
+    !!activeClassName &&
+    isActiveHref({ pathname, href, lang, prefix: prefix ?? "", exact: activeExact, match: activeMatch });
   return (
     <a
-      className={cn(
-        "cursor-pointer",
-        className,
-        (activeExact ? currentPath === path : currentPath.startsWith(path)) && activeClassName,
-      )}
+      className={cn("cursor-pointer", className, active && activeClassName)}
       {...props}
       onClick={(event) => {
         props.onClick?.(event);
         if (event.defaultPrevented) return;
         const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
-        const url = href.startsWith("#") ? `${window.location.pathname}#${hash}` : href;
+        const url = href.startsWith("#") ? `${csrLocation.pathname}#${hash}` : href;
         if (isExternal) void openExternalUrl(href).catch(() => window.open(href, "_blank", "noopener,noreferrer"));
         else if (replace) router.replace(url, { scrollToTop });
         else router.push(url, { scrollToTop });
@@ -67,13 +70,17 @@ export const SsrLink = ({
   replace,
   activeClassName,
   activeExact,
+  activeMatch,
   noCache,
   ...props
 }: AnchorProps) => {
   const pathCtx = usePathCtx();
   const prefix = pathCtx.prefix ?? "";
-  const { lang, path: pagePath } = usePage();
-  const currentPath = pathCtx.location?.pathRoute?.path ?? getPathInfo(pagePath, lang, prefix).path;
+  const { lang } = usePage();
+  const statePathname = st.use.pathname({ agent: false });
+  
+  const pathname = typeof window === "undefined" ? (pathCtx.location?.pathname ?? statePathname) : statePathname;
+  const currentPath = getPathInfo(pathname, lang, prefix).path;
   const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
   const internalPathInfo = getPathInfo(href, lang, prefix);
   const requestHref = getEnv().operationMode === "local" ? internalPathInfo.href : getPathInfo(href, lang, "").href;
@@ -86,7 +93,12 @@ export const SsrLink = ({
     );
   return (
     <a
-      className={cn(className, (activeExact ? currentPath === path : currentPath.startsWith(path)) && activeClassName)}
+      className={cn(
+        className,
+        !!activeClassName &&
+          isActiveHref({ pathname, href, lang, prefix, exact: activeExact, match: activeMatch }) &&
+          activeClassName,
+      )}
       href={isExternal ? href : requestHref}
       {...props}
       onClick={(event) => {

package/ui/Link/activePath.ts

@@ -0,0 +1,25 @@
+import { getPathInfo } from "akanjs/client";
+
+interface ActiveHrefOptions {
+  /** The current location's pathname, locale and basePath included or not. */
+  pathname: string;
+  href: string;
+  lang: string;
+  prefix: string;
+  exact?: boolean;
+  /** More paths that light the link, each matched as a prefix like `href`. */
+  match?: string[];
+}
+
+const pathOf = (url: string, lang: string, prefix: string) => getPathInfo(url, lang, prefix).path || "/";
+
+const covers = (current: string, target: string, exact: boolean) =>
+  exact || target === "/"
+    ? current === target
+    : current === target || current.startsWith(`${target.replace(/\/$/, "")}/`);
+
+/** Whether a link to `href` is the current page, with the locale and the basePath stripped from both sides. */
+export const isActiveHref = ({ pathname, href, lang, prefix, exact = false, match = [] }: ActiveHrefOptions) => {
+  const current = pathOf(pathname, lang, prefix);
+  return [href, ...match].some((target, idx) => covers(current, pathOf(target, lang, prefix), idx === 0 && exact));
+};

package/ui/Link/index.tsx

@@ -6,7 +6,7 @@ import { type CommonLinkProps, CsrLink, SsrLink } from "./Anchor";
 
 export const Link = ({ className, href, disabled = false, children, ...props }: CommonLinkProps) => {
   if (disabled || !href) {
-    const { scrollToTop, replace, activeClassName, activeExact, noCache, ...divProps } = props;
+    const { scrollToTop, replace, activeClassName, activeExact, activeMatch, noCache, ...divProps } = props;
     return (
       <div className={className} {...(divProps as unknown as HTMLAttributes<HTMLDivElement>)}>
         {children}

package/ui/Load/Pagination.tsx

@@ -54,7 +54,7 @@ function Render<RefName extends string, Light>({ className, init, scrollToTop }:
     onSelect: (page) => {
       void storeDo[namesOfSlice.setPageOfModel](page);
       if (!scrollToTop) return;
-      window.parent.postMessage({ type: "pathChange", page }, "*");
+      if (!globalThis.__AKAN_EMBED__) window.parent.postMessage({ type: "pathChange", page }, "*");
       window.scrollTo({ top: 0, behavior: "instant" });
     },
   });

package/ui/Load/Units.tsx

@@ -168,7 +168,7 @@ function Render<RefName extends string, Light extends { id: string }>({
     onPageSelect: (page: number, option?: { scrollToTop?: boolean }) => {
       void storeDo[namesOfSlice.setPageOfModel](page);
       if (option?.scrollToTop !== false) {
-        window.parent.postMessage({ type: "pathChange", page }, "*");
+        if (!globalThis.__AKAN_EMBED__) window.parent.postMessage({ type: "pathChange", page }, "*");
         window.scrollTo({ top: 0, behavior: "instant" });
       }
     },

package/ui/Loading/ProgressBar.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "akanjs/client";
-import { animated } from "akanjs/ui";
 import { useSpring } from "react-spring";
+import { animated } from "../animated";
 
 export interface ProgressBarProps {
   className?: string;

package/ui/Modal.tsx

@@ -3,6 +3,7 @@
 import type { ReactNode } from "react";
 
 import { Dialog } from "./Dialog";
+import type { ModalPlacement, ModalPresentation } from "./Dialog/modalSurface";
 import { createOverridable } from "./UiOverride";
 
 export interface ModalProps {
@@ -17,6 +18,10 @@ export interface ModalProps {
   bodyClassName?: string;
   children?: ReactNode;
   confirmClose?: boolean;
+  /** `auto` is a full-screen sheet below `md`; the default stays a centred dialog. */
+  presentation?: ModalPresentation;
+  /** `right` is a full-height side sheet from `md` up. */
+  placement?: ModalPlacement;
 }
 
 export const DefaultModal = ({
@@ -30,6 +35,8 @@ export const DefaultModal = ({
   bodyClassName,
   children,
   confirmClose = false,
+  presentation,
+  placement,
 }: ModalProps) => {
   return (
     <Dialog open={open}>
@@ -40,6 +47,8 @@ export const DefaultModal = ({
         bodyClassName={bodyClassName}
         confirmClose={confirmClose}
         closeButton={closeButton}
+        presentation={presentation}
+        placement={placement}
       >
         {title ? <Dialog.Title>{title}</Dialog.Title> : null}
         <Dialog.Content>{children}</Dialog.Content>

package/ui/Model/EditModal.tsx

@@ -10,9 +10,11 @@ import { AiOutlinePlus, AiOutlineSave } from "react-icons/ai";
 
 import { agentAttrs } from "../agentAttrs";
 import { Button } from "../Button";
+import type { ModalPlacement, ModalPresentation } from "../Dialog/modalSurface";
 import { Modal } from "../Modal";
 import DraftBar from "./DraftBar";
 import { type DraftProp, editDraftScope, newDraftScope } from "./draftScope";
+import { NewFormOrigin } from "./newFormOrigin";
 
 const EDIT_PAYLOAD_MAX_AGE_MS = 60_000;
 
@@ -113,6 +115,10 @@ interface EditModalProps<Full extends { id: string }> extends EditModelProps<Ful
   disabled?: boolean;
   checkSubmit?: boolean;
   modalClassName?: string;
+  /** Passed to the `Modal`: `auto` is a full-screen sheet below `md`. */
+  presentation?: ModalPresentation;
+  /** Passed to the `Modal`: `right` is a side sheet from `md` up. */
+  placement?: ModalPlacement;
   renderTitle?: ((model: Full) => string | ReactNode) | string;
   submitText?: ReactNode;
   submitClassName?: string;
@@ -134,6 +140,8 @@ export default function EditModal<Full extends { id: string }>({
   disabled,
   checkSubmit = true,
   modalClassName,
+  presentation,
+  placement,
   edit,
   modal,
   renderTitle,
@@ -182,10 +190,15 @@ export default function EditModal<Full extends { id: string }>({
   );
   const modelFormLoading = storeUse[names.modelFormLoading]() as string | boolean;
   const modalId = id ?? ((modelEdit as DynamicRecord)?.[names.modelObj] as Full | undefined)?.id ?? undefined;
+  const newFormOrigin = NewFormOrigin.use(modelName);
   const isModalOpen =
     modelModal === (modal ?? "edit") &&
     (modelFormLoading === false || modelFormLoading === modalId) &&
-    ((!modelFormId && !modalId) || modalId === modelFormId);
+    ((!modelFormId && !modalId && (!newFormOrigin || newFormOrigin === sliceName)) ||
+      (!!modalId && modalId === modelFormId));
+  useEffect(() => {
+    if (!modelModal) NewFormOrigin.clear(modelName);
+  }, [modelModal]);
   const isEditPayloadStale = useCallback((viewAt?: Date | null) => {
     if (isRscNavigationFromCache()) return true;
     return (
@@ -346,6 +359,8 @@ export default function EditModal<Full extends { id: string }>({
           handleCancel();
         }}
         className={modalClassName}
+        presentation={presentation}
+        placement={placement}
         title={<Title />}
         action={<Submit />}
       >

package/ui/Model/New.tsx

@@ -2,6 +2,7 @@ import { usePage } from "akanjs/client";
 import type { SliceMeta } from "akanjs/fetch";
 import type { ReactNode } from "react";
 import { AiOutlinePlus } from "react-icons/ai";
+import type { ModalPlacement, ModalPresentation } from "../Dialog/modalSurface";
 import { buttonRecipe } from "../recipe";
 import type { DraftProp } from "./draftScope";
 import EditModal from "./EditModal";
@@ -18,9 +19,24 @@ interface NewProps<Full = any> {
   namespace?: string;
   /** Draft recovery for the form. `false` turns it off; a string names the scope explicitly. */
   draft?: DraftProp;
+  /** Passed to the form's `Modal`: `auto` is a full-screen sheet below `md`. */
+  presentation?: ModalPresentation;
+  /** Passed to the form's `Modal`: `right` is a side sheet from `md` up. */
+  placement?: ModalPlacement;
 }
 
-export default function New({ trigger, children, slice, modal, partial, renderTitle, namespace, draft }: NewProps) {
+export default function New({
+  trigger,
+  children,
+  slice,
+  modal,
+  partial,
+  renderTitle,
+  namespace,
+  draft,
+  presentation,
+  placement,
+}: NewProps) {
   const { l } = usePage();
   return (
     <>
@@ -38,7 +54,14 @@ export default function New({ trigger, children, slice, modal, partial, renderTi
           </button>
         )}
       </NewWrapper>
-      <EditModal renderTitle={renderTitle} slice={slice} draft={draft}>
+      <EditModal
+        renderTitle={renderTitle}
+        slice={slice}
+        modal={modal ?? undefined}
+        draft={draft}
+        presentation={presentation}
+        placement={placement}
+      >
         {children}
       </EditModal>
     </>