Mimic Symbol

angular/app.component.html

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

        <section id="overview">
            <h2>Smart.MimicSymbol displays one piece of equipment on a process diagram.</h2>
            <p>
                Every symbol on a mimic is a live object with a tag, a state and usually a reading, and the operator clicks it to open the details. Symbols are drawn as SVG and scale with the element, so the diagram stays sharp at any size.
            </p>
        </section>

        <section>
            <h2>The symbol library</h2>
            <div class="row" id="library"></div>
        </section>

        <section>
            <h2>Equipment states</h2>
            <p>
                The state sets the colour of the symbol. As elsewhere in the suite, a symbol is coloured only when it is in a state the operator should notice.
            </p>
            <div class="row" id="states"></div>
        </section>

        <section>
            <h2>Connection stubs</h2>
            <p>
                Stubs extend past the edge of the symbol on the pipe centreline, so a symbol placed in a pipe run connects to it. The <code>stubs</code> property overrides the default stubs of a symbol.
            </p>
            <div class="run" id="run"></div>
        </section>

        <section>
            <h2>Vessel level</h2>
            <p>A tank on a diagram shows its content. The <code>level</code> property is a percentage.</p>
            <div class="row" id="vessels"></div>
        </section>

        <section>
            <h2>Tags, readings and rotation</h2>
            <div class="row">
                <smart-mimic-symbol id="r1" symbol="pump" label="P-2101A" state="running" value="312 L/min"></smart-mimic-symbol>
                <smart-mimic-symbol id="r2" symbol="valve" label="CV-2140" label-position="top" value="62 % open"></smart-mimic-symbol>
                <smart-mimic-symbol id="r3" symbol="valve" label="rotated 90°" [rotate]="90"></smart-mimic-symbol>
                <smart-mimic-symbol id="r4" symbol="instrument" label="PT-2101" value="6.28 bar"></smart-mimic-symbol>
            </div>
        </section>

        <section>
            <h2>Selection</h2>
            <p>Click a symbol to raise the <code>symbolClick</code> event. The page marks the clicked symbol as selected.</p>
            <div class="row" id="selectable"></div>
            <p class="demo-log" id="log">No selection yet.</p>
        </section>

    </div>
</div>

angular/app.component.ts

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

import { MimicSymbolModule } from 'smart-industrial/angular/mimicsymbol';

import { runDemo } from './demo';

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

/* Read off the element rather than hardcoded, so the gallery never falls behind the
   library - it was already out of date once. */
const SYMBOLS = Object.keys(customElements.get('smart-mimic-symbol').symbols);
const STATES = ['normal', 'running', 'stopped', 'fault', 'manual', 'maintenance', 'unknown'];

function make(properties) {
    const element = document.createElement('smart-mimic-symbol');

    for (const key in properties) {
        if (Object.prototype.hasOwnProperty.call(properties, key)) {
            element[key] = properties[key];
        }
    }

    return element;
}

export function runDemo(): void {
    /* ── Every symbol in the library ─────────────────────────────────── */
    const library = document.getElementById('library');

    SYMBOLS.forEach(function (symbol) {
        library.appendChild(make({ symbol: symbol, label: symbol, level: symbol === 'vessel' ? 62 : null }));
    });

    /* ── Every state, on one symbol ──────────────────────────────────── */
    const states = document.getElementById('states');

    STATES.forEach(function (state) {
        states.appendChild(make({ symbol: 'pump', state: state, label: state }));
    });

    /* ── A short run, to show the stubs meeting ──────────────────────── */
    const run = document.getElementById('run');

    run.appendChild(make({ symbol: 'vessel', label: 'TK-01', level: 70 }));
    run.appendChild(make({ symbol: 'pump', label: 'P-101', state: 'running' }));
    run.appendChild(make({ symbol: 'filter', label: 'F-101' }));
    run.appendChild(make({ symbol: 'valve', label: 'CV-101', state: 'manual' }));
    run.appendChild(make({ symbol: 'instrument', label: 'PT-101', value: '6.2 bar' }));

    /* ── Vessels at several levels ───────────────────────────────────── */
    const vessels = document.getElementById('vessels');

    [0, 25, 50, 75, 100].forEach(function (level) {
        vessels.appendChild(make({ symbol: 'vessel', label: level + ' %', level: level }));
    });

    /* ── Selection ───────────────────────────────────────────────────── */
    const selectable = document.getElementById('selectable'),
        log = document.getElementById('log'),
        chosen = [];

    [
        { symbol: 'pump', label: 'P-2101A', state: 'running' },
        { symbol: 'pump', label: 'P-2101B', state: 'stopped' },
        { symbol: 'exchanger', label: 'HX-2108', state: 'running' },
        { symbol: 'compressor', label: 'CP-2150', state: 'maintenance' }
    ].forEach(function (spec) {
        const element = make(spec);

        chosen.push(element);
        element.addEventListener('symbolClick', function (event) {
            chosen.forEach(function (other) {
                other.selected = other === element;
            });
            log.textContent = 'symbolClick → ' + event.detail.label +
                ' (' + event.detail.symbol + ', ' + event.detail.state + ')';
        });
        selectable.appendChild(element);
    });
}

angular/app.component.css

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

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;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: flex-end;
}

/* A run puts the symbols shoulder to shoulder so the stubs meet. */
.run {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

smart-mimic-symbol {
    --smart-mimic-symbol-size: 60px;
}

smart-mimic-symbol[symbol="vessel"] {
    --smart-mimic-symbol-size: 86px;
}

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

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


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* Read off the element rather than hardcoded, so the gallery never falls behind the
   library - it was already out of date once. */
const SYMBOLS = Object.keys(customElements.get('smart-mimic-symbol').symbols);
const STATES = ['normal', 'running', 'stopped', 'fault', 'manual', 'maintenance', 'unknown'];

function make(properties) {
    const element = document.createElement('smart-mimic-symbol');

    for (const key in properties) {
        if (Object.prototype.hasOwnProperty.call(properties, key)) {
            element[key] = properties[key];
        }
    }

    return element;
}

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;
            }

            /* ── Every symbol in the library ─────────────────────────────────── */
            const library = document.getElementById('library');

            SYMBOLS.forEach(function (symbol) {
                library.appendChild(make({ symbol: symbol, label: symbol, level: symbol === 'vessel' ? 62 : null }));
            });

            /* ── Every state, on one symbol ──────────────────────────────────── */
            const states = document.getElementById('states');

            STATES.forEach(function (state) {
                states.appendChild(make({ symbol: 'pump', state: state, label: state }));
            });

            /* ── A short run, to show the stubs meeting ──────────────────────── */
            const run = document.getElementById('run');

            run.appendChild(make({ symbol: 'vessel', label: 'TK-01', level: 70 }));
            run.appendChild(make({ symbol: 'pump', label: 'P-101', state: 'running' }));
            run.appendChild(make({ symbol: 'filter', label: 'F-101' }));
            run.appendChild(make({ symbol: 'valve', label: 'CV-101', state: 'manual' }));
            run.appendChild(make({ symbol: 'instrument', label: 'PT-101', value: '6.2 bar' }));

            /* ── Vessels at several levels ───────────────────────────────────── */
            const vessels = document.getElementById('vessels');

            [0, 25, 50, 75, 100].forEach(function (level) {
                vessels.appendChild(make({ symbol: 'vessel', label: level + ' %', level: level }));
            });

            /* ── Selection ───────────────────────────────────────────────────── */
            const selectable = document.getElementById('selectable'),
                log = document.getElementById('log'),
                chosen = [];

            [
                { symbol: 'pump', label: 'P-2101A', state: 'running' },
                { symbol: 'pump', label: 'P-2101B', state: 'stopped' },
                { symbol: 'exchanger', label: 'HX-2108', state: 'running' },
                { symbol: 'compressor', label: 'CP-2150', state: 'maintenance' }
            ].forEach(function (spec) {
                const element = make(spec);

                chosen.push(element);
                element.addEventListener('symbolClick', function (event) {
                    chosen.forEach(function (other) {
                        other.selected = other === element;
                    });
                    log.textContent = 'symbolClick → ' + event.detail.label +
                        ' (' + event.detail.symbol + ', ' + event.detail.state + ')';
                });
                selectable.appendChild(element);
            });
        });

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

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.MimicSymbol displays one piece of equipment on a process diagram.</h2>
                    <p>Every symbol on a mimic is a live object with a tag, a state and usually a reading, and the operator clicks it to open the details. Symbols are drawn as SVG and scale with the element, so the diagram stays sharp at any size.</p>
                </section>
                <section>
                    <h2>The symbol library</h2>
                    <div className="row" id="library"></div>
                </section>
                <section>
                    <h2>Equipment states</h2>
                    <p>The state sets the colour of the symbol. As elsewhere in the suite, a symbol is coloured only when it is in a state the operator should notice.</p>
                    <div className="row" id="states"></div>
                </section>
                <section>
                    <h2>Connection stubs</h2>
                    <p>Stubs extend past the edge of the symbol on the pipe centreline, so a symbol placed in a pipe run connects to it. The <code>stubs</code> property overrides the default stubs of a symbol.</p>
                    <div className="run" id="run"></div>
                </section>
                <section>
                    <h2>Vessel level</h2>
                    <p>A tank on a diagram shows its content. The <code>level</code> property is a percentage.</p>
                    <div className="row" id="vessels"></div>
                </section>
                <section>
                    <h2>Tags, readings and rotation</h2>
                    <div className="row">
                        <MimicSymbol id="r1" symbol="pump" label="P-2101A" state="running" value="312 L/min"></MimicSymbol>
                        <MimicSymbol id="r2" symbol="valve" label="CV-2140" labelPosition="top" value="62 % open"></MimicSymbol>
                        <MimicSymbol id="r3" symbol="valve" label="rotated 90°" rotate={90}></MimicSymbol>
                        <MimicSymbol id="r4" symbol="instrument" label="PT-2101" value="6.28 bar"></MimicSymbol>
                    </div>
                </section>
                <section>
                    <h2>Selection</h2>
                    <p>Click a symbol to raise the <code>symbolClick</code> event. The page marks the clicked symbol as selected.</p>
                    <div className="row" id="selectable"></div>
                    <p className="demo-log" id="log">No selection yet.</p>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

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

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;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: flex-end;
}

/* A run puts the symbols shoulder to shoulder so the stubs meet. */
.run {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

smart-mimic-symbol {
    --smart-mimic-symbol-size: 60px;
}

smart-mimic-symbol[symbol="vessel"] {
    --smart-mimic-symbol-size: 86px;
}

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

/* ── 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.MimicSymbol displays one piece of equipment on a process diagram.</h2>
            <p>
                Every symbol on a mimic is a live object with a tag, a state and usually a reading, and the operator clicks it to open the details. Symbols are drawn as SVG and scale with the element, so the diagram stays sharp at any size.
            </p>
        </section>

        <section>
            <h2>The symbol library</h2>
            <div class="row" id="library"></div>
        </section>

        <section>
            <h2>Equipment states</h2>
            <p>
                The state sets the colour of the symbol. As elsewhere in the suite, a symbol is coloured only when it is in a state the operator should notice.
            </p>
            <div class="row" id="states"></div>
        </section>

        <section>
            <h2>Connection stubs</h2>
            <p>
                Stubs extend past the edge of the symbol on the pipe centreline, so a symbol placed in a pipe run connects to it. The <code>stubs</code> property overrides the default stubs of a symbol.
            </p>
            <div class="run" id="run"></div>
        </section>

        <section>
            <h2>Vessel level</h2>
            <p>A tank on a diagram shows its content. The <code>level</code> property is a percentage.</p>
            <div class="row" id="vessels"></div>
        </section>

        <section>
            <h2>Tags, readings and rotation</h2>
            <div class="row">
                <smart-mimic-symbol id="r1" symbol="pump" label="P-2101A" state="running" value="312 L/min"></smart-mimic-symbol>
                <smart-mimic-symbol id="r2" symbol="valve" label="CV-2140" label-position="top" value="62 % open"></smart-mimic-symbol>
                <smart-mimic-symbol id="r3" symbol="valve" label="rotated 90°" rotate="90"></smart-mimic-symbol>
                <smart-mimic-symbol id="r4" symbol="instrument" label="PT-2101" value="6.28 bar"></smart-mimic-symbol>
            </div>
        </section>

        <section>
            <h2>Selection</h2>
            <p>Click a symbol to raise the <code>symbolClick</code> event. The page marks the clicked symbol as selected.</p>
            <div class="row" id="selectable"></div>
            <p class="demo-log" id="log">No selection yet.</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.mimicsymbol.js";


/* Read off the element rather than hardcoded, so the gallery never falls behind the
   library - it was already out of date once. */
const SYMBOLS = Object.keys(customElements.get('smart-mimic-symbol').symbols);
const STATES = ['normal', 'running', 'stopped', 'fault', 'manual', 'maintenance', 'unknown'];

function make(properties) {
    const element = document.createElement('smart-mimic-symbol');

    for (const key in properties) {
        if (Object.prototype.hasOwnProperty.call(properties, key)) {
            element[key] = properties[key];
        }
    }

    return element;
}

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(() => {
        /* ── Every symbol in the library ─────────────────────────────────── */
        const library = document.getElementById('library');

        SYMBOLS.forEach(function (symbol) {
            library.appendChild(make({ symbol: symbol, label: symbol, level: symbol === 'vessel' ? 62 : null }));
        });

        /* ── Every state, on one symbol ──────────────────────────────────── */
        const states = document.getElementById('states');

        STATES.forEach(function (state) {
            states.appendChild(make({ symbol: 'pump', state: state, label: state }));
        });

        /* ── A short run, to show the stubs meeting ──────────────────────── */
        const run = document.getElementById('run');

        run.appendChild(make({ symbol: 'vessel', label: 'TK-01', level: 70 }));
        run.appendChild(make({ symbol: 'pump', label: 'P-101', state: 'running' }));
        run.appendChild(make({ symbol: 'filter', label: 'F-101' }));
        run.appendChild(make({ symbol: 'valve', label: 'CV-101', state: 'manual' }));
        run.appendChild(make({ symbol: 'instrument', label: 'PT-101', value: '6.2 bar' }));

        /* ── Vessels at several levels ───────────────────────────────────── */
        const vessels = document.getElementById('vessels');

        [0, 25, 50, 75, 100].forEach(function (level) {
            vessels.appendChild(make({ symbol: 'vessel', label: level + ' %', level: level }));
        });

        /* ── Selection ───────────────────────────────────────────────────── */
        const selectable = document.getElementById('selectable'),
            log = document.getElementById('log'),
            chosen = [];

        [
            { symbol: 'pump', label: 'P-2101A', state: 'running' },
            { symbol: 'pump', label: 'P-2101B', state: 'stopped' },
            { symbol: 'exchanger', label: 'HX-2108', state: 'running' },
            { symbol: 'compressor', label: 'CP-2150', state: 'maintenance' }
        ].forEach(function (spec) {
            const element = make(spec);

            chosen.push(element);
            element.addEventListener('symbolClick', function (event) {
                chosen.forEach(function (other) {
                    other.selected = other === element;
                });
                log.textContent = 'symbolClick → ' + event.detail.label +
                    ' (' + event.detail.symbol + ', ' + event.detail.state + ')';
            });
            selectable.appendChild(element);
        });
      });
    });
  }
};
</script>

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

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;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    align-items: flex-end;
}

/* A run puts the symbols shoulder to shoulder so the stubs meet. */
.run {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

smart-mimic-symbol {
    --smart-mimic-symbol-size: 60px;
}

smart-mimic-symbol[symbol="vessel"] {
    --smart-mimic-symbol-size: 86px;
}

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

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