jssm 5.149.2 → 5.150.1

package/dist/wc/instance.js

@@ -908,8 +908,20 @@ class FslInstance extends LitElement {
         this._autoMode = 'lr';
         /** Window-resize listener installed while `layout="auto"`, or null. */
         this._autoListener = null;
-        /** Slot names of panels currently hidden (driven by `<fsl-toolbar>`). */
-        this._hiddenPanels = new Set();
+        /** 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
+         *  per panel. `default` shows only the editor + renderer; every other panel
+         *  starts hidden and is opt-in. */
+        this.panelMode = 'default';
+        /** 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
+         *  editor-defaults-in-FSL mechanism (fsl#1334). `request`-mode panels listed
+         *  here are shown; others fall back to the default. */
+        this.requestedPanels = [];
         /**
          * The underlying machine instance, constructed at `connectedCallback`.
          * Exposed raw (not proxied) per the #639/#648 design decision so that
@@ -1102,39 +1114,67 @@ class FslInstance extends LitElement {
         this._tab = tab;
         this.requestUpdate();
     }
+    /** The built-in default hidden state: only the editor + renderer (viz) show. */
+    _defaultHidden(slot) {
+        return slot !== 'viz' && slot !== 'editor';
+    }
     /**
-     * Whether the panel slotted under `slot` is currently hidden.
+     * Whether the panel slotted under `slot` is currently hidden, resolving its
+     * {@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
      */
     isPanelHidden(slot) {
-        return this._hiddenPanels.has(slot);
+        var _a;
+        const mode = (_a = this.panelModes[slot]) !== null && _a !== void 0 ? _a : this.panelMode;
+        if (mode === 'hide') {
+            return true;
+        }
+        if (mode === 'show') {
+            return false;
+        }
+        const override = this._overrides.get(slot);
+        if (override !== undefined) {
+            return override;
+        }
+        if (mode === 'request' && this.requestedPanels.includes(slot)) {
+            return false;
+        }
+        return this._defaultHidden(slot);
     }
     /**
-     * Show or hide the panel slotted under `slot`. Hiding `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.
+     * Show or hide the panel slotted under `slot` (a runtime override). Hiding
+     * `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.
      */
     setPanelHidden(slot, hidden) {
-        if (hidden) {
-            this._hiddenPanels.add(slot);
-        }
-        else {
-            this._hiddenPanels.delete(slot);
-        }
+        this._overrides.set(slot, hidden);
         this.requestUpdate();
     }
     /**
-     * Toggle the visibility of the panel slotted under `slot`.
+     * 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) {
-        this.setPanelHidden(slot, !this._hiddenPanels.has(slot));
+        var _a;
+        const mode = (_a = this.panelModes[slot]) !== null && _a !== void 0 ? _a : this.panelMode;
+        if (mode === 'hide' || mode === 'show') {
+            return;
+        }
+        this.setPanelHidden(slot, !this.isPanelHidden(slot));
     }
     /**
      * Install or remove the window-resize listener that resolves `layout="auto"`
@@ -1181,6 +1221,7 @@ class FslInstance extends LitElement {
         // (The resolver guarantees `fsl` is a non-empty string when error is undefined.)
         const fsl_source = resolved.fsl;
         this._machine = this._build_machine(fsl_source);
+        this._applyEditorConfig();
         // Step 3: paint initial host attributes + CSS custom properties.
         this._paint_state_reflection();
         // Step 4: shadow DOM render is automatic via Lit; requesting an update
@@ -1352,6 +1393,17 @@ 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
+     *  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. */
+    _applyEditorConfig() {
+        var _a;
+        const panels = (_a = this._machine.editor_config()) === null || _a === void 0 ? void 0 : _a.panels;
+        if (panels !== undefined) {
+            this.requestedPanels = panels;
+        }
+    }
     _rebuild_machine() {
         if (typeof this.fsl !== 'string' || this.fsl.trim().length === 0) {
             return;
@@ -1367,6 +1419,7 @@ class FslInstance extends LitElement {
         this._unbind_machine_subscriptions();
         // Swap to the new machine and re-bind everything machine-scoped.
         this._machine = next;
+        this._applyEditorConfig();
         this._paint_state_reflection();
         this._install_event_reemission();
         this._install_declarative_hooks();
@@ -1592,10 +1645,10 @@ class FslInstance extends LitElement {
           ${header}
           ${toolbar}
           <div class="middle">
-            <section class="dock actions-dock${this._hiddenPanels.has('actions') ? '' : ' open'}" part="actions-dock">
-              <slot name="actions"></slot>
+            <section class="dock events-dock${this.isPanelHidden('hook-log') ? '' : ' open'}" part="events-dock">
+              <slot name="hook-log"></slot>
             </section>
-            <div class="workbench${this._hiddenPanels.has('viz') ? ' hide-viz' : ''}${this._hiddenPanels.has('editor') ? ' hide-editor' : ''}"
+            <div class="workbench${this.isPanelHidden('viz') ? ' hide-viz' : ''}${this.isPanelHidden('editor') ? ' hide-editor' : ''}"
                  data-mode=${mode} style="--fsl-split:${this._split}%">
               ${mode === 'tabs' ? this._renderTabbar() : ''}
               <section class="pane viz" ?hidden=${mode === 'tabs' && this._tab !== 'viz'}>${viz}</section>
@@ -1604,7 +1657,7 @@ class FslInstance extends LitElement {
                    @dblclick=${this._onGutterReset}></div>
               <section class="pane editor" ?hidden=${mode === 'tabs' && this._tab !== 'editor'}>${editor}</section>
             </div>
-            <section class="dock data-dock${this._hiddenPanels.has('data-inspector') ? '' : ' open'}" part="data-dock">
+            <section class="dock data-dock${this.isPanelHidden('data-inspector') ? '' : ' open'}" part="data-dock">
               <slot name="data-inspector"></slot>
             </section>
           </div>
@@ -1618,8 +1671,8 @@ class FslInstance extends LitElement {
       <div class="container">
         ${header}
         ${toolbar}
-        <section class="viz" ?hidden=${this._hiddenPanels.has('viz')}>${viz}</section>
-        <section class="editor" ?hidden=${this._hiddenPanels.has('editor')}>${editor}</section>
+        <section class="viz" ?hidden=${this.isPanelHidden('viz')}>${viz}</section>
+        <section class="editor" ?hidden=${this.isPanelHidden('editor')}>${editor}</section>
         ${this._renderAuxPanels(false)}
         <section class="state-section"><slot name=${state_slot_name}></slot></section>
         <footer><slot name="footer"></slot></footer>
@@ -1627,22 +1680,23 @@ class FslInstance extends LitElement {
     `;
     }
     /** The stacked middle panels, shared by both layouts. The toolbar slot is
-     *  rendered at the top of {@link render}. In split mode the `actions` and
-     *  `data-inspector` panels are lifted out into easing side docks, so
+     *  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. The state-section + footer stay in {@link render} so the
-     *  dynamic state-slot name binds at the top level.
+     *  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 actions + data-inspector are rendered as side
+     *  @param docked - True when hook-log + data-inspector are rendered as side
      *  docks (split layouts); they are then omitted from this stack. */
     _renderAuxPanels(docked) {
-        const h = (slot) => this._hiddenPanels.has(slot);
+        const h = (slot) => this.isPanelHidden(slot);
         return html `
-      ${docked ? '' : html `<section class="actions" ?hidden=${h('actions')}><slot name="actions"></slot></section>`}
+      <section class="actions" ?hidden=${h('actions')}><slot name="actions"></slot></section>
       <section class="info-panel" ?hidden=${h('info-panel')}><slot name="info-panel"></slot></section>
       <section class="history" ?hidden=${h('history')}><slot name="history"></slot></section>
       ${docked ? '' : html `<section class="data-inspector" ?hidden=${h('data-inspector')}><slot name="data-inspector"></slot></section>`}
-      <section class="hook-log" ?hidden=${h('hook-log')}><slot name="hook-log"></slot></section>
+      ${docked ? '' : html `<section class="hook-log" ?hidden=${h('hook-log')}><slot name="hook-log"></slot></section>`}
       <section class="effective-properties" ?hidden=${h('effective-properties')}><slot name="effective-properties"></slot></section>
       <section class="simulation" ?hidden=${h('simulation')}><slot name="simulation"></slot></section>
       <section class="export" ?hidden=${h('export')}><slot name="export"></slot></section>
@@ -1682,7 +1736,7 @@ FslInstance.styles = css `
 
     /* layout modes: lr/rl (row) · tb/bt (column) · editor/viewer (single) · tabs. */
     .container.is-split { display: flex; flex-direction: column; }
-    /* the middle band: actions dock | workbench | data dock */
+    /* the middle band: events dock | workbench | data dock */
     .middle { display: flex; flex: 1 1 auto; min-height: 0; }
     .workbench { display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; }
     /* side docks ease their width like the help drawer; closed = 0, open = a
@@ -1693,7 +1747,7 @@ FslInstance.styles = css `
       transition: flex-basis 0.28s ease;
     }
     .dock.open { flex-basis: var(--fsl-dock-width, 17em); }
-    .actions-dock.open { border-right: 1px solid var(--fsl-color-border, #e5e5e5); }
+    .events-dock.open { border-right: 1px solid var(--fsl-color-border, #e5e5e5); }
     .data-dock.open    { border-left: 1px solid var(--fsl-color-border, #e5e5e5); }
     /* a docked panel fills the band's height; the data inspector then scrolls
        to the dock instead of its own 16em cap. */
@@ -1774,6 +1828,9 @@ FslInstance.properties = {
     themeName: { type: String, attribute: 'theme-name', reflect: true },
     themes: { type: Object, reflect: false },
     data: { type: Object, reflect: false },
+    panelMode: { type: String, attribute: 'panel-mode', reflect: true },
+    panelModes: { type: Object, attribute: false },
+    requestedPanels: { type: Array, attribute: false },
 };
 
 export { FslInstance, JSSM_ON_EVENT_NAMES, auto_mode, compile_inline_body, jssm_handler_registry, parse_jssm_on_element, resolve_fsl_source, resolve_named_handler, split_ratio };

package/dist/wc/widgets.js

@@ -95,7 +95,42 @@ const EXPORT_FORMATS = [
     { value: 'json', label: 'JSON (serialized)' },
     { value: 'fsl', label: 'FSL source' },
     { value: 'svg', label: 'SVG' },
+    { value: 'permalink', label: 'Permalink (URL)' },
+    { value: 'embed', label: 'Embed snippet' },
 ];
+/**
+ * A shareable URL for the given FSL: the current page URL with the source
+ * encoded in the hash (`#fsl=...`). A page that reads the hash on load can
+ * restore the machine. Browser-only (uses `location`), like the rest of the
+ * toolbar.
+ *
+ * @example
+ * permalink_for("a -> b;"); // "https://host/path#fsl=a%20-%3E%20b%3B"
+ */
+function permalink_for(fsl) {
+    return `${location.href.split('#')[0]}#fsl=${encodeURIComponent(fsl)}`;
+}
+/**
+ * A paste-able HTML snippet that renders the given FSL from the CDN builds: an
+ * `<fsl-instance>` reading its source from a `<script type="text/fsl">` child,
+ * with a slotted `<fsl-viz>` for the graph.
+ *
+ * @example
+ * embed_snippet_for("a -> b;"); // "<script …instance.js …><fsl-instance>…</fsl-instance>"
+ */
+function embed_snippet_for(fsl) {
+    const CDN = 'https://cdn.jsdelivr.net/npm/jssm/dist/cdn';
+    return [
+        `<script type="module" src="${CDN}/instance.js"></script>`,
+        `<script type="module" src="${CDN}/viz.js"></script>`,
+        '<fsl-instance>',
+        '  <fsl-viz slot="viz"></fsl-viz>',
+        '  <script type="text/fsl">',
+        fsl,
+        '  </script>',
+        '</fsl-instance>',
+    ].join('\n');
+}
 /* Panel icons — Solar (CC BY 4.0) bold-duotone. Layout icons — hand-drawn
    duotone split-rects. All use currentColor (+ baked opacity on the secondary
    tone), so they theme with the button's text color and pressed state. Each is
@@ -121,6 +156,9 @@ const ICON_AUTO = html `<svg class="ico" viewBox="0 0 24 24" aria-hidden="true">
 const ICON_ACTIONS = html `<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M8.732 5.771L5.67 9.914c-1.285 1.739-1.928 2.608-1.574 3.291l.018.034c.375.673 1.485.673 3.704.673c1.233 0 1.85 0 2.236.363l.02.02l3.872-4.57l-.02-.02c-.379-.371-.379-.963-.379-2.148v-.31c0-3.285 0-4.927-.923-5.21s-1.913 1.056-3.892 3.734" clip-rule="evenodd"/><path fill="currentColor" d="M10.453 16.443v.31c0 3.284 0 4.927.923 5.21s1.913-1.056 3.893-3.734l3.062-4.143c1.284-1.739 1.927-2.608 1.573-3.291l-.018-.034c-.375-.673-1.485-.673-3.704-.673c-1.233 0-1.85 0-2.236-.363l-3.872 4.57c.379.371.379.963.379 2.148" opacity=".5"/></svg>`;
 /* Solar palette-round-bold-duotone — the theme pulldown. */
 const ICON_THEME = html `<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M7 18a1 1 0 1 1-2 0a1 1 0 0 1 2 0"/><path fill="currentColor" d="M10 6v12a4 4 0 0 1-8 0V6a4 4 0 1 1 8 0" opacity=".4"/><path fill="currentColor" d="m9.248 20.336l3.974-3.975l5.838-6.09a4.042 4.042 0 0 0-5.776-5.655L10 7.9V18c0 .872-.279 1.679-.752 2.336" opacity=".7"/><path fill="currentColor" d="m13.222 16.362l-3.974 3.974A4 4 0 0 1 6 22h11.9a4 4 0 1 0 0-8h-2.414z"/></svg>`;
+/* Validate — a duotone check-circle. Lint — a duotone document with rule lines. */
+const ICON_VALIDATE = html `<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".4"/><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" d="m8.5 12.5l2.5 2.5l4.5-5.5"/></svg>`;
+const ICON_LINT = html `<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M3 10c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h2c3.771 0 5.657 0 6.828 1.172S21 6.229 21 10v4c0 3.771 0 5.657-1.172 6.828S16.771 22 13 22h-2c-3.771 0-5.657 0-6.828-1.172S3 17.771 3 14z" opacity=".4"/><path fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" d="M7.5 8.5h9M7.5 12h6M7.5 15.5h3"/></svg>`;
 const PANELS = [
     { slot: 'actions', label: 'Actions', icon: ICON_ACTIONS },
     { slot: 'viz', label: 'Renderer', icon: ICON_VIZ },
@@ -144,11 +182,13 @@ const LAYOUTS = [
     { value: 'tabs', label: 'Tabbed', icon: ICON_TABS },
 ];
 /**
- * `<fsl-toolbar>` — a control bar for a parent `<fsl-instance>`. A light/dark
- * theme toggle on the left; on the right, an icon toggle to show/hide each
- * panel present in the host (renderer, code, history, …) plus a View menu of
- * the layout set (its button shows the current layout's icon). Standalone (no
- * host) the panel toggles disappear. A trailing slot carries extra buttons.
+ * `<fsl-toolbar>` — a control bar for a parent `<fsl-instance>`. Validate + Lint
+ * action buttons (fired as `fsl-validate` / `fsl-lint` events for the embedder
+ * to fulfill, each suppressible via `no-validate` / `no-lint`); an icon toggle
+ * to show/hide each panel present in the host (renderer, code, history, …); and
+ * Layout / Export / Theme pulldowns (the Layout button shows the current
+ * layout's icon). Standalone (no host) the host-dependent controls disappear.
+ * A trailing slot carries extra buttons.
  *
  * @element fsl-toolbar
  * @csspart toolbar - The bar container.
@@ -166,6 +206,10 @@ class FslToolbar extends LitElement {
          * The embedder sets this after fulfilling a `pick` export.
          */
         this.lastDirectory = '';
+        /** Hide the Validate button (e.g. when the consumer validates inline). */
+        this.noValidate = false;
+        /** Hide the Lint button. */
+        this.noLint = false;
         this._host = null;
         /** Panels actually present in the host — one toggle each. */
         this._present = [];
@@ -218,11 +262,24 @@ class FslToolbar extends LitElement {
         else if (format === 'svg') {
             content = await machine_to_svg_string(host.machine);
         }
+        else if (format === 'permalink') {
+            content = permalink_for(host.fsl);
+        }
+        else if (format === 'embed') {
+            content = embed_snippet_for(host.fsl);
+        }
         else {
             content = host.fsl;
         }
         this.dispatchEvent(new CustomEvent('fsl-export', { detail: { format, content, destination }, bubbles: true, composed: true }));
     }
+    /** Fire a workspace-action intent (validate / lint) for the consumer to
+     *  fulfill — the toolbar presents the action; the embedder runs it. The
+     *  current machine source rides along in the detail as a convenience. The
+     *  buttons only render with a host, so `_host` is non-null here. */
+    _fireAction(type) {
+        this.dispatchEvent(new CustomEvent(type, { detail: { fsl: this._host.fsl }, bubbles: true, composed: true }));
+    }
     _toggleMenu(which) { this._openMenu = this._openMenu === which ? '' : which; }
     render() {
         var _a, _b, _c, _d, _e;
@@ -235,6 +292,13 @@ class FslToolbar extends LitElement {
         return html `
       <div class="toolbar" part="toolbar" role="toolbar" aria-label="Workbench controls">
         <span class="spacer"></span>
+        ${host ? html `
+          <div class="grp">
+            ${this.noValidate ? '' : html `
+              <button class="tb icon" aria-label="Validate" title="Validate" @click=${() => this._fireAction('fsl-validate')}>${ICON_VALIDATE}</button>`}
+            ${this.noLint ? '' : html `
+              <button class="tb icon" aria-label="Lint" title="Lint" @click=${() => this._fireAction('fsl-lint')}>${ICON_LINT}</button>`}
+          </div>` : ''}
         <div class="grp">
           ${host
             ? this._present.map(p => html `
@@ -336,6 +400,12 @@ __decorate$7([
 __decorate$7([
     property({ attribute: false })
 ], FslToolbar.prototype, "lastDirectory", void 0);
+__decorate$7([
+    property({ type: Boolean, attribute: 'no-validate' })
+], FslToolbar.prototype, "noValidate", void 0);
+__decorate$7([
+    property({ type: Boolean, attribute: 'no-lint' })
+], FslToolbar.prototype, "noLint", void 0);
 
 var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -465,18 +535,21 @@ class FslActions extends LitElement {
 }
 FslActions.styles = css `
     :host { display: block; }
+    /* Horizontal bar: groups flow left-to-right and wrap; within a group the
+       label sits inline before its buttons. Suits the panel's home below the
+       workbench rather than a tall side dock. */
     .actions {
-      display: flex; flex-direction: column; gap: 0.7rem;
+      display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem;
       padding: 0.55rem 0.65rem; background: var(--_fsl-surface);
       color: var(--_fsl-text); font: 0.8rem var(--_fsl-font);
     }
-    .group { display: flex; flex-direction: column; gap: 0.3rem; }
+    .group { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
     .label {
       font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
-      color: var(--_fsl-muted);
+      color: var(--_fsl-muted); white-space: nowrap;
     }
     button {
-      text-align: left; padding: 0.4rem 0.6rem; cursor: pointer; border-radius: 4px;
+      text-align: center; padding: 0.4rem 0.6rem; cursor: pointer; border-radius: 4px;
       border: 1px solid var(--_fsl-border); background: var(--_fsl-surface);
       color: var(--_fsl-text); font: 600 0.8rem var(--_fsl-font);
     }
@@ -503,15 +576,23 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+/** `<n> word`, with a regular plural `s` unless `n === 1`. */
+function plural(n, word) {
+    return `${n} ${word}${n === 1 ? '' : 's'}`;
+}
 /**
  * `<fsl-footer>` — a status bar for a parent `<fsl-instance>`.
  *
- * Reflects the host's current state, legal-action count, and
- * terminal/complete status by observing the host's reflected attributes
- * (`current-state`, `legal-actions`, `terminal`, `complete`) — so it tracks
- * transitions *and* survives a live machine rebuild (#1387) without a machine
- * subscription. A default slot carries embedder status (line/column, parse
- * state, …). Standalone (no `<fsl-instance>` ancestor) it renders just the slot.
+ * Shows the current state with both **local** counts (actions firable from
+ * here + transitions out of here) and **global** machine counts: distinct
+ * action *names*, **action-starts** (action-bearing edges — each place an
+ * action fires from), and total transitions. Plus terminal/complete badges.
+ *
+ * Local counts track transitions by observing the host's reflected
+ * `current-state` / `legal-actions` attributes; the global counts refresh on
+ * `fsl-machine-rebuilt`, so the footer survives a live rebuild (#1387). A
+ * default slot carries embedder status. Standalone (no `<fsl-instance>`
+ * ancestor) it renders just the slot.
  *
  * @element fsl-footer
  * @csspart bar - The footer bar container.
@@ -521,14 +602,21 @@ class FslFooter extends LitElement {
     constructor() {
         super(...arguments);
         this._state = '';
-        this._actions = 0;
+        this._actions = 0; // local: actions firable from the current state
+        this._transitions = 0; // local: transitions out of the current state
         this._terminal = false;
         this._complete = false;
+        this._gActions = 0; // global: distinct action names
+        this._gStarts = 0; // global: action-starts (action-bearing edges)
+        this._gTransitions = 0; // global: total transitions (all edges)
         this._observer = null;
+        this._host = null;
+        this._onRebuilt = () => { this._syncMachine(); };
     }
     connectedCallback() {
         super.connectedCallback();
         const host = closest_wc(this, 'instance');
+        this._host = host;
         if (host === null) {
             return;
         }
@@ -539,12 +627,14 @@ class FslFooter extends LitElement {
             this._actions = la === '' ? 0 : la.split(/\s+/).length;
             this._terminal = host.hasAttribute('terminal');
             this._complete = host.hasAttribute('complete');
+            this._syncMachine();
         };
         this._observer = new MutationObserver(sync);
         this._observer.observe(host, {
             attributes: true,
             attributeFilter: ['current-state', 'legal-actions', 'terminal', 'complete'],
         });
+        host.addEventListener('fsl-machine-rebuilt', this._onRebuilt);
         sync();
     }
     disconnectedCallback() {
@@ -553,12 +643,29 @@ class FslFooter extends LitElement {
             this._observer.disconnect();
             this._observer = null;
         }
+        if (this._host !== null) {
+            this._host.removeEventListener('fsl-machine-rebuilt', this._onRebuilt);
+            this._host = null;
+        }
+    }
+    /** Recompute the machine-derived counts: local transitions out of the current
+     *  state, and the global action / action-start / transition totals. Only
+     *  called while a host is attached, so `_host` is non-null here. */
+    _syncMachine() {
+        var _a;
+        const host = this._host;
+        const current = (_a = host.getAttribute('current-state')) !== null && _a !== void 0 ? _a : '';
+        const edges = host.machine.list_edges();
+        this._transitions = edges.filter(e => String(e.from) === current).length;
+        const actionEdges = edges.filter(e => typeof e.action === 'string');
+        this._gStarts = actionEdges.length;
+        this._gActions = new Set(actionEdges.map(e => e.action)).size;
+        this._gTransitions = edges.length;
     }
     render() {
         return html `
       <div class="bar" part="bar">
-        ${this._state ? html `<span class="state">${this._state}</span>` : ''}
-        <span>${this._actions} action${this._actions === 1 ? '' : 's'}</span>
+        <span>${this._state ? html `<span class="state">${this._state}</span>, ` : ''}${plural(this._actions, 'action')}, ${plural(this._transitions, 'transition')}; globally ${plural(this._gActions, 'action')}, ${plural(this._gStarts, 'start')}, ${plural(this._gTransitions, 'transition')}</span>
         ${this._terminal ? html `<span class="badge">terminal</span>` : ''}
         ${this._complete ? html `<span class="badge">complete</span>` : ''}
         <span class="spacer"></span>
@@ -585,12 +692,24 @@ __decorate$5([
 __decorate$5([
     state()
 ], FslFooter.prototype, "_actions", void 0);
+__decorate$5([
+    state()
+], FslFooter.prototype, "_transitions", void 0);
 __decorate$5([
     state()
 ], FslFooter.prototype, "_terminal", void 0);
 __decorate$5([
     state()
 ], FslFooter.prototype, "_complete", void 0);
+__decorate$5([
+    state()
+], FslFooter.prototype, "_gActions", void 0);
+__decorate$5([
+    state()
+], FslFooter.prototype, "_gStarts", void 0);
+__decorate$5([
+    state()
+], FslFooter.prototype, "_gTransitions", void 0);
 
 var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/jssm.es5.d.cts

@@ -515,6 +515,15 @@ declare type JssmBaseTheme = {
  *  @typeParam StateType - The state-name type (usually `string`).
  *  @typeParam DataType  - The user-supplied data payload type (`mDT`).
  */
+/**
+ *  Editor/panel defaults an FSL machine declares in an `editor: {}` block
+ *  (fsl#1334), read by the all-widgets web control: a stochastic run-count
+ *  and the panels the machine requests under `request` panel mode.
+ */
+declare type JssmEditorConfig = {
+    stochastic_run_count?: number;
+    panels?: Array<string>;
+};
 declare type JssmGenericConfig<StateType, DataType> = {
     graph_layout?: JssmLayout;
     complete?: Array<StateType>;
@@ -544,6 +553,7 @@ declare type JssmGenericConfig<StateType, DataType> = {
     min_exits?: number;
     max_exits?: number;
     allow_islands?: JssmAllowIslands;
+    editor_config?: JssmEditorConfig;
     allow_force?: false;
     actions?: JssmPermittedOpt;
     simplify_bidi?: boolean;
@@ -2044,6 +2054,7 @@ declare class Machine<mDT> {
     _code_allows_override: JssmAllowsOverride;
     _config_allows_override: JssmAllowsOverride;
     _allow_islands: JssmAllowIslands;
+    _editor_config?: JssmEditorConfig;
     _post_hooks: Map<number, HookHandler<mDT>>;
     _post_named_hooks: Map<number, Map<number, HookHandler<mDT>>>;
     _post_entry_hooks: Map<number, HookHandler<mDT>>;
@@ -2093,7 +2104,7 @@ declare class Machine<mDT> {
     _firing_error: boolean;
     _boundary_depth: number;
     _boundary_depth_limit: number;
-    constructor({ start_states, end_states, failed_outputs, initial_state, start_states_no_enforce, complete, transitions, machine_author, machine_comment, machine_contributor, machine_definition, machine_language, machine_license, machine_name, machine_version, npm_name, default_size, state_declaration, property_definition, state_property, fsl_version, dot_preamble, arrange_declaration, arrange_start_declaration, arrange_end_declaration, theme, flow, graph_layout, instance_name, history, boundary_depth_limit, data, default_state_config, default_active_state_config, default_hooked_state_config, default_terminal_state_config, default_start_state_config, default_end_state_config, default_transition_config, default_graph_config, group_registry, group_metadata, group_hooks, state_hooks, allows_override, config_allows_override, allow_islands, rng_seed, time_source, timeout_source, clear_timeout_source }: JssmGenericConfig<StateType, mDT>);
+    constructor({ start_states, end_states, failed_outputs, initial_state, start_states_no_enforce, complete, transitions, machine_author, machine_comment, machine_contributor, machine_definition, machine_language, machine_license, machine_name, machine_version, npm_name, default_size, state_declaration, property_definition, state_property, fsl_version, dot_preamble, arrange_declaration, arrange_start_declaration, arrange_end_declaration, theme, flow, graph_layout, instance_name, history, boundary_depth_limit, data, default_state_config, default_active_state_config, default_hooked_state_config, default_terminal_state_config, default_start_state_config, default_end_state_config, default_transition_config, default_graph_config, group_registry, group_metadata, group_hooks, state_hooks, allows_override, config_allows_override, allow_islands, editor_config, rng_seed, time_source, timeout_source, clear_timeout_source }: JssmGenericConfig<StateType, mDT>);
     /********
      *
      *  Internal method for fabricating states.  Not meant for external use.
@@ -2521,6 +2532,17 @@ declare class Machine<mDT> {
      *  @returns The machine name string.
      */
     machine_name(): string;
+    /** The editor/panel defaults declared in the FSL `editor: {}` block, or
+     *  `undefined` when none was given.  Read by the all-widgets web control
+     *  (fsl#1334) — `panels` drives `request` panel mode.
+     *
+     *  @returns `{ stochastic_run_count?, panels? }`, or `undefined`.
+     *
+     *  @example
+     *    const m = sm`editor: { panels: [history]; }; a -> b;`;
+     *    m.editor_config();  // => { panels: ['history'] }
+     */
+    editor_config(): JssmEditorConfig | undefined;
     /** Get the npm package name associated with the machine.  Set via the FSL `npm_name` directive.
      *  Returns `undefined` when not present.
      *  @returns The npm package name string, or `undefined`.

package/jssm.es6.d.ts

@@ -515,6 +515,15 @@ declare type JssmBaseTheme = {
  *  @typeParam StateType - The state-name type (usually `string`).
  *  @typeParam DataType  - The user-supplied data payload type (`mDT`).
  */
+/**
+ *  Editor/panel defaults an FSL machine declares in an `editor: {}` block
+ *  (fsl#1334), read by the all-widgets web control: a stochastic run-count
+ *  and the panels the machine requests under `request` panel mode.
+ */
+declare type JssmEditorConfig = {
+    stochastic_run_count?: number;
+    panels?: Array<string>;
+};
 declare type JssmGenericConfig<StateType, DataType> = {
     graph_layout?: JssmLayout;
     complete?: Array<StateType>;
@@ -544,6 +553,7 @@ declare type JssmGenericConfig<StateType, DataType> = {
     min_exits?: number;
     max_exits?: number;
     allow_islands?: JssmAllowIslands;
+    editor_config?: JssmEditorConfig;
     allow_force?: false;
     actions?: JssmPermittedOpt;
     simplify_bidi?: boolean;
@@ -2044,6 +2054,7 @@ declare class Machine<mDT> {
     _code_allows_override: JssmAllowsOverride;
     _config_allows_override: JssmAllowsOverride;
     _allow_islands: JssmAllowIslands;
+    _editor_config?: JssmEditorConfig;
     _post_hooks: Map<number, HookHandler<mDT>>;
     _post_named_hooks: Map<number, Map<number, HookHandler<mDT>>>;
     _post_entry_hooks: Map<number, HookHandler<mDT>>;
@@ -2093,7 +2104,7 @@ declare class Machine<mDT> {
     _firing_error: boolean;
     _boundary_depth: number;
     _boundary_depth_limit: number;
-    constructor({ start_states, end_states, failed_outputs, initial_state, start_states_no_enforce, complete, transitions, machine_author, machine_comment, machine_contributor, machine_definition, machine_language, machine_license, machine_name, machine_version, npm_name, default_size, state_declaration, property_definition, state_property, fsl_version, dot_preamble, arrange_declaration, arrange_start_declaration, arrange_end_declaration, theme, flow, graph_layout, instance_name, history, boundary_depth_limit, data, default_state_config, default_active_state_config, default_hooked_state_config, default_terminal_state_config, default_start_state_config, default_end_state_config, default_transition_config, default_graph_config, group_registry, group_metadata, group_hooks, state_hooks, allows_override, config_allows_override, allow_islands, rng_seed, time_source, timeout_source, clear_timeout_source }: JssmGenericConfig<StateType, mDT>);
+    constructor({ start_states, end_states, failed_outputs, initial_state, start_states_no_enforce, complete, transitions, machine_author, machine_comment, machine_contributor, machine_definition, machine_language, machine_license, machine_name, machine_version, npm_name, default_size, state_declaration, property_definition, state_property, fsl_version, dot_preamble, arrange_declaration, arrange_start_declaration, arrange_end_declaration, theme, flow, graph_layout, instance_name, history, boundary_depth_limit, data, default_state_config, default_active_state_config, default_hooked_state_config, default_terminal_state_config, default_start_state_config, default_end_state_config, default_transition_config, default_graph_config, group_registry, group_metadata, group_hooks, state_hooks, allows_override, config_allows_override, allow_islands, editor_config, rng_seed, time_source, timeout_source, clear_timeout_source }: JssmGenericConfig<StateType, mDT>);
     /********
      *
      *  Internal method for fabricating states.  Not meant for external use.
@@ -2521,6 +2532,17 @@ declare class Machine<mDT> {
      *  @returns The machine name string.
      */
     machine_name(): string;
+    /** The editor/panel defaults declared in the FSL `editor: {}` block, or
+     *  `undefined` when none was given.  Read by the all-widgets web control
+     *  (fsl#1334) — `panels` drives `request` panel mode.
+     *
+     *  @returns `{ stochastic_run_count?, panels? }`, or `undefined`.
+     *
+     *  @example
+     *    const m = sm`editor: { panels: [history]; }; a -> b;`;
+     *    m.editor_config();  // => { panels: ['history'] }
+     */
+    editor_config(): JssmEditorConfig | undefined;
     /** Get the npm package name associated with the machine.  Set via the FSL `npm_name` directive.
      *  Returns `undefined` when not present.
      *  @returns The npm package name string, or `undefined`.