@rebasepro/admin 0.8.0 → 0.9.1-canary.09aaf62

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 {
@@ -21,7 +21,7 @@ import {
     Tooltip,
     Typography
 } from "@rebasepro/ui";
-import { EntityCollection, MapProperty, Properties, Property, PropertyConfig, User } from "@rebasepro/types";
+import { CollectionConfig, MapProperty, Properties, Property, PropertyConfig, User } from "@rebasepro/types";
 import { isPropertyBuilder } from "@rebasepro/common";
 
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "./util";
@@ -31,7 +31,7 @@ import { GetCodeDialog } from "./GetCodeDialog";
 import { useAIModifiedPaths } from "./AIModifiedPathsContext";
 import { useCollectionsConfigController } from "../../useCollectionsConfigController";
 import type { PropertyTypePreset, PropertyType } from "../../extensibility_types";
-import type { SerializableProperty, SerializableCollection } from "../../serializable_types";
+import type { SerializableProperty, SerializableCollectionConfig } from "../../serializable_types";
 
 type PropertyOrBuilder = Property | Record<string, unknown>;
 
@@ -44,7 +44,7 @@ type CollectionEditorFormProps = {
     extraIcon: React.ReactNode;
     getUser?: (uid: string) => User | null;
     getData?: () => Promise<object[]>;
-    doCollectionInference?: (collection: EntityCollection) => Promise<Partial<EntityCollection> | null> | undefined;
+    doCollectionInference?: (collection: CollectionConfig) => Promise<Partial<CollectionConfig> | null> | undefined;
     propertyConfigs: Record<string, PropertyConfig>;
     propertyTypePresets?: PropertyTypePreset[];
     hiddenPropertyTypes?: PropertyType[];
@@ -52,7 +52,7 @@ type CollectionEditorFormProps = {
         metadata: Record<string, unknown>;
         onMetadataChange: (key: string, value: unknown) => void;
         property: SerializableProperty;
-        collection: SerializableCollection;
+        collection: SerializableCollectionConfig;
     }) => React.ReactNode;
     standalone?: boolean;
 };
@@ -82,7 +82,7 @@ export function CollectionPropertiesEditorForm({
         setFieldTouched,
         errors,
         dirty
-    } = useFormex<EntityCollection>();
+    } = useFormex<CollectionConfig>();
 
     const snackbarController = useSafeSnackbarController();
     const configControllerFromContext = useCollectionsConfigController();
@@ -420,9 +420,9 @@ export function CollectionPropertiesEditorForm({
     };
 
     const body = (
-        <div className={"grid grid-cols-12 h-full bg-surface-50 dark:bg-surface-800"}>
+        <div className={"grid grid-cols-12 h-full min-h-0 bg-surface-50 dark:bg-surface-800"}>
             <div className={cls(
-                "col-span-12 lg:col-span-5 h-full flex flex-col bg-surface-50 dark:bg-surface-800",
+                "col-span-12 lg:col-span-5 h-full min-h-0 flex flex-col bg-surface-50 dark:bg-surface-800",
                 !asDialog && "border-r " + defaultBorderMixin
             )}>
                 {/* Sidebar Header */}
@@ -467,7 +467,7 @@ export function CollectionPropertiesEditorForm({
                 </div>
 
                 {/* Sidebar Content */}
-                <div className="flex-grow overflow-y-auto p-3 no-scrollbar space-y-3 bg-surface-50 dark:bg-surface-800">
+                <div className="flex-grow overflow-y-auto p-3 space-y-3 bg-surface-50 dark:bg-surface-800">
                     {owner && (
                         <div className="px-1 py-0.5">
                             <Typography variant="body2" color="secondary">

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

@@ -1,6 +1,8 @@
 
-import { EntityCollection } 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 {
@@ -61,7 +63,7 @@ interface SecurityRule {
     roles?: string[];
 }
 
-type CollectionWithSecurity = EntityCollection & {
+type CollectionWithSecurity = CollectionConfig & {
     securityRules?: SecurityRule[];
     id?: string;
     table?: string;
@@ -130,7 +132,30 @@ export function CollectionRLSTab() {
         fetchLivePolicies();
     }, [databaseAdmin, values.id, values.table, values.alias]);
 
-    const unmappedPolicies = dbPolicies.filter(dp => !rules.some(r => r.name === dp.policyname));
+    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 +200,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>

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

@@ -21,12 +21,12 @@ import {
     Trash2Icon,
     Typography
 } from "@rebasepro/ui";
-import { useFormex } from "@rebasepro/formex";
-import { PostgresCollection, Relation } from "@rebasepro/types";
+import { useFormex } from "@rebasepro/forms";
+import { PostgresCollectionConfig, Relation } from "@rebasepro/types";
 import { useCollectionsConfigController } from "../../useCollectionsConfigController";
 
 export function CollectionRelationsTab() {
-    const { values, setFieldValue } = useFormex<PostgresCollection>();
+    const { values, setFieldValue } = useFormex<PostgresCollectionConfig>();
     const { collections } = useCollectionsConfigController();
     const [editingRelationIndex, setEditingRelationIndex] = useState<number | null>(null);
     const [editingRelationState, setEditingRelationState] = useState<Partial<Relation> | null>(null);

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

@@ -1,12 +1,12 @@
 
-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";
 import { CollectionEditorDialogProps } from "./CollectionEditorDialog";
 import { AIModifiedPathsProvider } from "./AIModifiedPathsContext";
 import { CollectionEditor } from "./CollectionEditorDialog";
-import type { EntityCollection } from "@rebasepro/types";
+import type { CollectionConfig } from "@rebasepro/types";
 
 export type CollectionStudioViewProps = Omit<CollectionEditorDialogProps, "open" | "isNewCollection" | "editedCollectionId" | "handleClose" | "handleCancel"> & {
     collectionId?: string | "new";
@@ -16,7 +16,7 @@ export type CollectionStudioViewProps = Omit<CollectionEditorDialogProps, "open"
      * Receives the saved collection (or undefined if dismissed without saving).
      * When not provided, save completes silently.
      */
-    onSave?: (collection?: EntityCollection) => void;
+    onSave?: (collection?: CollectionConfig) => void;
 
     /**
      * Called when the user cancels editing.

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,
@@ -12,7 +12,7 @@ import {
     Tooltip,
     Typography
 } from "@rebasepro/ui";
-import type { EntityCollection } from "@rebasepro/types";
+import type { CollectionConfig } from "@rebasepro/types";
 import { CollectionsConfigController } from "../../types/config_controller";
 import { CollectionStudioView } from "./CollectionStudioView";
 import type { CollectionEditorExtensionProps } from "../../extensibility_types";
@@ -25,7 +25,7 @@ export interface CollectionsStudioViewProps extends CollectionEditorExtensionPro
      * When provided, overrides the collections from `configController`.
      * Use this to control exactly which collections the editor displays.
      */
-    collections?: EntityCollection[];
+    collections?: CollectionConfig[];
 
     /**
      * Controlled active collection ID.

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

@@ -1,10 +1,10 @@
 
 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 { EntityCollection, Property } from "@rebasepro/types";
+import { CollectionConfig, Property } from "@rebasepro/types";
 import {
     BooleanSwitchWithLabel,
     Button,
@@ -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";
@@ -39,7 +39,7 @@ export function DisplaySettingsForm({
         setFieldValue,
         handleChange,
         submitCount
-    } = useFormex<EntityCollection>();
+    } = useFormex<CollectionConfig>();
 
     const [orderPropertyDialogOpen, setOrderPropertyDialogOpen] = useState(false);
 

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

@@ -3,9 +3,9 @@ import React from "react";
 import {
     ConfirmationDialog,
     useCustomizationController
-} from "@rebasepro/core";
+} from "@rebasepro/app";
 import { resolveEntityAction } from "../../_cms_internals";
-import { type EntityCollection } from "@rebasepro/types";
+import { type CollectionConfig } from "@rebasepro/types";
 import { EntityAction } from "@rebasepro/types";
 import {
     Alert,
@@ -23,14 +23,14 @@ import {
     Trash2Icon,
     Typography
 } from "@rebasepro/ui";
-import { useFormex } from "@rebasepro/formex";
+import { useFormex } from "@rebasepro/forms";
 import { EntityActionsSelectDialog } from "./EntityActionsSelectDialog";
 
 export function EntityActionsEditTab({
     collection,
     embedded = false
 }: {
-    collection: EntityCollection,
+    collection: CollectionConfig,
     embedded?: boolean;
 }) {
 
@@ -42,7 +42,7 @@ export function EntityActionsEditTab({
     const {
         values,
         setFieldValue
-    } = useFormex<EntityCollection>();
+    } = useFormex<CollectionConfig>();
 
     const resolvedEntityActions = ((values.entityActions ?? []) as (string | EntityAction<any>)[])
         .filter((e): e is string => typeof e === "string")

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,10 +1,10 @@
 
-import { IconForView } from "@rebasepro/core";
+import { IconForView } from "@rebasepro/app";
 import { FieldCaption } from "../../_cms_internals";
 import React, { useState } from "react";
 
 import { SearchIconsView } from "../../_cms_internals";
-import type { EntityCollection, PostgresCollection } from "@rebasepro/types";
+import type { CollectionConfig, PostgresCollectionConfig } from "@rebasepro/types";
 import {
     BooleanSwitchWithLabel,
     Chip,
@@ -23,11 +23,11 @@ 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";
-import { toSerializableCollection } from "../../serializable_utils";
+import { toSerializableCollectionConfig } from "../../serializable_utils";
 
 export function GeneralSettingsForm({
     isNewCollection,
@@ -40,7 +40,7 @@ export function GeneralSettingsForm({
     isNewCollection: boolean;
     existingPaths?: string[];
     existingIds?: string[];
-    parentCollection?: EntityCollection;
+    parentCollection?: CollectionConfig;
     renderExtraCollectionFields?: (params: ExtraCollectionFieldsParams) => React.ReactNode;
     standalone?: boolean;
 }) {
@@ -53,7 +53,7 @@ export function GeneralSettingsForm({
         errors,
         setFieldTouched,
         submitCount
-    } = useFormex<PostgresCollection>();
+    } = useFormex<PostgresCollectionConfig>();
 
     const [iconDialogOpen, setIconDialogOpen] = useState(false);
 
@@ -255,7 +255,7 @@ export function GeneralSettingsForm({
                             onMetadataChange: (key: string, value: unknown) => {
                                 setFieldValue(`metadata.${key}`, value);
                             },
-                            collection: toSerializableCollection(values),
+                            collection: toSerializableCollectionConfig(values),
                         })}
                     </div>
                 )}

package/src/collection_editor/ui/collection_editor/GetCodeDialog.tsx

@@ -1,23 +1,23 @@
 import { useSafeSnackbarController } from "../../useSafeSnackbarController";
-import { EntityCollection } from "@rebasepro/types";
+import { CollectionConfig } from "@rebasepro/types";
 import { Button, CopyIcon, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
 import React from "react";
 import JSON5 from "json5";
 import { Highlight, themes } from "prism-react-renderer"
 import { camelCase } from "./utils/strings";
-import { clone } from "@rebasepro/formex";
+import { clone } from "@rebasepro/forms";
 import { isEmptyObject } from "@rebasepro/utils";
 
 export function GetCodeDialog({
     collection,
     onOpenChange,
     open
-}: { onOpenChange: (open: boolean) => void, collection: EntityCollection, open: boolean }) {
+}: { onOpenChange: (open: boolean) => void, collection: CollectionConfig, open: boolean }) {
 
     const snackbarController = useSafeSnackbarController();
 
     const code = collection
-        ? "import { EntityCollection } from \"@rebasepro/core\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode({ ...collection }), null, "\t")
+        ? "import { CollectionConfig } from \"@rebasepro/app\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:CollectionConfig = " + JSON5.stringify(collectionToCode({ ...collection }), null, "\t")
         : "No collection selected";
     return <Dialog open={open}
         onOpenChange={onOpenChange}
@@ -78,7 +78,7 @@ export function GetCodeDialog({
     </Dialog>;
 }
 
-function collectionToCode(collection: EntityCollection): object {
+function collectionToCode(collection: CollectionConfig): object {
 
     const propertyCleanup = (value: unknown): unknown => {
         if (value === undefined || value === null) {

package/src/collection_editor/ui/collection_editor/KanbanConfigSection.tsx

@@ -1,12 +1,12 @@
 
 import { FieldCaption } from "../../_cms_internals";
 import React, { useMemo, useRef, useState } from "react";
-import { useAuthController, useCustomizationController } from "@rebasepro/core";
-import { EntityCollection, Property } from "@rebasepro/types";
+import { useAuthController, useCustomizationController } from "@rebasepro/app";
+import { CollectionConfig, Property } from "@rebasepro/types";
 import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
 import { getFieldConfig } from "../../../components/field_configs";
 import { Button, IconButton, iconSize, Select, SelectItem, Typography, XIcon } from "@rebasepro/ui";
-import { useFormex } from "@rebasepro/formex";
+import { useFormex } from "@rebasepro/forms";
 import { PropertyFormDialog } from "./PropertyEditView";
 import { unslugify } from "@rebasepro/utils";
 
@@ -19,7 +19,7 @@ export function KanbanConfigSection({
 }) {
     const authController = useAuthController();
     const customizationController = useCustomizationController();
-    const { values, setFieldValue } = useFormex<EntityCollection>();
+    const { values, setFieldValue } = useFormex<CollectionConfig>();
     const panelRef = useRef<HTMLDivElement>(null);
     const [columnPropertyDialogOpen, setColumnPropertyDialogOpen] = useState(false);
 

package/src/collection_editor/ui/collection_editor/PropertyEditView.tsx

@@ -2,14 +2,14 @@
 import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
 import { deepEqual as equal } from "fast-equals"
 
-import { Formex, FormexController, getIn, useCreateFormex } from "@rebasepro/formex";
-import { ConfirmationDialog } from "@rebasepro/core";
+import { Formex, FormexController, getIn, useCreateFormex } from "@rebasepro/forms";
+import { ConfirmationDialog } from "@rebasepro/app";
 import { DEFAULT_FIELD_CONFIGS, getFieldConfig, getFieldId } from "../../../components/field_configs";
 import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
-import { EntityCollection, Property, PropertyConfig, PropertyConfigId } from "@rebasepro/types";
+import { CollectionConfig, Property, PropertyConfig, PropertyConfigId } from "@rebasepro/types";
 import type { PropertyTypePreset, PropertyType } from "../../extensibility_types";
-import { toSerializableProperty, toSerializableCollection } from "../../serializable_utils";
-import type { SerializableProperty, SerializableCollection } from "../../serializable_types";
+import { toSerializableProperty, toSerializableCollectionConfig } from "../../serializable_utils";
+import type { SerializableProperty, SerializableCollectionConfig } from "../../serializable_types";
 import { isPropertyBuilder } from "@rebasepro/common";
 import {
     AlertTriangleIcon,
@@ -91,9 +91,9 @@ export type PropertyFormProps = {
         metadata: Record<string, unknown>;
         onMetadataChange: (key: string, value: unknown) => void;
         property: SerializableProperty;
-        collection: SerializableCollection;
+        collection: SerializableCollectionConfig;
     }) => React.ReactNode;
-    collectionValues?: EntityCollection;
+    collectionValues?: CollectionConfig;
 
 };
 
@@ -368,7 +368,7 @@ function PropertyEditFormFields({
     propertyTypePresets?: PropertyTypePreset[];
     hiddenPropertyTypes?: PropertyType[];
     renderExtraPropertyFields?: PropertyFormProps["renderExtraPropertyFields"];
-    collectionValues?: EntityCollection;
+    collectionValues?: CollectionConfig;
 
 } & FormexController<PropertyWithId>) {
 
@@ -612,7 +612,7 @@ function PropertyEditFormFields({
                                 } as PropertyWithId);
                             },
                             property: toSerializableProperty(values as Property),
-                            collection: toSerializableCollection(collectionValues),
+                            collection: toSerializableCollectionConfig(collectionValues),
                         })}
                     </div>
                 )}

package/src/collection_editor/ui/collection_editor/PropertyFieldPreview.tsx

@@ -1,4 +1,4 @@
-import { useCustomizationController } from "@rebasepro/core";
+import { useCustomizationController } from "@rebasepro/app";
 import { getFieldConfig } from "../../../components/field_configs";
 import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
 import { ErrorBoundary } from "@rebasepro/ui";
@@ -47,39 +47,49 @@ export function PropertyFieldPreview({
         >
             <PropertyConfigBadge propertyConfig={propertyConfig} size="small"/>
 
-            <div className="flex-1 flex flex-col min-w-0 pr-8">
+            <div className="flex-1 flex flex-col min-w-0 mr-16">
                 {includeName &&
                     <ErrorBoundary>
-                        <div className="flex items-center gap-2">
-                            <Typography variant="body2" component="span">
+                        <div className="flex items-center gap-2 min-w-0">
+                            <Typography variant="body2" component="span" className="truncate font-medium">
                                 {property.name || propertyKey || "\u00a0"}
                             </Typography>
-                            {property.name && propertyKey && property.name !== propertyKey && (
-                                <Typography variant="caption" component="span" color="secondary" className="font-mono">
+                            {propertyConfig?.name && (
+                                <Typography
+                                    variant={"caption"}
+                                    component="span"
+                                    className="text-text-secondary dark:text-text-secondary-dark shrink-0">
+                                    {propertyConfig.name}
+                                </Typography>
+                            )}
+                        </div>
+                        <div className="flex items-center gap-1.5 mt-0.5 min-w-0">
+                            {propertyKey && (
+                                <Typography variant="caption" component="span" color="secondary" className="font-mono truncate">
                                     {propertyKey}
                                 </Typography>
                             )}
+                            <ErrorBoundary>
+                                <Typography variant="caption" component="span" className="shrink-0 text-text-disabled dark:text-text-disabled-dark font-mono">
+                                    · {"columnType" in property ? (property as { columnType?: string }).columnType ?? property.type : property.type}
+                                </Typography>
+                            </ErrorBoundary>
                         </div>
                     </ErrorBoundary>}
 
-                <div className="flex flex-row items-center gap-2 mt-0.5">
-                    <ErrorBoundary>
-                        <Typography
-                            variant={"caption"}
-                            component="span"
-                            className="text-text-secondary dark:text-text-secondary-dark font-medium">
-                            {propertyConfig?.name}
-                        </Typography>
-                    </ErrorBoundary>
-                </div>
+                {!includeName &&
+                    <div className="flex flex-row items-center gap-2">
+                        <ErrorBoundary>
+                            <Typography
+                                variant={"caption"}
+                                component="span"
+                                className="text-text-secondary dark:text-text-secondary-dark font-medium">
+                                {propertyConfig?.name}
+                            </Typography>
+                        </ErrorBoundary>
+                    </div>}
             </div>
 
-            <ErrorBoundary>
-                <Typography variant="caption" component="span" className="ml-auto shrink-0 text-text-disabled dark:text-text-disabled-dark font-mono bg-surface-100 dark:bg-surface-900 px-1.5 py-0.5 rounded mr-8">
-                    {"columnType" in property ? (property as { columnType?: string }).columnType ?? property.type : property.type}
-                </Typography>
-            </ErrorBoundary>
-
             {includeEditButton && <Typography variant={"button"}>EDIT</Typography>}
         </div>
         </div>
@@ -120,35 +130,34 @@ export function NonEditablePropertyPreview({
                 <MinusCircleIcon className={"text-surface-accent-400 absolute -right-2 -top-2 bg-surface-50 dark:bg-surface-900 rounded-full"} size={iconSize.small}/>
             </div>
 
-            <div className="flex-1 flex flex-col min-w-0 pr-8">
-                <Typography variant="label" component="span" className="grow pr-2">
-                    {property?.name ? property.name : name}
-                </Typography>
-
-                <div className="flex flex-row items-center gap-2 mt-0.5">
-                    {propertyConfig && <Typography variant={"caption"} component="span" className="text-text-secondary dark:text-text-secondary-dark font-medium">
+            <div className="flex-1 flex flex-col min-w-0 mr-16">
+                <div className="flex items-center gap-2 min-w-0">
+                    <Typography variant="label" component="span" className="truncate">
+                        {property?.name ? property.name : name}
+                    </Typography>
+                    {propertyConfig && <Typography variant={"caption"} component="span" className="text-text-secondary dark:text-text-secondary-dark shrink-0">
                         {propertyConfig?.name}
                     </Typography>}
+                </div>
+
+                <div className="flex flex-row items-center gap-1.5 mt-0.5 min-w-0">
+                    <Typography variant="caption" component="span" color="secondary" className="font-mono truncate">
+                        {name}
+                    </Typography>
 
                     {property && isPropertyBuilder(property) && <ErrorBoundary>
                         <Typography variant="caption" component="span" className="text-text-disabled dark:text-text-disabled-dark">
-                            Defined in code
+                            · Defined in code
                         </Typography>
                     </ErrorBoundary>}
 
                     {!property && <ErrorBoundary>
                         <Typography variant="caption" component="span" className="text-text-disabled dark:text-text-disabled-dark">
-                            Additional field
+                            · Additional field
                         </Typography>
                     </ErrorBoundary>}
                 </div>
             </div>
-
-            {property && !isPropertyBuilder(property) && <ErrorBoundary>
-                <Typography variant="caption" component="span" className="ml-auto shrink-0 text-text-disabled dark:text-text-disabled-dark font-mono bg-surface-100 dark:bg-surface-900 px-1.5 py-0.5 rounded mr-8">
-                    {"columnType" in property ? (property as { columnType?: string }).columnType ?? property.type : property.type}
-                </Typography>
-            </ErrorBoundary>}
         </div>
         </div>
     )

package/src/collection_editor/ui/collection_editor/PropertyTree.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 import { deepEqual as equal } from "fast-equals"
 
-import { AIModifiedIndicator } from "@rebasepro/core";
+import { AIModifiedIndicator } from "@rebasepro/app";
 import { AdditionalFieldDelegate, Properties, Property } from "@rebasepro/types";
 import { isPropertyBuilder } from "@rebasepro/common";
 import {
@@ -287,7 +287,7 @@ export function PropertyTreeEntry({
                             selected={selected}/>}
                 </div>
 
-                <div className="absolute top-1/2 -translate-y-1/2 right-3 flex flex-row items-center gap-1">
+                <div className="absolute top-1/2 -translate-y-1/2 right-2 flex flex-row items-center gap-1">
                     {isAIModified && <AIModifiedIndicator/>}
                     {isPropertyInferred && <>
                         <Tooltip title={"Inferred property"} asChild={true}>

package/src/collection_editor/ui/collection_editor/RouterCollectionStudioView.tsx

@@ -12,7 +12,7 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { useUrlController } from "../../_cms_internals";
-import { useSnackbarController } from "@rebasepro/core";
+import { useSnackbarController } from "@rebasepro/app";
 import { CollectionStudioView, CollectionStudioViewProps } from "./CollectionStudioView";
 
 export type RouterCollectionStudioViewProps = Omit<CollectionStudioViewProps, "onSave" | "onCancel">;