@object-ui/app-shell 4.5.0 → 4.6.0

package/dist/hooks/useRecentItems.js

@@ -1,50 +1,13 @@
 /**
- * useRecentItems
+ * useRecentItems — re-export shim
+ *
+ * The recent-items state has been migrated to a React Context so all consumers
+ * share a single state instance and can be backed by an optional backend
+ * persistence adapter. See `../context/RecentItemsProvider`.
+ *
+ * All existing imports of `useRecentItems` and `RecentItem` from this path
+ * continue to work without any changes at the call sites.
  *
- * Tracks recently visited items (objects, dashboards, pages) with
- * localStorage persistence. Exposes helpers to add and retrieve items.
  * @module
  */
-import { useState, useCallback, useEffect } from 'react';
-const STORAGE_KEY = 'objectui-recent-items';
-const MAX_RECENT = 8;
-function loadRecent() {
-    try {
-        const raw = localStorage.getItem(STORAGE_KEY);
-        return raw ? JSON.parse(raw) : [];
-    }
-    catch {
-        return [];
-    }
-}
-function saveRecent(items) {
-    try {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
-    }
-    catch {
-        // Storage full — silently ignore
-    }
-}
-export function useRecentItems() {
-    const [recentItems, setRecentItems] = useState(loadRecent);
-    // Sync from storage on mount
-    useEffect(() => {
-        setRecentItems(loadRecent());
-    }, []);
-    const addRecentItem = useCallback((item) => {
-        setRecentItems(prev => {
-            const filtered = prev.filter(r => r.id !== item.id);
-            const updated = [
-                { ...item, visitedAt: new Date().toISOString() },
-                ...filtered,
-            ].slice(0, MAX_RECENT);
-            saveRecent(updated);
-            return updated;
-        });
-    }, []);
-    const clearRecentItems = useCallback(() => {
-        setRecentItems([]);
-        saveRecent([]);
-    }, []);
-    return { recentItems, addRecentItem, clearRecentItems };
-}
+export { useRecentItems } from '../context/RecentItemsProvider';

package/dist/hooks/useTrackRouteAsRecent.d.ts

@@ -0,0 +1,18 @@
+interface ObjectLike {
+    name: string;
+    label?: string;
+}
+export interface UseTrackRouteAsRecentOptions {
+    /** Active route path. Usually `useLocation().pathname`. */
+    pathname: string;
+    /** Currently selected app name. Used to build the `href` and namespace. */
+    appName: string | undefined;
+    /** Objects available in the current app — used to resolve labels. */
+    objects?: ObjectLike[];
+    /** Optional override; defaults to `/apps`. */
+    basePathSegment?: string;
+    /** When `true`, the effect is suspended (e.g. when shell is hydrating). */
+    disabled?: boolean;
+}
+export declare function useTrackRouteAsRecent({ pathname, appName, objects, basePathSegment, disabled, }: UseTrackRouteAsRecentOptions): void;
+export {};

package/dist/hooks/useTrackRouteAsRecent.js

@@ -0,0 +1,91 @@
+/**
+ * useTrackRouteAsRecent
+ *
+ * Watches `pathname` and records the current entity (object / dashboard /
+ * page / report) into `RecentItemsProvider`. Encapsulates the URL parsing
+ * logic that previously lived inline in `AppContent.tsx` so it can be reused
+ * by other shells and tested in isolation.
+ *
+ * The hook understands the standard console URL layout:
+ *
+ *   /apps/:appName/:objectName
+ *   /apps/:appName/dashboard/:id
+ *   /apps/:appName/page/:id
+ *   /apps/:appName/report/:id
+ *
+ * Pass `objects` (the list available in the current app) so we can resolve
+ * a human-readable label for object routes.
+ *
+ * @module
+ */
+import { useEffect, useRef } from 'react';
+import { useRecentItems } from '../context/RecentItemsProvider';
+/** Segments after `appName` that are NOT object names but route prefixes. */
+const ROUTE_PREFIXES = new Set(['view', 'record', 'page', 'dashboard', 'design', 'report']);
+function titleize(slug) {
+    return slug.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+}
+export function useTrackRouteAsRecent({ pathname, appName, objects = [], basePathSegment = 'apps', disabled = false, }) {
+    const { addRecentItem } = useRecentItems();
+    // Hold `objects` in a ref so we don't re-fire the tracking effect every
+    // time the parent passes a new array reference (which would happen on
+    // every render in idiomatic React). Only the route should drive the effect.
+    const objectsRef = useRef(objects);
+    objectsRef.current = objects;
+    useEffect(() => {
+        if (disabled || !appName)
+            return;
+        const parts = pathname.split('/').filter(Boolean);
+        // Expect: [basePathSegment, appName, ...rest]
+        if (parts[0] !== basePathSegment || parts[1] !== appName)
+            return;
+        const seg2 = parts[2];
+        const seg3 = parts[3];
+        const basePath = `/${basePathSegment}/${appName}`;
+        if (seg2 && !ROUTE_PREFIXES.has(seg2)) {
+            const obj = objectsRef.current.find(o => o.name === seg2);
+            if (obj) {
+                addRecentItem({
+                    id: `object:${obj.name}`,
+                    label: obj.label || obj.name,
+                    href: `${basePath}/${obj.name}`,
+                    type: 'object',
+                });
+            }
+            return;
+        }
+        if (!seg3)
+            return;
+        switch (seg2) {
+            case 'dashboard':
+                addRecentItem({
+                    id: `dashboard:${seg3}`,
+                    label: titleize(seg3),
+                    href: `${basePath}/dashboard/${seg3}`,
+                    type: 'dashboard',
+                });
+                break;
+            case 'page':
+                addRecentItem({
+                    id: `page:${seg3}`,
+                    label: titleize(seg3),
+                    href: `${basePath}/page/${seg3}`,
+                    type: 'page',
+                });
+                break;
+            case 'report':
+                addRecentItem({
+                    id: `report:${seg3}`,
+                    label: titleize(seg3),
+                    href: `${basePath}/report/${seg3}`,
+                    type: 'report',
+                });
+                break;
+            default:
+                break;
+        }
+        // Intentionally drives off route changes only. `addRecentItem` is stable
+        // per provider, and `objects` is read through a ref to avoid loops.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pathname, appName, basePathSegment, disabled]);
+}

package/dist/index.d.ts

@@ -26,7 +26,8 @@ export { ObjectView, RecordDetailView, RecordFormPage, DashboardView, PageView,
 export type { RecordFormPageProps } from './views';
 export { useFavorites, useMetadataService, useNavPins, useNavigationSync, NavigationSyncEffect, addNavigationItem, removeNavigationItems, renameNavigationItems, navigationEqual, generateNavId, useResponsiveSidebar, } from './hooks';
 export type { FavoriteItem } from './hooks';
-export { NavigationProvider, useNavigationContext, FavoritesProvider } from './context';
+export { NavigationProvider, useNavigationContext, FavoritesProvider, RecentItemsProvider, UserStateAdaptersProvider, useUserStateAdapter, useAttachUserStateAdapters, } from './context';
+export type { UserDataAdapter, UserStateKind } from './context';
 export { AppContent as DefaultAppContent } from './console/AppContent';
 export { LoginPage as DefaultLoginPage } from './console/auth/LoginPage';
 export { RegisterPage as DefaultRegisterPage } from './console/auth/RegisterPage';

package/dist/index.js

@@ -29,7 +29,7 @@ export { ObjectView, RecordDetailView, RecordFormPage, DashboardView, PageView,
 // Hooks
 export { useFavorites, useMetadataService, useNavPins, useNavigationSync, NavigationSyncEffect, addNavigationItem, removeNavigationItems, renameNavigationItems, navigationEqual, generateNavId, useResponsiveSidebar, } from './hooks';
 // Context providers
-export { NavigationProvider, useNavigationContext, FavoritesProvider } from './context';
+export { NavigationProvider, useNavigationContext, FavoritesProvider, RecentItemsProvider, UserStateAdaptersProvider, useUserStateAdapter, useAttachUserStateAdapters, } from './context';
 // Default page implementations (consumers can partial-override slots)
 export { AppContent as DefaultAppContent } from './console/AppContent';
 export { LoginPage as DefaultLoginPage } from './console/auth/LoginPage';

package/dist/layout/PageHeader.d.ts

@@ -13,6 +13,7 @@
  * individual screens don't reinvent the title row.
  *
  * Layout:
+ *   [accent hairline]
  *   [icon]  Title             [actions...]
  *           description
  */
@@ -22,10 +23,32 @@ export interface PageHeaderProps {
     title: React.ReactNode;
     /** Optional secondary description shown beneath the title. */
     description?: React.ReactNode;
-    /** Optional leading icon (already-instantiated React element). */
+    /**
+     * Optional leading icon (already-instantiated React element).
+     * The icon is auto-sized via CSS — pass it with whatever default sizing,
+     * the chip will scale child `<svg>` elements to fit.
+     */
     icon?: React.ReactNode;
     /** Right-aligned actions (buttons, dropdowns, etc.). */
     actions?: React.ReactNode;
+    /**
+     * CSS color used to tint the top hairline, icon chip background, and
+     * icon stroke. Defaults to the Shadcn `--primary` token so the header
+     * automatically follows the active app's branding.
+     *
+     * Accepts any CSS color value (e.g. `'#8b5cf6'`, `'hsl(280 70% 55%)'`,
+     * `'var(--my-token)'`).
+     */
+    accentColor?: string;
+    /**
+     * When true, the header is `position: sticky; top: 0` and gains a
+     * translucent backdrop blur so content scrolling underneath remains
+     * partly visible. Opt-in — the default layout used by ObjectView already
+     * pins the header by virtue of being the first child of a non-scrolling
+     * flex column, so flipping this on there would be a no-op (or worse,
+     * conflict with z-index of overlays).
+     */
+    sticky?: boolean;
     /** Additional className applied to the outer container. */
     className?: string;
     /** Optional data-testid for E2E selectors. */
@@ -37,6 +60,10 @@ export interface PageHeaderProps {
  * Mirrors Shadcn / Linear / Notion conventions: subtle border, comfortable
  * vertical padding, primary-tinted icon chip, monolithic action cluster on
  * the right with consistent gap.
+ *
+ * The accent color cascades through a CSS custom property
+ * (`--page-header-accent`) so consumers can override it without rebuilding
+ * Tailwind classes.
  */
-export declare function PageHeader({ title, description, icon, actions, className, 'data-testid': testId, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageHeader({ title, description, icon, actions, accentColor, sticky, className, 'data-testid': testId, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
 export default PageHeader;

package/dist/layout/PageHeader.js

@@ -6,8 +6,26 @@ import { cn } from '@object-ui/components';
  * Mirrors Shadcn / Linear / Notion conventions: subtle border, comfortable
  * vertical padding, primary-tinted icon chip, monolithic action cluster on
  * the right with consistent gap.
+ *
+ * The accent color cascades through a CSS custom property
+ * (`--page-header-accent`) so consumers can override it without rebuilding
+ * Tailwind classes.
  */
-export function PageHeader({ title, description, icon, actions, className, 'data-testid': testId, }) {
-    return (_jsxs("div", { className: cn('flex justify-between items-center gap-3 py-1.5 sm:py-2 px-3 sm:px-4 border-b shrink-0 bg-background z-10', className), "data-testid": testId ?? 'page-header', children: [_jsxs("div", { className: "flex items-center gap-2 sm:gap-2.5 min-w-0 flex-1", children: [icon && (_jsx("div", { className: "bg-primary/10 p-1 sm:p-1.5 rounded-md shrink-0 text-primary", children: icon })), _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "text-sm sm:text-base font-semibold tracking-tight text-foreground truncate", children: title }), description && (_jsx("p", { className: "text-xs text-muted-foreground truncate hidden sm:block max-w-md", children: description }))] })] }), actions && (_jsx("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: actions }))] }));
+export function PageHeader({ title, description, icon, actions, accentColor, sticky = false, className, 'data-testid': testId, }) {
+    // Resolve accent → CSS var. Falls back to the Shadcn primary token so the
+    // header follows whatever brand the active app has injected.
+    const accent = accentColor || 'hsl(var(--primary))';
+    const style = { '--page-header-accent': accent };
+    return (_jsxs("div", { style: style, className: cn('relative shrink-0 border-b bg-background z-10', sticky &&
+            'sticky top-0 bg-background/85 backdrop-blur supports-[backdrop-filter]:bg-background/75', className), "data-testid": testId ?? 'page-header', children: [_jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-0 top-0 h-[2px] opacity-80", style: {
+                    background: 'linear-gradient(90deg, transparent, var(--page-header-accent), transparent)',
+                } }), _jsxs("div", { className: "flex justify-between items-center gap-3 py-2.5 sm:py-3 px-4 sm:px-6", children: [_jsxs("div", { className: "flex items-center gap-3 min-w-0 flex-1", children: [icon && (_jsx("div", { className: cn('shrink-0 inline-flex items-center justify-center rounded-lg', 'h-9 w-9 sm:h-10 sm:w-10', 
+                                // Auto-size any nested SVG so callers don't have to think
+                                // about sizing inside the chip.
+                                '[&_svg]:h-[18px] [&_svg]:w-[18px] sm:[&_svg]:h-5 sm:[&_svg]:w-5'), style: {
+                                    color: 'var(--page-header-accent)',
+                                    background: 'linear-gradient(135deg, color-mix(in srgb, var(--page-header-accent) 18%, transparent), color-mix(in srgb, var(--page-header-accent) 6%, transparent))',
+                                    boxShadow: 'inset 0 0 0 1px color-mix(in srgb, var(--page-header-accent) 22%, transparent)',
+                                }, children: icon })), _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "text-base sm:text-lg lg:text-xl font-semibold tracking-tight text-foreground truncate leading-tight", children: title }), description && (_jsx("p", { className: "text-xs sm:text-sm text-muted-foreground truncate hidden sm:block max-w-xl mt-0.5", children: description }))] })] }), actions && (_jsx("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: actions }))] })] }));
 }
 export default PageHeader;

package/dist/views/ActionParamDialog.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Returns collected param values or null on cancel.
  */
 import { useState, useEffect } from 'react';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Button, Input, Label, Textarea, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@object-ui/components';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Button, Input, Label, Textarea, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Checkbox, } from '@object-ui/components';
 import { useObjectTranslation } from '@object-ui/i18n';
 export function ActionParamDialog({ state, onOpenChange }) {
     const { t } = useObjectTranslation();
@@ -37,6 +37,9 @@ export function ActionParamDialog({ state, onOpenChange }) {
             return value.trim() === '';
         if (Array.isArray(value))
             return value.length === 0;
+        // Boolean false is a VALID value — only treat undefined/null as missing.
+        if (typeof value === 'boolean')
+            return false;
         return false;
     };
     const handleSubmit = () => {
@@ -65,5 +68,16 @@ export function ActionParamDialog({ state, onOpenChange }) {
     return (_jsx(Dialog, { open: state.open, onOpenChange: (open) => {
             if (!open)
                 handleCancel();
-        }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('actionDialog.title') }), _jsx(DialogDescription, { children: t('actionDialog.description') })] }), _jsx("div", { className: "grid gap-4 py-4", children: state.params.map((param) => (_jsxs("div", { className: "grid gap-2", children: [_jsxs(Label, { htmlFor: param.name, children: [param.label, param.required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), param.type === 'select' && param.options ? (_jsxs(Select, { value: values[param.name] ?? '', onValueChange: (val) => updateValue(param.name, val), children: [_jsx(SelectTrigger, { id: param.name, className: errors[param.name] ? 'border-destructive' : '', children: _jsx(SelectValue, { placeholder: param.placeholder || t('actionDialog.selectPlaceholder', { label: param.label }) }) }), _jsx(SelectContent, { children: param.options.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] })) : param.type === 'textarea' ? (_jsx(Textarea, { id: param.name, value: values[param.name] ?? '', onChange: (e) => updateValue(param.name, e.target.value), placeholder: param.placeholder, className: errors[param.name] ? 'border-destructive' : '' })) : param.type === 'number' ? (_jsx(Input, { id: param.name, type: "number", value: values[param.name] ?? '', onChange: (e) => updateValue(param.name, e.target.value === '' ? undefined : e.target.valueAsNumber), placeholder: param.placeholder, className: errors[param.name] ? 'border-destructive' : '' })) : (_jsx(Input, { id: param.name, type: ['email', 'url', 'date', 'datetime-local', 'time', 'password'].includes(param.type) ? param.type : 'text', value: values[param.name] ?? '', onChange: (e) => updateValue(param.name, e.target.value), placeholder: param.placeholder, className: errors[param.name] ? 'border-destructive' : '' })), errors[param.name] && (_jsx("p", { className: "text-xs text-destructive", children: t('actionDialog.requiredError', { label: param.label }) })), param.helpText && (_jsx("p", { className: "text-xs text-muted-foreground", children: param.helpText }))] }, param.name))) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: handleCancel, children: t('actionDialog.cancel') }), _jsx(Button, { onClick: handleSubmit, children: t('actionDialog.confirm') })] })] }) }));
+        }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('actionDialog.title') }), _jsx(DialogDescription, { children: t('actionDialog.description') })] }), _jsx("div", { className: "grid gap-4 py-4", children: state.params.map((param) => {
+                        const isBooleanParam = param.type === 'boolean' || param.type === 'checkbox';
+                        // Boolean → render as inline checkbox row (label sits beside the
+                        // control instead of above it; help text appears underneath).
+                        if (isBooleanParam) {
+                            const checked = values[param.name] === true;
+                            return (_jsxs("div", { className: "grid gap-1", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Checkbox, { id: param.name, checked: checked, onCheckedChange: (c) => updateValue(param.name, c === true), className: "mt-0.5" }), _jsxs(Label, { htmlFor: param.name, className: "font-normal cursor-pointer", children: [param.label, param.required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] })] }), errors[param.name] && (_jsx("p", { className: "text-xs text-destructive ml-6", children: t('actionDialog.requiredError', { label: param.label }) })), param.helpText && (_jsx("p", { className: "text-xs text-muted-foreground ml-6", children: param.helpText }))] }, param.name));
+                        }
+                        const isLookupParam = param.type === 'lookup' || param.type === 'reference';
+                        return (_jsxs("div", { className: "grid gap-2", children: [_jsxs(Label, { htmlFor: param.name, children: [param.label, param.required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), param.type === 'select' && param.options ? (_jsxs(Select, { value: values[param.name] ?? '', onValueChange: (val) => updateValue(param.name, val), children: [_jsx(SelectTrigger, { id: param.name, className: errors[param.name] ? 'border-destructive' : '', children: _jsx(SelectValue, { placeholder: param.placeholder || t('actionDialog.selectPlaceholder', { label: param.label }) }) }), _jsx(SelectContent, { children: param.options.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] })) : param.type === 'textarea' ? (_jsx(Textarea, { id: param.name, value: values[param.name] ?? '', onChange: (e) => updateValue(param.name, e.target.value), placeholder: param.placeholder, className: errors[param.name] ? 'border-destructive' : '' })) : param.type === 'number' ? (_jsx(Input, { id: param.name, type: "number", value: values[param.name] ?? '', onChange: (e) => updateValue(param.name, e.target.value === '' ? undefined : e.target.valueAsNumber), placeholder: param.placeholder, className: errors[param.name] ? 'border-destructive' : '' })) : (_jsx(Input, { id: param.name, type: ['email', 'url', 'date', 'datetime-local', 'time', 'password'].includes(param.type) ? param.type : 'text', value: values[param.name] ?? '', onChange: (e) => updateValue(param.name, e.target.value), placeholder: param.placeholder ||
+                                        (isLookupParam ? t('actionDialog.lookupPlaceholder', { label: param.label }) : undefined), className: errors[param.name] ? 'border-destructive' : '' })), errors[param.name] && (_jsx("p", { className: "text-xs text-destructive", children: t('actionDialog.requiredError', { label: param.label }) })), param.helpText && (_jsx("p", { className: "text-xs text-muted-foreground", children: param.helpText })), isLookupParam && !param.helpText && (_jsx("p", { className: "text-xs text-muted-foreground", children: t('actionDialog.lookupHelpText') }))] }, param.name));
+                    }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: handleCancel, children: t('actionDialog.cancel') }), _jsx(Button, { onClick: handleSubmit, children: t('actionDialog.confirm') })] })] }) }));
 }

package/dist/views/ObjectView.js

@@ -14,7 +14,6 @@ import { useParams, useSearchParams, useNavigate } from 'react-router-dom';
 const ObjectChart = lazy(() => import('@object-ui/plugin-charts').then((m) => ({ default: m.ObjectChart })));
 const ImportWizard = lazy(() => import('@object-ui/plugin-grid').then((m) => ({ default: m.ImportWizard })));
 import { ListView } from '@object-ui/plugin-list';
-import { DetailView, RecordChatterPanel } from '@object-ui/plugin-detail';
 import { ObjectView as PluginObjectView, ViewTabBar, ManageViewsDialog } from '@object-ui/plugin-view';
 // Plugin registration is handled by the host app (e.g. apps/console/src/main.tsx
 // uses ComponentRegistry.registerLazy so heavy plugins stay code-split).
@@ -27,6 +26,7 @@ import { ViewConfigPanel } from './ViewConfigPanel';
 import { CreateViewDialog } from './CreateViewDialog';
 import { PageHeader } from '../layout/PageHeader';
 import { ManagedByBadge } from '../components/ManagedByBadge';
+import { RecordDetailView } from './RecordDetailView';
 import { resolveCrudAffordances } from '../utils/crudAffordances';
 import { resolveManagedByEmptyState } from '../utils/managedByEmptyState';
 import { useObjectActions } from '../hooks/useObjectActions';
@@ -191,157 +191,6 @@ function fromSysViewRecord(sv) {
         pageSize: sv.page_size ?? sv.pageSize,
     };
 }
-/**
- * DrawerDetailContent — extracted component for NavigationOverlay content.
- * Needs to be a proper component (not a render prop) so it can use hooks
- * for data fetching, comment handling, etc.
- */
-function DrawerDetailContent({ objectDef, recordId, dataSource, onEdit }) {
-    const { user } = useAuth();
-    const currentUser = user
-        ? { id: user.id, name: user.name, avatar: user.image }
-        : FALLBACK_USER;
-    const [feedItems, setFeedItems] = useState([]);
-    // Fetch persisted comments from API
-    useEffect(() => {
-        if (!dataSource || !objectDef?.name || !recordId)
-            return;
-        const threadId = `${objectDef.name}:${recordId}`;
-        dataSource.find('sys_comment', { $filter: { threadId }, $orderby: { createdAt: 'asc' } })
-            .then((res) => {
-            if (res.data?.length) {
-                setFeedItems(res.data.map((c) => ({
-                    id: c.id,
-                    type: 'comment',
-                    actor: c.author?.name ?? 'Unknown',
-                    actorAvatarUrl: c.author?.avatar,
-                    body: c.content,
-                    createdAt: c.createdAt,
-                    updatedAt: c.updatedAt,
-                    parentId: c.parentId,
-                    reactions: c.reactions
-                        ? Object.entries(c.reactions).map(([emoji, userIds]) => ({
-                            emoji,
-                            count: userIds.length,
-                            reacted: userIds.includes(currentUser.id),
-                        }))
-                        : undefined,
-                })));
-            }
-        })
-            .catch(() => { });
-    }, [dataSource, objectDef?.name, recordId, currentUser.id]);
-    const handleAddComment = useCallback(async (text) => {
-        const newItem = {
-            id: crypto.randomUUID(),
-            type: 'comment',
-            actor: currentUser.name,
-            actorAvatarUrl: 'avatar' in currentUser ? currentUser.avatar : undefined,
-            body: text,
-            createdAt: new Date().toISOString(),
-        };
-        setFeedItems(prev => [...prev, newItem]);
-        if (dataSource) {
-            const threadId = `${objectDef.name}:${recordId}`;
-            dataSource.create('sys_comment', {
-                id: newItem.id,
-                threadId,
-                author: currentUser,
-                content: text,
-                mentions: [],
-                createdAt: newItem.createdAt,
-            }).catch(() => { });
-        }
-    }, [currentUser, dataSource, objectDef?.name, recordId]);
-    const handleAddReply = useCallback(async (parentId, text) => {
-        const newItem = {
-            id: crypto.randomUUID(),
-            type: 'comment',
-            actor: currentUser.name,
-            actorAvatarUrl: 'avatar' in currentUser ? currentUser.avatar : undefined,
-            body: text,
-            createdAt: new Date().toISOString(),
-            parentId,
-        };
-        setFeedItems(prev => {
-            const updated = [...prev, newItem];
-            return updated.map(item => item.id === parentId
-                ? { ...item, replyCount: (item.replyCount ?? 0) + 1 }
-                : item);
-        });
-        if (dataSource) {
-            const threadId = `${objectDef.name}:${recordId}`;
-            dataSource.create('sys_comment', {
-                id: newItem.id,
-                threadId,
-                author: currentUser,
-                content: text,
-                mentions: [],
-                createdAt: newItem.createdAt,
-                parentId,
-            }).catch(() => { });
-        }
-    }, [currentUser, dataSource, objectDef?.name, recordId]);
-    const handleToggleReaction = useCallback((itemId, emoji) => {
-        setFeedItems(prev => prev.map(item => {
-            if (item.id !== itemId)
-                return item;
-            const reactions = [...(item.reactions ?? [])];
-            const idx = reactions.findIndex(r => r.emoji === emoji);
-            if (idx >= 0) {
-                const r = reactions[idx];
-                if (r.reacted) {
-                    if (r.count <= 1) {
-                        reactions.splice(idx, 1);
-                    }
-                    else {
-                        reactions[idx] = { ...r, count: r.count - 1, reacted: false };
-                    }
-                }
-                else {
-                    reactions[idx] = { ...r, count: r.count + 1, reacted: true };
-                }
-            }
-            else {
-                reactions.push({ emoji, count: 1, reacted: true });
-            }
-            const updated = { ...item, reactions };
-            if (dataSource) {
-                dataSource.update('sys_comment', String(itemId), {
-                    $toggleReaction: { emoji, userId: currentUser.id },
-                }).catch(() => { });
-            }
-            return updated;
-        }));
-    }, [currentUser.id, dataSource]);
-    return (_jsxs("div", { className: "h-full bg-background overflow-auto p-3 sm:p-4 lg:p-6", children: [_jsx(DetailView, { schema: {
-                    type: 'detail-view',
-                    objectName: objectDef.name,
-                    resourceId: recordId,
-                    showBack: false,
-                    showEdit: true,
-                    title: objectDef.label,
-                    sections: [
-                        {
-                            title: 'Details',
-                            fields: Object.keys(objectDef.fields || {}).map((key) => ({
-                                name: key,
-                                label: objectDef.fields[key].label || key,
-                                type: objectDef.fields[key].type || 'text'
-                            })),
-                        }
-                    ]
-                }, dataSource: dataSource, onEdit: () => onEdit({ id: recordId }) }), _jsx("div", { className: "mt-6 border-t pt-6", children: _jsx(RecordChatterPanel, { config: {
-                        position: 'bottom',
-                        collapsible: true,
-                        defaultCollapsed: true,
-                        feed: {
-                            enableReactions: true,
-                            enableThreading: true,
-                            showCommentInput: true,
-                        },
-                    }, items: feedItems, onAddComment: handleAddComment, onAddReply: handleAddReply, onToggleReaction: handleToggleReaction }) })] }));
-}
 export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey }) {
     const navigate = useNavigate();
     const { objectName, viewId } = useParams();
@@ -1326,9 +1175,16 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
         }
     }, [dataSource, objectDef.name, refreshKey]);
     // Navigation overlay for record detail (supports drawer/modal/split/popover via config)
-    // Priority: activeView.navigation > objectDef.navigation > default page
-    // Memoize to avoid unstable object identity on every render (stale closure prevention)
-    const detailNavigation = useMemo(() => activeView?.navigation ?? objectDef.navigation ?? { mode: 'page' }, [activeView?.navigation, objectDef.navigation]);
+    // Priority: activeView.navigation > objectDef.navigation > default drawer.
+    //
+    // Default mode = 'drawer'. Mirrors Linear / Notion / Airtable / Jira where
+    // record peek is the primary interaction and full-page is the upgrade.
+    // Direct URL access (`/record/:id`) still opens as a full page because
+    // RecordDetailView owns its own route — only same-page click navigation
+    // is drawer-by-default. Per-view config can still override (e.g. a heavy
+    // detail object can set `navigation.mode = 'page'`).
+    const detailNavigation = useMemo(() => activeView?.navigation ??
+        objectDef.navigation ?? { mode: 'drawer', width: 'min(92vw, 1280px)' }, [activeView?.navigation, objectDef.navigation]);
     const drawerRecordId = searchParams.get('recordId');
     /**
      * URL-derived equality filters in the form `?filter[<field>]=<value>`.
@@ -1379,6 +1235,49 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
         newParams.delete('recordId');
         setSearchParams(newParams);
     };
+    /**
+     * Row-click handler used by all list/grid/gallery/kanban surfaces inside
+     * this object view. Wraps `navOverlay.handleClick` so that drawer-mode
+     * opens are URL-driven (writes `?recordId=…`) — making the drawer state
+     * shareable, refresh-safe, and respected by browser back/forward. The
+     * URL→state sync effect below handles actually opening the drawer.
+     */
+    const handleRowClick = useCallback((record, event) => {
+        // Cmd/Ctrl/middle-click — let the hook open in a new tab (full page)
+        // regardless of configured mode. Matches browser link convention.
+        const isModifier = !!(event && (event.metaKey || event.ctrlKey || event.button === 1));
+        if (isModifier) {
+            navOverlay.handleClick(record, event);
+            return;
+        }
+        // Drawer mode → URL is the source of truth. Push `?recordId=…`
+        // and let the existing URL-sync effect open the overlay.
+        if (navOverlay.mode === 'drawer') {
+            const id = (record?.id ?? record?._id);
+            if (id != null) {
+                const next = new URLSearchParams(searchParams);
+                next.set('recordId', String(id));
+                setSearchParams(next);
+                return;
+            }
+        }
+        // All other modes (page / modal / split / popover / new_window / none)
+        // — delegate to the hook.
+        navOverlay.handleClick(record, event);
+    }, [navOverlay, searchParams, setSearchParams]);
+    /**
+     * "Expand to full page" — invoked from the drawer header chevron. Closes
+     * the drawer (which clears `?recordId=…`) and router-pushes to the
+     * dedicated `/record/:id` route. Mirrors Linear/Notion peek-to-page.
+     */
+    const handleExpandDrawer = useCallback(() => {
+        const rec = navOverlay.selectedRecord;
+        const id = rec && (rec.id ?? rec._id);
+        if (id == null)
+            return;
+        handleDrawerClose();
+        handleNavOverlayNavigate(id);
+    }, [navOverlay.selectedRecord, handleNavOverlayNavigate]);
     // Sync URL-based recordId to overlay state
     useEffect(() => {
         if (drawerRecordId && !navOverlay.isOpen) {
@@ -1606,8 +1505,8 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
                     }),
                     params: { records: valid },
                 });
-            }, onRowClick: (record) => {
-                navOverlay.handleClick(record);
+            }, onRowClick: (record, event) => {
+                handleRowClick(record, event);
             }, onSortChange: (sort) => {
                 persistViewPatch(viewDef.id, viewDef, { sort });
             }, onFilterChange: (filter) => {
@@ -1727,20 +1626,20 @@ export function ObjectView({ dataSource, objects, onEdit, externalRefreshKey })
                                         showVisibilityGroups: true,
                                     }, onAddView: isAdmin ? handleAddView : undefined, onRenameView: isAdmin ? handleRenameView : undefined, onDeleteView: isAdmin ? handleDeleteView : undefined, onDuplicateView: isAdmin ? handleDuplicateView : undefined, onPinView: isAdmin ? handlePinView : undefined, onSetDefaultView: isAdmin ? handleSetDefaultView : undefined, onConfigView: isAdmin ? handleConfigView : undefined, onManageViews: isAdmin ? () => setManageViewsOpen(true) : undefined }), isAdmin && (_jsx(ManageViewsDialog, { open: manageViewsOpen, onOpenChange: setManageViewsOpen, views: viewTabItems, activeViewId: activeViewId, viewTypeIcons: VIEW_TYPE_ICONS, onRename: handleRenameView, onDelete: handleDeleteView, onDuplicate: handleDuplicateView, onSetDefault: handleSetDefaultView, onSetPinned: handlePinView, onReorder: handleReorderViews, onAddView: handleAddView, onConfigView: handleConfigView }))] }));
                     })(), _jsxs("div", { className: "flex-1 overflow-hidden relative flex flex-row", children: [navOverlay.mode === 'split' && navOverlay.isOpen ? (_jsx(NavigationOverlay, { ...navOverlay, setIsOpen: (open) => { if (!open)
-                                    handleDrawerClose(); }, title: objectLabel(objectDef), mainContent: _jsxs("div", { className: "flex-1 min-w-0 relative h-full flex flex-col", children: [_jsx("div", { className: "flex-1 relative overflow-hidden", children: _jsx("div", { className: "h-full overflow-auto", children: _jsx(PluginObjectView, { schema: objectViewSchema, dataSource: dataSource, views: mergedViews, activeViewId: activeViewId, onViewChange: handleViewChange, onEdit: (record) => onEdit?.(record), onRowClick: (record) => {
-                                                        navOverlay.handleClick(record);
+                                    handleDrawerClose(); }, title: objectLabel(objectDef), onExpand: handleExpandDrawer, expandLabel: t('console.objectView.expandToPage', { defaultValue: 'Open as full page' }), storageKey: `drawer-width:${objectDef.name}`, mainContent: _jsxs("div", { className: "flex-1 min-w-0 relative h-full flex flex-col", children: [_jsx("div", { className: "flex-1 relative overflow-hidden", children: _jsx("div", { className: "h-full overflow-auto", children: _jsx(PluginObjectView, { schema: objectViewSchema, dataSource: dataSource, views: mergedViews, activeViewId: activeViewId, onViewChange: handleViewChange, onEdit: (record) => onEdit?.(record), onRowClick: (record, event) => {
+                                                        handleRowClick(record, event);
                                                     }, renderListView: renderListView, onCreateView: handleCreateView, onViewAction: handleViewAction }) }) }), typeof recordCount === 'number' && (_jsx("div", { "data-testid": "record-count-footer", className: "border-t px-3 sm:px-4 py-1.5 text-xs text-muted-foreground bg-muted/5 shrink-0", children: t('console.objectView.recordCount', { count: recordCount }) }))] }), children: (record) => {
                                     const recordId = (record.id || record._id);
-                                    return (_jsx(DrawerDetailContent, { objectDef: objectDef, recordId: recordId, dataSource: dataSource, onEdit: onEdit }));
-                                } })) : (_jsx("div", { className: "flex-1 min-w-0 relative h-full flex flex-col", children: _jsx("div", { className: "flex-1 relative overflow-hidden", children: _jsx("div", { className: "h-full overflow-auto", children: _jsx(PluginObjectView, { schema: objectViewSchema, dataSource: dataSource, views: mergedViews, activeViewId: activeViewId, onViewChange: handleViewChange, onEdit: (record) => onEdit?.(record), onRowClick: (record) => {
-                                                navOverlay.handleClick(record);
+                                    return (_jsx(RecordDetailView, { dataSource: dataSource, objects: objects, onEdit: onEdit, objectNameOverride: objectDef.name, recordIdOverride: recordId, embedded: true }));
+                                } })) : (_jsx("div", { className: "flex-1 min-w-0 relative h-full flex flex-col", children: _jsx("div", { className: "flex-1 relative overflow-hidden", children: _jsx("div", { className: "h-full overflow-auto", children: _jsx(PluginObjectView, { schema: objectViewSchema, dataSource: dataSource, views: mergedViews, activeViewId: activeViewId, onViewChange: handleViewChange, onEdit: (record) => onEdit?.(record), onRowClick: (record, event) => {
+                                                handleRowClick(record, event);
                                             }, renderListView: renderListView, onCreateView: handleCreateView, onViewAction: handleViewAction }) }) }) })), _jsx(MetadataPanel, { open: showDebug && isAdmin, sections: [
                                     { title: 'View Configuration', data: activeView },
                                     { title: 'Object Definition', data: objectDef },
                                 ] }), _jsx("div", { "data-testid": "view-config-panel-wrapper", className: `transition-[max-width,opacity] duration-300 ease-in-out overflow-hidden ${showViewConfigPanel && isAdmin ? 'max-w-[280px] opacity-100' : 'max-w-0 opacity-0'}`, children: _jsx(ViewConfigPanel, { open: showViewConfigPanel && isAdmin, onClose: () => { setShowViewConfigPanel(false); setViewConfigPanelMode('edit'); }, mode: viewConfigPanelMode, activeView: activeView, objectDef: objectDef, recordCount: recordCount, onSave: handleViewConfigSave, onViewUpdate: handleViewUpdate, onCreate: handleViewCreate }) }), _jsx(CreateViewDialog, { open: showCreateViewDialog && isAdmin, onOpenChange: setShowCreateViewDialog, existingLabels: views.map((v) => v.label).filter(Boolean), objectDef: objectDef, onCreate: (cfg) => handleViewCreate(cfg) })] }), navOverlay.mode !== 'split' && (_jsx(NavigationOverlay, { ...navOverlay, setIsOpen: (open) => { if (!open)
-                            handleDrawerClose(); }, title: objectDef.label, className: navOverlay.mode === 'drawer' ? 'w-[90vw] sm:max-w-2xl p-0 overflow-hidden' : undefined, children: (record) => {
+                            handleDrawerClose(); }, title: objectDef.label, onExpand: handleExpandDrawer, expandLabel: t('console.objectView.expandToPage', { defaultValue: 'Open as full page' }), storageKey: `drawer-width:${objectDef.name}`, children: (record) => {
                             const recordId = (record.id || record._id);
-                            return (_jsx(DrawerDetailContent, { objectDef: objectDef, recordId: recordId, dataSource: dataSource, onEdit: onEdit }));
+                            return (_jsx(RecordDetailView, { dataSource: dataSource, objects: objects, onEdit: onEdit, objectNameOverride: objectDef.name, recordIdOverride: recordId, embedded: true }));
                         } }))] }), _jsx(ActionConfirmDialog, { state: confirmState, onOpenChange: (open) => {
                     if (!open)
                         setConfirmState({ open: false, message: '' });

package/dist/views/RecordDetailView.d.ts

@@ -9,6 +9,25 @@ interface RecordDetailViewProps {
     dataSource: any;
     objects: any[];
     onEdit: (record: any) => void;
+    /**
+     * When provided, this object name overrides the value derived from the
+     * current URL (`useParams()`). Used when rendering the detail inside a
+     * navigation drawer or split-pane — the parent route owns the URL while
+     * the embedded detail is keyed by an in-memory record selection.
+     */
+    objectNameOverride?: string;
+    /**
+     * When provided, this record id overrides the value derived from the
+     * current URL. See {@link objectNameOverride}.
+     */
+    recordIdOverride?: string;
+    /**
+     * `true` when this view is embedded (drawer / split-pane). Suppresses
+     * side effects that would conflict with the host route — namely the
+     * breadcrumb title publish (the parent route already owns the
+     * breadcrumb).
+     */
+    embedded?: boolean;
 }
-export declare function RecordDetailView({ dataSource, objects, onEdit }: RecordDetailViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function RecordDetailView({ dataSource, objects, onEdit, objectNameOverride, recordIdOverride, embedded }: RecordDetailViewProps): import("react/jsx-runtime").JSX.Element;
 export {};