Audit Trail

angular/app.component.html

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

        <section id="overview">
            <h2>Smart.AuditTrail displays a computer-generated, time-stamped audit trail for review: who made a change, when, what was changed, the previous and the new value, and whether the entries are intact.</h2>
            <p>
                <code>Smart.Industrial.Audit.Trail</code> stamps every entry with the time and its UTC offset, keeps the previous value next to the new one and links each entry to the previous one with a hash. <code>smart-audit-trail</code> displays the entries, provides search and filters, exports the trail with its hashes, and verifies the hash chain. An entry that was altered, removed or reordered in a copy breaks the chain from that point on, and the component shows where. Neither the trail nor the component stores data; the application persists the entries and reloads them with <code>Trail.from()</code>.
            </p>
        </section>

        <section>
            <h2>Changing a setpoint with a signature</h2>
            <p>
                The setpoint of FIC-101 is a GMP-critical parameter, so a change requires a reason and an electronic signature (user <b>jdoe</b>, password <code>operator1</code>). The keypad rejects values outside 0&ndash;120, the signature panel requires a reason, and the audit trail records the change with both values and the signature. Click <em>Show a tampered copy</em> to alter one exported entry and see the chain break.
            </p>
            <div class="flow">
                <div class="loop">
                    <div class="loop-row"><span>FIC-101 setpoint</span><b id="setpoint">78.0 m³/h</b></div>
                    <div class="loop-row"><span>Signed in</span><b>jdoe (John Doe)</b></div>
                    <button id="change" type="button" class="demo-button demo-button-primary">Change setpoint</button>
                    <smart-numeric-keypad id="keypad" label="FIC-101 setpoint" unit="m³/h" [min]="0" [max]="120" [precisionDigits]="1" [allowNegative]="false"></smart-numeric-keypad>
                </div>
                <smart-esignature id="sign" label="Sign the change" [requireReason]="true" [lockMeaning]="true" meaning="responsible" session-user-id="jdoe" session-user-name="John Doe" [continuousSession]="true" [autoClose]="1500"></smart-esignature>
            </div>
            <div class="demo-actions">
                <label><input type="checkbox" id="tamper" /> Show a tampered copy</label>
                <label><input type="checkbox" id="ms" /> Milliseconds</label>
                <label><input type="checkbox" id="touch" /> Touch density</label>
                <span id="status" class="status"></span>
            </div>
            <smart-audit-trail id="audit" label="Line 3 HMI audit trail" [showReview]="true"></smart-audit-trail>
            <p class="hint">
                Keyboard: Tab to the rows, use the arrow keys to move, and press Enter to select a row and raise <code>entrySelect</code>. The Time column header sorts the entries. The integrity badge is a status message and a broken chain is announced to screen readers.
            </p>
        </section>

    </div>
</div>

angular/app.component.ts

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

import { NumericKeypadModule } from 'smart-industrial/angular/numerickeypad';
import { ESignatureModule } from 'smart-industrial/angular/esignature';
import { AuditTrailModule } from 'smart-industrial/angular/audittrail';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - AuditTrail 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: [NumericKeypadModule, ESignatureModule, AuditTrailModule],
    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. */
declare const Smart: any;

/* A setpoint change that needs a reason and a signature, recorded in a hash-chained trail.
   The keypad raises change, the signature panel raises signRequest and signed, the trail
   appends, the viewer follows. Replace `directory.verify` with the identity provider and
   `persist` with the server write; the trail and viewer do not change. */

export function runDemo(): void {
    const Audit = Smart.Industrial.Audit,
        keypad = document.getElementById('keypad'),
        sign = document.getElementById('sign'),
        audit = document.getElementById('audit'),
        change = document.getElementById('change'),
        setpointText = document.getElementById('setpoint'),
        status = document.getElementById('status'),
        tamper = document.getElementById('tamper'),
        ms = document.getElementById('ms'),
        touch = document.getElementById('touch');

    const directory = {
        jdoe: { password: 'operator1', name: 'John Doe' },
        asmith: { password: 'qa2026', name: 'Alice Smith' }
    };

    let setpoint = 78;

    /* ── A trail with a morning's worth of entries ──────────────────────── */
    const start = Date.now() - 6 * 3600 * 1000;
    let clockAt = start;

    const trail = new Audit.Trail({
        system: 'Line 3 HMI',
        clock: function () {
            return new Date(clockAt);
        }
    });

    function seed(minutesLater, entry) {
        clockAt += minutesLater * 60 * 1000 + Math.floor(Math.random() * 900);
        return trail.append(entry);
    }

    seed(0, { user: 'jdoe', userName: 'John Doe', action: 'login', record: 'Line 3 HMI' });
    seed(4, { user: 'jdoe', userName: 'John Doe', action: 'download', record: 'Recipe IBU-400-C', field: 'version', oldValue: 'v12', newValue: 'v13', reason: 'Change control CC-2026-041' });
    seed(9, { user: 'jdoe', userName: 'John Doe', action: 'update', record: 'FIC-101', field: 'setpoint', oldValue: 75, newValue: 78, reason: 'Recipe step 2', signature: { id: 'sig-1', userId: 'jdoe', userName: 'John Doe', meaning: 'responsible', at: Audit.stamp(new Date(clockAt)), recordHash: Audit.recordHash({ record: 'FIC-101', field: 'setpoint', value: 78 }) } });
    seed(31, { user: 'jdoe', userName: 'John Doe', action: 'acknowledge', record: 'PAH-102', field: 'alarm', oldValue: 'unacknowledged', newValue: 'acknowledged' });
    seed(2, { user: 'jdoe', userName: 'John Doe', action: 'shelve', record: 'PAH-102', field: 'alarm', oldValue: 'active', newValue: 'shelved 30 min', reason: 'Known transient during CIP' });
    seed(58, { user: 'asmith', userName: 'Alice Smith', action: 'login', record: 'Line 3 HMI' });
    seed(3, { user: 'asmith', userName: 'Alice Smith', action: 'review', record: 'Line 3 HMI audit trail', field: 'range', oldValue: '#1', newValue: '#5', signature: { id: 'sig-2', userId: 'asmith', userName: 'Alice Smith', meaning: 'reviewed', at: Audit.stamp(new Date(clockAt)), recordHash: Audit.recordHash({ range: [1, 5] }) } });
    seed(6, { user: 'asmith', userName: 'Alice Smith', action: 'update', record: 'TIC-205', field: 'high alarm limit', oldValue: 85, newValue: 88, reason: 'Deviation DEV-0331 CAPA' });
    seed(1, { user: 'asmith', userName: 'Alice Smith', action: 'logout', record: 'Line 3 HMI' });
    seed(44, { user: 'jdoe', userName: 'John Doe', action: 'reject', record: 'FIC-101', field: 'setpoint', oldValue: 78, newValue: 135, reason: 'Above the maximum of 120 m³/h' });
    seed(0, { user: 'unknown', action: 'lockout', record: 'Line 3 HMI', field: 'user', newValue: 'mwilson', reason: '3 failed attempts' });
    seed(20, { user: 'jdoe', userName: 'John Doe', action: 'update', record: 'LIC-301', field: 'setpoint', oldValue: 62, newValue: 60, reason: 'Level trending high', signature: { id: 'sig-3', userId: 'jdoe', userName: 'John Doe', meaning: 'responsible', at: Audit.stamp(new Date(clockAt)), recordHash: Audit.recordHash({ record: 'LIC-301', field: 'setpoint', value: 60 }) } });

    /* From here on the trail stamps real time. */
    trail._clock = function () {
        return new Date();
    };

    audit.entries = trail.entries();
    trail.subscribe(function (entry) {
        if (!tamper.checked) {
            audit.addEntry(entry);
        }

        persist(entry);
    });

    function persist(entry) {
        /* The server's copy. Here: nowhere. */
        status.textContent = 'Entry #' + entry.seq + ' written, hash ' + entry.hash.substring(0, 12) + '…';
    }

    /* ── The change ─────────────────────────────────────────────────────── */
    change.addEventListener('click', function () {
        keypad.style.display = '';
        keypad.open(setpoint);
        change.disabled = true;
    });

    keypad.addEventListener('cancel', function () {
        keypad.style.display = 'none';
        change.disabled = false;
    });

    keypad.addEventListener('invalid', function (event) {
        /* A refusal is an event worth a record: someone tried to set 135. */
        trail.append({ user: 'jdoe', userName: 'John Doe', action: 'reject', record: 'FIC-101', field: 'setpoint', oldValue: setpoint, newValue: event.detail.text, reason: keypad.querySelector('.smart-keypad-message').textContent });
    });

    keypad.addEventListener('change', function (event) {
        const requested = event.detail.value,
            previous = setpoint;

        keypad.style.display = 'none';

        /* The value that will be written, hashed into the signature. */
        sign.sign({ id: 'FIC-101.SP', title: 'FIC-101 setpoint', fields: [{ label: 'From', value: previous + ' m³/h' }, { label: 'To', value: requested + ' m³/h' }] }).then(function (signature) {
            setpoint = requested;
            setpointText.textContent = setpoint.toFixed(1) + ' m³/h';

            trail.append({
                user: signature.userId,
                userName: signature.userName,
                action: 'update',
                record: 'FIC-101',
                field: 'setpoint',
                oldValue: previous,
                newValue: requested,
                reason: signature.reason,
                signature: signature
            });
            change.disabled = false;
        }, function () {
            change.disabled = false;
        });
    });

    sign.addEventListener('signRequest', function (event) {
        const detail = event.detail;

        setTimeout(function () {
            const user = directory[detail.userId];

            if (user && user.password === detail.password) {
                sign.accept({ userName: user.name });
            }
            else {
                sign.reject();
            }
        }, 500);
    });

    sign.addEventListener('lockout', function (event) {
        trail.append({ user: 'unknown', action: 'lockout', record: 'Line 3 HMI', field: 'user', newValue: event.detail.userId, reason: event.detail.attempts + ' failed attempts' });
    });

    /* ── The viewer ─────────────────────────────────────────────────────── */
    audit.addEventListener('entrySelect', function (event) {
        const entry = event.detail.entry;

        status.textContent = '#' + entry.seq + ' ' + entry.action + ' by ' + (entry.userName || entry.user) + ' at ' + Audit.formatStamp(entry.at) + (entry.signature ? ' - ' + Audit.manifest(entry.signature) : '');
    });

    audit.addEventListener('reviewRequest', function (event) {
        const entries = event.detail.entries,
            seqs = entries.map(function (entry) {
                return entry.seq;
            });

        sign.sign({ id: 'review', title: 'Audit trail review', fields: [{ label: 'Entries', value: entries.length }, { label: 'Range', value: '#' + Math.min.apply(null, seqs) + ' to #' + Math.max.apply(null, seqs) }] }, { meaning: 'reviewed' }).then(function (signature) {
            trail.append({ user: signature.userId, userName: signature.userName, action: 'review', record: 'Line 3 HMI audit trail', field: 'range', oldValue: '#' + Math.min.apply(null, seqs), newValue: '#' + Math.max.apply(null, seqs), reason: signature.reason, signature: signature });
        }, function () { });
    });

    audit.addEventListener('export', function (event) {
        trail.append({ user: 'jdoe', userName: 'John Doe', action: 'download', record: 'Line 3 HMI audit trail', field: 'export', newValue: event.detail.fileName, reason: event.detail.count + ' entries' });
    });

    /* ── A copy with one entry altered ──────────────────────────────────── */
    tamper.addEventListener('change', function () {
        if (tamper.checked) {
            const copy = JSON.parse(JSON.stringify(trail.entries()));

            /* The recipe download now claims v12 → v12: the change is gone from the copy. */
            copy[1].newValue = 'v12';
            audit.entries = copy;
            status.textContent = 'Copy shown: entry #2 altered after the fact';
        }
        else {
            audit.entries = trail.entries();
            status.textContent = 'The written trail';
        }
    });

    ms.addEventListener('change', function () {
        audit.showMilliseconds = ms.checked;
    });

    touch.addEventListener('change', function () {
        [audit, keypad, sign].forEach(function (element) {
            element.density = touch.checked ? 'touch' : 'normal';
        });
    });

    keypad.style.display = 'none';
}

angular/app.component.css

.flow {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(320px, 440px);
    gap: 24px;
    align-items: start;
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .flow {
        grid-template-columns: 1fr;
    }
}

.loop {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loop-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    font-size: 13px;
}

.loop-row b {
    font-variant-numeric: tabular-nums;
}

.demo-button {
    align-self: flex-start;
    min-height: 34px;
    padding: 0 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--smart-text-color);
    background: var(--smart-surface);
    border: 1px solid var(--smart-border);
    border-radius: 4px;
    cursor: pointer;
}

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

.demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.demo-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 12px;
}

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

.status {
    font-size: 12px;
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

react/App.jsx

import 'smart-industrial/source/styles/smart.default.css';
import 'smart-industrial/source/styles/smart.industrial-elements.css';
import 'smart-industrial/source/styles/smart.industrial.css';
import 'smart-industrial/source/styles/smart.industrial-dark.css';
import './App.css';
import React from 'react';
import { NumericKeypad } from 'smart-industrial/react/numerickeypad';
import { ESignature } from 'smart-industrial/react/esignature';
import { AuditTrail } from 'smart-industrial/react/audittrail';

const Smart = window.Smart;

/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* A setpoint change that needs a reason and a signature, recorded in a hash-chained trail.
   The keypad raises change, the signature panel raises signRequest and signed, the trail
   appends, the viewer follows. Replace `directory.verify` with the identity provider and
   `persist` with the server write; the trail and viewer do not change. */

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 Audit = Smart.Industrial.Audit,
                keypad = document.getElementById('keypad'),
                sign = document.getElementById('sign'),
                audit = document.getElementById('audit'),
                change = document.getElementById('change'),
                setpointText = document.getElementById('setpoint'),
                status = document.getElementById('status'),
                tamper = document.getElementById('tamper'),
                ms = document.getElementById('ms'),
                touch = document.getElementById('touch');

            const directory = {
                jdoe: { password: 'operator1', name: 'John Doe' },
                asmith: { password: 'qa2026', name: 'Alice Smith' }
            };

            let setpoint = 78;

            /* ── A trail with a morning's worth of entries ──────────────────────── */
            const start = Date.now() - 6 * 3600 * 1000;
            let clockAt = start;

            const trail = new Audit.Trail({
                system: 'Line 3 HMI',
                clock: function () {
                    return new Date(clockAt);
                }
            });

            function seed(minutesLater, entry) {
                clockAt += minutesLater * 60 * 1000 + Math.floor(Math.random() * 900);
                return trail.append(entry);
            }

            seed(0, { user: 'jdoe', userName: 'John Doe', action: 'login', record: 'Line 3 HMI' });
            seed(4, { user: 'jdoe', userName: 'John Doe', action: 'download', record: 'Recipe IBU-400-C', field: 'version', oldValue: 'v12', newValue: 'v13', reason: 'Change control CC-2026-041' });
            seed(9, { user: 'jdoe', userName: 'John Doe', action: 'update', record: 'FIC-101', field: 'setpoint', oldValue: 75, newValue: 78, reason: 'Recipe step 2', signature: { id: 'sig-1', userId: 'jdoe', userName: 'John Doe', meaning: 'responsible', at: Audit.stamp(new Date(clockAt)), recordHash: Audit.recordHash({ record: 'FIC-101', field: 'setpoint', value: 78 }) } });
            seed(31, { user: 'jdoe', userName: 'John Doe', action: 'acknowledge', record: 'PAH-102', field: 'alarm', oldValue: 'unacknowledged', newValue: 'acknowledged' });
            seed(2, { user: 'jdoe', userName: 'John Doe', action: 'shelve', record: 'PAH-102', field: 'alarm', oldValue: 'active', newValue: 'shelved 30 min', reason: 'Known transient during CIP' });
            seed(58, { user: 'asmith', userName: 'Alice Smith', action: 'login', record: 'Line 3 HMI' });
            seed(3, { user: 'asmith', userName: 'Alice Smith', action: 'review', record: 'Line 3 HMI audit trail', field: 'range', oldValue: '#1', newValue: '#5', signature: { id: 'sig-2', userId: 'asmith', userName: 'Alice Smith', meaning: 'reviewed', at: Audit.stamp(new Date(clockAt)), recordHash: Audit.recordHash({ range: [1, 5] }) } });
            seed(6, { user: 'asmith', userName: 'Alice Smith', action: 'update', record: 'TIC-205', field: 'high alarm limit', oldValue: 85, newValue: 88, reason: 'Deviation DEV-0331 CAPA' });
            seed(1, { user: 'asmith', userName: 'Alice Smith', action: 'logout', record: 'Line 3 HMI' });
            seed(44, { user: 'jdoe', userName: 'John Doe', action: 'reject', record: 'FIC-101', field: 'setpoint', oldValue: 78, newValue: 135, reason: 'Above the maximum of 120 m³/h' });
            seed(0, { user: 'unknown', action: 'lockout', record: 'Line 3 HMI', field: 'user', newValue: 'mwilson', reason: '3 failed attempts' });
            seed(20, { user: 'jdoe', userName: 'John Doe', action: 'update', record: 'LIC-301', field: 'setpoint', oldValue: 62, newValue: 60, reason: 'Level trending high', signature: { id: 'sig-3', userId: 'jdoe', userName: 'John Doe', meaning: 'responsible', at: Audit.stamp(new Date(clockAt)), recordHash: Audit.recordHash({ record: 'LIC-301', field: 'setpoint', value: 60 }) } });

            /* From here on the trail stamps real time. */
            trail._clock = function () {
                return new Date();
            };

            audit.entries = trail.entries();
            trail.subscribe(function (entry) {
                if (!tamper.checked) {
                    audit.addEntry(entry);
                }

                persist(entry);
            });

            function persist(entry) {
                /* The server's copy. Here: nowhere. */
                status.textContent = 'Entry #' + entry.seq + ' written, hash ' + entry.hash.substring(0, 12) + '…';
            }

            /* ── The change ─────────────────────────────────────────────────────── */
            change.addEventListener('click', function () {
                keypad.style.display = '';
                keypad.open(setpoint);
                change.disabled = true;
            });

            keypad.addEventListener('cancel', function () {
                keypad.style.display = 'none';
                change.disabled = false;
            });

            keypad.addEventListener('invalid', function (event) {
                /* A refusal is an event worth a record: someone tried to set 135. */
                trail.append({ user: 'jdoe', userName: 'John Doe', action: 'reject', record: 'FIC-101', field: 'setpoint', oldValue: setpoint, newValue: event.detail.text, reason: keypad.querySelector('.smart-keypad-message').textContent });
            });

            keypad.addEventListener('change', function (event) {
                const requested = event.detail.value,
                    previous = setpoint;

                keypad.style.display = 'none';

                /* The value that will be written, hashed into the signature. */
                sign.sign({ id: 'FIC-101.SP', title: 'FIC-101 setpoint', fields: [{ label: 'From', value: previous + ' m³/h' }, { label: 'To', value: requested + ' m³/h' }] }).then(function (signature) {
                    setpoint = requested;
                    setpointText.textContent = setpoint.toFixed(1) + ' m³/h';

                    trail.append({
                        user: signature.userId,
                        userName: signature.userName,
                        action: 'update',
                        record: 'FIC-101',
                        field: 'setpoint',
                        oldValue: previous,
                        newValue: requested,
                        reason: signature.reason,
                        signature: signature
                    });
                    change.disabled = false;
                }, function () {
                    change.disabled = false;
                });
            });

            sign.addEventListener('signRequest', function (event) {
                const detail = event.detail;

                setTimeout(function () {
                    const user = directory[detail.userId];

                    if (user && user.password === detail.password) {
                        sign.accept({ userName: user.name });
                    }
                    else {
                        sign.reject();
                    }
                }, 500);
            });

            sign.addEventListener('lockout', function (event) {
                trail.append({ user: 'unknown', action: 'lockout', record: 'Line 3 HMI', field: 'user', newValue: event.detail.userId, reason: event.detail.attempts + ' failed attempts' });
            });

            /* ── The viewer ─────────────────────────────────────────────────────── */
            audit.addEventListener('entrySelect', function (event) {
                const entry = event.detail.entry;

                status.textContent = '#' + entry.seq + ' ' + entry.action + ' by ' + (entry.userName || entry.user) + ' at ' + Audit.formatStamp(entry.at) + (entry.signature ? ' - ' + Audit.manifest(entry.signature) : '');
            });

            audit.addEventListener('reviewRequest', function (event) {
                const entries = event.detail.entries,
                    seqs = entries.map(function (entry) {
                        return entry.seq;
                    });

                sign.sign({ id: 'review', title: 'Audit trail review', fields: [{ label: 'Entries', value: entries.length }, { label: 'Range', value: '#' + Math.min.apply(null, seqs) + ' to #' + Math.max.apply(null, seqs) }] }, { meaning: 'reviewed' }).then(function (signature) {
                    trail.append({ user: signature.userId, userName: signature.userName, action: 'review', record: 'Line 3 HMI audit trail', field: 'range', oldValue: '#' + Math.min.apply(null, seqs), newValue: '#' + Math.max.apply(null, seqs), reason: signature.reason, signature: signature });
                }, function () { });
            });

            audit.addEventListener('export', function (event) {
                trail.append({ user: 'jdoe', userName: 'John Doe', action: 'download', record: 'Line 3 HMI audit trail', field: 'export', newValue: event.detail.fileName, reason: event.detail.count + ' entries' });
            });

            /* ── A copy with one entry altered ──────────────────────────────────── */
            tamper.addEventListener('change', function () {
                if (tamper.checked) {
                    const copy = JSON.parse(JSON.stringify(trail.entries()));

                    /* The recipe download now claims v12 → v12: the change is gone from the copy. */
                    copy[1].newValue = 'v12';
                    audit.entries = copy;
                    status.textContent = 'Copy shown: entry #2 altered after the fact';
                }
                else {
                    audit.entries = trail.entries();
                    status.textContent = 'The written trail';
                }
            });

            ms.addEventListener('change', function () {
                audit.showMilliseconds = ms.checked;
            });

            touch.addEventListener('change', function () {
                [audit, keypad, sign].forEach(function (element) {
                    element.density = touch.checked ? 'touch' : 'normal';
                });
            });

            keypad.style.display = 'none';
        });

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

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.AuditTrail displays a computer-generated, time-stamped audit trail for review: who made a change, when, what was changed, the previous and the new value, and whether the entries are intact.</h2>
                    <p><code>Smart.Industrial.Audit.Trail</code> stamps every entry with the time and its UTC offset, keeps the previous value next to the new one and links each entry to the previous one with a hash. <code>smart-audit-trail</code> displays the entries, provides search and filters, exports the trail with its hashes, and verifies the hash chain. An entry that was altered, removed or reordered in a copy breaks the chain from that point on, and the component shows where. Neither the trail nor the component stores data; the application persists the entries and reloads them with <code>Trail.from()</code>.</p>
                </section>
                <section>
                    <h2>Changing a setpoint with a signature</h2>
                    <p>The setpoint of FIC-101 is a GMP-critical parameter, so a change requires a reason and an electronic signature (user <b>jdoe</b>, password <code>operator1</code>). The keypad rejects values outside 0–120, the signature panel requires a reason, and the audit trail records the change with both values and the signature. Click <em>Show a tampered copy</em> to alter one exported entry and see the chain break.</p>
                    <div className="flow">
                        <div className="loop">
                            <div className="loop-row"><span>FIC-101 setpoint</span><b id="setpoint">78.0 m³/h</b></div>
                            <div className="loop-row"><span>Signed in</span><b>jdoe (John Doe)</b></div>
                            <button id="change" type="button" className="demo-button demo-button-primary">Change setpoint</button>
                            <NumericKeypad id="keypad" label="FIC-101 setpoint" unit="m³/h" min={0} max={120} precisionDigits={1} allowNegative={false}></NumericKeypad>
                        </div>
                        <ESignature id="sign" label="Sign the change" requireReason lockMeaning meaning="responsible" sessionUserId="jdoe" sessionUserName="John Doe" continuousSession autoClose={1500}></ESignature>
                    </div>
                    <div className="demo-actions">
                        <label><input type="checkbox" id="tamper" /> Show a tampered copy</label>
                        <label><input type="checkbox" id="ms" /> Milliseconds</label>
                        <label><input type="checkbox" id="touch" /> Touch density</label>
                        <span id="status" className="status"></span>
                    </div>
                    <AuditTrail id="audit" label="Line 3 HMI audit trail" showReview></AuditTrail>
                    <p className="hint">Keyboard: Tab to the rows, use the arrow keys to move, and press Enter to select a row and raise <code>entrySelect</code>. The Time column header sorts the entries. The integrity badge is a status message and a broken chain is announced to screen readers.</p>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

.flow {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(320px, 440px);
    gap: 24px;
    align-items: start;
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .flow {
        grid-template-columns: 1fr;
    }
}

.loop {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loop-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    font-size: 13px;
}

.loop-row b {
    font-variant-numeric: tabular-nums;
}

.demo-button {
    align-self: flex-start;
    min-height: 34px;
    padding: 0 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--smart-text-color);
    background: var(--smart-surface);
    border: 1px solid var(--smart-border);
    border-radius: 4px;
    cursor: pointer;
}

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

.demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.demo-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 12px;
}

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

.status {
    font-size: 12px;
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

vue/App.vue

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

        <section id="overview">
            <h2>Smart.AuditTrail displays a computer-generated, time-stamped audit trail for review: who made a change, when, what was changed, the previous and the new value, and whether the entries are intact.</h2>
            <p>
                <code>Smart.Industrial.Audit.Trail</code> stamps every entry with the time and its UTC offset, keeps the previous value next to the new one and links each entry to the previous one with a hash. <code>smart-audit-trail</code> displays the entries, provides search and filters, exports the trail with its hashes, and verifies the hash chain. An entry that was altered, removed or reordered in a copy breaks the chain from that point on, and the component shows where. Neither the trail nor the component stores data; the application persists the entries and reloads them with <code>Trail.from()</code>.
            </p>
        </section>

        <section>
            <h2>Changing a setpoint with a signature</h2>
            <p>
                The setpoint of FIC-101 is a GMP-critical parameter, so a change requires a reason and an electronic signature (user <b>jdoe</b>, password <code>operator1</code>). The keypad rejects values outside 0&ndash;120, the signature panel requires a reason, and the audit trail records the change with both values and the signature. Click <em>Show a tampered copy</em> to alter one exported entry and see the chain break.
            </p>
            <div class="flow">
                <div class="loop">
                    <div class="loop-row"><span>FIC-101 setpoint</span><b id="setpoint">78.0 m³/h</b></div>
                    <div class="loop-row"><span>Signed in</span><b>jdoe (John Doe)</b></div>
                    <button id="change" type="button" class="demo-button demo-button-primary">Change setpoint</button>
                    <smart-numeric-keypad id="keypad" label="FIC-101 setpoint" unit="m³/h" min="0" max="120" precision-digits="1" allow-negative="false"></smart-numeric-keypad>
                </div>
                <smart-esignature id="sign" label="Sign the change" require-reason lock-meaning meaning="responsible" session-user-id="jdoe" session-user-name="John Doe" continuous-session auto-close="1500"></smart-esignature>
            </div>
            <div class="demo-actions">
                <label><input type="checkbox" id="tamper" /> Show a tampered copy</label>
                <label><input type="checkbox" id="ms" /> Milliseconds</label>
                <label><input type="checkbox" id="touch" /> Touch density</label>
                <span id="status" class="status"></span>
            </div>
            <smart-audit-trail id="audit" label="Line 3 HMI audit trail" show-review></smart-audit-trail>
            <p class="hint">
                Keyboard: Tab to the rows, use the arrow keys to move, and press Enter to select a row and raise <code>entrySelect</code>. The Time column header sorts the entries. The integrity badge is a status message and a broken chain is announced to screen readers.
            </p>
        </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.numerickeypad.js";
import "smart-industrial/source/modules/smart.esignature.js";
import "smart-industrial/source/modules/smart.audittrail.js";

const Smart = window.Smart;

/* A setpoint change that needs a reason and a signature, recorded in a hash-chained trail.
   The keypad raises change, the signature panel raises signRequest and signed, the trail
   appends, the viewer follows. Replace `directory.verify` with the identity provider and
   `persist` with the server write; the trail and viewer do not change. */

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 Audit = Smart.Industrial.Audit,
            keypad = document.getElementById('keypad'),
            sign = document.getElementById('sign'),
            audit = document.getElementById('audit'),
            change = document.getElementById('change'),
            setpointText = document.getElementById('setpoint'),
            status = document.getElementById('status'),
            tamper = document.getElementById('tamper'),
            ms = document.getElementById('ms'),
            touch = document.getElementById('touch');

        const directory = {
            jdoe: { password: 'operator1', name: 'John Doe' },
            asmith: { password: 'qa2026', name: 'Alice Smith' }
        };

        let setpoint = 78;

        /* ── A trail with a morning's worth of entries ──────────────────────── */
        const start = Date.now() - 6 * 3600 * 1000;
        let clockAt = start;

        const trail = new Audit.Trail({
            system: 'Line 3 HMI',
            clock: function () {
                return new Date(clockAt);
            }
        });

        function seed(minutesLater, entry) {
            clockAt += minutesLater * 60 * 1000 + Math.floor(Math.random() * 900);
            return trail.append(entry);
        }

        seed(0, { user: 'jdoe', userName: 'John Doe', action: 'login', record: 'Line 3 HMI' });
        seed(4, { user: 'jdoe', userName: 'John Doe', action: 'download', record: 'Recipe IBU-400-C', field: 'version', oldValue: 'v12', newValue: 'v13', reason: 'Change control CC-2026-041' });
        seed(9, { user: 'jdoe', userName: 'John Doe', action: 'update', record: 'FIC-101', field: 'setpoint', oldValue: 75, newValue: 78, reason: 'Recipe step 2', signature: { id: 'sig-1', userId: 'jdoe', userName: 'John Doe', meaning: 'responsible', at: Audit.stamp(new Date(clockAt)), recordHash: Audit.recordHash({ record: 'FIC-101', field: 'setpoint', value: 78 }) } });
        seed(31, { user: 'jdoe', userName: 'John Doe', action: 'acknowledge', record: 'PAH-102', field: 'alarm', oldValue: 'unacknowledged', newValue: 'acknowledged' });
        seed(2, { user: 'jdoe', userName: 'John Doe', action: 'shelve', record: 'PAH-102', field: 'alarm', oldValue: 'active', newValue: 'shelved 30 min', reason: 'Known transient during CIP' });
        seed(58, { user: 'asmith', userName: 'Alice Smith', action: 'login', record: 'Line 3 HMI' });
        seed(3, { user: 'asmith', userName: 'Alice Smith', action: 'review', record: 'Line 3 HMI audit trail', field: 'range', oldValue: '#1', newValue: '#5', signature: { id: 'sig-2', userId: 'asmith', userName: 'Alice Smith', meaning: 'reviewed', at: Audit.stamp(new Date(clockAt)), recordHash: Audit.recordHash({ range: [1, 5] }) } });
        seed(6, { user: 'asmith', userName: 'Alice Smith', action: 'update', record: 'TIC-205', field: 'high alarm limit', oldValue: 85, newValue: 88, reason: 'Deviation DEV-0331 CAPA' });
        seed(1, { user: 'asmith', userName: 'Alice Smith', action: 'logout', record: 'Line 3 HMI' });
        seed(44, { user: 'jdoe', userName: 'John Doe', action: 'reject', record: 'FIC-101', field: 'setpoint', oldValue: 78, newValue: 135, reason: 'Above the maximum of 120 m³/h' });
        seed(0, { user: 'unknown', action: 'lockout', record: 'Line 3 HMI', field: 'user', newValue: 'mwilson', reason: '3 failed attempts' });
        seed(20, { user: 'jdoe', userName: 'John Doe', action: 'update', record: 'LIC-301', field: 'setpoint', oldValue: 62, newValue: 60, reason: 'Level trending high', signature: { id: 'sig-3', userId: 'jdoe', userName: 'John Doe', meaning: 'responsible', at: Audit.stamp(new Date(clockAt)), recordHash: Audit.recordHash({ record: 'LIC-301', field: 'setpoint', value: 60 }) } });

        /* From here on the trail stamps real time. */
        trail._clock = function () {
            return new Date();
        };

        audit.entries = trail.entries();
        trail.subscribe(function (entry) {
            if (!tamper.checked) {
                audit.addEntry(entry);
            }

            persist(entry);
        });

        function persist(entry) {
            /* The server's copy. Here: nowhere. */
            status.textContent = 'Entry #' + entry.seq + ' written, hash ' + entry.hash.substring(0, 12) + '…';
        }

        /* ── The change ─────────────────────────────────────────────────────── */
        change.addEventListener('click', function () {
            keypad.style.display = '';
            keypad.open(setpoint);
            change.disabled = true;
        });

        keypad.addEventListener('cancel', function () {
            keypad.style.display = 'none';
            change.disabled = false;
        });

        keypad.addEventListener('invalid', function (event) {
            /* A refusal is an event worth a record: someone tried to set 135. */
            trail.append({ user: 'jdoe', userName: 'John Doe', action: 'reject', record: 'FIC-101', field: 'setpoint', oldValue: setpoint, newValue: event.detail.text, reason: keypad.querySelector('.smart-keypad-message').textContent });
        });

        keypad.addEventListener('change', function (event) {
            const requested = event.detail.value,
                previous = setpoint;

            keypad.style.display = 'none';

            /* The value that will be written, hashed into the signature. */
            sign.sign({ id: 'FIC-101.SP', title: 'FIC-101 setpoint', fields: [{ label: 'From', value: previous + ' m³/h' }, { label: 'To', value: requested + ' m³/h' }] }).then(function (signature) {
                setpoint = requested;
                setpointText.textContent = setpoint.toFixed(1) + ' m³/h';

                trail.append({
                    user: signature.userId,
                    userName: signature.userName,
                    action: 'update',
                    record: 'FIC-101',
                    field: 'setpoint',
                    oldValue: previous,
                    newValue: requested,
                    reason: signature.reason,
                    signature: signature
                });
                change.disabled = false;
            }, function () {
                change.disabled = false;
            });
        });

        sign.addEventListener('signRequest', function (event) {
            const detail = event.detail;

            setTimeout(function () {
                const user = directory[detail.userId];

                if (user && user.password === detail.password) {
                    sign.accept({ userName: user.name });
                }
                else {
                    sign.reject();
                }
            }, 500);
        });

        sign.addEventListener('lockout', function (event) {
            trail.append({ user: 'unknown', action: 'lockout', record: 'Line 3 HMI', field: 'user', newValue: event.detail.userId, reason: event.detail.attempts + ' failed attempts' });
        });

        /* ── The viewer ─────────────────────────────────────────────────────── */
        audit.addEventListener('entrySelect', function (event) {
            const entry = event.detail.entry;

            status.textContent = '#' + entry.seq + ' ' + entry.action + ' by ' + (entry.userName || entry.user) + ' at ' + Audit.formatStamp(entry.at) + (entry.signature ? ' - ' + Audit.manifest(entry.signature) : '');
        });

        audit.addEventListener('reviewRequest', function (event) {
            const entries = event.detail.entries,
                seqs = entries.map(function (entry) {
                    return entry.seq;
                });

            sign.sign({ id: 'review', title: 'Audit trail review', fields: [{ label: 'Entries', value: entries.length }, { label: 'Range', value: '#' + Math.min.apply(null, seqs) + ' to #' + Math.max.apply(null, seqs) }] }, { meaning: 'reviewed' }).then(function (signature) {
                trail.append({ user: signature.userId, userName: signature.userName, action: 'review', record: 'Line 3 HMI audit trail', field: 'range', oldValue: '#' + Math.min.apply(null, seqs), newValue: '#' + Math.max.apply(null, seqs), reason: signature.reason, signature: signature });
            }, function () { });
        });

        audit.addEventListener('export', function (event) {
            trail.append({ user: 'jdoe', userName: 'John Doe', action: 'download', record: 'Line 3 HMI audit trail', field: 'export', newValue: event.detail.fileName, reason: event.detail.count + ' entries' });
        });

        /* ── A copy with one entry altered ──────────────────────────────────── */
        tamper.addEventListener('change', function () {
            if (tamper.checked) {
                const copy = JSON.parse(JSON.stringify(trail.entries()));

                /* The recipe download now claims v12 → v12: the change is gone from the copy. */
                copy[1].newValue = 'v12';
                audit.entries = copy;
                status.textContent = 'Copy shown: entry #2 altered after the fact';
            }
            else {
                audit.entries = trail.entries();
                status.textContent = 'The written trail';
            }
        });

        ms.addEventListener('change', function () {
            audit.showMilliseconds = ms.checked;
        });

        touch.addEventListener('change', function () {
            [audit, keypad, sign].forEach(function (element) {
                element.density = touch.checked ? 'touch' : 'normal';
            });
        });

        keypad.style.display = 'none';
      });
    });
  }
};
</script>

<style>
.flow {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(320px, 440px);
    gap: 24px;
    align-items: start;
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .flow {
        grid-template-columns: 1fr;
    }
}

.loop {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loop-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    font-size: 13px;
}

.loop-row b {
    font-variant-numeric: tabular-nums;
}

.demo-button {
    align-self: flex-start;
    min-height: 34px;
    padding: 0 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--smart-text-color);
    background: var(--smart-surface);
    border: 1px solid var(--smart-border);
    border-radius: 4px;
    cursor: pointer;
}

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

.demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.demo-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 12px;
}

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

.status {
    font-size: 12px;
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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