import { Component, ElementCreator } from 'tosijs';
import { Dialect, ExampleContext, ExampleParts } from './types';
export declare const testManager: {
    enabled: import("tosijs").BoxedScalar<boolean>;
} & import("tosijs").XinProps<{
    enabled: boolean;
}>;
/** Enable test mode (runs tests and shows indicators) */
export declare function enableTests(): void;
/** Disable test mode */
export declare function disableTests(): void;
export declare class LiveExample extends Component<ExampleParts> {
    static preferredTagName: string;
    static lightStyleSpec: {
        ':host': {
            '--tosi-example-height': string;
            '--code-editors-bar-bg': string;
            '--code-editors-bar-color': string;
            '--widget-bg': string;
            '--widget-color': string;
            position: string;
            display: string;
            height: string;
            background: string;
            boxSizing: string;
            borderRadius: string;
            boxShadow: string;
            overflow: string;
        };
        ':host.-locally-edited > [part="example"] > [part="exampleWidgets"]': {
            outline: string;
            outlineOffset: string;
            borderRadius: string;
        };
        ':host.-maximize': {
            position: string;
            left: string;
            top: string;
            height: string;
            width: string;
            margin: string;
        };
        '.-maximize': {
            zIndex: number;
        };
        ':host.-vertical': {
            flexDirection: string;
        };
        ':host .layout-indicator': {
            transition: string;
            transform: string;
        };
        ':host.-vertical .layout-indicator': {
            transform: string;
        };
        ':host.-maximize > [part="example"] > [part="exampleWidgets"] .hide-if-maximized, :host:not(.-maximize) > [part="example"] > [part="exampleWidgets"] .show-if-maximized': {
            display: string;
        };
        ':host [part="example"]': {
            flex: string;
            height: string;
            position: string;
            overflowX: string;
        };
        ':host .preview': {
            height: string;
            position: string;
            overflow: string;
            boxSizing: string;
            padding: string;
        };
        ':host .preview > :first-child': {
            marginTop: string;
        };
        ':host .preview-error': {
            padding: string;
            margin: string;
            background: string;
            color: string;
            borderRadius: string;
            fontSize: string;
            fontFamily: string;
            whiteSpace: string;
        };
        ':host [part="editors"]': {
            flex: string;
            height: string;
            position: string;
        };
        ':host [part="exampleWidgets"]': {
            position: string;
            top: string;
            right: string;
            zIndex: string;
            color: string;
            '--widget-color': string;
            '--tosi-pocket-handle-color': string;
        };
        ':host [part="exampleWidgets"] button': {
            '--text-color': string;
        };
        ':host [part="exampleWidgets"] .tests-toggle input': {
            display: string;
        };
        ':host [part="exampleWidgets"] .tests-toggle': {
            opacity: string;
            filter: string;
            transition: string;
        };
        ':host .code-editors': {
            overflow: string;
            background: string;
            position: string;
            top: string;
            right: string;
            flex: string;
            height: string;
            flexDirection: string;
            zIndex: string;
        };
        ':host .code-editors:not([hidden])': {
            display: string;
        };
        ':host .code-editors > h4': {
            padding: string;
            margin: string;
            textAlign: string;
            background: string;
            color: string;
            cursor: string;
        };
        ':host button.transparent, :host .sizer': {
            width: string;
            height: string;
            lineHeight: string;
            textAlign: string;
            padding: string;
            margin: string;
        };
        ':host .sizer': {
            cursor: string;
        };
        '@keyframes test-pulse': {
            '0%, 100%': {
                opacity: string;
            };
            '50%': {
                opacity: string;
            };
        };
        ':host.-test-running > [part="example"] > [part="exampleWidgets"]': {
            '--widget-color': string;
            animation: string;
        };
        ':host.-test-passed > [part="example"] > [part="exampleWidgets"]': {
            '--widget-color': string;
        };
        ':host.-test-failed > [part="example"] > [part="exampleWidgets"]': {
            '--widget-color': string;
        };
        ':host [part="testResults"]': {
            position: string;
            bottom: string;
            left: string;
            background: string;
            borderRadius: string;
            padding: string;
            fontSize: string;
            margin: string;
            maxWidth: string;
            maxHeight: string;
            overflow: string;
            zIndex: string;
        };
        ':host [part="testResults"][hidden]': {
            display: string;
        };
        ':host .test-pass': {
            color: string;
        };
        ':host .test-fail': {
            color: string;
        };
        ':host .tjs-test-results': {
            padding: string;
            fontSize: string;
            fontFamily: string;
            overflow: string;
            lineHeight: string;
        };
        ':host .tjs-test-summary': {
            fontWeight: string;
            marginBottom: string;
        };
        ':host .tjs-test-empty': {
            opacity: string;
        };
        ':host .tjs-test-error': {
            opacity: string;
        };
    };
    static initAttributes: {
        persistToDom: boolean;
        iframe: boolean;
        mode: string;
    };
    /** Resolved execution mode — `mode` attribute wins; `iframe` boolean is the alias. */
    get effectiveMode(): 'inline' | 'iframe' | 'ide';
    prefix: string;
    storageKey: string;
    context: ExampleContext;
    private capturedScope;
    uuid: string;
    remoteId: string;
    private remoteSync?;
    private undoInterval?;
    private testResults?;
    private pendingValues;
    private pendingShowDefaultTab;
    private beforeUnloadHandler?;
    private editorsBuilt;
    static insertExamples(element: HTMLElement, context?: ExampleContext, sourceFile?: string): void;
    get activeTab(): Element | undefined;
    private getEditorValue;
    private setEditorValue;
    private flushPendingValues;
    get css(): string;
    set css(code: string);
    get html(): string;
    set html(code: string);
    get js(): string;
    set js(code: string);
    get test(): string;
    set test(code: string);
    get remoteKey(): string;
    get dialect(): Dialect;
    set dialect(value: Dialect);
    compiledJs?: string;
    compiledJsSource?: string;
    private jsOutEditor?;
    private tjsTestsView?;
    private productTabsReady;
    private lastGeneratedJs;
    private inlineTjsTestCount;
    private lastTjsTests?;
    private runInlineTjsTests;
    private renderTjsTests;
    private computeGeneratedJs;
    private ensureProductTabs;
    private captureScope;
    /**
     * Live bindings for tjs runtime-value autocomplete: the example's context modules
     * (keyed by the identifier the rewritten code uses, e.g. `tosijs`, `tosijsui`),
     * the currently-rendered `preview` element, and the latest run's top-level locals
     * (so `const app = tosi(…)` gives real `app.` / `app.items.` completions, proxy
     * members and all). Read lazily on each completion, so it reflects the latest run.
     */
    private liveBindings;
    updateUndo: () => void;
    private updateTestResultsVisibility;
    undo: () => void;
    redo: () => void;
    get isMaximized(): boolean;
    flipLayout: () => void;
    saveToSource: () => Promise<void>;
    handleTestsToggle: (event: Event) => void;
    updateExampleWidgets: () => void;
    handleShortcuts: (event: KeyboardEvent) => void;
    content: () => any[];
    private buildEditorPanel;
    private ensureEditors;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private exampleMarkdown;
    copy: () => void;
    downloadExample: () => void;
    private originalCode;
    private localEditKey;
    private applyEdit;
    hasLocalEdits(): boolean;
    private updateEditedIndicator;
    private canUndo;
    private canRedo;
    saveLocalEdit: () => void;
    revertLocalEdit: () => void;
    snapshotAndRestoreLocalEdit: () => void;
    viewingChanges: boolean;
    viewChanges: () => void;
    doRefresh: () => void;
    sourceMenu: (event: Event) => void;
    toggleMaximize: () => void;
    showCode: () => void;
    closeCode: () => void;
    openEditorWindow: () => void;
    refreshRemote: () => void;
    updateSources: () => void;
    refresh: () => Promise<void>;
    private displayTestResults;
    initFromElements(elements: HTMLElement[]): void;
    showDefaultTab(): void;
    render(): void;
}
export declare const liveExample: ElementCreator<LiveExample>;