react-store-input 0.2.6 → 0.5.0

package/dist/index.js

@@ -15,368 +15,630 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.tsx
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   Input: () => Input,
   Select: () => Select,
-  TextEditor: () => TextEditor,
   Textarea: () => Textarea,
-  useFormStore: () => useFormStore,
-  useStoreComponent: () => useStoreComponent,
-  useStoreController: () => useStoreController,
+  assertCodecLaws: () => assertCodecLaws,
+  assertLensLaws: () => assertLensLaws,
+  createRender: () => createRender,
+  createRenderWithStore: () => createRenderWithStore,
+  defineBinding: () => defineBinding,
+  defineCodec: () => defineCodec,
+  defineLens: () => defineLens,
+  err: () => import_gw_result2.err,
+  ok: () => import_gw_result2.ok,
+  stateLens: () => stateLens,
+  useStoreBinding: () => useStoreBinding,
+  useStoreHTMLElement: () => useStoreHTMLElement,
   useStoreInput: () => useStoreInput,
   useStoreInputWithName: () => useStoreInputWithName
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
-// src/use_store_controller.tsx
-var import_react = require("react");
-function useStoreController(store, props) {
-  const dispatchKey = (0, import_react.useId)();
-  (0, import_react.useEffect)(() => {
-    const unsub = store.subscribe((state, key) => {
-      if (key === dispatchKey) {
-        return;
-      }
-      props.onSubscribe(state);
-    });
-    return () => {
-      unsub();
-    };
-  }, []);
-  const dispatch = () => {
-    store.dispatch(
-      (state) => {
-        props.onDispatch(state);
-      },
-      {
-        key: dispatchKey
-      }
-    );
+// src/store/create_render.tsx
+var import_gw_store = require("gw-store");
+var import_jsx_runtime = require("react/jsx-runtime");
+function createRender(store, selector, compare) {
+  function Component() {
+    const result = (0, import_gw_store.useSelector)(store, (state) => state, compare);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: selector(result) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {});
+}
+function createRenderWithStore(store) {
+  return function createRender2(selector, compare) {
+    function Component() {
+      const result = (0, import_gw_store.useSelector)(store, (state) => state, compare);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: selector(result) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {});
   };
+}
+
+// src/binding/lens.ts
+function defineLens(lens) {
+  return lens;
+}
+function readPath(value, path) {
+  return path.reduce((current, key) => current[key], value);
+}
+function writePath(state, path, value) {
+  const parent = path.slice(0, -1).reduce((current, key) => current[key], state);
+  parent[path.at(-1)] = value;
+}
+function createPathLens(path) {
+  return {
+    get: (state) => readPath(state, path),
+    set: (state, value) => writePath(state, path, value),
+    prop: (key) => createPathLens([...path, key])
+  };
+}
+function stateLens() {
   return {
-    dispatch
+    prop: (key) => createPathLens([key])
   };
 }
 
-// src/use_store_input.tsx
-var import_date_fns = require("date-fns");
-function useStoreInput(ref, store, props) {
-  const toInputValue = props.toInputValue || ((value) => {
-    if (value === void 0 || value === null) {
-      return "";
+// src/binding/codec.ts
+function defineCodec(codec) {
+  return codec;
+}
+
+// src/binding/binding.ts
+function defineBinding(binding) {
+  return binding;
+}
+
+// src/binding/laws.ts
+var import_immer = require("immer");
+function structuralEqual(previous, next) {
+  if (Object.is(previous, next)) {
+    return true;
+  }
+  if (previous instanceof Date && next instanceof Date) {
+    return previous.getTime() === next.getTime();
+  }
+  if (Array.isArray(previous) && Array.isArray(next)) {
+    return previous.length === next.length && previous.every((value, index) => structuralEqual(value, next[index]));
+  }
+  if (previous !== null && next !== null && typeof previous === "object" && typeof next === "object") {
+    const previousRecord = previous;
+    const nextRecord = next;
+    const previousKeys = Reflect.ownKeys(previousRecord);
+    const nextKeys = Reflect.ownKeys(nextRecord);
+    return previousKeys.length === nextKeys.length && previousKeys.every(
+      (key) => Object.prototype.hasOwnProperty.call(nextRecord, key) && structuralEqual(previousRecord[key], nextRecord[key])
+    );
+  }
+  return false;
+}
+function assertLensLaws(lens, options) {
+  const equalsState = options.equalsState ?? structuralEqual;
+  const equalsValue = options.equalsValue ?? structuralEqual;
+  const set = (state, value) => (0, import_immer.produce)(state, (draft) => lens.set(draft, value));
+  if (!equalsState(set(options.state, lens.get(options.state)), options.state)) {
+    throw new Error("Lens law failed: setting the current value changed state.");
+  }
+  for (const value of options.values) {
+    const updated = set(options.state, value);
+    if (!equalsValue(lens.get(updated), value)) {
+      throw new Error("Lens law failed: get(set(state, value)) !== value.");
     }
-    if (props.type === "datetime-local") {
-      const date = new Date(value);
-      if (!isNaN(date.getTime())) {
-        return (0, import_date_fns.format)(date, "yyyy-MM-dd'T'HH:mm:ss");
+  }
+  for (const previous of options.values) {
+    for (const next of options.values) {
+      if (!equalsState(set(set(options.state, previous), next), set(options.state, next))) {
+        throw new Error("Lens law failed: the last set did not win.");
       }
     }
-    return String(value);
-  });
-  const getDefaultValue = () => {
-    if (props.defaultValue !== void 0) {
-      return props.defaultValue;
-    }
-    if (props.type === "checkbox" || props.type === "radio") {
-      return void 0;
-    }
-    return toInputValue(props.getter(store.state));
-  };
-  const toInputChecked = (value) => {
-    if (props.type === "radio") {
-      return value !== void 0 && value === props.value;
-    }
-    return Boolean(value);
-  };
-  const getDefaultChecked = () => {
-    if (props.defaultChecked) {
-      return props.defaultChecked;
-    }
-    if (props.type !== "checkbox" && props.type !== "radio") {
-      return void 0;
+  }
+}
+function assertCodecLaws(codec, options) {
+  const equals = options.equals ?? codec.equals ?? structuralEqual;
+  const equalsInput = options.equalsInput ?? structuralEqual;
+  for (const value of options.values) {
+    const result = codec.parse(codec.format(value));
+    if (result.isErr) {
+      throw new Error("Codec law failed: parse(format(value)) returned Err.");
     }
-    return toInputChecked(props.getter(store.state));
-  };
-  const toStateValue = props.toStateValue || ((value) => {
-    if (props.type === "number" || props.type === "range") {
-      return Number(value);
+    if (!equals(result.value, value)) {
+      throw new Error("Codec law failed: parse(format(value)) !== value.");
     }
-    if (props.type === "datetime-local") {
-      return new Date(value);
+  }
+  for (const input of options.inputs ?? []) {
+    const result = codec.parse(input);
+    if (result.isOk && !equalsInput(codec.format(result.value), input)) {
+      throw new Error("Codec law failed: format(parse(input).value) !== input.");
     }
-    return value;
-  });
-  const inputProps = useStoreController(store, {
-    onSubscribe: (state) => {
-      const element = ref.current;
-      if (!element) {
+  }
+}
+
+// src/binding/use_store_binding.tsx
+var import_react = require("react");
+function equalStoreValue(previous, next) {
+  if (Object.is(previous, next)) {
+    return true;
+  }
+  if (previous instanceof Date && next instanceof Date) {
+    return Object.is(previous.getTime(), next.getTime());
+  }
+  if (Array.isArray(previous) && Array.isArray(next)) {
+    return previous.length === next.length && previous.every((value, index) => Object.is(value, next[index]));
+  }
+  return false;
+}
+function useStoreBinding(store, binding, options = {}) {
+  const dispatchKey = (0, import_react.useId)();
+  const [initialValue] = (0, import_react.useState)(() => binding.codec.format(binding.lens.get(store.state)));
+  const [meta, setMeta] = (0, import_react.useState)({ valid: true });
+  const metaRef = (0, import_react.useRef)(meta);
+  const optionsRef = (0, import_react.useRef)(options);
+  const subscribedStoreRef = (0, import_react.useRef)(null);
+  const subscribedBindingRef = (0, import_react.useRef)(binding);
+  (0, import_react.useEffect)(() => {
+    optionsRef.current = options;
+  }, [options]);
+  (0, import_react.useEffect)(() => {
+    const isReplacement = subscribedStoreRef.current !== null && (subscribedStoreRef.current !== store || subscribedBindingRef.current !== binding);
+    subscribedStoreRef.current = store;
+    subscribedBindingRef.current = binding;
+    const sync = (state) => {
+      if (!metaRef.current.valid) {
         return;
       }
-      if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
-        const checked = toInputChecked(props.getter(state));
-        if (element.checked === checked) {
-          return;
-        }
-        element.checked = checked;
-      } else {
-        const value = toInputValue(props.getter(state));
-        if (element.value === value) {
-          return;
-        }
-        element.value = value;
+      const value = binding.lens.get(state);
+      optionsRef.current.onStoreChange?.(binding.codec.format(value), value);
+    };
+    const unsubscribe = store.subscribe((state, key) => {
+      if (key !== dispatchKey) {
+        sync(state);
       }
-      const event = new Event("input", { bubbles: true });
-      element.dispatchEvent(event);
-    },
-    onDispatch: (state) => {
-      const element = ref.current;
-      if (!element) {
+    });
+    if (isReplacement) {
+      sync(store.state);
+    }
+    return unsubscribe;
+  }, [binding, dispatchKey, store]);
+  const setValue = (0, import_react.useCallback)(
+    (value) => {
+      const currentValue = binding.lens.get(store.state);
+      const equals = binding.codec.equals ?? equalStoreValue;
+      if (equals(currentValue, value)) {
         return;
       }
-      if ("checked" in element && props.type === "checkbox") {
-        props.setter(state, element.checked);
-      } else {
-        props.setter(state, toStateValue(element.value));
+      store.dispatch((state) => binding.lens.set(state, value), { key: dispatchKey });
+    },
+    [binding, dispatchKey, store]
+  );
+  const commit = (0, import_react.useCallback)(
+    (input) => {
+      const result = binding.codec.parse(input);
+      if (result.isErr) {
+        const invalidMeta = {
+          valid: false,
+          error: result.error
+        };
+        metaRef.current = invalidMeta;
+        setMeta(invalidMeta);
+        return result;
       }
-    }
-  });
+      const validMeta = { valid: true };
+      metaRef.current = validMeta;
+      setMeta((current) => current.valid ? current : validMeta);
+      setValue(result.value);
+      return result;
+    },
+    [binding, setValue]
+  );
+  const reset = (0, import_react.useCallback)(
+    (value) => {
+      const validMeta = { valid: true };
+      metaRef.current = validMeta;
+      setMeta((current) => current.valid ? current : validMeta);
+      setValue(value);
+    },
+    [setValue]
+  );
   return {
-    defaultValue: getDefaultValue(),
-    defaultChecked: getDefaultChecked(),
-    onChange: (event) => {
-      inputProps.dispatch();
-      props.onChange?.(event);
-    }
+    initialValue,
+    meta,
+    commit,
+    reset
   };
 }
 
-// src/use_store_input_with_name.tsx
-function useStoreInputWithName(ref, store, props) {
-  const inputProps = useStoreInput(ref, store, {
-    ...props,
-    getter: (state) => {
-      if (props.getter) {
-        return props.getter(state);
-      }
-      return state[props.name];
-    },
-    setter: (state, value) => {
-      if (props.setter) {
-        props.setter(state, value);
-        return;
+// src/html_element/use_store_html_element.tsx
+var import_react2 = require("react");
+
+// src/html_element/dom_value.ts
+function pad(value) {
+  return String(value).padStart(2, "0");
+}
+function formatDateTimeLocal(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+  return [
+    date.getFullYear(),
+    "-",
+    pad(date.getMonth() + 1),
+    "-",
+    pad(date.getDate()),
+    "T",
+    pad(date.getHours()),
+    ":",
+    pad(date.getMinutes()),
+    ":",
+    pad(date.getSeconds())
+  ].join("");
+}
+function readElementValue(element) {
+  if ("options" in element && element.multiple) {
+    return Array.from(element.selectedOptions, (option) => option.value);
+  }
+  return element.value;
+}
+function writeElementValue(element, value) {
+  if ("files" in element && element.type === "file") {
+    return;
+  }
+  if ("options" in element && element.multiple) {
+    const selectedValues = new Set((Array.isArray(value) ? value : [value]).map(String));
+    for (const option of element.options) {
+      const selected = selectedValues.has(option.value);
+      if (option.selected !== selected) {
+        option.selected = selected;
       }
-      state[props.name] = value;
     }
-  });
-  return {
-    ...inputProps,
-    name: "name" in props ? String(props.name) : void 0
+    return;
+  }
+  const nextValue = String(value);
+  if (element.value !== nextValue) {
+    element.value = nextValue;
+  }
+}
+
+// src/html_element/reset_coordinator.ts
+var resettingForms = /* @__PURE__ */ new WeakSet();
+var resetCoordinators = /* @__PURE__ */ new WeakMap();
+function isFormResetting(form) {
+  return resettingForms.has(form);
+}
+function registerResetBinding(form, batch, reset) {
+  let coordinator = resetCoordinators.get(form);
+  if (!coordinator) {
+    const groups = /* @__PURE__ */ new Map();
+    const handleReset = () => {
+      resettingForms.add(form);
+      const groupSnapshots = Array.from(groups, ([groupBatch, bindings2]) => [groupBatch, [...bindings2]]);
+      setTimeout(() => {
+        try {
+          for (const [groupBatch, bindings2] of groupSnapshots) {
+            groupBatch(() => {
+              for (const binding of bindings2) {
+                binding();
+              }
+            });
+          }
+        } finally {
+          setTimeout(() => resettingForms.delete(form), 0);
+        }
+      }, 0);
+    };
+    coordinator = { groups, handleReset };
+    resetCoordinators.set(form, coordinator);
+    form.addEventListener("reset", handleReset);
+  }
+  let bindings = coordinator.groups.get(batch);
+  if (!bindings) {
+    bindings = /* @__PURE__ */ new Set();
+    coordinator.groups.set(batch, bindings);
+  }
+  bindings.add(reset);
+  return () => {
+    const currentCoordinator = resetCoordinators.get(form);
+    if (!currentCoordinator) {
+      return;
+    }
+    const currentBindings = currentCoordinator.groups.get(batch);
+    currentBindings?.delete(reset);
+    if (currentBindings?.size === 0) {
+      currentCoordinator.groups.delete(batch);
+    }
+    if (currentCoordinator.groups.size === 0) {
+      form.removeEventListener("reset", currentCoordinator.handleReset);
+      resetCoordinators.delete(form);
+    }
   };
 }
 
-// src/use_store_component.tsx
-var import_react3 = require("react");
+// src/html_element/value_conversion.ts
+function convertToInputValue(value, type) {
+  if (value === void 0 || value === null) {
+    return "";
+  }
+  if (type === "datetime-local") {
+    return formatDateTimeLocal(value);
+  }
+  return Array.isArray(value) ? value.map(String) : String(value);
+}
+function convertToStateValue(value, type) {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  if (type === "number" || type === "range") {
+    return value === "" ? void 0 : Number(value);
+  }
+  if (type === "datetime-local") {
+    if (value === "") {
+      return void 0;
+    }
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? void 0 : date;
+  }
+  return value;
+}
+function resolveDefaultValue(props, stateValue, format) {
+  if (props.type !== "radio" && props.value !== void 0) {
+    return void 0;
+  }
+  if (props.defaultValue !== void 0) {
+    return props.defaultValue;
+  }
+  if (props.type === "checkbox" || props.type === "radio" || props.type === "file") {
+    return void 0;
+  }
+  return format(stateValue);
+}
+function resolveDefaultChecked(props, stateValue, toChecked) {
+  if (props.checked !== void 0) {
+    return void 0;
+  }
+  if (props.defaultChecked !== void 0) {
+    return props.defaultChecked;
+  }
+  return props.type === "checkbox" || props.type === "radio" ? toChecked(stateValue) : void 0;
+}
+function resolveResetStateValue(props, stateValue, parse) {
+  if (props.type === "checkbox" && props.defaultChecked !== void 0) {
+    return props.defaultChecked;
+  }
+  if (props.type === "radio" && props.defaultChecked) {
+    if (props.value !== void 0) {
+      return props.value;
+    }
+    return convertToStateValue(String(props.defaultValue ?? ""), props.type);
+  }
+  if (props.type !== "file" && props.type !== "checkbox" && props.type !== "radio" && props.defaultValue !== void 0) {
+    const defaultValue = Array.isArray(props.defaultValue) ? props.defaultValue.map(String) : String(props.defaultValue);
+    return parse(defaultValue);
+  }
+  return stateValue;
+}
 
-// src/text_editor.tsx
-var import_gw_react_text_editor = require("gw-react-text-editor");
-var import_react2 = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-function TextEditor({
-  store,
-  name,
-  getter,
-  setter,
-  defaultValue,
-  ref,
-  ...props
-}) {
-  const controllerRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useImperativeHandle)(
-    ref,
-    () => controllerRef.current,
-    []
+// src/html_element/use_store_html_element.tsx
+function isDisplayValue(value) {
+  return typeof value === "string" || typeof value === "number" || Array.isArray(value) && value.every((item) => typeof item === "string");
+}
+function readControlValue(element, type, radioValue) {
+  if ("files" in element && type === "file") {
+    return element.files?.length ? element.files : null;
+  }
+  if ("checked" in element && type === "checkbox") {
+    return element.checked;
+  }
+  if ("checked" in element && type === "radio") {
+    return element.checked ? radioValue ?? element.value : void 0;
+  }
+  return readElementValue(element);
+}
+function useStoreHTMLElement(ref, store, binding, options = {}) {
+  const props = options;
+  const getStateValue = binding.lens.get;
+  const formatValue = (0, import_react2.useCallback)((value) => binding.codec.format(value), [binding]);
+  const toChecked = (0, import_react2.useCallback)(
+    (value) => props.type === "radio" ? Object.is(formatValue(value), props.value) : Boolean(formatValue(value)),
+    [formatValue, props.type, props.value]
   );
-  const { dispatch } = useStoreController(store, {
-    onSubscribe: (state) => {
-      const controller = controllerRef.current;
-      if (!controller) {
+  const initialStateValue = getStateValue(store.state);
+  const resetValueRef = (0, import_react2.useRef)(
+    Object.prototype.hasOwnProperty.call(options, "resetValue") ? options.resetValue : initialStateValue
+  );
+  const writeValue = (0, import_react2.useCallback)(
+    (element, value) => {
+      if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
+        element.checked = toChecked(value);
         return;
       }
-      const getResult = () => {
-        if (getter) {
-          return getter(state) || "";
-        }
-        if (name) {
-          return state[name] || "";
-        }
-        return "";
-      };
-      const result = getResult();
-      if (controller.value !== result) {
-        controller.value = result;
+      if ("files" in element && props.type === "file") {
+        return;
+      }
+      const formatted = formatValue(value);
+      if (isDisplayValue(formatted)) {
+        writeElementValue(element, formatted);
       }
     },
-    onDispatch: (state) => {
-      const controller = controllerRef.current;
-      if (!controller) {
+    [formatValue, props.type, toChecked]
+  );
+  const { commit, meta, reset } = useStoreBinding(store, binding, {
+    onStoreChange: (_input, value) => {
+      const element = ref.current;
+      if (!element || element.form && isFormResetting(element.form) || props.type !== "radio" && props.value !== void 0) {
         return;
       }
-      if (setter) {
-        setter(state, controller.value);
+      if ("checked" in element && (props.type === "checkbox" || props.type === "radio") && props.checked !== void 0) {
         return;
       }
-      if (name) {
-        state[name] = controller.value;
-      }
+      writeValue(element, value);
     }
   });
-  const getDefaultValue = () => {
-    if (getter) {
-      return getter(store.state);
-    }
-    if (name) {
-      return store.state[name];
+  (0, import_react2.useEffect)(() => {
+    const element = ref.current;
+    const form = element?.form;
+    if (!element || !form) {
+      return;
     }
-    return void 0;
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_gw_react_text_editor.TextEditor,
-    {
-      ...props,
-      ref: controllerRef,
-      defaultValue: defaultValue ?? getDefaultValue(),
-      onChange: (e) => {
-        dispatch();
-        props.onChange?.(e);
+    return registerResetBinding(form, store.batch, () => {
+      if (!element.isConnected) {
+        return;
+      }
+      const resetValue = resetValueRef.current;
+      const writeResetValue = () => writeValue(element, resetValue);
+      writeResetValue();
+      reset(resetValue);
+      setTimeout(() => {
+        if (element.isConnected) {
+          writeResetValue();
+        }
+      }, 0);
+    });
+  }, [ref, reset, store.batch, writeValue]);
+  const inputProps = {
+    defaultValue: resolveDefaultValue(props, initialStateValue, (value) => {
+      const formatted = formatValue(value);
+      return isDisplayValue(formatted) ? formatted : "";
+    }),
+    defaultChecked: resolveDefaultChecked(props, initialStateValue, toChecked),
+    onChange: (event) => {
+      const element = ref.current;
+      if (element) {
+        const controlValue = readControlValue(element, props.type, props.value);
+        if (controlValue !== void 0) {
+          commit(controlValue);
+        }
       }
+      props.onChange?.(event);
     }
-  );
+  };
+  return { inputProps, meta };
 }
 
-// src/use_store_component.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function useStoreComponent(store) {
-  const input = (0, import_react3.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Input, { store, ...props });
-  }, []);
-  const select = (0, import_react3.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Select, { store, ...props });
-  }, []);
-  const textarea = (0, import_react3.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Textarea, { store, ...props });
-  }, []);
-  const textEditor = (0, import_react3.useCallback)(function Component(props) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TextEditor, { store, ...props });
-  }, []);
+// src/html_element/use_store_input_with_name.tsx
+var import_react3 = require("react");
+var import_gw_result = require("gw-result");
+function formatControlValue(value, type) {
+  if (type === "checkbox") {
+    return Boolean(value);
+  }
+  if (type === "radio" || type === "file") {
+    return value;
+  }
+  return convertToInputValue(value, type);
+}
+function parseControlValue(value, type) {
+  if (typeof value === "string" || Array.isArray(value)) {
+    const stateInputValue = Array.isArray(value) ? [...value] : value;
+    return convertToStateValue(stateInputValue, type);
+  }
+  return value;
+}
+function useStoreInputWithName(ref, store, props) {
+  const binding = (0, import_react3.useMemo)(
+    () => ({
+      lens: {
+        get: (state) => state[props.name],
+        set: (state, value) => {
+          state[props.name] = value;
+        }
+      },
+      codec: {
+        format: (value) => formatControlValue(value, props.type),
+        parse: (value) => (0, import_gw_result.ok)(parseControlValue(value, props.type))
+      }
+    }),
+    [props.name, props.type]
+  );
+  const initialStateValue = binding.lens.get(store.state);
+  const resetValue = resolveResetStateValue(
+    props,
+    initialStateValue,
+    (value) => parseControlValue(value, props.type)
+  );
+  const { inputProps } = useStoreHTMLElement(ref, store, binding, {
+    ...props,
+    resetValue
+  });
   return {
-    input,
-    select,
-    textarea,
-    textEditor
+    ...inputProps,
+    name: String(props.name)
   };
 }
+
+// src/input/store_input.tsx
+var import_react4 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function Input({
   store,
-  getter,
-  setter,
-  toInputValue,
-  toStateValue,
   ...props
 }) {
-  const ref = (0, import_react3.useRef)(null);
-  const storeProps = useStoreInputWithName(ref, store, {
-    ...props,
-    getter,
-    setter,
-    toInputValue,
-    toStateValue
-  });
+  const ref = (0, import_react4.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, props);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("input", { ref, ...props, ...storeProps });
 }
 function Select({
   store,
-  getter,
-  setter,
-  toInputValue,
-  toStateValue,
   ...props
 }) {
-  const ref = (0, import_react3.useRef)(null);
-  const storeProps = useStoreInputWithName(ref, store, {
-    ...props,
-    getter,
-    setter,
-    toInputValue,
-    toStateValue
-  });
+  const ref = (0, import_react4.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, props);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("select", { ref, ...props, ...storeProps });
 }
 function Textarea({
   store,
-  getter,
-  setter,
-  toInputValue,
-  toStateValue,
   ...props
 }) {
-  const ref = (0, import_react3.useRef)(null);
-  const storeProps = useStoreInputWithName(ref, store, {
-    ...props,
-    getter,
-    setter,
-    toInputValue,
-    toStateValue
-  });
+  const ref = (0, import_react4.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, props);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("textarea", { ref, ...props, ...storeProps });
 }
-
-// src/create_render.tsx
-var import_gw_store = require("gw-store");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function createRenderWithStore(store) {
-  return function createRender(selector, compare) {
-    function Component() {
-      const result = (0, import_gw_store.useSelector)(store, (state) => state, compare);
-      const content = selector(result);
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: content });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, {});
-  };
-}
-
-// src/use_form_store.tsx
-var import_gw_store2 = require("gw-store");
-function useFormStore(initialState) {
-  const store = (0, import_gw_store2.useStore)(initialState);
-  const storeComponent = useStoreComponent(store);
-  return {
-    get state() {
-      return store.state;
+function useStoreInput(store) {
+  const input = (0, import_react4.useCallback)(
+    function Component(props) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Input, { store, ...props });
     },
-    dispatch: store.dispatch,
-    subscribe: store.subscribe,
-    render: createRenderWithStore(store),
-    ...storeComponent
-  };
+    [store]
+  );
+  const select = (0, import_react4.useCallback)(
+    function Component(props) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Select, { store, ...props });
+    },
+    [store]
+  );
+  const textarea = (0, import_react4.useCallback)(
+    function Component(props) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Textarea, { store, ...props });
+    },
+    [store]
+  );
+  return { input, select, textarea };
 }
 
 // src/index.tsx
-__reExport(index_exports, require("gw-store"), module.exports);
+var import_gw_result2 = require("gw-result");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Input,
   Select,
-  TextEditor,
   Textarea,
-  useFormStore,
-  useStoreComponent,
-  useStoreController,
+  assertCodecLaws,
+  assertLensLaws,
+  createRender,
+  createRenderWithStore,
+  defineBinding,
+  defineCodec,
+  defineLens,
+  err,
+  ok,
+  stateLens,
+  useStoreBinding,
+  useStoreHTMLElement,
   useStoreInput,
-  useStoreInputWithName,
-  ...require("gw-store")
+  useStoreInputWithName
 });
+//# sourceMappingURL=index.js.map