@wcstack/state 1.10.4 → 1.11.1

package/dist/index.esm.js

@@ -59,7 +59,7 @@ function setConfig(partialConfig) {
     }
 }
 
-var version$1 = "1.10.4";
+var version$1 = "1.11.1";
 var pkg = {
 	version: version$1};
 
@@ -110,58 +110,6 @@ function replaceToReplaceNode(bindingInfo) {
     node.parentNode.replaceChild(replaceNode, node);
 }
 
-function resolveNodePath(root, path) {
-    let currentNode = root;
-    if (path.length === 0)
-        return currentNode;
-    // path.reduce()だと途中でnullになる可能性があるので、
-    for (let i = 0; i < path.length; i++) {
-        currentNode = currentNode?.childNodes[path[i]] ?? null;
-        if (currentNode === null)
-            break;
-    }
-    return currentNode;
-}
-
-function getBindingInfos(node, parseBindingTextResults) {
-    const bindingInfos = [];
-    for (const parseBindingTextResult of parseBindingTextResults) {
-        if (parseBindingTextResult.bindingType !== 'text') {
-            bindingInfos.push({
-                ...parseBindingTextResult,
-                node: node,
-                replaceNode: node,
-            });
-        }
-        else {
-            const replaceNode = document.createTextNode('');
-            bindingInfos.push({
-                ...parseBindingTextResult,
-                node: node,
-                replaceNode: replaceNode,
-            });
-        }
-    }
-    return bindingInfos;
-}
-
-const bindingsByNode = new WeakMap();
-function getBindingsByNode(node) {
-    return bindingsByNode.get(node) || null;
-}
-function setBindingsByNode(node, bindings) {
-    bindingsByNode.set(node, bindings);
-}
-function addBindingByNode(node, binding) {
-    const bindings = getBindingsByNode(node);
-    if (bindings === null) {
-        setBindingsByNode(node, [binding]);
-    }
-    else {
-        bindings.push(binding);
-    }
-}
-
 const DELIMITER = '.';
 const WILDCARD = '*';
 const MAX_WILDCARD_DEPTH = 128;
@@ -294,6 +242,237 @@ class PathInfo {
     }
 }
 
+const cache = new WeakMap();
+function getCustomElement(node) {
+    const cached = cache.get(node);
+    if (cached !== undefined) {
+        return cached;
+    }
+    let value = null;
+    try {
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            return value;
+        }
+        const element = node;
+        const tagName = element.tagName.toLowerCase();
+        if (tagName.includes("-")) {
+            return value = tagName;
+        }
+        if (element.hasAttribute("is")) {
+            const is = element.getAttribute("is");
+            if (is.includes("-")) {
+                return value = is;
+            }
+        }
+        return value;
+    }
+    finally {
+        cache.set(node, value);
+    }
+}
+
+function isValidWcBindable(value) {
+    if (typeof value !== "object" || value === null)
+        return false;
+    const v = value;
+    return v.protocol === "wc-bindable"
+        && v.version === 1
+        && Array.isArray(v.properties);
+}
+function makeExpandedEntry(name, base, stateName) {
+    // Dot-relative spread keeps the loop item root (`.`) without producing `..foo`.
+    const expandedPath = base === "." ? `.${name}` : `${base}.${name}`;
+    return {
+        propName: name,
+        propSegments: [name],
+        propModifiers: [],
+        statePathName: expandedPath,
+        statePathInfo: getPathInfo(expandedPath),
+        stateName,
+        inFilters: [],
+        outFilters: [],
+        bindingType: 'prop',
+    };
+}
+function dedupKey(r) {
+    switch (r.bindingType) {
+        case 'prop':
+        case 'event':
+        case 'radio':
+        case 'checkbox':
+            return `${r.bindingType}::${r.propName}`;
+        case 'spread':
+            return null;
+        default:
+            return null;
+    }
+}
+/**
+ * Expand spread bind-text entries (`...: target`) into per-prop entries
+ * by enumerating wcBindable.properties + inputs of the element's class.
+ *
+ * Behavior:
+ * - With `allowDeferred: true` (default): if class is not yet defined, the
+ *   spread entry stays so the caller can wait via customElements.whenDefined.
+ * - With `allowDeferred: false`: raises if class is not defined.
+ * - Duplicate propName: last-wins (explicit binding overrides spread).
+ * - When config.debug, console.debug logs each override.
+ * - Mid-`*` in target path is allowed (e.g. `...: stores.*.fetch`).
+ *
+ * Composite Profile (COMPOSITE.md / SPEC-extensions § 4) support:
+ * - A composite shell exposes its synthesized declaration via the standard
+ *   `target.constructor.wcBindable` surface (§ 1 Discovery), so this function
+ *   handles it without any composite-specific code path.
+ * - Composed property names use the `<sourceId>.<sourceName>` pattern
+ *   (e.g. "s3.progress"); we keep the dotted name as a single segment so
+ *   element member access stays flat (element["s3.progress"], not nested).
+ * - The expanded state path becomes `targetBase.s3.progress`, which resolves
+ *   as nested state access — author state as `{ s3: { progress: 0 } }` to
+ *   mirror the composed structure.
+ * - Tier claim (Symbol.for("wc-bindable.composite.tiers")) is not read here;
+ *   spread covers observation (T1) and writable inputs (T2) transparently
+ *   through normal property assignment, and commands stay out of spread by
+ *   design regardless of tier.
+ */
+function expandSpread(node, results, options = {}) {
+    const allowDeferred = options.allowDeferred ?? true;
+    if (!results.some(r => r.bindingType === 'spread')) {
+        return results;
+    }
+    const expanded = [];
+    const spreadOrigin = new WeakSet();
+    for (const result of results) {
+        if (result.bindingType !== 'spread') {
+            expanded.push(result);
+            continue;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            raiseError(`Spread binding requires an element node.`);
+        }
+        const element = node;
+        const tagName = getCustomElement(element);
+        if (tagName === null) {
+            raiseError(`Spread binding "${result.statePathName}" requires a custom element with wcBindable, but <${element.tagName.toLowerCase()}> is not a custom element.`);
+        }
+        const customClass = customElements.get(tagName);
+        if (typeof customClass === "undefined") {
+            if (!allowDeferred) {
+                raiseError(`Spread binding "${result.statePathName}" requires <${tagName}> to be registered. Define the custom element before initializing this binding.`);
+            }
+            // Deferred: keep spread entry intact; caller retries via whenDefined.
+            expanded.push(result);
+            continue;
+        }
+        const bindable = customClass.wcBindable;
+        if (!isValidWcBindable(bindable)) {
+            raiseError(`Spread binding "${result.statePathName}" requires <${tagName}> to declare wcBindable (protocol="wc-bindable", version=1).`);
+        }
+        const targetBase = result.statePathName;
+        const stateName = result.stateName;
+        const seen = new Set();
+        for (const prop of bindable.properties) {
+            if (seen.has(prop.name))
+                continue;
+            seen.add(prop.name);
+            const entry = makeExpandedEntry(prop.name, targetBase, stateName);
+            spreadOrigin.add(entry);
+            expanded.push(entry);
+        }
+        // properties win over inputs when the name overlaps because they carry the
+        // full property contract (for example change events).
+        for (const input of (bindable.inputs ?? [])) {
+            if (seen.has(input.name))
+                continue;
+            seen.add(input.name);
+            const entry = makeExpandedEntry(input.name, targetBase, stateName);
+            spreadOrigin.add(entry);
+            expanded.push(entry);
+        }
+    }
+    // Last-wins de-duplication
+    const lastIndexByKey = new Map();
+    for (let i = 0; i < expanded.length; i++) {
+        const key = dedupKey(expanded[i]);
+        if (key !== null) {
+            lastIndexByKey.set(key, i);
+        }
+    }
+    const final = [];
+    for (let i = 0; i < expanded.length; i++) {
+        const key = dedupKey(expanded[i]);
+        if (key === null) {
+            final.push(expanded[i]);
+            continue;
+        }
+        if (lastIndexByKey.get(key) === i) {
+            final.push(expanded[i]);
+        }
+        else if (config.debug && spreadOrigin.has(expanded[i])) {
+            const overrider = expanded[lastIndexByKey.get(key)];
+            const tagText = node.nodeType === Node.ELEMENT_NODE
+                ? `<${node.tagName.toLowerCase()}>`
+                : 'node';
+            console.debug(`[@wcstack/state] spread: prop "${expanded[i].propName}" of ${tagText} overridden by explicit binding (statePath: "${overrider.statePathName}").`);
+        }
+    }
+    return final;
+}
+function hasUnresolvedSpread(results) {
+    return results.some(r => r.bindingType === 'spread');
+}
+
+function resolveNodePath(root, path) {
+    let currentNode = root;
+    if (path.length === 0)
+        return currentNode;
+    // path.reduce()だと途中でnullになる可能性があるので、
+    for (let i = 0; i < path.length; i++) {
+        currentNode = currentNode?.childNodes[path[i]] ?? null;
+        if (currentNode === null)
+            break;
+    }
+    return currentNode;
+}
+
+function getBindingInfos(node, parseBindingTextResults) {
+    const bindingInfos = [];
+    for (const parseBindingTextResult of parseBindingTextResults) {
+        if (parseBindingTextResult.bindingType !== 'text') {
+            bindingInfos.push({
+                ...parseBindingTextResult,
+                node: node,
+                replaceNode: node,
+            });
+        }
+        else {
+            const replaceNode = document.createTextNode('');
+            bindingInfos.push({
+                ...parseBindingTextResult,
+                node: node,
+                replaceNode: replaceNode,
+            });
+        }
+    }
+    return bindingInfos;
+}
+
+const bindingsByNode = new WeakMap();
+function getBindingsByNode(node) {
+    return bindingsByNode.get(node) || null;
+}
+function setBindingsByNode(node, bindings) {
+    bindingsByNode.set(node, bindings);
+}
+function addBindingByNode(node, binding) {
+    const bindings = getBindingsByNode(node);
+    if (bindings === null) {
+        setBindingsByNode(node, [binding]);
+    }
+    else {
+        bindings.push(binding);
+    }
+}
+
 const STRUCTURAL_BINDING_TYPE_SET = new Set([
     "if",
     "elseif",
@@ -1247,6 +1426,7 @@ function parseStatePart(statePart) {
 //   elseif: statePart only (single binding for conditional rendering)
 //   for: statePart only (single binding for loop rendering)
 //   onclick: statePart, onchange: statePart etc. (event listeners)
+//   ...: statePart (spread — expand wcBindable properties+inputs of target object)
 function parseBindTextsForElement(bindText) {
     const [...bindTexts] = bindText.split(';').map(trimFn).filter(s => s.length > 0);
     const results = bindTexts.map((bindText) => {
@@ -1270,6 +1450,23 @@ function parseBindTextsForElement(bindText) {
                 bindingType: 'else',
             };
         }
+        else if (propPart === '...') {
+            const stateResult = parseStatePart(statePart);
+            if (stateResult.outFilters.length > 0) {
+                raiseError(`Invalid spread binding "${bindText}": filters are not allowed on spread targets.`);
+            }
+            if (stateResult.statePathName.length === 0) {
+                raiseError(`Invalid spread binding "${bindText}": spread target path is required.`);
+            }
+            return {
+                propName: '...',
+                propSegments: ['...'],
+                propModifiers: [],
+                inFilters: [],
+                ...stateResult,
+                bindingType: 'spread',
+            };
+        }
         else if (propPart === 'if'
             || propPart === 'elseif'
             || propPart === 'for'
@@ -1430,20 +1627,39 @@ function getSubscriberNodes(root) {
 }
 
 const registeredNodeSet = new WeakSet();
+function processParseResultsForNode(node, parseResults, options) {
+    const expanded = expandSpread(node, parseResults, { allowDeferred: options.allowDeferred });
+    if (hasUnresolvedSpread(expanded)) {
+        const tagName = node.nodeType === Node.ELEMENT_NODE
+            ? getCustomElement(node)
+            : null;
+        if (tagName === null) {
+            raiseError(`Spread binding deferred but element is not a custom element.`);
+        }
+        return { bindings: [], deferred: { node, tagName, parseResults } };
+    }
+    registeredNodeSet.add(node);
+    const bindings = getBindingInfos(node, expanded);
+    setBindingsByNode(node, bindings);
+    resolveInitializedBinding(node);
+    return { bindings, deferred: null };
+}
 function collectNodesAndBindingInfos(root) {
     const subscriberNodes = getSubscriberNodes(root);
     const allBindings = [];
+    const deferredSpreads = [];
     for (const node of subscriberNodes) {
-        if (!registeredNodeSet.has(node)) {
-            registeredNodeSet.add(node);
-            const parseBindingTextResults = getParseBindTextResults(node);
-            const bindings = getBindingInfos(node, parseBindingTextResults);
-            setBindingsByNode(node, bindings);
-            resolveInitializedBinding(node);
-            allBindings.push(...bindings);
+        if (registeredNodeSet.has(node))
+            continue;
+        const parseResults = getParseBindTextResults(node);
+        const result = processParseResultsForNode(node, parseResults, { allowDeferred: true });
+        if (result.deferred !== null) {
+            deferredSpreads.push(result.deferred);
+            continue;
         }
+        allBindings.push(...result.bindings);
     }
-    return [subscriberNodes, allBindings];
+    return [subscriberNodes, allBindings, deferredSpreads];
 }
 function collectNodesAndBindingInfosByFragment(root, nodeInfos) {
     const nodes = [];
@@ -1453,17 +1669,119 @@ function collectNodesAndBindingInfosByFragment(root, nodeInfos) {
         if (node === null) {
             raiseError(`Node not found by path [${nodeInfo.nodePath.join(', ')}] in fragment.`);
         }
-        if (!registeredNodeSet.has(node)) {
-            registeredNodeSet.add(node);
-            const bindings = getBindingInfos(node, nodeInfo.parseBindTextResults);
-            setBindingsByNode(node, bindings);
-            resolveInitializedBinding(node);
-            allBindings.push(...bindings);
-            nodes.push(node);
-        }
+        if (registeredNodeSet.has(node))
+            continue;
+        const result = processParseResultsForNode(node, nodeInfo.parseBindTextResults, { allowDeferred: false });
+        // deferred is impossible when allowDeferred=false (expandSpread raises instead)
+        allBindings.push(...result.bindings);
+        nodes.push(node);
     }
     return [nodes, allBindings];
 }
+function unregisterNode(node) {
+    registeredNodeSet.delete(node);
+}
+/**
+ * Re-process a deferred spread entry once the custom element class is
+ * registered. Expands the captured parseResults, installs bindings, and
+ * returns them so the caller can attach handlers and apply state values.
+ */
+function processDeferredNode(entry) {
+    const { node, parseResults } = entry;
+    unregisterNode(node);
+    const result = processParseResultsForNode(node, parseResults, { allowDeferred: false });
+    return result.bindings;
+}
+
+const _cache$3 = new WeakMap();
+const _cacheNullListIndex$1 = new WeakMap();
+class StateAddress {
+    pathInfo;
+    listIndex;
+    _parentAddress;
+    constructor(pathInfo, listIndex) {
+        this.pathInfo = pathInfo;
+        this.listIndex = listIndex;
+    }
+    get parentAddress() {
+        if (typeof this._parentAddress !== 'undefined') {
+            return this._parentAddress;
+        }
+        const parentPathInfo = this.pathInfo.parentPathInfo;
+        if (parentPathInfo === null) {
+            return null;
+        }
+        const lastSegment = this.pathInfo.segments[this.pathInfo.segments.length - 1];
+        let parentListIndex = null;
+        if (lastSegment === WILDCARD) {
+            parentListIndex = this.listIndex?.parentListIndex ?? null;
+        }
+        else {
+            parentListIndex = this.listIndex;
+        }
+        return this._parentAddress = createStateAddress(parentPathInfo, parentListIndex);
+    }
+}
+function createStateAddress(pathInfo, listIndex) {
+    if (listIndex === null) {
+        let cached = _cacheNullListIndex$1.get(pathInfo);
+        if (typeof cached !== "undefined") {
+            return cached;
+        }
+        cached = new StateAddress(pathInfo, null);
+        _cacheNullListIndex$1.set(pathInfo, cached);
+        return cached;
+    }
+    else {
+        let cacheByPathInfo = _cache$3.get(listIndex);
+        if (typeof cacheByPathInfo === "undefined") {
+            cacheByPathInfo = new WeakMap();
+            _cache$3.set(listIndex, cacheByPathInfo);
+        }
+        let cached = cacheByPathInfo.get(pathInfo);
+        if (typeof cached !== "undefined") {
+            return cached;
+        }
+        cached = new StateAddress(pathInfo, listIndex);
+        cacheByPathInfo.set(pathInfo, cached);
+        return cached;
+    }
+}
+
+// _subscribers は Set のため挿入順を保持する。
+// emit() は subscribe() された順に呼び出され、戻り値配列も同じ順序で返る。
+class CommandToken {
+    _name;
+    _subscribers = new Set();
+    constructor(name) {
+        this._name = name;
+    }
+    get name() {
+        return this._name;
+    }
+    get size() {
+        return this._subscribers.size;
+    }
+    subscribe(fn) {
+        this._subscribers.add(fn);
+        return () => {
+            this._subscribers.delete(fn);
+        };
+    }
+    unsubscribe(fn) {
+        return this._subscribers.delete(fn);
+    }
+    emit(...args) {
+        const results = [];
+        for (const fn of this._subscribers) {
+            results.push(fn(...args));
+        }
+        return results;
+    }
+}
+function isCommandToken(value) {
+    return value instanceof CommandToken;
+}
 
 const loopContextByNode = new WeakMap();
 function getLoopContextByNode(node) {
@@ -1493,13 +1811,18 @@ const connectedCallbackSymbol = Symbol("$$connectedCallback");
 const disconnectedCallbackSymbol = Symbol("$$disconnectedCallback");
 const updatedCallbackSymbol = Symbol("$$updatedCallback");
 
+// onclick: $command.<name> のように、DOM イベントから command token を直接 emit する形式かを判定する。
+// 右辺が $command 名前空間配下のパス（$command.<token>）のときに true。
+function isCommandTokenPath(statePathName) {
+    return statePathName.startsWith(STATE_COMMAND_NAMESPACE_NAME + ".");
+}
 const handlerByHandlerKey$3 = new Map();
 const bindingSetByHandlerKey$3 = new Map();
 function getHandlerKey$3(binding) {
     const modifierKey = binding.propModifiers.filter(m => m === 'prevent' || m === 'stop').sort().join(',');
     return `${binding.stateName}::${binding.statePathName}::${modifierKey}`;
 }
-const stateEventHandlerFunction = (stateName, handlerName, modifiers) => (event) => {
+const stateEventHandlerFunction = (stateName, handlerName, modifiers, statePathInfo) => (event) => {
     if (modifiers.includes('prevent'))
         event.preventDefault();
     if (modifiers.includes('stop'))
@@ -1511,13 +1834,23 @@ const stateEventHandlerFunction = (stateName, handlerName, modifiers) => (event)
         raiseError(`State element with name "${stateName}" not found for event handler.`);
     }
     const loopContext = getLoopContextByNode(node);
+    const isCommand = isCommandTokenPath(handlerName);
     stateElement.createStateAsync("writable", async (state) => {
         state[setLoopContextSymbol](loopContext, () => {
+            const indexes = loopContext?.listIndex.indexes ?? [];
+            if (isCommand) {
+                // command token を解決して emit。引数はハンドラ呼び出しと同じく (event, ...listIndexes) を透過する。
+                const token = state[getByAddressSymbol](createStateAddress(statePathInfo, null));
+                if (!isCommandToken(token)) {
+                    raiseError(`Event binding "${handlerName}" did not resolve to a CommandToken. Declare the name in $commandTokens and reference it as $command.<name>.`);
+                }
+                return token.emit(event, ...indexes);
+            }
             const handler = state[handlerName];
             if (typeof handler !== "function") {
                 raiseError(`Handler "${handlerName}" is not a function on state "${stateName}".`);
             }
-            return Reflect.apply(handler, state, [event, ...(loopContext?.listIndex.indexes ?? [])]);
+            return Reflect.apply(handler, state, [event, ...indexes]);
         });
     });
 };
@@ -1528,7 +1861,7 @@ function attachEventHandler(binding) {
     const key = getHandlerKey$3(binding);
     let stateEventHandler = handlerByHandlerKey$3.get(key);
     if (typeof stateEventHandler === "undefined") {
-        stateEventHandler = stateEventHandlerFunction(binding.stateName, binding.statePathName, binding.propModifiers);
+        stateEventHandler = stateEventHandlerFunction(binding.stateName, binding.statePathName, binding.propModifiers, binding.statePathInfo);
         handlerByHandlerKey$3.set(key, stateEventHandler);
     }
     const eventName = binding.propName.slice(2);
@@ -1544,35 +1877,6 @@ function attachEventHandler(binding) {
     return true;
 }
 
-const cache = new WeakMap();
-function getCustomElement(node) {
-    const cached = cache.get(node);
-    if (cached !== undefined) {
-        return cached;
-    }
-    let value = null;
-    try {
-        if (node.nodeType !== Node.ELEMENT_NODE) {
-            return value;
-        }
-        const element = node;
-        const tagName = element.tagName.toLowerCase();
-        if (tagName.includes("-")) {
-            return value = tagName;
-        }
-        if (element.hasAttribute("is")) {
-            const is = element.getAttribute("is");
-            if (is.includes("-")) {
-                return value = is;
-            }
-        }
-        return value;
-    }
-    finally {
-        cache.set(node, value);
-    }
-}
-
 const CHECK_TYPES = new Set(['radio', 'checkbox']);
 const DEFAULT_VALUE_PROP_NAMES = new Set(['value', 'valueAsNumber', 'valueAsDate']);
 function isPossibleTwoWay(node, propName) {
@@ -1738,19 +2042,19 @@ function setLastListValueByAbsoluteStateAddress(address, value) {
     lastListValueByAbsoluteStateAddress.set(address, value);
 }
 
-const _cache$3 = new WeakMap();
+const _cache$2 = new WeakMap();
 function getAbsolutePathInfo(stateElement, pathInfo) {
-    if (_cache$3.has(stateElement)) {
-        const pathMap = _cache$3.get(stateElement);
+    if (_cache$2.has(stateElement)) {
+        const pathMap = _cache$2.get(stateElement);
         if (pathMap.has(pathInfo)) {
             return pathMap.get(pathInfo);
         }
     }
     else {
-        _cache$3.set(stateElement, new WeakMap());
+        _cache$2.set(stateElement, new WeakMap());
     }
     const absolutePathInfo = Object.freeze(new AbsolutePathInfo(stateElement, pathInfo));
-    _cache$3.get(stateElement).set(pathInfo, absolutePathInfo);
+    _cache$2.get(stateElement).set(pathInfo, absolutePathInfo);
     return absolutePathInfo;
 }
 class AbsolutePathInfo {
@@ -1771,8 +2075,8 @@ class AbsolutePathInfo {
     }
 }
 
-const _cache$2 = new WeakMap();
-const _cacheNullListIndex$1 = new WeakMap();
+const _cache$1 = new WeakMap();
+const _cacheNullListIndex = new WeakMap();
 class AbsoluteStateAddress {
     absolutePathInfo;
     listIndex;
@@ -1802,19 +2106,19 @@ class AbsoluteStateAddress {
 }
 function createAbsoluteStateAddress(absolutePathInfo, listIndex) {
     if (listIndex === null) {
-        let cached = _cacheNullListIndex$1.get(absolutePathInfo);
+        let cached = _cacheNullListIndex.get(absolutePathInfo);
         if (typeof cached !== "undefined") {
             return cached;
         }
         cached = new AbsoluteStateAddress(absolutePathInfo, null);
-        _cacheNullListIndex$1.set(absolutePathInfo, cached);
+        _cacheNullListIndex.set(absolutePathInfo, cached);
         return cached;
     }
     else {
-        let cacheByAbsolutePathInfo = _cache$2.get(listIndex);
+        let cacheByAbsolutePathInfo = _cache$1.get(listIndex);
         if (typeof cacheByAbsolutePathInfo === "undefined") {
             cacheByAbsolutePathInfo = new WeakMap();
-            _cache$2.set(listIndex, cacheByAbsolutePathInfo);
+            _cache$1.set(listIndex, cacheByAbsolutePathInfo);
         }
         let cached = cacheByAbsolutePathInfo.get(absolutePathInfo);
         if (typeof cached !== "undefined") {
@@ -1990,41 +2294,6 @@ function applyChangeToClass(binding, _context, newValue) {
     element.classList.toggle(className, newValue);
 }
 
-// _subscribers は Set のため挿入順を保持する。
-// emit() は subscribe() された順に呼び出され、戻り値配列も同じ順序で返る。
-class CommandToken {
-    _name;
-    _subscribers = new Set();
-    constructor(name) {
-        this._name = name;
-    }
-    get name() {
-        return this._name;
-    }
-    get size() {
-        return this._subscribers.size;
-    }
-    subscribe(fn) {
-        this._subscribers.add(fn);
-        return () => {
-            this._subscribers.delete(fn);
-        };
-    }
-    unsubscribe(fn) {
-        return this._subscribers.delete(fn);
-    }
-    emit(...args) {
-        const results = [];
-        for (const fn of this._subscribers) {
-            results.push(fn(...args));
-        }
-        return results;
-    }
-}
-function isCommandToken(value) {
-    return value instanceof CommandToken;
-}
-
 /**
  * command.<methodName>: <commandToken-path> バインディングの適用ハンドラ。
  *
@@ -2107,61 +2376,6 @@ function applyChangeToCommand(binding, _context, newValue) {
     subscribedBindings.set(binding, { token, unsubscribe, elementRef });
 }
 
-const _cache$1 = new WeakMap();
-const _cacheNullListIndex = new WeakMap();
-class StateAddress {
-    pathInfo;
-    listIndex;
-    _parentAddress;
-    constructor(pathInfo, listIndex) {
-        this.pathInfo = pathInfo;
-        this.listIndex = listIndex;
-    }
-    get parentAddress() {
-        if (typeof this._parentAddress !== 'undefined') {
-            return this._parentAddress;
-        }
-        const parentPathInfo = this.pathInfo.parentPathInfo;
-        if (parentPathInfo === null) {
-            return null;
-        }
-        const lastSegment = this.pathInfo.segments[this.pathInfo.segments.length - 1];
-        let parentListIndex = null;
-        if (lastSegment === WILDCARD) {
-            parentListIndex = this.listIndex?.parentListIndex ?? null;
-        }
-        else {
-            parentListIndex = this.listIndex;
-        }
-        return this._parentAddress = createStateAddress(parentPathInfo, parentListIndex);
-    }
-}
-function createStateAddress(pathInfo, listIndex) {
-    if (listIndex === null) {
-        let cached = _cacheNullListIndex.get(pathInfo);
-        if (typeof cached !== "undefined") {
-            return cached;
-        }
-        cached = new StateAddress(pathInfo, null);
-        _cacheNullListIndex.set(pathInfo, cached);
-        return cached;
-    }
-    else {
-        let cacheByPathInfo = _cache$1.get(listIndex);
-        if (typeof cacheByPathInfo === "undefined") {
-            cacheByPathInfo = new WeakMap();
-            _cache$1.set(listIndex, cacheByPathInfo);
-        }
-        let cached = cacheByPathInfo.get(pathInfo);
-        if (typeof cached !== "undefined") {
-            return cached;
-        }
-        cached = new StateAddress(pathInfo, listIndex);
-        cacheByPathInfo.set(pathInfo, cached);
-        return cached;
-    }
-}
-
 const indexBindingsByContent = new WeakMap();
 function getIndexBindingsByContent(content) {
     return indexBindingsByContent.get(content) ?? [];
@@ -3665,13 +3879,7 @@ function _initializeBindings(allBindings) {
         attachCheckboxEventHandler(binding);
     }
 }
-function initializeBindings(root, parentLoopContext) {
-    const [subscriberNodes, allBindings] = collectNodesAndBindingInfos(root);
-    for (const node of subscriberNodes) {
-        setLoopContextByNode(node, parentLoopContext);
-    }
-    _initializeBindings(allBindings);
-    // create absolute state address and register binding infos
+function _registerAbsoluteAddresses(allBindings) {
     for (const binding of allBindings) {
         const absoluteStateAddress = getAbsoluteStateAddressByBinding(binding);
         addBindingByAbsoluteStateAddress(absoluteStateAddress, binding);
@@ -3684,8 +3892,34 @@ function initializeBindings(root, parentLoopContext) {
             stateElement.setPathInfo(binding.statePathName, binding.bindingType);
         }
     }
+}
+function _scheduleDeferredSpreads(deferredSpreads, parentLoopContext) {
+    for (const entry of deferredSpreads) {
+        customElements.whenDefined(entry.tagName).then(() => {
+            if (!entry.node.isConnected)
+                return; // node was removed before class became ready
+            const bindings = processDeferredNode(entry);
+            if (bindings.length === 0)
+                return;
+            setLoopContextByNode(entry.node, parentLoopContext);
+            _initializeBindings(bindings);
+            _registerAbsoluteAddresses(bindings);
+            applyChangeFromBindings(bindings);
+        }).catch((error) => {
+            console.error(`[@wcstack/state] deferred spread failed for <${entry.tagName}>.`, error);
+        });
+    }
+}
+function initializeBindings(root, parentLoopContext) {
+    const [subscriberNodes, allBindings, deferredSpreads] = collectNodesAndBindingInfos(root);
+    for (const node of subscriberNodes) {
+        setLoopContextByNode(node, parentLoopContext);
+    }
+    _initializeBindings(allBindings);
+    _registerAbsoluteAddresses(allBindings);
     // apply all at once
     applyChangeFromBindings(allBindings);
+    _scheduleDeferredSpreads(deferredSpreads, parentLoopContext);
 }
 function initializeBindingsByFragment(root, nodeInfos) {
     const [subscriberNodes, allBindings] = collectNodesAndBindingInfosByFragment(root, nodeInfos);