@pixl-app/sdk 0.1.0 → 1.0.0

package/dist/streamelements.d.ts

@@ -0,0 +1,14 @@
+import type { StreamElementsProxyPath } from "./api-types/index.js";
+import type { Pixl } from "./client.js";
+export declare class PixlStreamElements {
+    private readonly pixl;
+    constructor(pixl: Pixl);
+    /**
+     * Lesender Zugriff auf den verbundenen StreamElements-Kanal. pixl reicht die Anfrage mit
+     * dem hinterlegten Overlay Token weiter (der Token bleibt bei pixl). Braucht
+     * `streamelements:read`. `params` gehen 1:1 an StreamElements, die Antwort kommt unverändert.
+     */
+    get<T = unknown>(path: StreamElementsProxyPath, params?: Record<string, string | number | undefined>, options?: {
+        signal?: AbortSignal;
+    }): Promise<T>;
+}

package/dist/tts.d.ts

@@ -6,7 +6,8 @@ export type TtsVoiceInfo = {
     id: string;
     name: string;
     language: string;
-    gender: "female" | "male";
+    /** Bei Stimmen aus Katalogen nicht immer bekannt */
+    gender?: "female" | "male";
     description: string;
     /** Credits pro Zeichen */
     creditsPerChar?: number;
@@ -76,25 +77,35 @@ export declare class PixlTts {
      * Credits des Kanals. Ohne `voice` gilt die Standardstimme des Kanals.
      * Abgespielt wird nicht hier, sondern in jedem Overlay mit `player()`.
      * `filters: false` schaltet Links, Wiederholungen und gesperrte Wörter ab, oder
-     * einzeln, z.B. `{ links: false }`.
+     * einzeln, z.B. `{ links: false }`. In der Vorschau in pixl ist es nur dort zu hören. Beim Bedienen
+     * liest dort die Browserquelle vor, wenn eine verbunden ist, die Vorschau spielt es dann mit ab und
+     * speak() wirft einen PixlError mit `problem: "preview"`.
      */
     speak(text: string, options?: {
         voice?: string;
         filters?: TtsFilters | false;
+        signal?: AbortSignal;
     }): Promise<TtsSpoken>;
+    private get base();
     /** Verfügbare Stimmen und die Standardstimme des Kanals */
-    voices(): Promise<{
+    voices(options?: {
+        signal?: AbortSignal;
+    }): Promise<{
         voices: TtsVoiceInfo[];
         default: string;
     }>;
     /** Audio eines Eintrags als MP3 (Schlüssel mit `tts:read`) */
-    audio(id: string): Promise<Blob>;
+    audio(id: string, options?: {
+        signal?: AbortSignal;
+    }): Promise<Blob>;
     /**
      * Zeitmarken pro Wort zu einem Eintrag (Schlüssel mit `tts:read`). Entstehen beim
      * ersten Abruf und kosten dann beim Anbieter extra, danach kommen sie aus dem
-     * Zwischenspeicher. Wirft einen PixlApiError (404), wenn es keine gibt.
+     * Zwischenspeicher. Wirft einen PixlError (`not_found`), wenn es keine gibt.
      */
-    marks(id: string): Promise<TtsMark[]>;
+    marks(id: string, options?: {
+        signal?: AbortSignal;
+    }): Promise<TtsMark[]>;
     /** Spielt jedes `tts.ready` der Reihe nach ab, hört auf Überspringen und Stoppen aus pixl. Braucht `tts:read`. */
     player(options?: TtsPlayerOptions): TtsPlayer;
 }
@@ -108,9 +119,7 @@ export declare class TtsPlayer {
     private volume;
     private destroyed;
     private warnedAutoplay;
-    private readonly onReady;
-    private readonly onSkip;
-    private readonly onClear;
+    private readonly unsubscribe;
     constructor(pixl: Pixl, tts: PixlTts, options: TtsPlayerOptions);
     /** Was gerade läuft abbrechen, danach geht es mit dem Nächsten weiter */
     skip(): void;

package/dist/twitch.d.ts

@@ -0,0 +1,68 @@
+import { type EventPayloads, type HypeTrain, type Money, type PollChoice, type PredictionOutcome } from "./api-types/index.js";
+import type { Pixl } from "./client.js";
+import { type LiveValue } from "./live-value.js";
+export type { HypeTrain };
+export type SubCount = EventPayloads["subs.updated"];
+/** Letzte Umfrage, bleibt nach dem Ende mit ihrem Ergebnis stehen, bis eine neue beginnt */
+export type Poll = {
+    title: string;
+    choices: PollChoice[];
+    status: "active" | "completed" | "archived" | "terminated";
+};
+/** Letzte Vorhersage, bleibt nach dem Ende stehen, bis eine neue beginnt */
+export type Prediction = {
+    title: string;
+    outcomes: PredictionOutcome[];
+    status: "active" | "locked" | "resolved" | "canceled";
+    /** Titel des Gewinners, solange offen null */
+    winner: string | null;
+};
+/** Letztes Ziel des Kanals, bleibt nach dem Ende stehen */
+export type Goal = {
+    type: string;
+    description: string;
+    current: number;
+    target: number;
+    active: boolean;
+    achieved: boolean;
+};
+/** Letzte Spendenaktion, bleibt nach dem Ende stehen */
+export type Charity = {
+    charity: string;
+    current: Money;
+    target: Money;
+    active: boolean;
+};
+/** Laufende Werbepause */
+export type AdBreak = {
+    durationSec: number;
+    startedAt: string;
+    endsAt: string;
+};
+export declare class PixlTwitch {
+    private readonly pixl;
+    /** Aktive Subs und Sub-Punkte laut Twitch (Scope `subs:read`), null solange unbekannt */
+    readonly subs: LiveValue<SubCount | null>;
+    /** Laufender Hype Train, null wenn keiner fährt */
+    readonly hypeTrain: LiveValue<HypeTrain | null>;
+    /** Letzte Umfrage */
+    readonly poll: LiveValue<Poll | null>;
+    /** Letzte Vorhersage */
+    readonly prediction: LiveValue<Prediction | null>;
+    /** Letztes Ziel */
+    readonly goal: LiveValue<Goal | null>;
+    /** Letzte Spendenaktion */
+    readonly charity: LiveValue<Charity | null>;
+    /** Laufende Werbepause, null wenn keine läuft */
+    readonly adBreak: LiveValue<AdBreak | null>;
+    private readonly values;
+    private adBreakTimer;
+    constructor(pixl: Pixl);
+    /** Aktuelle Sub-Zahl direkt abfragen (höchstens 60 s alt). Meist reicht `subs`. */
+    fetchSubs(options?: {
+        signal?: AbortSignal;
+    }): Promise<SubCount>;
+    private load;
+    /** @internal */
+    _close(): void;
+}

package/dist/ui/checkbox.d.ts

@@ -0,0 +1,27 @@
+export declare class PixlCheckbox extends HTMLElement {
+    static formAssociated: boolean;
+    static observedAttributes: string[];
+    private readonly root;
+    private readonly control;
+    private readonly internals;
+    private formDisabled;
+    private defaultChecked;
+    private toggledThisTask;
+    constructor();
+    connectedCallback(): void;
+    private syncText;
+    attributeChangedCallback(): void;
+    get checked(): boolean;
+    set checked(v: boolean);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get name(): string;
+    get value(): string;
+    get form(): HTMLFormElement | null;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | null): void;
+    private get isDisabled();
+    private toggleByUser;
+    private sync;
+}

package/dist/ui/define.d.ts

@@ -0,0 +1,2 @@
+/** Alle Bausteine registrieren (mehrfaches Aufrufen schadet nicht) */
+export declare function defineElements(): void;

package/dist/ui/dialog.d.ts

@@ -0,0 +1,15 @@
+export declare class PixlDialog extends HTMLElement {
+    static observedAttributes: string[];
+    private readonly root;
+    private readonly dialog;
+    private isOpen;
+    constructor();
+    attributeChangedCallback(): void;
+    private sync;
+    /** Ist der Dialog offen? */
+    get opened(): boolean;
+    open(): void;
+    close(): void;
+    private closed;
+    disconnectedCallback(): void;
+}

package/dist/ui/dropdown-helpers.d.ts

@@ -0,0 +1,48 @@
+export type DropdownOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+/** Höhe eines Eintrags und Innenabstand der Liste in px, wie im Dashboard (h-8, p-1, Rahmen) */
+export declare const ITEM_HEIGHT = 32;
+export declare const LIST_CHROME = 10;
+/** Abstand zwischen Feld und Liste, Mindestbreite und Abstand zum Fensterrand */
+export declare const GAP = 6;
+export declare const MIN_WIDTH = 160;
+export declare const EDGE = 8;
+/** Höchstens so hoch wird die Liste, darüber scrollt sie */
+export declare const MAX_HEIGHT = 320;
+/** Optionen aus Strings oder Objekten auf eine Form bringen */
+export declare function normalizeOptions(input: unknown): DropdownOption[];
+/** Nächster wählbarer Eintrag ab from in Richtung step (1 oder -1), ohne Umlauf. -1, wenn keiner */
+export declare function nextEnabled(options: DropdownOption[], from: number, step: 1 | -1): number;
+/** Erster bzw. letzter wählbarer Eintrag */
+export declare function firstEnabled(options: DropdownOption[]): number;
+export declare function lastEnabled(options: DropdownOption[]): number;
+/**
+ * Tippen zum Springen: Eintrag, dessen Beschriftung mit query beginnt. Besteht query nur aus
+ * einem Buchstaben (auch mehrfach getippt, „aaa“), geht es reihum durch alle mit diesem
+ * Anfang, sonst bleibt der aktuelle Eintrag, solange er noch passt. -1, wenn nichts passt.
+ */
+export declare function typeaheadIndex(options: DropdownOption[], query: string, current: number): number;
+export type Rect = {
+    top: number;
+    bottom: number;
+    left: number;
+    width: number;
+};
+export type Placement = {
+    top: number;
+    left: number;
+    width: number;
+    maxHeight: number;
+    above: boolean;
+};
+/**
+ * Wo die Liste hinkommt (position: fixed): unter das Feld, nach oben, wenn unten zu wenig Platz
+ * ist und oben mehr. Mindestens so breit wie das Feld, nie über den Fensterrand.
+ */
+export declare function placeList(trigger: Rect, listHeight: number, viewport: {
+    width: number;
+    height: number;
+}, maxHeight?: number): Placement;

package/dist/ui/dropdown.d.ts

@@ -0,0 +1,65 @@
+import { type DropdownOption } from "./dropdown-helpers.js";
+export type { DropdownOption };
+export declare const CHEVRON_ICON = "<svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"/></svg>";
+export declare const CHECK_ICON = "<svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg>";
+export declare class PixlDropdown extends HTMLElement {
+    static formAssociated: boolean;
+    static observedAttributes: string[];
+    private readonly root;
+    private readonly trigger;
+    private readonly text;
+    private readonly list;
+    private readonly internals;
+    private readonly uid;
+    private propOptions;
+    private childOptions;
+    private observer;
+    private highlighted;
+    private query;
+    private queryTimer;
+    private formDisabled;
+    private defaultValue;
+    private listening;
+    private frame;
+    private lastRect;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    /** Optionen. Gesetzt gehen sie den <option>-Kindern vor, null nimmt wieder die Kinder */
+    get options(): DropdownOption[];
+    set options(value: (DropdownOption | string)[] | null);
+    /** Gewählter Wert, "" wenn nichts gewählt ist */
+    get value(): string;
+    set value(v: string);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get name(): string;
+    /** Beschriftung der gewählten Option */
+    get selectedLabel(): string;
+    get form(): HTMLFormElement | null;
+    /** Liste öffnen */
+    open(): void;
+    /** Liste schließen */
+    close(): void;
+    get isOpen(): boolean;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | null): void;
+    private readChildren;
+    private render;
+    private labelText;
+    private renderList;
+    private beforeOpen;
+    private afterOpen;
+    private afterClose;
+    private onViewportChange;
+    private rectKey;
+    private follow;
+    private onOutsidePointer;
+    private position;
+    private highlight;
+    private pick;
+    private onKeydown;
+    private typeahead;
+}

package/dist/ui/field.d.ts

@@ -0,0 +1,48 @@
+import type { WidgetField, WidgetFieldScope, WidgetOperation } from "../api-types/index.js";
+import type { PixlWidget } from "../widget.js";
+/** @internal Gemeinsame Grundlage für alle Bausteine, die ein Feld des Widgets brauchen */
+export declare abstract class WidgetBoundElement extends HTMLElement {
+    protected widget: PixlWidget | null;
+    protected readonly root: ShadowRoot;
+    private unsubscribe;
+    private connected;
+    constructor();
+    get fieldName(): string;
+    /** Bereich: Attribut scope, sonst dort, wo das Feld in pixl.json steht */
+    get scope(): WidgetFieldScope;
+    /** Definition aus pixl.json */
+    get definition(): WidgetField | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Eine Änderung schreiben, Fehler zeigt der Baustein selbst an */
+    protected write(op: Omit<WidgetOperation, "name"> & Record<string, unknown>): Promise<boolean>;
+    protected showError(message: string | null): void;
+    /** Skelett, solange die Verbindung noch nicht steht */
+    protected renderPlaceholder(): void;
+    protected renderMessage(message: string): void;
+    protected abstract render(): void;
+    protected abstract onValue(value: unknown): void;
+}
+export declare class PixlField extends WidgetBoundElement {
+    static observedAttributes: string[];
+    private input;
+    attributeChangedCallback(): void;
+    protected render(): void;
+    protected onValue(value: unknown): void;
+}
+export declare class PixlToggle extends PixlField {
+}
+export declare class PixlCounter extends PixlField {
+}
+export declare class PixlRange extends PixlField {
+}
+export declare class PixlSelect extends PixlField {
+}
+export declare class PixlText extends PixlField {
+}
+export declare class PixlColor extends PixlField {
+}
+export declare class PixlFile extends PixlField {
+}
+export declare class PixlButton extends PixlField {
+}

package/dist/ui/index.d.ts

@@ -0,0 +1,14 @@
+import { defineElements } from "./define.js";
+export { defineElements };
+export { requestFullscreen, sharedPixl, sharedWidget } from "./runtime.js";
+export { PAGE_CSS, SHADOW_CSS } from "./styles.js";
+export { createInput } from "./inputs.js";
+export type { Input, InputHandlers } from "./inputs.js";
+export { PixlField } from "./field.js";
+export { PixlList } from "./list.js";
+export type { ListEditDetail } from "./list.js";
+export { PixlDialog } from "./dialog.js";
+export { PixlDropdown } from "./dropdown.js";
+export type { DropdownOption } from "./dropdown.js";
+export { PixlCheckbox } from "./checkbox.js";
+export { PixlSection, PixlControls } from "./section.js";