akanjs 3.0.0-alpha.36 → 3.0.0-alpha.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "3.0.0-alpha.36",
+  "version": "3.0.0-alpha.38",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {

package/store/action.ts

@@ -316,6 +316,11 @@ export const makeFormSetter = (refName: string, fetch: FetchProxy<any>) => {
                 : (value as object);
           (state[names.modelForm] as { [key: string]: any })[namesOfField.field] = setValue;
         });
+
+        const postSet = (this as unknown as { [key: string]: ((value: unknown) => unknown) | undefined })[
+          namesOfField.postSetField
+        ];
+        if (postSet) void postSet.call(this, value);
       },
       ...(field.isArray
         ? {

package/store/agent/ScreenReader.ts

@@ -248,6 +248,15 @@ export class ScreenReader {
     if (href && href !== "#" && !href.startsWith("javascript:") && text !== href) this.#buffer += ` (${href})`;
   }
 
+  /**
+   * A control the person cannot use publishes no tool, so saying so here is what turns a silent refusal into a
+   * fact the agent could have read. It reads `aria-disabled` too: a styled-off div carries no native property.
+   */
+  static #off(el: HTMLElement) {
+    const native = (el as HTMLInputElement | HTMLButtonElement).disabled;
+    return native || el.getAttribute("aria-disabled") === "true" ? " (disabled)" : "";
+  }
+
   #button(el: HTMLElement) {
     const before = this.#buffer;
     this.#walkChildren(el);
@@ -255,7 +264,7 @@ export class ScreenReader {
     this.#buffer = before;
     const label = inner || el.getAttribute("aria-label") || "";
     const action = el.getAttribute("data-akan-action");
-    if (label || action) this.#buffer += ` [button: ${label}${action ? ` → ${action}` : ""}]`;
+    if (label || action) this.#buffer += ` [button${ScreenReader.#off(el)}: ${label}${action ? ` → ${action}` : ""}]`;
   }
 
   #control(el: HTMLElement, tag: string) {
@@ -268,12 +277,13 @@ export class ScreenReader {
       el.getAttribute("placeholder") ??
       el.getAttribute("name") ??
       type;
+    const off = ScreenReader.#off(el);
     if (type === "password") {
-      this.#buffer += ` [input ${name}]`;
+      this.#buffer += ` [input ${name}${off}]`;
       return;
     }
     if (type === "checkbox" || type === "radio") {
-      this.#buffer += ` [${type} ${name}: ${input.checked ? "on" : "off"}]`;
+      this.#buffer += ` [${type} ${name}${off}: ${input.checked ? "on" : "off"}]`;
       return;
     }
     const raw =
@@ -282,7 +292,7 @@ export class ScreenReader {
           (el as unknown as HTMLSelectElement).value)
         : input.value;
     const value = (raw ?? "").replace(/\s+/g, " ").trim().slice(0, 120);
-    this.#buffer += ` [${tag === "SELECT" ? "select" : "input"} ${name}: ${JSON.stringify(value)}]`;
+    this.#buffer += ` [${tag === "SELECT" ? "select" : "input"} ${name}${off}: ${JSON.stringify(value)}]`;
   }
 
   #pre(el: HTMLElement) {

package/store/agentic/useFieldTool.ts

@@ -89,24 +89,77 @@ const rowEntries = (ref: FormFieldRef, arraySchema: JsonSchema): ToolEntry[] =>
   ];
 };
 
+export interface FieldToolOptions {
+  /** The control's own normalizer. Applied to the agent's write exactly as it is to the person's typing. */
+  transform?: unknown;
+  /** True while the person cannot use the control. Publishes nothing, so the agent gets no lever the screen withholds. */
+  disabled?: boolean;
+  /** The person can drag entries into a new order, so `move<Field>On<Model>` is a lever the screen really has. */
+  sortable?: boolean;
+}
+
+/**
+ * Reorder-by-position for a list the person can drag, beside the whole-array setter.
+ *
+ * The drag is the lever the screen actually offers, and it changes no row's content — so an agent asked to move one
+ * row should not have to retype the nine it is leaving alone, which is the same argument that gives an embedded-row
+ * array its `add`/`sub`. There is no store action behind it: reordering *is* a whole-array write, so this splices
+ * the live rows and hands them to the setter the drag hands them to, `transform` deliberately not applied — the
+ * values are already stored, and normalizing them again is not something dragging does.
+ */
+const moveEntry = (ref: FormFieldRef, onChange: () => (value: unknown) => unknown): ToolEntry => {
+  const name = formSetterNames(capitalize(ref.refName), ref.key).moveFieldOnModel;
+  return {
+    name,
+    description: `Move one entry of ${ref.key} on the ${ref.refName} form to another position, counting from 0. Reorders only — no entry's content changes.`,
+    parameters: {
+      type: "object",
+      properties: { from: { type: "integer" }, to: { type: "integer" } },
+      required: ["from", "to"],
+      additionalProperties: false,
+    },
+    effect: "state",
+    guard: (args) => {
+      const length = rowsOf(ref).length;
+      const outside = ["from", "to"].filter((key) => {
+        const idx = args[key];
+        return typeof idx !== "number" || !Number.isInteger(idx) || idx < 0 || idx >= length;
+      });
+      if (!outside.length) return true;
+      return `${ref.key} has ${length} ${length === 1 ? "entry" : "entries"}, so ${outside.join(" and ")} is out of range.`;
+    },
+    run: (args) => {
+      const rows = [...rowsOf(ref)];
+      const [moved] = rows.splice(args.from as number, 1);
+      rows.splice(args.to as number, 0, moved);
+      return onChange()(rows);
+    },
+  };
+};
+
 /**
- * Publishes the setter a form control is already holding, for exactly as long as the control is on screen.
+ * Publishes the setter a form control is already holding, for exactly as long as the control is usable.
  *
  * The control is the declaration — the same rule the rest of the surface follows. A handler passed by reference
  * (`onChange={st.do.setTitleOnTask}`) names the field it writes, so the tool and the person press one function;
  * an inline arrow names nothing and publishes nothing, which is the existing `data-akan-action` rule with
  * consequences. Publishing from the form's subscription instead would offer every field of the model, including
  * the ones this template draws no control for.
+ *
+ * `disabled` withdraws the tool for the same reason the whole surface is declaration-only: a field the person
+ * cannot type into is not one an agent may write in their place. It also closes the field to `fill<Model>Form`,
+ * whose guard offers only what a control published — so one gate covers both writers.
  */
-export const useFieldTool = (onChange: unknown, transform?: unknown) => {
+export const useFieldTool = (onChange: unknown, { transform, disabled, sortable }: FieldToolOptions = {}) => {
   const surface = useSurface();
   const scope = useScopePath();
   const action = actionTagOf(onChange)?.action ?? null;
+  const off = !!disabled;
   const live = useRef({ onChange, transform });
   live.current = { onChange, transform };
   const scopeKey = scope.join(".");
   useEffect(() => {
-    if (!action) return;
+    if (!action || off) return;
     const ref = FormFields.ref(action);
     const schema = ref && FormFields.schema(ref.field);
     if (!ref || !schema) return;
@@ -122,10 +175,13 @@ export const useFieldTool = (onChange: unknown, transform?: unknown) => {
         },
       },
       ...rowEntries(ref, schema),
+      ...(sortable && ref.field.arrDepth > 0
+        ? [moveEntry(ref, () => live.current.onChange as (value: unknown) => unknown)]
+        : []),
     ];
     const registered = entries.map((entry) => surface.registerTool(scope, entry));
     return () => {
       for (const unregister of registered) unregister();
     };
-  }, [surface, scopeKey, action]);
+  }, [surface, scopeKey, action, off, !!sortable]);
 };

package/store/agentic/useFormTools.ts

@@ -17,6 +17,11 @@ import { FormFields } from "./formFields";
  * controls will render. The **guard** is where the screen gets its say: a plain field has to have published its
  * own setter, and a composite is waved through because its rows are written with `writeOn<Model>(path, value)`,
  * which no control can annotate — so this is the one place an agent can reach a field the screen may not show.
+ *
+ * Registered `shared`, because the entry is a pure function of `refName`: the schema comes from the model, the
+ * guard re-reads the live surface, and every `write` reaches the one store instance. So a form put on screen by a
+ * shell that subscribes it (`Model.EditModal`) and by the `Template` inside it registers one declaration twice,
+ * which is interchangeable in the exact sense `shared` means — not a clash an app could fix by suppressing one.
  */
 export const useFormTools = (refName: string | null, write: (action: string, value: unknown) => void) => {
   const surface = useSurface();
@@ -44,6 +49,7 @@ export const useFormTools = (refName: string | null, write: (action: string, val
         additionalProperties: false,
       },
       effect: "state",
+      shared: true,
       guard: (args) => {
         const keys = Object.keys(args);
         if (!keys.length) return "Name at least one field to fill.";
@@ -59,9 +65,14 @@ export const useFormTools = (refName: string | null, write: (action: string, val
         const patch = Object.entries(args).map(([key, value]) => {
           const entry = byKey.get(key);
           if (!entry) throw new Error(`The ${refName} form has no field "${key}".`);
-          return [entry.action, FormFields.checked(name, key, entry.field, value)] as const;
+          return { entry, value: FormFields.checked(name, key, entry.field, value) };
         });
-        for (const [action, value] of patch) live.current(action, value);
+
+        for (const { entry, value } of patch) {
+          const control = surface.tool(AgenticSurface.fullName(scope, entry.action), scope);
+          if (control) void control.run({ value });
+          else live.current(entry.action, value);
+        }
       },
     });
   }, [surface, scopeKey, refName]);

package/store/formSetterNames.ts

@@ -16,6 +16,20 @@ export const formSetterNames = (className: string, key: string) => {
     addFieldOnModel: `add${classKeyName}On${className}`,
     subFieldOnModel: `sub${classKeyName}On${className}`,
     addOrSubFieldOnModel: `addOrSub${classKeyName}On${className}`,
+    /**
+     * The agent tool a drag-sortable list publishes. No store action answers to it: reordering *is* the whole-array
+     * write the drag already performs, so the tool splices the live rows and hands them to the same setter.
+     */
+    moveFieldOnModel: `move${classKeyName}On${className}`,
     uploadFieldOnModel: `upload${classKeyName}On${className}`,
+    /**
+     * The optional hook a store declares to run after this field is written.
+     *
+     * It carries no model suffix and a leading `_`, so it can never collide with a generated action name — which is
+     * the whole point: every generated action lives in a mapped type, and a mapped type produces *properties*, so a
+     * subclass method of the same name is a TS2425 error and there is no legal way to override one. A hook under a
+     * name the base type does not declare is the only shape TypeScript permits.
+     */
+    postSetField: `_postSet${classKeyName}`,
   };
 };

package/store/storeRegistry.ts

@@ -1,6 +1,7 @@
 import {
   ACTION_META,
   ACTION_OWNER_META,
+  FIELD_META,
   type MergeAllKeyOfObjects,
   type MergeAllKeyOfTypes,
   type MergeAllTypes,
@@ -9,7 +10,9 @@ import {
   STATE_META,
 } from "akanjs/base";
 import { applyMixins } from "akanjs/common";
+import { ConstantRegistry } from "akanjs/constant";
 import { attachAgentic } from "./agentic";
+import { formSetterNames } from "./formSetterNames";
 import type { RootStoreCls } from "./rootStore";
 import type { StoreCls } from "./store";
 import { StoreInstance } from "./storeInstance";
@@ -57,8 +60,28 @@ export class StoreRegistry {
     store[ACTION_META] = actions;
     store[ACTION_OWNER_META] = owners;
     StoreRegistry.#state.store.set(store.refName, store);
+    StoreRegistry.#warnUnknownPostSetHooks(store);
     return store;
   }
+
+  /**
+   * A `_postSet<Field>` hook cannot be typed — the generated setters live in a mapped type, so every name the base
+   * declares is a property a subclass method may not redeclare (TS2425), and the hook only compiles because the base
+   * declares nothing under it. A misspelled field would therefore never fire and never complain, so say so here.
+   */
+  static #warnUnknownPostSetHooks(store: StoreCls) {
+    const hooks = Object.keys(Object.getOwnPropertyDescriptors(store.prototype)).filter((key) =>
+      key.startsWith("_postSet"),
+    );
+    if (!hooks.length) return;
+    const model = ConstantRegistry.getDatabase(store.refName, { allowEmpty: true });
+    if (!model) return;
+    const known = new Set(
+      Object.keys(model.full[FIELD_META] as object).map((key) => formSetterNames("", key).postSetField),
+    );
+    for (const hook of hooks.filter((key) => !known.has(key)))
+      console.warn(`[${store.refName}Store] ${hook} matches no field of ${store.refName}, so it will never run.`);
+  }
   static get(refName: string) {
     return StoreRegistry.#state.store.get(refName);
   }

package/types/store/agentic/useFieldTool.d.ts

@@ -1,10 +1,22 @@
+export interface FieldToolOptions {
+    /** The control's own normalizer. Applied to the agent's write exactly as it is to the person's typing. */
+    transform?: unknown;
+    /** True while the person cannot use the control. Publishes nothing, so the agent gets no lever the screen withholds. */
+    disabled?: boolean;
+    /** The person can drag entries into a new order, so `move<Field>On<Model>` is a lever the screen really has. */
+    sortable?: boolean;
+}
 /**
- * Publishes the setter a form control is already holding, for exactly as long as the control is on screen.
+ * Publishes the setter a form control is already holding, for exactly as long as the control is usable.
  *
  * The control is the declaration — the same rule the rest of the surface follows. A handler passed by reference
  * (`onChange={st.do.setTitleOnTask}`) names the field it writes, so the tool and the person press one function;
  * an inline arrow names nothing and publishes nothing, which is the existing `data-akan-action` rule with
  * consequences. Publishing from the form's subscription instead would offer every field of the model, including
  * the ones this template draws no control for.
+ *
+ * `disabled` withdraws the tool for the same reason the whole surface is declaration-only: a field the person
+ * cannot type into is not one an agent may write in their place. It also closes the field to `fill<Model>Form`,
+ * whose guard offers only what a control published — so one gate covers both writers.
  */
-export declare const useFieldTool: (onChange: unknown, transform?: unknown) => void;
+export declare const useFieldTool: (onChange: unknown, { transform, disabled, sortable }?: FieldToolOptions) => void;

package/types/store/agentic/useFormTools.d.ts

@@ -10,5 +10,10 @@
  * controls will render. The **guard** is where the screen gets its say: a plain field has to have published its
  * own setter, and a composite is waved through because its rows are written with `writeOn<Model>(path, value)`,
  * which no control can annotate — so this is the one place an agent can reach a field the screen may not show.
+ *
+ * Registered `shared`, because the entry is a pure function of `refName`: the schema comes from the model, the
+ * guard re-reads the live surface, and every `write` reaches the one store instance. So a form put on screen by a
+ * shell that subscribes it (`Model.EditModal`) and by the `Template` inside it registers one declaration twice,
+ * which is interchangeable in the exact sense `shared` means — not a clash an app could fix by suppressing one.
  */
 export declare const useFormTools: (refName: string | null, write: (action: string, value: unknown) => void) => void;

package/types/store/formSetterNames.d.ts

@@ -12,5 +12,19 @@ export declare const formSetterNames: (className: string, key: string) => {
     addFieldOnModel: string;
     subFieldOnModel: string;
     addOrSubFieldOnModel: string;
+    /**
+     * The agent tool a drag-sortable list publishes. No store action answers to it: reordering *is* the whole-array
+     * write the drag already performs, so the tool splices the live rows and hands them to the same setter.
+     */
+    moveFieldOnModel: string;
     uploadFieldOnModel: string;
+    /**
+     * The optional hook a store declares to run after this field is written.
+     *
+     * It carries no model suffix and a leading `_`, so it can never collide with a generated action name — which is
+     * the whole point: every generated action lives in a mapped type, and a mapped type produces *properties*, so a
+     * subclass method of the same name is a TS2425 error and there is no legal way to override one. A hook under a
+     * name the base type does not declare is the only shape TypeScript permits.
+     */
+    postSetField: string;
 };

package/types/ui/Field.d.ts

@@ -242,6 +242,7 @@ interface DateRangeProps<Nullable extends boolean> {
     showTime?: boolean;
     onChangeFrom: (value: Dayjs) => void;
     onChangeTo: (value: Dayjs) => void;
+    /** The whole range after either end moves. Fires only once both ends are set — nobody can query a half-open one. */
     onChange?: (from: Dayjs, to: Dayjs) => void;
 }
 interface NumberProps {

package/ui/DraggableList.tsx

@@ -2,10 +2,12 @@
 import { config, useSprings } from "@react-spring/web";
 import { useGesture } from "@use-gesture/react";
 import { cn } from "akanjs/client";
+import { useFieldTool } from "akanjs/store";
 import { animated } from "akanjs/ui";
 import { createContext, type ReactElement, type ReactNode, useContext, useRef } from "react";
 import { BiTrash } from "react-icons/bi";
 import { MdDragIndicator } from "react-icons/md";
+import { agentAttrs } from "./agentAttrs";
 import { buttonRecipe } from "./Button";
 import { useUiRecipe } from "./UiOverride";
 
@@ -33,6 +35,8 @@ interface DragListProps<V> {
   onRemove: (value: V, idx: number) => void;
 }
 const DragList = <V,>({ className, mode = "vertical", children, onChange, onRemove }: DragListProps<V>) => {
+
+  useFieldTool(onChange, { sortable: true });
   const refs = useRef<(HTMLDivElement | null)[]>([]);
   const order = useRef(children.map((_, index) => index));
   const clientLengths = useRef(children.map((_, index) => 0));
@@ -103,7 +107,7 @@ const DragList = <V,>({ className, mode = "vertical", children, onChange, onRemo
   });
 
   return (
-    <div className={cn("isolate flex gap-0", mode === "vertical" && "flex-col", className)}>
+    <div {...agentAttrs(onChange)} className={cn("isolate flex gap-0", mode === "vertical" && "flex-col", className)}>
       {springs.map(({ zIndex, shadow, movement, scale }, i) => (
         <animated.div
           ref={(el: HTMLDivElement | null) => {

package/ui/Field.tsx

@@ -3,7 +3,7 @@ import { type DataList, type Dayjs, dayjs, type EnumInstance, isEnum } from "aka
 import { cn, usePage } from "akanjs/client";
 import { capitalize, formatPhone, isPhoneNumber, lowerlize } from "akanjs/common";
 import type { SliceMeta } from "akanjs/fetch";
-import { st, useFieldTool, useRelationFieldTool } from "akanjs/store";
+import { actionTagOf, st, tagAction, useFieldTool, useRelationFieldTool } from "akanjs/store";
 import { memo, type ReactNode, useState } from "react";
 import { AiOutlinePlus } from "react-icons/ai";
 import { BiHelpCircle, BiTrash, BiX } from "react-icons/bi";
@@ -182,7 +182,7 @@ const Text = ({
   inputClassName,
   inputStyleType = "bordered",
 }: TextProps) => {
-  useFieldTool(onChange, transform);
+  useFieldTool(onChange, { transform, disabled });
   const { l } = usePage();
   return (
     <div className={cn("flex flex-col", className)}>
@@ -248,7 +248,7 @@ const Price = ({
   inputClassName,
   inputStyleType = "bordered",
 }: PriceProps) => {
-  useFieldTool(onChange, transform);
+  useFieldTool(onChange, { transform, disabled });
   const { l } = usePage();
   return (
     <div className={cn("flex flex-col", className)}>
@@ -316,7 +316,7 @@ const TextArea = ({
   cache,
   inputClassName,
 }: TextAreaProps) => {
-  useFieldTool(onChange, transform);
+  useFieldTool(onChange, { transform, disabled });
   const { l } = usePage();
   return (
     <div className={cn("flex flex-col", className)}>
@@ -370,7 +370,7 @@ const Switch = ({
   onDesc,
   offDesc,
 }: SwitchProps) => {
-  useFieldTool(onChange);
+  useFieldTool(onChange, { disabled });
   return (
     <div {...agentAttrs(onChange)} className={cn("flex flex-col", className)}>
       {label ? <Label className={labelClassName} nullable label={label} desc={desc} /> : null}
@@ -419,7 +419,7 @@ const ToggleSelect = <I extends string | number | boolean | null>({
   disabled,
   btnClassName,
 }: ToggleSelectProps<I>) => {
-  useFieldTool(onChange);
+  useFieldTool(onChange, { disabled });
   const { l } = usePage();
   const isEnumValue = isEnum(items as EnumInstance<string, I>);
   return (
@@ -477,7 +477,7 @@ const MultiToggleSelect = <I extends string | number | boolean>({
   onChange,
   disabled,
 }: MultiToggleSelectProps<I>) => {
-  useFieldTool(onChange);
+  useFieldTool(onChange, { disabled });
   const { l } = usePage();
   const isEnumValue = isEnum(items as EnumInstance<string, I>);
   return (
@@ -545,7 +545,7 @@ const TextList = ({
   validate,
   inputClassName,
 }: TextListProps) => {
-  useFieldTool(onChange, transform);
+  useFieldTool(onChange, { transform, disabled, sortable: true });
   const { l } = usePage();
   const recipe = useUiRecipe("button") ?? buttonRecipe;
   return (
@@ -554,7 +554,10 @@ const TextList = ({
       <div className="mb-5 h-full gap-2 rounded-box border border-border p-2">
         <DraggableList
           className="h-full gap-2"
-          onChange={onChange}
+
+          onChange={(sorted: string[]) => {
+            onChange(sorted);
+          }}
           onRemove={(_, idx) => {
             onChange(value.filter((_, i) => i !== idx));
           }}
@@ -652,7 +655,7 @@ const Tags = ({
   validate,
   inputClassName,
 }: TagsProps) => {
-  useFieldTool(onChange, transform);
+  useFieldTool(onChange, { transform, disabled });
   const { l } = usePage();
   const badge = useUiRecipe("badge") ?? badgeRecipe;
   const [inputVisible, setInputVisible] = useState(false);
@@ -784,6 +787,7 @@ interface DateRangeProps<Nullable extends boolean> {
   showTime?: boolean;
   onChangeFrom: (value: Dayjs) => void;
   onChangeTo: (value: Dayjs) => void;
+  /** The whole range after either end moves. Fires only once both ends are set — nobody can query a half-open one. */
   onChange?: (from: Dayjs, to: Dayjs) => void;
 }
 const DateRange = <Nullable extends boolean>({
@@ -801,6 +805,24 @@ const DateRange = <Nullable extends boolean>({
   onChange,
   showTime,
 }: DateRangeProps<Nullable>) => {
+  /**
+   * Adds the pair callback to one endpoint setter, carrying that setter's own tag onto the wrapper.
+   *
+   * The wrapper really does run the setter, so the tag stays a true statement — and wiring `onChange` then costs
+   * the endpoint neither its agent tool nor its `data-akan-action`, which a plain closure would both drop.
+   */
+  const withPair = (setter: (value: Dayjs) => void, pair: (value: Dayjs) => [Dayjs | null, Dayjs | null]) => {
+    if (!onChange) return setter;
+    const wrapped = (value: Dayjs) => {
+      setter(value);
+      const [nextFrom, nextTo] = pair(value);
+      if (nextFrom && nextTo) onChange(nextFrom, nextTo);
+    };
+    const tag = actionTagOf(setter);
+    return tag ? tagAction(wrapped, tag) : wrapped;
+  };
+  const changeFrom = withPair(onChangeFrom, (value) => [value, to]);
+  const changeTo = withPair(onChangeTo, (value) => [from, value]);
   return (
     <div className={cn("flex flex-col", className)}>
       {label ? <Label className={labelClassName} nullable={nullable} label={label} desc={desc} /> : null}
@@ -815,7 +837,7 @@ const DateRange = <Nullable extends boolean>({
             value={from}
             max={max}
             min={min}
-            onChange={onChangeFrom}
+            onChange={changeFrom}
           />
         </div>
         <div className="relative flex w-full flex-col items-start gap-2 text-center md:flex-row md:items-center">
@@ -827,7 +849,7 @@ const DateRange = <Nullable extends boolean>({
             value={to}
             max={max}
             min={min}
-            onChange={onChangeTo}
+            onChange={changeTo}
           />
         </div>
       </div>
@@ -878,7 +900,7 @@ const Number = ({
   formatter,
   parser,
 }: NumberProps) => {
-  useFieldTool(onChange, transform);
+  useFieldTool(onChange, { transform, disabled });
   const { l } = usePage();
   return (
     <div className={cn("flex flex-col", className)}>
@@ -950,7 +972,7 @@ const DoubleNumber = ({
   validate,
   onPressEnter,
 }: DoubleNumberProps) => {
-  useFieldTool(onChange, transform);
+  useFieldTool(onChange, { transform, disabled });
   const { l } = usePage();
   return (
     <div {...agentAttrs(onChange)} className={cn("flex flex-col", className)}>
@@ -1038,7 +1060,7 @@ const Email = ({
   inputClassName,
   inputStyleType,
 }: EmailProps) => {
-  useFieldTool(onChange, transform);
+  useFieldTool(onChange, { transform, disabled });
   const { l } = usePage();
   return (
     <div className={cn("flex flex-col", className)}>
@@ -1103,7 +1125,7 @@ const Phone = ({
   onPressEnter,
   inputClassName,
 }: PhoneProps) => {
-  useFieldTool(onChange, transform);
+  useFieldTool(onChange, { transform, disabled });
   const { l } = usePage();
 
   return (
@@ -1175,7 +1197,7 @@ const Password = ({
   inputClassName,
   showConfirm,
 }: PasswordProps) => {
-  useFieldTool(onChange, transform);
+  useFieldTool(onChange, { transform, disabled });
   const { l } = usePage();
   return (
     <div className={cn("flex flex-col", className)}>
@@ -1384,7 +1406,7 @@ const ParentId = <T extends string, State, Input, Full extends { id: string }, L
   const modelList = storeUse[namesOfSlice.modelList]() as DataList<Light>;
   const modelListLoading = storeUse[namesOfSlice.modelListLoading]() as string | boolean;
   
-  useFieldTool(onChange);
+  useFieldTool(onChange, { disabled });
 
   return (
     <div {...agentAttrs(onChange)} className={cn("flex flex-col", className)}>
@@ -1573,7 +1595,7 @@ const ChildrenId = <T extends string, State, Input, Full extends { id: string },
   const modelList = storeUse[namesOfSlice.modelList]() as DataList<Light>;
   const modelListLoading = storeUse[namesOfSlice.modelListLoading]() as string | boolean;
   
-  useFieldTool(onChange);
+  useFieldTool(onChange, { disabled });
 
   return (
     <div {...agentAttrs(onChange)} className={cn("flex flex-col", className)}>

package/ui/Input.tsx

@@ -59,7 +59,7 @@ const DefaultInput = ({
   validate,
   ...rest
 }: InputProps) => {
-  useFieldTool(onChange);
+  useFieldTool(onChange, { disabled: rest.disabled });
   const { l } = usePage();
   const [firstFocus, setFirstFocus] = useState(true);
   const validateResult = validate ? validate(value) : undefined;
@@ -168,7 +168,7 @@ const DefaultTextArea = ({
   validate,
   ...rest
 }: TextAreaProps) => {
-  useFieldTool(onChange);
+  useFieldTool(onChange, { disabled: rest.disabled });
   const { l } = usePage();
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const validateResult = validate(value);
@@ -263,7 +263,7 @@ const DefaultPassword = ({
   validate,
   ...rest
 }: PasswordProps) => {
-  useFieldTool(onChange);
+  useFieldTool(onChange, { disabled: rest.disabled });
   const { l } = usePage();
   const inputRef = useRef<HTMLInputElement>(null);
   const validateResult = validate(value);
@@ -380,7 +380,7 @@ const DefaultEmail = ({
   inputWrapperClassName,
   ...rest
 }: EmailProps) => {
-  useFieldTool(onChange);
+  useFieldTool(onChange, { disabled: rest.disabled });
   const { l } = usePage();
   const inputRef = useRef<HTMLInputElement>(null);
   const isValidEmail = isEmail(value);
@@ -495,7 +495,7 @@ const DefaultNumber = ({
   parser,
   ...rest
 }: NumberProps) => {
-  useFieldTool(onChange);
+  useFieldTool(onChange, { disabled: rest.disabled });
   const { l } = usePage();
   const inputRef = useRef<HTMLInputElement>(null);
   const validateResult = validate ? validate(value) : undefined;
@@ -639,7 +639,7 @@ export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "onChang
 };
 
 const DefaultCheckbox = ({ checked, onChange, className, ...rest }: CheckboxProps) => {
-  useFieldTool(onChange);
+  useFieldTool(onChange, { disabled: rest.disabled });
   return (
     <input
       {...rest}

package/ui/Select.tsx

@@ -85,7 +85,7 @@ const DefaultSelect = <
   renderOption,
   renderSelected,
 }: SelectProps<T, Multiple, Searchable, Option>) => {
-  useFieldTool(onChange);
+  useFieldTool(onChange, { disabled });
   const { l } = usePage();
   const [isOpen, setIsOpen] = useState(false);
   const labeledOptions: { label: string | boolean | number; value: T }[] = useMemo(

package/ui/Switch.tsx

@@ -32,7 +32,7 @@ export const Switch = ({
   className,
   variant = "primary",
 }: SwitchProps) => {
-  useFieldTool(onChange);
+  useFieldTool(onChange, { disabled });
   const [internal, setInternal] = useState(defaultChecked ?? false);
   const isControlled = checked !== undefined;
   const isChecked = isControlled ? checked : internal;