@multiplatform.one/frappe-ui 7.66.0 → 7.68.0

package/src/list/RecordCard.tsx

@@ -65,12 +65,12 @@ function isModifiedPress(event?: PressLikeEvent): boolean {
 }
 
 /**
- * A record as a tile: the image well is the card (tinted by the record's
- * facet, its values stickered on it, its code stamped in the corner) with
- * the title and a muted subtitle under it. A routed card is a stretched
- * link with the heart as its sibling button (LC-74), so a first-paint click
- * on the heart never follows the link; modified clicks keep the browser's
- * new-tab semantics.
+ * A record as an MPO media `Card` (LC-175): the image well, tinted by the
+ * record's facet, is the card's full-bleed media, with the title, code,
+ * muted subtitle and facet chips in the body under it. A routed card is a
+ * stretched link in the card's overlay with the heart as its sibling button
+ * above it (LC-74), so a first-paint click on the heart never follows the
+ * link; modified clicks keep the browser's new-tab semantics.
  */
 export function RecordCard({
   title,
@@ -109,21 +109,80 @@ export function RecordCard({
     favorite?.toggle();
   };
 
-  const passThrough = href ? "box-none" : undefined;
-  const inert = href ? "none" : undefined;
+  const heart = favorite ? (
+    <XStack
+      position="absolute"
+      top="$1"
+      right="$1"
+      zIndex={2}
+      {...(isWeb
+        ? {
+            onClickCapture: (event: { preventDefault: () => void }) => {
+              event.preventDefault();
+            },
+          }
+        : undefined)}
+    >
+      <Button
+        plate="media"
+        selected={false}
+        onPress={handleToggleFavorite}
+        render="button"
+        type="button"
+        col={(favorite.active ? "$red9" : "$color11") as never}
+        icon={<HeartIcon size={20} weight={favorite.active ? "fill" : "regular"} />}
+        aria-label={
+          favorite.active
+            ? t("Remove {{name}} from favorites", { name: title })
+            : t("Add {{name}} to favorites", { name: title })
+        }
+        aria-pressed={favorite.active}
+        testID={favoriteTestID}
+      />
+    </XStack>
+  ) : null;
 
   return (
     <Card
       testID={testID}
-      position="relative"
-      {...knobProps.cardSurface}
-      // Full-bleed media: the card has no inset of its own and its radius
-      // clips the image well; the body below carries the inset.
-      padding={0}
-      gap={0}
-      overflow="hidden"
-      data-record-card-bleed=""
-      elevation={knobProps.elevation}
+      media={
+        <YStack position="relative">
+          <ImageWell
+            sources={images}
+            alt={title}
+            tint={tint}
+            inset={0.04}
+            borderRadius={0}
+            lazy={lazy}
+            {...({ "data-record-card-media": "" } as Record<string, unknown>)}
+          />
+          {heart}
+        </YStack>
+      }
+      overlay={
+        href ? (
+          <Anchor
+            href={href as never}
+            position="absolute"
+            top={0}
+            left={0}
+            right={0}
+            bottom={0}
+            textDecorationLine="none"
+            outlineWidth={0}
+            aria-label={title}
+            onPress={handlePress}
+            {...(isWeb
+              ? {
+                  onFocus: () => {
+                    if (wasKeyboardFocus()) setAnchorKeyboardFocus(true);
+                  },
+                  onBlur: () => setAnchorKeyboardFocus(false),
+                }
+              : undefined)}
+          />
+        ) : undefined
+      }
       cursor="pointer"
       {...transitionProps(knobProps.motion.control, [
         "boxShadow",
@@ -146,119 +205,41 @@ export function RecordCard({
             focusVisibleStyle: focusRing,
           })}
     >
-      {href ? (
-        <Anchor
-          href={href as never}
-          position="absolute"
-          top={0}
-          left={0}
-          right={0}
-          bottom={0}
-          zIndex={0}
-          textDecorationLine="none"
-          outlineWidth={0}
-          aria-label={title}
-          onPress={handlePress}
-          {...(isWeb
-            ? {
-                onFocus: () => {
-                  if (wasKeyboardFocus()) setAnchorKeyboardFocus(true);
-                },
-                onBlur: () => setAnchorKeyboardFocus(false),
-              }
-            : undefined)}
-        />
+      <XStack gap="$2" alignItems="baseline">
+        <Text
+          {...knobProps.heading}
+          fontWeight="700"
+          fontSize="$4"
+          numberOfLines={1}
+          color="$color12"
+          flexShrink={1}
+        >
+          {title}
+        </Text>
+        {code ? (
+          <Text
+            fontSize="$2"
+            fontWeight="700"
+            color="$color10"
+            flexShrink={0}
+            {...({ "data-record-card-code": "" } as Record<string, unknown>)}
+          >
+            {code}
+          </Text>
+        ) : null}
+      </XStack>
+      {subtitle ? (
+        <Text {...knobProps.body} fontSize="$2" color="$color10" numberOfLines={1}>
+          {subtitle}
+        </Text>
+      ) : null}
+      {badges.length > 0 ? (
+        <XStack gap="$1.5" flexWrap="wrap">
+          {badges.map((badge) => (
+            <FacetBadge key={badge.value} label={badge.label} tint={badge.tint} size="$3" />
+          ))}
+        </XStack>
       ) : null}
-      <YStack gap={0} zIndex={1} pointerEvents={passThrough}>
-        <YStack position="relative" pointerEvents={passThrough}>
-          <ImageWell
-            sources={images}
-            alt={title}
-            tint={tint}
-            inset={0.04}
-            borderRadius={0}
-            lazy={lazy}
-            pointerEvents={inert}
-            {...({ "data-record-card-media": "" } as Record<string, unknown>)}
-          />
-          {favorite ? (
-            <XStack
-              position="absolute"
-              top="$1"
-              right="$1"
-              zIndex={2}
-              pointerEvents="auto"
-              {...(isWeb
-                ? {
-                    onClickCapture: (event: { preventDefault: () => void }) => {
-                      event.preventDefault();
-                    },
-                  }
-                : undefined)}
-            >
-              <Button
-                circular
-                chromeless
-                minWidth={knobProps.sizeToken}
-                minHeight={knobProps.sizeToken}
-                {...transitionProps(knobProps.motion.control)}
-                backgroundColor="$background08"
-                hoverStyle={{ backgroundColor: "$background", scale: 1.08 }}
-                pressStyle={{ backgroundColor: "$background", scale: 0.92 }}
-                onPress={handleToggleFavorite}
-                render="button"
-                type="button"
-                col={(favorite.active ? "$red9" : "$color11") as never}
-                icon={<HeartIcon size={20} weight={favorite.active ? "fill" : "regular"} />}
-                aria-label={
-                  favorite.active
-                    ? t("Remove {{name}} from favorites", { name: title })
-                    : t("Add {{name}} to favorites", { name: title })
-                }
-                aria-pressed={favorite.active}
-                testID={favoriteTestID}
-              />
-            </XStack>
-          ) : null}
-        </YStack>
-        <YStack {...knobProps.panelPadding} gap="$1.5" pointerEvents={inert}>
-          <XStack gap="$2" alignItems="baseline">
-            <Text
-              {...knobProps.heading}
-              fontWeight="700"
-              fontSize="$4"
-              numberOfLines={1}
-              color="$color12"
-              flexShrink={1}
-            >
-              {title}
-            </Text>
-            {code ? (
-              <Text
-                fontSize="$2"
-                fontWeight="700"
-                color="$color10"
-                flexShrink={0}
-                {...({ "data-record-card-code": "" } as Record<string, unknown>)}
-              >
-                {code}
-              </Text>
-            ) : null}
-          </XStack>
-          {subtitle ? (
-            <Text {...knobProps.body} fontSize="$2" color="$color10" numberOfLines={1}>
-              {subtitle}
-            </Text>
-          ) : null}
-          {badges.length > 0 ? (
-            <XStack gap="$1.5" flexWrap="wrap">
-              {badges.map((badge) => (
-                <FacetBadge key={badge.value} label={badge.label} tint={badge.tint} size="$3" />
-              ))}
-            </XStack>
-          ) : null}
-        </YStack>
-      </YStack>
     </Card>
   );
 }

package/src/list/ShufflePanel.tsx

@@ -1,6 +1,14 @@
-import { Button, Wheel, XStack, YStack } from "@multiplatform.one/components";
+import {
+  Button,
+  Tooltip,
+  Wheel,
+  XStack,
+  YStack,
+  useImageGridGeometry,
+  type ImageGridProps,
+} from "@multiplatform.one/components";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { ArrowCounterClockwiseIcon, ArrowRightIcon } from "@phosphor-icons/react";
+import { ArrowRightIcon, ShuffleIcon } from "@phosphor-icons/react";
 import type React from "react";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -16,11 +24,11 @@ export interface ShufflePanelProps<TDoc extends { name?: string }> {
   /** Draws the current pick beside the wheel. */
   renderPick: (doc: TDoc) => React.ReactNode;
   onGo: (doc: TDoc) => void;
+  /** The card grid below, so the pick takes exactly one of its tracks. */
+  grid?: Pick<ImageGridProps<unknown>, "columns" | "tileSize">;
   testID?: string;
 }
 
-const pickWidth = "$12";
-
 function randomOtherIndex(current: number, length: number): number {
   if (length < 2) return Math.max(0, current);
   const offset = 1 + Math.floor(Math.random() * (length - 1));
@@ -28,8 +36,10 @@ function randomOtherIndex(current: number, length: number): number {
 }
 
 /**
- * Pick a random record: a wheel of record labels beside the current pick.
- * Drag or flick the wheel, or Spin for a random jump, then Go opens it.
+ * Pick a random record: a wheel of record labels with Shuffle and Open as
+ * icon buttons (LC-260), beside the current pick drawn at the card grid's
+ * own tile width. The panel paints no card of its own, so the pick card never
+ * sits inside another (LC-169).
  */
 export function ShufflePanel<TDoc extends { name?: string }>({
   id,
@@ -38,10 +48,12 @@ export function ShufflePanel<TDoc extends { name?: string }>({
   itemLabel,
   renderPick,
   onGo,
+  grid,
   testID,
 }: ShufflePanelProps<TDoc>) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
+  const { columns, gutter } = useImageGridGeometry(grid);
   const named = useMemo(() => rows.filter((row) => row.name), [rows]);
   const items = useMemo(
     () => named.map((row) => ({ value: row.name as string, label: itemLabel(row) })),
@@ -59,49 +71,62 @@ export function ShufflePanel<TDoc extends { name?: string }>({
     const current = named.findIndex((row) => row.name === pick.name);
     setSelected(named[randomOtherIndex(current, named.length)]?.name ?? "");
   };
+  const pickLabel = itemLabel(pick);
+  const tracks = Math.max(2, columns);
 
   return (
     <XStack
       id={id}
       role="region"
       aria-label={label}
-      {...knobProps.surface}
-      {...knobProps.borderRadius}
-      {...knobProps.panelPadding}
-      {...knobProps.gap}
+      gap={gutter}
       alignItems="center"
-      flexWrap="wrap"
       testID={testID}
     >
-      <Wheel
-        items={items}
-        value={pick.name as string}
-        onChange={(next) => setSelected(String(next))}
-        visibleItems={3}
-        loop
-        aria-label={label}
-      />
-      <YStack width={pickWidth} flexShrink={0}>
+      {/* The controls span every track but the pick's, with the gutters
+          between them, so the pick lands on one tile's exact width. */}
+      <YStack
+        flexGrow={tracks - 1}
+        flexShrink={1}
+        flexBasis={gutter * (tracks - 2)}
+        minWidth={0}
+        alignItems="center"
+        {...knobProps.gap}
+      >
+        <Wheel
+          items={items}
+          value={pick.name as string}
+          onChange={(next) => setSelected(String(next))}
+          visibleItems={3}
+          loop
+          aria-label={label}
+        />
+        <XStack alignItems="center" gap="$2">
+          <Tooltip content={t("Shuffle")}>
+            <Button
+              chromeless
+              accentInk
+              icon={ShuffleIcon}
+              aria-label={t("Shuffle")}
+              onPress={spin}
+              testID={testID ? `${testID}-spin` : undefined}
+            />
+          </Tooltip>
+          <Tooltip content={t("Open {{name}}", { name: pickLabel })}>
+            <Button
+              chromeless
+              accentInk
+              icon={ArrowRightIcon}
+              aria-label={t("Open {{name}}", { name: pickLabel })}
+              onPress={() => onGo(pick)}
+              testID={testID ? `${testID}-go` : undefined}
+            />
+          </Tooltip>
+        </XStack>
+      </YStack>
+      <YStack flexGrow={1} flexShrink={1} flexBasis={0} minWidth={0}>
         {renderPick(pick)}
       </YStack>
-      <XStack {...knobProps.gap} alignItems="center" flexShrink={0}>
-        <Button
-          outlined
-          onPress={spin}
-          icon={<ArrowCounterClockwiseIcon size={16} />}
-          testID={testID ? `${testID}-spin` : undefined}
-        >
-          {t("Spin")}
-        </Button>
-        <Button
-          theme="accent"
-          onPress={() => onGo(pick)}
-          iconAfter={<ArrowRightIcon size={16} />}
-          testID={testID ? `${testID}-go` : undefined}
-        >
-          {t("Go")}
-        </Button>
-      </XStack>
     </XStack>
   );
 }

package/src/list/listColumns.tsx

@@ -259,13 +259,13 @@ function LikeControl({
   }
   return (
     <Button
-      circular
       chromeless
       size="$2"
       col={(liked ? "$red10" : "$color8") as never}
       icon={<HeartIcon size={16} weight={liked ? "fill" : "regular"} />}
       aria-label={likeLabel}
       aria-pressed={liked}
+      selected={false}
       onPress={(event) => {
         stopRowPress(event);
         onToggleLike(name, !liked);

package/src/record/RecordHero.tsx

@@ -1,5 +1,5 @@
 import {
-  Skeleton,
+  AsyncSkeleton,
   TamaguiSizableText,
   Text,
   XStack,
@@ -8,7 +8,6 @@ import {
 } from "@multiplatform.one/components";
 import { sizeRecipeEscape, useResolvedKnobs } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
 
 /**
  * The record hero's geometry, shared by the loaded hero and its skeleton so
@@ -92,56 +91,17 @@ export function RecordVitals({ tiles }: { tiles: readonly RecordVitalTile[] }) {
   );
 }
 
-const bone = (px: number) =>
-  sizeRecipeEscape(px, "loading bones sized to the record page they stand in for");
-
-/** The hero and tab strip's loading twin, on the same geometry. */
+/**
+ * The hero and tab strip's loading twin: the MPO detail skeleton on the
+ * record hero's own geometry, so the page does not jump when the record
+ * lands (LC-20, LC-175).
+ */
 export function RecordSkeleton({ testID }: { testID?: string }) {
-  const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs();
   return (
-    <YStack testID={testID} data-async-skeleton="record" aria-busy aria-label={t("Loading")}>
-      <RecordHeroFrame {...{ "data-skeleton-part": "art" }}>
-        <YStack alignItems="center">
-          <Skeleton
-            variant="rounded"
-            width={bone(recordHeroArtHeight)}
-            height={bone(recordHeroArtHeight)}
-          />
-        </YStack>
-      </RecordHeroFrame>
-      <RecordHeroIdentityColumn {...{ "data-skeleton-part": "identity" }}>
-        <XStack gap="$2">
-          <Skeleton width={bone(40)} height={bone(20)} />
-          <Skeleton variant="rounded" width={bone(56)} height={bone(22)} />
-          <Skeleton variant="rounded" width={bone(56)} height={bone(22)} />
-        </XStack>
-        <Skeleton width={bone(220)} height={bone(40)} />
-        <Skeleton width={bone(140)} height={bone(18)} />
-        <XStack columnGap={knobProps.gapLg.gap} paddingTop={knobProps.gap.gap}>
-          {[0, 1, 2].map((tile) => (
-            <YStack key={tile} gap="$1">
-              <Skeleton width={bone(56)} height={bone(14)} />
-              <Skeleton width={bone(48)} height={bone(22)} />
-            </YStack>
-          ))}
-        </XStack>
-      </RecordHeroIdentityColumn>
-      <YStack {...knobProps.gapLg} paddingTop={knobProps.panelPadding.padding}>
-        <XStack
-          {...knobProps.gapLg}
-          {...knobProps.panelPadding}
-          paddingVertical={0}
-          {...{ "data-skeleton-part": "tabs" }}
-        >
-          {[96, 64, 88].map((width, tab) => (
-            <Skeleton key={tab} width={bone(width)} height={bone(40)} />
-          ))}
-        </XStack>
-        <YStack {...knobProps.panelPadding} paddingVertical={0}>
-          <Skeleton.Text lines={4} />
-        </YStack>
-      </YStack>
-    </YStack>
+    <AsyncSkeleton
+      layout="detail"
+      hero={{ height: recordHeroStageHeight, art: recordHeroArtHeight }}
+      testID={testID}
+    />
   );
 }

package/src/record/RecordPage.tsx

@@ -15,7 +15,11 @@ import {
   type DropdownMenuEntry,
 } from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
-import { formatAbsoluteDateTime, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  DETAIL_READABLE_WIDTH,
+  formatAbsoluteDateTime,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { DotsThreeOutlineIcon, HeartIcon, PencilSimpleIcon } from "@phosphor-icons/react";
 import type { ComponentType, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
@@ -297,12 +301,9 @@ export function RecordPage<TDoc extends { name: string; doctype: string }>({
     <>
       {favorites ? (
         <Button
-          circular
-          chromeless
-          minWidth={knobProps.sizeToken}
-          minHeight={knobProps.sizeToken}
+          selected={false}
           onPress={() => toggle(name)}
-          col={(favorite ? "$red9" : "$color11") as never}
+          {...(favorite ? { col: "$red9" as never } : undefined)}
           icon={<HeartIcon size={24} weight={favorite ? "fill" : "regular"} />}
           aria-label={favoriteLabel}
           aria-pressed={favorite}
@@ -314,11 +315,6 @@ export function RecordPage<TDoc extends { name: string; doctype: string }>({
       {menu.length > 0 ? (
         <DropdownMenu items={menu} placement="bottom-end">
           <Button
-            circular
-            chromeless
-            minWidth={knobProps.sizeToken}
-            minHeight={knobProps.sizeToken}
-            col={"$color" as never}
             icon={<DotsThreeOutlineIcon size={22} weight="fill" />}
             aria-label={t("More actions")}
             testID={`${slug}-detail-more`}
@@ -332,6 +328,7 @@ export function RecordPage<TDoc extends { name: string; doctype: string }>({
     <Screen
       noPadding
       gap={0}
+      maxWidth={DETAIL_READABLE_WIDTH}
       topBar={
         <RecordTopBar
           listName={listName}

package/src/report/ReportViewToolbar.spec.tsx

@@ -11,8 +11,10 @@
  */
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { fireEvent, waitFor } from "@testing-library/react";
+import i18next from "i18next";
 import React from "react";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
 import type { ReportColumnDef } from "./reportViewModel";
 import { ReportViewToolbar as ReportToolbar } from "./ReportViewToolbar";
 
@@ -32,7 +34,7 @@ const columns: ReportColumnDef[] = [
   },
 ];
 
-function renderToolbar() {
+function renderToolbar(overrides: Partial<React.ComponentProps<typeof ReportToolbar>> = {}) {
   return renderWithProviders(
     <ReportToolbar
       columns={columns}
@@ -50,10 +52,19 @@ function renderToolbar() {
       onSaveReport={vi.fn()}
       onDeleteReport={vi.fn()}
       onExport={vi.fn()}
+      {...overrides}
     />,
   );
 }
 
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
 let errorSpy: ReturnType<typeof vi.spyOn> | null = null;
 beforeEach(() => {
   // Strict local spy: the shared test setup filters known leak warnings
@@ -75,7 +86,7 @@ describe("ReportToolbar Save As popover (LC-46 DOM prop hygiene)", () => {
   it("opens the Save As popover without leaking non-DOM props", async () => {
     const result = renderToolbar();
 
-    const saveAs = result.findTextElement("Save As…");
+    const saveAs = result.getButton("Save report");
     expect(saveAs).toBeDefined();
     fireEvent.click(saveAs as Element);
 
@@ -88,3 +99,34 @@ describe("ReportToolbar Save As popover (LC-46 DOM prop hygiene)", () => {
     expect(document.querySelector("[elevate]")).toBeNull();
   });
 });
+
+describe("ReportToolbar actions are icons, delete is direct (LC-260, LC-261, LC-262)", () => {
+  it("names icon-only actions in their labels and counts columns without a dot join", () => {
+    const result = renderToolbar({ onClearColumnFilters: vi.fn(), columnFilterCount: 2 });
+    expect(result.getButton("Export CSV")?.textContent?.trim()).toBe("");
+    expect(result.getButton("Save report")?.textContent?.trim()).toBe("");
+    const columnsTrigger = result.getButton("Columns, 2 of 2");
+    expect(columnsTrigger?.textContent).toContain("2/2");
+    expect(document.body.textContent).not.toContain("·");
+  });
+
+  it("deletes the selected saved report from a trash button, after a confirm", async () => {
+    const onDeleteReport = vi.fn();
+    const result = renderToolbar({
+      savedReports: [{ name: "RPT-1", reportName: "Open moves" }],
+      currentReport: "RPT-1",
+      onDeleteReport,
+    });
+    fireEvent.click(result.getButton("Delete “Open moves”") as Element);
+    expect(onDeleteReport).not.toHaveBeenCalled();
+    const confirm = await waitFor(() => {
+      const button = Array.from(document.querySelectorAll('button, [role="button"]')).find(
+        (node) => node.textContent?.trim() === "Delete",
+      );
+      if (!button) throw new Error("no confirm");
+      return button;
+    });
+    fireEvent.click(confirm);
+    expect(onDeleteReport).toHaveBeenCalledWith("RPT-1");
+  });
+});