@rezi-ui/core 0.1.0-alpha.60 → 0.1.0-alpha.68

package/dist/widgets/ui.js

@@ -1,728 +1,13 @@
 /**
- * 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 { routerBreadcrumb as buildRouterBreadcrumb, routerTabs as buildRouterTabs, } from "../router/helpers.js";
-import { createAccordionWidgetVNode } from "./accordion.js";
-import { createBreadcrumbWidgetVNode } from "./breadcrumb.js";
-import { createPaginationWidgetVNode } from "./pagination.js";
-import { createTabsWidgetVNode } from "./tabs.js";
-function isUiChildren(value) {
-    return Array.isArray(value);
-}
-function filterChildren(children) {
-    const out = [];
-    for (const child of children) {
-        if (child === false || child === null || child === undefined)
-            continue;
-        if (isUiChildren(child)) {
-            out.push(...filterChildren(child));
-            continue;
-        }
-        out.push(child);
-    }
-    return out;
-}
-function maybeReverseChildren(children, reverse) {
-    if (reverse !== true || children.length <= 1)
-        return children;
-    return Object.freeze([...children].reverse());
-}
-function isTextProps(v) {
-    return (typeof v === "object" &&
-        v !== null &&
-        ("style" in v ||
-            "id" in v ||
-            "key" in v ||
-            "variant" in v ||
-            "textOverflow" in v ||
-            "maxWidth" in v ||
-            "wrap" in v));
-}
-function resolveButtonIntent(props) {
-    if (props.intent === undefined || props.dsVariant !== undefined)
-        return props;
-    switch (props.intent) {
-        case "primary":
-            return { ...props, dsVariant: "solid", dsTone: props.dsTone ?? "primary" };
-        case "secondary":
-            return { ...props, dsVariant: "soft", dsTone: props.dsTone ?? "default" };
-        case "danger":
-            return { ...props, dsVariant: "outline", dsTone: props.dsTone ?? "danger" };
-        case "success":
-            return { ...props, dsVariant: "soft", dsTone: props.dsTone ?? "success" };
-        case "warning":
-            return { ...props, dsVariant: "soft", dsTone: props.dsTone ?? "warning" };
-        case "link":
-            return {
-                ...props,
-                dsVariant: "ghost",
-                dsTone: props.dsTone ?? "default",
-                dsSize: props.dsSize ?? "sm",
-            };
-    }
-}
-function resolveBoxPreset(props) {
-    const { preset, ...rest } = props;
-    if (preset === undefined)
-        return props;
-    switch (preset) {
-        case "card":
-            return { preset, border: "rounded", p: 1, ...rest };
-        case "surface":
-            return { preset, border: "none", p: 1, ...rest };
-        case "well":
-            return { preset, border: "single", p: 1, ...rest };
-        case "elevated":
-            return { preset, border: "single", p: 1, shadow: { density: "light" }, ...rest };
-    }
-}
-const EMPTY_TEXT_PROPS = Object.freeze({});
-function text(content, styleOrProps) {
-    if (styleOrProps === undefined)
-        return { kind: "text", text: content, props: EMPTY_TEXT_PROPS };
-    if (isTextProps(styleOrProps))
-        return { kind: "text", text: content, props: styleOrProps };
-    return { kind: "text", text: content, props: { style: styleOrProps } };
-}
-function box(props = {}, children = []) {
-    return { kind: "box", props: resolveBoxPreset(props), children: filterChildren(children) };
-}
-function row(props = {}, children = []) {
-    const resolved = props.gap === undefined ? { gap: DEFAULT_STACK_GAP, ...props } : props;
-    const filtered = filterChildren(children);
-    return {
-        kind: "row",
-        props: resolved,
-        children: maybeReverseChildren(filtered, resolved.reverse),
-    };
-}
-function column(props = {}, children = []) {
-    const resolved = props.gap === undefined ? { gap: DEFAULT_STACK_GAP, ...props } : props;
-    const filtered = filterChildren(children);
-    return {
-        kind: "column",
-        props: resolved,
-        children: maybeReverseChildren(filtered, resolved.reverse),
-    };
-}
-function themed(themeOverride, children = []) {
-    return { kind: "themed", props: { theme: themeOverride }, children: filterChildren(children) };
-}
-function grid(props, ...children) {
-    return { kind: "grid", props, children: filterChildren(children) };
-}
-const DEFAULT_STACK_GAP = 1;
-function spacer(props = {}) {
-    return { kind: "spacer", props };
-}
-function divider(props = {}) {
-    return { kind: "divider", props };
-}
-/**
- * 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: rgb(0, 255, 0) } })
- * ui.icon("ui.search", { fallback: true })
- * ```
- */
-function icon(iconPath, props = {}) {
-    return { kind: "icon", props: { icon: iconPath, ...props } };
-}
-/**
- * Create a spinner widget (animated loading indicator).
- *
- * @param props - Spinner props
- *
- * @example
- * ```ts
- * ui.spinner()
- * ui.spinner({ variant: "dots", label: "Loading..." })
- * ```
- */
-function spinner(props = {}) {
-    return { kind: "spinner", props };
-}
-/**
- * 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 })
- * ```
- */
-function progress(value, props = {}) {
-    return { kind: "progress", props: { value, ...props } };
-}
-/**
- * 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" })
- * ```
- */
-function skeleton(width, props = {}) {
-    return { kind: "skeleton", props: { width, ...props } };
-}
-/**
- * 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: rgb(255, 0, 0), bold: true } },
- *   { text: "File not found" },
- * ])
- * ```
- */
-function richText(spans, props = {}) {
-    return { kind: "richText", props: { spans, ...props } };
-}
-/**
- * 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: " " })
- * ```
- */
-function kbd(keys, props = {}) {
-    return { kind: "kbd", props: { keys, ...props } };
-}
-function keybindingSequenceToKbdInput(sequence) {
-    const normalized = sequence.trim();
-    if (normalized.length === 0)
-        return "";
-    const parts = normalized.split(/\s+/);
-    if (parts.length <= 1)
-        return normalized;
-    return Object.freeze(parts);
-}
-function keybindingComparator(a, b) {
-    const byMode = a.mode.localeCompare(b.mode);
-    if (byMode !== 0)
-        return byMode;
-    return a.sequence.localeCompare(b.sequence);
-}
-/**
- * Render keybindings as a formatted help table.
- *
- * Accepts output from `app.getBindings()` directly.
- */
-function keybindingHelp(bindings, options = {}) {
-    const title = options.title ?? "Keyboard Shortcuts";
-    const emptyText = options.emptyText ?? "No shortcuts registered.";
-    const showMode = options.showMode ??
-        (() => {
-            const firstMode = bindings[0]?.mode;
-            if (firstMode === undefined)
-                return false;
-            return bindings.some((binding) => binding.mode !== firstMode);
-        })();
-    const rows = options.sort === false ? [...bindings] : [...bindings].sort(keybindingComparator);
-    return column({
-        gap: 1,
-        ...(options.key === undefined ? {} : { key: options.key }),
-    }, [
-        text(title, { style: { bold: true } }),
-        divider({ char: "·" }),
-        rows.length > 0
-            ? column({ gap: 0 }, rows.map((binding, i) => {
-                const keyTokens = keybindingSequenceToKbdInput(binding.sequence);
-                const sequenceNode = Array.isArray(keyTokens)
-                    ? kbd(keyTokens, { separator: " " })
-                    : kbd(keyTokens);
-                const descriptionNode = binding.description === undefined
-                    ? text("No description", { dim: true })
-                    : text(binding.description);
-                return row({
-                    key: `keybinding-help-${binding.mode}-${binding.sequence}-${String(i)}`,
-                    gap: 1,
-                    items: "center",
-                    wrap: true,
-                }, [
-                    sequenceNode,
-                    showMode ? text(`[${binding.mode}]`, { dim: true }) : null,
-                    descriptionNode,
-                ]);
-            }))
-            : text(emptyText, { dim: true }),
-    ]);
-}
-/**
- * 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" })
- * ```
- */
-function badge(text, props = {}) {
-    return { kind: "badge", props: { text, ...props } };
-}
-/**
- * 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 })
- * ```
- */
-function status(status, props = {}) {
-    return { kind: "status", props: { status, ...props } };
-}
-/**
- * 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 })
- * ```
- */
-function tag(text, props = {}) {
-    return { kind: "tag", props: { text, ...props } };
-}
-/**
- * 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" }
- *   ]
- * })
- * ```
- */
-function gauge(value, props = {}) {
-    return { kind: "gauge", props: { value, ...props } };
-}
-/**
- * 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({ id: "compose", label: "Compose" })
- * })
- * ```
- */
-function empty(title, props = {}) {
-    return { kind: "empty", props: { title, ...props } };
-}
-/**
- * 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
- * })
- * ```
- */
-function errorDisplay(message, props = {}) {
-    return { kind: "errorDisplay", props: { message, ...props } };
-}
-/**
- * Create an error boundary widget.
- *
- * @param props - Boundary config with protected children and fallback renderer
- *
- * @example
- * ```ts
- * ui.errorBoundary({
- *   children: RiskyWidget(),
- *   fallback: (error) =>
- *     ui.column({}, [
- *       ui.errorDisplay(error.message, { title: error.code }),
- *       ui.button({ id: "retry", label: "Retry", onPress: error.retry }),
- *     ]),
- * })
- * ```
- */
-function errorBoundary(props) {
-    return { kind: "errorBoundary", props };
-}
-/**
- * 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"
- * })
- * ```
- */
-function callout(message, props = {}) {
-    return { kind: "callout", props: { message, ...props } };
-}
-function link(props) {
-    return { kind: "link", props };
-}
-function canvas(props) {
-    return { kind: "canvas", props };
-}
-function image(props) {
-    return { kind: "image", props };
-}
-function lineChart(props) {
-    return { kind: "lineChart", props };
-}
-function scatter(props) {
-    return { kind: "scatter", props };
-}
-function heatmap(props) {
-    return { kind: "heatmap", props };
-}
-/**
- * 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 })
- * ```
- */
-function sparkline(data, props = {}) {
-    return { kind: "sparkline", props: { data, ...props } };
-}
-/**
- * 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 })
- * ```
- */
-function barChart(data, props = {}) {
-    return { kind: "barChart", props: { data, ...props } };
-}
-/**
- * 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" })
- * ```
- */
-function miniChart(values, props = {}) {
-    return { kind: "miniChart", props: { values, ...props } };
-}
-function button(props) {
-    return { kind: "button", props: resolveButtonIntent(props) };
-}
-function input(props) {
-    return { kind: "input", props };
-}
-function textarea(props) {
-    return {
-        kind: "input",
-        props: {
-            ...props,
-            multiline: true,
-            rows: props.rows ?? 3,
-            wordWrap: props.wordWrap ?? true,
-        },
-    };
-}
-function focusAnnouncer(props = {}) {
-    return { kind: "focusAnnouncer", props };
-}
-function focusZone(props, children = []) {
-    return { kind: "focusZone", props, children: filterChildren(children) };
-}
-function focusTrap(props, children = []) {
-    return { kind: "focusTrap", props, children: filterChildren(children) };
-}
-function virtualList(props) {
-    return { kind: "virtualList", props: props };
-}
-function layers(propsOrChildren, children = []) {
-    if (isUiChildren(propsOrChildren)) {
-        return { kind: "layers", props: {}, children: filterChildren(propsOrChildren) };
-    }
-    return { kind: "layers", props: propsOrChildren, children: filterChildren(children) };
-}
-function panel(titleOrOptions, children = []) {
-    const options = typeof titleOrOptions === "string" ? { title: titleOrOptions } : titleOrOptions;
-    const resolvedChildren = filterChildren(children);
-    const inner = resolvedChildren.length <= 1
-        ? resolvedChildren
-        : [column({ gap: options.gap ?? 1 }, resolvedChildren)];
-    return box({
-        ...(options.id === undefined ? {} : { id: options.id }),
-        ...(options.key === undefined ? {} : { key: options.key }),
-        preset: "card",
-        ...(options.title === undefined ? {} : { title: options.title }),
-        border: options.variant ?? "rounded",
-        p: options.p ?? 1,
-        ...(options.style === undefined ? {} : { style: options.style }),
-    }, inner);
-}
-function form(optionsOrChildren, children = []) {
-    if (isUiChildren(optionsOrChildren)) {
-        return column({ gap: 1 }, optionsOrChildren);
-    }
-    const options = optionsOrChildren;
-    return column({
-        ...(options.id === undefined ? {} : { id: options.id }),
-        ...(options.key === undefined ? {} : { key: options.key }),
-        gap: options.gap ?? 1,
-    }, children);
-}
-function actions(optionsOrChildren, children = []) {
-    if (isUiChildren(optionsOrChildren)) {
-        return row({ justify: "end", gap: 1 }, optionsOrChildren);
-    }
-    const options = optionsOrChildren;
-    return row({
-        ...(options.id === undefined ? {} : { id: options.id }),
-        ...(options.key === undefined ? {} : { key: options.key }),
-        justify: "end",
-        gap: options.gap ?? 1,
-    }, children);
-}
-function center(child, options = {}) {
-    return column({
-        ...(options.id === undefined ? {} : { id: options.id }),
-        ...(options.key === undefined ? {} : { key: options.key }),
-        width: "full",
-        height: "full",
-        align: "center",
-        justify: "center",
-        ...(options.p === undefined ? {} : { p: options.p }),
-    }, [child]);
-}
-function page(options) {
-    const { id, key, header, body, footer, gap, p, width, height, ...layoutConstraints } = options;
-    return column({
-        ...(id === undefined ? {} : { id }),
-        ...(key === undefined ? {} : { key }),
-        width: width ?? "full",
-        height: height ?? "full",
-        ...layoutConstraints,
-        gap: gap ?? 1,
-        ...(p === undefined ? {} : { p }),
-    }, [header ?? null, box({ border: "none", flex: 1 }, [body]), footer ?? null]);
-}
-function appShell(options) {
-    const { id, key, header, sidebar, body, footer, gap, p, ...layoutConstraints } = options;
-    const headerNode = header ? box({ border: "rounded", px: 1, py: 0 }, [header]) : null;
-    const bodyNode = sidebar
-        ? row({ gap: 1, items: "stretch" }, [
-            box({ border: "rounded", width: sidebar.width ?? 25, p: 1 }, [sidebar.content]),
-            box({ flex: 1 }, [body]),
-        ])
-        : body;
-    const footerNode = footer ? row({ gap: 1, items: "center", wrap: true }, [footer]) : null;
-    return page({
-        ...(id === undefined ? {} : { id }),
-        ...(key === undefined ? {} : { key }),
-        header: headerNode,
-        body: bodyNode,
-        footer: footerNode,
-        gap: gap ?? 1,
-        p: p ?? 1,
-        ...layoutConstraints,
-    });
-}
-function card(optionsOrTitle, children = []) {
-    const options = typeof optionsOrTitle === "string" ? { title: optionsOrTitle } : optionsOrTitle;
-    const bodyChildren = filterChildren(children);
-    const headerActions = options.actions ?? [];
-    const cardChildren = [];
-    if (options.title !== undefined || headerActions.length > 0) {
-        cardChildren.push(row({ gap: 1, items: "center", wrap: true }, [
-            ...(options.title === undefined ? [] : [text(options.title, { variant: "heading" })]),
-            ...(headerActions.length === 0 ? [] : [spacer({ flex: 1 }), ...headerActions]),
-        ]));
-    }
-    if (options.subtitle !== undefined) {
-        cardChildren.push(text(options.subtitle, { dim: true }));
-    }
-    cardChildren.push(...bodyChildren);
-    return box({
-        ...(options.id === undefined ? {} : { id: options.id }),
-        ...(options.key === undefined ? {} : { key: options.key }),
-        preset: "card",
-        border: options.border ?? "rounded",
-        p: options.p ?? 1,
-        ...(options.style === undefined ? {} : { style: options.style }),
-    }, [column({ gap: options.gap ?? 1 }, cardChildren)]);
-}
-function toolbar(optionsOrChildren, children = []) {
-    if (isUiChildren(optionsOrChildren)) {
-        return row({ gap: 1, items: "center", wrap: true }, optionsOrChildren);
-    }
-    const options = optionsOrChildren;
-    return row({
-        ...(options.id === undefined ? {} : { id: options.id }),
-        ...(options.key === undefined ? {} : { key: options.key }),
-        gap: options.gap ?? 1,
-        items: "center",
-        wrap: true,
-    }, children);
-}
-function statusBar(options) {
-    return row({
-        ...(options.id === undefined ? {} : { id: options.id }),
-        ...(options.key === undefined ? {} : { key: options.key }),
-        width: "full",
-        items: "center",
-        ...(options.style === undefined ? {} : { style: options.style }),
-    }, [...(options.left ?? []), spacer({ flex: 1 }), ...(options.right ?? [])]);
-}
-function header(options) {
-    return box({
-        ...(options.id === undefined ? {} : { id: options.id }),
-        ...(options.key === undefined ? {} : { key: options.key }),
-        border: "rounded",
-        px: 1,
-        py: 0,
-    }, [
-        row({ gap: 1, items: "center", wrap: true }, [
-            text(options.title, { variant: "heading" }),
-            options.subtitle ? text(options.subtitle, { dim: true }) : null,
-            spacer({ flex: 1 }),
-            ...(options.actions ?? []),
-        ]),
-    ]);
-}
-function sidebar(options) {
-    const buttonNodes = options.items.map((item) => button({
-        id: `${options.id ?? "sidebar"}-${item.id}`,
-        label: item.icon ? `${item.icon} ${item.label}` : item.label,
-        onPress: () => {
-            options.onSelect?.(item.id);
-        },
-        dsVariant: options.selected === item.id ? "soft" : "ghost",
-        dsTone: options.selected === item.id ? "primary" : "default",
-    }));
-    return box({
-        ...(options.id === undefined ? {} : { id: options.id }),
-        ...(options.key === undefined ? {} : { key: options.key }),
-        border: "rounded",
-        width: options.width ?? 25,
-        p: 1,
-    }, [
-        column({ gap: 1 }, [
-            options.title ? text(options.title, { variant: "heading" }) : null,
-            column({ gap: 0 }, buttonNodes),
-        ]),
-    ]);
-}
-function masterDetail(options) {
-    return row({
-        ...(options.id === undefined ? {} : { id: options.id }),
-        ...(options.key === undefined ? {} : { key: options.key }),
-        gap: options.gap ?? 1,
-        items: "stretch",
-    }, [
-        box({ width: options.masterWidth ?? 30 }, [options.master]),
-        box({ flex: 1 }, [options.detail]),
-    ]);
-}
-/**
- * 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 const ui = {
     text,
     box,
@@ -776,543 +61,33 @@ export const ui = {
     header,
     sidebar,
     masterDetail,
-    /**
-     * Create a declarative dialog with arbitrary actions.
-     * Sugar over `ui.modal(...)` for common confirmation/message flows.
-     *
-     * @example
-     * ```ts
-     * ui.dialog({
-     *   id: "save",
-     *   title: "Unsaved Changes",
-     *   message: "Save before closing?",
-     *   actions: [
-     *     { label: "Save", intent: "primary", onPress: save },
-     *     { label: "Don't Save", intent: "danger", onPress: discard },
-     *     { label: "Cancel", onPress: cancel },
-     *   ],
-     * })
-     * ```
-     */
-    dialog(props) {
-        const { message, actions, onClose, ...modalProps } = props;
-        return {
-            kind: "modal",
-            props: {
-                ...modalProps,
-                ...(onClose !== undefined ? { onClose } : {}),
-                content: typeof message === "string" ? text(message) : message,
-                actions: actions.map((action, index) => {
-                    const intentProps = action.intent === undefined ? {} : { intent: action.intent };
-                    return button({
-                        id: action.id ?? `${modalProps.id}-action-${String(index)}`,
-                        label: action.label,
-                        onPress: action.onPress,
-                        ...intentProps,
-                        ...(action.disabled === true ? { disabled: true } : {}),
-                        ...(action.focusable === false ? { focusable: false } : {}),
-                    });
-                }),
-            },
-        };
-    },
-    /**
-     * 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 }),
-     * })
-     * ```
-     */
-    modal(props) {
-        return { kind: "modal", props };
-    },
-    /**
-     * 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 }),
-     * })
-     * ```
-     */
-    dropdown(props) {
-        return { kind: "dropdown", props };
-    },
-    /**
-     * 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,
-     * })
-     * ```
-     */
-    layer(props) {
-        return { kind: "layer", props };
-    },
-    /**
-     * 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, overflow: "middle" },
-     *     { key: "size", header: "Size", width: 10, align: "right", overflow: "clip" },
-     *     { 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 }),
-     *   stripeStyle: { odd: rgb(30, 33, 41) },
-     *   borderStyle: { variant: "double", color: rgb(130, 140, 150) },
-     * })
-     * ```
-     */
-    table(props) {
-        return { kind: "table", props: props };
-    },
-    /**
-     * 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,
-     *   onChange: (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 }),
-     *   onPress: (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,
-     * })
-     * ```
-     */
-    tree(props) {
-        return { kind: "tree", props: props };
-    },
-    /* ========== Form Widgets (GitHub issue #119) ========== */
-    /**
-     * 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(form.bind("username")),
-     * })
-     * ```
-     */
-    field(props) {
-        return { kind: "field", props, children: Object.freeze([props.children]) };
-    },
-    /**
-     * 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...",
-     * })
-     * ```
-     */
-    select(props) {
-        return { kind: "select", props };
-    },
-    /**
-     * Create a slider widget.
-     * Supports keyboard adjustment with Left/Right (or Up/Down), Home/End, and PageUp/PageDown.
-     *
-     * @example
-     * ```ts
-     * ui.slider({
-     *   id: "volume",
-     *   value: state.volume,
-     *   min: 0,
-     *   max: 100,
-     *   step: 5,
-     *   onChange: (value) => app.update({ volume: value }),
-     * })
-     * ```
-     */
-    slider(props) {
-        return { kind: "slider", props };
-    },
-    /**
-     * 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),
-     * })
-     * ```
-     */
-    checkbox(props) {
-        return { kind: "checkbox", props };
-    },
-    /**
-     * 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",
-     * })
-     * ```
-     */
-    radioGroup(props) {
-        return { kind: "radioGroup", props };
-    },
-    /* ========== Navigation Widgets ========== */
-    /**
-     * Create a tabs widget.
-     * Supports Left/Right tab switching and scoped content focus.
-     */
-    tabs(props) {
-        return createTabsWidgetVNode(props);
-    },
-    /**
-     * Create breadcrumbs from current router history.
-     */
-    routerBreadcrumb(router, routes, props = {}) {
-        return buildRouterBreadcrumb(router, routes, props);
-    },
-    /**
-     * Create tabs from registered routes with current route selection.
-     */
-    routerTabs(router, routes, props = {}) {
-        return buildRouterTabs(router, routes, props);
-    },
-    /**
-     * Create an accordion widget.
-     * Supports Up/Down header navigation and Enter/Space toggles.
-     */
-    accordion(props) {
-        return createAccordionWidgetVNode(props);
-    },
-    /**
-     * Create a breadcrumb widget.
-     * The last item is rendered as the current page (non-clickable).
-     */
-    breadcrumb(props) {
-        return createBreadcrumbWidgetVNode(props);
-    },
-    /**
-     * Create a pagination widget.
-     * Supports Left/Right navigation and optional Home/End first/last jumps.
-     */
-    pagination(props) {
-        return createPaginationWidgetVNode(props);
-    },
-    /* ========== Advanced Widgets (GitHub issue #136) ========== */
-    /**
-     * 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,
-     *   onChange: (q) => app.update({ query: q }),
-     *   onSelect: (item) => executeCommand(item),
-     *   onClose: () => app.update({ paletteOpen: false }),
-     * })
-     * ```
-     */
-    commandPalette(props) {
-        return { kind: "commandPalette", props };
-    },
-    /**
-     * 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 }),
-     *   onChange: (path, exp) => toggleExpanded(path, exp),
-     *   onPress: (path) => openFile(path),
-     * })
-     * ```
-     */
-    filePicker(props) {
-        return { kind: "filePicker", props };
-    },
-    /**
-     * 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,
-     *   onChange: (node, exp) => toggleNode(node, exp),
-     *   onSelect: (node) => selectNode(node),
-     *   onPress: (node) => openNode(node),
-     * })
-     * ```
-     */
-    fileTreeExplorer(props) {
-        return { kind: "fileTreeExplorer", props };
-    },
-    /**
-     * 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],
-     *   onChange: (sizes) => app.update({ panelSizes: sizes }),
-     * }, [
-     *   FileExplorer(),
-     *   Editor(),
-     *   LogsPanel(),
-     * ])
-     * ```
-     */
-    splitPane(props, children = []) {
-        return { kind: "splitPane", props, children };
-    },
-    /**
-     * 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()]),
-     * ])
-     * ```
-     */
-    panelGroup(props, children = []) {
-        return { kind: "panelGroup", props, children };
-    },
-    /**
-     * 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()])
-     * ```
-     */
-    resizablePanel(props = {}, children = []) {
-        return { kind: "resizablePanel", props, children };
-    },
-    /**
-     * 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,
-     *   syntaxLanguage: "typescript",
-     *   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 }),
-     * })
-     * ```
-     */
-    codeEditor(props) {
-        return { kind: "codeEditor", props };
-    },
-    /**
-     * 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),
-     * })
-     * ```
-     */
-    diffViewer(props) {
-        return { kind: "diffViewer", props };
-    },
-    /**
-     * 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,
-     *   onPress: (action) => action === "allow"
-     *     ? executeTool(state.pendingApproval)
-     *     : app.update({ pendingApproval: null }),
-     *   onAllowForSession: () => allowForSession(state.pendingApproval),
-     *   onClose: () => app.update({ pendingApproval: null }),
-     * })
-     * ```
-     */
-    toolApprovalDialog(props) {
-        return { kind: "toolApprovalDialog", props };
-    },
-    /**
-     * 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 }),
-     *   onPress: () => app.update({ logs: [] }),
-     * })
-     * ```
-     */
-    logsConsole(props) {
-        return { kind: "logsConsole", props };
-    },
-    /**
-     * 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,
-     *   onClose: (id) => app.update(s => ({
-     *     toasts: s.toasts.filter(t => t.id !== id)
-     *   })),
-     * })
-     * ```
-     */
-    toastContainer(props) {
-        return { kind: "toastContainer", props };
-    },
+    dialog,
+    modal,
+    dropdown,
+    layer,
+    table,
+    tree,
+    field,
+    select,
+    slider,
+    checkbox,
+    radioGroup,
+    tabs,
+    routerBreadcrumb,
+    routerTabs,
+    accordion,
+    breadcrumb,
+    pagination,
+    commandPalette,
+    filePicker,
+    fileTreeExplorer,
+    splitPane,
+    panelGroup,
+    resizablePanel,
+    codeEditor,
+    diffViewer,
+    toolApprovalDialog,
+    logsConsole,
+    toastContainer,
 };
 //# sourceMappingURL=ui.js.map