@epam/ai-dial-ui-kit 0.16.0-dev.4 → 0.16.0-dev.43

package/dist/src/components/New/SelectedEntityCard/SelectedEntityCard.d.ts

@@ -0,0 +1,67 @@
+import { FC, ReactNode } from 'react';
+import { EntityIdentityItem } from '../EntityIdentity/EntityIdentity';
+/** User-visible strings of `SelectedEntityCard`. */
+export interface SelectedEntityCardLabels {
+    /** Type label text, passed to `EntityIdentity`. Defaults to the English name of `item.type`. */
+    type?: string;
+    /** Text shown when nothing is selected. Defaults to `'Not selected'`. */
+    placeholder?: string;
+}
+/** Props for `SelectedEntityCard`. */
+export interface SelectedEntityCardProps {
+    /** Id of the selected entity, `''` when there is none. Shown as-is when `item` is missing. */
+    entityId: string;
+    /** The selected entity as the catalog lists it; missing when the catalog does not. */
+    item?: EntityIdentityItem;
+    /** Whether the catalog is still loading; a skeleton stands in for a selected entity meanwhile. */
+    isLoading?: boolean;
+    /** Dims the card. */
+    isDisabled?: boolean;
+    /** Error text under the card; it also turns the card's border red. */
+    error?: string;
+    /** What rides on the selection (an effort, a context window), as a line under the name. */
+    details?: ReactNode;
+    /** User-visible strings; pass translated ones in a localised app. */
+    labels?: SelectedEntityCardLabels;
+    /** Whether to show the type label above the name — off when a heading next to the card already names it. */
+    showType?: boolean;
+    /** Width and height of the icon in px. */
+    iconSize?: number;
+    /** Heading level of the name, 1–6. */
+    headingLevel?: number;
+    /** Additional CSS classes for the card. */
+    className?: string;
+}
+/**
+ * The card of a form field that holds one selected entity — a model, an agent,
+ * a toolset: its identity, a skeleton while the catalog loads, its raw id when
+ * the catalog does not list it, or a placeholder when nothing is selected.
+ * aliases: SelectedModelCard|ModelCard|EntityCard
+ * Design system 2.0
+ *
+ * The control that changes the selection lives next to the card, not in it:
+ * the card is not interactive.
+ *
+ * @example
+ * ```tsx
+ * <SelectedEntityCard
+ *   entityId="gpt-4o"
+ *   item={{ type: EntityType.Model, name: 'GPT-4o', version: '2024-11-20' }}
+ *   isLoading={isLoading}
+ *   labels={{ type: t('Model'), placeholder: t('Select model') }}
+ * />
+ * ```
+ *
+ * @param entityId - Id of the selected entity, `''` when there is none
+ * @param [item] - The selected entity as the catalog lists it
+ * @param [isLoading=false] - Whether the catalog is still loading
+ * @param [isDisabled=false] - Dims the card
+ * @param [error] - Error text under the card; also turns its border red
+ * @param [details] - A line under the name
+ * @param [labels] - User-visible strings
+ * @param [showType=true] - Whether to show the type label
+ * @param [iconSize=44] - Icon size in px
+ * @param [headingLevel=4] - Heading level of the name
+ * @param [className] - Additional CSS classes for the card
+ */
+export declare const SelectedEntityCard: FC<SelectedEntityCardProps>;

package/dist/src/components/New/StateScreen/StateScreen.d.ts

@@ -0,0 +1,47 @@
+import { FC, ReactNode } from 'react';
+export interface StateScreenProps {
+    /** Headline of the state, rendered as the page's `h1`. */
+    title: ReactNode;
+    /** Optional line under the title saying what the state means or what to do. */
+    description?: ReactNode;
+    /** Glyph drawn in the round badge above the title. Decorative: hidden from assistive tech. */
+    icon?: ReactNode;
+    /** The way out of the state — typically one button (Log in, Log out, Retry). */
+    action?: ReactNode;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Additional CSS classes for the title. */
+    titleClassName?: string;
+    /** Additional CSS classes for the description. */
+    descriptionClassName?: string;
+}
+/**
+ * A whole screen given over to one state the app cannot work past: signed out,
+ * access denied, a misconfigured provider.
+ * aliases: AuthScreen|LoginScreen|ForbiddenPage|AccessDenied|ErrorPage|FullPageState
+ * Design system 2.0
+ *
+ * Fills its container and centres a round icon badge, an `h1`, an optional
+ * description and an optional action. The root is a `section` named by its
+ * title, so the state is a landmark of its own. For an empty list or grid
+ * inside a page, use `NoDataContent` instead.
+ *
+ * @example
+ * ```tsx
+ * <StateScreen
+ *   icon={<IconLock size={DIAL_ICON_SIZE.LG} stroke={DIAL_KIT_ICON_STROKE} />}
+ *   title="Log in to configure your QuickApp"
+ *   description="Set up instructions, add-ons and settings."
+ *   action={<NeutralButton label="Log in" onClick={openLogin} />}
+ * />
+ * ```
+ *
+ * @param title - Headline of the state, rendered as the page's `h1`.
+ * @param [description] - Optional line under the title.
+ * @param [icon] - Glyph drawn in the round badge; the badge is omitted without one.
+ * @param [action] - The way out of the state, rendered under the text.
+ * @param [className] - Additional CSS classes for the container.
+ * @param [titleClassName] - Additional CSS classes for the title.
+ * @param [descriptionClassName] - Additional CSS classes for the description.
+ */
+export declare const StateScreen: FC<StateScreenProps>;

package/dist/src/components/New/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { TabOrientation } from '../../../types/tab';
+import { TabOrientation, TabStatus } from '../../../types/tab';
 /** A single tab entry rendered by {@link Tabs}. */
 export interface TabItem {
     /** Unique identifier used to match against `activeTabId`. */
@@ -12,6 +12,18 @@ export interface TabItem {
     icon?: ReactNode;
     /** Renders the tab greyed out and unselectable, and skips it during keyboard navigation. */
     disabled?: boolean;
+    /**
+     * Flags the tab as holding an error or a warning � typically a form section
+     * that failed validation. Draws a coloured icon after the label and adds the
+     * state to the tab's accessible name. Uses the {@link TabStatus} enum.
+     */
+    status?: TabStatus;
+    /**
+     * Already-translated text announced for `status`, appended to the tab's
+     * accessible name. Defaults to `'Error'` / `'Warning'`; pass it when the
+     * interface is localised.
+     */
+    statusLabel?: string;
 }
 export interface TabsProps {
     /** Ordered list of tabs to render. */
@@ -64,6 +76,10 @@ export interface TabsProps {
  * `ArrowUp` / `ArrowDown`. The rail is the shape to reach for when the tabs
  * label whole pages of a settings surface; the row, when they filter one.
  *
+ * A tab with a `status` (`TabStatus.Error` or `TabStatus.Warning`) draws a
+ * coloured icon after its label, and the status text joins the tab's accessible
+ * name so the state reaches assistive tech as well as sighted users.
+ *
  * `className` lands on whichever element is outermost: the heading wrapper when
  * `sectionLabel` is set, the `role="tablist"` itself when it is not.
  *

package/dist/src/components/New/Tag/Tag.d.ts

@@ -16,9 +16,10 @@ export interface TagProps extends NativeTagProps {
  * aliases: Chip|Pill
  * Design system 2.0
  *
- * The tag has one height — the 32px pill of the 2.0 design. There is no `size`
- * prop: a tag sizes itself, and a caller that needs a different height is
- * usually reaching for a button.
+ * The tag is the 32px pill of the 2.0 design; `TagAppearance.Bordered` is the
+ * compact 24px value chip of a form field. There is no `size` prop: a tag sizes
+ * itself, and a caller that needs a different height is usually reaching for a
+ * button.
  *
  * The label truncates rather than wrapping, and carries a native `title` so the
  * full text stays reachable when it does.
@@ -28,7 +29,9 @@ export interface TagProps extends NativeTagProps {
  * the caller: a clickable tag that is also closable gives a screen reader two
  * actions with no way to tell which one it landed on.
  *
- * No tag draws a rim; the two appearances are told apart by their fill.
+ * `outlined` and `selectable` draw no rim and are told apart by their fill;
+ * `bordered` draws one: the outlined `Badge`'s look, for a value the user can
+ * remove, on a surface the rimless fill would vanish on.
  * `TagAppearance.Selectable` is the filter chip of the 2.0 design: no fill
  * at all until it is selected, one hover tint shared by both states, a semibold
  * label once selected, and the state carried on `aria-pressed` rather than by
@@ -55,7 +58,8 @@ export interface TagProps extends NativeTagProps {
  * @param label - Text content displayed inside the tag.
  * @param [icon] - Icon rendered before the label.
  * @param [appearance=TagAppearance.Outlined] - `outlined` is the filled chip on the raised
- * layer; `selectable` is the unfilled filter chip that tints and turns semibold when selected.
+ * layer; `selectable` is the unfilled filter chip that tints and turns semibold when selected;
+ * `bordered` is the compact rimmed value chip of a form field.
  * @param [selected=false] - Applies the accent-tinted selected styling.
  * @param [disabled=false] - Stops the tag responding: no click handling, no remove control. The design defines no disabled tag, so the colours stay put.
  * @param [closable=false] - Renders the remove button. Needs `onRemove` to appear.

package/dist/src/components/New/Tag/constants.d.ts

@@ -6,10 +6,18 @@ import { TagAppearance } from '../../../types/tag';
  */
 export declare const tagBaseClassName = "inline-flex h-[32px] max-w-full items-center gap-1 rounded-full px-3";
 /**
- * Fill and text colour per appearance and selection. No tag draws a rim: the
- * two appearances are told apart by their fill — `outlined` sits on the raised
- * layer, `selectable` on nothing until it is selected, where it also steps its
- * label up from secondary to primary.
+ * Shape and type scale per appearance, over `tagBaseClassName`. The bordered
+ * chip is the compact value chip of a form field — the removable twin of
+ * `Badge`'s outlined label: its 24px, 6px corner and rim on the sunken layer,
+ * with the value in primary text on the small type scale.
+ */
+export declare const tagShapeClassNames: Record<TagAppearance, string>;
+/**
+ * Fill and text colour per appearance and selection. `outlined` and
+ * `selectable` draw no rim and are told apart by their fill — `outlined` sits
+ * on the raised layer, `selectable` on nothing until it is selected, where it
+ * also steps its label up from secondary to primary. `bordered` is the one with
+ * a rim, on the sunken layer.
  */
 export declare const tagStateClassNames: Record<TagAppearance, Record<'default' | 'selected', string>>;
 /** Cursor and focus ring of a tag that can be activated. */

package/dist/src/components/New/Tooltip/constants.d.ts

@@ -19,8 +19,8 @@ export declare const HOVER_OPEN_DELAY = 500;
  */
 export declare const arrowClassName = "fill-control-inverted";
 /**
- * Tooltips sit at the top of the overlay ladder (`z-tooltip`, see `zIndex` in
- * `tailwind.config.js`) — above popups (`z-popup`), dropdowns and the calendar
+ * Tooltips sit at the top of the overlay ladder (`z-tooltip`, see `--z-index-*` in
+ * `src/styles/theme.scss`) — above popups (`z-popup`), dropdowns and the calendar
  * (`z-floating`) and interactive tooltips — since they can be triggered by a
  * control inside any of them.
  *

package/dist/src/components/New/TransferQueue/TransferQueue.d.ts

@@ -52,7 +52,11 @@ export interface TransferQueueLabels {
     closeConfirmHeader: string;
     /** Confirmation description when an item is in progress and none failed. */
     closeConfirmDescriptionInProgress: string;
-    /** Confirmation description when an item failed and none is in progress. */
+    /**
+     * Confirmation description when an item failed and none is in progress.
+     * @deprecated Never shown: closing asks for confirmation only while an item
+     * is in progress, since a failed one has nothing left to lose.
+     */
     closeConfirmDescriptionFailed: string;
     /** Confirmation description when items are both in progress and failed. */
     closeConfirmDescriptionMixed: string;
@@ -103,12 +107,12 @@ export interface TransferQueueProps {
  * Each row shows the file's `FileIcon` and name, and a trailing status: a
  * spinner (with a cancel control on hover or focus) while in progress, a check
  * on success, a warning or error icon whose reason is both its tooltip and its
- * accessible name, or "Canceled". The header carries the host's title, a count
- * of failed items, and collapse and close controls. Collapsed while work runs,
+ * accessible name, or "Canceled". The header carries the host's title and the
+ * collapse and close controls. Collapsed while work runs,
  * the rows are replaced by one aggregate `ProgressBar`.
  *
- * Closing while an item is in progress or has failed asks for confirmation
- * first. Once every item has succeeded the queue closes itself after
+ * Closing while an item is in progress asks for confirmation first; a queue
+ * whose items have all settled, failed ones included, closes straight away. Once every item has succeeded the queue closes itself after
  * `autoCloseDelay`; a warned or canceled row keeps it open so it can be read.
  *
  * The root is a polite `role="status"` live region. Positioning is left to

package/dist/src/components/New/TransferQueue/TransferQueueHeader.d.ts

@@ -2,8 +2,6 @@ import { FC } from 'react';
 import { TransferQueueLabels } from './TransferQueue';
 interface TransferQueueHeaderProps {
     title: string;
-    /** The badge renders only when this is positive. */
-    failedCount: number;
     isCollapsed: boolean;
     /** Id of the rows container the collapse toggle controls. */
     itemsId: string;
@@ -11,6 +9,6 @@ interface TransferQueueHeaderProps {
     onToggleCollapse: () => void;
     onClose: () => void;
 }
-/** Queue heading with its failed-item badge and the collapse and close controls. */
+/** Queue heading with the collapse and close controls. */
 export declare const TransferQueueHeader: FC<TransferQueueHeaderProps>;
 export {};

package/dist/src/components/SegmentedControl/SegmentedControl.d.ts

@@ -37,4 +37,4 @@ export interface DialSegmentedControlProps<T extends string> {
  * @param [className] - Additional classes applied to the container.
  * @param [ariaLabel] - Accessible label for the control (applied to the `tablist`).
  */
-export declare const DialSegmentedControl: <T extends string>({ options, value, onChange, disabled, className, ariaLabel, }: DialSegmentedControlProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialSegmentedControl: <T extends string>({ options, value, onChange, disabled, className, ariaLabel, }: DialSegmentedControlProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/Select/constants.d.ts

@@ -1,9 +1,9 @@
 export declare const selectTriggerBaseClassName = "dial-input flex w-full items-center justify-between gap-2 dial-small-text cursor-pointer";
 export declare const selectOverlayBaseClassName = "w-full rounded flex flex-col";
-export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-none";
+export declare const selectOptionBaseClassName = "flex w-full items-center justify-between gap-2 px-3 h-[34px] dial-small-text text-primary truncate hover:bg-accent-primary-alpha focus:bg-accent-primary-alpha focus:outline-hidden";
 export declare const selectOptionSelectedClassName = "bg-accent-primary-alpha";
-export declare const selectOptionSingleSelectedClassName = "bg-accent-primary-alpha border-l border-accent-primary border-1";
+export declare const selectOptionSingleSelectedClassName = "bg-accent-primary-alpha border-l border-accent-primary";
 export declare const selectOptionDisabledClassName = "opacity-75";
 export declare const dropdownMenuMaxHeight = 352;
 export declare const selectSubMenuGap = 4;
-export declare const selectChevronIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectChevronIcon: import('react/jsx-runtime').JSX.Element;

package/dist/src/constants/public-class-names.d.ts

@@ -17,6 +17,8 @@ export declare const DIAL_KIT_CLASS: {
     readonly notification: "dial-kit-notification";
     /** The empty-state root of `NoDataContent`. */
     readonly noDataContent: "dial-kit-no-data-content";
+    /** The `section` root of a `StateScreen`. */
+    readonly stateScreen: "dial-kit-state-screen";
     /** The `role="status"` panel of a `TransferQueue`: header, rows and aggregate bar. */
     readonly transferQueue: "dial-kit-transfer-queue";
     /** The text element of a `Highlight`, which renders the matched query. */
@@ -36,6 +38,8 @@ export declare const DIAL_KIT_CLASS: {
     readonly collapsibleSidebar: "dial-kit-collapsible-sidebar";
     /** The content box inside a `ResizableContainer`'s resize frame. */
     readonly resizableContainer: "dial-kit-resizable-container";
+    /** The `role="separator"` element of a `ResizeHandle`. */
+    readonly resizeHandle: "dial-kit-resize-handle";
     /**
      * The `role="dialog"` panel of a `Popup`. Its backdrop is reached through
      * `overlayClassName`.
@@ -43,6 +47,11 @@ export declare const DIAL_KIT_CLASS: {
     readonly popup: "dial-kit-popup";
     /** The `role="dialog"` panel of a `BottomSheet`. */
     readonly bottomSheet: "dial-kit-bottom-sheet";
+    /**
+     * The backdrop of a `BottomSheet`: the portalled, scroll-locking layer on
+     * `z-popup` that holds the panel.
+     */
+    readonly bottomSheetOverlay: "dial-kit-bottom-sheet-overlay";
     /** The `role="dialog"` panel of a `SideDrawer`, open or closed. */
     readonly sideDrawer: "dial-kit-side-drawer";
     /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */
@@ -69,6 +78,8 @@ export declare const DIAL_KIT_CLASS: {
      * on a submenu's own list. It is *not* the floating panel.
      */
     readonly dropdownList: "dial-kit-dropdown-list";
+    /** The search row above the item list of a `searchable` `Dropdown`. */
+    readonly dropdownSearch: "dial-kit-dropdown-search";
     /**
      * One row of a floating overlay: a dropdown item, a `Select` option, a
      * submenu trigger, or a submenu child. It sits on the element that draws the
@@ -141,6 +152,10 @@ export declare const DIAL_KIT_CLASS: {
     readonly avatar: "dial-kit-avatar";
     /** The root row of an `EntityIdentity`: its icon, type label, name and version. */
     readonly entityIdentity: "dial-kit-entity-identity";
+    /** The bordered card of a `SelectedEntityCard`, not the wrapper that also holds its error. */
+    readonly selectedEntityCard: "dial-kit-selected-entity-card";
+    /** The `section` root of a `FormSection`: its heading row, description and content. */
+    readonly formSection: "dial-kit-form-section";
     /** The row of a `Switch`: the control and its label. */
     readonly switch: "dial-kit-switch";
     /** The row of a `Checkbox`: the box and its label. */

package/dist/src/index.d.ts

@@ -96,11 +96,6 @@ export { DialDropdown } from './components/Dropdown/Dropdown';
 export { DialButtonDropdown } from './components/ButtonDropdown/ButtonDropdown';
 export { DialDropdownIcon } from './components/DropdownIcon/DropdownIcon';
 export type { DialDropdownIconProps } from './components/DropdownIcon/DropdownIcon';
-export { DialFileManager } from './components/FileManager/FileManager';
-export type { FileManagerGridRow } from './components/FileManager/FileManagerContext';
-export type { GridOptions, ToolbarOptions, BulkActionsToolbarOptions, } from './components/FileManager/FileManager';
-export { DialDestinationFolderPopup } from './components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup';
-export { DialFoldersTree } from './components/FileManager/components/FoldersTree/FoldersTree';
 export { EditorThemes } from './types/editor';
 export { ButtonVariant, ButtonAppearance } from './types/button';
 export { RadioGroupOrientation } from './types/radio-group';
@@ -109,20 +104,16 @@ export { ConfirmationPopupVariant } from './types/confirmation-popup';
 export { DropdownType, DropdownTrigger, DropdownItemType, } from './types/dropdown';
 export { MenuItemMark } from './types/menu-item';
 export { ElementSize } from './types/size';
-export { ScreenResolution, TabOrientation, TabView } from './types/tab';
+export { ScreenResolution, TabOrientation, TabStatus, TabView, } from './types/tab';
 export type { DialBreadcrumbPathItem } from './models/breadcrumb';
 export { FormItemOrientation } from './types/form-item';
 export { SelectSize, SelectVariant } from './types/select';
-export { DialFileManagerTabs, DialFileManagerActions, FileManagerColumnKey, } from './types/file-manager';
 export { FlexibleActionsDirection } from './types/flexible-actions';
 export { DialItemType } from './types/item';
 export { ResizableContainerSide } from './types/resizable-container';
 export { SkeletonVariant, SkeletonAvatarSize, SkeletonAvatarShape, } from './types/skeleton';
-export { useDialFileManagerTabs } from './components/FileManager/hooks/use-file-manager-tabs';
 export { EDITABLE_CONTAINER_ATTRIBUTE, editableContainerProps, useEditableItem, } from './hooks/use-editable-item';
 export type { UseEditableItemOptions } from './hooks/use-editable-item';
-export { FileManagerProvider } from './components/FileManager/FileManagerProvider';
-export { useFileManagerContext } from './components/FileManager/hooks/use-file-manager-context';
 export { StepStatus } from './models/step';
 export type { Step } from './models/step';
 export type { RadioButtonWithContent } from './models/radio';
@@ -134,13 +125,11 @@ export type { DialModifiedEntity } from './models/base-entity';
 export type { DialFile } from './models/file';
 export { DialFileNodeType, DialFilePermission, DialFileResourceType, } from './models/file';
 export type { DialRootFolder } from './models/file';
-export { type DialCopiedItem, type DialDeletedItem, type DialUploadFileItem, type DialFileManagerActionsRef, type DialFileAcceptType, } from './models/file-manager';
 export { GridSelectionMode } from './models/selection-mode';
 export { mergeClasses } from './utils/merge-classes';
 export { wrapInRootFolder } from './utils/flat-to-hierarchy-convertor.ts';
 export { getTimezoneLabel } from './utils/timezone';
 export type { TimezoneLabelOptions } from './utils/timezone';
-export { NAME_COLUMN, SIZE_COLUMN, UPDATED_AT_COLUMN, } from './constants/file-grid-columns';
 export { DIAL_ICON_SIZE, BASE_ICON_PROPS, BASE_ICON_SIZE, } from './constants/icon.ts';
 export { NOT_ALLOWED_SYMBOLS, NOT_ALLOWED_SPACES, NOT_ALLOWED_SYMBOLS_REGEXP, NOT_ALLOWED_SPACES_REGEXP, } from './constants/validation.ts';
 export { DIAL_KIT_CLASS } from './constants/public-class-names';
@@ -249,11 +238,14 @@ export type { BadgeProps } from './components/New/Badge/Badge';
 export { BadgeColor, BadgeVariant } from './types/badge';
 export { Avatar } from './components/New/Avatar/Avatar';
 export type { AvatarProps } from './components/New/Avatar/Avatar';
-export { AvatarShape } from './types/avatar';
-export { extractInitials } from './utils/avatar';
+export { AvatarColor, AvatarShape } from './types/avatar';
+export { AVATAR_PALETTE, extractInitials } from './utils/avatar';
+export type { AvatarColorClasses } from './utils/avatar';
 export { EntityIdentity } from './components/New/EntityIdentity/EntityIdentity';
 export type { EntityIdentityProps, EntityIdentityItem, EntityIdentityLabels, } from './components/New/EntityIdentity/EntityIdentity';
 export { EntityType } from './types/entity-type';
+export { SelectedEntityCard } from './components/New/SelectedEntityCard/SelectedEntityCard';
+export type { SelectedEntityCardProps, SelectedEntityCardLabels, } from './components/New/SelectedEntityCard/SelectedEntityCard';
 export { SideDrawer } from './components/New/SideDrawer/SideDrawer';
 export type { SideDrawerProps } from './components/New/SideDrawer/SideDrawer';
 export { Tag } from './components/New/Tag/Tag';
@@ -284,10 +276,17 @@ export { CollapsibleSidebar } from './components/New/CollapsibleSidebar/Collapsi
 export type { CollapsibleSidebarProps } from './components/New/CollapsibleSidebar/CollapsibleSidebar';
 export { ResizableContainer } from './components/New/ResizableContainer/ResizableContainer';
 export type { ResizableContainerProps } from './components/New/ResizableContainer/ResizableContainer';
+export { ResizeHandle } from './components/New/ResizeHandle/ResizeHandle';
+export type { ResizeHandleProps } from './components/New/ResizeHandle/ResizeHandle';
 export { ConditionalResizableContainer } from './components/New/ResizableContainer/ConditionalResizableContainer';
 export type { ConditionalResizableContainerProps } from './components/New/ResizableContainer/ConditionalResizableContainer';
 export { NoDataContent } from './components/New/NoDataContent/NoDataContent';
 export type { NoDataContentProps } from './components/New/NoDataContent/NoDataContent';
+export { StateScreen } from './components/New/StateScreen/StateScreen';
+export type { StateScreenProps } from './components/New/StateScreen/StateScreen';
+export { FormSection } from './components/New/FormSection/FormSection';
+export type { FormSectionProps, FormSectionHeadingLevel, } from './components/New/FormSection/FormSection';
+export { FormSectionVariant } from './types/form-section';
 export { TransferQueue } from './components/New/TransferQueue/TransferQueue';
 export type { TransferQueueItem, TransferQueueLabels, TransferQueueProps, } from './components/New/TransferQueue/TransferQueue';
 export { DEFAULT_TRANSFER_QUEUE_LABELS, TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS, } from './components/New/TransferQueue/constants';

package/dist/src/subpaths/editors.d.ts

@@ -16,7 +16,7 @@
 export { LazyDialJsonEditor } from '../components/JsonEditor/lazy';
 export { LazyDialMarkdownEditor } from '../components/MarkdownEditor/lazy';
 export { LazyMarkdownEditor } from '../components/New/MarkdownEditor/lazy';
-export declare const LazyDialMarkdownEditorContainer: () => Promise<typeof import("../components/MarkdownEditor/MarkdownEditorContainer")>;
+export declare const LazyDialMarkdownEditorContainer: () => Promise<typeof import('../components/MarkdownEditor/MarkdownEditorContainer')>;
 export { EditorThemes } from '../types/editor';
 export type { MarkdownEditorProps } from '../components/New/MarkdownEditor/MarkdownEditor';
 export type { DialMarkdownEditorContainerProps } from '../components/MarkdownEditor/MarkdownEditorContainer';

package/dist/src/types/avatar.d.ts

@@ -5,3 +5,12 @@ export declare enum AvatarShape {
     /** A rounded square — the avatar of an application, model or other entity. */
     Square = "square"
 }
+export declare enum AvatarColor {
+    Green1 = "green-1",
+    Violet2 = "violet-2",
+    Brown = "brown",
+    Red = "red",
+    Green2 = "green-2",
+    Blue = "blue",
+    Violet1 = "violet-1"
+}

package/dist/src/types/form-section.d.ts

@@ -0,0 +1,9 @@
+/** How a `FormSection` sets its heading, description and content. */
+export declare enum FormSectionVariant {
+    /** A field of a form: small semibold heading, small description, an 8px header gap. */
+    Row = "row",
+    /** A titled group of a builder column: caption-lead heading, tiny description. */
+    Caption = "caption",
+    /** One setting inside a group: tiny semibold heading, tiny description. */
+    Setting = "setting"
+}

package/dist/src/types/tab.d.ts

@@ -2,6 +2,11 @@ export declare enum TabOrientation {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
+/** Validation state a tab can flag on itself, e.g. a form section with problems. */
+export declare enum TabStatus {
+    Error = "error",
+    Warning = "warning"
+}
 export declare enum TabView {
     Default = "default",
     Inline = "inline"

package/dist/src/types/tag.d.ts

@@ -1,4 +1,6 @@
 export declare enum TagAppearance {
     Outlined = "outlined",
-    Selectable = "selectable"
+    Selectable = "selectable",
+    /** The compact, rimmed chip of a value in a form field (a host, a variable). */
+    Bordered = "bordered"
 }

package/dist/src/utils/avatar.d.ts

@@ -1,3 +1,4 @@
+import { AvatarColor } from '../types/avatar';
 /** A background and text colour pair for an initials avatar, as Tailwind classes. */
 export interface AvatarColorClasses {
     /** Background class, bound to a `--bg-visual-*` token. */
@@ -5,7 +6,7 @@ export interface AvatarColorClasses {
     /** Text class, bound to the matching `--text-visual-*` token. */
     foreground: string;
 }
-export declare const AVATAR_PALETTE: readonly AvatarColorClasses[];
+export declare const AVATAR_PALETTE: Record<AvatarColor, AvatarColorClasses>;
 /** Returns the palette entry for a name; the same name always gets the same colours. */
 export declare const pickAvatarColor: (name: string) => AvatarColorClasses;
 /** Returns 1–2 uppercase initials derived from a display name, or `'?'` when it has no letters. */

package/dist/src/utils/sub-menu-floating.d.ts

@@ -64,5 +64,5 @@ interface SubMenuPanelProps {
  * Shared floating panel wrapper (FloatingPortal → FloatingFocusManager → container div).
  * Used by DropdownSubMenuItem and SelectSubMenuItem.
  */
-export declare const SubMenuPanel: ({ refs, floatingStyles, context, getFloatingProps, role, surfaceClassName, className, children, }: SubMenuPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SubMenuPanel: ({ refs, floatingStyles, context, getFloatingProps, role, surfaceClassName, className, children, }: SubMenuPanelProps) => import('react/jsx-runtime').JSX.Element;
 export {};

package/dist/types/avatar.js

@@ -1,4 +1,5 @@
-var e = /* @__PURE__ */ ((r) => (r.Circle = "circle", r.Square = "square", r))(e || {});
+var n = /* @__PURE__ */ ((e) => (e.Circle = "circle", e.Square = "square", e))(n || {}), i = /* @__PURE__ */ ((e) => (e.Green1 = "green-1", e.Violet2 = "violet-2", e.Brown = "brown", e.Red = "red", e.Green2 = "green-2", e.Blue = "blue", e.Violet1 = "violet-1", e))(i || {});
 export {
-  e as AvatarShape
+  i as AvatarColor,
+  n as AvatarShape
 };

package/dist/types/form-section.js

@@ -0,0 +1,4 @@
+var p = /* @__PURE__ */ ((t) => (t.Row = "row", t.Caption = "caption", t.Setting = "setting", t))(p || {});
+export {
+  p as FormSectionVariant
+};

package/dist/types/tab.js

@@ -1,6 +1,7 @@
-var l = /* @__PURE__ */ ((r) => (r.Horizontal = "horizontal", r.Vertical = "vertical", r))(l || {}), t = /* @__PURE__ */ ((r) => (r.Default = "default", r.Inline = "inline", r))(t || {}), e = /* @__PURE__ */ ((r) => (r.Mobile = "mobile", r.Tablet = "tablet", r))(e || {});
+var e = /* @__PURE__ */ ((r) => (r.Horizontal = "horizontal", r.Vertical = "vertical", r))(e || {}), l = /* @__PURE__ */ ((r) => (r.Error = "error", r.Warning = "warning", r))(l || {}), n = /* @__PURE__ */ ((r) => (r.Default = "default", r.Inline = "inline", r))(n || {}), a = /* @__PURE__ */ ((r) => (r.Mobile = "mobile", r.Tablet = "tablet", r))(a || {});
 export {
-  e as ScreenResolution,
-  l as TabOrientation,
-  t as TabView
+  a as ScreenResolution,
+  e as TabOrientation,
+  l as TabStatus,
+  n as TabView
 };

package/dist/types/tag.js

@@ -1,4 +1,4 @@
-var l = /* @__PURE__ */ ((e) => (e.Outlined = "outlined", e.Selectable = "selectable", e))(l || {});
+var d = /* @__PURE__ */ ((e) => (e.Outlined = "outlined", e.Selectable = "selectable", e.Bordered = "bordered", e))(d || {});
 export {
-  l as TagAppearance
+  d as TagAppearance
 };

package/dist/utils/avatar.js

@@ -1,22 +1,45 @@
-const o = [
-  { background: "bg-green-1", foreground: "text-green-2" },
-  { background: "bg-violet-2", foreground: "text-violet-1" },
-  { background: "bg-brown", foreground: "text-brown-2" },
-  { background: "bg-red", foreground: "text-red" },
-  { background: "bg-green-2", foreground: "text-green-3" },
-  { background: "bg-blue", foreground: "text-accent" },
-  { background: "bg-violet-1", foreground: "text-violet-2" }
-], c = (t) => {
-  let e = 0;
-  for (let r = 0; r < t.length; r++)
-    e += t.charCodeAt(r);
-  return o[e % o.length];
-}, n = (t) => t.match(new RegExp("\\p{L}", "u"))?.[0] ?? "", l = (t) => {
-  const e = t.trim().split(/\s+/).filter(Boolean);
-  return e.length === 0 ? "?" : e.length >= 2 ? (n(e[0]) + n(e[1])).toUpperCase() || "?" : e[0].replace(/[^\p{L}]/gu, "").slice(0, 2).toUpperCase() || "?";
+import { AvatarColor as t } from "../types/avatar.js";
+const l = {
+  [t.Green1]: {
+    background: "bg-green-1",
+    foreground: "text-green-2"
+  },
+  [t.Violet2]: {
+    background: "bg-violet-2",
+    foreground: "text-violet-1"
+  },
+  [t.Brown]: {
+    background: "bg-brown",
+    foreground: "text-brown-2"
+  },
+  [t.Red]: {
+    background: "bg-red",
+    foreground: "text-red"
+  },
+  [t.Green2]: {
+    background: "bg-green-2",
+    foreground: "text-green-3"
+  },
+  [t.Blue]: {
+    background: "bg-blue",
+    foreground: "text-accent"
+  },
+  [t.Violet1]: {
+    background: "bg-violet-1",
+    foreground: "text-violet-2"
+  }
+}, c = (r) => {
+  const e = Object.values(l);
+  let n = 0;
+  for (let o = 0; o < r.length; o++)
+    n += r.charCodeAt(o);
+  return e[n % e.length];
+}, g = (r) => r.match(new RegExp("\\p{L}", "u"))?.[0] ?? "", u = (r) => {
+  const e = r.trim().split(/\s+/).filter(Boolean);
+  return e.length === 0 ? "?" : e.length >= 2 ? (g(e[0]) + g(e[1])).toUpperCase() || "?" : e[0].replace(/[^\p{L}]/gu, "").slice(0, 2).toUpperCase() || "?";
 };
 export {
-  o as AVATAR_PALETTE,
-  l as extractInitials,
+  l as AVATAR_PALETTE,
+  u as extractInitials,
   c as pickAvatarColor
 };