@tailor-platform/app-shell 0.28.0 → 0.30.0

package/dist/app-shell.d.ts

@@ -1,5 +1,8 @@
 import { AuthClient } from '@tailor-platform/auth-public-client';
 import { ClassProp } from 'class-variance-authority/types';
+import { CSSProperties } from 'react';
+import { Dialog as Dialog_2 } from '@base-ui/react/dialog';
+import { Drawer } from '@base-ui/react/drawer';
 import { FC } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { Link } from 'react-router';
@@ -7,6 +10,7 @@ import { LoaderFunctionArgs } from 'react-router';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
 import { toast } from 'sonner';
+import { Tooltip as Tooltip_2 } from '@base-ui/react/tooltip';
 import { useLocation } from 'react-router';
 import { useNavigate } from 'react-router';
 import { useParams } from 'react-router';
@@ -14,6 +18,62 @@ import { useRouteError } from 'react-router';
 import { useSearchParams } from 'react-router';
 import { VariantProps } from 'class-variance-authority';
 
+/**
+ * A single action row in the ActionPanel (icon + label, triggered by onClick).
+ * For navigation, call useNavigate() inside onClick (e.g. navigate("/path")).
+ */
+declare interface ActionItem {
+    /** Unique key for React */
+    key: string;
+    /** Visible label */
+    label: string;
+    /** Icon: any component or SVG; rendered in a fixed-size slot (e.g. 16px) */
+    icon: ReactNode;
+    /** Called when the row is clicked. For navigation, use useNavigate() inside the callback. */
+    onClick?: () => void | Promise<void>;
+    /** Optional; disable the row */
+    disabled?: boolean;
+    /** When true, show loading indicator in the row and make it non-interactive */
+    loading?: boolean;
+}
+
+/**
+ * ActionPanel — Card with title and list of actions (icon + label).
+ *
+ * Each row has an icon and label and is triggered by onClick. For navigation, use
+ * useNavigate() inside the callback (e.g. onClick: () => navigate("/path")).
+ * Use `astw:w-full` so the panel fills the width of its parent container.
+ *
+ * When an action has `loading: true`, the row shows a spinner in the icon slot and is
+ * non-interactive (useful for backend-driven actions: parent sets loading from mutation/request state).
+ *
+ * @example
+ * ```tsx
+ * const navigate = useNavigate();
+ * <ActionPanel
+ *   title="Actions"
+ *   actions={[
+ *     { key: "1", label: "Create invoice", icon: <ReceiptIcon />, onClick: () => openModal() },
+ *     { key: "2", label: "View docs", icon: <DocIcon />, onClick: () => navigate("/docs") },
+ *     { key: "3", label: "Saving…", icon: <SaveIcon />, onClick: () => {}, loading: true },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function ActionPanel({ title, actions, className }: ActionPanelProps): JSX.Element;
+
+/**
+ * Props for the ActionPanel component.
+ */
+export declare interface ActionPanelProps {
+    /** Card title */
+    title: string;
+    /** List of actions to render */
+    actions: ActionItem[];
+    /** Additional CSS classes for the card container */
+    className?: string;
+}
+
 export declare const AppShell: {
     (props: AppShellProps): JSX.Element | null;
     /* Excluded from this release type: WithPages */
@@ -237,6 +297,69 @@ export declare const badgeVariants: (props?: ({
  */
 declare type BadgeVariantType = "default" | "success" | "warning" | "error" | "neutral" | "outline-success" | "outline-warning" | "outline-error" | "outline-info" | "outline-neutral";
 
+/** The table body section (`<tbody>`). */
+declare function Body_2({ className, ...props }: React_2.ComponentProps<"tbody">): JSX.Element;
+
+declare namespace Body_2 {
+    var displayName: string;
+}
+
+/**
+ * A styled button component with multiple variants and sizes.
+ *
+ * @example
+ * ```tsx
+ * import { Button } from "@tailor-platform/app-shell";
+ *
+ * <Button variant="default">Click me</Button>
+ * <Button variant="outline" size="sm">Small</Button>
+ * <Button variant="destructive">Delete</Button>
+ * ```
+ */
+export declare function Button({ className, variant, size, render, children, ...props }: ButtonProps): React_2.ReactElement<unknown, string | React_2.JSXElementConstructor<any>>;
+
+export declare type ButtonProps = React_2.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    render?: React_2.ReactElement;
+};
+
+export declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+/** A table caption element. */
+declare function Caption({ className, ...props }: React_2.ComponentProps<"caption">): JSX.Element;
+
+declare namespace Caption {
+    var displayName: string;
+}
+
+/** A table data cell (`<td>`). */
+declare function Cell({ className, ...props }: React_2.ComponentProps<"td">): JSX.Element;
+
+declare namespace Cell {
+    var displayName: string;
+}
+
+/** A button that closes the dialog. */
+declare function Close({ ...props }: React_2.ComponentProps<typeof Dialog_2.Close>): JSX.Element;
+
+declare namespace Close {
+    var displayName: string;
+}
+
+/** A button that closes the sheet. */
+declare function Close_2({ ...props }: React_2.ComponentProps<typeof Drawer.Close>): JSX.Element;
+
+declare namespace Close_2 {
+    var displayName: string;
+}
+
+/**
+ * Supported area values for Layout.Column
+ */
+declare type ColumnArea = "left" | "main" | "right";
+
 /**
  * Supported column count options
  */
@@ -248,6 +371,16 @@ declare type ColumnCount = 1 | 2 | 3;
 declare interface ColumnProps {
     /** Additional CSS classes */
     className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+    /**
+     * Column area role. When specified on all columns, determines width template
+     * based on role rather than position.
+     * - "left": fixed 320px
+     * - "main": flex-1
+     * - "right": fixed 280px
+     */
+    area?: ColumnArea;
     /** Child content */
     children?: ReactNode;
 }
@@ -310,6 +443,31 @@ declare type CommonProps = {
     guards?: Guard[];
 };
 
+/** The main dialog panel that contains the dialog content. Automatically includes a close button and overlay. */
+declare function Content({ className, children, ...props }: React_2.ComponentProps<typeof Dialog_2.Popup>): JSX.Element;
+
+declare namespace Content {
+    var displayName: string;
+}
+
+/** The main sheet panel. The `side` is inherited from `Sheet.Root` via context. */
+declare function Content_2({ className, children, ...props }: React_2.ComponentProps<typeof Drawer.Popup>): JSX.Element;
+
+declare namespace Content_2 {
+    var displayName: string;
+}
+
+/** The tooltip popup that displays additional information. */
+declare function Content_3({ className, sideOffset, side, align, children, ...restProps }: React_2.ComponentProps<typeof Tooltip_2.Popup> & {
+    sideOffset?: number;
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
+}): JSX.Element;
+
+declare namespace Content_3 {
+    var displayName: string;
+}
+
 /**
  * Context data type inferred from AppShellRegister.
  * Falls back to Record<string, unknown> if not augmented.
@@ -522,31 +680,43 @@ export declare const defineI18nLabels: <const L extends Exclude<string, "en">, c
 };
 
 /**
- * Define a root-level resource that renders a React component.
+ * Define a module that appears as a top-level item in the sidebar navigation.
+ *
+ * A module can be configured in several ways:
+ * - **With component**: renders the component at the module path.
+ * - **Without component, with resources**: child resources are accessible, but
+ *   navigating to the module path itself returns a 404.
+ * - **With guards only**: useful for redirect-only paths (e.g. legacy URL migration).
+ *   The guard loader runs and can redirect; if all guards pass, the path returns 404.
+ * - **Path only (no component, no resources, no guards)**: the module path falls
+ *   through to the catch-all 404 route.
  *
  * @example
  * ```
- * // Define a minimal resource
- * defineReactResource({
- *   path: "custom-page",
- *   component: () => {
- *     return (
- *       <div>
- *         <p>This is a custom page.</p>
- *       </div>
- *     );
- *   },
+ * defineModule({
+ *   path: "dashboard",
+ *   component: (props) => <div>{props.title}</div>,
+ *   resources: [defineResource({ ... })],
  * });
  * ```
  */
 export declare function defineModule(props: DefineModuleProps): Module;
 
-declare type DefineModuleProps = CommonProps & CommonModuleProps & {
+declare type DefineModuleProps = CommonProps & CommonModuleProps & ErrorBoundaryProps & {
     /**
      * React component to render.
      *
-     * If not provided, a guard with `redirectTo()` must be used to redirect
-     * users to the appropriate resource.
+     * If not provided and no guards are given, the module path will return a 404
+     * response while child resources remain accessible.
+     *
+     * If `resources` is non-empty and guards are provided, guards take precedence
+     * over the default 404: for example, `redirectTo()` will redirect instead of
+     * returning 404. If all guards return `pass()`, the module path still returns
+     * a 404 since there is no component to render.
+     *
+     * Guard-only modules (no component, no resources) are also supported — for
+     * example, to maintain legacy URL paths that redirect elsewhere. In this case,
+     * at least one guard must be provided.
      *
      * @example
      * ```tsx
@@ -554,22 +724,23 @@ declare type DefineModuleProps = CommonProps & CommonModuleProps & {
      * ```
      */
     component?: (props: ResourceComponentProps) => ReactNode;
-    /**
-     * Error boundary component for this module and its child resources.
-     * When an error occurs in this module or its resources, this component will render.
-     * Use the `useRouteError` hook to access error details within the component.
-     */
-    errorBoundary?: ErrorBoundaryComponent;
 };
 
 /**
  * Define a resource that renders a React component.
  *
+ * A resource can be configured in several ways:
+ * - **With component**: renders the component at the resource path.
+ * - **Without component, with subResources**: sub-resources are accessible,
+ *   but navigating to the resource path itself returns a 404.
+ * - **With guards only**: useful for redirect-only paths.
+ *   The guard loader runs and can redirect; if all guards pass, the path returns 404.
+ *
  * This resource can be used as a sub-resource of a module or as a root-level resource.
  *
  * @example
  * ```
- * // Define a minimal resource
+ * // Resource with component and sub-resources
  * defineResource({
  *   path: "custom-page",
  *   component: () => {
@@ -592,25 +763,55 @@ declare type DefineModuleProps = CommonProps & CommonModuleProps & {
  *     }),
  *   ]
  * });
+ *
+ * // Resource without component (sub-resources only, path returns 404)
+ * defineResource({
+ *   path: "namespace",
+ *   subResources: [
+ *     defineResource({
+ *       path: "page-a",
+ *       component: () => <div>Page A</div>,
+ *     }),
+ *   ]
+ * });
  * ```
  *
  */
 export declare function defineResource(props: DefineResourceProps): Resource;
 
-declare type DefineResourceProps = CommonProps & ReactResourceProps & {
+declare type DefineResourceProps = CommonProps & ErrorBoundaryProps & {
     /**
-     * Sub-resources of the resource.
+     * React component to render.
+     *
+     * If not provided and no guards are given, the resource path will return a 404
+     * response while sub-resources remain accessible.
+     *
+     * If `subResources` is non-empty and guards are provided, guards take precedence
+     * over the default 404: for example, `redirectTo()` will redirect instead of
+     * returning 404. If all guards return `pass()`, the resource path still returns
+     * a 404 since there is no component to render.
      */
-    subResources?: Array<Resource>;
+    component?: (props: ResourceComponentProps) => ReactNode;
     /**
-     * Error boundary component for this resource and its sub-resources.
-     * When an error occurs in this resource, this component will render.
-     * Overrides module-level or global error boundaries.
-     * Use the `useRouteError` hook to access error details within the component.
+     * Sub-resources of the resource.
      */
-    errorBoundary?: ErrorBoundaryComponent;
+    subResources?: Array<Resource>;
 };
 
+/** A description that provides additional context for the dialog. */
+declare function Description({ className, ...props }: React_2.ComponentProps<typeof Dialog_2.Description>): JSX.Element;
+
+declare namespace Description {
+    var displayName: string;
+}
+
+/** A description that provides additional context for the sheet. */
+declare function Description_2({ className, ...props }: React_2.ComponentProps<typeof Drawer.Description>): JSX.Element;
+
+declare namespace Description_2 {
+    var displayName: string;
+}
+
 /**
  * DescriptionCard - ERP document display component
  *
@@ -631,7 +832,7 @@ declare type DefineResourceProps = CommonProps & ReactResourceProps & {
  * />
  * ```
  */
-export declare function DescriptionCard({ data, title, fields, columns, className, headerAction, }: DescriptionCardProps): JSX.Element;
+export declare function DescriptionCard({ data, title, fields, columns, className, style, headerAction, }: DescriptionCardProps): JSX.Element;
 
 /**
  * Props for the DescriptionCard component
@@ -647,10 +848,27 @@ export declare interface DescriptionCardProps {
     columns?: Columns;
     /** Additional CSS classes */
     className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
     /** Header action slot (e.g., edit button) */
-    headerAction?: React.ReactNode;
+    headerAction?: ReactNode;
 }
 
+export declare const Dialog: {
+    Root: typeof Root_2;
+    Close: typeof Close;
+    Content: typeof Content;
+    Description: typeof Description;
+    Footer: typeof Footer_2;
+    Header: typeof Header_3;
+    Title: typeof Title;
+    Trigger: typeof Trigger;
+};
+
+declare type DialogRootProps = Pick<React_2.ComponentProps<typeof Dialog_2.Root>, "open" | "defaultOpen" | "onOpenChange" | "modal"> & {
+    children: React_2.ReactNode;
+};
+
 declare type DynamicLocales<Def extends Record<string, LabelValue>> = {
     [locale: string]: Partial<LabelDefinition<Def>> | undefined;
 };
@@ -698,6 +916,16 @@ export declare interface EnhancedAuthClient extends AuthClient {
  */
 export declare type ErrorBoundaryComponent = ReactNode;
 
+declare type ErrorBoundaryProps = {
+    /**
+     * Error boundary component for this module/resource and its children.
+     * When an error occurs, this component will render.
+     * Overrides any parent-level (module or global) error boundary.
+     * Use the `useRouteError` hook to access error details within the component.
+     */
+    errorBoundary?: ErrorBoundaryComponent;
+};
+
 /**
  * Type-safe path builder for file-based routing.
  *
@@ -786,6 +1014,27 @@ declare interface FieldMeta {
  */
 declare type FieldType = "text" | "badge" | "money" | "date" | "link" | "address" | "reference";
 
+/** The table footer section (`<tfoot>`). */
+declare function Footer({ className, ...props }: React_2.ComponentProps<"tfoot">): JSX.Element;
+
+declare namespace Footer {
+    var displayName: string;
+}
+
+/** A layout wrapper for dialog action buttons, typically placed at the bottom. */
+declare function Footer_2({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
+
+declare namespace Footer_2 {
+    var displayName: string;
+}
+
+/** A layout wrapper for sheet action buttons, typically placed at the bottom. */
+declare function Footer_3({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
+
+declare namespace Footer_3 {
+    var displayName: string;
+}
+
 /**
  * Guard function type.
  * Guards are executed in order and stop on the first non-pass result.
@@ -818,6 +1067,79 @@ export declare type GuardResult =
     to: string;
 };
 
+/** A table header cell (`<th>`). */
+declare function Head({ className, ...props }: React_2.ComponentProps<"th">): JSX.Element;
+
+declare namespace Head {
+    var displayName: string;
+}
+
+/**
+ * Layout.Header — Page-level header with title, actions, and an optional
+ * full-width slot.
+ *
+ * Place this as a direct child of `<Layout>`, above any `<Layout.Column>`
+ * children. The header spans the full width of the grid via `col-span-full`,
+ * regardless of column count.
+ *
+ * If multiple `Layout.Header` children are provided to `<Layout>`, only the
+ * first one is rendered.
+ *
+ * - **title** — Rendered as an `<h1>` on the left side.
+ * - **actions** — Rendered on the right side (e.g. save / cancel buttons).
+ * - **children** — Rendered full-width below the title/actions row.
+ *   Useful for tabs, breadcrumbs, or other secondary navigation.
+ *
+ * ### Data attributes
+ *
+ * The rendered `<header>` has `data-layout-header`, which `<Layout>` uses
+ * internally to apply `col-span-full`.
+ *
+ * @example
+ * ```tsx
+ * <Layout>
+ *   <Layout.Header
+ *     title="Purchase Orders"
+ *     actions={[<Button key="create">Create</Button>]}
+ *   >
+ *     <Tabs value={tab} onValueChange={setTab}>
+ *       <TabsList>
+ *         <TabsTrigger value="all">All</TabsTrigger>
+ *         <TabsTrigger value="open">Open</TabsTrigger>
+ *       </TabsList>
+ *     </Tabs>
+ *   </Layout.Header>
+ *   <Layout.Column>…</Layout.Column>
+ * </Layout>
+ * ```
+ */
+declare function Header({ title, actions, children }: LayoutHeaderProps): JSX.Element;
+
+declare namespace Header {
+    var displayName: string;
+}
+
+/** The table header section (`<thead>`). */
+declare function Header_2({ className, ...props }: React_2.ComponentProps<"thead">): JSX.Element;
+
+declare namespace Header_2 {
+    var displayName: string;
+}
+
+/** A layout wrapper for the dialog title and description. */
+declare function Header_3({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
+
+declare namespace Header_3 {
+    var displayName: string;
+}
+
+/** A layout wrapper for the sheet title and description. */
+declare function Header_4({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
+
+declare namespace Header_4 {
+    var displayName: string;
+}
+
 /**
  * Deny access and show 404 Not Found.
  *
@@ -839,6 +1161,21 @@ export declare type I18nLabels<Def extends Record<string, LabelValue> = Record<s
     [K in L]: LabelDefinition<Def>;
 } & DynamicLocales<Def>;
 
+/**
+ * A styled input component.
+ *
+ * @example
+ * ```tsx
+ * import { Input } from "@tailor-platform/app-shell";
+ *
+ * <Input type="text" placeholder="Enter your name" />
+ * <Input type="email" disabled />
+ * ```
+ */
+export declare function Input({ className, type, ...props }: InputProps): JSX.Element;
+
+export declare type InputProps = React_2.ComponentProps<"input">;
+
 /**
  * Check if an object type has no keys.
  */
@@ -858,30 +1195,61 @@ declare type LabelDefinition<Def extends Record<string, LabelValue>> = {
 declare type LabelValue = string | ((props: any) => string);
 
 /**
- * Layout - Responsive column layout component
+ * Layout – Responsive grid layout component
+ *
+ * Uses CSS Grid for responsive column layouts. On mobile, all columns
+ * stack vertically (`grid-cols-1`). At `lg` (2-column) or `xl` (3+ column)
+ * breakpoints, columns display side by side with widths determined by
+ * position or the `area` prop on each `Layout.Column`.
+ *
+ * ### Child filtering
+ *
+ * Only `Layout.Header` and `Layout.Column` are recognized as children;
+ * any other elements are silently ignored and will not be rendered.
+ * If multiple `Layout.Header` children are provided, only the first one
+ * is rendered.
  *
- * Automatically handles responsive behavior for 1, 2, or 3 column layouts.
- * Uses flexbox with viewport breakpoints for simple, CSS-only responsive behavior.
+ * ### Grid template
+ *
+ * Column widths are controlled via a `--layout-cols` CSS custom property
+ * set on the root `<div>`, consumed by `grid-cols-[var(--layout-cols)]`.
+ * The value is computed from position (see `Layout.Column`) or `area` props.
+ * For a single column, no custom property is set and the grid remains
+ * `grid-cols-1`.
  *
  * @example
  * ```tsx
- * // Basic layout
- * <Layout columns={2}>
+ * // With Layout.Header
+ * <Layout>
+ *   <Layout.Header title="Page Title" actions={[<Button key="save">Save</Button>]} />
  *   <Layout.Column>Main content</Layout.Column>
  *   <Layout.Column>Side panel</Layout.Column>
  * </Layout>
  *
- * // With header and actions
- * <Layout columns={2} title="Page Title" actions={[<Button key="save">Save</Button>]}>
- *   <Layout.Column>...</Layout.Column>
- *   <Layout.Column>...</Layout.Column>
+ * // With area prop
+ * <Layout>
+ *   <Layout.Column area="left">Sidebar</Layout.Column>
+ *   <Layout.Column area="main">Content</Layout.Column>
  * </Layout>
  * ```
  */
-export declare function Layout({ columns, className, gap, title, actions, children }: LayoutProps): JSX.Element;
+export declare function Layout({ columns, className, style, gap, title, actions, children }: LayoutProps): JSX.Element;
 
 export declare namespace Layout {
     var Column: React_2.ForwardRefExoticComponent<ColumnProps & React_2.RefAttributes<HTMLDivElement>>;
+    var Header: Header;
+}
+
+/**
+ * Props for Layout.Header component
+ */
+declare interface LayoutHeaderProps {
+    /** Page title (left side) */
+    title?: string;
+    /** Action buttons or nodes (right side) */
+    actions?: ReactNode[];
+    /** Renders full-width below the title/actions row (e.g. tabs) */
+    children?: ReactNode;
 }
 
 /**
@@ -891,20 +1259,32 @@ export declare interface LayoutProps {
     /**
      * Number of columns (1, 2, or 3).
      *
-     * **Required.** Must match the exact number of `Layout.Column` children.
-     * The component will throw an error in development if there's a mismatch.
+     * @deprecated Auto-detected from Layout.Column children count when omitted.
      */
-    columns: ColumnCount;
+    columns?: ColumnCount;
     /** Additional CSS classes */
     className?: string;
-    /** Gap between columns (default: 4 = 16px) */
+    /** Inline styles */
+    style?: CSSProperties;
+    /**
+     * Gap between columns (default: 4 = 16px)
+     *
+     * @deprecated Remove the `gap` prop and use `className` with the `astw:` prefix
+     * (e.g. `className="astw:gap-6"`) to override the default gap.
+     */
     gap?: number;
-    /** Header title - displayed at the top of the layout */
+    /** Header title - displayed at the top of the layout
+     *
+     * @deprecated Use `<Layout.Header title="...">` instead.
+     */
     title?: string;
-    /** Header actions - array of action components (e.g., buttons) displayed on the right side of the header.
-     * Layout and spacing are handled automatically. */
+    /** Header actions displayed on the right side of the header.
+     * Layout and spacing are handled automatically.
+     *
+     * @deprecated Use `<Layout.Header actions={...}>` instead.
+     */
     actions?: ReactNode[];
-    /** Child elements - must be exactly `columns` number of Layout.Column components */
+    /** Child elements - Layout.Header and/or Layout.Column components */
     children: ReactNode;
 }
 
@@ -976,11 +1356,15 @@ export declare type PageMeta = {
  */
 export declare const pass: () => GuardResult;
 
-declare type ReactResourceProps = {
-    /**
-     * React component to render.
-     */
-    component: (props: ResourceComponentProps) => ReactNode;
+/** Provides shared delay configuration for nested tooltips. */
+declare function Provider({ delay, children, ...props }: ProviderProps): JSX.Element;
+
+declare namespace Provider {
+    var displayName: string;
+}
+
+declare type ProviderProps = Pick<React_2.ComponentProps<typeof Tooltip_2.Provider>, "delay" | "closeDelay" | "timeout"> & {
+    children: React_2.ReactNode;
 };
 
 /**
@@ -1007,7 +1391,7 @@ export declare const redirectTo: (to: string) => GuardResult;
  */
 declare type Resource = CommonPageResource & {
     _type: "resource";
-    component: () => ReactNode;
+    component?: () => ReactNode;
     subResources?: Array<Resource>;
     errorBoundary: ErrorBoundaryComponent;
     guards?: Guard[];
@@ -1034,6 +1418,106 @@ declare type ResourceMeta = {
     breadcrumbTitle?: string | ((segment: string) => string);
 };
 
+/**
+ * The root table element with a horizontally scrollable container.
+ *
+ * Note: `className` targets the inner `<table>` element, while `containerClassName` targets the outer scrollable `<div>` wrapper.
+ *
+ * @example
+ * ```tsx
+ * <Table.Root>
+ *   <Table.Header>
+ *     <Table.Row>
+ *       <Table.Head>Name</Table.Head>
+ *       <Table.Head>Status</Table.Head>
+ *     </Table.Row>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>Item 1</Table.Cell>
+ *       <Table.Cell>Active</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ * </Table.Root>
+ * ```
+ */
+declare function Root({ className, containerClassName, ...props }: RootProps): JSX.Element;
+
+declare namespace Root {
+    var displayName: string;
+}
+
+/**
+ * The root component that manages dialog open/close state.
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Root>
+ *   <Dialog.Trigger render={<Button />}>Open</Dialog.Trigger>
+ *   <Dialog.Content>
+ *     <Dialog.Header>
+ *       <Dialog.Title>Are you sure?</Dialog.Title>
+ *       <Dialog.Description>This action cannot be undone.</Dialog.Description>
+ *     </Dialog.Header>
+ *     <Dialog.Footer>
+ *       <Button variant="outline">Cancel</Button>
+ *       <Button>Confirm</Button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog.Root>
+ * ```
+ */
+declare function Root_2({ ...props }: DialogRootProps): JSX.Element;
+
+declare namespace Root_2 {
+    var displayName: string;
+}
+
+/**
+ * The root component that manages sheet open/close state.
+ * The `side` prop controls which edge of the screen the sheet slides in from.
+ *
+ * @example
+ * ```tsx
+ * <Sheet.Root side="right">
+ *   <Sheet.Trigger render={<Button />}>Open</Sheet.Trigger>
+ *   <Sheet.Content>
+ *     <Sheet.Header>
+ *       <Sheet.Title>Settings</Sheet.Title>
+ *       <Sheet.Description>Manage your preferences.</Sheet.Description>
+ *     </Sheet.Header>
+ *     <Sheet.Footer>
+ *       <Button>Save</Button>
+ *     </Sheet.Footer>
+ *   </Sheet.Content>
+ * </Sheet.Root>
+ * ```
+ */
+declare function Root_3({ side, ...props }: SheetRootProps): JSX.Element;
+
+declare namespace Root_3 {
+    var displayName: string;
+}
+
+/**
+ * The root component that manages tooltip open/close state.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip.Root>
+ *   <Tooltip.Trigger render={<Button variant="outline" />}>
+ *     Hover me
+ *   </Tooltip.Trigger>
+ *   <Tooltip.Content>Helpful information</Tooltip.Content>
+ * </Tooltip.Root>
+ * ```
+ */
+declare function Root_4({ children, ...props }: TooltipRootProps): JSX.Element;
+
+declare namespace Root_4 {
+    var displayName: string;
+}
+
 declare type RootConfiguration = {
     modules: Modules;
     settingsResources: Resource[];
@@ -1042,6 +1526,11 @@ declare type RootConfiguration = {
     locale: string;
 };
 
+declare type RootProps = React_2.ComponentProps<"table"> & {
+    /** Additional CSS classes for the outer scrollable `<div>` container. Use this to control height, overflow, or container-level layout. */
+    containerClassName?: string;
+};
+
 /**
  * Route parameters type inferred from AppShellRegister.
  * Falls back to Record<string, Record<string, string>> if not augmented.
@@ -1051,6 +1540,13 @@ export declare type RouteParams = AppShellRegister extends {
     routeParams: infer T;
 } ? T : Record<string, Record<string, string>>;
 
+/** A table row (`<tr>`). */
+declare function Row({ className, ...props }: React_2.ComponentProps<"tr">): JSX.Element;
+
+declare namespace Row {
+    var displayName: string;
+}
+
 declare type SharedAppShellProps = React.PropsWithChildren<{
     /**
      * App shell title
@@ -1140,6 +1636,24 @@ declare type SharedAppShellProps = React.PropsWithChildren<{
     contextData?: ContextData;
 }>;
 
+export declare const Sheet: {
+    Root: typeof Root_3;
+    Trigger: typeof Trigger_2;
+    Close: typeof Close_2;
+    Content: typeof Content_2;
+    Header: typeof Header_4;
+    Footer: typeof Footer_3;
+    Title: typeof Title_2;
+    Description: typeof Description_2;
+};
+
+declare type SheetRootProps = Pick<React_2.ComponentProps<typeof Drawer.Root>, "open" | "defaultOpen" | "onOpenChange" | "modal"> & {
+    children: React_2.ReactNode;
+    side?: Side;
+};
+
+declare type Side = "top" | "right" | "bottom" | "left";
+
 /**
  * A collapsible group for sidebar navigation.
  *
@@ -1320,6 +1834,17 @@ export declare type SidebarLayoutProps = {
  */
 export declare const SidebarSeparator: () => JSX.Element;
 
+export declare const Table: {
+    Root: typeof Root;
+    Header: typeof Header_2;
+    Body: typeof Body_2;
+    Footer: typeof Footer;
+    Row: typeof Row;
+    Head: typeof Head;
+    Cell: typeof Cell;
+    Caption: typeof Caption;
+};
+
 declare type Theme = "dark" | "light" | "system";
 
 declare type ThemeProviderState = {
@@ -1328,6 +1853,52 @@ declare type ThemeProviderState = {
     setTheme: (theme: Theme) => void;
 };
 
+/** The title of the dialog, announced by screen readers. */
+declare function Title({ className, ...props }: React_2.ComponentProps<typeof Dialog_2.Title>): JSX.Element;
+
+declare namespace Title {
+    var displayName: string;
+}
+
+/** The title of the sheet, announced by screen readers. */
+declare function Title_2({ className, ...props }: React_2.ComponentProps<typeof Drawer.Title>): JSX.Element;
+
+declare namespace Title_2 {
+    var displayName: string;
+}
+
+export declare const Tooltip: {
+    Root: typeof Root_4;
+    Trigger: typeof Trigger_3;
+    Content: typeof Content_3;
+    Provider: typeof Provider;
+};
+
+declare type TooltipRootProps = Pick<React_2.ComponentProps<typeof Tooltip_2.Root>, "open" | "defaultOpen" | "onOpenChange"> & {
+    children: React_2.ReactNode;
+};
+
+/** The element that opens the dialog when clicked. */
+declare function Trigger({ ...props }: React_2.ComponentProps<typeof Dialog_2.Trigger>): JSX.Element;
+
+declare namespace Trigger {
+    var displayName: string;
+}
+
+/** The element that opens the sheet when clicked. */
+declare function Trigger_2({ ...props }: React_2.ComponentProps<typeof Drawer.Trigger>): JSX.Element;
+
+declare namespace Trigger_2 {
+    var displayName: string;
+}
+
+/** The element that triggers the tooltip on hover or focus. */
+declare function Trigger_3({ ...props }: React_2.ComponentProps<typeof Tooltip_2.Trigger>): JSX.Element;
+
+declare namespace Trigger_3 {
+    var displayName: string;
+}
+
 /**
  * Type-safe path builder interface.
  *