@letterncms/ui 0.0.0-stage → 0.1.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Falko Joseph
+
+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/package.json

@@ -1,6 +1,24 @@
 {
-  "name": "@letterncms/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@letterncms/ui",
+    "description": "Types of the admin's UI kit. The admin provides the components at runtime.",
+    "types": "./src/ui/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./src/ui/index.d.ts"
+        }
+    },
+    "peerDependencies": {
+        "react": "^19.0.0",
+        "@tanstack/react-query": "^5.0.0"
+    },
+    "version": "0.1.1",
+    "type": "module",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/letterncms/cms.git"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/src/app/App.d.ts

@@ -0,0 +1,3 @@
+/** Resolves once the screen at a path can be drawn without waiting (used at boot, so the first screen appears whole). */
+export declare function screenReady(path: string, search?: string): Promise<unknown>;
+export declare function App(): import("react").JSX.Element;

package/src/app/Brand.d.ts

@@ -0,0 +1,5 @@
+/** The product's mark, brand/mark.svg. */
+export declare function BrandMark({ size, className }: {
+    size?: number;
+    className?: string;
+}): import("react").JSX.Element;

package/src/app/CommandPalette.d.ts

@@ -0,0 +1,4 @@
+export declare function CommandPalette({ open, onOpenChange }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}): import("react").JSX.Element;

package/src/app/CustomizeSidebar.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Every item of the sidebar, section by section: pin or unpin, drag to
+ * reorder. Changes apply as they are made; the sidebar behind follows.
+ */
+export declare function CustomizeSidebar({ open, onOpenChange }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}): import("react").JSX.Element;

package/src/app/ErrorBoundary.d.ts

@@ -0,0 +1,16 @@
+import { Component, type ReactNode } from 'react';
+/** Keeps a failing screen (core or plugin) from taking down the whole admin. */
+export declare class ErrorBoundary extends Component<{
+    children: ReactNode;
+}, {
+    error: Error | null;
+}> {
+    state: {
+        error: Error | null;
+    };
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    componentDidCatch(error: Error): void;
+    render(): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+}

package/src/app/Root.d.ts

@@ -0,0 +1 @@
+export declare function Root(): import("react").JSX.Element;

package/src/app/Sidebar.d.ts

@@ -0,0 +1,15 @@
+interface SidebarProps {
+    collapsed: boolean;
+    onToggle: () => void;
+    onSearch: () => void;
+    /** Called when a link is followed (the overlay sidebar on narrow screens closes). */
+    onNavigate?: () => void;
+}
+/**
+ * The admin's sidebar, in one of two states that follow the screen on view:
+ * the main sidebar (what each person pinned, More for the rest, then chats)
+ * and, on a settings page, the settings sidebar with a way back. Same frame,
+ * same rows, same footer — only the list changes.
+ */
+export declare function Sidebar({ collapsed, onToggle, onSearch, onNavigate }: SidebarProps): import("react").JSX.Element;
+export {};

package/src/app/modules.d.ts

@@ -0,0 +1,21 @@
+import { type Manifest } from '@letterncms/sdk';
+type Module = Manifest['modules'][number];
+/**
+ * Bring the admin in line with the manifest: load the modules of packages that
+ * were turned on and take back what turned-off ones registered (routes, fields,
+ * panels, widgets, commands, icons) along with their stylesheets. Runs at boot
+ * and whenever the manifest is fetched again, so nothing needs a reload.
+ *
+ * Modules are fetched in parallel but run one at a time, so everything a module
+ * registers is attributed to it. A failing one is reported, never fatal.
+ */
+export declare function syncModules(manifest: Manifest): Promise<{
+    id: string;
+    url: string;
+    package: string | null;
+}[]>;
+/** Follow manifest changes after boot: modules come and go, cached data is refreshed. */
+export declare function followManifest(manifest: Manifest): void;
+/** Report modules that failed at boot. */
+export declare function reportFailed(failed: Module[]): void;
+export {};

package/src/app/sidebarStore.d.ts

@@ -0,0 +1,30 @@
+import { type Manifest, type NavItem, type Sidebar } from '@letterncms/sdk';
+export declare function arrange(next: Sidebar): void;
+export declare function isPinned(layout: Sidebar, id: string): boolean;
+export declare function setPinned(id: string, pinned: boolean): void;
+/** Unpin, with a way back. */
+export declare function unpin(id: string): void;
+/** Put a section's items in a new order. */
+export declare function reorder(section: string, items: string[]): void;
+/**
+ * Move a pinned item to another place among the pinned items of its section,
+ * leaving the items under More where they are.
+ */
+export declare function movePinned(section: string, id: string, to: number): void;
+export declare function resetToDefault(): Promise<void>;
+export declare function saveForEveryone(): Promise<void>;
+/** The item a path belongs to: the one with the longest matching path (`/` only for itself). */
+export declare function itemAt(nav: NavItem[], path: string): NavItem | undefined;
+export declare function settingsIds(manifest: Manifest): Set<string>;
+export declare function inSettings(manifest: Manifest, path: string): boolean;
+/**
+ * Opens settings, and in settings goes back. Not ⌘, — browsers keep that one for their
+ * own settings, so a page never sees it.
+ */
+export declare const SETTINGS_SHORTCUT = "mod+shift+,";
+export declare function remember(manifest: Manifest, path: string, search: string): void;
+export declare function lastApp(): string;
+export declare function openSettings(): void;
+export declare function leaveSettings(): void;
+/** The settings shortcut: opens settings, and in settings goes back. */
+export declare function toggleSettings(): void;

package/src/fields/CommandQueryField.d.ts

@@ -0,0 +1,3 @@
+import type { FieldProps } from '@letterncms/sdk';
+/** The command palette's query: cmdk's own input, so its list filters and keyboard navigation keep working. */
+export declare function CommandQueryField({ field, value, onChange }: FieldProps<string | null>): import("react").JSX.Element;

package/src/fields/FieldsEditor.d.ts

@@ -0,0 +1,28 @@
+import { type FieldProps, type FieldTypeDef } from '@letterncms/sdk';
+export type RawField = Record<string, any> & {
+    handle?: string;
+    type?: string;
+    label?: string;
+    import?: string;
+};
+export declare function FieldsEditor({ fields, onChange, body, depth, emptyText, addLabel, builtIn }: {
+    fields: RawField[];
+    onChange: (fields: RawField[]) => void;
+    body?: string;
+    depth?: number;
+    emptyText?: string;
+    addLabel?: string;
+    builtIn?: string | null;
+}): import("react").JSX.Element;
+/**
+ * The `fields` config type (group and repeater sub-fields) as a nested editor. A field's
+ * `placeholder` replaces the empty text and `add` the add button (a component's properties).
+ */
+export declare function FieldsConfigField({ field, value, onChange, context }: FieldProps<RawField[]>): import("react").JSX.Element;
+export declare function AddField({ types, onAdd, label, align, nested }: {
+    types: FieldTypeDef[];
+    onAdd: (type: FieldTypeDef) => void;
+    label?: string;
+    align?: 'start' | 'end';
+    nested?: boolean;
+}): import("react").JSX.Element;

package/src/fields/LinkField.d.ts

@@ -0,0 +1,16 @@
+import { type FieldProps } from '@letterncms/sdk';
+/**
+ * `link` — where a link goes, picked rather than typed: a page (searched across
+ * collections), a section of this page, a web address, an email, a phone number
+ * or a file from the media library. The trigger shows the destination as a chip
+ * (page title, domain, address) instead of a raw URL.
+ *
+ * Use it as `{ type: 'url', component: 'link' }`. Options:
+ *   reference  store pages as `entry:<id>` so the link follows the page when it moves
+ *              (the renderer must resolve it — blocks do); otherwise the page's path
+ *   anchors    sections of the current page: [{ id, label }]
+ *   newTab / onNewTab   show "Open in New Tab" in the picker and report changes
+ *   autofocus / onClose  open the picker at once (a toolbar's link button) and hear when it closes
+ *   collections   limit page search to these collections
+ */
+export declare function LinkField({ field, value, onChange, disabled }: FieldProps<string | null>): import("react").JSX.Element;

package/src/fields/RichTextField.d.ts

@@ -0,0 +1,6 @@
+import { type FieldProps } from '@letterncms/sdk';
+/**
+ * Lightweight rich text (contenteditable). Output is sanitized on the server.
+ * The blocks plugin may register a richer editor under the same key.
+ */
+export declare function RichTextField({ field, value, onChange, error, disabled }: FieldProps<string | null>): import("react").JSX.Element;

package/src/fields/basic.d.ts

@@ -0,0 +1,17 @@
+import { type FieldProps } from '@letterncms/sdk';
+export declare function TextField({ field, value, onChange, error, disabled }: FieldProps<string | null>): import("react").JSX.Element;
+export declare function TextareaField({ field, value, onChange, error, disabled }: FieldProps<string | null>): import("react").JSX.Element;
+export declare function CodeField({ field, value, onChange, error, disabled }: FieldProps<string | null>): import("react").JSX.Element;
+export declare function MarkdownField({ field, value, onChange, error, disabled }: FieldProps<string | null>): import("react").JSX.Element;
+export declare function NumberField({ field, value, onChange, error, disabled }: FieldProps<number | null>): import("react").JSX.Element;
+/** A yes/no value: a switch with its label, or `display: checkbox` for lists of choices and selection. */
+export declare function ToggleField({ field, value, onChange, disabled }: FieldProps<boolean>): import("react").JSX.Element;
+export declare function SelectField({ field, value, onChange, error, disabled }: FieldProps<any>): import("react").JSX.Element;
+/** An icon name, picked from `options` or a common set. */
+export declare function IconField({ field, value, onChange, disabled }: FieldProps<string | null>): import("react").JSX.Element;
+export declare function DateField({ field, value, onChange, error, disabled }: FieldProps<string | null>): import("react").JSX.Element;
+export declare function SlugField({ field, value, onChange, error, disabled, context }: FieldProps<string | null>): import("react").JSX.Element;
+export declare function UrlField({ field, value, onChange, error, disabled }: FieldProps<string | null>): import("react").JSX.Element;
+export declare function EmailField({ field, value, onChange, error, disabled }: FieldProps<string | null>): import("react").JSX.Element;
+export declare function ColorField({ field, value, onChange, error, disabled }: FieldProps<string | null>): import("react").JSX.Element;
+export declare function JsonField({ field, value, onChange, error, disabled }: FieldProps<unknown>): import("react").JSX.Element;

package/src/fields/complex.d.ts

@@ -0,0 +1,6 @@
+import { type FieldProps } from '@letterncms/sdk';
+export declare function TagsField({ field, value, onChange, disabled }: FieldProps<string[]>): import("react").JSX.Element;
+export declare function EntriesField({ field, value, onChange, disabled, context }: FieldProps<string[]>): import("react").JSX.Element;
+export declare function UsersField({ field, value, onChange, disabled }: FieldProps<string[]>): import("react").JSX.Element;
+export declare function GroupField({ field, value, onChange, disabled, context }: FieldProps<Record<string, any>>): import("react").JSX.Element;
+export declare function RepeaterField({ field, value, onChange, disabled, context }: FieldProps<Record<string, any>[]>): import("react").JSX.Element;

package/src/fields/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The field primitives every form is drawn with — one per core field type, plus the
+ * blueprint editor and the palette's query box. Fields that belong to one screen
+ * (roles, the sidebar arrangement, the entry title) come with their modules.
+ */
+export declare function registerCoreFields(): void;

package/src/lib/icon-data.d.ts

@@ -0,0 +1 @@
+export declare const ICONS: Record<string, [body: string, width: number, height: number]>;

package/src/main.d.ts

@@ -0,0 +1 @@
+import './styles/app.css';

package/src/screens/NotFound.d.ts

@@ -0,0 +1 @@
+export declare function NotFound(): import("react").JSX.Element;

package/src/screens/auth/AuthScreen.d.ts

@@ -0,0 +1,4 @@
+export declare function AuthScreen({ path, onAuthenticated }: {
+    path: string;
+    onAuthenticated: () => void;
+}): import("react").JSX.Element;

package/src/ui/Avatar.d.ts

@@ -0,0 +1,16 @@
+export declare function Avatar({ name, initials, src, size, className }: {
+    name: string;
+    initials?: string;
+    src?: string | null;
+    size?: number;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function AvatarStack({ people, max, size }: {
+    people: {
+        name: string;
+        initials?: string;
+        avatar?: string | null;
+    }[];
+    max?: number;
+    size?: number;
+}): import("react").JSX.Element;

package/src/ui/Badge.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export type Tone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'signal';
+export declare function Badge({ tone, children, className }: {
+    tone?: Tone;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/** A status as a small dot plus label — no colored pills everywhere. */
+export declare function StatusDot({ status, label, className }: {
+    status: string;
+    label?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function statusLabel(status: string): string;

package/src/ui/BlueprintEditor.d.ts

@@ -0,0 +1,48 @@
+import { type RawField } from '../fields/FieldsEditor';
+export interface BlueprintDefinition {
+    title: string;
+    singular?: string;
+    icon?: string;
+    route?: string | null;
+    structure?: string;
+    driver?: string;
+    template?: string;
+    sort?: string;
+    body?: string;
+    home?: string;
+    editor?: 'document' | 'canvas';
+    fields: RawField[];
+    [key: string]: any;
+}
+/** Something with a blueprint, and how the editor reads, saves and leaves it. */
+type BlueprintRemoval = [ability: string, input: Record<string, unknown>, warning: string, confirmLabel?: string];
+export interface BlueprintKind {
+    get: [ability: string, input: Record<string, unknown>];
+    save: (def: BlueprintDefinition) => [ability: string, input: Record<string, unknown>];
+    /** Resolve fresh deletion metadata before asking for confirmation. */
+    remove?: BlueprintRemoval | (() => Promise<BlueprintRemoval>);
+    removeLabel?: string;
+    canRemove?: (source: Record<string, unknown>) => boolean;
+    back: {
+        label: string;
+        to: string;
+        icon: string;
+    };
+    entries?: string;
+    /** What every item has without a field; null when nothing. */
+    builtIn?: string | null;
+    /** Give complex blueprints separate fields and grouped settings views. */
+    settingsSections?: {
+        title: string;
+        handles: string[];
+        bare?: boolean;
+    }[];
+}
+/**
+ * Edits whatever has a blueprint — a collection, a global set, user profiles —
+ * through the abilities its kind names. Modules describe their kind and render this.
+ */
+export declare function BlueprintEditor({ kind }: {
+    kind: BlueprintKind;
+}): import("react").JSX.Element;
+export {};

package/src/ui/Button.d.ts

@@ -0,0 +1,19 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'publish';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    icon?: string;
+    iconRight?: string;
+    loading?: boolean;
+    children?: ReactNode;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface IconButtonProps extends Omit<ButtonProps, 'children' | 'iconRight'> {
+    icon: string;
+    label: string;
+    active?: boolean;
+}
+/** Square icon-only button. `label` is required for accessibility (and shown as tooltip). */
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/src/ui/ComponentBoundary.d.ts

@@ -0,0 +1,17 @@
+import { Component, type ReactNode } from 'react';
+/** A plugin failure stays local, wherever its component is embedded. */
+export declare class ComponentBoundary extends Component<{
+    label: string;
+    children: ReactNode;
+}, {
+    error: Error | null;
+}> {
+    state: {
+        error: Error | null;
+    };
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    componentDidCatch(error: Error): void;
+    render(): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+}

package/src/ui/DataCalendar.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+import type { DataSelection } from './DataTable';
+interface DataCalendarProps<T> {
+    label: string;
+    items: T[];
+    month?: string;
+    onMonth: (month: string | null) => void;
+    date: (item: T) => string | null | undefined;
+    title: (item: T) => ReactNode;
+    rowKey: (item: T) => string;
+    rowHref?: (item: T) => string;
+    onRowClick?: (item: T) => void;
+    actions?: (item: T) => ReactNode;
+    selection?: DataSelection<T>;
+    cursor?: string | null;
+    loading?: boolean;
+    stale?: boolean;
+    error?: boolean;
+    onRetry?: () => void;
+}
+/** The one calendar renderer for content, media and administrative records. */
+export declare function DataCalendar<T>({ label, items, month: monthValue, onMonth, date, title, rowKey, rowHref, onRowClick, actions, selection, cursor, loading, stale, error, onRetry }: DataCalendarProps<T>): import("react").JSX.Element;
+export {};

package/src/ui/DataGrid.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+/** The same responsive cards for content, assets and other overview records. */
+export declare function DataGrid({ children, loading, stale, media }: {
+    children?: ReactNode;
+    loading?: boolean;
+    stale?: boolean;
+    media?: boolean;
+}): import("react").JSX.Element;
+export declare function DataCard({ title, href, onClick, icon, image, children, footer, selected, active, onSelect, actions, recordId }: {
+    title: ReactNode;
+    href?: string;
+    onClick?: () => void;
+    icon?: string;
+    image?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    selected?: boolean;
+    active?: boolean;
+    onSelect?: (on: boolean) => void;
+    actions?: ReactNode;
+    recordId?: string;
+}): import("react").JSX.Element;

package/src/ui/DataTable.d.ts

@@ -0,0 +1,68 @@
+import { type ReactNode } from 'react';
+/** Shared table geometry, also used by collection entries and their tree rows. */
+export declare function TableFrame({ template, label, busy, children }: {
+    template: string;
+    label?: string;
+    busy?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function TableRow({ children, header, selected, className, recordId }: {
+    children: ReactNode;
+    header?: boolean;
+    selected?: boolean;
+    className?: string;
+    recordId?: string;
+}): import("react").JSX.Element;
+export declare function TableHeader({ label, align, direction, onSort, hiddenLabel }: {
+    label: string;
+    align?: 'end';
+    direction?: 'ascending' | 'descending';
+    onSort?: () => void;
+    hiddenLabel?: boolean;
+}): import("react").JSX.Element;
+export declare function TableSkeleton({ columns, rows }: {
+    columns: number;
+    rows?: number;
+}): import("react").JSX.Element;
+export declare function TableToolbar({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface DataColumn<T> {
+    id: string;
+    label: string;
+    width?: string;
+    /** Available in Display, but initially hidden in tables and cards. */
+    hiddenByDefault?: boolean;
+    align?: 'end';
+    render: (item: T) => ReactNode;
+    /** Client sorting; omit on server-paginated data. */
+    value?: (item: T) => string | number | null | undefined;
+    /** Server sort field, handled by onSort. */
+    sort?: string;
+    descFirst?: boolean;
+}
+export interface DataSelection<T = unknown> {
+    ids: Set<string>;
+    onSelect: (ids: string[], on: boolean, records?: T[]) => void;
+}
+interface DataTableProps<T> {
+    label: string;
+    items: T[];
+    columns: DataColumn<T>[];
+    rowKey: (item: T) => string;
+    rowHref?: (item: T) => string;
+    onRowClick?: (item: T) => void;
+    selected?: (item: T) => boolean | undefined;
+    selection?: DataSelection<T>;
+    actions?: (item: T) => ReactNode;
+    loading?: boolean;
+    stale?: boolean;
+    state?: ReactNode;
+    sort?: string | null;
+    sortable?: Set<string>;
+    onSort?: (column: DataColumn<T>) => void;
+    cursor?: string | null;
+}
+/** A controlled table: collection entries and DataView use the exact same rendering. */
+export declare function DataTable<T>({ label, items, columns, rowKey, rowHref, onRowClick, selected, selection, actions, loading, stale, state, sort, sortable, onSort, cursor }: DataTableProps<T>): import("react").JSX.Element;
+export {};

package/src/ui/DataView.d.ts

@@ -0,0 +1,44 @@
+import { type RecordTimestamps } from '@letterncms/sdk';
+import { type ComponentProps, type ReactNode } from 'react';
+import { PagePagination } from './PagePagination';
+import { type OverviewSource } from './overviewSource';
+import { type DataColumn, type DataSelection } from './DataTable';
+interface BaseDataViewProps<T> {
+    id: string;
+    label: string;
+    items: T[];
+    /** Required for paginated lists: Calendar loads every matching page through the same cache. */
+    source?: OverviewSource;
+    pagination?: ComponentProps<typeof PagePagination>;
+    columns: DataColumn<T>[];
+    /** Only advertise server sorting when the endpoint supports it. */
+    dateSort?: Partial<Record<'published' | 'updated', string>>;
+    rowKey: (item: T) => string;
+    rowHref?: (item: T) => string;
+    onRowClick?: (item: T) => void;
+    selected?: (item: T) => boolean;
+    selection?: DataSelection<T>;
+    actions?: (item: T) => ReactNode;
+    searchText?: (item: T) => string;
+    searchPlaceholder?: string;
+    toolbar?: ReactNode;
+    defaultView?: 'table' | 'grid' | 'calendar';
+    image?: (item: T) => ReactNode;
+    icon?: string;
+    sort?: string | null;
+    onSort?: (key: string | null) => void;
+    loading?: boolean;
+    stale?: boolean;
+    error?: boolean;
+    onRetry?: () => void;
+    empty: ReactNode;
+}
+/** Ordinary records must provide the standard metadata; wrappers supply a typed accessor. */
+type DataViewProps<T> = BaseDataViewProps<T> & ([T] extends [RecordTimestamps] ? {
+    dates?: (item: T) => RecordTimestamps;
+} : {
+    dates: (item: T) => RecordTimestamps;
+});
+/** Search, display preferences and selection use the same components as Content collections. */
+export declare function DataView<T>({ id, label, items, source, pagination, columns: ownColumns, dates, dateSort, rowKey, rowHref, onRowClick, selected, selection, actions, searchText, searchPlaceholder, toolbar, defaultView, image, icon, sort: serverSort, onSort, loading, stale, error, onRetry, empty }: DataViewProps<T>): import("react").JSX.Element;
+export {};

package/src/ui/Dialog.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+import { type FieldDef } from '@letterncms/sdk';
+export interface DialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+}
+export declare function Dialog({ open, onOpenChange, title, description, children, footer, size, className }: DialogProps): import("react").JSX.Element;
+export interface ConfirmOptions {
+    title: string;
+    description?: ReactNode;
+    confirm?: string;
+    cancel?: string;
+    danger?: boolean;
+}
+/** Imperative confirmation dialog: `if (await confirm({...})) …` */
+export declare function confirm(options: ConfirmOptions): Promise<boolean>;
+export interface PromptOptions {
+    title: string;
+    description?: ReactNode;
+    /** What to ask, as fields — drawn by Fields like every other form. */
+    fields: FieldDef[];
+    values?: Record<string, any>;
+    confirm?: string;
+}
+/** Imperative form dialog: `const values = await prompt({ title, fields })` — null when canceled. */
+export declare function prompt(options: PromptOptions): Promise<Record<string, any> | null>;

package/src/ui/EmptyState.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export declare function EmptyState({ icon, title, description, action, className }: {
+    icon?: string;
+    title: string;
+    description?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/src/ui/Field.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+/** Label + control + help/error. Every form row in the admin uses this. */
+export declare function Field({ label, htmlFor, instructions, error, required, children, className, aside }: {
+    label?: ReactNode;
+    htmlFor?: string;
+    instructions?: ReactNode;
+    error?: string;
+    required?: boolean;
+    children: ReactNode;
+    className?: string;
+    aside?: ReactNode;
+}): import("react").JSX.Element;

package/src/ui/Fields.d.ts

@@ -0,0 +1,18 @@
+import { type FieldContext, type FieldDef } from '@letterncms/sdk';
+export interface FieldsProps {
+    fields: FieldDef[];
+    values: Record<string, any>;
+    onChange: (handle: string, value: any) => void;
+    errors?: Record<string, string>;
+    context?: FieldContext;
+    disabled?: boolean;
+    className?: string;
+    /** Hide labels for single inline fields. */
+    bare?: boolean;
+    /** `stacked` (default): labels above, a 6-column grid. `inline`: compact rows with the label left — for inspectors and toolbars. */
+    layout?: 'stacked' | 'inline';
+}
+/** Conditional fields: `if: { otherField: value | [values] }`. */
+export declare function visible(field: FieldDef, values: Record<string, any>): boolean;
+/** Renders a blueprint: each field with the component registered for its type. */
+export declare function Fields({ fields, values, onChange, errors, context, disabled, className, bare, layout }: FieldsProps): import("react").JSX.Element | null;