@rebasepro/admin 0.12.1-canary.gf4240e3 → 0.13.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/admin",
   "type": "module",
-  "version": "0.12.1-canary.gf4240e3",
+  "version": "0.13.0",
   "description": "Rebase CMS — content management views, forms, and routing",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -83,14 +83,14 @@
     "react-dropzone": "^19.1.1",
     "react-use-measure": "^2.1.7",
     "zod": "^4.4.3",
-    "@rebasepro/app": "0.12.1-canary.gf4240e3",
-    "@rebasepro/admin-types": "0.12.1-canary.gf4240e3",
-    "@rebasepro/types": "0.12.1-canary.gf4240e3",
-    "@rebasepro/common": "0.12.1-canary.gf4240e3",
-    "@rebasepro/forms": "0.12.1-canary.gf4240e3",
-    "@rebasepro/inference": "0.12.1-canary.gf4240e3",
-    "@rebasepro/ui": "0.12.1-canary.gf4240e3",
-    "@rebasepro/utils": "0.12.1-canary.gf4240e3"
+    "@rebasepro/admin-types": "0.13.0",
+    "@rebasepro/app": "0.13.0",
+    "@rebasepro/common": "0.13.0",
+    "@rebasepro/inference": "0.13.0",
+    "@rebasepro/forms": "0.13.0",
+    "@rebasepro/ui": "0.13.0",
+    "@rebasepro/types": "0.13.0",
+    "@rebasepro/utils": "0.13.0"
   },
   "peerDependencies": {
     "react": ">=19.2.7",

package/src/components/DetailViewBinding.tsx

@@ -581,22 +581,29 @@ entityId }
             </Tabs>
         </div>}
 
-        {globalLoading
-            ? <DetailViewSkeleton collection={collection} />
-            : mainView}
+        {/* See EditViewBinding: the inspector docks beside the record rather
+            than over it, so the record stays readable and scrollable. */}
+        <div className={"flex-1 min-h-0 flex"}>
 
-        {customViewsView}
-        {subCollectionsViews}
+            <div className={"flex-1 min-w-0 flex flex-col"}>
+                {globalLoading
+                    ? <DetailViewSkeleton collection={collection} />
+                    : mainView}
 
-        <EntityInspector
-            tab={inspectorTab}
-            onTabChange={setInspectorTab}
-            onClose={() => setInspectorTab(null)}
-            collection={collection as AdminCollection}
-            entity={usedEntity as Entity<Record<string, unknown>> | undefined}
-            formContext={readOnlyFormContext as FormContext<Record<string, unknown>> | undefined}
-            values={usedEntity?.values}
-            includeHistory={includeHistoryView}/>
+                {customViewsView}
+                {subCollectionsViews}
+            </div>
+
+            <EntityInspector
+                tab={inspectorTab}
+                onTabChange={setInspectorTab}
+                onClose={() => setInspectorTab(null)}
+                collection={collection as AdminCollection}
+                entity={usedEntity as Entity<Record<string, unknown>> | undefined}
+                formContext={readOnlyFormContext as FormContext<Record<string, unknown>> | undefined}
+                values={usedEntity?.values}
+                includeHistory={includeHistoryView}/>
+        </div>
 
     </div>;
 

package/src/components/EditViewBinding.tsx

@@ -421,6 +421,10 @@ parentEntityIds,
     );
 
     const [inspectorTab, setInspectorTab] = useState<InspectorTab | null>(null);
+    // A save adds a revision, and the inspector can be open while it happens:
+    // Save lives in the identity bar, above the panel. Counting saves gives the
+    // history list something to react to.
+    const [savedCount, setSavedCount] = useState(0);
 
     /* ---- record actions, in the bar's overflow menu ---------------------- */
 
@@ -600,6 +604,7 @@ parentEntityIds,
                 formProps?.onFormContextReady?.(formContext);
             }}
             onSaved={(params) => {
+                setSavedCount(count => count + 1);
                 const res = {
                     ...params,
                     selectedTab: MAIN_TAB_VALUE === activeTab ? undefined : activeTab
@@ -758,26 +763,35 @@ parentEntityIds,
             </Tabs>
         </div>}
 
-        {globalLoading
-            ? <EntityFormSkeleton collection={collection} />
-            : <>
-                {entityReadOnlyView}
-                {entityView}
-            </>}
+        {/* The record and the inspector share the space below the bar rather
+            than stacking, so the form stays reachable while the panel is open.
+            `min-w-0` keeps a wide form from pushing the panel off the edge. */}
+        <div className={"flex-1 min-h-0 flex"}>
 
-        {customViewsView}
+            <div className={"flex-1 min-w-0 flex flex-col"}>
+                {globalLoading
+                    ? <EntityFormSkeleton collection={collection} />
+                    : <>
+                        {entityReadOnlyView}
+                        {entityView}
+                    </>}
 
-        {subCollectionsViews}
+                {customViewsView}
 
-        <EntityInspector
-            tab={inspectorTab}
-            onTabChange={setInspectorTab}
-            onClose={() => setInspectorTab(null)}
-            collection={collection as AdminCollection}
-            entity={usedEntity as Entity<Record<string, unknown>> | undefined}
-            formContext={formContext as FormContext<Record<string, unknown>> | undefined}
-            values={formContext?.values ?? usedEntity?.values}
-            includeHistory={includeHistoryView}/>
+                {subCollectionsViews}
+            </div>
+
+            <EntityInspector
+                tab={inspectorTab}
+                onTabChange={setInspectorTab}
+                onClose={() => setInspectorTab(null)}
+                collection={collection as AdminCollection}
+                entity={usedEntity as Entity<Record<string, unknown>> | undefined}
+                formContext={formContext as FormContext<Record<string, unknown>> | undefined}
+                values={formContext?.values ?? usedEntity?.values}
+                refreshToken={savedCount}
+                includeHistory={includeHistoryView}/>
+        </div>
 
     </div>;
 

package/src/components/EntityInspector.tsx

@@ -31,6 +31,12 @@ export interface EntityInspectorProps {
     values?: Record<string, unknown>;
     /** History is only offered when the collection records it. */
     includeHistory: boolean;
+    /**
+     * Bumped once per save by the view that owns the form. The panel stays open
+     * across a save — the bar's Save button sits above it — so without this the
+     * history list would still be the one fetched when the panel opened.
+     */
+    refreshToken?: number;
 }
 
 /**
@@ -41,8 +47,8 @@ export interface EntityInspectorProps {
  * to edit. They are developer tools, not places the record lives, so they belong
  * behind one affordance in the bar; a content editor should never meet `<>`.
  *
- * The panel starts below the identity bar deliberately: you keep seeing which
- * record you are inspecting while you inspect it.
+ * The panel sits below the identity bar and beside the record deliberately: you
+ * keep seeing which record you are inspecting, and keep being able to edit it.
  */
 export function EntityInspector({
     tab,
@@ -52,7 +58,8 @@ export function EntityInspector({
     entity,
     formContext,
     values,
-    includeHistory
+    includeHistory,
+    refreshToken
 }: EntityInspectorProps) {
 
     const { t } = useTranslation();
@@ -73,59 +80,57 @@ export function EntityInspector({
     if (!open) return null;
 
     return (
-        // Starts below the 52px identity bar, so the record you are inspecting
-        // stays named and its actions stay reachable while the panel is open.
-        <div className={"absolute inset-x-0 bottom-0 top-[52px] z-30 flex justify-end"}
-            role={"dialog"}
-            aria-label={t("inspect_record") ?? "Inspect record"}>
+        // Docked beside the record rather than over it. As an overlay with a
+        // scrim this was modal in effect: the first click into the form went to
+        // the scrim and closed the panel, so a revision list could never be
+        // open while you edited the record it belongs to — which is the only
+        // time watching it is worth anything.
+        <div className={cls(
+            "relative flex flex-col shrink-0 h-full w-full max-w-md border-l",
+            "bg-white dark:bg-surface-800",
+            defaultBorderMixin
+        )}
+        role={"complementary"}
+        aria-label={t("inspect_record") ?? "Inspect record"}>
 
-            <div className={"absolute inset-0 bg-black/25"}
-                onClick={onClose}
-                aria-hidden={true}/>
+            <div className={cls("h-11 shrink-0 flex items-center gap-2 pl-4 pr-1.5 border-b", defaultBorderMixin)}>
+                <span className={"text-sm font-semibold"}>{t("inspect") ?? "Inspect"}</span>
 
-            <div className={cls(
-                "relative flex flex-col w-full max-w-md border-l shadow-xl",
-                "bg-white dark:bg-surface-800",
-                defaultBorderMixin
-            )}>
-                <div className={cls("h-11 shrink-0 flex items-center gap-2 pl-4 pr-1.5 border-b", defaultBorderMixin)}>
-                    <span className={"text-sm font-semibold"}>{t("inspect") ?? "Inspect"}</span>
+                <div className={"flex-1"}/>
 
-                    <div className={"flex-1"}/>
+                {includeHistory
+                    ? <Tabs value={tab ?? "json"}
+                        className={"!w-fit"}
+                        onValueChange={(v) => onTabChange(v as InspectorTab)}>
+                        <Tab value={"json"} className={"text-xs"}>{t("json")}</Tab>
+                        <Tab value={"history"} className={"text-xs"}>
+                            {t("record_history") ?? "History"}
+                        </Tab>
+                    </Tabs>
+                    : null}
 
-                    {includeHistory
-                        ? <Tabs value={tab ?? "json"}
-                            className={"!w-fit"}
-                            onValueChange={(v) => onTabChange(v as InspectorTab)}>
-                            <Tab value={"json"} className={"text-xs"}>{t("json")}</Tab>
-                            <Tab value={"history"} className={"text-xs"}>
-                                {t("record_history") ?? "History"}
-                            </Tab>
-                        </Tabs>
-                        : null}
-
-                    <IconButton size={"small"} onClick={onClose}
-                        aria-label={t("close_inspector") ?? "Close inspector"}>
-                        <XIcon size={iconSize.smallest}/>
-                    </IconButton>
-                </div>
+                <IconButton size={"small"} onClick={onClose}
+                    aria-label={t("close_inspector") ?? "Close inspector"}>
+                    <XIcon size={iconSize.smallest}/>
+                </IconButton>
+            </div>
 
-                <div className={"flex-1 min-h-0 overflow-auto"}>
-                    <ErrorBoundary>
-                        {tab === "json" && (
-                            <JsonPreviewBinding values={values ?? entity?.values ?? {}}/>
-                        )}
-                        {tab === "history" && includeHistory && formContext && (
-                            <Suspense fallback={<CircularProgressCenter/>}>
-                                <EntityHistoryView
-                                    collection={collection}
-                                    entity={entity}
-                                    formContext={formContext}
-                                    modifiedValues={values ?? entity?.values}/>
-                            </Suspense>
-                        )}
-                    </ErrorBoundary>
-                </div>
+            <div className={"flex-1 min-h-0 overflow-auto"}>
+                <ErrorBoundary>
+                    {tab === "json" && (
+                        <JsonPreviewBinding values={values ?? entity?.values ?? {}}/>
+                    )}
+                    {tab === "history" && includeHistory && formContext && (
+                        <Suspense fallback={<CircularProgressCenter/>}>
+                            <EntityHistoryView
+                                collection={collection}
+                                entity={entity}
+                                formContext={formContext}
+                                refreshToken={refreshToken}
+                                modifiedValues={values ?? entity?.values}/>
+                        </Suspense>
+                    )}
+                </ErrorBoundary>
             </div>
         </div>
     );

package/src/components/history/EntityHistoryView.tsx

@@ -16,8 +16,12 @@ import { useHistory } from "../../hooks/useHistory";
 export function EntityHistoryView<M extends Record<string, unknown>>({
     entity,
     collection,
-    formContext
-}: EntityCustomViewParams<M>) {
+    formContext,
+    refreshToken
+}: EntityCustomViewParams<M> & {
+    /** Bumped once per save, so the list picks up the revision it just made. */
+    refreshToken?: number;
+}) {
 
     const { t } = useTranslation();
     const snackbarController = useSnackbarController();
@@ -37,7 +41,8 @@ export function EntityHistoryView<M extends Record<string, unknown>>({
         slug,
         entityId,
         enabled: !!entityId,
-        pageSize: 10
+        pageSize: 10,
+        refreshToken
     });
 
     const [revertHistoryId, setRevertHistoryId] = useState<string | undefined>();

package/src/hooks/useHistory.ts

@@ -28,8 +28,15 @@ export function useHistory(params: {
     entityId: string | number | undefined;
     enabled?: boolean;
     pageSize?: number;
+    /**
+     * Bumped by the caller when the record is saved. A save is the one event
+     * that adds a revision, and nothing else here would notice it: without
+     * this the open panel keeps showing the list it fetched when it opened,
+     * so the revision you just created never appears.
+     */
+    refreshToken?: number;
 }): UseEntityHistoryResult {
-    const { slug, entityId, enabled = true, pageSize = 10 } = params;
+    const { slug, entityId, enabled = true, pageSize = 10, refreshToken } = params;
     const apiConfig = useApiConfig();
     const apiBase = useApiBase();
 
@@ -41,7 +48,11 @@ export function useHistory(params: {
     const [offset, setOffset] = useState(0);
     const [refreshTrigger, setRefreshTrigger] = useState(0);
 
-    // Track the current entity identity so we can detect stale responses
+    // Track the current entity identity so we can detect stale responses.
+    // `refreshToken` is part of the identity on purpose: a save makes the list
+    // we are holding a stale page of a longer list, which is the same problem
+    // as having moved to a different record.
+    const entityKey = `${slug}/${entityId}/${refreshToken ?? 0}`;
     const currentEntityRef = useRef<string | undefined>(undefined);
 
     const fetchEntries = useCallback(async (
@@ -66,7 +77,6 @@ signal });
 
             // Check if the request was aborted or the entity changed while in-flight
             if (signal?.aborted) return;
-            const entityKey = `${slug}/${entityId}`;
             if (currentEntityRef.current !== entityKey) return;
 
             if (!response.ok) {
@@ -91,12 +101,11 @@ signal });
         } finally {
             setIsLoading(false);
         }
-    }, [apiConfig, apiBase, slug, entityId, enabled, pageSize]);
+    }, [apiConfig, apiBase, slug, entityId, entityKey, enabled, pageSize]);
 
     // Single unified effect: reset state when entity changes, fetch when offset changes.
     // Uses AbortController to cancel stale requests on entity change or unmount.
     useEffect(() => {
-        const entityKey = `${slug}/${entityId}`;
         const isNewEntity = currentEntityRef.current !== entityKey;
 
         if (isNewEntity) {
@@ -118,7 +127,7 @@ signal });
         return () => {
             abortController.abort();
         };
-    }, [fetchEntries, offset, enabled, entityId, slug, refreshTrigger]);
+    }, [fetchEntries, offset, enabled, entityId, entityKey, refreshTrigger]);
 
     const loadMore = useCallback(() => {
         if (!isLoading && hasMore && offset + entries.length < total) {

package/dist/history-c-iE7d4k.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"history-c-iE7d4k.js","names":[],"sources":["../src/components/history/UserChip.tsx","../src/components/history/EntityHistoryEntry.tsx","../src/components/history/EntityHistoryView.tsx"],"sourcesContent":["import { User } from \"@rebasepro/types\";\nimport { Chip, Tooltip } from \"@rebasepro/ui\";\n\nexport function UserChip({ user }: { user: User }) {\n    return (\n        <Tooltip title={user.email ?? user.uid}>\n            <Chip size={\"small\"} className={\"flex items-center\"}>\n                {user.photoURL && <img\n                    className={\"rounded-full w-6 h-6 mr-2\"}\n                    src={user.photoURL} alt={user.displayName ?? \"User picture\"}/>}\n                <span>{user.displayName ?? user.email ?? user.uid}</span>\n            </Chip>\n        </Tooltip>\n    );\n}\n","\nimport type { Property } from \"@rebasepro/types\";\nimport * as React from \"react\";\n\nimport { ArrowLeftIcon, Chip, cls, defaultBorderMixin, iconSize, Tooltip, Typography } from \"@rebasepro/ui\";\nimport { PreviewSize } from \"../../types/components/PropertyPreviewProps\";\nimport { getPropertyInPath } from \"../../util/property_utils\";\nimport { PropertyPreview } from \"../../preview/PropertyPreview\";\nimport { SkeletonPropertyComponent } from \"../../preview/property_previews/SkeletonPropertyComponent\";\nimport { useAuthController } from \"@rebasepro/app\";\nimport { UserChip } from \"./UserChip\";\nimport { HistoryEntryData } from \"../../hooks\";\nimport { getValueInPath } from \"@rebasepro/utils\";\nimport type { AdminCollection } from \"@rebasepro/admin-types\";\n\n/**\n * Recursive deep equality for primitives, arrays and plain objects.\n */\nfunction deepEqual(a: unknown, b: unknown): boolean {\n    if (a === b) return true;\n    if (a == null || b == null) return a === b;\n    if (typeof a !== typeof b) return false;\n    if (typeof a !== \"object\") return false;\n\n    if (Array.isArray(a)) {\n        if (!Array.isArray(b) || a.length !== (b as unknown[]).length) return false;\n        return a.every((item, i) => deepEqual(item, (b as unknown[])[i]));\n    }\n\n    if (Array.isArray(b)) return false;\n\n    const aObj = a as Record<string, unknown>;\n    const bObj = b as Record<string, unknown>;\n    const aKeys = Object.keys(aObj);\n    const bKeys = Object.keys(bObj);\n    if (aKeys.length !== bKeys.length) return false;\n    return aKeys.every(key => key in bObj && deepEqual(aObj[key], bObj[key]));\n}\n\nexport type EntityHistoryEntryProps = {\n    size: PreviewSize;\n    actions?: React.ReactNode;\n    collection?: AdminCollection;\n    hover?: boolean;\n    entry: HistoryEntryData;\n    onClick?: (e: React.SyntheticEvent) => void;\n};\n\nfunction PreviousValueView({\n    previousValueInPath,\n    childProperty,\n    propertyKey\n}: {\n    previousValueInPath: unknown;\n    childProperty: Property;\n    propertyKey: string;\n}) {\n    if (typeof previousValueInPath === \"string\" || typeof previousValueInPath === \"number\") {\n        return <Typography variant={\"caption\"} color={\"secondary\"} className=\"line-through\">\n            {previousValueInPath}\n        </Typography>;\n    } else if (typeof previousValueInPath === \"boolean\") {\n        return <Typography variant={\"caption\"} color={\"secondary\"} className=\"line-through\">\n            {previousValueInPath ? \"true\" : \"false\"}\n        </Typography>;\n    } else {\n        return <Tooltip\n            side={\"left\"}\n            title={<div className={\"flex flex-col gap-2\"}>\n                <Typography variant={\"caption\"} color={\"secondary\"}>\n                    Previous value\n                </Typography>\n                <PropertyPreview\n                    propertyKey={propertyKey as string}\n                    value={previousValueInPath as never}\n                    property={childProperty as Property}\n                    size={\"small\"}/>\n            </div>}>\n            <ArrowLeftIcon size={iconSize.smallest} color={\"disabled\"} className={\"mb-1\"}/>\n        </Tooltip>\n    }\n}\n\n/**\n * Displays a single entity history revision entry.\n * Adapted from the entity_history plugin — now reads from backend API data.\n */\nexport function EntityHistoryEntry({\n    actions,\n    hover,\n    collection,\n    size,\n    entry\n}: EntityHistoryEntryProps) {\n\n    const authController = useAuthController();\n\n    // The backend reports the whole row as changed, which includes the columns\n    // that cannot meaningfully change: a timestamp it stamps itself on every\n    // write, and the primary key, which is what identifies the row being\n    // revised. Every revision was listing `updated_at: <now>` and `id: <the id\n    // in the title bar>` around the one field the user actually edited.\n    const changedFields = React.useMemo(() => {\n        const all = entry.changed_fields;\n        if (!all || !collection) return all;\n        return all.filter(key => {\n            const property = getPropertyInPath(collection.properties, key);\n            if (!property) return true;\n            if (\"isId\" in property && property.isId) return false;\n            return !(property.type === \"date\" && \"autoValue\" in property && property.autoValue);\n        });\n    }, [entry.changed_fields, collection]);\n\n    const previousValues = entry.previous_values;\n    const updatedOn = new Date(entry.updated_at);\n    const updatedBy = entry.updated_by;\n\n    // Resolve user display\n    const currentUser = authController.user;\n    const userDisplay = updatedBy === currentUser?.uid\n        ? currentUser\n        : undefined;\n\n    return <div className={\"@container/histentry w-full flex flex-col gap-2\"}>\n        <div className={\"flex items-center flex-wrap gap-2\"}>\n            <Typography variant={\"body2\"} color={\"secondary\"}>\n                {updatedOn.toLocaleString()}\n            </Typography>\n            <Chip size={\"small\"}>\n                {entry.action}\n            </Chip>\n            {!userDisplay && updatedBy && <Chip size={\"small\"}>{updatedBy}</Chip>}\n            {userDisplay && <UserChip user={userDisplay}/>}\n        </div>\n        <div\n            className={cls(\n                \"bg-white dark:bg-surface-900\",\n                \"min-h-[44px]\",\n                \"w-full\",\n                \"items-center\",\n                hover ? \"hover:bg-surface-accent-50 dark:hover:bg-surface-800\" : \"\",\n                size === \"small\" ? \"p-1\" : \"px-2 py-1\",\n                \"flex border rounded-lg\",\n                defaultBorderMixin\n            )}>\n\n            {actions}\n\n            <div className={\"flex flex-col grow w-full m-1 shrink min-w-0\"}>\n\n                {changedFields && collection && changedFields.map((key: string) => {\n                    const childProperty = getPropertyInPath(collection.properties, key);\n                    const valueInPath = entry.values ? getValueInPath(entry.values, key) : undefined;\n                    const previousValueInPath = previousValues ? getValueInPath(previousValues, key) : undefined;\n\n                    const element = childProperty\n                        ? <PropertyPreview\n                            propertyKey={key}\n                            value={valueInPath as never}\n                            property={childProperty as Property}\n                            size={\"small\"}/>\n                        : <Typography variant={\"body2\"}>\n                            {typeof valueInPath === \"string\" ? valueInPath : JSON.stringify(valueInPath)}\n                        </Typography>;\n\n                    // The key column used to be `min-w-[200px] w-1/5` beside a\n                    // `w-4/5` value — 200px of label and 80% of the row, which\n                    // adds up to more than the row in anything narrower than a\n                    // full page. In the inspector that pushed every value off\n                    // the right edge and wrapped ids one character per line.\n                    // It stacks until the entry itself is wide enough.\n                    return (\n                        <div key={\"ref_prev_\" + key}\n                            className=\"flex flex-col @sm/histentry:flex-row @sm/histentry:items-baseline gap-x-4 gap-y-0.5 w-full my-1.5\">\n                            <Typography variant={\"caption\"}\n                                color={\"secondary\"}\n                                className=\"shrink-0 break-all @sm/histentry:w-40 @sm/histentry:text-right @sm/histentry:break-normal @sm/histentry:truncate\">\n                                {key}\n                            </Typography>\n                            <div className=\"min-w-0 flex-1 flex flex-col items-start gap-0.5\">\n                                {previousValueInPath !== undefined && !deepEqual(previousValueInPath, valueInPath) &&\n                                    <PreviousValueView previousValueInPath={previousValueInPath}\n                                        childProperty={childProperty as Property}\n                                        propertyKey={key}/>\n                                }\n                                {element}\n                            </div>\n                        </div>\n                    );\n                })}\n\n                {(!changedFields || changedFields.length === 0) && (\n                    <Typography variant={\"caption\"} color={\"secondary\"}>\n                        {entry.action === \"create\" ? \"Entity created\" :\n                            entry.action === \"delete\" ? \"Entity deleted\" : \"No field changes recorded\"}\n                    </Typography>\n                )}\n\n            </div>\n\n        </div>\n    </div>;\n}\n","\nimport type { EntityCustomViewParams } from \"@rebasepro/admin-types\";\nimport { useRef, useEffect } from \"react\";\nimport { cls, IconButton, Label, Tooltip, Typography } from \"@rebasepro/ui\";\nimport { ErrorBoundary, HistoryIcon } from \"@rebasepro/ui\";\nimport { EntityHistoryEntry } from \"./EntityHistoryEntry\";\nimport { useSnackbarController, useAuthController, useTranslation } from \"@rebasepro/app\";\nimport { ConfirmationDialog } from \"@rebasepro/app\";\nimport { useState } from \"react\";\nimport { useHistory } from \"../../hooks/useHistory\";\n\n/**\n * Entity history tab view. Shows a paginated list of entity revisions\n * fetched from the backend API. Supports infinite scroll and revert.\n */\nexport function EntityHistoryView<M extends Record<string, unknown>>({\n    entity,\n    collection,\n    formContext\n}: EntityCustomViewParams<M>) {\n\n    const { t } = useTranslation();\n    const snackbarController = useSnackbarController();\n    const authController = useAuthController();\n    const dirty = formContext?.formex.dirty;\n\n    const slug = collection.slug;\n    const entityId = entity?.id;\n\n    const {\n        entries,\n        isLoading,\n        hasMore,\n        loadMore,\n        revert\n    } = useHistory({\n        slug,\n        entityId,\n        enabled: !!entityId,\n        pageSize: 10\n    });\n\n    const [revertHistoryId, setRevertHistoryId] = useState<string | undefined>();\n    const [isReverting, setIsReverting] = useState(false);\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const loadMoreRef = useRef<HTMLDivElement>(null);\n\n    // Intersection observer for infinite scroll\n    useEffect(() => {\n        const currentContainer = containerRef.current;\n        const currentLoadMore = loadMoreRef.current;\n\n        if (!currentContainer || !currentLoadMore || !hasMore || isLoading) return;\n\n        const observer = new IntersectionObserver(\n            (observerEntries) => {\n                if (observerEntries[0].isIntersecting && hasMore && !isLoading) {\n                    loadMore();\n                }\n            },\n            {\n                root: currentContainer,\n                rootMargin: \"0px 0px 200px 0px\",\n                threshold: 0.01\n            }\n        );\n\n        observer.observe(currentLoadMore);\n\n        return () => observer.disconnect();\n    }, [hasMore, isLoading, entries.length, loadMore]);\n\n    if (!entity) {\n        return <div className=\"flex items-center justify-center h-full\">\n            <Label>{t(\"history_new_entity\") ?? \"History is only available for existing records\"}</Label>\n        </div>;\n    }\n\n    async function doRevert(historyId: string) {\n        setIsReverting(true);\n        try {\n            const revertedValues = await revert(historyId);\n            setRevertHistoryId(undefined);\n\n            // Reset the form with the reverted values so the UI updates\n            // immediately without requiring a page refresh.\n            if (formContext?.formex?.resetForm && revertedValues) {\n                formContext.formex.resetForm({\n                    values: revertedValues as M,\n                    submitCount: 0,\n                    touched: {}\n                });\n            }\n\n            snackbarController.open({\n                message: t(\"history_reverted\") ?? \"Reverted to selected version\",\n                type: \"info\"\n            });\n        } catch (error) {\n            console.error(\"Error reverting entity:\", error);\n            snackbarController.open({\n                message: t(\"history_revert_error\") ?? \"Error reverting entity\",\n                type: \"error\"\n            });\n        } finally {\n            setIsReverting(false);\n        }\n    }\n\n    const revertEntry = revertHistoryId\n        ? entries.find(e => e.id === revertHistoryId)\n        : undefined;\n\n    // `p-8` plus a `mt-24` heading were sized for a full-width tab that no\n    // longer exists. In the inspector panel that was 96px of nothing above the\n    // first revision, and 32px of gutter on each side of a 448px column.\n    return <div\n        ref={containerRef}\n        className={cls(\"relative flex-1 h-full overflow-auto w-full flex flex-col gap-4 p-4 sm:p-5\")}>\n        <div className=\"flex flex-col gap-2 max-w-6xl mx-auto w-full\">\n\n            {isLoading && entries.length === 0 && (\n                <div className=\"flex flex-col gap-4\">\n                    {[1, 2, 3].map(i => (\n                        <div key={i} className=\"flex flex-col gap-2 animate-pulse\">\n                            <div className=\"h-4 w-48 bg-surface-200 dark:bg-surface-700 rounded\"/>\n                            <div className=\"h-12 w-full bg-surface-100 dark:bg-surface-900 rounded-lg border border-surface-200 dark:border-surface-700\"/>\n                        </div>\n                    ))}\n                </div>\n            )}\n\n            {!isLoading && entries.length === 0 && <>\n                <Label>\n                    {t(\"history_empty\") ?? \"No history available\"}\n                </Label>\n                <Typography variant={\"caption\"}>\n                    {t(\"history_empty_description\") ?? \"When you save a record, a new version is created and stored in the history.\"}\n                </Typography>\n            </>}\n\n            {entries.map((entry) => (\n                <div key={entry.id} className=\"flex flex-col gap-2 w-full\">\n                    <EntityHistoryEntry\n                        entry={entry}\n                        collection={collection}\n                        size={\"medium\"}\n                        actions={\n                            <Tooltip title={t(\"history_revert\") ?? \"Revert to this version\"}\n                                className={\"m-2 grow-0 self-start\"}>\n                                <IconButton\n                                    onClick={() => {\n                                        if (dirty) {\n                                            snackbarController.open({\n                                                message: t(\"history_revert_dirty\") ?? \"Please save or discard your changes before reverting\",\n                                                type: \"warning\"\n                                            });\n                                        } else {\n                                            setRevertHistoryId(entry.id);\n                                        }\n                                    }}>\n                                    <HistoryIcon/>\n                                </IconButton>\n                            </Tooltip>\n                        }\n                    />\n                </div>\n            ))}\n\n            {/* Load more sentinel */}\n            {entries.length > 0 && (\n                <div ref={loadMoreRef} className=\"py-4 text-center\">\n                    {isLoading && <Label>{t(\"loading\")}</Label>}\n                    {!hasMore && entries.length > 10 && <Label>{t(\"history_no_more\") ?? \"No more history\"}</Label>}\n                </div>\n            )}\n        </div>\n\n        <ErrorBoundary>\n            <ConfirmationDialog\n                open={Boolean(revertHistoryId)}\n                onAccept={() => {\n                    if (revertHistoryId) doRevert(revertHistoryId);\n                }}\n                onCancel={() => setRevertHistoryId(undefined)}\n                title={<Typography variant={\"subtitle2\"}>{t(\"history_revert_title\") ?? \"Revert data to this version?\"}</Typography>}\n                body={revertEntry\n                    ? <div className=\"p-4\">\n                        <Typography variant={\"caption\"} color={\"secondary\"}>\n                            This will save the entity with the values from{\" \"}\n                            {new Date(revertEntry.updated_at).toLocaleString()}.\n                            A new history entry will be created for the revert.\n                        </Typography>\n                    </div>\n                    : null\n                }\n            />\n        </ErrorBoundary>\n    </div>;\n}\n"],"mappings":"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"}