@rebasepro/admin 0.12.1-canary.gf5f1d39 → 0.13.0

package/dist/{RouterCollectionsStudioView-BZLq4MGp.js → RouterCollectionsStudioView-BsLTNoqX.js}

@@ -1,12 +1,12 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
-import { in as useUrlController } from "./util-B5fJm1FA.js";
-import { s as AIModifiedPathsProvider } from "./PropertyEditView-DH3XZC2x.js";
-import { t as CollectionEditor } from "./CollectionEditorDialog-Dpc75wIZ.js";
+import { in as useUrlController } from "./util-GiwPgxnL.js";
+import { s as AIModifiedPathsProvider } from "./PropertyEditView-W8I3YV89.js";
+import { t as CollectionEditor } from "./CollectionEditorDialog-CjXkWZ64.js";
 import { useEffect, useState } from "react";
 import { Button, IconButton, PlusIcon, ResizablePanels, Tooltip, Typography, cls, defaultBorderMixin, iconSize } from "@rebasepro/ui";
 import { IconForView, UnsavedChangesDialog, useUnsavedChangesDialog } from "@rebasepro/app";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router";
 //#region src/collection_editor/ui/collection_editor/CollectionStudioView.tsx
 function CollectionStudioView({ collectionId, onSave, onCancel, ...props }) {
 	const [formDirty, setFormDirty] = useState(false);
@@ -189,4 +189,4 @@ function RouterCollectionsStudioView(props) {
 //#endregion
 export { CollectionStudioView as i, RouterCollectionsStudioView_exports as n, CollectionsStudioView as r, RouterCollectionsStudioView as t };
 
-//# sourceMappingURL=RouterCollectionsStudioView-BZLq4MGp.js.map
+//# sourceMappingURL=RouterCollectionsStudioView-BsLTNoqX.js.map

package/dist/{RouterCollectionsStudioView-BZLq4MGp.js.map → RouterCollectionsStudioView-BsLTNoqX.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RouterCollectionsStudioView-BZLq4MGp.js","names":[],"sources":["../src/collection_editor/ui/collection_editor/CollectionStudioView.tsx","../src/collection_editor/ui/collection_editor/CollectionsStudioView.tsx","../src/collection_editor/ui/collection_editor/RouterCollectionsStudioView.tsx"],"sourcesContent":["\nimport { useUnsavedChangesDialog, UnsavedChangesDialog } from \"@rebasepro/app\";\nimport * as React from \"react\";\nimport { useState } from \"react\";\nimport { Button, PlusIcon, Typography } from \"@rebasepro/ui\";\nimport { CollectionEditorDialogProps } from \"./CollectionEditorDialog\";\nimport { AIModifiedPathsProvider } from \"./AIModifiedPathsContext\";\nimport { CollectionEditor } from \"./CollectionEditorDialog\";\nimport type { AdminCollection } from \"@rebasepro/admin-types\";\n\nexport type CollectionStudioViewProps = Omit<CollectionEditorDialogProps, \"open\" | \"isNewCollection\" | \"editedCollectionId\" | \"handleClose\" | \"handleCancel\"> & {\n    collectionId?: string | \"new\";\n\n    /**\n     * Called after a successful save.\n     * Receives the saved collection (or undefined if dismissed without saving).\n     * When not provided, save completes silently.\n     */\n    onSave?: (collection?: AdminCollection) => void;\n\n    /**\n     * Called when the user cancels editing.\n     * When not provided, cancel is a no-op.\n     */\n    onCancel?: () => void;\n};\n\nexport function CollectionStudioView({ collectionId, onSave, onCancel, ...props }: CollectionStudioViewProps) {\n\n    // Form state from the editor\n    const [formDirty, setFormDirty] = useState<boolean>(false);\n    const [cancelRequested, setCancelRequested] = useState<boolean>(false);\n\n    const { dialogProps, triggerDialog } = useUnsavedChangesDialog(\n        formDirty,\n        () => setFormDirty(false)\n    );\n\n    const activeCollectionId = collectionId;\n\n    const handleCancelClick = () => {\n        if (!formDirty) {\n            onCancel?.();\n        } else {\n            setCancelRequested(true);\n            triggerDialog();\n        }\n    };\n\n    return (\n        <div className=\"flex-grow flex flex-col h-full w-full bg-surface-50 dark:bg-surface-800\">\n            <AIModifiedPathsProvider>\n                {activeCollectionId ? (\n                    <CollectionEditor\n                        key={activeCollectionId}\n                        {...props}\n                        fullScreen={true}\n                        open={true}\n                        isNewCollection={activeCollectionId === \"new\"}\n                        editedCollectionId={activeCollectionId !== \"new\" ? activeCollectionId : undefined}\n                        handleCancel={handleCancelClick}\n                        handleClose={(savedCollection) => {\n                            setFormDirty(false);\n                            if (savedCollection) {\n                                setTimeout(() => {\n                                    onSave?.(savedCollection);\n                                }, 0);\n                            }\n                        }}\n                        setFormDirty={setFormDirty}\n                    />\n                ) : (\n                    <div className=\"flex-grow flex flex-col items-center justify-center h-full gap-4\">\n                        <Typography variant=\"label\">\n                            Select a collection or create a new one\n                        </Typography>\n                        <Button\n                            disabled={props.configController?.readOnly}\n                            onClick={() => onSave?.()}\n                        >\n                            <PlusIcon/>\n                            Add new collection\n                        </Button>\n                    </div>\n                )}\n\n                <UnsavedChangesDialog\n                    {...dialogProps}\n                    handleOk={() => {\n                        dialogProps.handleOk();\n                        if (cancelRequested) {\n                            onCancel?.();\n                            setCancelRequested(false);\n                        }\n                    }}\n                    handleCancel={() => {\n                        dialogProps.handleCancel();\n                        setCancelRequested(false);\n                    }}\n                />\n            </AIModifiedPathsProvider>\n        </div>\n    );\n}\n","\nimport { IconForView } from \"@rebasepro/app\";\nimport React, { useState, useEffect } from \"react\";\nimport {\n    Button,\n    cls,\n    defaultBorderMixin,\n    IconButton,\n    iconSize,\n    PlusIcon,\n    ResizablePanels,\n    Tooltip,\n    Typography\n} from \"@rebasepro/ui\";\n\nimport { CollectionsConfigController } from \"../../types/config_controller\";\nimport { CollectionStudioView } from \"./CollectionStudioView\";\nimport type { CollectionEditorExtensionProps } from \"../../extensibility_types\";\nimport type { AdminCollection } from \"@rebasepro/admin-types\";\n\nexport interface CollectionsStudioViewProps extends CollectionEditorExtensionProps {\n    configController: CollectionsConfigController;\n\n    /**\n     * Collections to show in the sidebar.\n     * When provided, overrides the collections from `configController`.\n     * Use this to control exactly which collections the editor displays.\n     */\n    collections?: AdminCollection[];\n\n    /**\n     * Controlled active collection ID.\n     * When provided together with `onActiveCollectionChange`,\n     * navigation is fully external — no internal state is used.\n     */\n    activeCollectionId?: string;\n\n    /**\n     * Called when the user clicks a collection, \"new\", or navigates.\n     * When provided, the component is fully controlled (no internal state).\n     * When not provided, the component manages selection via internal state.\n     *\n     * Pass `\"new\"` to create a new collection. Pass `undefined` to deselect.\n     */\n    onActiveCollectionChange?: (collectionId: string | undefined) => void;\n}\n\nexport function CollectionsStudioView({\n    configController,\n    collections: collectionsProp,\n    activeCollectionId: controlledActiveId,\n    onActiveCollectionChange,\n    propertyTypePresets,\n    hiddenPropertyTypes,\n    renderExtraPropertyFields,\n    renderExtraCollectionFields,\n    visibleTabs,\n    standalone,\n}: CollectionsStudioViewProps) {\n\n    // ── Navigation state ────────────────────────────────────────────────\n    // If onActiveCollectionChange is provided, the component is controlled.\n    // Otherwise, use internal state.\n    const [internalActiveId, setInternalActiveId] = useState<string | undefined>(undefined);\n    const isControlled = onActiveCollectionChange !== undefined;\n    const activeCollectionId = isControlled ? controlledActiveId : internalActiveId;\n\n    const setActiveCollectionId = (id: string | undefined) => {\n        if (isControlled) {\n            onActiveCollectionChange?.(id);\n        } else {\n            setInternalActiveId(id);\n        }\n    };\n\n    // ── Collections list ────────────────────────────────────────────────\n    const collections = collectionsProp ?? configController.collections ?? [];\n\n    // ── Sidebar sizing ──────────────────────────────────────────────────\n    const [sidebarSize, setSidebarSize] = useState(() => {\n        try {\n            const saved = localStorage.getItem(\"rebase_collections_editor_sidebar_size\");\n            return saved !== null ? parseFloat(saved) : 25;\n        } catch (e) {\n            return 25;\n        }\n    });\n\n    useEffect(() => {\n        try {\n            localStorage.setItem(\"rebase_collections_editor_sidebar_size\", sidebarSize.toString());\n        } catch (e) {\n            // ignore local storage error\n        }\n    }, [sidebarSize]);\n\n    return (\n        <div className=\"flex h-full w-full bg-surface-50 dark:bg-surface-800 overflow-hidden text-text-primary dark:text-text-primary-dark\">\n            <ResizablePanels\n                orientation=\"horizontal\"\n                panelSizePercent={sidebarSize}\n                onPanelSizeChange={setSidebarSize}\n                minPanelSizePx={220}\n                firstPanel={\n                    <div className={cls(\"flex flex-col h-full w-full bg-surface-50 dark:bg-surface-800 border-r\", defaultBorderMixin)}>\n                        <div className={cls(\"flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]\", defaultBorderMixin)}>\n                            <Typography variant=\"caption\" className=\"font-semibold text-[11px] uppercase tracking-wider text-surface-400 dark:text-surface-400\">\n                                Collections\n                            </Typography>\n                            <Tooltip title={configController.readOnly ? configController.readOnlyReason || \"Read only\" : \"Add collection\"}>\n                                <div>\n                                    <IconButton\n                                        size=\"small\"\n                                        disabled={configController.readOnly}\n                                        onClick={() => setActiveCollectionId(\"new\")}\n                                        className={activeCollectionId === \"new\" ? \"text-primary dark:text-primary-dark\" : \"text-text-secondary dark:text-text-secondary-dark\"}\n                                    >\n                                        <PlusIcon size={iconSize.smallest}/>\n                                    </IconButton>\n                                </div>\n                            </Tooltip>\n                        </div>\n\n                        <div className=\"flex-grow overflow-y-auto w-full no-scrollbar p-2 space-y-0.5\">\n                            {collections.length === 0 && (\n                                <div className=\"p-4 text-center\">\n                                    <Typography variant=\"caption\" className=\"text-text-disabled dark:text-text-disabled-dark italic\">\n                                        No collections yet.\n                                    </Typography>\n                                </div>\n                            )}\n                            {collections.map((collection) => {\n                                const collectionKey = collection.slug;\n                                const isSelected = activeCollectionId === collectionKey;\n                                return (\n                                    <div\n                                        key={collectionKey}\n                                        onClick={() => setActiveCollectionId(collectionKey)}\n                                        className={cls(\n                                            \"flex items-center gap-2.5 px-3 h-[30px] cursor-pointer rounded-lg text-[13px] font-medium transition-colors\",\n                                            isSelected\n                                                ? \"bg-primary/8 text-primary dark:bg-primary/10 dark:text-primary-light font-semibold\"\n                                                : \"hover:bg-primary/5 dark:hover:bg-primary/5 text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white\"\n                                        )}\n                                    >\n                                        <IconForView collectionOrView={collection} size={\"smallest\"} className={cls(\n                                            isSelected\n                                                ? \"text-primary dark:text-primary-light\"\n                                                : \"text-surface-500 dark:text-text-secondary-dark\"\n                                        )}/>\n                                        <span className=\"truncate flex-1\">\n                                            {collection.name || collection.slug}\n                                        </span>\n                                    </div>\n                                );\n                            })}\n                        </div>\n                    </div>\n                }\n                secondPanel={\n                    <div className=\"flex-grow flex flex-col min-w-0 h-full w-full\">\n                        {/* We use key to force unmount when switching collections, preventing stale state */}\n                        {activeCollectionId ? (\n                            <CollectionStudioView\n                                key={activeCollectionId}\n                                configController={configController}\n                                collectionId={activeCollectionId}\n                                onSave={(savedCollection) => {\n                                    // After creating a new collection, switch to it\n                                    if (activeCollectionId === \"new\" && savedCollection?.slug) {\n                                        setActiveCollectionId(savedCollection.slug);\n                                    }\n                                }}\n                                onCancel={() => setActiveCollectionId(undefined)}\n                                propertyTypePresets={propertyTypePresets}\n                                hiddenPropertyTypes={hiddenPropertyTypes}\n                                renderExtraPropertyFields={renderExtraPropertyFields}\n                                renderExtraCollectionFields={renderExtraCollectionFields}\n                                visibleTabs={visibleTabs}\n                                standalone={standalone}\n                            />\n                        ) : (\n                            <div className=\"flex flex-col items-center justify-center h-full gap-4\">\n                                <Typography variant=\"label\">\n                                    Select a collection or create a new one to start editing\n                                </Typography>\n                                <Button\n                                    disabled={configController.readOnly}\n                                    onClick={() => setActiveCollectionId(\"new\")}\n                                >\n                                    <PlusIcon/>\n                                    Add new collection\n                                </Button>\n                            </div>\n                        )}\n                    </div>\n                }\n            />\n        </div>\n    );\n}\n","/**\n * Router-aware wrapper around CollectionsStudioView.\n *\n * This component provides the react-router-based navigation behavior\n * that Rebase Studio expects: the active collection is derived from the\n * URL, and clicking a collection navigates via react-router.\n *\n * External consumers should use `CollectionsStudioView` directly\n * (which has no react-router dependency).\n */\nimport React from \"react\";\nimport { useLocation, useNavigate } from \"react-router-dom\";\nimport { useUrlController } from \"../../_cms_internals\";\nimport { CollectionsStudioView, CollectionsStudioViewProps } from \"./CollectionsStudioView\";\n\nexport type RouterCollectionsStudioViewProps = Omit<CollectionsStudioViewProps, \"activeCollectionId\" | \"onActiveCollectionChange\">;\n\nexport function RouterCollectionsStudioView(props: RouterCollectionsStudioViewProps) {\n    const navigate = useNavigate();\n    const urlController = useUrlController();\n    const location = useLocation();\n\n    // Determine the active collection from the URL segment after \"schema/\"\n    const basePath = urlController.buildAppUrlPath(\"schema\");\n    const relativePath = location.pathname.replace(basePath, \"\").replace(/^\\//, \"\");\n    const activeCollectionId = relativePath.split(\"/\")[0] || undefined;\n\n    return (\n        <CollectionsStudioView\n            {...props}\n            activeCollectionId={activeCollectionId}\n            onActiveCollectionChange={(id) => {\n                if (id) {\n                    navigate(urlController.buildAppUrlPath(`schema/${id}`));\n                } else {\n                    navigate(urlController.buildAppUrlPath(\"schema\"));\n                }\n            }}\n        />\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"RouterCollectionsStudioView-BsLTNoqX.js","names":[],"sources":["../src/collection_editor/ui/collection_editor/CollectionStudioView.tsx","../src/collection_editor/ui/collection_editor/CollectionsStudioView.tsx","../src/collection_editor/ui/collection_editor/RouterCollectionsStudioView.tsx"],"sourcesContent":["\nimport { useUnsavedChangesDialog, UnsavedChangesDialog } from \"@rebasepro/app\";\nimport * as React from \"react\";\nimport { useState } from \"react\";\nimport { Button, PlusIcon, Typography } from \"@rebasepro/ui\";\nimport { CollectionEditorDialogProps } from \"./CollectionEditorDialog\";\nimport { AIModifiedPathsProvider } from \"./AIModifiedPathsContext\";\nimport { CollectionEditor } from \"./CollectionEditorDialog\";\nimport type { AdminCollection } from \"@rebasepro/admin-types\";\n\nexport type CollectionStudioViewProps = Omit<CollectionEditorDialogProps, \"open\" | \"isNewCollection\" | \"editedCollectionId\" | \"handleClose\" | \"handleCancel\"> & {\n    collectionId?: string | \"new\";\n\n    /**\n     * Called after a successful save.\n     * Receives the saved collection (or undefined if dismissed without saving).\n     * When not provided, save completes silently.\n     */\n    onSave?: (collection?: AdminCollection) => void;\n\n    /**\n     * Called when the user cancels editing.\n     * When not provided, cancel is a no-op.\n     */\n    onCancel?: () => void;\n};\n\nexport function CollectionStudioView({ collectionId, onSave, onCancel, ...props }: CollectionStudioViewProps) {\n\n    // Form state from the editor\n    const [formDirty, setFormDirty] = useState<boolean>(false);\n    const [cancelRequested, setCancelRequested] = useState<boolean>(false);\n\n    const { dialogProps, triggerDialog } = useUnsavedChangesDialog(\n        formDirty,\n        () => setFormDirty(false)\n    );\n\n    const activeCollectionId = collectionId;\n\n    const handleCancelClick = () => {\n        if (!formDirty) {\n            onCancel?.();\n        } else {\n            setCancelRequested(true);\n            triggerDialog();\n        }\n    };\n\n    return (\n        <div className=\"flex-grow flex flex-col h-full w-full bg-surface-50 dark:bg-surface-800\">\n            <AIModifiedPathsProvider>\n                {activeCollectionId ? (\n                    <CollectionEditor\n                        key={activeCollectionId}\n                        {...props}\n                        fullScreen={true}\n                        open={true}\n                        isNewCollection={activeCollectionId === \"new\"}\n                        editedCollectionId={activeCollectionId !== \"new\" ? activeCollectionId : undefined}\n                        handleCancel={handleCancelClick}\n                        handleClose={(savedCollection) => {\n                            setFormDirty(false);\n                            if (savedCollection) {\n                                setTimeout(() => {\n                                    onSave?.(savedCollection);\n                                }, 0);\n                            }\n                        }}\n                        setFormDirty={setFormDirty}\n                    />\n                ) : (\n                    <div className=\"flex-grow flex flex-col items-center justify-center h-full gap-4\">\n                        <Typography variant=\"label\">\n                            Select a collection or create a new one\n                        </Typography>\n                        <Button\n                            disabled={props.configController?.readOnly}\n                            onClick={() => onSave?.()}\n                        >\n                            <PlusIcon/>\n                            Add new collection\n                        </Button>\n                    </div>\n                )}\n\n                <UnsavedChangesDialog\n                    {...dialogProps}\n                    handleOk={() => {\n                        dialogProps.handleOk();\n                        if (cancelRequested) {\n                            onCancel?.();\n                            setCancelRequested(false);\n                        }\n                    }}\n                    handleCancel={() => {\n                        dialogProps.handleCancel();\n                        setCancelRequested(false);\n                    }}\n                />\n            </AIModifiedPathsProvider>\n        </div>\n    );\n}\n","\nimport { IconForView } from \"@rebasepro/app\";\nimport React, { useState, useEffect } from \"react\";\nimport {\n    Button,\n    cls,\n    defaultBorderMixin,\n    IconButton,\n    iconSize,\n    PlusIcon,\n    ResizablePanels,\n    Tooltip,\n    Typography\n} from \"@rebasepro/ui\";\n\nimport { CollectionsConfigController } from \"../../types/config_controller\";\nimport { CollectionStudioView } from \"./CollectionStudioView\";\nimport type { CollectionEditorExtensionProps } from \"../../extensibility_types\";\nimport type { AdminCollection } from \"@rebasepro/admin-types\";\n\nexport interface CollectionsStudioViewProps extends CollectionEditorExtensionProps {\n    configController: CollectionsConfigController;\n\n    /**\n     * Collections to show in the sidebar.\n     * When provided, overrides the collections from `configController`.\n     * Use this to control exactly which collections the editor displays.\n     */\n    collections?: AdminCollection[];\n\n    /**\n     * Controlled active collection ID.\n     * When provided together with `onActiveCollectionChange`,\n     * navigation is fully external — no internal state is used.\n     */\n    activeCollectionId?: string;\n\n    /**\n     * Called when the user clicks a collection, \"new\", or navigates.\n     * When provided, the component is fully controlled (no internal state).\n     * When not provided, the component manages selection via internal state.\n     *\n     * Pass `\"new\"` to create a new collection. Pass `undefined` to deselect.\n     */\n    onActiveCollectionChange?: (collectionId: string | undefined) => void;\n}\n\nexport function CollectionsStudioView({\n    configController,\n    collections: collectionsProp,\n    activeCollectionId: controlledActiveId,\n    onActiveCollectionChange,\n    propertyTypePresets,\n    hiddenPropertyTypes,\n    renderExtraPropertyFields,\n    renderExtraCollectionFields,\n    visibleTabs,\n    standalone,\n}: CollectionsStudioViewProps) {\n\n    // ── Navigation state ────────────────────────────────────────────────\n    // If onActiveCollectionChange is provided, the component is controlled.\n    // Otherwise, use internal state.\n    const [internalActiveId, setInternalActiveId] = useState<string | undefined>(undefined);\n    const isControlled = onActiveCollectionChange !== undefined;\n    const activeCollectionId = isControlled ? controlledActiveId : internalActiveId;\n\n    const setActiveCollectionId = (id: string | undefined) => {\n        if (isControlled) {\n            onActiveCollectionChange?.(id);\n        } else {\n            setInternalActiveId(id);\n        }\n    };\n\n    // ── Collections list ────────────────────────────────────────────────\n    const collections = collectionsProp ?? configController.collections ?? [];\n\n    // ── Sidebar sizing ──────────────────────────────────────────────────\n    const [sidebarSize, setSidebarSize] = useState(() => {\n        try {\n            const saved = localStorage.getItem(\"rebase_collections_editor_sidebar_size\");\n            return saved !== null ? parseFloat(saved) : 25;\n        } catch (e) {\n            return 25;\n        }\n    });\n\n    useEffect(() => {\n        try {\n            localStorage.setItem(\"rebase_collections_editor_sidebar_size\", sidebarSize.toString());\n        } catch (e) {\n            // ignore local storage error\n        }\n    }, [sidebarSize]);\n\n    return (\n        <div className=\"flex h-full w-full bg-surface-50 dark:bg-surface-800 overflow-hidden text-text-primary dark:text-text-primary-dark\">\n            <ResizablePanels\n                orientation=\"horizontal\"\n                panelSizePercent={sidebarSize}\n                onPanelSizeChange={setSidebarSize}\n                minPanelSizePx={220}\n                firstPanel={\n                    <div className={cls(\"flex flex-col h-full w-full bg-surface-50 dark:bg-surface-800 border-r\", defaultBorderMixin)}>\n                        <div className={cls(\"flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]\", defaultBorderMixin)}>\n                            <Typography variant=\"caption\" className=\"font-semibold text-[11px] uppercase tracking-wider text-surface-400 dark:text-surface-400\">\n                                Collections\n                            </Typography>\n                            <Tooltip title={configController.readOnly ? configController.readOnlyReason || \"Read only\" : \"Add collection\"}>\n                                <div>\n                                    <IconButton\n                                        size=\"small\"\n                                        disabled={configController.readOnly}\n                                        onClick={() => setActiveCollectionId(\"new\")}\n                                        className={activeCollectionId === \"new\" ? \"text-primary dark:text-primary-dark\" : \"text-text-secondary dark:text-text-secondary-dark\"}\n                                    >\n                                        <PlusIcon size={iconSize.smallest}/>\n                                    </IconButton>\n                                </div>\n                            </Tooltip>\n                        </div>\n\n                        <div className=\"flex-grow overflow-y-auto w-full no-scrollbar p-2 space-y-0.5\">\n                            {collections.length === 0 && (\n                                <div className=\"p-4 text-center\">\n                                    <Typography variant=\"caption\" className=\"text-text-disabled dark:text-text-disabled-dark italic\">\n                                        No collections yet.\n                                    </Typography>\n                                </div>\n                            )}\n                            {collections.map((collection) => {\n                                const collectionKey = collection.slug;\n                                const isSelected = activeCollectionId === collectionKey;\n                                return (\n                                    <div\n                                        key={collectionKey}\n                                        onClick={() => setActiveCollectionId(collectionKey)}\n                                        className={cls(\n                                            \"flex items-center gap-2.5 px-3 h-[30px] cursor-pointer rounded-lg text-[13px] font-medium transition-colors\",\n                                            isSelected\n                                                ? \"bg-primary/8 text-primary dark:bg-primary/10 dark:text-primary-light font-semibold\"\n                                                : \"hover:bg-primary/5 dark:hover:bg-primary/5 text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white\"\n                                        )}\n                                    >\n                                        <IconForView collectionOrView={collection} size={\"smallest\"} className={cls(\n                                            isSelected\n                                                ? \"text-primary dark:text-primary-light\"\n                                                : \"text-surface-500 dark:text-text-secondary-dark\"\n                                        )}/>\n                                        <span className=\"truncate flex-1\">\n                                            {collection.name || collection.slug}\n                                        </span>\n                                    </div>\n                                );\n                            })}\n                        </div>\n                    </div>\n                }\n                secondPanel={\n                    <div className=\"flex-grow flex flex-col min-w-0 h-full w-full\">\n                        {/* We use key to force unmount when switching collections, preventing stale state */}\n                        {activeCollectionId ? (\n                            <CollectionStudioView\n                                key={activeCollectionId}\n                                configController={configController}\n                                collectionId={activeCollectionId}\n                                onSave={(savedCollection) => {\n                                    // After creating a new collection, switch to it\n                                    if (activeCollectionId === \"new\" && savedCollection?.slug) {\n                                        setActiveCollectionId(savedCollection.slug);\n                                    }\n                                }}\n                                onCancel={() => setActiveCollectionId(undefined)}\n                                propertyTypePresets={propertyTypePresets}\n                                hiddenPropertyTypes={hiddenPropertyTypes}\n                                renderExtraPropertyFields={renderExtraPropertyFields}\n                                renderExtraCollectionFields={renderExtraCollectionFields}\n                                visibleTabs={visibleTabs}\n                                standalone={standalone}\n                            />\n                        ) : (\n                            <div className=\"flex flex-col items-center justify-center h-full gap-4\">\n                                <Typography variant=\"label\">\n                                    Select a collection or create a new one to start editing\n                                </Typography>\n                                <Button\n                                    disabled={configController.readOnly}\n                                    onClick={() => setActiveCollectionId(\"new\")}\n                                >\n                                    <PlusIcon/>\n                                    Add new collection\n                                </Button>\n                            </div>\n                        )}\n                    </div>\n                }\n            />\n        </div>\n    );\n}\n","/**\n * Router-aware wrapper around CollectionsStudioView.\n *\n * This component provides the react-router-based navigation behavior\n * that Rebase Studio expects: the active collection is derived from the\n * URL, and clicking a collection navigates via react-router.\n *\n * External consumers should use `CollectionsStudioView` directly\n * (which has no react-router dependency).\n */\nimport React from \"react\";\nimport { useLocation, useNavigate } from \"react-router\";\nimport { useUrlController } from \"../../_cms_internals\";\nimport { CollectionsStudioView, CollectionsStudioViewProps } from \"./CollectionsStudioView\";\n\nexport type RouterCollectionsStudioViewProps = Omit<CollectionsStudioViewProps, \"activeCollectionId\" | \"onActiveCollectionChange\">;\n\nexport function RouterCollectionsStudioView(props: RouterCollectionsStudioViewProps) {\n    const navigate = useNavigate();\n    const urlController = useUrlController();\n    const location = useLocation();\n\n    // Determine the active collection from the URL segment after \"schema/\"\n    const basePath = urlController.buildAppUrlPath(\"schema\");\n    const relativePath = location.pathname.replace(basePath, \"\").replace(/^\\//, \"\");\n    const activeCollectionId = relativePath.split(\"/\")[0] || undefined;\n\n    return (\n        <CollectionsStudioView\n            {...props}\n            activeCollectionId={activeCollectionId}\n            onActiveCollectionChange={(id) => {\n                if (id) {\n                    navigate(urlController.buildAppUrlPath(`schema/${id}`));\n                } else {\n                    navigate(urlController.buildAppUrlPath(\"schema\"));\n                }\n            }}\n        />\n    );\n}\n"],"mappings":"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"}

package/dist/collection_editor/serializable_types.d.ts

@@ -21,7 +21,8 @@ export interface SerializableAdminBaseOptions {
     hideFromCollection?: boolean;
     readOnly?: boolean;
     disabled?: boolean | SerializablePropertyDisabledConfig;
-    widthPercentage?: number;
+    span?: 1 | 2 | 3 | 4;
+    /** Opaque props handed to a custom `Field` / `Preview`. Round-tripped as-is. */
     customProps?: unknown;
     /** Narrows the filter operators offered for this property. Plain data. */
     filterOperators?: readonly WhereFilterOp[];
@@ -245,6 +246,7 @@ export type SerializableRelation = {
     target?: string;
     relationName?: string;
     foreignKeyOnTarget?: string;
+    sourceKey?: string;
     onUpdate?: OnAction;
     onDelete?: OnAction;
 } | {
@@ -252,6 +254,7 @@ export type SerializableRelation = {
     target?: string;
     relationName?: string;
     foreignKeyOnTarget?: string;
+    sourceKey?: string;
     onUpdate?: OnAction;
     onDelete?: OnAction;
 } | {

package/dist/collection_editor/ui/collection_editor/CollectionRelationsTab.d.ts

@@ -14,6 +14,7 @@ export type RelationDraft = {
     target?: string;
     localKey?: string;
     foreignKeyOnTarget?: string;
+    sourceKey?: string;
     through?: {
         table?: string;
         sourceColumn?: string;

package/dist/collection_editor/useLocalCollectionsConfigController.d.ts

@@ -3,4 +3,12 @@ import type { AdminCollection } from "@rebasepro/admin-types";
 export declare function useLocalCollectionsConfigController(clientOrUrl: any, baseCollections?: AdminCollection[], options?: {
     readOnly?: boolean;
     getAuthToken?: () => Promise<string | null>;
+    /**
+     * Identity of the signed-in user, if any.
+     *
+     * Only used to re-ask the backend when it changes: whether the editor
+     * will accept a write depends on who is asking, and the answer to an
+     * anonymous probe does not survive a sign-in.
+     */
+    authKey?: string | null;
 }): CollectionsConfigController;

package/dist/collection_editor_ui.js

@@ -1,11 +1,11 @@
-import { in as useUrlController } from "./util-B5fJm1FA.js";
-import { n as PropertyForm, r as PropertyFormDialog } from "./PropertyEditView-DH3XZC2x.js";
-import { n as CollectionEditorDialog } from "./CollectionEditorDialog-Dpc75wIZ.js";
-import { i as CollectionStudioView, r as CollectionsStudioView, t as RouterCollectionsStudioView } from "./RouterCollectionsStudioView-BZLq4MGp.js";
+import { in as useUrlController } from "./util-GiwPgxnL.js";
+import { n as PropertyForm, r as PropertyFormDialog } from "./PropertyEditView-W8I3YV89.js";
+import { n as CollectionEditorDialog } from "./CollectionEditorDialog-CjXkWZ64.js";
+import { i as CollectionStudioView, r as CollectionsStudioView, t as RouterCollectionsStudioView } from "./RouterCollectionsStudioView-BsLTNoqX.js";
 import "react";
 import { useSnackbarController } from "@rebasepro/app";
 import { jsx } from "react/jsx-runtime";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 //#region src/collection_editor/ui/collection_editor/RouterCollectionStudioView.tsx
 function RouterCollectionStudioView(props) {
 	const navigate = useNavigate();

package/dist/collection_editor_ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection_editor_ui.js","names":[],"sources":["../src/collection_editor/ui/collection_editor/RouterCollectionStudioView.tsx"],"sourcesContent":["/**\n * Router-aware wrapper around CollectionStudioView.\n *\n * This component provides the react-router-based navigation behavior\n * that Rebase Studio expects: cancel navigates to the root path,\n * save navigates to the saved collection's slug, and a snackbar\n * toast is shown on success.\n *\n * External consumers should use `CollectionStudioView` directly\n * (which has no react-router dependency).\n */\nimport React from \"react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useUrlController } from \"../../_cms_internals\";\nimport { useSnackbarController } from \"@rebasepro/app\";\nimport { CollectionStudioView, CollectionStudioViewProps } from \"./CollectionStudioView\";\n\nexport type RouterCollectionStudioViewProps = Omit<CollectionStudioViewProps, \"onSave\" | \"onCancel\">;\n\nexport function RouterCollectionStudioView(props: RouterCollectionStudioViewProps) {\n    const navigate = useNavigate();\n    const urlController = useUrlController();\n    const snackbarController = useSnackbarController();\n\n    return (\n        <CollectionStudioView\n            {...props}\n            onCancel={() => {\n                navigate(urlController.buildAppUrlPath(\"/\"));\n            }}\n            onSave={(savedCollection) => {\n                if (savedCollection) {\n                    snackbarController.open({\n                        type: \"success\",\n                        message: `Collection ${savedCollection.name || savedCollection.slug} saved`\n                    });\n                    if (props.collectionId === \"new\") {\n                        navigate(urlController.buildAppUrlPath(`s/schema/${savedCollection.slug}`));\n                    }\n                }\n            }}\n        />\n    );\n}\n"],"mappings":";;;;;;;;;AAmBA,SAAgB,2BAA2B,OAAwC;CAC/E,MAAM,WAAW,YAAY;CAC7B,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,qBAAqB,sBAAsB;CAEjD,OACI,oBAAC,sBAAD;EACI,GAAI;EACJ,gBAAgB;GACZ,SAAS,cAAc,gBAAgB,GAAG,CAAC;EAC/C;EACA,SAAS,oBAAoB;GACzB,IAAI,iBAAiB;IACjB,mBAAmB,KAAK;KACpB,MAAM;KACN,SAAS,cAAc,gBAAgB,QAAQ,gBAAgB,KAAK;IACxE,CAAC;IACD,IAAI,MAAM,iBAAiB,OACvB,SAAS,cAAc,gBAAgB,YAAY,gBAAgB,MAAM,CAAC;GAElF;EACJ;CACH,CAAA;AAET"}
+{"version":3,"file":"collection_editor_ui.js","names":[],"sources":["../src/collection_editor/ui/collection_editor/RouterCollectionStudioView.tsx"],"sourcesContent":["/**\n * Router-aware wrapper around CollectionStudioView.\n *\n * This component provides the react-router-based navigation behavior\n * that Rebase Studio expects: cancel navigates to the root path,\n * save navigates to the saved collection's slug, and a snackbar\n * toast is shown on success.\n *\n * External consumers should use `CollectionStudioView` directly\n * (which has no react-router dependency).\n */\nimport React from \"react\";\nimport { useNavigate } from \"react-router\";\nimport { useUrlController } from \"../../_cms_internals\";\nimport { useSnackbarController } from \"@rebasepro/app\";\nimport { CollectionStudioView, CollectionStudioViewProps } from \"./CollectionStudioView\";\n\nexport type RouterCollectionStudioViewProps = Omit<CollectionStudioViewProps, \"onSave\" | \"onCancel\">;\n\nexport function RouterCollectionStudioView(props: RouterCollectionStudioViewProps) {\n    const navigate = useNavigate();\n    const urlController = useUrlController();\n    const snackbarController = useSnackbarController();\n\n    return (\n        <CollectionStudioView\n            {...props}\n            onCancel={() => {\n                navigate(urlController.buildAppUrlPath(\"/\"));\n            }}\n            onSave={(savedCollection) => {\n                if (savedCollection) {\n                    snackbarController.open({\n                        type: \"success\",\n                        message: `Collection ${savedCollection.name || savedCollection.slug} saved`\n                    });\n                    if (props.collectionId === \"new\") {\n                        navigate(urlController.buildAppUrlPath(`s/schema/${savedCollection.slug}`));\n                    }\n                }\n            }}\n        />\n    );\n}\n"],"mappings":";;;;;;;;;AAmBA,SAAgB,2BAA2B,OAAwC;CAC/E,MAAM,WAAW,YAAY;CAC7B,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,qBAAqB,sBAAsB;CAEjD,OACI,oBAAC,sBAAD;EACI,GAAI;EACJ,gBAAgB;GACZ,SAAS,cAAc,gBAAgB,GAAG,CAAC;EAC/C;EACA,SAAS,oBAAoB;GACzB,IAAI,iBAAiB;IACjB,mBAAmB,KAAK;KACpB,MAAM;KACN,SAAS,cAAc,gBAAgB,QAAQ,gBAAgB,KAAK;IACxE,CAAC;IACD,IAAI,MAAM,iBAAiB,OACvB,SAAS,cAAc,gBAAgB,YAAY,gBAAgB,MAAM,CAAC;GAElF;EACJ;CACH,CAAA;AAET"}

package/dist/components/CollectionTableBinding/column_utils.d.ts

@@ -20,3 +20,20 @@ export interface PropertiesToColumnsParams<M extends Record<string, unknown>> {
     }>;
 }
 export declare function propertiesToColumns<M extends Record<string, unknown>>({ properties, sortable, fixedFilter, engine, AdditionalHeaderWidget }: PropertiesToColumnsParams<M>): VirtualTableColumn[];
+export type SortablePropertyOption = {
+    key: string;
+    title: string;
+    property: Property;
+};
+/**
+ * The properties a sort can be applied to, as keys and titles.
+ *
+ * Only the table renders headers, so the list, card and split views had no way
+ * to order anything — the controller has carried `sortBy` all along, with no
+ * control bound to it outside the table. This is the same walk
+ * `propertiesToColumns` makes, under the same keys and the same
+ * `sortableProperty` authority, so a sort picked from the toolbar means exactly
+ * what clicking the header would have meant, and the two cannot drift into
+ * offering different columns.
+ */
+export declare function getSortablePropertyOptions(properties: Properties): SortablePropertyOption[];

package/dist/components/CollectionViewBinding/CollectionViewStartActions.d.ts

@@ -1,6 +1,6 @@
 import type { Properties } from "@rebasepro/types";
 import React from "react";
-import { EntityTableController, SelectionController, AdminCollection } from "@rebasepro/admin-types";
+import { EntityTableController, SelectionController, AdminCollection, ViewMode } from "@rebasepro/admin-types";
 export type CollectionViewStartActionsProps<M extends Record<string, unknown>> = {
     collection: AdminCollection<M>;
     path: string;
@@ -14,7 +14,12 @@ export type CollectionViewStartActionsProps<M extends Record<string, unknown>> =
      * Resolved properties from the collection for the filters dialog
      */
     resolvedProperties?: Properties;
+    /**
+     * Which view is being displayed. Decides whether the sort control is
+     * offered — see `sortButton`.
+     */
+    viewMode?: ViewMode;
     compact?: boolean;
     openNewDocument: (defaultValues?: Record<string, unknown>) => void;
 };
-export declare function CollectionViewStartActions<M extends Record<string, unknown>>({ collection, relativePath, parentCollectionSlugs, parentEntityIds, path, selectionController, tableController, collectionEntitiesCount, resolvedProperties, compact, openNewDocument }: CollectionViewStartActionsProps<M>): React.JSX.Element;
+export declare function CollectionViewStartActions<M extends Record<string, unknown>>({ collection, relativePath, parentCollectionSlugs, parentEntityIds, path, selectionController, tableController, collectionEntitiesCount, resolvedProperties, viewMode, compact, openNewDocument }: CollectionViewStartActionsProps<M>): React.JSX.Element;

package/dist/components/CollectionViewBinding/SortButton.d.ts

@@ -0,0 +1,24 @@
+import type { Properties } from "@rebasepro/types";
+import React from "react";
+import { EntityTableController } from "@rebasepro/admin-types";
+export type SortButtonProps<M extends Record<string, unknown>> = {
+    tableController: EntityTableController<M>;
+    /**
+     * Resolved properties of the collection. The sortable ones among them are
+     * the options offered.
+     */
+    properties: Properties;
+};
+/**
+ * Toolbar control that orders the collection by one property.
+ *
+ * The table orders by clicking a column header, which leaves every other view
+ * mode — list, cards, and either of them inside a split view — with no way to
+ * order at all, even though the controller has always carried `sortBy` and the
+ * query has always honoured it. This binds a control to it.
+ *
+ * Clicking the active property flips its direction, so ascending → descending
+ * is one click rather than a trip through a direction selector; clicking a
+ * different one starts it ascending. The popover stays open through both.
+ */
+export declare function SortButton<M extends Record<string, unknown>>({ tableController, properties }: SortButtonProps<M>): React.JSX.Element | null;

package/dist/components/CollectionViewBinding/SplitListCloseButton.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+/**
+ * Closes the list of a split view, leaving the open record on its own.
+ *
+ * It leads the record's own app bar, where the breadcrumb starts — this is the
+ * entity pane's old "Open full screen" button, moved to that edge and wearing an
+ * X: closing the list and opening the record full screen are the same thing, so
+ * there is one control and one route (`#full`) rather than two.
+ */
+export declare function SplitListCloseButton(): React.JSX.Element | null;

package/dist/components/CollectionViewBinding/SplitViewContext.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+/**
+ * The enclosing master-detail split view, exposed to the list panel so it can
+ * carry the control that closes it.
+ */
+export type SplitViewController = {
+    /** Whether a record is open in the detail pane. */
+    detailOpen: boolean;
+    /**
+     * Close the list and leave the open record on its own, full screen. This is
+     * the existing full-screen entity route (`#full`), not a second mechanism.
+     */
+    openFullScreen: () => void;
+};
+/**
+ * The enclosing split view, or `undefined` when the component is not rendered
+ * inside one (a side panel, a dialog, a full-screen route).
+ */
+export declare function useSplitView(): SplitViewController | undefined;
+export declare function SplitViewProvider({ value, children }: {
+    value: SplitViewController;
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/components/CollectionViewBinding/hooks/useKanbanDragAndDrop.d.ts

@@ -2,6 +2,32 @@ import { RebaseData, Entity } from "@rebasepro/types";
 import { RebaseContext, AnalyticsController, AdminCollection } from "@rebasepro/admin-types";
 import { BoardItem } from "@rebasepro/ui";
 import { BoardDataController } from "../useBoardDataController";
+/**
+ * The digits a board order key is built from: base36, lower case only.
+ *
+ * The library's default alphabet is base62, and its keys only sort correctly
+ * under byte ordering. The column is sorted by the *database*, and Postgres'
+ * default collation is not byte ordering — under `en_US.UTF-8`, `"aa"` sorts
+ * before `"aC"`, so as soon as a board had been dragged around enough to reach
+ * the upper-case digits its order stopped matching the keys. One case has no
+ * such ambiguity: digits before letters is true of every collation in use.
+ *
+ * A key written with the old alphabet no longer validates, which is what makes
+ * the board offer to initialise the column — one click, and the order is
+ * rewritten in a form the database can sort.
+ */
+export declare const ORDER_KEY_DIGITS = "0123456789abcdefghijklmnopqrstuvwxyz";
+/**
+ * Whether a stored order value is a key `fractional-indexing` can interpolate
+ * against.
+ *
+ * Anything else — a plain `"12"` from a seed or a migration, an empty string —
+ * makes `generateKeyBetween` throw, and the fallback below then hands out the
+ * same first key to every card, so each drag lands at the bottom of the column
+ * on top of the last one that did. Asking the library itself is the only
+ * definition of "valid" worth trusting.
+ */
+export declare function isValidOrderKey(value: unknown): value is string;
 export interface UseKanbanDragAndDropParams<M extends Record<string, unknown>> {
     collection: AdminCollection<M>;
     fullPath: string;

package/dist/components/DetailViewBinding.d.ts

@@ -24,5 +24,10 @@ export interface DetailViewBindingProps<M extends Record<string, unknown> = Reco
     onEditClick?: () => void;
     layout?: "side_panel" | "full_screen" | "split" | "dialog";
     barActions?: (params: BarActionsParams) => React.ReactNode;
+    /**
+     * Controls the owning panel puts at the identity bar's leading edge, ahead
+     * of the breadcrumb — the side panel's close button.
+     */
+    barActionsStart?: React.ReactNode;
 }
 export declare function DetailViewBinding<M extends Record<string, unknown>>({ entityId, ...props }: DetailViewBindingProps<M>): React.JSX.Element;

package/dist/components/EditFormActions.d.ts

@@ -1,3 +1,14 @@
 import React from "react";
 import type { EntityFormActionsProps } from "../types/components/EntityFormActionsProps";
-export declare function EditFormActions({ collection, path, entity, layout, savingError, formex, disabled, status, pluginActions, openEntityMode, showDefaultActions, navigateBack, formContext }: EntityFormActionsProps): React.JSX.Element;
+/**
+ * The entity form's footer.
+ *
+ * It used to render in two shapes: this footer, and a `w-80 2xl:w-96` sticky
+ * side rail carrying the same Save and Discard above several hundred pixels of
+ * nothing. The rail is gone, and Save/Discard have moved to the identity bar
+ * where they stay visible while the form scrolls — so with
+ * `showDefaultActions={false}` this renders only what the bar cannot host:
+ * record actions (copy, delete, custom), plugin actions, the saving error, and
+ * the side-panel-only "save and close".
+ */
+export declare function EditFormActions({ collection, path, entity, savingError, formex, disabled, status, pluginActions, openEntityMode, showDefaultActions, navigateBack, formContext }: EntityFormActionsProps): React.JSX.Element | null;

package/dist/components/EditViewBinding.d.ts

@@ -35,6 +35,11 @@ export interface EditViewBindingProps<M extends Record<string, unknown> = Record
     navigateBack?: () => void;
     layout?: "side_panel" | "full_screen" | "split" | "dialog";
     barActions?: (params: BarActionsParams) => React.ReactNode;
+    /**
+     * Controls the owning panel puts at the identity bar's leading edge, ahead
+     * of the breadcrumb — the side panel's close button.
+     */
+    barActionsStart?: React.ReactNode;
     formProps?: Partial<EntityFormBindingProps<M>>;
     /**
      * Pre-populate the form with these values when creating a new entity.
@@ -48,7 +53,7 @@ export interface EditViewBindingProps<M extends Record<string, unknown> = Record
  * a record is opened.
  */
 export declare function EditViewBinding<M extends Record<string, unknown>>({ entityId, ...props }: EditViewBindingProps<M>): React.JSX.Element;
-export declare function EditViewBindingInner<M extends Record<string, unknown>>({ path, entityId, selectedTab: selectedTabProp, collection, parentCollectionSlugs, parentEntityIds, onValuesModified, onSaved, onTabChange, navigateBack, entity, initialDirtyValues, dataLoading, layout, barActions, status, setStatus, formProps, canEdit }: EditViewBindingProps<M> & {
+export declare function EditViewBindingInner<M extends Record<string, unknown>>({ path, entityId, selectedTab: selectedTabProp, collection, parentCollectionSlugs, parentEntityIds, onValuesModified, onSaved, onTabChange, navigateBack, entity, initialDirtyValues, dataLoading, layout, barActions, barActionsStart, status, setStatus, formProps, canEdit }: EditViewBindingProps<M> & {
     entity?: Entity<M>;
     initialDirtyValues?: Partial<M>;
     dataLoading: boolean;

package/dist/components/EntityIdentityBar.d.ts

@@ -0,0 +1,53 @@
+import type { AdminCollection } from "@rebasepro/admin-types";
+import type { EntityStatus } from "@rebasepro/types";
+import React from "react";
+export interface EntityIdentityBarProps {
+    /** Plural collection name, shown as the breadcrumb ahead of the title. */
+    collection: AdminCollection;
+    /** Resolved record title, already guarded against showing a field default. */
+    title: string;
+    entityId?: string | number;
+    status: EntityStatus;
+    dirty: boolean;
+    saving: boolean;
+    /** Undefined hides the Save button — read-only views, or a custom form. */
+    onSave?: () => void;
+    onDiscard?: () => void;
+    saveDisabled?: boolean;
+    hasErrors?: boolean;
+    /**
+     * Save and dismiss, for the side panel and the dialog where the dominant
+     * action is "done with this record" rather than "keep editing".
+     */
+    onSaveAndClose?: () => void;
+    onBack?: () => void;
+    onInspect?: () => void;
+    /** Opens the inspector straight on its history tab. */
+    onViewHistory?: () => void;
+    /**
+     * Actions performed *on* the record — copy, delete, whatever the collection
+     * adds — as menu items under the overflow button. They live here rather
+     * than in a footer, which is what let the footer go away entirely.
+     */
+    recordActions?: React.ReactNode;
+    /** Plugin-contributed actions, rendered inline before Save. */
+    pluginActions?: React.ReactNode;
+    /** Close / full-screen buttons supplied by the panel that owns this view. */
+    trailing?: React.ReactNode;
+    /**
+     * Controls the owning panel puts at the bar's leading edge, ahead of the
+     * breadcrumb — where the side panel's close button lives.
+     */
+    leading?: React.ReactNode;
+}
+/**
+ * The persistent header of an entity view: who this record is, and what you can
+ * do to it.
+ *
+ * The title and the id used to live inside the scrolling form, above 72px of
+ * empty space — 219px of chrome that carried nothing and scrolled away the
+ * moment you touched the wheel, leaving no indication of which record you were
+ * editing. They live here instead, and the left half of a bar that was
+ * previously empty now does the work.
+ */
+export declare function EntityIdentityBar({ collection, title, entityId, status, dirty, saving, onSave, onDiscard, saveDisabled, hasErrors, onSaveAndClose, onBack, onInspect, onViewHistory, recordActions, pluginActions, trailing, leading }: EntityIdentityBarProps): React.JSX.Element;

package/dist/components/EntityInspector.d.ts

@@ -0,0 +1,35 @@
+import type { AdminCollection } from "@rebasepro/admin-types";
+import type { Entity } from "@rebasepro/types";
+import type { FormContext } from "../types/fields";
+import React from "react";
+export type InspectorTab = "json" | "history";
+export interface EntityInspectorProps {
+    /** The open tab, or null when the panel is closed. */
+    tab: InspectorTab | null;
+    onTabChange: (tab: InspectorTab) => void;
+    onClose: () => void;
+    collection: AdminCollection;
+    entity?: Entity<Record<string, unknown>>;
+    formContext?: FormContext<Record<string, unknown>>;
+    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;
+}
+/**
+ * Raw values and revision history, as an inspector rather than as tabs.
+ *
+ * These were the first two entries in the entity tab strip — two icon-only tabs
+ * with no label and no tooltip, sitting *before* the record you opened the page
+ * 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 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 declare function EntityInspector({ tab, onTabChange, onClose, collection, entity, formContext, values, includeHistory, refreshToken }: EntityInspectorProps): React.JSX.Element | null;

package/dist/components/EntityPreviewNesting.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+/**
+ * Current entity preview nesting depth. 0 means "not inside another preview".
+ */
+export declare function useEntityPreviewDepth(): number;
+/**
+ * True when the preview being rendered lives inside another entity preview,
+ * and should therefore render its compact variant.
+ */
+export declare function useIsNestedEntityPreview(): boolean;
+/**
+ * Marks its children as being rendered inside an entity preview, so any
+ * reference or relation below collapses to a chip.
+ */
+export declare function NestedEntityPreviewBoundary({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * Resets the nesting depth back to 0. Used by surfaces that open a fresh
+ * rendering context for an entity — a side panel, a dialog — from within a
+ * preview, where the children are no longer visually nested.
+ */
+export declare function RootEntityPreviewBoundary({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/components/EntityViewBinding.d.ts

@@ -10,4 +10,13 @@ export interface EntityViewBindingProps<M extends Record<string, unknown>> {
     path: string;
     className?: string;
 }
+/**
+ * The read-only rendering of a record's values.
+ *
+ * This used to prepend a synthetic `Id` row of its own. Between that row, the
+ * collection's own id property, and the `path/id` chip above it, the same UUID
+ * appeared three times — and in the ~340px split pane each copy wrapped over
+ * four lines, so most of the first screen was one id repeated. The id is now a
+ * copyable chip in the identity bar, once.
+ */
 export declare function EntityViewBinding<M extends Record<string, unknown>>({ entity, collection, path, className }: EntityViewBindingProps<M>): React.JSX.Element;

package/dist/components/InlineEntityPreview.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { Entity } from "@rebasepro/types";
+import type { AdminCollection } from "@rebasepro/admin-types";
+export type InlineEntityPreviewProps = {
+    entity: Entity<any>;
+    collection?: AdminCollection;
+    /** Overrides the resolved title. */
+    label?: string;
+    disabled?: boolean;
+    /** When set, takes over the click. Otherwise the row opens the side panel. */
+    onClick?: (e: React.SyntheticEvent) => void;
+    /** Set to false to render text only, with no click target. */
+    includeEntityLink?: boolean;
+    /** Icon size in px. Defaults to a hair under the surrounding text. */
+    iconSize?: number;
+    className?: string;
+};
+/**
+ * An entity rendered as one line of text: a small link glyph that marks it as
+ * pointing elsewhere, then the target's title in whatever typography surrounds
+ * it.
+ *
+ * This is what a reference or relation renders as when it is *not* the subject
+ * of its slot — nested inside another entity preview, or filling a title slot.
+ * The card treatment (image, id, preview properties, side-panel button) only
+ * makes sense at the top level; repeating it one level down produces a bordered
+ * box inside a bordered box, each with its own action buttons.
+ *
+ * @group Preview components
+ */
+export declare function InlineEntityPreview({ entity, collection: collectionProp, label, disabled, onClick, includeEntityLink, iconSize, className }: InlineEntityPreviewProps): React.JSX.Element;
+/**
+ * Placeholder shown while the target of an inline reference is being fetched.
+ */
+export declare function InlineEntityPreviewSkeleton({ className }: {
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Shown when the target of an inline reference cannot be resolved — a deleted
+ * row, or a collection that is not registered. Keeps the line readable instead
+ * of dropping an error box into the middle of a card.
+ */
+export declare function InlineEntityPreviewMissing({ label, tooltip, className }: {
+    label: string;
+    tooltip?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/components/history/EntityHistoryView.d.ts

@@ -3,4 +3,7 @@ import type { EntityCustomViewParams } from "@rebasepro/admin-types";
  * Entity history tab view. Shows a paginated list of entity revisions
  * fetched from the backend API. Supports infinite scroll and revert.
  */
-export declare function EntityHistoryView<M extends Record<string, unknown>>({ entity, collection, formContext }: EntityCustomViewParams<M>): import("react").JSX.Element;
+export declare function EntityHistoryView<M extends Record<string, unknown>>({ entity, collection, formContext, refreshToken }: EntityCustomViewParams<M> & {
+    /** Bumped once per save, so the list picks up the revision it just made. */
+    refreshToken?: number;
+}): import("react").JSX.Element;

package/dist/components/index.d.ts

@@ -19,6 +19,8 @@ export * from "./ReferenceWidget";
 export * from "./SearchIconsView";
 export * from "./FieldCaption";
 export * from "./EntityPreviewBinding";
+export * from "./EntityPreviewNesting";
+export * from "./InlineEntityPreview";
 export * from "./common";
 export * from "./field_configs";
 export * from "./SidePanelProvider";