@rebasepro/admin 0.1.2 → 0.2.3

package/src/collection_editor/ui/collection_editor/properties/conditions/ConditionsEditor.tsx

@@ -1,8 +1,21 @@
 
 import React from "react";
 import { useFormex } from "@rebasepro/formex";
-import { IconButton, Select, SelectItem, DebouncedTextField, Typography, Chip, TextField, cls, defaultBorderMixin, Button, BooleanSwitchWithLabel , iconSize } from "@rebasepro/ui";
-import { Trash2Icon } from "lucide-react";
+import {
+    BooleanSwitchWithLabel,
+    Button,
+    Chip,
+    cls,
+    DebouncedTextField,
+    defaultBorderMixin,
+    IconButton,
+    iconSize,
+    Select,
+    SelectItem,
+    TextField,
+    Trash2Icon,
+    Typography
+} from "@rebasepro/ui";
 import { getFieldConfig, DEFAULT_FIELD_CONFIGS } from "../../../../_cms_internals";
 import { Properties, Property, EnumValueConfig } from "@rebasepro/types";
 import { isPropertyBuilder } from "@rebasepro/common";
@@ -806,17 +819,12 @@ export function ConditionsEditor({ disabled, collectionProperties }: ConditionsE
     // Get current conditions from form values
     const conditions: Record<string, unknown> = (values as PropertyWithId & { conditions?: Record<string, unknown> }).conditions ?? {};
 
-    // DEBUG: Log conditions to see what's being loaded
-    console.log("[ConditionsEditor] Loaded conditions:", conditions);
-
     const activeConditions: { type: ConditionType; group: ConditionGroup }[] = [];
 
     for (const type of CONDITION_TYPES) {
         const jsonLogic = conditions[type.id as keyof typeof conditions];
         if (jsonLogic) {
-            console.log(`[ConditionsEditor] Parsing ${type.id}:`, jsonLogic);
             const group = jsonLogicToGroup(jsonLogic as Record<string, any>);
-            console.log("[ConditionsEditor] Parsed group:", group);
             if (group) {
                 activeConditions.push({ type: type.id,
 group });

package/src/collection_editor/ui/collection_editor/properties/conditions/ConditionsPanel.tsx

@@ -1,7 +1,6 @@
 import { PropsWithChildren } from "react";
 
-import { ExpandablePanel, Typography } from "@rebasepro/ui";
-import { SettingsIcon } from "lucide-react";
+import { ExpandablePanel, SettingsIcon, Typography } from "@rebasepro/ui";
 
 export function ConditionsPanel({
     children

package/src/collection_editor/ui/collection_editor/properties/conditions/EnumConditionsEditor.tsx

@@ -1,8 +1,20 @@
 
 import React from "react";
 import { useFormex } from "@rebasepro/formex";
-import { IconButton, Select, SelectItem, Typography, MultiSelect, MultiSelectItem, cls, defaultBorderMixin, DebouncedTextField, BooleanSwitchWithLabel , iconSize } from "@rebasepro/ui";
-import { Trash2Icon } from "lucide-react";
+import {
+    BooleanSwitchWithLabel,
+    cls,
+    DebouncedTextField,
+    defaultBorderMixin,
+    IconButton,
+    iconSize,
+    MultiSelect,
+    MultiSelectItem,
+    Select,
+    SelectItem,
+    Trash2Icon,
+    Typography
+} from "@rebasepro/ui";
 import { getFieldConfig, DEFAULT_FIELD_CONFIGS } from "../../../../_cms_internals";
 import { Properties, Property, EnumValueConfig } from "@rebasepro/types";
 import { isPropertyBuilder } from "@rebasepro/common";
@@ -269,7 +281,7 @@ function parseEnumFilterRule(rule: Record<string, unknown>): EnumConditionConfig
         const selectedEnumIds = objectToArray(selectedEnumIdsRaw);
         if (selectedEnumIds.length === 0 && selectedEnumIdsRaw) {
             // If it was truthy but we got no values, parsing failed
-            console.log("[EnumConditionsEditor] Warning: Could not parse selectedEnumIds:", selectedEnumIdsRaw);
+            console.warn("[EnumConditionsEditor] Could not parse selectedEnumIds:", selectedEnumIdsRaw);
         }
 
         // Parse the condition

package/src/collection_editor/ui/collection_editor/properties/conditions/property_paths.ts

@@ -39,7 +39,7 @@ export function getPropertyPaths(
 
         // For arrays with object items, add the nested paths too
         if (property.type === "array" && property.of) {
-            const ofPropertyOrBuilder = property.of as unknown as Property;
+            const ofPropertyOrBuilder = property.of as Property;
             // Skip if the array's 'of' is a PropertyBuilder
             if (!isPropertyBuilder(ofPropertyOrBuilder)) {
                 const ofProperty = ofPropertyOrBuilder as Property;

package/src/collection_editor/ui/collection_editor/properties/validation/ValidationPanel.tsx

@@ -1,7 +1,6 @@
 import { PropsWithChildren } from "react";
 
-import { ExpandablePanel, Typography } from "@rebasepro/ui";
-import { CheckSquareIcon } from "lucide-react";
+import { CheckSquareIcon, ExpandablePanel, Typography } from "@rebasepro/ui";
 
 export function ValidationPanel({
     children

package/src/collection_editor/useLocalCollectionsConfigController.tsx

@@ -16,7 +16,6 @@ export function useLocalCollectionsConfigController(
     const parsedCollections = baseCollections;
 
     const request = async (endpoint: string, payload: Record<string, unknown>) => {
-        console.log("dispatching dev server request", endpoint, payload);
         try {
             let token = options?.getAuthToken ? await options.getAuthToken() : null;
             let baseUrl = typeof clientOrUrl === "string" ? clientOrUrl : "";
@@ -38,7 +37,6 @@ export function useLocalCollectionsConfigController(
                 headers,
                 body: JSON.stringify(payload)
             });
-            console.log("dev server response", endpoint, response.status);
             if (!response.ok) {
                 const text = await response.text();
                 let err: Record<string, unknown> = {};

package/src/collection_editor/validateCollectionJson.ts

@@ -10,8 +10,11 @@ const VALID_DATA_TYPES = [
     "date",
     "geopoint",
     "reference",
+    "relation",
     "array",
-    "map"
+    "map",
+    "vector",
+    "binary"
 ] as const;
 
 type DataType = typeof VALID_DATA_TYPES[number];
@@ -78,7 +81,7 @@ function validateProperty(
                     validateProperty(ofProp, `${path}.of[${index}]`, errors);
                 });
             } else {
-                validateProperty(property.of as unknown as Record<string, unknown>, `${path}.of`, errors);
+                validateProperty(property.of as Record<string, unknown>, `${path}.of`, errors);
             }
         }
         // oneOf validation
@@ -88,15 +91,15 @@ function validateProperty(
                     path: `${path}.oneOf`,
                     message: "Must be an object"
                 });
-            } else if ((property.oneOf as unknown as Record<string, unknown>).properties) {
-                validateProperties((property.oneOf as unknown as Record<string, unknown>).properties as unknown as Record<string, unknown>, `${path}.oneOf.properties`, errors);
+            } else if ((property.oneOf as Record<string, unknown>).properties) {
+                validateProperties((property.oneOf as Record<string, unknown>).properties as Record<string, unknown>, `${path}.oneOf.properties`, errors);
             }
         }
     }
 
     // Validate map properties
     if (property.dataType === "map" && property.properties) {
-        validateProperties(property.properties as unknown as Record<string, unknown>, `${path}.properties`, errors);
+        validateProperties(property.properties as Record<string, unknown>, `${path}.properties`, errors);
     }
 
     // Validate reference path
@@ -109,6 +112,90 @@ function validateProperty(
         }
     }
 
+    // Validate relation property
+    if (property.dataType === "relation") {
+        if (property.target !== undefined && typeof property.target !== "string" && typeof property.target !== "function") {
+            errors.push({
+                path: `${path}.target`,
+                message: "Must be a string (collection slug) or a function"
+            });
+        }
+        if (property.cardinality !== undefined && property.cardinality !== "one" && property.cardinality !== "many") {
+            errors.push({
+                path: `${path}.cardinality`,
+                message: "Must be either 'one' or 'many'"
+            });
+        }
+        if (property.direction !== undefined && property.direction !== "owning" && property.direction !== "inverse") {
+            errors.push({
+                path: `${path}.direction`,
+                message: "Must be either 'owning' or 'inverse'"
+            });
+        }
+        if (property.localKey !== undefined && typeof property.localKey !== "string") {
+            errors.push({
+                path: `${path}.localKey`,
+                message: "Must be a string"
+            });
+        }
+        if (property.foreignKeyOnTarget !== undefined && typeof property.foreignKeyOnTarget !== "string") {
+            errors.push({
+                path: `${path}.foreignKeyOnTarget`,
+                message: "Must be a string"
+            });
+        }
+        if (property.through !== undefined) {
+            if (typeof property.through !== "object" || property.through === null) {
+                errors.push({
+                    path: `${path}.through`,
+                    message: "Must be an object"
+                });
+            } else {
+                const throughObj = property.through as Record<string, unknown>;
+                if (throughObj.table !== undefined && typeof throughObj.table !== "string") {
+                    errors.push({
+                        path: `${path}.through.table`,
+                        message: "Must be a string"
+                    });
+                }
+                if (throughObj.sourceColumn !== undefined && typeof throughObj.sourceColumn !== "string") {
+                    errors.push({
+                        path: `${path}.through.sourceColumn`,
+                        message: "Must be a string"
+                    });
+                }
+                if (throughObj.targetColumn !== undefined && typeof throughObj.targetColumn !== "string") {
+                    errors.push({
+                        path: `${path}.through.targetColumn`,
+                        message: "Must be a string"
+                    });
+                }
+            }
+        }
+        if (property.onUpdate !== undefined && typeof property.onUpdate !== "string") {
+            errors.push({
+                path: `${path}.onUpdate`,
+                message: "Must be a string"
+            });
+        }
+        if (property.onDelete !== undefined && typeof property.onDelete !== "string") {
+            errors.push({
+                path: `${path}.onDelete`,
+                message: "Must be a string"
+            });
+        }
+    }
+
+    // Validate vector property
+    if (property.dataType === "vector") {
+        if (property.dimensions !== undefined && (typeof property.dimensions !== "number" || isNaN(property.dimensions) || property.dimensions <= 0)) {
+            errors.push({
+                path: `${path}.dimensions`,
+                message: "Must be a positive number"
+            });
+        }
+    }
+
     // Validate storage config for string
     if (property.dataType === "string" && property.storage) {
         if (typeof property.storage !== "object") {
@@ -147,7 +234,7 @@ function validateProperties(
     }
 
     for (const [key, property] of Object.entries(properties)) {
-        validateProperty(property as unknown as Record<string, unknown>, `${path}.${key}`, errors);
+        validateProperty(property as Record<string, unknown>, `${path}.${key}`, errors);
     }
 }
 
@@ -260,8 +347,8 @@ function validateOptionalFields(
                 path: "kanban",
                 message: "Must be an object"
             });
-        } else if ((collection.kanban as unknown as Record<string, unknown>).columnProperty !== undefined &&
-            typeof (collection.kanban as unknown as Record<string, unknown>).columnProperty !== "string") {
+        } else if ((collection.kanban as Record<string, unknown>).columnProperty !== undefined &&
+            typeof (collection.kanban as Record<string, unknown>).columnProperty !== "string") {
             errors.push({
                 path: "kanban.columnProperty",
                 message: "Must be a string"
@@ -316,7 +403,7 @@ function validateCollectionObject(
 
     // Properties validation
     if (collection.properties !== undefined) {
-        validateProperties(collection.properties as unknown as Record<string, unknown>, "properties", errors);
+        validateProperties(collection.properties as Record<string, unknown>, "properties", errors);
     }
 
     // Optional fields
@@ -369,7 +456,7 @@ export function validateCollectionJson(jsonString: string): CollectionValidation
         };
     }
 
-    validateCollectionObject(parsed as unknown as Record<string, unknown>, errors);
+    validateCollectionObject(parsed as Record<string, unknown>, errors);
 
     return {
         valid: errors.length === 0,

package/src/components/AdminModeSyncer.tsx

@@ -2,7 +2,7 @@ import type { AppView } from "@rebasepro/types";
 import React, { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 ;
-import { useUrlController } from "../hooks";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { useAdminModeController } from "@rebasepro/core";
 export interface AdminModeSyncerProps {
     /**

package/src/components/ArrayContainer.tsx

@@ -13,8 +13,22 @@ import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 
 import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { Button, cls, HandleIcon, IconButton, Menu, MenuItem, Tooltip, useOutsideAlerter , iconSize } from "@rebasepro/ui";
-import { PlusIcon, CopyIcon, ChevronDownIcon, ChevronUpIcon, MinusIcon } from "lucide-react";
+import {
+    Button,
+    ChevronDownIcon,
+    ChevronUpIcon,
+    cls,
+    CopyIcon,
+    HandleIcon,
+    IconButton,
+    iconSize,
+    Menu,
+    MenuItem,
+    MinusIcon,
+    PlusIcon,
+    Tooltip,
+    useOutsideAlerter
+} from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/core";
 import { getHashValue } from "@rebasepro/utils";
 
@@ -95,24 +109,14 @@ function SortableItem({
         transform,
         transition,
         isDragging
-    } = sortable
-            ? useSortable({ id })
-            : {
-                attributes: {},
-                listeners: {},
-                setNodeRef: (node: HTMLElement | null) => {
-                },
-                transform: null,
-                transition: undefined,
-                isDragging: false
-            };
+    } = useSortable({ id });
 
     const style = transform ? {
         transform: CSS.Transform.toString(transform),
         transition
     } : {};
-    const dragHandleProps = sortable ? { ...listeners,
-...attributes } : {};
+    const dragHandleProps = { ...listeners,
+...attributes };
 
     return (
         <ArrayContainerItem

package/src/components/ClearFilterSortButton.tsx

@@ -1,5 +1,4 @@
-import { Button, Tooltip , iconSize } from "@rebasepro/ui";
-import { FilterXIcon } from "lucide-react";
+import { Button, FilterXIcon, iconSize, Tooltip } from "@rebasepro/ui";
 import { EntityTableController } from "@rebasepro/types";
 import { useTranslation } from "@rebasepro/core";
 

package/src/components/CollectionEditorDialogs.tsx

@@ -47,7 +47,7 @@ export function CollectionEditorDialogs() {
                 <CollectionEditorDialog
                     open={false}
                     isNewCollection={false}
-                    configController={{} as any}
+                    configController={undefined!}
                     handleClose={() => {}}
                     {...collectionDialogProps}
                 />

package/src/components/DefaultAppBar.tsx

@@ -4,10 +4,22 @@ import React from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { RebaseLogo, LanguageToggle } from "@rebasepro/core";
 import { ErrorBoundary , iconSize } from "@rebasepro/ui";
-import { MoonIcon, SunIcon, SettingsIcon, SunMoonIcon, LogOutIcon } from "lucide-react";
-import { Avatar, cls, IconButton, Menu, MenuItem, Skeleton, Typography } from "@rebasepro/ui";
+import {
+    Avatar,
+    cls,
+    IconButton,
+    LogOutIcon,
+    Menu,
+    MenuItem,
+    MoonIcon,
+    SettingsIcon,
+    Skeleton,
+    SunIcon,
+    SunMoonIcon,
+    Typography
+} from "@rebasepro/ui";
 import { useAuthController, useLargeLayout, useModeController, useAdminModeController, useTranslation } from "@rebasepro/core";
-import { useUrlController } from "../hooks";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { User } from "@rebasepro/types";
 import { useApp } from "./app/useApp";
 import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";

package/src/components/DefaultDrawer.tsx

@@ -2,13 +2,13 @@ import type { NavigationEntry, NavigationResult } from "@rebasepro/types";
 import React, { useMemo } from "react";
 
 import { useCollapsedGroups, buildCollapsedDefaults, useLargeLayout, useAdminModeController, useTranslation, useSlot, useRebaseContext, useAnalyticsController, useRebaseRegistry } from "@rebasepro/core";
-import { useNavigationStateController, useUrlController } from "../hooks";
+import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
+import { useNavigationStateController } from "../hooks/navigation/contexts/NavigationStateContext";
 
 
 import { Link, useNavigate } from "react-router-dom";
 import { AnalyticsEvent } from "@rebasepro/types";
-import { cls, Tooltip, Typography , iconSize } from "@rebasepro/ui";
-import { ChevronsLeftIcon, ChevronsRightIcon } from "lucide-react";
+import { ChevronsLeftIcon, ChevronsRightIcon, cls, iconSize, Tooltip, Typography } from "@rebasepro/ui";
 import { DrawerNavigationGroup } from "./DrawerNavigationGroup";
 import { RebaseLogo } from "@rebasepro/core";
 import { useApp } from "./app/useApp";

package/src/components/DrawerNavigationGroup.tsx

@@ -1,7 +1,6 @@
 import type { NavigationEntry } from "@rebasepro/types";
 import React from "react";
-import { cls, iconSize, Typography } from "@rebasepro/ui";
-import { ChevronDownIcon } from "lucide-react";
+import { ChevronDownIcon, cls, iconSize, Typography } from "@rebasepro/ui";
 ;
 import { IconForView } from "@rebasepro/core";
 import { DrawerNavigationItem } from "./DrawerNavigationItem";

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -3,12 +3,21 @@ import type { EntityAction } from "@rebasepro/types";
 import React, { MouseEvent, useCallback } from "react";
 
 import { CollectionSize, Entity, SelectionController } from "@rebasepro/types";
-import { Badge, Checkbox, cls, IconButton, Menu, MenuItem, Skeleton, Tooltip } from "@rebasepro/ui";
-import { MoreVerticalIcon } from "lucide-react";
-import { useRebaseContext, useLargeLayout, useTranslation } from "@rebasepro/core";
+import {
+    Badge,
+    Checkbox,
+    cls,
+    IconButton,
+    Menu,
+    MenuItem,
+    MoreVerticalIcon,
+    Skeleton,
+    Tooltip
+} from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/core";
 import { getEntityFromCache } from "@rebasepro/core";
 import { getLocalChangesBackup } from "@rebasepro/common";
-import { useSideEntityController, useCMSContext } from "../../index";
+import { useCMSContext } from "../../index";
 
 /**
  *
@@ -60,7 +69,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
         selectionController?: SelectionController;
         highlightEntity?: (entity: Entity<any>) => void;
         unhighlightEntity?: (entity: Entity<any>) => void;
-        openEntityMode: "side_panel" | "full_screen" | "split";
+        openEntityMode: "side_panel" | "full_screen" | "split" | "dialog";
         // Sortable props for dnd-kit integration
         sortableNodeRef?: (node: HTMLElement | null) => void;
         sortableStyle?: React.CSSProperties;
@@ -69,7 +78,6 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
         isDraggable?: boolean;
     }) {
 
-    const largeLayout = useLargeLayout();
 
     const context = useCMSContext();
     const sideEntityCtrl = context.sideEntityController;

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -213,7 +213,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
             : <>
                 {additionalField.value?.({
                     entity,
-                    context: context as unknown as RebaseContext
+                    context: context as RebaseContext
                 })?.toString()}
             </>;
 

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -146,7 +146,7 @@ export type EntityCollectionTableProps<M extends Record<string, unknown>,
 
         enablePopupIcon: boolean;
 
-        openEntityMode?: "side_panel" | "full_screen" | "split";
+        openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
 
         /**
          * Callback when columns are reordered via drag-and-drop

package/src/components/EntityCollectionTable/fields/TableMultipleRelationField.tsx

@@ -3,8 +3,7 @@ import type { EntityCollection } from "@rebasepro/types";
 import React, { useCallback } from "react";
 import { deepEqual as equal } from "fast-equals";
 
-import { cls } from "@rebasepro/ui";
-import { PencilIcon } from "lucide-react";
+import { cls, PencilIcon } from "@rebasepro/ui";
 import { getRelationFrom, normalizeToEntityRelation } from "@rebasepro/common";
 
 import { RelationPreview } from "../../../preview";

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -9,8 +9,7 @@ import { CollectionSize, Entity, EntityReference, FilterValues } from "@rebasepr
 import { getPreviewSizeFrom } from "../../../preview/util";
 import { useCustomizationController } from "@rebasepro/core";
 import { ErrorView } from "@rebasepro/core";
-import { cls } from "@rebasepro/ui";
-import { PencilIcon } from "lucide-react";
+import { cls, PencilIcon } from "@rebasepro/ui";
 import { EntityPreviewContainer } from "../../EntityPreview";
 import { getReferenceFrom } from "@rebasepro/common";
 import { useCollectionRegistryController } from "../../../index";

package/src/components/EntityCollectionTable/fields/TableRelationField.tsx

@@ -9,8 +9,7 @@ import { CollectionSize, Entity, EntityRelation, FilterValues, Relation } from "
 import { getPreviewSizeFrom } from "../../../preview/util";
 import { } from "@rebasepro/core";
 import { ErrorView } from "@rebasepro/core";
-import { cls } from "@rebasepro/ui";
-import { PencilIcon } from "lucide-react";
+import { cls, PencilIcon } from "@rebasepro/ui";
 import { EntityPreviewContainer } from "../../EntityPreview";
 import { getRelationFrom, normalizeToEntityRelation } from "@rebasepro/common";
 import { TableMultipleRelationField } from "./TableMultipleRelationField";

package/src/components/EntityCollectionTable/fields/TableStorageUpload.tsx

@@ -7,11 +7,10 @@ import { PreviewSize } from "../../../types";
 import { useDropzone } from "react-dropzone";
 import { PropertyPreview } from "../../../preview";
 import { ErrorBoundary } from "@rebasepro/ui";
-import { PencilIcon } from "lucide-react";
+import { cls, IconButton, PencilIcon, Typography } from "@rebasepro/ui";
 import { useSnackbarController, useStorageSource, useTranslation, StorageFieldItem, useStorageUploadController } from "@rebasepro/core";
 import { getThumbnailMeasure } from "../../../preview/util";
 import { StorageUploadProgress } from "../../../form/components/StorageUploadProgress";
-import { cls, IconButton, Typography } from "@rebasepro/ui";
 import { EntityTableCellActions } from "../internal/EntityTableCellActions";
 
 const dropZoneClasses = "max-w-full box-border relative pt-[2px] items-center border border-transparent outline-hidden rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";

package/src/components/EntityCollectionTable/fields/VirtualTableSelect.tsx

@@ -40,7 +40,6 @@ export function VirtualTableSelect(props: {
     }, [focused, ref]);
 
     const onChange = useCallback((updatedValue: string | string[]) => {
-        console.trace("onChange");
         if (valueType === "number") {
             if (multiple) {
                 const newValue = (updatedValue as string[]).map((v) => parseFloat(v));

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -49,15 +49,10 @@ export function CollectionTableToolbar({
         <div
             className={cls(defaultBorderMixin, "no-scrollbar min-h-[52px] overflow-x-auto px-2 md:px-4 bg-surface-50 dark:bg-surface-900 border-b flex flex-row justify-between items-center w-full")}>
 
-            <div className="flex items-center gap-1 md:mr-4 mr-2">
+            <div className="flex items-center gap-1 md:mr-4 mr-2 min-w-0">
 
                 {/* View toggle — hidden in compact */}
-                <div className={cls(
-                    "transition-all duration-300 ease-out overflow-hidden",
-                    compact ? "max-w-0 opacity-0" : "max-w-[200px] opacity-100"
-                )}>
-                    {viewModeToggle}
-                </div>
+                {!compact && viewModeToggle}
 
                 {title && <div className={"flex items-center"}>
                     {title}
@@ -70,28 +65,21 @@ export function CollectionTableToolbar({
             <div className="flex items-center gap-1">
 
                 {/* Loading spinner — hidden in compact */}
-                {largeLayout && <div className={cls(
-                    "mr-4 transition-all duration-300 ease-out overflow-hidden",
-                    compact ? "w-0 opacity-0" : "w-[22px] opacity-100"
-                )}>
-                    {loading &&
-                        <CircularProgress size={"smallest"}/>}
-                </div>}
+                {largeLayout && !compact && loading && (
+                    <div className="mr-4">
+                        <CircularProgress size={"smallest"}/>
+                    </div>
+                )}
 
                 {/* Search bar — hidden in compact */}
-                <div className={cls(
-                    "transition-all duration-300 ease-out",
-                    compact ? "max-w-0 opacity-0 overflow-hidden" : "max-w-[300px] opacity-100"
-                )}>
-                    {onTextSearch &&
-                        <SearchBar
-                            key={"search-bar"}
-                            size={"small"}
-                            placeholder={t("search")}
-                            onTextSearch={onTextSearch}
-                            expandable={true}
-                            initialValue={initialSearchText}/>}
-                </div>
+                {!compact && onTextSearch &&
+                    <SearchBar
+                        key={"search-bar"}
+                        size={"small"}
+                        placeholder={t("search")}
+                        onTextSearch={onTextSearch}
+                        expandable={true}
+                        initialValue={initialSearchText}/>}
 
                 {/* Secondary actions — always inline */}
                 <div className="flex items-center gap-1">

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -3,8 +3,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import useMeasure from "react-use-measure";
 
 import { cls, Tooltip , iconSize } from "@rebasepro/ui";
-import { MinusCircleIcon } from "lucide-react";
-import { ErrorBoundary } from "@rebasepro/ui";
+import { ErrorBoundary, MinusCircleIcon } from "@rebasepro/ui";
 import { getRowHeight, TableSize } from "@rebasepro/core";
 import { ErrorTooltip } from "@rebasepro/core";
 

package/src/components/EntityCollectionTable/internal/EntityTableCellActions.tsx

@@ -1,5 +1,4 @@
-import { IconButton } from "@rebasepro/ui";
-import { AlertCircleIcon } from "lucide-react";
+import { AlertCircleIcon, IconButton } from "@rebasepro/ui";
 import { ErrorTooltip } from "@rebasepro/core";
 import { useCallback, useEffect, useRef } from "react";