@pixl-app/sdk 0.1.0 → 1.0.0

package/dist/ui/inputs.d.ts

@@ -0,0 +1,29 @@
+import type { ListItemField, WidgetField } from "../api-types/index.js";
+import type { PixlWidget } from "../widget.js";
+export type Input = {
+    el: HTMLElement;
+    /** Neuer Wert von außen (live), ohne den Fokus zu stören */
+    update(value: unknown): void;
+};
+export type InputHandlers = {
+    /** Neuer Wert */
+    set(value: unknown): void;
+    /** Zähler: relative Änderung (verträgt sich mit Stream Deck und Widget gleichzeitig) */
+    add?(delta: number): void;
+    /** Knopf gedrückt */
+    press?(): void;
+};
+type Field = Exclude<WidgetField, {
+    type: "list";
+}> | ListItemField;
+/** Eingabe passend zum Typ des Felds */
+export declare function createInput(field: Field, value: unknown, handlers: InputHandlers, ctx: {
+    label: string;
+    widget?: PixlWidget | null;
+}): Input;
+/**
+ * Vorschläge für `font`-Felder: beliebte Google Fonts. Das Dashboard schlägt alle vor, hier reicht
+ * eine kurze Liste, eigene Namen gehen immer
+ */
+export declare const POPULAR_FONTS: readonly string[];
+export {};

package/dist/ui/list.d.ts

@@ -0,0 +1,31 @@
+import type { ListField, ListItem } from "../api-types/index.js";
+import { WidgetBoundElement } from "./field.js";
+export type ListEditDetail = {
+    /** Der Eintrag, null beim Hinzufügen */
+    item: ListItem | null;
+    index: number | null;
+    /** Werte speichern: Eintrag ändern bzw. neu anlegen */
+    save(values: Record<string, unknown>): Promise<boolean>;
+};
+export declare class PixlList extends WidgetBoundElement {
+    static observedAttributes: string[];
+    /** Eigene Darstellung eines Eintrags (Zeile bzw. Kachel) */
+    renderItem: ((item: ListItem, index: number) => Node | string) | null;
+    private items;
+    private dialog;
+    attributeChangedCallback(): void;
+    get listField(): ListField | null;
+    protected onValue(value: unknown): void;
+    protected renderPlaceholder(): void;
+    protected render(): void;
+    /** Name eines Eintrags: itemLabel, sonst der erste Text */
+    labelOf(item: ListItem): string;
+    private renderItems;
+    private renderTiles;
+    private attachDrag;
+    private iconButton;
+    private op;
+    /** Eintrag bearbeiten (Index) oder neu anlegen (null) */
+    edit(index: number | null): void;
+    private openBuiltInEditor;
+}

package/dist/ui/runtime.d.ts

@@ -0,0 +1,18 @@
+import type { Pixl } from "../client.js";
+import type { PixlWidget } from "../widget.js";
+type PixlClass = {
+    shared(): Pixl;
+};
+/** @internal */
+export declare function setPixlClass(cls: PixlClass): void;
+/** Gemeinsame Pixl-Instanz der Seite */
+export declare function sharedPixl(): Pixl;
+/** Das Widget der Seite, sobald die Verbindung steht (null mit normalem API-Schlüssel) */
+export declare function sharedWidget(): Promise<PixlWidget | null>;
+/** Dashboard um Vollbild bitten bzw. es wieder freigeben (nur auf Steuer-Seiten wirksam) */
+export declare function requestFullscreen(on: boolean): void;
+/** @internal von pixl-dialog. Solange ein Dialog offen ist, scrollt die Seite dahinter nicht */
+export declare function dialogOpened(): void;
+/** @internal von pixl-dialog */
+export declare function dialogClosed(): void;
+export {};

package/dist/ui/section.d.ts

@@ -0,0 +1,13 @@
+export declare class PixlSection extends HTMLElement {
+    static observedAttributes: string[];
+    private readonly root;
+    constructor();
+    attributeChangedCallback(): void;
+    private sync;
+}
+export declare class PixlControls extends HTMLElement {
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private build;
+}

package/dist/ui/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const SHADOW_CSS = "\n\t:host { \n\t--bg: var(--pixl-bg, #0f0f12);\n\t--surface: var(--pixl-surface, #22222c);\n\t--fg: var(--pixl-fg, #e8e8f0);\n\t--muted: var(--pixl-muted, #9a9aa8);\n\t--line: var(--pixl-line, rgb(255 255 255 / 0.1));\n\t--line-strong: var(--pixl-line-strong, rgb(255 255 255 / 0.16));\n\t--accent: var(--pixl-accent, #7c6dfa);\n\t--danger: var(--pixl-danger, #f05252);\n\t--radius: 10px;\n display: block; color: var(--fg); font-family: var(--pixl-font, system-ui, sans-serif); font-size: 14px; }\n\t:host([hidden]) { display: none; }\n\t* { box-sizing: border-box; }\n\t\n\t.btn {\n\t\theight: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);\n\t\tbackground: transparent; color: var(--fg); font: inherit; font-size: 14px; cursor: pointer;\n\t\tdisplay: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;\n\t}\n\t.btn:hover:not(:disabled) { border-color: color-mix(in oklch, var(--fg) 35%, transparent); }\n\t.btn:disabled { opacity: 0.45; cursor: not-allowed; }\n\t.btn.primary { background: var(--accent); border-color: transparent; color: white; font-weight: 600; }\n\t.btn.danger { background: var(--danger); border-color: transparent; color: white; }\n\t.btn.ghost { border-color: transparent; }\n\t.btn.icon { width: 34px; padding: 0; }\n\t.input {\n\t\theight: 34px; width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--line);\n\t\tbackground: rgb(0 0 0 / 0.2); color: var(--fg); padding: 0 10px; font: inherit; font-size: 14px;\n\t}\n\ttextarea.input { height: auto; min-height: 80px; padding: 8px 10px; }\n\t.btn:focus-visible, .input:focus-visible, .switch:focus-visible {\n\t\toutline: 2px solid var(--accent); outline-offset: 1px;\n\t}\n\t@media (max-width: 640px) {\n\t\t.btn { height: 40px; }\n\t\t.btn.icon { width: 40px; }\n\t\t.input { height: 40px; }\n\t}\n\n\t.field { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; }\n\t.field.wide { flex-direction: column; align-items: stretch; }\n\t.label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n\t.label-text { font-weight: 500; }\n\t.desc { color: var(--muted); font-size: 12px; }\n\t.control { display: flex; align-items: center; gap: 8px; min-width: 0; }\n\t.field.wide .control { width: 100%; }\n\t.error { color: var(--danger); font-size: 12px; width: 100%; }\n\t.skeleton { display: block; border-radius: 8px; background: var(--surface); animation: pixl-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }\n\t@keyframes pixl-pulse { 50% { opacity: .5; } }\n\t@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }\n\t.switch {\n\t\tappearance: none; width: 40px; height: 22px; border-radius: 999px; border: 1px solid var(--line);\n\t\tbackground: var(--surface); position: relative; cursor: pointer; padding: 0; flex: none; transition: background .2s;\n\t}\n\t.switch::after {\n\t\tcontent: \"\"; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;\n\t\tbackground: var(--fg); transition: transform .2s;\n\t}\n\t.switch[aria-checked=\"true\"] { background: var(--accent); border-color: transparent; }\n\t.switch[aria-checked=\"true\"]::after { transform: translateX(18px); }\n\t.count { min-width: 3ch; text-align: center; font-variant-numeric: tabular-nums; font-size: 18px; font-family: ui-monospace, monospace; }\n\tinput[type=\"range\"] { flex: 1; min-width: 120px; accent-color: var(--accent); }\n\t.value { min-width: 3ch; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }\n\tinput[type=\"color\"] { width: 40px; height: 34px; padding: 2px; border-radius: 8px; border: 1px solid var(--line); background: transparent; cursor: pointer; flex: none; }\n\t.thumb { width: 48px; height: 48px; border-radius: 8px; border: 1px solid var(--line); background: rgb(0 0 0 / 0.25); object-fit: contain; flex: none; }\n\t.thumb.empty { display: grid; place-items: center; color: var(--muted); font-size: 11px; }\n\t.stack { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }\n\t.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }\n\t.field:not(.wide) .control pixl-dropdown { min-width: 160px; }\n\t.secret-wrap { position: relative; width: 100%; }\n\t.secret-wrap .input { padding-right: 40px; }\n\t.secret-wrap .eye { position: absolute; top: 50%; right: 3px; transform: translateY(-50%); width: 28px; height: 28px; color: var(--muted); }\n\t.secret-wrap .eye:hover:not(:disabled) { color: var(--fg); }\n";
+export declare const PAGE_CSS = "\n\t:where(:root) { color-scheme: dark; }\n\t:where(body) { font-family: var(--pixl-font, system-ui, sans-serif); color: var(--pixl-fg, #e8e8f0); }\n\t:where(pixl-field, pixl-toggle, pixl-counter, pixl-range, pixl-select, pixl-text, pixl-color, pixl-file, pixl-button, pixl-list, pixl-section, pixl-controls) { display: block; }\n\t:where(.pixl-btn, .pixl-input, .pixl-select, .pixl-checkbox, .pixl-card, .pixl-skeleton) { \n\t--bg: var(--pixl-bg, #0f0f12);\n\t--surface: var(--pixl-surface, #22222c);\n\t--fg: var(--pixl-fg, #e8e8f0);\n\t--muted: var(--pixl-muted, #9a9aa8);\n\t--line: var(--pixl-line, rgb(255 255 255 / 0.1));\n\t--line-strong: var(--pixl-line-strong, rgb(255 255 255 / 0.16));\n\t--accent: var(--pixl-accent, #7c6dfa);\n\t--danger: var(--pixl-danger, #f05252);\n\t--radius: 10px;\n }\n\t.pixl-btn {\n\t\theight: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);\n\t\tbackground: transparent; color: var(--fg); font: inherit; cursor: pointer;\n\t\tdisplay: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;\n\t}\n\t.pixl-btn:disabled { opacity: 0.45; cursor: not-allowed; }\n\t.pixl-btn.primary { background: var(--accent); border-color: transparent; color: white; font-weight: 600; }\n\t.pixl-btn.danger { background: var(--danger); border-color: transparent; color: white; }\n\t.pixl-btn.ghost { border-color: transparent; }\n\t.pixl-input {\n\t\theight: 34px; width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--line);\n\t\tbackground: rgb(0 0 0 / 0.2); color: var(--fg); padding: 0 10px; font: inherit;\n\t}\n\ttextarea.pixl-input { height: auto; min-height: 80px; padding: 8px 10px; }\n\t/* R\u00FCckfall f\u00FCr ein <select> des Systems: Feld wie <pixl-dropdown>, die Liste bleibt die des Systems */\n\tselect.pixl-select {\n\t\tappearance: none; height: 36px; width: 100%; box-sizing: border-box; border-radius: 10px;\n\t\tborder: 1px solid var(--line-strong); color: var(--fg); padding: 0 32px 0 12px; font: inherit; font-size: 14px;\n\t\tbackground: rgb(0 0 0 / 0.2) no-repeat right 8px center / 16px 16px;\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aa8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\");\n\t\tcursor: pointer; text-overflow: ellipsis;\n\t}\n\tselect.pixl-select:hover:not(:disabled) { border-color: color-mix(in oklch, var(--fg) 30%, transparent); }\n\tselect.pixl-select:focus-visible {\n\t\toutline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 25%, transparent);\n\t}\n\tselect.pixl-select:disabled { opacity: 0.5; cursor: not-allowed; }\n\tselect.pixl-select option { background: var(--surface); color: var(--fg); }\n\t/* H\u00E4kchen f\u00FCr ein normales <input type=\"checkbox\">, sieht aus wie <pixl-checkbox> */\n\tinput[type=\"checkbox\"].pixl-checkbox {\n\t\tappearance: none; width: 16px; height: 16px; margin: 0; flex: none; vertical-align: middle; cursor: pointer;\n\t\tborder-radius: 5px; border: 1px solid color-mix(in oklch, var(--fg) 30%, transparent); background: rgb(0 0 0 / 0.2);\n\t\tbackground-position: center; background-repeat: no-repeat; background-size: 12px 12px;\n\t\ttransition: border-color .15s, box-shadow .15s;\n\t}\n\tinput[type=\"checkbox\"].pixl-checkbox:hover:not(:disabled) { border-color: color-mix(in oklch, var(--fg) 50%, transparent); }\n\tinput[type=\"checkbox\"].pixl-checkbox:checked {\n\t\tborder-color: transparent;\n\t\tbackground-color: var(--accent);\n\t\tbackground-image:\n\t\t\turl(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E\"),\n\t\t\tlinear-gradient(oklch(from var(--accent) calc(l + 0.04) calc(c * 0.92) h), var(--accent));\n\t\tbackground-size: 12px 12px, 100% 100%;\n\t\tbox-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 1px 2px rgb(0 0 0 / 0.35);\n\t}\n\tinput[type=\"checkbox\"].pixl-checkbox:disabled { opacity: 0.45; cursor: not-allowed; }\n\tinput[type=\"checkbox\"].pixl-checkbox:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n\t.pixl-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }\n\t.pixl-skeleton { display: block; border-radius: 8px; background: var(--surface); animation: pixl-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }\n\t@keyframes pixl-pulse { 50% { opacity: .5; } }\n\t@media (prefers-reduced-motion: reduce) { .pixl-skeleton { animation: none; } }\n\t.pixl-btn:focus-visible, .pixl-input:focus-visible { outline: 2px solid var(--pixl-accent, #7c6dfa); outline-offset: 1px; }\n\t@media (max-width: 640px) { .pixl-btn, .pixl-input { height: 40px; } }\n\t@media (pointer: coarse) { select.pixl-select { height: 40px; } }\n";
+/** @internal Styles für ein Shadow DOM, einmal gebaut und geteilt */
+export declare function adoptStyles(root: ShadowRoot, extra?: string): void;
+/** @internal Styles für eigene Elemente der Seite einmal einfügen */
+export declare function injectPageStyles(): void;

package/dist/widget.d.ts

@@ -0,0 +1,141 @@
+import type { ListItem, StreamWidgetMessage, WidgetChange, WidgetFieldScope, WidgetManifest, WidgetOperation, WidgetState } from "./api-types/index.js";
+import type { Pixl } from "./client.js";
+import type { TtsVoiceInfo } from "./tts.js";
+import { type LiveValue } from "./live-value.js";
+export type { ListItem, WidgetChange, WidgetManifest, WidgetOperation, WidgetState };
+/** Ein Upload des Kanals */
+export type UploadedFile = {
+    path: string;
+    name: string;
+    size: number;
+    uploadedAt: string | null;
+};
+/** Stimmen für `voice`-Felder, wie sie `widget.voices()` liefert */
+export type WidgetVoices = {
+    /** TTS ist im Kanal an. Sonst bleibt der Wert stehen, vorlesen geht aber nicht */
+    enabled: boolean;
+    voices: TtsVoiceInfo[];
+    /** Stimme aus den TTS-Einstellungen des Kanals, die ein leerer Wert meint */
+    default: string;
+};
+/** Änderung an einer Liste, wie sie bei `onList()` ankommt */
+export type ListChange = {
+    type: "insert";
+    item: ListItem;
+    at: number;
+} | {
+    type: "update";
+    item: ListItem;
+    previous: ListItem | null;
+} | {
+    type: "remove";
+    id: string;
+    previous: ListItem | null;
+} | {
+    type: "move";
+    id: string;
+    to: number;
+} | {
+    type: "replace";
+    items: ListItem[];
+};
+type Op = WidgetOperation & {
+    scope?: WidgetFieldScope;
+};
+/** Schreiben in eine Liste */
+export type ListWriter = {
+    insert(item: Record<string, unknown>, at?: number): Promise<void>;
+    update(id: string, patch: Record<string, unknown>): Promise<void>;
+    remove(id: string): Promise<void>;
+    move(id: string, to: number): Promise<void>;
+    /** Ganze Liste ersetzen (Import, alles löschen) */
+    replace(items: Record<string, unknown>[]): Promise<void>;
+};
+export declare class PixlWidget {
+    private readonly pixl;
+    /** Ganzer Stand: Name, Version, Felder, Werte */
+    readonly state: LiveValue<WidgetState | null>;
+    private readonly stateValue;
+    private readonly fieldValues;
+    private readonly actionHandlers;
+    private readonly listHandlers;
+    /**
+     * Alle Felder als einfaches Objekt, immer auf dem aktuellen Stand: Steuerelemente vor
+     * Einstellungen, wie die CSS-Variablen. Zum Lesen, ändern geht über `set`
+     * @example const { text, color } = widget.fields
+     */
+    readonly fields: Readonly<Record<string, unknown>>;
+    /** Werte der Steuerelemente als Live-Werte, z.B. `widget.values.deaths.subscribe(…)` */
+    readonly values: Record<string, LiveValue<unknown>>;
+    /** Einstellungen als Live-Werte, z.B. `widget.settings.accent.value` */
+    readonly settings: Record<string, LiveValue<unknown>>;
+    /** Uploads des Kanals, nur auf der eigenen Steuer-Seite (z.B. für eine Bild-Auswahl) */
+    readonly files: {
+        /** Alle Uploads, neueste zuerst */
+        list: () => Promise<UploadedFile[]>;
+        /** Datei hochladen, der Pfad passt als Wert eines file-Felds */
+        upload: (file: Blob, name?: string) => Promise<{
+            path: string;
+            url: string;
+        }>;
+    };
+    private voicesCache;
+    /**
+     * Stimmen des Kanals für `voice`-Felder, nur auf der eigenen Steuer-Seite (z.B. für eine eigene
+     * Auswahl). Braucht kein `tts:read`, wird eine halbe Minute gemerkt
+     */
+    voices(): Promise<WidgetVoices>;
+    /**
+     * Vorschau im Arbeitsplatz: was das Widget selbst setzt, gilt nur hier (pixl rechnet, speichert
+     * aber nichts), und die Felder kommen aus dem Entwurf statt aus der Version in OBS
+     */
+    private readonly preview;
+    /** CSS-Variablen in der Seite (bindings.ts), nicht auf Steuer-Seiten */
+    private readonly bindings;
+    constructor(pixl: Pixl, initial: WidgetState | null, options?: {
+        preview?: boolean;
+        bind?: boolean;
+    });
+    /** Volle Adresse eines Werts aus einem file-Feld (`/files/…`), externe URLs bleiben */
+    fileUrl(path: string): string;
+    /** Felder aus pixl.json */
+    get manifest(): WidgetManifest | null;
+    /** Aktueller Wert eines Steuerelements oder einer Einstellung */
+    get<T = unknown>(name: string): T;
+    /** Knopf (`button`) gedrückt. Gibt eine Funktion zum Abmelden zurück */
+    on(action: string, handler: () => void): () => void;
+    /** Jede Änderung an einer Liste einzeln, z.B. um genau den abgehakten Eintrag zu animieren */
+    onList(name: string, handler: (change: ListChange) => void): () => void;
+    /** Wert setzen. Der Server prüft und klemmt (min, max, step, options) */
+    set(name: string, value: unknown): Promise<void>;
+    /** Zahl ändern, z.B. `add("deaths", 1)`. Kommt nicht mit anderen in Konflikt */
+    add(name: string, delta: number): Promise<void>;
+    /** Schalter umschalten */
+    toggle(name: string): Promise<void>;
+    /** Knopf drücken (auch von einer Steuer-Seite aus) */
+    press(name: string): Promise<void>;
+    /** In eine Liste schreiben */
+    list(name: string): ListWriter;
+    /**
+     * Mehrere Änderungen auf einmal, alle oder keine (z.B. einen Entwurf veröffentlichen).
+     * Einstellungen (`scope: "settings"`) ändern nur Steuer-Seiten mit dem Recht dazu.
+     */
+    batch(operations: Op[]): Promise<void>;
+    private previewBatch;
+    private fromServer;
+    /** @internal Stand neu laden (nach `refetch`) */
+    _refetch(): Promise<void>;
+    /** @internal */
+    _setState(state: WidgetState): void;
+    /** @internal Nachricht aus dem Live-Stream */
+    _handle(message: StreamWidgetMessage): void;
+    private applyState;
+    private fieldProxy;
+}
+/**
+ * Felder eines Stands als einfaches Objekt zum Lesen (`pixl.fields`, `widget.fields`). Liest bei
+ * jedem Zugriff den aktuellen Stand, Steuerelemente vor Einstellungen. Ohne Stand leer
+ */
+export declare function fieldsView(state: () => WidgetState | null): Readonly<Record<string, unknown>>;
+/** Änderung auf einen Stand anwenden (Stand wird verändert) */
+export declare function applyChange(state: WidgetState, change: WidgetChange): void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pixl-app/sdk",
-	"version": "0.1.0",
+	"version": "1.0.0",
 	"description": "pixl SDK: Events, Chat, Spotify und TTS eines Kanals in eigenen Widgets, etwa StreamElements Custom Widgets oder OBS-Browserquellen",
 	"license": "MIT",
 	"homepage": "https://docs.pixl.lennox.zip/sdk",
@@ -27,7 +27,12 @@
 			"types": "./dist/index.d.ts",
 			"default": "./dist/index.js"
 		},
-		"./pixl.js": "./dist/pixl.js"
+		"./ui": {
+			"types": "./dist/ui/index.d.ts",
+			"default": "./dist/ui/index.js"
+		},
+		"./pixl.js": "./dist/pixl.js",
+		"./pixl-ui.js": "./dist/pixl-ui.js"
 	},
 	"files": [
 		"dist",
@@ -37,14 +42,17 @@
 		"access": "public"
 	},
 	"scripts": {
-		"build": "bun run build:script && bun run build:esm && bun run build:types",
+		"dev": "bun scripts/dev.ts",
+		"build": "bun run build:script && bun run build:ui && bun run build:esm && bun run build:types",
 		"build:script": "bun build ./src/global.ts --outfile ./dist/pixl.js --target browser --format iife --minify",
-		"build:esm": "bun build ./src/index.ts --outfile ./dist/index.js --target browser --format esm",
+		"build:esm": "bun build ./src/index.ts ./src/ui/index.ts --outdir ./dist --target browser --format esm --splitting --entry-naming [dir]/[name].[ext]",
 		"build:types": "tsc -p tsconfig.build.json",
 		"check": "tsc -p tsconfig.json",
 		"format": "prettier --write .",
 		"lint": "prettier --check .",
-		"check:version": "bun scripts/check-version.ts"
+		"check:version": "bun scripts/check-version.ts",
+		"test": "bun test",
+		"build:ui": "bun build ./src/ui/global.ts --outfile ./dist/pixl-ui.js --target browser --format iife --minify"
 	},
 	"devDependencies": {
 		"@types/obs-studio": "*",