@rebasepro/admin 0.13.0 → 0.13.1-canary.g18cfeb7

package/src/hooks/useEntityDisplayTitle.tsx

@@ -1,60 +1,49 @@
 import type { AdminCollection } from "@rebasepro/admin-types";
-import type { EntityStatus } from "@rebasepro/types";
-import { getValueInPath } from "@rebasepro/utils";
-import { getEntityTitlePropertyKeyForEntity, isUserSelectProperty, resolveTitleToString } from "../util/previews";
-import { getUserLabel, useResolvedUser } from "./useResolvedUsers";
+import type { Entity, EntityStatus } from "@rebasepro/types";
+import { useEntityTitle } from "./useEntityDisplay";
 
 export interface UseEntityDisplayTitleParams<M extends Record<string, unknown>> {
     collection: AdminCollection<M>;
+    /** The record. Needed for a computed title; see {@link useEntityTitle}. */
+    entity?: Entity<M>;
+    /** Live form values, when they are ahead of the entity. */
     values?: Record<string, unknown>;
-    entityId?: string | number;
     status: EntityStatus;
 }
 
 /**
- * The human name for a record, for the identity bar and the breadcrumb.
+ * The heading for a record: the identity bar and the breadcrumb.
  *
- * The guard on `status` is the point. The title resolver walks candidate
- * properties and returns the first non-empty one, and on a brand new entity the
- * only populated values are the property defaults — so creating a blog post
- * opened a page headed **draft**, the default of its `status` enum. A record
- * that does not exist yet has no name; it has an intent.
+ * Everything about *what a record is called* lives in {@link useEntityTitle}.
+ * What is left here is the heading's own two rules, which are presentation, not
+ * identity:
+ *
+ * The guard on `status` is the first. The title resolver returns the first
+ * candidate carrying a value, and on a brand new entity the only values are the
+ * property defaults — so creating a blog post opened a page headed **draft**,
+ * the default of its `status` enum. A record that does not exist yet has no
+ * name; it has an intent.
+ *
+ * The fallback is the second. A page needs a heading even when the record has
+ * nothing readable in it, and the honest one is what kind of thing it is.
  */
 export function useEntityDisplayTitle<M extends Record<string, unknown>>({
     collection,
+    entity,
     values,
-    entityId,
     status
 }: UseEntityDisplayTitleParams<M>): string {
 
     const isNew = status === "new";
-
-    const titlePropertyKey = getEntityTitlePropertyKeyForEntity(collection, values, entityId);
-    const rawTitle = !isNew && values && titlePropertyKey
-        ? getValueInPath(values, titlePropertyKey)
-        : undefined;
-
-    // A user picker stores an id: resolve it to the person, like a relation.
-    const titleUser = useResolvedUser(
-        isUserSelectProperty(collection, titlePropertyKey) && typeof rawTitle === "string"
-            ? rawTitle
-            : undefined
-    );
-
     const singular = collection.singularName ?? collection.name;
 
-    if (isNew) {
-        return `New ${singular.toLowerCase()}`;
-    }
-
-    if (titleUser) {
-        return getUserLabel(titleUser);
-    }
-
-    if (rawTitle !== undefined && rawTitle !== null) {
-        const resolved = resolveTitleToString(rawTitle);
-        if (resolved) return resolved;
-    }
+    const { value: title } = useEntityTitle<M>({
+        collection,
+        entity,
+        values,
+        enabled: !isNew
+    });
 
-    return singular;
+    if (isNew) return `New ${singular.toLowerCase()}`;
+    return title ?? singular;
 }

package/src/index.ts

@@ -44,6 +44,12 @@ export {
     Drawer,
     DefaultDrawer,
     DrawerFooterActions,
+    // The two rows the `Shell.DrawerNavigation*` overrides replace. Public so an
+    // app can wrap the stock ones — pass different props, add a context — instead of
+    // reimplementing a nav row and drifting from the framework's hover, active and
+    // tooltip behaviour on the next release.
+    DrawerNavigationItem,
+    DrawerNavigationGroup,
     AdminModeSyncer,
     // ContentHomePage is lazy-loaded — not re-exported here
     RebaseAdmin,
@@ -60,7 +66,9 @@ export type {
     EntityViewBindingProps,
     SelectionProps,
     SelectableTableProps,
-    CollectionPanelProps
+    CollectionPanelProps,
+    DrawerNavigationGroupProps,
+    DrawerNavigationItemProps
 } from "./components";
 
 export * from "./hooks";

package/src/preview/PropertyPreview.tsx

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

package/src/preview/compact_text.ts

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

package/src/preview/components/BooleanPreview.tsx

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

package/src/preview/components/StorageThumbnail.tsx

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

package/src/preview/property_previews/ArrayOfRelationsPreview.tsx

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

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

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

package/src/preview/property_previews/ArrayOneOfPreview.tsx

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

package/src/preview/property_previews/ArrayPropertyPreview.tsx

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

package/src/preview/property_previews/MapPropertyPreview.tsx

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

package/src/preview/property_previews/NumberPropertyPreview.tsx

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

package/src/preview/property_previews/StringPropertyPreview.tsx

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