@multiplatform.one/forms 7.4.0 → 7.5.0

package/src/fieldDefaults.spec.ts

@@ -1,6 +1,8 @@
 import { describe, expect, it } from "vitest";
 import {
   FIELD_WIDTH_BY_PURPOSE,
+  LABEL_COLUMN_MAX_CH,
+  LABEL_COLUMN_WIDTH,
   fieldWidthStyle,
   isFieldPurpose,
   resolveFieldInputProps,
@@ -18,6 +20,11 @@ describe("FIELD_WIDTH_BY_PURPOSE", () => {
       description: "full",
     });
   });
+
+  it("exposes the shared label column cap as the widest purpose width", () => {
+    expect(LABEL_COLUMN_MAX_CH).toBe(24);
+    expect(LABEL_COLUMN_WIDTH).toBe("min(max-content, 24ch)");
+  });
 });
 
 describe("resolveFieldPurpose", () => {

package/src/fieldDefaults.ts

@@ -18,6 +18,19 @@ export const FIELD_WIDTH_BY_PURPOSE: Record<FieldPurpose, FieldWidth> = {
   description: "full",
 };
 
+/**
+ * Term / side-label column cap (D-desclist, LC-44). Widest purpose width so
+ * the read and edit faces share one label column (`min(max-content, 24ch)`).
+ */
+export const LABEL_COLUMN_MAX_CH = Math.max(
+  ...Object.values(FIELD_WIDTH_BY_PURPOSE).filter(
+    (width): width is number => typeof width === "number",
+  ),
+);
+
+/** CSS track for a shared label column — content-sized, capped at {@link LABEL_COLUMN_MAX_CH}. */
+export const LABEL_COLUMN_WIDTH = `min(max-content, ${LABEL_COLUMN_MAX_CH}ch)` as const;
+
 /** HTML `autocomplete` tokens → purpose keys. */
 const AUTOCOMPLETE_TO_PURPOSE: Record<string, FieldPurpose> = {
   "postal-code": "postalCode",

package/src/fieldLayout.spec.tsx

@@ -219,3 +219,42 @@ describe("FieldLayout banned-error-word DEV warn", () => {
     expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining("banned-error-word"));
   });
 });
+
+describe("FieldLayout design-law (MPO-60)", () => {
+  it("paints the label at weight 400 (R7 / §6.1)", () => {
+    const { container } = renderWithProviders(
+      <FieldLayout id="w" label="Name">
+        <TamaguiInput id="w" />
+      </FieldLayout>,
+    );
+    const label = container.querySelector("label") as HTMLElement;
+    expect(label).toBeTruthy();
+    const weight = label.style.fontWeight || getComputedStyle(label).fontWeight;
+    expect(["400", "normal"]).toContain(String(weight));
+  });
+
+  it("does not pass a control-height sizeToken to the label (LC-73)", () => {
+    const { container } = renderWithProviders(
+      <FieldLayout id="n" label="Name" size="$10">
+        <TamaguiInput id="n" />
+      </FieldLayout>,
+    );
+    const label = container.querySelector("label") as HTMLElement;
+    expect(label).toBeTruthy();
+    const minH = getComputedStyle(label).minHeight;
+    expect(["", "0px", "auto"]).toContain(minH);
+  });
+
+  it("side label row spreads the space recipe, not a raw $3", () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ space: "large", fieldLabelPlacement: "side" }}>
+        <FieldLayout id="s" label="Name">
+          <TamaguiInput id="s" />
+        </FieldLayout>
+      </Preset>,
+    );
+    const row = container.querySelector("[data-label-placement='side'][data-gap]");
+    expect(row).toBeTruthy();
+    expect(row?.getAttribute("data-gap")).toBe("$5");
+  });
+});

package/src/fieldLayout.tsx

@@ -6,8 +6,9 @@ import type { ReactNode } from "react";
 import { createContext, useContext, useEffect, useMemo } from "react";
 import { AccessibilityInfo } from "react-native";
 import type { FontSizeTokens, LabelProps, SizeTokens, YStackProps } from "tamagui";
-import { isWeb, Label, Paragraph, XStack, YStack } from "tamagui";
+import { isWeb, Paragraph, XStack, YStack } from "tamagui";
 import { fieldWidthStyle } from "./fieldDefaults";
+import { Label } from "./Label";
 import {
   formatRequiredMarkSuffix,
   mapHouseRequiredMarking,
@@ -246,19 +247,21 @@ export function FieldLayout({
   // with the token twice and an accessible name spoken twice ("Birth Date
   // Birth Date"). Controls carry the field `id` and an `aria-label` fallback
   // for the label-less case; they must not name themselves when a Label exists.
+  // House Label owns T-LABEL / R7 (weight 400) and must not receive a
+  // control-height sizeToken (LC-73). Required mark is applied once here
+  // via the house `required` prop — do not also suffix children.
   const labelNode = label ? (
     <Label
       id={id ? `${id}-label` : undefined}
       htmlFor={id}
-      size={size || knobProps.sizeToken}
-      {...knobProps.body}
-      color={hasErrorState ? formCommonColors.error : knobProps.textAccentColor}
-      opacity={keepLabelReadable ? 1 : undefined}
+      required={required}
+      requiredMarking={requiredMarkingProp}
+      error={hasErrorState}
+      fontWeight="400"
       flexShrink={sideLabel ? 0 : undefined}
       {...labelProps}
     >
       {label}
-      {requiredSuffix}
     </Label>
   ) : null;
 
@@ -311,9 +314,16 @@ export function FieldLayout({
           onBlur={onBlur}
           data-disabled-style={disabledStyle}
           data-disabled-dimmed={dimWhole ? "true" : "false"}
+          data-label-placement={sideLabel ? "side" : "top"}
         >
           {sideLabel ? (
-            <XStack alignItems="flex-start" gap="$3" width="100%">
+            <XStack
+              alignItems="flex-start"
+              {...knobProps.gap}
+              width="100%"
+              data-label-placement="side"
+              data-gap={String(knobProps.gap.gap)}
+            >
               {labelNode}
               {controlColumn}
             </XStack>

package/src/fields/Barcode/Barcode.spec.tsx

@@ -173,6 +173,36 @@ describe("Barcode", () => {
         />,
       );
       expect(result.container.querySelector('[data-testid="barcode-preview"]')).not.toBeNull();
+      expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).toBeNull();
+    });
+
+    it("draws a QR matrix when formats starts with a qr alias (MPO-53 AC-9)", () => {
+      const result = renderWithProviders(
+        <Barcode
+          label="Code"
+          value="SKU-001234"
+          formats={["qr"]}
+          barcodeIcon={barcodeIcon}
+          scanIcon={scanIcon}
+          stopIcon={stopIcon}
+        />,
+      );
+      expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).not.toBeNull();
+      expect(result.container.querySelector("canvas")).toBeNull();
+    });
+
+    it("draws QR for the Frappe fieldtype qrcode token", () => {
+      const result = renderWithProviders(
+        <Barcode
+          label="QR"
+          value="https://multiplatform.one"
+          formats={["qrcode"]}
+          barcodeIcon={barcodeIcon}
+          scanIcon={scanIcon}
+          stopIcon={stopIcon}
+        />,
+      );
+      expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).not.toBeNull();
     });
 
     it("accepts a formats filter without dropping the scan control", () => {

package/src/fields/Barcode/Barcode.stories.tsx

@@ -187,3 +187,21 @@ export const Filled: Story = {
   },
   render: (args) => <Barcode {...args} {...iconProps} />,
 };
+
+/**
+ * QR format (MPO-53 AC-9): `formats: ["qr"]` restricts the scanner to QR and
+ * the preview draws the same symbology — a real, canvas-free QR matrix from
+ * ./qr, theme ink on theme surface in both schemes. The value here exceeds
+ * Code 128 B's charset on purpose: QR draws what the 1-D strip cannot.
+ */
+export const FilledQr: Story = {
+  args: {
+    label: "QR Code",
+    helperText: "Scan or enter a QR value",
+    value: "https://multiplatform.one",
+    enableScan: true,
+    formats: ["qr"],
+    onChange: action("onChange"),
+  },
+  render: (args) => <Barcode {...args} {...iconProps} />,
+};

package/src/fields/Barcode/BarcodePreview.spec.tsx

@@ -1,7 +1,9 @@
 import { describe, expect, it } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { BarcodePreview } from "./BarcodePreview";
+import { BarcodePreview, barcodePreviewSymbology } from "./BarcodePreview";
 import { countModules, encodeCode128B } from "./code128";
+import { encodeQr } from "./qr";
+import { resolveHtml5FormatIds, resolveNativeBarcodeTypes } from "./scannerTypes";
 
 /** Rebuild the module string ("1" = bar) from the encoder's runs. */
 function toModuleString(value: string): string | null {
@@ -66,3 +68,76 @@ describe("BarcodePreview", () => {
     expect(result.container.textContent).toContain("héllo");
   });
 });
+
+/**
+ * Round trip (MPO-53 AC-9): the symbology the preview DRAWS for a format
+ * token and the format id the scanner RESOLVES for the same token must always
+ * agree — a field can never draw one symbology while scanning another.
+ */
+describe("barcodePreviewSymbology — scanner round trip", () => {
+  const html5Enum = { QR_CODE: 0, CODE_128: 10 };
+
+  it("draws QR for every alias the scanner resolves to qr", () => {
+    for (const alias of ["qr", "qrcode", "qr_code", "QR Code", "QR-CODE"]) {
+      expect(barcodePreviewSymbology(alias)).toBe("qr");
+      expect(resolveNativeBarcodeTypes([alias])).toEqual(["qr"]);
+      expect(resolveHtml5FormatIds([alias], html5Enum)).toEqual([html5Enum.QR_CODE]);
+    }
+  });
+
+  it("draws the Code 128 strip for code128 aliases, resolved identically", () => {
+    for (const alias of ["code128", "code_128", "Code 128"]) {
+      expect(barcodePreviewSymbology(alias)).toBe("code128");
+      expect(resolveNativeBarcodeTypes([alias])).toEqual(["code128"]);
+      expect(resolveHtml5FormatIds([alias], html5Enum)).toEqual([html5Enum.CODE_128]);
+    }
+  });
+
+  it("keeps the historical strip for absent or unknown tokens (never a false qr)", () => {
+    expect(barcodePreviewSymbology(undefined)).toBe("code128");
+    expect(barcodePreviewSymbology("")).toBe("code128");
+    expect(barcodePreviewSymbology("not-a-format")).toBe("code128");
+  });
+});
+
+describe("BarcodePreview — qr format", () => {
+  it("draws the QR matrix canvas-free (labeled image, real module rows)", () => {
+    const result = renderWithProviders(<BarcodePreview value="SKU-001234" format="qr" />);
+    const preview = result.container.querySelector('[data-testid="barcode-preview"]');
+    expect(preview).not.toBeNull();
+    expect(preview?.getAttribute("aria-label")).toContain("SKU-001234");
+    expect(result.container.querySelector("canvas")).toBeNull();
+    const qrMatrix = result.container.querySelector('[data-testid="barcode-preview-qr"]');
+    expect(qrMatrix).not.toBeNull();
+    // One row stack per module row of the real symbol.
+    expect(qrMatrix!.children.length).toBe(encodeQr("SKU-001234")!.size);
+  });
+
+  it("draws QR for the Frappe fieldtype's qrcode token via the shared alias table", () => {
+    const result = renderWithProviders(<BarcodePreview value="SKU-001234" format="qrcode" />);
+    expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).not.toBeNull();
+  });
+
+  it("draws values the 1-D strip cannot encode (the closed asymmetry)", () => {
+    const result = renderWithProviders(<BarcodePreview value="héllo" format="qr" />);
+    expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).not.toBeNull();
+  });
+
+  it("renders nothing for an empty value (host owns the empty state)", () => {
+    const result = renderWithProviders(<BarcodePreview value="" format="qr" />);
+    expect(result.container.querySelector('[data-testid="barcode-preview"]')).toBeNull();
+  });
+
+  it("falls back to honest mono text past version 10 capacity", () => {
+    const long = "x".repeat(214);
+    const result = renderWithProviders(<BarcodePreview value={long} format="qr" />);
+    expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).toBeNull();
+    expect(result.container.textContent).toContain(long);
+  });
+
+  it("keeps the strip for non-qr formats (unchanged behavior)", () => {
+    const result = renderWithProviders(<BarcodePreview value="SKU-001234" format="code128" />);
+    expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).toBeNull();
+    expect(result.container.querySelector('[data-testid="barcode-preview"]')).not.toBeNull();
+  });
+});

package/src/fields/Barcode/BarcodePreview.tsx

@@ -1,31 +1,71 @@
 /**
- * BarcodePreview — draws a value as a real Code 128 symbol using plain Views
+ * BarcodePreview — draws a value as a real barcode symbol using plain Views
  * (cross-platform: no canvas/svg/web-only dependency). Bars use the theme ink
  * on the theme surface, so a scheme flip restyles the preview with the rest
  * of the screen.
  *
- * Containment contract (LC-10): the strip never exceeds its host — width is
- * capped at 100% and bars shrink proportionally (preserving relative module
- * widths) instead of painting past the frame. Hosts bound the height via the
- * `height` prop (table cells keep it under the row height).
+ * Two symbologies, chosen by the `format` prop through the SAME alias table
+ * the scanner resolves with (scannerTypes) so the field never draws one
+ * symbology while scanning another: `qr` renders the 2-D matrix from ./qr,
+ * everything else keeps the 1-D Code 128 strip from ./code128.
+ *
+ * Containment contract (LC-10): the symbol never exceeds its host. The strip
+ * caps width at 100% and bars shrink proportionally (preserving relative
+ * module widths) instead of painting past the frame; the QR square renders at
+ * its natural module size and shrinks uniformly once the `height` bound
+ * clamps it — always square, never letterboxed or clipped. Hosts bound the
+ * height via the `height` prop (table cells keep it under the row height).
  *
  * Honest states: an empty value renders nothing (hosts show their own empty
- * marker); a value Code 128 B cannot encode falls back to the raw value as
- * mono text — never a fake or truncated symbol.
+ * marker); a value the symbology cannot encode (non-ASCII for Code 128 B,
+ * over version 10 capacity for QR) falls back to the raw value as mono text —
+ * never a fake or truncated symbol.
  */
 
-import { Text, View, XStack } from "tamagui";
+import { Text, View, XStack, YStack } from "tamagui";
 import { t } from "../../shared/t";
 import { encodeCode128B } from "./code128";
+import { QR_QUIET_ZONE_MODULES, encodeQr, qrRowRuns } from "./qr";
+import { resolveNativeBarcodeType } from "./scannerTypes";
+
+export type BarcodePreviewSymbology = "qr" | "code128";
+
+/**
+ * Which symbology the preview draws for a consumer format token. Resolves
+ * through scannerTypes' alias table (the round-trip contract: what this
+ * draws, the scanner resolves back to the same format id). Absent or unknown
+ * tokens keep the historical Code 128 strip.
+ */
+export function barcodePreviewSymbology(format?: string): BarcodePreviewSymbology {
+  return resolveNativeBarcodeType(format) === "qr" ? "qr" : "code128";
+}
 
 export interface BarcodePreviewProps {
   value?: string;
-  /** Bar strip height in px — content geometry, bounded by the host. */
+  /**
+   * Symbol height bound in px — content geometry, bounded by the host. The
+   * 1-D strip always fills it; the QR square uses it as a maximum edge.
+   */
   height?: number;
   /** Width of one barcode module in px. */
   moduleWidth?: number;
-  /** Render the human-readable value under the bars. */
+  /** Render the human-readable value under the symbol. */
   showText?: boolean;
+  /**
+   * Consumer format token (e.g. the field's primary `formats` entry). Any
+   * alias of `qr` draws the QR matrix; others draw the Code 128 strip.
+   */
+  format?: string;
+}
+
+/** Mono value text (LC-07 CODE-KNOB-IMMUNE) — both the honest fallback for
+ * unencodable values and the optional human-readable line under the symbol. */
+function MonoValue({ value }: { value: string }) {
+  return (
+    <Text fontFamily="$mono" fontSize="$2" numberOfLines={1} color="$color" flexShrink={1}>
+      {value}
+    </Text>
+  );
 }
 
 export function BarcodePreview({
@@ -33,16 +73,16 @@ export function BarcodePreview({
   height = 18,
   moduleWidth = 1,
   showText = false,
+  format,
 }: BarcodePreviewProps) {
   if (!value) return null;
-  const runs = encodeCode128B(value);
-  if (!runs) {
+  if (barcodePreviewSymbology(format) === "qr") {
     return (
-      <Text fontFamily="$mono" fontSize="$2" numberOfLines={1} color="$color" flexShrink={1}>
-        {value}
-      </Text>
+      <QrPreview value={value} height={height} moduleWidth={moduleWidth} showText={showText} />
     );
   }
+  const runs = encodeCode128B(value);
+  if (!runs) return <MonoValue value={value} />;
   const quietZone = moduleWidth * 10;
   return (
     <View
@@ -76,11 +116,65 @@ export function BarcodePreview({
           />
         ))}
       </XStack>
-      {showText && (
-        <Text fontFamily="$mono" fontSize="$2" numberOfLines={1} color="$color" flexShrink={1}>
-          {value}
-        </Text>
-      )}
+      {showText && <MonoValue value={value} />}
+    </View>
+  );
+}
+
+function QrPreview({
+  value,
+  height,
+  moduleWidth,
+  showText,
+}: {
+  value: string;
+  height: number;
+  moduleWidth: number;
+  showText: boolean;
+}) {
+  const matrix = encodeQr(value);
+  if (!matrix) return <MonoValue value={value} />;
+  // Natural module size until the host's height bound clamps the square —
+  // then every module shrinks uniformly so the symbol stays square (LC-10).
+  const totalModules = matrix.size + 2 * QR_QUIET_ZONE_MODULES;
+  const edge = Math.min(totalModules * moduleWidth, height);
+  const cell = edge / totalModules;
+  const quietZone = cell * QR_QUIET_ZONE_MODULES;
+  const rows = qrRowRuns(matrix);
+  return (
+    <View
+      role="img"
+      aria-label={t("QR code: {{value}}", { value })}
+      testID="barcode-preview"
+      flexDirection="column"
+      alignItems="center"
+      maxWidth="100%"
+      minWidth={0}
+      flexShrink={1}
+      overflow="hidden"
+    >
+      <YStack
+        testID="barcode-preview-qr"
+        width={edge}
+        height={edge}
+        padding={quietZone}
+        backgroundColor="$background"
+        aria-hidden
+      >
+        {rows.map((runs, rowIndex) => (
+          <XStack key={rowIndex} height={cell}>
+            {runs.map((run, runIndex) => (
+              <View
+                key={runIndex}
+                width={run.modules * cell}
+                height="100%"
+                backgroundColor={run.dark ? "$color" : "transparent"}
+              />
+            ))}
+          </XStack>
+        ))}
+      </YStack>
+      {showText && <MonoValue value={value} />}
     </View>
   );
 }

package/src/fields/Barcode/index.tsx

@@ -169,7 +169,15 @@ function BarcodeInput({
           ) : null}
         </InputParts.Box>
         {showPreview ? (
-          <BarcodePreview value={value} height={compact ? 24 : 36} moduleWidth={1} />
+          // The primary format token drives which symbology the preview draws
+          // (any `qr` alias → QR matrix); the scanner resolves the same token
+          // through the same alias table, so draw and decode stay in lockstep.
+          <BarcodePreview
+            value={value}
+            height={compact ? 24 : 36}
+            moduleWidth={1}
+            format={formats?.[0]}
+          />
         ) : null}
       </InputParts>
       <BarcodeScanner