@zeroman.yang/react-auto-components 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Zeroman
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,260 @@
+# React Auto Components
+
+**English** | [简体中文](docs/i18n/zh-CN/README.md) | [繁體中文](docs/i18n/zh-TW/README.md) | [日本語](docs/i18n/ja/README.md) | [한국어](docs/i18n/ko/README.md) | [Español](docs/i18n/es/README.md) | [Français](docs/i18n/fr/README.md) | [Deutsch](docs/i18n/de/README.md) | [Português (Brasil)](docs/i18n/pt-BR/README.md) | [Русский](docs/i18n/ru/README.md)
+
+A standalone, schema-driven component library for React 19, covering forms, tables, and chat. Built with TypeScript, TanStack Table 9 / Form / Virtual, Radix, and Floating UI, without Ant Design, Element Plus, or MUI. Library builds use React Compiler.
+
+[![Auto Studio Demo Preview](docs/assets/demo.png)](https://zeroman.github.io/react-auto-components/)
+
+<p align="center">
+  <a href="https://zeroman.github.io/react-auto-components/"><strong>🚀 Live Demo (GitHub Pages)</strong></a> · <a href="#demo-and-test-project">Run Locally</a> · <a href="#components">Components</a>
+</p>
+
+## Project status
+
+The current version is 0.1.0 and APIs may still change. React 19 is required. The package provides ESM and TypeScript declarations. Existing components default to Chinese; AutoChat defaults to English. Built-in text can be translated through AutoConfigProvider.config.t.
+
+Install with `pnpm add @zeroman.yang/react-auto-components` (npm and yarn work the same way). React 19 and react-dom 19 are peer dependencies. Import the stylesheet once: `import "@zeroman.yang/react-auto-components/style.css"`.
+
+- [Live Demo (GitHub Pages)](https://zeroman.github.io/react-auto-components/)
+- [Contributing](https://github.com/Zeroman/react-auto-components/blob/main/.github/CONTRIBUTING.md)
+- [Changelog](https://github.com/Zeroman/react-auto-components/blob/main/docs/CHANGELOG.md)
+- [Account setup and publishing](https://github.com/Zeroman/react-auto-components/blob/main/docs/publishing.md)
+- [MIT license](LICENSE)
+
+## Demo and test project
+
+Try the **[Online Demo](https://zeroman.github.io/react-auto-components/)** directly in your browser.
+
+To run or develop the test project locally (requires Node.js >= 22.12 and pnpm 12.5):
+
+```sh
+pnpm install --frozen-lockfile
+pnpm prepare:test-project
+pnpm --dir test-project dev
+```
+
+Open http://127.0.0.1:4173. The test project includes pages for all seven components, local/server-side/10,000-row/tree tables, CRUD, failed-submission retries, drafts, nested tabs, and dynamic row heights.
+
+The demo automatically detects the browser language, with English as the fallback. Choose a language from the header or Global settings; the selection is remembered across reloads. Select Auto to follow the browser again. Ten languages are supported. Pages fill the viewport, with tables and long panels scrolling inside their own areas.
+
+Every example page includes a **View code** button that opens its real source file in a dialog, with file tabs, one-click copy, and a GitHub link.
+
+`test-project` has its own package.json and lockfile. It installs the actual output of `pnpm pack`, with no source aliases. Run `pnpm prepare:test-project` again after changing the library; the script uses content-hashed filenames to avoid stale tarball caches.
+
+### Automated demo workflow
+
+The demo build and screenshot capture process is automated and reusable:
+
+```sh
+pnpm demo:update       # Full update: rebuilds library, updates test-project, builds demo-dist, and refreshes screenshot
+pnpm demo:build        # Compiles static demo files to demo-dist for GitHub Pages
+pnpm demo:screenshot   # Takes fresh high-resolution screenshot using headless Chromium to docs/assets/demo.png
+```
+
+Pushes to `main` branch automatically build and publish static files to GitHub Pages via GitHub Actions.
+
+## Usage
+
+```tsx
+import { useState } from "react";
+import {
+  AutoConfigProvider,
+  AutoDialogProvider,
+  AutoTable,
+  type AutoColumn,
+  type Field,
+} from "@zeroman.yang/react-auto-components";
+import "@zeroman.yang/react-auto-components/style.css";
+
+type Person = { id: number; name: string; enabled: boolean };
+const columns: AutoColumn<Person>[] = [
+  { key: "name", label: "Name", sortable: true },
+  {
+    key: "enabled",
+    label: "Enabled",
+    options: [
+      { label: "Yes", value: true },
+      { label: "No", value: false },
+    ],
+  },
+];
+const fields: Field<Person>[] = [
+  { name: "name", label: "Name", required: true },
+  { name: "enabled", label: "Enabled", type: "switch", defaultValue: true },
+];
+export function App() {
+  const [rows, setRows] = useState<Person[]>([]);
+  return (
+    <AutoConfigProvider config={{ namespace: "my-app" }}>
+      <AutoDialogProvider>
+        <AutoTable<Person>
+          id="people"
+          rowKey="id"
+          data={rows}
+          columns={columns}
+          formFields={fields}
+          searchFields={fields}
+          onAdd={(value) =>
+            setRows((old) => [...old, { ...value, id: Date.now() }])
+          }
+          onEdit={(row, value) =>
+            setRows((old) =>
+              old.map((item) =>
+                item.id === row.id ? { ...row, ...value } : item,
+              ),
+            )
+          }
+          onDelete={(selected) =>
+            setRows((old) =>
+              old.filter((item) => !selected.some((row) => row.id === item.id)),
+            )
+          }
+        />
+      </AutoDialogProvider>
+    </AutoConfigProvider>
+  );
+}
+```
+
+Fields, columns, and refs use generics: invalid field names or default values produce compile-time errors. The provider supports namespaces, permissions, field-label translation, custom fields, notifications, and persistence adapters. Built-in labels, validation messages, and accessibility text use AutoConfigProvider.config.t; explicit component labels take precedence.
+
+The t callback receives a message key and a fallback. Preserve numbered placeholders such as {0} and {1} in translated built-in messages; the components substitute their values after translation.
+
+## Components
+
+| Component       | Capabilities                                                                                                                                                                                                     |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| AutoForm        | Native field types, virtualized options, cascading selection, upload adapters, custom rendering, dependent fields, conditional visibility, async validation, controlled state, input preservation after failures |
+| AutoSearchPanel | Basic/advanced conditions, manual/instant search, reset, sort tags, a shared query AST, and RSQL serialization                                                                                                   |
+| AutoTable       | Local/remote data, multi-column sorting, column filters, pagination, stable selection, virtualization, tree/detail expansion, summaries, merged cells, CRUD, context menus, and copy                             |
+| AutoDialog      | Declarative/imperative APIs, isolated providers, drafts, close guards, focus management, dragging, fullscreen, and async submission                                                                              |
+| AutoTabs        | Horizontal/vertical layouts, nesting, permissions, disabled tabs, preserved panel state, and refresh                                                                                                        |
+| AutoMenu        | Sidebar navigation with icons, descriptions, badges, nested groups, permissions, and a collapsible icon rail                                                                                                     |
+| AutoChat | Caller-owned message rendering, optional virtualization, streaming follow, anchored history loading, send/stop composer, and custom actions |
+
+Table layout, sorting, filtering, and export each support named presets and independent versions. Persistence defaults to localStorage; remote adapters can be injected. JSON/CSV export is built in. XLSX uses an optional, separate adapter:
+
+```tsx
+import { exportXlsx } from "@zeroman.yang/react-auto-components/xlsx";
+// <AutoTable ... exportXlsx={exportXlsx} />
+```
+
+ExcelJS loads dynamically when the adapter is first used and is excluded from the library's main entry. Applications that only use CSV/JSON can omit optional dependencies during installation.
+
+## Verification
+
+```sh
+pnpm typecheck
+pnpm test
+pnpm build
+pnpm prepare:test-project
+pnpm --dir test-project build
+pnpm exec playwright install chromium  # First run only
+pnpm test:e2e
+```
+
+Unit tests cover fields, async validation, queries, dialogs, virtualization, tables, configuration migrations, and exports. Playwright tests interactions through the packaged public entry points. Desktop/mobile screenshots are written to `test-project/test-results`.
+
+## Behavior and conventions
+
+- This is a React-native API, not a property-by-property or method-by-method compatibility layer for Vue. See the [migration guide](docs/migration.md).
+- Application code owns the data. CRUD callbacks persist changes; throwing on failure preserves edits. After success, the component refreshes remote data. Local data must be updated by the caller.
+- A table's `id` must be unique within its namespace, and `rowKey` must be unique across all pages and tree nodes. In server-side mode, provide `columns` explicitly; the data source returns the total count.
+- When `query` / `value` is controlled, the parent must handle callbacks and update it. These props can be omitted for uncontrolled use.
+- Merged cells use a non-virtualized semantic table, suitable for paginated data, to avoid rowSpan misalignment across virtual windows.
+- Server-side summaries for all filtered rows are supplied through `summaryValues`. Missing summaries display `—` instead of presenting the current page's total as an overall total. Set `summaryScope="page"` to calculate the current page explicitly.
+- Submission pauses while uploads are in progress. Resetting, replacing field values, or unmounting cancels old uploads; late results cannot overwrite newer values.
+- Remote exports of all filtered results request data one page at a time. Large applications can implement their own server-side export.
+- Import browser styles explicitly from `style.css`. JavaScript modules can be imported in Node without `window`.
+
+## Fill the remaining height with AutoTable
+
+`height={440}` continues to set a fixed height for the data scroll area. With `height="auto"`, the entire table fills the height allocated by its parent layout. Search, toolbar, and pagination take their natural heights; the data area uses the remaining space and scrolls independently:
+
+```tsx
+<div
+  style={{
+    height: "100dvh",
+    display: "flex",
+    flexDirection: "column",
+    gap: 12,
+  }}
+>
+  <header>Page title and description</header>
+  <AutoTable<Person>
+    id="people"
+    rowKey="id"
+    data={rows}
+    columns={columns}
+    height="auto"
+  />
+  <footer>Page footer</footer>
+</div>
+```
+
+The parent must have a definite height. Use `flex: 1; min-height: 0` in nested flex containers to pass down the remaining space, or `grid-template-rows: auto minmax(0, 1fr) auto` for grid layouts. No JavaScript calculation of viewport height minus toolbar height is needed: layout handles added/removed search fields, wrapped toolbars, and parent resizing, and the virtual list follows the scroll area's actual dimensions.
+
+This does not size the table according to the number of rows. Empty and small datasets still fill the available space. The parent must at least accommodate the search area, toolbar, and pagination themselves.
+
+The test project demonstrates this in the **AutoTable → Remaining height** tab while preserving the sidebar and page header. The legacy URL `http://127.0.0.1:4173/?demo=auto-height` selects that tab directly. Browser tests: `test-project/tests/auto-height.spec.ts`.
+
+## Global form layout
+
+Use `AutoConfigProvider.config.form` to configure regular forms, search panels, table search areas, and dialog forms consistently. Labels can appear above or to the left of controls, with independent left/right text alignment. Defaults are top labels and comfortable spacing.
+
+```tsx
+<AutoConfigProvider
+  config={{
+    form: {
+      labelPosition: "left", // 'top': above; 'left': to the left of the control
+      labelAlign: "right", // Right-aligned text; the label stays left of the control
+      labelWidth: 80,
+      density: "compact", // 'comfortable': more spacing
+    },
+  }}
+>
+  <App />
+</AutoConfigProvider>
+```
+
+Nested providers merge layout settings property by property. Explicit component props override the enclosing provider. For example, retain top labels in one form while using inline labels globally:
+
+```tsx
+<AutoForm fields={fields} labelPosition="top" density="comfortable" />
+<AutoTable id="people" rowKey="id" data={rows} columns={columns}
+  searchFields={searchFields}
+  searchLayout={{ labelWidth: 100, columns: 3 }} />
+```
+
+`labelWidth` defaults to `"auto"` and also accepts a pixel number or CSS width such as `"6em"`. In automatic mode, each search label fits its text; regular forms and dialog forms share a width based on visible labels to align controls. Long labels occupy at most 45% of the field width and wrap beyond that, preserving room for controls. Explicit fixed widths are not subject to this automatic limit. Compact search areas place action buttons on the same row when space allows and wrap on narrow screens. Label associations remain intact, errors and descriptions align with controls, and long labels can wrap.
+
+In the demo, open **Global settings** from the sidebar or the top-right gear to change layout, density, label width, and theme. Changes take effect immediately without clearing current inputs. The form page supports **Follow global** or local overrides. The demo explicitly enables compact inline layout through its provider.
+
+## Global size and density
+
+`AutoConfigProvider` supports `size: "small" | "medium" | "large"` and `density: "compact" | "comfortable"`. Explicit component props take precedence over component-category settings, which take precedence over global values:
+
+```tsx
+<AutoConfigProvider
+  config={{
+    size: "medium",
+    density: "compact",
+    form: { labelPosition: "left", labelAlign: "right" },
+    table: { density: "compact" },
+    tabs: { density: "compact" },
+  }}
+>
+  <AutoForm fields={fields} size="small" />
+</AutoConfigProvider>
+```
+
+Table density also supports `normal`. The table settings panel defaults to following global settings. Selecting compact, normal, or comfortable spacing overrides the global density and is saved with the layout preset; the component's `density` prop has the highest priority. Local sizes on nested components apply independently.
+
+Forms support `resetLabel`, `extraActions`, and `onReset`; search panels support `searchLabel`, `resetLabel`, and `extraActions`; dialogs support `cancelLabel` and `extraActions`. `AutoTabs` items can define a `badge`, and `AutoTable.empty` customizes empty-state content.
+
+### AutoChat
+
+AutoChat provides a lightweight conversation layout with streaming follow, history loading and a composer. Supply React content or renderMessage for message rendering; no extra runtime dependencies are required.
+
+[AutoChat API](docs/auto-chat.md)

package/dist/adapters/xlsx.d.ts

@@ -0,0 +1,7 @@
+export declare function exportXlsx(data: {
+    headers: string[];
+    rows: unknown[][];
+}, options: {
+    fileName: string;
+    sheetName?: string;
+}): Promise<import("exceljs").Buffer>;

package/dist/components/AutoChat/VirtualChatMessages.d.ts

@@ -0,0 +1,16 @@
+import { type Ref, type ReactNode, type RefObject } from "react";
+import type { AutoChatMessage } from "./types";
+export interface VirtualChatHandle {
+    scrollToIndex(index: number): void;
+}
+export declare function VirtualChatMessages<T extends AutoChatMessage>({ messages, viewport, content, following, autoFollow, estimate, overscan, renderRow, ref, }: {
+    messages: readonly T[];
+    viewport: RefObject<HTMLDivElement | null>;
+    content: RefObject<HTMLDivElement | null>;
+    following: RefObject<boolean>;
+    autoFollow: boolean;
+    estimate: number;
+    overscan: number;
+    renderRow: (message: T, index: number) => ReactNode;
+    ref?: Ref<VirtualChatHandle>;
+}): import("react").JSX.Element;

package/dist/components/AutoChat/index.d.ts

@@ -0,0 +1,4 @@
+import type { AutoChatMessage, AutoChatProps } from "./types";
+import "./chat.css";
+export type * from "./types";
+export declare function AutoChat<T extends AutoChatMessage>(props: AutoChatProps<T>): import("react").JSX.Element;

package/dist/components/AutoChat/types.d.ts

@@ -0,0 +1,89 @@
+import type { CSSProperties, Key, ReactNode, Ref } from "react";
+import type { ComponentDensity, ComponentSize } from "../../core/types";
+export type AutoChatRole = "user" | "assistant" | "system" | "tool" | "error";
+export type AutoChatMessageLayout = "role" | "left" | "right" | "full";
+/** Normalize application messages at the boundary; no transport protocol is assumed. */
+export interface AutoChatMessage {
+    /** Stable and unique within a conversation, including during streaming. */
+    id: string;
+    role: AutoChatRole;
+    content?: ReactNode;
+    author?: ReactNode;
+    avatar?: ReactNode;
+    meta?: ReactNode;
+    streaming?: boolean;
+}
+export interface AutoChatHandle {
+    scrollToBottom(): void;
+    scrollToMessage(id: string): boolean;
+    focusComposer(): void;
+    getScrollElement(): HTMLDivElement | null;
+}
+export interface AutoChatLabels {
+    conversation: string;
+    empty: string;
+    placeholder: string;
+    composer: string;
+    send: string;
+    stop: string;
+    sending: string;
+    generating: string;
+    latest: string;
+    loadOlder: string;
+    loading: string;
+    sendError: string;
+    loadError: string;
+    user: string;
+    assistant: string;
+    system: string;
+    tool: string;
+    error: string;
+}
+export interface AutoChatProps<T extends AutoChatMessage = AutoChatMessage> {
+    messages: readonly T[];
+    /** Own Markdown, code, tool output and attachment rendering in the host. */
+    renderMessage?: (message: T, context: {
+        index: number;
+    }) => ReactNode;
+    renderActions?: (message: T, context: {
+        index: number;
+    }) => ReactNode;
+    header?: ReactNode;
+    footer?: ReactNode;
+    empty?: ReactNode;
+    /** Changing this key resets draft, pending UI and scroll state. */
+    conversationKey?: Key;
+    height?: CSSProperties["height"];
+    className?: string;
+    style?: CSSProperties;
+    size?: ComponentSize;
+    density?: ComponentDensity;
+    /** Role-based alignment (default), all left/right, or full-width messages. */
+    messageLayout?: AutoChatMessageLayout;
+    labels?: Partial<AutoChatLabels>;
+    /** Follow appended/resized content only while the reader is at the bottom. */
+    autoFollow?: boolean;
+    /** Reuse TanStack Virtual for large histories with measured message heights. */
+    virtual?: boolean;
+    estimatedMessageHeight?: number;
+    overscan?: number;
+    /** Hide the built-in composer, for read-only history or an external editor. */
+    composer?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Resolving accepts the draft; rejecting keeps it and shows a local error. */
+    onSend?: (text: string) => void | Promise<void>;
+    onSendError?: (error: unknown) => void;
+    onStop?: () => void;
+    generating?: boolean;
+    disabled?: boolean;
+    /** Enter sends; Shift+Enter inserts a newline. IME composition never sends. */
+    sendOnEnter?: boolean;
+    composerExtra?: ReactNode;
+    hasMore?: boolean;
+    loadingOlder?: boolean;
+    onLoadOlder?: () => void | Promise<void>;
+    onLoadError?: (error: unknown) => void;
+    ref?: Ref<AutoChatHandle>;
+}

package/dist/components/AutoChat/useChatScroll.d.ts

@@ -0,0 +1,10 @@
+/** DOM anchoring also handles images and custom renderers resizing after commit. */
+export declare function useChatScroll(autoFollow: boolean, virtual?: boolean): {
+    viewport: import("react").RefObject<HTMLDivElement | null>;
+    content: import("react").RefObject<HTMLDivElement | null>;
+    following: import("react").RefObject<boolean>;
+    showLatest: boolean;
+    scrollToBottom: () => void;
+    onScroll: () => void;
+    pause: () => void;
+};

package/dist/components/AutoDialog/index.d.ts

@@ -0,0 +1,46 @@
+import { type ReactNode } from "react";
+import type { ComponentSize, Field } from "../../core/types";
+export type CloseReason = "cancel" | "close" | "submit";
+export interface DialogOptions<T extends object> {
+    title: string;
+    description?: string;
+    content?: ReactNode;
+    fields?: readonly Field<T>[];
+    defaultValue?: Partial<T>;
+    draftKey?: string;
+    onSubmit?: (values: T) => void | Promise<void>;
+    beforeClose?: (reason: CloseReason) => boolean | Promise<boolean>;
+    onClose?: (reason: CloseReason) => void;
+    size?: ComponentSize;
+    footer?: (actions: {
+        submit: () => void;
+        cancel: () => void;
+        busy: boolean;
+    }) => ReactNode;
+    header?: ReactNode;
+    width?: number;
+    fullscreen?: boolean;
+    draggable?: boolean;
+    showReset?: boolean;
+    hideFooter?: boolean;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    extraActions?: ReactNode;
+}
+export interface DialogHandle {
+    id: string;
+    close: () => Promise<boolean>;
+}
+interface DialogService {
+    open<T extends object>(options: DialogOptions<T>): DialogHandle;
+    close(id: string): Promise<boolean>;
+}
+export declare function AutoDialogProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useAutoDialog(): DialogService;
+export declare function AutoDialog<T extends object>({ open, onOpenChange, ...options }: DialogOptions<T> & {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}): import("react").JSX.Element | null;
+export {};

package/dist/components/AutoForm/AutoForm.d.ts

@@ -0,0 +1,2 @@
+import type { AutoFormProps } from "./types";
+export declare function AutoForm<T extends object>({ fields, value, defaultValue, onChange, onSubmit, disabled, readOnly, columns, labelPosition: ownLabelPosition, labelAlign: ownLabelAlign, labelWidth: ownLabelWidth, density: ownDensity, size: ownSize, actions, submitLabel, resetLabel, extraActions, onReset, children, className, style, ref, }: AutoFormProps<T>): import("react").JSX.Element;

package/dist/components/AutoForm/ChoiceField.d.ts

@@ -0,0 +1,16 @@
+import type { Option } from "../../core/types";
+export declare function VirtualSelect({ id, value, options, onChange, disabled, multiple, }: {
+    id: string;
+    value: unknown;
+    options: readonly Option[];
+    onChange: (value: unknown) => void;
+    disabled: boolean;
+    multiple?: boolean;
+}): import("react").JSX.Element;
+export declare function Cascader({ id, value, options, onChange, disabled, }: {
+    id: string;
+    value: unknown;
+    options: readonly Option[];
+    onChange: (value: unknown) => void;
+    disabled: boolean;
+}): import("react").JSX.Element;

package/dist/components/AutoForm/FormField.d.ts

@@ -0,0 +1,8 @@
+import type { AnyField, FieldContext } from "../../core/types";
+export declare function FormField<T extends object>({ field, context, readOnly, resetEpoch, onUploadPending, }: {
+    field: AnyField<T>;
+    context: FieldContext<T>;
+    readOnly?: boolean;
+    resetEpoch?: number;
+    onUploadPending?: (id: string, pending: boolean) => void;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;

package/dist/components/AutoForm/index.d.ts

@@ -0,0 +1,2 @@
+export { AutoForm } from "./AutoForm";
+export type { AutoFormProps, AutoFormHandle } from "./types";

package/dist/components/AutoForm/types.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties, ReactNode, Ref } from "react";
+import type { Field, FieldName, AutoFormLayout } from "../../core/types";
+export interface AutoFormHandle<T extends object> {
+    validate(): Promise<boolean>;
+    reset(values?: T): void;
+    getValues(): T;
+    setValue<K extends FieldName<T>>(name: K, value: T[K]): void;
+    focus(name: FieldName<T>): void;
+}
+export interface AutoFormProps<T extends object> extends AutoFormLayout {
+    fields: readonly Field<T>[];
+    value?: T;
+    defaultValue?: Partial<T>;
+    onChange?: (value: T) => void;
+    onSubmit?: (value: T) => void | Promise<void>;
+    onReset?: () => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    columns?: number;
+    actions?: boolean;
+    submitLabel?: string;
+    resetLabel?: string;
+    extraActions?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<AutoFormHandle<T>>;
+}

package/dist/components/AutoMenu/index.d.ts

@@ -0,0 +1,35 @@
+import { type CSSProperties, type ReactNode } from "react";
+import type { Access, ComponentDensity, ComponentSize } from "../../core/types";
+export interface AutoMenuItem extends Access {
+    /** Stable and unique across the entire menu. */
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** Secondary line rendered under the label. */
+    description?: ReactNode;
+    badge?: ReactNode;
+    hidden?: boolean | (() => boolean);
+    /** Disables this entry and its descendants. */
+    disabled?: boolean;
+    /** Sub-menu entries; clicking a parent toggles its expansion. */
+    children?: readonly AutoMenuItem[];
+}
+export interface AutoMenuProps {
+    items: readonly AutoMenuItem[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (id: string, item: AutoMenuItem, path: readonly string[]) => void;
+    /** Group label above the items; also used as the nav aria-label. */
+    label?: string;
+    header?: ReactNode;
+    footer?: ReactNode;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    size?: ComponentSize;
+    density?: ComponentDensity;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function AutoMenu({ items, value, defaultValue, onChange, label, header, footer, collapsible, collapsed, defaultCollapsed, onCollapsedChange, size: ownSize, density: ownDensity, className, style, }: AutoMenuProps): import("react").JSX.Element;

package/dist/components/AutoSearchPanel/index.d.ts

@@ -0,0 +1,21 @@
+import { type QueryNode } from "../../core/query";
+import type { Field, AutoFormLayout } from "../../core/types";
+export interface AutoSearchPanelProps<T extends object> extends AutoFormLayout {
+    fields: readonly Field<T>[];
+    value?: T;
+    defaultValue?: Partial<T>;
+    onChange?: (values: T) => void;
+    onSearch: (query: QueryNode, values: T) => void;
+    mode?: "manual" | "instant";
+    columns?: number;
+    disabled?: boolean;
+    searchLabel?: string;
+    resetLabel?: string;
+    extraActions?: React.ReactNode;
+    sortTags?: readonly {
+        id: string;
+        label: string;
+        onRemove: () => void;
+    }[];
+}
+export declare function AutoSearchPanel<T extends object>({ fields, value, defaultValue, onChange, onSearch, mode, columns, labelPosition, labelAlign, labelWidth, density: ownDensity, size: ownSize, disabled, searchLabel, resetLabel, extraActions, sortTags, }: AutoSearchPanelProps<T>): import("react").JSX.Element;

package/dist/components/AutoTable/AutoTable.d.ts

@@ -0,0 +1,2 @@
+import type { AutoTableProps } from "./types";
+export declare function AutoTable<T extends object>(props: AutoTableProps<T>): import("react").JSX.Element;

package/dist/components/AutoTable/FilterEditor.d.ts

@@ -0,0 +1,7 @@
+import type { AutoColumn } from "./types";
+import type { QueryNode } from "../../core/query";
+export declare function FilterEditor<T extends object>({ columns, value, onChange, }: {
+    columns: readonly AutoColumn<T>[];
+    value: QueryNode;
+    onChange: (value: QueryNode) => void;
+}): import("react").JSX.Element;

package/dist/components/AutoTable/SettingsPanel.d.ts

@@ -0,0 +1,7 @@
+import { type TableSettings } from "./settings";
+import type { AutoColumn } from "./types";
+export declare function SettingsPanel<T extends object>({ value, columns, onChange, }: {
+    value: TableSettings;
+    columns: readonly AutoColumn<T>[];
+    onChange: (v: TableSettings) => void;
+}): import("react").JSX.Element;

package/dist/components/AutoTable/TableHeader.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties } from "react";
+import type { AutoColumn, TableSort } from "./types";
+import type { QueryNode } from "../../core/query";
+export declare function updateColumnFilter(query: QueryNode, field: string, values: unknown[]): QueryNode;
+export declare function TableHeader<T extends object>({ columns, rows, sort, filter, onSort, onFilter, onResize, style, hasActions, allSelected, indeterminate, onSelectAll, }: {
+    columns: readonly AutoColumn<T>[];
+    rows: readonly T[];
+    sort: TableSort[];
+    filter: QueryNode;
+    onSort: (sort: TableSort[]) => void;
+    onFilter: (query: QueryNode) => void;
+    onResize: (key: string, width: number) => void;
+    style: (column: AutoColumn<T>) => CSSProperties;
+    hasActions: boolean;
+    allSelected: boolean;
+    indeterminate?: boolean;
+    onSelectAll: (value: boolean) => void;
+}): import("react").JSX.Element;

package/dist/components/AutoTable/export.d.ts

@@ -0,0 +1,11 @@
+import type { AutoColumn } from "./types";
+export interface ExportData {
+    headers: string[];
+    rows: unknown[][];
+}
+export declare function formatted<T extends object>(column: AutoColumn<T>, row: T): string | number;
+export declare function collectExport<T extends object>(rows: readonly T[], columns: readonly AutoColumn<T>[], names?: readonly string[]): ExportData;
+export declare function toCsv(data: ExportData): string;
+export declare function toJson(data: ExportData): string;
+export declare function download(data: BlobPart, fileName: string, type: string): void;
+export declare function fetchExportRows<T extends object>(source: import("./types").DataSource<T>, query: import("./types").TableQuery, signal: AbortSignal): Promise<T[]>;

package/dist/components/AutoTable/features.d.ts

@@ -0,0 +1,9 @@
+export declare const features: {
+    rowSortingFeature: import("@tanstack/react-table").TableFeature;
+    rowPaginationFeature: import("@tanstack/react-table").TableFeature;
+    rowSelectionFeature: import("@tanstack/react-table").TableFeature;
+    rowExpandingFeature: import("@tanstack/react-table").TableFeature;
+    sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    expandedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    paginatedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+};