@lantos1618/better-ui 0.3.1 → 0.4.0

package/dist/components/index.d.mts

@@ -0,0 +1,258 @@
+import { f as ToolStateStore, g as ToolStateEntry } from '../ThemeProvider-BYeqWMsn.mjs';
+export { m as Chat, d as ChatProps, h as ChatProvider, C as ChatProviderProps, k as Composer, b as ComposerProps, j as Message, M as MessageProps, p as ThemeProvider, e as ThemeProviderProps, i as Thread, a as ThreadProps, T as ToolPartInfo, l as ToolResult, c as ToolResultProps, n as createToolStateStore, u as useChatContext, o as useToolState } from '../ThemeProvider-BYeqWMsn.mjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { T as Tool } from '../tool-Ca2x-VNK.mjs';
+import React from 'react';
+import 'ai';
+import '../types-CAOfGUPH.mjs';
+import 'zod';
+
+interface MarkdownProps {
+    content: string;
+    className?: string;
+}
+/**
+ * Renders markdown content with GFM support, styled code blocks, and a copy button.
+ */
+declare function Markdown({ content, className }: MarkdownProps): react_jsx_runtime.JSX.Element;
+
+interface PanelProps {
+    toolStateStore: ToolStateStore;
+    tools: Record<string, Tool>;
+    getOnAction: (toolCallId: string, toolName: string) => (input: Record<string, unknown>) => void;
+    className?: string;
+    /** When set, only show output from this specific tool name */
+    tool?: string;
+    /** Tool names to exclude from selection */
+    excludeTools?: string[];
+    /** Maximum number of items to display (default 5) */
+    maxItems?: number;
+}
+declare function Panel({ toolStateStore, tools, getOnAction, className, tool: filterTool, excludeTools, maxItems }: PanelProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanel({ className, tool, excludeTools, maxItems }: {
+    className?: string;
+    tool?: string;
+    excludeTools?: string[];
+    maxItems?: number;
+}): react_jsx_runtime.JSX.Element;
+
+type ToolEffectCallback = (entry: ToolStateEntry, toolCallId: string) => void;
+/**
+ * Subscribe to tool state changes and fire a callback when a specific tool produces output.
+ * Only fires once per version to prevent duplicate callbacks.
+ */
+declare function useToolEffect(store: ToolStateStore, toolName: string, callback: ToolEffectCallback): void;
+
+interface ToolOutputResult<T = unknown> {
+    data: T | null;
+    loading: boolean;
+    error: string | null;
+    toolCallId: string | null;
+}
+/**
+ * Subscribe to the latest output for a specific tool by name.
+ * Scans all store entries for matching `toolName`, picks the most recent.
+ */
+declare function useToolOutput<T = unknown>(store: ToolStateStore, toolName: string): ToolOutputResult<T>;
+
+/**
+ * Convenience wrapper that grabs the store from ChatProvider context.
+ * Must be used within a <ChatProvider>.
+ */
+declare function useChatToolOutput<T = unknown>(toolName: string): ToolOutputResult<T>;
+
+interface QuestionOption {
+    label: string;
+    value: string;
+    description?: string;
+}
+interface QuestionViewProps {
+    /** The question text */
+    question: string;
+    /** Available options */
+    options: QuestionOption[];
+    /** Selection mode */
+    mode?: 'single' | 'multi';
+    /** Currently selected value(s) */
+    selected?: string | string[] | null;
+    /** Called when user selects an option */
+    onSelect?: (value: string | string[]) => void;
+    /** Allow freeform text input as an alternative to options */
+    allowFreeform?: boolean;
+    /** Loading state (e.g. after selection is submitted) */
+    loading?: boolean;
+    /** Additional CSS class for the root element */
+    className?: string;
+}
+declare function QuestionView({ question, options, mode, selected, onSelect, allowFreeform, loading, className, }: QuestionViewProps): react_jsx_runtime.JSX.Element;
+
+interface FormField {
+    name: string;
+    label: string;
+    type?: 'text' | 'number' | 'email' | 'url' | 'textarea' | 'select' | 'toggle';
+    required?: boolean;
+    placeholder?: string;
+    /** Options for select fields */
+    options?: string[];
+    defaultValue?: string;
+    /** Hint text below the field */
+    hint?: string;
+}
+interface FormViewProps {
+    /** Form title */
+    title?: string;
+    /** Description text */
+    description?: string;
+    /** Field definitions */
+    fields: FormField[];
+    /** Pre-filled values */
+    values?: Record<string, string>;
+    /** Whether the form has been submitted */
+    submitted?: boolean;
+    /** Submit button label */
+    submitLabel?: string;
+    /** Called with validated form data */
+    onSubmit?: (values: Record<string, string>) => void;
+    /** Loading state */
+    loading?: boolean;
+    /** Additional CSS class for the root element */
+    className?: string;
+}
+declare function FormView({ title, description, fields, values: initialValues, submitted, submitLabel, onSubmit, loading, className, }: FormViewProps): react_jsx_runtime.JSX.Element;
+
+interface DataTableColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    align?: 'left' | 'right' | 'center';
+    /** Format cell value for display */
+    format?: (value: unknown) => string;
+}
+interface DataTableViewProps {
+    /** Column definitions */
+    columns: DataTableColumn[];
+    /** Row data — each row is a key-value object */
+    rows: Array<Record<string, unknown>>;
+    /** Table title */
+    title?: string;
+    /** Caption below table */
+    caption?: string;
+    /** Max rows before pagination (0 = show all) */
+    pageSize?: number;
+    /** Loading state */
+    loading?: boolean;
+    /** Additional CSS class for the root element */
+    className?: string;
+}
+declare function DataTableView({ columns, rows, title, caption, pageSize, loading, className, }: DataTableViewProps): react_jsx_runtime.JSX.Element;
+
+interface ProgressStep {
+    label: string;
+    status: 'pending' | 'active' | 'done' | 'error';
+    detail?: string;
+}
+interface ProgressViewProps {
+    /** Title above the progress indicator */
+    title?: string;
+    /** Step-based mode */
+    steps?: ProgressStep[];
+    /** Bar mode — percentage 0-100 */
+    percent?: number;
+    /** Label for bar mode */
+    label?: string;
+    /** Loading/animating state */
+    loading?: boolean;
+    /** Additional CSS class for the root element */
+    className?: string;
+}
+declare function ProgressView({ title, steps, percent, label, loading, className, }: ProgressViewProps): react_jsx_runtime.JSX.Element | null;
+
+interface MediaItem {
+    url: string;
+    type: 'image' | 'video' | 'audio';
+    alt?: string;
+    caption?: string;
+}
+interface MediaDisplayViewProps {
+    /** Media items to display */
+    items: MediaItem[];
+    /** Layout mode */
+    layout?: 'grid' | 'stack';
+    /** Title */
+    title?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Additional CSS class for the root element */
+    className?: string;
+}
+declare function MediaDisplayView({ items, layout, title, loading, className, }: MediaDisplayViewProps): react_jsx_runtime.JSX.Element | null;
+
+interface CodeBlockViewProps {
+    /** The code content */
+    code: string;
+    /** Programming language for display label */
+    language?: string;
+    /** Title above the code block */
+    title?: string;
+    /** Show line numbers */
+    showLineNumbers?: boolean;
+    /** Diff mode: show before/after */
+    diff?: {
+        before: string;
+        after: string;
+    };
+    /** Loading state */
+    loading?: boolean;
+    /** Additional CSS class for the root element */
+    className?: string;
+}
+declare function CodeBlockView({ code, language, title, showLineNumbers, diff, loading, className, }: CodeBlockViewProps): react_jsx_runtime.JSX.Element;
+
+interface Toast {
+    id: string;
+    message: string;
+    type: 'success' | 'error' | 'info' | 'warning';
+    /** Auto-dismiss after ms (0 = manual dismiss) */
+    duration?: number;
+}
+interface ToastContextValue {
+    toast: (message: string, type?: Toast['type'], duration?: number) => void;
+    dismiss: (id: string) => void;
+}
+/**
+ * Hook to show toasts from any component.
+ * Must be used within a ToastProvider.
+ */
+declare function useToast(): ToastContextValue;
+declare function ToastProvider({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface UploadedFile {
+    name: string;
+    size: number;
+    type: string;
+    url?: string;
+}
+interface FileUploadViewProps {
+    /** Accepted file types (e.g. "image/*,.pdf") */
+    accept?: string;
+    /** Max file size in bytes */
+    maxSize?: number;
+    /** Allow multiple files */
+    multiple?: boolean;
+    /** Already-uploaded files to display */
+    files?: UploadedFile[];
+    /** Called when user selects files */
+    onUpload?: (files: File[]) => void;
+    /** Title */
+    title?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Additional CSS class for the root element */
+    className?: string;
+}
+declare function FileUploadView({ accept, maxSize, multiple, files, onUpload, title, loading, className, }: FileUploadViewProps): react_jsx_runtime.JSX.Element;
+
+export { ChatPanel, CodeBlockView, type CodeBlockViewProps, type DataTableColumn, DataTableView, type DataTableViewProps, FileUploadView, type FileUploadViewProps, type FormField, FormView, type FormViewProps, Markdown, type MarkdownProps, MediaDisplayView, type MediaDisplayViewProps, type MediaItem, Panel, type PanelProps, type ProgressStep, ProgressView, type ProgressViewProps, type QuestionOption, QuestionView, type QuestionViewProps, type Toast, ToastProvider, type ToolEffectCallback, type ToolOutputResult, ToolStateEntry, ToolStateStore, type UploadedFile, useChatToolOutput, useToast, useToolEffect, useToolOutput };

package/dist/components/index.d.ts

@@ -0,0 +1,258 @@
+import { f as ToolStateStore, g as ToolStateEntry } from '../ThemeProvider-BaVZaDBO.js';
+export { m as Chat, d as ChatProps, h as ChatProvider, C as ChatProviderProps, k as Composer, b as ComposerProps, j as Message, M as MessageProps, p as ThemeProvider, e as ThemeProviderProps, i as Thread, a as ThreadProps, T as ToolPartInfo, l as ToolResult, c as ToolResultProps, n as createToolStateStore, u as useChatContext, o as useToolState } from '../ThemeProvider-BaVZaDBO.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { T as Tool } from '../tool-Ca2x-VNK.js';
+import React from 'react';
+import 'ai';
+import '../types-CAOfGUPH.js';
+import 'zod';
+
+interface MarkdownProps {
+    content: string;
+    className?: string;
+}
+/**
+ * Renders markdown content with GFM support, styled code blocks, and a copy button.
+ */
+declare function Markdown({ content, className }: MarkdownProps): react_jsx_runtime.JSX.Element;
+
+interface PanelProps {
+    toolStateStore: ToolStateStore;
+    tools: Record<string, Tool>;
+    getOnAction: (toolCallId: string, toolName: string) => (input: Record<string, unknown>) => void;
+    className?: string;
+    /** When set, only show output from this specific tool name */
+    tool?: string;
+    /** Tool names to exclude from selection */
+    excludeTools?: string[];
+    /** Maximum number of items to display (default 5) */
+    maxItems?: number;
+}
+declare function Panel({ toolStateStore, tools, getOnAction, className, tool: filterTool, excludeTools, maxItems }: PanelProps): react_jsx_runtime.JSX.Element;
+declare function ChatPanel({ className, tool, excludeTools, maxItems }: {
+    className?: string;
+    tool?: string;
+    excludeTools?: string[];
+    maxItems?: number;
+}): react_jsx_runtime.JSX.Element;
+
+type ToolEffectCallback = (entry: ToolStateEntry, toolCallId: string) => void;
+/**
+ * Subscribe to tool state changes and fire a callback when a specific tool produces output.
+ * Only fires once per version to prevent duplicate callbacks.
+ */
+declare function useToolEffect(store: ToolStateStore, toolName: string, callback: ToolEffectCallback): void;
+
+interface ToolOutputResult<T = unknown> {
+    data: T | null;
+    loading: boolean;
+    error: string | null;
+    toolCallId: string | null;
+}
+/**
+ * Subscribe to the latest output for a specific tool by name.
+ * Scans all store entries for matching `toolName`, picks the most recent.
+ */
+declare function useToolOutput<T = unknown>(store: ToolStateStore, toolName: string): ToolOutputResult<T>;
+
+/**
+ * Convenience wrapper that grabs the store from ChatProvider context.
+ * Must be used within a <ChatProvider>.
+ */
+declare function useChatToolOutput<T = unknown>(toolName: string): ToolOutputResult<T>;
+
+interface QuestionOption {
+    label: string;
+    value: string;
+    description?: string;
+}
+interface QuestionViewProps {
+    /** The question text */
+    question: string;
+    /** Available options */
+    options: QuestionOption[];
+    /** Selection mode */
+    mode?: 'single' | 'multi';
+    /** Currently selected value(s) */
+    selected?: string | string[] | null;
+    /** Called when user selects an option */
+    onSelect?: (value: string | string[]) => void;
+    /** Allow freeform text input as an alternative to options */
+    allowFreeform?: boolean;
+    /** Loading state (e.g. after selection is submitted) */
+    loading?: boolean;
+    /** Additional CSS class for the root element */
+    className?: string;
+}
+declare function QuestionView({ question, options, mode, selected, onSelect, allowFreeform, loading, className, }: QuestionViewProps): react_jsx_runtime.JSX.Element;
+
+interface FormField {
+    name: string;
+    label: string;
+    type?: 'text' | 'number' | 'email' | 'url' | 'textarea' | 'select' | 'toggle';
+    required?: boolean;
+    placeholder?: string;
+    /** Options for select fields */
+    options?: string[];
+    defaultValue?: string;
+    /** Hint text below the field */
+    hint?: string;
+}
+interface FormViewProps {
+    /** Form title */
+    title?: string;
+    /** Description text */
+    description?: string;
+    /** Field definitions */
+    fields: FormField[];
+    /** Pre-filled values */
+    values?: Record<string, string>;
+    /** Whether the form has been submitted */
+    submitted?: boolean;
+    /** Submit button label */
+    submitLabel?: string;
+    /** Called with validated form data */
+    onSubmit?: (values: Record<string, string>) => void;
+    /** Loading state */
+    loading?: boolean;
+    /** Additional CSS class for the root element */
+    className?: string;
+}
+declare function FormView({ title, description, fields, values: initialValues, submitted, submitLabel, onSubmit, loading, className, }: FormViewProps): react_jsx_runtime.JSX.Element;
+
+interface DataTableColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    align?: 'left' | 'right' | 'center';
+    /** Format cell value for display */
+    format?: (value: unknown) => string;
+}
+interface DataTableViewProps {
+    /** Column definitions */
+    columns: DataTableColumn[];
+    /** Row data — each row is a key-value object */
+    rows: Array<Record<string, unknown>>;
+    /** Table title */
+    title?: string;
+    /** Caption below table */
+    caption?: string;
+    /** Max rows before pagination (0 = show all) */
+    pageSize?: number;
+    /** Loading state */
+    loading?: boolean;
+    /** Additional CSS class for the root element */
+    className?: string;
+}
+declare function DataTableView({ columns, rows, title, caption, pageSize, loading, className, }: DataTableViewProps): react_jsx_runtime.JSX.Element;
+
+interface ProgressStep {
+    label: string;
+    status: 'pending' | 'active' | 'done' | 'error';
+    detail?: string;
+}
+interface ProgressViewProps {
+    /** Title above the progress indicator */
+    title?: string;
+    /** Step-based mode */
+    steps?: ProgressStep[];
+    /** Bar mode — percentage 0-100 */
+    percent?: number;
+    /** Label for bar mode */
+    label?: string;
+    /** Loading/animating state */
+    loading?: boolean;
+    /** Additional CSS class for the root element */
+    className?: string;
+}
+declare function ProgressView({ title, steps, percent, label, loading, className, }: ProgressViewProps): react_jsx_runtime.JSX.Element | null;
+
+interface MediaItem {
+    url: string;
+    type: 'image' | 'video' | 'audio';
+    alt?: string;
+    caption?: string;
+}
+interface MediaDisplayViewProps {
+    /** Media items to display */
+    items: MediaItem[];
+    /** Layout mode */
+    layout?: 'grid' | 'stack';
+    /** Title */
+    title?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Additional CSS class for the root element */
+    className?: string;
+}
+declare function MediaDisplayView({ items, layout, title, loading, className, }: MediaDisplayViewProps): react_jsx_runtime.JSX.Element | null;
+
+interface CodeBlockViewProps {
+    /** The code content */
+    code: string;
+    /** Programming language for display label */
+    language?: string;
+    /** Title above the code block */
+    title?: string;
+    /** Show line numbers */
+    showLineNumbers?: boolean;
+    /** Diff mode: show before/after */
+    diff?: {
+        before: string;
+        after: string;
+    };
+    /** Loading state */
+    loading?: boolean;
+    /** Additional CSS class for the root element */
+    className?: string;
+}
+declare function CodeBlockView({ code, language, title, showLineNumbers, diff, loading, className, }: CodeBlockViewProps): react_jsx_runtime.JSX.Element;
+
+interface Toast {
+    id: string;
+    message: string;
+    type: 'success' | 'error' | 'info' | 'warning';
+    /** Auto-dismiss after ms (0 = manual dismiss) */
+    duration?: number;
+}
+interface ToastContextValue {
+    toast: (message: string, type?: Toast['type'], duration?: number) => void;
+    dismiss: (id: string) => void;
+}
+/**
+ * Hook to show toasts from any component.
+ * Must be used within a ToastProvider.
+ */
+declare function useToast(): ToastContextValue;
+declare function ToastProvider({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface UploadedFile {
+    name: string;
+    size: number;
+    type: string;
+    url?: string;
+}
+interface FileUploadViewProps {
+    /** Accepted file types (e.g. "image/*,.pdf") */
+    accept?: string;
+    /** Max file size in bytes */
+    maxSize?: number;
+    /** Allow multiple files */
+    multiple?: boolean;
+    /** Already-uploaded files to display */
+    files?: UploadedFile[];
+    /** Called when user selects files */
+    onUpload?: (files: File[]) => void;
+    /** Title */
+    title?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Additional CSS class for the root element */
+    className?: string;
+}
+declare function FileUploadView({ accept, maxSize, multiple, files, onUpload, title, loading, className, }: FileUploadViewProps): react_jsx_runtime.JSX.Element;
+
+export { ChatPanel, CodeBlockView, type CodeBlockViewProps, type DataTableColumn, DataTableView, type DataTableViewProps, FileUploadView, type FileUploadViewProps, type FormField, FormView, type FormViewProps, Markdown, type MarkdownProps, MediaDisplayView, type MediaDisplayViewProps, type MediaItem, Panel, type PanelProps, type ProgressStep, ProgressView, type ProgressViewProps, type QuestionOption, QuestionView, type QuestionViewProps, type Toast, ToastProvider, type ToolEffectCallback, type ToolOutputResult, ToolStateEntry, ToolStateStore, type UploadedFile, useChatToolOutput, useToast, useToolEffect, useToolOutput };