@lettuceai/crisp 1.0.0

package/dist/components/ColorPicker.d.ts

@@ -0,0 +1,15 @@
+export interface ColorPickerProps {
+    value: string;
+    onChange: (value: string) => void;
+    /** Quick picks shown above the free-form field. */
+    swatches?: readonly string[];
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+}
+/**
+ * A colour swatch that opens a picker. The custom-colour settings page rolls its own
+ * inputs; this pairs the native colour input (so the OS picker is available) with a hex
+ * field and a preset row, which is how people actually choose.
+ */
+export declare function ColorPicker({ value, onChange, swatches, disabled, id, className }: ColorPickerProps): import("react").JSX.Element;

package/dist/components/Combobox.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from "react";
+export interface ComboboxOption<T extends string = string> {
+    value: T;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    group?: string;
+    disabled?: boolean;
+}
+export interface ComboboxProps<T extends string> {
+    options: readonly ComboboxOption<T>[];
+    value: T | null;
+    onChange: (value: T | null) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    /** Take over filtering — for a remote list like the HuggingFace catalogue. */
+    onSearch?: (query: string) => void;
+    loading?: boolean;
+    emptyMessage?: string;
+    clearable?: boolean;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+}
+/**
+ * A select you can type into. The app has four hand-rolled versions of this
+ * (PersonaSelector, ReferenceSelector, CharacterSelectorSingle, LoraSelector) and a
+ * 5,000-line HuggingFace browser that a native select can't serve.
+ */
+export declare function Combobox<T extends string>({ options, value, onChange, placeholder, searchPlaceholder, onSearch, loading, emptyMessage, clearable, disabled, id, className, }: ComboboxProps<T>): import("react").JSX.Element;

package/dist/components/CommandPalette.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+export interface Command {
+    id: string;
+    label: string;
+    /** Second line — where it goes, or what it does. */
+    description?: string;
+    icon?: ReactNode;
+    group?: string;
+    /** Extra words to match on that aren't in the label. */
+    keywords?: string;
+    shortcut?: string;
+    onRun: () => void;
+}
+export interface CommandPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    commands: readonly Command[];
+    placeholder?: string;
+    /** Take over filtering — for searching messages or characters remotely. */
+    onQueryChange?: (query: string) => void;
+    loading?: boolean;
+    emptyMessage?: string;
+}
+/**
+ * ⌘K. A desktop affordance the app has the data for already — characters, chats,
+ * settings and every navigation target are all searchable, just not from one place.
+ * It never replaces a visible control; it's a shortcut to ones that exist.
+ */
+export declare function CommandPalette({ open, onOpenChange, commands, placeholder, onQueryChange, loading, emptyMessage, }: CommandPaletteProps): import("react").ReactPortal;
+/** Binds ⌘K / Ctrl+K. Ignores the shortcut while a field is focused. */
+export declare function useCommandPalette(): {
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

package/dist/components/Composer.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode } from "react";
+export interface ComposerAttachment {
+    id: string;
+    /** Image data URL, or undefined for non-image files (shown as a chip). */
+    src?: string;
+    name?: string;
+}
+export interface ComposerMic {
+    active: boolean;
+    transcribing?: boolean;
+    elapsedMs: number;
+    analyser: AnalyserNode | null;
+    onStart: () => void;
+    onStop: () => void;
+    onCancel: () => void;
+    disabled?: boolean;
+}
+export interface ComposerProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSend: () => void;
+    /** Shown while `sending`; if absent the button just spins. */
+    onStop?: () => void;
+    /** Empty composer + tap send = let the character continue. */
+    onContinue?: () => void;
+    /** Long-press / right-click on send. */
+    onSendAsSystem?: () => void;
+    onAttach?: () => void;
+    attachments?: ComposerAttachment[];
+    onRemoveAttachment?: (id: string) => void;
+    mic?: ComposerMic;
+    sending?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    /** Enter sends on desktop; on touch, Enter is a newline. */
+    enterSends?: boolean;
+    /** Rendered above the pill — an <Alert>. */
+    notice?: ReactNode;
+    /** Slot inside the pill above the input — author's note, quick snippets. */
+    topSlot?: ReactNode;
+    className?: string;
+}
+export declare function Composer({ value, onChange, onSend, onStop, onContinue, onSendAsSystem, onAttach, attachments, onRemoveAttachment, mic, sending, disabled, placeholder, enterSends, notice, topSlot, className, }: ComposerProps): import("react").JSX.Element;
+/** Live waveform while recording. Same sampling as the app; drawn in tokens. */
+export declare function RecordingWave({ elapsedMs, analyser, frozen }: {
+    elapsedMs: number;
+    analyser: AnalyserNode | null;
+    frozen?: boolean;
+}): import("react").JSX.Element;

package/dist/components/ContextMenu.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export interface ContextMenuProps {
+    /** The menu body — reuse MenuItem / MenuSeparator / MenuLabel. */
+    menu: ReactNode;
+    /** ms to hold before it opens on touch. Default 450. */
+    longPressDelay?: number;
+    /** Fires when the menu opens and closes — use it to mark the target as held. */
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Right-click on desktop, long-press on touch — one component for both, which is what
+ * the app writes by hand at every message and library item. Opens at the pointer and
+ * flips to stay on screen.
+ */
+export declare function ContextMenu({ menu, longPressDelay, onOpenChange, disabled, className, children }: ContextMenuProps): import("react").JSX.Element;

package/dist/components/CopyButton.d.ts

@@ -0,0 +1,13 @@
+import { type ButtonProps } from "./Button";
+export interface CopyButtonProps extends Omit<ButtonProps, "children" | "onClick"> {
+    value: string;
+    /** Omit for an icon-only button. */
+    children?: React.ReactNode;
+    label?: string;
+    copiedLabel?: string;
+}
+/**
+ * Copy with a confirmation that lives on the button itself, so the action doesn't need
+ * a toast. The app writes this by hand wherever it copies a prompt, an error or an id.
+ */
+export declare function CopyButton({ value, children, label, copiedLabel, className, ...rest }: CopyButtonProps): import("react").JSX.Element;

package/dist/components/DatePicker.d.ts

@@ -0,0 +1,23 @@
+export interface CalendarProps {
+    value: Date | null;
+    onChange: (date: Date) => void;
+    min?: Date;
+    max?: Date;
+    /** 0 = Sunday, 1 = Monday. Defaults to the locale's own first day. */
+    weekStartsOn?: 0 | 1;
+    locale?: string;
+    className?: string;
+}
+/** The month grid. Uses Intl for day and month names, so it follows the app's 20 locales. */
+export declare function Calendar({ value, onChange, min, max, weekStartsOn, locale, className }: CalendarProps): import("react").JSX.Element;
+export interface DatePickerProps extends Omit<CalendarProps, "className"> {
+    /** Shown when nothing is chosen. */
+    placeholder?: string;
+    /** Also offer a time field. */
+    withTime?: boolean;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+}
+/** A field that opens a Calendar. The app's DateTimePicker is 323 lines used in one place. */
+export declare function DatePicker({ value, onChange, placeholder, withTime, disabled, id, className, ...calendar }: DatePickerProps): import("react").JSX.Element;

package/dist/components/Dialog.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+export interface DialogProps {
+    open: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    description?: ReactNode;
+    footer?: ReactNode;
+    size?: "sm" | "md" | "lg";
+    /** Hide the corner close button — for confirmations where the footer is the only way out. */
+    dismissible?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+/** Centred modal. Confirmations, short forms, anything that should not feel like a page. */
+export declare function Dialog({ open, onClose, title, description, footer, size, dismissible, className, children }: DialogProps): import("react").ReactPortal;

package/dist/components/Diff.d.ts

@@ -0,0 +1,17 @@
+export interface DiffProps {
+    before: string;
+    after: string;
+    /** Labels for the two sides. */
+    beforeLabel?: string;
+    afterLabel?: string;
+    /** `unified` stacks the changes; `split` shows both sides. Split needs room. */
+    view?: "unified" | "split";
+    /** Collapse runs of unchanged lines longer than this. 0 shows everything. */
+    context?: number;
+    className?: string;
+}
+/**
+ * What changed between two versions. The sync conflict inbox asks people to choose a
+ * side without showing them what differs; this is the missing half.
+ */
+export declare function Diff({ before, after, beforeLabel, afterLabel, view, context, className }: DiffProps): import("react").JSX.Element;

package/dist/components/Dock.d.ts

@@ -0,0 +1,6 @@
+import type { NavProps } from "./nav";
+export interface DockProps<T extends string> extends NavProps<T> {
+    edge?: "top" | "bottom";
+}
+/** A floating pill of destinations. Desktop and tablet; it does not reach the thumb on a phone. */
+export declare function Dock<T extends string>({ items, value, onChange, onCreate, createLabel, edge, className }: DockProps<T>): import("react").JSX.Element;

package/dist/components/DownloadItem.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+export type DownloadStatus = "queued" | "downloading" | "paused" | "verifying" | "done" | "failed";
+export interface DownloadItemProps {
+    name: string;
+    /** Under the name — the repo, the quantisation, the format. */
+    detail?: ReactNode;
+    status: DownloadStatus;
+    /** 0–1. Omit while queued or verifying. */
+    progress?: number;
+    /** Bytes per second. */
+    speed?: number;
+    /** Seconds remaining. */
+    eta?: number;
+    /** Total bytes, for the "x of y" line. */
+    size?: number;
+    error?: string;
+    onPause?: () => void;
+    onResume?: () => void;
+    onCancel?: () => void;
+    onRetry?: () => void;
+    className?: string;
+}
+/**
+ * One download, with everything a person needs to decide whether to wait: how far
+ * along, how fast, how long left, and how to stop. The app has four different
+ * download UIs and none of them shows all four.
+ */
+export declare function DownloadItem({ name, detail, status, progress, speed, eta, size, error, onPause, onResume, onCancel, onRetry, className, }: DownloadItemProps): import("react").JSX.Element;

package/dist/components/Dropzone.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+export interface DropzoneProps {
+    onFiles: (files: File[]) => void;
+    /** An `accept` string, e.g. "image/*" or ".png,.webp". */
+    accept?: string;
+    multiple?: boolean;
+    /** Bytes. Files over this are dropped and reported through `onReject`. */
+    maxSize?: number;
+    onReject?: (files: File[], reason: "size" | "type") => void;
+    disabled?: boolean;
+    /** Replaces the default prompt — a preview, say. */
+    children?: ReactNode;
+    hint?: ReactNode;
+    className?: string;
+}
+/**
+ * Drop, click or paste a file. Avatars, character cards, background images and audio
+ * all get their own picker today; this is the one, and it keeps the keyboard path —
+ * the hidden input is focusable, not `display: none`.
+ */
+export declare function Dropzone({ onFiles, accept, multiple, maxSize, onReject, disabled, children, hint, className, }: DropzoneProps): import("react").JSX.Element;

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+export interface EmptyStateProps {
+    icon?: ReactNode;
+    title: ReactNode;
+    /** Say what would put something here. */
+    description?: ReactNode;
+    action?: ReactNode;
+    /** Compact variant for inside cards and sheets. */
+    size?: "sm" | "md";
+    className?: string;
+}
+/** An empty screen is an invitation to act, not an apology. */
+export declare function EmptyState({ icon, title, description, action, size, className }: EmptyStateProps): import("react").JSX.Element;
+export interface ErrorStateProps {
+    title?: ReactNode;
+    /** What went wrong and, if it can be helped, what to do. Never an apology. */
+    description?: ReactNode;
+    onRetry?: () => void;
+    retryLabel?: string;
+    size?: "sm" | "md";
+    className?: string;
+}
+/** Something failed to load. Says what, and offers the one thing that might fix it. */
+export declare function ErrorState({ title, description, onRetry, retryLabel, size, className }: ErrorStateProps): import("react").JSX.Element;

package/dist/components/Field.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+interface FieldContextValue {
+    id: string;
+    describedBy?: string;
+    invalid: boolean;
+}
+/** Inputs call this to pick up id / aria wiring from the surrounding Field. */
+export declare function useFieldContext(): FieldContextValue | null;
+export interface FieldProps {
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    /** Label and control on one row — for switches and compact selects. */
+    inline?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+export declare function Field({ label, hint, error, required, inline, className, children }: FieldProps): import("react").JSX.Element;
+export {};

package/dist/components/FilterBar.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+export interface FilterOption<T extends string> {
+    value: T;
+    label: string;
+    count?: number;
+    icon?: ReactNode;
+}
+export interface FilterBarProps<T extends string> {
+    options: readonly FilterOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    "aria-label"?: string;
+    className?: string;
+}
+/**
+ * Horizontal filter row. It narrows one list by a facet; the list stays the same
+ * list. When the choice changes what the screen is, that is Tabs, not a filter. Counts sit inside the chip so the row stays one line.
+ * The overflow hint is a mask on the scroller, not a gradient overlay — an overlay
+ * would have to know the parent's background colour, and it never does.
+ */
+export declare function FilterBar<T extends string>({ options, value, onChange, className, ...aria }: FilterBarProps<T>): import("react").JSX.Element;

package/dist/components/Form.d.ts

@@ -0,0 +1,44 @@
+import { type ReactNode } from "react";
+interface FormContextValue<T> {
+    values: T;
+    initial: T;
+    dirty: boolean;
+    submitting: boolean;
+    errors: Partial<Record<keyof T, string>>;
+    set: <K extends keyof T>(key: K, value: T[K]) => void;
+    patch: (values: Partial<T>) => void;
+    reset: () => void;
+}
+export declare function useForm<T extends Record<string, unknown>>(): FormContextValue<T>;
+export interface FormProps<T extends Record<string, unknown>> {
+    initial: T;
+    onSubmit: (values: T) => void | Promise<void>;
+    /** Return a message per invalid field. Runs on submit. */
+    validate?: (values: T) => Partial<Record<keyof T, string>>;
+    /** Warn before the tab closes while there are unsaved edits. */
+    guardUnload?: boolean;
+    children: ReactNode | ((form: FormContextValue<T>) => ReactNode);
+    className?: string;
+}
+/**
+ * Owns a form's values, dirty state and validation, so pages stop tracking them by
+ * hand — the app's editors run to thousands of lines each and the top bar carries a
+ * `wasUnsavedRef` of its own.
+ */
+export declare function Form<T extends Record<string, unknown>>({ initial, onSubmit, validate, guardUnload, children, className, }: FormProps<T>): import("react").JSX.Element;
+export interface FormActionsProps {
+    submitLabel?: string;
+    cancelLabel?: string;
+    onCancel?: () => void;
+    /** Keep the bar visible at the bottom of a long form. */
+    sticky?: boolean;
+    children?: ReactNode;
+}
+/** Save / cancel, disabled until something actually changed. */
+export declare function FormActions({ submitLabel, cancelLabel, onCancel, sticky, children }: FormActionsProps): import("react").JSX.Element;
+/**
+ * Ask before leaving a dirty form. Wire it to your router's navigation guard:
+ * `const leave = useUnsavedGuard(dirty); if (await leave()) navigate(to);`
+ */
+export declare function useUnsavedGuard(dirty: boolean): () => Promise<boolean>;
+export {};

package/dist/components/Highlight.d.ts

@@ -0,0 +1,14 @@
+export interface HighlightProps {
+    children: string;
+    /** The search term(s) to mark. Empty renders the text untouched. */
+    query: string;
+    /** Treat the query as separate words rather than one phrase. */
+    words?: boolean;
+    className?: string;
+    markClassName?: string;
+}
+/**
+ * Marks the matching part of a search result. Uses `<mark>`, so a screen reader
+ * announces the match rather than it being colour-only — which is what a span would be.
+ */
+export declare function Highlight({ children, query, words, className, markClassName }: HighlightProps): import("react").JSX.Element;

package/dist/components/HoverCard.d.ts

@@ -0,0 +1,15 @@
+import { type ReactElement, type ReactNode } from "react";
+export interface HoverCardProps {
+    content: ReactNode;
+    /** ms before it appears / disappears. */
+    openDelay?: number;
+    closeDelay?: number;
+    side?: "top" | "bottom" | "left" | "right";
+    children: ReactElement<Record<string, unknown>>;
+}
+/**
+ * A preview on hover — a character card under a mention, model details under a name.
+ * Pointer-only by design: it never opens on touch, so it must never hold anything you
+ * can't reach another way.
+ */
+export declare function HoverCard({ content, openDelay, closeDelay, side, children }: HoverCardProps): import("react").JSX.Element;

package/dist/components/Icon.d.ts

@@ -0,0 +1,37 @@
+import { type ComponentType } from "react";
+/**
+ * Four icon sizes, and only four. The app uses fifteen — from 9px to 36px — in two
+ * different notations (`size={14}` and `className="h-4 w-4"`). Going through this
+ * component makes that impossible to drift back into.
+ */
+export declare const ICON_SIZE: {
+    /** 14 — inside dense controls, badges, chips. */
+    readonly sm: 14;
+    /** 16 — buttons, list rows, inline with body text. */
+    readonly md: 16;
+    /** 18 — icon buttons, toolbars. */
+    readonly lg: 18;
+    /** 22 — navigation, empty states. */
+    readonly xl: 22;
+};
+export type IconSize = keyof typeof ICON_SIZE;
+export interface IconProps {
+    /** A lucide icon component. */
+    as: ComponentType<{
+        size?: number;
+        strokeWidth?: number;
+        className?: string;
+        "aria-hidden"?: boolean;
+    }>;
+    size?: IconSize;
+    /** Give it a label only when the icon is the sole carrier of meaning. */
+    label?: string;
+    strokeWidth?: number;
+    className?: string;
+}
+export declare function Icon({ as: Component, size, label, strokeWidth, className }: IconProps): import("react").ReactElement<{
+    size?: number;
+    strokeWidth?: number;
+    className?: string;
+    "aria-hidden"?: boolean;
+}, string | import("react").JSXElementConstructor<any>>;

package/dist/components/IconButton.d.ts

@@ -0,0 +1,14 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export type IconButtonVariant = "ghost" | "secondary" | "tonal";
+export type IconButtonSize = "sm" | "md" | "lg";
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Required: icon buttons have no visible text. */
+    label: string;
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    /** Round for standalone (close, back); square inside toolbars. */
+    shape?: "square" | "round";
+    active?: boolean;
+    children: ReactNode;
+}
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/ImageViewer.d.ts

@@ -0,0 +1,16 @@
+export interface ViewerImage {
+    src: string;
+    alt: string;
+    caption?: string;
+}
+export interface ImageViewerProps {
+    images: readonly ViewerImage[];
+    /** Index to show; null closes the viewer. */
+    index: number | null;
+    onIndexChange: (index: number | null) => void;
+}
+/**
+ * Full-screen image inspection for the image library and chat attachments. Arrow keys
+ * page, Escape closes, +/- zoom, and a zoomed image pans by drag.
+ */
+export declare function ImageViewer({ images, index, onIndexChange }: ImageViewerProps): import("react").ReactPortal;

package/dist/components/InfiniteScroll.d.ts

@@ -0,0 +1,14 @@
+export interface InfiniteScrollProps {
+    /** Called when the sentinel comes near the viewport. Guard against re-entry yourself. */
+    onLoadMore: () => void;
+    /** Stop observing — nothing left, or a request is in flight. */
+    disabled?: boolean;
+    loading?: boolean;
+    /** Shown once there is nothing more to fetch. */
+    endMessage?: string;
+    /** How far ahead of the viewport to trigger. Default 600px. */
+    rootMargin?: string;
+    className?: string;
+}
+/** Sentinel for "load the next page". Pair with VirtualList for very long lists. */
+export declare function InfiniteScroll({ onLoadMore, disabled, loading, endMessage, rootMargin, className, }: InfiniteScrollProps): import("react").JSX.Element;

package/dist/components/Input.d.ts

@@ -0,0 +1,14 @@
+import { type InputHTMLAttributes, type ReactNode, type TextareaHTMLAttributes } from "react";
+export declare const inputSurface: string;
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    leading?: ReactNode;
+    trailing?: ReactNode;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Grow with the text instead of scrolling inside a fixed box. `rows` is the minimum. */
+    autoGrow?: boolean;
+    /** With `autoGrow`, stop growing here and scroll. Default 12. */
+    maxRows?: number;
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Kbd.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+export declare function Kbd({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/List.d.ts

@@ -0,0 +1,25 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type HTMLMotionProps } from "framer-motion";
+export interface ListGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Small tracked heading above the group — the app's section-label style, kept to this one role. */
+    label?: ReactNode;
+}
+export declare function ListGroup({ label, className, children, ...rest }: ListGroupProps): import("react").JSX.Element;
+type Tone = "neutral" | "accent" | "danger" | "warning" | "info" | "secondary";
+interface RowContentProps {
+    icon?: ReactNode;
+    tone?: Tone;
+    title: ReactNode;
+    description?: ReactNode;
+    trailing?: ReactNode;
+    chevron?: boolean;
+}
+/** Static row (shows a value, hosts a switch, etc.). */
+export interface ListRowProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">, RowContentProps {
+}
+export declare function ListRow({ icon, tone, title, description, trailing, chevron, className, ...rest }: ListRowProps): import("react").JSX.Element;
+/** Navigational / action row. Chevron on by default. */
+export interface ListRowButtonProps extends Omit<HTMLMotionProps<"button">, "title">, RowContentProps {
+}
+export declare const ListRowButton: import("react").ForwardRefExoticComponent<Omit<ListRowButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/Masonry.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export interface MasonryProps {
+    children: ReactNode;
+    /** Smallest acceptable column width; the count follows the container. */
+    minColumnWidth?: number;
+    /** Hard cap on columns. */
+    maxColumns?: number;
+    gap?: number;
+    className?: string;
+}
+/**
+ * A column layout for items of uneven height — the image library, where a square grid
+ * crops every portrait. Balances by placing each item in the shortest column, which
+ * keeps DOM order per column and so keeps tab order sane.
+ */
+export declare function Masonry({ children, minColumnWidth, maxColumns, gap, className }: MasonryProps): import("react").JSX.Element;

package/dist/components/MediaCard.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+import { type HTMLMotionProps } from "framer-motion";
+export type MediaCardTone = "accent" | "info" | "warning" | "secondary" | "neutral";
+export interface MediaCardProps extends Omit<HTMLMotionProps<"button">, "title"> {
+    title: string;
+    description?: ReactNode;
+    image?: string | null;
+    /** What kind of thing this is — a dot plus a word, only where it disambiguates. */
+    kind?: string;
+    tone?: MediaCardTone;
+    /** Small pill next to the title (a persona's nickname, an entry count). */
+    tag?: ReactNode;
+    /** Bottom-right corner slot — a count, a duration. */
+    meta?: ReactNode;
+    selected?: boolean;
+}
+/**
+ * The poster card: a character, persona or lorebook at a glance.
+ * Full-bleed art, one scrim behind the text only, title and one line of description.
+ */
+export declare const MediaCard: import("react").ForwardRefExoticComponent<Omit<MediaCardProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/** Matches MediaCard's aspect and radius exactly, so the grid never reflows on load. */
+export declare function MediaCardSkeleton(): import("react").JSX.Element;

package/dist/components/MediaTile.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLMotionProps } from "framer-motion";
+export interface MediaTileProps extends Omit<HTMLMotionProps<"button">, "title" | "variants"> {
+    src: string;
+    /** Describes the image for screen readers; also the fallback text. */
+    alt: string;
+    /** Badge in the corner — "Avatar", "Background". Omit when it isn't useful. */
+    kind?: string;
+    /** Number of variants stacked under this one. */
+    variantCount?: number;
+    selected?: boolean;
+    aspect?: "square" | "portrait";
+}
+/**
+ * A square image in a grid. Deliberately bare: on a touch screen there is no hover,
+ * so metadata that only appears on hover is metadata nobody reads. Size, dimensions
+ * and format belong in the detail sheet this tile opens.
+ */
+export declare const MediaTile: import("react").ForwardRefExoticComponent<Omit<MediaTileProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare function MediaTileSkeleton({ aspect }: {
+    aspect?: "square" | "portrait";
+}): import("react").JSX.Element;