@multiplatform.one/config 7.42.0 → 7.44.0

package/README.md

@@ -143,8 +143,13 @@ the enclosing `Svg` has a `viewBox`, including one passed through a spread, or
 when the mark is a fragment drawn into an `Svg` elsewhere. Primitives inside an
 `Svg` with no `viewBox`, and the `Svg` element's own size, are still reported.
 
-Every violation is tagged with its rule: `hex`, `geometry`, `inline-spacing`,
-`raw-control`, `styled-mpo` or `token-file`.
+A `focusStyle`, `focusVisibleStyle` or `focusWithinStyle` that paints its own
+outline, box shadow, shadow or elevation is reported as `field-focus`. Focus
+looks come from MPO: fields take `FIELD_FOCUS_STYLE` (the accent border), other
+controls the theme's focus ring. Zeroing those keys is allowed.
+
+Every violation is tagged with its rule: `field-focus`, `hex`, `geometry`,
+`inline-spacing`, `raw-control`, `styled-mpo` or `token-file`.
 
 #### Ratchet
 

package/design-lint.mjs

@@ -51,6 +51,11 @@ const svgPrimitives = new Set([
   "Use",
 ]);
 const svgRoots = new Set(["Svg", "Symbol"]);
+// FZ-7717: focus looks come from MPO (FIELD_FOCUS_STYLE / the control ring).
+// A use site that paints its own focus ring or shadow forks the look.
+const focusPaint =
+  /^(?:outline(?:Width|Color|Offset)?|boxShadow|shadow(?:Color|Opacity|Radius|Offset)|elevation)$/;
+const focusStates = new Set(["focusStyle", "focusVisibleStyle", "focusWithinStyle"]);
 const tokenFactories = new Set([
   "createTokens",
   "createTamagui",
@@ -59,6 +64,7 @@ const tokenFactories = new Set([
   "createFont",
 ]);
 export const designRules = [
+  "field-focus",
   "hex",
   "geometry",
   "inline-spacing",
@@ -67,7 +73,23 @@ export const designRules = [
   "styled-mpo",
   "token-file",
 ];
-export function inspectDesign(source, filename) {
+export function isFreeformBoard(filename, projectRoot = process.cwd()) {
+  const root = path.resolve(projectRoot);
+  const absolute = path.resolve(root, filename);
+  const inArea = (name, base) =>
+    path
+      .relative(base, name)
+      .replaceAll("\\", "/")
+      .startsWith("apps/storybook-expo/boards/freeform/");
+  return (
+    inArea(absolute, root) &&
+    (!existsSync(absolute) ||
+      inArea(realpathSync(absolute), existsSync(root) ? realpathSync(root) : root))
+  );
+}
+
+export function inspectDesign(source, filename, projectRoot = process.cwd()) {
+  if (isFreeformBoard(filename, projectRoot)) return [];
   const file = ts.createSourceFile(
     filename,
     source,
@@ -208,6 +230,42 @@ export function inspectDesign(source, filename) {
       return spacing(value.whenTrue) || spacing(value.whenFalse);
     return false;
   }
+  function inert(node) {
+    const value = resolve(node);
+    if (ts.isNumericLiteral(value)) return Number(value.text) === 0;
+    if (ts.isStringLiteralLike(value)) return /^(?:0(?:px)?|none|transparent)$/.test(value.text);
+    return value.kind === ts.SyntaxKind.UndefinedKeyword || value.getText(file) === "undefined";
+  }
+  function paintsFocus(node, seen = new Set()) {
+    const value = resolve(node);
+    if (seen.has(value)) return undefined;
+    seen.add(value);
+    if (ts.isConditionalExpression(value))
+      return paintsFocus(value.whenTrue, seen) ?? paintsFocus(value.whenFalse, seen);
+    if (!ts.isObjectLiteralExpression(value)) return undefined;
+    for (const prop of value.properties) {
+      if (ts.isSpreadAssignment(prop)) {
+        const inner = paintsFocus(prop.expression, seen);
+        if (inner) return inner;
+      } else if (
+        ts.isPropertyAssignment(prop) &&
+        focusPaint.test(name(prop.name)) &&
+        !inert(prop.initializer)
+      )
+        return prop;
+    }
+    return undefined;
+  }
+  function checkFocus(key, value, node) {
+    if (!focusStates.has(key)) return;
+    const painted = paintsFocus(value);
+    if (painted)
+      report(
+        node,
+        "field-focus",
+        `${key} paints its own ${name(painted.name)}; focus comes from MPO (FIELD_FOCUS_STYLE).`,
+      );
+  }
   function report(node, rule, message) {
     const { line, character } = file.getLineAndCharacterOfPosition(node.getStart(file));
     errors.push(`${filename}:${line + 1}:${character + 1}: [${rule}] ${message}`);
@@ -244,6 +302,7 @@ export function inspectDesign(source, filename) {
             : prop.initializer;
           if (!initializer) return;
           const key = name(prop.name);
+          checkFocus(key, initializer, prop);
           if (layout.test(key) && numeric(initializer))
             report(prop, "geometry", `${name(prop.name)} requires a token, not a numeric literal.`);
           if (/style$/i.test(key) && spacing(initializer))
@@ -330,6 +389,7 @@ export function inspectDesign(source, filename) {
       const value = ts.isJsxExpression(node.initializer)
         ? node.initializer.expression
         : node.initializer;
+      if (value) checkFocus(key, value, node);
       if (value && (key.startsWith("$") || /style$/i.test(key))) inspectProps(value);
       if (value && layout.test(key) && numeric(value) && !svgArtwork(node.parent.parent))
         report(node, "geometry", `${key} requires a token, not a numeric literal.`);
@@ -365,10 +425,11 @@ const ignoredDirectories = new Set([
   "scripts",
 ]);
 
-export function designFiles(input) {
+export function designFiles(input, projectRoot = process.cwd()) {
   const root = path.resolve(input);
   const info = statSync(root);
   const eligible = (filename) =>
+    !isFreeformBoard(path.resolve(root, filename), projectRoot) &&
     /\.[cm]?[jt]sx?$/.test(filename) &&
     !/\.(?:test|spec|stories|config|gen|generated|d)\.[cm]?[jt]sx?$/.test(filename);
   if (info.isFile()) return eligible(root) ? [root] : [];
@@ -427,7 +488,7 @@ export function countDesign(errors) {
 }
 
 export function scanDesign(paths) {
-  const files = [...new Set(paths.flatMap(designFiles))];
+  const files = [...new Set(paths.flatMap((input) => designFiles(input)))];
   if (!files.length) throw new Error("No application source files found in the supplied paths.");
   const errors = files.flatMap((filename) =>
     inspectDesign(readFileSync(filename, "utf8"), filename),

package/lint.mjs

@@ -79,6 +79,10 @@
  *    Size, spacing and radius are the preset's token scale; the only
  *    per-site control is Tamagui's own `size="$n"`. Specs are exempt: they
  *    are where the retirement is asserted.
+ * 17. Fail on a NESTED PRESS CLAIMANT (FZ-7792 NATIVE-PRESS-OWNER) — a view
+ *    with `pressStyle` / `focusVisibleStyle` and no press handler of its own
+ *    inside a JSX pressable. On native it claims the responder and the
+ *    pressable's onPress never runs. See press-lint.mjs.
  *
  * Usage:
  *   import { runConventionChecks } from "@multiplatform.one/config/lint";
@@ -94,6 +98,7 @@ import { dirname, join, relative } from "node:path";
 import { pathToFileURL } from "node:url";
 import { DRAWING_PRAGMA, isDrawingFile, readDrawingRegistry } from "./drawing-registry.mjs";
 import { findHexEscapes } from "./oxlint.mjs";
+import { exportedPressClaimants, findNestedPressClaimants } from "./press-lint.mjs";
 import { readHexEscapeRegistry, readSizeRecipeEscapeRegistry } from "./spec-registry.mjs";
 
 /**
@@ -1531,7 +1536,7 @@ const STORY_HONESTY_MARKER_RE = /\bforeignContrastSpecimen\s*:\s*true\b/;
  * forms reaches frappe through its @multiplatform.one/storybook devDependency,
  * so the import would close a workspace cycle.
  */
-const STORY_HONESTY_EXEMPT_PREFIXES = ["public/frappe/"];
+const STORY_HONESTY_EXEMPT_PREFIXES = ["public/frappe/", "apps/storybook-expo/boards/freeform/"];
 
 const TAMAGUI_IMPORT_RE = /import\s+([^;'"]*?)from\s*["']tamagui["']/g;
 
@@ -1930,6 +1935,7 @@ function readLayoutBaselines() {
 /** Screen code: where a page composes chrome (not the catalog primitives). */
 function isScreenSource(rel) {
   const path = rel.replaceAll("\\", "/");
+  if (path.startsWith("apps/storybook-expo/boards/freeform/")) return false;
   return (
     path.startsWith("public/backoffice/src/") ||
     path.startsWith("public/frappe-ui/src/") ||
@@ -1998,7 +2004,12 @@ function checkHugContent() {
   const seen = new Set();
   for (const { rel, src } of sourceFiles()) {
     const path = rel.replaceAll("\\", "/");
-    if (!/\.(tsx|ts)$/.test(path) || /\.stories\./.test(path)) continue;
+    if (
+      !/\.(tsx|ts)$/.test(path) ||
+      /\.stories\./.test(path) ||
+      path.startsWith("apps/storybook-expo/boards/freeform/")
+    )
+      continue;
     const live = nonCommentOffsets(src);
     const hits = [...src.matchAll(SPREAD_JUSTIFY_RE)].filter((m) => live[m.index ?? 0] === 1);
     const allowed = baselines.hugContent[path] ?? 0;
@@ -2093,6 +2104,35 @@ function checkAccentSolidOwners() {
   return violations;
 }
 
+/**
+ * FZ-7792 NATIVE-PRESS-OWNER: see press-lint.mjs. Two passes, so a styled
+ * claimant exported by one file is caught where another file nests it.
+ */
+function checkNativePressOwner() {
+  /** @type {{ rel: string, src: string, abs: string }[]} */
+  const files = [];
+  walkOwnedSource((filePath) => {
+    if (!/\.(?:tsx|jsx)$/.test(filePath) || /\.(?:spec|test)\./.test(filePath)) return;
+    files.push({
+      abs: filePath,
+      rel: relative(ROOT, filePath).replaceAll("\\", "/"),
+      src: readFileSync(filePath, "utf8"),
+    });
+  });
+  /** @type {Set<string>} */
+  const imported = new Set();
+  for (const { abs, src } of files)
+    for (const name of exportedPressClaimants(src, abs)) imported.add(name);
+  /** @type {string[]} */
+  const violations = [];
+  for (const { abs, rel, src } of files)
+    for (const hit of findNestedPressClaimants(src, abs, imported))
+      violations.push(
+        `${rel}:${hit.line} — <${hit.tag}> claims the press inside <${hit.owner}>; move its press look to the owner's group ("$group-<name>-press")`,
+      );
+  return violations;
+}
+
 /**
  * Run structural convention checks over a consumer tree.
  *
@@ -2125,6 +2165,7 @@ export function runConventionChecks(options = {}) {
   const oneSidebar = checkOneSidebar();
   const hugContent = checkHugContent();
   const responsiveParity = checkResponsiveParity();
+  const nativePressOwner = checkNativePressOwner();
   let failed = false;
 
   for (const [rule, list] of /** @type {const} */ ([
@@ -2140,6 +2181,10 @@ export function runConventionChecks(options = {}) {
       "Convention (LC-103 RESPONSIVE-PARITY): a phone shows the same information. Content hidden on phones names its phone twin (⋯ menu, icon twin, sheet) with a `responsive-parity: <reason>` comment.",
       responsiveParity,
     ],
+    [
+      'Convention (FZ-7792 NATIVE-PRESS-OWNER, check 17): one view owns a press. On native, a view with pressStyle or focusVisibleStyle and no handler claims the touch, and React Native gives it to the deepest claimant, so a pressable\'s onPress never runs when the tap lands on that child. Put `group="<name>"` on the pressable and move the child\'s press look to `"$group-<name>-press"`.',
+      nativePressOwner,
+    ],
   ])) {
     if (!list.length) continue;
     failed = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/config",
-  "version": "7.42.0",
+  "version": "7.44.0",
   "description": "Shared build and test configuration presets for multiplatform.one",
   "keywords": [
     "config",
@@ -46,7 +46,9 @@
     "!tsconfig/types",
     "types",
     "!types/.tsbuildinfo",
-    "design-lint.mjs"
+    "design-lint.mjs",
+    "press-lint.mjs",
+    "press-lint.d.ts"
   ],
   "type": "module",
   "sideEffects": false,
@@ -104,7 +106,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/utils": "^7.42.0",
+    "@multiplatform.one/utils": "^7.44.0",
     "@tamagui/vite-plugin": "2.7.6",
     "@vitejs/plugin-react": "^6.1.2",
     "dotenv": "^17.4.2",

package/press-lint.d.ts

@@ -0,0 +1,13 @@
+export interface NestedPressClaimant {
+  line: number;
+  tag: string;
+  owner: string;
+}
+
+export function exportedPressClaimants(source: string, filename: string): string[];
+
+export function findNestedPressClaimants(
+  source: string,
+  filename: string,
+  imported?: Set<string>,
+): NestedPressClaimant[];

package/press-lint.mjs

@@ -0,0 +1,255 @@
+/**
+ * NATIVE-PRESS-OWNER (FZ-7792): one view owns a press.
+ *
+ * On native without react-native-gesture-handler, tamagui synthesizes an
+ * onPress for any view carrying `pressStyle` or `focusVisibleStyle` and wires
+ * it through the responder system, whose onStartShouldSetResponder answers
+ * true. React Native grants a touch to the DEEPEST view that asks, so such a
+ * view inside a real pressable takes the tap: it paints its press colour and
+ * the pressable's onPress never runs. On web the DOM click bubbles to the
+ * pressable, so web specs, Storybook and jsdom all pass (Alert's action pill,
+ * FZ-7792).
+ *
+ * Flagged: a JSX element that claims the touch without handling it, nested
+ * among the JSX children of an element that handles it.
+ *
+ * - claims: a `pressStyle` or `focusVisibleStyle` prop, or a tag bound to
+ *   `styled(...)` whose config carries either key at any depth (variants
+ *   included), or to `styled()` of such a tag, in this file or imported by
+ *   name from another scanned file that exports it;
+ * - handles: `onPress`, `onPressIn`, `onPressOut` or `onLongPress`, or being
+ *   the child of an `asChild` element, which slots its handler in;
+ * - not flagged: a claimant that handles the press itself, renders `asChild`,
+ *   is a text input (tamagui wires inputs' presses directly, never through
+ *   the responder), carries `pointerEvents="box-none"`, or sits under (or
+ *   carries) `pointerEvents="none"`.
+ *
+ * Fix: move the look onto the owner's group state (`group="name"` on the
+ * pressable, `"$group-name-press": {...}` on the child).
+ */
+import ts from "typescript";
+
+const claimKeys = new Set(["pressStyle", "focusVisibleStyle"]);
+const pressHandlers = new Set(["onPress", "onPressIn", "onPressOut", "onLongPress"]);
+const inputTag = /(?:Input|TextArea)$/;
+
+/** @param {ts.Node} node */
+function keyName(node) {
+  if (ts.isIdentifier(node) || ts.isStringLiteral(node)) return node.text;
+  return undefined;
+}
+
+/** @param {ts.Expression} expr */
+function unwrap(expr) {
+  let current = expr;
+  while (
+    ts.isAsExpression(current) ||
+    ts.isSatisfiesExpression(current) ||
+    ts.isParenthesizedExpression(current)
+  )
+    current = current.expression;
+  return current;
+}
+
+/**
+ * `styled(Base, {...})`, also under `.styleable(...)` and friends.
+ * @param {ts.Expression} expr
+ * @returns {ts.CallExpression | undefined}
+ */
+function styledCall(expr) {
+  let current = unwrap(expr);
+  while (ts.isCallExpression(current)) {
+    const callee = current.expression;
+    if (ts.isIdentifier(callee) && callee.text === "styled") return current;
+    if (ts.isPropertyAccessExpression(callee) && ts.isCallExpression(callee.expression))
+      current = callee.expression;
+    else return undefined;
+  }
+  return undefined;
+}
+
+/**
+ * @param {string} source
+ * @param {string} filename
+ */
+function parse(source, filename) {
+  const file = ts.createSourceFile(
+    filename,
+    source,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TSX,
+  );
+  /** @type {Map<string, ts.Expression>} */
+  const objects = new Map();
+  /** @type {Map<string, ts.CallExpression>} */
+  const styledCalls = new Map();
+  /** @type {Set<string>} */
+  const exported = new Set();
+  /** @type {Set<string>} */
+  const importedNames = new Set();
+  /** @param {ts.Node} node */
+  function collect(node) {
+    if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && node.initializer) {
+      const init = unwrap(node.initializer);
+      if (ts.isObjectLiteralExpression(init)) objects.set(node.name.text, init);
+      const call = styledCall(init);
+      if (call) styledCalls.set(node.name.text, call);
+      const statement = node.parent?.parent;
+      if (
+        statement &&
+        ts.isVariableStatement(statement) &&
+        statement.modifiers?.some((m) => m.kind === ts.SyntaxKind.ExportKeyword)
+      )
+        exported.add(node.name.text);
+    }
+    if (ts.isExportSpecifier(node) && !node.parent.parent.moduleSpecifier)
+      exported.add((node.propertyName ?? node.name).text);
+    if (ts.isImportSpecifier(node) && !node.isTypeOnly) importedNames.add(node.name.text);
+    ts.forEachChild(node, collect);
+  }
+  collect(file);
+
+  /** @param {ts.Node | undefined} node @param {Set<ts.Node>} seen @returns {boolean} */
+  function carriesClaim(node, seen = new Set()) {
+    if (!node || seen.has(node)) return false;
+    seen.add(node);
+    if (ts.isIdentifier(node)) return carriesClaim(objects.get(node.text), seen);
+    if (ts.isObjectLiteralExpression(node))
+      return node.properties.some((prop) => {
+        if (ts.isSpreadAssignment(prop)) return carriesClaim(prop.expression, seen);
+        const key = prop.name && keyName(prop.name);
+        if (key && claimKeys.has(key)) return true;
+        return ts.isPropertyAssignment(prop) && carriesClaim(prop.initializer, seen);
+      });
+    if (
+      ts.isParenthesizedExpression(node) ||
+      ts.isAsExpression(node) ||
+      ts.isSatisfiesExpression(node)
+    )
+      return carriesClaim(node.expression, seen);
+    if (ts.isConditionalExpression(node))
+      return carriesClaim(node.whenTrue, seen) || carriesClaim(node.whenFalse, seen);
+    return false;
+  }
+
+  /** @type {Map<string, boolean>} */
+  const cache = new Map();
+  /**
+   * @param {string} name
+   * @param {Set<string>} imported claimant names other files export
+   * @returns {boolean}
+   */
+  function isClaimant(name, imported) {
+    if (cache.has(name)) return /** @type {boolean} */ (cache.get(name));
+    cache.set(name, false);
+    const call = styledCalls.get(name);
+    let result = false;
+    if (call) {
+      const [base, ...configs] = call.arguments;
+      result =
+        configs.some((config) => carriesClaim(config)) ||
+        (!!base && ts.isIdentifier(base) && isClaimant(base.text, imported));
+    } else if (importedNames.has(name) && imported.has(name)) {
+      result = true;
+    }
+    cache.set(name, result);
+    return result;
+  }
+  /** @param {string} name */
+  function isInput(name) {
+    for (let current = name, hops = 0; current && hops < 8; hops++) {
+      if (inputTag.test(current)) return true;
+      const base = styledCalls.get(current)?.arguments[0];
+      current = base && ts.isIdentifier(base) ? base.text : "";
+    }
+    return false;
+  }
+  return { file, exported, isClaimant, isInput };
+}
+
+/**
+ * Names this file exports that claim a press on native (a styled component
+ * whose config carries pressStyle or focusVisibleStyle).
+ *
+ * @param {string} source
+ * @param {string} filename
+ * @returns {string[]}
+ */
+export function exportedPressClaimants(source, filename) {
+  if (!/pressStyle|focusVisibleStyle/.test(source)) return [];
+  const { exported, isClaimant, isInput } = parse(source, filename);
+  return [...exported].filter((name) => !isInput(name) && isClaimant(name, new Set()));
+}
+
+/**
+ * @param {string} source
+ * @param {string} filename
+ * @param {Set<string>} [imported] claimant names exported by other scanned files
+ * @returns {{ line: number, tag: string, owner: string }[]}
+ */
+export function findNestedPressClaimants(source, filename, imported = new Set()) {
+  if (!/on(?:Press|LongPress)|asChild/.test(source)) return [];
+  const { file, isClaimant, isInput } = parse(source, filename);
+
+  /** @param {ts.JsxOpeningLikeElement} el */
+  function attrs(el) {
+    /** @type {Map<string, ts.JsxAttribute>} */
+    const map = new Map();
+    for (const attr of el.attributes.properties)
+      if (ts.isJsxAttribute(attr)) map.set(attr.name.getText(file), attr);
+    return map;
+  }
+  /** @param {ts.JsxAttribute | undefined} attr */
+  function literal(attr) {
+    if (!attr?.initializer) return attr ? true : undefined;
+    if (ts.isStringLiteral(attr.initializer)) return attr.initializer.text;
+    const expr = ts.isJsxExpression(attr.initializer) ? attr.initializer.expression : undefined;
+    if (expr && ts.isStringLiteral(expr)) return expr.text;
+    return undefined;
+  }
+
+  /** @type {{ line: number, tag: string, owner: string }[]} */
+  const found = [];
+  /**
+   * @param {ts.Node} node
+   * @param {string | undefined} owner the nearest pressable JSX ancestor
+   * @param {string | undefined} slot an `asChild` parent handing this element its handler
+   */
+  function visit(node, owner, slot) {
+    const el = ts.isJsxElement(node)
+      ? node.openingElement
+      : ts.isJsxSelfClosingElement(node)
+        ? node
+        : undefined;
+    if (!el) {
+      ts.forEachChild(node, (child) =>
+        visit(child, owner, ts.isJsxExpression(node) ? undefined : slot),
+      );
+      return;
+    }
+    const tag = el.tagName.getText(file);
+    const props = attrs(el);
+    const pointerEvents = literal(props.get("pointerEvents"));
+    if (pointerEvents === "none") return;
+    const handles = !!slot || [...pressHandlers].some((key) => props.has(key));
+    const named = ts.isIdentifier(el.tagName);
+    const claims =
+      !(named && isInput(tag)) &&
+      ([...claimKeys].some((key) => props.has(key)) || (named && isClaimant(tag, imported)));
+    if (owner && claims && !handles && !props.has("asChild") && pointerEvents !== "box-none") {
+      const { line } = file.getLineAndCharacterOfPosition(el.getStart(file));
+      found.push({ line: line + 1, tag, owner });
+    }
+    // Props render wherever the component puts them; only children are known
+    // to sit inside this element.
+    for (const attr of el.attributes.properties) visit(attr, owner, undefined);
+    if (ts.isJsxElement(node)) {
+      const childOwner = handles ? tag : owner;
+      const childSlot = props.has("asChild") ? tag : undefined;
+      for (const child of node.children) visit(child, childOwner, childSlot);
+    }
+  }
+  visit(file, undefined, undefined);
+  return found;
+}

package/src/lint.spec.ts

@@ -971,6 +971,22 @@ ${csfTail}`,
     expect(messages).toContain(`${file}:2 — \`Input as TamaguiInput\` from "tamagui"`);
   });
 
+  it("permits raw controls in freeform boards while preserving the catalog gate", () => {
+    const root = makeTree();
+    story(
+      root,
+      "apps/storybook-expo/boards/freeform/Demo.stories.tsx",
+      `import { Button } from "tamagui";${csfTail}`,
+    );
+    expect(run(root).code).toBe(0);
+    story(
+      root,
+      "apps/storybook-expo/stories/Demo.stories.tsx",
+      `import { Button } from "tamagui";${csfTail}`,
+    );
+    expect(run(root).messages).toContain("STORY-HONESTY");
+  });
+
   it("passes once the story carries parameters.foreignContrastSpecimen: true", () => {
     const root = makeTree();
     story(
@@ -1549,3 +1565,31 @@ const value = theme.accentBackground;`);
     expect(messages).toContain("public/components/src/Selected.tsx:2");
   });
 });
+
+describe("freeform helper layout exploration", () => {
+  it("exempts the board directory and retains layout checks on the same app helper", () => {
+    const root = makeTree();
+    mkdirSync(join(root, "docs"), { recursive: true });
+    writeFileSync(
+      join(root, "docs/layout-rule-baselines.json"),
+      JSON.stringify({ secondSidebar: [], hugContent: {} }),
+    );
+    const board = join(root, "apps/storybook-expo/boards/freeform/Row.tsx");
+    mkdirSync(join(board, ".."), { recursive: true });
+    const source =
+      'const row = <XStack justifyContent="space-between" $max-sm={{display:"none"}}><FilterSidebar/></XStack>;';
+    writeFileSync(board, source);
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const log = vi.spyOn(console, "log").mockImplementation(() => {});
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      expect(runConventionChecks({ roots: { root } })).toBe(0);
+      writeFileSync(join(root, "apps/demo/Row.tsx"), source);
+      expect(runConventionChecks({ roots: { root } })).toBe(1);
+    } finally {
+      error.mockRestore();
+      log.mockRestore();
+      warn.mockRestore();
+    }
+  });
+});

package/src/press-lint.spec.ts

@@ -0,0 +1,115 @@
+import { describe, expect, it } from "vitest";
+import { exportedPressClaimants, findNestedPressClaimants } from "../press-lint.mjs";
+
+const find = (source: string, imported?: Set<string>) =>
+  findNestedPressClaimants(source, "Fixture.tsx", imported).map((hit) => `${hit.tag}<${hit.owner}`);
+
+describe("findNestedPressClaimants (FZ-7792 NATIVE-PRESS-OWNER)", () => {
+  it("flags a styled pressStyle pill inside its pressable target (Alert's action, before the fix)", () => {
+    const source = `
+      const Target = styled(View, { name: "T", pressStyle: { opacity: 0.9 } });
+      const Pill = styled(View, { name: "P", pressStyle: { backgroundColor: "$color6" } });
+      export const A = ({ onPress }) => (
+        <Target onPress={onPress}>
+          <Pill><Text>Save</Text></Pill>
+        </Target>
+      );`;
+    expect(find(source)).toEqual(["Pill<Target"]);
+  });
+
+  it("passes the fix: the pill reads the owner's group press state", () => {
+    const source = `
+      const Target = styled(View, { name: "T", pressStyle: { opacity: 0.9 } });
+      const Pill = styled(View, { name: "P", "$group-action-press": { backgroundColor: "$color6" } });
+      export const A = ({ onPress }) => (
+        <Target group="action" onPress={onPress}>
+          <Pill><Text>Save</Text></Pill>
+        </Target>
+      );`;
+    expect(find(source)).toEqual([]);
+  });
+
+  it("flags an inline pressStyle or focusVisibleStyle prop, at any depth below the owner", () => {
+    const source = `
+      export const A = () => (
+        <View onPress={go}>
+          <XStack>
+            <View pressStyle={{ opacity: 0.5 }} />
+            <View focusVisibleStyle={{ outlineWidth: 2 }} />
+          </XStack>
+        </View>
+      );`;
+    expect(find(source)).toEqual(["View<View", "View<View"]);
+  });
+
+  it("follows styled() of a claimant and a config object bound to a name", () => {
+    const source = `
+      const look = { variants: { on: { true: { pressStyle: { opacity: 0.5 } } } } };
+      const Base = styled(View, look);
+      const Ring = styled(Base, { name: "Ring" });
+      export const A = () => <Pressable onPress={go}><Ring /></Pressable>;`;
+    expect(find(source)).toEqual(["Ring<Pressable"]);
+  });
+
+  it("treats the child of an asChild element as the owner it slots a handler into", () => {
+    const source = `
+      const Ring = styled(View, { pressStyle: { opacity: 0.5 } });
+      export const A = () => (
+        <Toast.Close asChild>
+          <CloseTarget><Ring /></CloseTarget>
+        </Toast.Close>
+      );`;
+    expect(find(source)).toEqual(["Ring<CloseTarget"]);
+  });
+
+  it("leaves alone a claimant that owns its press, renders asChild, is an input or cannot be touched", () => {
+    const source = `
+      const Ring = styled(View, { pressStyle: { opacity: 0.5 } });
+      const Field = styled(Input, { focusVisibleStyle: { borderColor: "$accent" } });
+      export const A = () => (
+        <View onPress={go}>
+          <Ring onPress={other} />
+          <Ring asChild><View /></Ring>
+          <Field />
+          <Input focusVisibleStyle={{ borderColor: "$accent" }} />
+          <Ring pointerEvents="box-none" />
+          <View pointerEvents="none"><Ring /></View>
+        </View>
+      );`;
+    expect(find(source)).toEqual([]);
+  });
+
+  it("does not treat a prop's element as a child of the owner", () => {
+    const source = `
+      const Ring = styled(View, { pressStyle: { opacity: 0.5 } });
+      export const A = () => <Row onPress={go} trailing={<Ring />} />;`;
+    expect(find(source)).toEqual([]);
+  });
+
+  it("ignores a claimant with no pressable around it", () => {
+    const source = `
+      const Ring = styled(View, { pressStyle: { opacity: 0.5 } });
+      export const A = () => <View><Ring /></View>;`;
+    expect(find(source)).toEqual([]);
+  });
+
+  it("flags a claimant another file exports when it is imported by name", () => {
+    const source = `
+      import { Pill } from "./pill";
+      export const A = () => <View onPress={go}><Pill /></View>;`;
+    expect(find(source)).toEqual([]);
+    expect(find(source, new Set(["Pill"]))).toEqual(["Pill<View"]);
+  });
+});
+
+describe("exportedPressClaimants", () => {
+  it("lists exported styled claimants and skips inputs and plain views", () => {
+    const source = `
+      export const Pill = styled(View, { pressStyle: { opacity: 0.5 } });
+      const Ring = styled(View, { focusVisibleStyle: { outlineWidth: 2 } });
+      export const Plain = styled(View, { hoverStyle: { opacity: 0.5 } });
+      export const Field = styled(TextInput, { focusVisibleStyle: { outlineWidth: 2 } });
+      export { Ring };`;
+    expect(exportedPressClaimants(source, "Fixture.tsx").sort()).toEqual(["Pill", "Ring"]);
+  });
+});