@object-ui/app-shell 11.4.0 → 11.5.0

package/dist/layout/AppHeader.js

@@ -20,7 +20,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { useLocation, useParams, Link, useNavigate } from 'react-router-dom';
 import { Button, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, Avatar, AvatarImage, AvatarFallback, cn, } from '@object-ui/components';
-import { Search, HelpCircle, ChevronDown, Check, Lock, LogOut, Plus, Layers, Bot, User, BookOpen, ExternalLink, Keyboard, } from 'lucide-react';
+import { Search, HelpCircle, ChevronDown, Check, Lock, LogOut, Plus, Layers, Bot, User, BookOpen, ExternalLink, Keyboard, Hammer, } from 'lucide-react';
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { useOffline } from '@object-ui/react';
 import { PresenceAvatars, useTenantPresence } from '@object-ui/collaboration';
@@ -32,14 +32,15 @@ import { InboxPopover } from './InboxPopover';
 import { AppSwitcher } from './AppSwitcher';
 import { useAdapter } from '../providers/AdapterProvider';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
-import { useAuth, getUserInitials } from '@object-ui/auth';
+import { useAuth, getUserInitials, useIsWorkspaceAdmin } from '@object-ui/auth';
 import { useMetadata } from '../providers/MetadataProvider';
-import { resolveI18nLabel, preferLocal, matchAppBySegment, appRouteSegment } from '../utils';
+import { resolveI18nLabel, preferLocal, matchAppBySegment, appRouteSegment, appStudioDesignPath } from '../utils';
 import { getIcon } from '../utils/getIcon';
 import { useMobileViewSwitcher } from './MobileViewSwitcherContext';
 import { useNavigationContext } from '../context/NavigationContext';
 import { useCommandPalette } from '../context/CommandPaletteProvider';
 import { useUrlOverlay } from '../hooks/useUrlOverlay';
+import { KEYBOARD_SHORTCUTS_PARAM } from '../urlParams';
 import { useAiSurfaceEnabled } from '../hooks/useAiSurface';
 import { getProductName } from '../runtime-config';
 import { LocalizedSidebarTrigger } from './LocalizedSidebarTrigger';
@@ -65,13 +66,16 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
     const { openCommandPalette } = useCommandPalette();
     // Click-reachable entry for the keyboard-shortcuts dialog (was `?`-key only).
     // Shares the `?shortcuts=1` URL param with KeyboardShortcutsDialog (C2/C3).
-    const { openOverlay: openShortcuts } = useUrlOverlay('shortcuts');
+    const { openOverlay: openShortcuts } = useUrlOverlay(KEYBOARD_SHORTCUTS_PARAM);
     const { user, signOut, isAuthEnabled, organizations, activeOrganization, isOrganizationsLoading, getAuthConfig, } = useAuth();
     const dataSource = useAdapter();
     // Runtime AI gating: hide the top-bar AI entry point when the server serves
     // no AI (Community Edition) so it can't dead-end on a chat with no agent.
     // Same signal as the FAB and the `/ai` route guard.
     const { enabled: aiEnabled } = useAiSurfaceEnabled();
+    // Design entry points mutate shared package metadata, so the app → Studio
+    // bridge below is admin-only (mirrors the runtime view/page editors).
+    const isWorkspaceAdmin = useIsWorkspaceAdmin();
     const { t } = useObjectTranslation();
     const { objectLabel, dashboardLabel, pageLabel, reportLabel, viewLabel, appLabel } = useObjectLabel();
     const { apps: metadataApps, dashboards: metadataDashboards, pages: metadataPages, reports: metadataReports } = useMetadata();
@@ -489,6 +493,10 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
     const currentAppDocs = currentAppPackageId
         ? (helpDocs ?? []).filter((d) => d._packageId === currentAppPackageId)
         : [];
+    // App → Studio reverse bridge (ADR-0080): admins jump from the running app
+    // to its owning package's design surface. Null when there is nothing to
+    // open (non-admin, or no owning package).
+    const studioDesignPath = isApp ? appStudioDesignPath(currentApp, isWorkspaceAdmin) : null;
     const objectSiblings = appObjects.map((o) => ({
         label: objectLabel(o),
         href: `${baseHref}/${o.name}`,
@@ -570,7 +578,7 @@ export function AppHeader({ variant, appName, objects, connectionState, presence
                                                     if (!isActive)
                                                         mobileSwitcher.onChange(v.id);
                                                 }, className: "gap-2", children: [v.icon ? (_jsx("span", { className: "shrink-0 text-muted-foreground [&>svg]:h-4 [&>svg]:w-4", children: v.icon })) : null, _jsx("span", { className: "flex-1 truncate", children: v.label }), v.locked ? (_jsx(Lock, { className: "h-3 w-3 shrink-0 text-muted-foreground", "aria-hidden": true })) : null, isActive ? (_jsx(Check, { className: "h-4 w-4 shrink-0 text-foreground", "aria-hidden": true })) : null] }, v.id));
-                                        }) })] })) : (_jsx("span", { className: "text-sm font-medium sm:hidden truncate min-w-0 ml-1", children: mobileSwitcher.triggerLabel ?? mobileSwitcher.views[0].label }))) : (_jsx("span", { className: "text-sm font-medium sm:hidden truncate min-w-0 ml-1", children: lastSegmentLabel }))] }))] }), _jsxs("div", { className: "flex items-center gap-0.5 sm:gap-1 shrink-0 [&>*+*[data-topbar-group]]:ml-1 [&>[data-topbar-group]+[data-topbar-group]]:border-l [&>[data-topbar-group]+[data-topbar-group]]:border-border/60 [&>[data-topbar-group]+[data-topbar-group]]:pl-1 sm:[&>[data-topbar-group]+[data-topbar-group]]:pl-2 sm:[&>[data-topbar-group]+[data-topbar-group]]:ml-2", children: [!isOnline && (_jsxs("div", { className: "flex items-center gap-1 px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 text-xs font-medium", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-yellow-500 animate-pulse" }), t('topbar.offline', { defaultValue: 'Offline' })] })), isApp && connectionState && _jsx(ConnectionStatus, { state: connectionState }), isApp && activeUsers.length > 0 && (_jsx("div", { className: "hidden md:flex items-center shrink-0", title: t('topbar.usersOnline', { defaultValue: 'Users currently online' }), children: _jsx(PresenceAvatars, { users: activeUsers, size: "sm", maxVisible: 3, showStatus: true }) })), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 sm:gap-1 shrink-0", children: [_jsxs("button", { type: "button", "data-testid": "action:command-palette:open", "aria-label": t('console.search', { defaultValue: 'Search…' }), "aria-keyshortcuts": "Meta+K Control+K", onClick: openCommandPalette, className: "hidden lg:flex relative items-center gap-2 w-48 xl:w-64 h-8 px-3 text-sm rounded-md border bg-muted/50 text-muted-foreground hover:bg-muted transition-colors", children: [_jsx(Search, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "flex-1 text-left text-xs", children: t('console.search', { defaultValue: 'Search…' }) }), _jsxs("kbd", { className: "pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border bg-background px-1.5 text-[10px] font-medium text-muted-foreground", children: [_jsx("span", { className: "text-xs", children: "\u2318" }), "K"] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden h-8 w-8 shrink-0", "data-testid": "action:command-palette:open-mobile", onClick: openCommandPalette, "aria-label": t('console.search', { defaultValue: 'Search…' }), children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 shrink-0", children: [_jsx(InboxPopover, { notifications: notifications, unreadCount: unreadCount, pendingApprovalsCount: pendingApprovalsCount, activities: activeActivities, onMarkAllRead: markAllRead, onMarkRead: markNotificationRead }), aiEnabled && (_jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0", asChild: true, "aria-label": t('topbar.aiAssistant', { defaultValue: 'AI Assistant' }), children: _jsx(Link, { to: "/ai", children: _jsx(Bot, { className: "h-4 w-4" }) }) })), _jsxs(DropdownMenu, { onOpenChange: (open) => { if (open)
+                                        }) })] })) : (_jsx("span", { className: "text-sm font-medium sm:hidden truncate min-w-0 ml-1", children: mobileSwitcher.triggerLabel ?? mobileSwitcher.views[0].label }))) : (_jsx("span", { className: "text-sm font-medium sm:hidden truncate min-w-0 ml-1", children: lastSegmentLabel }))] }))] }), _jsxs("div", { className: "flex items-center gap-0.5 sm:gap-1 shrink-0 [&>*+*[data-topbar-group]]:ml-1 [&>[data-topbar-group]+[data-topbar-group]]:border-l [&>[data-topbar-group]+[data-topbar-group]]:border-border/60 [&>[data-topbar-group]+[data-topbar-group]]:pl-1 sm:[&>[data-topbar-group]+[data-topbar-group]]:pl-2 sm:[&>[data-topbar-group]+[data-topbar-group]]:ml-2", children: [!isOnline && (_jsxs("div", { className: "flex items-center gap-1 px-2 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 text-xs font-medium", children: [_jsx("span", { className: "h-2 w-2 rounded-full bg-yellow-500 animate-pulse" }), t('topbar.offline', { defaultValue: 'Offline' })] })), isApp && connectionState && _jsx(ConnectionStatus, { state: connectionState }), isApp && activeUsers.length > 0 && (_jsx("div", { className: "hidden md:flex items-center shrink-0", title: t('topbar.usersOnline', { defaultValue: 'Users currently online' }), children: _jsx(PresenceAvatars, { users: activeUsers, size: "sm", maxVisible: 3, showStatus: true }) })), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 sm:gap-1 shrink-0", children: [_jsxs("button", { type: "button", "data-testid": "action:command-palette:open", "aria-label": t('console.search', { defaultValue: 'Search…' }), "aria-keyshortcuts": "Meta+K Control+K", onClick: openCommandPalette, className: "hidden lg:flex relative items-center gap-2 w-48 xl:w-64 h-8 px-3 text-sm rounded-md border bg-muted/50 text-muted-foreground hover:bg-muted transition-colors", children: [_jsx(Search, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "flex-1 text-left text-xs", children: t('console.search', { defaultValue: 'Search…' }) }), _jsxs("kbd", { className: "pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border bg-background px-1.5 text-[10px] font-medium text-muted-foreground", children: [_jsx("span", { className: "text-xs", children: "\u2318" }), "K"] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden h-8 w-8 shrink-0", "data-testid": "action:command-palette:open-mobile", onClick: openCommandPalette, "aria-label": t('console.search', { defaultValue: 'Search…' }), children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 shrink-0", children: [_jsx(InboxPopover, { notifications: notifications, unreadCount: unreadCount, pendingApprovalsCount: pendingApprovalsCount, activities: activeActivities, onMarkAllRead: markAllRead, onMarkRead: markNotificationRead }), studioDesignPath && (_jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0", asChild: true, "data-testid": "app-design-in-studio-button", "aria-label": t('topbar.designInStudio', { defaultValue: 'Design in Studio' }), title: t('topbar.designInStudio', { defaultValue: 'Design in Studio' }), children: _jsx(Link, { to: studioDesignPath, children: _jsx(Hammer, { className: "h-4 w-4" }) }) })), aiEnabled && (_jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0", asChild: true, "aria-label": t('topbar.aiAssistant', { defaultValue: 'AI Assistant' }), children: _jsx(Link, { to: "/ai", children: _jsx(Bot, { className: "h-4 w-4" }) }) })), _jsxs(DropdownMenu, { onOpenChange: (open) => { if (open)
                                     void loadHelpDocs(); }, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 hidden md:flex shrink-0", "aria-label": t('sidebar.helpTooltip', { defaultValue: 'Help & Documentation' }), children: _jsx(HelpCircle, { className: "h-4 w-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "min-w-56 rounded-lg", sideOffset: 4, children: [currentAppDocs.length > 0 && currentAppPackageId ? (_jsxs(DropdownMenuItem, { className: "cursor-pointer", onClick: () => navigate(currentAppDocs.length === 1
                                                     ? `/apps/${currentAppPackageId}/docs/${currentAppDocs[0].name}`
                                                     : `/apps/${currentAppPackageId}/docs`), children: [_jsx(BookOpen, { className: "mr-2 h-4 w-4" }), t('help.appDocs', { defaultValue: "This app's docs" })] })) : null, _jsxs(DropdownMenuItem, { className: "cursor-pointer", onClick: () => navigate('/docs'), children: [_jsx(Layers, { className: "mr-2 h-4 w-4" }), t('help.allDocs', { defaultValue: 'All documentation' })] }), isApp ? (_jsxs(DropdownMenuItem, { className: "cursor-pointer", "data-testid": "action:keyboard-shortcuts:open", onClick: openShortcuts, children: [_jsx(Keyboard, { className: "mr-2 h-4 w-4" }), t('help.keyboardShortcuts', { defaultValue: 'Keyboard shortcuts' })] })) : null, _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { asChild: true, className: "cursor-pointer", children: _jsxs("a", { href: "https://docs.objectstack.ai", target: "_blank", rel: "noopener noreferrer", children: [_jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), t('help.onlineDocs', { defaultValue: 'Online documentation' })] }) })] })] })] }), _jsxs("div", { "data-topbar-group": true, className: "flex items-center gap-0.5 shrink-0", children: ["        ", _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0 rounded-full", children: _jsxs(Avatar, { className: "h-7 w-7 rounded-full", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-full bg-primary text-primary-foreground text-xs", children: getUserInitials(user) })] }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "min-w-64 rounded-lg", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "p-0 font-normal", children: _jsxs("div", { className: "flex items-center gap-2 px-2 py-2", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg", children: [_jsx(AvatarImage, { src: user?.image, alt: user?.name ?? 'User' }), _jsx(AvatarFallback, { className: "rounded-lg bg-primary text-primary-foreground", children: getUserInitials(user) })] }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: user?.name ?? 'User' }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: user?.email ?? '' })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsxs(DropdownMenuItem, { onClick: () => navigate('/apps/account/component/account/profile_card'), className: "cursor-pointer", children: [_jsx(User, { className: "mr-2 h-4 w-4" }), t('user.profile', { defaultValue: 'Profile' })] }), hasOrgSection && !multiOrgDisabled && (_jsxs(DropdownMenuItem, { onClick: () => navigate('/organizations?create=1'), className: "cursor-pointer", "data-testid": "header-create-workspace", children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), t('organizations.create', { defaultValue: 'Create workspace' })] })), (metadataApps || [])

package/dist/layout/AppSidebar.js

@@ -10,12 +10,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * @module
  */
 import * as React from 'react';
-import { useNavigate, Link } from 'react-router-dom';
+import { useNavigate, useLocation, Link } from 'react-router-dom';
 import { Layers } from 'lucide-react';
 import { getIcon as resolveIcon } from '../utils/getIcon';
 import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuAction, SidebarInput, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, Avatar, AvatarImage, AvatarFallback, useSidebar, } from '@object-ui/components';
-import { ChevronsUpDown, Plus, Settings, LogOut, Database, Clock, Star, StarOff, Search, Pencil, ChevronRight, Home, } from 'lucide-react';
-import { NavigationRenderer, resolveHref } from '@object-ui/layout';
+import { ChevronsUpDown, Plus, Settings, LogOut, Database, Clock, Star, StarOff, Search, Pencil, ChevronRight, Home, ListTree, } from 'lucide-react';
+import { NavigationRenderer, resolveHref, resolveActiveNavItem } from '@object-ui/layout';
 import { useMetadata } from '../providers/MetadataProvider';
 import { useExpressionContext, evaluateVisibility } from '../providers/ExpressionProvider';
 import { useAuth, useIsWorkspaceAdmin, getUserInitials } from '@object-ui/auth';
@@ -95,6 +95,7 @@ export function AppSidebar({ activeAppName, onAppChange }) {
     const { user, signOut, isAuthEnabled } = useAuth();
     const isWorkspaceAdmin = useIsWorkspaceAdmin();
     const navigate = useNavigate();
+    const location = useLocation();
     const { t } = useObjectTranslation();
     const { objectLabel: resolveNavObjectLabel, viewLabel: resolveNavViewLabel } = useObjectLabel();
     // Swipe-from-left-edge gesture to open sidebar on mobile
@@ -208,7 +209,12 @@ export function AppSidebar({ activeAppName, onAppChange }) {
         items.push({ id: 'sys-objects', label: t('layout.systemNav.objectManager', { defaultValue: 'Object Manager' }), type: 'url', url: '/apps/setup/system/metadata/object', icon: 'database' }, { id: 'sys-datasources', label: t('layout.systemNav.datasources', { defaultValue: 'Datasources' }), type: 'url', url: '/apps/setup/component/metadata/resource?type=datasource', icon: 'database' }, { id: 'sys-users', label: t('layout.systemNav.users', { defaultValue: 'Users' }), type: 'url', url: '/apps/setup/system/users', icon: 'users' }, { id: 'sys-orgs', label: t('layout.systemNav.organizations', { defaultValue: 'Organizations' }), type: 'url', url: '/apps/setup/system/organizations', icon: 'building-2' }, { id: 'sys-roles', label: t('layout.systemNav.roles', { defaultValue: 'Roles' }), type: 'url', url: '/apps/setup/system/roles', icon: 'shield' }, { id: 'sys-config', label: t('layout.systemNav.configuration', { defaultValue: 'Configuration' }), type: 'url', url: '/apps/setup/system/settings', icon: 'sliders-horizontal' });
         return items;
     }, [isWorkspaceAdmin, t]);
-    return (_jsxs(_Fragment, { children: [_jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: activeApp ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", style: primaryColor ? { backgroundColor: primaryColor } : undefined, children: logo ? (_jsx("img", { src: logo, alt: resolveI18nLabel(activeApp.label, t), className: "size-6 object-contain" })) : (React.createElement(getIcon(activeApp.icon), { className: "size-4" })) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: resolveI18nLabel(activeApp.label, t) }), _jsx("span", { className: "truncate text-xs", children: resolveI18nLabel(activeApp.description, t) || t('layout.appSwitcher.appsAvailable', { defaultValue: '{{count}} apps available', count: activeApps.length }) })] }), _jsx(ChevronsUpDown, { className: "ml-auto" })] }) }), _jsxs(DropdownMenuContent, { className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg", align: "start", side: isMobile ? "bottom" : "right", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: t('layout.appSwitcher.switchApplication', { defaultValue: 'Switch Application' }) }), activeApps.map((app) => (_jsxs(DropdownMenuItem, { onClick: () => onAppChange(appRouteSegment(app) ?? app.name), className: "gap-2 p-2", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-sm border", children: app.icon ? React.createElement(getIcon(app.icon), { className: "size-3" }) : _jsx(Database, { className: "size-3" }) }), resolveI18nLabel(app.label, t), activeApp.name === app.name && _jsx("span", { className: "ml-auto text-xs", children: "\u2713" })] }, app.name))), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate('/home'), "data-testid": "home-link-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Home, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.home') })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate(`/apps/${appRouteSegment(activeApp) ?? activeAppName}/create-app`), "data-testid": "add-app-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Plus, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.addApp') })] }), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate(`/apps/${appRouteSegment(activeApp) ?? activeAppName}/edit-app/${activeAppName}`), "data-testid": "edit-app-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Pencil, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.editApp') })] }), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate('/apps/setup/system/apps'), "data-testid": "manage-all-apps-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Settings, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.manageAllApps') })] })] })] })) : (_jsxs(SidebarMenuButton, { size: "lg", onClick: () => navigate('/apps/setup'), "data-testid": "system-sidebar-header", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: _jsx(Settings, { className: "size-4" }) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: t('layout.appSwitcher.systemConsole') }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: t('layout.appSwitcher.noAppsConfigured') })] })] })) }) }) }), _jsx(SidebarContent, { children: activeApp ? (_jsxs(_Fragment, { children: [areas.length > 1 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Layers, { className: "h-3.5 w-3.5" }), t('sidebar.area', { defaultValue: 'Area' })] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: areas.map((area) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Sidebar, { collapsible: "icon", children: [_jsx(SidebarHeader, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: activeApp ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { size: "lg", className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", style: primaryColor ? { backgroundColor: primaryColor } : undefined, children: logo ? (_jsx("img", { src: logo, alt: resolveI18nLabel(activeApp.label, t), className: "size-6 object-contain" })) : (React.createElement(getIcon(activeApp.icon), { className: "size-4" })) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: resolveI18nLabel(activeApp.label, t) }), _jsx("span", { className: "truncate text-xs", children: resolveI18nLabel(activeApp.description, t) || t('layout.appSwitcher.appsAvailable', { defaultValue: '{{count}} apps available', count: activeApps.length }) })] }), _jsx(ChevronsUpDown, { className: "ml-auto" })] }) }), _jsxs(DropdownMenuContent, { className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg", align: "start", side: isMobile ? "bottom" : "right", sideOffset: 4, children: [_jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground", children: t('layout.appSwitcher.switchApplication', { defaultValue: 'Switch Application' }) }), activeApps.map((app) => (_jsxs(DropdownMenuItem, { onClick: () => onAppChange(appRouteSegment(app) ?? app.name), className: "gap-2 p-2", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-sm border", children: app.icon ? React.createElement(getIcon(app.icon), { className: "size-3" }) : _jsx(Database, { className: "size-3" }) }), resolveI18nLabel(app.label, t), activeApp.name === app.name && _jsx("span", { className: "ml-auto text-xs", children: "\u2713" })] }, app.name))), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate('/home'), "data-testid": "home-link-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Home, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.home') })] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate(`/apps/${appRouteSegment(activeApp) ?? activeAppName}/create-app`), "data-testid": "add-app-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Plus, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.addApp') })] }), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate(`/apps/${appRouteSegment(activeApp) ?? activeAppName}/edit-app/${activeAppName}`), "data-testid": "edit-app-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Pencil, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.editApp') })] }), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => {
+                                                        const seg = appRouteSegment(activeApp) ?? activeAppName;
+                                                        const active = resolveActiveNavItem(processedNavigation, location.pathname, location.search, basePath, { currentUserId: user?.id ?? null, contextValues });
+                                                        const sel = active ? `?sel=${encodeURIComponent(`nav:${active.id}`)}` : '';
+                                                        navigate(`/apps/${seg}/metadata/app/${activeAppName}${sel}`);
+                                                    }, "data-testid": "edit-navigation-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(ListTree, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.editNavigation', { defaultValue: 'Edit Navigation' }) })] }), _jsxs(DropdownMenuItem, { className: "gap-2 p-2", onClick: () => navigate('/apps/setup/system/apps'), "data-testid": "manage-all-apps-btn", children: [_jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-background", children: _jsx(Settings, { className: "size-4" }) }), _jsx("div", { className: "font-medium text-muted-foreground", children: t('layout.appSwitcher.manageAllApps') })] })] })] })) : (_jsxs(SidebarMenuButton, { size: "lg", onClick: () => navigate('/apps/setup'), "data-testid": "system-sidebar-header", children: [_jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: _jsx(Settings, { className: "size-4" }) }), _jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [_jsx("span", { className: "truncate font-semibold", children: t('layout.appSwitcher.systemConsole') }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: t('layout.appSwitcher.noAppsConfigured') })] })] })) }) }) }), _jsx(SidebarContent, { children: activeApp ? (_jsxs(_Fragment, { children: [areas.length > 1 && (_jsxs(SidebarGroup, { children: [_jsxs(SidebarGroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(Layers, { className: "h-3.5 w-3.5" }), t('sidebar.area', { defaultValue: 'Area' })] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: areas.map((area) => {
                                                     const AreaIcon = getIcon(area.icon);
                                                     const isActiveArea = area.id === activeAreaId;
                                                     return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: isActiveArea, tooltip: area.label, onClick: () => setActiveAreaId(area.id), children: [_jsx(AreaIcon, { className: "h-4 w-4" }), _jsx("span", { children: area.label })] }) }, area.id));

package/dist/observability/sentry.d.ts

@@ -11,6 +11,11 @@
  *
  * Env vars consumed (all optional):
  *  - `VITE_SENTRY_DSN`         — DSN; absent disables the integration entirely
+ *  - `VITE_SENTRY_ENABLED`     — set to `"false"` to force-disable reporting
+ *    even when a DSN is configured (e.g. a fork that keeps the upstream DSN
+ *    in `.env.production` but doesn't want to report to it). Default: enabled
+ *    whenever a DSN is present — this is an *additional* off switch, not a
+ *    change to that default.
  *  - `VITE_SENTRY_ENVIRONMENT` — defaults to `MODE` (production/development)
  *  - `VITE_SENTRY_RELEASE`     — defaults to `VITE_APP_VERSION` or `unknown`
  *  - `VITE_SENTRY_TRACES_SAMPLE_RATE` — defaults to `0.1`

package/dist/observability/sentry.js

@@ -11,6 +11,11 @@
  *
  * Env vars consumed (all optional):
  *  - `VITE_SENTRY_DSN`         — DSN; absent disables the integration entirely
+ *  - `VITE_SENTRY_ENABLED`     — set to `"false"` to force-disable reporting
+ *    even when a DSN is configured (e.g. a fork that keeps the upstream DSN
+ *    in `.env.production` but doesn't want to report to it). Default: enabled
+ *    whenever a DSN is present — this is an *additional* off switch, not a
+ *    change to that default.
  *  - `VITE_SENTRY_ENVIRONMENT` — defaults to `MODE` (production/development)
  *  - `VITE_SENTRY_RELEASE`     — defaults to `VITE_APP_VERSION` or `unknown`
  *  - `VITE_SENTRY_TRACES_SAMPLE_RATE` — defaults to `0.1`
@@ -38,7 +43,7 @@ export function initSentry() {
     initPromise = (async () => {
         const env = import.meta.env ?? {};
         const dsn = env.VITE_SENTRY_DSN;
-        if (!dsn)
+        if (!dsn || env.VITE_SENTRY_ENABLED === 'false')
             return false;
         try {
             const Sentry = (await import('@sentry/react'));

package/dist/preview/DraftChangesPanel.d.ts

@@ -12,10 +12,38 @@ export interface DraftChangeEntry {
     /** `new` = no published version; `update` = overwrites one; undefined = probing. */
     kind?: 'new' | 'update';
 }
+export interface EntryChangeDetail {
+    /** Field-level diff — present when either side carries a `fields` map. */
+    fields: {
+        added: string[];
+        changed: Array<{
+            name: string;
+            keys: string[];
+        }>;
+        removed: string[];
+    } | null;
+    /** Top-level keys (other than `fields`) whose values differ. */
+    changedKeys: string[];
+}
+/**
+ * What publishing this draft actually changes, computed client-side from the
+ * published body (null when the item is NEW) and the pending draft body.
+ * `fields` gets the dedicated designer diff; every other top-level key is
+ * compared wholesale — enough to answer "which parts of this item move".
+ */
+export declare function computeChangeDetail(published: Record<string, unknown> | null, draft: Record<string, unknown> | null): EntryChangeDetail;
 export interface DraftChangesPanelProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     /** When set, list only pending drafts belonging to this package (Studio is package-scoped). */
     packageId?: string | null;
+    /**
+     * When provided, the panel renders a confirm footer whose button invokes
+     * this — turning the panel into the review-then-publish step. The caller
+     * still owns the actual publish request and closing the panel on success.
+     */
+    onPublish?: () => void | Promise<void>;
+    /** Disables the confirm button and shows a spinner while the caller publishes. */
+    publishing?: boolean;
 }
-export declare function DraftChangesPanel({ open, onOpenChange, packageId }: DraftChangesPanelProps): import("react").JSX.Element;
+export declare function DraftChangesPanel({ open, onOpenChange, packageId, onPublish, publishing, }: DraftChangesPanelProps): import("react").JSX.Element;

package/dist/preview/DraftChangesPanel.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
  * ObjectUI
  * Copyright (c) 2024-present ObjectStack Inc.
@@ -11,16 +11,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * user commits. Lists every pending ADR-0033 draft grouped by metadata type,
  * and classifies each as NEW (no published version exists — publishing adds
  * it) or UPDATE (a published version exists — publishing overwrites it).
- * This is the review surface that turns Publish from a leap of faith into an
- * informed click; the per-item designer diff remains the deep-dive.
+ * Each entry expands into a field-level diff (objects) / changed-key summary
+ * (everything else), lazily fetched on first expand. This is the review
+ * surface that turns Publish from a leap of faith into an informed click.
  *
- * Read-only: fetches `_drafts` + per-item `/published` probes on open, and
- * never writes. Publishing stays with the caller (DraftPreviewBar / chat).
+ * Read-only by default: fetches `_drafts` + published lists on open, and
+ * never writes. When the caller passes `onPublish`, the panel additionally
+ * renders a confirm footer — review-then-publish in one surface — but the
+ * publish action itself still belongs to the caller.
  */
 import { useCallback, useEffect, useState } from 'react';
-import { FilePlus2, FilePen, Loader2 } from 'lucide-react';
-import { Badge, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from '@object-ui/components';
+import { ChevronDown, ChevronRight, FilePlus2, FilePen, Loader2, Rocket } from 'lucide-react';
+import { Badge, Button, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from '@object-ui/components';
 import { useObjectTranslation } from '@object-ui/i18n';
+import { diffFields } from '../views/metadata-admin/previews/object-fields-io';
 /** Pending drafts straight from the ADR-0033 `_drafts` endpoint. */
 async function listPendingDrafts(packageId) {
     const qs = packageId ? `?packageId=${encodeURIComponent(packageId)}` : '';
@@ -62,10 +66,126 @@ async function publishedNamesOf(type) {
         .map((it) => (typeof it?.name === 'string' ? it.name : null))
         .filter((n) => n !== null));
 }
-export function DraftChangesPanel({ open, onOpenChange, packageId }) {
+/**
+ * Some framework reads wrap the body in a `{ type, name, item }` envelope
+ * (draft reads do; published reads return the bare body). Unwrap defensively.
+ */
+function unwrapItem(payload) {
+    if (!payload || typeof payload !== 'object')
+        return null;
+    const p = payload;
+    if (p.item && typeof p.item === 'object')
+        return p.item;
+    return p;
+}
+async function fetchItemBody(type, name, opts = {}) {
+    const params = [];
+    if (opts.draft)
+        params.push('state=draft');
+    if (opts.packageId)
+        params.push(`package=${encodeURIComponent(opts.packageId)}`);
+    const qs = params.length ? `?${params.join('&')}` : '';
+    const res = await fetch(`/api/v1/meta/${encodeURIComponent(type)}/${encodeURIComponent(name)}${qs}`, { credentials: 'include', headers: { Accept: 'application/json' }, cache: 'no-store' });
+    if (res.status === 404)
+        return null;
+    if (!res.ok)
+        throw new Error(`HTTP ${res.status}`);
+    return unwrapItem(await res.json());
+}
+/** Stable equality for metadata values (small JSON — order-sensitive is fine). */
+function valueEqual(a, b) {
+    return JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+}
+/**
+ * What publishing this draft actually changes, computed client-side from the
+ * published body (null when the item is NEW) and the pending draft body.
+ * `fields` gets the dedicated designer diff; every other top-level key is
+ * compared wholesale — enough to answer "which parts of this item move".
+ */
+export function computeChangeDetail(published, draft) {
+    const pub = published ?? {};
+    const cur = draft ?? {};
+    let fields = null;
+    if (pub.fields != null || cur.fields != null) {
+        const d = diffFields(pub.fields, cur.fields);
+        fields = {
+            added: Object.values(d.byName)
+                .filter((e) => e.status === 'added')
+                .map((e) => e.name)
+                .sort(),
+            changed: Object.values(d.byName)
+                .filter((e) => e.status === 'changed')
+                .map((e) => ({ name: e.name, keys: e.changedKeys }))
+                .sort((a, b) => a.name.localeCompare(b.name)),
+            removed: d.removed.map((e) => e.name).sort(),
+        };
+    }
+    const keys = new Set([...Object.keys(pub), ...Object.keys(cur)]);
+    keys.delete('fields');
+    const changedKeys = [...keys]
+        .filter((k) => !valueEqual(pub[k], cur[k]))
+        .sort();
+    return { fields, changedKeys };
+}
+/**
+ * Lazily-loaded drill-in for one draft entry: published vs draft, rendered as
+ * added / changed / removed field rows plus a changed-top-level-keys strip.
+ */
+function EntryDetail({ entry }) {
+    const { t } = useObjectTranslation();
+    const [detail, setDetail] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const [published, draft] = await Promise.all([
+                    // A NEW item 404s on the published read — that's data, not an error.
+                    fetchItemBody(entry.type, entry.name, { packageId: entry.packageId }),
+                    fetchItemBody(entry.type, entry.name, { draft: true, packageId: entry.packageId }),
+                ]);
+                if (!cancelled)
+                    setDetail(computeChangeDetail(published, draft));
+            }
+            catch (e) {
+                if (!cancelled)
+                    setError(e.message);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [entry.type, entry.name, entry.packageId]);
+    if (error) {
+        return (_jsxs("p", { className: "px-2 py-1 text-xs text-destructive", children: [t('preview.changes.detailLoadFailed', { defaultValue: 'Could not load change detail:' }), ' ', error] }));
+    }
+    if (!detail) {
+        return (_jsxs("p", { className: "flex items-center gap-1.5 px-2 py-1 text-xs text-muted-foreground", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), t('preview.changes.detailLoading', { defaultValue: 'Loading detail…' })] }));
+    }
+    const { fields, changedKeys } = detail;
+    const hasFieldRows = !!fields && (fields.added.length > 0 || fields.changed.length > 0 || fields.removed.length > 0);
+    if (!hasFieldRows && changedKeys.length === 0) {
+        return (_jsx("p", { className: "px-2 py-1 text-xs text-muted-foreground", children: t('preview.changes.detailNone', {
+                defaultValue: 'No differences detected — the draft matches the published version.',
+            }) }));
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-0.5 px-2 py-1", "data-testid": "draft-entry-detail", children: [fields?.added.map((name) => (_jsxs("p", { className: "font-mono text-xs text-emerald-700 dark:text-emerald-400", children: ["+ ", name] }, `+${name}`))), fields?.changed.map((f) => (_jsxs("p", { className: "font-mono text-xs text-amber-700 dark:text-amber-400", children: ["~ ", f.name, f.keys.length > 0 && _jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", f.keys.join(', ')] })] }, `~${f.name}`))), fields?.removed.map((name) => (_jsxs("p", { className: "font-mono text-xs text-red-700 line-through dark:text-red-400", children: ["\u2212 ", name] }, `-${name}`))), changedKeys.length > 0 && (_jsxs("p", { className: "text-xs text-muted-foreground", children: [t('preview.changes.detailChangedKeys', { defaultValue: 'Also changed:' }), ' ', _jsx("span", { className: "font-mono", children: changedKeys.join(', ') })] }))] }));
+}
+export function DraftChangesPanel({ open, onOpenChange, packageId, onPublish, publishing = false, }) {
     const { t } = useObjectTranslation();
     const [entries, setEntries] = useState(null);
     const [error, setError] = useState(null);
+    const [expanded, setExpanded] = useState(new Set());
+    const toggleExpanded = useCallback((key) => {
+        setExpanded((prev) => {
+            const next = new Set(prev);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    }, []);
     const load = useCallback(async () => {
         setEntries(null);
         setError(null);
@@ -105,11 +225,18 @@ export function DraftChangesPanel({ open, onOpenChange, packageId }) {
         bucket.push(entry);
         byType.set(entry.type, bucket);
     }
-    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { side: "right", className: "w-[420px] sm:max-w-[420px]", "data-testid": "draft-changes-panel", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: t('preview.changes.title', { defaultValue: 'Pending changes' }) }), _jsx(SheetDescription, { children: t('preview.changes.description', {
+    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { side: "right", className: "flex w-[420px] flex-col sm:max-w-[420px]", "data-testid": "draft-changes-panel", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: t('preview.changes.title', { defaultValue: 'Pending changes' }) }), _jsx(SheetDescription, { children: t('preview.changes.description', {
                                 defaultValue: 'What publishing will change. New items are added; updates overwrite the live version.',
-                            }) })] }), _jsx("div", { className: "mt-4 flex flex-col gap-4 overflow-y-auto px-4 pb-6", children: error ? (_jsxs("p", { className: "text-sm text-destructive", children: [t('preview.changes.loadFailed', { defaultValue: 'Could not load pending changes:' }), ' ', error] })) : entries === null ? (_jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), t('preview.changes.loading', { defaultValue: 'Loading pending changes…' })] })) : entries.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('preview.changes.empty', { defaultValue: 'Nothing pending — every draft has been published.' }) })) : ([...byType.entries()].map(([type, items]) => (_jsxs("div", { children: [_jsxs("h4", { className: "mb-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: [type, " \u00B7 ", items.length] }), _jsx("ul", { className: "flex flex-col gap-1", children: items.map((entry) => (_jsxs("li", { className: "flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-sm", children: [entry.kind === 'new' ? (_jsx(FilePlus2, { className: "h-3.5 w-3.5 shrink-0 text-emerald-600" })) : entry.kind === 'update' ? (_jsx(FilePen, { className: "h-3.5 w-3.5 shrink-0 text-amber-600" })) : (_jsx(Loader2, { className: "h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground" })), _jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-xs", children: entry.name }), entry.kind ? (_jsx(Badge, { variant: "outline", className: entry.kind === 'new'
-                                                ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
-                                                : 'border-amber-200 bg-amber-50 text-amber-700', children: entry.kind === 'new'
-                                                ? t('preview.changes.kindNew', { defaultValue: 'New' })
-                                                : t('preview.changes.kindUpdate', { defaultValue: 'Update' }) })) : null] }, `${entry.type}:${entry.name}`))) })] }, type)))) })] }) }));
+                            }) })] }), _jsx("div", { className: "mt-4 flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 pb-6", children: error ? (_jsxs("p", { className: "text-sm text-destructive", children: [t('preview.changes.loadFailed', { defaultValue: 'Could not load pending changes:' }), ' ', error] })) : entries === null ? (_jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), t('preview.changes.loading', { defaultValue: 'Loading pending changes…' })] })) : entries.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: t('preview.changes.empty', { defaultValue: 'Nothing pending — every draft has been published.' }) })) : ([...byType.entries()].map(([type, items]) => (_jsxs("div", { children: [_jsxs("h4", { className: "mb-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: [type, " \u00B7 ", items.length] }), _jsx("ul", { className: "flex flex-col gap-1", children: items.map((entry) => {
+                                    const key = `${entry.type}:${entry.name}`;
+                                    const isExpanded = expanded.has(key);
+                                    return (_jsxs("li", { className: "rounded-md border text-sm", children: [_jsxs("button", { type: "button", onClick: () => toggleExpanded(key), "aria-expanded": isExpanded, className: "flex w-full items-center gap-2 px-2.5 py-1.5 text-left hover:bg-muted/50", "data-testid": "draft-entry-toggle", children: [isExpanded ? (_jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground" })) : (_jsx(ChevronRight, { className: "h-3 w-3 shrink-0 text-muted-foreground" })), entry.kind === 'new' ? (_jsx(FilePlus2, { className: "h-3.5 w-3.5 shrink-0 text-emerald-600" })) : entry.kind === 'update' ? (_jsx(FilePen, { className: "h-3.5 w-3.5 shrink-0 text-amber-600" })) : (_jsx(Loader2, { className: "h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground" })), _jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-xs", children: entry.name }), entry.kind ? (_jsx(Badge, { variant: "outline", className: entry.kind === 'new'
+                                                            ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
+                                                            : 'border-amber-200 bg-amber-50 text-amber-700', children: entry.kind === 'new'
+                                                            ? t('preview.changes.kindNew', { defaultValue: 'New' })
+                                                            : t('preview.changes.kindUpdate', { defaultValue: 'Update' }) })) : null] }), isExpanded && (_jsx("div", { className: "border-t bg-muted/20", children: _jsx(EntryDetail, { entry: entry }) }))] }, key));
+                                }) })] }, type)))) }), onPublish && (entries?.length ?? 0) > 0 && !error && (_jsxs("div", { className: "mt-auto flex flex-col gap-2 border-t px-4 py-3", children: [_jsx("p", { className: "text-xs text-muted-foreground", children: t('preview.changes.confirmNote', {
+                                count: entries.length,
+                                defaultValue: 'Publishing releases all {{count}} pending drafts of this package atomically.',
+                            }) }), _jsxs(Button, { size: "sm", onClick: () => void onPublish(), disabled: publishing, "data-testid": "draft-changes-publish", children: [publishing ? (_jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" })) : (_jsx(Rocket, { className: "mr-1.5 h-3.5 w-3.5" })), t('preview.changes.publishConfirm', { defaultValue: 'Publish all' })] })] }))] }) }));
 }

package/dist/urlParams.d.ts

@@ -0,0 +1,68 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * urlParams — the single registry of RESERVED console URL query params
+ * (objectui#2269 P3; ADR-0054 C3 "URL-addressable state").
+ *
+ * These params form the console's cross-route URL contract: they are read
+ * and written by app-shell chrome (overlays, record surfaces, tabs) and must
+ * never be repurposed by a page/view for something else. Every reader/writer
+ * imports the constant from here — no string literals — so the contract has
+ * ONE definition, collisions are caught at review time, and an AI author
+ * (north star: all metadata is AI-authored) has a single place to learn it.
+ *
+ * | Param       | Meaning                                        | History      |
+ * |-------------|------------------------------------------------|--------------|
+ * | `recordId`  | Record detail DRAWER over a list (light        | push (open)  |
+ * |             | objects; heavy ones use the `/record/:id`      |              |
+ * |             | route instead). URL is the drawer's source of  |              |
+ * |             | truth.                                         |              |
+ * | `form`      | The global record-form overlay: `new` = create,|              |
+ * |             | a record id = edit (framework#2604 D1/D2).     | push (open), |
+ * |             | Back closes the overlay.                       | replace (close) |
+ * | `formObject`| Child-task override for `form`: the object the |              |
+ * |             | overlay edits when it is NOT the route's       | with `form`  |
+ * |             | object (subtable child over a parent detail,   |              |
+ * |             | framework#2604 D3).                            |              |
+ * | `formLink`  | `"<fkField>:<parentId>"` — create-mode parent  |              |
+ * |             | pre-link for a child task; refresh-safe.       | with `form`  |
+ * | `tab`       | Active record-detail tab (stable semantic      | replace      |
+ * |             | values: `details` / `related:<child>` /        |              |
+ * |             | `related` / `activity` / `history`,            |              |
+ * |             | objectui#2257). Never stacks history.          |              |
+ * | `palette`   | Command palette overlay (alias `cmdk`).        | replace      |
+ * | `shortcuts` | Keyboard-shortcuts dialog overlay.             | replace      |
+ *
+ * Push-vs-replace rule of thumb: an overlay the user OPENED (form, drawer)
+ * pushes one entry so browser Back closes it; passive state that tracks an
+ * in-page selection (tab) or transient chrome (palette) replaces, so Back
+ * never pages through it.
+ *
+ * Page-scoped params (`q`, `limit`, `offset`, `view`, `type`, `review`,
+ * `package`, …) belong to their page's own contract and are NOT reserved
+ * here — but they must not collide with the names above.
+ */
+/** Record detail drawer over a list (`?recordId=<id>`). */
+export declare const RECORD_DRAWER_PARAM = "recordId";
+/** Global record-form overlay: `new` | `<recordId>` (framework#2604). */
+export declare const RECORD_FORM_PARAM = "form";
+/** Child-task object override for the record-form overlay (#2604 D3). */
+export declare const RECORD_FORM_OBJECT_PARAM = "formObject";
+/** Child-task parent pre-link `"<fkField>:<parentId>"` (#2604 D3). */
+export declare const RECORD_FORM_LINK_PARAM = "formLink";
+/** Active record-detail tab (objectui#2257; stable semantic values). */
+export declare const RECORD_DETAIL_TAB_PARAM = "tab";
+/** Command palette overlay (ADR-0054 Phase 1; alias `cmdk`). */
+export declare const COMMAND_PALETTE_PARAM = "palette";
+/** Keyboard-shortcuts dialog overlay. */
+export declare const KEYBOARD_SHORTCUTS_PARAM = "shortcuts";
+/**
+ * All reserved params, for collision checks (e.g. a lint or a dev-time
+ * assertion that a page-scoped param doesn't shadow the console contract).
+ */
+export declare const RESERVED_URL_PARAMS: readonly string[];

package/dist/urlParams.js

@@ -0,0 +1,76 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * urlParams — the single registry of RESERVED console URL query params
+ * (objectui#2269 P3; ADR-0054 C3 "URL-addressable state").
+ *
+ * These params form the console's cross-route URL contract: they are read
+ * and written by app-shell chrome (overlays, record surfaces, tabs) and must
+ * never be repurposed by a page/view for something else. Every reader/writer
+ * imports the constant from here — no string literals — so the contract has
+ * ONE definition, collisions are caught at review time, and an AI author
+ * (north star: all metadata is AI-authored) has a single place to learn it.
+ *
+ * | Param       | Meaning                                        | History      |
+ * |-------------|------------------------------------------------|--------------|
+ * | `recordId`  | Record detail DRAWER over a list (light        | push (open)  |
+ * |             | objects; heavy ones use the `/record/:id`      |              |
+ * |             | route instead). URL is the drawer's source of  |              |
+ * |             | truth.                                         |              |
+ * | `form`      | The global record-form overlay: `new` = create,|              |
+ * |             | a record id = edit (framework#2604 D1/D2).     | push (open), |
+ * |             | Back closes the overlay.                       | replace (close) |
+ * | `formObject`| Child-task override for `form`: the object the |              |
+ * |             | overlay edits when it is NOT the route's       | with `form`  |
+ * |             | object (subtable child over a parent detail,   |              |
+ * |             | framework#2604 D3).                            |              |
+ * | `formLink`  | `"<fkField>:<parentId>"` — create-mode parent  |              |
+ * |             | pre-link for a child task; refresh-safe.       | with `form`  |
+ * | `tab`       | Active record-detail tab (stable semantic      | replace      |
+ * |             | values: `details` / `related:<child>` /        |              |
+ * |             | `related` / `activity` / `history`,            |              |
+ * |             | objectui#2257). Never stacks history.          |              |
+ * | `palette`   | Command palette overlay (alias `cmdk`).        | replace      |
+ * | `shortcuts` | Keyboard-shortcuts dialog overlay.             | replace      |
+ *
+ * Push-vs-replace rule of thumb: an overlay the user OPENED (form, drawer)
+ * pushes one entry so browser Back closes it; passive state that tracks an
+ * in-page selection (tab) or transient chrome (palette) replaces, so Back
+ * never pages through it.
+ *
+ * Page-scoped params (`q`, `limit`, `offset`, `view`, `type`, `review`,
+ * `package`, …) belong to their page's own contract and are NOT reserved
+ * here — but they must not collide with the names above.
+ */
+/** Record detail drawer over a list (`?recordId=<id>`). */
+export const RECORD_DRAWER_PARAM = 'recordId';
+/** Global record-form overlay: `new` | `<recordId>` (framework#2604). */
+export const RECORD_FORM_PARAM = 'form';
+/** Child-task object override for the record-form overlay (#2604 D3). */
+export const RECORD_FORM_OBJECT_PARAM = 'formObject';
+/** Child-task parent pre-link `"<fkField>:<parentId>"` (#2604 D3). */
+export const RECORD_FORM_LINK_PARAM = 'formLink';
+/** Active record-detail tab (objectui#2257; stable semantic values). */
+export const RECORD_DETAIL_TAB_PARAM = 'tab';
+/** Command palette overlay (ADR-0054 Phase 1; alias `cmdk`). */
+export const COMMAND_PALETTE_PARAM = 'palette';
+/** Keyboard-shortcuts dialog overlay. */
+export const KEYBOARD_SHORTCUTS_PARAM = 'shortcuts';
+/**
+ * All reserved params, for collision checks (e.g. a lint or a dev-time
+ * assertion that a page-scoped param doesn't shadow the console contract).
+ */
+export const RESERVED_URL_PARAMS = [
+    RECORD_DRAWER_PARAM,
+    RECORD_FORM_PARAM,
+    RECORD_FORM_OBJECT_PARAM,
+    RECORD_FORM_LINK_PARAM,
+    RECORD_DETAIL_TAB_PARAM,
+    COMMAND_PALETTE_PARAM,
+    KEYBOARD_SHORTCUTS_PARAM,
+];

package/dist/utils/appRoute.d.ts

@@ -18,4 +18,19 @@ type AppLike = {
 } & Record<string, unknown>;
 export declare function appRouteSegment(app: AppLike | null | undefined): string | undefined;
 export declare function matchAppBySegment<T extends AppLike>(apps: readonly T[] | null | undefined, seg: string | null | undefined): T | undefined;
+/**
+ * App → Studio reverse bridge (ADR-0080). Resolves a running app to its owning
+ * package's design surface (`/studio/:packageId/data`), or `null` when there is
+ * nothing to open:
+ * - the viewer is not a workspace admin (designing mutates shared package
+ *   metadata, so the entry point is admin-only — mirrors the runtime editors);
+ * - the app has no owning package (runtime/DB apps), or its container is the
+ *   DB-authored `sys_metadata` pseudo-package, which is not a package the
+ *   Studio design surface can open.
+ *
+ * Writability of the target package is NOT checked here — the ADR-0070 D4 gate
+ * stays the server-side authority, and the Studio surface itself renders
+ * read-only packages as browse-only.
+ */
+export declare function appStudioDesignPath(app: AppLike | null | undefined, isWorkspaceAdmin: boolean): string | null;
 export {};

package/dist/utils/appRoute.js

@@ -23,3 +23,25 @@ export function matchAppBySegment(apps, seg) {
         return undefined;
     return apps.find((a) => a?._packageId === seg) ?? apps.find((a) => a?.name === seg);
 }
+/**
+ * App → Studio reverse bridge (ADR-0080). Resolves a running app to its owning
+ * package's design surface (`/studio/:packageId/data`), or `null` when there is
+ * nothing to open:
+ * - the viewer is not a workspace admin (designing mutates shared package
+ *   metadata, so the entry point is admin-only — mirrors the runtime editors);
+ * - the app has no owning package (runtime/DB apps), or its container is the
+ *   DB-authored `sys_metadata` pseudo-package, which is not a package the
+ *   Studio design surface can open.
+ *
+ * Writability of the target package is NOT checked here — the ADR-0070 D4 gate
+ * stays the server-side authority, and the Studio surface itself renders
+ * read-only packages as browse-only.
+ */
+export function appStudioDesignPath(app, isWorkspaceAdmin) {
+    if (!isWorkspaceAdmin)
+        return null;
+    const packageId = app?._packageId;
+    if (typeof packageId !== 'string' || !packageId || packageId === 'sys_metadata')
+        return null;
+    return `/studio/${encodeURIComponent(packageId)}/data`;
+}