@vef-framework-react/components 2.3.0 → 2.4.1

package/dist/types/generic-select/props.d.ts

@@ -0,0 +1,181 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Size } from '../_base';
+/**
+ * Visual variant of the trigger, mirroring antd's `<Select variant>`.
+ */
+export type GenericSelectVariant = "outlined" | "filled" | "borderless" | "underlined";
+/**
+ * Validation status driving the trigger's border/feedback colour, mirroring
+ * antd's `<Select status>`.
+ */
+export type GenericSelectStatus = "error" | "warning";
+/**
+ * The render API the base hands down to a concrete popup body. A concrete
+ * selection component (icon grid, dropdown table, …) reads these to render its
+ * surface and commit a value — it never touches the underlying antd `Select`.
+ */
+export interface GenericSelectPopupApi<TValue> {
+    /**
+     * The currently selected value, or `null` when unset. Use it to highlight the
+     * active cell/row in the popup.
+     */
+    value: TValue | null;
+    /**
+     * The debounced search keyword typed into the trigger's search box, or `""`
+     * when not searching. The popup filters its content against this.
+     */
+    keyword: string;
+    /**
+     * Whether the popup is currently open. Useful for deferring expensive popup
+     * work (data fetches, virtualization measurement) until first open.
+     */
+    open: boolean;
+    /**
+     * Commit a value. Forwards to {@link GenericSelectProps.onChange}. Does NOT
+     * close the popup — call {@link GenericSelectPopupApi.close} as well for the
+     * common "pick then dismiss" flow.
+     */
+    select: (value: TValue) => void;
+    /**
+     * Close the popup without changing the value.
+     */
+    close: () => void;
+}
+/**
+ * Imperative handle exposed through `ref`.
+ */
+export interface GenericSelectRef {
+    /**
+     * Move focus into the trigger.
+     */
+    focus: () => void;
+    /**
+     * Remove focus from the trigger.
+     */
+    blur: () => void;
+}
+/**
+ * Props for the {@link GenericSelect} abstract base. It owns the antd
+ * `Select`-styled trigger (value display, size/status/variant/clear/disabled),
+ * the controlled open state, the search box, and the popup container; concrete
+ * components supply only the popup body ({@link GenericSelectProps.renderPopup})
+ * and how the selected value renders ({@link GenericSelectProps.renderLabel}).
+ *
+ * `TValue` is the selectable value — it is forwarded to the underlying antd
+ * `Select` as its value, so it must be a `string` or `number`.
+ */
+export interface GenericSelectProps<TValue extends string | number = string> {
+    /**
+     * The selected value, or `null`/`undefined` when unset (renders the placeholder).
+     */
+    value?: TValue | null;
+    /**
+     * Fired when a value is committed from the popup, or `null` when cleared.
+     */
+    onChange?: (value: TValue | null) => void;
+    /**
+     * Fired when the trigger loses focus. Wire this to drive form `touched` state.
+     */
+    onBlur?: () => void;
+    /**
+     * Controlled open state of the popup. Omit for uncontrolled behaviour.
+     */
+    open?: boolean;
+    /**
+     * Initial open state for the uncontrolled mode. Ignored when `open` is provided.
+     *
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Fired when the popup opens or closes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Render the popup body. Receives a {@link GenericSelectPopupApi} to read the
+     * current value/keyword/open state and to commit or dismiss a selection.
+     */
+    renderPopup: (api: GenericSelectPopupApi<TValue>) => ReactNode;
+    /**
+     * Render the selected value inside the trigger. Defaults to the raw value.
+     */
+    renderLabel?: (value: TValue) => ReactNode;
+    /**
+     * Show the search box in the trigger and forward the keyword to the popup.
+     *
+     * @default true
+     */
+    searchable?: boolean;
+    /**
+     * Placeholder shown when no value is selected.
+     */
+    placeholder?: ReactNode;
+    /**
+     * Density preset matching the VEF size token.
+     *
+     * @default "medium"
+     */
+    size?: Size;
+    /**
+     * Validation status, mirroring antd's `<Select status>`.
+     */
+    status?: GenericSelectStatus;
+    /**
+     * Visual variant of the trigger.
+     *
+     * @default "outlined"
+     */
+    variant?: GenericSelectVariant;
+    /**
+     * Disable the control.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Show a clear button to reset the value to `null`.
+     *
+     * @default false
+     */
+    allowClear?: boolean;
+    /**
+     * Render the trigger in a loading state.
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Custom suffix icon for the trigger. While the popup is open and `searchable`,
+     * a search icon is shown instead.
+     */
+    suffixIcon?: ReactNode;
+    /**
+     * Content rendered before the value inside the trigger.
+     */
+    prefix?: ReactNode;
+    /**
+     * Return the element the popup is rendered into. Defaults to `document.body`.
+     * Pass a scoped container (e.g. the form-editor phone shell) to contain the
+     * popup within it.
+     */
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    /**
+     * Whether the popup width matches the trigger width. Defaults to `false` so a
+     * popup body wider than the trigger (e.g. an icon grid) is not constrained.
+     *
+     * @default false
+     */
+    popupMatchSelectWidth?: boolean | number;
+    /**
+     * Additional class applied to the popup root.
+     */
+    popupClassName?: string;
+    /**
+     * Additional class applied to the trigger.
+     */
+    className?: string;
+    /**
+     * Inline styles applied to the trigger.
+     */
+    style?: CSSProperties;
+}

package/dist/types/icon-picker/icon-grid.d.ts

@@ -0,0 +1,37 @@
+import { DynamicIconName } from '../dynamic-icon';
+import { MemoExoticComponent } from 'react';
+/**
+ * Intrinsic width of the grid (8 columns + gaps). Exported so the picker can pin
+ * the popup to it instead of stretching to the trigger width.
+ */
+export declare const ICON_GRID_WIDTH: number;
+interface IconGridProps {
+    /**
+     * The selected icon name (for highlighting), or `null` when unset.
+     */
+    value: string | null;
+    /**
+     * The search keyword to filter icon names against.
+     */
+    keyword: string;
+    /**
+     * Commit the icon name of a clicked cell.
+     */
+    onSelect: (name: DynamicIconName) => void;
+    /**
+     * Dismiss the popup after a pick.
+     */
+    onClose: () => void;
+}
+/**
+ * The icon-picker popup body: a virtualized, searchable grid over the full
+ * lucide icon set. Only the rows in (and near) the viewport are mounted, and the
+ * shared icon loader caps concurrent chunk imports — so the ~2000-icon set never
+ * floods the bundler with a request per cell.
+ *
+ * Memoized, and fed stable `onSelect`/`onClose` by {@link GenericSelect}, so it
+ * is skipped while the user types in the trigger search box (only the debounced
+ * `keyword` actually re-renders it).
+ */
+export declare const IconGrid: MemoExoticComponent<({ value, keyword, onSelect, onClose }: IconGridProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export {};

package/dist/types/icon-picker/index.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithRef } from '../_base';
+import { IconPickerProps, IconPickerRef } from './props';
+/**
+ * A searchable popup grid for choosing a lucide icon, built on
+ * {@link GenericSelect}. The value is the kebab-case icon name (e.g.
+ * `"layout-dashboard"`); the trigger previews the selected icon alongside its
+ * name, and unknown names fall back to a placeholder glyph rather than breaking.
+ *
+ * Works both as a standalone controlled/uncontrolled input and, via
+ * `IconPickerField`, inside the VEF form.
+ */
+export declare function IconPicker(props: PropsWithRef<IconPickerRef, IconPickerProps>): import("@emotion/react/jsx-runtime").JSX.Element;
+export type { IconPickerProps, IconPickerRef, IconPickerValue } from './props';

package/dist/types/icon-picker/props.d.ts

@@ -0,0 +1,86 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Size } from '../_base';
+import { DynamicIconName } from '../dynamic-icon';
+import { GenericSelectRef, GenericSelectStatus, GenericSelectVariant } from '../generic-select';
+/**
+ * The icon-picker value. Accepts any known lucide icon name (with editor
+ * autocomplete) as well as a bare `string`, since persisted/backend data is an
+ * untyped icon name that may not be in the current lucide set — an unknown name
+ * renders a fallback glyph rather than breaking.
+ */
+export type IconPickerValue = DynamicIconName | (string & {});
+/**
+ * Imperative handle exposed through `ref`, identical to the underlying
+ * {@link GenericSelectRef}.
+ */
+export type IconPickerRef = GenericSelectRef;
+/**
+ * Props for the {@link IconPicker}. A searchable popup grid for choosing a
+ * lucide icon, built on {@link GenericSelect}. The value is the kebab-case icon
+ * name (e.g. `"layout-dashboard"`) — a plain string that survives a JSON
+ * round-trip and is rendered elsewhere through `DynamicIcon`.
+ */
+export interface IconPickerProps {
+    /**
+     * The selected icon name, or `null`/`undefined` when unset.
+     */
+    value?: IconPickerValue | null;
+    /**
+     * Initial value for the uncontrolled mode. Ignored when `value` is provided.
+     */
+    defaultValue?: IconPickerValue;
+    /**
+     * Fired when an icon is picked, or `null` when cleared. The value can be any
+     * lucide name the user picks; it is the same `IconPickerValue` shape as
+     * {@link IconPickerProps.value}, not narrowed to known names.
+     */
+    onChange?: (value: IconPickerValue | null) => void;
+    /**
+     * Fired when the control loses focus.
+     */
+    onBlur?: () => void;
+    /**
+     * Placeholder shown when no icon is selected.
+     */
+    placeholder?: ReactNode;
+    /**
+     * Density preset matching the VEF size token.
+     *
+     * @default "medium"
+     */
+    size?: Size;
+    /**
+     * Validation status, mirroring antd's `<Select status>`.
+     */
+    status?: GenericSelectStatus;
+    /**
+     * Visual variant of the trigger.
+     *
+     * @default "outlined"
+     */
+    variant?: GenericSelectVariant;
+    /**
+     * Disable the control.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Show a clear button to reset the value.
+     *
+     * @default true
+     */
+    allowClear?: boolean;
+    /**
+     * Return the element the popup is rendered into. Defaults to `document.body`.
+     */
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    /**
+     * Additional class applied to the trigger.
+     */
+    className?: string;
+    /**
+     * Inline styles applied to the trigger.
+     */
+    style?: CSSProperties;
+}

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export { breakpoints, closeAllMessages, closeAllNotifications, colors, emitReloadPage, fullSizes, getSpacingValue, globalCssVars, isFragment, isPresetColor, isSemanticColor, mapSize, presetColors, resolveBreakpointValue, semanticColors, semanticSceneIcons, semanticSceneLabels, semanticScenes, showConfirm, showErrorAlert, showErrorMessage, showErrorNotification, showInfoAlert, showInfoMessage, showInfoNotification, showLoadingMessage, showSuccessAlert, showSuccessMessage, showSuccessNotification, showWarningAlert, showWarningMessage, showWarningNotification, sizes, SYMBOL_PAGINATION, SYMBOL_SORT, useThemeTokens, type ActionButtonConfig, type ActionConfirmMode, type AlertOptions, type Breakpoint, type Color, type ConfirmOptions, type FullSize, type GetProp, type GetProps, type GetRef, type Length, type NotificationOptions, type OrderSpec, type Orientation, type Position, type PresetColor, type PropsWithRef, type SemanticColor, type SemanticScene, type Size, type SizeableLength } from './_base';
+export { breakpoints, closeAllMessages, closeAllNotifications, colors, emitReloadPage, fullSizes, getSpacingValue, globalCssVars, isFragment, isPresetColor, isSemanticColor, presetColors, resolveBreakpointValue, semanticColors, semanticSceneIcons, semanticSceneLabels, semanticScenes, showConfirm, showErrorAlert, showErrorMessage, showErrorNotification, showInfoAlert, showInfoMessage, showInfoNotification, showLoadingMessage, showSuccessAlert, showSuccessMessage, showSuccessNotification, showWarningAlert, showWarningMessage, showWarningNotification, sizes, SYMBOL_PAGINATION, SYMBOL_SORT, useThemeTokens, type ActionButtonConfig, type ActionConfirmMode, type AlertOptions, type Breakpoint, type Color, type ConfirmOptions, type FullSize, type GetProp, type GetProps, type GetRef, type Length, type NotificationOptions, type OrderSpec, type Orientation, type Position, type PresetColor, type PropsWithRef, type SemanticColor, type SemanticScene, type Size, type SizeableLength } from './_base';
 export { ActionButton, type ActionButtonProps } from './action-button';
 export { ActionGroup, type ActionGroupProps } from './action-group';
 export { Affix, type AffixProps } from './affix';
@@ -18,6 +18,7 @@ export { Cascader, type CascaderOption, type CascaderProps } from './cascader';
 export { Center, type CenterProps } from './center';
 export { Chart, connectCharts, disconnectCharts, useChart, type ChartInstance, type ChartOption, type ChartProps, type UseChartOptions } from './charts';
 export { Checkbox, type CheckboxGroupProps, type CheckboxOption, type CheckboxProps } from './checkbox';
+export { CodeEditor, type CodeEditorLanguage, type CodeEditorProps, type CodeEditorRef, type CodeEditorTheme } from './code-editor';
 export { CodeHighlighter, type CodeHighlighterProps } from './code-highlighter';
 export { Col, type ColProps } from './col';
 export { Collapse, type CollapseItem, type CollapseProps } from './collapse';
@@ -31,8 +32,9 @@ export { DatePicker, type DatePickerProps, type DateRangePickerProps } from './d
 export { Descriptions, type DescriptionsItem, type DescriptionsProps } from './descriptions';
 export { Divider, type DividerProps } from './divider';
 export { Drawer, type DrawerProps } from './drawer';
-export { Dropdown, type DropdownButtonProps, type DropdownButtonType, type DropdownMenuProps, type DropdownProps } from './dropdown';
+export { Dropdown, type DropdownButtonProps, type DropdownButtonType, type DropdownMenuItem, type DropdownMenuProps, type DropdownProps } from './dropdown';
 export { DynamicIcon, type DynamicIconName, type DynamicIconProps } from './dynamic-icon';
+export { createEditableColumn, EditableTable, type EditableColumn, type EditableColumnOptions, type EditableOperationColumnConfig, type EditableRowActionsTexts, type EditableTableProps, type EditFieldContext, type RenderEditor, type RenderView } from './editable-table';
 export { Empty, type EmptyProps } from './empty';
 export { FileUpload, type FileUploadProps, type UploadedFileMeta } from './file-upload';
 export { Flex, type FlexProps } from './flex';
@@ -43,10 +45,12 @@ export { createFormOptions, restoreFieldOptions, useForm, useFormContext, useFor
 export type * from './form';
 export { FormDrawer, type FormDrawerProps } from './form-drawer';
 export { FormModal, type FormModalProps } from './form-modal';
+export { GenericSelect, type GenericSelectPopupApi, type GenericSelectProps, type GenericSelectRef, type GenericSelectStatus, type GenericSelectVariant } from './generic-select';
 export { Grid, useGridCollapsed, type GridItemProps, type GridProps } from './grid';
 export { Group, type GroupProps } from './group';
 export { Icon, type IconProps } from './icon';
 export { IconButton, type IconButtonProps } from './icon-button';
+export { IconPicker, type IconPickerProps, type IconPickerRef, type IconPickerValue } from './icon-picker';
 export { Image, type ImageProps } from './image';
 export { Input, type InputProps, type InputRef, type OTPProps, type PasswordProps, type SearchProps, type TextAreaProps } from './input';
 export { InputNumber, type InputNumberProps } from './input-number';
@@ -58,7 +62,7 @@ export { Mentions, type MentionsOption, type MentionsProps } from './mentions';
 export { Menu, type MenuDividerType, type MenuItem, type MenuItemGroupType, type MenuItemType, type MenuProps, type SubMenuType } from './menu';
 export { Modal, type ModalProps } from './modal';
 export { OperationButton, type OperationButtonProps } from './operation-button';
-export { Page, useViewportHeight, type PageProps } from './page';
+export { Page, usePageEntranceEffect, usePageEntranceSettled, useViewportHeight, type PageEntranceStore, type PageProps } from './page';
 export { Pagination, type PaginationProps } from './pagination';
 export { PermissionGate, type PermissionGateProps } from './permission-gate';
 export { Popconfirm, type PopconfirmProps } from './popconfirm';
@@ -71,7 +75,7 @@ export { Radio, type RadioGroupProps, type RadioOption, type RadioProps } from '
 export { Rate, type RateProps } from './rate';
 export { Result, type ResultProps } from './result';
 export { Row, type RowProps } from './row';
-export { ScrollArea, type ScrollAreaProps } from './scroll-area';
+export { ScrollArea, type ScrollAreaProps, type ScrollAreaScrollbars } from './scroll-area';
 export { Segmented, type SegmentedOption, type SegmentedProps } from './segmented';
 export { Select, useDataOptionsSelect, useDictionaryOptionsSelect, type SelectOption, type SelectProps, type UseDataOptionsSelectOptions, type UseDictionaryOptionsSelectOptions, type UseDictionaryOptionsSelectResult } from './select';
 export { Skeleton, type SkeletonButtonProps, type SkeletonImageProps, type SkeletonInputProps, type SkeletonNodeProps, type SkeletonParagraphProps, type SkeletonProps, type SkeletonTitleProps } from './skeleton';

package/dist/types/page/components/resize-handle.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, default as React } from 'react';
+import { MouseEvent } from 'react';
 export interface ResizeHandleProps {
     isDragging: boolean;
     position: "left" | "right";

package/dist/types/page/entrance.d.ts

@@ -0,0 +1,56 @@
+import { Context } from 'react';
+/**
+ * Orchestration signal for the Page entrance animation: "the page has
+ * finished arriving". Secondary motion, auto-focus, guided hints, or
+ * deferred heavy initialization key off it so they start after the entrance
+ * instead of competing with it.
+ *
+ * The context carries a STABLE store reference — never a changing value — so
+ * the entrance settling re-renders nothing by itself. Each consumer chooses
+ * its own cost:
+ * - {@link usePageEntranceEffect} runs a callback on settle (zero re-renders),
+ * - {@link usePageEntranceSettled} subscribes a component to the boolean
+ * (that component alone re-renders on the flip),
+ * - CSS can target the Page root's `data-entrance` attribute directly.
+ */
+export interface PageEntranceStore {
+    isSettled: () => boolean;
+    /**
+     * Notifies on every transition of the settled state (entering → settled
+     * and, on a page reload replaying the entrance, settled → entering).
+     */
+    subscribe: (listener: () => void) => () => void;
+}
+/**
+ * Mutable handle the Page component drives from its animation callbacks.
+ * Internal — only the read surface ({@link PageEntranceStore}) leaves the
+ * package.
+ */
+export interface PageEntranceController {
+    store: PageEntranceStore;
+    setSettled: (settled: boolean) => void;
+}
+export declare function createPageEntranceController(): PageEntranceController;
+export declare const PageEntranceContext: Context<PageEntranceStore>;
+/**
+ * Whether the hosting Page's entrance animation has finished (immediately
+ * `true` outside a Page). Subscribes the calling component: it re-renders
+ * once when the entrance settles — use this form when the settled state
+ * drives rendering. For "do something once the page has arrived", prefer
+ * {@link usePageEntranceEffect}, which re-renders nothing.
+ */
+export declare function usePageEntranceSettled(): boolean;
+/**
+ * Runs `effect` once the hosting Page's entrance animation has settled —
+ * immediately when already settled (including outside a Page). The returned
+ * cleanup runs on unmount, and the effect re-arms if a page reload replays
+ * the entrance. Reads the latest `effect` at fire time, so an inline closure
+ * is fine.
+ *
+ * ```tsx
+ * usePageEntranceEffect(() => {
+ * chart.startEntranceSequence();
+ * });
+ * ```
+ */
+export declare function usePageEntranceEffect(effect: () => void | (() => void)): void;

package/dist/types/page/index.d.ts

@@ -1,4 +1,5 @@
 import { PageProps } from './props';
 export declare function Page({ className, mainClassName, leftAside, leftAsideClassName, leftAsideWidth, rightAside, rightAsideClassName, rightAsideWidth, header, headerClassName, headerPosition, footer, footerClassName, footerPosition, actionBar, actionBarClassName, scrollable, scrollMargin, margin, gap, children }: PageProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export { usePageEntranceEffect, usePageEntranceSettled, type PageEntranceStore } from './entrance';
 export { type AsideWidth, type PageProps, type Position, type ResizableWidth } from './props';
 export { useViewportHeight } from './viewport-context';

package/dist/types/pro-table/components/table.d.ts

@@ -1,13 +1,13 @@
 import { AnyObject, Key } from '@vef-framework-react/shared';
 import { NonPaginatedProTableProps, PaginatedProTableProps } from '../props';
 import { ColumnSettingsProp } from '../types';
-type PaginatedTableProps<TRow extends AnyObject, TParams extends AnyObject> = Pick<PaginatedProTableProps<TRow, TParams>, "className" | "style" | "size" | "queryFn" | "queryEnabled" | "queryParams" | "columns" | "rowKey" | "rowSelection" | "showSequenceColumn" | "operationColumn" | "selectedRowKeys" | "virtual" | "title" | "summary" | "onSelectedRowKeysChange"> & {
+type PaginatedTableProps<TRow extends AnyObject, TParams extends AnyObject> = Pick<PaginatedProTableProps<TRow, TParams>, "className" | "style" | "size" | "queryFn" | "queryEnabled" | "queryParams" | "columns" | "rowKey" | "rowSelection" | "showSequenceColumn" | "operationColumn" | "selectedRowKeys" | "striped" | "virtual" | "title" | "summary" | "onRowClick" | "onSelectedRowKeysChange"> & {
     columnSettings: ColumnSettingsProp;
 };
-type NonPaginatedTableProps<TRow extends AnyObject, TParams extends AnyObject> = Pick<NonPaginatedProTableProps<TRow, TParams>, "className" | "style" | "size" | "queryFn" | "queryEnabled" | "queryParams" | "columns" | "rowKey" | "rowSelection" | "showSequenceColumn" | "operationColumn" | "selectedRowKeys" | "virtual" | "title" | "summary" | "onSelectedRowKeysChange"> & {
+type NonPaginatedTableProps<TRow extends AnyObject, TParams extends AnyObject> = Pick<NonPaginatedProTableProps<TRow, TParams>, "className" | "style" | "size" | "queryFn" | "queryEnabled" | "queryParams" | "columns" | "rowKey" | "rowSelection" | "showSequenceColumn" | "operationColumn" | "selectedRowKeys" | "striped" | "virtual" | "title" | "summary" | "onRowClick" | "onSelectedRowKeysChange"> & {
     columnSettings: ColumnSettingsProp;
 };
 export declare function getRowKeyFn(rowKey?: string | ((row: AnyObject) => Key)): ((row: AnyObject) => string) | undefined;
-export declare function PaginatedTable<TRow extends AnyObject, TParams extends AnyObject>({ className, style, size, queryFn, columns, columnSettings, rowKey, rowSelection, queryEnabled, queryParams, showSequenceColumn, operationColumn, selectedRowKeys, virtual, title, summary, onSelectedRowKeysChange }: PaginatedTableProps<TRow, TParams>): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare function NonPaginatedTable<TRow extends AnyObject, TParams extends AnyObject>({ className, style, size, queryFn, columns, columnSettings, rowKey, rowSelection, queryEnabled, queryParams, showSequenceColumn, operationColumn, selectedRowKeys, virtual, title, summary, onSelectedRowKeysChange }: NonPaginatedTableProps<TRow, TParams>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function PaginatedTable<TRow extends AnyObject, TParams extends AnyObject>({ className, style, size, queryFn, columns, columnSettings, rowKey, rowSelection, queryEnabled, queryParams, showSequenceColumn, operationColumn, selectedRowKeys, striped, virtual, title, summary, onRowClick, onSelectedRowKeysChange }: PaginatedTableProps<TRow, TParams>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function NonPaginatedTable<TRow extends AnyObject, TParams extends AnyObject>({ className, style, size, queryFn, columns, columnSettings, rowKey, rowSelection, queryEnabled, queryParams, showSequenceColumn, operationColumn, selectedRowKeys, striped, virtual, title, summary, onRowClick, onSelectedRowKeysChange }: NonPaginatedTableProps<TRow, TParams>): import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/pro-table/hooks/index.d.ts

@@ -1,3 +1,3 @@
 export { clearColumnSettingsStorage, useColumnSettingsPersistence } from './use-column-settings-persistence';
 export { useRowSelection } from './use-row-selection';
-export { useTableColumns } from './use-table-columns';
+export { OPERATION_CELL_CLASS, useTableColumns } from './use-table-columns';

package/dist/types/pro-table/hooks/use-table-columns.d.ts

@@ -1,6 +1,12 @@
 import { AnyObject } from '@vef-framework-react/shared';
 import { TableColumn } from '../../table';
 import { ColumnSettingsProp, OperationColumnConfig } from '../types';
+/**
+ * Class applied to every cell of the built-in operation column so the
+ * `onRowClick` handler can tell row-surface clicks apart from clicks on
+ * per-row actions.
+ */
+export declare const OPERATION_CELL_CLASS = "vef-table-operation-cell";
 /**
  * The hook to use the table columns.
  *

package/dist/types/pro-table/props.d.ts

@@ -1,6 +1,6 @@
 import { PaginationResult, QueryFunction } from '@vef-framework-react/core';
 import { AnyObject, DeepKeys, Key } from '@vef-framework-react/shared';
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { TableColumn, TableProps } from '../table';
 import { ColumnSettingsProp, OperationColumnConfig, ParamsWithPagination, ParamsWithSort, RowSelectionConfig } from './types';
 /**
@@ -44,6 +44,12 @@ interface BaseProTableProps<TRow extends AnyObject, TParams extends AnyObject> e
      * @default false
      */
     virtual?: boolean;
+    /**
+     * Render zebra-striped table rows
+     *
+     * @default false
+     */
+    striped?: boolean;
     /**
      * Currently selected row keys
      */
@@ -83,6 +89,14 @@ interface BaseProTableProps<TRow extends AnyObject, TParams extends AnyObject> e
      * Custom footer content to be rendered below the summary
      */
     footer?: ReactNode;
+    /**
+     * Callback fired when a table body row is clicked.
+     *
+     * Clicks inside the built-in operation column are ignored so per-row action
+     * buttons do not also trigger the row-level action. Interactive elements
+     * rendered in custom cells should call `event.stopPropagation()` to opt out.
+     */
+    onRowClick?: (row: TRow, index: number | undefined, event: MouseEvent<HTMLElement>) => void;
     /**
      * Callback when selected row keys change
      */

package/dist/types/scroll-area/index.d.ts

@@ -1,3 +1,3 @@
 import { ScrollAreaProps } from './props';
-export declare function ScrollArea({ ref, scrollbarSize, scrollbarPadding, viewportRef, viewportClassName, viewportStyle, overscrollBehavior, onScrollPositionChange, onTopReached, onBottomReached, children, ...rootProps }: ScrollAreaProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export { type ScrollAreaProps } from './props';
+export declare function ScrollArea({ ref, scrollbarSize, scrollbarPadding, scrollbars, viewportRef, viewportClassName, viewportStyle, overscrollBehavior, onScrollPositionChange, onTopReached, onBottomReached, children, ...rootProps }: ScrollAreaProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export { type ScrollAreaProps, type ScrollAreaScrollbars } from './props';

package/dist/types/scroll-area/props.d.ts

@@ -2,10 +2,17 @@ import { ScrollAreaProps as ScrollAreaPropsInternal } from '@radix-ui/react-scro
 import { Except } from '@vef-framework-react/shared';
 import { ComponentPropsWithRef, CSSProperties, Ref } from 'react';
 import { Length, Position } from '../_base';
+export type ScrollAreaScrollbars = "both" | "vertical" | "horizontal";
 /**
  * The props for the ScrollArea component.
  */
 export interface ScrollAreaProps extends Except<ComponentPropsWithRef<"div">, "dir">, Pick<ScrollAreaPropsInternal, "type" | "scrollHideDelay"> {
+    /**
+     * Which scrollbar axes to render.
+     *
+     * @default "both"
+     */
+    scrollbars?: ScrollAreaScrollbars;
     /**
      * The size of the scrollbar
      *

package/dist/types/table/index.d.ts

@@ -3,5 +3,5 @@ import { TableProps } from './props';
 export { type TableProps } from './props';
 export { pageSizeOptions, usePaginationProps } from './use-pagination-props';
 export type { TableColumnType as TableColumn, TablePaginationConfig } from 'antd';
-export declare function Table<TRow = AnyObject>({ className, style, flexHeight, virtual, columns, ...restProps }: TableProps<TRow>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Table<TRow = AnyObject>({ className, style, flexHeight, striped, virtual, columns, rowClassName, ...restProps }: TableProps<TRow>): import("@emotion/react/jsx-runtime").JSX.Element;
 export type { TableRowSelection } from 'antd/es/table/interface';

package/dist/types/table/props.d.ts

@@ -10,4 +10,12 @@ export interface TableProps<TRow = AnyObject> extends Except<TablePropsInternal<
      * @default true
      */
     flexHeight?: boolean;
+    /**
+     * Render zebra-striped rows: every second body row gets a subtle fill so wide
+     * tables stay scannable. Composes with `rowClassName`, and hover / selection
+     * feedback still applies.
+     *
+     * @default false
+     */
+    striped?: boolean;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vef-framework-react/components",
   "type": "module",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "private": false,
   "description": "Components for VEF Framework",
   "author": {
@@ -50,31 +50,45 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "^2.1.2",
-    "@ant-design/icons": "^6.2.2",
+    "@ant-design/icons": "^6.2.5",
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/lint": "^6.8.5",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@codemirror/view": "^6.43.0",
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/serialize": "^1.3.3",
     "@gsap/react": "^2.1.2",
-    "@lucide/icons": "^1.16.0",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@tanstack/react-form": "^1.29.1",
-    "antd": "^6.4.2",
+    "@lucide/icons": "^1.17.0",
+    "@radix-ui/react-scroll-area": "^1.2.11",
+    "@tanstack/react-form": "^1.33.0",
+    "@tanstack/react-virtual": "^3.13.6",
+    "@uiw/react-codemirror": "^4.25.10",
+    "antd": "^6.4.3",
     "antd-img-crop": "^4.30.0",
-    "echarts": "^6.0.0",
+    "echarts": "^6.1.0",
     "echarts-for-react": "^3.0.6",
     "gsap": "^3.15.0",
-    "lucide-react": "^1.16.0",
+    "lucide-react": "^1.17.0",
     "modern-normalize": "^3.0.1",
-    "react-error-boundary": "^6.1.1",
+    "react-error-boundary": "^6.1.2",
     "react-syntax-highlighter": "^16.1.1",
     "tslib": "^2.8.1",
-    "@vef-framework-react/core": "2.3.0",
-    "@vef-framework-react/hooks": "2.3.0",
-    "@vef-framework-react/shared": "2.3.0"
+    "@vef-framework-react/shared": "2.4.1",
+    "@vef-framework-react/core": "2.4.1",
+    "@vef-framework-react/hooks": "2.4.1"
   },
   "devDependencies": {
     "@types/react-syntax-highlighter": "^15.5.13",
-    "react": "^19.2.6"
+    "react": "^19.2.7"
   },
   "scripts": {
     "clean": "rimraf dist",