@nanahoshi/mona-ui 0.24.0 → 0.24.1

package/README.md

@@ -18,6 +18,7 @@ A modern, high-performance, accessible UI component library built for Angular an
 ## Documentation
 
 - [Internationalization (i18n) & RTL Guide](docs/i18n.md)
+- [Patch Stores & Merge Utilities](docs/patch-store.md)
 - [Component Migration Inventory](docs/internal/i18n-rtl-migration-inventory.md)
 
 ---

package/fesm2022/nanahoshi-mona-ui-common.mjs

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-import { Pipe, linkedSignal, computed, signal } from '@angular/core';
-import { any, contains, all, from, firstOrDefault, ImmutableDictionary } from '@mirei/ts-collections';
-import { DateTime } from 'luxon';
+import { Pipe, linkedSignal, computed, signal, untracked } from '@angular/core';
+import { any, contains, all, firstOrDefault, ImmutableDictionary } from '@mirei/ts-collections';
 
 class PreventableEvent {
     #event;
@@ -80,11 +79,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }] });
 
 class SlicePipe {
+    /**
+     * Returns the elements from `start` up to, but not including, `end`, with the semantics of `Array.prototype.slice`:
+     * negative indices count from the end, and an omitted `end` slices to the end. Returns an empty array for
+     * `null` or `undefined`, such as the first value of the `async` pipe.
+     */
     transform(value, start, end) {
-        return from(value)
-            .skip(start)
-            .take(end - start)
-            .toArray();
+        if (value == null) {
+            return [];
+        }
+        return Array.from(value).slice(start, end);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SlicePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: SlicePipe, isStandalone: true, name: "monaSlice" }); }
@@ -127,8 +131,14 @@ function deepMerge(base, patch, options = defaultOptions, path = []) {
     const out = isPlainObject(base) ? { ...base } : {};
     const keys = Object.keys(patch);
     for (const key of keys) {
+        if (key === "__proto__") {
+            continue;
+        }
         const patchValue = patch[key];
         if (patchValue === undefined) {
+            if (options.undefinedValues === "assign") {
+                out[key] = undefined;
+            }
             continue;
         }
         const baseValue = out[key];
@@ -146,28 +156,35 @@ function deepMerge(base, patch, options = defaultOptions, path = []) {
                 ];
             }
             else {
-                // unionBy Strategy
-                const by = strategy.key;
-                const map = new Map();
-                const getIdentifier = (item) => {
-                    if (Array.isArray(by)) {
-                        return by.map(k => String(item?.[k] ?? "")).join("|");
+                // unionBy strategy: a patch item is merged into the base item with the same key; items without a
+                // key are kept as they are.
+                const identify = createUnionIdentifier(strategy.key);
+                const items = [];
+                const indexById = new Map();
+                const add = (item, merge) => {
+                    const id = identify(item);
+                    const index = id === undefined ? undefined : indexById.get(id);
+                    if (index === undefined) {
+                        if (id !== undefined) {
+                            indexById.set(id, items.length);
+                        }
+                        items.push(item);
+                        return;
                     }
-                    return String(item?.[by] ?? "");
+                    const existing = items[index];
+                    items[index] = !merge
+                        ? item
+                        : isPlainObject(item) && isPlainObject(existing)
+                            ? deepMerge(existing, item, options, currentPath)
+                            : { ...existing, ...item };
                 };
                 for (const item of baseValue) {
-                    map.set(getIdentifier(item), item);
+                    add(item, false);
                 }
                 for (const item of patchValue) {
-                    const id = getIdentifier(item);
-                    const existing = map.get(id);
-                    const mergedItem = isPlainObject(item) && isPlainObject(existing)
-                        ? // @ts-ignore // TODO: Remove this when it is no longer flagged as error
-                            deepMerge(existing, item, options)
-                        : { ...existing, ...item };
-                    map.set(id, mergedItem);
+                    add(item, true);
                 }
-                out[key] = Array.from(map.values());
+                out[key] = items;
             }
             continue;
         }
@@ -185,23 +202,24 @@ function mergeInto(base, patch, options) {
 function mergePatchInto(base, patch, options) {
     return deepMerge(base, patch, options);
 }
-function buildNested(keys, leaf) {
-    const [head, ...rest] = keys;
-    if (head === undefined) {
+/**
+ * Builds a patch that sets `leaf` at `keys`. When `current` (the value the patch will be merged into) holds an
+ * array along the path, the patch carries a copy of that array with the one element replaced, since arrays are
+ * replaced rather than merged. Without `current`, every level is an object.
+ */
+function buildNested(keys, leaf, current) {
+    if (keys.length === 0) {
         return {};
     }
-    if (rest.length === 0) {
-        return { [head]: leaf };
-    }
-    return { [head]: buildNested(rest, leaf) };
+    return buildLevel(keys, leaf, current, false);
 }
-function patchAt(path, value) {
+function patchAt(path, value, current) {
     const keys = path;
-    const nested = buildNested(keys, value);
+    const nested = buildNested(keys, value, current);
     return nested;
 }
 function setAt(obj, path, value, options) {
-    return deepMerge(obj, patchAt(path, value), options);
+    return deepMerge(obj, patchAt(path, value, obj), options);
 }
 function prunePatch(base, patch) {
     if (patch === null || typeof patch !== "object" || base === null || typeof base !== "object") {
@@ -211,7 +229,15 @@ function prunePatch(base, patch) {
     const patchObj = patch;
     const result = { ...patchObj };
     for (const key of Object.keys(patchObj)) {
+        if (key === "__proto__") {
+            delete result[key];
+            continue;
+        }
         if (!(key in baseObj)) {
+            // An undefined field the base doesn't have is no change.
+            if (patchObj[key] === undefined) {
+                delete result[key];
+            }
             continue;
         }
         const baseValue = baseObj[key];
@@ -231,39 +257,131 @@ function prunePatch(base, patch) {
     }
     return Object.keys(result).length === 0 ? undefined : result;
 }
+/**
+ * Structural equality for plain objects, arrays, `Date`, `RegExp`, `Map` and `Set`. Primitives are equal when
+ * `===` says so, and `NaN` equals `NaN`. Dates are equal when they hold the same time (two invalid dates are
+ * equal). Map keys and set members are matched by `SameValueZero`, like `Map.prototype.has`. Cyclic values are
+ * supported.
+ */
 function deepEquals(o1, o2) {
-    if (o1 === o2) {
+    return valuesEqual(o1, o2, new Map());
+}
+function valuesEqual(o1, o2, visited) {
+    if (o1 === o2 || (Number.isNaN(o1) && Number.isNaN(o2))) {
         return true;
     }
-    if (typeof o1 !== typeof o2 || o1 === null || o2 === null || o1 === undefined || o2 === undefined) {
+    if (o1 === null || o2 === null || typeof o1 !== "object" || typeof o2 !== "object") {
         return false;
     }
-    if (o1 instanceof Date && o2 instanceof Date) {
-        return DateTime.fromJSDate(o1).equals(DateTime.fromJSDate(o2));
+    if (o1 instanceof Date || o2 instanceof Date) {
+        return o1 instanceof Date && o2 instanceof Date && Object.is(o1.getTime(), o2.getTime());
+    }
+    if (o1 instanceof RegExp || o2 instanceof RegExp) {
+        return o1 instanceof RegExp && o2 instanceof RegExp && o1.source === o2.source && o1.flags === o2.flags;
     }
-    if (Array.isArray(o1) !== Array.isArray(o2)) {
+    // A pair already being compared further up is assumed equal; any difference shows up there.
+    let seen = visited.get(o1);
+    if (seen?.has(o2)) {
+        return true;
+    }
+    if (!seen) {
+        seen = new Set();
+        visited.set(o1, seen);
+    }
+    seen.add(o2);
+    if (o1 instanceof Map || o2 instanceof Map) {
+        return o1 instanceof Map && o2 instanceof Map && mapsEqual(o1, o2, visited);
+    }
+    if (o1 instanceof Set || o2 instanceof Set) {
+        return o1 instanceof Set && o2 instanceof Set && setsEqual(o1, o2);
+    }
+    if (Array.isArray(o1) || Array.isArray(o2)) {
+        return (Array.isArray(o1) &&
+            Array.isArray(o2) &&
+            o1.length === o2.length &&
+            o1.every((value, index) => valuesEqual(value, o2[index], visited)));
+    }
+    const keys1 = Object.keys(o1);
+    if (keys1.length !== Object.keys(o2).length) {
         return false;
     }
-    if (Array.isArray(o1) && Array.isArray(o2)) {
-        return o1.length === o2.length && o1.every((v, i) => deepEquals(v, o2[i]));
+    const record1 = o1;
+    const record2 = o2;
+    return keys1.every(key => Object.hasOwn(record2, key) && valuesEqual(record1[key], record2[key], visited));
+}
+/** Maps are equal when they have the same keys (by `SameValueZero`) and deeply equal values. */
+function mapsEqual(m1, m2, visited) {
+    if (m1.size !== m2.size) {
+        return false;
     }
-    if (typeof o1 === "object" && typeof o2 === "object") {
-        const keys1 = Object.keys(o1);
-        const keys2 = Object.keys(o2);
-        if (keys1.length !== keys2.length) {
+    for (const [key, value] of m1) {
+        if (!m2.has(key) || !valuesEqual(value, m2.get(key), visited)) {
             return false;
         }
-        for (const key of keys1) {
-            const keyOfT = key;
-            if (!Object.prototype.hasOwnProperty.call(o2, key) || !deepEquals(o1[keyOfT], o2[keyOfT])) {
-                return false;
-            }
+    }
+    return true;
+}
+/** Sets are equal when they have the same members (by `SameValueZero`). */
+function setsEqual(s1, s2) {
+    if (s1.size !== s2.size) {
+        return false;
+    }
+    for (const value of s1) {
+        if (!s2.has(value)) {
+            return false;
         }
-        return true;
     }
-    return false;
+    return true;
+}
+/**
+ * One level of `buildNested`. Inside an array (`whole`), each level must be the whole value, since the array
+ * element replaces the old one; outside, a level holds only the key on the path.
+ */
+function buildLevel(keys, leaf, current, whole) {
+    const [head, ...rest] = keys;
+    const isArray = Array.isArray(current);
+    const child = current != null && typeof current === "object"
+        ? current[head]
+        : undefined;
+    const value = rest.length === 0 ? leaf : buildLevel(rest, leaf, child, whole || isArray);
+    if (isArray) {
+        const copy = [...current];
+        copy[Number(head)] = value;
+        return copy;
+    }
+    if (whole && isPlainObject(current)) {
+        return { ...current, [head]: value };
+    }
+    return { [head]: value };
+}
+/**
+ * Returns a function that tells `unionBy` items apart by the values of their key fields, or returns `undefined` for
+ * an item that lacks one. Values keep their type (`1` and `"1"` differ), and composite keys can't collide.
+ */
+function createUnionIdentifier(by) {
+    const keys = Array.isArray(by) ? by : [by];
+    return item => {
+        const values = keys.map(key => item != null && typeof item === "object" ? item[key] : undefined);
+        return values.some(value => value == null) ? undefined : JSON.stringify(values, unionKeyReplacer);
+    };
+}
+function unionKeyReplacer(_key, value) {
+    return typeof value === "bigint" ? { bigint: String(value) } : value;
 }
 
+/**
+ * Drafts hold final values: an `undefined` in a patch clears the field, and the draft is applied over the base
+ * with `replace`, so an array strategy only ever applies once, to the patch that introduced it.
+ */
+const STORE_MERGE_OPTIONS = { undefinedValues: "assign" };
+/**
+ * Applies `patch` to the view of `base` with `draft`, and returns the fields that still differ from `base`.
+ */
+function applyPatch(base, draft, patch, options) {
+    const currentView = deepMerge(base, draft, STORE_MERGE_OPTIONS);
+    const nextView = deepMerge(currentView, patch, { ...STORE_MERGE_OPTIONS, ...options });
+    return prunePatch(base, nextView) ?? {};
+}
 class ObjectPatchStore {
     #base;
     #committed;
@@ -274,8 +392,8 @@ class ObjectPatchStore {
             computation: (newBase, previous) => {
                 const strategy = this.#options.baseChangeStrategy ?? "wipe";
                 if (!previous) {
-                    // First computation — initialise from options.initial if provided.
-                    return this.#options.initial?.() ?? {};
+                    // First computation; the constructor then sets the initial draft.
+                    return {};
                 }
                 switch (strategy) {
                     case "preserve":
@@ -301,7 +419,7 @@ class ObjectPatchStore {
             return deepEquals(prunedDraft, prunedCommitted);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pristine" }] : /* istanbul ignore next */ []));
-        this.view = computed(() => deepMerge(this.#base(), this.#draft()), /* @ts-ignore */
+        this.view = computed(() => deepMerge(this.#base(), this.#draft(), STORE_MERGE_OPTIONS), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
         this.#options = options;
         this.#base = options.source();
@@ -325,32 +443,25 @@ class ObjectPatchStore {
     }
     patch(patch, options) {
         const effectiveOptions = options ?? this.#options.mergeOptions;
-        this.#draft.update(currentDraft => {
-            const currentFullView = deepMerge(this.#base(), currentDraft, effectiveOptions);
-            const updatedFullView = deepMerge(currentFullView, patch, effectiveOptions);
-            const nextDraft = prunePatch(this.#base(), updatedFullView);
-            return nextDraft ?? {};
-        });
+        this.#draft.update(currentDraft => applyPatch(this.#base(), currentDraft, patch, effectiveOptions));
     }
     patchPath(path, value, options) {
-        const patch = buildNested(path, value);
+        // Arrays along the path are copied from the current view (see buildNested).
+        const patch = buildNested(path, value, untracked(this.view));
         this.patch(patch, options);
     }
     reset() {
         this.#draft.set({});
         this.#committed.set({});
     }
+    select(projector, equal = deepEquals) {
+        return computed(() => projector(this.view()), { equal });
+    }
     setDraft(patch) {
         this.#draft.set(patch);
     }
     setPath(path, value, options) {
-        // Fix: delegate to patch() so the draft is merged rather than replaced,
-        // preserving any unrelated in-progress changes.
-        const patch = buildNested(path, value);
-        this.patch(patch, options);
-    }
-    select(projector, equal = deepEquals) {
-        return computed(() => projector(this.view()), { equal });
+        this.patchPath(path, value, options);
     }
 }
 class IterablePatchStore {
@@ -365,8 +476,9 @@ class IterablePatchStore {
     #options;
     /**
      * Memoisation cache for the `view` computed. Keyed by item id; each
-     * entry stores the draft reference that produced the merged result so we
-     * can skip deepMerge when neither the base item nor its draft changed.
+     * entry stores the base item and draft references that produced the merged
+     * result, so we can skip deepMerge when neither of them changed. Rebuilt on
+     * every computation, so ids that leave the base or lose their draft drop out.
      */
     #viewCache;
     constructor(options) {
@@ -376,8 +488,8 @@ class IterablePatchStore {
          */
         this.#baseMap = computed(() => new Map(Array.from(this.#base()).map(item => [this.#options.idOf(item), item])), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#baseMap" }] : /* istanbul ignore next */ []));
-        this.#drafts = linkedSignal({ ...(ngDevMode ? { debugName: "#drafts" } : /* istanbul ignore next */ {}), source: () => this.#options.source(),
-            computation: (newSource, previous) => {
+        this.#drafts = linkedSignal({ ...(ngDevMode ? { debugName: "#drafts" } : /* istanbul ignore next */ {}), source: () => this.#base(),
+            computation: (newBase, previous) => {
                 const strategy = this.#options.baseChangeStrategy ?? "wipe";
                 if (!previous) {
                     return ImmutableDictionary.create();
@@ -386,10 +498,10 @@ class IterablePatchStore {
                     case "preserve":
                         return previous.value;
                     case "rebase": {
-                        const baseArray = Array.from(newSource());
+                        const baseMap = new Map(Array.from(newBase, item => [this.#options.idOf(item), item]));
                         let rebased = ImmutableDictionary.create();
                         for (const [id, draft] of previous.value.entries()) {
-                            const baseItem = baseArray.find(item => this.#options.idOf(item) === id);
+                            const baseItem = baseMap.get(id);
                             if (!baseItem) {
                                 // Item no longer exists in base — drop the draft.
                                 continue;
@@ -408,30 +520,32 @@ class IterablePatchStore {
             } });
         /**
          * Memoisation cache for the `view` computed. Keyed by item id; each
-         * entry stores the draft reference that produced the merged result so we
-         * can skip deepMerge when neither the base item nor its draft changed.
+         * entry stores the base item and draft references that produced the merged
+         * result, so we can skip deepMerge when neither of them changed. Rebuilt on
+         * every computation, so ids that leave the base or lose their draft drop out.
          */
         this.#viewCache = new Map();
         this.changes = computed(() => {
-            const baseArray = Array.from(this.#base());
             const drafts = this.#drafts();
-            return baseArray
-                .filter(b => {
+            const changes = [];
+            for (const b of this.#base()) {
                 const draft = drafts.get(this.#options.idOf(b));
-                return draft != null && !isEmptyObject(draft);
-            })
-                .map(b => deepMerge(b, drafts.get(this.#options.idOf(b))));
+                if (draft != null && !isEmptyObject(draft)) {
+                    changes.push(deepMerge(b, draft, STORE_MERGE_OPTIONS));
+                }
+            }
+            return changes;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "changes" }] : /* istanbul ignore next */ []));
         this.pristine = computed(() => {
-            const baseArray = Array.from(this.#base());
+            const baseMap = this.#baseMap();
             const drafts = this.#drafts();
             const committed = this.#committed();
             const allIds = new Set([...drafts.keys(), ...committed.keys()]);
             for (const id of allIds) {
                 const draft = drafts.get(id) ?? {};
                 const committedDraft = committed.get(id) ?? {};
-                const originalItem = baseArray.find(item => this.#options.idOf(item) === id);
+                const originalItem = baseMap.get(id);
                 const prunedDraft = originalItem ? (prunePatch(originalItem, draft) ?? {}) : draft;
                 const prunedCommitted = originalItem
                     ? (prunePatch(originalItem, committedDraft) ?? {})
@@ -445,52 +559,45 @@ class IterablePatchStore {
         ...(ngDevMode ? [{ debugName: "pristine" }] : /* istanbul ignore next */ []));
         this.view = computed(() => {
             const drafts = this.#drafts();
-            return Array.from(this.#base()).map(b => {
+            const previousCache = this.#viewCache;
+            const nextCache = new Map();
+            const view = Array.from(this.#base()).map(b => {
                 const id = this.#options.idOf(b);
                 const patch = drafts.get(id);
                 if (!patch || isEmptyObject(patch)) {
-                    // No draft — return base item directly and evict any stale cache entry.
-                    this.#viewCache.delete(id);
+                    // No draft — return base item directly.
                     return b;
                 }
-                const cached = this.#viewCache.get(id);
-                if (cached && cached.patchRef === patch) {
-                    // Draft reference hasn't changed — return cached merged value
-                    // to avoid an unnecessary deepMerge and a new object allocation.
-                    return cached.merged;
-                }
-                const merged = deepMerge(b, patch);
-                this.#viewCache.set(id, { patchRef: patch, merged });
+                const cached = previousCache.get(id);
+                // Reuse the merged value only when neither the base item nor its
+                // draft changed, to avoid an unnecessary deepMerge and allocation.
+                const merged = cached && cached.baseRef === b && cached.patchRef === patch
+                    ? cached.merged
+                    : deepMerge(b, patch, STORE_MERGE_OPTIONS);
+                nextCache.set(id, { baseRef: b, merged, patchRef: patch });
                 return merged;
             });
+            this.#viewCache = nextCache;
+            return view;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
         this.#options = options;
         this.#base = options.source();
-        let initial;
-        if (options.initial) {
-            if (options.initial() instanceof ImmutableDictionary) {
-                initial = options.initial();
-            }
-            else {
-                initial = ImmutableDictionary.create(options.initial());
-            }
-        }
-        else {
-            initial = ImmutableDictionary.create();
-        }
+        const initialValue = options.initial?.();
+        const initial = initialValue instanceof ImmutableDictionary
+            ? initialValue
+            : ImmutableDictionary.create(initialValue ?? []);
         this.#committed = signal(initial, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#committed" }] : /* istanbul ignore next */ []));
-        if (options.initial) {
-            this.#drafts.set(ImmutableDictionary.create(initial));
+        if (initialValue) {
+            this.#drafts.set(initial);
         }
     }
     clear(id) {
         this.#drafts.update(drafts => {
             if (!drafts.containsKey(id))
                 return drafts;
-            const newDrafts = ImmutableDictionary.create(drafts);
-            return newDrafts.remove(id);
+            return drafts.remove(id);
         });
     }
     clearAll() {
@@ -515,50 +622,47 @@ class IterablePatchStore {
         const patch = this.#drafts().get(id);
         return patch != null && !isEmptyObject(patch);
     }
-    patch(id, patch, options) {
+    patch(id, patch, options = this.#options.mergeOptions) {
         this.#drafts.update(drafts => {
-            let newDrafts = ImmutableDictionary.create(drafts);
             const prev = drafts.get(id) ?? {};
-            let next = deepMerge(prev, patch, options);
-            // Fix: use #baseMap for O(1) lookup instead of a linear scan.
             const originalItem = this.#baseMap().get(id);
-            if (originalItem) {
-                next = prunePatch(originalItem, next) ?? {};
-            }
-            if (isEmptyObject(next)) {
-                newDrafts = newDrafts.remove(id);
-            }
-            else {
-                newDrafts = newDrafts.put(id, next);
-            }
-            return newDrafts;
+            const next = originalItem
+                ? applyPatch(originalItem, prev, patch, options)
+                : deepMerge(prev, patch, { ...STORE_MERGE_OPTIONS, ...options });
+            return isEmptyObject(next) ? drafts.remove(id) : drafts.put(id, next);
         });
     }
-    patchMany(patchTuple, options) {
-        // Fix: prune each resulting draft against the base item for consistency
-        // with patch(), and use #baseMap for O(1) lookups.
+    patchMany(patchTuple, options = this.#options.mergeOptions) {
         const baseMap = this.#baseMap();
         this.#drafts.update(drafts => {
-            let newDrafts = ImmutableDictionary.create(drafts);
+            // Each put on an ImmutableDictionary copies it, so collect the drafts in a Map and build one dictionary.
+            const nextDrafts = new Map(drafts.entries());
             for (const [id, value] of patchTuple) {
-                const prev = newDrafts.get(id) ?? {};
-                let next = deepMerge(prev, value, options);
+                const prev = nextDrafts.get(id) ?? {};
                 const originalItem = baseMap.get(id);
-                if (originalItem) {
-                    next = prunePatch(originalItem, next) ?? {};
-                }
+                const next = originalItem
+                    ? applyPatch(originalItem, prev, value, options)
+                    : deepMerge(prev, value, { ...STORE_MERGE_OPTIONS, ...options });
                 if (isEmptyObject(next)) {
-                    newDrafts = newDrafts.remove(id);
+                    nextDrafts.delete(id);
                 }
                 else {
-                    newDrafts = newDrafts.put(id, next);
+                    nextDrafts.set(id, next);
                 }
             }
-            return newDrafts;
+            return ImmutableDictionary.create(nextDrafts);
         });
     }
     patchPath(id, path, value, options) {
-        const patch = buildNested(path, value);
+        // Arrays along the path are copied from the item's current view (see buildNested).
+        const current = untracked(() => {
+            const baseItem = this.#baseMap().get(id);
+            const draft = this.#drafts().get(id);
+            return baseItem !== undefined && draft
+                ? deepMerge(baseItem, draft, STORE_MERGE_OPTIONS)
+                : (baseItem ?? draft);
+        });
+        const patch = buildNested(path, value, current);
         this.patch(id, patch, options);
     }
     reset() {
@@ -566,21 +670,14 @@ class IterablePatchStore {
         this.#drafts.set(empty);
         this.#committed.set(empty);
     }
+    select(projector, equal = deepEquals) {
+        return computed(() => projector(this.view()), { equal });
+    }
     setDraft(id, patch) {
-        this.#drafts.update(drafts => {
-            let newDrafts = ImmutableDictionary.create(drafts);
-            newDrafts = newDrafts.put(id, patch);
-            return newDrafts;
-        });
+        this.#drafts.update(drafts => isEmptyObject(patch) ? drafts.remove(id) : drafts.put(id, patch));
     }
     setPath(id, path, value, options) {
-        // Fix: delegate to patch() so the draft is merged rather than replaced,
-        // preserving any unrelated in-progress changes.
-        const patch = buildNested(path, value);
-        this.patch(id, patch, options);
-    }
-    select(projector, equal = deepEquals) {
-        return computed(() => projector(this.view()), { equal });
+        this.patchPath(id, path, value, options);
     }
 }
 const createIterablePatchStore = (options) => new IterablePatchStore(options);
@@ -594,11 +691,12 @@ const classInputToClass = (input) => {
         return input;
     }
     if (Array.isArray(input)) {
-        return input.join(" ");
+        return input.filter(Boolean).join(" ");
     }
     if (typeof input === "object") {
         return Object.entries(input)
-            .map(([key, value]) => (!!value ? key : ""))
+            .filter(([, value]) => value)
+            .map(([key]) => key)
             .join(" ");
     }
     return "";
@@ -609,24 +707,32 @@ const classInputToClass = (input) => {
  * @param value The current value.
  * @param min The minimum value.
  * @param max The maximum value.
- * @param precision The number of decimal places to round the percentage to.
+ * @param precision The number of decimal places to round the percentage to, clamped to 0–100.
  * @default 2
- * @returns The percentage of the value within the range, rounded to the specified precision.
+ * @returns The percentage of the value within the range, rounded to the specified precision, or 0 when the range
+ * or the value is not finite.
  */
 const getPercentage = (value, min, max, precision = 2) => {
-    if (max <= min || !isFinite(value)) {
+    if (!isFinite(value) || !isFinite(min) || !isFinite(max) || max <= min) {
         return 0;
     }
     const raw = ((value - min) / (max - min)) * 100;
-    return Number(Math.min(100, Math.max(0, raw)).toFixed(precision));
+    const digits = Math.min(100, Math.max(0, Math.trunc(precision) || 0));
+    return Number(Math.min(100, Math.max(0, raw)).toFixed(digits));
 };
 
+/**
+ * Moves the items at `indices` by `offset` positions, keeping their relative order. Returns a copy of the array
+ * unchanged when the offset is 0 or not an integer, or when any index is not an integer, is out of bounds, or would
+ * move out of bounds. Duplicate indices count once.
+ */
 function moveIndices(array, indices, offset) {
-    if (offset === 0 || indices.length === 0) {
+    if (offset === 0 || indices.length === 0 || !Number.isInteger(offset)) {
         return [...array];
     }
-    // Validate indices are within bounds
-    if (indices.some(i => i < 0 || i >= array.length)) {
+    indices = [...new Set(indices)];
+    // Validate indices are integers within bounds
+    if (indices.some(i => !Number.isInteger(i) || i < 0 || i >= array.length)) {
         return [...array];
     }
     // Check if any index would go out of bounds after the move

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.24.0",
+  "version": "0.24.1",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {

package/types/nanahoshi-mona-ui-common.d.ts

@@ -60,7 +60,12 @@ declare class ContainsPipe implements PipeTransform {
 }
 
 declare class SlicePipe implements PipeTransform {
-    transform<T>(value: Iterable<T>, start: number, end: number): T[];
+    /**
+     * Returns the elements from `start` up to, but not including, `end`, with the semantics of `Array.prototype.slice`:
+     * negative indices count from the end, and an omitted `end` slices to the end. Returns an empty array for
+     * `null` or `undefined`, such as the first value of the `async` pipe.
+     */
+    transform<T>(value: Iterable<T> | null | undefined, start: number, end?: number): T[];
     static ɵfac: i0.ɵɵFactoryDeclaration<SlicePipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<SlicePipe, "monaSlice", true>;
 }
@@ -76,10 +81,12 @@ type BuiltIn = Primitive | Date | RegExp | Function | Map<unknown, unknown> | Se
 type DeepPartial<T> = T extends BuiltIn ? T : T extends Array<infer U> ? Array<DeepPartial<U>> : {
     [P in keyof T]?: DeepPartial<T[P]>;
 };
-type Path<T> = T extends object ? {
-    [K in keyof T]-?: [
-        K
-    ] | (Path<T[K]> extends infer P ? (P extends ReadonlyArray<PropertyKey> ? [K, ...P] : never) : never);
+/**
+ * Every key path into `T`. Paths stop at built-in values (dates, maps, sets, functions), and index arrays by
+ * number, so `['tags', 0]` is a path and `['tags', 'map']` is not.
+ */
+type Path<T> = T extends BuiltIn ? never : T extends ReadonlyArray<infer U> ? [number] | (Path<U> extends infer P ? (P extends ReadonlyArray<PropertyKey> ? [number, ...P] : never) : never) : T extends object ? {
+    [K in keyof T]-?: [K] | (Path<T[K]> extends infer P ? (P extends ReadonlyArray<PropertyKey> ? [K, ...P] : never) : never);
 }[keyof T] : never;
 type PathValue<T, P> = P extends readonly [infer K, ...infer R] ? K extends keyof T ? R["length"] extends 0 ? T[K] : PathValue<T[K], Extract<R, ReadonlyArray<PropertyKey>>> : never : never;
 type ArrayStrategy = {
@@ -92,18 +99,40 @@ type ArrayStrategy = {
 };
 interface DeepMergeOptions {
     arrayStrategy?: ArrayStrategy | ((key: PropertyKey, path: ReadonlyArray<PropertyKey>) => ArrayStrategy);
+    /**
+     * What an own `undefined` value in the patch does. `"skip"` (the default) keeps the base value;
+     * `"assign"` sets the field to `undefined`.
+     */
+    undefinedValues?: "assign" | "skip";
 }
 declare const isEmptyObject: (obj: Record<PropertyKey, unknown>) => boolean;
 declare const isPlainObject: (v: unknown) => v is Record<PropertyKey, unknown>;
+/**
+ * Merges `patch` into a copy of `base`. Only plain objects (object literals, `JSON.parse` output) are merged
+ * key by key. Any other value in the patch, including a class instance, a `Date`, a `Map` or a `Set`, replaces
+ * the base value as a whole, so a partial patch for a class-instance field must carry the whole value.
+ * `__proto__` keys in the patch are ignored.
+ */
 declare function deepMerge<T>(base: T, patch: DeepPartial<T>, options?: DeepMergeOptions, path?: ReadonlyArray<PropertyKey>): T;
 declare function deepMerge<T>(base: DeepPartial<T>, patch: DeepPartial<T>, options?: DeepMergeOptions, path?: ReadonlyArray<PropertyKey>): DeepPartial<T>;
 declare function mergeInto<T>(base: T, patch: DeepPartial<T>, options?: DeepMergeOptions): T;
 declare function mergePatchInto<T>(base: DeepPartial<T>, patch: DeepPartial<T>, options?: DeepMergeOptions): DeepPartial<T>;
-declare function buildNested(keys: ReadonlyArray<PropertyKey>, leaf: unknown): Record<PropertyKey, unknown>;
-declare function patchAt<T, P extends Path<T>>(path: P, value: PathValue<T, P>): DeepPartial<T>;
+/**
+ * Builds a patch that sets `leaf` at `keys`. When `current` (the value the patch will be merged into) holds an
+ * array along the path, the patch carries a copy of that array with the one element replaced, since arrays are
+ * replaced rather than merged. Without `current`, every level is an object.
+ */
+declare function buildNested(keys: ReadonlyArray<PropertyKey>, leaf: unknown, current?: unknown): Record<PropertyKey, unknown>;
+declare function patchAt<T, P extends Path<T>>(path: P, value: PathValue<T, P>, current?: T): DeepPartial<T>;
 declare function setAt<T, P extends Path<T>>(obj: T, path: P, value: PathValue<T, P>, options?: DeepMergeOptions): T;
 declare function prunePatch<T>(base: T, patch: DeepPartial<T>): DeepPartial<T> | undefined;
 declare function prunePatch<T>(base: DeepPartial<T>, patch: DeepPartial<T>): DeepPartial<T> | undefined;
+/**
+ * Structural equality for plain objects, arrays, `Date`, `RegExp`, `Map` and `Set`. Primitives are equal when
+ * `===` says so, and `NaN` equals `NaN`. Dates are equal when they hold the same time (two invalid dates are
+ * equal). Map keys and set members are matched by `SameValueZero`, like `Map.prototype.has`. Cyclic values are
+ * supported.
+ */
 declare function deepEquals<T>(o1: T, o2: T): boolean;
 
 /**
@@ -142,18 +171,6 @@ interface IObjectPatchStore<T> {
      * pending changes (i.e. the draft is an empty object).
      */
     readonly changes: Signal<DeepPartial<T> | undefined>;
-    /**
-     * `true` when the current draft is structurally equal to the last
-     * committed snapshot, i.e. no unsaved changes exist relative to the
-     * last commit point.
-     */
-    readonly pristine: Signal<boolean>;
-    /**
-     * The live merged view of base + draft. Prefer `select()` over reading
-     * this directly in computed signals when you only care about a specific
-     * slice of the object, to avoid unnecessary downstream invalidations.
-     */
-    readonly view: Signal<T>;
     /**
      * Discard the current draft without affecting the committed snapshot.
      * The view reverts to the base value.
@@ -174,7 +191,8 @@ interface IObjectPatchStore<T> {
      * Deep-merge `patch` into the current draft. Only the fields present in
      * `patch` are affected; all other fields retain their current draft or
      * base values. Automatically prunes fields that match the base value so
-     * the draft stays minimal.
+     * the draft stays minimal. A field set to `undefined` is cleared, unless
+     * `options.undefinedValues` is `"skip"`.
      */
     patch(patch: DeepPartial<T>, options?: DeepMergeOptions): void;
     /**
@@ -185,26 +203,17 @@ interface IObjectPatchStore<T> {
      * store.patchPath(['address', 'city'], 'London');
      */
     patchPath<P extends Path<T>>(path: P, value: PathValue<T, P>, options?: DeepMergeOptions): void;
+    /**
+     * `true` when the current draft is structurally equal to the last
+     * committed snapshot, i.e. no unsaved changes exist relative to the
+     * last commit point.
+     */
+    readonly pristine: Signal<boolean>;
     /**
      * Discard both the draft and the committed snapshot, fully resetting
      * the store to a pristine, empty state.
      */
     reset(): void;
-    /**
-     * Directly replace the draft with the given patch object, bypassing the
-     * merge logic. Use with care — this does not prune against the base.
-     * Prefer `patch()` for most use cases.
-     */
-    setDraft(patch: DeepPartial<T>): void;
-    /**
-     * Convenience wrapper over `patch` that sets a single path to a value.
-     * Unlike the old implementation, this merges rather than replaces the
-     * draft, so unrelated draft fields are preserved.
-     *
-     * @example
-     * store.setPath(['address', 'city'], 'London');
-     */
-    setPath<P extends Path<T>>(path: P, value: PathValue<T, P>, options?: DeepMergeOptions): void;
     /**
      * Returns a `Signal` that emits only the slice of `view` selected by
      * `projector`. Uses `deepEquals` as the equality function, so downstream
@@ -222,6 +231,28 @@ interface IObjectPatchStore<T> {
      * readonly city = store.select(v => v.address.city);
      */
     select<R>(projector: (view: T) => R, equal?: (a: R, b: R) => boolean): Signal<R>;
+    /**
+     * Directly replace the draft with the given patch object, bypassing the
+     * merge logic. Use with care — this does not prune against the base, so
+     * a field equal to its base value still counts in `changes` and
+     * `hasDraft()`, while `pristine` ignores it. Prefer `patch()` for most use
+     * cases.
+     */
+    setDraft(patch: DeepPartial<T>): void;
+    /**
+     * Same as `patchPath`: sets a single path to a value, merging into the
+     * draft, so unrelated draft fields are preserved.
+     *
+     * @example
+     * store.setPath(['address', 'city'], 'London');
+     */
+    setPath<P extends Path<T>>(path: P, value: PathValue<T, P>, options?: DeepMergeOptions): void;
+    /**
+     * The live merged view of base + draft. Prefer `select()` over reading
+     * this directly in computed signals when you only care about a specific
+     * slice of the object, to avoid unnecessary downstream invalidations.
+     */
+    readonly view: Signal<T>;
 }
 declare class ObjectPatchStore<T> implements IObjectPatchStore<T> {
     #private;
@@ -236,11 +267,16 @@ declare class ObjectPatchStore<T> implements IObjectPatchStore<T> {
     patch(patch: DeepPartial<T>, options?: DeepMergeOptions): void;
     patchPath<P extends Path<T>>(path: P, value: PathValue<T, P>, options?: DeepMergeOptions): void;
     reset(): void;
+    select<R>(projector: (view: T) => R, equal?: (a: R, b: R) => boolean): Signal<R>;
     setDraft(patch: DeepPartial<T>): void;
     setPath<P extends Path<T>>(path: P, value: PathValue<T, P>, options?: DeepMergeOptions): void;
-    select<R>(projector: (view: T) => R, equal?: (a: R, b: R) => boolean): Signal<R>;
 }
 interface IterablePatchStoreOptions<TItem, TId> {
+    /**
+     * Controls what happens to uncommitted drafts when the base signal emits
+     * a new value. Defaults to `'wipe'`.
+     */
+    baseChangeStrategy?: BaseChangeStrategy;
     /** Extracts the stable identity key from an item. */
     idOf: (item: TItem) => TId;
     /**
@@ -248,13 +284,10 @@ interface IterablePatchStoreOptions<TItem, TId> {
      * per-row edits). Accepts either a `Map` or an `ImmutableDictionary`.
      */
     initial?: () => Map<TId, DeepPartial<TItem>> | ImmutableDictionary<TId, DeepPartial<TItem>>;
+    /** Default merge options applied to all patch operations unless overridden per-call. */
+    mergeOptions?: DeepMergeOptions;
     /** Factory that returns the authoritative base signal for this store. */
     source: () => Signal<Iterable<TItem>>;
-    /**
-     * Controls what happens to uncommitted drafts when the base signal emits
-     * a new value. Defaults to `'wipe'`.
-     */
-    baseChangeStrategy?: BaseChangeStrategy;
 }
 interface IIterablePatchStore<TItem, TId> {
     /**
@@ -262,18 +295,6 @@ interface IIterablePatchStore<TItem, TId> {
      * with its current draft. Items without a draft are excluded.
      */
     readonly changes: Signal<TItem[]>;
-    /**
-     * `true` when every item's current draft is structurally equal to its
-     * last committed snapshot.
-     */
-    readonly pristine: Signal<boolean>;
-    /**
-     * The live merged view of all base items with their drafts applied.
-     * Items without a draft are returned as-is (same reference).
-     * Prefer `select()` over reading this directly in computed signals when
-     * you only care about a specific slice.
-     */
-    readonly view: Signal<TItem[]>;
     /**
      * Discard the draft for the item identified by `id`.
      * Has no effect if the item has no draft.
@@ -298,6 +319,8 @@ interface IIterablePatchStore<TItem, TId> {
      * Deep-merge `patch` into the draft for the item identified by `id`.
      * Automatically prunes fields that now match the base item so the draft
      * stays minimal. Removes the draft entry entirely if it becomes empty.
+     * A field set to `undefined` is cleared, unless `options.undefinedValues`
+     * is `"skip"`.
      */
     patch(id: TId, patch: DeepPartial<TItem>, options?: DeepMergeOptions): void;
     /**
@@ -314,26 +337,16 @@ interface IIterablePatchStore<TItem, TId> {
      * store.patchPath(itemId, ['address', 'city'], 'London');
      */
     patchPath<P extends Path<TItem>>(id: TId, path: P, value: PathValue<TItem, P>, options?: DeepMergeOptions): void;
+    /**
+     * `true` when every item's current draft is structurally equal to its
+     * last committed snapshot.
+     */
+    readonly pristine: Signal<boolean>;
     /**
      * Discard all drafts and committed snapshots, fully resetting the store
      * to a pristine, empty state.
      */
     reset(): void;
-    /**
-     * Directly replace the draft for `id` with the given patch object,
-     * bypassing the merge logic. Use with care — this does not prune against
-     * the base item. Prefer `patch()` for most use cases.
-     */
-    setDraft(id: TId, patch: DeepPartial<TItem>): void;
-    /**
-     * Convenience wrapper over `patch` that sets a single path to a value
-     * for a specific item. Merges into the existing draft rather than
-     * replacing it, so unrelated draft fields are preserved.
-     *
-     * @example
-     * store.setPath(itemId, ['address', 'city'], 'London');
-     */
-    setPath<P extends Path<TItem>>(id: TId, path: P, value: PathValue<TItem, P>, options?: DeepMergeOptions): void;
     /**
      * Returns a `Signal` that emits only the slice of `view` selected by
      * `projector`. Uses `deepEquals` as the equality function by default,
@@ -347,6 +360,30 @@ interface IIterablePatchStore<TItem, TId> {
      * readonly cities = store.select(items => items.map(i => i.address.city));
      */
     select<R>(projector: (view: TItem[]) => R, equal?: (a: R, b: R) => boolean): Signal<R>;
+    /**
+     * Directly replace the draft for `id` with the given patch object,
+     * bypassing the merge logic. An empty patch removes the draft. Use with
+     * care — this does not prune against the base item, so a field equal to
+     * its base value still counts in `changes`, `hasDraft()` and
+     * `dirtyCount()`, while `pristine` ignores it. Prefer `patch()` for most
+     * use cases.
+     */
+    setDraft(id: TId, patch: DeepPartial<TItem>): void;
+    /**
+     * Same as `patchPath`: sets a single path to a value for a specific item,
+     * merging into the existing draft, so unrelated draft fields are preserved.
+     *
+     * @example
+     * store.setPath(itemId, ['address', 'city'], 'London');
+     */
+    setPath<P extends Path<TItem>>(id: TId, path: P, value: PathValue<TItem, P>, options?: DeepMergeOptions): void;
+    /**
+     * The live merged view of all base items with their drafts applied.
+     * Items without a draft are returned as-is (same reference).
+     * Prefer `select()` over reading this directly in computed signals when
+     * you only care about a specific slice.
+     */
+    readonly view: Signal<TItem[]>;
 }
 declare class IterablePatchStore<TItem, TId> implements IIterablePatchStore<TItem, TId> {
     #private;
@@ -360,13 +397,13 @@ declare class IterablePatchStore<TItem, TId> implements IIterablePatchStore<TIte
     dirtyCount(): number;
     getCommitted(): ImmutableDictionary<TId, DeepPartial<TItem>>;
     hasDraft(id: TId): boolean;
-    patch(id: TId, patch: DeepPartial<TItem>, options?: DeepMergeOptions): void;
-    patchMany(patchTuple: Iterable<[TId, DeepPartial<TItem>]>, options?: DeepMergeOptions): void;
+    patch(id: TId, patch: DeepPartial<TItem>, options?: DeepMergeOptions | undefined): void;
+    patchMany(patchTuple: Iterable<[TId, DeepPartial<TItem>]>, options?: DeepMergeOptions | undefined): void;
     patchPath<P extends Path<TItem>>(id: TId, path: P, value: PathValue<TItem, P>, options?: DeepMergeOptions): void;
     reset(): void;
+    select<R>(projector: (view: TItem[]) => R, equal?: (a: R, b: R) => boolean): Signal<R>;
     setDraft(id: TId, patch: DeepPartial<TItem>): void;
     setPath<P extends Path<TItem>>(id: TId, path: P, value: PathValue<TItem, P>, options?: DeepMergeOptions): void;
-    select<R>(projector: (view: TItem[]) => R, equal?: (a: R, b: R) => boolean): Signal<R>;
 }
 declare const createIterablePatchStore: <TItem, TId>(options: IterablePatchStoreOptions<TItem, TId>) => IIterablePatchStore<TItem, TId>;
 declare const createObjectPatchStore: <T>(options: ObjectPatchStoreOptions<T>) => IObjectPatchStore<T>;
@@ -378,12 +415,18 @@ declare const classInputToClass: (input: ClassInputType) => string;
  * @param value The current value.
  * @param min The minimum value.
  * @param max The maximum value.
- * @param precision The number of decimal places to round the percentage to.
+ * @param precision The number of decimal places to round the percentage to, clamped to 0–100.
  * @default 2
- * @returns The percentage of the value within the range, rounded to the specified precision.
+ * @returns The percentage of the value within the range, rounded to the specified precision, or 0 when the range
+ * or the value is not finite.
  */
 declare const getPercentage: (value: number, min: number, max: number, precision?: number) => number;
 
+/**
+ * Moves the items at `indices` by `offset` positions, keeping their relative order. Returns a copy of the array
+ * unchanged when the offset is 0 or not an integer, or when any index is not an integer, is out of bounds, or would
+ * move out of bounds. Duplicate indices count once.
+ */
 declare function moveIndices<T>(array: T[], indices: number[], offset: number): T[];
 
 export { AnyPipe, ContainsPipe, FilterChangeEvent, IterablePatchStore, ObjectPatchStore, PreventableEvent, SlicePipe, TakeFirstPipe, buildNested, classInputToClass, createIterablePatchStore, createObjectPatchStore, deepEquals, deepMerge, getPercentage, isEmptyObject, isPlainObject, mergeInto, mergePatchInto, moveIndices, patchAt, prunePatch, setAt };