@rebasepro/admin 0.15.0 → 0.16.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/admin",
   "type": "module",
-  "version": "0.15.0",
+  "version": "0.16.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.15.0",
-    "@rebasepro/common": "0.15.0",
-    "@rebasepro/forms": "0.15.0",
-    "@rebasepro/app": "0.15.0",
-    "@rebasepro/types": "0.15.0",
-    "@rebasepro/ui": "0.15.0",
-    "@rebasepro/inference": "0.15.0",
-    "@rebasepro/utils": "0.15.0"
+    "@rebasepro/admin-types": "0.16.0",
+    "@rebasepro/app": "0.16.0",
+    "@rebasepro/common": "0.16.0",
+    "@rebasepro/forms": "0.16.0",
+    "@rebasepro/inference": "0.16.0",
+    "@rebasepro/ui": "0.16.0",
+    "@rebasepro/types": "0.16.0",
+    "@rebasepro/utils": "0.16.0"
   },
   "peerDependencies": {
     "react": ">=19.2.7",
@@ -154,6 +154,9 @@
     "moduleNameMapper": {
       "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
       "^@rebasepro/([a-z0-9-]+)$": "<rootDir>/../$1/src/index.ts",
+      "^react$": "<rootDir>/node_modules/react",
+      "^react-dom$": "<rootDir>/node_modules/react-dom",
+      "^react/jsx-runtime$": "<rootDir>/node_modules/react/jsx-runtime",
       "^@rebasepro/admin-types$": "<rootDir>/../admin-types/src/index.ts"
     }
   },

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

@@ -42,7 +42,7 @@ import { useFormex } from "@rebasepro/forms";
 import { useCollectionsConfigController } from "../../useCollectionsConfigController";
 import { useRebaseContext, useTranslation } from "@rebasepro/app";
 import type { AdminCollection } from "@rebasepro/admin-types";
-import type { PostgresPolicy, SecurityOperation, SecurityRule } from "@rebasepro/types";
+import { RLS_ROLES_SQL, RLS_UID_SQL, type PostgresPolicy, type SecurityOperation, type SecurityRule } from "@rebasepro/types";
 
 export type { PostgresPolicy } from "@rebasepro/types";
 
@@ -466,7 +466,7 @@ function InlinePolicyEditor({
                     <div className="flex flex-col gap-1.5">
                         <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>.
+                            Roles held by users of this project, matched via <span className="font-mono">{RLS_ROLES_SQL}</span>.
                             These are not PostgreSQL roles — leave empty to apply the policy to everyone.
                         </Typography>
                         {roleOptions.length > 0 && (
@@ -503,13 +503,13 @@ function InlinePolicyEditor({
                     {command !== "INSERT" && (
                         <div className="flex flex-col gap-1.5">
                             <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"/>
+                            <TextField aria-label={t("studio_policy_using_expr")} value={usingExpr} onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setUsingExpr(e.target.value)} placeholder={`e.g. ${RLS_UID_SQL} = uid`}/>
                         </div>
                     )}
                     {showCheck && (
                         <div className="flex flex-col gap-1.5">
                             <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"/>
+                            <TextField aria-label={t("studio_policy_check_expr")} value={checkExpr} onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setCheckExpr(e.target.value)} placeholder={`e.g. ${RLS_UID_SQL} = uid`}/>
                         </div>
                     )}
                 </Paper>

package/src/components/CollectionPanel.tsx

@@ -110,7 +110,7 @@ function CollectionPanelInner({
             {title !== false && (
                 <Typography
                     variant="subtitle2"
-                    className="font-bold mb-2 text-surface-700 dark:text-surface-300"
+                    className="font-semibold mb-2 text-surface-700 dark:text-surface-300"
                 >
                     {title ?? mergedCollection.name}
                 </Typography>

package/src/components/CollectionViewBinding/CollectionListViewBinding.tsx

@@ -1385,7 +1385,7 @@ function ListHeaderLabel({
             {direction === "asc" && <ArrowUpIcon size={12} className="flex-shrink-0"/>}
             {direction === "desc" && <ArrowDownIcon size={12} className="flex-shrink-0"/>}
             {direction && position !== undefined && (
-                <span className="flex-shrink-0 text-[9px] font-bold leading-none tabular-nums">
+                <span className="flex-shrink-0 text-[9px] font-semibold leading-none tabular-nums">
                     {position + 1}
                 </span>
             )}

package/src/components/CollectionViewBinding/CollectionViewBinding.tsx

@@ -77,7 +77,6 @@ import { CollectionViewStartActions } from "./CollectionViewStartActions";
 import { addRecentId, getRecentIds } from "./utils";
 import { isViewMode, OpenEntityMode, resolveOpenEntityMode, VIEW_MODE_PARAM, VIEW_MODES } from "../../util/view_mode";
 import { mergeDeep } from "@rebasepro/utils";
-import { useBreadcrumbsController } from "../../hooks/useBreadcrumbsController";
 import { useAdminContext } from "../../hooks/useAdminContext";
 import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
 import { useSidePanel } from "../../hooks/useSidePanel";
@@ -173,7 +172,6 @@ const CollectionViewBindingInner = React.memo(
         const context = useAdminContext();
         const collectionRegistry = useCollectionRegistryController();
         const urlController = useUrlController();
-        const breadcrumbs = useBreadcrumbsController();
         const path = pathProp ?? getCollectionDataPath(collectionProp);
         const dataClient = useData();
         const sidePanelController = useSidePanel();
@@ -876,14 +874,7 @@ parentEntityIds: parentEntityIds ?? EMPTY_ARRAY,
 
         }, [updateLastDeleteTimestamp, usedSelectionController]);
 
-        // Update breadcrumb count when count changes
-        const updateCountRef = React.useRef(breadcrumbs.updateCount);
-        updateCountRef.current = breadcrumbs.updateCount;
-        useEffect(() => {
-            updateCountRef.current(path, docsCount);
-        }, [docsCount, path]);
-
-        // EntitiesCount fetches count and updates breadcrumb - no visual rendering needed here
+        // EntitiesCount fetches the count and reports it — the toolbar renders it
         const countFetcher = <EntitiesCount
             path={path}
             collection={collection}
@@ -1039,6 +1030,7 @@ parentEntityIds,
                     collectionEntitiesCount={docsCount ?? undefined}
                     resolvedProperties={resolvedCollection.properties}
                     viewMode={viewMode}
+                    entitiesCount={docsCount}
                     openNewDocument={openNewDocument}
                     compact={isCompact}/>}
                 actions={
@@ -1493,7 +1485,7 @@ export function EntitiesCount({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [path, filterKey, sortKey, searchString]);
 
-    // Count is now displayed in the breadcrumb bar, this component only fetches and reports
+    // The toolbar renders the count; this component only fetches and reports it
     return null;
 }
 

package/src/components/CollectionViewBinding/CollectionViewStartActions.tsx

@@ -4,7 +4,7 @@ import React, { useState, useCallback } from "react";
 import { useAuthController, useLargeLayout, useTranslation, useSlot } from "@rebasepro/app";
 import { CollectionActionsProps, EntityTableController, SelectionController, AdminCollection, ViewMode } from "@rebasepro/admin-types";
 import { ErrorBoundary, iconSize } from "@rebasepro/ui";
-import { Badge, Button, cls, FilterIcon, IconButton, Tooltip, XIcon } from "@rebasepro/ui";
+import { Badge, Button, cls, FilterIcon, IconButton, Skeleton, Tooltip, XIcon } from "@rebasepro/ui";
 import { ClearFilterSortButton } from "../ClearFilterSortButton";
 import { FiltersDialog } from "./FiltersDialog";
 import { FilterPresetsButton } from "./FilterPresetsButton";
@@ -24,6 +24,14 @@ export type CollectionViewStartActionsProps<M extends Record<string, unknown>> =
     selectionController: SelectionController<M>;
     tableController: EntityTableController<M>;
     collectionEntitiesCount?: number;
+    /**
+     * Number of records the current filters and search resolve to, rendered at
+     * the end of this group.
+     * - `undefined`: not applicable
+     * - `null`: still counting
+     * - number: the count
+     */
+    entitiesCount?: number | null;
     /**
      * Resolved properties from the collection for the filters dialog
      */
@@ -45,6 +53,7 @@ export function CollectionViewStartActions<M extends Record<string, unknown>>({
     selectionController,
     tableController,
     collectionEntitiesCount,
+    entitiesCount,
     resolvedProperties,
     viewMode,
     compact,
@@ -174,6 +183,26 @@ parentEntityIds,
         />
     ) : null;
 
+    // The count closes the group the filter, sort and preset controls open: it
+    // is what they resolve to. It used to live in the breadcrumb trail, which
+    // the app bar owns — and a collection rendered without an app bar has no
+    // breadcrumbs, so the number simply disappeared.
+    //
+    // Hidden on the same layouts the trail was (`hidden lg:block` there) and in
+    // the split view, where this toolbar is a few hundred pixels wide and
+    // scrolls: a passive readout is the first thing that should give up its
+    // room to the controls.
+    const countBadge = !iconOnlyToolbar && entitiesCount !== undefined ? (
+        <Tooltip title={t("records_in_view")} key={"entities_count"}>
+            {entitiesCount === null
+                ? <Skeleton className={"w-8 h-4 rounded-md mx-1"}/>
+                : <span
+                    className={"mx-1 text-xs text-surface-accent-600 dark:text-surface-accent-400 bg-surface-100 dark:bg-surface-800 px-1.5 py-0.5 rounded tabular-nums"}>
+                    {entitiesCount.toLocaleString()}
+                </span>}
+        </Tooltip>
+    ) : null;
+
     const actions: React.ReactNode[] = [
         backButton,
         filtersButton,
@@ -183,7 +212,8 @@ parentEntityIds,
             tableController={tableController}
             compact={iconOnlyToolbar}
             enabled={!collection.fixedFilter}/>,
-        filterPresetsButton
+        filterPresetsButton,
+        countBadge
     ];
 
     const pluginActionsStart = useSlot("collection.actions.start", actionProps);

package/src/components/CollectionViewBinding/EntityCardBinding.tsx

@@ -154,14 +154,16 @@ export function EntityCardBinding<M extends Record<string, unknown> = Record<str
 
             {/* Content area */}
             <div className="p-3">
-                {/* Entity ID */}
-                <Typography
-                    variant="caption"
-                    color="disabled"
-                    className="font-mono truncate block"
-                >
-                    {entity.id}
-                </Typography>
+                {/* No id line here.
+                    A card used to print the row id above its title, always —
+                    a truncated uuid (`isId: "uuid"` is the default) too short
+                    to copy and not what a card is read for. The list row and
+                    the board card show an id only when nothing else names the
+                    record; the card was the one surface that showed it even
+                    when it had a title, and the id is still the fallback below
+                    for a record that has none. The table's ID column, which is
+                    full width, copyable and governed by
+                    `hideIdFromCollection`, is where an id is actually read. */}
 
                 {/* Title slot */}
                 <div className="truncate my-1 text-sm font-medium min-h-[20px]">

package/src/components/DefaultAppBar.tsx

@@ -194,16 +194,6 @@ export const DefaultAppBar = function DefaultAppBar({
                                     <Typography variant={"body2"}>
                                         {breadcrumb.title}
                                     </Typography>
-                                    {/* Show count badge for collection breadcrumbs: undefined = not applicable, null = loading, number = count */}
-                                    {breadcrumb.count !== undefined && (
-                                        breadcrumb.count !== null ? (
-                                            <span className="text-xs text-surface-accent-500 dark:text-surface-accent-400 bg-surface-100 dark:bg-surface-800 px-1 py-0 rounded">
-                                                {breadcrumb.count}
-                                            </span>
-                                        ) : (
-                                            <Skeleton className="w-8 h-4 rounded-md"/>
-                                        )
-                                    )}
                                 </div>
                             </Link>
                         </React.Fragment>;

package/src/components/DetailViewBinding.tsx

@@ -619,6 +619,24 @@ entityId }
                     onSideTabClick(value);
                 }}>
 
+                {/* Before the record, not after it.
+
+                    `position: "start"` used to mean "first among the custom
+                    views", which put it after a tab it was already after: the
+                    record's own tab is drawn here unconditionally, so "start"
+                    and "end" only ever ordered the custom views against each
+                    other, and no collection could open with anything but the
+                    form on the left.
+
+                    A cover — a read-only summary of the record, the thing an
+                    operator opens a row to see — belongs in front of the form
+                    that edits it. That is what `defaultSelectedView` already
+                    allowed, and the strip contradicted it by drawing the
+                    selected tab second. Views that say nothing still land after
+                    the record, so nothing moves for a collection that never
+                    asked. */}
+                {customViewTabsStart}
+
                 <Tab value={MAIN_TAB_VALUE}
                      className={cls(ENTITY_VIEW_TAB_CLASS, ENTITY_VIEW_TAB_LABEL_CLASS)}>
                     <span className="flex items-center gap-1.5">
@@ -627,7 +645,6 @@ entityId }
                     </span>
                 </Tab>
 
-                {customViewTabsStart}
                 {customViewTabsEnd}
                 {subcollectionTabs}
             </Tabs>

package/src/components/EditViewBinding.tsx

@@ -45,6 +45,7 @@ import type { EntityFormBindingProps } from "../form";
 import type { OnUpdateParams } from "../types/components/EntityFormProps";
 import { EditFormActions } from "./EditFormActions";
 import { EntityIdentityBar } from "./EntityIdentityBar";
+import { useUndoableDiscard } from "../form/useUndoableDiscard";
 import { SplitListCloseButton } from "./CollectionViewBinding/SplitListCloseButton";
 import { SplitListShowButton } from "./CollectionViewBinding/SplitListShowButton";
 import { useRecordActions } from "../hooks/useRecordActions";
@@ -295,6 +296,8 @@ export function EditViewBindingInner<M extends Record<string, unknown>>({
 
     const largeLayout = useLargeLayout();
 
+    const discard = useUndoableDiscard();
+
     const customizationController = useCustomizationController();
     const plugins = customizationController.plugins;
 
@@ -879,7 +882,11 @@ parentEntityIds,
             // Welded to Save in the split, its own button in the overlays.
             saveAndClosePlacement={layout === "split" ? "menu" : "button"}
             onClose={onCloseRequest}
-            onDiscard={canEdit && formContext ? () => formContext.formex.resetForm() : undefined}
+            // Unlike the form's own Discard, this one does not stop to ask —
+            // so it has to be reversible. See {@link useUndoableDiscard}.
+            onDiscard={canEdit && formContext
+                ? () => discard(formContext.formex, status)
+                : undefined}
             onInspect={includeJsonView ? () => setInspectorTab("json") : undefined}
             onViewHistory={includeHistoryView ? () => setInspectorTab("history") : undefined}
             externalLink={usedEntity
@@ -930,6 +937,24 @@ parentEntityIds,
                     onSideTabClick(value);
                 }}>
 
+                {/* Before the record, not after it.
+
+                    `position: "start"` used to mean "first among the custom
+                    views", which put it after a tab it was already after: the
+                    record's own tab is drawn here unconditionally, so "start"
+                    and "end" only ever ordered the custom views against each
+                    other, and no collection could open with anything but the
+                    form on the left.
+
+                    A cover — a read-only summary of the record, the thing an
+                    operator opens a row to see — belongs in front of the form
+                    that edits it. That is what `defaultSelectedView` already
+                    allowed, and the strip contradicted it by drawing the
+                    selected tab second. Views that say nothing still land after
+                    the record, so nothing moves for a collection that never
+                    asked. */}
+                {customViewTabsStart}
+
                 <Tab value={MAIN_TAB_VALUE}
                      className={cls(ENTITY_VIEW_TAB_CLASS, ENTITY_VIEW_TAB_LABEL_CLASS)}>
                     <span className="flex items-center gap-1.5">
@@ -938,7 +963,6 @@ parentEntityIds,
                     </span>
                 </Tab>
 
-                {customViewTabsStart}
 
                 {customViewTabsEnd}
 

package/src/components/ReferenceTable/SelectionTableBinding.tsx

@@ -225,7 +225,16 @@ function SelectionTableBindingInternal<M extends Record<string, unknown>>(
         sidePanelController.open({
             path: path,
             collection,
-            updateUrl: true,
+            // No URL, for the reason `RelationSelector` does the same: this
+            // panel is a step inside the selection dialog, which is itself a
+            // step inside whatever form opened it. `useUnsavedChangesDialog`
+            // blocks on a *pathname* change, and this panel's path is a
+            // different collection from the one being edited — so closing it
+            // raced the panel clearing its own dirty flag and answered a
+            // successful save with "There are unsaved changes", leaving the URL
+            // on the target collection. A record that does not exist yet has no
+            // address worth restoring anyway.
+            updateUrl: false,
             onUpdate: ({ entity }) => {
                 setEntitiesDisplayedFirst([entity, ...entitiesDisplayedFirst]);
                 onEntityClick(entity);

package/src/components/RelationSelector.tsx

@@ -14,6 +14,7 @@ import {
     focusedDisabled,
     IconButton,
     iconSize,
+    PlusIcon,
     PopoverPrimitive,
     SearchIcon,
     Separator,
@@ -26,7 +27,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { Entity, EntityRelation, FilterValues, Relation, getCollectionDataPath } from "@rebasepro/types";
 import { EntityPreviewBindingData } from "./EntityPreviewBinding";
-import { useData, useRelationSelector } from "@rebasepro/app";
+import { getTitlePropertyKey, useData, usePermissions, useRelationSelector, useTranslation } from "@rebasepro/app";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { normalizeToEntityRelation } from "@rebasepro/common";
 
@@ -105,6 +106,14 @@ export interface RelationSelectorProps {
      */
     emptyCollectionText?: string;
     loadingText?: string;
+    /**
+     * Whether the open list offers to create a row in the target collection.
+     * Defaults to `true`. The offer is shown only when the user could actually
+     * insert into that collection — the same permission check the selection
+     * dialog's "Add" button makes — so turning this off is for the cases where
+     * creating is possible but not wanted, like a filter.
+     */
+    allowCreate?: boolean;
 }
 
 export const RelationSelector = React.forwardRef<
@@ -130,14 +139,18 @@ export const RelationSelector = React.forwardRef<
             noResultsText = "No matches.",
             emptyText = "Select…",
             emptyCollectionText,
-            loadingText = "Loading..."
+            loadingText = "Loading...",
+            allowCreate = true
         },
         ref
     ) => {
 
         const collection = relation.target();
+        const dataPath = getCollectionDataPath(collection);
         const dataClient = useData();
         const sidePanelController = useSidePanel();
+        const { canCreate } = usePermissions();
+        const { t } = useTranslation();
         const contextPortalContainer = usePortalContainer();
         const multiple = multipleOverride ?? relationCardinality(relation) === "many";
 
@@ -167,7 +180,7 @@ export const RelationSelector = React.forwardRef<
             loadMore,
             entityToRelationItem
         } = useRelationSelector({
-            path: getCollectionDataPath(collection),
+            path: dataPath,
             collection,
             fixedFilter,
             pageSize,
@@ -393,6 +406,13 @@ relation } as RelationItem;
             else onValueChange?.(selected[0]?.relation);
         }, [onValueChange, multiple]);
 
+        // The picker can hand its selection over long after the render that
+        // built the callback — a row created in the side panel arrives whenever
+        // the person saves it — so the emitter is read from a ref rather than
+        // captured.
+        const emitValueChangeRef = useRef(emitValueChange);
+        emitValueChangeRef.current = emitValueChange;
+
         // Helper: compute the "IDs fingerprint" for a set of RelationItems
         // so we can mark it in localSelectionIdsRef and skip re-resolution.
         const computeSelectionFingerprint = useCallback((items: RelationItem[]): string => {
@@ -483,6 +503,73 @@ relation } as RelationItem;
             pinnedIdsRef.current = null;
         }, []);
 
+        // Pointing at a row that does not exist yet.
+        //
+        // Until now the only way out of that was to abandon the form, go to the
+        // other collection, create the row, come back and start again — and on
+        // a new record that meant losing everything typed so far. The side
+        // panel already stacks (the selection dialog creates from inside itself
+        // this way), so the picker can open a create form over the form it
+        // belongs to and select what comes back.
+        const canCreateTarget = allowCreate && canCreate(collection, dataPath);
+
+        // A search that matched nothing is the name the person was looking for,
+        // so it seeds the new row. Only when the title lands on a plain string
+        // property: putting free text into an enum, a relation or a computed
+        // property would be worse than not prefilling at all.
+        const buildDefaultValues = useCallback((searchText: string): Record<string, unknown> | undefined => {
+            const trimmed = searchText.trim();
+            if (!trimmed) return undefined;
+            const titleKey = getTitlePropertyKey(collection);
+            if (!titleKey || titleKey.includes(".")) return undefined;
+            const titleProperty = collection.properties?.[titleKey];
+            // A property builder is a function, and it decides its own value.
+            if (!titleProperty || typeof titleProperty === "function") return undefined;
+            if (titleProperty.type !== "string" || titleProperty.enum) return undefined;
+            return { [titleKey]: trimmed };
+        }, [collection]);
+
+        const handleCreateNew = useCallback(() => {
+            const defaultValues = buildDefaultValues(searchString);
+            closePopover();
+            sidePanelController.open({
+                path: dataPath,
+                collection,
+                // No URL. This panel is a detour inside the form you are
+                // filling in, not somewhere you navigated to, and its address
+                // would restore nothing anyway — a record that does not exist
+                // yet has none.
+                //
+                // Pushing one made closing it a *pathname* change, which is
+                // exactly what the unsaved-changes blocker watches
+                // (`useUnsavedChangesDialog`). So saving the new row raced the
+                // panel clearing its own dirty flag, and often enough lost:
+                // "There are unsaved changes" over a record that had just been
+                // saved, with the URL stranded on the target collection. Worst
+                // of all in the case this feature exists for — the outer form
+                // has content in it, which is the whole reason not to leave.
+                updateUrl: false,
+                // Saving is the whole point of the detour; the panel goes away
+                // and the picker is left holding the row it made.
+                closeOnSave: true,
+                defaultValues,
+                onUpdate: ({ entity }) => {
+                    if (!entity) return;
+                    const item = entityToRelationItemRef.current(entity, new EntityRelation(entity.id, dataPath));
+                    const current = selectedItemsRef.current;
+                    const newSelected = multiple
+                        ? [...current.filter(i => String(i.id) !== String(item.id)), item]
+                        : [item];
+                    setSelectedItems(newSelected);
+                    // Same bookkeeping `onItemClick` does: mark the fingerprint
+                    // so the resolution effect does not re-fetch the row we
+                    // already hold when the form echoes the value back.
+                    localSelectionIdsRef.current = newSelected.map(i => String(i.id)).sort().join(",");
+                    emitValueChangeRef.current(newSelected);
+                }
+            });
+        }, [buildDefaultValues, searchString, closePopover, sidePanelController, dataPath, collection, multiple]);
+
         // Text, not `EmptyValue`. That component draws a small grey rounded bar
         // with no text in it, which is the same shape the `Skeleton` component
         // uses while data is in flight — so a relation you simply had not filled
@@ -787,6 +874,31 @@ relation } as RelationItem;
                                         )}
                                     </CommandPrimitive.Group>
                                 </CommandPrimitive.List>
+                                {canCreateTarget && <>
+                                    <Separator orientation="horizontal" className="my-0"/>
+                                    {/* Outside the scrolling list on purpose: it
+                                        is most wanted exactly when the list is
+                                        long and nothing in it matched. */}
+                                    <button
+                                        type="button"
+                                        data-relation-selector-create
+                                        onMouseDown={(e) => {
+                                            e.preventDefault();
+                                            e.stopPropagation();
+                                        }}
+                                        onClick={handleCreateNew}
+                                        className={cls(
+                                            "w-full flex flex-row items-center gap-2 px-4 py-3 text-sm text-left",
+                                            "text-primary hover:bg-surface-accent-50 dark:hover:bg-surface-800"
+                                        )}>
+                                        <PlusIcon size={iconSize.smallest}/>
+                                        <span className="truncate">
+                                            {searchString.trim()
+                                                ? t("add_named", { name: searchString.trim() })
+                                                : t("add_specific", { name: collection.singularName ?? collection.name })}
+                                        </span>
+                                    </button>
+                                </>}
                             </CommandPrimitive>
                         </PopoverPrimitive.Content>
                     </PopoverPrimitive.Portal>

package/src/contexts/BreacrumbsContext.tsx

@@ -4,8 +4,6 @@ import type { BreadcrumbEntry, BreadcrumbsController } from "@rebasepro/admin-ty
 const DEFAULT_BREADCRUMBS_CONTROLLER: BreadcrumbsController = {
     breadcrumbs: [],
     set: () => {
-    },
-    updateCount: () => {
     }
 };
 
@@ -23,17 +21,10 @@ export const BreadcrumbsProvider: React.FC<BreadcrumbsProviderProps> = ({ childr
         breadcrumbs: BreadcrumbEntry[];
     }) => {
         setBreadcrumbs(prev => {
-            const next = props.breadcrumbs.map(newEntry => {
-                const prevEntry = newEntry.id ? prev.find(p => p.id === newEntry.id) : undefined;
-                if (prevEntry && newEntry.count === null && typeof prevEntry.count === "number") {
-                    return { ...newEntry,
-count: prevEntry.count };
-                }
-                return newEntry;
-            });
+            const next = props.breadcrumbs;
             // Bail out if nothing changed — return same reference to skip re-render
             if (prev.length === next.length && prev.every((p, i) =>
-                p.title === next[i].title && p.url === next[i].url && p.id === next[i].id && p.count === next[i].count
+                p.title === next[i].title && p.url === next[i].url && p.id === next[i].id
             )) {
                 return prev;
             }
@@ -41,18 +32,10 @@ count: prevEntry.count };
         });
     }, []);
 
-    const updateCount = useCallback((id: string, count: number | null | undefined) => {
-        setBreadcrumbs(prev => prev.map(entry =>
-            entry.id === id ? { ...entry,
-count } : entry
-        ));
-    }, []);
-
     const value = useMemo(() => ({
         breadcrumbs,
-        set,
-        updateCount
-    }), [breadcrumbs, set, updateCount]);
+        set
+    }), [breadcrumbs, set]);
 
     return (
         <BreadcrumbContext.Provider value={value}>

package/src/form/EntityForm.tsx

@@ -28,6 +28,7 @@ import { CustomFieldValidator, getEntitySchema } from "./validation";
 import { EntityFormActions } from "./EntityFormActions";
 import type { EntityFormActionsProps } from "../types/components/EntityFormActionsProps";
 import { LocalChangesMenu } from "./components/LocalChangesMenu";
+import { useUndoableDiscard } from "./useUndoableDiscard";
 
 import { mergeDeep } from "@rebasepro/utils";
 import {
@@ -121,6 +122,8 @@ export function EntityForm<M extends Record<string, unknown>>({
     const [isSavingAutoSave, setIsSavingAutoSave] = useState<boolean>(false);
     const [discardDialogOpen, setDiscardDialogOpen] = useState<boolean>(false);
 
+    const discard = useUndoableDiscard();
+
     const autoSave = collection.formAutoSave;
 
     // Use externally computed initial values if provided, otherwise compute from entity + collection
@@ -618,8 +621,10 @@ export function EntityForm<M extends Record<string, unknown>>({
                 <DialogContent>
                     <Typography>
                         {status === "existing"
-                            ? "All unsaved changes will be lost. This cannot be undone."
-                            : "All entered values will be cleared. This cannot be undone."}
+                            ? "All unsaved changes will be lost. "
+                            : "All entered values will be cleared. "}
+                        You can bring them back with Undo (⌘Z / Ctrl+Z), or from
+                        the notification, for as long as this form stays open.
                     </Typography>
                 </DialogContent>
                 <DialogActions>
@@ -628,7 +633,7 @@ export function EntityForm<M extends Record<string, unknown>>({
                     </Button>
                     <Button variant={"filled"} color={"error"} onClick={() => {
                         setDiscardDialogOpen(false);
-                        formex.resetForm({ values: baseInitialValues as M });
+                        discard(formex, status, baseInitialValues);
                     }}>
                         {status === "existing" ? "Discard" : "Clear"}
                     </Button>