@vendure/dashboard 3.3.6-master-202507021511 → 3.3.6-master-202507030234

package/src/app/routes/_authenticated/_tax-categories/components/tax-category-bulk-actions.tsx

@@ -1,4 +1,4 @@
-import { BulkActionComponent } from '@/vdb/framework/data-table/data-table-types.js';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { deleteTaxCategoriesDocument } from '../tax-categories.graphql.js';
 

package/src/app/routes/_authenticated/_tax-rates/components/tax-rate-bulk-actions.tsx

@@ -1,4 +1,4 @@
-import { BulkActionComponent } from '@/vdb/framework/data-table/data-table-types.js';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { deleteTaxRatesDocument } from '../tax-rates.graphql.js';
 

package/src/app/routes/_authenticated/_zones/components/zone-bulk-actions.tsx

@@ -1,4 +1,4 @@
-import { BulkActionComponent } from '@/vdb/framework/data-table/data-table-types.js';
+import { BulkActionComponent } from '@/vdb/framework/extension-api/types/index.js';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { deleteZonesDocument } from '../zones.graphql.js';
 

package/src/app/routes/_authenticated/_zones/components/zone-countries-sheet.tsx

@@ -9,7 +9,7 @@ interface ZoneCountriesSheetProps {
     children?: React.ReactNode;
 }
 
-export function ZoneCountriesSheet({ zoneId, zoneName, children }: ZoneCountriesSheetProps) {
+export function ZoneCountriesSheet({ zoneId, zoneName, children }: Readonly<ZoneCountriesSheetProps>) {
     return (
         <Sheet>
             <SheetTrigger asChild>

package/src/app/routes/_authenticated/_zones/components/zone-countries-table.tsx

@@ -15,7 +15,7 @@ interface ZoneCountriesTableProps {
     canAddCountries?: boolean;
 }
 
-export function ZoneCountriesTable({ zoneId, canAddCountries = false }: ZoneCountriesTableProps) {
+export function ZoneCountriesTable({ zoneId, canAddCountries = false }: Readonly<ZoneCountriesTableProps>) {
     const { data, refetch } = useQuery({
         queryKey: ['zone', zoneId],
         queryFn: () => api.query(zoneMembersQuery, { zoneId }),

package/src/app/routes/_authenticated/index.tsx

@@ -1,9 +1,9 @@
 import { Button } from '@/vdb/components/ui/button.js';
-import { DashboardWidgetInstance } from '@/vdb/framework/dashboard-widget/types.js';
 import {
     getDashboardWidget,
     getDashboardWidgetRegistry,
 } from '@/vdb/framework/dashboard-widget/widget-extensions.js';
+import { DashboardWidgetInstance } from '@/vdb/framework/extension-api/types/widgets.js';
 import {
     FullWidthPageBlock,
     Page,

package/src/lib/components/data-display/boolean.tsx

@@ -2,7 +2,7 @@ import { CheckIcon, XIcon } from 'lucide-react';
 import React from 'react';
 import { Badge } from '../ui/badge.js';
 
-export function BooleanDisplayCheckbox({ value }: { value: boolean }) {
+export function BooleanDisplayCheckbox({ value }: Readonly<{ value: boolean }>) {
     return value ? <CheckIcon className="opacity-70" /> : <XIcon className="opacity-70" />;
 }
 

package/src/lib/components/data-display/date-time.tsx

@@ -1,6 +1,6 @@
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 
-export function DateTime({ value }: { value: string | Date }) {
+export function DateTime({ value }: Readonly<{ value: string | Date }>) {
     const { formatDate } = useLocalFormat();
     let renderedDate: string;
     try {

package/src/lib/components/data-display/json.tsx

@@ -1,5 +1,5 @@
 import { JsonEditor } from 'json-edit-react';
 
-export function Json({ value }: { value: any }) {
+export function Json({ value }: Readonly<{ value: any }>) {
     return <JsonEditor data={value} />;
 }

package/src/lib/components/data-input/affixed-input.tsx

@@ -6,7 +6,7 @@ interface AffixedInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     suffix?: ReactNode;
 }
 
-export function AffixedInput({ prefix, suffix, className = '', ...props }: AffixedInputProps) {
+export function AffixedInput({ prefix, suffix, className = '', ...props }: Readonly<AffixedInputProps>) {
     const prefixRef = useRef<HTMLSpanElement>(null);
     const suffixRef = useRef<HTMLSpanElement>(null);
     const [prefixWidth, setPrefixWidth] = useState(0);

package/src/lib/components/data-input/richt-text-input.tsx

@@ -26,7 +26,7 @@ export interface RichTextInputProps {
     onChange: (value: string) => void;
 }
 
-export function RichTextInput({ value, onChange }: RichTextInputProps) {
+export function RichTextInput({ value, onChange }: Readonly<RichTextInputProps>) {
     const editor = useEditor({
         parseOptions: {
             preserveWhitespace: 'full',

package/src/lib/components/data-table/add-filter-menu.tsx

@@ -17,7 +17,7 @@ export interface AddFilterMenuProps {
     columns: Column<any, unknown>[];
 }
 
-export function AddFilterMenu({ columns }: AddFilterMenuProps) {
+export function AddFilterMenu({ columns }: Readonly<AddFilterMenuProps>) {
     const [selectedColumn, setSelectedColumn] = useState<ColumnDef<any> | null>(null);
     const [isDialogOpen, setIsDialogOpen] = useState(false);
 

package/src/lib/components/data-table/data-table-bulk-actions.tsx

@@ -8,7 +8,7 @@ import {
     DropdownMenuTrigger,
 } from '@/vdb/components/ui/dropdown-menu.js';
 import { getBulkActions } from '@/vdb/framework/data-table/data-table-extensions.js';
-import { BulkAction } from '@/vdb/framework/data-table/data-table-types.js';
+import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
 import { usePageBlock } from '@/vdb/hooks/use-page-block.js';
 import { usePage } from '@/vdb/hooks/use-page.js';
 import { Trans } from '@/vdb/lib/trans.js';

package/src/lib/components/data-table/data-table-column-header.tsx

@@ -8,7 +8,7 @@ export interface DataTableColumnHeaderProps {
     headerContext: HeaderContext<any, any>;
 }
 
-export function DataTableColumnHeader({ headerContext, customConfig }: DataTableColumnHeaderProps) {
+export function DataTableColumnHeader({ headerContext, customConfig }: Readonly<DataTableColumnHeaderProps>) {
     const { column } = headerContext;
     const isSortable = column.getCanSort();
 

package/src/lib/components/data-table/data-table-filter-dialog.tsx

@@ -21,7 +21,7 @@ export interface DataTableFilterDialogProps {
     column: Column<any>;
 }
 
-export function DataTableFilterDialog({ column }: DataTableFilterDialogProps) {
+export function DataTableFilterDialog({ column }: Readonly<DataTableFilterDialogProps>) {
     const columnFilter = column.getFilterValue() as Record<string, string> | undefined;
     const [filter, setFilter] = useState(columnFilter);
 

package/src/lib/components/data-table/data-table.tsx

@@ -6,7 +6,7 @@ import { RefreshButton } from '@/vdb/components/data-table/refresh-button.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Skeleton } from '@/vdb/components/ui/skeleton.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
-import { BulkAction } from '@/vdb/framework/data-table/data-table-types.js';
+import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import {
     ColumnDef,

package/src/lib/components/data-table/filters/data-table-boolean-filter.tsx

@@ -13,7 +13,10 @@ export interface DataTableBooleanFilterProps {
 
 export const BOOLEAN_OPERATORS = ['eq', 'isNull'] as const;
 
-export function DataTableBooleanFilter({ value: incomingValue, onChange }: DataTableBooleanFilterProps) {
+export function DataTableBooleanFilter({
+    value: incomingValue,
+    onChange,
+}: Readonly<DataTableBooleanFilterProps>) {
     const initialOperator = incomingValue ? (Object.keys(incomingValue)[0] ?? 'eq') : 'eq';
     const initialValue = incomingValue ? Object.values(incomingValue)[0] : true;
     const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');

package/src/lib/components/data-table/filters/data-table-datetime-filter.tsx

@@ -10,7 +10,10 @@ export interface DataTableDateTimeFilterProps {
 
 export const DATETIME_OPERATORS = ['eq', 'before', 'after', 'between', 'isNull'] as const;
 
-export function DataTableDateTimeFilter({ value: incomingValue, onChange }: DataTableDateTimeFilterProps) {
+export function DataTableDateTimeFilter({
+    value: incomingValue,
+    onChange,
+}: Readonly<DataTableDateTimeFilterProps>) {
     const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'eq';
     const initialValue = incomingValue ? Object.values(incomingValue)[0] : '';
     const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');

package/src/lib/components/data-table/filters/data-table-id-filter.tsx

@@ -12,7 +12,7 @@ export interface DataTableIdFilterProps {
 
 export const ID_OPERATORS = ['eq', 'notEq', 'in', 'notIn', 'isNull'] as const;
 
-export function DataTableIdFilter({ value: incomingValue, onChange }: DataTableIdFilterProps) {
+export function DataTableIdFilter({ value: incomingValue, onChange }: Readonly<DataTableIdFilterProps>) {
     const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'eq';
     const initialValue = incomingValue ? Object.values(incomingValue)[0] : '';
     const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');

package/src/lib/components/data-table/filters/data-table-number-filter.tsx

@@ -13,7 +13,11 @@ export interface DataTableNumberFilterProps {
 
 export const NUMBER_OPERATORS = ['eq', 'gt', 'gte', 'lt', 'lte', 'isNull', 'between'] as const;
 
-export function DataTableNumberFilter({ mode, value: incomingValue, onChange }: DataTableNumberFilterProps) {
+export function DataTableNumberFilter({
+    mode,
+    value: incomingValue,
+    onChange,
+}: Readonly<DataTableNumberFilterProps>) {
     const { activeChannel } = useChannel();
     const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'eq';
     const initialValue = incomingValue ? Object.values(incomingValue)[0] : 0;

package/src/lib/components/data-table/filters/data-table-string-filter.tsx

@@ -21,7 +21,10 @@ export const STRING_OPERATORS = [
     'isNull',
 ] as const;
 
-export function DataTableStringFilter({ value: incomingValue, onChange }: DataTableStringFilterProps) {
+export function DataTableStringFilter({
+    value: incomingValue,
+    onChange,
+}: Readonly<DataTableStringFilterProps>) {
     const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'contains';
     const initialValue = incomingValue ? Object.values(incomingValue)[0] : '';
     const [operator, setOperator] = useState<string>(initialOperator ?? 'contains');

package/src/lib/components/data-table/refresh-button.tsx

@@ -22,7 +22,10 @@ function useDelayedLoading(isLoading: boolean, delayMs: number = 100) {
     return delayedLoading;
 }
 
-export function RefreshButton({ onRefresh, isLoading }: { onRefresh: () => void; isLoading: boolean }) {
+export function RefreshButton({
+    onRefresh,
+    isLoading,
+}: Readonly<{ onRefresh: () => void; isLoading: boolean }>) {
     const delayedLoading = useDelayedLoading(isLoading, 100);
 
     const handleClick = () => {

package/src/lib/components/layout/nav-main.tsx

@@ -28,7 +28,7 @@ function sortByOrder<T extends { order?: number; title: string }>(a: T, b: T) {
     return orderA - orderB;
 }
 
-export function NavMain({ items }: { items: Array<NavMenuSection | NavMenuItem> }) {
+export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavMenuItem> }>) {
     const location = useLocation();
     // State to track which bottom section is currently open
     const [openBottomSectionId, setOpenBottomSectionId] = React.useState<string | null>(null);

package/src/lib/components/shared/asset/asset-bulk-actions.tsx

@@ -32,7 +32,7 @@ interface AssetBulkActionsProps {
     refetch: () => void;
 }
 
-export function AssetBulkActions({ selection, bulkActions, refetch }: AssetBulkActionsProps) {
+export function AssetBulkActions({ selection, bulkActions, refetch }: Readonly<AssetBulkActionsProps>) {
     const { pageId } = usePage();
     const { blockId } = usePageBlock();
 

package/src/lib/components/shared/asset/asset-preview-selector.tsx

@@ -8,7 +8,7 @@ export interface AssetPreviewSelectorProps {
     height: number;
 }
 
-export function AssetPreviewSelector({ size, setSize, width, height }: AssetPreviewSelectorProps) {
+export function AssetPreviewSelector({ size, setSize, width, height }: Readonly<AssetPreviewSelectorProps>) {
     return (
         <div className="flex items-center gap-2">
             <Select value={size} onValueChange={value => setSize(value as PreviewPreset)}>

package/src/lib/components/shared/asset/asset-preview.tsx

@@ -19,7 +19,7 @@ interface AssetPreviewProps {
     customFields?: any[];
 }
 
-export function AssetPreview({ asset, assets, customFields = [] }: AssetPreviewProps) {
+export function AssetPreview({ asset, assets, customFields = [] }: Readonly<AssetPreviewProps>) {
     const [size, setSize] = useState<PreviewPreset>('medium');
     const [width, setWidth] = useState(0);
     const [height, setHeight] = useState(0);

package/src/lib/components/shared/asset/asset-properties.tsx

@@ -8,7 +8,7 @@ export interface AssetPropertiesProps {
     asset: AssetFragment;
 }
 
-export function AssetProperties({ asset }: AssetPropertiesProps) {
+export function AssetProperties({ asset }: Readonly<AssetPropertiesProps>) {
     return (
         <div className="space-y-4">
             <div>

package/src/lib/components/shared/asset/focal-point-control.tsx

@@ -13,7 +13,7 @@ interface FocalPointControlProps {
     onChange: (point: Point) => void;
 }
 
-export function FocalPointControl({ width, height, point, onChange }: FocalPointControlProps) {
+export function FocalPointControl({ width, height, point, onChange }: Readonly<FocalPointControlProps>) {
     const [dragging, setDragging] = useState(false);
 
     useEffect(() => {

package/src/lib/components/shared/channel-code-label.tsx

@@ -1,6 +1,6 @@
 import { DEFAULT_CHANNEL_CODE } from '@/vdb/constants.js';
 import { Trans } from '@/vdb/lib/trans.js';
 
-export function ChannelCodeLabel({ code }: { code: string } | { code: undefined }) {
+export function ChannelCodeLabel({ code }: Readonly<{ code: string }> | Readonly<{ code: undefined }>) {
     return code === DEFAULT_CHANNEL_CODE ? <Trans>Default channel</Trans> : code;
 }

package/src/lib/components/shared/copyable-text.tsx

@@ -1,9 +1,8 @@
 import { useCopyToClipboard } from '@uidotdev/usehooks';
-import { CopyIcon } from 'lucide-react';
+import { CheckIcon, CopyIcon } from 'lucide-react';
 import { useState } from 'react';
-import { CheckIcon } from 'lucide-react';
 
-export function CopyableText({ text }: { text: string }) {
+export function CopyableText({ text }: Readonly<{ text: string }>) {
     const [copiedId, setCopiedId] = useState<string | null>(null);
     const [, copy] = useCopyToClipboard();
 

package/src/lib/components/shared/custom-fields-form.tsx

@@ -28,7 +28,7 @@ interface CustomFieldsFormProps {
     formPathPrefix?: string;
 }
 
-export function CustomFieldsForm({ entityType, control, formPathPrefix }: CustomFieldsFormProps) {
+export function CustomFieldsForm({ entityType, control, formPathPrefix }: Readonly<CustomFieldsFormProps>) {
     const {
         settings: { displayLanguage },
     } = useUserSettings();

package/src/lib/components/shared/error-page.tsx

@@ -11,7 +11,7 @@ export interface ErrorPageProps {
  * @description
  * A generic error page that displays an error message.
  */
-export function ErrorPage({ message }: ErrorPageProps) {
+export function ErrorPage({ message }: Readonly<ErrorPageProps>) {
     return (
         <Page pageId="error-page">
             <PageTitle>

package/src/lib/components/shared/history-timeline/history-entry.tsx

@@ -33,7 +33,13 @@ interface HistoryEntryProps {
     children: React.ReactNode;
 }
 
-export function HistoryEntry({ entry, isNoteEntry, timelineIcon, title, children }: HistoryEntryProps) {
+export function HistoryEntry({
+    entry,
+    isNoteEntry,
+    timelineIcon,
+    title,
+    children,
+}: Readonly<HistoryEntryProps>) {
     const { formatDate } = useLocalFormat();
     const { editNote, deleteNote } = useHistoryTimeline();
 

package/src/lib/components/shared/history-timeline/history-note-checkbox.tsx

@@ -6,7 +6,7 @@ interface HistoryNoteCheckboxProps {
     onChange: (value: boolean) => void;
 }
 
-export function HistoryNoteCheckbox({ value, onChange }: HistoryNoteCheckboxProps) {
+export function HistoryNoteCheckbox({ value, onChange }: Readonly<HistoryNoteCheckboxProps>) {
     return (
         <div className="flex items-center space-x-2">
             <Checkbox

package/src/lib/components/shared/history-timeline/history-note-input.tsx

@@ -7,7 +7,7 @@ interface HistoryNoteInputProps {
     onAddNote: (note: string, isPrivate: boolean) => void;
 }
 
-export function HistoryNoteInput({ onAddNote }: HistoryNoteInputProps) {
+export function HistoryNoteInput({ onAddNote }: Readonly<HistoryNoteInputProps>) {
     const [note, setNote] = useState('');
     const [noteIsPrivate, setNoteIsPrivate] = useState(true);
 

package/src/lib/components/shared/history-timeline/history-timeline.tsx

@@ -24,7 +24,7 @@ export function useHistoryTimeline() {
     return useContext(HistoryTimelineContext);
 }
 
-export function HistoryTimeline({ children, onEditNote, onDeleteNote }: HistoryTimelineProps) {
+export function HistoryTimeline({ children, onEditNote, onDeleteNote }: Readonly<HistoryTimelineProps>) {
     const [noteEditorOpen, setNoteEditorOpen] = useState(false);
     const [noteEditorNote, setNoteEditorNote] = useState<NoteEditorNote>({
         noteId: '',

package/src/lib/components/shared/option-value-input.tsx

@@ -31,7 +31,7 @@ interface OptionValueInputProps {
     disabled?: boolean;
 }
 
-export function OptionValueInput({ groupIndex, disabled = false }: OptionValueInputProps) {
+export function OptionValueInput({ groupIndex, disabled = false }: Readonly<OptionValueInputProps>) {
     const { control, watch } = useFormContext<FormValues>();
     const { fields, append, remove } = useFieldArray({
         control,

package/src/lib/components/shared/paginated-list-data-table.tsx

@@ -28,7 +28,7 @@ import {
     DropdownMenuTrigger,
 } from '@/vdb/components/ui/dropdown-menu.js';
 import { DisplayComponent } from '@/vdb/framework/component-registry/dynamic-component.js';
-import { BulkAction } from '@/vdb/framework/data-table/data-table-types.js';
+import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
 import { useExtendedListQuery } from '@/vdb/hooks/use-extended-list-query.js';
 import { Trans, useLingui } from '@/vdb/lib/trans.js';

package/src/lib/components/shared/permission-guard.tsx

@@ -11,7 +11,7 @@ export interface PermissionGuardProps {
  * This component is used to protect a route from unauthorized access.
  * It will render the children if the user has the required permissions.
  */
-export function PermissionGuard({ requires, children }: PermissionGuardProps) {
+export function PermissionGuard({ requires, children }: Readonly<PermissionGuardProps>) {
     const { hasPermissions } = usePermissions();
     const permissions = Array.isArray(requires) ? requires : [requires];
     if (!hasPermissions(permissions)) {

package/src/lib/components/shared/product-variant-selector.tsx

@@ -40,7 +40,7 @@ export interface ProductVariantSelectorProps {
     onProductVariantIdChange: (productVariantId: string) => void;
 }
 
-export function ProductVariantSelector({ onProductVariantIdChange }: ProductVariantSelectorProps) {
+export function ProductVariantSelector({ onProductVariantIdChange }: Readonly<ProductVariantSelectorProps>) {
     const [search, setSearch] = useState('');
     const [open, setOpen] = useState(false);
     const debouncedSearch = useDebounce(search, 500);

package/src/lib/components/shared/role-code-label.tsx

@@ -1,7 +1,7 @@
 import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from '@/vdb/constants.js';
 import { Trans } from '@/vdb/lib/trans.js';
 
-export function RoleCodeLabel({ code }: { code: string } | { code: undefined }) {
+export function RoleCodeLabel({ code }: Readonly<{ code: string }> | Readonly<{ code: undefined }>) {
     return code === SUPER_ADMIN_ROLE_CODE ? (
         <Trans>Super Admin</Trans>
     ) : code === CUSTOMER_ROLE_CODE ? (

package/src/lib/components/shared/stock-level-label.tsx

@@ -5,20 +5,20 @@ export type StockLevel = {
     stockAllocated: number;
 };
 
-export function StockLevelLabel({ stockLevels }: { stockLevels: StockLevel[] }) {
+export function StockLevelLabel({ stockLevels }: Readonly<{ stockLevels: StockLevel[] }>) {
     const { i18n } = useLingui();
-    
+
     if (!Array.isArray(stockLevels)) {
         return null;
     }
     const totalOnHand = stockLevels.reduce((acc, curr) => acc + curr.stockOnHand, 0);
     const totalAllocated = stockLevels.reduce((acc, curr) => acc + curr.stockAllocated, 0);
-    
+
     return (
-        <span 
+        <span
             title={`${i18n.t('Stock on hand')}: ${totalOnHand}, ${i18n.t('Stock allocated')}: ${totalAllocated}`}
         >
             {totalOnHand} <span className="text-muted-foreground">/ {totalAllocated}</span>
         </span>
     );
-}
+}

package/src/lib/components/shared/tax-category-selector.tsx

@@ -29,7 +29,7 @@ export interface TaxCategorySelectorProps {
     onChange: (value: string) => void;
 }
 
-export function TaxCategorySelector({ value, onChange }: TaxCategorySelectorProps) {
+export function TaxCategorySelector({ value, onChange }: Readonly<TaxCategorySelectorProps>) {
     const { data, isLoading, isPending, status } = useQuery({
         queryKey: ['taxCategories'],
         staleTime: 1000 * 60 * 5,

package/src/lib/components/shared/zone-selector.tsx

@@ -28,7 +28,7 @@ export interface ZoneSelectorProps {
     onChange: (value: string) => void;
 }
 
-export function ZoneSelector({ value, onChange }: ZoneSelectorProps) {
+export function ZoneSelector({ value, onChange }: Readonly<ZoneSelectorProps>) {
     const { data, isLoading, isPending } = useQuery({
         queryKey: ['zones'],
         staleTime: 1000 * 60 * 5,

package/src/lib/framework/alert/alert-extensions.tsx

@@ -1,7 +1,6 @@
-import { useEffect } from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { DashboardAlertDefinition } from '../extension-api/types/alerts.js';
 import { globalRegistry } from '../registry/global-registry.js';
-import { DashboardAlertDefinition } from './types.js';
 
 globalRegistry.register('dashboardAlertRegistry', new Map<string, DashboardAlertDefinition>());
 

package/src/lib/framework/alert/alert-item.tsx

@@ -2,7 +2,8 @@ import { Button } from '@/vdb/components/ui/button.js';
 import { cn } from '@/vdb/lib/utils.js';
 import { useQuery } from '@tanstack/react-query';
 import { ComponentProps } from 'react';
-import { DashboardAlertDefinition } from './types.js';
+
+import { DashboardAlertDefinition } from '../extension-api/types/alerts.js';
 
 interface AlertItemProps extends ComponentProps<'div'> {
     alert: DashboardAlertDefinition;

package/src/lib/framework/dashboard-widget/base-widget.tsx

@@ -1,8 +1,8 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
+import { DashboardBaseWidgetProps } from '@/vdb/framework/extension-api/types/index.js';
 import { Trans } from '@/vdb/lib/trans.js';
 import { cn } from '@/vdb/lib/utils.js';
-import type React from 'react';
-import { createContext, PropsWithChildren, useContext, useEffect, useRef, useState } from 'react';
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
 
 type WidgetDimensions = {
     width: number;
@@ -19,14 +19,6 @@ export const useWidgetDimensions = () => {
     return context;
 };
 
-export type DashboardBaseWidgetProps = PropsWithChildren<{
-    id: string;
-    title?: string;
-    description?: string;
-    config?: Record<string, unknown>;
-    actions?: React.ReactNode;
-}>;
-
 export function DashboardBaseWidget({
     id,
     config,

package/src/lib/framework/dashboard-widget/widget-extensions.tsx

@@ -1,4 +1,4 @@
-import { DashboardWidgetDefinition } from './types.js';
+import { DashboardWidgetDefinition } from '@/vdb/framework/extension-api/types/index.js';
 import { globalRegistry } from '../registry/global-registry.js';
 
 globalRegistry.register('dashboardWidgetRegistry', new Map<string, DashboardWidgetDefinition>());

package/src/lib/framework/data-table/data-table-extensions.ts

@@ -1,4 +1,4 @@
-import { BulkAction } from '@/vdb/framework/data-table/data-table-types.js';
+import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
 import { DocumentNode } from 'graphql';
 
 import { globalRegistry } from '../registry/global-registry.js';

package/src/lib/framework/extension-api/extension-api-types.ts

@@ -1,6 +1,3 @@
-// Import all domain-specific types
-export * from './types/index.js';
-
 // Import types for the main interface
 import {
     DashboardActionBarItem,

package/src/lib/framework/extension-api/types/data-table.ts

@@ -1,7 +1,6 @@
+import { Table } from '@tanstack/react-table';
 import { DocumentNode } from 'graphql';
 
-import { BulkAction } from '../../data-table/data-table-types.js';
-
 /**
  * @description
  * Allows you to define custom display components for specific columns in data tables.
@@ -24,6 +23,30 @@ export interface DashboardDataTableDisplayComponent {
     component: React.ComponentType<{ value: any; [key: string]: any }>;
 }
 
+export type BulkActionContext<Item extends { id: string } & Record<string, any>> = {
+    selection: Item[];
+    table: Table<Item>;
+};
+
+export type BulkActionComponent<Item extends { id: string } & Record<string, any>> = React.FunctionComponent<
+    BulkActionContext<Item>
+>;
+
+/**
+ * @description
+ * **Status: Developer Preview**
+ *
+ * A bulk action is a component that will be rendered in the bulk actions dropdown.
+ *
+ * @docsCategory components
+ * @docsPage DataTableBulkActions
+ * @since 3.4.0
+ */
+export type BulkAction = {
+    order?: number;
+    component: BulkActionComponent<any>;
+};
+
 /**
  * @description
  * **Status: Developer Preview**

package/src/lib/framework/extension-api/types/widgets.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import React, { PropsWithChildren } from 'react';
 
 /**
  * @description
@@ -9,10 +9,13 @@ import type React from 'react';
  * @docsCategory extensions
  * @since 3.3.0
  */
-export interface DashboardBaseWidgetProps {
-    widgetId: string;
+export type DashboardBaseWidgetProps = PropsWithChildren<{
+    id: string;
+    title?: string;
+    description?: string;
     config?: Record<string, unknown>;
-}
+    actions?: React.ReactNode;
+}>;
 
 /**
  * @description