@multiplatform.one/frappe-ui 7.66.0 → 7.68.0

package/src/FrappeDashboard.tsx

@@ -206,7 +206,6 @@ function LiveDashboardContent<TDoc extends { name: string; doctype: string }>({
                   `loading` (not bare `disabled`) is the derived busy state. */}
               <Button
                 size="$2"
-                circular
                 icon={ArrowsClockwiseIcon}
                 onPress={onRefresh}
                 loading={isRefreshing || isLiveLoading}
@@ -328,7 +327,6 @@ export function FrappeDashboard<TDoc extends { name: string; doctype: string }>(
               {/* LC-54: house Button, own-box floor (see the live-path refresh). */}
               <Button
                 size="$2"
-                circular
                 icon={ArrowsClockwiseIcon}
                 onPress={bumpRefresh}
                 loading={isRefreshing}

package/src/FrappeForm.connections.spec.tsx

@@ -128,13 +128,13 @@ describe("FrappeForm connections, schema mode", () => {
 
   it("a new record has no connections yet", async () => {
     renderForm({});
-    await waitFor(() => expect(screen.getByText("Save")).toBeTruthy());
+    await waitFor(() => expect(screen.getByLabelText("Save")).toBeTruthy());
     expect(screen.queryByText("Connections")).toBeNull();
   });
 
   it("showConnections={false} leaves the tab out", async () => {
     renderForm({ name: "bulbasaur", showConnections: false });
-    await waitFor(() => expect(screen.getByText("Save")).toBeTruthy());
+    await waitFor(() => expect(screen.getByLabelText("Save")).toBeTruthy());
     expect(screen.queryByText("Connections")).toBeNull();
   });
 });

package/src/FrappeForm.deskSemantics.spec.tsx

@@ -192,7 +192,7 @@ describe("FrappeForm resolves a doctype through the desk form engine", () => {
   it("save refuses an empty field that mandatory_depends_on made required", async () => {
     renderForm({ name: "LOAN-APPROVED", roles: ["Loan Officer"] });
     await expectProbe("status", "val=Approved");
-    fireEvent.click(screen.getByText("Save"));
+    fireEvent.click(screen.getByLabelText("Save"));
     await expectProbe("reason", "err=Reason is required");
   });
 
@@ -276,7 +276,7 @@ describe("FrappeForm resolves a doctype through the desk form engine", () => {
     renderForm();
     await screen.findByTestId("probe-status");
     expect(screen.getByText("Name")).toBeTruthy();
-    fireEvent.click(screen.getByText("Save"));
+    fireEvent.click(screen.getByLabelText("Save"));
     await waitFor(() => {
       expect(screen.getByText("Name is required")).toBeTruthy();
     });

package/src/FrappeForm.lifecycle.spec.tsx

@@ -132,7 +132,7 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
     renderForm(fixtures, { name: "LOAN-DRAFT" });
     await expectProbe("employee_name", "val=Ada Lovelace");
     await expectStatus("draft");
-    expect(screen.queryByText("Save")).toBeNull();
+    expect(screen.queryByLabelText("Save")).toBeNull();
 
     fireEvent.click(screen.getByText("Submit"));
     await waitFor(() => expect(confirm).toHaveBeenCalledWith("Permanently Submit LOAN-DRAFT?"));
@@ -172,7 +172,7 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
 
     fireEvent.click(screen.getByTestId("set-remarks"));
     await expectStatus("notSaved");
-    expect(screen.getByText("Save")).toBeTruthy();
+    expect(screen.getByLabelText("Save")).toBeTruthy();
     expect(screen.queryByText("Submit")).toBeNull();
   });
 
@@ -185,8 +185,8 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
       onAmend: vi.fn(),
     });
     await expectStatus("submitted");
-    expect(screen.queryByText("Delete")).toBeNull();
-    expect(screen.getByText("Close")).toBeTruthy();
+    expect(screen.queryByLabelText("Delete")).toBeNull();
+    expect(screen.getByLabelText("Close")).toBeTruthy();
     expect(screen.getByTestId("frappe-form-cancel-document").textContent).toContain(
       "Cancel Document",
     );
@@ -196,7 +196,7 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
     await expectStatus("cancelled");
     await waitFor(async () => expect(await docstatusOf(fixtures, "LOAN-SUBMITTED")).toBe(2));
     expect(screen.getByText("Amend")).toBeTruthy();
-    expect(screen.getByText("Delete")).toBeTruthy();
+    expect(screen.getByLabelText("Delete")).toBeTruthy();
   });
 
   it("an allow_on_submit edit turns Cancel into Update, which keeps the document submitted", async () => {
@@ -205,10 +205,10 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
     await expectStatus("submitted");
 
     fireEvent.click(screen.getByTestId("set-remarks"));
-    await waitFor(() => expect(screen.getByText("Update")).toBeTruthy());
+    await waitFor(() => expect(screen.getByLabelText("Update")).toBeTruthy());
     expect(screen.queryByTestId("frappe-form-cancel-document")).toBeNull();
 
-    fireEvent.click(screen.getByText("Update"));
+    fireEvent.click(screen.getByLabelText("Update"));
     await waitFor(async () =>
       expect((await fixtures.getDoc("Asset Loan", "LOAN-SUBMITTED"))?.remarks).toBe("edited"),
     );
@@ -255,7 +255,7 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
     await expectStatus("notSaved");
     await expectProbe("employee_name", "val=Katherine Johnson");
     await expectProbe("serial_no", "ro=false");
-    fireEvent.click(screen.getByText("Save"));
+    fireEvent.click(screen.getByLabelText("Save"));
     await waitFor(async () => {
       const amendments = await fixtures.getList("Asset Loan", {
         filters: { amended_from: "LOAN-CANCELLED" },
@@ -279,7 +279,7 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
     renderForm(corpus(), { name: "LOAN-SUBMITTED", roles: ["Loan Officer"], onCancel: vi.fn() });
     await expectStatus("submitted");
     expect(screen.queryByTestId("frappe-form-cancel-document")).toBeNull();
-    expect(screen.getByText("Cancel")).toBeTruthy();
+    expect(screen.getByLabelText("Cancel")).toBeTruthy();
     cleanup();
 
     renderForm(corpus(), { name: "LOAN-CANCELLED", roles: ["Loan Officer"], onAmend: vi.fn() });
@@ -289,7 +289,7 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
 
     renderForm(corpus(), { name: "LOAN-DRAFT", roles: ["Loan Clerk"] });
     await expectStatus("draft");
-    expect(screen.getByText("Save")).toBeTruthy();
+    expect(screen.getByLabelText("Save")).toBeTruthy();
     expect(screen.queryByText("Submit")).toBeNull();
   });
 
@@ -305,7 +305,7 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
     renderForm(corpus(), { name: "LOAN-SUBMITTED", roles: ["Auditor"], onCancel: vi.fn() });
     await expectStatus("submitted");
     expect(screen.queryByTestId("frappe-form-cancel-document")).toBeNull();
-    expect(screen.getByText("Cancel")).toBeTruthy();
+    expect(screen.getByLabelText("Cancel")).toBeTruthy();
     cleanup();
 
     renderForm(corpus(), { name: "LOAN-CANCELLED", roles: ["Auditor"], onAmend: vi.fn() });
@@ -326,11 +326,11 @@ describe("a read-only record view keeps desk's lifecycle beside Edit", () => {
     const onEdit = vi.fn();
     renderForm(fixtures, { name: "LOAN-DRAFT", onEdit, onCancel: vi.fn(), onDelete: vi.fn() });
     await expectStatus("draft");
-    expect(screen.queryByText("Save")).toBeNull();
-    expect(screen.queryByText("Cancel")).toBeNull();
-    expect(screen.getByText("Delete")).toBeTruthy();
+    expect(screen.queryByLabelText("Save")).toBeNull();
+    expect(screen.queryByLabelText("Cancel")).toBeNull();
+    expect(screen.getByLabelText("Delete")).toBeTruthy();
 
-    fireEvent.click(screen.getByText("Edit"));
+    fireEvent.click(screen.getByLabelText("Edit"));
     expect(onEdit).toHaveBeenCalledTimes(1);
 
     fireEvent.click(screen.getByText("Submit"));
@@ -338,30 +338,30 @@ describe("a read-only record view keeps desk's lifecycle beside Edit", () => {
     await waitFor(async () => expect(await docstatusOf(fixtures, "LOAN-DRAFT")).toBe(1));
     await expectStatus("submitted");
     expect(screen.getByText("Cancel Document")).toBeTruthy();
-    expect(screen.getByText("Edit")).toBeTruthy();
-    expect(screen.queryByText("Delete")).toBeNull();
+    expect(screen.getByLabelText("Edit")).toBeTruthy();
+    expect(screen.queryByLabelText("Delete")).toBeNull();
   });
 
   it("a submitted document offers Cancel Document, and its allow_on_submit field keeps Edit", async () => {
     const fixtures = corpus();
     renderForm(fixtures, { name: "LOAN-SUBMITTED", onEdit: vi.fn(), onCancel: vi.fn() });
     await expectStatus("submitted");
-    expect(screen.getByText("Edit")).toBeTruthy();
-    expect(screen.queryByText("Cancel")).toBeNull();
-    expect(screen.queryByText("Close")).toBeNull();
+    expect(screen.getByLabelText("Edit")).toBeTruthy();
+    expect(screen.queryByLabelText("Cancel")).toBeNull();
+    expect(screen.queryByLabelText("Close")).toBeNull();
 
     fireEvent.click(screen.getByText("Cancel Document"));
     await waitFor(() => expect(confirm).toHaveBeenCalledWith("Permanently Cancel LOAN-SUBMITTED?"));
     await waitFor(async () => expect(await docstatusOf(fixtures, "LOAN-SUBMITTED")).toBe(2));
     await expectStatus("cancelled");
-    expect(screen.queryByText("Edit")).toBeNull();
+    expect(screen.queryByLabelText("Edit")).toBeNull();
   });
 
   it("a cancelled document offers Amend and no Edit", async () => {
     const onAmend = vi.fn();
     renderForm(corpus(), { name: "LOAN-CANCELLED", onEdit: vi.fn(), onAmend });
     await expectStatus("cancelled");
-    expect(screen.queryByText("Edit")).toBeNull();
+    expect(screen.queryByLabelText("Edit")).toBeNull();
 
     fireEvent.click(screen.getByText("Amend"));
     await waitFor(() => expect(onAmend).toHaveBeenCalled());
@@ -374,7 +374,7 @@ describe("a submittable doctype's routed pages", () => {
     const pushed = renderPage(corpus(), "/loans/LOAN-DRAFT");
     await expectStatus("draft");
     expect(screen.getByText("Submit")).toBeTruthy();
-    expect(screen.queryByText("Save")).toBeNull();
+    expect(screen.queryByLabelText("Save")).toBeNull();
 
     // LC-145: Submit is the bar's one action, so Edit rides the "…" menu.
     fireEvent.click(screen.getByTestId("frappe-form-menu"));
@@ -386,14 +386,14 @@ describe("a submittable doctype's routed pages", () => {
     const pushed = renderPage(corpus(), "/loans/LOAN-DRAFT/edit");
     await expectStatus("draft");
     expect(screen.getByText("Submit")).toBeTruthy();
-    expect(screen.queryByText("Edit")).toBeNull();
+    expect(screen.queryByLabelText("Edit")).toBeNull();
 
     fireEvent.click(screen.getByTestId("set-remarks"));
     await expectStatus("notSaved");
-    expect(screen.getByText("Save")).toBeTruthy();
+    expect(screen.getByLabelText("Save")).toBeTruthy();
     expect(screen.queryByText("Submit")).toBeNull();
 
-    fireEvent.click(screen.getAllByText("Cancel")[0]);
+    fireEvent.click(screen.getAllByLabelText(/^(Cancel|Back to .+ list)$/)[0]!);
     expect(pushed).toEqual(["/loans/LOAN-DRAFT"]);
   });
 
@@ -449,7 +449,7 @@ describe("the leave button stays live while a write is in flight (LC-30)", () =>
     const onCancel = vi.fn();
     renderForm(fixtures, { name: "LOAN-SUBMITTED", onCancel });
     await expectStatus("submitted");
-    expect(screen.getByTestId("frappe-form-close").textContent).toContain("Close");
+    expect(screen.getByTestId("frappe-form-close").getAttribute("aria-label")).toBe("Close");
 
     fireEvent.click(screen.getByTestId("frappe-form-cancel-document"));
     await waitFor(() =>

package/src/FrappeForm.tsx

@@ -23,7 +23,7 @@ import type React from "react";
 import { useEffect, useMemo, useState } from "react";
 import type { TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
-import { Button, Input, formCommonColors } from "@multiplatform.one/forms";
+import { IconButton, Input, formCommonColors, standardActions } from "@multiplatform.one/forms";
 import { Text as TamaguiText, XStack, YStack } from "tamagui";
 import { hairlineWidth, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useFrappeConfig } from "./FrappeProvider";
@@ -677,13 +677,17 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
       <YStack flex={1} backgroundColor="$background" testID="frappe-form-route-editor">
         <XStack alignItems="center" gap="$2" paddingHorizontal="$2" paddingVertical="$1">
           <XStack flex={1} flexBasis={0} justifyContent="flex-start">
-            <Button
-              chromeless
+            <IconButton
+              icon={standardActions.cancel.icon}
+              edge="start"
+              data-mp-action="cancel"
               onPress={onCancel ? handleCancel : routePage.onBack}
-              aria-label={onCancel ? undefined : t("Back to {{doctype}} list", { doctype })}
-            >
-              {t("Cancel")}
-            </Button>
+              aria-label={
+                onCancel
+                  ? t(standardActions.cancel.label)
+                  : t("Back to {{doctype}} list", { doctype })
+              }
+            />
           </XStack>
           <Text
             flexShrink={1}

package/src/FrappeFormActions.tsx

@@ -1,4 +1,5 @@
 import {
+  ActionButton,
   Chip,
   DropdownMenu,
   PageMenuButton,
@@ -10,7 +11,6 @@ import { useResolvedKnobs } from "@multiplatform.one/theme";
 import {
   ArrowCounterClockwiseIcon,
   CheckCircleIcon,
-  FloppyDiskIcon,
   PencilSimpleIcon,
   ProhibitIcon,
   TrashIcon,
@@ -122,33 +122,27 @@ export function FrappeFormActions({
       )}
 
       {onDelete && (
-        <Button
-          outlined
+        <ActionButton
+          kind="delete"
           error
-          icon={TrashIcon}
           loading={busy}
           disabled={disabled}
           disabledReason={disabled ? readOnlyReason : undefined}
           disabledReasonPlacement="inline"
           onPress={onDelete}
-        >
-          {t("Delete")}
-        </Button>
+        />
       )}
 
       {onClose && (
-        <Button
-          outlined={!footer}
-          icon={footer ? undefined : XIcon}
+        <ActionButton
+          // A submitted document's own Cancel sits beside this button.
+          kind={action === "cancel" ? "close" : "cancel"}
           disabled={closeDisabled}
           disabledReason={closeDisabled ? readOnlyReason : undefined}
           disabledReasonPlacement="inline"
           onPress={onClose}
           testID="frappe-form-close"
-        >
-          {/* A submitted document's own Cancel sits beside this button. */}
-          {action === "cancel" ? t("Close") : t("Cancel")}
-        </Button>
+        />
       )}
 
       {action === "cancel" && (
@@ -169,18 +163,14 @@ export function FrappeFormActions({
       )}
 
       {onEdit && (
-        <Button
-          accent={action !== "submit"}
-          outlined={action === "submit"}
-          icon={PencilSimpleIcon}
+        <ActionButton
+          kind="edit"
           disabled={disabled}
           disabledReason={disabled ? readOnlyReason : undefined}
           disabledReasonPlacement="inline"
           onPress={onEdit}
           testID="frappe-form-edit"
-        >
-          {t("Edit")}
-        </Button>
+        />
       )}
 
       {action === "amend" && onAmend && (
@@ -208,6 +198,7 @@ export function FrappeFormActions({
 
       {action === "submit" && (
         <Button
+          // action-word-escape: Frappe's docstatus Submit, a lifecycle step a check would hide
           accent
           icon={CheckCircleIcon}
           flex={footer ? 1 : undefined}
@@ -223,19 +214,16 @@ export function FrappeFormActions({
       )}
 
       {(action === "save" || action === "update") && (
-        <Button
-          accent
-          icon={footer ? undefined : FloppyDiskIcon}
-          flex={footer ? 1 : undefined}
+        <ActionButton
+          kind="save"
+          label={action === "update" ? t("Update") : undefined}
           loading={busy}
           disabled={disabled}
           disabledReason={disabled ? readOnlyReason : undefined}
           disabledReasonPlacement="inline"
           onPress={onSave}
           testID="frappe-form-save"
-        >
-          {busy ? t("Saving...") : action === "update" ? t("Update") : t("Save")}
-        </Button>
+        />
       )}
     </XStack>
   );
@@ -269,19 +257,19 @@ export function FrappeFormHeaderActions({
 
   const primary =
     action === "save" || action === "update" ? (
-      <Button
-        accent
+      <ActionButton
+        kind="save"
+        label={action === "update" ? t("Update") : undefined}
         loading={busy}
         disabled={disabled}
         disabledReason={disabled ? readOnlyReason : undefined}
         disabledReasonPlacement="inline"
         onPress={onSave}
         testID="frappe-form-save"
-      >
-        {busy ? t("Saving...") : action === "update" ? t("Update") : t("Save")}
-      </Button>
+      />
     ) : action === "submit" ? (
       <Button
+        // action-word-escape: Frappe's docstatus Submit, a lifecycle step a check would hide
         accent
         loading={busy}
         disabled={disabled}
@@ -312,16 +300,14 @@ export function FrappeFormHeaderActions({
         {t("Amend")}
       </Button>
     ) : onEdit ? (
-      <Button
-        accent
+      <ActionButton
+        kind="edit"
         disabled={disabled}
         disabledReason={disabled ? readOnlyReason : undefined}
         disabledReasonPlacement="inline"
         onPress={onEdit}
         testID="frappe-form-edit"
-      >
-        {t("Edit")}
-      </Button>
+      />
     ) : null;
 
   const lifecyclePrimary =

package/src/FrappeImageView.stories.tsx

@@ -20,7 +20,7 @@ export default {
     },
   },
   argTypes: {
-    columns: { control: { type: "number", min: 1, max: 6 } },
+    columns: { control: { type: "number", min: 1, max: 8 } },
     searchText: { control: "text" },
   },
 };
@@ -104,7 +104,6 @@ export const Main = (args: Record<string, unknown>) => (
     />
   </FrappeProvider>
 );
-Main.args = { columns: 3 };
 Main.storyName = "Main";
 
 /** Zero documents: the grid's empty message must show. */
@@ -139,7 +138,6 @@ export const BrokenImages = () => (
       doctype="QaGalleryBroken"
       imageField="picture"
       titleField="title"
-      columns={3}
       onItemClick={action("onItemClick")}
     />
   </FrappeProvider>
@@ -177,7 +175,6 @@ export const LongMetadata = () => (
       imageField="picture"
       titleField="title"
       subtitleField="subtitle"
-      columns={3}
     />
   </FrappeProvider>
 );
@@ -199,7 +196,6 @@ export const Live = (args: { doctype?: string; imageField?: string; titleField?:
       doctype={args.doctype || "Contact"}
       imageField={args.imageField || "image"}
       titleField={args.titleField || "first_name"}
-      columns={3}
       onItemClick={action("onItemClick")}
     />
   </FrappeStoryProvider>
@@ -232,7 +228,6 @@ export const Filtered = () => (
       imageField="picture"
       titleField="title"
       searchText="Item 1"
-      columns={3}
     />
   </FrappeProvider>
 );

package/src/FrappeImageView.tsx

@@ -1,10 +1,10 @@
 import { useDocTypeMeta } from "@multiplatform.one/frappe";
-import { AsyncSkeleton, Card, ImageGrid } from "@multiplatform.one/components";
+import { AsyncSkeleton, Image, ImageGrid } from "@multiplatform.one/components";
 import { ImageSquareIcon } from "@phosphor-icons/react";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Spinner, formCommonColors } from "@multiplatform.one/forms";
-import { Image, Text, YStack, useTheme, type YStackProps } from "tamagui";
+import { Text, YStack, useTheme, type YStackProps } from "tamagui";
 import { isServer } from "@multiplatform.one/platform";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useFrappeConfig } from "./FrappeProvider";
@@ -105,6 +105,7 @@ export function FrappeImageView<TDoc extends { name: string; doctype: string }>(
     if (ssrItems && ssrItems.length > 0 && imageField && baseURL) {
       return (
         <ImageGrid
+          variant="photos"
           items={ssrItems}
           columns={columns}
           onItemClick={onItemClick}
@@ -112,14 +113,13 @@ export function FrappeImageView<TDoc extends { name: string; doctype: string }>(
           testID={`${doctype.toLowerCase()}-list`}
           {...(stackProps as any)}
           renderItem={(doc) => (
-            <FrappeImageCard
+            <FrappePhoto
               doc={doc as Record<string, unknown>}
               doctype={doctype}
               imageField={imageField}
               titleField={titleField}
               subtitleField={subtitleField}
               baseURL={baseURL}
-              onItemClick={onItemClick as ((doc: Partial<unknown>) => void) | undefined}
               knobProps={knobProps}
             />
           )}
@@ -283,6 +283,7 @@ function FrappeImageViewClient<TDoc extends { name: string; doctype: string }>({
     <>
       <FrappeReconnectIndicator config={appConfig} />
       <ImageGrid
+        variant="photos"
         items={items}
         columns={columns}
         onItemClick={onItemClick}
@@ -290,14 +291,13 @@ function FrappeImageViewClient<TDoc extends { name: string; doctype: string }>({
         testID={`${doctype.toLowerCase()}-list`}
         {...(stackProps as any)}
         renderItem={(doc) => (
-          <FrappeImageCard
+          <FrappePhoto
             doc={doc as Record<string, unknown>}
             doctype={doctype}
             imageField={effectiveImageField}
             titleField={effectiveTitleField}
             subtitleField={subtitleField}
             baseURL={finalBaseURL}
-            onItemClick={onItemClick as ((doc: Partial<unknown>) => void) | undefined}
             knobProps={knobProps}
           />
         )}
@@ -307,18 +307,18 @@ function FrappeImageViewClient<TDoc extends { name: string; doctype: string }>({
 }
 
 /**
- * Card renderer shared between SSR and client paths so they produce
- * matching markup (avoiding hydration mismatches) and the look stays
- * defined in one place.
+ * One photo in the Photos grid (LC-264), shared between SSR and client paths so they
+ * produce matching markup: the image fills a square edge to edge with no card
+ * chrome. The title is its accessible name; it shows as a caption only when
+ * there is no picture to look at (no URL, or the image failed to load).
  */
-function FrappeImageCard({
+function FrappePhoto({
   doc,
   doctype,
   imageField,
   titleField,
   subtitleField,
   baseURL,
-  onItemClick,
   knobProps,
 }: {
   doc: Record<string, unknown>;
@@ -327,74 +327,60 @@ function FrappeImageCard({
   titleField: string;
   subtitleField?: string;
   baseURL: string;
-  onItemClick?: (doc: Partial<unknown>) => void;
   knobProps: ReturnType<typeof useResolvedKnobs>["knobProps"];
 }) {
-  const theme = useTheme();
   const imageUrl = getImageUrl(doc[imageField], baseURL);
-  const title = doc[titleField] || doc.name;
+  const title = String(doc[titleField] || doc.name);
   const subtitle = subtitleField ? doc[subtitleField] : undefined;
-  const iconSize = Number(knobProps.controlIcon?.width) || 16;
-
-  return (
-    // 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}`}
-      cursor="pointer"
-      hoverStyle={{ scale: 1.02 }}
-      pressStyle={{ scale: 0.98 }}
-      onPress={(e) => {
-        // Bind click directly to `doc` so the correct item is used even
-        // if the ImageGrid wrapper's closure captured a stale/recycled item.
-        (e as unknown as { stopPropagation?: () => void })?.stopPropagation?.();
-        onItemClick?.(doc as Partial<unknown>);
-      }}
+  const slug = doctype.toLowerCase();
+  const caption = (
+    <YStack
+      width="100%"
+      aspectRatio={1}
+      alignItems="center"
+      justifyContent="center"
+      backgroundColor="$color3"
+      padding="$2"
+      gap="$1"
     >
+      <Text
+        testID={`${slug}-name-${doc.name}`}
+        {...knobProps.label}
+        color={knobProps.textAccentColor}
+        textAlign="center"
+        numberOfLines={2}
+      >
+        {title}
+      </Text>
+      {subtitle != null ? (
+        <Text
+          testID={`${slug}-subtitle-${doc.name}`}
+          {...knobProps.label}
+          color={formCommonColors.muted}
+          textAlign="center"
+          numberOfLines={1}
+        >
+          {String(subtitle)}
+        </Text>
+      ) : null}
+    </YStack>
+  );
+  return (
+    <YStack testID={`${slug}-card-${doc.name}`} aria-label={title} width="100%">
       {imageUrl ? (
         <Image
           src={imageUrl}
-          alt={String(title)}
+          alt={title}
           width="100%"
           aspectRatio={1}
           objectFit="cover"
-          backgroundColor="$color2"
-          {...knobProps.borderRadius}
+          borderRadius={0}
+          backgroundColor="$color3"
+          fallback={caption}
         />
       ) : (
-        <YStack
-          width="100%"
-          aspectRatio={1}
-          backgroundColor="$color2"
-          {...knobProps.borderRadius}
-          alignItems="center"
-          justifyContent="center"
-        >
-          <ImageSquareIcon size={iconSize * 2} color={theme.color11?.val ?? "currentColor"} />
-        </YStack>
+        caption
       )}
-      <Card.Footer>
-        <YStack {...knobProps.gap}>
-          <Text
-            testID={`${doctype.toLowerCase()}-name-${doc.name}`}
-            {...knobProps.heading}
-            fontWeight="400"
-            numberOfLines={1}
-          >
-            {String(title)}
-          </Text>
-          {subtitle != null ? (
-            <Text
-              testID={`${doctype.toLowerCase()}-subtitle-${doc.name}`}
-              color={formCommonColors.muted}
-              {...knobProps.label}
-              numberOfLines={1}
-            >
-              {String(subtitle)}
-            </Text>
-          ) : null}
-        </YStack>
-      </Card.Footer>
-    </Card>
+    </YStack>
   );
 }

package/src/FrappeKanban.tsx

@@ -266,7 +266,6 @@ export function FrappeKanban<TDoc extends { name: string; doctype: string }>({
         {canQuickAdd && column.id !== "__unassigned__" && (
           <Button
             size="$2"
-            circular
             chromeless
             icon={PlusIcon}
             aria-label={t("Add card to {{column}}", { column: column.title })}