dalila 1.9.21 → 1.9.24

package/dist/form/field-array.js

@@ -0,0 +1,306 @@
+import { signal } from '../core/signal.js';
+export function createFieldArray(basePath, options) {
+    const keys = signal([]);
+    const values = signal(new Map());
+    let keyCounter = 0;
+    function generateKey() {
+        return `${basePath}_${keyCounter++}`;
+    }
+    function remapMetaState(oldIndices, newIndices) {
+        if (!options.errors && !options.touchedSet && !options.dirtySet)
+            return;
+        const indexMap = new Map();
+        for (let i = 0; i < oldIndices.length; i++) {
+            indexMap.set(oldIndices[i], newIndices[i]);
+        }
+        if (options.errors) {
+            options.errors.update((prev) => {
+                const next = {};
+                for (const [path, message] of Object.entries(prev)) {
+                    const newPath = remapPath(path, indexMap);
+                    next[newPath] = message;
+                }
+                return next;
+            });
+        }
+        if (options.touchedSet) {
+            options.touchedSet.update((prev) => {
+                const next = new Set();
+                for (const path of prev) {
+                    next.add(remapPath(path, indexMap));
+                }
+                return next;
+            });
+        }
+        if (options.dirtySet) {
+            options.dirtySet.update((prev) => {
+                const next = new Set();
+                for (const path of prev) {
+                    next.add(remapPath(path, indexMap));
+                }
+                return next;
+            });
+        }
+    }
+    function remapPath(path, indexMap) {
+        const regex = new RegExp(`^${escapeRegExp(basePath)}\\[(\\d+)\\](.*)$`);
+        const match = path.match(regex);
+        if (!match)
+            return path;
+        const oldIndex = parseInt(match[1], 10);
+        const rest = match[2];
+        const newIndex = indexMap.get(oldIndex);
+        if (newIndex === undefined)
+            return path;
+        return `${basePath}[${newIndex}]${rest}`;
+    }
+    function escapeRegExp(string) {
+        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+    function fields() {
+        const currentKeys = keys();
+        const currentValues = values();
+        return currentKeys.map((key) => ({
+            key,
+            value: currentValues.get(key),
+        }));
+    }
+    function length() {
+        return keys().length;
+    }
+    function _getIndex(key) {
+        return keys().indexOf(key);
+    }
+    function _translatePath(path) {
+        const match = path.match(/^([^\[]+)\[(\d+)\](.*)$/);
+        if (!match)
+            return null;
+        const [, arrayPath, indexStr, rest] = match;
+        if (arrayPath !== basePath)
+            return null;
+        const index = parseInt(indexStr, 10);
+        const currentKeys = keys();
+        const key = currentKeys[index];
+        if (!key)
+            return null;
+        return `${arrayPath}:${key}${rest}`;
+    }
+    function append(value) {
+        const items = Array.isArray(value) ? value : [value];
+        const newKeys = items.map(() => generateKey());
+        keys.update((prev) => [...prev, ...newKeys]);
+        values.update((prev) => {
+            const next = new Map(prev);
+            newKeys.forEach((key, i) => next.set(key, items[i]));
+            return next;
+        });
+        options.onMutate?.();
+    }
+    function remove(key) {
+        const removeIndex = _getIndex(key);
+        const currentLength = keys().length;
+        keys.update((prev) => prev.filter((k) => k !== key));
+        values.update((prev) => {
+            const next = new Map(prev);
+            next.delete(key);
+            return next;
+        });
+        if (removeIndex >= 0) {
+            const prefix = `${basePath}[${removeIndex}]`;
+            if (options.errors) {
+                options.errors.update((prev) => {
+                    const next = {};
+                    for (const [path, message] of Object.entries(prev)) {
+                        if (!path.startsWith(prefix))
+                            next[path] = message;
+                    }
+                    return next;
+                });
+            }
+            if (options.touchedSet) {
+                options.touchedSet.update((prev) => {
+                    const next = new Set();
+                    for (const path of prev) {
+                        if (!path.startsWith(prefix))
+                            next.add(path);
+                    }
+                    return next;
+                });
+            }
+            if (options.dirtySet) {
+                options.dirtySet.update((prev) => {
+                    const next = new Set();
+                    for (const path of prev) {
+                        if (!path.startsWith(prefix))
+                            next.add(path);
+                    }
+                    return next;
+                });
+            }
+            const oldIndices = [];
+            const newIndices = [];
+            for (let i = removeIndex + 1; i < currentLength; i++) {
+                oldIndices.push(i);
+                newIndices.push(i - 1);
+            }
+            if (oldIndices.length > 0)
+                remapMetaState(oldIndices, newIndices);
+        }
+        options.onMutate?.();
+    }
+    function removeAt(index) {
+        if (index < 0 || index >= keys().length)
+            return;
+        const key = keys()[index];
+        if (key)
+            remove(key);
+    }
+    function insert(index, value) {
+        const len = keys().length;
+        if (index < 0 || index > len)
+            return;
+        const key = generateKey();
+        const currentLength = len;
+        const oldIndices = [];
+        const newIndices = [];
+        for (let i = index; i < currentLength; i++) {
+            oldIndices.push(i);
+            newIndices.push(i + 1);
+        }
+        if (oldIndices.length > 0)
+            remapMetaState(oldIndices, newIndices);
+        keys.update((prev) => {
+            const next = [...prev];
+            next.splice(index, 0, key);
+            return next;
+        });
+        values.update((prev) => {
+            const next = new Map(prev);
+            next.set(key, value);
+            return next;
+        });
+        options.onMutate?.();
+    }
+    function move(fromIndex, toIndex) {
+        const len = keys().length;
+        if (fromIndex < 0 || fromIndex >= len || toIndex < 0 || toIndex >= len)
+            return;
+        if (fromIndex === toIndex)
+            return;
+        const oldIndices = [];
+        const newIndices = [];
+        if (fromIndex < toIndex) {
+            oldIndices.push(fromIndex);
+            newIndices.push(toIndex);
+            for (let i = fromIndex + 1; i <= toIndex; i++) {
+                oldIndices.push(i);
+                newIndices.push(i - 1);
+            }
+        }
+        else {
+            oldIndices.push(fromIndex);
+            newIndices.push(toIndex);
+            for (let i = toIndex; i < fromIndex; i++) {
+                oldIndices.push(i);
+                newIndices.push(i + 1);
+            }
+        }
+        remapMetaState(oldIndices, newIndices);
+        keys.update((prev) => {
+            const next = [...prev];
+            const [item] = next.splice(fromIndex, 1);
+            next.splice(toIndex, 0, item);
+            return next;
+        });
+        options.onMutate?.();
+    }
+    function swap(indexA, indexB) {
+        const len = keys().length;
+        if (indexA < 0 || indexA >= len || indexB < 0 || indexB >= len)
+            return;
+        if (indexA === indexB)
+            return;
+        remapMetaState([indexA, indexB], [indexB, indexA]);
+        keys.update((prev) => {
+            const next = [...prev];
+            [next[indexA], next[indexB]] = [next[indexB], next[indexA]];
+            return next;
+        });
+        options.onMutate?.();
+    }
+    function replace(newValues) {
+        const newKeys = newValues.map(() => generateKey());
+        if (options.errors) {
+            options.errors.update((prev) => {
+                const next = {};
+                for (const [path, message] of Object.entries(prev)) {
+                    if (!path.startsWith(`${basePath}[`))
+                        next[path] = message;
+                }
+                return next;
+            });
+        }
+        if (options.touchedSet) {
+            options.touchedSet.update((prev) => {
+                const next = new Set();
+                for (const path of prev) {
+                    if (!path.startsWith(`${basePath}[`))
+                        next.add(path);
+                }
+                return next;
+            });
+        }
+        if (options.dirtySet) {
+            options.dirtySet.update((prev) => {
+                const next = new Set();
+                for (const path of prev) {
+                    if (!path.startsWith(`${basePath}[`))
+                        next.add(path);
+                }
+                return next;
+            });
+        }
+        keys.set(newKeys);
+        values.set(new Map(newKeys.map((key, i) => [key, newValues[i]])));
+        options.onMutate?.();
+    }
+    function update(key, value) {
+        values.update((prev) => {
+            const next = new Map(prev);
+            next.set(key, value);
+            return next;
+        });
+        options.onMutate?.();
+    }
+    function updateAt(index, value) {
+        if (index < 0 || index >= keys().length)
+            return;
+        const key = keys()[index];
+        if (key)
+            update(key, value);
+    }
+    function clear() {
+        replace([]);
+    }
+    if (options.scope) {
+        options.scope.onCleanup(() => {
+            clear();
+        });
+    }
+    return {
+        fields,
+        append,
+        remove,
+        removeAt,
+        insert,
+        move,
+        swap,
+        replace,
+        update,
+        updateAt,
+        clear,
+        length,
+        _getIndex,
+        _translatePath,
+    };
+}

package/dist/form/form-dom.d.ts

@@ -0,0 +1,6 @@
+export declare function findFormFieldElement(formElement: HTMLFormElement | null, path: string): HTMLElement | null;
+/**
+ * Reset all `[d-field]` DOM controls to the provided defaults.
+ * Keeps field arrays and meta-state handling to the caller.
+ */
+export declare function resetFormDomFields<T>(formElement: HTMLFormElement | null, defaultValues: Partial<T>): void;

package/dist/form/form-dom.js

@@ -0,0 +1,52 @@
+import { cssEscape, getNestedValue } from './path-utils.js';
+export function findFormFieldElement(formElement, path) {
+    if (!formElement)
+        return null;
+    const escapedPath = cssEscape(path);
+    return formElement.querySelector(`[d-field][data-field-path="${escapedPath}"], [d-field][name="${escapedPath}"]`);
+}
+/**
+ * Reset all `[d-field]` DOM controls to the provided defaults.
+ * Keeps field arrays and meta-state handling to the caller.
+ */
+export function resetFormDomFields(formElement, defaultValues) {
+    if (!formElement)
+        return;
+    formElement.reset();
+    const allFields = formElement.querySelectorAll('[d-field]');
+    for (const el of Array.from(allFields)) {
+        const fieldPath = el.getAttribute('data-field-path') || el.getAttribute('name');
+        if (!fieldPath)
+            continue;
+        const defaultValue = getNestedValue(defaultValues, fieldPath);
+        const input = el;
+        if (defaultValue === undefined)
+            continue;
+        if (input.type === 'checkbox') {
+            if (Array.isArray(defaultValue)) {
+                input.checked = defaultValue.includes(input.value);
+            }
+            else {
+                input.checked = !!defaultValue;
+            }
+            continue;
+        }
+        if (input.type === 'radio') {
+            input.checked = input.value === String(defaultValue);
+            continue;
+        }
+        if (input.tagName === 'SELECT') {
+            const select = el;
+            if (select.multiple && Array.isArray(defaultValue)) {
+                for (const option of Array.from(select.options)) {
+                    option.selected = defaultValue.includes(option.value);
+                }
+            }
+            else {
+                select.value = String(defaultValue);
+            }
+            continue;
+        }
+        input.value = String(defaultValue);
+    }
+}

package/dist/form/form-types.d.ts

@@ -127,21 +127,6 @@ export interface Form<T> {
      * Focus first error field (or specific field)
      */
     focus(path?: string): void;
-    /**
-     * Internal: register a field element
-     * @internal
-     */
-    _registerField(path: string, element: HTMLElement): () => void;
-    /**
-     * Internal: get form element
-     * @internal
-     */
-    _getFormElement(): HTMLFormElement | null;
-    /**
-     * Internal: set form element
-     * @internal
-     */
-    _setFormElement(form: HTMLFormElement): void;
     /**
      * Create or get a field array
      */
@@ -151,11 +136,35 @@ export interface Form<T> {
      * Returns an idempotent unsubscribe function.
      */
     watch(path: string, fn: (next: unknown, prev: unknown) => void): () => void;
+    /**
+     * Get helpers scoped to a specific field path.
+     * Useful for reducing repetitive `form.error("x")` / `form.touched("x")` calls.
+     */
+    field(path: string): FormFieldRef;
+}
+/**
+ * Runtime-only hooks used by `dalila/runtime` form directives.
+ * Kept separate from `Form<T>` so app IntelliSense shows only public APIs.
+ */
+export interface FormInternals {
+    _registerField(path: string, element: HTMLElement): () => void;
+    _getFormElement(): HTMLFormElement | null;
+    _setFormElement(form: HTMLFormElement): void;
 }
+/** Internal runtime shape (public form API + runtime hooks). */
+export type InternalForm<T> = Form<T> & FormInternals;
 export interface FieldArrayItem<T = unknown> {
     key: string;
     value?: T;
 }
+export interface FormFieldRef {
+    path: string;
+    error(): string | null;
+    touched(): boolean;
+    dirty(): boolean;
+    focus(): void;
+    watch(fn: (next: unknown, prev: unknown) => void): () => void;
+}
 export interface FieldArray<TItem = unknown> {
     /**
      * Get array of items with stable keys

package/dist/form/form.d.ts

@@ -9,63 +9,17 @@
  * - Race-safe submits with AbortController
  * - Field arrays with stable keys
  */
-import type { Form, FormOptions } from './form-types.js';
+import { parseFormData } from './parse-form-data.js';
+import type { Form, FormOptions, FormSchemaAdapter } from './form-types.js';
 /**
  * Symbol to mark handlers that have been wrapped by handleSubmit().
  * Used by bindForm to avoid double-wrapping.
  */
 export declare const WRAPPED_HANDLER: unique symbol;
+export { parseFormData };
+export declare function createForm<T = unknown>(options?: FormOptions<T>): Form<T>;
 /**
- * Parse FormData into a nested object structure.
- *
- * Supports:
- * - Simple fields: "email" → { email: "..." }
- * - Nested objects: "user.name" → { user: { name: "..." } }
- * - Arrays: "phones[0].number" → { phones: [{ number: "..." }] }
- * - Checkboxes: single = boolean, multiple = array of values
- * - Select multiple: array of selected values
- * - Radio: single value
- * - Files: File object
- *
- * ## Checkbox Parsing Contract
- *
- * HTML FormData omits unchecked checkboxes entirely. To resolve this ambiguity,
- * parseFormData() inspects the DOM to distinguish between "field missing" vs "checkbox unchecked".
- *
- * ### Single Checkbox (one input with unique name)
- * When there is exactly ONE checkbox with a given name:
- * - Checked (with or without value) → `true`
- * - Unchecked → `false`
- * - Value attribute is ignored (always returns boolean)
- *
- * Example:
- * ```html
- * <input type="checkbox" name="agree" />
- * ```
- * Result: `{ agree: false }` (unchecked) or `{ agree: true }` (checked)
- *
- * ### Multiple Checkboxes (same name, multiple inputs)
- * When there are MULTIPLE checkboxes with the same name:
- * - Result is ALWAYS an array
- * - Some checked → `["value1", "value2"]`
- * - None checked → `[]`
- * - One checked → `["value1"]` (still an array!)
- *
- * Example:
- * ```html
- * <input type="checkbox" name="colors" value="red" checked />
- * <input type="checkbox" name="colors" value="blue" />
- * <input type="checkbox" name="colors" value="green" checked />
- * ```
- * Result: `{ colors: ["red", "green"] }`
- *
- * ### Edge Cases
- * - Radio buttons: Unchecked radio → field absent (standard HTML behavior)
- * - Select multiple: Always returns array (like multiple checkboxes)
- *
- * @param form - The form element to parse (used for DOM inspection)
- * @param fd - FormData instance from the form
- * @returns Parsed form data with nested structure
+ * Convenience factory for the common schema-first case.
+ * Equivalent to `createForm({ ...options, schema })`.
  */
-export declare function parseFormData<T = unknown>(form: HTMLFormElement, fd: FormData): T;
-export declare function createForm<T = unknown>(options?: FormOptions<T>): Form<T>;
+export declare function createFormFromSchema<T = unknown>(schema: FormSchemaAdapter<T>, options?: Omit<FormOptions<T>, 'schema'>): Form<T>;