jssm 5.162.11 → 5.162.13

package/dist/wc/instance.js

@@ -661,6 +661,8 @@ function permalink_key_for(host) {
 
 /** Debounce before a live edit is written to the URL fragment. */
 const PERMALINK_WRITE_DEBOUNCE_MS = 300;
+/** Marks that this connection has not observed its URL segment yet. */
+const UNOBSERVED_SEGMENT = Symbol('unobserved permalink segment');
 /**
  * Binds an `<fsl-instance>` to a segment of the URL fragment: restores from it
  * on connect and writes back (debounced, via `history.replaceState`) whenever
@@ -668,8 +670,12 @@ const PERMALINK_WRITE_DEBOUNCE_MS = 300;
  * returns `null`), so an `fsl-instance` without an `id`/`uhash` never touches
  * `location`.
  *
- * 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.
+ * Echo guard: `_observed` holds this connection's current URL segment, including
+ * explicit absence, so unrelated hash changes and restore→rebuild→write cycles
+ * are no-ops. Async operations share a revision: every observed segment change
+ * or source write invalidates all older work, and disconnecting invalidates all
+ * work. This gives cross-direction latest-operation-wins semantics without
+ * allowing unrelated hash changes to cancel valid writes.
  * @example
  * // In an element's constructor:
  * new FslPermalinkSync(this); // reads <el id="k">'s #k=… on connect, writes it on edit
@@ -677,13 +683,17 @@ const PERMALINK_WRITE_DEBOUNCE_MS = 300;
 class FslPermalinkSync {
     constructor(host) {
         this.key = null;
-        this._last = null;
+        this._observed = UNOBSERVED_SEGMENT;
+        this._connected = false;
+        this._revision = 0;
         this._onRebuilt = () => { this._scheduleWrite(); };
         this._onHashChange = () => { void this._restore(); };
         this.host = host;
         host.addController(this);
     }
+    /** Observe the keyed URL segment and attach synchronization listeners. */
     hostConnected() {
+        this._connected = true;
         this.key = permalink_key_for(this.host);
         if (this.key === null) {
             return;
@@ -692,33 +702,48 @@ class FslPermalinkSync {
         this.host.addEventListener('fsl-machine-rebuilt', this._onRebuilt);
         addEventListener('hashchange', this._onHashChange);
     }
+    /** Invalidate work, forget observations, detach listeners, and cancel timers. */
     hostDisconnected() {
-        if (this.key === null) {
-            return;
+        this._connected = false;
+        this._revision += 1;
+        this._observed = UNOBSERVED_SEGMENT;
+        if (this.key !== null) {
+            this.host.removeEventListener('fsl-machine-rebuilt', this._onRebuilt);
+            removeEventListener('hashchange', this._onHashChange);
         }
-        this.host.removeEventListener('fsl-machine-rebuilt', this._onRebuilt);
-        removeEventListener('hashchange', this._onHashChange);
         if (this._timer !== undefined) {
             clearTimeout(this._timer);
             this._timer = undefined;
         }
     }
-    /** Read our segment and, if new, push it into the host (overriding declared source). */
+    /**
+     * Observe this instance's newest segment and push it into the host. A changed
+     * observation supersedes older restores and writes; an unchanged observation
+     * leaves them valid. Declared source is overridden only when this decode is
+     * still the latest operation and the actual fragment is unchanged after
+     * awaiting it, even when a corresponding hashchange handler is still queued.
+     */
     async _restore() {
-        const segment = read_fragment_param(location.hash, this.key);
-        if (segment === null || segment === this._last) {
+        const key = this.key;
+        const segment = read_fragment_param(location.hash, key);
+        if (segment === this._observed) {
+            return;
+        }
+        this._observed = segment;
+        this._revision += 1;
+        if (segment === null) {
             return;
         }
+        const revision = this._revision;
         try {
             const fsl = await decode_machine(segment);
-            // The decode is async; if the host was disconnected while it ran, drop the
-            // result rather than mutating a detached element (and triggering a stray
-            // rebuild on a later reconnect). A reconnect runs hostConnected → _restore
-            // afresh.
-            if (!this.host.isConnected) {
+            const currentSegment = read_fragment_param(location.hash, key);
+            if (!this._connected ||
+                revision !== this._revision ||
+                key !== this.key ||
+                currentSegment !== segment) {
                 return;
             }
-            this._last = segment;
             this.host.fsl = fsl;
         }
         catch (_a) {
@@ -726,22 +751,43 @@ class FslPermalinkSync {
             // declared source intact. A bad URL never bricks the page.
         }
     }
+    /** Debounce the newest rebuild and immediately supersede older restores or writes. */
     _scheduleWrite() {
+        const revision = this._revision += 1;
         if (this._timer !== undefined) {
             clearTimeout(this._timer);
         }
-        this._timer = setTimeout(() => { void this._write(); }, PERMALINK_WRITE_DEBOUNCE_MS);
+        this._timer = setTimeout(() => {
+            this._timer = undefined;
+            void this._write(revision);
+        }, PERMALINK_WRITE_DEBOUNCE_MS);
     }
-    /** Encode the current source and merge it into the fragment, history-silently. */
-    async _write() {
+    /**
+     * Encode the scheduled source and merge it into the fragment only when no
+     * newer source write, observed segment change, or disconnect superseded it.
+     * The actual fragment must also match the observation captured before the
+     * await, covering URL changes whose hashchange handler is still queued. A
+     * successful write becomes the current observation, preventing echo work.
+     */
+    async _write(revision) {
+        const key = this.key;
+        const fsl = this.host.fsl;
+        const observed = this._observed;
         try {
-            const segment = await encode_machine(this.host.fsl);
-            if (segment === this._last) {
+            const segment = await encode_machine(fsl);
+            const currentSegment = read_fragment_param(location.hash, key);
+            if (!this._connected ||
+                revision !== this._revision ||
+                key !== this.key ||
+                currentSegment !== observed) {
+                return;
+            }
+            if (segment === observed) {
                 return;
             }
-            this._last = segment;
-            const fragment = set_fragment_param(location.hash, this.key, segment);
+            const fragment = set_fragment_param(location.hash, key, segment);
             history.replaceState(history.state, '', `#${fragment}`);
+            this._observed = segment;
         }
         catch (_a) {
             // No compression support: skip the write rather than throw.

package/dist/wc/viz.js

@@ -1,7 +1,7 @@
 import { css, LitElement, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { machine_to_svg_string, fsl_to_svg_string } from 'jssm/viz';
+import { machine_to_svg_string, fsl_to_svg_string, slug_for } from 'jssm/viz';
 
 /**
  * Shared helpers for the dual-prefix (`fsl-` canonical, `jssm-` synonym)
@@ -137,6 +137,7 @@ function normalize_viz_error(e) {
  *      supplying it emits a `console.warn` for developer feedback.
  * @element fsl-viz
  * @cssproperty [--jssm-viz-min-height=100px] - Minimum height of the rendered SVG container.
+ * @cssproperty [--jssm-viz-max-height=none] - Maximum height of the control; the rendered SVG stays bounded (aspect preserved, letterboxed) within it. Equivalent to setting `max-height` on the host from outside, without shadow surgery.
  * @fires {CustomEvent<{ message: string; location?: unknown }>} viz-error - Fires when the FSL source fails to parse or render.
  */
 class FslViz extends LitElement {
@@ -377,15 +378,27 @@ class FslViz extends LitElement {
      * Programmatically highlights one execution trace (a path of state names)
      * through the rendered graph, optionally fading everything off the path.
      *
-     * Matches nodes by their Graphviz `<title>` (the state name) and edges by
-     * the `from->to` title Graphviz emits, applying inline style overrides so
-     * the highlight composes over — and is reversible against — the default
-     * rendering (see {@link clearHighlights}, which this calls first). No-ops
-     * when detached, before the first render, or given an empty trace.
+     * Matches nodes by their Graphviz `<title>` and edges by the `from->to`
+     * title Graphviz emits, applying inline style overrides so the highlight
+     * composes over — and is reversible against — the default rendering (see
+     * {@link clearHighlights}, which this calls first). No-ops when detached,
+     * before the first render, or given an empty trace.
+     *
+     * Because dot generation slugs state names into node identifiers (fsl#1935
+     * — `'Wrong Pin'` renders with `<title>wrong-pin</title>`), each trace name
+     * is matched in **both** its raw form and its slugged form, using the same
+     * `slug_for` the dot generator uses. Display names (`'Red'`, `'Wrong Pin'`,
+     * `'Röd'`) and already-slug-form names (`'red'`, `'wrong-pin'`) therefore
+     * both work. Names whose slug is empty (e.g. `'!!!'`, which renders under
+     * an indexed `node-N` title) are only matchable by passing that literal
+     * `node-N` title.
      *
      * ```typescript
      * // Highlight a -> b -> c in green, without dimming the rest:
      * viz.highlightTrace(['a', 'b', 'c'], { color: '#2e7d32', fadeOthers: false });
+     *
+     * // Display-form names match their slugged titles:
+     * viz.highlightTrace(['Wrong Pin', 'Alarm']);   // titles wrong-pin, alarm
      * ```
      * @param trace   Ordered state names describing the path (e.g.
      *                `['A', 'B', 'C']`). Consecutive pairs select the edges
@@ -408,10 +421,26 @@ class FslViz extends LitElement {
         const fadeOthers = options.fadeOthers !== false; // default: true — undefined must fade
         const targetNodes = new Set();
         const targetEdges = new Set();
-        for (let i = 0; i < trace.length; i++) {
-            targetNodes.add(trace[i]);
+        // fsl#1935: dot generation slugs state names for node identity (see
+        // slug_for in jssm_viz.ts), so rendered <title>s carry 'wrong-pin', not
+        // 'Wrong Pin'. Match each trace name in both raw and slugged forms; for
+        // names already in slug form the two coincide, preserving old behavior.
+        const title_forms_of = (name) => {
+            const slug = slug_for(name);
+            return (slug !== '' && slug !== name) ? [name, slug] : [name];
+        };
+        for (const [i, name] of trace.entries()) {
+            const from_forms = title_forms_of(name);
+            for (const form of from_forms) {
+                targetNodes.add(form);
+            }
             if (i < trace.length - 1) {
-                targetEdges.add(`${trace[i]}->${trace[i + 1]}`);
+                const to_forms = title_forms_of(trace[i + 1]);
+                for (const from_form of from_forms) {
+                    for (const to_form of to_forms) {
+                        targetEdges.add(`${from_form}->${to_form}`);
+                    }
+                }
             }
         }
         const allNodes = container.querySelectorAll('.node');
@@ -461,10 +490,18 @@ FslViz.styles = css `
     :host {
       display: block;
       min-height: var(--jssm-viz-min-height, 100px);
+      /* #1934: embedder sizing seam — cap the control via the custom property
+         (or plain external max-height on the host) without shadow surgery. */
+      max-height: var(--jssm-viz-max-height, none);
     }
     .container {
       width: 100%;
       height: 100%;
+      /* #1934: when the host's height is auto (content-driven under an
+         external max-height cap), the percentage heights below collapse to
+         auto and stop constraining anything. Inheriting the host's computed
+         max-height re-threads the cap down to the svg. */
+      max-height: inherit;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -475,6 +512,14 @@ FslViz.styles = css `
          the 90% box centered in the flex container yields the 5% inset. */
       width: 90%;
       height: 90%;
+      /* #1934: with an auto-height host the 90% height collapses and the svg
+         falls back to ratio-derived (or intrinsic pt) sizing, which can run
+         far past an external max-height on the host. The inherited cap keeps
+         that fallback bounded; Graphviz SVGs carry viewBox + the default
+         preserveAspectRatio, so the capped viewport letterboxes cleanly
+         instead of distorting. */
+      max-width: 100%;
+      max-height: inherit;
     }
 
     /* Smoothly animate the inline style overrides applied by highlightTrace()

package/dist/wc/widgets.define.js

@@ -1,4 +1,4 @@
-import { FslToolbar, FslActions, FslFooter, FslHelp, FslHistory, FslDataInspector, FslHookLog, FslSimulation, FslExport, FslStochastic } from './widgets.js';
+import { FslToolbar, FslActions, FslFooter, FslHelp, FslHistory, FslDataInspector, FslHookLog, FslSimulation, FslExport, FslStochastic, FslInfoPanel } from './widgets.js';
 export * from './widgets.js';
 
 /**
@@ -45,7 +45,8 @@ function define_canonical(canonical_tag, CanonicalClass) {
 
 /**
  * Bundle entry: registers the entire light fsl-* widget suite (toolbar, actions,
- * footer, help, history, data-inspector, hook-log, simulation, export, stochastic) in one import.
+ * footer, help, history, data-inspector, hook-log, simulation, export, stochastic,
+ * info-panel) in one import.
  * Canonical `fsl-*` tags only — no deprecated `jssm-*` synonyms. Registration
  * is idempotent, so this composes safely with the per-widget `*.define` modules.
  */
@@ -59,3 +60,4 @@ define_canonical('fsl-hook-log', FslHookLog);
 define_canonical('fsl-simulation', FslSimulation);
 define_canonical('fsl-export', FslExport);
 define_canonical('fsl-stochastic', FslStochastic);
+define_canonical('fsl-info-panel', FslInfoPanel);