@multiplatform.one/frappe-ui 6.6.0 → 7.0.0

package/src/fields/Date/typeParity.spec.tsx

@@ -0,0 +1,480 @@
+/**
+ * The web half honours all three Frappe date fieldtypes, and both halves
+ * persist the same bytes for the same pick.
+ *
+ * The web field used to render ONE date-only calendar whatever the type
+ * (SB-M-617): a `Datetime` dropped its time component from the picker, and a
+ * `Time` rendered EMPTY, because the calendar adopts its value through
+ * `coerceToDate` and `new Date("09:00")` is an Invalid Date. Native, meanwhile,
+ * had just been activated with all three implemented. These cases pin the
+ * three web controls — display, edit, and the exact wire string — and then
+ * drive the SAME pick through both platform halves and assert the emitted
+ * strings are byte-identical, which is the only reason one `wire.ts` body is
+ * worth sharing.
+ *
+ * The suite runs on web, so the native half's two native-only edges are mocked
+ * exactly as `nativePresentation.spec.tsx` mocks them: the OS picker (recorded
+ * rather than rendered) and the platform flags. The web half imports neither.
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+// Same cold-fork budget as the sibling Date specs: the first field-module
+// import transforms the whole fields graph.
+vi.setConfig({ testTimeout: 240_000 });
+
+const mockState = vi.hoisted(() => ({
+  isIos: true,
+  isAndroid: false,
+  /** Props of every mounted OS picker, newest last. */
+  picks: [] as Record<string, unknown>[],
+}));
+
+vi.mock("@react-native-community/datetimepicker", () => ({
+  default: (props: Record<string, unknown>) => {
+    mockState.picks.push(props);
+    return null;
+  },
+}));
+
+vi.mock("@multiplatform.one/platform", async (importOriginal) => {
+  const actual = (await importOriginal()) as Record<string, unknown>;
+  const real = actual.platform as Record<string, unknown>;
+  return {
+    ...actual,
+    platform: new Proxy(
+      {},
+      {
+        get(_target, prop) {
+          if (prop === "isIos") return mockState.isIos;
+          if (prop === "isAndroid") return mockState.isAndroid;
+          return real[prop as string];
+        },
+      },
+    ),
+  };
+});
+
+// Mock react-native-reanimated to prevent ESM module resolution failures
+// (same shim as tests/fieldRenderers.spec.tsx).
+vi.mock("react-native-reanimated", () => ({
+  default: {
+    useSharedValue: (init: any) => ({ value: init }),
+    useAnimatedStyle: () => ({}),
+    withTiming: (val: any) => val,
+    withSpring: (val: any) => val,
+    createAnimatedComponent: (component: any) => component,
+    runOnJS: (fn: any) => fn,
+    runOnUI: (fn: any) => fn,
+    useDerivedValue: (fn: () => any) => ({ value: fn() }),
+    useAnimatedRef: () => ({ current: null }),
+    Easing: { linear: (v: any) => v, ease: (v: any) => v, bezier: () => (v: any) => v },
+    FadeIn: { duration: () => ({}) },
+    FadeOut: { duration: () => ({}) },
+    Layout: { duration: () => ({}) },
+    Extrapolation: { CLAMP: "clamp" },
+    measure: () => null,
+    scrollTo: () => {},
+    makeMutable: (init: any) => ({ value: init }),
+  },
+  useSharedValue: (init: any) => ({ value: init }),
+  useAnimatedStyle: () => ({}),
+  withTiming: (val: any) => val,
+  withSpring: (val: any) => val,
+  createAnimatedComponent: (component: any) => component,
+  runOnJS: (fn: any) => fn,
+  runOnUI: (fn: any) => fn,
+  useDerivedValue: (fn: () => any) => ({ value: fn() }),
+  useAnimatedRef: () => ({ current: null }),
+  Easing: { linear: (v: any) => v, ease: (v: any) => v, bezier: () => (v: any) => v },
+  FadeIn: { duration: () => ({}) },
+  FadeOut: { duration: () => ({}) },
+  Layout: { duration: () => ({}) },
+}));
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent, waitFor } from "@testing-library/react";
+import React from "react";
+
+const loadWebDateField = async () => (await import(".")).Date;
+const loadNativeDateField = async () => (await import("./index.native")).Date;
+
+/** Intl puts a narrow no-break space before the meridiem; no test should care. */
+const norm = (value: string) => value.replace(/\s+/gu, " ").trim();
+
+const triggerInput = (root: ParentNode) => root.querySelector("input") as HTMLInputElement | null;
+
+/**
+ * Open the panel the way a browser does. FloatingPanel's own opener is
+ * `useClick(..., { event: "mousedown" })` while the DatePicker/DatetimePicker
+ * triggers carry their own `onPress` — TimePicker's trigger carries none, so
+ * a `click`-only test would never open it.
+ */
+async function openPanel(input: Element) {
+  await act(async () => {
+    fireEvent.mouseDown(input);
+    fireEvent.click(input);
+  });
+  await waitFor(
+    () => {
+      if (!document.querySelector('[data-testid="floating-panel-viewport"]')) {
+        throw new Error("panel never opened");
+      }
+    },
+    { timeout: 30_000 },
+  );
+}
+
+const panelText = () =>
+  norm(
+    document.querySelector('[data-testid="floating-panel-viewport"]')?.textContent ??
+      document.body.textContent ??
+      "",
+  );
+
+/** An enabled day cell inside the (portaled) panel. */
+function dayCell(day: number): HTMLButtonElement | undefined {
+  return (
+    Array.from(document.body.querySelectorAll('button, [role="button"]')) as HTMLButtonElement[]
+  ).find((btn) => {
+    const disabled =
+      btn.hasAttribute("disabled") ||
+      btn.getAttribute("aria-disabled") === "true" ||
+      btn.hasAttribute("data-disabled");
+    return btn.textContent?.trim() === String(day) && !disabled;
+  });
+}
+
+/**
+ * Click whatever leaf carries this text, once it exists. The wait is the
+ * point: first paint of this graph is slow on a loaded machine, and a bare
+ * query races it. Clicking the leaf is enough — React bubbles the event to
+ * whichever ancestor owns the handler.
+ */
+async function pressText(root: ParentNode, text: string) {
+  let target: Element | null = null;
+  await waitFor(
+    () => {
+      const node = Array.from(root.querySelectorAll("*")).find(
+        (el) => el.children.length === 0 && norm(el.textContent ?? "") === norm(text),
+      );
+      if (!node) throw new Error(`no element with text "${text}"`);
+      target = node;
+    },
+    { timeout: 30_000 },
+  );
+  await act(async () => {
+    fireEvent.click(target!);
+  });
+}
+
+beforeEach(() => {
+  // Both halves portal their surfaces, so a previous case's chrome would
+  // otherwise still be in the document when the next one queries it.
+  cleanup();
+  mockState.picks.length = 0;
+  mockState.isIos = true;
+  mockState.isAndroid = false;
+});
+
+// ---------------------------------------------------------------------------
+// The web half, one control per type
+// ---------------------------------------------------------------------------
+
+describe("web Date field — type=date keeps the calendar", () => {
+  it("displays its value, opens a month grid, and writes YYYY-MM-DD", async () => {
+    const DateField = await loadWebDateField();
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <DateField label="Due Date" value="2026-03-05" onChange={onChange} type="date" />,
+    );
+
+    expect(triggerInput(result.container)?.value).toBe("Mar 5, 2026");
+
+    await openPanel(triggerInput(result.container)!);
+    expect(panelText()).toContain("Su");
+    // A date-only control offers no clock.
+    expect(panelText()).not.toMatch(/\bHour\b/);
+
+    await waitFor(() => expect(dayCell(15)).toBeTruthy(), { timeout: 30_000 });
+    await act(async () => {
+      fireEvent.click(dayCell(15)!);
+    });
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith("2026-03-15");
+  });
+});
+
+describe("web Date field — type=time renders a time control", () => {
+  it("DISPLAYS an existing HH:mm:ss value (it used to render empty)", async () => {
+    const DateField = await loadWebDateField();
+    const result = renderWithProviders(
+      <DateField label="Reminder" value="09:00:00" onChange={vi.fn()} type="time" />,
+    );
+    // The defect: `coerceToDate("09:00:00")` is null, so the calendar showed
+    // nothing at all for a Time field that had a value.
+    await waitFor(() => expect(norm(triggerInput(result.container)?.value ?? "")).toBe("9:00 AM"), {
+      timeout: 30_000,
+    });
+  });
+
+  it("opens hour/minute columns rather than a month grid", async () => {
+    const DateField = await loadWebDateField();
+    const result = renderWithProviders(
+      <DateField label="Reminder" value="09:00:00" onChange={vi.fn()} type="time" />,
+    );
+    await openPanel(triggerInput(result.container)!);
+    const text = panelText();
+    expect(text).toContain("Hour");
+    expect(text).toContain("Min");
+    expect(text).not.toContain("Su");
+  });
+
+  it("an edit writes the Frappe HH:mm:ss wire shape, seconds included", async () => {
+    const DateField = await loadWebDateField();
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <DateField label="Reminder" value="09:00:00" onChange={onChange} type="time" />,
+    );
+    await openPanel(triggerInput(result.container)!);
+    // 9:00 AM → PM is a deterministic edit with no wheel animation in it.
+    await pressText(document.body, "PM");
+
+    // The control speaks `HH:mm`; the field re-serializes through the shared
+    // wire body, so what persists carries seconds like every other writer.
+    expect(onChange).toHaveBeenCalledWith("21:00:00");
+  });
+
+  it("adopts a seconds-less HH:mm value too (what Frappe hands a fresh field)", async () => {
+    const DateField = await loadWebDateField();
+    const result = renderWithProviders(
+      <DateField label="Reminder" value="14:30" onChange={vi.fn()} type="time" />,
+    );
+    await waitFor(() => expect(norm(triggerInput(result.container)?.value ?? "")).toBe("2:30 PM"), {
+      timeout: 30_000,
+    });
+  });
+});
+
+describe("web Date field — type=datetime renders date AND time", () => {
+  it("displays both halves of its value", async () => {
+    const DateField = await loadWebDateField();
+    const result = renderWithProviders(
+      <DateField
+        label="Starts On"
+        value="2026-03-05 14:30:00"
+        onChange={vi.fn()}
+        type="datetime"
+      />,
+    );
+    // Before the fix this read "Mar 5, 2026" — the time was simply gone.
+    await waitFor(
+      () => {
+        const value = norm(triggerInput(result.container)?.value ?? "");
+        expect(value).toContain("Mar 5, 2026");
+        expect(value).toContain("2:30 PM");
+      },
+      { timeout: 30_000 },
+    );
+  });
+
+  it("offers a time surface as well as the grid", async () => {
+    const DateField = await loadWebDateField();
+    const result = renderWithProviders(
+      <DateField
+        label="Starts On"
+        value="2026-03-05 14:30:00"
+        onChange={vi.fn()}
+        type="datetime"
+      />,
+    );
+    await openPanel(triggerInput(result.container)!);
+    expect(panelText()).toContain("Su");
+    await pressText(document.body, "Time");
+    await waitFor(() => expect(panelText()).toContain("Hour"), { timeout: 30_000 });
+  });
+
+  it("a day change keeps the existing time — and the picker, not the serializer, keeps it", async () => {
+    const DateField = await loadWebDateField();
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <DateField
+        label="Starts On"
+        value="2026-03-05 14:30:00"
+        onChange={onChange}
+        type="datetime"
+      />,
+    );
+    await openPanel(triggerInput(result.container)!);
+    await waitFor(() => expect(dayCell(20)).toBeTruthy(), { timeout: 30_000 });
+    await act(async () => {
+      fireEvent.click(dayCell(20)!);
+    });
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith("2026-03-20 14:30:00");
+  });
+
+  it("a time change writes the new clock (the branch passes no previousValue)", async () => {
+    const DateField = await loadWebDateField();
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <DateField
+        label="Starts On"
+        value="2026-03-05 14:30:00"
+        onChange={onChange}
+        type="datetime"
+      />,
+    );
+    await openPanel(triggerInput(result.container)!);
+    await pressText(document.body, "Time");
+    // 2:30 PM → AM. Carrying `previousValue` here would have pinned the old
+    // 14:30 back over the edit the user just made.
+    await pressText(document.body, "AM");
+    expect(onChange).toHaveBeenLastCalledWith("2026-03-05 02:30:00");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Cross-half parity — the reason one `wire.ts` body is shared
+// ---------------------------------------------------------------------------
+
+/** Drive the native half through a pick and return the single emitted string. */
+async function nativePick(
+  type: "date" | "datetime" | "time",
+  value: string,
+  triggerText: string,
+  steps: Date[],
+): Promise<string> {
+  const DateField = await loadNativeDateField();
+  const onChange = vi.fn();
+  const result = renderWithProviders(
+    <DateField label="Field" value={value} onChange={onChange} type={type} />,
+  );
+  await pressText(result.container, triggerText);
+  await waitFor(() => expect(mockState.picks.length).toBeGreaterThan(0), { timeout: 30_000 });
+
+  for (const [index, step] of steps.entries()) {
+    const onPickerChange = mockState.picks[mockState.picks.length - 1].onChange as (
+      event: unknown,
+      date?: Date,
+    ) => void;
+    await act(async () => {
+      onPickerChange({ type: "set" }, step);
+    });
+    // A datetime runs calendar → Next → wheel; the sheet's Next is the seam.
+    if (index === 0 && steps.length > 1) {
+      await pressText(document.body, "Next");
+      await waitFor(() => expect(mockState.picks[mockState.picks.length - 1].mode).toBe("time"), {
+        timeout: 30_000,
+      });
+    }
+  }
+  await pressText(document.body, "Done");
+
+  expect(onChange).toHaveBeenCalledTimes(1);
+  return onChange.mock.calls[0][0] as string;
+}
+
+/** Drive the web half through the equivalent pick and return the last string. */
+async function webPick(
+  type: "date" | "datetime" | "time",
+  value: string,
+  drive: () => Promise<void>,
+): Promise<string> {
+  const DateField = await loadWebDateField();
+  const onChange = vi.fn();
+  const result = renderWithProviders(
+    <DateField label="Field" value={value} onChange={onChange} type={type} />,
+  );
+  await openPanel(triggerInput(result.container)!);
+  await drive();
+  await waitFor(() => expect(onChange).toHaveBeenCalled(), { timeout: 30_000 });
+  const calls = onChange.mock.calls;
+  return calls[calls.length - 1][0] as string;
+}
+
+describe("web and native persist byte-identical wire strings", () => {
+  it("date — picking Mar 15 writes the same string on both halves", async () => {
+    const web = await webPick("date", "2026-03-05", async () => {
+      await waitFor(() => expect(dayCell(15)).toBeTruthy(), { timeout: 30_000 });
+      await act(async () => {
+        fireEvent.click(dayCell(15)!);
+      });
+    });
+    cleanup();
+    mockState.picks.length = 0;
+    const native = await nativePick("date", "2026-03-05", "Mar 5, 2026", [new Date(2026, 2, 15)]);
+
+    expect({ web, native }).toEqual({ web: "2026-03-15", native: "2026-03-15" });
+    expect(web).toBe(native);
+  });
+
+  it("time — moving 9:00 AM to 9:00 PM writes the same string on both halves", async () => {
+    const web = await webPick("time", "09:00:00", async () => {
+      await pressText(document.body, "PM");
+    });
+    cleanup();
+    mockState.picks.length = 0;
+    const native = await nativePick("time", "09:00:00", "9:00 AM", [
+      new Date(2026, 2, 5, 21, 0, 0),
+    ]);
+
+    expect({ web, native }).toEqual({ web: "21:00:00", native: "21:00:00" });
+    expect(web).toBe(native);
+  });
+
+  it("datetime — moving the day to Mar 20 writes the same string on both halves", async () => {
+    const web = await webPick("datetime", "2026-03-05 14:30:00", async () => {
+      await waitFor(() => expect(dayCell(20)).toBeTruthy(), { timeout: 30_000 });
+      await act(async () => {
+        fireEvent.click(dayCell(20)!);
+      });
+    });
+    cleanup();
+    mockState.picks.length = 0;
+    // The native two-step: the calendar commits the day (dropping the clock,
+    // which is why the wheel step re-supplies it), then the wheel commits it.
+    const native = await nativePick("datetime", "2026-03-05 14:30:00", "Mar 5, 2026, 2:30 PM", [
+      new Date(2026, 2, 20),
+      new Date(2026, 0, 1, 14, 30),
+    ]);
+
+    expect({ web, native }).toEqual({
+      web: "2026-03-20 14:30:00",
+      native: "2026-03-20 14:30:00",
+    });
+    expect(web).toBe(native);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// SB-M-614 — disabled must gate every type's opener
+// ---------------------------------------------------------------------------
+
+describe("web Date field — a disabled field opens nothing, whatever the type", () => {
+  for (const [type, value] of [
+    ["date", "2026-03-05"],
+    ["datetime", "2026-03-05 14:30:00"],
+    ["time", "09:00:00"],
+  ] as const) {
+    it(`type=${type}`, async () => {
+      const DateField = await loadWebDateField();
+      const result = renderWithProviders(
+        <DateField label="Field" value={value} onChange={vi.fn()} type={type} disabled />,
+      );
+      const input = triggerInput(result.container)!;
+      expect(input.getAttribute("aria-disabled")).toBe("true");
+
+      // Both halves of a real click: the trigger's own handler is gated, but
+      // FloatingPanel's opener listens on mousedown and the disabled trigger
+      // is pointerEvents-none, so the press falls through to it.
+      await act(async () => {
+        fireEvent.mouseDown(input);
+        fireEvent.click(input);
+      });
+      await new Promise((resolve) => setTimeout(resolve, 250));
+      expect(document.querySelector('[data-testid="floating-panel-viewport"]')).toBeNull();
+    });
+  }
+});

package/src/fields/Date/types.ts

@@ -0,0 +1,53 @@
+import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import type { DeepKeys } from "@tanstack/form-core";
+
+/**
+ * The public contract for the frappe-ui `Date` field.
+ *
+ * The package exports one `Date`, and the two platform halves
+ * (`index.tsx` / `index.native.tsx`) both satisfy this type, so a consumer
+ * never sees a different prop surface depending on where the code runs. The
+ * type lives in its own module for the same reason `TextEditor` keeps one:
+ * neither half can import it from the other without resolving to itself.
+ */
+export type DateProps<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+> = Omit<
+  FormFieldProps<
+    TData,
+    TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+    unknown,
+    unknown,
+    string
+  >,
+  // "onChange": FormFieldProps carries the DOM ChangeEventHandler from
+  // YStackProps; this field exposes a canonical value callback instead.
+  "children" | "field" | "onChange"
+> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TData,
+        TName extends DeepKeys<TData> ? TName : DeepKeys<TData>,
+        unknown,
+        unknown,
+        string
+      >,
+      "children"
+    >
+  > & {
+    /** Frappe wire value: `YYYY-MM-DD`, `YYYY-MM-DD HH:mm:ss`, or `HH:mm:ss`. */
+    value?: string;
+    onChange?: (value: string) => void;
+    type?: "date" | "datetime" | "time";
+    disabled?: boolean;
+    readOnly?: boolean;
+    skeleton?: boolean;
+    compact?: boolean;
+    /** Overrides the type-derived default ("Select date" / "…time"). */
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    inputProps?: Record<string, unknown>;
+  };

package/src/fields/Date/wire.spec.ts

@@ -131,7 +131,10 @@ describe("toFrappeDateValue — a datetime pick preserves the instant", () => {
     expect(shifted).toEqual({ wire: "2026-08-15 22:00", instantPreserved: false, driftHours: 7 });
   });
 
-  it("keeps an existing time part when only the day was edited (web date-only picker)", () => {
+  // `previousValue` has no shipped caller since the web datetime branch moved
+  // onto a picker that owns the whole value — kept because it is an exported
+  // capability for any date-only writer, and untested capabilities rot.
+  it("keeps an existing time part when a caller says only the day was edited", () => {
     for (const separator of [" ", "T"]) {
       expect(
         inZone("Pacific/Kiritimati", () =>
@@ -153,6 +156,65 @@ describe("toFrappeDateValue — a time pick is a local clock", () => {
   });
 });
 
+describe("toFrappeDateValue delegates without changing a byte", () => {
+  /**
+   * The body this function carried before it moved onto `formatCalendarDate`
+   * in `@multiplatform.one/theme`, pasted verbatim. Consolidating the repo's
+   * date serializers was a de-duplication, not a behavior change, and this is
+   * what makes that claim checkable rather than asserted.
+   */
+  function previousBody(
+    date: Date,
+    type: "date" | "datetime" | "time",
+    previousValue?: string,
+  ): string {
+    const pad2 = (n: number) => String(n).padStart(2, "0");
+    const datePart = `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
+    const timePart = `${pad2(date.getHours())}:${pad2(date.getMinutes())}:${pad2(date.getSeconds())}`;
+    if (type === "time") return timePart;
+    if (type === "datetime") {
+      return `${datePart} ${previousValue?.trim().split(/[ T]/)[1] ?? timePart}`;
+    }
+    return datePart;
+  }
+
+  // Every `previousValue` the web half can hand the datetime branch, including
+  // the shapes with no time part at all (where the pick's own clock is used).
+  const CARRIED = [
+    undefined,
+    "",
+    "2026-03-05",
+    "2026-03-05 14:30:00",
+    "2026-03-05T14:30:00",
+    "2026-03-05 14:30:00.123456",
+    "  2026-03-05 09:00:00  ",
+  ];
+
+  it("emits the identical string for every pick, shape and carried value", () => {
+    const disagreements: unknown[] = [];
+    for (const timeZone of ZONES) {
+      inZone(timeZone, () => {
+        for (const make of [
+          () => new Date(2026, 7, 15),
+          () => new Date(2026, 7, 15, 18, 30),
+          () => new Date(2026, 7, 15, 15, 0, 0),
+          () => new Date(2026, 0, 5, 9, 8, 7),
+          () => new Date(2026, 11, 31, 23, 59, 59),
+        ]) {
+          for (const type of ["date", "datetime", "time"] as const) {
+            for (const carried of CARRIED) {
+              const was = previousBody(make(), type, carried);
+              const now = toFrappeDateValue(make(), type, carried);
+              if (was !== now) disagreements.push({ timeZone, type, carried, was, now });
+            }
+          }
+        }
+      });
+    }
+    expect(disagreements).toEqual([]);
+  });
+});
+
 describe("fromFrappeDateValue — the read side is local too", () => {
   it("opens a bare YYYY-MM-DD on local midnight in every timezone", () => {
     for (const timeZone of ZONES) {

package/src/fields/Date/wire.ts

@@ -1,15 +1,16 @@
 /**
  * The Date field's Frappe wire contract, in both directions — one body shared
- * by the web half (`index.tsx`) and the native half (`date.native.tsx`), so
+ * by the web half (`index.tsx`) and the native half (`index.native.tsx`), so
  * the same pick persists the same string on either platform.
  *
  * Frappe date fields are timezone-NAIVE: `Date` is a bare calendar date
  * (`YYYY-MM-DD`), `Datetime` is a bare local wall clock
  * (`YYYY-MM-DD HH:mm:ss`), `Time` is a bare clock (`HH:mm:ss`). None carries an
- * offset, and every other writer in the client already builds them from LOCAL
- * parts — `FrappeCalendar` / `FrappeGantt` `toFrappeFieldValue`, backoffice
- * `CalendarView.toFrappeDateValue`. So does the read side here, and so does
- * `parseCalendarDate` in `@multiplatform.one/theme`.
+ * offset, so both directions build from LOCAL parts: the write half through
+ * `formatCalendarDate` and the read half through the local-midnight branch
+ * below, matching `parseCalendarDate` — all three in
+ * `@multiplatform.one/theme`, which is where the repo's one body for this
+ * lives.
  *
  * Serializing through `toISOString()` instead renders the UTC instant, which
  * breaks both halves of that contract: it names the wrong calendar day whenever
@@ -18,30 +19,29 @@
  * whole UTC offset, because the value is then read back as local wall clock.
  */
 
-const pad2 = (n: number) => String(n).padStart(2, "0");
+import { formatCalendarDate } from "@multiplatform.one/theme";
 
 export type FrappeDateFieldType = "date" | "datetime" | "time";
 
 /**
  * Serialize a picked `Date` into the wire shape for the fieldtype.
  *
- * `previousValue` is for pickers that edit only the day: the web half wraps a
- * date-only calendar, so an existing time part survives the edit. The native
- * half picks the time too and passes nothing, in which case the datetime
- * branch uses the picked Date's own local time.
+ * `previousValue` is for a caller whose picker edits only the day, so that an
+ * existing time part survives the edit. NEITHER half passes it any more, and
+ * neither should: both now mount a picker that owns the whole value (the web
+ * datetime branch uses the forms `DatetimePicker`, which preserves an existing
+ * clock across a day change itself), so carrying the old time part here would
+ * overwrite a time the user had just set. It stays on the contract because the
+ * capability is real for a date-only writer, and it stays covered below.
  */
 export function toFrappeDateValue(
   date: Date,
   type: FrappeDateFieldType,
   previousValue?: string,
 ): string {
-  const datePart = `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
-  const timePart = `${pad2(date.getHours())}:${pad2(date.getMinutes())}:${pad2(date.getSeconds())}`;
-  if (type === "time") return timePart;
-  if (type === "datetime") {
-    return `${datePart} ${previousValue?.trim().split(/[ T]/)[1] ?? timePart}`;
-  }
-  return datePart;
+  if (type !== "datetime") return formatCalendarDate(date, type);
+  const carriedTime = previousValue?.trim().split(/[ T]/)[1];
+  return `${formatCalendarDate(date, "date")} ${carriedTime ?? formatCalendarDate(date, "time")}`;
 }
 
 /**

package/src/fields/DynamicLink.tsx

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