@rebasepro/app 0.13.0 → 0.13.1-canary.g18cfeb7

package/src/collections/summary-property.ts

@@ -0,0 +1,114 @@
+import type { Property } from "@rebasepro/types";
+
+/**
+ * Whether a property can stand in for a record in *one line*.
+ *
+ * Preview surfaces — the reference card, a list row, a board card — have a
+ * single line per property and no way to grow. That is a constraint on the
+ * *value*, not on the property's importance: a Markdown biography is the most
+ * interesting column on an author, and it is still the wrong thing to paste
+ * into a 44px card. Ranking it here means the picker can skip it without
+ * anyone having to configure their way out of a broken card.
+ *
+ * Kept beside {@link getTitlePropertyCandidates} because the two answer
+ * neighbouring questions — "what is this record called" and "what else can be
+ * said about it in a line" — from the same property schema.
+ *
+ * @group Collections
+ */
+export const SUMMARY_RANK = {
+    /**
+     * No single-line form exists. A map renders as a key/value table and an
+     * array of maps as a stack of them; there is no first line to take.
+     */
+    UNUSABLE: 0,
+    /**
+     * Readable in one line, but only as an excerpt — the property holds a
+     * document, and the line is its opening. Worth showing when nothing better
+     * is available, never in preference to a value that fits whole.
+     */
+    EXCERPT: 1,
+    /** Short and self-contained: the line *is* the value. */
+    DIRECT: 2
+} as const;
+
+/** One of the three summary ranks. */
+export type SummaryRank = typeof SUMMARY_RANK[keyof typeof SUMMARY_RANK];
+
+/**
+ * File-storage backed content (single image, array of images, generic upload…).
+ * Preview surfaces give these their own image slot, so they are never also a
+ * text line.
+ *
+ * @group Collections
+ */
+export function isStorageProperty(property: Property | undefined): boolean {
+    if (!property) return false;
+    if (property.type === "string" && (property.storage || property.admin?.urlPreview === "image")) return true;
+    if (property.type === "array" && property.of && !Array.isArray(property.of)) {
+        const inner = property.of;
+        if (inner.type === "string" && (inner.storage || inner.admin?.urlPreview === "image")) return true;
+    }
+    return false;
+}
+
+/**
+ * True when the property holds free text long enough to be a document rather
+ * than a value — Markdown, or an explicitly multi-line string.
+ *
+ * @group Collections
+ */
+export function isLongTextProperty(property: Property | undefined): boolean {
+    if (!property || property.type !== "string") return false;
+    return Boolean(property.admin?.markdown || property.admin?.multiline);
+}
+
+/**
+ * How well a property reads as one line of a preview. See {@link SUMMARY_RANK}.
+ *
+ * Decided from the property *schema* only: no values are consulted, so the
+ * answer is stable for a collection and can be memoised per collection rather
+ * than per row.
+ *
+ * @group Collections
+ */
+export function rankSummaryProperty(property: Property | undefined): SummaryRank {
+    if (!property) return SUMMARY_RANK.UNUSABLE;
+
+    // Rendered by the image slot, not as text.
+    if (isStorageProperty(property)) return SUMMARY_RANK.UNUSABLE;
+
+    // A map is a table of its own, whether it declares its properties (a row
+    // per sub-property) or not (a key/value dump). Neither has a first line.
+    if (property.type === "map") return SUMMARY_RANK.UNUSABLE;
+
+    if (property.type === "array") {
+        // A tuple: several properties side by side, so there is nothing single
+        // about the line it would produce.
+        if (Array.isArray(property.of)) return SUMMARY_RANK.UNUSABLE;
+        if (!property.of) return property.oneOf ? SUMMARY_RANK.UNUSABLE : SUMMARY_RANK.DIRECT;
+        // Arrays of block-shaped things inherit the block shape.
+        const innerRank = rankSummaryProperty(property.of);
+        if (innerRank === SUMMARY_RANK.UNUSABLE) return SUMMARY_RANK.UNUSABLE;
+        // An array of documents is a stack of excerpts — worse than one
+        // excerpt, and never what a card should lead with.
+        if (innerRank === SUMMARY_RANK.EXCERPT) return SUMMARY_RANK.UNUSABLE;
+        // Short values render as a run of chips, which fits a line.
+        return SUMMARY_RANK.DIRECT;
+    }
+
+    if (isLongTextProperty(property)) return SUMMARY_RANK.EXCERPT;
+
+    // Numbers, dates, booleans, enums, plain strings, and single references or
+    // relations (which collapse to one linked line) all fit as they are.
+    return SUMMARY_RANK.DIRECT;
+}
+
+/**
+ * True when the property has any single-line form at all.
+ *
+ * @group Collections
+ */
+export function canSummariseProperty(property: Property | undefined): boolean {
+    return rankSummaryProperty(property) !== SUMMARY_RANK.UNUSABLE;
+}

package/src/collections/title-property.ts

@@ -2,6 +2,9 @@ import { isRelationalCollectionConfig, type Property, type Relation } from "@reb
 import { generateForeignKeyName } from "@rebasepro/utils";
 import type { AdminCollection } from "@rebasepro/admin-types";
 import { getPrimaryKeys, isPropertyBuilder } from "@rebasepro/common";
+import { getPropertyInPath } from "./property-path";
+import { getDisplayPropertyKey, hasDeclaredDisplay } from "./entity-display";
+import { isStorageProperty } from "./summary-property";
 
 /**
  * How good a property is as the human-readable title of an entity.
@@ -56,19 +59,6 @@ function isHidden(property: Property): boolean {
     return Boolean(property.admin?.hideFromCollection);
 }
 
-/**
- * File-storage backed content (single image, array of images, generic upload…).
- * Rendered by the dedicated image slot, so never a title.
- */
-function isStorageProperty(property: Property): boolean {
-    if (property.type === "string" && (property.storage || property.admin?.urlPreview === "image")) return true;
-    if (property.type === "array" && property.of && !Array.isArray(property.of)) {
-        const inner = property.of;
-        if (inner.type === "string" && (inner.storage || inner.admin?.urlPreview === "image")) return true;
-    }
-    return false;
-}
-
 /**
  * Every column on this collection that stores a foreign key: the `localKey` of
  * each owning relation (declared inline on a property or in `relations[]`), the
@@ -182,8 +172,13 @@ export function getTitlePropertyCandidates<M extends Record<string, unknown>>(
 ): string[] {
     if (!collection.properties) return [];
 
-    if (collection.titleProperty && collection.properties[collection.titleProperty as string]) {
-        return [collection.titleProperty as string];
+    // `getPropertyInPath`, not `properties[key]`: a declared title on a nested
+    // field — `profile.display_name` — was looked up flat, found nothing, and
+    // silently fell through to the derived ranking. The dotted form has been
+    // documented as valid the whole time.
+    const declared = getDisplayPropertyKey(collection, "title");
+    if (declared && getPropertyInPath(collection.properties, declared)) {
+        return [declared];
     }
 
     const idKeys = new Set<string>(getPrimaryKeys(collection) as string[]);
@@ -237,7 +232,9 @@ export function getLeadingRelationTitleKey<M extends Record<string, unknown>>(
     collection: AdminCollection<M>
 ): string | undefined {
     if (!collection.properties) return undefined;
-    if (collection.titleProperty) return undefined;
+    // The collection states what it is called, in one form or the other; either
+    // way it is not asking for the leading-relation heuristic.
+    if (hasDeclaredDisplay(collection, "title")) return undefined;
 
     const idKeys = new Set<string>(getPrimaryKeys(collection) as string[]);
     const foreignKeys = getForeignKeyColumns(collection);

package/src/components/common/useColumnsIds.tsx

@@ -1,28 +1,10 @@
-import type { Property, MapProperty, Properties } from "@rebasepro/types";
+import type { Property, MapProperty, Properties, RelationProperty } from "@rebasepro/types";
 import { useMemo } from "react";
 ;
-import { getSubcollections } from "@rebasepro/common";
+import { getChildViewDeclaringProperties, getChildViewRelationPropertyKeys, getSubcollections } from "@rebasepro/common";
 import type { AdminCollection } from "@rebasepro/admin-types";
-
-/**
- * Get a property in a property tree from a dot-path like `address.street`.
- * Inlined here to avoid importing property-aware utilities from the admin layer.
- */
-function getPropertyInPath(properties: Properties, path: string): Property | undefined {
-    if (typeof properties === "object") {
-        if (path in properties) {
-            return (properties as Record<string, Property>)[path];
-        }
-        if (path.includes(".")) {
-            const pathSegments = path.split(".");
-            const childProperty = (properties as Record<string, Property>)[pathSegments[0]];
-            if (typeof childProperty === "object" && childProperty.type === "map" && childProperty.properties) {
-                return getPropertyInPath(childProperty.properties, pathSegments.slice(1).join("."));
-            }
-        }
-    }
-    return undefined;
-}
+import { getPropertyInPath } from "../../collections/property-path";
+import { isDisabled } from "../../collections/property_presentation";
 
 export type PropertyColumnConfig = {
     key: string;
@@ -32,6 +14,43 @@ export type PropertyColumnConfig = {
 export function getSubcollectionColumnId(collection: AdminCollection<any>) {
     return `subcollection:${collection.slug}`;
 }
+
+/**
+ * The jump-to-tab columns a collection table does not need, because the relation
+ * behind them already has a column of its own.
+ *
+ * Every child view gets a 200px button column that opens its tab. For a relation
+ * declared in `relations` that button is the relation's only presence in the
+ * table. For one declared as a property it is the second: the property's own
+ * column is already there, hydrated by the list fetch's `include: ["*"]`, showing
+ * the child rows themselves — and carrying the *same heading*, because the tab
+ * takes its name from the declaring property. Two columns called "Applications",
+ * one of them a button, and nothing in the header to tell them apart.
+ *
+ * The property column wins: it shows what the children are, and each chip in it
+ * opens one. The tab stays reachable by opening the record, which is what the
+ * rest of the table's rows do anyway.
+ *
+ * Unless the author hid that column — `hideFromCollection` on the property, or a
+ * `propertiesOrder` that omits it, is a statement about the column and not about
+ * the relation, so the button comes back rather than the relation dropping out
+ * of the table altogether.
+ */
+export function getRedundantChildViewColumnIds<M extends Record<string, any>>(collection: AdminCollection<M>): Set<string> {
+    const redundant = new Set<string>();
+    const properties = collection.properties ?? {};
+    const order = collection.propertiesOrder as string[] | undefined;
+
+    for (const [viewKey, propertyKey] of getChildViewDeclaringProperties(collection)) {
+        const property = properties[propertyKey] as Property | undefined;
+        if (!property || property.admin?.hideFromCollection) continue;
+        if (order && !order.includes(propertyKey)) continue;
+        redundant.add(`subcollection:${viewKey}`);
+    }
+
+    return redundant;
+}
+
 export function useColumnIds<M extends Record<string, any>>(collection: AdminCollection<M>, includeSubcollections: boolean): PropertyColumnConfig[] {
     return useMemo(() => {
         if (collection.propertiesOrder) {
@@ -59,9 +78,14 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: AdminColle
     // Track processed keys to avoid duplicates
     const processedPropertyKeys = new Set<string>();
 
+    // Both column paths funnel through here, including a `propertiesOrder` that
+    // was saved back with the button column in it.
+    const redundantChildViewColumns = getRedundantChildViewColumnIds(collection);
+
     const result = keys.flatMap((key) => {
         // Skip if already processed (handles duplicates in propertiesOrder)
         if (processedPropertyKeys.has(key)) return [null];
+        if (redundantChildViewColumns.has(key)) return [null];
 
         // Check if it's a top-level property
         const property = collection.properties[key];
@@ -85,7 +109,7 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: AdminColle
             }
             return [{
                 key,
-                disabled: Boolean(property.admin?.disabled) || Boolean(property.admin?.readOnly)
+                disabled: isDisabled(property) || Boolean(property.admin?.readOnly)
             }];
         }
 
@@ -108,8 +132,8 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: AdminColle
 
                     return [{
                         key,
-                        disabled: Boolean(rootProperty.admin?.disabled) || Boolean(rootProperty.admin?.readOnly) ||
-                            Boolean(nestedProperty.admin?.disabled) || Boolean(nestedProperty.admin?.readOnly)
+                        disabled: isDisabled(rootProperty) || Boolean(rootProperty.admin?.readOnly) ||
+                            isDisabled(nestedProperty) || Boolean(nestedProperty.admin?.readOnly)
                     }];
                 }
             }
@@ -163,7 +187,7 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: AdminColle
         } else {
             result.push({
                 key: propKey,
-                disabled: Boolean(property.admin?.disabled) || Boolean(property.admin?.readOnly)
+                disabled: isDisabled(property) || Boolean(property.admin?.readOnly)
             });
             processedPropertyKeys.add(propKey);
         }
@@ -194,22 +218,36 @@ function getDefaultColumnKeys<M extends Record<string, any> = any>(collection: A
 }
 
 export function getColumnKeysForProperty(property: Property, key: string, disabled?: boolean): PropertyColumnConfig[] {
+    // A key with no property behind it describes no column. Callers walk whole
+    // property maps here to build a table's columns, so reading `.type` off a
+    // hole threw away every other column with it.
+    if (!property) return [];
     if (property.type === "map" && property.admin?.spreadChildren && property.properties) {
         return Object.entries(property.properties)
             .flatMap(([childKey, childProperty]) => getColumnKeysForProperty(
                 childProperty as Readonly<Property>,
                 `${key}.${childKey}`,
-                disabled || Boolean(property.admin?.disabled) || Boolean(property.admin?.readOnly))
+                disabled || isDisabled(property) || Boolean(property.admin?.readOnly))
             );
     }
     return [{
         key,
-        disabled: disabled || Boolean(property.admin?.disabled) || Boolean(property.admin?.readOnly)
+        disabled: disabled || isDisabled(property) || Boolean(property.admin?.readOnly)
     }];
 }
 
 export function getFormFieldKeys(collection: AdminCollection): string[] {
-    const propertyKeys = collection.properties ? Object.keys(collection.properties) : [];
+    const properties = collection.properties ?? {};
+    // A many-relation the entity view already lists as a tab is not an input:
+    // the tab is the treatment, and rendering the same declaration again as a
+    // picker asked the author to select a collection's own children from a
+    // dropdown. `renderInForm` is how a project that wants the picker asks for
+    // it back — opt in, because the tab is the default.
+    const consumedByChildView = getChildViewRelationPropertyKeys(collection);
+    const propertyKeys = Object.keys(properties).filter(key => {
+        if (!consumedByChildView.has(key)) return true;
+        return (properties[key] as RelationProperty).admin?.renderInForm === true;
+    });
     const additionalFields = collection.additionalFields ?? [];
     const allKeys = [
         ...propertyKeys,

package/src/core/Rebase.tsx

@@ -6,7 +6,7 @@ import type { ComponentOverrideMap } from "@rebasepro/admin-types";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { CenteredView, Typography } from "@rebasepro/ui";
 import { User, CollectionRegistryController, DataDriver, DataSourceDefinition, RebaseData, DEFAULT_DATA_SOURCE_KEY, StorageSource, StorageSourceDefinition, DEFAULT_STORAGE_SOURCE_KEY } from "@rebasepro/types";
-import { RebaseContext } from "@rebasepro/admin-types";
+import { RebaseContext, UNRENDERED_SLOTS } from "@rebasepro/admin-types";
 import { PluginProviderStack } from "./PluginProviderStack";
 import { PluginLifecycleManager } from "./PluginLifecycleManager";
 import { AuthControllerContext, CollectionResolverRegistrationContext, CollectionResolver } from "../contexts";
@@ -46,7 +46,7 @@ import { useBuildEffectiveRoleController } from "../hooks/useBuildEffectiveRoleC
  *
  * @group Core
  */
-export function Rebase<USER extends User>(props: RebaseProps<USER>) {
+export function Rebase<USER extends User, DB = unknown>(props: RebaseProps<USER, DB>) {
 
     const {
         children,
@@ -90,6 +90,24 @@ export function Rebase<USER extends User>(props: RebaseProps<USER>) {
         ...((plugins ?? []).flatMap((p) => p.slots ?? []))
     ], [directSlots, plugins]);
 
+    // Seven of the twenty-nine declared slots are rendered nowhere. They have
+    // props interfaces and rows in the public slot reference, so registering
+    // for one looks exactly like registering for one that works — and then
+    // nothing happens, with no way to tell whether the fault is the plugin's.
+    // `UNRENDERED_SLOTS` is kept honest by `slot-render-sites.test.ts`, which
+    // derives the same set by scanning for render sites.
+    useEffect(() => {
+        const dead = new Set<string>(UNRENDERED_SLOTS);
+        const registered = new Set(resolvedSlots.map(s => s.slot).filter(slot => dead.has(slot)));
+        for (const slot of registered) {
+            console.warn(
+                `[Rebase] A component is registered for the "${slot}" slot, which this ` +
+                "build declares but renders nowhere — nothing will appear. This is a gap " +
+                "in Rebase, not in your plugin."
+            );
+        }
+    }, [resolvedSlots]);
+
 
     // Auth fallback logic
     const clientAuthController = useAuthSubscription(authControllerProp ? undefined : client?.auth);

package/src/core/RebaseProps.tsx

@@ -105,7 +105,7 @@ import type { EffectiveRoleController } from "@rebasepro/types";
  *
  * @group Models
  */
-export type RebaseProps<USER extends User> = {
+export type RebaseProps<USER extends User, DB = unknown> = {
 
     /**
      * The root components of your application. Use RebaseAdmin, RebaseStudio, and RebaseShell.
@@ -151,8 +151,16 @@ export type RebaseProps<USER extends User> = {
      * entry keyed `"(default)"` carries a driver.
      * `client.auth` is subscribed unless `authController` is provided.
      * `client.storage` is used unless `storageSource` is provided.
+     *
+     * `DB` is inferred from whatever is passed, and defaults to `unknown` for
+     * an untyped client. It has to be a parameter rather than a fixed
+     * `RebaseClient`: `RebaseClient<unknown>` is not a supertype of
+     * `RebaseClient<Database>` — the dynamic branch of `RebaseSdkData` is an
+     * index signature that no concrete instantiation satisfies — so pinning it
+     * here rejected the client of every project that generates a `Database`
+     * type, which is the whole typed-SDK path.
      */
-    client?: RebaseClient;
+    client?: RebaseClient<DB>;
 
     /**
      * The data sources of the app. Each entry pairs a

package/src/hooks/data/useCollection.tsx

@@ -147,6 +147,16 @@ export function useCollection<M extends Record<string, any>, USER extends User>(
             }, (res) => onEntitiesUpdate({ data: res.data as Entity<M>[],
 meta: res.meta }), onError);
         } else {
+            // The one-shot fallback, taken whenever the client has no socket.
+            // `listen` above cancels on cleanup, and every dependency of this
+            // effect — the search string, the filters, the sort, the page —
+            // changes while a request is in flight. A promise cannot be
+            // unsubscribed, so the cleanup has to disown its result instead:
+            // without this, whichever response arrives last wins, and responses
+            // do not arrive in request order. Typing into search would settle
+            // on the results for whichever query the server happened to finish
+            // last.
+            let cancelled = false;
             accessor.find({
                 where: whereParams,
                 limit: itemCount,
@@ -156,10 +166,17 @@ meta: res.meta }), onError);
                 searchString,
                 include: includeParams
             })
-                .then((res) => onEntitiesUpdate({ data: res.data as Entity<M>[],
-meta: res.meta }))
-                .catch(onError);
+                .then((res) => {
+                    if (cancelled) return;
+                    onEntitiesUpdate({ data: res.data as Entity<M>[],
+meta: res.meta });
+                })
+                .catch((e) => {
+                    if (cancelled) return;
+                    onError(e);
+                });
             return () => {
+                cancelled = true;
             };
         }
     }, [path, itemCount, offset, page, currentSort, sortByProperty, filterValues, searchString, dataClient, collection]);

package/src/hooks/data/useFetch.tsx

@@ -117,10 +117,25 @@ export function useFetch<M extends Record<string, any>, USER extends User = User
             if (accessor.listenById) {
                 return accessor.listenById(entityId, (entity) => onEntityUpdate(entity as Entity<M> | undefined), onError);
             } else {
+                // The one-shot fallback, taken whenever the client has no
+                // socket. `listenById` above cancels on cleanup; a promise
+                // cannot, so the cleanup disowns its result instead. `entityId`
+                // is an effect dependency, and where this hook's caller is not
+                // remounted per record — the side panel replaces its contents
+                // in place — a slow response for the record just left would
+                // otherwise land on top of the one now showing.
+                let cancelled = false;
                 accessor.findById(entityId)
-                    .then((entity) => onEntityUpdate(entity as Entity<M> | undefined))
-                    .catch(onError);
+                    .then((entity) => {
+                        if (cancelled) return;
+                        onEntityUpdate(entity as Entity<M> | undefined);
+                    })
+                    .catch((e) => {
+                        if (cancelled) return;
+                        onError(e);
+                    });
                 return () => {
+                    cancelled = true;
                 };
             }
         }

package/src/hooks/data/useRelationSelector.tsx

@@ -174,6 +174,14 @@ export function useRelationSelector<M extends Record<string, any> = any>(
             }, (res) => onEntitiesUpdate({ data: res.data as Entity<M>[],
 meta: res.meta }), onErrorUpdate);
         } else {
+            // The one-shot fallback, taken whenever the client has no socket.
+            // `cleanupSubscription` is what keeps this hook's results matching
+            // the query that asked for them, and it can only do that if the
+            // fallback hands back something that actually cancels. A promise
+            // cannot be unsubscribed, so this disowns its result instead —
+            // otherwise the debounce is the only thing between a slow response
+            // for "ab" and its landing on top of the results for "abc".
+            let cancelled = false;
             accessor.find({
                 where: whereParams,
                 limit: limit,
@@ -182,10 +190,18 @@ meta: res.meta }), onErrorUpdate);
                 searchString: currentSearch,
                 include: includeParams
             })
-                .then((res) => onEntitiesUpdate({ data: res.data as Entity<M>[],
-meta: res.meta }))
-                .catch(onErrorUpdate);
-            unsubscribe = () => {};
+                .then((res) => {
+                    if (cancelled) return;
+                    onEntitiesUpdate({ data: res.data as Entity<M>[],
+meta: res.meta });
+                })
+                .catch((e) => {
+                    if (cancelled) return;
+                    onErrorUpdate(e);
+                });
+            unsubscribe = () => {
+                cancelled = true;
+            };
         }
 
         unsubscribeRef.current = unsubscribe || null;

package/src/hooks/useAuthSubscription.ts

@@ -50,9 +50,25 @@ export function useAuthSubscription(authClient?: AuthClient): AuthController {
                     if (user) {
                         setUser(user);
                     }
+                    setAuthError(undefined);
                 })
-                .catch(e => {
-                    // Ignore, user just isn't logged in
+                .catch((e: unknown) => {
+                    // A 401 or 403 is the ordinary first load of an anonymous
+                    // visitor: there is no session, which is not an error.
+                    //
+                    // Everything else is. This used to swallow the lot with
+                    // "Ignore, user just isn't logged in", leaving `authError`
+                    // — a field this controller declares and `Rebase` renders a
+                    // full-screen "Error loading auth" view for — permanently
+                    // undefined. So the view was unreachable, and a backend that
+                    // was down, misconfigured, or blocked by CORS looked exactly
+                    // like being signed out: the app showed the login form.
+                    const status = (e as { status?: number } | undefined)?.status;
+                    if (status === 401 || status === 403) {
+                        setAuthError(undefined);
+                        return;
+                    }
+                    setAuthError(e instanceof Error ? e : new Error(String(e)));
                 })
                 .finally(() => {
                     setInitialLoading(false);

package/src/hooks/useBuildLocalConfigurationPersistence.tsx

@@ -1,15 +1,16 @@
 import { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import { PartialCollectionConfig, UserConfigurationPersistence } from "@rebasepro/admin-types";
 import { stripCollectionPath } from "@rebasepro/common";
-import { mergeDeep } from "@rebasepro/utils";
+import { isArrayValue, isRecordValue, mergeDeep, readStoredJson, writeStoredJson } from "@rebasepro/utils";
 
 export function useBuildLocalConfigurationPersistence(): UserConfigurationPersistence {
 
     const configCache = useRef<Record<string, PartialCollectionConfig>>({});
 
-    const getCollectionFromStorage = useCallback((storageKey: string) => {
-        const item = localStorage.getItem(storageKey);
-        return item ? JSON.parse(item) : {};
+    // Read during render by every collection view, so an unreadable value here
+    // used to throw the view away rather than fall back to an unconfigured one.
+    const getCollectionFromStorage = useCallback(<M extends Record<string, any>>(storageKey: string): PartialCollectionConfig<M> => {
+        return readStoredJson<PartialCollectionConfig<M>>(storageKey, { fallback: {}, accept: isRecordValue });
     }, []);
 
     const getCollectionConfig = useCallback(<M extends Record<string, any>>(path: string): PartialCollectionConfig<M> => {
@@ -22,9 +23,15 @@ export function useBuildLocalConfigurationPersistence(): UserConfigurationPersis
 
     const onCollectionModified = useCallback(<M extends Record<string, any>>(path: string, data: PartialCollectionConfig<M>) => {
         const storageKey = `collection_config::${stripCollectionPath(path)}`;
-        localStorage.setItem(storageKey, JSON.stringify(data));
+        writeStoredJson(storageKey, data);
         const cachedConfig = configCache.current[storageKey];
-        const newConfig = mergeDeep(cachedConfig ?? getCollectionFromStorage(path), data);
+        // `getCollectionFromStorage` takes the storage key, not the path — every
+        // other caller passes one. Reading `path` looked up a key this hook
+        // never writes, so the fallback could only ever contribute `{}`. It is
+        // masked today because the one caller merges the stored config in
+        // before calling, but `onCollectionModified` accepts a partial by type
+        // and by its public interface, and a real partial would lose the rest.
+        const newConfig = mergeDeep(cachedConfig ?? getCollectionFromStorage(storageKey), data);
         configCache.current[storageKey] = mergeDeep(configCache.current[storageKey], newConfig);
     }, [getCollectionFromStorage]);
 
@@ -33,23 +40,24 @@ export function useBuildLocalConfigurationPersistence(): UserConfigurationPersis
     const [collapsedGroups, _setCollapsedGroups] = useState<string[]>([]);
 
     useEffect(() => {
-        _setRecentlyVisitedPaths(localStorage.getItem("recently_visited_paths") ? JSON.parse(localStorage.getItem("recently_visited_paths")!) : []);
-        _setFavouritePaths(localStorage.getItem("favourite_paths") ? JSON.parse(localStorage.getItem("favourite_paths")!) : []);
-        _setCollapsedGroups(localStorage.getItem("collapsed_groups") ? JSON.parse(localStorage.getItem("collapsed_groups")!) : []);
+        const readPaths = (key: string) => readStoredJson<string[]>(key, { fallback: [], accept: isArrayValue });
+        _setRecentlyVisitedPaths(readPaths("recently_visited_paths"));
+        _setFavouritePaths(readPaths("favourite_paths"));
+        _setCollapsedGroups(readPaths("collapsed_groups"));
     }, []);
 
     const setRecentlyVisitedPaths = useCallback((paths: string[]) => {
-        localStorage.setItem("recently_visited_paths", JSON.stringify(paths));
+        writeStoredJson("recently_visited_paths", paths);
         _setRecentlyVisitedPaths(paths);
     }, []);
 
     const setFavouritePaths = useCallback((paths: string[]) => {
-        localStorage.setItem("favourite_paths", JSON.stringify(paths));
+        writeStoredJson("favourite_paths", paths);
         _setFavouritePaths(paths);
     }, []);
 
     const setCollapsedGroups = useCallback((paths: string[]) => {
-        localStorage.setItem("collapsed_groups", JSON.stringify(paths));
+        writeStoredJson("collapsed_groups", paths);
         _setCollapsedGroups(paths);
     }, []);
 

package/src/locales/de.ts

@@ -77,6 +77,7 @@ export const de: RebaseTranslations = {
     column_cannot_be_edited: "Diese Spalte kann nicht direkt bearbeitet werden",
     close: "Schließen",
     hide_list: "Liste ausblenden",
+    show_list: "Liste einblenden",
     unsaved_local_changes: "Ungespeicherte lokale Änderungen",
     unsaved_local_changes_description: "Dieses Dokument wurde lokal bearbeitet und weist ungespeicherte Änderungen auf. Diese lokalen Änderungen gehen verloren, wenn Sie sie nicht anwenden.",
     preview_changes: "Änderungen in der Vorschau anzeigen",

package/src/locales/en.ts

@@ -87,6 +87,7 @@ export const en: RebaseTranslations = {
     column_cannot_be_edited: "This column can't be edited directly",
     close: "Close",
     hide_list: "Hide list",
+    show_list: "Show list",
     unsaved_local_changes: "Unsaved Local changes",
     unsaved_local_changes_description: "This document was edited locally and has unsaved changes. These local changes will be lost if you don't apply them.",
     preview_changes: "Preview Changes",
@@ -993,6 +994,7 @@ export const en: RebaseTranslations = {
     inspect_record: "Inspect record",
     inspect: "Inspect",
     close_inspector: "Close inspector",
+    open_in_live_site: "Open in the live site",
 
     // ─── Revision history ───────────────────────────────────────
     history_revert: "Revert to this version",

package/src/locales/es.ts

@@ -85,6 +85,7 @@ export const es: RebaseTranslations = {
     column_cannot_be_edited: "Esta columna no se puede editar directamente",
     close: "Cerrar",
     hide_list: "Ocultar lista",
+    show_list: "Mostrar lista",
     unsaved_local_changes: "Cambios locales sin guardar",
     unsaved_local_changes_description: "Este documento ha sido editado localmente y tiene cambios sin guardar. Estos cambios locales se perderán si no los aplicas.",
     preview_changes: "Previsualizar cambios",

package/src/locales/fr.ts

@@ -77,6 +77,7 @@ export const fr: RebaseTranslations = {
     column_cannot_be_edited: "Cette colonne ne peut pas être modifiée directement",
     close: "Fermer",
     hide_list: "Masquer la liste",
+    show_list: "Afficher la liste",
     unsaved_local_changes: "Modifications locales non enregistrées",
     unsaved_local_changes_description: "Ce document a été modifié localement et contient des modifications non enregistrées. Ces modifications locales seront perdues si vous ne les appliquez pas.",
     preview_changes: "Aperçu des modifications",