@rebasepro/admin 0.13.0 → 0.13.1-canary.g3660bd5

package/src/components/index.ts

@@ -1,6 +1,9 @@
 export type { EntityViewBindingProps } from "./EntityViewBinding";
 export { EntityViewBinding } from "./EntityViewBinding";
 
+export type { EntityDisplayHeaderProps } from "./EntityDisplayHeader";
+export { EntityDisplayHeader, HEADER_DISPLAY_ROLES } from "./EntityDisplayHeader";
+
 export * from "./DetailViewBinding";
 
 export type { SelectionProps } from "./ReferenceTable/SelectionTableBinding";

package/src/form/EntityForm.tsx

@@ -13,11 +13,12 @@ import { isReadOnly } from "@rebasepro/app";
 
 import { getFormFieldKeys, resolveFormLayout } from "@rebasepro/app";
 import type { ResolvedFormField } from "@rebasepro/app";
-import { Alert, Button, cls, Dialog, DialogActions, DialogContent, DialogTitle, iconSize, paperMixin, Typography } from "@rebasepro/ui";
+import { Alert, Button, cls, defaultBorderMixin, Dialog, DialogActions, DialogContent, DialogTitle, paperMixin, Typography } from "@rebasepro/ui";
 import { Formex, FormexController, useCreateFormex } from "@rebasepro/forms";
 
-import { FieldBlock, isSelfLabellingProperty } from "./components/FieldBlock";
-import { FormRail } from "./components/FormRail";
+import { FieldBlock, isSelfLabellingProperty, LABEL_ICON_SIZE, spanClass } from "./components/FieldBlock";
+import { AdditionalFieldValue } from "../components/AdditionalFieldValue";
+import { FormRail, RecordMeta } from "./components/FormRail";
 import { FormSections } from "./components/FormSections";
 import { useRailVisible } from "./components/useRailVisible";
 import { LabelWithIconAndTooltip } from "./components/LabelWithIconAndTooltip";
@@ -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 (
@@ -451,7 +452,7 @@ export function EntityForm<M extends Record<string, unknown>>({
                     className={spanClass(field.span)}>
                     <LabelWithIconAndTooltip
                         propertyKey={field.key}
-                        icon={<AlignLeftIcon size={iconSize.small}/>}
+                        icon={<AlignLeftIcon size={LABEL_ICON_SIZE}/>}
                         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")}>
@@ -537,12 +538,25 @@ export function EntityForm<M extends Record<string, unknown>>({
                 }
             ];
 
-        return <FormSections
-            sections={sections}
-            collapsed={collapsedSections}
-            onToggle={toggleSection}
-            errorKeys={errorKeys}
-            renderField={renderField}/>;
+        return <>
+            <FormSections
+                sections={sections}
+                collapsed={collapsedSections}
+                onToggle={toggleSection}
+                errorKeys={errorKeys}
+                renderField={renderField}/>
+
+            {/* Folded back with the rail's fields, and for the same reason. The
+                rail renders only where it has been measured to fit, so on the
+                split pane, the side panel and the dialog this block was dropped
+                outright and the record's id was nowhere on screen but the
+                truncated chip in the bar. */}
+            {!showRail && layout.showRecordMeta && status === "existing" && entity && (
+                <div className={cls("mt-8 pt-5 border-t max-w-sm", defaultBorderMixin)}>
+                    <RecordMeta entity={entity as Entity<Record<string, unknown>>}/>
+                </div>
+            )}
+        </>;
     };
 
     const formRef = useRef<HTMLDivElement>(null);
@@ -706,25 +720,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?
  *
@@ -46,28 +70,58 @@ export function isSelfLabellingProperty(property: Property | undefined): boolean
     }
 }
 
+/**
+ * The type icon in a field label, in px.
+ *
+ * Matched to the label's 13px rather than taken from `iconSize.smallest` (16),
+ * which is sized for buttons. Exported so the surfaces that draw a label
+ * themselves — the additional-field cards, the rail — can stay in step.
+ */
+export const LABEL_ICON_SIZE = 14;
+
 export interface FieldBlockProps {
     propertyKey: string;
     property?: Property;
     /** Rendered by the form rather than by the field, unless self-labelling. */
     showLabel: boolean;
+    /**
+     * Which of the two renderings this block frames.
+     *
+     * The **label is identical in both** — same size, same weight, same colour,
+     * same type icon, same required marker. A field is the same field whether or
+     * not you are editing it, and a record whose labels restyle themselves under
+     * Edit reads as two different screens.
+     *
+     * What `"read"` drops is the *description*, which is not part of the label:
+     * it is input help. "Sum of all line items before tax and shipping" under a
+     * number that is visibly a sum tells a reader nothing, and a line of it
+     * under every field is what a record has instead of room.
+     */
+    mode?: "edit" | "read";
     children: React.ReactNode;
 }
 
 /**
  * One field's worth of the form grid: label, control, description.
  *
- * The label carries a small type icon so a number reads differently from a
- * relation at a glance, and the description sits under the control where it
- * annotates what you just filled in.
+ * The same block frames the read-only rendering of a record, so a field sits in
+ * the same place, at the same width, under the same label whether or not you are
+ * editing it — see {@link EntityViewBinding}.
+ *
+ * The label is one size down from the control it names (13px against the body's
+ * 14) with its icon matched to it at 14px. Labels are scaffolding: you read them
+ * to find the value, then read the value. Setting them at body size made a
+ * column of records scan as a column of field names with data attached.
  */
 export function FieldBlock({
     propertyKey,
     property,
     showLabel,
+    mode = "edit",
     children
 }: FieldBlockProps) {
 
+    const reading = mode === "read";
     const description = property?.description?.trim();
     const required = Boolean(property?.validation?.required);
 
@@ -82,15 +136,18 @@ export function FieldBlock({
             {showLabel && (
                 <PropertyIdCopyTooltip propertyKey={propertyKey}>
                     <div className={cls(
-                        "flex items-center gap-1.5 text-sm font-medium leading-tight mb-1.5",
-                        "text-text-secondary dark:text-text-secondary-dark"
+                        "flex items-center gap-1.5 font-medium leading-tight mb-1.5",
+                        "text-[13px] text-text-secondary dark:text-text-secondary-dark"
                     )}>
                         {/* Small and quiet: enough to tell a number from a
                             relation at a glance, not enough to compete with the
-                            field name. */}
+                            field name. Matched to the label's 13px rather than
+                            left at the 16px `smallest` token, which put the
+                            heaviest mark on the row on the least important
+                            thing in it. */}
                         {property && (
                             <span className={"shrink-0 text-text-disabled dark:text-text-disabled-dark"}>
-                                {getIconForProperty(property, "smallest")}
+                                {getIconForProperty(property, LABEL_ICON_SIZE)}
                             </span>
                         )}
                         <span className={"truncate"}>{property?.name ?? propertyKey}</span>
@@ -107,7 +164,7 @@ export function FieldBlock({
 
             {/* Under the control, where it reads as a note about the thing you
                 just filled in rather than a subtitle of the next label. */}
-            {showLabel && description && (
+            {showLabel && description && !reading && (
                 <Typography variant={"caption"}
                     color={"disabled"}
                     className={"mt-1.5 ml-0.5 leading-snug"}>

package/src/form/components/FormRail.tsx

@@ -32,7 +32,14 @@ export function FormRail({
             // No responsive hiding here. The caller decides whether the rail is
             // shown, by measuring; a CSS `hidden` would leave the fields the
             // resolver moved in here unreachable rather than folding them back.
-            "flex flex-col gap-6 shrink-0 w-72 border-l overflow-y-auto",
+            //
+            // `w-76` (304px), between the old 288 and a full `w-80`. The rail
+            // holds real controls — a status select, a date picker — plus a
+            // record block whose id is a 36-character UUID, so 288 left the
+            // select tighter than the identical select in the column. 320 took
+            // more than it gave back: past about 300px the extra goes to the
+            // gap beside a chip, not to anything that needed it.
+            "flex flex-col gap-6 shrink-0 w-76 border-l overflow-y-auto",
             "px-5 py-6 bg-surface-50 dark:bg-surface-900",
             defaultBorderMixin
         )}>
@@ -47,7 +54,17 @@ export function FormRail({
     );
 }
 
-function RecordMeta({ entity }: { entity: Entity<Record<string, unknown>> }) {
+/**
+ * The record's id and audit timestamps.
+ *
+ * Exported because the rail is not the only place it renders. The rail is shown
+ * only when it has been *measured* to fit, and every layout narrower than that —
+ * the split pane, the side panel, the dialog — folds its contents back into the
+ * column. The fields folded back but this block did not, so on three of the four
+ * layouts a record simply had no id on screen: the only copy of it was the
+ * truncated `e166a394…b422` chip in the identity bar.
+ */
+export function RecordMeta({ entity }: { entity: Entity<Record<string, unknown>> }) {
 
     const createdAt = pickDate(entity.values, ["created_at", "createdAt", "created_on"]);
     const updatedAt = pickDate(entity.values, ["updated_at", "updatedAt", "modified_at"]);

package/src/form/components/FormSections.tsx

@@ -14,6 +14,20 @@ export interface FormSectionsProps {
      */
     errorKeys: ReadonlySet<string>;
     renderField: (field: ResolvedFormField) => React.ReactNode;
+    /**
+     * Which rendering this is. `"read"` opens the gaps up rather than closing
+     * them: a control is a bordered 40px box that separates itself from the next
+     * one, and a value is bare text that does not. The form can also afford
+     * tighter rows because a description usually sits between them; with that
+     * gone, the same numbers ran a record's values together into one block.
+     */
+    mode?: "edit" | "read";
+    /**
+     * Renders one field as a summary row, for a section that asked for
+     * `readVariant: "summary"`. Only the read view supplies it; without it such
+     * a section falls back to the grid rather than to nothing.
+     */
+    renderSummaryField?: (field: ResolvedFormField, index: number, total: number) => React.ReactNode;
 }
 
 export function FormSections({
@@ -21,15 +35,22 @@ export function FormSections({
     collapsed,
     onToggle,
     errorKeys,
-    renderField
+    renderField,
+    mode = "edit",
+    renderSummaryField
 }: FormSectionsProps) {
 
+    const reading = mode === "read";
+
     return (
-        <div className={"flex flex-col gap-8"}>
+        <div className={cls("flex flex-col", reading ? "gap-10" : "gap-8")}>
             {sections.map((section) => {
 
                 const hasError = section.fields.some(f => errorKeys.has(f.key));
                 const isCollapsed = section.collapsible && collapsed.has(section.key) && !hasError;
+                const summary = reading
+                    && section.readVariant === "summary"
+                    && Boolean(renderSummaryField);
 
                 return (
                     <section key={section.key} className={"min-w-0"}>
@@ -43,15 +64,21 @@ export function FormSections({
                                 onToggle={() => onToggle(section.key)}/>
                         )}
 
-                        {!isCollapsed && (
+                        {!isCollapsed && (summary
+                            ? <div id={`form_section_${section.key}`}
+                                className={"flex flex-col min-w-0 @2xl:max-w-md @2xl:ml-auto"}>
+                                {section.fields.map((field, index) =>
+                                    renderSummaryField!(field, index, section.fields.length))}
+                            </div>
                             // A container query, not a media query: the form is
                             // rendered at four very different widths (full
                             // screen, side panel, split pane, dialog) inside the
                             // same viewport, so spans have to answer to the
                             // column they are in, not to the window.
-                            <div id={`form_section_${section.key}`}
+                            : <div id={`form_section_${section.key}`}
                                 className={cls(
-                                    "grid gap-x-4 gap-y-5 min-w-0",
+                                    "grid min-w-0",
+                                    reading ? "gap-x-8 gap-y-7" : "gap-x-4 gap-y-5",
                                     "grid-cols-1 @2xl:grid-cols-4"
                                 )}>
                                 {section.fields.map(renderField)}

package/src/form/components/StorageUploadProgress.tsx

@@ -87,9 +87,15 @@ export function StorageUploadProgress({
     }, [entry.file, entry.fileName, upload]);
 
     if (simple) {
-        return <div className={`w-${imageSize} h-${imageSize}`}>
-
-            {loading && <Skeleton className={`w-${imageSize} h-${imageSize}`}/>}
+        // `imageSize` is a pixel count, so it has to be sized inline: `w-${n}`
+        // is neither a real Tailwind scale value nor a class the JIT can see.
+        return <div style={{
+            width: imageSize,
+            height: imageSize
+        }}>
+
+            {loading && <Skeleton width={imageSize}
+                height={imageSize}/>}
 
         </div>
     }

package/src/form/components/useRailVisible.tsx

@@ -3,10 +3,11 @@ import React, { useLayoutEffect, useState } from "react";
 /**
  * Below this the form is a single column and the rail is not shown.
  *
- * Roughly the 288px rail plus a content column still wide enough to hold a
- * four-up row. Above it the rail is worth having even in the split view; below
- * it — a narrow split pane, the side panel, the dialog, a phone — its fields
- * fold back into the column.
+ * Roughly the 320px rail plus a content column still wide enough to hold a
+ * four-up row — at the threshold that leaves ~680px, which is four columns of
+ * ~145px once the gutters are taken out. Above it the rail is worth having even
+ * in the split view; below it — a narrow split pane, the side panel, the dialog,
+ * a phone — its fields fold back into the column.
  */
 export const RAIL_MIN_WIDTH = 1000;
 

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -53,7 +53,13 @@ export function ReadOnlyFieldBinding({
                     "w-full overflow-x-scroll no-scrollbar flex items-center",
                     skipCardWrapper
                         ? ""
-                        : "rounded-lg border border-surface-200 dark:border-surface-700 px-4 md:px-6 min-h-10 opacity-80"
+                        // `min-h-12` is `TextField`'s own `large` height, which is
+                        // what every editable field in the form is. At 40px a
+                        // read-only field sat 8px short of the input beside it,
+                        // so a row holding one of each had its two boxes'
+                        // baselines and bottom edges disagree — the field looked
+                        // misaligned rather than uneditable.
+                        : "rounded-lg border border-surface-200 dark:border-surface-700 px-4 md:px-6 min-h-12 opacity-80"
                 )}>
 
                 <ErrorBoundary>

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) {