@objectifthunes/whiteboard 0.1.1 → 0.2.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, MutableRefObject, Component } from 'react';
+import { ReactNode, MutableRefObject, Component, HTMLAttributes, ButtonHTMLAttributes, ElementType, InputHTMLAttributes, LabelHTMLAttributes, ComponentType, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import * as zustand from 'zustand';
 
 interface Props$5 {
@@ -182,4 +182,327 @@ 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 };
+type AlertTone = 'error' | 'muted' | 'info' | 'success';
+interface AlertProps extends HTMLAttributes<HTMLParagraphElement> {
+    tone?: AlertTone;
+}
+declare function Alert({ tone, className, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
+
+type ButtonVariant = 'primary' | 'secondary' | 'danger';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    fullWidth?: boolean;
+    iconOnly?: boolean;
+    loading?: boolean;
+    loadingText?: string;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface ButtonRowProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+}
+/**
+ * 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.
+ */
+declare function ButtonRow({ as, className, ...props }: ButtonRowProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+type ChipProps = HTMLAttributes<HTMLSpanElement>;
+declare function Chip({ className, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
+
+interface ChoiceCardProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    active?: boolean;
+}
+declare function ChoiceCard({ active, className, ...props }: ChoiceCardProps): react_jsx_runtime.JSX.Element;
+
+interface ChoiceOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+}
+interface ChoiceGroupProps<T extends string> {
+    options: ChoiceOption<T>[];
+    value: T | null | undefined;
+    onChange: (value: T) => void;
+    className?: string;
+}
+declare function ChoiceGroup<T extends string>({ options, value, onChange, className, }: ChoiceGroupProps<T>): react_jsx_runtime.JSX.Element;
+interface ChoiceGroupSkeletonProps {
+    count?: number;
+    className?: string;
+    withDescription?: boolean;
+}
+declare function ChoiceGroupSkeleton({ count, className, withDescription }: ChoiceGroupSkeletonProps): react_jsx_runtime.JSX.Element;
+
+interface CoordGridProps extends HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * A 2-column grid for coordinate inputs.
+ * Replaces `<div className="coord-grid">`.
+ */
+declare function CoordGrid({ className, ...props }: CoordGridProps): react_jsx_runtime.JSX.Element;
+interface CoordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    axis: string;
+}
+/**
+ * A labeled coordinate input (x, y, z, scale).
+ * Replaces `<label className="coord-input">x <input ...></label>`.
+ */
+declare function CoordInput({ axis, className, ...props }: CoordInputProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps {
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+}
+declare function EmptyState({ title, description, action }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+type FieldLayout = 'stack' | 'control';
+interface FieldProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    label?: ReactNode;
+    htmlFor?: string;
+    hint?: ReactNode;
+    error?: ReactNode;
+    layout?: FieldLayout;
+}
+declare function Field({ as, label, htmlFor, hint, error, layout, className, children, ...props }: FieldProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+interface GeneratingOverlayProps {
+    isGenerating: boolean;
+    children: ReactNode;
+    message?: string;
+}
+declare function GeneratingOverlay({ isGenerating, children, message }: GeneratingOverlayProps): react_jsx_runtime.JSX.Element;
+
+interface IconTextProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    icon: ReactNode;
+}
+declare function IconText({ as, icon, className, children, ...props }: IconTextProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+type ImageThumbSize = 'sm' | 'md' | 'fluid';
+type ImageThumbFit = 'contain' | 'cover';
+interface ImageThumbProps extends HTMLAttributes<HTMLDivElement> {
+    src?: string | null;
+    alt: string;
+    placeholder?: ReactNode;
+    size?: ImageThumbSize;
+    fit?: ImageThumbFit;
+    onImageError?: () => void;
+}
+declare function ImageThumb({ src, alt, placeholder, size, fit, onImageError, className, ...props }: ImageThumbProps): react_jsx_runtime.JSX.Element;
+
+interface InlineProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    justify?: 'start' | 'between';
+}
+declare function Inline({ as, justify, className, ...props }: InlineProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+type InputProps = InputHTMLAttributes<HTMLInputElement>;
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ItemCardProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+}
+/**
+ * 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.
+ */
+declare function ItemCard({ as, className, ...props }: ItemCardProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+interface ItemListProps 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.
+ */
+declare function ItemList({ as, className, ...props }: ItemListProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+type LabelProps = LabelHTMLAttributes<HTMLLabelElement>;
+declare function Label({ className, ...props }: LabelProps): react_jsx_runtime.JSX.Element;
+
+interface ListProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    reset?: boolean;
+}
+declare function List({ as, reset, className, ...props }: ListProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+interface LoadingStateProps {
+    label?: string;
+    className?: string;
+}
+declare function LoadingState({ label, className }: LoadingStateProps): react_jsx_runtime.JSX.Element;
+
+declare function PageShell({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function PageCard({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+interface PanelCloseButtonProps {
+    onClick: () => void;
+    label?: string;
+}
+declare function PanelCloseButton({ onClick, label }: PanelCloseButtonProps): react_jsx_runtime.JSX.Element;
+
+interface PanelSectionProps extends HTMLAttributes<HTMLDivElement> {
+    heading?: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+}
+declare function PanelSection({ heading, description, actions, className, children, ...props }: PanelSectionProps): react_jsx_runtime.JSX.Element;
+
+interface PanelTitleProps {
+    icon: ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    label: string;
+}
+declare function PanelTitle({ icon: Icon, label }: PanelTitleProps): react_jsx_runtime.JSX.Element;
+
+interface PickerCardProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+}
+/**
+ * A clickable card used inside picker grids (asset pickers, variant pickers).
+ * Replaces `<button className="picker-card">`, `<Stack className="picker-card picker-card--skeleton">`.
+ */
+declare function PickerCard({ as, className, ...props }: PickerCardProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+type PickerGridVariant = 'elements' | 'characters' | 'library';
+interface PickerGridProps extends HTMLAttributes<HTMLUListElement> {
+    variant: PickerGridVariant;
+}
+/**
+ * A responsive grid for picker cards.
+ * Replaces `<List className="picker-grid picker-grid--elements">`, etc.
+ */
+declare function PickerGrid({ variant, className, ...props }: PickerGridProps): react_jsx_runtime.JSX.Element;
+
+type PillTone = 'default' | 'success' | 'warning' | 'danger';
+interface PillProps extends HTMLAttributes<HTMLSpanElement> {
+    tone?: PillTone;
+}
+declare function Pill({ tone, className, ...props }: PillProps): react_jsx_runtime.JSX.Element;
+
+type SelectProps = SelectHTMLAttributes<HTMLSelectElement>;
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+type SkeletonRadius = 'sm' | 'md' | 'pill';
+interface SkeletonProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    radius?: SkeletonRadius;
+}
+declare function Skeleton({ as, radius, className, ...props }: SkeletonProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare function InputSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function ButtonSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function IconButtonSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function SelectSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function TextareaSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function ThumbSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function ChipSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function TitleSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+interface LineSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    short?: boolean;
+}
+declare function LineSkeleton({ short, className, ...props }: LineSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function AvatarSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function CanvasSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+
+type SplitLayoutVariant = 'element' | 'character' | 'user';
+interface SplitLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    variant: SplitLayoutVariant;
+}
+/**
+ * A two-column grid layout (image + content side-by-side).
+ * Replaces `<div className="element-main">`, `<div className="character-main">`,
+ * `<article className="user-row">`.
+ */
+declare function SplitLayout({ variant, className, ...props }: SplitLayoutProps): react_jsx_runtime.JSX.Element;
+
+type StackSize = 'sm' | 'md';
+interface StackProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    size?: StackSize;
+}
+declare function Stack({ as, size, className, ...props }: StackProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+interface TagRowProps extends HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * 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.
+ */
+declare function TagRow({ className, ...props }: TagRowProps): react_jsx_runtime.JSX.Element;
+
+type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface ThemeToggleProps {
+    className?: string;
+    theme?: 'light' | 'dark';
+    onToggle?: () => void;
+    lightIcon?: ReactNode;
+    darkIcon?: ReactNode;
+}
+declare function ThemeToggle({ className, theme, onToggle, lightIcon, darkIcon }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
+
+interface TitleRowProps extends HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * 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.
+ */
+declare function TitleRow({ className, ...props }: TitleRowProps): react_jsx_runtime.JSX.Element;
+
+interface TypographyProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+}
+interface AssetTitleProps extends TypographyProps {
+    clamp?: boolean;
+}
+type MutedTextSize = 'xs' | 'sm' | 'md';
+declare function AssetTitle({ as, clamp, className, ...props }: AssetTitleProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare function StoryTitle({ as, className, ...props }: TypographyProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare function MutedText({ as, size, className, ...props }: TypographyProps & {
+    size?: MutedTextSize;
+}): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare function PageTitle({ as, className, ...props }: TypographyProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare function SectionTitle({ as, className, ...props }: TypographyProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare function SectionDescription({ as, className, ...props }: TypographyProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+interface PanelFormSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    inputs?: number;
+    showButton?: boolean;
+}
+declare function PanelFormSkeleton({ inputs, showButton, className, ...props }: PanelFormSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function StoryCardSkeleton(): react_jsx_runtime.JSX.Element;
+declare function UserCardSkeleton(): react_jsx_runtime.JSX.Element;
+interface UserListSkeletonProps {
+    count?: number;
+}
+declare function UserListSkeleton({ count }: UserListSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function AssetCardSkeleton(): react_jsx_runtime.JSX.Element;
+interface PickerGridSkeletonProps {
+    count?: number;
+    gridClass: string;
+}
+declare function PickerGridSkeleton({ count, gridClass }: PickerGridSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { Alert, AssetCardSkeleton, AssetTitle, AvatarSkeleton, Button, ButtonRow, ButtonSkeleton, CanvasSkeleton, Chip, ChipSkeleton, ChoiceCard, ChoiceGroup, ChoiceGroupSkeleton, type ChoiceOption, ConfirmDialog, CoordGrid, CoordInput, EmptyState, Field, FloatingPanel, GeneratingOverlay, IconButtonSkeleton, IconText, ImageThumb, Inline, Input, InputSkeleton, ItemCard, ItemList, Label, LineSkeleton, List, LoadingState, Minimap, MutedText, PageCard, PageShell, PageTitle, PanelCloseButton, PanelErrorBoundary, PanelFormSkeleton, type PanelRect, PanelSection, PanelTitle, PickerCard, PickerGrid, PickerGridSkeleton, Pill, SectionDescription, SectionTitle, Select, SelectSkeleton, Skeleton, SplitLayout, Stack, StoryCardSkeleton, StoryTitle, TagRow, Textarea, TextareaSkeleton, ThemeToggle, ThumbSkeleton, TitleRow, TitleSkeleton, UserCardSkeleton, UserListSkeleton, WHITEBOARD_GRID, WhiteboardShell, type WhiteboardStore, ZoomBar, belowPanel, cn, computeWhiteboardFit, computeWhiteboardRectFocus, snapToWhiteboardGrid, usePanelRect, useWhiteboardLayout, useWhiteboardStore };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, MutableRefObject, Component } from 'react';
+import { ReactNode, MutableRefObject, Component, HTMLAttributes, ButtonHTMLAttributes, ElementType, InputHTMLAttributes, LabelHTMLAttributes, ComponentType, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import * as zustand from 'zustand';
 
 interface Props$5 {
@@ -182,4 +182,327 @@ 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 };
+type AlertTone = 'error' | 'muted' | 'info' | 'success';
+interface AlertProps extends HTMLAttributes<HTMLParagraphElement> {
+    tone?: AlertTone;
+}
+declare function Alert({ tone, className, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
+
+type ButtonVariant = 'primary' | 'secondary' | 'danger';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    fullWidth?: boolean;
+    iconOnly?: boolean;
+    loading?: boolean;
+    loadingText?: string;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface ButtonRowProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+}
+/**
+ * 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.
+ */
+declare function ButtonRow({ as, className, ...props }: ButtonRowProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+type ChipProps = HTMLAttributes<HTMLSpanElement>;
+declare function Chip({ className, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
+
+interface ChoiceCardProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    active?: boolean;
+}
+declare function ChoiceCard({ active, className, ...props }: ChoiceCardProps): react_jsx_runtime.JSX.Element;
+
+interface ChoiceOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+}
+interface ChoiceGroupProps<T extends string> {
+    options: ChoiceOption<T>[];
+    value: T | null | undefined;
+    onChange: (value: T) => void;
+    className?: string;
+}
+declare function ChoiceGroup<T extends string>({ options, value, onChange, className, }: ChoiceGroupProps<T>): react_jsx_runtime.JSX.Element;
+interface ChoiceGroupSkeletonProps {
+    count?: number;
+    className?: string;
+    withDescription?: boolean;
+}
+declare function ChoiceGroupSkeleton({ count, className, withDescription }: ChoiceGroupSkeletonProps): react_jsx_runtime.JSX.Element;
+
+interface CoordGridProps extends HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * A 2-column grid for coordinate inputs.
+ * Replaces `<div className="coord-grid">`.
+ */
+declare function CoordGrid({ className, ...props }: CoordGridProps): react_jsx_runtime.JSX.Element;
+interface CoordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    axis: string;
+}
+/**
+ * A labeled coordinate input (x, y, z, scale).
+ * Replaces `<label className="coord-input">x <input ...></label>`.
+ */
+declare function CoordInput({ axis, className, ...props }: CoordInputProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps {
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+}
+declare function EmptyState({ title, description, action }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+type FieldLayout = 'stack' | 'control';
+interface FieldProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    label?: ReactNode;
+    htmlFor?: string;
+    hint?: ReactNode;
+    error?: ReactNode;
+    layout?: FieldLayout;
+}
+declare function Field({ as, label, htmlFor, hint, error, layout, className, children, ...props }: FieldProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+interface GeneratingOverlayProps {
+    isGenerating: boolean;
+    children: ReactNode;
+    message?: string;
+}
+declare function GeneratingOverlay({ isGenerating, children, message }: GeneratingOverlayProps): react_jsx_runtime.JSX.Element;
+
+interface IconTextProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    icon: ReactNode;
+}
+declare function IconText({ as, icon, className, children, ...props }: IconTextProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+type ImageThumbSize = 'sm' | 'md' | 'fluid';
+type ImageThumbFit = 'contain' | 'cover';
+interface ImageThumbProps extends HTMLAttributes<HTMLDivElement> {
+    src?: string | null;
+    alt: string;
+    placeholder?: ReactNode;
+    size?: ImageThumbSize;
+    fit?: ImageThumbFit;
+    onImageError?: () => void;
+}
+declare function ImageThumb({ src, alt, placeholder, size, fit, onImageError, className, ...props }: ImageThumbProps): react_jsx_runtime.JSX.Element;
+
+interface InlineProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    justify?: 'start' | 'between';
+}
+declare function Inline({ as, justify, className, ...props }: InlineProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+type InputProps = InputHTMLAttributes<HTMLInputElement>;
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ItemCardProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+}
+/**
+ * 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.
+ */
+declare function ItemCard({ as, className, ...props }: ItemCardProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+interface ItemListProps 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.
+ */
+declare function ItemList({ as, className, ...props }: ItemListProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+type LabelProps = LabelHTMLAttributes<HTMLLabelElement>;
+declare function Label({ className, ...props }: LabelProps): react_jsx_runtime.JSX.Element;
+
+interface ListProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    reset?: boolean;
+}
+declare function List({ as, reset, className, ...props }: ListProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+interface LoadingStateProps {
+    label?: string;
+    className?: string;
+}
+declare function LoadingState({ label, className }: LoadingStateProps): react_jsx_runtime.JSX.Element;
+
+declare function PageShell({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function PageCard({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+interface PanelCloseButtonProps {
+    onClick: () => void;
+    label?: string;
+}
+declare function PanelCloseButton({ onClick, label }: PanelCloseButtonProps): react_jsx_runtime.JSX.Element;
+
+interface PanelSectionProps extends HTMLAttributes<HTMLDivElement> {
+    heading?: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+}
+declare function PanelSection({ heading, description, actions, className, children, ...props }: PanelSectionProps): react_jsx_runtime.JSX.Element;
+
+interface PanelTitleProps {
+    icon: ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    label: string;
+}
+declare function PanelTitle({ icon: Icon, label }: PanelTitleProps): react_jsx_runtime.JSX.Element;
+
+interface PickerCardProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+}
+/**
+ * A clickable card used inside picker grids (asset pickers, variant pickers).
+ * Replaces `<button className="picker-card">`, `<Stack className="picker-card picker-card--skeleton">`.
+ */
+declare function PickerCard({ as, className, ...props }: PickerCardProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+type PickerGridVariant = 'elements' | 'characters' | 'library';
+interface PickerGridProps extends HTMLAttributes<HTMLUListElement> {
+    variant: PickerGridVariant;
+}
+/**
+ * A responsive grid for picker cards.
+ * Replaces `<List className="picker-grid picker-grid--elements">`, etc.
+ */
+declare function PickerGrid({ variant, className, ...props }: PickerGridProps): react_jsx_runtime.JSX.Element;
+
+type PillTone = 'default' | 'success' | 'warning' | 'danger';
+interface PillProps extends HTMLAttributes<HTMLSpanElement> {
+    tone?: PillTone;
+}
+declare function Pill({ tone, className, ...props }: PillProps): react_jsx_runtime.JSX.Element;
+
+type SelectProps = SelectHTMLAttributes<HTMLSelectElement>;
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+type SkeletonRadius = 'sm' | 'md' | 'pill';
+interface SkeletonProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    radius?: SkeletonRadius;
+}
+declare function Skeleton({ as, radius, className, ...props }: SkeletonProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare function InputSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function ButtonSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function IconButtonSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function SelectSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function TextareaSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function ThumbSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function ChipSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function TitleSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+interface LineSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    short?: boolean;
+}
+declare function LineSkeleton({ short, className, ...props }: LineSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function AvatarSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function CanvasSkeleton(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+
+type SplitLayoutVariant = 'element' | 'character' | 'user';
+interface SplitLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    variant: SplitLayoutVariant;
+}
+/**
+ * A two-column grid layout (image + content side-by-side).
+ * Replaces `<div className="element-main">`, `<div className="character-main">`,
+ * `<article className="user-row">`.
+ */
+declare function SplitLayout({ variant, className, ...props }: SplitLayoutProps): react_jsx_runtime.JSX.Element;
+
+type StackSize = 'sm' | 'md';
+interface StackProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    size?: StackSize;
+}
+declare function Stack({ as, size, className, ...props }: StackProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+interface TagRowProps extends HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * 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.
+ */
+declare function TagRow({ className, ...props }: TagRowProps): react_jsx_runtime.JSX.Element;
+
+type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface ThemeToggleProps {
+    className?: string;
+    theme?: 'light' | 'dark';
+    onToggle?: () => void;
+    lightIcon?: ReactNode;
+    darkIcon?: ReactNode;
+}
+declare function ThemeToggle({ className, theme, onToggle, lightIcon, darkIcon }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
+
+interface TitleRowProps extends HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * 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.
+ */
+declare function TitleRow({ className, ...props }: TitleRowProps): react_jsx_runtime.JSX.Element;
+
+interface TypographyProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+}
+interface AssetTitleProps extends TypographyProps {
+    clamp?: boolean;
+}
+type MutedTextSize = 'xs' | 'sm' | 'md';
+declare function AssetTitle({ as, clamp, className, ...props }: AssetTitleProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare function StoryTitle({ as, className, ...props }: TypographyProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare function MutedText({ as, size, className, ...props }: TypographyProps & {
+    size?: MutedTextSize;
+}): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare function PageTitle({ as, className, ...props }: TypographyProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare function SectionTitle({ as, className, ...props }: TypographyProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+declare function SectionDescription({ as, className, ...props }: TypographyProps): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+interface PanelFormSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    inputs?: number;
+    showButton?: boolean;
+}
+declare function PanelFormSkeleton({ inputs, showButton, className, ...props }: PanelFormSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function StoryCardSkeleton(): react_jsx_runtime.JSX.Element;
+declare function UserCardSkeleton(): react_jsx_runtime.JSX.Element;
+interface UserListSkeletonProps {
+    count?: number;
+}
+declare function UserListSkeleton({ count }: UserListSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function AssetCardSkeleton(): react_jsx_runtime.JSX.Element;
+interface PickerGridSkeletonProps {
+    count?: number;
+    gridClass: string;
+}
+declare function PickerGridSkeleton({ count, gridClass }: PickerGridSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { Alert, AssetCardSkeleton, AssetTitle, AvatarSkeleton, Button, ButtonRow, ButtonSkeleton, CanvasSkeleton, Chip, ChipSkeleton, ChoiceCard, ChoiceGroup, ChoiceGroupSkeleton, type ChoiceOption, ConfirmDialog, CoordGrid, CoordInput, EmptyState, Field, FloatingPanel, GeneratingOverlay, IconButtonSkeleton, IconText, ImageThumb, Inline, Input, InputSkeleton, ItemCard, ItemList, Label, LineSkeleton, List, LoadingState, Minimap, MutedText, PageCard, PageShell, PageTitle, PanelCloseButton, PanelErrorBoundary, PanelFormSkeleton, type PanelRect, PanelSection, PanelTitle, PickerCard, PickerGrid, PickerGridSkeleton, Pill, SectionDescription, SectionTitle, Select, SelectSkeleton, Skeleton, SplitLayout, Stack, StoryCardSkeleton, StoryTitle, TagRow, Textarea, TextareaSkeleton, ThemeToggle, ThumbSkeleton, TitleRow, TitleSkeleton, UserCardSkeleton, UserListSkeleton, WHITEBOARD_GRID, WhiteboardShell, type WhiteboardStore, ZoomBar, belowPanel, cn, computeWhiteboardFit, computeWhiteboardRectFocus, snapToWhiteboardGrid, usePanelRect, useWhiteboardLayout, useWhiteboardStore };