@rezi-ui/core 0.1.0-alpha.6 → 0.1.0-alpha.63

package/dist/widgets/ui.d.ts

@@ -1,302 +1,20 @@
 /**
- * packages/core/src/widgets/ui.ts — Widget factory functions.
- *
- * Why: Provides a convenient API for building VNode trees without manually
- * constructing discriminated union objects. Each function returns a properly
- * typed VNode for the corresponding widget.
- *
- * @see docs/widgets/index.md
- */
-import type { TextStyle } from "./style.js";
-import type { BadgeProps, BarChartItem, BarChartProps, BoxProps, ButtonProps, CalloutProps, CheckboxProps, CodeEditorProps, CommandPaletteProps, DiffViewerProps, DividerProps, DropdownProps, EmptyProps, ErrorDisplayProps, FieldProps, FilePickerProps, FileTreeExplorerProps, FocusTrapProps, FocusZoneProps, GaugeProps, IconProps, InputProps, KbdProps, LayerProps, LogsConsoleProps, MiniChartProps, ModalProps, PanelGroupProps, ProgressProps, RadioGroupProps, ResizablePanelProps, RichTextSpan, SelectProps, SkeletonProps, SpacerProps, SparklineProps, SpinnerProps, SplitPaneProps, StackProps, StatusProps, TableProps, TagProps, TextProps, ToastContainerProps, ToolApprovalDialogProps, TreeProps, VNode, VirtualListProps } from "./types.js";
-type UiChild = VNode | false | null | undefined;
-declare function text(content: string): VNode;
-declare function text(content: string, style: TextStyle): VNode;
-declare function text(content: string, props: TextProps): VNode;
-declare function box(props?: BoxProps, children?: readonly UiChild[]): VNode;
-declare function row(props?: StackProps, children?: readonly UiChild[]): VNode;
-declare function column(props?: StackProps, children?: readonly UiChild[]): VNode;
-declare function vstack(gap: number, children: readonly UiChild[]): VNode;
-declare function vstack(children: readonly UiChild[]): VNode;
-declare function hstack(gap: number, children: readonly UiChild[]): VNode;
-declare function hstack(children: readonly UiChild[]): VNode;
-declare function spacer(props?: SpacerProps): VNode;
-declare function divider(props?: DividerProps): VNode;
-/**
- * Create an icon widget.
- *
- * @param iconPath - Icon path (e.g., "status.check", "arrow.right")
- * @param props - Optional icon props
- *
- * @example
- * ```ts
- * ui.icon("status.check")
- * ui.icon("arrow.right", { style: { fg: { r: 0, g: 255, b: 0 } } })
- * ui.icon("ui.search", { fallback: true })
- * ```
- */
-declare function icon(iconPath: string, props?: Omit<IconProps, "icon">): VNode;
-/**
- * Create a spinner widget (animated loading indicator).
- *
- * @param props - Spinner props
- *
- * @example
- * ```ts
- * ui.spinner()
- * ui.spinner({ variant: "dots", label: "Loading..." })
- * ```
- */
-declare function spinner(props?: SpinnerProps): VNode;
-/**
- * Create a progress bar widget.
- *
- * @param value - Progress value from 0 to 1
- * @param props - Optional progress bar props
- *
- * @example
- * ```ts
- * ui.progress(0.75)
- * ui.progress(0.5, { variant: "blocks", showPercent: true })
- * ui.progress(0.3, { label: "Downloading:", width: 20 })
- * ```
- */
-declare function progress(value: number, props?: Omit<ProgressProps, "value">): VNode;
-/**
- * Create a skeleton loading placeholder.
- *
- * @param width - Width in cells
- * @param props - Optional skeleton props
- *
- * @example
- * ```ts
- * ui.skeleton(20)
- * ui.skeleton(10, { height: 3, variant: "rect" })
- * ```
- */
-declare function skeleton(width: number, props?: Omit<SkeletonProps, "width">): VNode;
-/**
- * Create a rich text widget with multiple styled spans.
- *
- * @param spans - Array of text spans with optional styles
- *
- * @example
- * ```ts
- * ui.richText([
- *   { text: "Error: ", style: { fg: { r: 255, g: 0, b: 0 }, bold: true } },
- *   { text: "File not found" },
- * ])
- * ```
- */
-declare function richText(spans: readonly RichTextSpan[]): VNode;
-/**
- * Create a keyboard shortcut display widget.
- *
- * @param keys - Key or keys to display
- * @param props - Optional kbd props
- *
- * @example
- * ```ts
- * ui.kbd("Ctrl+S")
- * ui.kbd(["Ctrl", "Shift", "P"])
- * ui.kbd("Cmd+K", { separator: " " })
- * ```
- */
-declare function kbd(keys: string | readonly string[], props?: Omit<KbdProps, "keys">): VNode;
-/**
- * Create a badge widget.
- *
- * @param text - Badge text
- * @param props - Optional badge props
- *
- * @example
- * ```ts
- * ui.badge("New")
- * ui.badge("Error", { variant: "error" })
- * ui.badge("3", { variant: "info" })
- * ```
- */
-declare function badge(text: string, props?: Omit<BadgeProps, "text">): VNode;
-/**
- * Create a status indicator widget.
- *
- * @param status - Status type (online, offline, away, busy, unknown)
- * @param props - Optional status props
- *
- * @example
- * ```ts
- * ui.status("online")
- * ui.status("busy", { label: "In a meeting" })
- * ui.status("away", { showLabel: true })
- * ```
- */
-declare function status(status: StatusProps["status"], props?: Omit<StatusProps, "status">): VNode;
-/**
- * Create a tag widget.
- *
- * @param text - Tag text
- * @param props - Optional tag props
- *
- * @example
- * ```ts
- * ui.tag("TypeScript")
- * ui.tag("Bug", { variant: "error" })
- * ui.tag("Feature", { variant: "info", removable: true })
- * ```
- */
-declare function tag(text: string, props?: Omit<TagProps, "text">): VNode;
-/**
- * Create a gauge widget.
- *
- * @param value - Value from 0 to 1
- * @param props - Optional gauge props
- *
- * @example
- * ```ts
- * ui.gauge(0.75)
- * ui.gauge(0.42, { label: "CPU" })
- * ui.gauge(0.9, {
- *   label: "Memory",
- *   thresholds: [
- *     { value: 0.8, variant: "warning" },
- *     { value: 0.95, variant: "error" }
- *   ]
- * })
- * ```
- */
-declare function gauge(value: number, props?: Omit<GaugeProps, "value">): VNode;
-/**
- * Create an empty state widget.
- *
- * @param title - Main title text
- * @param props - Optional empty state props
- *
- * @example
- * ```ts
- * ui.empty("No results")
- * ui.empty("No messages", {
- *   icon: "ui.mail",
- *   description: "Messages will appear here",
- *   action: ui.button("compose", "Compose")
- * })
- * ```
- */
-declare function empty(title: string, props?: Omit<EmptyProps, "title">): VNode;
-/**
- * Create an error display widget.
- *
- * @param message - Error message
- * @param props - Optional error display props
- *
- * @example
- * ```ts
- * ui.errorDisplay("Failed to load data")
- * ui.errorDisplay("Connection failed", {
- *   title: "Network Error",
- *   onRetry: () => refetch()
- * })
- * ui.errorDisplay("Unexpected error", {
- *   stack: error.stack,
- *   showStack: true
- * })
- * ```
- */
-declare function errorDisplay(message: string, props?: Omit<ErrorDisplayProps, "message">): VNode;
-/**
- * Create a callout/alert widget.
- *
- * @param message - Callout message
- * @param props - Optional callout props
- *
- * @example
- * ```ts
- * ui.callout("This action cannot be undone", { variant: "warning" })
- * ui.callout("Changes saved successfully", { variant: "success" })
- * ui.callout("New feature available", {
- *   variant: "info",
- *   title: "What's New"
- * })
- * ```
- */
-declare function callout(message: string, props?: Omit<CalloutProps, "message">): VNode;
-/**
- * Create a sparkline widget (mini inline chart using block characters).
- *
- * @param data - Array of numeric data points
- * @param props - Optional sparkline props
- *
- * @example
- * ```ts
- * ui.sparkline([10, 20, 15, 30, 25])
- * ui.sparkline(cpuHistory, { width: 10 })
- * ui.sparkline(prices, { min: 0, max: 100 })
- * ```
- */
-declare function sparkline(data: readonly number[], props?: Omit<SparklineProps, "data">): VNode;
-/**
- * Create a bar chart widget.
- *
- * @param data - Array of bar chart items
- * @param props - Optional bar chart props
- *
- * @example
- * ```ts
- * ui.barChart([
- *   { label: "TypeScript", value: 60 },
- *   { label: "JavaScript", value: 30 },
- *   { label: "Python", value: 10 },
- * ])
- * ui.barChart(stats, { orientation: "vertical", showValues: true })
- * ```
- */
-declare function barChart(data: readonly BarChartItem[], props?: Omit<BarChartProps, "data">): VNode;
-/**
- * Create a mini chart widget for compact multi-value display.
- *
- * @param values - Array of labeled values
- * @param props - Optional mini chart props
- *
- * @example
- * ```ts
- * ui.miniChart([
- *   { label: "CPU", value: 42, max: 100 },
- *   { label: "MEM", value: 78, max: 100 },
- * ])
- * ui.miniChart(metrics, { variant: "pills" })
- * ```
- */
-declare function miniChart(values: readonly {
-    label: string;
-    value: number;
-    max?: number;
-}[], props?: Omit<MiniChartProps, "values">): VNode;
-declare function button(id: string, label: string): VNode;
-declare function button(id: string, label: string, props: Omit<ButtonProps, "id" | "label">): VNode;
-declare function button(props: ButtonProps): VNode;
-declare function input(id: string, value: string): VNode;
-declare function input(id: string, value: string, props: Omit<InputProps, "id" | "value">): VNode;
-declare function input(props: InputProps): VNode;
-declare function focusZone(props: FocusZoneProps, children?: readonly UiChild[]): VNode;
-declare function focusTrap(props: FocusTrapProps, children?: readonly UiChild[]): VNode;
-declare function virtualList<T>(props: VirtualListProps<T>): VNode;
-/**
- * Widget factory functions for building VNode trees.
- *
- * @example
- * ```ts
- * ui.column({ p: 1 }, [
- *   ui.text("Hello"),
- *   ui.button({ id: "ok", label: "OK" }),
- * ])
- * ```
- */
+ * packages/core/src/widgets/ui.ts — Widget factory public facade.
+ */
+import { codeEditor, commandPalette, dialog, diffViewer, dropdown, filePicker, fileTreeExplorer, layer, logsConsole, modal, panelGroup, resizablePanel, splitPane, table, toastContainer, toolApprovalDialog, tree } from "./factories/advanced.js";
+import { box, column, divider, grid, row, spacer, text, themed } from "./factories/basic.js";
+import { badge, callout, empty, errorBoundary, errorDisplay, gauge, icon, kbd, keybindingHelp, link, progress, richText, skeleton, spinner, status, tag } from "./factories/feedback.js";
+import { button, checkbox, field, focusAnnouncer, focusTrap, focusZone, input, radioGroup, select, slider, textarea, virtualList } from "./factories/interactive.js";
+import { actions, appShell, card, center, form, header, layers, masterDetail, page, panel, sidebar, statusBar, toolbar } from "./factories/layoutShell.js";
+import { barChart, canvas, heatmap, image, lineChart, miniChart, scatter, sparkline } from "./factories/media.js";
+import { accordion, breadcrumb, pagination, routerBreadcrumb, routerTabs, tabs } from "./factories/navigation.js";
 export declare const ui: {
     readonly text: typeof text;
     readonly box: typeof box;
     readonly row: typeof row;
     readonly column: typeof column;
-    readonly vstack: typeof vstack;
-    readonly hstack: typeof hstack;
+    readonly themed: typeof themed;
+    readonly grid: typeof grid;
     readonly spacer: typeof spacer;
     readonly divider: typeof divider;
     readonly icon: typeof icon;
@@ -305,429 +23,71 @@ export declare const ui: {
     readonly skeleton: typeof skeleton;
     readonly richText: typeof richText;
     readonly kbd: typeof kbd;
+    readonly keybindingHelp: typeof keybindingHelp;
     readonly badge: typeof badge;
     readonly status: typeof status;
     readonly tag: typeof tag;
     readonly gauge: typeof gauge;
     readonly empty: typeof empty;
     readonly errorDisplay: typeof errorDisplay;
+    readonly errorBoundary: typeof errorBoundary;
     readonly callout: typeof callout;
+    readonly link: typeof link;
+    readonly canvas: typeof canvas;
+    readonly image: typeof image;
+    readonly lineChart: typeof lineChart;
+    readonly scatter: typeof scatter;
+    readonly heatmap: typeof heatmap;
     readonly sparkline: typeof sparkline;
     readonly barChart: typeof barChart;
     readonly miniChart: typeof miniChart;
     readonly button: typeof button;
     readonly input: typeof input;
+    readonly textarea: typeof textarea;
+    readonly focusAnnouncer: typeof focusAnnouncer;
     readonly focusZone: typeof focusZone;
     readonly focusTrap: typeof focusTrap;
     readonly virtualList: typeof virtualList;
-    /**
-     * Create a layers container for stacking overlays.
-     * Later children render on top (higher z-order).
-     *
-     * @example
-     * ```ts
-     * ui.layers([
-     *   MainContent(),
-     *   state.showModal && ui.modal({ ... }),
-     * ])
-     * ```
-     */
-    readonly layers: (children: readonly UiChild[]) => VNode;
-    /**
-     * Create a modal overlay.
-     * Renders centered with optional backdrop and focus trap.
-     *
-     * @example
-     * ```ts
-     * ui.modal({
-     *   id: "confirm",
-     *   title: "Confirm Action",
-     *   content: ui.text("Are you sure?"),
-     *   actions: [
-     *     ui.button({ id: "yes", label: "Yes" }),
-     *     ui.button({ id: "no", label: "No" }),
-     *   ],
-     *   onClose: () => app.update({ showModal: false }),
-     * })
-     * ```
-     */
-    readonly modal: (props: ModalProps) => VNode;
-    /**
-     * Create a dropdown menu positioned relative to an anchor.
-     * Automatically flips when near screen edge.
-     *
-     * @example
-     * ```ts
-     * ui.dropdown({
-     *   id: "file-menu",
-     *   anchorId: "file-button",
-     *   position: "below-start",
-     *   items: [
-     *     { id: "new", label: "New", shortcut: "Ctrl+N" },
-     *     { id: "open", label: "Open", shortcut: "Ctrl+O" },
-     *     { id: "divider", label: "", divider: true },
-     *     { id: "exit", label: "Exit" },
-     *   ],
-     *   onSelect: (item) => handleAction(item.id),
-     *   onClose: () => app.update({ menuOpen: false }),
-     * })
-     * ```
-     */
-    readonly dropdown: (props: DropdownProps) => VNode;
-    /**
-     * Create a generic layer in the layer stack.
-     * Use for custom overlays that need z-order control.
-     *
-     * @example
-     * ```ts
-     * ui.layer({
-     *   id: "tooltip",
-     *   content: ui.text("Tooltip text"),
-     *   zIndex: 100,
-     * })
-     * ```
-     */
-    readonly layer: (props: LayerProps) => VNode;
-    /**
-     * Create a table widget for displaying tabular data.
-     * Supports sorting, selection, and virtualization for large datasets.
-     *
-     * @example
-     * ```ts
-     * ui.table({
-     *   id: "files",
-     *   columns: [
-     *     { key: "name", header: "Name", flex: 1, sortable: true },
-     *     { key: "size", header: "Size", width: 10, align: "right" },
-     *     { key: "actions", header: "", width: 8, render: (_, row) =>
-     *       ui.button({ id: `del-${row.id}`, label: "Del" }) },
-     *   ],
-     *   data: files,
-     *   getRowKey: (f) => f.id,
-     *   selection: state.selected,
-     *   selectionMode: "multi",
-     *   onSelectionChange: (keys) => app.update({ selected: keys }),
-     *   sortColumn: state.sortCol,
-     *   sortDirection: state.sortDir,
-     *   onSort: (col, dir) => app.update({ sortCol: col, sortDir: dir }),
-     * })
-     * ```
-     */
-    readonly table: <T>(props: TableProps<T>) => VNode;
-    /**
-     * Create a tree widget for displaying hierarchical data.
-     * Supports expand/collapse, selection, and lazy loading.
-     *
-     * @example
-     * ```ts
-     * ui.tree<FileNode>({
-     *   id: "file-tree",
-     *   data: fileSystem,
-     *   getKey: (n) => n.path,
-     *   getChildren: (n) => n.children,
-     *   hasChildren: (n) => n.type === "directory",
-     *   expanded: state.expandedPaths,
-     *   selected: state.selectedPath,
-     *   onToggle: (node, exp) => app.update(s => ({
-     *     expandedPaths: exp
-     *       ? [...s.expandedPaths, node.path]
-     *       : s.expandedPaths.filter(p => p !== node.path)
-     *   })),
-     *   onSelect: (n) => app.update({ selectedPath: n.path }),
-     *   onActivate: (n) => n.type === "file" && openFile(n.path),
-     *   renderNode: (node, depth, state) => ui.row({ gap: 1 }, [
-     *     ui.text(state.expanded ? "▼" : state.hasChildren ? "▶" : " "),
-     *     ui.text(node.type === "directory" ? "📁" : "📄"),
-     *     ui.text(node.name),
-     *   ]),
-     *   showLines: true,
-     * })
-     * ```
-     */
-    readonly tree: <T>(props: TreeProps<T>) => VNode;
-    /**
-     * Create a field wrapper for form inputs.
-     * Displays label, error message, and optional hint.
-     *
-     * @example
-     * ```ts
-     * ui.field({
-     *   label: "Username",
-     *   required: true,
-     *   error: form.touched.username && form.errors.username,
-     *   hint: "Enter your email address",
-     *   children: ui.input({
-     *     id: "username",
-     *     value: form.values.username,
-     *   }),
-     * })
-     * ```
-     */
-    readonly field: (props: FieldProps) => VNode;
-    /**
-     * Create a select dropdown widget.
-     * Supports keyboard navigation with ArrowUp/Down and Enter.
-     *
-     * @example
-     * ```ts
-     * ui.select({
-     *   id: "country",
-     *   value: form.values.country,
-     *   options: [
-     *     { value: "us", label: "United States" },
-     *     { value: "uk", label: "United Kingdom" },
-     *     { value: "ca", label: "Canada" },
-     *   ],
-     *   onChange: form.handleChange("country"),
-     *   placeholder: "Select a country...",
-     * })
-     * ```
-     */
-    readonly select: (props: SelectProps) => VNode;
-    /**
-     * Create a checkbox widget.
-     * Toggles with Space key.
-     *
-     * @example
-     * ```ts
-     * ui.checkbox({
-     *   id: "remember",
-     *   checked: form.values.remember,
-     *   label: "Remember me",
-     *   onChange: (c) => form.setFieldValue("remember", c),
-     * })
-     * ```
-     */
-    readonly checkbox: (props: CheckboxProps) => VNode;
-    /**
-     * Create a radio group widget.
-     * Supports keyboard navigation with ArrowUp/Down for selection.
-     *
-     * @example
-     * ```ts
-     * ui.radioGroup({
-     *   id: "plan",
-     *   value: form.values.plan,
-     *   options: [
-     *     { value: "free", label: "Free" },
-     *     { value: "pro", label: "Pro" },
-     *     { value: "enterprise", label: "Enterprise" },
-     *   ],
-     *   onChange: form.handleChange("plan"),
-     *   direction: "vertical",
-     * })
-     * ```
-     */
-    readonly radioGroup: (props: RadioGroupProps) => VNode;
-    /**
-     * Create a command palette widget for quick-access command execution.
-     * Supports search, keyboard navigation, and multiple command sources.
-     *
-     * @example
-     * ```ts
-     * ui.commandPalette({
-     *   id: "cmd-palette",
-     *   open: state.paletteOpen,
-     *   query: state.query,
-     *   sources: [
-     *     { id: "cmds", name: "Commands", prefix: ">", getItems: getCommands },
-     *     { id: "files", name: "Files", getItems: searchFiles },
-     *   ],
-     *   selectedIndex: state.selectedIndex,
-     *   onQueryChange: (q) => app.update({ query: q }),
-     *   onSelect: (item) => executeCommand(item),
-     *   onClose: () => app.update({ paletteOpen: false }),
-     * })
-     * ```
-     */
-    readonly commandPalette: (props: CommandPaletteProps) => VNode;
-    /**
-     * Create a file picker widget for browsing workspace files.
-     * Supports expand/collapse, multi-select, and git status indicators.
-     *
-     * @example
-     * ```ts
-     * ui.filePicker({
-     *   id: "file-picker",
-     *   rootPath: "/workspace",
-     *   data: fileTree,
-     *   selectedPath: state.selectedFile,
-     *   expandedPaths: state.expanded,
-     *   modifiedPaths: state.gitModified,
-     *   onSelect: (path) => app.update({ selectedFile: path }),
-     *   onToggle: (path, exp) => toggleExpanded(path, exp),
-     *   onOpen: (path) => openFile(path),
-     * })
-     * ```
-     */
-    readonly filePicker: (props: FilePickerProps) => VNode;
-    /**
-     * Create a file tree explorer widget.
-     * Provides tree view with expand/collapse and custom node rendering.
-     *
-     * @example
-     * ```ts
-     * ui.fileTreeExplorer({
-     *   id: "explorer",
-     *   data: fileTree,
-     *   expanded: state.expanded,
-     *   selected: state.selected,
-     *   showIcons: true,
-     *   showStatus: true,
-     *   onToggle: (node, exp) => toggleNode(node, exp),
-     *   onSelect: (node) => selectNode(node),
-     *   onActivate: (node) => openNode(node),
-     * })
-     * ```
-     */
-    readonly fileTreeExplorer: (props: FileTreeExplorerProps) => VNode;
-    /**
-     * Create a split pane widget with draggable dividers.
-     * Supports horizontal/vertical splits with resize constraints.
-     *
-     * @example
-     * ```ts
-     * ui.splitPane({
-     *   id: "main-split",
-     *   direction: "horizontal",
-     *   sizes: [25, 50, 25],
-     *   minSizes: [20, 30, 20],
-     *   onResize: (sizes) => app.update({ panelSizes: sizes }),
-     * }, [
-     *   FileExplorer(),
-     *   Editor(),
-     *   LogsPanel(),
-     * ])
-     * ```
-     */
-    readonly splitPane: (props: SplitPaneProps, children?: readonly VNode[]) => VNode;
-    /**
-     * Create a panel group container for resizable panels.
-     * Manages layout and resize state for child panels.
-     *
-     * @example
-     * ```ts
-     * ui.panelGroup({
-     *   id: "panel-group",
-     *   direction: "horizontal",
-     * }, [
-     *   ui.resizablePanel({ defaultSize: 25 }, [Sidebar()]),
-     *   ui.resizablePanel({ defaultSize: 75, minSize: 50 }, [Content()]),
-     * ])
-     * ```
-     */
-    readonly panelGroup: (props: PanelGroupProps, children?: readonly VNode[]) => VNode;
-    /**
-     * Create a resizable panel within a panel group.
-     * Specifies size constraints for the panel.
-     *
-     * @example
-     * ```ts
-     * ui.resizablePanel({
-     *   defaultSize: 30,
-     *   minSize: 20,
-     *   maxSize: 50,
-     *   collapsible: true,
-     * }, [PanelContent()])
-     * ```
-     */
-    readonly resizablePanel: (props?: ResizablePanelProps, children?: readonly VNode[]) => VNode;
-    /**
-     * Create a code editor widget for multiline text editing.
-     * Supports selections, keyboard navigation, and undo/redo.
-     *
-     * @example
-     * ```ts
-     * ui.codeEditor({
-     *   id: "editor",
-     *   lines: state.lines,
-     *   cursor: state.cursor,
-     *   selection: state.selection,
-     *   scrollTop: state.scrollTop,
-     *   scrollLeft: state.scrollLeft,
-     *   lineNumbers: true,
-     *   tabSize: 2,
-     *   onChange: (lines, cursor) => app.update({ lines, cursor }),
-     *   onSelectionChange: (sel) => app.update({ selection: sel }),
-     *   onScroll: (top, left) => app.update({ scrollTop: top, scrollLeft: left }),
-     * })
-     * ```
-     */
-    readonly codeEditor: (props: CodeEditorProps) => VNode;
-    /**
-     * Create a diff viewer widget for displaying file changes.
-     * Supports unified and side-by-side modes with hunk staging.
-     *
-     * @example
-     * ```ts
-     * ui.diffViewer({
-     *   id: "diff",
-     *   diff: fileDiff,
-     *   mode: "unified",
-     *   scrollTop: state.scrollTop,
-     *   lineNumbers: true,
-     *   contextLines: 3,
-     *   onScroll: (top) => app.update({ scrollTop: top }),
-     *   onStageHunk: (i) => stageHunk(i),
-     *   onRevertHunk: (i) => revertHunk(i),
-     * })
-     * ```
-     */
-    readonly diffViewer: (props: DiffViewerProps) => VNode;
-    /**
-     * Create a tool approval dialog for reviewing tool execution.
-     * Shows tool details, risk level, and approval actions.
-     *
-     * @example
-     * ```ts
-     * ui.toolApprovalDialog({
-     *   id: "approval",
-     *   open: state.pendingApproval !== null,
-     *   request: state.pendingApproval,
-     *   onAllow: () => executeTool(state.pendingApproval),
-     *   onDeny: () => app.update({ pendingApproval: null }),
-     *   onAllowForSession: () => allowForSession(state.pendingApproval),
-     *   onClose: () => app.update({ pendingApproval: null }),
-     * })
-     * ```
-     */
-    readonly toolApprovalDialog: (props: ToolApprovalDialogProps) => VNode;
-    /**
-     * Create a logs console widget for streaming output.
-     * Supports filtering, auto-scroll, and expandable entries.
-     *
-     * @example
-     * ```ts
-     * ui.logsConsole({
-     *   id: "logs",
-     *   entries: state.logs,
-     *   autoScroll: true,
-     *   levelFilter: ["info", "warn", "error"],
-     *   scrollTop: state.logsScrollTop,
-     *   showTimestamps: true,
-     *   onScroll: (top) => app.update({ logsScrollTop: top }),
-     *   onClear: () => app.update({ logs: [] }),
-     * })
-     * ```
-     */
-    readonly logsConsole: (props: LogsConsoleProps) => VNode;
-    /**
-     * Create a toast container for non-blocking notifications.
-     * Manages toast stack and auto-dismiss.
-     *
-     * @example
-     * ```ts
-     * ui.toastContainer({
-     *   toasts: state.toasts,
-     *   position: "bottom-right",
-     *   maxVisible: 5,
-     *   onDismiss: (id) => app.update(s => ({
-     *     toasts: s.toasts.filter(t => t.id !== id)
-     *   })),
-     * })
-     * ```
-     */
-    readonly toastContainer: (props: ToastContainerProps) => VNode;
+    readonly layers: typeof layers;
+    readonly panel: typeof panel;
+    readonly form: typeof form;
+    readonly actions: typeof actions;
+    readonly center: typeof center;
+    readonly page: typeof page;
+    readonly appShell: typeof appShell;
+    readonly card: typeof card;
+    readonly toolbar: typeof toolbar;
+    readonly statusBar: typeof statusBar;
+    readonly header: typeof header;
+    readonly sidebar: typeof sidebar;
+    readonly masterDetail: typeof masterDetail;
+    readonly dialog: typeof dialog;
+    readonly modal: typeof modal;
+    readonly dropdown: typeof dropdown;
+    readonly layer: typeof layer;
+    readonly table: typeof table;
+    readonly tree: typeof tree;
+    readonly field: typeof field;
+    readonly select: typeof select;
+    readonly slider: typeof slider;
+    readonly checkbox: typeof checkbox;
+    readonly radioGroup: typeof radioGroup;
+    readonly tabs: typeof tabs;
+    readonly routerBreadcrumb: typeof routerBreadcrumb;
+    readonly routerTabs: typeof routerTabs;
+    readonly accordion: typeof accordion;
+    readonly breadcrumb: typeof breadcrumb;
+    readonly pagination: typeof pagination;
+    readonly commandPalette: typeof commandPalette;
+    readonly filePicker: typeof filePicker;
+    readonly fileTreeExplorer: typeof fileTreeExplorer;
+    readonly splitPane: typeof splitPane;
+    readonly panelGroup: typeof panelGroup;
+    readonly resizablePanel: typeof resizablePanel;
+    readonly codeEditor: typeof codeEditor;
+    readonly diffViewer: typeof diffViewer;
+    readonly toolApprovalDialog: typeof toolApprovalDialog;
+    readonly logsConsole: typeof logsConsole;
+    readonly toastContainer: typeof toastContainer;
 };
-export {};
 //# sourceMappingURL=ui.d.ts.map