Wavedrom and Bitfield Diagrams

Svelte helpers for drawing Wavedrom and Bitfield diagrams. Contains light/dark mode tracking too.

Example Wavedrom Diagram

<script lang="ts">
    import { UI, Widgets } from "@bojit/svelte-components";
</script>

<UI.Container class="aspect-auto">
    <Widgets.WaveDrom
        json={{
            head: {
                text: 'WaveDrom Timing Diagram',
                tick: 0,
                every: 2
            },
            signal: [
                { name: 'clk', wave: 'p.....|...' },
                { name: 'Data', wave: 'x.345x|=.x', data: ['head', 'body', 'tail', 'data'] },
                { name: 'Request', wave: '0.1..0|1.0' },
                {},
                { name: 'Acknowledge', wave: '1.....|01.' }
            ]
        }}
    />
</UI.Container>

Here is a Bitfield Diagram

<script lang="ts">
    import { UI, Widgets } from "@bojit/svelte-components";
</script>

<UI.Container class="aspect-auto">
    <Widgets.BitField
        json={[
            { name: 'IPO', bits: 8, attr: 'RO' },
            { bits: 7 },
            { name: 'BRK', bits: 5, attr: 'RW', type: 4 },
            { name: 'CPK', bits: 1 },
            { name: 'Clear', bits: 3 },
            { bits: 8 }
        ]}
        options={{
            hspace: 800,
            lanes: 2
        }}
    />
</UI.Container>