@multiplatform.one/forms 7.4.1 → 7.6.0

package/src/fields/ImageField/index.tsx

@@ -2,11 +2,17 @@
  * ImageField — Frappe Attach Image: one preview frame that attaches, replaces,
  * and drops; Remove is a sibling action. LC-71: keyboard ring on the frame
  * (outer painted box) and a second ring on Remove — never on the hidden input.
+ *
+ * R11 (RULINGS-2026-08-28): the preview is a live-media tile. No status pip
+ * on the media. State chrome (Remove) lives outside the tile, or the tile is
+ * replaced wholesale (broken-load fallback). Radius stays UNCLAMPED — spread
+ * the borderRadius fragment, never clampRadiusForControl / containerRadius.
  */
 
 import { ImageSquareIcon, XIcon } from "@phosphor-icons/react";
 import {
   ensureFocusVisibleRing,
+  ensureKeyboardModalityTracking,
   wasKeyboardFocus,
   type DisabledSurfaceProps,
   type KnobProps,
@@ -20,8 +26,8 @@ import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fie
 import { Skeleton } from "../../Skeleton";
 import { t } from "../../shared/t";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
+import { useIsInTableCell } from "../../shared/tableCellContext";
 import {
-  clampRadiusForControl,
   getFieldError,
   mergeFieldHandler,
   useFormField,
@@ -102,13 +108,7 @@ type ImageControlProps = {
   showRemove: boolean;
   placeholder?: string;
   objectFit: NonNullable<ImageFieldProps["objectFit"]>;
-  cappedRadius: string | number;
-  borderWidth: number;
-  outlined: boolean;
-  elevation: KnobProps["elevation"];
-  transition: KnobProps["transition"];
-  body: KnobProps["body"];
-  gap?: KnobProps["gap"];
+  knobProps: KnobProps;
   disabledSurface?: DisabledSurfaceProps;
   onChange?: (val: string | File | null) => void;
   onChangeProp?: (val: string | File | null) => void;
@@ -145,13 +145,7 @@ function ImageControl({
   showRemove,
   placeholder,
   objectFit,
-  cappedRadius,
-  borderWidth,
-  outlined,
-  elevation,
-  transition,
-  body,
-  gap,
+  knobProps,
   disabledSurface,
   onChange,
   onChangeProp,
@@ -161,6 +155,8 @@ function ImageControl({
 }: ImageControlProps) {
   const describedBy = useFieldDescribedBy();
   const fieldA11y = useFieldA11y();
+  const inTableCell = useIsInTableCell();
+  if (typeof document !== "undefined") ensureKeyboardModalityTracking();
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [broken, setBroken] = useState(false);
   const [kbFrameFocus, setKbFrameFocus] = useState(false);
@@ -307,7 +303,9 @@ function ImageControl({
     [canInteract, applyFile],
   );
 
-  const frameBorderWidth = isDragOver && canInteract ? Math.max(borderWidth, 2) : borderWidth;
+  const restBorderWidth = knobProps.inputSurface.borderWidth;
+  const frameBorderWidth =
+    isDragOver && canInteract ? Math.max(restBorderWidth, 2) : restBorderWidth;
   const frameBorderColor =
     errorProp || (isDragOver && canInteract)
       ? errorProp
@@ -320,18 +318,26 @@ function ImageControl({
     typeof label === "string" && label ? t("{{label}}: add image", { label }) : t("Add image");
 
   return (
-    <YStack alignItems="flex-start" {...(gap ?? { gap: "$2" })}>
+    <YStack alignItems="flex-start" {...knobProps.gap}>
       <ImageFrame
         id={id}
+        data-media-tile=""
+        data-radius-class="R-SCALE"
+        data-radius-unclamped=""
         width={imageWidth}
         height={imageHeight}
-        borderRadius={cappedRadius}
+        {...knobProps.borderRadius}
+        {...knobProps.inputSurface}
         borderStyle={hasPreview ? "solid" : "dashed"}
         borderWidth={frameBorderWidth}
         borderColor={frameBorderColor}
-        backgroundColor={outlined || hasPreview ? "transparent" : formInputColors.background.base}
-        elevation={elevation}
-        transition={transition}
+        backgroundColor={
+          inTableCell || knobProps.outlined || hasPreview
+            ? "transparent"
+            : formInputColors.background.base
+        }
+        elevation={inTableCell ? undefined : knobProps.elevation}
+        transition={knobProps.transition}
         {...(disabled ? disabledSurface : undefined)}
         aria-required={required || undefined}
         aria-invalid={!!errorProp || undefined}
@@ -380,7 +386,12 @@ function ImageControl({
           <View alignItems="center" justifyContent="center" gap="$1" padding="$1">
             <ImageSquareIcon size={iconSize} color="var(--color11)" />
             {showCaption ? (
-              <Text {...body} color={formCommonColors.muted} textAlign="center" numberOfLines={2}>
+              <Text
+                {...knobProps.body}
+                color={formCommonColors.muted}
+                textAlign="center"
+                numberOfLines={2}
+              >
                 {hasValue && broken ? t("Image failed to load") : caption}
               </Text>
             ) : hasValue && broken ? (
@@ -410,7 +421,7 @@ function ImageControl({
         )}
       </ImageFrame>
 
-      {showRemove && hasValue && canInteract && (
+      {showRemove && hasValue && canInteract && !inTableCell && (
         <Button
           chromeless
           size="$2"
@@ -459,7 +470,6 @@ export function ImageField({
     compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
-  const cappedRadius = clampRadiusForControl(knobProps.borderRadius.borderRadius, 6);
   const [validationError, setValidationError] = useState<string | undefined>();
 
   if (skeleton) {
@@ -483,13 +493,7 @@ export function ImageField({
     showRemove,
     placeholder,
     objectFit,
-    cappedRadius,
-    borderWidth: (knobProps.borderRadius.borderWidth as number | undefined) ?? 1,
-    outlined: knobProps.outlined,
-    elevation: knobProps.elevation,
-    transition: knobProps.transition,
-    body: knobProps.body,
-    gap: knobProps.gap,
+    knobProps,
     disabledSurface: disabled ? disabledState.surfaceKnobProps : undefined,
     onChangeProp,
     onValueChange,

package/src/fields/Input/Input.copy.spec.tsx

@@ -0,0 +1,113 @@
+import { fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { SIZE_RECIPE_TOKENS, sizeRecipeForToken } from "@multiplatform.one/theme";
+import { Input } from "./index";
+
+function copyOf(container: HTMLElement) {
+  return container.querySelector("[aria-label='Copy to clipboard']") as HTMLElement | null;
+}
+
+describe("Input copy (CopyField slot)", () => {
+  it("copy is a real tab stop and rings its own glyph, not the 44px box", () => {
+    const result = renderWithProviders(
+      <Input copy readOnly label="API token" value="mpo_live_4f2a9c81e0b3" />,
+    );
+    const input = result.container.querySelector("input") as HTMLInputElement;
+    const copy = copyOf(result.container);
+    if (!input || !copy) throw new Error("input or copy not found");
+
+    expect(input.getAttribute("aria-readonly")).toBe("true");
+    expect(copy.getAttribute("tabindex")).toBe("0");
+    expect(copy.className).toMatch(/mp-chip-dismiss/);
+    expect(copy.className).not.toMatch(/mp-chip-dismiss-ring/);
+    const ring = copy.querySelector(".mp-chip-dismiss-ring");
+    expect(ring).not.toBeNull();
+    expect(copy.contains(ring)).toBe(true);
+
+    const extraStops = [...result.container.querySelectorAll("[tabindex='0']")].filter(
+      (el) => el !== input && el !== copy,
+    );
+    expect(extraStops).toHaveLength(0);
+    expect(result.container.querySelector(".mp-composite-ring")).toBeTruthy();
+  });
+
+  it("empty omits the cap so there is one tab stop", () => {
+    const result = renderWithProviders(<Input copy readOnly label="Webhook URL" value="" />);
+    expect(copyOf(result.container)).toBeNull();
+    const input = result.container.querySelector("input") as HTMLInputElement;
+    expect(input).not.toBeNull();
+    const stops = [...result.container.querySelectorAll("[tabindex='0']")].filter(
+      (el) => el !== input,
+    );
+    expect(stops).toHaveLength(0);
+  });
+
+  it("disabled keeps geometry and drops the second tab stop", () => {
+    const result = renderWithProviders(
+      <Input copy readOnly disabled label="API token" value="mpo_live_4f2a9c81e0b3" />,
+    );
+    const copy = copyOf(result.container);
+    if (!copy) throw new Error("copy missing when disabled");
+    expect(copy.getAttribute("data-end-cap")).toBe("44");
+    expect(copy.getAttribute("tabindex")).toBe("-1");
+  });
+
+  it("default size stays 44 tall with the copy cap present", () => {
+    const result = renderWithProviders(
+      <Input copy readOnly label="API token" value="mpo_live_4f2a9c81e0b3" />,
+    );
+    const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+    const copy = copyOf(result.container);
+    if (!box || !copy) throw new Error("box or copy not found");
+    expect(box.getAttribute("data-visual-height")).toBe("44");
+    expect(copy.getAttribute("data-end-cap")).toBe("44");
+  });
+
+  it("copy cap tracks the size recipe at every step", () => {
+    for (const token of SIZE_RECIPE_TOKENS) {
+      if (token === "$true") continue;
+      const height = sizeRecipeForToken(token).height;
+      const result = renderWithProviders(
+        <Input copy readOnly label="API token" value="secret" size={token} />,
+      );
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      const copy = copyOf(result.container);
+      if (!box || !copy) throw new Error(`anatomy missing at ${token}`);
+      expect(box.getAttribute("data-visual-height"), token).toBe(String(height));
+      expect(copy.getAttribute("data-end-cap"), token).toBe(String(height));
+    }
+  });
+
+  it("identifier value rides the mono register", () => {
+    const result = renderWithProviders(
+      <Input copy readOnly label="API token" value="mpo_live_4f2a9c81e0b3" />,
+    );
+    const input = result.container.querySelector("input") as HTMLInputElement;
+    if (!input) throw new Error("input missing");
+    expect(input.getAttribute("data-register")).toBe("identifier");
+  });
+
+  it("pressing copy writes the value to the clipboard", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    vi.stubGlobal("navigator", {
+      ...(typeof navigator !== "undefined" ? navigator : {}),
+      clipboard: { writeText },
+    });
+    const onCopyResult = vi.fn();
+    const result = renderWithProviders(
+      <Input
+        copy
+        readOnly
+        label="API token"
+        value="mpo_live_4f2a9c81e0b3"
+        onCopyResult={onCopyResult}
+      />,
+    );
+    const copy = copyOf(result.container);
+    if (!copy) throw new Error("copy missing");
+    fireEvent.click(copy);
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledWith("mpo_live_4f2a9c81e0b3"));
+    await vi.waitFor(() => expect(onCopyResult).toHaveBeenCalledWith(true));
+  });
+});

package/src/fields/Input/Input.spec.tsx

@@ -1,6 +1,7 @@
 import { act, fireEvent, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
 import { Form } from "../../Form";
 import { TableCellContext } from "../../shared/tableCellContext";
 import { Input } from "./index";
@@ -310,4 +311,60 @@ describe("Input", () => {
       expect(input?.getAttribute("aria-label")).toBe("Search");
     });
   });
+
+  /**
+   * Design-law 100% (MPO-60 Input). Spec: text-and-number anatomy/knobs
+   * boards + knobs-enumerated Part 2b DEFAULT class + F1 ring offset 0 +
+   * R7 label weight 400. jsdom cannot cascade Tamagui CSS, so radius
+   * assertions read `_btlr-*` atoms (same as Button LC-18).
+   */
+  describe("design-law — DEFAULT radius, ring offset 0, label 400", () => {
+    function radiusClasses(el: HTMLElement | null): string[] {
+      return String(el?.className || "")
+        .split(" ")
+        .filter((c) => c.startsWith("_btlr-"));
+    }
+
+    it("declares radius DEFAULT class on the control box", () => {
+      const result = renderWithProviders(<Input label="Name" name="n" />);
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      expect(box.getAttribute("data-radius-class")).toBe("DEFAULT");
+      expect(box.getAttribute("data-radius-part")).toBe("Input");
+    });
+
+    it("rides the DEFAULT radius scale: square at none, $12 at full", () => {
+      const none = renderWithProviders(
+        <Preset overrides={{ borderRadius: "none" }}>
+          <Input label="Name" name="n" />
+        </Preset>,
+      );
+      const noneBox = none.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      expect(radiusClasses(noneBox)).toEqual(["_btlr-t-radius-0"]);
+
+      const full = renderWithProviders(
+        <Preset overrides={{ borderRadius: "full" }}>
+          <Input label="Name" name="n" />
+        </Preset>,
+      );
+      const fullBox = full.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      expect(radiusClasses(fullBox)).toEqual(["_btlr-t-radius-12"]);
+    });
+
+    it("focus ring offset is 0 (F1 / reference §10 / cover-offset-0)", () => {
+      const result = renderWithProviders(<Input label="Name" name="n" />);
+      const box = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      expect(box.getAttribute("data-ring-offset")).toBe("0");
+      expect(document.getElementById("mp-input-field-ring-offset")?.textContent).toContain(
+        "outline-offset: 0",
+      );
+    });
+
+    it("paints the field label at weight 400 (R7 / §6.1)", () => {
+      const result = renderWithProviders(<Input label="Full name" name="n" />);
+      const label = result.container.querySelector("label") as HTMLElement;
+      expect(label).toBeTruthy();
+      const weight = label.style.fontWeight || getComputedStyle(label).fontWeight;
+      expect(["400", "normal"]).toContain(String(weight));
+    });
+  });
 });

package/src/fields/Input/Input.stories.tsx

@@ -1,4 +1,5 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
@@ -22,6 +23,7 @@ const meta: Meta<typeof Input> = {
     compact: { control: "boolean" },
     chromeless: { control: "boolean" },
     labelHidden: { control: "boolean" },
+    copy: { control: "boolean" },
     size: { control: "select", options: ["$3", "$4", "$5"] },
     value: { control: "text" },
     defaultValue: { control: "text" },
@@ -134,6 +136,16 @@ export const ReadOnly: Story = {
   },
 };
 
+export const Copy: Story = {
+  args: {
+    label: "API token",
+    readOnly: true,
+    copy: true,
+    value: "mpo_live_4f2a9c81e0b3",
+    helperText: "Read-only. The value is the identifier register (mono).",
+  },
+};
+
 export const Chromeless: Story = {
   args: {
     label: "Toolbar search",
@@ -148,6 +160,33 @@ export const SkeletonState: Story = {
   args: { label: "Full name", skeleton: true },
 };
 
+type InTableRow = { id: string; label: string; value: string };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: "Jane Doe" },
+      { id: "2", label: "Beta", value: "Alex Chen" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Input",
+        field: "input",
+        fieldProps: { placeholder: "Enter your name" },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};
+
 /**
  * FOREIGN CONTRAST SPECIMEN (LC-56 STORY-HONESTY): the right column renders the
  * RAW tamagui Input beside the house Input strictly so the difference stays