@multiplatform.one/frappe-ui 7.4.0 → 7.5.0

package/src/FrappeGantt.tsx

@@ -8,6 +8,7 @@ import {
 import React, { useCallback, useMemo, useState, type ReactNode } from "react";
 import { Text, YStack, type YStackProps } from "tamagui";
 import { useTranslation } from "react-i18next";
+import { formCommonColors } from "@multiplatform.one/forms";
 import {
   formatCalendarDate,
   parseCalendarDate,
@@ -251,7 +252,7 @@ export function FrappeGantt<TDoc extends { name: string; doctype: string }>({
   return (
     <YStack {...knobProps.gap}>
       <FrappeConnectionIndicator config={connectionConfig} />
-      {actionError && (
+      {actionError ? (
         <YStack
           {...knobProps.panelPadding}
           {...knobProps.borderRadius}
@@ -259,12 +260,14 @@ export function FrappeGantt<TDoc extends { name: string; doctype: string }>({
           borderColor="$red7"
           borderWidth={1}
         >
-          <Text color="$red11">{t("Action failed")}</Text>
-          <Text color="$color10" fontSize="$2">
+          <Text color={formCommonColors.error} {...knobProps.label}>
+            {t("Action failed")}
+          </Text>
+          <Text color={formCommonColors.muted} {...knobProps.label}>
             {actionError.message}
           </Text>
         </YStack>
-      )}
+      ) : null}
       <GanttView
         {...knobProps.borderRadius}
         tasks={tasks}

package/src/FrappeImageView.tsx

@@ -1,10 +1,10 @@
 import { useDocTypeMeta, useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
-import { AsyncSkeleton, ImageGrid } from "@multiplatform.one/components";
+import { AsyncSkeleton, Card, ImageGrid } from "@multiplatform.one/components";
 import { ImageSquareIcon } from "@phosphor-icons/react";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Spinner } from "@multiplatform.one/forms";
-import { Card, Image, Text, YStack, type YStackProps } from "tamagui";
+import { Spinner, formCommonColors } from "@multiplatform.one/forms";
+import { Image, Text, YStack, type YStackProps } from "tamagui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useFrappeConfig } from "./FrappeProvider";
 import { FrappeReconnectIndicator } from "./FrappeReconnectIndicator";
@@ -134,7 +134,7 @@ export function FrappeImageView<TDoc extends { name: string; doctype: string }>(
         {...(stackProps as any)}
       >
         <Spinner size="large" />
-        <Text color="$color10" marginTop="$2">
+        <Text color={formCommonColors.muted} {...knobProps.body} marginTop="$2">
           {t("Loading {{doctype}}...", { doctype })}
         </Text>
       </YStack>
@@ -265,12 +265,15 @@ function FrappeImageViewClient<TDoc extends { name: string; doctype: string }>({
     );
   }
 
-  // No image field configured
+  // No image field configured. R11: state is chrome outside the tile (no pip).
   if (!effectiveImageField) {
+    const iconSize = Number(knobProps.controlIcon?.width) || 16;
     return (
       <YStack {...knobProps.panelPadding} alignItems="center" {...knobProps.gap} {...stackProps}>
-        <ImageSquareIcon size={48} color="$color8" />
-        <Text color="$color10">{t("No image field configured for {{doctype}}", { doctype })}</Text>
+        <ImageSquareIcon size={iconSize * 2} color={formCommonColors.muted} />
+        <Text color={formCommonColors.muted} {...knobProps.body}>
+          {t("No image field configured for {{doctype}}", { doctype })}
+        </Text>
       </YStack>
     );
   }
@@ -329,15 +332,13 @@ function FrappeImageCard({
   const imageUrl = getImageUrl(doc[imageField], baseURL);
   const title = doc[titleField] || doc.name;
   const subtitle = subtitleField ? doc[subtitleField] : undefined;
+  const iconSize = Number(knobProps.controlIcon?.width) || 16;
 
   return (
-    // Bento product-card anatomy: PADDED card frame (cardSurface carries the
-    // padding) with an inner-rounded image block, texts below; separation by
-    // soft elevation, no outline border.
+    // Catalog Card owns cardSurface (no cherry-picked radius). Inner media
+    // radius stays UNCLAMPED (R11). No status pip on the tile.
     <Card
       testID={`${doctype.toLowerCase()}-card-${doc.name}`}
-      {...knobProps.cardSurface}
-      elevation={knobProps.elevation}
       cursor="pointer"
       hoverStyle={{ scale: 1.02 }}
       pressStyle={{ scale: 0.98 }}
@@ -356,40 +357,40 @@ function FrappeImageCard({
           aspectRatio={1}
           objectFit="cover"
           backgroundColor="$color2"
-          borderRadius="$3"
+          {...knobProps.borderRadius}
         />
       ) : (
         <YStack
           width="100%"
           aspectRatio={1}
           backgroundColor="$color2"
-          borderRadius="$3"
+          {...knobProps.borderRadius}
           alignItems="center"
           justifyContent="center"
         >
-          <ImageSquareIcon size={48} color="$color8" />
+          <ImageSquareIcon size={iconSize * 2} color={formCommonColors.muted} />
         </YStack>
       )}
-      <Card.Footer paddingTop="$3">
-        <YStack gap="$1">
+      <Card.Footer>
+        <YStack {...knobProps.gap}>
           <Text
             testID={`${doctype.toLowerCase()}-name-${doc.name}`}
+            {...knobProps.heading}
             fontWeight="400"
-            fontSize="$5"
             numberOfLines={1}
           >
             {String(title)}
           </Text>
-          {subtitle != null && (
+          {subtitle != null ? (
             <Text
               testID={`${doctype.toLowerCase()}-subtitle-${doc.name}`}
-              color="$color10"
-              fontSize="$3"
+              color={formCommonColors.muted}
+              {...knobProps.label}
               numberOfLines={1}
             >
               {String(subtitle)}
             </Text>
-          )}
+          ) : null}
         </YStack>
       </Card.Footer>
     </Card>

package/src/FrappeKPICard.stories.tsx

@@ -7,6 +7,7 @@ import { action } from "@multiplatform.one/storybook";
 import { CurrencyDollarIcon } from "@phosphor-icons/react";
 import { XStack } from "tamagui";
 import { FrappeKPICard } from "./FrappeKPICard";
+import { FrappeProvider } from "./FrappeProvider";
 import { FrappeStoryProvider } from "./frappeStoryTarget";
 
 export default {
@@ -18,12 +19,81 @@ export default {
     docs: {
       description: {
         component:
-          "KPICard as re-exported by @multiplatform.one/frappe-ui (the 'Frappe KPICard' bridge). It is the same component object as the components-package KPICard; these stories exercise the bridge surface and value edge cases.",
+          "KPICard as re-exported by @multiplatform.one/frappe-ui (the 'Frappe KPICard' bridge). It is the same component object as the components-package KPICard; these stories exercise the bridge surface and value edge cases. Live aggregate stories are network-hermetic (G-15/D-05): counts come from InMemoryFixtureProvider and DocType meta from an in-story fetch mock, so nothing leaves the machine. The separately-named Live story is the live-bench arm.",
       },
     },
   },
 };
 
+// ---------------------------------------------------------------------------
+// Hermetic story host (G-15 story honesty / D-05, closes UX-P18).
+//
+// LiveToDoCount previously wrapped FrappeStoryProvider, whose fallback
+// baseURL is https://demo.frappe.cloud (and which is a no-op on native
+// Kitchen Sink / TestFlight). Fixture rows then never reached
+// useFrappeAggregate, and any DocType-meta fetch CORS-failed. MOCK_HOST
+// keeps the same code path (real fetch, real meta shape) without leaving
+// the machine; counts render from InMemoryFixtureProvider.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappekpicard.mock.test";
+
+function todoMetaRaw(name: string) {
+  return {
+    name,
+    module: "Desk",
+    title_field: "description",
+    fields: [
+      { fieldname: "description", fieldtype: "Text Editor", label: "Description", in_list_view: 1 },
+      {
+        fieldname: "status",
+        fieldtype: "Select",
+        label: "Status",
+        options: "Open\nClosed",
+        in_list_view: 1,
+        in_standard_filter: 1,
+      },
+    ],
+    permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+  };
+}
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__frappeKpiCardMockFetch) return;
+  w.__frappeKpiCardMockFetch = true;
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const urlStr =
+      typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (urlStr.startsWith(MOCK_HOST)) {
+      const url = new URL(urlStr);
+      if (url.pathname === "/api/method/frappe.desk.form.load.getdoctype") {
+        const doctype = url.searchParams.get("doctype") || "ToDo";
+        return jsonResponse({ docs: [todoMetaRaw(decodeURIComponent(doctype))] });
+      }
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch)
+        return jsonResponse({ data: todoMetaRaw(decodeURIComponent(metaMatch[1])) });
+      if (url.pathname === "/api/resource/DocType") {
+        return jsonResponse({ data: [{ name: "ToDo", module: "Desk" }] });
+      }
+      // Everything else (guest field-peek, counts): empty, never the network.
+      // Scalar counts still come from InMemoryFixtureProvider, not this body.
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
 export const Main = () => (
   <KPICard
     config={{
@@ -146,20 +216,20 @@ export const LongTitle = () => (
 );
 
 // ---------------------------------------------------------------------------
-// Live aggregate (FrappeKPICard + dataSource): the value is a server-side
-// aggregate over the bench doctype, refetched (debounced) on realtime
-// list_update / doc_update / doc_deleted events. Bench when reachable,
-// fixtures otherwise (FrappeStoryProvider fallback).
+// Hermetic aggregate (FrappeKPICard + dataSource): counts come from
+// InMemoryFixtureProvider against MOCK_HOST. No bench, no demo.frappe.cloud.
 // ---------------------------------------------------------------------------
 
-const liveTodoFixtures = [
+const todoFixtures = [
   { name: "TD-1", doctype: "ToDo", description: "Fixture todo A", status: "Open" },
   { name: "TD-2", doctype: "ToDo", description: "Fixture todo B", status: "Open" },
   { name: "TD-3", doctype: "ToDo", description: "Fixture todo C", status: "Closed" },
 ];
 
-export const LiveToDoCount = () => (
-  <FrappeStoryProvider fixtures={new InMemoryFixtureProvider({ ToDo: liveTodoFixtures })}>
+const makeTodoFixtures = () => new InMemoryFixtureProvider({ ToDo: todoFixtures });
+
+function ToDoCountCards() {
+  return (
     <XStack gap="$3" flexWrap="wrap">
       <FrappeKPICard
         width={280}
@@ -174,13 +244,43 @@ export const LiveToDoCount = () => (
         dataSource={{ doctype: "ToDo", filters: { status: "Open" } }}
       />
     </XStack>
-  </FrappeStoryProvider>
+  );
+}
+
+/** Default path: fixture counts on MOCK_HOST (Kitchen Sink / TestFlight). */
+export const LiveToDoCount = () => (
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeTodoFixtures()}>
+    <ToDoCountCards />
+  </FrappeProvider>
 );
 LiveToDoCount.parameters = {
   docs: {
     description: {
       story:
-        "LIVE server-side count of ToDo documents (frappe.client.get_count), refetched with a 300ms coalescing window on realtime events. Both cards watch the same doctype and share one refcounted realtime room subscription. Create/delete a ToDo on the bench and the numbers update in place — no reload.",
+        "Hermetic server-side count of fixture ToDo documents (3 total, 2 Open) via useFrappeAggregate + InMemoryFixtureProvider. DocType meta is served by the in-story fetch mock at https://frappekpicard.mock.test — nothing leaves the machine.",
+    },
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Live bench story — real aggregates when the bench is reachable
+// ---------------------------------------------------------------------------
+
+/**
+ * Live aggregates against the real bench: frappe.client.get_count, refetched
+ * with a 300ms coalescing window on realtime list_update / doc_update /
+ * doc_deleted. Falls back to the same fixtures when the bench is down.
+ */
+export const Live = () => (
+  <FrappeStoryProvider fixtures={makeTodoFixtures()}>
+    <ToDoCountCards />
+  </FrappeStoryProvider>
+);
+Live.parameters = {
+  docs: {
+    description: {
+      story:
+        "LIVE server-side count of ToDo documents (frappe.client.get_count), refetched with a 300ms coalescing window on realtime events. Both cards watch the same doctype and share one refcounted realtime room subscription. Create/delete a ToDo on the bench and the numbers update in place — no reload. Fixture fallback when the bench is down.",
     },
   },
 };

package/src/FrappeKPICard.tsx

@@ -14,14 +14,14 @@
  */
 import {
   AsyncBoundary,
+  Card,
   KPICard,
   Skeleton,
   type KPICardConfig,
 } from "@multiplatform.one/components";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Card, YStack, type YStackProps } from "tamagui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { type YStackProps } from "tamagui";
 import { useFrappeConfig } from "./FrappeProvider";
 import {
   useFrappeAggregate,
@@ -56,28 +56,12 @@ export interface FrappeKPICardProps extends Omit<YStackProps, "children"> {
 
 /** Card-shaped skeleton so the live KPI's first load doesn't jump layout. */
 function KPICardSkeleton(stackProps: YStackProps) {
-  const { knobProps } = useResolvedKnobs();
   const { t } = useTranslation();
   return (
-    <Card
-      size={knobProps.sizeToken}
-      borderRadius={knobProps.borderRadius.borderRadius}
-      elevation={knobProps.elevation}
-      borderWidth={1}
-      borderColor="$borderColor"
-      aria-busy
-      aria-label={t("Loading")}
-      {...stackProps}
-    >
-      <Card.Header {...knobProps.panelPadding}>
-        <Skeleton width="50%" height={12} />
-      </Card.Header>
-      <Card.Footer {...knobProps.panelPadding}>
-        <YStack {...knobProps.gap}>
-          <Skeleton width="70%" height={28} />
-          <Skeleton width="40%" height={12} />
-        </YStack>
-      </Card.Footer>
+    <Card aria-busy aria-label={t("Loading")} {...stackProps}>
+      <Skeleton width="50%" />
+      <Skeleton width="70%" />
+      <Skeleton width="40%" />
     </Card>
   );
 }

package/src/FrappeKanban.stories.tsx

@@ -14,12 +14,117 @@ export default {
     docs: {
       description: {
         component:
-          "Kanban over useFrappeCollection / useLiveQuery; card moves persist status via collection.update. Stories use InMemoryFixtureProvider (live path + fixtures, not a static columns/items prop).",
+          "Kanban over useFrappeCollection / useLiveQuery; card moves persist status via collection.update. Fixture stories are network-hermetic (G-15/D-05): documents come from InMemoryFixtureProvider and DocType meta from an in-story fetch mock, so nothing leaves the machine. The separately-named Live story is the live-bench arm — it targets STORYBOOK_FRAPPE_URL when reachable and falls back to fixtures otherwise.",
       },
     },
   },
 };
 
+// ---------------------------------------------------------------------------
+// Hermetic story host (G-15 story honesty / D-05, closes UX-P18).
+//
+// Fixture-backed stories previously pointed at https://demo.frappe.cloud. The
+// fixture provider serves the *collection*, but DocType meta still resolves
+// over HTTP — so those stories fired a real cross-origin request the browser
+// rejected with CORS. MOCK_HOST keeps the same code path (real fetch, real
+// meta shape) without leaving the machine; ERR_HOST is the deliberate
+// failure host for the error-state story.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappekanban.mock.test";
+const ERR_HOST = "https://forbidden.frappekanban.mock.test";
+
+function todoMetaRaw(name: string) {
+  return {
+    name,
+    module: "Desk",
+    title_field: "description",
+    fields: [
+      { fieldname: "description", fieldtype: "Text", label: "Description", in_list_view: 1 },
+      {
+        fieldname: "status",
+        fieldtype: "Select",
+        label: "Status",
+        options: "Open\nWorking\nPending Review\nCompleted",
+        in_list_view: 1,
+        in_standard_filter: 1,
+      },
+    ],
+    permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+  };
+}
+
+function bugMetaRaw(name: string) {
+  return {
+    name,
+    module: "QA",
+    title_field: "title",
+    fields: [
+      { fieldname: "title", fieldtype: "Data", label: "Title", in_list_view: 1 },
+      {
+        fieldname: "severity",
+        fieldtype: "Select",
+        label: "Severity",
+        options: "Critical\nHigh\nMedium\nLow",
+        in_list_view: 1,
+      },
+      {
+        fieldname: "status",
+        fieldtype: "Select",
+        label: "Status",
+        options: "New\nConfirmed\nIn Progress\nTesting\nClosed",
+        in_list_view: 1,
+        in_standard_filter: 1,
+      },
+    ],
+    permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+  };
+}
+
+function metaFor(doctype: string) {
+  return doctype === "Bug" ? bugMetaRaw(doctype) : todoMetaRaw(doctype);
+}
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__frappeKanbanMockFetch) return;
+  w.__frappeKanbanMockFetch = true;
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const urlStr =
+      typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (urlStr.startsWith(ERR_HOST)) return jsonResponse({ message: "Not permitted" }, 403);
+    if (urlStr.startsWith(MOCK_HOST)) {
+      const url = new URL(urlStr);
+      if (url.pathname === "/api/method/frappe.desk.form.load.getdoctype") {
+        const doctype = url.searchParams.get("doctype") || "ToDo";
+        return jsonResponse({ docs: [metaFor(doctype)] });
+      }
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch) return jsonResponse({ data: metaFor(decodeURIComponent(metaMatch[1])) });
+      if (url.pathname === "/api/resource/DocType") {
+        return jsonResponse({
+          data: [
+            { name: "ToDo", module: "Desk" },
+            { name: "Bug", module: "QA" },
+          ],
+        });
+      }
+      // Everything else (guest field-peek, counts): empty, never the network.
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
 interface ToDo {
   name: string;
   doctype: string;
@@ -45,7 +150,7 @@ const todoColumns: KanbanColumn[] = [
 
 export const Default = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ ToDo: todoFixtures })}
   >
     <FrappeKanban<ToDo>
@@ -70,7 +175,7 @@ Default.parameters = {
 Default.storyName = "Main";
 export const WithCardCreation = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ ToDo: todoFixtures })}
   >
     <FrappeKanban<ToDo>
@@ -206,7 +311,7 @@ const bugColumns: KanbanColumn[] = [
 
 export const BugTracker = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ Bug: bugFixtures })}
   >
     <FrappeKanban<Bug>
@@ -242,7 +347,7 @@ class PendingFixtureProvider extends InMemoryFixtureProvider {
 
 /** Collection stuck syncing with an empty board: the kanban skeleton renders (LC-20 / DG-ST-02). */
 export const Loading = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={new PendingFixtureProvider()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={new PendingFixtureProvider()}>
     <FrappeKanban<ToDo>
       doctype="ToDo"
       columns={todoColumns}
@@ -256,7 +361,7 @@ export const Loading = () => (
 /** Zero documents, no failure — configured columns render with per-column "No items" (empty ≠ error). */
 export const Empty = () => (
   <FrappeProvider
-    baseURL="https://demo.frappe.cloud"
+    baseURL={MOCK_HOST}
     fixtures={new InMemoryFixtureProvider({ ToDo: [] })}
   >
     <FrappeKanban<ToDo>
@@ -270,11 +375,12 @@ export const Empty = () => (
 );
 
 /**
- * Live collection against an unreachable host with no fixtures: the `error`
- * render prop shows instead of empty board chrome (DG-ST-01 / SB-M-806 pattern).
+ * Collection that fails with no fixtures: the `error` render prop shows
+ * instead of empty board chrome (DG-ST-01 / SB-M-806 pattern). The failure
+ * is served hermetically — the in-story mock answers ERR_HOST with 403.
  */
 export const LoadError = () => (
-  <FrappeProvider baseURL="https://frappe-kanban-error.mock.test">
+  <FrappeProvider baseURL={ERR_HOST}>
     <FrappeKanban<ToDo>
       doctype="ToDo"
       columns={todoColumns}

package/src/FrappeKanban.tsx

@@ -1,10 +1,11 @@
 import { useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
 import {
   Kanban,
+  componentColors,
   type KanbanColumn as GenericKanbanColumn,
   type KanbanProps,
 } from "@multiplatform.one/components";
-import { Button } from "@multiplatform.one/forms";
+import { Button, formCommonColors } from "@multiplatform.one/forms";
 import { PlusIcon } from "@phosphor-icons/react";
 import React, { useMemo, useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -176,7 +177,7 @@ export function FrappeKanban<TDoc extends { name: string; doctype: string }>({
         id: "__unassigned__",
         title: t("Unassigned"),
         items: unknown,
-        color: "#94A3B8",
+        color: componentColors.text.subtle,
       });
     }
     return result;
@@ -193,12 +194,12 @@ export function FrappeKanban<TDoc extends { name: string; doctype: string }>({
         ? (item as Record<string, unknown>)[descriptionField]
         : undefined;
       return (
-        <YStack {...knobProps.panelPadding}>
-          <Text fontWeight="500" fontSize={knobProps.sizeToken}>
+        <YStack {...knobProps.panelPadding} {...knobProps.gap}>
+          <Text {...knobProps.label} {...knobProps.textWeight}>
             {(title as React.ReactNode) || item.name}
           </Text>
           {desc != null && desc !== "" && (
-            <Text fontSize="$2" color="$color10" marginTop="$1">
+            <Text color={formCommonColors.muted} {...knobProps.body}>
               {String(desc)}
             </Text>
           )}
@@ -257,7 +258,7 @@ export function FrappeKanban<TDoc extends { name: string; doctype: string }>({
             size="$2"
             circular
             chromeless
-            icon={<PlusIcon size={14} />}
+            icon={PlusIcon}
             aria-label={t("Add card to {{column}}", { column: column.title })}
             onPress={() => {
               setActionError(null);
@@ -300,13 +301,13 @@ export function FrappeKanban<TDoc extends { name: string; doctype: string }>({
       {actionError && (
         <YStack
           {...knobProps.panelPadding}
-          {...knobProps.borderRadius}
+          {...knobProps.containerRadius}
           backgroundColor="$red2"
           borderColor="$red7"
           borderWidth={1}
         >
-          <Text color="$red11">{t("Action failed")}</Text>
-          <Text color="$color10" fontSize="$2">
+          <Text color={formCommonColors.error}>{t("Action failed")}</Text>
+          <Text color={formCommonColors.muted} {...knobProps.body}>
             {actionError.message}
           </Text>
         </YStack>