@multiplatform.one/backoffice 7.23.1 → 7.24.0

package/src/views/ViewHeader.screen.spec.tsx

@@ -0,0 +1,185 @@
+// The alternate views' shared header (MPO-414): the switcher offers what the
+// doctype's meta supports and navigates there, and New is offered only as far
+// as the newDoc capability and the session's create right allow (MPO-390).
+import React from "react";
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { BackofficeProvider } from "../config/BackofficeProvider";
+import type { BackofficeCapabilities } from "../config/capabilities";
+import { createMemoryNavigator, type MemoryNavigator } from "../navigation/navigator";
+import type { BackofficeView } from "../navigation/paths";
+import { ViewHeader } from "./ViewHeader";
+
+const plainMeta = {
+  name: "QaHeaderNote",
+  doctype: "DocType",
+  module: "QA",
+  fields: [{ fieldname: "subject", fieldtype: "Data", label: "Subject", in_list_view: 1 }],
+  permissions: [{ role: "All", read: 1 }],
+};
+
+const imageMeta = {
+  name: "QaHeaderProduct",
+  doctype: "DocType",
+  module: "QA",
+  title_field: "product_name",
+  image_field: "photo",
+  fields: [
+    { fieldname: "product_name", fieldtype: "Data", label: "Product Name", in_list_view: 1 },
+    { fieldname: "photo", fieldtype: "Attach Image", label: "Photo" },
+  ],
+  permissions: [{ role: "All", read: 1 }],
+};
+
+const moveMeta = {
+  name: "Poke Move",
+  doctype: "DocType",
+  title_field: "move_name",
+  fields: [{ fieldname: "move_name", fieldtype: "Data", label: "Move Name", in_list_view: 1 }],
+  permissions: [
+    { role: "Pokemon Editor", read: 1, write: 1, create: 1, delete: 1 },
+    { role: "Guest", read: 1 },
+  ],
+};
+
+let run = 0;
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+function renderFixtureHeader(
+  doctype: string,
+  view: BackofficeView,
+  capabilities?: BackofficeCapabilities,
+): MemoryNavigator {
+  run += 1;
+  const navigation = createMemoryNavigator("/backoffice");
+  renderWithProviders(
+    <BackofficeProvider
+      frappe={{
+        baseURL: `https://view-header-${run}.spec.test`,
+        fixtures: new InMemoryFixtureProvider({ DocType: [plainMeta, imageMeta] }),
+      }}
+      navigation={navigation}
+      capabilities={capabilities}
+    >
+      <ViewHeader doctype={doctype} view={view} />
+    </BackofficeProvider>,
+  );
+  return navigation;
+}
+
+function json(body: unknown) {
+  return new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { "content-type": "application/json" },
+  });
+}
+
+function renderBenchHeader(roles: string[]) {
+  run += 1;
+  let rolesAnswered = false;
+  vi.stubGlobal("fetch", async (input: string | URL | Request) => {
+    const url = new URL(String(input instanceof Request ? input.url : input));
+    const method = url.pathname.replace(/^\/api\/method\//, "");
+    if (method === "frappe.auth.get_logged_user") return json({ message: "user@pokemon.test" });
+    if (method === "frappe.core.doctype.user.user.get_roles") {
+      rolesAnswered = true;
+      return json({ message: roles });
+    }
+    if (method === "frappe.desk.form.load.getdoctype") return json({ docs: [moveMeta] });
+    return json({ data: [], message: [] });
+  });
+  renderWithProviders(
+    <BackofficeProvider
+      frappe={{ baseURL: `https://view-header-bench-${run}.spec.test` }}
+      navigation={createMemoryNavigator("/backoffice")}
+    >
+      <ViewHeader doctype="Poke Move" view="report" />
+    </BackofficeProvider>,
+  );
+  return {
+    rolesAnswered: () => rolesAnswered,
+    settle: async () => {
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 300));
+      });
+    },
+  };
+}
+
+async function openSwitcher() {
+  fireEvent.click(await screen.findByTestId("list-view-switcher", {}, { timeout: 5000 }));
+  await screen.findByRole("menu", {}, { timeout: 5000 });
+}
+
+function offeredViews(): string[] {
+  return Array.from(
+    document.querySelectorAll('[role="menuitemcheckbox"]'),
+    (node) => node.textContent?.trim() ?? "",
+  );
+}
+
+describe("<ViewHeader />", () => {
+  it("titles the page with the doctype", async () => {
+    renderFixtureHeader("QaHeaderNote", "report");
+    expect(await screen.findByRole("heading", { name: "QaHeaderNote" })).toBeTruthy();
+  });
+
+  it("offers Image only when the doctype's meta has an image field", async () => {
+    renderFixtureHeader("QaHeaderProduct", "report");
+    await openSwitcher();
+    await waitFor(() => expect(offeredViews()).toContain("Image"));
+  });
+
+  it("leaves Image and Tree out for a plain doctype", async () => {
+    renderFixtureHeader("QaHeaderNote", "report");
+    await openSwitcher();
+    await waitFor(() => expect(offeredViews()).toContain("Report"));
+    expect(offeredViews()).not.toContain("Image");
+    expect(offeredViews()).not.toContain("Tree");
+  });
+
+  it("navigates to the view picked in the switcher", async () => {
+    const navigation = renderFixtureHeader("QaHeaderProduct", "report");
+    await openSwitcher();
+    const image = await waitFor(() => {
+      const item = Array.from(document.querySelectorAll('[role="menuitemcheckbox"]')).find(
+        (node) => node.textContent?.trim() === "Image",
+      );
+      expect(item).toBeTruthy();
+      return item as HTMLElement;
+    });
+    fireEvent.click(image);
+    await waitFor(() =>
+      expect(navigation.getLocation().path).toBe("/backoffice/qaheaderproduct/view/image"),
+    );
+  });
+
+  it("opens a new record from New, and hides New when the newDoc capability is off", async () => {
+    const navigation = renderFixtureHeader("QaHeaderNote", "report");
+    fireEvent.click(await screen.findByLabelText("New QaHeaderNote", {}, { timeout: 5000 }));
+    expect(navigation.getLocation().path).toBe("/backoffice/qaheadernote/new");
+
+    renderFixtureHeader("QaHeaderProduct", "report", { newDoc: false });
+    await screen.findByRole("heading", { name: "QaHeaderProduct" });
+    expect(screen.queryByLabelText("New QaHeaderProduct")).toBeNull();
+  });
+
+  it("offers an editor New on a live bench", async () => {
+    renderBenchHeader(["Pokemon Editor", "Guest"]);
+    expect(await screen.findByLabelText("New Poke Move", {}, { timeout: 5000 })).toBeTruthy();
+  });
+
+  it("offers a reader no New on a live bench", async () => {
+    const bench = renderBenchHeader(["Guest"]);
+    await screen.findByRole("heading", { name: "Poke Move" });
+    await bench.settle();
+    expect(screen.queryByLabelText("New Poke Move")).toBeNull();
+    expect(bench.rolesAnswered()).toBe(true);
+  });
+});

package/src/views/ViewHeader.tsx

@@ -5,6 +5,7 @@
 // PageHeader is the same primitive the list screen uses (LC-16).
 import { PageHeader, YStack } from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
+import { useDocRights, useFrappeConfig } from "@multiplatform.one/frappe-ui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { ArrowSquareOutIcon, PlusIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
@@ -53,6 +54,8 @@ export function ViewHeader({ doctype, view }: ViewHeaderProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const { knobProps } = useResolvedKnobs();
   const availableViews = useAvailableViews(doctype, view);
+  const { meta } = useViewMeta(doctype);
+  const { rights } = useDocRights(useFrappeConfig(), meta);
   // Desk counterpart of this exact view (fixture mode has no desk).
   const deskHref =
     frappe?.baseURL && !frappe.fixtures ? deskViewUrl(frappe.baseURL, doctype, view) : undefined;
@@ -78,7 +81,7 @@ export function ViewHeader({ doctype, view }: ViewHeaderProps) {
               current={view}
               onViewChange={(next) => navigator.navigate(paths.view(doctype, next))}
             />
-            {newDoc.enabled ? (
+            {newDoc.enabled && rights.create ? (
               <Button
                 size={knobProps.sizeToken}
                 accent

package/src/views/dashboard-data.tsx

@@ -168,13 +168,14 @@ async function fetchLiveDayCounts(
   connection: ViewConnection,
   doctype: string,
   cutoff: string,
+  scope: FrappeFilters,
 ): Promise<Map<string, number>> {
   const db = new DbModule(new HttpClient(connection.baseURL, toAuthConfig(connection.auth)));
   try {
     // Server-side per-day aggregate: bounded payload regardless of doc count.
     const rows = await db.getDocList<DayAggregateRow>(doctype, {
       fields: ["date(creation) as _day", "count(name) as _aggregate_value"],
-      filters: [["creation", ">=", cutoff]],
+      filters: [...scope, ["creation", ">=", cutoff]],
       groupBy: "date(creation)",
       limit: 0,
     });
@@ -190,7 +191,7 @@ async function fetchLiveDayCounts(
     // Grouped-by-function query rejected — fetch raw creation values instead.
     const rows = await db.getDocList<CreationRow>(doctype, {
       fields: ["creation"],
-      filters: [["creation", ">=", cutoff]],
+      filters: [...scope, ["creation", ">=", cutoff]],
       limit: 0,
     });
     return bucketRowsByDay(rows);
@@ -200,25 +201,32 @@ async function fetchLiveDayCounts(
 async function fetchFixtureDayCounts(
   fixtures: FixtureProvider,
   doctype: string,
+  scope: FrappeFilters,
 ): Promise<Map<string, number>> {
-  const rows = (await fixtures.getList(doctype, { fields: ["creation"] })) as Array<{
+  const rows = (await fixtures.getList(doctype, {
+    fields: ["creation"],
+    filters: scope,
+  })) as Array<{
     creation?: unknown;
   }>;
   return bucketRowsByDay(rows);
 }
 
 const REFETCH_DEBOUNCE_MS = 300;
+const NO_SCOPE: FrappeFilters = [];
 
 /**
  * Docs created per week over the last {@link WEEKS_WINDOW} weeks (Monday
  * buckets, empty weeks included so the series is continuous), refetched on
  * doctype realtime events with a coalescing debounce — same recompute
- * contract as `useFrappeAggregate`.
+ * contract as `useFrappeAggregate`. `scope` (the desk scope, GL-5) ANDs
+ * into both the live and the fixture query.
  */
 export function useWeeklyCreated(
   connection: ViewConnection | undefined,
   doctype: string,
   weeks: number = WEEKS_WINDOW,
+  scope: FrappeFilters = NO_SCOPE,
 ): WeeklyCreatedState {
   const [data, setData] = useState<WeeklyCreatedPoint[] | undefined>(undefined);
   const [isLoading, setIsLoading] = useState(true);
@@ -228,20 +236,20 @@ export function useWeeklyCreated(
   const fetchSeq = useRef(0);
   const connectionRef = useRef(connection);
   connectionRef.current = connection;
-  const specRef = useRef({ doctype, weeks });
-  specRef.current = { doctype, weeks };
+  const specRef = useRef({ doctype, weeks, scope });
+  specRef.current = { doctype, weeks, scope };
 
   const runFetch = useCallback(async () => {
     const conn = connectionRef.current;
-    const { doctype: currentDoctype, weeks: currentWeeks } = specRef.current;
+    const { doctype: currentDoctype, weeks: currentWeeks, scope: currentScope } = specRef.current;
     if (!conn || !currentDoctype) return;
     const seq = ++fetchSeq.current;
     try {
       const firstWeek = weekStart(new Date());
       firstWeek.setDate(firstWeek.getDate() - (currentWeeks - 1) * 7);
       const dayCounts = conn.fixtures
-        ? await fetchFixtureDayCounts(conn.fixtures, currentDoctype)
-        : await fetchLiveDayCounts(conn, currentDoctype, isoDate(firstWeek));
+        ? await fetchFixtureDayCounts(conn.fixtures, currentDoctype, currentScope)
+        : await fetchLiveDayCounts(conn, currentDoctype, isoDate(firstWeek), currentScope);
 
       const weekCounts = new Map<string, number>();
       for (const [day, count] of dayCounts) {
@@ -289,14 +297,15 @@ export function useWeeklyCreated(
 
   const baseURL = connection?.baseURL;
   const hasFixtures = !!connection?.fixtures;
+  const scopeKey = JSON.stringify(scope);
   useEffect(() => {
     if (!baseURL || !doctype) return;
     setIsLoading(true);
     setError(undefined);
     void runFetch();
-    // Refetch on connection target / doctype change only — the connection
-    // object identity churns with provider re-renders.
-  }, [baseURL, hasFixtures, doctype, weeks, runFetch]);
+    // Refetch on connection target / doctype / scope change only — the
+    // connection object identity churns with provider re-renders.
+  }, [baseURL, hasFixtures, doctype, weeks, scopeKey, runFetch]);
 
   useFrappeDoctypeEvents(
     connection as Parameters<typeof useFrappeDoctypeEvents>[0],

package/src/views/kanban-board-controls.tsx

@@ -17,13 +17,14 @@ import {
   type DropdownMenuEntry,
 } from "@multiplatform.one/components";
 import { Data } from "@multiplatform.one/frappe-ui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
 import { CaretDownIcon, DotsThreeIcon, PlusIcon } from "@phosphor-icons/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { KanbanBoardColumnConfig } from "./deskViewConfigs";
 import type { KanbanFieldOption } from "./kanban-field-picker";
+import { dialogBodyMinWidth } from "../shared/measures";
 
 // ── Board picker ──────────────────────────────────────────────
 
@@ -172,7 +173,7 @@ export function CreateBoardDialog({
         void handleConfirm();
       }}
     >
-      <YStack gap="$3" minWidth={280}>
+      <YStack gap="$3" minWidth={dialogBodyMinWidth}>
         <Text color="$color11" fontSize="$3">
           {t("views.kanbanBoardCreateBody", {
             defaultValue: "Columns come from the chosen field's options ({{doctype}}).",
@@ -300,7 +301,14 @@ export function KanbanBoardEnd({
   };
 
   return (
-    <YStack {...knobProps.gap} minWidth={160} alignItems="stretch">
+    <YStack
+      {...knobProps.gap}
+      minWidth={sizeRecipeEscape(
+        160,
+        "kanban controls: a floor so the add-column button keeps its label",
+      )}
+      alignItems="stretch"
+    >
       <Button size={knobProps.sizeToken} icon={PlusIcon} onPress={() => setAddOpen(true)}>
         {t("views.kanbanAddColumn", "Add column")}
       </Button>
@@ -343,7 +351,7 @@ export function KanbanBoardEnd({
           void handleConfirm();
         }}
       >
-        <YStack gap="$3" minWidth={280}>
+        <YStack gap="$3" minWidth={dialogBodyMinWidth}>
           <Data
             label={t("views.kanbanAddColumnName", "Column name")}
             placeholder={t("views.kanbanAddColumnPlaceholder", "e.g. In Review")}

package/src/views/report-controls.tsx

@@ -27,6 +27,7 @@ import { ArrowSquareOutIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { FrappeFilters } from "../shared/types";
+import { overlayListMaxHeight } from "../shared/measures";
 
 /** Field types the report can total / aggregate (mirrors ReportBuilder). */
 export const REPORT_NUMERIC_FIELDTYPES = new Set([
@@ -135,7 +136,7 @@ export function ReportToolbar({
             })}
           </Button>
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content maxHeight={360}>
+        <DropdownMenu.Content maxHeight={overlayListMaxHeight}>
           <DropdownMenu.Label>{t("report.pickColumns", "Report columns")}</DropdownMenu.Label>
           {columns.map((column) => {
             const lastEnabled = column.enabled && enabledCount === 1;
@@ -170,7 +171,7 @@ export function ReportToolbar({
               : t("report.groupBy", "Group by")}
           </Button>
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content maxHeight={360}>
+        <DropdownMenu.Content maxHeight={overlayListMaxHeight}>
           <DropdownMenu.CheckboxItem
             checked={!groupBy}
             closeOnSelect
@@ -238,7 +239,7 @@ export function ReportToolbar({
               })}
             </Button>
           </DropdownMenu.Trigger>
-          <DropdownMenu.Content maxHeight={360}>
+          <DropdownMenu.Content maxHeight={overlayListMaxHeight}>
             {numericColumns.map((column) => (
               <DropdownMenu.CheckboxItem
                 key={column.fieldname}
@@ -384,7 +385,7 @@ export function ReportFooter({
                 {t("report.openRecord", "Open")}
               </Button>
             </DropdownMenu.Trigger>
-            <DropdownMenu.Content maxHeight={360}>
+            <DropdownMenu.Content maxHeight={overlayListMaxHeight}>
               <DropdownMenu.Label>
                 {t("report.openRecordHint", "Open a record from this page")}
               </DropdownMenu.Label>

package/src/workspace/WorkspaceChartBlock.tsx

@@ -10,7 +10,7 @@
  */
 import { AsyncBoundary, Card, Skeleton, Text, YStack } from "@multiplatform.one/components";
 import { ChartCard, type ChartConfig, type ChartType } from "@multiplatform.one/frappe-ui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
@@ -18,6 +18,11 @@ import type { WorkspaceChartRow } from "./types";
 import { useDashboardChartData, type DashboardChartDoc } from "./useDashboardChart";
 import { useFrappeDoc } from "./useWorkspaceDoc";
 
+const chartHeight = sizeRecipeEscape(
+  220,
+  "chart block: one plot height the chart and its loading bone share",
+);
+
 function toChartType(frappeType: string | undefined): ChartType {
   switch (frappeType) {
     case "Line":
@@ -65,7 +70,7 @@ export function WorkspaceChartBlock({ row }: WorkspaceChartBlockProps) {
         label,
         value: dataset.values[index] ?? 0,
       })),
-      height: 220,
+      height: chartHeight,
     };
   }, [series, chartDoc?.type, row.name, title]);
 
@@ -88,8 +93,14 @@ export function WorkspaceChartBlock({ row }: WorkspaceChartBlockProps) {
     return (
       <Card flexGrow={1} aria-busy aria-label={t("loading", "Loading")}>
         <YStack {...knobProps.panelPadding} {...knobProps.gap}>
-          <Skeleton width="40%" height={16} />
-          <Skeleton variant="rounded" width="100%" height={220} />
+          <Skeleton
+            width="40%"
+            height={sizeRecipeEscape(
+              16,
+              "title bone: the height of the card title it stands in for",
+            )}
+          />
+          <Skeleton variant="rounded" width="100%" height={chartHeight} />
         </YStack>
       </Card>
     );

package/src/workspace/WorkspaceLinkCard.tsx

@@ -104,7 +104,7 @@ function LinkRow({
       cursor={disabled ? "default" : "pointer"}
       paddingVertical="$1.5"
       paddingHorizontal={pad}
-      minHeight={36}
+      minHeight="$3"
       alignItems="center"
       role="link"
       aria-label={row.label}
@@ -208,7 +208,7 @@ export function WorkspaceLinkCard({ group, collapse = true }: WorkspaceLinkCardP
               cursor="pointer"
               paddingVertical="$1.5"
               paddingHorizontal={pad}
-              minHeight={36}
+              minHeight="$3"
               alignItems="center"
               role="button"
               aria-expanded={expanded}

package/src/workspace/WorkspaceLinkDirectory.tsx

@@ -11,7 +11,11 @@
  */
 import { EmptyState, Accordion, YStack } from "@multiplatform.one/components";
 import { SearchInput, useViewportGtSm } from "@multiplatform.one/forms";
-import { ensureCompositeFocusRing, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  FOCUS_RING_MIN_WIDTH,
+  ensureCompositeFocusRing,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
@@ -95,7 +99,11 @@ export function WorkspaceLinkDirectory({ items }: WorkspaceLinkDirectoryProps) {
             {/* LC-71: 2px pad = default ring offset, so Accordion's clip
                 cannot cut the whole-box ring. Inner Area outline is
                 suppressed — the Box (magnifier included) carries it. */}
-            <YStack padding={2} overflow="visible" data-testid="workspace-filter-links">
+            <YStack
+              padding={FOCUS_RING_MIN_WIDTH}
+              overflow="visible"
+              data-testid="workspace-filter-links"
+            >
               <SearchInput
                 value={filter}
                 onChange={setFilter}

package/src/workspace/WorkspaceNumberCard.tsx

@@ -75,8 +75,8 @@ export function WorkspaceNumberCard({ row }: WorkspaceNumberCardProps) {
     return (
       <Card flexGrow={1} aria-busy aria-label={t("loading", "Loading")}>
         <YStack {...knobProps.panelPadding} {...knobProps.gap}>
-          <Skeleton width="60%" height={12} />
-          <Skeleton width="40%" height={28} />
+          <Skeleton width="60%" />
+          <Skeleton width="40%" height="$2" />
         </YStack>
       </Card>
     );

package/src/workspace/WorkspaceQuickList.tsx

@@ -8,6 +8,7 @@
 import { Card, Separator, Text, XStack, YStack } from "@multiplatform.one/components";
 import { FrappeList } from "@multiplatform.one/frappe-ui";
 import {
+  TOUCH_HEIGHT_FLOOR,
   ensureFocusVisibleRing,
   FOCUS_RING_HALO_OFFSET,
   useResolvedKnobs,
@@ -97,7 +98,7 @@ export function WorkspaceQuickList({ row }: WorkspaceQuickListProps) {
             <XStack
               paddingVertical="$2"
               paddingHorizontal={pad}
-              minHeight={44}
+              minHeight={TOUCH_HEIGHT_FLOOR}
               alignItems="center"
               cursor="pointer"
               overflow="hidden"

package/src/workspace/WorkspaceRecents.tsx

@@ -13,7 +13,11 @@
  */
 import { ClockCounterClockwiseIcon } from "@phosphor-icons/react";
 import { Card, PageSection, Text, XStack, useTheme } from "@multiplatform.one/components";
-import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  TOUCH_HEIGHT_FLOOR,
+  ensureFocusVisibleRing,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { readRecentItems, type RecentItem } from "../chrome/awesomebar-data";
@@ -90,7 +94,12 @@ export function WorkspaceRecents() {
             // rectangle on the page ground, so no LC-71 §4 carve-out (MPO-92).
             focusVisibleStyle={ensureFocusVisibleRing()}
           >
-            <XStack paddingHorizontal="$3" minHeight={44} alignItems="center" {...knobProps.gap}>
+            <XStack
+              paddingHorizontal="$3"
+              minHeight={TOUCH_HEIGHT_FLOOR}
+              alignItems="center"
+              {...knobProps.gap}
+            >
               <ClockCounterClockwiseIcon size={iconSize} color={iconColor} aria-hidden />
               <Text {...knobProps.label} fontWeight="400" numberOfLines={1} flexShrink={1}>
                 {item.label}

package/src/workspace/WorkspaceScreen.tsx

@@ -31,7 +31,7 @@ import {
   XStack,
   YStack,
 } from "@multiplatform.one/components";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { TOUCH_HEIGHT_FLOOR, sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useMemo, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
@@ -148,6 +148,15 @@ function blockToGridItem(block: WorkspaceBlock, doc: WorkspaceDoc): WorkspaceGri
   }
 }
 
+const chipBoneWidths = sizeRecipeEscape(
+  [128, 104, 144, 112],
+  "loading bones: placeholder chip widths and card height for content that has not loaded",
+);
+const cardBoneHeight = sizeRecipeEscape(
+  200,
+  "loading bones: placeholder chip widths and card height for content that has not loaded",
+);
+
 function WorkspaceSkeleton() {
   const { knobProps } = useResolvedKnobs();
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
@@ -155,17 +164,16 @@ function WorkspaceSkeleton() {
   // band (44px chips, deterministic widths), then the content card region.
   return (
     <YStack {...knobProps.gapLg} aria-busy aria-label={t("loading", "Loading")}>
-      <Skeleton width="30%" height={32} />
+      <Skeleton width="30%" height="$2.5" />
       <XStack {...knobProps.gap}>
-        <Skeleton variant="rounded" width={128} height={44} />
-        <Skeleton variant="rounded" width={104} height={44} />
-        <Skeleton variant="rounded" width={144} height={44} />
-        <Skeleton variant="rounded" width={112} height={44} />
+        {chipBoneWidths.map((width) => (
+          <Skeleton key={width} variant="rounded" width={width} height={TOUCH_HEIGHT_FLOOR} />
+        ))}
       </XStack>
       <XStack {...knobProps.gap}>
-        <Skeleton variant="rounded" width="32%" height={200} />
-        <Skeleton variant="rounded" width="32%" height={200} />
-        <Skeleton variant="rounded" width="32%" height={200} />
+        <Skeleton variant="rounded" width="32%" height={cardBoneHeight} />
+        <Skeleton variant="rounded" width="32%" height={cardBoneHeight} />
+        <Skeleton variant="rounded" width="32%" height={cardBoneHeight} />
       </XStack>
     </YStack>
   );

package/src/workspace/WorkspaceShortcut.tsx

@@ -26,7 +26,12 @@ import {
 import { Card, Chip, Skeleton, Text, XStack, useTheme } from "@multiplatform.one/components";
 import { useFrappeAggregate, useFrappeConfig } from "@multiplatform.one/frappe-ui";
 import { openUrl } from "@multiplatform.one/platform";
-import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  TOUCH_HEIGHT_FLOOR,
+  ensureFocusVisibleRing,
+  sizeRecipeEscape,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -217,14 +222,26 @@ export function WorkspaceShortcut({ row, onPress }: WorkspaceShortcutProps) {
     >
       {/* Compact chip anatomy: icon + label + count, ≥44px press target
           (DG-LAY-04), self-sized so the band wraps instead of stretching. */}
-      <XStack paddingHorizontal="$3" minHeight={44} alignItems="center" {...knobProps.gap}>
+      <XStack
+        paddingHorizontal="$3"
+        minHeight={TOUCH_HEIGHT_FLOOR}
+        alignItems="center"
+        {...knobProps.gap}
+      >
         <TypeIcon size={iconSize} color={iconColor} aria-hidden />
         <Text {...knobProps.label} fontWeight="400" numberOfLines={1} flexShrink={1}>
           {row.label}
         </Text>
         {isDoctype ? (
           countLoading ? (
-            <Skeleton variant="rounded" width={28} height={16} />
+            <Skeleton
+              variant="rounded"
+              width="$2"
+              height={sizeRecipeEscape(
+                16,
+                "count bone: the height of the count badge it stands in for",
+              )}
+            />
           ) : countError ? null : countLabel !== undefined ? (
             <Chip size="$2" variant="subtle" color="gray">
               {countLabel}