@multiplatform.one/frappe-ui 7.7.6 → 7.10.0

package/src/fields/DateRange/DateRange.spec.tsx

@@ -2,19 +2,16 @@
  * DateRangeField contract specs. The `Date Range` fieldtype composes the forms
  * DateRangePicker, so the adapter's contract is which props survive the hop.
  *
- * One of them does not, and that is pinned here deliberately: `value` and
- * `onChange` are DECLARED on DateRangeFieldProps and then destructured away
- * (`value: _value`, `onChange: _onChange`) instead of being handed to
- * DateRangePicker. The registry feeds `props.value` straight into the adapter,
- * so a saved Date Range never paints and a picked range never emits. These
- * tests describe today's behaviour and will go red the moment someone wires it
- * up — which is the point: that is the signal to update them alongside the fix.
- * Reported on MPO-123.
+ * `value` and `onChange` used to be DECLARED on DateRangeFieldProps and then
+ * destructured away instead of being handed to the picker, so a saved range
+ * never painted and a picked one never emitted (MPO-137, found by the MPO-123
+ * spec pass). Both are now wired, and the range is carried as the two calendar
+ * dates comma-separated — the shape the registry feeds in and reads back.
  */
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { cleanup } from "@testing-library/react";
+import { act, cleanup, fireEvent, waitFor } from "@testing-library/react";
 import type React from "react";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { getFieldComponent, type FieldRenderProps } from "../../fieldRegistry";
 import { DateRangeField } from ".";
 
@@ -27,6 +24,24 @@ const trigger = (container: HTMLElement) =>
 const combobox = (container: HTMLElement) =>
   container.querySelector('[data-testid="date-picker-trigger"]');
 
+/**
+ * An enabled day cell in the month the picker opened on. The panel is
+ * portaled, and the wide layout renders the previous month first, so the
+ * range's own month is the LAST calendar panel in the document.
+ */
+function getDayButton(day: number): HTMLButtonElement | undefined {
+  const panels = document.body.querySelectorAll('[data-testid="date-picker-calendar"]');
+  const panel = panels[panels.length - 1];
+  if (!panel) return undefined;
+  return Array.from(panel.querySelectorAll('button, [role="button"]')).find((btn) => {
+    const disabled =
+      btn.hasAttribute("disabled") ||
+      btn.getAttribute("aria-disabled") === "true" ||
+      btn.hasAttribute("data-disabled");
+    return btn.textContent?.trim() === String(day) && !disabled;
+  }) as HTMLButtonElement | undefined;
+}
+
 describe("DateRangeField composes the forms DateRangePicker", () => {
   it("renders a single range trigger, not two date inputs", () => {
     const result = renderWithProviders(<DateRangeField label="Period" />);
@@ -84,21 +99,77 @@ describe("DateRangeField composes the forms DateRangePicker", () => {
   });
 });
 
-describe("DateRangeField value gap (MPO-123)", () => {
+describe("DateRangeField controlled value (MPO-137)", () => {
   it("declares value on its props type", () => {
     // Type-level promise: the adapter advertises a controlled value.
     const props: React.ComponentProps<typeof DateRangeField> = { value: "2026-01-01" };
     expect(props.value).toBe("2026-01-01");
   });
 
-  it("but a controlled value does not reach the control — the trigger stays empty", () => {
+  it("paints a saved range on the trigger rather than the placeholder", () => {
+    const result = renderWithProviders(
+      <DateRangeField label="Period" placeholder="From – To" value="2026-01-01,2026-01-31" />,
+    );
+    expect(trigger(result.container)?.value).toBe("Jan 1, 2026 – Jan 31, 2026");
+  });
+
+  it("paints a range that arrives after mount, without emitting (LC-14)", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <DateRangeField label="Period" value="" onChange={onChange} />,
+    );
+    expect(trigger(result.container)?.value ?? "").toBe("");
+
+    // Late seed: the engine applies create defaults once meta loads.
+    result.rerender(
+      <DateRangeField label="Period" value="2026-01-01,2026-01-31" onChange={onChange} />,
+    );
+    await waitFor(() => {
+      expect(trigger(result.container)?.value).toBe("Jan 1, 2026 – Jan 31, 2026");
+    });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("emits the comma-separated wire string once a range is picked", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <DateRangeField label="Period" value="2026-03-05,2026-03-31" onChange={onChange} />,
+    );
+    await act(async () => {
+      fireEvent.click(trigger(result.container)!);
+    });
+    // The panel opens on the range's own month; in the wide (dual-calendar)
+    // layout that is the LAST panel, the previous month being the first.
+    await waitFor(() => {
+      expect(getDayButton(15)).toBeTruthy();
+    });
+    // A complete range restarts on the next click, so this one only re-anchors.
+    await act(async () => {
+      fireEvent.click(getDayButton(15)!);
+    });
+    expect(onChange).not.toHaveBeenCalled();
+
+    await act(async () => {
+      fireEvent.click(getDayButton(20)!);
+    });
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith("2026-03-15,2026-03-20");
+  });
+
+  it("clearing the range emits the empty wire value", async () => {
+    const onChange = vi.fn();
     const result = renderWithProviders(
-      <DateRangeField label="Period" value="2026-01-01,2026-01-31" />,
+      <DateRangeField label="Period" value="2026-03-05,2026-03-31" onChange={onChange} />,
     );
-    expect(trigger(result.container)?.value).toBe("");
+    await act(async () => {
+      fireEvent.click(
+        result.container.querySelector('[data-testid="date-picker-clear"]') as HTMLElement,
+      );
+    });
+    expect(onChange).toHaveBeenCalledWith("");
   });
 
-  it("and the registry hands that value straight to the adapter, so the drop is on this file", () => {
+  it("the registry hands value and onChange straight to the adapter", () => {
     const Component = getFieldComponent("Date Range")!;
     const element = (Component as Function)({
       value: "2026-01-01,2026-01-31",
@@ -106,6 +177,7 @@ describe("DateRangeField value gap (MPO-123)", () => {
     } as FieldRenderProps) as React.ReactElement<Record<string, any>>;
     expect(element.type).toBe(DateRangeField);
     expect(element.props.value).toBe("2026-01-01,2026-01-31");
+    expect(typeof element.props.onChange).toBe("function");
   });
 });
 

package/src/fields/DateRange/index.tsx

@@ -1,7 +1,9 @@
-import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
+import type { DateRange, FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
 import { DateRangePicker as FormsDateRangePicker } from "@multiplatform.one/forms";
 import type { DeepKeys } from "@tanstack/form-core";
+import { useMemo } from "react";
 import { useProps } from "tamagui";
+import { fromFrappeDateValue, toFrappeDateValue } from "../Date/wire";
 
 export type DateRangeFieldProps<
   TData extends Record<string, unknown> = Record<string, unknown>,
@@ -37,6 +39,39 @@ export type DateRangeFieldProps<
     placeholder?: string;
   };
 
+/**
+ * A `Date Range` is stored as its two ends, comma-separated, and each end is
+ * the same bare `YYYY-MM-DD` a `Date` field writes — so both ends serialize
+ * through the Date field's shared wire body rather than a second local-midnight
+ * parse that could drift from it.
+ */
+const rangeSeparator = ",";
+
+function toPickerDate(value: string | undefined): Date | null {
+  if (!value) return null;
+  const date = fromFrappeDateValue(value, "date");
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+/**
+ * `undefined` stays undefined so uncontrolled (`defaultValue`-only) and
+ * form-bound use keep their semantics: the picker adopts an external value
+ * only when `value` is not undefined.
+ */
+function toPickerRange(value: string | undefined): DateRange | null | undefined {
+  if (value === undefined) return undefined;
+  if (!value) return null;
+  const [start, end] = value.split(rangeSeparator);
+  return { start: toPickerDate(start?.trim()), end: toPickerDate(end?.trim()) };
+}
+
+function toWireValue(range: DateRange | null): string {
+  if (!range?.start) return "";
+  const start = toFrappeDateValue(range.start, "date");
+  if (!range.end) return start;
+  return `${start}${rangeSeparator}${toFrappeDateValue(range.end, "date")}`;
+}
+
 export function DateRangeField<
   TData extends Record<string, unknown> = Record<string, unknown>,
   TName extends string = string,
@@ -47,20 +82,29 @@ export function DateRangeField<
     mode: _mode,
     name,
     onBlur: _onBlur,
-    onChange: _onChange,
+    onChange,
     preserveValue: _preserveValue,
     validators,
     disabled,
-    value: _value,
+    value,
     placeholder,
     ...fieldProps
   } = useProps(props);
 
+  const wireValue = value as string | undefined;
+  const emit = onChange as ((value: string) => void) | undefined;
+  // Memoized so the Date identities are stable across renders: the picker
+  // re-seeds its display state from every new `value` identity, which would
+  // otherwise discard a half-picked range on an unrelated re-render.
+  const rangeValue = useMemo(() => toPickerRange(wireValue), [wireValue]);
+
   return (
     <FormsDateRangePicker
       name={name}
       form={form}
       validators={validators}
+      value={rangeValue}
+      onChange={(range) => emit?.(toWireValue(range))}
       defaultValue={defaultValue}
       label={fieldProps.label}
       labelProps={fieldProps.labelProps}

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/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");
+  });
+});