Bit Field

angular/app.component.html

<div class="angular-root" theme="industrial">
    <div class="smart-demo-container">
        <section id="overview">
            <h2>Smart.BitField displays a hardware register as its individual bits, with the word value and the bits kept in sync.</h2>
            <p>
                A register has a fixed width, named and reserved bits, an MSB-first or LSB-first display order, and a word value that always matches the bits. The component keeps the word and the bits in sync, so the application does not have to maintain a boolean array and a numeric value separately.
            </p>
        </section>

        <section>
            <h2>A named status register</h2>
            <p>Click a bit to toggle it, or press Tab to focus the register and use the arrow keys. Reserved bits are drawn dashed and cannot be changed.</p>
            <smart-bit-field id="status" [interactive]="true"></smart-bit-field>
            <div class="demo-actions">
                <button type="button" id="setReady">Set READY</button>
                <button type="button" id="clearFaults">Clear the fault mask</button>
                <button type="button" id="zero">Zero</button>
            </div>
            <p class="hint" id="log">&mdash;</p>
        </section>

        <section>
            <h2>Word lengths</h2>
            <p>
                Values are held as <code>BigInt</code>, so 64-bit registers are represented exactly. A JavaScript number loses integer precision above 2<sup>53</sup> and cannot hold a <code>uint64</code> value.
            </p>
            <div class="stack">
                <label>uint8 <smart-bit-field id="w8" word-length="uint8" radix-display="hex"></smart-bit-field></label>
                <label>int16 <smart-bit-field id="w16" word-length="int16" radix-display="dec"></smart-bit-field></label>
                <label>uint64 <smart-bit-field id="w64" word-length="uint64" radix-display="hex"></smart-bit-field></label>
            </div>
            <p class="hint">
                The <code>int16</code> row shows the same bit pattern as a signed decimal value.
            </p>
        </section>

        <section>
            <h2>Bit order</h2>
            <p>
                Hardware documentation is written MSB-first, with bit 15 on the left for a 16-bit register, so this is the default. The <code>bitOrder</code> property changes the display order only; bits are always numbered from the least significant bit.
            </p>
            <div class="stack">
                <label>msbFirst <smart-bit-field id="msb" word-length="uint8" [value]="177"></smart-bit-field></label>
                <label>lsbFirst <smart-bit-field id="lsb" word-length="uint8" [value]="177" bit-order="lsbFirst"></smart-bit-field></label>
            </div>
        </section>
    </div>
</div>

angular/app.component.ts

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

import { BitFieldModule } from 'smart-industrial/angular/bitfield';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - BitField 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: [BitFieldModule],
    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 plausible drive status register. Reserved bits are marked read-only so the element
   refuses to change them - a register map is a contract, and a UI that lets an operator
   flip a reserved bit is lying about the hardware. */
const STATUS_BITS = [
    { index: 0, label: 'READY' },
    { index: 1, label: 'RUN' },
    { index: 2, label: 'FAULT', color: 'var(--smart-industrial-alarm-critical, #c0392b)' },
    { index: 3, label: 'WARN', color: 'var(--smart-industrial-alarm-warning, #e8a33d)' },
    { index: 4, label: 'ATSPD' },
    { index: 5, label: 'REV' },
    { index: 6, label: 'LOCAL' },
    { index: 7, label: 'RMT' },
    { index: 8, label: 'OVLD', color: 'var(--smart-industrial-alarm-critical, #c0392b)' },
    { index: 9, label: 'OVTMP', color: 'var(--smart-industrial-alarm-critical, #c0392b)' },
    { index: 10, label: 'UV', color: 'var(--smart-industrial-alarm-warning, #e8a33d)' },
    { index: 11, label: 'OV', color: 'var(--smart-industrial-alarm-warning, #e8a33d)' },
    { index: 12, label: 'rsvd', readOnly: true },
    { index: 13, label: 'rsvd', readOnly: true },
    { index: 14, label: 'rsvd', readOnly: true },
    { index: 15, label: 'COMMS' }
];

/* FAULT, OVLD, OVTMP - the bits a "clear faults" command actually touches. */
const FAULT_MASK = (1 << 2) | (1 << 8) | (1 << 9);

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

    status.wordLength = 'uint16';
    status.bits = STATUS_BITS;
    status.value = '0x8213';
    status.radixDisplay = 'hex';

    status.addEventListener('change', function (event) {
        log.textContent = event.detail.bit === null
            ? 'mask applied -> ' + event.detail.value
            : 'bit ' + event.detail.bit + ' -> ' + (status.bit(event.detail.bit) ? '1' : '0') +
              '  (word ' + event.detail.value + ')';
    });

    document.getElementById('setReady').addEventListener('click', function () {
        status.setBit(0, true);
    });

    document.getElementById('clearFaults').addEventListener('click', function () {
        status.mask(FAULT_MASK, false);
    });

    document.getElementById('zero').addEventListener('click', function () {
        status.value = '0';
    });

    /* ── Word lengths ────────────────────────────────────────────────── */
    document.getElementById('w8').value = '0xA5';
    document.getElementById('w16').value = '0xFFFF';

    /* Past 2^53 - a plain number could not hold this without silently rounding. */
    const w64 = document.getElementById('w64');

    /* Set as a property, not as show-indices="false" in markup: boolean attributes are
       presence-based, so writing "false" would switch indices ON. */
    w64.showIndices = false;
    w64.value = '0xDEADBEEFCAFEF00D';
}

angular/app.component.css

.stack { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.stack label { display: flex; align-items: center; gap: 12px; font-size: 12px; min-width: 0; max-width: 100%; }
/* min-width: 0 on the label and on the register is what lets the uint64 row scroll inside
   its element instead of pushing the page out: a flex item otherwise refuses to be narrower
   than its content, and both the label and the register are flex items here. */
.stack label > smart-bit-field { min-width: 0; }
.demo-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.hint { margin-top: 8px; font-size: 12px; opacity: 0.75; font-family: Consolas, monospace; }

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


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* A plausible drive status register. Reserved bits are marked read-only so the element
   refuses to change them - a register map is a contract, and a UI that lets an operator
   flip a reserved bit is lying about the hardware. */
const STATUS_BITS = [
    { index: 0, label: 'READY' },
    { index: 1, label: 'RUN' },
    { index: 2, label: 'FAULT', color: 'var(--smart-industrial-alarm-critical, #c0392b)' },
    { index: 3, label: 'WARN', color: 'var(--smart-industrial-alarm-warning, #e8a33d)' },
    { index: 4, label: 'ATSPD' },
    { index: 5, label: 'REV' },
    { index: 6, label: 'LOCAL' },
    { index: 7, label: 'RMT' },
    { index: 8, label: 'OVLD', color: 'var(--smart-industrial-alarm-critical, #c0392b)' },
    { index: 9, label: 'OVTMP', color: 'var(--smart-industrial-alarm-critical, #c0392b)' },
    { index: 10, label: 'UV', color: 'var(--smart-industrial-alarm-warning, #e8a33d)' },
    { index: 11, label: 'OV', color: 'var(--smart-industrial-alarm-warning, #e8a33d)' },
    { index: 12, label: 'rsvd', readOnly: true },
    { index: 13, label: 'rsvd', readOnly: true },
    { index: 14, label: 'rsvd', readOnly: true },
    { index: 15, label: 'COMMS' }
];

/* FAULT, OVLD, OVTMP - the bits a "clear faults" command actually touches. */
const FAULT_MASK = (1 << 2) | (1 << 8) | (1 << 9);

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

            status.wordLength = 'uint16';
            status.bits = STATUS_BITS;
            status.value = '0x8213';
            status.radixDisplay = 'hex';

            status.addEventListener('change', function (event) {
                log.textContent = event.detail.bit === null
                    ? 'mask applied -> ' + event.detail.value
                    : 'bit ' + event.detail.bit + ' -> ' + (status.bit(event.detail.bit) ? '1' : '0') +
                      '  (word ' + event.detail.value + ')';
            });

            document.getElementById('setReady').addEventListener('click', function () {
                status.setBit(0, true);
            });

            document.getElementById('clearFaults').addEventListener('click', function () {
                status.mask(FAULT_MASK, false);
            });

            document.getElementById('zero').addEventListener('click', function () {
                status.value = '0';
            });

            /* ── Word lengths ────────────────────────────────────────────────── */
            document.getElementById('w8').value = '0xA5';
            document.getElementById('w16').value = '0xFFFF';

            /* Past 2^53 - a plain number could not hold this without silently rounding. */
            const w64 = document.getElementById('w64');

            /* Set as a property, not as show-indices="false" in markup: boolean attributes are
               presence-based, so writing "false" would switch indices ON. */
            w64.showIndices = false;
            w64.value = '0xDEADBEEFCAFEF00D';
        });

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

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.BitField displays a hardware register as its individual bits, with the word value and the bits kept in sync.</h2>
                    <p>A register has a fixed width, named and reserved bits, an MSB-first or LSB-first display order, and a word value that always matches the bits. The component keeps the word and the bits in sync, so the application does not have to maintain a boolean array and a numeric value separately.</p>
                </section>
                <section>
                    <h2>A named status register</h2>
                    <p>Click a bit to toggle it, or press Tab to focus the register and use the arrow keys. Reserved bits are drawn dashed and cannot be changed.</p>
                    <BitField id="status" interactive></BitField>
                    <div className="demo-actions">
                        <button type="button" id="setReady">Set READY</button>
                        <button type="button" id="clearFaults">Clear the fault mask</button>
                        <button type="button" id="zero">Zero</button>
                    </div>
                    <p className="hint" id="log">—</p>
                </section>
                <section>
                    <h2>Word lengths</h2>
                    <p>Values are held as <code>BigInt</code>, so 64-bit registers are represented exactly. A JavaScript number loses integer precision above 2<sup>53</sup> and cannot hold a <code>uint64</code> value.</p>
                    <div className="stack">
                        <label>
                            uint8
                            <BitField id="w8" wordLength="uint8" radixDisplay="hex"></BitField>
                        </label>
                        <label>
                            int16
                            <BitField id="w16" wordLength="int16" radixDisplay="dec"></BitField>
                        </label>
                        <label>
                            uint64
                            <BitField id="w64" wordLength="uint64" radixDisplay="hex"></BitField>
                        </label>
                    </div>
                    <p className="hint">The <code>int16</code> row shows the same bit pattern as a signed decimal value.</p>
                </section>
                <section>
                    <h2>Bit order</h2>
                    <p>Hardware documentation is written MSB-first, with bit 15 on the left for a 16-bit register, so this is the default. The <code>bitOrder</code> property changes the display order only; bits are always numbered from the least significant bit.</p>
                    <div className="stack">
                        <label>
                            msbFirst
                            <BitField id="msb" wordLength="uint8" value={177}></BitField>
                        </label>
                        <label>
                            lsbFirst
                            <BitField id="lsb" wordLength="uint8" value={177} bitOrder="lsbFirst"></BitField>
                        </label>
                    </div>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

.stack { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.stack label { display: flex; align-items: center; gap: 12px; font-size: 12px; min-width: 0; max-width: 100%; }
/* min-width: 0 on the label and on the register is what lets the uint64 row scroll inside
   its element instead of pushing the page out: a flex item otherwise refuses to be narrower
   than its content, and both the label and the register are flex items here. */
.stack label > smart-bit-field { min-width: 0; }
.demo-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.hint { margin-top: 8px; font-size: 12px; opacity: 0.75; font-family: Consolas, monospace; }

/* ── 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.BitField displays a hardware register as its individual bits, with the word value and the bits kept in sync.</h2>
            <p>
                A register has a fixed width, named and reserved bits, an MSB-first or LSB-first display order, and a word value that always matches the bits. The component keeps the word and the bits in sync, so the application does not have to maintain a boolean array and a numeric value separately.
            </p>
        </section>

        <section>
            <h2>A named status register</h2>
            <p>Click a bit to toggle it, or press Tab to focus the register and use the arrow keys. Reserved bits are drawn dashed and cannot be changed.</p>
            <smart-bit-field id="status" interactive></smart-bit-field>
            <div class="demo-actions">
                <button type="button" id="setReady">Set READY</button>
                <button type="button" id="clearFaults">Clear the fault mask</button>
                <button type="button" id="zero">Zero</button>
            </div>
            <p class="hint" id="log">&mdash;</p>
        </section>

        <section>
            <h2>Word lengths</h2>
            <p>
                Values are held as <code>BigInt</code>, so 64-bit registers are represented exactly. A JavaScript number loses integer precision above 2<sup>53</sup> and cannot hold a <code>uint64</code> value.
            </p>
            <div class="stack">
                <label>uint8 <smart-bit-field id="w8" word-length="uint8" radix-display="hex"></smart-bit-field></label>
                <label>int16 <smart-bit-field id="w16" word-length="int16" radix-display="dec"></smart-bit-field></label>
                <label>uint64 <smart-bit-field id="w64" word-length="uint64" radix-display="hex"></smart-bit-field></label>
            </div>
            <p class="hint">
                The <code>int16</code> row shows the same bit pattern as a signed decimal value.
            </p>
        </section>

        <section>
            <h2>Bit order</h2>
            <p>
                Hardware documentation is written MSB-first, with bit 15 on the left for a 16-bit register, so this is the default. The <code>bitOrder</code> property changes the display order only; bits are always numbered from the least significant bit.
            </p>
            <div class="stack">
                <label>msbFirst <smart-bit-field id="msb" word-length="uint8" value="0b10110001"></smart-bit-field></label>
                <label>lsbFirst <smart-bit-field id="lsb" word-length="uint8" value="0b10110001" bit-order="lsbFirst"></smart-bit-field></label>
            </div>
        </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.bitfield.js";


/* A plausible drive status register. Reserved bits are marked read-only so the element
   refuses to change them - a register map is a contract, and a UI that lets an operator
   flip a reserved bit is lying about the hardware. */
const STATUS_BITS = [
    { index: 0, label: 'READY' },
    { index: 1, label: 'RUN' },
    { index: 2, label: 'FAULT', color: 'var(--smart-industrial-alarm-critical, #c0392b)' },
    { index: 3, label: 'WARN', color: 'var(--smart-industrial-alarm-warning, #e8a33d)' },
    { index: 4, label: 'ATSPD' },
    { index: 5, label: 'REV' },
    { index: 6, label: 'LOCAL' },
    { index: 7, label: 'RMT' },
    { index: 8, label: 'OVLD', color: 'var(--smart-industrial-alarm-critical, #c0392b)' },
    { index: 9, label: 'OVTMP', color: 'var(--smart-industrial-alarm-critical, #c0392b)' },
    { index: 10, label: 'UV', color: 'var(--smart-industrial-alarm-warning, #e8a33d)' },
    { index: 11, label: 'OV', color: 'var(--smart-industrial-alarm-warning, #e8a33d)' },
    { index: 12, label: 'rsvd', readOnly: true },
    { index: 13, label: 'rsvd', readOnly: true },
    { index: 14, label: 'rsvd', readOnly: true },
    { index: 15, label: 'COMMS' }
];

/* FAULT, OVLD, OVTMP - the bits a "clear faults" command actually touches. */
const FAULT_MASK = (1 << 2) | (1 << 8) | (1 << 9);

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

        status.wordLength = 'uint16';
        status.bits = STATUS_BITS;
        status.value = '0x8213';
        status.radixDisplay = 'hex';

        status.addEventListener('change', function (event) {
            log.textContent = event.detail.bit === null
                ? 'mask applied -> ' + event.detail.value
                : 'bit ' + event.detail.bit + ' -> ' + (status.bit(event.detail.bit) ? '1' : '0') +
                  '  (word ' + event.detail.value + ')';
        });

        document.getElementById('setReady').addEventListener('click', function () {
            status.setBit(0, true);
        });

        document.getElementById('clearFaults').addEventListener('click', function () {
            status.mask(FAULT_MASK, false);
        });

        document.getElementById('zero').addEventListener('click', function () {
            status.value = '0';
        });

        /* ── Word lengths ────────────────────────────────────────────────── */
        document.getElementById('w8').value = '0xA5';
        document.getElementById('w16').value = '0xFFFF';

        /* Past 2^53 - a plain number could not hold this without silently rounding. */
        const w64 = document.getElementById('w64');

        /* Set as a property, not as show-indices="false" in markup: boolean attributes are
           presence-based, so writing "false" would switch indices ON. */
        w64.showIndices = false;
        w64.value = '0xDEADBEEFCAFEF00D';
      });
    });
  }
};
</script>

<style>
.stack { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.stack label { display: flex; align-items: center; gap: 12px; font-size: 12px; min-width: 0; max-width: 100%; }
/* min-width: 0 on the label and on the register is what lets the uint64 row scroll inside
   its element instead of pushing the page out: a flex item otherwise refuses to be narrower
   than its content, and both the label and the register are flex items here. */
.stack label > smart-bit-field { min-width: 0; }
.demo-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.hint { margin-top: 8px; font-size: 12px; opacity: 0.75; font-family: Consolas, monospace; }

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