@objectifthunes/whiteboard 0.2.7 → 0.4.0

package/dist/index.d.ts

@@ -28,14 +28,6 @@ declare interface AlertProps extends HTMLAttributes<HTMLParagraphElement> {
 
 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 AvatarBadge({ className, ...props }: HTMLAttributes<HTMLSpanElement>): JSX_2.Element;
 
 export declare function AvatarSkeleton(props: HTMLAttributes<HTMLDivElement>): JSX_2.Element;
@@ -82,6 +74,38 @@ declare interface CanvasStageProps extends HTMLAttributes<HTMLDivElement> {
     hint?: string;
 }
 
+/** Generic composed card skeleton — thumb + title + line + optional chips + optional actions. */
+export declare function CardSkeleton({ withThumb, chipCount, actionCount, className, ...props }: CardSkeletonProps): JSX_2.Element;
+
+declare interface CardSkeletonProps extends HTMLAttributes<HTMLLIElement> {
+    /** Show a thumbnail placeholder at the top of the card. Defaults to true. */
+    withThumb?: boolean;
+    /** Number of chip placeholders shown above the title. */
+    chipCount?: number;
+    /** Number of action-button placeholders shown at the bottom of the card. */
+    actionCount?: number;
+}
+
+export declare function CardTitle({ as, clamp, className, ...props }: CardTitleProps): ReactElement<any, string | JSXElementConstructor<any>>;
+
+declare interface CardTitleProps extends TypographyProps {
+    clamp?: boolean;
+}
+
+/**
+ * A labeled checkbox row. The input pins its own size and flex so host
+ * (or kit) globals like `input { flex: 1 }` can never stretch it across
+ * the row.
+ */
+export declare function Checkbox({ label, hint, className, ...props }: CheckboxProps): JSX_2.Element;
+
+declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** Sentence-case text rendered next to the box. */
+    label?: ReactNode;
+    /** Muted addition after the label, e.g. "(dirty scans)". */
+    hint?: ReactNode;
+}
+
 export declare function Chip({ className, ...props }: ChipProps): JSX_2.Element;
 
 declare type ChipProps = HTMLAttributes<HTMLSpanElement>;
@@ -163,6 +187,13 @@ declare interface CoordInputProps extends Omit<InputHTMLAttributes<HTMLInputElem
     axis: string;
 }
 
+/** Hairline separator; vertical inside toolbars/inlines, horizontal in stacks. */
+export declare function Divider({ orientation, className, ...props }: DividerProps): JSX_2.Element;
+
+declare interface DividerProps extends HTMLAttributes<HTMLElement> {
+    orientation?: 'horizontal' | 'vertical';
+}
+
 export declare function EmptyState({ title, description, action }: EmptyStateProps): JSX_2.Element;
 
 declare interface EmptyStateProps {
@@ -255,6 +286,9 @@ declare interface ItemListProps extends HTMLAttributes<HTMLElement> {
     as?: ElementType;
 }
 
+/** Keyboard-key chip for shortcut hints: <Kbd>esc</Kbd> <Kbd>⌫</Kbd>. */
+export declare function Kbd({ className, ...props }: HTMLAttributes<HTMLElement>): JSX_2.Element;
+
 export declare function Label({ className, ...props }: LabelProps): JSX_2.Element;
 
 declare type LabelProps = LabelHTMLAttributes<HTMLLabelElement>;
@@ -287,6 +321,20 @@ export declare function MutedText({ as, size, className, ...props }: TypographyP
 
 declare type MutedTextSize = 'xs' | 'sm' | 'md';
 
+/**
+ * Labeled numeric input. Values come back as numbers, clamped to
+ * [min, max] when provided; non-numeric keystrokes are ignored rather
+ * than emitted as NaN.
+ */
+export declare function NumberField({ label, hint, value, onChange, min, max, step, id, className, ...props }: NumberFieldProps): JSX_2.Element;
+
+declare interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
+    label?: ReactNode;
+    hint?: ReactNode;
+    value: number;
+    onChange: (value: number) => void;
+}
+
 export declare function OverlayIconButton({ className, placement, onPointerDown, onWheel, onContextMenu, ...props }: OverlayIconButtonProps): JSX_2.Element;
 
 declare interface OverlayIconButtonProps extends Omit<ComponentProps<typeof Button>, 'variant' | 'iconOnly'> {
@@ -312,6 +360,7 @@ export declare class PanelErrorBoundary extends Component<Props_6, State> {
     render(): string | number | boolean | JSX_2.Element | Iterable<ReactNode> | null | undefined;
 }
 
+/** Skeleton for a panel body containing inputs + an optional submit button. */
 export declare function PanelFormSkeleton({ inputs, showButton, className, ...props }: PanelFormSkeletonProps): JSX_2.Element;
 
 declare interface PanelFormSkeletonProps extends HTMLAttributes<HTMLDivElement> {
@@ -357,24 +406,23 @@ declare interface PickerCardProps extends HTMLAttributes<HTMLElement> {
 }
 
 /**
- * A responsive grid for picker cards.
- * Replaces `<List className="picker-grid picker-grid--elements">`, etc.
+ * Responsive grid for picker cards. Uses `repeat(auto-fill, minmax(minItemWidth, 1fr))`.
  */
-export declare function PickerGrid({ variant, className, ...props }: PickerGridProps): JSX_2.Element;
+export declare function PickerGrid({ minItemWidth, className, style, ...props }: PickerGridProps): JSX_2.Element;
 
 declare interface PickerGridProps extends HTMLAttributes<HTMLUListElement> {
-    variant: PickerGridVariant;
+    /** Minimum width (px) of each cell. The grid auto-fills as many columns as fit. */
+    minItemWidth?: number;
 }
 
-export declare function PickerGridSkeleton({ count, gridClass }: PickerGridSkeletonProps): JSX_2.Element;
+export declare function PickerGridSkeleton({ count, minItemWidth }: PickerGridSkeletonProps): JSX_2.Element;
 
 declare interface PickerGridSkeletonProps {
     count?: number;
-    gridClass: string;
+    /** Minimum width (px) per cell — should match the real grid for layout stability. */
+    minItemWidth?: number;
 }
 
-declare type PickerGridVariant = 'elements' | 'characters' | 'library';
-
 export declare function Pill({ tone, className, ...props }: PillProps): JSX_2.Element;
 
 declare interface PillProps extends HTMLAttributes<HTMLSpanElement> {
@@ -466,12 +514,29 @@ declare interface SkeletonProps extends HTMLAttributes<HTMLElement> {
 
 declare type SkeletonRadius = 'sm' | 'md' | 'pill';
 
+/**
+ * The settings-panel slider pattern: label left, live readout right,
+ * range underneath. Numbers come back as numbers.
+ */
+export declare function Slider({ label, display, value, onChange, className, ...props }: SliderProps): JSX_2.Element;
+
+declare interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> {
+    /** Uppercase header on the left (rendered like a widget label). */
+    label?: ReactNode;
+    /** Right-aligned readout; defaults to the raw value. */
+    display?: ReactNode;
+    value: number;
+    onChange: (value: number) => void;
+}
+
 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">`.
+ * Two- or three-column grid for media + content (+ actions) rows.
+ *
+ * - `media-content` — fixed media column + flexible content column.
+ * - `single` — one column (use as the small-screen fallback).
+ * - `media-content-actions` — auto media + flexible content + auto actions.
  */
 export declare function SplitLayout({ variant, className, ...props }: SplitLayoutProps): JSX_2.Element;
 
@@ -479,7 +544,7 @@ declare interface SplitLayoutProps extends HTMLAttributes<HTMLDivElement> {
     variant: SplitLayoutVariant;
 }
 
-declare type SplitLayoutVariant = 'element' | 'character' | 'user';
+declare type SplitLayoutVariant = 'media-content' | 'single' | 'media-content-actions';
 
 export declare function Stack({ as, size, className, ...props }: StackProps): ReactElement<any, string | JSXElementConstructor<any>>;
 
@@ -494,9 +559,21 @@ declare interface State {
     error: Error | null;
 }
 
-export declare function StoryCardSkeleton(): JSX_2.Element;
+/**
+ * The plain floating surface: --wb-surface background, border, radius,
+ * soft shadow. For overlays that live OUTSIDE a WhiteboardShell —
+ * selection menus, legends, log panes — where FloatingPanel's canvas
+ * coupling would be wrong.
+ */
+export declare function Surface({ as, padding, className, ...props }: SurfaceProps): ReactElement<any, string | JSXElementConstructor<any>>;
 
-export declare function StoryTitle({ as, className, ...props }: TypographyProps): ReactElement<any, string | JSXElementConstructor<any>>;
+declare interface SurfaceProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    padding?: 'none' | 'sm' | 'md';
+}
+
+/** A labeled on/off switch — same API as Checkbox, slider visuals. */
+export declare function Switch({ label, hint, className, ...props }: CheckboxProps): JSX_2.Element;
 
 /**
  * A horizontal wrapping row for chips/tags/pills/small items.
@@ -539,6 +616,32 @@ declare interface TitleRowProps extends HTMLAttributes<HTMLDivElement> {
 
 export declare function TitleSkeleton(props: HTMLAttributes<HTMLDivElement>): JSX_2.Element;
 
+/**
+ * Horizontal sibling of VerticalToolbar — same surface, same rhythm.
+ * The app-chrome bar: title, file chip, navigation, primary action.
+ */
+export declare function Toolbar({ children, end, position, className, ...props }: ToolbarProps): JSX_2.Element;
+
+declare interface ToolbarProps extends HTMLAttributes<HTMLElement> {
+    /** 'top' (fixed, centered) · 'bottom' · 'static' (position it yourself). */
+    position?: 'top' | 'bottom' | 'static';
+    /** Actions pinned to the end of the bar after a divider gap. */
+    end?: ReactNode;
+}
+
+/**
+ * CSS-only tooltip: shows on hover and on keyboard focus, no JS, no
+ * portal. Wraps its child inline.
+ */
+export declare function Tooltip({ label, placement, className, children, ...props }: TooltipProps): JSX_2.Element;
+
+declare interface TooltipProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Bubble content. Keep it to a few words. */
+    label: ReactNode;
+    placement?: 'top' | 'bottom';
+    children: ReactNode;
+}
+
 declare interface TypographyProps extends HTMLAttributes<HTMLElement> {
     as?: ElementType;
 }
@@ -549,14 +652,6 @@ export declare function usePanelRect(initial: {
     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;