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

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

package/src/lib/framework/layout-engine/location-wrapper.tsx

@@ -18,7 +18,10 @@ const LocationWrapperContext = createContext<{
     setHoveredId: null,
 });
 
-export function LocationWrapper({ children, blockId }: { children: React.ReactNode; blockId?: string }) {
+export function LocationWrapper({
+    children,
+    blockId,
+}: Readonly<{ children: React.ReactNode; blockId?: string }>) {
     const page = usePage();
     const { settings } = useUserSettings();
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);

package/src/lib/framework/layout-engine/page-layout.tsx

@@ -10,7 +10,7 @@ import { useMediaQuery } from '@uidotdev/usehooks';
 import React, { ComponentProps } from 'react';
 import { Control, UseFormReturn } from 'react-hook-form';
 
-import { DashboardActionBarItem } from '../extension-api/extension-api-types.js';
+import { DashboardActionBarItem } from '../extension-api/types/layout.js';
 
 import { PageBlockContext } from '@/vdb/framework/layout-engine/page-block-provider.js';
 import { PageContext, PageContextValue } from '@/vdb/framework/layout-engine/page-provider.js';
@@ -42,7 +42,7 @@ export interface PageProps extends ComponentProps<'div'> {
  * @docsWeight 0
  * @since 3.3.0
  */
-export function Page({ children, pageId, entity, form, submitHandler, ...props }: PageProps) {
+export function Page({ children, pageId, entity, form, submitHandler, ...props }: Readonly<PageProps>) {
     const childArray = React.Children.toArray(children);
 
     const pageTitle = childArray.find(child => React.isValidElement(child) && child.type === PageTitle);
@@ -164,7 +164,7 @@ function isPageBlock(child: unknown): child is React.ReactElement<PageBlockProps
  * @docsWeight 0
  * @since 3.3.0
  */
-export function PageLayout({ children, className }: PageLayoutProps) {
+export function PageLayout({ children, className }: Readonly<PageLayoutProps>) {
     const page = usePage();
     const isDesktop = useMediaQuery('only screen and (min-width : 769px)');
     // Separate blocks into categories
@@ -238,7 +238,7 @@ export function PageLayout({ children, className }: PageLayoutProps) {
     );
 }
 
-export function DetailFormGrid({ children }: { children: React.ReactNode }) {
+export function DetailFormGrid({ children }: Readonly<{ children: React.ReactNode }>) {
     return <div className="md:grid md:grid-cols-2 gap-4 items-start mb-4">{children}</div>;
 }
 
@@ -252,7 +252,7 @@ export function DetailFormGrid({ children }: { children: React.ReactNode }) {
  * @docsPage PageTitle
  * @since 3.3.0
  */
-export function PageTitle({ children }: { children: React.ReactNode }) {
+export function PageTitle({ children }: Readonly<{ children: React.ReactNode }>) {
     return <h1 className="text-2xl font-semibold">{children}</h1>;
 }
 
@@ -269,7 +269,7 @@ export function PageTitle({ children }: { children: React.ReactNode }) {
  * @docsWeight 0
  * @since 3.3.0
  */
-export function PageActionBar({ children }: { children: React.ReactNode }) {
+export function PageActionBar({ children }: Readonly<{ children: React.ReactNode }>) {
     let childArray = React.Children.toArray(children);
 
     const leftContent = childArray.filter(child => isOfType(child, PageActionBarLeft));
@@ -291,7 +291,7 @@ export function PageActionBar({ children }: { children: React.ReactNode }) {
  * @docsPage PageActionBar
  * @since 3.3.0
  */
-export function PageActionBarLeft({ children }: { children: React.ReactNode }) {
+export function PageActionBarLeft({ children }: Readonly<{ children: React.ReactNode }>) {
     return <div className="flex justify-start gap-2">{children}</div>;
 }
 
@@ -303,7 +303,7 @@ export function PageActionBarLeft({ children }: { children: React.ReactNode }) {
  * @docsPage PageActionBar
  * @since 3.3.0
  */
-export function PageActionBarRight({ children }: { children: React.ReactNode }) {
+export function PageActionBarRight({ children }: Readonly<{ children: React.ReactNode }>) {
     const page = usePage();
     const actionBarItems = page.pageId ? getDashboardActionBarItems(page.pageId) : [];
     return (
@@ -355,7 +355,14 @@ export type PageBlockProps = {
  * @docsWeight 0
  * @since 3.3.0
  */
-export function PageBlock({ children, title, description, className, blockId, column }: PageBlockProps) {
+export function PageBlock({
+    children,
+    title,
+    description,
+    className,
+    blockId,
+    column,
+}: Readonly<PageBlockProps>) {
     return (
         <LocationWrapper blockId={blockId}>
             <PageBlockContext.Provider value={{ blockId, title, description, column }}>

package/src/lib/framework/page/list-page.tsx

@@ -9,21 +9,15 @@ import {
     PaginatedListDataTable,
     RowAction,
 } from '@/vdb/components/shared/paginated-list-data-table.js';
-import { BulkAction } from '@/vdb/framework/data-table/data-table-types.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { AnyRoute, AnyRouter, useNavigate } from '@tanstack/react-router';
 import { ColumnFiltersState, SortingState, Table } from '@tanstack/react-table';
 import { TableOptions } from '@tanstack/table-core';
 
+import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
 import { addCustomFields } from '../document-introspection/add-custom-fields.js';
-import {
-    FullWidthPageBlock,
-    Page,
-    PageActionBar,
-    PageLayout,
-    PageTitle,
-} from '../layout-engine/page-layout.js';
+import { FullWidthPageBlock, Page, PageActionBar, PageLayout, PageTitle } from '../layout-engine/page-layout.js';
 
 /**
  * @description

package/src/lib/framework/registry/registry-types.ts

@@ -1,14 +1,14 @@
+import {
+    BulkAction,
+    DashboardActionBarItem,
+    DashboardPageBlockDefinition,
+    DashboardWidgetDefinition,
+} from '@/vdb/framework/extension-api/types/index.js';
 import { DocumentNode } from 'graphql';
 import React from 'react';
 
-import { DashboardAlertDefinition } from '../alert/types.js';
 import { DataDisplayComponent, DataInputComponent } from '../component-registry/component-registry.js';
-import { DashboardWidgetDefinition } from '../dashboard-widget/types.js';
-import { BulkAction } from '../data-table/data-table-types.js';
-import {
-    DashboardActionBarItem,
-    DashboardPageBlockDefinition,
-} from '../extension-api/extension-api-types.js';
+import { DashboardAlertDefinition } from '../extension-api/types/alerts.js';
 import { CustomFormComponentInputProps } from '../form-engine/custom-form-component.js';
 import { NavMenuConfig } from '../nav-menu/nav-menu-extensions.js';