akanjs 3.0.0-alpha.2 → 3.0.0-alpha.21

package/ui/DraggableList.tsx

@@ -7,6 +7,7 @@ import { createContext, type ReactElement, type ReactNode, useContext, useRef }
 import { BiTrash } from "react-icons/bi";
 import { MdDragIndicator } from "react-icons/md";
 import { buttonRecipe } from "./Button";
+import { useUiRecipe } from "./UiOverride";
 
 const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
 
@@ -169,6 +170,7 @@ const Item = ({
   removeClassName,
 }: ItemProps) => {
   const { onRemove } = useDragList();
+  const recipe = useUiRecipe("button") ?? buttonRecipe;
   return (
     <div className={cn("flex w-full items-center gap-2", className)}>
       {cursor ? (
@@ -179,7 +181,7 @@ const Item = ({
       {children}
       {removable && (
         <button
-          className={buttonRecipe({ variant: "outline", size: "xs" }, [
+          className={recipe({ variant: "outline", size: "xs" }, [
             "size-6 border-destructive p-0 text-destructive hover:bg-destructive hover:text-destructive-foreground",
             removeClassName,
           ])}

package/ui/Dropdown.tsx

@@ -1,9 +1,15 @@
 "use client";
 import { cn } from "akanjs/client";
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import { type ReactNode, useEffect, useId, useRef, useState } from "react";
 
 import { buttonRecipe } from "./Button";
-import { createOverridable } from "./UiOverride";
+import { isOwnOverlayClick, OverlayOwnerProvider, useOverlayScope } from "./overlayLayer";
+import { createOverridable, useUiRecipe } from "./UiOverride";
+
+/** Put this on a menu item that runs its own interaction (a switch, a copy button) to keep the menu open. */
+export const DROPDOWN_KEEP_OPEN_ATTR = "data-dropdown-keep-open";
+
+const keepOpenSelector = `[${DROPDOWN_KEEP_OPEN_ATTR}]`;
 
 export interface DropdownProps {
   /** Button/trigger content. */
@@ -20,39 +26,55 @@ export interface DropdownProps {
 
 export const DefaultDropdown = ({ value, content, className, buttonClassName, dropdownClassName }: DropdownProps) => {
   const [opened, setOpened] = useState(false);
+  const [mounted, setMounted] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
+  const scope = useOverlayScope(useId());
+  
+  const recipe = useUiRecipe("button") ?? buttonRecipe;
   useEffect(() => {
     if (!opened) return;
-    const onClick = (e: MouseEvent) => {
+    const onMouseDown = (e: MouseEvent) => {
+      
+      if (isOwnOverlayClick(e.target, scope)) return;
       if (ref.current && !ref.current.contains(e.target as Node)) setOpened(false);
     };
-    document.addEventListener("mousedown", onClick);
+    document.addEventListener("mousedown", onMouseDown);
     return () => {
-      document.removeEventListener("mousedown", onClick);
+      document.removeEventListener("mousedown", onMouseDown);
     };
-  }, [opened]);
+  }, [opened, scope]);
   return (
     <div ref={ref} className={cn("relative inline-block", className)}>
       <button
         type="button"
-        className={buttonRecipe({ variant: "ghost" }, ["flex", buttonClassName])}
+        aria-haspopup="menu"
+        aria-expanded={opened}
+        className={recipe({ variant: "ghost" }, ["flex", buttonClassName])}
         onClick={() => {
+          setMounted(true);
           setOpened((o) => !o);
         }}
       >
         {value}
       </button>
-      {opened ? (
+      {/* Hidden rather than unmounted once opened: unmounting takes any overlay a menu item opened down with it. */}
+      {mounted ? (
         <ul
-          onClick={() => {
+          hidden={!opened}
+          onClick={(e) => {
+            
+            if (isOwnOverlayClick(e.target, scope)) return;
+            if (e.target instanceof Element && e.target.closest(keepOpenSelector)) return;
             setOpened(false);
           }}
           className={cn(
-            "absolute right-0 z-[100] mt-1 grid max-h-52 gap-2 overflow-auto whitespace-nowrap rounded-md bg-popover p-1 pr-3 text-popover-foreground shadow-md",
+            "absolute right-0 z-[100] mt-1 grid max-h-52 gap-0.5 overflow-auto whitespace-nowrap rounded-md bg-popover p-1 text-popover-foreground shadow-md",
             dropdownClassName,
+            !opened && "hidden",
           )}
         >
-          {content}
+          {/* Reaches an overlay this menu opens even after it portals away, so it can claim it as its own. */}
+          <OverlayOwnerProvider value={scope}>{content}</OverlayOwnerProvider>
         </ul>
       ) : null}
     </div>

package/ui/Field.tsx

@@ -9,14 +9,17 @@ import { AiOutlinePlus } from "react-icons/ai";
 import { BiHelpCircle, BiTrash, BiX } from "react-icons/bi";
 import { MdDragIndicator } from "react-icons/md";
 
+import { agentAttrs } from "./agentAttrs";
 import { badgeRecipe } from "./Badge";
 import { buttonRecipe } from "./Button";
 import { DraggableList } from "./DraggableList";
 import { Input } from "./Input";
+import { inputRecipe } from "./recipe";
 import { Select } from "./Select";
 import { Switch as UiSwitch } from "./Switch";
 import { ToggleSelect as UtilToggleSelect } from "./ToggleSelect";
 import { Tooltip } from "./Tooltip";
+import { useUiRecipe } from "./UiOverride";
 
 interface LabelProps {
   className?: string;
@@ -101,6 +104,7 @@ const List = <Item,>({
   renderItem,
 }: ListProps<Item>) => {
   const { l } = usePage();
+  const recipe = useUiRecipe("button") ?? buttonRecipe;
   return (
     <div className={cn("flex w-full flex-col", className)}>
       {label ? <Label className={labelClassName} nullable={nullable} label={label} desc={desc} /> : null}
@@ -111,7 +115,7 @@ const List = <Item,>({
               {renderItem(item, idx)}
               <div className="flex gap-2 border-border border-l pl-2">
                 <button
-                  className={buttonRecipe(
+                  className={recipe(
                     { variant: "outline", size: "icon" },
                     "size-6 border-destructive p-0 text-destructive hover:bg-destructive hover:text-destructive-foreground",
                   )}
@@ -127,7 +131,7 @@ const List = <Item,>({
           </>
         ))}
         <button
-          className={buttonRecipe({ variant: "outline" })}
+          className={recipe({ variant: "outline" })}
           onClick={() => {
             onAdd();
           }}
@@ -183,6 +187,7 @@ const Text = ({
     <div className={cn("flex flex-col", className)}>
       {label ? <Label className={labelClassName} nullable={nullable} label={label} desc={desc} /> : null}
       <Input
+        {...agentAttrs(onChange)}
         cacheKey={cache ? `${label}-${desc}-text` : undefined}
         inputStyleType={inputStyleType}
         value={value ?? ""}
@@ -247,6 +252,7 @@ const Price = ({
     <div className={cn("flex flex-col", className)}>
       {label ? <Label className={labelClassName} nullable={nullable} label={label} desc={desc} /> : null}
       <Input
+        {...agentAttrs(onChange)}
         inputStyleType={inputStyleType}
         value={value ?? ""}
         nullable={nullable}
@@ -313,6 +319,7 @@ const TextArea = ({
     <div className={cn("flex flex-col", className)}>
       {label ? <Label className={labelClassName} nullable={nullable} label={label} desc={desc} /> : null}
       <Input.TextArea
+        {...agentAttrs(onChange)}
         value={value ?? ""}
         cacheKey={cache ? `${label}-${desc}-textArea` : undefined}
         nullable={nullable}
@@ -361,7 +368,7 @@ const Switch = ({
   offDesc,
 }: SwitchProps) => {
   return (
-    <div className={cn("flex flex-col", className)}>
+    <div {...agentAttrs(onChange)} className={cn("flex flex-col", className)}>
       {label ? <Label className={labelClassName} nullable label={label} desc={desc} /> : null}
       <div className="flex items-center gap-2">
         <UiSwitch
@@ -411,7 +418,7 @@ const ToggleSelect = <I extends string | number | boolean | null>({
   const { l } = usePage();
   const isEnumValue = isEnum(items as EnumInstance<string, I>);
   return (
-    <div className={cn("flex flex-col", className)}>
+    <div {...agentAttrs(onChange)} className={cn("flex flex-col", className)}>
       {label ? <Label className={labelClassName} nullable={nullable} label={label} desc={desc} /> : null}
       <UtilToggleSelect
         className="mt-2"
@@ -468,7 +475,7 @@ const MultiToggleSelect = <I extends string | number | boolean>({
   const { l } = usePage();
   const isEnumValue = isEnum(items as EnumInstance<string, I>);
   return (
-    <div className={cn("flex flex-col", className)}>
+    <div {...agentAttrs(onChange)} className={cn("flex flex-col", className)}>
       {label ? <Label className={labelClassName} nullable={!!minlength} label={label} desc={desc} /> : null}
       <UtilToggleSelect.Multi
         nullable={!minlength}
@@ -533,8 +540,9 @@ const TextList = ({
   inputClassName,
 }: TextListProps) => {
   const { l } = usePage();
+  const recipe = useUiRecipe("button") ?? buttonRecipe;
   return (
-    <div className={cn("flex flex-col", className)}>
+    <div {...agentAttrs(onChange)} className={cn("flex flex-col", className)}>
       {label ? <Label className={labelClassName} nullable={!minlength} label={label} desc={desc} /> : null}
       <div className="mb-5 h-full gap-2 rounded-md border border-border p-2">
         <DraggableList
@@ -570,7 +578,7 @@ const TextList = ({
                     disabled={disabled}
                   />
                   <button
-                    className={buttonRecipe(
+                    className={recipe(
                       { variant: "outline", size: "icon" },
                       "size-6 border-destructive p-0 text-destructive hover:bg-destructive hover:text-destructive-foreground",
                     )}
@@ -588,7 +596,7 @@ const TextList = ({
         <div className="my-5 h-[0.5px] bg-foreground/20" />
         {value.length <= maxTextlength ? (
           <button
-            className={buttonRecipe({ variant: "outline" }, "w-full")}
+            className={recipe({ variant: "outline" }, "w-full")}
             onClick={() => {
               onChange([...value, ""]);
             }}
@@ -638,6 +646,7 @@ const Tags = ({
   inputClassName,
 }: TagsProps) => {
   const { l } = usePage();
+  const badge = useUiRecipe("badge") ?? badgeRecipe;
   const [inputVisible, setInputVisible] = useState(false);
   const [tag, setTag] = useState("");
   const addTag = () => {
@@ -648,11 +657,11 @@ const Tags = ({
   };
 
   return (
-    <div className={cn("flex flex-col", className)}>
+    <div {...agentAttrs(onChange)} className={cn("flex flex-col", className)}>
       {label ? <Label className={labelClassName} nullable={!minlength} label={label} desc={desc} /> : null}
       <div className="flex w-full flex-wrap items-center gap-1 rounded-md border border-foreground/20 p-2">
         {value.map((val, idx) => (
-          <span className={badgeRecipe({ variant: "outline" }, "items-center")} key={idx}>
+          <span className={badge({ variant: "outline" }, "items-center")} key={idx}>
             <div className="text-xs italic">#</div>
             {val}
             <BiX
@@ -731,15 +740,16 @@ const Date = <Nullable extends boolean>({
   dateClassName,
 }: DateProps<Nullable>) => {
   return (
-    <div className={cn("flex flex-col", className)}>
+    <div {...agentAttrs(onChange)} className={cn("flex flex-col", className)}>
       {label ? <Label className={labelClassName} nullable={nullable} label={label} desc={desc} /> : null}
-      {/* //! daysi UI datetime-local 컴포넌트에 max 값 넣으면 오른쪽 끝 짤리는 버그 있음.*/}
+      {/* FIXME: daysi UI datetime-local 컴포넌트에 max 값 넣으면 오른쪽 끝 짤리는 버그 있음.*/}
       <input
         type={showTime ? "datetime-local" : "date"}
-        className={cn(
-          "input validator text-xs outline-none duration-200 focus-within:outline-none focus:outline-none",
+        className={inputRecipe({}, [
+
+          "user-invalid:border-destructive text-xs outline-none duration-200 focus-within:outline-none focus:outline-none",
           dateClassName,
-        )}
+        ])}
         min={min ? (showTime ? dayjs(min).format("YYYY-MM-DDTHH:mm") : dayjs(min).format("YYYY-MM-DD")) : undefined}
         max={max ? (showTime ? dayjs(max).format("YYYY-MM-DDTHH:mm") : dayjs(max).format("YYYY-MM-DD")) : undefined}
         value={value ? (showTime ? dayjs(value).format("YYYY-MM-DDTHH:mm") : dayjs(value).format("YYYY-MM-DD")) : ""}
@@ -868,6 +878,7 @@ const Number = ({
     <div className={cn("flex flex-col", className)}>
       {label ? <Label className={labelClassName} nullable={nullable} label={label} desc={desc} unit={unit} /> : null}
       <Input.Number
+        {...agentAttrs(onChange)}
         min={min}
         max={max}
         cacheKey={cache ? `${label}-${desc}-number` : undefined}
@@ -935,7 +946,7 @@ const DoubleNumber = ({
 }: DoubleNumberProps) => {
   const { l } = usePage();
   return (
-    <div className={cn("flex flex-col", className)}>
+    <div {...agentAttrs(onChange)} className={cn("flex flex-col", className)}>
       {label ? <Label className={labelClassName} nullable={nullable} label={label} desc={desc} /> : null}
       <div className="flex items-center gap-2">
         <Input.Number
@@ -1025,6 +1036,7 @@ const Email = ({
     <div className={cn("flex flex-col", className)}>
       {label ? <Label className={labelClassName} nullable={nullable} label={label} desc={desc} /> : null}
       <Input.Email
+        {...agentAttrs(onChange)}
         value={value ?? ""}
         cacheKey={cache ? `${label}-${desc}-email` : undefined}
         nullable={nullable}
@@ -1089,6 +1101,7 @@ const Phone = ({
     <div className={cn("flex flex-col", className)}>
       {label ? <Label className={labelClassName} nullable={nullable} label={label} desc={desc} /> : null}
       <Input
+        {...agentAttrs(onChange)}
         value={value ?? ""}
         cacheKey={cache ? `${label}-${desc}-phone` : undefined}
         nullable={nullable}
@@ -1159,6 +1172,7 @@ const Password = ({
       {label ? <Label className={labelClassName} nullable={nullable} label={label} desc={desc} /> : null}
       <div className="flex flex-col gap-2">
         <Input.Password
+          {...agentAttrs(onChange)}
           cacheKey={cache ? `${label}-${desc}-password` : undefined}
           value={value ?? ""}
           nullable={nullable}

package/ui/Image.tsx

@@ -30,7 +30,7 @@ type AkanImageProps = NativeImageProps & {
   /** Akan file object or file-like value with url and imageSize metadata. */
   file?: ImageLikeFile;
   /** Low-quality preview data. Overrides file.abstractData when provided. */
-  abstractData?: string;
+  abstractData?: string | null;
   /** Accessible alt text. Defaults to "image" when omitted. */
   alt?: string;
   /** Image optimizer quality. Defaults to 75. */
@@ -59,12 +59,12 @@ export const Image = ({
     | {
         src?: string;
         file?: ProtoFile;
-        abstractData?: string;
+        abstractData?: string | null;
         alt?: string;
       }
     | {
         src?: undefined;
-        abstractData?: string;
+        abstractData?: string | null;
         file: { url: string; imageSize: [number, number]; abstractData?: string | null } | null;
         alt?: string;
       }

package/ui/Input.tsx

@@ -13,11 +13,9 @@ import React, {
 } from "react";
 import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai";
 
+import { agentAttrs } from "./agentAttrs";
 import { inputRecipe } from "./recipe";
-import { createOverridable } from "./UiOverride";
-
-const inputBase = inputRecipe();
-const textareaBase = inputRecipe({ kind: "area" });
+import { createOverridable, useUiRecipe } from "./UiOverride";
 
 export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> & {
   /** Visual input style. */
@@ -64,6 +62,7 @@ const DefaultInput = ({
   const { l } = usePage();
   const [firstFocus, setFirstFocus] = useState(true);
   const validateResult = validate ? validate(value) : undefined;
+  const inputBase = (useUiRecipe("input") ?? inputRecipe)();
   const status: "error" | "warning" | "success" | null =
     !nullable && !value ? null : !value.length ? "warning" : validateResult === true ? "success" : "error";
   const invalidMessage =
@@ -110,6 +109,7 @@ const DefaultInput = ({
       {icon ? <div className={cn("flex items-center justify-center", iconClassName)}>{icon}</div> : null}
       <input
         {...rest}
+        {...agentAttrs(onChange)}
         ref={inputRef}
         value={value}
         onChange={(e) => {
@@ -169,6 +169,7 @@ const DefaultTextArea = ({
   const { l } = usePage();
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const validateResult = validate(value);
+  const textareaBase = (useUiRecipe("input") ?? inputRecipe)({ kind: "area" });
   const [firstFocus, setFirstFocus] = useState(true);
   const status: "error" | "warning" | "success" =
     !nullable && !value.length ? "warning" : validateResult === true ? "success" : "error";
@@ -202,6 +203,7 @@ const DefaultTextArea = ({
     <div className={cn("relative mb-5", className)}>
       <textarea
         {...rest}
+        {...agentAttrs(onChange)}
         ref={inputRef}
         value={value}
         onChange={(e) => {
@@ -263,6 +265,7 @@ const DefaultPassword = ({
   const validateResult = validate(value);
   const [firstFocus, setFirstFocus] = useState(true);
   const [showPassword, setShowPassword] = useState(false);
+  const inputBase = (useUiRecipe("input") ?? inputRecipe)();
   const status: "error" | "warning" | "success" =
     !nullable && !value.length ? "warning" : validateResult === true ? "success" : "error";
   const invalidMessage =
@@ -301,6 +304,7 @@ const DefaultPassword = ({
         ) : null}
         <input
           {...rest}
+          {...agentAttrs(onChange)}
           type={showPassword ? "text" : "password"}
           ref={inputRef}
           value={value}
@@ -373,6 +377,7 @@ const DefaultEmail = ({
   const { l } = usePage();
   const inputRef = useRef<HTMLInputElement>(null);
   const isValidEmail = isEmail(value);
+  const inputBase = (useUiRecipe("input") ?? inputRecipe)();
   const [firstFocus, setFirstFocus] = useState(true);
   const validateResult = !isValidEmail ? l("base.emailInvalidError") : validate(value);
   const status: "error" | "warning" | "success" =
@@ -418,6 +423,7 @@ const DefaultEmail = ({
         ) : null}
         <input
           {...rest}
+          {...agentAttrs(onChange)}
           type="email"
           value={value}
           ref={inputRef}
@@ -484,6 +490,7 @@ const DefaultNumber = ({
   const { l } = usePage();
   const inputRef = useRef<HTMLInputElement>(null);
   const validateResult = validate ? validate(value) : undefined;
+  const inputBase = (useUiRecipe("input") ?? inputRecipe)();
   const generateFormat = () => {
     return isNaN(value ?? 0) ? "" : formatter ? formatter(value?.toString() ?? "") : (value?.toString() ?? "");
   };
@@ -584,6 +591,7 @@ const DefaultNumber = ({
         ) : null}
         <input
           {...rest}
+          {...agentAttrs(onChange)}
           ref={inputRef}
           value={formatValue}
           onKeyDown={handleKeyDown}
@@ -621,9 +629,10 @@ const DefaultCheckbox = ({ checked, onChange, className, ...rest }: CheckboxProp
   return (
     <input
       {...rest}
+      {...agentAttrs(onChange)}
       type="checkbox"
       checked={checked}
-      className={cn("checkbox", className)}
+      className={cn("size-5 accent-primary", className)}
       onChange={(e) => {
         onChange(e.target.checked, e);
       }}

package/ui/Layout/BottomInset.tsx

@@ -9,6 +9,7 @@ export interface BottomInsetProps {
   className?: string;
   children: ReactNode;
   keyboardSticky?: boolean;
+  contentAnchor?: "bottom";
   role?: "bottomChrome" | "keyboardAccessory";
   estimatedHeight?: number;
   frameScope?: FrameSlotRegistration["scope"];
@@ -20,6 +21,7 @@ export const BottomInset = ({
   className,
   children,
   keyboardSticky,
+  contentAnchor,
   role,
   estimatedHeight,
   frameScope = "page",
@@ -49,12 +51,13 @@ export const BottomInset = ({
     debugFrame("bottomInset.mount", {
       path,
       keyboardSticky,
+      contentAnchor,
       role: frameRole,
       frameScope,
       frameSource,
     });
     return () => debugFrame("bottomInset.unmount", { path, frameSource });
-  }, [path, keyboardSticky, frameRole, frameScope, frameSource]);
+  }, [path, keyboardSticky, contentAnchor, frameRole, frameScope, frameSource]);
   useLayoutEffect(() => {
     if (!path) return;
     const height = useDeclaredHeight ? resolvedEstimatedHeight : (measuredHeight ?? readContentHeight());
@@ -63,6 +66,7 @@ export const BottomInset = ({
       role: frameRole,
       scope: frameScope,
       source: frameSource,
+      contentAnchor,
       estimatedHeight: resolvedEstimatedHeight,
       height,
       cache: frameCache,
@@ -72,6 +76,7 @@ export const BottomInset = ({
     frameRole,
     frameScope,
     frameSource,
+    contentAnchor,
     resolvedEstimatedHeight,
     measuredHeight,
     frameCache,

package/ui/Load/Units.tsx

@@ -3,10 +3,10 @@ import { DataList } from "akanjs/base";
 import { cn } from "akanjs/client";
 import { capitalize, isQueryEqual, lowerlize } from "akanjs/common";
 import type { BaseInsight } from "akanjs/constant";
-import { ConstantRegistry } from "akanjs/constant";
+import { ConstantRegistry, labelOf } from "akanjs/constant";
 import type { ClientInit, ServerInit } from "akanjs/fetch";
 import { st } from "akanjs/store";
-import { useFetch } from "akanjs/webkit";
+import { useFetch, useScreenScope } from "akanjs/webkit";
 import { type ReactNode, type RefObject, useEffect, useMemo, useRef } from "react";
 
 import { Empty } from "../Empty";
@@ -183,6 +183,15 @@ function Render<RefName extends string, Light extends { id: string }>({
   };
 
   const modelDataList = !loaded.current ? modelInitList.filter(filter).sort(sort) : modelList.filter(filter).sort(sort);
+  useScreenScope({
+    id: sliceName,
+    kind: refName,
+    items: () =>
+      modelDataList.map((item) => {
+        const label = labelOf(cnst.full, item);
+        return { id: item.id, ...(label ? { label } : {}) };
+      }),
+  });
   const showLoading = loaded.current && modelListLoading;
   if (renderList)
     return (

package/ui/Load/View.tsx

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "akanjs/client";
-import { ConstantRegistry } from "akanjs/constant";
+import { ConstantRegistry, labelOf } from "akanjs/constant";
 import type { ClientView, ServerView } from "akanjs/fetch";
 import { st } from "akanjs/store";
-import { useFetch } from "akanjs/webkit";
+import { useFetch, useScreenScope } from "akanjs/webkit";
 import { type ReactNode, useEffect, useMemo, useRef } from "react";
 
 import { Empty } from "../Empty";
@@ -72,6 +72,11 @@ function Render<T extends string, Full extends { id: string }>({
   }, [modelViewAt, modelObj.id]);
 
   const renderModel = loadedId.current === modelObj.id ? model : modelInit;
+  useScreenScope({
+    id: `${refName}-view`,
+    kind: refName,
+    label: renderModel ? labelOf(cnst.full, renderModel) : undefined,
+  });
 
   return noDiv && renderModel ? (
     <>{renderView(renderModel)}</>

package/ui/Loading/ProgressBar.tsx

@@ -10,5 +10,12 @@ export interface ProgressBarProps {
 }
 export const ProgressBar = ({ className, value, max }: ProgressBarProps) => {
   const progress = useSpring({ value: 0, to: { value: value } });
-  return <animated.progress className={cn("progress w-full", className)} value={progress.value} max={max} />;
+
+  return (
+    <animated.progress
+      className={cn("h-2 w-full rounded-box accent-primary", className)}
+      value={progress.value}
+      max={max}
+    />
+  );
 };

package/ui/Menu.tsx

@@ -5,7 +5,7 @@ import { type ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useSta
 import { AiFillCaretDown, AiOutlineEllipsis } from "react-icons/ai";
 import { buttonRecipe } from "./Button";
 
-import { createOverridable } from "./UiOverride";
+import { createOverridable, useUiRecipe } from "./UiOverride";
 
 export interface MenuItem {
   label: ReactNode;
@@ -62,13 +62,11 @@ export const DefaultMenu = ({
       ? `fixed bottom-0 flex translate-y-[98%] flex-col rounded-xs border-0 bg-background shadow-lg hover:bg-background`
       : "flex flex-col gap-0 p-0 bg-primary/10 hover:bg-primary/10 overflow-hidden";
 
+  const recipe = useUiRecipe("button") ?? buttonRecipe;
   const subMenuItemClassName =
     mode === "inline"
-      ? buttonRecipe({ variant: "ghost" }, "m-0 h-full w-full px-2 font-normal text-primary hover:bg-primary/20")
-      : buttonRecipe(
-          { variant: "ghost" },
-          "w-full whitespace-nowrap text-center font-normal text-primary duration-300",
-        );
+      ? recipe({ variant: "ghost" }, "m-0 h-full w-full px-2 font-normal text-primary hover:bg-primary/20")
+      : recipe({ variant: "ghost" }, "w-full whitespace-nowrap text-center font-normal text-primary duration-300");
 
   const [overflowMenuItems, setOverflowMenuItems] = useState<MenuItem[]>([]);
 
@@ -222,6 +220,7 @@ interface OverflowMenuProps {
 const OverflowMenu = ({ overflowItems, onClick }: OverflowMenuProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [expandedKey, setExpandedKey] = useState<string>(); 
+  const recipe = useUiRecipe("button") ?? buttonRecipe;
   const handleMouseEnter = () => {
     setIsOpen(true);
   };
@@ -239,7 +238,7 @@ const OverflowMenu = ({ overflowItems, onClick }: OverflowMenuProps) => {
             <div
               key={item.key}
               onClick={() => onClick?.(item)}
-              className={buttonRecipe({ variant: "ghost" }, "relative whitespace-nowrap font-normal text-primary")}
+              className={recipe({ variant: "ghost" }, "relative whitespace-nowrap font-normal text-primary")}
               onMouseEnter={() => {
                 if (item.children && expandedKey !== item.key) setExpandedKey(item.key);
               }}
@@ -258,7 +257,7 @@ const OverflowMenu = ({ overflowItems, onClick }: OverflowMenuProps) => {
                         setExpandedKey(undefined);
                       }}
                       key={child.key}
-                      className={buttonRecipe(
+                      className={recipe(
                         { variant: "ghost" },
                         "flex items-center justify-center text-center font-normal text-primary",
                       )}

package/ui/Model/EditModal.tsx

@@ -5,7 +5,7 @@ import { ConstantRegistry, immerify } from "akanjs/constant";
 import type { ClientEdit, ServerEdit, SliceMeta } from "akanjs/fetch";
 import { type CreateOption, type Submit, st } from "akanjs/store";
 import { useDebounce } from "akanjs/webkit";
-import { type ReactNode, type Usable, use, useCallback, useEffect, useMemo } from "react";
+import { type ReactNode, type Usable, use, useCallback, useEffect, useMemo, useRef } from "react";
 import { AiOutlinePlus, AiOutlineSave } from "react-icons/ai";
 
 import { Button } from "../Button";
@@ -13,6 +13,10 @@ import { Modal } from "../Modal";
 
 const EDIT_PAYLOAD_MAX_AGE_MS = 60_000;
 
+const pendingModalResets = new Map<string, { cancel: () => void }>();
+const modalResetKey = (modelName: string, modalName: string, modalId?: string) =>
+  `${modelName}|${modalName}|${modalId ?? ""}`;
+
 interface EditModelProps<Full> {
   /** Rendering mode for the edit shell. */
   type?: "modal" | "form" | "empty";
@@ -202,9 +206,40 @@ export default function EditModal<Full extends { id: string }>({
       const crystal = new modelRef().set(modelEdit as Full) as unknown as Full;
       void storeDo[names.newModel](crystal, { modal, setDefault: true, sliceName });
     }
+  }, [modelEdit, isEditPayloadStale]);
+
+  const ownershipRef = useRef({ wasOpen: false, modalName: modal ?? "edit", modalId });
+  useEffect(() => {
+    ownershipRef.current = {
+      wasOpen: ownershipRef.current.wasOpen || isModalOpen,
+      modalName: modal ?? "edit",
+      modalId,
+    };
+  }, [isModalOpen, modal, modalId]);
+  useEffect(() => {
+    pendingModalResets.get(modalResetKey(modelName, modal ?? "edit", modalId))?.cancel();
     return () => {
+
+      const { wasOpen, modalName, modalId } = ownershipRef.current;
+      if (!wasOpen) return;
+      const key = modalResetKey(modelName, modalName, modalId);
+      let cancelled = false;
+      pendingModalResets.set(key, {
+        cancel: () => {
+          cancelled = true;
+        },
+      });
+      queueMicrotask(() => {
+        pendingModalResets.delete(key);
+        if (cancelled) return;
+        const state = st.get() as unknown as { [key: string]: unknown };
+        if (state[names.modelModal] !== modalName) return;
+        const formId = (state[names.modelForm] as { id: string | null } | undefined)?.id ?? null;
+        if (formId !== (modalId ?? null)) return;
+        void storeDo[names.setModelModal](null);
+      });
     };
-  }, [modelEdit, isEditPayloadStale]);
+  }, []);
 
   const handleCancel = useCallback(() => {
     const modelForm = (st.get() as any)[names.modelForm] as Full;