assign-gingerly 0.0.30 → 0.0.32

package/README.md

@@ -1,4 +1,4 @@
-# assign-gingerly and assign-tentatively
+# assign-gingerly and assign-tentatively
 
 [![Playwright Tests](https://github.com/bahrus/assign-gingerly/actions/workflows/CI.yml/badge.svg?branch=baseline)](https://github.com/bahrus/assign-gingerly/actions/workflows/CI.yml)
 [![NPM version](https://badge.fury.io/js/assign-gingerly.png)](http://badge.fury.io/js/assign-gingerly)
@@ -411,25 +411,31 @@ assignGingerly(elementRef, {
 // Equivalent to: elementRef.deref().classList.add('active')
 ```
 
-**Complex chaining:**
+**Complex chaining with real DOM elements:**
+
+Methods are called on the objects found through chained accessors, not just on the root object:
 
 ```TypeScript
-const shadowRoot = {
-  querySelector(selector) {
-    return this.elements[selector];
-  },
-  elements: {
-    'my-element': document.createElement('div')
-  }
-};
+const div = document.createElement('div');
+div.innerHTML = `
+  <my-element>
+    <your-element></your-element>
+  </my-element>
+`;
 
-assignGingerly(shadowRoot, {
-  '?.querySelector?.my-element?.classList?.add': 'highlighted'
+assignGingerly(div, {
+  '?.querySelector?.my-element?.querySelector?.your-element?.classList?.add': 'highlighted'
 }, { withMethods: ['querySelector', 'add'] });
 
-// Equivalent to: shadowRoot.querySelector('my-element').classList.add('highlighted')
+// Equivalent to:
+// div.querySelector('my-element').querySelector('your-element').classList.add('highlighted')
+
+const yourElement = div.querySelector('my-element')?.querySelector('your-element');
+console.log(yourElement?.classList.contains('highlighted')); // true
 ```
 
+The key insight: `querySelector` is called on each intermediate result in the chain. First on `div`, then on the `my-element` result, demonstrating that methods work naturally with the object hierarchy you're navigating.
+
 **Using Set for withMethods:**
 
 For better performance with many methods, use a Set:
@@ -464,6 +470,321 @@ assignGingerly(element, {
 - Silent failure for non-existent methods (garbage in, garbage out)
 - Supports method chaining and complex navigation patterns
 
+## Example 3d - Aliasing with aka
+
+The `aka` option allows you to define custom shortcuts (aliases) for property and method names, reducing verbosity in repetitive patterns. This is inspired by jQuery's `$` shortcut for `querySelectorAll`, but fully customizable.
+
+```TypeScript
+import assignGingerly from 'assign-gingerly';
+
+const div = document.createElement('div');
+div.innerHTML = `
+  <my-element>
+    <your-element></your-element>
+  </my-element>
+`;
+
+// Without aliases (verbose)
+assignGingerly(div, {
+  '?.querySelector?.my-element?.classList?.add': 'highlighted',
+  '?.querySelector?.your-element?.classList?.add': 'active'
+}, { withMethods: ['querySelector', 'add'] });
+
+// With aliases (concise)
+assignGingerly(div, {
+  '?.$?.my-element?.c?.+': 'highlighted',
+  '?.$?.your-element?.c?.+': 'active'
+}, { 
+  withMethods: ['querySelector', 'add'],
+  aka: { '$': 'querySelector', 'c': 'classList', '+': 'add' }
+});
+```
+
+**How it works:**
+
+- Aliases are substituted **before** path evaluation
+- Matches complete tokens between `?.` delimiters (not substrings)
+- Works for both properties and methods
+- Single or multi-character aliases supported
+
+**Reserved characters:**
+
+Cannot be used in aliases: space (` `), backtick (`` ` ``)
+
+**Multi-character aliases:**
+
+```TypeScript
+assignGingerly(element, {
+  '?.qs?.my-element?.cl?.add': 'highlighted'
+}, { 
+  withMethods: ['querySelector', 'add'],
+  aka: { 'qs': 'querySelector', 'cl': 'classList' }
+});
+```
+
+**Multiple aliases in one path:**
+
+```TypeScript
+assignGingerly(element, {
+  '?.c?.+': 'class1',
+  '?.p?.+': 'part1',
+  '?.ds?.userId': '123'
+}, { 
+  withMethods: ['add'],
+  aka: { 
+    'c': 'classList', 
+    'p': 'part',
+    'ds': 'dataset',
+    '+': 'add'
+  }
+});
+
+// Equivalent to:
+// element.classList.add('class1')
+// element.part.add('part1')
+// element.dataset.userId = '123'
+```
+
+**Benefits:**
+
+- Reduces verbosity in repetitive patterns
+- Fully customizable shortcuts
+- Improves readability when you have many similar operations
+- Works seamlessly with `withMethods`
+
+## Example 3e - ForEach with @each
+
+The `@each` symbol allows you to iterate over collections and apply operations to each item. This works with any iterable including Arrays, NodeList, HTMLCollection, and more.
+
+```TypeScript
+import assignGingerly from 'assign-gingerly';
+
+const div = document.createElement('div');
+div.innerHTML = `
+  <my-element></my-element>
+  <my-element></my-element>
+  <my-element></my-element>
+`;
+
+// Apply to each element in the collection
+assignGingerly(div, {
+  '?.querySelectorAll?.my-element?.@each?.classList?.add': 'highlighted'
+}, { withMethods: ['querySelectorAll', 'add'] });
+
+// All my-element elements now have the 'highlighted' class
+```
+
+**How it works:**
+
+- `@each` marks the point where iteration begins
+- Everything before `@each` navigates to the iterable
+- Everything after `@each` is applied to each item in the collection
+- Empty collections are handled gracefully (no errors)
+
+**With regular arrays:**
+
+```TypeScript
+const obj = {
+  items: [
+    { value: null },
+    { value: null },
+    { value: null }
+  ]
+};
+
+assignGingerly(obj, {
+  '?.items?.@each?.value': 'test'
+});
+
+// All items now have value: 'test'
+```
+
+**Nested forEach:**
+
+```TypeScript
+const obj = {
+  groups: [
+    { items: [{ value: null }, { value: null }] },
+    { items: [{ value: null }, { value: null }] }
+  ]
+};
+
+assignGingerly(obj, {
+  '?.groups?.@each?.items?.@each?.value': 'nested'
+});
+
+// All nested items now have value: 'nested'
+```
+
+**With aliases:**
+
+```TypeScript
+assignGingerly(div, {
+  '?.qsa?.my-element?.*?.c?.+': 'highlighted'
+}, { 
+  withMethods: ['querySelectorAll', 'add'],
+  aka: { 
+    'qsa': 'querySelectorAll',
+    'c': 'classList',
+    '+': 'add',
+    '*': '@each'  // Alias * to @each for brevity
+  }
+});
+```
+
+**Method calls on each item:**
+
+```TypeScript
+assignGingerly(div, {
+  '?.querySelectorAll?.div?.@each?.setAttribute': ['data-id', '123']
+}, { withMethods: ['querySelectorAll', 'setAttribute'] });
+
+// All div elements now have data-id="123"
+```
+
+**Accessing iterable properties:**
+
+When you omit `@each`, you access properties on the iterable itself, not its items:
+
+```TypeScript
+const obj = {
+  items: [1, 2, 3],
+  customProp: null
+};
+
+// Set property on the array itself
+assignGingerly(obj, {
+  '?.items?.customProp': 'test'
+});
+
+console.log(obj.items.customProp); // 'test'
+```
+
+**Benefits:**
+
+- Works with any iterable (Arrays, NodeList, HTMLCollection, etc.)
+- Supports nested iterations
+- Integrates seamlessly with `withMethods` and `aka`
+- Clear distinction between iterating and accessing iterable properties
+- Graceful handling of empty collections
+
+## Example 3f - Reactive Iteration with @eachTime
+
+The `@eachTime` symbol enables reactive iteration over elements as they mount or appear dynamically. Unlike `@each` which operates on static collections, `@eachTime` subscribes to events and applies operations to elements as they arrive over time.
+
+**Important:** This feature requires an `AbortSignal` for cleanup and is designed to work with EventTarget objects that emit 'mount' events (such as [mount-observer](https://github.com/bahrus/mount-observer)).
+
+```TypeScript
+import assignGingerly from 'assign-gingerly';
+
+const controller = new AbortController();
+const div = document.createElement('div');
+
+// Assume mountObserver is an IMountObserver instance that emits 'mount' events
+// when new elements matching 'my-element' are added to the DOM
+
+assignGingerly(div, {
+  '?.mountObserver?.@eachTime?.classList?.add': 'highlighted'
+}, { 
+  withMethods: ['add'],
+  signal: controller.signal  // Required for cleanup
+});
+
+// As elements mount, they automatically get the 'highlighted' class
+// Later, cleanup all listeners:
+controller.abort();
+```
+
+**How it works:**
+
+- `@eachTime` marks the point where reactive iteration begins
+- Everything before `@eachTime` must navigate to an EventTarget
+- The EventTarget must emit 'mount' events with a `mountedElement` property
+- Everything after `@eachTime` is applied to each mounted element
+- Event listeners are automatically cleaned up when the AbortSignal is aborted
+
+**With method calls:**
+
+```TypeScript
+const controller = new AbortController();
+
+assignGingerly(div, {
+  '?.mountObserver?.@eachTime?.setAttribute': ['data-mounted', 'true']
+}, { 
+  withMethods: ['setAttribute'],
+  signal: controller.signal
+});
+
+// Each mounted element gets data-mounted="true"
+```
+
+**With aliases:**
+
+```TypeScript
+const controller = new AbortController();
+
+assignGingerly(div, {
+  '?.mo?.@*?.c?.+': 'active'
+}, { 
+  withMethods: ['add'],
+  aka: { 
+    'mo': 'mountObserver',
+    '@*': '@eachTime',
+    'c': 'classList',
+    '+': 'add'
+  },
+  signal: controller.signal
+});
+```
+
+**Cleanup is required:**
+
+```TypeScript
+const controller = new AbortController();
+
+// Setup reactive iteration
+assignGingerly(div, {
+  '?.mountObserver?.@eachTime?.classList?.add': 'mounted'
+}, { 
+  withMethods: ['add'],
+  signal: controller.signal
+});
+
+// Later, when you're done observing:
+controller.abort();  // Removes all event listeners
+
+// Attempting to use @eachTime without a signal throws an error:
+assignGingerly(div, {
+  '?.mountObserver?.@eachTime?.classList?.add': 'mounted'
+}, { withMethods: ['add'] });
+// Error: @eachTime requires an AbortSignal in options.signal for cleanup
+```
+
+**Key differences from @each:**
+
+| Feature | @each | @eachTime |
+|---------|-------|-----------|
+| **Type** | Static iteration | Reactive iteration |
+| **Timing** | Immediate (synchronous) | Over time (asynchronous) |
+| **Use case** | Existing collections | Elements appearing dynamically |
+| **Cleanup** | Not needed | Required (AbortSignal) |
+| **Requirements** | Any iterable | EventTarget with 'mount' events |
+
+**Benefits:**
+
+- Declarative reactive programming without RxJS complexity
+- Automatic cleanup via standard AbortSignal API
+- JSON-serializable configuration (behavior is in implementation)
+- Fire-and-forget async pattern (doesn't block)
+- Minimal weight impact (~3% when not used, dynamically loaded when needed)
+
+**Limitations:**
+
+- Requires EventTarget that emits 'mount' events
+- AbortSignal is mandatory for cleanup
+- Testing is done in mount-observer package (no tests in assign-gingerly)
+- Single @eachTime per path (nested @eachTime not currently supported)
+
 While we are in the business of passing values of object A into object B, we might as well add some extremely common behavior that allows updating properties of object B based on the current values of object B -- things like incrementing, toggling, and deleting.  Deleting is critical for assignTentatively, but is included with both functions.
 
 ## Example 4 - Incrementing values with += command
@@ -649,10 +970,12 @@ console.log(string1 === string2); // true
 
 This guarantees that applying the reversal object restores the object to its exact original state.
 
+# Object and Element Enhancements via assign-gingerly
+
 ## Dependency injection based on a registry object and a Symbolic reference mapping
 
 ```Typescript
-interface IEnhancementRegistryItem<T = any, TObjToExtend = any> {
+interface EnhancementConfig<T = any, TObjToExtend = any> {
     spawn: {new(objToExtend: TObjToExtend, ctx: SpawnContext, initVals: Partial<T>): T}
     symlinks?: {[key: symbol]: keyof T}
     // Optional: for element enhancement access
@@ -678,7 +1001,7 @@ class YourEnhancement{
 }
 
 class EnhancementRegistry{
-    push(IEnhancementRegistryItem | IEnhancementRegistryItem[]){
+    push(EnhancementConfig | EnhancementConfig[]){
         ...
     }
 }
@@ -1035,7 +1358,7 @@ Element enhancement classes should follow this constructor signature:
 
 ```TypeScript
 interface SpawnContext<T, TMountContext = any> {
-  config: IEnhancementRegistryItem<T>;
+  config: EnhancementConfig<T>;
   mountCtx?: TMountContext;  // Optional custom context passed by caller
 }
 
@@ -1089,7 +1412,7 @@ This is useful for:
 In addition to spawn and symlinks, registry items support optional properties `enhKey`, `withAttrs`, `canSpawn`, and `lifecycleKeys`:
 
 ```TypeScript
-interface IEnhancementRegistryItem<T, TObj = Element> {
+interface EnhancementConfig<T, TObj = Element> {
   spawn: { 
     new (obj?: TObj, ctx?: SpawnContext<T>, initVals?: Partial<T>): T;
     canSpawn?: (obj: TObj, ctx?: SpawnContext<T>) => boolean;  // Optional spawn guard
@@ -1229,6 +1552,37 @@ console.log(element.enh.myEnh === instance); // true
 - **Shared instances**: Uses the same global instance map as `assignGingerly` and `enh.set`, ensuring only one instance per registry item
 - **Auto-registration**: Automatically adds registry items to the element's registry if not present
 
+**Lookup by enhKey (string or symbol):**
+
+Instead of passing the full registry item object, you can pass a string or symbol matching the `enhKey` of a previously registered enhancement:
+
+```TypeScript
+// First, register the enhancement (e.g., via mount-observer or manually)
+registry.push({
+  spawn: MyEnhancement,
+  enhKey: 'myEnh'
+});
+
+// Later, retrieve by enhKey string
+const instance = element.enh.get('myEnh');
+
+// Or by symbol enhKey
+const enhSym = Symbol.for('myEnh');
+const instance2 = element.enh.get(enhSym);
+```
+
+If the enhKey is not found in the registry, an error is thrown: `"myEnh not in registry"`.
+
+This also works with `enh.dispose()` and `enh.whenResolved()`:
+
+```TypeScript
+// Dispose by enhKey
+element.enh.dispose('myEnh');
+
+// Wait for resolution by enhKey
+const resolved = await element.enh.whenResolved('myEnh');
+```
+
 <details>
 <summary>Example with shared instances</summary>
 
@@ -1460,19 +1814,19 @@ element.remove();
 
 // Case 1: Temporarily removed, will be re-added
 setTimeout(() => document.body.append(element), 1000);
-// ❌ Don't dispose - enhancement should persist
+// ? Don't dispose - enhancement should persist
 
 // Case 2: Moved to another location
 otherContainer.append(element);
-// ❌ Don't dispose - enhancement should persist
+// ? Don't dispose - enhancement should persist
 
 // Case 3: Cached for reuse
 elementCache.set('myElement', element);
-// ❌ Don't dispose - enhancement should persist
+// ? Don't dispose - enhancement should persist
 
 // Case 4: Truly done, ready for GC
 element = null;
-// ✅ Should dispose, but no way to detect this automatically
+// ? Should dispose, but no way to detect this automatically
 ```
 
 **Practical disposal strategies:**
@@ -1566,10 +1920,10 @@ class MyEnhancement {
 ```
 
 **Summary:**
-- ✅ Storage mechanism prevents memory leaks via WeakMap
-- ⚠️ Enhancement internals need manual cleanup via dispose()
-- ❌ No automatic way to detect when disposal should happen
-- 👍 Choose disposal strategy based on your application's lifecycle
+- ? Storage mechanism prevents memory leaks via WeakMap
+- ?? Enhancement internals need manual cleanup via dispose()
+- ? No automatic way to detect when disposal should happen
+- ?? Choose disposal strategy based on your application's lifecycle
 
 ### Waiting for Async Initialization with `enh.whenResolved(regItem)`
 
@@ -1779,7 +2133,7 @@ static canSpawn(obj: any, ctx?: SpawnContext<T>): boolean
 ```
 
 - `obj`: The target object being enhanced (element, plain object, etc.)
-- `ctx`: Optional spawn context containing `{ config: IEnhancementRegistryItem<T> }`
+- `ctx`: Optional spawn context containing `{ config: EnhancementConfig<T> }`
 - Returns: `true` to allow spawning, `false` to block
 
 ### Use Cases
@@ -1976,7 +2330,7 @@ console.log(instance.value);  // 'test123' (parsed from attribute)
 
 </details>
 
-> ![NOTE]
+> [!NOTE]
 > `withAttrs` works with or without `enhKey`. When there's no `enhKey`, the parsed attributes are passed directly to the constructor. When there is an `enhKey`, they're merged with any pre-existing values on the enh container.
 
 ### The `enh-` Prefix for Attribute Isolation
@@ -2150,7 +2504,7 @@ The `base` attribute must contain either a dash (`-`) or a non-ASCII character t
 ```TypeScript
 // Valid base attributes
 const enhConfig1 = { base: 'data-config' };     // Has dash
-const enhConfig2 =  { base: '🎨-theme' });        // Has non-ASCII (and dash)
+const enhConfig2 =  { base: '??-theme' });        // Has non-ASCII (and dash)
 
 // Invalid - throws error
 const enhConig3 = { base: 'config' };          // No dash or non-ASCII
@@ -2198,6 +2552,33 @@ const result = parseWithAttrs(element, {
 // Result: { name: 'Alice', age: '30' }
 ```
 
+**Deep Nesting:**
+
+Template variables can reference other template variables to any depth, creating hierarchical attribute naming patterns:
+
+```TypeScript
+// HTML: <div data-app-user-profile-name="Alice" data-app-user-profile-email="alice@example.com"></div>
+
+const result = parseWithAttrs(element, {
+  base: 'data-',
+  app: '${base}app',
+  user: '${app}-user',
+  profile: '${user}-profile',
+  name: '${profile}-name',
+  email: '${profile}-email'
+});
+// Result: { name: 'Alice', email: 'alice@example.com' }
+
+// The resolution chain: base ? app ? user ? profile ? name/email
+// Resolves to: data-app-user-profile-name and data-app-user-profile-email
+```
+
+**Benefits of hierarchical variables:**
+- Build complex attribute names from simple parts
+- Maintain consistency across related attributes
+- Easy to refactor by changing a single variable
+- Self-documenting attribute structure
+
 Template variables are resolved recursively and cached for performance. Circular references are detected and throw an error.
 
 ### Type Parsing with instanceOf
@@ -2376,12 +2757,12 @@ registerCommonParsers(globalParserRegistry);
 
 **Benefits of Named Parsers:**
 
-- ✅ **JSON serializable** - Configs can be stored/transmitted as JSON
-- ✅ **Reusable** - Define once, use everywhere
-- ✅ **Maintainable** - Update parser logic in one place
-- ✅ **Testable** - Test parsers independently
-- ✅ **Discoverable** - `globalParserRegistry.getNames()` lists all available parsers
-- ✅ **Backward compatible** - Inline functions still work
+- ? **JSON serializable** - Configs can be stored/transmitted as JSON
+- ? **Reusable** - Define once, use everywhere
+- ? **Maintainable** - Update parser logic in one place
+- ? **Testable** - Test parsers independently
+- ? **Discoverable** - `globalParserRegistry.getNames()` lists all available parsers
+- ? **Backward compatible** - Inline functions still work
 
 **Mixing Inline and Named Parsers:**
 
@@ -3408,315 +3789,3 @@ ItemScope Managers follow these design principles:
 
 This design ensures backward compatibility while providing powerful new capabilities for managing DOM fragments.
 
-
-
-
-## Smart Value Assignment with Infer Enhancement
-
-The Infer enhancement provides a symbol-based API for smart value and display property assignment. Instead of manually determining which property to set on different element types (e.g., `value` for inputs, `checked` for checkboxes, `textContent` for divs), the Infer enhancement automatically infers the correct property based on the element type.
-
-### Why Infer?
-
-Different HTML elements use different properties to represent their value:
-- Input text fields use `value`
-- Checkboxes and radio buttons use `checked`
-- Time elements use `dateTime`
-- Divs and spans use `textContent`
-- Progress and meter elements use `value` but display with `ariaValueText`
-
-The Infer enhancement eliminates the need to remember these differences by providing two symbols that automatically map to the correct property:
-
-- `value` symbol - Sets the element's data value
-- `display` symbol - Sets the element's display/presentation value
-
-### Basic Usage
-
-```TypeScript
-import { value, display, registryItem } from 'assign-gingerly/Infer.js';
-import 'assign-gingerly/object-extension.js';
-
-// Register the Infer enhancement
-customElements.enhancementRegistry.push(registryItem);
-
-// Use the value symbol - automatically sets the right property
-const input = document.createElement('input');
-input.type = 'text';
-input.set[value] = 'hello';
-console.log(input.value); // 'hello'
-
-const checkbox = document.createElement('input');
-checkbox.type = 'checkbox';
-checkbox.set[value] = true;
-console.log(checkbox.checked); // true
-
-const div = document.createElement('div');
-div.set[value] = 'content';
-console.log(div.textContent); // 'content'
-
-const time = document.createElement('time');
-time.set[value] = '2024-01-01T00:00:00Z';
-console.log(time.dateTime); // '2024-01-01T00:00:00Z'
-```
-
-### Value Property Inference
-
-The `value` symbol automatically maps to the most appropriate property for each element type:
-
-| Element Type | Property Set | Example |
-|-------------|-------------|---------|
-| `<input type="text">` | `value` | Text input value |
-| `<input type="checkbox">` | `checked` | Checkbox state |
-| `<input type="radio">` | `checked` | Radio button state |
-| `<textarea>` | `value` | Textarea content |
-| `<select>` | `value` | Selected option |
-| `<time>` | `dateTime` | ISO datetime string |
-| `<data>` | `value` | Machine-readable value |
-| `<meter>` | `value` | Numeric value |
-| `<progress>` | `value` | Progress value |
-| `<output>` | `value` | Output value |
-| Elements with `itemprop` | `itemprop` value | Custom property name |
-| Other elements | `textContent` | Text content |
-
-### Display Property Inference
-
-The `display` symbol sets the human-readable display value:
-
-```TypeScript
-// Time element - display formatted time
-const time = document.createElement('time');
-time.set[value] = '2024-01-01T00:00:00Z';  // Machine-readable
-time.set[display] = 'January 1, 2024';      // Human-readable
-console.log(time.dateTime);    // '2024-01-01T00:00:00Z'
-console.log(time.textContent); // 'January 1, 2024'
-
-// Meter element - display with ARIA
-const meter = document.createElement('meter');
-meter.min = 0;
-meter.max = 100;
-meter.set[value] = 75;                    // Numeric value
-meter.set[display] = '75 percent';        // Screen reader text
-console.log(meter.value);          // 75
-console.log(meter.ariaValueText);  // '75 percent'
-```
-
-| Element Type | Property Set | Example |
-|-------------|-------------|---------|
-| `<input>`, `<textarea>`, `<select>` | `value` | Form control value |
-| `<time>` | `textContent` | Formatted time string |
-| `<data>` | `textContent` | Human-readable content |
-| `<meter>`, `<progress>` | `ariaValueText` | Screen reader text |
-| Other elements | `textContent` | Text content |
-
-### Accessing the Enhancement Instance
-
-The Infer enhancement is accessible via `element.enh.infer`:
-
-```TypeScript
-const input = document.createElement('input');
-input.set[value] = 'test';
-
-// Access the enhancement instance
-console.log(input.enh.infer.value); // 'test' (cached value)
-
-// The instance maintains references to both value and display
-input.set[display] = 'Test Display';
-console.log(input.enh.infer.value);   // 'test'
-console.log(input.enh.infer.display); // 'Test Display'
-```
-
-### Using with assignGingerly
-
-The Infer enhancement integrates seamlessly with `assignGingerly`:
-
-```TypeScript
-import { value, display } from 'assign-gingerly/Infer.js';
-
-const element = document.createElement('input');
-element.type = 'text';
-
-// Use symbols in assignGingerly
-element.assignGingerly({
-  [value]: 'hello world',
-  style: {
-    color: 'blue'
-  }
-});
-
-console.log(element.value);       // 'hello world'
-console.log(element.style.color); // 'blue'
-```
-
-### Itemprop Support
-
-Elements with an `itemprop` attribute use that attribute's value as the property name:
-
-```html
-<span itemprop="title"></span>
-```
-
-```TypeScript
-const span = document.querySelector('[itemprop="title"]');
-span.set[value] = 'My Title';
-console.log(span.title); // 'My Title'
-```
-
-### Implementation Details
-
-The Infer enhancement is implemented as a standard enhancement class:
-
-```TypeScript
-class Infer<TValue = any, TDisplay = any> {
-  #weakRef: WeakRef<Element>;
-  
-  constructor(enhancedElement?: Element) {
-    this.#weakRef = new WeakRef(enhancedElement!);
-  }
-  
-  get value(): TValue | undefined { /* ... */ }
-  set value(nv: TValue) {
-    const element = this.#weakRef.deref()!;
-    element[inferValueProperty(element)] = nv;
-  }
-  
-  get display(): TDisplay | undefined { /* ... */ }
-  set display(nv: TDisplay) {
-    const element = this.#weakRef.deref()!;
-    element[inferDisplayProperty(element)] = nv;
-  }
-}
-```
-
-**Registry Configuration:**
-
-```TypeScript
-export const registryItem: EnhancementConfig = {
-  spawn: Infer,
-  enhKey: 'infer',
-  symlinks: {
-    [value]: 'value',
-    [display]: 'display'
-  }
-};
-```
-
-The `symlinks` mapping connects the symbols to the enhancement's properties, enabling the `element.set[symbol]` syntax.
-
-### Helper Functions
-
-The Infer module exports helper functions for manual property and event type inference:
-
-```TypeScript
-import { inferValueProperty, inferDisplayProperty, inferEventType } from 'assign-gingerly/Infer.js';
-
-const input = document.createElement('input');
-input.type = 'checkbox';
-
-const valueProp = inferValueProperty(input);
-console.log(valueProp); // 'checked'
-
-const displayProp = inferDisplayProperty(input);
-console.log(displayProp); // 'value'
-
-const eventType = inferEventType(input);
-console.log(eventType); // 'input'
-```
-
-These functions can be useful when you need to determine the property or event type name without actually setting a value or attaching a listener.
-
-**Event Type Inference:**
-
-The `inferEventType` function returns the most appropriate event type for different element types:
-
-| Element Type | Event Type | Use Case |
-|-------------|-----------|----------|
-| `<input>`, `<textarea>`, `<select>` | `input` | Form control value changes |
-| `<form>` | `submit` | Form submission |
-| `<details>` | `toggle` | Details element open/close |
-| `<dialog>` | `close` | Dialog dismissal |
-| Other elements | `click` | Default interactive event |
-
-**Accessing via Enhancement Instance:**
-
-The inferred event type is also available as a getter on the enhancement instance:
-
-```TypeScript
-const input = document.createElement('input');
-input.set[value] = 'test';
-
-console.log(input.enh.infer.eventType); // 'input'
-
-const form = document.createElement('form');
-form.set[value] = 'test';
-
-console.log(form.enh.infer.eventType); // 'submit'
-```
-
-This is particularly useful when building enhancements that need to attach event listeners but don't know the element type in advance.
-
-### Benefits
-
-1. **Type-agnostic code**: Write code that works with any element type without conditionals
-2. **Cleaner syntax**: No need to remember which property each element type uses
-3. **Accessibility**: Separate value and display properties support screen readers
-4. **Framework-friendly**: Symbols work well with reactive frameworks and data binding
-5. **Extensible**: Based on the enhancement registry system, can be customized or extended
-
-### Complete Example
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <script type="module">
-    import { value, display, registryItem } from './Infer.js';
-    import './object-extension.js';
-    
-    // Register the enhancement
-    customElements.enhancementRegistry.push(registryItem);
-    
-    // Create various elements
-    const input = document.createElement('input');
-    input.type = 'text';
-    
-    const checkbox = document.createElement('input');
-    checkbox.type = 'checkbox';
-    
-    const time = document.createElement('time');
-    
-    const meter = document.createElement('meter');
-    meter.min = 0;
-    meter.max = 100;
-    
-    // Set values using the same symbol - each element handles it correctly
-    input.set[value] = 'Hello World';
-    checkbox.set[value] = true;
-    time.set[value] = '2024-01-01T00:00:00Z';
-    time.set[display] = 'January 1, 2024';
-    meter.set[value] = 75;
-    meter.set[display] = '75 percent';
-    
-    // Add to document
-    document.body.append(input, checkbox, time, meter);
-    
-    console.log('Input value:', input.value);           // 'Hello World'
-    console.log('Checkbox checked:', checkbox.checked); // true
-    console.log('Time dateTime:', time.dateTime);       // '2024-01-01T00:00:00Z'
-    console.log('Time display:', time.textContent);     // 'January 1, 2024'
-    console.log('Meter value:', meter.value);           // 75
-    console.log('Meter display:', meter.ariaValueText); // '75 percent'
-  </script>
-</head>
-<body>
-  <h1>Infer Enhancement Demo</h1>
-</body>
-</html>
-```
-
-### Browser Support
-
-The Infer enhancement requires:
-- Chrome 146+ (for scoped custom element registries)
-- Modern browsers with Symbol support
-- WeakRef support (all modern browsers)
-
-For browsers without scoped registry support, the enhancement falls back to the global `customElements.enhancementRegistry`.