@multiplatform.one/frappe-ui 7.66.0 → 7.68.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/frappe-ui",
-  "version": "7.66.0",
+  "version": "7.68.0",
   "description": "Pre-wired Tamagui components for Frappe doctypes with live data",
   "keywords": [
     "cross-platform",
@@ -72,18 +72,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/components": "^7.66.0",
-    "@multiplatform.one/desktop": "^7.66.0",
-    "@multiplatform.one/forms": "^7.66.0",
-    "@multiplatform.one/frappe": "^7.66.0",
-    "@multiplatform.one/i18n": "^7.66.0",
-    "@multiplatform.one/markdown": "^7.66.0",
-    "@multiplatform.one/platform": "^7.66.0",
-    "@multiplatform.one/rich-text": "^7.66.0",
-    "@multiplatform.one/router": "^7.66.0",
-    "@multiplatform.one/store": "^7.66.0",
-    "@multiplatform.one/table": "^7.66.0",
-    "@multiplatform.one/theme": "^7.66.0",
+    "@multiplatform.one/components": "^7.68.0",
+    "@multiplatform.one/desktop": "^7.68.0",
+    "@multiplatform.one/forms": "^7.68.0",
+    "@multiplatform.one/frappe": "^7.68.0",
+    "@multiplatform.one/i18n": "^7.68.0",
+    "@multiplatform.one/markdown": "^7.68.0",
+    "@multiplatform.one/platform": "^7.68.0",
+    "@multiplatform.one/rich-text": "^7.68.0",
+    "@multiplatform.one/router": "^7.68.0",
+    "@multiplatform.one/store": "^7.68.0",
+    "@multiplatform.one/table": "^7.68.0",
+    "@multiplatform.one/theme": "^7.68.0",
     "@phosphor-icons/react": "^2.1.10",
     "@tamagui/colors": "2.7.6",
     "@tanstack/db": "0.8.0",
@@ -100,9 +100,9 @@
     "tamagui": "2.7.6"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.66.0",
-    "@multiplatform.one/storybook": "7.66.0",
-    "@multiplatform.one/test-utils": "7.66.0",
+    "@multiplatform.one/config": "7.68.0",
+    "@multiplatform.one/storybook": "7.68.0",
+    "@multiplatform.one/test-utils": "7.68.0",
     "@tamagui/build": "2.7.6",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",

package/src/FileBrowser/index.tsx

@@ -8,6 +8,8 @@ import {
   ViewSwitcher,
   type TreeNode,
   Text,
+  ActionButton,
+  IconButton,
 } from "@multiplatform.one/components";
 import { Button, Checkbox, FileUpload, Input } from "@multiplatform.one/forms";
 import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
@@ -197,19 +199,11 @@ function BulkBar({
       marginBottom={placement === "bottom" ? "$3" : 0}
     >
       <Text fontSize="$3">{t("{{count}} selected", { count })}</Text>
-      <Button size="$4" chromeless icon={DownloadSimpleIcon} onPress={onDownload}>
-        {t("Download")}
-      </Button>
-      <Button size="$4" chromeless icon={UploadSimpleIcon} onPress={onMove}>
-        {t("Move")}
-      </Button>
-      <Button size="$4" chromeless icon={TrashIcon} onPress={onDelete}>
-        {t("Delete")}
-      </Button>
+      <IconButton icon={DownloadSimpleIcon} aria-label={t("Download")} onPress={onDownload} />
+      <IconButton icon={UploadSimpleIcon} aria-label={t("Move")} onPress={onMove} />
+      <ActionButton kind="delete" onPress={onDelete} />
       <XStack flex={1} />
-      <Button size="$4" chromeless icon={XIcon} onPress={onClear}>
-        {t("Clear")}
-      </Button>
+      <IconButton icon={XIcon} aria-label={t("Clear")} onPress={onClear} />
     </XStack>
   );
 }
@@ -471,9 +465,11 @@ export function FileBrowser({
         />
       </YStack>
       {onUpload ? (
-        <Button size="$4" icon={UploadSimpleIcon} onPress={() => setUploadOpen(true)}>
-          {t("Upload")}
-        </Button>
+        <IconButton
+          icon={UploadSimpleIcon}
+          aria-label={t("Upload")}
+          onPress={() => setUploadOpen(true)}
+        />
       ) : null}
     </XStack>
   );

package/src/FormSidebar.stories.tsx

@@ -152,7 +152,7 @@ export const BrokenImage = () => (
   />
 );
 
-/** No image set + onImageAdd: renders the dashed "Add image" placeholder button. */
+/** No image set + onImageAdd: renders the bare "Add image" icon button. */
 export const ImagePlaceholder = () => (
   <FormSidebar
     onImageAdd={action("onImageAdd")}

package/src/FormSidebar.tsx

@@ -17,23 +17,20 @@
  * DeskParity story.
  */
 
-import { Avatar, componentColors, getInitials } from "@multiplatform.one/components";
+import {
+  ActionButton,
+  Avatar,
+  Image,
+  Sidebar,
+  Text,
+  type SidebarSection as MpoSidebarSection,
+} from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { ImageSquareIcon, PlusIcon, UploadIcon, UserIcon, XIcon } from "@phosphor-icons/react";
+import { ImageSquareIcon, PlusIcon, UserIcon, XIcon } from "@phosphor-icons/react";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import {
-  Image,
-  ListItem,
-  Separator,
-  Text,
-  XStack,
-  YStack,
-  isWeb,
-  useTheme,
-  type YStackProps,
-} from "tamagui";
+import { XStack, YStack, useTheme } from "tamagui";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -73,7 +70,7 @@ export interface SidebarMetadataEntry {
   icon?: React.ReactNode;
 }
 
-export interface FormSidebarProps extends Omit<YStackProps, "children"> {
+export interface FormSidebarProps {
   /** Optional image URL to display at the top */
   imageUrl?: string;
   /** Accessible label for the image block (defaults to "Document image") */
@@ -87,30 +84,23 @@ export interface FormSidebarProps extends Omit<YStackProps, "children"> {
   sections?: SidebarSection[];
   /** Metadata lines shown at the bottom (e.g. created by / modified by) */
   metadata?: SidebarMetadataEntry[];
-}
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-// Initials come from the catalog Avatar helper (census #21) — the local copy
-// this file carried could drift from the one Timeline/Avatar consume.
-
-// R12 tint family (decorative, not semantic): orange / blue / purple / pink.
-const avatarColors = ["$orange4", "$blue4", "$purple4", "$pink4"];
-function avatarColor(index: number): string {
-  return avatarColors[index % avatarColors.length];
-}
-
-const textColors = ["$orange11", "$blue11", "$purple11", "$pink11"];
-function textColor(index: number): string {
-  return textColors[index % textColors.length];
+  /** Rail width (default 280); `"100%"` fills a supporting pane. */
+  width?: number | string;
+  /** The end-edge hairline (default on); off inside a pane whose seam divides it. */
+  divider?: boolean;
+  "data-testid"?: string;
 }
 
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
 
+/**
+ * The document rail on the MPO `Sidebar` in its complementary role (LC-175):
+ * the image block, the people sections, custom sections and the Info
+ * metadata are Sidebar sections, so the rail takes MPO's surface, caption,
+ * row and divider look.
+ */
 export function FormSidebar({
   imageUrl,
   imageLabel,
@@ -118,7 +108,9 @@ export function FormSidebar({
   onImageRemove,
   sections = [],
   metadata = [],
-  ...stackProps
+  width = 280,
+  divider = true,
+  "data-testid": testID,
 }: FormSidebarProps) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
@@ -133,237 +125,140 @@ export function FormSidebar({
   const [erroredUrl, setErroredUrl] = React.useState<string | undefined>();
   const imageBroken = Boolean(imageUrl) && erroredUrl === imageUrl;
 
-  // Scale typography, avatars, icons and the image block with the size token
   const sz = knobProps.sizeToken;
-  const avatarSize = sz === "$3" ? "$1" : sz === "$5" ? "$3" : "$2";
   const imageSize = sz === "$3" ? 160 : sz === "$5" ? 240 : 200;
 
   const resolvedImageLabel = imageLabel ?? t("Document image");
-  const showImageBlock = Boolean(imageUrl) || Boolean(onImageAdd);
 
-  return (
-    <YStack
-      // Radius-only fragment: the full borderRadius fragment carries
-      // borderWidth and drew an unintended box border around the whole rail
-      // (rtl-audit U6); the panel border is the logical end rail below.
-      {...knobProps.containerRadius}
-      {...knobProps.panelPadding}
-      {...knobProps.gapLg}
-      width={280}
-      // Logical end edge so the rail mirrors in RTL; tamagui borderEndWidth
-      // does not compile to working CSS on web (SB-M-1215)
-      {...(isWeb
-        ? {
-            borderInlineEndWidth: 1,
-            borderInlineEndStyle: "solid" as any,
-            borderInlineEndColor: "$borderColor",
-          }
-        : { borderEndWidth: 1, borderEndColor: "$borderColor" })}
-      {...stackProps}
-    >
-      {/* -- Image section -- */}
-      {showImageBlock && (
-        <>
-          <YStack alignItems="center" gap="$2">
-            {imageUrl && !imageBroken ? (
-              <Image
-                {...knobProps.containerRadius}
-                // src (string), not source: the RN source object leaks onto
-                // the DOM <img> as source="[object Object]" on web
-                src={imageUrl}
-                alt={resolvedImageLabel}
-                width={imageSize}
-                height={imageSize}
-                objectFit="contain"
-                onError={() => setErroredUrl(imageUrl)}
-              />
-            ) : imageUrl && imageBroken ? (
-              <YStack
-                {...knobProps.containerRadius}
-                width={imageSize}
-                height={imageSize}
-                alignItems="center"
-                justifyContent="center"
-                gap="$2"
-                borderWidth={1}
-                borderStyle="dashed"
-                borderColor="$borderColor"
-                aria-label={resolvedImageLabel}
-              >
-                <ImageSquareIcon size={iconSize * 2} color={placeholderIconColor} />
-                <Text color={knobProps.textAccentColor} {...knobProps.label}>
-                  {t("Image failed to load")}
-                </Text>
-              </YStack>
-            ) : (
-              <YStack
-                role="button"
-                tabIndex={0}
+  // LC-260 ICONS-OVER-WORDS: Replace and Remove are their symbols, floating
+  // over the image on the LC-176 media plate.
+  const imageActions =
+    imageUrl && (onImageAdd || onImageRemove)
+      ? (overMedia: boolean) => (
+          <>
+            {onImageAdd ? (
+              <ActionButton
+                kind="replace"
+                label={t("Replace image")}
+                overMedia={overMedia}
                 onPress={onImageAdd}
-                aria-label={t("Add image")}
-                width={imageSize}
-                height={imageSize}
-                alignItems="center"
-                justifyContent="center"
-                cursor="pointer"
+              />
+            ) : null}
+            {onImageRemove ? (
+              <ActionButton
+                kind="remove"
+                label={t("Remove image")}
+                overMedia={overMedia}
+                onPress={onImageRemove}
+              />
+            ) : null}
+          </>
+        )
+      : undefined;
+
+  const imageBlock =
+    imageUrl || onImageAdd ? (
+      <YStack alignItems="center" gap="$2">
+        {imageUrl ? (
+          <YStack position="relative">
+            <Image
+              {...knobProps.containerRadius}
+              src={imageBroken ? undefined : imageUrl}
+              alt={resolvedImageLabel}
+              width={imageSize}
+              height={imageSize}
+              objectFit="contain"
+              onError={() => setErroredUrl(imageUrl)}
+            />
+            {imageActions && !imageBroken ? (
+              <XStack
+                data-form-sidebar="image-actions"
+                position="absolute"
+                top="$2"
+                right="$2"
+                zIndex={1}
                 gap="$2"
-                {...knobProps.containerRadius}
-                borderWidth={1}
-                borderStyle="dashed"
-                borderColor="$borderColor"
               >
-                <ImageSquareIcon size={iconSize * 2} color={placeholderIconColor} />
-                <Text color={knobProps.textAccentColor} {...knobProps.label}>
-                  {t("Add image")}
-                </Text>
-              </YStack>
-            )}
+                {imageActions(true)}
+              </XStack>
+            ) : null}
+          </YStack>
+        ) : (
+          <Button
+            chromeless
+            icon={ImageSquareIcon}
+            aria-label={t("Add image")}
+            onPress={onImageAdd}
+          />
+        )}
+        {imageBroken ? (
+          <Text color={knobProps.textAccentColor} {...knobProps.label}>
+            {t("Image failed to load")}
+          </Text>
+        ) : null}
+        {imageBroken && imageActions ? <XStack gap="$2">{imageActions(false)}</XStack> : null}
+      </YStack>
+    ) : null;
 
-            {imageUrl && (onImageAdd || onImageRemove) && (
-              <XStack gap="$2">
-                {onImageAdd && (
-                  <Button
-                    size="$2"
-                    chromeless
-                    icon={UploadIcon}
-                    aria-label={t("Replace image")}
-                    onPress={onImageAdd}
-                  >
-                    {t("Replace")}
-                  </Button>
-                )}
-                {onImageRemove && (
+  const railSections: MpoSidebarSection[] = [
+    ...(imageBlock ? [{ items: [], content: imageBlock }] : []),
+    ...sections.map(
+      (section): MpoSidebarSection => ({
+        title: section.title,
+        icon: section.icon,
+        action: section.onAdd ? (
+          <Button
+            size="$2"
+            chromeless
+            icon={PlusIcon}
+            aria-label={t("Add {{section}}", { section: section.title })}
+            onPress={section.onAdd}
+          />
+        ) : undefined,
+        ...(section.render
+          ? { items: [], content: section.render() }
+          : {
+              items: (section.items ?? []).map((item) => ({
+                label: item.label,
+                value: item.id,
+                subTitle: item.sublabel,
+                icon: <Avatar name={item.label} nested />,
+                trailing: section.onRemoveItem ? (
                   <Button
                     size="$2"
                     chromeless
                     icon={XIcon}
-                    aria-label={t("Remove image")}
-                    onPress={onImageRemove}
-                  >
-                    {t("Remove")}
-                  </Button>
-                )}
-              </XStack>
-            )}
-          </YStack>
-          <Separator />
-        </>
-      )}
-
-      {/* -- Dynamic sections -- */}
-      {sections.map((section, sectionIdx) => (
-        <React.Fragment key={section.key}>
-          <YStack {...knobProps.gap}>
-            <XStack alignItems="center" justifyContent="space-between">
-              <XStack alignItems="center" gap="$2">
-                {section.icon}
-                <Text color={knobProps.textAccentColor} {...knobProps.label} fontWeight="400">
-                  {section.title}
-                </Text>
-              </XStack>
-              {section.onAdd && (
-                <Button
-                  size="$2"
-                  circular
-                  chromeless
-                  icon={PlusIcon}
-                  aria-label={t("Add {{section}}", {
-                    section: section.title,
-                  })}
-                  onPress={section.onAdd}
-                />
-              )}
-            </XStack>
-
-            {section.render ? (
-              section.render()
-            ) : section.items && section.items.length > 0 ? (
-              <YStack {...knobProps.gap}>
-                {section.items.map((item) => (
-                  <XStack key={item.id} gap="$2" alignItems="center">
-                    <Avatar circular size={avatarSize} backgroundColor={avatarColor(sectionIdx)}>
-                      <Avatar.Fallback backgroundColor={avatarColor(sectionIdx)}>
-                        <Text color={textColor(sectionIdx)} {...knobProps.label} fontWeight="700">
-                          {getInitials(item.label)}
-                        </Text>
-                      </Avatar.Fallback>
-                    </Avatar>
-                    <YStack flex={1}>
-                      <Text
-                        color={componentColors.text.primary}
-                        numberOfLines={1}
-                        {...knobProps.label}
-                      >
-                        {item.label}
-                      </Text>
-                      {item.sublabel && (
-                        <Text color={knobProps.textAccentColor} {...knobProps.label}>
-                          {item.sublabel}
-                        </Text>
-                      )}
-                    </YStack>
-                    {section.onRemoveItem && (
-                      <Button
-                        size="$2"
-                        circular
-                        chromeless
-                        icon={XIcon}
-                        aria-label={t("Remove {{name}}", { name: item.label })}
-                        onPress={() => section.onRemoveItem?.(item)}
-                      />
-                    )}
-                  </XStack>
-                ))}
-              </YStack>
-            ) : (
-              <Text color={knobProps.textAccentColor} {...knobProps.label}>
-                {section.emptyText ?? t("None")}
-              </Text>
-            )}
-          </YStack>
-
-          {sectionIdx < sections.length - 1 && <Separator />}
-        </React.Fragment>
-      ))}
-
-      {/* -- Separator before metadata -- */}
-      {metadata.length > 0 && sections.length > 0 && <Separator />}
-
-      {/* -- Info / Metadata -- */}
-      {metadata.length > 0 && (
-        <YStack gap="$1">
-          <Text
-            color={knobProps.textAccentColor}
-            paddingHorizontal="$2"
-            {...knobProps.label}
-            fontWeight="400"
-          >
-            {t("Info")}
-          </Text>
-          {metadata.map((entry) => (
-            <ListItem
-              key={entry.label}
-              size={knobProps.sizeToken}
-              icon={
-                (entry.icon ?? (
-                  <UserIcon
-                    size={iconSize}
-                    color={placeholderIconColor}
-                    style={{ flexShrink: 0 }}
+                    aria-label={t("Remove {{name}}", { name: item.label })}
+                    onPress={() => section.onRemoveItem?.(item)}
                   />
-                )) as any
-              }
-              title={
-                <Text color={knobProps.textAccentColor} {...knobProps.label}>
-                  {entry.label}
-                </Text>
-              }
-              backgroundColor="transparent"
-              paddingVertical="$1"
-            />
-          ))}
-        </YStack>
-      )}
-    </YStack>
+                ) : undefined,
+              })),
+              emptyText: section.emptyText ?? t("None"),
+            }),
+      }),
+    ),
+    ...(metadata.length > 0
+      ? [
+          {
+            title: t("Info"),
+            items: metadata.map((entry) => ({
+              label: entry.label,
+              value: entry.label,
+              icon: entry.icon ?? <UserIcon size={iconSize} color={placeholderIconColor} />,
+            })),
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <Sidebar
+      role="complementary"
+      aria-label={t("Document details")}
+      width={width}
+      divider={divider}
+      sections={railSections}
+      testID={testID}
+    />
   );
 }

package/src/FrappeAssignment.tsx

@@ -196,7 +196,6 @@ function AssignmentRow({
           {onComplete ? (
             <Button
               size="$2"
-              circular
               chromeless
               disabled={disabled}
               aria-label={t("Mark assignment complete")}
@@ -207,7 +206,6 @@ function AssignmentRow({
           {onRemove ? (
             <Button
               size="$2"
-              circular
               chromeless
               disabled={disabled}
               aria-label={t("Remove assignment")}
@@ -386,7 +384,6 @@ function FrappeAssignmentBody({
         {canMutate ? (
           <Button
             size="$2"
-            circular
             chromeless
             aria-label={t("Add assignment")}
             onPress={() => setAddOpen((prev) => !prev)}

package/src/FrappeConnectionIndicator.tsx

@@ -3,11 +3,10 @@ import {
   type FrappeConnectionState,
   type UseFrappeCollectionConfig,
 } from "@multiplatform.one/frappe";
-import { radiusClassProps, useResolvedKnobs } from "@multiplatform.one/theme";
+import { StatusDot } from "@multiplatform.one/components";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { XStack, YStack } from "tamagui";
-import { Text } from "@multiplatform.one/components";
+import { XStack } from "tamagui";
 
 export interface FrappeConnectionIndicatorProps {
   /** The same connection config the sibling collection hooks use. */
@@ -21,7 +20,8 @@ export interface FrappeConnectionIndicatorProps {
 }
 
 /**
- * Compact "Reconnecting" status pill for live Frappe views.
+ * Compact "Reconnecting" status for live Frappe views: the MPO `StatusDot`
+ * in the warning tone (LC-169, LC-175).
  *
  * Shows only while the realtime socket is down after having been up
  * (`everConnected && !connected`) — during that window updates arrive via
@@ -31,34 +31,12 @@ export interface FrappeConnectionIndicatorProps {
  */
 export function FrappeConnectionIndicator({ config, connection }: FrappeConnectionIndicatorProps) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs();
   const hooked = useFrappeConnection(config);
   const { connected, everConnected } = connection ?? hooked;
   if (connected || !everConnected) return null;
   return (
-    <XStack
-      role="status"
-      aria-live="polite"
-      alignSelf="flex-start"
-      alignItems="center"
-      gap="$2"
-      paddingHorizontal="$3"
-      paddingVertical="$1.5"
-      {...knobProps.borderRadius}
-      backgroundColor="$yellow3"
-      borderColor="$yellow7"
-      borderWidth={1}
-    >
-      <YStack
-        {...radiusClassProps("R-PILL", "connection status dot")}
-        width={8}
-        height={8}
-        borderRadius={4}
-        backgroundColor="$yellow10"
-      />
-      <Text fontSize="$2" color="$yellow11">
-        {t("Reconnecting…")}
-      </Text>
+    <XStack role="status" aria-live="polite" alignSelf="flex-start">
+      <StatusDot tone="warning">{t("Reconnecting…")}</StatusDot>
     </XStack>
   );
 }

package/src/FrappeDashboard.spec.tsx

@@ -78,10 +78,14 @@ describe("FrappeDashboard refresh press floor (LC-54 amendment)", () => {
     expect(refresh.className).not.toMatch(negativeMarginAtom);
     const token = refresh.getAttribute("data-size-token") as SizeTokens;
     const px = Number(getVariableValue(getSize(token)));
-    expect(refresh.className).toContain(`_mih-${px}px`);
-    expect(refresh.className).toContain(`_miw-${px}px`);
+    // LC-176: the bare glyph sits in a square box at its control height, inside
+    // the token box, and slop restores the 44pt press floor.
+    const box = Number(/(?:^| )_mih-(\d+)px/.exec(refresh.className)?.[1]);
+    expect(refresh.className).toContain(`_miw-${box}px`);
+    expect(box).toBeGreaterThan(0);
+    expect(box).toBeLessThanOrEqual(px);
     const slop = Number(refresh.getAttribute("data-mp-press-slop") ?? 0);
-    expect(px + slop * 2).toBeGreaterThanOrEqual(44);
+    expect(box + slop * 2).toBeGreaterThanOrEqual(44);
   });
 
   it("hover feedback rides the button's own in-slot box (house channel)", () => {