export interface BaseUIComponentDefinition {
  type?: "static" | "owl";
  selector?: string;
  mount?: (element: Element, api: BaseUIApi, options?: Record<string, unknown>) => { destroy?: () => void } | void;
}

export interface BaseUIApi {
  version: string;
  register(name: string, componentDefinition: BaseUIComponentDefinition): BaseUIApi;
  component(name: string): BaseUIComponentDefinition | undefined;
  mount(selectorOrElement: string | Element, options?: Record<string, unknown>): unknown;
  mountAll(rootElement?: ParentNode): unknown[];
  destroy(rootElement?: ParentNode): void;
  icons: {
    lucide: {
      version: string;
      cdnBaseUrl: string;
      normalizeName(name: string): string;
      url(name: string, options?: { baseUrl?: string }): string;
      render(
        element: Element,
        name: string,
        options?: { baseUrl?: string; label?: string; size?: string; url?: string },
      ): Element;
    };
  };
  theme: { set(modeOrTokens: string | Record<string, string>): void };
}

export interface BaseUIThemeController {
  current(): "light" | "dark";
  set(theme: string, options?: { skipStorage?: boolean }): "light" | "dark";
  toggle(): "light" | "dark";
  syncFrames(theme: string): void;
  init(): "light" | "dark";
}

export interface BaseUIThemeOptions {
  storageKey?: string;
  queryKey?: string;
  toggleSelector?: string;
  labelSelector?: string;
  root?: Element;
}

export const BaseUI: BaseUIApi;
export const BaseUITheme: BaseUIThemeController;
export function createThemeController(options?: BaseUIThemeOptions): BaseUIThemeController;
export function normalizeTheme(value: unknown): "light" | "dark";
export default BaseUI;