@multiplatform.one/frappe-ui 7.34.3 → 7.35.0

package/src/FrappeRecordView.spec.tsx

@@ -173,19 +173,47 @@ function renderRecord(name: string, navigate = vi.fn()) {
   );
 }
 
+/** Opens the top bar's menu and finds one of its items by its label. */
+async function menuItem(label: string): Promise<HTMLElement> {
+  fireEvent.click(await screen.findByTestId("pokemon-detail-more", {}, { timeout: 5000 }));
+  return waitFor(() => {
+    const item = Array.from(document.querySelectorAll<HTMLElement>('[role="menuitem"]')).find(
+      (node) => node.textContent?.includes(label),
+    );
+    expect(item).toBeTruthy();
+    return item as HTMLElement;
+  });
+}
+
 async function identity(): Promise<HTMLElement> {
   return screen.findByTestId("pokemon-hero-identity", {}, { timeout: 5000 });
 }
 
 describe("FrappeRecordView heads the record from its look and facet", () => {
-  it("names the record by code, title and subtitle under the list's breadcrumb", async () => {
+  it("names the record by code, title and subtitle under Back to the list", async () => {
     renderRecord("bulbasaur");
     const hero = await identity();
+    expect(within(hero).getByRole("heading", { level: 1 }).textContent).toBe("BULBASAUR");
     expect(hero.textContent).toContain("#001");
-    expect(hero.textContent).toContain("BULBASAUR");
     expect(hero.textContent).toContain("Seed Pokémon");
-    expect(screen.getByText("Roster")).toBeTruthy();
-    expect(screen.getByText("#001 BULBASAUR")).toBeTruthy();
+    const back = screen.getByTestId("pokemon-detail-back");
+    expect(screen.getByTestId("pokemon-detail-header").contains(back)).toBe(true);
+    expect(back.textContent).toContain("Roster");
+    expect(back.getAttribute("aria-label")).toBe("Back to Roster");
+  });
+
+  it("stacks the top bar, the art stage, the identity and the tabs in that order", async () => {
+    renderRecord("bulbasaur");
+    const hero = await identity();
+    const header = screen.getByTestId("pokemon-detail-header");
+    const stage = screen.getByTestId("pokemon-detail-stage");
+    const tabs = screen.getAllByRole("tab")[0];
+    const follows = (a: Node, b: Node) =>
+      Boolean(a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING);
+    expect(follows(header, stage)).toBe(true);
+    expect(follows(stage, hero)).toBe(true);
+    expect(follows(hero, tabs)).toBe(true);
+    expect(stage.contains(screen.getByTestId("pokemon-hero-art"))).toBe(true);
   });
 
   it("badges the facet's values in slot order and draws the first image", async () => {
@@ -198,12 +226,13 @@ describe("FrappeRecordView heads the record from its look and facet", () => {
     expect(art.querySelector("img")?.getAttribute("src")).toBe("https://art.spec.test/1.png");
   });
 
-  it("tiles each metric, a max adding a bar", async () => {
+  it("states each metric as a label over its value, with no tile or bar", async () => {
     renderRecord("bulbasaur");
     const hero = await identity();
-    expect(hero.textContent).toContain("Base XP");
-    expect(hero.textContent).toContain("64");
-    expect(within(hero).getByLabelText("Base XP")).toBeTruthy();
+    const fact = within(hero).getByTestId("record-vital-base_experience");
+    expect(fact.textContent).toBe("Base XP64");
+    expect(fact.getAttribute("data-record-metric")).toBe("base_experience");
+    expect(within(hero).queryByRole("progressbar")).toBeNull();
   });
 });
 
@@ -214,15 +243,19 @@ describe("FrappeRecordView tabs the record's rows", () => {
     expect(await screen.findByText("pikachu, the Mouse Pokémon.")).toBeTruthy();
     await waitFor(() => expect(screen.getByText("lightning rod")).toBeTruthy());
     expect(screen.getAllByText("Hidden")).toHaveLength(1);
-    expect(screen.getByText("Record history")).toBeTruthy();
+    expect(screen.getByText("History")).toBeTruthy();
+    expect(screen.getByTestId("pokemon-history").textContent).toContain("Created by");
   });
 
   it("draws a child table as bars on a fixed scale with their total", async () => {
     renderRecord("pikachu");
     await identity();
-    expect(await screen.findByTestId("pokemon-stats-chart")).toBeTruthy();
-    expect(screen.getByText("Stat total")).toBeTruthy();
-    expect(screen.getByText("125")).toBeTruthy();
+    const chart = await screen.findByTestId("pokemon-stats-chart");
+    expect(within(chart).getByText("Stat total")).toBeTruthy();
+    expect(within(chart).getByText("125")).toBeTruthy();
+    const meters = within(chart).getAllByRole("meter");
+    expect(meters.length).toBeGreaterThan(0);
+    for (const meter of meters) expect(meter.getAttribute("aria-valuemax")).toBe("255");
   });
 
   it("badges a tab with its rows' count and groups them, detailed", async () => {
@@ -249,7 +282,7 @@ describe("FrappeRecordView's controls", () => {
     expect(navigate).toHaveBeenCalledWith("/pokemon/gengar");
     fireEvent.click(screen.getByTestId("pokemon-prev"));
     expect(navigate).toHaveBeenCalledWith("/pokemon/squirtle");
-    fireEvent.click(screen.getByTestId("pokemon-detail-edit"));
+    fireEvent.click(await menuItem("Edit"));
     expect(navigate).toHaveBeenCalledWith("/pokemon/pikachu/edit");
   });
 
@@ -262,7 +295,7 @@ describe("FrappeRecordView's controls", () => {
     expect(heart.getAttribute("aria-pressed")).toBe("false");
     fireEvent.click(heart);
     await waitFor(() => expect(favoritesStore(favoritesKey).state.names).toEqual(["pikachu"]));
-    fireEvent.click(screen.getByTestId("hop"));
+    fireEvent.click(await menuItem("Open in backoffice"));
     expect(navigate).toHaveBeenCalledWith("/backoffice/pokemon/pikachu");
   });
 

package/src/FrappeRecordView.tsx

@@ -1,8 +1,6 @@
-import { EmptyState, Screen, ScreenToolbar, YStack } from "@multiplatform.one/components";
+import { EmptyState, Screen } from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
 import type { Order } from "@multiplatform.one/frappe";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { ArrowLeftIcon } from "@phosphor-icons/react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import type { FrappeConnection } from "./frappeConnections";
@@ -15,8 +13,13 @@ import { orderRows } from "./insights/insightsData";
 import type { FrappeInsightsMetric } from "./insights/insightsRecord";
 import type { FrappeListFacet } from "./list/listState";
 import type { FrappeRecordLook } from "./list/recordLook";
-import { RecordBreadcrumbBone, RecordSkeleton } from "./record/RecordHero";
-import { RecordPage, type FrappeRecordAction, type RecordPageProps } from "./record/RecordPage";
+import { RecordSkeleton } from "./record/RecordHero";
+import {
+  RecordPage,
+  RecordTopBar,
+  type FrappeRecordAction,
+  type RecordPageProps,
+} from "./record/RecordPage";
 import type { FrappeRecordTab } from "./record/recordSections";
 import { useFrappeConnection, useFrappeRows } from "./useFrappeRows";
 
@@ -70,11 +73,11 @@ export interface FrappeRecordViewProps<TDoc extends { name: string; doctype: str
 const noTabs: readonly FrappeRecordTab[] = [];
 
 /**
- * A doctype's record page, read first: the list's breadcrumb and Back, the
- * favorite heart, the record's hops and Edit under the write right; a hero
- * with the record's images, code, title, subtitle, facet badges and metric
- * tiles, tinted by the facet; tabs of linked rows and child-table bars with
- * the audit trail; and the records either side of it in the list's order.
+ * A doctype's record page, read first: Back to the list, the favorite heart
+ * and a menu of the record's hops and Edit under the write right; the art on
+ * a stage tinted by the facet, then the code, facet badges, title, subtitle
+ * and metric facts; tabs of linked rows and child-table bars with the audit
+ * trail; and the records either side of it in the list's order.
  * FrappeForm reads the record and its connections live; loading, not found
  * and error keep the page's wayfinding.
  */
@@ -101,7 +104,6 @@ export function FrappeRecordView<TDoc extends { name: string; doctype: string }>
   testID,
 }: FrappeRecordViewProps<TDoc>) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs();
   const config = useFrappeConfig();
   const connection = useFrappeConnection();
   const router = useFrappeRouter();
@@ -126,19 +128,7 @@ export function FrappeRecordView<TDoc extends { name: string; doctype: string }>
   if (!config?.baseURL && !config?.fixtures) return <FrappeNotConfigured doctype={doctype} page />;
 
   const backButton = (
-    <ScreenToolbar
-      leading={
-        <Button
-          outlined
-          minHeight={knobProps.sizeToken}
-          onPress={() => navigate(route)}
-          icon={<ArrowLeftIcon size={16} />}
-          testID={`${slug}-detail-back`}
-        >
-          {t("Back")}
-        </Button>
-      }
-    />
+    <RecordTopBar listName={listName} onBack={() => navigate(route)} slug={slug} />
   );
 
   return (
@@ -151,16 +141,13 @@ export function FrappeRecordView<TDoc extends { name: string; doctype: string }>
       showSidebar={false}
       showTimeline={false}
       loadingFallback={
-        <Screen>
-          <YStack gap="$2">
-            <RecordBreadcrumbBone />
-            {backButton}
-          </YStack>
+        <Screen noPadding gap={0}>
+          {backButton}
           <RecordSkeleton testID={`${slug}-detail-skeleton`} />
         </Screen>
       }
       notFoundFallback={
-        <Screen scroll={false}>
+        <Screen scroll={false} noPadding gap={0}>
           {backButton}
           <EmptyState
             title={t("{{doctype}} not found", { doctype })}
@@ -174,7 +161,7 @@ export function FrappeRecordView<TDoc extends { name: string; doctype: string }>
         </Screen>
       }
       errorFallback={
-        <Screen scroll={false}>
+        <Screen scroll={false} noPadding gap={0}>
           {backButton}
           <EmptyState
             intent="error"

package/src/FrappeReportBuilder.tsx

@@ -27,7 +27,6 @@ import {
   ScrollView,
   Spinner,
   YStack,
-  isWeb,
   notify,
   type GroupByConfig,
   type ReportColumn,
@@ -822,7 +821,7 @@ function FrappeReportBuilderBody({
     );
   } else {
     body = (
-      <YStack flex={1} minWidth={0} {...knobProps.gap}>
+      <YStack flexGrow={1} flexShrink={0} flexBasis="auto" minWidth={0} {...knobProps.gap}>
         {chartData.length > 0 && (
           <YStack {...knobProps.surface} {...knobProps.containerRadius} {...knobProps.panelPadding}>
             <BarChart data={chartData} />
@@ -845,7 +844,7 @@ function FrappeReportBuilderBody({
   }
 
   const content = (
-    <YStack flex={1} minWidth={0} {...stackProps}>
+    <YStack flex={1} minWidth={0} minHeight={0} {...stackProps}>
       <ReportViewToolbar
         columns={allColumns}
         selected={selectedFieldnames}
@@ -865,9 +864,15 @@ function FrappeReportBuilderBody({
         onExport={exportEnabled ? handleExport : undefined}
         exportDisabled={total === 0}
       />
-      <YStack flex={1} minWidth={0} paddingHorizontal="$3">
+      <ScrollView
+        flex={1}
+        minWidth={0}
+        minHeight={0}
+        paddingHorizontal="$3"
+        testID="frappe-report-scroll"
+      >
         {body}
-      </YStack>
+      </ScrollView>
       {total > 0 && !syncError && (
         <YStack paddingHorizontal="$3" paddingVertical="$2">
           <DataTablePagination
@@ -882,16 +887,14 @@ function FrappeReportBuilderBody({
               setPageSize(next.pageSize);
             }}
             pageSizeOptions={[...REPORT_PAGE_SIZES]}
-            compact
+            size="$3"
           />
         </YStack>
       )}
     </YStack>
   );
 
-  // Native has no page-level scroll (the desk list precedent) — wrap so rows
-  // below the fold stay reachable. Web keeps the flex layout.
-  return isWeb ? content : <ScrollView flex={1}>{content}</ScrollView>;
+  return content;
 }
 
 export type { ReportColumn, GroupByConfig } from "@multiplatform.one/components";

package/src/FrappeReportView.tsx

@@ -230,7 +230,6 @@ function ReportFilterField({ def, value, onChange }: ReportFilterFieldProps) {
       return (
         <Select
           label={label}
-          compact
           options={options}
           value={value == null ? "" : String(value)}
           onChange={onChange}
@@ -242,7 +241,6 @@ function ReportFilterField({ def, value, onChange }: ReportFilterFieldProps) {
       return (
         <DatePicker
           label={label}
-          compact
           value={value == null ? null : String(value)}
           onChange={(date) => onChange(date ? formatCalendarDate(date) : "")}
         />
@@ -251,7 +249,6 @@ function ReportFilterField({ def, value, onChange }: ReportFilterFieldProps) {
       return (
         <Check
           label={label}
-          compact
           value={Boolean(value)}
           // Wire shape parity with desk: checkboxes travel as 1 / 0.
           onChange={(checked) => onChange(checked ? 1 : 0)}
@@ -262,7 +259,6 @@ function ReportFilterField({ def, value, onChange }: ReportFilterFieldProps) {
       return (
         <Data
           label={label}
-          compact
           value={value == null ? "" : String(value)}
           onChange={onChange}
           placeholder={label}

package/src/FrappeTable.tsx

@@ -122,6 +122,8 @@ export interface FrappeTableProps<TDoc extends { name: string; doctype: string }
    * Requires onStateChange for state sync; fetches data based on table state.
    */
   serverSide?: boolean;
+  /** Infinite mode may omit totals when the host owns the count. */
+  fetchTotalCount?: boolean;
   /**
    * Callback when filters, sort, or pagination change.
    * Used for server-side fetches when serverSide is true.
@@ -134,11 +136,6 @@ export interface FrappeTableProps<TDoc extends { name: string; doctype: string }
    * refresh generation).
    */
   refreshToken?: unknown;
-  /**
-   * Density. DataTableRoot accepts this; it is not on DataTableProps, so
-   * FrappeTable has to name it or callers (backoffice list) fail the build.
-   */
-  compact?: boolean;
   /**
    * Filters the toolbar offers. Omitted, the list is derived from the
    * doctype's meta: under a provider carrying `fixtures` that is the
@@ -341,6 +338,7 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   canCreateGlobalFilters = false,
   userId,
   serverSide = false,
+  fetchTotalCount = true,
   onStateChange: onStateChangeProp,
   refreshToken,
   paginationMode = "pages",
@@ -697,7 +695,7 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
           limit: params.limit,
           orderBy: params.orderBy,
         }),
-        query.pageIndex === 0
+        query.pageIndex === 0 && fetchTotalCount
           ? frappeApp
               .db()
               .getCount(doctype, params.filters.length ? params.filters : undefined)
@@ -711,7 +709,7 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
       ]);
       return { rows, totalCount: count ?? undefined };
     },
-    [frappeApp, doctype, serverFields],
+    [frappeApp, doctype, serverFields, fetchTotalCount],
   );
 
   const resolvedLoadPage = loadPageProp ?? (infiniteServerMode ? frappeLoadPage : undefined);

package/src/SyncErrorNotice.stories.tsx

@@ -31,7 +31,7 @@ export const Default = () => (
 Default.storyName = "Main";
 
 export const AllStates = () => (
-  <YStack gap="$4" width={480}>
+  <YStack gap="$4" width={480} maxWidth="100%">
     <SyncErrorNotice
       message="Could not add comment"
       onRetry={action("onRetry")}

package/src/components/timeline.stories.tsx

@@ -246,7 +246,7 @@ export const AbsoluteTimestamps = () => (
 /** Compact mode forwards to the base component. */
 export const Compact = () => (
   <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
-    <Timeline doctype="Task" docname="TASK-001" label="Activity" compact />
+    <Timeline doctype="Task" docname="TASK-001" label="Activity" size="$3" />
   </FrappeProvider>
 );
 

package/src/desk/Awesomebar.stories.tsx

@@ -70,7 +70,7 @@ const doctypeList = [
 
 export const Main = (args: Record<string, unknown>) => (
   <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({})}>
-    <YStack width={560} padding="$4">
+    <YStack width={560} maxWidth="100%" padding="$4">
       <Awesomebar onNavigate={action("onNavigate")} {...args} />
     </YStack>
   </FrappeProvider>
@@ -85,7 +85,7 @@ Main.storyName = "Main";
  */
 export const SearchUnavailable = () => (
   <FrappeProvider baseURL={ERR_HOST} fixtures={new InMemoryFixtureProvider({})}>
-    <YStack width={560} padding="$4">
+    <YStack width={560} maxWidth="100%" padding="$4">
       <Awesomebar onNavigate={action("onNavigate")} />
     </YStack>
   </FrappeProvider>
@@ -93,7 +93,7 @@ export const SearchUnavailable = () => (
 
 /** No provider: math and commands still work locally; remote result groups stay empty. */
 export const WithoutProvider = () => (
-  <YStack width={560} padding="$4">
+  <YStack width={560} maxWidth="100%" padding="$4">
     <Awesomebar onNavigate={action("onNavigate")} />
   </YStack>
 );

package/src/desk/DeskFormPage.tsx

@@ -68,7 +68,7 @@ export function DeskFormPage({ doctype, name, onNavigate }: DeskFormPageProps) {
     if (!isCreate && name) {
       addToRecent({
         label: `${displayName}: ${name}`,
-        path: `/desk/${doctype}/${name}`,
+        path: `/desk/${doctype}/${encodeURIComponent(name)}`,
       });
     }
   }, [doctype, name, displayName, isCreate]);
@@ -104,7 +104,7 @@ export function DeskFormPage({ doctype, name, onNavigate }: DeskFormPageProps) {
     <DeskShell
       breadcrumbs={breadcrumbs}
       onNavigate={handleNavigate}
-      activePath={`/desk/${doctype}/${name || "new"}`}
+      activePath={`/desk/${doctype}/${encodeURIComponent(name || "new")}`}
     >
       {/* LC-29 PAGE-TEMPLATE: the canonical detail-page scaffold owns scroll,
           max-width, toolbar/header regions, and the supporting-pane aside.
@@ -151,7 +151,7 @@ export function DeskFormPage({ doctype, name, onNavigate }: DeskFormPageProps) {
           showTimeline
           onSave={(doc) => {
             if (isCreate && doc.name) {
-              handleNavigate(`/desk/${doctype}/${doc.name}`);
+              handleNavigate(`/desk/${doctype}/${encodeURIComponent(doc.name)}`);
             }
           }}
           onCancel={() => handleNavigate(`/desk/${doctype}`)}

package/src/desk/DeskFormSidebar.stories.tsx

@@ -155,7 +155,7 @@ function makeBareFixtures() {
 
 export const Default = () => (
   <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
-    <YStack width={320} height={520}>
+    <YStack width={320} maxWidth="100%" height={520}>
       <DeskFormSidebar doctype="Todo" name="TODO-001" />
     </YStack>
   </FrappeProvider>
@@ -164,7 +164,7 @@ Default.storyName = "Main";
 
 export const EmptySections = () => (
   <FrappeProvider baseURL={MOCK_HOST} fixtures={makeBareFixtures()}>
-    <YStack width={320} height={520}>
+    <YStack width={320} maxWidth="100%" height={520}>
       <DeskFormSidebar doctype="Todo" name="TODO-002" />
     </YStack>
   </FrappeProvider>
@@ -181,7 +181,7 @@ EmptySections.parameters = {
 
 export const Loading = () => (
   <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
-    <YStack width={320} height={200}>
+    <YStack width={320} maxWidth="100%" height={200}>
       <DeskFormSidebar doctype="Todo" name="TODO-MISSING" />
     </YStack>
   </FrappeProvider>

package/src/desk/DeskListPage.tsx

@@ -81,7 +81,7 @@ export function DeskListPage({ doctype, onNavigate }: DeskListPageProps) {
 
   const handleItemClick = (doc: Partial<{ name: string; doctype: string }>) => {
     if (!doc.name) return;
-    const path = `/desk/${doctype}/${doc.name}`;
+    const path = `/desk/${doctype}/${encodeURIComponent(doc.name)}`;
     addToRecent({ label: `${displayName}: ${doc.name}`, path });
     handleNavigate(path);
   };

package/src/desk/DeskShell.tsx

@@ -34,7 +34,12 @@ import {
   useDocumentTitle,
   type BreadcrumbItem,
 } from "@multiplatform.one/components";
-import { NARROW_BREAKPOINT, useLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  NARROW_BREAKPOINT,
+  Surface,
+  useLayoutSizeClass,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { Awesomebar } from "./awesomebar";
 import { DeskSidebar } from "./DeskSidebar";
 
@@ -75,13 +80,6 @@ function useIsNarrowDesk(): boolean {
   return useLayoutSizeClass() === "compact";
 }
 
-/** Size token is a HEIGHT key — map the banner min-height from it, never fontSize. */
-function bannerMinHeight(sizeToken: string): "$5" | "$6" | "$7" {
-  if (sizeToken === "$5") return "$7";
-  if (sizeToken === "$3") return "$5";
-  return "$6";
-}
-
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -176,17 +174,19 @@ export function DeskShell({
           role="banner"
           {...knobProps.surface}
           {...knobProps.gap}
-          {...knobProps.panelPadding}
+          // B5: the one top-bar fragment (Navbar, BackofficeShell share it).
+          {...knobProps.bar.frame}
           {...chromeBorder}
-          minHeight={bannerMinHeight(knobProps.sizeToken)}
           alignItems="center"
           flexShrink={0}
         >
-          {toggleButton}
-          <SizableText {...knobProps.heading} {...knobProps.controlType} flexShrink={0}>
-            {t("Desk")}
-          </SizableText>
-          <Awesomebar onNavigate={handleNavigate} flex={1} minWidth={0} />
+          <Surface size={knobProps.bar.sizeToken}>
+            {toggleButton}
+            <SizableText {...knobProps.heading} {...knobProps.controlType} flexShrink={0}>
+              {t("Desk")}
+            </SizableText>
+            <Awesomebar onNavigate={handleNavigate} flex={1} minWidth={0} />
+          </Surface>
         </XStack>
       )}
 
@@ -195,12 +195,12 @@ export function DeskShell({
         <XStack
           {...knobProps.surface}
           {...knobProps.gap}
-          {...knobProps.panelPadding}
+          {...knobProps.bar.frame}
           {...chromeBorder}
           alignItems="center"
           flexShrink={0}
         >
-          {toggleButton}
+          <Surface size={knobProps.bar.sizeToken}>{toggleButton}</Surface>
         </XStack>
       )}
 

package/src/desk/awesomebar.tsx

@@ -136,7 +136,10 @@ function matchingCommands(query: string): Array<{ label: string; path: string }>
 
 export function Awesomebar({ onNavigate, basePath = "/desk", ...stackProps }: AwesomebarProps) {
   const { t } = useTranslation();
-  const { knobProps, control } = useResolvedKnobs();
+  // B5: the awesomebar lives in a top bar, so it renders at the bar
+  // fragment's size token (clamped to any Surface ceiling).
+  const barSize = useResolvedKnobs().knobProps.bar.sizeToken;
+  const { knobProps, control } = useResolvedKnobs({ size: barSize });
   const config = useFrappeConfig();
   const [query, setQuery] = useState("");
   const [docResults, setDocResults] = useState<DocSearchResult[]>([]);
@@ -326,7 +329,7 @@ export function Awesomebar({ onNavigate, basePath = "/desk", ...stackProps }: Aw
     { conflictBehavior: "allow" },
   );
 
-  // Height from the LC-65 size recipe (not a private px map). Combobox's
+  // Height from the LC-65 size recipe at the bar's size token (not a private px map). Combobox's
   // custom-trigger wrapper used to collapse Tamagui `height` — pin via style
   // + outer shell (SB-M-1703).
   const triggerHeight = knobProps.control.height;

package/src/desk/deskDocumentRoutes.spec.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { DeskFormPage } from "./DeskFormPage";
+import { DeskListPage } from "./DeskListPage";
+
+const state = vi.hoisted(() => ({ name: "", recent: vi.fn() }));
+vi.mock("./DeskSidebar", () => ({ addToRecent: state.recent }));
+vi.mock("./DeskFormSidebar", () => ({ DeskFormSidebar: () => null }));
+vi.mock("./DeskShell", () => ({
+  DeskShell: ({ children, activePath }: { children: ReactNode; activePath: string }) => (
+    <div data-testid="shell" data-path={activePath}>
+      {children}
+    </div>
+  ),
+}));
+vi.mock("../FrappeListView", () => ({
+  FrappeListView: ({ onItemClick }: { onItemClick: (doc: { name: string }) => void }) => (
+    <button onClick={() => onItemClick({ name: state.name })}>Open</button>
+  ),
+}));
+vi.mock("../FrappeForm", () => ({
+  FrappeForm: ({ onSave, name }: { onSave: (doc: { name: string }) => void; name?: string }) => (
+    <button onClick={() => onSave({ name: state.name })} data-testid="form" data-name={name}>
+      Save
+    </button>
+  ),
+}));
+vi.mock("@multiplatform.one/components", () => ({
+  PageHeader: () => null,
+  ListPageLayout: ({ children }: { children: ReactNode }) => children,
+  DetailPageLayout: ({ children }: { children: ReactNode }) => children,
+}));
+vi.mock("@multiplatform.one/forms", () => ({ Button: () => null, formCommonColors: {} }));
+vi.mock("@multiplatform.one/theme", () => ({ useResolvedKnobs: () => ({ knobProps: {} }) }));
+vi.mock("tamagui", () => ({ Text: () => null, YStack: () => null }));
+
+beforeEach(() => state.recent.mockClear());
+
+describe.each(["A/B", "A?B", "A#B", "A B", "Pokémon", "A%2FB"])("desk document %s", (name) => {
+  const path = `/desk/todo/${encodeURIComponent(name)}`;
+  it("encodes list navigation and recents", () => {
+    state.name = name;
+    const navigate = vi.fn();
+    render(<DeskListPage doctype="todo" onNavigate={navigate} />);
+    fireEvent.click(screen.getByText("Open"));
+    expect(navigate).toHaveBeenCalledWith(path);
+    expect(state.recent).toHaveBeenCalledWith({ label: `Todo: ${name}`, path });
+  });
+
+  it("encodes form recents and active path without changing the document name", () => {
+    render(<DeskFormPage doctype="todo" name={name} />);
+    expect(state.recent).toHaveBeenCalledWith({ label: `Todo: ${name}`, path });
+    expect(screen.getByTestId("shell").getAttribute("data-path")).toBe(path);
+    expect(screen.getByTestId("form").getAttribute("data-name")).toBe(name);
+  });
+
+  it("encodes the saved name when leaving create mode", () => {
+    state.name = name;
+    const navigate = vi.fn();
+    render(<DeskFormPage doctype="todo" onNavigate={navigate} />);
+    fireEvent.click(screen.getByText("Save"));
+    expect(navigate).toHaveBeenCalledWith(path);
+  });
+});

package/src/fieldRegistry.spec.tsx

@@ -86,15 +86,13 @@ describe("fieldtypeToTableField (cell context)", () => {
     expect(element.type).toBe(Rating);
     expect(element.props.value).toBe(0.8);
     expect(element.props.maxStars).toBeUndefined();
-    expect(element.props.compact).toBe(true);
   });
 
-  it("maps Icon to the Icon picker cell (compact), honoring render context", () => {
+  it("maps Icon to the Icon picker cell, honoring render context", () => {
     const render = customRenderOf(fieldtypeToTableField("Icon"));
     const element = render("mail", {}, () => {});
     expect(element.type).toBe(Icon);
     expect(element.props.value).toBe("mail");
-    expect(element.props.compact).toBe(true);
     const readOnlyElement = render("mail", {}, () => {}, { readOnly: true, disabled: false });
     expect(readOnlyElement.props.readOnly).toBe(true);
   });
@@ -110,7 +108,6 @@ describe("fieldtypeToTableField (cell context)", () => {
     const element = render("Administrator", {}, () => {});
     expect(element.type).toBe(Link);
     expect(element.props.doctype).toBe("User");
-    expect(element.props.compact).toBe(true);
   });
 
   it("maps Dynamic Link to a Link combobox whose doctype resolves from the row", () => {