@rebasepro/admin 0.13.0 → 0.13.1-canary.g3660bd5

package/src/components/EditViewBinding.tsx

@@ -45,6 +45,7 @@ import type { OnUpdateParams } from "../types/components/EntityFormProps";
 import { EditFormActions } from "./EditFormActions";
 import { EntityIdentityBar } from "./EntityIdentityBar";
 import { SplitListCloseButton } from "./CollectionViewBinding/SplitListCloseButton";
+import { SplitListShowButton } from "./CollectionViewBinding/SplitListShowButton";
 import { useRecordActions } from "../hooks/useRecordActions";
 import { useSideDialogContext } from "./SideDialogs";
 import { useAdminContext } from "../hooks/useAdminContext";
@@ -96,6 +97,12 @@ export interface EditViewBindingProps<M extends Record<string, unknown> = Record
      * of the breadcrumb — the side panel's close button.
      */
     barActionsStart?: React.ReactNode;
+    /**
+     * Full screen only: bring the list back beside this record. Set when the
+     * record was opened out of a split collection, so folding the list away is
+     * reversible; it takes the place of the back arrow when present.
+     */
+    onShowList?: () => void;
     formProps?: Partial<EntityFormBindingProps<M>>,
     /**
      * Pre-populate the form with these values when creating a new entity.
@@ -192,6 +199,7 @@ export function EditViewBindingInner<M extends Record<string, unknown>>({
     layout = "side_panel",
     barActions,
     barActionsStart,
+    onShowList,
     status,
     setStatus,
     formProps,
@@ -405,8 +413,8 @@ parentEntityIds,
 
     const displayTitle = useEntityDisplayTitle({
         collection,
+        entity: usedEntity,
         values: (formContext?.values ?? usedEntity?.values) as Record<string, unknown> | undefined,
-        entityId,
         status
     });
 
@@ -524,35 +532,39 @@ parentEntityIds,
     const FormViewBuilder = formViewConfig?.Builder ? resolveComponentRef<EntityCustomViewParams>(formViewConfig.Builder as ComponentRef<EntityCustomViewParams>) : null;
     const formViewIncludeActions = formViewConfig?.includeActions !== false;
 
-    const entityReadOnlyView = !canEdit && entity ? <div
-        className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", (canEdit || !mainViewVisible || selectedSecondaryForm) ? "hidden" : "")}>
-        <div
-            className={cls("relative flex flex-col max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit")}>
-            <Typography className={"mt-16 mb-8 mx-8"} variant={"h4"}>
-                {collection.singularName ?? collection.name}
-            </Typography>
-            {FormViewBuilder && readOnlyFormContext ? (
-                <ErrorBoundary>
-                    <Suspense fallback={<CircularProgressCenter />}>
-                        <FormViewBuilder
-                            collection={collection}
-                            parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
-                            entity={usedEntity}
-                            modifiedValues={usedEntity?.values}
-                            formContext={readOnlyFormContext as FormContext<Record<string, unknown>>}
-                        />
-                    </Suspense>
-                </ErrorBoundary>
-            ) : (
-                <EntityViewBinding
-                    className={"px-8 h-full overflow-auto"}
-                    entity={entity}
-                    path={path}
-                    collection={collection} />
-            )}
-            <div className="h-16" />
-        </div>
-    </div> : null;
+    // Without edit permission the record is rendered read-only — the same
+    // sections, spans and rail as the form, so losing the permission changes the
+    // controls and nothing else. The `h4` that used to head this repeated the
+    // collection name the identity bar above it already carries.
+    const entityReadOnlyView = !canEdit && entity ? (
+        FormViewBuilder && readOnlyFormContext
+            ? <div className={cls(
+                "flex-1 flex flex-row w-full overflow-y-auto justify-center",
+                (canEdit || !mainViewVisible || selectedSecondaryForm) ? "hidden" : ""
+            )}>
+                <div className={"w-full max-w-3xl 2xl:max-w-4xl flex flex-col pt-6 pb-16 px-5 sm:px-8"}>
+                    <ErrorBoundary>
+                        <Suspense fallback={<CircularProgressCenter />}>
+                            <FormViewBuilder
+                                collection={collection}
+                                parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
+                                entity={usedEntity}
+                                modifiedValues={usedEntity?.values}
+                                formContext={readOnlyFormContext as FormContext<Record<string, unknown>>}
+                            />
+                        </Suspense>
+                    </ErrorBoundary>
+                </div>
+            </div>
+            : <EntityViewBinding
+                className={cls((canEdit || !mainViewVisible || selectedSecondaryForm) ? "hidden" : "")}
+                entity={entity}
+                path={path}
+                collection={collection}
+                asPage
+                openEntityMode={layout}
+                formContext={readOnlyFormContext}/>
+    ) : null;
 
     const entityView = FormViewBuilder ? (
         // formView.Builder replaces the default form
@@ -687,6 +699,9 @@ parentEntityIds,
 
         <EntityIdentityBar
             collection={collection as AdminCollection}
+            collectionUrl={layout === "full_screen" || layout === "split"
+                ? withViewMode(urlController.buildUrlCollectionPath(path))
+                : undefined}
             title={displayTitle}
             entityId={status === "existing" ? entityId : undefined}
             status={status}
@@ -696,8 +711,10 @@ parentEntityIds,
             saveDisabled={!canEdit || saveDisabled}
             // Full screen replaces the collection entirely, leaving browser Back
             // as the only route to it. The detail view has carried this arrow
-            // for that reason; the edit view is reached the same way.
-            onBack={layout === "full_screen"
+            // for that reason; the edit view is reached the same way. Where the
+            // list can be unfolded back beside the record, that chevron reaches
+            // the same collection and the arrow beside it is noise.
+            onBack={layout === "full_screen" && !onShowList
                 ? () => navigate(withViewMode(urlController.buildUrlCollectionPath(path)))
                 : undefined}
             onSave={canEdit && formContext ? () => {
@@ -711,14 +728,18 @@ parentEntityIds,
             onDiscard={canEdit && formContext ? () => formContext.formex.resetForm() : undefined}
             onInspect={includeJsonView ? () => setInspectorTab("json") : undefined}
             onViewHistory={includeHistoryView ? () => setInspectorTab("history") : undefined}
+            externalLink={usedEntity
+                ? customizationController?.entityLinkBuilder?.({ entity: usedEntity })
+                : undefined}
             recordActions={recordActionItems}
             pluginActions={formPluginActions}
             leading={<>
                 {barActionsStart}
                 {/* Split view: closing the list is opening this record
                     full screen, and the control for it belongs at this
-                    bar's leading edge. */}
+                    bar's leading edge. Full screen carries its mirror. */}
                 {layout === "split" && <SplitListCloseButton/>}
+                {layout === "full_screen" && onShowList && <SplitListShowButton onClick={onShowList}/>}
             </>}
             trailing={<>
                 {pluginActionsTop}

package/src/components/EntityDisplayHeader.tsx

@@ -0,0 +1,170 @@
+import type { AdminCollection } from "@rebasepro/admin-types";
+import type { Entity, Property } from "@rebasepro/types";
+import React from "react";
+import { Chip, cls, Typography } from "@rebasepro/ui";
+
+import { useEntityDisplayValues } from "../hooks/useEntityDisplay";
+import { PropertyPreview } from "../preview";
+
+/**
+ * The roles whose property the read-only view takes out of its grid.
+ *
+ * A role rendered here and left in the grid prints the value twice, so the
+ * header's own rendering and this list have to agree — but the list is *not*
+ * simply "every role the header draws". Two are deliberately absent:
+ *
+ * `title`, because the heading above a record and a labelled field are not the
+ * same thing. `Order #` is a column with a name, a description and a format that
+ * someone reads the record to find; `ORD-2026-0043` sitting in the identity bar
+ * beside the breadcrumb is a label for the page. Removing the field because the
+ * page is named after it takes a value out of the record on the grounds that its
+ * text appears elsewhere, which is not a reason — a value in the database is
+ * shown.
+ *
+ * `date`, because the rail's record block already carries the timestamps, and a
+ * collection whose `date` role points at a business date — an order date, a due
+ * date — wants that field where it declared it.
+ */
+export const HEADER_DISPLAY_ROLES = ["subtitle", "image", "status", "tags"] as const;
+
+export interface EntityDisplayHeaderProps<M extends Record<string, unknown>> {
+    entity: Entity<M>;
+    collection: AdminCollection<M>;
+    /**
+     * Render the title. Off when an identity bar above already shows it — which
+     * is every full-page use — and on inside a dialog that has no bar.
+     */
+    showTitle?: boolean;
+    className?: string;
+}
+
+/**
+ * What the record *is*, above the fields that say what it holds.
+ *
+ * A record's picture, name, state and labels are the things you opened the page
+ * to see; on the plain grid they were fields like any other, so an order's
+ * status sat in the second cell of the first row at the same size and weight as
+ * its shipping cost, and its tags were a wrapped list of grey text.
+ *
+ * Every role here comes from `admin.display` and nothing is derived except the
+ * title, which was already derived for the identity bar. A collection that
+ * declares no display block therefore gets no header at all rather than a
+ * heuristic guess at which of its enums is a "status" — the panel does not know
+ * what these records are, and a wrong guess here is louder than no guess.
+ *
+ * A role filled by a *property* renders through {@link PropertyPreview}, so a
+ * status keeps its enum's colour and an image stays a storage thumbnail. A role
+ * filled by a resolver has no property behind it and renders as what it
+ * returned.
+ */
+export function EntityDisplayHeader<M extends Record<string, unknown>>({
+    entity,
+    collection,
+    showTitle = false,
+    className
+}: EntityDisplayHeaderProps<M>) {
+
+    const display = useEntityDisplayValues<M>({
+        collection,
+        entity
+    });
+
+    const title = showTitle ? asText(display.title.value) : undefined;
+    const subtitle = asText(display.subtitle.value);
+    const tags = asTags(display.tags.value);
+
+    const hasStatus = display.status.value !== undefined;
+    const hasImage = display.image.value !== undefined;
+
+    if (!title && !subtitle && !hasStatus && !hasImage && !tags.length) return null;
+
+    return (
+        <div className={cls("flex items-start gap-4 min-w-0", className)}>
+
+            {hasImage && (
+                <div className={"shrink-0 w-16 h-16 rounded-lg overflow-hidden flex items-center justify-center bg-surface-100 dark:bg-surface-800"}>
+                    <RoleValue role={display.image} propertyFallback={
+                        // A resolver's image is documented as a URL; a storage
+                        // path only resolves when a property is behind it, which
+                        // is what carries the storage source.
+                        typeof display.image.value === "string"
+                            ? <img src={display.image.value}
+                                alt={""}
+                                className={"w-full h-full object-cover"}/>
+                            : null
+                    }/>
+                </div>
+            )}
+
+            <div className={"flex flex-col gap-1.5 min-w-0 flex-1"}>
+
+                {title && (
+                    <Typography variant={"h5"} className={"min-w-0 truncate m-0"}>
+                        {title}
+                    </Typography>
+                )}
+
+                {subtitle && (
+                    <Typography variant={"body2"}
+                        color={"secondary"}
+                        className={"min-w-0 m-0"}>
+                        {subtitle}
+                    </Typography>
+                )}
+
+                {(hasStatus || tags.length > 0) && (
+                    <div className={"flex flex-wrap items-center gap-1.5"}>
+                        {hasStatus && (
+                            <RoleValue role={display.status} propertyFallback={
+                                <Chip size={"small"}>{asText(display.status.value)}</Chip>
+                            }/>
+                        )}
+                        {tags.map(tag => (
+                            <Chip key={tag} size={"small"} outlined>{tag}</Chip>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+/**
+ * One resolved role, rendered richly when a property is behind it.
+ *
+ * `source` is set only when the value came from a property of this collection
+ * (see `useEntityDisplay`), and it carries what a rich rendering needs. Its
+ * absence is exactly the "this was computed" signal, and a computed value is a
+ * bare string with no property to describe it — hence the fallback.
+ */
+function RoleValue({
+    role,
+    propertyFallback
+}: {
+    role: { value: unknown, source?: { key: string, property: Property | undefined, value: unknown } };
+    propertyFallback: React.ReactNode;
+}) {
+    const source = role.source;
+    if (!source?.property) return <>{propertyFallback}</>;
+    return <PropertyPreview propertyKey={source.key}
+        value={source.value}
+        property={source.property}
+        hideLabel
+        size={"medium"}/>;
+}
+
+/** A role's value as a line of text, or nothing when it holds nothing to read. */
+function asText(value: unknown): string | undefined {
+    if (value === undefined || value === null) return undefined;
+    const text = String(value).trim();
+    return text.length ? text : undefined;
+}
+
+/** The `tags` role, which takes a single string as shorthand for one tag. */
+function asTags(value: unknown): string[] {
+    if (value === undefined || value === null) return [];
+    const list = Array.isArray(value) ? value : [value];
+    return list
+        .map(entry => asText(entry))
+        .filter((entry): entry is string => Boolean(entry));
+}

package/src/components/EntityIdentityBar.tsx

@@ -1,6 +1,7 @@
 import type { AdminCollection } from "@rebasepro/admin-types";
 import type { EntityStatus } from "@rebasepro/types";
 import React, { useState } from "react";
+import { Link } from "react-router";
 import { useTranslation } from "@rebasepro/app";
 import {
     Button,
@@ -9,6 +10,7 @@ import {
     CodeIcon,
     CopyIcon,
     defaultBorderMixin,
+    ExternalLinkIcon,
     HistoryIcon,
     IconButton,
     iconSize,
@@ -25,6 +27,15 @@ import {
 export interface EntityIdentityBarProps {
     /** Plural collection name, shown as the breadcrumb ahead of the title. */
     collection: AdminCollection;
+    /**
+     * Where the breadcrumb points. Without it the collection name is inert text
+     * that still reads as a breadcrumb — worse than no breadcrumb at all, and
+     * the only way back once a layout drops its back arrow.
+     *
+     * Left unset by the overlays (side panel, dialog), where the collection is
+     * already underneath and navigating would dismiss the record instead.
+     */
+    collectionUrl?: string;
     /** Resolved record title, already guarded against showing a field default. */
     title: string;
     entityId?: string | number;
@@ -49,6 +60,17 @@ export interface EntityIdentityBarProps {
     /** Opens the inspector straight on its history tab. */
     onViewHistory?: () => void;
 
+    /**
+     * Where this record appears on the live site, from `entityLinkBuilder`.
+     *
+     * Here rather than above the record, where it used to be a single unlabelled
+     * icon alone on its own right-aligned row — the only thing between the bar
+     * and the first field, and the only control in the view that did not say
+     * what it was. It is a thing you do *to* a record, so it belongs with the
+     * others.
+     */
+    externalLink?: string;
+
     /**
      * Actions performed *on* the record — copy, delete, whatever the collection
      * adds — as menu items under the overflow button. They live here rather
@@ -81,6 +103,7 @@ export interface EntityIdentityBarProps {
  */
 export function EntityIdentityBar({
     collection,
+    collectionUrl,
     title,
     entityId,
     status,
@@ -94,6 +117,7 @@ export function EntityIdentityBar({
     onBack,
     onInspect,
     onViewHistory,
+    externalLink,
     recordActions,
     pluginActions,
     trailing,
@@ -108,7 +132,8 @@ export function EntityIdentityBar({
     const closeLabel = status === "existing"
         ? t("save_and_close")
         : status === "copy" ? t("create_copy_and_close") : t("create_and_close");
-    const hasMenu = Boolean(recordActions) || Boolean(onInspect) || Boolean(onViewHistory);
+    const hasMenu = Boolean(recordActions) || Boolean(onInspect) || Boolean(onViewHistory)
+        || Boolean(externalLink);
 
     return (
         <div className={cls(
@@ -126,10 +151,21 @@ export function EntityIdentityBar({
                 </Tooltip>
             )}
 
-            <Typography variant={"caption"}
-                className={"text-text-disabled dark:text-text-disabled-dark whitespace-nowrap hidden sm:block"}>
-                {collection.name}&nbsp;/
-            </Typography>
+            {collectionUrl
+                ? <Link to={collectionUrl}
+                    className={"visited:text-inherit dark:visited:text-inherit hidden sm:block"}>
+                    <Typography variant={"caption"}
+                        className={cls(
+                            "text-text-disabled dark:text-text-disabled-dark whitespace-nowrap",
+                            "hover:text-text-primary dark:hover:text-text-primary-dark transition-colors"
+                        )}>
+                        {collection.name}&nbsp;/
+                    </Typography>
+                </Link>
+                : <Typography variant={"caption"}
+                    className={"text-text-disabled dark:text-text-disabled-dark whitespace-nowrap hidden sm:block"}>
+                    {collection.name}&nbsp;/
+                </Typography>}
 
             <span className={"font-headers font-semibold text-[15px] tracking-tight truncate min-w-0"}
                 title={title}>
@@ -189,6 +225,14 @@ export function EntityIdentityBar({
                             <MoreVerticalIcon size={iconSize.smallest}/>
                         </IconButton>
                     }>
+                    {externalLink && (
+                        <MenuItem onClick={() => window.open(externalLink, "_blank", "noopener,noreferrer")}>
+                            <ExternalLinkIcon size={iconSize.smallest}/>
+                            {t("open_in_live_site") ?? "Open in the live site"}
+                        </MenuItem>
+                    )}
+                    {externalLink && (recordActions || onInspect || onViewHistory) &&
+                        <Separator orientation={"horizontal"}/>}
                     {recordActions}
                     {recordActions && (onInspect || onViewHistory) && <Separator orientation={"horizontal"}/>}
                     {onViewHistory && (

package/src/components/EntityPreviewBinding.tsx

@@ -25,7 +25,8 @@ import {
 import { useAnalyticsController } from "@rebasepro/app";
 import { IconForView } from "@rebasepro/app";
 import { getPropertyInPath } from "../util/property_utils";
-import { getEntityPreviewKeys, getEntityTitlePropertyKeyForEntity } from "../util/previews";
+import { resolveCollectionSlotKeys } from "./CollectionViewBinding/usePreviewSlots";
+import { useEntityTitle } from "../hooks/useEntityDisplay";
 import { getValueInPath } from "@rebasepro/utils";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { useSidePanel } from "../hooks/useSidePanel";
@@ -87,10 +88,33 @@ export function EntityPreviewBindingData({
 
     const collection = collectionProp ?? collectionRegistryController.getCollection(entity.path);
 
+    // Above the `!collection` return, because hooks are. `useEntityTitle`
+    // tolerates a missing collection for exactly this reason.
+    const title = useEntityTitle({
+        collection,
+        entity
+    });
+
+    // What the card says under the title.
+    //
+    // A stated list wins outright — `previewProperties` is the one place a
+    // developer says "show these", and nothing here is allowed to second-guess
+    // it. Failing that, the card fills the same slots as every other surface
+    // that renders one record in a row: a supporting line and a status. It used
+    // to take the first few properties in declaration order instead, which is
+    // how an author card ended up rendering an entire Markdown biography.
+    const statedKeys = previewKeys ?? (collection?.previewProperties as string[] | undefined);
     const listProperties = useMemo(() => {
         if (!collection) return [];
-        return previewKeys ?? getEntityPreviewKeys(authController, collection, customizationController.propertyConfigs, previewKeys, size === "medium" || size === "large" ? 3 : 2);
-    }, [previewKeys, collection, size, authController, customizationController.propertyConfigs]);
+        if (statedKeys && statedKeys.length > 0) {
+            return statedKeys.filter(key => getPropertyInPath(collection.properties, key));
+        }
+        const slotKeys = resolveCollectionSlotKeys(
+            collection as AdminCollection<Record<string, unknown>>,
+            authController,
+            customizationController.propertyConfigs);
+        return [slotKeys.subtitleKey, slotKeys.statusKey].filter(Boolean) as string[];
+    }, [statedKeys, collection, authController, customizationController.propertyConfigs]);
 
     if (!collection) {
         return (
@@ -100,7 +124,7 @@ export function EntityPreviewBindingData({
         );
     }
 
-    const titleProperty = includeTitle ? getEntityTitlePropertyKeyForEntity(collection, entity.values, entity.id) : undefined;
+    const titleProperty = includeTitle ? title.source?.key : undefined;
     const imagePropertyKey = includeImage ? getEntityImagePreviewPropertyKey(collection) : undefined;
     const imageProperty = imagePropertyKey ? collection.properties[imagePropertyKey] : undefined;
     const ofProp = imageProperty && "of" in imageProperty ? imageProperty.of : undefined;
@@ -119,7 +143,10 @@ export function EntityPreviewBindingData({
         // relation among the preview properties collapses to one line instead
         // of nesting another bordered card with its own id and action button.
         <NestedEntityPreviewBoundary>
-            <div className={cls("flex  shrink-0", {
+            {/* `overflow-hidden`: the image slot is a fixed box, and a thumbnail
+                that fails to load renders a "file not found" message sized for a
+                full preview — which spilled across the title beside it. */}
+            <div className={cls("flex shrink-0 overflow-hidden", {
                 "w-6 h-6 mx-1 my-0.5": size === "small" || size === "smallest",
                 "w-8 h-8 ml-1 mr-2 m-2 self-start": size === "medium",
                 "w-10 h-10 ml-2 mr-2 m-2 self-start": size === "large"
@@ -148,20 +175,24 @@ export function EntityPreviewBindingData({
                         </div>
                         : <Skeleton/>)}
 
-                {titleProperty && (
+                {/* A title that came from a property keeps that property's own
+                    rendering — an enum stays its coloured chip, a relation stays
+                    a link. A computed one is text, because that is all a
+                    resolver returns. */}
+                {includeTitle && (titleProperty || title.value) && (
                     <div
                         className={"truncate my-0.5 text-sm font-medium text-text-primary dark:text-text-primary-dark"}>
-                        {
-                            entity
+                        {!entity && titleProperty
+                            ? <SkeletonPropertyComponent
+                                property={getPropertyInPath(collection.properties, titleProperty) as Property}
+                                size={"medium"}/>
+                            : titleProperty
                                 ? <PropertyPreview
-                                    propertyKey={titleProperty as string}
-                                    value={getValueInPath(entity.values, titleProperty) as never}
-                                    property={collection.properties[titleProperty as string] as Property}
-                                    size={"medium"}/>
-                                : <SkeletonPropertyComponent
-                                    property={collection.properties[titleProperty as string] as Property}
+                                    propertyKey={titleProperty}
+                                    value={title.source?.value as never}
+                                    property={getPropertyInPath(collection.properties, titleProperty) as Property}
                                     size={"medium"}/>
-                        }
+                                : title.value}
                     </div>
                 )}
 
@@ -171,8 +202,14 @@ export function EntityPreviewBindingData({
 
                     const valueInPath = getValueInPath(entity.values, key);
                     return (
+                        // `truncate` clamps a line of text; it does nothing to a
+                        // preview that renders blocks. Custom `admin.Preview`
+                        // components can render anything at all, so the height
+                        // is capped here as well — a card that loses the tail of
+                        // an unusual value beats a card the size of a document.
                         <div key={"ref_prev_" + key}
-                            className={cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0")}>
+                            className={cls("truncate min-w-0 max-h-8 overflow-hidden",
+                                restProperties.length > 1 ? "my-0.5" : "my-0")}>
                             {
                                 entity
                                     ? <PropertyPreview
@@ -364,7 +401,7 @@ export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPre
             "bg-white dark:bg-surface-900",
             size === "small" ? "min-h-[32px]" : "min-h-[44px]",
             fullwidth ? "w-full" : "",
-            "items-center",
+            "items-center overflow-hidden",
             hover ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800" : "",
             size === "small" ? "p-1" : "px-2 py-1",
             "flex border rounded-lg",