@rebasepro/admin 0.13.0 → 0.13.1-canary.gcd6689e

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/admin",
   "type": "module",
-  "version": "0.13.0",
+  "version": "0.13.1-canary.gcd6689e",
   "description": "Rebase CMS — content management views, forms, and routing",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -83,14 +83,14 @@
     "react-dropzone": "^19.1.1",
     "react-use-measure": "^2.1.7",
     "zod": "^4.4.3",
-    "@rebasepro/admin-types": "0.13.0",
-    "@rebasepro/app": "0.13.0",
-    "@rebasepro/common": "0.13.0",
-    "@rebasepro/inference": "0.13.0",
-    "@rebasepro/forms": "0.13.0",
-    "@rebasepro/ui": "0.13.0",
-    "@rebasepro/types": "0.13.0",
-    "@rebasepro/utils": "0.13.0"
+    "@rebasepro/admin-types": "0.13.1-canary.gcd6689e",
+    "@rebasepro/app": "0.13.1-canary.gcd6689e",
+    "@rebasepro/forms": "0.13.1-canary.gcd6689e",
+    "@rebasepro/inference": "0.13.1-canary.gcd6689e",
+    "@rebasepro/common": "0.13.1-canary.gcd6689e",
+    "@rebasepro/types": "0.13.1-canary.gcd6689e",
+    "@rebasepro/ui": "0.13.1-canary.gcd6689e",
+    "@rebasepro/utils": "0.13.1-canary.gcd6689e"
   },
   "peerDependencies": {
     "react": ">=19.2.7",

package/src/components/AdditionalFieldValue.tsx

@@ -0,0 +1,68 @@
+import type { AdditionalFieldDelegate, RebaseContext } from "@rebasepro/admin-types";
+import type { Entity } from "@rebasepro/types";
+import React, { useEffect, useState } from "react";
+
+export interface AdditionalFieldValueProps<M extends Record<string, unknown>> {
+    field: AdditionalFieldDelegate<M>;
+    entity: Entity<M>;
+    context: RebaseContext;
+}
+
+/**
+ * Renders an `additionalFields` entry that supplies a `value` rather than a
+ * `Builder`.
+ *
+ * `value` is typed `string | number | Promise<string | number>`, and the promise
+ * arm has been part of that type from the start — the CSV export awaits it
+ * correctly. Every *renderer* called `.toString()` on the result instead, so an
+ * async value drew the literal text `[object Promise]` in the cell: a shape the
+ * type promised, that worked in one of its two consumers, and failed silently in
+ * the other. That is what made the obvious port of a FireCMS column — one that
+ * fetches a title from a subcollection — look supported and not be.
+ *
+ * Three call sites had the same three lines copied between them (the table cell,
+ * the form and the read-only record), which is why the bug reached all three.
+ * Now there is one.
+ */
+export function AdditionalFieldValue<M extends Record<string, unknown>>({
+    field,
+    entity,
+    context
+}: AdditionalFieldValueProps<M>) {
+
+    const [resolved, setResolved] = useState<string | number | undefined>(() => {
+        const value = field.value?.({ entity, context });
+        // A synchronous value is available on the first render, so it never
+        // flashes empty on its way in.
+        return isPromise(value) ? undefined : value;
+    });
+
+    useEffect(() => {
+        const value = field.value?.({ entity, context });
+        if (!isPromise(value)) {
+            setResolved(value);
+            return;
+        }
+
+        // The row may scroll out, or the record change, before this lands.
+        let live = true;
+        value.then(
+            result => {
+                if (live) setResolved(result);
+            },
+            error => {
+                if (live) setResolved(undefined);
+                console.warn(`[rebase] Additional field "${field.key}" failed to resolve:`, error);
+            }
+        );
+        return () => {
+            live = false;
+        };
+    }, [field, entity, context]);
+
+    return <>{resolved === undefined || resolved === null ? null : String(resolved)}</>;
+}
+
+function isPromise(value: unknown): value is Promise<string | number | undefined> {
+    return typeof (value as Promise<unknown> | undefined)?.then === "function";
+}

package/src/components/CollectionTableBinding/CollectionTableBinding.tsx

@@ -1,4 +1,5 @@
 import type { AdditionalFieldDelegate, AdminCollection } from "@rebasepro/admin-types";
+import { AdditionalFieldValue } from "../AdditionalFieldValue";
 import React, { useCallback, useMemo, useRef } from "react";
 import { Entity, User, Property } from "@rebasepro/types";
 import { CollectionSize, RebaseContext } from "@rebasepro/admin-types";
@@ -214,12 +215,10 @@ export const CollectionTableBinding = function CollectionTableBinding<M extends
 
         const child: React.ReactNode = Builder
             ? <Builder entity={entity} context={context}/>
-            : <>
-                {additionalField.value?.({
-                    entity,
-                    context: context as RebaseContext
-                })?.toString()}
-            </>;
+            : <AdditionalFieldValue
+                field={additionalField}
+                entity={entity}
+                context={context as RebaseContext}/>;
 
         return (
             <EntityTableCell

package/src/components/CollectionViewBinding/BoardCardBinding.tsx

@@ -6,7 +6,8 @@ import { PropertyPreview } from "../../preview";
 import { useAuthController, useCustomizationController } from "@rebasepro/app";
 import { IconForView } from "@rebasepro/app";
 import { BoardItemViewProps } from "@rebasepro/ui";
-import { useCollectionSlotKeys, resolveEntitySlots } from "./usePreviewSlots";
+import { useCollectionSlotKeys, useEntitySlots } from "./usePreviewSlots";
+import { SlotValue } from "./SlotValue";
 import type { AdminCollection } from "@rebasepro/admin-types";
 
 export type BoardCardBindingProps<M extends Record<string, unknown> = Record<string, unknown>> = BoardItemViewProps<Entity<M>> & {
@@ -46,13 +47,10 @@ function BoardCardBindingInner<M extends Record<string, unknown> = Record<string
         customizationController.propertyConfigs
     );
 
-    const slots = useMemo(
-        () => resolveEntitySlots(
-            entity as Entity<Record<string, unknown>>,
-            collection as AdminCollection<Record<string, unknown>>,
-            slotKeys
-        ),
-        [entity, collection, slotKeys]
+    const slots = useEntitySlots(
+        entity as Entity<Record<string, unknown>>,
+        collection as AdminCollection<Record<string, unknown>>,
+        slotKeys
     );
 
     const handleClick = useCallback((e: React.MouseEvent) => {
@@ -126,13 +124,7 @@ function BoardCardBindingInner<M extends Record<string, unknown> = Record<string
                             selectionEnabled && "group-hover/card:opacity-30",
                             selected && "opacity-0"
                         )}>
-                            <PropertyPreview
-                                property={slots.image.property}
-                                propertyKey={slots.image.propertyKey}
-                                size="small"
-                                value={slots.image.value}
-                                fill={true}
-                            />
+                            <SlotValue slot={slots.image} size="small" fill={true}/>
                         </div>
                     ) : (
                         <div className={cls(
@@ -177,12 +169,7 @@ function BoardCardBindingInner<M extends Record<string, unknown> = Record<string
                     {/* Title slot */}
                     <div className="line-clamp-2 text-sm font-medium">
                         {slots.title ? (
-                            <PropertyPreview
-                                propertyKey={slots.title.propertyKey}
-                                value={slots.title.value}
-                                property={slots.title.property}
-                                size="small"
-                            />
+                            <SlotValue slot={slots.title} size="small"/>
                         ) : (
                             <span className="text-surface-500">{entity.id}</span>
                         )}
@@ -193,12 +180,7 @@ function BoardCardBindingInner<M extends Record<string, unknown> = Record<string
                             {typeof slots.subtitle.value === "string" ? (
                                 <Markdown source={slots.subtitle.value} size="small" />
                             ) : (
-                                <PropertyPreview
-                                    propertyKey={slots.subtitle.propertyKey}
-                                    value={slots.subtitle.value}
-                                    property={slots.subtitle.property}
-                                    size="small"
-                                />
+                                <SlotValue slot={slots.subtitle} size="small"/>
                             )}
                         </div>
                     ) : (

package/src/components/CollectionViewBinding/CollectionListViewBinding.tsx

@@ -24,7 +24,8 @@ import { getEntityPreviewKeys } from "../../util/previews";
 import { IconForView } from "@rebasepro/app";
 import { getIcon } from "@rebasepro/app";
 import { getValueInPath } from "@rebasepro/utils";
-import { useCollectionSlotKeys, resolveEntitySlots, type CollectionSlotKeys } from "./usePreviewSlots";
+import { useCollectionSlotKeys, useEntitySlots, type CollectionSlotKeys } from "./usePreviewSlots";
+import { SlotValue } from "./SlotValue";
 import { useAdminContext } from "../../hooks/useAdminContext";
 import { resolveEntityAction } from "../../util/resolutions";
 
@@ -628,8 +629,11 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
     selectionController?: SelectionController<M>;
     openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
 }) {
-    // ── Resolve slots (pure function, no hooks) ──
-    const slots = resolveEntitySlots(
+    // ── Resolve slots ──
+    // A hook now, not a pure call: a `display` resolver may have to fetch what
+    // fills a slot, so the row subscribes to the result and re-renders when it
+    // lands. `ListRow` is memoized, which is what keeps that to the one row.
+    const slots = useEntitySlots(
         entity as Entity<Record<string, unknown>>,
         collection as AdminCollection<Record<string, unknown>>,
         slotKeys
@@ -696,7 +700,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
                 <div className="flex-shrink-0">
                     {slots.image ? (
                         <div className={cls("w-10 h-10 rounded-lg border relative overflow-hidden bg-surface-100 dark:bg-surface-900", defaultBorderMixin)}>
-                            <PropertyPreview propertyKey={slots.image.propertyKey} value={slots.image.value} property={slots.image.property} size="small" fill={true}/>
+                            <SlotValue slot={slots.image} size="small" fill={true}/>
                         </div>
                     ) : (
                         <div className={cls("w-10 h-10 rounded-lg bg-surface-100 dark:bg-surface-900 flex items-center justify-center border", defaultBorderMixin)}>
@@ -715,13 +719,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
                 <div className="truncate">
                     {slots.title?.value !== undefined ? (
                         <Typography component="div" variant="body2" className="font-semibold text-surface-900 dark:text-surface-50 truncate transition-colors group-hover:text-primary-600 dark:group-hover:text-primary-400">
-                            <PropertyPreview
-                                propertyKey={slots.title.propertyKey}
-                                value={slots.title.value}
-                                property={slots.title.property}
-                                size="small"
-                                textOnly={true}
-                            />
+                            <SlotValue slot={slots.title} size="small" textOnly={true}/>
                         </Typography>
                     ) : (
                         <Typography component="div" variant="body2" className="font-semibold text-surface-500 dark:text-surface-400 font-mono text-xs transition-colors group-hover:text-primary-600 dark:group-hover:text-primary-400">
@@ -734,13 +732,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
                 {slots.subtitle && (
                     <div className="truncate mt-0.5">
                         <Typography variant="caption" component="div" className="text-surface-500 dark:text-surface-400 truncate">
-                            <PropertyPreview
-                                propertyKey={slots.subtitle.propertyKey}
-                                value={slots.subtitle.value}
-                                property={slots.subtitle.property}
-                                size="small"
-                                textOnly={true}
-                            />
+                            <SlotValue slot={slots.subtitle} size="small" textOnly={true}/>
                         </Typography>
                     </div>
                 )}
@@ -825,12 +817,7 @@ const ListRow = React.memo(function ListRow<M extends Record<string, unknown>>({
                     {/* STATUS slot — hidden when row is narrow */}
                     {slots.status && (
                         <div className="flex-shrink-0 @max-[400px]:hidden">
-                            <PropertyPreview
-                                propertyKey={slots.status.propertyKey}
-                                value={slots.status.value}
-                                property={slots.status.property}
-                                size="small"
-                            />
+                            <SlotValue slot={slots.status} size="small"/>
                         </div>
                     )}
 

package/src/components/CollectionViewBinding/EntityCardBinding.tsx

@@ -16,7 +16,8 @@ import {
 } from "@rebasepro/app";
 import { useAnalyticsController } from "@rebasepro/app";
 import { IconForView } from "@rebasepro/app";
-import { useCollectionSlotKeys, resolveEntitySlots } from "./usePreviewSlots";
+import { useCollectionSlotKeys, useEntitySlots } from "./usePreviewSlots";
+import { SlotValue } from "./SlotValue";
 
 export type EntityCardBindingProps<M extends Record<string, unknown> = Record<string, unknown>> = {
     entity: Entity<M>;
@@ -56,13 +57,10 @@ export function EntityCardBinding<M extends Record<string, unknown> = Record<str
         customizationController.propertyConfigs
     );
 
-    const slots = useMemo(
-        () => resolveEntitySlots(
-            entity as Entity<Record<string, unknown>>,
-            collection as AdminCollection<Record<string, unknown>>,
-            slotKeys
-        ),
-        [entity, collection, slotKeys]
+    const slots = useEntitySlots(
+        entity as Entity<Record<string, unknown>>,
+        collection as AdminCollection<Record<string, unknown>>,
+        slotKeys
     );
 
     const handleClick = (e?: React.MouseEvent) => {
@@ -104,13 +102,7 @@ export function EntityCardBinding<M extends Record<string, unknown> = Record<str
             <div className="aspect-[4/3] relative overflow-hidden bg-surface-100 dark:bg-surface-900">
                 {slots.image ? (
                     <div className="w-full h-full">
-                        <PropertyPreview
-                            property={slots.image.property}
-                            propertyKey={slots.image.propertyKey}
-                            size="medium"
-                            value={slots.image.value}
-                            fill={true}
-                        />
+                        <SlotValue slot={slots.image} size="medium" fill={true}/>
                     </div>
                 ) : (
                     <div className="w-full h-full flex items-center justify-center">
@@ -160,12 +152,7 @@ export function EntityCardBinding<M extends Record<string, unknown> = Record<str
                 {/* Title slot */}
                 <div className="truncate my-1 text-sm font-medium min-h-[20px]">
                     {slots.title ? (
-                        <PropertyPreview
-                            propertyKey={slots.title.propertyKey}
-                            value={slots.title.value}
-                            property={slots.title.property}
-                            size="small"
-                        />
+                        <SlotValue slot={slots.title} size="small"/>
                     ) : (
                         <Typography variant="body2" className="text-surface-500">
                             {entity.id}
@@ -176,12 +163,7 @@ export function EntityCardBinding<M extends Record<string, unknown> = Record<str
                 {/* Subtitle slot */}
                 {slots.subtitle && (
                     <div className="line-clamp-3 [&_div]:line-clamp-3 text-xs text-surface-600 dark:text-surface-400 [&_p]:!my-1 [&_p:first-child]:!mt-0 [&_p:last-child]:!mb-0">
-                        <PropertyPreview
-                            propertyKey={slots.subtitle.propertyKey}
-                            value={slots.subtitle.value}
-                            property={slots.subtitle.property}
-                            size="small"
-                        />
+                        <SlotValue slot={slots.subtitle} size="small"/>
                     </div>
                 )}
 
@@ -211,12 +193,7 @@ export function EntityCardBinding<M extends Record<string, unknown> = Record<str
                 {/* Status slot */}
                 {slots.status && (
                     <div className="mt-1">
-                        <PropertyPreview
-                            propertyKey={slots.status.propertyKey}
-                            value={slots.status.value}
-                            property={slots.status.property}
-                            size="small"
-                        />
+                        <SlotValue slot={slots.status} size="small"/>
                     </div>
                 )}
             </div>

package/src/components/CollectionViewBinding/SlotValue.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
+import { PropertyPreview } from "../../preview";
+import type { PreviewSlot } from "./usePreviewSlots";
+
+export interface SlotValueProps {
+    slot: PreviewSlot | undefined;
+    size: PreviewSize;
+    /** Relations and references render as plain text rather than as cards. */
+    textOnly?: boolean;
+    /** Images only: fill the container rather than fitting inside it. */
+    fill?: boolean;
+}
+
+/**
+ * One display slot, rendered.
+ *
+ * A slot's value arrives one of two ways and they cannot be rendered the same:
+ *
+ * - **From a property** — render it with that property's own preview, so an
+ *   enum status keeps its colour, a date keeps its format and a storage path
+ *   becomes a thumbnail. This is why a declared path beats a resolver whenever
+ *   the value is actually on the record.
+ * - **From a resolver** — there is no property, because the value was computed
+ *   or fetched. All that can be said about it is that it is text.
+ *
+ * The branch lives here, once, rather than at each of the fourteen places the
+ * list row, the card and the board card render a slot. That count is the reason:
+ * the last time a rule like this was inlined per call site, it drifted into
+ * seven versions.
+ */
+export function SlotValue({ slot, size, textOnly, fill }: SlotValueProps) {
+
+    if (!slot || slot.value === undefined || slot.value === null) return null;
+
+    if (!slot.property || !slot.propertyKey) {
+        // Computed. Arrays (a `tags` resolver) join rather than rendering as
+        // "[object Object]" via String().
+        const text = Array.isArray(slot.value)
+            ? slot.value.map(item => String(item)).join(", ")
+            : String(slot.value);
+        return <>{text}</>;
+    }
+
+    return <PropertyPreview
+        propertyKey={slot.propertyKey}
+        value={slot.value as never}
+        property={slot.property}
+        size={size}
+        textOnly={textOnly}
+        fill={fill}/>;
+}

package/src/components/CollectionViewBinding/SplitListCloseButton.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { IconButton, iconSize, Tooltip, XIcon } from "@rebasepro/ui";
+import { ChevronsLeftIcon, IconButton, iconSize, Tooltip } from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/app";
 
 import { useSplitView } from "./SplitViewContext";
@@ -9,9 +9,11 @@ import { useSplitView } from "./SplitViewContext";
  * Closes the list of a split view, leaving the open record on its own.
  *
  * It leads the record's own app bar, where the breadcrumb starts — this is the
- * entity pane's old "Open full screen" button, moved to that edge and wearing an
- * X: closing the list and opening the record full screen are the same thing, so
- * there is one control and one route (`#full`) rather than two.
+ * entity pane's old "Open full screen" button, moved to that edge and wearing a
+ * double chevron pointing at the list it folds away: closing the list and
+ * opening the record full screen are the same thing, so there is one control
+ * and one route (`#full`) rather than two. Full screen carries the mirrored
+ * chevron to bring the list back.
  */
 export function SplitListCloseButton() {
 
@@ -26,7 +28,7 @@ export function SplitListCloseButton() {
                 size="small"
                 onClick={splitView.openFullScreen}
                 aria-label={t("hide_list")}>
-                <XIcon size={iconSize.smallest}/>
+                <ChevronsLeftIcon size={iconSize.smallest}/>
             </IconButton>
         </Tooltip>
     );

package/src/components/CollectionViewBinding/SplitListShowButton.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { ChevronsRightIcon, IconButton, iconSize, Tooltip } from "@rebasepro/ui";
+import { useTranslation } from "@rebasepro/app";
+
+/**
+ * Brings the list back beside a record that was opened full screen.
+ *
+ * The mirror of {@link SplitListCloseButton}: the same edge of the same bar,
+ * the same double chevron pointing the other way, and the same single route —
+ * showing the list is dropping the `#full` hash. It replaces the back arrow
+ * where it applies, because the list it unfolds already holds the record.
+ */
+export function SplitListShowButton({ onClick }: { onClick: () => void }) {
+
+    const { t } = useTranslation();
+
+    return (
+        <Tooltip title={t("show_list")}>
+            <IconButton
+                size="small"
+                onClick={onClick}
+                aria-label={t("show_list")}>
+                <ChevronsRightIcon size={iconSize.smallest}/>
+            </IconButton>
+        </Tooltip>
+    );
+}