import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
import { default as CxCard } from '../../../atoms/src/components/card/card.ts';
import { default as CxCheckbox } from '../../../atoms/src/components/checkbox/checkbox.ts';
import { default as CxIconButton } from '../../../atoms/src/components/icon-button/icon-button.ts';
import { default as CxInput } from '../../../atoms/src/components/input/input.ts';
import { default as CxMarkdown } from '../../../atoms/src/components/markdown/markdown.ts';
import { default as CxMutationObserver } from '../../../atoms/src/components/mutation-observer/mutation-observer.ts';
import { default as CxOption } from '../../../atoms/src/components/option/option.ts';
import { default as CxSelect } from '../../../atoms/src/components/select/select.ts';
import { default as CxTextarea } from '../../../atoms/src/components/textarea/textarea.ts';
import { default as CortexElement } from '../../../base/src/cortex-element.ts';
import { CxMutationEvent } from '../../../events/src/events.ts';
import { StorybookPropConfig } from '../../../types/src/storybook';
import { CSSResultGroup, TemplateResult } from 'lit';

/**
 * @summary A live playground that introspects a slotted Cortex component and
 * renders editable controls for its public reactive properties and slots.
 *
 * @description Used in `apps/docs` pages to demonstrate components. The
 * storybook reads `elementProperties` from the slotted target and renders a
 * checkbox / input / select per property based on its declared `type`. Object
 * and array properties accept JSON in the input. Function properties are
 * intentionally **not** rendered — they cannot be expressed as text input and
 * writing them as attributes corrupts their value (the function gets
 * serialized to its source code string by `String(fn)`).
 *
 * @slot (default) - The component to demo. The first assigned element is
 *   inspected; pass `element-selector` to drill into a descendant.
 *
 * @csspart base - The card wrapper that hosts the demo and the controls.
 */
export default class CxStorybook extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-button': typeof CxButton;
        'cx-card': typeof CxCard;
        'cx-checkbox': typeof CxCheckbox;
        'cx-icon-button': typeof CxIconButton;
        'cx-input': typeof CxInput;
        'cx-markdown': typeof CxMarkdown;
        'cx-mutation-observer': typeof CxMutationObserver;
        'cx-option': typeof CxOption;
        'cx-select': typeof CxSelect;
        'cx-textarea': typeof CxTextarea;
    };
    defaultSlot: HTMLSlotElement;
    mutationObserver: CxMutationObserver;
    /**
     * CSS selector relative to the first slotted element. When set, the storybook
     * targets the matching descendant instead of the slotted root element.
     */
    elementSelector: string;
    /**
     * Per-property metadata used to render richer controls:
     *
     * - Array of strings → renders a `cx-select` with each string as an option.
     * - Special key `slot` → an array of slot names that the user can append.
     */
    storybookConfig: Record<string, string[]>;
    /** Introspected metadata for each editable public property of the target. */
    config: Record<string, StorybookPropConfig>;
    /** Live values for each editable property; mirrors the target component. */
    props: Record<string, unknown>;
    /** The component instance being demoed (the slotted root or a descendant). */
    target: HTMLElement | null;
    /** User-authored slot content keyed by slot name; each entry is an HTML string. */
    slots: Record<string, string[]>;
    connectedCallback(): void;
    handleElementSelectorChange(): void;
    handleSlotChange(): void;
    handleAttributeChange(event: CxMutationEvent): void;
    private resolveTargetFromSlot;
    private introspectTargetConfig;
    private collectExistingSlotEntries;
    private readInitialProps;
    private normalizePropValue;
    private applyPropsToTarget;
    private applyPropToTarget;
    private syncPropFromAttribute;
    private handlePropChange;
    private handleSlotEntryChange;
    private handleSlotEntryDelete;
    private handleAddSlotButtonClick;
    private appendSlotEntry;
    private rerenderSlotEntries;
    private renderControl;
    private formatControlValue;
    private renderSlotControls;
    private renderControls;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-storybook': CxStorybook;
    }
}
