@rebasepro/admin 0.6.0 → 0.7.0

package/src/collection_editor/useJsonCollectionsConfigController.tsx

@@ -0,0 +1,286 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { EntityCollection, NavigationGroupMapping, Property } from "@rebasepro/types";
+import type {
+    CollectionsConfigController,
+    SaveCollectionParams,
+    UpdateCollectionParams,
+    DeleteCollectionParams,
+    SavePropertyParams,
+    DeletePropertyParams,
+    UpdatePropertiesOrderParams,
+    UpdateKanbanColumnsOrderParams,
+} from "./types/config_controller";
+import type { JsonCollectionStore, SerializableCollection } from "./serializable_types";
+import { toSerializableCollection, toSerializableProperty, fromSerializableCollection } from "./serializable_utils";
+
+export interface UseJsonCollectionsConfigControllerOptions {
+    /**
+     * The store adapter for persisting/loading collections.
+     */
+    store: JsonCollectionStore;
+
+    /**
+     * If true, the configuration cannot be modified.
+     */
+    readOnly?: boolean;
+
+    /**
+     * If true, collections will be loaded from the store on mount.
+     * Defaults to true.
+     */
+    autoLoad?: boolean;
+}
+
+/**
+ * A `CollectionsConfigController` implementation that persists collection
+ * configurations as JSON via a pluggable `JsonCollectionStore` adapter.
+ *
+ * Use this when you want to store collection schemas in a database, API,
+ * localStorage, or any other JSON-compatible backend — as opposed to the
+ * default code-based persistence.
+ *
+ * @example
+ * ```tsx
+ * const store: JsonCollectionStore = {
+ *     load: async () => { const res = await fetch('/api/schemas'); return res.json(); },
+ *     save: async (slug, data) => { await fetch(`/api/schemas/${slug}`, { method: 'PUT', body: JSON.stringify(data) }); },
+ *     delete: async (slug) => { await fetch(`/api/schemas/${slug}`, { method: 'DELETE' }); },
+ * };
+ *
+ * const configController = useJsonCollectionsConfigController({ store });
+ * ```
+ */
+export function useJsonCollectionsConfigController({
+    store,
+    readOnly = false,
+    autoLoad = true,
+}: UseJsonCollectionsConfigControllerOptions): CollectionsConfigController {
+    const [collections, setCollections] = useState<EntityCollection[]>([]);
+    const [loading, setLoading] = useState(autoLoad);
+    const [navigationEntries, setNavigationEntries] = useState<NavigationGroupMapping[]>([]);
+
+    // Keep store ref stable to avoid stale closures in callbacks
+    const storeRef = useRef(store);
+    storeRef.current = store;
+
+    // ── Load on mount ─────────────────────────────────────────────────
+    useEffect(() => {
+        if (!autoLoad) return;
+        let cancelled = false;
+
+        (async () => {
+            try {
+                const [serialized, navEntries] = await Promise.all([
+                    storeRef.current.load(),
+                    storeRef.current.loadNavigationEntries?.() ?? Promise.resolve([]),
+                ]);
+                if (cancelled) return;
+                setCollections(serialized.map(fromSerializableCollection));
+                setNavigationEntries(navEntries);
+            } catch (e) {
+                console.error("useJsonCollectionsConfigController: failed to load collections", e);
+            } finally {
+                if (!cancelled) setLoading(false);
+            }
+        })();
+
+        return () => { cancelled = true; };
+    }, [autoLoad]);
+
+    // ── Helpers ────────────────────────────────────────────────────────
+
+    /**
+     * Update local state and persist a collection to the store.
+     */
+    const persistCollection = useCallback(async (collection: EntityCollection) => {
+        const serializable = toSerializableCollection(collection);
+        await storeRef.current.save(collection.slug, serializable);
+    }, []);
+
+    /**
+     * Find collection by id (slug).
+     */
+    const getCollection = useCallback((id: string): EntityCollection => {
+        const found = collections.find(c => c.slug === id);
+        if (found) return found;
+        throw new Error(`Collection "${id}" not found`);
+    }, [collections]);
+
+    // ── CRUD operations ───────────────────────────────────────────────
+
+    const saveCollection = useCallback(async <M extends Record<string, unknown>>(
+        { id, collectionData }: SaveCollectionParams<M>
+    ) => {
+        const collection = collectionData as EntityCollection;
+        await persistCollection(collection);
+        setCollections(prev => {
+            const idx = prev.findIndex(c => c.slug === id);
+            if (idx >= 0) {
+                const next = [...prev];
+                next[idx] = collection;
+                return next;
+            }
+            return [...prev, collection];
+        });
+    }, [persistCollection]);
+
+    const updateCollection = useCallback(async <M extends Record<string, unknown>>(
+        { id, collectionData, previousId }: UpdateCollectionParams<M>
+    ) => {
+        setCollections(prev => {
+            const lookupId = previousId ?? id;
+            const idx = prev.findIndex(c => c.slug === lookupId);
+            if (idx < 0) return prev;
+
+            const merged = { ...prev[idx], ...collectionData } as EntityCollection;
+            const next = [...prev];
+            next[idx] = merged;
+
+            // Persist async — fire-and-forget with error logging
+            persistCollection(merged).catch(e =>
+                console.error("useJsonCollectionsConfigController: failed to update collection", e)
+            );
+
+            // If slug changed, clean up the old entry in the store
+            if (previousId && previousId !== id) {
+                storeRef.current.delete(previousId).catch(e =>
+                    console.error("useJsonCollectionsConfigController: failed to delete old slug", e)
+                );
+            }
+
+            return next;
+        });
+    }, [persistCollection]);
+
+    const deleteCollection = useCallback(async ({ id }: DeleteCollectionParams) => {
+        await storeRef.current.delete(id);
+        setCollections(prev => prev.filter(c => c.slug !== id));
+    }, []);
+
+    const saveProperty = useCallback(async ({
+        path,
+        propertyKey,
+        property,
+        newPropertiesOrder,
+    }: SavePropertyParams) => {
+        setCollections(prev => {
+            const idx = prev.findIndex(c => c.slug === path);
+            if (idx < 0) return prev;
+
+            const collection = { ...prev[idx] };
+            collection.properties = {
+                ...collection.properties,
+                [propertyKey]: property,
+            };
+            if (newPropertiesOrder) {
+                collection.propertiesOrder = newPropertiesOrder as typeof collection.propertiesOrder;
+            }
+
+            const next = [...prev];
+            next[idx] = collection as EntityCollection;
+
+            persistCollection(next[idx]).catch(e =>
+                console.error("useJsonCollectionsConfigController: failed to save property", e)
+            );
+
+            return next;
+        });
+    }, [persistCollection]);
+
+    const deleteProperty = useCallback(async ({
+        path,
+        propertyKey,
+        newPropertiesOrder,
+    }: DeletePropertyParams) => {
+        setCollections(prev => {
+            const idx = prev.findIndex(c => c.slug === path);
+            if (idx < 0) return prev;
+
+            const collection = { ...prev[idx] };
+            const { [propertyKey]: _removed, ...remaining } = collection.properties;
+            collection.properties = remaining;
+            if (newPropertiesOrder) {
+                collection.propertiesOrder = newPropertiesOrder as typeof collection.propertiesOrder;
+            }
+
+            const next = [...prev];
+            next[idx] = collection as EntityCollection;
+
+            persistCollection(next[idx]).catch(e =>
+                console.error("useJsonCollectionsConfigController: failed to delete property", e)
+            );
+
+            return next;
+        });
+    }, [persistCollection]);
+
+    const updatePropertiesOrder = useCallback(async ({
+        collection,
+        newPropertiesOrder,
+    }: UpdatePropertiesOrderParams) => {
+        const updated = {
+            ...collection,
+            propertiesOrder: newPropertiesOrder,
+        } as EntityCollection;
+
+        setCollections(prev => {
+            const idx = prev.findIndex(c => c.slug === collection.slug);
+            if (idx < 0) return prev;
+            const next = [...prev];
+            next[idx] = updated;
+            return next;
+        });
+
+        await persistCollection(updated);
+    }, [persistCollection]);
+
+    const updateKanbanColumnsOrder = useCallback(async ({
+        collection,
+        kanbanColumnProperty,
+        newColumnsOrder,
+    }: UpdateKanbanColumnsOrderParams) => {
+        // Kanban column order is stored in the enum order of the column property.
+        // For JSON persistence, we store it as-is — the view layer reads enum order.
+        // This is a no-op for now; the kanban order is determined by the enum
+        // definition on the property itself.
+    }, []);
+
+    const saveNavigationEntriesHandler = useCallback(async (entries: NavigationGroupMapping[]) => {
+        setNavigationEntries(entries);
+        if (storeRef.current.saveNavigationEntries) {
+            await storeRef.current.saveNavigationEntries(entries);
+        }
+    }, []);
+
+    // ── Return controller ─────────────────────────────────────────────
+    return useMemo<CollectionsConfigController>(() => ({
+        loading,
+        readOnly,
+        readOnlyReason: readOnly ? "Configuration is read-only." : undefined,
+        collections,
+        getCollection,
+        saveCollection,
+        updateCollection,
+        deleteCollection,
+        saveProperty,
+        deleteProperty,
+        updatePropertiesOrder,
+        updateKanbanColumnsOrder,
+        navigationEntries,
+        saveNavigationEntries: saveNavigationEntriesHandler,
+    }), [
+        loading,
+        readOnly,
+        collections,
+        getCollection,
+        saveCollection,
+        updateCollection,
+        deleteCollection,
+        saveProperty,
+        deleteProperty,
+        updatePropertiesOrder,
+        updateKanbanColumnsOrder,
+        navigationEntries,
+        saveNavigationEntriesHandler,
+    ]);
+}

package/src/collection_editor/useSafeSnackbarController.ts

@@ -0,0 +1,9 @@
+import { useSnackbarController } from "@rebasepro/core";
+
+export function useSafeSnackbarController(): ReturnType<typeof useSnackbarController> | undefined {
+    try {
+        return useSnackbarController();
+    } catch {
+        return undefined;
+    }
+}

package/src/collection_editor_ui.ts

@@ -13,3 +13,9 @@ export type { CollectionStudioViewProps } from "./collection_editor/ui/collectio
 
 export { CollectionsStudioView } from "./collection_editor/ui/collection_editor/CollectionsStudioView";
 export type { CollectionsStudioViewProps } from "./collection_editor/ui/collection_editor/CollectionsStudioView";
+
+export { RouterCollectionStudioView } from "./collection_editor/ui/collection_editor/RouterCollectionStudioView";
+export type { RouterCollectionStudioViewProps } from "./collection_editor/ui/collection_editor/RouterCollectionStudioView";
+
+export { RouterCollectionsStudioView } from "./collection_editor/ui/collection_editor/RouterCollectionsStudioView";
+export type { RouterCollectionsStudioViewProps } from "./collection_editor/ui/collection_editor/RouterCollectionsStudioView";

package/src/components/ArrayContainer.tsx

@@ -402,13 +402,13 @@ export function ArrayContainer<T>({
         const newIds = [...internalIds];
         newIds.splice(index, 1);
         setInternalIds(newIds);
-        onValueChange(value.filter((_, i) => i !== index));
+        onValueChange((value ?? []).filter((_, i) => i !== index));
     };
 
     const copy = (index: number) => {
         if ((value ?? []).length >= max) return;
         const id = getRandomId();
-        const copyingItem = value[index];
+        const copyingItem = (value ?? [])[index];
         const newIds: number[] = [
             ...internalIds.slice(0, index + 1),
             id,
@@ -416,7 +416,7 @@ export function ArrayContainer<T>({
         ];
         if (onInternalIdAdded) onInternalIdAdded(id);
         setInternalIds(newIds);
-        onValueChange([...value.slice(0, index + 1), copyingItem, ...value.slice(index + 1)]);
+        onValueChange([...(value ?? []).slice(0, index + 1), copyingItem, ...(value ?? []).slice(index + 1)]);
     };
 
     const addInIndex = (index: number) => {
@@ -429,7 +429,7 @@ export function ArrayContainer<T>({
         ];
         if (onInternalIdAdded) onInternalIdAdded(id);
         setInternalIds(newIds);
-        onValueChange([...value.slice(0, index), newDefaultEntry, ...value.slice(index)]);
+        onValueChange([...(value ?? []).slice(0, index), newDefaultEntry, ...(value ?? []).slice(index)]);
     };
 
     const onDragEnd = (event: DragEndEvent) => {
@@ -444,7 +444,7 @@ export function ArrayContainer<T>({
         if (oldIndex === -1 || newIndex === -1) return;
         const newIds = arrayMove(internalIds, oldIndex, newIndex);
         setInternalIds(newIds);
-        onValueChange(arrayMove(value, oldIndex, newIndex));
+        onValueChange(arrayMove(value ?? [], oldIndex, newIndex));
     };
 
     return sortable ? (

package/src/components/DefaultDrawer.tsx

@@ -165,11 +165,21 @@ function CMSNavigationContent() {
 
     const allNavigationEntries = navigationState.topLevelNavigation?.navigationEntries ?? [];
 
-    // Studio mode shows view-type entries (devViews) + admin entries (Users/Roles).
-    // Content mode shows collections and custom entries + admin entries (Users/Roles), but not studio views.
+    // Build a set of Studio-only dev view slugs so we can distinguish them from
+    // CMS custom views added via <RebaseCMS views={...}> or plugins.
+    const studioViewSlugs = useMemo(() => {
+        const slugs = new Set<string>();
+        (registry.studioConfig?.devViews ?? []).forEach(v => slugs.add(v.slug));
+        // The schema view is also a Studio dev view (auto-injected when collectionEditor is enabled)
+        if (registry.studioConfig && registry.cmsConfig?.collectionEditor) slugs.add("schema");
+        return slugs;
+    }, [registry.studioConfig, registry.cmsConfig?.collectionEditor]);
+
+    // Studio mode shows Studio dev views + admin entries (Users/Roles).
+    // Content mode shows collections, CMS custom views, and admin entries — but not Studio dev views.
     const filteredEntries = adminModeController.mode === "studio"
         ? allNavigationEntries.filter(e => e.type === "view" || e.type === "admin")
-        : allNavigationEntries.filter(e => e.type !== "view");
+        : allNavigationEntries.filter(e => e.type !== "view" || !studioViewSlugs.has(e.slug));
 
     // Derive groups from the filtered entries, preserving the order from topLevelNavigation.groups
     const entryGroups = new Set(filteredEntries.map(e => e.group).filter(Boolean));

package/src/components/DrawerNavigationGroup.tsx

@@ -1,7 +1,7 @@
 import type { NavigationEntry } from "@rebasepro/types";
 import React from "react";
 import { ChevronDownIcon, cls, iconSize, Typography } from "@rebasepro/ui";
-;
+
 import { IconForView } from "@rebasepro/core";
 import { DrawerNavigationItem } from "./DrawerNavigationItem";
 import { useTranslation, useComponentOverride } from "@rebasepro/core";
@@ -108,7 +108,7 @@ export function DrawerNavigationGroup({
                     "transition-all duration-200 ease-in-out",
                     "overflow-hidden",
                     !hideHeader && "dark:bg-transparent",
-                    !hideHeader ? (drawerOpen ? "rounded-lg" : "rounded-lg") : "rounded-lg",
+                    "rounded-lg",
                     (!hideHeader && collapsed) ? "max-h-0 opacity-0" : "max-h-[2000px] opacity-100"
                 )}
             >

package/src/components/DrawerNavigationItem.tsx

@@ -22,7 +22,7 @@ export function DrawerNavigationItem({
 }) {
 
     const iconWrap = <div
-        className={"shrink-0 flex items-center justify-center w-[44px] h-[30px] text-surface-500 dark:text-text-secondary-dark [&>svg]:size-4"}>
+        className={"shrink-0 flex items-center justify-center w-[44px] h-[30px] text-surface-500 dark:text-text-secondary-dark [&>svg]:size-4 group-hover/nav:text-primary transition-colors duration-150"}>
         {icon}
     </div>;
 
@@ -33,12 +33,12 @@ export function DrawerNavigationItem({
                 width: "100%",
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
-            className={({ isActive }: { isActive: boolean }) => cls("rounded-md truncate",
-                "hover:bg-surface-100 dark:hover:bg-surface-800/60 text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white",
+            className={({ isActive }: { isActive: boolean }) => cls("rounded-lg truncate group/nav",
+                "hover:bg-primary/5 dark:hover:bg-primary/5 text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white",
                 "flex flex-row items-center",
                 drawerOpen ? "pr-4 h-[30px]" : "h-[30px]",
                 "font-medium text-[13px]",
-                isActive ? "bg-surface-900/[0.06] dark:bg-surface-800/50 text-surface-900 dark:text-white" : ""
+                isActive ? "bg-primary/8 dark:bg-primary/10 text-primary dark:text-primary [&_div]:text-primary" : ""
             )}
             to={url}
         >

package/src/components/EntityCollectionView/EntityBoardCard.tsx

@@ -5,10 +5,10 @@ import { Checkbox, Chip, cls, defaultBorderMixin, Markdown } from "@rebasepro/ui
 import { PropertyPreview } from "../../preview";
 import { useAuthController, useCustomizationController } from "@rebasepro/core";
 import { IconForView } from "@rebasepro/core";
-import { BoardItemViewProps } from "./board_types";
+import { BoardItemViewProps } from "@rebasepro/ui";
 import { useCollectionSlotKeys, resolveEntitySlots } from "./useEntityPreviewSlots";
 
-export type EntityBoardCardProps<M extends Record<string, unknown> = Record<string, unknown>> = BoardItemViewProps<M> & {
+export type EntityBoardCardProps<M extends Record<string, unknown> = Record<string, unknown>> = BoardItemViewProps<Entity<M>> & {
     collection: EntityCollection<M>;
     onClick?: (entity: Entity<M>) => void;
     selected?: boolean;
@@ -35,7 +35,7 @@ function EntityBoardCardInner<M extends Record<string, unknown> = Record<string,
     onSelectionChange,
     selectionEnabled = false
 }: EntityBoardCardProps<M>) {
-    const entity = item.entity;
+    const entity = item.data;
     const authController = useAuthController();
     const customizationController = useCustomizationController();
 
@@ -247,14 +247,14 @@ export function createEntityBoardCardComponent<M extends Record<string, unknown>
         onSelectionChange?: (entity: Entity<M>, selected: boolean) => void;
         selectionEnabled?: boolean;
     }
-): React.ComponentType<BoardItemViewProps<M>> {
-    return function EntityBoardCardWrapper(props: BoardItemViewProps<M>) {
+): React.ComponentType<BoardItemViewProps<Entity<M>>> {
+    return function EntityBoardCardWrapper(props: BoardItemViewProps<Entity<M>>) {
         return (
             <EntityBoardCard
                 {...props}
                 collection={collection}
                 onClick={options.onClick}
-                selected={options.isEntitySelected?.(props.item.entity)}
+                selected={options.isEntitySelected?.(props.item.data)}
                 onSelectionChange={options.onSelectionChange}
                 selectionEnabled={options.selectionEnabled}
             />

package/src/components/EntityCollectionView/EntityCollectionBoardView.tsx

@@ -1,9 +1,6 @@
-
 import type { EntityCollection } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Entity, EntityTableController, EnumValueConfig, SaveEntityProps, SelectionController } from "@rebasepro/types";
-import { Board } from "./Board";
-import { BoardItem, BoardItemViewProps, ColumnLoadingState } from "./board_types";
 import { EntityBoardCard } from "./EntityBoardCard";
 import {
     Button,
@@ -13,12 +10,17 @@ import {
     Dialog,
     DialogActions,
     DialogContent,
+    DialogTitle,
     getColorSchemeForSeed,
     IconButton,
     iconSize,
     RefreshCwIcon,
     Tooltip,
-    Typography
+    Typography,
+    KanbanView,
+    BoardItem,
+    BoardItemViewProps,
+    ColumnLoadingState
 } from "@rebasepro/ui";
 import { resolveEnumValues } from "@rebasepro/common";
 import { getPropertyInPath } from "../../util/property_utils";
@@ -317,10 +319,10 @@ parentEntityIds,
     }, [columns, boardDataController.columnData]);
 
     // Convert entities to board items per column (data already sorted by orderProperty from controller)
-    const boardItems: BoardItem<M>[] = useMemo(() => {
+    const boardItems: BoardItem<Entity<M>>[] = useMemo(() => {
         return allEntities.map((entity: Entity<M>) => ({
             id: String(entity.id),
-            entity
+            data: entity
         }));
     }, [allEntities]);
 
@@ -340,11 +342,11 @@ parentEntityIds,
     }, [columns, boardDataController.columnData]);
 
     // Use the lookup map to assign columns - ensures items stay in the column they were fetched for
-    const assignColumn = useCallback((item: BoardItem<M>): string => {
+    const assignColumn = useCallback((item: BoardItem<Entity<M>>): string => {
         const column = entityColumnMap[item.id];
         if (column) return column;
         // Fallback: read from entity values (for newly created items or edge cases)
-        const value = item.entity.values?.[columnProperty];
+        const value = item.data.values?.[columnProperty];
         if (value && columns.includes(String(value))) return String(value);
         return columns[0] || "";
     }, [entityColumnMap, columnProperty, columns]);
@@ -461,12 +463,12 @@ parentEntityIds,
     // When ItemComponent identity changes, React.memo'd SortableItem remounts
     // the card → DOM is destroyed/recreated → CSS :hover state is lost → flicker.
     const ItemComponent = useMemo(() => {
-        const Comp = (props: BoardItemViewProps<M>) => (
+        const Comp = (props: BoardItemViewProps<Entity<M>>) => (
             <EntityBoardCard
                 {...props}
                 collection={collectionRef.current as EntityCollection<M>}
                 onClick={stableOnClick}
-                selected={isEntitySelectedRef.current(props.item.entity)}
+                selected={isEntitySelectedRef.current(props.item.data)}
                 onSelectionChange={stableOnSelectionChange}
                 selectionEnabled={selectionEnabledRef.current}
             />
@@ -591,7 +593,7 @@ parentEntityIds,
 
             {/* Main board */}
             <div className="flex-1 overflow-auto no-scrollbar">
-                <Board
+                <KanbanView
                     data={boardItems}
                     columns={columns}
                     columnLabels={columnLabels}
@@ -626,6 +628,7 @@ parentEntityIds,
 
             {/* Backfill dialog */}
             <Dialog open={showBackfillDialog} onOpenChange={setShowBackfillDialog}>
+                <DialogTitle hidden>{t("initialize_kanban_order")}</DialogTitle>
                 <DialogContent>
                     <Typography variant="h6" className="mb-4">{t("initialize_kanban_order")}</Typography>
                     <Typography variant="body2">