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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/admin",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.9.1-canary.0de22e0",
   "description": "Rebase CMS — content management views, forms, and routing",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -18,7 +18,7 @@
   "types": "./dist/index.d.ts",
   "source": "src/index.ts",
   "engines": {
-    "node": ">=14"
+    "node": ">=20"
   },
   "keywords": [
     "rebase",
@@ -38,7 +38,7 @@
       "import": "./dist/index.js"
     },
     "./editor": {
-      "types": "./dist/editor.d.ts",
+      "types": "./dist/editor/index.d.ts",
       "development": "./dist/editor.js",
       "import": "./dist/editor.js"
     },
@@ -83,13 +83,13 @@
     "react-dropzone": "^15.0.0",
     "react-use-measure": "^2.1.7",
     "zod": "^4.4.3",
-    "@rebasepro/common": "0.9.0",
-    "@rebasepro/schema-inference": "0.9.0",
-    "@rebasepro/core": "0.9.0",
-    "@rebasepro/formex": "0.9.0",
-    "@rebasepro/ui": "0.9.0",
-    "@rebasepro/types": "0.9.0",
-    "@rebasepro/utils": "0.9.0"
+    "@rebasepro/common": "0.9.1-canary.0de22e0",
+    "@rebasepro/app": "0.9.1-canary.0de22e0",
+    "@rebasepro/forms": "0.9.1-canary.0de22e0",
+    "@rebasepro/ui": "0.9.1-canary.0de22e0",
+    "@rebasepro/inference": "0.9.1-canary.0de22e0",
+    "@rebasepro/utils": "0.9.1-canary.0de22e0",
+    "@rebasepro/types": "0.9.1-canary.0de22e0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -153,17 +153,12 @@
     ],
     "moduleNameMapper": {
       "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
-      "^@rebasepro/ui$": "<rootDir>/../ui/src/index.ts",
-      "^@rebasepro/core$": "<rootDir>/../core/src/index.ts",
-      "^@rebasepro/common$": "<rootDir>/../common/src/index.ts",
-      "^@rebasepro/types$": "<rootDir>/../types/src/index.ts",
-      "^@rebasepro/formex$": "<rootDir>/../formex/src/index.ts",
-      "^@rebasepro/utils$": "<rootDir>/../utils/src/index.ts"
+      "^@rebasepro/([a-z0-9-]+)$": "<rootDir>/../$1/src/index.ts"
     }
   },
   "scripts": {
     "watch": "vite build --watch",
-    "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json",
+    "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json && node ../../scripts/assert-build-output.mjs",
     "test:lint": "eslint \"src/**\" --quiet",
     "test": "jest --passWithNoTests",
     "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",

package/src/collection_editor/ConfigControllerProvider.tsx

@@ -4,7 +4,7 @@ import { Entity, CollectionConfig, Property, TableMetadata, User } from "@rebase
 import { deepEqual as equal } from "fast-equals";
 
 import { CollectionsConfigController } from "./types/config_controller";
-import { useCustomizationController, useRebaseContext, useAuthController, useSnackbarController } from "@rebasepro/core";
+import { useCustomizationController, useRebaseContext, useAuthController, useSnackbarController } from "@rebasepro/app";
 import { getTableName } from "@rebasepro/common";
 import { useNavigate } from "react-router-dom";
 import { CollectionEditorController } from "./types/collection_editor_controller";

package/src/collection_editor/api/generateCollectionApi.ts

@@ -57,7 +57,7 @@ export interface BuildCollectionGenerationCallbackProps {
     /**
      * Function to get the auth token.
      * This is typically `authController.getAuthToken` from `@rebasepro/client`
-     * (or `@rebasepro/client-firebase` if using Firebase).
+     * (or `@rebasepro/firebase` if using Firebase).
      */
     getAuthToken: () => Promise<string>;
 
@@ -75,15 +75,15 @@ export interface BuildCollectionGenerationCallbackProps {
  *
  * @example
  * ```tsx
- * import { RebaseCMS } from "@rebasepro/admin";
+ * import { RebaseAdmin } from "@rebasepro/admin";
  * import { buildCollectionGenerationCallback } from "@rebasepro/admin/collection_editor";
- * import { useFirebaseAuthController } from "@rebasepro/client-firebase";
+ * import { useFirebaseAuthController } from "@rebasepro/firebase";
  *
  * const authController = useFirebaseAuthController({ firebaseApp });
  *
  * export function App() {
  *     return (
- *         <RebaseCMS
+ *         <RebaseAdmin
  *             collectionEditor={{
  *                 generateCollection: buildCollectionGenerationCallback({
  *                     getAuthToken: authController.getAuthToken

package/src/collection_editor/ui/AddKanbanColumnAction.tsx

@@ -4,7 +4,7 @@ import {
     useAuthController,
     useCustomizationController,
     useTranslation
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import { getPropertyInPath } from "../_cms_internals";
 import { CollectionConfig, EnumValueConfig, StringProperty } from "@rebasepro/types";
 import { resolveEnumValues } from "@rebasepro/common";

package/src/collection_editor/ui/CollectionViewHeaderAction.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from "@rebasepro/core";
+import { useTranslation } from "@rebasepro/app";
 import { CollectionConfig, EntityTableController, Property } from "@rebasepro/types";
 import { IconButton, SettingsIcon, Tooltip } from "@rebasepro/ui";
 import React from "react";

package/src/collection_editor/ui/EditorCollectionAction.tsx

@@ -1,5 +1,5 @@
 import { useCollectionRegistryController } from "../_cms_internals";
-import { useAuthController, useTranslation } from "@rebasepro/core";
+import { useAuthController, useTranslation } from "@rebasepro/app";
 import { CollectionConfig, CollectionActionsProps } from "@rebasepro/types";
 import { IconButton, SettingsIcon, Tooltip } from "@rebasepro/ui";
 

package/src/collection_editor/ui/EditorCollectionActionStart.tsx

@@ -4,7 +4,7 @@ import {
     useAuthController,
     useSnackbarController,
     useTranslation
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import { CollectionConfig, CollectionActionsProps } from "@rebasepro/types";
 import { Button, SaveIcon, Tooltip, UndoIcon } from "@rebasepro/ui";
 

package/src/collection_editor/ui/EditorEntityAction.tsx

@@ -1,5 +1,5 @@
 import { useCollectionRegistryController } from "../_cms_internals";
-import { useAuthController, useTranslation } from "@rebasepro/core";
+import { useAuthController, useTranslation } from "@rebasepro/app";
 import { CollectionConfig, PluginFormActionProps } from "@rebasepro/types";
 import { IconButton, SettingsIcon, Tooltip } from "@rebasepro/ui";
 

package/src/collection_editor/ui/HomePageEditorCollectionAction.tsx

@@ -3,7 +3,7 @@ import {
     useAuthController,
     useSnackbarController,
     useTranslation
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import { PluginHomePageActionsProps } from "@rebasepro/types";
 import { CopyIcon, IconButton, Menu, MenuItem, MoreVerticalIcon, SettingsIcon, Trash2Icon } from "@rebasepro/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";

package/src/collection_editor/ui/KanbanSetupAction.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useTranslation } from "@rebasepro/core";
+import { useTranslation } from "@rebasepro/app";
 import { CollectionConfig } from "@rebasepro/types";
 import { Button } from "@rebasepro/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";

package/src/collection_editor/ui/MissingReferenceWidget.tsx

@@ -1,5 +1,5 @@
 import { useCollectionRegistryController } from "../_cms_internals";
-import { ErrorView, useTranslation } from "@rebasepro/core";
+import { ErrorView, useTranslation } from "@rebasepro/app";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 import { Button } from "@rebasepro/ui";
 import { prettifyIdentifier } from "@rebasepro/utils";

package/src/collection_editor/ui/NewCollectionButton.tsx

@@ -1,6 +1,6 @@
 import { Button, PlusIcon } from "@rebasepro/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
-import { useAdminModeController, useTranslation } from "@rebasepro/core";
+import { useAdminModeController, useTranslation } from "@rebasepro/app";
 
 export function NewCollectionButton() {
     const adminModeController = useAdminModeController();

package/src/collection_editor/ui/NewCollectionCard.tsx

@@ -1,7 +1,7 @@
 import {
     useAuthController,
     useTranslation
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import { PluginHomePageAdditionalCardsProps } from "@rebasepro/types";
 import { Card, cls, PlusIcon, Typography } from "@rebasepro/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";

package/src/collection_editor/ui/PropertyAddColumnComponent.tsx

@@ -1,7 +1,7 @@
 import {
     useAuthController,
     useTranslation
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import { getDefaultPropertiesOrder } from "../_cms_internals";
 import { CollectionConfig, EntityTableController } from "@rebasepro/types";
 import { PlusIcon, Tooltip } from "@rebasepro/ui";

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

@@ -1,5 +1,5 @@
 
-import { AIIcon } from "@rebasepro/core";
+import { AIIcon } from "@rebasepro/app";
 import { useCollectionRegistryController } from "../../_cms_internals";
 import React, { useState } from "react";
 import { useSafeSnackbarController } from "../../useSafeSnackbarController";

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

@@ -1,8 +1,8 @@
 
-import { IconForView } from "@rebasepro/core";
+import { IconForView } from "@rebasepro/app";
 import { FieldCaption } from "../../_cms_internals";
 import React, { useMemo, useState } from "react";
-import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { useAuthController, useCustomizationController } from "@rebasepro/app";
 import { getFieldConfig, PropertyConfigBadge, SearchIconsView } from "../../_cms_internals";
 import { CollectionConfig, Property } from "@rebasepro/types";
 import {
@@ -24,7 +24,7 @@ import {
     XIcon
 } from "@rebasepro/ui";
 
-import { Field, getIn, useFormex } from "@rebasepro/formex";
+import { Field, getIn, useFormex } from "@rebasepro/forms";
 import { useCollectionEditorController } from "../../useCollectionEditorController";
 import { LayoutModeSwitch } from "./LayoutModeSwitch";
 import { ViewModeSwitch } from "./ViewModeSwitch";

package/src/collection_editor/ui/collection_editor/CollectionEditorDialog.tsx

@@ -7,7 +7,7 @@ import {
     useAuthController,
     useCustomizationController,
     useUnsavedChangesDialog
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import {
     getInferenceType,
     ImportSaveInProgress,
@@ -52,11 +52,11 @@ import { CollectionPropertiesEditorForm } from "./CollectionPropertiesEditorForm
 import { CollectionsConfigController } from "../../types/config_controller";
 import { CollectionEditorWelcomeView } from "./CollectionEditorWelcomeView";
 import { CollectionInference } from "../../types/collection_inference";
-import { buildEntityPropertiesFromData } from "@rebasepro/schema-inference";
+import { buildEntityPropertiesFromData } from "@rebasepro/inference";
 import { CollectionEditorImportMapping } from "./import/CollectionEditorImportMapping";
 import { CollectionEditorImportDataPreview } from "./import/CollectionEditorImportDataPreview";
 import { cleanPropertiesFromImport } from "./import/clean_import_data";
-import { Formex, FormexController, useCreateFormex } from "@rebasepro/formex";
+import { Formex, FormexController, useCreateFormex } from "@rebasepro/forms";
 import { getFullIdPath } from "./util";
 import { AICollectionGeneratorPopover } from "./AICollectionGeneratorPopover";
 import { AIModifiedPathsProvider, useAIModifiedPaths } from "./AIModifiedPathsContext";

package/src/collection_editor/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -1,4 +1,4 @@
-import { AIIcon } from "@rebasepro/core";
+import { AIIcon } from "@rebasepro/app";
 ;
 import React, { useState } from "react";
 ;
@@ -26,7 +26,7 @@ import { blogCollectionTemplate } from "./templates/blog_template";
 import { usersCollectionTemplate } from "./templates/users_template";
 import { ImportFileUpload } from "../../_cms_internals";
 import { pagesCollectionTemplate } from "./templates/pages_template";
-import { useFormex } from "@rebasepro/formex";
+import { useFormex } from "@rebasepro/forms";
 import { useCollectionEditorController } from "../../useCollectionEditorController";
 import { AICollectionGeneratorPopover } from "./AICollectionGeneratorPopover";
 import { CollectionGenerationCallback } from "../../api/generateCollectionApi";

package/src/collection_editor/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -1,10 +1,10 @@
 
 import React, { useEffect, useMemo, useState } from "react";
 
-import { Field, getIn, useFormex } from "@rebasepro/formex";
+import { Field, getIn, useFormex } from "@rebasepro/forms";
 import {
     useLargeLayout
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import { useSafeSnackbarController } from "../../useSafeSnackbarController";
 import { ErrorBoundary } from "@rebasepro/ui";
 import {

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

@@ -1,6 +1,8 @@
 
-import { CollectionConfig } from "@rebasepro/types";
-import React, { useState, useEffect } from "react";
+import { CollectionConfig, SecurityRule as GeneratedSecurityRule } from "@rebasepro/types";
+import { getPolicyNamesForRule, getPolicyNamesForRules } from "@rebasepro/utils";
+import { getEffectiveSecurityRules } from "@rebasepro/common";
+import React, { useState, useEffect, useMemo } from "react";
 
 /**
  * Validates and double-quotes a SQL identifier to prevent injection.
@@ -37,8 +39,8 @@ import {
     Trash2Icon,
     Typography
 } from "@rebasepro/ui";
-import { useFormex } from "@rebasepro/formex";
-import { useRebaseContext } from "@rebasepro/core";
+import { useFormex } from "@rebasepro/forms";
+import { useRebaseContext } from "@rebasepro/app";
 
 /** Postgres RLS policy shape — defined inline to avoid depending on @rebasepro/studio */
 export interface PostgresPolicy {
@@ -130,7 +132,65 @@ export function CollectionRLSTab() {
         fetchLivePolicies();
     }, [databaseAdmin, values.id, values.table, values.alias]);
 
-    const unmappedPolicies = dbPolicies.filter(dp => !rules.some(r => r.name === dp.policyname));
+    /**
+     * Application roles available to `SecurityRule.roles`.
+     *
+     * Deliberately NOT `fetchAvailableRoles` — that returns native pg_roles
+     * (postgres, rebase_user, …), which can never satisfy an application-role
+     * condition.
+     */
+    const [availableRoles, setAvailableRoles] = useState<string[]>([]);
+    const [rolesUnavailable, setRolesUnavailable] = useState(false);
+
+    useEffect(() => {
+        let mounted = true;
+        const fetchRoles = async () => {
+            if (!databaseAdmin?.fetchApplicationRoles) {
+                // Older backend, or a driver with no application-role concept.
+                if (mounted) setRolesUnavailable(true);
+                return;
+            }
+            try {
+                const fetched = await databaseAdmin.fetchApplicationRoles();
+                if (mounted) {
+                    setAvailableRoles(fetched);
+                    setRolesUnavailable(false);
+                }
+            } catch (e) {
+                console.error("Failed to fetch application roles", e);
+                if (mounted) setRolesUnavailable(true);
+            }
+        };
+        fetchRoles();
+        return () => {
+            mounted = false;
+        };
+    }, [databaseAdmin]);
+
+    const tableName = values.id || values.table || values.alias;
+
+    /**
+     * Every policy name `rebase db push` would write for this collection.
+     *
+     * Two things make this more than `rules.map(r => r.name)`:
+     *  - a rule without an explicit `name` becomes `<table>_<op>_<hash>`, so
+     *    comparing `rule.name` to `policyname` never matches for it;
+     *  - the generator also injects the safe-by-default baseline
+     *    (`<table>_default_admin_*`), which is in no collection's `securityRules`.
+     *
+     * Missing either made Rebase's own policies look hand-written, and offered to
+     * import them back into the codebase that produced them.
+     */
+    const generatedPolicyNames = useMemo(() => {
+        if (!tableName) return new Set<string>();
+        const effectiveRules = getEffectiveSecurityRules(values as CollectionConfig);
+        return getPolicyNamesForRules(
+            [...(rules as unknown as GeneratedSecurityRule[]), ...effectiveRules],
+            tableName
+        );
+    }, [rules, tableName, values]);
+
+    const unmappedPolicies = dbPolicies.filter(dp => !generatedPolicyNames.has(dp.policyname));
 
     const handleSave = async (newPolicy: Partial<PostgresPolicy>) => {
         const rule: SecurityRule = {
@@ -175,7 +235,13 @@ export function CollectionRLSTab() {
                                 <div className="flex flex-col gap-1.5 min-w-0">
                                     <div className="flex items-center gap-2">
                                         <KeyIcon size={iconSize.smallest} className="text-text-disabled dark:text-text-disabled-dark shrink-0"/>
-                                        <Typography variant="subtitle2" className="truncate">{rule.name}</Typography>
+                                        <Typography variant="subtitle2" className="truncate">
+                                            {/* Unnamed rules are still named in Postgres — show what they compile to
+                                                rather than an empty heading. */}
+                                            {rule.name || (tableName
+                                                ? getPolicyNamesForRule(rule as unknown as GeneratedSecurityRule, tableName).join(", ")
+                                                : "Unnamed policy")}
+                                        </Typography>
                                     </div>
                                     <div className="flex gap-2 text-xs pl-6 overflow-x-auto hide-scrollbar">
                                         <Chip size="small" className="bg-surface-100 dark:bg-surface-900 text-text-secondary border-none">Action: {rule.operation || "ALL"}</Chip>
@@ -188,7 +254,7 @@ export function CollectionRLSTab() {
                                         tablename: values.id || values.table || values.alias || "your_table",
                                         permissive: (rule.mode || "permissive").toUpperCase() as PostgresPolicy["permissive"],
                                         cmd: (rule.operation || "ALL").toUpperCase() as PostgresPolicy["cmd"],
-                                        roles: rule.roles || ["public"],
+                                        roles: rule.roles || [],
                                         qual: rule.using || null,
                                         with_check: rule.withCheck || null
                                     })}>
@@ -262,6 +328,8 @@ export function CollectionRLSTab() {
                         <InlinePolicyEditor
                             policy={editingPolicy === "new" ? undefined : editingPolicy}
                             table={values.id || values.table || values.alias || "your_table"}
+                            availableRoles={availableRoles}
+                            rolesUnavailable={rolesUnavailable}
                             onSave={handleSave}
                             onCancel={() => setEditingPolicy(null)}
                         />
@@ -276,30 +344,57 @@ export function CollectionRLSTab() {
 
 type PolicyCommand = "ALL" | "SELECT" | "INSERT" | "UPDATE" | "DELETE";
 const COMMAND_OPTIONS: PolicyCommand[] = ["ALL", "SELECT", "INSERT", "UPDATE", "DELETE"];
-const ROLE_OPTIONS = ["public", "authenticated", "anon", "admin"];
 
 function InlinePolicyEditor({
     policy,
     table,
+    availableRoles,
+    rolesUnavailable,
     onSave,
     onCancel
 }: {
     policy?: PostgresPolicy;
     table: string;
+    availableRoles: string[];
+    rolesUnavailable: boolean;
     onSave: (policyData: Partial<PostgresPolicy>) => void;
     onCancel: () => void;
 }) {
     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");
+    // No roles means "not restricted by role". Seeding a value here would
+    // silently narrow every new policy to it.
     const [roles, setRoles] = useState<string[]>(
-        policy?.roles ? (Array.isArray(policy.roles) ? policy.roles : [policy.roles]) : ["public"]
+        policy?.roles ? (Array.isArray(policy.roles) ? policy.roles : [policy.roles]) : []
     );
+    const [customRole, setCustomRole] = useState("");
     const [usingExpr, setUsingExpr] = useState(policy?.qual || "");
     const [checkExpr, setCheckExpr] = useState(policy?.with_check || "");
 
     const showCheck = command === "ALL" || command === "INSERT" || command === "UPDATE";
 
+    /**
+     * Roles offered in the dropdown: those in use in the project, plus any the
+     * rule already carries. The union matters — application roles are derived
+     * from what users hold, so a role that is referenced here but assigned to
+     * nobody would otherwise vanish from its own policy on the next save.
+     */
+    const roleOptions = useMemo(
+        () => Array.from(new Set([...availableRoles, ...roles])).sort(),
+        [availableRoles, roles]
+    );
+
+    const addCustomRole = () => {
+        const trimmed = customRole.trim();
+        if (!trimmed || roles.includes(trimmed)) {
+            setCustomRole("");
+            return;
+        }
+        setRoles([...roles, trimmed]);
+        setCustomRole("");
+    };
+
     return (
         <>
             <DialogTitle variant="h6">
@@ -334,10 +429,41 @@ function InlinePolicyEditor({
                         </div>
                     </div>
                     <div className="flex flex-col gap-1.5">
-                        <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">Target Roles</Typography>
-                        <MultiSelect size="small" value={roles} onValueChange={setRoles} placeholder="Select roles">
-                            {ROLE_OPTIONS.map(r => <MultiSelectItem key={r} value={r}>{r}</MultiSelectItem>)}
-                        </MultiSelect>
+                        <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">Application Roles</Typography>
+                        <Typography variant="caption" className="text-text-secondary opacity-80 -mt-1">
+                            Roles held by users of this project, matched via <span className="font-mono">auth.roles()</span>.
+                            These are not PostgreSQL roles — leave empty to apply the policy to everyone.
+                        </Typography>
+                        {roleOptions.length > 0 && (
+                            <MultiSelect size="small" value={roles} onValueChange={setRoles} placeholder="Select roles">
+                                {roleOptions.map(r => <MultiSelectItem key={r} value={r}>{r}</MultiSelectItem>)}
+                            </MultiSelect>
+                        )}
+                        {rolesUnavailable && roleOptions.length === 0 && (
+                            <Typography variant="caption" className="text-text-secondary opacity-80">
+                                Could not load the project&apos;s roles — enter them manually below.
+                            </Typography>
+                        )}
+                        {!rolesUnavailable && roleOptions.length === 0 && (
+                            <Typography variant="caption" className="text-text-secondary opacity-80">
+                                No roles are assigned to any user yet — enter one manually below.
+                            </Typography>
+                        )}
+                        <div className="flex gap-2 items-center">
+                            <TextField size="small" value={customRole}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setCustomRole(e.target.value)}
+                                onKeyDown={(e: React.KeyboardEvent) => {
+                                    if (e.key === "Enter") {
+                                        e.preventDefault();
+                                        addCustomRole();
+                                    }
+                                }}
+                                placeholder="Add a role not listed, e.g. editor"/>
+                            <Button size="small" variant="outlined" color="neutral"
+                                disabled={!customRole.trim()} onClick={addCustomRole}>
+                                Add
+                            </Button>
+                        </div>
                     </div>
                     {command !== "INSERT" && (
                         <div className="flex flex-col gap-1.5">

package/src/collection_editor/ui/collection_editor/CollectionRelationsTab.tsx

@@ -21,7 +21,7 @@ import {
     Trash2Icon,
     Typography
 } from "@rebasepro/ui";
-import { useFormex } from "@rebasepro/formex";
+import { useFormex } from "@rebasepro/forms";
 import { PostgresCollectionConfig, Relation } from "@rebasepro/types";
 import { useCollectionsConfigController } from "../../useCollectionsConfigController";
 

package/src/collection_editor/ui/collection_editor/CollectionStudioView.tsx

@@ -1,5 +1,5 @@
 
-import { useUnsavedChangesDialog, UnsavedChangesDialog } from "@rebasepro/core";
+import { useUnsavedChangesDialog, UnsavedChangesDialog } from "@rebasepro/app";
 import * as React from "react";
 import { useState } from "react";
 import { Button, PlusIcon, Typography } from "@rebasepro/ui";

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

@@ -1,5 +1,5 @@
 
-import { IconForView } from "@rebasepro/core";
+import { IconForView } from "@rebasepro/app";
 import React, { useState, useEffect } from "react";
 import {
     Button,

package/src/collection_editor/ui/collection_editor/DisplaySettingsForm.tsx

@@ -1,7 +1,7 @@
 
 import { FieldCaption } from "../../_cms_internals";
 import React, { useMemo, useState } from "react";
-import { useCustomizationController } from "@rebasepro/core";
+import { useCustomizationController } from "@rebasepro/app";
 import { getFieldConfig } from "../../../components/field_configs";
 import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
 import { CollectionConfig, Property } from "@rebasepro/types";
@@ -18,7 +18,7 @@ import {
     XIcon
 } from "@rebasepro/ui";
 
-import { useFormex } from "@rebasepro/formex";
+import { useFormex } from "@rebasepro/forms";
 import { LayoutModeSwitch } from "./LayoutModeSwitch";
 import { ViewModeSwitch } from "./ViewModeSwitch";
 import { KanbanConfigSection } from "./KanbanConfigSection";

package/src/collection_editor/ui/collection_editor/EntityActionsEditTab.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import {
     ConfirmationDialog,
     useCustomizationController
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import { resolveEntityAction } from "../../_cms_internals";
 import { type CollectionConfig } from "@rebasepro/types";
 import { EntityAction } from "@rebasepro/types";
@@ -23,7 +23,7 @@ import {
     Trash2Icon,
     Typography
 } from "@rebasepro/ui";
-import { useFormex } from "@rebasepro/formex";
+import { useFormex } from "@rebasepro/forms";
 import { EntityActionsSelectDialog } from "./EntityActionsSelectDialog";
 
 export function EntityActionsEditTab({

package/src/collection_editor/ui/collection_editor/EntityActionsSelectDialog.tsx

@@ -1,4 +1,4 @@
-import { useCustomizationController } from "@rebasepro/core";
+import { useCustomizationController } from "@rebasepro/app";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
 import React from "react";
 

package/src/collection_editor/ui/collection_editor/EntityCustomViewsSelectDialog.tsx

@@ -1,4 +1,4 @@
-import { useCustomizationController } from "@rebasepro/core";
+import { useCustomizationController } from "@rebasepro/app";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
 import React from "react";
 

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

@@ -23,8 +23,8 @@ import {
     SettingsIcon,
     Typography
 } from "@rebasepro/ui";
-import { extractEnumFromValues } from "@rebasepro/schema-inference";
-import { Field, Formex, getIn, useCreateFormex, useFormex } from "@rebasepro/formex";
+import { extractEnumFromValues } from "@rebasepro/inference";
+import { Field, Formex, getIn, useCreateFormex, useFormex } from "@rebasepro/forms";
 
 type EnumFormProps = {
     enumValues: EnumValueConfig[];

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

@@ -1,5 +1,5 @@
 
-import { IconForView } from "@rebasepro/core";
+import { IconForView } from "@rebasepro/app";
 import { FieldCaption } from "../../_cms_internals";
 import React, { useState } from "react";
 
@@ -23,7 +23,7 @@ import {
     Tooltip,
     Typography
 } from "@rebasepro/ui";
-import { Field, getIn, useFormex } from "@rebasepro/formex";
+import { Field, getIn, useFormex } from "@rebasepro/forms";
 import { useCollectionsConfigController } from "../../useCollectionsConfigController";
 import { singular, toSnakeCase } from "@rebasepro/utils";
 import type { ExtraCollectionFieldsParams } from "../../extensibility_types";