@multiplatform.one/frappe-ui 7.6.3 → 7.7.1

package/src/FrappeDashboard.tsx

@@ -3,13 +3,7 @@ import {
   useFrappeDoctypeEvents,
   useLiveQuery,
 } from "@multiplatform.one/frappe";
-import {
-  ChartCard as BaseChartCard,
-  Dashboard,
-  type ChartCardProps,
-  type ChartDataPoint,
-  type DashboardWidget,
-} from "@multiplatform.one/components";
+import { Dashboard, type DashboardWidget } from "@multiplatform.one/components";
 import { Button, Spinner, formCommonColors } from "@multiplatform.one/forms";
 import { ArrowsClockwiseIcon } from "@phosphor-icons/react";
 import React, { useMemo, useCallback, useState, useEffect, useRef } from "react";
@@ -168,7 +162,7 @@ function LiveDashboardContent<TDoc extends { name: string; doctype: string }>({
     return (
       <YStack {...knobProps.panelPadding} alignItems="center" {...stackProps}>
         <Spinner size="large" />
-        <Text color={formCommonColors.muted} marginTop="$2" {...knobProps.body}>
+        <Text color={knobProps.textAccentColor} marginTop="$2" {...knobProps.body}>
           {t("Loading dashboard...")}
         </Text>
       </YStack>
@@ -181,7 +175,7 @@ function LiveDashboardContent<TDoc extends { name: string; doctype: string }>({
     return (
       <YStack {...knobProps.panelPadding} alignItems="center" {...stackProps} {...knobProps.gap}>
         <Text color={formCommonColors.error}>{t("Failed to load dashboard")}</Text>
-        <Text color={formCommonColors.muted} {...knobProps.body}>
+        <Text color={knobProps.textAccentColor} {...knobProps.body}>
           {err.message}
         </Text>
       </YStack>
@@ -201,7 +195,7 @@ function LiveDashboardContent<TDoc extends { name: string; doctype: string }>({
           {showRefresh && (
             <XStack {...knobProps.gap} alignItems="center">
               {isLiveStale && <Spinner size="small" aria-label={t("Updating")} />}
-              <Text color={formCommonColors.muted} {...knobProps.label}>
+              <Text color={knobProps.textAccentColor} {...knobProps.label}>
                 {t("Last updated: {{time}}", {
                   time: formatTimeOfDay(dataUpdatedAt ?? lastRefresh),
                 })}
@@ -321,7 +315,7 @@ export function FrappeDashboard<TDoc extends { name: string; doctype: string }>(
             {title ? <H3 {...knobProps.heading}>{title}</H3> : <YStack flex={1} />}
             <XStack {...knobProps.gap} alignItems="center">
               {autoRefresh && (
-                <Text color={formCommonColors.muted} {...knobProps.label}>
+                <Text color={knobProps.textAccentColor} {...knobProps.label}>
                   {t("Last updated: {{time}}", { time: formatTimeOfDay(lastRefresh) })}
                 </Text>
               )}
@@ -380,25 +374,4 @@ export function FrappeDashboard<TDoc extends { name: string; doctype: string }>(
   );
 }
 
-/**
- * ChartCard bridge that sanitizes series rows before render: values are
- * coerced to numbers and rows without a finite value (missing, NaN,
- * non-numeric, Infinity) are dropped, so malformed series can't flood the
- * SVG layer with invalid-length (`NaN`) attribute errors. Bar and pie
- * renderers can't draw negative magnitudes (negative rect heights / arc
- * angles are invalid SVG), so negatives clamp to the baseline there.
- */
-export function ChartCard({ config, ...chartCardProps }: ChartCardProps) {
-  const clampNegatives = config.type === "bar" || config.type === "pie";
-  const data = useMemo(
-    () =>
-      (config.data ?? []).flatMap((point) => {
-        const value = Number((point as Partial<ChartDataPoint> | undefined)?.value);
-        if (!Number.isFinite(value)) return [];
-        return [{ ...point, value: clampNegatives && value < 0 ? 0 : value }];
-      }),
-    [config.data, clampNegatives],
-  );
-  const sanitizedConfig = useMemo(() => ({ ...config, data }), [config.data, data]);
-  return <BaseChartCard {...chartCardProps} config={sanitizedConfig} />;
-}
+export { ChartCard } from "./ChartCard";

package/src/FrappeGantt.stories.tsx

@@ -77,8 +77,7 @@ function jsonResponse(body: unknown, status = 200): Response {
         return jsonResponse({ docs: [taskMetaRaw(doctype)] });
       }
       const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
-      if (metaMatch)
-        return jsonResponse({ data: taskMetaRaw(decodeURIComponent(metaMatch[1])) });
+      if (metaMatch) return jsonResponse({ data: taskMetaRaw(decodeURIComponent(metaMatch[1])) });
       if (url.pathname === "/api/resource/DocType") {
         return jsonResponse({ data: [{ name: "Task", module: "Projects" }] });
       }

package/src/FrappeImageView.tsx

@@ -5,25 +5,26 @@ 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 { isServer } from "@multiplatform.one/platform";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useFrappeConfig } from "./FrappeProvider";
 import { FrappeReconnectIndicator } from "./FrappeReconnectIndicator";
 
 /**
- * True when this module is evaluated during web server rendering. Same
- * guarded resolution as `frappeStoryTarget` / `frappe`'s `useLiveQuery`:
- * a bare `import.meta.env.SSR` member access throws on native
- * (Metro/Hermes has no Vite define — `import.meta.env` is undefined at
- * runtime), which crashed this component on device. Native lands on
- * `false`, which is correct — native is always a client.
+ * True when this module is evaluated during web server rendering.
+ *
+ * This used to read `import.meta.env.SSR` behind a try/catch, which MPO-192
+ * ruled out: in a classic script — the vxrn/rolldown Hermes bundle, or any
+ * Metro bundle for platform=web, which is what an Expo DOM component
+ * (`'use dom'`) is — `import.meta` is a PARSE-time SyntaxError, so the catch
+ * never runs and the whole module fails to parse.
+ *
+ * `isServer` carries no `import.meta` and is split at the FILE level
+ * (@tamagui/constants ships a `.native` flavour hardcoding it false), so it
+ * answers correctly in all four places: true only under web server render,
+ * false in a browser, on native, and inside a DOM component's WebView.
  */
-const IS_SSR: boolean = (() => {
-  try {
-    return (import.meta as ImportMeta & { env?: { SSR?: boolean } }).env?.SSR === true;
-  } catch {
-    return false;
-  }
-})();
+const IS_SSR: boolean = isServer;
 
 /**
  * Resolves an image field value to a full URL.
@@ -85,8 +86,8 @@ export function FrappeImageView<TDoc extends { name: string; doctype: string }>(
   // when FrappeProvider already carries it.
   const providerConfig = useFrappeConfig();
   // Note: `typeof window` is unreliable because react-native-web polyfills
-  // `window` during SSR. Use the module-level Vite SSR flag instead
-  // (bare `import.meta.env.SSR` crashes native — see IS_SSR above).
+  // `window` during SSR. Use the module-level platform flag instead
+  // (see IS_SSR above).
   if (IS_SSR) {
     const {
       doctype,

package/src/FrappeList.stories.tsx

@@ -85,8 +85,7 @@ function jsonResponse(body: unknown, status = 200): Response {
         return jsonResponse({ docs: [todoMetaRaw(doctype)] });
       }
       const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
-      if (metaMatch)
-        return jsonResponse({ data: todoMetaRaw(decodeURIComponent(metaMatch[1])) });
+      if (metaMatch) return jsonResponse({ data: todoMetaRaw(decodeURIComponent(metaMatch[1])) });
       if (url.pathname === "/api/resource/DocType") {
         return jsonResponse({ data: [{ name: "ToDo", module: "Desk" }] });
       }
@@ -270,10 +269,7 @@ export const Loading = () => (
 
 /** Zero documents, no failure — "No ToDo records found" (empty ≠ error). */
 export const Empty = () => (
-  <FrappeProvider
-    baseURL={MOCK_HOST}
-    fixtures={new InMemoryFixtureProvider({ ToDo: [] })}
-  >
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({ ToDo: [] })}>
     <FrappeList<ToDo> doctype="ToDo" renderItem={renderTodo} height={400} />
   </FrappeProvider>
 );
@@ -286,10 +282,7 @@ export const Empty = () => (
  * AsyncBoundary error panel.
  */
 export const LoadError = () => (
-  <FrappeProvider
-    baseURL={MOCK_HOST}
-    fixtures={new InMemoryFixtureProvider({ ToDo: [] })}
-  >
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({ ToDo: [] })}>
     <FrappeList<ToDo>
       doctype="ToDo"
       renderItem={renderTodo}

package/src/classicScriptSafety.spec.ts

@@ -0,0 +1,47 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { isServer } from "@multiplatform.one/platform";
+import { describe, expect, it } from "vitest";
+
+/**
+ * MPO-204 / MPO-192. `import.meta` is a PARSE-time SyntaxError in a classic
+ * script, and two bundles execute mpo as one: the vxrn/rolldown native bundle
+ * for Hermes, and any Metro bundle for platform=web — which is what an Expo
+ * DOM component (`'use dom'`) is. A try/catch never runs, because the file
+ * never parses, so the token has to be ABSENT rather than guarded. Both files
+ * below are reachable from a DOM component through the frappe-ui surface.
+ */
+const src = (name: string) =>
+  readFileSync(resolve(process.cwd(), "src", name), "utf8").replace(/\/\*[\s\S]*?\*\//g, "");
+
+describe("frappeStoryTarget carries no import.meta (MPO-204)", () => {
+  const source = src("frappeStoryTarget.tsx");
+
+  it("contains no import.meta token", () => {
+    expect(source).not.toMatch(/import\.meta/);
+  });
+
+  it("reads both Storybook keys as static process.env member expressions, the only spelling bundlers inline", () => {
+    expect(source).toMatch(/process\.env\.STORYBOOK_FRAPPE_LIVE\b/);
+    expect(source).toMatch(/process\.env\.STORYBOOK_FRAPPE_URL\b/);
+    // A computed read is never inlined, so it would always resolve undefined.
+    expect(source).not.toMatch(/process\.env\[/);
+  });
+});
+
+describe("FrappeImageView carries no import.meta (MPO-204)", () => {
+  const source = src("FrappeImageView.tsx");
+
+  it("contains no import.meta token", () => {
+    expect(source).not.toMatch(/import\.meta/);
+  });
+
+  it("takes its SSR answer from the platform package, which is split by FILE and not by a bundler define", () => {
+    expect(source).toMatch(/import \{ isServer \} from "@multiplatform\.one\/platform";/);
+    expect(source).toMatch(/const IS_SSR: boolean = isServer;/);
+  });
+
+  it("resolves isServer false in a browser-like environment, so the client branch renders", () => {
+    expect(isServer).toBe(false);
+  });
+});

package/src/components/attachments.stories.tsx

@@ -91,6 +91,13 @@ function jsonResponse(body: unknown, status = 200): Response {
   };
 })();
 
+// 1x1 PNG so the image thumbnail does not GET /files/diagram.png off the
+// Storybook origin (that 404 was the recorded fuzz FAIL). file_type is the
+// MIME the thumbnail recognises; file_name keeps the .png extension for the
+// type well. Same byte string as FrappeFileUpload.stories.
+const TINY_PNG =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
+
 const fileFixtures: FrappeFile[] = [
   {
     name: "FILE-001",
@@ -107,9 +114,9 @@ const fileFixtures: FrappeFile[] = [
     name: "FILE-002",
     doctype: "File",
     file_name: "diagram.png",
-    file_url: "/files/diagram.png",
+    file_url: TINY_PNG,
     file_size: 51200,
-    file_type: "PNG",
+    file_type: "image/png",
     attached_to_doctype: "Task",
     attached_to_name: "TASK-001",
     attached_to_field: "design_attachment",

package/src/dependsOn.ts

@@ -1,8 +1,8 @@
 /**
  * Safe evaluator for Frappe `depends_on` / `mandatory_depends_on` /
  * `read_only_depends_on` expressions — the ONE parser for every surface
- * (SchemaForm here, the backoffice form engine re-exports it from
- * `features/backoffice/form/dependsOn.ts`).
+ * (SchemaForm here, and the desk form engine next door in ./formEngine;
+ * `@multiplatform.one/backoffice` re-exports it from its old path).
  *
  * Frappe's desk evaluates these with JS `eval`; Hermes (React Native), GJS,
  * and CSP-restricted webviews cannot construct functions from strings, so

package/src/desk/DeskFormSidebar.stories.tsx

@@ -20,6 +20,24 @@ export default {
 
 const MOCK_HOST = "https://deskformsidebar.mock.test";
 
+/**
+ * The document image is an inline data: URI, not "/files/todo.png".
+ * `resolveFileUrl` prefixes a "/..." value with baseURL, so a path fixture
+ * makes the <img> fetch https://deskformsidebar.mock.test/files/todo.png for
+ * 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).
+ */
+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"/>' +
+      '<path d="M6 12.5l3.5 3.5L18 8" fill="none" stroke="#fff" stroke-width="2" ' +
+      'stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  );
+
 function jsonResponse(body: unknown, status = 200): Response {
   return new Response(JSON.stringify(body), {
     status,
@@ -70,7 +88,7 @@ const todoDocs = [
     owner: "jane@example.com",
     modified_by: "john@example.com",
     creation: "2026-02-01",
-    image: "/files/todo.png",
+    image: storyImage,
     _assign: JSON.stringify(["jane@example.com"]),
   },
 ];

package/src/fields/CodeEditor/CodeEditor.spec.tsx

@@ -4,6 +4,9 @@
  * table-cell chromeless branch, and registry resolution for the
  * "Code" and "JSON" fieldtypes.
  */
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { TableCellContext } from "@multiplatform.one/forms";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { act, cleanup, fireEvent } from "@testing-library/react";
@@ -12,6 +15,24 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { getFieldComponent, type FieldRenderProps } from "../../fieldRegistry";
 import { CodeEditorField, frappeCodeLanguage } from ".";
 
+function codeEditorDir() {
+  try {
+    const meta = import.meta.url;
+    if (meta.startsWith("file:")) return dirname(fileURLToPath(meta));
+  } catch {
+    /* vite-node may serve a non-file import.meta.url */
+  }
+  return join(process.cwd(), "src/fields/CodeEditor");
+}
+
+function readCodeEditorSource() {
+  return readFileSync(join(codeEditorDir(), "index.tsx"), "utf8");
+}
+
+function readCodeEditorStories() {
+  return readFileSync(join(codeEditorDir(), "CodeEditor.stories.tsx"), "utf8");
+}
+
 afterEach(cleanup);
 
 describe("frappeCodeLanguage (stock ControlCode language_map)", () => {
@@ -80,6 +101,22 @@ describe("CodeEditorField (standalone)", () => {
     );
     expect(result.getTextArea()).toBeNull();
   });
+
+  it("ships CSF3 story objects so native gallery keeps args (KS blank-pane)", () => {
+    const stories = readCodeEditorStories();
+    expect(stories).toMatch(/export const Main = \{/);
+    expect(stories).not.toMatch(/Main\.args\s*=/);
+    expect(stories).toContain("value: PYTHON_FIXTURE");
+  });
+
+  it("forwards knob containerRadius onto the source textarea (F14)", () => {
+    const source = readCodeEditorSource();
+    expect(source).toContain("...knobProps.containerRadius");
+    const result = renderWithProviders(
+      <CodeEditorField label="Script" value="print(1)" language="python" onChange={() => {}} />,
+    );
+    expect(result.getTextArea()).toBeTruthy();
+  });
 });
 
 describe("registry resolution (Code / JSON fieldtypes)", () => {

package/src/fields/CodeEditor/CodeEditor.stories.tsx

@@ -30,11 +30,11 @@ export default {
   title: "FrappeUI/CodeEditorField",
   component: CodeEditorField,
   parameters: {
-    status: { type: "beta" },
+    status: { type: "stable" },
     docs: {
       description: {
         component:
-          "Frappe `Code` / `JSON` fieldtypes: monospace source pane + shiki-highlighted preview (unified components Highlighter). Language follows the stock df.options convention via `frappeCodeLanguage()`.",
+          "Frappe `Code` / `JSON` fieldtypes: monospace source pane + shiki-highlighted preview (unified components Highlighter). Language follows the stock df.options convention via `frappeCodeLanguage()`. Source textarea honours knob `containerRadius` (F14).",
       },
     },
   },
@@ -74,76 +74,93 @@ function Controlled(props: Omit<StoryProps, "onChange">) {
   );
 }
 
-export const Main = (args: StoryProps) => <Controlled {...args} />;
-Main.args = {
-  label: "Server script",
-  helperText: 'Language from df.options ("Python")',
-  value: PYTHON_FIXTURE,
-  language: frappeCodeLanguage("Python"),
-} as Partial<StoryProps>;
-Main.storyName = "Main";
-
-export const Json = (args: StoryProps) => <Controlled {...args} />;
-Json.args = {
-  label: "Filters (JSON fieldtype)",
-  value: JSON_FIXTURE,
-  language: "json",
-} as Partial<StoryProps>;
+// CSF3 objects (not `export const Main = (args) => …; Main.args = …`).
+// Native Kitchen Sink `storyIndex.ts` treats a function export as
+// `{ render: fn }` and drops `fn.args`, so CSF2 Main/Json/ReadOnly
+// painted an empty Code pane on OTA (value/readOnly never arrived).
+export const Main = {
+  name: "Main",
+  args: {
+    label: "Server script",
+    helperText: 'Language from df.options ("Python")',
+    value: PYTHON_FIXTURE,
+    language: frappeCodeLanguage("Python"),
+  } as Partial<StoryProps>,
+  render: (args: StoryProps) => <Controlled {...args} />,
+};
 
-export const FormIntegrated = () => {
-  const form = useForm({
-    defaultValues: { script: PYTHON_FIXTURE },
-    onSubmit: async ({ value }) => action("onSubmit")(value),
-  });
-  return (
-    <Form form={form}>
-      <YStack gap="$4">
-        <CodeEditorField
-          form={form as unknown as AnyFormApi}
-          name="script"
-          label="Script (form-integrated)"
-          language="python"
-          required
-          helperText="Bound to TanStack Form field state"
-        />
-      </YStack>
-    </Form>
-  );
+export const Json = {
+  args: {
+    label: "Filters (JSON fieldtype)",
+    value: JSON_FIXTURE,
+    language: "json",
+  } as Partial<StoryProps>,
+  render: (args: StoryProps) => <Controlled {...args} />,
 };
 
-export const ReadOnly = (args: StoryProps) => <Controlled {...args} />;
-ReadOnly.args = {
-  label: "Read-only script",
-  value: PYTHON_FIXTURE,
-  language: "python",
-  readOnly: true,
-} as Partial<StoryProps>;
+export const FormIntegrated = {
+  name: "Form Integrated",
+  render: function FormIntegratedRender() {
+    const form = useForm({
+      defaultValues: { script: PYTHON_FIXTURE },
+      onSubmit: async ({ value }) => action("onSubmit")(value),
+    });
+    return (
+      <Form form={form}>
+        <YStack gap="$4">
+          <CodeEditorField
+            form={form as unknown as AnyFormApi}
+            name="script"
+            label="Script (form-integrated)"
+            language="python"
+            required
+            helperText="Bound to TanStack Form field state"
+          />
+        </YStack>
+      </Form>
+    );
+  },
+};
 
-export const States = (args: StoryProps) => (
-  <YStack gap="$5">
-    <Controlled {...args} label="Error" error="Script fails to parse at line 3" />
-    <Controlled {...args} label="Disabled" disabled />
-    <Controlled {...args} label="Compact" compact />
-    <CodeEditorField label="Skeleton" skeleton onChange={() => {}} />
-  </YStack>
-);
-States.args = {
-  value: 'const answer = 42;\nconsole.log("state fixtures");',
-  language: "javascript",
-} as Partial<StoryProps>;
+export const ReadOnly = {
+  args: {
+    label: "Read-only script",
+    value: PYTHON_FIXTURE,
+    language: "python",
+    readOnly: true,
+  } as Partial<StoryProps>,
+  render: (args: StoryProps) => <Controlled {...args} />,
+};
 
-export const DarkScheme = (args: StoryProps) => (
-  <Theme name="dark">
-    <YStack backgroundColor="$background" padding="$4">
-      <Controlled {...args} />
+export const States = {
+  args: {
+    value: 'const answer = 42;\nconsole.log("state fixtures");',
+    language: "javascript",
+  } as Partial<StoryProps>,
+  render: (args: StoryProps) => (
+    <YStack gap="$5">
+      <Controlled {...args} label="Error" error="Script fails to parse at line 3" />
+      <Controlled {...args} label="Disabled" disabled />
+      <Controlled {...args} label="Compact" compact />
+      <CodeEditorField label="Skeleton" skeleton onChange={() => {}} />
     </YStack>
-  </Theme>
-);
-DarkScheme.args = {
-  label: "Server script (dark)",
-  value: PYTHON_FIXTURE,
-  language: "python",
-} as Partial<StoryProps>;
+  ),
+};
+
+export const DarkScheme = {
+  args: {
+    label: "Server script (dark)",
+    value: PYTHON_FIXTURE,
+    language: "python",
+  } as Partial<StoryProps>,
+  render: (args: StoryProps) => (
+    <Theme name="dark">
+      <YStack backgroundColor="$background" padding="$4">
+        <Controlled {...args} />
+      </YStack>
+    </Theme>
+  ),
+};
 
 type CodeRow = { id: string; label: string; value: string };
 

package/src/fields/CodeEditor/index.tsx

@@ -213,6 +213,10 @@ export function CodeEditorField({
       maxRows={maxRows}
       textAreaProps={{
         fontFamily: "$mono",
+        // F14: TextArea's inner <textarea> takes radius from `size` unless
+        // containerRadius lands after the size recipe. FieldLayout already
+        // gets knobProps; the measured source surface must too.
+        ...knobProps.containerRadius,
         autoCapitalize: "none",
         autoCorrect: false,
         spellCheck: false,