@agent-factory-platform/ui-kit 0.2.0

package/dist/components/navigation.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+export interface BreadcrumbItem {
+    id: string;
+    label: ReactNode;
+    href?: string;
+    onClick?: () => void;
+}
+export declare function Breadcrumb({ label, items }: {
+    label: string;
+    items: readonly BreadcrumbItem[];
+}): import("react").JSX.Element;
+export declare function Pagination({ label, page, pageCount, onPageChange, pageLabel, previousLabel, nextLabel, }: {
+    label: string;
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    pageLabel: (page: number) => string;
+    previousLabel: string;
+    nextLabel: string;
+}): import("react").JSX.Element;

package/dist/components/page.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+/**
+ * PageContainer owns top-level responsive page width. Product
+ * workspaces are fluid by default so route changes never alter the outer frame.
+ * Reading-oriented surfaces may opt into contained; line-length constraints
+ * belong inside the page, never in an ad hoc top-level wrapper. Vertical padding
+ * stays per-page via className.
+ */
+export type PageContainerWidth = "contained" | "fluid";
+export declare function PageContainer({ className, children, width, }: {
+    className?: string;
+    children: ReactNode;
+    width?: PageContainerWidth;
+}): import("react").JSX.Element;

package/dist/components/popover-menu.d.ts

@@ -0,0 +1,57 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+export declare function Popover({ trigger, title, closeLabel, children, open, onOpenChange, size, align, side, sideOffset, contentClassName, }: {
+    trigger: ReactElement;
+    title: string;
+    closeLabel?: string;
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Use command width for dense searchable pickers; small remains the default. */
+    size?: "sm" | "command";
+    /** Align the popup to the trigger while retaining viewport collision handling. */
+    align?: "start" | "center" | "end";
+    side?: "top" | "right" | "bottom" | "left";
+    sideOffset?: number;
+    contentClassName?: string;
+}): import("react").JSX.Element;
+export interface MenuItem {
+    id: string;
+    label: ReactNode;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    kind?: "item" | "radio";
+    separatorBefore?: boolean;
+    disabled?: boolean;
+    danger?: boolean;
+    onSelect?: () => void;
+}
+export interface MenuChoiceGroupProps extends HTMLAttributes<HTMLDivElement> {
+    label: string;
+}
+export declare function MenuChoiceGroup({ label, className, children, ...props }: MenuChoiceGroupProps): import("react").JSX.Element;
+export interface MenuChoiceItemProps extends HTMLAttributes<HTMLElement> {
+    selected: boolean;
+    asChild?: boolean;
+}
+export declare function MenuChoiceItem({ selected, asChild, children, ...props }: MenuChoiceItemProps): import("react").JSX.Element;
+export interface MenuCommandItemProps extends HTMLAttributes<HTMLElement> {
+    asChild?: boolean;
+}
+export declare function MenuCommandItem({ asChild, children, ...props }: MenuCommandItemProps): import("react").JSX.Element;
+export declare function Menu({ trigger, label, items, value, onValueChange, open, onOpenChange, align, side, contentClassName, }: {
+    trigger: ReactElement;
+    label: string;
+    items: readonly MenuItem[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    align?: "start" | "center" | "end";
+    side?: "top" | "right" | "bottom" | "left";
+    contentClassName?: string;
+}): import("react").JSX.Element;
+export declare function ContextMenu({ children, label, items, }: {
+    children: ReactNode;
+    label: string;
+    items: readonly MenuItem[];
+}): import("react").JSX.Element;

package/dist/components/progress.d.ts

@@ -0,0 +1,4 @@
+export declare function Progress({ value, label }: {
+    value: number;
+    label: string;
+}): import("react").JSX.Element;

package/dist/components/resizable-pane.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from "react";
+export type ResizablePaneGroupProps = {
+    value: number;
+    onValueChange: (value: number) => void;
+    label: string;
+    first: ReactNode;
+    second: ReactNode;
+    direction?: "horizontal" | "vertical";
+    minimum?: number;
+    maximum?: number;
+    step?: number;
+    className?: string;
+};
+export declare function ResizablePaneGroup({ value, onValueChange, label, first, second, direction, minimum, maximum, step, className, }: ResizablePaneGroupProps): import("react").JSX.Element;

package/dist/components/scroll-load-more.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+/**
+ * ScrollLoadMore — standard infinite-scroll footer. Watches a bottom sentinel
+ * with IntersectionObserver and calls `onLoadMore` when it enters the scroll
+ * root (nearest overflow parent, else the viewport).
+ * Shows a spinner while loading and an optional end/progress label.
+ */
+export type ScrollLoadMoreProps = {
+    hasMore: boolean;
+    loading?: boolean;
+    onLoadMore: () => void;
+    /** Shown while the next page is fetching. */
+    loadingLabel?: string;
+    /** Shown when `hasMore` is false (list fully loaded). */
+    endLabel?: string;
+    /** Shown when more items exist but not currently loading. */
+    hintLabel?: string;
+    /** Optional skeleton / placeholder rendered above the footer while loading. */
+    loadingSlot?: ReactNode;
+    className?: string;
+    /** Distance before the sentinel enters view to prefetch the next page. */
+    rootMargin?: string;
+};
+export declare function ScrollLoadMore({ hasMore, loading, onLoadMore, loadingLabel, endLabel, hintLabel, loadingSlot, className, rootMargin, }: ScrollLoadMoreProps): import("react").JSX.Element | null;

package/dist/components/seg-slider.d.ts

@@ -0,0 +1,22 @@
+/**
+ * A segmented (pill) control whose white pill slides between options — used for
+ * compact two-state and multi-state controls. `tone` colors the active label.
+ * Measures the active item and lets CSS own the tween
+ * (transitions.dev 16). Token-only, dark-safe.
+ */
+export declare function SegSlider<T extends string>({ options, value, onChange, onBlocked, className, size, ariaLabel, }: {
+    options: {
+        key: T;
+        label: React.ReactNode;
+        tone?: "up" | "down";
+        disabled?: boolean;
+    }[];
+    value: T;
+    onChange: (k: T) => void;
+    /** Fired when a disabled option is clicked (e.g. show why live mode is locked). */
+    onBlocked?: (k: T) => void;
+    className?: string;
+    /** `sm` for dense controls; `md` for the default form density. */
+    size?: "sm" | "md";
+    ariaLabel?: string;
+}): import("react").JSX.Element;

package/dist/components/segmented-control.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export type SegmentedControlOption<T extends string> = {
+    value: T;
+    label: ReactNode;
+    disabled?: boolean;
+};
+/** Mutually exclusive, in-place mode switch. Use SlidingTabs for navigation. */
+export declare function SegmentedControl<T extends string>({ value, options, onChange, ariaLabel, density, semantics, className, }: {
+    value: T;
+    options: SegmentedControlOption<T>[];
+    onChange: (value: T) => void;
+    ariaLabel: string;
+    density?: "compact" | "default" | "touch";
+    semantics?: "selection" | "tabs";
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/selection-controls.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+export interface CheckboxProps {
+    label: ReactNode;
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function Checkbox({ label, checked, onCheckedChange, disabled, className }: CheckboxProps): import("react").JSX.Element;
+export interface SwitchProps {
+    label: ReactNode;
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean;
+    labelPosition?: "start" | "end";
+    hideLabel?: boolean;
+    className?: string;
+    labelClassName?: string;
+}
+export declare function Switch({ label, checked, onCheckedChange, disabled, labelPosition, hideLabel, className, labelClassName, }: SwitchProps): import("react").JSX.Element;
+export interface RadioOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface RadioGroupProps<T extends string> {
+    label: string;
+    value: T;
+    options: readonly RadioOption<T>[];
+    onValueChange: (value: T) => void;
+    appearance?: "control" | "card";
+    className?: string;
+    optionClassName?: string;
+}
+export declare function RadioGroup<T extends string>({ label, value, options, onValueChange, appearance, className, optionClassName, }: RadioGroupProps<T>): import("react").JSX.Element;
+export interface ToggleGroupOption<T extends string> {
+    value: T;
+    label: string;
+}
+export interface ToggleGroupProps<T extends string> {
+    label: string;
+    value: T[];
+    options: readonly ToggleGroupOption<T>[];
+    onValueChange: (value: T[]) => void;
+}
+export declare function ToggleGroup<T extends string>({ label, value, options, onValueChange }: ToggleGroupProps<T>): import("react").JSX.Element;

package/dist/components/sidebar.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export declare function Sidebar({ label, className, ...props }: HTMLAttributes<HTMLElement> & {
+    label: string;
+}): import("react").JSX.Element;
+export declare function SidebarHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function SidebarContent({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function SidebarSection({ label, children, className }: {
+    label: ReactNode;
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/skeleton.d.ts

@@ -0,0 +1,18 @@
+import { type CSSProperties } from "react";
+/**
+ * Skeleton — the single loading primitive. Project convention:
+ * loading states MUST render a skeleton shaped like the real content, never a
+ * spinner or bare text. Compose these blocks into a layout that mirrors the
+ * component that's loading (same grid, same rows, same sizes), so the page
+ * doesn't reflow when data arrives.
+ *
+ *   <Skeleton className="h-4 w-24" />          // a line
+ *   <Skeleton className="size-10 rounded-full" /> // an avatar
+ *
+ * Shimmer + tokens (`--sk-base`/`--sk-hi`, dark-aware) live in `.t-shimmer`
+ * (index.css). Pass `style={{ animationDelay }}` to stagger rows.
+ */
+export declare function Skeleton({ className, style }: {
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;

package/dist/components/slider.d.ts

@@ -0,0 +1,33 @@
+export type SliderDensity = "compact" | "default";
+export type SliderProps = {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    density?: SliderDensity;
+    onChange: (v: number) => void;
+    onCommit?: (v: number) => void;
+    disabled?: boolean;
+    ariaLabel?: string;
+    formatValue?: (v: number) => string;
+    marks?: number[];
+    variant?: "plain" | "boxed" | "allocation";
+    className?: string;
+    testId?: string;
+};
+export declare function Slider({ value, min, max, step, density, onChange, onCommit, disabled, ariaLabel, formatValue, marks, variant, className, testId, }: SliderProps): import("react").JSX.Element;
+export type AllocationSliderProps = Omit<SliderProps, "density" | "variant">;
+/** Dense percentage allocation control with fill, marks, and a vertical thumb. */
+export declare function AllocationSlider(props: AllocationSliderProps): import("react").JSX.Element;
+export declare function RangeSlider({ value, min, max, step, density, onChange, onCommit, lowerLabel, upperLabel, formatValue, }: {
+    value: [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+    density?: SliderDensity;
+    onChange: (value: [number, number]) => void;
+    onCommit?: (value: [number, number]) => void;
+    lowerLabel: string;
+    upperLabel: string;
+    formatValue?: (value: number) => string;
+}): import("react").JSX.Element;

package/dist/components/sliding-tabs.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+/**
+ * Sliding-underline navigation tab primitive. The 2px underline
+ * slides between the active tab (`.t-tab-underline`, index.css), re-measuring on
+ * resize. Suitable for compact application headers and navigation
+ * hub tabs — register via `useShell({ header: <SlidingTabs …/> }, [value, lang])`.
+ */
+export declare function useSlideIndicator<T extends string>(value: T): {
+    listRef: import("react").RefObject<HTMLDivElement | null>;
+    indRef: import("react").RefObject<HTMLSpanElement | null>;
+    setBtn: (k: T) => (el: HTMLElement | null) => void;
+    focusTab: (key: T) => void | undefined;
+};
+/** A text tab bar whose 2px underline slides between the active option. */
+export declare function SlidingTabs<T extends string>({ tabs, value, onChange, onReorder, size, variant, className, ariaLabel, }: {
+    tabs: {
+        key: T;
+        label: ReactNode;
+        count?: number;
+        live?: boolean;
+        liveLabel?: string;
+        testId?: string;
+    }[];
+    value: T;
+    onChange: (k: T) => void;
+    /** When set, tabs are HTML5-draggable; drop reorders via (fromKey, toKey). */
+    onReorder?: (from: T, to: T) => void;
+    size?: "sm" | "md";
+    variant?: "underline" | "toolbar";
+    className?: string;
+    ariaLabel?: string;
+}): import("react").JSX.Element;

package/dist/components/spinner.d.ts

@@ -0,0 +1,5 @@
+export declare function Spinner({ label, size, className }: {
+    label: string;
+    size?: "compact" | "default";
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/spotlight-tour.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+export type SpotlightRect = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+export type SpotlightPlacement = "top" | "bottom" | "left" | "right" | "center";
+export interface SpotlightTourProps {
+    open: boolean;
+    label: string;
+    target?: SpotlightRect | null;
+    preferredPlacement?: Exclude<SpotlightPlacement, "center"> | "auto";
+    onEscape: () => void;
+    children: ReactNode;
+    className?: string;
+}
+/** Full-screen guided-tour owner with a target cutout and collision-aware card. */
+export declare function SpotlightTour({ open, label, target, preferredPlacement, onEscape, children, className, }: SpotlightTourProps): import("react").ReactPortal | null;

package/dist/components/stat-card.d.ts

@@ -0,0 +1,7 @@
+/** KPI display — big Sohne 480 number, caption label, green/red delta with arrow. */
+export declare function StatCard({ label, value, delta, direction, }: {
+    label: string;
+    value: string;
+    delta?: string;
+    direction?: "up" | "down";
+}): import("react").JSX.Element;

package/dist/components/state-view.d.ts

@@ -0,0 +1,51 @@
+import { type ReactNode } from "react";
+import { type ButtonVariant } from "./button";
+/**
+ * StateView — the one place the app renders "nothing here" moments: empty,
+ * error, and loading. Centered icon-in-a-soft-circle + title + optional
+ * description + optional action button(s), in three sizes. Replaces scattered
+ * bare centered <p> states so every empty/error looks the same and on-brand.
+ *
+ *   <StateView variant="empty" title={t("state.empty")} />
+ *   <StateView variant="error" title={t("state.error")} description={err}
+ *              action={{ label: t("state.retry"), onClick: reload }} />
+ *   <StateView variant="loading" size="sm" />
+ *   <StateView
+ *     variant="empty"
+ *     size="lg"
+ *     title={t("documents.empty")}
+ *     actions={[
+ *       { label: t("documents.create"), onClick: create },
+ *       { label: t("documents.import"), onClick: pick, variant: "secondary" },
+ *     ]}
+ *   />
+ */
+export type StateViewVariant = "empty" | "error" | "loading";
+export type StateViewSize = "sm" | "md" | "lg";
+/** `scrim` = frosted overlay on interactive surfaces (guest gate, modals). */
+export type StateViewTone = "default" | "scrim";
+export type StateViewAction = {
+    label: string;
+    onClick: () => void;
+    /** Defaults to `primary` for the first action, `secondary` for the rest. */
+    variant?: ButtonVariant;
+    disabled?: boolean;
+};
+export declare function StateView({ variant, size, tone, icon, title, description, 
+/** Shorthand for a single primary action. Prefer `actions` when you need more than one. */
+action, actions, children, className, "data-testid": testId, }: {
+    variant?: StateViewVariant;
+    size?: StateViewSize;
+    tone?: StateViewTone;
+    /** Override the default per-variant glyph. */
+    icon?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    action?: StateViewAction;
+    /** One or more CTAs. Button size follows `size`; variant defaults as above. */
+    actions?: StateViewAction[];
+    /** Extra content below description / above actions (e.g. helper links). */
+    children?: ReactNode;
+    className?: string;
+    "data-testid"?: string;
+}): import("react").JSX.Element;

package/dist/components/stats-table.d.ts

@@ -0,0 +1,8 @@
+/** Region-style compact table — name in Graphite, right-aligned count in Ink 480, no dividers. */
+export declare function StatsTable({ title, rows, }: {
+    title: string;
+    rows: Array<{
+        name: string;
+        count: string;
+    }>;
+}): import("react").JSX.Element;

package/dist/components/table.d.ts

@@ -0,0 +1,8 @@
+import { type HTMLAttributes, type TableHTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes } from "react";
+/** Semantic table primitives for product-specific dense data compositions. */
+export declare const Table: import("react").ForwardRefExoticComponent<TableHTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>>;
+export declare const TableHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import("react").RefAttributes<HTMLTableSectionElement>>;
+export declare const TableBody: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import("react").RefAttributes<HTMLTableSectionElement>>;
+export declare const TableRow: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;
+export declare const TableHead: import("react").ForwardRefExoticComponent<ThHTMLAttributes<HTMLTableCellElement> & import("react").RefAttributes<HTMLTableCellElement>>;
+export declare const TableCell: import("react").ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/components/tag-pill.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+/** Visual weight — higher levels read stronger on light cards. */
+export type TagLevel = "emphasis" | "accent" | "default" | "muted";
+export type TagSize = "xs" | "sm";
+/** Compact label pill — use `level` to control contrast; default is readable on white cards. */
+export declare function TagPill({ children, level, size, className, title, }: {
+    children: ReactNode;
+    level?: TagLevel;
+    size?: TagSize;
+    className?: string;
+    title?: string;
+}): import("react").JSX.Element;
+/** Render a truncated tag row with a muted overflow counter (single line — never wraps). */
+export declare function TagList({ items, limit, size, levelForItem, labelForItem, className, }: {
+    items: string[];
+    limit?: number;
+    size?: TagSize;
+    levelForItem?: (item: string) => TagLevel;
+    labelForItem: (item: string) => string;
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/components/theme-editor.d.ts

@@ -0,0 +1,78 @@
+import { type UiThemeSettings } from "../theme";
+export interface ThemeEditorLabels {
+    preview: string;
+    previewEyebrow: string;
+    previewTitle: string;
+    previewMetric: string;
+    previewAction: string;
+    previewDescription: string;
+    previewPrimaryTab: string;
+    previewSecondaryTab: string;
+    previewSecondaryAction: string;
+    previewSwitch: string;
+    page: string;
+    mode: string;
+    light: string;
+    dark: string;
+    system: string;
+    shape: string;
+    sharp: string;
+    compact: string;
+    soft: string;
+    round: string;
+    colors: string;
+    brand: string;
+    accent: string;
+    neutral: string;
+    customBrand: string;
+    customAccent: string;
+    customNeutral: string;
+    semanticColors: string;
+    positive: string;
+    negative: string;
+    warning: string;
+    info: string;
+    customPositive: string;
+    customNegative: string;
+    customWarning: string;
+    customInfo: string;
+    colorPickerTitle: (label: string) => string;
+    colorPickerHex: string;
+    colorPickerHue: string;
+    colorPickerSaturation: string;
+    colorPickerPresets: string;
+    colorPickerClose: string;
+    controls: string;
+    solidStyle: string;
+    color: string;
+    inverse: string;
+    effect: string;
+    flat: string;
+    plastic: string;
+    advanced: string;
+    surface: string;
+    filled: string;
+    translucent: string;
+    dataStyle: string;
+    categorical: string;
+    divergent: string;
+    sequential: string;
+    motion: string;
+    all: string;
+    micro: string;
+    macro: string;
+    none: string;
+    fontScale: string;
+    radiusScale: string;
+    value: (value: number) => string;
+}
+export interface ThemeEditorProps {
+    settings: UiThemeSettings;
+    labels: ThemeEditorLabels;
+    onChange: (settings: UiThemeSettings) => void;
+    brands?: readonly `#${string}`[];
+    accents?: readonly `#${string}`[];
+    neutrals?: readonly `#${string}`[];
+}
+/** Locale-neutral editor for the complete Agent Factory theme settings contract. */
+export declare function ThemeEditor({ settings, labels, onChange, brands, accents, neutrals, }: ThemeEditorProps): import("react").JSX.Element;

package/dist/components/toast.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+export type ToastTone = "error" | "info" | "success";
+export type ToastApi = {
+    show: (message: string, tone?: ToastTone) => void;
+};
+export declare function useToast(): ToastApi;
+export declare function ToastProvider({ children, closeLabel, duration }: {
+    children: ReactNode;
+    closeLabel: string;
+    duration?: number;
+}): import("react").JSX.Element;

package/dist/components/toolbar.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Toolbar as ToolbarPrimitive } from "radix-ui";
+export declare function Toolbar({ label, children, className, variant, density }: {
+    label: string;
+    children: ReactNode;
+    className?: string;
+    variant?: "framed" | "bare";
+    density?: "compact" | "default";
+}): import("react").JSX.Element;
+export declare function ToolbarButton(props: ComponentPropsWithoutRef<typeof ToolbarPrimitive.Button>): import("react").JSX.Element;
+export declare function ToolbarToggleGroup({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function ToolbarToggleItem(props: ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleItem>): import("react").JSX.Element;
+export declare function ToolbarSeparator(props: ComponentPropsWithoutRef<typeof ToolbarPrimitive.Separator>): import("react").JSX.Element;

package/dist/components/utility.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { AspectRatio as AspectRatioPrimitive, ScrollArea as ScrollAreaPrimitive, Separator as SeparatorPrimitive } from "radix-ui";
+export declare function Separator(props: ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>): import("react").JSX.Element;
+export declare function ScrollArea(props: ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>): import("react").JSX.Element;
+export declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/widget-frame.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+export type WidgetFrameProps = Omit<ComponentPropsWithoutRef<"section">, "title"> & {
+    title: ReactNode;
+    status?: ReactNode;
+    toolbar?: ReactNode;
+    headerContent?: ReactNode;
+    headerClassName?: string;
+    hideHeader?: boolean;
+    density?: "compact" | "default";
+    contentClassName?: string;
+};
+export declare function WidgetFrame({ title, status, toolbar, headerContent, headerClassName, hideHeader, density, children, className, contentClassName, ...props }: WidgetFrameProps): import("react").JSX.Element;

package/dist/components/widget-picker.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+export type WidgetPickerCategory = {
+    value: string;
+    label: string;
+};
+export type WidgetPickerItem = {
+    id: string;
+    title: string;
+    category: string;
+    preview: ReactNode;
+    disabled?: boolean;
+};
+export type WidgetPickerProps = {
+    label: string;
+    searchLabel: string;
+    searchPlaceholder: string;
+    categories: WidgetPickerCategory[];
+    category: string;
+    onCategoryChange: (value: string) => void;
+    query: string;
+    onQueryChange: (value: string) => void;
+    items: WidgetPickerItem[];
+    selected: string[];
+    onToggle: (id: string) => void;
+    addedLabel: string;
+    emptyLabel: string;
+    testIdPrefix?: string;
+    className?: string;
+};
+/** Searchable widget catalog used by modular application workspaces. */
+export declare function WidgetPicker({ label, searchLabel, searchPlaceholder, categories, category, onCategoryChange, query, onQueryChange, items, selected, onToggle, addedLabel, emptyLabel, testIdPrefix, className, }: WidgetPickerProps): import("react").JSX.Element;

package/dist/components/workspace-grid.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+import { type Layout } from "react-grid-layout";
+import "react-grid-layout/css/styles.css";
+export type WorkspaceGridLayout = Layout;
+export type WorkspaceGridItem = {
+    id: string;
+    label: string;
+    content: ReactNode;
+};
+export type WorkspaceGridProps = {
+    label: string;
+    moveLabel: (label: string) => string;
+    resizeLabel?: string;
+    items: readonly WorkspaceGridItem[];
+    initialLayout: WorkspaceGridLayout;
+    storageKey?: string;
+    columns?: number;
+    rows?: number;
+    gap?: number;
+    className?: string;
+    testId?: string;
+    onLayoutChange?: (layout: WorkspaceGridLayout) => void;
+};
+/** Draggable, resizable, serializable workspace for dense operational panels. */
+export declare function WorkspaceGrid({ label, moveLabel, resizeLabel, items, initialLayout, storageKey, columns, rows, gap, className, testId, onLayoutChange, }: WorkspaceGridProps): import("react").JSX.Element;