akanjs 3.1.0-rc.2 → 3.1.0-rc.21

package/ui/Field/Collection.tsx

@@ -50,6 +50,7 @@ export const List = <Item,>({
               {renderItem(item, idx)}
               <div className="flex gap-2 border-border border-l pl-2">
                 <button
+                  type="button"
                   className={recipe(
                     { variant: "outline", size: "icon" },
                     "size-6 border-destructive p-0 text-destructive hover:bg-destructive hover:text-destructive-foreground",
@@ -66,6 +67,7 @@ export const List = <Item,>({
           </Fragment>
         ))}
         <button
+          type="button"
           className={recipe({ variant: "outline" })}
           onClick={() => {
             onAdd();
@@ -151,6 +153,7 @@ export const TextList = ({
                     disabled={disabled}
                   />
                   <button
+                    type="button"
                     className={recipe(
                       { variant: "outline", size: "icon" },
                       "size-6 border-destructive p-0 text-destructive hover:bg-destructive hover:text-destructive-foreground",
@@ -169,6 +172,7 @@ export const TextList = ({
         <div className="my-5 h-[0.5px] bg-foreground/20" />
         {texts.length < maxlength ? (
           <button
+            type="button"
             className={recipe({ variant: "outline" }, "w-full")}
             onClick={() => {
               onChange([...texts, ""]);

package/ui/Field/Relation.tsx

@@ -24,7 +24,7 @@ const renderRow = <Light extends { id: string }>(
   return model ? render(model) : <Unresolved id={id} />;
 };
 
-interface RelationProps<Light> {
+interface RelationProps<Light, Sort> {
   label?: string;
   desc?: string;
   labelClassName?: string;
@@ -32,18 +32,21 @@ interface RelationProps<Light> {
   disabled?: boolean;
   nullable?: boolean;
   initArgs?: any[];
-  slice: SliceMeta;
+  slice: SliceMeta<Sort>;
+  /** Either one gives the field its own option window, leaving the slice's list on the page as it is. */
+  limit?: number;
+  sort?: NoInfer<Sort> & string;
   onSearch?: (text: string) => void;
   sortOption?: (a: Light, b: Light) => number;
 }
-export interface ParentProps<Light> extends RelationProps<Light> {
+export interface ParentProps<Light, Sort = unknown> extends RelationProps<Light, Sort> {
   selectClassName?: string;
   value: Light | null;
   onChange: (value: Light | null) => void;
   renderOption: (model: Light) => ReactNode;
   renderSelected?: (value: Light) => ReactNode;
 }
-export const Parent = <Light extends { id: string }>({
+export const Parent = <Light extends { id: string }, Sort = unknown>({
   label,
   desc,
   labelClassName,
@@ -52,6 +55,8 @@ export const Parent = <Light extends { id: string }>({
   nullable,
   disabled,
   initArgs,
+  limit,
+  sort,
   slice,
   value,
   onChange,
@@ -59,12 +64,14 @@ export const Parent = <Light extends { id: string }>({
   sortOption,
   renderOption,
   renderSelected = renderOption,
-}: ParentProps<Light>) => {
+}: ParentProps<Light, Sort>) => {
   const { models, options, optionLabel, listLoading, load, read } = useRelationOptions<Light>({
     slice,
     ids: value ? [value.id] : [],
     pinned: [value],
     initArgs,
+    limit,
+    sort,
     sortOption,
     renderOption,
   });
@@ -92,14 +99,14 @@ export const Parent = <Light extends { id: string }>({
   );
 };
 
-export interface ParentIdProps<Light> extends RelationProps<Light> {
+export interface ParentIdProps<Light, Sort = unknown> extends RelationProps<Light, Sort> {
   selectClassName?: string;
   value: string | null;
   onChange: (id: string | null, model: Light | null) => void;
   renderOption?: (model: Light) => ReactNode;
   renderSelected?: (value: Light) => ReactNode;
 }
-export const ParentId = <Light extends { id: string }>({
+export const ParentId = <Light extends { id: string }, Sort = unknown>({
   label,
   desc,
   className,
@@ -108,6 +115,8 @@ export const ParentId = <Light extends { id: string }>({
   nullable,
   disabled,
   initArgs,
+  limit,
+  sort,
   slice,
   value,
   onChange,
@@ -115,11 +124,13 @@ export const ParentId = <Light extends { id: string }>({
   sortOption,
   renderOption,
   renderSelected = renderOption,
-}: ParentIdProps<Light>) => {
+}: ParentIdProps<Light, Sort>) => {
   const { models, options, optionLabel, listLoading, load } = useRelationOptions<Light>({
     slice,
     ids: value ? [value] : [],
     initArgs,
+    limit,
+    sort,
     sortOption,
     renderOption,
   });
@@ -149,14 +160,14 @@ export const ParentId = <Light extends { id: string }>({
   );
 };
 
-export interface ChildrenProps<Light> extends RelationProps<Light> {
+export interface ChildrenProps<Light, Sort = unknown> extends RelationProps<Light, Sort> {
   selectClassName?: string;
   value: Light[] | null;
   onChange: (value: Light[]) => void;
   renderOption: (model: Light) => ReactNode;
   renderSelected?: (value: Light) => ReactNode;
 }
-export const Children = <Light extends { id: string }>({
+export const Children = <Light extends { id: string }, Sort = unknown>({
   label,
   desc,
   labelClassName,
@@ -165,6 +176,8 @@ export const Children = <Light extends { id: string }>({
   nullable,
   disabled,
   initArgs,
+  limit,
+  sort,
   slice,
   value,
   onChange,
@@ -172,12 +185,14 @@ export const Children = <Light extends { id: string }>({
   sortOption,
   renderOption,
   renderSelected = renderOption,
-}: ChildrenProps<Light>) => {
+}: ChildrenProps<Light, Sort>) => {
   const { models, options, optionLabel, listLoading, load, read } = useRelationOptions<Light>({
     slice,
     ids: (value ?? []).map((model) => model.id),
     pinned: value ?? [],
     initArgs,
+    limit,
+    sort,
     sortOption,
     renderOption,
   });
@@ -206,12 +221,12 @@ export const Children = <Light extends { id: string }>({
   );
 };
 
-export interface ChildrenIdProps<Light> extends RelationProps<Light> {
+export interface ChildrenIdProps<Light, Sort = unknown> extends RelationProps<Light, Sort> {
   value: string[] | null;
   onChange: (value: string[]) => void;
   renderOption: (model: Light) => ReactNode;
 }
-export const ChildrenId = <Light extends { id: string }>({
+export const ChildrenId = <Light extends { id: string }, Sort = unknown>({
   label,
   desc,
   labelClassName,
@@ -219,17 +234,21 @@ export const ChildrenId = <Light extends { id: string }>({
   nullable,
   disabled,
   initArgs,
+  limit,
+  sort,
   slice,
   value,
   onChange,
   onSearch,
   sortOption,
   renderOption,
-}: ChildrenIdProps<Light>) => {
+}: ChildrenIdProps<Light, Sort>) => {
   const { models, options, listLoading, load } = useRelationOptions<Light>({
     slice,
     ids: value ?? [],
     initArgs,
+    limit,
+    sort,
     sortOption,
     renderOption,
   });

package/ui/Field/useRelationOptions.ts

@@ -6,6 +6,7 @@ import type { SliceMeta } from "akanjs/fetch";
 import { st } from "akanjs/store";
 import { type ReactNode, useEffect, useMemo, useState } from "react";
 import { LightRefCache } from "./lightRefCache";
+import { useRelationWindow } from "./useRelationWindow";
 
 export interface RelationOptionsSource<Light extends { id: string }> {
   slice: SliceMeta;
@@ -14,6 +15,8 @@ export interface RelationOptionsSource<Light extends { id: string }> {
   /** Rows the control was handed outright, which a `Light`-valued field's own value already is. */
   pinned?: (Light | null)[];
   initArgs?: any[];
+  limit?: number;
+  sort?: string;
   sortOption?: (a: Light, b: Light) => number;
   renderOption?: (model: Light) => ReactNode;
 }
@@ -34,21 +37,30 @@ export const useRelationOptions = <Light extends { id: string }>({
   ids,
   pinned,
   initArgs,
+  limit,
+  sort,
   sortOption,
   renderOption,
 }: RelationOptionsSource<Light>) => {
-  const { refName, sliceName } = slice;
+  const { refName, sliceName, argLength } = slice;
   const [modelName, ModelName] = [lowerlize(refName), capitalize(refName)];
   const names = {
     modelList: sliceName.replace(modelName, `${modelName}List`),
     modelListLoading: sliceName.replace(modelName, `${modelName}ListLoading`),
     refreshModel: sliceName.replace(modelName, `refresh${ModelName}`),
+    queryArgsOfModel: sliceName.replace(modelName, `queryArgsOf${ModelName}`),
+    limitOfModel: sliceName.replace(modelName, `limitOf${ModelName}`),
+    sortOfModel: sliceName.replace(modelName, `sortOf${ModelName}`),
   };
   const storeUse = st.use as { [key: string]: () => unknown };
   const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
   const storeGet = st.get as unknown as <V>() => { [key: string]: V };
-  const sliceList = storeUse[names.modelList]() as DataList<Light>;
-  const listLoading = storeUse[names.modelListLoading]() as boolean;
+  const storeList = storeUse[names.modelList]() as DataList<Light>;
+  const storeListLoading = storeUse[names.modelListLoading]() as boolean;
+  const ownWindow = useRelationWindow<Light>(names.modelList, argLength);
+  const isWindowed = limit !== undefined || sort !== undefined;
+  const sliceList = isWindowed ? ownWindow.list : storeList;
+  const listLoading = isWindowed ? ownWindow.loading : storeListLoading;
   const [resolvedCount, setResolvedCount] = useState(0);
 
   const held = (pinned ?? []).filter((row): row is Light => !!row);
@@ -78,6 +90,19 @@ export const useRelationOptions = <Light extends { id: string }>({
     return labelOf(cnst?.full, model) ?? model.id;
   };
   const options = useMemo(() => models.map((model) => ({ label: optionLabel(model), value: model.id })), [models]);
+  
+  const windowQuery = () => {
+    const state = storeGet<unknown>();
+    const args = initArgs ?? [];
+    return {
+      queryArgs: [
+        ...args.slice(0, argLength),
+        ...(state[names.queryArgsOfModel] as unknown[]).slice(args.length, argLength),
+      ],
+      limit: limit ?? (state[names.limitOfModel] as number),
+      sort: sort ?? (state[names.sortOfModel] as string),
+    };
+  };
 
   return {
     models,
@@ -85,11 +110,14 @@ export const useRelationOptions = <Light extends { id: string }>({
     optionLabel,
     listLoading,
     
-    load: () => storeDo[names.refreshModel]({ invalidate: false, queryArgs: initArgs }),
+    load: () =>
+      isWindowed
+        ? ownWindow.load(windowQuery())
+        : storeDo[names.refreshModel]({ invalidate: false, queryArgs: initArgs }),
     
     read: () =>
       merge(
-        storeGet<DataList<Light>>()[names.modelList],
+        isWindowed ? ownWindow.read() : storeGet<DataList<Light>>()[names.modelList],
         [...held, ...ids.map((id) => LightRefCache.get<Light>(refName, id))],
         sortOption,
       ),

package/ui/Field/useRelationWindow.ts

@@ -0,0 +1,50 @@
+"use client";
+import { DataList } from "akanjs/base";
+import { fetch } from "akanjs/client";
+import { isQueryEqual } from "akanjs/common";
+import { useRef, useState } from "react";
+
+export interface RelationWindowQuery {
+  queryArgs: unknown[];
+  limit: number;
+  sort: string;
+}
+
+interface WindowHold<Light extends { id: string }> {
+  list: DataList<Light>;
+  query: RelationWindowQuery | null;
+  request: Promise<void> | null;
+}
+
+export const useRelationWindow = <Light extends { id: string }>(listName: string, argLength: number) => {
+  const [list, setList] = useState(() => new DataList<Light>());
+  const [loading, setLoading] = useState(false);
+  const hold = useRef<WindowHold<Light>>({ list, query: null, request: null });
+
+  const load = (query: RelationWindowQuery) => {
+    const current = hold.current;
+    if (current.query && current.request && isQueryEqual(current.query, query)) return current.request;
+    const listFn = (fetch as unknown as { [key: string]: (...args: unknown[]) => Promise<Light[]> })[listName];
+    const args = Array.from({ length: argLength }, (_, idx) => query.queryArgs[idx]);
+    setLoading(true);
+    const request: Promise<void> = listFn(...args, 0, query.limit, query.sort)
+      .then((rows) => {
+        if (hold.current.request !== request) return;
+        hold.current.list = new DataList(rows);
+        setList(hold.current.list);
+      })
+      .catch((error: unknown) => {
+        
+        if (hold.current.request === request) hold.current.query = null;
+        throw error;
+      })
+      .finally(() => {
+        if (hold.current.request === request) setLoading(false);
+      });
+    hold.current.query = query;
+    hold.current.request = request;
+    return request;
+  };
+
+  return { list, loading, load, read: () => hold.current.list };
+};

package/ui/Image.tsx

@@ -19,7 +19,9 @@ const EMPTY_IMAGE = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAAL
 
 type NativeImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "alt" | "src" | "srcSet"> & {
   fill?: boolean;
+  /** Accepted for next/image compatibility; an `<img>` has no such attribute, so it draws nothing. */
   placeholder?: string;
+  /** Accepted for next/image compatibility; an `<img>` has no such attribute, so it draws nothing. */
   blurDataURL?: string;
 };
 
@@ -27,7 +29,7 @@ type AkanImageProps = NativeImageProps & {
   /** Takes precedence over `file.url`. */
   src?: string;
   file?: ImageLikeFile;
-  /** Overrides `file.abstractData`. */
+  /** Overrides `file.abstractData`, which no render path draws as a placeholder. */
   abstractData?: string | null;
   /** Defaults to "image". */
   alt?: string;
@@ -63,7 +65,6 @@ export const Image = (
   const url = src || file?.url || null;
   const [width, height] = [props.width ?? file?.imageSize[0], props.height ?? file?.imageSize[1]];
 
-  const blurDataURL = abstractData ?? file?.abstractData;
   const isPriority = Boolean(priority || preload);
 
   const optimized = url
@@ -79,7 +80,7 @@ export const Image = (
     });
   }
 
-  const { fill, ...imgProps } = props;
+  const { fill, placeholder, blurDataURL, ...imgProps } = props;
 
   return (
     <img
@@ -93,7 +94,6 @@ export const Image = (
       loading={props.loading ?? (isPriority ? "eager" : "lazy")}
       decoding={props.decoding ?? "async"}
       fetchPriority={props.fetchPriority ?? (isPriority ? "high" : undefined)}
-      {...(blurDataURL ? { placeholder: "blur", blurDataURL } : {})}
       {...imgProps}
     />
   );

package/ui/Input.tsx

@@ -272,6 +272,7 @@ const DefaultPassword = ({
         />
         <div className="absolute top-1/2 right-2 flex -translate-y-1/2 items-center justify-center">
           <button
+            type="button"
             onClick={() => {
               setShowPassword(!showPassword);
             }}

package/ui/Layout/Sider.tsx

@@ -127,7 +127,7 @@ export const LeftSider = ({ className, children, open, width, close, onCancel }:
           }}
         >
           {close ?? (
-            <button className={buttonRecipe({ variant: "ghost", size: "icon" })}>
+            <button type="button" className={buttonRecipe({ variant: "ghost", size: "icon" })}>
               <BiX />
             </button>
           )}

package/ui/Link/Anchor.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { getEnv } from "akanjs/base";
-import { cn, csrLocation, getPathInfo, router, usePage, usePathCtx } from "akanjs/client";
+import { cn, csrLocation, getPathInfo, Href, router, usePage, usePathCtx } from "akanjs/client";
 import { openExternalUrl } from "akanjs/client/native";
 import { Logger } from "akanjs/common";
 import { st } from "akanjs/store";
@@ -50,10 +50,12 @@ export const CsrLink = ({
       onClick={(event) => {
         props.onClick?.(event);
         if (event.defaultPrevented) return;
-        const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
+        const isExternal = Href.isExternal(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 });
+        if (isExternal) {
+          const target = Href.toExternalUrl(href, document.baseURI);
+          void openExternalUrl(target).catch(() => window.open(target, "_blank", "noopener,noreferrer"));
+        } else if (replace) router.replace(url, { scrollToTop });
         else router.push(url, { scrollToTop });
       }}
     >
@@ -78,7 +80,7 @@ export const SsrLink = ({
   const { lang } = usePage();
   const pathname = useCurrentPathname();
   const currentPath = getPathInfo(pathname, lang, prefix).path;
-  const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
+  const isExternal = Href.isExternal(href);
   const internalPathInfo = getPathInfo(href, lang, prefix);
   const requestHref = getEnv().operationMode === "local" ? internalPathInfo.href : getPathInfo(href, lang, "").href;
   const path = internalPathInfo.path;

package/ui/Load/Units.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { DataList } from "akanjs/base";
-import { cn, router } from "akanjs/client";
+import { cn, isRscNavigationFromCache, router } from "akanjs/client";
 import { type DynamicRecord, isQueryEqual, lowerlize } from "akanjs/common";
 import type { BaseInsight } from "akanjs/constant";
 import { ConstantRegistry, labelOf, withSharedInstances } from "akanjs/constant";
@@ -52,7 +52,7 @@ function Render<RefName extends string, Light extends { id: string }>({
   noDiv,
   from,
   to,
-  loading,
+  loading = <Loading.Area />,
   empty,
   renderItem,
   renderList,
@@ -142,9 +142,11 @@ function Render<RefName extends string, Light extends { id: string }>({
   }, [initSignature, queryArgsSignature]);
 
   useEffect(() => {
+    
+    const seededFromReplay = !loaded && isRscNavigationFromCache();
     const modelStaleAt = storeGet<Date>()[namesOfSlice.modelStaleAt];
     const staleThreshold = Math.max(modelStaleAt.getTime(), staleTime === undefined ? 0 : Date.now() - staleTime);
-    if (storeGet<Date>()[namesOfSlice.modelInitAt].getTime() >= staleThreshold) return;
+    if (!seededFromReplay && storeGet<Date>()[namesOfSlice.modelInitAt].getTime() >= staleThreshold) return;
     if (storeGet<boolean>()[namesOfSlice.modelListLoading]) return;
     void storeDo[namesOfSlice.refreshModel]({ invalidate: true });
   }, [initSignature]);
@@ -213,12 +215,11 @@ function Render<RefName extends string, Light extends { id: string }>({
         ) : typeof renderEmpty === "function" ? (
           renderEmpty()
         ) : null}
-        {showLoading ? (loading ?? <Loading.Area />) : null}
+        {showLoading ? loading : null}
       </>
     );
   else if (!renderItem) throw new Error("renderItem is required");
 
-  const RenderItem = ({ model, idx }: { model: Light; idx: number }) => renderItem(model, idx);
   return (
     <>
       <ContainerWrapper
@@ -232,14 +233,16 @@ function Render<RefName extends string, Light extends { id: string }>({
         {modelDataList.length
           ? (reverse ? [...modelDataList].reverse() : modelDataList)
               .slice(from ?? 0, to ?? modelDataList.length + 1)
-              .map((model: Light, idx: number) => <RenderItem key={model.id} model={model} idx={idx} />)
+              .map((model: Light, idx: number) => (
+                <RenderItem key={model.id} renderItem={renderItem} model={model} idx={idx} />
+              ))
           : empty !== undefined
             ? empty
             : typeof renderEmpty === "function"
               ? renderEmpty()
               : null}
       </ContainerWrapper>
-      {showLoading ? (loading ?? <Loading.Area />) : null}
+      {showLoading ? loading : null}
     </>
   );
 }
@@ -286,6 +289,13 @@ export default function Units<RefName extends string, Light extends { id: string
   );
 }
 
+interface RenderItemProps<Light> {
+  renderItem: (item: Light, idx: number) => ReactNode;
+  model: Light;
+  idx: number;
+}
+const RenderItem = <Light,>({ renderItem, model, idx }: RenderItemProps<Light>) => renderItem(model, idx);
+
 interface MoreProps {
   total: number;
   itemsPerPage: number;

package/ui/Load/View.tsx

@@ -11,7 +11,7 @@ import { Empty } from "../Empty";
 import { Loading } from "../Loading";
 import Stream from "./Stream";
 
-interface DefaultProps<T extends string, M> {
+interface DefaultProps<_T extends string, M> {
   className?: string;
   /** Renders the model without the default wrapper div. */
   noDiv?: boolean;
@@ -86,7 +86,7 @@ function Render<T extends string, Full extends { id: string }>({
   });
 
   return noDiv && renderModel ? (
-    <>{renderView(renderModel)}</>
+    renderView(renderModel)
   ) : renderModel ? (
     <div className={cn("w-full", className)} data-agent-scope={scopePath}>
       {renderView(renderModel)}

package/ui/Model/Edit.tsx

@@ -24,7 +24,7 @@ export default function Edit({ trigger, children, slice, modelId, modal, renderT
     <>
       <EditWrapper className="contents" slice={slice} modelId={modelId} modal={modal} draft={draft}>
         {trigger ?? (
-          <button className={buttonRecipe({ variant: "primary" })}>
+          <button type="button" className={buttonRecipe({ variant: "primary" })}>
             <AiOutlineEdit /> {l("base.edit")}
           </button>
         )}

package/ui/Model/EditModal.tsx

@@ -56,7 +56,7 @@ const EditModel = <Full,>({
   loadingWrapper,
   cancelEdit,
 }: OpenEditorProps<Full>) => {
-  const storeUse = st.use as { [key: string]: () => unknown };
+  const storeUse = st.use as { [key: string]: (option?: { agent?: boolean }) => unknown };
   const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => void };
   const { refName } = slice;
   const [modelName, ModelName] = useMemo(() => [lowerlize(refName), capitalize(refName)], []);
@@ -66,6 +66,7 @@ const EditModel = <Full,>({
       Model: ModelName,
       modelForm: `${modelName}Form`,
       modelFormLoading: `${modelName}FormLoading`,
+      modelFormUploading: `${modelName}FormUploading`,
       modelModal: `${modelName}Modal`,
       checkModelSubmitable: `check${ModelName}Submitable`,
     }),
@@ -73,6 +74,8 @@ const EditModel = <Full,>({
   );
   const modelModal = storeUse[names.modelModal]() as string | null;
   const modelForm = storeUse[names.modelForm]() as { id: string | null; [key: string]: any };
+  
+  const modelFormUploading = storeUse[names.modelFormUploading]({ agent: false });
 
   st.tool(cancelEdit ? `cancelEditOf${ModelName}` : null)
     .desc(`Close the ${modelName} form without saving.`)
@@ -84,7 +87,7 @@ const EditModel = <Full,>({
 
   useEffect(() => {
     if (checkSubmit) checkSubmitable();
-  }, [modelModal, modelForm]);
+  }, [modelModal, modelForm, modelFormUploading]);
 
   const LoadingWrapper = useMemo(() => {
     return loadingWrapper === false
@@ -167,6 +170,7 @@ export default function EditModal<Full extends { id: string }>({
       modelFormLoading: `${modelName}FormLoading`,
       modelModal: `${modelName}Modal`,
       modelSubmit: `${modelName}Submit`,
+      modelFormUploading: `${modelName}FormUploading`,
       submitModel: `submit${ModelName}`,
       resetModel: `reset${ModelName}`,
       setModelModal: `set${ModelName}Modal`,
@@ -301,6 +305,9 @@ export default function EditModal<Full extends { id: string }>({
           ? () => renderSubmit(storeUse[names.modelForm]() as Full)
           : () => {
               const modelSubmit = storeUse[names.modelSubmit]() as Submit;
+              const isUploading =
+                Object.keys(storeUse[names.modelFormUploading]({ agent: false }) as object).length > 0;
+              const isBlocked = modelSubmit.disabled || isUploading || !!disabled;
               const handleSubmit = async ({ onError }: { onError?: (e: string) => void } = {}) => {
                 await storeDo[names.submitModel]({
                   ...submitOption,
@@ -321,8 +328,7 @@ export default function EditModal<Full extends { id: string }>({
               };
               const submitModel = st
                 .tool(names.submitModel, {
-                  guard: () =>
-                    modelSubmit.disabled || disabled ? `The ${names.model} form is not ready to submit.` : true,
+                  guard: () => (isBlocked ? `The ${names.model} form is not ready to submit.` : true),
                 })
                 .desc(`Save the ${names.model} the open form holds.`)
                 .exec(() => handleSubmit());
@@ -330,7 +336,7 @@ export default function EditModal<Full extends { id: string }>({
                 <Button
                   {...agentAttrs(submitModel)}
                   className={cn("mt-4 w-full gap-2", submitClassName)}
-                  disabled={modelSubmit.disabled || !!disabled}
+                  disabled={isBlocked}
                   onClick={async (e, { onError }) => {
                     await handleSubmit({ onError });
                   }}

package/ui/Model/New.tsx

@@ -45,7 +45,7 @@ export default function New({
         draft={draft}
       >
         {trigger ?? (
-          <button className={buttonRecipe({ variant: "primary" })}>
+          <button type="button" className={buttonRecipe({ variant: "primary" })}>
             <AiOutlinePlus /> {l("base.new")}
           </button>
         )}

package/ui/Model/SureToRemove.tsx

@@ -89,6 +89,7 @@ export default function SureToRemove({
         bodyClassName="border-destructive"
         action={
           <button
+            type="button"
             className={buttonRecipe({ variant: "destructive" }, "w-full")}
             disabled={typeNameToRemove && repeatName !== name}
             onClick={async () => {