@@ -0,0 +1,19 @@
+---
+'@object-ui/app-shell': patch
+'@object-ui/components': patch
+---
+
+feat(console,components): on a phone the record is always a page, with a compact header, a bottom action bar, and related records pushed as pages with a path row
+
+Clause-②: yes (widening: `@object-ui/components` gains the export `PageHeaderPhoneContext`, its type `PageHeaderPhoneFace`, and the optional prop `PageHeaderActionsProps.face` (`'row'`, the default, or `'bar'`); no export is removed, and `MobileViewSwitcherContext` was never on a package entry)
+Metadata-protocol: none
+
+Below 768 px (the `useIsMobile` breakpoint) the console is on a phone. Nothing here reads metadata the console did not read before, and no reader preference is added.
+
+- **The record is a page.** The object list passes `viewport: 'mobile'` to `deriveRecordSurface`, so a row tap navigates to the record route, handed the list as its way back and its rows as its ↓ ↑ set. The split pane and the drawer are never mounted; a `?recordId=` link is replaced by the record page; the Display menu has no Open records section, and a stored split or drawer preference draws nothing. A record created from the list opens as a page too.
+- **One view switcher.** The list's title switcher 「view ▾ · N」 leads the list's toolbar row below `sm` (or heads a chart), beside the filter and display controls, and the Display menu drops its Layout row there. The app bar no longer draws a second view dropdown: the `MobileViewSwitcherContext` channel is retired.
+- **The top bar** is one way back. On a top-level page it reads 「‹ object plural」 and returns to the list the page came from (or the object's list); one level down it is named by where it returns, the parent record (「‹ Mira Costa」). The counter and ↓ ↑ show when the page knows its rows. No ⊟ and no ⤡: the stack has no right column and there is no drawer to collapse to.
+- **The header** of a default page takes its subtitle from the first two declared text `highlightFields` (「Atlas Construction · Director of Sales」) and shows at most four highlights after them. An object that declares no highlights draws no subtitle; an authored page draws its own header.
+- **The bottom action bar.** The header draws no action row: its actions, resolved by the same `PageHeaderActions`, are drawn into a bar at the foot of the page above the safe area, in their bar face: the primary action, one more and the `⋯`. The host's Edit queues after the page's own actions, so it takes the second slot when the page declares one action and folds into the `⋯` when a declared second action fills the bar. A page's `mobileMaxVisible` still sets the budget. The bar is the page column's last row, so it stays in view while the body scrolls above it.
+- **One level down.** A related row or a lookup pushes its record as a page (the `?from=` trail extended, no drawer stack), with a path row 「Lead Mira Costa › Task」 under the top bar; 「‹ Mira Costa」 and the path row's parent go back in the history to the parent, which comes back where it was scrolled. The pushed page's ↓ ↑ step through the parent's related rows.
+- **Unchanged.** Every width from 768 px up, the record pane and drawer mechanics, and the record page's layout rule (the stack below 760 px and the tab row read the page's own width, as before).
@@ -37,6 +37,7 @@ import { useLauncherApps } from '../hooks/useLauncherApps.js';
 import { useSignedInUserLocale } from '../hooks/useUserLocale.js';
 import { resolveRecordFormTarget, resolveRecordFormModalLayout, resolveFormViewChrome, selectRecordFormView, resolveNavigateCreateUrl, resolveNavigateEditUrl, resolvePostCreateTarget, recordFormCreateValues, readRecordFormCreateValues, RECORD_FORM_CREATE_VALUES_STATE } from '../utils/recordFormNavigation.js';
 import { deriveRecordSurface, deriveRecordFlowSurface } from '@object-ui/plugin-view';
+import { isPhoneViewportNow } from '../hooks/usePhoneViewport.js';
 import { RECORD_DRAWER_PARAM, RECORD_FORM_PARAM, RECORD_FORM_OBJECT_PARAM, RECORD_FORM_LINK_PARAM } from '../urlParams.js';
 import { appAddressSegment, appRouteSegment, canonicalAppPathname, matchAppBySegment } from '../utils/appRoute.js';
 import { resolveHref, type NavTemplateContext } from '@object-ui/layout';
@@ -962,7 +963,9 @@ export function AppContent({ extraRoutes, extraRoutesNoApp }: AppContentProps =
       baseUrl: appSegment ? `/apps/${appSegment}` : '',
       pathname: location.pathname,
       search: window.location.search,
-      surface: deriveRecordSurface(currentObjectDef),
+      // On a phone the record is always a page (objectstack#27058): the
+      // spec's own rule, asked with the viewport.
+      surface: deriveRecordSurface(currentObjectDef, isPhoneViewportNow() ? { viewport: 'mobile' } : {}),
       recordId: saved?.id ?? saved?._id,
     });
     if (target.kind === 'none') return;
 
@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+
+import { useEffect, useState } from 'react';
+
+/**
+ * The phone breakpoint, `useIsMobile`'s 768 px in `@object-ui/components`.
+ * Below it the console is on a phone (objectstack#27058): a record is always a
+ * page, never a pane, and its business actions sit in a bottom bar.
+ */
+export const PHONE_BELOW_WIDTH = 768;
+
+/** Is the window narrower than {@link PHONE_BELOW_WIDTH} right now? */
+export function isPhoneViewportNow(): boolean {
+  return typeof window !== 'undefined' && window.innerWidth < PHONE_BELOW_WIDTH;
+}
+
+/**
+ * `useIsMobile()`, except that the first answer is read synchronously. What
+ * this decides is mounted, not styled: on a phone the list page mounts no
+ * record pane, and the record page mounts no drawer host and draws its
+ * actions in the bottom bar. An answer that only arrived in an effect would
+ * mount the desktop tree once and then swap it, with the list read twice.
+ * The same idiom as `useViewTabsFit` in `objectViewChrome.tsx`.
+ */
+export function usePhoneViewport(): boolean {
+  const [phone, setPhone] = useState<boolean>(isPhoneViewportNow);
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;
+    const mql = window.matchMedia(`(max-width: ${PHONE_BELOW_WIDTH - 1}px)`);
+    const onChange = () => setPhone(isPhoneViewportNow());
+    mql.addEventListener('change', onChange);
+    // A width that moved between the first render and this effect.
+    onChange();
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+  return phone;
+}
@@ -55,9 +55,6 @@ import {
 import {
   Search,
   HelpCircle,
-  ChevronDown,
-  Check,
-  Lock,
   LogOut,
   Plus,
   Layers,
@@ -93,7 +90,6 @@ import { useAuth, getUserInitials } from '@object-ui/auth';
 import { useMetadata } from '../providers/MetadataProvider.js';
 import { resolveKeyedI18nLabel, preferLocal, matchAppBySegment, appRouteSegment, appStudioRoutePath } from '../utils/index.js';
 import { getIcon } from '../utils/getIcon.js';
-import { useMobileViewSwitcher } from './MobileViewSwitcherContext.js';
 import { useNavigationContext } from '../context/NavigationContext.js';
 import { useCommandPalette, useCommandPaletteProviderMounted } from '../context/CommandPaletteProvider.js';
 import { useUrlOverlay } from '../hooks/useUrlOverlay.js';
@@ -483,7 +479,6 @@ export function AppHeader({
   // object document's own `listViews` (objectui#11295, objectui#11336).
   const servedViews = useServedViewItems();
   const { currentAppName, recordTitle } = useNavigationContext();
-  const mobileSwitcher = useMobileViewSwitcher();
 
   /**
    * Help menu — lazily-loaded `doc` metadata (ADR-0046) so the "?" menu can
@@ -942,60 +937,12 @@ export function AppHeader({
               moreLabel={t('common.more', { defaultValue: 'More' })}
             />
 
-            {/* Mobile: current page label or view switcher */}
-            {mobileSwitcher && mobileSwitcher.views.length > 0 ? (
-              mobileSwitcher.views.length > 1 ? (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <button
-                      type="button"
-                      className="sm:hidden flex items-center gap-0.5 min-w-0 ml-1 rounded-md px-1.5 py-1 text-sm font-medium hover:bg-accent active:bg-accent/80 transition-colors"
-                      aria-label={t('topbar.switchView', { defaultValue: 'Switch view' })}
-                    >
-                      <span className="truncate max-w-[180px]">
-                        {mobileSwitcher.triggerLabel ??
-                          mobileSwitcher.views.find((v) => v.id === mobileSwitcher.activeViewId)?.label ??
-                          lastSegmentLabel}
-                      </span>
-                      <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                    </button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="start" className="min-w-[220px] max-w-[280px]">
-                    {mobileSwitcher.views.map((v) => {
-                      const isActive = v.id === mobileSwitcher.activeViewId;
-                      return (
-                        <DropdownMenuItem
-                          key={v.id}
-                          onSelect={() => {
-                            if (!isActive) mobileSwitcher.onChange(v.id);
-                          }}
-                          className="gap-2"
-                        >
-                          {v.icon ? (
-                            <span className="shrink-0 text-muted-foreground [&>svg]:h-4 [&>svg]:w-4">{v.icon}</span>
-                          ) : null}
-                          <span className="flex-1 truncate">{v.label}</span>
-                          {v.locked ? (
-                            <Lock className="h-3 w-3 shrink-0 text-muted-foreground" aria-hidden />
-                          ) : null}
-                          {isActive ? (
-                            <Check className="h-4 w-4 shrink-0 text-foreground" aria-hidden />
-                          ) : null}
-                        </DropdownMenuItem>
-                      );
-                    })}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              ) : (
-                <span className="text-sm font-medium sm:hidden truncate min-w-0 ml-1">
-                  {mobileSwitcher.triggerLabel ?? mobileSwitcher.views[0].label}
-                </span>
-              )
-            ) : (
-              <span className="text-sm font-medium sm:hidden truncate min-w-0 ml-1">
-                {lastSegmentLabel}
-              </span>
-            )}
+            {/* Mobile: the current page's label. A list's view switcher is
+                the list's own title, drawn in its toolbar row on a phone
+                (objectstack#27058), so the bar draws no view dropdown. */}
+            <span className="text-sm font-medium sm:hidden truncate min-w-0 ml-1">
+              {lastSegmentLabel}
+            </span>
           </>
         )}
       </div>
 
@@ -29,7 +29,6 @@ import { UnpublishedAppBar } from '../preview/UnpublishedAppBar.js';
 import { ConsoleNotificationBanners } from './ConsoleNotificationBanners.js';
 import { UnifiedSidebar } from './UnifiedSidebar.js';
 import { AppHeader } from './AppHeader.js';
-import { MobileViewSwitcherProvider } from './MobileViewSwitcherContext.js';
 import { useResponsiveSidebar } from '../hooks/useResponsiveSidebar.js';
 import { primeConsoleSidebarOpen } from './consoleSidebarRail.js';
 import { useAiSurfaceEnabled } from '../hooks/useAiSurface.js';
@@ -212,7 +211,6 @@ export function ConsoleLayout({
     // One shared, URL-addressable command-palette open state for both the
     // AppHeader trigger (navbar) and the CommandPalette (children) — ADR-0054.
     <CommandPaletteProvider>
-    <MobileViewSwitcherProvider>
     {/* objectui#13130 — first in the DOM, so it is the first Tab stop. */}
     <SkipToContentLink targetRef={mainContentRef} />
     <AppShell
@@ -339,7 +337,6 @@ export function ConsoleLayout({
         />
       )}
     </AppShell>
-    </MobileViewSwitcherProvider>
     </CommandPaletteProvider>
   );
 }