@zaflun/lumio-sdk 0.2.0 → 0.6.3

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import React, { CSSProperties } from 'react';
-import { LumioEventType, LumioActionType } from '@zaflun/lumio-protocol';
+import { LumioEventType, LumioActionType, Sound } from '@zaflun/lumio-protocol';
+export { Sound } from '@zaflun/lumio-protocol';
 
 interface RenderOptions {
     target: "editor" | "layer" | "interactive";
@@ -142,6 +143,195 @@ interface SliderProps {
 }
 declare function Slider({ label, value, onChange, min, max, step }: SliderProps): React.ReactElement;
 
+/**
+ * Icon sources supported by the IconPicker.
+ */
+type IconSource = "lucide" | "emoji" | "emote" | "upload";
+/**
+ * Universal icon value stored in extension config.
+ *
+ * - `lucide`  — `value` is the icon name (e.g. `"heart"`), rendered as inline SVG
+ * - `emoji`   — `value` is the Unicode character (e.g. `"😀"`), rendered as text
+ * - `emote`   — `value` is the CDN URL, rendered as `<img>`, `platform` identifies provider
+ * - `upload`  — `value` is the storage upload URL, rendered as `<img>`
+ */
+interface IconValue {
+    type: IconSource;
+    value: string;
+    label?: string;
+    platform?: string;
+}
+
+type IconPickerSize = "sm" | "md" | "lg";
+interface IconPickerProps {
+    value: IconValue | null;
+    onChange: (icon: IconValue | null) => void;
+    sources?: IconSource[];
+    size?: IconPickerSize;
+    placeholder?: string;
+}
+declare function IconPicker({ value, onChange, sources, size, placeholder, }: IconPickerProps): React.ReactElement;
+
+interface IconDisplayProps {
+    icon: IconValue | null;
+    size?: number;
+    className?: string;
+}
+declare function IconDisplay({ icon, size, className }: IconDisplayProps): React.ReactElement;
+
+interface EditorInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    type?: "text" | "number" | "color";
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+    label?: string;
+    id?: string;
+}
+declare function EditorInput({ value, onChange, placeholder, type, min, max, step, unit, label, id }: EditorInputProps): React.ReactElement;
+
+interface EditorTextareaProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    rows?: number;
+    label?: string;
+    id?: string;
+}
+declare function EditorTextarea({ value, onChange, placeholder, rows, label, id }: EditorTextareaProps): React.ReactElement;
+
+interface EditorSelectOption {
+    value: string;
+    label: string;
+}
+interface EditorSelectProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: EditorSelectOption[];
+    label?: string;
+    id?: string;
+}
+declare function EditorSelect({ value, onChange, options, label, id }: EditorSelectProps): React.ReactElement;
+
+interface EditorCheckboxProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label: string;
+    id?: string;
+}
+declare function EditorCheckbox({ checked, onChange, label, id }: EditorCheckboxProps): React.ReactElement;
+
+interface EditorSliderProps {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+    label?: string;
+    id?: string;
+}
+declare function EditorSlider({ value, onChange, min, max, step, unit, label, id }: EditorSliderProps): React.ReactElement;
+
+interface EditorColorPickerProps {
+    value: string;
+    onChange: (value: string) => void;
+    label?: string;
+    showAlpha?: boolean;
+    id?: string;
+}
+declare function EditorColorPicker(props: EditorColorPickerProps): React.ReactElement;
+
+interface EditorGroupProps {
+    label: string;
+    collapsed?: boolean;
+    children: React.ReactNode;
+}
+declare function EditorGroup({ label, collapsed, children }: EditorGroupProps): React.ReactElement;
+
+interface EditorLabelProps {
+    text: string;
+    htmlFor?: string;
+    required?: boolean;
+}
+declare function EditorLabel({ text, htmlFor, required }: EditorLabelProps): React.ReactElement;
+
+declare function EditorDivider(): React.ReactElement;
+
+interface EditorInfoProps {
+    content: string;
+}
+declare function EditorInfo({ content }: EditorInfoProps): React.ReactElement;
+
+interface EditorFontRowProps {
+    fontWeight: string;
+    onFontWeightChange: (weight: string) => void;
+    italic: boolean;
+    onItalicChange: (italic: boolean) => void;
+    fontSize: number;
+    onFontSizeChange: (size: number) => void;
+    fontColor: string;
+    onFontColorChange: (color: string) => void;
+}
+declare function EditorFontRow(props: EditorFontRowProps): React.ReactElement<EditorFontRowProps, string | React.JSXElementConstructor<any>>;
+
+interface EditorButtonProps {
+    label: string;
+    onClick: () => void;
+    variant?: "default" | "primary" | "destructive";
+    fullWidth?: boolean;
+    disabled?: boolean;
+}
+declare function EditorButton(props: EditorButtonProps): React.DOMElement<EditorButtonProps, Element>;
+
+interface EditorFontPickerProps {
+    value: string;
+    onChange: (family: string) => void;
+    onWeightChange?: (weight: string) => void;
+    onItalicChange?: (italic: boolean) => void;
+    label?: string;
+    weight?: string;
+    italic?: boolean;
+}
+declare function EditorFontPicker(props: EditorFontPickerProps): React.ReactElement<EditorFontPickerProps, string | React.JSXElementConstructor<any>>;
+
+interface EditorChannelRowProps {
+    platform: string;
+    onPlatformChange: (platform: string) => void;
+    channel: string;
+    onChannelChange: (channel: string) => void;
+    color: string;
+    onColorChange: (color: string) => void;
+    onRemove: () => void;
+    platforms?: {
+        value: string;
+        label: string;
+    }[];
+}
+declare function EditorChannelRow(props: EditorChannelRowProps): React.ReactElement<EditorChannelRowProps, string | React.JSXElementConstructor<any>>;
+
+declare function useEditorAction(): {
+    dispatch: (action: string, payload?: Record<string, unknown>) => void;
+};
+
+interface UseIconPickerOptions {
+    sources?: IconSource[];
+    onSelect?: (icon: IconValue | null) => void;
+}
+interface UseIconPickerResult {
+    isOpen: boolean;
+    selected: IconValue | null;
+    open: () => void;
+    close: () => void;
+    select: (icon: IconValue | null) => void;
+    clear: () => void;
+    sources: IconSource[];
+}
+declare function useIconPicker(options?: UseIconPickerOptions): UseIconPickerResult;
+
 declare function useExtensionStorage<T = Record<string, unknown>>(key: string, initialValue: T): [T, (value: T) => void];
 
 declare function useVisionState<T>(key: string, defaultValue: T): [T, (value: T) => void];
@@ -164,7 +354,14 @@ interface LumioConfig {
     permissions?: string[];
     settings?: Record<string, unknown>;
 }
-declare function useLumioConfig(): [LumioConfig, (config: LumioConfig) => void];
+declare global {
+    interface Window {
+        __lumio_config?: () => LumioConfig;
+        __lumio_set_config?: (config: LumioConfig) => void;
+        __lumio_on_config?: (fn: (config: LumioConfig) => void) => () => void;
+    }
+}
+declare function useLumioConfig(): [LumioConfig, (configOrUpdater: LumioConfig | ((prev: LumioConfig) => LumioConfig)) => void];
 
 interface OverlayTheme {
     colors: {
@@ -193,7 +390,7 @@ interface OverlayTheme {
  *
  * Extensions use this to style themselves consistently with the
  * overlay or widget they're rendered in. Only relevant for `layer`
- * and `interactive` targets (OBS overlay, widget pages).
+ * and `interactive` targets (stream overlay, widget pages).
  *
  * Theme is provided via lifecycle.init and updated via theme.change when
  * the user switches the overlay/widget theme.
@@ -215,6 +412,13 @@ interface UseLumioActionResult {
 }
 declare function useLumioAction(action: LumioActionType): UseLumioActionResult;
 
+interface UseLumioSoundResult {
+    playSound: (soundId: string, volume?: number) => Promise<void>;
+    stopSound: (soundId: string) => Promise<void>;
+    getSounds: () => Promise<Sound[]>;
+}
+declare function useLumioSound(): UseLumioSoundResult;
+
 interface UseQueryResult {
     data: unknown | null;
     isLoading: boolean;
@@ -486,4 +690,4 @@ interface LocalFontDefinition {
 }
 declare function localFont(options: LocalFontOptions): LocalFontDefinition;
 
-export { ANIMATION_PRESETS, Animated, type AnimatedProps, type AnimationPresetName, Box, type BoxProps, Button, type ButtonProps, CompactView, type CompactViewProps, Dropdown, type DropdownOption, type DropdownProps, type ExtensionContext, type FontDisplay, type FontSource, HStack, type HStackProps, Image, type ImageProps, type KeyframeBlock, type KeyframeDefinition, List, type ListProps, type LocalFontDefinition, type LocalFontOptions, Lumio, type LumioConfig, type LumioIdentity, NumberField, type NumberFieldProps, type OverlayTheme, type RenderOptions, Slider, type SliderProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, Toggle, type ToggleProps, type UseAnimationResult, type UseLumioActionResult, type UseMutationResult, type UseQueryResult, VStack, type VStackProps, type VisionStyle, WorkerBridge, defineKeyframes, flushKeyframes, getPreset, localFont, useAnimation, useExtensionContext, useExtensionStorage, useLumioAction, useLumioConfig, useLumioEvent, useLumioIdentity, useLumioTheme, useMutation, useQuery, useVisionState };
+export { ANIMATION_PRESETS, Animated, type AnimatedProps, type AnimationPresetName, Box, type BoxProps, Button, type ButtonProps, CompactView, type CompactViewProps, Dropdown, type DropdownOption, type DropdownProps, EditorButton, type EditorButtonProps, EditorChannelRow, type EditorChannelRowProps, EditorCheckbox, type EditorCheckboxProps, EditorColorPicker, type EditorColorPickerProps, EditorDivider, EditorFontPicker, type EditorFontPickerProps, EditorFontRow, type EditorFontRowProps, EditorGroup, type EditorGroupProps, EditorInfo, type EditorInfoProps, EditorInput, type EditorInputProps, EditorLabel, type EditorLabelProps, EditorSelect, type EditorSelectOption, type EditorSelectProps, EditorSlider, type EditorSliderProps, EditorTextarea, type EditorTextareaProps, type ExtensionContext, type FontDisplay, type FontSource, HStack, type HStackProps, IconDisplay, type IconDisplayProps, IconPicker, type IconPickerProps, type IconPickerSize, type IconSource, type IconValue, Image, type ImageProps, type KeyframeBlock, type KeyframeDefinition, List, type ListProps, type LocalFontDefinition, type LocalFontOptions, Lumio, type LumioConfig, type LumioIdentity, NumberField, type NumberFieldProps, type OverlayTheme, type RenderOptions, Slider, type SliderProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, Toggle, type ToggleProps, type UseAnimationResult, type UseIconPickerOptions, type UseIconPickerResult, type UseLumioActionResult, type UseLumioSoundResult, type UseMutationResult, type UseQueryResult, VStack, type VStackProps, type VisionStyle, WorkerBridge, defineKeyframes, flushKeyframes, getPreset, localFont, useAnimation, useEditorAction, useExtensionContext, useExtensionStorage, useIconPicker, useLumioAction, useLumioConfig, useLumioEvent, useLumioIdentity, useLumioSound, useLumioTheme, useMutation, useQuery, useVisionState };