@rebasepro/admin 0.13.0 → 0.13.1-canary.gcd6689e

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 { getEntityPreviewKeys } from "../util/previews";
+import { useEntityTitle } from "../hooks/useEntityDisplay";
 import { getValueInPath } from "@rebasepro/utils";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { useSidePanel } from "../hooks/useSidePanel";
@@ -87,6 +88,13 @@ 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
+    });
+
     const listProperties = useMemo(() => {
         if (!collection) return [];
         return previewKeys ?? getEntityPreviewKeys(authController, collection, customizationController.propertyConfigs, previewKeys, size === "medium" || size === "large" ? 3 : 2);
@@ -100,7 +108,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;
@@ -148,20 +156,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>
                 )}
 

package/src/components/EntityViewBinding.tsx

@@ -1,11 +1,50 @@
-import type { Properties } from "@rebasepro/types";
+import type { Property } from "@rebasepro/types";
 
-import type { CustomizationController, AdminCollection } from "@rebasepro/admin-types";
-import React from "react";
+import type { AdditionalFieldDelegateProps, AdminCollection, CustomizationController } from "@rebasepro/admin-types";
+import type { ResolvedFormField, ResolvedFormSection } from "@rebasepro/app";
+import type { FormContext } from "../types/fields";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { Entity } from "@rebasepro/types";
-import { ExternalLinkIcon, IconButton, Tooltip } from "@rebasepro/ui";
-import { useCustomizationController } from "@rebasepro/app";
-import { PropertyCollectionView } from "./PropertyCollectionView";
+import {
+    AlignLeftIcon,
+    cls,
+    ErrorBoundary,
+    ExternalLinkIcon,
+    IconButton,
+    iconSize,
+    paperMixin,
+    Tooltip
+} from "@rebasepro/ui";
+import { getFormFieldKeys, resolveFormLayout, useCustomizationController } from "@rebasepro/app";
+import { getValueInPath } from "@rebasepro/utils";
+
+import { FieldBlock, spanClass } from "../form/components/FieldBlock";
+import { AdditionalFieldValue } from "./AdditionalFieldValue";
+import { FormSections } from "../form/components/FormSections";
+import { FormRail } from "../form/components/FormRail";
+import { useRailVisible } from "../form/components/useRailVisible";
+import { LabelWithIconAndTooltip } from "../form/components/LabelWithIconAndTooltip";
+import { PropertyPreview } from "../preview";
+
+/** Nothing can be in error in a view that cannot be submitted. */
+const NO_ERRORS: ReadonlySet<string> = new Set<string>();
+
+/**
+ * The fields the read-only view lays out, in render order.
+ *
+ * The same set the form uses, minus the `additionalFields` when there is no
+ * form context to hand them: those entries are arbitrary components, not
+ * values, and one rendered against no context is nothing at all. They are
+ * dropped *before* the layout resolves rather than skipped while rendering,
+ * because the resolver has by then given each of them a full row — skipping
+ * later leaves that row as a hole in the grid.
+ */
+export function readOnlyFieldKeys(collection: AdminCollection, hasFormContext: boolean): string[] {
+    const keys = getFormFieldKeys(collection);
+    if (hasFormContext) return keys;
+    const additional = new Set((collection.additionalFields ?? []).map(field => field.key));
+    return keys.filter(key => !additional.has(key));
+}
 
 /**
  * @group Components
@@ -15,57 +54,216 @@ export interface EntityViewBindingProps<M extends Record<string, unknown>> {
     collection: AdminCollection<M>;
     path: string;
     className?: string;
+    /**
+     * Lay the record out as a page: a centred, scrolling column with the
+     * metadata rail beside it, exactly as the form does. Off for the inline
+     * uses — the delete dialog renders the record inside a box it already owns.
+     */
+    asPage?: boolean;
+    /** Padding preset, matching the form's. Only read when `asPage`. */
+    openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
+    /**
+     * Needed only to render `additionalFields`, which are arbitrary components
+     * that take a form context. Without one those entries are left out rather
+     * than rendered against a fake context.
+     */
+    formContext?: FormContext<M>;
 }
 
 /**
  * The read-only rendering of a record's values.
  *
- * This used to prepend a synthetic `Id` row of its own. Between that row, the
- * collection's own id property, and the `path/id` chip above it, the same UUID
- * appeared three times — and in the ~340px split pane each copy wrapped over
- * four lines, so most of the first screen was one id repeated. The id is now a
- * copyable chip in the identity bar, once.
+ * This is the same layout as {@link EntityForm}: the sections, the grid spans,
+ * the labels and the rail all come from the one resolver, so the record does
+ * not rearrange itself when you press Edit. Only the controls differ — each
+ * field renders its {@link PropertyPreview} instead of an input.
+ *
+ * It used to be a flat two-column table of every value in the record: no
+ * grouping, no widths, a label column sized for short names and a value column
+ * that wrapped emails over two lines while the pane beside it stayed empty. A
+ * boolean and a markdown body were given the same room.
+ *
+ * The synthetic `Id` row it used to prepend is gone with the same reasoning the
+ * form applies: between that row, the collection's own id property and the
+ * `path/id` chip above them, one UUID appeared three times. The id is a
+ * copyable chip in the identity bar, and the rail's record block, once each.
  */
 export function EntityViewBinding<M extends Record<string, unknown>>(
     {
         entity,
         collection,
-        path,
-        className
+        className,
+        asPage = false,
+        openEntityMode = "full_screen",
+        formContext
     }: EntityViewBindingProps<M>) {
 
     const customizationController: CustomizationController = useCustomizationController();
-
-    // A single surrogate id is the chip in the identity bar, so listing it again
-    // as the first row here is the duplication the form already removed.
-    //
-    // A composite key is different: `entity.id` is then a synthesised address
-    // (`a:::b`), and the real key columns are data — on a junction row they say
-    // which two records this joins. Those stay in the table.
-    const properties: Properties = React.useMemo(() => {
-        const entries = Object.entries(collection.properties ?? {});
-        const idKeys = entries.filter(([, p]) => p && "isId" in p && p.isId);
-        if (idKeys.length !== 1) return collection.properties;
-        return Object.fromEntries(entries.filter(([key]) => key !== idKeys[0][0])) as Properties;
-    }, [collection.properties]);
     const externalLink = customizationController?.entityLinkBuilder?.({ entity });
 
+    // Only *whether* there is a form context changes the field list, not which
+    // one it is — so the memo turns on the boolean rather than on the context
+    // object, which is rebuilt on every keystroke of the form above it.
+    const hasFormContext = Boolean(formContext);
+    const fieldKeys = useMemo(
+        () => readOnlyFieldKeys(collection as AdminCollection, hasFormContext),
+        [collection, hasFormContext]
+    );
+
+    // `status: "existing"` — a record you are reading exists by definition, and
+    // that is what routes a generated id and the audit timestamps out of the
+    // column and into the record block.
+    const layout = useMemo(() => resolveFormLayout({
+        collection,
+        fieldKeys,
+        status: "existing"
+    }), [collection, fieldKeys]);
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    // Measured, not a breakpoint — see `useRailVisible`. The same reasoning as
+    // the form's: the resolver *moves* fields into the rail, so when the rail
+    // cannot be shown they have to fold back into the column.
+    const railVisible = useRailVisible(containerRef);
+    const showRail = asPage && layout.hasRail && railVisible;
+
+    const [collapsedSections, setCollapsedSections] = useState<Set<string>>(
+        () => new Set(layout.sections.filter(section => section.collapsed).map(section => section.key))
+    );
+    const toggleSection = useCallback((key: string) => {
+        setCollapsedSections(prev => {
+            const next = new Set(prev);
+            if (next.has(key)) next.delete(key); else next.add(key);
+            return next;
+        });
+    }, []);
+
+    const renderField = useCallback((field: ResolvedFormField): React.ReactNode => {
+
+        if (field.additional) {
+            const additionalField = collection.additionalFields?.find(f => f.key === field.key);
+            if (!additionalField || !formContext) return null;
+
+            const AdditionalFieldBuilder = additionalField.Builder;
+            const additionalFieldContext = formContext as unknown as AdditionalFieldDelegateProps["context"];
+            const child = AdditionalFieldBuilder
+                ? <AdditionalFieldBuilder entity={entity} context={additionalFieldContext}/>
+                : <div className={"w-full"}>
+                    <AdditionalFieldValue
+                        field={additionalField}
+                        entity={entity}
+                        context={additionalFieldContext}/>
+                </div>;
+
+            return (
+                <div key={`additional_${field.key}`} className={spanClass(field.span)}>
+                    <LabelWithIconAndTooltip
+                        propertyKey={field.key}
+                        icon={<AlignLeftIcon size={iconSize.small}/>}
+                        title={additionalField.name}
+                        className={"text-text-secondary dark:text-text-secondary-dark"}/>
+                    <div className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-auto no-scrollbar")}>
+                        <ErrorBoundary>
+                            {child}
+                        </ErrorBoundary>
+                    </div>
+                </div>
+            );
+        }
+
+        const property = collection.properties?.[field.key] as Property | undefined;
+        if (!property) return null;
+
+        return (
+            <div key={`field_${field.key}`} className={spanClass(field.span)}>
+                {/* Always labelled from here, unlike the form. The panel editors
+                    that carry their own header have no header in preview — a map
+                    previews as a table of its children and an array as its items,
+                    so leaving the label to them would leave them unlabelled. */}
+                <FieldBlock propertyKey={field.key}
+                    property={property}
+                    showLabel={true}>
+                    {/* One row's height for a single-line value, so a row of
+                        short fields lines up with the taller ones beside it, and
+                        anything longer simply grows. */}
+                    <div className={"min-h-8 flex flex-col justify-center min-w-0 text-text-primary dark:text-text-primary-dark"}>
+                        <PropertyPreview propertyKey={field.key}
+                            value={getValueInPath(entity.values, field.key)}
+                            property={property}
+                            hideLabel
+                            size={"medium"}/>
+                    </div>
+                </FieldBlock>
+            </div>
+        );
+    }, [collection, entity, formContext]);
+
+    // Same fold-back as the form: with no room for the rail its fields become a
+    // trailing group rather than disappearing.
+    const sections: ResolvedFormSection[] = showRail || !layout.sidebar.length
+        ? layout.sections
+        : [
+            ...layout.sections,
+            {
+                key: "__rail",
+                title: "Settings",
+                collapsible: false,
+                collapsed: false,
+                fields: layout.sidebar
+            }
+        ];
+
+    const content = <>
+        {externalLink && (
+            <div className={"flex justify-end mb-2"}>
+                <Tooltip title={"Open in the live site"}>
+                    <a href={externalLink} rel={"noopener noreferrer"} target={"_blank"}>
+                        <IconButton size={"small"}>
+                            <ExternalLinkIcon/>
+                        </IconButton>
+                    </a>
+                </Tooltip>
+            </div>
+        )}
+
+        <FormSections sections={sections}
+            collapsed={collapsedSections}
+            onToggle={toggleSection}
+            errorKeys={NO_ERRORS}
+            renderField={renderField}/>
+    </>;
+
+    if (!asPage) {
+        // `@container/col` even here: the spans resolve against the column they
+        // sit in, and inside a dialog that column is the dialog.
+        return (
+            <div ref={containerRef} className={cls("@container/col w-full min-w-0", className)}>
+                {content}
+            </div>
+        );
+    }
+
     return (
-        <div className={"w-full " + (className ?? "")}>
-
-            {externalLink && (
-                <div className={"flex justify-end mb-2"}>
-                    <Tooltip title={"Open in the live site"}>
-                        <a href={externalLink} rel={"noopener noreferrer"} target={"_blank"}>
-                            <IconButton size={"small"}>
-                                <ExternalLinkIcon/>
-                            </IconButton>
-                        </a>
-                    </Tooltip>
+        <div ref={containerRef} className={cls("flex-1 flex flex-row w-full min-h-0", className)}>
+
+            {/* `items-start`: without it the cross-axis default stretches the
+                column to the scroller's height and its bottom padding lands at
+                the bottom of the viewport instead of after the last field. */}
+            <div className={"flex-1 min-w-0 overflow-y-auto flex justify-center items-start"}>
+                <div className={cls(
+                    "@container/col w-full max-w-3xl 2xl:max-w-4xl flex flex-col",
+                    openEntityMode === "dialog"
+                        ? "pt-5 pb-8 px-6 sm:px-8"
+                        : "pt-6 pb-12 px-5 sm:px-8"
+                )}>
+                    {content}
                 </div>
-            )}
+            </div>
 
-            <PropertyCollectionView data={entity.values} properties={properties} size={"medium"}/>
+            {showRail && <FormRail
+                fields={layout.sidebar}
+                showRecordMeta={layout.showRecordMeta}
+                entity={entity as Entity<Record<string, unknown>>}
+                renderField={renderField}/>}
         </div>
     );
 }

package/src/components/InlineEntityPreview.tsx

@@ -3,10 +3,9 @@ import * as React from "react";
 import { Entity } from "@rebasepro/types";
 import { cls, LinkIcon, Skeleton, Tooltip } from "@rebasepro/ui";
 import { useAnalyticsController } from "@rebasepro/app";
-import { getValueInPath } from "@rebasepro/utils";
 import type { AdminCollection } from "@rebasepro/admin-types";
 
-import { getEntityTitlePropertyKeyForEntity } from "../util/previews";
+import { useEntityTitle } from "../hooks/useEntityDisplay";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { useSidePanel } from "../hooks/useSidePanel";
 
@@ -57,14 +56,15 @@ export function InlineEntityPreview({
 
     const collection = collectionProp ?? collectionRegistryController.getCollection(entity.path);
 
-    const titlePropertyKey = collection
-        ? getEntityTitlePropertyKeyForEntity(collection, entity.values, entity.id)
-        : undefined;
-    const titleValue = titlePropertyKey ? getValueInPath(entity.values, titlePropertyKey) : undefined;
-    const resolvedLabel = label
-        ?? (titleValue !== undefined && titleValue !== null && String(titleValue).trim().length > 0
-            ? String(titleValue)
-            : String(entity.id));
+    // The id is the right fallback *here* specifically: this renders a pointer at
+    // another record, and a pointer with no label is still followable if it says
+    // which record it points at. A page heading makes the opposite choice.
+    const { value: title } = useEntityTitle({
+        collection: collection as AdminCollection,
+        entity,
+        enabled: Boolean(collection)
+    });
+    const resolvedLabel = label ?? title ?? String(entity.id);
 
     const interactive = !disabled && (onClick !== undefined || (includeEntityLink && collection !== undefined));
 

package/src/components/app/Scaffold.tsx

@@ -8,13 +8,37 @@ import { AppContext } from "./useApp";
 
 export const DRAWER_WIDTH = 280;
 
+const DRAWER_OPEN_STORAGE_KEY = "rebase-drawer-open";
+
+/** `null` when the user has never toggled the drawer, or storage is unavailable. */
+function readStoredDrawerOpen(): boolean | null {
+    if (typeof window === "undefined") return null;
+    try {
+        const stored = window.localStorage.getItem(DRAWER_OPEN_STORAGE_KEY);
+        return stored === null ? null : stored === "true";
+    } catch (e) {
+        // Storage can be blocked: private mode, sandboxed iframe, cookie policy.
+        return null;
+    }
+}
+
+function writeStoredDrawerOpen(open: boolean) {
+    if (typeof window === "undefined") return;
+    try {
+        window.localStorage.setItem(DRAWER_OPEN_STORAGE_KEY, String(open));
+    } catch (e) {
+        // Same as above: a drawer that forgets is better than a crash.
+    }
+}
+
 /**
  * @group Core
  */
 export interface ScaffoldProps {
 
     /**
-     * Open the drawer on hover
+     * Expand the collapsed drawer while the pointer is over it. Off by default:
+     * the rail stays a rail until the user clicks the toggle.
      */
     autoOpenDrawer?: boolean;
 
@@ -22,8 +46,8 @@ export interface ScaffoldProps {
      * Start with the drawer expanded rather than collapsed to icons.
      *
      * Distinct from {@link autoOpenDrawer}, which is a hover behaviour: this one
-     * only seeds the initial state, so the user's own toggle still wins for the
-     * rest of the session.
+     * only seeds the very first visit. Once the user toggles the drawer, that
+     * choice is stored in `localStorage` and wins over this prop on every load.
      *
      * Ignored on small layouts, where an expanded drawer covers the content it is
      * meant to navigate.
@@ -85,10 +109,27 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
         // Seeded once, deliberately: a `useEffect` syncing this to the prop would
         // re-expand the drawer under a user who had just collapsed it.
-        const [drawerOpen, setDrawerOpen] = React.useState(defaultDrawerOpen && largeLayout);
+        // The last toggle wins over `defaultDrawerOpen`, which only seeds the very
+        // first visit — after that the stored choice survives reloads.
+        const [drawerOpen, setDrawerOpenState] = React.useState(
+            () => (readStoredDrawerOpen() ?? defaultDrawerOpen) && largeLayout
+        );
         const [onHover, setOnHover] = React.useState(false);
 
-        const setOnHoverTrue = useCallback(() => setOnHover(true), []);
+        const setDrawerOpen = useCallback((open: boolean) => {
+            setDrawerOpenState(open);
+            // Small layouts render the drawer as a modal sheet. Remembering that
+            // one would greet the next load with an overlay over the content.
+            if (!largeLayout) return;
+            writeStoredDrawerOpen(open);
+        }, [largeLayout]);
+
+        const setOnHoverTrue = useCallback(() => {
+            // Hover expansion is opt-in. Without this the rail pops open whenever
+            // the pointer crosses it, which reads as "the drawer is open again".
+            if (!autoOpenDrawer) return;
+            setOnHover(true);
+        }, [autoOpenDrawer]);
         const setOnHoverFalse = useCallback(() => {
             // Don't collapse the drawer while a popover/dropdown is open
             if (document.querySelector("[data-radix-popper-content-wrapper]")) return;
@@ -97,11 +138,11 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
         const handleDrawerOpen = useCallback(() => {
             setDrawerOpen(true);
-        }, []);
+        }, [setDrawerOpen]);
 
         const handleDrawerClose = useCallback(() => {
             setDrawerOpen(false);
-        }, []);
+        }, [setDrawerOpen]);
 
         const computedDrawerOpen: boolean = drawerOpen;
         const computedDrawerHovered = Boolean(largeLayout && onHover);

package/src/form/EntityForm.tsx

@@ -16,7 +16,8 @@ import type { ResolvedFormField } from "@rebasepro/app";
 import { Alert, Button, cls, Dialog, DialogActions, DialogContent, DialogTitle, iconSize, paperMixin, Typography } from "@rebasepro/ui";
 import { Formex, FormexController, useCreateFormex } from "@rebasepro/forms";
 
-import { FieldBlock, isSelfLabellingProperty } from "./components/FieldBlock";
+import { FieldBlock, isSelfLabellingProperty, spanClass } from "./components/FieldBlock";
+import { AdditionalFieldValue } from "../components/AdditionalFieldValue";
 import { FormRail } from "./components/FormRail";
 import { FormSections } from "./components/FormSections";
 import { useRailVisible } from "./components/useRailVisible";
@@ -440,10 +441,10 @@ export function EntityForm<M extends Record<string, unknown>>({
             const child = AdditionalFieldBuilder
                 ? <AdditionalFieldBuilder entity={entity} context={additionalFieldContext}/>
                 : <div className={"w-full"}>
-                    {additionalField.value?.({
-                        entity,
-                        context: additionalFieldContext
-                    })?.toString()}
+                    <AdditionalFieldValue
+                        field={additionalField}
+                        entity={entity}
+                        context={additionalFieldContext}/>
                 </div>;
 
             return (
@@ -706,25 +707,6 @@ export function EntityForm<M extends Record<string, unknown>>({
     );
 }
 
-/**
- * Grid placement for a span.
- *
- * Written out as literal class strings rather than composed, because Tailwind
- * scans source text: a template literal would produce classes that exist at
- * runtime and were never generated into the stylesheet.
- *
- * Below the column breakpoint every field takes the single available column, so
- * the side panel, the dialog and mobile all get a plain stack.
- */
-function spanClass(span: 1 | 2 | 3 | 4): string {
-    switch (span) {
-        case 1: return "@2xl/col:col-span-1";
-        case 2: return "@2xl/col:col-span-2";
-        case 3: return "@2xl/col:col-span-3";
-        case 4: return "@2xl/col:col-span-4";
-    }
-}
-
 function useOnAutoSave<M extends Record<string, unknown>>(autoSave: undefined | boolean, formex: FormexController<M>, lastSavedValues: React.MutableRefObject<EntityValues<M> | undefined>, save: (values: EntityValues<M>) => Promise<Entity<M> | void>) {
     useEffect(() => {
         if (!autoSave) return;

package/src/form/components/FieldBlock.tsx

@@ -1,9 +1,33 @@
 import type { Property } from "@rebasepro/types";
+import type { PropertySpan } from "@rebasepro/admin-types";
 import React from "react";
 import { cls, ErrorBoundary, Typography } from "@rebasepro/ui";
 import { getIconForProperty } from "../../util/property_utils";
 import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
 
+/**
+ * Grid placement for a span.
+ *
+ * Written out as literal class strings rather than composed, because Tailwind
+ * scans source text: a template literal would produce classes that exist at
+ * runtime and were never generated into the stylesheet.
+ *
+ * Below the column breakpoint every field takes the single available column, so
+ * the side panel, the dialog and mobile all get a plain stack.
+ *
+ * Lives here rather than in the form, because the read-only rendering of a
+ * record places its fields on the same grid — a record that changes shape when
+ * you press Edit is the bug this whole layout exists to avoid.
+ */
+export function spanClass(span: PropertySpan): string {
+    switch (span) {
+        case 1: return "@2xl/col:col-span-1";
+        case 2: return "@2xl/col:col-span-2";
+        case 3: return "@2xl/col:col-span-3";
+        case 4: return "@2xl/col:col-span-4";
+    }
+}
+
 /**
  * Does this property's editor supply its own heading?
  *

package/src/hooks/navigation/useBuildCollectionRegistryController.tsx

@@ -41,11 +41,35 @@ export function useBuildCollectionRegistryController(props: {
         if (!collectionPath) return undefined;
 
         let collection: AdminCollection | undefined;
-        try {
-            collection = registry.resolvePathToCollections(collectionPath).finalCollection;
-        } catch (e) {
-            console.debug(`Could not resolve path to collection: ${collectionPath}`, e);
-            return undefined;
+
+        // An exact slug match first, because a slug is allowed to contain
+        // slashes and several drivers need it to: a Firestore collection
+        // partitioned by locale is declared as `content/de-DE/podcasts`, and
+        // that string is its *name*, not a path to walk.
+        //
+        // Without this, such a slug went straight to `resolvePathToCollections`,
+        // which reads any `a/b/c` as collection/entity/subcollection, looked for
+        // a root collection called `content`, found none and threw — and the
+        // catch below turned that into `undefined`. `RebaseRoute` renders
+        // `null` for an unresolved collection, so the whole view came out blank
+        // with nothing in the console above `debug`. Thirty-five collections in
+        // one app were unreachable that way.
+        // `collectionPath`, not `cleanedPath`: an even segment count means the
+        // path ends at a record, and the id has already been trimmed off above.
+        // Matching the raw path instead would only ever hit for a collection
+        // route, leaving `content/de-DE/podcasts/abc123` back on the walker.
+        collection = registry.get(collectionPath) as AdminCollection | undefined;
+
+        if (!collection) {
+            try {
+                collection = registry.resolvePathToCollections(collectionPath).finalCollection;
+            } catch (e) {
+                // Warn, not debug. An unresolved collection ends as a route with
+                // nothing in it, and at `debug` there was no way to tell that
+                // from a collection that legitimately has no rows.
+                console.warn(`[rebase] Could not resolve a collection for "${collectionPath}"`, e);
+                return undefined;
+            }
         }
 
         if (!collection) {