@multiplatform.one/backoffice 7.4.1 → 7.6.0

package/src/backofficeScreens.designLaw.spec.ts

@@ -0,0 +1,160 @@
+/**
+ * MPO-60 design-law source contracts for remaining Screens/Backoffice chrome.
+ * Rulings: /tmp/cursor-mpo-lanes/RULINGS-2026-08-28.md (R7 weight 400; R6 size
+ * table; R2 single-line pill). `one` stays behind ./one-adapter.
+ */
+import fs from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+
+const srcDir = path.resolve(__dirname);
+const repoRoot = path.resolve(__dirname, "../../..");
+
+function read(rel: string): string {
+  return fs.readFileSync(path.resolve(srcDir, rel), "utf-8");
+}
+
+describe("Backoffice screens — design-law 100%", () => {
+  it("does not import one outside oneAdapter", () => {
+    const adapter = read("oneAdapter/index.tsx");
+    expect(adapter).toMatch(/from ["']one["']/);
+    const walk = (dir: string) => {
+      for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+        const full = path.join(dir, entry.name);
+        if (entry.isDirectory()) {
+          if (entry.name === "oneAdapter") continue;
+          walk(full);
+          continue;
+        }
+        if (!/\.(tsx|ts)$/.test(entry.name) || entry.name.includes(".spec.")) continue;
+        const source = fs.readFileSync(full, "utf-8");
+        expect(source, full).not.toMatch(/from ["']one["']/);
+        expect(source, full).not.toMatch(/from ["']one\//);
+      }
+    };
+    walk(srcDir);
+  });
+
+  it("ListBulkActionsBar rides complete surface fragments and R7 weight 400", () => {
+    const source = read("list/ListBulkActionsBar.tsx");
+    expect(source).toContain("useResolvedKnobs");
+    expect(source).toContain("knobProps.surface");
+    expect(source).toContain("knobProps.borderRadius");
+    expect(source).toContain("knobProps.panelPadding");
+    expect(source).toContain('fontWeight="400"');
+    expect(source).not.toMatch(/fontWeight="600"|fontWeight="500"/);
+    expect(source).toMatch(/import \{ Button \} from "@multiplatform.one\/forms"/);
+  });
+
+  it("KanbanView card title uses the label fragment, not sizeToken as fontSize (LC-65)", () => {
+    const source = read("views/KanbanView.tsx");
+    expect(source).not.toMatch(/fontSize=\{knobProps\.sizeToken\}/);
+    expect(source).toContain("knobProps.label");
+    expect(source).not.toMatch(/fontWeight="500"|fontWeight="700"/);
+  });
+
+  it("FormToolbar title rides pageTitle + heading; icons ride controlIcon", () => {
+    const source = read("form/FormToolbar.tsx");
+    expect(source).toContain("knobProps.pageTitle");
+    expect(source).toContain("knobProps.heading");
+    expect(source).toContain("controlIcon");
+    expect(source).toContain("iconSize");
+    expect(source).not.toMatch(/size=\{16\}|size=\{18\}/);
+  });
+
+  it("DoctypeListScreen and QueryReportScreen page frames spread gap + panelPadding", () => {
+    const list = read("list/DoctypeListScreen.tsx");
+    expect(list).toContain("knobProps.panelPadding");
+    expect(list).toContain("knobProps.pageTitle");
+    const report = read("report/QueryReportScreen.tsx");
+    expect(report).toContain("knobProps.panelPadding");
+    expect(report).toContain("knobProps.gap");
+  });
+
+  it("report filter chips are catalog Chip, not a private 999-radius pill", () => {
+    const source = read("views/report-controls.tsx");
+    expect(source).toContain("<Chip");
+    expect(source).not.toMatch(/borderRadius=\{999\}/);
+    expect(source).toContain("formatNumber");
+    expect(source).not.toContain("toLocaleString");
+  });
+
+  it("list indicator pills and report toolbar filters are catalog Chip, not 999-radius wells", () => {
+    expect(read("list/listColumns.tsx")).toContain("<Chip");
+    expect(read("list/listColumns.tsx")).not.toMatch(/borderRadius=\{999\}/);
+    expect(read("report/report-toolbar.tsx")).toContain("<Chip");
+    expect(read("report/report-toolbar.tsx")).not.toMatch(/borderRadius=\{999\}/);
+  });
+
+  it("Workspace shortcut counts are catalog Chip; labels and titles weight 400", () => {
+    const shortcut = read("workspace/WorkspaceShortcut.tsx");
+    expect(shortcut).toContain("<Chip");
+    expect(shortcut).toContain("knobProps.label");
+    expect(shortcut).toContain("controlIcon");
+    expect(shortcut).not.toMatch(/borderRadius=\{1000\}|borderRadius=\{999\}/);
+    expect(shortcut).not.toMatch(/fontWeight="600"|fontWeight="500"|fontWeight="700"/);
+    expect(shortcut).not.toMatch(/size=\{16\}|size=\{14\}/);
+    const recents = read("workspace/WorkspaceRecents.tsx");
+    expect(recents).toContain("knobProps.label");
+    expect(recents).toContain("controlIcon");
+    expect(recents).not.toMatch(/size=\{14\}/);
+    for (const rel of [
+      "workspace/WorkspaceNumberCard.tsx",
+      "workspace/WorkspaceQuickList.tsx",
+      "workspace/WorkspaceChartBlock.tsx",
+      "workspace/WorkspaceLinkCard.tsx",
+    ]) {
+      const source = read(rel);
+      expect(source, rel).toMatch(/knobProps\.(heading|label)/);
+      expect(source, rel).not.toMatch(/fontWeight="600"|fontWeight="500"|fontWeight="700"/);
+    }
+  });
+
+  it("query-report filter bar spreads gap + panelPadding", () => {
+    const source = read("report/queryReportFilterBar.tsx");
+    expect(source).toContain("knobProps.gap");
+    expect(source).toContain("knobProps.panelPadding");
+    expect(source).not.toMatch(/gap="\$2"/);
+  });
+
+  it("listed Screens/Backoffice stories export named meta with status stable", () => {
+    const stories = [
+      "features/backoffice/views/CalendarView.stories.tsx",
+      "features/backoffice/views/DashboardView.stories.tsx",
+      "features/backoffice/form/DocFormScreen.stories.tsx",
+      "features/backoffice/list/DoctypeListScreen.stories.tsx",
+      "features/backoffice/report/DoctypeReportView.stories.tsx",
+      "features/backoffice/form/FormConnections.stories.tsx",
+      "features/backoffice/form/FormDialogs.stories.tsx",
+      "features/backoffice/form/FormSidebarPanel.stories.tsx",
+      "features/backoffice/form/FormTimeline.stories.tsx",
+      "features/backoffice/form/FormToolbar.stories.tsx",
+      "features/backoffice/form/FormToolbarPager.stories.tsx",
+      "features/backoffice/chrome/HelpMenu.stories.tsx",
+      "features/backoffice/views/ImageView.stories.tsx",
+      "features/backoffice/views/KanbanView.stories.tsx",
+      "features/backoffice/views/KanbanBoardControls.stories.tsx",
+      "features/backoffice/list/ListBulkActionsBar.stories.tsx",
+      "features/backoffice/list/ListBulkDialogs.stories.tsx",
+      "features/backoffice/list/ListFilterBar.stories.tsx",
+      "features/backoffice/list/ListSidebar.stories.tsx",
+      "features/backoffice/chrome/NotificationsButton.stories.tsx",
+      "features/backoffice/report/QueryReportScreen.stories.tsx",
+      "features/backoffice/report/QueryReportFilters.stories.tsx",
+      "features/backoffice/quickEntry/QuickEntryDialog.stories.tsx",
+      "features/backoffice/views/ReportView.stories.tsx",
+      "features/backoffice/shell/BackofficeShell.stories.tsx",
+      "features/backoffice/chrome/UserMenu.stories.tsx",
+      "features/backoffice/views/ViewHeader.stories.tsx",
+      "features/backoffice/workspace/WorkspaceScreen.stories.tsx",
+      "features/todos/Todos.stories.tsx",
+      "features/wallet/Wallet.stories.tsx",
+    ];
+    for (const rel of stories) {
+      const source = fs.readFileSync(path.join(repoRoot, rel), "utf-8");
+      expect(source, rel).toContain("const meta =");
+      expect(source, rel).toContain("export default meta");
+      expect(source, rel).toContain('status: { type: "stable" }');
+    }
+  });
+});

package/src/chrome/HelpMenu.tsx

@@ -7,7 +7,8 @@
 //
 // Catalog DropdownMenu (not a padded Popover of Buttons): SP-EDGE rows,
 // LC-71 keyboard ring on the focused item, LC-21 COMMIT close-on-pick.
-import { Button, DropdownMenu } from "@multiplatform.one/components";
+import { DropdownMenu } from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
 import { openUrl } from "@multiplatform.one/platform";
 import {
   BookOpenIcon,
@@ -17,6 +18,7 @@ import {
   KeyboardIcon,
   QuestionIcon,
 } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
@@ -29,6 +31,8 @@ const REPORT_ISSUE_URL = "https://github.com/frappe/frappe/issues";
 
 export function HelpMenu() {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const iconSize = Number(knobProps.controlIcon?.width) || 16;
   const [menuOpen, setMenuOpen] = useState(false);
   const [aboutOpen, setAboutOpen] = useState(false);
   const [shortcutsOpen, setShortcutsOpen] = useState(false);
@@ -48,7 +52,7 @@ export function HelpMenu() {
           <Button
             chromeless
             circular
-            size="$3"
+            size={knobProps.sizeToken}
             icon={QuestionIcon}
             aria-label={t("help.label", "Help")}
             data-testid="backoffice-help-trigger"
@@ -56,21 +60,21 @@ export function HelpMenu() {
         </DropdownMenu.Trigger>
         <DropdownMenu.Content minWidth={220} data-testid="backoffice-help-menu">
           <DropdownMenu.Item
-            icon={<BookOpenIcon size={16} />}
+            icon={<BookOpenIcon size={iconSize} />}
             onSelect={() => openLink(DOCUMENTATION_URL)}
             data-testid="backoffice-help-documentation"
           >
             {t("help.documentation", "Documentation")}
           </DropdownMenu.Item>
           <DropdownMenu.Item
-            icon={<ChatsCircleIcon size={16} />}
+            icon={<ChatsCircleIcon size={iconSize} />}
             onSelect={() => openLink(USER_FORUM_URL)}
             data-testid="backoffice-help-forum"
           >
             {t("help.userForum", "User Forum")}
           </DropdownMenu.Item>
           <DropdownMenu.Item
-            icon={<BugIcon size={16} />}
+            icon={<BugIcon size={iconSize} />}
             onSelect={() => openLink(REPORT_ISSUE_URL)}
             data-testid="backoffice-help-report-issue"
           >
@@ -78,14 +82,14 @@ export function HelpMenu() {
           </DropdownMenu.Item>
           <DropdownMenu.Separator />
           <DropdownMenu.Item
-            icon={<KeyboardIcon size={16} />}
+            icon={<KeyboardIcon size={iconSize} />}
             onSelect={() => openDialog(setShortcutsOpen)}
             data-testid="backoffice-help-shortcuts"
           >
             {t("help.keyboardShortcuts", "Keyboard Shortcuts")}
           </DropdownMenu.Item>
           <DropdownMenu.Item
-            icon={<InfoIcon size={16} />}
+            icon={<InfoIcon size={iconSize} />}
             onSelect={() => openDialog(setAboutOpen)}
             data-testid="backoffice-help-about"
           >

package/src/chrome/NotificationsButton.tsx

@@ -7,6 +7,7 @@ import { Badge } from "@multiplatform.one/components";
 // its own glyph (LC-54, LC-53 icon slot).
 import { Button, FloatingPanel, useViewportGtSm } from "@multiplatform.one/forms";
 import { BellIcon } from "@phosphor-icons/react";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -23,6 +24,7 @@ const PANEL_WIDTH = 400;
 
 export function NotificationsButton() {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
   const navigator = useBackofficeNavigator();
   const paths = useBackofficePaths();
   const { emitEvent } = useBackofficeConfig();
@@ -70,7 +72,7 @@ export function NotificationsButton() {
           <Button
             chromeless
             circular
-            size="$3"
+            size={knobProps.sizeToken}
             icon={BellIcon}
             aria-label={label}
             data-testid="backoffice-notifications-button"

package/src/chrome/UserMenu.tsx

@@ -3,15 +3,10 @@
 // hosts without one get a disabled item (GJS/story parity). The logout and
 // theme items are individually gated by the userMenu capability config.
 import React from "react";
-import {
-  Avatar,
-  Button,
-  DropdownMenu,
-  SizableText,
-  YStack,
-  isWeb,
-} from "@multiplatform.one/components";
+import { Avatar, DropdownMenu, SizableText, YStack, isWeb } from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
 import { useFrappeConfig } from "@multiplatform.one/frappe-ui";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -31,6 +26,7 @@ export interface UserMenuProps {
 
 export function UserMenu({ defaultOpen }: UserMenuProps = {}) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
   const navigator = useBackofficeNavigator();
   const paths = useBackofficePaths();
   const { appearance } = useBackofficeConfig();
@@ -86,15 +82,24 @@ export function UserMenu({ defaultOpen }: UserMenuProps = {}) {
   return (
     <DropdownMenu placement="bottom-end" defaultOpen={defaultOpen}>
       <DropdownMenu.Trigger asChild>
-        <Button chromeless circular size="$3" aria-label={t("userMenu.label", "User menu")}>
-          <Avatar size={26} src={info?.imageUrl} name={info?.fullName ?? info?.user} />
+        <Button
+          chromeless
+          circular
+          size={knobProps.sizeToken}
+          aria-label={t("userMenu.label", "User menu")}
+        >
+          <Avatar
+            size={knobProps.sizeToken === "$5" ? "$3" : knobProps.sizeToken === "$3" ? "$1" : "$2"}
+            src={info?.imageUrl}
+            name={info?.fullName ?? info?.user}
+          />
         </Button>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content minWidth={240}>
         {info ? (
           <>
-            <YStack paddingHorizontal="$3" paddingVertical="$2.5" gap="$0.5">
-              <SizableText size="$3" fontWeight="600" numberOfLines={1}>
+            <YStack {...knobProps.panelPadding} {...knobProps.gap} paddingVertical="$2">
+              <SizableText {...knobProps.label} fontWeight="400" numberOfLines={1}>
                 {info.fullName}
               </SizableText>
               {info.email ? (

package/src/chrome/help-about-dialog.tsx

@@ -91,7 +91,7 @@ export function HelpAboutDialog({ open, onOpenChange }: HelpAboutDialogProps) {
             </Paragraph>
           </Dialog.Description>
           <YStack gap="$2" marginTop="$2">
-            <SizableText size="$2" fontWeight="700" color="$color10" textTransform="uppercase">
+            <SizableText size="$2" fontWeight="400" color="$color10" textTransform="uppercase">
               {t("help.installedApps", "Installed Apps")}
             </SizableText>
             {loading && (
@@ -107,7 +107,7 @@ export function HelpAboutDialog({ open, onOpenChange }: HelpAboutDialogProps) {
             {!loading &&
               entries.map(([key, info]) => (
                 <XStack key={key} gap="$3" alignItems="baseline" justifyContent="space-between">
-                  <SizableText size="$3" fontWeight="600" flex={1} numberOfLines={1}>
+                  <SizableText size="$3" fontWeight="400" flex={1} numberOfLines={1}>
                     {info.title || key}
                   </SizableText>
                   <SizableText size="$3" color="$color11" flexShrink={0}>

package/src/chrome/help-shortcuts-dialog.tsx

@@ -14,6 +14,7 @@ import {
   XStack,
   YStack,
 } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 
@@ -34,18 +35,18 @@ function getModLabel(): string {
 }
 
 function KeyChip({ label }: { label: string }) {
+  const { knobProps } = useResolvedKnobs();
   return (
     <XStack
-      borderWidth={1}
+      {...knobProps.borderRadius}
       borderColor="$borderColor"
       backgroundColor="$color2"
-      borderRadius="$2"
       paddingHorizontal="$2"
       paddingVertical="$1"
       minWidth={28}
       justifyContent="center"
     >
-      <SizableText size="$1" fontWeight="600">
+      <SizableText size="$1" fontWeight="400">
         {label}
       </SizableText>
     </XStack>

package/src/chrome/notifications-panel.tsx

@@ -21,6 +21,7 @@ import {
   ensureFocusVisibleRing,
   formatRelativeTimestamp,
   menuRowFrame,
+  useResolvedKnobs,
 } from "@multiplatform.one/theme";
 import { GearSixIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
@@ -38,13 +39,14 @@ export interface NotificationsPanelProps {
 
 function NotificationRow({ item, onPress }: { item: NotificationItem; onPress: () => void }) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
   const subject = item.subjectText || t("notifications.untitled", "Notification");
   const relative = formatRelativeTimestamp(item.timestampMs ?? item.creation);
   return (
     <XStack
       {...menuRowFrame}
       alignItems="flex-start"
-      gap="$3"
+      {...knobProps.gap}
       paddingVertical="$2.5"
       // LC-71: unread is SELECTED fill; the ring is keyboard-only on this row.
       backgroundColor={item.unread ? "$color2" : "transparent"}
@@ -69,15 +71,15 @@ function NotificationRow({ item, onPress }: { item: NotificationItem; onPress: (
       <Avatar name={item.from_user || "?"} size="$2.5" />
       <YStack flex={1} minWidth={0} gap="$1">
         <Text
-          fontSize="$3"
-          fontWeight={item.unread ? "600" : "400"}
+          {...knobProps.label}
+          fontWeight="400"
           color={item.unread ? "$color12" : "$color11"}
           numberOfLines={2}
         >
           {subject}
         </Text>
         {relative ? (
-          <Text fontSize="$2" color="$color9">
+          <Text {...knobProps.label} color="$color9">
             {relative}
           </Text>
         ) : null}
@@ -127,6 +129,7 @@ export function NotificationsPanel({
   onMarkAllRead,
 }: NotificationsPanelProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
   const hasUnread = items.some((item) => item.unread);
 
   return (
@@ -138,7 +141,7 @@ export function NotificationsPanel({
       data-testid="backoffice-notifications-panel"
     >
       <XStack alignItems="center" gap="$2" paddingHorizontal="$3" paddingVertical="$2">
-        <SizableText size="$4" fontWeight="700" flex={1} numberOfLines={1}>
+        <SizableText {...knobProps.heading} flex={1} numberOfLines={1}>
           {t("notifications.title", "Notifications")}
         </SizableText>
         <Button

package/src/form/FormConnections.tsx

@@ -162,7 +162,7 @@ function ConnectionGroupCard({ group, docname, counts, countsLoading }: Connecti
   return (
     <Card flexBasis={240} flexGrow={1} flexShrink={1}>
       <YStack {...knobProps.panelPadding} {...knobProps.gap}>
-        <SizableText size="$4" fontWeight="700">
+        <SizableText size="$4" {...knobProps.heading} fontWeight="400">
           {group.label || t("connections.referenceGroup", "Reference")}
         </SizableText>
         <Separator />

package/src/form/FormErrorBoundary.tsx

@@ -74,7 +74,7 @@ function FormErrorFallback({
   return (
     <YStack {...knobProps.gap} minWidth={0} testID={testID}>
       {label ? (
-        <Text fontSize="$3" fontWeight="600" color="$color11" numberOfLines={1}>
+        <Text fontSize="$3" fontWeight="400" color="$color11" numberOfLines={1}>
           {label}
         </Text>
       ) : null}

package/src/form/FormHeaderCluster.tsx

@@ -14,7 +14,7 @@
 import { XStack, useTheme } from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
 import { useFrappeConfig } from "@multiplatform.one/frappe-ui";
-import { pressTargetStyle } from "@multiplatform.one/theme";
+import { pressTargetStyle, useResolvedKnobs } from "@multiplatform.one/theme";
 import { BellIcon, HeartIcon, UserCirclePlusIcon } from "@phosphor-icons/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -48,6 +48,8 @@ export function FormHeaderCluster({
   onRefresh,
 }: FormHeaderClusterProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const { knobProps } = useResolvedKnobs();
+  const iconSize = Number(knobProps.controlIcon?.width) || 16;
   const app = useFrappeApp();
   const config = useFrappeConfig();
   const capabilities = useBackofficeCapabilities();
@@ -130,7 +132,7 @@ export function FormHeaderCluster({
             <Button
               chromeless
               {...pressFloor}
-              icon={<UserCirclePlusIcon size={18} color={mutedColor} />}
+              icon={<UserCirclePlusIcon size={iconSize} color={mutedColor} />}
               loading={busy === "assign"}
               aria-label={t("assignTitle", "Add assignment")}
               onPress={() => setAssignOpen(true)}
@@ -142,7 +144,7 @@ export function FormHeaderCluster({
             {...pressFloor}
             icon={
               <HeartIcon
-                size={18}
+                size={iconSize}
                 weight={likedByMe ? "fill" : "regular"}
                 color={likedByMe ? likedColor : mutedColor}
               />
@@ -166,7 +168,11 @@ export function FormHeaderCluster({
               chromeless
               {...pressFloor}
               icon={
-                <BellIcon size={18} weight={isFollowed ? "fill" : "regular"} color={mutedColor} />
+                <BellIcon
+                  size={iconSize}
+                  weight={isFollowed ? "fill" : "regular"}
+                  color={mutedColor}
+                />
               }
               loading={busy === "follow"}
               aria-pressed={isFollowed}

package/src/form/FormSidebarPanel.tsx

@@ -171,7 +171,7 @@ export function SidebarAccordionTrigger({
       focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
     >
       <XStack flex={1} alignItems="center" gap="$2">
-        <Text fontSize="$3" fontWeight="600" color="$color12" numberOfLines={1}>
+        <Text fontSize="$3" fontWeight="400" color="$color12" numberOfLines={1}>
           {section.title}
         </Text>
         <Chip size="$2" variant="subtle" color="gray">
@@ -195,6 +195,7 @@ export function FormSidebarPanel({
 }: FormSidebarPanelProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const { knobProps } = useResolvedKnobs();
+  const iconSize = Number(knobProps.controlIcon?.width) || 14;
   const theme = useTheme();
   const app = useFrappeApp();
   const config = useFrappeConfig();
@@ -362,7 +363,7 @@ export function FormSidebarPanel({
       key: "assigned",
       title: t("assignedTo", "Assigned To"),
       count: assignedCount,
-      icon: <UsersIcon size={14} color={iconColor} />,
+      icon: <UsersIcon size={iconSize} color={iconColor} />,
       content: (
         // The accordion header owns the section title, so the widget's own
         // label slot is blanked (label="") — its add affordance and live
@@ -389,7 +390,7 @@ export function FormSidebarPanel({
       key: "attachments",
       title: t("attachments", "Attachments"),
       count: attachmentCount,
-      icon: <PaperclipIcon size={14} color={iconColor} />,
+      icon: <PaperclipIcon size={iconSize} color={iconColor} />,
       content: (
         <SidebarAttachments
           items={attachments}
@@ -411,7 +412,7 @@ export function FormSidebarPanel({
       key: "tags",
       title: t("tags", "Tags"),
       count: tagCount,
-      icon: <TagIcon size={14} color={iconColor} />,
+      icon: <TagIcon size={iconSize} color={iconColor} />,
       content: (
         <Tags
           compact
@@ -441,7 +442,7 @@ export function FormSidebarPanel({
       key: "shared",
       title: t("sharedWith", "Shared With"),
       count: shareCount,
-      icon: <ShareNetworkIcon size={14} color={iconColor} />,
+      icon: <ShareNetworkIcon size={iconSize} color={iconColor} />,
       content: (
         <YStack {...knobProps.gap}>
           <SidebarPeopleList
@@ -456,7 +457,7 @@ export function FormSidebarPanel({
             <Button
               size="$2"
               outlined
-              icon={<PlusIcon size={14} />}
+              icon={<PlusIcon size={iconSize} />}
               loading={busy}
               onPress={() => setShareOpen(true)}
               testID="form-sidebar-share"
@@ -471,7 +472,7 @@ export function FormSidebarPanel({
       key: "liked",
       title: t("likedBy", "Liked By"),
       count: likeCount,
-      icon: <HeartIcon size={14} color={iconColor} />,
+      icon: <HeartIcon size={iconSize} color={iconColor} />,
       content: (
         // Live `_liked_by` heart + avatar cluster; the toggle mirrors the
         // header cluster's heart and both refresh the shared docinfo.
@@ -581,7 +582,7 @@ export function FormSidebarPanel({
           <YStack gap="$1.5" {...knobProps.panelPadding} paddingTop="$2">
             {metadata.map((entry) => (
               <XStack key={entry.key} gap="$2" alignItems="center">
-                <ClockIcon size={14} color={iconColor} />
+                <ClockIcon size={iconSize} color={iconColor} />
                 <Text flex={1} fontSize="$1" color="$color11">
                   {entry.label}
                 </Text>