@object-ui/app-shell 4.0.1 → 4.0.3

package/CHANGELOG.md

@@ -1,5 +1,75 @@
 # @object-ui/app-shell — Changelog
 
+## 4.0.3
+
+### Patch Changes
+
+- 4be43e2: **Page-mode record forms (`editMode: 'page'`).** New per-object metadata flag that opts a record's create/edit form into a dedicated full-screen route (`/apps/:appName/:objectName/new`, `/apps/:appName/:objectName/record/:recordId/edit`). Two new declarative actions `navigate_create` and `navigate_edit` open these routes from JSON action buttons. Default modal behavior is preserved for objects that do not set `editMode`.
+
+  **`@object-ui/plugin-list` & `@object-ui/plugin-detail`: `ComponentRegistry` singleton fix.** Both plugins' Vite configs now mark all `@object-ui/*` packages as external so each plugin no longer bundles its own private copy of `@object-ui/core`. Cross-plugin component lookups now resolve correctly from the same singleton registry. `plugin-list` dist shrank from multi-MB to 67 kB (gzip 16 kB); `plugin-detail` to 124 kB (gzip 28 kB).
+
+  **`@object-ui/app-shell` `CreateViewDialog` churn fix.** `existingSet` is now memoised on the joined string key of `existingLabels` rather than the raw array reference, preventing the name-suggest `useEffect` from re-firing on every parent render.
+
+  **CI fixes.** `ReportViewer` conditional-formatting test now accepts both `rgb(...)` and hex color representations. `ObjectView` i18n mocks rewritten to mirror the real hook shapes (`useObjectTranslation`, `useObjectLabel`).
+
+- Updated dependencies [4be43e2]
+  - @object-ui/types@4.0.3
+  - @object-ui/core@4.0.3
+  - @object-ui/i18n@4.0.3
+  - @object-ui/react@4.0.3
+  - @object-ui/components@4.0.3
+  - @object-ui/fields@4.0.3
+  - @object-ui/layout@4.0.3
+  - @object-ui/data-objectstack@4.0.3
+  - @object-ui/auth@4.0.3
+  - @object-ui/permissions@4.0.3
+  - @object-ui/plugin-calendar@4.0.3
+  - @object-ui/plugin-charts@4.0.3
+  - @object-ui/plugin-chatbot@4.0.3
+  - @object-ui/plugin-dashboard@4.0.3
+  - @object-ui/plugin-designer@4.0.3
+  - @object-ui/plugin-detail@4.0.3
+  - @object-ui/plugin-form@4.0.3
+  - @object-ui/plugin-grid@4.0.3
+  - @object-ui/plugin-kanban@4.0.3
+  - @object-ui/plugin-list@4.0.3
+  - @object-ui/plugin-report@4.0.3
+  - @object-ui/plugin-view@4.0.3
+  - @object-ui/collaboration@4.0.3
+
+## Unreleased
+
+### Added
+
+- **Page-mode record forms.** Objects can now opt into a route-driven
+  full-screen create/edit experience by setting `editMode: 'page'` on the
+  object metadata (default remains `'modal'`). When opted in, the
+  console mounts two new routes under `/apps/:appName/`:
+  - `:objectName/new` for create
+  - `:objectName/record/:recordId/edit` for edit
+
+  URLs are deep-linkable, refresh-safe, and respect the browser back
+  button. The new `RecordFormPage` view renders inside the existing
+  `ConsoleLayout` chrome and reuses the same `<ObjectForm>` pipeline as
+  the modal flow, so every existing form configuration (sections,
+  visibility expressions, validations, `formType: 'tabbed' | 'wizard'`,
+  …) works without changes.
+
+  Two declarative actions expose the routes for `<action:button>` JSON:
+  - `{ "action": "navigate_create", "params": { "objectName": "..." } }`
+  - `{ "action": "navigate_edit", "params": { "objectName": "...", "recordId": "..." } }`
+
+  When called from inside an `ObjectView` the `objectName` falls back to
+  the action context, so it can be omitted from the params.
+
+  See `content/docs/guide/record-edit-modes.md` for a walkthrough.
+  - New view: `packages/app-shell/src/views/RecordFormPage.tsx`
+  - New helpers: `resolveRecordFormTarget`, `resolveNavigateCreateUrl`,
+    `resolveNavigateEditUrl` in
+    `packages/app-shell/src/utils/recordFormNavigation.ts`
+  - Tests: `RecordFormPage.test.tsx` (6) and
+    `recordFormNavigation.test.ts` (22), all passing.
+
 ## 4.0.1
 
 ### Patch Changes

package/README.md

@@ -175,6 +175,60 @@ See `examples/byo-backend-console` for a complete working example that demonstra
 - Cherry-picking only needed components
 - Building a console in ~100 lines of code
 
+## Record create/edit modes
+
+The default `<DefaultAppContent>` shell mounts a global `<ModalForm>` for
+record create/edit interactions. Each object can opt in to a route-driven
+full-screen experience instead by setting `editMode` on its metadata:
+
+```jsonc
+// objects/account.json
+{
+  "name": "account",
+  "label": "Account",
+  "editMode": "page",        // ← opt-in. Default is "modal".
+  "fields": { /* ... */ }
+}
+```
+
+When `editMode: 'page'` is set, clicking **Create** or **Edit** for an
+`account` record navigates to a dedicated route instead of opening the
+dialog:
+
+| Action | URL |
+|--------|-----|
+| Create | `/apps/:appName/account/new` |
+| Edit   | `/apps/:appName/account/record/:recordId/edit` |
+
+These routes are deep-linkable (refresh-safe), respect the browser back
+button, and render the same `<ObjectForm>` pipeline as the modal — so
+`tabbed`, `wizard`, and section configurations work in both modes.
+
+JSON `<action:button>` schemas can also trigger the page routes directly
+via the action runner, regardless of the object's `editMode`:
+
+```json
+{
+  "type": "action:button",
+  "label": "New Account",
+  "action": { "action": "navigate_create", "params": { "objectName": "account" } }
+}
+```
+
+```json
+{
+  "type": "action:button",
+  "label": "Edit",
+  "action": {
+    "action": "navigate_edit",
+    "params": { "objectName": "account", "recordId": "${record.id}" }
+  }
+}
+```
+
+See [`content/docs/guide/record-edit-modes.md`](../../content/docs/guide/record-edit-modes.md)
+for a longer walkthrough.
+
 <!-- release-metadata:v3.3.0 -->
 
 ## Compatibility

package/dist/console/AppContent.js

@@ -13,13 +13,14 @@ import { useState, useEffect, useCallback, lazy, Suspense, useMemo } from 'react
 import { ModalForm } from '@object-ui/plugin-form';
 import { Empty, EmptyTitle, EmptyDescription, Button } from '@object-ui/components';
 import { toast } from 'sonner';
-import { SchemaRendererProvider, useActionRunner, useGlobalUndo } from '@object-ui/react';
+import { useActionRunner, useGlobalUndo } from '@object-ui/react';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
 import { useAuth } from '@object-ui/auth';
 import { useMetadata } from '../providers/MetadataProvider';
 import { useAdapter } from '../providers/AdapterProvider';
 import { ExpressionProvider, evaluateVisibility } from '../providers/ExpressionProvider';
 import { useRecentItems } from '../hooks/useRecentItems';
+import { resolveRecordFormTarget, resolveNavigateCreateUrl, resolveNavigateEditUrl } from '../utils/recordFormNavigation';
 import { ExpressionEvaluator } from '@object-ui/core';
 // Components (eagerly loaded — always needed)
 import { ConsoleLayout } from '../layout/ConsoleLayout';
@@ -36,6 +37,7 @@ const DashboardView = lazy(() => import('../views/DashboardView').then(m => ({ d
 const PageView = lazy(() => import('../views/PageView').then(m => ({ default: m.PageView })));
 const ReportView = lazy(() => import('../views/ReportView').then(m => ({ default: m.ReportView })));
 const SearchResultsPage = lazy(() => import('../views/SearchResultsPage').then(m => ({ default: m.SearchResultsPage })));
+const RecordFormPage = lazy(() => import('../views/RecordFormPage').then(m => ({ default: m.RecordFormPage })));
 // Designer pages — sourced from @object-ui/plugin-designer so third-party hosts
 // can opt out by not registering these routes.
 const CreateAppPage = lazy(() => import('@object-ui/plugin-designer').then(m => ({ default: m.CreateAppPage })));
@@ -104,13 +106,54 @@ export function AppContent({ extraRoutes, extraRoutesNoApp } = {}) {
             setIsDialogOpen(false);
             return { success: true };
         });
+        // Page-mode navigation handlers — declarative counterparts to the
+        // imperative `handleEdit` callback. These let JSON schemas open the
+        // full-screen create/edit pages directly via `<action:button>` without
+        // any custom code:
+        //   { "action": "navigate_create", "params": { "objectName": "..." } }
+        //   { "action": "navigate_edit",
+        //     "params": { "objectName": "...", "recordId": "..." } }
+        // The `objectName` param falls back to the action context's
+        // `objectName` (set per view) so action buttons mounted inside an
+        // ObjectView can omit it.
+        // NOTE on duplication below: each handler reads `runner.getContext()`
+        // INSIDE its closure (at action-invocation time) rather than once at
+        // registration. Hoisting the call outside the registrations would
+        // freeze the context to whatever it was when the effect last ran,
+        // breaking dynamic per-view `runner.updateContext({ objectName, ... })`
+        // calls (used by ObjectView / RecordDetailView). Keep the call where
+        // it is.
+        runner.registerHandler('navigate_create', async (action) => {
+            const ctx = runner.getContext?.() ?? {};
+            const result = resolveNavigateCreateUrl({
+                action,
+                context: ctx,
+                defaultBaseUrl: `/apps/${appName ?? ''}`,
+            });
+            if (!result.success)
+                return result;
+            navigate(result.url);
+            return { success: true };
+        });
+        runner.registerHandler('navigate_edit', async (action) => {
+            const ctx = runner.getContext?.() ?? {};
+            const result = resolveNavigateEditUrl({
+                action,
+                context: ctx,
+                defaultBaseUrl: `/apps/${appName ?? ''}`,
+            });
+            if (!result.success)
+                return result;
+            navigate(result.url);
+            return { success: true };
+        });
         // NOTE: `flow` actions are handled at the per-view ActionProvider level
         // (RecordDetailView / ObjectView) so they share the same ActionRunner that
         // <action:button> renderers consume via useAction(). Do NOT register a
         // `flow` handler on this top-level useActionRunner — it lives on a
         // different ActionRunner instance and would never be invoked from the
         // record/list action buttons.
-    }, [runner]);
+    }, [runner, navigate, appName]);
     useEffect(() => {
         if (!dataSource)
             return;
@@ -185,6 +228,19 @@ export function AppContent({ extraRoutes, extraRoutesNoApp } = {}) {
         }
     }, [location.pathname, addRecentItem]); // eslint-disable-line react-hooks/exhaustive-deps
     const handleEdit = (record) => {
+        // Page-mode opt-in: when the object metadata declares
+        // `editMode: 'page'`, route to the full-screen create/edit page instead
+        // of opening the global ModalForm. Default behavior (modal) is
+        // preserved for any object without the flag.
+        const target = resolveRecordFormTarget({
+            objectDef: currentObjectDef,
+            baseUrl: activeApp?.name ? `/apps/${activeApp.name}` : '',
+            record,
+        });
+        if (target.kind === 'page') {
+            navigate(target.url);
+            return;
+        }
         setEditingRecord(record);
         setIsDialogOpen(true);
     };
@@ -208,41 +264,41 @@ export function AppContent({ extraRoutes, extraRoutesNoApp } = {}) {
     const expressionUser = user
         ? { name: user.name, email: user.email, role: user.role ?? 'user' }
         : { name: 'Anonymous', email: '', role: 'guest' };
-    return (_jsxs(ExpressionProvider, { user: expressionUser, app: activeApp, data: {}, children: [_jsx(NavigationSyncEffect, {}), _jsxs(ConsoleLayout, { activeAppName: activeApp.name, activeApp: activeApp, onAppChange: handleAppChange, objects: allObjects, connectionState: connectionState, children: [_jsx(CommandPalette, { apps: apps, activeApp: activeApp, objects: allObjects, onAppChange: handleAppChange }), _jsx(KeyboardShortcutsDialog, {}), _jsx(OnboardingWalkthrough, {}), _jsxs(SchemaRendererProvider, { dataSource: dataSource || {}, children: [_jsx(ErrorBoundary, { children: _jsx(Suspense, { fallback: _jsx(LoadingScreen, {}), children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Navigate, { to: findFirstRoute(activeApp.navigation || []), replace: true }) }), _jsx(Route, { path: ":objectName", element: _jsx(ObjectView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit }) }), _jsx(Route, { path: ":objectName/view/:viewId", element: _jsx(ObjectView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit }) }), _jsx(Route, { path: ":objectName/record/:recordId", element: _jsx(RecordDetailView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit }, refreshKey) }), _jsx(Route, { path: "dashboard/:dashboardName", element: _jsx(DashboardView, { dataSource: dataSource }) }), _jsx(Route, { path: "report/:reportName", element: _jsx(ReportView, { dataSource: dataSource }) }), _jsx(Route, { path: "page/:pageName", element: _jsx(PageView, {}) }), _jsx(Route, { path: "design/page/:pageName", element: _jsx(PageDesignPage, {}) }), _jsx(Route, { path: "design/dashboard/:dashboardName", element: _jsx(DashboardDesignPage, {}) }), _jsx(Route, { path: "search", element: _jsx(SearchResultsPage, {}) }), _jsx(Route, { path: "create-app", element: _jsx(CreateAppPage, {}) }), _jsx(Route, { path: "edit-app/:editAppName", element: _jsx(EditAppPage, {}) }), extraRoutes] }) }) }), currentObjectDef && (_jsx(ModalForm, { schema: {
-                                    type: 'object-form',
-                                    formType: 'modal',
-                                    objectName: currentObjectDef.name,
-                                    mode: editingRecord ? 'edit' : 'create',
-                                    recordId: editingRecord?.id,
-                                    title: editingRecord
-                                        ? t('form.editTitle', { object: objectLabel(currentObjectDef) })
-                                        : t('form.createTitle', { object: objectLabel(currentObjectDef) }),
-                                    description: editingRecord
-                                        ? t('form.editDescription', { object: objectLabel(currentObjectDef) })
-                                        : t('form.createDescription', { object: objectLabel(currentObjectDef) }),
-                                    open: isDialogOpen,
-                                    onOpenChange: setIsDialogOpen,
-                                    layout: 'vertical',
-                                    fields: currentObjectDef.fields
-                                        ? (Array.isArray(currentObjectDef.fields)
-                                            ? currentObjectDef.fields
-                                                .filter((f) => {
-                                                if (typeof f === 'string')
-                                                    return true;
-                                                return evaluateVisibility(f.visible, expressionEvaluator);
-                                            })
-                                                .map((f) => typeof f === 'string' ? f : f.name)
-                                            : Object.entries(currentObjectDef.fields)
-                                                .filter(([_, f]) => evaluateVisibility(f.visible, expressionEvaluator))
-                                                .map(([key]) => key))
-                                        : [],
-                                    onSuccess: handleCrudSuccess,
-                                    onCancel: handleDialogCancel,
-                                    showSubmit: true,
-                                    showCancel: true,
-                                    submitText: t('form.saveRecord'),
-                                    cancelText: t('common.cancel'),
-                                }, dataSource: dataSource }, editingRecord?.id || 'new'))] })] })] }));
+    return (_jsxs(ExpressionProvider, { user: expressionUser, app: activeApp, data: {}, children: [_jsx(NavigationSyncEffect, {}), _jsxs(ConsoleLayout, { activeAppName: activeApp.name, activeApp: activeApp, onAppChange: handleAppChange, objects: allObjects, connectionState: connectionState, children: [_jsx(CommandPalette, { apps: apps, activeApp: activeApp, objects: allObjects, onAppChange: handleAppChange }), _jsx(KeyboardShortcutsDialog, {}), _jsx(OnboardingWalkthrough, {}), _jsx(ErrorBoundary, { children: _jsx(Suspense, { fallback: _jsx(LoadingScreen, {}), children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Navigate, { to: findFirstRoute(activeApp.navigation || []), replace: true }) }), _jsx(Route, { path: ":objectName", element: _jsx(ObjectView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit }) }), _jsx(Route, { path: ":objectName/new", element: _jsx(RecordFormPage, { mode: "create" }) }), _jsx(Route, { path: ":objectName/view/:viewId", element: _jsx(ObjectView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit }) }), _jsx(Route, { path: ":objectName/record/:recordId", element: _jsx(RecordDetailView, { dataSource: dataSource, objects: allObjects, onEdit: handleEdit }, refreshKey) }), _jsx(Route, { path: ":objectName/record/:recordId/edit", element: _jsx(RecordFormPage, { mode: "edit" }) }), _jsx(Route, { path: "dashboard/:dashboardName", element: _jsx(DashboardView, { dataSource: dataSource }) }), _jsx(Route, { path: "report/:reportName", element: _jsx(ReportView, { dataSource: dataSource }) }), _jsx(Route, { path: "page/:pageName", element: _jsx(PageView, {}) }), _jsx(Route, { path: "design/page/:pageName", element: _jsx(PageDesignPage, {}) }), _jsx(Route, { path: "design/dashboard/:dashboardName", element: _jsx(DashboardDesignPage, {}) }), _jsx(Route, { path: "search", element: _jsx(SearchResultsPage, {}) }), _jsx(Route, { path: "create-app", element: _jsx(CreateAppPage, {}) }), _jsx(Route, { path: "edit-app/:editAppName", element: _jsx(EditAppPage, {}) }), extraRoutes] }) }) }), currentObjectDef && (_jsx(ModalForm, { schema: {
+                            type: 'object-form',
+                            formType: 'modal',
+                            objectName: currentObjectDef.name,
+                            mode: editingRecord ? 'edit' : 'create',
+                            recordId: editingRecord?.id,
+                            title: editingRecord
+                                ? t('form.editTitle', { object: objectLabel(currentObjectDef) })
+                                : t('form.createTitle', { object: objectLabel(currentObjectDef) }),
+                            description: editingRecord
+                                ? t('form.editDescription', { object: objectLabel(currentObjectDef) })
+                                : t('form.createDescription', { object: objectLabel(currentObjectDef) }),
+                            open: isDialogOpen,
+                            onOpenChange: setIsDialogOpen,
+                            layout: 'vertical',
+                            fields: currentObjectDef.fields
+                                ? (Array.isArray(currentObjectDef.fields)
+                                    ? currentObjectDef.fields
+                                        .filter((f) => {
+                                        if (typeof f === 'string')
+                                            return true;
+                                        return evaluateVisibility(f.visible, expressionEvaluator);
+                                    })
+                                        .map((f) => typeof f === 'string' ? f : f.name)
+                                    : Object.entries(currentObjectDef.fields)
+                                        .filter(([_, f]) => evaluateVisibility(f.visible, expressionEvaluator))
+                                        .map(([key]) => key))
+                                : [],
+                            onSuccess: handleCrudSuccess,
+                            onCancel: handleDialogCancel,
+                            showSubmit: true,
+                            showCancel: true,
+                            submitText: t('form.saveRecord'),
+                            cancelText: t('common.cancel'),
+                        }, dataSource: dataSource }, editingRecord?.id || 'new'))] })] }));
 }
 function findFirstRoute(items) {
     if (!items || items.length === 0)

package/dist/console/ConsoleShell.js

@@ -13,6 +13,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Suspense } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 import { AuthGuard, useAuth } from '@object-ui/auth';
+import { SchemaRendererProvider } from '@object-ui/react';
 import { AdapterProvider, useAdapter } from '../providers/AdapterProvider';
 import { MetadataProvider, useMetadata } from '../providers/MetadataProvider';
 import { NavigationProvider } from '../context/NavigationContext';
@@ -50,7 +51,9 @@ function ConnectedShellInner({ children }) {
     const adapter = useAdapter();
     if (!adapter)
         return _jsx(LoadingFallback, {});
-    return _jsx(MetadataProvider, { adapter: adapter, children: children });
+    // Expose the adapter via SchemaRendererContext so descendant hooks like
+    // useDiscovery() (used to gate the global AI chatbot) can resolve it.
+    return (_jsx(SchemaRendererProvider, { dataSource: adapter, children: _jsx(MetadataProvider, { adapter: adapter, children: children }) }));
 }
 /**
  * RequireOrganization — redirects to /organizations when the multi-tenant

package/dist/console/home/HomeLayout.js

@@ -8,13 +8,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * @module
  */
-import { useEffect } from 'react';
+import { useEffect, Suspense, lazy } from 'react';
 import { useNavigationContext } from '../../context/NavigationContext';
 import { AppHeader } from '../../layout/AppHeader';
+import { useDiscovery } from '@object-ui/react';
+// Lazy-load the chatbot so its heavy markdown deps stay out of the initial
+// paint until the AI assistant is actually enabled.
+const ConsoleFloatingChatbot = lazy(() => import('../../layout/ConsoleFloatingChatbot'));
 export function HomeLayout({ children }) {
     const { setContext } = useNavigationContext();
+    const { isAiEnabled } = useDiscovery();
+    // Render the chatbot whenever AI is reachable. If the developer has explicitly
+    // configured `VITE_AI_BASE_URL`, trust that opt-in even when discovery
+    // reports AI as disabled (e.g. framework started without `--preset full`).
+    const aiBaseUrlConfigured = Boolean(import.meta.env?.VITE_AI_BASE_URL);
+    const showChatbot = isAiEnabled || aiBaseUrlConfigured;
     useEffect(() => {
         setContext('home');
     }, [setContext]);
-    return (_jsxs("div", { className: "flex min-h-svh w-full flex-col bg-background", "data-testid": "home-layout", children: [_jsx("header", { className: "sticky top-0 z-30 flex h-14 w-full shrink-0 items-center gap-2 border-b bg-background px-2 sm:px-4", children: _jsx(AppHeader, { variant: "home" }) }), _jsx("main", { className: "flex-1 min-w-0 overflow-auto", children: children })] }));
+    return (_jsxs("div", { className: "flex min-h-svh w-full flex-col bg-background", "data-testid": "home-layout", children: [_jsx("header", { className: "sticky top-0 z-30 flex h-14 w-full shrink-0 items-center gap-2 border-b bg-background px-2 sm:px-4", children: _jsx(AppHeader, { variant: "home" }) }), _jsx("main", { className: "flex-1 min-w-0 overflow-auto", children: children }), showChatbot && (_jsx(Suspense, { fallback: null, children: _jsx(ConsoleFloatingChatbot, { appLabel: "Workspace", objects: [] }) }))] }));
 }

package/dist/index.d.ts

@@ -22,7 +22,8 @@ export { ConsoleShell, ConnectedShell, RequireOrganization, AuthenticatedRoute,
 export { ConsoleLayout, AppHeader, AppSidebar, UnifiedSidebar, AppSwitcher, ConnectionStatus, ActivityFeed, LocaleSwitcher, ModeToggle, AuthPageLayout, } from './layout';
 export type { ActivityItem } from './layout';
 export { CommandPalette, KeyboardShortcutsDialog, OnboardingWalkthrough, ConditionalAuthWrapper, ConsoleToaster, ErrorBoundary, LoadingScreen, ThemeProvider, useTheme, } from './chrome';
-export { ObjectView, RecordDetailView, DashboardView, PageView, ReportView, SearchResultsPage, ViewConfigPanel, } from './views';
+export { ObjectView, RecordDetailView, RecordFormPage, DashboardView, PageView, ReportView, SearchResultsPage, ViewConfigPanel, } from './views';
+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';

package/dist/index.js

@@ -25,7 +25,7 @@ export { ConsoleLayout, AppHeader, AppSidebar, UnifiedSidebar, AppSwitcher, Conn
 // Top-level chrome (dialogs, providers, error boundaries)
 export { CommandPalette, KeyboardShortcutsDialog, OnboardingWalkthrough, ConditionalAuthWrapper, ConsoleToaster, ErrorBoundary, LoadingScreen, ThemeProvider, useTheme, } from './chrome';
 // Standard inner-SPA views
-export { ObjectView, RecordDetailView, DashboardView, PageView, ReportView, SearchResultsPage, ViewConfigPanel, } from './views';
+export { ObjectView, RecordDetailView, RecordFormPage, DashboardView, PageView, ReportView, SearchResultsPage, ViewConfigPanel, } from './views';
 // Hooks
 export { useFavorites, useMetadataService, useNavPins, useNavigationSync, NavigationSyncEffect, addNavigationItem, removeNavigationItems, renameNavigationItems, navigationEqual, generateNavId, useResponsiveSidebar, } from './hooks';
 // Context providers

package/dist/layout/ConsoleFloatingChatbot.d.ts

@@ -5,6 +5,13 @@ interface ConsoleObject {
 export interface ConsoleFloatingChatbotProps {
     appLabel: string;
     objects: ConsoleObject[];
+    /**
+     * Base URL of the AI service. Defaults to `${VITE_SERVER_URL}/api/v1/ai`
+     * (or the relative `/api/v1/ai` when no server URL is configured).
+     */
+    apiBase?: string;
+    /** Default agent name to select on first render. */
+    defaultAgent?: string;
 }
-export default function ConsoleFloatingChatbot({ appLabel, objects }: ConsoleFloatingChatbotProps): import("react/jsx-runtime").JSX.Element;
+export default function ConsoleFloatingChatbot({ appLabel, objects, apiBase: apiBaseProp, defaultAgent: defaultAgentProp, }: ConsoleFloatingChatbotProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/layout/ConsoleFloatingChatbot.js

@@ -1,27 +1,96 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FloatingChatbot, useObjectChat } from '@object-ui/plugin-chatbot';
-export default function ConsoleFloatingChatbot({ appLabel, objects }) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ConsoleFloatingChatbot
+ *
+ * Wires the global FAB chatbot to the framework's `@objectstack/service-ai`
+ * backend (the `/api/v1/ai/agents/:agentName/chat` Vercel Data Stream
+ * endpoint) and exposes an in-header agent picker.
+ *
+ * The chatbot pulls in `react-markdown` + `micromark` (~150 KB) which is
+ * unused on every page until the AI assistant is enabled, so deferring it
+ * keeps those bytes off the initial paint.
+ * @module
+ */
+import React from 'react';
+import { FloatingChatbot, useObjectChat, useAgents, } from '@object-ui/plugin-chatbot';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@object-ui/components';
+const DEFAULT_AI_PATH = '/api/v1/ai';
+function resolveApiBase(explicit) {
+    if (explicit)
+        return explicit.replace(/\/$/, '');
+    const env = import.meta.env ?? {};
+    const fromEnv = env.VITE_AI_BASE_URL;
+    if (fromEnv)
+        return fromEnv.replace(/\/$/, '');
+    const serverUrl = env.VITE_SERVER_URL ?? '';
+    return `${serverUrl.replace(/\/$/, '')}${DEFAULT_AI_PATH}`;
+}
+function ChatbotInner({ appLabel, objects, agents, agentsLoading, agentsError, activeAgent, onAgentChange, chatApi, }) {
     const objectNames = objects.map((o) => o.label || o.name).join(', ');
+    const activeAgentLabel = React.useMemo(() => {
+        const found = agents.find((a) => a.name === activeAgent);
+        return found?.label ?? activeAgent ?? appLabel;
+    }, [agents, activeAgent, appLabel]);
+    const welcomeContent = activeAgent
+        ? `Hello! I'm **${activeAgentLabel}**, your ${appLabel} assistant. How can I help you today?`
+        : `Hello! I'm your **${appLabel}** assistant. ${agentsError ? '(Backend unreachable — running in offline demo mode.)' : ''}`;
     const { messages, isLoading, error, sendMessage, stop, reload, clear, } = useObjectChat({
+        api: chatApi,
+        conversationId: activeAgent ? `${appLabel}:${activeAgent}` : undefined,
+        body: {
+            context: {
+                activeApp: appLabel,
+                objects: objects.map((o) => ({ name: o.name, label: o.label })),
+                agentName: activeAgent,
+            },
+        },
         initialMessages: [
             {
                 id: 'welcome',
                 role: 'assistant',
-                content: `Hello! I'm your **${appLabel}** assistant. How can I help you today?`,
+                content: welcomeContent,
             },
         ],
-        autoResponse: true,
+        // Local-mode fallback: only used when `chatApi` is undefined (no agent
+        // resolved yet, or no backend available). Keeps the UI usable.
+        autoResponse: !chatApi,
         autoResponseText: objectNames
             ? `I can help you work with ${objectNames}. What would you like to do?`
-            : 'Thanks for your message! I\'m here to help you navigate and manage your data.',
-        autoResponseDelay: 800,
+            : "Thanks for your message! I'm here to help you navigate and manage your data.",
+        autoResponseDelay: 600,
     });
+    const headerExtra = agents.length > 0 ? (_jsxs(Select, { value: activeAgent, onValueChange: onAgentChange, disabled: agentsLoading, children: [_jsx(SelectTrigger, { className: "h-7 w-[180px] text-xs", "data-testid": "floating-chatbot-agent-picker", children: _jsx(SelectValue, { placeholder: "Choose agent..." }) }), _jsx(SelectContent, { align: "end", children: agents.map((agent) => (_jsxs(SelectItem, { value: agent.name, className: "text-xs", children: [_jsx("span", { className: "font-medium", children: agent.label }), agent.description ? (_jsx("span", { className: "block text-muted-foreground text-[10px] truncate max-w-[220px]", children: agent.description })) : null] }, agent.name))) })] })) : null;
     return (_jsx(FloatingChatbot, { floatingConfig: {
             position: 'bottom-right',
             defaultOpen: false,
-            panelWidth: 400,
-            panelHeight: 520,
+            panelWidth: 420,
+            panelHeight: 560,
             title: `${appLabel} Assistant`,
             triggerSize: 56,
-        }, messages: messages, placeholder: "Ask anything...", onSendMessage: (content) => sendMessage(content), onClear: clear, onStop: isLoading ? stop : undefined, onReload: reload, isLoading: isLoading, error: error, enableMarkdown: true }));
+        }, headerExtra: headerExtra, messages: messages, placeholder: activeAgent
+            ? `Ask ${activeAgentLabel}...`
+            : agentsLoading
+                ? 'Loading agents...'
+                : 'Ask anything...', onSendMessage: (content) => sendMessage(content), onClear: clear, onStop: isLoading ? stop : undefined, onReload: reload, isLoading: isLoading, error: error, enableMarkdown: true }));
+}
+export default function ConsoleFloatingChatbot({ appLabel, objects, apiBase: apiBaseProp, defaultAgent: defaultAgentProp, }) {
+    const apiBase = React.useMemo(() => resolveApiBase(apiBaseProp), [apiBaseProp]);
+    const env = import.meta.env ?? {};
+    const envDefaultAgent = env.VITE_AI_DEFAULT_AGENT;
+    const { agents, isLoading: agentsLoading, error: agentsError } = useAgents({ apiBase });
+    const [activeAgent, setActiveAgent] = React.useState(undefined);
+    React.useEffect(() => {
+        if (!activeAgent && agents.length > 0) {
+            const preferred = defaultAgentProp ?? envDefaultAgent;
+            const match = preferred ? agents.find((a) => a.name === preferred) : undefined;
+            setActiveAgent((match ?? agents[0]).name);
+        }
+    }, [agents, activeAgent, defaultAgentProp, envDefaultAgent]);
+    const chatApi = activeAgent
+        ? `${apiBase}/agents/${encodeURIComponent(activeAgent)}/chat`
+        : undefined;
+    // `key` forces a clean remount whenever the active agent (and therefore the
+    // chat API URL) changes — required because `useObjectChat` locks its mode
+    // (api vs local) on first render.
+    return (_jsx(ChatbotInner, { appLabel: appLabel, objects: objects, agents: agents, agentsLoading: agentsLoading, agentsError: agentsError, activeAgent: activeAgent, onAgentChange: setActiveAgent, chatApi: chatApi }, chatApi ?? 'local'));
 }

package/dist/layout/ConsoleLayout.js

@@ -29,6 +29,10 @@ function ConsoleLayoutInner({ children }) {
 export function ConsoleLayout({ children, activeAppName, activeApp, onAppChange, objects, connectionState }) {
     const appLabel = resolveI18nLabel(activeApp?.label) || activeAppName;
     const { isAiEnabled } = useDiscovery();
+    // Trust an explicit `VITE_AI_BASE_URL` opt-in even when discovery reports
+    // AI as disabled (e.g. framework started without `--preset full`).
+    const aiBaseUrlConfigured = Boolean(import.meta.env?.VITE_AI_BASE_URL);
+    const showChatbot = isAiEnabled || aiBaseUrlConfigured;
     const { setContext, setCurrentAppName } = useNavigationContext();
     // Set navigation context to 'app' when this layout mounts
     useEffect(() => {
@@ -45,5 +49,5 @@ export function ConsoleLayout({ children, activeAppName, activeApp, onAppChange,
                     ? `${resolveI18nLabel(activeApp.label)} — ObjectStack Console`
                     : undefined,
             }
-            : undefined, children: [_jsx(ConsoleLayoutInner, { children: children }), isAiEnabled && (_jsx(Suspense, { fallback: null, children: _jsx(ConsoleFloatingChatbot, { appLabel: appLabel, objects: objects }) }))] }));
+            : undefined, children: [_jsx(ConsoleLayoutInner, { children: children }), showChatbot && (_jsx(Suspense, { fallback: null, children: _jsx(ConsoleFloatingChatbot, { appLabel: appLabel, objects: objects }) }))] }));
 }

package/dist/utils/index.d.ts

@@ -1,6 +1,8 @@
 /**
  * Utility functions for ObjectStack Console
  */
+export { resolveRecordFormTarget, } from './recordFormNavigation';
+export type { ObjectDefinitionForNavigation, RecordFormTarget, } from './recordFormNavigation';
 /**
  * Resolves an I18nLabel to a plain string.
  * I18nLabel can be either a string or an object { key, defaultValue?, params? }.

package/dist/utils/index.js

@@ -1,6 +1,7 @@
 /**
  * Utility functions for ObjectStack Console
  */
+export { resolveRecordFormTarget, } from './recordFormNavigation';
 /**
  * Resolves an I18nLabel to a plain string.
  * I18nLabel can be either a string or an object { key, defaultValue?, params? }.

package/dist/utils/recordFormNavigation.d.ts

@@ -0,0 +1,130 @@
+/**
+ * Resolvers for record-form navigation targets.
+ *
+ * Pure helpers extracted from `AppContent.tsx` so the routing rules behind
+ * the modal-vs-page decision are unit-testable in isolation. Keep this file
+ * free of React / router imports — it must run in a node test environment.
+ *
+ * @module utils/recordFormNavigation
+ */
+/**
+ * Subset of the object metadata shape consumed by the resolver. Mirrors the
+ * fields read from the runtime objects list (`useMetadata().objects`).
+ */
+export interface ObjectDefinitionForNavigation {
+    /** API name used in URLs. */
+    name: string;
+    /** Optional UI mode override for create/edit interactions. */
+    editMode?: 'modal' | 'page';
+}
+/**
+ * Result of the modal-vs-page decision. `kind: 'modal'` means the caller
+ * should open the global `<ModalForm>`; `kind: 'page'` means the caller
+ * should `navigate(url)` to the full-screen create/edit route.
+ */
+export type RecordFormTarget = {
+    kind: 'modal';
+} | {
+    kind: 'page';
+    url: string;
+};
+/**
+ * Build a record-form navigation target.
+ *
+ * Returns:
+ *   - `{ kind: 'modal' }` when the object metadata does not opt in to page
+ *     mode (default behavior — preserves backward compatibility).
+ *   - `{ kind: 'page', url }` when `objectDef.editMode === 'page'`. The
+ *     URL points at `/{baseUrl}/{objectName}/new` for create, or
+ *     `/{baseUrl}/{objectName}/record/{recordId}/edit` for edit. The
+ *     `recordId` is derived from `record.id` or `record._id`, falling
+ *     back to create-mode if neither is present.
+ *
+ * Notes:
+ *   - Returns `{ kind: 'modal' }` when `objectDef` is missing or has no
+ *     `name` — the caller (AppContent) treats this as "no actionable
+ *     state" and falls back to the existing modal flow.
+ *   - `recordId` is URL-encoded so non-ASCII / reserved characters in
+ *     object IDs (e.g. UUIDs with `:` separators) are safe.
+ */
+export declare function resolveRecordFormTarget(opts: {
+    objectDef: ObjectDefinitionForNavigation | null | undefined;
+    baseUrl: string;
+    record: {
+        id?: string | number;
+        _id?: string | number;
+    } | null | undefined;
+}): RecordFormTarget;
+/**
+ * Action descriptor accepted by the navigate-create / navigate-edit
+ * handlers. Loose-typed because the same shape is constructed dynamically
+ * from JSON metadata at runtime and we want the helpers to be tolerant of
+ * legacy or hand-authored inputs.
+ */
+export interface NavigationActionDef {
+    /** Optional explicit object name (overrides any context). */
+    objectName?: string;
+    /** Optional explicit record id (only meaningful for `navigate_edit`). */
+    recordId?: string | number;
+    /** Standard params bag — preferred location for objectName / recordId. */
+    params?: {
+        objectName?: string;
+        recordId?: string | number;
+        [key: string]: any;
+    };
+}
+/**
+ * Optional context typically supplied by an `ActionRunner` (e.g. when the
+ * action button is mounted inside an `ObjectView`, the view registers its
+ * `objectName` and `baseUrl` on the runner so action JSON can omit them).
+ *
+ * Tolerant of additional unknown keys because the upstream
+ * `ActionRunner.getContext()` returns a generic `ActionContext` with an
+ * open index signature; we only read the two fields we care about.
+ */
+export interface NavigationActionContext {
+    objectName?: string;
+    baseUrl?: string;
+    [key: string]: unknown;
+}
+export type NavigationActionResult = {
+    success: true;
+    url: string;
+} | {
+    success: false;
+    error: string;
+};
+/**
+ * Resolve the URL for a `navigate_create` action.
+ *
+ * Order of precedence for `objectName`:
+ *   1. `action.params.objectName`
+ *   2. `action.objectName`
+ *   3. `context.objectName`
+ *
+ * `baseUrl` falls back to `context.baseUrl`, then to the supplied
+ * `defaultBaseUrl` (typically `/apps/{appName}`).
+ *
+ * Returns `{ success: false }` with a descriptive error when `objectName`
+ * cannot be resolved — the caller (`ActionRunner`) surfaces this to the UI.
+ */
+export declare function resolveNavigateCreateUrl(opts: {
+    action: NavigationActionDef;
+    context?: NavigationActionContext;
+    defaultBaseUrl: string;
+}): NavigationActionResult;
+/**
+ * Resolve the URL for a `navigate_edit` action.
+ *
+ * Same `objectName` precedence as {@link resolveNavigateCreateUrl}.
+ * `recordId` is read from `action.params.recordId` or `action.recordId`
+ * (no context fallback — record ids are intrinsically per-action).
+ *
+ * Returns `{ success: false }` with a descriptive error when either
+ * `objectName` or `recordId` is missing.
+ */
+export declare function resolveNavigateEditUrl(opts: {
+    action: NavigationActionDef;
+    context?: NavigationActionContext;
+    defaultBaseUrl: string;
+}): NavigationActionResult;

package/dist/utils/recordFormNavigation.js

@@ -0,0 +1,96 @@
+/**
+ * Resolvers for record-form navigation targets.
+ *
+ * Pure helpers extracted from `AppContent.tsx` so the routing rules behind
+ * the modal-vs-page decision are unit-testable in isolation. Keep this file
+ * free of React / router imports — it must run in a node test environment.
+ *
+ * @module utils/recordFormNavigation
+ */
+/**
+ * Build a record-form navigation target.
+ *
+ * Returns:
+ *   - `{ kind: 'modal' }` when the object metadata does not opt in to page
+ *     mode (default behavior — preserves backward compatibility).
+ *   - `{ kind: 'page', url }` when `objectDef.editMode === 'page'`. The
+ *     URL points at `/{baseUrl}/{objectName}/new` for create, or
+ *     `/{baseUrl}/{objectName}/record/{recordId}/edit` for edit. The
+ *     `recordId` is derived from `record.id` or `record._id`, falling
+ *     back to create-mode if neither is present.
+ *
+ * Notes:
+ *   - Returns `{ kind: 'modal' }` when `objectDef` is missing or has no
+ *     `name` — the caller (AppContent) treats this as "no actionable
+ *     state" and falls back to the existing modal flow.
+ *   - `recordId` is URL-encoded so non-ASCII / reserved characters in
+ *     object IDs (e.g. UUIDs with `:` separators) are safe.
+ */
+export function resolveRecordFormTarget(opts) {
+    const { objectDef, baseUrl, record } = opts;
+    if (!objectDef?.name || objectDef.editMode !== 'page') {
+        return { kind: 'modal' };
+    }
+    const rawId = record?.id ?? record?._id;
+    if (record && rawId != null && rawId !== '') {
+        const encoded = encodeURIComponent(String(rawId));
+        return {
+            kind: 'page',
+            url: `${baseUrl}/${objectDef.name}/record/${encoded}/edit`,
+        };
+    }
+    return { kind: 'page', url: `${baseUrl}/${objectDef.name}/new` };
+}
+/**
+ * Resolve the URL for a `navigate_create` action.
+ *
+ * Order of precedence for `objectName`:
+ *   1. `action.params.objectName`
+ *   2. `action.objectName`
+ *   3. `context.objectName`
+ *
+ * `baseUrl` falls back to `context.baseUrl`, then to the supplied
+ * `defaultBaseUrl` (typically `/apps/{appName}`).
+ *
+ * Returns `{ success: false }` with a descriptive error when `objectName`
+ * cannot be resolved — the caller (`ActionRunner`) surfaces this to the UI.
+ */
+export function resolveNavigateCreateUrl(opts) {
+    const { action, context = {}, defaultBaseUrl } = opts;
+    const objectName = action.params?.objectName ?? action.objectName ?? context.objectName;
+    const baseUrl = context.baseUrl ?? defaultBaseUrl;
+    if (!objectName) {
+        return {
+            success: false,
+            error: 'navigate_create: objectName is required',
+        };
+    }
+    return { success: true, url: `${baseUrl}/${objectName}/new` };
+}
+/**
+ * Resolve the URL for a `navigate_edit` action.
+ *
+ * Same `objectName` precedence as {@link resolveNavigateCreateUrl}.
+ * `recordId` is read from `action.params.recordId` or `action.recordId`
+ * (no context fallback — record ids are intrinsically per-action).
+ *
+ * Returns `{ success: false }` with a descriptive error when either
+ * `objectName` or `recordId` is missing.
+ */
+export function resolveNavigateEditUrl(opts) {
+    const { action, context = {}, defaultBaseUrl } = opts;
+    const objectName = action.params?.objectName ?? action.objectName ?? context.objectName;
+    const recordId = action.params?.recordId ?? action.recordId;
+    const baseUrl = context.baseUrl ?? defaultBaseUrl;
+    if (!objectName || recordId == null || recordId === '') {
+        return {
+            success: false,
+            error: 'navigate_edit: objectName and recordId are required',
+        };
+    }
+    const encoded = encodeURIComponent(String(recordId));
+    return {
+        success: true,
+        url: `${baseUrl}/${objectName}/record/${encoded}/edit`,
+    };
+}

package/dist/views/RecordFormPage.d.ts

@@ -0,0 +1,42 @@
+/**
+ * RecordFormPage Component
+ *
+ * Renders a full-screen create or edit page for a record. This is the
+ * page-mode counterpart to the global `ModalForm` mounted by `AppContent`
+ * for objects whose metadata declares `editMode: 'page'`.
+ *
+ * Routes (mounted by `AppContent`):
+ *   - `/apps/:appName/:objectName/new`              — create mode
+ *   - `/apps/:appName/:objectName/record/:recordId/edit` — edit mode
+ *
+ * Behavior:
+ *   - Resolves the object definition via `useMetadata()`. While metadata is
+ *     still loading the page renders a `SkeletonDetail` to avoid a flash of
+ *     "Object Not Found".
+ *   - Delegates form rendering and data fetching to `<ObjectForm>` from
+ *     `@object-ui/plugin-form` with `formType: 'simple'`. ObjectForm itself
+ *     fetches the existing record (in edit mode) via `dataSource.findOne`,
+ *     so this page does not need to manage its own loading state for
+ *     record data.
+ *   - On success / cancel, navigates back if the user has history, otherwise
+ *     falls back to a sensible parent route (record detail in edit mode,
+ *     object list in create mode). Cancel always navigates back without a
+ *     toast.
+ *   - Wraps the form in a sticky page header (back button + title) for a
+ *     consistent full-screen chrome.
+ *
+ * @module views/RecordFormPage
+ */
+export interface RecordFormPageProps {
+    /** Form mode — `'create'` for the `/new` route, `'edit'` for the `/edit` route. */
+    mode: 'create' | 'edit';
+}
+/**
+ * Full-screen record create/edit page.
+ *
+ * Reads `:objectName` (and `:recordId` when editing) from the URL and
+ * resolves the object definition. Renders an `<ObjectForm>` configured with
+ * `formType: 'simple'` (i.e. a flat in-page form), wrapped in a page header
+ * that mirrors the look of `RecordDetailView`.
+ */
+export declare function RecordFormPage({ mode }: RecordFormPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/views/RecordFormPage.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RecordFormPage Component
+ *
+ * Renders a full-screen create or edit page for a record. This is the
+ * page-mode counterpart to the global `ModalForm` mounted by `AppContent`
+ * for objects whose metadata declares `editMode: 'page'`.
+ *
+ * Routes (mounted by `AppContent`):
+ *   - `/apps/:appName/:objectName/new`              — create mode
+ *   - `/apps/:appName/:objectName/record/:recordId/edit` — edit mode
+ *
+ * Behavior:
+ *   - Resolves the object definition via `useMetadata()`. While metadata is
+ *     still loading the page renders a `SkeletonDetail` to avoid a flash of
+ *     "Object Not Found".
+ *   - Delegates form rendering and data fetching to `<ObjectForm>` from
+ *     `@object-ui/plugin-form` with `formType: 'simple'`. ObjectForm itself
+ *     fetches the existing record (in edit mode) via `dataSource.findOne`,
+ *     so this page does not need to manage its own loading state for
+ *     record data.
+ *   - On success / cancel, navigates back if the user has history, otherwise
+ *     falls back to a sensible parent route (record detail in edit mode,
+ *     object list in create mode). Cancel always navigates back without a
+ *     toast.
+ *   - Wraps the form in a sticky page header (back button + title) for a
+ *     consistent full-screen chrome.
+ *
+ * @module views/RecordFormPage
+ */
+import { useCallback, useMemo } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import { ObjectForm } from '@object-ui/plugin-form';
+import { Button, Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { ArrowLeft, Database } from 'lucide-react';
+import { toast } from 'sonner';
+import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
+import { useMetadata } from '../providers/MetadataProvider';
+import { useAdapter } from '../providers/AdapterProvider';
+import { ExpressionProvider, evaluateVisibility } from '../providers/ExpressionProvider';
+import { SkeletonDetail } from '../skeletons';
+import { useAuth } from '@object-ui/auth';
+import { ExpressionEvaluator } from '@object-ui/core';
+/**
+ * Full-screen record create/edit page.
+ *
+ * Reads `:objectName` (and `:recordId` when editing) from the URL and
+ * resolves the object definition. Renders an `<ObjectForm>` configured with
+ * `formType: 'simple'` (i.e. a flat in-page form), wrapped in a page header
+ * that mirrors the look of `RecordDetailView`.
+ */
+export function RecordFormPage({ mode }) {
+    const { appName, objectName, recordId } = useParams();
+    const navigate = useNavigate();
+    const dataSource = useAdapter();
+    const { objects, loading: metadataLoading } = useMetadata();
+    const { t } = useObjectTranslation();
+    const { objectLabel } = useObjectLabel();
+    const { user } = useAuth();
+    const objectDef = useMemo(() => objects.find((o) => o.name === objectName), [objects, objectName]);
+    const baseUrl = `/apps/${appName}`;
+    const objectListUrl = `${baseUrl}/${objectName}`;
+    const recordDetailUrl = mode === 'edit' && recordId
+        ? `${baseUrl}/${objectName}/record/${encodeURIComponent(recordId)}`
+        : objectListUrl;
+    /**
+     * Navigate back to the most relevant location.
+     * Prefer `history.back()` so users return to the exact list/view they came
+     * from (preserving filters, scroll position, etc.). Fall back to the
+     * record detail (edit mode) or list (create mode) when there is no
+     * history entry — happens on direct/refreshed loads of the URL.
+     */
+    const goBack = useCallback(() => {
+        if (typeof window !== 'undefined' && window.history.length > 1) {
+            navigate(-1);
+        }
+        else {
+            navigate(recordDetailUrl, { replace: true });
+        }
+    }, [navigate, recordDetailUrl]);
+    const label = objectDef ? objectLabel(objectDef) : objectName ?? '';
+    const pageTitle = mode === 'create'
+        ? t('form.createTitle', { object: label, defaultValue: `New ${label}` })
+        : t('form.editTitle', { object: label, defaultValue: `Edit ${label}` });
+    const handleSuccess = useCallback(() => {
+        toast.success(mode === 'create'
+            ? t('form.createSuccess', {
+                object: label,
+                defaultValue: `${label} created successfully`,
+            })
+            : t('form.updateSuccess', {
+                object: label,
+                defaultValue: `${label} updated successfully`,
+            }));
+        goBack();
+    }, [mode, t, label, goBack]);
+    const handleCancel = useCallback(() => {
+        goBack();
+    }, [goBack]);
+    // Authenticated-user descriptor — shared by the ExpressionEvaluator (used
+    // for field-visibility expression evaluation) and the ExpressionProvider
+    // wrapping the form (which exposes the same descriptor to descendant
+    // expression consumers). Memoised on the underlying user identity so a
+    // re-render that doesn't change the user does not invalidate downstream
+    // memoisations.
+    const expressionUser = useMemo(() => user
+        ? { name: user.name, email: user.email, role: user.role ?? 'user' }
+        : { name: 'Anonymous', email: '', role: 'guest' }, [user]);
+    // Build expression evaluator for field-visibility expressions, mirroring
+    // the global ModalForm setup in AppContent.
+    const expressionEvaluator = useMemo(() => new ExpressionEvaluator({
+        // expressionUser already handles the anonymous fallback, so we can
+        // pass it through unconditionally.
+        user: expressionUser,
+        app: { name: appName },
+        data: {},
+    }), [expressionUser, appName]);
+    // Resolve the field list using the same visibility-aware logic as the
+    // ModalForm in AppContent so page-mode and modal-mode show the same
+    // fields for a given user.
+    const fields = useMemo(() => {
+        if (!objectDef?.fields)
+            return [];
+        if (Array.isArray(objectDef.fields)) {
+            return objectDef.fields
+                .filter((f) => {
+                if (typeof f === 'string')
+                    return true;
+                return evaluateVisibility(f.visible, expressionEvaluator);
+            })
+                .map((f) => (typeof f === 'string' ? f : f.name));
+        }
+        return Object.entries(objectDef.fields)
+            .filter(([, f]) => evaluateVisibility(f.visible, expressionEvaluator))
+            .map(([key]) => key);
+    }, [objectDef, expressionEvaluator]);
+    // Show skeleton while metadata is still loading rather than the
+    // "Object Not Found" empty state — otherwise direct/refreshed loads of
+    // the URL flash an error before the metadata resolves.
+    if (metadataLoading) {
+        return _jsx(SkeletonDetail, {});
+    }
+    if (!objectDef) {
+        return (_jsx("div", { className: "flex h-full items-center justify-center p-4", children: _jsxs(Empty, { children: [_jsx("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: _jsx(Database, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: "Object Not Found" }), _jsxs(EmptyDescription, { children: ["Object \"", objectName, "\" definition missing. Check your configuration or navigate back to select a valid object."] }), _jsx("div", { className: "mt-4", children: _jsxs(Button, { variant: "outline", onClick: () => navigate(baseUrl), children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), "Back"] }) })] }) }));
+    }
+    return (_jsx(ExpressionProvider, { user: expressionUser, app: { name: appName }, data: {}, children: _jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", "data-testid": "record-form-page", "data-mode": mode, children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-center gap-3 border-b bg-background px-4 py-3 sm:px-6", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: goBack, "data-testid": "record-form-page-back", "aria-label": t('common.back', { defaultValue: 'Back' }), children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Link, { to: objectListUrl, className: "hover:text-foreground transition-colors", children: label }), _jsx("span", { "aria-hidden": "true", children: "/" }), _jsx("span", { className: "text-foreground font-medium", "data-testid": "record-form-page-title", children: pageTitle })] })] }), _jsx("div", { className: "flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto max-w-4xl", children: _jsx(ObjectForm, { schema: {
+                                type: 'object-form',
+                                formType: 'simple',
+                                objectName: objectDef.name,
+                                mode,
+                                recordId: mode === 'edit' ? recordId : undefined,
+                                title: pageTitle,
+                                description: mode === 'create'
+                                    ? t('form.createDescription', {
+                                        object: label,
+                                        defaultValue: `Create a new ${label}.`,
+                                    })
+                                    : t('form.editDescription', {
+                                        object: label,
+                                        defaultValue: `Edit this ${label}.`,
+                                    }),
+                                layout: 'vertical',
+                                fields,
+                                onSuccess: handleSuccess,
+                                onCancel: handleCancel,
+                                showSubmit: true,
+                                showCancel: true,
+                                submitText: t('form.saveRecord', { defaultValue: 'Save' }),
+                                cancelText: t('common.cancel', { defaultValue: 'Cancel' }),
+                            }, dataSource: dataSource ?? undefined }, `${mode}:${objectName}:${recordId ?? 'new'}`) }) })] }) }));
+}

package/dist/views/index.d.ts

@@ -1,5 +1,7 @@
 export { ObjectView } from './ObjectView';
 export { RecordDetailView } from './RecordDetailView';
+export { RecordFormPage } from './RecordFormPage';
+export type { RecordFormPageProps } from './RecordFormPage';
 export { DashboardView } from './DashboardView';
 export { PageView } from './PageView';
 export { ReportView } from './ReportView';

package/dist/views/index.js

@@ -1,5 +1,6 @@
 export { ObjectView } from './ObjectView';
 export { RecordDetailView } from './RecordDetailView';
+export { RecordFormPage } from './RecordFormPage';
 export { DashboardView } from './DashboardView';
 export { PageView } from './PageView';
 export { ReportView } from './ReportView';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/app-shell",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "type": "module",
   "license": "MIT",
   "description": "Minimal application shell for ObjectUI - framework-agnostic rendering engine",
@@ -27,34 +27,34 @@
   "dependencies": {
     "lucide-react": "^1.14.0",
     "sonner": "^2.0.7",
-    "@object-ui/auth": "4.0.1",
-    "@object-ui/collaboration": "4.0.1",
-    "@object-ui/components": "4.0.1",
-    "@object-ui/core": "4.0.1",
-    "@object-ui/data-objectstack": "4.0.1",
-    "@object-ui/fields": "4.0.1",
-    "@object-ui/i18n": "4.0.1",
-    "@object-ui/layout": "4.0.1",
-    "@object-ui/permissions": "4.0.1",
-    "@object-ui/react": "4.0.1",
-    "@object-ui/types": "4.0.1"
+    "@object-ui/auth": "4.0.3",
+    "@object-ui/collaboration": "4.0.3",
+    "@object-ui/components": "4.0.3",
+    "@object-ui/core": "4.0.3",
+    "@object-ui/data-objectstack": "4.0.3",
+    "@object-ui/fields": "4.0.3",
+    "@object-ui/i18n": "4.0.3",
+    "@object-ui/layout": "4.0.3",
+    "@object-ui/permissions": "4.0.3",
+    "@object-ui/react": "4.0.3",
+    "@object-ui/types": "4.0.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
-    "@object-ui/plugin-calendar": "4.0.1",
-    "@object-ui/plugin-charts": "4.0.1",
-    "@object-ui/plugin-chatbot": "4.0.1",
-    "@object-ui/plugin-dashboard": "4.0.1",
-    "@object-ui/plugin-designer": "4.0.1",
-    "@object-ui/plugin-detail": "4.0.1",
-    "@object-ui/plugin-form": "4.0.1",
-    "@object-ui/plugin-grid": "4.0.1",
-    "@object-ui/plugin-kanban": "4.0.1",
-    "@object-ui/plugin-list": "4.0.1",
-    "@object-ui/plugin-report": "4.0.1",
-    "@object-ui/plugin-view": "4.0.1"
+    "@object-ui/plugin-calendar": "4.0.3",
+    "@object-ui/plugin-charts": "4.0.3",
+    "@object-ui/plugin-chatbot": "4.0.3",
+    "@object-ui/plugin-dashboard": "4.0.3",
+    "@object-ui/plugin-designer": "4.0.3",
+    "@object-ui/plugin-detail": "4.0.3",
+    "@object-ui/plugin-form": "4.0.3",
+    "@object-ui/plugin-grid": "4.0.3",
+    "@object-ui/plugin-kanban": "4.0.3",
+    "@object-ui/plugin-list": "4.0.3",
+    "@object-ui/plugin-report": "4.0.3",
+    "@object-ui/plugin-view": "4.0.3"
   },
   "devDependencies": {
     "@types/node": "^25.6.0",