@rebasepro/admin 0.1.0 → 0.2.1

package/src/collection_editor/ui/collection_editor/EnumForm.tsx

@@ -6,8 +6,23 @@ import { deepEqual as equal } from "fast-equals"
 ;
 import { EnumValueConfig, EnumValues } from "@rebasepro/types";
 import { ArrayContainer, ArrayEntryParams } from "../../_cms_internals";
-import { Badge, Button, CircularProgress, DebouncedTextField, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Paper, Typography , iconSize } from "@rebasepro/ui";
-import { RefreshCcwIcon, ListIcon, SettingsIcon } from "lucide-react";
+import {
+    Badge,
+    Button,
+    CircularProgress,
+    DebouncedTextField,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    iconSize,
+    ListIcon,
+    Paper,
+    RefreshCcwIcon,
+    SettingsIcon,
+    Typography
+} from "@rebasepro/ui";
 import { extractEnumFromValues } from "@rebasepro/schema-inference";
 import { Field, Formex, getIn, useCreateFormex, useFormex } from "@rebasepro/formex";
 

package/src/collection_editor/ui/collection_editor/GeneralSettingsForm.tsx

@@ -5,8 +5,24 @@ import React, { useState } from "react";
 import { useAuthController, useCustomizationController } from "@rebasepro/core";
 import { SearchIconsView } from "../../_cms_internals";
 import type { EntityCollection, PostgresCollection } from "@rebasepro/types";
-import { BooleanSwitchWithLabel, Chip, cls, Container, DebouncedTextField, Dialog, ExpandablePanel, IconButton, Select, SelectItem, TextField, Tooltip, Typography , iconSize } from "@rebasepro/ui";
-import { HistoryIcon, SearchIcon } from "lucide-react";
+import {
+    BooleanSwitchWithLabel,
+    Chip,
+    cls,
+    Container,
+    DebouncedTextField,
+    Dialog,
+    ExpandablePanel,
+    HistoryIcon,
+    IconButton,
+    iconSize,
+    SearchIcon,
+    Select,
+    SelectItem,
+    TextField,
+    Tooltip,
+    Typography
+} from "@rebasepro/ui";
 import { Field, getIn, useFormex } from "@rebasepro/formex";
 import { useCollectionsConfigController } from "../../useCollectionsConfigController";
 import { singular, toSnakeCase } from "@rebasepro/utils";

package/src/collection_editor/ui/collection_editor/GetCodeDialog.tsx

@@ -1,7 +1,6 @@
 import { useSnackbarController } from "@rebasepro/core";
 import { EntityCollection } from "@rebasepro/types";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
-import { CopyIcon } from "lucide-react";
+import { Button, CopyIcon, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
 import React from "react";
 import JSON5 from "json5";
 import { Highlight, themes } from "prism-react-renderer"

package/src/collection_editor/ui/collection_editor/KanbanConfigSection.tsx

@@ -5,8 +5,7 @@ import { useAuthController, useCustomizationController } from "@rebasepro/core";
 import { EntityCollection, Property } from "@rebasepro/types";
 import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
 import { getFieldConfig } from "../../../components/field_configs";
-import { IconButton, Select, SelectItem, Typography, Button , iconSize } from "@rebasepro/ui";
-import { XIcon } from "lucide-react";
+import { Button, IconButton, iconSize, Select, SelectItem, Typography, XIcon } from "@rebasepro/ui";
 import { useFormex } from "@rebasepro/formex";
 import { PropertyFormDialog } from "./PropertyEditView";
 import { unslugify } from "@rebasepro/utils";

package/src/collection_editor/ui/collection_editor/LayoutModeSwitch.tsx

@@ -1,13 +1,20 @@
-import { cls, ToggleButtonGroup, Typography } from "@rebasepro/ui";
-import { ColumnsIcon, PanelLeftIcon, SquareIcon } from "lucide-react";
+import {
+    AppWindow,
+    cls,
+    ColumnsIcon,
+    PanelLeftIcon,
+    SquareIcon,
+    ToggleButtonGroup,
+    Typography
+} from "@rebasepro/ui";
 
 export function LayoutModeSwitch({
     value,
     onChange,
     className
 }: {
-    value: "side_panel" | "full_screen" | "split";
-    onChange: (value: "side_panel" | "full_screen" | "split") => void;
+    value: "side_panel" | "full_screen" | "split" | "dialog";
+    onChange: (value: "side_panel" | "full_screen" | "split" | "dialog") => void;
     className?: string;
 }) {
 
@@ -32,10 +39,15 @@ export function LayoutModeSwitch({
                         value: "split",
                         label: "Split view",
                         icon: <PanelLeftIcon/>
+                    },
+                    {
+                        value: "dialog",
+                        label: "Centered dialog",
+                        icon: <AppWindow/>
                     }
                 ]}
             />
         </div>
-        <Typography variant={"caption"} color={"secondary"} className={"ml-3.5"}>Should documents be opened full screen or in an inline side dialog</Typography>
+        <Typography variant={"caption"} color={"secondary"} className={"ml-3.5"}>Should documents be opened full screen, inline side dialog, or centered dialog</Typography>
     </div>
 }

package/src/collection_editor/ui/collection_editor/PropertyEditView.tsx

@@ -8,8 +8,25 @@ import { DEFAULT_FIELD_CONFIGS, getFieldConfig, getFieldId } from "../../../comp
 import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
 import { Property, PropertyConfig, PropertyConfigId } from "@rebasepro/types";
 import { isPropertyBuilder } from "@rebasepro/common";
-import { Button, Card, cls, Dialog, DialogActions, DialogContent, DialogTitle, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin, IconButton, InfoLabel, Tooltip, Typography , iconSize } from "@rebasepro/ui";
-import { Trash2Icon, AlertTriangleIcon } from "lucide-react";
+import {
+    AlertTriangleIcon,
+    Button,
+    Card,
+    cls,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    fieldBackgroundDisabledMixin,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundMixin,
+    IconButton,
+    iconSize,
+    InfoLabel,
+    Tooltip,
+    Trash2Icon,
+    Typography
+} from "@rebasepro/ui";
 import { EnumPropertyField } from "./properties/EnumPropertyField";
 import { StoragePropertyField } from "./properties/StoragePropertyField";
 import { MapPropertyField } from "./properties/MapPropertyField";
@@ -22,6 +39,7 @@ import { NumberPropertyField } from "./properties/NumberPropertyField";
 import { ReferencePropertyField } from "./properties/ReferencePropertyField";
 import { DateTimePropertyField } from "./properties/DateTimePropertyField";
 import { AdvancedPropertyValidation } from "./properties/advanced/AdvancedPropertyValidation";
+import { VectorPropertyField } from "./properties/VectorPropertyField";
 
 import { KeyValuePropertyField } from "./properties/KeyValuePropertyField";
 import { RelationPropertyField } from "./properties/RelationPropertyField";
@@ -169,6 +187,9 @@ export const PropertyForm = React.memo(
                 if (values.type === "reference" && !values.path) {
                     errors.slug = "You must specify a target collection for the field";
                 }
+                if (values.type === "vector" && (!values.dimensions || isNaN(Number(values.dimensions)) || Number(values.dimensions) <= 0)) {
+                    errors.dimensions = "Vector dimensions must be a positive number";
+                }
                 if (values.propertyConfig === "repeat") {
                     if (!("of" in values) || !values.of) {
                         errors.of = "You need to specify a repeat field";
@@ -463,6 +484,10 @@ function PropertyEditFormFields({
             <RelationPropertyField
                 showErrors={showErrors}
                 disabled={disabled}/>;
+    } else if (selectedFieldConfigId === "vector_input") {
+        childComponent =
+            <VectorPropertyField
+                disabled={disabled}/>;
     } else {
         childComponent = null;
     }
@@ -477,7 +502,7 @@ function PropertyEditFormFields({
                 </Typography>
             </InfoLabel>}
 
-            <div className="flex mt-2 justify-between">
+            <div className="flex mt-2 items-start justify-between">
                 <div className={"w-full flex flex-col gap-2"}>
                     <WidgetSelectView
                         initialProperty={values}
@@ -509,10 +534,10 @@ function PropertyEditFormFields({
                 {onDelete && values?.id &&
                     <IconButton
                         variant={"ghost"}
-                        className="m-4"
+                        className="mt-1 shrink-0"
                         disabled={disabled}
                         onClick={() => setDeleteDialogOpen(true)}>
-                        <Trash2Icon/>
+                        <Trash2Icon size={iconSize.small}/>
                     </IconButton>}
             </div>
 
@@ -596,7 +621,8 @@ const WIDGET_TYPE_MAP: Record<PropertyConfigId, string> = {
     key_value: "Group",
     repeat: "Array",
     custom_array: "Array",
-    block: "Group"
+    block: "Group",
+    vector_input: "Number"
 };
 
 function WidgetSelectView({

package/src/collection_editor/ui/collection_editor/PropertyFieldPreview.tsx

@@ -5,8 +5,7 @@ import { ErrorBoundary } from "@rebasepro/ui";
 import { Property } from "@rebasepro/types";
 import { isPropertyBuilder } from "@rebasepro/common";
 import { cls, Paper, Typography } from "@rebasepro/ui";
-import { MinusCircleIcon, FunctionSquareIcon } from "lucide-react";
-import { iconSize } from "@rebasepro/ui";
+import { FunctionSquareIcon, iconSize, MinusCircleIcon } from "@rebasepro/ui";
 
 
 export function PropertyFieldPreview({
@@ -39,10 +38,11 @@ export function PropertyFieldPreview({
         <div onClick={onClick} className={onClick ? "cursor-pointer" : ""}>
         <Paper
             className={cls(
-                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border bg-white dark:bg-surface-800 border-surface-200 dark:border-surface-700 shadow-xs",
+                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border bg-white dark:bg-surface-800 shadow-xs",
+                borderColorClass || "border-surface-200 dark:border-surface-700",
                 selected
-                    ? "bg-primary/5 dark:bg-primary/10 ring-1 ring-inset ring-primary border-primary/30"
-                    : "hover:bg-surface-50 dark:hover:bg-surface-750"
+                    ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light ring-1 ring-inset ring-primary border-primary/30"
+                    : "hover:bg-surface-50 dark:hover:bg-surface-700"
             )}
         >
             <PropertyConfigBadge propertyConfig={propertyConfig} size="small"/>
@@ -107,8 +107,8 @@ export function NonEditablePropertyPreview({
             className={cls(
                 "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border bg-white dark:bg-surface-800 border-surface-200 dark:border-surface-700 shadow-xs",
                 selected
-                    ? "bg-primary/5 dark:bg-primary/10 ring-1 ring-inset ring-primary border-primary/30"
-                    : "hover:bg-surface-50 dark:hover:bg-surface-750"
+                    ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light ring-1 ring-inset ring-primary border-primary/30"
+                    : "hover:bg-surface-50 dark:hover:bg-surface-700"
             )}
         >
             <div className={"relative shrink-0"}>

package/src/collection_editor/ui/collection_editor/PropertyTree.tsx

@@ -5,8 +5,20 @@ import { deepEqual as equal } from "fast-equals"
 import { AIModifiedIndicator } from "@rebasepro/core";
 import { AdditionalFieldDelegate, Properties, Property } from "@rebasepro/types";
 import { isPropertyBuilder } from "@rebasepro/common";
-import { defaultBorderMixin, cls, IconButton, Menu, MenuItem, Tooltip , iconSize } from "@rebasepro/ui";
-import { FileSearchIcon, ArrowDownToLineIcon, ArrowUpToLineIcon, Trash2Icon, MoreVerticalIcon } from "lucide-react";
+import {
+    ArrowDownToLineIcon,
+    ArrowUpToLineIcon,
+    cls,
+    defaultBorderMixin,
+    FileSearchIcon,
+    IconButton,
+    iconSize,
+    Menu,
+    MenuItem,
+    MoreVerticalIcon,
+    Tooltip,
+    Trash2Icon
+} from "@rebasepro/ui";
 import { NonEditablePropertyPreview, PropertyFieldPreview } from "./PropertyFieldPreview";
 import {
     closestCenter,

package/src/collection_editor/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -7,8 +7,22 @@ import {
 import { resolveEntityView } from "../../_cms_internals";
 import { EntityCollection, EntityCustomView, User } from "@rebasepro/types";
 import { getSubcollections } from "@rebasepro/common";
-import { Alert, Button, Container, IconButton, Paper, Table, TableBody, TableCell, TableRow, Tooltip, Typography , iconSize } from "@rebasepro/ui";
-import { PlusIcon, Trash2Icon } from "lucide-react";
+import {
+    Alert,
+    Button,
+    Container,
+    IconButton,
+    iconSize,
+    Paper,
+    PlusIcon,
+    Table,
+    TableBody,
+    TableCell,
+    TableRow,
+    Tooltip,
+    Trash2Icon,
+    Typography
+} from "@rebasepro/ui";
 import { CollectionEditorDialog } from "./CollectionEditorDialog";
 import { CollectionsConfigController } from "../../types/config_controller";
 import { CollectionInference } from "../../types/collection_inference";

package/src/collection_editor/ui/collection_editor/ViewModeSwitch.tsx

@@ -1,6 +1,13 @@
 import { ViewMode } from "@rebasepro/types";
-import { cls, ToggleButtonGroup, Typography } from "@rebasepro/ui";
-import { KanbanIcon, LayoutGridIcon, ListIcon, TableIcon } from "lucide-react";
+import {
+    cls,
+    KanbanIcon,
+    LayoutGridIcon,
+    ListIcon,
+    TableIcon,
+    ToggleButtonGroup,
+    Typography
+} from "@rebasepro/ui";
 
 export function ViewModeSwitch({
     value,

package/src/collection_editor/ui/collection_editor/properties/BlockPropertyField.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
-import { Button, Paper, Typography } from "@rebasepro/ui";
-import { PlusIcon } from "lucide-react";
+import { Button, Paper, PlusIcon, Typography } from "@rebasepro/ui";
 import { getIn, useFormex } from "@rebasepro/formex";
 import { OnPropertyChangedParams, PropertyFormDialog } from "../PropertyEditView";
 import {

package/src/collection_editor/ui/collection_editor/properties/MapPropertyField.tsx

@@ -2,8 +2,7 @@ import { FieldCaption } from "../../../_cms_internals";
 import React, { useState } from "react";
 ;
 import { MapProperty, Property, PropertyConfig } from "@rebasepro/types";
-import { BooleanSwitchWithLabel, Button, Paper, Typography } from "@rebasepro/ui";
-import { PlusIcon } from "lucide-react";
+import { BooleanSwitchWithLabel, Button, Paper, PlusIcon, Typography } from "@rebasepro/ui";
 import { PropertyFormDialog } from "../PropertyEditView";
 import { getIn, useFormex } from "@rebasepro/formex";
 import { useTranslation } from "@rebasepro/core";

package/src/collection_editor/ui/collection_editor/properties/MarkdownPropertyField.tsx

@@ -5,8 +5,15 @@ import { ValidationPanel } from "./validation/ValidationPanel";
 import { Field, getIn, useFormex } from "@rebasepro/formex";
 import { useTranslation } from "@rebasepro/core";
 
-import { BooleanSwitchWithLabel, DebouncedTextField, ExpandablePanel, TextField, Typography } from "@rebasepro/ui";
-import { UploadCloudIcon, SettingsIcon } from "lucide-react";
+import {
+    BooleanSwitchWithLabel,
+    DebouncedTextField,
+    ExpandablePanel,
+    SettingsIcon,
+    TextField,
+    Typography,
+    UploadCloudIcon
+} from "@rebasepro/ui";
 
 export function MarkdownPropertyField({
     disabled,

package/src/collection_editor/ui/collection_editor/properties/StoragePropertyField.tsx

@@ -1,7 +1,16 @@
 
 import React from "react";
-import { Button, DebouncedTextField, ExpandablePanel, MultiSelect, MultiSelectItem, Select, SelectItem, Typography } from "@rebasepro/ui";
-import { UploadCloudIcon } from "lucide-react";
+import {
+    Button,
+    DebouncedTextField,
+    ExpandablePanel,
+    MultiSelect,
+    MultiSelectItem,
+    Select,
+    SelectItem,
+    Typography,
+    UploadCloudIcon
+} from "@rebasepro/ui";
 
 import { Field, FormexFieldProps, getIn, useFormex } from "@rebasepro/formex";
 import { useTranslation } from "@rebasepro/core";

package/src/collection_editor/ui/collection_editor/properties/VectorPropertyField.tsx

@@ -0,0 +1,34 @@
+import { FieldCaption } from "../../../_cms_internals";
+import React from "react";
+import { TextField } from "@rebasepro/ui";
+import { getIn, useFormex } from "@rebasepro/formex";
+
+export function VectorPropertyField({ disabled }: {
+    disabled: boolean;
+}) {
+    const { values, setFieldValue, touched, errors } = useFormex();
+
+    const dimensionsPath = "dimensions";
+    const dimensionsValue = getIn(values, dimensionsPath);
+    const dimensionsError = getIn(touched, dimensionsPath) && getIn(errors, dimensionsPath);
+
+    return (
+        <div className={"col-span-12"}>
+            <TextField
+                name={dimensionsPath}
+                disabled={disabled}
+                type={"number"}
+                onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+                    const parsedVal = parseInt(e.target.value);
+                    setFieldValue(dimensionsPath, isNaN(parsedVal) ? undefined : parsedVal);
+                }}
+                label={"Vector Dimensions"}
+                value={dimensionsValue ?? ""}
+                error={Boolean(dimensionsError)}
+            />
+            <FieldCaption error={Boolean(dimensionsError)}>
+                {dimensionsError ?? "The dimension size of the vector embeddings (e.g., 1536 for OpenAI text-embedding-3-small)."}
+            </FieldCaption>
+        </div>
+    );
+}

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

@@ -78,7 +78,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 +88,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
@@ -147,7 +147,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 +260,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 +316,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 +369,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