@patchbayhq/ui 0.1.0

package/dist/components/adsr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"adsr.js","sourceRoot":"","sources":["../../src/components/adsr.ts"],"names":[],"mappings":"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"}

package/dist/components/menu.d.ts

@@ -0,0 +1,7 @@
+export type MenuChangeDetail = {
+    label: string;
+    source: "user";
+    value: string;
+};
+export declare function initMenus(root?: ParentNode): void;
+//# sourceMappingURL=menu.d.ts.map

package/dist/components/menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/components/menu.ts"],"names":[],"mappings":"AAUA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAIF,wBAAgB,SAAS,CAAC,IAAI,GAAE,UAAqB,GAAG,IAAI,CAO3D"}

package/dist/components/menu.js

@@ -0,0 +1,136 @@
+const controllerKey = "__menuController";
+export function initMenus(root = document) {
+    root.querySelectorAll("[data-menu]").forEach((element) => {
+        if (!element[controllerKey]) {
+            element[controllerKey] = new MenuController(element);
+        }
+        element[controllerKey]?.sync();
+    });
+}
+class MenuController {
+    root;
+    activeIndex = 0;
+    button;
+    list;
+    constructor(root) {
+        this.root = root;
+        this.button = root.querySelector(".menu__button");
+        this.list = root.querySelector(".menu__list");
+        this.button?.addEventListener("click", () => this.toggle());
+        this.button?.addEventListener("keydown", (event) => this.handleKeydown(event));
+        this.options.forEach((option, index) => {
+            option.addEventListener("click", () => this.commit(index));
+            option.addEventListener("mouseenter", () => {
+                this.activeIndex = index;
+                this.sync();
+            });
+        });
+        this.root.addEventListener("focusout", (event) => {
+            if (event.relatedTarget instanceof Node &&
+                this.root.contains(event.relatedTarget)) {
+                return;
+            }
+            this.setOpen(false);
+        });
+        this.sync();
+    }
+    get options() {
+        return Array.from(this.root.querySelectorAll(".menu__option"));
+    }
+    sync() {
+        const options = this.options;
+        const selectedIndex = Math.max(0, options.findIndex((option) => option.dataset.value === this.value));
+        const selected = options[selectedIndex] ?? options[0];
+        this.activeIndex = Math.min(this.activeIndex, Math.max(options.length - 1, 0));
+        if (selected && !this.root.dataset.value) {
+            this.root.dataset.value = selected.dataset.value ?? selected.textContent ?? "";
+        }
+        if (this.button) {
+            const value = this.button.querySelector(".menu__value");
+            if (value && selected) {
+                value.textContent = selected.textContent ?? "";
+            }
+            this.button.setAttribute("aria-expanded", String(this.open));
+        }
+        if (this.list) {
+            this.list.hidden = !this.open;
+            this.list.setAttribute("aria-activedescendant", options[this.activeIndex]?.id ?? "");
+        }
+        options.forEach((option, index) => {
+            const selectedOption = option === selected;
+            option.classList.toggle("is-active", index === this.activeIndex);
+            option.classList.toggle("is-selected", selectedOption);
+            option.setAttribute("aria-selected", String(selectedOption));
+            option.id ||= `${this.list?.id ?? "menu"}-option-${index}`;
+            if (!option.dataset.value) {
+                option.dataset.value = option.textContent ?? "";
+            }
+        });
+    }
+    get open() {
+        return this.root.dataset.open === "true";
+    }
+    get value() {
+        return this.root.dataset.value ?? "";
+    }
+    setOpen(open) {
+        if (open) {
+            this.root.dataset.open = "true";
+        }
+        else {
+            delete this.root.dataset.open;
+        }
+        this.sync();
+    }
+    toggle() {
+        this.setOpen(!this.open);
+    }
+    firstEnabledIndex(startIndex, direction) {
+        const options = this.options;
+        for (let offset = 0; offset < options.length; offset += 1) {
+            const index = (startIndex + offset * direction + options.length) % options.length;
+            if (!options[index]?.disabled)
+                return index;
+        }
+        return this.activeIndex;
+    }
+    handleKeydown(event) {
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            const direction = event.key === "ArrowDown" ? 1 : -1;
+            this.activeIndex = this.firstEnabledIndex(this.activeIndex + direction, direction);
+            this.setOpen(true);
+            return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            if (this.open) {
+                this.commit(this.activeIndex);
+            }
+            else {
+                this.setOpen(true);
+            }
+            return;
+        }
+        if (event.key === "Escape") {
+            this.setOpen(false);
+        }
+    }
+    commit(index) {
+        const option = this.options[index];
+        if (!option || option.disabled)
+            return;
+        this.root.dataset.value = option.dataset.value ?? option.textContent ?? "";
+        this.activeIndex = index;
+        this.setOpen(false);
+        this.root.dispatchEvent(new CustomEvent("menu-change", {
+            bubbles: true,
+            detail: {
+                label: option.textContent ?? "",
+                source: "user",
+                value: this.root.dataset.value,
+            },
+        }));
+    }
+}
+//# sourceMappingURL=menu.js.map

package/dist/components/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/components/menu.ts"],"names":[],"mappings":"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"}

package/dist/components/sequencers.d.ts

@@ -0,0 +1,2 @@
+export declare function defineSequencerElements(): void;
+//# sourceMappingURL=sequencers.d.ts.map

package/dist/components/sequencers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sequencers.d.ts","sourceRoot":"","sources":["../../src/components/sequencers.ts"],"names":[],"mappings":"AA4BA,wBAAgB,uBAAuB,IAAI,IAAI,CAQ9C"}

package/dist/components/sequencers.js

@@ -0,0 +1,477 @@
+import { createGridState, createStepKeyChange, createStepSequencerState, cycleGridDirection, gridRowFromY, stepKeys, stepLaneCount, stepNoteAccent, stepStepCount, stepStepsPerBar, setStepLoopEnd, setStepLoopStart, toggleGridCell, toggleStepNote, } from "../sequencers";
+export function defineSequencerElements() {
+    if (!customElements.get("sequencer-grid")) {
+        customElements.define("sequencer-grid", GridElement);
+    }
+    if (!customElements.get("step-sequencer")) {
+        customElements.define("step-sequencer", StepElement);
+    }
+}
+class GridElement extends HTMLElement {
+    static observedAttributes = ["cells", "directions", "measure-size"];
+    state = createGridState();
+    get cells() {
+        return this.state.cells.map((cell) => ({ ...cell }));
+    }
+    set cells(cells) {
+        this.updateState({ cells });
+    }
+    get directions() {
+        return [...this.state.directions];
+    }
+    set directions(directions) {
+        this.updateState({ directions });
+    }
+    get measureSize() {
+        return this.state.measureSize;
+    }
+    set measureSize(measureSize) {
+        this.updateState({ measureSize });
+    }
+    connectedCallback() {
+        this.classList.add("grid");
+        this.setAttribute("role", this.getAttribute("role") ?? "group");
+        this.render();
+    }
+    attributeChangedCallback() {
+        this.syncStateFromAttributes();
+        if (this.isConnected) {
+            this.render();
+        }
+    }
+    updateState(next) {
+        this.state = createGridState({ ...this.state, ...next });
+        if (this.isConnected) {
+            this.render();
+        }
+    }
+    syncStateFromAttributes() {
+        this.state = createGridState({
+            ...this.state,
+            cells: jsonAttribute(this, "cells") ?? this.state.cells,
+            directions: jsonAttribute(this, "directions") ??
+                this.state.directions,
+            measureSize: numberAttribute(this, "measure-size") ?? this.state.measureSize,
+        });
+    }
+    render() {
+        this.style.setProperty("--grid-columns", String(this.state.cells.length));
+        this.replaceChildren();
+        this.state.cells.forEach((cell, index) => {
+            const button = document.createElement("button");
+            const column = index + 1;
+            const row = gridRowFromY(cell.y);
+            button.type = "button";
+            button.className = cell.active
+                ? "grid__cell is-active"
+                : "grid__cell";
+            button.dataset.gridCell = String(column);
+            button.dataset.gridColumn = String(column);
+            button.dataset.gridRole = "cell";
+            button.dataset.gridState = cell.active ? "active" : "inactive";
+            button.dataset.gridY = cell.y.toFixed(4);
+            button.style.setProperty("--grid-marker-y", `${cell.y * 100}%`);
+            button.setAttribute("aria-pressed", String(cell.active));
+            button.setAttribute("aria-label", cell.active
+                ? `Grid column ${column}, row ${row}`
+                : `Grid column ${column}, inactive`);
+            button.addEventListener("pointerdown", (event) => this.handleCellPointer(event, column));
+            button.addEventListener("keydown", (event) => this.handleCellKeydown(event, column, cell.y));
+            this.append(button);
+        });
+        this.state.directions.forEach((direction, index) => {
+            const button = document.createElement("button");
+            const column = index + 1;
+            button.type = "button";
+            button.className = `grid__direction is-direction-${direction}`;
+            button.dataset.gridDirection = direction;
+            button.dataset.gridDirectionControl = String(column);
+            button.dataset.gridDirectionValue = gridDirectionValue(direction);
+            button.dataset.gridRole = "direction";
+            button.setAttribute("aria-label", `Grid direction ${column}: ${direction}`);
+            button.title = direction;
+            button.addEventListener("click", () => this.handleDirectionClick(column));
+            this.append(button);
+        });
+    }
+    handleCellPointer(event, column) {
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        const button = event.currentTarget;
+        const rect = button.getBoundingClientRect();
+        const y = rect.height > 0
+            ? (event.clientY - rect.top) / rect.height
+            : (this.state.cells[column - 1]?.y ?? 0.5);
+        const { change, state } = toggleGridCell(this.state, column, y);
+        this.state = state;
+        this.render();
+        this.dispatchGridChange(change);
+    }
+    handleCellKeydown(event, column, y) {
+        if (event.key !== "Enter" && event.key !== " ")
+            return;
+        event.preventDefault();
+        const { change, state } = toggleGridCell(this.state, column, y);
+        this.state = state;
+        this.render();
+        this.dispatchGridChange(change);
+    }
+    handleDirectionClick(column) {
+        const { change, state } = cycleGridDirection(this.state, column);
+        this.state = state;
+        this.render();
+        this.dispatchGridChange(change);
+    }
+    dispatchGridChange(detail) {
+        this.dispatchEvent(new CustomEvent("grid-change", {
+            bubbles: true,
+            composed: true,
+            detail,
+        }));
+    }
+}
+class StepElement extends HTMLElement {
+    static observedAttributes = ["active-key", "bars", "loop", "notes"];
+    keyPressAbortController;
+    loopDragAbortController;
+    pressedKey = null;
+    state = createStepSequencerState();
+    get activeKey() {
+        return this.state.activeKey;
+    }
+    set activeKey(activeKey) {
+        this.updateState({ activeKey });
+    }
+    get notes() {
+        return this.state.notes.map((note) => ({ ...note }));
+    }
+    set notes(notes) {
+        this.updateState({ notes });
+    }
+    get loop() {
+        return { ...this.state.loop };
+    }
+    set loop(loop) {
+        this.updateState({ loop });
+    }
+    get bars() {
+        return this.state.bars;
+    }
+    set bars(bars) {
+        this.updateState({ bars });
+    }
+    connectedCallback() {
+        this.classList.add("step-sequencer");
+        this.setAttribute("role", this.getAttribute("role") ?? "group");
+        this.render();
+    }
+    disconnectedCallback() {
+        this.keyPressAbortController?.abort();
+        this.loopDragAbortController?.abort();
+        this.keyPressAbortController = undefined;
+        this.loopDragAbortController = undefined;
+        this.pressedKey = null;
+    }
+    attributeChangedCallback() {
+        this.syncStateFromAttributes();
+        if (this.isConnected) {
+            this.render();
+        }
+    }
+    updateState(next) {
+        this.state = createStepSequencerState({ ...this.state, ...next });
+        if (this.isConnected) {
+            this.render();
+        }
+    }
+    syncStateFromAttributes() {
+        this.state = createStepSequencerState({
+            ...this.state,
+            activeKey: this.getAttribute("active-key") ??
+                this.state.activeKey,
+            bars: numberAttribute(this, "bars") ?? this.state.bars,
+            loop: jsonAttribute(this, "loop") ?? this.state.loop,
+            notes: jsonAttribute(this, "notes") ?? this.state.notes,
+        });
+    }
+    render() {
+        this.replaceChildren();
+        const displayKey = this.pressedKey ?? this.state.activeKey;
+        this.dataset.activeKey = this.state.activeKey;
+        this.dataset.activeKeyIndex = String(stepKeys.indexOf(this.state.activeKey) + 1);
+        if (this.pressedKey) {
+            this.dataset.pressedKey = this.pressedKey;
+            this.dataset.pressedKeyIndex = String(stepKeys.indexOf(this.pressedKey) + 1);
+        }
+        else {
+            delete this.dataset.pressedKey;
+            delete this.dataset.pressedKeyIndex;
+        }
+        this.dataset.loopStart = String(this.state.loop.start);
+        this.dataset.loopEnd = String(this.state.loop.end);
+        this.dataset.loopLength = String(this.state.loop.end - this.state.loop.start + 1);
+        this.dataset.loopBar = String(Math.floor((this.state.loop.start - 1) / stepStepsPerBar) + 1);
+        this.setAttribute("aria-label", `Step sequencer, key ${displayKey}, loop steps ${this.state.loop.start} through ${this.state.loop.end}`);
+        this.append(this.renderLoopRuler(), this.renderLabels(), this.renderKeys(), this.renderRoll());
+    }
+    renderLabels() {
+        const labels = document.createElement("div");
+        const activeKey = document.createElement("span");
+        const displayKey = this.pressedKey ?? this.state.activeKey;
+        labels.className = "step-sequencer__labels";
+        activeKey.textContent = displayKey;
+        labels.append(activeKey);
+        return labels;
+    }
+    renderKeys() {
+        const keys = document.createElement("div");
+        keys.className = "step-sequencer__keys";
+        keys.setAttribute("role", "group");
+        keys.setAttribute("aria-label", "Pitch keys");
+        stepKeys.forEach((key, index) => {
+            const button = document.createElement("span");
+            const tone = key.includes("#") ? "black" : "white";
+            const pressed = key === this.pressedKey;
+            button.className = tone === "black" ? "is-black" : "is-white";
+            button.dataset.stepKey = String(index + 1);
+            button.dataset.stepKeyState = pressed ? "pressed" : "idle";
+            button.dataset.stepKeyTone = tone;
+            button.setAttribute("aria-label", `Key ${key}`);
+            button.setAttribute("aria-pressed", String(pressed));
+            button.setAttribute("role", "button");
+            button.setAttribute("tabindex", "0");
+            button.classList.toggle("is-active", pressed);
+            button.addEventListener("pointerdown", (event) => this.handleKeyPointerDown(event, key));
+            button.addEventListener("keydown", (event) => this.handleKeyKeydown(event, key));
+            button.addEventListener("keyup", (event) => this.handleKeyKeyup(event, key));
+            button.addEventListener("blur", () => this.releaseKey(key));
+            keys.append(button);
+        });
+        return keys;
+    }
+    renderRoll() {
+        const roll = document.createElement("div");
+        roll.className = "step-sequencer__roll";
+        roll.setAttribute("role", "grid");
+        roll.setAttribute("aria-label", "Step notes");
+        roll.setAttribute("aria-rowcount", String(stepLaneCount));
+        roll.setAttribute("aria-colcount", String(stepStepCount));
+        Array.from({ length: stepStepCount * stepLaneCount }, (_, index) => {
+            const step = (index % stepStepCount) + 1;
+            const lane = Math.floor(index / stepStepCount) + 1;
+            const note = this.state.notes.find((candidate) => candidate.step === step && candidate.lane === lane);
+            const accent = stepNoteAccent(step);
+            const button = document.createElement("button");
+            button.type = "button";
+            button.dataset.stepBarStart = String(accent === "blue");
+            button.setAttribute("aria-label", `Step ${step}, lane ${lane}`);
+            button.setAttribute("aria-colindex", String(step));
+            button.setAttribute("aria-rowindex", String(lane));
+            button.setAttribute("aria-pressed", String(Boolean(note)));
+            button.setAttribute("aria-selected", String(Boolean(note)));
+            button.setAttribute("role", "gridcell");
+            button.className = note ? "is-active" : "";
+            button.addEventListener("click", () => this.handleNoteToggle(step, lane));
+            if (note) {
+                const marker = document.createElement("span");
+                marker.className = ["step-sequencer__note", `is-${accent}`].join(" ");
+                marker.dataset.stepNoteAccent = accent;
+                button.append(marker);
+            }
+            roll.append(button);
+        });
+        return roll;
+    }
+    renderLoopRuler() {
+        const ruler = document.createElement("div");
+        const track = document.createElement("div");
+        const range = document.createElement("div");
+        const startHandle = this.renderLoopHandle("start");
+        const endHandle = this.renderLoopHandle("end");
+        ruler.className = "step-sequencer__loop-ruler";
+        ruler.dataset.stepLoopRuler = "true";
+        ruler.setAttribute("role", "group");
+        ruler.setAttribute("aria-label", "Loop selector");
+        track.className = "step-sequencer__loop-track";
+        track.dataset.stepLoopTrack = "true";
+        range.className = "step-sequencer__loop-range";
+        range.dataset.stepLoopRange = "true";
+        range.dataset.stepLoopStart = String(this.state.loop.start);
+        range.dataset.stepLoopEnd = String(this.state.loop.end);
+        range.dataset.stepLoopLength = String(this.state.loop.end - this.state.loop.start + 1);
+        range.style.gridColumn = `${this.state.loop.start} / ${this.state.loop.end + 1}`;
+        range.setAttribute("aria-label", `Loop steps ${this.state.loop.start} through ${this.state.loop.end}`);
+        range.append(startHandle, endHandle);
+        ruler.append(track, range);
+        return ruler;
+    }
+    renderLoopHandle(edge) {
+        const handle = document.createElement("button");
+        const arrow = document.createElement("span");
+        const label = document.createElement("span");
+        const step = edge === "start" ? this.state.loop.start : this.state.loop.end;
+        const direction = edge === "start" ? "right" : "left";
+        handle.type = "button";
+        handle.className = `step-sequencer__loop-handle is-${edge}`;
+        handle.dataset.stepLoopHandle = edge;
+        arrow.className = `step-sequencer__loop-arrow is-${direction}`;
+        arrow.dataset.stepLoopArrow = direction;
+        arrow.setAttribute("aria-hidden", "true");
+        label.className = "step-sequencer__loop-label";
+        label.textContent = String(step);
+        handle.append(...(edge === "start" ? [label, arrow] : [arrow, label]));
+        handle.setAttribute("aria-label", `${edge === "start" ? "Loop start" : "Loop end"} step ${step}`);
+        handle.addEventListener("pointerdown", (event) => this.handleLoopPointerDown(event, edge));
+        handle.addEventListener("keydown", (event) => this.handleLoopHandleKeydown(event, edge));
+        return handle;
+    }
+    handleKeyPointerDown(event, key) {
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        this.pressKey(key);
+        this.watchPointerRelease(key);
+    }
+    handleKeyKeydown(event, key) {
+        if (event.key !== "Enter" && event.key !== " ")
+            return;
+        event.preventDefault();
+        if (!event.repeat) {
+            this.pressKey(key);
+        }
+    }
+    handleKeyKeyup(event, key) {
+        if (event.key !== "Enter" && event.key !== " ")
+            return;
+        event.preventDefault();
+        this.releaseKey(key);
+    }
+    pressKey(key) {
+        if (this.pressedKey === key)
+            return;
+        if (this.pressedKey) {
+            this.releaseKey();
+        }
+        this.pressedKey = key;
+        this.render();
+        this.dispatchStepChange(createStepKeyChange(this.state, key, true));
+    }
+    releaseKey(key = this.pressedKey) {
+        if (!this.pressedKey || (key && this.pressedKey !== key))
+            return;
+        const releasedKey = this.pressedKey;
+        this.keyPressAbortController?.abort();
+        this.keyPressAbortController = undefined;
+        this.pressedKey = null;
+        this.render();
+        this.dispatchStepChange(createStepKeyChange(this.state, releasedKey, false));
+    }
+    watchPointerRelease(key) {
+        this.keyPressAbortController?.abort();
+        this.keyPressAbortController = new AbortController();
+        window.addEventListener("pointerup", () => this.releaseKey(key), {
+            once: true,
+            signal: this.keyPressAbortController.signal,
+        });
+        window.addEventListener("pointercancel", () => this.releaseKey(key), {
+            once: true,
+            signal: this.keyPressAbortController.signal,
+        });
+    }
+    handleLoopPointerDown(event, edge) {
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        this.updateLoopEdgeFromClientX(edge, event.clientX);
+        this.watchLoopDrag(edge);
+    }
+    handleLoopHandleKeydown(event, edge) {
+        if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+            return;
+        event.preventDefault();
+        const delta = event.key === "ArrowLeft" ? -1 : 1;
+        const step = edge === "start"
+            ? this.state.loop.start + delta
+            : this.state.loop.end + delta;
+        this.updateLoopEdge(edge, step);
+    }
+    watchLoopDrag(edge) {
+        this.loopDragAbortController?.abort();
+        this.loopDragAbortController = new AbortController();
+        window.addEventListener("pointermove", (event) => this.updateLoopEdgeFromClientX(edge, event.clientX), { signal: this.loopDragAbortController.signal });
+        window.addEventListener("pointerup", () => {
+            this.loopDragAbortController?.abort();
+            this.loopDragAbortController = undefined;
+        }, { once: true, signal: this.loopDragAbortController.signal });
+        window.addEventListener("pointercancel", () => {
+            this.loopDragAbortController?.abort();
+            this.loopDragAbortController = undefined;
+        }, { once: true, signal: this.loopDragAbortController.signal });
+    }
+    updateLoopEdgeFromClientX(edge, clientX) {
+        const step = this.loopStepFromClientX(clientX);
+        this.updateLoopEdge(edge, step);
+    }
+    loopStepFromClientX(clientX) {
+        const ruler = this.querySelector(".step-sequencer__loop-ruler");
+        const rect = ruler?.getBoundingClientRect();
+        if (!rect || rect.width <= 0) {
+            return this.state.loop.end;
+        }
+        const progress = (clientX - rect.left) / rect.width;
+        return Math.min(stepStepCount, Math.max(1, Math.floor(progress * stepStepCount) + 1));
+    }
+    updateLoopEdge(edge, step) {
+        const previousLoop = this.state.loop;
+        const { change, state } = edge === "start"
+            ? setStepLoopStart(this.state, step)
+            : setStepLoopEnd(this.state, step);
+        if (previousLoop.start === state.loop.start &&
+            previousLoop.end === state.loop.end) {
+            return;
+        }
+        this.state = state;
+        this.render();
+        this.dispatchStepChange(change);
+    }
+    handleNoteToggle(step, lane) {
+        const { change, state } = toggleStepNote(this.state, step, lane);
+        this.state = state;
+        this.render();
+        this.dispatchStepChange(change);
+    }
+    dispatchStepChange(detail) {
+        this.dispatchEvent(new CustomEvent("step-change", {
+            bubbles: true,
+            composed: true,
+            detail,
+        }));
+    }
+}
+function gridDirectionValue(direction) {
+    if (direction === "left")
+        return "-1";
+    if (direction === "off")
+        return "0";
+    return "1";
+}
+function numberAttribute(element, name) {
+    const value = element.getAttribute(name);
+    if (value === null || value.trim() === "")
+        return undefined;
+    const number = Number(value);
+    return Number.isFinite(number) ? number : undefined;
+}
+function jsonAttribute(element, name) {
+    const value = element.getAttribute(name);
+    if (!value)
+        return undefined;
+    try {
+        return JSON.parse(value);
+    }
+    catch {
+        return undefined;
+    }
+}
+//# sourceMappingURL=sequencers.js.map