State Machine

angular/app.component.html

<div class="angular-root" theme="industrial">
    <div class="smart-demo-container">

        <section id="overview">
            <h2>Smart.StateMachine displays the state model of a machine as a diagram, with the current state marked, the time in the state and the commands that are available from it.</h2>
            <p>
                The PackML (ISA-TR88.00.02) model for packaging and discrete machines and the ISA-88 procedural model for batch units are built in, and a custom model can be supplied. The component does not change state on its own. A command press raises the <code>commandRequest</code> event and the diagram waits for the controller to report the state it reached.
            </p>
        </section>

        <section>
            <h2>A filler under PackML control</h2>
            <p>
                The controller below is simulated. It accepts the commands raised by the diagram, moves through the acting states at its own pace and reports each state back. Press <em>Reset</em> and then <em>Start</em> to see Resetting and Starting on the way to Execute. Hold and Suspend are available from Execute, and <em>Abort</em> is available from every state except Aborting, Aborted and Clearing. Solid arrows are commands and dashed arrows are the automatic transitions taken when an acting state completes.
            </p>
            <smart-state-machine id="filler" model="packml" state="Stopped" label="Filler F-01" mode="Production"></smart-state-machine>
            <div class="demo-actions">
                <label>Acting states take <input type="range" id="pace" min="300" max="3000" step="100" value="1200" /> <span id="paceValue">1.2 s</span></label>
                <label><input type="checkbox" id="compact" /> Compact view</label>
                <span id="log" class="stats"></span>
            </div>
            <p class="hint">
                Keyboard: the command bar is a single tab stop. Use the arrow keys to move between commands and Enter or Space to send one. A change of state is announced to screen readers; Aborting and Aborted are announced assertively.
            </p>
        </section>

        <section>
            <h2>A batch unit under ISA-88</h2>
            <p>
                The procedural model: Running can be paused and held, Held can be restarted, and Reset returns the unit to Idle. The controller pattern is the same as above with a different model.
            </p>
            <smart-state-machine id="unit" model="isa88" state="Idle" label="Reactor R-201" [showHistory]="false"></smart-state-machine>
        </section>

    </div>
</div>

angular/app.component.ts

import { Component, AfterViewInit, OnDestroy } from '@angular/core';

import { StateMachineModule } from 'smart-industrial/angular/statemachine';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - StateMachine in Angular.
 *
 * The template is the HTML demo's markup: the elements are the wrappers, so what is
 * written on them is checked against their inputs. demo.ts drives them the way the
 * plant's data would, once every element in the view has rendered.
 */
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [StateMachineModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent implements AfterViewInit, OnDestroy {
    private unmounted = false;

    ngAfterViewInit(): void {
        const root = document.querySelector('.angular-root') as HTMLElement,
            pending: Promise<void>[] = [];

        root.querySelectorAll('*').forEach((element: any) => {
            if (typeof element.whenRendered === 'function' && !element.isRendered) {
                pending.push(element.whenRendered());
            }
        });

        Promise.all(pending).then(() => {
            if (!this.unmounted) {
                runDemo();
            }
        });
    }

    ngOnDestroy(): void {
        this.unmounted = true;
    }
}

angular/demo.ts

// @ts-nocheck
/* The HTML demo's script, as it was written: page code that feeds the elements, not a typed
   API. The types are on the wrappers in app.component.ts. */

/* A simulated controller. It owns the state; the diagram only reports what it is asked
   and shows what it is told. Replace `apply` with a write to the PLC's command tag and
   the interval with a subscription to its state tag, and the diagram does not change. */

function controller(machine, log) {
    let pace = 1200,
        pending = null;

    /* An acting state completes after `pace` and takes its automatic transition, the
       way a real machine's Starting takes as long as its motors need. */
    function schedule() {
        if (pending) {
            clearTimeout(pending);
            pending = null;
        }

        const next = machine.nextAutomatic(machine.state);

        if (!next) {
            return;
        }

        pending = setTimeout(function () {
            pending = null;
            machine.state = next;
            schedule();
        }, pace);
    }

    machine.addEventListener('commandRequest', function (event) {
        const to = event.detail.to;

        if (log) {
            log.textContent = event.detail.command + ' → ' + to;
        }

        /* The controller accepts the command and reports the state it reached. */
        machine.state = to;
        schedule();
    });

    machine.addEventListener('modeRequest', function (event) {
        machine.mode = event.detail.mode;
    });

    return {
        setPace: function (value) {
            pace = value;
        }
    };
}

export function runDemo(): void {
    const filler = document.getElementById('filler'),
        unit = document.getElementById('unit'),
        pace = document.getElementById('pace'),
        paceValue = document.getElementById('paceValue'),
        compact = document.getElementById('compact'),
        log = document.getElementById('log');

    filler.modes = ['Production', 'Maintenance', 'Manual'];

    const fillerController = controller(filler, log);

    controller(unit, null);

    pace.addEventListener('input', function () {
        fillerController.setPace(Number(pace.value));
        paceValue.textContent = (Number(pace.value) / 1000).toFixed(1) + ' s';
    });

    compact.addEventListener('change', function () {
        filler.view = compact.checked ? 'compact' : 'diagram';
    });

    filler.addEventListener('stateChange', function (event) {
        log.textContent = (event.detail.from || '—') + ' → ' + event.detail.to +
            (event.detail.duration ? ' after ' + (event.detail.duration / 1000).toFixed(1) + ' s' : '');
    });
}

angular/app.component.css

smart-state-machine {
    width: 100%;
}

.demo-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.stats {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.hint {
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.75;
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}

react/App.jsx

import 'smart-industrial/source/styles/smart.default.css';
import 'smart-industrial/source/styles/smart.industrial-elements.css';
import 'smart-industrial/source/styles/smart.industrial.css';
import 'smart-industrial/source/styles/smart.industrial-dark.css';
import './App.css';
import React from 'react';
import { StateMachine } from 'smart-industrial/react/statemachine';


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* A simulated controller. It owns the state; the diagram only reports what it is asked
   and shows what it is told. Replace `apply` with a write to the PLC's command tag and
   the interval with a subscription to its state tag, and the diagram does not change. */

function controller(machine, log) {
    let pace = 1200,
        pending = null;

    /* An acting state completes after `pace` and takes its automatic transition, the
       way a real machine's Starting takes as long as its motors need. */
    function schedule() {
        if (pending) {
            clearTimeout(pending);
            pending = null;
        }

        const next = machine.nextAutomatic(machine.state);

        if (!next) {
            return;
        }

        pending = setTimeout(function () {
            pending = null;
            machine.state = next;
            schedule();
        }, pace);
    }

    machine.addEventListener('commandRequest', function (event) {
        const to = event.detail.to;

        if (log) {
            log.textContent = event.detail.command + ' → ' + to;
        }

        /* The controller accepts the command and reports the state it reached. */
        machine.state = to;
        schedule();
    });

    machine.addEventListener('modeRequest', function (event) {
        machine.mode = event.detail.mode;
    });

    return {
        setPace: function (value) {
            pace = value;
        }
    };
}

const App = () => {
    const root = React.useRef(null);

    React.useEffect(() => {
        /* The elements render after React has mounted them, and the demo's logic - written
           for a page's load event - reads their parts, so it waits for every element in the
           tree to have rendered first. */
        const pending = Array.from(root.current.querySelectorAll('*'))
            .filter((element) => typeof element.whenRendered === 'function' && !element.isRendered)
            .map((element) => element.whenRendered());
        let unmounted = false;

        Promise.all(pending).then(() => {
            if (unmounted) {
                return;
            }

            const filler = document.getElementById('filler'),
                unit = document.getElementById('unit'),
                pace = document.getElementById('pace'),
                paceValue = document.getElementById('paceValue'),
                compact = document.getElementById('compact'),
                log = document.getElementById('log');

            filler.modes = ['Production', 'Maintenance', 'Manual'];

            const fillerController = controller(filler, log);

            controller(unit, null);

            pace.addEventListener('input', function () {
                fillerController.setPace(Number(pace.value));
                paceValue.textContent = (Number(pace.value) / 1000).toFixed(1) + ' s';
            });

            compact.addEventListener('change', function () {
                filler.view = compact.checked ? 'compact' : 'diagram';
            });

            filler.addEventListener('stateChange', function (event) {
                log.textContent = (event.detail.from || '—') + ' → ' + event.detail.to +
                    (event.detail.duration ? ' after ' + (event.detail.duration / 1000).toFixed(1) + ' s' : '');
            });
        });

        return () => {
            unmounted = true;
        };
    }, []);

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.StateMachine displays the state model of a machine as a diagram, with the current state marked, the time in the state and the commands that are available from it.</h2>
                    <p>The PackML (ISA-TR88.00.02) model for packaging and discrete machines and the ISA-88 procedural model for batch units are built in, and a custom model can be supplied. The component does not change state on its own. A command press raises the <code>commandRequest</code> event and the diagram waits for the controller to report the state it reached.</p>
                </section>
                <section>
                    <h2>A filler under PackML control</h2>
                    <p>The controller below is simulated. It accepts the commands raised by the diagram, moves through the acting states at its own pace and reports each state back. Press <em>Reset</em> and then <em>Start</em> to see Resetting and Starting on the way to Execute. Hold and Suspend are available from Execute, and <em>Abort</em> is available from every state except Aborting, Aborted and Clearing. Solid arrows are commands and dashed arrows are the automatic transitions taken when an acting state completes.</p>
                    <StateMachine id="filler" model="packml" state="Stopped" label="Filler F-01" mode="Production"></StateMachine>
                    <div className="demo-actions">
                        <label>Acting states take <input type="range" id="pace" min="300" max="3000" step="100" defaultValue="1200" /> <span id="paceValue">1.2 s</span></label>
                        <label><input type="checkbox" id="compact" /> Compact view</label>
                        <span id="log" className="stats"></span>
                    </div>
                    <p className="hint">Keyboard: the command bar is a single tab stop. Use the arrow keys to move between commands and Enter or Space to send one. A change of state is announced to screen readers; Aborting and Aborted are announced assertively.</p>
                </section>
                <section>
                    <h2>A batch unit under ISA-88</h2>
                    <p>The procedural model: Running can be paused and held, Held can be restarted, and Reset returns the unit to Idle. The controller pattern is the same as above with a different model.</p>
                    <StateMachine id="unit" model="isa88" state="Idle" label="Reactor R-201" showHistory={false}></StateMachine>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

smart-state-machine {
    width: 100%;
}

.demo-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.stats {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.hint {
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.75;
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}

vue/App.vue

<template>
  <div class="vue-root" theme="industrial" v-pre>
    <div class="smart-demo-container">

        <section id="overview">
            <h2>Smart.StateMachine displays the state model of a machine as a diagram, with the current state marked, the time in the state and the commands that are available from it.</h2>
            <p>
                The PackML (ISA-TR88.00.02) model for packaging and discrete machines and the ISA-88 procedural model for batch units are built in, and a custom model can be supplied. The component does not change state on its own. A command press raises the <code>commandRequest</code> event and the diagram waits for the controller to report the state it reached.
            </p>
        </section>

        <section>
            <h2>A filler under PackML control</h2>
            <p>
                The controller below is simulated. It accepts the commands raised by the diagram, moves through the acting states at its own pace and reports each state back. Press <em>Reset</em> and then <em>Start</em> to see Resetting and Starting on the way to Execute. Hold and Suspend are available from Execute, and <em>Abort</em> is available from every state except Aborting, Aborted and Clearing. Solid arrows are commands and dashed arrows are the automatic transitions taken when an acting state completes.
            </p>
            <smart-state-machine id="filler" model="packml" state="Stopped" label="Filler F-01" mode="Production"></smart-state-machine>
            <div class="demo-actions">
                <label>Acting states take <input type="range" id="pace" min="300" max="3000" step="100" value="1200" /> <span id="paceValue">1.2 s</span></label>
                <label><input type="checkbox" id="compact" /> Compact view</label>
                <span id="log" class="stats"></span>
            </div>
            <p class="hint">
                Keyboard: the command bar is a single tab stop. Use the arrow keys to move between commands and Enter or Space to send one. A change of state is announced to screen readers; Aborting and Aborted are announced assertively.
            </p>
        </section>

        <section>
            <h2>A batch unit under ISA-88</h2>
            <p>
                The procedural model: Running can be paused and held, Held can be restarted, and Reset returns the unit to Idle. The controller pattern is the same as above with a different model.
            </p>
            <smart-state-machine id="unit" model="isa88" state="Idle" label="Reactor R-201" show-history="false"></smart-state-machine>
        </section>

    </div>
  </div>
</template>

<script>
import { onMounted } from "vue";
import "smart-industrial/source/styles/smart.default.css";
import "smart-industrial/source/styles/smart.industrial-elements.css";
import "smart-industrial/source/styles/smart.industrial.css";
import "smart-industrial/source/styles/smart.industrial-dark.css";
import "smart-industrial/source/modules/smart.statemachine.js";


/* A simulated controller. It owns the state; the diagram only reports what it is asked
   and shows what it is told. Replace `apply` with a write to the PLC's command tag and
   the interval with a subscription to its state tag, and the diagram does not change. */

function controller(machine, log) {
    let pace = 1200,
        pending = null;

    /* An acting state completes after `pace` and takes its automatic transition, the
       way a real machine's Starting takes as long as its motors need. */
    function schedule() {
        if (pending) {
            clearTimeout(pending);
            pending = null;
        }

        const next = machine.nextAutomatic(machine.state);

        if (!next) {
            return;
        }

        pending = setTimeout(function () {
            pending = null;
            machine.state = next;
            schedule();
        }, pace);
    }

    machine.addEventListener('commandRequest', function (event) {
        const to = event.detail.to;

        if (log) {
            log.textContent = event.detail.command + ' → ' + to;
        }

        /* The controller accepts the command and reports the state it reached. */
        machine.state = to;
        schedule();
    });

    machine.addEventListener('modeRequest', function (event) {
        machine.mode = event.detail.mode;
    });

    return {
        setPace: function (value) {
            pace = value;
        }
    };
}

export default {
  name: "app",
  setup() {
    onMounted(() => {
      /* The elements render after Vue has mounted them, and the demo's logic - written for
         a page's load event - reads their parts, so it waits for every element in the tree
         to have rendered first. */
      const pending = Array.from(document.querySelector(".vue-root").querySelectorAll("*"))
        .filter((element) => typeof element.whenRendered === "function" && !element.isRendered)
        .map((element) => element.whenRendered());

      Promise.all(pending).then(() => {
        const filler = document.getElementById('filler'),
            unit = document.getElementById('unit'),
            pace = document.getElementById('pace'),
            paceValue = document.getElementById('paceValue'),
            compact = document.getElementById('compact'),
            log = document.getElementById('log');

        filler.modes = ['Production', 'Maintenance', 'Manual'];

        const fillerController = controller(filler, log);

        controller(unit, null);

        pace.addEventListener('input', function () {
            fillerController.setPace(Number(pace.value));
            paceValue.textContent = (Number(pace.value) / 1000).toFixed(1) + ' s';
        });

        compact.addEventListener('change', function () {
            filler.view = compact.checked ? 'compact' : 'diagram';
        });

        filler.addEventListener('stateChange', function (event) {
            log.textContent = (event.detail.from || '—') + ' → ' + event.detail.to +
                (event.detail.duration ? ' after ' + (event.detail.duration / 1000).toFixed(1) + ' s' : '');
        });
      });
    });
  }
};
</script>

<style>
smart-state-machine {
    width: 100%;
}

.demo-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.stats {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.hint {
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.75;
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}
</style>