@multiplatform.one/frappe-ui 7.7.4 → 7.8.0

package/src/desk/DeskFormSidebar.tsx

@@ -60,6 +60,7 @@ export function DeskFormSidebar({ doctype, name }: DeskFormSidebarProps) {
             socketBaseURL: config.socketBaseURL,
             auth: config.auth,
             syncOptions: config.syncOptions,
+            realtime: config.realtime,
             fixtures: config.fixtures,
           }
         : undefined,

package/src/desk/DeskShell.tsx

@@ -209,6 +209,7 @@ export function DeskShell({
         {showSidebar && !isNarrow && (
           <YStack
             role="navigation"
+            aria-label={t("Desk navigation")}
             id="desk-sidebar"
             flexShrink={0}
             data-testid="desk-sidebar-rail"
@@ -234,6 +235,7 @@ export function DeskShell({
             />
             <YStack
               role="navigation"
+              aria-label={t("Desk navigation")}
               id="desk-sidebar"
               position="absolute"
               top={0}

package/src/desk/DeskSidebar.tsx

@@ -126,7 +126,12 @@ export function DeskSidebar({ onNavigate, activePath, basePath = "/desk" }: Desk
   const frappeConfig = useMemo<FrappeConnectionConfig | undefined>(
     () =>
       config
-        ? { baseURL: config.baseURL, socketPort: config.socketPort, auth: config.auth }
+        ? {
+            baseURL: config.baseURL,
+            realtime: config.realtime,
+            socketPort: config.socketPort,
+            auth: config.auth,
+          }
         : undefined,
     [config],
   );

package/src/desk/awesomebar.tsx

@@ -101,7 +101,10 @@ async function addRecentSearch(query: string): Promise<void> {
 // Helpers
 // ---------------------------------------------------------------------------
 
-function createHttpClientFromConfig(config: FrappeConnectionConfig): HttpClient {
+function createHttpClientFromConfig(config: {
+  baseURL: string;
+  auth?: FrappeConnectionConfig["auth"];
+}): HttpClient {
   return new HttpClient(
     config.baseURL,
     config.auth as Parameters<typeof HttpClient.prototype.updateAuth>[0],
@@ -145,7 +148,12 @@ export function Awesomebar({ onNavigate, basePath = "/desk", ...stackProps }: Aw
   const frappeConfig = useMemo<FrappeConnectionConfig | undefined>(
     () =>
       config
-        ? { baseURL: config.baseURL, socketPort: config.socketPort, auth: config.auth }
+        ? {
+            baseURL: config.baseURL,
+            realtime: config.realtime,
+            socketPort: config.socketPort,
+            auth: config.auth,
+          }
         : undefined,
     [config],
   );
@@ -163,7 +171,7 @@ export function Awesomebar({ onNavigate, basePath = "/desk", ...stackProps }: Aw
   // HttpClient ref for document search
   const httpRef = useRef<HttpClient | undefined>(undefined);
   const configKeyRef = useRef("");
-  if (config) {
+  if (config?.baseURL) {
     const key = `${config.baseURL}:${config.auth?.token ?? ""}`;
     if (key !== configKeyRef.current) {
       httpRef.current = createHttpClientFromConfig({

package/src/fieldRegistry.ts

@@ -1254,6 +1254,7 @@ function TableAdapter(props: FieldRenderProps) {
         socketBaseURL: config.socketBaseURL,
         auth: config.auth,
         syncOptions: config.syncOptions,
+        realtime: config.realtime,
         fixtures: config.fixtures,
       }
     : undefined;

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

@@ -29,12 +29,10 @@ function readCodeEditorSource() {
   return readFileSync(join(codeEditorDir(), "index.tsx"), "utf8");
 }
 
-function readCodeEditorStories() {
-  return readFileSync(join(codeEditorDir(), "CodeEditor.stories.tsx"), "utf8");
-}
-
 afterEach(cleanup);
 
+vi.mock("@multiplatform.one/storybook", () => ({ action: () => vi.fn() }));
+
 describe("frappeCodeLanguage (stock ControlCode language_map)", () => {
   it("maps stock Frappe options case-insensitively", () => {
     expect(frappeCodeLanguage("Python")).toBe("python");
@@ -102,11 +100,14 @@ describe("CodeEditorField (standalone)", () => {
     expect(result.getTextArea()).toBeNull();
   });
 
-  it("ships CSF3 story objects so native gallery keeps args (KS blank-pane)", () => {
-    const stories = readCodeEditorStories();
-    expect(stories).toMatch(/export const Main = \{/);
-    expect(stories).not.toMatch(/Main\.args\s*=/);
-    expect(stories).toContain("value: PYTHON_FIXTURE");
+  it("ships CSF3 story objects so native gallery keeps args (KS blank-pane)", async () => {
+    const { Main, Json, ReadOnly } = await import("./CodeEditor.stories");
+    for (const story of [Main, Json, ReadOnly]) {
+      expect(typeof story).toBe("object");
+      expect(story.render).toBeTypeOf("function");
+      expect(story.args.value?.trim().length).toBeGreaterThan(0);
+    }
+    expect(ReadOnly.args.readOnly).toBe(true);
   });
 
   it("forwards knob containerRadius onto the source textarea (F14)", () => {

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

@@ -168,6 +168,14 @@ async function pressText(root: ParentNode, text: string) {
   });
 }
 
+async function selectPeriod(period: "AM" | "PM") {
+  const wheel = document.querySelector('[role="slider"][aria-label="AM/PM"]');
+  expect(wheel).toBeTruthy();
+  await act(async () => {
+    fireEvent.keyDown(wheel!, { key: period === "AM" ? "Home" : "End" });
+  });
+}
+
 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.
@@ -194,7 +202,7 @@ describe("web Date field — type=date keeps the calendar", () => {
     await openPanel(triggerInput(result.container)!);
     expect(panelText()).toContain("Su");
     // A date-only control offers no clock.
-    expect(panelText()).not.toMatch(/\bHour\b/);
+    expect(document.querySelector('[role="slider"][aria-label="Hour"]')).toBeNull();
 
     await waitFor(() => expect(dayCell(15)).toBeTruthy(), { timeout: 30_000 });
     await act(async () => {
@@ -226,8 +234,8 @@ describe("web Date field — type=time renders a time control", () => {
     );
     await openPanel(triggerInput(result.container)!);
     const text = panelText();
-    expect(text).toContain("Hour");
-    expect(text).toContain("Min");
+    expect(document.querySelector('[role="slider"][aria-label="Hour"]')).toBeTruthy();
+    expect(document.querySelector('[role="slider"][aria-label="Min"]')).toBeTruthy();
     expect(text).not.toContain("Su");
   });
 
@@ -239,11 +247,11 @@ describe("web Date field — type=time renders a time control", () => {
     );
     await openPanel(triggerInput(result.container)!);
     // 9:00 AM → PM is a deterministic edit with no wheel animation in it.
-    await pressText(document.body, "PM");
+    await selectPeriod("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");
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("21:00:00"));
   });
 
   it("adopts a seconds-less HH:mm value too (what Frappe hands a fresh field)", async () => {
@@ -292,7 +300,9 @@ describe("web Date field — type=datetime renders date AND time", () => {
     await openPanel(triggerInput(result.container)!);
     expect(panelText()).toContain("Su");
     await pressText(document.body, "Time");
-    await waitFor(() => expect(panelText()).toContain("Hour"), { timeout: 30_000 });
+    await waitFor(() =>
+      expect(document.querySelector('[role="slider"][aria-label="Hour"]')).toBeTruthy(),
+    );
   });
 
   it("a day change keeps the existing time — and the picker, not the serializer, keeps it", async () => {
@@ -330,8 +340,8 @@ describe("web Date field — type=datetime renders date AND time", () => {
     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");
+    await selectPeriod("AM");
+    await waitFor(() => expect(onChange).toHaveBeenLastCalledWith("2026-03-05 02:30:00"));
   });
 });
 
@@ -412,7 +422,7 @@ describe("web and native persist byte-identical wire strings", () => {
 
   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");
+      await selectPeriod("PM");
     });
     cleanup();
     mockState.picks.length = 0;

package/src/fields/Duration/Duration.spec.tsx

@@ -0,0 +1,73 @@
+/**
+ * Duration adapter contract specs. The Frappe Duration field is seconds in,
+ * seconds out; this file only pins that the hop to forms Duration keeps
+ * value / onChange / disabled / label / error. The segment math lives in
+ * the forms spec.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent } from "@testing-library/react";
+import type React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { getFieldComponent, type FieldRenderProps } from "../../fieldRegistry";
+import { Duration } from ".";
+
+afterEach(cleanup);
+
+const hours = (container: HTMLElement) =>
+  container.querySelector('input[aria-label="Hours"]') as HTMLInputElement | null;
+
+describe("Duration composes the forms Duration", () => {
+  it("paints a controlled seconds value into the hours segment", () => {
+    const result = renderWithProviders(<Duration label="Time" value={7200} onChange={() => {}} />);
+    expect(hours(result.container)?.value ?? hours(result.container)?.getAttribute("value")).toBe(
+      "2",
+    );
+  });
+
+  it("emits seconds through canonical onChange", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(<Duration label="Time" value={3600} onChange={onChange} />);
+    fireEvent.keyDown(hours(result.container) as HTMLInputElement, { key: "ArrowUp" });
+    expect(onChange).toHaveBeenCalledWith(7200);
+  });
+
+  it("forwards disabled onto the hours segment", () => {
+    const result = renderWithProviders(
+      <Duration label="Time" value={3600} disabled onChange={() => {}} />,
+    );
+    const el = hours(result.container);
+    expect(el?.getAttribute("aria-disabled") === "true" || el?.disabled).toBe(true);
+  });
+
+  it("forwards readOnly onto the hours segment", () => {
+    const result = renderWithProviders(
+      <Duration label="Time" value={3600} readOnly onChange={() => {}} />,
+    );
+    const el = result.container.querySelector("input");
+    expect(el?.getAttribute("aria-readonly") === "true" || el?.readOnly).toBe(true);
+  });
+
+  it("shows the label and error", () => {
+    const result = renderWithProviders(
+      <Duration label="Time" value={3600} error="not a duration" onChange={() => {}} />,
+    );
+    expect(result.container.textContent).toContain("Time");
+    expect(result.container.textContent).toContain("not a duration");
+  });
+});
+
+describe("registry resolution (Duration fieldtype)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'Duration' to the Duration adapter and coerces a non-number to 0", () => {
+    const Component = getFieldComponent("Duration")!;
+    const element = (Component as Function)(
+      propsFor({ value: "nope", label: "Time" }),
+    ) as React.ReactElement<Record<string, unknown>>;
+    expect(element.type).toBe(Duration);
+    expect(element.props.value).toBe(0);
+    expect(element.props.label).toBe("Time");
+  });
+});

package/src/fields/FileUpload.tsx

@@ -132,6 +132,7 @@ export function FileUpload({
         socketBaseURL: config?.socketBaseURL,
         auth: auth ?? config?.auth,
         syncOptions: config?.syncOptions,
+        realtime: config?.realtime,
         fixtures: config?.fixtures,
       }
     : undefined;

package/src/fields/Link.tsx

@@ -73,7 +73,12 @@ function useLinkConnection(baseURL?: string, auth?: LinkProps["auth"]) {
   const config = useFrappeConfig();
   const finalBaseURL = baseURL ?? config?.baseURL ?? "";
   const connectionConfig: FrappeConnectionConfig | undefined = finalBaseURL
-    ? { baseURL: finalBaseURL, socketPort: config?.socketPort, auth: auth ?? config?.auth }
+    ? {
+        baseURL: finalBaseURL,
+        realtime: config?.realtime,
+        socketPort: config?.socketPort,
+        auth: auth ?? config?.auth,
+      }
     : undefined;
   return { config, connectionConfig };
 }

package/src/fields/LinkTree.tsx

@@ -53,10 +53,11 @@ export function LinkTree({
             baseURL: finalBaseURL,
             socketPort: config?.socketPort,
             auth: finalAuth,
+            realtime: config?.realtime,
             fixtures: config?.fixtures,
           }
         : undefined,
-    [finalBaseURL, config?.socketPort, finalAuth, config?.fixtures],
+    [finalBaseURL, config?.socketPort, config?.realtime, finalAuth, config?.fixtures],
   );
 
   const { meta } = useDocTypeMeta(connectionConfig, doctype);

package/src/fields/MentionInput/MentionInput.spec.tsx

@@ -0,0 +1,110 @@
+/**
+ * MentionInputField contract specs. The registry hands `value` and `onChange`
+ * straight to this adapter (MentionAdapter in fieldRegistry). The failure
+ * mode of a thin adapter is dropping those two, so a saved comment never
+ * paints and a typed comment never emits (LC-14). Pin the hop.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent } from "@testing-library/react";
+import type React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { getFieldComponent, type FieldRenderProps } from "../../fieldRegistry";
+import { MentionInputField, type MentionValue } from ".";
+
+afterEach(cleanup);
+
+const mentions = [{ trigger: "@", data: [{ id: "u1", display: "Ada" }] }];
+
+const seeded: MentionValue = { text: "hello ada", mentions: [] };
+
+const textarea = (container: HTMLElement) =>
+  container.querySelector("textarea") as HTMLTextAreaElement | null;
+
+describe("MentionInputField composes the forms MentionInput", () => {
+  it("paints a controlled value onto the textarea", () => {
+    const result = renderWithProviders(
+      <MentionInputField label="Comment" mentions={mentions} value={seeded} onChange={() => {}} />,
+    );
+    expect(textarea(result.container)?.value).toBe("hello ada");
+  });
+
+  it("emits a MentionValue through canonical onChange", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <MentionInputField
+        label="Comment"
+        mentions={mentions}
+        value={{ text: "", mentions: [] }}
+        onChange={onChange}
+      />,
+    );
+    await act(async () => {
+      fireEvent.change(textarea(result.container) as HTMLTextAreaElement, {
+        target: { value: "typed" },
+      });
+    });
+    expect(onChange).toHaveBeenCalled();
+    const emitted = onChange.mock.calls.at(-1)?.[0] as MentionValue;
+    expect(emitted.text).toBe("typed");
+    expect(Array.isArray(emitted.mentions)).toBe(true);
+  });
+
+  it("forwards disabled onto the textarea", () => {
+    const result = renderWithProviders(
+      <MentionInputField
+        label="Comment"
+        mentions={mentions}
+        value={seeded}
+        disabled
+        onChange={() => {}}
+      />,
+    );
+    const el = textarea(result.container);
+    expect(el?.disabled || el?.getAttribute("aria-disabled") === "true").toBe(true);
+  });
+
+  it("forwards readOnly onto the textarea", () => {
+    const result = renderWithProviders(
+      <MentionInputField
+        label="Comment"
+        mentions={mentions}
+        value={seeded}
+        readOnly
+        onChange={() => {}}
+      />,
+    );
+    const el = textarea(result.container);
+    expect(el?.readOnly || el?.getAttribute("aria-readonly") === "true").toBe(true);
+  });
+
+  it("shows the label and error", () => {
+    const result = renderWithProviders(
+      <MentionInputField
+        label="Comment"
+        mentions={mentions}
+        value={seeded}
+        error="too short"
+        onChange={() => {}}
+      />,
+    );
+    expect(result.container.textContent).toContain("Comment");
+    expect(result.container.textContent).toContain("too short");
+  });
+});
+
+describe("registry resolution (Mention fieldtype)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'Mention' to MentionInputField and hands value through", () => {
+    const Component = getFieldComponent("Mention")!;
+    expect(Component).toBeTruthy();
+    const element = (Component as Function)(
+      propsFor({ value: "hello ada", label: "Comment" }),
+    ) as React.ReactElement<Record<string, unknown>>;
+    expect(element.type).toBe(MentionInputField);
+    expect(element.props.value).toBe("hello ada");
+    expect(element.props.label).toBe("Comment");
+  });
+});

package/src/fields/MentionInput/index.tsx

@@ -79,7 +79,8 @@ export function MentionInputField<
     _preserveValue,
     validators,
     disabled,
-    _value,
+    value,
+    onChange,
     mentions,
     placeholder,
     onMentionSelect,
@@ -103,6 +104,8 @@ export function MentionInputField<
       id={fieldProps.id}
       size={fieldProps.size}
       disabled={disabled}
+      value={value}
+      onChange={onChange}
       mentions={mentions ?? []}
       placeholder={placeholder}
       onMentionSelect={onMentionSelect}

package/src/fields/Password/index.tsx

@@ -45,7 +45,7 @@ export type PasswordProps<
     unknown,
     string
   >,
-  "children" | "field"
+  "children" | "field" | "onChange"
 > &
   Partial<
     Omit<

package/src/fields/Progress/Progress.spec.tsx

@@ -57,6 +57,15 @@ describe("ProgressField chrome", () => {
     expect(container.firstElementChild).toBeTruthy();
     expect(container.textContent).toContain("Completion");
   });
+
+  it("forwards the controlled value onto the progressbar", () => {
+    const { container } = renderWithProviders(
+      <ProgressField label="Completion" value={65} max={100} />,
+    );
+    expect(container.querySelector("[role='progressbar']")?.getAttribute("aria-valuenow")).toBe(
+      "65",
+    );
+  });
 });
 
 /**

package/src/fields/RadioGroup/RadioGroup.spec.tsx

@@ -0,0 +1,93 @@
+/**
+ * RadioGroupField contract specs. The adapter maps `onChange` onto the forms
+ * RadioGroup's `onValueChange`. Pin that value, onChange, disabled, label
+ * and error survive the hop.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent } from "@testing-library/react";
+import type React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { getFieldComponent, type FieldRenderProps } from "../../fieldRegistry";
+import { RadioGroupField } from ".";
+
+afterEach(cleanup);
+
+const options = [
+  { label: "Red", value: "red" },
+  { label: "Blue", value: "blue" },
+];
+
+const radios = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll('[role="radio"]')) as HTMLElement[];
+
+describe("RadioGroupField composes the forms RadioGroup", () => {
+  it("paints a controlled value onto the matching radio", () => {
+    const result = renderWithProviders(
+      <RadioGroupField label="Color" value="blue" options={options} onChange={() => {}} />,
+    );
+    const all = radios(result.container);
+    const checked = all.find((el) => el.getAttribute("aria-checked") === "true");
+    expect(checked).toBeTruthy();
+    // option order is Red, Blue — the disc itself has no text
+    expect(checked).toBe(all[1]);
+  });
+
+  it("emits the option value through canonical onChange", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <RadioGroupField label="Color" value="red" options={options} onChange={onChange} />,
+    );
+    const blue = radios(result.container).find((el) => (el.textContent || "").includes("Blue"));
+    expect(blue || radios(result.container)[1]).toBeTruthy();
+    await act(async () => {
+      fireEvent.click(blue ?? radios(result.container)[1]);
+    });
+    expect(onChange).toHaveBeenCalledWith("blue");
+  });
+
+  it("forwards disabled onto the radios", () => {
+    const result = renderWithProviders(
+      <RadioGroupField label="Color" value="red" options={options} disabled onChange={() => {}} />,
+    );
+    const el = radios(result.container)[0];
+    expect(el?.getAttribute("aria-disabled") === "true" || el?.hasAttribute("disabled")).toBe(true);
+  });
+
+  it("shows the label and error", () => {
+    const result = renderWithProviders(
+      <RadioGroupField
+        label="Color"
+        value="red"
+        options={options}
+        error="pick one"
+        onChange={() => {}}
+      />,
+    );
+    expect(result.container.textContent).toContain("Color");
+    expect(result.container.textContent).toContain("pick one");
+  });
+});
+
+describe("registry resolution (Radio fieldtype)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'Radio' to RadioGroupField and splits df.options on newlines", () => {
+    const Component = getFieldComponent("Radio")!;
+    const element = (Component as Function)(
+      propsFor({
+        value: "Red",
+        label: "Color",
+        fieldMeta: { options: "Red\nBlue" },
+      } as Partial<FieldRenderProps>),
+    ) as React.ReactElement<Record<string, unknown>>;
+    expect(element.type).toBe(RadioGroupField);
+    expect(element.props.value).toBe("Red");
+    expect(element.props.label).toBe("Color");
+    expect(element.props.options).toEqual([
+      { label: "Red", value: "Red" },
+      { label: "Blue", value: "Blue" },
+    ]);
+  });
+});

package/src/fields/Signature/Signature.spec.tsx

@@ -0,0 +1,105 @@
+/**
+ * Signature adapter contract specs. The Frappe Signature field stores a
+ * data URL; this adapter must hand value / onChange / disabled / label /
+ * error to the forms Signature pad. Drawing lives in the forms spec.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent } from "@testing-library/react";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { getFieldComponent, type FieldRenderProps } from "../../fieldRegistry";
+import type React from "react";
+import { Signature } from ".";
+
+function encodeSignature(strokes: number[][][]): string {
+  const json = JSON.stringify({ v: 2, s: strokes });
+  return `data:application/json;base64,${btoa(json)}`;
+}
+
+const inkedValue = encodeSignature([
+  [
+    [0.1, 0.2, 0.5],
+    [0.4, 0.3, 0.5],
+    [0.7, 0.25, 0.5],
+  ],
+]);
+
+function getPad(container: HTMLElement): HTMLElement {
+  const label = container.querySelector("label[for]") as HTMLLabelElement | null;
+  const id = label?.htmlFor;
+  const pad = id ? (container.querySelector(`#${CSS.escape(id)}`) as HTMLElement | null) : null;
+  if (!pad) throw new Error("signature pad not found");
+  return pad;
+}
+
+beforeAll(() => {
+  HTMLCanvasElement.prototype.getContext = vi.fn(() => ({
+    clearRect: vi.fn(),
+    beginPath: vi.fn(),
+    moveTo: vi.fn(),
+    lineTo: vi.fn(),
+    stroke: vi.fn(),
+    fillRect: vi.fn(),
+    drawImage: vi.fn(),
+  })) as unknown as typeof HTMLCanvasElement.prototype.getContext;
+});
+
+afterEach(cleanup);
+
+describe("Signature composes the forms Signature", () => {
+  it("paints a controlled value as a signed pad", () => {
+    const result = renderWithProviders(
+      <Signature label="Sign here" value={inkedValue} onChange={() => {}} />,
+    );
+    expect(getPad(result.container).getAttribute("data-signed")).toBe("true");
+  });
+
+  it("emits an empty string through canonical onChange on Delete", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <Signature label="Sign here" value={inkedValue} onChange={onChange} />,
+    );
+    const pad = getPad(result.container);
+    fireEvent.focus(pad);
+    fireEvent.keyDown(pad, { key: "Delete" });
+    expect(onChange).toHaveBeenCalledWith("");
+  });
+
+  it("forwards readOnly onto the pad", () => {
+    const result = renderWithProviders(
+      <Signature label="Sign here" value={inkedValue} readOnly onChange={() => {}} />,
+    );
+    expect(getPad(result.container).getAttribute("aria-readonly")).toBe("true");
+  });
+
+  it("forwards disabled onto the pad", () => {
+    const result = renderWithProviders(
+      <Signature label="Sign here" value={inkedValue} disabled onChange={() => {}} />,
+    );
+    const pad = getPad(result.container);
+    expect(pad.getAttribute("aria-disabled") === "true" || pad.hasAttribute("disabled")).toBe(true);
+  });
+
+  it("shows the label and error", () => {
+    const result = renderWithProviders(
+      <Signature label="Sign here" value="" error="signature required" onChange={() => {}} />,
+    );
+    expect(result.container.textContent).toContain("Sign here");
+    expect(result.container.textContent).toContain("signature required");
+  });
+});
+
+describe("registry resolution (Signature fieldtype)", () => {
+  function propsFor(overrides: Partial<FieldRenderProps> = {}): FieldRenderProps {
+    return { value: "", onChange: () => {}, ...overrides };
+  }
+
+  it("resolves 'Signature' to the Signature adapter and hands value through", () => {
+    const Component = getFieldComponent("Signature")!;
+    const element = (Component as Function)(
+      propsFor({ value: inkedValue, label: "Sign here" }),
+    ) as React.ReactElement<Record<string, unknown>>;
+    expect(element.type).toBe(Signature);
+    expect(element.props.value).toBe(inkedValue);
+    expect(element.props.label).toBe("Sign here");
+  });
+});