akanjs 3.0.0-alpha.11 → 3.0.0-alpha.13

package/ui/Field.tsx

@@ -9,6 +9,7 @@ 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";
@@ -186,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 ?? ""}
@@ -250,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}
@@ -316,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}
@@ -364,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
@@ -414,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"
@@ -471,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}
@@ -538,7 +542,7 @@ const TextList = ({
   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
@@ -653,7 +657,7 @@ 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) => (
@@ -736,7 +740,7 @@ 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}
       {/* FIXME: daysi UI datetime-local 컴포넌트에 max 값 넣으면 오른쪽 끝 짤리는 버그 있음.*/}
       <input
@@ -874,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}
@@ -941,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
@@ -1031,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}
@@ -1095,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}
@@ -1165,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/Input.tsx

@@ -13,6 +13,7 @@ import React, {
 } from "react";
 import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai";
 
+import { agentAttrs } from "./agentAttrs";
 import { inputRecipe } from "./recipe";
 import { createOverridable, useUiRecipe } from "./UiOverride";
 
@@ -108,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) => {
@@ -201,6 +203,7 @@ const DefaultTextArea = ({
     <div className={cn("relative mb-5", className)}>
       <textarea
         {...rest}
+        {...agentAttrs(onChange)}
         ref={inputRef}
         value={value}
         onChange={(e) => {
@@ -301,6 +304,7 @@ const DefaultPassword = ({
         ) : null}
         <input
           {...rest}
+          {...agentAttrs(onChange)}
           type={showPassword ? "text" : "password"}
           ref={inputRef}
           value={value}
@@ -419,6 +423,7 @@ const DefaultEmail = ({
         ) : null}
         <input
           {...rest}
+          {...agentAttrs(onChange)}
           type="email"
           value={value}
           ref={inputRef}
@@ -586,6 +591,7 @@ const DefaultNumber = ({
         ) : null}
         <input
           {...rest}
+          {...agentAttrs(onChange)}
           ref={inputRef}
           value={formatValue}
           onKeyDown={handleKeyDown}
@@ -623,6 +629,7 @@ const DefaultCheckbox = ({ checked, onChange, className, ...rest }: CheckboxProp
   return (
     <input
       {...rest}
+      {...agentAttrs(onChange)}
       type="checkbox"
       checked={checked}
       className={cn("size-5 accent-primary", className)}

package/ui/Select.tsx

@@ -7,6 +7,7 @@ import { BiCheck, BiChevronDown, BiX } from "react-icons/bi";
 import { BsQuestionCircleFill } from "react-icons/bs";
 import { TiDelete } from "react-icons/ti";
 
+import { agentAttrs } from "./agentAttrs";
 import { useUiOverride } from "./UiOverride";
 
 interface LabelOption<T> {
@@ -164,7 +165,7 @@ const DefaultSelect = <
   }, [value]);
 
   return (
-    <div className={cn("relative min-w-[150px]", className)} ref={dropdownRef}>
+    <div {...agentAttrs(onChange)} className={cn("relative min-w-[150px]", className)} ref={dropdownRef}>
       <div
         data-open={isOpen}
         className={cn(

package/ui/Switch.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "akanjs/client";
 import { useState } from "react";
+import { agentAttrs } from "./agentAttrs";
 
 export interface SwitchProps {
   checked?: boolean;
@@ -36,6 +37,7 @@ export const Switch = ({
   const state = isChecked ? "checked" : "unchecked";
   return (
     <button
+      {...agentAttrs(onChange)}
       type="button"
       role="switch"
       aria-checked={isChecked}

package/ui/agentAttrs.ts

@@ -0,0 +1,19 @@
+import { actionTagOf } from "akanjs/store";
+
+/**
+ * The `data-akan-*` attributes for a handler the caller passed by reference.
+ *
+ * `{}` when the handler is an inline arrow, which is the honest answer: a closure the caller wrote says nothing
+ * about what it does, and a guessed annotation is worse than none. The house form for a model field is the setter
+ * itself (`onChange={st.do.setNameOnUser}`), so the fields that matter are annotated without an app writing anything.
+ *
+ * What it buys, beyond an in-page agent: an accessibility tree and E2E selectors that name the action rather than a
+ * class, and an external browser agent — one this framework has no bridge into — reading the same names.
+ */
+export const agentAttrs = (
+  handler: unknown,
+): { "data-akan-action"?: string; "data-akan-state"?: string } | Record<string, never> => {
+  const tag = actionTagOf(handler);
+  if (!tag) return {};
+  return { "data-akan-action": tag.action, ...(tag.state ? { "data-akan-state": tag.state } : {}) };
+};

package/ui/index.ts

@@ -1,3 +1,5 @@
+export { Agent } from "./Agent";
+export { agentAttrs } from "./agentAttrs";
 export { animated } from "./animated";
 export { Badge } from "./Badge";
 export { BottomSheet, type BottomSheetRef } from "./BottomSheet";