entangle-ui 0.8.2 → 0.10.0

package/dist/types/components/feedback/LogView/LogView.types.d.ts

@@ -0,0 +1,333 @@
+import { BaseComponent } from '../../../types/common.js';
+import { LiteralUnion, Prettify } from '../../../types/utilities.js';
+import React from 'react';
+
+/**
+ * Built-in log levels, themed out of the box via CSS recipe variants:
+ * `error` → `accent.error`, `warn` → `accent.warning`, `info` → neutral,
+ * `debug` → `text.muted`.
+ */
+type BuiltInLogLevel = 'debug' | 'info' | 'warn' | 'error';
+/**
+ * Log level. The four {@link BuiltInLogLevel} values are themed automatically;
+ * any other string is accepted as a custom level — supply a
+ * {@link LogLevelDefinition} via `levelConfig` to give it a label, color, and
+ * icon.
+ */
+type LogLevel = LiteralUnion<BuiltInLogLevel>;
+/** Visual density. Affects fixed row height and gutter padding. */
+type LogViewDensity = 'comfortable' | 'compact' | 'dense';
+/** Virtualization mode. `'auto'` enables it once the entry count exceeds the threshold. */
+type LogViewVirtualizationMode = boolean | 'auto';
+/**
+ * Row selection mode.
+ * - `false` — rows are not selectable (default).
+ * - `'single'` — one row at a time.
+ * - `'multiple'` — click selects, Cmd/Ctrl+click toggles, Shift+click extends a range.
+ */
+type LogViewSelectionMode = false | 'single' | 'multiple';
+/**
+ * A single log line.
+ *
+ * `id` is optional but recommended for stable virtualization keys; when
+ * omitted LogView assigns a stable monotonic sequence id on insert. `level`
+ * defaults to `'info'`.
+ */
+interface LogEntry {
+    /** Stable identity used as the React/virtualization key. Auto-assigned when omitted. */
+    id?: string;
+    /** Severity. @default "info" */
+    level?: LogLevel;
+    /** The log message text. */
+    message: string;
+    /** Optional timestamp (epoch ms or `Date`). Rendered when `showTimestamps` is on. */
+    timestamp?: number | Date;
+    /** Optional source / category tag (e.g. a subsystem name). Included in text search. */
+    source?: string;
+    /** Arbitrary structured payload. Not rendered by default; available to `renderEntry`. */
+    meta?: Record<string, unknown>;
+}
+/**
+ * Internal, fully-resolved entry. Every entry the store holds has a guaranteed
+ * string `id` and a `level`; the other fields are passed through from the
+ * source {@link LogEntry}.
+ */
+interface ResolvedLogEntry {
+    id: string;
+    level: LogLevel;
+    message: string;
+    timestamp?: number | Date;
+    source?: string;
+    meta?: Record<string, unknown>;
+}
+/** Visual definition for a level — drives the filter chip and row accent. */
+interface LogLevelDefinition {
+    /** Chip / badge label. @default the capitalized level name */
+    label?: string;
+    /**
+     * Level color. Built-in levels are themed via CSS and ignore this; custom
+     * levels use it (any CSS color, including a `var(--etui-…)` reference).
+     * Falls back to `text.secondary`.
+     */
+    color?: string;
+    /** Icon component for the level. Pass `null` to render no icon. */
+    icon?: React.ComponentType<{
+        size?: 'sm' | 'md' | 'lg' | number;
+    }> | null;
+    /** Sort order of the chip in the level filter (ascending). */
+    order?: number;
+}
+/** Map of level → visual definition. */
+type LogLevelConfig = Partial<Record<LogLevel, LogLevelDefinition>>;
+/** Context passed to a custom `renderEntry` row renderer. */
+interface LogEntryRenderInfo {
+    entry: ResolvedLogEntry;
+    index: number;
+    /** The active (deferred) search query, for custom highlighting. */
+    query: string;
+}
+/**
+ * Imperative handle exposed on the LogView `ref`.
+ *
+ * `append` / `appendMany` / `clear` drive the **uncontrolled** store and are
+ * rAF-batched — high-frequency streaming collapses to one render per frame.
+ * They are no-ops (with a dev warning) when `entries` is controlled.
+ */
+interface LogViewHandle {
+    /** Append a single entry (uncontrolled mode). rAF-batched. */
+    append: (entry: LogEntry) => void;
+    /** Append many entries (uncontrolled mode). rAF-batched. */
+    appendMany: (entries: readonly LogEntry[]) => void;
+    /** Clear all entries (uncontrolled mode) and fire `onClear`. */
+    clear: () => void;
+    /** Scroll the body to the latest entry and re-attach follow. */
+    scrollToBottom: () => void;
+    /** Scroll a specific entry index into view. */
+    scrollToIndex: (index: number) => void;
+    /** Snapshot of the currently stored (resolved) entries. */
+    getEntries: () => readonly ResolvedLogEntry[];
+    /** The root DOM element. */
+    getElement: () => HTMLDivElement | null;
+}
+interface LogViewBaseProps extends Omit<BaseComponent, 'onChange' | 'onSelect' | 'onCopy' | 'ref'> {
+    ref?: React.Ref<LogViewHandle>;
+    /**
+     * Controlled entry list. When provided, the consumer owns the data and the
+     * imperative `append`/`clear` handle methods are inert. When omitted,
+     * LogView is uncontrolled and the handle drives an internal store.
+     */
+    entries?: readonly LogEntry[];
+    /** Initial entries for the uncontrolled store. */
+    defaultEntries?: readonly LogEntry[];
+    /**
+     * Hard cap on stored entries (ring buffer — oldest dropped first). Useful for
+     * long-running consoles. @default undefined (unbounded)
+     */
+    maxEntries?: number;
+    /** Override how a stable id is derived for an entry that omits `id`. */
+    getEntryId?: (entry: LogEntry, index: number) => string;
+    /** Controlled search query. */
+    query?: string;
+    /** Default search query (uncontrolled). */
+    defaultQuery?: string;
+    /** Called when the search query changes. */
+    onQueryChange?: (query: string) => void;
+    /** Whether search is case-sensitive. @default false */
+    caseSensitive?: boolean;
+    /**
+     * Controlled set of *visible* levels. A level absent from this array is
+     * filtered out. When omitted (uncontrolled), all known levels are visible.
+     */
+    levels?: readonly LogLevel[];
+    /** Default visible levels (uncontrolled). */
+    defaultLevels?: readonly LogLevel[];
+    /** Called when the visible-level set changes. */
+    onLevelsChange?: (levels: LogLevel[]) => void;
+    /**
+     * Visual definitions for levels (labels, colors, icons, order). Prefer a
+     * stable reference (module constant or `useMemo`) — an inline object is
+     * re-read on every render and busts the internal filter memoization.
+     */
+    levelConfig?: LogLevelConfig;
+    /**
+     * Explicit ordered list of levels to show as filter chips. Defaults to the
+     * four built-ins plus any keys present in `levelConfig`, ordered by `order`.
+     * Prefer a stable reference for the same reason as `levelConfig`.
+     */
+    levelOrder?: readonly LogLevel[];
+    /** Controlled follow-tail state. */
+    follow?: boolean;
+    /** Default follow-tail state (uncontrolled). @default true */
+    defaultFollow?: boolean;
+    /** Called when follow-tail attaches/detaches. */
+    onFollowChange?: (follow: boolean) => void;
+    /** Soft-wrap long lines (variable-height measured rows) vs. single-line. @default false */
+    wrap?: boolean;
+    /** Visual density. @default "compact" */
+    density?: LogViewDensity;
+    /** Show the per-entry timestamp gutter. @default false */
+    showTimestamps?: boolean;
+    /** Format a timestamp for display. @default HH:mm:ss.SSS */
+    formatTimestamp?: (timestamp: number | Date) => string;
+    /** Show the per-entry source tag when present. @default true */
+    showSource?: boolean;
+    /** Render the default toolbar. @default true */
+    showToolbar?: boolean;
+    /** Render the search field in the default toolbar. @default true */
+    showSearch?: boolean;
+    /** Render the level filter chips in the default toolbar. @default true */
+    showLevelFilter?: boolean;
+    /** Render the clear button in the default toolbar. @default true */
+    showClear?: boolean;
+    /** Render the copy-all button in the default toolbar. @default true */
+    showCopy?: boolean;
+    /** Virtualization mode. @default "auto" */
+    virtualized?: LogViewVirtualizationMode;
+    /** Threshold above which `'auto'` engages. @default 100 */
+    virtualizationThreshold?: number;
+    /** Estimated row height in px (fixed mode / initial wrap estimate). @default per density */
+    estimatedRowHeight?: number;
+    /** Off-screen rows kept mounted. @default 12 */
+    overscan?: number;
+    /**
+     * Row selection mode. With `'multiple'`, click selects a line, Cmd/Ctrl+click
+     * toggles it, and Shift+click extends a range. Selected lines highlight and
+     * can be copied (Cmd/Ctrl+C, or the toolbar copy button); Cmd/Ctrl+A selects
+     * all visible, Escape clears. @default false
+     */
+    selectionMode?: LogViewSelectionMode;
+    /** Controlled set of selected entry ids. */
+    selectedIds?: readonly string[];
+    /** Default selected entry ids (uncontrolled). */
+    defaultSelectedIds?: readonly string[];
+    /** Called when the selection changes. */
+    onSelectionChange?: (selectedIds: string[]) => void;
+    /** Body height (the scroll viewport). @default 320 */
+    height?: number | string;
+    /** Maximum body height. */
+    maxHeight?: number | string;
+    /** Custom row renderer. Receives the resolved entry; replaces the default row body. */
+    renderEntry?: (info: LogEntryRenderInfo) => React.ReactNode;
+    /** Content shown when there are no entries (or none match the filter). */
+    emptyState?: React.ReactNode;
+    /**
+     * Footer content rendered in a thin bar below the body (default composition
+     * only; with custom `children`, compose `LogView.Footer` instead). Use
+     * `useLogViewStats()` inside it for live entry / per-level counts.
+     */
+    footer?: React.ReactNode;
+    /** Fired when the log is cleared (toolbar Clear or `handle.clear`). */
+    onClear?: () => void;
+    /** Fired when an entry row is clicked. */
+    onEntryClick?: (entry: ResolvedLogEntry, index: number) => void;
+    /** Fired after a copy (per-line or copy-all) with the copied text. */
+    onCopy?: (text: string) => void;
+    /**
+     * Props forwarded to the slots of the **default** composition (`toolbar`,
+     * `search`, `levelFilter`, `copy`, `clear`, `body`, `footer`). Each entry is
+     * spread onto its slot, so `className` / `style` merge with the slot's own
+     * styles. Use it to tweak the batteries-included layout without rebuilding it.
+     *
+     * Ignored when you provide your own `children` — then you compose the slots
+     * and pass props directly.
+     */
+    slotProps?: LogViewSlotProps;
+    /**
+     * Override any of the component's built-in UI strings (search placeholder and
+     * labels, action-button labels, the jump-to-bottom button, the new-line
+     * counter, the empty state, the region label) for internationalization.
+     * Defaults are English — see {@link LogViewLabels}. Explicit per-slot props
+     * still win (a slot's `aria-label`, the search `placeholder`, `emptyState`,
+     * the root `aria-label`). Prefer a stable reference (module constant or
+     * `useMemo`).
+     */
+    labels?: Partial<LogViewLabels>;
+    /** Children for compound composition. When omitted, the default layout renders. */
+    children?: React.ReactNode;
+    /** Accessible label for the log region. Shorthand for `labels.regionLabel`. */
+    'aria-label'?: string;
+}
+type LogViewProps = Prettify<LogViewBaseProps>;
+/**
+ * Every user-facing string the component renders, for i18n. Pass a
+ * `Partial<LogViewLabels>` to `labels` to override any subset; the rest fall
+ * back to the English defaults (`DEFAULT_LOG_VIEW_LABELS`).
+ */
+interface LogViewLabels {
+    /** Accessible label for the log region. @default "Log output" */
+    regionLabel: string;
+    /** Search field placeholder. @default "Filter logs…" */
+    searchPlaceholder: string;
+    /** Search field accessible label. @default "Filter logs" */
+    searchLabel: string;
+    /** Level-filter chip group accessible label. @default "Filter by level" */
+    levelFilterLabel: string;
+    /** Clear-all button accessible label. @default "Clear logs" */
+    clearLabel: string;
+    /** Copy-all button accessible label. @default "Copy logs" */
+    copyLabel: string;
+    /** Per-line copy button accessible label. @default "Copy line" */
+    copyLineLabel: string;
+    /** Jump-to-bottom button label (visible text + accessible name). @default "Jump to bottom" */
+    jumpToBottomLabel: string;
+    /**
+     * Renders the count of new lines on the jump-to-bottom button. A function so
+     * locales can handle pluralization and word order. @default (n) => `${n} new`
+     */
+    newLinesLabel: (count: number) => string;
+    /** Empty-state text, used when `emptyState` is not provided. @default "No log entries" */
+    emptyLabel: string;
+}
+interface LogViewToolbarProps extends BaseComponent {
+    children?: React.ReactNode;
+}
+interface LogViewFooterProps extends BaseComponent {
+    children?: React.ReactNode;
+}
+interface LogViewSearchProps extends Omit<BaseComponent, 'children'> {
+    /** Placeholder text. @default "Filter logs…" */
+    placeholder?: string;
+    /** Input size. @default "sm" */
+    size?: 'sm' | 'md' | 'lg';
+}
+type LogViewLevelFilterProps = Omit<BaseComponent, 'children'>;
+interface LogViewClearProps extends Omit<BaseComponent<HTMLButtonElement>, 'children'> {
+    /** Override the button content (defaults to a trash icon). */
+    children?: React.ReactNode;
+    /** Accessible label. @default "Clear logs" */
+    'aria-label'?: string;
+}
+interface LogViewCopyProps extends Omit<BaseComponent<HTMLButtonElement>, 'children'> {
+    /** Override the button content (defaults to a copy icon). */
+    children?: React.ReactNode;
+    /** Accessible label. @default "Copy logs" */
+    'aria-label'?: string;
+}
+type LogViewBodyProps = Omit<BaseComponent, 'children'>;
+/**
+ * Per-slot props for the default composition (see {@link LogViewBaseProps.slotProps}).
+ *
+ * Each key maps to a slot of the batteries-included layout and is typed as that
+ * slot's own props. `children` is omitted for slots whose content `LogView`
+ * owns — the `toolbar` (its children are the search / filter / action buttons)
+ * and the `footer` (its content comes from the `footer` prop). `clear` and
+ * `copy` keep `children` so you can swap their icon while keeping the layout.
+ */
+interface LogViewSlotProps {
+    /** The toolbar container that wraps search, level chips, and the actions. */
+    toolbar?: Omit<LogViewToolbarProps, 'children'>;
+    /** The search input. */
+    search?: LogViewSearchProps;
+    /** The level-filter chip group. */
+    levelFilter?: LogViewLevelFilterProps;
+    /** The copy-all action button (pass `children` to swap its icon). */
+    copy?: LogViewCopyProps;
+    /** The clear action button (pass `children` to swap its icon). */
+    clear?: LogViewClearProps;
+    /** The scrollable log body. */
+    body?: LogViewBodyProps;
+    /** The footer bar (its content still comes from the `footer` prop). */
+    footer?: Omit<LogViewFooterProps, 'children'>;
+}
+
+export type { BuiltInLogLevel, LogEntry, LogEntryRenderInfo, LogLevel, LogLevelConfig, LogLevelDefinition, LogViewBaseProps, LogViewBodyProps, LogViewClearProps, LogViewCopyProps, LogViewDensity, LogViewFooterProps, LogViewHandle, LogViewLabels, LogViewLevelFilterProps, LogViewProps, LogViewSearchProps, LogViewSelectionMode, LogViewSlotProps, LogViewToolbarProps, LogViewVirtualizationMode, ResolvedLogEntry };

package/dist/types/components/feedback/LogView/LogViewBody.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { LogViewBodyProps } from './LogView.types.js';
+
+/**
+ * The virtualized log body. Reads the entry stream from the store, applies the
+ * deferred search + level filter, and renders only the visible window via
+ * `@tanstack/react-virtual` (mirroring `DataTable`). Owns follow-tail behavior
+ * and the floating jump-to-bottom button.
+ */
+declare const LogViewBody: {
+    ({ className, style, testId, ref, ...rest }: LogViewBodyProps): React.ReactElement;
+    displayName: string;
+};
+
+export { LogViewBody };

package/dist/types/components/feedback/LogView/LogViewContext.d.ts

@@ -0,0 +1,9 @@
+import { LogLevelCounts } from './LogViewStore.js';
+
+/** Live stats for the current LogView. Call inside `<LogView>` (e.g. in a footer). */
+declare function useLogViewStats(): {
+    total: number;
+    counts: LogLevelCounts;
+};
+
+export { useLogViewStats };

package/dist/types/components/feedback/LogView/LogViewParts.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { LogViewToolbarProps, LogViewFooterProps, LogViewSearchProps, LogViewLevelFilterProps, LogViewClearProps, LogViewCopyProps } from './LogView.types.js';
+
+/** Toolbar container. Lays out search, level chips, and action buttons. */
+declare const LogViewToolbar: {
+    ({ children, className, style, testId, ref, ...rest }: LogViewToolbarProps): React.ReactElement;
+    displayName: string;
+};
+/** Footer container. A thin bar below the body for status / summary content. */
+declare const LogViewFooter: {
+    ({ children, className, style, testId, ref, ...rest }: LogViewFooterProps): React.ReactElement;
+    displayName: string;
+};
+/** Search field bound to the LogView query state. */
+declare const LogViewSearch: {
+    ({ placeholder, size, className, style, testId, ref, ...rest }: LogViewSearchProps): React.ReactElement;
+    displayName: string;
+};
+/** Multi-toggle level filter chips with live per-level counts. */
+declare const LogViewLevelFilter: {
+    ({ className, style, testId, ref, ...rest }: LogViewLevelFilterProps): React.ReactElement;
+    displayName: string;
+};
+/** Clear-all button. */
+declare const LogViewClear: {
+    ({ children, className, style, testId, "aria-label": ariaLabel, ref, ...rest }: LogViewClearProps): React.ReactElement;
+    displayName: string;
+};
+/** Copy-all-visible button. Copies the currently-filtered lines to the clipboard. */
+declare const LogViewCopy: {
+    ({ children, className, style, testId, "aria-label": ariaLabel, ref, ...rest }: LogViewCopyProps): React.ReactElement;
+    displayName: string;
+};
+
+export { LogViewClear, LogViewCopy, LogViewFooter, LogViewLevelFilter, LogViewSearch, LogViewToolbar };

package/dist/types/components/feedback/LogView/LogViewStore.d.ts

@@ -0,0 +1,4 @@
+/** Per-level totals over the currently stored entries. */
+type LogLevelCounts = Readonly<Record<string, number>>;
+
+export type { LogLevelCounts };

package/dist/types/components/feedback/LogView/logViewLabels.d.ts

@@ -0,0 +1,9 @@
+import { LogViewLabels } from './LogView.types.js';
+
+/**
+ * English defaults for every user-facing string LogView renders. Override any
+ * subset by passing `labels` to `<LogView>`; the rest fall back here.
+ */
+declare const DEFAULT_LOG_VIEW_LABELS: LogViewLabels;
+
+export { DEFAULT_LOG_VIEW_LABELS };

package/dist/types/components/feedback/LogView/logViewUtils.d.ts

@@ -0,0 +1,41 @@
+import { ResolvedLogEntry } from './LogView.types.js';
+
+/** A run of text, flagged as a search match or not. */
+interface HighlightSegment {
+    text: string;
+    match: boolean;
+}
+/**
+ * Split `text` into alternating non-match / match segments for `query`.
+ *
+ * Pure and allocation-light: an empty (or whitespace-only) query returns a
+ * single non-match segment so callers can render uniformly. Matching is
+ * case-insensitive unless `caseSensitive` is set. All occurrences are marked.
+ *
+ * @example
+ * getHighlightSegments('abcABC', 'bc')
+ * // → [{text:'a',match:false},{text:'bc',match:true},
+ * //    {text:'A',match:false},{text:'BC',match:true}]
+ */
+declare function getHighlightSegments(text: string, query: string, caseSensitive?: boolean): HighlightSegment[];
+/**
+ * Default timestamp formatter: `HH:mm:ss.SSS` in local time. Accepts epoch
+ * milliseconds or a `Date`.
+ */
+declare function defaultFormatTimestamp(timestamp: number | Date): string;
+/**
+ * Render one resolved entry to a plain-text line for copy/export. Includes the
+ * timestamp and source when present, mirroring what the row shows.
+ */
+declare function entryToText(entry: ResolvedLogEntry, options?: {
+    showTimestamps?: boolean;
+    formatTimestamp?: (timestamp: number | Date) => string;
+}): string;
+/** Join resolved entries into a copy/export blob. */
+declare function entriesToText(entries: readonly ResolvedLogEntry[], options?: {
+    showTimestamps?: boolean;
+    formatTimestamp?: (timestamp: number | Date) => string;
+}): string;
+
+export { defaultFormatTimestamp, entriesToText, entryToText, getHighlightSegments };
+export type { HighlightSegment };

package/dist/types/components/feedback/ProgressBar/ProgressBar.types.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
 import { Size, BaseComponent } from '../../../types/common.js';
 import { LiteralUnion, Prettify } from '../../../types/utilities.js';
+import React from 'react';
 
 type ProgressBarSize = Size;
 /**
@@ -10,7 +10,7 @@ type ProgressBarSize = Size;
  */
 type ProgressBarColor = LiteralUnion<'primary' | 'success' | 'warning' | 'error'>;
 type ProgressBarLabelPosition = false | 'inline' | 'overlay';
-interface ProgressBarBaseProps extends BaseComponent<HTMLDivElement> {
+interface ProgressBarBaseProps extends BaseComponent {
     /**
      * Current progress value. When `undefined`, the bar is indeterminate
      * (an animated sliding gradient).
@@ -84,7 +84,7 @@ interface ProgressBarBaseProps extends BaseComponent<HTMLDivElement> {
 }
 type ProgressBarProps = Prettify<ProgressBarBaseProps>;
 type CircularProgressSize = 'xs' | Size | 'xl';
-interface CircularProgressBaseProps extends BaseComponent<HTMLDivElement> {
+interface CircularProgressBaseProps extends BaseComponent {
     /** Current value; `undefined` → indeterminate (rotating arc). */
     value?: number;
     /** @default 100 */

package/dist/types/components/feedback/Skeleton/Skeleton.types.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
 import { BaseComponent } from '../../../types/common.js';
 import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 
 /**
  * Visual shape of a skeleton block.
@@ -18,7 +18,7 @@ type SkeletonShape = 'rect' | 'circle' | 'line';
  * - `none`  — static; pick this when many skeletons render at once
  */
 type SkeletonAnimation = 'pulse' | 'wave' | 'none';
-interface SkeletonBaseProps extends BaseComponent<HTMLDivElement> {
+interface SkeletonBaseProps extends BaseComponent {
     /**
      * Shape of the skeleton.
      * @default "rect"
@@ -50,7 +50,7 @@ interface SkeletonBaseProps extends BaseComponent<HTMLDivElement> {
     animation?: SkeletonAnimation;
 }
 type SkeletonProps = Prettify<SkeletonBaseProps>;
-interface SkeletonGroupBaseProps extends BaseComponent<HTMLDivElement> {
+interface SkeletonGroupBaseProps extends BaseComponent {
     /**
      * Number of skeletons to auto-generate. Ignored when `children` is provided.
      */
@@ -78,5 +78,48 @@ interface SkeletonGroupBaseProps extends BaseComponent<HTMLDivElement> {
     children?: React.ReactNode;
 }
 type SkeletonGroupProps = Prettify<SkeletonGroupBaseProps>;
+/**
+ * Pre-built skeleton arrangement.
+ *
+ * - `card`  — circular avatar, a few text lines, and a thumbnail block
+ * - `list`  — vertical rows of avatar + two text lines
+ * - `table` — header row + data rows laid out on a CSS grid
+ * - `grid`  — uniform grid of square blocks (no animation by default)
+ * - `chat`  — alternating left/right message bubbles
+ */
+type SkeletonLayoutVariant = 'card' | 'list' | 'table' | 'grid' | 'chat';
+interface SkeletonLayoutBaseProps extends BaseComponent {
+    /**
+     * Which pre-built arrangement to render.
+     */
+    variant: SkeletonLayoutVariant;
+    /**
+     * Number of repeating units in the layout.
+     *
+     * - `list` — number of rows (default 5)
+     * - `table` — number of data rows excluding the header (default 5)
+     * - `grid` — total number of cells (default 12)
+     * - `chat` — number of message bubbles (default 4)
+     * - `card` — ignored (a card is a single unit)
+     */
+    count?: number;
+    /**
+     * Number of columns. Only meaningful for `grid` and `table` variants.
+     * @default 4
+     */
+    columns?: number;
+    /**
+     * Animation applied to every nested skeleton.
+     * Defaults to `pulse` for most variants and `none` for `grid` — running
+     * dozens of animations at once is more noise than help on dense surfaces.
+     */
+    animation?: SkeletonAnimation;
+    /**
+     * Width of the layout container. Number → px, string → CSS value.
+     * @default "100%"
+     */
+    width?: number | string;
+}
+type SkeletonLayoutProps = Prettify<SkeletonLayoutBaseProps>;
 
-export type { SkeletonAnimation, SkeletonBaseProps, SkeletonGroupBaseProps, SkeletonGroupProps, SkeletonProps, SkeletonShape };
+export type { SkeletonAnimation, SkeletonBaseProps, SkeletonGroupBaseProps, SkeletonGroupProps, SkeletonLayoutBaseProps, SkeletonLayoutProps, SkeletonLayoutVariant, SkeletonProps, SkeletonShape };