@rebasepro/admin 0.13.0 → 0.13.1-canary.g18cfeb7

package/src/form/EntityForm.tsx

@@ -9,18 +9,18 @@ import { deepEqual as equal } from "fast-equals";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { AlignLeftIcon, useDebouncedCallback } from "@rebasepro/ui";
 import { getDefaultValuesFor } from "@rebasepro/common";
-import { isReadOnly } from "@rebasepro/app";
+import { isDisabled, 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";
 import { PropertyFieldBinding } from "./PropertyFieldBinding";
 import { flattenKeys } from "@rebasepro/app";
 import { ErrorFocus } from "./components/ErrorFocus";
@@ -173,15 +173,30 @@ export function EntityForm<M extends Record<string, unknown>>({
             });
     };
 
-    const [initialValues, initialDirty] = useMemo(() => {
-        const initialValues = initialDirtyValues ? mergeDeep(baseInitialValues, initialDirtyValues) : baseInitialValues;
-        const initialDirty = Boolean(initialDirtyValues) && initialDirtyValues && Object.keys(initialDirtyValues).length > 0;
-        return [initialValues, initialDirty];
-    }, [baseInitialValues, initialDirtyValues]);
+    /**
+     * What the form opens showing, when that is not what is stored — an edit
+     * carried over from the side panel's "open full screen", or a draft
+     * restored from the local-changes backup.
+     *
+     * The merge is deliberately *not* folded into the baseline. `mergeDeep`
+     * used to produce a single `initialValues` that served as both, with a
+     * `initialDirty: true` bolted on beside it to say what the baseline could
+     * no longer show — and that flag survived exactly one render, because the
+     * record's data arriving replaced the baseline and the form recomputed
+     * dirty as false against a baseline that already contained the edit.
+     *
+     * Read once, at mount: this is a handoff, and re-reading it every render
+     * tied the form to a cache that is cleared as soon as it has been consumed.
+     */
+    const initialModifiedValues = useRef(
+        initialDirtyValues && Object.keys(initialDirtyValues).length > 0
+            ? mergeDeep(baseInitialValues, initialDirtyValues)
+            : undefined
+    ).current;
 
     const internalFormex = useCreateFormex<M>({
-        initialValues: initialValues as M,
-        initialDirty,
+        initialValues: baseInitialValues as M,
+        initialModifiedValues: initialModifiedValues as M | undefined,
         debugId: `EntityForm:${path}/${entityIdProp}`,
         initialTouched: initialDirtyValues ?
             flattenKeys(initialDirtyValues!)
@@ -193,7 +208,9 @@ export function EntityForm<M extends Record<string, unknown>>({
         onSubmit,
         onReset: () => {
             onResetProp?.();
-            onValuesModified?.(false, initialValues as M);
+            // The stored values — a reset returns the form to them, and by now
+            // that is the baseline whether or not it was at mount.
+            onValuesModified?.(false, baseInitialValues as M);
         },
         onValuesChangeDeferred: onValuesChangeDeferredProp,
         validation: async (values): Promise<Record<string, string>> => {
@@ -420,7 +437,7 @@ export function EntityForm<M extends Record<string, unknown>>({
             disabledProp
             || (!autoSave && formex.isSubmitting)
             || isReadOnly(property)
-            || Boolean(property.admin?.disabled)
+            || isDisabled(property)
             || (!isNew && "isId" in property && Boolean(property.isId))
             || (isNew && isIdAndAuto)
         );
@@ -440,25 +457,26 @@ 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 (
+                // Through FieldBlock like every other cell, so a computed
+                // column is labelled at the same size, with the same gap to its
+                // box, as the property next to it on the grid.
                 <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>
+                    <FieldBlock propertyKey={field.key}
+                        showLabel={true}
+                        label={additionalField.name}
+                        icon={<AlignLeftIcon size={LABEL_ICON_SIZE}/>}>
+                        <div className={cls(paperMixin, "w-full min-h-12 p-4 md:p-6 overflow-x-auto no-scrollbar")}>
                             {child}
-                        </ErrorBoundary>
-                    </div>
+                        </div>
+                    </FieldBlock>
                 </div>
             );
         }
@@ -537,12 +555,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 +737,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/EntityFormBinding.tsx

@@ -35,8 +35,8 @@ import { EntityForm } from "./EntityForm";
 import {
     extractTouchedValues,
     removeEmptyContainers,
-    getChanges,
     getInitialEntityValues,
+    getUnappliedLocalChanges,
 } from "./form_utils";
 import { mergeDeep } from "@rebasepro/utils";
 
@@ -127,22 +127,35 @@ export function EntityFormBinding<M extends Record<string, unknown>>({
 
     const [localChangesCleared, setLocalChangesCleared] = useState<boolean>(false);
 
+    // `initialDirtyValues` is deliberately *not* merged in here any more. This
+    // value is the form's baseline, and an edit folded into the baseline is
+    // indistinguishable from saved data — which is how an edit carried over
+    // from the side panel arrived reading "Saved". {@link EntityForm} applies
+    // it as an overlay on the values instead, so the difference survives.
+    //
+    // The auto-applied local-changes backup is still folded in, unchanged, and
+    // has the same shape of problem: a restored draft opens undirty and cannot
+    // be saved until a field is touched. Left as it is rather than changed
+    // blind, since nothing here exercises that path.
     const computedInitialValues = useMemo(() => {
-        const withLocalChanges = autoApplyLocalChanges && localChangesDataRaw
+        return autoApplyLocalChanges && localChangesDataRaw
             ? mergeDeep(baseInitialValues, localChangesDataRaw as Partial<M>)
             : baseInitialValues;
-        return initialDirtyValues ? mergeDeep(withLocalChanges, initialDirtyValues) : withLocalChanges;
-    }, [autoApplyLocalChanges, localChangesDataRaw, baseInitialValues, initialDirtyValues]);
+    }, [autoApplyLocalChanges, localChangesDataRaw, baseInitialValues]);
 
     const localChangesData = useMemo(() => {
         if (!localChangesDataRaw) return undefined;
-        const changes = getChanges(localChangesDataRaw, computedInitialValues);
-        const cleaned = removeEmptyContainers(changes);
-        if (cleaned && typeof cleaned === "object" && Object.keys(cleaned).length === 0) {
-            return undefined;
-        }
-        return cleaned;
-    }, [localChangesDataRaw, computedInitialValues]);
+        // What the form opens showing: the baseline plus any edit handed over by
+        // the layout this one replaced. See {@link getUnappliedLocalChanges} for
+        // why the banner is measured against that and not against the baseline.
+        const openingValues = initialDirtyValues
+            ? mergeDeep(computedInitialValues, initialDirtyValues)
+            : computedInitialValues;
+        return getUnappliedLocalChanges(
+            localChangesDataRaw as Partial<M>,
+            openingValues as Partial<M>
+        );
+    }, [localChangesDataRaw, computedInitialValues, initialDirtyValues]);
 
     const hasLocalChanges = !localChangesCleared && !!localChangesData && Object.keys(localChangesData as object).length > 0;
 

package/src/form/PropertyFieldBinding.tsx

@@ -14,7 +14,7 @@ import { Field, FormexFieldProps, getIn } from "@rebasepro/forms";
 import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
 
 import { isPropertyBuilder, resolveProperty } from "@rebasepro/common";
-import { isHidden, isReadOnly } from "@rebasepro/app";
+import { isDisabled, isHidden, isReadOnly } from "@rebasepro/app";
 import { useAuthController, useCustomizationController } from "@rebasepro/app";
 import { Typography } from "@rebasepro/ui";
 import { getFieldConfig, getFieldId } from "../components/field_configs";
@@ -113,7 +113,7 @@ function PropertyFieldBindingInternal<M extends Record<string, unknown> = Record
                 }) as Property | null;
 
                 const readOnly = resolvedProperty ? isReadOnly(resolvedProperty) : true;
-                const disabled = disabledProp || readOnly || Boolean(resolvedProperty?.admin?.disabled) || context.disabled;
+                const disabled = disabledProp || readOnly || (resolvedProperty ? isDisabled(resolvedProperty) : false) || context.disabled;
 
                 if (resolvedProperty === null || isHidden(resolvedProperty)) {
                     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,71 @@ 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";
+    /**
+     * Label text, when there is no property to take it from.
+     *
+     * For additional fields, which are columns a collection computes rather
+     * than stores. They go on the same grid as the properties and so have to
+     * carry the same label — drawing their own is how they ended up a size out
+     * and a couple of pixels off from the field beside them.
+     */
+    label?: string;
+    /** Type icon, when there is no property to derive one from. */
+    icon?: React.ReactNode;
     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",
+    label,
+    icon,
     children
 }: FieldBlockProps) {
 
+    const reading = mode === "read";
     const description = property?.description?.trim();
     const required = Boolean(property?.validation?.required);
 
@@ -82,18 +149,21 @@ 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. */}
-                        {property && (
+                            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 || icon) && (
                             <span className={"shrink-0 text-text-disabled dark:text-text-disabled-dark"}>
-                                {getIconForProperty(property, "smallest")}
+                                {property ? getIconForProperty(property, LABEL_ICON_SIZE) : icon}
                             </span>
                         )}
-                        <span className={"truncate"}>{property?.name ?? propertyKey}</span>
+                        <span className={"truncate"}>{property?.name ?? label ?? propertyKey}</span>
                         {required && <span className={"text-red-500 dark:text-red-500 -ml-1"}>*</span>}
                     </div>
                 </PropertyIdCopyTooltip>
@@ -107,7 +177,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/ArrayCustomShapedFieldBinding.tsx

@@ -7,7 +7,7 @@ import { LabelWithIconAndTooltip } from "../components/LabelWithIconAndTooltip";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@rebasepro/ui";
 import { getArrayResolvedProperties } from "@rebasepro/common";
-import { isReadOnly } from "@rebasepro/app";
+import { isDisabled, isReadOnly } from "@rebasepro/app";
 import { getIconForProperty } from "../../util/property_utils";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { useAuthController } from "@rebasepro/app";
@@ -65,7 +65,7 @@ export function ArrayCustomShapedFieldBinding({
     </>);
 
     const body = (resolvedProperties ?? []).map((childProperty, index) => {
-        const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.admin?.disabled);
+        const thisDisabled = isReadOnly(childProperty) || isDisabled(childProperty);
         const fieldProps = {
             propertyKey: `${propertyKey}[${index}]`,
             disabled: disabled || thisDisabled,

package/src/form/field_bindings/BinaryFieldBinding.tsx

@@ -86,14 +86,19 @@ export function BinaryFieldBinding({
     const localError = malformed ? "Not valid base64" : undefined;
 
     return (
-        <div className="flex flex-col gap-2 w-full mt-2">
-            <div className="flex items-center justify-between mb-1">
-                {!hideLabel && <LabelWithIcon
+        <div className="flex flex-col gap-2 w-full">
+            {/* The row goes away with the label rather than emptying out. Left
+                unconditional it still contributed its `mb-1` and the column's
+                `gap-2`, which — on top of the `mt-2` that used to sit on the
+                wrapper — pushed this control 20px below the one next to it
+                while the two labels stayed level. */}
+            {!hideLabel && <div className="flex items-center justify-between mb-1">
+                <LabelWithIcon
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}
                     title={property.name ?? propertyKey}
-                />}
-            </div>
+                />
+            </div>}
 
             <PropertyIdCopyTooltip propertyKey={propertyKey}>
                 <div className="w-full">

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -13,7 +13,7 @@ import { EnumValuesChip } from "../../preview";
 import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE, getDefaultValueFor } from "@rebasepro/common";
 import { getIconForProperty } from "../../util/property_utils";
 import { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/app";
+import { isDisabled, useTranslation } from "@rebasepro/app";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { ArrayContainer, ArrayEntryParams } from "../../components/ArrayContainer";
 import { mergeDeep } from "@rebasepro/utils";
@@ -94,8 +94,8 @@ export function BlockFieldBinding({
                                  addLabel={property.name ? t("add_to_field", { fieldName: property.name }) : t("add_entry")}
                                  buildEntry={buildEntry}
                                  onInternalIdAdded={setLastAddedId}
-                                 disabled={isSubmitting || Boolean(property.admin?.disabled)}
-                                 canAddElements={!property.admin?.disabled}
+                                 disabled={isSubmitting || isDisabled(property)}
+                                 canAddElements={!isDisabled(property)}
                                  onValueChange={(value) => setFieldValue(propertyKey, value)}
                                  newDefaultEntry={{
                                      [property.oneOf!.typeField ?? DEFAULT_ONE_OF_TYPE]: firstOneOfKey,