Sequence Editor

angular/app.component.html

<div class="angular-root" theme="industrial">
    <div class="smart-demo-container">
        <section id="overview">
            <h2>Smart.SequenceEditor is a step sequence editor and runner for test sequences, batch procedures and recipes.</h2>
            <p>
                A sequence is an ordered list of steps, each with a limit, that runs once and produces a record of the results. The component does not execute the steps. It walks through the list, raises the <code>stepStart</code> event for each step and waits for the application to call <code>setResult()</code>.
            </p>
        </section>

        <section>
            <h2>A power supply acceptance test</h2>
            <div id="summary" class="summary"></div>
            <smart-sequence-editor id="sequence"></smart-sequence-editor>
            <div class="demo-actions">
                <button type="button" id="run">Run</button>
                <button type="button" id="abort">Abort</button>
                <button type="button" id="reset">Reset</button>
                <label><input type="checkbox" id="stopOnFail" /> Stop on first failure</label>
                <label><input type="checkbox" id="forceFail" /> Force a failure at step 4</label>
            </div>
            <p class="hint" id="log">Press Run. The simulated instrument returns a result for each step in turn.</p>
        </section>

        <section>
            <h2>Limits</h2>
            <p>
                A limit is a range or a nominal value with a tolerance. Both are data: they come from a specification and go into a report, and they can be compared, exported and reviewed. When a limit needs an expression, the application can supply an evaluator through the <code>limitEvaluator</code> property.
            </p>
            <table class="limits-table">
                <thead><tr><th>Form</th><th>Written as</th><th>Reads as</th></tr></thead>
                <tbody id="limitForms"></tbody>
            </table>
        </section>

        <section>
            <h2>The report</h2>
            <p>
                The <code>report()</code> method returns the record of the run: the verdict, the number of steps in each state, and every step with its limit and measurement. A run passes only when no step failed and no step was skipped.
            </p>
            <pre id="report" class="report">Run the sequence to produce a report.</pre>
        </section>
    </div>
</div>

angular/app.component.ts

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

import { SequenceEditorModule } from 'smart-industrial/angular/sequenceeditor';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - SequenceEditor 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: [SequenceEditorModule],
    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 PSU acceptance test. Limits are the kind that come off a spec sheet: a range, or a
   nominal with a tolerance. Steps without either are actions - they run, but they cannot
   fail on a value. */
function sequence() {
    return [
        { id: 'connect', name: 'Connect to instrument', action: 'GPIB0::16::INSTR' },
        { id: 'idn', name: 'Identify', action: '*IDN?' },
        { id: 'reset', name: 'Reset to defaults', action: '*RST' },
        { id: 'rail5', name: '+5 V rail', action: 'MEAS:VOLT:DC?', unit: 'V', nominal: 5, tolerance: 0.25 },
        { id: 'rail12', name: '+12 V rail', action: 'MEAS:VOLT:DC?', unit: 'V', nominal: 12, tolerance: 0.6 },
        { id: 'ripple', name: 'Output ripple', action: 'MEAS:VOLT:AC?', unit: 'mV', max: 50 },
        { id: 'load', name: 'Load regulation', action: 'MEAS:VOLT:DC?', unit: '%', max: 0.5 },
        { id: 'eff', name: 'Efficiency at full load', action: 'CALC:EFF?', unit: '%', min: 85 },
        { id: 'ocp', name: 'Over-current trip', action: 'TEST:OCP?', unit: 'A', min: 4.5, max: 5.5 },
        { id: 'off', name: 'Power down', action: 'OUTP OFF' }
    ];
}

/* Stands in for the instrument. In a real rig this is a VISA call; the seam is that the
   element raises stepStart and waits for setResult, and knows nothing about either end. */
function measure(step, forceFail) {
    if (step.id === 'rail5' && forceFail) {
        return 4.1;
    }

    if (step.nominal !== undefined) {
        return step.nominal + (Math.random() - 0.5) * step.tolerance * 1.2;
    }

    if (step.id === 'ripple') {
        return 18 + Math.random() * 14;
    }

    if (step.id === 'load') {
        return 0.12 + Math.random() * 0.15;
    }

    if (step.id === 'eff') {
        return 88 + Math.random() * 4;
    }

    if (step.id === 'ocp') {
        return 4.9 + Math.random() * 0.3;
    }

    return 'OK';
}

export function runDemo(): void {
    const editor = document.getElementById('sequence'),
        log = document.getElementById('log'),
        summary = document.getElementById('summary'),
        report = document.getElementById('report'),
        forceFail = document.getElementById('forceFail');

    editor.steps = sequence();

    function renderSummary() {
        const r = editor.report();

        summary.innerHTML =
            '<span><b>' + r.counts.passed + '</b> passed</span>' +
            '<span><b>' + r.counts.failed + '</b> failed</span>' +
            '<span><b>' + r.counts.pending + '</b> pending</span>' +
            '<span><b>' + r.counts.aborted + '</b> aborted</span>' +
            '<span><b>' + r.total + '</b> steps</span>';
    }

    /* The element walks the list and asks; this answers. A real rig would take as long as
       the measurement takes, which is why the answer is asynchronous here too. */
    editor.addEventListener('stepStart', function (event) {
        const step = event.detail.step;

        log.textContent = 'running ' + step.name + '  (' + (step.action || 'no action') + ')';

        setTimeout(function () {
            editor.setResult(step.id, measure(step, forceFail.checked));
        }, 260);
    });

    editor.addEventListener('stepComplete', function (event) {
        renderSummary();

        if (event.detail.state === 'failed') {
            log.textContent = event.detail.step.name + ' FAILED';
        }
    });

    editor.addEventListener('sequenceComplete', function (event) {
        const r = event.detail.report;

        log.textContent = event.detail.aborted
            ? 'Sequence aborted.'
            : 'Sequence complete: ' + (r.passed ? 'PASS' : 'FAIL');

        renderSummary();
        report.textContent = JSON.stringify(r, null, 2);
    });

    document.getElementById('run').addEventListener('click', function () {
        report.textContent = 'Running...';
        editor.run();
    });

    /* One run on load: the runner is the point of the page. */
    setTimeout(function () {
        report.textContent = 'Running...';
        editor.run();
    }, 800);

    document.getElementById('abort').addEventListener('click', function () {
        editor.abort();
    });

    document.getElementById('reset').addEventListener('click', function () {
        editor.steps = sequence();
        report.textContent = 'Run the sequence to produce a report.';
        log.textContent = 'Reset.';
        renderSummary();
    });

    document.getElementById('stopOnFail').addEventListener('change', function () {
        editor.stopOnFailure = this.checked;
    });

    /* ── The limit forms, read off the element itself ────────────────── */
    document.getElementById('limitForms').innerHTML = [
        ['Range', '{ min: 4.5, max: 5.5 }', { min: 4.5, max: 5.5, unit: 'A' }],
        ['Lower only', '{ min: 85 }', { min: 85, unit: '%' }],
        ['Upper only', '{ max: 50 }', { max: 50, unit: 'mV' }],
        ['Nominal', '{ nominal: 5, tolerance: 0.25 }', { nominal: 5, tolerance: 0.25, unit: 'V' }],
        ['None (an action)', '{ }', {}]
    ].map(function (row) {
        return '<tr><td>' + row[0] + '</td><td><code>' + row[1] + '</code></td><td>' +
            editor.limitText(row[2]) + '</td></tr>';
    }).join('');

    renderSummary();
}

angular/app.component.css

.summary { display: flex; gap: 14px; margin-bottom: 8px; font-size: 12px; }
.summary b { font-variant-numeric: tabular-nums; font-size: 14px; }
.demo-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.demo-actions label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.hint { margin-top: 8px; font-size: 12px; opacity: 0.75; }
.limits-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.limits-table th, .limits-table td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--smart-border, #ddd); }
.report { background: var(--smart-industrial-panel-header-background, #f4f6f8); padding: 12px; border-radius: 3px; font-size: 12px; overflow-x: auto; }

/* ── 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 { SequenceEditor } from 'smart-industrial/react/sequenceeditor';


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* A PSU acceptance test. Limits are the kind that come off a spec sheet: a range, or a
   nominal with a tolerance. Steps without either are actions - they run, but they cannot
   fail on a value. */
function sequence() {
    return [
        { id: 'connect', name: 'Connect to instrument', action: 'GPIB0::16::INSTR' },
        { id: 'idn', name: 'Identify', action: '*IDN?' },
        { id: 'reset', name: 'Reset to defaults', action: '*RST' },
        { id: 'rail5', name: '+5 V rail', action: 'MEAS:VOLT:DC?', unit: 'V', nominal: 5, tolerance: 0.25 },
        { id: 'rail12', name: '+12 V rail', action: 'MEAS:VOLT:DC?', unit: 'V', nominal: 12, tolerance: 0.6 },
        { id: 'ripple', name: 'Output ripple', action: 'MEAS:VOLT:AC?', unit: 'mV', max: 50 },
        { id: 'load', name: 'Load regulation', action: 'MEAS:VOLT:DC?', unit: '%', max: 0.5 },
        { id: 'eff', name: 'Efficiency at full load', action: 'CALC:EFF?', unit: '%', min: 85 },
        { id: 'ocp', name: 'Over-current trip', action: 'TEST:OCP?', unit: 'A', min: 4.5, max: 5.5 },
        { id: 'off', name: 'Power down', action: 'OUTP OFF' }
    ];
}

/* Stands in for the instrument. In a real rig this is a VISA call; the seam is that the
   element raises stepStart and waits for setResult, and knows nothing about either end. */
function measure(step, forceFail) {
    if (step.id === 'rail5' && forceFail) {
        return 4.1;
    }

    if (step.nominal !== undefined) {
        return step.nominal + (Math.random() - 0.5) * step.tolerance * 1.2;
    }

    if (step.id === 'ripple') {
        return 18 + Math.random() * 14;
    }

    if (step.id === 'load') {
        return 0.12 + Math.random() * 0.15;
    }

    if (step.id === 'eff') {
        return 88 + Math.random() * 4;
    }

    if (step.id === 'ocp') {
        return 4.9 + Math.random() * 0.3;
    }

    return 'OK';
}

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 editor = document.getElementById('sequence'),
                log = document.getElementById('log'),
                summary = document.getElementById('summary'),
                report = document.getElementById('report'),
                forceFail = document.getElementById('forceFail');

            editor.steps = sequence();

            function renderSummary() {
                const r = editor.report();

                summary.innerHTML =
                    '<span><b>' + r.counts.passed + '</b> passed</span>' +
                    '<span><b>' + r.counts.failed + '</b> failed</span>' +
                    '<span><b>' + r.counts.pending + '</b> pending</span>' +
                    '<span><b>' + r.counts.aborted + '</b> aborted</span>' +
                    '<span><b>' + r.total + '</b> steps</span>';
            }

            /* The element walks the list and asks; this answers. A real rig would take as long as
               the measurement takes, which is why the answer is asynchronous here too. */
            editor.addEventListener('stepStart', function (event) {
                const step = event.detail.step;

                log.textContent = 'running ' + step.name + '  (' + (step.action || 'no action') + ')';

                setTimeout(function () {
                    editor.setResult(step.id, measure(step, forceFail.checked));
                }, 260);
            });

            editor.addEventListener('stepComplete', function (event) {
                renderSummary();

                if (event.detail.state === 'failed') {
                    log.textContent = event.detail.step.name + ' FAILED';
                }
            });

            editor.addEventListener('sequenceComplete', function (event) {
                const r = event.detail.report;

                log.textContent = event.detail.aborted
                    ? 'Sequence aborted.'
                    : 'Sequence complete: ' + (r.passed ? 'PASS' : 'FAIL');

                renderSummary();
                report.textContent = JSON.stringify(r, null, 2);
            });

            document.getElementById('run').addEventListener('click', function () {
                report.textContent = 'Running...';
                editor.run();
            });

            /* One run on load: the runner is the point of the page. */
            setTimeout(function () {
                report.textContent = 'Running...';
                editor.run();
            }, 800);

            document.getElementById('abort').addEventListener('click', function () {
                editor.abort();
            });

            document.getElementById('reset').addEventListener('click', function () {
                editor.steps = sequence();
                report.textContent = 'Run the sequence to produce a report.';
                log.textContent = 'Reset.';
                renderSummary();
            });

            document.getElementById('stopOnFail').addEventListener('change', function () {
                editor.stopOnFailure = this.checked;
            });

            /* ── The limit forms, read off the element itself ────────────────── */
            document.getElementById('limitForms').innerHTML = [
                ['Range', '{ min: 4.5, max: 5.5 }', { min: 4.5, max: 5.5, unit: 'A' }],
                ['Lower only', '{ min: 85 }', { min: 85, unit: '%' }],
                ['Upper only', '{ max: 50 }', { max: 50, unit: 'mV' }],
                ['Nominal', '{ nominal: 5, tolerance: 0.25 }', { nominal: 5, tolerance: 0.25, unit: 'V' }],
                ['None (an action)', '{ }', {}]
            ].map(function (row) {
                return '<tr><td>' + row[0] + '</td><td><code>' + row[1] + '</code></td><td>' +
                    editor.limitText(row[2]) + '</td></tr>';
            }).join('');

            renderSummary();
        });

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

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.SequenceEditor is a step sequence editor and runner for test sequences, batch procedures and recipes.</h2>
                    <p>A sequence is an ordered list of steps, each with a limit, that runs once and produces a record of the results. The component does not execute the steps. It walks through the list, raises the <code>stepStart</code> event for each step and waits for the application to call <code>setResult()</code>.</p>
                </section>
                <section>
                    <h2>A power supply acceptance test</h2>
                    <div id="summary" className="summary"></div>
                    <SequenceEditor id="sequence"></SequenceEditor>
                    <div className="demo-actions">
                        <button type="button" id="run">Run</button>
                        <button type="button" id="abort">Abort</button>
                        <button type="button" id="reset">Reset</button>
                        <label><input type="checkbox" id="stopOnFail" /> Stop on first failure</label>
                        <label><input type="checkbox" id="forceFail" /> Force a failure at step 4</label>
                    </div>
                    <p className="hint" id="log">Press Run. The simulated instrument returns a result for each step in turn.</p>
                </section>
                <section>
                    <h2>Limits</h2>
                    <p>A limit is a range or a nominal value with a tolerance. Both are data: they come from a specification and go into a report, and they can be compared, exported and reviewed. When a limit needs an expression, the application can supply an evaluator through the <code>limitEvaluator</code> property.</p>
                    <table className="limits-table">
                        <thead>
                            <tr>
                                <th>Form</th>
                                <th>Written as</th>
                                <th>Reads as</th>
                            </tr>
                        </thead>
                        <tbody id="limitForms"></tbody>
                    </table>
                </section>
                <section>
                    <h2>The report</h2>
                    <p>The <code>report()</code> method returns the record of the run: the verdict, the number of steps in each state, and every step with its limit and measurement. A run passes only when no step failed and no step was skipped.</p>
                    <pre id="report" className="report">{"Run the sequence to produce a report."}</pre>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

.summary { display: flex; gap: 14px; margin-bottom: 8px; font-size: 12px; }
.summary b { font-variant-numeric: tabular-nums; font-size: 14px; }
.demo-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.demo-actions label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.hint { margin-top: 8px; font-size: 12px; opacity: 0.75; }
.limits-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.limits-table th, .limits-table td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--smart-border, #ddd); }
.report { background: var(--smart-industrial-panel-header-background, #f4f6f8); padding: 12px; border-radius: 3px; font-size: 12px; overflow-x: auto; }

/* ── 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.SequenceEditor is a step sequence editor and runner for test sequences, batch procedures and recipes.</h2>
            <p>
                A sequence is an ordered list of steps, each with a limit, that runs once and produces a record of the results. The component does not execute the steps. It walks through the list, raises the <code>stepStart</code> event for each step and waits for the application to call <code>setResult()</code>.
            </p>
        </section>

        <section>
            <h2>A power supply acceptance test</h2>
            <div id="summary" class="summary"></div>
            <smart-sequence-editor id="sequence"></smart-sequence-editor>
            <div class="demo-actions">
                <button type="button" id="run">Run</button>
                <button type="button" id="abort">Abort</button>
                <button type="button" id="reset">Reset</button>
                <label><input type="checkbox" id="stopOnFail" /> Stop on first failure</label>
                <label><input type="checkbox" id="forceFail" /> Force a failure at step 4</label>
            </div>
            <p class="hint" id="log">Press Run. The simulated instrument returns a result for each step in turn.</p>
        </section>

        <section>
            <h2>Limits</h2>
            <p>
                A limit is a range or a nominal value with a tolerance. Both are data: they come from a specification and go into a report, and they can be compared, exported and reviewed. When a limit needs an expression, the application can supply an evaluator through the <code>limitEvaluator</code> property.
            </p>
            <table class="limits-table">
                <thead><tr><th>Form</th><th>Written as</th><th>Reads as</th></tr></thead>
                <tbody id="limitForms"></tbody>
            </table>
        </section>

        <section>
            <h2>The report</h2>
            <p>
                The <code>report()</code> method returns the record of the run: the verdict, the number of steps in each state, and every step with its limit and measurement. A run passes only when no step failed and no step was skipped.
            </p>
            <pre id="report" class="report">Run the sequence to produce a report.</pre>
        </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.sequenceeditor.js";


/* A PSU acceptance test. Limits are the kind that come off a spec sheet: a range, or a
   nominal with a tolerance. Steps without either are actions - they run, but they cannot
   fail on a value. */
function sequence() {
    return [
        { id: 'connect', name: 'Connect to instrument', action: 'GPIB0::16::INSTR' },
        { id: 'idn', name: 'Identify', action: '*IDN?' },
        { id: 'reset', name: 'Reset to defaults', action: '*RST' },
        { id: 'rail5', name: '+5 V rail', action: 'MEAS:VOLT:DC?', unit: 'V', nominal: 5, tolerance: 0.25 },
        { id: 'rail12', name: '+12 V rail', action: 'MEAS:VOLT:DC?', unit: 'V', nominal: 12, tolerance: 0.6 },
        { id: 'ripple', name: 'Output ripple', action: 'MEAS:VOLT:AC?', unit: 'mV', max: 50 },
        { id: 'load', name: 'Load regulation', action: 'MEAS:VOLT:DC?', unit: '%', max: 0.5 },
        { id: 'eff', name: 'Efficiency at full load', action: 'CALC:EFF?', unit: '%', min: 85 },
        { id: 'ocp', name: 'Over-current trip', action: 'TEST:OCP?', unit: 'A', min: 4.5, max: 5.5 },
        { id: 'off', name: 'Power down', action: 'OUTP OFF' }
    ];
}

/* Stands in for the instrument. In a real rig this is a VISA call; the seam is that the
   element raises stepStart and waits for setResult, and knows nothing about either end. */
function measure(step, forceFail) {
    if (step.id === 'rail5' && forceFail) {
        return 4.1;
    }

    if (step.nominal !== undefined) {
        return step.nominal + (Math.random() - 0.5) * step.tolerance * 1.2;
    }

    if (step.id === 'ripple') {
        return 18 + Math.random() * 14;
    }

    if (step.id === 'load') {
        return 0.12 + Math.random() * 0.15;
    }

    if (step.id === 'eff') {
        return 88 + Math.random() * 4;
    }

    if (step.id === 'ocp') {
        return 4.9 + Math.random() * 0.3;
    }

    return 'OK';
}

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 editor = document.getElementById('sequence'),
            log = document.getElementById('log'),
            summary = document.getElementById('summary'),
            report = document.getElementById('report'),
            forceFail = document.getElementById('forceFail');

        editor.steps = sequence();

        function renderSummary() {
            const r = editor.report();

            summary.innerHTML =
                '<span><b>' + r.counts.passed + '</b> passed</span>' +
                '<span><b>' + r.counts.failed + '</b> failed</span>' +
                '<span><b>' + r.counts.pending + '</b> pending</span>' +
                '<span><b>' + r.counts.aborted + '</b> aborted</span>' +
                '<span><b>' + r.total + '</b> steps</span>';
        }

        /* The element walks the list and asks; this answers. A real rig would take as long as
           the measurement takes, which is why the answer is asynchronous here too. */
        editor.addEventListener('stepStart', function (event) {
            const step = event.detail.step;

            log.textContent = 'running ' + step.name + '  (' + (step.action || 'no action') + ')';

            setTimeout(function () {
                editor.setResult(step.id, measure(step, forceFail.checked));
            }, 260);
        });

        editor.addEventListener('stepComplete', function (event) {
            renderSummary();

            if (event.detail.state === 'failed') {
                log.textContent = event.detail.step.name + ' FAILED';
            }
        });

        editor.addEventListener('sequenceComplete', function (event) {
            const r = event.detail.report;

            log.textContent = event.detail.aborted
                ? 'Sequence aborted.'
                : 'Sequence complete: ' + (r.passed ? 'PASS' : 'FAIL');

            renderSummary();
            report.textContent = JSON.stringify(r, null, 2);
        });

        document.getElementById('run').addEventListener('click', function () {
            report.textContent = 'Running...';
            editor.run();
        });

        /* One run on load: the runner is the point of the page. */
        setTimeout(function () {
            report.textContent = 'Running...';
            editor.run();
        }, 800);

        document.getElementById('abort').addEventListener('click', function () {
            editor.abort();
        });

        document.getElementById('reset').addEventListener('click', function () {
            editor.steps = sequence();
            report.textContent = 'Run the sequence to produce a report.';
            log.textContent = 'Reset.';
            renderSummary();
        });

        document.getElementById('stopOnFail').addEventListener('change', function () {
            editor.stopOnFailure = this.checked;
        });

        /* ── The limit forms, read off the element itself ────────────────── */
        document.getElementById('limitForms').innerHTML = [
            ['Range', '{ min: 4.5, max: 5.5 }', { min: 4.5, max: 5.5, unit: 'A' }],
            ['Lower only', '{ min: 85 }', { min: 85, unit: '%' }],
            ['Upper only', '{ max: 50 }', { max: 50, unit: 'mV' }],
            ['Nominal', '{ nominal: 5, tolerance: 0.25 }', { nominal: 5, tolerance: 0.25, unit: 'V' }],
            ['None (an action)', '{ }', {}]
        ].map(function (row) {
            return '<tr><td>' + row[0] + '</td><td><code>' + row[1] + '</code></td><td>' +
                editor.limitText(row[2]) + '</td></tr>';
        }).join('');

        renderSummary();
      });
    });
  }
};
</script>

<style>
.summary { display: flex; gap: 14px; margin-bottom: 8px; font-size: 12px; }
.summary b { font-variant-numeric: tabular-nums; font-size: 14px; }
.demo-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.demo-actions label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.hint { margin-top: 8px; font-size: 12px; opacity: 0.75; }
.limits-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.limits-table th, .limits-table td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--smart-border, #ddd); }
.report { background: var(--smart-industrial-panel-header-background, #f4f6f8); padding: 12px; border-radius: 3px; font-size: 12px; overflow-x: auto; }

/* ── 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>