@rebasepro/admin 0.13.0 → 0.13.1-canary.g1822133

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/DatePreview.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
 import { format } from "date-fns";
-import * as locales from "date-fns/locale";
 import { useCustomizationController } from "@rebasepro/app";
 import { defaultDateFormat } from "@rebasepro/utils";
+import { getLoadedDateFnsLocale, loadDateFnsLocale } from "./date_fns_locales";
 
 export interface DatePreviewProps {
     date: Date;
@@ -28,7 +28,20 @@ export function DatePreview({
 }: DatePreviewProps): React.ReactElement {
 
     const customizationController = useCustomizationController();
-    const dateUtilsLocale = customizationController?.locale ? (locales as Record<string, locales.Locale>)[customizationController.locale] : undefined;
+    const configuredLocale = customizationController?.locale;
+
+    // The locale arrives asynchronously now (see `date_fns_locales`). Seed from
+    // the cache so only the very first date on a page renders un-localised: by
+    // the time a table of them mounts, the module is already resolved and there
+    // is no second pass.
+    const [dateUtilsLocale, setDateUtilsLocale] = React.useState(() => getLoadedDateFnsLocale(configuredLocale));
+    React.useEffect(() => {
+        let cancelled = false;
+        loadDateFnsLocale(configuredLocale)
+            .then(loaded => { if (!cancelled) setDateUtilsLocale(loaded); })
+            .catch(error => console.error(`[rebase] could not load the "${configuredLocale}" date locale`, error));
+        return () => { cancelled = true; };
+    }, [configuredLocale]);
 
     if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
         return <></>;

package/src/preview/components/ReferencePreview.tsx

@@ -1,7 +1,7 @@
 
 import * as React from "react";
 
-import { Entity, EntityReference } from "@rebasepro/types";
+import { EntityReference } from "@rebasepro/types";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
 import { useCustomizationController, useFetch, useComponentOverride, CollectionScopeProvider } from "@rebasepro/app";
 import { Skeleton } from "@rebasepro/ui";
@@ -157,11 +157,10 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
         useCache: true
     });
 
-    if (entity) {
-        referencesCache.set(reference.pathWithId, entity);
-    }
-
-    const usedEntity = entity ?? referencesCache.get(reference.pathWithId);
+    // Only what the fetch currently reports — see the note in RelationPreview:
+    // the module-level Map that used to back this kept a deleted row on screen
+    // for the rest of the session, and across a sign-out.
+    const usedEntity = entity;
 
     let body: React.ReactNode;
 
@@ -234,5 +233,3 @@ function ReferencePreviewExisting<M extends Record<string, unknown> = Record<str
         hover={hover}/>;
 
 }
-
-const referencesCache = new Map<string, Entity<any>>();

package/src/preview/components/RelationPreview.tsx

@@ -189,11 +189,14 @@ function RelationPreviewExisting<M extends Record<string, unknown> = Record<stri
         useCache: true
     });
 
-    if (entity) {
-        relationsCache.set(relation.pathWithId, entity);
-    }
-
-    const usedEntity = passedEntity ?? entity ?? relationsCache.get(relation.pathWithId);
+    // Only what the fetch currently reports. There used to be a module-level
+    // Map behind this, written on every successful fetch and never invalidated:
+    // when the target row was deleted `useFetch` correctly reported it gone and
+    // the card carried on rendering the copy in the Map, so the "missing"
+    // branches below were unreachable for anything previewed this session — and
+    // the Map outlived a sign-out. `useFetch` keeps its own cache, seeds the
+    // first render from it, and clears the entry when the row disappears.
+    const usedEntity = passedEntity ?? entity;
 
     let body: React.ReactNode;
 
@@ -266,5 +269,3 @@ function RelationPreviewExisting<M extends Record<string, unknown> = Record<stri
         hover={hover}/>;
 
 }
-
-const relationsCache = new Map<string, Entity<any>>();

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/components/date_fns_locales.ts

@@ -0,0 +1,125 @@
+import type { Locale as LocaleKey } from "@rebasepro/admin-types";
+import type { Locale as DateFnsLocale } from "date-fns";
+
+/**
+ * One date-fns locale, fetched when the admin is actually configured to use it.
+ *
+ * `DatePreview` used to open with:
+ *
+ *     import * as locales from "date-fns/locale";
+ *
+ * and then index that namespace with the configured locale. A namespace import
+ * of a barrel is a reference to every member of it, so all ~77 locales were
+ * bundled — 640 kB, in the entry chunk's static graph, to format dates in the
+ * one locale a given deployment has configured (and `undefined`, meaning
+ * en-US, for nearly all of them).
+ *
+ * A map of thunks is written out rather than derived from the locale key,
+ * because `import(`date-fns/locale/${name}`)` is not statically analysable:
+ * the bundler cannot see which modules it must emit, and the import fails at
+ * runtime in a build. Each entry below is its own async chunk, and exactly one
+ * of them is ever fetched.
+ *
+ * `fil` is in the `Locale` union and has no date-fns locale to import; it
+ * resolved to `undefined` through the namespace too, so it still does.
+ */
+const dateFnsLocaleLoaders: Partial<Record<LocaleKey, () => Promise<DateFnsLocale>>> = {
+    af: () => import("date-fns/locale/af").then(m => m.af),
+    ar: () => import("date-fns/locale/ar").then(m => m.ar),
+    arDZ: () => import("date-fns/locale/ar-DZ").then(m => m.arDZ),
+    arMA: () => import("date-fns/locale/ar-MA").then(m => m.arMA),
+    arSA: () => import("date-fns/locale/ar-SA").then(m => m.arSA),
+    az: () => import("date-fns/locale/az").then(m => m.az),
+    be: () => import("date-fns/locale/be").then(m => m.be),
+    bg: () => import("date-fns/locale/bg").then(m => m.bg),
+    bn: () => import("date-fns/locale/bn").then(m => m.bn),
+    ca: () => import("date-fns/locale/ca").then(m => m.ca),
+    cs: () => import("date-fns/locale/cs").then(m => m.cs),
+    cy: () => import("date-fns/locale/cy").then(m => m.cy),
+    da: () => import("date-fns/locale/da").then(m => m.da),
+    de: () => import("date-fns/locale/de").then(m => m.de),
+    el: () => import("date-fns/locale/el").then(m => m.el),
+    enAU: () => import("date-fns/locale/en-AU").then(m => m.enAU),
+    enCA: () => import("date-fns/locale/en-CA").then(m => m.enCA),
+    enGB: () => import("date-fns/locale/en-GB").then(m => m.enGB),
+    enIN: () => import("date-fns/locale/en-IN").then(m => m.enIN),
+    enNZ: () => import("date-fns/locale/en-NZ").then(m => m.enNZ),
+    enUS: () => import("date-fns/locale/en-US").then(m => m.enUS),
+    eo: () => import("date-fns/locale/eo").then(m => m.eo),
+    es: () => import("date-fns/locale/es").then(m => m.es),
+    et: () => import("date-fns/locale/et").then(m => m.et),
+    eu: () => import("date-fns/locale/eu").then(m => m.eu),
+    faIR: () => import("date-fns/locale/fa-IR").then(m => m.faIR),
+    fi: () => import("date-fns/locale/fi").then(m => m.fi),
+    fr: () => import("date-fns/locale/fr").then(m => m.fr),
+    frCA: () => import("date-fns/locale/fr-CA").then(m => m.frCA),
+    frCH: () => import("date-fns/locale/fr-CH").then(m => m.frCH),
+    gd: () => import("date-fns/locale/gd").then(m => m.gd),
+    gl: () => import("date-fns/locale/gl").then(m => m.gl),
+    gu: () => import("date-fns/locale/gu").then(m => m.gu),
+    he: () => import("date-fns/locale/he").then(m => m.he),
+    hi: () => import("date-fns/locale/hi").then(m => m.hi),
+    hr: () => import("date-fns/locale/hr").then(m => m.hr),
+    hu: () => import("date-fns/locale/hu").then(m => m.hu),
+    hy: () => import("date-fns/locale/hy").then(m => m.hy),
+    id: () => import("date-fns/locale/id").then(m => m.id),
+    is: () => import("date-fns/locale/is").then(m => m.is),
+    it: () => import("date-fns/locale/it").then(m => m.it),
+    ja: () => import("date-fns/locale/ja").then(m => m.ja),
+    ka: () => import("date-fns/locale/ka").then(m => m.ka),
+    kk: () => import("date-fns/locale/kk").then(m => m.kk),
+    kn: () => import("date-fns/locale/kn").then(m => m.kn),
+    ko: () => import("date-fns/locale/ko").then(m => m.ko),
+    lb: () => import("date-fns/locale/lb").then(m => m.lb),
+    lt: () => import("date-fns/locale/lt").then(m => m.lt),
+    lv: () => import("date-fns/locale/lv").then(m => m.lv),
+    mk: () => import("date-fns/locale/mk").then(m => m.mk),
+    ms: () => import("date-fns/locale/ms").then(m => m.ms),
+    mt: () => import("date-fns/locale/mt").then(m => m.mt),
+    nb: () => import("date-fns/locale/nb").then(m => m.nb),
+    nl: () => import("date-fns/locale/nl").then(m => m.nl),
+    nlBE: () => import("date-fns/locale/nl-BE").then(m => m.nlBE),
+    nn: () => import("date-fns/locale/nn").then(m => m.nn),
+    pl: () => import("date-fns/locale/pl").then(m => m.pl),
+    pt: () => import("date-fns/locale/pt").then(m => m.pt),
+    ptBR: () => import("date-fns/locale/pt-BR").then(m => m.ptBR),
+    ro: () => import("date-fns/locale/ro").then(m => m.ro),
+    ru: () => import("date-fns/locale/ru").then(m => m.ru),
+    sk: () => import("date-fns/locale/sk").then(m => m.sk),
+    sl: () => import("date-fns/locale/sl").then(m => m.sl),
+    sr: () => import("date-fns/locale/sr").then(m => m.sr),
+    srLatn: () => import("date-fns/locale/sr-Latn").then(m => m.srLatn),
+    sv: () => import("date-fns/locale/sv").then(m => m.sv),
+    ta: () => import("date-fns/locale/ta").then(m => m.ta),
+    te: () => import("date-fns/locale/te").then(m => m.te),
+    th: () => import("date-fns/locale/th").then(m => m.th),
+    tr: () => import("date-fns/locale/tr").then(m => m.tr),
+    ug: () => import("date-fns/locale/ug").then(m => m.ug),
+    uk: () => import("date-fns/locale/uk").then(m => m.uk),
+    uz: () => import("date-fns/locale/uz").then(m => m.uz),
+    vi: () => import("date-fns/locale/vi").then(m => m.vi),
+    zhCN: () => import("date-fns/locale/zh-CN").then(m => m.zhCN),
+    zhTW: () => import("date-fns/locale/zh-TW").then(m => m.zhTW),
+};
+
+const cache = new Map<LocaleKey, DateFnsLocale>();
+
+/** The locale if it has already been fetched, otherwise `undefined`. Never fetches. */
+export function getLoadedDateFnsLocale(locale: LocaleKey | undefined): DateFnsLocale | undefined {
+    return locale ? cache.get(locale) : undefined;
+}
+
+/**
+ * Fetch a date-fns locale. Resolves to `undefined` for a locale date-fns does
+ * not ship, which is what indexing the namespace used to yield.
+ */
+export async function loadDateFnsLocale(locale: LocaleKey | undefined): Promise<DateFnsLocale | undefined> {
+    if (!locale) return undefined;
+    const cached = cache.get(locale);
+    if (cached) return cached;
+    const loader = dateFnsLocaleLoaders[locale];
+    if (!loader) return undefined;
+    const loaded = await loader();
+    cache.set(locale, loaded);
+    return loaded;
+}

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/>;