@kb-labs/studio-ui-kit 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,2249 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import { spacing } from '@kb-labs/studio-ui-core';
+import { TextProps } from 'antd/es/typography/Text';
+import { ParagraphProps } from 'antd/es/typography/Paragraph';
+import { LinkProps } from 'antd/es/typography/Link';
+import { SpaceProps, Space, RowProps, ColProps, DividerProps, BadgeProps, ButtonProps, CardProps, TagProps, AvatarProps, Avatar, GlobalToken, theme, StatisticProps, Statistic, ProgressProps, DescriptionsProps, Descriptions, TimelineProps, Timeline, TreeProps, Tree, ListProps, List, InputProps, Input, SelectProps, FormProps, FormItemProps, Form, SwitchProps, DatePickerProps, TimePickerProps, DatePicker, InputNumberProps, RadioProps, RadioGroupProps, UploadProps, Upload, SliderSingleProps, DropdownProps, Dropdown, SegmentedProps, StepsProps, MenuProps, Skeleton, SpinProps, ResultProps, MessageArgsProps, DrawerProps, PopconfirmProps, PopoverProps } from 'antd';
+import { ColumnType } from 'antd/es/table';
+import { ExpandableConfig } from 'antd/es/table/interface';
+import { LineConfig, ColumnConfig, AreaConfig, PieConfig, BarConfig } from '@ant-design/charts';
+import * as antd_es_form_Form from 'antd/es/form/Form';
+import { Dayjs } from 'dayjs';
+import * as antd_es_message_interface from 'antd/es/message/interface';
+import * as antd_es_notification_interface from 'antd/es/notification/interface';
+import * as antd_es_modal_confirm from 'antd/es/modal/confirm';
+
+type UITextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl';
+type UITextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
+type UITextColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+interface UITextProps {
+    /** Text content */
+    children: React$1.ReactNode;
+    /** Typography size from design tokens */
+    size?: UITextSize;
+    /** Font weight from design tokens */
+    weight?: UITextWeight;
+    /** Semantic color using Ant Design tokens */
+    color?: UITextColor;
+    /** HTML element to render */
+    as?: 'span' | 'p' | 'div' | 'label' | 'pre';
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles (use sparingly) */
+    style?: React$1.CSSProperties;
+}
+/**
+ * UIText component with design system tokens
+ *
+ * @example
+ * ```tsx
+ * <UIText size="sm" color="secondary">Label text</UIText>
+ * <UIText size="2xl" weight="bold">Heading</UIText>
+ * ```
+ */
+declare function UIText({ children, size, weight, color, as: Component, className, style: customStyle, }: UITextProps): react_jsx_runtime.JSX.Element;
+
+type UIBoxSpacingValue = keyof typeof spacing;
+interface UIBoxProps {
+    /** Box content */
+    children: React$1.ReactNode;
+    /** Padding from design tokens */
+    p?: UIBoxSpacingValue;
+    /** Padding top */
+    pt?: UIBoxSpacingValue;
+    /** Padding right */
+    pr?: UIBoxSpacingValue;
+    /** Padding bottom */
+    pb?: UIBoxSpacingValue;
+    /** Padding left */
+    pl?: UIBoxSpacingValue;
+    /** Margin from design tokens */
+    m?: UIBoxSpacingValue;
+    /** Margin top */
+    mt?: UIBoxSpacingValue;
+    /** Margin right */
+    mr?: UIBoxSpacingValue;
+    /** Margin bottom */
+    mb?: UIBoxSpacingValue;
+    /** Margin left */
+    ml?: UIBoxSpacingValue;
+    /** HTML element to render */
+    as?: keyof JSX.IntrinsicElements;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles (use sparingly) */
+    style?: React$1.CSSProperties;
+}
+/**
+ * Box component with spacing tokens
+ *
+ * @example
+ * ```tsx
+ * <Box p={4} mb={2}>Content</Box>
+ * <Box pt={2} pb={3}>Asymmetric padding</Box>
+ * ```
+ */
+declare function UIBox({ children, p, pt, pr, pb, pl, m, mt, mr, mb, ml, as: Component, className, style: customStyle, }: UIBoxProps): react_jsx_runtime.JSX.Element;
+
+type UIFlexSpacingValue = UIBoxSpacingValue;
+interface UIFlexProps {
+    /** Flex content */
+    children: React$1.ReactNode;
+    /** Flex direction */
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    /** Justify content */
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+    /** Align items */
+    align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+    /** Gap from design tokens */
+    gap?: UIFlexSpacingValue;
+    /** Wrap behavior */
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    /** HTML element to render */
+    as?: keyof JSX.IntrinsicElements;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles */
+    style?: React$1.CSSProperties;
+}
+/**
+ * Flex layout component
+ *
+ * @example
+ * ```tsx
+ * <Flex direction="row" gap={2} align="center">
+ *   <Text>Item 1</Text>
+ *   <Text>Item 2</Text>
+ * </Flex>
+ * ```
+ */
+declare function UIFlex({ children, direction, justify, align, gap, wrap, as: Component, className, style: customStyle, }: UIFlexProps): react_jsx_runtime.JSX.Element;
+
+interface UITypographyTextProps extends TextProps {
+}
+interface UITypographyParagraphProps extends ParagraphProps {
+}
+interface UITypographyLinkProps extends LinkProps {
+}
+declare function UITypographyText(props: UITypographyTextProps): react_jsx_runtime.JSX.Element;
+declare function UITypographyParagraph(props: UITypographyParagraphProps): react_jsx_runtime.JSX.Element;
+declare function UITypographyLink(props: UITypographyLinkProps): react_jsx_runtime.JSX.Element;
+
+type UIStackDirection = 'vertical' | 'horizontal';
+type UIStackSpacing = UIBoxSpacingValue;
+type UIStackAlign = 'start' | 'end' | 'center' | 'stretch';
+interface UIStackProps {
+    /** Stack direction */
+    direction?: UIStackDirection;
+    /** Spacing between items (from design tokens) */
+    spacing?: UIStackSpacing;
+    /** Align items */
+    align?: UIStackAlign;
+    /** Stack content */
+    children: React$1.ReactNode;
+    /** HTML element to render */
+    as?: keyof JSX.IntrinsicElements;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles */
+    style?: React$1.CSSProperties;
+}
+/**
+ * UIStack - Consistent spacing layout
+ *
+ * @example
+ * ```tsx
+ * <UIStack direction="vertical" spacing={4}>
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ *   <Card>Item 3</Card>
+ * </UIStack>
+ *
+ * <UIStack direction="horizontal" spacing={2} align="center">
+ *   <Button>Cancel</Button>
+ *   <Button>Submit</Button>
+ * </UIStack>
+ * ```
+ */
+declare function UIStack({ direction, spacing, align, children, as, className, style, }: UIStackProps): react_jsx_runtime.JSX.Element;
+
+interface UISpaceProps extends SpaceProps {
+}
+declare function UISpace(props: UISpaceProps): react_jsx_runtime.JSX.Element;
+declare function UISpaceCompact(props: React$1.ComponentProps<typeof Space.Compact>): react_jsx_runtime.JSX.Element;
+
+interface UIRowProps extends RowProps {
+}
+interface UIColProps extends ColProps {
+}
+declare function UIRow(props: UIRowProps): react_jsx_runtime.JSX.Element;
+declare function UICol(props: UIColProps): react_jsx_runtime.JSX.Element;
+
+interface UIDividerProps extends DividerProps {
+}
+declare function UIDivider(props: UIDividerProps): react_jsx_runtime.JSX.Element;
+
+type UIBadgeVariant = 'success' | 'warning' | 'error' | 'info' | 'default';
+interface UIBadgeProps extends Omit<BadgeProps, 'status' | 'color'> {
+    /** Semantic variant */
+    variant?: UIBadgeVariant;
+    /** Badge text */
+    children?: React$1.ReactNode;
+}
+/**
+ * Badge component with semantic colors
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="success">Active</Badge>
+ * <Badge variant="error">Failed</Badge>
+ * ```
+ */
+declare function UIBadge({ variant, children, ...props }: UIBadgeProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * UIButton component - Action button with semantic variants
+ *
+ * Wraps Ant Design Button with consistent styling and proper SVG icon theming.
+ * NO hardcoded colors, uses Ant Design theme tokens + CSS variables.
+ *
+ * IMPORTANT: This component ensures all SVG icons (lucide-react, etc.)
+ * inherit colors correctly in both light and dark themes through CSS.
+ */
+
+type UIButtonVariant = 'primary' | 'default' | 'dashed' | 'text' | 'link';
+interface UIButtonProps extends Omit<ButtonProps, 'type' | 'variant'> {
+    /** Button variant (maps to Ant Design 'type' prop) */
+    variant?: UIButtonVariant;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * UIButton - Action button with proper icon theming
+ *
+ * @example
+ * ```tsx
+ * import { X, Check } from 'lucide-react';
+ *
+ * <UIButton variant="primary">Submit</UIButton>
+ * <UIButton variant="default" icon={<Check />}>Confirm</UIButton>
+ * <UIButton variant="text" danger icon={<X />}>Delete</UIButton>
+ * <UIButton variant="text" icon={<X />} /> // Icon-only close button
+ * ```
+ */
+declare const UIButton: React$1.ForwardRefExoticComponent<UIButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+type UICardVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+interface UICardProps extends Omit<CardProps, 'title' | 'bordered'> {
+    /** Card title */
+    title?: React$1.ReactNode;
+    /** Subtitle (below title) */
+    subtitle?: string;
+    /** Extra content (top-right corner) */
+    extra?: React$1.ReactNode;
+    /** Footer content */
+    footer?: React$1.ReactNode;
+    /** Card content */
+    children: React$1.ReactNode;
+    /** Card size */
+    size?: 'small' | 'default';
+    /** Show border — false maps to variant="borderless" */
+    bordered?: boolean;
+    /** Hoverable effect */
+    hoverable?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Status variant — adds colored top border + tinted background */
+    status?: UICardVariant;
+}
+/**
+ * UICard - Container with optional header/footer
+ *
+ * @example
+ * ```tsx
+ * <UICard title="User Profile" subtitle="Last updated today">
+ *   <p>Card content</p>
+ * </UICard>
+ *
+ * <UICard
+ *   title="Analytics"
+ *   extra={<Button>View All</Button>}
+ *   footer={<p>Last 7 days</p>}
+ * >
+ *   <MetricChart />
+ * </UICard>
+ * ```
+ */
+declare function UICard({ title, subtitle, extra, footer, children, size, bordered, hoverable, loading, status, ...rest }: UICardProps): react_jsx_runtime.JSX.Element;
+
+type UITagVariant = 'success' | 'warning' | 'error' | 'info' | 'default' | 'neutral';
+interface UITagProps extends Omit<TagProps, 'color'> {
+    /** Semantic variant */
+    variant?: UITagVariant;
+    /** Direct color override (Ant Design color name or hex) */
+    color?: string;
+    /** Tag content */
+    children: React$1.ReactNode;
+    /** Closable tag */
+    closable?: boolean;
+    /** Close handler */
+    onClose?: () => void;
+    /** Icon element */
+    icon?: React$1.ReactNode;
+}
+/**
+ * UITag - Label or category indicator
+ *
+ * @example
+ * ```tsx
+ * <UITag variant="success">Active</UITag>
+ * <UITag variant="warning" closable onClose={() => {}}>Pending</UITag>
+ * <UITag variant="error">Failed</UITag>
+ * <UITag variant="info" icon={<InfoIcon />}>Info</UITag>
+ * ```
+ */
+declare function UITag({ variant, color, children, closable, onClose, icon, ...rest }: UITagProps): react_jsx_runtime.JSX.Element;
+
+type UITitleLevel = 1 | 2 | 3 | 4 | 5;
+interface UITitleProps {
+    /** Title level (h1-h5) */
+    level?: UITitleLevel;
+    /** Title content */
+    children: React$1.ReactNode;
+    /** Optional subtitle */
+    subtitle?: string;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles */
+    style?: React$1.CSSProperties;
+}
+/**
+ * UITitle - Page or section title
+ *
+ * @example
+ * ```tsx
+ * <UITitle level={1}>Dashboard</UITitle>
+ * <UITitle level={2} subtitle="Manage your settings">Settings</UITitle>
+ * <UITitle level={3}>Section Title</UITitle>
+ * ```
+ */
+declare function UITitle({ level, children, subtitle, className, style, }: UITitleProps): react_jsx_runtime.JSX.Element;
+
+type UIIconSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl';
+type UIIconColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'inherit';
+interface UIIconProps {
+    /** Icon component or icon name (e.g., 'HomeOutlined') */
+    icon?: React$1.ReactNode | string;
+    /** Icon name (alternative to icon prop) */
+    name?: string;
+    /** Icon size */
+    size?: UIIconSize;
+    /** Icon color */
+    color?: UIIconColor;
+    /** Spin animation */
+    spin?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles */
+    style?: React$1.CSSProperties;
+}
+/**
+ * Icon resolver registry — call registerIconRenderer() once at app startup
+ * to wire up the icon lookup (e.g. from @/components/ui/icons renderIcon).
+ */
+type IconRenderer = (name: string) => React$1.ReactNode | null;
+declare function registerIconRenderer(renderer: IconRenderer): void;
+/**
+ * UIIcon - Icon wrapper with CSS-based theming
+ *
+ * @example
+ * ```tsx
+ * import { CheckCircleOutlined } from '@ant-design/icons';
+ * import { Check } from 'lucide-react';
+ *
+ * // Ant Design icon
+ * <UIIcon icon={<CheckCircleOutlined />} color="success" />
+ *
+ * // lucide-react icon
+ * <UIIcon icon={<Check />} color="success" size="lg" />
+ *
+ * // Using icon name (from AVAILABLE_ICONS)
+ * <UIIcon name="HomeOutlined" size="lg" />
+ * <UIIcon icon="SettingOutlined" color="primary" />
+ *
+ * <UIIcon icon={<LoadingOutlined />} spin />
+ *
+ * <UIIcon
+ *   name="SettingOutlined"
+ *   size="lg"
+ *   onClick={handleSettings}
+ * />
+ * ```
+ */
+declare function UIIcon({ icon, name, size, color, spin, onClick, className, style: customStyle, }: UIIconProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * Icon helper for common use cases
+ */
+declare const UIIconButton: ({ icon, name, onClick, size, color, ...props }: UIIconProps) => react_jsx_runtime.JSX.Element;
+
+interface UIAvatarProps extends AvatarProps {
+}
+declare function UIAvatar(props: UIAvatarProps): react_jsx_runtime.JSX.Element;
+declare function UIAvatarGroup(props: React$1.ComponentProps<typeof Avatar.Group>): react_jsx_runtime.JSX.Element;
+
+/**
+ * useUITheme - Access design tokens from the current theme
+ *
+ * Wraps antd's theme.useToken() to decouple app from antd internals.
+ *
+ * @example
+ * ```tsx
+ * import { useUITheme } from '@kb-labs/studio-ui-kit';
+ *
+ * function MyComponent() {
+ *   const { token } = useUITheme();
+ *   return <div style={{ color: token.colorPrimary }}>Themed text</div>;
+ * }
+ * ```
+ */
+
+interface UIThemeResult {
+    token: GlobalToken;
+    hashId: string;
+    theme: ReturnType<typeof theme.useToken>['theme'];
+}
+declare function useUITheme(): UIThemeResult;
+
+interface UIShimmerTextProps {
+    /** Text to display with shimmer effect */
+    children: React$1.ReactNode;
+    /**
+     * Base text color (the "dim" parts of the gradient).
+     * Defaults to current text color via CSS variable.
+     * @default 'var(--text-secondary, #6B7280)'
+     */
+    color?: string;
+    /**
+     * Highlight color that sweeps across.
+     * @default 'var(--text-primary, #111827)'
+     */
+    highlight?: string;
+    /**
+     * Animation duration.
+     * @default '2s'
+     */
+    duration?: string;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles */
+    style?: React$1.CSSProperties;
+}
+/**
+ * UIShimmerText - Text with animated shimmer sweep
+ *
+ * @example
+ * // Basic
+ * <UIShimmerText>Initializing plugins and widgets</UIShimmerText>
+ *
+ * // Custom colors
+ * <UIShimmerText highlight="#6366f1" color="#c7d2fe">
+ *   Loading workspace...
+ * </UIShimmerText>
+ *
+ * // Faster sweep
+ * <UIShimmerText duration="1.2s">Processing...</UIShimmerText>
+ */
+declare function UIShimmerText({ children, color, highlight, duration, className, style, }: UIShimmerTextProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MetricCard component - Display metric with trend
+ *
+ * Professional UI component using design tokens.
+ * NO inline styles, NO hardcoded colors.
+ */
+interface UIMetricCardProps {
+    /** Metric label */
+    label: string;
+    /** Metric value */
+    value: string | number;
+    /** Trend direction */
+    trend?: 'up' | 'down' | 'neutral';
+    /** Change delta (percentage or absolute) */
+    delta?: number;
+    /** Value unit (e.g., '%', 'ms', '$') */
+    unit?: string;
+    /** Card size */
+    size?: 'small' | 'default';
+    /** Show/hide delta */
+    showDelta?: boolean;
+    /** Loading state */
+    loading?: boolean;
+}
+/**
+ * MetricCard - Display single metric with optional trend indicator
+ *
+ * Uses Ant Design tokens for all colors.
+ *
+ * @example
+ * ```tsx
+ * <MetricCard
+ *   label="Active Users"
+ *   value={1234}
+ *   trend="up"
+ *   delta={15.3}
+ *   unit="users"
+ * />
+ * ```
+ */
+declare function UIMetricCard({ label, value, trend, delta, unit, size, showDelta, loading, }: UIMetricCardProps): react_jsx_runtime.JSX.Element;
+
+interface UITableColumn<T = any> extends ColumnType<T> {
+    /** Column key */
+    key: string;
+    /** Column title */
+    title: string;
+    /** Data index (object key) */
+    dataIndex?: string;
+    /** Custom render function */
+    render?: (value: any, record: T, index: number) => React$1.ReactNode;
+    /** Column width */
+    width?: number | string;
+    /** Sortable column */
+    sorter?: boolean | ((a: T, b: T) => number);
+    /** Filterable column */
+    filters?: {
+        text: string;
+        value: any;
+    }[];
+    /** Default filter value */
+    defaultFilteredValue?: any[];
+    /** Custom filter function */
+    onFilter?: (value: any, record: T) => boolean;
+    /** Fixed column */
+    fixed?: 'left' | 'right';
+    /** Ellipsis text */
+    ellipsis?: boolean;
+}
+interface UITableProps<T = any> {
+    /** Table columns */
+    columns: UITableColumn<T>[];
+    /** Table data */
+    dataSource: T[];
+    /** Row key field */
+    rowKey?: string | ((record: T) => string);
+    /** Loading state */
+    loading?: boolean;
+    /** Show pagination */
+    pagination?: false | {
+        pageSize?: number;
+        current?: number;
+        total?: number;
+    };
+    /** Row selection */
+    rowSelection?: {
+        selectedRowKeys?: React$1.Key[];
+        onChange?: (selectedRowKeys: React$1.Key[], selectedRows: T[]) => void;
+    };
+    /** Row click handler */
+    onRow?: (record: T) => {
+        onClick?: () => void;
+        onDoubleClick?: () => void;
+    };
+    /** Table size */
+    size?: 'small' | 'middle' | 'large';
+    /** Show border */
+    bordered?: boolean;
+    /** Expandable row config */
+    expandable?: ExpandableConfig<T>;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles */
+    style?: React$1.CSSProperties;
+    /** Scroll config */
+    scroll?: {
+        x?: number | string | true;
+        y?: number | string;
+    };
+}
+/**
+ * UITable - Data table
+ *
+ * @example
+ * ```tsx
+ * <UITable
+ *   columns={[
+ *     { key: 'name', title: 'Name', dataIndex: 'name', sorter: true },
+ *     { key: 'age', title: 'Age', dataIndex: 'age', width: 100 },
+ *     { key: 'status', title: 'Status', dataIndex: 'status',
+ *       render: (status) => <UIBadge variant={status}>{status}</UIBadge>
+ *     },
+ *   ]}
+ *   dataSource={data}
+ *   rowKey="id"
+ *   loading={isLoading}
+ * />
+ *
+ * <UITable
+ *   columns={columns}
+ *   dataSource={workflows}
+ *   rowKey="workflowId"
+ *   rowSelection={{
+ *     selectedRowKeys,
+ *     onChange: setSelectedRowKeys,
+ *   }}
+ *   onRow={(record) => ({
+ *     onClick: () => handleRowClick(record),
+ *   })}
+ * />
+ * ```
+ */
+declare function UITable<T extends Record<string, any> = any>({ columns, dataSource, rowKey, loading, pagination, rowSelection, onRow, size, bordered, expandable, className, style, scroll, }: UITableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface UILineChartProps extends Omit<LineConfig, 'theme'> {
+    /**
+     * Custom colors to override theme colors
+     * If not provided, automatic color palette will be used
+     */
+    colors?: string[];
+    /**
+     * Disable automatic color mapping
+     * Set to true if you want to handle colors manually via style.fill
+     */
+    disableAutoColors?: boolean;
+}
+/**
+ * UILineChart - Line chart with automatic theming and color mapping
+ *
+ * Wrapper around @ant-design/charts Line component that uses theme tokens
+ * for automatic light/dark mode support and automatic color mapping.
+ *
+ * @example
+ * ```tsx
+ * // Automatic color mapping (recommended)
+ * <UILineChart
+ *   data={data}
+ *   xField="date"
+ *   yField="value"
+ *   colorField="category"
+ * />
+ *
+ * // Custom colors
+ * <UILineChart
+ *   data={data}
+ *   xField="date"
+ *   yField="value"
+ *   colorField="category"
+ *   colors={['#ff0000', '#00ff00']}
+ * />
+ *
+ * // Manual color control via scale
+ * <UILineChart
+ *   data={data}
+ *   xField="date"
+ *   yField="value"
+ *   colorField="category"
+ *   disableAutoColors
+ *   scale={{
+ *     color: {
+ *       range: ['#ff0000', '#00ff00']
+ *     }
+ *   }}
+ * />
+ * ```
+ */
+declare function UILineChart({ colors, disableAutoColors, ...props }: UILineChartProps): react_jsx_runtime.JSX.Element;
+
+interface UIColumnChartProps extends Omit<ColumnConfig, 'theme'> {
+    /**
+     * Custom colors to override theme colors
+     */
+    colors?: string[];
+}
+/**
+ * UIColumnChart - Column chart with automatic theming
+ *
+ * Wrapper around @ant-design/charts Column component that uses theme tokens
+ * for automatic light/dark mode support.
+ *
+ * @example
+ * ```tsx
+ * <UIColumnChart
+ *   data={data}
+ *   xField="category"
+ *   yField="value"
+ *   colorField="type"
+ * />
+ * ```
+ */
+declare function UIColumnChart({ colors, ...props }: UIColumnChartProps): react_jsx_runtime.JSX.Element;
+
+interface UIAreaChartProps extends Omit<AreaConfig, 'theme'> {
+    /**
+     * Custom colors to override theme colors
+     * If not provided, automatic color palette will be used
+     */
+    colors?: string[];
+    /**
+     * Disable automatic color mapping
+     * Set to true if you want to handle colors manually via style.fill
+     */
+    disableAutoColors?: boolean;
+}
+/**
+ * UIAreaChart - Area chart with automatic theming and color mapping
+ *
+ * Wrapper around @ant-design/charts Area component that uses theme tokens
+ * for automatic light/dark mode support and automatic color mapping.
+ *
+ * @example
+ * ```tsx
+ * // Automatic color mapping (recommended)
+ * <UIAreaChart
+ *   data={data}
+ *   xField="date"
+ *   yField="value"
+ *   colorField="category"
+ * />
+ *
+ * // Custom colors
+ * <UIAreaChart
+ *   data={data}
+ *   xField="date"
+ *   yField="value"
+ *   colorField="category"
+ *   colors={['#ff0000', '#00ff00']}
+ * />
+ *
+ * // Manual color control via scale
+ * <UIAreaChart
+ *   data={data}
+ *   xField="date"
+ *   yField="value"
+ *   colorField="category"
+ *   disableAutoColors
+ *   scale={{
+ *     color: {
+ *       range: ['#ff0000', '#00ff00']
+ *     }
+ *   }}
+ * />
+ * ```
+ */
+declare function UIAreaChart({ colors, disableAutoColors, ...props }: UIAreaChartProps): react_jsx_runtime.JSX.Element;
+
+interface UIPieChartProps extends Omit<PieConfig, 'theme'> {
+    /**
+     * Custom colors to override theme colors
+     * If not provided, automatic color palette will be used
+     */
+    colors?: string[];
+    /**
+     * Disable automatic color mapping
+     * Set to true if you want to handle colors manually
+     */
+    disableAutoColors?: boolean;
+}
+/**
+ * UIPieChart - Pie/Donut chart with automatic theming and color mapping
+ *
+ * Wrapper around @ant-design/charts Pie component that uses theme tokens
+ * for automatic light/dark mode support and automatic color mapping.
+ *
+ * @example
+ * ```tsx
+ * // Automatic color mapping (recommended)
+ * <UIPieChart
+ *   data={data}
+ *   angleField="value"
+ *   colorField="category"
+ * />
+ * ```
+ *
+ * @example Donut chart
+ * ```tsx
+ * <UIPieChart
+ *   data={data}
+ *   angleField="value"
+ *   colorField="category"
+ *   innerRadius={0.6}
+ * />
+ * ```
+ */
+declare function UIPieChart({ colors, disableAutoColors, ...props }: UIPieChartProps): react_jsx_runtime.JSX.Element;
+
+interface UIBarChartProps extends Omit<BarConfig, 'theme'> {
+    /**
+     * Custom colors to override theme colors
+     * If not provided, automatic color palette will be used
+     */
+    colors?: string[];
+    /**
+     * Disable automatic color mapping
+     * Set to true if you want to handle colors manually
+     */
+    disableAutoColors?: boolean;
+}
+/**
+ * UIBarChart - Horizontal bar chart with automatic theming and color mapping
+ *
+ * Wrapper around @ant-design/charts Bar component that uses theme tokens
+ * for automatic light/dark mode support and automatic color mapping.
+ *
+ * @example
+ * ```tsx
+ * // Automatic color mapping (recommended)
+ * <UIBarChart
+ *   data={data}
+ *   xField="value"
+ *   yField="category"
+ *   seriesField="type"
+ * />
+ *
+ * // Custom colors
+ * <UIBarChart
+ *   data={data}
+ *   xField="value"
+ *   yField="category"
+ *   seriesField="type"
+ *   colors={['#ff0000', '#00ff00']}
+ * />
+ * ```
+ */
+declare function UIBarChart({ colors, disableAutoColors, ...props }: UIBarChartProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Configuration for chart metrics
+ */
+interface ChartMetricConfig {
+    /**
+     * Metric key from data object
+     * - For top-level fields: use the field name directly (e.g., 'count')
+     * - For nested fields: data will be extracted from record.metrics[key] if metrics object exists
+     */
+    key: string;
+    /**
+     * Display label for the metric
+     */
+    label: string;
+    /**
+     * Optional transformer function to convert raw value to display value
+     * Example: (v) => v / 1000 to convert tokens to K tokens
+     */
+    transform?: (value: number) => number;
+    /**
+     * Optional formatter for tooltip
+     */
+    format?: (value: number) => string;
+}
+interface UIStatisticsChartProps {
+    /**
+     * Chart data - can be either:
+     * 1. Pre-transformed: Array<{ [xField]: string, [yField]: number, [colorField]: string }>
+     * 2. Raw DailyStats: Array<{ date: string, count: number, metrics: { [key]: number } }>
+     */
+    data: any[] | undefined;
+    /**
+     * Loading state
+     */
+    loading?: boolean;
+    /**
+     * Chart title
+     */
+    title?: string;
+    /**
+     * Metrics to display on the chart
+     * Each metric will be shown as a separate line
+     *
+     * Only used when data transformation is needed (raw DailyStats format)
+     */
+    metrics?: ChartMetricConfig[];
+    /**
+     * X-axis field name (default: 'date')
+     */
+    xField?: string;
+    /**
+     * Y-axis field name (default: 'value')
+     */
+    yField?: string;
+    /**
+     * Color field name (default: 'category')
+     */
+    colorField?: string;
+    /**
+     * Optional card style
+     */
+    style?: React$1.CSSProperties;
+    /**
+     * Chart height in pixels
+     */
+    height?: number;
+    /**
+     * Show legend (default: true)
+     */
+    showLegend?: boolean;
+    /**
+     * Additional LineChart props
+     */
+    chartProps?: Partial<LineConfig>;
+}
+/**
+ * UIStatisticsChart - Reusable statistics chart with legend and loading states
+ *
+ * Specialized chart component for displaying time-series statistics with automatic theming.
+ * Includes built-in legend, loading states, and empty states.
+ *
+ * Supports two data formats:
+ * 1. Pre-transformed chart data (simple array of objects with xField, yField, colorField)
+ * 2. Raw DailyStats format (automatically transforms using metrics config)
+ *
+ * @example Pre-transformed data
+ * ```tsx
+ * <UIStatisticsChart
+ *   data={[
+ *     { date: '2024-01-01', value: 100, category: 'Requests' },
+ *     { date: '2024-01-01', value: 5000, category: 'Tokens' },
+ *   ]}
+ *   loading={isLoading}
+ *   title="Daily Usage"
+ * />
+ * ```
+ *
+ * @example Raw DailyStats with transformation
+ * ```tsx
+ * <UIStatisticsChart
+ *   data={dailyStats}
+ *   loading={isLoading}
+ *   title="Daily Usage Trend"
+ *   metrics={[
+ *     { key: 'count', label: 'Requests' },
+ *     { key: 'totalTokens', label: 'Tokens (K)', transform: (v) => v / 1000 },
+ *     { key: 'totalCost', label: 'Cost ($)', format: (v) => `$${v.toFixed(2)}` },
+ *   ]}
+ * />
+ * ```
+ */
+declare function UIStatisticsChart({ data, loading, title, metrics, xField, yField, colorField, style, height, showLegend, chartProps, }: UIStatisticsChartProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Chart color palette configuration
+ *
+ * Provides a consistent color palette for charts based on Ant Design tokens.
+ * Colors are optimized for data visualization with good contrast and accessibility.
+ */
+interface ChartColorPalette {
+    /** Primary colors for main data series (10 colors) */
+    colors: string[];
+    /** Extended palette for complex charts (20 colors) */
+    extendedColors: string[];
+    /** Get color by index with automatic wrapping */
+    getColor: (index: number) => string;
+    /** Map data series to colors by field value */
+    mapColors: (data: any[], colorField: string) => Record<string, string>;
+}
+/**
+ * Hook to get chart color palette based on current theme
+ *
+ * Returns a palette of 10 primary colors and 20 extended colors,
+ * plus helper functions for color mapping.
+ *
+ * @example
+ * ```tsx
+ * const palette = useChartColors();
+ *
+ * // Get color by index
+ * const color = palette.getColor(0); // First color
+ *
+ * // Map data to colors
+ * const colorMap = palette.mapColors(data, 'category');
+ * // { 'Category A': '#1890ff', 'Category B': '#52c41a', ... }
+ * ```
+ */
+declare function useChartColors(): ChartColorPalette;
+/**
+ * Create style.fill function for @ant-design/charts
+ *
+ * @param colorMap - Map of field values to colors
+ * @param colorField - Name of the field to use for color mapping
+ *
+ * @example
+ * ```tsx
+ * const palette = useChartColors();
+ * const colorMap = palette.mapColors(data, 'type');
+ *
+ * const config = {
+ *   colorField: 'type',
+ *   style: {
+ *     fill: createFillFunction(colorMap, 'type'),
+ *   },
+ * };
+ * ```
+ */
+declare function createFillFunction(colorMap: Record<string, string>, colorField: string): (datum: any) => string;
+
+interface UIStatisticProps extends StatisticProps {
+}
+declare function UIStatistic(props: UIStatisticProps): react_jsx_runtime.JSX.Element;
+declare function UIStatisticCountdown(props: React$1.ComponentProps<typeof Statistic.Countdown>): react_jsx_runtime.JSX.Element;
+
+interface UIProgressProps extends ProgressProps {
+}
+declare function UIProgress(props: UIProgressProps): react_jsx_runtime.JSX.Element;
+
+interface UIDescriptionsProps extends DescriptionsProps {
+}
+declare function UIDescriptions(props: UIDescriptionsProps): react_jsx_runtime.JSX.Element;
+declare function UIDescriptionsItem(props: React$1.ComponentProps<typeof Descriptions.Item>): react_jsx_runtime.JSX.Element;
+
+interface UITimelineProps extends TimelineProps {
+}
+declare function UITimeline(props: UITimelineProps): react_jsx_runtime.JSX.Element;
+declare function UITimelineItem(props: React$1.ComponentProps<typeof Timeline.Item>): react_jsx_runtime.JSX.Element;
+
+interface UITreeProps extends TreeProps {
+}
+declare function UITree(props: UITreeProps): react_jsx_runtime.JSX.Element;
+declare function UITreeDirectoryTree(props: React$1.ComponentProps<typeof Tree.DirectoryTree>): react_jsx_runtime.JSX.Element;
+declare function UITreeNode(props: React$1.ComponentProps<typeof Tree.TreeNode>): react_jsx_runtime.JSX.Element;
+
+interface UIListProps<T> extends ListProps<T> {
+}
+declare function UIList<T>(props: UIListProps<T>): react_jsx_runtime.JSX.Element;
+declare function UIListItem(props: React$1.ComponentProps<typeof List.Item>): react_jsx_runtime.JSX.Element;
+declare function UIListItemMeta(props: React$1.ComponentProps<typeof List.Item.Meta>): react_jsx_runtime.JSX.Element;
+
+interface UIInputProps extends Omit<InputProps, 'onChange'> {
+    /** Input value */
+    value?: string;
+    /** Default value */
+    defaultValue?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Prefix icon/element */
+    prefix?: React$1.ReactNode;
+    /** Suffix icon/element */
+    suffix?: React$1.ReactNode;
+    /** Max length */
+    maxLength?: number;
+    /** Show character count */
+    showCount?: boolean;
+    /** Allow clear */
+    allowClear?: boolean;
+    /** Change handler (returns value string, not event) */
+    onChange?: (value: string) => void;
+    /** Enter key handler */
+    onPressEnter?: () => void;
+}
+/**
+ * UIInput - Text input
+ *
+ * @example
+ * ```tsx
+ * <UIInput placeholder="Enter name" />
+ * <UIInput prefix={<SearchIcon />} placeholder="Search..." />
+ * <UIInput allowClear showCount maxLength={100} />
+ * ```
+ */
+declare function UIInput({ value, defaultValue, placeholder, disabled, prefix, suffix, maxLength, showCount, allowClear, onChange, onPressEnter, ...rest }: UIInputProps): react_jsx_runtime.JSX.Element;
+/**
+ * UIInputPassword - Password input with toggle visibility
+ */
+declare function UIInputPassword(props: React$1.ComponentProps<typeof Input.Password>): react_jsx_runtime.JSX.Element;
+/**
+ * UIInputTextArea - Multiline text input
+ */
+declare function UIInputTextArea(props: React$1.ComponentProps<typeof Input.TextArea>): react_jsx_runtime.JSX.Element;
+/**
+ * UIInputSearch - Search input with search button
+ */
+declare function UIInputSearch(props: React$1.ComponentProps<typeof Input.Search>): react_jsx_runtime.JSX.Element;
+
+interface UISelectOption {
+    /** Option label */
+    label: string;
+    /** Option value */
+    value: string | number;
+    /** Optional icon */
+    icon?: React$1.ReactNode;
+    /** Disabled option */
+    disabled?: boolean;
+    /** Option description */
+    description?: string;
+}
+interface UISelectProps extends Omit<SelectProps, 'options' | 'onChange'> {
+    /** Select options */
+    options: UISelectOption[];
+    /** Selected value */
+    value?: string | number | (string | number)[];
+    /** Default value */
+    defaultValue?: string | number | (string | number)[];
+    /** Placeholder */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Allow clear */
+    allowClear?: boolean;
+    /** Enable search */
+    showSearch?: boolean;
+    /** Multiple selection */
+    mode?: 'multiple' | 'tags';
+    /** Change handler (returns value, not event) */
+    onChange?: (value: string | number | (string | number)[]) => void;
+}
+/**
+ * UISelect - Dropdown select
+ *
+ * @example
+ * ```tsx
+ * <UISelect
+ *   options={[
+ *     { label: 'Option 1', value: 1 },
+ *     { label: 'Option 2', value: 2, icon: <Icon /> },
+ *   ]}
+ *   placeholder="Select option"
+ * />
+ *
+ * <UISelect
+ *   mode="multiple"
+ *   options={options}
+ *   showSearch
+ *   allowClear
+ * />
+ * ```
+ */
+declare function UISelect({ options, value, defaultValue, placeholder, disabled, loading, allowClear, showSearch, mode, onChange, ...rest }: UISelectProps): react_jsx_runtime.JSX.Element;
+
+type UIFormLayout = 'horizontal' | 'vertical' | 'inline';
+interface UIFormProps extends FormProps {
+    /** Form layout */
+    layout?: UIFormLayout;
+    /** Submit handler */
+    onFinish?: (values: any) => void;
+    /** Failed submit handler */
+    onFinishFailed?: (errorInfo: any) => void;
+    /** Initial form values */
+    initialValues?: Record<string, any>;
+    /** Form content */
+    children: React$1.ReactNode;
+}
+/**
+ * UIForm - Form wrapper
+ *
+ * @example
+ * ```tsx
+ * <UIForm layout="vertical" onFinish={handleSubmit}>
+ *   <UIFormItem label="Username" name="username" rules={[{ required: true }]}>
+ *     <UIInput />
+ *   </UIFormItem>
+ *   <UIFormItem>
+ *     <UIButton variant="primary" htmlType="submit">Submit</UIButton>
+ *   </UIFormItem>
+ * </UIForm>
+ * ```
+ */
+declare function UIForm({ layout, onFinish, onFinishFailed, initialValues, children, ...rest }: UIFormProps): react_jsx_runtime.JSX.Element;
+/**
+ * UIFormItem - Form field wrapper
+ *
+ * @example
+ * ```tsx
+ * <UIFormItem
+ *   label="Email"
+ *   name="email"
+ *   rules={[
+ *     { required: true, message: 'Please enter email' },
+ *     { type: 'email', message: 'Please enter valid email' }
+ *   ]}
+ * >
+ *   <UIInput type="email" />
+ * </UIFormItem>
+ * ```
+ */
+declare function UIFormItem(props: FormItemProps): react_jsx_runtime.JSX.Element;
+/**
+ * useForm hook - Form instance hook
+ */
+declare const useUIForm: typeof antd_es_form_Form.useForm;
+/**
+ * UIFormList - Dynamic form list
+ */
+declare function UIFormList(props: React$1.ComponentProps<typeof Form.List>): react_jsx_runtime.JSX.Element;
+
+interface UICheckboxOption {
+    /** Option label */
+    label: string;
+    /** Option value */
+    value: string | number;
+    /** Disabled option */
+    disabled?: boolean;
+    /** Option description */
+    description?: string;
+}
+interface UICheckboxProps {
+    /** Checkbox label */
+    children?: React$1.ReactNode;
+    /** Checked state */
+    checked?: boolean;
+    /** Default checked state */
+    defaultChecked?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Indeterminate state */
+    indeterminate?: boolean;
+    /** Change handler (returns checked boolean) */
+    onChange?: (checked: boolean) => void;
+}
+interface UICheckboxGroupProps {
+    /** Checkbox options */
+    options: UICheckboxOption[];
+    /** Selected values */
+    value?: (string | number)[];
+    /** Default selected values */
+    defaultValue?: (string | number)[];
+    /** Disabled state */
+    disabled?: boolean;
+    /** Gap between checkboxes (spacing token) */
+    gap?: UIBoxSpacingValue;
+    /** Change handler (returns array of values) */
+    onChange?: (values: (string | number)[]) => void;
+}
+/**
+ * UICheckbox - Single checkbox
+ *
+ * @example
+ * ```tsx
+ * <UICheckbox checked onChange={(checked) => console.log(checked)}>
+ *   Accept terms
+ * </UICheckbox>
+ *
+ * <UICheckbox indeterminate>Select all</UICheckbox>
+ * ```
+ */
+declare function UICheckbox({ children, checked, defaultChecked, disabled, indeterminate, onChange, ...rest }: UICheckboxProps): react_jsx_runtime.JSX.Element;
+/**
+ * UICheckboxGroup - Checkbox group
+ *
+ * @example
+ * ```tsx
+ * <UICheckboxGroup
+ *   options={[
+ *     { label: 'Option 1', value: 1 },
+ *     { label: 'Option 2', value: 2, description: 'With description' },
+ *   ]}
+ *   gap={3}
+ *   onChange={(values) => console.log(values)}
+ * />
+ * ```
+ */
+declare function UICheckboxGroup({ options, value, defaultValue, disabled, gap, onChange, }: UICheckboxGroupProps): react_jsx_runtime.JSX.Element;
+
+type UISwitchSize = 'small' | 'default';
+type UISwitchLabelPosition = 'left' | 'right';
+interface UISwitchProps extends Omit<SwitchProps, 'onChange'> {
+    /** Checked state */
+    checked?: boolean;
+    /** Default checked state */
+    defaultChecked?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Switch size */
+    size?: UISwitchSize;
+    /** Label text */
+    label?: string;
+    /** Label position */
+    labelPosition?: UISwitchLabelPosition;
+    /** Checked children (text inside switch when on) */
+    checkedChildren?: React$1.ReactNode;
+    /** Unchecked children (text inside switch when off) */
+    unCheckedChildren?: React$1.ReactNode;
+    /** Change handler (returns checked boolean) */
+    onChange?: (checked: boolean) => void;
+}
+/**
+ * UISwitch - Toggle switch
+ *
+ * @example
+ * ```tsx
+ * <UISwitch label="Enable notifications" />
+ * <UISwitch label="Dark mode" labelPosition="left" />
+ * <UISwitch
+ *   checkedChildren="ON"
+ *   unCheckedChildren="OFF"
+ *   defaultChecked
+ * />
+ * ```
+ */
+declare function UISwitch({ checked, defaultChecked, disabled, loading, size, label, labelPosition, checkedChildren, unCheckedChildren, onChange, ...rest }: UISwitchProps): react_jsx_runtime.JSX.Element;
+
+interface UIDatePickerProps extends Omit<DatePickerProps, 'onChange'> {
+    /** Selected date */
+    value?: Dayjs | null;
+    /** Default date */
+    defaultValue?: Dayjs;
+    /** Placeholder */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Date format */
+    format?: string;
+    /** Allow clear */
+    allowClear?: boolean;
+    /** Show time picker */
+    showTime?: boolean;
+    /** Change handler (returns Dayjs or null) */
+    onChange?: (date: Dayjs | null) => void;
+}
+interface UITimePickerProps extends Omit<TimePickerProps, 'onChange'> {
+    /** Selected time */
+    value?: Dayjs | null;
+    /** Default time */
+    defaultValue?: Dayjs;
+    /** Placeholder */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Time format */
+    format?: string;
+    /** Allow clear */
+    allowClear?: boolean;
+    /** Change handler (returns Dayjs or null) */
+    onChange?: (time: Dayjs | null) => void;
+}
+/**
+ * UIDatePicker - Date picker
+ *
+ * @example
+ * ```tsx
+ * <UIDatePicker placeholder="Select date" />
+ * <UIDatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
+ * <UIDatePicker
+ *   onChange={(date) => console.log(date?.format('YYYY-MM-DD'))}
+ * />
+ * ```
+ */
+declare function UIDatePicker({ value, defaultValue, placeholder, disabled, format, allowClear, showTime, onChange, ...rest }: UIDatePickerProps): react_jsx_runtime.JSX.Element;
+/**
+ * UITimePicker - Time picker
+ *
+ * @example
+ * ```tsx
+ * <UITimePicker placeholder="Select time" />
+ * <UITimePicker format="HH:mm" />
+ * ```
+ */
+declare function UITimePicker({ value, defaultValue, placeholder, disabled, format, allowClear, onChange, ...rest }: UITimePickerProps): react_jsx_runtime.JSX.Element;
+/**
+ * UIRangePicker - Date range picker
+ */
+declare function UIRangePicker(props: React$1.ComponentProps<typeof DatePicker.RangePicker>): react_jsx_runtime.JSX.Element;
+
+interface UIInputNumberProps extends InputNumberProps {
+}
+declare function UIInputNumber(props: UIInputNumberProps): react_jsx_runtime.JSX.Element;
+
+interface UIRadioProps extends RadioProps {
+}
+interface UIRadioGroupProps extends RadioGroupProps {
+}
+declare function UIRadio(props: UIRadioProps): react_jsx_runtime.JSX.Element;
+declare function UIRadioGroup(props: UIRadioGroupProps): react_jsx_runtime.JSX.Element;
+
+interface UIUploadProps extends UploadProps {
+}
+declare function UIUpload(props: UIUploadProps): react_jsx_runtime.JSX.Element;
+declare function UIUploadDragger(props: React$1.ComponentProps<typeof Upload.Dragger>): react_jsx_runtime.JSX.Element;
+
+interface UISliderProps extends SliderSingleProps {
+}
+declare function UISlider(props: UISliderProps): react_jsx_runtime.JSX.Element;
+
+interface UIBreadcrumbItem {
+    /** Breadcrumb text */
+    title: string;
+    /** Optional link href */
+    href?: string;
+    /** Optional icon */
+    icon?: React$1.ReactNode;
+    /** Click handler (if no href) */
+    onClick?: () => void;
+}
+interface UIBreadcrumbProps {
+    /** Breadcrumb items */
+    items: UIBreadcrumbItem[];
+    /** Custom separator */
+    separator?: React$1.ReactNode;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * UIBreadcrumb - Navigation breadcrumb
+ *
+ * @example
+ * ```tsx
+ * <UIBreadcrumb
+ *   items={[
+ *     { title: 'Home', href: '/' },
+ *     { title: 'Workflows', href: '/workflows' },
+ *     { title: 'Details' },
+ *   ]}
+ * />
+ *
+ * <UIBreadcrumb
+ *   items={[
+ *     { title: 'Dashboard', icon: <HomeIcon /> },
+ *     { title: 'Settings', onClick: () => navigate('/settings') },
+ *   ]}
+ *   separator=">"
+ * />
+ * ```
+ */
+declare function UIBreadcrumb({ items, separator, className, }: UIBreadcrumbProps): react_jsx_runtime.JSX.Element;
+
+interface UITabItem {
+    /** Tab key */
+    key: string;
+    /** Tab label */
+    label: string;
+    /** Tab icon */
+    icon?: React$1.ReactNode;
+    /** Tab content */
+    children: React$1.ReactNode;
+    /** Disabled tab */
+    disabled?: boolean;
+    /** Closable tab */
+    closable?: boolean;
+}
+interface UITabsProps {
+    /** Tab items */
+    items: UITabItem[];
+    /**
+     * Sync active tab with URL automatically.
+     * - true / "search" — uses ?tab= query param, default tab = first item (clean URL)
+     * - { mode: "path", basePath } — uses /:tab path segment (e.g. "/settings")
+     */
+    syncUrl?: boolean | 'search' | {
+        mode: 'path';
+        basePath: string;
+    };
+    /** Controlled active tab key (ignored when syncUrl is set) */
+    activeKey?: string;
+    /** Default active tab key */
+    defaultActiveKey?: string;
+    /** Tab position */
+    tabPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /** Tab type */
+    type?: 'line' | 'card';
+    /** Tab size */
+    size?: 'small' | 'middle' | 'large';
+    /** Change handler (called in addition to URL sync) */
+    onChange?: (activeKey: string) => void;
+    /** Tab edit handler (for closable tabs) */
+    onEdit?: (targetKey: string, action: 'add' | 'remove') => void;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles */
+    style?: React$1.CSSProperties;
+}
+declare function UITabs(props: UITabsProps): react_jsx_runtime.JSX.Element;
+
+interface UIAccordionItem {
+    /** Panel key */
+    key: string;
+    /** Panel header/title */
+    label: string;
+    /** Panel content */
+    children: React$1.ReactNode;
+    /** Extra content in header */
+    extra?: React$1.ReactNode;
+    /** Show arrow */
+    showArrow?: boolean;
+    /** Collapsible trigger */
+    collapsible?: 'header' | 'icon' | 'disabled';
+}
+interface UIAccordionProps {
+    /** Accordion items */
+    items: UIAccordionItem[];
+    /** Active panel keys */
+    activeKey?: string | string[];
+    /** Default active panel keys */
+    defaultActiveKey?: string | string[];
+    /** Accordion mode (allow multiple open) */
+    accordion?: boolean;
+    /** Bordered style */
+    bordered?: boolean;
+    /** Ghost style (no border, no background) */
+    ghost?: boolean;
+    /** Size */
+    size?: 'small' | 'middle' | 'large';
+    /** Change handler */
+    onChange?: (keys: string | string[]) => void;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles */
+    style?: React$1.CSSProperties;
+}
+/**
+ * UIAccordion - Collapsible panels
+ *
+ * @example
+ * ```tsx
+ * <UIAccordion
+ *   items={[
+ *     {
+ *       key: '1',
+ *       label: 'Section 1',
+ *       children: <div>Content 1</div>,
+ *     },
+ *     {
+ *       key: '2',
+ *       label: 'Section 2',
+ *       children: <div>Content 2</div>,
+ *     },
+ *   ]}
+ *   defaultActiveKey={['1']}
+ * />
+ *
+ * <UIAccordion
+ *   accordion
+ *   items={sections}
+ *   onChange={(key) => console.log('Active:', key)}
+ * />
+ *
+ * <UIAccordion
+ *   ghost
+ *   items={[
+ *     {
+ *       key: 'advanced',
+ *       label: 'Advanced Options',
+ *       children: <AdvancedForm />,
+ *       extra: <UIBadge>New</UIBadge>,
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+declare function UIAccordion({ items, activeKey, defaultActiveKey, accordion, bordered, ghost, size, onChange, className, style, }: UIAccordionProps): react_jsx_runtime.JSX.Element;
+
+interface UIDropdownProps extends DropdownProps {
+}
+declare function UIDropdown(props: UIDropdownProps): react_jsx_runtime.JSX.Element;
+declare function UIDropdownButton(props: React$1.ComponentProps<typeof Dropdown.Button>): react_jsx_runtime.JSX.Element;
+
+interface UISegmentedProps extends SegmentedProps {
+}
+declare function UISegmented(props: UISegmentedProps): react_jsx_runtime.JSX.Element;
+
+interface UIStepsProps extends StepsProps {
+}
+declare function UISteps(props: UIStepsProps): react_jsx_runtime.JSX.Element;
+
+interface UIMenuProps extends MenuProps {
+}
+declare function UIMenu(props: UIMenuProps): react_jsx_runtime.JSX.Element;
+
+type UIPageWidth = 'default' | 'wide' | 'full';
+interface UIPageProps {
+    /** Page content */
+    children: React$1.ReactNode;
+    /** Max width mode */
+    width?: UIPageWidth;
+    /**
+     * Page variant:
+     * - 'default' — transparent background, cards float on grey (dashboard, lists)
+     * - 'document' — white card wrapping all content (settings, detail pages)
+     */
+    variant?: 'default' | 'document';
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles */
+    style?: React$1.CSSProperties;
+}
+/**
+ * UIPage - Page container
+ *
+ * @example
+ * ```tsx
+ * <UIPage>
+ *   <UIHeader title="Dashboard" />
+ *   <div>Content here</div>
+ * </UIPage>
+ *
+ * <UIPage width="wide">
+ *   <div>Wider content area</div>
+ * </UIPage>
+ *
+ * <UIPage width="full">
+ *   <div>Full width, no max-width constraint</div>
+ * </UIPage>
+ * ```
+ */
+declare function UIPage({ children, width, variant, className, style: customStyle, }: UIPageProps): react_jsx_runtime.JSX.Element;
+
+interface UIHeaderProps {
+    /** Page title */
+    title: string;
+    /** Optional subtitle/description */
+    subtitle?: string;
+    /** Breadcrumb component */
+    breadcrumb?: React$1.ReactNode;
+    /** Action buttons (right side) */
+    actions?: React$1.ReactNode;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles */
+    style?: React$1.CSSProperties;
+}
+/**
+ * UIHeader - Page header
+ *
+ * @example
+ * ```tsx
+ * <UIHeader
+ *   title="Dashboard"
+ *   subtitle="Overview of your workspace"
+ * />
+ *
+ * <UIHeader
+ *   title="Workflows"
+ *   breadcrumb={<UIBreadcrumb items={[{ title: 'Home' }, { title: 'Workflows' }]} />}
+ *   actions={<UIButton variant="primary">Create Workflow</UIButton>}
+ * />
+ * ```
+ */
+declare function UIHeader({ title, subtitle, breadcrumb, actions, className, style: customStyle, }: UIHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface UIPageBreadcrumbItem {
+    title: string;
+    href?: string;
+}
+interface UIPageHeaderProps {
+    /** Page title */
+    title: string | React$1.ReactNode;
+    /** Subtitle below title */
+    description?: string | React$1.ReactNode;
+    /** Icon displayed left of title */
+    icon?: React$1.ReactNode;
+    /** Breadcrumb trail above title */
+    breadcrumbs?: UIPageBreadcrumbItem[];
+    /** Actions slot — right side (buttons, menus, etc.) */
+    actions?: React$1.ReactNode;
+    /** Tabs slot — rendered below divider */
+    tabs?: React$1.ReactNode;
+    /** Back button handler — renders ← button */
+    onBack?: () => void;
+    /** Escape hatch for custom content below description */
+    children?: React$1.ReactNode;
+}
+/**
+ * UIPageHeader - Standard page header for Studio and plugins
+ *
+ * @example
+ * ```tsx
+ * <UIPageHeader
+ *   title="Release Manager"
+ *   description="Manage deployments and releases"
+ *   breadcrumbs={[{ title: 'Plugins' }, { title: 'Release Manager' }]}
+ *   actions={<UIButton variant="primary">Deploy</UIButton>}
+ *   onBack={() => navigate(-1)}
+ * />
+ *
+ * <UIPageHeader
+ *   title="Settings"
+ *   tabs={<UITabs items={tabItems} />}
+ * />
+ * ```
+ */
+declare function UIPageHeader({ title, description, icon, breadcrumbs, actions, tabs, onBack, children, }: UIPageHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface UIPageSectionProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    children: React$1.ReactNode;
+    /** Bottom margin in px, default 24 */
+    gap?: number;
+}
+declare function UIPageSection({ children, gap, style, ...rest }: UIPageSectionProps): react_jsx_runtime.JSX.Element;
+
+type UIAlertVariant = 'success' | 'info' | 'warning' | 'error';
+interface UIAlertProps {
+    /** Alert variant */
+    variant?: UIAlertVariant;
+    /** Alert title */
+    title?: string;
+    /** Alert message */
+    message: React$1.ReactNode;
+    /** Alert description */
+    description?: React$1.ReactNode;
+    /** Show icon */
+    showIcon?: boolean;
+    /** Closable alert */
+    closable?: boolean;
+    /** Close handler */
+    onClose?: () => void;
+    /** Action button */
+    action?: React$1.ReactNode;
+    /** Custom icon */
+    icon?: React$1.ReactNode;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles */
+    style?: React$1.CSSProperties;
+}
+/**
+ * UIAlert - Alert message
+ *
+ * @example
+ * ```tsx
+ * <UIAlert variant="success" message="Success message" />
+ *
+ * <UIAlert
+ *   variant="error"
+ *   title="Error"
+ *   message="Something went wrong"
+ *   description="Please try again later"
+ *   showIcon
+ *   closable
+ * />
+ *
+ * <UIAlert
+ *   variant="warning"
+ *   message="Warning"
+ *   action={<UIButton size="small">Action</UIButton>}
+ * />
+ * ```
+ */
+declare function UIAlert({ variant, title, message, description, showIcon, closable, onClose, action, icon, className, style, }: UIAlertProps): react_jsx_runtime.JSX.Element;
+
+interface UIEmptyStateProps {
+    /** Empty state icon */
+    icon?: React$1.ReactNode;
+    /** Empty state title */
+    title?: string;
+    /** Empty state description */
+    description?: string;
+    /** Action button */
+    action?: React$1.ReactNode;
+    /** Children rendered below description/action (alias for action) */
+    children?: React$1.ReactNode;
+    /** Use default Ant Design empty image */
+    useDefaultImage?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles */
+    style?: React$1.CSSProperties;
+    /** Ant Design image prop (e.g. Empty.PRESENTED_IMAGE_SIMPLE) */
+    image?: React$1.ReactNode;
+}
+/**
+ * UIEmptyState - Empty state placeholder
+ *
+ * @example
+ * ```tsx
+ * <UIEmptyState
+ *   title="No workflows"
+ *   description="Get started by creating your first workflow"
+ *   action={<UIButton variant="primary">Create Workflow</UIButton>}
+ * />
+ *
+ * <UIEmptyState
+ *   icon={<SearchIcon />}
+ *   title="No results found"
+ *   description="Try adjusting your search criteria"
+ * />
+ *
+ * <UIEmptyState useDefaultImage />
+ * ```
+ */
+declare function UIEmptyState({ icon, title, description, action, children, useDefaultImage, image, className, style: customStyle, }: UIEmptyStateProps): react_jsx_runtime.JSX.Element;
+declare namespace UIEmptyState {
+    var PRESENTED_IMAGE_SIMPLE: React$1.ReactNode;
+    var PRESENTED_IMAGE_DEFAULT: React$1.ReactNode;
+}
+
+interface UIErrorStateProps {
+    /** Error icon */
+    icon?: React$1.ReactNode;
+    /** Error title */
+    title?: string;
+    /** Error description */
+    description?: string;
+    /** Error details (technical message) */
+    details?: string;
+    /** Show retry button */
+    showRetry?: boolean;
+    /** Retry button text */
+    retryText?: string;
+    /** Retry handler */
+    onRetry?: () => void;
+    /** Custom action (instead of retry) */
+    action?: React$1.ReactNode;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles */
+    style?: React$1.CSSProperties;
+}
+/**
+ * UIErrorState - Error state display
+ *
+ * @example
+ * ```tsx
+ * <UIErrorState
+ *   title="Failed to load data"
+ *   description="Something went wrong"
+ *   showRetry
+ *   onRetry={() => refetch()}
+ * />
+ *
+ * <UIErrorState
+ *   icon={<ErrorIcon />}
+ *   title="Connection error"
+ *   description="Unable to connect to server"
+ *   details="Error: ECONNREFUSED 127.0.0.1:5000"
+ *   retryText="Reconnect"
+ *   onRetry={handleReconnect}
+ * />
+ *
+ * <UIErrorState
+ *   title="Access denied"
+ *   description="You don't have permission to view this resource"
+ *   action={<UIButton>Go Back</UIButton>}
+ * />
+ * ```
+ */
+declare function UIErrorState({ icon, title, description, details, showRetry, retryText, onRetry, action, className, style: customStyle, }: UIErrorStateProps): react_jsx_runtime.JSX.Element;
+
+interface UISkeletonProps {
+    /** Show loading state */
+    loading?: boolean;
+    /** Content to show when not loading */
+    children?: React$1.ReactNode;
+    /** Show avatar */
+    avatar?: boolean;
+    /** Avatar shape */
+    avatarShape?: 'circle' | 'square';
+    /** Number of paragraph lines */
+    lines?: number;
+    /** Show title */
+    title?: boolean;
+    /** Active animation */
+    active?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles */
+    style?: React$1.CSSProperties;
+}
+/**
+ * UISkeleton - Loading skeleton
+ *
+ * @example
+ * ```tsx
+ * <UISkeleton loading={isLoading}>
+ *   <div>Content</div>
+ * </UISkeleton>
+ *
+ * <UISkeleton avatar lines={3} active />
+ *
+ * <UISkeleton
+ *   loading={isLoading}
+ *   avatar
+ *   avatarShape="circle"
+ *   title
+ *   lines={2}
+ * >
+ *   <ProfileCard />
+ * </UISkeleton>
+ * ```
+ */
+declare function UISkeleton({ loading, children, avatar, avatarShape, lines, title, active, className, style, }: UISkeletonProps): react_jsx_runtime.JSX.Element;
+/**
+ * UISkeletonButton - Button skeleton
+ */
+declare function UISkeletonButton(props: React$1.ComponentProps<typeof Skeleton.Button>): react_jsx_runtime.JSX.Element;
+/**
+ * UISkeletonInput - Input skeleton
+ */
+declare function UISkeletonInput(props: React$1.ComponentProps<typeof Skeleton.Input>): react_jsx_runtime.JSX.Element;
+/**
+ * UISkeletonImage - Image skeleton
+ */
+declare function UISkeletonImage(props: React$1.ComponentProps<typeof Skeleton.Image>): react_jsx_runtime.JSX.Element;
+/**
+ * UISkeletonNode - Custom node skeleton
+ */
+declare function UISkeletonNode(props: React$1.ComponentProps<typeof Skeleton.Node>): react_jsx_runtime.JSX.Element;
+interface UISkeletonTextProps {
+    /**
+     * Width of the text line(s). Can be a number (px), string ('100%', '8ch'), or
+     * an array to render multiple lines with different widths.
+     * @default '100%'
+     */
+    width?: number | string | Array<number | string>;
+    /**
+     * Height / font-size of the shimmer block — matches the surrounding text size.
+     * @default '1em'
+     */
+    height?: number | string;
+    /** Gap between lines when width is an array */
+    gap?: number | string;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles applied to the wrapper */
+    style?: React$1.CSSProperties;
+}
+/**
+ * UISkeletonText - Inline text shimmer placeholder
+ *
+ * Renders a shimmer block that matches the height of surrounding text.
+ * Uses Ant Design's native skeleton animation so it respects the theme.
+ *
+ * @example
+ * // Single line, full width
+ * <UISkeletonText />
+ *
+ * // Single line, fixed width
+ * <UISkeletonText width={120} height="1em" />
+ *
+ * // Multiple lines with varying widths (like a paragraph)
+ * <UISkeletonText width={['100%', '85%', '60%']} height="14px" gap={8} />
+ *
+ * // Match a specific font size
+ * <UISkeletonText width="8ch" height="20px" />
+ */
+declare function UISkeletonText({ width, height, gap, className, style, }: UISkeletonTextProps): react_jsx_runtime.JSX.Element;
+
+interface UISpinProps extends SpinProps {
+}
+declare function UISpin(props: UISpinProps): react_jsx_runtime.JSX.Element;
+
+interface UIResultProps extends ResultProps {
+}
+declare function UIResult(props: UIResultProps): react_jsx_runtime.JSX.Element;
+
+type MessageFunc = (content: React.ReactNode | MessageArgsProps, duration?: number, onClose?: () => void) => Promise<boolean>;
+interface UIMessageAPI {
+    success: MessageFunc;
+    error: MessageFunc;
+    info: MessageFunc;
+    warning: MessageFunc;
+    loading: MessageFunc;
+    open: (args: MessageArgsProps) => Promise<boolean>;
+    destroy: (key?: React.Key) => void;
+}
+declare const UIMessage: UIMessageAPI;
+declare function useUIMessage(): readonly [antd_es_message_interface.MessageInstance, React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>];
+
+/**
+ * UINotification - Imperative notification API
+ *
+ * Wraps antd's notification API to decouple app from antd internals.
+ *
+ * @example
+ * ```tsx
+ * import { UINotification } from '@kb-labs/studio-ui-kit';
+ *
+ * UINotification.success({ message: 'Done', description: 'Task completed.' });
+ * ```
+ */
+interface UINotificationArgs {
+    message: React.ReactNode;
+    description?: React.ReactNode;
+    key?: React.Key;
+    duration?: number | null;
+    placement?: 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
+    icon?: React.ReactNode;
+    btn?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+    onClose?: () => void;
+}
+type NotifyFunc = (args: UINotificationArgs) => void;
+interface UINotificationAPI {
+    success: NotifyFunc;
+    error: NotifyFunc;
+    info: NotifyFunc;
+    warning: NotifyFunc;
+    open: NotifyFunc;
+    destroy: (key?: React.Key) => void;
+}
+declare const UINotification: UINotificationAPI;
+declare function useUINotification(): readonly [antd_es_notification_interface.NotificationInstance, React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>];
+
+type UIModalWidth = 'small' | 'default' | 'large' | 'full';
+interface UIModalProps {
+    /** Modal open state */
+    open: boolean;
+    /** Modal title */
+    title?: React$1.ReactNode;
+    /** Modal content */
+    children: React$1.ReactNode;
+    /** Modal width preset */
+    width?: UIModalWidth | number;
+    /** Show close button */
+    closable?: boolean;
+    /** Mask closable (click outside to close) */
+    maskClosable?: boolean;
+    /** Show footer */
+    footer?: React$1.ReactNode | null;
+    /** OK button text */
+    okText?: string;
+    /** Cancel button text */
+    cancelText?: string;
+    /** OK button loading */
+    confirmLoading?: boolean;
+    /** OK button handler */
+    onOk?: () => void;
+    /** Cancel button handler */
+    onCancel?: () => void;
+    /** Close handler */
+    onClose?: () => void;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles */
+    style?: React$1.CSSProperties;
+}
+/**
+ * UIModal - Modal dialog
+ *
+ * @example
+ * ```tsx
+ * <UIModal
+ *   open={isOpen}
+ *   title="Confirm Action"
+ *   onOk={handleOk}
+ *   onCancel={handleCancel}
+ * >
+ *   Are you sure you want to proceed?
+ * </UIModal>
+ *
+ * <UIModal
+ *   open={isOpen}
+ *   title="Create Workflow"
+ *   width="large"
+ *   confirmLoading={isSubmitting}
+ *   onOk={handleSubmit}
+ *   onCancel={() => setIsOpen(false)}
+ * >
+ *   <WorkflowForm />
+ * </UIModal>
+ *
+ * <UIModal
+ *   open={isOpen}
+ *   title="Details"
+ *   footer={null}
+ *   onCancel={() => setIsOpen(false)}
+ * >
+ *   <DetailsView />
+ * </UIModal>
+ * ```
+ */
+declare function UIModal({ open, title, children, width, closable, maskClosable, footer, okText, cancelText, confirmLoading, onOk, onCancel, onClose, className, style, }: UIModalProps): react_jsx_runtime.JSX.Element;
+/**
+ * UIModalConfirm - Confirmation modal shorthand
+ */
+declare const UIModalConfirm: antd_es_modal_confirm.ModalFunc;
+/**
+ * UIModalInfo - Info modal shorthand
+ */
+declare const UIModalInfo: antd_es_modal_confirm.ModalFunc;
+/**
+ * UIModalSuccess - Success modal shorthand
+ */
+declare const UIModalSuccess: antd_es_modal_confirm.ModalFunc;
+/**
+ * UIModalError - Error modal shorthand
+ */
+declare const UIModalError: antd_es_modal_confirm.ModalFunc;
+/**
+ * UIModalWarning - Warning modal shorthand
+ */
+declare const UIModalWarning: antd_es_modal_confirm.ModalFunc;
+
+type UITooltipPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
+interface UITooltipProps {
+    /** Tooltip content */
+    title: React$1.ReactNode;
+    /** Element to attach tooltip to */
+    children: React$1.ReactNode;
+    /** Tooltip placement */
+    placement?: UITooltipPlacement;
+    /** Show arrow */
+    arrow?: boolean;
+    /** Trigger mode */
+    trigger?: 'hover' | 'focus' | 'click';
+    /** Show/hide controlled */
+    open?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * UITooltip - Tooltip overlay
+ *
+ * @example
+ * ```tsx
+ * <UITooltip title="Click to save">
+ *   <UIButton>Save</UIButton>
+ * </UITooltip>
+ *
+ * <UITooltip title="Additional information" placement="right">
+ *   <InfoIcon />
+ * </UITooltip>
+ *
+ * <UITooltip title="Detailed help text" trigger="click">
+ *   <HelpIcon />
+ * </UITooltip>
+ * ```
+ */
+declare function UITooltip({ title, children, placement, arrow, trigger, open, className, }: UITooltipProps): react_jsx_runtime.JSX.Element;
+
+interface UIDrawerProps extends DrawerProps {
+}
+declare function UIDrawer(props: UIDrawerProps): react_jsx_runtime.JSX.Element;
+
+interface UIPopconfirmProps extends PopconfirmProps {
+}
+declare function UIPopconfirm(props: UIPopconfirmProps): react_jsx_runtime.JSX.Element;
+
+interface UIPopoverProps extends PopoverProps {
+}
+declare function UIPopover(props: UIPopoverProps): react_jsx_runtime.JSX.Element;
+
+interface UIMarkdownViewerProps {
+    /** Markdown content */
+    content: string;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles */
+    style?: React$1.CSSProperties;
+}
+/**
+ * UIMarkdownViewer - Markdown content viewer
+ *
+ * Note: This is a basic implementation. For production use, consider:
+ * - react-markdown for full markdown parsing
+ * - rehype-highlight for syntax highlighting
+ * - rehype-sanitize for XSS protection
+ *
+ * @example
+ * ```tsx
+ * <UIMarkdownViewer content={markdownText} />
+ *
+ * <UIMarkdownViewer
+ *   content="# Hello World\n\nThis is **bold** text"
+ * />
+ * ```
+ */
+declare function UIMarkdownViewer({ content, className, style: customStyle, }: UIMarkdownViewerProps): react_jsx_runtime.JSX.Element;
+
+interface UIJsonViewerProps {
+    /** JSON data to display */
+    data: any;
+    /** Collapsed by default */
+    collapsed?: boolean;
+    /** Indentation size */
+    indent?: number;
+    /** Show line numbers */
+    showLineNumbers?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional styles */
+    style?: React$1.CSSProperties;
+}
+/**
+ * UIJsonViewer - JSON content viewer
+ *
+ * Note: This is a basic implementation. For production use, consider:
+ * - react-json-view for interactive JSON viewer
+ * - @uiw/react-json-view for modern alternative
+ *
+ * @example
+ * ```tsx
+ * <UIJsonViewer data={jsonData} />
+ *
+ * <UIJsonViewer
+ *   data={{ name: "John", age: 30, active: true }}
+ *   collapsed={false}
+ *   showLineNumbers
+ * />
+ *
+ * <UIJsonViewer
+ *   data={apiResponse}
+ *   indent={4}
+ * />
+ * ```
+ */
+declare function UIJsonViewer({ data, collapsed: _collapsed, indent, showLineNumbers, className, style: customStyle, }: UIJsonViewerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * UIDiffViewer — renders unified git diff with line highlighting.
+ * Uses design tokens for theming (light/dark compatible).
+ */
+interface UIDiffViewerProps {
+    /** Raw diff string (git diff output) */
+    diff: string;
+    /** Show line numbers (default: true) */
+    showLineNumbers?: boolean;
+    /** Max height in pixels (default: 500) */
+    maxHeight?: number;
+    /** Custom className */
+    className?: string;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+declare function UIDiffViewer({ diff, showLineNumbers, maxHeight, className, style, }: UIDiffViewerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Data contracts for UIKit components.
+ *
+ * These types define the expected data shapes for REST API responses
+ * that feed UIKit components (UITable, UISelect, etc.).
+ * Used by both REST handlers (producing data) and Studio UI (consuming data).
+ */
+interface TableRow {
+    [key: string]: unknown;
+}
+interface TableData<T extends TableRow = TableRow> {
+    rows: T[];
+    total?: number;
+}
+interface SelectOptionItem {
+    label: string;
+    value: string;
+    description?: string;
+    icon?: string;
+    disabled?: boolean;
+}
+interface SelectData {
+    options: SelectOptionItem[];
+    /** Currently selected value */
+    value?: string;
+    /** Error message if loading failed */
+    error?: string;
+}
+interface MetricData {
+    label: string;
+    value: string | number;
+    trend?: 'up' | 'down' | 'neutral';
+    delta?: string | number;
+    unit?: string;
+}
+interface ListItem {
+    id: string;
+    title: string;
+    description?: string;
+    icon?: string;
+    status?: string;
+    metadata?: Record<string, unknown>;
+}
+interface ListData {
+    items: ListItem[];
+    total?: number;
+}
+
+export { type ChartColorPalette, type ChartMetricConfig, type ListData, type ListItem, type MetricData, type SelectData, type SelectOptionItem, type TableData, type TableRow, UIAccordion, type UIAccordionItem, type UIAccordionProps, UIAlert, type UIAlertProps, type UIAlertVariant, UIAreaChart, type UIAreaChartProps, UIAvatar, UIAvatarGroup, type UIAvatarProps, UIBadge, type UIBadgeProps, type UIBadgeVariant, UIBarChart, type UIBarChartProps, UIBox, type UIBoxProps, type UIBoxSpacingValue, UIBreadcrumb, type UIBreadcrumbItem, type UIBreadcrumbProps, UIButton, type UIButtonProps, type UIButtonVariant, UICard, type UICardProps, type UICardVariant, UICheckbox, UICheckboxGroup, type UICheckboxGroupProps, type UICheckboxOption, type UICheckboxProps, UICol, type UIColProps, UIColumnChart, type UIColumnChartProps, UIDatePicker, type UIDatePickerProps, UIDescriptions, UIDescriptionsItem, type UIDescriptionsProps, UIDiffViewer, type UIDiffViewerProps, UIDivider, type UIDividerProps, UIDrawer, type UIDrawerProps, UIDropdown, UIDropdownButton, type UIDropdownProps, UIEmptyState, type UIEmptyStateProps, UIErrorState, type UIErrorStateProps, UIFlex, type UIFlexProps, type UIFlexSpacingValue, UIForm, UIFormItem, type UIFormLayout, UIFormList, type UIFormProps, UIHeader, type UIHeaderProps, UIIcon, UIIconButton, type UIIconColor, type UIIconProps, type UIIconSize, UIInput, UIInputNumber, type UIInputNumberProps, UIInputPassword, type UIInputProps, UIInputSearch, UIInputTextArea, UIJsonViewer, type UIJsonViewerProps, UILineChart, type UILineChartProps, UIList, UIListItem, UIListItemMeta, type UIListProps, UIMarkdownViewer, type UIMarkdownViewerProps, UIMenu, type UIMenuProps, UIMessage, type UIMessageAPI, UIMetricCard, type UIMetricCardProps, UIModal, UIModalConfirm, UIModalError, UIModalInfo, type UIModalProps, UIModalSuccess, UIModalWarning, type UIModalWidth, UINotification, type UINotificationAPI, type UINotificationArgs, UIPage, type UIPageBreadcrumbItem, UIPageHeader, type UIPageHeaderProps, type UIPageProps, UIPageSection, type UIPageSectionProps, type UIPageWidth, UIPieChart, type UIPieChartProps, UIPopconfirm, type UIPopconfirmProps, UIPopover, type UIPopoverProps, UIProgress, type UIProgressProps, UIRadio, UIRadioGroup, type UIRadioGroupProps, type UIRadioProps, UIRangePicker, UIResult, type UIResultProps, UIRow, type UIRowProps, UISegmented, type UISegmentedProps, UISelect, type UISelectOption, type UISelectProps, UIShimmerText, type UIShimmerTextProps, UISkeleton, UISkeletonButton, UISkeletonImage, UISkeletonInput, UISkeletonNode, type UISkeletonProps, UISkeletonText, type UISkeletonTextProps, UISlider, type UISliderProps, UISpace, UISpaceCompact, type UISpaceProps, UISpin, type UISpinProps, UIStack, type UIStackAlign, type UIStackDirection, type UIStackProps, type UIStackSpacing, UIStatistic, UIStatisticCountdown, type UIStatisticProps, UIStatisticsChart, type UIStatisticsChartProps, UISteps, type UIStepsProps, UISwitch, type UISwitchLabelPosition, type UISwitchProps, type UISwitchSize, type UITabItem, UITable, type UITableColumn, type UITableProps, UITabs, type UITabsProps, UITag, type UITagProps, type UITagVariant, UIText, type UITextColor, type UITextProps, type UITextSize, type UITextWeight, type UIThemeResult, UITimePicker, type UITimePickerProps, UITimeline, UITimelineItem, type UITimelineProps, UITitle, type UITitleLevel, type UITitleProps, UITooltip, type UITooltipPlacement, type UITooltipProps, UITree, UITreeDirectoryTree, UITreeNode, type UITreeProps, UITypographyLink, type UITypographyLinkProps, UITypographyParagraph, type UITypographyParagraphProps, UITypographyText, type UITypographyTextProps, UIUpload, UIUploadDragger, type UIUploadProps, createFillFunction, registerIconRenderer, useChartColors, useUIForm, useUIMessage, useUINotification, useUITheme };