@rebasepro/admin 0.3.0 → 0.5.0

package/src/components/SelectableTable/SelectableTable.tsx

@@ -1,8 +1,8 @@
 import { createSelectionStore } from "./SelectionStore";
 import type { Property } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { CollectionSize, Entity, EntityTableController, FilterValues, SelectedCellProps } from "@rebasepro/types";
-import { CellRendererParams, VirtualTable, VirtualTableColumn } from "@rebasepro/ui";
+import { CollectionSize, Entity, EntityRelation, EntityTableController, FilterValues, SelectedCellProps } from "@rebasepro/types";
+import { CellRendererParams, VirtualTable, VirtualTableColumn, VirtualTableFilterValues, OnRowClickParams, VirtualTableWhereFilterOp } from "@rebasepro/ui";
 import { enumToObjectEntries } from "@rebasepro/common";
 import { DEFAULT_PAGE_SIZE, EntityCollectionTableController, OnCellValueChange, OnColumnResizeParams } from "@rebasepro/core";
 import { FilterFormFieldProps } from "@rebasepro/ui";
@@ -20,7 +20,7 @@ export type SelectableTableProps<M extends Record<string, unknown>> = {
     /**
      * Callback when a cell value changes.
      */
-    onValueChange?: OnCellValueChange<any, M>;
+    onValueChange?: OnCellValueChange<unknown, M>;
 
     columns: VirtualTableColumn[];
 
@@ -100,7 +100,7 @@ export type SelectableTableProps<M extends Record<string, unknown>> = {
      * bust the cell memo comparator, triggering re-render of cells
      * even when rowData hasn't changed.
      */
-    extraData?: Record<string, any>;
+    extraData?: unknown;
 }
 
 /**
@@ -184,12 +184,10 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
         setItemCount?.(pageSize);
     }, [pageSize]);
 
-    const onRowClick = useCallback(({ rowData }: {
-        rowData: Entity<M>
-    }) => {
+    const onRowClick = useCallback(({ rowData }: OnRowClickParams<Record<string, unknown>>) => {
         if (inlineEditing)
             return;
-        return onEntityClick && onEntityClick(rowData);
+        return onEntityClick && onEntityClick(rowData as unknown as Entity<M>);
     }, [onEntityClick, inlineEditing]);
 
     const select = useCallback((cell?: SelectedCellProps<M>) => {
@@ -223,18 +221,22 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
         };
     }, [unselect]);
 
-    const onFilterUpdate = useCallback((updatedFilterValues?: FilterValues<any>) => {
-        setFilterValues?.({ ...updatedFilterValues,
-...fixedFilter } as FilterValues<any>);
-    }, [fixedFilter]);
+    const onFilterUpdate = useCallback((updatedFilterValues?: VirtualTableFilterValues<string>) => {
+        if (setFilterValues) {
+            setFilterValues({
+                ...updatedFilterValues,
+                ...fixedFilter
+            } as FilterValues<Extract<keyof M, string> | (string & {})>);
+        }
+    }, [fixedFilter, setFilterValues]);
 
     const contextValue = useMemo(() => ({
-        setPopupCell: setPopupCell as ((cell?: SelectedCellProps<M>) => void),
         select,
         onValueChange,
         size: size ?? "m",
-        selectionStore
-    } as EntityCollectionTableController<any>), [setPopupCell, select, onValueChange, size, selectionStore]);
+        selectionStore,
+        setPopupCell
+    } as unknown as EntityCollectionTableController<Record<string, unknown>>), [setPopupCell, select, onValueChange, size, selectionStore]);
 
     return (
         <SelectableTableContext.Provider
@@ -243,11 +245,11 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
                 ref={ref}>
 
                 <VirtualTable
-                    data={data as any}
+                    data={data as unknown as Record<string, unknown>[]}
                     columns={columns}
                     // @ts-ignore
                     cellRenderer={cellRenderer}
-                    onRowClick={inlineEditing ? undefined : (onEntityClick ? (onRowClick as any) : undefined)}
+                    onRowClick={inlineEditing ? undefined : (onEntityClick ? onRowClick : undefined)}
                     onEndReached={loadNextPage}
                     onResetPagination={resetPagination}
                     error={dataLoadingError}
@@ -262,9 +264,9 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
                     initialScroll={initialScroll}
                     onScroll={onScroll}
                     checkFilterCombination={checkFilterCombination}
-                    createFilterField={filterable ? (createFilterField as any) : undefined}
-                    rowClassName={useCallback((entity: any) => {
-                        return highlightedRow?.(entity) ? "bg-surface-accent-50 dark:!bg-surface-accent-900" : "";
+                    createFilterField={filterable ? createFilterField : undefined}
+                    rowClassName={useCallback((entity: Record<string, unknown>) => {
+                        return highlightedRow?.(entity as unknown as Entity<M>) ? "bg-surface-accent-50 dark:!bg-surface-accent-900" : "";
                     }, [highlightedRow])}
                     className="grow"
                     emptyComponent={emptyComponent}
@@ -287,7 +289,7 @@ function createFilterField({
     column,
     hidden,
     setHidden
-}: FilterFormFieldProps<any>): React.ReactNode {
+}: FilterFormFieldProps<unknown>): React.ReactNode {
 
     if (!column.custom) {
         return null;
@@ -313,7 +315,7 @@ function createFilterField({
             hidden={hidden}
             setHidden={setHidden}/>;
     } else if (baseProperty.type === "relation" && baseProperty.relation) {
-        return <RelationFilterField value={filterValue as any}
+        return <RelationFilterField value={filterValue as [VirtualTableWhereFilterOp, EntityRelation | EntityRelation[] | null]}
             setValue={setFilterValue}
             name={id as string}
             relation={baseProperty.relation}

package/src/components/SelectableTable/SelectableTableContext.tsx

@@ -3,4 +3,5 @@ import { EntityCollectionTableController } from "@rebasepro/core";
 
 export const SelectableTableContext = React.createContext<EntityCollectionTableController<Record<string, unknown>>>(null! as EntityCollectionTableController<Record<string, unknown>>);
 
-export const useSelectableTableController = () => useContext<EntityCollectionTableController<any>>(SelectableTableContext);
+export const useSelectableTableController = <M extends Record<string, unknown> = Record<string, unknown>>() =>
+    useContext(SelectableTableContext) as unknown as EntityCollectionTableController<M>;

package/src/components/SelectableTable/SelectionStore.ts

@@ -15,10 +15,10 @@ import { SelectedCellProps } from "@rebasepro/types";
  * derivation actually changed will re-render.
  */
 export function createSelectionStore() {
-    let selectedCell: SelectedCellProps<any> | undefined = undefined;
+    let selectedCell: SelectedCellProps | undefined = undefined;
     const listeners = new Set<() => void>();
 
-    function getSnapshot(): SelectedCellProps<any> | undefined {
+    function getSnapshot(): SelectedCellProps | undefined {
         return selectedCell;
     }
 
@@ -27,7 +27,7 @@ export function createSelectionStore() {
         return () => listeners.delete(listener);
     }
 
-    function select(cell: SelectedCellProps<any> | undefined) {
+    function select(cell: SelectedCellProps | undefined) {
         selectedCell = cell;
         listeners.forEach(l => l());
     }
@@ -43,7 +43,7 @@ export type SelectionStore = ReturnType<typeof createSelectionStore>;
  * `selected` boolean actually changes (not on every store update).
  */
 export function useCellSelected(
-    store: { getSnapshot: () => SelectedCellProps<any> | undefined; subscribe: (listener: () => void) => () => void },
+    store: { getSnapshot: () => SelectedCellProps | undefined; subscribe: (listener: () => void) => () => void },
     propertyKey: string,
     entityPath: string,
     entityId: string | number

package/src/components/admin/index.ts

@@ -1,3 +1 @@
-export * from "./UsersView";
-export * from "./RolesView";
-export * from "./RoleChip";
+export * from "./CreationResultDialog";

package/src/components/index.ts

@@ -32,9 +32,7 @@ export * from "./field_configs";
 
 export * from "./SideEntityProvider";
 export * from "./AdminModeSyncer";
-// Admin views are lazy-loaded by RebaseRouteDefs and useResolvedViews
-// export * from "./admin/RolesView";
-// export * from "./admin/UsersView";
+// Admin views: only CreationResultDialog remains (used by resetPasswordAction)
 export * from "./app/AppBar";
 export * from "./app/Drawer";
 export * from "./app/Scaffold";
@@ -55,3 +53,5 @@ export * from "./RebaseAuthGate";
 export * from "./RebaseNavigation";
 export * from "./RebaseLayout";
 export * from "./RebaseRouteDefs";
+
+export * from "./CollectionPanel";

package/src/data_export/export/BasicExportAction.tsx

@@ -1,6 +1,7 @@
 
 import React, { useCallback } from "react";
 
+import { useTranslation } from "@rebasepro/core";
 import { Entity, Properties } from "@rebasepro/types";
 import {
     BooleanSwitchWithLabel,
@@ -31,6 +32,7 @@ export function BasicExportAction({
     propertiesOrder
 }: BasicExportActionProps) {
 
+    const { t } = useTranslation();
     const dateRef = React.useRef<Date>(new Date());
     const [flattenArrays, setFlattenArrays] = React.useState<boolean>(true);
     const [exportType, setExportType] = React.useState<"csv" | "json">("csv");
@@ -78,22 +80,22 @@ export function BasicExportAction({
             onOpenChange={setOpen}
             maxWidth={"xl"}>
 
-            <DialogTitle variant={"h6"}>Export data</DialogTitle>
+            <DialogTitle variant={"h6"}>{t("export_data")}</DialogTitle>
 
             <DialogContent className={"flex flex-col gap-4 my-4"}>
 
-                <div>DownloadIcon the the content of this table as a CSV</div>
+                <div>{t("download_table_csv")}</div>
 
                 <div className={"flex flex-row gap-4"}>
                     <div className={"p-4 flex flex-col"}>
                         <RadioGroup value={exportType} onValueChange={(v) => setExportType(v as "csv" | "json")}>
                             <div className="flex items-center gap-2">
                                 <RadioGroupItem value="csv" id="radio-csv"/>
-                                <Label htmlFor="radio-csv">CSV</Label>
+                                <Label htmlFor="radio-csv">{t("csv")}</Label>
                             </div>
                             <div className="flex items-center gap-2">
                                 <RadioGroupItem value="json" id="radio-json"/>
-                                <Label htmlFor="radio-json">JSON</Label>
+                                <Label htmlFor="radio-json">{t("json")}</Label>
                             </div>
                         </RadioGroup>
                     </div>
@@ -102,11 +104,11 @@ export function BasicExportAction({
                         <RadioGroup value={dateExportType} onValueChange={(v) => setDateExportType(v as "timestamp" | "string")}>
                             <div className="flex items-center gap-2">
                                 <RadioGroupItem value="timestamp" id="radio-timestamp"/>
-                                <Label htmlFor="radio-timestamp">Dates as timestamps ({dateRef.current.getTime()})</Label>
+                                <Label htmlFor="radio-timestamp">{t("dates_as_timestamps")} ({dateRef.current.getTime()})</Label>
                             </div>
                             <div className="flex items-center gap-2">
                                 <RadioGroupItem value="string" id="radio-string"/>
-                                <Label htmlFor="radio-string">Dates as strings ({dateRef.current.toISOString()})</Label>
+                                <Label htmlFor="radio-string">{t("dates_as_strings")} ({dateRef.current.toISOString()})</Label>
                             </div>
                         </RadioGroup>
                     </div>
@@ -117,7 +119,7 @@ export function BasicExportAction({
                     disabled={exportType !== "csv"}
                     value={flattenArrays}
                     onValueChange={setFlattenArrays}
-                    label={"Flatten arrays"}/>
+                    label={t("flatten_arrays")}/>
 
             </DialogContent>
 
@@ -125,11 +127,11 @@ export function BasicExportAction({
 
                 <Button onClick={handleClose}
                     variant={"text"}>
-                    Cancel
+                    {t("cancel")}
                 </Button>
 
                 <Button onClick={onOkClicked}>
-                    DownloadIcon
+                    {t("download")}
                 </Button>
 
             </DialogActions>

package/src/data_export/export/ExportCollectionAction.tsx

@@ -4,7 +4,8 @@ import React, { useCallback } from "react";
 import {
     useAuthController,
     useCustomizationController,
-    useData
+    useData,
+    useTranslation
 } from "@rebasepro/core";
 import { useCMSContext } from "../../hooks";
 import { CollectionActionsProps, Entity, EntityCollection, ExportConfig, RebaseContext, User } from "@rebasepro/types";
@@ -43,6 +44,8 @@ export function ExportCollectionAction<M extends Record<string, unknown>, USER e
     onAnalyticsEvent?: (event: string, params?: any) => void;
 }) {
 
+    const { t } = useTranslation();
+
     const exportConfig = typeof collection.exportable === "object" ? collection.exportable : undefined;
 
     const dateRef = React.useRef<Date>(new Date());
@@ -184,17 +187,16 @@ export function ExportCollectionAction<M extends Record<string, unknown>, USER e
             onOpenChange={setOpen}
             maxWidth={"xl"}>
 
-            <DialogTitle variant={"h6"}>Export data</DialogTitle>
+            <DialogTitle variant={"h6"}>{t("export_data")}</DialogTitle>
 
             <DialogContent className={"flex flex-col gap-4 my-4"}>
 
-                <div>DownloadIcon the the content of this table as a CSV</div>
+                <div>{t("download_table_csv")}</div>
 
                 {collectionEntitiesCount !== undefined && collectionEntitiesCount > DOCS_LIMIT &&
                     <Alert color={"warning"}>
                         <div>
-                            This collections has a large number
-                            of documents ({collectionEntitiesCount}).
+                            {t("large_number_of_documents", { count: collectionEntitiesCount.toString() })}
                         </div>
                     </Alert>}
 
@@ -203,11 +205,11 @@ export function ExportCollectionAction<M extends Record<string, unknown>, USER e
                         <RadioGroup value={exportType} onValueChange={(v) => setExportType(v as "csv" | "json")}>
                             <div className="flex items-center gap-2">
                                 <RadioGroupItem value="csv" id="radio-csv"/>
-                                <Label htmlFor="radio-csv">CSV</Label>
+                                <Label htmlFor="radio-csv">{t("csv")}</Label>
                             </div>
                             <div className="flex items-center gap-2">
                                 <RadioGroupItem value="json" id="radio-json"/>
-                                <Label htmlFor="radio-json">JSON</Label>
+                                <Label htmlFor="radio-json">{t("json")}</Label>
                             </div>
                         </RadioGroup>
                     </div>
@@ -216,11 +218,11 @@ export function ExportCollectionAction<M extends Record<string, unknown>, USER e
                         <RadioGroup value={dateExportType} onValueChange={(v) => setDateExportType(v as "timestamp" | "string")}>
                             <div className="flex items-center gap-2">
                                 <RadioGroupItem value="timestamp" id="radio-timestamp"/>
-                                <Label htmlFor="radio-timestamp">Dates as timestamps ({dateRef.current.getTime()})</Label>
+                                <Label htmlFor="radio-timestamp">{t("dates_as_timestamps")} ({dateRef.current.getTime()})</Label>
                             </div>
                             <div className="flex items-center gap-2">
                                 <RadioGroupItem value="string" id="radio-string"/>
-                                <Label htmlFor="radio-string">Dates as strings ({dateRef.current.toISOString()})</Label>
+                                <Label htmlFor="radio-string">{t("dates_as_strings")} ({dateRef.current.toISOString()})</Label>
                             </div>
                         </RadioGroup>
                     </div>
@@ -231,13 +233,13 @@ export function ExportCollectionAction<M extends Record<string, unknown>, USER e
                     disabled={exportType !== "csv"}
                     value={flattenArrays}
                     onValueChange={setFlattenArrays}
-                    label={"Flatten arrays"}/>
+                    label={t("flatten_arrays")}/>
 
                 <BooleanSwitchWithLabel
                     size={"small"}
                     value={includeUndefinedValues}
                     onValueChange={setIncludeUndefinedValues}
-                    label={"Include undefined values"}/>
+                    label={t("include_undefined_values")}/>
 
                 {!canExport && notAllowedView}
 
@@ -249,12 +251,12 @@ export function ExportCollectionAction<M extends Record<string, unknown>, USER e
 
                 <Button onClick={handleClose}
                     variant={"text"}>
-                    Cancel
+                    {t("cancel")}
                 </Button>
 
                 <Button onClick={onOkClicked}
                     disabled={dataLoading || !canExport}>
-                    DownloadIcon
+                    {t("download")}
                 </Button>
 
             </DialogActions>

package/src/editor/editor.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React, { useEffect, useState, useRef, useMemo } from "react";
-import { EditorState } from "prosemirror-state";
+import { EditorState, Selection } from "prosemirror-state";
 import { cls, defaultBorderMixin, Separator, useInjectStyles, TextareaAutosize } from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/core";
 import { EditorBubble, ImageBubble, SlashCommandMenu, TableBubble, type JSONContent } from "./components";
@@ -236,7 +236,7 @@ onJsonContentChange };
 
 
   return (
-    <div className="relative min-h-[200px] w-full">
+    <div className="relative min-h-[200px] w-full flex flex-col">
       <button
         type="button"
         onClick={handleToggleMarkdown}
@@ -249,10 +249,23 @@ onJsonContentChange };
       <ProseMirrorContext.Provider value={useMemo(() => ({ state,
 view }), [state, view])}>
 
-        <div style={{ display: isMarkdownMode ? "none" : "block" }}>
+        <div style={{ display: isMarkdownMode ? "none" : "flex" }} className="flex-1 flex flex-col">
           <div
             ref={editorRef}
-            className={cls("relative prose dark:prose-invert", proseClass, "prose-headings:font-title prose-headings:font-normal prose-strong:font-semibold prose-code:font-normal prose-blockquote:font-normal prose-a:font-normal font-default focus:outline-none max-w-full px-12 py-4")}
+            onClick={(e) => {
+              // If the click landed on the wrapper padding (not on the ProseMirror
+              // content), focus the editor and place the cursor at the nearest position.
+              if (view && e.target === e.currentTarget) {
+                view.focus();
+                // Place cursor at end of the document
+                const end = view.state.doc.content.size;
+                const tr = view.state.tr.setSelection(
+                  Selection.near(view.state.doc.resolve(end), -1)
+                );
+                view.dispatch(tr);
+              }
+            }}
+            className={cls("relative prose dark:prose-invert cursor-text flex-1", proseClass, "prose-headings:font-title prose-headings:font-normal prose-strong:font-semibold prose-code:font-normal prose-blockquote:font-normal prose-a:font-normal font-default focus:outline-none max-w-full py-4")}
           />
 
           {view && (
@@ -311,6 +324,9 @@ view }), [state, view])}>
 const cssStyles = `
 .ProseMirror {
     box-shadow: none !important;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    min-height: 100%;
 }
 .ProseMirror .is-editor-empty:first-child::before {
   content: attr(data-placeholder);

package/src/form/EntityForm.tsx

@@ -311,7 +311,7 @@ export function EntityForm<M extends Record<string, unknown>>({
                 }
             }
         },
-        validation: async (values) => {
+        validation: async (values): Promise<Record<string, string>> => {
             if (!validationSchema) return {};
             const result = await validationSchema.safeParseAsync(values);
             if (result.success) return {};
@@ -737,14 +737,14 @@ export function EntityForm<M extends Record<string, unknown>>({
         entity={entity}
         layout={forceActionsAtTheBottom ? "bottom" : "responsive"}
         savingError={savingError}
-        formex={formex as any}
+        formex={formex as FormexController<Record<string, unknown>>}
         disabled={actionsDisabled}
         status={status}
         pluginActions={pluginFormActions ?? []}
         openEntityMode={openEntityMode}
         showDefaultActions={showDefaultActions}
         navigateBack={navigateBack}
-        formContext={formContext as any}
+        formContext={formContext as FormContext<Record<string, unknown>>}
     />;
 
     return (

package/src/form/PropertyFieldBinding.tsx

@@ -219,7 +219,7 @@ function FieldInternal<CustomProps, M extends Record<string, unknown>>
         collection: context.collection,
         propertyKey: propertyKey,
         property: property,
-        Component: Component as any, // Cast component here since it is a generic component type
+        Component: Component as ComponentType<FieldProps<Property, unknown, M>>,
         plugins: plugins
     });
     const UsedComponent: ComponentType<FieldProps<Property, any, any>> = WrappedComponent ?? Component;

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -348,7 +348,7 @@ function MapKeyValueRow<T extends Record<string, unknown>>({
                                         value={arrayValue[index]}
                                         disabled={disabled || !fieldKey}
                                         setValue={(newValue) => {
-                                            const newArrayValue = [...arrayValue] as any[];
+                                            const newArrayValue = [...arrayValue] as unknown[];
                                             newArrayValue[index] = newValue;
                                             setValue({
                                                 ...value,

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -1,4 +1,3 @@
-import type { Properties } from "@rebasepro/types";
 import type { FieldProps, PropertyFieldBindingProps } from "../../types/fields";
 import type { MapProperty } from "@rebasepro/types";
 import React from "react";
@@ -10,8 +9,7 @@ import { getIconForProperty } from "../../util/property_utils";
 import { isHidden, isReadOnly } from "@rebasepro/common";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@rebasepro/ui";
-import { pick } from "@rebasepro/utils";
+import { cls, ExpandablePanel } from "@rebasepro/ui";
 
 /**
  * Field that renders the children property fields
@@ -35,7 +33,6 @@ export function MapFieldBinding({
     onPropertyChange
 }: FieldProps<MapProperty>) {
 
-    const pickOnlySomeKeys = property.pickOnlySomeKeys || false;
     const expanded = property.ui?.expanded === undefined ? true : property.ui?.expanded;
     const minimalistView = minimalistViewProp || property.ui?.minimalistView;
     const { t } = useTranslation();
@@ -44,19 +41,7 @@ export function MapFieldBinding({
         throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
     }
 
-    let mapProperties: Properties;
-    if (pickOnlySomeKeys) {
-        if (value) {
-            mapProperties = pick(property.properties,
-                ...Object.keys(value)
-                    .filter(key => key in property.properties!)
-            ) as Properties;
-        } else {
-            mapProperties = {};
-        }
-    } else {
-        mapProperties = property.properties;
-    }
+    const mapProperties = property.properties;
 
     const mapFormView = <>
         <div
@@ -96,7 +81,7 @@ export function MapFieldBinding({
             }
         </div>
 
-        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
+
 
     </>
         ;
@@ -133,30 +118,3 @@ export function MapFieldBinding({
     );
 }
 
-const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue: (value: Record<string, unknown> | null) => void, value: Record<string, unknown> | undefined) => {
-
-    const keys = Object.keys(properties)
-        .filter((key) => !value || !(key in value));
-
-    const handleAddProperty = (updatedValue: string | string[]) => {
-        setValue({
-            ...value,
-            [updatedValue as string]: null
-        });
-    };
-
-    if (!keys.length) return <></>;
-
-    return <div className={"m-4"}>
-        <InputLabel>Add property</InputLabel>
-        <Select
-            value={""}
-            fullWidth={true}
-            disabled={disabled}
-            onValueChange={handleAddProperty}
-            renderValue={(key) => (properties as Properties)[key].name || key}>
-            {keys.map((key) => <SelectItem key={key}
-                value={key}>{(properties as Properties)[key].name || key}</SelectItem>)}
-        </Select>
-    </div>;
-};

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -32,6 +32,8 @@ export function ReadOnlyFieldBinding({
     // if (!context.entityId)
     //     throw new Error("ReadOnlyFieldBinding: Entity id is null");
 
+    const skipCardWrapper = property.type === "relation" || property.type === "reference";
+
     return (
 
         <>
@@ -45,7 +47,7 @@ export function ReadOnlyFieldBinding({
             }
 
             <div
-                className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
+                className={cls(!skipCardWrapper && paperMixin, "w-full min-h-14 overflow-x-scroll no-scrollbar", !skipCardWrapper && "p-4 md:p-6")}>
 
                 <ErrorBoundary>
                     <PropertyPreview propertyKey={propertyKey}

package/src/hooks/navigation/useBuildNavigationStateController.tsx

@@ -33,7 +33,7 @@ export type BuildNavigationStateProps<EC extends EntityCollection, USER extends
  * NavigationStateController. This is a thin composition of three focused hooks:
  *
  * - useResolvedCollections: resolves collection props and registers with CollectionRegistry
- * - useResolvedViews: resolves view/admin view props and injects Users/Roles views
+ * - useResolvedViews: resolves view/admin view props
  * - useTopLevelNavigation: computes the NavigationResult from resolved data
  *
  * The NavigationStateController type is preserved as a public API.
@@ -87,8 +87,7 @@ export function useBuildNavigationStateController<EC extends EntityCollection, U
         data,
         plugins,
         adminMode,
-        effectiveRoleController,
-        userManagement
+        effectiveRoleController
     });
 
     // Step 3: Compute top-level navigation (pure derived state)

package/src/hooks/navigation/useResolvedCollections.ts

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef, useState, useMemo } from "react";
 
 import { AuthController, CollectionRegistryController, RebaseData, User } from "@rebasepro/types";
 import type { EntityCollectionsBuilder } from "@rebasepro/types";
-import { CollectionRegistry, defaultUsersCollection } from "@rebasepro/common";
+import { CollectionRegistry } from "@rebasepro/common";
 import { UserManagementDelegate } from "@rebasepro/types";
 
 import { resolveCollections } from "./useNavigationResolution";
@@ -95,15 +95,7 @@ export function useResolvedCollections<EC extends EntityCollection, USER extends
 
                 if (cancelled) return;
 
-                // Prepend system defaults; developer collections override via generic dedup.
-                // Map keyed by slug — last-write-wins, so developer collections overwrite defaults.
-                const defaults: EntityCollection[] = [];
-                if (userManagementRef.current) {
-                    defaults.push(defaultUsersCollection);
-                }
-                const deduped = Array.from(
-                    new Map([...defaults, ...resolved].map(c => [c.slug, c])).values()
-                );
+                const deduped = [...resolved];
 
                 // Register with the CollectionRegistry; returns true if changed
                 const changed = collectionRegistryController.collectionRegistryRef.current.registerMultiple(deduped);