@objectifthunes/whiteboard 0.1.1 → 0.2.1

package/dist/index.d.ts

@@ -1,185 +1,618 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { ReactNode, MutableRefObject, Component } from 'react';
-import * as zustand from 'zustand';
-
-interface Props$5 {
-    children: ReactNode;
-    showMinimap?: boolean;
-    minimapLoading?: boolean;
-    /** Extra action buttons rendered inside the ZoomBar (e.g. a theme toggle) */
-    extraActions?: ReactNode;
-}
-declare function WhiteboardShell({ children, showMinimap, minimapLoading, extraActions }: Props$5): react_jsx_runtime.JSX.Element;
-
-type PanelRect = {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    focusPadding?: number;
-    focusMaxScale?: number;
-};
-declare function computeWhiteboardFit(panels: Map<string, PanelRect>, viewportSize: {
-    width: number;
-    height: number;
-}, padding?: number): {
-    scale: number;
-    offset: {
-        x: number;
-        y: number;
-    };
-} | null;
-declare function computeWhiteboardRectFocus(rect: PanelRect, viewportSize: {
-    width: number;
-    height: number;
-}, padding?: number, maxScale?: number): {
-    scale: number;
-    offset: {
-        x: number;
-        y: number;
-    };
-};
-interface WhiteboardStore {
-    offset: {
-        x: number;
-        y: number;
-    };
-    scale: number;
-    viewportSize: {
-        width: number;
-        height: number;
-    };
-    snapToGrid: boolean;
-    snapGridSize: number;
-    panels: Map<string, PanelRect>;
-    resetFns: Map<string, () => void>;
-    /** Incremented each time the panel registry changes; subscribe to trigger re-renders. */
-    registryVersion: number;
-    setOffset: (v: {
-        x: number;
-        y: number;
-    } | ((prev: {
-        x: number;
-        y: number;
-    }) => {
-        x: number;
-        y: number;
-    })) => void;
-    setScale: (v: number | ((prev: number) => number)) => void;
-    setViewportSize: (v: {
-        width: number;
-        height: number;
-    }) => void;
-    setSnapToGrid: (v: boolean | ((prev: boolean) => boolean)) => void;
-    register: (id: string, rect: PanelRect) => void;
-    unregister: (id: string) => void;
-    registerReset: (id: string, fn: () => void) => void;
-    unregisterReset: (id: string) => void;
-    fitToContent: () => void;
-    focusPanel: (rect: PanelRect, options?: {
-        padding?: number;
-        maxScale?: number;
-    }) => void;
-    resetWidgets: () => void;
-    /** Call on WhiteboardShell mount to discard any stale state from the previous session. */
-    resetSession: () => void;
-}
-declare const useWhiteboardStore: zustand.UseBoundStore<zustand.StoreApi<WhiteboardStore>>;
-
-interface Props$4 {
-    title: ReactNode;
-    defaultPosition: {
-        x: number;
-        y: number;
-    };
-    width?: number;
-    className?: string;
-    /** Ref that stays in sync with the panel's current position and rendered size */
-    trackRect?: MutableRefObject<PanelRect>;
-    /** Show a focus button that zooms the whiteboard to this panel */
-    focusable?: boolean;
-    /** Optional camera framing controls used by the focus button */
-    focusPadding?: number;
-    focusMaxScale?: number;
-    /** Extra action buttons rendered in the header bar next to the focus button */
-    headerActions?: ReactNode;
-    children: ReactNode;
-}
-declare const FloatingPanel: react.NamedExoticComponent<Props$4>;
-/** Helper: create a stable rect ref for use with trackRect */
-declare function usePanelRect(initial: {
-    x: number;
-    y: number;
-}): MutableRefObject<PanelRect>;
-/** Get a position just below a tracked panel */
-declare function belowPanel(rect: PanelRect, gap?: number): {
-    x: number;
-    y: number;
-};
-
-interface Props$3 {
-    /** Extra action buttons rendered at the bottom of the zoom bar */
-    extraActions?: ReactNode;
-}
-declare function ZoomBar({ extraActions }: Props$3): react_jsx_runtime.JSX.Element;
-
-interface Props$2 {
-    loading?: boolean;
-}
-declare function Minimap({ loading }: Props$2): react_jsx_runtime.JSX.Element;
-
-interface Props$1 {
-    open: boolean;
-    title: string;
-    message: string;
-    onConfirm: () => void;
-    onCancel: () => void;
-    confirmLabel?: string;
-    loading?: boolean;
-    error?: string | null;
-}
-declare function ConfirmDialog({ open, title, message, onConfirm, onCancel, confirmLabel, loading, error, }: Props$1): react.ReactPortal | null;
-
-interface Props {
-    children: ReactNode;
-    fallbackMessage?: string;
-}
-interface State {
-    error: Error | null;
-}
-declare class PanelErrorBoundary extends Component<Props, State> {
-    state: State;
-    static getDerivedStateFromError(error: Error): State;
-    render(): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode> | null | undefined;
-}
-
-type WidthMap = Record<string, number>;
-interface UseWhiteboardLayoutOptions<T extends WidthMap> {
-    widths: T;
-    startX?: number;
-    y?: number;
-    gap?: number;
-}
-type PositionMap<T extends WidthMap> = {
-    [K in keyof T]: {
-        x: number;
-        y: number;
-    };
-};
-declare function useWhiteboardLayout<T extends WidthMap>({ widths, startX, y, gap, }: UseWhiteboardLayoutOptions<T>): {
-    layout: {
-        startX: number;
-        y: number;
-        gap: number;
-    };
-    panelWidth: T;
-    positions: PositionMap<T>;
-};
-
-declare const WHITEBOARD_GRID = 20;
-declare function snapToWhiteboardGrid(value: number): number;
-
-declare function cn(...args: (string | false | null | undefined)[]): string;
-
-export { ConfirmDialog, FloatingPanel, Minimap, PanelErrorBoundary, type PanelRect, WHITEBOARD_GRID, WhiteboardShell, type WhiteboardStore, ZoomBar, belowPanel, cn, computeWhiteboardFit, computeWhiteboardRectFocus, snapToWhiteboardGrid, usePanelRect, useWhiteboardLayout, useWhiteboardStore };
+import { ButtonHTMLAttributes } from 'react';
+import { Component } from 'react';
+import { ComponentType } from 'react';
+import { ElementType } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { JSXElementConstructor } from 'react';
+import { LabelHTMLAttributes } from 'react';
+import { MutableRefObject } from 'react';
+import { NamedExoticComponent } from 'react';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { ReactPortal } from 'react';
+import { RefAttributes } from 'react';
+import { SelectHTMLAttributes } from 'react';
+import { StoreApi } from 'zustand';
+import { TextareaHTMLAttributes } from 'react';
+import { UseBoundStore } from 'zustand';
+
+export declare function Alert({ tone, className, ...props }: AlertProps): JSX_2.Element;
+
+declare interface AlertProps extends HTMLAttributes<HTMLParagraphElement> {
+    tone?: AlertTone;
+}
+
+declare type AlertTone = 'error' | 'muted' | 'info' | 'success';
+
+export declare function AssetCardSkeleton(): JSX_2.Element;
+
+export declare function AssetTitle({ as, clamp, className, ...props }: AssetTitleProps): ReactElement<any, string | JSXElementConstructor<any>>;
+
+declare interface AssetTitleProps extends TypographyProps {
+    clamp?: boolean;
+}
+
+export declare function AvatarSkeleton(props: HTMLAttributes<HTMLDivElement>): JSX_2.Element;
+
+/** Get a position just below a tracked panel */
+export declare function belowPanel(rect: PanelRect, gap?: number): {
+    x: number;
+    y: number;
+};
+
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
+
+declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    fullWidth?: boolean;
+    iconOnly?: boolean;
+    loading?: boolean;
+    loadingText?: string;
+}
+
+/**
+ * A flexible row of buttons with equal sizing. Replaces ALL action-row patterns:
+ * `element-actions`, `asset-actions`, `character-actions`, `character-secondary-row`,
+ * `editor-header__actions`, `style-picker-actions`, `confirm-actions`, `form-actions`,
+ * `lang-batch-actions`, `widget-actions-row`.
+ *
+ * This replaces the old ActionGroup component which mapped variant strings to CSS classes.
+ */
+export declare function ButtonRow({ as, className, ...props }: ButtonRowProps): ReactElement<any, string | JSXElementConstructor<any>>;
+
+declare interface ButtonRowProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+}
+
+export declare function ButtonSkeleton(props: HTMLAttributes<HTMLDivElement>): JSX_2.Element;
+
+declare type ButtonVariant = 'primary' | 'secondary' | 'danger';
+
+export declare function CanvasSkeleton(props: HTMLAttributes<HTMLDivElement>): JSX_2.Element;
+
+export declare function Chip({ className, ...props }: ChipProps): JSX_2.Element;
+
+declare type ChipProps = HTMLAttributes<HTMLSpanElement>;
+
+export declare function ChipSkeleton(props: HTMLAttributes<HTMLDivElement>): JSX_2.Element;
+
+export declare function ChoiceCard({ active, className, ...props }: ChoiceCardProps): JSX_2.Element;
+
+declare interface ChoiceCardProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    active?: boolean;
+}
+
+export declare function ChoiceGroup<T extends string>({ options, value, onChange, className, }: ChoiceGroupProps<T>): JSX_2.Element;
+
+declare interface ChoiceGroupProps<T extends string> {
+    options: ChoiceOption<T>[];
+    value: T | null | undefined;
+    onChange: (value: T) => void;
+    className?: string;
+}
+
+export declare function ChoiceGroupSkeleton({ count, className, withDescription }: ChoiceGroupSkeletonProps): JSX_2.Element;
+
+declare interface ChoiceGroupSkeletonProps {
+    count?: number;
+    className?: string;
+    withDescription?: boolean;
+}
+
+export declare interface ChoiceOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+}
+
+export declare function cn(...args: (string | false | null | undefined)[]): string;
+
+export declare function computeWhiteboardFit(panels: Map<string, PanelRect>, viewportSize: {
+    width: number;
+    height: number;
+}, padding?: number): {
+    scale: number;
+    offset: {
+        x: number;
+        y: number;
+    };
+} | null;
+
+export declare function computeWhiteboardRectFocus(rect: PanelRect, viewportSize: {
+    width: number;
+    height: number;
+}, padding?: number, maxScale?: number): {
+    scale: number;
+    offset: {
+        x: number;
+        y: number;
+    };
+};
+
+export declare function ConfirmDialog({ open, title, message, onConfirm, onCancel, confirmLabel, loading, error, }: Props_5): ReactPortal | null;
+
+/**
+ * A 2-column grid for coordinate inputs.
+ * Replaces `<div className="coord-grid">`.
+ */
+export declare function CoordGrid({ className, ...props }: CoordGridProps): JSX_2.Element;
+
+declare interface CoordGridProps extends HTMLAttributes<HTMLDivElement> {
+}
+
+/**
+ * A labeled coordinate input (x, y, z, scale).
+ * Replaces `<label className="coord-input">x <input ...></label>`.
+ */
+export declare function CoordInput({ axis, className, ...props }: CoordInputProps): JSX_2.Element;
+
+declare interface CoordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    axis: string;
+}
+
+export declare function EmptyState({ title, description, action }: EmptyStateProps): JSX_2.Element;
+
+declare interface EmptyStateProps {
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+}
+
+export declare function Field({ as, label, htmlFor, hint, error, layout, className, children, ...props }: FieldProps): ReactElement<any, string | JSXElementConstructor<any>>;
+
+declare type FieldLayout = 'stack' | 'control';
+
+declare interface FieldProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    label?: ReactNode;
+    htmlFor?: string;
+    hint?: ReactNode;
+    error?: ReactNode;
+    layout?: FieldLayout;
+}
+
+export declare const FloatingPanel: NamedExoticComponent<Props_2>;
+
+export declare function GeneratingOverlay({ isGenerating, children, message }: GeneratingOverlayProps): JSX_2.Element;
+
+declare interface GeneratingOverlayProps {
+    isGenerating: boolean;
+    children: ReactNode;
+    message?: string;
+}
+
+export declare function IconButtonSkeleton(props: HTMLAttributes<HTMLDivElement>): JSX_2.Element;
+
+export declare function IconText({ as, icon, className, children, ...props }: IconTextProps): ReactElement<any, string | JSXElementConstructor<any>>;
+
+declare interface IconTextProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    icon: ReactNode;
+}
+
+export declare function ImageThumb({ src, alt, placeholder, size, fit, onImageError, className, ...props }: ImageThumbProps): JSX_2.Element;
+
+declare type ImageThumbFit = 'contain' | 'cover';
+
+declare interface ImageThumbProps extends HTMLAttributes<HTMLDivElement> {
+    src?: string | null;
+    alt: string;
+    placeholder?: ReactNode;
+    size?: ImageThumbSize;
+    fit?: ImageThumbFit;
+    onImageError?: () => void;
+}
+
+declare type ImageThumbSize = 'sm' | 'md' | 'fluid';
+
+export declare function Inline({ as, justify, className, ...props }: InlineProps): ReactElement<any, string | JSXElementConstructor<any>>;
+
+declare interface InlineProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    justify?: 'start' | 'between';
+}
+
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
+
+declare type InputProps = InputHTMLAttributes<HTMLInputElement>;
+
+export declare function InputSkeleton(props: HTMLAttributes<HTMLDivElement>): JSX_2.Element;
+
+/**
+ * A bordered card container used for list items (elements, facts, secrets, users, characters, assets).
+ * Replaces raw `<div className="element-card">`, `<div className="fact-card">`,
+ * `<div className="secret-card">`, `<li className="user-card">`, `<div className="character-card">`,
+ * `<li className="asset-card">`, etc.
+ */
+export declare function ItemCard({ as, className, ...props }: ItemCardProps): ReactElement<any, string | JSXElementConstructor<any>>;
+
+declare interface ItemCardProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+}
+
+/**
+ * A vertical list with consistent gap, used for lists of ItemCards.
+ * Replaces raw `<div className="element-list">`, `<div className="fact-list">`,
+ * `<div className="secret-list">`, `<List className="user-list">`,
+ * `<List className="characters-list">`, etc.
+ */
+export declare function ItemList({ as, className, ...props }: ItemListProps): ReactElement<any, string | JSXElementConstructor<any>>;
+
+declare interface ItemListProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+}
+
+export declare function Label({ className, ...props }: LabelProps): JSX_2.Element;
+
+declare type LabelProps = LabelHTMLAttributes<HTMLLabelElement>;
+
+export declare function LineSkeleton({ short, className, ...props }: LineSkeletonProps): JSX_2.Element;
+
+declare interface LineSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    short?: boolean;
+}
+
+export declare function List({ as, reset, className, ...props }: ListProps): ReactElement<any, string | JSXElementConstructor<any>>;
+
+declare interface ListProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    reset?: boolean;
+}
+
+export declare function LoadingState({ label, className }: LoadingStateProps): JSX_2.Element;
+
+declare interface LoadingStateProps {
+    label?: string;
+    className?: string;
+}
+
+export declare function Minimap({ loading }: Props_4): JSX_2.Element;
+
+export declare function MutedText({ as, size, className, ...props }: TypographyProps & {
+    size?: MutedTextSize;
+}): ReactElement<any, string | JSXElementConstructor<any>>;
+
+declare type MutedTextSize = 'xs' | 'sm' | 'md';
+
+export declare function PageCard({ children }: {
+    children: ReactNode;
+}): JSX_2.Element;
+
+export declare function PageShell({ children }: {
+    children: ReactNode;
+}): JSX_2.Element;
+
+export declare function PageTitle({ as, className, ...props }: TypographyProps): ReactElement<any, string | JSXElementConstructor<any>>;
+
+export declare function PanelCloseButton({ onClick, label }: PanelCloseButtonProps): JSX_2.Element;
+
+declare interface PanelCloseButtonProps {
+    onClick: () => void;
+    label?: string;
+}
+
+export declare class PanelErrorBoundary extends Component<Props_6, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): State;
+    render(): string | number | boolean | JSX_2.Element | Iterable<ReactNode> | null | undefined;
+}
+
+export declare function PanelFormSkeleton({ inputs, showButton, className, ...props }: PanelFormSkeletonProps): JSX_2.Element;
+
+declare interface PanelFormSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    inputs?: number;
+    showButton?: boolean;
+}
+
+export declare type PanelRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    focusPadding?: number;
+    focusMaxScale?: number;
+};
+
+export declare function PanelSection({ heading, description, actions, className, children, ...props }: PanelSectionProps): JSX_2.Element;
+
+declare interface PanelSectionProps extends HTMLAttributes<HTMLDivElement> {
+    heading?: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+}
+
+export declare function PanelTitle({ icon: Icon, label }: PanelTitleProps): JSX_2.Element;
+
+declare interface PanelTitleProps {
+    icon: ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    label: string;
+}
+
+/**
+ * A clickable card used inside picker grids (asset pickers, variant pickers).
+ * Replaces `<button className="picker-card">`, `<Stack className="picker-card picker-card--skeleton">`.
+ */
+export declare function PickerCard({ as, className, ...props }: PickerCardProps): ReactElement<any, string | JSXElementConstructor<any>>;
+
+declare interface PickerCardProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+}
+
+/**
+ * A responsive grid for picker cards.
+ * Replaces `<List className="picker-grid picker-grid--elements">`, etc.
+ */
+export declare function PickerGrid({ variant, className, ...props }: PickerGridProps): JSX_2.Element;
+
+declare interface PickerGridProps extends HTMLAttributes<HTMLUListElement> {
+    variant: PickerGridVariant;
+}
+
+export declare function PickerGridSkeleton({ count, gridClass }: PickerGridSkeletonProps): JSX_2.Element;
+
+declare interface PickerGridSkeletonProps {
+    count?: number;
+    gridClass: string;
+}
+
+declare type PickerGridVariant = 'elements' | 'characters' | 'library';
+
+export declare function Pill({ tone, className, ...props }: PillProps): JSX_2.Element;
+
+declare interface PillProps extends HTMLAttributes<HTMLSpanElement> {
+    tone?: PillTone;
+}
+
+declare type PillTone = 'default' | 'success' | 'warning' | 'danger';
+
+declare type PositionMap<T extends WidthMap> = {
+    [K in keyof T]: {
+        x: number;
+        y: number;
+    };
+};
+
+declare interface Props {
+    children: ReactNode;
+    showMinimap?: boolean;
+    minimapLoading?: boolean;
+    /** Extra action buttons rendered inside the ZoomBar (e.g. a theme toggle) */
+    extraActions?: ReactNode;
+}
+
+declare interface Props_2 {
+    title: ReactNode;
+    defaultPosition: {
+        x: number;
+        y: number;
+    };
+    width?: number;
+    className?: string;
+    /** Ref that stays in sync with the panel's current position and rendered size */
+    trackRect?: MutableRefObject<PanelRect>;
+    /** Show a focus button that zooms the whiteboard to this panel */
+    focusable?: boolean;
+    /** Optional camera framing controls used by the focus button */
+    focusPadding?: number;
+    focusMaxScale?: number;
+    /** Extra action buttons rendered in the header bar next to the focus button */
+    headerActions?: ReactNode;
+    children: ReactNode;
+}
+
+declare interface Props_3 {
+    /** Extra action buttons rendered at the bottom of the zoom bar */
+    extraActions?: ReactNode;
+}
+
+declare interface Props_4 {
+    loading?: boolean;
+}
+
+declare interface Props_5 {
+    open: boolean;
+    title: string;
+    message: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    confirmLabel?: string;
+    loading?: boolean;
+    error?: string | null;
+}
+
+declare interface Props_6 {
+    children: ReactNode;
+    fallbackMessage?: string;
+}
+
+export declare function SectionDescription({ as, className, ...props }: TypographyProps): ReactElement<any, string | JSXElementConstructor<any>>;
+
+export declare function SectionTitle({ as, className, ...props }: TypographyProps): ReactElement<any, string | JSXElementConstructor<any>>;
+
+export declare const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLSelectElement>>;
+
+declare type SelectProps = SelectHTMLAttributes<HTMLSelectElement>;
+
+export declare function SelectSkeleton(props: HTMLAttributes<HTMLDivElement>): JSX_2.Element;
+
+export declare function Skeleton({ as, radius, className, ...props }: SkeletonProps): ReactElement<any, string | JSXElementConstructor<any>>;
+
+declare interface SkeletonProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    radius?: SkeletonRadius;
+}
+
+declare type SkeletonRadius = 'sm' | 'md' | 'pill';
+
+export declare function snapToWhiteboardGrid(value: number): number;
+
+/**
+ * A two-column grid layout (image + content side-by-side).
+ * Replaces `<div className="element-main">`, `<div className="character-main">`,
+ * `<article className="user-row">`.
+ */
+export declare function SplitLayout({ variant, className, ...props }: SplitLayoutProps): JSX_2.Element;
+
+declare interface SplitLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    variant: SplitLayoutVariant;
+}
+
+declare type SplitLayoutVariant = 'element' | 'character' | 'user';
+
+export declare function Stack({ as, size, className, ...props }: StackProps): ReactElement<any, string | JSXElementConstructor<any>>;
+
+declare interface StackProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    size?: StackSize;
+}
+
+declare type StackSize = 'sm' | 'md';
+
+declare interface State {
+    error: Error | null;
+}
+
+export declare function StoryCardSkeleton(): JSX_2.Element;
+
+export declare function StoryTitle({ as, className, ...props }: TypographyProps): ReactElement<any, string | JSXElementConstructor<any>>;
+
+/**
+ * A horizontal wrapping row for chips/tags/pills/small items.
+ * Replaces `<div className="element-tags-row">`, `<div className="chip-row">`,
+ * `<div className="asset-meta">`, etc.
+ */
+export declare function TagRow({ className, ...props }: TagRowProps): JSX_2.Element;
+
+declare interface TagRowProps extends HTMLAttributes<HTMLDivElement> {
+}
+
+export declare const Textarea: ForwardRefExoticComponent<TextareaProps & RefAttributes<HTMLTextAreaElement>>;
+
+declare type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export declare function TextareaSkeleton(props: HTMLAttributes<HTMLDivElement>): JSX_2.Element;
+
+export declare function ThemeToggle({ className, theme, onToggle, lightIcon, darkIcon }: ThemeToggleProps): JSX_2.Element;
+
+declare interface ThemeToggleProps {
+    className?: string;
+    theme?: 'light' | 'dark';
+    onToggle?: () => void;
+    lightIcon?: ReactNode;
+    darkIcon?: ReactNode;
+}
+
+export declare function ThumbSkeleton(props: HTMLAttributes<HTMLDivElement>): JSX_2.Element;
+
+/**
+ * A horizontal row with space-between alignment, used for title + action pairs.
+ * Replaces `<div className="element-card__title-row">`,
+ * `<div className="character-info__title-row">`,
+ * `<header className="widget-section__header">`, etc.
+ */
+export declare function TitleRow({ className, ...props }: TitleRowProps): JSX_2.Element;
+
+declare interface TitleRowProps extends HTMLAttributes<HTMLDivElement> {
+}
+
+export declare function TitleSkeleton(props: HTMLAttributes<HTMLDivElement>): JSX_2.Element;
+
+declare interface TypographyProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+}
+
+/** Helper: create a stable rect ref for use with trackRect */
+export declare function usePanelRect(initial: {
+    x: number;
+    y: number;
+}): MutableRefObject<PanelRect>;
+
+export declare function UserCardSkeleton(): JSX_2.Element;
+
+export declare function UserListSkeleton({ count }: UserListSkeletonProps): JSX_2.Element;
+
+declare interface UserListSkeletonProps {
+    count?: number;
+}
+
+export declare function useWhiteboardLayout<T extends WidthMap>({ widths, startX, y, gap, }: UseWhiteboardLayoutOptions<T>): {
+    layout: {
+        startX: number;
+        y: number;
+        gap: number;
+    };
+    panelWidth: T;
+    positions: PositionMap<T>;
+};
+
+declare interface UseWhiteboardLayoutOptions<T extends WidthMap> {
+    widths: T;
+    startX?: number;
+    y?: number;
+    gap?: number;
+}
+
+export declare const useWhiteboardStore: UseBoundStore<StoreApi<WhiteboardStore>>;
+
+export declare const WHITEBOARD_GRID = 20;
+
+export declare function WhiteboardShell({ children, showMinimap, minimapLoading, extraActions }: Props): JSX_2.Element;
+
+export declare interface WhiteboardStore {
+    offset: {
+        x: number;
+        y: number;
+    };
+    scale: number;
+    viewportSize: {
+        width: number;
+        height: number;
+    };
+    snapToGrid: boolean;
+    snapGridSize: number;
+    panels: Map<string, PanelRect>;
+    resetFns: Map<string, () => void>;
+    /** Incremented each time the panel registry changes; subscribe to trigger re-renders. */
+    registryVersion: number;
+    setOffset: (v: {
+        x: number;
+        y: number;
+    } | ((prev: {
+        x: number;
+        y: number;
+    }) => {
+        x: number;
+        y: number;
+    })) => void;
+    setScale: (v: number | ((prev: number) => number)) => void;
+    setViewportSize: (v: {
+        width: number;
+        height: number;
+    }) => void;
+    setSnapToGrid: (v: boolean | ((prev: boolean) => boolean)) => void;
+    register: (id: string, rect: PanelRect) => void;
+    unregister: (id: string) => void;
+    registerReset: (id: string, fn: () => void) => void;
+    unregisterReset: (id: string) => void;
+    fitToContent: () => void;
+    focusPanel: (rect: PanelRect, options?: {
+        padding?: number;
+        maxScale?: number;
+    }) => void;
+    resetWidgets: () => void;
+    /** Call on WhiteboardShell mount to discard any stale state from the previous session. */
+    resetSession: () => void;
+}
+
+declare type WidthMap = Record<string, number>;
+
+export declare function ZoomBar({ extraActions }: Props_3): JSX_2.Element;
+
+export { }