@multiplatform.one/frappe-ui 7.66.0 → 7.68.0

package/src/list/FacetRail.spec.tsx

@@ -1,11 +1,11 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { chipFrameGeometry, chipTextSize } from "@multiplatform.one/components";
 import {
   applyThemeScale,
   createDefaultThemeConfig,
   DEFAULT_SCALE_ID,
   densePreset,
   Surface,
-  sizeRecipeForToken,
   sizeKeyBelow,
 } from "@multiplatform.one/theme";
 import { cleanup, fireEvent } from "@testing-library/react";
@@ -22,26 +22,25 @@ const options = [
   { value: "fire", label: "Fire", count: 2 },
 ];
 
-describe("FacetRail chip recipes", () => {
+describe("FacetRail chips are MPO Chips (LC-175)", () => {
   for (const scaleId of [DEFAULT_SCALE_ID, "dense"]) {
     for (const size of ["$true", "$3", "$5"] as const) {
-      it(`${scaleId} at ${size} paints one full step below its controls`, () => {
+      it(`${scaleId} at ${size} paints the MPO chip one full step below its controls`, () => {
         applyThemeScale(config.scales![scaleId]);
         const token = sizeKeyBelow(size);
-        const recipe = sizeRecipeForToken(token, { family: "chip" });
-        const count = sizeRecipeForToken(sizeKeyBelow(token), { family: "chip" });
+        const geometry = chipFrameGeometry(token);
+        const font = chipTextSize(token as "$2");
         const result = renderWithProviders(
           <Surface size={size}>
             <FacetRail label="Type" value="" options={options} onChange={() => {}} />
           </Surface>,
         );
         const frame = result.getByRole("radio", { name: "Fire 2" });
+        expect(frame.hasAttribute("data-chip")).toBe(true);
         const style = getComputedStyle(frame);
-        expect(style.height).toBe(`${recipe.height}px`);
-        expect(style.paddingLeft).toBe(`${recipe.paddingHorizontal}px`);
-        expect(style.gap).toBe(`${recipe.gap}px`);
-        expect(getComputedStyle(result.getByText("Fire")).fontSize).toBe(`${recipe.fontSize}px`);
-        expect(getComputedStyle(result.getByText("2")).fontSize).toBe(`${count.fontSize}px`);
+        expect(style.paddingLeft).toBe(`${geometry.paddingHorizontal}px`);
+        expect(getComputedStyle(result.getByText("Fire")).fontSize).toBe(`${font}px`);
+        expect(getComputedStyle(result.getByText("2")).fontSize).toBe(`${font}px`);
       });
     }
   }
@@ -53,6 +52,8 @@ describe("FacetRail chip recipes", () => {
     );
     const fire = result.getByRole("radio", { name: "Fire 2" });
     expect(fire.getAttribute("aria-checked")).toBe("true");
+    expect(fire.getAttribute("tabindex")).toBe("0");
+    expect(result.getByRole("radio", { name: "All 6" }).getAttribute("tabindex")).toBe("-1");
     fireEvent.click(fire);
     expect(onChange).toHaveBeenLastCalledWith("");
     fireEvent.keyDown(fire, { key: "ArrowLeft" });

package/src/list/FacetRail.tsx

@@ -1,13 +1,8 @@
-import { ScrollView, Text, XStack, isWeb } from "@multiplatform.one/components";
+import { Chip, ScrollView, XStack, isWeb, type ChipSize } from "@multiplatform.one/components";
 import {
   ensureKeyboardModalityTracking,
-  keyboardFocusRingProps,
-  pressTargetHitSlop,
   sizeKeyBelow,
-  sizeRecipeForToken,
-  transitionProps,
   useResolvedKnobs,
-  wasKeyboardFocus,
 } from "@multiplatform.one/theme";
 import { useRef, useState } from "react";
 
@@ -30,147 +25,25 @@ export interface FacetRailProps {
   testID?: string;
 }
 
-interface RailChipProps {
-  option: FacetRailOption;
-  selected: boolean;
-  tabStop: boolean;
-  onPress: () => void;
-  onFocusChip: () => void;
-  onBlurChip: () => void;
-  onMove: (direction: -1 | 1 | "home" | "end") => void;
-  testID?: string;
-  register: (node: { focus?: () => void } | null) => void;
-}
-
-// Chips paint one full step under the toolbar controls; hitSlop restores the
-// 44px press target (DG-LAY-04, ViewSwitcher precedent).
-const pipSize = "$1";
-
-/**
- * One chip. Neutral until active; the active chip fills from its tint ramp
- * (DF-04 pairing: tint fill, step-12 text), so selected is fill, never a
- * sibling border (LC-71). An unselected tinted chip carries a hue pip.
- */
-function RailChip({
-  option,
-  selected,
-  tabStop,
-  onPress,
-  onFocusChip,
-  onBlurChip,
-  onMove,
-  testID,
-  register,
-}: RailChipProps) {
-  const { knobProps } = useResolvedKnobs();
-  const chipToken = sizeKeyBelow(knobProps.sizeToken);
-  const chip = sizeRecipeForToken(chipToken, { family: "chip" });
-  const count = sizeRecipeForToken(sizeKeyBelow(chipToken), { family: "chip" });
-  const [kbFocus, setKbFocus] = useState(false);
-  if (isWeb) ensureKeyboardModalityTracking();
-  const hue = option.tint;
-  const fill = selected ? (hue ? `$${hue}5` : "$color5") : hue ? `$${hue}3` : "$color3";
-  const hoverFill = selected ? fill : hue ? `$${hue}4` : "$color4";
-  const textColor = selected ? (hue ? `$${hue}12` : "$color12") : hue ? `$${hue}11` : "$color11";
-  const keys: Record<string, -1 | 1 | "home" | "end"> = {
-    ArrowRight: 1,
-    ArrowLeft: -1,
-    Home: "home",
-    End: "end",
-  };
-
-  return (
-    <XStack
-      ref={register}
-      {...knobProps.borderRadius}
-      backgroundColor={fill as never}
-      borderWidth={0}
-      paddingHorizontal={chip.paddingHorizontal}
-      height={chip.height}
-      hitSlop={pressTargetHitSlop(chip.height)}
-      alignItems="center"
-      gap={chip.gap}
-      cursor="pointer"
-      role="radio"
-      aria-checked={selected}
-      {...(isWeb ? { tabIndex: tabStop ? 0 : -1 } : undefined)}
-      {...transitionProps(knobProps.motion.control)}
-      hoverStyle={{ backgroundColor: hoverFill as never }}
-      pressStyle={{ backgroundColor: fill as never }}
-      outlineWidth={0}
-      focusStyle={{ outlineWidth: 0, backgroundColor: fill as never }}
-      focusVisibleStyle={{ outlineWidth: 0 }}
-      {...(isWeb
-        ? {
-            onFocus: () => {
-              onFocusChip();
-              if (wasKeyboardFocus()) setKbFocus(true);
-            },
-            onBlur: () => {
-              onBlurChip();
-              setKbFocus(false);
-            },
-            onKeyDown: (event: { key?: string; preventDefault?: () => void }) => {
-              const direction = event.key ? keys[event.key] : undefined;
-              if (direction !== undefined) {
-                event.preventDefault?.();
-                onMove(direction);
-                return;
-              }
-              if (event.key === "Enter" || event.key === " ") {
-                event.preventDefault?.();
-                onPress();
-              }
-            },
-          }
-        : undefined)}
-      {...(kbFocus ? keyboardFocusRingProps : undefined)}
-      onPress={onPress}
-      testID={testID}
-    >
-      {hue ? (
-        <XStack
-          width={pipSize}
-          height={pipSize}
-          borderRadius={1000}
-          backgroundColor={`$${hue}9` as never}
-          flexShrink={0}
-        />
-      ) : null}
-      <Text
-        {...knobProps.label}
-        fontSize={chip.fontSize}
-        fontWeight={selected ? "700" : "500"}
-        color={textColor as never}
-        textTransform="capitalize"
-        userSelect="none"
-      >
-        {option.label}
-      </Text>
-      {typeof option.count === "number" ? (
-        <Text
-          {...knobProps.label}
-          fontSize={count.fontSize}
-          fontWeight="700"
-          color={textColor as never}
-          opacity={0.7}
-          userSelect="none"
-        >
-          {option.count}
-        </Text>
-      ) : null}
-    </XStack>
-  );
-}
+const moves: Record<string, -1 | 1 | "home" | "end"> = {
+  ArrowRight: 1,
+  ArrowLeft: -1,
+  Home: "home",
+  End: "end",
+};
 
 /**
- * A single-select facet as a horizontally scrolling chip rail. One tap
- * narrows, a second tap on the active chip clears. One tab stop (LC-49):
- * arrows, Home and End move and select like a radiogroup, and the focused
- * chip paints the only ring (LC-71). Scrolls on narrow viewports instead of
- * wrapping into a wall of chips.
+ * A single-select facet as a horizontally scrolling rail of MPO `Chip`s, one
+ * step under the toolbar controls (LC-175). One tap narrows, a second tap on
+ * the active chip clears. One tab stop (LC-49): arrows, Home and End move and
+ * select like a radiogroup, and the focused chip paints the only ring
+ * (LC-71). Scrolls on narrow viewports instead of wrapping into a wall of
+ * chips. A tinted value paints from its ramp; the active chip takes the
+ * theme's selected look (LC-131).
  */
 export function FacetRail({ label, value, options, onChange, testID }: FacetRailProps) {
+  const { knobProps } = useResolvedKnobs();
+  const chipSize = sizeKeyBelow(knobProps.sizeToken) as ChipSize;
   const itemRefs = useRef<Record<string, { focus?: () => void } | null>>({});
   const [focusValue, setFocusValue] = useState<string | null>(null);
   if (isWeb) ensureKeyboardModalityTracking();
@@ -215,24 +88,39 @@ export function FacetRail({ label, value, options, onChange, testID }: FacetRail
         paddingVertical="$1"
         testID={testID}
       >
-        {options.map((option) => (
-          <RailChip
-            key={option.value || "__all"}
-            option={option}
-            selected={option.value === value}
-            tabStop={option.value === anchor}
-            onPress={() =>
-              onChange(option.value === value && option.value !== "" ? "" : option.value)
-            }
-            onFocusChip={() => setFocusValue(option.value)}
-            onBlurChip={() => setFocusValue((prev) => (prev === option.value ? null : prev))}
-            onMove={(direction) => moveFrom(option.value, direction)}
-            testID={testID ? `${testID}-${option.value || "all"}` : undefined}
-            register={(node) => {
-              itemRefs.current[option.value] = node;
-            }}
-          />
-        ))}
+        {options.map((option) => {
+          const selected = option.value === value;
+          return (
+            <Chip
+              key={option.value || "__all"}
+              ref={(node: unknown) => {
+                itemRefs.current[option.value] = node as { focus?: () => void } | null;
+              }}
+              role="radio"
+              selected={selected}
+              tabIndex={option.value === anchor ? 0 : -1}
+              size={chipSize}
+              color={option.tint}
+              swatch={option.tint && !selected ? (`$${option.tint}9` as never) : undefined}
+              count={option.count}
+              aria-label={
+                typeof option.count === "number" ? `${option.label} ${option.count}` : option.label
+              }
+              onPress={() => onChange(selected && option.value !== "" ? "" : option.value)}
+              onFocus={() => setFocusValue(option.value)}
+              onBlur={() => setFocusValue((prev) => (prev === option.value ? null : prev))}
+              onKeyDown={(event) => {
+                const direction = moves[event.key];
+                if (direction === undefined) return;
+                event.preventDefault();
+                moveFrom(option.value, direction);
+              }}
+              testID={testID ? `${testID}-${option.value || "all"}` : undefined}
+            >
+              {option.label}
+            </Chip>
+          );
+        })}
       </XStack>
     </ScrollView>
   );

package/src/list/ListControls.tsx

@@ -208,9 +208,7 @@ export function ListControls({
             {shuffle ? (
               <Tooltip content={t("Open a random record")}>
                 <Button
-                  outlined={!shuffle.open}
-                  theme={shuffle.open ? "accent" : undefined}
-                  circular
+                  selected={shuffle.open}
                   onPress={shuffle.toggle}
                   icon={<DiceFiveIcon size={16} />}
                   aria-label={t("Surprise me")}

package/src/list/ListControlsSheet.tsx

@@ -7,6 +7,7 @@ import {
   XStack,
   YStack,
   isWeb,
+  OverlayHeader,
 } from "@multiplatform.one/components";
 import { Button, SearchInput, Select, Switch } from "@multiplatform.one/forms";
 import {
@@ -180,7 +181,6 @@ export function ListControlsSheet({
           <XStack gap="$2" alignItems="center" flexShrink={0}>
             {shuffle ? (
               <Button
-                circular
                 chromeless
                 onPress={shuffle.toggle}
                 icon={DiceFiveIcon}
@@ -212,17 +212,15 @@ export function ListControlsSheet({
         onOpenChange={setOpen}
         scrollable
         header={
-          <XStack alignItems="center" gap="$2">
-            <Text fontSize="$6" fontWeight="700" color="$color12">
-              {t("Filters", "Filters")}
-            </Text>
-            <Button chromeless onPress={reset} testID={`${testID}-reset`}>
-              {t("Reset")}
-            </Button>
-            <Button chromeless onPress={() => setOpen(false)}>
-              {t("Done")}
-            </Button>
-          </XStack>
+          <OverlayHeader
+            title={t("Filters", "Filters")}
+            actions={
+              <Button chromeless onPress={reset} testID={`${testID}-reset`}>
+                {t("Reset")}
+              </Button>
+            }
+            onConfirm={() => setOpen(false)}
+          />
         }
       >
         <YStack gap="$5" paddingBottom="$4" testID={`${testID}-filters-sheet`}>

package/src/list/ListSidebarToolbar.tsx

@@ -2,11 +2,11 @@ import {
   Badge,
   DropdownMenu,
   SheetModal,
-  Text,
   Tooltip,
   XStack,
   YStack,
   type DropdownMenuEntry,
+  OverlayHeader,
 } from "@multiplatform.one/components";
 import { Button, SearchInput, Select } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
@@ -107,9 +107,7 @@ export function ListSidebarToolbar({
           >
             <Tooltip content={t("Open a random record")}>
               <Button
-                outlined={!shuffle.open}
-                theme={shuffle.open ? "accent" : undefined}
-                circular
+                selected={shuffle.open}
                 onPress={shuffle.toggle}
                 icon={<DiceFiveIcon size={16} />}
                 aria-label={t("Surprise me")}
@@ -145,8 +143,6 @@ export function ListSidebarToolbar({
           {menuItems.length > 0 ? (
             <DropdownMenu items={[...menuItems]} placement="bottom-end">
               <Button
-                outlined
-                circular
                 icon={<DotsThreeIcon size={20} weight="bold" />}
                 aria-label={t("More actions")}
                 testID={`${testID}-more`}
@@ -162,18 +158,11 @@ export function ListSidebarToolbar({
         scrollable
         snapPoint={85}
         header={
-          <XStack alignItems="center" {...knobProps.gap}>
-            <Text {...knobProps.heading} fontWeight="700" role="heading" aria-level={2}>
-              {t("Filters")}
-            </Text>
-            <Button
-              theme="accent"
-              onPress={() => setSheetOpen(false)}
-              testID={`${testID}-filters-done`}
-            >
-              {t("Done")}
-            </Button>
-          </XStack>
+          <OverlayHeader
+            title={t("Filters")}
+            onConfirm={() => setSheetOpen(false)}
+            testID={`${testID}-filters`}
+          />
         }
       >
         {sheetOpen ? (

package/src/list/RecordCard.native.tsx

@@ -3,6 +3,7 @@ import { Button } from "@multiplatform.one/forms";
 import { transitionProps, useResolvedKnobs } from "@multiplatform.one/theme";
 import { HeartIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
+import { useTheme } from "tamagui";
 import { FacetBadge } from "./FacetBadge";
 import { ImageWell } from "./ImageWell";
 import type { RecordCardProps } from "./RecordCard";
@@ -10,9 +11,10 @@ import type { RecordCardProps } from "./RecordCard";
 export type { RecordCardBadge, RecordCardProps } from "./RecordCard";
 
 /**
- * Native twin of RecordCard. On React Native an Anchor is a Text node whose
- * press the Card (a View with its own responder) claims, so the card's
- * press sits on the Card itself and the heart stops it from bubbling there.
+ * Native twin of RecordCard, the same MPO media `Card`. On React Native an
+ * Anchor is a Text node whose press the Card (a View with its own responder)
+ * claims, so the card's press sits on the Card itself and the heart stops it
+ * from bubbling there.
  */
 export function RecordCard({
   title,
@@ -28,6 +30,7 @@ export function RecordCard({
 }: RecordCardProps) {
   const { t } = useTranslation();
   const { knobProps, elevation: elevationState } = useResolvedKnobs({ component: "Card" });
+  const theme = useTheme();
 
   const handleToggleFavorite = (event?: { stopPropagation?: () => void }) => {
     event?.stopPropagation?.();
@@ -37,28 +40,7 @@ export function RecordCard({
   return (
     <Card
       testID={testID}
-      {...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}
-      {...transitionProps(knobProps.motion.control, [
-        "boxShadow",
-        "shadowColor",
-        "shadowOffset",
-        "shadowOpacity",
-        "shadowRadius",
-        "elevation",
-      ])}
-      pressStyle={{ scale: 0.98, ...elevationState.pressKnobProps }}
-      role="button"
-      aria-label={title}
-      onPress={() => onPress?.()}
-    >
-      <YStack gap={0}>
+      media={
         <YStack position="relative">
           <ImageWell
             sources={images}
@@ -71,16 +53,17 @@ export function RecordCard({
           {favorite ? (
             <XStack position="absolute" top="$1" right="$1" zIndex={2}>
               <Button
-                circular
-                chromeless
-                minWidth={knobProps.sizeToken}
-                minHeight={knobProps.sizeToken}
-                {...transitionProps(knobProps.motion.control)}
-                backgroundColor="$background08"
-                pressStyle={{ backgroundColor: "$background", scale: 0.92 }}
+                plate="media"
+                selected={false}
                 onPress={handleToggleFavorite}
                 col={(favorite.active ? "$red9" : "$color11") as never}
-                icon={<HeartIcon size={20} weight={favorite.active ? "fill" : "regular"} />}
+                icon={
+                  <HeartIcon
+                    size={20}
+                    weight={favorite.active ? "fill" : "regular"}
+                    color={(favorite.active ? theme.red9 : theme.color11)?.val as string}
+                  />
+                }
                 aria-label={
                   favorite.active
                     ? t("Remove {{name}} from favorites", { name: title })
@@ -92,44 +75,55 @@ export function RecordCard({
             </XStack>
           ) : null}
         </YStack>
-        <YStack {...knobProps.panelPadding} gap="$1.5">
-          <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>
+      }
+      {...transitionProps(knobProps.motion.control, [
+        "boxShadow",
+        "shadowColor",
+        "shadowOffset",
+        "shadowOpacity",
+        "shadowRadius",
+        "elevation",
+      ])}
+      pressStyle={{ scale: 0.98, ...elevationState.pressKnobProps }}
+      role="button"
+      aria-label={title}
+      onPress={() => onPress?.()}
+    >
+      <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}
     </Card>
   );
 }

package/src/list/RecordCard.spec.tsx

@@ -1,6 +1,7 @@
-// A record card is full-bleed media over a padded body: the image well runs
-// to the card's edges (the card clips it to its radius) and the name, the
-// code and the facet pills sit in the body under it, not stickered on the art.
+// A record card is the MPO media Card (LC-175): the image well runs to the
+// card's edges (the card clips it to its radius) and the name, the code and
+// the facet chips sit in the card's inset body under it, not stickered on the
+// art.
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { cleanup, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
@@ -24,10 +25,12 @@ function renderCard() {
 }
 
 describe("RecordCard full-bleed media", () => {
-  it("drops the card's inset and clips its media to the radius", () => {
+  it("is an MPO media Card: no inset on the frame, media clipped to the radius", () => {
     renderCard();
     const card = screen.getByTestId("card");
-    expect(card.hasAttribute("data-record-card-bleed")).toBe(true);
+    expect(card.hasAttribute("data-card-media")).toBe(true);
+    expect(card.querySelector("[data-card-media-slot] [data-record-card-media]")).not.toBeNull();
+    expect(card.querySelector("[data-card-body]")?.textContent).toContain("Pikachu");
     expect(card.className).toMatch(/_ox-hidden/);
     expect(card.className).toMatch(/_oy-hidden/);
     expect(card.className).toMatch(/_pt-0px/);