Cause and Effect Matrix

angular/app.component.html

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

        <section id="overview">
            <h2>Smart.CauseEffectMatrix displays the cause and effect chart of a safety instrumented system as a live matrix.</h2>
            <p>
                The rows are the causes (the initiators) and the columns are the effects (the final elements). A mark in a cell shows how a cause acts on an effect: <code>X</code> for a trip, <code>T</code> for a timed trip, <code>P</code> for a permissive and <code>A</code> for an alarm only. The component highlights the causes that are currently active and the effects that are currently tripped, and compares the two with the chart: an effect that should have tripped and did not, or that tripped without an active cause, is marked as a discrepancy in its column header.
            </p>
        </section>

        <section>
            <h2>Unit 200 safety system</h2>
            <smart-cause-effect-matrix id="sis" label="Unit 200 SIS"></smart-cause-effect-matrix>
            <div class="demo-actions">
                <button type="button" id="pressure">High pressure trip</button>
                <button type="button" id="level">Low level trip</button>
                <button type="button" id="stuck">Valve fails to close</button>
                <button type="button" id="spurious">Spurious trip</button>
                <button type="button" id="bypass">Bypass TSHH-2102</button>
                <button type="button" id="reset">Reset</button>
            </div>
            <p class="demo-log" id="log">Use Tab to focus the matrix. The arrow keys move between cells, Home and End move to the start and end of a row, Ctrl+Home and Ctrl+End move to the corners, and Enter opens a cell.</p>
            <p class="demo-log" id="verdict"></p>
        </section>

        <section>
            <h2>Custom marks</h2>
            <p>
                The <code>marks</code> property defines the letters used in the chart and which of them represent a trip. In this example <code>H</code> is a hold that prevents an effect from being reset; it is not a trip.
            </p>
            <smart-cause-effect-matrix id="custom" label="Furnace F-301" [showLegend]="true"></smart-cause-effect-matrix>
        </section>

    </div>
</div>

angular/app.component.ts

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

import { CauseEffectMatrixModule } from 'smart-industrial/angular/causeeffectmatrix';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - CauseEffectMatrix 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: [CauseEffectMatrixModule],
    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. */

/* Cause and effect matrix overview.
 *
 * The chart is written by hand here in the shape the safety engineer's document takes;
 * a plant's is read from its SIS configuration and assigned unchanged. The states - which
 * causes are active, which effects are tripped - come from the safety PLC's status words,
 * and here from the buttons. */

export function runDemo(): void {
    const sis = document.getElementById('sis'),
        custom = document.getElementById('custom'),
        log = document.getElementById('log'),
        verdict = document.getElementById('verdict');

    const causes = [
        { id: 'psh', tag: 'PSHH-2101', label: 'Reactor pressure high high' },
        { id: 'tsh', tag: 'TSHH-2102', label: 'Reactor temperature high high' },
        { id: 'lsl', tag: 'LSLL-2105', label: 'Feed drum level low low' },
        { id: 'fsl', tag: 'FSLL-2104', label: 'Cooling water flow low low' },
        { id: 'esd', tag: 'HS-2100', label: 'Unit emergency stop' }
    ];
    const effects = [
        { id: 'xv04', tag: 'XV-2104', label: 'Close feed isolation' },
        { id: 'p01', tag: 'P-2101A/B', label: 'Stop feed pumps' },
        { id: 'xv07', tag: 'XV-2107', label: 'Close steam to jacket' },
        { id: 'xv09', tag: 'XV-2109', label: 'Open depressuring' },
        { id: 'm23', tag: 'M-2301', label: 'Stop agitator' },
        { id: 'al', tag: 'UA-2100', label: 'Unit alarm' }
    ];
    sis.causes = causes;
    sis.effects = effects;
    sis.matrix = [
        { cause: 'psh', effect: 'xv04', mark: 'X' },
        { cause: 'psh', effect: 'p01', mark: 'X' },
        { cause: 'psh', effect: 'xv07', mark: 'X' },
        { cause: 'psh', effect: 'xv09', mark: 'T', delay: 30, note: 'after the feed is isolated' },
        { cause: 'psh', effect: 'al', mark: 'X' },
        { cause: 'tsh', effect: 'xv04', mark: 'X' },
        { cause: 'tsh', effect: 'xv07', mark: 'X' },
        { cause: 'tsh', effect: 'm23', mark: 'A' },
        { cause: 'tsh', effect: 'al', mark: 'X' },
        { cause: 'lsl', effect: 'p01', mark: 'X' },
        { cause: 'lsl', effect: 'al', mark: 'X' },
        { cause: 'fsl', effect: 'xv07', mark: 'X' },
        { cause: 'fsl', effect: 'p01', mark: 'T', delay: 60 },
        { cause: 'fsl', effect: 'al', mark: 'X' },
        { cause: 'esd', effect: 'xv04', mark: 'X' },
        { cause: 'esd', effect: 'p01', mark: 'X' },
        { cause: 'esd', effect: 'xv07', mark: 'X' },
        { cause: 'esd', effect: 'xv09', mark: 'X' },
        { cause: 'esd', effect: 'm23', mark: 'X' },
        { cause: 'esd', effect: 'al', mark: 'X' }
    ];

    /* ── The stand-in safety PLC ────────────────────────────────────────── */

    let active = {},
        tripped = {},
        bypassed = {};

    function apply() {
        sis.causes = causes.map(function (cause) {
            return { id: cause.id, tag: cause.tag, label: cause.label, active: !!active[cause.id], bypassed: !!bypassed[cause.id] };
        });
        sis.effects = effects.map(function (effect) {
            return { id: effect.id, tag: effect.tag, label: effect.label, tripped: !!tripped[effect.id] };
        });

        const bad = sis.discrepancies();

        verdict.textContent = bad.length ?
            bad.map(function (item) {
                const effect = effects.find(function (candidate) {
                    return candidate.id === item.effect;
                });

                return effect.tag + (item.expected ? ' should have tripped and has not' : ' tripped with no active cause');
            }).join('; ') + '.' :
            'The plant agrees with the chart.';
    }

    /* the PLC trips what the chart says, except where a final element is stuck */
    function respond(stuck) {
        effects.forEach(function (effect) {
            if (sis.expected(effect.id) && effect.id !== stuck) {
                tripped[effect.id] = true;
            }
        });
        apply();
    }

    document.getElementById('pressure').addEventListener('click', function () {
        active.psh = true;
        apply();
        log.textContent = 'PSHH-2101 active: the row lights, and the effects it should trip are expected. The PLC answers in a second.';
        setTimeout(respond, 1000);
    });

    document.getElementById('level').addEventListener('click', function () {
        active.lsl = true;
        apply();
        log.textContent = 'LSLL-2105 active.';
        setTimeout(respond, 1000);
    });

    document.getElementById('stuck').addEventListener('click', function () {
        active.tsh = true;
        apply();
        log.textContent = 'TSHH-2102 active, and XV-2107 does not close: the column is marked as a discrepancy and the chart says why.';
        setTimeout(function () {
            respond('xv07');
        }, 1000);
    });

    document.getElementById('spurious').addEventListener('click', function () {
        tripped.m23 = true;
        apply();
        log.textContent = 'M-2301 stopped with no active cause: the other kind of discrepancy.';
    });

    document.getElementById('bypass').addEventListener('click', function () {
        bypassed.tsh = !bypassed.tsh;
        this.textContent = bypassed.tsh ? 'Remove the TSHH-2102 bypass' : 'Bypass TSHH-2102';
        apply();
        log.textContent = bypassed.tsh ? 'TSHH-2102 bypassed: its row is hatched and it no longer counts towards an expected trip. The bypass is the plant\'s; the chart only shows it.' : 'Bypass removed.';
    });

    document.getElementById('reset').addEventListener('click', function () {
        active = {};
        tripped = {};
        apply();
        log.textContent = 'Reset.';
    });

    sis.addEventListener('cellClick', function (event) {
        const cause = causes.find(function (candidate) {
                return candidate.id === event.detail.cause;
            }),
            effect = effects.find(function (candidate) {
                return candidate.id === event.detail.effect;
            });

        log.textContent = event.detail.mark ?
            cause.tag + ' → ' + effect.tag + ': ' + event.detail.mark + (event.detail.link.delay ? ', ' + event.detail.link.delay + ' s' : '') + (event.detail.link.note ? ' - ' + event.detail.link.note : '') + '. A screen would open the interlock\'s logic here.' :
            cause.tag + ' does not act on ' + effect.tag + '.';
    });

    sis.addEventListener('effectClick', function (event) {
        const effect = effects.find(function (candidate) {
            return candidate.id === event.detail.effect;
        });

        log.textContent = effect.tag + ' is tripped by ' + event.detail.causes.map(function (link) {
            return causes.find(function (candidate) {
                return candidate.id === link.cause;
            }).tag;
        }).join(', ') + (event.detail.expected ? ' - expected to be tripped now.' : '.');
    });

    apply();

    /* ── The plant's own marks ──────────────────────────────────────────── */

    custom.marks = {
        'X': { label: 'Trip', trips: true },
        'D': { label: 'Delayed trip', trips: true },
        'H': { label: 'Hold', trips: false },
        'A': { label: 'Alarm', trips: false }
    };
    custom.causes = [
        { id: 'flame', tag: 'BSL-301', label: 'Flame failure', active: true },
        { id: 'gas', tag: 'PSL-302', label: 'Fuel gas pressure low' },
        { id: 'air', tag: 'FSL-303', label: 'Combustion air low' }
    ];
    custom.effects = [
        { id: 'fuel', tag: 'XV-301', label: 'Close fuel gas', tripped: true },
        { id: 'pilot', tag: 'XV-302', label: 'Close pilot gas', tripped: true },
        { id: 'relight', tag: 'BC-301', label: 'Relight permit' },
        { id: 'alarm', tag: 'UA-300', label: 'Furnace alarm', tripped: true }
    ];
    custom.matrix = [
        { cause: 'flame', effect: 'fuel', mark: 'X' },
        { cause: 'flame', effect: 'pilot', mark: 'X' },
        { cause: 'flame', effect: 'relight', mark: 'H', note: 'held until purge complete' },
        { cause: 'flame', effect: 'alarm', mark: 'X' },
        { cause: 'gas', effect: 'fuel', mark: 'X' },
        { cause: 'gas', effect: 'alarm', mark: 'X' },
        { cause: 'air', effect: 'fuel', mark: 'D', delay: 5 },
        { cause: 'air', effect: 'alarm', mark: 'A' }
    ];
}

angular/app.component.css

.smart-demo-container {
    max-width: 900px;
}

section {
    margin-bottom: 34px;
}

section h2 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 8px;
}

section p {
    color: var(--smart-text-secondary-color);
    margin: 0 0 14px;
    max-width: 74ch;
}

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

.demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.demo-actions button {
    background: transparent;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    color: var(--smart-text-secondary-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 7px 14px;
    text-transform: uppercase;
}

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

.demo-log,
.demo-counts {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    margin: 12px 0 0;
    color: var(--smart-text-tertiary-color);
}

smart-root-cause-tree {
    display: block;
    max-width: 720px;
    padding: 6px 0;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    background: var(--smart-industrial-panel-background, var(--smart-surface));
}

.demo-ranked {
    color: var(--smart-text-secondary-color);
    font-size: 12px;
}

.demo-line {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: flex-end;
    padding: 16px 18px;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
}

.demo-station {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--smart-text-secondary-color);
}

.demo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
}

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

.demo-actions select {
    font: inherit;
    padding: 4px 6px;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    background: var(--smart-background);
    color: var(--smart-text-color);
}

smart-cause-effect-matrix {
    --smart-cem-cause-width: 300px;
    --smart-cem-effect-height: 170px;
    width: fit-content;
    max-width: 100%;
}

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


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* Cause and effect matrix overview.
 *
 * The chart is written by hand here in the shape the safety engineer's document takes;
 * a plant's is read from its SIS configuration and assigned unchanged. The states - which
 * causes are active, which effects are tripped - come from the safety PLC's status words,
 * and here from the buttons. */

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 sis = document.getElementById('sis'),
                custom = document.getElementById('custom'),
                log = document.getElementById('log'),
                verdict = document.getElementById('verdict');

            const causes = [
                { id: 'psh', tag: 'PSHH-2101', label: 'Reactor pressure high high' },
                { id: 'tsh', tag: 'TSHH-2102', label: 'Reactor temperature high high' },
                { id: 'lsl', tag: 'LSLL-2105', label: 'Feed drum level low low' },
                { id: 'fsl', tag: 'FSLL-2104', label: 'Cooling water flow low low' },
                { id: 'esd', tag: 'HS-2100', label: 'Unit emergency stop' }
            ];
            const effects = [
                { id: 'xv04', tag: 'XV-2104', label: 'Close feed isolation' },
                { id: 'p01', tag: 'P-2101A/B', label: 'Stop feed pumps' },
                { id: 'xv07', tag: 'XV-2107', label: 'Close steam to jacket' },
                { id: 'xv09', tag: 'XV-2109', label: 'Open depressuring' },
                { id: 'm23', tag: 'M-2301', label: 'Stop agitator' },
                { id: 'al', tag: 'UA-2100', label: 'Unit alarm' }
            ];
            sis.causes = causes;
            sis.effects = effects;
            sis.matrix = [
                { cause: 'psh', effect: 'xv04', mark: 'X' },
                { cause: 'psh', effect: 'p01', mark: 'X' },
                { cause: 'psh', effect: 'xv07', mark: 'X' },
                { cause: 'psh', effect: 'xv09', mark: 'T', delay: 30, note: 'after the feed is isolated' },
                { cause: 'psh', effect: 'al', mark: 'X' },
                { cause: 'tsh', effect: 'xv04', mark: 'X' },
                { cause: 'tsh', effect: 'xv07', mark: 'X' },
                { cause: 'tsh', effect: 'm23', mark: 'A' },
                { cause: 'tsh', effect: 'al', mark: 'X' },
                { cause: 'lsl', effect: 'p01', mark: 'X' },
                { cause: 'lsl', effect: 'al', mark: 'X' },
                { cause: 'fsl', effect: 'xv07', mark: 'X' },
                { cause: 'fsl', effect: 'p01', mark: 'T', delay: 60 },
                { cause: 'fsl', effect: 'al', mark: 'X' },
                { cause: 'esd', effect: 'xv04', mark: 'X' },
                { cause: 'esd', effect: 'p01', mark: 'X' },
                { cause: 'esd', effect: 'xv07', mark: 'X' },
                { cause: 'esd', effect: 'xv09', mark: 'X' },
                { cause: 'esd', effect: 'm23', mark: 'X' },
                { cause: 'esd', effect: 'al', mark: 'X' }
            ];

            /* ── The stand-in safety PLC ────────────────────────────────────────── */

            let active = {},
                tripped = {},
                bypassed = {};

            function apply() {
                sis.causes = causes.map(function (cause) {
                    return { id: cause.id, tag: cause.tag, label: cause.label, active: !!active[cause.id], bypassed: !!bypassed[cause.id] };
                });
                sis.effects = effects.map(function (effect) {
                    return { id: effect.id, tag: effect.tag, label: effect.label, tripped: !!tripped[effect.id] };
                });

                const bad = sis.discrepancies();

                verdict.textContent = bad.length ?
                    bad.map(function (item) {
                        const effect = effects.find(function (candidate) {
                            return candidate.id === item.effect;
                        });

                        return effect.tag + (item.expected ? ' should have tripped and has not' : ' tripped with no active cause');
                    }).join('; ') + '.' :
                    'The plant agrees with the chart.';
            }

            /* the PLC trips what the chart says, except where a final element is stuck */
            function respond(stuck) {
                effects.forEach(function (effect) {
                    if (sis.expected(effect.id) && effect.id !== stuck) {
                        tripped[effect.id] = true;
                    }
                });
                apply();
            }

            document.getElementById('pressure').addEventListener('click', function () {
                active.psh = true;
                apply();
                log.textContent = 'PSHH-2101 active: the row lights, and the effects it should trip are expected. The PLC answers in a second.';
                setTimeout(respond, 1000);
            });

            document.getElementById('level').addEventListener('click', function () {
                active.lsl = true;
                apply();
                log.textContent = 'LSLL-2105 active.';
                setTimeout(respond, 1000);
            });

            document.getElementById('stuck').addEventListener('click', function () {
                active.tsh = true;
                apply();
                log.textContent = 'TSHH-2102 active, and XV-2107 does not close: the column is marked as a discrepancy and the chart says why.';
                setTimeout(function () {
                    respond('xv07');
                }, 1000);
            });

            document.getElementById('spurious').addEventListener('click', function () {
                tripped.m23 = true;
                apply();
                log.textContent = 'M-2301 stopped with no active cause: the other kind of discrepancy.';
            });

            document.getElementById('bypass').addEventListener('click', function () {
                bypassed.tsh = !bypassed.tsh;
                this.textContent = bypassed.tsh ? 'Remove the TSHH-2102 bypass' : 'Bypass TSHH-2102';
                apply();
                log.textContent = bypassed.tsh ? 'TSHH-2102 bypassed: its row is hatched and it no longer counts towards an expected trip. The bypass is the plant\'s; the chart only shows it.' : 'Bypass removed.';
            });

            document.getElementById('reset').addEventListener('click', function () {
                active = {};
                tripped = {};
                apply();
                log.textContent = 'Reset.';
            });

            sis.addEventListener('cellClick', function (event) {
                const cause = causes.find(function (candidate) {
                        return candidate.id === event.detail.cause;
                    }),
                    effect = effects.find(function (candidate) {
                        return candidate.id === event.detail.effect;
                    });

                log.textContent = event.detail.mark ?
                    cause.tag + ' → ' + effect.tag + ': ' + event.detail.mark + (event.detail.link.delay ? ', ' + event.detail.link.delay + ' s' : '') + (event.detail.link.note ? ' - ' + event.detail.link.note : '') + '. A screen would open the interlock\'s logic here.' :
                    cause.tag + ' does not act on ' + effect.tag + '.';
            });

            sis.addEventListener('effectClick', function (event) {
                const effect = effects.find(function (candidate) {
                    return candidate.id === event.detail.effect;
                });

                log.textContent = effect.tag + ' is tripped by ' + event.detail.causes.map(function (link) {
                    return causes.find(function (candidate) {
                        return candidate.id === link.cause;
                    }).tag;
                }).join(', ') + (event.detail.expected ? ' - expected to be tripped now.' : '.');
            });

            apply();

            /* ── The plant's own marks ──────────────────────────────────────────── */

            custom.marks = {
                'X': { label: 'Trip', trips: true },
                'D': { label: 'Delayed trip', trips: true },
                'H': { label: 'Hold', trips: false },
                'A': { label: 'Alarm', trips: false }
            };
            custom.causes = [
                { id: 'flame', tag: 'BSL-301', label: 'Flame failure', active: true },
                { id: 'gas', tag: 'PSL-302', label: 'Fuel gas pressure low' },
                { id: 'air', tag: 'FSL-303', label: 'Combustion air low' }
            ];
            custom.effects = [
                { id: 'fuel', tag: 'XV-301', label: 'Close fuel gas', tripped: true },
                { id: 'pilot', tag: 'XV-302', label: 'Close pilot gas', tripped: true },
                { id: 'relight', tag: 'BC-301', label: 'Relight permit' },
                { id: 'alarm', tag: 'UA-300', label: 'Furnace alarm', tripped: true }
            ];
            custom.matrix = [
                { cause: 'flame', effect: 'fuel', mark: 'X' },
                { cause: 'flame', effect: 'pilot', mark: 'X' },
                { cause: 'flame', effect: 'relight', mark: 'H', note: 'held until purge complete' },
                { cause: 'flame', effect: 'alarm', mark: 'X' },
                { cause: 'gas', effect: 'fuel', mark: 'X' },
                { cause: 'gas', effect: 'alarm', mark: 'X' },
                { cause: 'air', effect: 'fuel', mark: 'D', delay: 5 },
                { cause: 'air', effect: 'alarm', mark: 'A' }
            ];
        });

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

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.CauseEffectMatrix displays the cause and effect chart of a safety instrumented system as a live matrix.</h2>
                    <p>The rows are the causes (the initiators) and the columns are the effects (the final elements). A mark in a cell shows how a cause acts on an effect: <code>X</code> for a trip, <code>T</code> for a timed trip, <code>P</code> for a permissive and <code>A</code> for an alarm only. The component highlights the causes that are currently active and the effects that are currently tripped, and compares the two with the chart: an effect that should have tripped and did not, or that tripped without an active cause, is marked as a discrepancy in its column header.</p>
                </section>
                <section>
                    <h2>Unit 200 safety system</h2>
                    <CauseEffectMatrix id="sis" label="Unit 200 SIS"></CauseEffectMatrix>
                    <div className="demo-actions">
                        <button type="button" id="pressure">High pressure trip</button>
                        <button type="button" id="level">Low level trip</button>
                        <button type="button" id="stuck">Valve fails to close</button>
                        <button type="button" id="spurious">Spurious trip</button>
                        <button type="button" id="bypass">Bypass TSHH-2102</button>
                        <button type="button" id="reset">Reset</button>
                    </div>
                    <p className="demo-log" id="log">Use Tab to focus the matrix. The arrow keys move between cells, Home and End move to the start and end of a row, Ctrl+Home and Ctrl+End move to the corners, and Enter opens a cell.</p>
                    <p className="demo-log" id="verdict"></p>
                </section>
                <section>
                    <h2>Custom marks</h2>
                    <p>The <code>marks</code> property defines the letters used in the chart and which of them represent a trip. In this example <code>H</code> is a hold that prevents an effect from being reset; it is not a trip.</p>
                    <CauseEffectMatrix id="custom" label="Furnace F-301" showLegend></CauseEffectMatrix>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

.smart-demo-container {
    max-width: 900px;
}

section {
    margin-bottom: 34px;
}

section h2 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 8px;
}

section p {
    color: var(--smart-text-secondary-color);
    margin: 0 0 14px;
    max-width: 74ch;
}

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

.demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.demo-actions button {
    background: transparent;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    color: var(--smart-text-secondary-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 7px 14px;
    text-transform: uppercase;
}

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

.demo-log,
.demo-counts {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    margin: 12px 0 0;
    color: var(--smart-text-tertiary-color);
}

smart-root-cause-tree {
    display: block;
    max-width: 720px;
    padding: 6px 0;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    background: var(--smart-industrial-panel-background, var(--smart-surface));
}

.demo-ranked {
    color: var(--smart-text-secondary-color);
    font-size: 12px;
}

.demo-line {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: flex-end;
    padding: 16px 18px;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
}

.demo-station {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--smart-text-secondary-color);
}

.demo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
}

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

.demo-actions select {
    font: inherit;
    padding: 4px 6px;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    background: var(--smart-background);
    color: var(--smart-text-color);
}

smart-cause-effect-matrix {
    --smart-cem-cause-width: 300px;
    --smart-cem-effect-height: 170px;
    width: fit-content;
    max-width: 100%;
}

/* ── 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.CauseEffectMatrix displays the cause and effect chart of a safety instrumented system as a live matrix.</h2>
            <p>
                The rows are the causes (the initiators) and the columns are the effects (the final elements). A mark in a cell shows how a cause acts on an effect: <code>X</code> for a trip, <code>T</code> for a timed trip, <code>P</code> for a permissive and <code>A</code> for an alarm only. The component highlights the causes that are currently active and the effects that are currently tripped, and compares the two with the chart: an effect that should have tripped and did not, or that tripped without an active cause, is marked as a discrepancy in its column header.
            </p>
        </section>

        <section>
            <h2>Unit 200 safety system</h2>
            <smart-cause-effect-matrix id="sis" label="Unit 200 SIS"></smart-cause-effect-matrix>
            <div class="demo-actions">
                <button type="button" id="pressure">High pressure trip</button>
                <button type="button" id="level">Low level trip</button>
                <button type="button" id="stuck">Valve fails to close</button>
                <button type="button" id="spurious">Spurious trip</button>
                <button type="button" id="bypass">Bypass TSHH-2102</button>
                <button type="button" id="reset">Reset</button>
            </div>
            <p class="demo-log" id="log">Use Tab to focus the matrix. The arrow keys move between cells, Home and End move to the start and end of a row, Ctrl+Home and Ctrl+End move to the corners, and Enter opens a cell.</p>
            <p class="demo-log" id="verdict"></p>
        </section>

        <section>
            <h2>Custom marks</h2>
            <p>
                The <code>marks</code> property defines the letters used in the chart and which of them represent a trip. In this example <code>H</code> is a hold that prevents an effect from being reset; it is not a trip.
            </p>
            <smart-cause-effect-matrix id="custom" label="Furnace F-301" show-legend></smart-cause-effect-matrix>
        </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.causeeffectmatrix.js";


/* Cause and effect matrix overview.
 *
 * The chart is written by hand here in the shape the safety engineer's document takes;
 * a plant's is read from its SIS configuration and assigned unchanged. The states - which
 * causes are active, which effects are tripped - come from the safety PLC's status words,
 * and here from the buttons. */

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 sis = document.getElementById('sis'),
            custom = document.getElementById('custom'),
            log = document.getElementById('log'),
            verdict = document.getElementById('verdict');

        const causes = [
            { id: 'psh', tag: 'PSHH-2101', label: 'Reactor pressure high high' },
            { id: 'tsh', tag: 'TSHH-2102', label: 'Reactor temperature high high' },
            { id: 'lsl', tag: 'LSLL-2105', label: 'Feed drum level low low' },
            { id: 'fsl', tag: 'FSLL-2104', label: 'Cooling water flow low low' },
            { id: 'esd', tag: 'HS-2100', label: 'Unit emergency stop' }
        ];
        const effects = [
            { id: 'xv04', tag: 'XV-2104', label: 'Close feed isolation' },
            { id: 'p01', tag: 'P-2101A/B', label: 'Stop feed pumps' },
            { id: 'xv07', tag: 'XV-2107', label: 'Close steam to jacket' },
            { id: 'xv09', tag: 'XV-2109', label: 'Open depressuring' },
            { id: 'm23', tag: 'M-2301', label: 'Stop agitator' },
            { id: 'al', tag: 'UA-2100', label: 'Unit alarm' }
        ];
        sis.causes = causes;
        sis.effects = effects;
        sis.matrix = [
            { cause: 'psh', effect: 'xv04', mark: 'X' },
            { cause: 'psh', effect: 'p01', mark: 'X' },
            { cause: 'psh', effect: 'xv07', mark: 'X' },
            { cause: 'psh', effect: 'xv09', mark: 'T', delay: 30, note: 'after the feed is isolated' },
            { cause: 'psh', effect: 'al', mark: 'X' },
            { cause: 'tsh', effect: 'xv04', mark: 'X' },
            { cause: 'tsh', effect: 'xv07', mark: 'X' },
            { cause: 'tsh', effect: 'm23', mark: 'A' },
            { cause: 'tsh', effect: 'al', mark: 'X' },
            { cause: 'lsl', effect: 'p01', mark: 'X' },
            { cause: 'lsl', effect: 'al', mark: 'X' },
            { cause: 'fsl', effect: 'xv07', mark: 'X' },
            { cause: 'fsl', effect: 'p01', mark: 'T', delay: 60 },
            { cause: 'fsl', effect: 'al', mark: 'X' },
            { cause: 'esd', effect: 'xv04', mark: 'X' },
            { cause: 'esd', effect: 'p01', mark: 'X' },
            { cause: 'esd', effect: 'xv07', mark: 'X' },
            { cause: 'esd', effect: 'xv09', mark: 'X' },
            { cause: 'esd', effect: 'm23', mark: 'X' },
            { cause: 'esd', effect: 'al', mark: 'X' }
        ];

        /* ── The stand-in safety PLC ────────────────────────────────────────── */

        let active = {},
            tripped = {},
            bypassed = {};

        function apply() {
            sis.causes = causes.map(function (cause) {
                return { id: cause.id, tag: cause.tag, label: cause.label, active: !!active[cause.id], bypassed: !!bypassed[cause.id] };
            });
            sis.effects = effects.map(function (effect) {
                return { id: effect.id, tag: effect.tag, label: effect.label, tripped: !!tripped[effect.id] };
            });

            const bad = sis.discrepancies();

            verdict.textContent = bad.length ?
                bad.map(function (item) {
                    const effect = effects.find(function (candidate) {
                        return candidate.id === item.effect;
                    });

                    return effect.tag + (item.expected ? ' should have tripped and has not' : ' tripped with no active cause');
                }).join('; ') + '.' :
                'The plant agrees with the chart.';
        }

        /* the PLC trips what the chart says, except where a final element is stuck */
        function respond(stuck) {
            effects.forEach(function (effect) {
                if (sis.expected(effect.id) && effect.id !== stuck) {
                    tripped[effect.id] = true;
                }
            });
            apply();
        }

        document.getElementById('pressure').addEventListener('click', function () {
            active.psh = true;
            apply();
            log.textContent = 'PSHH-2101 active: the row lights, and the effects it should trip are expected. The PLC answers in a second.';
            setTimeout(respond, 1000);
        });

        document.getElementById('level').addEventListener('click', function () {
            active.lsl = true;
            apply();
            log.textContent = 'LSLL-2105 active.';
            setTimeout(respond, 1000);
        });

        document.getElementById('stuck').addEventListener('click', function () {
            active.tsh = true;
            apply();
            log.textContent = 'TSHH-2102 active, and XV-2107 does not close: the column is marked as a discrepancy and the chart says why.';
            setTimeout(function () {
                respond('xv07');
            }, 1000);
        });

        document.getElementById('spurious').addEventListener('click', function () {
            tripped.m23 = true;
            apply();
            log.textContent = 'M-2301 stopped with no active cause: the other kind of discrepancy.';
        });

        document.getElementById('bypass').addEventListener('click', function () {
            bypassed.tsh = !bypassed.tsh;
            this.textContent = bypassed.tsh ? 'Remove the TSHH-2102 bypass' : 'Bypass TSHH-2102';
            apply();
            log.textContent = bypassed.tsh ? 'TSHH-2102 bypassed: its row is hatched and it no longer counts towards an expected trip. The bypass is the plant\'s; the chart only shows it.' : 'Bypass removed.';
        });

        document.getElementById('reset').addEventListener('click', function () {
            active = {};
            tripped = {};
            apply();
            log.textContent = 'Reset.';
        });

        sis.addEventListener('cellClick', function (event) {
            const cause = causes.find(function (candidate) {
                    return candidate.id === event.detail.cause;
                }),
                effect = effects.find(function (candidate) {
                    return candidate.id === event.detail.effect;
                });

            log.textContent = event.detail.mark ?
                cause.tag + ' → ' + effect.tag + ': ' + event.detail.mark + (event.detail.link.delay ? ', ' + event.detail.link.delay + ' s' : '') + (event.detail.link.note ? ' - ' + event.detail.link.note : '') + '. A screen would open the interlock\'s logic here.' :
                cause.tag + ' does not act on ' + effect.tag + '.';
        });

        sis.addEventListener('effectClick', function (event) {
            const effect = effects.find(function (candidate) {
                return candidate.id === event.detail.effect;
            });

            log.textContent = effect.tag + ' is tripped by ' + event.detail.causes.map(function (link) {
                return causes.find(function (candidate) {
                    return candidate.id === link.cause;
                }).tag;
            }).join(', ') + (event.detail.expected ? ' - expected to be tripped now.' : '.');
        });

        apply();

        /* ── The plant's own marks ──────────────────────────────────────────── */

        custom.marks = {
            'X': { label: 'Trip', trips: true },
            'D': { label: 'Delayed trip', trips: true },
            'H': { label: 'Hold', trips: false },
            'A': { label: 'Alarm', trips: false }
        };
        custom.causes = [
            { id: 'flame', tag: 'BSL-301', label: 'Flame failure', active: true },
            { id: 'gas', tag: 'PSL-302', label: 'Fuel gas pressure low' },
            { id: 'air', tag: 'FSL-303', label: 'Combustion air low' }
        ];
        custom.effects = [
            { id: 'fuel', tag: 'XV-301', label: 'Close fuel gas', tripped: true },
            { id: 'pilot', tag: 'XV-302', label: 'Close pilot gas', tripped: true },
            { id: 'relight', tag: 'BC-301', label: 'Relight permit' },
            { id: 'alarm', tag: 'UA-300', label: 'Furnace alarm', tripped: true }
        ];
        custom.matrix = [
            { cause: 'flame', effect: 'fuel', mark: 'X' },
            { cause: 'flame', effect: 'pilot', mark: 'X' },
            { cause: 'flame', effect: 'relight', mark: 'H', note: 'held until purge complete' },
            { cause: 'flame', effect: 'alarm', mark: 'X' },
            { cause: 'gas', effect: 'fuel', mark: 'X' },
            { cause: 'gas', effect: 'alarm', mark: 'X' },
            { cause: 'air', effect: 'fuel', mark: 'D', delay: 5 },
            { cause: 'air', effect: 'alarm', mark: 'A' }
        ];
      });
    });
  }
};
</script>

<style>
.smart-demo-container {
    max-width: 900px;
}

section {
    margin-bottom: 34px;
}

section h2 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 8px;
}

section p {
    color: var(--smart-text-secondary-color);
    margin: 0 0 14px;
    max-width: 74ch;
}

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

.demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.demo-actions button {
    background: transparent;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    color: var(--smart-text-secondary-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 7px 14px;
    text-transform: uppercase;
}

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

.demo-log,
.demo-counts {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    margin: 12px 0 0;
    color: var(--smart-text-tertiary-color);
}

smart-root-cause-tree {
    display: block;
    max-width: 720px;
    padding: 6px 0;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    background: var(--smart-industrial-panel-background, var(--smart-surface));
}

.demo-ranked {
    color: var(--smart-text-secondary-color);
    font-size: 12px;
}

.demo-line {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: flex-end;
    padding: 16px 18px;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
}

.demo-station {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--smart-text-secondary-color);
}

.demo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: flex-start;
}

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

.demo-actions select {
    font: inherit;
    padding: 4px 6px;
    border: 1px solid var(--smart-border);
    border-radius: var(--smart-border-radius);
    background: var(--smart-background);
    color: var(--smart-text-color);
}

smart-cause-effect-matrix {
    --smart-cem-cause-width: 300px;
    --smart-cem-effect-height: 170px;
    width: fit-content;
    max-width: 100%;
}

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