@multiplatform.one/frappe-ui 6.6.0 → 7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/frappe-ui",
-  "version": "6.6.0",
+  "version": "7.0.0",
   "description": "Pre-wired Tamagui components for Frappe doctypes with live data",
   "keywords": [
     "cross-platform",
@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@phosphor-icons/react": "^2.1.10",
-    "@tamagui/colors": "2.0.0-rc.41",
+    "@tamagui/colors": "2.7.6",
     "@tanstack/db": "0.6.5",
     "@tanstack/react-hotkeys": "^0.5.1",
     "@tiptap/extension-image": "^3.30.0",
@@ -77,22 +77,22 @@
     "@tiptap/starter-kit": "^3.30.0",
     "html5-qrcode": "^2.3.8",
     "signature_pad": "^5.1.3",
-    "tamagui": "2.0.0-rc.41",
-    "@multiplatform.one/components": "6.6.0",
-    "@multiplatform.one/forms": "6.6.0",
-    "@multiplatform.one/i18n": "6.6.0",
-    "@multiplatform.one/platform": "6.6.0",
-    "@multiplatform.one/router": "6.6.0",
-    "@multiplatform.one/theme": "6.6.0",
-    "@multiplatform.one/desktop": "6.6.0",
-    "@multiplatform.one/rich-text": "6.6.0",
-    "@multiplatform.one/frappe": "6.6.0",
-    "@multiplatform.one/markdown": "6.6.0",
-    "@multiplatform.one/store": "6.6.0",
-    "@multiplatform.one/table": "6.6.0"
+    "tamagui": "2.7.6",
+    "@multiplatform.one/components": "7.0.0",
+    "@multiplatform.one/desktop": "7.0.0",
+    "@multiplatform.one/frappe": "7.0.0",
+    "@multiplatform.one/forms": "7.0.0",
+    "@multiplatform.one/i18n": "7.0.0",
+    "@multiplatform.one/markdown": "7.0.0",
+    "@multiplatform.one/platform": "7.0.0",
+    "@multiplatform.one/rich-text": "7.0.0",
+    "@multiplatform.one/router": "7.0.0",
+    "@multiplatform.one/store": "7.0.0",
+    "@multiplatform.one/table": "7.0.0",
+    "@multiplatform.one/theme": "7.0.0"
   },
   "devDependencies": {
-    "@tamagui/build": "2.0.0-rc.41",
+    "@tamagui/build": "2.7.6",
     "@testing-library/react": "^16.3.2",
     "@types/react": "~19.2.14",
     "@types/react-dom": "^19.2.3",
@@ -102,12 +102,12 @@
     "react-dom": "19.2.5",
     "react-i18next": "^16.6.6",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "6.6.0",
-    "@multiplatform.one/storybook": "6.6.0",
-    "@multiplatform.one/test-utils": "6.6.0"
+    "@multiplatform.one/config": "7.0.0",
+    "@multiplatform.one/storybook": "7.0.0",
+    "@multiplatform.one/test-utils": "7.0.0"
   },
   "peerDependencies": {
-    "@react-native-community/datetimepicker": "^8.0.1",
+    "@react-native-community/datetimepicker": ">=8.0.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-i18next": ">=14",
@@ -128,6 +128,6 @@
   "scripts": {
     "build": "rm -rf dist types 2>/dev/null && tamagui-build --ts-project ./tsconfig.build.json --exclude '\\.spec\\.|\\.test\\.|\\.stories\\.'",
     "test": "vitest run --coverage --coverage.provider=v8 --coverage.reporter=text --coverage.reporter=lcov --coverage.reporter=html",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsgo --noEmit"
   }
 }

package/src/FormSidebar.stories.tsx

@@ -26,7 +26,7 @@ import {
   type SidebarSection,
 } from "./FormSidebar";
 import { FrappeForm } from "./FrappeForm";
-import { FrappeStoryProvider } from "./frappeStoryTarget";
+import { FrappeStoryProvider, LiveToDoGate } from "./frappeStoryTarget";
 
 export default {
   title: "FrappeUI/FormSidebar",
@@ -343,18 +343,92 @@ export const DeskParity = () => {
 // Live bench story — sidebar data plumbing over the live data path
 // ---------------------------------------------------------------------------
 
+/**
+ * Getdoctype-shaped ToDo meta for the fixture fallback, mirroring the bench's
+ * own ToDo (title_field `description`, the Reference section, the two fields
+ * the story hides). Schema mode cannot render without meta, so the documented
+ * "falls back to fixtures when the bench is down" promise needs this entry —
+ * without it the offline story only ever showed a failed meta request.
+ */
+const todoFixtureMeta = {
+  name: "ToDo",
+  doctype: "DocType",
+  module: "Desk",
+  title_field: "description",
+  sort_field: "modified",
+  sort_order: "DESC",
+  fields: [
+    { fieldname: "description_and_status", fieldtype: "Section Break" },
+    {
+      fieldname: "status",
+      fieldtype: "Select",
+      label: "Status",
+      options: "Open\nClosed\nCancelled",
+      in_list_view: 1,
+    },
+    {
+      fieldname: "priority",
+      fieldtype: "Select",
+      label: "Priority",
+      options: "High\nMedium\nLow",
+      in_list_view: 1,
+    },
+    { fieldname: "column_break_2", fieldtype: "Column Break" },
+    { fieldname: "color", fieldtype: "Color", label: "Color" },
+    { fieldname: "date", fieldtype: "Date", label: "Due Date", in_list_view: 1 },
+    { fieldname: "allocated_to", fieldtype: "Link", label: "Allocated To", options: "User" },
+    { fieldname: "description_section", fieldtype: "Section Break" },
+    { fieldname: "description", fieldtype: "Text Editor", label: "Description", reqd: 1 },
+    { fieldname: "section_break_6", fieldtype: "Section Break", label: "Reference" },
+    {
+      fieldname: "reference_type",
+      fieldtype: "Link",
+      label: "Reference Type",
+      options: "DocType",
+      in_list_view: 1,
+    },
+    {
+      fieldname: "reference_name",
+      fieldtype: "Dynamic Link",
+      label: "Reference Name",
+      options: "reference_type",
+    },
+    { fieldname: "column_break_10", fieldtype: "Column Break" },
+    { fieldname: "role", fieldtype: "Link", label: "Role", options: "Role" },
+    { fieldname: "assigned_by", fieldtype: "Link", label: "Assigned By", options: "User" },
+    {
+      fieldname: "assigned_by_full_name",
+      fieldtype: "Read Only",
+      label: "Assigned By Full Name",
+    },
+    { fieldname: "sender", fieldtype: "Data", label: "Sender", options: "Email" },
+    {
+      fieldname: "assignment_rule",
+      fieldtype: "Link",
+      label: "Assignment Rule",
+      options: "Assignment Rule",
+      read_only: 1,
+    },
+  ],
+  permissions: [{ role: "All", read: 1, write: 1 }],
+};
+
 /**
  * Live sidebar plumbing: renders FrappeForm (schema mode + showSidebar)
  * against the real bench ToDo doctype so the sidebar's assignments
  * (`_assign`), shares (DocShare) and metadata reflect realtime changes to
  * the open document in place. The `name` arg selects the document
- * (harnesses pass a real doc name via URL args). Falls back to fixtures
- * when the bench is down.
+ * (harnesses pass a real doc name via URL args). When live with no arg,
+ * LiveToDoGate resolves a real ToDo so the story does not 404 on a
+ * hash-named doctype. Falls back to fixtures when the bench is down —
+ * the `DocType` entry below is what makes the offline branch render a
+ * form rather than a meta error.
  */
 export const Live = (args: { name?: string }) => (
   <FrappeStoryProvider
     fixtures={
       new InMemoryFixtureProvider({
+        DocType: [todoFixtureMeta],
         ToDo: [
           {
             name: "TODO-LIVE-001",
@@ -368,12 +442,16 @@ export const Live = (args: { name?: string }) => (
       })
     }
   >
-    <FrappeForm
-      doctype="ToDo"
-      name={args.name || "TODO-LIVE-001"}
-      showSidebar
-      hideFields={["assigned_by_full_name", "sender"]}
-    />
+    <LiveToDoGate name={args.name}>
+      {(name) => (
+        <FrappeForm
+          doctype="ToDo"
+          name={name}
+          showSidebar
+          hideFields={["assigned_by_full_name", "sender"]}
+        />
+      )}
+    </LiveToDoGate>
   </FrappeStoryProvider>
 );
 Live.args = { name: "" };
@@ -382,7 +460,7 @@ Live.parameters = {
   docs: {
     description: {
       story:
-        "Live sidebar over the real bench: assignments (_assign), shares (DocShare subscription) and metadata update in place when the open ToDo changes on the server. Fixture fallback when the bench is down.",
+        "Live sidebar over the real bench: assignments (_assign), shares (DocShare subscription) and metadata update in place when the open ToDo changes on the server. Opens a real bench ToDo so the live arm is not a 404. Administrator sees live DocShare rows; an ordinary Desk User is refused DocShare (403) and the Shared With section degrades — that is expected, not a product failure. Fixture fallback when the bench is down.",
     },
   },
 };

package/src/FrappeAssignment.tsx

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

package/src/FrappeCalendar.tsx

@@ -9,7 +9,12 @@ import { Spinner } from "@multiplatform.one/forms";
 import React, { useMemo, useCallback, 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";
@@ -64,12 +69,8 @@ export interface FrappeCalendarProps<TDoc extends { name: string; doctype: strin
  */
 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");
 }
 
 /**
@@ -141,6 +142,8 @@ export function FrappeCalendar<TDoc extends { name: string; doctype: string }>({
     () => ({
       baseURL: finalBaseURL,
       socketPort: config?.socketPort,
+      siteName: config?.siteName,
+      socketBaseURL: config?.socketBaseURL,
       auth: finalAuth,
       syncOptions: finalSyncOptions,
       socketOptions: config?.socketOptions,
@@ -149,6 +152,8 @@ export function FrappeCalendar<TDoc extends { name: string; doctype: string }>({
     [
       finalBaseURL,
       config?.socketPort,
+      config?.siteName,
+      config?.socketBaseURL,
       finalAuth,
       finalSyncOptions,
       config?.socketOptions,

package/src/FrappeChartCard.tsx

@@ -16,12 +16,17 @@
  * returns no groups, and a subtle stale dim while a post-event refetch is
  * in flight.
  */
-import { AsyncBoundary, Skeleton, type ChartConfig } from "@multiplatform.one/components";
+import {
+  AsyncBoundary,
+  Skeleton,
+  type ChartCardProps,
+  type ChartConfig,
+} from "@multiplatform.one/components";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Card, YStack, type YStackProps } from "tamagui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { ChartCard, type ChartCardProps } from "./FrappeDashboard";
+import { ChartCard } from "./FrappeDashboard";
 import { useFrappeConfig } from "./FrappeProvider";
 import {
   useFrappeAggregate,
@@ -101,6 +106,8 @@ export function FrappeChartCard({
       ? {
           baseURL: finalBaseURL,
           socketPort: providerConfig?.socketPort,
+          siteName: providerConfig?.siteName,
+          socketBaseURL: providerConfig?.socketBaseURL,
           auth: auth ?? providerConfig?.auth,
           syncOptions: syncOptions ?? providerConfig?.syncOptions,
           fixtures: providerConfig?.fixtures,

package/src/FrappeDashboard.spec.tsx

@@ -0,0 +1,95 @@
+// FrappeDashboard refresh trigger — 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 header slot) whose default hover fill painted the
+// whole escaped 44px floor. The fix migrates it to the house forms Button
+// with `circular`, whose painted box ITSELF is the 44×44 control — feedback
+// stays inside its own reserved layout slot (box-is-control mechanism).
+//
+// jsdom never applies :hover, but tamagui compiles style props into
+// value-carrying atomic classes, so both the escape mechanism (negative
+// margin atoms) and the paint channel are asserted through the atoms each
+// node carries, with a positive control proving the detectors see them.
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { pressTargetStyle } from "@multiplatform.one/theme";
+import { cleanup, screen } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { View } from "tamagui";
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { FrappeDashboard } from "./FrappeDashboard";
+import { FrappeProvider } from "./FrappeProvider";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+afterEach(cleanup);
+
+/** The retired anatomy, re-created as the positive control for both detectors. */
+function OldGrownPaintedFloor() {
+  return (
+    <View
+      data-testid="old-anatomy"
+      {...pressTargetStyle()}
+      marginVertical={-8}
+      marginHorizontal={-8}
+      hoverStyle={{ backgroundColor: "$color4" }}
+    />
+  );
+}
+
+// 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)/;
+
+describe("FrappeDashboard refresh press floor (LC-54 amendment)", () => {
+  const renderStatic = () =>
+    renderWithProviders(
+      <FrappeProvider baseURL="https://dashboard.spec.test">
+        <FrappeDashboard title="Sales" widgets={[]} />
+      </FrappeProvider>,
+    );
+
+  it("positive control: the detectors see the retired grown painted anatomy", () => {
+    renderWithProviders(<OldGrownPaintedFloor />);
+    const oldFloor = screen.getByTestId("old-anatomy");
+    expect(oldFloor.className).toMatch(negativeMarginAtom);
+    expect(oldFloor.className).toMatch(paintedStateAtom);
+  });
+
+  it("renders the refresh trigger as a role=button with its accessible name", () => {
+    const { container } = renderStatic();
+    const refresh = container.querySelector('[aria-label="Refresh"]') as HTMLElement;
+    expect(refresh).not.toBeNull();
+    expect(refresh.getAttribute("role")).toBe("button");
+  });
+
+  it("the refresh floor is its own box — no grown-target negative outset", () => {
+    const { container } = renderStatic();
+    const refresh = container.querySelector('[aria-label="Refresh"]') as HTMLElement;
+    // The house circular Button reserves the 44px floor as REAL layout
+    // (box-is-control); the escape mechanism (negative margins pulling the
+    // grown box over neighbors) 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)", () => {
+    const { container } = renderStatic();
+    const refresh = container.querySelector('[aria-label="Refresh"]') as HTMLElement;
+    // Paint on the OWN box is the sanctioned own-size mechanism — what the
+    // amendment bans is paint on a box that escapes its slot. With the
+    // outset gone (arm above), the house hover fill on this node is legal
+    // and expected; its absence would mean the house Button stopped
+    // owning the feedback.
+    expect(refresh.className).toMatch(paintedStateAtom);
+    expect(refresh.querySelector("svg")).not.toBeNull();
+  });
+});

package/src/FrappeDashboard.tsx

@@ -13,28 +13,9 @@ import {
 import { ArrowsClockwiseIcon } from "@phosphor-icons/react";
 import React, { useMemo, useCallback, useState, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Spinner } from "@multiplatform.one/forms";
-import { Button, Text, XStack, YStack, type YStackProps, H3 } from "tamagui";
-import {
-  formatTimeOfDay,
-  MIN_PRESS_TARGET,
-  pressTargetHitSlop,
-  pressTargetStyle,
-  useResolvedKnobs,
-} from "@multiplatform.one/theme";
-
-// 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). Layout stays put; the
-// only adjacent node is non-interactive text, so no target overlap.
-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;
+import { Button, Spinner } from "@multiplatform.one/forms";
+import { Text, XStack, YStack, type YStackProps, H3 } from "tamagui";
+import { formatTimeOfDay, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useFrappeConfig } from "./FrappeProvider";
 
 /**
@@ -75,6 +56,10 @@ export interface FrappeDashboardProps<TDoc extends { name: string; doctype: stri
 type ConnectionConfig = {
   baseURL: string;
   socketPort?: number;
+  /** Same-origin socket override (see FrappeConfig.socketBaseURL). */
+  socketBaseURL?: string;
+  /** Frappe site name — the realtime Socket.IO namespace. */
+  siteName?: string;
   auth?: FrappeDashboardProps<{ name: string; doctype: string }>["auth"];
   syncOptions?: unknown;
   fixtures?: unknown;
@@ -221,14 +206,20 @@ function LiveDashboardContent<TDoc extends { name: string; doctype: string }>({
                   time: formatTimeOfDay(dataUpdatedAt ?? lastRefresh),
                 })}
               </Text>
+              {/* 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 slot.
+                  `loading` (not bare `disabled`) is the derived busy state. */}
               <Button
                 size="$2"
+                circular
                 icon={ArrowsClockwiseIcon}
                 onPress={onRefresh}
-                disabled={isRefreshing || isLiveLoading}
+                loading={isRefreshing || isLiveLoading}
                 chromeless
                 aria-label={t("Refresh")}
-                {...refreshPressFloorProps}
               />
             </XStack>
           )}
@@ -293,6 +284,8 @@ export function FrappeDashboard<TDoc extends { name: string; doctype: string }>(
       ? {
           baseURL: finalBaseURL,
           socketPort: config?.socketPort,
+          siteName: config?.siteName,
+          socketBaseURL: config?.socketBaseURL,
           auth: finalAuth,
           syncOptions: finalSyncOptions,
           fixtures: config?.fixtures,
@@ -332,14 +325,15 @@ export function FrappeDashboard<TDoc extends { name: string; doctype: string }>(
                   {t("Last updated: {{time}}", { time: formatTimeOfDay(lastRefresh) })}
                 </Text>
               )}
+              {/* LC-54: house Button, own-box floor (see the live-path refresh). */}
               <Button
                 size="$2"
+                circular
                 icon={ArrowsClockwiseIcon}
                 onPress={bumpRefresh}
-                disabled={isRefreshing}
+                loading={isRefreshing}
                 chromeless
                 aria-label={t("Refresh")}
-                {...refreshPressFloorProps}
               />
             </XStack>
           </XStack>
@@ -386,21 +380,6 @@ export function FrappeDashboard<TDoc extends { name: string; doctype: string }>(
   );
 }
 
-export {
-  KPICard,
-  calculateTrend,
-  calculatePercentageChange,
-  aggregateData,
-  type DashboardWidget,
-  type KPICardConfig,
-  type KPICardProps,
-  type ChartConfig,
-  type ChartCardProps,
-  type ChartDataPoint,
-  type ChartType,
-  type TrendDirection,
-} from "@multiplatform.one/components";
-
 /**
  * ChartCard bridge that sanitizes series rows before render: values are
  * coerced to numbers and rows without a finite value (missing, NaN,

package/src/FrappeForm.stories.tsx

@@ -9,7 +9,7 @@ import { Date } from "./fields/Date";
 import { Numeric } from "./fields/Numeric";
 import { FrappeForm } from "./FrappeForm";
 import { FrappeProvider } from "./FrappeProvider";
-import { FrappeStoryProvider } from "./frappeStoryTarget";
+import { FrappeStoryProvider, LiveToDoGate } from "./frappeStoryTarget";
 
 export default {
   title: "FrappeUI/FrappeForm",
@@ -421,54 +421,61 @@ const liveFormFixtures = new InMemoryFixtureProvider({
  * user has dirty are preserved and flagged via the conflict banner;
  * `doc_deleted` for the open doc renders the read-only deleted banner. The
  * `name` arg selects the document (harnesses pass the real doc name via URL
- * args). Falls back to fixtures when the bench is down.
+ * args). When live with no arg, {@link LiveToDoGate} resolves a real ToDo
+ * (TODO-LIVE-001 if present, else the first readable row, else a seeded one)
+ * so the story does not 404 on a hash-named doctype. Falls back to fixtures
+ * when the bench is down.
  */
 export const Live = (args: { name?: string }) => (
   <FrappeStoryProvider fixtures={liveFormFixtures}>
-    <FrappeForm<LiveToDo>
-      doctype="ToDo"
-      name={args.name || "TODO-LIVE-001"}
-      fields={["name", "description", "status", "priority"]}
-      onSave={action("onSave")}
-      onCancel={action("onCancel")}
-    >
-      {({ doc, setValue, errors, disabled }) => (
-        <YStack gap="$3" width={420}>
-          <Data
-            label="Description"
-            value={doc.description || ""}
-            onChange={(v) => setValue("description", v)}
-            error={errors.description}
-            disabled={disabled}
-          />
-          {/* The real ToDo doctype pins 3-option enums; DG-CTRL-01 routes short
-              single choices to RadioGroup, so the live arm composes the honest
-              control instead of tripping `select-too-few-options` at rest. */}
-          <RadioGroupField
-            label="Status"
-            value={doc.status || ""}
-            onChange={(v) => setValue("status", v)}
-            options={[
-              { label: "Open", value: "Open" },
-              { label: "Closed", value: "Closed" },
-              { label: "Cancelled", value: "Cancelled" },
-            ]}
-            disabled={disabled}
-          />
-          <RadioGroupField
-            label="Priority"
-            value={doc.priority || ""}
-            onChange={(v) => setValue("priority", v)}
-            options={[
-              { label: "Low", value: "Low" },
-              { label: "Medium", value: "Medium" },
-              { label: "High", value: "High" },
-            ]}
-            disabled={disabled}
-          />
-        </YStack>
+    <LiveToDoGate name={args.name}>
+      {(name) => (
+        <FrappeForm<LiveToDo>
+          doctype="ToDo"
+          name={name}
+          fields={["name", "description", "status", "priority"]}
+          onSave={action("onSave")}
+          onCancel={action("onCancel")}
+        >
+          {({ doc, setValue, errors, disabled }) => (
+            <YStack gap="$3" width={420}>
+              <Data
+                label="Description"
+                value={doc.description || ""}
+                onChange={(v) => setValue("description", v)}
+                error={errors.description}
+                disabled={disabled}
+              />
+              {/* The real ToDo doctype pins 3-option enums; DG-CTRL-01 routes short
+                  single choices to RadioGroup, so the live arm composes the honest
+                  control instead of tripping `select-too-few-options` at rest. */}
+              <RadioGroupField
+                label="Status"
+                value={doc.status || ""}
+                onChange={(v) => setValue("status", v)}
+                options={[
+                  { label: "Open", value: "Open" },
+                  { label: "Closed", value: "Closed" },
+                  { label: "Cancelled", value: "Cancelled" },
+                ]}
+                disabled={disabled}
+              />
+              <RadioGroupField
+                label="Priority"
+                value={doc.priority || ""}
+                onChange={(v) => setValue("priority", v)}
+                options={[
+                  { label: "Low", value: "Low" },
+                  { label: "Medium", value: "Medium" },
+                  { label: "High", value: "High" },
+                ]}
+                disabled={disabled}
+              />
+            </YStack>
+          )}
+        </FrappeForm>
       )}
-    </FrappeForm>
+    </LiveToDoGate>
   </FrappeStoryProvider>
 );
 Live.args = { name: "" };
@@ -477,7 +484,7 @@ Live.parameters = {
   docs: {
     description: {
       story:
-        "Live ToDo edit form over the real bench: realtime doc_update patches clean fields in place, dirty fields are preserved with an honest conflict banner, doc_deleted renders the read-only deleted state. Fixture fallback when the bench is down.",
+        "Live ToDo edit form over the real bench: realtime doc_update patches clean fields in place, dirty fields are preserved with an honest conflict banner, doc_deleted renders the read-only deleted state. Opens a real bench ToDo (TODO-LIVE-001 when present, else the first readable row / a seeded one) so the live arm is not a 404 on a hash-named doctype. Fixture fallback when the bench is down. DocShare 403 for an ordinary Desk User is expected — the form still renders; Administrator sees live shares.",
     },
   },
 };

package/src/FrappeForm.tsx

@@ -315,11 +315,21 @@ export function FrappeForm<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,
+    ],
   );
 
   // Fetch DocType metadata