Mimic

angular/app.component.html

<div class="angular-root" theme="industrial">
    <div class="smart-demo-container">
        <section id="overview">
            <h2>Smart.Mimic is a process diagram canvas: equipment placed on a canvas and connected with lines, with panning, zooming and a layout that can be saved and restored.</h2>
            <p>
                The diagram is composed of <code>smart-mimic-symbol</code> elements, so a symbol on the diagram is the same live object as a standalone symbol: it has a tag, a state and a reading, and it raises its own click events. The canvas adds placement, connection routing, the viewport and the layout.
            </p>
        </section>

        <section>
            <h2>A feed and reactor section</h2>
            <smart-mimic id="plant"></smart-mimic>
            <div class="demo-actions">
                <button type="button" id="fit">Fit</button>
                <button type="button" id="in">Zoom in</button>
                <button type="button" id="out">Zoom out</button>
                <label><input type="checkbox" id="edit" /> Editable</label>
                <label><input type="checkbox" id="grid" /> Grid</label>
                <label><input type="checkbox" id="snap" /> Snap</label>
                <button type="button" id="save">Save layout</button>
                <button type="button" id="restore" disabled>Restore</button>
            </div>
            <p class="hint" id="log">
                Click a symbol to select it. Drag the empty canvas to pan and use Ctrl+wheel to zoom. The diagram is a single tab stop: press Tab to focus it and use the arrow keys to move between symbols.
            </p>
        </section>

        <section>
            <h2>Selected symbol</h2>
            <dl id="detail" class="detail"><dt>&mdash;</dt><dd>Nothing selected.</dd></dl>
        </section>
    </div>
</div>

angular/app.component.ts

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

import { MimicModule } from 'smart-industrial/angular/mimic';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - Mimic 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: [MimicModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent implements AfterViewInit, OnDestroy {
    private unmounted = false;

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

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

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

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

angular/demo.ts

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

/* A feed and reactor section. Positions are plain numbers in stage coordinates, which is
   what makes the layout serialisable - the diagram is data, not a drawing. */
const LAYOUT = [
    { id: 'TK-01', symbol: 'vessel', x: 40, y: 150, label: 'TK-01', level: 62 },
    { id: 'P-101A', symbol: 'pump', x: 170, y: 150, label: 'P-101A', state: 'running' },
    { id: 'P-101B', symbol: 'pump', x: 170, y: 250, label: 'P-101B', state: 'stopped' },
    { id: 'FT-104', symbol: 'orifice', x: 290, y: 150, label: 'FT-104' },
    { id: 'CV-140', symbol: 'valve', x: 390, y: 150, label: 'CV-140', state: 'manual' },
    { id: 'HX-108', symbol: 'exchanger', x: 500, y: 150, label: 'HX-108', state: 'running' },
    { id: 'R-200', symbol: 'reactor', x: 620, y: 140, label: 'R-200', state: 'running' },
    { id: 'AG-212', symbol: 'agitator', x: 620, y: 40, label: 'AG-212', state: 'running' },
    { id: 'PSV-9', symbol: 'reliefValve', x: 740, y: 60, label: 'PSV-9' },
    { id: 'PT-101', symbol: 'instrument', x: 290, y: 60, label: 'PT-101', value: '6.2 bar' }
];

const CONNECTIONS = [
    { from: 'TK-01', to: 'P-101A', flowing: true },
    { from: 'TK-01', to: 'P-101B' },
    { from: 'P-101A', to: 'FT-104', flowing: true },
    { from: 'P-101B', to: 'FT-104' },
    { from: 'FT-104', to: 'CV-140', flowing: true },
    { from: 'CV-140', to: 'HX-108', flowing: true },
    { from: 'HX-108', to: 'R-200', flowing: true },
    /* the transmitter's tap on the discharge line: an instrument line, not a pipe */
    { from: 'PT-101', to: 'P-101A', className: 'instrument' },
    { from: 'AG-212', to: 'R-200' },
    { from: 'R-200', to: 'PSV-9', className: 'warning' }
];

const DETAIL = {
    'TK-01': ['Feed tank', 'Vessel, 12 m³'],
    'P-101A': ['Feed pump A', 'Centrifugal, 55 kW'],
    'P-101B': ['Feed pump B', 'Centrifugal, 55 kW (standby)'],
    'FT-104': ['Feed flow', 'Orifice plate + DP transmitter'],
    'CV-140': ['Feed control valve', 'Globe, air-to-open'],
    'HX-108': ['Feed pre-heater', 'Shell and tube'],
    'R-200': ['Reactor', 'Stirred, 8 m³, jacketed'],
    'AG-212': ['Reactor agitator', 'Top-entry, 15 kW'],
    'PSV-9': ['Reactor relief', 'Set 12 bar g'],
    'PT-101': ['Discharge pressure', 'Pressure transmitter']
};

export function runDemo(): void {
    const plant = document.getElementById('plant'),
        log = document.getElementById('log'),
        detail = document.getElementById('detail'),
        restore = document.getElementById('restore');

    plant.symbols = LAYOUT.map(function (s) {
        return Object.assign({}, s);
    });
    plant.connections = CONNECTIONS;
    plant.symbolSize = 64;
    plant.fit();

    plant.addEventListener('symbolClick', function (event) {
        const info = DETAIL[event.detail.id];

        log.textContent = 'selected ' + event.detail.id;
        detail.innerHTML = info
            ? '<dt>Tag</dt><dd>' + event.detail.id + '</dd>' +
              '<dt>Description</dt><dd>' + info[0] + '</dd>' +
              '<dt>Type</dt><dd>' + info[1] + '</dd>' +
              '<dt>State</dt><dd>' + (event.detail.symbol.state || 'normal') + '</dd>'
            : '<dt>&mdash;</dt><dd>No detail for this item.</dd>';
    });

    plant.addEventListener('layoutChange', function (event) {
        log.textContent = 'moved ' + event.detail.id +
            '. The layout is data, so this can be saved.';
    });

    document.getElementById('fit').addEventListener('click', function () {
        plant.fit();
    });

    document.getElementById('in').addEventListener('click', function () {
        plant.zoomBy(1.25);
    });

    document.getElementById('out').addEventListener('click', function () {
        plant.zoomBy(1 / 1.25);
    });

    document.getElementById('edit').addEventListener('change', function () {
        plant.editable = this.checked;
        log.textContent = this.checked
            ? 'Editable. Drag a symbol to move it.'
            : 'Read-only.';
    });

    document.getElementById('grid').addEventListener('change', function () {
        plant.showGrid = this.checked;
    });

    document.getElementById('snap').addEventListener('change', function () {
        plant.snapToGrid = this.checked;
    });

    /* Layout persistence: what makes "operators keep their workspace" true. In a real
       screen this goes to localStorage or a user profile, alongside smart-docking-layout's
       own autoSaveState for the panels around it. */
    let saved = null;

    document.getElementById('save').addEventListener('click', function () {
        saved = plant.layout();
        restore.disabled = false;
        log.textContent = 'Layout saved: ' + saved.symbols.length + ' items, zoom ' +
            saved.zoom.toFixed(2);
    });

    restore.addEventListener('click', function () {
        if (saved) {
            plant.layout(saved);
            log.textContent = 'Layout restored.';
        }
    });
}

angular/app.component.css

#plant { --smart-mimic-height: 440px; }
.demo-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.demo-actions label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.hint { margin-top: 8px; font-size: 12px; opacity: 0.75; }
.detail { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; font-size: 13px; }
.detail dt { font-weight: 600; }
.detail dd { margin: 0; }

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


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* A feed and reactor section. Positions are plain numbers in stage coordinates, which is
   what makes the layout serialisable - the diagram is data, not a drawing. */
const LAYOUT = [
    { id: 'TK-01', symbol: 'vessel', x: 40, y: 150, label: 'TK-01', level: 62 },
    { id: 'P-101A', symbol: 'pump', x: 170, y: 150, label: 'P-101A', state: 'running' },
    { id: 'P-101B', symbol: 'pump', x: 170, y: 250, label: 'P-101B', state: 'stopped' },
    { id: 'FT-104', symbol: 'orifice', x: 290, y: 150, label: 'FT-104' },
    { id: 'CV-140', symbol: 'valve', x: 390, y: 150, label: 'CV-140', state: 'manual' },
    { id: 'HX-108', symbol: 'exchanger', x: 500, y: 150, label: 'HX-108', state: 'running' },
    { id: 'R-200', symbol: 'reactor', x: 620, y: 140, label: 'R-200', state: 'running' },
    { id: 'AG-212', symbol: 'agitator', x: 620, y: 40, label: 'AG-212', state: 'running' },
    { id: 'PSV-9', symbol: 'reliefValve', x: 740, y: 60, label: 'PSV-9' },
    { id: 'PT-101', symbol: 'instrument', x: 290, y: 60, label: 'PT-101', value: '6.2 bar' }
];

const CONNECTIONS = [
    { from: 'TK-01', to: 'P-101A', flowing: true },
    { from: 'TK-01', to: 'P-101B' },
    { from: 'P-101A', to: 'FT-104', flowing: true },
    { from: 'P-101B', to: 'FT-104' },
    { from: 'FT-104', to: 'CV-140', flowing: true },
    { from: 'CV-140', to: 'HX-108', flowing: true },
    { from: 'HX-108', to: 'R-200', flowing: true },
    /* the transmitter's tap on the discharge line: an instrument line, not a pipe */
    { from: 'PT-101', to: 'P-101A', className: 'instrument' },
    { from: 'AG-212', to: 'R-200' },
    { from: 'R-200', to: 'PSV-9', className: 'warning' }
];

const DETAIL = {
    'TK-01': ['Feed tank', 'Vessel, 12 m³'],
    'P-101A': ['Feed pump A', 'Centrifugal, 55 kW'],
    'P-101B': ['Feed pump B', 'Centrifugal, 55 kW (standby)'],
    'FT-104': ['Feed flow', 'Orifice plate + DP transmitter'],
    'CV-140': ['Feed control valve', 'Globe, air-to-open'],
    'HX-108': ['Feed pre-heater', 'Shell and tube'],
    'R-200': ['Reactor', 'Stirred, 8 m³, jacketed'],
    'AG-212': ['Reactor agitator', 'Top-entry, 15 kW'],
    'PSV-9': ['Reactor relief', 'Set 12 bar g'],
    'PT-101': ['Discharge pressure', 'Pressure transmitter']
};

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 plant = document.getElementById('plant'),
                log = document.getElementById('log'),
                detail = document.getElementById('detail'),
                restore = document.getElementById('restore');

            plant.symbols = LAYOUT.map(function (s) {
                return Object.assign({}, s);
            });
            plant.connections = CONNECTIONS;
            plant.symbolSize = 64;
            plant.fit();

            plant.addEventListener('symbolClick', function (event) {
                const info = DETAIL[event.detail.id];

                log.textContent = 'selected ' + event.detail.id;
                detail.innerHTML = info
                    ? '<dt>Tag</dt><dd>' + event.detail.id + '</dd>' +
                      '<dt>Description</dt><dd>' + info[0] + '</dd>' +
                      '<dt>Type</dt><dd>' + info[1] + '</dd>' +
                      '<dt>State</dt><dd>' + (event.detail.symbol.state || 'normal') + '</dd>'
                    : '<dt>&mdash;</dt><dd>No detail for this item.</dd>';
            });

            plant.addEventListener('layoutChange', function (event) {
                log.textContent = 'moved ' + event.detail.id +
                    '. The layout is data, so this can be saved.';
            });

            document.getElementById('fit').addEventListener('click', function () {
                plant.fit();
            });

            document.getElementById('in').addEventListener('click', function () {
                plant.zoomBy(1.25);
            });

            document.getElementById('out').addEventListener('click', function () {
                plant.zoomBy(1 / 1.25);
            });

            document.getElementById('edit').addEventListener('change', function () {
                plant.editable = this.checked;
                log.textContent = this.checked
                    ? 'Editable. Drag a symbol to move it.'
                    : 'Read-only.';
            });

            document.getElementById('grid').addEventListener('change', function () {
                plant.showGrid = this.checked;
            });

            document.getElementById('snap').addEventListener('change', function () {
                plant.snapToGrid = this.checked;
            });

            /* Layout persistence: what makes "operators keep their workspace" true. In a real
               screen this goes to localStorage or a user profile, alongside smart-docking-layout's
               own autoSaveState for the panels around it. */
            let saved = null;

            document.getElementById('save').addEventListener('click', function () {
                saved = plant.layout();
                restore.disabled = false;
                log.textContent = 'Layout saved: ' + saved.symbols.length + ' items, zoom ' +
                    saved.zoom.toFixed(2);
            });

            restore.addEventListener('click', function () {
                if (saved) {
                    plant.layout(saved);
                    log.textContent = 'Layout restored.';
                }
            });
        });

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

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.Mimic is a process diagram canvas: equipment placed on a canvas and connected with lines, with panning, zooming and a layout that can be saved and restored.</h2>
                    <p>The diagram is composed of <code>smart-mimic-symbol</code> elements, so a symbol on the diagram is the same live object as a standalone symbol: it has a tag, a state and a reading, and it raises its own click events. The canvas adds placement, connection routing, the viewport and the layout.</p>
                </section>
                <section>
                    <h2>A feed and reactor section</h2>
                    <Mimic id="plant"></Mimic>
                    <div className="demo-actions">
                        <button type="button" id="fit">Fit</button>
                        <button type="button" id="in">Zoom in</button>
                        <button type="button" id="out">Zoom out</button>
                        <label><input type="checkbox" id="edit" /> Editable</label>
                        <label><input type="checkbox" id="grid" /> Grid</label>
                        <label><input type="checkbox" id="snap" /> Snap</label>
                        <button type="button" id="save">Save layout</button>
                        <button type="button" id="restore" disabled>Restore</button>
                    </div>
                    <p className="hint" id="log">Click a symbol to select it. Drag the empty canvas to pan and use Ctrl+wheel to zoom. The diagram is a single tab stop: press Tab to focus it and use the arrow keys to move between symbols.</p>
                </section>
                <section>
                    <h2>Selected symbol</h2>
                    <dl id="detail" className="detail">
                        <dt>—</dt>
                        <dd>Nothing selected.</dd>
                    </dl>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

#plant { --smart-mimic-height: 440px; }
.demo-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.demo-actions label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.hint { margin-top: 8px; font-size: 12px; opacity: 0.75; }
.detail { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; font-size: 13px; }
.detail dt { font-weight: 600; }
.detail dd { margin: 0; }

/* ── 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.Mimic is a process diagram canvas: equipment placed on a canvas and connected with lines, with panning, zooming and a layout that can be saved and restored.</h2>
            <p>
                The diagram is composed of <code>smart-mimic-symbol</code> elements, so a symbol on the diagram is the same live object as a standalone symbol: it has a tag, a state and a reading, and it raises its own click events. The canvas adds placement, connection routing, the viewport and the layout.
            </p>
        </section>

        <section>
            <h2>A feed and reactor section</h2>
            <smart-mimic id="plant"></smart-mimic>
            <div class="demo-actions">
                <button type="button" id="fit">Fit</button>
                <button type="button" id="in">Zoom in</button>
                <button type="button" id="out">Zoom out</button>
                <label><input type="checkbox" id="edit" /> Editable</label>
                <label><input type="checkbox" id="grid" /> Grid</label>
                <label><input type="checkbox" id="snap" /> Snap</label>
                <button type="button" id="save">Save layout</button>
                <button type="button" id="restore" disabled>Restore</button>
            </div>
            <p class="hint" id="log">
                Click a symbol to select it. Drag the empty canvas to pan and use Ctrl+wheel to zoom. The diagram is a single tab stop: press Tab to focus it and use the arrow keys to move between symbols.
            </p>
        </section>

        <section>
            <h2>Selected symbol</h2>
            <dl id="detail" class="detail"><dt>&mdash;</dt><dd>Nothing selected.</dd></dl>
        </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.mimic.js";


/* A feed and reactor section. Positions are plain numbers in stage coordinates, which is
   what makes the layout serialisable - the diagram is data, not a drawing. */
const LAYOUT = [
    { id: 'TK-01', symbol: 'vessel', x: 40, y: 150, label: 'TK-01', level: 62 },
    { id: 'P-101A', symbol: 'pump', x: 170, y: 150, label: 'P-101A', state: 'running' },
    { id: 'P-101B', symbol: 'pump', x: 170, y: 250, label: 'P-101B', state: 'stopped' },
    { id: 'FT-104', symbol: 'orifice', x: 290, y: 150, label: 'FT-104' },
    { id: 'CV-140', symbol: 'valve', x: 390, y: 150, label: 'CV-140', state: 'manual' },
    { id: 'HX-108', symbol: 'exchanger', x: 500, y: 150, label: 'HX-108', state: 'running' },
    { id: 'R-200', symbol: 'reactor', x: 620, y: 140, label: 'R-200', state: 'running' },
    { id: 'AG-212', symbol: 'agitator', x: 620, y: 40, label: 'AG-212', state: 'running' },
    { id: 'PSV-9', symbol: 'reliefValve', x: 740, y: 60, label: 'PSV-9' },
    { id: 'PT-101', symbol: 'instrument', x: 290, y: 60, label: 'PT-101', value: '6.2 bar' }
];

const CONNECTIONS = [
    { from: 'TK-01', to: 'P-101A', flowing: true },
    { from: 'TK-01', to: 'P-101B' },
    { from: 'P-101A', to: 'FT-104', flowing: true },
    { from: 'P-101B', to: 'FT-104' },
    { from: 'FT-104', to: 'CV-140', flowing: true },
    { from: 'CV-140', to: 'HX-108', flowing: true },
    { from: 'HX-108', to: 'R-200', flowing: true },
    /* the transmitter's tap on the discharge line: an instrument line, not a pipe */
    { from: 'PT-101', to: 'P-101A', className: 'instrument' },
    { from: 'AG-212', to: 'R-200' },
    { from: 'R-200', to: 'PSV-9', className: 'warning' }
];

const DETAIL = {
    'TK-01': ['Feed tank', 'Vessel, 12 m³'],
    'P-101A': ['Feed pump A', 'Centrifugal, 55 kW'],
    'P-101B': ['Feed pump B', 'Centrifugal, 55 kW (standby)'],
    'FT-104': ['Feed flow', 'Orifice plate + DP transmitter'],
    'CV-140': ['Feed control valve', 'Globe, air-to-open'],
    'HX-108': ['Feed pre-heater', 'Shell and tube'],
    'R-200': ['Reactor', 'Stirred, 8 m³, jacketed'],
    'AG-212': ['Reactor agitator', 'Top-entry, 15 kW'],
    'PSV-9': ['Reactor relief', 'Set 12 bar g'],
    'PT-101': ['Discharge pressure', 'Pressure transmitter']
};

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 plant = document.getElementById('plant'),
            log = document.getElementById('log'),
            detail = document.getElementById('detail'),
            restore = document.getElementById('restore');

        plant.symbols = LAYOUT.map(function (s) {
            return Object.assign({}, s);
        });
        plant.connections = CONNECTIONS;
        plant.symbolSize = 64;
        plant.fit();

        plant.addEventListener('symbolClick', function (event) {
            const info = DETAIL[event.detail.id];

            log.textContent = 'selected ' + event.detail.id;
            detail.innerHTML = info
                ? '<dt>Tag</dt><dd>' + event.detail.id + '</dd>' +
                  '<dt>Description</dt><dd>' + info[0] + '</dd>' +
                  '<dt>Type</dt><dd>' + info[1] + '</dd>' +
                  '<dt>State</dt><dd>' + (event.detail.symbol.state || 'normal') + '</dd>'
                : '<dt>&mdash;</dt><dd>No detail for this item.</dd>';
        });

        plant.addEventListener('layoutChange', function (event) {
            log.textContent = 'moved ' + event.detail.id +
                '. The layout is data, so this can be saved.';
        });

        document.getElementById('fit').addEventListener('click', function () {
            plant.fit();
        });

        document.getElementById('in').addEventListener('click', function () {
            plant.zoomBy(1.25);
        });

        document.getElementById('out').addEventListener('click', function () {
            plant.zoomBy(1 / 1.25);
        });

        document.getElementById('edit').addEventListener('change', function () {
            plant.editable = this.checked;
            log.textContent = this.checked
                ? 'Editable. Drag a symbol to move it.'
                : 'Read-only.';
        });

        document.getElementById('grid').addEventListener('change', function () {
            plant.showGrid = this.checked;
        });

        document.getElementById('snap').addEventListener('change', function () {
            plant.snapToGrid = this.checked;
        });

        /* Layout persistence: what makes "operators keep their workspace" true. In a real
           screen this goes to localStorage or a user profile, alongside smart-docking-layout's
           own autoSaveState for the panels around it. */
        let saved = null;

        document.getElementById('save').addEventListener('click', function () {
            saved = plant.layout();
            restore.disabled = false;
            log.textContent = 'Layout saved: ' + saved.symbols.length + ' items, zoom ' +
                saved.zoom.toFixed(2);
        });

        restore.addEventListener('click', function () {
            if (saved) {
                plant.layout(saved);
                log.textContent = 'Layout restored.';
            }
        });
      });
    });
  }
};
</script>

<style>
#plant { --smart-mimic-height: 440px; }
.demo-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.demo-actions label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.hint { margin-top: 8px; font-size: 12px; opacity: 0.75; }
.detail { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; font-size: 13px; }
.detail dt { font-weight: 600; }
.detail dd { margin: 0; }

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