@rebasepro/admin 0.13.0 → 0.13.1-canary.g394d868

package/src/preview/PropertyPreview.tsx

@@ -4,7 +4,7 @@ import { deepEqual as equal } from "fast-equals"
 
 import { EntityReference, EntityRelation } from "@rebasepro/types";
 import type { PropertyPreviewProps } from "../types/components/PropertyPreviewProps";
-import { resolveProperty, normalizeToEntityRelation } from "@rebasepro/common";
+import { resolveProperty, normalizeToEntityRelation, getRelationTargetPath } from "@rebasepro/common";
 import { useAuthController, useCustomizationController, resolveComponentRef } from "@rebasepro/app";
 import { EmptyValue } from "./components/EmptyValue";
 import { UrlComponentPreview } from "./components/UrlComponentPreview";
@@ -27,6 +27,7 @@ import { ErrorView } from "@rebasepro/app";
 import { RelationPreview } from "./components/RelationPreview";
 import { InlineEntityListPreview } from "./components/InlineEntityListPreview";
 import { useIsNestedEntityPreview } from "../components/EntityPreviewNesting";
+import { markdownToPlainText } from "./compact_text";
 import { UserPreview } from "./components/UserPreview";
 
 /**
@@ -50,6 +51,13 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
         fill
     } = props;
 
+    // A preview rendered inside an entity preview fills one line of a card and
+    // has no room to grow — see {@link PropertyPreviewProps.compact}. The card
+    // is the thing that knows this, and it says so by opening a nesting
+    // boundary, so the depth is the signal rather than a prop every caller
+    // between here and there would have to forward.
+    const compact = props.compact ?? (nested || Boolean(props.textOnly));
+
     const property = resolveProperty({
         propertyKey,
         property: inputProperty,
@@ -103,7 +111,9 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
                             fill={fill}
                             previewType={stringProperty.admin?.urlPreview}/>;
             } else if (stringProperty.admin?.markdown) {
-                content = <Markdown source={value} size={"small"}/>;
+                content = compact
+                    ? <span className={"text-sm"}>{markdownToPlainText(value)}</span>
+                    : <Markdown source={value} size={"small"}/>;
             } else if (stringProperty.userSelect) {
                 content = <UserPreview
                     value={value}
@@ -113,6 +123,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
                 />;
             } else {
                 content = <StringPropertyPreview {...props}
+                    compact={compact}
                     property={stringProperty}
                     value={value}/>;
             }
@@ -129,6 +140,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
             if (arrayProperty.of) {
                 if (Array.isArray(arrayProperty.of)) {
                     content = <ArrayPropertyPreview {...props}
+                        compact={compact}
                         value={value}
                         property={arrayProperty}/>;
                 } else if (arrayProperty.of.type === "reference") {
@@ -153,6 +165,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
                     } else {
                         content = <ArrayOfStringsPreview
                             {...props}
+                            compact={compact}
                             property={property as ArrayProperty}
                             value={value as string[]}/>;
                     }
@@ -163,11 +176,13 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
                         property={property as ArrayProperty}/>;
                 } else {
                     content = <ArrayPropertyPreview {...props}
+                        compact={compact}
                         value={value}
                         property={property as ArrayProperty}/>;
                 }
             } else if (arrayProperty.oneOf) {
                 content = <ArrayOneOfPreview {...props}
+                    compact={compact}
                     value={value}
                     property={property as ArrayProperty}/>;
             }
@@ -178,6 +193,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
         if (typeof value === "object") {
             content =
                 <MapPropertyPreview {...props}
+                    compact={compact}
                     value={value as Record<string, any>}
                     property={property as MapProperty}/>;
         } else {
@@ -218,12 +234,16 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
         }
 
     } else if (property.type === "relation") {
+        // A relation column arrives either hydrated or as the bare foreign key,
+        // depending on the fetch path. The declared target resolves the latter;
+        // see `normalizeToEntityRelation`.
+        const relationTargetPath = getRelationTargetPath(property);
         if (!value) {
             content = <EmptyValue/>;
         } else if (Array.isArray(value)) {
             // Many-cardinality relation: value is an array of EntityRelation (or plain objects)
             const relations = (value as unknown[])
-                .map(item => normalizeToEntityRelation(item, "relation"))
+                .map(item => normalizeToEntityRelation(item, "relation", relationTargetPath))
                 .filter(Boolean) as EntityRelation[];
             const renderRelation = (entityRelation: EntityRelation, index: number) => <RelationPreview
                 key={`preview_rel_${propertyKey}_${index}`}
@@ -252,7 +272,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
                 );
         } else {
             // Single-cardinality relation
-            const relationValue = normalizeToEntityRelation(value, "relation");
+            const relationValue = normalizeToEntityRelation(value, "relation", relationTargetPath);
             if (relationValue) {
                 content = <RelationPreview
                     disabled={!property.relation}
@@ -270,7 +290,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
 
     } else if (property.type === "boolean") {
         if (typeof value === "boolean") {
-            content = <BooleanPreview value={value} size={size} property={property}/>;
+            content = <BooleanPreview value={value} size={size} property={property} hideLabel={props.hideLabel}/>;
         } else {
             content = buildWrongValueType(propertyKey, property.type, value);
         }

package/src/preview/compact_text.ts

@@ -0,0 +1,68 @@
+/**
+ * Turning block content into the one line a compact preview has room for.
+ *
+ * A preview slot inside a card is a single line that cannot grow. Rendering
+ * Markdown there does not produce a small version of the document — it
+ * produces the whole document, headings and lists included, inside a 44px box.
+ * These helpers take the opening line instead, which is what a person reads
+ * off a card anyway.
+ */
+
+/** Longer than any card line; the cap only keeps the DOM node small. */
+const DEFAULT_MAX_LENGTH = 280;
+
+const FENCED_CODE = /```[\s\S]*?```|~~~[\s\S]*?~~~/g;
+const HTML_TAG = /<[^>]*>/g;
+const IMAGE = /!\[([^\]]*)\]\([^)]*\)/g;
+const LINK = /\[([^\]]*)\]\([^)]*\)/g;
+const REFERENCE_LINK = /\[([^\]]*)\]\[[^\]]*\]/g;
+const HEADING = /^\s{0,3}#{1,6}\s+/gm;
+const BLOCKQUOTE = /^\s{0,3}>\s?/gm;
+const LIST_MARKER = /^\s*(?:[-*+]|\d+[.)])\s+/gm;
+const THEMATIC_BREAK = /^\s{0,3}(?:[-*_]\s*){3,}$/gm;
+const TABLE_PIPE = /[|]/g;
+const EMPHASIS = /(\*\*|__|\*|_|~~|`)/g;
+
+/**
+ * The readable text of a Markdown document, as one line.
+ *
+ * Deliberately a lexical strip rather than a parse: this runs once per preview
+ * cell in a table that can hold hundreds, and the result is truncated to a line
+ * regardless, so the cost of being exactly right is not worth paying. Anything
+ * it fails to strip degrades to a stray `*`, never to a broken layout.
+ */
+export function markdownToPlainText(source: string, maxLength: number = DEFAULT_MAX_LENGTH): string {
+    if (!source) return "";
+
+    const text = source
+        .replace(FENCED_CODE, " ")
+        .replace(IMAGE, "$1")
+        .replace(LINK, "$1")
+        .replace(REFERENCE_LINK, "$1")
+        .replace(THEMATIC_BREAK, " ")
+        .replace(HEADING, "")
+        .replace(BLOCKQUOTE, "")
+        .replace(LIST_MARKER, "")
+        .replace(HTML_TAG, "")
+        .replace(TABLE_PIPE, " ")
+        .replace(EMPHASIS, "");
+
+    return collapseToSingleLine(text, maxLength);
+}
+
+/**
+ * Whitespace — including the newlines that would otherwise let a `truncate`
+ * container grow — collapsed to single spaces, capped to `maxLength`.
+ */
+export function collapseToSingleLine(source: string, maxLength: number = DEFAULT_MAX_LENGTH): string {
+    if (!source) return "";
+    const collapsed = source.replace(/\s+/g, " ").trim();
+    if (collapsed.length <= maxLength) return collapsed;
+    // Cut at a word boundary when there is one nearby, so the line does not end
+    // mid-word for the sake of ten characters.
+    const cut = collapsed.slice(0, maxLength);
+    // The cut already landed between words: keep the last one whole.
+    if (collapsed[maxLength] === " ") return cut.trimEnd() + "…";
+    const lastSpace = cut.lastIndexOf(" ");
+    return (lastSpace > maxLength * 0.6 ? cut.slice(0, lastSpace) : cut).trimEnd() + "…";
+}

package/src/preview/components/BooleanPreview.tsx

@@ -8,18 +8,21 @@ import { PreviewSize } from "../../types/components/PropertyPreviewProps";
 export function BooleanPreview({
     value,
     size,
-    property
+    property,
+    hideLabel
 }: {
     value: boolean,
     size: PreviewSize,
     property: Property,
+    /** The caller already shows the name — see `PropertyPreviewProps.hideLabel`. */
+    hideLabel?: boolean,
 }): React.ReactElement {
     return <div className={"flex flex-row gap-2 items-center"}>
         <Checkbox checked={value}
             padding={false}
             size={size}
             color={"secondary"}/>
-        {property.name && <span
+        {!hideLabel && property.name && <span
             className={cls("text-text-secondary dark:text-text-secondary-dark", size === "small" ? "text-sm" : "")}>{property.name}</span>}
     </div>;
 }

package/src/preview/components/StorageThumbnail.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 
 import { renderSkeletonImageThumbnail } from "../property_previews/SkeletonPropertyComponent";
 import { UrlComponentPreview } from "./UrlComponentPreview";
-import { ErrorView, useStorageSource, useStorageSources } from "@rebasepro/app";
+import { ErrorView, useStorageSource, useStorageSources, useTranslation } from "@rebasepro/app";
 import { resolveStorageSource } from "@rebasepro/common";
 import { DownloadConfig, FileType } from "@rebasepro/types";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
@@ -42,6 +42,7 @@ export function StorageThumbnailInternal({
     storageSourceKey
 }: StorageThumbnailProps) {
 
+    const { t } = useTranslation();
     const [error, setError] = React.useState<Error | undefined>(undefined);
     const defaultStorage = useStorageSource();
     const storageSources = useStorageSources();
@@ -85,7 +86,9 @@ export function StorageThumbnailInternal({
             : (filetype?.startsWith("audio") ? "audio" : "file"));
 
     if (downloadConfig?.fileNotFound)
-        return <ErrorView error={"File not found"}></ErrorView>
+        // `file_not_found` is translated into seven locales and this rendered
+        // the English literal, so a German panel said "File not found".
+        return <ErrorView error={t("file_not_found")}></ErrorView>
 
     return downloadConfig?.url
         ? <UrlComponentPreview previewType={previewType}

package/src/preview/property_previews/ArrayOfRelationsPreview.tsx

@@ -1,7 +1,7 @@
 import type { ArrayProperty, RelationProperty } from "@rebasepro/types";
 import { EntityRelation } from "@rebasepro/types";
 import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
-import { normalizeToEntityRelation } from "@rebasepro/common";
+import { normalizeToEntityRelation, getRelationTargetPath } from "@rebasepro/common";
 import { RelationPreview } from "../components/RelationPreview";
 import { useIsNestedEntityPreview } from "../../components/EntityPreviewNesting";
 import { InlineEntityListPreview } from "../components/InlineEntityListPreview";
@@ -27,11 +27,14 @@ export function ArrayOfRelationsPreview({
         throw Error("Picked wrong preview component ArrayOfRelationsPreview");
 
     const ofProperty = property.of as RelationProperty;
+    // Elements arrive hydrated or as bare foreign keys depending on the fetch
+    // path; the declared target resolves the latter rather than dropping them.
+    const relationTargetPath = getRelationTargetPath(ofProperty);
 
     // See ArrayOfReferencesPreview: nested lists stay on one wrapping line.
     if (nested || textOnly) {
         const relations = ((value ?? []) as unknown[])
-            .map(relation => normalizeToEntityRelation(relation))
+            .map(relation => normalizeToEntityRelation(relation, "relation", relationTargetPath))
             .filter((relation): relation is EntityRelation => Boolean(relation));
         return <InlineEntityListPreview
             items={relations}
@@ -51,7 +54,7 @@ export function ArrayOfRelationsPreview({
         <div className="flex flex-col w-full gap-0.5">
             {value ?
                 (value as unknown[]).map((relation: unknown, index: number) => {
-                    const entityRelation = normalizeToEntityRelation(relation);
+                    const entityRelation = normalizeToEntityRelation(relation, "relation", relationTargetPath);
 
                     if (!entityRelation) return null;
 

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -12,7 +12,8 @@ export function ArrayOfStringsPreview({
     value,
     property: property,
     // entity,
-    size
+    size,
+    compact
 }: PropertyPreviewProps<ArrayProperty>) {
 
     if (Array.isArray(property.of)) {
@@ -27,6 +28,30 @@ export function ArrayOfStringsPreview({
     const stringProperty = property.of as StringProperty;
     const arrayValues = value as string[];
 
+    // One line, so the items run along it separated by a dot rather than
+    // stacking. Each still renders through the string preview: a value that is
+    // a tag stays a tag, it just sits beside its neighbours.
+    if (compact) {
+        return (
+            <span className="inline-flex items-center gap-1 min-w-0 truncate">
+                {arrayValues &&
+                    arrayValues.map((v, index: number) =>
+                        <React.Fragment key={`preview_array_strings_${propertyKey}_${index}`}>
+                            {index > 0 && <span className="opacity-40"
+                                aria-hidden={true}>·</span>}
+                            <ErrorBoundary>
+                                <StringPropertyPreview propertyKey={propertyKey}
+                                    property={stringProperty}
+                                    value={v}
+                                    compact={true}
+                                    size={size}/>
+                            </ErrorBoundary>
+                        </React.Fragment>
+                    )}
+            </span>
+        );
+    }
+
     return (
         <div className="flex flex-col gap-2">
             {arrayValues &&

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -14,7 +14,8 @@ export function ArrayOneOfPreview({
     propertyKey,
     value,
     property: property,
-    size
+    size,
+    compact
     // entity
 }: PropertyPreviewProps<ArrayProperty>) {
 
@@ -37,6 +38,14 @@ export function ArrayOneOfPreview({
 
     if (!values) return null;
 
+    // As in {@link ArrayPropertyPreview}: blocks stacked vertically, so a
+    // single line can only report the count.
+    if (compact) {
+        return <span className={"text-sm truncate"}>
+            {values.length === 1 ? "1 block" : `${values.length} blocks`}
+        </span>;
+    }
+
     const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     const typeField = property.oneOf.typeField ?? DEFAULT_ONE_OF_TYPE;

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -15,7 +15,8 @@ export function ArrayPropertyPreview({
     propertyKey,
     value,
     property: property,
-    size
+    size,
+    compact
 }: PropertyPreviewProps<ArrayProperty>) {
 
     if (property.type !== "array")
@@ -38,6 +39,14 @@ export function ArrayPropertyPreview({
 
     if (!values) return null;
 
+    // Each entry is a block of its own — a bordered row, sometimes a whole
+    // sub-table. Stating how many there are is the only honest one-liner.
+    if (compact) {
+        return <span className={"text-sm truncate"}>
+            {values.length === 1 ? "1 item" : `${values.length} items`}
+        </span>;
+    }
+
     const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     return (

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -14,7 +14,8 @@ export function MapPropertyPreview({
     propertyKey,
     value,
     property,
-    size
+    size,
+    compact
 }: PropertyPreviewProps<MapProperty>) {
 
     if (property.type !== "map") {
@@ -23,6 +24,13 @@ export function MapPropertyPreview({
 
     const mapProperty = property as MapProperty;
 
+    // A map is a table — a row per sub-property — and a card line has room for
+    // neither the rows nor the borders between them.
+    if (compact) {
+        return <CompactMapPreview property={mapProperty}
+            value={value as Record<string, unknown> | undefined}/>;
+    }
+
     if (!mapProperty.properties || Object.keys(mapProperty.properties ?? {}).length === 0) {
         return (
             <KeyValuePreview value={value}/>
@@ -105,6 +113,49 @@ export function MapPropertyPreview({
 
 }
 
+/** How many leaf values a one-line map summary shows before it gives up. */
+const COMPACT_MAP_ENTRIES = 3;
+
+/**
+ * A map in one line: its first few leaf values, labelled, joined by dots.
+ *
+ * Nested maps and arrays are skipped rather than flattened — a line that says
+ * `[object Object]` is worse than a line that says nothing about that field —
+ * and a map with no leaves at all falls back to stating its size, which is at
+ * least true.
+ */
+function CompactMapPreview({
+    property,
+    value
+}: { property: MapProperty, value: Record<string, unknown> | undefined }) {
+
+    if (!value || typeof value !== "object") return <EmptyValue/>;
+
+    const declared = property.properties;
+    const keys = declared ? Object.keys(declared) : Object.keys(value);
+
+    const parts: string[] = [];
+    for (const key of keys) {
+        if (parts.length >= COMPACT_MAP_ENTRIES) break;
+        const childValue = value[key];
+        if (childValue === undefined || childValue === null || childValue === "") continue;
+        if (typeof childValue === "object") continue;
+        const label = declared?.[key]?.name ?? key;
+        parts.push(`${label}: ${String(childValue)}`);
+    }
+
+    if (parts.length === 0) {
+        const count = Object.keys(value).length;
+        return <Typography variant={"caption"}
+            color={"secondary"}
+            className={"truncate"}>
+            {count === 1 ? "1 field" : `${count} fields`}
+        </Typography>;
+    }
+
+    return <span className={"truncate text-sm"}>{parts.join(" · ")}</span>;
+}
+
 export function KeyValuePreview({ value }: { value: any }) {
     if (typeof value !== "object") return null;
     if (!value) return <EmptyValue/>;

package/src/preview/property_previews/NumberPropertyPreview.tsx

@@ -4,6 +4,8 @@ import React from "react";
 import { EnumValuesChip } from "../components/EnumValuesChip";
 import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
 import { enumToObjectEntries } from "@rebasepro/common";
+import { useCustomizationController } from "@rebasepro/app";
+import { formatNumber } from "../../util/number_format";
 
 /**
  * @group Preview components
@@ -14,6 +16,7 @@ export function NumberPropertyPreview({
     size
 }: PropertyPreviewProps<NumberProperty>): React.ReactElement {
 
+    const customizationController = useCustomizationController();
     const numValue = value as number;
 
     if (property.enum) {
@@ -26,6 +29,11 @@ export function NumberPropertyPreview({
             enumValues={enumValues}
             size={size !== "medium" ? "small" : "medium"}/>;
     } else {
-        return <span className={size === "small" ? "text-sm" : ""}>{numValue}</span>;
+        // `admin.format` only — an undeclared number renders as the number that
+        // is in the database, which is the only thing we can honestly claim to
+        // know about it.
+        return <span className={size === "small" ? "text-sm" : ""}>
+            {formatNumber(numValue, property.admin?.format, customizationController?.locale)}
+        </span>;
     }
 }

package/src/preview/property_previews/StringPropertyPreview.tsx

@@ -7,6 +7,7 @@ import type { PropertyPreviewProps } from "../../types/components/PropertyPrevie
 import { UrlComponentPreview } from "../components/UrlComponentPreview";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { Chip, cls, getColorSchemeForSeed } from "@rebasepro/ui";
+import { collapseToSingleLine } from "../compact_text";
 
 /**
  * @group Preview components
@@ -16,7 +17,8 @@ export function StringPropertyPreview({
     value,
     property,
     size,
-    textOnly
+    textOnly,
+    compact
 }: PropertyPreviewProps<StringProperty>): React.ReactElement {
 
     const strValue = value as string;
@@ -45,10 +47,11 @@ export function StringPropertyPreview({
         );
     } else {
         if (!strValue) return <></>;
-        // When used as a title/subtitle (textOnly), collapse newlines so the
-        // parent `truncate` can clamp it to a single line.
-        if (textOnly) {
-            const singleLine = strValue.replace(/\s*\n\s*/g, " ");
+        // A title/subtitle (textOnly) or a card line (compact) is one line, and
+        // `truncate` only clamps text that has no newlines of its own to break
+        // on — so the newlines come out here rather than in CSS.
+        if (textOnly || compact) {
+            const singleLine = collapseToSingleLine(strValue);
             return size === "small"
                 ? <span className={"text-sm"}>{singleLine}</span>
                 : <>{singleLine}</>;

package/src/routes/RebaseRoute.tsx

@@ -6,10 +6,10 @@ import { DetailViewBinding } from "../components/DetailViewBinding";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router";
 import { CollectionViewBinding } from "../components/CollectionViewBinding/CollectionViewBinding";
-import { NotFoundPage, useUserConfigurationPersistence, useComponentOverride, useNavigationBlocker } from "@rebasepro/app";
+import { ErrorView, NotFoundPage, useUserConfigurationPersistence, useComponentOverride, useNavigationBlocker } from "@rebasepro/app";
 import { resolveOpenEntityMode, resolveViewMode } from "../util/view_mode";
 import { UnsavedChangesDialog } from "@rebasepro/app";
-import { CircularProgressCenter } from "@rebasepro/ui";
+import { CenteredView, CircularProgressCenter } from "@rebasepro/ui";
 import { NavigationViewCollectionInternal, NavigationViewEntityCustomInternal, NavigationViewInternal } from "@rebasepro/app";
 import { getNavigationEntriesFromPath } from "@rebasepro/app";
 import { toArray } from "@rebasepro/utils";
@@ -94,7 +94,7 @@ export function RebaseRoute() {
             if (!collectionRegistry.initialised) {
                 return <CircularProgressCenter/>;
             }
-            return null;
+            return <UnresolvedCollectionView path={navigationEntries[0].slug}/>;
         }
         return <ResolvedCollectionView
             key={`collection_view_${collection.slug}`}
@@ -117,7 +117,7 @@ export function RebaseRoute() {
                 if (!collectionRegistry.initialised) {
                     return <CircularProgressCenter/>;
                 }
-                return null;
+                return <UnresolvedCollectionView path={firstEntry.slug}/>;
             }
             return <ResolvedCollectionView
                 key={`collection_view_${collection.slug}`}
@@ -233,6 +233,7 @@ function EntityFullScreenRoute({
     const urlController = useUrlController();
     const navigate = useNavigate();
     const location = useLocation();
+    const userConfigPersistence = useUserConfigurationPersistence();
 
     // defaultValues may be carried via location.state when openNewDocument() is called
     // for full-screen mode. We read it once on mount — after that, the form owns its state.
@@ -340,6 +341,30 @@ function EntityFullScreenRoute({
     // Determine if this is a detail-view-first collection showing the view page
     const isDetailMode = collection.defaultEntityAction === "view" && !isNew && !isCopy && entityId && !isEditRoute;
 
+    // A record is full screen either because its collection has no list to show
+    // beside it, or because the user folded that list away. Only the second is
+    // reversible, and it is reversible by dropping `#full` alone: this is the
+    // same URL the split route reads, so the same conditions decide it.
+    const splitListAvailable = !isNew && !isCopy && entityId !== undefined &&
+        navigationEntries[0]?.type === "collection" &&
+        (navigationEntries.length === 2 || navigationEntries.length === 3) &&
+        resolveOpenEntityMode({
+            collection,
+            viewMode: resolveViewMode({
+                collection,
+                search: location.search,
+                savedViewMode: userConfigPersistence?.getCollectionConfig(collection.slug)?.defaultViewMode as ViewMode | undefined
+            })
+        }) === "split";
+
+    const showList = splitListAvailable
+        ? () => navigate({
+            pathname,
+            search: location.search,
+            hash: ""
+        })
+        : undefined;
+
     if (isDetailMode) {
         return <>
             <DetailViewBinding
@@ -349,6 +374,7 @@ function EntityFullScreenRoute({
                 layout={"full_screen"}
                 path={collectionPath}
                 selectedTab={selectedTab ?? undefined}
+                onShowList={showList}
                 onEditClick={() => {
                     const editUrl = urlController.buildUrlCollectionPath(`${collectionPath}/${entityId}`) + "/edit";
                     navigate(editUrl + hash);
@@ -377,6 +403,7 @@ function EntityFullScreenRoute({
             path={collectionPath}
             copy={isCopy}
             selectedTab={selectedTab ?? undefined}
+            onShowList={showList}
             defaultValues={isNew ? defaultValues : undefined}
             onValuesModified={(modified) => blocked.current = modified}
             navigateBack={() => {
@@ -415,3 +442,34 @@ function EntityFullScreenRoute({
             body={"You have unsaved changes in this entity."}/>
     </>;
 }
+
+/**
+ * Shown when a URL names a collection the registry cannot resolve.
+ *
+ * This used to be `return null`, which renders an empty pane inside the app
+ * chrome: the sidebar, the nav highlight and the breadcrumb all still work,
+ * because those read the collections array directly, while the view itself is
+ * blank. Nothing is thrown, and the only trace is a `console.debug` — so the
+ * panel looks like it lost its data rather than like it failed to find the
+ * collection, and there is no string to search for.
+ *
+ * A slug containing slashes went unresolvable this way and cost an afternoon to
+ * find. The lookup is fixed; this is the part that made it expensive.
+ */
+function UnresolvedCollectionView({ path }: { path: string }) {
+    // Warn, not debug: this is a route that renders nothing useful, and it
+    // should be visible at the console's default level.
+    useEffect(() => {
+        console.warn(
+            `[rebase] No collection is registered for "${path}", so this route has nothing to render. ` +
+            "Check that the collection is in the collections array and that its slug matches the URL."
+        );
+    }, [path]);
+
+    return <CenteredView>
+        <ErrorView
+            title={"Collection not found"}
+            error={`Nothing is registered for "${path}".`}
+            tooltip={"The URL names a collection the panel does not know about. It may have been renamed or removed from the collections array, or the slug may not match the path."}/>
+    </CenteredView>;
+}

package/src/types/components/PropertyPreviewProps.tsx

@@ -61,4 +61,25 @@ export interface PropertyPreviewProps<P extends Property | Property, CustomProps
      */
     textOnly?: boolean;
 
+    /**
+     * The preview has one line and cannot grow — it fills a slot in a card, a
+     * chip, or a table cell of fixed height.
+     *
+     * Properties whose natural rendering is a block (Markdown, multi-line text,
+     * maps, arrays) render a one-line stand-in instead: an opening excerpt, or
+     * a count. Left unset, {@link PropertyPreview} infers it from the entity
+     * preview nesting depth, which is where the constraint actually comes from;
+     * pass it explicitly only to force the compact form somewhere the nesting
+     * does not say so.
+     */
+    compact?: boolean;
+
+    /**
+     * The caller has already labelled this value, so the preview must not
+     * repeat the property name. A boolean is the one that does: it renders its
+     * name beside the checkbox, which reads as a caption in a table cell and as
+     * a stutter under a field label — "VIP" over a checkbox saying "VIP".
+     */
+    hideLabel?: boolean;
+
 }