@multiplatform.one/frappe-ui 7.45.1 → 7.47.0

package/src/FrappeFormActions.tsx

@@ -1,4 +1,10 @@
-import { Chip, type ChipColor } from "@multiplatform.one/components";
+import {
+  Chip,
+  DropdownMenu,
+  PageMenuButton,
+  type ChipColor,
+  type DropdownMenuEntry,
+} from "@multiplatform.one/components";
 import { Button, zIndex } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import {
@@ -235,6 +241,159 @@ export function FrappeFormActions({
   );
 }
 
+/**
+ * The record's actions in the page's top bar (LC-123, LC-145): the one
+ * lifecycle action the document's state offers as the bar's button, and
+ * everything else (Delete, Cancel Document, the leave action) in the "…"
+ * menu at the trailing edge, so back, the action and "…" share one row.
+ */
+export function FrappeFormHeaderActions({
+  action,
+  busy,
+  disabled,
+  onSave,
+  onSubmit,
+  onCancelDocument,
+  onAmend,
+  amendedAs,
+  onDelete,
+  onEdit,
+  onClose,
+  closeDisabled,
+}: Omit<FrappeFormActionsProps, "indicator" | "placement">) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+  const iconSize = Number(knobProps.controlIcon?.width) || 16;
+  const readOnlyReason = t("Form is read-only");
+  const blocked = disabled ? { disabledReason: readOnlyReason } : {};
+
+  const primary =
+    action === "save" || action === "update" ? (
+      <Button
+        accent
+        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
+        accent
+        loading={busy}
+        disabled={disabled}
+        disabledReason={disabled ? readOnlyReason : undefined}
+        disabledReasonPlacement="inline"
+        onPress={onSubmit}
+        testID="frappe-form-submit"
+      >
+        {t("Submit")}
+      </Button>
+    ) : action === "amend" && onAmend ? (
+      <Button
+        accent={!amendedAs}
+        outlined={Boolean(amendedAs)}
+        loading={busy}
+        disabled={disabled || Boolean(amendedAs)}
+        disabledReason={
+          amendedAs
+            ? t("Already amended as {{name}}", { name: amendedAs })
+            : disabled
+              ? readOnlyReason
+              : undefined
+        }
+        disabledReasonPlacement="inline"
+        onPress={onAmend}
+        testID="frappe-form-amend"
+      >
+        {t("Amend")}
+      </Button>
+    ) : onEdit ? (
+      <Button
+        accent
+        disabled={disabled}
+        disabledReason={disabled ? readOnlyReason : undefined}
+        disabledReasonPlacement="inline"
+        onPress={onEdit}
+        testID="frappe-form-edit"
+      >
+        {t("Edit")}
+      </Button>
+    ) : null;
+
+  const lifecyclePrimary =
+    action === "save" ||
+    action === "update" ||
+    action === "submit" ||
+    (action === "amend" && Boolean(onAmend));
+  const entries: DropdownMenuEntry[] = [
+    ...(onEdit && lifecyclePrimary
+      ? [
+          {
+            key: "edit",
+            label: t("Edit"),
+            icon: <PencilSimpleIcon size={iconSize} />,
+            disabled,
+            ...blocked,
+            onSelect: onEdit,
+          },
+        ]
+      : []),
+    ...(action === "cancel"
+      ? [
+          {
+            key: "cancel-document",
+            label: t("Cancel Document"),
+            icon: <ProhibitIcon size={iconSize} />,
+            destructive: true,
+            disabled: disabled || busy,
+            ...blocked,
+            onSelect: onCancelDocument,
+          },
+        ]
+      : []),
+    ...(onClose
+      ? [
+          {
+            key: "close",
+            label: action === "cancel" ? t("Close") : t("Cancel"),
+            icon: <XIcon size={iconSize} />,
+            disabled: closeDisabled,
+            ...(closeDisabled ? { disabledReason: readOnlyReason } : {}),
+            onSelect: onClose,
+          },
+        ]
+      : []),
+    ...(onDelete
+      ? [
+          {
+            key: "delete",
+            label: t("Delete"),
+            icon: <TrashIcon size={iconSize} />,
+            destructive: true,
+            disabled: disabled || busy,
+            ...blocked,
+            onSelect: onDelete,
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <XStack {...knobProps.gap} alignItems="center" testID="frappe-form-actions">
+      {primary}
+      {entries.length > 0 ? (
+        <DropdownMenu items={entries} placement="bottom-end">
+          <PageMenuButton edge="end" testID="frappe-form-menu" />
+        </DropdownMenu>
+      ) : null}
+    </XStack>
+  );
+}
+
 /**
  * Holds the action bar. Sticky, it pins to the bottom of the scrolling page
  * on a page surface with a top hairline, so Save stays in reach on a long

package/src/FrappeInsights.spec.tsx

@@ -66,7 +66,7 @@ const insights: FrappeInsightsProps<RosterPokemon> = {
     orderBy: "slot",
     label: "Type",
     options: ["grass", "poison", "fire", "water", "electric", "ghost", "normal"],
-    tint: (type) => (type === "fire" ? "tomato" : undefined),
+    tint: (type) => (type === "fire" ? "orange" : undefined),
   },
   facetPlural: "Types",
   metrics: [

package/src/FrappeInsights.tsx

@@ -176,7 +176,10 @@ export function FrappeInsights<TDoc extends { name: string; doctype: string }>({
       code: (doc) => latest.current.look?.code?.(doc) || undefined,
       images: (doc) => latest.current.look?.images?.(doc, baseURL) ?? [],
       values: (doc) => values.get(doc.name) ?? [],
-      tints: (doc) => (values.get(doc.name) ?? []).map((value) => facet?.tint?.(value)),
+      tint: (doc) => {
+        const primary = values.get(doc.name)?.[0];
+        return primary === undefined ? undefined : facet?.tint?.(primary);
+      },
       valueLabel: (value) => facet?.optionLabel?.(value) ?? value,
       valueTint: (value) => facet?.tint?.(value),
       open: (doc) =>

package/src/FrappeKanban.stories.tsx

@@ -1,9 +1,10 @@
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { action } from "@multiplatform.one/storybook";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { FrappeKanban, type KanbanColumn } from "./FrappeKanban";
 import { FrappeProvider } from "./FrappeProvider";
 import { FrappeStoryProvider } from "./frappeStoryTarget";
+import { Text } from "@multiplatform.one/components";
 
 // hex-escape: Frappe sends column, event and series colours as hex: fixture data, not paint
 

package/src/FrappeKanban.tsx

@@ -3,12 +3,13 @@ import {
   componentColors,
   type KanbanColumn as GenericKanbanColumn,
   type KanbanProps,
+  Text,
 } from "@multiplatform.one/components";
 import { Button, formCommonColors } from "@multiplatform.one/forms";
 import { PlusIcon } from "@phosphor-icons/react";
 import React, { useMemo, useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Text, XStack, YStack } from "tamagui";
+import { Text as TamaguiText, XStack, YStack } from "tamagui";
 
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { FrappeConnectionIndicator } from "./FrappeConnectionIndicator";
@@ -204,13 +205,13 @@ export function FrappeKanban<TDoc extends { name: string; doctype: string }>({
         : undefined;
       return (
         <YStack {...knobProps.panelPadding} {...knobProps.gap}>
-          <Text {...knobProps.label} {...knobProps.textWeight}>
+          <TamaguiText {...knobProps.label} {...knobProps.textWeight}>
             {(title as React.ReactNode) || item.name}
-          </Text>
+          </TamaguiText>
           {desc != null && desc !== "" && (
-            <Text color={formCommonColors.muted} {...knobProps.body}>
+            <TamaguiText color={formCommonColors.muted} {...knobProps.body}>
               {String(desc)}
-            </Text>
+            </TamaguiText>
           )}
         </YStack>
       );
@@ -316,9 +317,9 @@ export function FrappeKanban<TDoc extends { name: string; doctype: string }>({
           borderWidth={1}
         >
           <Text color={formCommonColors.error}>{t("Action failed")}</Text>
-          <Text color={formCommonColors.muted} {...knobProps.body}>
+          <TamaguiText color={formCommonColors.muted} {...knobProps.body}>
             {actionError.message}
-          </Text>
+          </TamaguiText>
         </YStack>
       )}
       <Kanban

package/src/FrappeList.stories.tsx

@@ -1,9 +1,10 @@
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { action } from "@multiplatform.one/storybook";
-import { Text, XStack, YStack } from "tamagui";
+import { XStack, YStack } from "tamagui";
 import { FrappeList } from "./FrappeList";
 import { FrappeProvider } from "./FrappeProvider";
 import { FrappeStoryProvider } from "./frappeStoryTarget";
+import { Text } from "@multiplatform.one/components";
 
 export default {
   title: "FrappeUI/FrappeList",
@@ -124,13 +125,13 @@ export const Default = () => (
       renderItem={(doc) => (
         <YStack gap="$0.5" paddingVertical="$2" paddingHorizontal="$3">
           <XStack gap="$2" alignItems="center">
-            <Text fontSize="$2" color="$color10" minWidth={80}>
+            <Text fontSize="$2" color="$color10" minWidth="$8">
               Task:
             </Text>
             <Text fontSize="$3">{doc.description || "-"}</Text>
           </XStack>
           <XStack gap="$2" alignItems="center">
-            <Text fontSize="$2" color="$color10" minWidth={80}>
+            <Text fontSize="$2" color="$color10" minWidth="$8">
               Status:
             </Text>
             <Text fontSize="$3">{doc.status || "-"}</Text>
@@ -160,13 +161,13 @@ export const WithCustomFieldRenderer = () => (
       renderItem={(doc) => (
         <YStack gap="$0.5" paddingVertical="$2" paddingHorizontal="$3">
           <XStack gap="$2" alignItems="center">
-            <Text fontSize="$2" color="$color10" minWidth={80}>
+            <Text fontSize="$2" color="$color10" minWidth="$8">
               Task:
             </Text>
             <Text fontSize="$3">{doc.description || "-"}</Text>
           </XStack>
           <XStack gap="$2" alignItems="center">
-            <Text fontSize="$2" color="$color10" minWidth={80}>
+            <Text fontSize="$2" color="$color10" minWidth="$8">
               Status:
             </Text>
             <Text
@@ -186,7 +187,7 @@ export const WithCustomFieldRenderer = () => (
             </Text>
           </XStack>
           <XStack gap="$2" alignItems="center">
-            <Text fontSize="$2" color="$color10" minWidth={80}>
+            <Text fontSize="$2" color="$color10" minWidth="$8">
               Priority:
             </Text>
             <Text fontSize="$3">{doc.priority || "-"}</Text>
@@ -324,25 +325,25 @@ export const VirtualScrolling = () => (
       renderItem={(doc) => (
         <YStack gap="$0.5" paddingVertical="$2" paddingHorizontal="$3">
           <XStack gap="$2" alignItems="center">
-            <Text fontSize="$2" color="$color10" minWidth={80}>
+            <Text fontSize="$2" color="$color10" minWidth="$8">
               ID:
             </Text>
             <Text fontSize="$3">{doc.name || "-"}</Text>
           </XStack>
           <XStack gap="$2" alignItems="center">
-            <Text fontSize="$2" color="$color10" minWidth={80}>
+            <Text fontSize="$2" color="$color10" minWidth="$8">
               Task:
             </Text>
             <Text fontSize="$3">{doc.description || "-"}</Text>
           </XStack>
           <XStack gap="$2" alignItems="center">
-            <Text fontSize="$2" color="$color10" minWidth={80}>
+            <Text fontSize="$2" color="$color10" minWidth="$8">
               Status:
             </Text>
             <Text fontSize="$3">{doc.status || "-"}</Text>
           </XStack>
           <XStack gap="$2" alignItems="center">
-            <Text fontSize="$2" color="$color10" minWidth={80}>
+            <Text fontSize="$2" color="$color10" minWidth="$8">
               Priority:
             </Text>
             <Text fontSize="$3">{doc.priority || "-"}</Text>

package/src/FrappeListView.card.spec.tsx

@@ -84,7 +84,7 @@ function renderList(navigate = vi.fn()) {
             label: "Type",
             options: ["grass", "poison", "fire", "water", "electric", "ghost", "normal"],
             optionLabel: (value) => `type:${value}`,
-            tint: (value) => (value === "grass" ? "grass" : "purple"),
+            tint: (value) => (value === "grass" ? "green" : "purple"),
           },
         ]}
       />

package/src/FrappeListView.sidebar.spec.tsx

@@ -95,7 +95,7 @@ function renderList(navigate = vi.fn()) {
             orderBy: "slot",
             label: "Type",
             options: ["grass", "poison", "fire", "water", "electric", "ghost", "normal"],
-            tint: (value) => (value === "grass" ? "grass" : "purple"),
+            tint: (value) => (value === "grass" ? "green" : "purple"),
           },
         ]}
         bands={[

package/src/FrappeListView.tsx

@@ -820,7 +820,7 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
         subtitle={look?.subtitle?.(doc)}
         code={look?.code?.(doc)}
         images={look?.images?.(doc, finalBaseURL) ?? []}
-        tints={values.slice(0, 2).map((value) => tintFacet?.tint?.(value))}
+        tint={values[0] === undefined ? undefined : tintFacet?.tint?.(values[0])}
         badges={values.map((value) => ({
           value,
           label: tintFacet?.optionLabel?.(value) ?? value,

package/src/FrappeProvider.stories.tsx

@@ -1,6 +1,7 @@
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { FrappeProvider, useFrappeConfig } from "./FrappeProvider";
+import { Text } from "@multiplatform.one/components";
 
 export default {
   title: "FrappeUI/FrappeProvider",

package/src/FrappeReconnectIndicator.stories.tsx

@@ -1,8 +1,9 @@
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import {
   FrappeReconnectIndicator,
   type FrappeReconnectIndicatorProps,
 } from "./FrappeReconnectIndicator";
+import { Text } from "@multiplatform.one/components";
 
 export default {
   title: "FrappeUI/FrappeReconnectIndicator",

package/src/FrappeReconnectIndicator.tsx

@@ -6,7 +6,8 @@ import {
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { WifiSlashIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
-import { Text, XStack } from "tamagui";
+import { XStack } from "tamagui";
+import { Text } from "@multiplatform.one/components";
 
 export interface FrappeReconnectIndicatorProps {
   /** The connection config the component's live queries sync through. */

package/src/SyncErrorNotice.tsx

@@ -1,8 +1,8 @@
-import { Button } from "@multiplatform.one/components";
+import { Button, Text } from "@multiplatform.one/components";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Text, XStack } from "tamagui";
+import { XStack } from "tamagui";
 
 export interface SyncErrorNoticeProps {
   /** Human-readable failure message (already localized by the caller). */

package/src/desk/DeskFormPage.tsx

@@ -1,12 +1,12 @@
 /**
  * DeskFormPage - Page component for Frappe Desk form views.
  *
- * Composes the canonical `DetailPageLayout` page template (LC-29
- * PAGE-TEMPLATE) inside DeskShell: back toolbar, PageHeader (the page's
- * single h1, DG-A11Y-02), the schema-driven FrappeForm as the primary
- * content, and the live document sidebar in the template's `aside` slot —
- * side-by-side (⅔ / ⅓) from `expanded` up, stacked below the form on
- * compact/medium, never hidden.
+ * Renders FrappeForm in its page mode inside DeskShell: the canonical
+ * `DetailPageLayout` template (LC-29 PAGE-TEMPLATE) with back, the record's
+ * actions and "…" in one top bar (LC-145), the page's single h1
+ * (DG-A11Y-02), the schema-driven form as the primary content, and the live
+ * document sidebar in the template's `aside` slot — side-by-side (⅔ / ⅓)
+ * from `expanded` up, stacked below the form on compact/medium, never hidden.
  *
  * Supports both create mode (no name / name === "new") and edit mode.
  * Accepts `doctype` and `name` as props (route files read params and pass them).
@@ -18,15 +18,14 @@
 
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, formCommonColors } from "@multiplatform.one/forms";
+import { formCommonColors } from "@multiplatform.one/forms";
 import { Text, YStack } from "tamagui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { ArrowLeftIcon } from "@phosphor-icons/react";
 import { DeskShell } from "./DeskShell";
 import { DeskFormSidebar } from "./DeskFormSidebar";
 import { FrappeForm } from "../FrappeForm";
 import { addToRecent } from "./DeskSidebar";
-import { DetailPageLayout, PageHeader, type BreadcrumbItem } from "@multiplatform.one/components";
+import type { BreadcrumbItem } from "@multiplatform.one/components";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -106,59 +105,40 @@ export function DeskFormPage({ doctype, name, onNavigate }: DeskFormPageProps) {
       onNavigate={handleNavigate}
       activePath={`/desk/${doctype}/${encodeURIComponent(name || "new")}`}
     >
-      {/* LC-29 PAGE-TEMPLATE: the canonical detail-page scaffold owns scroll,
-          max-width, toolbar/header regions, and the supporting-pane aside.
-          flexBasis auto reaches Screen's content stack (ScreenProps rest):
-          with react-native-web's min-height:0 reset, the default 0% basis
-          would cap the scroll page at viewport height and crush the form. */}
-      <DetailPageLayout
-        flexBasis="auto"
-        toolbarLeading={
-          <Button
-            size="$3"
-            chromeless
-            icon={ArrowLeftIcon}
-            onPress={() => handleNavigate(`/desk/${doctype}`)}
-            aria-label={t("Back to {{doctype}} list", { doctype: displayName })}
-            data-testid="desk-form-back"
-          >
-            {displayName}
-          </Button>
-        }
-        header={
-          // DG-A11Y-02: the document name (or "New <DocType>") is the page's
-          // single h1; schema-form section headings step to h2 below it.
-          // Same t("New") key as the breadcrumb leaf above.
-          <PageHeader
-            title={isCreate ? `${t("New")} ${displayName}` : (name ?? displayName)}
-            divider={false}
-          />
-        }
-        // Edit mode: the live document sidebar rides the aside slot; the
-        // template stacks it below the form on compact/medium (LC-29 — a
-        // hidden aside is a VIOLATION). Create mode has no doc to describe.
-        aside={
-          !isCreate && name ? <DeskFormSidebar doctype={displayName} name={name} /> : undefined
-        }
-      >
-        <FrappeForm
-          doctype={displayName}
-          name={isCreate ? undefined : name}
-          showToolbar
-          // The desk page owns sidebar placement via the template aside above;
-          // FrappeForm's inline rail stays off so the sidebar renders once.
-          showSidebar={false}
-          showTimeline
-          onSave={(doc) => {
-            if (isCreate && doc.name) {
-              handleNavigate(`/desk/${doctype}/${encodeURIComponent(doc.name)}`);
-            }
-          }}
-          onCancel={() => handleNavigate(`/desk/${doctype}`)}
-          onDelete={() => handleNavigate(`/desk/${doctype}`)}
-          onAmend={() => handleNavigate(`/desk/${doctype}/new`)}
-        />
-      </DetailPageLayout>
+      {/* LC-29 PAGE-TEMPLATE through FrappeForm's page mode: back, the
+          record's actions and "…" share the top bar (LC-145), the document
+          name (or "New <DocType>") is the page's single h1 (DG-A11Y-02), and
+          the live document sidebar rides the aside slot, stacked below the
+          form on compact/medium, never hidden. Create mode has no doc to
+          describe. */}
+      <FrappeForm
+        doctype={displayName}
+        name={isCreate ? undefined : name}
+        page={{
+          back: {
+            label: displayName,
+            onPress: () => handleNavigate(`/desk/${doctype}`),
+            "aria-label": t("Back to {{doctype}} list", { doctype: displayName }),
+            testID: "desk-form-back",
+          },
+          title: isCreate ? `${t("New")} ${displayName}` : (name ?? displayName),
+          aside:
+            !isCreate && name ? <DeskFormSidebar doctype={displayName} name={name} /> : undefined,
+        }}
+        showToolbar
+        // The desk page owns sidebar placement via the page aside above;
+        // FrappeForm's inline rail stays off so the sidebar renders once.
+        showSidebar={false}
+        showTimeline
+        onSave={(doc) => {
+          if (isCreate && doc.name) {
+            handleNavigate(`/desk/${doctype}/${encodeURIComponent(doc.name)}`);
+          }
+        }}
+        onCancel={() => handleNavigate(`/desk/${doctype}`)}
+        onDelete={() => handleNavigate(`/desk/${doctype}`)}
+        onAmend={() => handleNavigate(`/desk/${doctype}/new`)}
+      />
     </DeskShell>
   );
 }

package/src/desk/DeskFormSidebar.stories.tsx

@@ -29,13 +29,15 @@ const MOCK_HOST = "https://deskformsidebar.mock.test";
  * real — the story's window.fetch shim only intercepts fetch(), never an
  * image load — and the story prints ERR_TUNNEL_CONNECTION_FAILED. A data: URI
  * goes through resolveFileUrl untouched and paints without a request, which
- * is what G-15 story honesty asks for (MPO-197).
+ * is what G-15 story honesty asks for (MPO-197). The square fills to its
+ * edges: corners baked into the picture would hide the frame's knob radius
+ * behind transparent pixels (FZ-7742).
  */
 const storyImage =
   "data:image/svg+xml;utf8," +
   encodeURIComponent(
     '<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 24 24">' +
-      '<rect width="24" height="24" rx="3" fill="#4c6ef5"/>' +
+      '<rect width="24" height="24" fill="#4c6ef5"/>' +
       '<path d="M6 12.5l3.5 3.5L18 8" fill="none" stroke="#fff" stroke-width="2" ' +
       'stroke-linecap="round" stroke-linejoin="round"/></svg>',
   );

package/src/desk/DeskShell.tsx

@@ -133,7 +133,7 @@ export function DeskShell({
         return;
       }
       if (typeof document === "undefined") return;
-      if (document.activeElement instanceof HTMLElement) {
+      if (typeof HTMLElement !== "undefined" && document.activeElement instanceof HTMLElement) {
         document.activeElement.blur();
       }
     },

package/src/desk/awesomebar.tsx

@@ -345,7 +345,7 @@ export function Awesomebar({ onNavigate, basePath = "/desk", ...stackProps }: Aw
         {...knobProps.control}
         {...knobProps.inputSurface}
         {...knobProps.borderRadius}
-        borderColor={open ? "$borderColorFocus" : "$borderColor"}
+        borderColor={open ? "$borderColorFocus" : knobProps.borderRadius.borderColor}
         hoverStyle={{
           borderColor: "$borderColorHover",
           ...control.hoverKnobProps,

package/src/fields/CodeEditor/index.tsx

@@ -15,7 +15,7 @@
  * order, chromeless inside table cells (useIsInTableCell).
  */
 
-import { HighlightedCode, useShikiTokens } from "@multiplatform.one/components";
+import { HighlightedCode, useShikiTokens, Paragraph } from "@multiplatform.one/components";
 import {
   Field,
   FieldLayout,
@@ -33,7 +33,7 @@ import { sizeRecipeForToken, useResolvedKnobs, sizeTokenStep } from "@multiplatf
 import { useEffect, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import type { FontSizeTokens, LabelProps, SizeTokens } from "tamagui";
-import { Paragraph, YStack } from "tamagui";
+import { Paragraph as TamaguiParagraph, YStack } from "tamagui";
 import { EditorPreviewPanes, PreviewSurface } from "../shared/EditorPreviewPanes";
 
 // ---------------------------------------------------------------------------
@@ -93,9 +93,9 @@ function CodePreview({ value, language }: CodePreviewProps) {
       ) : (
         <HighlightedCode tokens={tokens} showLineNumbers={lineCount > 10}>
           {/* Plain-text fallback while shiki loads (or if unavailable). */}
-          <Paragraph size={textSize} fontFamily="$mono" whiteSpace="pre">
+          <TamaguiParagraph size={textSize} fontFamily="$mono" whiteSpace="pre">
             {value}
-          </Paragraph>
+          </TamaguiParagraph>
         </HighlightedCode>
       )}
     </PreviewSurface>

package/src/fields/Date/index.native.tsx

@@ -25,7 +25,7 @@ import {
 } from "react-native";
 import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
 import { platform } from "@multiplatform.one/platform";
-import { Text, View, XStack, YStack, useProps, useTheme, useThemeName } from "tamagui";
+import { View, XStack, YStack, useProps, useTheme, useThemeName } from "tamagui";
 import { useKeyboardInset } from "../../shared/useKeyboardInset";
 import { Date as CatalogDate } from "./catalog";
 import {
@@ -36,6 +36,7 @@ import {
 import { datePickerHeight, dateSheetBottomPadding, dateSheetMaxHeight } from "./sheetKeyboard";
 import type { DateProps } from "./types";
 import { fromFrappeDateValue, toFrappeDateValue } from "./wire";
+import { Text } from "@multiplatform.one/components";
 
 /**
  * Design-law: trigger and sheet actions are house Button. The OS picker stays