@multiplatform.one/frappe-ui 7.7.6 → 7.10.0

package/src/FormSidebar.tsx

@@ -191,7 +191,7 @@ export function FormSidebar({
                 aria-label={resolvedImageLabel}
               >
                 <ImageSquareIcon size={iconSize * 2} color={placeholderIconColor} />
-                <Text color={componentColors.text.muted} {...knobProps.label}>
+                <Text color={knobProps.textAccentColor} {...knobProps.label}>
                   {t("Image failed to load")}
                 </Text>
               </YStack>
@@ -213,7 +213,7 @@ export function FormSidebar({
                 borderColor="$borderColor"
               >
                 <ImageSquareIcon size={iconSize * 2} color={placeholderIconColor} />
-                <Text color={componentColors.text.muted} {...knobProps.label}>
+                <Text color={knobProps.textAccentColor} {...knobProps.label}>
                   {t("Add image")}
                 </Text>
               </YStack>
@@ -257,7 +257,7 @@ export function FormSidebar({
             <XStack alignItems="center" justifyContent="space-between">
               <XStack alignItems="center" gap="$2">
                 {section.icon}
-                <Text color={componentColors.text.muted} {...knobProps.label} fontWeight="400">
+                <Text color={knobProps.textAccentColor} {...knobProps.label} fontWeight="400">
                   {section.title}
                 </Text>
               </XStack>
@@ -297,7 +297,7 @@ export function FormSidebar({
                         {item.label}
                       </Text>
                       {item.sublabel && (
-                        <Text color={componentColors.text.muted} {...knobProps.label}>
+                        <Text color={knobProps.textAccentColor} {...knobProps.label}>
                           {item.sublabel}
                         </Text>
                       )}
@@ -316,7 +316,7 @@ export function FormSidebar({
                 ))}
               </YStack>
             ) : (
-              <Text color={componentColors.text.muted} {...knobProps.label}>
+              <Text color={knobProps.textAccentColor} {...knobProps.label}>
                 {section.emptyText ?? t("None")}
               </Text>
             )}
@@ -333,7 +333,7 @@ export function FormSidebar({
       {metadata.length > 0 && (
         <YStack gap="$1">
           <Text
-            color={componentColors.text.muted}
+            color={knobProps.textAccentColor}
             paddingHorizontal="$2"
             {...knobProps.label}
             fontWeight="400"
@@ -354,7 +354,7 @@ export function FormSidebar({
                 )) as any
               }
               title={
-                <Text color={componentColors.text.muted} {...knobProps.label}>
+                <Text color={knobProps.textAccentColor} {...knobProps.label}>
                   {entry.label}
                 </Text>
               }

package/src/FrappeCalendar.tsx

@@ -1,4 +1,3 @@
-import { useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
 import {
   Calendar,
   eventChipTextColor,
@@ -18,6 +17,7 @@ import {
 import { FrappeConnectionIndicator } from "./FrappeConnectionIndicator";
 import { useFrappeConfig } from "./FrappeProvider";
 import { describeSyncError } from "./syncError";
+import { useFrappeRows } from "./useFrappeRows";
 import { resolveFrappeEventColor } from "./frappeEventColor";
 
 export type CalendarViewType = "month" | "week" | "day";
@@ -111,9 +111,6 @@ export function FrappeCalendar<TDoc extends { name: string; doctype: string }>({
   const { knobProps } = useResolvedKnobs();
   const { t } = useTranslation();
   const [actionError, setActionError] = useState<Error | null>(null);
-  // Honest error state: the collection swallows failed subscription fetches
-  // (calendar would just look empty) — onSyncError reports them here.
-  const [syncError, setSyncError] = useState<unknown>(null);
   const height =
     heightProp ?? (knobProps.sizeToken === "$3" ? 480 : knobProps.sizeToken === "$5" ? 720 : 600);
 
@@ -121,8 +118,10 @@ export function FrappeCalendar<TDoc extends { name: string; doctype: string }>({
   const finalAuth = auth ?? config?.auth;
   const finalSyncOptions = syncOptions ?? config?.syncOptions;
 
-  if (!finalBaseURL) {
-    throw new Error("FrappeCalendar requires baseURL prop or FrappeProvider with baseURL");
+  if (!finalBaseURL && !config?.fixtures) {
+    throw new Error(
+      "FrappeCalendar requires baseURL prop or FrappeProvider with baseURL or fixtures",
+    );
   }
 
   // Ensure required fields are fetched
@@ -163,25 +162,29 @@ export function FrappeCalendar<TDoc extends { name: string; doctype: string }>({
     ],
   );
 
-  const collection = useFrappeCollection<TDoc>(connectionConfig, doctype, {
+  // The shared doctype read (MPO-251). `mapError` keeps this calendar's own
+  // error copy (describeSyncError); real subscription failures still win over
+  // the generic isError flag inside the hook, because they carry an
+  // actionable message. `limit: null` keeps the bench's own page length.
+  const mapSyncError = useCallback(
+    (err: unknown) => new Error(describeSyncError(err, doctype, t)),
+    [doctype, t],
+  );
+  const {
+    rows: docs,
+    isQueryLoading: isLoading,
+    error: queryError,
+    collection,
+  } = useFrappeRows<TDoc>(connectionConfig, doctype, {
     fields: effectiveFields,
     filters,
-    onSyncError: setSyncError,
+    limit: null,
+    mapError: mapSyncError,
+    messages: {
+      permission: t("You do not have permission to view {{doctype}}", { doctype }),
+      generic: t("Failed to load {{doctype}} events", { doctype }),
+    },
   });
-  const {
-    data: rawData,
-    isLoading,
-    isError,
-  } = useLiveQuery((q) => (collection ? q.from({ _list: collection }) : null), [collection]);
-  const docs = useMemo(() => (rawData as TDoc[] | undefined) ?? [], [rawData]);
-  // Real subscription failures (permission-error, network, bad doctype) win
-  // over the generic isError flag — they carry an actionable message.
-  const queryError =
-    syncError != null
-      ? new Error(describeSyncError(syncError, doctype, t))
-      : isError
-        ? new Error(t("Failed to load {{doctype}} events", { doctype }))
-        : null;
 
   // Scheme-aware palette for resolving NAMED doc colors (P-15): Frappe's
   // palette references ("blue", "Red") map to sanctioned solids per scheme;

package/src/FrappeChartCard.spec.tsx

@@ -0,0 +1,179 @@
+/**
+ * MPO-287: a `dataSource` with no data source in scope is a misconfiguration,
+ * not static mode — the same defect MPO-237 fixed one component over. The
+ * card asked for a computed series and there is nowhere to compute it, so
+ * `config.data` must never be painted as the series: a plausible shape
+ * presented confidently is worse than a visible gap, because nothing
+ * downstream can tell it was never computed.
+ *
+ * Static mode (no `dataSource` at all) is the documented, intended path and
+ * is asserted here too, so the fix cannot over-correct into it. A fixture
+ * corpus is a data source (MPO-228), so it stands in for a baseURL and must
+ * not trip the guard.
+ *
+ * The chart body itself is not assertable here: ChartSurface measures its
+ * own width through `onLayout`, which never fires in happy-dom, so no SVG
+ * reaches the DOM. Two things stand in. The card's plain title renders only
+ * when a series reached `ChartCard` — the skeleton, the empty surface and
+ * the not-configured surface each carry different text. And `formatLabel`
+ * is called once per computed group, so spying on it proves whether the
+ * aggregate ran at all.
+ */
+
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen, waitFor } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { FrappeChartCard } from "./FrappeChartCard";
+import { FrappeProvider } from "./FrappeProvider";
+import { __resetFrappeDevWarnSeen } from "./shared/devWarn";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+beforeEach(() => {
+  __resetFrappeDevWarnSeen();
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+const config = {
+  id: "todo-by-status",
+  title: "ToDos by Status",
+  type: "bar" as const,
+  data: [
+    { label: "Open", value: 41 },
+    { label: "Closed", value: 7 },
+  ],
+};
+
+const dataSource = { doctype: "ToDo", groupBy: "status" };
+
+const todos = [
+  { name: "TD-1", doctype: "ToDo", status: "Open" },
+  { name: "TD-2", doctype: "ToDo", status: "Open" },
+  { name: "TD-3", doctype: "ToDo", status: "Closed" },
+];
+
+describe("FrappeChartCard with a dataSource and no baseURL (MPO-287)", () => {
+  it("does not render config.data as though it were the computed series", () => {
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+    renderWithProviders(<FrappeChartCard config={config} dataSource={dataSource} />);
+
+    expect(screen.queryByText("ToDos by Status")).toBeNull();
+    expect(screen.getByText("ToDos by Status is not configured")).toBeInTheDocument();
+    expect(screen.getByText(/no Frappe baseURL is in scope/)).toBeInTheDocument();
+  });
+
+  it("logs a development warning naming the missing baseURL", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    renderWithProviders(<FrappeChartCard config={config} dataSource={dataSource} />);
+
+    const line = warn.mock.calls.map((call) => String(call[0])).join("\n");
+    expect(line).toContain("[frappe-ui] chart-datasource-without-baseurl");
+    expect(line).toContain("baseURL");
+    expect(line).toContain("component=FrappeChartCard");
+    expect(line).toContain("id=todo-by-status");
+    expect(line).toContain("doctype=ToDo");
+  });
+
+  it("warns once per card, not once per render", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const { rerender } = renderWithProviders(
+      <FrappeChartCard config={config} dataSource={dataSource} />,
+    );
+    rerender(<FrappeChartCard config={{ ...config }} dataSource={dataSource} />);
+    rerender(<FrappeChartCard config={{ ...config }} dataSource={dataSource} />);
+
+    const lines = warn.mock.calls.filter((call) =>
+      String(call[0]).includes("chart-datasource-without-baseurl"),
+    );
+    expect(lines).toHaveLength(1);
+  });
+
+  it("stays silent in production", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const previous = process.env.NODE_ENV;
+    process.env.NODE_ENV = "production";
+    try {
+      renderWithProviders(<FrappeChartCard config={config} dataSource={dataSource} />);
+    } finally {
+      process.env.NODE_ENV = previous;
+    }
+
+    expect(
+      warn.mock.calls.filter((call) =>
+        String(call[0]).includes("chart-datasource-without-baseurl"),
+      ),
+    ).toHaveLength(0);
+  });
+});
+
+describe("FrappeChartCard configured paths stay untouched (MPO-287)", () => {
+  it("renders config.data with no warning when no dataSource is set", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    renderWithProviders(<FrappeChartCard config={config} />);
+
+    expect(screen.getByText("ToDos by Status")).toBeInTheDocument();
+    expect(screen.queryByText("ToDos by Status is not configured")).toBeNull();
+    expect(
+      warn.mock.calls.filter((call) =>
+        String(call[0]).includes("chart-datasource-without-baseurl"),
+      ),
+    ).toHaveLength(0);
+  });
+
+  it("computes the series, and does not warn, when the provider supplies a baseURL", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const formatLabel = vi.fn((label: string) => label);
+    renderWithProviders(
+      <FrappeProvider baseURL="http://test" fixtures={new InMemoryFixtureProvider({ ToDo: todos })}>
+        <FrappeChartCard config={config} dataSource={{ ...dataSource, formatLabel }} />
+      </FrappeProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByText("ToDos by Status")).toBeInTheDocument());
+    expect([...new Set(formatLabel.mock.calls.map((call) => call[0]))].sort()).toEqual([
+      "Closed",
+      "Open",
+    ]);
+    expect(screen.queryByText("ToDos by Status is not configured")).toBeNull();
+    expect(
+      warn.mock.calls.filter((call) =>
+        String(call[0]).includes("chart-datasource-without-baseurl"),
+      ),
+    ).toHaveLength(0);
+  });
+
+  it("treats a fixture corpus as the data source when no baseURL is set (MPO-228)", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const formatLabel = vi.fn((label: string) => label);
+    renderWithProviders(
+      <FrappeProvider fixtures={new InMemoryFixtureProvider({ ToDo: todos })}>
+        <FrappeChartCard config={config} dataSource={{ ...dataSource, formatLabel }} />
+      </FrappeProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByText("ToDos by Status")).toBeInTheDocument());
+    expect([...new Set(formatLabel.mock.calls.map((call) => call[0]))].sort()).toEqual([
+      "Closed",
+      "Open",
+    ]);
+    expect(screen.queryByText("ToDos by Status is not configured")).toBeNull();
+    expect(
+      warn.mock.calls.filter((call) =>
+        String(call[0]).includes("chart-datasource-without-baseurl"),
+      ),
+    ).toHaveLength(0);
+  });
+});

package/src/FrappeChartCard.tsx

@@ -15,6 +15,14 @@
  * (permission failures called out), catalog empty state when the aggregate
  * returns no groups, and a subtle stale dim while a post-event refetch is
  * in flight.
+ *
+ * A `dataSource` with no data source in scope — no `baseURL` from the prop
+ * or a FrappeProvider, and no fixture corpus either — is a misconfiguration,
+ * not static mode: the caller asked for a computed series and there is
+ * nowhere to compute it. The card renders the not-configured surface and
+ * warns in dev. It never falls back to `config.data`, which would present
+ * an uncomputed shape as the series. A fixture corpus answers every read
+ * locally, so it stands in for a baseURL (MPO-228).
  */
 import {
   AsyncBoundary,
@@ -23,12 +31,13 @@ import {
   type ChartCardProps,
   type ChartConfig,
 } from "@multiplatform.one/components";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { YStack, type YStackProps } from "tamagui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { ChartCard } from "./ChartCard";
 import { useFrappeConfig } from "./FrappeProvider";
+import { frappeDevWarn } from "./shared/devWarn";
 import {
   useFrappeAggregate,
   type FrappeAggregateConnection,
@@ -52,10 +61,18 @@ export interface FrappeChartDataSource {
 }
 
 export interface FrappeChartCardProps extends Omit<ChartCardProps, "config"> {
-  /** Chart chrome (title, type, height…). In live mode `data` is overridden. */
+  /**
+   * Chart chrome (title, type, height…). In live mode `data` is overridden.
+   * With a `dataSource` and no data source in scope, `data` is not rendered
+   * at all.
+   */
   config: Omit<ChartConfig, "data"> & { data?: ChartConfig["data"] };
   /** When set, the chart series goes live against this doctype. */
   dataSource?: FrappeChartDataSource;
+  /**
+   * Falls back to the FrappeProvider's. Required whenever `dataSource` is
+   * set, unless the provider carries a fixture corpus.
+   */
   baseURL?: string;
   auth?: { useToken?: boolean; token?: string; type?: string };
   syncOptions?: unknown;
@@ -94,8 +111,9 @@ export function FrappeChartCard({
   const { t } = useTranslation();
 
   const finalBaseURL = baseURL ?? providerConfig?.baseURL;
+  const fixtures = providerConfig?.fixtures;
   const connection: FrappeAggregateConnection | undefined =
-    dataSource && finalBaseURL
+    dataSource && (finalBaseURL || fixtures)
       ? {
           baseURL: finalBaseURL,
           socketPort: providerConfig?.socketPort,
@@ -104,10 +122,22 @@ export function FrappeChartCard({
           auth: auth ?? providerConfig?.auth,
           syncOptions: syncOptions ?? providerConfig?.syncOptions,
           realtime: providerConfig?.realtime,
-          fixtures: providerConfig?.fixtures,
+          fixtures,
         }
       : undefined;
 
+  const missingConnection = !!dataSource && !connection;
+  const doctype = dataSource?.doctype;
+  useEffect(() => {
+    if (!missingConnection) return;
+    frappeDevWarn("chart-datasource-without-baseurl", {
+      component: "FrappeChartCard",
+      id: config.id,
+      doctype,
+      suggest: "set baseURL on FrappeChartCard or on the FrappeProvider above it",
+    });
+  }, [missingConnection, config.id, doctype]);
+
   const { groups, isLoading, isStale, error, isPermissionError } = useFrappeAggregate(connection, {
     doctype: dataSource?.doctype ?? "",
     aggregate: dataSource?.aggregate,
@@ -128,11 +158,30 @@ export function FrappeChartCard({
     return { ...config, data } as ChartConfig;
   }, [config, dataSource, groups]);
 
-  // Static passthrough — sanitizing bridge, palette untouched.
-  if (!dataSource || !connection) {
+  // Static passthrough — sanitizing bridge, palette untouched. The caller
+  // supplied the series and asked for no computation.
+  if (!dataSource) {
     return <ChartCard config={liveConfig} {...chartCardProps} />;
   }
 
+  // A requested series with nowhere to compute it. `config.data` is the
+  // caller's placeholder, so drawing it here would publish a shape nothing
+  // downstream could tell was never computed.
+  if (!connection) {
+    return (
+      <AsyncBoundary
+        compact
+        error
+        errorTitle={t("{{title}} is not configured", { title: config.title })}
+        errorDescription={t(
+          "This chart reads {{doctype}} live, but no Frappe baseURL is in scope, so the series was never computed.",
+          { doctype: dataSource.doctype },
+        )}
+        {...(chartCardProps as YStackProps)}
+      />
+    );
+  }
+
   if (isLoading) {
     return (
       <ChartCardSkeleton

package/src/FrappeForm.tsx

@@ -171,11 +171,15 @@ export interface AssignmentTodoRow {
   reference_name?: string;
 }
 
-/** Resolves a Frappe file field value (e.g. `/files/x.png`) to a full URL. */
-export function resolveFileUrl(value: unknown, baseURL: string): string | undefined {
+/**
+ * Resolves a Frappe file field value (e.g. `/files/x.png`) to a full URL.
+ * A site-relative path needs a server to hang off, so it resolves to nothing
+ * on a fixtures-only host (no baseURL); absolute URLs still pass through.
+ */
+export function resolveFileUrl(value: unknown, baseURL: string | undefined): string | undefined {
   if (!value || typeof value !== "string") return undefined;
   if (value.startsWith("http://") || value.startsWith("https://")) return value;
-  if (value.startsWith("/")) return `${baseURL.replace(/\/$/, "")}${value}`;
+  if (value.startsWith("/")) return baseURL ? `${baseURL.replace(/\/$/, "")}${value}` : undefined;
   return value;
 }
 

package/src/FrappeGantt.tsx

@@ -1,14 +1,13 @@
-import { useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
 import {
+  Alert,
   GanttView,
   type GanttItemMoveRange,
   type GanttTask,
   type GanttZoom,
 } from "@multiplatform.one/components";
 import React, { useCallback, useMemo, useState, type ReactNode } from "react";
-import { Text, YStack, type YStackProps } from "tamagui";
+import { YStack, type YStackProps } from "tamagui";
 import { useTranslation } from "react-i18next";
-import { formCommonColors } from "@multiplatform.one/forms";
 import {
   formatCalendarDate,
   parseCalendarDate,
@@ -18,6 +17,7 @@ import {
 import { FrappeConnectionIndicator } from "./FrappeConnectionIndicator";
 import { useFrappeConfig } from "./FrappeProvider";
 import { describeSyncError } from "./syncError";
+import { useFrappeRows } from "./useFrappeRows";
 import { resolveFrappeEventColor } from "./frappeEventColor";
 
 export interface FrappeGanttProps<TDoc extends { name: string; doctype: string }> extends Omit<
@@ -113,16 +113,13 @@ export function FrappeGantt<TDoc extends { name: string; doctype: string }>({
   const { knobProps } = useResolvedKnobs();
   const { t } = useTranslation();
   const [actionError, setActionError] = useState<Error | null>(null);
-  // Honest error state: the collection swallows failed subscription fetches
-  // (the chart would just look empty) — onSyncError reports them here.
-  const [syncError, setSyncError] = useState<unknown>(null);
 
   const finalBaseURL = baseURL ?? config?.baseURL;
   const finalAuth = auth ?? config?.auth;
   const finalSyncOptions = syncOptions ?? config?.syncOptions;
 
-  if (!finalBaseURL) {
-    throw new Error("FrappeGantt requires baseURL prop or FrappeProvider with baseURL");
+  if (!finalBaseURL && !config?.fixtures) {
+    throw new Error("FrappeGantt requires baseURL prop or FrappeProvider with baseURL or fixtures");
   }
 
   // Ensure required fields are fetched
@@ -162,25 +159,29 @@ export function FrappeGantt<TDoc extends { name: string; doctype: string }>({
     ],
   );
 
-  const collection = useFrappeCollection<TDoc>(connectionConfig, doctype, {
+  // The shared doctype read (MPO-251). `mapError` keeps this chart's own
+  // error copy (describeSyncError); real subscription failures still win over
+  // the generic isError flag inside the hook, because they carry an
+  // actionable message. `limit: null` keeps the bench's own page length.
+  const mapSyncError = useCallback(
+    (err: unknown) => new Error(describeSyncError(err, doctype, t)),
+    [doctype, t],
+  );
+  const {
+    rows: docs,
+    isQueryLoading: isLoading,
+    error: queryError,
+    collection,
+  } = useFrappeRows<TDoc>(connectionConfig, doctype, {
     fields: effectiveFields,
     filters,
-    onSyncError: setSyncError,
+    limit: null,
+    mapError: mapSyncError,
+    messages: {
+      permission: t("You do not have permission to view {{doctype}}", { doctype }),
+      generic: t("Failed to load {{doctype}} tasks", { doctype }),
+    },
   });
-  const {
-    data: rawData,
-    isLoading,
-    isError,
-  } = useLiveQuery((q) => (collection ? q.from({ _list: collection }) : null), [collection]);
-  const docs = useMemo(() => (rawData as TDoc[] | undefined) ?? [], [rawData]);
-  // Real subscription failures (permission-error, network, bad doctype) win
-  // over the generic isError flag — they carry an actionable message.
-  const queryError =
-    syncError !== null && syncError !== undefined
-      ? new Error(describeSyncError(syncError, doctype, t))
-      : isError
-        ? new Error(t("Failed to load {{doctype}} tasks", { doctype }))
-        : null;
 
   // Scheme-aware palette for resolving NAMED doc colors (P-15 / LC-27):
   // Frappe's palette references ("blue", "Red") map to sanctioned solids per
@@ -255,23 +256,12 @@ export function FrappeGantt<TDoc extends { name: string; doctype: string }>({
     <YStack {...knobProps.gap}>
       <FrappeConnectionIndicator config={connectionConfig} />
       {actionError ? (
-        <YStack
-          {...knobProps.panelPadding}
-          {...knobProps.borderRadius}
-          backgroundColor="$red2"
-          borderColor="$red7"
-          borderWidth={1}
-        >
-          <Text color={formCommonColors.error} {...knobProps.label}>
-            {t("Action failed")}
-          </Text>
-          <Text color={formCommonColors.muted} {...knobProps.label}>
-            {actionError.message}
-          </Text>
-        </YStack>
+        <Alert intent="error" title={t("Action failed")}>
+          {actionError.message}
+        </Alert>
       ) : null}
       <GanttView
-        {...knobProps.borderRadius}
+        {...knobProps.containerRadius}
         tasks={tasks}
         zoom={zoom}
         isLoading={isLoading}

package/src/FrappeImageView.tsx

@@ -4,7 +4,7 @@ import { ImageSquareIcon } from "@phosphor-icons/react";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Spinner, formCommonColors } from "@multiplatform.one/forms";
-import { Image, Text, YStack, type YStackProps } from "tamagui";
+import { Image, Text, YStack, useTheme, type YStackProps } from "tamagui";
 import { isServer } from "@multiplatform.one/platform";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useFrappeConfig } from "./FrappeProvider";
@@ -167,6 +167,7 @@ function FrappeImageViewClient<TDoc extends { name: string; doctype: string }>({
   syncOptions,
   ...stackProps
 }: FrappeImageViewProps<TDoc>) {
+  const theme = useTheme();
   const config = useFrappeConfig();
   const { knobProps } = useResolvedKnobs();
   const { t } = useTranslation();
@@ -273,7 +274,7 @@ function FrappeImageViewClient<TDoc extends { name: string; doctype: string }>({
     const iconSize = Number(knobProps.controlIcon?.width) || 16;
     return (
       <YStack {...knobProps.panelPadding} alignItems="center" {...knobProps.gap} {...stackProps}>
-        <ImageSquareIcon size={iconSize * 2} color={formCommonColors.muted} />
+        <ImageSquareIcon size={iconSize * 2} color={theme.color11?.val ?? "currentColor"} />
         <Text color={formCommonColors.muted} {...knobProps.body}>
           {t("No image field configured for {{doctype}}", { doctype })}
         </Text>
@@ -332,6 +333,7 @@ function FrappeImageCard({
   onItemClick?: (doc: Partial<unknown>) => void;
   knobProps: ReturnType<typeof useResolvedKnobs>["knobProps"];
 }) {
+  const theme = useTheme();
   const imageUrl = getImageUrl(doc[imageField], baseURL);
   const title = doc[titleField] || doc.name;
   const subtitle = subtitleField ? doc[subtitleField] : undefined;
@@ -371,7 +373,7 @@ function FrappeImageCard({
           alignItems="center"
           justifyContent="center"
         >
-          <ImageSquareIcon size={iconSize * 2} color={formCommonColors.muted} />
+          <ImageSquareIcon size={iconSize * 2} color={theme.color11?.val ?? "currentColor"} />
         </YStack>
       )}
       <Card.Footer>