mount-observer 0.1.35 → 0.1.37

package/README.md

@@ -37,6 +37,7 @@ The following features have been implemented and tested:
 - ✅ **Shared MutationObserver**: Efficient observer sharing across instances
 - ✅ **Code splitting**: Conditional features loaded on-demand
 - ✅ **Memory management**: WeakRef usage for DOM node references
+- ✅ **Cede Scripts**: Declarative custom element definition via `<script type="cede">`
 
 ### Not Yet Implemented
 - ❌ Reconnect event handling
@@ -666,6 +667,138 @@ export default class MyEnhancement {
 
 [Implemented as EMCScript requirement](requirements/Done/EMCScript.md)
 
+## Custom Element Definition (Cede) Scripts
+
+The `builtIns.cedeScript` handler enables declarative custom element definition using `<script type="cede">` elements. "Cede" stands for **C**ustom **E**lement **De**finition. It creates a new class that extends an existing custom element class and defines it in the appropriate registry — all without writing any JavaScript.
+
+**Why use Cede Scripts?**
+
+- Define custom elements declaratively in HTML
+- Extend existing base classes without writing boilerplate
+- Wire up features from JSON configuration (powered by [assign-gingerly's `defineWithFeatures`](https://github.com/bahrus/assign-gingerly/blob/baseline/docs/defineWithFeatures.md))
+- Works with scoped custom element registries
+- Enables template-based custom elements where the parent's fragment becomes the template
+- Supports external JSON config via `src` attribute (with import maps)
+- Zero JavaScript required for element definition
+
+**Basic usage (simple extension):**
+
+```html
+<time-ticker>
+    <script type="cede" data-extends="xtal-element"></script>
+</time-ticker>
+```
+
+**With inline feature configuration:**
+
+```html
+<time-ticker>
+    <script type="cede" data-extends="el-maker">{
+        "assignFeatures": {
+            "roundabout": {
+                "customData": {"template": "my-template"},
+                "withAttrs": {"base": "ra"},
+                "callbackForwarding": ["connectedCallback"]
+            },
+            "truthSourcer": {
+                "callbackForwarding": ["connectedCallback", "attributeChangedCallback"]
+            }
+        }
+    }</script>
+</time-ticker>
+```
+
+**With external JSON config:**
+
+```html
+<time-ticker>
+    <script type="cede" data-extends="el-maker" src="./time-ticker-config.json"></script>
+</time-ticker>
+```
+
+The `src` attribute uses JSON import assertions, so it works with import maps for bare specifiers (e.g., `src="my-configs/time-ticker.json"`).
+
+**What happens:**
+
+1. The handler finds the script element's `customElementRegistry` (falls back to global `customElements`)
+2. Parses configuration from `src` (JSON import), inline `textContent`, or a pre-existing `export` property
+3. Stores the parsed config on `scriptElement.export` and dispatches a `resolved` event
+4. Delegates to [`defineWithFeatures`](https://github.com/bahrus/assign-gingerly/blob/baseline/docs/defineWithFeatures.md) which:
+   - Awaits `registry.whenDefined('el-maker')` to get the base class
+   - Resolves async feature spawns from the base class's `static supportedFeatures`
+   - Creates a subclass and sets `NewCtr.seedRef = new WeakRef(scriptEl)`
+   - Wires up features via `assignFeatures`
+   - Calls `registry.define('time-ticker', NewCtr)`
+5. If `registry.get('time-ticker')` already exists, does nothing (first definition wins)
+
+The tag name comes from the `localName` of the script element's parent.
+
+**Accessing the seed reference:**
+
+The `seedRef` static property gives the custom element class access to the original script element. The primary use case is extracting the parent's (Shadow) Fragment to create a cloneable template for other instances:
+
+```javascript
+class XtalElement extends HTMLElement {
+    connectedCallback() {
+        const seedScript = this.constructor.seedRef?.deref();
+        if (seedScript) {
+            const parentFragment = seedScript.parentElement.shadowRoot;
+            // Use parentFragment as a template for cloning
+        }
+    }
+}
+```
+
+**With scoped registries:**
+
+```html
+<my-app>
+    #shadow (with scoped registry)
+        <time-ticker>
+            <script type="cede" data-extends="xtal-element"></script>
+        </time-ticker>
+</my-app>
+```
+
+The handler uses the script element's `customElementRegistry` property, so it naturally works with [scoped custom element registries](https://developer.chrome.com/blog/scoped-registries) (Chrome 146+, latest WebKit/Safari). If no scoped registry is present, it falls back to the global `customElements` registry.
+
+**Bootstrapping:**
+
+```html
+<script type="module">
+    import { MountObserver } from 'mount-observer/MountObserver.js';
+
+    // Handler provides matching and whereInstanceOf via static properties
+    const observer = new MountObserver({
+        do: 'builtIns.cedeScript'
+    });
+    observer.observe(document);
+</script>
+```
+
+Or declaratively via a MOSE:
+
+```html
+<script type="mountobserver">
+{
+    "do": "builtIns.cedeScript"
+}
+</script>
+```
+
+**Key behaviors:**
+
+- If the parent element's tag is already defined in the registry, the handler silently no-ops
+- If multiple cede scripts exist under the same parent, the first one to resolve wins
+- The script element must have a `parentElement` or the handler throws
+- `whenDefined` awaits indefinitely — the base class must eventually be registered
+- Empty scripts (no JSON, no `src`) work as simple class extension with no features
+- Feature spawn resolution is cached per base class — defining 10 elements extending the same base only imports each feature once
+
+For full details on the base class contract (`static supportedFeatures`, `fallbackSpawn`, spawn caching, and `assignFeatures` wiring), see the [defineWithFeatures documentation](https://github.com/bahrus/assign-gingerly/blob/baseline/docs/defineWithFeatures.md).
+
+[Implemented as SupportForCedeScripts requirement](requirements/SupportForCedeScripts.md)
+
 ## Syndicating Mount Observers with Synthesizer
 
 The `Synthesizer` abstract base class enables automatic propagation of mount observer configurations across shadow DOM boundaries. It acts as a "syndicator-subscriber" pattern where a syndicator in the document root broadcasts script elements to subscribers in shadow roots.
@@ -680,9 +813,9 @@ The `Synthesizer` abstract base class enables automatic propagation of mount obs
 
 **How it works:**
 
-1. **Syndicator** (in document root): Watches for `script[type="mountobserver"]` and `script[type="emc"]` elements and broadcasts them to subscribers
+1. **Syndicator** (in document root): Watches for `script[type="mountobserver"]`, `script[type="emc"]`, and `script[type="cede"]` elements and broadcasts them to subscribers
 2. **Subscriber** (in shadow roots): Receives and clones script elements from the syndicator
-3. **Automatic activation**: Both syndicator and subscriber activate 7 built-in handlers in their respective root nodes
+3. **Automatic activation**: Both syndicator and subscriber activate 8 built-in handlers in their respective root nodes
 
 **Basic usage:**
 
@@ -730,7 +863,7 @@ The `Synthesizer` abstract base class enables automatic propagation of mount obs
 
 **What happens:**
 
-1. The syndicator (`<app-synthesizer>` in document root) activates 7 built-in handlers:
+1. The syndicator (`<app-synthesizer>` in document root) activates 8 built-in handlers:
    - `builtIns.mountObserverScript` - Process MOSE scripts
    - `builtIns.scriptExport` - Expose module exports from script elements
    - `builtIns.HTMLInclude` - Enable intra-document HTML includes
@@ -738,6 +871,7 @@ The `Synthesizer` abstract base class enables automatic propagation of mount obs
    - `builtIns.generateIds` - Auto-generate unique IDs
    - `builtIns.emcParserScript` - Load parsers for EMC scripts
    - `builtIns.emcScript` - Process EMC scripts
+   - `builtIns.cedeScript` - Declarative custom element definition
 
 <details>
 <summary>Why these handlers?</summary>
@@ -751,6 +885,7 @@ These handlers form the core infrastructure for declarative progressive enhancem
 - **generateIds**: Automates ID generation for forms and accessibility features
 - **emcParserScript**: Enables lazy-loading of complex parsers for enhancement attributes
 - **emcScript**: Processes enhancement configurations for progressive enhancement
+- **cedeScript**: Declarative custom element definition via `<script type="cede">` — extends a base class and defines the parent's tag name
 
 Together, these handlers enable a complete HTML-first development workflow where behaviors, enhancements, and configurations can be declared in HTML and automatically propagated across shadow DOM boundaries.
 
@@ -768,7 +903,7 @@ Together, these handlers enable a complete HTML-first development workflow where
    - Subscribe to `addedscriptelement` events for new scripts
    - Clone each script element and copy its `export` property
    - Append cloned scripts to their own light children
-   - Activate the same 7 built-in handlers in their shadow root
+   - Activate the same 8 built-in handlers in their shadow root
 
 **Syndicator vs Subscriber:**
 
@@ -4067,7 +4202,7 @@ The platform provides some nice help with managing forms, including IDREF depend
 
 This would be useful for other linkages as well, which the platform doesn't support currently.
 
-Again, because of the mount-observer being the "first point of contact" with the DOM, this is supported by mount-observer as well.
+Again, because of the mountWhy these handlers-observer being the "first point of contact" with the DOM, this is supported by mount-observer as well.
 
 ```html
 <section id=section>
@@ -4164,3 +4299,34 @@ To keep the api uniform, we hide this discrepancy by pretending the form element
    
 </script>
 ```
+
+## Viewing Demos Locally
+
+1. Install git
+2. Fork/clone this repo
+3. Install node.js
+4. Open command window to folder where you cloned this repo
+5. > git submodule update --init --recursive
+6. > npm install
+7. > npm run serve
+8. Open http://localhost:8000/ in a modern browser
+
+## Running Tests
+
+```
+> npm run test
+```
+
+## Using from ESM Module:
+
+```JavaScript
+import {MountObserver} 'mount-observer/MountObserver.js';
+```
+
+## Using from CDN:
+
+```html
+<script type=module crossorigin=anonymous>
+    import 'https://esm.sh/mount-observer';
+</script>
+```

package/Synthesizer.js

@@ -15,6 +15,8 @@ import 'mount-observer/handlers/EMCParserScript.js';
 import { emcParser } from 'mount-observer/handlers/EMCParserScript.js';
 import 'mount-observer/handlers/GenIds.js';
 import { genIds } from 'mount-observer/handlers/GenIds.js';
+import 'mount-observer/handlers/CedeScript.js';
+import { cedeScript } from 'mount-observer/handlers/CedeScript.js';
 /**
  * Track which root nodes have already had handlers activated.
  * Uses WeakSet to avoid memory leaks when nodes are garbage collected.
@@ -57,7 +59,7 @@ export class Synthesizer extends HTMLElement {
      * List of built-in handlers to activate.
      */
     static builtInHandlers = [
-        mos, scriptExport, include, hoist, genIds, emcParser, emc
+        mos, scriptExport, include, hoist, genIds, emcParser, emc, cedeScript
     ];
     connectedCallback() {
         // Synthesizer elements are infrastructure, not UI
@@ -149,7 +151,7 @@ export class Synthesizer extends HTMLElement {
      */
     #initializeSyndicator() {
         // Process existing script elements
-        const scripts = this.querySelectorAll('script[type="mountobserver"], script[type="emc"], script[type="emc-parser"]');
+        const scripts = this.querySelectorAll('script[type="mountobserver"], script[type="emc"], script[type="emc-parser"], script[type="cede"]');
         scripts.forEach(script => {
             if (this.checkIfAllowed(script)) {
                 this.#broadcastScript(script);
@@ -161,7 +163,7 @@ export class Synthesizer extends HTMLElement {
                 for (const node of mutation.addedNodes) {
                     if (node instanceof HTMLScriptElement) {
                         const type = node.getAttribute('type');
-                        if (type === 'mountobserver' || type === 'emc' || type === 'emc-parser') {
+                        if (type === 'mountobserver' || type === 'emc' || type === 'emc-parser' || type === 'cede') {
                             if (this.checkIfAllowed(node)) {
                                 this.#broadcastScript(node);
                             }
@@ -194,7 +196,7 @@ export class Synthesizer extends HTMLElement {
         }
         // Process existing scripts from syndicator
         // Only process scripts that pass the syndicator's filtering
-        const scripts = syndicator.querySelectorAll('script[type="mountobserver"], script[type="emc"], script[type="emc-parser"]');
+        const scripts = syndicator.querySelectorAll('script[type="mountobserver"], script[type="emc"], script[type="emc-parser"], script[type="cede"]');
         scripts.forEach(script => {
             if (syndicator.checkIfAllowed(script)) {
                 this.#processScript(script);

package/Synthesizer.ts

@@ -16,6 +16,8 @@ import 'mount-observer/handlers/EMCParserScript.js';
 import {emcParser} from 'mount-observer/handlers/EMCParserScript.js';
 import 'mount-observer/handlers/GenIds.js';
 import {genIds} from 'mount-observer/handlers/GenIds.js';
+import 'mount-observer/handlers/CedeScript.js';
+import {cedeScript} from 'mount-observer/handlers/CedeScript.js';
 
 /**
  * Track which root nodes have already had handlers activated.
@@ -61,7 +63,7 @@ export abstract class Synthesizer extends HTMLElement {
      * List of built-in handlers to activate.
      */
     protected static builtInHandlers = [
-        mos, scriptExport, include, hoist, genIds, emcParser, emc
+        mos, scriptExport, include, hoist, genIds, emcParser, emc, cedeScript
     ];
 
     connectedCallback(): void {
@@ -168,7 +170,7 @@ export abstract class Synthesizer extends HTMLElement {
      */
     #initializeSyndicator(): void {
         // Process existing script elements
-        const scripts = this.querySelectorAll('script[type="mountobserver"], script[type="emc"], script[type="emc-parser"]');
+        const scripts = this.querySelectorAll('script[type="mountobserver"], script[type="emc"], script[type="emc-parser"], script[type="cede"]');
         scripts.forEach(script => {
             if (this.checkIfAllowed(script as HTMLScriptElement)) {
                 this.#broadcastScript(script as HTMLScriptElement);
@@ -181,7 +183,7 @@ export abstract class Synthesizer extends HTMLElement {
                 for (const node of mutation.addedNodes) {
                     if (node instanceof HTMLScriptElement) {
                         const type = node.getAttribute('type');
-                        if (type === 'mountobserver' || type === 'emc' || type === 'emc-parser') {
+                        if (type === 'mountobserver' || type === 'emc' || type === 'emc-parser' || type === 'cede') {
                             if (this.checkIfAllowed(node)) {
                                 this.#broadcastScript(node);
                             }
@@ -219,7 +221,7 @@ export abstract class Synthesizer extends HTMLElement {
         
         // Process existing scripts from syndicator
         // Only process scripts that pass the syndicator's filtering
-        const scripts = syndicator.querySelectorAll('script[type="mountobserver"], script[type="emc"], script[type="emc-parser"]');
+        const scripts = syndicator.querySelectorAll('script[type="mountobserver"], script[type="emc"], script[type="emc-parser"], script[type="cede"]');
         scripts.forEach(script => {
             if (syndicator.checkIfAllowed(script as HTMLScriptElement)) {
                 this.#processScript(script as HTMLScriptElement);

package/handlers/CedeScript.js

@@ -0,0 +1,100 @@
+import { EvtRt } from '../EvtRt.js';
+import { MountObserver } from '../MountObserver.js';
+/**
+ * Handler for `<script type="cede" data-extends="...">` elements.
+ * "Cede" stands for Custom Element Definition.
+ *
+ * Delegates to assign-gingerly's `defineWithFeatures` to create a custom element
+ * class extending the base specified by `data-extends`, optionally wiring up
+ * features from JSON configuration (inline or via `src`).
+ *
+ * The new class gets a static `seedRef` WeakRef pointing back to the script
+ * element, allowing the custom element to extract the parent's (Shadow) Fragment
+ * and create a cloneable template from it.
+ *
+ * Examples:
+ * ```html
+ * <!-- Simple (no features) -->
+ * <time-ticker>
+ *     <script type="cede" data-extends="xtal-element"></script>
+ * </time-ticker>
+ *
+ * <!-- With inline feature config -->
+ * <time-ticker>
+ *     <script type="cede" data-extends="el-maker">{
+ *         "assignFeatures": {
+ *             "roundabout": { "callbackForwarding": ["connectedCallback"] }
+ *         }
+ *     }</script>
+ * </time-ticker>
+ *
+ * <!-- With external JSON config -->
+ * <time-ticker>
+ *     <script type="cede" data-extends="el-maker" src="./time-ticker-config.json"></script>
+ * </time-ticker>
+ * ```
+ */
+export class CedeScriptHandler extends EvtRt {
+    static matching = 'script[type="cede"][data-extends]';
+    static whereInstanceOf = HTMLScriptElement;
+    async mount(mountedElement, mountConfig, context) {
+        this.abort();
+        const scriptEl = mountedElement;
+        const extendsName = scriptEl.dataset.extends;
+        if (!extendsName)
+            return;
+        const parentEl = scriptEl.parentElement;
+        if (!parentEl) {
+            throw new Error('CedeScript: script element must have a parentElement');
+        }
+        const tagName = parentEl.localName;
+        const registry = scriptEl.customElementRegistry || customElements;
+        // Already defined? Do nothing (first one prevails).
+        if (registry.get(tagName))
+            return;
+        // Parse config: from export, src, or inline JSON
+        let config = scriptEl.export;
+        if (!config) {
+            const srcAttr = scriptEl.getAttribute('src');
+            if (srcAttr) {
+                try {
+                    const module = await import(srcAttr, { with: { type: 'json' } });
+                    config = module.default;
+                }
+                catch (error) {
+                    throw new Error(`Failed to import JSON from '${srcAttr}': ${error instanceof Error ? error.message : String(error)}`);
+                }
+            }
+            else {
+                const jsonText = scriptEl.textContent?.trim();
+                if (jsonText) {
+                    try {
+                        config = JSON.parse(jsonText);
+                    }
+                    catch (error) {
+                        throw new Error(`Failed to parse JSON content: ${error instanceof Error ? error.message : String(error)}`);
+                    }
+                }
+                else {
+                    config = {};
+                }
+            }
+            // Store parsed config and dispatch resolved event
+            scriptEl.export = config;
+            const { ResolvedEvent } = await import('../Events.js');
+            scriptEl.dispatchEvent(new ResolvedEvent(config));
+        }
+        // Delegate to defineWithFeatures
+        const { defineWithFeatures } = await import('assign-gingerly/defineWithFeatures.js');
+        // Race condition guard: check again after async operations
+        if (registry.get(tagName))
+            return;
+        await defineWithFeatures(tagName, extendsName, config, registry, {
+            onSubclassCreated(NewCtr) {
+                NewCtr.seedRef = new WeakRef(scriptEl);
+            }
+        });
+    }
+}
+MountObserver.define('builtIns.cedeScript', CedeScriptHandler);
+export const cedeScript = 'builtIns.cedeScript';

package/handlers/CedeScript.ts

@@ -0,0 +1,106 @@
+import { EvtRt } from '../EvtRt.js';
+import { MountConfig, MountContext } from '../types/mount-observer/types.js';
+import { MountObserver } from '../MountObserver.js';
+
+/**
+ * Handler for `<script type="cede" data-extends="...">` elements.
+ * "Cede" stands for Custom Element Definition.
+ * 
+ * Delegates to assign-gingerly's `defineWithFeatures` to create a custom element
+ * class extending the base specified by `data-extends`, optionally wiring up
+ * features from JSON configuration (inline or via `src`).
+ * 
+ * The new class gets a static `seedRef` WeakRef pointing back to the script
+ * element, allowing the custom element to extract the parent's (Shadow) Fragment
+ * and create a cloneable template from it.
+ * 
+ * Examples:
+ * ```html
+ * <!-- Simple (no features) -->
+ * <time-ticker>
+ *     <script type="cede" data-extends="xtal-element"></script>
+ * </time-ticker>
+ * 
+ * <!-- With inline feature config -->
+ * <time-ticker>
+ *     <script type="cede" data-extends="el-maker">{
+ *         "assignFeatures": {
+ *             "roundabout": { "callbackForwarding": ["connectedCallback"] }
+ *         }
+ *     }</script>
+ * </time-ticker>
+ * 
+ * <!-- With external JSON config -->
+ * <time-ticker>
+ *     <script type="cede" data-extends="el-maker" src="./time-ticker-config.json"></script>
+ * </time-ticker>
+ * ```
+ */
+export class CedeScriptHandler extends EvtRt {
+    static matching = 'script[type="cede"][data-extends]';
+    static whereInstanceOf = HTMLScriptElement;
+
+    async mount(mountedElement: Element, mountConfig: MountConfig, context: MountContext): Promise<void> {
+        this.abort();
+        const scriptEl = mountedElement as HTMLScriptElement;
+        const extendsName = scriptEl.dataset.extends;
+        if (!extendsName) return;
+
+        const parentEl = scriptEl.parentElement;
+        if (!parentEl) {
+            throw new Error('CedeScript: script element must have a parentElement');
+        }
+
+        const tagName = parentEl.localName;
+        const registry = (scriptEl as any).customElementRegistry || customElements;
+
+        // Already defined? Do nothing (first one prevails).
+        if (registry.get(tagName)) return;
+
+        // Parse config: from export, src, or inline JSON
+        let config: Record<string, any> = (scriptEl as any).export;
+        if (!config) {
+            const srcAttr = scriptEl.getAttribute('src');
+            if (srcAttr) {
+                try {
+                    const module = await import(srcAttr, { with: { type: 'json' } } as any);
+                    config = module.default;
+                } catch (error) {
+                    throw new Error(`Failed to import JSON from '${srcAttr}': ${error instanceof Error ? error.message : String(error)}`);
+                }
+            } else {
+                const jsonText = scriptEl.textContent?.trim();
+                if (jsonText) {
+                    try {
+                        config = JSON.parse(jsonText);
+                    } catch (error) {
+                        throw new Error(`Failed to parse JSON content: ${error instanceof Error ? error.message : String(error)}`);
+                    }
+                } else {
+                    config = {};
+                }
+            }
+
+            // Store parsed config and dispatch resolved event
+            (scriptEl as any).export = config;
+            const { ResolvedEvent } = await import('../Events.js');
+            scriptEl.dispatchEvent(new ResolvedEvent(config));
+        }
+
+        // Delegate to defineWithFeatures
+        const { defineWithFeatures } = await import('assign-gingerly/defineWithFeatures.js');
+
+        // Race condition guard: check again after async operations
+        if (registry.get(tagName)) return;
+
+        await defineWithFeatures(tagName, extendsName, config as any, registry, {
+            onSubclassCreated(NewCtr) {
+                (NewCtr as any).seedRef = new WeakRef(scriptEl);
+            }
+        });
+    }
+}
+
+MountObserver.define('builtIns.cedeScript', CedeScriptHandler);
+
+export const cedeScript = 'builtIns.cedeScript';

package/handlers/EMCScript.js

@@ -152,8 +152,8 @@ export class EMCScriptHandler extends EvtRt {
         if (!enh) {
             throw new Error('Element does not have enh property. Make sure ElementMountExtension is loaded.');
         }
-        // Pass synthesizerElement through SpawnContext if available
-        const spawnContext = synthesizerElement ? { synthesizerElement } : undefined;
+        // Pass synthesizerElement and full EMC config through SpawnContext
+        const spawnContext = { synthesizerElement, emc: emcConfig };
         await enh.get(enhancementConfig, spawnContext);
     }
     /**

package/handlers/EMCScript.ts

@@ -180,8 +180,8 @@ export class EMCScriptHandler extends EvtRt {
             throw new Error('Element does not have enh property. Make sure ElementMountExtension is loaded.');
         }
         
-        // Pass synthesizerElement through SpawnContext if available
-        const spawnContext = synthesizerElement ? { synthesizerElement } : undefined;
+        // Pass synthesizerElement and full EMC config through SpawnContext
+        const spawnContext = { synthesizerElement, emc: emcConfig };
         await enh.get(enhancementConfig, spawnContext);
     }
     

package/handlers/elementIntersection.js

@@ -1,73 +1,73 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setupElementIntersection = setupElementIntersection;
-exports.isElementIntersecting = isElementIntersecting;
-var Events_js_1 = require("./Events.js");
-function setupElementIntersection(init, rootNodeRef, mountedElements, modules, observer, matchesSelector, handleMatch) {
-    var whereElementIntersectsWith = init.whereElementIntersectsWith;
-    if (!whereElementIntersectsWith) {
-        throw new Error('whereElementIntersectsWith is required');
-    }
-    // Track which elements are currently intersecting
-    var intersectingElements = new WeakSet();
-    // Create IntersectionObserver with the provided options
-    var intersectionObserver = new IntersectionObserver(function (entries) {
-        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
-            var entry = entries_1[_i];
-            var element = entry.target;
-            if (entry.isIntersecting) {
-                // Element is now intersecting
-                intersectingElements.add(element);
-                // Check if element matches all other conditions and mount if so
-                if (matchesSelector(element)) {
-                    handleMatch(element);
-                }
-            }
-            else {
-                // Element is no longer intersecting
-                intersectingElements.delete(element);
-                // Dismount if it was mounted
-                if (mountedElements.weakSet.has(element)) {
-                    dismountElement(element);
-                }
-            }
-        }
-    }, whereElementIntersectsWith);
-    function dismountElement(element) {
-        // Remove from mounted elements
-        mountedElements.weakSet.delete(element);
-        for (var _i = 0, _a = mountedElements.setWeak; _i < _a.length; _i++) {
-            var ref = _a[_i];
-            if (ref.deref() === element) {
-                mountedElements.setWeak.delete(ref);
-                break;
-            }
-        }
-        // Dispatch dismount event
-        observer.dispatchEvent(new Events_js_1.DismountEvent(element, 'intersection-failed', init));
-    }
-    function observeElement(element) {
-        intersectionObserver.observe(element);
-    }
-    return {
-        intersectionObserver: intersectionObserver,
-        observeElement: observeElement,
-        cleanup: function () {
-            intersectionObserver.disconnect();
-        }
-    };
-}
-/**
- * Check if an element is currently intersecting
- * This is called from #matchesSelector to determine if intersection condition is met
- */
-function isElementIntersecting(element, intersectionObserver) {
-    // If no intersection observer is set up, consider all elements as intersecting
-    if (!intersectionObserver) {
-        return true;
-    }
-    // When intersection observer is active, we can't synchronously determine intersection state
-    // The element will be observed and the callback will handle mounting when it intersects
-    // Return false here to prevent immediate mounting
-    return false;
-}
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupElementIntersection = setupElementIntersection;
+exports.isElementIntersecting = isElementIntersecting;
+var Events_js_1 = require("./Events.js");
+function setupElementIntersection(init, rootNodeRef, mountedElements, modules, observer, matchesSelector, handleMatch) {
+    var whereElementIntersectsWith = init.whereElementIntersectsWith;
+    if (!whereElementIntersectsWith) {
+        throw new Error('whereElementIntersectsWith is required');
+    }
+    // Track which elements are currently intersecting
+    var intersectingElements = new WeakSet();
+    // Create IntersectionObserver with the provided options
+    var intersectionObserver = new IntersectionObserver(function (entries) {
+        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+            var entry = entries_1[_i];
+            var element = entry.target;
+            if (entry.isIntersecting) {
+                // Element is now intersecting
+                intersectingElements.add(element);
+                // Check if element matches all other conditions and mount if so
+                if (matchesSelector(element)) {
+                    handleMatch(element);
+                }
+            }
+            else {
+                // Element is no longer intersecting
+                intersectingElements.delete(element);
+                // Dismount if it was mounted
+                if (mountedElements.weakSet.has(element)) {
+                    dismountElement(element);
+                }
+            }
+        }
+    }, whereElementIntersectsWith);
+    function dismountElement(element) {
+        // Remove from mounted elements
+        mountedElements.weakSet.delete(element);
+        for (var _i = 0, _a = mountedElements.setWeak; _i < _a.length; _i++) {
+            var ref = _a[_i];
+            if (ref.deref() === element) {
+                mountedElements.setWeak.delete(ref);
+                break;
+            }
+        }
+        // Dispatch dismount event
+        observer.dispatchEvent(new Events_js_1.DismountEvent(element, 'intersection-failed', init));
+    }
+    function observeElement(element) {
+        intersectionObserver.observe(element);
+    }
+    return {
+        intersectionObserver: intersectionObserver,
+        observeElement: observeElement,
+        cleanup: function () {
+            intersectionObserver.disconnect();
+        }
+    };
+}
+/**
+ * Check if an element is currently intersecting
+ * This is called from #matchesSelector to determine if intersection condition is met
+ */
+function isElementIntersecting(element, intersectionObserver) {
+    // If no intersection observer is set up, consider all elements as intersecting
+    if (!intersectionObserver) {
+        return true;
+    }
+    // When intersection observer is active, we can't synchronously determine intersection state
+    // The element will be observed and the callback will handle mounting when it intersects
+    // Return false here to prevent immediate mounting
+    return false;
+}

package/index.ts

@@ -12,6 +12,7 @@ export { MountObserverScriptHandler } from './handlers/MountObserverScript.js';
 export { EMCScriptHandler } from './handlers/EMCScript.js';
 export { HoistTemplateHandler } from './handlers/HoistTemplate.js';
 export { HTMLIncludeHandler } from './handlers/HTMLInclude.js';
+export { CedeScriptHandler } from './handlers/CedeScript.js';
 export { upShadowSearch } from './upShadowSearch.js';
 export type {
     MountConfig,
@@ -44,3 +45,4 @@ import './handlers/MountObserverScript.js';
 import './handlers/EMCScript.js';
 import './handlers/HoistTemplate.js';
 import './handlers/HTMLInclude.js';
+import './handlers/CedeScript.js';

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "mount-observer",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
   "dependencies": {
-    "assign-gingerly": "0.0.30",
+    "assign-gingerly": "0.0.50",
     "id-generation": "0.0.4"
   },
   "devDependencies": {
-    "@playwright/test": "1.59.1",
+    "@playwright/test": "1.60.0",
     "spa-ssi": "0.0.27"
   },
   "exports": {

package/types/agrace/types.d.ts

@@ -0,0 +1,11 @@
+import {RAConfig} from '../roundabout/types';
+import {AttrPatterns} from '../assign-gingerly/types';
+
+/**
+ * Assign Gingerly Roundabout Config
+ */
+export interface AgraceConfig<TProps = unknown, TActions = TProps, ETProps = TProps, TCustomData = unknown> {
+    raConfig: RAConfig<TProps, TActions, ETProps, TCustomData>,
+    withAttrs?: AttrPatterns<TProps>,
+    template?: string | HTMLTemplateElement,
+}

package/types/assign-gingerly/types.d.ts

@@ -212,6 +212,13 @@ export interface SpawnContext<T = any, TMountContext = any> {
    * Used for scoped parser registry access during attribute parsing.
    */
   synthesizerElement?: Element;
+  /**
+   * The full EMC configuration object that triggered this spawn.
+   * Passed through so enhancement classes can access their full configuration
+   * (including customData) without needing to separately import the JSON file.
+   * This avoids duplicate JSON imports when using emoji shorthand aliases.
+   */
+  emc?: any;
 }
 
 /**
@@ -226,6 +233,14 @@ export interface IAssignGingerlyOptions {
   registry?: typeof EnhancementRegistry | EnhancementRegistry;
   bypassChecks?: boolean;
   withMethods?: string[] | Set<string>;
+  aka?: Record<string, string>;
+  
+  /**
+   * AbortSignal for cleaning up reactive subscriptions (@eachTime)
+   * Required when using @eachTime symbol for reactive iteration
+   * When the signal is aborted, all event listeners are automatically removed
+   */
+  signal?: AbortSignal;
 }
 
 /**
@@ -242,7 +257,6 @@ export declare class EnhancementRegisteredEvent extends Event {
  * Extends EventTarget to dispatch events when configs are registered
  */
 export declare class EnhancementRegistry extends EventTarget {
-  private items;
   push(items: EnhancementConfig | EnhancementConfig[]): void;
   getItems(): EnhancementConfig[];
   findBySymbol(symbol: symbol | string): EnhancementConfig | undefined;
@@ -303,10 +317,7 @@ export declare class ElementEnhancementGateway{
 }
 
 export interface ElementEnhancement{
-  dispose(regItem: EnhancementConfig): void;
-}
-
-export interface ElementInfer{
-  value: any;
-  eventType: string
+  get(registryItem: EnhancementConfig | string | symbol, mountCtx?: any): any;
+  dispose(registryItem: EnhancementConfig | string | symbol): void;
+  whenResolved(registryItem: EnhancementConfig | string | symbol, mountCtx?: any): Promise<any>;
 }

package/types/be-bound/types.d.ts

@@ -19,7 +19,8 @@ export interface BindingRule {
     
     localProp?: string,
     localEvent?: string,
-    remoteSpecifierString?: string,
+    remoteId?: string,
+    remoteProp?: string,
     remoteSpecifier?: Specifier,
 
 

package/types/do-invoke/types.d.ts

@@ -1,4 +1,4 @@
-import { ElementEnhancementGateway } from "../assign-gingerly/types";
+import { ElementEnhancementGateway, SpawnContext } from "../assign-gingerly/types";
 import { StatementsResult } from "../nested-regex-groups/types";
 
 export interface Specifier {
@@ -23,7 +23,7 @@ export type ProPAP  = Promise<PAP>
 
 export interface Actions{
     hydrate(self: AP): ProPAP;
-    init(self: AP, enhancedElement: Element, initVals: PAP): Promise<void>
+    init(self: AP, enhancedElement: Element, ctx: SpawnContext, initVals: PAP): Promise<void>
 }
 
 

package/types/do-toggle/types.d.ts

@@ -1,4 +1,4 @@
-import { ElementEnhancementGateway, ElementInfer } from "../assign-gingerly/types";
+import { ElementEnhancementGateway } from "../assign-gingerly/types";
 import { StatementsResult } from "../nested-regex-groups/types";
 
 export interface EndUserProps{}

package/types/inferencer/types.d.ts

@@ -0,0 +1,46 @@
+import type { EnhancementConfig } from "../assign-gingerly/types";
+
+/**
+ * Symbol for smart value assignment
+ */
+export declare const value: symbol;
+
+/**
+ * Symbol for smart display assignment
+ */
+export declare const display: symbol;
+
+/**
+ * Enhancement class that provides smart value and display property inference
+ */
+export declare class Infer<TValue = any, TDisplay = any> {
+    get enhancedElement(): Element;
+    constructor(enhancedElement?: Element);
+    get value(): TValue | undefined;
+    set value(nv: TValue);
+    get display(): TDisplay | undefined;
+    set display(nv: TDisplay);
+    get eventType(): string;
+}
+
+/**
+ * Registry item for the Infer enhancement
+ */
+export declare const registryItem: EnhancementConfig;
+
+/**
+ * Infer the most appropriate value property for an element
+ */
+export declare function inferValueProperty(element: Element): string;
+
+/**
+ * Infer the most appropriate display property for an element
+ */
+export declare function inferDisplayProperty(element: Element): string;
+
+/**
+ * Infer the most appropriate event type for an element
+ */
+export declare function inferEventType(element: Element): string;
+
+export default registryItem;

package/types/mount-observer/types.d.ts

@@ -1,6 +1,6 @@
 // Core types for MountObserver v2 - Polyfill Supported Scenario I
 
-import {Spawner, EnhancementConfigBase, EnhKey, AttrPatterns} from '../assign-gingerly/types';
+import {EnhancementConfigBase, EnhKey, AttrPatterns} from '../assign-gingerly/types';
 
 export type Constructor = new (...args: any[]) => any;
 

package/types/roundabout/types.d.ts

@@ -24,11 +24,17 @@ export interface LogicOp<Props = any, TActions = Props>{
 
     delay?: number,
 
+}
+
+/**
+ * Extends LogicOp with a `do` property for specifying which function to call.
+ * Used by positractions where the function is generic and view-model-neutral.
+ */
+export interface LogicOpWithDo<Props = any, TActions = Props> extends LogicOp<Props, TActions>{
     do?:
         | Function
         | (keyof TActions & string)
         | PropsToProps<Props>
-
 }
 
 export type Actions<TProps = any, TActions = TProps> = 
@@ -46,6 +52,8 @@ export type Compacts<TProps = any, TActions = TProps> =
     | Partial<{[key in `when_${keyof TProps & string}_changes_toggle_${keyof TProps & string}`]: number}>
     | Partial<{[key in `when_${keyof TProps & string}_changes_inc_${keyof TProps & string}_by`]: number}>
     | Partial<{[key in `when_${keyof TProps & string}_changes_dispatch`]: string}> //TODO
+    | Partial<{[key in `on_${string}_of_${keyof TProps & string}_inc_${keyof TProps & string}_by`]: number}>
+    | Partial<{[key in `on_${string}_of_${keyof TProps & string}_set_${keyof TProps & string}_to`]: any}>
 ;
 
 export type Hitches<TProps = any, TActions = TProps> = 
@@ -58,7 +66,7 @@ export type Handlers<ETProps = any, TActions = ETProps> =
     export type Positractions<TProps = any, TActions = TProps> = 
     | Array<Positraction<TProps, TActions>>;
 
-export interface Positraction<TProps = any, TActions = TProps> extends LogicOp<TProps, TActions> {
+export interface Positraction<TProps = any, TActions = TProps> extends LogicOpWithDo<TProps, TActions> {
     do: 
         | Function 
         | (keyof TActions & string)
@@ -71,13 +79,30 @@ export interface Positraction<TProps = any, TActions = TProps> extends LogicOp<T
     assignTo?: Array<null | (keyof TProps & string)>
 }
 
+/**
+ * A merge is a fully JSON-serializable reactive rule.
+ * When its conditions are met, it calls assignFrom(vm, assignFrom, { from: vm })
+ * to resolve RHS path strings against the vm and assign the results into the vm.
+ * No method or code is required.
+ */
+export interface Merge<TProps = any> extends LogicOp<TProps> {
+    /**
+     * Pattern object whose keys are LHS assignGingerly paths and whose
+     * values are RHS `?.`-prefixed path strings resolved against the vm.
+     */
+    assign: Record<string, any>;
+}
+
+export type Merges<TProps = any> = Array<Merge<TProps>>;
+
 export interface RAConfig<TProps = unknown, TActions = TProps, ETProps = TProps, TCustomData = unknown> {
     actions?: Actions<TProps,TActions>,
     compacts?: Compacts<TProps, TActions>,
     //onsets?: Onsets<TProps, TActions>,
     handlers?: Handlers<ETProps, TActions>,
-    hitch?: Hitches<TProps, TActions>,
+    hitches?: Hitches<TProps, TActions>,
     positractions?: Positractions<TProps>,
+    merges?: Merges<TProps>,
     /**
      * Configure automatic WeakRef wrapping for properties
      * 
@@ -128,6 +153,12 @@ export interface RoundaboutOptions<TProps = unknown, TActions = TProps, ETProps
      * - Diamond dependencies (A→B, A→C, B→D, C→D)
      */
     internalRouting?: boolean,
+
+    /**
+     * Options passed to every internal assignGingerly call.
+     * See IAssignGingerlyOptions in assign-gingerly for details.
+     */
+    assignGingerlyOptions?: import('../assign-gingerly/types.js').IAssignGingerlyOptions,
     
 
 }