; */ declare function useIntersectionObserver(options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn; type UseSharedNowOptions = { /** Tick interval in ms. Default: 1000 */ interval?: number; /** Stop ticking after this timestamp (ms). Undefined = never stop. */ untilMs?: number; /** Enable/disable. Default: true */ enabled?: boolean; }; /** * Reactive current-time hook that ticks on a shared interval. * Useful for countdowns, "X minutes ago" labels, and CooldownRing. * * @example * const now = useSharedNow({ interval: 1000 }); * const remaining = Math.max(0, deadline - now); */ declare function useSharedNow(options?: UseSharedNowOptions): number; /** Ref-counted body scroll lock. Safe for nested overlays (Modal + Drawer). */ declare function useScrollLock(active: boolean): void; /** * Density modes — PR-0.2 * * Three discrete density levels for ``. Charter rule 4 ties them * to broadcasting context: * compact — chat-heavy, sidebar, dense data tables * comfortable — default, dashboard, settings, content reading * loose — long-watching session, marketing, documentation * * The set is fixed. Do not extend without an ADR — density modes are part of * the channel-DNA composition contract (PR-2.2). */ type DensityMode = 'compact' | 'comfortable' | 'loose'; type DensityScopeProps = { /** Density level applied to the subtree. */ mode: DensityMode; /** Subtree to which density applies. */ children: ReactNode; /** * Optional class name on the wrapping div. The wrapper carries * `data-density={mode}` so CSS variables in `tokens/density.css` resolve * scoped to this subtree only. */ className?: string; /** * Render as a Fragment instead of a wrapping div. Use when you cannot * introduce an extra DOM node (e.g. inside grid/flex layouts that target * direct children). Trade-off: `data-density` attribute is not emitted, so * CSS-vars from `tokens/density.css` do NOT apply — only the React Context * value flows through. Components that consume density via `useDensity()` * still work; components reading CSS-vars do not. */ asFragment?: boolean; }; /** * Subtree-scoped density. Never set on `` or `` — * `` always wraps a subtree so multiple densities can coexist * (compact sidebar inside a comfortable page, etc.) and so portals * (`Modal`, `Drawer`, `Dropdown`, `Tooltip`, `Popover`) inherit density via * React Context. * * @example * * * */ declare function DensityScope({ mode, children, className, asFragment }: DensityScopeProps): react_jsx_runtime.JSX.Element; /** * Read the current density mode from the nearest `` ancestor. * Returns `'comfortable'` when called outside any scope. * * Works through React portals (Modal, Drawer, Dropdown, Tooltip, Popover) * because React Context propagates through `ReactDOM.createPortal`. */ declare function useDensity(): DensityMode; /** * Channel IDs — PR-2.2 (ADR-002). * * Exactly four broadcast platforms in V1 — adding more (discord, telegram, * vk-stories, instagram-live, etc.) requires a follow-up ADR-002 amendment. * The set is intentionally closed. */ type ChannelId = 'twitch' | 'vkvideo' | 'youtube'; /** * Default density per channel (ADR-002 §2 axis D). * * twitch — comfortable (chat-heavy, balanced reading rhythm) * vkvideo — compact (Russian VK Video pages historically info-dense) * youtube — loose (long-watching session, breathing room) * * Override the channel default by placing an explicit `` INSIDE * the ``, OR pass `inheritDensity` to skip the auto-emitted * DensityScope entirely. */ declare const DEFAULT_CHANNEL_DENSITY: Record; type ChannelScopeProps = { /** Active channel id for this subtree. */ channel: ChannelId; /** Subtree to which the channel applies. */ children: ReactNode; /** * Optional class name on the wrapping div. The wrapper carries * `data-channel={channel}`, so a service can select on it for anything * genuinely channel-specific in its own stylesheet. */ className?: string; /** * If `true`, ChannelScope does NOT emit an inner ``. * Children keep whatever density is already in scope. * * Note what this leaves: with `inheritDensity` set, the scope contributes * only `data-channel` and the React context. All three call sites in this * monorepo passed it, which is how the old palette axis stayed dead for * so long without anyone noticing. * * Defaults to `false`. */ inheritDensity?: boolean; }; /** * Marks a subtree as being ABOUT one channel. * * The scope answers exactly one question — "which channel is this part of * the screen showing?" — and it answers it for layout and for context, not * for colour. A channel does not get to repaint the interface: the accent * belongs to the streamer (see `accent/`), and the platform is denoted * where it is actually denoted, by ``. * * That split is new in 0.28.0 and it removed a real defect. Before it, * memalerts and chatbot wrapped their ENTIRE dashboard in * `` whenever the streamer had linked a * Twitch account — so "this person uses Twitch" was being rendered as * "every pixel of this screen denotes Twitch", and Twitch's channel violet * sat one step away from the product accent's violet. The palette axis * that made that possible had no consumer anywhere and is gone. * * What a scope still carries: * - `data-channel` on the wrapper, for services that need to select on it; * - the channel's default density, via an auto-emitted ``; * - the channel id on React context, so portals (`Modal`, `Drawer`, * `Dropdown`, `Tooltip`, `Popover`) can read it through `useChannel()`. * * Never mount it on ``, `` or an app root — a whole * application is not "about" one channel. In development, mounting it * directly under the document body or an element called `root` logs a * warning; that check catches the two shapes this codebase actually had, * and is a reminder rather than a fence. * * @example * // Right: the row IS a Twitch channel. * * * * * @example * // Override the channel's default density: * * * * * */ declare function ChannelScope({ channel, children, className, inheritDensity, }: ChannelScopeProps): react_jsx_runtime.JSX.Element; /** * Read the active channel id from the nearest `` ancestor. * Returns `null` outside any ChannelScope — callers should treat `null` as * "channel-agnostic" and fall back to brand-neutral behavior. * * Works through React portals (Modal, Drawer, Dropdown, Tooltip, Popover) * because React Context propagates through `ReactDOM.createPortal`. */ declare function useChannel(): ChannelId | null; /** * The platforms MemeLab can name, and how each one is denoted. * * `code` is what gets drawn. A two-letter source code in the mono face is * how broadcast gear has always labelled inputs — it survives at 16px, * where a logo turns to mush, and it identifies without borrowing anyone's * artwork. `name` is what a screen reader hears and what the full label * shows. * * `token` is null for anything we have no verified brand anchor for. Those * render neutral rather than in a colour we made up — a made-up brand * colour is exactly the "plausible invention" the design charter bans. */ type PlatformId = 'twitch' | 'youtube' | 'vkvideo' | 'donationalerts' | 'donatepay' | 'boosty' | 'telegram' | 'unknown'; type PlatformMeta = { id: PlatformId; code: string; name: string; /** Custom-property name carrying the platform's colour, or null for neutral. */ token: string | null; }; declare const PLATFORMS: Record; /** Never throws and never guesses: an unrecognised id resolves to the neutral mark. */ declare function resolvePlatform(id: string | null | undefined): PlatformMeta; type PlatformMarkTone = 'neutral' | 'brand'; type PlatformMarkSize = 'sm' | 'md'; type PlatformMarkProps = { /** Platform id. Unrecognised values render the neutral mark rather than throwing. */ platform: PlatformId | string | null | undefined; /** * `'neutral'` (the default) draws the mark in the muted foreground — * correct almost everywhere, because on most screens the platform is a * fact about a row, not the subject of the screen. * * `'brand'` adds the platform's colour. Use it only where telling * platforms apart at a glance IS the job: a mixed chat feed, an * account-linking list. */ tone?: PlatformMarkTone; /** Show the platform's full name next to the code. Off by default. */ showName?: boolean; size?: PlatformMarkSize; className?: string; }; /** * Denotes which platform something came from — and nothing else. * * This is the ONLY surface in the library that paints a platform colour. * Everything around it belongs to the streamer's accent, so a Twitch user * and a YouTube user get the same interface, differing only where the * difference is the point. Before 0.28.0 the opposite was true: linking a * Twitch account re-tinted a whole dashboard. * * The code carries the identity, so `tone="neutral"` loses nothing. */ declare function PlatformMark({ platform, tone, showName, size, className, }: PlatformMarkProps): react_jsx_runtime.JSX.Element; /** * Colour maths for the accent clamp. * * Everything here exists to answer one question honestly: if a streamer * picks this hex, what will the interface ACTUALLY look like? So the * conversions must mirror `tokens/tokens.css` exactly — the hover is * `color-mix(in oklab, …)` there, so it is an OKLab mix here too. A * shortcut in sRGB would report contrast for a colour the browser never * paints. */ type Rgb = { r: number; g: number; b: number; }; /** `#rgb` / `#rrggbb`, with or without the hash. Returns null on anything else. */ declare function parseHex(input: string): Rgb | null; declare function toHex({ r, g, b }: Rgb): string; /** The `r g b` triplet form `--ml-primary` is stored in (Tailwind's alpha syntax needs it). */ declare function toTriplet({ r, g, b }: Rgb): string; /** WCAG 2.1 contrast ratio, always >= 1. */ declare function contrast(a: Rgb, b: Rgb): number; /** * The contrast clamp. * * A streamer may pick any colour. The interface still has to be readable, * so the colour they pick is not always the colour that gets painted — * and when it moves, they are told, in the settings screen, which colour * actually landed. Nothing is silently "fixed". * * Four roles have to hold at once, and solving them one at a time does * not work: a mid-grey accent clears the 3:1 fill rule easily while NO * ink passes 4.5:1 on it, in either direction. So the search moves * lightness until every role passes together. */ type AccentTheme = 'dark' | 'light'; /** * What each role has to clear, and why that number: * * fillOnSurface 3.0 — WCAG 2.1 SC 1.4.11. The primary button is a * filled control; its boundary against the page * must be perceivable. * inkOnFill 4.5 — SC 1.4.3. The button label is normal-size text. * inkOnHover 4.5 — the same label, on the hover fill, which is a * DIFFERENT colour. Missing this is why hover * states go unreadable while the resting state * measures fine. * hiOnSurface 4.5 — `` paints --violet-hi as * body and even 12px text, so the hover colour is * also a text colour and owes the text threshold. */ declare const ACCENT_THRESHOLDS: { readonly fillOnSurface: 3; readonly inkOnFill: 4.5; readonly inkOnHover: 4.5; readonly hiOnSurface: 4.5; }; type AccentRole = keyof typeof ACCENT_THRESHOLDS; type AccentRatios = Record; type ResolvedAccent = { /** Exactly what was asked for, normalised to `#rrggbb`. Stored, not painted. */ requested: string; /** What actually gets painted. Equal to `requested` when nothing had to move. */ fill: string; /** What `--violet-hi` will resolve to — the hover fill and the primary text colour. */ hover: string; /** What `--violet-ink` will be — the text drawn on the accent. */ ink: string; /** Triplet form for `--ml-primary`. */ triplet: string; adjusted: boolean; /** Which way the clamp had to move the colour, for an honest message. */ direction: 'none' | 'lighter' | 'darker'; ratios: AccentRatios; /** Roles still short after the search. Empty when `ok`. */ failing: AccentRole[]; /** True when every role clears its threshold. */ ok: boolean; }; /** * Resolve a requested accent into the set of colours that will actually be * painted, moving lightness — and only lightness — until every role clears. * * Hue and chroma are preserved on purpose. A streamer who picks a green * gets a green: darker or lighter than they asked, never a different * colour. When no lightness satisfies every role (a very low-chroma hue * can be squeezed from both ends at once), the closest attempt is returned * with `ok: false` and the roles that are still short, so the settings * screen can say so instead of pretending. */ declare function resolveAccent(input: string, theme?: AccentTheme): ResolvedAccent | null; /** * Putting a resolved accent into the DOM. * * Three things make this worth centralising instead of leaving to each * caller, and all three have already bitten this codebase once: * * 1. Scope. A derived custom property is computed on the element that * DECLARES it, and tokens.css declares the derived set on * `:root, [data-accent]`. Write `--ml-primary` on a plain div and the * fill changes while the hover, tint and hairline stay the root's * violet. So this function sets `data-accent` itself. * 2. Old engines. `@supports` in tokens.css protects only the DEFAULT * accent. On an engine with no `color-mix()` — the CEF inside older * OBS builds — a custom accent gives a correct fill and a violet * hover. When the feature is missing, every derived value is written * out by hand instead. * 3. Half-set accents. The library ships nine `--ml-*` accent variables, * and a gradient like StageProgress reads two of them. Writing only * `--ml-primary` leaves a gradient running from the streamer's colour * to the stock violet. All of them are written, all from one input. */ type ApplyAccentOptions = { /** Where to scope the accent. Defaults to ``, i.e. the whole page. */ element?: HTMLElement; /** * Which theme the contrast is judged against. Defaults to reading the * live DOM, because judging against the wrong theme produces numbers * that do not describe the pixels — a dark-resolved fill left in place * after a switch to light is the classic version of that bug. */ theme?: AccentTheme; }; /** Undo an `applyAccent`, restoring whatever the stylesheet says. */ type AccentHandle = { resolved: ResolvedAccent; revert: () => void; }; /** Read the theme off the DOM the same way the stylesheet selects it. */ declare function readTheme(el?: HTMLElement | null): AccentTheme; /** * Whether the engine can derive the accent by itself. False on the old * CEF builds inside OBS, where every derived value has to be written out. */ declare function supportsColorMix(): boolean; /** * Apply a streamer's accent, clamped for contrast, returning what was * actually painted plus a way to take it back off. * * Returns `null` for a colour that cannot be parsed — deliberately, and * before touching the DOM: an invalid `--ml-primary` does not fall back to * the literal above it in the cascade, it makes every dependent * `color-mix()` resolve to `unset`, which strips the accent from the page * entirely. */ declare function applyAccent(input: string, options?: ApplyAccentOptions): AccentHandle | null; /** Drop any applied accent, returning the element to the stylesheet default. */ declare function clearAccent(element?: HTMLElement): void; /** * Curated accents, and the one warning a colour picker owes the user. * * The presets are named from the world the product lives in — studio * monitors, scopes, tally lights — rather than from the colour wheel, * because "Фосфор" tells a streamer what it is and "Оранжевый" does not. */ type AccentPreset = { id: string; /** Russian, because the settings screen is Russian. */ label: string; hex: string; /** One line on where the colour comes from. Shown as the swatch's title. */ note: string; }; declare const ACCENT_PRESETS: AccentPreset[]; type SemanticCollision = { id: string; label: string; hex: string; }; /** * Whether an accent sits close enough to a status colour that the two stop * being distinguishable — an amber accent makes every warning read as * decoration. Returns the colour it collides with, or `null`. * * Note that one shipped preset trips this deliberately: «Фосфор» really is * next to the warning colour. The right answer there is to tell the streamer, * not to quietly drop a good colour from the list. */ declare function semanticCollision(hex: string): SemanticCollision | null; type Size = 'sm' | 'md' | 'lg'; interface MemeLabMarkProps extends Omit, 'children'> { title?: string; } declare const MEMELAB_MARK_GEOMETRY: { readonly viewBox: "32 40 192 176"; readonly outerPanel: "M52 48H64Q70 48 74 52L78 56V196Q78 208 66 208H52Q40 208 40 196V60Q40 48 52 48Z"; readonly innerPanel: "M94 64Q98 64 102 68L124 90V196Q124 208 112 208H98Q86 208 86 196V76Q86 64 94 64Z"; readonly mirrorTransform: "translate(256 0) scale(-1 1)"; readonly rails: readonly [{ readonly x: 55; readonly y: 64; readonly width: 8; readonly height: 128; readonly rx: 4; }, { readonly x: 101; readonly y: 92; readonly width: 8; readonly height: 100; readonly rx: 4; }]; readonly knobs: readonly [{ readonly x: 45; readonly y: 82; readonly width: 28; readonly height: 20; readonly rx: 6; }, { readonly x: 91; readonly y: 140; readonly width: 28; readonly height: 20; readonly rx: 6; }]; }; /** Canonical MemeLab mixer mark. The right half is a true reflection of the left. */ declare function MemeLabMark({ title, ...props }: MemeLabMarkProps): react_jsx_runtime.JSX.Element; type AvatarSize = 'sm' | 'md' | 'lg' | 'xl'; type AvatarProps = { src?: string; alt?: string; name?: string; size?: AvatarSize; className?: string; }; declare const Avatar: react.ForwardRefExoticComponent>; type ButtonVariant = 'primary' | 'success' | 'warning' | 'danger' | 'secondary' | 'ghost'; type ButtonSize = 'sm' | 'md' | 'lg'; type ButtonProps = ButtonHTMLAttributes & { variant?: ButtonVariant; size?: ButtonSize; leftIcon?: ReactNode; rightIcon?: ReactNode; loading?: boolean; }; declare const Button: react.ForwardRefExoticComponent & { variant?: ButtonVariant; size?: ButtonSize; leftIcon?: ReactNode; rightIcon?: ReactNode; loading?: boolean; } & react.RefAttributes>; type IconButtonProps = Omit, 'children' | 'aria-label'> & { icon: ReactNode; variant?: 'primary' | 'success' | 'warning' | 'danger' | 'secondary' | 'ghost'; size?: 'sm' | 'md' | 'lg'; 'aria-label': string; }; declare const IconButton: react.ForwardRefExoticComponent, "children" | "aria-label"> & { icon: ReactNode; variant?: "primary" | "success" | "warning" | "danger" | "secondary" | "ghost"; size?: "sm" | "md" | "lg"; 'aria-label': string; } & react.RefAttributes>; type InputProps = InputHTMLAttributes & { hasError?: boolean; label?: string; error?: string; helperText?: string; }; declare const Input: react.ForwardRefExoticComponent & { hasError?: boolean; label?: string; error?: string; helperText?: string; } & react.RefAttributes>; type SearchInputProps = Omit, 'type'> & { onClear?: () => void; label?: string; }; declare const SearchInput: react.ForwardRefExoticComponent, "type"> & { onClear?: () => void; label?: string; } & react.RefAttributes>; type DateRangeValue = { from: Date | null; to: Date | null; }; type DateRangePreset = { label: string; range: DateRangeValue; }; type DateRangePickerPlaceholder = { trigger?: string; from?: string; to?: string; }; type DateRangePickerProps = { value: DateRangeValue; onChange: (range: DateRangeValue) => void; presets?: DateRangePreset[]; format?: string; placeholder?: string | DateRangePickerPlaceholder; min?: Date; max?: Date; maxRangeDays?: number; label?: string; helperText?: string; clearable?: boolean; disabled?: boolean; hasError?: boolean; error?: string; closeOnSelect?: boolean; compact?: boolean; className?: string; }; declare function DateRangePicker({ value, onChange, presets, format, placeholder, min, max, maxRangeDays, label, helperText, clearable, disabled, hasError, error, closeOnSelect, compact, className, }: DateRangePickerProps): react_jsx_runtime.JSX.Element; type SelectProps = SelectHTMLAttributes & { hasError?: boolean; label?: string; error?: string; helperText?: string; }; declare const Select: react.ForwardRefExoticComponent & { hasError?: boolean; label?: string; error?: string; helperText?: string; } & react.RefAttributes>; type TextareaProps = TextareaHTMLAttributes & { hasError?: boolean; label?: string; error?: string; helperText?: string; }; declare const Textarea: react.ForwardRefExoticComponent & { hasError?: boolean; label?: string; error?: string; helperText?: string; } & react.RefAttributes>; type TagInputProps = { value: string[]; onChange: (tags: string[]) => void; placeholder?: string; disabled?: boolean; label?: string; error?: string; maxTags?: number; className?: string; id?: string; }; declare const TagInput: react.ForwardRefExoticComponent>; type BadgeVariant = 'neutral' | 'primary' | 'success' | 'successSolid' | 'warning' | 'danger' | 'dangerSolid' | 'accent'; type BadgeSize = 'sm' | 'md'; type BadgeProps = Omit, 'children'> & { children: ReactNode; variant?: BadgeVariant; size?: BadgeSize; }; declare const Badge: react.ForwardRefExoticComponent, "children"> & { children: ReactNode; variant?: BadgeVariant; size?: BadgeSize; } & react.RefAttributes>; /** Backward-compatible alias */ declare const Pill: react.ForwardRefExoticComponent, "children"> & { children: ReactNode; variant?: BadgeVariant; size?: BadgeSize; } & react.RefAttributes>; type HealthLevel = 'green' | 'yellow' | 'red'; interface HealthResult { level: HealthLevel; /** Short pill label (1–2 words) for the yellow/red badge. Empty for green. */ chip?: string; /** Tooltip title (≤ ~6 words). */ headline: string; /** Tooltip body — one sentence about the real consequence. */ detail: string; /** Drives the ↓/↑ glyph on the pill. */ direction?: 'low' | 'high'; } type HealthBadgeProps = Omit, 'children'> & { health: HealthResult; /** * Print `detail` as a line beside the pill instead of only inside the * tooltip. Off by default because the badge is inline furniture in rows and * heads that have no room for a sentence — pass it where there is room, and * the reader never has to find the hover at all. */ showDetail?: boolean; }; declare const HealthBadge: react.ForwardRefExoticComponent, "children"> & { health: HealthResult; /** * Print `detail` as a line beside the pill instead of only inside the * tooltip. Off by default because the badge is inline furniture in rows and * heads that have no room for a sentence — pass it where there is room, and * the reader never has to find the hover at all. */ showDetail?: boolean; } & react.RefAttributes>; type ToggleSize = 'sm' | 'md'; type ToggleProps = { checked: boolean; onChange: (checked: boolean) => void; disabled?: boolean; busy?: boolean; label?: string; size?: ToggleSize; id?: string; 'aria-label'?: string; }; declare const Toggle: react.ForwardRefExoticComponent>; type SliderProps = Omit, 'type' | 'onChange'> & { label?: string; showValue?: boolean; formatValue?: (value: number) => string; onChange?: (value: number) => void; }; declare const Slider: react.ForwardRefExoticComponent, "type" | "onChange"> & { label?: string; showValue?: boolean; formatValue?: (value: number) => string; onChange?: (value: number) => void; } & react.RefAttributes>; type ColorInputProps = { value: string; onChange: (color: string) => void; label?: string; disabled?: boolean; className?: string; id?: string; }; declare const ColorInput: react.ForwardRefExoticComponent>; type CheckboxProps = Omit, 'type'> & { label?: string; error?: string; indeterminate?: boolean; }; declare const Checkbox: react.ForwardRefExoticComponent, "type"> & { label?: string; error?: string; indeterminate?: boolean; } & react.RefAttributes>; type RadioGroupProps = { value?: string; defaultValue?: string; onValueChange?: (value: string) => void; name?: string; disabled?: boolean; orientation?: 'horizontal' | 'vertical'; label?: string; error?: string; children: ReactNode; className?: string; }; type RadioItemProps = { value: string; disabled?: boolean; children: ReactNode; className?: string; }; declare function RadioGroup({ value: controlledValue, defaultValue, onValueChange, name: externalName, disabled, orientation, label, error, children, className, }: RadioGroupProps): react_jsx_runtime.JSX.Element; declare function RadioItem({ value, disabled: itemDisabled, children, className }: RadioItemProps): react_jsx_runtime.JSX.Element; type SpinnerSize = 'sm' | 'md' | 'lg'; type SpinnerProps = { className?: string; size?: SpinnerSize; /** Accessible label for screen readers. When provided, the spinner gets role="status". */ label?: string; }; declare function Spinner({ className, size, label }: SpinnerProps): react_jsx_runtime.JSX.Element; type SkeletonProps = { className?: string; circle?: boolean; }; declare function Skeleton({ className, circle }: SkeletonProps): react_jsx_runtime.JSX.Element; type TabsVariant = 'underline' | 'pill'; type TabsProps = { defaultValue?: string; value?: string; onValueChange?: (value: string) => void; variant?: TabsVariant; children: ReactNode; className?: string; }; type TabListProps = { children: ReactNode; className?: string; }; type TabProps = { value: string; disabled?: boolean; children: ReactNode; className?: string; }; type TabPanelProps = { value: string; children: ReactNode; className?: string; }; declare function Tabs({ defaultValue, value, onValueChange, variant, children, className, }: TabsProps): react_jsx_runtime.JSX.Element; declare function TabList({ children, className }: TabListProps): react_jsx_runtime.JSX.Element; declare function Tab({ value, disabled, children, className }: TabProps): react_jsx_runtime.JSX.Element; declare function TabPanel({ value, children, className }: TabPanelProps): react_jsx_runtime.JSX.Element | null; /** * `'panel'` is the opaque hairline-bordered panel. `'glass'` is its former name, * still accepted so no consumer breaks — it has rendered no glass since the * Console rework, and new code should not spell it that way. */ type CardVariant = 'surface' | 'panel' | 'glass'; type CardPadding = 'none' | 'sm' | 'md' | 'lg'; type CardProps = HTMLAttributes & { hoverable?: boolean; variant?: CardVariant; /** Card inner padding. Defaults to `'md'` (20 px). */ padding?: CardPadding; children: ReactNode; }; declare const Card: react.ForwardRefExoticComponent & { hoverable?: boolean; variant?: CardVariant; /** Card inner padding. Defaults to `'md'` (20 px). */ padding?: CardPadding; children: ReactNode; } & react.RefAttributes>; type ModalProps = { isOpen: boolean; onClose: () => void; children: ReactNode; ariaLabel?: string; ariaLabelledBy?: string; closeOnBackdrop?: boolean; closeOnEsc?: boolean; useGlass?: boolean; overlayClassName?: string; contentClassName?: string; zIndexClassName?: string; }; declare function Modal({ isOpen, onClose, children, ariaLabel, ariaLabelledBy, closeOnBackdrop, closeOnEsc, useGlass, overlayClassName, contentClassName, zIndexClassName, }: ModalProps): react_jsx_runtime.JSX.Element | null; type ConfirmDialogVariant = 'danger' | 'warning' | 'primary'; type ConfirmDialogProps = { isOpen: boolean; onClose: () => void; onConfirm: () => void; title: string; message: string | ReactNode; confirmText?: string; cancelText?: string; loadingText?: string; variant?: ConfirmDialogVariant; isLoading?: boolean; }; declare function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, confirmText, cancelText, loadingText, variant, isLoading, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element; type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'; type TooltipProps = { content: ReactNode; delayMs?: number; placement?: TooltipPlacement; className?: string; /** * Classes for the anchor this component builds around a child that cannot be * a trigger — see the disabled branch below. It is `inline-flex` and * shrink-to-fit, which measures the same as any content-sized control; a * child that GROWS (`flex-1`, `w-full`) stops growing, because the wrapper * became the flex item and layout props do not transfer. Hand those classes * here when that is the case. Ignored for every other child. */ anchorClassName?: string; /** * Whether Tooltip builds that anchor at all, when you know something it * cannot see. * * `true` — always. For a custom component whose root is not focusable: from * in here a component is opaque, and guessing costs either a tab stop that * duplicates the child's own or an explanation the keyboard cannot reach. * `false` — never, and no development warning either. Says that this tooltip * is deliberately pointer-only, because its content is genuinely * supplementary or already exists in the accessible name. * Left out — decided from the child, which is right for every intrinsic tag. */ anchor?: boolean; children: ReactElement; }; declare function Tooltip({ content, delayMs, placement, className, anchorClassName, anchor, children, }: TooltipProps): react_jsx_runtime.JSX.Element; type EmptyStateProps = { icon?: ComponentType<{ className?: string; }>; title: string; description?: string; actionLabel?: string; onAction?: () => void; children?: ReactNode; className?: string; /** * Depth in the document outline, not a size — the type is fixed by * `text-heading-4` either way. * * This shipped as a hard-coded `

`, which is right when the empty state * replaces the body of a panel whose own head is an `

`, and wrong when it * fills a page directly under the `

`: that reads as h1 → h3 with no h2, a * skipped level, which is a real navigation break rather than a nitpick. * Caught on chatbot's `/dashboard/viewer-rapport` and `/dashboard/preview`. * * The default stays 3 because that is what every current consumer is laid out * for; pass `level={2}` when this is the page's own empty state. */ level?: 2 | 3 | 4; }; declare function EmptyState({ icon: Icon, title, description, actionLabel, onAction, children, className, level, }: EmptyStateProps): react_jsx_runtime.JSX.Element; type LoadFailedProps = { /** * What failed to load, in the accusative: «список команд», «ленту событий», * «медиатеку». Read as «Не удалось загрузить {what}.» */ what: string; onRetry?: () => void; retrying?: boolean; /** * The caller's own denial of its own empty state. * * The surface already LOOKS empty, so a failure reported without * contradicting that reading leaves the reader holding both conclusions. It * has to be written per call site, because it must deny THAT list's empty * copy — «Пока тихо. События появятся здесь во время эфира» and «Нет * подключенных каналов» need different sentences, and one shared line * repeated under three panels is the same fact told three times. */ children?: ReactNode; className?: string; }; /** * «Не удалось загрузить» — the surface a list shows INSTEAD of its empty state. * * Every empty state on the platform is written for a real absence: «Записей * пока нет», «Активных ключей пока нет», «Пока тихо». Each is a claim about the * streamer's own channel, and a failed request produced every one of them — the * alerts feed most of all, where «Пока тихо» during a live stream is exactly * the thing the page exists to disprove. This is the other branch, and it says * only what is true: we asked and got no answer. * * Deliberately NOT a dimmed or faded version of the real content — the charter * bans expressing state by degrading the artifact, because a faded artifact * reads as «выключено» or «устарело», not «мы не знаем». * * Lived as three near-identical copies in alerts, chatbot and multichat before * 0.49.0. They had already begun to drift (one on inline styles, one with a * larger mark and a comment explaining why), which is the argument for one * copy: the next service to need it should not have to rediscover any of this. */ declare function LoadFailed({ what, onRetry, retrying, children, className }: LoadFailedProps): react_jsx_runtime.JSX.Element; type CollapsibleSectionProps = { title: string; defaultOpen?: boolean; children: ReactNode; right?: ReactNode; className?: string; }; declare function CollapsibleSection({ title, defaultOpen, children, right, className }: CollapsibleSectionProps): react_jsx_runtime.JSX.Element; type DropdownProps = { children: ReactNode; className?: string; }; type DropdownTriggerProps = { children: ReactElement; className?: string; }; type DropdownMenuProps = { children: ReactNode; className?: string; align?: 'left' | 'right'; }; type DropdownItemProps = { onSelect?: () => void; disabled?: boolean; children: ReactNode; className?: string; }; type DropdownSeparatorProps = { className?: string; }; declare function Dropdown({ children, className }: DropdownProps): react_jsx_runtime.JSX.Element; declare function DropdownTrigger({ children, className }: DropdownTriggerProps): ReactElement>; declare function DropdownMenu({ children, className, align }: DropdownMenuProps): react.ReactPortal | null; declare function DropdownItem({ onSelect, disabled, children, className }: DropdownItemProps): react_jsx_runtime.JSX.Element; declare function DropdownSeparator({ className }: DropdownSeparatorProps): react_jsx_runtime.JSX.Element; type DropZoneProps = { onFilesDropped: (files: File[]) => void; accept?: string; maxFiles?: number; maxSize?: number; disabled?: boolean; children?: ReactNode; className?: string; 'aria-label'?: string; }; declare function DropZone({ onFilesDropped, accept, maxFiles, maxSize, disabled, children, className, 'aria-label': ariaLabel, }: DropZoneProps): react_jsx_runtime.JSX.Element; type FormFieldProps = { label?: string; error?: string; helperText?: string; children: ReactElement; className?: string; id?: string; }; declare function FormField({ label, error, helperText, children, className, id: idProp }: FormFieldProps): react_jsx_runtime.JSX.Element; type DividerProps = { orientation?: 'horizontal' | 'vertical'; label?: string; className?: string; }; declare function Divider({ orientation, label, className }: DividerProps): react_jsx_runtime.JSX.Element; type TableProps = ComponentPropsWithoutRef<'table'> & { children: ReactNode; }; type TableHeaderProps = ComponentPropsWithoutRef<'thead'> & { children: ReactNode; }; type TableBodyProps = ComponentPropsWithoutRef<'tbody'> & { children: ReactNode; }; type TableRowProps = ComponentPropsWithoutRef<'tr'> & { children: ReactNode; hoverable?: boolean; }; type TableHeadProps = ComponentPropsWithoutRef<'th'> & { children: ReactNode; }; type TableCellProps = ComponentPropsWithoutRef<'td'> & { children: ReactNode; align?: 'left' | 'center' | 'right'; }; declare const Table: react.ForwardRefExoticComponent, HTMLTableElement>, "ref"> & { children: ReactNode; } & react.RefAttributes>; declare const TableHeader: react.ForwardRefExoticComponent, HTMLTableSectionElement>, "ref"> & { children: ReactNode; } & react.RefAttributes>; declare const TableBody: react.ForwardRefExoticComponent, HTMLTableSectionElement>, "ref"> & { children: ReactNode; } & react.RefAttributes>; declare const TableRow: react.ForwardRefExoticComponent, HTMLTableRowElement>, "ref"> & { children: ReactNode; hoverable?: boolean; } & react.RefAttributes>; declare const TableHead: react.ForwardRefExoticComponent, HTMLTableHeaderCellElement>, "ref"> & { children: ReactNode; } & react.RefAttributes>; declare const TableCell: react.ForwardRefExoticComponent, HTMLTableDataCellElement>, "ref"> & { children: ReactNode; align?: "left" | "center" | "right"; } & react.RefAttributes>; type DataTableSort = { id: string; desc: boolean; }; type DataTableColumnFilterType = 'text' | 'select' | 'boolean' | 'date-range'; type DataTableFilterOption = { label: string; value: string; }; type DataTableCellContext = { row: T; value: unknown; rowIndex: number; column: DataTableColumnDef; }; type DataTableFilterContext = { column: DataTableColumnDef; value: unknown; onChange: (value: unknown) => void; data: T[]; }; type DataTableHeaderContext = { column: DataTableColumnDef; sort: DataTableSort | null; }; type DataTableColumnDef = { id: string; header: ReactNode | ((context: DataTableHeaderContext) => ReactNode); accessorKey?: keyof T; accessorFn?: (row: T) => unknown; cell?: (context: DataTableCellContext) => ReactNode; sortable?: boolean; sortDescFirst?: boolean; filter?: DataTableColumnFilterType | ((context: DataTableFilterContext) => ReactNode); filterOptions?: DataTableFilterOption[]; filterFn?: (value: unknown, row: T, filterValue: unknown) => boolean; searchable?: boolean; align?: 'left' | 'center' | 'right'; width?: CSSProperties['width']; minWidth?: CSSProperties['minWidth']; hidden?: boolean; className?: string; headerClassName?: string; }; type DataTableProps = { data: T[]; columns: Array>; caption?: string; searchValue?: string; defaultSearchValue?: string; onSearchValueChange?: (value: string) => void; searchPlaceholder?: string; enableSearch?: boolean; sortBy?: DataTableSort | null; defaultSortBy?: DataTableSort | null; onSortChange?: (sort: DataTableSort | null) => void; filters?: Record; defaultFilters?: Record; onFiltersChange?: (filters: Record) => void; showFilters?: boolean; defaultShowFilters?: boolean; onShowFiltersChange?: (show: boolean) => void; page?: number; defaultPage?: number; onPageChange?: (page: number) => void; pageSize?: number; defaultPageSize?: number; onPageSizeChange?: (pageSize: number) => void; pageSizeOptions?: number[]; totalItems?: number; loading?: boolean; loadingRows?: number; error?: ReactNode; onRetry?: () => void; emptyState?: ReactNode; emptyTitle?: string; emptyDescription?: string; filterToggleLabel?: string; clearFiltersLabel?: string; pageSizeLabel?: string; resultsLabel?: (meta: { from: number; to: number; total: number; }) => ReactNode; toolbarActions?: ReactNode; stickyHeader?: boolean; dense?: boolean; className?: string; manualSorting?: boolean; manualFiltering?: boolean; manualPagination?: boolean; onRowClick?: (row: T) => void; rowHref?: (row: T) => string | undefined; getRowId?: (row: T, index: number) => string; getRowClassName?: (row: T, index: number) => string | undefined; }; declare function DataTable({ data, columns, caption, searchValue, defaultSearchValue, onSearchValueChange, searchPlaceholder, enableSearch, sortBy, defaultSortBy, onSortChange, filters, defaultFilters, onFiltersChange, showFilters, defaultShowFilters, onShowFiltersChange, page, defaultPage, onPageChange, pageSize, defaultPageSize, onPageSizeChange, pageSizeOptions, totalItems, loading, loadingRows, error, onRetry, emptyState, emptyTitle, emptyDescription, filterToggleLabel, clearFiltersLabel, pageSizeLabel, resultsLabel, toolbarActions, stickyHeader, dense, className, manualSorting, manualFiltering, manualPagination, onRowClick, rowHref, getRowId, getRowClassName, }: DataTableProps): react_jsx_runtime.JSX.Element; type StatCardSize = 'sm' | 'md' | 'lg'; type StatCardValueColor = 'default' | 'success' | 'danger' | 'warning' | 'auto'; type StatCardTrend = { value: number; percentValue?: number; label?: string; format?: (trend: { value: number; percentValue?: number; }) => string; }; type StatCardMetric = { value: string | number; label: string; trend?: StatCardTrend; }; type StatCardProps = { value: string | number; label: string; icon?: ReactNode; trend?: StatCardTrend; size?: StatCardSize; valueColor?: StatCardValueColor; href?: string; onClick?: () => void; loading?: boolean; secondaryMetric?: StatCardMetric; className?: string; }; declare function StatCard({ value, label, icon, trend, size, valueColor, href, onClick, loading, secondaryMetric, className, }: StatCardProps): react_jsx_runtime.JSX.Element; type PaginationProps = { page: number; totalPages: number; onPageChange: (page: number) => void; siblingCount?: number; className?: string; }; declare function Pagination({ page, totalPages, onPageChange, siblingCount, className, }: PaginationProps): react_jsx_runtime.JSX.Element | null; type Step = { label: string; description?: string; }; type StepperProps = { steps: Step[]; activeStep: number; className?: string; }; declare function Stepper({ steps, activeStep, className }: StepperProps): react_jsx_runtime.JSX.Element; type ProgressBarVariant = 'primary' | 'success' | 'warning' | 'danger'; type ProgressBarProps = { value: number; max?: number; variant?: ProgressBarVariant; label?: string; showValue?: boolean; size?: 'sm' | 'md' | 'lg'; className?: string; }; declare function ProgressBar({ value, max, variant, label, showValue, size, className, }: ProgressBarProps): react_jsx_runtime.JSX.Element; type CooldownRingSize = 'sm' | 'md' | 'lg'; type CooldownRingProps = { duration: number; remaining: number; onTick?: () => void; onComplete?: () => void; size?: CooldownRingSize; className?: string; }; declare function CooldownRing({ duration, remaining, size, className, }: CooldownRingProps): react_jsx_runtime.JSX.Element; type StageProgressProps = { stages: string[]; activeStage: number; className?: string; }; declare function StageProgress({ stages, activeStage, className }: StageProgressProps): react_jsx_runtime.JSX.Element; type DotIndicatorProps = { remaining: number; max: number; showLabel?: boolean; labelFormat?: (remaining: number, max: number) => string; className?: string; }; declare function DotIndicator({ remaining, max, showLabel, labelFormat, className, }: DotIndicatorProps): react_jsx_runtime.JSX.Element; type TimelineGroupBy = 'day' | 'month' | 'year' | 'none'; type TimelineVariant = 'default' | 'compact'; type TimelineLineStyle = 'solid' | 'dashed' | 'none'; type TimelineOrder = 'asc' | 'desc'; type TimelineTimestampPosition = 'above' | 'inline' | 'side'; type TimelineIconTone = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'accent' | string; type TimelineEvent = { id: string; icon?: ReactNode; iconColor?: TimelineIconTone; title: ReactNode; description?: ReactNode; timestamp?: Date | string; metadata?: Record; }; type TimelineProps = { events: TimelineEvent[]; timestampFormatter?: (value: Date) => ReactNode; timestampPosition?: TimelineTimestampPosition; groupBy?: TimelineGroupBy; groupHeaderFormatter?: (value: Date, groupBy: Exclude) => ReactNode; variant?: TimelineVariant; lineStyle?: TimelineLineStyle; order?: TimelineOrder; maxVisible?: number; onLoadMore?: () => void; hasMore?: boolean; loading?: boolean; emptyState?: ReactNode; className?: string; }; declare function Timeline({ events, timestampFormatter, timestampPosition, groupBy, groupHeaderFormatter, variant, lineStyle, order, maxVisible, onLoadMore, hasMore, loading, emptyState, className, }: TimelineProps): react_jsx_runtime.JSX.Element; type FilterPill = { key: string; label: string; }; type ActiveFilterPillsProps = { filters: FilterPill[]; onRemove: (key: string) => void; onClearAll?: () => void; clearAllLabel?: string; className?: string; }; declare function ActiveFilterPills({ filters, onRemove, onClearAll, clearAllLabel, className, }: ActiveFilterPillsProps): react_jsx_runtime.JSX.Element | null; type SectionCardProps = { title: string; description?: string; right?: ReactNode; overlay?: ReactNode; children: ReactNode; className?: string; }; declare function SectionCard({ title, description, right, overlay, children, className, }: SectionCardProps): react_jsx_runtime.JSX.Element; type ServiceSurfaceTone = 'violet' | 'cyan' | 'green' | 'amber' | 'muted'; interface ServiceSurfaceStat { label: string; value: ReactNode; tone?: ServiceSurfaceTone; } type ServicePageHeaderVariant = 'console' | 'marquee'; type ServicePageHeaderStatAlign = 'left' | 'right'; interface ServicePageHeaderProps { eyebrow: string; title: string; description: string; icon?: ReactNode; stats?: ServiceSurfaceStat[]; actions?: ReactNode; variant?: ServicePageHeaderVariant; statAlign?: ServicePageHeaderStatAlign; overlay?: ReactNode; className?: string; contentClassName?: string; eyebrowClassName?: string; titleClassName?: string; descriptionClassName?: string; statsClassName?: string; } declare function ServicePageHeader({ eyebrow, title, description, icon, stats, actions, variant, statAlign, overlay, className, contentClassName, eyebrowClassName, titleClassName, descriptionClassName, statsClassName, }: ServicePageHeaderProps): react_jsx_runtime.JSX.Element; /** * The two values render identically and have since the Console rework — kept * only so existing call sites compile. `'glass'` is deprecated; there is one * panel material, and offering a choice that changes nothing is a lie the type * system helps tell. */ type ServicePanelVariant = 'console' | 'glass'; interface ServicePanelProps { children: ReactNode; variant?: ServicePanelVariant; className?: string; } declare function ServicePanel({ children, variant, className }: ServicePanelProps): react_jsx_runtime.JSX.Element; type ServiceActionButtonProps = ButtonProps; declare const ServiceActionButton: react.ForwardRefExoticComponent & { variant?: ButtonVariant; size?: ButtonSize; leftIcon?: ReactNode; rightIcon?: ReactNode; loading?: boolean; } & react.RefAttributes>; type ServiceActionButtonHTMLProps = ButtonHTMLAttributes; /** * Only `'minimal'` changes anything: it drops the default background. `'plain'` * and `'glass'` produce byte-identical output and always have — `'glass'` is * kept for compiling call sites and should not be written in new code. */ type PageShellVariant = 'plain' | 'glass' | 'minimal'; type PageShellProps = { header?: ReactNode; background?: ReactNode; variant?: PageShellVariant; children: ReactNode; className?: string; mainClassName?: string; /** @deprecated Use `mainClassName` instead. Alias kept for backwards compatibility. */ containerClassName?: string; maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'wide' | 'full'; }; declare function PageShell({ header, background, variant, className, mainClassName, containerClassName, maxWidth, children, }: PageShellProps): react_jsx_runtime.JSX.Element; type NavbarProps = { logo?: ReactNode; children?: ReactNode; className?: string; /** Draw the opaque panel background. Default `true`. */ panel?: boolean; /** @deprecated Renamed to `panel` — it has never rendered glass. */ glass?: boolean; }; declare function Navbar({ logo, children, className, panel, glass }: NavbarProps): react_jsx_runtime.JSX.Element; type SidebarProps = { children: ReactNode; collapsed?: boolean; onToggle?: () => void; className?: string; }; declare function Sidebar({ children, collapsed, onToggle, className }: SidebarProps): react_jsx_runtime.JSX.Element; type DashboardLayoutWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'wide' | 'full'; type DashboardLayoutNavItem = { key?: string; label: ReactNode; icon?: ReactNode; href?: string; onClick?: () => void; active?: boolean; disabled?: boolean; badge?: ReactNode; target?: string; rel?: string; }; type DashboardLayoutNavRenderContext = { type: 'desktop' | 'mobile'; className: string; }; type DashboardLayoutProps = { children: ReactNode; navbar?: ReactNode; sidebar?: ReactNode; brand?: ReactNode; user?: ReactNode; headerActions?: ReactNode; /** Service switcher rendered in the header between brand and user */ serviceSwitcher?: ReactNode; navItems?: DashboardLayoutNavItem[]; renderNavItem?: (item: DashboardLayoutNavItem, context: DashboardLayoutNavRenderContext) => ReactNode; navigationLabel?: string; mobileNavigationLabel?: string; shellClassName?: string; shellWidth?: DashboardLayoutWidth; className?: string; mainClassName?: string; maxWidth?: DashboardLayoutWidth; }; declare function DashboardLayout({ children, navbar, sidebar, brand, user, headerActions, serviceSwitcher, navItems, renderNavItem, navigationLabel, mobileNavigationLabel, shellClassName, shellWidth, className, mainClassName, maxWidth, }: DashboardLayoutProps): react_jsx_runtime.JSX.Element; interface ServiceSwitcherItem { /** Unique service identifier */ key: string; /** Display name */ label: string; /** Full URL including protocol */ href: string; /** Icon element */ icon: ReactNode; /** Tailwind color class for the icon (e.g. 'text-[color:var(--danger-hi)]') */ color?: string; /** Short description shown below the label */ description?: string; /** Whether this is the currently active service */ active?: boolean; /** Whether this service is disabled / coming soon */ disabled?: boolean; /** Label shown when disabled (e.g. 'Пока недоступно') */ disabledLabel?: string; } /** * All MemeLab platform services in ServiceSwitcher format. * Derived from the canonical MEMELAB_SERVICE_REGISTRY in src/services/. */ declare const MEMELAB_SERVICES: ServiceSwitcherItem[]; type ServiceSwitcherProps = { /** List of services to display in the grid */ services: ServiceSwitcherItem[]; /** Custom trigger element. Default: grid icon button */ trigger?: ReactElement; /** Number of grid columns. Default: 3 */ columns?: 2 | 3 | 4; /** Extra class on the root wrapper */ className?: string; /** * Render a {@link HubLink} (→ memelab.ru/hub) immediately before the trigger. * On by default so every service header that mounts a ServiceSwitcher exposes * the platform hub. Set `false` to opt out. */ showHub?: boolean; }; declare function ServiceSwitcher({ services, trigger, columns, className, showHub, }: ServiceSwitcherProps): react_jsx_runtime.JSX.Element; type HubLinkProps = { /** Hub URL. Default: https://memelab.ru/hub */ href?: string; /** Visible label (hidden below the `sm` breakpoint). Default: 'Hub' */ label?: string; /** * What the link is, for anyone who cannot infer it from a grid glyph. * Rendered as the accessible name and as a real `Tooltip` — NOT as a native * `title`, which is where this string used to live and where a finger, a * keyboard and most screen readers never found it. Default: 'Все сервисы * MemeLab'. */ title?: string; /** Extra class on the anchor */ className?: string; }; /** * Link back to the MemeLab platform hub (memelab.ru/hub). * * Rendered automatically by {@link ServiceSwitcher} (see its `showHub` prop), so * every service that mounts a ServiceSwitcher gets it for free. Exported on its * own for headers that have no ServiceSwitcher (e.g. memelab.ru). */ declare const HubLink: react.ForwardRefExoticComponent>; type AlertVariant = 'info' | 'success' | 'warning' | 'error'; type AlertProps = { variant?: AlertVariant; title?: string; children: ReactNode; onDismiss?: () => void; className?: string; }; declare function Alert({ variant, title, children, onDismiss, className }: AlertProps): react_jsx_runtime.JSX.Element; type CopyFieldProps = { value: string; label?: string; description?: ReactNode; masked?: boolean; emptyText?: string; rightActions?: ReactNode; copyOnClick?: boolean; maskFormatter?: (value: string) => string; className?: string; id?: string; }; declare function CopyField({ value, label, description, masked, emptyText, rightActions, copyOnClick, maskFormatter, className, id: externalId, }: CopyFieldProps): react_jsx_runtime.JSX.Element; type ProgressButtonProps = Omit & { isLoading?: boolean; loadingText?: ReactNode; }; declare const ProgressButton: react.ForwardRefExoticComponent & { isLoading?: boolean; loadingText?: ReactNode; } & react.RefAttributes>; type ToastVariant = 'info' | 'success' | 'warning' | 'error'; type ToastPosition = 'top-right' | 'top-center' | 'bottom-right' | 'bottom-center'; type ToastData = { id: string; variant: ToastVariant; title: string; description?: string; duration?: number; }; type ToastProviderProps = { children: ReactNode; position?: ToastPosition; maxToasts?: number; }; type ToastOptions = { variant: ToastVariant; title: string; description?: string; duration?: number; }; type ToastContextValue = { toast: (options: ToastOptions) => string; dismiss: (id: string) => void; dismissAll: () => void; }; declare function ToastProvider({ children, position, maxToasts }: ToastProviderProps): react_jsx_runtime.JSX.Element; declare function useToast(): ToastContextValue; type MutationOverlayStatus = 'idle' | 'saving' | 'saved' | 'error'; type MutationOverlayProps = { status: MutationOverlayStatus; savingText?: string; savedText?: string; errorText?: string; className?: string; }; declare function MutationOverlay({ status, savingText, savedText, errorText, className, }: MutationOverlayProps): react_jsx_runtime.JSX.Element | null; type NotificationBellProps = Omit, 'children'> & { /** Icon to display (bell SVG, etc.). If omitted, renders a default bell. */ icon?: ReactNode; /** Unread count. 0 or undefined hides the badge. */ count?: number; /** Max count to display before showing "N+". Default: 99 */ maxCount?: number; /** Size variant */ size?: 'sm' | 'md' | 'lg'; /** Whether to show a ping animation on the badge */ ping?: boolean; }; declare const NotificationBell: react.ForwardRefExoticComponent, "children"> & { /** Icon to display (bell SVG, etc.). If omitted, renders a default bell. */ icon?: ReactNode; /** Unread count. 0 or undefined hides the badge. */ count?: number; /** Max count to display before showing "N+". Default: 99 */ maxCount?: number; /** Size variant */ size?: "sm" | "md" | "lg"; /** Whether to show a ping animation on the badge */ ping?: boolean; } & react.RefAttributes>; type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6; /** Visual style — independent of semantic `level`. PR-1.1b roles. */ type HeadingVariant = 'display' | 'h1' | 'h2' | 'h3' | 'h4'; /** * @deprecated Use `variant` instead. Legacy size prop is kept for backwards * compatibility with consumers that have not yet migrated to typography roles. */ type HeadingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; type HeadingProps = HTMLAttributes & { /** Semantic heading level (1-6). Default: 2 */ level?: HeadingLevel; /** Visual variant. Defaults to derived from `level` (1→h1, 2→h2, 3→h3, 4/5/6→h4). */ variant?: HeadingVariant; /** @deprecated Use `variant` instead. */ size?: HeadingSize; /** Color variant. Default: 'default' */ color?: 'default' | 'muted' | 'gradient'; }; declare const Heading: react.ForwardRefExoticComponent & { /** Semantic heading level (1-6). Default: 2 */ level?: HeadingLevel; /** Visual variant. Defaults to derived from `level` (1→h1, 2→h2, 3→h3, 4/5/6→h4). */ variant?: HeadingVariant; /** @deprecated Use `variant` instead. */ size?: HeadingSize; /** Color variant. Default: 'default' */ color?: "default" | "muted" | "gradient"; } & react.RefAttributes>; /** * @deprecated Use `variant` instead. Legacy size prop is preserved for * backwards compatibility. */ type TextSize = 'xs' | 'sm' | 'md' | 'lg'; /** Visual variant — PR-1.1b roles. */ type TextVariant = 'body' | 'body-emphasis' | 'mono'; type TextColor = 'default' | 'muted' | 'dimmed' | 'primary' | 'success' | 'warning' | 'danger'; type TextProps = HTMLAttributes & { /** Visual variant. Default: 'body' */ variant?: TextVariant; /** @deprecated Use `variant` instead. */ size?: TextSize; /** Color variant. Default: 'default' */ color?: TextColor; /** Font weight override. When set, takes precedence over the variant's weight. */ weight?: 'normal' | 'medium' | 'semibold' | 'bold'; /** Render as span instead of p. Default: false */ inline?: boolean; /** Truncate with ellipsis. Default: false */ truncate?: boolean; }; declare const Text: react.ForwardRefExoticComponent & { /** Visual variant. Default: 'body' */ variant?: TextVariant; /** @deprecated Use `variant` instead. */ size?: TextSize; /** Color variant. Default: 'default' */ color?: TextColor; /** Font weight override. When set, takes precedence over the variant's weight. */ weight?: "normal" | "medium" | "semibold" | "bold"; /** Render as span instead of p. Default: false */ inline?: boolean; /** Truncate with ellipsis. Default: false */ truncate?: boolean; } & react.RefAttributes>; type StackProps = HTMLAttributes & { children: ReactNode; /** Direction. Default: 'vertical' */ direction?: 'vertical' | 'horizontal'; /** Gap in Tailwind spacing units (1 = 0.25rem). Default: 4 */ gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12; /** Align items along cross axis. Default: 'stretch' */ align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'; /** Justify content along main axis. Default: 'start' */ justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'; /** Allow wrapping. Default: false */ wrap?: boolean; }; declare const Stack: react.ForwardRefExoticComponent & { children: ReactNode; /** Direction. Default: 'vertical' */ direction?: "vertical" | "horizontal"; /** Gap in Tailwind spacing units (1 = 0.25rem). Default: 4 */ gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12; /** Align items along cross axis. Default: 'stretch' */ align?: "start" | "center" | "end" | "stretch" | "baseline"; /** Justify content along main axis. Default: 'start' */ justify?: "start" | "center" | "end" | "between" | "around" | "evenly"; /** Allow wrapping. Default: false */ wrap?: boolean; } & react.RefAttributes>; type ScrollAreaProps = HTMLAttributes & { children: ReactNode; /** Max height. When content exceeds, scrollbar appears. */ maxHeight?: string | number; /** Hide scrollbar visually while keeping scroll functionality. Default: false */ hideScrollbar?: boolean; /** Orientation. Default: 'vertical' */ orientation?: 'vertical' | 'horizontal' | 'both'; }; declare const ScrollArea: react.ForwardRefExoticComponent & { children: ReactNode; /** Max height. When content exceeds, scrollbar appears. */ maxHeight?: string | number; /** Hide scrollbar visually while keeping scroll functionality. Default: false */ hideScrollbar?: boolean; /** Orientation. Default: 'vertical' */ orientation?: "vertical" | "horizontal" | "both"; } & react.RefAttributes>; type BreadcrumbItem = { label: ReactNode; href?: string; onClick?: () => void; icon?: ReactNode; }; type BreadcrumbRenderLinkProps = { href: string; onClick?: () => void; className: string; children: ReactNode; item: BreadcrumbItem; }; type BreadcrumbsProps = { items: BreadcrumbItem[]; separator?: ReactNode; maxItems?: number; itemsBeforeCollapse?: number; itemsAfterCollapse?: number; renderLink?: (props: BreadcrumbRenderLinkProps) => ReactNode; className?: string; }; declare function Breadcrumbs({ items, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse, renderLink, className, }: BreadcrumbsProps): react_jsx_runtime.JSX.Element | null; type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right'; type PopoverProps = { content: ReactNode; children: ReactElement; /** Preferred placement. Default: 'bottom' */ placement?: PopoverPlacement; /** Close on click outside. Default: true */ closeOnClickOutside?: boolean; /** Close on Escape. Default: true */ closeOnEsc?: boolean; /** Controlled open state */ open?: boolean; /** Called when open state changes */ onOpenChange?: (open: boolean) => void; /** Offset from anchor in px. Default: 8 */ offset?: number; className?: string; }; declare function Popover({ content, children, placement, closeOnClickOutside, closeOnEsc, open: controlledOpen, onOpenChange, offset, className, }: PopoverProps): react_jsx_runtime.JSX.Element; type DrawerSide = 'left' | 'right' | 'bottom'; type DrawerSize = 'sm' | 'md' | 'lg' | 'full'; type DrawerProps = { isOpen: boolean; onClose: () => void; children: ReactNode; /** Side from which the drawer slides in. Default: 'right' */ side?: DrawerSide; /** Width/height preset. Default: 'md' */ size?: DrawerSize; /** ARIA label for the drawer. */ ariaLabel?: string; /** Close on backdrop click. Default: true */ closeOnBackdrop?: boolean; /** Close on Escape. Default: true */ closeOnEsc?: boolean; /** Additional class for the drawer panel */ className?: string; }; declare function Drawer({ isOpen, onClose, children, side, size, ariaLabel, closeOnBackdrop, closeOnEsc, className, }: DrawerProps): react_jsx_runtime.JSX.Element | null; type ComboboxOption = { value: string; label: string; disabled?: boolean; }; type ComboboxProps = { options: ComboboxOption[]; value?: string; onChange?: (value: string) => void; /** Placeholder text */ placeholder?: string; /** Label above the input */ label?: string; /** Error message */ error?: string; /** Allow free-form input (not just predefined options). Default: false */ allowCustom?: boolean; /** Filter function. Default: case-insensitive label match */ filterFn?: (option: ComboboxOption, query: string) => boolean; /** Empty state content when no options match */ emptyContent?: ReactNode; disabled?: boolean; className?: string; id?: string; }; declare const Combobox: react.ForwardRefExoticComponent>; type TransitionPreset = 'fade' | 'fade-up' | 'fade-down' | 'scale' | 'slide-right' | 'slide-left'; type TransitionProps = { show: boolean; children: ReactNode; /** Animation preset. Default: 'fade' */ preset?: TransitionPreset; /** Duration override (ms). When omitted, uses --ml-motion-{enter,exit}-duration. */ duration?: number; /** Unmount when hidden. Default: true */ unmountOnHide?: boolean; className?: string; }; /** * Transition — PR-1.2b full rewrite on the Motion Intent API (PR-1.2a). * * Drives enter/exit animations through `Element.animate()` (WAAPI). When the * animation finishes, unmount happens via `animation.finished` rather than a * setTimeout race. SSR-safe — when WAAPI is unavailable the component skips * animation and unmounts synchronously on `show=false`. */ declare function Transition({ show, children, preset, duration, unmountOnHide, className, }: TransitionProps): react_jsx_runtime.JSX.Element | null; type VisuallyHiddenProps = HTMLAttributes & { children: ReactNode; /** Render as a different element. Default: 'span' */ as?: 'span' | 'div'; }; /** * Visually hides content while keeping it accessible to screen readers. */ declare function VisuallyHidden({ children, as: Tag, style, ...props }: VisuallyHiddenProps): react_jsx_runtime.JSX.Element; type ErrorBoundaryActionContext = { error: Error; reset: () => void; }; type ErrorBoundaryProps = { children: ReactNode; fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode); onError?: (error: Error, errorInfo: ErrorInfo) => void; resetKey?: string | number | boolean | null; resetKeys?: readonly unknown[]; fullScreen?: boolean; title?: ReactNode; description?: ReactNode | ((error: Error) => ReactNode); actionLabel?: ReactNode; onAction?: (context: ErrorBoundaryActionContext) => void; }; type State = { error: Error | null; }; declare class ErrorBoundary extends Component { state: State; static getDerivedStateFromError(error: Error): State; componentDidCatch(error: Error, errorInfo: ErrorInfo): void; componentDidUpdate(prevProps: ErrorBoundaryProps): void; private reset; render(): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable | null | undefined; } type LoadingScreenProps = { message?: string; size?: SpinnerSize; className?: string; }; declare function LoadingScreen({ message, size, className }: LoadingScreenProps): react_jsx_runtime.JSX.Element; /** * Font load timeout helper — PR-1.1a (ADR-001 §5) * * The lib intentionally imports no telemetry runtime (no Sentry, no analytics). * Hosts wire breadcrumbs / metrics via this subscription helper. */ /** * Calls `callback` once if `document.fonts.ready` does not resolve within * `timeoutMs`. Returns an unsubscribe function that cancels the pending * timer (safe to call after the timer has already fired). * * SSR / no-FontFaceSet environments are a no-op — the returned function is * safe to call but has no effect. * * @example * import { subscribeFontLoadTimeout } from '@memelabui/ui'; * import * as Sentry from '@sentry/react'; * * const unsubscribe = subscribeFontLoadTimeout(() => { * Sentry.addBreadcrumb({ * category: 'fonts', * level: 'warning', * message: '@memelabui/ui fonts.ready timeout 5s', * }); * }); * * // Optional — cancel before the timer fires (e.g. on route teardown) * unsubscribe(); */ declare function subscribeFontLoadTimeout(callback: () => void, timeoutMs?: number): () => void; /** * Motion Intent API — PR-1.2a * * Six fixed intents per Charter Rule 6. The list is closed; do NOT add new * intents without a charter amendment. Adding "loading", "skeleton", "shimmer" * here is the kind of vocabulary creep the rule exists to prevent. */ type MotionIntent = 'enter' | 'exit' | 'emphasize' | 'reorder' | 'feedback' | 'ambient'; interface ResolvedMotion { /** Duration in ms (already resolved from --ml-motion-{intent}-duration). */ duration: number; /** CSS easing function string, e.g. `cubic-bezier(0.0, 0.0, 0.2, 1)`. */ easing: string; /** Default WAAPI keyframes for this intent. Override via `animate(el, { keyframes })`. */ keyframes: Keyframe[]; } interface AnimateOptions { /** Override the default keyframes for this call. */ keyframes?: Keyframe[]; /** Override the resolved duration (ms). Useful for one-off accelerations. */ duration?: number; /** Override the resolved easing. */ easing?: string; /** WAAPI fill mode. Default: 'both' for enter/emphasize, 'forwards' for exit, 'none' for ambient/feedback/reorder. */ fill?: FillMode; /** WAAPI iteration count. Default: 1 for one-shot intents, Infinity for ambient. */ iterations?: number; } interface UseMotionResult extends ResolvedMotion { /** Run the resolved animation on `element`. Returns the WAAPI Animation handle (or null in SSR / no-WAAPI environments). */ animate: (element: Element, options?: AnimateOptions) => Animation | null; /** True when `prefers-reduced-motion: reduce` is in effect. Caller may skip animation entirely. */ prefersReducedMotion: boolean; } interface MotionProps extends HTMLAttributes { /** Which motion intent to play. Required. */ intent: MotionIntent; /** Element tag for the wrapper. Default: 'div'. */ as?: ElementType; /** Fired when the WAAPI animation resolves (or immediately if reduced-motion is on). */ onFinished?: () => void; /** When false, the animation does not play. Default: true. */ active?: boolean; /** Children rendered inside the wrapper. */ children?: ReactNode; } /** * Declarative motion wrapper — PR-1.2a. * * Plays the resolved `intent` animation on the wrapper element when mounted, * and re-plays whenever `intent` changes (handy for emphasize / feedback). * * For exit-style choreography (delay unmount until animation finishes), use * the imperative `useMotion(intent).animate()` API directly. */ declare const Motion: react.ForwardRefExoticComponent>; /** * Read motion tokens for an intent and return a WAAPI-driven `animate(element)` * function. Honors `prefers-reduced-motion: reduce` by collapsing duration to 0. */ declare function useMotion(intent: MotionIntent): UseMotionResult; /** * One drawing per stream event, in MemeLab's own hand. * * Before this existed the same vocabulary was drawn three different ways — * alerts' feed, alerts' studio and chatbot's triggers each picked their own * generic pictogram, and the picks collided: follow and unfollow shared one * glyph, so did subscription and resub, and a donation in roubles wore a * dollar sign. A glyph two events share carries no information; it is * decoration that looks like a signal. * * Construction: 24x24 box, 1.75 stroke, round caps and joins, currentColor. * Solid marks are the exception and mean "this one is the live/filled state". */ type StreamEvent = 'follow' | 'unfollow' | 'subscription' | 'resub' | 'gift_sub' | 'donation' | 'bits' | 'channel_points' | 'raid' | 'hype_train' | 'watch_streak' | 'stream_start' | 'stream_end' | 'shoutout' | 'custom' | 'rpg_action'; /** Russian label for each event — the icon never travels without its word. */ declare const STREAM_EVENT_LABELS: Record; declare function resolveStreamEvent(event: string): StreamEvent | null; type EventGlyphProps = { /** Event key. Unknown keys fall back to the `custom` glyph. */ event: string; className?: string; /** * Accessible name. Omit it when a visible label sits beside the glyph — * then the glyph is decorative and is hidden from assistive tech. */ title?: string; }; declare function EventGlyph({ event, className, title }: EventGlyphProps): react_jsx_runtime.JSX.Element; export { ACCENT_PRESETS, ACCENT_THRESHOLDS, type AccentHandle, type AccentPreset, type AccentRatios, type AccentRole, type AccentTheme, ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, type AnimateOptions, type ApplyAccentOptions, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BreadcrumbItem, type BreadcrumbRenderLinkProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardVariant, type ChannelId, ChannelScope, type ChannelScopeProps, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, Combobox, type ComboboxOption, type ComboboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DEFAULT_CHANNEL_DENSITY, DashboardLayout, type DashboardLayoutNavItem, type DashboardLayoutNavRenderContext, type DashboardLayoutProps, type DashboardLayoutWidth, DataTable, type DataTableCellContext, type DataTableColumnDef, type DataTableColumnFilterType, type DataTableFilterContext, type DataTableFilterOption, type DataTableHeaderContext, type DataTableProps, type DataTableSort, DateRangePicker, type DateRangePickerPlaceholder, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, type DensityMode, DensityScope, type DensityScopeProps, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, Drawer, type DrawerProps, type DrawerSide, type DrawerSize, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, ErrorBoundary, type ErrorBoundaryActionContext, type ErrorBoundaryProps, EventGlyph, type EventGlyphProps, type FilterPill, FormField, type FormFieldProps, Heading, type HeadingLevel, type HeadingProps, HealthBadge, type HealthBadgeProps, type HealthLevel, type HealthResult, type HotkeyBinding, type HotkeyModifiers, HubLink, type HubLinkProps, ICON_MAP, IconButton, type IconButtonProps, Input, type InputProps, LoadFailed, type LoadFailedProps, LoadingScreen, type LoadingScreenProps, MEMELAB_MARK_GEOMETRY, MEMELAB_SERVICES, MEMELAB_SERVICE_DATA, MEMELAB_SERVICE_REGISTRY, MemeLabMark, type MemeLabMarkProps, type MemelabService, type MemelabServiceData, Modal, type ModalProps, Motion, type MotionIntent, type MotionProps, MutationOverlay, type MutationOverlayProps, type MutationOverlayStatus, Navbar, type NavbarProps, NotificationBell, type NotificationBellProps, PLATFORMS, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, type PlatformId, PlatformMark, type PlatformMarkProps, type PlatformMarkSize, type PlatformMarkTone, type PlatformMeta, Popover, type PopoverPlacement, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, type ResolvedAccent, type ResolvedMotion, STREAM_EVENT_LABELS, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, Select, type SelectProps, type SemanticCollision, ServiceActionButton, type ServiceActionButtonHTMLProps, type ServiceActionButtonProps, type ServiceCategory, ServicePageHeader, type ServicePageHeaderProps, type ServicePageHeaderStatAlign, type ServicePageHeaderVariant, ServicePanel, type ServicePanelProps, type ServicePanelVariant, type ServiceSurfaceStat, type ServiceSurfaceTone, ServiceSwitcher, type ServiceSwitcherItem, type ServiceSwitcherProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackProps, StageProgress, type StageProgressProps, StatCard, type StatCardMetric, type StatCardProps, type StatCardSize, type StatCardTrend, type StatCardValueColor, type Step, Stepper, type StepperProps, type StreamEvent, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagInput, type TagInputProps, Text, type TextColor, type TextProps, type TextSize, Textarea, type TextareaProps, Timeline, type TimelineEvent, type TimelineGroupBy, type TimelineIconTone, type TimelineLineStyle, type TimelineOrder, type TimelineProps, type TimelineTimestampPosition, type TimelineVariant, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, Transition, type TransitionPreset, type TransitionProps, type UseClipboardReturn, type UseDisclosureReturn, type UseHotkeysOptions, type UseIntersectionObserverOptions, type UseIntersectionObserverReturn, type UseMotionResult, type UseSharedNowOptions, VisuallyHidden, type VisuallyHiddenProps, applyAccent, clearAccent, cn, contrast, focusSafely, getFocusableElements, getSatelliteServices, parseHex, readTheme, resolveAccent, resolvePlatform, resolveStreamEvent, semanticCollision, subscribeFontLoadTimeout, supportsColorMix, toHex, toTriplet, useChannel, useClipboard, useDebounce, useDensity, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useMotion, useScrollLock, useSharedNow, useToast };