assign-gingerly 0.0.81 → 0.0.82

package/DX/emojis.js

@@ -47,7 +47,8 @@ export const akaMethods = {
     '📝': 'log',
     '⚠️': 'warn',
     '🚨': 'error',
-    '🤱': 'appendChild'
+    '🤱': 'appendChild',
+    '😣': 'focus',
     //'🧩': 'includes'
 };
 export const aka = {

package/DX/emojis.ts

@@ -49,7 +49,8 @@ export const akaMethods = {
     '📝': 'log',
     '⚠️': 'warn',
     '🚨': 'error',
-    '🤱': 'appendChild'
+    '🤱': 'appendChild',
+    '😣': 'focus',
     //'🧩': 'includes'
 };
 

package/DX/paths.js

@@ -19,8 +19,8 @@
  * const value = sp`${$.lastName}, ${$.firstName}`;
  * // ['?.lastName', ', ', '?.firstName']
  *
- * // Use .path for raw string contexts (object keys, plain arrays):
- * const key = $.textContent.path;  // '?.textContent'
+ * // Use .Path for raw string contexts (object keys, plain arrays):
+ * const key = $.textContent.Path;  // '?.textContent'
  */
 /**
  * Symbol used internally to detect path proxy objects.
@@ -49,7 +49,7 @@ function appendCommandSuffix(prefix, token) {
     return `${prefix}${COMMAND_TOKEN_SUFFIXES[token]}`;
 }
 function getReservedToken(prop) {
-    if (prop === 'Path' || prop === 'path')
+    if (prop === 'Path')
         return prop;
     if (prop in COMMAND_TOKEN_SUFFIXES)
         return prop;
@@ -58,14 +58,14 @@ function getReservedToken(prop) {
 /**
  * Create a proxy for id-ref paths (#[varName]).
  * After the initial #[varName], further property access chains with ?. from the resolved element.
- * .path returns the #[varName] prefix (optionally with further ?. path).
+ * .Path returns the #[varName] prefix (optionally with further ?. path).
  */
 function createIdRefProxy(idRef, options) {
     function handler() { }
     Object.defineProperty(handler, PATH_SYMBOL, { value: idRef });
     return new Proxy(handler, {
         get(_, prop) {
-            if (prop === 'path' || prop === 'Path' || prop === PATH_SYMBOL) {
+            if (prop === 'Path' || prop === PATH_SYMBOL) {
                 return idRef;
             }
             if (typeof prop === 'symbol')
@@ -74,7 +74,7 @@ function createIdRefProxy(idRef, options) {
             if (reservedToken === 'Each') {
                 return createIdRefProxy(appendPathSegment(idRef, '@each'), options);
             }
-            if (reservedToken && reservedToken !== 'Path' && reservedToken !== 'path') {
+            if (reservedToken && reservedToken !== 'Path') {
                 return createIdRefProxy(appendCommandSuffix(idRef, reservedToken), options);
             }
             // Chain further path segments after the id ref
@@ -116,14 +116,14 @@ function createPathProxy(prefix, options) {
     Object.defineProperty(handler, PATH_SYMBOL, { value: prefix.length > 0 ? `?.${prefix}` : '?.' });
     return new Proxy(handler, {
         get(_, prop) {
-            if (prop === 'path' || prop === 'Path' || prop === PATH_SYMBOL) {
+            if (prop === 'Path' || prop === PATH_SYMBOL) {
                 return serializePath(prefix);
             }
             // Ignore symbol access (Symbol.iterator, Symbol.toPrimitive, etc.)
             if (typeof prop === 'symbol')
                 return undefined;
             const reservedToken = getReservedToken(String(prop));
-            if (reservedToken === 'Path' || reservedToken === 'path') {
+            if (reservedToken === 'Path') {
                 return serializePath(prefix);
             }
             if (reservedToken === 'Each') {
@@ -185,21 +185,21 @@ function createPathProxy(prefix, options) {
  *
  * @example
  * const $ = paths<Person>();
- * $.lastName.path          // '?.lastName'
- * $.address.city.path      // '?.address?.city'
+ * $.lastName.Path          // '?.lastName'
+ * $.address.city.Path      // '?.address?.city'
  *
  * // With aka (reverse alias applied):
  * const $ = paths<MyEl>({ aka: { q: 'querySelector' } });
- * $.querySelector('.user').textContent.path  // '?.q?..user?.textContent'
+ * $.querySelector('.user').textContent.Path  // '?.q?..user?.textContent'
  *
- * // Inside sp template literals, .path is not needed:
+ * // Inside sp template literals, .Path is not needed:
  * sp`${$.lastName}, ${$.firstName}`  // ['?.lastName', ', ', '?.firstName']
  */
 export function paths(options) {
     return createPathProxy('', options);
 }
 /**
- * Create an assignment pair: { [lhs.path]: rhs.path }.
+ * Create an assignment pair: { [lhs.Path]: rhs.Path }.
  * Used to express "set this target to this source value" in a spreadable form.
  *
  * @example
@@ -318,7 +318,7 @@ export function forEachKeyIn(keys, factory, options) {
  * Interleaves static string segments with interpolated values.
  *
  * Path proxy objects are auto-detected and converted to their `?.`-prefixed
- * string representation — no `.path` call needed inside sp template literals.
+ * string representation — no `.Path` call needed inside sp template literals.
  *
  * Arrays passed as interpolations are preserved as nested arrays (for
  * all-or-nothing optional segments in builtIns.join).

package/DX/paths.ts

@@ -19,76 +19,75 @@
  * const value = sp`${$.lastName}, ${$.firstName}`;
  * // ['?.lastName', ', ', '?.firstName']
  * 
- * // Use .path for raw string contexts (object keys, plain arrays):
- * const key = $.textContent.path;  // '?.textContent'
+ * // Use .Path for raw string contexts (object keys, plain arrays):
+ * const key = $.textContent.Path;  // '?.textContent'
  */
 
 /**
  * Symbol used internally to detect path proxy objects.
  * The sp tag function uses this to auto-extract path strings from proxies.
  */
-const PATH_SYMBOL = Symbol('assign-gingerly-path');
-
-function isPathProxy(value: unknown): value is { [PATH_SYMBOL]: string } {
-    return !!value && (typeof value === 'object' || typeof value === 'function') && PATH_SYMBOL in value;
-}
-
-const COMMAND_TOKEN_SUFFIXES = {
-    Each: '?.@each',
-    EqNot: ' =!',
-    PlusEq: ' +=',
-    QMEq: ' ?=',
-    YEq: ' Y=',
-    MinusEq: ' -=',
-    Arrow: ' =>',
-} as const;
-
-type CommandToken = keyof typeof COMMAND_TOKEN_SUFFIXES;
-
-function serializePath(prefix: string): string {
-    return prefix.length > 0 ? `?.${prefix}` : '?.';
-}
-
-function appendPathSegment(prefix: string, segment: string): string {
-    return prefix ? `${prefix}?.${segment}` : segment;
-}
-
-function appendCommandSuffix(prefix: string, token: CommandToken): string {
-    return `${prefix}${COMMAND_TOKEN_SUFFIXES[token]}`;
-}
-
-function getReservedToken(prop: string): CommandToken | 'Path' | 'path' | undefined {
-    if (prop === 'Path' || prop === 'path') return prop;
-    if (prop in COMMAND_TOKEN_SUFFIXES) return prop as CommandToken;
-    return undefined;
-}
+const PATH_SYMBOL = Symbol('assign-gingerly-path');
+
+function isPathProxy(value: unknown): value is { [PATH_SYMBOL]: string } {
+    return !!value && (typeof value === 'object' || typeof value === 'function') && PATH_SYMBOL in value;
+}
+
+const COMMAND_TOKEN_SUFFIXES = {
+    Each: '?.@each',
+    EqNot: ' =!',
+    PlusEq: ' +=',
+    QMEq: ' ?=',
+    YEq: ' Y=',
+    MinusEq: ' -=',
+    Arrow: ' =>',
+} as const;
+
+type CommandToken = keyof typeof COMMAND_TOKEN_SUFFIXES;
+
+function serializePath(prefix: string): string {
+    return prefix.length > 0 ? `?.${prefix}` : '?.';
+}
+
+function appendPathSegment(prefix: string, segment: string): string {
+    return prefix ? `${prefix}?.${segment}` : segment;
+}
+
+function appendCommandSuffix(prefix: string, token: CommandToken): string {
+    return `${prefix}${COMMAND_TOKEN_SUFFIXES[token]}`;
+}
+
+function getReservedToken(prop: string): CommandToken | 'Path' | undefined {
+    if (prop === 'Path') return prop;
+    if (prop in COMMAND_TOKEN_SUFFIXES) return prop as CommandToken;
+    return undefined;
+}
 
 /**
- * Type that maps an object type to a proxy where every property access
- * returns either a deeper proxy (for object properties) or a terminal
- * with a serialized path string accessor — while providing full autocomplete.
- * Enhanced: also callable (for method call syntax) and includes reserved
- * command markers such as `Each`, `EqNot`, and `PlusEq`.
- */
-export type PathProxyCore = {
-    readonly Path: string;
-    readonly path: string;
-    readonly Each: PathProxy<any>;
-    readonly EqNot: PathProxy<any>;
-    readonly PlusEq: PathProxy<any>;
-    readonly QMEq: PathProxy<any>;
-    readonly YEq: PathProxy<any>;
-    readonly MinusEq: PathProxy<any>;
-    readonly Arrow: PathProxy<any>;
-};
-
-export type PathProxy<T> = {
-    [K in keyof T]-?: T[K] extends ((...args: any[]) => infer R)
-        ? ((...args: any[]) => PathProxy<NonNullable<R>> & PathProxyCore) & PathProxy<NonNullable<R>> & PathProxyCore
-        : T[K] extends (object | undefined | null)
-            ? PathProxy<NonNullable<T[K]>> & PathProxyCore & ((...args: any[]) => PathProxy<any> & PathProxyCore)
-            : PathProxyCore & ((...args: any[]) => PathProxy<any> & PathProxyCore);
-} & PathProxyCore & ((...args: any[]) => PathProxy<any> & PathProxyCore);
+ * Type that maps an object type to a proxy where every property access
+ * returns either a deeper proxy (for object properties) or a terminal
+ * with a serialized path string accessor — while providing full autocomplete.
+ * Enhanced: also callable (for method call syntax) and includes reserved
+ * command markers such as `Each`, `EqNot`, and `PlusEq`.
+ */
+export type PathProxyCore = {
+    readonly Path: string;
+    readonly Each: PathProxy<any>;
+    readonly EqNot: PathProxy<any>;
+    readonly PlusEq: PathProxy<any>;
+    readonly QMEq: PathProxy<any>;
+    readonly YEq: PathProxy<any>;
+    readonly MinusEq: PathProxy<any>;
+    readonly Arrow: PathProxy<any>;
+};
+
+export type PathProxy<T> = {
+    [K in keyof T]-?: T[K] extends ((...args: any[]) => infer R)
+        ? ((...args: any[]) => PathProxy<NonNullable<R>> & PathProxyCore) & PathProxy<NonNullable<R>> & PathProxyCore
+        : T[K] extends (object | undefined | null)
+            ? PathProxy<NonNullable<T[K]>> & PathProxyCore & ((...args: any[]) => PathProxy<any> & PathProxyCore)
+            : PathProxyCore & ((...args: any[]) => PathProxy<any> & PathProxyCore);
+} & PathProxyCore & ((...args: any[]) => PathProxy<any> & PathProxyCore);
 
 /**
  * Options for paths proxy creation.
@@ -103,33 +102,33 @@ export interface PathsOptions {
 /**
  * Create a proxy for id-ref paths (#[varName]).
  * After the initial #[varName], further property access chains with ?. from the resolved element.
- * .path returns the #[varName] prefix (optionally with further ?. path).
+ * .Path returns the #[varName] prefix (optionally with further ?. path).
  */
-function createIdRefProxy(idRef: string, options?: PathsOptions): any {
-    function handler() {}
-    Object.defineProperty(handler, PATH_SYMBOL, { value: idRef });
-    return new Proxy(handler, {
-        get(_, prop: string | symbol) {
-            if (prop === 'path' || prop === 'Path' || prop === PATH_SYMBOL) {
+function createIdRefProxy(idRef: string, options?: PathsOptions): any {
+    function handler() {}
+    Object.defineProperty(handler, PATH_SYMBOL, { value: idRef });
+    return new Proxy(handler, {
+        get(_, prop: string | symbol) {
+            if (prop === 'Path' || prop === PATH_SYMBOL) {
                 return idRef;
             }
-            if (typeof prop === 'symbol') return undefined;
-
-            const reservedToken = getReservedToken(prop);
-            if (reservedToken === 'Each') {
-                return createIdRefProxy(appendPathSegment(idRef, '@each'), options);
-            }
-            if (reservedToken && reservedToken !== 'Path' && reservedToken !== 'path') {
+            if (typeof prop === 'symbol') return undefined;
+
+            const reservedToken = getReservedToken(prop);
+            if (reservedToken === 'Each') {
+                return createIdRefProxy(appendPathSegment(idRef, '@each'), options);
+            }
+            if (reservedToken && reservedToken !== 'Path') {
                 return createIdRefProxy(appendCommandSuffix(idRef, reservedToken), options);
             }
-
-            // Chain further path segments after the id ref
-            const chained = appendPathSegment(idRef, String(prop));
-            return createIdRefProxy(chained, options);
-        },
-        apply(_, __, args) {
-            if (args.length > 0) {
-                const arg = args[0];
+
+            // Chain further path segments after the id ref
+            const chained = appendPathSegment(idRef, String(prop));
+            return createIdRefProxy(chained, options);
+        },
+        apply(_, __, args) {
+            if (args.length > 0) {
+                const arg = args[0];
                 let argStr: string;
                 if (arg === true) argStr = 'true';
                 else if (arg === false) argStr = 'false';
@@ -154,72 +153,72 @@ function createIdRefProxy(idRef: string, options?: PathsOptions): any {
  * When `aka` is provided, property names that match an alias *value* are output
  * using the alias *key* instead (reverse alias).
  */
-function createPathProxy(prefix: string, options?: PathsOptions): any {
-    const aliasMap = options?.aka;
-
-    // Use a function as the target to enable the apply trap
-    function handler() {}
-    Object.defineProperty(handler, PATH_SYMBOL, { value: prefix.length > 0 ? `?.${prefix}` : '?.' });
-
-    return new Proxy(handler, {
-        get(_, prop: string | symbol) {
-            if (prop === 'path' || prop === 'Path' || prop === PATH_SYMBOL) {
+function createPathProxy(prefix: string, options?: PathsOptions): any {
+    const aliasMap = options?.aka;
+
+    // Use a function as the target to enable the apply trap
+    function handler() {}
+    Object.defineProperty(handler, PATH_SYMBOL, { value: prefix.length > 0 ? `?.${prefix}` : '?.' });
+
+    return new Proxy(handler, {
+        get(_, prop: string | symbol) {
+            if (prop === 'Path' || prop === PATH_SYMBOL) {
                 return serializePath(prefix);
             }
-            // Ignore symbol access (Symbol.iterator, Symbol.toPrimitive, etc.)
-            if (typeof prop === 'symbol') return undefined;
-
-            const reservedToken = getReservedToken(String(prop));
-            if (reservedToken === 'Path' || reservedToken === 'path') {
+            // Ignore symbol access (Symbol.iterator, Symbol.toPrimitive, etc.)
+            if (typeof prop === 'symbol') return undefined;
+
+            const reservedToken = getReservedToken(String(prop));
+            if (reservedToken === 'Path') {
                 return serializePath(prefix);
             }
-            if (reservedToken === 'Each') {
-                return createPathProxy(appendPathSegment(prefix, '@each'), options);
-            }
-            if (reservedToken) {
-                return createPathProxy(appendCommandSuffix(prefix, reservedToken), options);
-            }
-
-            let segment = String(prop);
-
-            // #-prefix: $['#firstName'] → '#[firstName]' (cached element ref)
-            if (segment.startsWith('#')) {
-                const varName = segment.substring(1);
-                const idRef = `#[${varName}]`;
+            if (reservedToken === 'Each') {
+                return createPathProxy(appendPathSegment(prefix, '@each'), options);
+            }
+            if (reservedToken) {
+                return createPathProxy(appendCommandSuffix(prefix, reservedToken), options);
+            }
+
+            let segment = String(prop);
+
+            // #-prefix: $['#firstName'] → '#[firstName]' (cached element ref)
+            if (segment.startsWith('#')) {
+                const varName = segment.substring(1);
+                const idRef = `#[${varName}]`;
                 // Return a proxy that starts from this id ref (can chain further with ?.)
                 return createIdRefProxy(idRef, options);
             }
 
             // Apply reverse alias: if prop matches an alias value, use the alias key
-            if (aliasMap) {
-                for (const [alias, target] of Object.entries(aliasMap)) {
-                    if (target === segment) { segment = alias; break; }
-                }
-            }
-
-            const newPath = appendPathSegment(prefix, segment);
-            return createPathProxy(newPath, options);
-        },
-        apply(_, __, args) {
-            // Method call syntax: $.querySelector('.username') → extends path with the argument
-            if (args.length > 0) {
+            if (aliasMap) {
+                for (const [alias, target] of Object.entries(aliasMap)) {
+                    if (target === segment) { segment = alias; break; }
+                }
+            }
+
+            const newPath = appendPathSegment(prefix, segment);
+            return createPathProxy(newPath, options);
+        },
+        apply(_, __, args) {
+            // Method call syntax: $.querySelector('.username') → extends path with the argument
+            if (args.length > 0) {
                 const arg = args[0];
                 let argStr: string;
                 if (arg === true) argStr = 'true';
                 else if (arg === false) argStr = 'false';
-                else if (isPathProxy(arg)) {
-                    // Proxy arg — extract path without '?.' prefix
-                    const fullPath = arg[PATH_SYMBOL] as string;
-                    argStr = fullPath.startsWith('?.') ? fullPath.substring(2) : fullPath;
-                }
-                else argStr = String(arg);
-
-                const newPath = appendPathSegment(prefix, argStr);
-                return createPathProxy(newPath, options);
-            }
-            // No args — method called with no arguments, return self
-            return createPathProxy(prefix, options);
-        }
+                else if (isPathProxy(arg)) {
+                    // Proxy arg — extract path without '?.' prefix
+                    const fullPath = arg[PATH_SYMBOL] as string;
+                    argStr = fullPath.startsWith('?.') ? fullPath.substring(2) : fullPath;
+                }
+                else argStr = String(arg);
+
+                const newPath = appendPathSegment(prefix, argStr);
+                return createPathProxy(newPath, options);
+            }
+            // No args — method called with no arguments, return self
+            return createPathProxy(prefix, options);
+        }
     });
 }
 
@@ -232,14 +231,14 @@ function createPathProxy(prefix: string, options?: PathsOptions): any {
  * 
  * @example
  * const $ = paths<Person>();
- * $.lastName.path          // '?.lastName'
- * $.address.city.path      // '?.address?.city'
+ * $.lastName.Path          // '?.lastName'
+ * $.address.city.Path      // '?.address?.city'
  * 
  * // With aka (reverse alias applied):
  * const $ = paths<MyEl>({ aka: { q: 'querySelector' } });
- * $.querySelector('.user').textContent.path  // '?.q?..user?.textContent'
+ * $.querySelector('.user').textContent.Path  // '?.q?..user?.textContent'
  * 
- * // Inside sp template literals, .path is not needed:
+ * // Inside sp template literals, .Path is not needed:
  * sp`${$.lastName}, ${$.firstName}`  // ['?.lastName', ', ', '?.firstName']
  */
 export function paths<T>(options?: PathsOptions): PathProxy<T> {
@@ -247,7 +246,7 @@ export function paths<T>(options?: PathsOptions): PathProxy<T> {
 }
 
 /**
- * Create an assignment pair: { [lhs.path]: rhs.path }.
+ * Create an assignment pair: { [lhs.Path]: rhs.Path }.
  * Used to express "set this target to this source value" in a spreadable form.
  * 
  * @example
@@ -261,10 +260,10 @@ export function paths<T>(options?: PathsOptions): PathProxy<T> {
  *     count: 1
  * }
  */
-export function set(lhs: any): { to: (rhs: any) => Record<string, any> } {
-    const lhsStr = isPathProxy(lhs)
-        ? lhs[PATH_SYMBOL]
-        : String(lhs);
+export function set(lhs: any): { to: (rhs: any) => Record<string, any> } {
+    const lhsStr = isPathProxy(lhs)
+        ? lhs[PATH_SYMBOL]
+        : String(lhs);
     return {
         to(rhs: any): Record<string, any> {
             const rhsStr = isPathProxy(rhs)
@@ -293,9 +292,9 @@ export function set(lhs: any): { to: (rhs: any) => Record<string, any> } {
  * });
  * // { assign: { incrementButton: '?.clone?.q?..increment', ... } }
  */
-export function smoothOver(value: any): any {
-    if (isPathProxy(value)) {
-        return value[PATH_SYMBOL];
+export function smoothOver(value: any): any {
+    if (isPathProxy(value)) {
+        return value[PATH_SYMBOL];
     }
     if (Array.isArray(value)) {
         return value.map(smoothOver);
@@ -374,7 +373,7 @@ export function forEachKeyIn<T>(
  * Interleaves static string segments with interpolated values.
  * 
  * Path proxy objects are auto-detected and converted to their `?.`-prefixed
- * string representation — no `.path` call needed inside sp template literals.
+ * string representation — no `.Path` call needed inside sp template literals.
  * 
  * Arrays passed as interpolations are preserved as nested arrays (for
  * all-or-nothing optional segments in builtIns.join).
@@ -416,12 +415,12 @@ export function sp(strings: TemplateStringsArray, ...values: any[]): any[] {
  * Extract the last segment from a `?.`-prefixed path string.
  * e.g., '?.address?.city' → 'city', '?.firstName' → 'firstName'
  */
-function extractPropName(pathStr: string): string {
-    const withoutCommand = pathStr.replace(/(?: \+=| =!| \?=| Y=| -=| =>)$/, '');
-    const parts = withoutCommand.split('?.');
-    const last = parts[parts.length - 1];
-    return last === '@each' ? 'Each' : last;
-}
+function extractPropName(pathStr: string): string {
+    const withoutCommand = pathStr.replace(/(?: \+=| =!| \?=| Y=| -=| =>)$/, '');
+    const parts = withoutCommand.split('?.');
+    const last = parts[parts.length - 1];
+    return last === '@each' ? 'Each' : last;
+}
 
 /**
  * Tagged template literal that produces an array of {prop, val} objects + literal strings.

package/inferencer/types/NewCustomElement.md

@@ -60,7 +60,7 @@ Create `types/[project-name]/types.d.ts` with the element's property interface:
 /**
  * Properties specific to this custom element
  */
-export interface ElementProps {
+export interface EndUserProps {
     // Properties unique to this element
     myProp: string;
     disabled: boolean;
@@ -69,18 +69,21 @@ export interface ElementProps {
 /**
  * Full property set including internal state
  */
-export interface AllProps extends ElementProps {
+export interface AllProps extends EndUserProps {
     idx: number;
     item: any;
 }
 
-export type T = AllProps;
+export type AP = AllProps;
+
+export interface RunTimeProps extends AllProps, HTMLElement
+
 ```
 
 **Key points:**
-- `ElementProps` — the public API specific to this element
+- `EndUserProps` — the public API specific to this element
 - `AllProps` — includes internal/computed state managed by roundabout
-- Export `T` as a convenience alias for use in `defRef.mjs` type annotations
+- Export `AP` as a convenience alias 
 
 
 ## Step 4: Create imports.html

package/inferencer/types/NewHTMLFirstCustomElement.md

@@ -238,17 +238,17 @@ import { fileURLToPath } from 'url';
 import {akaMethods as m, aka, builtInEmoji} from 'assign-gingerly/DX/emojis.js';
 import {paths, doAssign, set, smoothOver} from 'assign-gingerly/DX/paths.js';
 
-/** @import {EndUserProps, AP} from './types'; */
+/** @import {EndUserProps, AP, RuntimeProps} from './types'; */
 /** @import {RoundaboutOptions} from './types/roundabout/types' */
 /** @import {ElMakerConfig} from './types/el-maker/types' */
 
 const withMethods = [m['🔍']];
 
-const $ = (/** @type {typeof paths<AP>} */ (/** @type {any} */(paths)))({withMethods});
+const $ = (/** @type {typeof paths<RuntimeProps>} */ (/** @type {any} */(paths)))({withMethods});
 
 
 /**
- * @type {RoundaboutOptions<EndUserProps>}
+ * @type {RoundaboutOptions<AP>}
  */
 const raConfig = {
     weakRef: {
@@ -262,30 +262,30 @@ const raConfig = {
     },
     compacts: {
         on_click_of_expandButton_assign: {
-            [$.expandButton.hidden.path]: true,
-            [$.collapseButton.hidden.path]: false,
+            [$.expandButton.hidden.Path]: true,
+            [$.collapseButton.hidden.Path]: false,
             expanded: true,
             
         },
         on_click_of_collapseButton_assign: {
             expanded: false,
-            [$.expandButton.hidden.path]: false,
-            [$.collapseButton.hidden.path]: true,
+            [$.expandButton.hidden.Path]: false,
+            [$.collapseButton.hidden.Path]: true,
         } 
     },
     merges: smoothOver([
         {
             ifKeyIn: ['clone'],
-            assign: {
-                expandButton: $.clone.querySelector('[name=expand]'),
-                collapseButton: $.clone.querySelector('[name=collapse]'),
-            }
+            ...doAssign(
+                set($.expandButton).to($.clone.querySelector('[name=expand]')),
+                set($.collapseButton).to($.clone.querySelector('[name=collapse]')),
+            )
         },
         {
             ifKeyIn: ['expanded'],
             ...doAssign(
                 set($.ariaExpanded).to($.expanded),
-                set(`${$.ariaControlsElements.path}?.@each?.hidden =!`).to($.expanded)
+                set($.ariaControlsElements.Each.hidden.QMEq).to([$.expanded, false, 'until-found'])
             )
         },
         {
@@ -303,7 +303,7 @@ const raConfig = {
     }
 }
 
-/** @type {ElMakerConfig<EndUserProps>} */
+/** @type {ElMakerConfig<AP>} */
 const features = {
     assignFeatures: {
         roundabout: {
@@ -326,6 +326,41 @@ writeFileSync(outputFile, render(), 'utf8');
 
 </details>
 
+Some non obvious scenarios:
+
+### How can I perform an action when the escape key is pressed somewhere on the document?
+
+Answer:
+
+From the side-burger example.
+
+```JS
+const raConfig = {
+    ...
+    compacts: {
+        on_keydown_of_ownerDocument_assignFromEvent: {
+            [$.escapeKeyPressed.QMEq.Path]: [['?.key', 'Escape'], true, false]
+        }
+    },
+    merges: smoothOver([
+        {
+            ifKeyIn: ['expanded'],
+            ...doAssign(
+                ...
+                set($.escapeKeyPressed).to(false)
+            )
+        },
+        ...
+        {
+            ifAllOf: ['escapeKeyPressed'],
+            assign: {
+                expanded: false
+            }
+        }
+    ]),
+};
+```
+
 ## Step 8
 
 Run `node el-maker.mjs` (or `npm run build-el-maker` if your `package.json` includes a watch script) to regenerate `el-maker.json`.

package/inferencer/types/roundabout/types.d.ts

@@ -54,6 +54,7 @@ export type Compacts<TProps = any, TActions = TProps, TEvents extends string = s
     | Partial<{[key in `on_${TEvents}_of_${keyof TProps & string}_inc_${keyof TProps & string}_by`]: number}>
     | Partial<{[key in `on_${TEvents}_of_${keyof TProps & string}_set_${keyof TProps & string}_to`]: any}>
     | Partial<{[key in `on_${TEvents}_of_${keyof TProps & string}_assign`]: Record<string, any>}>
+    | Partial<{[key in `on_${TEvents}_of_${keyof TProps & string}_assignFromEvent`]: Record<string, any>}>
 ;
 
 export type Hitches<TProps = any, TActions = TProps> = 
@@ -160,7 +161,7 @@ export interface RAConfig<
     initialPropVals?: Partial<{[key in keyof TProps & string]: unknown}>,
 }
 
-export interface RoundaboutOptions<TProps = unknown, TActions = TProps, ETProps = TProps> extends RAConfig<TProps, TActions, ETProps> {
+export interface RoundaboutOptions<TProps = unknown, TActions = TProps, ETProps = TProps, EventTypes extends string = string> extends RAConfig<TProps, TActions, ETProps, unknown, EventTypes> {
     vm?: TProps & TActions & RoundaboutReady,
     //for enhanced elements, pass in the container, referenced via $0.
     container?: EventTarget,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "assign-gingerly",
-  "version": "0.0.81",
+  "version": "0.0.82",
   "description": "This package provides a utility function for carefully merging one object into another.",
   "homepage": "https://github.com/bahrus/assign-gingerly#readme",
   "bugs": {