jssm 5.162.7 → 5.162.8

package/dist/wc/instance.js

@@ -9,11 +9,9 @@ import { sm, from } from 'jssm';
 /**
  * Returns true when `tag_name` is exactly `fsl-<suffix>` or `jssm-<suffix>`
  * (case-insensitive).
- *
  * @param tag_name - The element tag name to test (e.g. `"FSL-VIZ"`, `"jssm-viz"`).
  * @param suffix   - The suffix to match after the prefix (e.g. `"viz"`).
  * @returns `true` when `tag_name` is `fsl-<suffix>` or `jssm-<suffix>`.
- *
  * @example
  * wc_suffix_matches('FSL-VIZ', 'viz');   // true
  * wc_suffix_matches('jssm-viz', 'viz');  // true
@@ -27,15 +25,12 @@ function wc_suffix_matches(tag_name, suffix) {
 /**
  * Returns the nearest ancestor of `el` (or `el` itself) whose tag is
  * `fsl-<suffix>` or `jssm-<suffix>`, or `null` if none exists.
- *
  * @param el     - The element to start the search from.
  * @param suffix - The suffix to match (e.g. `"instance"`).
  * @returns The closest matching ancestor element, or `null`.
- *
  * @example
  * // <fsl-instance><div id="k"></div></fsl-instance>
  * closest_wc(document.getElementById('k'), 'instance'); // <fsl-instance>
- *
  * @see wc_suffix_matches
  */
 function closest_wc(el, suffix) {
@@ -56,7 +51,6 @@ function closest_wc(el, suffix) {
  * walk_path({ a: null },     'a.b');     // => undefined (null is not an object)
  * walk_path({ a: 1 },         '');       // => { a: 1 } (empty path = identity)
  * ```
- *
  * @param obj  - The root value to traverse.
  * @param path - Dotted path of property names, e.g. `"a.b.c"`.
  * @returns The terminal value, or `undefined` if any step fails.
@@ -96,22 +90,30 @@ function walk_path(obj, path) {
  * resolve_binding(m, 'data.username');      // typed-data subfield
  * resolve_binding(m, 'wat');                // throws
  * ```
- *
  * @param m    - The machine whose state/data is being projected.
  * @param expr - The binding expression text (raw attribute value).
  * @returns The resolved value, typed `unknown` since each expression
  *          yields a different shape.
- *
  * @throws Error - When `expr` is not a recognized binding form.
  */
 function resolve_binding(m, expr) {
     switch (expr) {
-        case 'state': return m.state();
-        case 'terminal': return m.is_terminal();
-        case 'complete': return m.is_complete();
-        case 'legal-actions': return m.list_exit_actions().map(a => String(a)).join(' ');
-        case 'data': return m.data();
-        default:
+        case 'state': {
+            return m.state();
+        }
+        case 'terminal': {
+            return m.is_terminal();
+        }
+        case 'complete': {
+            return m.is_complete();
+        }
+        case 'legal-actions': {
+            return m.list_exit_actions().map(String).join(' ');
+        }
+        case 'data': {
+            return m.data();
+        }
+        default: {
             if (expr.startsWith('data.')) {
                 // walk the live reference (no whole-tree structuredClone per event),
                 // then clone only the extracted leaf so callers still receive a
@@ -121,6 +123,7 @@ function resolve_binding(m, expr) {
                 return ((typeof leaf === 'object') && (leaf !== null)) ? structuredClone(leaf) : leaf;
             }
             throw new Error(`<jssm-bind>: unknown binding expression "${expr}"`);
+        }
     }
 }
 /**
@@ -141,16 +144,17 @@ function resolve_binding(m, expr) {
  * set_on_element(button, 'disabled',        true);         // button.disabled = true
  * set_on_element(div,    'data-current',    'red');        // setAttribute('data-current', 'red')
  * ```
- *
  * @param el     - The element to update.
  * @param target - Target property name, possibly a `data-*` attribute.
  * @param value  - The resolved value to assign.
  */
 function set_on_element(el, target, value) {
     if (target.startsWith('data-')) {
+        // eslint-disable-next-line @typescript-eslint/no-base-to-string -- documented #645 contract: attribute targets coerce with String(); a `data`-bound object rendering '[object Object]' is the shipped behavior
         el.setAttribute(target, String(value));
     }
     else if (target === 'textContent') {
+        // eslint-disable-next-line @typescript-eslint/no-base-to-string -- documented #645 contract: textContent coerces with String(); a `data`-bound object rendering '[object Object]' is the shipped behavior
         el.textContent = String(value);
     }
     else {
@@ -185,12 +189,10 @@ function set_on_element(el, target, value) {
  * const unsubs = install_bindings(this, this.machine);
  * this._unsubs.push(...unsubs);
  * ```
- *
  * @param host    - The host element whose descendants carry the bindings.
  * @param machine - The machine whose state/data is being projected.
  * @returns A flat array of unsubscribe callbacks, one per installed
  *          subscription.
- *
  * @throws Error - When any binding expression is unrecognized
  *                 (propagated from {@link resolve_binding}).
  * @throws Error - When a `<jssm-bind>` tag is missing its `selector`
@@ -201,7 +203,7 @@ function install_bindings(host, machine) {
     const unsubs = [];
     // Form 1: inline `data-jssm-bind` on descendants.
     const inline_nodes = host.querySelectorAll('[data-jssm-bind]');
-    for (const el of Array.from(inline_nodes)) {
+    for (const el of inline_nodes) {
         const expr = el.dataset.jssmBind;
         const target = (_a = el.dataset.jssmBindTo) !== null && _a !== void 0 ? _a : 'textContent';
         const apply = () => {
@@ -215,19 +217,19 @@ function install_bindings(host, machine) {
     // `<fsl-instance>` / `<jssm-instance>` children would have their own
     // bindings handled by their own component.
     const all_direct = host.querySelectorAll(':scope > *');
-    const config_tags = Array.from(all_direct).filter(el => wc_suffix_matches(el.tagName, 'bind'));
+    const config_tags = [...all_direct].filter(el => wc_suffix_matches(el.tagName, 'bind'));
     for (const tag of config_tags) {
         const selector = tag.getAttribute('selector');
-        const expr = tag.getAttribute('source');
-        const target = (_b = tag.getAttribute('target')) !== null && _b !== void 0 ? _b : 'textContent';
         if (selector === null || selector.length === 0) {
             throw new Error('<jssm-bind>: missing required "selector" attribute');
         }
+        const expr = tag.getAttribute('source');
         if (expr === null || expr.length === 0) {
             throw new Error('<jssm-bind>: missing required "source" attribute');
         }
+        const target = (_b = tag.getAttribute('target')) !== null && _b !== void 0 ? _b : 'textContent';
         const targets = host.querySelectorAll(selector);
-        for (const el of Array.from(targets)) {
+        for (const el of targets) {
             const apply = () => {
                 set_on_element(el, target, resolve_binding(machine, expr));
             };
@@ -247,7 +249,6 @@ function install_bindings(host, machine) {
  * unknown tag) gives it a stable upgrade timing, a `display: none`
  * default style, and a proper place in the custom-elements registry so
  * `customElements.get('fsl-bind')` resolves.
- *
  * @element fsl-bind
  * @attribute selector - CSS selector for the target element(s), scoped to the host.
  * @attribute source - Binding expression (see {@link resolve_binding}).
@@ -285,7 +286,6 @@ const VALID_KINDS = new Set([
  *
  * The `machine` parameter is used only for `state()`, so unit tests can
  * substitute any object with a `state(): unknown` method.
- *
  * @param ctx     - Raw hook context passed by jssm.
  * @param machine - The owning machine; used for the `state()` accessor.
  * @returns A proxy object suitable for passing to a user handler.
@@ -308,6 +308,7 @@ function make_hook_proxy(ctx, machine) {
             return ctx.action;
         },
         state() {
+            // eslint-disable-next-line @typescript-eslint/no-base-to-string -- `machine` is deliberately duck-typed `state(): unknown` so tests can stub it (see docblock); real machines return string, and String() is the documented normalization
             return String(machine.state());
         },
     };
@@ -322,7 +323,6 @@ function make_hook_proxy(ctx, machine) {
  *
  * Prepends a `//# sourceURL=` comment so devtools surface a meaningful name
  * in stack traces instead of `anonymous`.
- *
  * @param body     - Trimmed textContent of the `<jssm-hook>` element.
  * @param debug_id - Identifier appended to the synthetic sourceURL.
  * @returns The compiled handler.
@@ -336,7 +336,6 @@ function compile_inline_body$1(body, debug_id) {
  * Resolve a `handler="name"` attribute to a callable by consulting first the
  * optional in-WC registry, then `globalThis[name]`.  Throws a clear error if
  * neither resolves.
- *
  * @param name     - The handler name from the `handler=""` attribute.
  * @param registry - Optional in-WC registry to consult first.
  * @returns The resolved handler.
@@ -359,13 +358,12 @@ function resolve_named_handler$1(name, registry) {
  * Validate and normalize a `<jssm-hook kind="...">` value, defaulting to
  * `"hook"` when the attribute is absent.  Throws on unknown kinds rather
  * than silently doing nothing later.
- *
  * @param raw - The raw attribute value, or null if not present.
  * @returns The normalized {@link JssmHookKind}.
  * @throws Error - On an unknown kind.
  */
 function normalize_hook_kind(raw) {
-    if (raw === null || raw === undefined || raw === '') {
+    if (!raw) { // null, undefined, and '' — the only falsy values of this type
         return 'hook';
     }
     if (!VALID_KINDS.has(raw)) {
@@ -383,7 +381,6 @@ function normalize_hook_kind(raw) {
  * `from`/`to` for `kind="hook"`) are NOT validated here — `set_hook` will
  * throw with its own clear errors on missing pieces, which keeps the
  * error surface single-sourced.
- *
  * @param el       - The `<jssm-hook>` element to parse.
  * @param debug_id - Identifier used in the inline body's sourceURL.
  * @param registry - Optional in-WC registry of named handlers.
@@ -401,9 +398,9 @@ function parse_hook_element(el, debug_id, registry) {
     if (handler_attr === null && body_text.length === 0) {
         throw new Error('<jssm-hook>: must specify either handler="name" attribute or an inline body');
     }
-    const user_handler = handler_attr !== null
-        ? resolve_named_handler$1(handler_attr, registry)
-        : compile_inline_body$1(body_text, debug_id);
+    const user_handler = handler_attr === null
+        ? compile_inline_body$1(body_text, debug_id)
+        : resolve_named_handler$1(handler_attr, registry);
     const kind = normalize_hook_kind(el.getAttribute('kind'));
     // Convert null → undefined so downstream descriptors omit absent keys.
     const from = (_a = el.getAttribute('from')) !== null && _a !== void 0 ? _a : undefined;
@@ -421,7 +418,6 @@ function parse_hook_element(el, debug_id, registry) {
  * Any non-`false` return — including `undefined`, `true`, or an arbitrary
  * object — allows the transition.  This matches the contract spelled out
  * in the issue (#641): "return false cancels; anything else allows".
- *
  * @param spec    - The parsed install spec carrying the user handler.
  * @param machine - The owning machine; used by the proxy's `state()`.
  * @returns A wrapped handler suitable for `set_hook`.
@@ -450,7 +446,6 @@ function wrap_user_handler(spec, machine) {
  * Return type is `unknown` because jssm's `HookDescription` is a
  * discriminated union and our runtime-discriminator value can't be tracked
  * by TypeScript across the build.  The WC casts at the `set_hook` call site.
- *
  * @param spec    - The parsed install spec.
  * @param wrapped - The wrapped (friendly-proxy) handler from {@link wrap_user_handler}.
  * @returns A descriptor object for `set_hook`/`remove_hook`.
@@ -478,14 +473,12 @@ function build_hook_descriptor(spec, wrapped) {
  */
 /**
  * Default fragment key for the single-machine case (back-compat with 5.150).
- *
  * @example
  * DEFAULT_PERMALINK_KEY; // 'm'
  */
 /**
  * URL-safe base64 (RFC 4648 §5) of raw bytes: standard base64 with `+`→`-`,
  * `/`→`_`, and trailing `=` padding stripped.
- *
  * @example
  * bytes_to_base64url(new TextEncoder().encode("a")); // "YQ"
  */
@@ -498,7 +491,6 @@ function bytes_to_base64url(bytes) {
 }
 /**
  * Inverse of {@link bytes_to_base64url}.
- *
  * @example
  * new TextDecoder().decode(base64url_to_bytes("YQ")); // "a"
  */
@@ -514,7 +506,6 @@ function base64url_to_bytes(text) {
 }
 /**
  * DEFLATE `bytes` (raw, headerless) via the platform `CompressionStream`.
- *
  * @example
  * await deflate_raw(new TextEncoder().encode("aaaaaaaa")); // shorter Uint8Array of raw DEFLATE bytes
  */
@@ -540,9 +531,7 @@ const MAX_PERMALINK_INFLATE_BYTES = 5 * 1024 * 1024;
  * Inverse of {@link deflate_raw}, reading the stream in chunks and aborting once
  * the inflated output would exceed {@link MAX_PERMALINK_INFLATE_BYTES} (a
  * decompression-bomb guard — see that constant).
- *
  * @throws RangeError when the inflated output exceeds the cap.
- *
  * @example
  * new TextDecoder().decode(await inflate_raw(await deflate_raw(new TextEncoder().encode("hi")))); // "hi"
  */
@@ -582,7 +571,6 @@ async function inflate_raw(bytes) {
  * Encode FSL to a `<scheme><payload>` segment value (the part after `key=`).
  * DEFLATE is used (scheme `1`) only when it is strictly shorter than the raw
  * bytes (scheme `0`).
- *
  * @example
  * await encode_machine("a -> b;"); // "0YSAtPiBiOw"
  */
@@ -595,7 +583,6 @@ async function encode_machine(fsl) {
 /**
  * Inverse of {@link encode_machine}: decode a `<scheme><payload>` segment back
  * to FSL. Async because inflate is async.
- *
  * @example
  * await decode_machine("0YSAtPiBiOw"); // "a -> b;"
  */
@@ -605,8 +592,10 @@ async function decode_machine(segment) {
     const plain = scheme === '1' ? await inflate_raw(bytes) : bytes;
     return new TextDecoder().decode(plain);
 }
-/** `decodeURIComponent` that returns its input untouched on a malformed escape,
- *  so a hand-mangled fragment never throws out of {@link read_fragment_param}. */
+/**
+ * `decodeURIComponent` that returns its input untouched on a malformed escape,
+ *  so a hand-mangled fragment never throws out of {@link read_fragment_param}.
+ */
 function safe_decode(text) {
     try {
         return decodeURIComponent(text);
@@ -631,9 +620,7 @@ function fragment_pairs(hash) {
 }
 /**
  * Read one segment's value out of a `#a=…&b=…` fragment.
- *
  * @returns The value, or `null` if `key` is absent.
- *
  * @example
  * read_fragment_param('#a=0AAA&b=1BBB', 'b'); // "1BBB"
  */
@@ -644,7 +631,6 @@ function read_fragment_param(hash, key) {
 /**
  * Return a new fragment body (no leading `#`) with `key`'s segment set to
  * `value`, preserving every other segment and its order; appends if absent.
- *
  * @example
  * set_fragment_param('#a=0AAA', 'b', '1BBB'); // "a=0AAA&b=1BBB"
  */
@@ -665,7 +651,6 @@ function set_fragment_param(hash, key, value) {
  * The fragment key an element owns: its `uhash` attribute if set, else its
  * `id`, else `null` (does not participate in URL sync). The single source of
  * this rule, shared by the toolbar export and the sync controller.
- *
  * @example
  * permalink_key_for(el); // "myId"  (when <el id="myId">, no uhash)
  */
@@ -685,7 +670,6 @@ const PERMALINK_WRITE_DEBOUNCE_MS = 300;
  *
  * Echo guard: `_last` holds the segment most recently read or written, so a
  * restore→rebuild→write cycle and a self-induced `hashchange` are both no-ops.
- *
  * @example
  * // In an element's constructor:
  * new FslPermalinkSync(this); // reads <el id="k">'s #k=… on connect, writes it on edit
@@ -706,14 +690,14 @@ class FslPermalinkSync {
         }
         void this._restore();
         this.host.addEventListener('fsl-machine-rebuilt', this._onRebuilt);
-        window.addEventListener('hashchange', this._onHashChange);
+        addEventListener('hashchange', this._onHashChange);
     }
     hostDisconnected() {
         if (this.key === null) {
             return;
         }
         this.host.removeEventListener('fsl-machine-rebuilt', this._onRebuilt);
-        window.removeEventListener('hashchange', this._onHashChange);
+        removeEventListener('hashchange', this._onHashChange);
         if (this._timer !== undefined) {
             clearTimeout(this._timer);
             this._timer = undefined;
@@ -771,7 +755,6 @@ class FslPermalinkSync {
  * with `system` following the OS `prefers-color-scheme`. The host resolves
  * (theme name × mode) to a palette and writes it as `--fsl-color-*` custom
  * properties, which cascade to every slotted widget.
- *
  * @see resolve_theme_mode
  */
 /**
@@ -804,7 +787,6 @@ const BUILTIN_THEMES = {
 /**
  * Resolve a `(registry, theme name, variant)` triple to a concrete palette,
  * falling back to the built-in `Default` theme when the name is unknown.
- *
  * @param themes - The registry to look in.
  * @param name - The selected theme name.
  * @param variant - `light` or `dark`.
@@ -817,11 +799,9 @@ function resolve_palette(themes, name, variant) {
 /**
  * Resolve a theme mode to a concrete `light`/`dark`. `system` consults the OS
  * preference; `light`/`dark` are returned as-is.
- *
  * @param mode - The selected mode.
  * @param prefers_dark - Whether the OS prefers a dark color scheme.
  * @returns The concrete variant to apply.
- *
  * @example
  * resolve_theme_mode('system', true);  // 'dark'
  * resolve_theme_mode('light', true);   // 'light'
@@ -832,7 +812,6 @@ function resolve_theme_mode(mode, prefers_dark) {
 /**
  * Map a palette to its `--fsl-color-*` custom-property entries, ready to set on
  * an element's style.
- *
  * @param palette - The resolved palette.
  * @returns `[propertyName, value]` pairs, e.g. `['--fsl-color-surface', '#fff']`.
  */
@@ -843,7 +822,8 @@ function register_palette_properties() {
     if (typeof CSS === 'undefined' || typeof CSS.registerProperty !== 'function') {
         return;
     }
-    for (const [prop, value] of palette_to_vars(BUILTIN_THEMES['Default'].light)) {
+    const default_light_vars = palette_to_vars(BUILTIN_THEMES['Default'].light);
+    for (const [prop, value] of default_light_vars) {
         try {
             CSS.registerProperty({ name: prop, syntax: '<color>', inherits: true, initialValue: value });
         }
@@ -900,7 +880,6 @@ const JSSM_ON_EVENT_NAMES = new Set([
  * // => { event: 'entry', handler_name: 'onPaid', inline_body: undefined,
  * //      once: false, name: undefined, filter: { state: 'paid' } }
  * ```
- *
  * @param el - The `<jssm-on>` element to parse.
  * @returns A validated {@link ParsedJssmOn} record.
  * @throws If `event` is missing, unknown, both handler forms are
@@ -985,7 +964,6 @@ const jssm_handler_registry = new Map();
  * Resolve a named handler from the registry, then from `globalThis`.
  * Throws if neither lookup finds a function — earlier failure here is
  * better than a delayed "is not a function" at first event delivery.
- *
  * @param name - The handler name as supplied by `handler="..."`.
  * @returns The resolved function.
  * @throws If no function is registered under `name`.
@@ -1011,7 +989,6 @@ function resolve_named_handler(name) {
  * caveats apply (strict CSP without `'unsafe-eval'` blocks it).  A
  * `//# sourceURL=jssm-on:N` pragma is appended so devtools stack traces
  * point at a meaningful name.
- *
  * @param body - The inline JS body (function body, not full function).
  * @param source_id - A short identifier for the sourceURL pragma.
  * @returns The compiled handler.
@@ -1021,7 +998,7 @@ function compile_inline_body(body, source_id) {
     // The Function constructor is intentional here — see the docblock above
     // for the rationale and the CSP caveat.  Equivalent to how browsers wire
     // up inline event handlers; the input is consumer-authored markup.
-    // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
     return new Function('e', wrapped); // skipcq: JS-0086
 }
 /**
@@ -1040,7 +1017,6 @@ function compile_inline_body(body, source_id) {
  * resolve_fsl_source(div as HTMLElement, 'Off -> On;');
  * // => { fsl: 'Off -> On;', provided_count: 1, error: undefined }
  * ```
- *
  * @param host - The `<jssm-instance>` element being resolved.
  * @param fsl_attr - The current value of the host's `fsl` attribute (or property), or empty string.
  * @returns A {@link JssmInstanceFslResolution} describing the outcome.
@@ -1103,7 +1079,6 @@ function resolve_fsl_source(host, fsl_attr) {
  * Resolve `layout="auto"` to a concrete split direction from the viewport
  * shape: side-by-side (`'lr'`) when at least as wide as tall, else stacked
  * (`'tb'`). Pure, so it's testable without a laid-out DOM.
- *
  * @example
  *   auto_mode(1200, 800);   // => 'lr'
  *   auto_mode(600, 900);    // => 'tb'
@@ -1116,7 +1091,6 @@ function auto_mode(width, height) {
  * Pure so it's testable without a laid-out DOM: returns a neutral `50` when the
  * container has no measured size (e.g. jsdom, where `getBoundingClientRect`
  * yields zeros), and otherwise clamps to `[15, 85]` so neither pane collapses.
- *
  * @example
  *   split_ratio(30, 0, 100);   // => 30
  *   split_ratio(5,  0, 100);   // => 15  (clamped low)
@@ -1144,7 +1118,6 @@ function split_ratio(coord, start, size) {
  * attributes (`current-state`, `legal-actions`, `terminal`, `complete`)
  * and sets a `--current-state` CSS custom property so consumer CSS can
  * style by state without subclassing.
- *
  * @element fsl-instance
  * @cssproperty [--current-state] - The machine's current state name as a CSS string token.
  * @slot title - Heading area for the instance.
@@ -1163,8 +1136,10 @@ function split_ratio(coord, start, size) {
  * @slot footer - Footer slot.
  */
 class FslInstance extends LitElement {
-    /** Bind this instance to a URL-fragment segment keyed by its `uhash`/`id`
-     *  (inert if it has neither): restore on connect, write debounced on edit. */
+    /**
+     * Bind this instance to a URL-fragment segment keyed by its `uhash`/`id`
+     *  (inert if it has neither): restore on connect, write debounced on edit.
+     */
     constructor() {
         super();
         /**
@@ -1215,19 +1190,27 @@ class FslInstance extends LitElement {
         this._autoMode = 'lr';
         /** Window-resize listener installed while `layout="auto"`, or null. */
         this._autoListener = null;
-        /** Per-panel runtime visibility overrides set by the user via the toolbar
-         *  toggles; a slot absent here falls back to its mode-resolved base. */
+        /**
+         * Per-panel runtime visibility overrides set by the user via the toolbar
+         *  toggles; a slot absent here falls back to its mode-resolved base.
+         */
         this._overrides = new Map();
-        /** Control-level default {@link PanelMode}; {@link panelModes} overrides it
+        /**
+         * Control-level default {@link PanelMode}; {@link panelModes} overrides it
          *  per panel. `default` shows only the editor + renderer; every other panel
-         *  starts hidden and is opt-in. */
+         *  starts hidden and is opt-in.
+         */
         this.panelMode = 'default';
-        /** Per-panel {@link PanelMode} overrides (slot → mode), each overriding the
-         *  control-level {@link panelMode}. */
+        /**
+         * Per-panel {@link PanelMode} overrides (slot → mode), each overriding the
+         *  control-level {@link panelMode}.
+         */
         this.panelModes = {};
-        /** Panels the FSL "requests" — the embedder-set stand-in for the
+        /**
+         * Panels the FSL "requests" — the embedder-set stand-in for the
          *  editor-defaults-in-FSL mechanism (fsl#1334). `request`-mode panels listed
-         *  here are shown; others fall back to the default. */
+         *  here are shown; others fall back to the default.
+         */
         this.requestedPanels = [];
         /**
          * The underlying machine instance, constructed at `connectedCallback`.
@@ -1301,7 +1284,7 @@ class FslInstance extends LitElement {
         };
         /** Document pointer-move during a drag: recompute the split ratio. */
         this._onGutterMove = (e) => {
-            const rect = this.renderRoot.querySelector('.workbench').getBoundingClientRect();
+            const rect = (this.renderRoot.querySelector('.workbench')).getBoundingClientRect();
             const mode = this._effectiveMode();
             this._split = (mode === 'tb' || mode === 'bt')
                 ? split_ratio(e.clientY, rect.top, rect.height)
@@ -1322,7 +1305,6 @@ class FslInstance extends LitElement {
     }
     /**
      * Raw machine accessor.  Returns the owned {@link Machine} instance.
-     *
      * @throws If accessed before the element has been connected.
      */
     get machine() {
@@ -1336,7 +1318,6 @@ class FslInstance extends LitElement {
      * After the action, reflects updated state to host attributes and the
      * `--current-state` CSS custom property, and requests a Lit update so
      * the state-specific `<slot name="state-...">` can re-pick.
-     *
      * @param action - The action name to dispatch.
      * @param data - Optional data payload to pass to the action.
      * @returns `true` if the action succeeded, `false` otherwise.
@@ -1351,7 +1332,6 @@ class FslInstance extends LitElement {
      * Convenience wrapper for `machine.transition(state, data)` — moves directly
      * to a state along a legal (non-forced) edge. Reflects the new state and
      * requests an update, exactly as {@link FslInstance.do} does for actions.
-     *
      * @param state - The destination state.
      * @param data - Optional data payload.
      * @returns `true` if the transition succeeded (a legal edge existed).
@@ -1366,7 +1346,6 @@ class FslInstance extends LitElement {
      * Convenience wrapper for `machine.force_transition(state, data)` — moves to a
      * state along any edge, including forced-only ones. Reflects the new state and
      * requests an update.
-     *
      * @param state - The destination state.
      * @param data - Optional data payload.
      * @returns `true` if the forced transition succeeded (any edge existed).
@@ -1382,12 +1361,12 @@ class FslInstance extends LitElement {
      * state's name.
      */
     state() {
-        return String(this.machine.state());
+        return this.machine.state();
     }
     /** Whether the OS currently prefers a dark color scheme. */
     _prefers_dark() {
-        return typeof window.matchMedia === 'function'
-            && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        return typeof matchMedia === 'function'
+            && matchMedia('(prefers-color-scheme: dark)').matches;
     }
     /**
      * Resolve `theme` (mode) × `themeName` to a palette and apply it: write the
@@ -1398,7 +1377,8 @@ class FslInstance extends LitElement {
     _applyTheme() {
         const variant = resolve_theme_mode(this.theme, this._prefers_dark());
         this.setAttribute('resolved-theme', variant);
-        for (const [prop, value] of palette_to_vars(resolve_palette(this.themes, this.themeName, variant))) {
+        const vars = palette_to_vars(resolve_palette(this.themes, this.themeName, variant));
+        for (const [prop, value] of vars) {
             this.style.setProperty(prop, value);
         }
         for (const editor of this.querySelectorAll('[slot="editor"]')) {
@@ -1415,7 +1395,8 @@ class FslInstance extends LitElement {
       <div class="tabbar" role="tablist" aria-label="Pane">
         <button type="button" role="tab" aria-selected=${this._tab === 'viz'}    @click=${() => this._setTab('viz')}>Graph</button>
         <button type="button" role="tab" aria-selected=${this._tab === 'editor'} @click=${() => this._setTab('editor')}>Code</button>
-      </div>`;
+      </div>
+    `;
     }
     /** Switch the visible pane in the `tabs` layout. */
     _setTab(tab) {
@@ -1431,10 +1412,8 @@ class FslInstance extends LitElement {
      * {@link PanelMode} ({@link panelModes} for the slot, else {@link panelMode}):
      * `hide`/`show` force the state; otherwise a user toggle wins, then a
      * `request`ed panel shows, then the built-in default.
-     *
      * @param slot - A panel slot name (e.g. `"viz"`, `"editor"`, `"history"`).
      * @returns `true` when the panel is hidden.
-     *
      * @example
      * el.panelModes = { history: 'show' };
      * el.isPanelHidden('history'); // false
@@ -1462,7 +1441,6 @@ class FslInstance extends LitElement {
      * `viz` or `editor` collapses that workbench pane (the other fills); hiding
      * an aux panel removes its section. `<fsl-toolbar>` drives this from its
      * panel toggles.
-     *
      * @param slot   - A panel slot name (e.g. `"viz"`, `"editor"`, `"history"`).
      * @param hidden - `true` to hide, `false` to show.
      */
@@ -1473,7 +1451,6 @@ class FslInstance extends LitElement {
     /**
      * Toggle the visibility of the panel slotted under `slot`. A no-op when the
      * panel's mode is `hide` or `show` — those lock the visibility.
-     *
      * @param slot - A panel slot name (e.g. `"viz"`, `"editor"`, `"history"`).
      */
     togglePanel(slot) {
@@ -1499,6 +1476,7 @@ class FslInstance extends LitElement {
                 }
             };
             this._autoListener = recompute;
+            // eslint-disable-next-line unicorn/prefer-observer-apis -- deliberately a window resize listener: it resolves layout from the VIEWPORT aspect (not an element box) and must work in jsdom, which lacks ResizeObserver
             window.addEventListener('resize', recompute);
             recompute();
         }
@@ -1514,7 +1492,6 @@ class FslInstance extends LitElement {
      * Order is important: state reflection happens BEFORE the first render
      * so that consumer CSS rules keyed off `[current-state="..."]` apply on
      * first paint without a flash of unstyled content.
-     *
      * @throws If no FSL source was provided, or if more than one channel
      * supplied a source.
      */
@@ -1564,8 +1541,8 @@ class FslInstance extends LitElement {
         // switches can ease), follow the OS while in `system` mode, then apply the
         // resolved palette.
         register_palette_properties();
-        if (typeof window.matchMedia === 'function') {
-            this._mql = window.matchMedia('(prefers-color-scheme: dark)');
+        if (typeof matchMedia === 'function') {
+            this._mql = matchMedia('(prefers-color-scheme: dark)');
             this._mql.addEventListener('change', this._on_os_theme_change);
         }
         this._applyTheme();
@@ -1604,12 +1581,12 @@ class FslInstance extends LitElement {
         const machine = this._machine;
         const on_nodes = this.querySelectorAll(':scope > fsl-on, :scope > jssm-on');
         let index = 0;
-        for (const el of Array.from(on_nodes)) {
+        for (const el of on_nodes) {
             index += 1;
             const parsed = parse_jssm_on_element(el);
-            const handler = parsed.handler_name !== undefined
-                ? resolve_named_handler(parsed.handler_name)
-                : compile_inline_body(parsed.inline_body, String(index));
+            const handler = parsed.handler_name === undefined
+                ? compile_inline_body(parsed.inline_body, String(index))
+                : resolve_named_handler(parsed.handler_name);
             // Argument shape: machine.on(name, handler) when no filter, or
             // machine.on(name, filter, handler) when filtered.  Same for once.
             // `as any` collapses the per-event detail typing — the WC is a
@@ -1631,7 +1608,7 @@ class FslInstance extends LitElement {
     _install_declarative_hooks() {
         const machine = this._machine;
         const hook_els = this.querySelectorAll(':scope > fsl-hook, :scope > jssm-hook');
-        for (const el of Array.from(hook_els)) {
+        for (const el of hook_els) {
             const debug_id = `${this._hook_id_prefix()}${++this._hook_debug_counter}`;
             const spec = parse_hook_element(el, debug_id, this.registry);
             const wrapped = wrap_user_handler(spec, machine);
@@ -1684,7 +1661,6 @@ class FslInstance extends LitElement {
      * host attributes (mechanism 1), CSS custom properties (mechanism 3), and
      * the state-specific slot (mechanism 2) are all current by the time a
      * `fsl-*` listener runs.
-     *
      * @param changed - Lit's changed-property map (forwarded to super).
      */
     /**
@@ -1715,7 +1691,6 @@ class FslInstance extends LitElement {
      */
     /**
      * Build a machine from FSL source, seeding {@link data} when it is set.
-     *
      * @param fsl_source - The FSL string to compile.
      * @returns The compiled machine.
      */
@@ -1724,10 +1699,12 @@ class FslInstance extends LitElement {
             ? sm `${fsl_source}`
             : from(fsl_source, { data: this.data }));
     }
-    /** Adopt the FSL's `editor: {}` panel request (fsl#1334): when the machine
+    /**
+     * Adopt the FSL's `editor: {}` panel request (fsl#1334): when the machine
      *  declares `panels`, drive {@link requestedPanels} from it so `request` panel
      *  mode honors the source. The embedder's value persists when the FSL is
-     *  silent. Called after each (re)build, with `_machine` freshly assigned. */
+     *  silent. Called after each (re)build, with `_machine` freshly assigned.
+     */
     _applyEditorConfig() {
         var _a;
         const panels = (_a = this._machine.editor_config()) === null || _a === void 0 ? void 0 : _a.panels;
@@ -1862,7 +1839,7 @@ class FslInstance extends LitElement {
      */
     _discover_jssm_actions() {
         var _a, _b, _c, _d;
-        const inline_targets = Array.from(this.querySelectorAll('[data-jssm-action]')).filter(el => closest_wc(el, 'action') === null);
+        const inline_targets = [...this.querySelectorAll('[data-jssm-action]')].filter(el => closest_wc(el, 'action') === null);
         for (const el of inline_targets) {
             this._install_action_listener({
                 source: el,
@@ -1875,7 +1852,7 @@ class FslInstance extends LitElement {
             });
         }
         const tags = this.querySelectorAll(':scope > fsl-action, :scope > jssm-action');
-        for (const tag of Array.from(tags)) {
+        for (const tag of tags) {
             const selector = tag.getAttribute('selector');
             const action_name = tag.getAttribute('action');
             if (selector === null || action_name === null) {
@@ -1887,7 +1864,7 @@ class FslInstance extends LitElement {
             const prevent_default = tag.hasAttribute('prevent-default');
             const stop_propagation = tag.hasAttribute('stop-propagation');
             const sources = this.querySelectorAll(selector);
-            for (const src of Array.from(sources)) {
+            for (const src of sources) {
                 this._install_action_listener({
                     source: src,
                     event_name,
@@ -1921,9 +1898,9 @@ class FslInstance extends LitElement {
             if (config.from_state !== undefined && this.state() !== config.from_state) {
                 return;
             }
-            const data = config.from_property !== undefined
-                ? config.source[config.from_property]
-                : undefined;
+            const data = config.from_property === undefined
+                ? undefined
+                : config.source[config.from_property];
             this.do(config.action_name, data);
         };
         config.source.addEventListener(config.event_name, handler);
@@ -1943,8 +1920,8 @@ class FslInstance extends LitElement {
     _paint_state_reflection() {
         // Invariant: only called after `connectedCallback` has set `_machine`.
         const m = this._machine;
-        const current_state = String(m.state());
-        const legal_actions = m.list_exit_actions().map(a => String(a)).join(' ');
+        const current_state = m.state();
+        const legal_actions = m.list_exit_actions().map(String).join(' ');
         const is_terminal = m.is_terminal();
         const is_complete = m.is_complete();
         this.setAttribute('current-state', current_state);
@@ -1961,17 +1938,17 @@ class FslInstance extends LitElement {
      * and a state-specific `<slot name="state-...">` that re-targets on each
      * transition.  Fallback content in each slot keeps a bare
      * `<jssm-instance fsl="...">` from rendering as a blank box.
-     *
      * @returns A Lit `TemplateResult` describing the shadow tree.
      */
     render() {
         const state_slot_name = this._machine === undefined
             ? 'state-unknown'
-            : `state-${String(this._machine.state())}`;
+            : `state-${this._machine.state()}`;
         const header = html `
       <header>
         <slot name="title"><span class="placeholder">fsl-instance</span></slot>
-      </header>`;
+      </header>
+    `;
         const viz = html `<slot name="viz"><span class="placeholder">no viz configured</span></slot>`;
         const editor = html `<slot name="editor"></slot>`;
         const toolbar = html `<section class="toolbar"><slot name="toolbar"></slot></section>`;
@@ -2016,16 +1993,17 @@ class FslInstance extends LitElement {
       </div>
     `;
     }
-    /** The stacked middle panels, shared by both layouts. The toolbar slot is
+    /**
+     * The stacked middle panels, shared by both layouts. The toolbar slot is
      *  rendered at the top of {@link render}. In split mode the `hook-log` (events)
      *  and `data-inspector` panels are lifted out into easing side docks, so
      *  `docked` is true there and they are skipped here to avoid duplicating
      *  their slots; `actions` instead lives here as a horizontal bar. The
      *  state-section + footer stay in {@link render} so the dynamic state-slot
      *  name binds at the top level.
-     *
      *  @param docked - True when hook-log + data-inspector are rendered as side
-     *  docks (split layouts); they are then omitted from this stack. */
+     *  docks (split layouts); they are then omitted from this stack.
+     */
     _renderAuxPanels(docked) {
         const h = (slot) => this.isPanelHidden(slot);
         return html `