@multiplatform.one/frappe-ui 6.7.0 → 7.0.0

package/src/fields/FileUpload.tsx

@@ -57,6 +57,8 @@ export function FileUpload({
     ? {
         baseURL: finalBaseURL,
         socketPort: config?.socketPort,
+        siteName: config?.siteName,
+        socketBaseURL: config?.socketBaseURL,
         auth: auth ?? config?.auth,
         syncOptions: config?.syncOptions,
         fixtures: config?.fixtures,

package/src/fields/TableMultiSelect.tsx

@@ -2,7 +2,7 @@ import { PopoverContent } from "@multiplatform.one/components";
 import { useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
 import { Button, Skeleton } from "@multiplatform.one/forms";
 import { CaretDownIcon, CheckIcon, XIcon } from "@phosphor-icons/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { menuRowFrame, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Checkbox, Label, ListItem, Popover, ScrollView, Text, XStack, YStack } from "tamagui";
@@ -61,6 +61,8 @@ export function TableMultiSelect({
     ? {
         baseURL: finalBaseURL,
         socketPort: config?.socketPort,
+        siteName: config?.siteName,
+        socketBaseURL: config?.socketBaseURL,
         auth: auth ?? config?.auth,
         syncOptions: config?.syncOptions,
         fixtures: config?.fixtures,
@@ -132,7 +134,7 @@ export function TableMultiSelect({
           </Button>
         </Popover.Trigger>
 
-        <PopoverContent>
+        <PopoverContent overflow="hidden">
           <Popover.Arrow borderWidth={1} borderColor="$borderColor" />
 
           <YStack minWidth={250} maxHeight={300}>
@@ -150,6 +152,7 @@ export function TableMultiSelect({
                   return (
                     <ListItem
                       key={option.name}
+                      {...menuRowFrame}
                       title={displayLabel}
                       size={knobProps.sizeToken}
                       icon={
@@ -166,7 +169,7 @@ export function TableMultiSelect({
                           </Checkbox.Indicator>
                         </Checkbox>
                       }
-                      hoverStyle={{ backgroundColor: "$color2" }}
+                      hoverStyle={{ backgroundColor: "$color2", borderRadius: 0 }}
                       cursor={isOptionDisabled ? "not-allowed" : "pointer"}
                       opacity={isOptionDisabled ? 0.5 : 1}
                       onPress={() => !isOptionDisabled && handleToggle(option.name || "")}

package/src/frappeStoryTarget.tsx

@@ -14,7 +14,7 @@
  * Storybook never hard-fails when the bench is down.
  */
 import type { FixtureProvider } from "@multiplatform.one/frappe";
-import type { ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { FrappeProvider } from "./FrappeProvider";
 
 interface StorybookFrappeEnv {
@@ -93,3 +93,106 @@ export function FrappeStoryProvider({ children, fixtures }: FrappeStoryProviderP
     </FrappeProvider>
   );
 }
+
+/**
+ * Preferred name for the live-story ToDo. Fixture stories ship a document
+ * under this name; the live bench usually cannot (ToDo autonames by hash and
+ * rejects rename), so {@link LiveToDoGate} resolves a real row when live.
+ */
+export const LIVE_TODO_NAME = "TODO-LIVE-001";
+
+let liveToDoPromise: Promise<string> | undefined;
+
+async function lookupOrSeedLiveToDo(): Promise<string> {
+  const base = frappeStoryBaseUrl.replace(/\/$/, "");
+  const preferred = await fetch(`${base}/api/resource/ToDo/${encodeURIComponent(LIVE_TODO_NAME)}`);
+  if (preferred.ok) return LIVE_TODO_NAME;
+
+  const list = await fetch(
+    `${base}/api/resource/ToDo?limit_page_length=1&fields=${encodeURIComponent('["name"]')}`,
+  );
+  if (list.ok) {
+    const row = (await list.json())?.data?.[0]?.name;
+    if (typeof row === "string" && row) return row;
+  }
+
+  const whoRes = await fetch(`${base}/api/method/frappe.auth.get_logged_user`);
+  const me = whoRes.ok ? ((await whoRes.json())?.message as string | undefined) : undefined;
+  const created = await fetch(`${base}/api/resource/ToDo`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      description: "MPO live-story fixture ToDo",
+      status: "Open",
+      priority: "Medium",
+      ...(typeof me === "string" && me && me !== "Guest" ? { allocated_to: me } : {}),
+    }),
+  });
+  if (!created.ok) {
+    throw new Error(`Could not seed a ToDo on this bench (HTTP ${created.status})`);
+  }
+  const hashName = (await created.json())?.data?.name as string | undefined;
+  if (!hashName) throw new Error("Bench created a ToDo without a name");
+  const renamed = await fetch(`${base}/api/method/frappe.client.rename_doc`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      doctype: "ToDo",
+      old_name: hashName,
+      new_name: LIVE_TODO_NAME,
+    }),
+  });
+  return renamed.ok ? LIVE_TODO_NAME : hashName;
+}
+
+/**
+ * Resolves the ToDo the live form / sidebar / liked-by stories open.
+ *
+ * Offline (fixtures) → {@link LIVE_TODO_NAME}. Live + explicit `name` arg →
+ * that name (harnesses pass a real doc). Live with no arg → GET the preferred
+ * name, else the first readable ToDo, else create one (rename to the preferred
+ * name is best-effort: ToDo often forbids rename).
+ */
+export function LiveToDoGate({
+  name,
+  children,
+}: {
+  name?: string;
+  children: (resolvedName: string) => ReactNode;
+}) {
+  const requested = name?.trim() || undefined;
+  const [resolved, setResolved] = useState<string | null>(
+    requested ?? (frappeStoriesLive ? null : LIVE_TODO_NAME),
+  );
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (requested) {
+      setResolved(requested);
+      setError(null);
+      return;
+    }
+    if (!frappeStoriesLive) {
+      setResolved(LIVE_TODO_NAME);
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    liveToDoPromise ??= lookupOrSeedLiveToDo();
+    liveToDoPromise
+      .then((value) => {
+        if (!cancelled) setResolved(value);
+      })
+      .catch((err: unknown) => {
+        liveToDoPromise = undefined;
+        if (!cancelled) setError(err instanceof Error ? err.message : String(err));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [requested]);
+
+  if (error) return <div>{error}</div>;
+  if (!resolved) return <div>Resolving live ToDo…</div>;
+  return <>{children(resolved)}</>;
+}

package/src/frappeUsers.ts

@@ -61,6 +61,8 @@ export function useFrappeUsers(
         ? {
             baseURL: config.baseURL,
             socketPort: config.socketPort,
+            siteName: config.siteName,
+            socketBaseURL: config.socketBaseURL,
             auth: config.auth,
             syncOptions: config.syncOptions,
             fixtures: config.fixtures,

package/src/index.spec.ts

@@ -0,0 +1,62 @@
+/**
+ * Guardrail for the dashboard-catalog re-export seam.
+ *
+ * The barrel used to re-export KPICard / calculateTrend /
+ * calculatePercentageChange / aggregateData (and the widget/chart types)
+ * from ./FrappeDashboard, which does not define them — it bounced them
+ * from @multiplatform.one/components. In the built package that bounce
+ * put the catalog behind FrappeDashboard.native's own components import,
+ * and a native-conditions consumer that narrows components (the GNOME
+ * shim aliases; metro with exact resolution) failed the WHOLE barrel on
+ * that seam before anything rendered — measured downstream 2026-08-13.
+ * This spec locks the fix both ways:
+ *
+ *  1. ./FrappeDashboard exports only what it defines (FrappeDashboard and
+ *     the sanitizing ChartCard bridge) — no catalog names.
+ *  2. The barrel still ships the catalog, and each name IS the components
+ *     export, not a copy and not a bounce.
+ */
+import * as components from "@multiplatform.one/components";
+import { describe, expect, it } from "vitest";
+import * as dashboard from "./FrappeDashboard";
+import * as barrel from "./index";
+
+const CATALOG_VALUE_NAMES = [
+  "KPICard",
+  "calculateTrend",
+  "calculatePercentageChange",
+  "aggregateData",
+] as const;
+
+describe("dashboard catalog seam", () => {
+  it("keeps ./FrappeDashboard to the names it defines", () => {
+    for (const name of CATALOG_VALUE_NAMES) {
+      expect(
+        (dashboard as Record<string, unknown>)[name],
+        `FrappeDashboard must not re-export catalog "${name}"`,
+      ).toBeUndefined();
+    }
+    expect(dashboard.FrappeDashboard).toBeDefined();
+    expect(dashboard.ChartCard, "the sanitizing ChartCard bridge is its own export").toBeDefined();
+    expect(
+      dashboard.ChartCard,
+      "ChartCard must be the sanitizing bridge, not the raw catalog card",
+    ).not.toBe(components.ChartCard);
+  });
+
+  it("re-exports the catalog from components directly, identically", () => {
+    for (const name of CATALOG_VALUE_NAMES) {
+      expect(
+        (barrel as Record<string, unknown>)[name],
+        `barrel must export "${name}"`,
+      ).toBeDefined();
+      expect(
+        (barrel as Record<string, unknown>)[name],
+        `barrel "${name}" must be the components export`,
+      ).toBe((components as Record<string, unknown>)[name]);
+    }
+    expect(barrel.ChartCard, "barrel ChartCard stays the sanitizing bridge").toBe(
+      dashboard.ChartCard,
+    );
+  });
+});

package/src/index.ts

@@ -81,10 +81,20 @@ export {
 
 export {
   FrappeDashboard,
+  ChartCard,
   type FrappeDashboardProps,
   type DashboardDataSource,
+} from "./FrappeDashboard";
+
+// The KPI/trend catalog is the components package's — re-export it from
+// there, NOT through ./FrappeDashboard. The old bounce made the built
+// FrappeDashboard.native module re-export names it does not define, and a
+// native-conditions consumer that narrows @multiplatform.one/components
+// (the GNOME shim aliases; metro with exact resolution) failed the whole
+// barrel on that seam before anything rendered — measured 2026-08-13.
+// One seam (components' own barrel) instead of two.
+export {
   KPICard,
-  ChartCard,
   calculateTrend,
   calculatePercentageChange,
   aggregateData,
@@ -96,7 +106,7 @@ export {
   type ChartDataPoint,
   type ChartType,
   type TrendDirection,
-} from "./FrappeDashboard";
+} from "@multiplatform.one/components";
 
 export { FrappeKPICard, type FrappeKPICardProps, type FrappeKPIDataSource } from "./FrappeKPICard";
 
@@ -115,6 +125,22 @@ export {
   type UseFrappeAggregateResult,
 } from "./useFrappeAggregate";
 
+export {
+  useFrappeFacets,
+  filtersExcludingField,
+  isFacetFilterActive,
+  toggleFacetFilter,
+  scrubUserFacetRows,
+  NO_TAGS_LABEL,
+  type FrappeFacetFilter,
+  type FrappeFacetFilters,
+  type FrappeFacetOption,
+  type FrappeFacetState,
+  type FrappeFacetsConnection,
+  type UseFrappeFacetsOptions,
+  type UseFrappeFacetsResult,
+} from "./useFrappeFacets";
+
 export { FrappeImageView, type FrappeImageViewProps } from "./FrappeImageView";
 export { FrappeTreeView, type FrappeTreeViewProps } from "./FrappeTreeView";
 export {
@@ -122,6 +148,8 @@ export {
   type FrappeConnectionIndicatorProps,
 } from "./FrappeConnectionIndicator";
 
+export { SyncErrorNotice, type SyncErrorNoticeProps } from "./SyncErrorNotice";
+
 // ---------------------------------------------------------------------------
 // Schema Form & Field Registry
 // ---------------------------------------------------------------------------
@@ -288,6 +316,11 @@ export {
   type FrappeComment,
   type FrappeVersion,
 } from "./components/timeline";
+export {
+  useFrappeCommentActions,
+  type FrappeCommentActions,
+  type AddCommentInput,
+} from "./commentActions";
 
 // ---------------------------------------------------------------------------
 // Pagination Bridge
@@ -322,6 +355,7 @@ export {
   normalizeReportRows,
   reportColumnToDataTableColumn,
   reportFieldtypeToTableField,
+  reportRowLabel,
   scrubFieldname,
   type FrappeReportColumn,
   type FrappeReportConnection,

package/src/liveErrors.spec.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { isPermissionError, toLiveLoadError } from "./liveErrors";
+
+describe("isPermissionError", () => {
+  it("treats HTTP 403 / 401 as permission", () => {
+    expect(isPermissionError(Object.assign(new Error("nope"), { status: 403 }))).toBe(true);
+    expect(isPermissionError(Object.assign(new Error("nope"), { status: 401 }))).toBe(true);
+    expect(isPermissionError(Object.assign(new Error("nope"), { status: 500 }))).toBe(false);
+  });
+
+  it("treats a PermissionError-shaped message as permission", () => {
+    expect(isPermissionError(new Error("PermissionError"))).toBe(true);
+    expect(isPermissionError(new Error("You don't have access to Report: ToDo"))).toBe(false);
+  });
+});
+
+describe("toLiveLoadError", () => {
+  const labels = {
+    permissionMessage: "You do not have permission to run ToDo",
+    genericMessage: "Error running ToDo",
+  };
+
+  it("keeps a readable server sentence as detail", () => {
+    const err = Object.assign(new Error("You don't have access to Report: ToDo"), { status: 403 });
+    expect(toLiveLoadError(err, labels).message).toBe(
+      "You do not have permission to run ToDo: You don't have access to Report: ToDo",
+    );
+  });
+
+  it("does not append a developer-mode python traceback to permission chrome", () => {
+    const err = Object.assign(
+      new Error(
+        '["Traceback (most recent call last):\\n  File "apps/frappe/frappe/app.py", line 120, in application',
+      ),
+      { status: 403 },
+    );
+    const normalized = toLiveLoadError(err, labels);
+    expect(normalized.message).toBe("You do not have permission to run ToDo");
+    expect(normalized.message).not.toMatch(/Traceback/);
+  });
+
+  it("does not append a traceback to a generic load failure either", () => {
+    const err = new Error(
+      '["Traceback (most recent call last):\\n  File "apps/frappe/frappe/app.py"',
+    );
+    const normalized = toLiveLoadError(err, labels);
+    expect(normalized.message).toBe("Error running ToDo");
+    expect(normalized.message).not.toMatch(/Traceback/);
+  });
+});

package/src/liveErrors.ts

@@ -17,10 +17,19 @@ export function isPermissionError(error: unknown): boolean {
   return /permission|not permitted|forbidden/i.test(message);
 }
 
+/** True when `detail` is a developer-mode python traceback, not a sentence. */
+function isTracebackDetail(detail: string): boolean {
+  return /Traceback \(most recent call last\)/i.test(detail);
+}
+
 /**
  * Normalizes an initial-sync failure into an Error with an honest,
  * user-facing message. `permissionMessage` / `genericMessage` come from the
  * caller so components keep i18n ownership.
+ *
+ * A leaked `exc` traceback (the sentence `HttpClient` used to prefer) is
+ * dropped rather than appended — report / list chrome must never render a
+ * python stack at the user. A readable server sentence is kept as detail.
  */
 export function toLiveLoadError(
   error: unknown,
@@ -28,7 +37,8 @@ export function toLiveLoadError(
 ): Error {
   const detail = error instanceof Error ? error.message : String(error ?? "");
   const lead = isPermissionError(error) ? permissionMessage : genericMessage;
-  const message = detail && detail !== lead ? `${lead}: ${detail}` : lead;
+  const usable = detail && detail !== lead && !isTracebackDetail(detail) ? detail : "";
+  const message = usable ? `${lead}: ${usable}` : lead;
   const normalized = new Error(message);
   if (error instanceof Error && error.stack) normalized.stack = error.stack;
   return normalized;

package/src/useFrappeAggregate.ts

@@ -43,6 +43,10 @@ export type FrappeAggregateOperation = "count" | "sum" | "avg" | "min" | "max";
 export interface FrappeAggregateConnection {
   baseURL: string;
   socketPort?: number;
+  /** Same-origin socket override (see FrappeConfig.socketBaseURL). */
+  socketBaseURL?: string;
+  /** Frappe site name — the realtime Socket.IO namespace. */
+  siteName?: string;
   auth?: { useToken?: boolean; token?: string | (() => string | Promise<string>); type?: string };
   syncOptions?: unknown;
   fixtures?: FixtureProvider;
@@ -256,6 +260,8 @@ export function useFrappeAggregate(
   specRef.current = spec;
   const connectionRef = useRef(connection);
   connectionRef.current = connection;
+  const hasSettledRef = useRef(false);
+  const identityRef = useRef(`${connection?.baseURL}:${spec.doctype}`);
 
   const runFetch = useCallback(async () => {
     const conn = connectionRef.current;
@@ -270,6 +276,7 @@ export function useFrappeAggregate(
       setData(result);
       setError(undefined);
       setLastUpdated(new Date());
+      hasSettledRef.current = true;
     } catch (err) {
       if (seq !== fetchSeq.current) return;
       setError(err instanceof Error ? err : new Error(String(err)));
@@ -294,9 +301,21 @@ export function useFrappeAggregate(
   }, []);
 
   // Initial load + reload when the query identity changes.
+  // After the first settle, a filter/spec change is a refetch (isStale),
+  // not a first load (isLoading) — the shown number stays so the list
+  // chrome cannot jump when the user toggles a filter.
   useEffect(() => {
     if (!enabled) return;
-    setIsLoading(true);
+    const identity = `${connectionRef.current?.baseURL}:${specRef.current.doctype}`;
+    if (identityRef.current !== identity) {
+      identityRef.current = identity;
+      hasSettledRef.current = false;
+    }
+    if (hasSettledRef.current) {
+      setIsStale(true);
+    } else {
+      setIsLoading(true);
+    }
     setError(undefined);
     void runFetch();
     // eslint-disable-next-line react-hooks/exhaustive-deps