@rebasepro/admin 0.9.0 → 0.9.1-canary.0de22e0

package/src/components/CollectionTableBinding/table_bindings.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ArrayProperty, DateProperty, Entity, EntityReference, EntityRelation, NumberProperty, Property, ReferenceProperty, RelationProperty, StringProperty } from "@rebasepro/types";
-import { TableSize, useCustomizationController } from "@rebasepro/core";
+import { TableSize, useCustomizationController } from "@rebasepro/app";
 import {
     VirtualTableInput,
     VirtualTableNumberInput,

package/src/components/CollectionViewBinding/BoardCardBinding.tsx

@@ -3,8 +3,8 @@ import React, { memo, useCallback, useMemo } from "react";
 import { Entity } from "@rebasepro/types";
 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 { useAuthController, useCustomizationController } from "@rebasepro/app";
+import { IconForView } from "@rebasepro/app";
 import { BoardItemViewProps } from "@rebasepro/ui";
 import { useCollectionSlotKeys, resolveEntitySlots } from "./usePreviewSlots";
 

package/src/components/CollectionViewBinding/CollectionBoardViewBinding.tsx

@@ -33,12 +33,12 @@ import {
     useRebaseContext,
     useTranslation,
     useSlot
-} from "@rebasepro/core";
-import { useAnalyticsController } from "@rebasepro/core";
-import { setIn } from "@rebasepro/formex";
+} from "@rebasepro/app";
+import { useAnalyticsController } from "@rebasepro/app";
+import { setIn } from "@rebasepro/forms";
 import { useBoardDataController } from "./useBoardDataController";
 import { useKanbanDragAndDrop } from "./hooks/useKanbanDragAndDrop";
-import { useSidePanel } from "../../index";
+import { useSidePanel } from "../../hooks/useSidePanel";
 import { generateNKeysBetween } from "fractional-indexing";
 
 export type CollectionBoardViewBindingProps<M extends Record<string, unknown> = Record<string, unknown>> = {

package/src/components/CollectionViewBinding/CollectionCardViewBinding.tsx

@@ -8,7 +8,7 @@ import {
     Typography,
     CardView
 } from "@rebasepro/ui";
-import { useComponentOverride } from "@rebasepro/core";
+import { useComponentOverride } from "@rebasepro/app";
 
 export type CollectionCardViewBindingProps<M extends Record<string, unknown> = Record<string, unknown>> = {
     collection: CollectionConfig<M>;

package/src/components/CollectionViewBinding/CollectionListViewBinding.tsx

@@ -17,10 +17,10 @@ import { PropertyPreview } from "../../preview";
 import {
     useAuthController,
     useCustomizationController
-} from "@rebasepro/core";
-import { useAnalyticsController } from "@rebasepro/core";
+} from "@rebasepro/app";
+import { useAnalyticsController } from "@rebasepro/app";
 import { getEntityPreviewKeys } from "../../util/previews";
-import { IconForView } from "@rebasepro/core";
+import { IconForView } from "@rebasepro/app";
 import { getValueInPath } from "@rebasepro/utils";
 import { useCollectionSlotKeys, resolveEntitySlots, type CollectionSlotKeys } from "./usePreviewSlots";
 import { useCMSContext } from "../../hooks/useCMSContext";

package/src/components/CollectionViewBinding/CollectionViewActions.tsx

@@ -2,18 +2,18 @@
 import type { CollectionConfig } from "@rebasepro/types";
 import React, { lazy, Suspense } from "react";
 
-import { useLargeLayout, useTranslation, useSlot, resolveComponentRef } from "@rebasepro/core";
+import { useLargeLayout, useTranslation, useSlot, resolveComponentRef } from "@rebasepro/app";
 import { CollectionActionsProps, EntityTableController, SelectionController } from "@rebasepro/types";
 import { Button, IconButton, Tooltip, Popover, iconSize } from "@rebasepro/ui";
 import { ErrorBoundary, MoreVerticalIcon, PlusIcon, Trash2Icon } from "@rebasepro/ui";
-import { usePermissions } from "@rebasepro/core";
+import { usePermissions } from "@rebasepro/app";
 import { toArray } from "@rebasepro/utils";
 // Lazy-load import/export — pulls in exceljs only on demand
 const ImportCollectionAction = lazy(() => import("../../data_import/import").then(m => ({ default: m.ImportCollectionAction })));
 const ExportCollectionAction = lazy(() => import("../../data_export/export").then(m => ({ default: m.ExportCollectionAction })));
 import { EditorCollectionAction } from "../../collection_editor/ui/EditorCollectionAction";
 import { useCollectionEditorController } from "../../collection_editor/useCollectionEditorController";
-import { useCMSContext } from "../../index";
+import { useCMSContext } from "../../hooks/useCMSContext";
 
 export type CollectionViewActionsProps<M extends Record<string, unknown>> = {
     collection: CollectionConfig<M>;

package/src/components/CollectionViewBinding/CollectionViewBinding.tsx

@@ -38,7 +38,7 @@ import {
     useSlot,
     useTranslation,
     useUserConfigurationPersistence
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import { CollectionViewActions } from "./CollectionViewActions";
 import { CollectionCardViewBinding } from "./CollectionCardViewBinding";
 import { CollectionListViewBinding } from "./CollectionListViewBinding";
@@ -69,28 +69,15 @@ import { DeleteEntityDialog } from "../DeleteEntityDialog";
 import { useSelectionController } from "./useSelectionController";
 import { CollectionViewStartActions } from "./CollectionViewStartActions";
 import { addRecentId, getRecentIds } from "./utils";
+import { isViewMode, OpenEntityMode, resolveOpenEntityMode, VIEW_MODE_PARAM } from "../../util/view_mode";
 import { mergeDeep } from "@rebasepro/utils";
-import {
-    useBreadcrumbsController,
-    useCMSContext,
-    useCollectionRegistryController,
-    useSidePanel,
-    useUrlController
-} from "../../index";
+import { useBreadcrumbsController } from "../../hooks/useBreadcrumbsController";
+import { useCMSContext } from "../../hooks/useCMSContext";
+import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
+import { useSidePanel } from "../../hooks/useSidePanel";
+import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
 
 const EMPTY_ARRAY: never[] = [];
-const DEFAULT_ENTITY_OPEN_MODE = "split";
-
-function getOpenEntityMode(
-    viewMode: ViewMode,
-    configuredMode?: "side_panel" | "full_screen" | "split" | "dialog"
-): "side_panel" | "full_screen" | "split" | "dialog" {
-    if (configuredMode) return configuredMode;
-    if (viewMode === "kanban") return "side_panel";
-    if (viewMode === "table" || viewMode === "cards") return "full_screen";
-    // "list" view defaults to split
-    return "split";
-}
 
 /**
  * @group Components
@@ -249,11 +236,8 @@ const CollectionViewBindingInner = React.memo(
 
         // Read view from React Router's searchParams (reactive on back/forward)
         const urlView = useMemo((): ViewMode | null => {
-            const v = searchParams.get("__view");
-            if (v && ["list", "table", "kanban", "cards"].includes(v)) {
-                return v as ViewMode;
-            }
-            return null;
+            const v = searchParams.get(VIEW_MODE_PARAM);
+            return isViewMode(v) ? v : null;
         }, [searchParams]);
 
         // Get saved view from local persistence
@@ -270,7 +254,10 @@ const CollectionViewBindingInner = React.memo(
             return defaultViewMode;
         });
 
-        const openEntityMode = getOpenEntityMode(viewMode, collection?.openEntityMode);
+        const openEntityMode = resolveOpenEntityMode({
+            collection,
+            viewMode
+        });
 
         // Sync URL with current view on init (if view came from saved config)
         useEffect(() => {
@@ -278,7 +265,7 @@ const CollectionViewBindingInner = React.memo(
                 // View came from saved config but URL doesn't have it - update URL without push
                 setSearchParams((prev) => {
                     const next = new URLSearchParams(prev);
-                    next.set("__view", viewMode);
+                    next.set(VIEW_MODE_PARAM, viewMode);
                     return next;
                 }, { replace: true });
             }
@@ -292,9 +279,9 @@ const CollectionViewBindingInner = React.memo(
             setSearchParams((prev) => {
                 const next = new URLSearchParams(prev);
                 if (newMode === defaultViewMode) {
-                    next.delete("__view");
+                    next.delete(VIEW_MODE_PARAM);
                 } else {
-                    next.set("__view", newMode);
+                    next.set(VIEW_MODE_PARAM, newMode);
                 }
                 return next;
             });
@@ -974,6 +961,7 @@ parentEntityIds,
                 highlightedEntities={highlightedEntity ? [highlightedEntity] : []}
                 size={listSize}
                 emptyComponent={emptyComponent}
+                selectedEntityId={selectedEntityIdProp}
                 getActionsForEntity={getActionsForEntity}
                 path={path}
                 openEntityMode={openEntityMode}
@@ -1008,12 +996,58 @@ parentEntityIds,
                 additionalIDHeaderWidget={<EntityIdHeaderWidget
                     path={path}
                     idPath={path}
-                    collection={collection}/>}
+                    collection={collection}
+                    openEntityMode={openEntityMode}/>}
                 openEntityMode={openEntityMode}
                 onColumnsOrderChange={onColumnsOrderChange}
             />
         );
 
+        const detailOpen = selectedEntityIdProp !== undefined;
+
+        // List view gets a centered, titled reading surface. Opening a detail
+        // panel collapses the title and drops the centering so the list can
+        // shrink into the master column.
+        const collectionSurface = viewMode === "list"
+            ? (
+                <div
+                    className={cls(
+                        "flex flex-col w-full",
+                        detailOpen ? "" : "max-w-6xl mx-auto px-3 md:px-4 lg:px-6 py-4"
+                    )}
+                >
+                    {/* Collapsible title — grid-rows for smooth height, transform for GPU */}
+                    <div
+                        className={cls(
+                            "grid transition-[grid-template-rows,transform,margin] duration-150 ease-out",
+                            detailOpen
+                                ? "grid-rows-[0fr] -translate-y-2 mt-0 mb-0"
+                                : "grid-rows-[1fr] translate-y-0 mt-12 mb-6"
+                        )}
+                    >
+                        <div className="overflow-hidden flex items-center gap-4">
+                            <Typography gutterBottom variant="h4" className="grow mb-0" component="h4">
+                                {collection.name}
+                            </Typography>
+                        </div>
+                    </div>
+                    {pluginInsights.length > 0 && (
+                        <div
+                            className={cls(
+                                "grid transition-[grid-template-rows] duration-150 ease-out",
+                                detailOpen ? "grid-rows-[0fr]" : "grid-rows-[1fr]"
+                            )}
+                        >
+                            <div className="overflow-hidden flex-shrink-0">
+                                {pluginInsights}
+                            </div>
+                        </div>
+                    )}
+                    {innerView}
+                </div>
+            )
+            : innerView;
+
         const mainContent = (
             <div className={cls("overflow-hidden h-full w-full rounded-md flex flex-col dark:bg-surface-800", className)}
                 ref={containerRef}>
@@ -1054,66 +1088,10 @@ parentEntityIds,
                         selectedTab={selectedTabProp}
                         toolbar={toolbarNode}
                     >
-                        {/* When detail panel is open, left panel is always the list
-                            view — regardless of which view mode triggered the entity
-                            click. When no detail, show the active view mode. */}
-                        {(selectedEntityIdProp !== undefined || viewMode === "list") ? (
-                            <div
-                                className={cls(
-                                    "flex flex-col w-full",
-                                    selectedEntityIdProp === undefined
-                                        ? "max-w-6xl mx-auto px-3 md:px-4 lg:px-6 py-4"
-                                        : ""
-                                )}
-                            >
-                                {/* Collapsible title — grid-rows for smooth height, transform for GPU */}
-                                <div
-                                    className={cls(
-                                        "grid transition-[grid-template-rows,transform,margin] duration-150 ease-out",
-                                        selectedEntityIdProp === undefined
-                                            ? "grid-rows-[1fr] translate-y-0 mt-12 mb-6"
-                                            : "grid-rows-[0fr] -translate-y-2 mt-0 mb-0"
-                                    )}
-                                >
-                                    <div className="overflow-hidden flex items-center gap-4">
-                                        <Typography gutterBottom variant="h4" className="grow mb-0" component="h4">
-                                            {collection.name}
-                                        </Typography>
-                                    </div>
-                                </div>
-                                {pluginInsights.length > 0 && (
-                                    <div
-                                        className={cls(
-                                            "grid transition-[grid-template-rows] duration-150 ease-out",
-                                            selectedEntityIdProp === undefined
-                                                ? "grid-rows-[1fr]"
-                                                : "grid-rows-[0fr]"
-                                        )}
-                                    >
-                                        <div className="overflow-hidden flex-shrink-0">
-                                            {pluginInsights}
-                                        </div>
-                                    </div>
-                                )}
-                                <CollectionListViewBinding
-                                    key={`list-view-${path}`}
-                                    collection={collection}
-                                    tableController={tableController}
-                                    onEntityClick={onEntityClick}
-                                    selectionController={usedSelectionController}
-                                    selectionEnabled={selectionEnabled}
-                                    highlightedEntities={highlightedEntity ? [highlightedEntity] : []}
-                                    size={listSize}
-                                    emptyComponent={emptyComponent}
-                                    selectedEntityId={selectedEntityIdProp}
-                                    getActionsForEntity={getActionsForEntity}
-                                    path={path}
-                                    openEntityMode={openEntityMode}
-                                />
-                            </div>
-                        ) : (
-                            innerView
-                        )}
+                        {/* The left panel keeps rendering whichever view mode is
+                            active. Swapping it to a list on selection would make
+                            a board or card grid vanish on every click. */}
+                        {collectionSurface}
                     </SplitListView>
                 ) : (
                     <div className="flex flex-col w-full h-full">
@@ -1122,39 +1100,7 @@ parentEntityIds,
                             "flex-1 flex flex-col",
                             (viewMode === "list" || viewMode === "cards") && "overflow-y-auto"
                         )}>
-                            {viewMode === "list" ? (
-                                <div
-                                    className={cls(
-                                        "flex flex-col w-full",
-                                        selectedEntityIdProp === undefined
-                                            ? "max-w-6xl mx-auto px-3 md:px-4 lg:px-6 py-4"
-                                            : ""
-                                    )}
-                                >
-                                    <div
-                                        className={cls(
-                                            "grid transition-[grid-template-rows,transform,margin] duration-150 ease-out",
-                                            selectedEntityIdProp === undefined
-                                                ? "grid-rows-[1fr] translate-y-0 mt-12 mb-6"
-                                                : "grid-rows-[0fr] -translate-y-2 mt-0 mb-0"
-                                        )}
-                                    >
-                                        <div className="overflow-hidden flex items-center gap-4">
-                                            <Typography gutterBottom variant="h4" className="grow mb-0" component="h4">
-                                                {collection.name}
-                                            </Typography>
-                                        </div>
-                                    </div>
-                                    {pluginInsights.length > 0 && (
-                                        <div className="flex-shrink-0">
-                                            {pluginInsights}
-                                        </div>
-                                    )}
-                                    {innerView}
-                                </div>
-                            ) : (
-                                innerView
-                            )}
+                            {collectionSurface}
                         </div>
                     </div>
                 )}
@@ -1358,11 +1304,17 @@ function buildPropertyWidthOverwrite(key: string, width: number): PartialCollect
 function EntityIdHeaderWidget({
     collection,
     path,
-    idPath
+    idPath,
+    openEntityMode
 }: {
     collection: CollectionConfig,
     path: string,
-    idPath: string
+    idPath: string,
+    /**
+     * Resolved by the parent so that finding an entity by id lands it in the
+     * same surface a row click would — not a different one.
+     */
+    openEntityMode: OpenEntityMode
 }) {
 
     const { t } = useTranslation();
@@ -1372,8 +1324,6 @@ function EntityIdHeaderWidget({
     const [recentIds, setRecentIds] = React.useState<string[]>(getRecentIds(collection.slug).map(String));
     const sidePanelController = useSidePanel();
 
-    const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
-
     return (
         <Tooltip title={!openPopup ? t("find_by_id") : undefined} asChild={false}>
             <Popover

package/src/components/CollectionViewBinding/CollectionViewStartActions.tsx

@@ -1,7 +1,7 @@
 import type { Properties } from "@rebasepro/types";
 import type { CollectionConfig } from "@rebasepro/types";
 import React, { useState, useCallback } from "react";
-import { useAuthController, useLargeLayout, useTranslation, useSlot } from "@rebasepro/core";
+import { useAuthController, useLargeLayout, useTranslation, useSlot } from "@rebasepro/app";
 import { CollectionActionsProps, EntityTableController, SelectionController } from "@rebasepro/types";
 import { ErrorBoundary, iconSize } from "@rebasepro/ui";
 import { ArrowLeftIcon, Badge, Button, cls, FilterIcon, IconButton, Tooltip } from "@rebasepro/ui";
@@ -10,7 +10,9 @@ import { FiltersDialog } from "./FiltersDialog";
 import { FilterPresetsButton } from "./FilterPresetsButton";
 import { toArray } from "@rebasepro/utils";
 import { useNavigate } from "react-router-dom";
-import { useUrlController, useCMSContext } from "../../index";
+import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
+import { useCMSContext } from "../../hooks/useCMSContext";
+import { withViewMode } from "../../util/view_mode";
 
 export type CollectionViewStartActionsProps<M extends Record<string, unknown>> = {
     collection: CollectionConfig<M>;
@@ -72,13 +74,7 @@ parentEntityIds,
     };
 
     const handleBackClick = useCallback(() => {
-        let collectionUrl = urlController.buildUrlCollectionPath(path);
-        // Preserve the __view query param so the view mode is retained
-        const currentViewParam = new URLSearchParams(window.location.search).get("__view");
-        if (currentViewParam) {
-            collectionUrl += `${collectionUrl.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
-        }
-        navigate(collectionUrl);
+        navigate(withViewMode(urlController.buildUrlCollectionPath(path)));
     }, [navigate, urlController, path]);
 
     const backButton = compact && (

package/src/components/CollectionViewBinding/EntityCardBinding.tsx

@@ -12,9 +12,9 @@ import { PropertyPreview } from "../../preview";
 import {
     useAuthController,
     useCustomizationController
-} from "@rebasepro/core";
-import { useAnalyticsController } from "@rebasepro/core";
-import { IconForView } from "@rebasepro/core";
+} from "@rebasepro/app";
+import { useAnalyticsController } from "@rebasepro/app";
+import { IconForView } from "@rebasepro/app";
 import { useCollectionSlotKeys, resolveEntitySlots } from "./usePreviewSlots";
 
 export type EntityCardBindingProps<M extends Record<string, unknown> = Record<string, unknown>> = {

package/src/components/CollectionViewBinding/FiltersDialog.tsx

@@ -5,9 +5,27 @@ import { FilterValues, WhereFilterOp } from "@rebasepro/types";
 import { Button, cls, defaultBorderMixin, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
 import { FilterIcon, VirtualTableWhereFilterOp } from "@rebasepro/ui";
 import { resolveFilterOperators } from "@rebasepro/common";
-import { useCollectionScope, useTranslation } from "@rebasepro/core";
+import { useCollectionScope, useTranslation } from "@rebasepro/app";
 import { FilterFieldBinding } from "../SelectableTable/filters/FilterFieldBinding";
 
+/**
+ * `WhereFilterOp` is declared twice: once in `@rebasepro/types` as the canonical
+ * operator set every driver translates, and once in `@rebasepro/ui` for the
+ * table's own props. That is deliberate — `ui` is a standalone design system and
+ * depends on no Rebase package, so it cannot import the canonical one (and a
+ * type-only import would not help: `ui` emits declarations with `tsc`, which
+ * references external types rather than inlining them, so its published `.d.ts`
+ * would demand `@rebasepro/types` from every consumer).
+ *
+ * This file is where the two meet and get cast into each other, so it is where
+ * their agreement is checked. Adding an operator to one and not the other stops
+ * this line compiling instead of silently producing a filter the table can build
+ * and no driver can run — or one a driver supports and the table cannot offer.
+ */
+type MutuallyAssignable<A, B> = [A] extends [B] ? ([B] extends [A] ? true : never) : never;
+const _whereFilterOpDefinitionsAgree: MutuallyAssignable<WhereFilterOp, VirtualTableWhereFilterOp> = true;
+void _whereFilterOpDefinitionsAgree;
+
 export interface FiltersDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;