@rebasepro/admin 0.13.1-canary.gef9608c → 0.14.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/admin",
   "type": "module",
-  "version": "0.13.1-canary.gef9608c",
+  "version": "0.14.0",
   "description": "Rebase CMS — content management views, forms, and routing",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -83,14 +83,14 @@
     "react-dropzone": "^19.1.1",
     "react-use-measure": "^2.1.7",
     "zod": "^4.4.3",
-    "@rebasepro/admin-types": "0.13.1-canary.gef9608c",
-    "@rebasepro/app": "0.13.1-canary.gef9608c",
-    "@rebasepro/forms": "0.13.1-canary.gef9608c",
-    "@rebasepro/common": "0.13.1-canary.gef9608c",
-    "@rebasepro/inference": "0.13.1-canary.gef9608c",
-    "@rebasepro/ui": "0.13.1-canary.gef9608c",
-    "@rebasepro/types": "0.13.1-canary.gef9608c",
-    "@rebasepro/utils": "0.13.1-canary.gef9608c"
+    "@rebasepro/admin-types": "0.14.0",
+    "@rebasepro/app": "0.14.0",
+    "@rebasepro/forms": "0.14.0",
+    "@rebasepro/inference": "0.14.0",
+    "@rebasepro/types": "0.14.0",
+    "@rebasepro/utils": "0.14.0",
+    "@rebasepro/common": "0.14.0",
+    "@rebasepro/ui": "0.14.0"
   },
   "peerDependencies": {
     "react": ">=19.2.7",
@@ -107,6 +107,7 @@
     "@types/react-dom": "^19.2.3",
     "@types/react-measure": "^2.0.12",
     "@vitejs/plugin-react": "^6.0.4",
+    "fast-check": "^4.9.0",
     "jest": "^30.4.2",
     "react-router": "^8.3.0",
     "ts-jest": "^29.4.12",

package/src/collection_editor/serializable_types.ts

@@ -155,6 +155,7 @@ export interface SerializableAdminRelationOptions extends SerializableAdminBaseO
     fixedFilter?: FilterValues<string>;
     includeId?: boolean;
     includeEntityLink?: boolean;
+    renderInForm?: boolean;
 }
 
 /** JSON-serializable version of `AdminArrayOptions`. */

package/src/collection_editor/ui/collection_editor/AICollectionGeneratorPopover.tsx

@@ -1,5 +1,5 @@
 
-import { AIIcon } from "@rebasepro/app";
+import { AIIcon, useTranslation } from "@rebasepro/app";
 import { useCollectionRegistryController } from "../../_cms_internals";
 import React, { useState } from "react";
 import { useSafeSnackbarController } from "../../useSafeSnackbarController";
@@ -70,6 +70,7 @@ export function AICollectionGeneratorPopover({
     showLabel = true,
     onAnalyticsEvent
 }: AICollectionGeneratorPopoverProps) {
+    const { t } = useTranslation();
     const [menuOpen, setMenuOpen] = useState(false);
     const [prompt, setPrompt] = useState("");
     const [loading, setLoading] = useState(false);
@@ -204,8 +205,8 @@ export function AICollectionGeneratorPopover({
 
                 <Typography variant="caption" color="secondary">
                     {existingCollection
-                        ? "Describe the changes you want to make to this collection."
-                        : "Describe the collection you want to create."
+                        ? t("describe_changes_to_make")
+                        : t("describe_collection_to_create")
                     }
                 </Typography>
 
@@ -213,6 +214,10 @@ export function AICollectionGeneratorPopover({
                     size="small"
                     multiline
                     autoFocus
+                    aria-label={existingCollection
+                        ? t("describe_changes_to_make")
+                        : t("describe_collection_to_create")
+                    }
                     className="w-full text-text-primary dark:text-text-primary-dark"
                     value={prompt}
                     onChange={(e) => setPrompt(e.target.value)}

package/src/collection_editor/ui/collection_editor/CollectionDetailsForm.tsx

@@ -2,7 +2,7 @@
 import { IconForView } from "@rebasepro/app";
 import { FieldCaption } from "../../_cms_internals";
 import React, { useMemo, useState } from "react";
-import { useAuthController, useCustomizationController } from "@rebasepro/app";
+import { useAuthController, useCustomizationController, useTranslation } from "@rebasepro/app";
 import { getFieldConfig, PropertyConfigBadge, SearchIconsView } from "../../_cms_internals";
 import { Property } from "@rebasepro/types";
 import {
@@ -372,10 +372,13 @@ function DefaultDatabaseField({
     onDatabaseIdUpdate
 }: { databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }) {
 
-    return <Tooltip title={"Database ID"}
+    const { t } = useTranslation();
+
+    return <Tooltip title={t("database_id")}
         side={"top"}
         align={"start"}>
         <TextField size={"small"}
+            aria-label={t("database_id")}
             invisible={true}
             inputClassName={"text-end"}
             value={databaseId ?? ""}

package/src/collection_editor/ui/collection_editor/CollectionJsonImportDialog.tsx

@@ -110,6 +110,7 @@ export function CollectionJsonImportDialog({
                 <TextField
                     multiline
                     minRows={12}
+                    aria-label="Collection JSON"
                     value={jsonValue}
                     onChange={handleJsonChange}
                     placeholder={EXAMPLE_JSON}

package/src/collection_editor/ui/collection_editor/CollectionRLSTab.tsx

@@ -40,7 +40,7 @@ import {
 } from "@rebasepro/ui";
 import { useFormex } from "@rebasepro/forms";
 import { useCollectionsConfigController } from "../../useCollectionsConfigController";
-import { useRebaseContext } from "@rebasepro/app";
+import { useRebaseContext, useTranslation } from "@rebasepro/app";
 import type { AdminCollection } from "@rebasepro/admin-types";
 import type { PostgresPolicy, SecurityOperation, SecurityRule } from "@rebasepro/types";
 
@@ -394,6 +394,7 @@ function InlinePolicyEditor({
     onSave: (policyData: Partial<PostgresPolicy>) => void;
     onCancel: () => void;
 }) {
+    const { t } = useTranslation();
     const [name, setName] = useState(policy?.policyname || "");
     const [behavior, setBehavior] = useState<"PERMISSIVE" | "RESTRICTIVE">(policy?.permissive || "PERMISSIVE");
     const [command, setCommand] = useState<PolicyCommand>((policy?.cmd as PolicyCommand) || "ALL");
@@ -441,8 +442,8 @@ function InlinePolicyEditor({
                 <Paper className={cls("p-4 md:p-6 flex flex-col gap-6 bg-white dark:bg-surface-800 border-none sm:border-solid rounded-none sm:rounded-xl", defaultBorderMixin)}>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div className="flex flex-col gap-1.5">
-                            <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">Policy Name</Typography>
-                            <TextField value={name} onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setName(e.target.value)} placeholder="e.g. allow_read_all"/>
+                            <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">{t("studio_policy_name")}</Typography>
+                            <TextField aria-label={t("studio_policy_name")} value={name} onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setName(e.target.value)} placeholder="e.g. allow_read_all"/>
                         </div>
                         <div className="flex flex-col gap-1.5">
                             <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">Behavior</Typography>
@@ -484,7 +485,7 @@ function InlinePolicyEditor({
                             </Typography>
                         )}
                         <div className="flex gap-2 items-center">
-                            <TextField size="small" value={customRole}
+                            <TextField size="small" aria-label="Add a custom role" value={customRole}
                                 onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setCustomRole(e.target.value)}
                                 onKeyDown={(e: React.KeyboardEvent) => {
                                     if (e.key === "Enter") {
@@ -501,14 +502,14 @@ function InlinePolicyEditor({
                     </div>
                     {command !== "INSERT" && (
                         <div className="flex flex-col gap-1.5">
-                            <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">USING expression</Typography>
-                            <TextField value={usingExpr} onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setUsingExpr(e.target.value)} placeholder="e.g. auth.uid() = uid"/>
+                            <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">{t("studio_policy_using_expr")}</Typography>
+                            <TextField aria-label={t("studio_policy_using_expr")} value={usingExpr} onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setUsingExpr(e.target.value)} placeholder="e.g. auth.uid() = uid"/>
                         </div>
                     )}
                     {showCheck && (
                         <div className="flex flex-col gap-1.5">
-                            <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">WITH CHECK expression</Typography>
-                            <TextField value={checkExpr} onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setCheckExpr(e.target.value)} placeholder="e.g. auth.uid() = uid"/>
+                            <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">{t("studio_policy_check_expr")}</Typography>
+                            <TextField aria-label={t("studio_policy_check_expr")} value={checkExpr} onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setCheckExpr(e.target.value)} placeholder="e.g. auth.uid() = uid"/>
                         </div>
                     )}
                 </Paper>

package/src/collection_editor/ui/collection_editor/CollectionsStudioView.tsx

@@ -17,6 +17,7 @@ import { CollectionsConfigController } from "../../types/config_controller";
 import { CollectionStudioView } from "./CollectionStudioView";
 import type { CollectionEditorExtensionProps } from "../../extensibility_types";
 import type { AdminCollection } from "@rebasepro/admin-types";
+import { readStoredString, writeStoredString } from "@rebasepro/utils";
 
 export interface CollectionsStudioViewProps extends CollectionEditorExtensionProps {
     configController: CollectionsConfigController;
@@ -77,21 +78,18 @@ export function CollectionsStudioView({
     const collections = collectionsProp ?? configController.collections ?? [];
 
     // ── Sidebar sizing ──────────────────────────────────────────────────
+    // Checked, not just parsed: `parseFloat` answers NaN for anything it cannot
+    // read, and a NaN pane size lays the sidebar out to nothing — with the bad
+    // value still in storage on reload. `SplitListView.getSavedPanelSize` is the
+    // same read, done this way.
     const [sidebarSize, setSidebarSize] = useState(() => {
-        try {
-            const saved = localStorage.getItem("rebase_collections_editor_sidebar_size");
-            return saved !== null ? parseFloat(saved) : 25;
-        } catch (e) {
-            return 25;
-        }
+        const saved = readStoredString("rebase_collections_editor_sidebar_size");
+        const parsed = saved === null ? NaN : parseFloat(saved);
+        return Number.isFinite(parsed) && parsed > 0 && parsed < 100 ? parsed : 25;
     });
 
     useEffect(() => {
-        try {
-            localStorage.setItem("rebase_collections_editor_sidebar_size", sidebarSize.toString());
-        } catch (e) {
-            // ignore local storage error
-        }
+        writeStoredString("rebase_collections_editor_sidebar_size", sidebarSize.toString());
     }, [sidebarSize]);
 
     return (

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

@@ -1,5 +1,5 @@
 
-import { IconForView } from "@rebasepro/app";
+import { IconForView, useTranslation } from "@rebasepro/app";
 import { FieldCaption } from "../../_cms_internals";
 import React, { useState } from "react";
 
@@ -271,10 +271,13 @@ function DefaultDatabaseField({
     onDatabaseIdUpdate
 }: { databaseId?: string, disabled?: boolean, onDatabaseIdUpdate: (databaseId: string) => void }) {
 
-    return <Tooltip title={"Database ID"}
+    const { t } = useTranslation();
+
+    return <Tooltip title={t("database_id")}
         side={"top"}
         align={"start"}>
         <TextField size={"small"}
+            aria-label={t("database_id")}
             invisible={true}
             inputClassName={"text-end"}
             disabled={disabled}

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

@@ -111,7 +111,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
                     position={"start"}
                     size={"medium"}
                     label={t("spread_children_as_columns")}
-                    onValueChange={(v) => setFieldValue("ui.spreadChildren", v)}
+                    onValueChange={(v) => setFieldValue("admin.spreadChildren", v)}
                     value={values.admin?.spreadChildren ?? false}
                 />
                 <FieldCaption>

package/src/collection_editor/ui/collection_editor/properties/advanced/AdvancedPropertyValidation.tsx

@@ -7,8 +7,11 @@ export function AdvancedPropertyValidation({ disabled }: {
     disabled: boolean
 }) {
 
-    const hideFromCollection = "ui.hideFromCollection";
-    const readOnly = "ui.readOnly";
+    // `ui` was renamed to `admin` in 0.11. Nothing reads `ui.*` — the toggles did
+    // nothing — and the boot validator treats the old name as a removed key, so a
+    // save through here left a project that would not start.
+    const hideFromCollection = "admin.hideFromCollection";
+    const readOnly = "admin.readOnly";
 
     return (
 

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

@@ -302,6 +302,7 @@ function ConditionValueInput({
                 type="number"
                 size="small"
                 disabled={disabled}
+                aria-label="Condition value"
                 placeholder="Value"
                 className="flex-1 min-w-[80px]"
                 onChange={(e) => onChange(e.target.value)}

package/src/collection_editor/useJsonCollectionsConfigController.tsx

@@ -64,6 +64,24 @@ export function useJsonCollectionsConfigController({
     const storeRef = useRef(store);
     storeRef.current = store;
 
+    /**
+     * The current collections, readable outside a state updater.
+     *
+     * Three mutators used to compute their new value inside
+     * `setCollections(prev => …)` and persist from in there, which cost them
+     * both halves of a save: the promise they returned resolved before the
+     * store had answered, so a failed write reached the caller as a success,
+     * and a `setState` updater must be pure — under `StrictMode` React invokes
+     * it twice, so every one of those saves wrote to the store twice in
+     * development. Reading `prev` from a ref lets them do what
+     * `updatePropertiesOrder` already did: compute, set, then await.
+     */
+    const collectionsRef = useRef<AdminCollection[]>([]);
+    const applyCollections = useCallback((next: AdminCollection[]) => {
+        collectionsRef.current = next;
+        setCollections(next);
+    }, []);
+
     // ── Load on mount ─────────────────────────────────────────────────
     useEffect(() => {
         if (!autoLoad) return;
@@ -78,7 +96,7 @@ export function useJsonCollectionsConfigController({
                 if (cancelled) return;
                 // Deserialized as a set: a relation's target is a slug, and a slug only
                 // resolves against the other collections it arrived with.
-                setCollections(fromSerializableCollectionConfigs(serialized));
+                applyCollections(fromSerializableCollectionConfigs(serialized));
                 setNavigationEntries(navEntries);
             } catch (e) {
                 console.error("useJsonCollectionsConfigController: failed to load collections", e);
@@ -88,7 +106,10 @@ export function useJsonCollectionsConfigController({
         })();
 
         return () => { cancelled = true; };
-    }, [autoLoad]);
+        // `applyCollections` is `useCallback(…, [])`, so naming it here cannot
+        // re-run the mount effect — it is listed because a stable identity is a
+        // fact about today's code, not a reason to leave a dependency out.
+    }, [autoLoad, applyCollections]);
 
     // ── Helpers ────────────────────────────────────────────────────────
 
@@ -116,49 +137,44 @@ export function useJsonCollectionsConfigController({
     ) => {
         const collection = collectionData as AdminCollection;
         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 prev = collectionsRef.current;
+        const idx = prev.findIndex(c => c.slug === id);
+        if (idx >= 0) {
+            const next = [...prev];
+            next[idx] = collection;
+            applyCollections(next);
+        } else {
+            applyCollections([...prev, collection]);
+        }
+    }, [persistCollection, applyCollections]);
 
     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 AdminCollection;
-            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 prev = collectionsRef.current;
+        const lookupId = previousId ?? id;
+        const idx = prev.findIndex(c => c.slug === lookupId);
+        if (idx < 0) return;
+
+        const merged = { ...prev[idx], ...collectionData } as AdminCollection;
+        const next = [...prev];
+        next[idx] = merged;
+        applyCollections(next);
+
+        await persistCollection(merged);
+
+        // If the slug changed, clean up the old entry in the store. After the
+        // save, not beside it: dropping the old key first and then failing to
+        // write the new one loses the collection outright.
+        if (previousId && previousId !== id) {
+            await storeRef.current.delete(previousId);
+        }
+    }, [persistCollection, applyCollections]);
 
     const deleteCollection = useCallback(async ({ id }: DeleteCollectionParams) => {
         await storeRef.current.delete(id);
-        setCollections(prev => prev.filter(c => c.slug !== id));
-    }, []);
+        applyCollections(collectionsRef.current.filter(c => c.slug !== id));
+    }, [applyCollections]);
 
     const saveProperty = useCallback(async ({
         path,
@@ -166,56 +182,48 @@ export function useJsonCollectionsConfigController({
         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,
-            } as EngineProperties;
-            if (newPropertiesOrder) {
-                collection.propertiesOrder = newPropertiesOrder as typeof collection.propertiesOrder;
-            }
-
-            const next = [...prev];
-            next[idx] = collection as AdminCollection;
+        const prev = collectionsRef.current;
+        const idx = prev.findIndex(c => c.slug === path);
+        if (idx < 0) return;
+
+        const collection = { ...prev[idx] };
+        collection.properties = {
+            ...collection.properties,
+            [propertyKey]: property,
+        } as EngineProperties;
+        if (newPropertiesOrder) {
+            collection.propertiesOrder = newPropertiesOrder as typeof collection.propertiesOrder;
+        }
 
-            persistCollection(next[idx]).catch(e =>
-                console.error("useJsonCollectionsConfigController: failed to save property", e)
-            );
+        const next = [...prev];
+        next[idx] = collection as AdminCollection;
+        applyCollections(next);
 
-            return next;
-        });
-    }, [persistCollection]);
+        await persistCollection(next[idx]);
+    }, [persistCollection, applyCollections]);
 
     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 AdminCollection;
+        const prev = collectionsRef.current;
+        const idx = prev.findIndex(c => c.slug === path);
+        if (idx < 0) return;
+
+        const collection = { ...prev[idx] };
+        const { [propertyKey]: _removed, ...remaining } = collection.properties;
+        collection.properties = remaining;
+        if (newPropertiesOrder) {
+            collection.propertiesOrder = newPropertiesOrder as typeof collection.propertiesOrder;
+        }
 
-            persistCollection(next[idx]).catch(e =>
-                console.error("useJsonCollectionsConfigController: failed to delete property", e)
-            );
+        const next = [...prev];
+        next[idx] = collection as AdminCollection;
+        applyCollections(next);
 
-            return next;
-        });
-    }, [persistCollection]);
+        await persistCollection(next[idx]);
+    }, [persistCollection, applyCollections]);
 
     const updatePropertiesOrder = useCallback(async ({
         collection,
@@ -226,16 +234,16 @@ export function useJsonCollectionsConfigController({
             propertiesOrder: newPropertiesOrder,
         } as AdminCollection;
 
-        setCollections(prev => {
-            const idx = prev.findIndex(c => c.slug === collection.slug);
-            if (idx < 0) return prev;
+        const prev = collectionsRef.current;
+        const idx = prev.findIndex(c => c.slug === collection.slug);
+        if (idx >= 0) {
             const next = [...prev];
             next[idx] = updated;
-            return next;
-        });
+            applyCollections(next);
+        }
 
         await persistCollection(updated);
-    }, [persistCollection]);
+    }, [persistCollection, applyCollections]);
 
     const updateKanbanColumnsOrder = useCallback(async ({
         collection,

package/src/collection_editor/useLocalCollectionsConfigController.tsx

@@ -202,13 +202,18 @@ collectionData });
             await request("/collection/delete", { collectionId: id });
         },
 
+        // The follow-up write carries exactly one key, and `partial` is what says
+        // so. Read as a whole-collection save it deletes everything it does not
+        // mention — `securityRules` first, which then falls back to the
+        // directory default and widens who can read the collection.
         saveProperty: async ({ path, propertyKey, property, newPropertiesOrder }: SavePropertyParams) => {
             await request("/property/save", { collectionId: path,
 propertyKey,
 propertyConfig: property });
             if (newPropertiesOrder) {
                 await request("/collection/save", { collectionId: path,
-collectionData: { propertiesOrder: newPropertiesOrder } });
+collectionData: { propertiesOrder: newPropertiesOrder },
+partial: true });
             }
         },
         deleteProperty: async ({ path, propertyKey, newPropertiesOrder }: DeletePropertyParams) => {
@@ -216,14 +221,16 @@ collectionData: { propertiesOrder: newPropertiesOrder } });
 propertyKey });
             if (newPropertiesOrder) {
                 await request("/collection/save", { collectionId: path,
-collectionData: { propertiesOrder: newPropertiesOrder } });
+collectionData: { propertiesOrder: newPropertiesOrder },
+partial: true });
             }
         },
 
         updatePropertiesOrder: async ({ collection, fullPath, newPropertiesOrder }: UpdatePropertiesOrderParams) => {
             const collectionId = (collection as AdminCollection & { id?: string }).id || fullPath.split("/").pop();
             await request("/collection/save", { collectionId,
-collectionData: { propertiesOrder: newPropertiesOrder } });
+collectionData: { propertiesOrder: newPropertiesOrder },
+partial: true });
         },
         updateKanbanColumnsOrder: async () => {
             // Kanban order mapping logic can be added later if needed natively.

package/src/components/ClearFilterSortButton.tsx

@@ -1,13 +1,20 @@
-import { Button, FilterXIcon, iconSize, Tooltip } from "@rebasepro/ui";
+import { FilterXIcon, iconSize, IconButton, Tooltip } from "@rebasepro/ui";
 import { EntityTableController } from "@rebasepro/admin-types";
 import { useTranslation } from "@rebasepro/app";
 
 export function ClearFilterSortButton({
     tableController,
-    enabled
+    enabled,
+    compact
 }: {
     enabled: boolean;
-    tableController: EntityTableController
+    tableController: EntityTableController;
+    /**
+     * Toolbar showing icon-only controls (split view, or a layout too narrow
+     * for the filters button's label). Only decides the icon size, which
+     * follows that button — see `CollectionViewStartActions`.
+     */
+    compact?: boolean;
 }) {
     const { t } = useTranslation();
 
@@ -29,17 +36,19 @@ export function ClearFilterSortButton({
         }
         return (
             <Tooltip title={label}>
-                <Button
+                {/* An `IconButton`, like every other icon-only control in this
+                    toolbar. As a `Button` it was a rounded-md box with text
+                    padding sitting between two circular icon buttons. */}
+                <IconButton
                     size={"small"}
-                    variant={"text"}
                     aria-label={label}
                     onClick={() => {
                         tableController.clearFilter?.();
                         tableController.setSortBy?.(undefined);
                     }}
                 >
-                    <FilterXIcon size={iconSize.small}/>
-                </Button>
+                    <FilterXIcon size={compact ? iconSize.smallest : iconSize.small}/>
+                </IconButton>
             </Tooltip>
         );
     }

package/src/components/CollectionTableBinding/CollectionTableBinding.tsx

@@ -17,7 +17,7 @@ import { propertiesToColumns } from "./column_utils";
 import { ErrorView } from "@rebasepro/app";
 import { SelectableTable } from "../SelectableTable/SelectableTable";
 import { cls } from "@rebasepro/ui";
-import { getRowHeight } from "@rebasepro/app";
+import { getRowHeight, isDisabled } from "@rebasepro/app";
 import { getValueInPath } from "@rebasepro/utils";
 
 /**
@@ -147,7 +147,7 @@ export const CollectionTableBinding = function CollectionTableBinding<M extends
             propertyKey,
             entity
         }) ?? columnCustom?.resolvedProperty;
-        if (!property?.admin?.disabled) {
+        if (!property || !isDisabled(property)) {
             disabled = false;
         }
 

package/src/components/CollectionTableBinding/PropertyTableCell.tsx

@@ -18,7 +18,7 @@ import { EntityTableCellActions } from "./internal/EntityTableCellActions";
 import { useSelectableTableController } from "../SelectableTable/SelectableTableContext";
 import { useClearRestoreValue } from "../../form/useClearRestoreValue";
 import { getRowHeight } from "@rebasepro/app";
-import { isReadOnly } from "@rebasepro/app";
+import { isDisabled, isReadOnly } from "@rebasepro/app";
 import { TableRelationField } from "./fields/TableRelationField";
 import { TableRelationSelectorField } from "./fields/TableRelationSelectorField";
 
@@ -95,7 +95,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
         const customPreview = Boolean(property.admin?.Preview);
         const readOnlyProperty = isReadOnly(property);
         const disabledTooltip: string | undefined = typeof property.admin?.disabled === "object" ? property.admin?.disabled.disabledMessage : undefined;
-        const disabled = readonly || disabledProp || Boolean(property.admin?.disabled);
+        const disabled = readonly || disabledProp || isDisabled(property);
 
         const validation = useMemo(() => mapPropertyToZod({
             property,