@multiplatform.one/forms 7.4.1 → 7.6.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 { QR_QUIET_ZONE_MODULES, 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,210 @@ 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", () => {
+  /** The field's own default bound (Barcode/index.tsx): 36 comfortable, 24 compact. */
+  const formHeight = 36;
+
+  it("draws the QR matrix canvas-free (labeled image, real module rows)", () => {
+    const result = renderWithProviders(
+      <BarcodePreview value="SKU-001234" format="qr" height={formHeight} />,
+    );
+    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" height={formHeight} />,
+    );
+    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" height={formHeight} />,
+    );
+    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" height={formHeight} />,
+    );
+    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();
+  });
+});
+
+/**
+ * Whole-pixel modules. Measured on the media-11 board at DPR 2 BEFORE this
+ * rule existed: bounds 33, 72 and 96 decoded and bounds 18, 24, 44 and 56 did
+ * not — not a size floor (33 read, 44 did not) but a resampling one. 33/33
+ * modules is exactly 1.000 px per module; 44/33 is 1.333, and a fractional
+ * module rounds to different widths across the grid. It reached the field's
+ * own default path: at height 36 / moduleWidth 1 a payload over 26 bytes
+ * clamps under one pixel per module and stops reading, which is precisely the
+ * scan-to-draw round trip MPO-53 AC-9 exists to close.
+ */
+describe("BarcodePreview — qr geometry is whole-pixel or nothing", () => {
+  const qrSquare = (ui: React.ReactElement) =>
+    renderWithProviders(ui).container.querySelector(
+      '[data-testid="barcode-preview-qr"]',
+    ) as HTMLElement | null;
+
+  /**
+   * Tamagui compiles geometry to atomic classes (`_w-87px`, `_pt-12px`), not
+   * inline style, so the measurement reads the class list. Same numbers, and
+   * it is the class the browser actually applies.
+   */
+  const px = (el: HTMLElement, prefix: string) => {
+    const hit = (el.getAttribute("class") ?? "")
+      .split(/\s+/)
+      .find((c) => c.startsWith(`_${prefix}-`));
+    return hit ? Number.parseFloat(hit.slice(prefix.length + 2)) : Number.NaN;
+  };
+  const edgeOf = (el: HTMLElement) => px(el, "w");
+  const quietOf = (el: HTMLElement) => px(el, "pt");
+
+  /** Modules per side including the 4-module quiet zone on each side. */
+  const totalModules = (value: string) => encodeQr(value)!.size + 2 * QR_QUIET_ZONE_MODULES;
+
+  it("draws at the natural size when moduleWidth fits under the bound", () => {
+    // 6 bytes → version 1 → 21 + 8 = 29 modules. moduleWidth 3 asks for 3px
+    // modules and the 120px bound allows 4, so 3 wins: 29 × 3 = 87.
+    const value = "SHC-42";
+    expect(totalModules(value)).toBe(29);
+    const square = qrSquare(
+      <BarcodePreview value={value} format="qr" height={120} moduleWidth={3} />,
+    );
+    expect(square).not.toBeNull();
+    expect(edgeOf(square!)).toBe(87);
+    expect(px(square!, "h")).toBe(87);
+    expect(quietOf(square!)).toBe(12); // 4 modules × 3px
+  });
+
+  it("treats the height bound as a CEILING, never a target", () => {
+    // 18 bytes → version 2 → 25 + 8 = 33 modules at moduleWidth 1 = 33px. A
+    // 44px bound does not stretch it to 44 and a fractional 1.333px module.
+    const value = "SHC-COMPOSE01-0417";
+    expect(totalModules(value)).toBe(33);
+    for (const height of [36, 44, 56]) {
+      const square = qrSquare(<BarcodePreview value={value} format="qr" height={height} />);
+      expect(edgeOf(square!)).toBe(33);
+      expect(quietOf(square!)).toBe(4);
+    }
+  });
+
+  it("snaps the module DOWN to a whole pixel rather than draw a fractional one", () => {
+    // 33 modules under a 96px bound would be 2.909px per module. Snap to 2.
+    const square = qrSquare(
+      <BarcodePreview value="SHC-COMPOSE01-0417" format="qr" height={96} moduleWidth={9} />,
+    );
+    expect(edgeOf(square!)).toBe(66);
+    expect(quietOf(square!)).toBe(8);
+  });
+
+  it("never draws a module narrower than one whole pixel — every bound, every payload", () => {
+    for (const value of ["SHC-42", "SHC-COMPOSE01-0417", "SHC-COMPOSE01-BACKUP-2026-08-28"]) {
+      for (const height of [18, 24, 29, 33, 36, 37, 44, 66, 96, 120]) {
+        for (const moduleWidth of [1, 2, 3]) {
+          const square = qrSquare(
+            <BarcodePreview value={value} format="qr" height={height} moduleWidth={moduleWidth} />,
+          );
+          if (!square) continue; // honest text fallback — asserted below
+          const edge = edgeOf(square);
+          const pad = quietOf(square);
+          const cell = edge / totalModules(value);
+          expect(Number.isInteger(cell)).toBe(true);
+          expect(cell).toBeGreaterThanOrEqual(1);
+          expect(cell).toBeLessThanOrEqual(moduleWidth);
+          expect(edge).toBeLessThanOrEqual(height); // LC-10 containment
+          expect(pad).toBe(cell * QR_QUIET_ZONE_MODULES);
+        }
+      }
+    }
+  });
+
+  it("falls back to honest text under one whole pixel per module", () => {
+    // compact (24) cannot hold 33 modules at a whole pixel each.
+    const value = "SHC-COMPOSE01-0417";
+    const result = renderWithProviders(<BarcodePreview value={value} format="qr" height={24} />);
+    expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).toBeNull();
+    expect(result.container.textContent).toContain(value);
+  });
+
+  it("falls back to honest text when the payload outgrows the form bound", () => {
+    // 31 bytes → version 3 → 29 + 8 = 37 modules, which does not fit 36px at
+    // one whole pixel each. This is the case that silently shipped unreadable.
+    const value = "SHC-COMPOSE01-BACKUP-2026-08-28";
+    expect(totalModules(value)).toBe(37);
+    const result = renderWithProviders(<BarcodePreview value={value} format="qr" height={36} />);
+    expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).toBeNull();
+    expect(result.container.textContent).toContain(value);
+  });
+
+  it("draws nothing at all when the host already shows the value (textFallback false)", () => {
+    const value = "SHC-COMPOSE01-0417";
+    const result = renderWithProviders(
+      <BarcodePreview value={value} format="qr" height={24} textFallback={false} />,
+    );
+    expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).toBeNull();
+    expect(result.container.textContent).not.toContain(value);
+  });
+
+  it("leaves the 1-D strip's geometry untouched", () => {
+    const result = renderWithProviders(<BarcodePreview value="SKU-001234" height={18} />);
+    expect(result.container.querySelector('[data-testid="barcode-preview"]')).not.toBeNull();
+    expect(result.container.querySelector('[data-testid="barcode-preview-qr"]')).toBeNull();
+  });
+});

package/src/fields/Barcode/BarcodePreview.tsx

@@ -1,31 +1,82 @@
 /**
- * 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 is drawn at
+ * a WHOLE number of pixels per module, capped by `moduleWidth` and by the
+ * `height` bound — 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), or a QR whose modules would be under one
+ * whole pixel at the host's bound, falls back to the raw value as mono text —
+ * never a fake, truncated or unreadable 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 CEILING and draws at
+   * the largest whole-pixel module that fits under it.
+   */
   height?: number;
-  /** Width of one barcode module in px. */
+  /** Width of one barcode module in px. Fractional values floor for QR. */
   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;
+  /**
+   * Render the raw value as mono text when the symbology cannot draw it —
+   * non-ASCII for Code 128 B, over capacity or under one whole pixel per
+   * module for QR. Default true, which is right for a standalone preview:
+   * disappearing silently would be worse than an honest string. A host that
+   * ALREADY shows the value beside the symbol (FieldDisplay) passes false, so
+   * an undrawable symbol contributes nothing instead of printing it twice.
+   */
+  textFallback?: boolean;
+}
+
+/** 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 +84,23 @@ export function BarcodePreview({
   height = 18,
   moduleWidth = 1,
   showText = false,
+  format,
+  textFallback = true,
 }: 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}
+        textFallback={textFallback}
+      />
     );
   }
+  const runs = encodeCode128B(value);
+  if (!runs) return textFallback ? <MonoValue value={value} /> : null;
   const quietZone = moduleWidth * 10;
   return (
     <View
@@ -76,11 +134,79 @@ 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,
+  textFallback,
+}: {
+  value: string;
+  height: number;
+  moduleWidth: number;
+  showText: boolean;
+  textFallback: boolean;
+}) {
+  const matrix = encodeQr(value);
+  if (!matrix) return textFallback ? <MonoValue value={value} /> : null;
+  // A module must land on a WHOLE pixel. A fractional module width rounds to
+  // different widths across the grid, so a decoder cannot resample the symbol —
+  // measured on the media-11 board at DPR 2: the 33px square (1.000 px/module)
+  // decoded and the 44px one (1.333 px/module) did not, in either scheme. So
+  // the module is the largest whole pixel that fits, capped by `moduleWidth`
+  // and by the host's `height` bound (LC-10 — the square never exceeds its
+  // host, and the bound is a ceiling, never a target).
+  const totalModules = matrix.size + 2 * QR_QUIET_ZONE_MODULES;
+  const cell = Math.floor(Math.min(moduleWidth, height / totalModules));
+  // Under one whole pixel there is no readable symbol to draw at all. Fall
+  // back to the value as text, the same honest contract the over-capacity and
+  // non-ASCII cases have: a symbol no reader can resample is decoration, and
+  // decoration that looks like data is the one thing this component refuses to
+  // paint. This is what a `compact` bound (24) or a table-row bound does to
+  // anything past a short SKU.
+  if (cell < 1) return textFallback ? <MonoValue value={value} /> : null;
+  const edge = cell * 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