@multiplatform.one/backoffice 7.23.0 → 7.23.2

package/src/shared/measures.ts

@@ -0,0 +1,11 @@
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
+
+export const dialogBodyMinWidth = sizeRecipeEscape(
+  280,
+  "dialog body floor: a reading width for the form inside a dialog or popover",
+);
+
+export const overlayListMaxHeight = sizeRecipeEscape(
+  360,
+  "overlay list cap: a menu or popover list scrolls past this height instead of growing",
+);

package/src/shell/BackofficeShell.tsx

@@ -20,7 +20,12 @@
 import { SizableText, SkipLink, XStack, YStack, isWeb } from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
 import * as componentsBarrel from "@multiplatform.one/components";
-import { hairline, useLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  hairline,
+  sizeRecipeEscape,
+  useLayoutSizeClass,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { ListIcon, XIcon } from "@phosphor-icons/react";
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
@@ -172,7 +177,14 @@ export function BackofficeShell({ children, activePath, onNavigate }: Backoffice
           when the awesomebar capability is off) */}
       <XStack flex={1} minWidth={0} justifyContent="center">
         {capabilities.awesomebar.enabled && (
-          <XStack flex={1} maxWidth={560} minWidth={0}>
+          <XStack
+            flex={1}
+            maxWidth={sizeRecipeEscape(
+              560,
+              "awesomebar: caps the centred search field in the banner",
+            )}
+            minWidth={0}
+          >
             <BackofficeAwesomebar focusRef={awesomebarRef} />
           </XStack>
         )}

package/src/shell/NotFoundScreen.stories.tsx

@@ -7,10 +7,16 @@
 import { YStack } from "@multiplatform.one/components";
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import type { ReactNode } from "react";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { BackofficeProvider } from "../config/BackofficeProvider";
 import { createMemoryNavigator } from "../navigation/navigator";
 import { NotFoundScreen } from "./NotFoundScreen";
 
+const frameHeight = sizeRecipeEscape(
+  420,
+  "story canvas: a fixed-height frame for a full-height screen to fill",
+);
+
 const meta = {
   title: "Screens/Backoffice/NotFoundScreen",
   component: NotFoundScreen,
@@ -46,7 +52,7 @@ function Host({
       frappe={{ baseURL: MOCK_HOST, fixtures: new InMemoryFixtureProvider({}) }}
       navigation={navigation}
     >
-      <YStack flex={1} height={420} justifyContent="center">
+      <YStack flex={1} height={frameHeight} justifyContent="center">
         {children}
       </YStack>
     </BackofficeProvider>

package/src/views/DashboardView.tsx

@@ -18,7 +18,7 @@ import {
   YStack,
 } from "@multiplatform.one/components";
 import { ChartCard, FrappeChartCard, FrappeKPICard } from "@multiplatform.one/frappe-ui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider";
@@ -37,13 +37,32 @@ import { selectFieldOptions, useViewMeta } from "./viewMeta";
 import { ViewError, ViewLoading } from "./ViewStates";
 
 const CHART_HEIGHT = 220;
+const kpiColumnWidth = sizeRecipeEscape(
+  220,
+  "dashboard grid: cards share a row until a column drops below its floor, then wrap",
+);
+const statusColumnWidth = sizeRecipeEscape(
+  180,
+  "dashboard grid: cards share a row until a column drops below its floor, then wrap",
+);
+const chartColumnBasis = sizeRecipeEscape(
+  360,
+  "dashboard grid: cards share a row until a column drops below its floor, then wrap",
+);
+const chartColumnMinWidth = sizeRecipeEscape(
+  300,
+  "dashboard grid: cards share a row until a column drops below its floor, then wrap",
+);
 
 /** Card-shaped chart skeleton so the first load doesn't jump layout. */
 function ChartSkeletonCard({ height }: { height: number }) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   return (
     <Card aria-busy aria-label={t("views.loading", "Loading")}>
-      <Skeleton width="40%" height={16} />
+      <Skeleton
+        width="40%"
+        height={sizeRecipeEscape(16, "title bone: the height of the card title it stands in for")}
+      />
       <Skeleton variant="rounded" width="100%" height={height} />
     </Card>
   );
@@ -82,7 +101,7 @@ export function DashboardView({ doctype }: DashboardViewProps) {
     <ScrollView flex={1}>
       <YStack {...knobProps.panelPadding} {...knobProps.gap}>
         <XStack {...knobProps.gap} flexWrap="wrap">
-          <YStack flexGrow={1} flexBasis={220} minWidth={220}>
+          <YStack flexGrow={1} flexBasis={kpiColumnWidth} minWidth={kpiColumnWidth}>
             <FrappeKPICard
               config={{
                 id: "total",
@@ -93,7 +112,7 @@ export function DashboardView({ doctype }: DashboardViewProps) {
               dataSource={{ doctype }}
             />
           </YStack>
-          <YStack flexGrow={1} flexBasis={220} minWidth={220}>
+          <YStack flexGrow={1} flexBasis={kpiColumnWidth} minWidth={kpiColumnWidth}>
             <FrappeKPICard
               config={{
                 id: "created-30d",
@@ -107,7 +126,7 @@ export function DashboardView({ doctype }: DashboardViewProps) {
               }}
             />
           </YStack>
-          <YStack flexGrow={1} flexBasis={220} minWidth={220}>
+          <YStack flexGrow={1} flexBasis={kpiColumnWidth} minWidth={kpiColumnWidth}>
             <FrappeKPICard
               config={{
                 id: "modified-7d",
@@ -126,7 +145,12 @@ export function DashboardView({ doctype }: DashboardViewProps) {
         {statusField && statusOptions.length > 0 && (
           <XStack {...knobProps.gap} flexWrap="wrap">
             {statusOptions.map((option) => (
-              <YStack key={option} flexGrow={1} flexBasis={180} minWidth={180}>
+              <YStack
+                key={option}
+                flexGrow={1}
+                flexBasis={statusColumnWidth}
+                minWidth={statusColumnWidth}
+              >
                 <FrappeKPICard
                   config={{
                     id: `status-${option}`,
@@ -149,7 +173,7 @@ export function DashboardView({ doctype }: DashboardViewProps) {
         )}
 
         <XStack {...knobProps.gap} flexWrap="wrap">
-          <YStack flexGrow={1} flexBasis={360} minWidth={300}>
+          <YStack flexGrow={1} flexBasis={chartColumnBasis} minWidth={chartColumnMinWidth}>
             {weekly.isLoading ? (
               <ChartSkeletonCard height={CHART_HEIGHT} />
             ) : weekly.error ? (
@@ -186,7 +210,7 @@ export function DashboardView({ doctype }: DashboardViewProps) {
             )}
           </YStack>
           {statusField && (
-            <YStack flexGrow={1} flexBasis={360} minWidth={300}>
+            <YStack flexGrow={1} flexBasis={chartColumnBasis} minWidth={chartColumnMinWidth}>
               <FrappeChartCard
                 config={{
                   id: `by-${statusField.fieldname}`,

package/src/views/DoctypeViewScreen.stories.tsx

@@ -12,11 +12,17 @@
 // so an arm sets them by seeding the MemoryNavigator path.
 import { YStack } from "@multiplatform.one/components";
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { sizeRecipeEscape } from "@multiplatform.one/theme";
 import { BackofficeProvider } from "../config/BackofficeProvider";
 import { createMemoryNavigator } from "../navigation/navigator";
 import type { BackofficeView } from "../navigation/paths";
 import { DoctypeViewScreen } from "./DoctypeViewScreen";
 
+const frameHeight = sizeRecipeEscape(
+  600,
+  "story canvas: a fixed-height frame for a full-height screen to fill",
+);
+
 const meta = {
   title: "Screens/Backoffice/DoctypeViewScreen",
   component: DoctypeViewScreen,
@@ -212,7 +218,7 @@ function View({ doctype, view, path }: { doctype: string; view: BackofficeView;
       frappe={{ baseURL: MOCK_HOST, fixtures: makeFixtures() }}
       navigation={createMemoryNavigator(path ?? "/backoffice")}
     >
-      <YStack flex={1} height={600} minHeight={0}>
+      <YStack flex={1} height={frameHeight} minHeight={0}>
         <DoctypeViewScreen doctype={doctype} view={view} />
       </YStack>
     </BackofficeProvider>

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}

package/src/workspace/clientCache.auth.spec.ts

@@ -0,0 +1,65 @@
+// The workspace hooks cache their REST client per connection. Two
+// connections to one bench that differ only in useToken must not share a
+// client, or the first one built decides whether the other sends its token
+// (MPO-406). The bench answers a tokenless call as Guest.
+import { renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useDashboardChartData } from "./useDashboardChart";
+import { useWorkspaceDoc } from "./useWorkspaceDoc";
+
+const provider = vi.hoisted(() => ({ config: undefined as unknown }));
+vi.mock("@multiplatform.one/frappe-ui", () => ({ useFrappeConfig: () => provider.config }));
+
+const token = "token key:secret";
+let sent: (string | null)[] = [];
+
+beforeEach(() => {
+  sent = [];
+  vi.stubGlobal("fetch", async (input: string | URL | Request, init?: RequestInit) => {
+    sent.push(new Headers(init?.headers).get("Authorization"));
+    const url = new URL(String(input));
+    const body = url.pathname.startsWith("/api/resource/")
+      ? { data: { name: "Home", doctype: "Workspace" } }
+      : { message: { labels: [], datasets: [] } };
+    return new Response(JSON.stringify(body), {
+      headers: { "content-type": "application/json" },
+    });
+  });
+});
+
+afterEach(() => vi.unstubAllGlobals());
+
+async function authorizationPerConnection(
+  baseURL: string,
+  mount: () => () => boolean,
+): Promise<{ off: (string | null)[]; on: (string | null)[] }> {
+  const auth = (useToken: boolean) => ({ useToken, token: "key:secret", type: "token" });
+  provider.config = { baseURL, realtime: false, auth: auth(false) };
+  const offSettled = mount();
+  await waitFor(() => expect(offSettled()).toBe(true));
+  const off = sent.splice(0);
+  provider.config = { baseURL, realtime: false, auth: auth(true) };
+  const onSettled = mount();
+  await waitFor(() => expect(onSettled()).toBe(true));
+  return { off, on: sent.splice(0) };
+}
+
+describe("workspace REST clients never drop a connection's token", () => {
+  it("useDashboardChartData", async () => {
+    const { off, on } = await authorizationPerConnection("http://chart-auth.test", () => {
+      const { result } = renderHook(() => useDashboardChartData("Sales"));
+      return () => !result.current.isLoading && !!result.current.series;
+    });
+    expect(off).toEqual([null]);
+    expect(on).toEqual([token]);
+  });
+
+  it("useWorkspaceDoc", async () => {
+    const { off, on } = await authorizationPerConnection("http://workspace-auth.test", () => {
+      const { result } = renderHook(() => useWorkspaceDoc("Home"));
+      return () => !result.current.isLoading && !!result.current.doc;
+    });
+    expect(off).toEqual([null]);
+    expect(on).toEqual([token]);
+  });
+});

package/src/workspace/useDashboardChart.ts

@@ -44,7 +44,7 @@ export interface UseDashboardChartDataResult {
 const callCache = new Map<string, CallModule>();
 
 function getCall(baseURL: string, auth: FrappeConfig["auth"]): CallModule {
-  const key = `${baseURL}:${auth?.token ?? ""}:${auth?.type ?? ""}`;
+  const key = `${baseURL}:${auth?.useToken ? "t" : ""}:${auth?.token ?? ""}:${auth?.type ?? ""}`;
   let call = callCache.get(key);
   if (!call) {
     const authConfig: AuthConfig | undefined = auth

package/src/workspace/useWorkspaceDoc.ts

@@ -15,7 +15,7 @@ import type { WorkspaceDoc } from "./types";
 const dbCache = new Map<string, DbModule>();
 
 function getDb(baseURL: string, auth: FrappeConfig["auth"]): DbModule {
-  const key = `${baseURL}:${auth?.token ?? ""}:${auth?.type ?? ""}`;
+  const key = `${baseURL}:${auth?.useToken ? "t" : ""}:${auth?.token ?? ""}:${auth?.type ?? ""}`;
   let db = dbCache.get(key);
   if (!db) {
     const authConfig: AuthConfig | undefined = auth

package/types/chrome/help-about-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"help-about-dialog.d.ts","sourceRoot":"","sources":["../../src/chrome/help-about-dialog.tsx"],"names":[],"mappings":"AAuBA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAMD,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAED,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,oBAAoB,2CA0F3E"}
+{"version":3,"file":"help-about-dialog.d.ts","sourceRoot":"","sources":["../../src/chrome/help-about-dialog.tsx"],"names":[],"mappings":"AAwBA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAMD,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAED,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,oBAAoB,2CA6F3E"}

package/types/chrome/help-shortcuts-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"help-shortcuts-dialog.d.ts","sourceRoot":"","sources":["../../src/chrome/help-shortcuts-dialog.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAqED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,wBAAwB,2CAoDnF"}
+{"version":3,"file":"help-shortcuts-dialog.d.ts","sourceRoot":"","sources":["../../src/chrome/help-shortcuts-dialog.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AA8ED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,wBAAwB,2CAuDnF"}

package/types/chrome/notifications-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notifications-panel.d.ts","sourceRoot":"","sources":["../../src/chrome/notifications-panel.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9C,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAsFD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,aAAa,GACd,EAAE,uBAAuB,2CAgEzB"}
+{"version":3,"file":"notifications-panel.d.ts","sourceRoot":"","sources":["../../src/chrome/notifications-panel.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9C,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AA4FD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,EACX,aAAa,GACd,EAAE,uBAAuB,2CAgEzB"}

package/types/form/FormConnections.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormConnections.d.ts","sourceRoot":"","sources":["../../src/form/FormConnections.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAY5D,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAkKD,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CA2DtF"}
+{"version":3,"file":"FormConnections.d.ts","sourceRoot":"","sources":["../../src/form/FormConnections.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAY5D,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAoMD,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CA2DtF"}