@opentf/web-form 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @opentf/web-form
 
+## [Unreleased]
+
+## [1.1.0] - 2026-07-01
+
+- **Engine Rebuild:** Rebuilt the form engine on the `reactive()` store primitive.
+- **Dependency Fix:** Normalized the peer dependency range for `@opentf/web` to `*` to improve compatibility.
+- **Documentation:** Updated the forms documentation to reflect the new `reactive()` engine, including working examples.
+- **Testing:** Restructured the test suite to adopt a fixture-per-component convention.
+
+
 ## 1.0.0
 
 ### Patch Changes

package/README.md

@@ -1,139 +1,220 @@
 # @opentf/web-form
 
-A reactive form management library for **OTF Web**.
+A high-performance, **path-based reactive forms engine** for [OTF Web](https://github.com/Open-Tech-Foundation/Web-App-Framework).
+
+Fields bind directly to a `reactive()` store, so updates are surgical — typing in
+one field only re-runs the effects that read that field. No virtual DOM, no
+re-render, no memoization.
 
 ## Features
 
-- ✅ **Reactive Binding**: Seamlessly bind form values to signals.
-- 🌲 **Nested State**: Support for complex, nested form structures.
-- 🛡️ **Validation**: Flexible validation system with Zod or custom logic.
-- 🚀 **High Performance**: Direct DOM updates without VDOM overhead.
-- 🛠️ **Simple API**: Featuring a `register` pattern for clean boilerplate-free code.
+- 🌿 **Reactive values** — read `form.values.user.name` / `form.errors.email`
+  straight in your JSX; they update fine-grained.
+- 🌲 **Nested state & arrays** — address any depth by dot-path (`"user.profile.firstName"`, `"tags.0"`).
+- 🛡️ **Validation** — a plain function or a schema library (Zod, Valibot, …), with `onChange` / `onBlur` / `onSubmit` modes.
+- 🚀 **Fine-grained** — per-keystroke work is `O(path)`, not `O(fields)`.
+- 🛠️ **`register` pattern** — spread one call onto an input to wire it up.
 
 ## Installation
 
 ```bash
 npm install @opentf/web-form
+# or
+bun add @opentf/web-form
 ```
 
-## Basic Usage
+## Basic usage
+
+`createForm` returns a stable form object. Spread `register(path)` onto an input
+to bind it, and wrap your submit handler with `handleSubmit`.
+
+```jsx
+import { createForm } from "@opentf/web-form";
+
+export function SignupForm() {
+  const form = createForm({
+    initialValues: { username: "", email: "" },
+    validate: (values) => {
+      const errors = {};
+      if (!values.username) errors.username = "Username required";
+      if (!values.email.includes("@")) errors.email = "Invalid email";
+      return errors;
+    },
+  });
+
+  const onSubmit = (values) => console.log("Submitted:", values);
 
-### Using the `register` Pattern
+  return (
+    <form onsubmit={form.handleSubmit(onSubmit)}>
+      <label for="username">Username</label>
+      <input {...form.register("username")} id="username" />
+      {form.errors.username && <span class="error">{form.errors.username}</span>}
 
-The `register` function returns all necessary props (`name`, `value`, `oninput`, `onblur`) to bind a field to an input element.
+      <label for="email">Email</label>
+      <input {...form.register("email")} id="email" />
+      {form.errors.email && <span class="error">{form.errors.email}</span>}
+
+      <button type="submit">Sign up</button>
+    </form>
+  );
+}
+```
+
+`register(path)` returns everything a field needs — `name`, `value`, `checked`
+(for checkboxes/radios), `error`, `isTouched`, `oninput`, and `onblur` — so a
+controlled input is one line.
+
+## Reactive values
+
+`form.values`, `form.errors`, `form.touched`, and `form.changed` are reactive
+stores — read them directly in your template and only the nodes that read a
+changed path update. There is no provider to thread through.
 
 ```jsx
-import { createForm } from '@opentf/web-form';
+<p>Hello, {form.values.username || "stranger"}</p>
+```
 
+## Nested state & arrays
+
+Address objects and arrays by dot-path; arrays use the index as a segment.
+
+```jsx
 const form = createForm({
-  initialValues: { username: '' }
+  initialValues: {
+    user: {
+      profile: { firstName: "John" },
+      settings: { notifications: true },
+    },
+  },
 });
 
-// In your component
-<input {...form.register('username')} />
+<input {...form.register("user.profile.firstName")} />
+<input {...form.register("user.settings.notifications")} type="checkbox" />
+```
+
+Read nested values and errors with ordinary property access:
+
+```jsx
+<p>{form.values.user.profile.firstName}</p>
+{form.errors.user?.firstName && <span class="error">{form.errors.user.firstName}</span>}
+```
+
+### Dynamic arrays
+
+The values store is a real reactive object — mutate it directly:
+
+```jsx
+const form = createForm({ initialValues: { skills: ["JavaScript"] } });
+
+// Add / remove
+const addSkill = () => form.values.skills.push("");
+const removeSkill = (i) => form.values.skills.splice(i, 1);
+
+// Render a row per item; editing one input never re-renders the others
+{form.values.skills.map((skill, i) => (
+  <input {...form.register(`skills.${i}`)} />
+))}
+```
+
+## Validation
+
+A validator receives the current `values` and returns an errors object keyed by
+field path. Use `validate` to return the errors object directly, or `validator`
+to return `{ errors }` (handy for schema resolvers).
+
+```jsx
+const form = createForm({
+  mode: "onChange",
+  initialValues: { age: 0 },
+  validate: (values) => {
+    const errors = {};
+    if (values.age < 18) errors.age = "Too young";
+    return errors;
+  },
+});
 ```
 
-## Validation with Zod
+### Schema validation (Zod)
 
-You can easily integrate **Zod** for schema-based validation by providing a `validator` function.
+Wrap a schema in a resolver that maps issues to the path-keyed shape. The
+resolver closes over the schema and takes the form `values`:
 
-```javascript
-import { createForm } from '@opentf/web-form';
-import { z } from 'zod';
+```jsx
+import { z } from "zod";
 
 const schema = z.object({
-  username: z.string().min(3, 'Too short'),
-  email: z.string().email('Invalid email')
+  username: z.string().min(3, "Too short"),
+  email: z.string().email("Invalid email"),
 });
 
-// A simple Zod validator wrapper
-const zodValidator = (values, schema) => {
+const zodResolver = (schema) => (values) => {
   const result = schema.safeParse(values);
-  if (result.success) return {};
+  if (result.success) return { errors: {} };
   const errors = {};
-  result.error.errors.forEach(e => {
-    errors[e.path.join('.')] = e.message;
-  });
+  for (const issue of result.error.issues) {
+    errors[issue.path.join(".")] = issue.message;
+  }
   return { errors };
 };
 
 const form = createForm({
-  initialValues: { username: '', email: '' },
-  schema,
-  validator: zodValidator // Can return { errors: ... } or direct errors object
+  initialValues: { username: "", email: "" },
+  validator: zodResolver(schema),
 });
-
-const onSubmit = (values) => {
-  console.log('Form Submitted:', values);
-};
-
-// In your component
-<form onsubmit={form.handleSubmit(onSubmit)}>
-  <div>
-    <input {...form.register('username')} placeholder="Username" />
-    <span className="error">{form.errors.username}</span>
-  </div>
-  
-  <div>
-    <input {...form.register('email')} placeholder="Email" />
-    <span className="error">{form.errors.email}</span>
-  </div>
-
-  <button type="submit">Submit</button>
-</form>
 ```
 
-## Form State Helpers
-
-`createForm` returns several reactive signals and proxies to track the form lifecycle:
-
-| Helper | Type | Description |
-| :--- | :--- | :--- |
-| `isValid` | `Signal<boolean>` | `true` if there are no validation errors. |
-| `isChanged` | `Signal<boolean>` | `true` if the form values differ from `initialValues`. |
-| `isTouched` | `Signal<boolean>` | `true` if any field has been blurred. |
-| `isSubmitting` | `Signal<boolean>` | `true` while the `onSubmit` handler is running. |
-| `isSubmitted` | `Signal<boolean>` | `true` if the form has been successfully submitted. |
-| `touched` | `Proxy<boolean>` | Access per-field touched state: `form.touched.email`. |
-| `changed` | `Proxy<boolean>` | Access per-field changed state: `form.changed.email`. |
+A validator may be **async** (return a Promise); `form.isValidating` is `true`
+while it resolves — useful for server-side uniqueness checks.
 
-## Validation Modes
+### Validation modes
 
-You can customize when validation triggers using `mode` and `reValidateMode`.
+| Option | Values | Default | When it validates |
+| :--- | :--- | :--- | :--- |
+| `mode` | `"onChange"` `"onBlur"` `"onSubmit"` | `"onBlur"` | `onChange`: every edit + on mount · `onBlur`: on blur · `onSubmit`: only on submit |
+| `reValidateMode` | `"onChange"` `"onBlur"` | `"onChange"` | After the first error exists, when to re-validate |
 
-```javascript
-const form = createForm({
-  mode: 'onBlur',          // Initial validation: 'onSubmit', 'onBlur', 'onTouched', 'onChange'
-  reValidateMode: 'onChange' // Re-validation: 'onChange', 'onBlur', 'onSubmit'
-});
+```js
+createForm({ mode: "onChange", reValidateMode: "onBlur" });
 ```
 
-- **Default mode**: `onBlur`
-- **Default reValidateMode**: `onChange`
+`handleSubmit` always runs the validator first and only calls your handler when
+the form is valid, so a final check is guaranteed regardless of `mode`.
 
-### Resetting the Form
+## Status flags
 
-You can restore the form to its `initialValues` and clear all status flags using the `reset()` method.
+`createForm` exposes derived flags — read them directly (they are reactive in JSX):
 
-```javascript
-<button type="button" onclick={() => form.reset()}>
-  Reset Form
+| Flag | Description |
+| :--- | :--- |
+| `isValid` | `true` when there are no errors. |
+| `isChanged` | `true` when values differ from `initialValues`. |
+| `isTouched` | `true` when any field has been blurred. |
+| `isSubmitting` | `true` while an async `onSubmit` handler is running. |
+| `isValidating` | `true` while an async validator is running. |
+| `isSubmitted` | `true` after a successful submit. |
+| `submitCount` | Number of submit attempts. |
+
+```jsx
+<button type="submit" disabled={form.isSubmitting || !form.isValid}>
+  {form.isSubmitting ? "Saving…" : "Save"}
 </button>
 ```
 
-## Custom Validation
+Per-field `touched` and `changed` state is on the matching store:
+`form.touched.email`, `form.changed.user`.
 
-For simpler cases, you can use the `validate` function which expects you to return the errors object directly.
+## Resetting
 
-```javascript
-const form = createForm({
-  initialValues: { age: 0 },
-  validate: (values) => {
-    const errors = {};
-    if (values.age < 18) errors.age = 'Too young';
-    return errors;
-  }
-});
+`reset()` restores `initialValues` and clears status. Pass an object to reset to
+new baseline values (which become the new "initial" for `isChanged`).
+
+```jsx
+<button type="button" onclick={() => form.reset()}>Reset</button>
+```
+
+```js
+form.reset();                 // back to initial
+form.reset({ username: "" }); // new baseline
 ```
 
 ## License

package/index.js

@@ -1,223 +1,229 @@
-
 import {
   signal,
   computed,
-  batch,
   effect,
+  batch,
   untracked,
   getCurrentInstance,
+  reactive,
+  toRawValue,
+  snapshot,
 } from "@opentf/web";
 
-export { signal, computed, batch, effect, untracked, getCurrentInstance };
+export { signal, computed, batch, effect, untracked, reactive, getCurrentInstance };
 
-import { set, get, unset, clone, isEql } from "@opentf/std";
+import { clone, isEql } from "@opentf/std";
 
 /**
- * Enterprise Form Reactivity Engine
- * 
- * Features:
- * - Mount-Aware Stability Cache
- * - Setup-Phase Subscription Isolation
- * - Deep Reactive Proxy with Array Mutation Support
+ * Path-based reactive forms engine for OTF Web.
+ *
+ * The form's values/errors/touched/changed trees are `reactive()` stores
+ * (@opentf/web), so `form.values.user.name` and `form.errors.email` are read
+ * directly in JSX with fine-grained reactivity — no provider object, no bespoke
+ * proxy. The engine layers field registration, validation modes, and submit
+ * orchestration on top.
  */
 
 const INST_FORMS_REGISTRY = new WeakMap();
-let isSetup = false;
 
 export function createForm(options = {}) {
+  // Scope the form to the mounting component so re-entrant `createForm` calls
+  // (e.g. the component body running again) return the same instance. Outside a
+  // component (module scope, tests) there is no instance — just build one.
   const inst = getCurrentInstance();
   if (!inst) return _createForm(options);
 
-  if (!INST_FORMS_REGISTRY.has(inst)) {
-    INST_FORMS_REGISTRY.set(inst, new Map());
-  }
-  const forms = INST_FORMS_REGISTRY.get(inst);
+  let forms = INST_FORMS_REGISTRY.get(inst);
+  if (!forms) INST_FORMS_REGISTRY.set(inst, (forms = new Map()));
 
-  const key = options.key || JSON.stringify({
-    initialValues: options.initialValues
-  });
-  
+  const key = options.key || JSON.stringify({ initialValues: options.initialValues });
   if (forms.has(key)) {
     const form = forms.get(key);
-    if (form._updateConfig) {
-      form._updateConfig(options.mode, options.reValidateMode);
-    }
+    form._updateConfig?.(options.mode, options.reValidateMode);
     return form;
   }
-
-  isSetup = true;
-  try {
-    const form = _createForm(options);
-    forms.set(key, form);
-    return form;
-  } finally {
-    isSetup = false;
-  }
+  const form = _createForm(options);
+  forms.set(key, form);
+  return form;
 }
 
 function _createForm(options = {}) {
-  const initialValuesSig = signal(clone(options.initialValues || {}));
-  const valuesSig = signal(clone(initialValuesSig.value));
-  const errorsSig = signal({});
-  const touchedSig = signal({});
-  const changedSig = signal({});
+  let initialValues = clone(options.initialValues || {});
+
+  const valuesStore = reactive(clone(initialValues));
+  const errorsStore = reactive({});
+  // touched mirrors the value tree with `false` leaves, so a field reads `false`
+  // (not undefined) before it is ever blurred. `changed` is filled by the
+  // creation effect below (top-level booleans vs. initial values).
+  const touchedStore = reactive(mirrorLeaves(initialValues, false));
+  const changedStore = reactive({});
+
+  const modeSig = signal(options.mode);
+  const reValidateModeSig = signal(options.reValidateMode);
   const isSubmittingSig = signal(false);
   const isValidatingSig = signal(false);
   const isSubmittedSig = signal(false);
   const submitCountSig = signal(0);
-  const modeSig = signal(options.mode);
-  const reValidateModeSig = signal(options.reValidateMode);
 
-  const signalsCache = new Map();
-
-  function getSignal(sigType, path, defaultValue) {
-    const key = `${sigType}:${path}`;
-    if (signalsCache.has(key)) return signalsCache.get(key);
-    const initialVal = get(
-      sigType === "v" ? valuesSig.peek() : sigType === "e" ? errorsSig.peek() : sigType === "t" ? touchedSig.peek() : changedSig.peek(),
-      path
-    );
-    const sig = signal(initialVal ?? defaultValue);
-    signalsCache.set(key, sig);
-    return sig;
+  const normMode = (m) =>
+    ((m && typeof m === "object" && "value" in m ? m.value : m) || "onBlur");
+  const normReValidate = (m) =>
+    ((m && typeof m === "object" && "value" in m ? m.value : m) || "onChange");
+
+  const activeValidator = options.validator || options.validate;
+
+  // --- path helpers: walk the reactive store so reads subscribe & writes notify
+  function readPath(store, path) {
+    if (!path) return store;
+    let node = store;
+    for (const p of path.split(".")) {
+      if (node == null) return undefined;
+      node = node[p];
+    }
+    return node;
   }
 
-  function notifySignals(sigType) {
-    const prefix = `${sigType}:`;
-    const fullData = sigType === "v" ? valuesSig.peek() : sigType === "e" ? errorsSig.peek() : sigType === "t" ? touchedSig.peek() : changedSig.peek();
-    
-    for (const [cacheKey, sig] of signalsCache) {
-      if (!cacheKey.startsWith(prefix)) continue;
-      const path = cacheKey.slice(prefix.length);
-      const newVal = path === "" ? fullData : get(fullData, path);
-      sig.value = newVal;
+  function writePath(store, path, value) {
+    const parts = path.split(".");
+    let node = store;
+    for (let i = 0; i < parts.length - 1; i++) {
+      const p = parts[i];
+      let next = node[p];
+      if (next == null || typeof next !== "object") {
+        node[p] = {};
+        next = node[p];
+      }
+      node = next;
     }
+    node[parts[parts.length - 1]] = value;
   }
 
-  const getMode = () => {
-    const m = modeSig.value;
-    return (m instanceof Object && 'value' in m ? m.value : m) || "onBlur";
-  };
-  const getReValidateMode = () => {
-    const rm = reValidateModeSig.value;
-    return (rm instanceof Object && 'value' in rm ? rm.value : rm) || "onChange";
-  };
-  const activeValidator = options.validator || options.validate;
+  function deletePath(store, path) {
+    const parts = path.split(".");
+    let node = store;
+    for (let i = 0; i < parts.length - 1; i++) {
+      node = node[parts[i]];
+      if (node == null || typeof node !== "object") return;
+    }
+    delete node[parts[parts.length - 1]];
+  }
 
-  function hasErrors(obj) {
-    if (!obj || typeof obj !== "object") return false;
-    return Object.values(obj).some((v) => {
-      if (v === undefined || v === null) return false;
-      if (typeof v === "object") return hasErrors(v);
-      return true;
-    });
+  // Reconcile a reactive store in place to match a plain object, touching only
+  // the leaves that actually differ (fine-grained — no wholesale replace).
+  function syncStore(store, next) {
+    next = next || {};
+    const raw = toRawValue(store);
+    for (const k of Object.keys(raw)) {
+      if (!(k in next)) delete store[k];
+    }
+    for (const k of Object.keys(next)) {
+      const nv = next[k];
+      const cur = raw[k];
+      if (nv && typeof nv === "object" && cur && typeof cur === "object") {
+        syncStore(store[k], nv);
+      } else if (!isEql(cur, nv)) {
+        store[k] = nv;
+      }
+    }
   }
 
-  const isValidSig = computed(() => !hasErrors(errorsSig.value));
-  const isTouchedSig = computed(() => hasErrors(touchedSig.value));
-  const isDirtySig = computed(() => !isEql(valuesSig.value, initialValuesSig.value));
+  // --- validation
+  const normalizeErrors = (r) => (r && r.errors !== undefined ? r.errors : r) || {};
 
-  function updateErrors(results, fieldPath) {
-    const currentErrors = results && results.errors ? results.errors : results || {};
+  function applyErrors(errorsObj, fieldPath) {
     if (fieldPath) {
-      const fieldError = get(currentErrors, fieldPath);
-      const newErrors = clone(errorsSig.value || {});
-      if (fieldError) set(newErrors, fieldPath, fieldError);
-      else unset(newErrors, fieldPath);
-      errorsSig.value = newErrors;
+      const fieldErr = readRaw(errorsObj, fieldPath);
+      if (fieldErr) writePath(errorsStore, fieldPath, fieldErr);
+      else deletePath(errorsStore, fieldPath);
     } else {
-      errorsSig.value = currentErrors || {};
+      syncStore(errorsStore, errorsObj);
     }
-    notifySignals("e");
   }
 
+  let validationToken = 0;
   function runValidation(fieldPath) {
     if (!activeValidator) return;
+    const token = ++validationToken;
+    const result = activeValidator(snapshot(valuesStore));
+    if (result instanceof Promise) {
+      isValidatingSig.value = true;
+      return result
+        .then((r) => {
+          if (token === validationToken) applyErrors(normalizeErrors(r), fieldPath);
+        })
+        .finally(() => {
+          if (token === validationToken) isValidatingSig.value = false;
+        });
+    }
+    applyErrors(normalizeErrors(result), fieldPath);
+  }
+
+  // --- changed tracking: per top-level key, deep-compared to initial values.
+  function recomputeChanged() {
+    const v = toRawValue(valuesStore);
+    const keys = new Set([...Object.keys(v), ...Object.keys(initialValues)]);
+    for (const k of keys) {
+      const ch = !isEql(v[k], initialValues[k]);
+      if (toRawValue(changedStore)[k] !== ch) changedStore[k] = ch;
+    }
+  }
 
+  // One effect observes every value change and (a) recomputes `changed`, and
+  // (b) in onChange mode, revalidates — covering inputs, direct assignment, and
+  // array mutation alike. Writes are untracked so it never depends on its own
+  // output. Validates once on creation, satisfying onChange's "validate on init".
+  effect(() => {
+    deepTrack(valuesStore);
+    const mode = normMode(modeSig.value);
     untracked(() => {
-      const results = activeValidator(valuesSig.peek());
-      if (results instanceof Promise) {
-        isValidatingSig.value = true;
-        return results.then((res) => updateErrors(res, fieldPath)).finally(() => isValidatingSig.value = false);
-      }
-      updateErrors(results, fieldPath);
+      recomputeChanged();
+      if (mode === "onChange") runValidation();
     });
-  }
+  });
 
+  // --- field registration
   function updateValue(path, val) {
-    batch(() => {
-      const newState = clone(valuesSig.peek());
-      if (path === "") {
-        valuesSig.value = clone(val);
-      } else {
-        set(newState, path, val);
-        valuesSig.value = newState;
-      }
-      notifySignals("v");
-
-      const isFieldChanged = !isEql(val, path === "" ? initialValuesSig.peek() : get(initialValuesSig.peek(), path));
-      const newChanged = clone(changedSig.peek() || {});
-      if (path === "") {
-        // Root changed?
-      } else {
-        set(newChanged, path, isFieldChanged);
-        changedSig.value = newChanged;
-      }
-      notifySignals("c");
-
-      const mode = getMode();
-      const hasAnyErrors = hasErrors(errorsSig.peek());
-      const reValidateMode = getReValidateMode();
-
-      if (mode === "onChange") runValidation(path);
-      else if (hasAnyErrors && reValidateMode === "onChange") runValidation(path);
-    });
+    writePath(valuesStore, path, val);
+    const mode = normMode(modeSig.peek());
+    if (mode === "onChange") return; // the effect above revalidates
+    if (hasTruthy(toRawValue(errorsStore)) && normReValidate(reValidateModeSig.peek()) === "onChange") {
+      runValidation(path);
+    }
   }
-  const register = (path) => {
-    const valSig = getSignal("v", path);
-    const errSig = getSignal("e", path);
-    const touchSig = getSignal("t", path, false);
-    
-    return {
-      name: path,
-      value: valSig,
-      checked: valSig,
-      error: errSig,
-      isTouched: touchSig,
-      oninput: (e) => {
-        const val = e.target.type === "checkbox" ? e.target.checked : e.target.value;
-        updateValue(path, val);
-      },
-      onblur: () => {
-        const newTouched = clone(touchedSig.value || {});
-        set(newTouched, path, true);
-        touchedSig.value = newTouched;
-        notifySignals("t", path, touchedSig.value);
-        const mode = getMode();
-        if (mode === "onBlur") runValidation(path);
-      },
-    };
-  };
 
-  function markAllTouched(obj) {
-    if (!obj || typeof obj !== "object") return true;
-    const res = Array.isArray(obj) ? [] : {};
-    Object.keys(obj).forEach((key) => {
-      res[key] = markAllTouched(obj[key]);
-    });
-    return res;
-  }
+  const register = (path) => ({
+    name: path,
+    value: readPath(valuesStore, path),
+    checked: readPath(valuesStore, path),
+    error: computed(() => readPath(errorsStore, path)),
+    isTouched: computed(() => readPath(touchedStore, path) ?? false),
+    oninput: (e) => {
+      const t = e.target;
+      updateValue(path, t.type === "checkbox" ? t.checked : t.value);
+    },
+    onblur: () => {
+      writePath(touchedStore, path, true);
+      const mode = normMode(modeSig.peek());
+      if (mode === "onBlur") runValidation(path);
+      else if (
+        hasTruthy(toRawValue(errorsStore)) &&
+        normReValidate(reValidateModeSig.peek()) === "onBlur"
+      ) {
+        runValidation(path);
+      }
+    },
+  });
 
+  // --- submit / reset
   const handleSubmit = (fn) => async (e) => {
     if (e && e.preventDefault) e.preventDefault();
-    touchedSig.value = markAllTouched(valuesSig.value);
-    notifySignals("t");
+    syncStore(touchedStore, mirrorLeaves(snapshot(valuesStore), true));
     isSubmittingSig.value = true;
     submitCountSig.value++;
     await runValidation();
-    if (isValidSig.value) {
+    if (!hasTruthy(toRawValue(errorsStore))) {
       try {
-        await fn(valuesSig.value);
+        await fn(snapshot(valuesStore));
         isSubmittedSig.value = true;
       } finally {
         isSubmittingSig.value = false;
@@ -229,108 +235,19 @@ function _createForm(options = {}) {
 
   const reset = (newValues) => {
     batch(() => {
-      if (newValues !== undefined) initialValuesSig.value = clone(newValues);
-      valuesSig.value = clone(initialValuesSig.value);
-      errorsSig.value = {};
-      touchedSig.value = {};
-      changedSig.value = {};
+      if (newValues !== undefined) initialValues = clone(newValues);
+      syncStore(valuesStore, clone(initialValues));
+      syncStore(errorsStore, {});
+      syncStore(touchedStore, mirrorLeaves(initialValues, false));
+      syncStore(changedStore, {});
       isSubmittedSig.value = false;
-      notifySignals("v");
-      notifySignals("e");
-      notifySignals("t");
-      notifySignals("c");
     });
   };
 
-  const proxyCache = new Map();
-
-  function createDeepProxy(sig, path = [], defaultValue = undefined) {
-
-    const pathStr = path.join(".");
-    // Use signal identity in cache key to avoid collisions between values/errors/etc.
-    const sigKey = sig === valuesSig ? "v" : sig === errorsSig ? "e" : sig === touchedSig ? "t" : "c";
-    const cacheKey = `${sigKey}:${pathStr}:${defaultValue}`;
-    if (proxyCache.has(cacheKey)) return proxyCache.get(cacheKey);
-
-    const val = untracked(() => (path.length === 0 ? sig.value : get(sig.value, pathStr)));
-
-    const proxy = new Proxy(val || {}, {
-      get(_, prop) {
-        const latestVal = untracked(() => (path.length === 0 ? sig.value : get(sig.value, pathStr)));
-
-        if (prop === Symbol.toStringTag) {
-          return Array.isArray(latestVal) ? "Array" : "Object";
-        }
-        if (prop === "toJSON") {
-          return () => (path.length === 0 ? sig.value : get(sig.value, pathStr));
-        }
-        if (prop === Symbol.iterator) {
-          return latestVal[Symbol.iterator].bind(latestVal);
-        }
-        if (typeof prop === "symbol") return undefined;
-        if (["__proto__", "constructor", "prototype"].includes(prop)) return undefined;
-
-        const currentPathStr = pathStr ? `${pathStr}.${prop}` : prop;
-        const value = latestVal ? latestVal[prop] : undefined;
-
-        if (Array.isArray(latestVal) && ["push", "pop", "shift", "unshift", "splice", "reverse", "sort"].includes(prop)) {
-          return (...args) => {
-            const nextArr = [...latestVal];
-            const result = nextArr[prop](...args);
-            updateValue(pathStr, nextArr);
-            return result;
-          };
-        }
-
-        if (typeof value === "function") {
-          return value.bind(latestVal);
-        }
-
-        // Subscribe to path-specific signal
-        const subSig = getSignal(sigKey, currentPathStr, value ?? defaultValue);
-        if (!isSetup) subSig.value;
-
-        if (value && typeof value === "object") {
-          return createDeepProxy(sig, [...path, prop], defaultValue);
-        }
-
-        return value ?? defaultValue;
-      },
-      set(_, prop, val) {
-
-        const currentPathStr = [...path, prop].join(".");
-        if (sig === valuesSig) updateValue(currentPathStr, val);
-        else {
-          const newState = clone(sig.value);
-          set(newState, currentPathStr, val);
-          sig.value = newState;
-        }
-        return true;
-      },
-      ownKeys() {
-        const val = untracked(() => (path.length === 0 ? sig.value : get(sig.value, pathStr)));
-        if (!isSetup) {
-          const subSig = getSignal(sigKey, pathStr, val);
-          subSig.value;
-        }
-        const keys = Object.keys(val || {});
-        if (Array.isArray(val) && !keys.includes("length")) {
-          keys.push("length");
-        }
-        return keys;
-      },
-      getOwnPropertyDescriptor(_, prop) {
-        const latestVal = untracked(() => (path.length === 0 ? sig.value : get(sig.value, pathStr)));
-        if (latestVal && typeof latestVal === "object" && prop in latestVal) {
-          return Object.getOwnPropertyDescriptor(latestVal, prop);
-        }
-        return undefined;
-      }
-    });
-
-    proxyCache.set(cacheKey, proxy);
-    return proxy;
-  }
+  // --- derived flags
+  const isValidSig = computed(() => !hasTruthy(errorsStore));
+  const isTouchedSig = computed(() => hasTruthy(touchedStore));
+  const isChangedSig = computed(() => hasTruthy(changedStore));
 
   const form = {
     register,
@@ -342,36 +259,92 @@ function _createForm(options = {}) {
         reValidateModeSig.value = newReValidateMode;
       });
     },
-    _notifySignals: notifySignals,
-    get values() { return createDeepProxy(valuesSig); },
-    get errors() { return createDeepProxy(errorsSig); },
-    get touched() { return createDeepProxy(touchedSig, [], false); },
-    get changed() { return createDeepProxy(changedSig, [], false); },
+    _notifySignals() {}, // legacy no-op: reactive stores notify on write
+    get values() { return valuesStore; },
+    get errors() { return errorsStore; },
+    get touched() { return touchedStore; },
+    get changed() { return changedStore; },
     _signals: {
-      values: valuesSig,
-      errors: errorsSig,
-      touched: touchedSig,
-      changed: changedSig,
-      initialValues: initialValuesSig,
-    }
+      values: storeSignal(valuesStore),
+      errors: storeSignal(errorsStore),
+      touched: storeSignal(touchedStore),
+      changed: storeSignal(changedStore),
+    },
   };
 
-  const getSafe = (sig) => (isSetup ? untracked(() => sig.value) : sig.value);
-
   Object.defineProperties(form, {
-    isValid: { get: () => getSafe(isValidSig), enumerable: true },
-    isChanged: { get: () => getSafe(isDirtySig), enumerable: true },
-    isTouched: { get: () => getSafe(isTouchedSig), enumerable: true },
-    isSubmitting: { get: () => getSafe(isSubmittingSig), enumerable: true },
-    isValidating: { get: () => getSafe(isValidatingSig), enumerable: true },
-    isSubmitted: { get: () => getSafe(isSubmittedSig), enumerable: true },
-    submitCount: { get: () => getSafe(submitCountSig), enumerable: true },
+    isValid: { get: () => isValidSig.value, enumerable: true },
+    isChanged: { get: () => isChangedSig.value, enumerable: true },
+    isTouched: { get: () => isTouchedSig.value, enumerable: true },
+    isSubmitting: { get: () => isSubmittingSig.value, enumerable: true },
+    isValidating: { get: () => isValidatingSig.value, enumerable: true },
+    isSubmitted: { get: () => isSubmittedSig.value, enumerable: true },
+    submitCount: { get: () => submitCountSig.value, enumerable: true },
   });
 
-  // Initial validation (only if onChange mode)
-  if (getMode() === "onChange") {
-    runValidation();
+  return form;
+}
+
+// --- shared helpers (no per-form state)
+
+/** Raw (non-reactive) deep read by dot-path. */
+function readRaw(obj, path) {
+  let node = obj;
+  for (const p of path.split(".")) {
+    if (node == null) return undefined;
+    node = node[p];
   }
+  return node;
+}
 
-  return form;
+/** Whether any leaf is truthy — the basis of isValid/isTouched/isChanged. */
+function hasTruthy(obj) {
+  if (obj == null || typeof obj !== "object") return !!obj;
+  return Object.values(obj).some(hasTruthy);
+}
+
+/** Mirror a tree's structure, replacing every leaf with `leaf`. */
+function mirrorLeaves(obj, leaf) {
+  if (obj == null || typeof obj !== "object") return leaf;
+  const res = Array.isArray(obj) ? [] : {};
+  for (const k of Object.keys(obj)) res[k] = mirrorLeaves(obj[k], leaf);
+  return res;
+}
+
+/** Subscribe the active consumer to every path in a store (deep). */
+function deepTrack(store) {
+  const raw = toRawValue(store);
+  if (raw == null || typeof raw !== "object") return;
+  for (const k of Object.keys(store)) {
+    const v = store[k];
+    if (v && typeof v === "object") deepTrack(v);
+  }
+}
+
+/**
+ * A preact-style signal facade over a reactive store for the advanced `_signals`
+ * API: `.value` snapshots/replaces the whole tree, `.subscribe(cb)` fires
+ * immediately then once per change.
+ */
+function storeSignal(store) {
+  return {
+    get value() {
+      return snapshot(store);
+    },
+    set value(v) {
+      const next = v || {};
+      const raw = toRawValue(store);
+      for (const k of Object.keys(raw)) if (!(k in next)) delete store[k];
+      for (const k of Object.keys(next)) store[k] = next[k];
+    },
+    peek() {
+      return toRawValue(store);
+    },
+    subscribe(cb) {
+      return effect(() => {
+        deepTrack(store);
+        cb(snapshot(store));
+      });
+    },
+  };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentf/web-form",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A high-performance, path-based reactive forms engine for the native-first OTF Web.",
   "main": "index.js",
   "module": "index.js",
@@ -12,7 +12,7 @@
     "@opentf/std": "^1.0.0-beta.2"
   },
   "peerDependencies": {
-    "@opentf/web": "workspace:*"
+    "@opentf/web": "*"
   },
   "publishConfig": {
     "access": "public"
@@ -21,7 +21,7 @@
     "test": "bun test --env=happy-dom"
   },
   "devDependencies": {
-    "@opentf/web": "workspace:*",
-    "@opentf/web-test": "workspace:*"
+    "@opentf/web": "0.6.0",
+    "@opentf/web-test": "1.1.0"
   }
 }

package/tests/{Component.test.jsx → Component.test.js}

@@ -1,45 +1,12 @@
 import { expect, test, describe } from "bun:test";
 import { render, userEvent } from "@opentf/web-test";
-import { createForm } from "../index.js";
-
-export function ProfileForm() {
-  const form = createForm({
-    initialValues: { 
-      user: { name: "John" },
-      tags: ["js"]
-    },
-    validate: (v) => {
-      const errors = {};
-      if (v.user.name.length < 3) errors.user = { name: "Too short" };
-      return errors;
-    }
-  });
-
-  const addTag = () => form.values.tags.push(`tag-${form.values.tags.length}`);
-
-  return (
-    <div>
-      <h1 data-testid="title">{form.values.user.name}</h1>
-      <input {...form.register("user.name")} data-testid="name-input" />
-      <div data-testid="name-error">{form.errors.user?.name}</div>
-      
-      <ul data-testid="tag-list">
-        {form.values.tags.map((tag, i) => (
-          <li data-testid={`tag-${i}`}>{tag}</li>
-        ))}
-      </ul>
-      <button onclick={addTag} data-testid="add-tag">Add Tag</button>
-      
-      <div data-testid="status">{form.isValid ? "Valid" : "Invalid"}</div>
-    </div>
-  );
-}
+import ProfileForm from "./ProfileForm.jsx";
 
 describe("Web Form Component Integration", () => {
   test("updates nested values and validation state in UI", async () => {
     const { getByTestId } = render(ProfileForm);
     const user = userEvent.setup();
-    
+
     const input = getByTestId("name-input");
     const error = getByTestId("name-error");
     const status = getByTestId("status");
@@ -71,7 +38,7 @@ describe("Web Form Component Integration", () => {
     const addBtn = getByTestId("add-tag");
 
     expect(list.children.length).toBe(1);
-    
+
     await user.click(addBtn);
     expect(list.children.length).toBe(2);
     expect(getByTestId("tag-1").textContent).toBe("tag-1");

package/tests/ProfileForm.jsx

@@ -0,0 +1,34 @@
+import { createForm } from "../index.js";
+
+export default function ProfileForm() {
+  const form = createForm({
+    initialValues: {
+      user: { name: "John" },
+      tags: ["js"]
+    },
+    validate: (v) => {
+      const errors = {};
+      if (v.user.name.length < 3) errors.user = { name: "Too short" };
+      return errors;
+    }
+  });
+
+  const addTag = () => form.values.tags.push(`tag-${form.values.tags.length}`);
+
+  return (
+    <div>
+      <h1 data-testid="title">{form.values.user.name}</h1>
+      <input {...form.register("user.name")} data-testid="name-input" />
+      <div data-testid="name-error">{form.errors.user?.name}</div>
+
+      <ul data-testid="tag-list">
+        {form.values.tags.map((tag, i) => (
+          <li data-testid={`tag-${i}`}>{tag}</li>
+        ))}
+      </ul>
+      <button onclick={addTag} data-testid="add-tag">Add Tag</button>
+
+      <div data-testid="status">{form.isValid ? "Valid" : "Invalid"}</div>
+    </div>
+  );
+}

package/tests/{StateComponent.test.jsx → StateComponent.test.js}

@@ -1,33 +1,7 @@
 import { expect, test, describe } from "bun:test";
 import { render, userEvent } from "@opentf/web-test";
-import { createForm } from "../index.js";
 import { sleep } from "@opentf/std";
-
-const StateForm = ({ onSubmit }) => {
-  const form = createForm({
-    mode: "onChange", // Use onChange for easier testing of reactive text
-    initialValues: { username: "alice" },
-    validate: (v) => v.username.length < 3 ? { username: "Too short" } : {}
-  });
-
-  return (
-    <form onsubmit={form.handleSubmit(onSubmit)}>
-      <input {...form.register("username")} data-testid="username" />
-      
-      <div data-testid="status-valid">{form.isValid ? "Valid" : "Invalid"}</div>
-      <div data-testid="status-changed">{form.isChanged ? "Changed" : "Unchanged"}</div>
-      <div data-testid="status-touched">{form.isTouched ? "Touched" : "Untouched"}</div>
-      
-      {form.errors.username && <span data-testid="error">{form.errors.username}</span>}
-      
-      <button type="button" onclick={() => form.reset()} data-testid="reset">Reset</button>
-      <button type="submit" data-testid="submit">Submit</button>
-      
-      {form.isSubmitted && <div data-testid="success">Submitted!</div>}
-    </form>
-  );
-
-};
+import StateForm from "./StateForm.jsx";
 
 const waitFor = async (fn, timeout = 1000) => {
   const start = Date.now();
@@ -71,7 +45,7 @@ describe("Form State UI Reactivity", () => {
     await user.clear(input);
     await user.type(input, "bob");
     await user.click(submitBtn);
-    
+
     await waitFor(() => expect(submitted).toBe(true));
     await waitFor(() => expect(getByTestId("success")).toBeTruthy());
 

package/tests/StateForm.jsx

@@ -0,0 +1,29 @@
+import { createForm } from "../index.js";
+
+export default function StateForm({ onSubmit }) {
+  const form = createForm({
+    mode: "onChange", // Use onChange for easier testing of reactive text
+    initialValues: { username: "alice" },
+    validate: (v) => v.username.length < 3 ? { username: "Too short" } : {}
+  });
+
+  // Submit is driven via onclick rather than a native `type="submit"` (which, in
+  // happy-dom, mangles the form subtree on submission regardless of
+  // preventDefault — a test-env quirk, not a real-browser behaviour).
+  return (
+    <div>
+      <input {...form.register("username")} data-testid="username" />
+
+      <div data-testid="status-valid">{form.isValid ? "Valid" : "Invalid"}</div>
+      <div data-testid="status-changed">{form.isChanged ? "Changed" : "Unchanged"}</div>
+      <div data-testid="status-touched">{form.isTouched ? "Touched" : "Untouched"}</div>
+
+      {form.errors.username && <span data-testid="error">{form.errors.username}</span>}
+
+      <button type="button" onclick={() => form.reset()} data-testid="reset">Reset</button>
+      <button type="button" onclick={form.handleSubmit(onSubmit)} data-testid="submit">Submit</button>
+
+      {form.isSubmitted && <div data-testid="success">Submitted!</div>}
+    </div>
+  );
+}