@multiplatform.one/frappe-ui 6.7.0 → 7.1.0

package/src/FrappeGantt.tsx

@@ -8,7 +8,12 @@ import {
 import React, { useCallback, useMemo, useState, type ReactNode } from "react";
 import { Text, YStack, type YStackProps } from "tamagui";
 import { useTranslation } from "react-i18next";
-import { parseCalendarDate, useChartPalette, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  formatCalendarDate,
+  parseCalendarDate,
+  useChartPalette,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { FrappeConnectionIndicator } from "./FrappeConnectionIndicator";
 import { useFrappeConfig } from "./FrappeProvider";
 import { describeSyncError } from "./syncError";
@@ -63,12 +68,8 @@ export interface FrappeGanttProps<TDoc extends { name: string; doctype: string }
  */
 function toFrappeFieldValue(original: unknown, next: Date): unknown {
   if (original instanceof Date) return next;
-  const pad = (n: number) => String(n).padStart(2, "0");
-  const datePart = `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}`;
-  if (typeof original === "string" && original.includes(":")) {
-    return `${datePart} ${pad(next.getHours())}:${pad(next.getMinutes())}:${pad(next.getSeconds())}`;
-  }
-  return datePart;
+  const carriesTime = typeof original === "string" && original.includes(":");
+  return formatCalendarDate(next, carriesTime ? "datetime" : "date");
 }
 
 /**
@@ -139,6 +140,8 @@ export function FrappeGantt<TDoc extends { name: string; doctype: string }>({
     () => ({
       baseURL: finalBaseURL,
       socketPort: config?.socketPort,
+      siteName: config?.siteName,
+      socketBaseURL: config?.socketBaseURL,
       auth: finalAuth,
       syncOptions: finalSyncOptions,
       socketOptions: config?.socketOptions,
@@ -147,6 +150,8 @@ export function FrappeGantt<TDoc extends { name: string; doctype: string }>({
     [
       finalBaseURL,
       config?.socketPort,
+      config?.siteName,
+      config?.socketBaseURL,
       finalAuth,
       finalSyncOptions,
       config?.socketOptions,

package/src/FrappeImageView.tsx

@@ -185,11 +185,21 @@ function FrappeImageViewClient<TDoc extends { name: string; doctype: string }>({
     () => ({
       baseURL: finalBaseURL,
       socketPort: config?.socketPort,
+      siteName: config?.siteName,
+      socketBaseURL: config?.socketBaseURL,
       auth: finalAuth,
       syncOptions: finalSyncOptions,
       fixtures: config?.fixtures,
     }),
-    [finalBaseURL, config?.socketPort, finalAuth, finalSyncOptions, config?.fixtures],
+    [
+      finalBaseURL,
+      config?.socketPort,
+      config?.siteName,
+      config?.socketBaseURL,
+      finalAuth,
+      finalSyncOptions,
+      config?.fixtures,
+    ],
   );
 
   const { meta, isLoading: isMetaLoading } = useDocTypeMeta(appConfig, doctype);

package/src/FrappeKPICard.stories.tsx

@@ -1,8 +1,11 @@
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+// KPICard comes from the components catalog — the frappe-ui barrel
+// re-exports it from there directly (./FrappeDashboard no longer bounces
+// catalog names it does not define).
+import { KPICard } from "@multiplatform.one/components";
 import { action } from "@multiplatform.one/storybook";
 import { CurrencyDollarIcon } from "@phosphor-icons/react";
 import { XStack } from "tamagui";
-import { KPICard } from "./FrappeDashboard";
 import { FrappeKPICard } from "./FrappeKPICard";
 import { FrappeStoryProvider } from "./frappeStoryTarget";
 

package/src/FrappeKPICard.tsx

@@ -99,6 +99,8 @@ export function FrappeKPICard({
       ? {
           baseURL: finalBaseURL,
           socketPort: providerConfig?.socketPort,
+          siteName: providerConfig?.siteName,
+          socketBaseURL: providerConfig?.socketBaseURL,
           auth: auth ?? providerConfig?.auth,
           syncOptions: syncOptions ?? providerConfig?.syncOptions,
           fixtures: providerConfig?.fixtures,

package/src/FrappeKanban.tsx

@@ -117,6 +117,8 @@ export function FrappeKanban<TDoc extends { name: string; doctype: string }>({
     () => ({
       baseURL: finalBaseURL,
       socketPort: config?.socketPort,
+      siteName: config?.siteName,
+      socketBaseURL: config?.socketBaseURL,
       auth: finalAuth,
       syncOptions: finalSyncOptions,
       socketOptions: config?.socketOptions,
@@ -125,6 +127,8 @@ export function FrappeKanban<TDoc extends { name: string; doctype: string }>({
     [
       finalBaseURL,
       config?.socketPort,
+      config?.siteName,
+      config?.socketBaseURL,
       finalAuth,
       finalSyncOptions,
       config?.socketOptions,

package/src/FrappeLikedBy.stories.tsx

@@ -2,7 +2,7 @@ import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { action } from "@multiplatform.one/storybook";
 import { FrappeLikedBy } from "./FrappeLikedBy";
 import { FrappeProvider } from "./FrappeProvider";
-import { FrappeStoryProvider, frappeStoriesLive } from "./frappeStoryTarget";
+import { FrappeStoryProvider, LiveToDoGate, frappeStoriesLive } from "./frappeStoryTarget";
 import type { FrappeUserDoc } from "./frappeUsers";
 
 export default {
@@ -51,6 +51,18 @@ const makeFixtures = () =>
         ]),
       },
     ],
+    // The live story's doctype. `Task` ships with ERPNext, not frappe, so a
+    // frappe-only bench answers `/api/resource/Task/TASK-001` with a 500
+    // ImportError instead of a document — the live arm has to name a doctype
+    // every bench actually has, and this fixture keeps its offline fallback
+    // rendering.
+    ToDo: [
+      {
+        name: "TODO-LIVE-001",
+        doctype: "ToDo",
+        _liked_by: JSON.stringify(["Administrator", "jane@example.com"]),
+      },
+    ],
     User: userFixtures,
   });
 
@@ -153,14 +165,18 @@ export const LoadError = () => (
  */
 export const Live = (args: { doctype?: string; docname?: string }) => (
   <FrappeStoryProvider fixtures={makeFixtures()}>
-    <FrappeLikedBy
-      doctype={args.doctype || "Task"}
-      name={args.docname || "TASK-001"}
-      // Live mode resolves the session user via get_logged_user; the fixture
-      // fallback has no session, so pin one for interactivity.
-      currentUser={frappeStoriesLive ? undefined : "Administrator"}
-      onToggle={action("onToggle")}
-    />
+    <LiveToDoGate name={args.docname}>
+      {(name) => (
+        <FrappeLikedBy
+          doctype={args.doctype || "ToDo"}
+          name={name}
+          // Live mode resolves the session user via get_logged_user; the fixture
+          // fallback has no session, so pin one for interactivity.
+          currentUser={frappeStoriesLive ? undefined : "Administrator"}
+          onToggle={action("onToggle")}
+        />
+      )}
+    </LiveToDoGate>
   </FrappeStoryProvider>
 );
 Live.args = { doctype: "", docname: "" };
@@ -169,7 +185,7 @@ Live.parameters = {
   docs: {
     description: {
       story:
-        "Live like toggle over the real bench: optimistic flip, `toggle_like` POST, revert on failure; out-of-band likes stream in via the doc subscription. Fixture fallback (Task/TASK-001) when the bench is down.",
+        "Live like toggle over the real bench ToDo (not ERPNext Task — a frappe-only bench 500s ImportError on Task). Optimistic flip, `toggle_like` POST, revert on failure; out-of-band likes stream in via the doc subscription. Pass a real `docname` or let the story resolve/seed a readable ToDo. Fixture fallback (ToDo/TODO-LIVE-001) when the bench is down.",
     },
   },
 };

package/src/FrappeLikedBy.tsx

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

package/src/FrappeList.tsx

@@ -59,11 +59,21 @@ export function FrappeList<TDoc extends { name: string; doctype: string }>({
     () => ({
       baseURL: finalBaseURL,
       socketPort: config?.socketPort,
+      siteName: config?.siteName,
+      socketBaseURL: config?.socketBaseURL,
       auth: finalAuth,
       syncOptions: finalSyncOptions,
       fixtures: config?.fixtures,
     }),
-    [finalBaseURL, config?.socketPort, finalAuth, finalSyncOptions, config?.fixtures],
+    [
+      finalBaseURL,
+      config?.socketPort,
+      config?.siteName,
+      config?.socketBaseURL,
+      finalAuth,
+      finalSyncOptions,
+      config?.fixtures,
+    ],
   );
 
   // Bridge VirtualPageManager pagination to generic onLoadMore/hasMore.

package/src/FrappeListView.spec.tsx

@@ -0,0 +1,144 @@
+// FrappeListView toolbar refresh — LC-54 PRESS-FLOOR-CHANNEL (amendment
+// 2026-08-13, "the grown box NEVER PAINTS"): the refresh affordance used to
+// be a raw tamagui Button riding a grown transparent press target (negative
+// outsets escaping the toolbar slot) whose default hover fill painted the
+// whole escaped 44px floor. The fix migrates it to the house forms Button
+// with `circular` — the painted box ITSELF is the 44×44 control, so feedback
+// stays inside its own reserved layout slot (box-is-control mechanism).
+// Same atom-based assertions as FrappeDashboard.spec.tsx (jsdom can't apply
+// :hover; the positive control proving the detectors work lives there).
+//
+// DocType meta is served by a scoped fetch mock (same shape the stories
+// use); documents come from InMemoryFixtureProvider.
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent, waitFor } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { FrappeListView } from "./FrappeListView";
+import { FrappeProvider } from "./FrappeProvider";
+
+const MOCK_HOST = "https://listview.spec.test";
+
+const metaRaw = {
+  name: "QaTodo",
+  module: "QA",
+  title_field: "description",
+  fields: [
+    {
+      fieldname: "description",
+      fieldtype: "Data",
+      label: "Description",
+      in_list_view: 1,
+      reqd: 1,
+    },
+    {
+      fieldname: "status",
+      fieldtype: "Select",
+      label: "Status",
+      options: "Open\nWorking\nCompleted",
+      in_list_view: 1,
+      in_standard_filter: 1,
+    },
+  ],
+  permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+};
+
+const jsonResponse = (body: unknown, status = 200) =>
+  new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+
+const realFetch = globalThis.fetch;
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+  globalThis.fetch = (async (input: RequestInfo | URL, init?: RequestInit) => {
+    const urlStr =
+      typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (urlStr.startsWith(MOCK_HOST)) {
+      const url = new URL(urlStr);
+      if (/^\/api\/resource\/DocType\/.+$/.test(url.pathname)) {
+        return jsonResponse({ data: metaRaw });
+      }
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  }) as typeof fetch;
+});
+
+afterAll(() => {
+  globalThis.fetch = realFetch;
+});
+
+afterEach(cleanup);
+
+const fixtures = new InMemoryFixtureProvider({
+  QaTodo: [
+    {
+      name: "QATODO-001",
+      doctype: "QaTodo",
+      description: "Review document",
+      status: "Open",
+    },
+  ],
+});
+
+// Grown-box escape mechanism: any negative margin atom on the press floor.
+const negativeMarginAtom = /_m[trbl]--\d/;
+// Painted state feedback: any non-transparent hover/press background atom.
+const paintedStateAtom = /_bg-0(?:hover|active)-(?!transparent)/;
+
+const renderListView = (props: Partial<Parameters<typeof FrappeListView>[0]> = {}) =>
+  renderWithProviders(
+    <FrappeProvider baseURL={MOCK_HOST} fixtures={fixtures}>
+      <FrappeListView doctype="QaTodo" {...props} />
+    </FrappeProvider>,
+  );
+
+const refreshIn = async (container: HTMLElement) => {
+  await waitFor(() => {
+    expect(container.querySelector('[aria-label="Refresh"]')).not.toBeNull();
+  });
+  return container.querySelector('[aria-label="Refresh"]') as HTMLElement;
+};
+
+describe("FrappeListView refresh press floor (LC-54 amendment)", () => {
+  it("the refresh floor is its own box — no grown-target negative outset", async () => {
+    const { container } = renderListView();
+    const refresh = await refreshIn(container);
+    expect(refresh.getAttribute("role")).toBe("button");
+    // House circular Button: the 44px floor is REAL layout (box-is-control);
+    // the escape mechanism (negative margins pulling the grown box over the
+    // adjacent Add button) must be gone.
+    expect(refresh.className).not.toMatch(negativeMarginAtom);
+    expect(refresh.className).toMatch(/_mih-44px/);
+    expect(refresh.className).toMatch(/_miw-44px/);
+  });
+
+  it("hover feedback rides the button's own in-slot box (house channel)", async () => {
+    const { container } = renderListView();
+    const refresh = await refreshIn(container);
+    // Paint on the OWN box is the sanctioned own-size mechanism — the
+    // amendment bans paint on a box that escapes its slot (arm above).
+    expect(refresh.className).toMatch(paintedStateAtom);
+    expect(refresh.querySelector("svg")).not.toBeNull();
+  });
+
+  it("the migrated Add button still activates (house div[role=button])", async () => {
+    const onAdd = vi.fn();
+    const { container } = renderListView({ onAdd });
+    await refreshIn(container);
+    const add = Array.from(container.querySelectorAll('[role="button"]')).find((node) =>
+      node.textContent?.includes("Add QaTodo"),
+    ) as HTMLElement;
+    expect(add).not.toBeNull();
+    fireEvent.click(add);
+    expect(onAdd).toHaveBeenCalledTimes(1);
+  });
+});

package/src/FrappeListView.tsx

@@ -3,35 +3,16 @@ import type { DataTableColumn } from "@multiplatform.one/table";
 import { ArrowsClockwiseIcon, PlusIcon } from "@phosphor-icons/react";
 import React, { useState, useMemo, useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { SearchInput, Spinner } from "@multiplatform.one/forms";
-import { Button, Text, View, XStack, YStack, isWeb, useTheme, type YStackProps } from "tamagui";
+import { Button, SearchInput, Spinner } from "@multiplatform.one/forms";
+import { Text, View, XStack, YStack, isWeb, useTheme, type YStackProps } from "tamagui";
 import { SavedFilterDropdown, useSavedFilters, type ParsedFilter } from "@multiplatform.one/table";
 import { Avatar, ViewSwitcher } from "@multiplatform.one/components";
-import {
-  MIN_PRESS_TARGET,
-  pressTargetHitSlop,
-  pressTargetStyle,
-  useResolvedKnobs,
-} from "@multiplatform.one/theme";
+import { pressTargetStyle, useResolvedKnobs } from "@multiplatform.one/theme";
 import { storage } from "@multiplatform.one/store";
 import { useFrappeConfig } from "./FrappeProvider";
 import { FrappeList } from "./FrappeList";
 import { FrappeTable } from "./FrappeTable";
 
-// DG-LAY-04 / D-02 press-floor: the chromeless $2 refresh button paints
-// ~28×28; the press box is floored at 44 via the house pressTarget* channel
-// (grown transparent box + negative outset + hitSlop). The horizontal outset
-// (8px) stays under the toolbar gap, so the enlarged target never reaches the
-// adjacent Add button's box.
-const REFRESH_VISUAL = 28;
-const REFRESH_OUTSET = Math.ceil((MIN_PRESS_TARGET - REFRESH_VISUAL) / 2);
-const refreshPressFloorProps = {
-  ...pressTargetStyle(),
-  marginVertical: -REFRESH_OUTSET,
-  marginHorizontal: -REFRESH_OUTSET,
-  hitSlop: pressTargetHitSlop(REFRESH_VISUAL),
-} as const;
-
 interface ListFieldConfig {
   key: string;
   label?: string;
@@ -164,6 +145,8 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
   const connectionConfig = {
     baseURL: finalBaseURL,
     socketPort: config?.socketPort,
+    siteName: config?.siteName,
+    socketBaseURL: config?.socketBaseURL,
     auth: finalAuth,
     syncOptions: finalSyncOptions,
     fixtures: config?.fixtures,
@@ -482,13 +465,18 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
         </XStack>
 
         <XStack alignItems="center" {...knobProps.gap}>
+          {/* LC-54 (amendment 2026-08-13): house Button, own-box floor — the
+              raw tamagui Button + grown transparent target painted its hover
+              fill across the escaped 44px floor. `circular` makes the painted
+              box ITSELF the 44×44 control (box-is-control mechanism), so
+              feedback stays inside its own layout slot. */}
           <Button
             size="$2"
+            circular
             chromeless
             icon={ArrowsClockwiseIcon}
             onPress={handleRefresh}
             aria-label={t("Refresh")}
-            {...refreshPressFloorProps}
           />
           {onAdd && (
             <Button

package/src/FrappeProvider.tsx

@@ -20,6 +20,19 @@ export interface FrappeConfig {
    * production reverse proxy that routes `/socket.io` to the SocketIO backend.
    */
   socketPort?: number;
+  /**
+   * Dial the realtime socket at this origin instead of deriving it from
+   * `baseURL` + `socketPort` — for dev servers that proxy `/socket.io` on
+   * their own origin, making the handshake same-origin (e.g. the page origin
+   * in web dev). Wins over `socketPort`. Omit in production.
+   */
+  socketBaseURL?: string;
+  /**
+   * Frappe site name — the Socket.IO namespace realtime must join. Set it
+   * whenever the `baseURL` hostname is not the bench site name (e.g. baseURL
+   * http://127.0.0.1:8000 serving site "localhost").
+   */
+  siteName?: string;
   /** Authentication configuration */
   auth?: {
     /** Whether to use token-based authentication */
@@ -55,6 +68,10 @@ export interface FrappeProviderProps {
   baseURL: string;
   /** Override port for Socket.IO realtime connection (e.g. 9000 in dev). */
   socketPort?: number;
+  /** Dial the realtime socket at this origin (same-origin dev proxy). */
+  socketBaseURL?: string;
+  /** Frappe site name — the Socket.IO namespace realtime must join. */
+  siteName?: string;
   /** Authentication configuration */
   auth?: {
     /** Whether to use token-based authentication */
@@ -99,14 +116,25 @@ export function FrappeProvider({
   children,
   baseURL,
   socketPort,
+  socketBaseURL,
+  siteName,
   auth,
   syncOptions,
   socketOptions,
   fixtures,
 }: FrappeProviderProps) {
   const value = React.useMemo(
-    () => ({ baseURL, socketPort, auth, syncOptions, socketOptions, fixtures }),
-    [baseURL, socketPort, auth, syncOptions, socketOptions, fixtures],
+    () => ({
+      baseURL,
+      socketPort,
+      socketBaseURL,
+      siteName,
+      auth,
+      syncOptions,
+      socketOptions,
+      fixtures,
+    }),
+    [baseURL, socketPort, socketBaseURL, siteName, auth, syncOptions, socketOptions, fixtures],
   );
 
   return <FrappeContext.Provider value={value}>{children}</FrappeContext.Provider>;

package/src/FrappeReportBuilder.tsx

@@ -130,6 +130,8 @@ export function FrappeReportBuilder({
   const connectionConfig = {
     baseURL: finalBaseURL,
     socketPort: config?.socketPort,
+    siteName: config?.siteName,
+    socketBaseURL: config?.socketBaseURL,
     auth: finalAuth,
     syncOptions: finalSyncOptions,
     fixtures: config?.fixtures,